/* pk-style-source:0 */ /* /graphite-dark-r1.css */ /* Shared dark palette. Pilot aliases and overrides belong to the active panel. */ @layer pp-graphite-dark { html[data-game-theme="dark"] { --pp-dark-surface-0: #1b1b1d; --pp-dark-surface-1: #242426; --pp-dark-surface-2: #303033; --pp-dark-text: #f2f1f3; --pp-dark-text-muted: #c1c0c6; --pp-dark-border: #4b4b50; --pp-dark-control-border: #89898f; --pp-dark-focus: #c7b8ff; --pp-dark-accent: #c7b8ff; --pp-dark-action: #d8ccff; --pp-dark-on-action: #272230; --pp-dark-error: #ffaaa5; --pp-dark-success: #a9d9b3; --pp-dark-warning: #efcd8b; } html[data-game-theme="dark"] #sidePanel:is(.is-factions-panel, .is-settings-panel) { --pp-dark-close-hover: #3b3b3f; --ui-paper: var(--pp-dark-surface-0); --ui-card: var(--pp-dark-surface-1); --ui-soft: var(--pp-dark-surface-2); --ui-hover: var(--pp-dark-surface-2); --ui-input: var(--pp-dark-surface-0); --ui-ink: var(--pp-dark-text); --ui-muted: var(--pp-dark-text-muted); --ui-line: var(--pp-dark-border); --ui-control-line: var(--pp-dark-control-border); --ui-focus: var(--pp-dark-focus); --ui-accent: var(--pp-dark-accent); --ui-tint: var(--pp-dark-surface-2); --ui-primary: var(--pp-dark-action); --ui-primary-hover: var(--pp-dark-focus); --ui-on-accent: var(--pp-dark-on-action); --ui-positive: var(--pp-dark-success); --ui-danger: var(--pp-dark-error); --ui-warning: var(--pp-dark-warning); --ui-positive-bg: var(--pp-dark-surface-2); --ui-danger-bg: var(--pp-dark-surface-2); --ui-warning-bg: var(--pp-dark-surface-2); background-color: var(--pp-dark-surface-0) !important; color: var(--pp-dark-text) !important; border-color: var(--pp-dark-border) !important; } html[data-game-theme="dark"] #sidePanel:is(.is-factions-panel, .is-settings-panel) > .panel-close, html[data-game-theme="dark"] #sidePanel:is(.is-factions-panel, .is-settings-panel) > .mobile-window-head > .mobile-window-close { background: var(--pp-dark-surface-2) !important; color: var(--pp-dark-text) !important; border-color: var(--pp-dark-control-border) !important; } html[data-game-theme="dark"] #sidePanel:is(.is-factions-panel, .is-settings-panel) > .panel-close:hover:not(:disabled), html[data-game-theme="dark"] #sidePanel:is(.is-factions-panel, .is-settings-panel) > .mobile-window-head > .mobile-window-close:hover:not(:disabled) { background: var(--pp-dark-close-hover) !important; } html[data-game-theme="dark"] #sidePanel:is(.is-factions-panel, .is-settings-panel) :is(button, a, input, select, textarea, summary):focus-visible, html[data-game-theme="dark"] #sidePanel.is-settings-panel :is(.setting-toggle, .setting-side-choice, .setting-theme):has(input:focus-visible) { outline: 2px solid var(--pp-dark-focus) !important; outline-offset: 2px !important; } html[data-game-theme="dark"] #sidePanel.is-factions-panel .fc { --fc-accent: var(--pp-dark-accent) !important; --fc-paper: var(--pp-dark-surface-1); --fc-soft: var(--pp-dark-surface-2); --fc-ink: var(--pp-dark-text); --fc-muted: var(--pp-dark-text-muted); --fc-line: var(--pp-dark-border); } html[data-game-theme="dark"] #sidePanel.is-factions-panel .fc :is(.fc-button, .fc-faction, .fc-clan-row, input:not([type="checkbox"]), select, textarea), html[data-game-theme="dark"] #sidePanel.is-settings-panel .settings-workbench :is(.setting-side-choice, .setting-theme, .settings-reset, select, .settings-controls-nav button, .binding-row button) { background-color: var(--pp-dark-surface-1) !important; color: var(--pp-dark-text) !important; border-color: var(--pp-dark-control-border) !important; box-shadow: none !important; } html[data-game-theme="dark"] #sidePanel.is-factions-panel .fc :is(.fc-button, .fc-faction, .fc-clan-row):hover:not(:disabled), html[data-game-theme="dark"] #sidePanel.is-settings-panel .settings-workbench :is(.setting-side-choice, .setting-theme, .settings-reset, .settings-controls-nav button, .binding-row button):hover { background-color: var(--pp-dark-surface-2) !important; } html[data-game-theme="dark"] #sidePanel.is-factions-panel .fc .fc-tabs > button.is-active, html[data-game-theme="dark"] #sidePanel.is-factions-panel .fc .fc-filter > button:is(.is-active, [aria-pressed="true"]), html[data-game-theme="dark"] #sidePanel.is-settings-panel .settings-navigation > button[aria-pressed="true"], html[data-game-theme="dark"] #sidePanel.is-settings-panel .settings-tabs-v2343 > button.is-active, html[data-game-theme="dark"] #sidePanel.is-settings-panel .settings-controls-nav > button:is(.is-active, [aria-pressed="true"]), html[data-game-theme="dark"] #sidePanel.is-settings-panel .settings-workbench :is(.setting-side-choice, .setting-theme):has(input:checked) { background-color: var(--pp-dark-surface-2) !important; color: var(--pp-dark-accent) !important; border-color: var(--pp-dark-accent) !important; box-shadow: inset 0 -2px var(--pp-dark-accent) !important; } html[data-game-theme="dark"] #sidePanel.is-factions-panel .fc .fc-button.is-primary, html[data-game-theme="dark"] #sidePanel.is-settings-panel .settings-recommendation button { background-color: var(--pp-dark-action) !important; color: var(--pp-dark-on-action) !important; border-color: var(--pp-dark-action) !important; box-shadow: none !important; } html[data-game-theme="dark"] #sidePanel.is-factions-panel .fc .fc-button.is-primary:hover:not(:disabled), html[data-game-theme="dark"] #sidePanel.is-settings-panel .settings-recommendation button:hover:not(:disabled) { background-color: var(--pp-dark-focus) !important; border-color: var(--pp-dark-focus) !important; } html[data-game-theme="dark"] #sidePanel.is-factions-panel .fc :is(.fc-kicker, .fc-contract > i) { color: var(--pp-dark-accent) !important; } html[data-game-theme="dark"] #sidePanel.is-factions-panel .fc .fc-wallet { color: var(--pp-dark-warning) !important; } html[data-game-theme="dark"] #sidePanel.is-factions-panel .fc .fc-notice { background-color: var(--pp-dark-surface-2) !important; color: var(--pp-dark-success) !important; } html[data-game-theme="dark"] #sidePanel.is-factions-panel .fc .fc-notice.is-error { color: var(--pp-dark-error) !important; border-color: var(--pp-dark-error) !important; } html[data-game-theme="dark"] #sidePanel.is-settings-panel :is(.settings-device-summary, .settings-recommendation, .settings-control-guide, .settings-sound-intro) { background: var(--pp-dark-surface-1) !important; border-color: var(--pp-dark-border) !important; box-shadow: none !important; } html[data-game-theme="dark"] #sidePanel.is-settings-panel :is(.settings-device-summary, .settings-recommendation, .settings-section-heading) b { color: var(--pp-dark-text) !important; } html[data-game-theme="dark"] #sidePanel.is-settings-panel :is(.settings-device-summary, .settings-recommendation, .settings-section-heading) :is(small, p) { color: var(--pp-dark-text-muted) !important; } html[data-game-theme="dark"] #sidePanel.is-settings-panel :is(.settings-device-mark, .settings-section-heading > span, .settings-control-guide > span, .settings-sound-intro > span, .settings-device-profiles span) { background: var(--pp-dark-surface-2) !important; border-color: var(--pp-dark-border) !important; color: var(--pp-dark-text-muted) !important; } html[data-game-theme="dark"] #sidePanel.is-settings-panel .settings-device-profiles .is-current { border-color: var(--pp-dark-accent) !important; color: var(--pp-dark-accent) !important; } html[data-game-theme="dark"] #sidePanel.is-settings-panel .setting-toggle > i { background-color: var(--pp-dark-surface-2) !important; border-color: var(--pp-dark-control-border) !important; } html[data-game-theme="dark"] #sidePanel.is-settings-panel .setting-toggle > i::after { background-color: var(--pp-dark-text-muted) !important; } html[data-game-theme="dark"] #sidePanel.is-settings-panel .setting-toggle input:checked + i { background-color: var(--pp-dark-action) !important; border-color: var(--pp-dark-action) !important; } html[data-game-theme="dark"] #sidePanel.is-settings-panel .setting-toggle input:checked + i::after { background-color: var(--pp-dark-on-action) !important; } html[data-game-theme="dark"] #sidePanel.is-settings-panel .setting-volume input { accent-color: var(--pp-dark-accent) !important; } html[data-game-theme="dark"] #sidePanel.is-settings-panel .setting-theme.is-dark > i:first-of-type { background: var(--pp-dark-surface-0) !important; border-color: var(--pp-dark-border) !important; } html[data-game-theme="dark"] #sidePanel.is-settings-panel .setting-theme.is-dark > i:first-of-type span { background: var(--pp-dark-accent) !important; } html[data-game-theme="dark"] #sidePanel.is-settings-panel .setting-theme.is-dark > i:first-of-type em { background: var(--pp-dark-surface-2) !important; } html[data-game-theme="dark"] .settings-help-tooltip { background: var(--pp-dark-surface-2) !important; color: var(--pp-dark-text) !important; border-color: var(--pp-dark-border) !important; } } /* pk-style-source:1 */ /* inline-1 */ @layer mobile-phone-patch;@layer player-hud-orbit-r1{#app #gameScreen #playerHudOrbit :is(#worldMovementButton,.selected-mobile-run),#app #gameScreen :is(#worldMovementButton,.selected-mobile-run){display:none!important}} /* pk-style-source:2 */ /* /chat-backgrounds-v1.css */ /* Paint the wallpaper on the native scroll surface, above its opaque fill. */ @layer selected-mobile-hud { html[data-game-theme] .game-screen #chatPanel[data-chat-background] #chatLog.chat-log{background-image:var(--chat-background-art)!important;background-size:var(--chat-background-tile,288px) var(--chat-background-tile,288px)!important;background-position:0 0!important;background-repeat:repeat!important;background-attachment:local!important} html[data-game-theme="dark"] .game-screen #chatPanel[data-chat-background] #chatLog.chat-log{background-image:var(--chat-background-art-dark)!important} #chatPanel #chatBackgroundSettings{grid-column:1/-1;min-width:0;padding:0;border:0} #chatPanel .cb-current-card{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:1px solid var(--ui-line,#d8e3ee);border-radius:12px;background:var(--ui-card,#fff)} #chatPanel .cb-current-card>img,#chatPanel .cb-current-card>.cb-standard-swatch{width:68px;height:48px;flex:none;object-fit:cover;border:1px solid var(--ui-line,#d8e3ee);border-radius:8px} #chatPanel .cb-current-card>div{display:grid;gap:3px;flex:1;min-width:0;font-size:12px;color:var(--ui-ink,#23354b)} #chatPanel .cb-current-card>div>b{font-size:13px} #chatPanel .cb-current-card>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #chatPanel .cb-current-card>div>small{font-size:10px;color:var(--ui-muted,#73879a)} #chatPanel .cb-current-card>button{min-height:40px;min-width:76px;padding:8px 12px;border:1px solid #b9d8e9;border-radius:9px;background:#eaf5fb;color:#237399;font-size:12px;font-weight:700;letter-spacing:normal} #chatPanel .cb-inline-status{margin:7px 0 0;font-size:11px;line-height:1.5;color:var(--ui-muted,#73879a)} #chatPanel .cb-live-preview-bar{position:absolute;left:10px;right:10px;top:8px;z-index:8;display:flex;align-items:center;gap:8px;min-height:46px;padding:7px 10px;border:1px solid #c6dde9;border-radius:12px;background:var(--ui-card,#fff);box-shadow:0 3px 16px #16334813;color:var(--ui-ink,#23354b)} #chatPanel .cb-live-preview-bar[hidden]{display:none!important} #chatPanel .cb-live-preview-bar>span{flex:1;min-width:0;font-size:12px;line-height:1.4} #chatPanel .cb-live-preview-bar>button{min-height:36px;padding:7px 10px;border:1px solid var(--ui-line,#d8e3ee);border-radius:8px;background:var(--ui-card,#fff);color:var(--ui-ink,#23354b);font-size:12px;letter-spacing:normal} #chatPanel .cb-live-preview-bar>[data-cb-bar-apply]{background:#238dc1;color:#fff;border-color:#238dc1} #chatPanel.is-background-preview #chatLog{padding-top:68px!important} dialog.cb-picker{--cb-card:#fff;--cb-ground:#f5f8fc;--cb-ink:#23354b;--cb-muted:#718398;--cb-edge:#dce5ef;position:fixed!important;inset:0!important;transform:none!important;translate:none!important;width:min(980px,calc(100vw - 32px))!important;height:min(730px,calc(100dvh - 32px))!important;max-width:none!important;max-height:none!important;min-height:0!important;margin:auto!important;padding:0!important;border:1px solid var(--cb-edge)!important;border-radius:20px!important;overflow:hidden!important;background:var(--cb-card)!important;color:var(--cb-ink)!important;box-shadow:0 20px 80px #17354d38!important;font-family:inherit!important;font-size:14px!important} dialog.cb-picker[open]{display:grid!important;grid-template-rows:auto auto auto minmax(0,1fr) auto!important} dialog.cb-picker:not([open]){display:none!important} dialog.cb-picker::backdrop{background:#162c4678;backdrop-filter:blur(3px)} html[data-game-theme="dark"] dialog.cb-picker{--cb-card:#223246;--cb-ground:#19293a;--cb-ink:#e3edf6;--cb-muted:#9dafc1;--cb-edge:#394e64} dialog.cb-picker *{box-sizing:border-box} dialog.cb-picker :is(h2,h3,p){margin:0!important;color:inherit!important} dialog.cb-picker button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:40px;padding:8px 12px;border:1px solid var(--cb-edge);border-radius:10px;background:var(--cb-card);color:var(--cb-ink);font:inherit;font-size:13px;line-height:1.35;letter-spacing:normal;cursor:pointer;touch-action:manipulation} dialog.cb-picker button:disabled{opacity:.55;cursor:default} dialog.cb-picker button:focus-visible{outline:3px solid #54a7cf;outline-offset:2px} dialog.cb-picker .cb-picker-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px 16px;border-bottom:1px solid var(--cb-edge)} dialog.cb-picker .cb-picker-head h2{font-size:22px!important;line-height:1.2!important;font-weight:750!important} dialog.cb-picker .cb-picker-head p{font-size:12px!important;color:var(--cb-muted)!important;margin-top:5px!important} dialog.cb-picker .cb-picker-head>button{width:40px;flex:none;font-size:25px;padding:0} dialog.cb-picker .cb-picker-modes{display:flex;gap:8px;padding:14px 22px 8px} dialog.cb-picker .cb-picker-modes button[aria-pressed="true"]{background:#e3f1f9;color:#20789d;border-color:#afd6e9} dialog.cb-picker .cb-picker-themes{display:flex;gap:5px;flex-wrap:wrap;padding:0 22px 14px} dialog.cb-picker .cb-picker-themes button{padding:5px 10px;min-height:30px;border-radius:16px;font-size:11px} dialog.cb-picker .cb-picker-themes button[aria-pressed="true"]{color:#237a9e;background:#e8f4fa;border-color:#bfddeb} dialog.cb-picker .cb-picker-main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(270px,1fr);min-width:0;min-height:0;overflow:hidden;border-top:1px solid var(--cb-edge)} dialog.cb-picker .cb-picker-catalog{min-width:0;min-height:0;overflow:auto;padding:16px 18px 20px 22px;background:var(--cb-ground);overscroll-behavior:contain;scrollbar-width:thin} dialog.cb-picker .cb-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} dialog.cb-picker button.cb-pick-card{display:grid;grid-template-columns:1fr;align-content:start;justify-content:stretch;gap:5px;min-width:0;padding:6px 6px 9px;text-align:left;border:1px solid var(--cb-edge);border-radius:12px;background:var(--cb-card)} dialog.cb-picker button.cb-pick-card[aria-pressed="true"]{border-color:#3093bd;box-shadow:0 0 0 2px #3093bd32} dialog.cb-picker .cb-pick-picture{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;min-width:0;width:100%;border-radius:7px;background:#f4f7fb} dialog.cb-picker .cb-pick-picture img{display:block;width:100%;height:100%;object-fit:cover} dialog.cb-picker .cb-pick-card b{font-size:11px;font-weight:700;line-height:1.3;padding-inline:3px;overflow-wrap:anywhere} dialog.cb-picker .cb-pick-card small{font-size:10px;line-height:1.4;padding-inline:3px;color:var(--cb-muted)} dialog.cb-picker .cb-picker-preview{display:flex;flex-direction:column;gap:11px;min-width:0;min-height:0;padding:20px;overflow:auto;border-left:1px solid var(--cb-edge)} dialog.cb-picker .cb-picker-preview h3{font-size:19px!important;line-height:1.3!important} dialog.cb-picker .cb-picker-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--cb-muted)} dialog.cb-picker .cb-picker-preview>.cb-preview{flex:none;aspect-ratio:4/5;font-size:12px} dialog.cb-picker .cb-picker-preview>p{font-size:12px!important;line-height:1.65!important;color:var(--cb-muted)!important} dialog.cb-picker .cb-picker-preview>small{font-size:11px;color:var(--cb-muted)} dialog.cb-picker .cb-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px;border-top:1px solid var(--cb-edge);background:var(--cb-card)} dialog.cb-picker .cb-picker-footer>span{font-size:11px;line-height:1.5;color:var(--cb-muted)} dialog.cb-picker .cb-picker-footer>div{display:flex;gap:8px;flex:none} dialog.cb-picker button.cb-save{background:#238dc1;border-color:#238dc1;color:#fff;min-width:132px} dialog.cb-picker .cb-no-backgrounds{font-size:12px;line-height:1.6;color:var(--cb-muted);padding-top:16px} @media(max-width:700px){dialog.cb-picker{width:calc(100vw - 16px)!important;height:calc(100dvh - 24px)!important;border-radius:16px!important}dialog.cb-picker .cb-picker-head{padding:15px}dialog.cb-picker .cb-picker-head h2{font-size:19px!important}dialog.cb-picker .cb-picker-head p{display:none}dialog.cb-picker .cb-picker-modes{padding:12px 12px 8px;gap:6px}dialog.cb-picker .cb-picker-modes button{flex:1;font-size:12px}dialog.cb-picker .cb-picker-themes{padding:0 12px 10px;flex-wrap:nowrap;overflow:auto;scrollbar-width:none}dialog.cb-picker .cb-picker-themes button{flex:none}dialog.cb-picker .cb-picker-main{grid-template-columns:minmax(0,1fr)}dialog.cb-picker .cb-picker-preview{display:none}dialog.cb-picker .cb-picker-catalog{padding:12px}dialog.cb-picker .cb-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}dialog.cb-picker .cb-pick-card b{font-size:12px}dialog.cb-picker .cb-pick-card small{font-size:11px}dialog.cb-picker .cb-picker-footer{align-items:stretch;flex-direction:column;padding:12px}dialog.cb-picker .cb-picker-footer>div{width:100%}dialog.cb-picker .cb-picker-footer button{flex:1;min-height:44px;font-size:12px}#chatPanel .cb-live-preview-bar{gap:5px;padding:5px 7px}#chatPanel .cb-live-preview-bar>span{font-size:10px}#chatPanel .cb-live-preview-bar>button{font-size:11px;padding:6px 8px}} } .cb-standard-swatch{background:#f4f7fb url('/assets/chat-v6/chat-wallpaper.svg') repeat;background-size:90px 90px} .cb-preview{position:relative;isolation:isolate;aspect-ratio:3/2;overflow:hidden;border-radius:14px;background-color:#f4f7fb;background-image:var(--cb-light,url('/assets/chat-v6/chat-wallpaper.svg'));background-size:var(--cb-tile-size,180px) var(--cb-tile-size,180px);background-repeat:repeat;color:#233349;font:14px/1.45 system-ui,sans-serif} .cb-preview-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .cb-preview::before{content:"";position:absolute;inset:0;background:transparent;z-index:-1;pointer-events:none} .cb-preview-messages{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px 18px;min-width:0} .cb-preview-date{align-self:center;padding:4px 12px;border-radius:12px;background:#fffD;color:#536175;font-size:11px;box-shadow:0 2px 10px #12223c0b} .cb-sample-message{display:grid;gap:4px;max-width:88%;padding:10px 13px;border:1px solid #ffffffb0;border-radius:13px 13px 13px 3px;background:#ffffffed;box-shadow:0 2px 12px #12304b10;color:#24384b;overflow-wrap:anywhere;text-align:left} .cb-sample-message>b{display:flex;align-items:center;gap:20px;color:#22799a;font-size:11px} .cb-sample-message time{margin-left:auto;color:#708091;font-size:10px;font-weight:400} .cb-sample-message.is-own{align-self:flex-end;background:#e5f6f2f2;border-radius:13px 13px 3px 13px} .cb-sample-message small{justify-self:end;font-size:10px;color:#2e9e93} .cb-preview.is-compact{aspect-ratio:auto;height:185px;font-size:12px} .cb-preview.is-compact .cb-preview-messages{padding:12px;gap:8px} .cb-preview.is-compact .cb-sample-message{padding:7px 10px} .cb-preview.is-compact .cb-sample-message:last-child{display:none} .cb-shop{max-width:1460px;margin:0 auto;min-width:0} .cb-shop-tools{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:18px 0 12px} .cb-shop-tools label{max-width:440px;flex:1;min-width:0} .cb-shop-tools input{width:100%;min-width:0} .cb-theme-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px} .cb-theme-filters button,.cb-shop-tools>button{border:1px solid var(--s-line,#dce4ee);background:var(--s-card,#fff);color:inherit;border-radius:20px;padding:8px 13px;min-height:38px;font:inherit;font-size:12px} .cb-theme-filters button[aria-pressed="true"],.cb-shop-tools>button[aria-pressed="true"]{background:#e1f0f7;color:#126989;border-color:#aad7e8} .cb-shop-layout{display:grid;grid-template-columns:minmax(280px,1.15fr) minmax(290px,1fr);gap:24px;align-items:start} .cb-catalog{min-width:0} .cb-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .cb-products article{display:grid;grid-template-columns:1fr;align-content:start;gap:5px;min-width:0;padding:8px 8px 10px;border:1px solid var(--s-line,#dce4ee);border-radius:14px;background:var(--s-card,#fff)} .cb-products article[data-selected="true"]{border-color:#2c9dbe;box-shadow:0 0 0 2px #2c9dbe21} .cb-product-picture{position:relative;display:block;padding:0!important;width:100%;overflow:hidden;border:0;border-radius:9px;background:#e5edf1;aspect-ratio:3/2} .cb-product-picture img{display:block;width:100%;height:100%;object-fit:cover} .cb-product-picture>span{position:absolute;bottom:6px;right:6px;border-radius:8px;padding:4px 7px;background:#ffffffed;color:#267a65;font-size:10px} .cb-products h4{margin:5px 4px 0;font-size:14px;line-height:1.3;overflow-wrap:anywhere} .cb-products article>small{margin:0 4px 6px;opacity:.65;font-size:11px} .cb-products article>button:last-child{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:5px;width:100%;min-height:38px;font-size:12px} .cb-fitting.v10-fitting{display:block;position:sticky;top:8px;min-width:0;padding:0;overflow:hidden;border:1px solid var(--s-line,#dce4ee);border-radius:16px;background:var(--s-card,#fff)} .cb-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:14px 16px;font-size:12px} .cb-preview-heading span{font-size:10px;opacity:.55} .cb-fitting .cb-preview{width:100%;max-width:100%;min-width:0;border-radius:0;min-height:280px;aspect-ratio:3/2} .cb-fitting-info{display:grid;gap:10px;padding:18px} .cb-fitting-info h3{font-size:21px;line-height:1.2;margin:0} .cb-fitting-info p{font-size:13px;line-height:1.6;margin:0;opacity:.8} .cb-fitting-info small{font-size:11px;line-height:1.6;opacity:.7} .cb-fitting-info>button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;width:100%} .cb-note{font-size:12px;line-height:1.5;opacity:.72} html[data-game-theme="dark"] .cb-preview{background-color:#152233;background-image:var(--cb-dark);color:#eaf3fa} html[data-game-theme="dark"] .cb-sample-message{background:#142434ed;border-color:#ffffff18;color:#eef4f8} html[data-game-theme="dark"] .cb-sample-message>b{color:#87ccdf} html[data-game-theme="dark"] .cb-sample-message.is-own{background:#164b48ed} html[data-game-theme="dark"] .cb-sample-message time{color:#abbcc9} html[data-game-theme="dark"] .cb-preview-date{background:#142434db;color:#d0dde8} html[data-game-theme="dark"] .cb-theme-filters button,html[data-game-theme="dark"] .cb-shop-tools>button,html[data-game-theme="dark"] .cb-products article,html[data-game-theme="dark"] .cb-fitting{background:#172438;border-color:#304155;color:#e5edf6} html[data-game-theme="dark"] .cb-theme-filters button[aria-pressed="true"]{background:#18505c;border-color:#3b8e9a} .cb-shop :is(button,input):focus-visible,.cb-settings :is(button,select):focus-visible{outline:3px solid #53a9ce;outline-offset:3px} @media(max-width:1000px){.cb-shop-layout{grid-template-columns:minmax(0,1fr)}.cb-fitting.v10-fitting{position:static;grid-row:1}.cb-fitting .cb-preview{aspect-ratio:2/1;max-height:360px}.cb-products{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:600px){.cb-shop-layout{gap:16px}.cb-shop-tools{align-items:stretch;flex-direction:column}.cb-shop-tools label{max-width:none}.cb-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.cb-fitting .cb-preview{aspect-ratio:3/2;min-height:255px}.cb-preview-messages{padding:16px 12px;gap:10px}.cb-sample-message{font-size:12px;padding:8px 10px}.cb-fitting-info{padding:14px}.cb-theme-filters{gap:5px}.cb-theme-filters button{padding:7px 10px;font-size:11px}.cb-products h4{font-size:13px}.cb-products article>button:last-child{font-size:11px;min-height:42px}} @layer selected-mobile-hud{@media(max-height:520px){dialog.cb-picker .cb-picker-head{padding:8px 14px}dialog.cb-picker .cb-picker-head h2{font-size:18px!important}dialog.cb-picker .cb-picker-head p{display:none}dialog.cb-picker .cb-picker-head>button{min-height:32px;width:32px}dialog.cb-picker .cb-picker-modes{padding:6px 12px;gap:6px}dialog.cb-picker .cb-picker-modes button{min-height:32px;padding:5px 10px}dialog.cb-picker .cb-picker-themes{padding:0 12px 6px;flex-wrap:nowrap;overflow:auto;scrollbar-width:none}dialog.cb-picker .cb-picker-themes button{flex:none}dialog.cb-picker .cb-picker-footer{padding:7px 12px}dialog.cb-picker .cb-picker-catalog{padding:10px 12px}dialog.cb-picker .cb-picker-preview{padding:12px}}} /* pk-style-source:3 */ /* /pve-battle-window.css */ @layer combat-experience-r2; /* Registered before the native battle layers. Only the new arena is scoped here. */ @layer battlefield-design-r4 { #battleHud[data-arena-design="r4"][data-battle-arena="v1"] { --bf-bg:#f3f7fa;--bf-surface:#fff;--bf-control:#edf3f6;--bf-text:#203747;--bf-muted:#526878;--bf-border:#c3d3dc;--bf-accent:#087b83;--bf-selected:#dff2ef;--bf-good:#269760;--bf-energy:#1987ab;--bf-track:#d8e4eb;--bf-warn:#915611;--bf-danger:#b33142;--bf-overlay:#102c435e;--bf-shadow:#0e35451f; --arena-deck:168px!important;color:var(--bf-text)!important;font-family:"Segoe UI",Arial,sans-serif!important; } html[data-game-theme="dark"] #battleHud[data-arena-design="r4"][data-battle-arena="v1"] { --bf-bg:#12202b;--bf-surface:#192c39;--bf-control:#233b4a;--bf-text:#e8f1f7;--bf-muted:#b2c6d3;--bf-border:#46616f;--bf-accent:#74d3ce;--bf-selected:#254c50;--bf-good:#71cf99;--bf-energy:#6ac7e5;--bf-track:#344d5c;--bf-warn:#f5c883;--bf-danger:#ff9aab;--bf-overlay:#061522b8;--bf-shadow:#00101d66; color-scheme:dark; } #battleHud[data-arena-design="r4"][data-battle-arena="v1"] :is(button,input,select){font-family:inherit!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] :is(#battleCommandDeck,.arena-deck-backdrop,.pve-window-header){background:var(--bf-bg)!important;color:var(--bf-text)!important;border-color:var(--bf-border)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleCommandDeck:is([data-view="combat"],[data-view="paused"]){padding:8px 16px!important;box-shadow:0 -4px 16px var(--bf-shadow)!important;border-radius:0!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] :is(.battlefield-title,.battlefield-opponent,.battlefield-health){background:var(--bf-surface)!important;color:var(--bf-text)!important;border-color:var(--bf-border)!important;box-shadow:0 2px 8px var(--bf-shadow)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] :is(.battlefield-title b,.battlefield-health b,.combat-skill-name,.arena-item-label,#battleRoster button>span b,.pve-window-title b){color:var(--bf-text)!important;-webkit-text-fill-color:var(--bf-text)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] :is(.battlefield-title span,.battlefield-health small,.battlefield-health footer,.combat-skill-cost,.arena-skill-state,.arena-item-state,.arena-item-note,.arena-readiness b,.arena-command-context>small,.combat-energy small,.combat-energy b,.combat-energy>span,#battleRoster button>span small,.pve-window-title small,.pve-window-status){color:var(--bf-muted)!important;-webkit-text-fill-color:currentColor!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] :is(#battleSkills .combat-action-button,#battleQuickItems .combat-item-button,#battleRoster button,.arena-navigation button,.battlefield-tools button,.combat-utility-panel button,.pve-window-pause,.arena-details-open){background:var(--bf-control)!important;border:1px solid var(--bf-border)!important;color:var(--bf-text)!important;box-shadow:none!important;border-radius:9px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] :is(button:focus-visible,a:focus-visible){outline:2px solid var(--bf-accent)!important;outline-offset:2px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] :is(.arena-navigation button[aria-pressed="true"],#battleRoster button.is-active,#battleSkills .combat-action-button.is-queued){background:var(--bf-selected)!important;border-color:var(--bf-accent)!important;color:var(--bf-accent)!important;box-shadow:inset 0 -2px var(--bf-accent)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-navigation{border-color:var(--bf-border)!important;padding-top:4px!important;gap:6px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-navigation button{display:flex!important;flex-direction:row!important;justify-content:center!important;gap:7px!important;font-size:11px!important;min-height:44px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-navigation svg{width:16px!important;height:16px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleLiveControls{gap:5px!important;max-width:1040px!important;margin:0 auto!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-action-button{height:62px!important;padding:8px 10px!important;grid-template-columns:20px minmax(0,1fr)!important;gap:2px 8px!important;border-bottom:2px solid color-mix(in srgb,var(--skill-type) 50%,var(--bf-border))!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-skill-art{width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-skill-name{font:600 12px/15px "Segoe UI",Arial,sans-serif!important;padding-right:12px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-skill-cost{font-size:10px!important;line-height:12px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills :is(.combat-skill-cost,.combat-skill-cost b,.combat-skill-art img){background:none!important;text-shadow:none!important;box-shadow:none!important;filter:none!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-action-button::before,#battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-action-button::after{display:none!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-skill-cost::after{content:"эн.";font-weight:400!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-skill-cost>b::before{content:"−";} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills kbd{color:var(--bf-muted)!important;background:var(--bf-bg)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .arena-skill-state{inset:auto 8px 8px auto!important;font-size:10px!important;max-width:46%!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-action-button.is-disabled{opacity:1!important;filter:none!important;background:var(--bf-bg)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-action-button.is-disabled .combat-skill-art{opacity:.60!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-action-button[data-arena-availability="unavailable"] .arena-skill-state{color:var(--bf-warn)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-action-button[data-arena-availability="queued"] .arena-skill-state{color:var(--bf-accent)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .combat-resource-row{height:24px!important;min-height:24px!important;max-height:24px!important;gap:12px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .combat-energy{height:24px!important;position:relative!important;gap:9px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleCommandEnergyTrack{display:block!important;width:140px!important;height:7px!important;background:var(--bf-track)!important;border-radius:4px!important;overflow:hidden!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleCommandEnergyBar{background:var(--bf-energy)!important;transition:none!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-energy-drain{display:block!important;position:absolute!important;top:0!important;bottom:0!important;background:var(--bf-warn)!important;opacity:.9!important;border-radius:0!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-energy-forecast{position:absolute!important;left:0!important;bottom:calc(100% + 4px)!important;z-index:12!important;width:max-content!important;padding:3px 7px!important;border:1px solid var(--bf-border)!important;border-radius:6px!important;background:var(--bf-surface)!important;color:var(--bf-text)!important;font:600 10px/14px "Segoe UI",Arial,sans-serif!important;pointer-events:none!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-energy-forecast[data-low="true"]{color:var(--bf-danger)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-command-context{min-width:0!important;gap:8px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-readiness>i{background:var(--bf-good)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .battlefield-health{width:148px!important;height:58px!important;min-height:58px!important;padding:5px 7px!important;transform:translate(-50%,10px)!important;text-align:left!important;cursor:pointer!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"][data-arena-mode="coop"] .battlefield-health{width:clamp(92px,30cqw,128px)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .battlefield-health header b{font-size:11px!important;line-height:12px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .battlefield-health em{color:var(--bf-accent)!important;font-size:9px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .battlefield-hp{background:var(--bf-track)!important;margin:3px 0!important;height:4px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .battlefield-hp i{background:var(--bf-good)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .battlefield-health[data-hp="mid"] .battlefield-hp i{background:var(--bf-warn)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .battlefield-health[data-hp="low"] .battlefield-hp i{background:var(--bf-danger)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .battlefield-health.is-selected{border-color:var(--bf-accent)!important;box-shadow:0 0 0 1px var(--bf-accent),0 3px 9px var(--bf-shadow)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .battlefield-health.is-selected header b::before{color:var(--bf-accent)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-readiness-track{background:var(--bf-track)!important;inset:auto 7px 2px!important;height:2px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-readiness-track i{background:var(--bf-accent)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-actor-energy{display:flex!important;gap:5px!important;align-items:center!important;height:10px!important;margin-top:2px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-actor-energy>i{display:block!important;position:relative!important;flex:1!important;height:3px!important;border-radius:3px!important;background:var(--bf-track)!important;overflow:hidden!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-actor-energy u{display:block!important;width:100%!important;height:100%!important;transform-origin:left!important;background:var(--bf-energy)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-actor-energy small{font:400 8px/10px "Segoe UI",Arial,sans-serif!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .battlefield-top .battlefield-title{flex:1!important;max-width:360px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-details-open{display:grid!important;place-items:center!important;flex:none!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;margin:0!important;padding:0!important;pointer-events:auto!important;cursor:pointer!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-details-open svg{width:18px!important;height:18px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .battlefield-opponent{margin-left:auto!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] :is(#battlefieldHelp,#battlefieldEvents,#battleTactics,#battleSkillPreview,#battleSurrenderConfirm>article,.battle-pause-status,.activity-recovery article,.battle-result-card,.battle-result-outcome,.battle-reward-drop){background:var(--bf-surface)!important;color:var(--bf-text)!important;border-color:var(--bf-border)!important;box-shadow:0 8px 30px var(--bf-shadow)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] :is(#battlefieldHelp,#battlefieldEvents,#battleTactics,#battleSkillPreview,#battleSurrenderConfirm,.activity-recovery,.battle-result-card) :is(b,strong,h2,h3,p,small,span,em,label,footer){color:var(--bf-text)!important;-webkit-text-fill-color:currentColor!important;text-shadow:none!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] :is(#battlefieldHelp,#battlefieldEvents,#battleTactics,#battleSkillPreview,#battleSurrenderConfirm,.activity-recovery,.battle-result-card) button{background:var(--bf-control)!important;color:var(--bf-text)!important;border-color:var(--bf-border)!important;-webkit-text-fill-color:currentColor!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] :is(.arena-dialog-veil,#battlePauseOverlay,#battleSurrenderConfirm,.activity-recovery){background:var(--bf-overlay)!important;backdrop-filter:none!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldEvents li{background:var(--bf-control)!important;color:var(--bf-text)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleAssetLoader{background:var(--bf-bg)!important;color:var(--bf-text)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleAssetLoader :is(b,small,span,.arena-loading-match){color:var(--bf-muted)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] :is(.battle-loader-emblem,.battle-load-track){background:var(--bf-track)!important;border-color:var(--bf-border)!important;box-shadow:none!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleLoadProgress{background:var(--bf-accent)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails{display:block!important;position:absolute!important;z-index:80!important;inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important;width:min(470px,calc(100% - 24px))!important;max-height:calc(100% - 28px)!important;box-sizing:border-box!important;margin:0!important;padding:16px!important;border:1px solid var(--bf-border)!important;border-radius:14px!important;background:var(--bf-surface)!important;color:var(--bf-text)!important;box-shadow:0 12px 48px var(--bf-shadow)!important;overflow:auto!important;overscroll-behavior:contain!important;pointer-events:auto!important;font:400 12px/17px "Segoe UI",Arial,sans-serif!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails header{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-bottom:10px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails header small{font-size:9px!important;letter-spacing:1px!important;color:var(--bf-muted)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails h2{font:600 18px/24px "Segoe UI",Arial,sans-serif!important;margin:0!important;color:inherit!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails button{min-width:44px!important;min-height:44px!important;padding:6px 10px!important;border:1px solid var(--bf-border)!important;border-radius:8px!important;background:var(--bf-control)!important;color:var(--bf-text)!important;cursor:pointer!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails .arena-details-close{width:44px!important;height:44px!important;padding:0!important;font-size:23px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin-bottom:14px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails nav button{font-size:11px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails nav button[aria-pressed="true"]{background:var(--bf-selected)!important;border-color:var(--bf-accent)!important;color:var(--bf-accent)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-details-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:8px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-details-heading b{font-size:15px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-details-heading span{color:var(--bf-muted)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails dl{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:0 12px!important;margin:0!important;padding:0!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails :is(dt,dd){display:block!important;margin:0!important;padding:6px 0!important;border-bottom:1px solid var(--bf-track)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails dd{text-align:right!important;font-weight:600!important;font-variant-numeric:tabular-nums!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails :is(.arena-details-note,li){font-size:11px!important;color:var(--bf-muted)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails h3{font-size:12px!important;margin:12px 0 4px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails ul{margin:0!important;padding-left:16px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] [hidden][hidden]{display:none!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails[hidden][hidden]{display:none!important;} @media(max-width:700px){ #battleHud[data-arena-design="r4"][data-battle-arena="v1"]{--arena-deck:188px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleCommandDeck:is([data-view="combat"],[data-view="paused"]){padding:6px 8px max(6px,env(safe-area-inset-bottom))!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-action-button{height:46px!important;padding:4px 7px!important;gap:0 6px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-skill-name{font-size:11px!important;line-height:13px!important;max-height:26px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .arena-skill-state{inset:auto 6px 4px auto!important;font-size:9px!important;max-width:46%!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .combat-energy small{display:none!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleCommandEnergyTrack{width:64px!important;height:6px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .combat-resource-row{gap:8px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-command-context>small{display:none!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-readiness>b{max-width:142px!important;font-size:10px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .battlefield-health{width:min(138px,40cqw)!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"][data-arena-mode="coop"] .battlefield-health{width:30cqw!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-navigation button{font-size:10px!important;gap:4px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails{max-height:calc(100% - 20px)!important;padding:12px!important;} } @media(max-height:500px) and (min-width:450px){ #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleCommandEnergyTrack{width:48px!important;display:block!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .combat-resource-row{height:26px!important;min-height:26px!important;max-height:26px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-readiness>b{max-width:76px!important;font-size:9px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-action-button{height:52px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] .arena-navigation button{flex-direction:column!important;gap:2px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails{width:min(470px,calc(100% - 16px))!important;max-height:calc(100% - 16px)!important;} } @media(prefers-reduced-motion:reduce){#battleHud[data-arena-design="r4"][data-battle-arena="v1"] *{transition:none!important;animation:none!important;}} } @layer battlefield-design-r4 { #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battlefieldDetails header {position:sticky!important;top:-12px!important;z-index:2!important;background:var(--bf-surface)!important;padding:8px 0!important;} } @layer battlefield-design-r4 { #battleHud[data-arena-design="r4"][data-battle-arena="v1"][data-pve-window="true"] #battlefieldDetails {inset:calc(var(--pve-head) + 8px) 8px 8px!important;transform:none!important;width:auto!important;height:auto!important;max-height:none!important;} } @layer battlefield-design-r4 { @media(max-height:500px) and (min-width:450px) { #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .combat-action-button {height:68px!important;padding:6px 5px 19px!important;} #battleHud[data-arena-design="r4"][data-battle-arena="v1"] #battleSkills .arena-skill-state {inset:auto 6px 4px 6px!important;max-width:none!important;text-align:right!important;font-size:8px!important;} } } /* The first important layer owns only the rebuilt PvE window and its world chrome. */ @layer pve-battle-window { body.is-pve-battle #battleHud[data-pve-window="true"] { --arena-deck:188px!important;--arena-pad:16px!important;--pve-head:58px!important; position:fixed!important;inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important; width:min(940px,calc(100vw - 420px))!important;height:min(700px,calc(100dvh - 200px))!important; min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important; margin:0!important;padding:0!important;border:0!important;border-radius:18px!important; background:transparent!important;box-shadow:0 14px 42px #102c3440,0 0 0 1px #bed1c9!important; overflow:visible!important;pointer-events:none!important;z-index:5000!important;backdrop-filter:none!important; } body.is-pve-battle #battleHud::before,body.is-pve-battle #battleHud::after{display:none!important;} body.is-pve-battle #battleHud .battle-shell,body.is-pve-battle #battleHud #battleStage { position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important; margin:0!important;padding:0!important;border:0!important;transform:none!important;translate:none!important;background:transparent!important;border-radius:18px!important; pointer-events:none!important;overflow:hidden!important;box-shadow:none!important; } body.is-pve-battle #battleHud #battlefieldGround {inset:var(--pve-head) 0 var(--arena-deck)!important;width:auto!important;height:auto!important;border-radius:0!important;} body.is-pve-battle #battleHud #pveArenaBounds{position:absolute!important;inset:var(--pve-head) 0 var(--arena-deck)!important;pointer-events:none!important;z-index:0!important;overflow:hidden!important;} body.is-pve-battle #battleHud #pveBattleCanvas{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;pointer-events:none!important;border:0!important;border-radius:0!important;} body.is-pve-battle #battleHud #battlefieldGround{z-index:2!important;} body.is-pve-battle #battleHud :is(.battlefield-top,.arena-deck-backdrop,.arena-classic-return,[data-arena-tool="view"],.battle-stage-decor){display:none!important;} body.is-pve-battle #battleHud .pve-window-header { display:flex!important;position:absolute!important;inset:0 0 auto!important;height:var(--pve-head)!important;box-sizing:border-box!important; align-items:center!important;gap:16px!important;padding:8px 16px!important;border:0!important;border-bottom:1px solid #b5cfc5!important;border-radius:18px 18px 0 0!important; background:#f7faf5!important;color:#233d37!important;z-index:35!important;pointer-events:auto!important;font-family:Arial,sans-serif!important; } body.is-pve-battle #battleHud .pve-window-title{display:grid!important;gap:3px!important;min-width:0!important;flex:1!important;} body.is-pve-battle #battleHud .pve-window-title small{font:600 9px/12px Arial,sans-serif!important;letter-spacing:1px!important;color:#607e73!important;} body.is-pve-battle #battleHud .pve-window-title b{font:700 17px/21px Arial,sans-serif!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:inherit!important;} body.is-pve-battle #battleHud .pve-window-status{max-width:45%!important;font:400 12px/16px Arial,sans-serif!important;color:#60736b!important;} body.is-pve-battle #battleHud .pve-window-pause{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;flex:none!important;width:auto!important;height:44px!important;min-width:44px!important;padding:0 12px!important;border:1px solid #b7c9bf!important;border-radius:9px!important;background:#edf3e8!important;color:#29473b!important;font:600 12px/16px Arial,sans-serif!important;cursor:pointer!important;} body.is-pve-battle #battleHud [hidden],body.is-pve-battle #battleHud .pve-window-pause[hidden]{display:none!important;} /* A small, text-only encounter replaces the legacy unbounded portrait montage. */ body.is-pve-battle #battleHud #battleIntro{display:flex!important;position:absolute!important;inset:calc(var(--pve-head) + 12px) auto auto 50%!important;transform:translateX(-50%)!important;max-width:calc(100% - 32px)!important;width:max-content!important;height:auto!important;min-height:0!important;gap:8px!important;padding:8px 14px!important;background:#f7faf5ed!important;border:1px solid #b5cfc5!important;border-radius:10px!important;z-index:20!important;pointer-events:none!important;} body.is-pve-battle #battleHud #battleIntro[hidden]{display:none!important;} body.is-pve-battle #battleHud #battleIntro :is(.battle-intro-fighter,i,small,em){display:none!important;} body.is-pve-battle #battleHud #battleIntro .battle-intro-vs{position:static!important;display:block!important;inset:auto!important;transform:none!important;padding:0!important;margin:0!important;background:none!important;border:0!important;width:auto!important;height:auto!important;} body.is-pve-battle #battleHud #battleIntro .battle-intro-vs b{font:700 14px/20px Arial,sans-serif!important;color:#29473b!important;} body.is-pve-battle #battleHud #battleIntro .battle-intro-copy{position:static!important;display:block!important;inset:auto!important;transform:none!important;padding:0!important;margin:0!important;background:none!important;border:0!important;width:auto!important;height:auto!important;} body.is-pve-battle #battleHud #battleIntro strong{font:700 14px/20px Arial,sans-serif!important;color:#29473b!important;} body.is-pve-battle #battleHud #battleCommandDeck {position:absolute!important;inset:auto 0 0!important;width:100%!important;height:var(--arena-deck)!important;max-width:none!important;max-height:none!important;margin:0!important;padding:10px var(--arena-pad) 8px!important;box-sizing:border-box!important;transform:none!important;border:0!important;border-top:1px solid #bed1c9!important;border-radius:0 0 18px 18px!important;background:#f7faf5!important;color:#263f37!important;box-shadow:none!important;pointer-events:auto!important;overflow:visible!important;} body.is-pve-battle #battleHud #battleLiveControls{gap:7px!important;} body.is-pve-battle #battleHud #battleSkills{gap:8px!important;} body.is-pve-battle #battleHud :is(#battleSkills .skill-button,#battleQuickItems .combat-item-button,#battleRosterPanel .battle-roster-slot){background:#eaf0e5!important;color:#244739!important;border-color:#bdccba!important;border-radius:10px!important;} body.is-pve-battle #battleHud :is(#battleSkills .skill-name,#battleSkills .skill-meta,#battleSkills .skill-cost,.arena-item-label,.arena-item-state,.combat-roster-name,.combat-roster-meta){color:#2c4b3c!important;} body.is-pve-battle #battleHud :is(.arena-readiness,.arena-readiness b,.arena-command-context>small,.combat-energy b,.combat-energy small,.combat-energy>span,.arena-navigation button,.arena-menu button){color:#34584c!important;} body.is-pve-battle #battleHud .arena-navigation{border-color:#c3d1c6!important;} body.is-pve-battle #battleHud .arena-navigation button[aria-pressed="true"]{background:#e4eddc!important;color:#294f35!important;box-shadow:inset 0 -2px #668257!important;} body.is-pve-battle #battleHud .arena-menu{align-items:start!important;} body.is-pve-battle #battleHud :is(.arena-menu button,.combat-utility-actions button){min-height:44px!important;border:1px solid #c3d1c6!important;border-radius:8px!important;background:#eaf0e5!important;} body.is-pve-battle #battleHud .battlefield-health{width:150px!important;max-width:44%!important;background:#f7faf5f2!important;color:#29473b!important;border-color:#b7c9bf!important;box-shadow:0 3px 9px #173a3426!important;} body.is-pve-battle #battleHud .battlefield-health :is(b,small,span,em){color:#29473b!important;} body.is-pve-battle #battleHud .battlefield-health .battlefield-hp{background:#d3dfd2!important;} body.is-pve-battle #battleHud .battlefield-health .battlefield-hp i{background:#6ca266!important;} /* Child phases use the same window bounds, never the viewport. */ body.is-pve-battle #battleHud :is(#battleAssetLoader,#battlePauseOverlay,#battleSurrenderConfirm,#battlefieldHelp,#battlefieldEvents,#battleTactics){position:absolute!important;inset:var(--pve-head) 0 0!important;width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;transform:none!important;translate:none!important;margin:0!important;border-radius:0 0 18px 18px!important;box-sizing:border-box!important;pointer-events:auto!important;overflow:auto!important;} body.is-pve-battle #battleHud :is(#battlefieldHelp,#battlefieldEvents,#battleTactics){inset:calc(var(--pve-head) + 12px) 16px 16px!important;max-height:calc(100% - var(--pve-head) - 28px)!important;} body.is-pve-battle #battleHud .arena-dialog-veil{inset:var(--pve-head) 0 0!important;} body.is-pve-battle #battleHud .activity-recovery{position:absolute!important;inset:var(--pve-head) 0 0!important;z-index:12000!important;background:#e8f0e7ed!important;backdrop-filter:none!important;border-radius:0 0 18px 18px!important;overflow:auto!important;pointer-events:auto!important;} body.is-pve-battle #battleHud .activity-recovery article{max-height:100%!important;padding:20px!important;box-shadow:none!important;background:#f7faf5!important;border:1px solid #c3d1c6!important;border-radius:12px!important;} body.is-pve-battle #battleHud .activity-recovery :is(h2,p,small){color:#29473b!important;opacity:1!important;text-shadow:none!important;} body.is-pve-battle #battleHud .activity-recovery button{background:#2d6e5c!important;color:#fff!important;min-height:48px!important;} body.is-pve-battle #battleHud .activity-recovery button:last-child{background:#e3ece0!important;color:#29473b!important;} body.is-pve-battle #battleHud #captureStage{position:absolute!important;inset:var(--pve-head) 0 92px!important;width:auto!important;height:auto!important;max-height:none!important;transform:none!important;pointer-events:auto!important;} body.is-pve-battle #battleHud #battleDecision{position:absolute!important;inset:var(--pve-head) 0 0!important;width:100%!important;height:calc(100% - var(--pve-head))!important;min-height:0!important;max-width:none!important;max-height:calc(100% - var(--pve-head))!important;transform:none!important;margin:0!important;box-sizing:border-box!important;pointer-events:auto!important;overflow:auto!important;border-radius:0 0 18px 18px!important;} body.is-pve-battle #battleHud[data-view="capture"] #battleCommandDeck{inset:auto 0 0!important;width:100%!important;height:92px!important;min-height:0!important;max-height:92px!important;display:block!important;grid-template-rows:none!important;grid-template-columns:none!important;border-left:0!important;border-top:1px solid #bed1c9!important;border-radius:0 0 18px 18px!important;} body.is-pve-battle #battleHud[data-view="capture"] #battleCommandDeck::before,body.is-pve-battle #battleHud[data-view="capture"] #battleCommandDeck::after{display:none!important;content:none!important;} body.is-pve-battle #battleHud #capturePanel:not([hidden]){position:static!important;display:grid!important;grid-template-columns:minmax(72px,.8fr) minmax(0,1.2fr)!important;align-items:center!important;gap:8px!important;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-sizing:border-box!important;} body.is-pve-battle #battleHud #capturePanel{grid-template-areas:"copy balls"!important;grid-template-rows:minmax(0,1fr)!important;overflow:hidden!important;} body.is-pve-battle #battleHud #capturePanel::before,body.is-pve-battle #battleHud #capturePanel::after,body.is-pve-battle #battleHud .combat-capture-copy::before,body.is-pve-battle #battleHud .combat-capture-copy::after{display:none!important;content:none!important;} body.is-pve-battle #battleHud .combat-capture-copy{grid-area:copy!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;} body.is-pve-battle #battleHud .combat-capture-copy>*{grid-area:auto!important;} body.is-pve-battle #battleHud .capture-carousel-v2203{grid-area:balls!important;grid-template-rows:minmax(0,1fr)!important;height:64px!important;overflow:hidden!important;} body.is-pve-battle #battleHud .capture-carousel-v2203>*{grid-area:auto!important;} body.is-pve-battle #battleHud #captureBalls{grid-column:2!important;grid-row:1!important;padding:0!important;align-items:center!important;} body.is-pve-battle #battleHud [data-capture-scroll="-1"]{grid-column:1!important;grid-row:1!important;} body.is-pve-battle #battleHud [data-capture-scroll="1"]{grid-column:3!important;grid-row:1!important;} body.is-pve-battle #battleHud .combat-capture-copy{position:static!important;display:grid!important;gap:4px!important;min-width:0!important;padding:0!important;color:#29473b!important;} body.is-pve-battle #battleHud #captureSelectedName{font-size:13px!important;line-height:16px!important;color:inherit!important;} body.is-pve-battle #battleHud #captureSelectedChance{position:static!important;width:auto!important;padding:0!important;background:none!important;font-size:9px!important;line-height:12px!important;color:inherit!important;} body.is-pve-battle #battleHud :is(.combat-capture-copy>small,#captureSelectedEffect,.capture-chance-note){display:none!important;} body.is-pve-battle #battleHud .capture-carousel-v2203{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;gap:4px!important;min-width:0!important;align-items:center!important;} body.is-pve-battle #battleHud .capture-scroll-v2203{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;} body.is-pve-battle #battleHud #captureBalls{display:flex!important;gap:5px!important;width:100%!important;min-width:0!important;height:64px!important;overflow:auto!important;} body.is-pve-battle #battleHud #captureBalls>button{width:56px!important;min-width:56px!important;max-width:56px!important;flex:0 0 56px!important;box-sizing:border-box!important;transform:none!important;height:60px!important;min-height:44px!important;padding:3px!important;grid-template-rows:32px 10px 10px!important;gap:0!important;} body.is-pve-battle #battleHud #captureBalls>button>.capture-ball-odds{display:none!important;} body.is-pve-battle #battleHud #captureBalls>button :is(img,i){width:32px!important;height:32px!important;} body.is-pve-battle #battleHud #captureBalls>button :is(b,small){font-size:8px!important;line-height:10px!important;} body.is-pve-battle #battleHud[data-view="capture"] :is(#battlefieldGround,#pveArenaBounds){inset:var(--pve-head) 0 92px!important;} body.is-pve-battle #battleHud:is([data-view="resolving"],[data-view="result"],[data-view="decision"]) #pveArenaBounds{inset:var(--pve-head) 0 0!important;} body.is-pve-battle #gameScreen :is(.world-topbar,#partyHud,#playerProfileButton,#playerStaminaHud,#questWidget,#worldMinimapShell,#desktopDock,#desktopUtilityRail,#desktopMoreMenu,.world-rail,.desktop-dock,.desktop-utility-rail,.mobile-dock){opacity:1!important;visibility:visible!important;filter:none!important;} body.is-pve-battle #gameScreen #chatPanel{display:block!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;filter:none!important;z-index:5700!important;transform:none!important;translate:none!important;} body.is-pve-battle #gameScreen #chatPanel:is(:not(.is-open),.is-minimized){position:fixed!important;inset:auto auto 12px 12px!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;padding:0!important;border-radius:12px!important;overflow:hidden!important;} body.is-pve-battle #gameScreen #chatPanel:is(:not(.is-open),.is-minimized)>:not(.chat-launcher){display:none!important;} body.is-pve-battle #gameScreen #chatPanel:is(:not(.is-open),.is-minimized)>.chat-launcher{display:grid!important;position:static!important;inset:auto!important;place-items:center!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;} body.is-pve-battle #gameScreen #chatPanel:is(:not(.is-open),.is-minimized)>.chat-launcher>span{display:none!important;} body.is-pve-battle #gameScreen #chatPanel:is(:not(.is-open),.is-minimized)>.chat-launcher>svg{display:block!important;width:23px!important;height:23px!important;} body.is-pve-battle #gameScreen #chatPanel:is(:not(.is-open),.is-minimized)>.chat-launcher>svg:last-of-type{display:none!important;} body.is-pve-battle #gameScreen #chatPanel.is-minimized{display:block!important;} @media(max-width:760px){ body.is-pve-battle #gameScreen #chatPanel.is-minimized{position:fixed!important;inset:auto auto 12px 12px!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;overflow:hidden!important;border-radius:12px!important;padding:0!important;} body.is-pve-battle #gameScreen #chatPanel.is-minimized>.chat-head{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;} body.is-pve-battle #gameScreen #chatPanel.is-minimized :is(.chat-title-copy>b){font-size:0!important;} body.is-pve-battle #gameScreen #chatPanel.is-minimized :is(.chat-subtitle,.chat-title-copy small,.chat-head-actions){display:none!important;} body.is-pve-battle #gameScreen #chatPanel.is-minimized .chat-title-icon{display:block!important;} } body.is-pve-battle #gameScreen #chatPanel.is-open:not(.is-minimized){display:grid!important;} body.is-pve-battle #gameScreen :is(.world-topbar,#partyHud,#playerStaminaHud,#questWidget,#worldMinimapShell,#desktopDock,#desktopUtilityRail,.world-rail,.mobile-dock){z-index:4000!important;} body.is-pve-battle #gameScreen #worldMinimapShell{max-width:190px!important;} body.is-pve-battle #gameScreen #questWidget{max-width:190px!important;} body.is-pve-battle #battleHud button:focus-visible{outline:3px solid #318c8b!important;outline-offset:2px!important;} body.is-pve-battle #battleHud .battle-result-outcome{grid-column:1!important;grid-row:1!important;background:#f1f6ec!important;border:1px solid #bdccba!important;box-shadow:none!important;} body.is-pve-battle #battleHud .battle-result-outcome :is(strong,b,h2,h3,p,small,span,em){color:#29473b!important;text-shadow:none!important;} body.is-pve-battle #battleHud #battleDecision:not([hidden]){display:flex!important;align-items:center!important;justify-content:center!important;padding:12px!important;overflow:hidden!important;} body.is-pve-battle #battleHud #battleDecision .battle-result-card{position:relative!important;inset:auto!important;transform:none!important;margin:auto!important;width:min(500px,100%)!important;height:min(480px,100%)!important;min-height:0!important;max-height:100%!important;padding:12px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr) auto!important;gap:10px!important;overflow:hidden!important;} body.is-pve-battle #battleHud .battle-result-drops{grid-column:1!important;grid-row:2!important;min-height:0!important;overflow:auto!important;} body.is-pve-battle #battleHud .battle-reward-drop{display:grid!important;grid-template-columns:24px minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;min-height:44px!important;padding:8px!important;} body.is-pve-battle #battleHud .battle-reward-drop>.battle-reward-drop-art{width:24px!important;height:24px!important;min-width:24px!important;} body.is-pve-battle #battleHud .battle-reward-drop>span{min-width:0!important;} body.is-pve-battle #battleHud .battle-reward-drop>span>b{font-size:11px!important;line-height:14px!important;overflow-wrap:anywhere!important;} body.is-pve-battle #battleHud .battle-reward-drop>strong{position:static!important;white-space:nowrap!important;font-size:14px!important;line-height:18px!important;margin:0!important;} body.is-pve-battle #battleHud .battle-result-actions{grid-column:1!important;grid-row:3!important;position:static!important;min-height:0!important;} body.is-pve-battle #battleHud .battle-result-action{min-height:48px!important;} body.is-pve-battle #battleHud .battle-result-outcome{padding:12px!important;} body.is-pve-battle #battleHud #battleRewardTitle{font-size:22px!important;line-height:26px!important;} body.is-pve-battle #battleHud #battleRewardSummary{font-size:11px!important;line-height:15px!important;} body.is-pve-battle #toast{position:fixed!important;inset:8px auto auto 50%!important;transform:translateX(-50%)!important;width:max-content!important;min-width:0!important;max-width:min(420px,calc(100vw - 32px))!important;max-height:90px!important;padding:10px 14px!important;box-sizing:border-box!important;overflow:auto!important;font-size:12px!important;line-height:16px!important;pointer-events:none!important;} body.is-pve-battle:has(#battleHud[data-view="capture"]) #toast[data-tone="info"]{display:none!important;} html[data-game-theme="dark"] body.is-pve-battle #battleHud :is(.pve-window-header,#battleCommandDeck){background:#163431!important;color:#e6f1e4!important;border-color:#47665c!important;} html[data-game-theme="dark"] body.is-pve-battle #battleHud :is(.pve-window-title small,.pve-window-status,.arena-readiness,.arena-readiness b,.arena-command-context>small,.combat-energy b,.combat-energy small,.combat-energy>span,.arena-navigation button){color:#c4daca!important;} html[data-game-theme="dark"] body.is-pve-battle #battleHud .arena-navigation button[aria-pressed="true"]{color:#284731!important;} html[data-game-theme="dark"] body.is-pve-battle #battleHud .combat-capture-copy{color:#e6f1e4!important;} @media(max-width:1000px) and (min-height:601px){body.is-pve-battle #battleHud[data-pve-window="true"]{width:calc(100vw - 20px)!important;height:calc(100dvh - 156px)!important;max-height:760px!important;}} @media(max-width:620px){ body.is-pve-battle #battleHud[data-pve-window="true"]{--arena-deck:208px!important;--arena-pad:10px!important;--pve-head:54px!important;width:calc(100vw - 16px)!important;height:calc(100dvh - 144px)!important;max-height:760px!important;border-radius:13px!important;} body.is-pve-battle #battleHud .pve-window-header{gap:8px!important;padding:6px 10px!important;} body.is-pve-battle #battleHud .pve-window-title b{font-size:15px!important;line-height:18px!important;} body.is-pve-battle #battleHud .pve-window-status{max-width:34%!important;font-size:10px!important;line-height:13px!important;} body.is-pve-battle #battleHud .pve-window-pause{padding:0 8px!important;} body.is-pve-battle #battleHud .pve-window-pause span:last-child{display:none!important;} body.is-pve-battle #battleHud .battlefield-health{width:132px!important;height:49px!important;min-height:49px!important;} body.is-pve-battle #battleHud #battleQuickItems{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;} body.is-pve-battle #battleHud #battleQuickItems .combat-item-button{height:49px!important;min-height:44px!important;} body.is-pve-battle #battleHud .arena-item-note{display:none!important;} } @media(max-width:760px) and (min-height:601px){ body.is-pve-battle #gameScreen .world-topbar{display:block!important;position:fixed!important;inset:8px 8px auto!important;height:56px!important;pointer-events:none!important;} body.is-pve-battle #gameScreen #playerProfileButton{position:absolute!important;inset:0 auto auto 0!important;display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;gap:6px!important;width:calc(100% - 148px)!important;min-width:0!important;height:48px!important;min-height:44px!important;padding:0!important;pointer-events:auto!important;background:transparent!important;border:0!important;} body.is-pve-battle #gameScreen #playerProfileButton .player-chip-avatar{width:44px!important;height:44px!important;min-width:44px!important;} body.is-pve-battle #gameScreen #playerProfileButton .player-chip-copy{display:grid!important;width:auto!important;gap:3px!important;min-width:0!important;} body.is-pve-battle #gameScreen #playerProfileButton .player-chip-identity{display:flex!important;gap:4px!important;min-width:0!important;font-size:11px!important;} body.is-pve-battle #gameScreen #playerProfileButton .player-chip-identity b{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:11px!important;} body.is-pve-battle #gameScreen #playerProfileButton .player-chip-identity em{font-size:10px!important;white-space:nowrap!important;} body.is-pve-battle #gameScreen #playerProfileButton :is(.player-chip-meta,.player-chip-progress,.player-chip-open-hint),body.is-pve-battle #gameScreen .world-topbar :is(#worldMovementButton,#notificationCenterButton,.instance-chip){display:none!important;} body.is-pve-battle #gameScreen #worldWallet{display:flex!important;position:absolute!important;inset:0 0 auto auto!important;width:140px!important;min-width:0!important;max-width:140px!important;height:44px!important;min-height:0!important;gap:5px!important;padding:5px!important;box-sizing:border-box!important;} body.is-pve-battle #gameScreen #worldWallet .world-wallet-currency{gap:3px!important;font-size:11px!important;} body.is-pve-battle #gameScreen #worldWallet :is(.world-wallet-currency-icon,.world-wallet-currency-icon img){width:18px!important;height:18px!important;} body.is-pve-battle #gameScreen #worldWallet button{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;} body.is-pve-battle #gameScreen .mobile-dock{display:grid!important;position:fixed!important;inset:auto 8px 8px 64px!important;width:auto!important;height:56px!important;padding:4px!important;box-sizing:border-box!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;pointer-events:auto!important;transform:none!important;border-radius:12px!important;} body.is-pve-battle #gameScreen .mobile-dock>button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-width:44px!important;min-height:44px!important;width:100%!important;height:44px!important;padding:2px!important;gap:2px!important;} body.is-pve-battle #gameScreen .mobile-dock>button>span,body.is-pve-battle #gameScreen .mobile-dock img{width:22px!important;height:22px!important;} body.is-pve-battle #gameScreen .mobile-dock>button>b{display:block!important;font-size:8px!important;line-height:10px!important;} } @media(min-width:460px) and (max-height:600px){ body.is-pve-battle #battleHud[data-pve-window="true"]{--pve-head:48px!important;--arena-deck:208px!important;inset:50% auto auto calc(50% + 68px)!important;width:calc(100vw - 160px)!important;height:calc(100dvh - 24px)!important;max-height:none!important;} body.is-pve-battle #battleHud :is(#battlefieldGround,#pveArenaBounds){inset:var(--pve-head) var(--arena-deck) 0 0!important;} body.is-pve-battle #battleHud #battleCommandDeck{inset:var(--pve-head) 0 0 auto!important;width:var(--arena-deck)!important;height:calc(100% - var(--pve-head))!important;padding:8px!important;border-top:0!important;border-left:1px solid #bed1c9!important;border-radius:0 0 18px 0!important;} body.is-pve-battle #battleHud #battleLiveControls:not([hidden]){display:flex!important;flex-direction:column!important;} body.is-pve-battle #battleHud #battleSkills{grid-template-columns:repeat(2,minmax(0,1fr))!important;} body.is-pve-battle #battleHud .arena-navigation{grid-template-columns:repeat(4,minmax(0,1fr))!important;height:44px!important;} body.is-pve-battle #battleHud .arena-navigation button{padding:0!important;min-width:44px!important;} body.is-pve-battle #battleHud .arena-navigation button span{display:none!important;} body.is-pve-battle #battleHud #battleQuickItems{grid-template-columns:repeat(3,minmax(0,1fr))!important;} body.is-pve-battle #battleHud #battleQuickItems .combat-item-button{height:54px!important;} body.is-pve-battle #battleHud #battleRoster button{height:44px!important;min-height:44px!important;} body.is-pve-battle #battleHud[data-arena-panel="menu"] .arena-menu{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;} body.is-pve-battle #battleHud :is(.battlefield-tools,.combat-utility-actions){display:grid!important;grid-template-columns:repeat(3,minmax(44px,1fr))!important;gap:5px!important;width:100%!important;} body.is-pve-battle #battleHud :is(.battlefield-tools button,.combat-utility-actions button){min-width:44px!important;width:100%!important;padding:4px!important;flex-direction:column!important;gap:2px!important;font-size:8px!important;line-height:10px!important;} body.is-pve-battle #battleHud .arena-item-note{display:none!important;} } @media(min-width:460px) and (max-width:760px) and (max-height:600px){ body.is-pve-battle #battleHud[data-pve-window="true"]{inset:50% auto auto calc(50% + 28px)!important;width:calc(100vw - 72px)!important;--pve-head:44px!important;} body.is-pve-battle #battleHud .pve-window-status{max-width:35%!important;} } @media(min-width:460px) and (max-height:600px){ body.is-pve-battle #battleHud #battleDecision .battle-result-card{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;grid-template-rows:minmax(0,1fr) auto!important;gap:8px!important;} body.is-pve-battle #battleHud .battle-result-outcome{grid-column:1!important;grid-row:1!important;min-height:0!important;padding:6px!important;flex-direction:column!important;align-items:start!important;justify-content:center!important;gap:4px!important;overflow:auto!important;} body.is-pve-battle #battleHud .battle-result-emblem{width:28px!important;height:28px!important;min-width:28px!important;} body.is-pve-battle #battleHud #battleRewardTitle{font-size:14px!important;line-height:17px!important;} body.is-pve-battle #battleHud #battleRewardSummary{font-size:9px!important;line-height:12px!important;} body.is-pve-battle #battleHud .battle-result-drops{grid-column:2!important;grid-row:1!important;padding:6px!important;} body.is-pve-battle #battleHud .battle-result-actions{grid-column:1/-1!important;grid-row:2!important;} } @media(max-height:600px){ body.is-pve-battle #battleHud #captureReticle{top:48%!important;left:62%!important;width:72px!important;height:72px!important;transform:translate(-50%,-50%)!important;} body.is-pve-battle #battleHud #captureThrow{inset:auto auto 8px 15%!important;width:56px!important;height:56px!important;min-width:44px!important;min-height:44px!important;transform:none!important;} body.is-pve-battle #battleHud #captureThrow :is(.capture-throw-icon,.capture-throw-icon>img){width:52px!important;height:52px!important;} body.is-pve-battle #battleHud .capture-minimal-hud{inset:4px 8px auto!important;} body.is-pve-battle #battleHud .capture-wild-label{display:none!important;} body.is-pve-battle #battleHud #cancelCapture{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;} body.is-pve-battle #battleHud #captureFeedback{inset:5px auto auto 8px!important;width:calc(100% - 72px)!important;max-width:300px!important;min-width:0!important;padding:5px!important;transform:none!important;} body.is-pve-battle #battleHud #captureFeedback :is(small,b,em){font-size:9px!important;line-height:12px!important;} body.is-pve-battle #battleHud #captureGestureHint{display:none!important;} } } @layer combat-experience-r2{body.is-pve-battle #battleHud#battleHud #battleQuickItems{width:100%!important;max-width:none!important;grid-template-columns:repeat(auto-fit,minmax(44px,1fr))!important;gap:4px!important;height:auto!important}} /* pk-style-source:4 */ /* /battlefield-arena.css */ @layer battlefield-arena { html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"]{--arena-deck:160px !important;--arena-pad:18px !important;position:fixed !important;inset:0 !important;width:100% !important;height:100dvh !important;max-height:none !important;max-width:none !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;transform:none !important;color:#eaf3ed !important;background:transparent !important;font-family:Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-shell,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleStage{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-width:1440px !important;max-height:none !important;margin:0 auto !important;padding:0 !important;border:0 !important;border-radius:0 !important;transform:none !important;background:transparent !important;overflow:visible !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldGround{position:absolute !important;inset:0 0 var(--arena-deck) !important;overflow:hidden !important;pointer-events:none !important;container-type:inline-size !important;contain:layout style !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-top{position:absolute !important;inset:max(10px,env(safe-area-inset-top)) var(--arena-pad) auto !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:8px !important;z-index:10 !important;pointer-events:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-title{display:grid !important;gap:3px !important;max-width:calc(100% - 86px) !important;min-width:0 !important;padding:9px 12px !important;border-radius:11px !important;background:#102b2be6 !important;border:1px solid #deeddd33 !important;box-shadow:0 3px 14px #001a2222 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-title small{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-title b{font:600 14px/17px Arial,sans-serif !important;color:#fff !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-title span{font:400 10px/13px Arial,sans-serif !important;color:#c6d9d0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-opponent{display:flex !important;gap:3px !important;padding:7px 8px !important;border-radius:20px !important;background:#102b2bc9 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-opponent i{display:block !important;width:9px !important;height:9px !important;border:1px solid #fff !important;border-radius:50% !important;background:linear-gradient(#dd8b77 0 43%,#18332e 43% 57%,#eee 57%) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-opponent i.is-fainted{opacity:.3 !important;filter:grayscale(1) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-queue{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health{position:absolute !important;transform:translate(-50%,8px) !important;width:144px !important;height:45px !important;min-height:45px !important;padding:5px 8px !important;box-sizing:border-box !important;overflow:hidden !important;border:1px solid #d4e6d95c !important;border-radius:9px !important;background:#102e2de8 !important;color:#f5f9f1 !important;pointer-events:auto !important;box-shadow:0 3px 9px #02222126 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health header,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health footer{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:4px !important;min-height:11px !important;height:11px !important;padding:0 !important;margin:0 !important;white-space:nowrap !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health b{min-width:0 !important;font:600 11px/11px Arial,sans-serif !important;text-overflow:ellipsis !important;overflow:hidden !important;white-space:nowrap !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health small,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health footer{font:400 9px/11px Arial,sans-serif !important;color:#c9ddd1 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health em{font:400 9px/11px Arial,sans-serif !important;max-width:48% !important;text-overflow:ellipsis !important;overflow:hidden !important;color:#edda9e !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-hp{display:block !important;height:4px !important;background:#041c21 !important;border-radius:4px !important;overflow:hidden !important;margin:4px 0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-hp i{display:block !important;width:100% !important;height:100% !important;background:#8bda8b !important;transform-origin:left !important;transition:transform .16s linear !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health[data-hp="low"] .battlefield-hp i{background:#f68879 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health[data-hp="mid"] .battlefield-hp i{background:#e9ce81 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health.is-selected{border-color:#f1d28a !important;box-shadow:0 0 0 1px #f1d28a88 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health.is-fainted{opacity:.5 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleMatchHeader,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-stage-decor,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleAllies,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTargets{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleHealth{position:absolute !important;clip-path:inset(50%) !important;width:1px !important;height:1px !important;overflow:hidden !important;pointer-events:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandDeck[data-view="combat"],html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandDeck[data-view="paused"]{position:absolute !important;inset:auto 0 0 !important;width:100% !important;height:var(--arena-deck) !important;max-height:none !important;max-width:none !important;transform:none !important;margin:0 !important;padding:8px var(--arena-pad) max(6px,env(safe-area-inset-bottom)) !important;border:0 !important;border-top:1px solid #d1dec73d !important;border-radius:16px 16px 0 0 !important;background:#102729fa !important;box-shadow:0 -6px 20px #09242633 !important;overflow:visible !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleLiveControls{display:flex !important;flex-direction:column !important;gap:5px !important;height:100% !important;max-height:none !important;margin:0 !important;padding:0 !important;background:none !important;border:0 !important;overflow:visible !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #mobileBattleTabs{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-main-row{display:block !important;position:relative !important;inset:auto !important;transform:none !important;contain:style !important;flex:1 !important;min-height:0 !important;max-height:none !important;width:100% !important;height:auto !important;margin:0 !important;padding:0 !important;overflow:visible !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-skills-panel,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-items-panel,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-panel{position:static !important;inset:auto !important;transform:none !important;grid-area:auto !important;order:0 !important;width:100% !important;min-width:0 !important;max-width:none !important;height:auto !important;min-height:0 !important;max-height:none !important;contain:style !important;margin:0 !important;padding:0 !important;background:none !important;border:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-skills-panel>header,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-items-panel>header{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-skills-panel,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-items-panel,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-menu,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRosterPanel{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] [data-arena-panel="skills"] .combat-skills-panel{display:block !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] [data-arena-panel="items"] .combat-items-panel{display:block !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] [data-arena-panel="team"] #battleRosterPanel{display:block !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] [data-arena-panel="menu"] .arena-menu{display:flex !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-panel="skills"] .combat-skills-panel{display:block !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-panel="items"] .combat-items-panel{display:block !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-panel="team"] #battleRosterPanel{display:block !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-panel="menu"] .arena-menu{display:grid !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkillCluster{display:block !important;position:static !important;inset:auto !important;transform:none !important;contain:style !important;width:100% !important;height:auto !important;min-height:0 !important;max-height:none !important;overflow:visible !important;padding:0 !important;margin:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;grid-template-rows:none !important;grid-auto-rows:auto !important;align-content:start !important;gap:8px !important;width:100% !important;height:auto !important;padding:0 !important;margin:0 !important;overflow:visible !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-action-button{display:grid !important;position:relative !important;grid-template-columns:24px minmax(0,1fr) !important;grid-template-rows:1fr 16px !important;gap:1px 7px !important;align-content:center !important;align-items:center !important;inset:auto !important;transform:none !important;width:100% !important;height:68px !important;min-height:44px !important;max-height:none !important;padding:9px 10px !important;margin:0 !important;border:1px solid #8ca99a66 !important;border-radius:9px !important;background:#203e3c !important;box-shadow:none !important;color:#f0f7e9 !important;overflow:hidden !important;text-align:left !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-art{display:block !important;position:static !important;inset:auto !important;transform:none !important;width:24px !important;height:24px !important;grid-row:1 / 3 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-art img{width:100% !important;height:100% !important;object-fit:contain !important;max-width:none !important;max-height:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-name{position:static !important;grid-column:2 !important;grid-row:1 !important;width:auto !important;max-width:none !important;padding:0 !important;margin:0 !important;font:600 12px/14px Arial,sans-serif !important;white-space:normal !important;overflow:hidden !important;color:#f2f7ee !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-cost{position:static !important;grid-column:2 !important;grid-row:2 !important;display:flex !important;gap:4px !important;align-items:center !important;font:400 10px/12px Arial,sans-serif !important;color:#bed4c5 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills small{font-size:10px !important;line-height:12px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-type-icon{width:12px !important;height:12px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills kbd{position:absolute !important;right:5px !important;top:4px !important;padding:1px 3px !important;font:400 9px/10px Arial,sans-serif !important;border:0 !important;border-radius:3px !important;color:#c8ddcc !important;background:#0a262b !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-meta,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-detail{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-cooldown{position:absolute !important;inset:auto 5px 4px auto !important;font:600 11px/12px Arial,sans-serif !important;color:#ffdeb1 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-action-button.is-queued{border-color:#f1d28a !important;background:#4c5038 !important;box-shadow:inset 0 0 0 1px #f1d28a66 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-action-button.is-disabled{opacity:.58 !important;filter:saturate(.65) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandDeck[data-view="combat"],html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandDeck[data-view="paused"]{min-height:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandDeck[data-view="combat"],html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandDeck[data-view="paused"]{z-index:20 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-art{min-width:0 !important;min-height:0 !important;max-width:24px !important;max-height:24px !important;grid-area:1 / 1 / 3 / 2 !important;justify-self:start !important;align-self:center !important;clip-path:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-art img{min-width:0 !important;min-height:0 !important;max-width:100% !important;max-height:100% !important;padding:0 !important;margin:0 !important;border:0 !important;clip-path:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-name{min-width:0 !important;min-height:0 !important;height:auto !important;justify-self:start !important;align-self:end !important;text-align:left !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-cost{inset:auto !important;min-width:0 !important;min-height:0 !important;height:12px !important;width:auto !important;justify-self:start !important;align-self:start !important;padding:0 !important;margin:0 !important;border:0 !important;border-radius:0 !important;background:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-cost img{width:11px !important;height:11px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-tags,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-ultimate-badge,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-action-button>em{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills kbd{inset:4px 5px auto auto !important;display:block !important;width:auto !important;height:auto !important;min-width:0 !important;min-height:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-cooldown{inset:auto 6px 6px auto !important;transform:none !important;width:auto !important;height:auto !important;min-width:0 !important;min-height:0 !important;border:0 !important;clip-path:none !important;background:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-cooldown::before,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-cooldown::after{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-cooldown b{font:600 11px/12px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems{display:grid !important;grid-template-columns:repeat(6,minmax(0,1fr)) !important;grid-template-rows:none !important;grid-auto-rows:auto !important;gap:8px !important;width:100% !important;height:auto !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button{display:flex !important;align-items:center !important;justify-content:center !important;gap:6px !important;position:relative !important;inset:auto !important;transform:none !important;translate:none !important;rotate:none !important;scale:none !important;width:100% !important;min-width:44px !important;height:68px !important;min-height:44px !important;margin:0 !important;padding:8px !important;border:1px solid #8ca99a66 !important;border-radius:9px !important;background:#203e3c !important;color:#f0f7e9 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-art{display:block !important;position:static !important;inset:auto !important;transform:none !important;width:24px !important;height:24px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems img{width:24px !important;height:24px !important;object-fit:contain !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems kbd{position:absolute !important;left:5px !important;top:4px !important;font-size:9px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-count{position:absolute !important;right:5px !important;bottom:4px !important;font:600 10px/12px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button>span:first-child{display:block !important;position:static !important;inset:auto !important;min-width:0 !important;min-height:0 !important;width:24px !important;height:24px !important;transform:none !important;flex:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .arena-item-label{display:block !important;position:static !important;inset:auto !important;transform:none !important;min-width:0 !important;width:auto !important;height:auto !important;font:400 10px/12px Arial,sans-serif !important;white-space:normal !important;text-align:left !important;color:#dcebdd !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button>kbd{inset:4px auto auto 5px !important;width:auto !important;height:auto !important;min-width:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button>b{position:absolute !important;inset:auto 5px 4px auto !important;font:400 9px/11px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .is-empty-slot>span:first-child{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .is-empty-slot{background:#173330 !important;opacity:.5 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-cooldown{inset:auto 5px 3px auto !important;transform:none !important;width:20px !important;height:20px !important;border:0 !important;background:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-resource-row{display:flex !important;align-items:center !important;gap:10px !important;order:-1 !important;position:static !important;min-height:18px !important;height:18px !important;max-height:18px !important;width:100% !important;margin:0 !important;padding:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-energy{position:static !important;display:flex !important;align-items:center !important;gap:7px !important;width:auto !important;min-width:0 !important;height:18px !important;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-energy>span{display:flex !important;align-items:center !important;gap:5px !important;white-space:nowrap !important;font:400 10px/12px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-energy small{font:400 9px/12px Arial,sans-serif !important;letter-spacing:.4px !important;color:#bdd5cb !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-energy b{font:600 10px/12px Arial,sans-serif !important;color:#ecf6ed !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-energy>span>i{width:13px !important;height:13px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandEnergyTrack{position:relative !important;display:block !important;width:74px !important;min-width:0 !important;height:4px !important;padding:0 !important;margin:0 !important;border:0 !important;border-radius:4px !important;background:#051d24 !important;overflow:hidden !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandEnergyBar{position:absolute !important;inset:0 auto 0 0 !important;height:100% !important;border:0 !important;border-radius:3px !important;background:#79cbd1 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-energy-marker,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-energy-current,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleLog{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-navigation{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:5px !important;flex:none !important;min-height:44px !important;height:44px !important;margin:0 !important;padding:0 !important;border-top:1px solid #acc9b72e !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-navigation button{display:flex !important;align-items:center !important;justify-content:center !important;gap:6px !important;min-width:44px !important;min-height:44px !important;height:44px !important;padding:6px !important;border:0 !important;border-radius:8px !important;background:none !important;color:#b5cec4 !important;cursor:pointer !important;font:400 11px/13px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-navigation svg,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools svg{width:17px !important;height:17px !important;flex:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-navigation button[aria-pressed="true"]{background:#294642 !important;color:#f4e7bc !important;box-shadow:inset 0 -2px #e8ce85 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-navigation button[aria-pressed="false"]{background:none !important;box-shadow:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-menu{gap:8px !important;align-items:center !important;justify-content:space-between !important;flex-wrap:wrap !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-menu{grid-template-columns:1fr auto !important;grid-template-rows:none !important;grid-auto-rows:auto !important;height:auto !important;min-height:0 !important;max-height:none !important;align-content:start !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-menu>header{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-actions{display:flex !important;align-items:stretch !important;gap:7px !important;width:auto !important;max-width:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-actions{height:auto !important;min-height:0 !important;max-height:none !important;grid-template-rows:none !important;grid-auto-rows:auto !important;align-content:start !important;flex-shrink:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-panel{width:auto !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools button,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-actions button{display:flex !important;align-items:center !important;justify-content:center !important;gap:6px !important;min-width:44px !important;min-height:44px !important;height:44px !important;width:auto !important;max-width:none !important;margin:0 !important;padding:7px 12px !important;border:1px solid #90ac9b55 !important;border-radius:8px !important;background:#203e3c !important;color:#e6eee5 !important;font:400 11px/13px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-actions button i{width:16px !important;height:16px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-actions button b{font:400 11px/13px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #cancelBattle{color:#f1b49d !important;border-color:#c4887144 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRosterPanel{position:static !important;inset:auto !important;transform:none !important;max-height:none !important;max-width:none !important;width:100% !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;overflow:visible !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRosterPanel>header,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRosterPanel>p{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster{display:grid !important;grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:7px !important;width:100% !important;height:auto !important;margin:0 !important;padding:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster{grid-template-rows:none !important;grid-auto-rows:auto !important;align-content:start !important;grid-auto-flow:row !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button{position:relative !important;display:grid !important;grid-template-columns:26px minmax(0,1fr) !important;gap:2px 5px !important;align-content:center !important;min-width:44px !important;min-height:44px !important;width:100% !important;height:68px !important;padding:5px 7px !important;margin:0 !important;transform:none !important;border:1px solid #8ca99a66 !important;border-radius:9px !important;background:#203e3c !important;color:#e7f2e9 !important;overflow:hidden !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>i:first-child{position:static !important;grid-row:1 / 4 !important;display:block !important;width:26px !important;height:32px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button img{max-width:26px !important;max-height:32px !important;object-fit:contain !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>span{display:block !important;position:static !important;min-width:0 !important;padding:0 !important;margin:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>span{grid-column:2 !important;grid-row:1 / 4 !important;align-self:center !important;justify-self:stretch !important;transform:none !important;width:100% !important;max-width:none !important;text-align:left !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>.battle-roster-active-arrow:first-child{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>span b{display:block !important;font:600 10px/11px Arial,sans-serif !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster .battle-roster-active-arrow{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster .battle-roster-portrait{position:static !important;inset:auto !important;transform:none !important;grid-column:1 !important;grid-row:1 / 4 !important;width:26px !important;height:32px !important;min-width:0 !important;min-height:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>span b{color:#eef5e8 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>span small{color:#b9d3c6 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>span small{display:block !important;font:400 9px/10px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>strong{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>kbd{position:absolute !important;right:3px !important;top:2px !important;font-size:8px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster .battle-roster-hp,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster .battle-roster-energy{display:block !important;position:relative !important;inset:auto !important;width:100% !important;height:3px !important;margin:1px 0 !important;padding:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button.is-active{border-color:#e8ce85 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldHelp,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics{position:absolute !important;z-index:50 !important;inset:50% auto auto 50% !important;transform:translate(-50%,-50%) !important;width:min(460px,calc(100% - 24px)) !important;min-width:0 !important;max-width:calc(100% - 24px) !important;max-height:calc(100% - 32px) !important;margin:0 !important;padding:18px !important;border:1px solid #a8c5ad66 !important;border-radius:16px !important;background:#122f30fa !important;color:#edf6e8 !important;box-shadow:0 12px 60px #001b2377 !important;overflow:auto !important;pointer-events:auto !important;font:400 13px/1.55 Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldHelp,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics{display:block !important;grid-template-columns:none !important;grid-template-rows:none !important;height:auto !important;min-height:0 !important;box-sizing:border-box !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldHelp header,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics>header{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;margin:0 0 10px !important;padding:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldHelp header b,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTacticsTitle{color:#fff !important;font:600 18px/22px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldHelp header button,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics>header button{width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important;padding:0 !important;border:1px solid #bfd6c544 !important;border-radius:9px !important;background:#254543 !important;color:#fff !important;font-size:23px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldHelp p{margin:10px 0 !important;color:#e0ede0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldHelp small{color:#e9cf9b !important;font-size:11px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics .battle-tactic-modes{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics .battle-tactic-modes{position:static !important;inset:auto !important;transform:none !important;width:100% !important;min-width:0 !important;max-width:none !important;height:auto !important;min-height:0 !important;grid-template-rows:none !important;grid-auto-rows:auto !important;margin:0 !important;padding:0 !important;background:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics .battle-tactic-modes button{min-height:70px !important;padding:8px !important;border-radius:9px !important;border:1px solid #90ac9b55 !important;background:#24423f !important;color:#edf6e8 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics .battle-tactic-modes button{display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:8px !important;position:static !important;inset:auto !important;transform:none !important;min-width:0 !important;width:100% !important;height:auto !important;grid-area:auto !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics .battle-tactic-modes button b,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics .battle-tactic-modes button small{display:block !important;white-space:normal !important;overflow:visible !important;color:#e0eee1 !important;-webkit-text-fill-color:currentColor !important;font:400 11px/15px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics>header{position:static !important;inset:auto !important;width:100% !important;min-width:0 !important;height:auto !important;min-height:44px !important;padding:0 !important;background:none !important;border:0 !important;grid-area:auto !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics>header>span{display:block !important;min-width:0 !important;width:auto !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics>header>span small{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics>header>nav{display:flex !important;gap:5px !important;flex:none !important;width:auto !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics p,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics footer{position:static !important;inset:auto !important;transform:none !important;width:100% !important;margin:10px 0 0 !important;padding:10px !important;border:0 !important;border-radius:8px !important;background:var(--bf-control) !important;color:var(--bf-text) !important;font:400 12px/17px Arial,sans-serif !important;grid-area:auto !important;-webkit-text-fill-color:currentColor !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics .battle-tactic-rules{position:static !important;grid-area:auto !important;width:100% !important;padding:0 !important;margin:10px 0 0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics .battle-tactic-rules label{display:flex !important;gap:8px !important;align-items:center !important;min-height:44px !important;margin:0 !important;padding:6px !important;background:var(--bf-control) !important;border:0 !important;color:var(--bf-text) !important;-webkit-text-fill-color:currentColor !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics .battle-tactic-modes i{width:24px !important;height:24px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics p,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics small,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics footer,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTactics label{color:var(--bf-muted) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkillPreview{position:absolute !important;z-index:60 !important;inset:auto !important;left:var(--battle-tooltip-x,12px) !important;top:var(--battle-tooltip-y,90px) !important;transform:none !important;translate:none !important;width:min(320px,calc(100% - 24px)) !important;min-width:0 !important;max-width:calc(100% - 24px) !important;max-height:calc(100% - 24px) !important;margin:0 !important;padding:14px !important;border:1px solid #b9d1b966 !important;border-radius:12px !important;background:#112e30fa !important;color:#edf6e8 !important;overflow:auto !important;box-sizing:border-box !important;pointer-events:auto !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleTooltipLayer{z-index:60 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkillPreviewIcon{width:30px !important;height:30px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSurrenderConfirm{position:absolute !important;z-index:70 !important;inset:0 !important;display:grid !important;place-items:center !important;padding:12px !important;background:#061c2577 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSurrenderConfirm>article{display:block !important;position:relative !important;inset:auto !important;transform:none !important;width:min(400px,100%) !important;max-height:calc(100dvh - 24px) !important;margin:0 !important;padding:20px !important;border:1px solid #d9aa8b66 !important;border-radius:16px !important;background:#122f30 !important;color:#edf6e8 !important;overflow:auto !important;box-shadow:0 12px 70px #001b2380 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSurrenderConfirm>article>i{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSurrenderConfirm small{font-size:10px !important;color:#efc396 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSurrenderTitle{display:block !important;margin-top:6px !important;color:white !important;font:600 22px/26px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSurrenderDescription{margin:12px 0 18px !important;color:#ccdfd2 !important;font:400 13px/1.5 Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSurrenderConfirm footer{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;margin:0 !important;padding:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSurrenderConfirm footer button{min-height:44px !important;height:auto !important;padding:10px !important;border-radius:9px !important;border:1px solid #9abbab55 !important;background:#284944 !important;color:#f2f6e9 !important;font:600 12px/16px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #confirmSurrender{background:#744339 !important;border-color:#c1856d !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlePauseOverlay{position:absolute !important;z-index:30 !important;inset:0 0 var(--arena-deck) !important;display:flex !important;flex-direction:column !important;gap:12px !important;align-items:center !important;justify-content:center !important;padding:16px !important;background:#071e2766 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-pause-status{display:flex !important;gap:8px !important;align-items:center !important;padding:12px 16px !important;border-radius:12px !important;background:#122f30 !important;color:#f1f6eb !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-pause-glyph{width:20px !important;height:20px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-resume{min-height:44px !important;padding:10px 18px !important;border:1px solid #cbd0a1 !important;border-radius:9px !important;background:#dfd39a !important;color:#17382f !important;font:600 13px/18px Arial,sans-serif !important;pointer-events:auto !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleAssetLoader{position:absolute !important;z-index:80 !important;inset:0 !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:20px !important;width:100% !important;height:100% !important;min-height:0 !important;margin:0 !important;padding:32px 24px !important;border:0 !important;border-radius:0 !important;transform:none !important;background:radial-gradient(ellipse at 50% 35%,#24443e,#0c232b 65%) !important;color:#f2f6ec !important;box-shadow:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleAssetLoader::before,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleAssetLoader::after{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-loader-emblem{display:grid !important;place-items:center !important;position:relative !important;inset:auto !important;width:64px !important;height:64px !important;margin:0 !important;padding:13px !important;border:1px solid #d6dab459 !important;border-radius:50% !important;background:#345449 !important;transform:none !important;box-shadow:0 0 45px #acbc6d22 !important;animation:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-loader-emblem img{display:block !important;width:36px !important;height:36px !important;object-fit:contain !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-loader-copy{display:flex !important;flex-direction:column !important;align-items:center !important;gap:10px !important;width:min(340px,100%) !important;margin:0 !important;padding:0 !important;text-align:center !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-loader-copy{position:static !important;inset:auto !important;transform:none !important;height:auto !important;min-height:0 !important;order:1 !important;text-shadow:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleLoadStep{font:400 10px/14px Arial,sans-serif !important;letter-spacing:2px !important;color:#d9d9b0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleLoadLabel{font:600 18px/24px Arial,sans-serif !important;color:#f3f7ec !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-load-track{display:block !important;position:relative !important;width:100% !important;height:4px !important;margin:10px 0 0 !important;border:0 !important;border-radius:4px !important;background:#041c24 !important;overflow:hidden !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleLoadProgress{display:block !important;position:absolute !important;inset:0 auto 0 0 !important;height:100% !important;border-radius:4px !important;background:#d8d39d !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleLoadCount{font:400 11px/16px Arial,sans-serif !important;color:#b5cfc4 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-loading-match{font:400 13px/18px Arial,sans-serif !important;color:#b5cfc4 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-loading-match{position:static !important;inset:auto !important;transform:none !important;order:2 !important;flex:none !important;width:auto !important;height:auto !important;text-align:center !important;margin:0 !important;padding:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleIntro{position:absolute !important;z-index:22 !important;inset:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:20px !important;width:100% !important;height:100% !important;padding:20px !important;transform:none !important;background:#0a252b99 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-intro-fighter{display:flex !important;flex-direction:column !important;align-items:center !important;gap:8px !important;min-width:0 !important;width:130px !important;padding:12px !important;border:0 !important;border-radius:12px !important;background:#173633e8 !important;transform:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-intro-portrait{width:58px !important;height:58px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-intro-fighter b{font:600 13px/17px Arial,sans-serif !important;color:#fff !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-intro-fighter small{font-size:9px !important;color:#bcd3c4 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-intro-copy{width:100px !important;min-width:0 !important;text-align:center !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-intro-copy strong{font:600 22px/28px Arial,sans-serif !important;color:#f1dfa7 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-intro-copy small{font-size:9px !important;color:#cddfd1 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-intro-copy em{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleDecision{position:absolute !important;z-index:40 !important;inset:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:18px !important;background:#071e2766 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-card{position:relative !important;inset:auto !important;transform:none !important;display:flex !important;flex-direction:column !important;gap:16px !important;width:min(500px,100%) !important;max-height:calc(100dvh - 36px) !important;padding:22px !important;margin:0 !important;border:1px solid #d3d7b366 !important;border-radius:18px !important;background:#122e30f5 !important;color:#f2f7eb !important;overflow:auto !important;box-shadow:0 16px 60px #001c2577 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-outcome{display:flex !important;align-items:center !important;gap:12px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-emblem{position:static !important;flex:none !important;width:52px !important;height:52px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-copy{display:grid !important;gap:6px !important;min-width:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-copy small{color:#d9d7ab !important;font-size:10px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardTitle{color:#fff !important;font:600 25px/29px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardSummary{color:#c8ddd0 !important;font:400 12px/18px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-drops{margin:0 !important;padding:12px !important;border:1px solid #bfd6bf33 !important;border-radius:10px !important;background:#24423b66 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-drops header{color:#c8d8ba !important;font-size:10px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList{display:grid !important;gap:8px !important;margin:8px 0 0 !important;padding:0 !important;max-height:36dvh !important;overflow:auto !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList img,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList i{max-width:28px !important;max-height:28px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-actions{display:flex !important;gap:8px !important;min-height:0 !important;height:auto !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-actions:not(:has(button:not([hidden]))){display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-actions button{flex:1 !important;position:relative !important;inset:auto !important;min-width:0 !important;min-height:48px !important;height:auto !important;padding:10px 12px !important;border:1px solid #b6c79766 !important;border-radius:10px !important;background:#325448 !important;color:#f4f8eb !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-actions button i{width:20px !important;height:20px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-actions button b{font-size:12px !important;color:#fff !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-actions button small{font-size:10px !important;color:#ccddc9 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-copy *,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-actions *,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-loader-copy *,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-loading-match,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList *{-webkit-text-fill-color:currentColor !important;text-shadow:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList .battle-reward-drop{display:grid !important;grid-template-columns:24px minmax(0,1fr) auto !important;grid-template-rows:auto !important;align-items:center !important;gap:10px !important;min-width:0 !important;min-height:46px !important;height:auto !important;width:100% !important;margin:0 !important;padding:8px !important;border:0 !important;border-radius:8px !important;background:#23433f !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList .battle-reward-drop-art,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList .battle-reward-drop-art img,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList .battle-reward-drop-art svg{position:static !important;inset:auto !important;transform:none !important;width:24px !important;height:24px !important;min-width:0 !important;min-height:0 !important;max-width:24px !important;max-height:24px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList .battle-reward-drop>span{display:grid !important;gap:3px !important;min-width:0 !important;text-align:left !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList .battle-reward-drop b{color:#eff5e8 !important;font:600 11px/14px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList .battle-reward-drop small{color:#bbd4c7 !important;font:400 10px/13px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList .battle-reward-drop strong{color:#f2d38c !important;font:600 14px/18px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList{grid-template-columns:minmax(0,1fr) !important;grid-template-rows:none !important;grid-auto-rows:auto !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList .battle-reward-drop{position:relative !important;inset:auto !important;grid-area:auto !important;transform:none !important;float:none !important;box-sizing:border-box !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList .battle-reward-drop-art{grid-column:1 !important;grid-row:1 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList .battle-reward-drop>span{grid-column:2 !important;grid-row:1 !important;width:auto !important;max-width:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList .battle-reward-drop b,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList .battle-reward-drop small{position:static !important;inset:auto !important;transform:none !important;width:auto !important;min-width:0 !important;max-width:none !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList .battle-reward-drop strong{grid-column:3 !important;grid-row:1 !important;justify-self:end !important;align-self:center !important;position:static !important;inset:auto !important;transform:none !important;min-width:0 !important;max-width:none !important;width:auto !important;white-space:nowrap !important;text-align:right !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-actions button{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:8px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-actions button>span{display:grid !important;gap:3px !important;min-width:0 !important;width:auto !important;max-width:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-actions button b,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-actions button small{width:auto !important;min-width:0 !important;max-width:none !important;white-space:normal !important;text-align:left !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlePauseTitle{font:600 22px/28px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #capturePanel{background:#122e30f5 !important;border-color:#c5d5b44d !important;box-shadow:0 -5px 20px #05232933 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-capture-copy b,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-capture-copy small,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-capture-copy em,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-capture-copy strong,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #captureFeedback b,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #captureFeedback small,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #captureFeedback em,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .capture-wild-label *{color:#e7f2e7 !important;-webkit-text-fill-color:currentColor !important;text-shadow:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #captureFeedback,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .capture-wild-label{background:#122f30ed !important;border-color:#bfd6bc55 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #captureSelectedChance{background:#294b43 !important;color:#e5dfa9 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #captureBalls button{background:#24463f !important;color:#e6f2e5 !important;border-color:#91b7a066 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #captureBalls button b,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #captureBalls button small{color:#ecf5e7 !important;-webkit-text-fill-color:currentColor !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] button:focus-visible{outline:2px solid #ffe3a3 !important;outline-offset:2px !important;} @media(max-width:700px){ html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"]{--arena-deck:188px !important;--arena-pad:10px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:5px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-action-button{height:49px !important;padding:5px 7px !important;grid-template-columns:22px minmax(0,1fr) !important;grid-template-rows:1fr 12px !important;gap:0 6px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-art{width:22px !important;height:22px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-name{font-size:11px !important;line-height:12px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills kbd,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems kbd,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster kbd{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-navigation button{flex-direction:column !important;gap:2px !important;padding:3px !important;font-size:10px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-navigation svg{width:16px !important;height:16px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-title{padding:7px 9px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-title b{font-size:12px !important;line-height:15px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-title span{font-size:9px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health{width:120px !important;height:44px !important;min-height:44px !important;padding:5px 7px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health b{font-size:10px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health small,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health footer,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health em{font-size:8px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-count="2"] .battlefield-health{width:min(120px,27cqw) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:5px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button{height:49px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:5px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button{height:49px !important;padding:4px 5px !important;grid-template-columns:22px minmax(0,1fr) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>i:first-child{width:22px !important;height:26px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button img{max-width:22px !important;max-height:26px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>span b{font-size:9px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>span small{font-size:8px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-menu{gap:5px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-actions{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:5px !important;width:100% !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-panel{width:100% !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools button,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-actions button{height:44px !important;padding:5px !important;font-size:10px !important;gap:4px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools svg,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-actions button i{width:14px !important;height:14px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-actions button b{font-size:10px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-pc-help{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-menu{grid-template-columns:1fr !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleIntro{gap:8px !important;padding:12px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-intro-fighter{width:105px !important;padding:10px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-intro-copy{width:55px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-intro-copy strong{font-size:17px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-intro-portrait{width:44px !important;height:44px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-card{padding:16px !important;gap:12px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-emblem{width:40px !important;height:40px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardTitle{font-size:21px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-actions{flex-direction:column !important;} } @media(max-height:500px) and (min-width:450px){ html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"]{--arena-rail:208px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldGround{inset:0 var(--arena-rail) 0 0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-top{right:calc(var(--arena-rail) + 10px) !important;left:10px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-title span{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-title{padding:7px 9px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-title b{font-size:11px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandDeck[data-view="combat"],html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandDeck[data-view="paused"]{inset:0 0 0 auto !important;width:var(--arena-rail) !important;height:100% !important;padding:9px !important;border-radius:14px 0 0 14px !important;border-top:0 !important;border-left:1px solid #bfd6bf44 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleLiveControls{gap:6px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills{grid-template-columns:1fr !important;gap:6px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-action-button{height:49px !important;padding:5px 7px !important;grid-template-columns:22px minmax(0,1fr) !important;grid-template-rows:1fr 12px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-art{width:22px !important;height:22px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-skill-name{font-size:11px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills kbd{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-navigation{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:1px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-navigation button{flex-direction:column !important;gap:2px !important;padding:2px !important;font-size:9px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-navigation svg{width:15px !important;height:15px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:6px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button{height:61px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-menu{display:none !important;flex-direction:column !important;gap:8px !important;align-items:stretch !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-actions{display:grid !important;grid-template-columns:1fr 1fr !important;gap:6px !important;width:100% !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools button,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-actions button{font-size:10px !important;height:48px !important;padding:5px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] [data-arena-tool="view"]{grid-column:1 / -1 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-panel{width:100% !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-menu{grid-template-columns:1fr !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health{width:114px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlePauseOverlay{inset:0 var(--arena-rail) 0 0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battle-result-card{max-height:calc(100dvh - 24px) !important;padding:14px !important;gap:10px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRewardList{max-height:25dvh !important;} } @media(max-height:350px) and (min-width:450px){ html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-action-button{height:46px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills{gap:4px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleLiveControls{gap:4px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button{height:55px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools button,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-utility-actions button{height:44px !important;} } @media(min-width:1000px) and (min-height:501px){ html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandDeck[data-view="combat"],html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandDeck[data-view="paused"]{left:50% !important;right:auto !important;transform:translateX(-50%) !important;width:min(1100px,calc(100% - 40px)) !important;border:1px solid #b8d3b64d !important;border-bottom:0 !important;border-radius:18px 18px 0 0 !important;padding-inline:14px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-navigation{grid-template-columns:repeat(4,minmax(0,180px)) !important;justify-content:center !important;} } html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-energy{flex:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandEnergyTrack{width:54px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-command-context{display:flex !important;gap:12px !important;align-items:center !important;justify-content:space-between !important;min-width:0 !important;flex:1 !important;margin:0 !important;padding:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-readiness{display:flex !important;gap:5px !important;align-items:center !important;min-width:0 !important;color:#d7e5d4 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-readiness>i{flex:none !important;width:5px !important;height:5px !important;border-radius:50% !important;background:#8fd8aa !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-readiness>b{min-width:0 !important;font:400 11px/14px Arial,sans-serif !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-command-context>small{font:400 10px/14px Arial,sans-serif !important;color:#aebfb7 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:38% !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-command-context[data-state="casting"] .arena-readiness>i,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-command-context[data-state="queued"] .arena-readiness>i{background:#eed18a !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-command-context[data-state="locked"] .arena-readiness>i{background:#ef9e98 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-action-button{padding-bottom:10px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .arena-skill-state{position:absolute !important;inset:auto 9px 10px auto !important;max-width:45% !important;margin:0 !important;padding:0 !important;font:400 10px/12px Arial,sans-serif !important;color:#bdd7c6 !important;white-space:nowrap !important;text-overflow:ellipsis !important;overflow:hidden !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-cooldown{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-action-button[data-arena-availability="unavailable"] .arena-skill-state{color:#f4cea3 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-action-button[data-arena-availability="queued"] .arena-skill-state{color:#ffe0a0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-action-button{border-bottom:2px solid color-mix(in srgb,var(--skill-type) 50%,#45675b) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-readiness-track{position:absolute !important;inset:auto 8px 2px !important;height:2px !important;background:#d7e4d522 !important;border-radius:2px !important;overflow:hidden !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-readiness-track i{display:block !important;width:100% !important;height:100% !important;background:#e7c77f !important;transform-origin:left center !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health[data-readiness="ready"] .arena-readiness-track i{background:#8fd8aa !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health.is-selected[data-side="enemy"]{border-color:#ffe0a2 !important;box-shadow:inset 0 0 0 1px #ffe0a24d,0 2px 8px #132d2644 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-health.is-selected[data-side="enemy"] header b::before{content:"◎ " !important;color:#f3cf83 !important;font-size:9px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button.is-empty-slot{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button{height:54px !important;max-width:none !important;justify-self:stretch !important;align-self:stretch !important;display:grid !important;grid-template-columns:24px minmax(0,1fr) !important;grid-template-rows:minmax(0,1fr) 13px !important;column-gap:9px !important;text-align:left !important;align-items:center !important;padding:6px 8px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button>span:first-child{grid-row:1 / 3 !important;grid-column:1 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .arena-item-label{grid-column:2 !important;grid-row:1 !important;align-self:end !important;justify-self:stretch !important;width:100% !important;max-width:100% !important;min-height:0 !important;max-height:24px !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;font:600 11px/12px Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .arena-item-state{grid-column:2 !important;grid-row:2 !important;display:block !important;justify-self:stretch !important;width:100% !important;max-width:100% !important;min-width:0 !important;font:400 10px/12px Arial,sans-serif !important;color:#b6d3bf !important;white-space:nowrap !important;text-overflow:ellipsis !important;overflow:hidden !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button.is-disabled{opacity:.70 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button>kbd{inset:3px 5px auto auto !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button>b{inset:3px auto auto 5px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-cooldown{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="1"] #battleQuickItems{grid-template-columns:repeat(1,minmax(0,1fr)) !important;max-width:220px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="2"] #battleQuickItems{grid-template-columns:repeat(2,minmax(0,1fr)) !important;max-width:440px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="3"] #battleQuickItems{grid-template-columns:repeat(3,minmax(0,1fr)) !important;max-width:660px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="4"] #battleQuickItems{grid-template-columns:repeat(4,minmax(0,1fr)) !important;max-width:880px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="5"] #battleQuickItems{grid-template-columns:repeat(5,minmax(0,1fr)) !important;max-width:1100px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="6"] #battleQuickItems{grid-template-columns:repeat(6,minmax(0,1fr)) !important;max-width:1320px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-item-note{display:block !important;max-width:780px !important;margin:4px 0 0 !important;padding:0 !important;font:400 10px/14px Arial,sans-serif !important;color:#b4c9bb !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools button{padding:5px 8px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>strong{display:block !important;position:absolute !important;inset:3px 4px auto auto !important;font:600 8px/9px Arial,sans-serif !important;color:#b9d4c1 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button.is-active>strong{color:#e8d28e !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button.is-ko>strong{color:#efa69b !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>kbd{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldEvents{position:absolute !important;z-index:50 !important;inset:50% auto auto 50% !important;transform:translate(-50%,-50%) !important;display:block !important;width:min(460px,calc(100% - 24px)) !important;max-height:calc(100% - 32px) !important;min-width:0 !important;box-sizing:border-box !important;margin:0 !important;padding:18px !important;border:1px solid #a8c5ad66 !important;border-radius:16px !important;background:#122f30fa !important;color:#edf6e8 !important;box-shadow:0 12px 60px #001b2377 !important;overflow:auto !important;pointer-events:auto !important;font:400 13px/1.5 Arial,sans-serif !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldEvents header{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;margin:0 0 10px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldEvents header b{font:600 18px/22px Arial,sans-serif !important;color:#fff !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldEvents header button{width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important;padding:0 !important;border:1px solid #bfd6c544 !important;border-radius:9px !important;background:#254543 !important;color:#fff !important;font-size:23px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldEvents p{margin:0 0 12px !important;font:400 11px/16px Arial,sans-serif !important;color:#bacfbf !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldEvents ol{display:flex !important;flex-direction:column-reverse !important;gap:7px !important;list-style:none !important;margin:0 !important;padding:0 !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battlefieldEvents li{margin:0 !important;padding:9px 10px !important;border-radius:7px !important;background:#24443d !important;font:400 12px/17px Arial,sans-serif !important;color:#ebf2e3 !important;} @media(max-width:700px){ html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-energy small,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandEnergyTrack{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-resource-row{gap:10px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-readiness>b{font-size:10px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-command-context{gap:6px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-command-context>small{max-width:42% !important;font-size:9px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .arena-skill-state{inset:auto 7px 5px auto !important;font-size:9px !important;max-width:46% !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .combat-action-button{padding-bottom:5px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-item-note{font-size:9px !important;line-height:12px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button{height:70px !important;padding:8px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .arena-item-state{font-size:9px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .arena-item-label{font-size:10px !important;line-height:11px !important;max-height:22px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button>span:first-child,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-art{width:20px !important;height:20px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="1"] #battleQuickItems{grid-template-columns:repeat(1,minmax(0,1fr)) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="2"] #battleQuickItems{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="3"] #battleQuickItems{grid-template-columns:repeat(3,minmax(0,1fr)) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="4"] #battleQuickItems{grid-template-columns:repeat(3,minmax(0,1fr)) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="4"] #battleQuickItems .combat-item-button{height:48px !important;padding:4px 5px !important;grid-template-columns:20px minmax(0,1fr) !important;grid-template-rows:minmax(0,1fr) 12px !important;column-gap:5px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="4"] .arena-item-note{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="5"] #battleQuickItems{grid-template-columns:repeat(3,minmax(0,1fr)) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="5"] #battleQuickItems .combat-item-button{height:48px !important;padding:4px 5px !important;grid-template-columns:20px minmax(0,1fr) !important;grid-template-rows:minmax(0,1fr) 12px !important;column-gap:5px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="5"] .arena-item-note{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="6"] #battleQuickItems{grid-template-columns:repeat(3,minmax(0,1fr)) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="6"] #battleQuickItems .combat-item-button{height:48px !important;padding:4px 5px !important;grid-template-columns:20px minmax(0,1fr) !important;grid-template-rows:minmax(0,1fr) 12px !important;column-gap:5px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="6"] .arena-item-note{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:4px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools button{font-size:9px !important;padding:4px !important;gap:3px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>strong{position:static !important;grid-column:2 !important;grid-row:1 !important;align-self:start !important;justify-self:end !important;font-size:7px !important;line-height:8px !important;background:#203e3ce8 !important;} } @media(max-height:500px) and (min-width:450px){ html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-energy small,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleCommandEnergyTrack{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .combat-resource-row{gap:5px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-command-context{justify-content:flex-end !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-readiness>b{max-width:106px !important;font-size:9px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-command-context>small{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-tools{grid-template-columns:1fr 1fr !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] [data-arena-tool="view"]{grid-column:auto !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleSkills .arena-skill-state{inset:auto 6px 5px auto !important;font-size:9px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .combat-item-button{height:62px !important;grid-template-columns:20px minmax(0,1fr) !important;column-gap:5px !important;padding:6px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .arena-item-label{font-size:10px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleQuickItems .arena-item-state{font-size:9px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-item-note{font-size:9px !important;line-height:13px !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="1"] #battleQuickItems{grid-template-columns:repeat(1,minmax(0,1fr)) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="2"] #battleQuickItems{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="3"] #battleQuickItems{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="4"] #battleQuickItems{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="5"] #battleQuickItems{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-arena-items="6"] #battleQuickItems{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} } html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-dialog-veil{position:fixed !important;z-index:45 !important;inset:0 !important;background:#031d2a60 !important;pointer-events:auto !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button>strong{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button.is-active>strong{display:block !important;position:absolute !important;inset:4px 4px auto auto !important;width:5px !important;height:5px !important;border-radius:50% !important;background:#e8ce85 !important;font-size:0 !important;grid-area:auto !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleRoster button.is-ko>strong{display:block !important;position:absolute !important;inset:22px 5px auto auto !important;font:600 8px/10px Arial,sans-serif !important;color:#efa69b !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .arena-deck-backdrop{display:none !important;position:absolute !important;z-index:1 !important;inset:auto 0 0 !important;height:var(--arena-deck) !important;background:#0b2326 !important;pointer-events:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-view="combat"] .arena-deck-backdrop{display:block !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-view="paused"] .arena-deck-backdrop{display:block !important;} @media(max-height:500px) and (min-width:450px){ html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-view="combat"] .arena-deck-backdrop{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-view="paused"] .arena-deck-backdrop{display:none !important;} } html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] #battleStage [hidden][hidden]{display:none !important;} html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-view="loading"] .battlefield-top,html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"][data-view="loading"] #battlefieldGround{display:none !important;} @media(prefers-reduced-motion:reduce){ html[data-game-theme] body.is-battling #app #gameScreen #battleHud[data-battle-arena="v1"] .battlefield-hp i{transition:none !important;} } } #battleHud[data-battle-arena="classic"] .arena-command-context,#battleHud[data-battle-arena="classic"] .arena-item-note,#battleHud[data-battle-arena="classic"] .arena-skill-state,#battleHud[data-battle-arena="classic"] .arena-item-state,#battleHud[data-battle-arena="classic"] #battlefieldEvents{display:none;}#battleHud .arena-classic-return{position:absolute;right:12px;top:12px;z-index:90;min-height:44px;padding:8px 12px;border:1px solid #aac7b7;border-radius:9px;background:#133334;color:#fff;pointer-events:auto;}#battleHud[data-battle-arena="classic"] .arena-menu,#battleHud[data-battle-arena="classic"] .arena-navigation,#battleHud .arena-classic-return[hidden]{display:none;} html body.is-battling:has(#battleHud[data-battle-arena="v1"]) #controlsTutorial{display:none !important;} /* pk-style-source:5 */ /* /mobile-window-polish-v5.css */ /* This first important layer applies only inside the established mobile mode. Semantic colours cover both themes without changing world art or desktop. */ @layer mobile-window-polish { @media (max-width:760px), (pointer:coarse) and (max-height:560px) { html[data-mobile-viewport="active"] { --mwp-ink:var(--ui-ink,#193b50); --mwp-muted:var(--ui-muted,#496577); --mwp-card:var(--ui-card,#fff); --mwp-paper:var(--ui-paper,#fbfdff); --mwp-soft:var(--ui-soft,#edf4f8); --mwp-line:var(--ui-line,#bcced9); --mwp-primary:var(--ui-primary,#096caa); --mwp-tint:var(--ui-tint,#deedf8); } /* A single column leaves actual room for product names and actions. */ html[data-mobile-viewport="active"] #sidePanel .lab-shop-grid {grid-template-columns:1fr!important;gap:10px!important;} html[data-mobile-viewport="active"] #sidePanel .lab-shop-card {display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;gap:8px 12px!important;padding:12px!important;min-height:0!important;} html[data-mobile-viewport="active"] #sidePanel .lab-shop-item {width:52px!important;height:52px!important;min-width:52px!important;align-self:start!important;} html[data-mobile-viewport="active"] #sidePanel .lab-shop-card>div {min-width:0!important;display:flex!important;flex-direction:column!important;gap:4px!important;} html[data-mobile-viewport="active"] #sidePanel .lab-shop-card>div>b {font-size:16px!important;line-height:1.3!important;white-space:normal!important;} html[data-mobile-viewport="active"] #sidePanel .lab-shop-card>div>small {display:none!important;} html[data-mobile-viewport="active"] #sidePanel .lab-shop-card>button {grid-column:1/-1!important;width:100%!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:8px!important;font-size:14px!important;} html[data-mobile-viewport="active"] #sidePanel .ms-services [hidden] {display:none!important;} html[data-mobile-viewport="active"] #sidePanel .ms-services .lab-service-panel {padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;} html[data-mobile-viewport="active"] #sidePanel .ms-services .lab-section-heading {padding:0 0 8px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;background:none!important;} html[data-mobile-viewport="active"] #sidePanel .ms-services .lab-section-heading>span {display:flex!important;flex-wrap:wrap!important;justify-content:space-between!important;gap:6px!important;align-items:baseline!important;} html[data-mobile-viewport="active"] #sidePanel .ms-services h3 {font-size:16px!important;line-height:1.3!important;} html[data-mobile-viewport="active"] #sidePanel .ms-services .ms-balance {margin:0!important;white-space:nowrap!important;font-size:14px!important;font-weight:700!important;color:var(--mwp-ink)!important;} html[data-mobile-viewport="active"] #sidePanel .ms-services .lab-section-note {font-size:13px!important;line-height:1.4!important;margin:0 0 10px!important;} html[data-mobile-viewport="active"] #sidePanel .ms-toolbar {display:grid!important;gap:8px!important;margin-bottom:12px!important;} html[data-mobile-viewport="active"] #sidePanel .ms-toolbar nav {display:flex!important;gap:4px!important;overflow-x:auto!important;} html[data-mobile-viewport="active"] #sidePanel .ms-toolbar button {flex:1 0 auto!important;padding:8px!important;min-height:44px!important;font-size:13px!important;background:var(--mwp-soft)!important;color:var(--mwp-ink)!important;border:1px solid var(--mwp-line)!important;border-radius:10px!important;} html[data-mobile-viewport="active"] #sidePanel .ms-toolbar button[aria-pressed="true"] {background:var(--mwp-tint)!important;border-color:var(--ui-accent)!important;color:var(--ui-accent)!important;} html[data-mobile-viewport="active"] #sidePanel .ms-toolbar input {width:100%!important;padding:10px 12px!important;border-radius:10px!important;} html[data-mobile-viewport="active"] #sidePanel .ms-services :is([data-lab-buy],[data-lab-heal],[data-lab-heal-team],.lab-primary-action):not(:disabled) {background:var(--mwp-primary)!important;color:var(--ui-on-accent,#fff)!important;border-color:var(--mwp-primary)!important;box-shadow:none!important;} html[data-mobile-viewport="active"] #sidePanel .ms-services button:disabled {background:var(--mwp-soft)!important;color:var(--mwp-muted)!important;border-color:var(--mwp-line)!important;opacity:1!important;} html[data-mobile-viewport="active"] #sidePanel .ms-item-info summary {display:flex!important;align-items:center!important;gap:6px!important;font-size:13px!important;color:var(--ui-accent)!important;} html[data-mobile-viewport="active"] #sidePanel .ms-item-info summary::after {content:'⌄';} html[data-mobile-viewport="active"] #sidePanel .ms-item-info[open] summary::after {content:'⌃';} html[data-mobile-viewport="active"] #sidePanel .ms-item-info p {margin:0!important;font-size:13px!important;line-height:1.45!important;} html[data-mobile-viewport="active"] #sidePanel .lab-shop-card>div>span {font-size:13px!important;color:var(--mwp-muted)!important;} html[data-mobile-viewport="active"] #sidePanel .ms-empty {padding:20px 12px!important;font-size:14px!important;color:var(--mwp-muted)!important;text-align:center!important;} html[data-mobile-viewport="active"] #sidePanel .lab-clinic-copy>span {flex-direction:column!important;gap:3px!important;align-items:flex-start!important;} html[data-mobile-viewport="active"] #sidePanel .lab-clinic-copy b {font-size:15px!important;max-width:100%!important;} html[data-mobile-viewport="active"] #sidePanel .lab-clinic-copy small {font-size:12px!important;white-space:normal!important;} html[data-mobile-viewport="active"] #sidePanel .lab-condition-row {grid-template-columns:1fr!important;gap:4px!important;} html[data-mobile-viewport="active"] #sidePanel .lab-condition-meta {font-size:12px!important;flex-wrap:wrap!important;gap:4px 8px!important;color:var(--mwp-muted)!important;} html[data-mobile-viewport="active"] #sidePanel .lab-clinic-card>button {font-size:14px!important;} html[data-mobile-viewport="active"] #sidePanel .ms-services .genetics-lab-footer {display:none!important;} html[data-mobile-viewport="active"] #sidePanel .ms-services .lab-primary-action {font-size:14px!important;} /* Old centre colours were fixed light colours on dark surfaces. */ html[data-mobile-viewport="active"] #sidePanel .pokemon-center-box-v2332 :is(h2,h3,b) {color:var(--mwp-ink)!important;} html[data-mobile-viewport="active"] #sidePanel .pokemon-center-box-v2332 :is(p,small,em,.pokemon-center-box-v2332-empty-box,.pokemon-center-box-v2332-protected) {color:var(--mwp-muted)!important;} html[data-mobile-viewport="active"] #sidePanel .pokemon-center-box-v2332 :is(.pokemon-center-box-v2332-party-slot,.pokemon-center-box-v2332-storage-card) {background:var(--mwp-card)!important;border-color:var(--mwp-line)!important;} html[data-mobile-viewport="active"] #sidePanel .pokemon-center-box-v2332 :is(.pokemon-center-box-v2332-primary,button.is-active) {background:var(--mwp-tint)!important;color:var(--ui-accent)!important;} html[data-mobile-viewport="active"] #sidePanel .pokemon-center-box-v2332 :is(.pokemon-center-box-v2332-secondary,.pokemon-center-box-v2332-selected) {background:var(--mwp-soft)!important;color:var(--mwp-ink)!important;border-color:var(--mwp-line)!important;} html[data-mobile-viewport="active"] #sidePanel .pokemon-center-box-v2332-party-slot :is(b,small,em) {font-size:12px!important;} html[data-mobile-viewport="active"] #sidePanel .pokemon-center-box-v2332-party>header {align-items:flex-start!important;flex-wrap:wrap!important;gap:4px!important;} /* Six readable team places, with a distinct information button. */ html[data-mobile-viewport="active"] .pp-nursery .nr-party-grid {grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;} html[data-mobile-viewport="active"] #gameScreen .pp-nursery[open] {display:flex!important;flex-direction:column!important;height:var(--mw-height)!important;overflow:clip!important;} html[data-mobile-viewport="active"] .pp-nursery :is(.nr-header,.nr-tabs,.nr-capacity,.nr-footer) {flex:0 0 auto!important;} html[data-mobile-viewport="active"] .pp-nursery .nr-body {flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;} html[data-mobile-viewport="active"] .pp-nursery .nr-details {position:absolute!important;inset:0!important;box-sizing:border-box!important;width:100%!important;height:100%!important;max-height:100%!important;padding:16px!important;overflow-y:auto!important;overscroll-behavior:contain!important;background:var(--mwp-paper)!important;} html[data-mobile-viewport="active"] .pp-nursery .nr-details>header {position:sticky!important;top:-16px!important;z-index:2!important;background:var(--mwp-paper)!important;padding-block:8px!important;} html[data-mobile-viewport="active"] .pp-nursery .is-party .nr-mon-main {min-height:156px!important;padding:46px 5px 8px!important;gap:4px!important;} html[data-mobile-viewport="active"] .pp-nursery .is-party .nr-info {width:44px!important;height:44px!important;min-width:44px!important;right:0!important;top:0!important;} html[data-mobile-viewport="active"] .pp-nursery .is-party :is(.nr-mon-art,.nr-mon-art img) {width:48px!important;height:48px!important;} html[data-mobile-viewport="active"] .pp-nursery .is-party .nr-mon-copy>b {font-size:13px!important;} html[data-mobile-viewport="active"] .pp-nursery .is-party .nr-mon-copy>span {font-size:12px!important;} html[data-mobile-viewport="active"] .pp-nursery .nr-party-empty {min-height:156px!important;} html[data-mobile-viewport="active"] .pp-nursery .nr-party-empty>small {font-size:12px!important;} html[data-mobile-viewport="active"] .pp-nursery .nr-party>header {flex-direction:column!important;align-items:flex-start!important;gap:4px!important;} html[data-mobile-viewport="active"] .pp-nursery .nr-party>header>span {max-width:none!important;text-align:left!important;font-size:12px!important;} html[data-mobile-viewport="active"] .pp-nursery .nr-lead {font-size:10px!important;width:auto!important;height:auto!important;padding:4px!important;top:8px!important;left:4px!important;background:var(--mwp-tint)!important;color:var(--ui-accent)!important;} /* Theme gaps in lazy native dialogs, and primary actions using pale accents. */ html[data-mobile-viewport="active"] :is(.kanto-tool-dialog,.club-bar-dialog,.club-music-dialog) {background:var(--mwp-paper)!important;color:var(--mwp-ink)!important;border-color:var(--mwp-line)!important;} html[data-mobile-viewport="active"] :is(.kanto-tool-dialog,.club-bar-dialog,.club-music-dialog) :is(h2,h3,b,strong) {color:var(--mwp-ink)!important;} html[data-mobile-viewport="active"] :is(.kanto-tool-dialog,.club-bar-dialog,.club-music-dialog) :is(p,small,label,.club-timeline) {color:var(--mwp-muted)!important;} html[data-mobile-viewport="active"] :is(.kanto-tool-wallet,.kanto-tool-loadout>div,.kanto-tool-stock>article,.club-now,.club-track,.club-queue,.club-bar-status,.club-drinks>article,.club-drink-buy,.club-bar-dialog>footer) {background:var(--mwp-card)!important;border-color:var(--mwp-line)!important;color:var(--mwp-ink)!important;} html[data-mobile-viewport="active"] .club-bar-dialog :is(.club-energy label,.club-bar-wallet small,.club-drink-power,footer) {color:var(--mwp-muted)!important;} html[data-mobile-viewport="active"] .club-drink-copy p {font-size:13px!important;line-height:1.4!important;} html[data-mobile-viewport="active"] :is(#sidePanel,dialog[open],#tradeDialog,.trade-inventory-picker) {scrollbar-color:var(--mwp-line) var(--mwp-paper)!important;scrollbar-width:thin!important;} html[data-mobile-viewport="active"] :is(.kanto-tool-dialog,.club-bar-dialog,.club-music-dialog) button {background:var(--mwp-soft)!important;color:var(--mwp-ink)!important;border-color:var(--mwp-line)!important;font-size:14px!important;} html[data-mobile-viewport="active"] :is([data-tool-action],[data-club-enable],#dialogueNext,#professorTransferConfirm,#tradeDialog .is-confirm,#socialInvite .is-accept,#pvpInvite .is-accept,#worldChannelConfirm .is-primary):not(:disabled) {background:var(--mwp-primary)!important;color:var(--ui-on-accent,#fff)!important;border-color:var(--mwp-primary)!important;} html[data-mobile-viewport="active"] :is(#socialInvite,#pvpInvite,#worldChannelConfirm,#professorTransferDialog,#tradeDialog,#controlsTutorial) {background:rgb(8 20 28 / .62)!important;box-shadow:none!important;} html[data-mobile-viewport="active"] :is(.social-invite__card,.pvp-invite__card,.world-channel-confirm__card,.professor-transfer-card-shell,.trade-dialog__content,.controls-tutorial-card) {box-sizing:border-box!important;max-width:var(--mw-width)!important;max-height:var(--mw-height)!important;overflow-y:auto!important;background:var(--mwp-paper)!important;color:var(--mwp-ink)!important;border-color:var(--mwp-line)!important;} html[data-mobile-viewport="active"] :is(#socialInvite,#pvpInvite)>div>small {color:var(--mwp-muted)!important;font-size:12px!important;} html[data-mobile-viewport="active"] :is(#worldChannelConfirm,#tradeDialog,#professorTransferDialog)>:is(.world-channel-confirm__backdrop,.trade-dialog__backdrop,.dialogue-shade) {background:transparent!important;} html[data-mobile-viewport="active"] #inventoryItemDialog .inventory-discard-confirm {background:var(--ui-danger-bg)!important;color:var(--ui-danger)!important;border-color:var(--ui-danger)!important;} html[data-mobile-viewport="active"] #inventoryItemDialog .inventory-discard-confirm b {color:var(--ui-danger)!important;} html[data-mobile-viewport="active"] #sidePanel .animation-lab-window :is(h2,p,small,label,.animation-lab-notice) {color:var(--mwp-ink)!important;} html[data-mobile-viewport="active"] #tradeDialog :is(.trade-offer-row,.trade-inventory-picker>button) {background:var(--mwp-card)!important;border-color:var(--mwp-line)!important;} html[data-mobile-viewport="active"] #tradeDialog :is(.trade-offer-row b,.trade-inventory-picker b) {font-size:14px!important;} html[data-mobile-viewport="active"] #tradeDialog :is(.trade-offer-row small,.trade-inventory-picker small) {font-size:12px!important;} html[data-mobile-viewport="active"] #tradeDialog .trade-window-v2733>header small {color:var(--mwp-muted)!important;font-size:12px!important;} html[data-mobile-viewport="active"] .club-music-head {position:sticky!important;top:-12px!important;z-index:10!important;background:var(--mwp-paper)!important;padding:8px 0!important;} html[data-mobile-viewport="active"] .club-music-head h2 {font-size:18px!important;} html[data-mobile-viewport="active"] .club-music-head>button {flex:0 0 44px!important;min-width:44px!important;} html[data-mobile-viewport="active"] .club-timeline span {color:var(--mwp-muted)!important;} html[data-mobile-viewport="active"] #sidePanel .ms-settings>header {display:none!important;} html[data-mobile-viewport="active"] #sidePanel .ms-settings .settings-tabs-v2343 {display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3px!important;overflow:visible!important;padding:3px!important;} html[data-mobile-viewport="active"] #sidePanel .ms-settings .settings-tabs-v2343 button {min-width:0!important;padding:8px 2px!important;font-size:12px!important;} html[data-mobile-viewport="active"] #sidePanel .ms-settings-help {margin:8px 0!important;} html[data-mobile-viewport="active"] #sidePanel .ms-settings-help>summary {display:flex!important;align-items:center!important;gap:8px!important;color:var(--mwp-muted)!important;font-size:13px!important;} html[data-mobile-viewport="active"] #sidePanel .ms-settings-help>summary::after {content:'⌄';} html[data-mobile-viewport="active"] #sidePanel .ms-settings-help[open]>summary::after {content:'⌃';} html[data-mobile-viewport="active"] #sidePanel .ms-settings .theme-settings {margin:0 0 12px!important;} html[data-mobile-viewport="active"] #controlsTutorial :is(h2,h3,b) {color:var(--mwp-ink)!important;} html[data-mobile-viewport="active"] #controlsTutorial .controls-tutorial-mobile p {font-size:13px!important;line-height:1.45!important;color:var(--mwp-muted)!important;} html[data-mobile-viewport="active"] #controlsTutorial .controls-tutorial-mobile b {font-size:15px!important;} html[data-mobile-viewport="active"] #controlsTutorial .controls-tutorial-dismiss {font-size:12px!important;color:var(--mwp-muted)!important;} html[data-mobile-viewport="active"] #chatPanel #chatInput {min-height:44px!important;font-size:16px!important;} html[data-mobile-viewport="active"] #sidePanel.is-trainer-card .tc-name-row {display:flex!important;flex-wrap:wrap!important;gap:4px!important;align-items:center!important;} html[data-mobile-viewport="active"] #sidePanel .tc-name-row>h2 {grid-column:1/-1!important;width:100%!important;min-width:0!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;font-size:22px!important;line-height:1.2!important;margin:0!important;} html[data-mobile-viewport="active"] #sidePanel .tc-name-row>.tc-level {justify-self:start!important;} html[data-mobile-viewport="active"] #sidePanel .tc-name-row>.tc-clothing-entry {justify-self:end!important;} /* Show both confirmed offers before the optional inventory editor. */ html[data-mobile-viewport="active"] #tradeDialog #tradeContent:has(.mt-window) {height:var(--mw-height)!important;overflow:clip!important;padding:12px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window {height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important;gap:8px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window>[hidden] {display:none!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window>header {position:static!important;flex:0 0 auto!important;gap:8px!important;padding:0 0 8px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window>header>div {min-width:0!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window>header h2 {font-size:18px!important;line-height:1.3!important;margin:0!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window>header small {display:none!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-body {flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;display:flex!important;flex-direction:column!important;gap:10px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-body>* {flex:0 0 auto!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-side {padding:10px!important;background:var(--mwp-soft)!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-side-head {display:flex!important;flex-direction:row!important;align-items:baseline!important;flex-wrap:wrap!important;gap:6px!important;margin-bottom:8px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-side-head h3 {font-size:15px!important;display:flex!important;flex-wrap:wrap!important;gap:4px 8px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-side-head h3 span {font-size:12px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-side-meta {display:none!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-offer-list {min-height:0!important;overflow:visible!important;max-height:none!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-offer-row {padding:8px!important;gap:8px!important;grid-template-columns:36px minmax(0,1fr) auto 44px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .is-other .trade-offer-row {grid-template-columns:36px minmax(0,1fr) auto!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-money-row {grid-template-columns:36px minmax(0,1fr) auto!important;gap:8px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window :is(.trade-offer-row,.trade-money-row) :is(b,em) {font-size:14px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window :is(.trade-offer-row,.trade-money-row) small {font-size:12px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-empty {font-size:13px!important;padding:8px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window :is(.mt-editor,.mt-help) {border:1px solid var(--mwp-line)!important;border-radius:12px!important;background:var(--mwp-card)!important;padding:0 10px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window summary {min-height:44px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px!important;font-size:14px!important;font-weight:700!important;color:var(--mwp-ink)!important;cursor:pointer!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window summary::after {content:'⌄';} html[data-mobile-viewport="active"] #tradeDialog .mt-window details[open]>summary::after {content:'⌃';} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-money-input {margin:8px 0!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(100px,1fr)!important;gap:8px!important;padding:0!important;background:none!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-money-input>span {font-size:14px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .mt-available {display:block!important;font-size:12px!important;color:var(--mwp-muted)!important;margin-bottom:8px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window input {box-sizing:border-box!important;width:100%!important;min-height:44px!important;font-size:16px!important;background:var(--mwp-soft)!important;color:var(--mwp-ink)!important;border:1px solid var(--mwp-line)!important;border-radius:10px!important;padding:8px 10px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-inventory-picker {max-height:none!important;overflow:visible!important;border:0!important;padding:8px 0!important;margin:0!important;background:none!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-inventory-picker>small {display:none!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-inventory-picker>[hidden] {display:none!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .trade-inventory-picker>button {grid-template-columns:36px minmax(0,1fr) 24px!important;padding:8px!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window :is(.mt-help p,.mt-help small,.mt-empty) {font-size:13px!important;line-height:1.4!important;color:var(--mwp-muted)!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window>footer {position:static!important;flex:0 0 auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;padding:8px 0 0!important;background:var(--mwp-paper)!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window .mt-note {grid-column:1/-1!important;font-size:12px!important;line-height:1.3!important;margin:0!important;color:var(--mwp-muted)!important;text-align:center!important;} html[data-mobile-viewport="active"] #tradeDialog .mt-window>footer button {font-size:14px!important;min-width:0!important;padding:8px!important;} /* Gift controls previously kept white surfaces with dark-theme white text. */ html[data-mobile-viewport="active"] .tc-gift-dialog {background:var(--mwp-paper)!important;color:var(--mwp-ink)!important;border-color:var(--mwp-line)!important;} html[data-mobile-viewport="active"] .tc-gift-dialog button {background:var(--mwp-card)!important;color:var(--mwp-ink)!important;border-color:var(--mwp-line)!important;} html[data-mobile-viewport="active"] .tc-gift-dialog>header {gap:8px!important;background:var(--mwp-paper)!important;} html[data-mobile-viewport="active"] .tc-gift-dialog>header>div {min-width:0!important;} html[data-mobile-viewport="active"] .tc-gift-dialog>header small {font-size:12px!important;line-height:1.3!important;color:var(--mwp-muted)!important;overflow-wrap:anywhere!important;} html[data-mobile-viewport="active"] .tc-gift-dialog :is(h2,h3,b) {color:var(--mwp-ink)!important;} html[data-mobile-viewport="active"] .tc-gift-dialog :is(.tc-gift-wallet,.tc-gift-capacity,[role="status"]) {font-size:13px!important;line-height:1.4!important;color:var(--mwp-muted)!important;} html[data-mobile-viewport="active"] .tc-gift-dialog .tc-gift-capacity {background:var(--mwp-soft)!important;} html[data-mobile-viewport="active"] .tc-gift-dialog .tc-gift-catalog {gap:8px!important;} html[data-mobile-viewport="active"] .tc-gift-dialog .tc-gift-catalog button {min-width:0!important;padding:10px 6px!important;gap:6px!important;} html[data-mobile-viewport="active"] .tc-gift-dialog .tc-gift-catalog b {font-size:14px!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:anywhere!important;} html[data-mobile-viewport="active"] .tc-gift-dialog .tc-gift-catalog small {font-size:13px!important;color:var(--mwp-muted)!important;} html[data-mobile-viewport="active"] .tc-gift-dialog .tc-collection-pages button {min-width:44px!important;min-height:44px!important;font-size:20px!important;} html[data-mobile-viewport="active"] .tc-gift-dialog .tc-collection-pages small {font-size:14px!important;color:var(--mwp-muted)!important;} html[data-mobile-viewport="active"] .tc-gift-dialog [data-gift-close] {min-width:44px!important;font-size:22px!important;} html[data-mobile-viewport="active"] .tc-gift-dialog [data-gift-send]:not(:disabled) {background:var(--mwp-primary)!important;border-color:var(--mwp-primary)!important;color:var(--ui-on-accent,#fff)!important;} html[data-mobile-viewport="active"] .tc-gift-dialog button:disabled {background:var(--mwp-soft)!important;color:var(--mwp-muted)!important;opacity:1!important;} html[data-mobile-viewport="active"] .tc-gift-dialog :is([data-gift-send],[data-gift-back]) {min-height:44px!important;font-size:14px!important;padding:10px 12px!important;} html[data-mobile-viewport="active"] #marketplaceModal .marketplace-sell-assets[hidden] {display:none!important;} html[data-mobile-viewport="active"] #marketplaceModal .mm-sell-picker {display:grid!important;gap:6px!important;font-size:13px!important;color:var(--mwp-muted)!important;font-weight:700!important;} html[data-mobile-viewport="active"] #marketplaceModal .mm-sell-select {box-sizing:border-box!important;width:100%!important;min-width:0!important;min-height:44px!important;padding:8px 10px!important;border:1px solid var(--mwp-line)!important;border-radius:10px!important;background:var(--mwp-card)!important;color:var(--mwp-ink)!important;font-size:16px!important;} html[data-mobile-viewport="active"] #marketplaceModal .market-lot-summary {padding:10px!important;gap:6px!important;margin-bottom:10px!important;} html[data-mobile-viewport="active"] #marketplaceModal .market-lot-summary small {font-size:12px!important;line-height:1.4!important;} html[data-mobile-viewport="active"] #marketplaceModal .market-sell-fields label {font-size:13px!important;} html[data-mobile-viewport="active"] #marketplaceModal :is(.market-fee-note,.market-price-preview) {font-size:13px!important;line-height:1.4!important;} html[data-mobile-viewport="active"] #marketplaceModal .marketplace-sell-form>button[type="submit"]:not(:disabled) {background:var(--mwp-primary)!important;color:var(--ui-on-accent,#fff)!important;} /* The panel's backdrop filter contains fixed descendants. Size the library against that panel instead of the wider device viewport. */ html[data-mobile-viewport="active"] #sidePanelContent:has(.ph-modal-layer) {z-index:20!important;} html[data-mobile-viewport="active"] #gameScreen #sidePanel:has(.ph-modal-layer) {height:var(--mw-height)!important;} html[data-mobile-viewport="active"] #sidePanel .ph-modal-layer {inset:0!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;box-sizing:border-box!important;padding:8px!important;} html[data-mobile-viewport="active"] #sidePanel .ph-hub .ph-skill-modal {width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;box-sizing:border-box!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-library {gap:8px!important;min-height:0!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-list {display:none!important;overflow:auto!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-select {display:block!important;flex:0 0 auto!important;width:100%!important;min-height:44px!important;font-size:16px!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail {display:grid!important;flex:1 1 auto!important;min-height:0!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr) auto auto auto!important;gap:6px!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail>header {grid-column:1!important;grid-row:1!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail>header>span {min-width:0!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail .ph-detail-body {grid-column:1/-1!important;grid-row:2!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail .ph-info-toggle {grid-column:1!important;grid-row:3!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail .ph-picker-actions {grid-column:1/-1!important;grid-row:4!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail .ps-next-point {grid-column:1/-1!important;grid-row:5!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail .ph-detail-body {overflow-x:hidden!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail .ps-effects>div {min-width:0!important;grid-template-columns:minmax(0,1fr) auto!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail .ps-effects span {min-width:0!important;flex-wrap:wrap!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-modal>footer {display:grid!important;grid-template-columns:1fr 1fr!important;align-items:center!important;gap:8px!important;padding:6px 0 0!important;margin-top:6px!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-modal>footer button {font-size:12px!important;padding:6px!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-modal>footer small {font-size:11px!important;line-height:1.3!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail .ph-info-toggle {width:100%!important;font-size:12px!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-list button b {font-size:13px!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-list button small {font-size:11px!important;} html[data-mobile-viewport="active"] #windowConfirm [data-window-confirm-accept] {background:var(--mwp-primary)!important;color:var(--ui-on-accent,#fff)!important;border-color:var(--mwp-primary)!important;} html[data-mobile-viewport="active"] #windowConfirm.is-danger [data-window-confirm-accept] {background:var(--ui-danger-bg)!important;color:var(--ui-danger)!important;border-color:var(--ui-danger)!important;} html[data-mobile-viewport="active"] #windowConfirm footer {display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;} html[data-mobile-viewport="active"] #windowConfirm footer button {min-width:0!important;padding:10px 8px!important;} @media (max-height:560px) and (orientation:landscape) { html[data-mobile-viewport="active"] #sidePanel .ph-skill-library {display:grid!important;grid-template-columns:170px minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;max-height:none!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-list {display:flex!important;flex-direction:column!important;max-height:none!important;height:100%!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-select {display:none!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail {grid-template-columns:minmax(0,1fr) 92px!important;grid-template-rows:auto minmax(0,1fr) auto auto!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail .ph-info-toggle {grid-column:2!important;grid-row:1!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail .ph-picker-actions {grid-row:3!important;} html[data-mobile-viewport="active"] #sidePanel .ph-skill-detail .ps-next-point {grid-row:4!important;} } } } /* /mobile-inventory-v1.css: deferred, original cascade position */ @layer inventory-refinement;@layer mobile-inventory;@media all{:root[data-pk-style-slot="owner-6"]{}} /* pk-style-source:7 */ /* /mobile-window-audit-v1.css */ /* First layer: mobile geometry and close controls must survive feature overrides. */ @layer mobile-window-accessibility { .mobile-window-head { display:none!important; } #chatPanel .chat-media-head { grid-template-columns:minmax(0,1fr) auto 36px!important; gap:6px!important; } #chatPanel .chat-media-close { display:grid!important;place-items:center!important; width:36px!important;height:36px!important;min-width:36px!important; padding:0!important;border:1px solid var(--ui-line,#d3e4eb)!important; border-radius:10px!important;background:var(--ui-soft,#eaf3f7)!important; color:var(--ui-ink,#234e60)!important;font-size:24px!important; } #windowConfirm .window-confirm-head { display:flex!important;justify-content:space-between!important;align-items:flex-start!important; gap:12px!important;background:var(--win-paper,#fff)!important; } #windowConfirm .window-confirm-head > span { min-width:0!important; } #windowConfirm .window-confirm-close { flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px!important; padding:0!important;display:grid!important;place-items:center!important;font-size:24px!important; } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { /* Center real dialogs within the visible screen, including a raised keyboard. */ body:not(.is-battling) #app :is(#windowConfirm,#socialInvite,#pvpInvite,#worldChannelConfirm,#questOfferV57,#controlsTutorial,#professorTransferDialog,#dialogueDialog,#starterDialog,#tradeDialog,#marketplaceModal,#leaderboardModal)[aria-hidden="false"] { position:fixed!important; top:var(--pk-mobile-vv-offset-top,0px)!important; left:var(--pk-mobile-vv-offset-left,0px)!important; right:auto!important;bottom:auto!important; width:var(--pk-mobile-vv-width,100vw)!important; height:var(--pk-mobile-vv-height,100dvh)!important; max-height:var(--pk-mobile-vv-height,100dvh)!important; transform:none!important;translate:none!important;margin:0!important; box-sizing:border-box!important; } body:not(.is-battling) #gameScreen dialog[open], body:not(.is-battling) :is(.tc-gift-dialog,.tc-studio,.pt-dialog)[open] { position:fixed!important; top:calc(var(--pk-mobile-vv-offset-top,0px) + var(--pk-mobile-vv-height,100dvh)/2)!important; left:calc(var(--pk-mobile-vv-offset-left,0px) + var(--pk-mobile-vv-width,100vw)/2)!important; right:auto!important;bottom:auto!important;margin:0!important; transform:translate(-50%,-50%)!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 24px)!important; max-width:calc(var(--pk-mobile-vv-width,100vw) - 24px)!important; min-height:0!important;min-width:0!important;box-sizing:border-box!important; } #gameScreen dialog[open] :is(input,select,textarea), :is(.tc-gift-dialog,.tc-studio,.pt-dialog)[open] :is(input,select,textarea) { font-size:max(16px,1em)!important;min-width:0!important;max-width:100%!important; } #gameScreen dialog[open] button[aria-label^="Закрыть"], .tc-studio[open] :is([data-tc-cancel],[data-cb-close]) { min-width:44px!important;min-height:44px!important;touch-action:manipulation!important; } #gameScreen .kanto-tool-dialog[open] > header { position:sticky!important;top:0!important;z-index:2!important;background:var(--ui-card,#fff)!important; } .pt-dialog[open] { padding:12px!important;overflow-y:auto!important;overscroll-behavior:contain!important; } .pt-dialog[open] > header { position:sticky!important;top:-12px!important;z-index:2!important; padding-block:6px!important;background:var(--ui-paper,#fcfefe)!important; } .pt-dialog[open] header > div { min-width:0!important; } .pt-dialog[open] header h2 { overflow-wrap:anywhere!important; } .pt-dialog[open] [data-pt-close] { flex:0 0 44px!important;width:44px!important;height:44px!important;padding:0!important; } .pt-dialog[open] .pt-preview canvas { height:clamp(64px,calc(var(--pk-mobile-vv-height,100dvh) - 360px),200px)!important; } .pt-dialog[open] .pt-options button { min-width:0!important;overflow-wrap:anywhere!important; } body:not(.is-battling) #gameScreen #sidePanel[data-mobile-sheet="v1"].is-open { --mobile-sheet-dock:82px; position:fixed!important; top:calc(var(--pk-mobile-vv-offset-top,0px) + max(56px,env(safe-area-inset-top)))!important; left:auto!important; right:calc(var(--pk-mobile-vv-offset-right,0px) + max(8px,env(safe-area-inset-right)))!important; bottom:auto!important; width:auto!important; max-width:480px!important; min-width:0!important; height:calc(var(--pk-mobile-vv-height,100dvh) - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)) - var(--mobile-sheet-dock))!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)))!important; min-height:0!important; margin:0 auto!important; padding:0!important; display:flex!important; flex-direction:column!important; box-sizing:border-box!important; overflow:hidden!important; transform:none!important; translate:none!important; border-radius:18px!important; background:var(--ui-card,var(--theme-card,#f8fcff))!important; } body:not(.is-battling) #gameScreen #sidePanel[data-mobile-sheet="v1"].is-regions-panel { --mobile-sheet-dock:0px; max-width:none!important; } body:not(.is-battling) #gameScreen #sidePanel[data-mobile-sheet="v1"].is-trainer-clothing-panel { max-width:360px!important; max-height:min(620px,calc(var(--pk-mobile-vv-height,100dvh) - 16px - var(--mobile-sheet-dock)))!important; } html[data-mobile-keyboard="open"] body:not(.is-battling) #gameScreen #sidePanel[data-mobile-sheet="v1"] { --mobile-sheet-dock:0px; } body:not(.is-battling) #gameScreen #sidePanel[data-mobile-sheet="v1"] .mobile-window-head:not([hidden]) { display:flex!important; position:relative!important; z-index:2!important; align-items:center!important; justify-content:space-between!important; flex:0 0 auto!important; gap:8px!important; min-height:52px!important; padding:4px 6px 4px 14px!important; margin:0!important; border-bottom:1px solid var(--ui-line,var(--theme-border,#d3e4eb))!important; background:var(--ui-card,var(--theme-card,#f8fcff))!important; box-sizing:border-box!important; } .mobile-window-head h2 { min-width:0!important; margin:0!important; font:700 15px/1.25 'Segoe UI',sans-serif!important; color:var(--ui-ink,var(--theme-text,#234e60))!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .mobile-window-close { display:grid!important; place-items:center!important; flex:0 0 44px!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; padding:0!important; border:1px solid var(--ui-line,var(--theme-border,#d3e4eb))!important; border-radius:12px!important; background:var(--ui-soft,#eaf3f7)!important; color:var(--ui-ink,var(--theme-text,#234e60))!important; font:400 26px/1 'Segoe UI',sans-serif!important; touch-action:manipulation!important; } body:not(.is-battling) #sidePanel[data-mobile-sheet="v1"] :is([data-mobile-window-old-close],[data-mobile-window-duplicate-close],.panel-window-grip) { display:none!important; } body:not(.is-battling) #gameScreen #sidePanel[data-mobile-sheet="v1"] > #sidePanelContent { flex:1 1 0!important; position:relative!important; z-index:1!important; width:100%!important; height:auto!important; min-height:0!important; min-width:0!important; max-height:none!important; padding:8px!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; scrollbar-gutter:auto!important; box-sizing:border-box!important; } #sidePanel[data-mobile-sheet="v1"] .quest-journal-new { position:relative!important; } #sidePanel[data-mobile-sheet="v1"] :is(.quest-abandon-confirm-v57,.qj-replace-shade) { position:absolute!important;inset:0!important;padding:12px!important; box-sizing:border-box!important;max-height:100%!important; overflow:auto!important;overscroll-behavior:contain!important; } #sidePanel[data-mobile-sheet="v1"] :is(.quest-abandon-confirm-v57 > section,.qj-replace-dialog) { max-width:100%!important;max-height:100%!important;min-width:0!important; padding:16px!important;box-sizing:border-box!important;overflow-y:auto!important; } body:not(.is-battling) #gameScreen #sidePanel[data-mobile-sheet="v1"]:is(.is-inventory-panel,.is-pokedex-panel,.is-pokedex-detail,.is-trainer-clothing-panel) > #sidePanelContent { overflow:hidden!important; display:flex!important; flex-direction:column!important; padding:0!important; } #sidePanel[data-mobile-sheet="v1"] #sidePanelContent > * { min-width:0!important; max-width:100%!important; box-sizing:border-box!important; } #sidePanel[data-mobile-sheet="v1"] #sidePanelContent > :is(.trainer-clothing,.inventory-expedition,.dc-catalog,.pg-catalog,.dd-dossier) { flex:1 1 0!important; min-height:0!important; height:100%!important; } #sidePanel[data-mobile-sheet="v1"] .trainer-clothing > .clothing-header { display:none!important; } #sidePanel[data-mobile-sheet="v1"] .dc-header { padding-right:0!important; cursor:default!important; } #sidePanel[data-mobile-sheet="v1"] .profile-v80-hero { margin-top:0!important; } #sidePanel[data-mobile-sheet="v1"] .tester-config { scroll-margin-top:64px!important; } #sidePanel[data-mobile-sheet="v1"] .trainer-clothing:not(.is-detail) .clothing-scroll { overflow-y:auto!important; } #sidePanel[data-mobile-sheet="v1"] .trainer-clothing:not(.is-detail) .clothing-outfit { grid-template-rows:auto minmax(280px,1fr) auto auto!important; } #sidePanel[data-mobile-sheet="v1"] :is(input,select,textarea) { font-size:max(16px,1em)!important; min-width:0!important; max-width:100%!important; } #sidePanel[data-mobile-sheet="v1"] :is(.tester-tabs,.fn-tabs,.qj-tabs,.settings-tabs) { min-width:0!important; overflow-x:auto!important; overscroll-behavior-x:contain!important; scrollbar-width:thin!important; } #sidePanel[data-mobile-sheet="v1"] :is(.tester-tabs,.fn-tabs,.qj-tabs,.settings-tabs) > button { min-height:44px!important; flex-shrink:0!important; } /* Fixed world controls must never float over a game window. */ body:not(.is-battling) #gameScreen:has(#sidePanel[data-mobile-sheet="v1"].is-open,#chatPanel.is-open:not(.is-minimized),#editorPanel.is-open) :is(#testerLauncher,#testerLauncher *,#questWidget,#questWidget *,#worldMinimapShell,#worldMinimapShell *,#homeWorkshopTools,#homeWorkshopTools *,#notificationCenterButton,#notificationCenterButton *) { visibility:hidden!important; pointer-events:none!important; } /* A true dialog owns input; its underlying navigation cannot open another window. */ body:not(.is-battling) #app:has(:is(#marketplaceModal,#leaderboardModal,#labGames,#inventoryItemDialog,#tradeDialog,#dialogueDialog,#starterDialog,#professorTransferDialog,#worldChannelConfirm,#socialInvite,#pvpInvite,#questOfferV57,#windowConfirm)[aria-hidden="false"]) #gameScreen :is(.mobile-dock,.mobile-dock *,#desktopMoreMenu,#desktopMoreMenu *,#testerLauncher,#testerLauncher *,#questWidget,#questWidget *,#worldMinimapShell,#worldMinimapShell *,#homeWorkshopTools,#homeWorkshopTools *,#notificationCenterButton,#notificationCenterButton *,.world-topbar,.world-topbar *,#playerStaminaHud,#playerStaminaHud *,.party-hud,.party-hud *,.joystick,.joystick *) { visibility:hidden!important; pointer-events:none!important; } .inventory-item-dialog-v2738__content > [data-inventory-detail-close] { position:sticky!important; top:0!important; right:auto!important; left:auto!important; z-index:5!important; display:grid!important; place-items:center!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; margin:0 0 -44px auto!important; padding:0!important; } #app #tradeDialog .trade-window-v2733 > header, #app #professorTransferDialog .professor-transfer-card-shell > header, .tc-gift-dialog > header { position:sticky!important; top:0!important; z-index:5!important; background:var(--ui-card,var(--theme-card,#f8fcff))!important; } #app :is([data-leaderboard-close],[data-market-close],[data-lab-close],[data-close-professor-transfer],#dialogueClose,.starter-flow-close,.world-channel-confirm__close,#controlsTutorialClose):is(button), .tc-gift-dialog [data-gift-close], #chatGroupDialog [data-chat-group-dialog-close] { min-width:44px!important; min-height:44px!important; touch-action:manipulation!important; } .tc-gift-dialog { width:calc(100% - 24px)!important; max-width:420px!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 24px)!important; box-sizing:border-box!important; padding:12px!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; } .tc-gift-dialog .tc-gift-catalog { grid-template-columns:repeat(2,minmax(0,1fr))!important; } .tc-gift-dialog header > div { min-width:0!important; } .tc-gift-dialog header h2 { font-size:18px!important; overflow-wrap:anywhere!important; } .tc-gift-dialog [data-gift-close] { flex-shrink:0!important; } #leaderboardModal .leaderboard-shell { height:calc(var(--pk-mobile-vv-height,100dvh) - 16px)!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 16px)!important; min-height:0!important; } #chatGroupDialog { max-width:calc(100% - 24px)!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 24px)!important; min-width:0!important; box-sizing:border-box!important; overflow:auto!important; overscroll-behavior:contain!important; } #chatGroupDialog :is(input,select) { font-size:16px!important; min-width:0!important; max-width:100%!important; } #chatPanel > .chat-emoji-panel { min-height:0!important; height:min(360px,max(0px,calc(100% - var(--chat-dock-height,72px) - 72px)))!important; max-height:max(0px,calc(100% - var(--chat-dock-height,72px) - 72px))!important; grid-template-rows:52px 48px minmax(0,1fr)!important; } #chatPanel .chat-media-head { grid-template-columns:minmax(0,1fr) auto 44px!important; min-height:52px!important;padding:4px 6px!important;gap:4px!important; } #chatPanel .chat-media-head > span > :is(b,small) { overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important; } #chatPanel .chat-media-tabs { grid-template-columns:repeat(2,auto)!important;width:auto!important;min-width:0!important; padding:2px!important;gap:2px!important; } #chatPanel .chat-media-tabs button { min-width:64px!important;height:40px!important;padding:0 6px!important; } #chatPanel .chat-media-close { width:44px!important;height:44px!important;min-width:44px!important;touch-action:manipulation!important; } #chatPanel .chat-media-head + .chat-emoji-category-rail { min-height:0!important; } #chatPanel.is-channel-menu-open .chat-head .chat-tabs { max-height:max(88px,calc(var(--pk-mobile-vv-height,100dvh) - 150px))!important; overflow-y:auto!important;overscroll-behavior:contain!important; } body:not(.is-battling) #gameScreen #notificationCenter.is-open[aria-hidden="false"] { --notice-dock-reserve:82px; position:fixed!important; top:calc(var(--pk-mobile-vv-offset-top,0px) + max(8px,env(safe-area-inset-top)))!important; left:calc(var(--pk-mobile-vv-offset-left,0px) + max(8px,env(safe-area-inset-left)))!important; right:calc(var(--pk-mobile-vv-offset-right,0px) + max(8px,env(safe-area-inset-right)))!important; bottom:auto!important;width:min(360px,calc(var(--pk-mobile-vv-width,100vw) - 16px))!important;max-width:360px!important;min-width:0!important; height:min(480px,calc(var(--pk-mobile-vv-height,100dvh) - max(56px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)) - var(--notice-dock-reserve)))!important; max-height:none!important;min-height:0!important;margin:0 auto!important; transform:none!important;translate:none!important;overflow:hidden!important; } #notificationCenter > header { flex-shrink:0!important;min-height:52px!important; } #notificationCenter [data-notification-close] { flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px!important; padding:0!important;font-size:24px!important;touch-action:manipulation!important; } #notificationCenter :is(.notification-center-list,.notice-detail) { min-height:0!important; } html[data-mobile-keyboard="open"] body:not(.is-battling) #gameScreen #notificationCenter.is-open[aria-hidden="false"] { --notice-dock-reserve:0px; } #windowConfirm > article { padding:14px!important;min-width:0!important; } #windowConfirm .window-confirm-head { position:sticky!important;top:-14px!important;padding-top:8px!important;z-index:2!important; } #windowConfirm .window-confirm-head h2 { font-size:20px!important;overflow-wrap:anywhere!important; } #windowConfirm footer { position:sticky!important;bottom:-14px!important;padding:8px 0 14px!important;background:var(--win-paper,#fff)!important; } #gameScreen .mobile-window-close:focus-visible { outline:3px solid var(--theme-accent,#188faf)!important; outline-offset:-3px!important; } } @media (max-height:420px) and (orientation:landscape) { body:not(.is-battling) #gameScreen #sidePanel[data-mobile-sheet="v1"].is-open { --mobile-sheet-dock:0px; } body:not(.is-battling) #gameScreen:has(#sidePanel[data-mobile-sheet="v1"].is-open) .mobile-dock { visibility:hidden!important; pointer-events:none!important; } body:not(.is-battling) #gameScreen #notificationCenter.is-open[aria-hidden="false"] { --notice-dock-reserve:0px; } } } /* pk-style-source:8 */ /* /mobile-game-windows-v1.css */ /* Phone-only refinements. Desktop windows and chat behavior remain owned by their existing styles/controllers. This layer is loaded after the mobile window chrome so its small-screen refinements share the same priority. */ @layer mobile-window-accessibility { .mobile-chat-close-glyph { display:none!important; } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"].is-open { overscroll-behavior:contain!important; } html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"]:not(.is-inventory-panel):not(.is-pokedex-panel):not(.is-pokedex-detail):not(.is-trainer-clothing-panel) > #sidePanelContent { padding-bottom:max(12px,env(safe-area-inset-bottom))!important; overscroll-behavior:contain!important; } html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] :is(button,input,select,textarea) { min-width:0!important; } html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] :is(button,a,summary):focus-visible { outline:3px solid var(--ui-accent,#1485a5)!important; outline-offset:2px!important; } /* Team: one readable trainer card per row; the permanent mobile title replaces the large duplicate title without removing team capacity. */ html[data-mobile-viewport="active"] #app #sidePanel.is-team-panel .pt-head { padding:0 2px 7px!important;min-height:0!important;gap:6px!important; border-bottom:1px solid var(--ui-line,#d3e4eb)!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-team-panel .pt-head h1 { display:none!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-team-panel .pt-capacity { width:100%!important;min-height:32px!important;gap:6px!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-team-panel .pt-grid { grid-template-columns:minmax(0,1fr)!important;gap:8px!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-team-panel .pt-open { gap:7px!important;padding:8px 10px!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-team-panel .pt-portrait { width:58px!important;height:58px!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-team-panel .pt-member > footer { gap:4px!important;flex-wrap:wrap!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-team-panel .pt-member > footer button { min-width:44px!important;min-height:44px!important; } /* Pokedex: keep search/filter/status and pagination visible without a second tall title. Cards retain their artwork and two-column layout. */ html[data-mobile-viewport="active"] #app #sidePanel.is-pokedex-panel .dc-catalog { padding:6px 8px 8px!important;gap:6px!important;min-height:0!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-pokedex-panel .dc-header { min-height:22px!important;padding:0!important;border:0!important;cursor:default!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-pokedex-panel .dc-header :is(h2,.dc-mark) { display:none!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-pokedex-panel .dc-tools { grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-pokedex-panel .dc-search { grid-column:1/-1!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-pokedex-panel .dc-tools :is(input,select,button) { min-height:44px!important;font-size:16px!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-pokedex-panel .dc-status button { min-height:40px!important;overflow-wrap:anywhere!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-pokedex-panel .dc-grid { min-height:0!important;scrollbar-gutter:auto!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-pokedex-panel .dc-footer { min-height:44px!important;flex-shrink:0!important;padding-top:4px!important; background:var(--ui-card,#fff)!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-pokedex-panel .dc-footer button { width:44px!important;height:44px!important;min-height:44px!important; } html[data-mobile-viewport="active"] #app #sidePanel .dc-type-popover { max-width:calc(var(--pk-mobile-vv-width,100vw) - 20px)!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 20px)!important; overflow:auto!important; } html[data-mobile-viewport="active"] #app #sidePanel .dc-type-popover > header button, html[data-mobile-viewport="active"] #app #sidePanel .dc-type-popover [data-dc-type] { min-height:44px!important; } /* Bag: the mobile chrome supplies the title; wallet, search, categories, item list and item actions remain in their own scroll regions. */ html[data-mobile-viewport="active"] #app #sidePanel.is-inventory-panel .inventory-head-v54 { min-height:0!important;gap:4px!important;padding:0 0 5px!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-inventory-panel .inventory-title-v49 { display:none!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-inventory-panel .inventory-wallet-v49 { width:100%!important;justify-content:space-between!important;min-width:0!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-inventory-panel .inventory-expedition { gap:7px!important;min-height:0!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-inventory-panel .inventory-layout-v49, html[data-mobile-viewport="active"] #app #sidePanel.is-inventory-panel .inventory-catalog-v52, html[data-mobile-viewport="active"] #app #sidePanel.is-inventory-panel .inventory-content-v49 { min-height:0!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-inventory-panel .inventory-categories-v52 { scroll-snap-type:x proximity!important;overscroll-behavior-x:contain!important; } html[data-mobile-viewport="active"] #app #sidePanel.is-inventory-panel .inventory-categories-v52 > button { scroll-snap-align:start!important;min-height:44px!important; } html[data-mobile-viewport="active"] #app #inventoryItemDialogContent, html[data-mobile-viewport="active"] #app #inventoryItemDialog .inventory-item-dialog-v52 { max-height:calc(var(--pk-mobile-vv-height,100dvh) - 16px)!important; overflow-y:auto!important;overscroll-behavior:contain!important; } html[data-mobile-viewport="active"] #app #inventoryItemDialog .inventory-item-dialog-v2740__actions { position:sticky!important;bottom:calc(-14px - env(safe-area-inset-bottom))!important; z-index:3!important;padding:8px 0 max(8px,env(safe-area-inset-bottom))!important; background:var(--bag-card,var(--ui-card,#fff))!important; } /* Other side windows: each long section scrolls inside the phone sheet. Touch targets and tab rows stay usable on 320-pixel screens. */ html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] :is(.qj-tabs,.fn-tabs,.td-tabs,.settings-tabs-v2343,.tester-tabs) { min-width:0!important;max-width:100%!important;overflow-x:auto!important; overscroll-behavior-x:contain!important;scrollbar-width:thin!important; } html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] :is(.qj-tabs,.fn-tabs,.td-tabs,.settings-tabs-v2343,.tester-tabs) > button { min-height:44px!important;flex-shrink:0!important; } html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] :is(.quest-journal-body-v57,.td-tree-screen,.factions-v1,.settings-v2915,.tester-panel) { min-width:0!important;max-width:100%!important;box-sizing:border-box!important; } html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] .fn-filters { grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important; } html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] .fn-editor { grid-template-columns:minmax(0,1fr)!important;gap:10px!important;padding:10px!important; } html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] .fn-emblem-preview { position:relative!important;top:auto!important; } html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] .settings-v2915 .settings-tabs-v2343 { display:flex!important;flex-wrap:nowrap!important;gap:4px!important; } html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] .settings-v2915 .settings-tabs-v2343 > button { min-width:96px!important;padding:7px!important; } html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] .settings-recommendation { grid-template-columns:minmax(0,1fr)!important; } html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] .settings-recommendation button { grid-column:1!important;grid-row:auto!important;width:100%!important;min-height:44px!important; } /* Standalone game windows keep their own controls, but no content or bottom action can be stranded outside the visible phone viewport. */ html[data-mobile-viewport="active"] #app :is(#marketplaceModal,#leaderboardModal)[aria-hidden="false"] > :is(.marketplace-shell,.leaderboard-shell) { width:calc(var(--pk-mobile-vv-width,100vw) - 16px)!important; max-width:480px!important;max-height:calc(var(--pk-mobile-vv-height,100dvh) - 16px)!important; min-height:0!important;box-sizing:border-box!important;overflow:hidden!important; } html[data-mobile-viewport="active"] #app :is(#marketplaceModal,#leaderboardModal) :is(.marketplace-head,.leaderboard-head) { position:relative!important;z-index:2!important;flex-shrink:0!important; } html[data-mobile-viewport="active"] #app :is(#marketplaceModal,#leaderboardModal) :is(.marketplace-tabs,.leaderboard-tabs) { flex-shrink:0!important;max-width:100%!important;min-height:44px!important; overflow-x:auto!important;overscroll-behavior-x:contain!important; } html[data-mobile-viewport="active"] #app :is(#marketplaceModal,#leaderboardModal) :is(.marketplace-body,.leaderboard-body) { flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important; overscroll-behavior:contain!important; } html[data-mobile-viewport="active"] #app :is(#marketplaceModal,#leaderboardModal) :is([data-market-close],[data-leaderboard-close]):is(button) { flex:0 0 44px!important;width:44px!important;height:44px!important; min-width:44px!important;min-height:44px!important; } html[data-mobile-viewport="active"] #app #tradeDialog[aria-hidden="false"] .trade-dialog__content { max-width:calc(var(--pk-mobile-vv-width,100vw) - 16px)!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 16px)!important; overflow-y:auto!important;overscroll-behavior:contain!important; } /* Only chat change: a guaranteed, finger-sized close glyph on the existing button. Channel layout and all chat scripts are untouched. */ html[data-mobile-viewport="active"] #app #chatPanel.is-open:not(.is-minimized) .chat-head-actions > [data-close-chat] { display:grid!important;place-items:center!important;order:99!important; flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px!important; min-height:44px!important;padding:0!important;opacity:1!important;visibility:visible!important; position:relative!important;z-index:5!important; background-image:none!important; } html[data-mobile-viewport="active"] #app #chatPanel.is-open:not(.is-minimized) .chat-head-actions > [data-close-chat]::before, html[data-mobile-viewport="active"] #app #chatPanel.is-open:not(.is-minimized) .chat-head-actions > [data-close-chat]::after { content:none!important;display:none!important; } html[data-mobile-viewport="active"] #app #chatPanel.is-open:not(.is-minimized) .mobile-chat-close-glyph { display:block!important;font:400 29px/1 system-ui,sans-serif!important; color:currentColor!important;pointer-events:none!important; } } } /* pk-style-source:9 */ /* /mobile-game-windows-v2.css */ /* Follow-up fixes for phone game windows. Every rule is gated by the measured mobile viewport so desktop window geometry is untouched. */ @layer mobile-window-accessibility { @media (max-width:760px), (pointer:coarse) and (max-height:560px) { /* The icon hydrator replaces the chat button's original innerHTML. Draw the close glyph on the button itself so it survives hydration. */ html[data-mobile-viewport="active"] #app #chatPanel.is-open:not(.is-minimized) .chat-head-actions > [data-close-chat] > :is(.ui-icon,.mobile-chat-close-glyph) { display:none!important; } html[data-mobile-viewport="active"] #app #chatPanel.is-open:not(.is-minimized) .chat-head-actions > [data-close-chat]::after { content:"×"!important; display:block!important; position:static!important; width:auto!important; height:auto!important; color:currentColor!important; font:400 29px/1 system-ui,sans-serif!important; pointer-events:none!important; } /* An inventory item already scrolls inside its article. The previous phone rule made the outer content scroll too, trapping touch gestures. */ html[data-mobile-viewport="active"] #app #inventoryItemDialog #inventoryItemDialogContent { overflow:visible!important; overscroll-behavior:auto!important; } html[data-mobile-viewport="active"] #app #inventoryItemDialog #inventoryItemDialogContent > .inventory-item-dialog-v52 { overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch; } /* The quick map editor was the remaining world panel with a 34px close. */ html[data-mobile-viewport="active"] #app #editorPanel.is-open .editor-head > [data-close-editor] { display:grid!important; place-items:center!important; flex:0 0 44px!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; padding:0!important; touch-action:manipulation!important; } /* Pokemon skill/equipment pickers are fixed overlays. Align them to the visible viewport after the OS keyboard opens or the page is zoomed. */ html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] .ph-modal-layer { position:fixed!important; top:calc(var(--pk-mobile-vv-offset-top,0px) + 8px)!important; left:calc(var(--pk-mobile-vv-offset-left,0px) + 8px)!important; right:auto!important; bottom:auto!important; width:calc(var(--pk-mobile-vv-width,100vw) - 16px)!important; height:calc(var(--pk-mobile-vv-height,100dvh) - 16px)!important; max-width:none!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 16px)!important; min-width:0!important; min-height:0!important; box-sizing:border-box!important; overflow:hidden!important; } } } /* pk-style-source:10 */ /* /mobile-game-windows-v3.css */ /* Phone-only follow-up for nested game windows. Desktop selectors are unchanged. */ @layer mobile-window-accessibility { @media (max-width:760px), (pointer:coarse) and (max-height:560px) { /* A soft keyboard can move the visual viewport while the layout viewport stays in place. Keep the item sheet inside the area the player sees. */ html[data-mobile-viewport="active"] #app #gameScreen #inventoryItemDialog.is-open { top:var(--pk-mobile-vv-offset-top,0px)!important; left:var(--pk-mobile-vv-offset-left,0px)!important; right:auto!important; bottom:auto!important; width:var(--pk-mobile-vv-width,100vw)!important; height:var(--pk-mobile-vv-height,100dvh)!important; } /* The development preview is a nested, fixed window. Its original inset remains tied to the layout viewport after a keyboard opens. */ html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] .td-v3.is-preview-open .td-preview-surface { top:calc(var(--pk-mobile-vv-offset-top,0px) + 8px)!important; left:calc(var(--pk-mobile-vv-offset-left,0px) + 8px)!important; right:auto!important; bottom:auto!important; width:calc(var(--pk-mobile-vv-width,100vw) - 16px)!important; height:calc(var(--pk-mobile-vv-height,100dvh) - 16px)!important; max-width:none!important; max-height:none!important; min-width:0!important; min-height:0!important; box-sizing:border-box!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch; } html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] .td-v3.is-preview-open .td-preview-close { flex:0 0 44px!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; touch-action:manipulation!important; } /* Pokedex comparison and information dialogs still have 32–36px close controls. Size the actual buttons rather than adding another close. */ html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] :is(.pe-compare-dialog,.pc-popover) { max-width:calc(var(--pk-mobile-vv-width,100vw) - 16px)!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 16px)!important; min-width:0!important; min-height:0!important; box-sizing:border-box!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch; } html[data-mobile-viewport="active"] #app #sidePanel[data-mobile-sheet="v1"] :is(.pe-compare-dialog,.pc-popover) [data-pc-close] { display:grid!important; place-items:center!important; flex:0 0 44px!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; padding:0!important; touch-action:manipulation!important; } } } /* pk-style-source:11 */ /* /mobile-game-windows-v4.css */ /* Mobile window system. No rules outside the existing mobile breakpoint. Keep the accessibility layer: its important declarations precede feature skins. */ @layer mobile-window-accessibility { @media (max-width:760px), (pointer:coarse) and (max-height:560px) { html[data-mobile-viewport="active"] { --mw-gap:8px; --mw-top:max(var(--mw-gap),env(safe-area-inset-top)); --mw-bottom:max(var(--mw-gap),env(safe-area-inset-bottom)); --mw-left:max(var(--mw-gap),env(safe-area-inset-left)); --mw-right:max(var(--mw-gap),env(safe-area-inset-right)); --mw-width:calc(var(--pk-mobile-vv-width,100vw) - var(--mw-left) - var(--mw-right)); --mw-height:calc(var(--pk-mobile-vv-height,100dvh) - var(--mw-top) - var(--mw-bottom)); --mw-paper:var(--ui-card,var(--theme-card,#f8fcff)); --mw-line:var(--ui-line,var(--theme-border,#d3e4eb)); } html[data-mobile-viewport="active"] :is(#sidePanel,#chatPanel,#editorPanel,#gameScreen dialog[open],.tc-studio[open],.tc-gift-dialog[open],.pt-dialog[open]) { box-sizing:border-box!important;min-width:0!important; overscroll-behavior:contain!important;scrollbar-width:thin!important; scroll-padding-block:12px!important;-webkit-overflow-scrolling:touch; } html[data-mobile-viewport="active"] :is(#sidePanel,#chatPanel,#editorPanel,#gameScreen dialog[open],.tc-studio[open],.tc-gift-dialog[open],.pt-dialog[open],#windowConfirm,.dialogue-card,.trade-dialog__content,.marketplace-shell,.leaderboard-shell,.professor-transfer-card,.starter-card) :is(button,summary,input:not([type="checkbox"]):not([type="radio"]),select) { min-height:44px!important;touch-action:manipulation!important; } html[data-mobile-viewport="active"] :is(#sidePanel,#gameScreen dialog[open],#windowConfirm,.trade-dialog__content,.marketplace-shell,.leaderboard-shell) :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) { font-size:16px!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important; } html[data-mobile-viewport="active"] :is(#sidePanel,#gameScreen dialog[open],#windowConfirm,.trade-dialog__content,.marketplace-shell,.leaderboard-shell) :is(h1,h2,h3,p,label,button) {overflow-wrap:anywhere!important;} html[data-mobile-viewport="active"] :is(#sidePanel,#gameScreen dialog[open],#windowConfirm) :is(button,summary):focus-visible {outline:2px solid var(--ui-accent,#1689ac)!important;outline-offset:2px!important;} /* One stable header and one content viewport for ordinary panels. */ html[data-mobile-viewport="active"] body:not(.is-battling) #gameScreen #sidePanel[data-mobile-sheet="v1"].is-open { width:var(--mw-width)!important;max-width:480px!important; top:calc(var(--pk-mobile-vv-offset-top,0px) + var(--mw-top))!important; left:calc(var(--pk-mobile-vv-offset-left,0px) + var(--mw-left))!important; right:calc(var(--pk-mobile-vv-offset-right,0px) + var(--mw-right))!important; height:calc(var(--mw-height) - var(--mobile-sheet-dock,82px))!important; max-height:var(--mw-height)!important; border-radius:16px!important;border:1px solid var(--mw-line)!important; box-shadow:0 12px 36px #15374526!important; } html[data-mobile-viewport="active"] #gameScreen #sidePanel[data-mobile-sheet="v1"] .mobile-window-head {min-height:52px!important;padding:4px 4px 4px 12px!important;} html[data-mobile-viewport="active"] #sidePanel .mobile-window-title {font-size:18px!important;line-height:1.2!important;} html[data-mobile-viewport="active"] #sidePanel #sidePanelContent { min-width:0!important;min-height:0!important;padding:10px!important; overscroll-behavior:contain!important;scroll-padding-block:12px!important; } html[data-mobile-viewport="active"] body #app #gameScreen #sidePanel[data-mobile-sheet="v1"] :is(button,summary) {min-height:44px!important;} html[data-mobile-viewport="active"] #sidePanel :is(.settings-tabs,.qj-tabs,.fn-tabs,.td-tabs,.ph-tabs,.tc-tabs,.trainer-hub-tabs,.lab-service-tabs) { display:flex!important;flex-wrap:nowrap!important;gap:6px!important; overflow-x:auto!important;min-width:0!important;max-width:100%!important; scrollbar-width:none!important;scroll-snap-type:x proximity; } html[data-mobile-viewport="active"] #sidePanel :is(.settings-tabs,.qj-tabs,.fn-tabs,.td-tabs,.ph-tabs,.tc-tabs,.trainer-hub-tabs,.lab-service-tabs)>button {flex:0 0 auto!important;scroll-snap-align:start;padding:8px 12px!important;} /* Inventory: search, horizontal categories, two readable columns; only the item list scrolls. Keep all stack, quantity, slot and transaction controls. */ html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel #sidePanelContent {overflow:hidden!important;display:flex!important;flex-direction:column!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-expedition {display:flex!important;flex-direction:column!important;gap:8px!important;min-height:0!important;height:100%!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-layout-v49 {display:flex!important;flex-direction:column!important;gap:8px!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-categories-v52 {display:flex!important;flex-direction:row!important;flex:0 0 auto!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:0 0 4px!important;width:100%!important;max-height:none!important;scrollbar-width:none!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-categories-v52>button {display:flex!important;flex:0 0 auto!important;width:auto!important;gap:6px!important;padding:8px 10px!important;min-height:44px!important;white-space:nowrap!important;border-radius:10px!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-toolbar-v54 {display:flex!important;gap:6px!important;min-height:44px!important;flex:0 0 auto!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-toolbar-v54 label {flex:1 1 auto!important;min-width:0!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-toolbar-v54 input {width:100%!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-catalog-v52 {flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-catalog-head-v54 {min-height:44px!important;padding:0 0 6px!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-capacity-v53 {width:100%!important;max-width:none!important;min-height:44px!important;padding:6px 8px!important;grid-template-columns:minmax(0,1fr) auto!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-items-v49 {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:0 0 10px!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-content-v49 {flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-item-v52 {min-width:0!important;min-height:124px!important;height:124px!important;padding:8px!important;border-radius:12px!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-item-art-v49 {height:72px!important;min-height:72px!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-item-art-v49>.item-icon {width:64px!important;height:64px!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-item-copy-v49 b {font-size:12px!important;line-height:1.3!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .is-list .inventory-items-v49 {grid-template-columns:1fr!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .is-list .inventory-item-v52 {min-height:76px!important;grid-template-columns:48px minmax(0,1fr) auto!important;} html[data-mobile-viewport="active"] #inventoryItemDialog .inventory-item-dialog-v52 {width:100%!important;max-height:var(--mw-height)!important;border-radius:16px!important;padding:12px!important;overflow-y:auto!important;overscroll-behavior:contain!important;} html[data-mobile-viewport="active"] #inventoryItemDialog .inventory-item-dialog-head-v48 {grid-template-columns:56px minmax(0,1fr)!important;gap:8px!important;} html[data-mobile-viewport="active"] #inventoryItemDialog .inventory-item-dialog-head-v48>img {width:56px!important;height:56px!important;} html[data-mobile-viewport="active"] #inventoryItemDialog .inventory-item-dialog-v2740__actions {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;position:static!important;} html[data-mobile-viewport="active"] #inventoryItemDialog :is(.inventory-item-dialog-v2740__actions button,.inventory-discard-confirm button) {min-height:44px!important;padding:8px!important;font-size:13px!important;white-space:normal!important;} html[data-mobile-viewport="active"] #inventoryItemDialog .inventory-discard-confirm {position:static!important;margin-top:10px!important;padding:12px!important;} /* Healing and storage use a vertical, readable list, with costs beside the actual action. Team/box tabs retain the existing server workflows. */ html[data-mobile-viewport="active"] #sidePanel .lab-section-heading {display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;} html[data-mobile-viewport="active"] #sidePanel .genetics-lab-hero {min-height:0!important;padding:0 0 10px!important;margin:0 0 10px!important;} html[data-mobile-viewport="active"] #sidePanel .genetics-lab-hero h2 {display:none!important;} html[data-mobile-viewport="active"] #sidePanel .genetics-lab-hero p {margin:4px 0 0!important;font-size:12px!important;line-height:1.4!important;} html[data-mobile-viewport="active"] #sidePanel .lab-service-panel {padding:10px!important;border-radius:12px!important;} html[data-mobile-viewport="active"] #sidePanel .lab-section-heading>button {width:100%!important;} html[data-mobile-viewport="active"] #sidePanel .lab-clinic-card {display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;gap:8px!important;padding:10px!important;} html[data-mobile-viewport="active"] #sidePanel .lab-clinic-card>button {grid-column:1/-1!important;width:100%!important;} html[data-mobile-viewport="active"] #sidePanel .lab-pokemon-portrait {width:48px!important;height:48px!important;min-width:48px!important;} html[data-mobile-viewport="active"] #sidePanel .lab-section-note {font-size:12px!important;line-height:1.4!important;margin:8px 0!important;} html[data-mobile-viewport="active"] #sidePanel .lab-shop-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;} html[data-mobile-viewport="active"] #sidePanel .pokemon-center-box-v2332-head {display:none!important;} html[data-mobile-viewport="active"] #sidePanel .pokemon-center-box-v2332-layout {display:flex!important;flex-direction:column!important;gap:10px!important;min-height:0!important;overflow:visible!important;} html[data-mobile-viewport="active"] #sidePanel .pokemon-center-box-v2332 :is(.pokemon-center-box-v2332-party,.pokemon-center-box-v2332-box) {max-height:none!important;overflow:visible!important;} html[data-mobile-viewport="active"] #sidePanel .pokemon-center-box-v2332 .is-mobile-hidden {display:none!important;} html[data-mobile-viewport="active"] #sidePanel .pokemon-center-box-v2332-action {padding:10px!important;} html[data-mobile-viewport="active"] #sidePanel .pokemon-center-box-v2332-actions {display:grid!important;grid-template-columns:1fr!important;gap:8px!important;} html[data-mobile-viewport="active"] #sidePanel .pokemon-center-box-v2332-storage-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:none!important;overflow:visible!important;} /* Native dialogs: including lazy shops, home, nursery, music, casino rules, studio and gift windows. Closed dialogs keep their native display state. */ html[data-mobile-viewport="active"] body:not(.is-battling) :is(#gameScreen dialog[open],.tc-studio[open],.tc-gift-dialog[open],.pt-dialog[open]) { position:fixed!important; top:calc(var(--pk-mobile-vv-offset-top,0px) + var(--pk-mobile-vv-height,100dvh)/2)!important; left:calc(var(--pk-mobile-vv-offset-left,0px) + var(--pk-mobile-vv-width,100vw)/2)!important; right:auto!important;bottom:auto!important;margin:0!important; transform:translate(-50%,-50%)!important;translate:none!important; width:min(440px,var(--mw-width))!important;max-width:var(--mw-width)!important; max-height:var(--mw-height)!important;height:auto!important;min-height:0!important; padding:12px!important;border-radius:16px!important;overflow:auto!important; box-sizing:border-box!important; } html[data-mobile-viewport="active"] body:not(.is-battling) #gameScreen dialog.vip-atelier[open] {inset:auto!important;top:calc(var(--pk-mobile-vv-offset-top,0px) + var(--pk-mobile-vv-height,100dvh)/2)!important;left:calc(var(--pk-mobile-vv-offset-left,0px) + var(--pk-mobile-vv-width,100vw)/2)!important;transform:translate(-50%,-50%)!important;} html[data-mobile-viewport="active"] :is(#gameScreen dialog[open],.tc-studio[open],.tc-gift-dialog[open],.pt-dialog[open])>header { position:sticky!important;top:-12px!important;z-index:10!important; min-height:52px!important;gap:8px!important;padding:4px 0 8px!important; background:var(--mw-paper)!important;border-bottom:1px solid var(--mw-line)!important; } html[data-mobile-viewport="active"] :is(#gameScreen dialog[open],.tc-studio[open],.tc-gift-dialog[open],.pt-dialog[open])>header :is(h1,h2) {font-size:18px!important;line-height:1.25!important;margin:0!important;} html[data-mobile-viewport="active"] :is(#gameScreen dialog[open],.tc-studio[open],.tc-gift-dialog[open],.pt-dialog[open])>header button {flex-shrink:0!important;min-width:44px!important;min-height:44px!important;} html[data-mobile-viewport="active"] #gameScreen .kanto-tool-dialog[open] :is(header p,header small) {display:none!important;} html[data-mobile-viewport="active"] #gameScreen .kanto-tool-dialog[open] .kanto-tool-stock {grid-template-columns:1fr!important;gap:8px!important;} html[data-mobile-viewport="active"] #gameScreen .kanto-tool-dialog[open] .kanto-tool-stock article {grid-template-columns:48px minmax(0,1fr)!important;gap:8px!important;padding:10px!important;} html[data-mobile-viewport="active"] #gameScreen .kanto-tool-dialog[open] .kanto-tool-stock article img {width:48px!important;height:48px!important;} html[data-mobile-viewport="active"] #gameScreen .kanto-tool-dialog[open] .kanto-tool-stock article>strong {grid-column:1!important;align-self:center!important;font-size:12px!important;} html[data-mobile-viewport="active"] #gameScreen .kanto-tool-dialog[open] .kanto-tool-stock article>button {grid-column:2!important;} html[data-mobile-viewport="active"] #gameScreen .kanto-tool-dialog[open] .kanto-tool-loadout {grid-template-columns:repeat(2,minmax(0,1fr))!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-header {display:grid!important;grid-template-columns:minmax(0,1fr) repeat(4,44px)!important;gap:4px!important;width:100%!important;box-sizing:border-box!important;padding:4px 0 8px!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-header :is(.cc-back,.cc-brand) {display:none!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-header .cc-wallets {display:flex!important;flex-wrap:wrap!important;gap:4px 8px!important;min-width:0!important;font-size:11px!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-header :is(.cc-icon,.cc-close) {display:block!important;width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-control-deck {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;padding:10px!important;position:static!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-deck-balance {grid-column:1/-1!important;min-width:0!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-deck-balance :is(small,strong,.cc-deck-result) {display:none!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-currency {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin:0!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-bets {display:block!important;grid-column:1/-1!important;min-width:0!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-bets>div {display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;gap:6px!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-bets button {min-width:0!important;white-space:nowrap!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-spin-area {display:grid!important;grid-column:1/-1!important;grid-row:auto!important;grid-template-columns:96px minmax(0,1fr)!important;gap:8px!important;align-items:center!important;min-width:0!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-play {grid-column:1!important;grid-row:auto!important;justify-self:center!important;align-self:center!important;width:88px!important;height:88px!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-buy-bonus {display:flex!important;grid-column:2!important;grid-row:auto!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;width:100%!important;min-height:88px!important;font-size:14px!important;padding:10px!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-buy-bonus b {white-space:nowrap!important;overflow-wrap:normal!important;} html[data-mobile-viewport="active"] #gameScreen .casino-dialog[open] .cc-shell {width:100%!important;min-width:0!important;} html[data-mobile-viewport="active"] #gameScreen :is(.cc-rules-dialog,.cc-buy-dialog)[open] :is(.cc-rules-content,table) {max-width:100%!important;} html[data-mobile-viewport="active"] #gameScreen .cc-rules-dialog[open] .cc-rules-content {overflow-x:auto!important;} html[data-mobile-viewport="active"] #gameScreen :is(.pp-nursery,.vip-atelier,.pp-home)[open] {padding:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;} html[data-mobile-viewport="active"] #gameScreen .pp-home.is-workshop[open] {height:var(--mw-height)!important;} html[data-mobile-viewport="active"] #gameScreen .pp-home.is-workshop[open] .workshop-layout {flex:1 1 auto!important;min-height:0!important;} html[data-mobile-viewport="active"] #gameScreen .pp-home.is-workshop[open] :is(.workshop-scene-toolbar,.workshop-dock) {flex:0 0 auto!important;} html[data-mobile-viewport="active"] #gameScreen :is(.pp-nursery,.vip-atelier,.pp-home)[open]>header {top:0!important;padding:6px 10px!important;flex:0 0 auto!important;} html[data-mobile-viewport="active"] #gameScreen :is(.pp-nursery,.vip-atelier,.pp-home)[open]>footer {flex:0 0 auto!important;padding:8px 10px!important;min-height:0!important;} html[data-mobile-viewport="active"] #gameScreen .vip-atelier[open] .vs-layout {display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;} html[data-mobile-viewport="active"] #gameScreen .vip-atelier[open] .vs-nav {display:flex!important;flex-direction:row!important;overflow-x:auto!important;flex:0 0 auto!important;padding:6px 10px!important;gap:6px!important;} html[data-mobile-viewport="active"] #gameScreen .vip-atelier[open] .vs-nav button {flex:0 0 auto!important;} html[data-mobile-viewport="active"] #gameScreen .vip-atelier[open] .vs-main {overflow-y:auto!important;min-height:0!important;padding:10px!important;} html[data-mobile-viewport="active"] #gameScreen .pp-home[open] :is(.home-layout,.home-world-interaction,.workshop-body,.gc-body) {flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;} html[data-mobile-viewport="active"] #gameScreen .pp-home[open] .home-layout {display:flex!important;flex-direction:column!important;gap:10px!important;} html[data-mobile-viewport="active"] #gameScreen .pp-home[open] .home-aside {width:100%!important;max-height:none!important;overflow:visible!important;} html[data-mobile-viewport="active"] #gameScreen .pp-home[open] .home-tabs {display:flex!important;overflow-x:auto!important;flex:0 0 auto!important;gap:6px!important;padding:6px 10px!important;} html[data-mobile-viewport="active"] #gameScreen .pp-home[open] .home-tabs button {flex:0 0 auto!important;} html[data-mobile-viewport="active"] #gameScreen .pp-home[open] .home-confirmation {max-height:var(--mw-height)!important;overflow:auto!important;padding:12px!important;} html[data-mobile-viewport="active"] #gameScreen .pp-nursery[open] :is(.nursery-layout,.nursery-body,.nr-layout,.nr-body) {min-height:0!important;flex:1 1 auto!important;overflow-y:auto!important;} /* Conversation stays a conversation: portrait, readable text, responses. The scroll owner includes long choices so none become unreachable. */ html[data-mobile-viewport="active"] #app #dialogueDialog.is-open .dialogue-card {width:var(--mw-width)!important;max-height:var(--mw-height)!important;min-height:0!important;overflow-y:auto!important;border-radius:16px!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-card {display:flex!important;flex-direction:column!important;position:relative!important;height:auto!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait {position:relative!important;inset:auto!important;height:clamp(100px,calc(var(--pk-mobile-vv-height,100dvh)*.22),180px)!important;min-height:100px!important;flex:0 0 auto!important;padding:0!important;justify-content:center!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait>i {height:100%!important;margin:0!important;animation:none!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-stage {inset:0!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-dock {position:relative!important;inset:auto!important;width:100%!important;max-height:calc(var(--mw-height) - clamp(100px,calc(var(--pk-mobile-vv-height,100dvh)*.22),180px))!important;flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;display:block!important;background:var(--mw-paper)!important;backdrop-filter:none!important;box-shadow:none!important;animation:none!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy {padding:12px!important;max-height:none!important;overflow:visible!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSpeaker {font-size:20px!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueText {font-size:15px!important;line-height:1.5!important;min-height:0!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar {padding:0 12px 12px!important;display:flex!important;flex-direction:column!important;gap:8px!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices {display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:8px!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button {min-height:48px!important;padding:10px!important;grid-template-columns:minmax(0,1fr) 12px!important;grid-template-rows:auto!important;border-radius:10px!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre :is(.story-key,.theatre-choice-note,#dialogueHint,.theatre-cue) {display:none!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-choice-label {grid-column:1!important;grid-row:1!important;font-size:14px!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-choice-arrow {grid-column:2!important;grid-row:1!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions {display:flex!important;flex:0 0 auto!important;width:100%!important;gap:8px!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions button {min-height:44px!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueNext {flex:1 1 auto!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueClose {flex:0 0 64px!important;max-width:none!important;} /* Layered confirmation, travel, trading, requests, tutorial and rewards. */ html[data-mobile-viewport="active"] #app :is(#windowConfirm,#worldChannelConfirm,#socialInvite,#pvpInvite,#questOfferV57,#controlsTutorial,#professorTransferDialog,#starterDialog,#tradeDialog)[aria-hidden="false"] {padding:var(--mw-top) var(--mw-right) var(--mw-bottom) var(--mw-left)!important;box-sizing:border-box!important;} html[data-mobile-viewport="active"] #app :is(.window-confirm-card,.world-channel-confirm__card,.social-invite-card,.pvp-invite-card,.quest-offer-card-v57,.controls-tutorial-card,.professor-transfer-card,.starter-card,.trade-dialog__content) {width:min(440px,100%)!important;min-width:0!important;max-height:var(--mw-height)!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:12px!important;border-radius:16px!important;} html[data-mobile-viewport="active"] #windowConfirm .window-confirm-card {width:min(400px,100%)!important;} html[data-mobile-viewport="active"] #windowConfirm>article {width:min(400px,100%)!important;max-height:var(--mw-height)!important;padding:12px!important;border-radius:16px!important;overflow-y:auto!important;} html[data-mobile-viewport="active"] #windowConfirm :is(h2,p) {margin-block:8px!important;} html[data-mobile-viewport="active"] #windowConfirm .window-confirm-actions {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;} html[data-mobile-viewport="active"] #tradeDialog .trade-layout {display:flex!important;flex-direction:column!important;gap:10px!important;} html[data-mobile-viewport="active"] #tradeDialog .trade-columns-v2733 {display:flex!important;flex-direction:column!important;gap:10px!important;max-height:none!important;overflow:visible!important;} html[data-mobile-viewport="active"] #tradeDialog .trade-window-v2733 {padding:0!important;max-height:none!important;overflow:visible!important;} html[data-mobile-viewport="active"] #tradeDialog .trade-window-v2733>header {position:sticky!important;top:-12px!important;z-index:2!important;background:var(--mw-paper)!important;padding:6px 0!important;} html[data-mobile-viewport="active"] #tradeDialog .trade-dialog__content {overflow-x:hidden!important;} html[data-mobile-viewport="active"] .activity-recovery {top:var(--pk-mobile-vv-offset-top,0px)!important;left:var(--pk-mobile-vv-offset-left,0px)!important;right:auto!important;bottom:auto!important;width:var(--pk-mobile-vv-width,100vw)!important;height:var(--pk-mobile-vv-height,100dvh)!important;padding:12px!important;box-sizing:border-box!important;} html[data-mobile-viewport="active"] .activity-recovery article {max-height:var(--mw-height)!important;padding:16px!important;border-radius:16px!important;} html[data-mobile-viewport="active"] .activity-recovery h2 {font-size:20px!important;} html[data-mobile-viewport="active"] #app :is(.marketplace-modal__panel,.leaderboard-modal__panel,.marketplace-shell,.leaderboard-shell) {max-width:var(--mw-width)!important;max-height:var(--mw-height)!important;min-height:0!important;border-radius:16px!important;} html[data-mobile-viewport="active"] #marketplaceModal :is(.marketplace-tabs,.marketplace-filters) {display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;min-width:0!important;gap:6px!important;} html[data-mobile-viewport="active"] #marketplaceModal .marketplace-tabs>button {flex:0 0 auto!important;} /* Lobby menus use the same bounded header / scroll body / action row. Running game canvases and controls keep their own layout. */ html[data-mobile-viewport="active"] :is(.pursuit,.quarry,.onix-game,.voltage)[data-view="lobby"] {box-sizing:border-box!important;padding:var(--mw-top) var(--mw-right) var(--mw-bottom) var(--mw-left)!important;} html[data-mobile-viewport="active"] :is(.pursuit,.quarry,.onix-game,.voltage)[data-view="lobby"]>article {display:flex!important;flex-direction:column!important;width:min(640px,var(--mw-width))!important;height:var(--mw-height)!important;max-height:var(--mw-height)!important;min-height:0!important;border-radius:16px!important;overflow:hidden!important;} html[data-mobile-viewport="active"] :is(.pursuit,.quarry,.onix-game,.voltage)[data-view="lobby"]>article>header {flex:0 0 auto!important;min-height:52px!important;padding:6px 8px!important;gap:6px!important;} html[data-mobile-viewport="active"] :is(.pursuit,.quarry,.onix-game,.voltage)[data-view="lobby"]>article>header h2 {font-size:17px!important;overflow-wrap:anywhere!important;} html[data-mobile-viewport="active"] :is(.pursuit,.quarry,.onix-game,.voltage)[data-view="lobby"]>article>header button {width:44px!important;height:44px!important;flex:0 0 44px!important;} html[data-mobile-viewport="active"] :is(.pursuit-lobby,.quarry-lobby,.onix-lobby,.voltage-lobby) {display:flex!important;flex-direction:column!important;min-height:0!important;flex:1 1 auto!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;padding:10px!important;gap:10px!important;} html[data-mobile-viewport="active"] :is(.pursuit-lobby,.quarry-lobby,.onix-lobby,.voltage-lobby)>* {flex:0 0 auto!important;min-width:0!important;} html[data-mobile-viewport="active"] :is(.pursuit-footer,.quarry-footer,.onix-footer,.voltage-footer) {flex:0 0 auto!important;min-height:52px!important;padding:6px 8px!important;gap:8px!important;} html[data-mobile-viewport="active"] :is(.pursuit-footer,.quarry-footer,.onix-footer,.voltage-footer) button {min-height:44px!important;min-width:0!important;font-size:13px!important;white-space:normal!important;} html[data-mobile-viewport="active"] :is(.pursuit-overlay,.quarry-overlay,.onix-overlay,.voltage-overlay)>section {box-sizing:border-box!important;max-width:var(--mw-width)!important;max-height:var(--mw-height)!important;overflow:auto!important;overscroll-behavior:contain!important;padding:12px!important;} html[data-mobile-viewport="active"] :is(.pursuit-overlay,.quarry-overlay,.onix-overlay,.voltage-overlay) button {min-height:44px!important;} @media (max-height:560px) { html[data-mobile-viewport="active"] body:not(.is-battling) #gameScreen #sidePanel[data-mobile-sheet="v1"].is-open {--mobile-sheet-dock:0px;max-width:640px!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait {height:90px!important;min-height:90px!important;} html[data-mobile-viewport="active"] #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-dock {max-height:calc(var(--mw-height) - 90px)!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .inventory-items-v49 {grid-template-columns:repeat(3,minmax(0,1fr))!important;} html[data-mobile-viewport="active"] #sidePanel.is-inventory-panel .is-list .inventory-items-v49 {grid-template-columns:1fr!important;} } @media (prefers-reduced-motion:reduce) { html[data-mobile-viewport="active"] #app #dialogueDialog :is(.dialogue-card,.theatre-dock,.dialogue-portrait>i) {animation:none!important;transition:none!important;} } } } /* pk-style-source:12 */ /* inline-12 */ @layer player-hud-orbit-r1;@layer selected-mobile-hud;@layer player-hud-readability;@layer ui-theme, nursery-layout, trainer-card-compact, hud-v2680; /* pk-style-source:13 */ /* /player-hud-readability.css */ /* Readable native resource art; no new raster, blur or interface-wide scaling. */ @layer player-hud-readability { #gameScreen :is(.world-topbar,.player-stamina-hud,.party-hud,.world-minimap,.quest-widget,.desktop-dock,.mobile-dock,.world-rail,.hero-self-actions) { user-select:none!important; -webkit-user-select:none!important; -webkit-touch-callout:none; } #gameScreen :is(.world-topbar,.desktop-dock,.mobile-dock) img { -webkit-user-drag:none; } body:not(.is-battling) #gameScreen #playerProfileButton { --player-paper:transparent; --player-ink:#fff; --player-muted:#f1f8fc; --player-track:#102632cc; display:grid!important; grid-template-columns:72px minmax(0,1fr)!important; gap:12px!important; width:338px!important; min-width:0!important; max-width:none!important; height:94px!important; min-height:94px!important; padding:3px!important; border:0!important; border-radius:16px!important; background:var(--player-paper)!important; background-image:none!important; color:var(--player-ink)!important; box-shadow:none!important; backdrop-filter:none!important; overflow:hidden!important; cursor:pointer; touch-action:manipulation; } html[data-game-theme=light] body:not(.is-battling) #gameScreen #playerProfileButton { --player-paper:transparent; --player-ink:#fff; --player-muted:#f1f8fc; --player-track:#102632cc; border-color:#d3e3e9!important; } #gameScreen #playerProfileButton::before, #gameScreen #playerProfileButton::after { display:none!important; } #gameScreen #playerProfileButton { text-align:left!important; font-family:inherit!important; } #gameScreen #playerProfileButton:focus:not(:focus-visible) { outline:none!important; } #gameScreen #playerProfileButton:focus-visible { outline:2px solid var(--ui-focus,#179ac6)!important; outline-offset:3px!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-avatar { width:72px!important; height:72px!important; align-self:center!important; border:2px solid #f5fbff!important; box-shadow:0 0 0 1px #163745b3, 0 2px 4px #071a2340!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-copy { display:grid!important; grid-template-rows:24px 23px 23px!important; min-width:0!important; gap:3px!important; padding:0!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-identity { align-items:center!important; gap:8px!important; flex-wrap:nowrap!important; } body:not(.is-battling) #gameScreen #worldPlayerName { font-size:20px!important; line-height:1.3!important; color:var(--player-ink)!important; text-shadow:0 1px 2px #071a23, 0 0 1px #071a23!important; max-width:none!important; min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } body:not(.is-battling) #gameScreen #worldPlayerLevel { color:var(--player-muted)!important; font-size:12px!important; line-height:1.3!important; text-shadow:0 1px 2px #071a23, 0 0 1px #071a23!important; padding:0!important; white-space:nowrap!important; flex:none!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress { display:grid!important; grid-template-columns:24px minmax(30px,1fr) auto!important; height:23px!important; min-height:23px!important; align-items:center!important; gap:5px!important; margin:0!important; padding:0!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress>small, body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress img { display:block!important; position:static!important; width:24px!important; height:24px!important; max-width:24px!important; max-height:24px!important; object-fit:contain!important; transform:none!important; filter:none!important; } #gameScreen #playerProfileButton .player-chip-progress>small :is(span), #gameScreen #playerProfileButton .player-chip-progress>small::after { display:none!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress>i { height:10px!important; box-sizing:border-box!important; padding:1px!important; border:1px solid #b7d6df80!important; border-radius:7px!important; background:var(--player-track)!important; overflow:hidden!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress>em { display:block!important; color:var(--player-muted)!important; text-shadow:0 1px 2px #071a23, 0 0 1px #071a23!important; font-size:12px!important; font-weight:700!important; line-height:1!important; font-variant-numeric:tabular-nums; white-space:nowrap!important; min-width:0!important; } body:not(.is-battling) #gameScreen #playerStaminaHud { top:calc(var(--compact-edge,12px) + 100px)!important; } body:not(.is-battling) #gameScreen .party-hud { top:calc(var(--compact-edge,12px) + 138px)!important; } body:not(.is-battling) #gameScreen #worldWallet { width:auto!important; min-width:0!important; padding:5px 8px!important; } body:not(.is-battling) #gameScreen #worldWallet .world-wallet-currency { display:flex!important; grid-template-columns:none!important; flex:0 0 auto!important; width:auto!important; min-width:0!important; height:44px!important; padding:0 8px!important; gap:8px!important; } body:not(.is-battling) #gameScreen #worldWallet .world-wallet-currency-icon { flex:none!important; } body:not(.is-battling) #gameScreen #worldWallet .world-wallet-currency>b { flex:none!important; width:auto!important; min-width:max-content!important; max-width:none!important; white-space:nowrap!important; padding:0!important; background:none!important; border:0!important; border-radius:0!important; font-size:15px!important; line-height:1!important; font-variant-numeric:tabular-nums; } body:not(.is-battling) #gameScreen #worldWallet .world-wallet-currency>button { width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; border-radius:12px!important; padding:0!important; } .inventory-v52 .inventory-wallet-v49>span.is-coins { grid-template-columns:auto max-content!important; } @media (min-width:761px) and (max-width:1150px) { body:not(.is-battling) #gameScreen #playerProfileButton { width:300px!important; grid-template-columns:64px minmax(0,1fr)!important; padding:3px!important; gap:9px!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-avatar { width:64px!important; height:64px!important; } body:not(.is-battling) #gameScreen #worldPlayerName { font-size:18px!important; } body:not(.is-battling) #gameScreen #worldWallet .world-wallet-currency { gap:5px!important; padding:0 5px!important; } body:not(.is-battling) #gameScreen #worldWallet .world-wallet-currency>b { font-size:13px!important; } } /* Restore the floating 2.70 desktop identity, retaining native resource art. The clothing authority owns visibility; a hidden meter must not create a row. */ body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress[hidden] { display:none!important; } body:not(.is-battling) #gameScreen #worldPlayerExpFill { background:#50e1cb!important; background-image:none!important; } body:not(.is-battling) #gameScreen #worldPlayerEnergyFill { background:#ffcf47!important; background-image:none!important; } @media (min-width:761px) and (pointer:fine), (min-width:761px) and (min-height:561px) { body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress>i>b { position:static!important; display:block!important; height:100%!important; border-radius:5px!important; box-shadow:none!important; } body:not(.is-battling) #gameScreen #worldPlayerStaminaMiniFill { background:#7bc49b!important; background-image:none!important; } body:not(.is-battling) #gameScreen { --compact-profile-width:338px!important; --player-hud-height:94px; } body:not(.is-battling) #gameScreen:has(#worldPlayerStaminaMiniRow:not([hidden])) { --player-hud-height:108px; } body:not(.is-battling) #gameScreen #playerProfileButton { height:var(--player-hud-height)!important; min-height:var(--player-hud-height)!important; } body:not(.is-battling) #gameScreen #playerProfileButton:has(#worldPlayerStaminaMiniRow:not([hidden])) .player-chip-copy { grid-template-rows:24px repeat(3,23px)!important; } body:not(.is-battling) #gameScreen .party-hud { top:calc(var(--compact-edge,12px) + var(--player-hud-height) + 44px)!important; } } @media (min-width:761px) and (max-width:1150px) { body:not(.is-battling) #gameScreen { --compact-profile-width:300px!important; } } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { /* A larger portrait, followed by one identity line and two aligned meters. */ body:not(.is-battling) #gameScreen { --compact-profile-width:clamp(176px, 50vw, 220px)!important; } body:not(.is-battling) #gameScreen #playerProfileButton { width:var(--compact-profile-width)!important; height:64px!important; min-height:64px!important; padding:3px 2px!important; grid-template-columns:44px minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr)!important; align-items:center!important; gap:6px!important; border:0!important; border-radius:16px!important; box-shadow:none!important; } /* The phone HUD floats on the world, not on the desktop's paper surface. Keep this after the light-theme rule so both themes remain transparent. */ body:not(.is-battling) #gameScreen #playerProfileButton, html[data-game-theme] body:not(.is-battling) #gameScreen #playerProfileButton { --player-paper:transparent; --player-ink:#fff; --player-muted:#f1f8fc; --player-track:rgba(6,24,34,.64); background:transparent!important; background-image:none!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-avatar { width:44px!important; height:44px!important; margin:0!important; border:2px solid #f1fbff!important; box-shadow:0 0 0 1px #163745b3, 0 2px 4px #071a2340!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-copy { min-height:0!important; height:58px!important; align-self:center!important; grid-template-rows:20px 17px 17px!important; gap:2px!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-identity { gap:6px!important; } body:not(.is-battling) #gameScreen #worldPlayerName { font-size:14px!important; line-height:1.25!important; font-weight:800!important; text-shadow:0 1px 2px #071a23, 0 0 1px #071a23!important; } body:not(.is-battling) #gameScreen #worldPlayerLevel { font-size:10px!important; font-weight:750!important; text-shadow:0 1px 2px #071a23, 0 0 1px #071a23!important; } /* Small vector level badge; the desktop's native artwork is unchanged. */ body:not(.is-battling) #gameScreen #worldPlayerLevel::before { content:''!important; display:inline-block!important; vertical-align:-2px!important; width:14px!important; height:14px!important; margin-right:2px!important; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 6v6c0 4-4 7-8 9-4-2-8-5-8-9V6Z' fill='%23193040' stroke='%23addfec' stroke-width='1.6'/%3E%3Cpath d='m8 12 4-4 4 4m-8 4 4-4 4 4' stroke='%23f4fcff' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress { grid-template-columns:18px minmax(18px,1fr)!important; height:17px!important; min-height:17px!important; gap:4px!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress>small, body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress img { width:17px!important; height:17px!important; max-width:17px!important; max-height:17px!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress>i { height:10px!important; box-sizing:border-box!important; padding:1px!important; overflow:hidden!important; border:1px solid #b7d6df80!important; border-radius:7px!important; background:#102632cc!important; outline:none!important; box-shadow:inset 0 1px 2px #071a2366, 0 1px 2px #071a2340!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress>i>b { height:100%!important; border-radius:5px!important; box-shadow:inset 0 1px #ffffff59!important; } body:not(.is-battling) #gameScreen #worldPlayerExpFill { background:linear-gradient(90deg,#18bcae,#76ebda)!important; } body:not(.is-battling) #gameScreen #worldPlayerEnergyFill { background:linear-gradient(90deg,#eeb12d,#ffe47b)!important; } body:not(.is-battling) #gameScreen #playerProfileButton :is(.is-exp,.is-energy)>small img { visibility:hidden!important; } body:not(.is-battling) #gameScreen #playerProfileButton :is(.is-exp,.is-energy)>small { position:relative!important; width:18px!important; height:18px!important; } body:not(.is-battling) #gameScreen #playerProfileButton :is(.is-exp,.is-energy)>small::before { content:''; position:absolute; inset:0; background:var(--mobile-meter-icon) center/contain no-repeat; } body:not(.is-battling) #gameScreen #worldPlayerExpRow { --mobile-meter-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linejoin='round'%3E%3Cpath d='m12 2 3 7 7 3-7 3-3 7-3-7-7-3 7-3Z' fill='%23193240' stroke='%236fe9d3' stroke-width='1.6'/%3E%3Cpath d='m12 7 1.5 3.5L17 12l-3.5 1.5L12 17l-1.5-3.5L7 12l3.5-1.5Z' fill='%23e4fff8'/%3E%3C/svg%3E"); } body:not(.is-battling) #gameScreen #worldPlayerEnergyRow { --mobile-meter-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-linejoin='round'%3E%3Cpath d='m14 2-10 12h7l-1 8L20 9h-7Z' fill='%23ffdc64' stroke='%23193240' stroke-width='2'/%3E%3Cpath d='m14 3-8 10h6l-1 6 7-9h-6Z' fill='none' stroke='%23fff1b4' stroke-width='1'/%3E%3C/svg%3E"); } /* Honor the clothing controller's hidden state, never leave a phantom row. */ body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress[hidden] { display:none!important; } body:not(.is-battling) #gameScreen #playerProfileButton:has(#worldPlayerStaminaMiniRow:not([hidden])) { height:83px!important; min-height:83px!important; } body:not(.is-battling) #gameScreen #playerProfileButton:has(#worldPlayerStaminaMiniRow:not([hidden])) .player-chip-copy { height:77px!important; grid-template-rows:20px repeat(3,17px)!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress>em { display:none!important; } } @media (min-width:761px) and (max-width:980px) and (min-height:561px) { /* The existing laptop wallet wraps below the profile. Keep sprint/party clear. */ body:not(.is-battling) #gameScreen #playerStaminaHud { top:calc(var(--compact-edge,12px) + 174px)!important; } body:not(.is-battling) #gameScreen .party-hud { top:calc(var(--compact-edge,12px) + 212px)!important; } } } /* VK-052: reserve the full quest art width on narrow touch screens. */ @layer player-hud-readability { @media (max-width: 600px) { html[data-mobile-viewport="active"] #sidePanel .qj-v2770 .qj-row-art { width: 60px !important; height: 60px !important; flex-basis: 60px !important; flex-shrink: 0 !important; } } } /* pk-style-source:14 */ /* /ui-theme-v2900.css */ /* UI colours only. Never filter/invert world art, sprites, type colours or maps. This first important layer also reaches native dialogs mounted under body. */ @layer ui-theme { html[data-game-theme="light"] { --ui-paper:#fbfdff; --ui-card:#ffffff; --ui-soft:#edf4f8; --ui-hover:#e2edf4; --ui-ink:#193b50; --ui-muted:#496577; --ui-line:#bcced9; --ui-accent:#096caa; --ui-tint:#deedf8; --ui-input:#f7fafc; --ui-positive:#176d54; --ui-positive-bg:#e0f2e9; --ui-danger:#a82c42; --ui-danger-bg:#fce8ec; --ui-warning:#77520b; --ui-warning-bg:#fff1cf; --ui-focus:#087db8; --ui-on-accent:#ffffff; --ui-primary:#096caa; --ui-primary-hover:#075a8d; --ui-control-line:#6c8494; --ui-shadow:0 16px 48px #17384f29; --ui-scheme:light; } html[data-game-theme="dark"] { --ui-paper:#142430; --ui-card:#1b303e; --ui-soft:#223b4b; --ui-hover:#2b4a5c; --ui-ink:#edf5fa; --ui-muted:#b6cbd8; --ui-line:#496474; --ui-accent:#8ad6ff; --ui-tint:#244a62; --ui-input:#101f29; --ui-positive:#8fe3bc; --ui-positive-bg:#183e32; --ui-danger:#ffabb7; --ui-danger-bg:#4b2733; --ui-warning:#f5d58b; --ui-warning-bg:#473c24; --ui-focus:#8ad6ff; --ui-on-accent:#ffffff; --ui-primary:#086797; --ui-primary-hover:#07577f; --ui-control-line:#7f9eaf; --ui-shadow:0 16px 48px #00000066; --ui-scheme:dark; } html[data-game-theme] :is(#app,#gameScreen,#sidePanel,#editorPanel,#inventoryItemDialog,#leaderboardModal,#marketplaceModal,dialog,.pp-nursery,.pp-home,.tc-studio,.region-atlas,.ph-hub) { --theme-surface:var(--ui-paper)!important; --theme-card:var(--ui-card)!important; --theme-surface-soft:var(--ui-soft)!important; --theme-card-hover:var(--ui-hover)!important; --theme-text:var(--ui-ink)!important; --theme-muted:var(--ui-muted)!important; --theme-border:var(--ui-line)!important; --theme-accent:var(--ui-accent)!important; --theme-input:var(--ui-input)!important; --win-paper:var(--ui-paper)!important; --win-card:var(--ui-card)!important; --win-soft:var(--ui-soft)!important; --win-ink:var(--ui-ink)!important; --win-muted:var(--ui-muted)!important; --win-line:var(--ui-line)!important; --win-accent:var(--ui-accent)!important; --win-tint:var(--ui-tint)!important; --win-positive:var(--ui-positive)!important; --win-focus:var(--ui-focus)!important; --win-shadow:var(--ui-shadow)!important; --hud-ink:var(--ui-ink)!important; --hud-muted:var(--ui-muted)!important; --hud-blue:var(--ui-accent)!important; --hud-line:var(--ui-line)!important; --hud-shadow:var(--ui-shadow)!important; --home-ink:var(--ui-ink)!important; --bag-paper:var(--ui-paper)!important; --bag-card:var(--ui-card)!important; --bag-soft:var(--ui-soft)!important; --bag-ink:var(--ui-ink)!important; --bag-muted:var(--ui-muted)!important; --bag-line:var(--ui-line)!important; --bag-accent:var(--ui-accent)!important; --bag-tint:var(--ui-tint)!important; --ph-ink:var(--ui-ink)!important; --ph-muted:var(--ui-muted)!important; --ph-blue:var(--ui-accent)!important; --ph-line:var(--ui-line)!important; --ph-ice:var(--ui-paper)!important; --ph-soft:var(--ui-soft)!important; --ra-ink:var(--ui-ink)!important; --ra-muted:var(--ui-muted)!important; --ra-line:var(--ui-line)!important; --ra-blue:var(--ui-accent)!important; color-scheme:var(--ui-scheme)!important; } html[data-game-theme] :is(#sidePanel,#editorPanel,#marketplaceModal,#tradeDialog,#worldChannelConfirm,#dialogueDialog,#socialInvite,#pvpInvite,#professorTransferDialog,#starterDialog,#questOfferV57,#controlsTutorial,.tc-studio,.pp-nursery,.pp-home) { background-color:var(--ui-paper)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; box-shadow:var(--ui-shadow)!important; } html[data-game-theme] :is(#sidePanel,dialog) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea) { background-color:var(--ui-input)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; caret-color:var(--ui-ink); } html[data-game-theme] :is(#gameScreen,dialog) ::placeholder { color:var(--ui-muted)!important; opacity:1; } html[data-game-theme] :is(#gameScreen,dialog) :is(input,select,textarea,button,summary,[tabindex]):focus-visible { outline:3px solid var(--ui-focus)!important; outline-offset:2px!important; } html[data-game-theme] :is(#gameScreen,dialog) :is(input[type=checkbox],input[type=radio],input[type=range]) { accent-color:var(--ui-primary); } html[data-game-theme] :is(#gameScreen,dialog) :is(button,input,select,textarea) { font-family:inherit!important; } html[data-game-theme] :is(#gameScreen,dialog) ::selection { background:var(--ui-tint); color:var(--ui-ink); } /* Keep all reviewed HUD geometry, touch targets, stacking and visibility rules. */ html[data-game-theme] #gameScreen :is(#worldMinimapShell,#notificationCenter,#notificationCenterButton,.world-wallet,.world-rail,.mobile-dock,.quest-widget,.desktop-more-menu,.mobile-more-menu,.hud-context,#worldMinimapChannelMenu,.home-world-tools,.chat-head) { background:var(--ui-paper)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #gameScreen :is(#worldMinimapTitle,#worldMinimapChannel,#worldMinimapChannelButton,.world-wallet b,.world-rail button,.mobile-dock button,.desktop-more-menu button,.quest-widget b,.quest-widget-title,.notice-entry h3,.notice-detail h2,.notice-detail h3,.notice-detail b,.notice-tabs button,.notice-head h2,.notice-head b) { color:var(--ui-ink)!important; } html[data-game-theme] #gameScreen :is(#worldPlayerLevel,.player-chip-progress>em,.quest-widget small,.quest-widget p,.hud-context p,.notice-entry p,.notice-entry small,.notice-entry time,.notice-detail p,.notice-detail li,.notice-detail small,.notice-tools span,.notice-empty,.notice-head small) { color:var(--ui-muted)!important; } html[data-game-theme] #gameScreen :is(#worldMinimapZoom,#worldMinimapWeatherIcon,#worldMinimapCollapse,.world-wallet-add,.world-wallet-currency>button,.world-minimap-channel-population,.quest-widget-meta span,.notice-entry,.notice-detail,.notice-tabs,.notice-tools,.notice-head-actions button,.notice-head button,.hud-context header button) { background-color:var(--ui-soft)!important; border-color:var(--ui-line)!important; color:var(--ui-ink)!important; } html[data-game-theme] #gameScreen :is(#worldMinimapZoom button,.notice-entry button,.notice-tools button,.notice-detail button,.notice-tabs button) { color:var(--ui-ink)!important; } html[data-game-theme] #gameScreen :is(.notice-tabs button[aria-pressed=true],.world-rail button.is-active,.mobile-dock button.is-active) { background:var(--ui-tint)!important; color:var(--ui-accent)!important; border-color:var(--ui-accent)!important; } html[data-game-theme] #gameScreen #worldMinimapPing { background:var(--ui-positive-bg)!important; color:var(--ui-positive)!important; } html[data-game-theme] #gameScreen #worldMinimapPing.is-medium { background:var(--ui-warning-bg)!important; color:var(--ui-warning)!important; } html[data-game-theme] #gameScreen #worldMinimapPing.is-bad { background:var(--ui-danger-bg)!important; color:var(--ui-danger)!important; } html[data-game-theme] #gameScreen #worldMinimapPing.is-unknown { background:var(--ui-soft)!important; color:var(--ui-muted)!important; } html[data-game-theme] #gameScreen #notificationCenterBadge { border-color:var(--ui-paper)!important; } html[data-game-theme] #gameScreen :is([data-faction-choose],[data-clan-create]) { background:var(--ui-primary)!important; color:var(--ui-on-accent)!important; } html[data-game-theme] #gameScreen :is([data-faction-choose],[data-clan-create]):disabled { background:var(--ui-soft)!important; color:var(--ui-muted)!important; } html[data-game-theme] #gameScreen #worldMinimapZoom :is(button,output) { background:var(--ui-soft)!important; color:var(--ui-ink)!important; } html[data-game-theme] #gameScreen .world-rail { border-color:var(--ui-line)!important; } html[data-game-theme] #gameScreen :is(.desktop-dock,.desktop-nav,.desktop-nav-panel,.desktop-more-popover,.mobile-nav,.mobile-navigation,.mobile-more-popover) { background:var(--ui-paper)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #gameScreen .desktop-dock :is(button,b) { color:var(--ui-ink)!important; } html[data-game-theme] #gameScreen .desktop-dock button.is-active { background:var(--ui-tint)!important; color:var(--ui-accent)!important; } html[data-game-theme] #gameScreen .qj-shell { color:var(--ui-ink)!important; } html[data-game-theme] #gameScreen :is(.qj-list,.qj-pane,.qj-detail,.qj-empty,.qj-tracking,.qj-track-empty,.qj-list-empty,.qj-header>button,.qj-toolbar nav button,.qj-mode button) { background:var(--ui-card)!important; border-color:var(--ui-line)!important; color:var(--ui-ink)!important; } html[data-game-theme] #gameScreen :is(.qj-header h2,.qj-tracking b,.qj-toolbar button,.qj-toolbar button span,.qj-header>button,.qj-mode button,.qj-mode em,.qj-list-empty,.qj-empty p,.qj-tracking small,.qj-track-empty span,.qj-header small) { color:var(--ui-muted)!important; } html[data-game-theme] #gameScreen .qj-header h2 { color:var(--ui-ink)!important; } html[data-game-theme] #gameScreen :is(.qj-toolbar button[aria-pressed=true],.qj-mode button[aria-pressed=true]) { background:var(--ui-tint)!important; color:var(--ui-accent)!important; } html[data-game-theme] #gameScreen :is(.qj-toolbar nav span,.qj-mode em) { background:var(--ui-soft)!important; } html[data-game-theme] #sidePanel :is(.progression-hero-v2761,.factions-hero-v2761)>strong { color:var(--ui-ink)!important; background:var(--ui-soft)!important; } html[data-game-theme] #sidePanel .progression-tabs-v2761 em { background:var(--ui-primary)!important; color:white!important; } html[data-game-theme] #sidePanel .audio-setting-control output { color:var(--ui-accent)!important; } html[data-game-theme] #sidePanel .transition-setting { background:var(--ui-soft)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #sidePanel .transition-setting small { color:var(--ui-muted)!important; } html[data-game-theme] #sidePanel .genetics-lab-window :is(.lab-gene-rule,.lab-compatibility,.lab-breeding-facts>span,.lab-incubator-slot,.lab-clinic-card,.lab-shop-card) { background:var(--ui-card)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #sidePanel .genetics-lab-window :is(.lab-section-heading small,.lab-parent-grid label>span,.lab-breeding-facts small,.lab-section-note,.lab-compatibility p,.lab-incubator-slot small,.lab-clinic-card small,.lab-shop-card small,.lab-shop-card p) { color:var(--ui-muted)!important; } html[data-game-theme] #sidePanel .genetics-lab-window :is(.lab-gene-rule b,.lab-breeding-facts b,.lab-compatibility b,.lab-incubator-slot b,.lab-shop-card b) { color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel .lab-section-heading em { background:var(--ui-tint)!important; color:var(--ui-accent)!important; } html[data-game-theme] #sidePanel .lab-compatibility.is-success { background:var(--ui-positive-bg)!important; } html[data-game-theme] #sidePanel .lab-compatibility.is-error { background:var(--ui-danger-bg)!important; } html[data-game-theme] #sidePanel .lab-primary-action { background:var(--ui-primary)!important; color:white!important; } html[data-game-theme] #inventoryItemDialog .inventory-item-dialog-v2740__actions button.is-primary { background:var(--ui-primary)!important; color:white!important; } html[data-game-theme] #inventoryItemDialog .inventory-item-dialog-v2740__actions button.is-danger { background:var(--ui-danger-bg)!important; color:var(--ui-danger)!important; } html[data-game-theme] #inventoryItemDialog .inventory-item-dialog-v2740__actions button.is-favorite { background:var(--ui-warning-bg)!important; color:var(--ui-warning)!important; } /* Standings use their own theme variables and gold/silver/bronze podium. */ html[data-game-theme] #sidePanel :is(.exp-roster,.exp-roster-head,.exp-roster-summary,.exp-roster-note,.exp-roster-card) { color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel :is(.exp-roster-member,.exp-roster-member>header,.exp-roster-member>footer,.exp-roster-view) { background:var(--ui-card)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #sidePanel .exp-roster :is(h1,h2,h3,b,strong):not(.pokemon-type-badge *) { color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel .exp-roster :is(small,em,span):not(.pokemon-type-badge *):not(.exp-roster-lead) { color:var(--ui-muted)!important; } html[data-game-theme] #sidePanel :is(.ra-sidebar,.ra-legend,.ra-current-location,.ra-zoom,.ra-current-location>span) { background:var(--ui-card)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #sidePanel .ra-zoom output { color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel :is(.ra-current-location small,.ra-note,.ra-sidebar p) { color:var(--ui-muted)!important; } html[data-game-theme] #sidePanel .ra-primary { background:var(--ui-primary)!important; color:white!important; } html[data-game-theme] #sidePanel .ra-sidebar i { background:var(--ui-positive-bg)!important; color:var(--ui-positive)!important; } html[data-game-theme] #sidePanel .dc-capture--owned { background:var(--ui-positive-bg)!important; color:var(--ui-positive)!important; } html[data-game-theme] :is(.pp-nursery,.pp-home) :is(p,small,dt,.nr-note,.nr-move-hint,.nr-mon-copy em,.nr-pagination>span) { color:var(--ui-muted)!important; } html[data-game-theme] .pp-nursery :is(.nr-mon,.nr-mon.is-shiny,.nr-shop-card,.nr-shop-intro,.nr-header,.nr-footer,.nr-tabs,.nr-details,.nr-filters,.nr-group-manager) { background:var(--ui-card)!important; border-color:var(--ui-line)!important; } html[data-game-theme] .pp-nursery .nr-mon.is-selected { background:var(--ui-tint)!important; border-color:var(--ui-accent)!important; } html[data-game-theme] .pp-home :is(.home-header,.home-footer,.home-aside,.home-catalog article,.home-aside article) { background:var(--ui-card)!important; border-color:var(--ui-line)!important; } html[data-game-theme] .pp-home .home-primary { background:var(--ui-primary)!important; color:white!important; } html[data-game-theme] .pp-home :is(.home-zoom,.home-confirm) { background:var(--ui-soft)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #sidePanel .tc-partner>span { background:var(--ui-card)!important; color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel .tc-partner small { color:var(--ui-muted)!important; } /* Paired semantic chips keep their authored type hue, with dark text on pale fill. */ html[data-game-theme] :is(#sidePanel,.pp-nursery,.pp-home) .pokemon-type-badge, html[data-game-theme] :is(#sidePanel,.pp-nursery,.pp-home) .pokemon-type-badge b, html[data-game-theme] #sidePanel .dc-card-types>span { color:#193b50!important; } html[data-game-theme] :is(#sidePanel,.pp-nursery,.pp-home) .pokemon-type-badge { background:color-mix(in srgb,var(--type-color) 12%,white)!important; } html[data-game-theme] #sidePanel .dc-type-popover { background:var(--ui-paper)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #sidePanel .ph-roster button>b { background:var(--ui-primary)!important; color:white!important; } html[data-game-theme] #sidePanel .ph-mastery-inline { background:var(--ui-tint)!important; color:var(--ui-accent)!important; } html[data-game-theme] #sidePanel .dd-ranks button[aria-pressed=true] { background:var(--ui-primary)!important; color:white!important; } html[data-game-theme] .tc-studio [data-tc-save] { background:var(--ui-primary)!important; color:white!important; } html[data-game-theme] .tc-studio [data-cb-save] { background:var(--ui-primary)!important; color:white!important; } html[data-game-theme] #gameScreen :is(#worldPlayerLevel,.player-chip-progress>em) { color:white!important; text-shadow:0 1px 3px #071a23; } html[data-game-theme] #notificationCenter>header { background:var(--ui-paper)!important; } html[data-game-theme] #notificationCenter>header h2 { color:var(--ui-ink)!important; } html[data-game-theme] #notificationCenter>header small { color:var(--ui-positive)!important; } html[data-game-theme] #notificationCenter :is(.notice-entry-meta,.notice-entry-meta span,.notice-read,.notice-release footer) { color:var(--ui-muted)!important; } html[data-game-theme] #notificationCenter :is(.notice-tabs button,.notice-entry-actions button,.notice-entry-actions a,header>button) { background:var(--ui-soft)!important; color:var(--ui-ink)!important; } html[data-game-theme] #notificationCenter :is(.notice-tabs button[aria-pressed=true],.notice-tools [aria-pressed=true]) { background:var(--ui-tint)!important; color:var(--ui-accent)!important; } html[data-game-theme] #notificationCenter .notice-tabs i { background:#b93249!important; color:white!important; } html[data-game-theme] #notificationCenter .notice-connection { background:var(--ui-warning-bg)!important; color:var(--ui-warning)!important; } html[data-game-theme] #sidePanel :is(.qj-tracking header span,.qj-tracking .is-vacant span,.qj-categories em,.qj-category-tabs em) { color:var(--ui-muted)!important; } html[data-game-theme] #sidePanel .qj-empty h2 { color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel .qj-category-tabs em { background:var(--ui-soft)!important; } html[data-game-theme] #sidePanel :is(.progression-branch-v2761>header>strong,.progression-card-v2761>header>strong) { color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel :is(.ra-trainer small,.ra-header h2) { color:var(--ui-muted)!important; } html[data-game-theme] #sidePanel .ra-current-location b { color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel .ra-trainer b { color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel .qj-categories em { background:var(--ui-soft)!important; } html[data-game-theme] #sidePanel .talent-branch-v2761>header>strong { color:var(--ui-ink)!important; } html[data-game-theme] #gameScreen #worldMinimapPingValue { color:inherit!important; } html[data-game-theme] #sidePanel :is(.ra-map-controls,.ra-map-controls button,.ra-map-controls output) { background:var(--ui-paper)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #sidePanel .ph-stat-row { background:var(--ui-card)!important; box-shadow:inset 0 0 0 1px var(--ui-line)!important; } html[data-game-theme] #sidePanel :is(.ph-nature-effects .is-up,.ps-gates .is-met) { color:var(--ui-positive)!important; } html[data-game-theme] #sidePanel .ph-nature-effects .is-down { color:var(--ui-danger)!important; } html[data-game-theme] #sidePanel .ph-gene-cell b { color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel :is(.ps-effects>div,.dd-effects>div) { background:var(--ui-soft)!important; color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel :is(.ps-upgrade>div>span,.ps-upgrade>div>b,.ps-upgrade>div>div>b,.ps-gates span) { color:var(--ui-muted)!important; } html[data-game-theme] #sidePanel .dd-dossier :is(h3,dd,dd small,.dd-stat-value,.pc-size-detail b,.pe-form-open b,.pe-resource b) { color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel .dd-dossier :is(.pc-gender-labels span,.dd-move-heading small,.dd-effects small) { color:var(--ui-muted)!important; } html[data-game-theme] #sidePanel .dd-ranks button { background:var(--ui-soft)!important; color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel .dd-ranks button[aria-pressed=true] { background:var(--ui-primary)!important; color:white!important; } html[data-game-theme] .tc-studio .cb-frame-track button[aria-pressed=true] { background:var(--ui-primary)!important; color:white!important; } html[data-game-theme] .pp-nursery :is(.nr-party,.nr-plan,.nr-expander,.nr-confirm,.nr-upsell) { background:var(--ui-card)!important; border-color:var(--ui-line)!important; } html[data-game-theme] .pp-nursery button:not(.nr-mon-main):not(.nr-primary):not(:disabled) { background:var(--ui-soft)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] .pp-nursery .nr-tabs [aria-current=page]:not(:disabled) { background:var(--ui-tint)!important; color:var(--ui-accent)!important; } html[data-game-theme] .pp-nursery .nr-note.is-warning { background:var(--ui-warning-bg)!important; color:var(--ui-warning)!important; } html[data-game-theme] .pp-home button:not(.home-furniture):not(.home-plot):not(.home-primary) { background:var(--ui-soft)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] .pp-home .home-tabs button[aria-pressed=true] { background:var(--ui-tint)!important; color:var(--ui-accent)!important; border-color:var(--ui-accent)!important; } html[data-game-theme] .pp-home .home-plot span { background:var(--ui-paper)!important; color:var(--ui-ink)!important; } html[data-game-theme] .pp-home .home-plot.is-selected span { background:var(--ui-primary)!important; color:white!important; } html[data-game-theme] .pp-home .home-plot small { background:var(--ui-paper)!important; color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel .quest-journal-new :is(.qj-row,.qj-next,.qj-rewards>div>div,.qj-objectives li,.qj-progress-totals article,.qj-progress-categories button,.qj-completed-grid button) { background:var(--ui-card)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #sidePanel .quest-journal-new .qj-row.is-selected { background:var(--ui-tint)!important; border-color:var(--ui-accent)!important; } html[data-game-theme] #sidePanel .quest-journal-new :is(.qj-row-copy small,.qj-detail-title small,.qj-branch,.qj-rewards h3,.qj-next small,.qj-objectives header span,.qj-objectives li span,.qj-story summary,.qj-progress small) { color:var(--ui-muted)!important; } html[data-game-theme] #sidePanel .quest-journal-new :is(.qj-row-copy>b,.qj-detail-title h2,.qj-objectives h3,.qj-objectives li b,.qj-next b,.qj-rewards b) { color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel .quest-journal-new :is(.qj-state.is-completed,.qj-state.is-ready,.qj-next.is-completed,.qj-next.is-ready) { background:var(--ui-positive-bg)!important; color:var(--ui-positive)!important; } html[data-game-theme] #sidePanel .quest-journal-new :is(.qj-row-copy em,.qj-story p) { color:var(--ui-muted)!important; } html[data-game-theme] #sidePanel .ph-stat-row.is-up .ph-nature-mark { color:var(--ui-positive)!important; } html[data-game-theme] #sidePanel .ph-stat-row.is-down .ph-nature-mark { color:var(--ui-danger)!important; } html[data-game-theme] #sidePanel .ph-skill-modal :is(.ps-effects span,.ps-upgrade header span) { color:var(--ui-muted)!important; } html[data-game-theme] #sidePanel .ph-skill-modal .ps-upgrade b { color:var(--ui-positive)!important; } html[data-game-theme] #sidePanel .dd-dossier :is(.pc-size-detail span,.dd-stat-table th span) { color:var(--ui-ink)!important; } html[data-game-theme] #sidePanel .dd-section-head>span { color:var(--ui-muted)!important; } html[data-game-theme] .pp-nursery .nr-plan h3 { color:var(--ui-ink)!important; } html[data-game-theme] .tc-studio .cb-mobile-nav button[aria-pressed=true] { background:var(--ui-primary)!important; color:white!important; } html[data-game-theme] #chatPanel { --chat75-ink:var(--ui-ink)!important; --chat75-copy:var(--ui-ink)!important; --chat75-muted:var(--ui-muted)!important; --chat75-line:var(--ui-line)!important; --chat75-card:var(--ui-card)!important; --chat75-soft:var(--ui-soft)!important; --chat75-hover:var(--ui-hover)!important; --chat6-rail:var(--ui-tint)!important; --chat6-wall:var(--ui-paper)!important; --chat6-card:var(--ui-card)!important; --chat6-edge:var(--ui-line)!important; background:color-mix(in srgb,var(--ui-paper) calc(var(--chat-opacity,.98)*100%),transparent)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #chatPanel :is(.chat-conversation,.chat-log-wrap,.chat-log,.chat-message) { background:transparent!important; border-color:var(--ui-line)!important; } html[data-game-theme] #chatPanel :is(.chat-message-body>p,.chat-author-button,.chat-message-meta b,.chat-head button) { color:var(--ui-ink)!important; } html[data-game-theme] #chatPanel :is(.chat-message-meta time,.chat-message-meta small,.chat-message-more,.chat-deleted-copy,.chat-title-copy small) { color:var(--ui-muted)!important; } html[data-game-theme] #chatPanel :is(#chatChannelPicker,.chat-tabs button.is-active) { background:var(--ui-tint)!important; color:var(--ui-accent)!important; } html[data-game-theme] #chatPanel .chat-tabs .channel-players { background:var(--ui-soft)!important; color:var(--ui-ink)!important; } html[data-game-theme] #chatPanel :is(.chat-emoji-panel,.chat-config,.chat-popover,.chat-online-sidebar,.chat-player-directory,.chat-reply-preview,.chat-pokemon-suggest,#chatForm) { background:var(--ui-card)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #chatPanel :is(input,textarea) { background:var(--ui-input)!important; color:var(--ui-ink)!important; } html[data-game-theme] #chatPanel #chatOnlineCount { color:var(--ui-positive)!important; } html[data-game-theme] #chatPanel [data-reset-chat] { background:var(--ui-danger-bg)!important; color:var(--ui-danger)!important; } html[data-game-theme] #chatPanel :is(.chat-emoji-rail-button,.chat-emoji-modes button,.chat-emoji-categories button) { background:var(--ui-soft)!important; color:var(--ui-ink)!important; } html[data-game-theme] #chatPanel :is(.chat-emoji-modes button.is-active,.chat-emoji-categories button.is-active) { background:var(--ui-tint)!important; color:var(--ui-accent)!important; } html[data-game-theme] .pp-nursery .nr-plan>b { color:var(--ui-accent)!important; } html[data-game-theme] #marketplaceModal :is(.marketplace-head-stats span,.marketplace-head-stats b,.market-empty b) { color:var(--ui-ink)!important; } html[data-game-theme] .pt-dialog { background:var(--ui-paper)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] :is(.pt-dialog,.pt-entry) button { background:var(--ui-soft)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] .pt-dialog :is(header small,.pt-note,.pt-status) { color:var(--ui-muted)!important; } html[data-game-theme] .pt-dialog .pt-preview { background:var(--ui-card)!important; } html[data-game-theme] .pt-dialog :is([aria-pressed=true],[data-pt-world]) { background:var(--ui-primary)!important; color:white!important; } html[data-game-theme] #gameScreen .hero-self-actions { background:var(--ui-paper)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #gameScreen .hero-self-actions button { background:var(--ui-soft)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } /* Battle keeps the painted arena, status artwork and meter colours untouched. */ html[data-game-theme] #battleHud :is(.battle-card,.combat-live-controls,.combat-action-button,.combat-skills-panel,.combat-items-panel,.combat-energy,.battle-pause-status) { background:var(--ui-card)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #battleHud :is(.battle-card h3,.battle-card-head b,.battle-vital span>b,.battle-vital span>strong,.battle-vital span>small,.combat-skills-panel>header b,.combat-items-panel>header b,.combat-skill-name,.combat-energy small,.combat-energy b,.battle-pause-status>b) { color:var(--ui-ink)!important; } html[data-game-theme] #battleHud :is(.battle-card-head small,.combat-skill-tags .combat-skill-tag) { background:var(--ui-soft)!important; color:var(--ui-muted)!important; } html[data-game-theme] #battleHud .combat-skill-tags .combat-skill-tag b { color:var(--ui-ink)!important; } html[data-game-theme] #battleHud .combat-skill-cost { background:var(--ui-tint)!important; color:var(--ui-accent)!important; } html[data-game-theme] #battleHud .combat-skill-cost b { color:var(--ui-accent)!important; } html[data-game-theme] #battleHud .combat-utility-actions>button { background:var(--ui-soft)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #battleHud :is(#battleTacticsToggle[aria-expanded=true],#pauseBattle.is-active) { background:var(--ui-tint)!important; color:var(--ui-accent)!important; } html[data-game-theme] #battleHud .mobile-combat-tabs>button { background:var(--ui-soft)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #battleHud .mobile-combat-tabs>button[aria-selected=true] { background:var(--ui-tint)!important; color:var(--ui-accent)!important; } html[data-game-theme] #battleHud .mobile-combat-tabs>button>b { color:inherit!important; } html[data-game-theme] #battleHud #cancelBattle { background:var(--ui-danger-bg)!important; color:var(--ui-danger)!important; } html[data-game-theme] #battleHud #battleSwitchCooldown { background:var(--ui-positive-bg)!important; color:var(--ui-positive)!important; } html[data-game-theme] #battleHud #battleSwitchCooldown.is-cooling { background:var(--ui-warning-bg)!important; color:var(--ui-warning)!important; } html[data-game-theme] #battleHud .pokemon-type-badge { background:color-mix(in srgb,var(--type-color) 12%,white)!important; color:#193b50!important; } html[data-game-theme] #battleHud .pokemon-type-badge b { color:#193b50!important; } html[data-game-theme] #battleHud .battle-health>article { background:var(--ui-card)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #battleHud :is(.battle-fighter-identity header>b,.battle-exp span>b,.battle-exp span>small) { color:var(--ui-ink)!important; } html[data-game-theme] #battleHud .battle-fighter-identity header>em { background:var(--ui-soft)!important; color:var(--ui-ink)!important; } html[data-game-theme] #battleHud .battle-fighter-identity header>b { -webkit-text-fill-color:currentColor!important; } html[data-game-theme] #battleHud :is(.combat-action-button,.combat-item-button)>kbd { background:var(--ui-soft)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #battleHud .battle-tactics { background:var(--ui-paper)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #battleHud .battle-tactics>header { background:var(--ui-card)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #battleHud .battle-tactics>header button { background:var(--ui-soft)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #battleHud .battle-tactics :is(b,p,small,footer) { color:var(--ui-ink)!important; } html[data-game-theme] #battleHud .battle-tactic-modes>button { background:var(--ui-soft)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } html[data-game-theme] #battleHud .battle-tactic-modes>button[aria-pressed=true] { background:var(--ui-tint)!important; color:var(--ui-accent)!important; } /* Settings read as two real options, with keyboard focus and legible previews. */ html[data-game-theme] #sidePanel .theme-option { background:var(--ui-soft)!important; min-height:72px; } html[data-game-theme] #sidePanel .theme-option:has(input:checked) { background:var(--ui-tint)!important; border-color:var(--ui-accent)!important; } html[data-game-theme] #sidePanel .theme-option:has(input:focus-visible) { outline:3px solid var(--ui-focus); outline-offset:2px; } html[data-game-theme] #sidePanel .theme-option>b { color:var(--ui-ink)!important; font-size:14px!important; } html[data-game-theme] #sidePanel .theme-option>small { color:var(--ui-muted)!important; font-size:12px!important; } html[data-game-theme] #sidePanel .theme-settings>header>b { color:var(--ui-ink)!important; font-size:15px!important; } html[data-game-theme] #sidePanel .theme-settings>header>small { color:var(--ui-muted)!important; font-size:12px!important; } html[data-game-theme] #sidePanel .theme-option:has(input:checked)::after { background:var(--ui-primary)!important; color:white!important; } @media(max-width:480px) { html[data-game-theme] #sidePanel .theme-settings>header { align-items:flex-start; flex-direction:column; } html[data-game-theme] #sidePanel .theme-settings>header>small { text-align:left; } } @media(max-width:760px),(pointer:coarse) and (max-height:560px) { html[data-game-theme] #gameScreen #worldMinimapShell { background:transparent!important; border-color:transparent!important; box-shadow:none!important; } html[data-game-theme] #gameScreen .world-minimap-bottombar { background:var(--ui-paper)!important; color:var(--ui-ink)!important; border-color:var(--ui-line)!important; } } } /* R16: the same surfaces and control states also cover detached native windows. */ @layer ui-theme { html[data-game-theme] :is(.first-run-settings,.kanto-tool-dialog,.tc-gift-dialog,.club-bar-dialog,.club-music-dialog) button { border:1px solid var(--ui-control-line)!important;min-height:44px!important;min-width:44px; } html[data-game-theme] :is(.first-run-settings,.kanto-tool-dialog,.tc-gift-dialog,.club-bar-dialog,.club-music-dialog) button:disabled { background:var(--ui-soft)!important;color:var(--ui-muted)!important;border-color:var(--ui-line)!important;opacity:1!important;box-shadow:none!important; } html[data-game-theme] :is(.first-run-settings,.tc-gift-dialog) button:not(:disabled):not(.first-run-primary):not([data-gift-send]):hover, html[data-game-theme] .kanto-tool-dialog :is([data-tool-close],.kanto-tool-loadout button):not(:disabled):hover { background:var(--ui-hover)!important;color:var(--ui-ink)!important; } html[data-game-theme] :is(.first-run-primary,[data-gift-send],.kanto-tool-stock button):not(:disabled):hover { background:var(--ui-primary-hover)!important;color:var(--ui-on-accent)!important; } html[data-game-theme] :is(.first-run-primary,[data-gift-send],.kanto-tool-stock button):not(:disabled) { border-color:var(--ui-primary)!important; } html[data-game-theme] #app[data-screen=game] #toast { background:var(--ui-card)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line);box-shadow:var(--ui-shadow); } } /* Club controls share the window palette; the illustrated player and drink art keep their authored colours. */ @layer ui-theme { html[data-game-theme] :is(.club-bar-dialog,.club-music-dialog){background:var(--ui-paper)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important;box-shadow:var(--ui-shadow)!important} html[data-game-theme] :is(.club-music-head,.club-bar-dialog header){background:var(--ui-paper)!important;color:var(--ui-ink)!important} html[data-game-theme] :is(.club-bar-status,.club-drinks article){background:var(--ui-card)!important;border-color:var(--ui-line)!important} html[data-game-theme] :is(.club-bar-dialog header p,.club-bar-hint,.club-drinks p,.club-order-hint,.club-track small,.club-track-number,.club-queue small,.club-queue p,.club-credits,.club-wallet span){color:var(--ui-muted)!important} html[data-game-theme] :is(.club-bar-dialog header small,.club-music-head small,.club-feedback,.club-bar-feedback,.club-wallet){color:var(--ui-accent)!important} html[data-game-theme] .club-wallet b{color:var(--ui-ink)!important} html[data-game-theme] .club-drinks strong{color:var(--ui-positive)!important} html[data-game-theme] :is(.club-music-head>button,.club-bar-dialog header button,.club-track button){background:var(--ui-soft)!important;color:var(--ui-ink)!important;min-width:44px;min-height:44px} html[data-game-theme] :is(.club-music-head>button,.club-bar-dialog header button,.club-track button):not(:disabled):hover{background:var(--ui-hover)!important} html[data-game-theme] :is(.club-track,.club-queue,.club-queue .club-fine){border-color:var(--ui-line)!important} html[data-game-theme] .club-queue h3 span{background:var(--ui-tint)!important;color:var(--ui-accent)!important} html[data-game-theme] .club-credits a{color:var(--ui-accent)!important} html[data-game-theme] .club-drinks button:not(:disabled){background:var(--ui-primary)!important;color:var(--ui-on-accent)!important;border-color:var(--ui-primary)!important;min-height:44px} html[data-game-theme] .club-drinks button:not(:disabled):hover{background:var(--ui-primary-hover)!important} } @layer ui-theme { html[data-game-theme] :is(#sidePanel,dialog) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea):disabled{background-color:var(--ui-soft)!important;color:var(--ui-muted)!important;border-color:var(--ui-line)!important;opacity:1} html[data-game-theme] :is(#sidePanel,dialog) :is(input,select,textarea)[aria-invalid=true]{border-color:var(--ui-danger)!important} } /* R17: active collection windows. No scene/art/geometry rules. */ @layer ui-theme { /* Inventory aliases are one-way in inventory-refinement.css, including the body-mounted slot dialog. This scope also reaches the mobile native bag. */ html[data-game-theme] :is(#sidePanel.is-inventory-panel,#sidePanel.is-trainer-clothing-panel,#inventoryItemDialog,.ir-slot-picker) button:disabled, html[data-game-theme] .pp-nursery button:disabled { background:var(--ui-soft)!important; color:var(--ui-muted)!important; border-color:var(--ui-line)!important; opacity:1!important; cursor:not-allowed; } html[data-game-theme] :is(#sidePanel.is-inventory-panel,#sidePanel.is-trainer-clothing-panel,#inventoryItemDialog,.ir-slot-picker) button:disabled :is(b,strong,small,span), html[data-game-theme] .pp-nursery button:disabled :is(b,strong,small,span) { color:inherit!important; } html[data-game-theme] .ir-slot-picker :is(input,button):focus-visible, html[data-game-theme] .ir-restore:focus-visible { outline:3px solid var(--ui-focus)!important; outline-offset:2px!important; } /* Keep party artwork, its separate info action, HP/type/rarity colours intact. */ html[data-game-theme] .pp-nursery button:where(:not(.nr-primary):not(.nr-shop-card button)):hover:not(:disabled):not(.nr-mon-main):not(.nr-info) { background:var(--ui-hover)!important; border-color:var(--ui-control-line)!important; } html[data-game-theme] .pp-nursery :is(.nr-primary,.nr-shop-card button):not(:disabled) { background:var(--ui-primary)!important; color:var(--ui-on-accent)!important; border-color:var(--ui-primary)!important; } html[data-game-theme] .pp-nursery :is(.nr-primary,.nr-shop-card button):hover:not(:disabled) { background:var(--ui-primary-hover)!important; color:var(--ui-on-accent)!important; border-color:var(--ui-primary-hover)!important; } html[data-game-theme] .pp-nursery .nr-tabs [aria-current=page]:not(:disabled) { background:var(--ui-tint)!important; color:var(--ui-accent)!important; border-color:var(--ui-accent)!important; } html[data-game-theme] .pp-nursery .nr-tabs [aria-current=page]:hover:not(:disabled) { background:var(--ui-tint)!important; border-color:var(--ui-accent)!important; } html[data-game-theme] .pp-nursery .nr-capacity.is-full b { color:var(--ui-danger)!important; } /* Group labels retain six distinct hues and the actual group names. */ html[data-game-theme=light] .pp-nursery { --nr-purple-ink:#7546a7; --nr-purple-bg:#f0eafa; --nr-rose-ink:#9a345c; --nr-rose-bg:#ffeaf1; --nr-green-ink:#3e681e; --nr-green-bg:#ebf5df; } html[data-game-theme=dark] .pp-nursery { --nr-purple-ink:#d7bbff; --nr-purple-bg:#39294d; --nr-rose-ink:#ffb6d3; --nr-rose-bg:#492c3a; --nr-green-ink:#b8df8b; --nr-green-bg:#2b4024; } html[data-game-theme] .pp-nursery .nr-tone-teal { background:var(--ui-positive-bg)!important; color:var(--ui-positive)!important; } html[data-game-theme] .pp-nursery .nr-tone-blue { background:var(--ui-tint)!important; color:var(--ui-accent)!important; } html[data-game-theme] .pp-nursery .nr-tone-purple { background:var(--nr-purple-bg)!important; color:var(--nr-purple-ink)!important; } html[data-game-theme] .pp-nursery .nr-tone-rose { background:var(--nr-rose-bg)!important; color:var(--nr-rose-ink)!important; } html[data-game-theme] .pp-nursery .nr-tone-gold { background:var(--ui-warning-bg)!important; color:var(--ui-warning)!important; } html[data-game-theme] .pp-nursery .nr-tone-green { background:var(--nr-green-bg)!important; color:var(--nr-green-ink)!important; } html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-workshop.is-home-editor .editor-offer-button:disabled :is(b,strong,small,span) { color:inherit!important; } } /* pk-style-source:15 */ /* /actor-actions-v2920.css */ /* Compact frameless actor actions. Reuse authored raster icons, never tint art. */ @layer ui-theme { html[data-game-theme] #gameScreen .actor-actions { position:fixed!important; z-index:112!important; left:var(--action-wheel-x,50%)!important; top:var(--action-wheel-y,50%)!important; bottom:auto!important; width:282px!important; height:auto!important; max-height:none!important; display:grid!important; grid-template-columns:repeat(3,90px)!important; gap:6px!important; padding:52px 0 0!important; margin:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; filter:none!important; overflow:visible!important; transform:translate(-50%,-50%)!important; color:var(--ui-ink)!important; font:13px/1.2 'Segoe UI',sans-serif!important; pointer-events:none!important; transition:none!important; } html[data-game-theme] #gameScreen .actor-actions[hidden],html[data-game-theme] #gameScreen #playerActionWheel.actor-actions:not(.is-open) { display:none!important; } html[data-game-theme] #gameScreen .actor-actions .hero-self-grid { display:contents!important; } html[data-game-theme] #gameScreen .actor-actions button { pointer-events:auto!important; cursor:pointer; } html[data-game-theme] #gameScreen .actor-actions .actor-action { position:relative!important; inset:auto!important; transform:none!important; width:90px!important; height:90px!important; min-height:44px!important; display:block!important; padding:0!important; margin:0!important; border:0!important; border-radius:50%!important; background:transparent!important; box-shadow:none!important; color:var(--ui-ink)!important; opacity:1!important; filter:none!important; transition:none!important; } html[data-game-theme] #gameScreen .actor-action__circle { display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:2px!important; width:100%!important; height:100%!important; box-sizing:border-box!important; padding:7px!important; border-radius:50%!important; border:1px solid var(--ui-line)!important; background:var(--ui-paper)!important; box-shadow:0 3px 10px #092f452b!important; } html[data-game-theme] #gameScreen .actor-action__label { display:grid!important; place-items:center!important; padding:0!important; margin:0!important; width:72px!important; max-width:100%!important; min-height:26px!important; flex:none!important; height:auto!important; max-height:none!important; background:transparent!important; color:var(--ui-ink)!important; border:0!important; border-radius:0!important; font:600 12px/13px 'Segoe UI',sans-serif!important; text-align:center!important; box-shadow:none!important; overflow-wrap:anywhere!important; } html[data-game-theme] #gameScreen .actor-action:disabled .actor-action__circle { background:var(--ui-soft)!important; border-style:dashed!important; box-shadow:none!important; } html[data-game-theme] #gameScreen .actor-action:disabled .actor-action-art { opacity:.5; } html[data-game-theme] #gameScreen .actor-action:disabled .actor-action__label { color:var(--ui-muted)!important; } html[data-game-theme] #gameScreen .actor-action:hover:not(:disabled) .actor-action__circle { border-color:var(--ui-focus)!important; background:var(--ui-tint)!important; } html[data-game-theme] #gameScreen .actor-action:focus-visible { outline:none!important; } html[data-game-theme] #gameScreen .actor-action:focus-visible .actor-action__circle { outline:3px solid var(--ui-focus)!important; outline-offset:2px!important; } html[data-game-theme] #gameScreen .actor-action[data-hero-emote="stop"] .actor-action__circle { background:var(--ui-danger-bg)!important; color:var(--ui-danger)!important; } html[data-game-theme] #gameScreen .actor-actions .actor-action-center { position:absolute!important; left:auto!important; right:0!important; top:0!important; bottom:auto!important; transform:none!important; width:44px!important; height:44px!important; min-height:44px!important; display:grid!important; place-items:center!important; padding:4px!important; margin:0!important; border:1px solid var(--ui-line)!important; border-radius:50%!important; background:var(--ui-paper)!important; box-shadow:0 2px 8px #092f4524!important; color:var(--ui-ink)!important; } html[data-game-theme] #gameScreen .actor-action-center:focus-visible,html[data-game-theme] #gameScreen .actor-action-pages button:focus-visible { outline:3px solid var(--ui-focus)!important; outline-offset:2px!important; } html[data-game-theme] #gameScreen .actor-action-center > span { display:none!important; } html[data-game-theme] #gameScreen .actor-actions .actor-action-heading { position:absolute!important; left:0!important; top:6px!important; bottom:auto!important; transform:none!important; display:block!important; width:max-content!important; max-width:calc(100% - 62px)!important; box-sizing:border-box!important; margin:0!important; padding:8px 12px!important; border-radius:20px!important; background:var(--ui-paper)!important; color:var(--ui-ink)!important; font:700 12px/16px 'Segoe UI',sans-serif!important; box-shadow:0 2px 8px #092f4524!important; text-align:left!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } /* Routine guidance remains accessible without another floating pill. */ html[data-game-theme] #gameScreen .actor-actions .actor-action-hint { position:absolute!important; inset:auto!important; transform:none!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important; } html[data-game-theme] #gameScreen .actor-actions[data-action-notice] .actor-action-hint { position:relative!important; grid-column:1/-1!important; width:auto!important; height:auto!important; margin:2px 0 0!important; padding:8px 10px!important; clip-path:none!important; white-space:normal!important; background:var(--ui-paper)!important; border:1px solid var(--ui-line)!important; border-radius:14px!important; color:var(--ui-ink)!important; font:12px/16px 'Segoe UI',sans-serif!important; text-align:center!important; } html[data-game-theme] #gameScreen .actor-actions .actor-action-symbol { width:24px!important; height:24px!important; } html[data-game-theme] #gameScreen .actor-action-art { display:block!important; flex:none!important; width:38px!important; height:38px!important; background-image:url('/assets/actor-actions-v2920/actions.webp')!important; background-repeat:no-repeat!important; background-size:500% 200%!important; } html[data-game-theme] #gameScreen .actor-action[data-action-long] .actor-action-art { width:28px!important; height:28px!important; } html[data-game-theme] #gameScreen .actor-action[data-action-long] .actor-action__label { display:-webkit-box!important; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden!important; font:600 11px/12px 'Segoe UI',sans-serif!important; } .actor-action-art.is-wave {background-position:0 0}.actor-action-art.is-dance{background-position:25% 0}.actor-action-art.is-sit{background-position:50% 0}.actor-action-art.is-pokemon{background-position:75% 0}.actor-action-art.is-profile{background-position:100% 0}.actor-action-art.is-friend{background-position:0 100%}.actor-action-art.is-party{background-position:25% 100%}.actor-action-art.is-trade{background-position:50% 100%}.actor-action-art.is-battle{background-position:75% 100%}.actor-action-art.is-message{background-position:100% 100%} html[data-game-theme] #gameScreen .actor-actions .actor-action-pages { grid-column:1/-1!important; display:flex!important; gap:8px!important; align-items:center!important; justify-content:center!important; position:relative!important; inset:auto!important; transform:none!important; margin:2px 0 0!important; } html[data-game-theme] #gameScreen .actor-action-pages button { width:44px!important; height:44px!important; border:1px solid var(--ui-line)!important; border-radius:50%!important; background:var(--ui-paper)!important; color:var(--ui-ink)!important; } html[data-game-theme] #gameScreen .actor-action-pages span { background:var(--ui-paper)!important; border-radius:16px!important; padding:5px 8px!important; color:var(--ui-muted)!important; font:12px/16px 'Segoe UI',sans-serif!important; } /* Legacy all-property transitions must not delay restoring navigation or focus. */ html[data-game-theme] #gameScreen :is(#worldTeamQuick,#desktopDock,#testerLauncher),html[data-game-theme] #gameScreen :is(#worldTeamQuick,#desktopDock,#testerLauncher) * { transition-property:opacity,transform,background-color,border-color,color!important; } html[data-game-theme] #gameScreen:has(.hero-self-actions[data-action-clear-dock]:not([hidden]),#playerActionWheel[data-action-clear-dock].is-open) :is(#worldTeamQuick,#desktopDock,#testerLauncher),html[data-game-theme] #gameScreen:has(.hero-self-actions[data-action-clear-dock]:not([hidden]),#playerActionWheel[data-action-clear-dock].is-open) :is(#worldTeamQuick,#desktopDock,#testerLauncher) * { visibility:hidden!important; pointer-events:none!important; } @media(max-width:760px),(max-height:560px),(pointer:coarse) and (max-height:600px) { html[data-game-theme] #gameScreen .actor-actions { left:50%!important; top:auto!important; bottom:calc(116px + env(safe-area-inset-bottom,0px))!important; width:270px!important; grid-template-columns:repeat(3,86px)!important; transform:translateX(-50%)!important; } html[data-game-theme] #gameScreen .actor-actions .actor-action { width:86px!important; height:86px!important; } html[data-game-theme] #gameScreen .actor-action__label { width:68px!important; } } @media(max-height:500px) and (min-width:600px) { html[data-game-theme] #gameScreen:has(#playerActionWheel.is-open) :is(.world-topbar,#worldMinimapShell,#questWidget,#mobileQuestLauncher,#worldTeamQuick,.hero-floor-action,#contextAction,#testerLauncher),html[data-game-theme] #gameScreen:has(#playerActionWheel.is-open) :is(.world-topbar,#worldMinimapShell,#questWidget,#mobileQuestLauncher,#worldTeamQuick,.hero-floor-action,#contextAction,#testerLauncher) * { visibility:hidden!important; pointer-events:none!important; } html[data-game-theme] #gameScreen .actor-actions { width:546px!important; grid-template-columns:repeat(6,86px)!important; gap:6px!important; bottom:calc(96px + env(safe-area-inset-bottom,0px))!important; } html[data-game-theme] #gameScreen .actor-actions:has(.actor-action-pages) { padding-top:52px!important; } html[data-game-theme] #gameScreen .actor-actions .actor-action-pages { position:absolute!important; top:0!important; left:auto!important; right:54px!important; margin:0!important; } html[data-game-theme] #gameScreen .actor-actions:has(.actor-action-pages) .actor-action-heading { max-width:calc(100% - 220px)!important; } } } /* pk-style-source:16 */ /* /hero-self-actions-v2.css */ /* Compact contextual choices; the trainer remains visible in the world. */ @layer ui-theme { html[data-game-theme] #gameScreen .hero-self-actions.actor-actions{position:fixed!important;z-index:112!important;left:var(--action-wheel-x,50%)!important;top:var(--action-wheel-y,50%)!important;bottom:auto!important;transform:translate(-50%,-50%)!important;display:flex!important;flex-direction:column!important;gap:6px!important;width:min(286px,calc(100vw - 24px))!important;height:auto!important;max-height:calc(100dvh - 110px)!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;filter:none!important;overflow:visible!important;pointer-events:none!important;color:var(--ui-ink)!important;font:13px/1.4 "Segoe UI",sans-serif!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions[hidden]{display:none!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions button{pointer-events:auto!important;cursor:pointer!important;box-sizing:border-box!important;min-height:44px!important;color:var(--ui-ink)!important;font:600 12px/1.3 "Segoe UI",sans-serif!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-icon{display:block!important;width:22px!important;height:22px!important;flex:0 0 22px!important;color:currentColor!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-height:44px!important;padding:0 4px 0 14px!important;background:var(--ui-paper)!important;border:1px solid var(--ui-line)!important;border-radius:16px!important;box-shadow:0 3px 12px #081b3220!important;pointer-events:auto!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-name{font:600 13px/1.3 "Segoe UI",sans-serif!important;color:var(--ui-ink)!important;min-width:0!important;max-width:calc(100% - 48px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-close{position:static!important;inset:auto!important;transform:none!important;display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-height:44px!important;padding:10px!important;margin:0!important;border:0!important;border-radius:12px!important;background:transparent!important;box-shadow:none!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-orbit{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto!important;grid-template-areas:none!important;gap:6px!important;align-items:stretch!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-action.actor-action{position:relative!important;inset:auto!important;grid-area:auto!important;display:block!important;width:100%!important;height:auto!important;min-height:44px!important;padding:0!important;margin:0!important;border:0!important;border-radius:14px!important;background:transparent!important;box-shadow:none!important;transform:none!important;opacity:1!important;white-space:normal!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-action .actor-action__circle{position:relative!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;width:100%!important;height:auto!important;min-height:44px!important;padding:9px 10px!important;border:1px solid var(--ui-line)!important;border-radius:14px!important;background:var(--ui-paper)!important;box-shadow:0 3px 12px #081b3220!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-action .actor-action__label{display:block!important;place-items:initial!important;flex:1!important;min-width:0!important;width:auto!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important;background:transparent!important;border:0!important;border-radius:0!important;font:600 12px/1.3 "Segoe UI",sans-serif!important;color:var(--ui-ink)!important;text-align:left!important;overflow-wrap:anywhere!important;box-shadow:none!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-action-note{display:none!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-action:disabled .actor-action__circle{background:var(--ui-soft)!important;border-style:dashed!important;box-shadow:none!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-action:disabled .actor-action__label{color:var(--ui-muted)!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-action:disabled .hero-self-icon{opacity:.55!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-action:hover:not(:disabled) .actor-action__circle{background:var(--ui-tint)!important;border-color:var(--ui-focus)!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-action[aria-pressed="true"] .actor-action__circle{background:var(--ui-positive-bg)!important;border-color:var(--ui-positive)!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-selected{display:none!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-state{display:flex!important;flex-direction:column!important;gap:5px!important;min-height:0!important;padding:8px 10px 4px!important;margin:0!important;background:var(--ui-paper)!important;border:1px solid var(--ui-line)!important;border-radius:14px!important;box-shadow:0 3px 12px #081b3220!important;pointer-events:auto!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-state-copy{display:grid!important;gap:2px!important;min-width:0!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-state-copy>b{font:600 12px/1.35 "Segoe UI",sans-serif!important;color:var(--ui-ink)!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-state-copy>small{display:block!important;margin:0!important;font:400 11px/1.4 "Segoe UI",sans-serif!important;color:var(--ui-muted)!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-links{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:4px!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-identity{position:static!important;grid-area:auto!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;width:auto!important;min-width:0!important;min-height:44px!important;margin:0!important;padding:6px!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;transform:none!important;color:var(--ui-accent)!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions .hero-self-stop{position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;width:auto!important;min-height:44px!important;padding:6px!important;border:0!important;border-radius:10px!important;background:var(--ui-danger-bg)!important;color:var(--ui-danger)!important;box-shadow:none!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions button:focus-visible{outline:3px solid var(--ui-focus)!important;outline-offset:2px!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions[data-self-view="pokemon"]{padding:10px!important;border:1px solid var(--ui-line)!important;border-radius:18px!important;background:var(--ui-paper)!important;overflow:auto!important;pointer-events:auto!important;box-shadow:0 8px 30px #081b3230!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions[data-self-view="pokemon"] .actor-action-heading{position:static!important;inset:auto!important;transform:none!important;width:auto!important;max-width:calc(100% - 48px)!important;min-height:44px!important;padding:7px 4px!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font:600 13px/1.4 "Segoe UI",sans-serif!important;color:var(--ui-ink)!important;white-space:normal!important;overflow-wrap:anywhere!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions[data-self-view="pokemon"] .actor-action-center{position:absolute!important;left:auto!important;right:10px!important;top:10px!important;bottom:auto!important;transform:none!important;display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-height:44px!important;padding:8px!important;margin:0!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;background:var(--ui-soft)!important;box-shadow:none!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions[data-self-view="pokemon"] .actor-action-center>span{display:none!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions[data-self-view="pokemon"] .hero-self-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions[data-self-view="pokemon"] .actor-action-hint{position:static!important;inset:auto!important;transform:none!important;width:auto!important;height:auto!important;min-height:0!important;padding:4px!important;margin:0!important;clip-path:none!important;white-space:normal!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--ui-muted)!important;font:400 12px/1.4 "Segoe UI",sans-serif!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions[data-self-view="pokemon"] .actor-action-pages{position:static!important;inset:auto!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;margin:0!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions[data-self-view="pokemon"] .actor-action-pages button{width:44px!important;height:44px!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;background:var(--ui-soft)!important;padding:10px!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions[data-self-view="pokemon"] .actor-action-pages span{font:400 12px/1.4 "Segoe UI",sans-serif!important;background:transparent!important;box-shadow:none!important;color:var(--ui-muted)!important} html[data-game-theme] #gameScreen .hero-floor-action{display:flex!important;align-items:center!important;gap:7px!important;min-height:44px!important;padding:6px 10px!important;border-radius:14px!important;background:var(--ui-paper)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line)!important;box-shadow:0 3px 12px #081b3220!important} html[data-game-theme] #gameScreen .hero-floor-action[hidden]{display:none!important} html[data-game-theme] #gameScreen .hero-floor-action>.hero-self-icon{width:22px!important;height:22px!important} html[data-game-theme] #gameScreen .hero-floor-action span{display:grid!important;gap:2px!important} html[data-game-theme] #gameScreen .hero-floor-action b{font:600 12px/1.3 "Segoe UI",sans-serif!important} html[data-game-theme] #gameScreen .hero-floor-action small{font:400 11px/1.3 "Segoe UI",sans-serif!important} @media(max-width:760px),(max-height:560px),(pointer:coarse) and (max-height:600px){html[data-game-theme] #gameScreen .hero-self-actions.actor-actions{left:50%!important;top:auto!important;bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;transform:translateX(-50%)!important;max-height:calc(100dvh - 116px)!important;overflow:auto!important}} } /* Personal taunts use a readable panel; the original Pokémon orbit is retained. */ @layer ui-theme { html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="hero-taunts"][data-action-layout] :is(button,.actor-action__circle){animation:none!important;transition:none!important;scale:1!important;translate:none!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="hero-taunts"][data-action-layout]{display:flex!important;flex-direction:column!important;gap:8px!important;width:min(360px,calc(100vw - 24px))!important;height:auto!important;max-height:calc(100dvh - 112px)!important;padding:12px!important;background:var(--ui-paper)!important;border:1px solid var(--ui-line)!important;border-radius:18px!important;box-shadow:0 8px 24px #122a3c33!important;overflow:auto!important;pointer-events:auto!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="hero-taunts"][data-action-layout]::before{display:none!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="hero-taunts"][data-action-layout] .hero-self-grid{display:grid!important;gap:8px!important;grid-template-columns:1fr!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="hero-taunts"][data-action-layout] .actor-action{position:static!important;inset:auto!important;transform:none!important;width:100%!important;height:54px!important;border-radius:12px!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="hero-taunts"][data-action-layout] .actor-action__circle{flex-direction:row!important;gap:10px!important;padding:8px 12px!important;border-radius:12px!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="hero-taunts"][data-action-layout] .actor-action-center{position:static!important;inset:auto!important;transform:none!important;width:100%!important;height:44px!important;border-radius:10px!important;display:flex!important;flex-direction:row!important;justify-content:flex-start!important;gap:8px!important;padding:8px!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="hero-taunts"][data-action-layout] .actor-hub-name{position:static!important;inset:auto!important;transform:none!important;display:block!important;width:auto!important;height:auto!important;flex:1!important;max-width:none!important;white-space:normal!important;font-size:12px!important;box-shadow:none!important;background:transparent!important;color:var(--ui-ink)!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="hero-taunts"][data-action-layout] .actor-action-hint{position:static!important;inset:auto!important;transform:none!important;display:block!important;width:auto!important;white-space:normal!important;color:var(--ui-muted)!important;clip-path:none!important;padding:0!important} @media(max-width:760px){html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="hero-taunts"][data-action-layout]{left:50%!important;top:auto!important;bottom:calc(100px + env(safe-area-inset-bottom,0px))!important;transform:translateX(-50%)!important}} @media(max-width:559px) and (max-height:400px){ html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="main"][data-action-layout] :is(button,.actor-action__circle){animation:none!important;scale:1!important;translate:none!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="main"][data-action-layout]{left:50%!important;top:8px!important;transform:translateX(-50%)!important;width:calc(100vw - 24px)!important;height:auto!important;max-height:calc(100dvh - 108px)!important;padding:8px!important;border:1px solid var(--ui-line)!important;border-radius:16px!important;background:var(--ui-paper)!important;overflow:auto!important;pointer-events:auto!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="main"][data-action-layout]::before{display:none!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="main"][data-action-layout] .hero-self-identity{position:static!important;inset:auto!important;transform:none!important;display:flex!important;flex-direction:row!important;width:calc(100% - 48px)!important;height:44px!important;gap:8px!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="main"][data-action-layout] .hero-self-head{display:block!important;position:absolute!important;right:4px!important;top:4px!important;width:44px!important;height:44px!important;background:transparent!important;border:0!important;padding:0!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="main"][data-action-layout] .hero-self-orbit{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;margin-top:6px!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="main"][data-action-layout] .actor-action{position:static!important;inset:auto!important;transform:none!important;width:100%!important;height:52px!important;border-radius:10px!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="main"][data-action-layout] .actor-action__circle{flex-direction:row!important;gap:5px!important;padding:4px!important;border-radius:10px!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="main"][data-action-layout] .hero-self-state{display:none!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="hero-taunts"][data-action-layout]{width:calc(100vw - 24px)!important;top:8px!important;bottom:auto!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="hero-taunts"][data-action-layout] .hero-self-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="hero-taunts"][data-action-layout] .actor-action{height:72px!important} html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-self-view="hero-taunts"][data-action-layout] .actor-action__circle{flex-direction:column!important;gap:4px!important;padding:6px!important} } html[data-game-theme] #gameScreen .hero-self-actions.actor-actions.actor-actions.actor-actions[data-action-layout][data-self-view][hidden]{display:none!important} } /* pk-style-source:17 */ /* /actor-orbit-v1.css */ /* One screen-space action system; existing world, touch and server rules remain. */ @layer ui-theme { html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] { --orbit-center:158px; --orbit-count:3; --orbit-ink:var(--ui-accent); position:fixed!important;z-index:112!important;left:var(--action-wheel-x,50%)!important;top:var(--action-wheel-y,50%)!important;right:auto!important;bottom:auto!important; display:block!important;width:304px!important;height:316px!important;max-width:calc(100vw - 16px)!important;max-height:none!important; padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;filter:none!important; overflow:visible!important;transform:translate(-50%,-50%)!important;pointer-events:none!important;transition:none!important; color:var(--ui-ink)!important;font:12px/1.3 'Segoe UI',sans-serif!important; } html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout][hidden], html[data-game-theme] #gameScreen #playerActionWheel.actor-actions[data-action-layout]:not(.is-open) {display:none!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout]::before { content:'';position:absolute;left:50%;top:var(--orbit-center);width:208px;height:208px;border:1px solid color-mix(in srgb,var(--ui-paper) 65%,transparent);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none; } html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] :is(.hero-self-orbit,.hero-self-grid) {display:contents!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] button {box-sizing:border-box!important;pointer-events:auto!important;cursor:pointer!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action { position:absolute!important;left:calc(50% + var(--orbit-x))!important;top:calc(var(--orbit-center) + var(--orbit-y))!important;right:auto!important;bottom:auto!important;inset-inline-end:auto!important; display:block!important;grid-area:auto!important;width:78px!important;height:78px!important;min-width:44px!important;min-height:44px!important; padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important; transform:translate(-50%,-50%)!important;opacity:1!important;filter:none!important;color:var(--orbit-ink)!important;white-space:normal!important; } html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action[hidden] {display:none!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action__circle { position:relative!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:5px!important; width:100%!important;height:100%!important;min-height:0!important;box-sizing:border-box!important;padding:8px 5px!important; border:1px solid var(--ui-line)!important;border-radius:50%!important;background:var(--ui-paper)!important;box-shadow:0 3px 9px #082f4326!important; transition:transform 140ms ease,background-color 140ms ease,border-color 140ms ease!important;color:var(--orbit-ink)!important; animation:actor-orbit-arrive 220ms cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--orbit-order) * 18ms); } html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] :is(.actor-action-symbol,.hero-self-icon) { display:block!important;width:26px!important;height:26px!important;flex:0 0 26px!important;color:inherit!important; } html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action__label { display:block!important;flex:none!important;width:68px!important;max-width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important; border:0!important;background:transparent!important;box-shadow:none!important;color:var(--ui-ink)!important;font:600 11px/12px 'Segoe UI',sans-serif!important; text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important;overflow:visible!important; } html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .is-battle {--orbit-ink:var(--ui-danger)} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] :is(.is-friend,.is-party) {--orbit-ink:var(--ui-positive)} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .is-stop {--orbit-ink:var(--ui-danger)} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action[data-action-long] .actor-action__circle {padding:6px 4px!important;gap:2px!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action[data-action-long] .actor-action-symbol {width:20px!important;height:20px!important;flex:0 0 20px!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action[data-action-long] .actor-action__label {display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;max-height:33px!important;overflow:hidden!important;font:600 10px/11px 'Segoe UI',sans-serif!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action:hover:not(:disabled) .actor-action__circle {border-color:var(--orbit-ink)!important;background:var(--ui-tint)!important;transform:translateY(-2px)} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action:active:not(:disabled) .actor-action__circle {transform:scale(.95)} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action:disabled .actor-action__circle {background:var(--ui-soft)!important;border-style:solid!important;box-shadow:none!important;color:var(--ui-muted)!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action:disabled .actor-action__label {color:var(--ui-muted)!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action[aria-pressed='true'] .actor-action__circle {border-color:var(--ui-positive)!important;background:var(--ui-positive-bg)!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] :is(.hero-self-selected,.hero-self-action-note,.hero-self-availability) {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] :is(.actor-action-hub,.actor-action-center) { position:absolute!important;left:50%!important;top:var(--orbit-center)!important;right:auto!important;bottom:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important; width:88px!important;height:88px!important;min-height:44px!important;min-width:44px!important;padding:6px!important;margin:0!important;transform:translate(-50%,-50%)!important; border:2px solid var(--ui-accent)!important;border-radius:50%!important;background:var(--ui-paper)!important;color:var(--ui-accent)!important;box-shadow:0 0 0 5px color-mix(in srgb,var(--ui-paper) 60%,transparent),0 4px 14px #082f4330!important; animation:actor-hub-arrive 180ms ease-out both; } html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] :is(.actor-action-hub,.actor-action-center)>span:not(.hero-self-portrait) {display:block!important;color:var(--ui-ink)!important;font:600 11px/12px 'Segoe UI',sans-serif!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action-hub>small {font:600 9px/10px 'Segoe UI',sans-serif!important;color:var(--ui-muted)!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .hero-self-portrait {position:relative!important;display:block!important;width:40px!important;height:40px!important;overflow:hidden!important;border-radius:50%!important;background:var(--ui-tint)!important;flex:none!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .hero-self-initials {position:absolute;inset:0;display:grid;place-items:center;color:var(--ui-accent);font:700 15px/1 'Segoe UI',sans-serif} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .hero-self-portrait img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-center-dismiss {position:absolute;right:2px;top:0;display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--ui-line);border-radius:50%;background:var(--ui-paper);color:var(--ui-muted)} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-center-dismiss .actor-action-symbol {width:16px!important;height:16px!important;flex:none!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .hero-self-avatar-frame {position:absolute;inset:0;background-repeat:no-repeat;background-position:0 0} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .hero-self-head {position:static!important;display:contents!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] :is(.hero-self-name,.actor-action-heading) { position:absolute!important;left:6px!important;right:auto!important;top:6px!important;bottom:auto!important;transform:none!important;display:block!important; width:max-content!important;max-width:238px!important;min-height:0!important;margin:0!important;padding:8px 12px!important;border:1px solid var(--ui-line)!important;border-radius:20px!important; background:var(--ui-paper)!important;box-shadow:0 2px 8px #082f4320!important;color:var(--ui-ink)!important;font:600 12px/16px 'Segoe UI',sans-serif!important;text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important; } html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .hero-self-close { position:absolute!important;left:calc(50% + var(--close-x,0px))!important;right:auto!important;top:calc(var(--orbit-center) + var(--close-y,-136px))!important;bottom:auto!important;transform:translate(-50%,-50%)!important;display:grid!important;place-items:center!important; width:44px!important;height:44px!important;min-height:44px!important;padding:10px!important;margin:0!important;border:1px solid var(--ui-line)!important;border-radius:50%!important;background:var(--ui-paper)!important;box-shadow:0 2px 8px #082f4320!important;color:var(--ui-muted)!important; } html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] :is(.hero-self-state,.actor-action-hint) { position:absolute!important;left:8px!important;right:8px!important;top:312px!important;bottom:auto!important;transform:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important; width:auto!important;height:48px!important;min-height:0!important;padding:5px 10px!important;margin:0!important;box-sizing:border-box!important;border:1px solid var(--ui-line)!important;border-radius:18px!important; background:var(--ui-paper)!important;box-shadow:0 2px 8px #082f4320!important;color:var(--ui-muted)!important;font:11px/14px 'Segoe UI',sans-serif!important;text-align:center!important;white-space:normal!important;clip-path:none!important;overflow:hidden!important;pointer-events:none!important; } html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .hero-self-state-copy {display:contents!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .hero-self-state-copy>b {font:600 12px/14px 'Segoe UI',sans-serif!important;color:var(--ui-ink)!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .hero-self-state-copy>small {display:block!important;margin:0!important;font:11px/14px 'Segoe UI',sans-serif!important;color:var(--ui-muted)!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action-pages {position:absolute!important;left:50%!important;top:283px!important;right:auto!important;transform:translateX(-50%)!important;display:flex!important;gap:4px!important;margin:0!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout='orbit']:has(.actor-action-pages) {height:368px!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout='orbit']:has(.actor-action-pages) .actor-action-pages {top:316px!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout='orbit']:has(.actor-action-pages) .actor-action-hint {top:368px!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action-pages button {width:44px!important;height:44px!important;min-height:44px!important;padding:10px!important;border:1px solid var(--ui-line)!important;border-radius:50%!important;background:var(--ui-paper)!important;color:var(--ui-ink)!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] button:focus-visible {outline:3px solid var(--ui-focus)!important;outline-offset:3px!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action:focus-visible {outline:none!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-action:focus-visible .actor-action__circle {outline:3px solid var(--ui-focus)!important;outline-offset:3px!important} /* The default explanation is omitted; actual state and failures remain visible. */ html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .hero-self-state[hidden] {display:none!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout]:not([data-action-notice])>.actor-action-hint {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;border:0!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout]:has(.hero-self-state:not([hidden]),.actor-action-hint):is([data-action-notice],[data-self-view='main']) {height:360px!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] .actor-hub-name {position:static!important;display:block!important;width:70px!important;max-width:70px!important;min-height:12px!important;flex:none!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font:600 10px/12px 'Segoe UI',sans-serif!important;color:var(--ui-ink)!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout='strip'] .hero-self-close {left:50%!important;top:24px!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout='strip']:has(.hero-self-state:not([hidden]),.actor-action-hint):is([data-action-notice],[data-self-view='main']) {height:184px!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout='strip'] .actor-hub-name {max-width:60px!important;font-size:9px!important} /* Loading and errors stay legible, including zero available companion gestures. */ html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout][data-action-count='0'] {height:212px!important;--orbit-center:108px} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout][data-action-count='0'] .actor-action-hint {top:164px!important} @media(max-height:469px) and (min-width:560px) { html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout='strip'] {width:calc(100vw - 32px)!important;max-width:610px!important;height:184px!important;--orbit-center:94px} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout='strip']::before {display:none} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout='strip'] :is(.actor-action-hub,.actor-action-center) {left:50%!important;width:76px!important;height:76px!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout='strip'] .actor-action {left:calc(50% + var(--strip-x))!important;top:94px!important;width:min(78px,calc(var(--strip-step) - 6px))!important;height:min(78px,calc(var(--strip-step) - 6px))!important;transform:translate(-50%,-50%)!important;animation-name:actor-strip-arrive} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout='strip'] .actor-action__circle {animation-name:actor-strip-arrive} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout='strip'] :is(.hero-self-state,.actor-action-hint) {left:104px!important;top:136px!important;height:48px!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout='strip'] .actor-action-pages {left:50%!important;top:138px!important} html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout='strip']:has(.actor-action-pages) .actor-action-hint {left:160px!important} html[data-game-theme] #gameScreen:has(.hero-self-actions[data-action-layout]:not([hidden]),#playerActionWheel[data-action-layout].is-open) :is(.world-topbar,#worldMinimapShell,#questWidget,#mobileQuestLauncher,#worldTeamQuick,.hero-floor-action,#contextAction,#testerLauncher) {visibility:hidden!important;pointer-events:none!important} html[data-game-theme] #gameScreen:has(.hero-self-actions[data-action-layout]:not([hidden]),#playerActionWheel[data-action-layout].is-open) :is(.world-topbar,#worldMinimapShell,#questWidget,#mobileQuestLauncher,#worldTeamQuick,.hero-floor-action,#contextAction,#testerLauncher) * {visibility:hidden!important;pointer-events:none!important} } @media(max-width:760px) and (max-height:640px) { html[data-game-theme] #gameScreen:has(.hero-self-actions:not([hidden]) .actor-action-pages) :is(.world-topbar,#worldMinimapShell,#questWidget,#mobileQuestLauncher) {visibility:hidden!important;pointer-events:none!important} html[data-game-theme] #gameScreen:has(.hero-self-actions:not([hidden]) .actor-action-pages) :is(.world-topbar,#worldMinimapShell,#questWidget,#mobileQuestLauncher) * {visibility:hidden!important;pointer-events:none!important} } /* The active radial replaces the nearby action prompt and floor shortcut. */ html[data-game-theme] #gameScreen:has(.hero-self-actions[data-action-layout]:not([hidden]),#playerActionWheel[data-action-layout].is-open) :is(#contextAction,.hero-floor-action) {visibility:hidden!important;pointer-events:none!important} html[data-game-theme] #gameScreen:has(.hero-self-actions[data-action-layout]:not([hidden]),#playerActionWheel[data-action-layout].is-open) :is(#testerLauncher,#homeWorkshopTools .home-workshop-launch) {visibility:hidden!important;pointer-events:none!important} @keyframes actor-orbit-arrive {from{opacity:0;translate:calc(var(--orbit-x) * -.15) calc(var(--orbit-y) * -.15);scale:.85}to{opacity:1;translate:0 0;scale:1}} @keyframes actor-hub-arrive {from{opacity:0;scale:.9}to{opacity:1;scale:1}} @keyframes actor-strip-arrive {from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}} @media(prefers-reduced-motion:reduce) { html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] *, html[data-game-theme] #gameScreen .actor-actions.actor-actions.actor-actions[data-action-layout] *::before {animation:none!important;transition:none!important} } } /* pk-style-source:18 */ /* /hero-home-journal-v29620.css */ /* Scope repairs to home previews and quest surfaces; keep the rest of the HUD. */ @layer ui-theme { html[data-game-theme] .pp-home.is-workshop .workshop-browser { inset:auto!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important; width:min(960px,calc(100% - 24px))!important;height:auto!important;max-height:calc(100% - 24px)!important; } html[data-game-theme] .pp-home.is-workshop .workshop-browser .workshop-panel-content { flex:0 1 auto!important;min-height:0!important;overflow:auto!important;max-height:calc(80dvh - 150px)!important; } html[data-game-theme] .pp-home .home-scene-options { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:min-content!important; align-content:start!important;align-items:start!important;gap:12px!important;max-height:none!important;overflow:visible!important; } html[data-game-theme] .pp-home .home-scene-options>button { position:relative!important;display:flex!important;flex-direction:column!important;align-items:stretch!important; min-width:0!important;width:100%!important;height:auto!important;min-height:44px!important;padding:8px!important; gap:8px!important;overflow:hidden!important;border:1px solid var(--ui-line)!important;border-radius:14px!important; text-align:left!important;background:var(--ui-soft)!important;color:var(--ui-ink)!important; } html[data-game-theme] .pp-home .home-scene-options>button[aria-pressed=true] { border-color:var(--ui-accent)!important;box-shadow:inset 0 0 0 1px var(--ui-accent)!important;background:var(--ui-tint)!important; } html[data-game-theme] .pp-home .home-scene-options .home-skin-preview { position:relative!important;display:block!important;flex:0 0 auto!important;width:100%!important;height:auto!important; aspect-ratio:16/9!important;overflow:hidden!important;min-width:0!important;min-height:0!important;background:#05070b!important;border-radius:8px!important; } html[data-game-theme] .pp-home .home-scene-options .home-skin-preview>img { position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important; max-width:100%!important;max-height:100%!important;min-height:0!important;object-fit:contain!important;transform:none!important;filter:none!important; } html[data-game-theme] .pp-home :is(.workshop-stage,.workshop-scene-frame) {background:#05070b!important;background-image:none!important} html[data-game-theme] .pp-home .workshop-scene-frame .home-scene {box-shadow:none!important} html[data-game-theme] .pp-home .home-skin-copy {display:flex!important;flex-wrap:wrap!important;justify-content:space-between!important;align-items:center!important;gap:4px 8px!important;min-width:0!important} html[data-game-theme] .pp-home .home-skin-copy>b {font:600 13px/1.4 "Segoe UI",sans-serif!important;overflow-wrap:anywhere!important} html[data-game-theme] .pp-home .home-skin-copy>small {font:400 12px/1.4 "Segoe UI",sans-serif!important;color:var(--ui-muted)!important} html[data-game-theme] .pp-home .home-scene-choices>p {font:400 13px/1.45 "Segoe UI",sans-serif!important;color:var(--ui-muted)!important} html[data-game-theme] .pp-home .workshop-style .home-scene-choices>[data-h-action="room-skin"] {position:sticky!important;bottom:0!important;z-index:2!important;box-shadow:0 -5px 10px var(--ui-paper)!important;min-height:44px!important} @media(min-width:900px) { html[data-game-theme] .pp-home .workshop-style .home-scene-options {grid-template-columns:repeat(3,minmax(0,1fr))!important} } html[data-game-theme] #gameScreen #questWidget,html[data-game-theme] #gameScreen .quest-journal-new { font:400 13px/1.45 "Segoe UI",sans-serif!important;letter-spacing:normal!important;text-shadow:none!important; } html[data-game-theme] #gameScreen #questWidget :is(.exp-tracked-card small,.exp-mini-objectives small) {letter-spacing:normal!important;text-transform:none!important} @media(min-width:761px) and (min-height:561px) { html[data-game-theme] #gameScreen:has(#questWidget:not(.is-collapsed)) #homeWorkshopTools.home-world-tools {right:calc(var(--world-goal-width,260px) + 32px)!important} } html[data-game-theme] #gameScreen #questWidget .exp-goal-empty {display:grid!important;gap:10px!important;padding:12px!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-empty .exp-goal-next {margin:0!important;font:400 13px/1.5 "Segoe UI",sans-serif!important;color:var(--ui-muted)!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-open-journal { display:inline-flex!important;justify-content:center!important;align-items:center!important;gap:8px!important; min-height:44px!important;width:100%!important;max-width:100%!important;margin:0!important;padding:9px 12px!important; border:1px solid var(--ui-line)!important;border-radius:12px!important;background:var(--ui-tint)!important;color:var(--ui-accent)!important; font:600 13px/1.35 "Segoe UI",sans-serif!important;cursor:pointer!important; } html[data-game-theme] #gameScreen #questWidget .exp-goal-open-journal:focus-visible {outline:3px solid var(--ui-focus)!important;outline-offset:2px!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-toggle b {font:600 13px/1.35 "Segoe UI",sans-serif!important;color:var(--ui-ink)!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-toggle small {font:600 10px/1.4 "Segoe UI",sans-serif!important;letter-spacing:.03em!important;color:var(--ui-muted)!important} html[data-game-theme] #gameScreen #questWidget .exp-tracked-card>header b {font:600 13px/1.4 "Segoe UI",sans-serif!important;color:var(--ui-ink)!important;overflow-wrap:anywhere!important} html[data-game-theme] #gameScreen #questWidget .exp-tracked-card>header small {font:400 11px/1.4 "Segoe UI",sans-serif!important;color:var(--ui-muted)!important} html[data-game-theme] #gameScreen #questWidget .exp-tracked-card>header button {min-height:44px!important} html[data-game-theme] #gameScreen #questWidget .exp-tracked-card>header button:last-child {width:44px!important;height:44px!important;flex:0 0 44px!important} html[data-game-theme] #gameScreen #questWidget .exp-mini-objectives li {font:400 12px/1.45 "Segoe UI",sans-serif!important;color:var(--ui-muted)!important} html[data-game-theme] #gameScreen #questWidget .exp-mini-objectives li.is-current {color:var(--ui-ink)!important;font-weight:600!important} html[data-game-theme] #gameScreen #questWidget .exp-mini-objectives li.is-done {color:var(--ui-positive)!important} html[data-game-theme] #gameScreen #questWidget .exp-mini-objectives small {font:400 11px/1.4 "Segoe UI",sans-serif!important;opacity:1!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-foot small {font:400 12px/1.4 "Segoe UI",sans-serif!important;color:var(--ui-muted)!important;overflow-wrap:anywhere!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-route {min-height:44px!important;font:600 12px/1.35 "Segoe UI",sans-serif!important} html[data-game-theme] #gameScreen .quest-journal-new :is(button,select) {font:600 13px/1.35 "Segoe UI",sans-serif!important;min-height:44px!important} html[data-game-theme] #gameScreen .quest-journal-new :is(h2,h3,b) {font-family:"Segoe UI",sans-serif!important;font-weight:600!important;letter-spacing:normal!important;text-shadow:none!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-header h2 {font-size:22px!important;line-height:1.3!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-detail h2 {font-size:21px!important;line-height:1.35!important;overflow-wrap:anywhere!important} html[data-game-theme] #gameScreen .quest-journal-new :is(.qj-row-copy>b,.qj-objectives li b,.qj-next b) {font:600 14px/1.45 "Segoe UI",sans-serif!important;white-space:normal!important;overflow-wrap:anywhere!important} html[data-game-theme] #gameScreen .quest-journal-new :is(.qj-story p,.qj-empty p,.qj-next span,.qj-objectives li span) {font:400 13px/1.5 "Segoe UI",sans-serif!important;color:var(--ui-muted)!important} html[data-game-theme] #gameScreen .quest-journal-new :is(.qj-row-copy>small,.qj-row-copy>em,.qj-detail-title small,.qj-branch,.qj-tracking small,.qj-state,.qj-rewards h3,.qj-rewards b,.qj-next small,.qj-objectives header>span) {font:400 12px/1.4 "Segoe UI",sans-serif!important;letter-spacing:normal!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-state {white-space:normal!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking>header {flex-wrap:wrap!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking article>button:last-child:not(:first-child) {flex-basis:44px!important;min-width:44px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking b {font-size:12px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-actions {flex-wrap:wrap!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-toolbar nav button {font-size:13px!important;line-height:1.35!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories b {font-size:12px!important;line-height:1.35!important;white-space:normal!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-toolbar nav span {font:400 12px/1.35 "Segoe UI",sans-serif!important} html[data-game-theme] #gameScreen:has(#sidePanel.is-open.is-quest-panel,.hero-self-actions:not([hidden])) #testerLauncher {visibility:hidden!important;pointer-events:none!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories button {background:var(--ui-soft)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories button[aria-pressed=true] {background:var(--ui-tint)!important;color:var(--ui-accent)!important;border-color:var(--ui-accent)!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-actions {background:var(--ui-paper)!important;border-color:var(--ui-line)!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-actions button {background:var(--ui-soft)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-actions button.qj-primary {background:var(--ui-primary)!important;color:var(--ui-on-accent)!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-state.is-active {background:var(--ui-tint)!important;color:var(--ui-accent)!important} html[data-game-theme] #gameScreen #sidePanel.is-quest-panel>.panel-close {background:var(--ui-soft)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important} @media(max-width:760px) { html[data-game-theme] .pp-home.is-workshop .workshop-browser {width:calc(100% - 12px)!important;max-height:calc(100% - 12px)!important} html[data-game-theme] .pp-home .home-scene-options {grid-template-columns:1fr!important;gap:10px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-toolbar nav {display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-toolbar nav button {justify-content:space-between!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking>header>small {display:none!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-header>button {font-size:12px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories button {padding:5px 2px!important;flex-direction:column!important;gap:3px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories button>span {min-width:0!important;width:100%!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories b {font-size:11px!important} } @media(max-height:560px) and (orientation:landscape) { html[data-game-theme] .pp-home .home-scene-options {grid-template-columns:repeat(2,minmax(0,1fr))!important} html[data-game-theme] .pp-home.is-workshop .workshop-browser .workshop-panel-content {max-height:calc(100dvh - 145px)!important} } } /* pk-style-source:19 */ /* /desktop-minimap-quests-v29630.css */ /* Desktop and phone deliberately have different map shapes. HudLayout owns the breakpoint. */ @layer ui-theme { html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] { --clean-map-size:216px; width:240px!important;height:216px!important;border-radius:14px!important; border:1px solid var(--ui-line)!important;background:var(--ui-paper)!important; box-shadow:0 3px 14px #122f4226!important; } html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-topbar { position:absolute!important;inset:0 0 auto!important;display:flex!important;align-items:center!important; width:auto!important;height:44px!important;min-height:44px!important;padding:0 54px 0 12px!important;background:none!important;border:0!important;pointer-events:none!important;backdrop-filter:none!important; } html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-place {display:block!important;min-width:0!important;width:100%!important;max-width:none!important} html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-place b { display:block!important;max-width:none!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important; font:650 13px/1.35 'Segoe UI',sans-serif!important;color:var(--ui-ink)!important; } html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"] :is(.world-minimap-place small,#worldCameraButton) {display:none!important} html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-map-surface { inset:44px 5px auto!important;width:calc(100% - 10px)!important;height:124px!important; border:0!important;border-radius:9px!important;box-shadow:none!important;background:var(--ui-soft)!important; } /* Only the viewport clips. Artwork and markers share HudMinimap's uniform cover projection. */ html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-frame { inset:auto!important;width:var(--minimap-frame-width,100%)!important;height:var(--minimap-frame-height,100%)!important; left:var(--minimap-frame-left,0px)!important;top:var(--minimap-frame-top,0px)!important;border-radius:0!important; } html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapChannelButton { top:0!important;right:4px!important;left:auto!important;width:44px!important;height:44px!important; border:0!important;border-radius:10px!important;background:transparent!important; color:var(--ui-accent)!important;box-shadow:none!important; } html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapZoom { position:absolute!important;inset:auto 5px 3px!important;display:flex!important;align-items:center!important; width:auto!important;height:44px!important;min-height:44px!important;gap:4px!important;margin:0!important;padding:0!important; border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important; } html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapZoom button { width:44px!important;height:44px!important;min-height:44px!important;padding:0!important; border:0!important;border-radius:9px!important;background:var(--ui-soft)!important;color:var(--ui-accent)!important; font:600 20px/1 'Segoe UI',sans-serif!important;box-shadow:none!important; } html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapZoom .hud-world-zoom-reset { flex:1!important;width:auto!important;background:transparent!important;font-size:13px!important; } html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapZoom button:disabled {opacity:.4!important;cursor:default!important} html[data-game-theme] #gameScreen:has(#worldMinimapShell[data-minimap-format="rectangular"]) #notificationCenterButton {right:calc(268px + env(safe-area-inset-right))!important;left:auto!important;top:calc(12px + env(safe-area-inset-top))!important} html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"].is-collapsed {width:52px!important;height:52px!important;border:0!important;background:transparent!important;box-shadow:none!important} html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"].is-collapsed :is(.world-minimap-topbar,#worldMinimapZoom) {display:none!important} html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"].is-collapsed #worldMinimapChannelButton {top:0!important;background:var(--ui-paper)!important;border:1px solid var(--ui-line)!important} /* Compact tracker, readable text and real 44px targets instead of scaling the UI. */ html[data-game-theme] #gameScreen #questWidget {padding:6px 8px!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-head {padding:0!important;gap:4px!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-toggle {gap:8px!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-toggle>.exp-goal-symbol {display:block!important;flex:0 0 20px!important;width:20px!important;height:20px!important;color:var(--ui-accent)!important;transform:none!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-toggle>span {min-width:0!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-toggle small {font:600 12px/1.35 'Segoe UI',sans-serif!important;letter-spacing:normal!important} html[data-game-theme] #gameScreen #questWidget .exp-tracked-list {padding:0!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-empty {gap:8px!important;padding:4px 2px 2px!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-empty .exp-goal-next {font-size:12px!important;line-height:1.45!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-open-journal {width:100%!important;justify-self:stretch!important;justify-content:center!important;padding:6px 10px!important;gap:6px!important;border-radius:9px!important;background:var(--ui-soft)!important;font-size:12px!important} html[data-game-theme] #gameScreen #questWidget .exp-goal-open-journal svg {width:18px!important;height:18px!important;flex:0 0 18px!important} /* Journal hierarchy: category, chosen goals, state filters, then the list and detail. */ html[data-game-theme] #gameScreen .quest-journal-new .qj-header {padding:12px 76px 12px 18px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-header small {display:none!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories {padding:10px 18px 0!important;gap:8px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories button {flex-direction:row!important;justify-content:flex-start!important;gap:8px!important;padding:8px 12px!important;min-height:44px!important;box-shadow:none!important;border-radius:11px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories .hud-icon {width:20px!important;height:20px!important;flex:0 0 20px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories b {font-size:13px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories em {margin-left:auto!important;font:600 12px/1.3 'Segoe UI',sans-serif!important;min-width:20px!important;padding:2px 5px!important;background:var(--ui-soft)!important;border-radius:6px!important;color:var(--ui-muted)!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking {padding:12px 18px!important;margin:0!important;border-bottom:1px solid var(--ui-line)!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking>header {margin-bottom:7px!important;align-items:center!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking article {background:var(--ui-soft)!important;border-color:var(--ui-line)!important;min-height:52px!important;border-radius:10px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking article.is-vacant {background:transparent!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking article button {color:var(--ui-ink)!important;padding:5px 8px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking .is-vacant button {justify-content:center!important;gap:7px!important;color:var(--ui-muted)!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking .is-vacant button>.hud-icon {width:18px!important;height:18px!important;flex:0 0 18px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-toolbar {padding:8px 18px!important;border-bottom:1px solid var(--ui-line)!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-toolbar nav {display:flex!important;gap:4px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-toolbar nav button {min-height:44px!important;padding:7px 12px!important;border-radius:9px!important;gap:8px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-layout {grid-template-columns:280px minmax(0,1fr)!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-row {width:calc(100% - 20px)!important;margin:8px 10px!important;padding:12px!important;border-radius:12px!important;border-left-width:1px!important;box-shadow:none!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-row-art,html[data-game-theme] #gameScreen .quest-journal-new .qj-row-art img {width:36px!important;height:36px!important;flex-basis:36px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-detail-title>img {width:56px!important;height:56px!important;flex-basis:56px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-scroll {padding:18px 22px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-next {background:var(--ui-soft)!important;border-color:var(--ui-line)!important;border-radius:12px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-objectives li>i {display:grid!important;place-items:center!important;width:28px!important;height:28px!important;flex:0 0 28px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-objectives li>i>.hud-icon {display:block!important;width:18px!important;height:18px!important} html[data-game-theme] #gameScreen .quest-journal-new button:focus-visible {outline:3px solid var(--ui-focus)!important;outline-offset:2px!important} @media(max-width:760px),(pointer:coarse) and (max-height:560px) { html[data-game-theme] #gameScreen #questWidget.is-collapsed .exp-goal-toggle>.exp-goal-symbol {display:none!important} html[data-game-theme] #gameScreen #questWidget.is-collapsed .exp-goal-mobile-icon>.exp-goal-symbol {display:block!important;position:static!important;inset:auto!important;padding:0!important;width:23px!important;height:23px!important;transform:none!important;background:none!important} html[data-game-theme] #gameScreen #questWidget:not(.is-collapsed) .exp-goal-mobile-icon>.exp-goal-symbol {display:none!important} } @media(max-width:760px) { html[data-game-theme] #gameScreen #questWidget.is-collapsed {padding:0!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-header {padding:10px 62px 10px 12px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-header h2 {font-size:19px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-header>button {min-height:44px!important;padding:6px 8px!important;font-size:11px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories {padding:8px 10px 0!important;gap:4px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories button {flex-direction:column!important;justify-content:center!important;padding:5px 2px!important;gap:3px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories b {font-size:11px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories em {display:none!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking {padding:8px 10px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking>header {margin-bottom:5px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking article {min-height:44px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking .is-vacant button {flex-direction:column!important;gap:2px!important;padding:4px 2px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking .is-vacant b {font-size:11px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-toolbar {padding:6px 10px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-toolbar nav {display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-toolbar nav button {flex-direction:column!important;justify-content:center!important;padding:4px 2px!important;gap:2px!important;font-size:11px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-layout {grid-template-columns:1fr!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-scroll {padding:12px!important} } @media(max-height:560px) { html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] {--clean-map-size:188px;height:188px!important} html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-map-surface {height:96px!important} html[data-game-theme] #gameScreen #worldMinimapShell[data-minimap-format="rectangular"] :is(#worldMinimapChannelMenu,.hud-context) {position:fixed!important;top:8px!important;right:calc(268px + env(safe-area-inset-right))!important;max-height:calc(100dvh - 24px)!important} } @media(pointer:fine) and (min-width:761px) and (max-height:560px) { /* A short PC window cannot stack this card above the team dock. Place it beside the map. */ html[data-game-theme] #gameScreen #questWidget {top:calc(80px + env(safe-area-inset-top))!important;right:calc(264px + env(safe-area-inset-right))!important;max-height:calc(100dvh - 192px)!important} } @media(max-height:560px) and (orientation:landscape) { /* The full-height journal owns the short viewport; restore the dock on close. */ html[data-game-theme] #gameScreen:has(#sidePanel.is-open.is-quest-panel) :is(#desktopDock,.mobile-dock) {visibility:hidden!important;pointer-events:none!important} html[data-game-theme] #gameScreen #sidePanel.is-quest-panel {inset:8px!important;transform:none!important;width:auto!important;height:auto!important;max-height:none!important;border-radius:16px!important} html[data-game-theme] #gameScreen #sidePanel.is-quest-panel>.panel-close {top:6px!important;right:10px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-header {padding:4px 64px 4px 12px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-categories {padding:6px 12px 0!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking {padding:6px 12px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking>header {margin-bottom:4px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking>header>small {display:none!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-tracking article {min-height:44px!important} html[data-game-theme] #gameScreen .quest-journal-new .qj-toolbar {padding:5px 12px!important} } } /* First arrival: a compact checklist inside the existing quest card. */ #gameScreen .arrival-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;list-style:none;margin:0 0 9px;padding:0} #gameScreen .arrival-steps li{display:flex;align-items:center;gap:5px;min-width:0;padding:7px 4px;border:1px solid rgba(91,141,161,.22);border-radius:10px;background:rgba(85,151,173,.06)} #gameScreen .arrival-steps li.is-current{border-color:#2b9abb;background:rgba(43,154,187,.12)} #gameScreen .arrival-steps li.is-done{border-color:rgba(52,155,117,.4);background:rgba(52,155,117,.08)} #gameScreen .arrival-step-number{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:rgba(85,151,173,.12);font-size:11px;font-weight:800} #gameScreen .arrival-step-number svg{width:14px;height:14px} #gameScreen .arrival-steps .is-current .arrival-step-number{color:white;background:#248cae} #gameScreen .arrival-steps .is-done .arrival-step-number{color:#268161;background:rgba(52,155,117,.14)} #gameScreen .arrival-steps b{display:block;font-size:11px;line-height:1.3;overflow-wrap:anywhere} #gameScreen .arrival-steps small{display:block;font-size:9px;line-height:1.35;opacity:.75;overflow-wrap:anywhere} @media(max-height:560px){#gameScreen .arrival-steps li{padding:4px}#gameScreen .arrival-steps small{display:none}} /* A narrow screen keeps whole names and a single useful heading. */ #gameScreen .exp-goal-head.is-arrival-tutorial .exp-goal-journal{align-self:flex-start;flex:0 0 44px;min-width:44px;height:44px} @media(max-width:760px),(max-height:560px){ #gameScreen .arrival-steps li{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:4px;padding:6px 3px} #gameScreen .arrival-steps li>span:last-child{min-width:0;width:100%} #gameScreen .arrival-steps b{font-size:11px;white-space:nowrap;overflow-wrap:normal} #gameScreen .arrival-steps small{display:none} } @media(max-width:760px){ #gameScreen .exp-goal-head.is-arrival-tutorial .exp-goal-summary{display:none} #gameScreen .exp-goal-head.is-arrival-tutorial .exp-goal-compact-label{display:block;font-size:12px;line-height:1.3} } /* /region-atlas-v2910.css: deferred, original cascade position */ @layer ui-theme;@media all{:root[data-pk-style-slot="owner-20"]{}} /* pk-style-source:21 */ /* /nursery-v2820.css */ @layer nursery-layout{ dialog.pp-nursery{position:fixed!important;inset:0!important;margin:auto!important;width:min(1040px,calc(100vw - 32px))!important;height:min(820px,calc(100svh - 32px))!important;max-width:none!important;max-height:none!important;border:1px solid var(--ui-line,#d3e5e8)!important;border-radius:24px!important;padding:0!important;background:var(--ui-card,#fafdfd)!important;color:var(--ui-ink,#244353)!important;overflow:hidden!important;box-shadow:0 24px 90px #102b3d55!important;font:14px/1.4 "Segoe UI",system-ui,sans-serif!important} dialog.pp-nursery[open]{display:flex!important;flex-direction:column!important}dialog.pp-nursery::backdrop{background:#142d4566;backdrop-filter:blur(3px)}.pp-nursery *{box-sizing:border-box!important;min-width:0}.pp-nursery button,.pp-nursery input,.pp-nursery select{font:inherit!important;box-shadow:none!important;text-transform:none!important;letter-spacing:normal!important}.pp-nursery button{position:static!important;display:inline-flex!important;align-items:center;justify-content:center;gap:6px;min-height:44px!important;height:auto!important;width:auto;border:1px solid var(--ui-line,#c9dfe4)!important;border-radius:12px!important;padding:8px 13px!important;color:var(--ui-ink,#286077)!important;background:var(--ui-card,#fff)!important;cursor:pointer;white-space:normal;line-height:1.25!important}.pp-nursery button:hover:not(:disabled){background:var(--ui-paper,#edf8f8)!important;border-color:#1596a5!important}.pp-nursery :focus-visible{outline:3px solid #17a4b4!important;outline-offset:2px}.pp-nursery button:disabled{opacity:.55;cursor:not-allowed}.pp-nursery .nr-primary{background:#087e91!important;border-color:#087e91!important;color:white!important;font-weight:700!important}.pp-nursery h2,.pp-nursery h3,.pp-nursery h4,.pp-nursery p{margin:0!important;font-family:inherit!important}.pp-nursery h2{font-size:24px!important;line-height:1.2!important;letter-spacing:-.7px!important}.pp-nursery h3{font-size:17px!important;line-height:1.3!important}.pp-nursery small{font-size:11px}.pp-nursery img{object-fit:contain;max-width:100%}.pp-nursery input,.pp-nursery select{display:block;width:100%;min-height:44px!important;padding:9px 10px!important;border:1px solid var(--ui-line,#cddfe4)!important;border-radius:10px!important;background:white!important;color:var(--ui-ink,#2b5063)!important} .nr-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 12px;flex:none;background:white}.nr-header>div{display:flex;align-items:center;gap:12px}.nr-header small{font-weight:700;color:var(--ui-muted,#73919f);font-size:10px;letter-spacing:1.1px}.pp-nursery .nr-header>button,.pp-nursery .nr-details header>button{flex:none;width:44px!important;font-size:26px!important;background:var(--ui-paper,#f4f9fb)!important}.nr-tabs{display:flex;gap:6px;padding:0 22px 12px;flex:none;background:white}.pp-nursery .nr-tabs button{flex:1;background:var(--ui-paper,#f4f8f9)!important;font-weight:650}.pp-nursery .nr-tabs button[aria-current=page]{color:var(--ui-accent,#087c8a)!important;background:var(--ui-soft,#e4f6f3)!important;border-color:var(--ui-line,#8acac6)!important} .nr-capacity{display:flex;align-items:center;gap:12px;padding:9px 22px;border-block:1px solid var(--ui-line,#e1edef);flex:none}.nr-capacity>span{font-size:12px;white-space:nowrap}.nr-capacity b{margin-left:4px}.nr-capacity progress{appearance:none;flex:1;height:8px;min-width:30px;border:0;border-radius:10px;overflow:hidden;background:var(--ui-soft,#e1eded)}.nr-capacity progress::-webkit-progress-bar{background:var(--ui-soft,#e1eded)}.nr-capacity progress::-webkit-progress-value{background:#22a499}.nr-capacity progress::-moz-progress-bar{background:#22a499}.nr-capacity.is-full progress::-webkit-progress-value{background:#e35c6c}.nr-capacity.is-full progress::-moz-progress-bar{background:#e35c6c}.nr-capacity.is-full b{color:#c53d50}.nr-capacity>small{color:var(--ui-muted,#708b9b);white-space:nowrap}.nr-capacity>button{font-size:12px!important} .nr-body{overflow:auto;overscroll-behavior:contain;flex:1;padding:16px 22px;min-height:0;scrollbar-width:thin}.nr-footer{flex:none;padding:10px 22px;background:white;border-top:1px solid var(--ui-line,#deebee);display:flex;gap:10px;align-items:center}.nr-footer>span{flex:1;color:var(--ui-muted,#668493);font-size:12px}.nr-footer button{flex:none;font-size:12px!important} .nr-party{margin-bottom:18px}.nr-party>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.nr-party h3 small{color:var(--ui-muted,#7792a1);font-weight:500}.nr-party header>span{color:var(--ui-muted,#72909d);font-size:12px}.nr-party-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.nr-party-empty{border:1px dashed var(--ui-line,#cedfe3);border-radius:14px;display:flex;min-height:142px;flex-direction:column;align-items:center;justify-content:center;color:var(--ui-muted,#9eb6c0);background:var(--ui-paper,#f6fafb)}.nr-party-empty>span{font-size:28px} .nr-mon{position:relative;border:1px solid var(--ui-line,#d6e5e7);border-radius:15px;background:white;overflow:hidden}.nr-mon.is-selected{border:2px solid #1a9eab;background:var(--ui-paper,#e8f8f6)}.nr-mon.is-shiny{background:linear-gradient(135deg,#fffbee,#fff 70%)}.pp-nursery .nr-mon-main{display:flex!important;gap:10px;align-items:center;justify-content:flex-start;width:100%!important;height:100%!important;min-height:126px!important;padding:14px 38px 22px 10px!important;border:0!important;border-radius:14px!important;background:transparent!important;text-align:left}.nr-mon-art{flex:none;width:72px}.nr-mon-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1}.nr-mon-copy>b{font-size:14px;word-break:break-word;line-height:1.2}.nr-mon-copy>small{color:var(--ui-muted,#7a92a0)}.nr-mon-copy>span{font-size:12px}.nr-mon-copy em{font-style:normal;color:var(--ui-muted,#6a8997)}.nr-mon-art img{display:block;width:72px;height:72px}.nr-move-hint{position:absolute;bottom:7px;right:10px;font-size:10px;color:var(--ui-accent,#1c8a95)}.pp-nursery .nr-info{position:absolute!important;top:0;right:0;width:44px!important;min-height:44px!important;border:0!important;padding:0!important;font:italic 700 16px/1 Georgia,serif!important;color:var(--ui-muted,#7598a5)!important;background:transparent!important}.nr-lead{position:absolute;top:5px;left:6px;padding:2px 6px;background:var(--ui-soft,#e5f5f0);border-radius:7px;font-size:9px;color:var(--ui-muted,#297d6d);pointer-events:none}.nr-hp{display:block;width:100%;height:4px;background:var(--ui-soft,#e8efef);border-radius:5px;overflow:hidden;margin:3px 0}.nr-hp>i{display:block;height:100%;background:#39b695}.nr-labels{position:absolute;bottom:3px;left:6px;max-width:66%;display:flex;gap:3px}.nr-labels>i{font-style:normal;font-size:8px;border-radius:4px;padding:1px 3px;overflow:hidden;max-width:55px;white-space:nowrap;text-overflow:ellipsis} .pp-nursery .is-party .nr-mon-main{flex-direction:column;padding:16px 6px 23px!important;gap:3px;min-height:142px!important;text-align:center}.is-party .nr-mon-copy{align-items:center;gap:1px}.is-party .nr-mon-copy>b{font-size:12px}.is-party .nr-mon-copy>small{display:none}.is-party .nr-mon-art img{height:66px;width:66px}.is-party .nr-mon-art{width:66px}.is-party .nr-move-hint{right:0;left:0;text-align:center;bottom:7px} .nr-search{display:flex;gap:8px;margin-bottom:12px}.nr-search>label{flex:1}.nr-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;background:var(--ui-paper,#edf6f6);border-radius:14px;padding:12px;margin-bottom:12px}.nr-filters label>span,.nr-group-form label>span{display:block;font-size:11px;color:var(--ui-muted,#698896);margin-bottom:4px}.nr-list-head{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}.nr-list-head>b{flex:1;font-size:15px}.nr-list-head>b small{color:var(--ui-muted,#7a929e);font-weight:400}.nr-list-head select,.nr-list-head>button{font-size:12px!important}.nr-mon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.nr-pagination{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:12px}.nr-pagination>span{margin-right:auto;color:var(--ui-muted,#7c96a0);font-size:12px}.nr-pagination button{width:44px!important;font-size:21px!important}.nr-pagination>b{font-size:12px}.nr-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;border:1px dashed var(--ui-line,#c6dee4);padding:28px;border-radius:16px;color:var(--ui-muted,#7897a4)}.nr-note{color:var(--ui-muted,#728f9c)!important;font-size:12px!important;padding:10px 0}.nr-note.is-warning{background:#fff3dc;color:#9f7016!important;border:1px solid #f4d797;border-radius:10px;padding:10px!important;margin-bottom:10px!important}.nr-bulk{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;background:var(--ui-paper,#e8f7f5);border-radius:12px;margin-top:12px} .nr-group-manager{border:1px solid var(--ui-line,#d9e7e8);background:white;padding:16px;border-radius:16px;margin-bottom:18px}.nr-group-manager header p{font-size:12px!important;color:var(--ui-muted,#78909e);margin:5px 0 10px!important}.nr-group-switch,.nr-group-pills,.nr-member-actions{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.nr-group-switch button[aria-pressed=true],.nr-group-pills button[aria-pressed=true]{border-color:#1592a0!important;box-shadow:inset 0 0 0 1px #1592a0!important}.nr-group-form{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:8px;align-items:end}.nr-group-form>button{font-size:12px!important}.nr-members{padding-top:14px}.nr-member-strip{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.nr-member-strip>button{width:54px!important;height:54px!important;padding:3px!important}.nr-member-strip img{width:44px;height:44px}.nr-member-actions{align-items:center}.nr-member-actions>span{flex:1;color:var(--ui-muted,#76919d);font-size:12px}.nr-member-actions>button{font-size:12px!important} .nr-tone-teal{background:#e3f7f2!important;color:var(--ui-accent,#237f73)!important}.nr-tone-blue{background:var(--ui-paper,#e6f0ff)!important;color:var(--ui-muted,#3974ac)!important}.nr-tone-purple{background:#f0eafa!important;color:#8156b3!important}.nr-tone-rose{background:#ffeaf1!important;color:#b8547b!important}.nr-tone-gold{background:#fff5d9!important;color:#a77c24!important}.nr-tone-green{background:var(--ui-soft,#ebf5df)!important;color:#629141!important} .nr-shop-intro{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:16px}.nr-shop-intro small{color:var(--ui-muted,#7595a4);font-weight:700;letter-spacing:1px}.nr-shop-intro h3{font-size:23px!important}.nr-shop-intro p{color:var(--ui-muted,#73909e);font-size:12px!important;margin-top:6px!important;max-width:600px}.nr-shop-intro>strong{display:flex;align-items:center;gap:6px;background:var(--ui-paper,#e9f6f7);padding:10px 14px;border-radius:12px;font-size:20px;white-space:nowrap}.nr-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.nr-plan{border:1px solid var(--ui-line,#d2e2e8);border-radius:18px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px;gap:7px}.nr-plan-art{display:flex;align-items:center;justify-content:center;height:140px}.nr-plan-art img{width:150px;height:140px;filter:drop-shadow(0 5px 6px #53647818)}.nr-plan>small{font-size:9px;font-weight:700;letter-spacing:1px}.nr-plan>b{font-size:25px}.nr-plan p{font-size:12px!important;line-height:1.6!important}.nr-plan>button{width:100%!important;margin-top:7px}.nr-expander{display:flex;align-items:center;gap:15px;border:1px solid var(--ui-line,#dbe7e8);background:white;border-radius:18px;padding:16px;margin-top:16px}.nr-expander>div:first-of-type{flex:1}.nr-expander small{font-size:10px;color:var(--ui-muted,#7392a1);font-weight:700;letter-spacing:.6px}.nr-expander p{font-size:12px!important;color:var(--ui-muted,#7793a1);margin-top:7px!important}.nr-expander>div:last-child{display:flex;flex-direction:column;gap:8px}.nr-confirm{display:flex;gap:12px;align-items:center;background:#fff5dc;border:1px solid #ebd28b;border-radius:14px;padding:16px;margin:14px 0}.nr-confirm>div{flex:1}.nr-confirm p{font-size:12px!important;margin-top:4px!important}.nr-confirm button{flex:none} .nr-details{position:absolute;z-index:10;inset:0 0 0 auto;width:min(440px,100%);background:white;box-shadow:-12px 0 60px #1b425b33;padding:22px;overflow:auto;overscroll-behavior:contain;border-left:1px solid var(--ui-line,#cee0e5)}.nr-details>header{display:flex;align-items:center;justify-content:space-between;gap:10px}.nr-details header>div{display:flex;align-items:center;gap:8px}.nr-details header img{width:80px;height:80px}.nr-details header small{font-size:10px;color:var(--ui-muted,#728e9d)}.nr-details header b{font-size:11px;color:var(--ui-muted,#72909d)}.nr-details>.nr-types{margin:12px 0}.nr-details dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.nr-details dl>div{border:1px solid var(--ui-line,#e0edef);border-radius:12px;padding:12px}.nr-details dt{font-size:11px;color:var(--ui-muted,#7b97a3)}.nr-details dd{margin:4px 0 0;font-weight:700;font-size:13px}.nr-genes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.nr-genes>span{background:var(--ui-paper,#eef7f6);border-radius:10px;padding:10px;display:flex;flex-direction:column}.nr-genes small{font-size:10px;color:var(--ui-muted,#7995a1)}.nr-genes b{font-size:18px}.nr-genes em{font-style:normal;font-size:10px;color:var(--ui-muted,#91a7b0)}.nr-details footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.nr-details footer button{flex:1} @media(max-width:700px){dialog.pp-nursery{width:calc(100vw - 16px)!important;height:calc(100svh - 16px)!important;border-radius:19px!important}.nr-header{padding:12px 12px 10px}.nr-header>div{gap:8px}.pp-nursery h2{font-size:20px!important}.nr-header small{font-size:8px;letter-spacing:.7px}.nr-tabs{padding:0 10px 8px;gap:4px}.nr-tabs button{font-size:11px!important;padding:6px!important;border-radius:9px!important}.nr-capacity{gap:7px;padding:5px 12px}.nr-capacity>span{font-size:11px}.nr-capacity>small{display:none}.nr-capacity>button{padding:6px!important;min-height:36px!important}.nr-body{padding:12px}.nr-footer{padding:8px 12px}.nr-footer>span{font-size:10px}.nr-party-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.nr-party>header{align-items:flex-start}.nr-party header>span{font-size:10px;text-align:right;max-width:170px}.pp-nursery .is-party .nr-mon-main{min-height:114px!important;padding:8px 5px 22px!important}.is-party .nr-mon-art,.is-party .nr-mon-art img{width:52px;height:52px}.nr-party-empty{min-height:114px}.nr-party{margin-bottom:14px}.nr-search{gap:5px}.nr-search button{font-size:11px!important;padding:6px!important}.nr-search input{font-size:12px!important}.nr-filters{grid-template-columns:repeat(2,minmax(0,1fr));padding:9px}.nr-list-head{gap:6px;flex-wrap:wrap}.nr-list-head>b{font-size:13px}.nr-list-head select,.nr-list-head>button{font-size:10px!important;padding:7px!important}.nr-mon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.pp-nursery .nr-mon-main{flex-direction:column;padding:10px 5px 23px!important;min-height:155px!important;gap:3px}.nr-mon-copy{align-items:center}.nr-mon-copy>b{font-size:12px}.nr-mon-copy>span{font-size:11px}.nr-mon-art,.nr-mon-art img{width:60px;height:60px}.nr-move-hint{left:0;right:0;text-align:center;font-size:9px}.nr-mon .nr-types{justify-content:center;flex-wrap:wrap}.nr-mon .pokemon-type-badge{font-size:8px!important}.nr-group-manager{padding:10px}.nr-group-form{grid-template-columns:1fr 1fr}.nr-group-form>label:first-child{grid-column:1/-1}.nr-group-manager header p{font-size:11px!important}.nr-group-pills button,.nr-group-switch button{font-size:11px!important}.nr-member-actions button{font-size:11px!important}.nr-bulk{font-size:11px}.nr-shop-intro h3{font-size:19px!important}.nr-shop-intro>strong{padding:7px;font-size:16px}.nr-plans{grid-template-columns:1fr;gap:10px}.nr-plan{display:grid;grid-template-columns:92px 1fr;text-align:left;gap:3px 12px;padding:14px}.nr-plan-art{grid-column:1;grid-row:1/6;height:108px}.nr-plan-art img{width:94px;height:108px}.nr-plan>button{grid-column:1/-1}.nr-plan h3{font-size:16px!important}.nr-plan>b{font-size:21px}.nr-plan p{font-size:10px!important}.nr-expander{gap:8px;flex-wrap:wrap;padding:12px}.nr-expander>img{width:70px;height:70px}.nr-expander h3{font-size:15px!important}.nr-expander>div:last-child{width:100%;flex-direction:row}.nr-expander>div:last-child button{flex:1;font-size:11px!important}.nr-confirm{flex-wrap:wrap;padding:12px}.nr-confirm>div{flex-basis:100%}.nr-confirm button{flex:1;font-size:11px!important}.nr-details{padding:16px}} @media(max-height:500px) and (min-width:701px){.nr-header{padding:8px 16px}.nr-tabs{padding:0 16px 6px}.nr-body{padding:10px 16px}.nr-party-empty,.pp-nursery .is-party .nr-mon-main{min-height:110px!important}.is-party .nr-mon-art img{height:44px;width:44px}.nr-capacity{padding:3px 16px}.nr-footer{padding:5px 16px}} @media(prefers-reduced-motion:reduce){.pp-nursery *{scroll-behavior:auto!important;transition:none!important}} .pp-nursery .sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0!important} @media(max-width:700px){.nr-body{padding:10px}.nr-party-grid{grid-template-columns:repeat(6,minmax(44px,1fr));gap:4px}.pp-nursery .is-party .nr-mon-main{min-height:104px!important;padding:22px 2px 19px!important}.is-party .nr-mon-art,.is-party .nr-mon-art img{width:36px;height:36px}.is-party .nr-mon-copy{width:100%;gap:0}.is-party .nr-mon-copy>b{width:100%;font-size:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.is-party .nr-mon-copy>span{font-size:9px}.is-party .nr-info{width:44px!important;min-height:44px!important;top:0}.is-party .nr-lead{top:5px;left:4px;font-size:0;padding:3px;width:6px;height:6px;background:#179c82}.is-party .nr-move-hint{font-size:0;bottom:3px}.is-party .nr-move-hint::after{content:"↓";font-size:11px}.nr-party-empty{min-height:104px}.nr-party-empty>small{font-size:8px}.nr-party-empty>span{font-size:18px}} } /* pk-style-source:22 */ /* /nursery-polish-v2840.css */ @layer nursery-layout{ .pp-nursery .nr-header{padding:16px 20px;background:var(--ui-card,#fff)}.pp-nursery .nr-header small{color:var(--ui-muted,#608998);letter-spacing:.6px}.pp-nursery .nr-header h2{font-size:23px!important} .pp-nursery .nr-tabs{padding:0 20px 12px}.pp-nursery .nr-tabs button{flex:none;min-width:140px;background:white!important;border-color:transparent!important}.pp-nursery .nr-tabs button[aria-current=page]{background:var(--ui-paper,#e9f6f5)!important;color:var(--ui-accent,#087f8a)!important} .pp-nursery .nr-capacity{background:var(--ui-paper,#f2f8f9);border:0;padding:10px 20px}.pp-nursery .nr-body{background:var(--ui-paper,#f5f9fa);padding:16px 20px}.pp-nursery .nr-list-head{gap:8px}.pp-nursery .nr-mon-grid{gap:10px} .pp-nursery .nr-mon{border-color:var(--ui-line,#dde9ec);border-radius:16px;transition:border-color .15s,background .15s}.pp-nursery .nr-mon-main{padding:12px 38px 25px 12px!important;min-height:116px!important;gap:10px}.pp-nursery .nr-mon-art{display:grid;place-items:center;width:62px;height:62px;flex:none;border-radius:50%;background:linear-gradient(#eaf6f7 49%,#d7e8eb 49%,#d7e8eb 51%,#f8fbfc 51%);border:1px solid var(--ui-line,#e1edef)}.pp-nursery .nr-mon-art img{width:58px;height:58px;filter:drop-shadow(0 2px 1px #365e6515)}.pp-nursery .nr-mon-copy>b{font-size:14px}.pp-nursery .nr-mon-copy>small{font-size:10px}.pp-nursery .nr-mon-copy .nr-hp{height:3px}.pp-nursery .nr-info{font:inherit!important;color:var(--ui-muted,#428699)!important;top:2px;right:2px}.pp-nursery .nr-info svg{width:18px;height:18px}.pp-nursery .nr-move-hint{right:12px;font-size:10px}.pp-nursery .nr-labels{left:10px;bottom:6px} .pp-nursery .nr-party{border:1px solid var(--ui-line,#e0ebed);background:white;border-radius:18px;padding:12px;margin-bottom:16px}.pp-nursery .nr-party header>span{max-width:260px}.pp-nursery .nr-party-grid{gap:7px}.pp-nursery .is-party .nr-mon-main{min-height:125px!important;padding:28px 6px 22px!important;gap:5px}.pp-nursery .is-party .nr-mon-art{width:48px;height:48px}.pp-nursery .is-party .nr-mon-art img{width:46px;height:46px}.pp-nursery .is-party .nr-mon-copy>small{display:none}.pp-nursery .is-party .nr-mon-copy>b{font-size:12px}.pp-nursery .nr-party-empty{min-height:125px;border-radius:15px}.pp-nursery .nr-party-empty>span{background:url('/assets/v2.9.11/items/poke-ball.png') center/32px no-repeat;width:40px;height:40px;font-size:0;opacity:.22}.pp-nursery .nr-lead{top:8px;left:10px;background:var(--ui-soft,#e2f6ef)} .pp-nursery .nr-search button{gap:5px}.pp-nursery .nr-filters{grid-template-columns:repeat(4,minmax(0,1fr));background:white;border:1px solid var(--ui-line,#dfebed);padding:12px}.pp-nursery .nr-filter-save{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--ui-line,#e0ebed)}.pp-nursery .nr-filter-save input{flex:1;min-width:140px}.pp-nursery .nr-filter-save small{flex-basis:100%;color:var(--ui-muted,#76919e)}.pp-nursery .nr-saved-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}.pp-nursery .nr-saved-filters>label{width:180px}.pp-nursery .nr-saved-filters>span{display:inline-flex;align-items:center;gap:3px;background:var(--ui-paper,#e7f2f4);color:var(--ui-muted,#397689);border-radius:10px;padding-left:8px;font-size:11px}.pp-nursery .nr-saved-filters>span>button{padding:0!important;width:32px!important;min-height:44px!important;border:0!important;background:transparent!important} .pp-nursery .nr-group-manager{border-color:var(--ui-line,#dce9ed);padding:16px}.pp-nursery .nr-group-manager header{padding-bottom:8px;border-bottom:1px solid var(--ui-line,#edf3f5)}.pp-nursery .nr-group-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.pp-nursery .nr-group-switch button{min-width:0;background:var(--ui-card,#f7fafb)!important;font-size:12px!important}.pp-nursery .nr-group-switch button[aria-pressed=true]{background:var(--ui-paper,#e7f5f3)!important;border-color:var(--ui-line,#8ac4c7)!important}.pp-nursery .nr-group-pills{gap:7px}.pp-nursery .nr-group-pills button{padding:8px 10px!important;border-color:transparent!important;font-size:12px!important}.pp-nursery .nr-group-pills button small{border-radius:6px;background:#ffffff70;padding:3px 6px}.pp-nursery .nr-member-strip>button{border-radius:50%!important;background:var(--ui-paper,#f1f8fa)!important}.pp-nursery .nr-member-strip img{width:40px;height:40px}.pp-nursery .nr-group-form{padding:10px 0;grid-template-columns:2fr 1fr 1.4fr}.pp-nursery .nr-group-form button{min-height:44px!important} .pp-nursery .nr-details{border:0;border-radius:22px 0 0 22px;box-shadow:-20px 0 80px #21405529;padding:24px}.pp-nursery .nr-details header img{background:var(--ui-paper,#eff7f8);border-radius:50%;border:1px solid var(--ui-line,#deebed);width:76px;height:76px;padding:5px}.pp-nursery .nr-details dl>div{padding:10px}.pp-nursery .nr-details .nr-genes>span{background:var(--ui-paper,#f1f7f8)}.pp-nursery .nr-details h4{font-size:14px!important} .pp-nursery.is-vip-shop .nr-header{border-bottom:1px solid var(--ui-line,#e0ebed)}.pp-nursery.is-vip-shop .nr-body{padding-top:20px}.pp-nursery.is-vip-shop .nr-footer>span{font-size:11px}.pp-nursery .nr-topup{border:1px solid var(--ui-line,#bedee5);background:var(--ui-paper,#eaf6f9);border-radius:15px;padding:15px;margin-bottom:16px}.pp-nursery .nr-topup p{font-size:13px!important;color:var(--ui-muted,#496e80);margin:6px 0!important}.pp-nursery .nr-topup small{color:var(--ui-muted,#638592)}.pp-nursery .nr-shop-intro>strong{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pp-nursery .nr-shop-intro>strong button{width:auto!important;padding:8px 12px!important;font-size:12px!important} .world-wallet-currency.is-gems .world-gem-shop{display:inline-flex!important;align-items:center!important;padding:0 3px!important;min-width:0!important;min-height:44px!important;width:auto!important;border:0!important;background:transparent!important;color:inherit!important;border-radius:8px!important;box-shadow:none!important}.world-gem-shop b{pointer-events:none} .inventory-wallet-v49{flex-wrap:wrap!important;gap:8px!important}.inventory-wallet-v49 .inventory-gem-shop{border:0!important;background:transparent!important;border-radius:8px!important;padding:2px 5px!important;min-height:44px!important;width:auto!important;color:inherit!important;font:inherit!important;box-shadow:none!important}.inventory-wallet-v49>.inventory-topup,.inventory-wallet-v49>.inventory-vip-shop{display:inline-flex!important;align-items:center;gap:6px;border:1px solid var(--ui-line,#c6e1e7)!important;background:var(--ui-paper,#eff8fa)!important;color:var(--ui-accent,#20718b)!important;padding:8px 12px!important;border-radius:12px!important;font-size:12px!important;min-height:44px!important;width:auto!important;white-space:nowrap}.inventory-vip-shop img{object-fit:contain;width:24px;height:24px} @media(max-width:700px){ .pp-nursery .nr-header{padding:12px}.pp-nursery .nr-header h2{font-size:19px!important}.pp-nursery .nr-tabs{padding:0 12px 9px}.pp-nursery .nr-tabs button{flex:1;min-width:0;font-size:12px!important}.pp-nursery .nr-capacity{padding:7px 12px}.pp-nursery .nr-capacity>button{min-height:44px!important}.pp-nursery .nr-body{padding:10px}.pp-nursery .nr-party{padding:10px}.pp-nursery .nr-party>header{gap:8px}.pp-nursery .nr-party header>span{max-width:145px;font-size:10px}.pp-nursery .nr-party-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.pp-nursery .is-party .nr-mon-main{min-height:114px!important;padding:31px 2px 14px!important;gap:3px}.pp-nursery .is-party .nr-mon-art{width:32px;height:32px}.pp-nursery .is-party .nr-mon-art img{width:30px;height:30px}.pp-nursery .is-party .nr-mon-copy>b{font-size:9px}.pp-nursery .is-party .nr-mon-copy>span{font-size:9px}.pp-nursery .is-party .nr-info{right:0;top:0;width:100%!important;min-width:0!important;min-height:44px!important}.pp-nursery .is-party .nr-info svg{width:15px;height:15px}.pp-nursery .nr-party-empty{min-height:114px}.pp-nursery .nr-party-empty>span{background-size:22px}.pp-nursery .nr-party-empty>small{font-size:8px}.pp-nursery .nr-lead{width:5px;height:5px;padding:0;left:3px;top:5px} .pp-nursery .nr-mon-grid{grid-template-columns:1fr;gap:7px}.pp-nursery .nr-mon-main{flex-direction:row!important;padding:12px 44px 24px 12px!important;min-height:110px!important;gap:12px;text-align:left}.pp-nursery .nr-mon-art{width:58px;height:58px}.pp-nursery .nr-mon-art img{width:54px;height:54px}.pp-nursery .nr-mon-copy{align-items:flex-start!important;gap:2px}.pp-nursery .nr-mon-copy>b{font-size:14px}.pp-nursery .nr-mon-copy>span{font-size:11px}.pp-nursery .nr-mon .nr-types{justify-content:flex-start}.pp-nursery .nr-mon .pokemon-type-badge{font-size:9px!important}.pp-nursery .nr-move-hint{left:auto;right:12px;font-size:10px}.pp-nursery .nr-mon-copy .nr-hp{max-width:170px}.pp-nursery .nr-labels{max-width:55%;bottom:6px}.pp-nursery .nr-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px}.pp-nursery .nr-saved-filters>label{width:100%}.pp-nursery .nr-filter-save button{font-size:11px!important}.pp-nursery .nr-list-head>b{flex-basis:100%}.pp-nursery .nr-list-head label{flex:1}.pp-nursery .nr-list-head>button{font-size:11px!important}.pp-nursery .nr-group-manager{padding:12px}.pp-nursery .nr-group-switch button{padding:6px!important;font-size:11px!important;gap:4px}.pp-nursery .nr-group-switch svg{width:16px;height:16px}.pp-nursery .nr-group-form{grid-template-columns:1fr 1fr}.pp-nursery .nr-group-form>label:first-child{grid-column:1/-1}.pp-nursery .nr-details{border-radius:0;padding:18px}.inventory-wallet-v49>.inventory-vip-shop{flex-basis:100%;justify-content:center} } @media(max-width:700px){.pp-nursery .is-party .nr-mon-main{flex-direction:column!important;padding-top:44px!important;min-height:140px!important}.pp-nursery .is-party .nr-mon-copy{align-items:center!important;width:100%;min-width:0}.pp-nursery .is-party .nr-mon-copy>b{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pp-nursery .nr-party-empty{min-height:140px}.pp-nursery .is-party .nr-move-hint{font-size:0;left:0;right:0;text-align:center;bottom:3px}.pp-nursery .is-party .nr-move-hint:after{content:'↓';font-size:14px}.pp-nursery .nr-lead{overflow:hidden;font-size:0}} @media(max-width:360px){.pp-nursery .nr-party-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pp-nursery .nr-party-empty{min-height:125px}.pp-nursery .nr-shop-intro{flex-direction:column;align-items:flex-start}.pp-nursery .nr-group-switch button{flex-direction:column}} @media(prefers-reduced-motion:reduce){.pp-nursery .nr-mon{transition:none}} .inventory-wallet-v49 .inventory-gem-shop{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:32px!important}.inventory-gem-shop>b{display:block!important;visibility:visible!important;font-size:13px!important;color:var(--ui-ink,#183f53)!important} } /* pk-style-source:23 */ /* /pokemon-taunts-v2890.css */ .pt-entry{margin:10px 0}.pt-entry[hidden]{display:none}.pt-entry>button{min-height:44px;border:1px solid #d8e5eb;border-radius:12px;background:#f3fafb;color:#236473;padding:8px 14px;font-family:inherit;font-size:13px;font-weight:700;line-height:1.3;cursor:pointer}.pt-entry small{display:inline-grid;place-items:center;min-width:22px;margin-left:8px;background:#deeff2;border-radius:20px;padding:2px 5px}.pt-dialog{box-sizing:border-box;width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border:1px solid #d6e4e8;border-radius:24px;padding:20px;color:#234c59;background:#fcfefe;box-shadow:0 16px 60px #14394630;overflow:auto}.pt-dialog::backdrop{background:#142d4290}.pt-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}.pt-dialog header small{color:#638593;font-weight:600}.pt-dialog h2{margin:3px 0;font-size:20px}.pt-dialog button{font:600 13px/1.3 system-ui;min-height:44px;border:1px solid #d3e3e9;border-radius:12px;padding:8px 12px;color:#2c6175;background:#fff;cursor:pointer}.pt-dialog button:disabled{opacity:.55;cursor:default}.pt-dialog button:focus-visible{outline:3px solid #21a5bf;outline-offset:2px}.pt-dialog [data-pt-close]{min-width:44px;font-size:24px}.pt-preview{margin:14px 0;border-radius:18px;background:radial-gradient(ellipse at 50% 90%,#c8e3df 0,transparent 55%),#edf6f8}.pt-preview canvas{display:block;width:100%;height:min(32dvh,260px);object-fit:contain}.pt-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pt-options button[aria-pressed=true]{border-color:#15849d;color:#fff;background:#15849d}.pt-dialog footer{display:flex;gap:8px;flex-wrap:wrap}.pt-dialog footer button{flex:1}.pt-dialog [data-pt-world]{background:#148aa3;border-color:#148aa3;color:#fff}.pt-status{min-height:20px;margin:10px 0;font-size:12px;color:#507989}.pt-note{margin:12px 0 0;font-size:12px;color:#6d8792}@media(max-height:560px){.pt-dialog{padding:12px}.pt-preview{margin:7px 0}.pt-preview canvas{height:130px}.pt-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.pt-dialog h2{font-size:17px}.pt-note{margin-top:7px}}@media(prefers-reduced-motion:reduce){.pt-dialog *{animation:none;transition:none}} @media(max-height:700px){.pt-dialog{padding:12px}.pt-preview{margin:7px 0}.pt-preview canvas{height:clamp(64px,calc(100dvh - 450px),200px)}.pt-status{margin:7px 0}.pt-note{margin-top:7px}} @media(max-height:560px) and (min-width:600px){.pt-dialog[open]{display:grid;width:min(680px,calc(100vw - 24px));grid-template-columns:.9fr 1.1fr;column-gap:14px}.pt-dialog header{grid-column:1/-1}.pt-preview{grid-column:1;grid-row:2/5;margin:8px 0}.pt-preview canvas{height:180px}.pt-options{grid-column:2;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:8px}.pt-status{grid-column:2;grid-row:3}.pt-dialog footer{grid-column:2;grid-row:4}.pt-note{grid-column:1/-1;grid-row:5}} .pt-status:empty{display:none} @media(max-width:360px){.pt-dialog h2{font-size:17px}} /* pk-style-source:24 */ /* /home-garden-v2840.css */ .pp-home{--home-ink:#244b55;position:fixed;inset:0;margin:auto;width:min(1260px,96vw);height:min(900px,94dvh);max-width:none;max-height:94dvh;padding:0;border:1px solid #c7e5dd;border-radius:26px;background:var(--ui-card,#f7fbf8);color:var(--home-ink);box-shadow:0 24px 90px #102d37aa;overflow:hidden;font:14px/1.4 system-ui,sans-serif}.pp-home[open]{display:flex;flex-direction:column}.pp-home::backdrop{background:#132f3a90;backdrop-filter:blur(5px)}.pp-home *{box-sizing:border-box}.pp-home button,.pp-home input,.pp-home select{font:inherit;color:inherit;min-height:44px;border:1px solid #c4ded7;border-radius:12px;background:white;padding:9px 12px;max-width:100%}.pp-home button{cursor:pointer}.pp-home button:disabled{opacity:.45;cursor:default}.pp-home button:focus-visible,.pp-home input:focus-visible,.pp-home select:focus-visible{outline:3px solid #31a9a0;outline-offset:2px}.home-header{display:flex;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid #d5e8df;background:var(--ui-card,#fff)}.home-header h2{margin:2px 0;font-size:26px}.home-header small,.home-aside>small{font-weight:800;letter-spacing:1.3px;font-size:10px;color:var(--ui-muted,#608579)}.home-header>span{margin-left:auto;font-size:13px}.home-header>button{font-size:25px;min-width:44px}.home-tabs{display:flex;gap:6px;padding:8px 16px;overflow:auto;flex-shrink:0;border-bottom:1px solid #d5e8df}.home-tabs button{flex:1;white-space:nowrap;background:transparent;border-color:transparent}.home-tabs button[aria-pressed=true]{background:var(--ui-soft,#ddf1e7);color:#137359;border-color:#a9d7c3;font-weight:700}.home-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0;flex:1;overflow:hidden}.home-stage{padding:18px;min-width:0;overflow:auto;display:flex;align-items:center;justify-content:center;background:var(--ui-paper,#ebf3eb)}.home-scene{position:relative;width:100%;max-width:850px;aspect-ratio:4/3;border-radius:18px;overflow:hidden;box-shadow:0 8px 28px #284b3228;isolation:isolate}.home-background{display:block;position:absolute;width:100%;height:100%;object-fit:contain;inset:0}.home-floor{position:absolute;left:8%;top:39%;width:84%;height:46%;touch-action:manipulation}.home-grid{position:absolute;inset:0;background:repeating-linear-gradient(to right,transparent 0 calc(100% / 12 - 1px),#ffffff70 calc(100% / 12 - 1px) calc(100% / 12)),repeating-linear-gradient(to bottom,transparent 0 calc(100% / 8 - 1px),#ffffff70 calc(100% / 8 - 1px) calc(100% / 8));pointer-events:none}.pp-home .home-furniture,.home-ghost{position:absolute;min-height:0;padding:0;background:none;border:none;border-radius:0;display:block}.home-furniture img,.home-ghost img{height:100%;transform:scaleX(var(--flip,1));filter:drop-shadow(0 4px 2px #362b1a25)}.home-furniture.is-selected{outline:2px dashed #ffffffa0;outline-offset:3px}.home-ghost{pointer-events:none;opacity:.65;z-index:20}.home-ghost.is-invalid{background:#ed4f4f70;outline:2px dashed #bd352d}.home-ghost.is-valid{background:#59c38955;outline:2px dashed #2e9c70}.home-room-door,.home-garden-door,.home-room-exit{position:absolute!important;background:#ffffffe8!important;padding:6px 12px!important;min-height:44px!important}.home-room-door{left:68%;top:23%}.home-room-exit{left:42%;bottom:1%}.home-garden-door{left:42%;top:5%}.home-aside{padding:18px;overflow:auto;background:var(--ui-card,#fff);display:flex;flex-direction:column;gap:12px;border-left:1px solid #d6e8dc}.home-aside h3{margin:0;font-size:21px}.home-aside p{margin:0;color:var(--ui-muted,#668177);font-size:13px}.home-aside label,.home-catalog>label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700}.home-aside article{padding:12px;background:var(--ui-paper,#f3f9f3);border:1px solid #dcebdd;border-radius:16px;display:flex;flex-direction:column;gap:8px}.home-selected>img{width:100%;height:100px;object-fit:contain}.home-primary{background:#237e5b!important;color:white!important;border-color:#237e5b!important}.home-inline{display:flex;gap:6px}.home-inline input{width:50%}.home-nudge{display:flex;gap:3px}.home-nudge button{min-width:44px;padding:8px}.home-catalog{width:100%;align-self:flex-start}.home-catalog article{background:var(--ui-card,#fff);border:1px solid #d4e7db;border-radius:16px;padding:12px;display:flex;gap:10px;align-items:center;margin-bottom:10px}.home-catalog article>button{margin-left:auto}.home-catalog article>img{width:64px;height:64px;object-fit:contain}.home-shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.home-shop-grid article{flex-direction:column;align-items:stretch;margin:0}.home-shop-grid article>img{width:100%;height:104px}.home-shop-grid h4,.home-shop-grid p{margin:0}.home-shop-grid small{font-size:11px;color:var(--ui-muted,#5f7f6d)}.home-shop-grid article>button{margin-left:0}.home-storage-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.home-item{font-size:12px}.home-feature-art{height:150px;object-fit:contain}.home-egg>img{height:100px!important;width:75px!important}.home-egg p{font-size:12px}.home-footer{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:9px 18px;background:var(--ui-paper,#edf6ef);border-top:1px solid #d4e7db;font-size:12px}.home-footer p{margin:0;flex:1}.home-footer button{font-size:12px}.home-plot{position:absolute!important;transform:translate(-50%,-75%);width:12%;aspect-ratio:1;min-height:44px!important;min-width:44px;padding:0!important;background:transparent!important;border:0!important;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;color:#fff!important}.home-plot img{width:100%;height:85%;object-fit:contain;pointer-events:none}.home-plot span{display:grid;place-items:center;border-radius:50%;width:32px;height:32px;background:#76533099;box-shadow:0 0 0 2px #edd999aa}.home-plot small{border-radius:9px;background:#fffefaee;color:var(--ui-ink,#375542);white-space:nowrap;padding:2px 5px;font-size:10px}.home-plot.is-selected{filter:drop-shadow(0 0 4px #fff3aa)}.home-plot.is-selected span{background:#21895f}.home-plot.is-locked{opacity:.65}.home-pump{position:absolute!important;left:9%;top:19%;background:#fffefaee!important;padding:4px!important;display:flex;align-items:center;gap:3px}.home-pump img{width:34px;height:36px;object-fit:contain}.home-seed-rack{position:absolute!important;right:5%;top:18%;background:#fffefaee!important}.home-effect{position:absolute;inset:15% 25%;pointer-events:none;z-index:50;background-repeat:no-repeat;background-size:600% 100%;animation:home-effect .9s steps(5) forwards}@keyframes home-effect{to{background-position:100% 0;opacity:0}}.home-invitation{padding:30px}.home-invitation button{margin-right:10px}.pp-home .is-missing{visibility:hidden} @media(max-width:760px){.pp-home{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.home-header{padding:10px 12px;gap:6px}.home-header h2{font-size:21px}.home-header>span{font-size:10px;max-width:100px}.home-layout{display:block;overflow:auto}.home-stage{padding:10px;overflow:visible}.home-aside{border-left:0;border-top:1px solid #d4e7db;overflow:visible}.home-tabs{padding:5px}.home-tabs button{padding:8px;font-size:12px;flex:0 0 auto}.home-plot small{font-size:8px;padding:1px 3px}.home-footer{padding:7px 10px}.home-footer p{font-size:11px}.home-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-storage-columns{grid-template-columns:1fr}.home-room-door{top:18%}.home-seed-rack{right:1%;top:17%;font-size:11px!important}.home-pump{left:5%;top:13%;font-size:11px!important}.home-nudge{gap:8px}.home-room-exit{font-size:11px!important}.home-garden-door{font-size:11px!important}.home-shop-grid article>img{height:90px}.home-catalog article{padding:9px}} @media(prefers-reduced-motion:reduce){.home-effect{display:none}} .home-furniture img,.home-ghost img{position:absolute;left:0;bottom:0;width:100%;height:auto;max-height:300%;object-fit:contain}.home-canvas{width:100%;max-height:100%;overflow:auto;touch-action:pan-x pan-y;overscroll-behavior:contain;border-radius:18px}.home-canvas>.home-scene{width:calc(100% * var(--home-zoom,1));max-width:none}.home-zoom{display:flex;gap:6px}.home-zoom button{flex:1}.home-harvest summary{cursor:pointer;min-height:44px;padding:12px 0;font-weight:700}.home-harvest article>img{width:70px;height:70px;object-fit:contain}.home-harvest>p{margin-bottom:10px} .home-plot{width:9%} .home-stage{container-type:size}.home-canvas{width:min(100%,calc(100cqh * 4 / 3))} @media(max-width:760px){.home-canvas{max-height:65dvh}.home-garden.is-expanded{min-width:600px}.home-stage{overflow:hidden}.home-zoom{order:-1}} @media(max-width:760px){.home-stage{container-type:normal}.home-canvas{width:100%}} .home-garden{min-width:600px} @media(max-height:600px){.home-layout{display:block;overflow:auto}.home-stage{container-type:normal;height:280px;min-height:280px;overflow:hidden}.home-canvas{width:100%;max-height:100%}.home-aside{border-left:0;border-top:1px solid #d4e7db;overflow:visible}} /* Home comfort: stable scene, visible reasons and touch-sized alternate list. */ .pp-home button:disabled{opacity:.65} .home-stage{flex-direction:column;gap:12px;justify-content:flex-start} .home-context-tools{display:flex;gap:8px;width:100%;flex-shrink:0;flex-wrap:wrap} .home-context-tools button{flex:1;min-width:120px;background:#fffdf2;border-color:#d6d9b6;font-size:12px;font-weight:700} .home-canvas{flex-shrink:1;min-height:0;width:min(100%,calc((100cqh - 58px) * 4 / 3));max-height:calc(100% - 58px)} .home-catalog,.home-plot-list{flex-shrink:0} .home-action-hint{display:block;font-size:12px;line-height:1.4;color:#846336} .home-action-hint:empty{display:none} .home-aside .home-draft-status{color:#166d54;font-weight:600} .home-plot-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%} .home-plot-list button{display:grid;grid-template-columns:52px 1fr;gap:4px 10px;text-align:left;align-items:center;min-height:80px} .home-plot-list img{grid-row:span 2;width:52px;height:52px;object-fit:contain} .home-plot-list span{font-size:13px;font-weight:700} .home-plot-list small{font-size:12px;color:var(--ui-muted,#607869)} .home-plot-list button[aria-pressed=true]{border-color:#25855f;background:var(--ui-soft,#def2e6);box-shadow:inset 0 0 0 1px #25855f} .home-catalog article.home-item{display:grid;grid-template-columns:40px minmax(0,1fr) 44px;gap:8px} .home-item>img{width:40px!important;height:40px!important} .home-item>span{overflow-wrap:anywhere} .home-item>button{width:44px;padding:8px} .home-item>.home-action-hint{grid-column:2/-1;font-size:11px} .home-aside progress{width:100%;height:12px;accent-color:#237e5b} .home-confirmation{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid #d2d5aa;background:#fff9dd;flex-wrap:wrap;font-size:13px} .home-confirmation p{margin:0;flex:1;min-width:160px} .home-footer{flex-wrap:wrap} .home-footer p{min-width:110px;overflow-wrap:anywhere} .pp-home .home-invitation{overflow:auto} .home-aside{scroll-margin-top:12px} .home-room.is-building .home-floor,.home-room.is-building .home-furniture,.home-furniture-picker button{touch-action:none} .home-room.is-building .home-floor{cursor:crosshair}.home-room.is-building .home-furniture{cursor:grab}.home-room.is-building .home-furniture:active{cursor:grabbing} .home-build-steps{padding:14px;border:1px solid #8ac9ae;border-radius:16px;background:var(--ui-soft,#e6f7e9)} .home-build-steps b{font-size:16px}.home-build-steps ol{margin:8px 0;padding-left:20px}.home-build-steps li{margin:4px 0}.home-build-steps p{font-size:12px} .home-furniture-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.home-furniture-picker button{text-align:left;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:62px;padding:8px}.home-furniture-picker button[aria-pressed=true]{border:2px solid #238a62;background:var(--ui-soft,#def3e6)}.home-furniture-picker small{font-size:11px;color:var(--ui-muted,#648072)} .home-scene-choices{display:grid;gap:8px}.home-scene-choices>p{margin:0}.home-scene-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:256px;overflow:auto}.home-scene-options button{display:grid;gap:3px;text-align:left;padding:6px;min-height:0}.home-scene-options button[aria-pressed=true]{border:2px solid #238a62;background:var(--ui-soft,#def3e6)}.home-scene-options img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:7px}.home-scene-options span{font-weight:700;font-size:12px}.home-scene-options small{color:var(--ui-muted,#648072);font-size:11px}.home-scene-choices select{width:100%} .home-materials{border-color:#d8c6a4!important}.home-materials button{width:100%}.home-material-icon{width:64px;height:48px;object-fit:contain} .home-mobile-build-bar,.home-mobile-place{display:none} @media(max-width:760px){.home-mobile-build-bar{display:flex;align-items:center;gap:7px;width:100%;font-size:12px;font-weight:700}.home-mobile-build-bar select{flex:1;min-width:0}.home-mobile-place{display:block;min-width:130px}.pp-home:has(.home-room.is-building) .home-footer [data-home-refresh]{display:none}.pp-home:has(.home-room.is-building) .home-footer p{flex-basis:100%;order:2}.home-context-tools{align-items:center}} @media(max-width:760px){.home-furniture-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.home-scene-options{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none}} @media(max-width:760px){ .home-canvas{width:100%;max-height:65dvh} .home-stage{gap:10px} .home-plot-list{grid-template-columns:1fr} .home-layout.is-catalog{display:flex;flex-direction:column} .home-layout.is-catalog .home-aside{order:-1;padding:14px;gap:9px;flex-shrink:0} .home-layout.is-catalog .home-stage{overflow:visible;flex-shrink:0} .home-layout.is-catalog .home-aside>p,.home-layout.is-catalog .home-aside>small{display:none} .home-layout.is-catalog .home-aside h3{font-size:18px} .home-shop-grid p{font-size:12px} .home-shop-grid small{font-size:12px} .home-footer{padding-bottom:max(7px,env(safe-area-inset-bottom))} .home-confirmation{padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom))} } @media(max-height:600px){ .home-canvas{width:100%;max-height:calc(100% - 58px)} .home-stage:has(.home-catalog),.home-stage:has(.home-plot-list){height:auto;min-height:0;overflow:visible} .home-header{padding:6px 12px}.home-header h2{font-size:20px} .home-tabs{padding:4px 8px}.home-tabs button{min-height:44px;padding:8px} .home-confirmation{padding:7px 12px}.home-confirmation p{font-size:12px} } /* Real home areas: a small world dock and focused, dismissible actions. */ .home-world-tools{position:absolute;left:16px;bottom:112px;display:flex;gap:6px;padding:6px;border-radius:18px;background:#fffffff0;box-shadow:0 4px 18px #173b4228;z-index:30}.home-world-tools[hidden]{display:none}.home-world-tools button{display:flex;align-items:center;gap:5px;min-height:44px;padding:5px 9px;border:0;border-radius:12px;background:transparent;color:var(--ui-ink,#315861);font:600 12px system-ui;cursor:pointer}.home-world-tools img{width:30px;height:30px;object-fit:contain}.home-world-tools button:hover{background:var(--ui-soft,#e3f2e8)}.pp-home.is-world-interaction{width:min(720px,94vw);height:auto;max-height:86dvh}.pp-home.is-world-interaction:has(.home-world-interaction){width:min(420px,94vw)}.home-world-interaction{display:flex;flex-direction:column;gap:10px;padding:20px;overflow:auto;min-height:0}.home-world-interaction label{display:grid;gap:6px}.home-world-interaction .home-feature-art{height:110px}.home-world-interaction p{margin:0}.home-world-interaction .home-harvest{overflow:auto}.home-world-tools button:focus-visible{outline:3px solid #27a988}.pp-home.is-world-interaction .home-header{padding:12px 16px}.pp-home.is-world-interaction .home-header h2{font-size:22px}.pp-home.is-world-interaction .home-header button{margin-left:auto}.pp-home.is-world-interaction .home-footer{flex-wrap:wrap} @media(max-width:700px){.home-world-tools{left:10px;bottom:calc(110px + env(safe-area-inset-bottom));padding:3px;gap:0}.home-world-tools button{padding:5px 7px}.home-world-tools button span{display:none}.home-world-tools img{width:32px;height:32px}.pp-home.is-world-interaction{max-height:82dvh}.pp-home.is-world-interaction .home-tabs{display:none}} .home-paint{position:absolute;bottom:0;display:block;overflow:hidden;transform:scaleX(var(--flip,1));pointer-events:none}.home-furniture .home-paint img,.home-ghost .home-paint img{position:absolute;max-width:none;object-fit:fill;transform:none;filter:none} /* v2.88.1: keep the home controls readable without covering the walkable scene. */ .home-header>div{min-width:0} .home-header h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .home-header>button{flex:0 0 auto} .home-tabs{scroll-snap-type:x proximity;scrollbar-width:thin} .home-tabs button{scroll-snap-align:start} .home-zoom{order:-1;padding:6px;border:1px solid #dcebdd;border-radius:14px;background:#f5faf5} .home-zoom button{font-weight:800;background:#fff} .home-zoom button[data-home-zoom="0"]{min-width:72px;font-variant-numeric:tabular-nums} .home-room-door,.home-room-exit,.home-garden-door{z-index:3;border:1px solid #b7dfca!important;border-radius:999px!important;background:#f8fff9ed!important;color:#235a48!important;box-shadow:0 3px 12px #123a2c30;font-weight:800!important;white-space:nowrap} .home-room-door:hover,.home-room-exit:hover,.home-garden-door:hover{background:#ddf4e7!important} .home-context-tools button{background:#f7fff8;border-color:#c8dfcd} @media(max-width:760px){ .pp-home{width:100dvw;max-width:100dvw;padding-top:env(safe-area-inset-top)} .home-header{min-height:64px;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))} .home-header>span{margin-left:auto;flex:0 1 100px;line-height:1.25;text-align:right;font-variant-numeric:tabular-nums} .home-tabs{gap:4px;padding:5px 10px;scroll-padding-inline:10px} .home-tabs button{flex:0 0 auto;padding:8px 12px} .home-aside{padding:14px;gap:10px} .home-zoom{position:relative;top:auto} .home-room-door,.home-room-exit,.home-garden-door{font-size:11px!important;padding:6px 9px!important} .home-context-tools button{min-width:0} } /* pk-style-source:25 */ /* /home-workshop-v2960.css */ /* Room workspace: art stays in authored 4:3 coordinates at every viewport. */ .pp-home.is-workshop{width:min(1540px,98dvw);border-radius:22px} .workshop-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;flex:1;min-height:0;overflow:hidden} .workshop-stage{display:flex;flex-direction:column;min-width:0;min-height:0;padding:16px;gap:10px;background:#12262c} .workshop-scene-frame{position:relative;flex:1;min-height:0;display:grid;place-items:center;container-type:size;background:radial-gradient(ellipse at center,#45606688,#14292f 70%);border-radius:18px;overflow:hidden} .workshop-scene-frame .home-scene{position:absolute;inset:0;margin:auto;width:min(100%,calc(100cqh * 4 / 3));max-width:none;height:auto;flex-shrink:0;box-shadow:0 0 22px 10px #8ba6a32b;border-radius:12px} .workshop-scene-frame .home-floor{touch-action:none;outline:none} .workshop-scene-frame .home-floor:focus-visible{outline:2px solid #d1f8ff;outline-offset:4px} .workshop-scene-toolbar{display:flex;align-items:center;gap:12px;flex-shrink:0;color:#d5e9e9;font-size:12px} .workshop-scene-toolbar>span{margin-right:auto}.workshop-scene-toolbar label{display:flex;align-items:center;gap:6px;min-height:44px;white-space:nowrap} .workshop-scene-toolbar input{min-height:20px;width:20px;accent-color:var(--ui-accent,#1380a0)} .workshop-scene-toolbar button{display:flex;align-items:center;gap:5px} .workshop-panel{padding:0;gap:0;min-width:0;min-height:0;overflow:hidden;display:flex} .workshop-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:10px;border-bottom:1px solid var(--ui-line,#c9dae1);flex-shrink:0} .workshop-tabs button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;padding:8px 3px} .workshop-tabs svg{width:22px;height:22px} .workshop-panel-content{flex:1;min-height:0;overflow:auto;padding:14px;overscroll-behavior:contain;scrollbar-gutter:stable} .workshop-panel-content h3{font-size:18px;margin:0 0 8px}.workshop-panel-content p{margin:8px 0;font-size:12px} .workshop-panel-content svg,.workshop-scene-toolbar svg,.workshop-more svg{width:20px;height:20px;flex-shrink:0} .workshop-object-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px} .workshop-object-actions>button{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;padding:6px} .workshop-angle,.workshop-object-actions .home-nudge{grid-column:1/-1;display:flex;align-items:center;gap:5px}.workshop-angle button{flex:1}.workshop-angle output{width:34px;text-align:center;font-size:12px} .workshop-object-actions .home-nudge button{flex:1;min-width:0}.workshop-selection{display:flex;justify-content:space-between;gap:8px;font-size:12px} .workshop-owned{display:grid;gap:7px;margin-top:14px}.workshop-owned>button{display:flex;align-items:center;gap:9px;text-align:left;padding:8px;min-height:76px} .workshop-owned>button>span:last-child{display:grid;gap:3px;min-width:0}.workshop-owned small{font-size:11px}.workshop-owned-art{width:70px;height:58px;position:relative;flex-shrink:0;overflow:hidden} .workshop-owned-art .home-paint{inset:4% 8%!important;width:84%!important;height:88%!important} .workshop-catalog{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.workshop-catalog article{display:flex;flex-direction:column;gap:5px;padding:10px;min-width:0;background:var(--ui-paper,#f1f7f8);border:1px solid var(--ui-line,#c9dae1);border-radius:14px} .workshop-catalog b{font-size:12px}.workshop-catalog p{font-size:11px;margin:0}.workshop-catalog article>button{margin-top:auto;font-size:12px;padding:7px 4px}.workshop-catalog-art{height:90px;position:relative;overflow:hidden}.workshop-catalog-art .home-paint{inset:4% 5%!important;width:90%!important;height:92%!important} .workshop-search{display:grid;gap:5px;font-size:12px}.workshop-search input{width:100%} .workshop-expansion{margin-top:12px}.workshop-expansion summary{min-height:44px;cursor:pointer;padding:12px 0;font-weight:700;font-size:12px} .workshop-footer{min-height:62px}.workshop-footer>button{flex-shrink:0}.workshop-footer [data-home-mobile-place]{display:block!important;min-width:110px}.workshop-footer p{font-size:12px} .workshop-wallet{display:flex;align-items:center;gap:6px}.home-diamond{display:inline-flex;align-items:center;justify-content:center;gap:5px;vertical-align:middle;white-space:nowrap}.home-diamond img{width:21px!important;height:21px!important;object-fit:contain;transform:none!important;filter:none!important} .workshop-more{position:relative}.workshop-more>summary{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ui-line,#c9dae1);border-radius:12px;cursor:pointer;font-weight:800;list-style:none}.workshop-more>nav{display:grid;gap:5px;position:absolute;right:0;top:50px;width:185px;padding:9px;border:1px solid var(--ui-line,#c9dae1);border-radius:14px;background:var(--ui-card,#fff);z-index:60;box-shadow:0 6px 20px #10273240}.workshop-more nav button{display:flex;gap:8px;align-items:center} .pp-home .home-furniture,.pp-home .home-ghost{transform:rotate(var(--angle,0deg));transform-origin:50% 50%;touch-action:none} .pp-home .home-paint{transform:scaleX(var(--flip,1));transform-origin:50% 50%} .pp-home .home-paint img{transform:none;filter:none;pointer-events:none;max-height:none} .pp-home .home-furniture.is-moving{visibility:hidden;pointer-events:none}.pp-home .home-ghost{opacity:.88}.pp-home .home-ghost.is-valid{background:#1bba7355} .pp-home .home-box-view{max-width:940px}.home-box-view>label{margin-bottom:12px}.home-box-view input{max-width:160px}.home-box-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:14px 0 24px} .pp-home .home-box-slot{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;min-height:105px;padding:8px;border:1px solid var(--ui-line,#c9dae1);border-radius:14px;background:var(--ui-paper,#f1f7f8);gap:4px;min-width:0} .home-box-slot img{width:46px;height:46px;object-fit:contain}.home-box-slot small{font-size:11px;line-height:1.3;text-align:center}.home-box-slot b{position:absolute;right:8px;top:6px;font-size:12px}.home-box-slot.is-empty{border-style:dashed;opacity:.65}.home-box-slot i{font-style:normal;color:var(--ui-muted,#668177)}.home-bag-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.home-bag-list .home-item{margin:0!important} .pp-home .home-plot{transform:translate(-50%,-50%)}.pp-home .home-plot>img{position:absolute;width:74%;height:50%;top:25%;object-fit:contain}.pp-home .home-plot:has([src*="plants/"])>img{top:-35%;height:95%;width:100%}.pp-home .home-plot-number{position:absolute;right:0;top:0;width:18px;height:18px;font-size:10px}.pp-home .home-plot small{position:absolute;top:65%} .home-world-tools .home-workshop-launch{width:90px;height:90px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;box-shadow:0 6px 22px #071d3438}.home-workshop-launch svg{width:34px;height:34px}.home-world-tools .home-workshop-launch span{display:block;font-size:11px;font-weight:800} @layer ui-theme{ html[data-game-theme] .pp-home .workshop-tabs button[aria-pressed=true],html[data-game-theme] .pp-home .workshop-owned button[aria-pressed=true]{background:var(--ui-tint)!important;color:var(--ui-accent)!important;border-color:var(--ui-accent)!important} html[data-game-theme] #gameScreen .home-world-tools .home-workshop-launch{background:var(--ui-card)!important;color:var(--ui-accent)!important;border:1px solid var(--ui-line)!important;transition:none!important} html[data-game-theme] #gameScreen #homeWorkshopTools.home-world-tools{background:transparent!important;box-shadow:none!important;padding:0!important} } /* DOM and visual order are both channels → actions; mobile picker/menu stays native. */ @layer chat-trainers{ html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs{order:0!important} html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions{order:1!important;margin-left:auto!important} } @media(max-width:760px){ .pp-home.is-workshop{width:100dvw;height:100dvh;max-height:100dvh;border-radius:0} .workshop-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,auto) minmax(140px,1fr)} .workshop-stage{padding:8px;gap:5px;max-height:44dvh}.workshop-scene-frame{container-type:normal;flex:none;min-height:0}.workshop-scene-frame .home-scene{position:relative;inset:auto;margin:0;width:min(100%,calc((44dvh - 60px) * 4 / 3))} .workshop-scene-toolbar{gap:8px;justify-content:space-between;font-size:11px}.workshop-scene-toolbar>button{display:none}.workshop-scene-toolbar>span{margin-right:0}.workshop-scene-toolbar label{min-height:40px} .workshop-panel{border-left:0;border-top:1px solid var(--ui-line,#c9dae1)}.workshop-tabs{padding:5px 8px}.workshop-tabs button{flex-direction:row;justify-content:center;min-height:44px;font-size:11px}.workshop-tabs svg{width:18px;height:18px} .workshop-panel-content{padding:10px 12px}.workshop-panel-content h3{font-size:17px}.workshop-owned{grid-template-columns:1fr 1fr}.workshop-owned>button{gap:4px;padding:5px;min-height:64px}.workshop-owned-art{width:45px;height:44px}.workshop-owned b{font-size:11px}.workshop-owned small{font-size:10px} .workshop-object-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.workshop-object-actions .home-nudge{grid-column:auto}.workshop-angle{grid-column:auto}.workshop-angle button{padding:6px;min-width:0}.workshop-angle output{width:24px;flex-shrink:0}.workshop-selection{font-size:11px} .workshop-footer{gap:6px;padding:7px 9px;flex-wrap:wrap;min-height:60px}.workshop-footer p{flex-basis:100%;font-size:11px}.workshop-footer>button{flex:1}.workshop-footer [data-home-mobile-place]{min-width:0}.workshop-wallet{max-width:none!important;font-size:13px!important} .home-box-slots{gap:6px}.pp-home .home-box-slot{min-height:88px;padding:5px}.home-box-slot img{width:34px;height:34px}.home-box-slot small{font-size:9px}.home-bag-list{grid-template-columns:1fr} .home-world-tools .home-workshop-launch{width:76px;height:76px}.home-workshop-launch svg{width:28px;height:28px} } @media(max-height:560px) and (min-width:761px){.workshop-layout{grid-template-columns:minmax(0,1fr) 340px}.workshop-stage{padding:8px}.workshop-footer{min-height:48px}.workshop-header h2{font-size:20px}} @media(max-width:760px){.pp-home.is-workshop .home-header h2{font-size:18px}.workshop-title-room{display:none}.pp-home.is-workshop .home-header>div{min-width:0}} .pp-home.is-workshop .home-header>.workshop-wallet{flex:0 0 auto;min-width:0} @media(max-width:350px){.pp-home.is-workshop .home-header h2{font-size:16px}} @media(max-width:760px) and (max-height:560px) and (orientation:landscape){ .workshop-layout{grid-template-columns:minmax(0,1fr) 46%;grid-template-rows:minmax(0,1fr)} .workshop-stage{max-height:none;padding:5px}.workshop-scene-frame{container-type:size;flex:1} .workshop-scene-frame .home-scene{position:absolute;inset:0;margin:auto;width:min(100%,calc(100cqh * 4 / 3))} .workshop-panel{border-left:1px solid var(--ui-line);border-top:0}.workshop-tabs{gap:3px;padding:4px}.workshop-tabs button{font-size:10px;padding:4px}.workshop-tabs svg{width:15px;height:15px} .workshop-footer{flex-wrap:nowrap;min-height:52px}.workshop-footer p{flex:1;font-size:10px}.workshop-footer>button{flex:0 0 auto;padding:6px 8px}.pp-home.is-workshop .home-header{min-height:55px;padding-block:5px} .workshop-angle,.workshop-object-actions .home-nudge{grid-column:1/-1}.workshop-owned{grid-template-columns:1fr} } /* Scene-first room editor. Existing saved coordinates and raster pixels stay intact. */ .pp-home.is-workshop{width:min(1680px,98dvw);} .pp-home.is-workshop .workshop-header{padding:8px 16px;gap:10px;min-height:64px} .pp-home.is-workshop .workshop-header h2{font-size:23px;flex:1;margin:0} .workshop-header svg,.workshop-context svg,.workshop-browser svg,.workshop-dock svg{width:21px;height:21px;flex-shrink:0} .pp-home.is-workshop .workshop-header button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:8px} .pp-home.is-workshop .workshop-layout{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden} .pp-home.is-workshop .workshop-stage{flex:1;max-height:none;padding:6px 10px 0;gap:0} .pp-home.is-workshop .workshop-scene-frame{flex:1;min-height:0;container-type:size;border-radius:10px;overflow:hidden} .pp-home.is-workshop .workshop-scene-frame .home-scene{position:absolute;inset:0;margin:auto;width:min(100%,calc(100cqh * 4 / 3));height:auto} .pp-home.is-workshop .home-room.is-building .home-floor{cursor:default;overflow:visible;touch-action:none} .pp-home.is-workshop .home-furniture{background:transparent!important;border:0!important;border-radius:6px;cursor:grab;outline:0;touch-action:none} .pp-home.is-workshop .home-furniture.is-selected{outline:2px solid #a6e7ff;outline-offset:4px;} .pp-home.is-workshop .home-furniture.is-moving{visibility:hidden;pointer-events:none} .pp-home.is-workshop .home-furniture:focus-visible{outline:3px solid #fff} .pp-home.is-workshop .home-ghost{border:2px dashed #b4eed9;opacity:.95;border-radius:6px;pointer-events:none} .pp-home.is-workshop .home-ghost.is-invalid{border-color:#ff8e89;background:#b1262633!important} .pp-home.is-workshop .workshop-scene-toolbar{height:44px;gap:12px;font-size:11px} .pp-home.is-workshop .workshop-scene-toolbar button{font-size:11px;min-height:36px;padding:5px 9px} .pp-home.is-workshop .workshop-scene-toolbar label{min-height:44px} .workshop-drag-help{position:absolute;top:8px;left:50%;transform:translateX(-50%);padding:5px 12px;border-radius:20px;background:#102a31bd;color:#edf9fc;font-size:11px;white-space:nowrap;pointer-events:none;margin:0} .pp-home.is-workshop .workshop-dock{display:flex;align-items:stretch;gap:10px;padding:8px 12px;background:var(--ui-card,#fff);border-top:1px solid var(--ui-line,#c9dae1);flex-shrink:0;min-height:108px} .workshop-catalog-launch{width:86px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-weight:700} .pp-home.is-workshop .workshop-owned{display:flex;flex:1;gap:8px;overflow-x:auto;margin:0;overscroll-behavior:contain;padding:0 0 3px} .pp-home.is-workshop .workshop-owned>button{flex:0 0 112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:88px;padding:4px;text-align:center;touch-action:none;} .pp-home.is-workshop .workshop-owned b{font-size:11px;line-height:1.2}.pp-home.is-workshop .workshop-owned small{font-size:10px} .pp-home.is-workshop .workshop-owned-art{width:62px;height:46px;flex-shrink:0} .pp-home.is-workshop .workshop-footer{min-height:30px;padding:4px 14px;gap:8px;flex-wrap:nowrap} .pp-home.is-workshop .workshop-footer p{font-size:11px;line-height:1.3;flex:1;margin:0} .pp-home.is-workshop .workshop-context{position:absolute;z-index:12;left:10px;top:10px;width:max-content;max-width:min(460px,calc(100% - 16px));padding:9px;border:1px solid var(--ui-line,#bed4df);border-radius:16px;background:var(--ui-card,#fff);color:var(--ui-ink,#203e50);box-shadow:0 6px 20px #051a2b40;overflow:visible} .pp-home.is-workshop .workshop-context[hidden],.pp-home.is-workshop [hidden]{display:none!important} .workshop-context-name{display:flex;align-items:center;gap:10px;font-size:13px;padding:0 2px 6px}.workshop-context-name small{font-size:11px;color:var(--ui-muted);margin-left:auto} .workshop-context-name button{min-width:44px;min-height:44px;padding:7px}.workshop-context-actions{display:flex;align-items:stretch;gap:5px;flex-wrap:wrap} .pp-home.is-workshop .workshop-context-actions>button,.workshop-fine>summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px;min-height:54px;min-width:54px;font-size:10px;line-height:1.15;text-align:center} .workshop-context-draft{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}.workshop-context-draft span{flex-basis:100%;font-size:11px}.workshop-context-draft button{min-height:44px} .workshop-fine{position:relative}.workshop-fine>summary{border:1px solid var(--ui-line);border-radius:12px;cursor:pointer;list-style:none;color:var(--ui-ink);background:var(--ui-paper)} .workshop-fine[open]>div{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:4px;position:absolute;top:60px;right:0;width:240px;padding:8px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-card);z-index:14;box-shadow:0 5px 20px #051a2b40} .workshop-fine output{text-align:center;font-size:11px}.workshop-fine button{min-height:44px;padding:5px} .pp-home.is-workshop.is-dragging .workshop-context,.pp-home.is-workshop.is-dragging .workshop-drag-help{visibility:hidden;pointer-events:none} .pp-home.is-workshop.is-dragging .home-floor{cursor:grabbing} .pp-home.is-workshop .workshop-browser{position:absolute;z-index:20;inset:12px;margin:auto;width:min(1000px,calc(100% - 24px));max-height:100%;display:flex;flex-direction:column;min-height:0;background:var(--ui-card,#fff);border:1px solid var(--ui-line);border-radius:18px;box-shadow:0 12px 80px 18px #04192390;overflow:hidden} .workshop-browser>header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid var(--ui-line);flex-shrink:0}.workshop-browser h3{margin:0;font-size:22px}.workshop-browser p{margin:3px 0 0;font-size:12px}.workshop-browser>header button{min-width:44px;min-height:44px} .workshop-categories{display:flex;gap:6px;overflow-x:auto;flex-shrink:0;padding:10px 16px;overscroll-behavior:contain}.workshop-categories button{display:flex;align-items:center;gap:5px;white-space:nowrap;min-height:44px;padding:7px 10px} .pp-home.is-workshop .workshop-search{margin:0 16px 10px}.workshop-search input{min-height:44px} .pp-home.is-workshop .workshop-panel-content{padding:0 16px 16px;min-height:0;flex:1} .pp-home.is-workshop .workshop-catalog{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0} .pp-home.is-workshop .workshop-catalog article{padding:12px;gap:7px;background:var(--ui-paper);border-radius:14px} .pp-home.is-workshop .workshop-catalog-art{height:125px}.pp-home.is-workshop .workshop-catalog b{font-size:13px}.pp-home.is-workshop .workshop-catalog small{font-size:11px;color:var(--ui-muted)}.pp-home.is-workshop .workshop-catalog p{font-size:12px;flex:1}.pp-home.is-workshop .workshop-catalog button{min-height:44px;font-size:12px} .workshop-style .home-scene-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.workshop-style .home-scene-options button{width:100%}.workshop-style .home-scene-options img{width:100%;max-height:210px;} .workshop-style [data-room-skin]{display:none} #gameScreen #homeWorkshopTools.home-world-tools{left:auto;right:22px;bottom:224px;z-index:46} #gameScreen #homeWorkshopTools .home-workshop-launch{width:106px;height:106px}.home-workshop-launch svg{width:36px;height:36px} @layer ui-theme{html[data-game-theme] .pp-home.is-workshop .workshop-categories button[aria-pressed=true]{background:var(--ui-tint)!important;color:var(--ui-accent)!important;border-color:var(--ui-accent)!important}html[data-game-theme] .pp-home.is-workshop .home-furniture{background:transparent!important;border:0!important}} @media(max-width:760px){ .pp-home.is-workshop{width:100dvw;height:100dvh;max-height:100dvh;border-radius:0} .pp-home.is-workshop .workshop-header{min-height:52px;padding:4px 8px;gap:5px}.pp-home.is-workshop .workshop-header h2{font-size:17px}.workshop-guests span{display:none} .pp-home.is-workshop .workshop-stage{padding:4px 4px 0}.workshop-drag-help{font-size:10px;max-width:90%;white-space:normal;text-align:center;top:4px} .pp-home.is-workshop .workshop-scene-toolbar{gap:5px;font-size:10px}.pp-home.is-workshop .workshop-scene-toolbar button{min-height:36px;font-size:10px;padding:4px}.pp-home.is-workshop .workshop-scene-toolbar>span{margin-right:auto} .pp-home.is-workshop .workshop-dock{min-height:94px;padding:6px;gap:6px}.workshop-catalog-launch{width:66px;font-size:11px}.pp-home.is-workshop .workshop-owned>button{flex-basis:96px;min-height:80px} .pp-home.is-workshop .workshop-footer{min-height:30px;padding:4px 7px}.pp-home.is-workshop .workshop-footer p{flex-basis:auto;font-size:10px} .pp-home.is-workshop .workshop-context{max-width:calc(100% - 12px);padding:6px;border-radius:12px}.workshop-context-name{font-size:12px;gap:5px}.workshop-context-name small{font-size:10px}.workshop-context-actions{gap:3px} .pp-home.is-workshop .workshop-context-actions>button,.workshop-fine>summary{min-width:44px;min-height:50px;padding:5px;font-size:9px} .pp-home.is-workshop .workshop-browser{inset:4px;width:calc(100% - 8px);border-radius:12px}.workshop-browser>header{padding:7px 10px}.workshop-browser h3{font-size:18px}.workshop-browser p{font-size:11px}.workshop-categories{padding:7px 10px}.workshop-categories button{font-size:11px} .pp-home.is-workshop .workshop-search{margin:0 10px 8px}.pp-home.is-workshop .workshop-panel-content{padding:0 10px 10px}.pp-home.is-workshop .workshop-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pp-home.is-workshop .workshop-catalog-art{height:105px}.pp-home.is-workshop .workshop-catalog article{padding:9px}.pp-home.is-workshop .workshop-catalog p{font-size:11px} #gameScreen #homeWorkshopTools.home-world-tools{right:12px;bottom:210px}#gameScreen #homeWorkshopTools .home-workshop-launch{width:76px;height:76px} } @media(max-height:560px) and (orientation:landscape){.pp-home.is-workshop .workshop-header{min-height:48px;padding-block:2px}.pp-home.is-workshop .workshop-dock{min-height:66px;padding:4px}.pp-home.is-workshop .workshop-owned>button{min-height:58px;flex-basis:96px;display:grid;grid-template-columns:40px 1fr;grid-template-rows:1fr 1fr;text-align:left}.pp-home.is-workshop .workshop-owned-art{width:38px;height:42px;grid-row:1/3}.pp-home.is-workshop .workshop-owned b{font-size:10px}.pp-home.is-workshop .workshop-scene-toolbar{height:36px}.pp-home.is-workshop .workshop-catalog{grid-template-columns:repeat(3,minmax(0,1fr))}.workshop-drag-help{display:none}.pp-home.is-workshop .workshop-footer{min-height:22px}} .pp-home.is-workshop .home-ghost{pointer-events:auto;cursor:grab;min-height:0;padding:0;outline:none;z-index:10}.pp-home.is-workshop.is-dragging .home-ghost{pointer-events:none} .pp-home.is-workshop .workshop-fine[open]{flex-basis:100%}.pp-home.is-workshop .workshop-fine[open]>summary{min-height:44px;padding:5px}.pp-home.is-workshop .workshop-fine[open]>div{position:static;width:100%;margin-top:5px;box-shadow:none;padding:4px;border:0;background:transparent}.pp-home.is-workshop .workshop-fine[open]>div button{min-width:44px} .pp-home.is-workshop .workshop-catalog-art,.pp-home.is-workshop .workshop-owned-art{container-type:size;display:grid;place-items:center}.pp-home.is-workshop .home-thumbnail{position:relative;display:block;overflow:hidden;width:min(92cqw,calc(92cqh * var(--thumb-ratio)));height:min(92cqh,calc(92cqw / var(--thumb-ratio)));flex-shrink:0}.pp-home.is-workshop .home-thumbnail img{position:absolute;max-width:none!important;max-height:none!important;object-fit:fill;transform:none!important;filter:none!important;pointer-events:none}.pp-home.is-workshop .workshop-header button{font-size:12px} @media(pointer:coarse){.pp-home.is-workshop .workshop-owned>button{touch-action:pan-x}} /* Wide rooms share the exact legacy furniture transform, across editor and world. */ .pp-home .home-room{aspect-ratio:16/9;max-width:none} .pp-home.is-workshop .workshop-scene-frame .home-room{width:min(100%,calc(100cqh * 16 / 9))} .pp-home .home-room .home-floor{inset:0;width:100%;height:100%;overflow:visible} .pp-home .home-room .home-grid{background:linear-gradient(to right,#ffffff60 1px,transparent 1px),linear-gradient(to bottom,#ffffff60 1px,transparent 1px);background-size:var(--grid-cw) var(--grid-ch);background-position:var(--grid-x) var(--grid-y);clip-path:var(--floor-outline)} .pp-home .home-room .home-room-door{left:70.096%;top:28.3%;bottom:auto;transform:translate(-50%,-50%)} .pp-home .home-room .home-room-exit{left:50%;top:auto;bottom:1.5%;transform:translateX(-50%)} .workshop-style .home-scene-options img{aspect-ratio:16/9;object-fit:contain} /* Complete cutaway, matching the infinite room backdrop. */ .pp-home.is-workshop .workshop-stage,.pp-home.is-workshop .workshop-scene-frame{background:#05070b} .pp-home .home-room{background:#05070b;border-radius:0;box-shadow:none} .pp-home.is-workshop .home-furniture .home-paint{pointer-events:auto;cursor:grab;touch-action:none} .pp-home .home-room .home-room-door{top:33.5%;font-size:12px;background:var(--ui-card)!important} .pp-home .home-room .home-room-exit{bottom:4%;font-size:12px;background:var(--ui-card)!important} /* Native scroll keeps enlarged furniture usable without a new animation loop. */ .pp-home.is-workshop .workshop-scene-frame{display:block;place-items:start;overflow:auto;overscroll-behavior:contain;--room-zoom:1} .workshop-room-viewport{position:relative;width:max(100%,calc(min(100cqw,100cqh * 16 / 9) * var(--room-zoom)));height:max(100%,calc(min(100cqw,100cqh * 16 / 9) * 9 / 16 * var(--room-zoom)))} .pp-home.is-workshop .workshop-scene-frame .home-room{width:calc(min(100cqw,100cqh * 16 / 9) * var(--room-zoom))} .pp-home.is-workshop .home-room.is-building .home-floor{touch-action:pan-x pan-y} .workshop-room-zoom{display:flex;align-items:center;gap:3px;margin-left:auto} .pp-home.is-workshop .workshop-scene-toolbar{min-height:44px;} @media(max-width:760px){.pp-home.is-workshop .workshop-scene-frame{--room-zoom:1.75}.pp-home.is-workshop .workshop-room-zoom button{min-height:44px;min-width:44px}.pp-home.is-workshop .workshop-scene-toolbar label{min-height:44px}} .pp-home.is-workshop .workshop-stage{position:relative} /* Crafting details use the existing semantic theme and modal scroll surfaces. */ .home-recipe-cost{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0} .home-recipe-cost>span{display:flex;align-items:center;gap:6px;border:1px solid var(--ui-line);border-radius:10px;padding:6px;min-width:0;font-size:12px} .home-recipe-cost img{width:28px;height:28px;object-fit:contain;flex:0 0 auto} .home-recipe-cost b{display:block;font-variant-numeric:tabular-nums} .home-recipe-cost .is-short{border-color:var(--ui-danger,#bd5252)} .home-recipe-cost .is-short b{color:var(--ui-danger,#bd5252)} .home-recipe-card [data-action-hint]{font-size:12px;line-height:1.4;display:block;margin-top:4px} .home-recipe-card details{margin-top:8px}.home-recipe-card summary,.home-bed-styles summary{min-height:44px;cursor:pointer;display:flex;align-items:center} .home-craft-materials{padding:12px;margin:8px 0;border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-card)} .home-craft-materials p{font-size:13px;line-height:1.5;margin:8px 0}.home-craft-materials button{min-height:44px} .home-bed-styles{flex-basis:100%;max-width:100%;padding:0 8px}.home-bed-styles article{border-top:1px solid var(--ui-line);padding:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.home-bed-styles p{font-size:12px} .home-feature{display:grid;gap:10px;min-width:0}.home-feature button,.home-feature select{min-height:44px}.home-feature label{display:grid;gap:5px}.home-feature p{line-height:1.5} .home-world-interaction .home-feature-art{display:flex;align-items:center;justify-content:center}.home-world-interaction .home-feature-art .home-thumbnail{height:100%;width:auto;max-width:100%} .home-award-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;max-height:40vh;overflow:auto} .home-award-choice label{display:flex;gap:8px;align-items:center;border:1px solid var(--ui-line);border-radius:12px;padding:8px;min-height:56px} .home-award-choice img{width:40px;height:40px;object-fit:contain}.home-award-choice span{flex:1;font-size:13px}.home-award-choice input{width:24px;height:24px} .home-showcase-medals{position:absolute;left:10%;top:48%;width:78%;height:27%;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;justify-items:center;pointer-events:none} .home-showcase-medals img{position:static!important;width:60%!important;height:100%!important;object-fit:contain} .home-showcase-medals.is-double{top:36%;height:45%;grid-template-rows:1fr 1fr}.home-showcase-medals.is-double img{width:45%!important} .home-garden-summary{border:1px solid var(--ui-line);background:var(--ui-card);border-radius:14px;padding:10px;margin:8px;position:relative} .home-garden-summary nav{display:flex;flex-wrap:wrap;gap:6px}.home-garden-summary button{min-height:44px;padding:8px 12px;border-radius:12px}.home-garden-summary button[aria-pressed=true]{background:var(--ui-accent-soft,#e4f3fa);font-weight:700} .home-garden-summary p{margin:8px 0 0;font-size:13px}.pp-home [hidden]{display:none!important} @media(max-width:760px){.home-award-choice{grid-template-columns:1fr}.home-recipe-cost{gap:4px}.home-recipe-cost>span{font-size:11px}.home-garden-summary nav{display:grid;grid-template-columns:1fr 1fr}.home-garden-summary button{font-size:12px}.home-bed-styles .home-recipe-cost{flex-basis:100%}} /* /trainer-development-v3.css: deferred, original cascade position */ @media all{:root[data-pk-style-slot="owner-26"]{}} /* /trainer-development-tree.css: deferred, original cascade position */ @media all{:root[data-pk-style-slot="owner-27"]{}} /* pk-style-source:28 */ /* /world-hud-compact.css */ /* First important layer: one responsive geometry above legacy HUD patches. Only the exploration HUD is scoped here; battle and the five-button dock stay unchanged. */ /* The v2680 mobile minimap uses absolute children. Its magnifier opens the camera controls, so the inline desktop stepper stays off the phone HUD. */ @layer hud-v2680 { body:not(.is-battling) #gameScreen #worldMinimapZoom { position:relative!important; width:auto!important; margin:0 8px 8px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; flex:none!important; gap:4px!important; padding:3px!important; min-height:38px!important; border-radius:12px!important; background:#fffffff5!important; box-shadow:0 2px 8px #143d3f16!important; touch-action:manipulation!important; } body:not(.is-battling) #gameScreen #worldMinimapZoom button { display:grid!important; place-items:center!important; flex:none!important; width:36px!important; height:34px!important; min-height:34px!important; padding:0!important; border:0!important; border-radius:9px!important; background:#eaf5fa!important; color:#245c75!important; font:700 23px/1 system-ui!important; box-shadow:none!important; cursor:pointer!important; touch-action:manipulation!important; } body:not(.is-battling) #gameScreen #worldMinimapZoom button:disabled { opacity:.38!important; cursor:default!important; } body:not(.is-battling) #gameScreen #worldMinimapZoom button:focus-visible { outline:2px solid #078da5!important; outline-offset:2px!important; } body:not(.is-battling) #gameScreen #worldMinimapZoom .hud-world-zoom-reset { flex:1!important; width:auto!important; font:700 12px/1 system-ui!important; font-variant-numeric:tabular-nums!important; background:transparent!important; } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { body:not(.is-battling) #gameScreen #worldMinimapZoom { display:none!important; } } } @layer world-hud-compact { body:not(.is-battling) #gameScreen { --compact-profile-width:236px; --compact-map-width:200px; --compact-map-size:112px; --compact-edge: max(12px, env(safe-area-inset-top)); } body:not(.is-battling) #gameScreen .world-topbar { top:var(--compact-edge)!important; left:max(12px, env(safe-area-inset-left))!important; } body:not(.is-battling) #gameScreen .player-chip { display:grid!important; grid-template-columns:36px minmax(0,1fr)!important; width:var(--compact-profile-width)!important; min-width:0!important; height:74px!important; min-height:74px!important; padding:9px!important; gap:8px!important; border-radius:16px!important; backdrop-filter:none!important; box-shadow:0 3px 12px #18394c16!important; } body:not(.is-battling) #gameScreen .player-chip-avatar { width:36px!important; height:36px!important; align-self:center!important; border-width:1px!important; box-shadow:none!important; } body:not(.is-battling) #gameScreen .player-chip-copy { gap:3px!important; min-width:0!important; } body:not(.is-battling) #gameScreen .player-chip-meta, body:not(.is-battling) #gameScreen .player-chip-open-hint { display:none!important; } body:not(.is-battling) #gameScreen .player-chip-identity { display:flex!important; flex-wrap:nowrap!important; gap:5px!important; } body:not(.is-battling) #gameScreen #worldPlayerName { font-size:14px!important; line-height:1.2!important; } body:not(.is-battling) #gameScreen #worldPlayerLevel { font-size:11px!important; padding:0!important; margin:0!important; flex:none!important; } body:not(.is-battling) #gameScreen .player-chip-progress { display:grid!important; grid-template-columns:16px minmax(12px,1fr) auto!important; gap:5px!important; height:17px!important; min-height:0!important; } body:not(.is-battling) #gameScreen .player-chip-progress>small { display:block!important; width:16px!important; height:16px!important; } body:not(.is-battling) #gameScreen .player-chip-progress>small span { display:none!important; } body:not(.is-battling) #gameScreen .player-chip-progress>small::after { display:none!important; } body:not(.is-battling) #gameScreen .player-chip-progress img { width:16px!important; height:16px!important; } body:not(.is-battling) #gameScreen .player-chip-progress>i { height:5px!important; } body:not(.is-battling) #gameScreen .player-chip-progress>em { font-size:11px!important; min-width:0!important; } body:not(.is-battling) #gameScreen #playerStaminaHud { top:calc(var(--compact-edge) + 80px)!important; left:max(12px, env(safe-area-inset-left))!important; width:var(--compact-profile-width)!important; min-width:0!important; max-width:var(--compact-profile-width)!important; min-height:32px!important; height:32px!important; grid-template-columns:100px minmax(0,1fr)!important; padding:4px 9px!important; gap:7px!important; border-radius:12px!important; backdrop-filter:none!important; box-shadow:0 3px 12px #18394c16!important; } body:not(.is-battling) #gameScreen .player-stamina-title { grid-template-columns:22px minmax(0,1fr)!important; gap:5px!important; } body:not(.is-battling) #gameScreen .player-stamina-title img { width:22px!important; height:22px!important; } body:not(.is-battling) #gameScreen .player-stamina-title small { font-size:9px!important; } body:not(.is-battling) #gameScreen .player-stamina-title b { font-size:10px!important; } body:not(.is-battling) #gameScreen .player-stamina-meter { gap:5px!important; grid-template-columns:minmax(0,1fr) auto!important; } body:not(.is-battling) #gameScreen .player-stamina-meter>em { font-size:10px!important; } body:not(.is-battling) #gameScreen .player-stamina-meter>i { height:5px!important; } body:not(.is-battling) #gameScreen .party-hud { top:calc(var(--compact-edge) + 118px)!important; } body:not(.is-battling) #gameScreen #notificationCenterButton { left:calc(var(--compact-profile-width) + 6px)!important; right:auto!important; top:0!important; } body:not(.is-battling) #gameScreen #worldMinimapShell { top:var(--compact-edge)!important; right:max(12px, env(safe-area-inset-right))!important; left:auto!important; display:flex!important; flex-direction:column!important; gap:4px!important; width:var(--compact-map-width)!important; height:auto!important; min-height:0!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; border-radius:12px!important; overflow:visible!important; transition:none!important; backdrop-filter:none!important; } body:not(.is-battling) #gameScreen .world-minimap-topbar { display:contents!important; } body:not(.is-battling) #gameScreen .world-minimap-place { display:none!important; } body:not(.is-battling) #gameScreen .world-minimap-place small { display:none!important; } body:not(.is-battling) #gameScreen .world-minimap-place b { font-size:12px!important; } body:not(.is-battling) #gameScreen #worldMinimapCollapse { position:absolute!important; top:0!important; left:0!important; z-index:2!important; display:grid!important; place-items:center!important; width:28px!important; height:28px!important; min-height:0!important; padding:6px!important; background:#fffffff5!important; border:0!important; border-radius:9px!important; box-shadow:0 2px 5px #18394c16!important; } body:not(.is-battling) #gameScreen #worldMinimapCollapse svg { transform:none!important; } body:not(.is-battling) #gameScreen #worldMinimapShell.is-collapsed #worldMinimapCollapse svg { transform:rotate(180deg)!important; } body:not(.is-battling) #gameScreen .world-minimap-server-meta { position:absolute!important; right:4px!important; bottom:36px!important; z-index:2!important; display:flex!important; align-items:center!important; gap:4px!important; height:24px!important; padding:3px 6px!important; border-radius:8px!important; background:#fffffff5!important; font-size:11px!important; } body:not(.is-battling) #gameScreen .world-minimap-dayphase { display:none!important; } body:not(.is-battling) #gameScreen #worldMinimapWeatherIcon { display:flex!important; width:16px!important; height:16px!important; } body:not(.is-battling) #gameScreen #worldMinimapClock { font-size:11px!important; } body:not(.is-battling) #gameScreen .world-minimap-map-surface { display:block!important; width:100%!important; height:var(--compact-map-size)!important; min-height:0!important; margin:0!important; flex:none!important; order:0!important; overflow:hidden!important; border-radius:12px!important; } body:not(.is-battling) #gameScreen #worldMinimapShell.is-collapsed .world-minimap-map-surface { display:none!important; } body:not(.is-battling) #gameScreen #worldMinimapShell.is-collapsed { padding-top:28px!important; } body:not(.is-battling) #gameScreen #worldMinimapShell.is-collapsed .world-minimap-server-meta { top:0!important; bottom:auto!important; } body:not(.is-battling) #gameScreen .world-minimap-bottombar { display:flex!important; justify-content:flex-end!important; width:100%!important; height:28px!important; min-height:28px!important; padding:0!important; background:transparent!important; border:0!important; gap:4px!important; order:1!important; } body:not(.is-battling) #gameScreen #worldMinimapChannelButton { display:flex!important; flex:none!important; width:auto!important; min-width:0!important; height:28px!important; min-height:28px!important; padding:0 6px!important; gap:3px!important; border-radius:8px!important; background:#fffffff5!important; } body:not(.is-battling) #gameScreen .world-minimap-channel-copy small { display:none!important; } body:not(.is-battling) #gameScreen .world-minimap-channel-copy b { font-size:11px!important; white-space:nowrap!important; } body:not(.is-battling) #gameScreen #worldMinimapChannelPopulation { display:none!important; } body:not(.is-battling) #gameScreen .world-minimap-channel-icon { display:none!important; } body:not(.is-battling) #gameScreen .world-minimap-channel-chevron { display:inline!important; } body:not(.is-battling) #gameScreen #worldMinimapPing { display:inline-flex!important; width:auto!important; min-width:0!important; flex:none!important; height:28px!important; min-height:28px!important; padding:0 5px!important; background:#fffffff5!important; border:0!important; border-radius:8px!important; font-size:10px!important; gap:3px!important; } body:not(.is-battling) #gameScreen #worldMinimapPingValue { font-size:11px!important; line-height:1.2!important; white-space:nowrap!important; } body:not(.is-battling) #gameScreen #worldMinimapChannelMenu { top:calc(100% + 6px)!important; right:0!important; z-index:140!important; width:min(280px, calc(100vw - 24px))!important; max-height:min(280px, calc(100dvh - 270px))!important; overflow:auto!important; } /* ResizeObserver supplies actual map geometry, so collapse never leaves a hole. */ body:not(.is-battling) #gameScreen #questWidget { top:var(--world-goal-top, 246px)!important; right:var(--world-goal-right, 12px)!important; left:auto!important; width:var(--compact-map-width)!important; max-width:var(--compact-map-width)!important; min-width:0!important; height:auto!important; min-height:32px!important; max-height:min(130px, var(--world-goal-max-height, 130px))!important; padding:0!important; border-radius:14px!important; overflow:auto!important; box-shadow:0 3px 12px #18394c16!important; backdrop-filter:none!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-head { min-height:32px!important; padding:0 6px!important; gap:4px!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-head>img { width:18px!important; height:18px!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-head>span { font-size:11px!important; min-width:0!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-head>button { width:28px!important; min-width:28px!important; height:32px!important; min-height:32px!important; padding:5px!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-body { padding:0 8px 8px!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-title, body:not(.is-battling) #gameScreen #questWidget .exp-goal-next { display:-webkit-box!important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 5px!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-title { font-size:12px!important; line-height:1.3!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-next { font-size:11px!important; line-height:1.3!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-foot { flex-wrap:wrap!important; gap:5px!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-foot small { display:none!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-route { min-height:28px!important; font-size:11px!important; padding:5px 7px!important; } @media (min-width:761px) and (max-width:1050px) and (min-height:561px) { body:not(.is-battling) #gameScreen #notificationCenterButton { top:80px!important; } body:not(.is-battling) #gameScreen #worldWallet { left:50%!important; transform:translateX(-50%)!important; width:180px!important; min-width:0!important; padding:3px!important; } body:not(.is-battling) #gameScreen .world-wallet-currency { min-width:0!important; padding:3px!important; gap:4px!important; } body:not(.is-battling) #gameScreen .world-wallet-currency img { width:20px!important; height:20px!important; } body:not(.is-battling) #gameScreen .world-wallet-currency b { font-size:12px!important; } body:not(.is-battling) #gameScreen .world-wallet-currency button { width:24px!important; height:28px!important; min-width:24px!important; } } /* Mobile: one trainer capsule and one map/action cluster. Details appear on demand. */ @media (max-width:760px), (pointer:coarse) and (max-height:560px) { body:not(.is-battling) #gameScreen { --compact-edge:calc(8px + env(safe-area-inset-top)); --compact-map-width:96px; --compact-map-size:88px; --compact-profile-width:clamp(142px, 44vw, 184px); --mobile-window-top:calc(var(--pk-mobile-vv-offset-top, 0px) + 6px + env(safe-area-inset-top)); --mobile-window-height:calc(var(--pk-mobile-vv-height, 100dvh) - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } body:not(.is-battling) #gameScreen .world-topbar { inset:var(--compact-edge) auto auto calc(8px + env(safe-area-inset-left))!important; width:calc(var(--compact-profile-width) + 40px)!important; } body:not(.is-battling) #gameScreen .player-chip { height:56px!important; min-height:56px!important; grid-template-columns:32px minmax(0,1fr)!important; padding:7px 4px 7px 7px!important; gap:6px!important; border:0!important; border-radius:16px 0 0 16px!important; background:#fff!important; box-shadow:none!important; } body:not(.is-battling) #gameScreen .player-chip-avatar { width:32px!important; height:32px!important; } body:not(.is-battling) #gameScreen #worldPlayerName { font-size:12px!important; max-width:90px!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } body:not(.is-battling) #gameScreen #worldPlayerLevel { font-size:10px!important; } body:not(.is-battling) #gameScreen .player-chip-identity { gap:4px!important; } body:not(.is-battling) #gameScreen .player-chip-copy { gap:3px!important; } body:not(.is-battling) #gameScreen .player-chip-progress { grid-template-columns:12px minmax(18px,1fr)!important; height:10px!important; gap:4px!important; } body:not(.is-battling) #gameScreen .player-chip-progress>small, body:not(.is-battling) #gameScreen .player-chip-progress img { width:12px!important; height:12px!important; } body:not(.is-battling) #gameScreen .player-chip-progress>em { display:none!important; } body:not(.is-battling) #gameScreen .player-chip-progress>i { height:4px!important; } body:not(.is-battling) #gameScreen #notificationCenterButton { position:absolute!important; top:0!important; left:var(--compact-profile-width)!important; right:auto!important; display:grid!important; place-items:center!important; width:40px!important; height:56px!important; min-width:40px!important; min-height:44px!important; padding:5px!important; border:0!important; border-radius:0 16px 16px 0!important; background:#fff!important; box-shadow:none!important; } body:not(.is-battling) #gameScreen #notificationCenterButton>span, body:not(.is-battling) #gameScreen #notificationCenterButton img { width:24px!important; height:24px!important; } body:not(.is-battling) #gameScreen #notificationCenterButton [data-notification-badge] { top:6px!important; right:3px!important; min-width:15px!important; height:15px!important; font-size:9px!important; } body:not(.is-battling) #gameScreen :is(#worldWallet,#playerStaminaHud,.party-hud) { display:none!important; } body:not(.is-battling) #gameScreen #worldMinimapShell { right:calc(8px + env(safe-area-inset-right))!important; gap:4px!important; border:0!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; filter:none!important; } body:not(.is-battling) #gameScreen #worldMinimapShell::before, body:not(.is-battling) #gameScreen #worldMinimapShell::after { display:none!important; } body:not(.is-battling) #gameScreen .world-minimap-map-surface { width:var(--compact-map-size)!important; height:var(--compact-map-size)!important; border-radius:50%!important; margin:0 auto!important; border:2px solid #fff!important; background:transparent!important; box-shadow:0 2px 7px #143d3f24!important; } body:not(.is-battling) #gameScreen #worldMinimapCollapse { top:-4px!important; left:-4px!important; width:44px!important; height:44px!important; padding:10px!important; border-radius:50%!important; background:transparent!important; box-shadow:none!important; } body:not(.is-battling) #gameScreen #worldMinimapCollapse svg { width:24px!important; height:24px!important; padding:5px!important; border-radius:50%!important; background:#fff!important; color:#255b73!important; box-shadow:0 1px 4px #143d3f24!important; } body:not(.is-battling) #gameScreen #worldMinimapShell.is-collapsed { padding-top:44px!important; } body:not(.is-battling) #gameScreen #worldMinimapShell.is-collapsed #worldMinimapCollapse { left:26px!important; } body:not(.is-battling) #gameScreen .world-minimap-bottombar { height:44px!important; min-height:44px!important; justify-content:flex-start!important; padding:0!important; border-radius:14px!important; background:#fff!important; box-shadow:0 2px 8px #143d3f1a!important; gap:0!important; } body:not(.is-battling) #gameScreen #worldMinimapChannelButton { width:48px!important; height:44px!important; min-height:44px!important; padding:5px 6px!important; justify-content:center!important; gap:3px!important; border:0!important; background:transparent!important; color:#245c75!important; border-radius:14px 0 0 14px!important; } body:not(.is-battling) #gameScreen .world-minimap-channel-icon { display:none!important; width:17px!important; height:17px!important; } body:not(.is-battling) #gameScreen .world-minimap-channel-copy { display:none!important; } body:not(.is-battling) #gameScreen .world-minimap-channel-chevron { display:none!important; } body:not(.is-battling) #gameScreen .mobile-world-globe { display:block!important; width:18px!important; height:18px!important; color:#2787ac!important; } body:not(.is-battling) #gameScreen .mobile-world-globe svg { display:block!important; width:18px!important; height:18px!important; } body:not(.is-battling) #gameScreen .mobile-world-number { display:block!important; font-size:12px!important; font-weight:800!important; color:#245c75!important; } body:not(.is-battling) #gameScreen #worldMinimapPing { position:absolute!important; top:calc(var(--compact-map-size) - 18px)!important; bottom:auto!important; left:24px!important; height:19px!important; min-height:19px!important; padding:2px 5px!important; z-index:5!important; border-radius:7px!important; background:#163f53ed!important; color:#fff!important; opacity:1!important; line-height:1!important; pointer-events:none!important; } body:not(.is-battling) #gameScreen #worldMinimapPingValue { font-size:10px!important; color:#fff!important; } body:not(.is-battling) #gameScreen .world-minimap-ping-bars { display:none!important; } body:not(.is-battling) #gameScreen #worldMinimapShell.is-collapsed #worldMinimapPing { top:24px!important; left:24px!important; } body:not(.is-battling) #gameScreen #worldMinimapChannelMenu { position:absolute!important; top:calc(100% + 8px)!important; right:0!important; width:min(320px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)))!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 230px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important; padding:12px!important; border-radius:18px!important; overflow:auto!important; background:#fff!important; box-shadow:0 8px 28px #143d3f30!important; } body:not(.is-battling) #gameScreen .mobile-world-details { display:flex!important; align-items:center!important; gap:8px!important; margin-bottom:10px!important; padding-bottom:10px!important; border-bottom:1px solid #ddeaf1!important; } body:not(.is-battling) #gameScreen .mobile-world-details .world-minimap-place { display:block!important; flex:1!important; min-width:0!important; width:auto!important; max-width:none!important; } body:not(.is-battling) #gameScreen .mobile-world-details .world-minimap-place b { display:block!important; width:auto!important; max-width:none!important; font-size:12px!important; line-height:1.4!important; white-space:normal!important; } body:not(.is-battling) #gameScreen .mobile-world-details .world-minimap-server-meta { position:static!important; display:flex!important; height:auto!important; width:auto!important; min-width:0!important; flex:none!important; padding:0!important; background:none!important; } body:not(.is-battling) #gameScreen .mobile-world-details #worldMinimapClock { font-size:12px!important; } body:not(.is-battling) #gameScreen #worldMinimapChannelList button { min-height:44px!important; } body:not(.is-battling) #gameScreen #questWidget { z-index:100!important; transition:none!important; } body:not(.is-battling) #gameScreen #questWidget.is-collapsed { display:none!important; } body:not(.is-battling) #gameScreen .mobile-quest-shortcut { position:relative!important; display:grid!important; place-items:center!important; flex:none!important; width:48px!important; height:44px!important; min-height:44px!important; padding:8px!important; background:transparent!important; border:0!important; border-radius:0 14px 14px 0!important; } body:not(.is-battling) #gameScreen .mobile-quest-shortcut::before { content:''; position:absolute; left:0; top:10px; bottom:10px; width:1px; background:#e3edf2; } body:not(.is-battling) #gameScreen .mobile-quest-shortcut img { width:27px!important; height:27px!important; object-fit:contain!important; } body:not(.is-battling) #gameScreen .mobile-quest-shortcut i:not([hidden]) { position:absolute!important; top:4px!important; right:4px!important; display:grid!important; place-items:center!important; min-width:14px!important; height:14px!important; padding:0 2px!important; border-radius:6px!important; background:#dc7450!important; color:#fff!important; font-size:9px!important; font-style:normal!important; font-weight:800!important; } body:not(.is-battling) #gameScreen .mobile-quest-shortcut[aria-expanded='true'] { background:#edf8fc!important; } body:not(.is-battling) #gameScreen #questWidget:not(.is-collapsed) { width:min(340px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)))!important; max-width:none!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - var(--world-goal-top,146px) - 90px - env(safe-area-inset-bottom))!important; min-height:0!important; border:1px solid #d6e9f2!important; border-radius:18px!important; background:#fff!important; box-shadow:0 8px 28px #143d3f30!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-head { padding:4px 6px!important; min-height:44px!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-toggle { position:relative!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; flex:1!important; width:auto!important; min-width:0!important; min-height:44px!important; height:44px!important; padding:6px!important; gap:7px!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-icon { display:block!important; width:26px!important; height:26px!important; object-fit:contain!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-toggle b { font-size:13px!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-count { display:none!important; } body:not(.is-battling) #gameScreen #questWidget.is-collapsed .exp-goal-head { padding:0!important; min-height:44px!important; } body:not(.is-battling) #gameScreen #questWidget.is-collapsed .exp-goal-toggle { width:48px!important; height:44px!important; min-height:44px!important; padding:8px!important; justify-content:center!important; border-radius:0 14px 14px 0!important; } body:not(.is-battling) #gameScreen #questWidget.is-collapsed .exp-goal-toggle::before { content:''; position:absolute; left:0; top:10px; bottom:10px; width:1px; background:#e3edf2; } body:not(.is-battling) #gameScreen #questWidget.is-collapsed .exp-goal-toggle>span, body:not(.is-battling) #gameScreen #questWidget.is-collapsed .exp-goal-chevron { display:none!important; } body:not(.is-battling) #gameScreen #questWidget.is-collapsed .exp-goal-count { position:absolute!important; top:4px!important; right:4px!important; display:grid!important; place-items:center!important; min-width:14px!important; height:14px!important; padding:0 2px!important; border-radius:6px!important; background:#dc7450!important; color:#fff!important; font-size:9px!important; font-style:normal!important; font-weight:800!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-journal { width:44px!important; min-width:44px!important; min-height:44px!important; height:44px!important; padding:11px!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-body { padding:0 14px 14px!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-title, body:not(.is-battling) #gameScreen #questWidget .exp-goal-next { display:block!important; overflow:visible!important; -webkit-line-clamp:unset!important; margin:0 0 8px!important; font-size:14px!important; line-height:1.45!important; overflow-wrap:anywhere!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-next { color:#567586!important; font-weight:400!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-foot { align-items:center!important; justify-content:space-between!important; gap:8px!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-foot small { display:block!important; font-size:11px!important; } body:not(.is-battling) #gameScreen #questWidget .exp-goal-route { min-height:44px!important; padding:10px 12px!important; font-size:12px!important; } body:not(.is-battling) #gameScreen .joystick { width:116px!important; height:116px!important; } body:not(.is-battling) #gameScreen .joystick>i { width:46px!important; height:46px!important; } body:not(.is-battling) #gameScreen .joystick>em.joystick-run-status-v69 { min-width:94px!important; top:-33px!important; } /* Game windows occupy one safe rectangle; no draggable offsets survive on phones. */ body:not(.is-battling) #gameScreen :is(#sidePanel,#editorPanel,#chatPanel.chat-messenger,#notificationCenter).is-open { position:fixed!important; top:var(--mobile-window-top)!important; bottom:auto!important; left:calc(6px + env(safe-area-inset-left))!important; right:calc(6px + env(safe-area-inset-right))!important; width:auto!important; min-width:0!important; max-width:none!important; height:var(--mobile-window-height)!important; min-height:0!important; max-height:var(--mobile-window-height)!important; margin:0!important; transform:none!important; translate:none!important; border-radius:18px!important; overflow:hidden!important; box-sizing:border-box!important; } body:not(.is-battling) #gameScreen #sidePanel.is-open { padding:10px!important; } body:not(.is-battling) #gameScreen #sidePanel.is-open>.panel-close { position:absolute!important; top:8px!important; right:8px!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; z-index:100!important; } body:not(.is-battling) #gameScreen #sidePanel.is-pokedex-detail .dd-stage { height:clamp(140px,24dvh,220px)!important; min-height:0!important; } body:not(.is-battling) #gameScreen #sidePanel.is-team-panel .exp-roster-head { min-height:48px!important; padding-bottom:10px!important; } body:not(.is-battling) #gameScreen #sidePanel.is-team-panel .exp-roster h1 { font-size:21px!important; } body:not(.is-battling) #gameScreen #sidePanel.is-team-panel .exp-roster-summary { padding:8px 0!important; font-size:12px!important; } body:not(.is-battling) #gameScreen #sidePanel.is-team-panel .exp-roster-member>header { height:26px!important; padding:6px 10px 0!important; } body:not(.is-battling) #gameScreen #sidePanel.is-team-panel .exp-roster-view { grid-template-columns:64px minmax(0,1fr)!important; min-height:76px!important; padding:6px 10px!important; } body:not(.is-battling) #gameScreen #sidePanel.is-team-panel :is(.exp-roster-art,.exp-roster-image,.exp-roster-image img) { width:64px!important; height:64px!important; max-width:64px!important; max-height:64px!important; } body:not(.is-battling) #gameScreen #sidePanel.is-team-panel .exp-roster-copy>b { font-size:15px!important; } body:not(.is-battling) #gameScreen #sidePanel.is-team-panel .exp-roster-copy>small { font-size:12px!important; } body:not(.is-battling) #gameScreen #sidePanel.is-team-panel .exp-roster-vitals { padding:0 10px 6px!important; gap:8px!important; } body:not(.is-battling) #gameScreen #sidePanel.is-team-panel .exp-roster-moves { padding:0 10px 6px!important; min-height:0!important; } body:not(.is-battling) #gameScreen #sidePanel.is-team-panel .exp-roster-member>footer { min-height:48px!important; padding:4px 8px!important; gap:4px!important; } body:not(.is-battling) #gameScreen #sidePanel.is-team-panel .exp-roster-member>footer>button { min-height:44px!important; font-size:11px!important; padding:6px 8px!important; } body:not(.is-battling) #gameScreen #sidePanel.is-trainer-card .tc-top button { min-height:44px!important; min-width:44px!important; } body:not(.is-battling) #gameScreen #sidePanel.is-open .panel-window-grip { display:none!important; } body:not(.is-battling) #gameScreen #sidePanel.is-open #sidePanelContent { min-height:0!important; max-height:100%!important; } body:not(.is-battling) #gameScreen #notificationCenter.is-open { display:flex!important; flex-direction:column!important; padding:12px!important; } body:not(.is-battling) #gameScreen #notificationCenter .notice-tabs { flex:none!important; overflow:auto!important; min-height:52px!important; } body:not(.is-battling) #gameScreen #notificationCenter :is(.notification-center-list,.notice-detail) { flex:1!important; min-height:0!important; overflow:auto!important; } body:not(.is-battling) #gameScreen:has(:is(#sidePanel,#chatPanel,#editorPanel,#notificationCenter).is-open) :is(.world-topbar,#worldMinimapShell,#questWidget,#playerStaminaHud,.party-hud,.joystick) { visibility:hidden!important; pointer-events:none!important; } body:not(.is-battling) #gameScreen #sidePanel.is-open.is-regions-panel { top:var(--pk-mobile-vv-offset-top,0px)!important; left:0!important; right:0!important; height:var(--pk-mobile-vv-height,100dvh)!important; max-height:var(--pk-mobile-vv-height,100dvh)!important; padding:0!important; border-radius:0!important; } body:not(.is-battling) :is(#inventoryItemDialog,#worldChannelConfirm,#professorTransferDialog,#socialInvite,#pvpInvite,#tradeDialog,#marketplaceModal).is-open { top:var(--pk-mobile-vv-offset-top,0px)!important; bottom:auto!important; height:var(--pk-mobile-vv-height,100dvh)!important; max-height:var(--pk-mobile-vv-height,100dvh)!important; box-sizing:border-box!important; } body:not(.is-battling) #marketplaceModal.is-open { align-items:start!important; padding:calc(6px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left))!important; } body:not(.is-battling) #marketplaceModal .marketplace-shell { width:100%!important; height:calc(var(--pk-mobile-vv-height,100dvh) - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important; min-height:0!important; max-height:none!important; border-radius:18px!important; } body:not(.is-battling) #marketplaceModal .marketplace-head { padding:10px 12px!important; gap:8px!important; } body:not(.is-battling) #marketplaceModal .marketplace-head h2 { font-size:20px!important; } body:not(.is-battling) #marketplaceModal .marketplace-head>button { width:44px!important; height:44px!important; min-width:44px!important; } body:not(.is-battling) #marketplaceModal .marketplace-tabs button { min-height:44px!important; } body:not(.is-battling) #marketplaceModal .marketplace-grid { grid-template-columns:minmax(0,1fr)!important; } body:not(.is-battling) #marketplaceModal .market-card { grid-template-columns:88px minmax(0,1fr)!important; grid-template-rows:auto!important; } body:not(.is-battling) #marketplaceModal .market-card__visual { min-height:96px!important; } body:not(.is-battling) #marketplaceModal .market-card__visual img { width:72px!important; height:72px!important; } body:not(.is-battling) #marketplaceModal .market-card__visual small { left:4px!important; top:6px!important; max-width:80px!important; } body:not(.is-battling) #marketplaceModal .market-card__body { min-width:0!important; padding:10px!important; gap:6px!important; } body:not(.is-battling) #marketplaceModal .market-card p { min-height:0!important; } body:not(.is-battling) #marketplaceModal .market-card__actions button { min-height:44px!important; font-size:11px!important; } body:not(.is-battling):has(:is(#inventoryItemDialog,#worldChannelConfirm,#professorTransferDialog,#socialInvite,#pvpInvite,#tradeDialog,#marketplaceModal).is-open) #gameScreen :is(.world-topbar,#worldMinimapShell,#questWidget,#playerStaminaHud,.party-hud,.joystick) { visibility:hidden!important; pointer-events:none!important; } html[data-mobile-keyboard='open'] body:not(.is-battling) #gameScreen { --mobile-window-height:calc(var(--pk-mobile-vv-height,100dvh) - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } } @media (max-height:560px) and (orientation:landscape) { body:not(.is-battling) #gameScreen { --compact-map-size:72px; } body:not(.is-battling) #gameScreen #worldMinimapChannelMenu { max-height:calc(var(--pk-mobile-vv-height,100dvh) - 210px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important; } } } /* The world roster is a single entry; the full four-person list opens in the trainer card. */ @layer world-hud-compact { @media (min-height:561px) { body:not(.is-battling) #gameScreen #partyHud:not([hidden]){display:block!important;left:max(8px,env(safe-area-inset-left))!important;top:calc(max(10px,env(safe-area-inset-top)) + 138px)!important;width:clamp(148px,46vw,236px)!important;max-width:calc(100vw - 16px)!important} body:not(.is-battling) #gameScreen #partyHud [data-party-open]{width:100%!important;min-height:48px!important;height:48px!important;grid-template-columns:30px minmax(0,1fr)!important;padding:6px!important;gap:6px!important;pointer-events:auto!important} body:not(.is-battling) #gameScreen #partyHud .party-hud-avatar{width:30px!important;height:30px!important} body:not(.is-battling) #gameScreen #partyHud .party-hud-copy{display:grid!important;width:auto!important;height:auto!important;gap:2px!important;min-width:0!important;background:none!important} body:not(.is-battling) #gameScreen #partyHud .party-hud-identity b{font:700 12px/1.2 system-ui!important} body:not(.is-battling) #gameScreen #partyHud .party-hud-relation{font:500 10px/1.2 system-ui!important} body:not(.is-battling) #gameScreen #partyHud .party-hud-lead{display:none!important} } } /* pk-style-source:29 */ /* /styles.css */ :root { --blue: #087bd6; --deep: #082f55; --ink: #14324d; --muted: #628097; --cream: #fffdf7; --line: #cadde9; --yellow: #ffc928; --green: #62c63d; --location-accent: #72c63d; color-scheme: light; font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif; } * { box-sizing: border-box; } html { width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; background: #071e35; } body { position: fixed; inset: 0; width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #071e35; color: var(--ink); } button, input { font: inherit; } button { cursor: pointer; -webkit-tap-highlight-color: transparent; } button:focus-visible, input:focus-visible { outline: 3px solid rgba(16,143,235,.35); outline-offset: 2px; } #app { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-height: 100dvh; min-height: 0; overflow: clip; contain: strict; background: #071e35; } .home-screen, .game-screen { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; } #app[data-screen="home"] .game-screen, #app[data-screen="game"] .home-screen { visibility: hidden; pointer-events: none; } .atlas-cell { display: block; background-image: var(--atlas); background-repeat: no-repeat; background-size: var(--atlas-size); background-position: var(--atlas-x) var(--atlas-y); } .ui-icon { display: block; width: 1em; height: 1em; overflow: visible; fill: none; color: currentColor; } .icon-slot { display: inline-grid; place-items: center; flex: 0 0 auto; } /* Home */ .home-screen { isolation: isolate; overflow: hidden; background: #2f8f51; } .home-backdrop { position: absolute; inset: -3%; z-index: -3; background: url('/assets/v2.6/maps/trainer-grove-v269.png') 50% 52% / cover no-repeat; transform: scale(1.03); filter: saturate(1.08) contrast(1.03); } .home-vignette { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg,rgba(2,31,52,.74) 0%,rgba(2,42,60,.22) 45%,rgba(2,28,51,.2) 100%),linear-gradient(0deg,rgba(1,20,38,.65),transparent 42%); } .home-topbar { position: absolute; z-index: 3; top: max(22px,env(safe-area-inset-top)); left: max(28px,env(safe-area-inset-left)); right: max(28px,env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; gap: 18px; } .brand { display: flex; align-items: center; gap: 10px; color: white; text-shadow: 0 3px 10px rgba(0,25,48,.32); } .brand-mark { display: grid; place-items: center; width: 49px; height: 49px; border: 0; border-radius: 16px; background: transparent; box-shadow: 0 8px 22px rgba(0,30,60,.3); color: #ffda3a; font-size: 26px; } .brand-mark .ui-icon { width: 30px; height: 30px; } .brand-mark img { display: block; width: calc(100% + 6px); height: calc(100% + 6px); max-width: none; margin: -3px; object-fit: contain; } .brand b { display: block; font-size: clamp(24px,3vw,39px); font-weight: 1000; letter-spacing: -2.5px; line-height: .9; } .brand b span { color: #ffcf27; } .brand small { display: block; margin-top: 5px; font-size: 8px; font-weight: 900; letter-spacing: 2px; } .home-resources { display: flex; gap: 8px; } .home-resources span { display: flex; align-items: center; gap: 5px; padding: 11px 15px; border: 1px solid rgba(255,255,255,.8); border-radius: 16px; background: rgba(255,253,247,.91); box-shadow: 0 8px 25px rgba(0,31,58,.2); color: #17466e; font-size: 12px; backdrop-filter: blur(12px); } .home-resources .ui-icon { width: 18px; height: 18px; } .home-resources span:first-child { color: #c28700; } .hero-card { position: absolute; z-index: 2; left: max(5vw,env(safe-area-inset-left)); top: 50%; width: min(430px,42vw); padding: 24px; transform: translateY(-46%); border: 1px solid rgba(255,255,255,.85); border-radius: 28px; background: rgba(255,253,247,.93); box-shadow: 0 26px 75px rgba(0,28,50,.4); backdrop-filter: blur(16px); } .hero-card-head { display: flex; align-items: center; gap: 14px; } .avatar-ring { position: relative; flex: 0 0 76px; height: 76px; overflow: hidden; border: 4px solid #80ccff; border-radius: 22px; background: #e6f6ff; box-shadow: inset 0 0 0 2px white; } .hero-card-head small { display: block; color: var(--blue); font-size: 8px; font-weight: 950; letter-spacing: 1.4px; } .hero-card-head strong { display: block; margin: 1px 0; font-size: 27px; letter-spacing: -.8px; } .hero-card-head em { color: #627f95; font-size: 10px; font-style: normal; font-weight: 700; } .xp-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin: 15px 0; } .xp-row > span { height: 10px; overflow: hidden; border-radius: 8px; background: #d3e2eb; } .xp-row i { display: block; width: 58%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#08a5ff,#086bce); } .xp-row b { color: #41627b; font-size: 9px; } .hero-card > p { margin: 0 0 17px; color: #4d6c82; font-size: 11px; line-height: 1.5; } .name-field { display: grid; grid-template-columns: 102px 1fr; align-items: center; gap: 8px; color: #59748a; font-size: 10px; font-weight: 850; } .name-field input { width: 100%; height: 42px; padding: 0 13px; border: 1px solid #bfd5e3; border-radius: 12px; background: white; color: var(--ink); font-weight: 850; } .skin-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 11px 0; } .skin-picker button { display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 6px; min-height: 45px; padding: 4px 8px; overflow: hidden; border: 1px solid #c8dbe7; border-radius: 13px; background: white; color: #577389; text-align: left; font-size: 8px; font-weight: 900; } .skin-picker button.is-active { border: 2px solid var(--blue); background: #e9f6ff; color: #075ea8; } .trainer-mini { width: 34px; height: 38px; background-image: url('/assets/v1.4/trainers/trainer-male-walk-8dir-6f.png'); background-repeat: no-repeat; background-size: 600% 800%; background-position: 0 0; } .trainer-mini.female { background-image: url('/assets/v1.4/trainers/trainer-female-walk-8dir-6f.png'); } .primary-cta { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; min-height: 54px; border: 0; border-bottom: 4px solid #064c96; border-radius: 15px; background: linear-gradient(180deg,#149cf3,#0872c9); color: white; box-shadow: 0 10px 24px rgba(4,111,195,.28); font-size: 12px; font-weight: 1000; letter-spacing: .6px; } .primary-cta span { font-size: 20px; } .primary-cta .ui-icon { width: 20px; height: 20px; } .foundation-status { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #d8e4eb; } .foundation-status > i { width: 9px; height: 9px; border-radius: 50%; background: #5dca3d; box-shadow: 0 0 0 4px #daf4d2; } .foundation-status b, .foundation-status small { display: block; } .foundation-status b { font-size: 9px; } .foundation-status small { margin-top: 2px; color: #6d8496; font-size: 8px; } .home-showcase { position: absolute; z-index: 1; right: 6vw; top: 14%; bottom: 4%; width: min(47vw,690px); pointer-events: none; } .trainer-showcase { position: absolute; left: 6%; bottom: 0; width: min(27vw,390px); aspect-ratio: 3/4; background: url('/assets/v1.4/trainers/trainer-male-walk-8dir-6f.png') 0 0 / 600% 800% no-repeat; filter: drop-shadow(0 22px 14px rgba(0,23,42,.35)); } .home-showcase > span { position: absolute; right: 2%; top: 12%; min-width: 180px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.7); border-radius: 17px; background: rgba(4,47,78,.76); color: white; backdrop-filter: blur(10px); } .home-showcase small, .home-showcase b, .home-showcase em { display: block; } .home-showcase small { color: #8fe9ff; font-size: 7px; font-weight: 950; letter-spacing: 1px; } .home-showcase b { margin: 3px 0; font-size: 20px; } .home-showcase em { color: #d8effa; font-size: 9px; font-style: normal; } .prototype-note { position: absolute; z-index: 3; left: 50%; bottom: max(10px,env(safe-area-inset-bottom)); transform: translateX(-50%); color: rgba(255,255,255,.78); font-size: 7px; font-weight: 800; letter-spacing: .8px; text-shadow: 0 2px 7px #001c34; } /* World */ .game-screen { overflow: hidden; background: #76b84b; } #gameCanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; touch-action: none; } .world-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(3,25,44,.27),transparent 18%,transparent 76%,rgba(2,27,47,.18)); } .world-topbar { position: absolute; z-index: 15; top: max(16px,env(safe-area-inset-top)); left: max(18px,env(safe-area-inset-left)); right: max(18px,env(safe-area-inset-right)); display: grid; grid-template-columns: minmax(190px,1fr) auto minmax(190px,1fr); gap: 12px; pointer-events: none; } .player-chip, .world-location, .instance-chip { border: 1px solid rgba(255,255,255,.85); background: rgba(255,253,247,.92); box-shadow: 0 12px 34px rgba(0,30,55,.25); backdrop-filter: blur(12px); pointer-events: auto; } .player-chip { justify-self: start; display: flex; align-items: center; gap: 9px; min-width: 205px; min-height: 55px; padding: 7px 11px 7px 7px; border-radius: 17px; } .player-chip-avatar { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px; background: linear-gradient(145deg,#1a9bf0,#075cad); color: white; font-weight: 1000; } .player-chip b, .player-chip small { display: block; } .player-chip b { font-size: 11px; } .player-chip small { margin-top: 3px; color: #648095; font-size: 8px; } #connectionDot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #e7a72e; } #connectionDot.is-online { background: #58c638; box-shadow: 0 0 0 3px rgba(88,198,56,.18); } .world-location { display: grid; grid-template-columns: 32px 1fr 14px; align-items: center; gap: 8px; min-width: 235px; min-height: 55px; padding: 7px 12px; border-radius: 17px; color: var(--ink); text-align: left; } .location-pin { display: grid; place-items: center; width: 32px; height: 38px; border-radius: 11px; background: color-mix(in srgb,var(--location-accent) 17%,white); color: var(--location-accent); font-size: 21px; } .location-pin .ui-icon { width: 22px; height: 22px; } .world-location small, .world-location b { display: block; } .world-location small { color: var(--location-accent); font-weight: 950; letter-spacing: 1.1px; } .world-location b { margin-top: 2px; } .world-location > i { color: #7890a2; font-style: normal; } .world-location > i .ui-icon { width: 14px; height: 14px; } .instance-chip { justify-self: end; display: flex; align-items: center; gap: 8px; min-width: 210px; min-height: 55px; padding: 8px 12px; border-radius: 17px; } .signal-bars { color: var(--blue); font-size: 23px; } .signal-bars .ui-icon { width: 23px; height: 23px; } .instance-chip b, .instance-chip small { display: block; } .instance-chip b { font-size: 10px; } .instance-chip small { margin-top: 2px; color: #648095; font-size: 7px; } .world-rail { position: absolute; z-index: 18; left: max(18px,env(safe-area-inset-left)); top: 50%; display: grid; width: 78px; transform: translateY(-47%); border: 1px solid rgba(211,226,235,.95); background: rgba(255,253,248,.96); box-shadow: 0 20px 48px rgba(0,31,54,.24); backdrop-filter: blur(16px); } .world-rail button { position: relative; display: grid; place-items: center; align-content: center; gap: 3px; min-height: 56px; border-radius: 16px; background: transparent; transition: transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease; } .world-rail button:hover { transform: translateY(-1px); border-color: #d8e8f1; background: #f4faff; color: #0877c9; box-shadow: 0 7px 16px rgba(19,92,135,.09); } .world-rail button.is-active { border-color: #c8e3f5; background: #e4f3fc; color: var(--blue); box-shadow: inset 0 0 0 1px rgba(11,143,224,.06); } .world-rail button span { font-size: 24px; line-height: 1; } .world-rail button span .ui-icon { width: 23px; height: 23px; } .world-rail button span .art-icon { width: 31px; height: 31px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,48,77,.12)); } .world-rail button b { max-width: 62px; overflow: hidden; color: currentColor; font-size: 7px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; } .world-rail button[data-panel="chat"], .world-rail button[data-panel="home"] { margin-top: 4px; } .world-rail button > i { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border: 2px solid #fffdf8; border-radius: 9px; background: #ef4f45; color: white; font-size: 7px; font-style: normal; box-shadow: 0 3px 8px rgba(130,28,22,.2); } .movement-zone { display: none; } .joystick { position: fixed; z-index: 30; display: none; width: 94px; height: 94px; transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(5,47,77,.38); box-shadow: inset 0 0 0 12px rgba(255,255,255,.06); pointer-events: none; } .joystick > span { position: absolute; inset: 23px; border: 1px dashed rgba(255,255,255,.3); border-radius: 50%; } .joystick > i { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,.82); border-radius: 50%; background: linear-gradient(145deg,#1da6f2,#0768bb); box-shadow: 0 8px 19px rgba(0,27,49,.33); } .mobile-actions { display: none; } .context-action { position: absolute; z-index: 19; right: max(22px,env(safe-area-inset-right)); bottom: max(24px,env(safe-area-inset-bottom)); display: grid; grid-template-columns: 56px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: 12px; min-width: 252px; min-height: 78px; padding: 9px 16px 9px 9px; transform: translateY(12px) scale(.96); border: 1px solid #d6e4ec; border-bottom: 4px solid #efbe2f; border-radius: 22px; background: rgba(255,253,248,.98); color: #183f5a; box-shadow: 0 18px 44px rgba(0,31,54,.24); opacity: 0; pointer-events: none; transition: opacity .18s,transform .18s,border-color .18s,box-shadow .18s; backdrop-filter: blur(14px); } .context-action.is-ready { transform: none; border-color: #f0c332; opacity: 1; pointer-events: auto; animation: actionPulse 1.8s ease-in-out infinite; } .context-action > span { grid-row: 1 / 3; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #e5b51d; border-radius: 18px; background: linear-gradient(145deg,#ffdc52,#f4b91d); color: #6b4300; font-size: 24px; font-weight: 1000; box-shadow: inset 0 1px 0 rgba(255,255,255,.55),0 5px 12px rgba(158,104,0,.14); } .context-action > span .ui-icon { width: 25px; height: 25px; } .context-action > span .context-art-icon { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(89,50,0,.14)); } .context-action b, .context-action small { display: block; min-width: 0; text-align: left; } .context-action b { align-self: end; font-size: 13px; line-height: 1.1; font-weight: 900; } .context-action small { align-self: start; max-width: 170px; overflow: hidden; color: #688399; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .context-action.is-battle-action { border-bottom-color: #e99328; box-shadow: 0 16px 38px rgba(0,31,54,.24),0 0 0 1px rgba(239,164,47,.12); } .context-action.is-battle-action > span { border-color: #eb9827; background: linear-gradient(145deg,#ffd24a,#f4a624); } .context-action.is-quest-target { border-color:#80c6ff; border-bottom-color:#2990f3; box-shadow:0 18px 44px rgba(0,31,54,.24),0 0 0 3px rgba(88,175,255,.15); } .context-action.is-quest-target > span { border-color:#4aaeff; background:linear-gradient(145deg,#c8eeff,#69baff); color:#0b4f8b; } .context-action small kbd { display:inline-grid; place-items:center; min-width:26px; height:20px; margin-left:4px; padding:0 6px; border:1px solid #bdd6e6; border-bottom:2px solid #9bb9cc; border-radius:7px; background:linear-gradient(#fff,#edf5f8); color:#143b5a; font:900 10px/1 system-ui; vertical-align:middle; } @keyframes actionPulse { 50% { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,31,54,.28),0 0 0 4px rgba(255,210,62,.13); } } .quick-hint { position: absolute; z-index: 12; left: 50%; bottom: 18px; padding: 7px 12px; transform: translateX(-50%); border-radius: 10px; background: rgba(3,39,66,.66); color: #e6f5fc; font-size: 8px; backdrop-filter: blur(8px); } .loot-feed { position: absolute; z-index: 16; left: 106px; bottom: 24px; display: grid; grid-template-columns: 36px auto; align-items: center; gap: 8px; min-width: 245px; padding: 9px 12px; transform: translateY(20px); border: 1px solid rgba(255,255,255,.65); border-radius: 15px; background: rgba(4,45,73,.75); color: white; opacity: .72; transition: .24s; backdrop-filter: blur(10px); } .loot-feed.is-active { transform: none; border-color: #ffe162; background: rgba(4,45,73,.94); opacity: 1; } .loot-feed > span { grid-row: 1/3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #f8c82b; color: #634500; font-size: 19px; } .loot-feed > span .ui-icon, .loot-item-icon { width: 25px; height: 25px; } .loot-feed b, .loot-feed small { display: block; } .loot-feed b { font-size: 9px; } .loot-feed small { color: #c7dfeb; font-size: 7px; } /* Panels */ .side-panel, .editor-panel, .chat-panel { position: absolute; z-index: 40; border: 1px solid rgba(255,255,255,.9); background: rgba(255,253,248,.97); box-shadow: 0 26px 70px rgba(0,25,47,.4); backdrop-filter: blur(17px); } .side-panel { width: min(480px,calc(100vw - 120px)); overflow: hidden auto; transform: translateX(calc(100% + 35px)); border-radius: 26px; transition: transform .25s cubic-bezier(.2,.82,.24,1); } .side-panel.is-open { transform: none; } .panel-close { position: sticky; z-index: 4; top: 0; float: right; width: 36px; height: 36px; border: 0; border-radius: 11px; background: #e9f4fa; color: #365f7c; font-size: 22px; } .panel-close .ui-icon, .editor-head button .ui-icon, .chat-head button .ui-icon, .starter-close .ui-icon { width: 18px; height: 18px; margin: auto; } .sheet-handle { display: none; } .panel-eyebrow { color: var(--location-accent); font-size: 8px; font-weight: 1000; letter-spacing: 1.4px; } .panel-title { margin: 4px 42px 5px 0; font-size: 28px; letter-spacing: -.8px; } .panel-lead { margin: 0 0 18px; color: #57758b; font-size: 11px; } .region-grid { display: grid; gap: 12px; } .region-card { overflow: hidden; border: 1px solid #c9dce7; border-radius: 19px; background: white; box-shadow: 0 7px 18px rgba(12,62,94,.08); } .region-card.is-current { border: 2px solid var(--region-accent); } .region-preview { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 136px; padding: 13px; overflow: hidden; background-position: center; background-size: cover; color: white; } .region-preview span { position: absolute; top: 10px; left: 10px; padding: 5px 7px; border-radius: 8px; background: var(--region-accent); font-size: 7px; font-weight: 1000; letter-spacing: .8px; } .region-preview b { font-size: 20px; text-shadow: 0 2px 8px #001f36; } .region-preview small { font-size: 8px; } .region-card > p { min-height: 35px; margin: 10px 12px 5px; color: #58758a; font-size: 9px; line-height: 1.4; } .region-drops { display: flex; align-items: center; gap: 7px; margin: 5px 12px 10px; } .region-drops > i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: #fff5cb; color: #b37c00; font-style: normal; } .region-drops > i .ui-icon { width: 17px; height: 17px; } .region-card > button span .ui-icon { width: 15px; height: 15px; } .region-drops b, .region-drops small { display: block; } .region-drops b { font-size: 8px; } .region-drops small { color: #668096; font-size: 7px; } .region-card > button { display: flex; justify-content: space-between; align-items: center; width: calc(100% - 20px); min-height: 39px; margin: 0 10px 10px; padding: 0 13px; border: 0; border-bottom: 3px solid color-mix(in srgb,var(--region-accent) 70%,#17466e); border-radius: 11px; background: var(--region-accent); color: white; font-size: 9px; font-weight: 1000; } .region-card > button:disabled { border-bottom-color: #9eb0bd; background: #c8d5dc; color: #657d8e; cursor: default; } /* Kanto atlas: every regional location is visible as a connected map node. */ .side-panel.is-regions-panel { width: min(760px,calc(100% - 128px)); } .kanto-atlas-shell, .kanto-directory { margin-top: 14px; overflow: hidden; border: 1px solid #cbdfe9; border-radius: 22px; background: rgba(251,254,255,.98); box-shadow: 0 12px 30px rgba(9,55,82,.09); } .kanto-atlas-shell > header, .kanto-directory > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px 11px; } .kanto-atlas-shell > header small, .kanto-directory > header small { display: block; color: #1689c8; font-size: 8px; font-weight: 1000; letter-spacing: .1em; } .kanto-atlas-shell > header b, .kanto-directory > header b { display: block; margin-top: 2px; color: #173e58; font-size: 16px; line-height: 1.15; } .kanto-atlas-shell > header em, .kanto-directory > header em { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #e7f7ee; color: #168c55; font-size: 9px; font-style: normal; font-weight: 950; } .kanto-atlas-legend { display: flex; align-items: center; gap: 12px; padding: 0 16px 10px; color: #6e8798; font-size: 8px; font-weight: 850; } .kanto-atlas-legend span { display: inline-flex; align-items: center; gap: 5px; } .kanto-atlas-legend span::before { width: 9px; height: 9px; border-radius: 50%; background: #9eafba; content: ''; } .kanto-atlas-legend span.is-current::before { background: #ffbd2e; box-shadow: 0 0 0 3px rgba(255,189,46,.22); } .kanto-atlas-legend span.is-open::before { background: #22b879; } .kanto-atlas-legend small { margin-left: auto; color: #8ca0ae; font-size: 8px; } .kanto-atlas-scroll { overflow: auto hidden; border-block: 1px solid rgba(172,205,220,.75); background: #8ed2b1; scrollbar-color: #46a38b #d9eee7; scrollbar-width: thin; overscroll-behavior-inline: contain; } .kanto-atlas-scroll:focus-visible { outline: 3px solid rgba(40,151,225,.3); outline-offset: -3px; } .kanto-atlas-canvas { position: relative; width: 1000px; height: 530px; overflow: hidden; background: radial-gradient(ellipse at 14% 20%,rgba(255,255,255,.7) 0 3%,transparent 3.5%), radial-gradient(ellipse at 78% 72%,rgba(255,255,255,.4) 0 4%,transparent 4.5%), repeating-radial-gradient(ellipse at 46% 44%,transparent 0 30px,rgba(21,113,78,.08) 31px 33px,transparent 34px 58px), linear-gradient(145deg,#bde8bc 0%,#82cfa1 46%,#7abf91 100%); } .kanto-atlas-canvas::before { position: absolute; inset: 0; background: radial-gradient(ellipse at 13% 78%,rgba(255,232,151,.65) 0 8%,transparent 8.5%), radial-gradient(ellipse at 70% 20%,rgba(65,146,84,.3) 0 11%,transparent 11.5%), radial-gradient(ellipse at 40% 72%,rgba(58,139,80,.25) 0 12%,transparent 12.5%); content: ''; pointer-events: none; } .kanto-atlas-water { position: absolute; right: -45px; bottom: -80px; width: 410px; height: 255px; transform: rotate(-8deg); border: 8px solid rgba(255,255,255,.3); border-radius: 50%; background: repeating-radial-gradient(ellipse at 40% 30%,#68c7e8 0 14px,#74d0eb 16px 28px); opacity: .82; pointer-events: none; } .kanto-atlas-canvas > svg { position: absolute; z-index: 1; inset: 0; width: 1000px; height: 530px; overflow: visible; pointer-events: none; } .kanto-atlas-canvas line { stroke: rgba(55,85,78,.3); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 5 10; } .kanto-atlas-canvas line.is-open { stroke: rgba(255,255,255,.96); stroke-width: 8; stroke-dasharray: none; filter: drop-shadow(0 2px 1px rgba(23,97,73,.22)); } .kanto-atlas-node { position: absolute; z-index: 3; left: var(--node-x); top: var(--node-y); display: grid; justify-items: center; gap: 4px; width: 88px; min-height: 64px; padding: 4px 3px; transform: translate(-50%,-50%); border: 0; background: transparent; color: #23485c; cursor: pointer; } .kanto-atlas-node > i { display: grid; place-items: center; width: 31px; height: 31px; border: 3px solid rgba(255,255,255,.96); border-radius: 50%; background: #7e929c; color: white; box-shadow: 0 4px 9px rgba(11,65,69,.24); font-size: 9px; font-style: normal; font-weight: 1000; transition: transform .16s,box-shadow .16s; } .kanto-atlas-node > i .ui-icon { width: 15px; height: 15px; } .kanto-atlas-node > span { display: block; max-width: 86px; padding: 3px 5px; overflow: hidden; border-radius: 7px; background: rgba(250,254,251,.9); box-shadow: 0 2px 7px rgba(16,71,64,.12); font-size: 7px; font-weight: 950; line-height: 1.08; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .kanto-atlas-node.is-open > i { background: var(--node-accent,#20aa73); } .kanto-atlas-node.is-city > i { width: 37px; height: 37px; border-radius: 12px; background: #168fd3; } .kanto-atlas-node.is-special > i { border-radius: 10px; background: #7855c7; } .kanto-atlas-node.is-current > i { background: #ffb51e; color: #5e4100; box-shadow: 0 0 0 7px rgba(255,189,46,.25),0 7px 15px rgba(90,64,5,.3); animation: kantoCurrentPulse 1.8s ease-in-out infinite; } .kanto-atlas-node:not(:disabled):hover > i { transform: translateY(-3px) scale(1.1); box-shadow: 0 8px 15px rgba(11,65,69,.3); } .kanto-atlas-node:disabled { cursor: default; } .kanto-atlas-node.is-locked { opacity: .78; } .kanto-atlas-node.is-locked > span { color: #647d89; } @keyframes kantoCurrentPulse { 50% { transform: translateY(-2px) scale(1.06); } } .kanto-atlas-shell > footer { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 11px 13px 13px; } .kanto-atlas-shell > footer > span { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: center; min-width: 0; padding: 8px; border-radius: 12px; background: #eef7fa; color: #39728f; } .kanto-atlas-shell > footer .ui-icon { grid-row: 1/3; width: 21px; height: 21px; } .kanto-atlas-shell > footer b, .kanto-atlas-shell > footer small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kanto-atlas-shell > footer b { color: #224e68; font-size: 9px; } .kanto-atlas-shell > footer small { font-size: 8px; } .kanto-directory { margin-bottom: 14px; } .kanto-chapter-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0 12px 13px; } .kanto-chapter { min-width: 0; padding: 9px; border: 1px solid #d7e6ed; border-radius: 15px; background: #f7fbfd; } .kanto-chapter > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; } .kanto-chapter > header small { display: block; color: #188ccc; font-size: 7px; font-weight: 1000; letter-spacing: .09em; } .kanto-chapter > header b { display: block; max-width: 210px; overflow: hidden; color: #31556c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .kanto-chapter > header em { padding: 3px 6px; border-radius: 8px; background: #e4f2f7; color: #47768e; font-size: 8px; font-style: normal; font-weight: 950; } .kanto-chapter > div { display: grid; gap: 4px; } .kanto-location-row { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 7px; min-height: 39px; padding: 5px 7px; border: 1px solid transparent; border-radius: 10px; background: #fff; color: #31566d; text-align: left; } .kanto-location-row > i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: #e4edf2; color: #8095a2; font-style: normal; } .kanto-location-row > i .ui-icon { width: 14px; height: 14px; } .kanto-location-row > span { min-width: 0; } .kanto-location-row b, .kanto-location-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kanto-location-row b { font-size: 9px; } .kanto-location-row small { margin-top: 1px; color: #7c93a1; font-size: 7px; } .kanto-location-row em { color: #879ba7; font-size: 6px; font-style: normal; font-weight: 1000; letter-spacing: .04em; } .kanto-location-row.is-open { border-color: #cde8dd; cursor: pointer; } .kanto-location-row.is-open > i { background: #dff5e9; color: #179b60; } .kanto-location-row.is-current { border-color: #efc763; background: #fff9e6; } .kanto-location-row:disabled { cursor: default; } .service-location-list { margin-top: 12px; } .service-location-list > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid #d2e2e9; border-radius: 14px; background: #f4f9fb; color: #436b82; cursor: pointer; font-size: 10px; font-weight: 900; list-style: none; } .service-location-list > summary::-webkit-details-marker { display: none; } .service-location-list > summary em { padding: 3px 7px; border-radius: 9px; background: #dcecf3; font-size: 8px; font-style: normal; } .service-location-list[open] > summary { margin-bottom: 10px; } .kanto-atlas-empty { margin-top: 14px; padding: 28px; border: 1px dashed #bdced8; border-radius: 18px; color: #6b8494; text-align: center; } @media (max-width:800px) { .side-panel.is-regions-panel { width: auto; } .kanto-atlas-shell > header, .kanto-directory > header { align-items: flex-start; padding-inline: 12px; } .kanto-atlas-legend { flex-wrap: wrap; gap: 7px 11px; padding-inline: 12px; } .kanto-atlas-legend small { width: 100%; margin-left: 0; } .kanto-chapter-grid { grid-template-columns: 1fr; } .kanto-atlas-shell > footer { grid-template-columns: 1fr; } } .collection-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; } .creature-card { position: relative; display: grid; grid-template-columns: 82px 1fr; align-items: center; min-height: 101px; padding: 8px; overflow: hidden; border: 1px solid #cbdde8; border-radius: 17px; background: #f6fbfe; } .creature-card.is-lead { border: 2px solid #eebc1d; background: #fff9df; } .creature-card.is-locked { filter: grayscale(1); opacity: .52; } .creature-portrait { width: 78px; height: 78px; border-radius: 14px; background-color: white; } .creature-card b, .creature-card small, .creature-card .mini-stat { display: block; } .creature-card b { font-size: 11px; } .creature-card small { margin-top: 3px; color: #617e93; font-size: 8px; } .creature-card .mini-stat { margin-top: 6px; color: #8aa0b0; font-size: 6px; font-style: normal; } .creature-card > em { position: absolute; top: 6px; right: 6px; padding: 4px 6px; border-radius: 7px; background: #f2c425; color: #634900; font-size: 6px; font-style: normal; font-weight: 1000; } .team-stack { display: grid; gap: 9px; } .team-card { display: grid; grid-template-columns: 31px 82px 1fr 20px; align-items: center; gap: 8px; width: 100%; min-height: 96px; padding: 8px; border: 1px solid #c8dce7; border-radius: 18px; background: white; color: var(--ink); text-align: left; } .team-card.is-lead { border: 2px solid var(--location-accent); background: color-mix(in srgb,var(--location-accent) 7%,white); } .team-card.is-empty { border-style: dashed; color: #8aa0af; } .team-index { color: #91a8b7; font-size: 9px; font-weight: 1000; } .team-portrait { width: 78px; height: 78px; border-radius: 14px; background-color: #f1f7fa; } .team-card small, .team-card b, .team-card em { display: block; } .team-card small { color: var(--location-accent); font-size: 7px; font-weight: 1000; letter-spacing: .7px; } .team-card b { margin: 2px 0; font-size: 14px; } .team-card em { color: #658095; font-size: 8px; font-style: normal; } .inventory-grid { display: grid; gap: 8px; } .inventory-card { position: relative; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; min-height: 76px; padding: 9px; border: 1px solid #d0dfe8; border-left: 4px solid #8eabbc; border-radius: 15px; background: white; } .inventory-card.rarity-uncommon { border-left-color: #20a9d1; } .inventory-card.rarity-rare { border-left-color: #a563d7; } .inventory-card.rarity-epic { border-left-color: #efb51f; } .item-icon, .item-glyph { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background-color: #eaf5fb; } .item-icon { padding: 4px; overflow: visible; } .type-icon { display: inline-block; width: 1.15em; height: 1.15em; margin-right: .2em; vertical-align: -.22em; } .item-glyph { background: linear-gradient(145deg,#edf8fc,#d4ebf5); color: var(--blue); font-size: 27px; font-style: normal; } .inventory-card b, .inventory-card small { display: block; } .inventory-card b { font-size: 10px; } .inventory-card small { margin-top: 4px; color: #6c8497; font-size: 8px; line-height: 1.3; } .inventory-card > em { padding: 5px 8px; border-radius: 9px; background: #edf5f9; color: #365e79; font-size: 10px; font-style: normal; font-weight: 1000; } .discovery-score { display: grid; grid-template-columns: 62px 1fr; align-items: center; margin-bottom: 13px; padding: 13px; border-radius: 18px; background: linear-gradient(135deg,#0b7dd2,#13a6e4); color: white; } .discovery-score > span { grid-row: 1/3; font-size: 36px; } .discovery-score > span .ui-icon { width: 42px; height: 42px; } .discovery-score strong { font-size: 29px; line-height: 1; } .discovery-score small { color: #d3f2ff; font-size: 8px; } .discovery-list { display: grid; gap: 8px; } .discovery-list article { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; padding: 11px; border: 1px solid #d2e0e8; border-radius: 14px; background: white; } .discovery-list article > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #e8f1f6; color: #8097a7; font-style: normal; font-weight: 1000; } .discovery-list article.is-done > i { background: #dcf5d5; color: #43a528; } .discovery-list article > i .ui-icon { width: 18px; height: 18px; } .center-card i .ui-icon { display: inline-block; width: 1.15em; height: 1.15em; margin-right: .25em; vertical-align: -.22em; } .discovery-list b, .discovery-list small { display: block; } .discovery-list b { font-size: 10px; } .discovery-list small { margin-top: 3px; color: #6e8698; font-size: 7px; } .discovery-list article.quest-feature { border-color: #f2cf57; background: linear-gradient(135deg,#fffbed,#fff); } .binding-list { display: grid; gap: 8px; } .binding-row { display: grid; grid-template-columns: minmax(130px,1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #cfdee7; border-radius: 14px; background: white; } .binding-row > span b, .binding-row > span small { display: block; } .binding-row > span b { font-size: 9px; } .binding-row > span small { margin-top: 3px; color: #728a9b; font-size: 6px; } .binding-row > div { display: flex; gap: 5px; } .binding-row button { min-width: 70px; min-height: 34px; padding: 0 8px; border: 1px solid #bcd2df; border-bottom: 3px solid #8ba9ba; border-radius: 10px; background: #edf7fc; color: #245e82; font-size: 8px; font-weight: 1000; } .binding-row button.is-listening { border-color: #e9b622; background: #fff4b8; color: #7a5200; animation: bindingListen .8s ease-in-out infinite alternate; } @keyframes bindingListen { to { box-shadow: 0 0 0 4px rgba(244,197,47,.2); } } .settings-reset { width: 100%; min-height: 39px; margin-top: 10px; border: 1px solid #bcd3e0; border-radius: 12px; background: #eef7fb; color: #38647f; font-size: 7px; font-weight: 1000; } .battle-setting { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 9px; margin-top: 12px; padding: 12px; border: 1px solid #c9dce7; border-radius: 15px; background: #f7fbfd; } .battle-setting input { width: 22px; height: 22px; margin: auto; accent-color: #54bd35; } .battle-setting b, .battle-setting small { display: block; } .battle-setting b { font-size: 10px; } .battle-setting small { margin-top: 3px; color: #688297; font-size: 7px; line-height: 1.4; } .settings-footnote { margin: 10px 2px 0; color: #70889a; font-size: 7px; line-height: 1.5; } .editor-panel { width: min(390px,calc(100vw - 36px)); padding: 20px; overflow: hidden auto; transform: translateX(calc(100% + 35px)); border-radius: 24px; transition: transform .23s; } .editor-panel.is-open { transform: none; } .editor-head, .chat-head, .battle-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .editor-head small, .chat-head small, .battle-status small { display: block; color: var(--blue); font-size: 7px; font-weight: 1000; letter-spacing: 1.2px; } .editor-head b, .chat-head b { font-size: 17px; } .editor-head button, .chat-head button { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #e8f3f9; color: #41647c; font-size: 20px; } .editor-panel > p { margin: 11px 0; color: #607b90; font-size: 10px; line-height: 1.45; } .editor-modes, .editor-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .editor-modes button, .editor-actions button { min-height: 38px; border: 1px solid #c9dce7; border-radius: 10px; background: white; color: #426983; font-size: 9px; font-weight: 900; } .editor-modes button { display: flex; align-items: center; justify-content: center; gap: 6px; } .editor-modes button i .ui-icon { width: 15px; height: 15px; } .editor-modes button.is-active { border-color: var(--blue); background: var(--blue); color: white; } .object-catalog { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 10px 0; } .object-catalog button { min-width: 0; padding: 4px; border: 1px solid #cbdde8; border-radius: 12px; background: #f9fcfe; } .object-catalog button.is-active { border: 2px solid var(--blue); background: #e8f6ff; } .object-thumb { width: 100%; aspect-ratio: 1; border-radius: 8px; background-color: white; } .object-catalog small { display: block; height: 17px; overflow: hidden; color: #496a80; font-size: 6px; font-weight: 850; } .editor-toggle { display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 10px; background: #edf6fb; font-size: 9px; font-weight: 800; } .editor-actions { margin-top: 9px; } .editor-tip { display: block; margin-top: 9px; color: #6c8394; font-size: 8px; } .chat-panel { bottom: 20px; width: min(430px,calc(100vw - 130px)); height: min(500px,calc(100% - 115px)); padding: 17px; transform: translateY(calc(100% + 35px)); border-radius: 24px; transition: transform .23s; } .chat-panel.is-open { transform: none; } .chat-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 13px 0 9px; } .chat-tabs button { min-height: 34px; border: 0; border-radius: 9px; background: #eaf3f8; color: #5c788d; font-size: 8px; font-weight: 900; } .chat-tabs button.is-active { background: var(--blue); color: white; } .chat-log { height: calc(100% - 112px); overflow-y: auto; } .chat-message { display: grid; grid-template-columns: 30px 1fr; gap: 8px; margin: 8px 0; } .chat-message > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #dff1fc; color: var(--blue); font-size: 10px; font-style: normal; font-weight: 1000; } .chat-message b { display: block; font-size: 9px; } .chat-message p { margin: 2px 0 0; color: #4d6d84; font-size: 9px; line-height: 1.35; } #chatForm { display: grid; grid-template-columns: 1fr 42px; gap: 7px; } #chatForm input { min-width: 0; height: 41px; padding: 0 12px; border: 1px solid #c7dbe6; border-radius: 11px; background: white; font-size: 10px; } #chatForm button { border: 0; border-radius: 11px; background: var(--blue); color: white; } #chatForm button .ui-icon { width: 20px; height: 20px; margin: auto; } /* Battle */ .battle-hud { position: absolute; z-index: 35; left: 50%; bottom: max(18px,env(safe-area-inset-bottom)); width: min(790px,calc(100vw - 38px)); padding: 13px; transform: translate(-50%,calc(100% + 45px)); border: 1px solid rgba(255,255,255,.88); border-radius: 23px; background: rgba(255,253,248,.96); box-shadow: 0 22px 60px rgba(0,20,42,.43); transition: transform .28s cubic-bezier(.2,.84,.22,1); backdrop-filter: blur(14px); } .battle-hud.is-open { transform: translate(-50%,0); } .battle-status b { display: block; max-width: 580px; } #autoBattle { min-width: 76px; height: 34px; border: 1px solid #b8d0df; border-radius: 10px; background: #dbe8ef; color: #617889; font-size: 8px; font-weight: 1000; } #autoBattle.is-active { border-color: #5ab838; background: #5fc63b; color: white; } #cancelBattle { min-width: 64px; height: 34px; border: 1px solid #e4b6b2; border-radius: 10px; background: #fff0ef; color: #aa453e; font-size: 7px; font-weight: 1000; } #cancelBattle:disabled { opacity: .45; cursor: default; } .battle-skills { margin-top: 9px; } .battle-skills button { position: relative; display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 8px; min-height: 57px; padding: 6px 9px 6px 6px; overflow: hidden; border: 1px solid #c7dae6; border-bottom: 3px solid #8daabd; border-radius: 14px; background: #f8fbfd; color: var(--ink); text-align: left; } .battle-skills button.is-queued { border-color: #10a5eb; background: #e6f7ff; box-shadow: inset 0 0 0 1px #10a5eb; } .battle-skills button:disabled { filter: grayscale(.45); opacity: .65; cursor: wait; } .skill-icon { width: 43px; height: 43px; border-radius: 50%; background-color: white; } .battle-skills b, .battle-skills small { display: block; } .battle-skills b { font-size: 9px; } .battle-skills small { margin-top: 3px; color: #6e8597; font-size: 7px; } .battle-skills em { padding: 4px 6px; border-radius: 7px; background: #e7f0f5; color: #45677e; font-size: 6px; font-style: normal; font-weight: 1000; } .battle-skills .is-queued em { background: #0d93df; color: white; } .capture-panel { grid-template-columns: minmax(190px,1fr) minmax(220px,1.35fr) 92px; min-height: 98px; margin-top: 9px; padding: 11px; border: 1px solid #b9d9e9; border-radius: 19px; background: linear-gradient(135deg,#eaf8ff,#fff8e4); box-shadow: inset 0 1px 0 rgba(255,255,255,.55),0 10px 24px rgba(18,88,134,.12); } .capture-copy small, .capture-copy b { display: block; } .capture-copy small { color: #087bc9; font-weight: 1000; letter-spacing: .8px; } .capture-copy b { margin-top: 4px; font-size: 10px; line-height: 1.35; } .capture-balls { gap: 6px; min-width: 0; } .capture-balls > button { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 5px; min-width: 126px; min-height: 48px; padding: 4px 7px 4px 4px; border: 1px solid #bdd2dd; border-radius: 13px; background: rgba(255,255,255,.82); color: #31566e; text-align: left; } .capture-balls > button.is-selected { border: 2px solid #0d91dc; background: #e5f6ff; color: #075d9b; } .capture-ball-icon { width: 34px; height: 34px; } .capture-balls b, .capture-balls small { display: block; } .capture-balls b { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; } .capture-balls small { font-size: 7px; font-weight: 1000; } .capture-empty { color: #9b554e; font-size: 8px; line-height: 1.35; } .capture-throw { position: relative; justify-self: end; width: 76px; height: 76px; padding: 2px; transform: translate(var(--throw-x,0),var(--throw-y,0)) rotate(var(--throw-rotate,0)); border: 2px solid #fff; border-radius: 24px; background: linear-gradient(145deg,#ffffff,#dff2fb); box-shadow: 0 8px 20px rgba(10,72,106,.22); transition: transform .16s ease,box-shadow .16s; } .capture-throw.is-aiming { z-index: 4; box-shadow: 0 15px 28px rgba(6,67,103,.34); } .capture-throw:disabled { filter: grayscale(.8); opacity: .48; } .capture-throw-icon { width: 49px; height: 49px; } .capture-throw em { margin-top: -5px; font-style: normal; font-weight: 1000; } #battleHint { margin: 7px 0 0; color: #698196; font-size: 8px; text-align: center; } .is-battling .context-action, .is-battling .mobile-actions, .is-battling .loot-feed { opacity: 0; pointer-events: none; } .mobile-dock { display: none; } .loading-screen { position: fixed; z-index: 100; inset: 0; display: grid; place-content: center; justify-items: center; background: radial-gradient(circle at 50% 44%,#18a4e9,#0753a5 70%); color: white; opacity: 0; pointer-events: none; transition: opacity .22s; } .loading-screen.is-open { opacity: 1; pointer-events: auto; } .loading-screen b { margin-top: 17px; font-size: 19px; } .loading-screen small { margin-top: 5px; color: #cceeff; font-size: 9px; } .loading-orbit { position: relative; width: 68px; height: 68px; border: 5px solid rgba(255,255,255,.24); border-top-color: white; border-radius: 50%; animation: spin .8s linear infinite; } .loading-orbit i { position: absolute; inset: 17px; border-radius: 10px; background: #ffd23b; transform: rotate(45deg); } .loading-screen.is-session-conflict { background: linear-gradient(rgba(4,32,52,.82),rgba(4,32,52,.86)),radial-gradient(circle at 50% 44%,#18a4e9,#0753a5 70%); backdrop-filter: blur(7px); } .loading-screen.is-session-conflict .loading-orbit { border-color: rgba(255,255,255,.2); border-top-color: #ffd348; } .loading-screen.is-session-conflict .loading-orbit i { background: #fffdf8; box-shadow: 0 0 0 6px rgba(255,211,72,.14); } .loading-screen.is-session-conflict b { max-width: min(520px,calc(100vw - 36px)); text-align: center; } .loading-screen.is-session-conflict small { max-width: min(560px,calc(100vw - 44px)); color: #e5f4fb; text-align: center; line-height: 1.55; } @keyframes spin { to { transform: rotate(1turn); } } .toast { position: fixed; z-index: 130; left: 50%; top: max(20px,env(safe-area-inset-top)); max-width: min(520px,calc(100vw - 24px)); padding: 11px 16px; transform: translate(-50%,-28px); border: 1px solid rgba(255,255,255,.7); border-radius: 13px; background: rgba(3,38,65,.92); color: white; box-shadow: 0 13px 35px rgba(0,21,42,.32); font-size: 10px; font-weight: 850; opacity: 0; pointer-events: none; transition: .2s; } .toast.is-open { transform: translate(-50%,0); opacity: 1; } /* Dedicated phone HUD */ @media (max-width: 800px) { .home-topbar { top: max(10px,env(safe-area-inset-top)); left: max(11px,env(safe-area-inset-left)); right: max(11px,env(safe-area-inset-right)); } .brand-mark { width: 37px; height: 37px; border-radius: 12px; font-size: 19px; } .brand b { font-size: 23px; letter-spacing: -1.6px; } .brand small, .home-resources span:nth-child(n+2) { display: none; } .home-resources span { padding: 8px 10px; border-radius: 12px; font-size: 9px; } .home-backdrop { background-position: 58% center; } .home-vignette { background: linear-gradient(0deg,rgba(2,25,45,.9) 0%,rgba(2,36,60,.28) 65%,rgba(3,38,63,.25)); } .home-showcase { left: 9%; right: 2%; top: 11%; bottom: 38%; width: auto; } .trainer-showcase { left: 4%; width: min(49vw,250px); } .home-showcase > span { display: none; } .hero-card { left: max(10px,env(safe-area-inset-left)); right: max(10px,env(safe-area-inset-right)); top: auto; bottom: max(18px,calc(env(safe-area-inset-bottom) + 8px)); width: auto; padding: 15px; transform: none; border-radius: 22px; } .hero-card-head { gap: 9px; } .avatar-ring { flex-basis: 56px; height: 56px; border-radius: 17px; border-width: 3px; } .hero-card-head strong { font-size: 20px; } .hero-card > p, .xp-row, .foundation-status, .prototype-note { display: none; } .name-field { grid-template-columns: 80px 1fr; margin-top: 9px; } .name-field input { height: 37px; } .skin-picker { margin: 8px 0; } .skin-picker button { min-height: 38px; grid-template-columns: 28px 1fr; font-size: 7px; } .trainer-mini { width: 27px; height: 31px; } .primary-cta { min-height: 47px; border-bottom-width: 3px; } .world-topbar { top: max(7px,env(safe-area-inset-top)); left: max(7px,env(safe-area-inset-left)); right: max(7px,env(safe-area-inset-right)); display: grid; grid-template-columns: 1fr auto; gap: 6px; } .player-chip { min-width: 0; min-height: 47px; padding: 5px 8px 5px 5px; border-radius: 14px; } .player-chip-avatar { width: 35px; height: 35px; border-radius: 11px; } .player-chip b { max-width: 42vw; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .player-chip small { font-size: 6px; } .world-location { display: none; } .instance-chip { min-width: 0; min-height: 47px; padding: 6px 8px; border-radius: 14px; } .signal-bars { font-size: 18px; } .instance-chip b { font-size: 7px; } .instance-chip small { max-width: 118px; overflow: hidden; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; } .world-rail { display: none; } .movement-zone { position: absolute; z-index: 8; left: 0; bottom: calc(74px + env(safe-area-inset-bottom)); display: block; width: 58%; height: 62%; touch-action: none; } .quick-hint { display: none; } .mobile-actions { position: absolute; z-index: 18; right: max(15px,env(safe-area-inset-right)); bottom: calc(158px + env(safe-area-inset-bottom)); display: grid; gap: 8px; } .round-quick { display: grid; place-items: center; width: 43px; height: 43px; border: 2px solid rgba(255,255,255,.78); border-radius: 15px; background: rgba(4,52,85,.83); color: white; box-shadow: 0 9px 22px rgba(0,28,50,.28); font-size: 18px; backdrop-filter: blur(8px); } .round-quick .ui-icon { width: 21px; height: 21px; } .context-action { right: max(13px,env(safe-area-inset-right)); bottom: calc(82px + env(safe-area-inset-bottom)); grid-template-columns: 52px minmax(0,1fr); width: min(190px,calc(100vw - 98px)); min-width: 0; min-height: 66px; padding: 5px 10px 5px 5px; border-radius: 22px; } .context-action > span { width: 52px; height: 52px; border-radius: 18px; } .context-action b, .context-action small { display: block; min-width: 0; } .context-action b { font-size: 10px; } .context-action small { max-width: 112px; font-size: 6px; } .loot-feed { left: max(8px,env(safe-area-inset-left)); right: 92px; bottom: calc(82px + env(safe-area-inset-bottom)); min-width: 0; padding: 7px 9px; border-radius: 13px; transform: translateY(16px); } .loot-feed > span { width: 32px; height: 32px; border-radius: 10px; } .loot-feed b { font-size: 8px; } .loot-feed small { font-size: 6px; } .mobile-dock { position: absolute; z-index: 23; left: max(7px,env(safe-area-inset-left)); right: max(7px,env(safe-area-inset-right)); bottom: max(6px,env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5,1fr); height: 67px; padding: 5px; border: 1px solid rgba(255,255,255,.9); border-radius: 22px; background: rgba(255,253,248,.95); box-shadow: 0 13px 35px rgba(0,27,49,.34); backdrop-filter: blur(14px); } .mobile-dock button { display: grid; place-items: center; align-content: center; gap: 2px; min-width: 0; border: 0; border-radius: 15px; background: transparent; color: #315d7d; } .mobile-dock button.is-active { background: #e4f3fc; color: var(--blue); } .mobile-dock span { font-size: 20px; line-height: 1; } .mobile-dock span .ui-icon { width: 20px; height: 20px; } .mobile-dock b { font-size: 6px; text-transform: uppercase; } .side-panel, .editor-panel, .chat-panel { inset: auto max(7px,env(safe-area-inset-right)) calc(79px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left)); width: auto; max-height: min(72%,610px); padding: 9px 15px 17px; transform: translateY(calc(100% + 105px)); border-radius: 23px; } .side-panel.is-open, .editor-panel.is-open, .chat-panel.is-open { transform: none; } .sheet-handle { display: block; width: 42px; height: 4px; margin: 2px auto 7px; border-radius: 3px; background: #c4d4de; } .panel-close { position: absolute; top: 12px; right: 12px; float: none; } .panel-title { font-size: 24px; } .panel-lead { font-size: 9px; } .region-grid { grid-template-columns: 1fr; } .region-preview { height: 118px; } .collection-grid { grid-template-columns: repeat(2,1fr); } .creature-card { grid-template-columns: 62px 1fr; min-height: 80px; padding: 6px; } .creature-portrait { width: 59px; height: 59px; } .creature-card b { font-size: 9px; } .creature-card small { font-size: 6px; } .creature-card .mini-stat { display: none; } .team-card { grid-template-columns: 24px 66px 1fr 14px; min-height: 80px; } .team-portrait { width: 62px; height: 62px; } .inventory-card { grid-template-columns: 50px 1fr auto; min-height: 68px; } .item-icon, .item-glyph { width: 47px; height: 47px; } .object-catalog { grid-template-columns: repeat(6,1fr); max-height: 190px; overflow-y: auto; } .chat-panel { height: min(67%,520px); } .chat-log { height: calc(100% - 116px); } .battle-hud { bottom: calc(79px + env(safe-area-inset-bottom)); width: calc(100vw - 14px); padding: 9px; border-radius: 20px; } .battle-status b { max-width: 63vw; font-size: 10px; } .battle-skills { gap: 5px; } .battle-skills button { grid-template-columns: 37px 1fr; min-height: 49px; padding: 5px; } .skill-icon { width: 37px; height: 37px; } .battle-skills b { font-size: 7px; } .battle-skills small { font-size: 5px; } .battle-skills em { display: none; } .capture-panel { grid-template-columns: 1fr 72px; min-height: 82px; gap: 6px; padding: 6px; } .capture-copy { grid-column: 1/2; } .capture-copy small { font-size: 5px; } .capture-copy b { font-size: 8px; } .capture-balls { grid-column: 1/2; } .capture-balls > button { grid-template-columns: 28px 1fr auto; min-width: 108px; min-height: 40px; } .capture-ball-icon { width: 28px; height: 28px; } .capture-throw { grid-column: 2; grid-row: 1/3; width: 66px; height: 66px; border-radius: 21px; } .capture-throw-icon { width: 43px; height: 43px; } #battleHint { font-size: 6px; } } @media (max-width: 370px), (max-width: 800px) and (max-height: 640px) { .home-showcase { display: none; } .hero-card { bottom: max(9px,env(safe-area-inset-bottom)); } .hero-card-head, .skin-picker { margin-bottom: 4px; } .skin-picker button { min-height: 34px; } .mobile-dock { height: 59px; } .context-action { bottom: calc(72px + env(safe-area-inset-bottom)); width: min(174px,calc(100vw - 90px)); min-width: 0; min-height: 58px; } .context-action > span { width: 46px; height: 46px; } .mobile-actions { bottom: calc(139px + env(safe-area-inset-bottom)); } .side-panel, .editor-panel, .chat-panel, .battle-hud { bottom: calc(70px + env(safe-area-inset-bottom)); } .loot-feed { bottom: calc(71px + env(safe-area-inset-bottom)); } } /* Compact desktop HUD for ultrawide or browser windows with little vertical space. */ @media (min-width: 801px) and (max-height: 650px) and (pointer: fine) { .world-topbar { top: 7px; left: 125px; right: 8px; grid-template-columns: minmax(180px,1fr) auto minmax(180px,1fr); gap: 7px; } .player-chip, .world-location, .instance-chip { min-height: 44px; border-radius: 14px; } .player-chip { min-width: 184px; padding: 4px 8px 4px 4px; } .player-chip-avatar { width: 34px; height: 34px; border-radius: 10px; } .world-location { min-width: 214px; padding: 4px 9px; } .location-pin { width: 29px; height: 32px; } .instance-chip { min-width: 190px; padding: 5px 9px; } .world-rail { left: 8px; top: 50%; grid-template-columns: repeat(2,1fr); gap: 3px; width: 108px; padding: 5px; transform: translateY(-50%); border-radius: 17px; } .world-rail button { min-height: 39px; border-radius: 11px; } .world-rail button span { font-size: 17px; } .world-rail button b { font-size: 5px; } .world-rail button > i { top: 2px; right: 2px; min-width: 12px; height: 12px; font-size: 5px; } .side-panel { top: 58px; right: 8px; bottom: 8px; width: min(455px,calc(100vw - 140px)); padding: 17px; border-radius: 20px; } .editor-panel { top: 58px; right: 8px; max-height: calc(100% - 66px); padding: 14px; border-radius: 19px; } .chat-panel { left: 124px; top: 58px; bottom: 8px; width: min(420px,calc(100vw - 140px)); height: auto; padding: 13px; border-radius: 20px; } .chat-log { height: calc(100% - 112px); } .battle-hud { left: 124px; right: 8px; bottom: 8px; width: auto; padding: 9px; transform: translateY(calc(100% + 42px)); border-radius: 18px; } .battle-hud.is-open { transform: none; } .battle-status { min-height: 29px; } .battle-skills button { min-height: 45px; } #battleHint { display: none; } .context-action { right: 8px; bottom: 8px; min-width: 132px; min-height: 49px; border-radius: 16px; } .context-action > span { width: 37px; height: 37px; border-radius: 12px; } .quick-hint { bottom: 7px; } .loot-feed { left: 124px; bottom: 8px; } .home-topbar { top: 8px; left: 14px; right: 14px; } .brand-mark { width: 39px; height: 39px; border-radius: 12px; } .brand b { font-size: 25px; } .hero-card { left: 5vw; top: 57px; bottom: 8px; width: min(390px,40vw); padding: 13px; transform: none; overflow: auto; border-radius: 20px; } .hero-card > p, .foundation-status, .prototype-note { display: none; } .avatar-ring { flex-basis: 55px; height: 55px; border-radius: 16px; } .hero-card-head strong { font-size: 20px; } .xp-row { margin: 7px 0; } .name-field input { height: 35px; } .skin-picker { margin: 7px 0; } .skin-picker button { min-height: 37px; } .primary-cta { min-height: 42px; } } @media (min-width: 1450px) { .hero-card { left: 6vw; width: 470px; padding: 28px; } .world-rail { left: 24px; } .side-panel { width: 520px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Pokémon Trainer Hub v1.4 */ .home-backdrop { background-image: url('/assets/v2.0/maps/arrival-plaza.webp'); background-position: 50% 62%; } .pikachu-avatar { position: absolute; inset: -6px; background: url('/assets/v1.2/pokemon/static/025.png') center / contain no-repeat; image-rendering: auto; } .pikachu-showcase { position: absolute; right: 2%; bottom: 1%; width: min(20vw,270px); aspect-ratio: 1; background: url('/assets/v1.2/pokemon/static/025.png') center / contain no-repeat; filter: drop-shadow(0 18px 12px rgba(0,22,45,.35)); } .pokemon-portrait { display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle,#fff 38%,#eaf6fc 100%); } .pokemon-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; } .creature-card.is-locked { filter: none; opacity: .68; } .creature-card.is-owned { border-color: #78c553; background: #f3ffef; } .creature-card > em { background: #66c944; color: #174d0b; } .creature-card.is-lead > em { background: #f2c425; color: #634900; } .pokedex-grid .creature-card { grid-template-columns: 72px 1fr; min-height: 92px; } .pokedex-grid .creature-portrait { width: 68px; height: 68px; } .team-card:not(.is-empty) { display: block; padding: 7px; } .team-card-main { display: grid; grid-template-columns: 31px 82px 1fr; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; } .team-remove { display: block; min-height: 29px; margin: 5px 0 0 auto; padding: 0 10px; border: 1px solid #c7dce8; border-radius: 9px; background: #eef6fa; color: #4f7187; font-size: 7px; font-weight: 900; } .kit-preview { display: block; max-width: 260px; margin-top: 4px; overflow: hidden; color: #8a9fac; font-size: 6px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; } .panel-primary { width: 100%; min-height: 44px; margin-top: 12px; border: 0; border-bottom: 3px solid #07569f; background: linear-gradient(#149cf3,#0872c9); color: white; font-weight: 1000; } .center-list { display: grid; gap: 9px; } .center-card { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 9px; border: 1px solid #cbdde8; border-radius: 17px; background: white; } .center-card.is-lead { border: 2px solid var(--location-accent); background: color-mix(in srgb,var(--location-accent) 7%,white); } .center-portrait { grid-row: 1/3; width: 80px; height: 80px; border-radius: 15px; } .center-card small, .center-card b, .center-card em, .center-card i { display: block; } .center-card small { color: var(--location-accent); font-size: 7px; font-weight: 1000; } .center-card b { margin: 2px 0; font-size: 14px; } .center-card em { color: #607d91; font-size: 8px; font-style: normal; } .center-card i { margin-top: 5px; color: #849aa9; font-size: 6px; font-style: normal; line-height: 1.35; } .center-actions { grid-column: 1/-1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .center-actions button { min-height: 31px; padding: 0 10px; border: 1px solid #bcd6e5; border-radius: 9px; background: #eaf6fd; color: #146da9; font-size: 7px; font-weight: 1000; } .center-actions button:disabled { opacity: .45; cursor: default; } .center-actions button.danger { border-color: #efc0bc; background: #fff0ef; color: #b63d35; } .empty-center { padding: 25px; border: 2px dashed #bdd5e3; border-radius: 18px; background: #f6fbfe; text-align: center; } .empty-center b { font-size: 16px; } .empty-center p { color: #678398; font-size: 9px; line-height: 1.5; } .object-thumb.direct { display: grid; place-items: center; overflow: hidden; } .object-thumb.direct img { width: 100%; height: 100%; object-fit: contain; } .battle-skills button.skill-kind-passive { border-color: #d0c0e8; background: #f5effc; cursor: default; } .starter-dialog { position: fixed; z-index: 120; inset: 0; display: grid; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .22s; } .starter-dialog.is-open { opacity: 1; pointer-events: auto; } .starter-backdrop { position: absolute; inset: 0; background: rgba(2,25,45,.72); backdrop-filter: blur(8px); } .starter-card { position: relative; width: min(980px,calc(100vw - 28px)); max-height: min(780px,calc(100vh - 28px)); padding: 28px; overflow: auto; border: 1px solid rgba(255,255,255,.95); border-radius: 28px; background: rgba(255,253,248,.98); box-shadow: 0 35px 90px rgba(0,18,35,.55); } .starter-card h2 { margin: 4px 45px 6px 0; font-size: clamp(25px,4vw,39px); } .starter-card > p { margin: 0 0 18px; color: #5f7a8e; font-size: 11px; } .starter-card > small { display: block; margin-top: 14px; color: #698399; font-size: 8px; text-align: center; } .starter-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 0; border-radius: 12px; background: #e7f2f8; color: #365e79; font-size: 23px; } .starter-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .starter-option { display: grid; grid-template-rows: 180px auto; gap: 8px; min-width: 0; padding: 12px; border: 2px solid #cae0ea; border-bottom-width: 5px; border-radius: 21px; background: linear-gradient(#fff,#edf8fd); color: var(--ink); text-align: left; } .starter-option:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 12px 27px rgba(7,91,145,.17); } .starter-grass { --starter-color:#5fb947; } .starter-fire { --starter-color:#ee6c35; } .starter-water { --starter-color:#2b9ed6; } .starter-option { border-bottom-color: var(--starter-color); } .starter-portrait { width: 100%; height: 180px; border-radius: 16px; } .starter-option small, .starter-option b, .starter-option em, .starter-option i { display: block; } .starter-option small { color: var(--starter-color); font-size: 8px; font-weight: 1000; } .starter-option b { margin: 3px 0; font-size: 21px; } .starter-option em { color: #5c778b; font-size: 8px; font-style: normal; } .starter-option i { margin-top: 7px; color: #8095a4; font-size: 7px; font-style: normal; line-height: 1.4; } @media (max-width: 800px) { .pikachu-showcase { right: 0; width: min(34vw,190px); } .mobile-dock { grid-template-columns: repeat(7,1fr); } .mobile-dock span { font-size: 17px; } .mobile-dock b { font-size: 5px; } .pokedex-grid { grid-template-columns: repeat(2,1fr); } .pokedex-grid .creature-card { grid-template-columns: 53px 1fr; min-height: 68px; } .pokedex-grid .creature-portrait { width: 50px; height: 50px; } .team-card-main { grid-template-columns: 24px 66px 1fr; } .center-card { grid-template-columns: 67px 1fr; } .center-portrait { width: 64px; height: 64px; } .starter-dialog { padding: 7px; } .starter-card { width: 100%; max-height: calc(100vh - 14px); padding: 20px 14px; border-radius: 23px; } .starter-card > p { font-size: 9px; } .starter-options { grid-template-columns: 1fr; } .starter-option { grid-template-columns: 108px 1fr; grid-template-rows: auto; align-items: center; min-height: 124px; } .starter-portrait { width: 106px; height: 106px; } .starter-option b { font-size: 17px; } } @media (max-width: 420px) { .binding-row { grid-template-columns: 1fr; } .binding-row > div { width: 100%; } .binding-row button { flex: 1; } .mobile-dock b { font-size: 4.5px; } } /* Unified Account Edition v2.0 — password, Telegram/VK identities and immutable onboarding. */ .gate-screen { position: absolute; inset: 0; isolation: isolate; display: grid; place-items: center; width: 100%; height: 100%; padding: 80px 18px 24px; overflow: hidden; background: #166248; } #app[data-screen="gate"] .auth-screen, #app[data-screen="gate"] .home-screen, #app[data-screen="gate"] .game-screen, #app[data-screen="auth"] .gate-screen, #app[data-screen="home"] .gate-screen, #app[data-screen="game"] .gate-screen { visibility: hidden; opacity: 0; pointer-events: none; } #app[data-screen="gate"] .gate-screen { visibility: visible; opacity: 1; pointer-events: auto; } .gate-card { width: min(460px,calc(100vw - 28px)); } .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 0 15px; padding: 4px; border-radius: 14px; background: #e8f2f7; } .auth-tabs button { min-height: 40px; border: 0; border-radius: 11px; background: transparent; color: #688397; font-size: 11px; font-weight: 1000; } .auth-tabs button.is-active { background: white; color: #087bd2; box-shadow: 0 5px 14px rgba(12,77,117,.13); } .account-form { display: none; gap: 11px; } .account-form.is-active { display: grid; } .auth-field { display: grid; gap: 5px; color: #31556d; font-size: 11px; font-weight: 900; } .auth-field input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #bfd6e4; border-radius: 13px; outline: 0; background: white; color: #153a55; font-size: 14px; font-weight: 700; transition: border-color .16s,box-shadow .16s; } .auth-field input:focus { border-color: #118bdd; box-shadow: 0 0 0 3px rgba(17,139,221,.13); } .auth-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .field-caption { color: #31556d; font-size: 11px; font-weight: 900; } .register-skin-picker { margin: 0; } .account-form .primary-cta, .gate-card .primary-cta { margin-top: 2px; } .form-error { display: none; min-height: 18px; padding: 8px 10px; border-radius: 10px; background: #fff0ef; color: #b63e37; font-size: 10px; font-weight: 800; line-height: 1.35; text-align: center; } .form-error:not(:empty) { display: block; } .auth-card:has(#registerForm.is-active) { width: min(590px,calc(100vw - 28px)); } button.is-busy { opacity: .65; pointer-events: none; } @media (max-width: 800px) { .gate-screen { padding: 70px 7px 7px; } .auth-field-grid { grid-template-columns: 1fr; } .auth-card:has(#registerForm.is-active) { max-height: calc(100% - 72px); overflow-y: auto; } } /* First Journey v1.6: every interactive window is clipped inside the world. */ .auth-screen, .home-screen, .game-screen { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; } #app[data-screen="auth"] .home-screen, #app[data-screen="auth"] .game-screen, #app[data-screen="home"] .auth-screen, #app[data-screen="home"] .game-screen, #app[data-screen="game"] .auth-screen, #app[data-screen="game"] .home-screen { visibility: hidden; opacity: 0; pointer-events: none; } #app[data-screen="auth"] .auth-screen, #app[data-screen="home"] .home-screen, #app[data-screen="game"] .game-screen { visibility: visible; opacity: 1; pointer-events: auto; } .game-screen { position: absolute; inset: 0; contain: strict; isolation: isolate; overflow: clip; background: #183c32; } #gameCanvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; } /* Local social authentication. */ .auth-screen { isolation: isolate; display: grid; place-items: center; padding: 80px 18px 24px; background: #166248; } .auth-backdrop { position: absolute; inset: -3%; z-index: -3; background: url('/assets/v2.0/maps/arrival-plaza.webp') 50% 54% / cover no-repeat; filter: saturate(1.08) contrast(1.03); transform: scale(1.03); } .auth-vignette { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 66% 44%,rgba(6,53,72,.1),rgba(2,25,45,.76) 78%),linear-gradient(90deg,rgba(2,27,47,.76),rgba(2,32,49,.28)); } .auth-brand { position: absolute; top: max(22px,env(safe-area-inset-top)); left: max(28px,env(safe-area-inset-left)); } .auth-card { width: min(470px,calc(100vw - 28px)); padding: 28px; border: 1px solid rgba(255,255,255,.9); border-radius: 28px; background: rgba(255,253,248,.96); box-shadow: 0 30px 90px rgba(0,20,36,.5); backdrop-filter: blur(18px); } .auth-step { display: block; color: var(--blue); font-size: 8px; font-weight: 1000; letter-spacing: 1.4px; } .auth-card h1 { margin: 5px 0 8px; font-size: clamp(28px,5vw,42px); letter-spacing: -1.4px; } .auth-card > p { margin: 0 0 19px; color: #58758a; font-size: 11px; line-height: 1.55; } .auth-providers { display: grid; gap: 9px; } .auth-provider { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 11px; min-height: 62px; padding: 7px 12px 7px 7px; border: 1px solid #c8dce8; border-bottom-width: 4px; border-radius: 16px; background: white; color: var(--ink); text-align: left; } .auth-provider > i { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 13px; background: #e7f4fc; color: #0878d3; font-size: 12px; font-style: normal; font-weight: 1000; } .auth-provider b, .auth-provider small { display: block; } .auth-provider b { font-size: 10px; } .auth-provider small { margin-top: 3px; color: #71899a; font-size: 7px; } .provider-vk { border-bottom-color: #2787f5; } .provider-vk > i { background: #2787f5; color: white; } .provider-telegram { border-bottom-color: #2aabee; } .provider-telegram > i { background: #2aabee; color: white; font-size: 20px; } .provider-local { border-bottom-color: #72c744; } .provider-local > i { background: #e9f8df; color: #3f9223; } .auth-security { display: block; margin-top: 14px; color: #7890a1; font-size: 7px; line-height: 1.45; text-align: center; } .auth-admin-link { display: block; margin-top: 8px; color: #477087; font-size: 7px; font-weight: 850; text-align: center; } .account-chip { display: flex; align-items: center; gap: 8px; min-height: 49px; padding: 6px 11px 6px 6px; border: 1px solid rgba(255,255,255,.82); border-radius: 16px; background: rgba(255,253,248,.92); color: var(--ink); box-shadow: 0 8px 25px rgba(0,31,58,.2); text-align: left; backdrop-filter: blur(12px); } .account-chip > i { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; background: #e4f3fc; color: var(--blue); font-size: 8px; font-style: normal; font-weight: 1000; } .account-chip b, .account-chip small { display: block; } .account-chip b { font-size: 8px; } .account-chip small { color: #7890a2; font-size: 6px; } .trainer-avatar-preview { position: absolute; inset: 0; background: url('/assets/v1.4/trainers/trainer-male-walk-8dir-6f.png') 0 0 / 600% 800% no-repeat; } body[data-skin-preview="female"] .trainer-avatar-preview { background-image: url('/assets/v1.4/trainers/trainer-female-walk-8dir-6f.png'); } /* Window contract: visibility changes, world size never does. */ .hud-window { position: absolute !important; box-sizing: border-box; max-width: calc(100% - 16px); max-height: calc(100% - 16px); visibility: hidden; opacity: 0; pointer-events: none; transform: scale(.975) !important; transform-origin: center; transition: opacity .18s,transform .18s !important; } .hud-window.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: none !important; } .side-panel { top: 86px; left: auto; width: min(480px,calc(100% - 128px)); } .editor-panel { top: 86px; right: 18px; bottom: auto; left: auto; width: min(420px,calc(100% - 128px)); max-height: calc(100% - 104px); } /* Movable, resizable, per-player chat. */ .chat-panel { --chat-opacity:.94; --chat-font-size:11px; z-index: 48; left: 104px; top: 82px; bottom: auto; width: 440px; height: 450px; min-width: 320px; min-height: 260px; display: grid; grid-template-rows: auto auto auto minmax(0,1fr) auto; padding: 14px; overflow: hidden; border-radius: 22px; background: rgba(255,253,248,var(--chat-opacity)); font-size: var(--chat-font-size); backdrop-filter: blur(17px); } .chat-panel.chat-no-blur { backdrop-filter: none; } .chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 43px; cursor: grab; touch-action: none; user-select: none; } .chat-panel.is-adjusting .chat-head { cursor: grabbing; } .chat-head small, .chat-head b { display: block; } .chat-head small { color: var(--blue); font-size: .63em; font-weight: 1000; letter-spacing: .9px; } .chat-head b { margin-top: 2px; font-size: 1.3em; } .chat-head-actions { display: flex; gap: 5px; } .chat-head-actions button { display: grid; place-items: center; border: 0; background: #e8f3f9; color: #3d637d; } .chat-head-actions .ui-icon { width: 17px; height: 17px; } .chat-config { display: none; grid-template-columns: 1fr 1fr; gap: 7px 12px; margin: 5px 0 8px; padding: 10px; border: 1px solid #c9dce8; border-radius: 13px; background: rgba(239,248,253,.92); } .chat-config.is-open { display: grid; } .chat-config > label { color: #58758a; font-size: .72em; font-weight: 850; } .chat-config label > span { display: flex; justify-content: space-between; gap: 7px; } .chat-config input[type="range"] { width: 100%; margin-top: 5px; accent-color: var(--blue); } .chat-config .chat-check { display: flex; align-items: center; gap: 6px; } .chat-config .chat-check > span { display: block; } .chat-config > button { grid-column: 1/-1; min-height: 28px; border: 1px solid #bdd5e3; border-radius: 8px; background: white; color: #41718f; font-size: .65em; font-weight: 1000; } .chat-tabs { margin: 3px 0 8px; } .chat-log { min-height: 0; height: auto; overflow: hidden auto; } .chat-message { font-size: 1em; } .chat-message b { display: inline; font-size: .82em; } .chat-message p { font-size: .82em; } .chat-message time { display: inline; margin-left: 6px; color: #91a4b1; font-size: .72em; font-weight: 700; } .chat-panel[data-timestamps="hide"] .chat-message time { display: none; } #chatForm { align-self: end; } .chat-resize { position: absolute; right: 3px; bottom: 3px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 0 0 14px 0; background: linear-gradient(135deg,transparent 47%,#7fa6bd 49%,#7fa6bd 57%,transparent 59%,transparent 68%,#7fa6bd 70%,#7fa6bd 78%,transparent 80%); cursor: nwse-resize; touch-action: none; } /* Compact battle console in the world HUD, never below the canvas. */ .battle-panel { z-index: 46; top: 86px; right: 18px; bottom: auto; left: auto; width: min(410px,calc(100% - 128px)); max-height: calc(100% - 104px); padding: 12px; overflow: hidden auto; border: 1px solid rgba(255,255,255,.9); border-radius: 21px; background: rgba(255,253,248,.96); box-shadow: 0 24px 64px rgba(0,20,42,.45); backdrop-filter: blur(15px); } .battle-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; } .battle-status small, .battle-status b { display: block; } .battle-status small { color: var(--blue); font-weight: 1000; letter-spacing: .9px; } .battle-status b { max-width: 220px; margin-top: 2px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .battle-controls { gap: 5px; } .battle-controls button { min-height: 31px; border: 1px solid #c4d9e5; border-radius: 9px; background: #eff7fb; color: #527389; font-size: 6px; font-weight: 1000; } .battle-controls #cancelBattle { border-color: #efc0bc; background: #fff1f0; color: #b7443d; } .battle-controls .is-active { border-color: #62c63d; background: #62c63d; color: white; } .battle-health { grid-template-columns: 1fr 1fr; margin: 9px 0; } .battle-health article { padding: 7px; border: 1px solid #cbdde7; border-radius: 11px; background: #f6fbfd; } .battle-health article > span { display: flex; justify-content: space-between; gap: 5px; } .battle-health b { max-width: 105px; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; } .battle-health small { color: #6e8799; font-size: 6px; } .battle-health article > i { display: block; height: 7px; margin-top: 5px; overflow: hidden; border-radius: 5px; background: #d7e4ea; } .battle-health em { display: block; width: 0; height: 100%; border-radius: inherit; background: #62c637; transition: width .2s; } .enemy-health em { background: #ef694e; } .battle-skills { grid-template-columns: repeat(2,1fr); gap: 6px; } .battle-skills button { grid-template-columns: 35px 1fr; min-height: 47px; padding: 5px; } .skill-icon { width: 35px; height: 35px; } .battle-decision { display: none; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 6px; padding: 8px; border: 1px solid #efd070; border-radius: 12px; background: #fff8dc; } .battle-decision.is-open { display: grid; } .battle-decision small, .battle-decision b { display: block; } .battle-decision small { color: #aa7300; font-size: 5px; font-weight: 1000; } .battle-decision b { margin-top: 2px; font-size: 7px; } .battle-decision button { min-height: 34px; padding: 0 9px; border: 0; border-radius: 9px; background: #147fd4; color: white; font-size: 6px; font-weight: 1000; } .battle-decision #beginCapture { background: #e14e43; } .battle-decision button:disabled { background: #aebdc6; opacity: .72; cursor: default; } .capture-panel { grid-template-columns: minmax(0,1fr) 67px; min-height: 82px; padding: 7px; } .capture-balls { max-width: 100%; } .capture-balls > button { min-width: 104px; } .capture-throw { width: 62px; height: 62px; } #battleHint { margin: 7px 2px 0; font-size: 6px; } /* Dialogue and starter selection are overlays of game-screen, not pages below it. */ .dialogue-layer, .starter-dialog { position: absolute; z-index: 70; inset: 0; width: 100%; height: 100%; display: grid; place-items: end center; padding: 18px 18px 22px 112px; overflow: hidden; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .18s; } .dialogue-layer.is-open, .starter-dialog.is-open { visibility: visible; opacity: 1; pointer-events: auto; } .dialogue-shade, .starter-backdrop { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(2,25,45,.08),rgba(2,25,45,.72)); backdrop-filter: blur(2px); } .dialogue-card { grid-template-columns: 92px minmax(0,1fr) auto; align-items: center; gap: 14px; width: min(960px,100%); min-height: 152px; padding: 14px; border: 1px solid rgba(255,255,255,.95); border-radius: 23px; background: rgba(255,253,248,.98); box-shadow: 0 25px 75px rgba(0,18,35,.52); } .dialogue-portrait { display: grid; place-items: center; width: 92px; height: 116px; border-radius: 17px; background: radial-gradient(circle,#dff5ff,#72c9ef); } .dialogue-portrait > i { width: 78px; height: 106px; background: url('/assets/v1.4/trainers/trainer-female-walk-8dir-6f.png') 0 0 / 600% 800% no-repeat; } .dialogue-copy small { color: var(--blue); font-size: 6px; font-weight: 1000; letter-spacing: .9px; } .dialogue-copy h2 { margin: 3px 0 6px; font-size: 20px; } .dialogue-copy p { min-height: 43px; color: #496b82; font-size: 11px; line-height: 1.5; } .dialogue-actions { display: grid; gap: 6px; } .dialogue-actions button { min-width: 92px; min-height: 40px; border: 1px solid #c6dae6; border-radius: 11px; background: #eef6fa; color: #55768c; font-size: 7px; font-weight: 1000; } .dialogue-actions #dialogueNext { border: 0; border-bottom: 3px solid #07549e; background: #1189df; color: white; } .starter-dialog { padding: 18px 18px 18px 112px; } .starter-card { width: min(980px,100%); max-height: calc(100% - 10px); } /* Quest-chain cards used by the training zone. */ .quest-chain { display: grid; gap: 9px; } .quest-card { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 9px; padding: 10px; border: 1px solid #cadde8; border-radius: 15px; background: white; opacity: .62; } .quest-card.is-active { border: 2px solid var(--location-accent); background: color-mix(in srgb,var(--location-accent) 7%,white); opacity: 1; } .quest-card.is-done { border-color: #83ce66; background: #f1fdec; opacity: 1; } .quest-card > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #eaf4f9; color: #54778e; font-size: 11px; font-style: normal; font-weight: 1000; } .quest-card.is-done > i { background: #68c94a; color: white; } .quest-card b, .quest-card small, .quest-card em { display: block; } .quest-card b { font-size: 10px; } .quest-card small { margin-top: 3px; color: #5e7b90; font-size: 8px; line-height: 1.4; } .quest-card em { margin-top: 6px; color: var(--location-accent); font-size: 7px; font-style: normal; font-weight: 1000; } @media (max-width: 800px) { .auth-screen { padding: 70px 7px 7px; } .auth-brand { top: max(10px,env(safe-area-inset-top)); left: max(12px,env(safe-area-inset-left)); } .auth-card { max-height: calc(100% - 72px); padding: 18px 14px; overflow: auto; border-radius: 22px; } .home-topbar { top: max(8px,env(safe-area-inset-top)); } .account-chip span { display: none; } .hud-window { max-width: none; max-height: none; } .side-panel, .editor-panel, .chat-panel, .battle-panel { inset: max(61px,calc(env(safe-area-inset-top) + 55px)) max(7px,env(safe-area-inset-right)) calc(79px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left)); width: auto; height: auto; min-width: 0; min-height: 0; max-width: none; max-height: none; border-radius: 21px; } .chat-panel { display: grid; padding: 10px 12px 13px; } .chat-head { cursor: default; } .chat-head small { font-size: 5px; } .chat-config { grid-template-columns: 1fr; max-height: 44%; overflow-y: auto; } .chat-config > button { grid-column: 1; } .chat-resize { display: none; } .battle-panel { left: auto; width: min(390px,calc(100% - 14px)); overflow-y: auto; } .battle-decision { grid-template-columns: 1fr 1fr; } .battle-decision > span { grid-column: 1/-1; } .dialogue-layer, .starter-dialog { padding: 7px 7px calc(79px + env(safe-area-inset-bottom)); } .dialogue-card { grid-template-columns: 67px minmax(0,1fr); gap: 9px; width: 100%; min-height: 132px; padding: 9px; border-radius: 19px; } .dialogue-portrait { width: 67px; height: 88px; } .dialogue-portrait > i { width: 60px; height: 82px; } .dialogue-copy h2 { font-size: 16px; } .dialogue-copy p { font-size: 9px; } .dialogue-actions { grid-column: 1/-1; grid-template-columns: 1fr 1fr; } .dialogue-actions button { min-height: 36px; } .starter-card { width: 100%; max-height: 100%; } } @media (min-width: 801px) and (max-height: 650px) and (pointer: fine) { .auth-card { max-height: calc(100% - 72px); padding: 16px; overflow-y: auto; } .auth-provider { min-height: 49px; } .auth-provider > i { width: 39px; height: 39px; } .side-panel, .editor-panel, .chat-panel, .battle-panel { top: 58px; bottom: 8px; max-height: calc(100% - 66px); } .chat-panel { left: 124px; bottom: 8px; height: auto; } .battle-panel { right: 8px; left: auto; width: min(390px,calc(100% - 140px)); } .dialogue-layer { padding: 8px 8px 8px 124px; } .dialogue-card { min-height: 125px; } .starter-dialog { padding: 8px 8px 8px 124px; } } @media (max-height: 540px) { .battle-health { display: none; } .battle-panel { overflow-y: auto; } .dialogue-card { min-height: 110px; } .dialogue-portrait { height: 80px; } } /* Living Guides v1.7 — one modern white UI system on desktop and mobile. */ :root { --panel-bg: rgba(255,255,255,.975); --panel-border: #c9e0ee; --panel-shadow: 0 24px 68px rgba(5,31,54,.34); --panel-radius: 24px; --text-main: #143b5d; --text-muted: #55758b; font-family: "Segoe UI Variable", "Segoe UI", Inter, ui-rounded, system-ui, sans-serif; } button, input, select, textarea { font-family: inherit; } .art-icon, .panel-art-icon, .quest-art-icon { display: block; object-fit: contain; user-select: none; pointer-events: none; } .auth-step { font-size: 10px; } .auth-card > p { font-size: 14px; } .auth-provider b { font-size: 14px; } .auth-provider small { font-size: 11px; } .auth-security, .auth-admin-link { font-size: 10px; } .hero-card-head small { font-size: 10px; } .hero-card-head em { font-size: 12px; } .hero-card > p { font-size: 14px; } .name-field { font-size: 12px; } .name-field input { font-size: 15px; } .skin-picker button { font-size: 11px; } .player-chip small { font-size: 10px; } .world-location small { font-size: 9px; } .world-location b { font-size: 15px; } .instance-chip b { font-size: 12px; } .instance-chip small { font-size: 9px; } .world-rail { width: 84px; padding: 8px; gap: 4px; border: 1px solid rgba(207,224,235,.96); border-radius: 24px; background: rgba(255,255,255,.965); box-shadow: 0 20px 48px rgba(0,31,54,.22); } .world-rail button { min-height: 59px; gap: 1px; border: 1px solid transparent; border-radius: 17px; color:#315d7d; } .world-rail button span { width: 38px; height: 38px; } .world-rail button .art-icon { width: 38px; height: 38px; filter: drop-shadow(0 3px 5px rgba(0,24,45,.25)); } .world-rail button b { color:#315d7d; font-size: 8px; font-weight: 900; letter-spacing: .1px; } .world-rail button:hover { background:#f0f8fd; border-color:#cfe4f1; color:#0878ca; } .world-rail button:hover b, .world-rail button.is-active b { color:#0878ca; } .world-rail button.is-active { background:#e7f5fd; border-color:#bcdff2; box-shadow: inset 0 0 0 1px rgba(11,143,224,.05); } .mobile-dock .art-icon, .round-quick .art-icon { width: 32px; height: 32px; filter: drop-shadow(0 3px 4px rgba(0,27,50,.2)); } .round-quick .art-icon { width: 38px; height: 38px; } .hud-window, .side-panel, .editor-panel, .chat-panel, .battle-panel { border: 1px solid var(--panel-border); border-radius: var(--panel-radius); background: var(--panel-bg); color: var(--text-main); box-shadow: var(--panel-shadow); backdrop-filter: blur(18px) saturate(1.08); } .side-panel { padding: 27px; } .panel-eyebrow { font-size: 10px; letter-spacing: 1.2px; } .panel-title { margin-top: 5px; font-size: clamp(27px,2.4vw,34px); line-height: 1.08; } .panel-lead { color: var(--text-muted); font-size: 13px; line-height: 1.55; } .panel-close { width: 40px; height: 40px; border: 1px solid #d3e5ef; border-radius: 13px; background: #f1f8fc; } .region-card > p, .region-drops small, .creature-card small, .team-card small, .inventory-card small, .center-card small { font-size: 11px; } .region-drops b, .creature-card b, .team-card b, .inventory-card b, .center-card b { font-size: 13px; } .chat-panel { --chat-font-size:14px; padding: 16px; border-radius: var(--panel-radius); background: rgba(255,255,255,var(--chat-opacity)); } .chat-head small { font-size: .7em; } .chat-head b { font-size: 1.42em; color: var(--text-main); } .chat-head-actions button { width: 38px; height: 38px; border: 1px solid #d5e5ee; border-radius: 12px; background: #f2f8fb; } .chat-tabs button { min-height: 38px; font-size: .78em; } .chat-message b { font-size: .92em; } .chat-message p { margin-top: 4px; color: #46677d; font-size: .92em; line-height: 1.45; } .chat-message time { font-size: .74em; } #chatForm input { min-height: 44px; font-size: .92em; } .battle-panel { padding: 15px; } .battle-status small { font-size: 8px; } .battle-status b { max-width: 245px; font-size: 14px; } .battle-controls button { min-height: 36px; font-size: 8px; } .battle-health article { padding: 9px; } .battle-health b { max-width: 140px; font-size: 10px; } .battle-health small { font-size: 9px; } .battle-skills button { min-height: 56px; } .battle-skills button b { font-size: 10px; } .battle-skills button small, .battle-skills button em { font-size: 7px; } .battle-decision small { font-size: 7px; } .battle-decision b { font-size: 10px; line-height: 1.35; } .battle-decision button { min-height: 38px; font-size: 8px; } #battleHint { font-size: 9px; line-height: 1.4; } .dialogue-layer { padding: 18px 22px 25px 118px; } .dialogue-shade { background: linear-gradient(180deg,rgba(4,26,44,.12),rgba(4,24,42,.7)); backdrop-filter: blur(2px) saturate(.9); } .dialogue-card { grid-template-columns: 158px minmax(0,1fr) 112px; grid-template-rows: minmax(168px,auto) auto; align-items: stretch; gap: 0 20px; width: min(1120px,100%); min-height: 224px; padding: 16px 18px 14px; border: 1px solid rgba(255,255,255,.98); border-top: 4px solid #1596e8; border-radius: 27px; background: rgba(255,255,255,.985); box-shadow: 0 28px 86px rgba(0,18,34,.5); } .dialogue-portrait { position: relative; grid-row: 1 / 3; width: 158px; height: 198px; overflow: hidden; border: 1px solid #cbe4f2; border-radius: 21px; background: linear-gradient(160deg,#e8f7ff,#d7edfb); } .dialogue-portrait > span { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 5px; border-radius: 9px; background: rgba(9,70,108,.84); color: white; font-size: 8px; font-weight: 900; letter-spacing: .6px; text-align: center; backdrop-filter: blur(6px); } .dialogue-copy { padding: 7px 0 4px; } .dialogue-copy > header { gap: 14px; } .dialogue-copy small { letter-spacing: 1px; } .dialogue-copy h2 { margin: 4px 0 13px; font-size: clamp(22px,2.3vw,30px); line-height: 1; } .dialogue-copy p { min-height: 78px; font-size: clamp(16px,1.45vw,19px); line-height: 1.52; } .dialogue-hint { display: block; margin-top: 12px; color: #7893a5 !important; font-weight: 700 !important; letter-spacing: 0 !important; } #dialogueSound { display: flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 9px; border: 1px solid #cce0ec; border-radius: 11px; background: #f2f8fc; color: #36718f; } #dialogueSound i, #dialogueSound .ui-icon { width: 15px; height: 15px; } #dialogueSound b { font-size: 8px; } #dialogueSound.is-muted { opacity: .48; } .dialogue-listener { display: flex; align-items: end; justify-content: center; overflow: hidden; opacity: .42; pointer-events: none; } .dialogue-listener > i { width: 100px; height: 150px; filter: saturate(.78); } .dialogue-actions { grid-column: 2 / 4; padding-top: 8px; } .dialogue-actions button { min-width: 118px; min-height: 43px; padding: 0 14px; border-radius: 12px; font-size: 9px; } .dialogue-actions #dialogueNext { min-width: 168px; border-bottom-width: 3px; background: linear-gradient(180deg,#1aa2f1,#0875cb); } .journey-transition { position: absolute; z-index: 82; inset: 0; display: grid; grid-template-columns: minmax(230px,38vw) minmax(280px,460px); place-content: center; align-items: center; gap: clamp(16px,5vw,74px); padding: 24px; overflow: hidden; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .25s; } .journey-transition.is-open { visibility: visible; opacity: 1; pointer-events: auto; } .journey-transition-shade { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 38% 54%,rgba(234,65,75,.34),rgba(4,25,49,.94) 68%); backdrop-filter: blur(7px); } .journey-portal { width: min(30vw,300px); aspect-ratio: 1; justify-self: end; border-radius: 50%; background: url('/assets/v2.9.11/items/poke-ball.png') center / contain no-repeat; filter: drop-shadow(0 18px 26px rgba(0,16,34,.48)); animation: pokeballRouteFloat 1.05s ease-in-out infinite alternate; } .journey-copy { color: white; text-shadow: 0 3px 14px rgba(0,18,36,.65); } .journey-copy small { color: #78e8ff; font-size: 11px; font-weight: 950; letter-spacing: 1.8px; } .journey-copy h2 { max-width: 430px; margin: 8px 0 12px; font-size: clamp(32px,4.6vw,58px); line-height: .98; letter-spacing: -1.8px; } .journey-copy p { max-width: 400px; margin: 0; color: #dff7ff; font-size: 15px; line-height: 1.55; } .journey-copy > i { display: block; width: 86px; height: 4px; margin-top: 22px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.24); } .journey-copy > i::after { content: ""; display: block; width: 34px; height: 100%; border-radius: inherit; background: #70e4ff; animation: journeyProgress 1s linear infinite; } @keyframes pokeballRouteFloat { to { transform: translateY(-10px) rotate(8deg) scale(1.025); } } @keyframes journeyProgress { from { transform: translateX(-38px); } to { transform: translateX(90px); } } /* Hidden travel overlays must not run a second animation workload in the world. */ #journeyTransition:not(.is-open) *, #journeyTransition:not(.is-open) *::before, #journeyTransition:not(.is-open) *::after { animation-play-state: paused !important; } .quest-prologue { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; margin: 0 0 10px; padding: 11px; border: 1px solid #d2e2eb; border-radius: 16px; background: #f5fafd; } .quest-prologue.is-done { border-color: #8bd36d; background: #f2fceb; } .quest-prologue > i { display: grid; place-items: center; width: 38px; height: 38px; font-style: normal; } .quest-prologue .quest-art-icon { width: 38px; height: 38px; } .quest-prologue b { display: block; font-size: 12px; } .quest-prologue small { display: block; margin-top: 3px; color: #5b788c; font-size: 10px; line-height: 1.4; } .professor-quest-chain .quest-card { grid-template-columns: 48px minmax(0,1fr); padding: 13px; } .professor-quest-chain .quest-card > i { width: 44px; height: 44px; background: #eef7fc; } .professor-quest-chain .quest-card > i .quest-art-icon { width: 44px; height: 44px; } .professor-quest-chain .quest-card b { font-size: 13px; } .professor-quest-chain .quest-card small { font-size: 10px; line-height: 1.5; } .professor-quest-chain .quest-card strong { display: block; margin-top: 8px; color: #0878ca; font-size: 9px; letter-spacing: .4px; } .quest-subtasks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .quest-subtasks em { margin: 0; padding: 5px 7px; border-radius: 8px; background: #eef4f7; color: #6a8292; font-size: 9px; } .quest-subtasks em.is-done { background: #e1f7d8; color: #3c8b28; } .panel-art-icon { width: 44px; height: 44px; } @media (max-width: 800px) { :root { font-size: 16px; } .world-rail { display: none; } .mobile-dock { border-color: var(--panel-border); background: rgba(255,255,255,.97); box-shadow: 0 -12px 35px rgba(4,31,54,.22); } .mobile-dock button { color: #52728a; } .mobile-dock button.is-active { color: #0879d1; } .mobile-dock b { font-size: 8px; } .mobile-dock .art-icon { width: 31px; height: 31px; } .side-panel, .editor-panel, .chat-panel, .battle-panel { border-radius: 22px; background: rgba(255,255,255,.985); } .side-panel { padding: 20px 17px; } .panel-eyebrow { font-size: 9px; } .panel-lead { font-size: 13px; } .chat-panel { --chat-font-size:14px; padding: 13px; } .auth-card > p { font-size: 13px; } .auth-provider b { font-size: 13px; } .auth-provider small { font-size: 10px; } .hero-card-head small { font-size: 9px; } .name-field { font-size: 11px; } .skin-picker button { font-size: 10px; } .player-chip b { max-width: 44vw; font-size: 11px; } .player-chip small { font-size: 8px; } .instance-chip b { font-size: 9px; } .instance-chip small { max-width: 125px; font-size: 8px; } .battle-panel { width: min(430px,calc(100% - 14px)); padding: 13px; } .dialogue-layer { padding: 7px 7px calc(82px + env(safe-area-inset-bottom)); } .dialogue-card { grid-template-columns: 92px minmax(0,1fr); grid-template-rows: minmax(142px,auto) auto; gap: 0 11px; width: 100%; min-height: 205px; max-height: calc(100dvh - 96px - env(safe-area-inset-bottom)); padding: 10px 11px; overflow: auto; border-radius: 22px; } .dialogue-portrait { grid-row: 1; width: 92px; height: 132px; align-self: start; border-radius: 16px; } .dialogue-portrait > span { left: 4px; right: 4px; bottom: 4px; padding: 4px 2px; font-size: 6px; } .dialogue-copy { padding-top: 3px; } .dialogue-copy h2 { margin-bottom: 8px; font-size: 21px; } .dialogue-copy p { min-height: 60px; font-size: 14px; line-height: 1.48; } .dialogue-copy small { font-size: 7px; } .dialogue-hint { margin-top: 7px; font-size: 8px !important; } #dialogueSound b { display: none; } #dialogueSound { min-width: 32px; padding: 0 8px; } .dialogue-listener { display: none; } .dialogue-actions { grid-column: 1 / 3; grid-row: 2; display: grid; grid-template-columns: .7fr 1.3fr; gap: 7px; padding-top: 8px; } .dialogue-actions button, .dialogue-actions #dialogueNext { min-width: 0; min-height: 40px; } .journey-transition { grid-template-columns: 1fr; grid-template-rows: minmax(210px,48vh) auto; gap: 2px; place-content: center; padding: 14px 18px calc(78px + env(safe-area-inset-bottom)); text-align: center; } .journey-portal { width: min(58vw,260px); align-self: end; justify-self: center; } .journey-copy h2 { margin-inline: auto; font-size: clamp(30px,10vw,45px); } .journey-copy p { margin-inline: auto; font-size: 13px; } .journey-copy > i { margin: 17px auto 0; } } @media (max-height: 560px) and (orientation: landscape) { .dialogue-card { grid-template-columns: 112px minmax(0,1fr) 78px; grid-template-rows: minmax(112px,auto) auto; min-height: 150px; } .dialogue-portrait { width: 112px; height: 134px; } .dialogue-copy p { min-height: 42px; font-size: 14px; } .dialogue-listener > i { width: 70px; height: 105px; } .dialogue-actions { grid-column: 2 / 4; } } /* v2.0.3 · server-owned personal airship transit */ .airship-transition { position:absolute; z-index:96; inset:0; overflow:hidden; visibility:hidden; opacity:0; pointer-events:none; background:#80ccf4; transition:opacity .35s ease; } .airship-transition.is-open { visibility:visible; opacity:1; pointer-events:auto; } .airship-sky { position:absolute; inset:-3%; background:url('/assets/v2.1/transit/airship-sky.png') center/cover no-repeat; transform:scale(1.06); animation:airshipSkyDrift 15s linear both; } .airship-sky::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(44,135,198,.08) 56%,rgba(5,43,78,.2)); } .airship-cloud { position:absolute; width:38vw; min-width:330px; aspect-ratio:2.8; border-radius:50%; opacity:.34; filter:blur(18px); background:radial-gradient(ellipse at center,rgba(255,255,255,.94),rgba(255,255,255,0) 70%); pointer-events:none; } .airship-cloud.cloud-a { left:-15%; bottom:2%; animation:airshipCloudA 13s linear infinite; } .airship-cloud.cloud-b { right:-18%; top:11%; transform:scale(.72); animation:airshipCloudB 11s linear infinite; } .airship-flight-hud { position:absolute; z-index:5; top:clamp(14px,2.4vw,32px); left:clamp(14px,2.4vw,32px); right:clamp(14px,2.4vw,32px); display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 15px; border:1px solid rgba(255,255,255,.75); border-radius:18px; background:rgba(255,255,255,.82); box-shadow:0 13px 35px rgba(11,75,121,.22); backdrop-filter:blur(13px); color:#174d70; } .airship-flight-hud span { display:grid; gap:2px; } .airship-flight-hud small { color:#3b9bcf; font-size:9px; font-weight:1000; letter-spacing:1.35px; } .airship-flight-hud b { font-size:15px; line-height:1.15; } .airship-flight-clock { display:grid !important; justify-items:end; gap:1px !important; min-width:96px; } .airship-flight-clock small { color:#5d8da9; font-size:7px; letter-spacing:.8px; } .airship-flight-hud strong { min-width:82px; color:#0a6fae; font-size:28px; font-variant-numeric:tabular-nums; letter-spacing:-1px; text-align:right; } .airship-flight-vehicle { position:absolute; z-index:3; left:50%; top:48%; width:min(58vw,820px); max-height:76vh; object-fit:contain; filter:drop-shadow(0 28px 30px rgba(17,64,97,.28)); transform-origin:center; will-change:transform,opacity,filter; opacity:0; } .airship-transition.is-open .airship-flight-vehicle { animation:airshipApproach 14.45s cubic-bezier(.22,.7,.22,1) both; animation-delay:var(--airship-offset,0ms); } .airship-kanto-mark { position:absolute; z-index:4; left:50%; top:50%; width:min(54vw,690px); transform:translate(-50%,-50%) scale(.66); opacity:0; filter:drop-shadow(0 16px 22px rgba(36,80,124,.26)); transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1); } .airship-transition.phase-kanto .airship-kanto-mark, .airship-transition.phase-arrival .airship-kanto-mark { opacity:1; transform:translate(-50%,-50%) scale(1); } .airship-transition.phase-arrival .airship-flight-vehicle { opacity:0 !important; transition:opacity .42s; } .airship-arrival-copy { position:absolute; z-index:5; left:50%; bottom:clamp(70px,10vh,110px); display:grid; justify-items:center; gap:4px; width:min(90%,560px); padding:12px 18px; border-radius:17px; background:rgba(255,255,255,.82); box-shadow:0 12px 34px rgba(20,71,109,.18); backdrop-filter:blur(11px); color:#234f6b; text-align:center; opacity:0; transform:translate(-50%,16px); transition:.45s ease; } .airship-transition.phase-kanto .airship-arrival-copy, .airship-transition.phase-arrival .airship-arrival-copy { opacity:1; transform:translate(-50%,0); } .airship-arrival-copy span { color:#3c9bd0; font-size:8px; font-weight:1000; letter-spacing:1.4px; } .airship-arrival-copy b { font-size:19px; } .airship-arrival-copy small { color:#6f8b9e; font-size:10px; } .airship-flight-progress { position:absolute; z-index:6; left:clamp(18px,3vw,45px); right:clamp(18px,3vw,45px); bottom:clamp(18px,3vw,36px); height:5px; overflow:hidden; border:1px solid rgba(255,255,255,.7); border-radius:10px; background:rgba(23,92,132,.24); box-shadow:0 4px 15px rgba(13,68,103,.15); } .airship-flight-progress i { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#fff2a5,#ffc83d,#ff9e2a); transform-origin:left; transform:scaleX(var(--airship-progress,0)); transition:transform .12s linear; } .airship-transition.phase-arrival::after { content:""; position:absolute; z-index:10; inset:0; pointer-events:none; background:white; opacity:0; animation:airshipArrivalFlash 1.3s ease-in-out infinite alternate; } @keyframes airshipSkyDrift { from { transform:scale(1.08) translate3d(-1.2%,0,0); } to { transform:scale(1.13) translate3d(1.5%,-1%,0); } } @keyframes airshipCloudA { from { transform:translateX(-10%); } to { transform:translateX(250%); } } @keyframes airshipCloudB { from { transform:translateX(15%) scale(.72); } to { transform:translateX(-260%) scale(.72); } } @keyframes airshipApproach { 0% { opacity:0; transform:translate(-50%,-48%) translate3d(240px,-140px,0) scale(.16) rotate(-2deg); filter:blur(1.3px) drop-shadow(0 10px 16px rgba(17,64,97,.14)); } 7% { opacity:1; } 26% { opacity:1; transform:translate(-50%,-48%) translate3d(105px,-72px,0) scale(.36) rotate(1deg); filter:blur(.5px) drop-shadow(0 16px 22px rgba(17,64,97,.2)); } 55% { opacity:1; transform:translate(-50%,-48%) translate3d(-20px,-12px,0) scale(.72) rotate(-.6deg); filter:blur(0) drop-shadow(0 23px 29px rgba(17,64,97,.25)); } 78% { opacity:1; transform:translate(-50%,-48%) translate3d(0,15px,0) scale(1.02) rotate(.3deg); } 91% { opacity:1; transform:translate(-50%,-48%) translate3d(-22px,24px,0) scale(1.13) rotate(-.2deg); } 96% { opacity:1; transform:translate(-50%,-48%) translate3d(-52px,30px,0) scale(1.22) rotate(-.5deg); } 100% { opacity:.15; transform:translate(-50%,-48%) translate3d(-120px,54px,0) scale(1.42) rotate(-1.5deg); filter:blur(1.6px) drop-shadow(0 32px 42px rgba(17,64,97,.3)); } } .airship-world-loader { position:absolute; z-index:7; left:50%; top:68%; display:flex; align-items:center; gap:11px; min-width:min(88vw,330px); padding:10px 14px; transform:translate(-50%,18px); border:1px solid rgba(255,255,255,.78); border-radius:16px; background:rgba(255,255,255,.9); color:#234f6b; box-shadow:0 14px 34px rgba(20,71,109,.2); opacity:0; transition:.35s ease; } .airship-transition.phase-arrival .airship-world-loader { opacity:1; transform:translate(-50%,0); } .airship-world-loader > i { width:27px; height:27px; border:3px solid #c8e7f7; border-top-color:#1599df; border-radius:50%; animation:airshipLoaderSpin .75s linear infinite; } .airship-world-loader span { display:grid; gap:2px; } .airship-world-loader b { font-size:10px; } .airship-world-loader small { color:#6d899c; font-size:8px; } @keyframes airshipLoaderSpin { to { transform:rotate(360deg); } } @keyframes airshipArrivalFlash { from { opacity:0; } to { opacity:.2; } } .audio-settings { display:grid; gap:10px; margin:12px 0; padding:12px; border:1px solid #d3e2ea; border-radius:16px; background:#f7fbfd; } .audio-setting-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,42%); align-items:center; gap:12px; } .audio-setting-row span { display:grid; gap:2px; } .audio-setting-row b { color:#214d69; font-size:11px; } .audio-setting-row small { color:#7991a1; font-size:8px; line-height:1.35; } .audio-setting-control { display:grid; grid-template-columns:1fr 38px; align-items:center; gap:8px; } .audio-setting-control input[type="range"] { width:100%; accent-color:#1497df; } .audio-setting-control output { min-width:36px; color:#197bad; font-size:9px; font-weight:1000; text-align:right; font-variant-numeric:tabular-nums; } .region-card .instance-badge { display:inline-flex; width:max-content; margin:8px 0 0; padding:4px 7px; border-radius:999px; background:#e8f7ff; color:#0b7cb7; font-size:8px; font-weight:1000; letter-spacing:.45px; } .region-card .instance-badge.is-private { background:#fff1ca; color:#a96d00; } @media (max-width:800px) { .airship-flight-hud { top:10px; left:10px; right:10px; padding:10px 12px; border-radius:15px; } .airship-flight-hud small { font-size:7px; } .airship-flight-hud b { font-size:12px; } .airship-flight-hud strong { min-width:62px; font-size:22px; } .airship-flight-vehicle { width:min(104vw,760px); } .airship-kanto-mark { width:min(86vw,560px); } .airship-arrival-copy { bottom:58px; width:calc(100% - 24px); padding:10px 12px; } .airship-arrival-copy b { font-size:16px; } .audio-setting-row { grid-template-columns:1fr; gap:7px; } } @media (min-width:801px) and (pointer:fine) { .quick-hint { border:1px solid rgba(205,224,235,.96); background:rgba(255,255,255,.93); color:#315d7d; box-shadow:0 9px 25px rgba(0,31,54,.16); } .loot-feed { border-color:#d3e3ec; background:rgba(255,255,255,.94); color:#214c68; box-shadow:0 12px 30px rgba(0,31,54,.18); } .loot-feed.is-active { border-color:#f0ca48; background:rgba(255,255,255,.98); } .loot-feed small { color:#6d8799; } } /* v2.0.5 — inventory categories + Oak research questline */ .bag-tabs { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 14px; } .bag-tabs button { display:inline-flex; align-items:center; gap:6px; min-height:31px; padding:7px 10px; border:1px solid #d3e3ec; border-radius:999px; background:#f7fbfd; color:#45677d; font:800 9px/1 system-ui,sans-serif; cursor:pointer; transition:.16s ease; } .bag-tabs button small { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#e8f3f8; color:#5a7f96; font-size:8px; } .bag-tabs button:hover { transform:translateY(-1px); border-color:#9fd4ec; background:#fff; } .bag-tabs button.is-active { border-color:#37b88a; background:#ecfbf5; color:#16845f; box-shadow:0 5px 14px rgba(37,166,120,.11); } .bag-tabs button.is-active small { background:#d6f4e8; color:#147554; } .bag-empty { display:grid; place-items:center; min-height:150px; margin-top:10px; padding:24px; border:1px dashed #cbdde7; border-radius:17px; background:#f9fcfd; color:#718b9b; font-size:10px; text-align:center; } .inventory-item-icon { width:42px; height:42px; flex:0 0 auto; border-radius:12px; background:#eef7fb; filter:drop-shadow(0 4px 6px rgba(25,78,109,.08)); } .quest-section-title { margin:15px 0 8px; color:#2a607c; font-size:10px; font-weight:1000; letter-spacing:.7px; text-transform:uppercase; } .quest-section-title:first-of-type { margin-top:8px; } .oak-research-chain { border-top:1px solid #e1edf3; padding-top:10px; } @media (max-width:800px) { .bag-tabs { gap:6px; margin:9px 0 12px; } .bag-tabs button { min-height:34px; padding:8px 10px; font-size:8px; } } /* v2.6.1 — unique Pokémon detail + Oak research board */ .pokemon-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.pokemon-detail-head>span{font-size:11px;font-weight:900;letter-spacing:.08em;color:#0a78c8;background:#eaf6ff;border:1px solid #cbe7fb;border-radius:999px;padding:7px 10px}.pokemon-back{border:0;background:transparent;color:#486b84;font-weight:900;cursor:pointer;padding:6px 0}.pokemon-detail-hero{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:center;padding:16px;border:1px solid #dce8ef;border-radius:20px;background:linear-gradient(145deg,#fff,#f4f9fc);box-shadow:0 12px 35px rgba(20,73,102,.08)}.pokemon-detail-portrait{width:112px;height:112px;border-radius:18px;background:radial-gradient(circle,#faffef 0,#e4f4d0 55%,#d4e8c1 100%);display:grid;place-items:center;overflow:hidden}.pokemon-detail-portrait img{width:100%;height:100%;object-fit:contain}.pokemon-detail-hero small{display:block;color:#648096;font-weight:800;font-size:10px;letter-spacing:.05em}.pokemon-detail-hero h2{margin:3px 0 4px;font-size:25px;color:#153d5b}.pokemon-detail-hero p{margin:0;color:#4d6c82;font-size:12px;font-weight:700}.pokemon-detail-hero em{display:block;margin-top:6px;color:#6d8799;font-size:10px;font-style:normal}.pokemon-exp-track{height:8px;margin-top:12px;border-radius:999px;background:#dce9f2;overflow:hidden}.pokemon-exp-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#55a8ff,#77d3ff)}.pokemon-trait-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0}.pokemon-trait-grid article{padding:12px;border:1px solid #dce8ef;border-radius:15px;background:#fff}.pokemon-trait-grid small{display:block;font-size:8px;font-weight:900;letter-spacing:.08em;color:#7892a4}.pokemon-trait-grid b{display:block;margin-top:3px;color:#163f5d;font-size:14px}.pokemon-trait-grid span{display:block;margin-top:4px;color:#72899a;font-size:9px;line-height:1.35}.pokemon-detail-section{margin-top:11px;padding:14px;border:1px solid #dce8ef;border-radius:17px;background:#fff}.pokemon-section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.pokemon-section-title small{display:block;color:#7892a4;font-size:8px;font-weight:900;letter-spacing:.08em}.pokemon-section-title b{display:block;color:#173e5c;font-size:14px}.pokemon-section-title strong{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#eaf6ff;color:#0877c7;font-size:15px}.pokemon-gene-list{display:grid;gap:8px}.pokemon-gene-row{display:grid;grid-template-columns:76px 1fr 48px;align-items:center;gap:9px;color:#46667d;font-size:10px;font-weight:800}.pokemon-gene-row>div{height:7px;border-radius:999px;background:#e2ebf1;overflow:hidden}.pokemon-gene-row>div i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#66c44a,#37a9da)}.pokemon-gene-row b{text-align:right;color:#183e5a}.pokemon-gene-row b small{font-size:8px;color:#88a0b0}.pokemon-move-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pokemon-move-card{padding:10px;border-radius:12px;background:#f3f8fb;border:1px solid #e1ebf1}.pokemon-move-card b{display:block;color:#173e5c;font-size:11px}.pokemon-move-card span{display:block;margin-top:3px;color:#6b8496;font-size:9px}.pokemon-evolution-box{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#f9f4ff,#eef7ff)}.pokemon-evolution-box>div{display:grid;gap:3px}.pokemon-evolution-box small{color:#7d6aa9;font-size:8px;font-weight:900;letter-spacing:.08em}.pokemon-evolution-box b{color:#2d3f63;font-size:13px}.pokemon-evolution-box span{color:#687c94;font-size:9px}.pokemon-evolution-box button{border:0;border-radius:12px;padding:10px 12px;background:#6f42db;color:#fff;font-size:9px;font-weight:900;cursor:pointer}.pokemon-evolution-box button:disabled{background:#d6d9e3;color:#7d8695;cursor:not-allowed}.pokemon-detail-actions{margin-top:12px}.oak-board-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.oak-board-summary article{padding:11px;border:1px solid #dce8ef;border-radius:14px;background:#f8fbfd;text-align:center}.oak-board-summary small{display:block;font-size:8px;font-weight:900;color:#7892a4;letter-spacing:.08em}.oak-board-summary b{display:block;margin-top:2px;color:#173e5c;font-size:18px}.oak-program-list{display:grid;gap:11px}.oak-program-card{padding:14px;border:1px solid #dce8ef;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(24,75,104,.05)}.oak-program-card.is-ready{border-color:#8dcc69;box-shadow:0 8px 26px rgba(80,158,61,.12)}.oak-program-card.is-complete{background:#f7fbf5}.oak-program-top{display:grid;grid-template-columns:48px 1fr;gap:11px;align-items:start}.oak-program-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#f1f7fb;border:1px solid #dce8ef}.oak-program-item,.oak-reward-icon{width:28px;height:28px;display:inline-grid;place-items:center}.oak-program-top small{display:block;color:#7892a4;font-size:8px;font-weight:900;letter-spacing:.08em}.oak-program-top b{display:block;margin-top:2px;color:#173e5c;font-size:13px}.oak-program-top p{margin:4px 0 0;color:#6b8395;font-size:9px;line-height:1.4}.oak-progress-label{display:flex;justify-content:space-between;margin-top:12px;color:#617b8e;font-size:9px;font-weight:800}.oak-progress-track{height:8px;border-radius:999px;background:#e2ebf1;overflow:hidden;margin-top:5px}.oak-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4da9f3,#6ed05a)}.oak-rewards{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:11px 0}.oak-rewards>small{width:100%;font-size:8px;font-weight:900;letter-spacing:.08em;color:#8399a9}.oak-reward-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 7px;border-radius:9px;background:#f4f8fb;color:#48677d;font-size:8px;font-weight:800}.oak-program-card>button{width:100%;border:0;border-radius:11px;padding:10px 12px;background:#0e8ed8;color:#fff;font-size:9px;font-weight:900;cursor:pointer}.oak-program-card.is-ready>button{background:#53ae43}.oak-program-card>button:disabled{background:#e5ebef;color:#8a9dab;cursor:not-allowed} @media(max-width:760px){.pokemon-detail-hero{grid-template-columns:86px 1fr;padding:12px}.pokemon-detail-portrait{width:82px;height:82px}.pokemon-detail-hero h2{font-size:20px}.pokemon-trait-grid{grid-template-columns:1fr}.pokemon-move-grid{grid-template-columns:1fr}.pokemon-evolution-box{align-items:stretch;flex-direction:column}.oak-board-summary{grid-template-columns:repeat(3,1fr)}} .pokemon-effective-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.pokemon-effective-stats article{padding:9px;border-radius:11px;background:#f3f8fb;border:1px solid #e0ebf1}.pokemon-effective-stats small{display:block;color:#718a9d;font-size:8px;font-weight:900}.pokemon-effective-stats b{display:block;margin-top:2px;color:#153d5b;font-size:16px}.pokemon-effective-stats span{display:block;margin-top:2px;color:#8aa0af;font-size:7px}@media(max-width:760px){.pokemon-effective-stats{grid-template-columns:repeat(2,minmax(0,1fr))}} /* v2.6.3 — first-step tutorial + in-battle EXP */ .quick-hint[hidden],.loot-feed[hidden]{display:none!important} .controls-tutorial-card{border:1px solid rgba(214,232,242,.96);border-radius:20px}.controls-tutorial-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.controls-tutorial-card header small{display:block;color:#208ac5;font-size:8px;font-weight:1000;letter-spacing:.1em}.controls-tutorial-card header b{display:block;margin-top:2px;font-size:17px}.controls-tutorial-card header button{width:30px;height:30px;border:0;border-radius:10px;background:#edf5f9;color:#607f92;font-size:18px;cursor:pointer}.controls-tutorial-card p{margin:7px 0 10px;color:#6b8596;font-size:10px;font-weight:700}.controls-keyboard{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,38px);justify-content:center;gap:5px}.controls-keyboard kbd,.controls-tutorial-extra kbd,.controls-tutorial-extra b{display:grid;place-items:center;min-width:40px;height:34px;border:1px solid #cbdce6;border-bottom:3px solid #aec4d1;border-radius:9px;background:linear-gradient(#fff,#edf5f8);color:#214f6d;font:900 13px/1 system-ui;box-shadow:0 4px 10px rgba(25,70,97,.08)}.controls-tutorial-extra b{font-size:9px}.battle-exp{margin-top:7px}.battle-exp>span{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;color:#7291a7}.battle-exp>span b{font-size:8px;letter-spacing:.08em;color:#4c9cde}.battle-exp>span small{font-size:8px;font-weight:850}.battle-exp>i{display:block;height:6px!important;border-radius:999px;background:rgba(98,149,184,.22)!important;overflow:hidden}.battle-exp>i>em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4e9fff,#78d8ff)!important;transition:width .25s ease} .guidance-pill{position:absolute;z-index:19;left:18px;bottom:22px;display:flex;align-items:center;gap:12px;min-width:240px;max-width:min(420px,calc(100vw - 130px));padding:10px 14px;border:1px solid rgba(214,232,242,.96);border-radius:18px;background:rgba(255,255,255,.95);box-shadow:0 14px 38px rgba(7,42,65,.18);backdrop-filter:blur(14px);opacity:0;transform:translateY(12px);pointer-events:none;transition:.22s ease}.guidance-pill.is-open{opacity:1;transform:none}.guidance-pill>span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#c7ebff,#76bfff);color:#0b5b98}.guidance-pill>span .ui-icon{width:20px;height:20px}.guidance-pill b{display:block;color:#124469;font-size:12px;font-weight:950;line-height:1.1}.guidance-pill small{display:block;margin-top:3px;color:#6a8698;font-size:9px;font-weight:750;line-height:1.25} .progress-pulse{position:absolute;z-index:21;left:50%;bottom:94px;transform:translate(-50%,18px);min-width:250px;max-width:min(420px,calc(100vw - 40px));padding:10px 14px;border:1px solid rgba(188,222,244,.95);border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 14px 34px rgba(10,50,84,.18);opacity:0;pointer-events:none;transition:.22s ease}.progress-pulse.is-open{opacity:1;transform:translate(-50%,0)}.progress-pulse b{display:block;color:#0e5f9e;font-size:11px;font-weight:950}.progress-pulse small{display:block;margin-top:3px;color:#5b7689;font-size:9px;font-weight:800} .professor-transfer-dialog{position:fixed;inset:0;z-index:140;display:grid;place-items:center;opacity:0;pointer-events:none;transition:.2s ease}.professor-transfer-dialog.is-open{opacity:1;pointer-events:auto}.professor-transfer-card-shell{position:relative;z-index:1;width:min(640px,calc(100vw - 28px));max-height:min(82vh,760px);overflow:auto;padding:16px;border:1px solid #d4e6f0;border-radius:24px;background:rgba(255,255,255,.97);box-shadow:0 32px 80px rgba(0,20,41,.3)}.professor-transfer-card-shell header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.professor-transfer-card-shell header small{display:block;color:#2c95d4;font-size:8px;font-weight:1000;letter-spacing:.08em}.professor-transfer-card-shell header h2{margin:3px 0 0;color:#143e5f;font-size:22px}.professor-transfer-card-shell header button{width:36px;height:36px;border:0;border-radius:12px;background:#edf5f9;color:#5b7b8e;cursor:pointer}.professor-transfer-card-shell>p{margin:8px 0 14px;color:#678497;font-size:10px;font-weight:750}.professor-transfer-list{display:grid;gap:10px}.professor-transfer-card{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:12px;padding:10px 12px;border:1px solid #d9e9f1;border-radius:18px;background:#fbfdff;cursor:pointer}.professor-transfer-card.is-selected{border-color:#59b0ff;box-shadow:0 0 0 3px rgba(95,177,255,.12)}.professor-transfer-card input{margin:0}.professor-transfer-card span{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center}.professor-transfer-card b{display:block;color:#173f5c;font-size:14px}.professor-transfer-card small{display:block;margin-top:4px;color:#718b9c;font-size:9px;font-weight:800}.professor-transfer-card .center-portrait{width:56px;height:56px}.professor-transfer-empty{padding:18px;border:1px dashed #cadbe5;border-radius:18px;color:#6b8598;text-align:center;font-weight:850}.professor-transfer-card-shell footer{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.professor-transfer-card-shell footer button{min-height:42px;padding:0 18px;border:0;border-radius:12px;background:linear-gradient(135deg,#1da2ff,#2f73ff);color:#fff;font-weight:950;cursor:pointer}.professor-transfer-card-shell footer .secondary{background:#edf4f8;color:#557387}.dialogue-shade{position:absolute;inset:0;background:rgba(5,23,41,.5)} @media (max-width: 760px){.guidance-pill{left:10px;right:10px;bottom:calc(146px + env(safe-area-inset-bottom));min-width:0;max-width:none}.progress-pulse{bottom:calc(154px + env(safe-area-inset-bottom));width:min(360px,calc(100vw - 24px))}.professor-transfer-card-shell{width:min(96vw,560px);padding:14px}.professor-transfer-card span{grid-template-columns:48px minmax(0,1fr)}.professor-transfer-card .center-portrait{width:48px;height:48px}} /* v2.6.4 dialogue refresh + capture polish */ .dialogue-portrait { width: 184px; height: 240px; } .dialogue-portrait > i { filter: drop-shadow(0 10px 16px rgba(4,35,57,.22)); } .dialogue-portrait > span { left: 14px; right: 14px; bottom: 10px; border-radius: 12px; background: rgba(13,90,138,.88); } .dialogue-listener { opacity: .9; } .dialogue-listener > i { width: 128px; height: 180px; filter: saturate(1) drop-shadow(0 8px 14px rgba(7,36,63,.18)); } .capture-panel { overflow: hidden; padding-top: 86px; } .capture-panel::before { content: ''; position: absolute; top: 12px; left: 50%; width: 150px; height: 150px; transform: translateX(-50%); border-radius: 50%; border: 4px solid rgba(255,255,255,.85); box-shadow: 0 0 0 10px rgba(67,181,255,.14), 0 0 0 22px rgba(67,181,255,.08); } .capture-panel::after { content: 'ЗОНА БРОСКА'; position: absolute; top: 62px; left: 50%; transform: translateX(-50%); color: #e9f9ff; font-size: 11px; font-weight: 900; letter-spacing: 1.6px; } .capture-balls { position: relative; z-index: 1; } @media (max-width: 900px) { .dialogue-portrait { width: 112px; height: 156px; } .dialogue-listener > i { width: 74px; height: 106px; } .capture-panel { padding-top: 74px; } .capture-panel::before { width: 116px; height: 116px; top: 10px; } .capture-panel::after { top: 44px; font-size: 9px; } } /* v2.6.6 dialogue layout refinement */ .dialogue-card { position: relative; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr) 96px; grid-template-rows: minmax(196px, auto) auto; gap: 0 18px; width: min(1180px, 100%); min-height: 302px; padding: 20px 24px 16px 286px; } .dialogue-portrait { position: absolute; left: 14px; bottom: 0; width: 254px; height: 304px; margin: 0; align-self: end; justify-self: start; background: transparent; border: none; overflow: visible; pointer-events: none; } .dialogue-portrait > i { width: 100%; height: 100%; background-repeat: no-repeat; background-size: 500% 200%; background-position: 0 0; filter: drop-shadow(0 12px 20px rgba(4, 35, 57, 0.22)); } .dialogue-portrait > span { left: 18px; right: 18px; bottom: 12px; padding: 8px 12px; border-radius: 14px; background: rgba(13, 90, 138, 0.94); font-size: 9px; letter-spacing: .8px; } .dialogue-copy { grid-column: 1; grid-row: 1; min-width: 0; padding-top: 8px; } .dialogue-copy > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .dialogue-copy > header > span { display: block; flex: 1 1 auto; min-width: 0; } .dialogue-copy small { font-size: 9px; letter-spacing: 1.1px; } .dialogue-copy h2 { margin: 5px 0 12px; color: #0a78ca; font-size: clamp(22px, 2.2vw, 31px); line-height: 1.04; } .dialogue-copy p { min-height: 122px; margin: 0; padding-right: 4px; color: #254d69; font-size: clamp(17px, 1.35vw, 20px); font-weight: 560; line-height: 1.55; } .dialogue-hint { margin-top: 10px; font-size: 10px !important; } #dialogueSound { flex: 0 0 auto; min-height: 38px; padding: 0 11px; border-radius: 12px; } .dialogue-listener { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; opacity: .84; padding: 0 8px 12px 0; } .dialogue-listener > i { width: 92px; height: 138px; background-repeat: no-repeat; background-size: 600% 800%; background-position: 0 0; filter: saturate(.94) drop-shadow(0 7px 14px rgba(7,36,63,.14)); } .dialogue-actions { grid-column: 1 / 3; grid-row: 2; display: flex; justify-content: flex-end; align-items: end; gap: 10px; padding-top: 12px; margin-left: 18px; } .dialogue-actions button { min-width: 132px; min-height: 46px; padding: 0 16px; border-radius: 14px; } .dialogue-actions #dialogueNext { min-width: 188px; } @media (max-width: 900px) { .dialogue-layer { padding: 7px 7px calc(82px + env(safe-area-inset-bottom)); } .dialogue-card { width: 100%; min-height: 276px; max-height: calc(100dvh - 96px - env(safe-area-inset-bottom)); padding: 12px 12px 12px 132px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(150px, auto) auto; gap: 0; overflow: auto; border-radius: 22px; } .dialogue-portrait { left: 8px; bottom: 0; width: 118px; height: 174px; } .dialogue-portrait > span { left: 6px; right: 6px; bottom: 6px; padding: 5px 5px; font-size: 6px; border-radius: 10px; } .dialogue-copy { grid-column: 1; grid-row: 1; padding-top: 2px; } .dialogue-copy > header { gap: 10px; } .dialogue-copy h2 { margin-bottom: 8px; font-size: 20px; } .dialogue-copy p { min-height: 72px; font-size: 14px; line-height: 1.5; } .dialogue-copy small { font-size: 7px; } .dialogue-hint { margin-top: 8px; font-size: 8px !important; } #dialogueSound b { display: none; } #dialogueSound { min-width: 32px; min-height: 34px; padding: 0 8px; } .dialogue-listener { display: none; } .dialogue-actions { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; margin-left: 0; } .dialogue-actions button, .dialogue-actions #dialogueNext { min-width: 0; min-height: 42px; } } /* v2.6.9 HUD refresh */ .world-topbar { gap: 10px; } .player-chip, .world-location, .instance-chip { border-color: rgba(255,255,255,.82); background: linear-gradient(180deg,rgba(255,255,255,.94),rgba(245,251,255,.9)); box-shadow: 0 16px 36px rgba(0,35,61,.2); } .quest-widget { position: absolute; z-index: 15; top: max(82px, calc(env(safe-area-inset-top) + 66px)); left: max(18px, env(safe-area-inset-left)); width: min(320px, calc(100vw - 136px)); display: grid; gap: 6px; padding: 14px 15px 12px; border: 1px solid rgba(255,255,255,.82); border-radius: 20px; background: linear-gradient(180deg,rgba(9,44,73,.84),rgba(10,58,89,.72)); box-shadow: 0 18px 38px rgba(0,24,46,.24); backdrop-filter: blur(16px) saturate(1.06); color: #fff; } .quest-widget small { color: #8ce2ff; font-size: 9px; font-weight: 1000; letter-spacing: 1.3px; } .quest-widget b { font-size: 23px; line-height: 1; letter-spacing: -.5px; } .quest-widget p { margin: 0; color: rgba(234,246,255,.9); font-size: 12px; line-height: 1.42; } .quest-widget-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .quest-widget-meta span { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.08); color: #eaf7ff; font-size: 11px; font-weight: 850; } .world-minimap { top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); display: inline-flex; align-items: center; justify-content: center; width: 124px; height: 124px; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: #123a5d; } .world-minimap-frame { position: relative; flex: 0 0 124px; width: 124px; height: 124px; border: 3px solid rgba(255,255,255,.94); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(11,110,184,.16), 0 14px 32px rgba(0,31,54,.24); background: radial-gradient(circle at 50% 50%, #203345 0, #121d2b 68%, #08111b 100%); } .world-minimap-preview { background-image: var(--minimap-image, none); background-repeat: no-repeat; background-position: center; background-size: cover; filter: saturate(1.02) contrast(1.01); } .world-minimap-preview::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 58%, rgba(0,28,45,.18) 100%); } .world-minimap-preview::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .world-minimap-player { left: var(--minimap-player-x, 50%); top: var(--minimap-player-y, 50%); width: 11px; height: 11px; border: 2px solid white; border-radius: 50%; background: linear-gradient(180deg,#29b8ff,#0b6dc3); box-shadow: 0 0 0 4px rgba(18,161,255,.18), 0 4px 10px rgba(2,76,140,.3); transform: translate(-50%, -50%); } .world-minimap .world-minimap-frame { pointer-events: none; } @media (max-width: 1040px) { .world-topbar { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .instance-chip { display: none; } } @media (max-width: 760px) { .world-topbar { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); grid-template-columns: minmax(0,1fr) auto; gap: 8px; } .world-location { justify-self: start; min-width: 0; max-width: calc(100vw - 122px); } .quest-widget { top: max(64px, calc(env(safe-area-inset-top) + 54px)); left: max(10px, env(safe-area-inset-left)); width: calc(100vw - 108px); padding: 10px 12px; border-radius: 17px; gap: 4px; } .quest-widget small { font-size: 7px; } .quest-widget b { font-size: 16px; } .quest-widget p { font-size: 10px; } .quest-widget-meta span { min-height: 24px; padding: 0 8px; font-size: 9px; } .world-minimap { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); width: 94px; height: 94px; } .world-minimap-frame { flex-basis: 94px; width: 94px; height: 94px; } } /* v2.6.16 custom Item Studio icons */ .custom-item-icon{display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.custom-item-icon img{display:block;width:100%;height:100%;object-fit:contain} /* v2.7 — returning-player home and one reusable Pokémon type language */ .home-screen[data-mode="returning"] .home-setup-card, .home-screen[data-mode="returning"] .home-showcase { display: none; } .home-screen[data-mode="setup"] .adventure-home { display: none; } .adventure-home { position: absolute; z-index: 2; inset: max(94px, calc(env(safe-area-inset-top) + 76px)) max(5vw, env(safe-area-inset-right)) max(42px, calc(env(safe-area-inset-bottom) + 24px)) max(5vw, env(safe-area-inset-left)); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: stretch; gap: 18px; max-width: 1380px; margin: auto; } .adventure-hero, .adventure-card { border: 1px solid rgba(255,255,255,.78); background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(241,249,253,.91)); box-shadow: 0 24px 70px rgba(0,27,49,.34); backdrop-filter: blur(18px) saturate(1.08); } .adventure-hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: clamp(26px, 4vw, 58px); overflow: hidden; border-radius: 34px; } .adventure-hero::after { content: ''; position: absolute; z-index: -1; right: -96px; top: -124px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle,rgba(61,183,244,.22),rgba(61,183,244,0) 68%); } .adventure-eyebrow { color: #087bd0; font-size: 10px; font-weight: 1000; letter-spacing: 1.55px; } .adventure-hero h1 { max-width: 760px; margin: 8px 0 10px; color: #123a59; font-size: clamp(34px, 4.3vw, 64px); line-height: .98; letter-spacing: -2px; } .adventure-hero h1 span { color: #0a86dc; } .adventure-hero > p { max-width: 680px; margin: 0; color: #56758b; font-size: clamp(12px, 1.2vw, 16px); line-height: 1.55; } .adventure-profile-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: clamp(20px, 3.2vh, 34px) 0 16px; } .adventure-profile-strip article { min-width: 0; padding: 13px 14px; border: 1px solid #d6e6ef; border-radius: 17px; background: rgba(255,255,255,.72); } .adventure-profile-strip small, .adventure-profile-strip b, .adventure-profile-strip span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adventure-profile-strip small { color: #7590a3; font-size: 7px; font-weight: 1000; letter-spacing: 1.15px; } .adventure-profile-strip b { margin: 4px 0 2px; color: #173d5b; font-size: 13px; } .adventure-profile-strip span { color: #7690a1; font-size: 8px; } .adventure-continue { max-width: 520px; min-height: 62px; font-size: 13px; } .adventure-sync-note { display: flex; align-items: center; gap: 7px; margin-top: 11px; color: #6d8798; font-size: 8px; } .adventure-sync-note i { width: 8px; height: 8px; border-radius: 50%; background: #57c33b; box-shadow: 0 0 0 4px rgba(87,195,59,.14); } .adventure-cards { display: grid; grid-template-rows: 1.22fr 1fr 1fr; gap: 12px; min-height: 0; } .adventure-card { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 20px; overflow: hidden; border-radius: 24px; } .adventure-card.is-featured { border-color: rgba(255,224,110,.84); background: linear-gradient(145deg,rgba(255,253,232,.97),rgba(255,244,191,.91)); } .adventure-card small { color: #1681c8; font-size: 8px; font-weight: 1000; letter-spacing: 1.25px; } .adventure-card.is-featured small { color: #b87d00; } .adventure-card b { margin-top: 5px; color: #153c5a; font-size: clamp(17px, 1.6vw, 23px); } .adventure-card p { margin: 7px 0 0; color: #627f92; font-size: 10px; line-height: 1.45; } .adventure-card > span { margin-top: 13px; color: #0a79ca; font-size: 8px; font-weight: 1000; letter-spacing: .8px; } .pokemon-type-list { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; } .pokemon-type-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 25px; padding: 2px 8px 2px 4px; border: 1px solid color-mix(in srgb,var(--type-color) 34%,white); border-radius: 999px; background: color-mix(in srgb,var(--type-color) 11%,white); color: color-mix(in srgb,var(--type-color) 75%,#18374e); vertical-align: middle; } .pokemon-type-badge .type-icon { width: 20px; height: 20px; margin: 0; object-fit: contain; } .pokemon-type-badge b { color: currentColor; font-size: 8px; font-weight: 950; white-space: nowrap; } .pokemon-type-badge.is-compact { min-height: 20px; padding: 1px 6px 1px 2px; } .pokemon-type-badge.is-compact .type-icon { width: 17px; height: 17px; } .pokemon-type-badge.is-compact b { font-size: 7px; } .pokemon-type-badge.is-icon-only { width: 22px; min-width: 22px; height: 22px; min-height: 22px; padding: 1px; justify-content: center; } .pokemon-type-row, .pokemon-meta-row, .pokemon-detail-types { display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px; } .pokemon-type-row > span:last-child, .pokemon-meta-row > span:last-child, .pokemon-detail-types > span:last-child { color: #617e93; } .pokemon-detail-types { margin: 6px 0 8px; color: #617e93; font-size: 9px; font-weight: 800; } .pokemon-type-empty { color: #7890a2; font-size: 8px; } .pokemon-portrait img { transform: scale(var(--profile-scale,1)); transform-origin: center bottom; transition: transform .16s ease; } @media (max-width: 900px) { .adventure-home { inset: max(66px, calc(env(safe-area-inset-top) + 55px)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; gap: 9px; } .adventure-hero { padding: clamp(18px, 5vw, 28px); border-radius: 25px; } .adventure-hero h1 { margin-top: 6px; font-size: clamp(30px, 9.5vw, 46px); } .adventure-profile-strip { grid-template-columns: 1fr 1fr; margin: 16px 0 12px; } .adventure-profile-strip article:last-child { display: none; } .adventure-continue { min-height: 56px; } .adventure-cards { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: none; gap: 7px; } .adventure-card { min-height: 92px; padding: 12px; border-radius: 18px; } .adventure-card p, .adventure-card > span { display: none; } .adventure-card b { font-size: 13px; } } @media (max-width: 430px), (max-height: 720px) { .adventure-profile-strip { margin: 12px 0 10px; } .adventure-profile-strip article { padding: 9px 10px; } .adventure-sync-note { display: none; } .adventure-cards { display: none; } .adventure-home { grid-template-rows: 1fr; } .adventure-hero > p { font-size: 11px; } } /* v2.7.1 — unified glass HUD, revision-safe minimap and adaptive game windows */ .game-screen { --hud-deep: rgba(5, 28, 41, .9); --hud-deeper: rgba(3, 21, 32, .95); --hud-line: rgba(208, 239, 255, .34); --hud-muted: rgba(218, 238, 248, .72); --hud-blue: #168ee8; --hud-radius: 18px; font-family: "Segoe UI Variable", Inter, system-ui, sans-serif; } .game-screen .world-shade { background: linear-gradient(90deg, rgba(1, 19, 29, .2), transparent 18%, transparent 82%, rgba(1, 19, 29, .14)); pointer-events: none; } .world-topbar { top: max(12px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); grid-template-columns: 230px minmax(240px, 1fr) 230px; align-items: start; } .player-chip, .world-location { border: 1px solid var(--hud-line); background: linear-gradient(145deg, rgba(4, 29, 42, .94), rgba(8, 45, 61, .86)); color: #fff; box-shadow: 0 14px 34px rgba(0, 19, 31, .3), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(18px) saturate(1.08); } .player-chip { min-width: 218px; min-height: 62px; padding: 7px 12px 7px 7px; border-radius: 19px; } .player-chip-avatar { width: 46px; height: 46px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .72); border-radius: 50%; background-color: #143f56; background-image: url('/assets/v1.4/trainers/trainer-male-walk-8dir-6f.png'); background-position: 0 0; background-size: 600% 800%; color: transparent; text-indent: -999px; box-shadow: 0 0 0 3px rgba(27, 155, 236, .22); } .player-chip-avatar[data-skin="female"] { background-image: url('/assets/v1.4/trainers/trainer-female-walk-8dir-6f.png'); } .player-chip b { color: #fff; font-size: 13px; } .player-chip small { color: var(--hud-muted); font-size: 9px; } .player-chip #connectionDot { box-shadow: 0 0 0 3px rgba(93, 230, 113, .12); } .world-location { justify-self: center; min-width: 262px; min-height: 50px; padding: 7px 15px; border-radius: 16px; } .world-location .location-pin { color: #7bdb57; } .world-location small { color: #8dd8ff; font-size: 7px; letter-spacing: 1px; } .world-location b { color: #fff; font-size: 13px; } .world-location > i { color: #b5d3e3; } .instance-chip { display: none !important; } .quest-widget { top: max(86px, calc(env(safe-area-inset-top) + 74px)); left: max(10px, env(safe-area-inset-left)); width: 300px; gap: 7px; padding: 15px 17px 17px; overflow: hidden; border: 1px solid var(--hud-line); border-radius: var(--hud-radius); background: linear-gradient(150deg, rgba(5, 31, 44, .94), rgba(6, 42, 57, .84)); box-shadow: 0 16px 36px rgba(0, 18, 29, .3), inset 0 1px 0 rgba(255, 255, 255, .06); } .quest-widget::before, .quest-widget::after { content: ''; position: absolute; left: 17px; bottom: 8px; height: 4px; border-radius: 2px; } .quest-widget::before { right: 17px; background: rgba(255, 255, 255, .12); } .quest-widget::after { width: var(--quest-progress, 0%); max-width: calc(100% - 34px); background: linear-gradient(90deg, #148fe8, #3bc0ff); box-shadow: 0 0 10px rgba(42, 174, 255, .35); } .quest-widget > small { color: #87d9ff; font-size: 8px; letter-spacing: 1.4px; } .quest-widget > b { font-size: 18px; line-height: 1.1; } .quest-widget > p { font-size: 10px; line-height: 1.4; } .quest-widget-meta { gap: 6px; margin-top: 1px; } .quest-widget-meta span { min-height: 24px; padding: 0 8px; border-color: rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .06); font-size: 8px; } .world-rail { top: 266px; bottom: max(14px, env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); display: flex; width: 132px; max-height: calc(100% - 280px); padding: 7px; gap: 2px; overflow: hidden auto; transform: none; border: 1px solid var(--hud-line); border-radius: var(--hud-radius); background: linear-gradient(160deg, rgba(5, 31, 44, .93), rgba(4, 39, 54, .84)); box-shadow: 0 18px 40px rgba(0, 18, 29, .28), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(18px) saturate(1.08); scrollbar-width: none; flex-direction: column; } .world-rail::-webkit-scrollbar { display: none; } .world-rail button { display: flex; flex: 0 0 auto; min-height: 36px; padding: 0 9px; gap: 9px; justify-content: flex-start; border-radius: 11px; color: #e8f7ff; } .world-rail button:hover, .world-rail button.is-active { transform: none; border-color: rgba(105, 199, 255, .28); background: rgba(24, 134, 201, .2); color: #fff; box-shadow: inset 3px 0 0 #24a9fa; } .world-rail button span { display: grid; place-items: center; width: 24px; height: 24px; color: #e8f7ff; } .world-rail button span .ui-icon { width: 19px; height: 19px; } .world-rail button b, .world-rail button:hover b, .world-rail button.is-active b { max-width: none; color: inherit; font-size: 8px; text-align: left; } .world-rail button[data-panel="chat"], .world-rail button[data-panel="home"] { margin-top: 2px; border-top: 1px solid rgba(255, 255, 255, .08); } .world-rail button > i { top: 7px; right: 7px; border-color: #0a3448; } .world-minimap { width: 196px; height: 196px; } .world-minimap-frame { flex-basis: 196px; width: 196px; height: 196px; border: 3px solid rgba(255, 255, 255, .92); background: radial-gradient(circle at 50% 45%, #31586c, #0d2635 70%, #06131c); box-shadow: inset 0 0 0 2px rgba(0, 28, 44, .32), 0 16px 38px rgba(0, 18, 29, .35); } .world-minimap-frame::after { border-radius: 50%; background: radial-gradient(circle, transparent 55%, rgba(0, 20, 31, .38) 100%); box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .04); } .world-minimap-preview { object-fit: cover; filter: saturate(1.06) contrast(1.03); transition: opacity .18s ease; } .world-minimap-preview.is-loading { opacity: .42; } .world-minimap-preview.is-empty { opacity: 0; } .world-minimap-grid { position: absolute; z-index: 3; inset: 15%; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; background: linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,.11) 50%, transparent 50.5%), linear-gradient(transparent 49.5%, rgba(255,255,255,.11) 50%, transparent 50.5%); } .world-minimap-north, .world-minimap-revision { position: absolute; z-index: 5; color: #fff; font-style: normal; font-weight: 1000; text-shadow: 0 2px 5px rgba(0,0,0,.65); } .world-minimap-north { top: 9px; font-size: 11px; } .world-minimap-revision { right: 18px; bottom: 13px; padding: 2px 5px; border-radius: 6px; background: rgba(2,25,37,.66); color: #a9dff9; font-size: 6px; letter-spacing: .6px; } .world-minimap-player { z-index: 6; width: 14px; height: 14px; border-width: 3px; box-shadow: 0 0 0 5px rgba(18, 161, 255, .2), 0 4px 12px rgba(2, 29, 45, .5); } .context-action { right: auto; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); grid-template-columns: 64px minmax(0, 1fr); min-width: 380px; min-height: 86px; padding: 10px 18px 10px 10px; transform: translate(-50%, 12px) scale(.97); border: 1px solid var(--hud-line); border-bottom: 1px solid var(--hud-line); border-radius: 23px; background: linear-gradient(145deg, rgba(4, 29, 42, .96), rgba(7, 45, 60, .92)); color: #fff; box-shadow: 0 18px 42px rgba(0, 18, 29, .38), inset 0 1px 0 rgba(255,255,255,.07); } .context-action.is-ready { transform: translateX(-50%); border-color: rgba(105, 199, 255, .48); animation: none; } .context-action > span { width: 64px; height: 64px; overflow: hidden; border: 1px solid rgba(132, 212, 255, .44); border-radius: 50%; background: radial-gradient(circle at 50% 38%, #214f67, #082838); color: #bde9ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 14px rgba(0, 15, 25, .3); } .context-action > span .ui-icon { width: 27px; height: 27px; } .context-pokemon-portrait { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; } .context-pokemon-portrait img { width: 78%; height: 78%; object-fit: contain; transform: scale(var(--profile-scale, 1)); transform-origin: center; } .context-action b { color: #fff; font-size: 14px; } .context-action small { max-width: 260px; color: var(--hud-muted); font-size: 9px; } .context-action small kbd { border-color: #4eabeb; border-bottom-color: #0872c1; background: linear-gradient(#299ff0,#0874ca); color: #fff; } .context-action.is-battle-action, .context-action.is-quest-target { border-color: rgba(88, 184, 246, .54); box-shadow: 0 18px 42px rgba(0,18,29,.38), 0 0 0 3px rgba(42, 164, 240, .12); } .context-action.is-battle-action > span, .context-action.is-quest-target > span { border-color: rgba(132, 212, 255, .55); background: radial-gradient(circle at 50% 38%, #245c76, #092a3a); } .hud-window, .side-panel, .editor-panel, .chat-panel, .battle-panel { border: 1px solid rgba(184, 218, 236, .9); border-radius: 24px; background: rgba(247, 252, 255, .975); box-shadow: 0 28px 74px rgba(0, 19, 31, .4); backdrop-filter: blur(22px) saturate(1.05); } .side-panel { top: 82px; right: 18px; bottom: 18px; padding: 25px; } .panel-eyebrow { color: #087fce; letter-spacing: 1.25px; } .game-screen button { font-family: inherit; } .mobile-dock { border: 1px solid var(--hud-line); background: linear-gradient(145deg, rgba(4, 29, 42, .96), rgba(7, 45, 60, .94)); box-shadow: 0 -10px 30px rgba(0, 18, 29, .3); } .mobile-dock button { color: #cce8f6; } .mobile-dock button.is-active { background: rgba(27, 146, 217, .22); color: #fff; } .mobile-dock span .ui-icon { color: currentColor; } @media (max-width: 1180px) and (min-width: 761px) { .world-minimap { width: 168px; height: 168px; } .world-minimap-frame { flex-basis: 168px; width: 168px; height: 168px; } .world-topbar { grid-template-columns: 220px 1fr 190px; } .world-rail { top: 260px; width: 122px; } } @media (max-width: 760px) { .game-screen .world-shade { background: linear-gradient(180deg, rgba(1,19,29,.18), transparent 22%, transparent 76%, rgba(1,19,29,.18)); } .world-topbar { top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: max(116px, calc(env(safe-area-inset-right) + 106px)); display: block; } .player-chip { width: min(174px, calc(100vw - 132px)); min-width: 0; min-height: 48px; padding: 5px 8px 5px 5px; border-radius: 15px; } .player-chip-avatar { width: 36px; height: 36px; } .player-chip b { max-width: 112px; font-size: 10px; } .player-chip small { font-size: 7px; } .world-location { position: absolute; top: 55px; left: 0; justify-content: flex-start; width: min(210px, calc(100vw - 132px)); min-width: 0; min-height: 39px; padding: 5px 9px; border-radius: 13px; } .world-location b { max-width: 150px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .world-location small { font-size: 5px; } .world-minimap { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 102px; height: 102px; } .world-minimap-frame { flex-basis: 102px; width: 102px; height: 102px; border-width: 2px; } .world-minimap-north { top: 5px; font-size: 8px; } .world-minimap-revision { right: 8px; bottom: 7px; font-size: 5px; } .world-minimap-player { width: 11px; height: 11px; border-width: 2px; } .quest-widget { top: max(112px, calc(env(safe-area-inset-top) + 104px)); left: max(8px, env(safe-area-inset-left)); width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)); padding: 10px 12px 14px; gap: 3px; border-radius: 15px; } .quest-widget::before, .quest-widget::after { left: 12px; bottom: 7px; } .quest-widget::before { right: 12px; } .quest-widget > small { font-size: 6px; } .quest-widget > b { font-size: 13px; } .quest-widget > p { max-width: calc(100% - 2px); overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .quest-widget-meta { position: absolute; top: 9px; right: 10px; } .quest-widget-meta span { min-height: 18px; padding: 0 6px; font-size: 6px; } #questWidgetReward { display: none; } .world-rail { display: none; } .context-action { left: 50%; right: auto; bottom: calc(78px + env(safe-area-inset-bottom)); grid-template-columns: 48px minmax(0,1fr); width: min(250px, calc(100vw - 32px)); min-width: 0; min-height: 62px; padding: 6px 11px 6px 6px; border-radius: 18px; } .context-action > span { width: 48px; height: 48px; } .context-action b { font-size: 10px; } .context-action small { max-width: 170px; font-size: 7px; } .mobile-dock { left: max(6px, env(safe-area-inset-left)); right: max(6px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); grid-template-columns: repeat(7, minmax(0,1fr)); height: 64px; padding: 5px; border-radius: 20px; } .mobile-dock button { min-width: 0; gap: 1px; border-radius: 13px; } .mobile-dock span { width: auto; height: auto; } .mobile-dock span .ui-icon { width: 18px; height: 18px; } .mobile-dock b { max-width: 100%; overflow: hidden; font-size: 5px; text-overflow: ellipsis; } .side-panel, .editor-panel, .chat-panel, .battle-panel { inset: auto max(6px, env(safe-area-inset-right)) calc(76px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); width: auto; max-height: calc(100% - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 16px 14px; border-radius: 21px; } } @media (max-width:800px) and (max-height:610px) { .quest-widget { top: max(101px, calc(env(safe-area-inset-top) + 94px)); padding-top: 8px; } .quest-widget > p, .quest-widget-meta { display: none; } .world-location { top: 50px; } .world-minimap, .world-minimap-frame { width: 88px; height: 88px; } .world-minimap-frame { flex-basis: 88px; } .world-topbar { right: 104px; } .mobile-dock { height: 56px; } .context-action { bottom: calc(67px + env(safe-area-inset-bottom)); min-height: 54px; } .context-action > span { width: 42px; height: 42px; } .side-panel, .editor-panel, .chat-panel, .battle-panel { bottom: calc(67px + env(safe-area-inset-bottom)); max-height: calc(100% - 76px); } } /* v2.7.2 — two complete in-game themes */ html[data-game-theme="dark"] #app { --theme-surface: rgba(6, 29, 42, .97); --theme-surface-soft: rgba(12, 43, 58, .92); --theme-card: rgba(15, 50, 66, .9); --theme-card-hover: rgba(22, 67, 86, .94); --theme-border: rgba(151, 207, 235, .26); --theme-text: #eef9ff; --theme-muted: #9cbacb; --theme-accent: #38adf3; --theme-input: rgba(4, 24, 35, .78); } html[data-game-theme="light"] #app { --theme-surface: rgba(249, 253, 255, .98); --theme-surface-soft: rgba(240, 248, 252, .96); --theme-card: rgba(255, 255, 255, .96); --theme-card-hover: #eef8fd; --theme-border: #cadde8; --theme-text: #153b56; --theme-muted: #668397; --theme-accent: #087fd2; --theme-input: #f7fbfd; } .theme-settings { display: grid; gap: 10px; margin: 12px 0; padding: 12px; border: 1px solid var(--theme-border); border-radius: 17px; background: var(--theme-surface-soft); } .theme-settings > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .theme-settings > header b, .theme-settings > header small { display: block; } .theme-settings > header b { color: var(--theme-text); font-size: 10px; } .theme-settings > header small { color: var(--theme-muted); font-size: 7px; text-align: right; } .theme-settings > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .theme-option { position: relative; display: grid !important; grid-template-columns: 54px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 9px; min-width: 0; padding: 8px !important; border: 1px solid var(--theme-border) !important; border-radius: 14px !important; background: var(--theme-card) !important; cursor: pointer; } .theme-option input { position: absolute; width: 1px; height: 1px; opacity: 0; } .theme-option > i { grid-row: 1 / 3; position: relative; display: block; width: 54px; height: 38px; overflow: hidden; border: 2px solid rgba(121,169,195,.4); border-radius: 10px; background: #f8fcff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .theme-option.is-dark > i { background: #082636; } .theme-option > i span { position: absolute; left: 5px; top: 5px; bottom: 5px; width: 12px; border-radius: 4px; background: #168fd4; } .theme-option > i em { position: absolute; left: 21px; right: 5px; top: 6px; height: 7px; border-radius: 4px; background: currentColor; color: #9fc6d8; box-shadow: 0 11px 0 color-mix(in srgb,currentColor 55%,transparent); } .theme-option.is-dark > i em { color: #80bdd8; } .theme-option > b { align-self: end; color: var(--theme-text); font-size: 9px; } .theme-option > small { align-self: start; color: var(--theme-muted); font-size: 6px; } .theme-option:has(input:checked) { border-color: var(--theme-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--theme-accent) 16%,transparent); } .theme-option:has(input:checked)::after { content: '✓'; position: absolute; top: 5px; right: 6px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--theme-accent); color: white; font-size: 9px; font-weight: 1000; } html[data-game-theme] .game-screen :is(.side-panel,.editor-panel,.chat-panel,.battle-panel,.starter-card,.dialogue-card,.controls-tutorial-card,.professor-transfer-card-shell) { border-color: var(--theme-border) !important; background: var(--theme-surface) !important; color: var(--theme-text) !important; } html[data-game-theme] #app[data-screen="game"] .professor-transfer-card-shell { border-color: var(--theme-border) !important; background: var(--theme-surface) !important; color: var(--theme-text) !important; } html[data-game-theme] #app[data-screen="game"] .professor-transfer-card-shell :is(h2,b) { color: var(--theme-text) !important; } html[data-game-theme] #app[data-screen="game"] .professor-transfer-card-shell :is(p,small) { color: var(--theme-muted) !important; } html[data-game-theme] #app[data-screen="game"] .professor-transfer-card-shell header small { color: var(--theme-accent) !important; } html[data-game-theme] #app[data-screen="game"] .professor-transfer-card { border-color: var(--theme-border) !important; background: var(--theme-card) !important; } html[data-game-theme] #app[data-screen="game"] .professor-transfer-card-shell :is(header button,footer .secondary) { border-color: var(--theme-border) !important; background: var(--theme-surface-soft) !important; color: var(--theme-text) !important; } html[data-game-theme] .game-screen :is(.panel-title,.editor-head b,.chat-head b,.battle-status b,.starter-card h2,.dialogue-copy h2,.professor-transfer-card-shell h2) { color: var(--theme-text) !important; } html[data-game-theme] .game-screen :is(.panel-lead,.editor-panel > p,.starter-card > p,.starter-card > small,.dialogue-copy p,.dialogue-hint,.professor-transfer-card-shell > p,.settings-footnote) { color: var(--theme-muted) !important; } html[data-game-theme] .game-screen :is(.panel-eyebrow,.editor-head small,.chat-head small,.battle-status small,.dialogue-copy header small,.professor-transfer-card-shell header small) { color: var(--theme-accent) !important; } html[data-game-theme] .game-screen :is(input:not([type="range"]),textarea,select) { border-color: var(--theme-border) !important; background: var(--theme-input) !important; color: var(--theme-text) !important; } html[data-game-theme] .game-screen ::placeholder { color: color-mix(in srgb,var(--theme-muted) 72%,transparent); } html[data-game-theme] .game-screen :is(.audio-settings,.binding-row,.battle-setting,.chat-config,.battle-health article,.pokemon-detail-hero,.pokemon-trait-grid article,.pokemon-detail-section,.pokemon-move-card,.pokemon-effective-stats article,.oak-board-summary article,.oak-program-card,.inventory-card,.region-card,.team-card,.center-card,.quest-card,.discovery-list article,.professor-transfer-card,.bag-empty) { border-color: var(--theme-border) !important; background: var(--theme-card) !important; color: var(--theme-text) !important; } html[data-game-theme] .game-screen :is(.audio-settings,.binding-row,.battle-setting,.chat-config,.pokemon-detail-hero,.pokemon-detail-section,.oak-program-card,.professor-transfer-card) :is(b,strong,h2,h3) { color: var(--theme-text) !important; } html[data-game-theme] .game-screen :is(.audio-settings,.binding-row,.battle-setting,.chat-config,.pokemon-detail-hero,.pokemon-detail-section,.oak-program-card,.professor-transfer-card) :is(small,p,span,em) { color: var(--theme-muted); } html[data-game-theme] .game-screen :is(.settings-reset,.binding-row button,.chat-head-actions button,.chat-config > button,.panel-close,.professor-transfer-card-shell header button,.dialogue-actions #dialogueClose) { border-color: var(--theme-border) !important; background: var(--theme-surface-soft) !important; color: var(--theme-text) !important; } html[data-game-theme] .game-screen :is(.bag-tabs button,.chat-tabs button,.editor-modes button) { border-color: var(--theme-border); background: var(--theme-card); color: var(--theme-muted); } html[data-game-theme] .game-screen :is(.bag-tabs button,.chat-tabs button,.editor-modes button).is-active { border-color: var(--theme-accent); background: color-mix(in srgb,var(--theme-accent) 17%,var(--theme-card)); color: var(--theme-text); } html[data-game-theme="dark"] .game-screen .chat-panel { background: rgba(6,29,42,var(--chat-opacity)) !important; } html[data-game-theme="light"] .game-screen .chat-panel { background: rgba(249,253,255,var(--chat-opacity)) !important; } html[data-game-theme] .game-screen :is(.chat-message p,.chat-message time,.battle-health small,#battleHint) { color: var(--theme-muted) !important; } html[data-game-theme] .game-screen #chatForm { border-color: var(--theme-border); background: var(--theme-input); } html[data-game-theme] .game-screen #chatForm input { background: transparent !important; } html[data-game-theme="dark"] .game-screen .battle-decision { border-color: rgba(255,205,78,.38); background: rgba(92,68,14,.52); color: #fff5d0; } html[data-game-theme] .game-screen .capture-panel { border-color: var(--theme-border); background: color-mix(in srgb,var(--theme-accent) 10%,var(--theme-surface-soft)); } html[data-game-theme] .game-screen :is(.guidance-pill,.progress-pulse,.loot-feed,.quick-hint) { border-color: var(--theme-border) !important; background: var(--theme-surface) !important; color: var(--theme-text) !important; } html[data-game-theme] .game-screen :is(.guidance-pill,.progress-pulse,.loot-feed) b { color: var(--theme-text) !important; } html[data-game-theme] .game-screen :is(.guidance-pill,.progress-pulse,.loot-feed) small { color: var(--theme-muted) !important; } html[data-game-theme="light"] .game-screen :is(.player-chip,.world-location,.instance-chip,.quest-widget,.world-rail,.context-action,.mobile-dock) { border-color: rgba(190,215,229,.94); background: rgba(250,253,255,.94); color: #153b56; box-shadow: 0 14px 34px rgba(0,31,50,.2), inset 0 1px 0 #fff; } html[data-game-theme="light"] .game-screen :is(.player-chip,.world-location,.instance-chip,.quest-widget,.context-action) :is(b,small,p) { color: #153b56; } html[data-game-theme="light"] .game-screen .quest-widget > small, html[data-game-theme="light"] .game-screen .world-location small { color: #087fcf; } html[data-game-theme="light"] .game-screen .quest-widget-meta span { border-color: #d2e3ec; background: #edf6fa; color: #315d77; } html[data-game-theme="light"] .game-screen .world-rail button { color: #315d77; } html[data-game-theme="light"] .game-screen .world-rail button:hover, html[data-game-theme="light"] .game-screen .world-rail button.is-active { border-color: #b9def2; background: #e8f6fd; color: #087dcc; } html[data-game-theme="light"] .game-screen .context-action > span { border-color: #a9d4ea; background: radial-gradient(circle at 50% 38%,#fafdff,#d9edf7); color: #087dcc; } html[data-game-theme="light"] .game-screen .context-action small { color: #607e91; } html[data-game-theme="light"] .game-screen .mobile-dock button { color: #426a82; } html[data-game-theme="light"] .game-screen .mobile-dock button.is-active { background: #e4f4fb; color: #087dcc; } html[data-game-theme] #app[data-screen="game"] .toast { border-color: var(--theme-border); background: var(--theme-surface); color: var(--theme-text); } html[data-game-theme="dark"] #app[data-screen="game"] .loading-screen { background: radial-gradient(circle at 50% 44%,#164e67,#061d2a 72%); color: var(--theme-text); } html[data-game-theme="light"] #app[data-screen="game"] .loading-screen { background: radial-gradient(circle at 50% 44%,#ffffff,#d8eef8 72%); color: var(--theme-text); } html[data-game-theme="light"] #app[data-screen="game"] .loading-screen small { color: var(--theme-muted); } /* v2.9.11: the world bootstrap must end in the game or in an actionable error. */ .loading-screen.is-error { background: radial-gradient(circle at 50% 42%,#173f61,#071b2d 72%); } .loading-screen.is-error .loading-orbit { width: 58px; height: 58px; border-color: rgba(255,255,255,.16); border-top-color: #ffcf4a; animation: none; } .loading-screen.is-error .loading-orbit i { inset: 15px; background: #ffcf4a; box-shadow: 0 0 0 7px rgba(255,207,74,.1); } .loading-screen.is-error > b { max-width: min(520px,calc(100vw - 36px)); font-size: clamp(20px,3.4vw,28px); text-align: center; } .loading-screen.is-error > small { max-width: min(560px,calc(100vw - 40px)); font-size: 12px; line-height: 1.5; text-align: center; } .loading-recovery { width: min(520px,calc(100vw - 32px)); margin-top: 17px; padding: 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(4,24,39,.48); text-align: center; } .loading-recovery[hidden] { display: none !important; } .loading-recovery p { min-height: 18px; margin: 0 0 11px; color: #b8d1df; font-size: 11px; line-height: 1.45; } .loading-recovery nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .loading-recovery button { min-height: 43px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.08); color: white; font: 800 11px/1 inherit; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; } .loading-recovery button:first-child { border-color: #29a9ec; background: linear-gradient(180deg,#2eb6f5,#118bd3); } .loading-recovery button:focus-visible { outline: 3px solid rgba(255,207,74,.42); outline-offset: 2px; } @media(max-width:520px) { .loading-recovery nav { grid-template-columns: 1fr; } } @media (max-width: 540px) { .theme-settings > header { display: grid; } .theme-settings > header small { text-align: left; } .theme-option { grid-template-columns: 44px minmax(0,1fr); } .theme-option > i { width: 44px; } } /* v2.7.3 — role-aware world labels and action language; home/auth stay untouched */ .game-screen .player-chip { border-color: color-mix(in srgb,var(--role-color,#39aef4) 42%,var(--theme-border)); } .game-screen .player-chip-avatar { box-shadow: 0 0 0 2px color-mix(in srgb,var(--role-color,#39aef4) 45%,transparent); } .game-screen .player-chip-copy { display:grid; } .game-screen .player-community-role { display:flex; align-items:center; gap:4px; width:max-content; max-width:145px; margin-top:2px; padding:2px 6px; border-radius:7px; background:color-mix(in srgb,var(--role-color) 14%,transparent); color:var(--role-color) !important; font-size:6px !important; font-weight:1000; letter-spacing:.04em; text-transform:uppercase; } .game-screen .player-community-role[hidden] { display:none; } .game-screen .player-community-role svg { width:10px; height:10px; flex:0 0 auto; } .game-screen .player-community-role .player-community-role-raster { width:12px; height:12px; flex:0 0 auto; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(5,35,54,.24)); } .game-screen .player-community-role span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .game-screen .player-connection { margin-top:2px; } .game-screen .context-action { display:grid; grid-template-columns:60px minmax(132px,1fr) auto; grid-template-rows:1fr; align-items:center; width:min(492px,calc(100vw - 34px)); min-width:0; min-height:82px; padding:8px 9px; border:1px solid rgba(123,191,226,.24); border-radius:24px; background:linear-gradient(160deg,rgba(7,39,53,.96),rgba(6,28,39,.92)); color:#f4fbff; box-shadow:0 18px 44px rgba(0,18,29,.38),inset 0 1px 0 rgba(255,255,255,.06); } .game-screen .context-action.is-ready { border-color:rgba(99,198,255,.44); box-shadow:0 18px 44px rgba(0,18,29,.38),0 0 0 1px rgba(88,173,233,.1),inset 0 1px 0 rgba(255,255,255,.06); } .game-screen .context-action > .context-action-visual { grid-column:1; grid-row:1; display:grid; place-items:center; width:60px; height:60px; overflow:hidden; border:1px solid rgba(212,174,72,.75); background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,247,250,.95)); color:#d9a23a; box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 3px 9px rgba(0,0,0,.12); } .game-screen .context-action > .context-action-visual .ui-icon { width:25px; height:25px; } .game-screen .context-pokemon-emoji { display:grid; place-items:center; } .game-screen .context-pokemon-emoji img { width:76%; height:76%; filter:drop-shadow(0 2px 2px rgba(0,0,0,.08)); } .game-screen .context-pokemon-emoji.is-placeholder, .game-screen .context-pokemon-emoji.is-fallback { font-size:28px; } .game-screen .context-action > .context-action-copy { grid-column:2; grid-row:1; display:grid; align-content:center; gap:3px; width:auto; height:auto; min-width:0; border:0; border-radius:0; background:none; box-shadow:none; color:inherit; text-align:left; } .game-screen .context-action-copy b { overflow:hidden; color:#f7fbff; font-size:14px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; } .game-screen .context-action-copy small { overflow:hidden; max-width:none; color:rgba(214,232,242,.82); font-size:9px; text-overflow:ellipsis; white-space:nowrap; } .game-screen .context-action > .context-action-cta { grid-column:3; grid-row:1; display:flex; justify-content:center; gap:8px; width:auto; min-width:122px; height:48px; padding:0 15px; border:1px solid rgba(125,199,255,.65); border-bottom:2px solid rgba(28,118,187,.85); background:linear-gradient(180deg,rgba(95,177,240,.35),rgba(17,109,181,.72)); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px rgba(5,103,178,.18); } .game-screen .context-action.is-ready > .context-action-cta { animation:contextActionCtaPulse 1.35s ease-in-out infinite; } @keyframes contextActionCtaPulse { 0%,100% { transform:translateY(0); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px rgba(5,103,178,.18); } 50% { transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 11px 24px rgba(42,150,230,.3); } } .game-screen .context-action-cta kbd { min-width:28px; height:28px; padding:0 7px; border:1px solid rgba(255,255,255,.76); border-bottom:2px solid rgba(3,80,143,.72); border-radius:9px; background:rgba(255,255,255,.96); color:#0a72c5; font:1000 11px/1 system-ui; } .game-screen .context-action-cta i svg { width:16px; height:16px; } .game-screen .context-action.is-battle-action > .context-action-visual { border-color:rgba(212,174,72,.75); color:#d8a544; } .game-screen .context-action.is-quest-target > .context-action-visual { border-color:#7bcbff; color:#319bec; } html[data-game-theme="light"] .game-screen .context-action { background:linear-gradient(160deg,rgba(10,51,69,.93),rgba(7,38,51,.9)); box-shadow:0 18px 42px rgba(23,78,107,.22),inset 0 1px 0 rgba(255,255,255,.08); } html[data-game-theme="light"] .game-screen .context-action > .context-action-visual { background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(242,247,251,.95)); } html[data-game-theme] .game-screen :is(.side-panel,.editor-panel,.chat-panel,.battle-panel) :is(button:not(.primary-cta),.inventory-card,.team-card,.quest-card,.region-card,.center-card,.pokemon-move-card) { transition:border-color .16s,background .16s,color .16s,transform .16s; } html[data-game-theme="dark"] .game-screen :is(.side-panel,.editor-panel,.chat-panel,.battle-panel) :is(hr,.panel-divider) { border-color:var(--theme-border); } html[data-game-theme="light"] .game-screen .dialogue-shade { background:rgba(20,55,76,.36); } html[data-game-theme="dark"] .game-screen .dialogue-shade { background:rgba(1,14,22,.66); } @media (max-width:760px) { .game-screen .context-action { bottom:calc(76px + env(safe-area-inset-bottom)); grid-template-columns:48px minmax(78px,1fr) auto; gap:8px; width:min(372px,calc(100vw - 18px)); min-height:62px; padding:6px; border-radius:18px; } .game-screen .context-action > .context-action-visual { width:48px; height:48px; } .game-screen .context-action-copy b { font-size:10px; } .game-screen .context-action-copy small { font-size:6px; } .game-screen .context-action > .context-action-cta { min-width:84px; height:42px; gap:5px; padding:0 8px; border-radius:12px; } .game-screen .context-action-cta i { display:none; } .game-screen .context-action-cta b { font-size:8px; } .game-screen .context-action-cta kbd { min-width:24px; height:24px; font-size:9px; } } /* v2.9.53 · world entry is an asset gate, not a green-canvas timeout. */ #app .loading-screen { display:grid; place-items:center; padding:max(22px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); background:#153e37; color:#fff; } #app .loading-scene { z-index:-2; inset:-3%; background-image:linear-gradient(180deg,rgba(6,28,35,.08) 18%,rgba(5,30,27,.54) 82%,rgba(4,23,23,.82)),url('/assets/v2.9.53/loading/world-entry-valley-v1.webp'); transform:scale(1.03); animation:loading-scene-breathe 12s ease-in-out infinite alternate; } #app .loading-screen::after { inset:0; background:radial-gradient(circle at 50% 45%,transparent 15%,rgba(3,23,24,.18) 68%,rgba(3,19,22,.52)); } #app .loading-card { width:min(460px,calc(100vw - 36px)); padding:30px 32px 25px; border:1px solid rgba(255,255,255,.5); border-radius:30px; background:linear-gradient(145deg,rgba(13,46,52,.78),rgba(7,31,35,.7)); box-shadow:0 24px 80px rgba(0,17,21,.35),inset 0 1px rgba(255,255,255,.18); backdrop-filter:blur(18px) saturate(1.15); } #app .loading-compass { width:68px; height:68px; margin-bottom:14px; border:3px solid rgba(255,255,255,.34); border-top-color:#fff; box-shadow:0 0 0 8px rgba(255,255,255,.08); animation:spin 1.35s linear infinite; } #app .loading-compass i { inset:13px; border:1px solid rgba(255,255,255,.48); } #app .loading-compass span { left:50%; top:10px; width:12px; height:26px; border-radius:10px 10px 4px 4px; background:linear-gradient(#ffd963 50%,#eefcff 50%); clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%); transform:translateX(-50%); } #app .loading-kicker { margin:0 0 8px; color:#aee7d0; font-size:10px; font-weight:950; letter-spacing:.16em; } #app .loading-card > b { font-size:clamp(24px,4vw,34px); line-height:1.1; } #app .loading-card > #loadingSubtitle { max-width:390px; margin:9px 0 20px; color:#e6f7f3; font-size:13px; line-height:1.45; } #app .loading-progress { width:100%; height:8px; border:1px solid rgba(255,255,255,.22); background:rgba(0,17,20,.38); } #app .loading-progress i { background:linear-gradient(90deg,#5ee0a3,#ffe064); box-shadow:0 0 18px rgba(94,224,163,.55); transition:width .35s ease; } #app .loading-meta { width:100%; margin-top:9px; color:#dff6ef; font-size:10px; font-weight:850; } #app .loading-meta time { color:#a9c9c4; } #app .loading-tip { min-height:32px; margin:15px 0 0; color:#c9e2de; font-size:11px; line-height:1.45; } #app .loading-recovery { width:100%; margin-top:16px; } #app .loading-screen.is-error .loading-compass { border-color:rgba(255,255,255,.24); border-top-color:#ffd460; } #app .loading-screen.is-error .loading-progress i { background:linear-gradient(90deg,#ffb953,#ffdc6c); } #app .loading-screen.is-channel-switch { background:rgba(4,23,33,.58); } #app .loading-screen.is-channel-switch .loading-scene { opacity:.35; filter:blur(5px); } @keyframes loading-scene-breathe { to { transform:scale(1.075) translate3d(-.5%,.25%,0); } } @media (max-width:600px) { #app .loading-screen { align-items:end; } #app .loading-scene { background-position:58% center; } #app .loading-card { width:min(100%,420px); padding:24px 21px calc(22px + env(safe-area-inset-bottom)); border-radius:26px; } #app .loading-compass { width:58px; height:58px; } #app .loading-card > b { font-size:26px; } } @media (prefers-reduced-motion:reduce) { #app .loading-scene,#app .loading-compass { animation:none; } } @media (min-width:761px) {.controls-tutorial[data-controls-polish="v36-2"] {width:min(620px,calc(100vw - 32px));}.controls-tutorial[data-controls-polish="v36-2"] .controls-tutorial-extra {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px;}.controls-tutorial[data-controls-polish="v36-2"] .controls-tutorial-extra > span {min-width:0;min-height:50px;padding:7px 9px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;overflow:hidden;border:1px solid #d6e5ed;border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(240,247,250,.94));color:#567589;font-size:9px;font-weight:850;line-height:1.18;}.controls-tutorial[data-controls-polish="v36-2"] .controls-tutorial-extra :is(kbd,b) {min-width:48px;width:auto;height:34px;padding:0 9px;box-sizing:border-box;white-space:nowrap;}.controls-tutorial[data-controls-polish="v36-2"] .controls-tutorial-extra [data-tutorial-key="sprint"] {min-width:82px;}} @media (max-width:420px) { .game-screen .context-action { grid-template-columns:44px minmax(68px,1fr) auto; width:calc(100vw - 12px); gap:6px; } .game-screen .context-action > .context-action-visual { width:44px; height:44px; } .game-screen .context-action > .context-action-cta { min-width:73px; padding:0 6px; } .game-screen .context-action-cta b { max-width:47px; overflow:hidden; text-overflow:ellipsis; } } /* v2.7.4 — compact world UI: one-line labels, SVG actions and no duplicate objective */ .game-screen .guidance-pill { display:none !important; } .game-screen .player-chip { min-width:198px; min-height:54px; padding:5px 10px 5px 5px; border-color:var(--theme-border); border-radius:16px; } .game-screen .player-chip-avatar { width:40px; height:40px; border-width:1px; } .game-screen .player-chip-copy { grid-template-columns:minmax(0,auto) minmax(0,1fr); grid-template-rows:auto auto; column-gap:6px; row-gap:2px; } .game-screen #worldPlayerName { grid-column:1 / -1; overflow:hidden; max-width:148px; font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .game-screen .player-community-role { align-self:center; max-width:82px; margin:0; padding:1px 4px; border-radius:5px; font-size:5px !important; letter-spacing:.02em; } .game-screen .player-community-role svg { width:8px; height:8px; } .game-screen .player-connection { align-self:center; margin:0; overflow:hidden; font-size:6px !important; text-overflow:ellipsis; } .game-screen .world-location { min-width:236px; min-height:46px; padding:6px 12px; border-radius:14px; } .game-screen .world-location .location-pin { width:28px; height:28px; border-radius:9px; } .game-screen .world-location .location-pin .ui-icon { width:16px; height:16px; } .game-screen .world-location small { font-size:6px; } .game-screen .world-location b { font-size:11px; } .game-screen .quest-widget { top:max(76px,calc(env(safe-area-inset-top) + 65px)); width:264px; gap:4px; padding:12px 14px 15px; border-radius:15px; } .game-screen .quest-widget > small { font-size:6px; letter-spacing:1.1px; } .game-screen .quest-widget > b { font-size:14px; line-height:1.15; } .game-screen .quest-widget > p { display:-webkit-box; overflow:hidden; font-size:8px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .game-screen .quest-widget-meta span { min-height:19px; padding:0 6px; font-size:6px; } .game-screen .quest-widget::before, .game-screen .quest-widget::after { left:14px; bottom:6px; height:3px; } .game-screen .quest-widget::before { right:14px; } .game-screen .world-rail { top:218px; bottom:max(12px,env(safe-area-inset-bottom)); width:116px; max-height:calc(100% - 230px); padding:6px; border-radius:15px; } .game-screen .world-rail button { min-height:33px; padding:0 8px; gap:7px; border-radius:9px; } .game-screen .world-rail button span { width:21px; height:21px; } .game-screen .world-rail button span .ui-icon { width:17px; height:17px; } .game-screen .world-rail button b, .game-screen .world-rail button:hover b, .game-screen .world-rail button.is-active b { font-size:7px; } .game-screen .round-quick { border-width:1px; border-radius:13px; } .game-screen .round-quick .ui-icon { width:20px; height:20px; } .game-screen .context-action { grid-template-columns:48px minmax(112px,1fr) auto; gap:9px; width:min(402px,calc(100vw - 28px)); min-height:66px; padding:7px; border-radius:17px; box-shadow:0 14px 34px rgba(0,18,29,.3),inset 0 1px 0 rgba(255,255,255,.07); } .game-screen .context-action > .context-action-visual { width:48px; height:48px; border-width:1px; } .game-screen .context-action > .context-action-visual .ui-icon { width:21px; height:21px; } .game-screen .context-action-copy { gap:3px; } .game-screen .context-action-copy b { font-size:11px; } .game-screen .context-action-copy small { font-size:7px; } .game-screen .context-action > .context-action-cta { min-width:102px; height:42px; padding:0 10px; border-radius:12px; } .game-screen .context-action-cta kbd { min-width:25px; height:25px; font-size:10px; } .game-screen .context-action-cta b { font-size:8px; } .game-screen :is(.panel-close,.chat-head-actions button,.editor-head button,.dialogue-actions button) .ui-icon { width:16px; height:16px; } .game-screen :is(.quest-prologue,.quest-card) > i .ui-icon { width:22px; height:22px; } .game-screen .discovery-score .panel-ui-icon { width:30px; height:30px; } .game-screen button:focus-visible { outline:2px solid color-mix(in srgb,var(--theme-accent) 78%,white); outline-offset:2px; } @media (max-width:760px) { .game-screen .player-chip { width:min(164px,calc(100vw - 126px)); min-height:43px; padding:4px 7px 4px 4px; border-radius:13px; } .game-screen .player-chip-avatar { width:33px; height:33px; } .game-screen #worldPlayerName { max-width:116px; font-size:9px; } .game-screen .player-community-role { max-width:65px; font-size:4.5px !important; } .game-screen .player-connection { font-size:5px !important; } .game-screen .world-location { top:49px; width:min(194px,calc(100vw - 126px)); min-height:36px; padding:4px 7px; } .game-screen .world-location .location-pin { width:25px; height:25px; } .game-screen .quest-widget { top:max(100px,calc(env(safe-area-inset-top) + 92px)); padding:8px 10px 11px; } .game-screen .quest-widget > b { font-size:11px; } .game-screen .quest-widget > p { font-size:7px; -webkit-line-clamp:1; } .game-screen .context-action { bottom:calc(69px + env(safe-area-inset-bottom)); grid-template-columns:42px minmax(70px,1fr) auto; width:min(334px,calc(100vw - 14px)); min-height:54px; gap:6px; padding:5px; border-radius:15px; } .game-screen .context-action > .context-action-visual { width:42px; height:42px; } .game-screen .context-action-copy b { font-size:9px; } .game-screen .context-action-copy small { font-size:6px; } .game-screen .context-action > .context-action-cta { min-width:84px; height:36px; padding:0 7px; } .game-screen .context-action-cta kbd { min-width:22px; height:22px; font-size:8px; } .game-screen .context-action-cta b { max-width:42px; font-size:7px; } .game-screen .mobile-dock { height:58px; border-radius:17px; } .game-screen .mobile-dock span .ui-icon { width:17px; height:17px; } } /* v2.7.7 — compact world labels, refreshed context CTA and Pokémon emoji hooks */ .game-screen .quest-widget { right:max(14px,env(safe-area-inset-right)); top:max(218px,calc(env(safe-area-inset-top) + 218px)); width:196px; background:linear-gradient(150deg,rgba(5,31,44,.91),rgba(6,42,57,.79)); } .game-screen .quest-widget > #questWidgetState { color:#67d58c; } .game-screen .quest-widget.is-ready > #questWidgetState { color:#ffd34d; } .game-screen .quest-widget.is-free > #questWidgetState { color:#9aaeb9; } .game-screen .quest-widget:not(.is-free):not(.is-ready)::after { animation:questProgressPulse 1.8s ease-in-out infinite; } @keyframes questProgressPulse { 50% { filter:brightness(1.28); } } .game-screen .world-rail { width:138px; } .game-screen .world-rail button { min-height:40px; } .game-screen .world-rail button span { width:25px; height:25px; } .game-screen .world-rail button span .ui-icon { width:20px; height:20px; } .game-screen .world-rail button b, .game-screen .world-rail button:hover b, .game-screen .world-rail button.is-active b { font-size:9px; font-weight:650; } html[data-game-theme="dark"] .game-screen .world-rail { background:linear-gradient(160deg,rgba(5,31,44,.93),rgba(4,39,54,.84)); } html[data-game-theme="dark"] .game-screen .world-rail button span .ui-icon { color:#87d9ff; } html[data-game-theme="light"] .game-screen .world-rail { background:rgba(248,252,255,.94); } html[data-game-theme="light"] .game-screen .world-rail button span .ui-icon { color:#1388d2; } .game-screen .context-action { width:min(438px,calc(100vw - 28px)); min-height:78px; } .game-screen .context-action > .context-action-visual .ui-icon { width:27px; height:27px; } @media (max-width:1180px) and (min-width:761px) { .game-screen .quest-widget { right:max(14px,env(safe-area-inset-right)); top:max(190px,calc(env(safe-area-inset-top) + 190px)); width:168px; } } @media (max-width:760px) { .game-screen .quest-widget { left:auto; right:max(8px,env(safe-area-inset-right)); top:max(116px,calc(env(safe-area-inset-top) + 108px)); width:102px; padding:8px 8px 11px; } .game-screen .quest-widget > b { font-size:10px; } .game-screen .quest-widget > p { display:none; } .game-screen .quest-widget-meta { position:static; } .game-screen .quest-widget-meta span { max-width:86px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .game-screen .context-action { width:min(358px,calc(100vw - 14px)); min-height:64px; } } /* v2.7.9 — refined context action CTA for battle, talk and utility interactions */ .game-screen .context-action { --context-surface: linear-gradient(160deg,rgba(6,38,52,.94),rgba(7,29,40,.9)); --context-border: rgba(108,186,230,.28); --context-title: #f4fbff; --context-meta: rgba(212,231,241,.82); --context-visual-surface: linear-gradient(180deg,rgba(255,255,255,.98),rgba(236,244,249,.94)); --context-visual-border: rgba(212,174,72,.78); --context-visual-color: #d8a341; --context-cta-surface: linear-gradient(180deg,rgba(76,169,242,.92),rgba(16,108,191,.96)); --context-cta-border: rgba(136,207,255,.66); --context-cta-bottom: rgba(13,84,151,.84); width: min(432px, calc(100vw - 28px)); min-height: 76px; gap: 12px; border: 1px solid var(--context-border); border-radius: 22px; background: var(--context-surface); box-shadow: 0 18px 44px rgba(0,18,29,.33), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(12px); } .game-screen .context-action.is-ready { border-color: color-mix(in srgb, var(--context-cta-border) 82%, var(--context-border)); box-shadow: 0 18px 44px rgba(0,18,29,.33), 0 0 0 1px rgba(83,173,233,.12), inset 0 1px 0 rgba(255,255,255,.08); } .game-screen .context-action > .context-action-visual { width: 58px; height: 58px; border: 1px solid var(--context-visual-border); border-radius: 50%; background: var(--context-visual-surface); color: var(--context-visual-color); box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 4px 10px rgba(0,0,0,.11); } .game-screen .context-action > .context-action-visual .ui-icon { width: 24px; height: 24px; } .game-screen .context-action-copy { gap: 2px; } .game-screen .context-action-copy b { color: var(--context-title); font-size: 13px; font-weight: 850; } .game-screen .context-action-copy small { color: var(--context-meta); } .game-screen .context-action > .context-action-cta { display: grid; grid-template-columns: 34px auto; grid-template-rows: 1fr 1fr; justify-content: start; column-gap: 10px; row-gap: 1px; min-width: 136px; height: 50px; padding: 0 14px; border: 1px solid var(--context-cta-border); border-bottom: 2px solid var(--context-cta-bottom); border-radius: 16px; background: var(--context-cta-surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 18px rgba(6,93,165,.18); backdrop-filter: blur(10px); } .game-screen .context-action-cta kbd { grid-column: 1; grid-row: 1 / 3; border: 1px solid rgba(255,255,255,.78); border-bottom: 2px solid rgba(4,82,145,.78); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(238,246,252,.96)); color: #0a73c4; } .game-screen .context-action-cta i { grid-column: 2; grid-row: 1; display: grid; place-items: center start; opacity: .88; color: #f6fbff; } .game-screen .context-action-cta i svg { width: 13px; height: 13px; } .game-screen .context-action-cta b { grid-column: 2; grid-row: 2; justify-self: start; font-size: 10px; } .game-screen .context-action.has-creature-emoji > .context-action-cta { grid-template-rows: 1fr; } .game-screen .context-action.has-creature-emoji .context-action-cta b { grid-row: 1; } .game-screen .context-action.is-talk-action { --context-visual-border: rgba(118,199,255,.72); --context-visual-color: #2f9de9; --context-cta-surface: linear-gradient(180deg,rgba(92,178,243,.5),rgba(22,114,187,.78)); --context-cta-border: rgba(152,220,255,.62); --context-cta-bottom: rgba(12,89,155,.74); } .game-screen .context-action.is-break-action { --context-visual-border: rgba(244,172,90,.8); --context-visual-color: #f0a149; --context-cta-surface: linear-gradient(180deg,rgba(255,191,111,.72),rgba(233,135,38,.9)); --context-cta-border: rgba(255,218,166,.68); --context-cta-bottom: rgba(176,93,18,.82); } .game-screen .context-action.is-break-action .context-action-cta kbd { color: #b85f13; } .game-screen .context-action.is-quest-target { box-shadow: 0 18px 44px rgba(0,18,29,.33), 0 0 0 2px rgba(96,188,255,.13), inset 0 1px 0 rgba(255,255,255,.08); } .game-screen .context-action.is-quest-target::after { top: -8px; left: 18px; border: 1px solid rgba(152,214,255,.52); background: rgba(237,248,255,.96); color: #157acc; letter-spacing: .06em; } html[data-game-theme="light"] .game-screen .context-action { --context-surface: linear-gradient(160deg,rgba(247,252,255,.9),rgba(230,241,248,.86)); --context-border: rgba(104,178,219,.34); --context-title: #173b54; --context-meta: rgba(63,105,133,.82); --context-visual-surface: linear-gradient(180deg,rgba(255,255,255,.98),rgba(240,246,250,.95)); box-shadow: 0 16px 36px rgba(42,101,140,.15), inset 0 1px 0 rgba(255,255,255,.9); } html[data-game-theme="light"] .game-screen .context-action > .context-action-visual { box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 4px 10px rgba(28,73,100,.08); } html[data-game-theme="light"] .game-screen .context-action > .context-action-cta { box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 8px 16px rgba(44,128,188,.14); } @media (max-width:760px) { .game-screen .context-action { width: min(350px, calc(100vw - 14px)); min-height: 62px; gap: 8px; padding: 6px; border-radius: 18px; } .game-screen .context-action > .context-action-visual { width: 46px; height: 46px; } .game-screen .context-action-copy b { font-size: 10px; } .game-screen .context-action-copy small { font-size: 7px; } .game-screen .context-action > .context-action-cta { min-width: 112px; height: 42px; padding: 0 10px; column-gap: 8px; border-radius: 13px; } .game-screen .context-action-cta kbd { width: 28px; min-width: 28px; height: 28px; font-size: 10px; } .game-screen .context-action-cta i svg { width: 12px; height: 12px; } .game-screen .context-action-cta b { font-size: 8px; } .game-screen .context-action.is-quest-target::after { top: -7px; left: 14px; font-size: 7px; } } /* v2.7.10 — rebuilt context action cards to match the compact glass CTA reference */ .game-screen .context-action { --ctx-surface: linear-gradient(165deg, rgba(11,59,66,.88), rgba(18,37,47,.92)); --ctx-border: rgba(112,200,219,.22); --ctx-outline: rgba(255,255,255,.08); --ctx-title: #f7fbfe; --ctx-meta: rgba(218,233,240,.84); --ctx-visual-surface: radial-gradient(circle at 35% 30%, rgba(31,95,81,.54), rgba(9,32,40,.72)); --ctx-visual-border: rgba(255,255,255,.1); --ctx-cta-surface: linear-gradient(180deg, rgba(43,145,238,.96), rgba(15,104,210,.97)); --ctx-cta-top: rgba(255,255,255,.28); --ctx-cta-border: rgba(139,211,255,.62); --ctx-cta-shadow: rgba(5,95,173,.28); --ctx-key-bg: linear-gradient(180deg, rgba(248,251,255,.97), rgba(234,242,249,.96)); --ctx-key-border: rgba(255,255,255,.82); --ctx-key-bottom: rgba(7,83,151,.62); --ctx-key-text: #1174cb; width: min(348px, calc(100vw - 26px)); min-height: 68px; gap: 10px; padding: 8px 10px; border: 1px solid var(--ctx-border); border-radius: 18px; background: var(--ctx-surface); color: var(--ctx-title); box-shadow: 0 14px 30px rgba(0,22,34,.22), inset 0 1px 0 var(--ctx-outline); backdrop-filter: blur(10px); } .game-screen .context-action.is-ready { border-color: rgba(124,211,240,.32); box-shadow: 0 16px 34px rgba(0,22,34,.24), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.08); } .game-screen .context-action > .context-action-visual { width: 52px; height: 52px; border: 1px solid var(--ctx-visual-border); border-radius: 16px; background: var(--ctx-visual-surface); color: #f3c364; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .game-screen .context-action > .context-action-visual .ui-icon { width: 22px; height: 22px; } .game-screen .context-pokemon-emoji { width: 100%; height: 100%; } .game-screen .context-pokemon-emoji img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); } .game-screen .context-action > .context-action-copy { gap: 2px; } .game-screen .context-action-copy b { color: var(--ctx-title); font-size: 12px; font-weight: 800; line-height: 1.08; } .game-screen .context-action-copy small { color: var(--ctx-meta); font-size: 8px; line-height: 1.15; } .game-screen .context-action > .context-action-cta { display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px; min-width: 118px; height: 44px; padding: 0 14px 0 9px; border: 1px solid var(--ctx-cta-border); border-radius: 14px; background: var(--ctx-cta-surface); box-shadow: inset 0 1px 0 var(--ctx-cta-top), 0 8px 16px var(--ctx-cta-shadow); } .game-screen .context-action.is-ready > .context-action-cta { animation: contextActionCtaPulse 1.45s ease-in-out infinite; } .game-screen .context-action-cta kbd { flex: 0 0 auto; display: grid; place-items: center; width: 34px; min-width: 34px; height: 34px; padding: 0; border: 1px solid var(--ctx-key-border); border-bottom: 2px solid var(--ctx-key-bottom); border-radius: 10px; background: var(--ctx-key-bg); color: var(--ctx-key-text); font: 1000 12px/1 system-ui; box-shadow: inset 0 1px 0 rgba(255,255,255,.92); } .game-screen .context-action-cta i { display: inline-grid; place-items: center; flex: 0 0 auto; color: #f3fbff; opacity: .95; } .game-screen .context-action-cta i svg { width: 14px; height: 14px; } .game-screen .context-action-cta b { display: block; flex: 1 1 auto; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; text-align: left; white-space: nowrap; } .game-screen .context-action.has-creature-emoji .context-action-cta { min-width: 106px; } .game-screen .context-action.has-creature-emoji .context-action-cta i { display: none; } .game-screen .context-action.is-talk-action { --ctx-visual-surface: radial-gradient(circle at 35% 30%, rgba(70,143,203,.34), rgba(9,38,55,.7)); --ctx-cta-surface: linear-gradient(180deg, rgba(79,174,241,.88), rgba(27,117,193,.82)); --ctx-cta-border: rgba(171,226,255,.58); --ctx-cta-shadow: rgba(7,83,151,.2); } .game-screen .context-action.is-break-action { --ctx-visual-surface: radial-gradient(circle at 35% 30%, rgba(205,145,66,.36), rgba(57,33,18,.72)); --ctx-cta-surface: linear-gradient(180deg, rgba(246,175,91,.95), rgba(223,124,38,.94)); --ctx-cta-border: rgba(255,218,171,.64); --ctx-cta-shadow: rgba(156,83,21,.22); --ctx-key-text: #b86114; } .game-screen .context-action.is-battle-action { --ctx-visual-surface: radial-gradient(circle at 35% 30%, rgba(66,163,94,.35), rgba(9,33,40,.72)); } .game-screen .context-action.is-quest-target::after { content: 'КВЕСТ'; position: absolute; top: -7px; left: 14px; padding: 3px 8px; border: 1px solid rgba(148,211,255,.48); border-radius: 999px; background: rgba(244,250,255,.96); color: #1780d4; font: 900 8px/1 system-ui; letter-spacing: .05em; } html[data-game-theme="light"] .game-screen .context-action { --ctx-surface: linear-gradient(165deg, rgba(239,249,252,.88), rgba(222,238,244,.82)); --ctx-border: rgba(97,160,190,.24); --ctx-outline: rgba(255,255,255,.8); --ctx-title: #1e445b; --ctx-meta: rgba(72,104,124,.88); --ctx-visual-surface: radial-gradient(circle at 35% 30%, rgba(176,212,198,.68), rgba(223,238,242,.92)); box-shadow: 0 12px 24px rgba(35,92,123,.14), inset 0 1px 0 rgba(255,255,255,.92); } html[data-game-theme="light"] .game-screen .context-action > .context-action-visual { box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 2px 6px rgba(53,102,131,.08); } html[data-game-theme="light"] .game-screen .context-action.is-talk-action { --ctx-visual-surface: radial-gradient(circle at 35% 30%, rgba(178,219,242,.78), rgba(221,238,247,.95)); --ctx-cta-surface: linear-gradient(180deg, rgba(83,178,244,.84), rgba(31,123,204,.82)); } html[data-game-theme="light"] .game-screen .context-action.is-break-action { --ctx-visual-surface: radial-gradient(circle at 35% 30%, rgba(240,212,175,.78), rgba(246,234,222,.95)); } @media (max-width:760px) { .game-screen .context-action { width: min(332px, calc(100vw - 14px)); min-height: 62px; gap: 8px; padding: 6px 8px; border-radius: 16px; } .game-screen .context-action > .context-action-visual { width: 46px; height: 46px; border-radius: 14px; } .game-screen .context-action-copy b { font-size: 11px; } .game-screen .context-action-copy small { font-size: 7px; } .game-screen .context-action > .context-action-cta { min-width: 104px; height: 40px; gap: 7px; padding: 0 11px 0 7px; border-radius: 12px; } .game-screen .context-action-cta kbd { width: 30px; min-width: 30px; height: 30px; font-size: 10px; } .game-screen .context-action-cta i svg { width: 12px; height: 12px; } .game-screen .context-action-cta b { font-size: 9px; } } /* v2.7.13 — interaction polish: larger desktop CTA + simpler mobile attention */ .interaction-card { --ic-bg:linear-gradient(145deg,rgba(8,42,48,.90),rgba(13,28,37,.93)); --ic-border:rgba(121,199,214,.22); --ic-title:rgba(255,255,255,.97); --ic-meta:rgba(211,228,235,.76); --ic-visual-bg:radial-gradient(circle at 35% 30%,rgba(43,95,78,.50),rgba(8,29,37,.72)); --ic-visual-border:rgba(255,255,255,.10); --ic-cta-bg:linear-gradient(180deg,rgba(42,150,240,.96),rgba(12,99,207,.97)); --ic-cta-border:rgba(132,205,255,.58); --ic-cta-bottom:rgba(4,74,145,.76); --ic-cta-shadow:rgba(4,87,164,.24); --ic-key-bg:linear-gradient(180deg,rgba(252,254,255,.98),rgba(234,243,249,.97)); --ic-key-text:#1173c7; --ic-key-border:rgba(255,255,255,.84); --ic-key-bottom:rgba(5,74,140,.58); position:absolute; z-index:19; left:50%; right:auto; bottom:max(24px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:64px minmax(0,1fr) auto; grid-template-rows:1fr; align-items:center; gap:14px; width:min(440px,calc(100vw - 36px)); min-width:0; min-height:84px; padding:10px 12px; transform:translate(-50%,10px) scale(.97); border:1px solid var(--ic-border); border-radius:20px; background:var(--ic-bg); color:var(--ic-title); box-shadow:0 15px 34px rgba(0,20,30,.27),inset 0 1px 0 rgba(255,255,255,.06); opacity:0; pointer-events:none; transition:opacity .16s ease,transform .16s ease,border-color .16s ease,box-shadow .16s ease; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); isolation:isolate; } .interaction-card.is-ready { transform:translateX(-50%); opacity:1; pointer-events:auto; } .interaction-card:hover > .interaction-card__cta { filter:brightness(1.06); transform:translateY(-1px); } .interaction-card:active > .interaction-card__cta { filter:brightness(.99); transform:translateY(1px) scale(.99); } .interaction-card__visual { grid-column:1; grid-row:1; display:grid; place-items:center; width:60px; height:60px; overflow:hidden; border:1px solid var(--ic-visual-border); border-radius:50%; background:var(--ic-visual-bg); color:#f3c55f; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } .interaction-card__visual .ui-icon { width:24px; height:24px; } .interaction-card__visual .context-pokemon-emoji { display:grid; place-items:center; width:100%; height:100%; } .interaction-card__visual .context-pokemon-emoji img { width:82%; height:82%; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.18)); } .interaction-card__visual .interaction-fallback-badge { display:grid; place-items:center; width:100%; height:100%; font-style:normal; } .interaction-card__visual .interaction-fallback-badge span { display:block; font-size:27px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.14)); } .interaction-card__copy { grid-column:2; grid-row:1; display:grid; align-content:center; gap:4px; min-width:0; background:none; border:0; box-shadow:none; text-align:left; } .interaction-card__title { display:block; min-width:0; overflow:hidden; color:var(--ic-title); font-size:15px; font-weight:800; line-height:1.05; text-align:left; text-overflow:ellipsis; white-space:nowrap; } .interaction-card__meta { display:block; min-width:0; overflow:hidden; color:var(--ic-meta); font-size:10px; font-weight:600; line-height:1.1; text-align:left; text-overflow:ellipsis; white-space:nowrap; } .interaction-card__cta { grid-column:3; grid-row:1; display:flex; align-items:center; justify-content:flex-start; gap:10px; min-width:156px; height:54px; padding:0 17px 0 9px; border:1px solid var(--ic-cta-border); border-bottom:2px solid var(--ic-cta-bottom); border-radius:15px; background:var(--ic-cta-bg); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 8px 17px var(--ic-cta-shadow); transition:transform .14s ease,filter .14s ease,box-shadow .14s ease; } .interaction-card.is-ready > .interaction-card__cta { animation:interactionCtaPulse 1.6s ease-in-out infinite; } .interaction-card__key { flex:0 0 auto; display:grid; place-items:center; width:38px; min-width:38px; height:38px; margin:0; padding:0; border:1px solid var(--ic-key-border); border-bottom:2px solid var(--ic-key-bottom); border-radius:10px; background:var(--ic-key-bg); color:var(--ic-key-text); font:1000 13px/1 system-ui; box-shadow:inset 0 1px 0 rgba(255,255,255,.92); } .interaction-card__action-icon { display:inline-grid; place-items:center; flex:0 0 auto; width:15px; height:15px; color:#f5fbff; opacity:.94; } .interaction-card__action-icon .ui-icon { width:15px; height:15px; } .interaction-card__action-label { display:block; flex:1 1 auto; min-width:0; color:#fff; font-size:12px; font-weight:800; line-height:1; text-align:left; white-space:nowrap; } .interaction-card.has-creature-emoji .interaction-card__action-icon { display:none; } .interaction-card.has-creature-emoji .interaction-card__cta { min-width:138px; } .interaction-card.is-talk-action { --ic-visual-bg:radial-gradient(circle at 35% 30%,rgba(59,133,191,.34),rgba(8,35,50,.70)); --ic-cta-bg:linear-gradient(180deg,rgba(73,169,239,.88),rgba(23,113,193,.84)); --ic-cta-border:rgba(159,220,255,.56); --ic-cta-shadow:rgba(6,79,146,.18); } .interaction-card.is-break-action { --ic-visual-bg:radial-gradient(circle at 35% 30%,rgba(202,137,55,.36),rgba(53,31,17,.72)); --ic-cta-bg:linear-gradient(180deg,rgba(244,173,88,.95),rgba(218,120,35,.94)); --ic-cta-border:rgba(255,216,165,.62); --ic-cta-bottom:rgba(162,82,16,.82); --ic-cta-shadow:rgba(145,73,15,.20); --ic-key-text:#b75e14; } .interaction-card.is-battle-action { --ic-visual-bg:radial-gradient(circle at 35% 30%,rgba(180,74,67,.26),rgba(8,31,38,.72)); --ic-cta-bg:linear-gradient(180deg,rgba(239,78,70,.97),rgba(190,40,45,.98)); --ic-cta-border:rgba(255,151,143,.68); --ic-cta-bottom:rgba(119,19,29,.82); --ic-cta-shadow:rgba(171,34,41,.26); --ic-key-text:#c52f36; --ic-key-bottom:rgba(138,24,33,.58); } .interaction-card.is-quest-target::after { content:'КВЕСТ'; position:absolute; z-index:2; top:-7px; left:15px; padding:2px 7px 3px; border:1px solid rgba(110,190,240,.52); border-radius:999px; background:rgba(27,124,197,.92); color:#fff; font:900 7px/1 system-ui; letter-spacing:.05em; box-shadow:0 3px 8px rgba(0,58,100,.12); } html[data-game-theme="light"] .interaction-card { --ic-bg:linear-gradient(145deg,rgba(239,249,252,.90),rgba(217,235,242,.85)); --ic-border:rgba(84,150,181,.24); --ic-title:#173c53; --ic-meta:rgba(55,91,111,.75); --ic-visual-bg:radial-gradient(circle at 35% 30%,rgba(181,217,203,.70),rgba(222,238,243,.92)); --ic-visual-border:rgba(75,137,166,.18); box-shadow:0 13px 28px rgba(38,93,121,.14),inset 0 1px 0 rgba(255,255,255,.90); } html[data-game-theme="light"] .interaction-card.is-talk-action { --ic-visual-bg:radial-gradient(circle at 35% 30%,rgba(174,218,241,.80),rgba(222,239,247,.95)); --ic-cta-bg:linear-gradient(180deg,rgba(74,171,240,.88),rgba(24,116,199,.86)); } html[data-game-theme="light"] .interaction-card.is-break-action { --ic-visual-bg:radial-gradient(circle at 35% 30%,rgba(239,211,173,.82),rgba(246,234,222,.96)); } .is-battling .interaction-card { opacity:0 !important; pointer-events:none !important; } @keyframes interactionCtaPulse { 0%,100% { filter:brightness(1); box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 8px 17px var(--ic-cta-shadow); } 50% { filter:brightness(1.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.31),0 10px 21px color-mix(in srgb,var(--ic-cta-shadow) 82%,transparent); } } @keyframes interactionMobileAttention { 0%,100% { transform:scale(1); filter:brightness(1); } 18% { transform:scale(1.025); filter:brightness(1.09); } 36% { transform:scale(1); filter:brightness(1.02); } } @media (prefers-reduced-motion: reduce) { .interaction-card, .interaction-card__cta { transition:none !important; animation:none !important; } } /* Touch preset intentionally differs from desktop: right anchored, smaller, no keyboard keycap. */ @media (max-width:760px) { .interaction-card { left:auto; right:max(10px,env(safe-area-inset-right)); bottom:calc(70px + env(safe-area-inset-bottom)); grid-template-columns:40px minmax(0,1fr) auto; gap:8px; width:min(304px,calc(100vw - 16px)); min-height:58px; padding:6px 8px; transform:translateY(8px) scale(.98); border-radius:15px; box-shadow:0 10px 22px rgba(0,20,30,.20),inset 0 1px 0 rgba(255,255,255,.05); } .interaction-card.is-ready { transform:none; } .interaction-card:hover > .interaction-card__cta, .interaction-card:active > .interaction-card__cta { transform:none; } .interaction-card__visual { width:40px; height:40px; } .interaction-card__visual .ui-icon { width:19px; height:19px; } .interaction-card__visual .interaction-fallback-badge span { font-size:22px; } .interaction-card__copy { gap:2px; } .interaction-card__title { font-size:11px; } .interaction-card__meta { font-size:7px; } .interaction-card__cta, .interaction-card.has-creature-emoji .interaction-card__cta { justify-content:center; min-width:100px; height:42px; gap:0; padding:0 11px; border-radius:11px; } .interaction-card__key, .interaction-card__action-icon { display:none; } .interaction-card__action-label { flex:0 1 auto; font-size:10px; text-align:center; } .interaction-card.is-ready > .interaction-card__cta { animation:interactionMobileAttention 1.65s ease-in-out infinite; } .interaction-card.is-quest-target::after { top:-6px; left:10px; padding:2px 6px; font-size:6px; } } @media (max-width:390px) { .interaction-card { width:min(286px,calc(100vw - 14px)); grid-template-columns:38px minmax(0,1fr) auto; gap:6px; padding:5px 6px; } .interaction-card__visual { width:38px; height:38px; } .interaction-card__cta, .interaction-card.has-creature-emoji .interaction-card__cta { min-width:92px; height:40px; padding:0 9px; } .interaction-card__action-label { font-size:8px; } } @media (max-width:800px) and (max-height:610px) { .interaction-card { bottom:calc(62px + env(safe-area-inset-bottom)); } } /* v2.7.13 — clearer adaptive quest objective with explicit remaining progress */ .game-screen .quest-widget { --qw-surface:linear-gradient(155deg,rgba(7,40,49,.93),rgba(10,50,57,.88)); --qw-border:rgba(107,198,190,.28); --qw-title:#f7fbfc; --qw-copy:rgba(226,239,241,.86); --qw-muted:rgba(187,214,218,.76); --qw-accent:#6dd7a0; --qw-track:rgba(255,255,255,.11); --qw-progress:linear-gradient(90deg,#39bff0,#64d999); left:auto; right:max(18px,env(safe-area-inset-right)); top:max(164px,calc(env(safe-area-inset-top) + 150px)); width:clamp(286px,25vw,360px); display:grid; padding:14px 16px 15px; border:1px solid var(--qw-border); background:var(--qw-surface); color:var(--qw-title); box-shadow:0 16px 34px rgba(0,23,31,.24),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .game-screen .quest-widget::before, .game-screen .quest-widget::after { display:none; } .game-screen .quest-widget > #questWidgetState { color:var(--qw-accent); font-size:8px; font-weight:950; line-height:1; letter-spacing:1.15px; } .game-screen .quest-widget > #questWidgetTitle { color:var(--qw-title); font-size:clamp(17px,1.35vw,21px); font-weight:850; letter-spacing:-.25px; } .game-screen .quest-widget > #questWidgetDescription { color:var(--qw-copy); line-height:1.35; } .game-screen .quest-widget-progress { display:grid; margin-top:2px; } .game-screen .quest-widget-progress-copy { display:flex; align-items:center; justify-content:space-between; min-width:0; } .game-screen .quest-widget-progress-copy strong { color:var(--qw-title); font-weight:850; line-height:1; white-space:nowrap; } .game-screen .quest-widget-progress-copy em { color:var(--qw-muted); font-style:normal; font-weight:700; line-height:1; } .game-screen .quest-widget-progress-track { position:relative; overflow:hidden; border-radius:999px; background:var(--qw-track); box-shadow:inset 0 1px 2px rgba(0,0,0,.13); } .game-screen .quest-widget-progress-track > i { position:absolute; inset:0 auto 0 0; display:block; width:0; max-width:100%; border-radius:inherit; background:var(--qw-progress); box-shadow:0 0 10px rgba(73,196,198,.22); transition:width .24s ease; } .game-screen .quest-widget-progress.is-indeterminate .quest-widget-progress-track > i { width:28% !important; animation:questIndeterminate 1.8s ease-in-out infinite alternate; } .game-screen .quest-widget-progress.is-complete .quest-widget-progress-track > i { background:linear-gradient(90deg,#55d88b,#8be36c); } .game-screen .quest-widget-meta { position:static; display:flex; flex-wrap:wrap; gap:5px; margin-top:0; } .game-screen .quest-widget-meta span { min-height:20px; padding:0 7px; border:1px solid rgba(255,255,255,.10); border-radius:999px; background:rgba(255,255,255,.055); color:var(--qw-muted); font-weight:750; } .game-screen .quest-widget.is-ready { --qw-accent:#ffd56b; --qw-progress:linear-gradient(90deg,#58d48f,#b4e65f); } .game-screen .quest-widget.is-free { --qw-accent:#a6bdc4; } @keyframes questIndeterminate { from { transform:translateX(0); opacity:.62; } to { transform:translateX(245%); opacity:1; } } html[data-game-theme="light"] .game-screen .quest-widget { --qw-surface:linear-gradient(155deg,rgba(241,249,250,.92),rgba(222,239,241,.88)); --qw-border:rgba(83,157,166,.25); --qw-title:#173f4d; --qw-copy:rgba(45,78,88,.84); --qw-muted:rgba(67,104,113,.74); --qw-accent:#16886d; --qw-track:rgba(64,122,135,.12); box-shadow:0 14px 30px rgba(39,91,103,.14),inset 0 1px 0 rgba(255,255,255,.9); } html[data-game-theme="light"] .game-screen .quest-widget-meta span { border-color:rgba(80,145,158,.16); background:rgba(255,255,255,.44); } @media (max-width:1180px) and (min-width:761px) { .game-screen .quest-widget { top:max(194px,calc(env(safe-area-inset-top) + 182px)); width:clamp(278px,30vw,330px); } } @media (max-width:760px) { .game-screen .quest-widget { left:auto; right:max(8px,env(safe-area-inset-right)); top:max(118px,calc(env(safe-area-inset-top) + 108px)); width:min(268px,calc(100vw - 18px)); gap:5px; padding:10px 11px 11px; border-radius:15px; } .game-screen .quest-widget > #questWidgetState { font-size:6px; letter-spacing:.85px; } .game-screen .quest-widget > #questWidgetTitle { font-size:14px; line-height:1.08; } .game-screen .quest-widget > #questWidgetDescription { display:-webkit-box; font-size:8px; line-height:1.3; -webkit-line-clamp:2; } .game-screen .quest-widget-progress { gap:4px; } .game-screen .quest-widget-progress-copy strong { font-size:8px; } .game-screen .quest-widget-progress-copy em { font-size:7px; } .game-screen .quest-widget-progress-track { height:4px; } .game-screen .quest-widget-meta { display:none; } } @media (max-width:390px) { .game-screen .quest-widget { width:min(250px,calc(100vw - 16px)); padding:9px 10px 10px; } .game-screen .quest-widget > #questWidgetTitle { font-size:13px; } .game-screen .quest-widget > #questWidgetDescription { font-size:7.5px; } } @media (prefers-reduced-motion: reduce) { .game-screen .quest-widget-progress-track > i { transition:none !important; animation:none !important; } } /* v2.7.14 — quest HUD hierarchy, touch action simplification and mobile chat previews */ .game-screen .quest-widget { --quest-card-width:clamp(304px,22vw,356px); right:max(24px,env(safe-area-inset-right)); top:calc(max(18px,env(safe-area-inset-top)) + 188px); gap:8px; padding:15px 16px 14px; border-radius:19px; cursor:pointer; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease; } .game-screen .quest-widget:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--qw-accent) 34%,var(--qw-border)); box-shadow:0 18px 38px rgba(0,23,31,.28),inset 0 1px 0 rgba(255,255,255,.07); } .game-screen .quest-widget-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; } .game-screen .quest-widget-head > #questWidgetState { overflow:hidden; color:var(--qw-accent); font-size:8px; font-weight:950; line-height:1; letter-spacing:1.15px; text-overflow:ellipsis; white-space:nowrap; } .game-screen #questWidgetCounter { flex:0 0 auto; min-width:34px; border:1px solid rgba(255,255,255,.11); border-radius:999px; background:rgba(255,255,255,.055); color:var(--qw-muted); font:850 8px/1 system-ui; text-align:center; } .game-screen .quest-widget > #questWidgetTitle { font-size:clamp(19px,1.45vw,23px); line-height:1.06; } .game-screen .quest-widget > #questWidgetDescription { line-height:1.38; } .game-screen .quest-widget-target { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; min-width:0; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.045); } .game-screen .quest-widget-target-icon { display:grid; place-items:center; overflow:hidden; border:1px solid rgba(113,204,213,.18); background:linear-gradient(145deg,rgba(54,135,139,.20),rgba(12,54,64,.34)); color:#7dd6e8; } .game-screen .quest-widget-target-icon .quest-target-svg, .game-screen .quest-widget-target-icon .quest-target-pokemon { display:grid; place-items:center; width:100%; height:100%; } .game-screen .quest-widget-target-icon .ui-icon { width:19px; height:19px; } .game-screen .quest-widget-target-icon .quest-target-pokemon img { width:80%; height:80%; object-fit:contain; } .game-screen .quest-widget-target > span:last-child { display:grid; gap:3px; min-width:0; } .game-screen .quest-widget-target small { color:var(--qw-accent); font-size:6px; font-weight:900; letter-spacing:.75px; } .game-screen .quest-widget-target b { color:var(--qw-title); font-size:10px; font-weight:800; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; } .game-screen .quest-widget-progress-track { height:7px; } .game-screen .quest-widget-progress-copy strong { font-size:10px; } .game-screen .quest-widget.is-progress-updated .quest-widget-progress-copy strong { animation:questProgressNumber 620ms ease; } .game-screen .quest-widget.is-progress-updated .quest-widget-progress-track > i { filter:brightness(1.16); box-shadow:0 0 14px rgba(91,218,177,.35); } .game-screen .quest-widget.is-new-objective { animation:questObjectiveArrive 360ms cubic-bezier(.2,.8,.2,1); } .game-screen .quest-widget.is-ready .quest-widget-target { border-color:rgba(136,216,127,.16); background:rgba(91,187,112,.07); } @keyframes questObjectiveArrive { from { opacity:.3; transform:translateY(-7px) scale(.985); } to { opacity:1; transform:none; } } @keyframes questProgressNumber { 0%,100% { transform:scale(1); color:var(--qw-title); } 45% { transform:scale(1.08); color:#8ce3b0; } } html[data-game-theme="light"] .game-screen #questWidgetCounter { border-color:rgba(80,145,158,.16); background:rgba(255,255,255,.48); } html[data-game-theme="light"] .game-screen .quest-widget-target { border-color:rgba(80,145,158,.14); background:rgba(255,255,255,.36); } html[data-game-theme="light"] .game-screen .quest-widget-target-icon { border-color:rgba(70,143,159,.16); background:linear-gradient(145deg,rgba(192,229,229,.72),rgba(228,242,245,.9)); color:#187f99; } /* Mobile chat is a secondary HUD layer: quiet button + maximum three transient messages. */ .mobile-chat-feed { display:none; } @media (max-width:800px) { .game-screen .mobile-actions { right:max(11px,env(safe-area-inset-right)); bottom:calc(148px + env(safe-area-inset-bottom)); z-index:21; } .game-screen .mobile-chat-button { position:relative; display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(135,201,231,.24); border-radius:15px; background:linear-gradient(145deg,rgba(8,51,68,.78),rgba(8,35,49,.84)); color:rgba(235,248,253,.92); box-shadow:0 9px 20px rgba(0,26,39,.20),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); } .game-screen .mobile-chat-button > span { display:grid; place-items:center; } .game-screen .mobile-chat-button .ui-icon { width:20px; height:20px; } .game-screen #mobileChatBadge { position:absolute; top:-5px; right:-4px; display:grid; place-items:center; min-width:17px; height:17px; padding:0 4px; border:2px solid rgba(8,39,52,.92); border-radius:999px; background:#28a9ec; color:#fff; font:900 8px/1 system-ui; } .game-screen #mobileChatBadge:empty, .game-screen #mobileChatBadge:is([data-empty="true"]), .game-screen #mobileChatBadge:not(:where(:has(*))) { /* text content controls visibility below through a zero-value selector fallback */ } .game-screen .mobile-chat-feed { position:absolute; z-index:20; right:max(11px,env(safe-area-inset-right)); bottom:calc(204px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:flex-end; gap:6px; width:min(258px,calc(100vw - 28px)); pointer-events:none; } .game-screen .mobile-chat-preview { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:7px; width:min(246px,100%); padding:6px 9px 6px 6px; transform:translateX(9px) scale(.985); border:1px solid rgba(126,195,222,.18); border-radius:12px; background:linear-gradient(145deg,rgba(5,37,50,.84),rgba(7,28,40,.80)); box-shadow:0 8px 18px rgba(0,24,36,.16),inset 0 1px 0 rgba(255,255,255,.05); opacity:0; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:opacity .2s ease,transform .2s ease; } .game-screen .mobile-chat-preview.is-visible { transform:none; opacity:1; } .game-screen .mobile-chat-preview.is-leaving { transform:translateY(-5px); opacity:0; } .game-screen .mobile-chat-preview > i { display:grid; place-items:center; width:30px; height:30px; overflow:hidden; border-radius:9px; background:rgba(72,151,184,.14); color:#dff5ff; font:850 10px/1 system-ui; } .game-screen .mobile-chat-preview > i img { width:18px; height:18px; object-fit:contain; } .game-screen .mobile-chat-preview > span { display:grid; gap:2px; min-width:0; } .game-screen .mobile-chat-preview b { overflow:hidden; color:#eaf8fd; font-size:8px; line-height:1; text-overflow:ellipsis; white-space:nowrap; } .game-screen .mobile-chat-preview p { display:-webkit-box; margin:0; overflow:hidden; color:rgba(216,234,241,.82); font-size:8px; line-height:1.25; -webkit-box-orient:vertical; -webkit-line-clamp:2; } html[data-game-theme="light"] .game-screen .mobile-chat-button { border-color:rgba(87,158,190,.22); background:linear-gradient(145deg,rgba(239,249,252,.86),rgba(218,237,244,.82)); color:#21617e; box-shadow:0 8px 18px rgba(45,99,126,.12),inset 0 1px 0 rgba(255,255,255,.8); } html[data-game-theme="light"] .game-screen #mobileChatBadge { border-color:rgba(232,245,250,.96); } html[data-game-theme="light"] .game-screen .mobile-chat-preview { border-color:rgba(88,159,190,.18); background:linear-gradient(145deg,rgba(239,249,252,.90),rgba(222,239,245,.86)); box-shadow:0 8px 17px rgba(48,100,126,.10),inset 0 1px 0 rgba(255,255,255,.82); } html[data-game-theme="light"] .game-screen .mobile-chat-preview b { color:#17425a; } html[data-game-theme="light"] .game-screen .mobile-chat-preview p { color:rgba(54,91,111,.78); } /* Touch interaction intentionally removes descriptive copy: icon + one obvious action. */ .game-screen .interaction-card { left:auto; right:max(11px,env(safe-area-inset-right)); bottom:calc(72px + env(safe-area-inset-bottom)); grid-template-columns:44px auto; gap:8px; width:max-content; max-width:calc(100vw - 18px); min-height:58px; padding:6px 7px; border-radius:16px; } .game-screen .interaction-card__copy { display:none; } .game-screen .interaction-card__visual { grid-column:1; width:44px; height:44px; } .game-screen .interaction-card__cta, .game-screen .interaction-card.has-creature-emoji .interaction-card__cta { grid-column:2; justify-content:center; min-width:116px; height:46px; padding:0 14px; border-radius:13px; } .game-screen .interaction-card__action-label { font-size:12px; font-weight:850; text-align:center; } .game-screen .interaction-card.is-ready > .interaction-card__cta { animation:interactionMobileAttention 1.75s ease-in-out infinite; } /* Phone quest tracker is a compact summary below the minimap; tap opens the full quest panel. */ .game-screen .quest-widget { right:max(8px,env(safe-area-inset-right)); top:calc(max(8px,env(safe-area-inset-top)) + 110px); width:min(248px,calc(100vw - 18px)); gap:5px; padding:9px 10px 10px; border-radius:15px; } .game-screen .quest-widget:hover { transform:none; } .game-screen .quest-widget-head > #questWidgetState { font-size:6px; letter-spacing:.75px; } .game-screen #questWidgetCounter { min-width:28px; padding:3px 6px; font-size:7px; } .game-screen .quest-widget > #questWidgetTitle { font-size:13px; line-height:1.06; } .game-screen .quest-widget > #questWidgetDescription, .game-screen .quest-widget-meta { display:none; } .game-screen .quest-widget-target { grid-template-columns:27px minmax(0,1fr); gap:6px; padding:4px 6px 4px 4px; border-radius:10px; } .game-screen .quest-widget-target-icon { width:26px; height:26px; border-radius:8px; } .game-screen .quest-widget-target-icon .ui-icon { width:14px; height:14px; } .game-screen .quest-widget-target small { display:none; } .game-screen .quest-widget-target b { font-size:8px; } .game-screen .quest-widget-progress { gap:3px; margin:0; } .game-screen .quest-widget-progress-copy strong { font-size:8px; } .game-screen .quest-widget-progress-copy em { max-width:125px; font-size:7px; } .game-screen .quest-widget-progress-track { height:4px; } } @media (max-width:390px) { .game-screen .quest-widget { width:min(226px,calc(100vw - 14px)); } .game-screen .interaction-card__cta, .game-screen .interaction-card.has-creature-emoji .interaction-card__cta { min-width:106px; } .game-screen .mobile-chat-feed { width:min(224px,calc(100vw - 22px)); } } @media (max-width:800px) and (max-height:610px) { .game-screen .quest-widget-target { display:none; } .game-screen .mobile-chat-feed { bottom:calc(190px + env(safe-area-inset-bottom)); } .game-screen .mobile-chat-feed .mobile-chat-preview:nth-last-child(n+2) { display:none; } } @media (prefers-reduced-motion: reduce) { .game-screen .quest-widget, .game-screen .quest-widget *, .game-screen .mobile-chat-preview, .game-screen .interaction-card__cta { animation:none !important; transition:none !important; } } /* v2.7.15 — readable quest tracker, safe minimap spacing and touch-native tutorial */ .game-screen .quest-widget { --quest-card-width:clamp(292px,21vw,332px); right:max(22px,env(safe-area-inset-right)); top:calc(max(14px,env(safe-area-inset-top)) + 222px); width:var(--quest-card-width); gap:7px; padding:13px 14px 12px; box-shadow:0 16px 34px rgba(0,23,31,.24),inset 0 1px 0 rgba(255,255,255,.065); } .game-screen .quest-widget-head > #questWidgetState { font-size:7.5px; letter-spacing:.95px; } .game-screen #questWidgetCounter { min-width:36px; padding:4px 7px; font-size:8px; } .game-screen .quest-widget > #questWidgetTitle { font-size:clamp(18px,1.3vw,21px); line-height:1.08; text-wrap:balance; } .game-screen .quest-widget > #questWidgetDescription { display:-webkit-box; margin:0; overflow:hidden; color:var(--qw-muted); font-size:10px; font-weight:650; line-height:1.34; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .game-screen .quest-widget-target { grid-template-columns:40px minmax(0,1fr); gap:9px; padding:7px 9px 7px 7px; border-radius:13px; } .game-screen .quest-widget-target-icon { width:38px; height:38px; border-radius:11px; } .game-screen .quest-widget-target-icon .quest-target-emoji { display:grid; place-items:center; width:100%; height:100%; font-size:20px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.13)); } .game-screen .quest-widget-target small { font-size:6.5px; letter-spacing:.7px; } .game-screen .quest-widget-target b { display:-webkit-box; overflow:hidden; font-size:11px; line-height:1.22; white-space:normal; text-overflow:clip; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .game-screen .quest-widget-progress { gap:5px; margin:0; } .game-screen .quest-widget-progress-copy { gap:10px; } .game-screen .quest-widget-progress-copy strong { flex:0 0 auto; font-size:9px; } .game-screen .quest-widget-progress-copy em { min-width:0; max-width:65%; overflow:hidden; font-size:8px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; } .game-screen .quest-widget.is-step .quest-widget-progress-copy strong { color:var(--qw-accent); } .game-screen .quest-widget-progress-track { height:6px; } .game-screen .quest-widget-meta { margin-top:1px; } .game-screen .quest-widget-meta span { min-height:22px; padding:0 8px; font-size:7px; } /* Mid-size desktop/laptop: keep a real gap below the 168px minimap. */ @media (max-width:1180px) and (min-width:761px) and (pointer:fine) { .game-screen .quest-widget { right:max(18px,env(safe-area-inset-right)); top:calc(max(14px,env(safe-area-inset-top)) + 190px); width:clamp(274px,27vw,306px); } .game-screen .quest-widget > #questWidgetTitle { font-size:18px; } .game-screen .quest-widget-target b { font-size:10px; } } /* Touch tutorial has its own truthful controls; no keyboard labels are exposed on phones/tablets. */ .controls-tutorial-mobile { display:none; } @media (max-width:760px) { .controls-tutorial-desktop { display:none; } /* Compact quest summary lives below the 102px minimap instead of competing with it. */ .game-screen .quest-widget { right:max(8px,env(safe-area-inset-right)); top:calc(max(8px,env(safe-area-inset-top)) + 116px); width:min(222px,calc(100vw - 20px)); gap:5px; padding:9px 10px 9px; border-radius:15px; } .game-screen .quest-widget-head > #questWidgetState { font-size:7px; letter-spacing:.6px; } .game-screen #questWidgetCounter { min-width:29px; padding:3px 6px; font-size:7px; } .game-screen .quest-widget > #questWidgetTitle { font-size:13px; line-height:1.1; -webkit-line-clamp:2; } .game-screen .quest-widget > #questWidgetDescription, .game-screen .quest-widget-meta { display:none; } .game-screen .quest-widget-target { grid-template-columns:30px minmax(0,1fr); gap:7px; padding:5px 6px 5px 5px; border-radius:11px; } .game-screen .quest-widget-target-icon { width:30px; height:30px; border-radius:9px; } .game-screen .quest-widget-target-icon .quest-target-emoji { font-size:17px; } .game-screen .quest-widget-target small { display:none; } .game-screen .quest-widget-target b { font-size:9px; line-height:1.18; -webkit-line-clamp:2; } .game-screen .quest-widget-progress { gap:4px; } .game-screen .quest-widget-progress-copy strong { font-size:8px; } .game-screen .quest-widget-progress-copy em { max-width:128px; font-size:7.5px; } .game-screen .quest-widget-progress-track { height:4px; } } @media (max-width:390px) { .game-screen .quest-widget { width:min(206px,calc(100vw - 16px)); } } @media (max-width:800px) and (max-height:610px) { .game-screen .quest-widget-target { display:grid; } } @media (prefers-reduced-motion:reduce) { .controls-tutorial, .controls-tutorial * { animation:none !important; transition:none !important; } } /* Research City / Genetics Lab v33 */ .game-screen .side-panel.is-genetics-lab-panel { width:min(760px,calc(100vw - 64px)); padding:14px; overflow:hidden; background:linear-gradient(145deg,rgba(248,253,255,.985),rgba(238,248,250,.98)); border-color:rgba(102,193,218,.52); } .is-genetics-lab-panel #sidePanelContent { height:100%;min-width:0;overflow:hidden; } .genetics-lab-window { --lab-blue:#168fca;--lab-cyan:#54d8dc;--lab-ink:#12384a;--lab-soft:#eaf7f9;height:100%;min-width:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;color:var(--lab-ink); } .genetics-lab-hero { position:relative;min-width:0;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:13px;align-items:center;padding:14px 16px;border-radius:20px;color:white;overflow:hidden;background:linear-gradient(120deg,#087bb9,#2eb4cc 56%,#62d6bd);box-shadow:0 13px 30px rgba(12,101,142,.22); } .genetics-lab-hero::after { content:"";position:absolute;inset:-90px -40px auto 43%;height:170px;border:1px solid rgba(255,255,255,.22);border-radius:50%;transform:rotate(-12deg); } .genetics-lab-mark { position:relative;z-index:1;width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);box-shadow:inset 0 1px rgba(255,255,255,.35); } .genetics-lab-mark .ui-icon { width:34px;height:34px; } .genetics-lab-hero > div { position:relative;z-index:1;min-width:0; } .genetics-lab-hero small { display:block;font-size:10px;font-weight:900;letter-spacing:.14em;opacity:.83; } .genetics-lab-hero h2 { margin:2px 0 1px;font-size:27px;line-height:1;font-weight:950;letter-spacing:-.035em; } .genetics-lab-hero p { margin:4px 0 0;font-size:12px;font-weight:700;opacity:.88; } .genetics-lab-hero > strong { position:relative;z-index:1;display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:13px;background:rgba(6,61,89,.25);font-size:14px;white-space:nowrap; } .genetics-lab-hero > strong .ui-icon { width:18px;height:18px; } .genetics-lab-tabs { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding:4px;border-radius:16px;background:rgba(142,201,215,.17);border:1px solid rgba(91,166,188,.22); } .genetics-lab-tabs button { min-width:0;min-height:46px;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:12px;background:transparent;color:#557687;font:850 11px/1 inherit;cursor:pointer; } .genetics-lab-tabs button:hover { background:rgba(255,255,255,.72);color:#167eaf; } .genetics-lab-tabs button.is-active { color:#087caf;background:white;box-shadow:0 5px 14px rgba(22,92,124,.13); } .genetics-lab-tabs .ui-icon { width:19px;height:19px;flex:0 0 auto; } .lab-service-panel { min-width:0;min-height:0;overflow:hidden auto;padding:15px;border:1px solid rgba(94,169,190,.27);border-radius:18px;background:rgba(255,255,255,.82);box-shadow:inset 0 1px rgba(255,255,255,.85);scrollbar-width:thin;scrollbar-color:#9dd6df transparent; } .lab-section-heading { min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px; } .lab-section-heading > span { min-width:0; } .lab-section-heading small { display:block;font-size:9px;font-weight:950;letter-spacing:.15em;color:#30a1ba; } .lab-section-heading h3 { margin:2px 0 0;font-size:20px;line-height:1.1;letter-spacing:-.02em; } .lab-section-heading > em { display:flex;align-items:center;gap:5px;padding:6px 9px;border-radius:10px;background:#e9f7fa;color:#1687a5;font-style:normal;font-size:12px;font-weight:950;white-space:nowrap; } .lab-section-heading > em .ui-icon { width:15px;height:15px; } .lab-section-heading > button,.lab-primary-action { min-height:40px;padding:0 13px;border:1px solid #7fc8da;border-radius:12px;background:linear-gradient(#f7fdff,#daf3f8);color:#087cab;font:900 11px/1 inherit;cursor:pointer; } .lab-section-heading > button:disabled,.lab-primary-action:disabled { opacity:.48;cursor:not-allowed;filter:grayscale(.35); } .lab-section-note { margin:4px 0 12px;color:#6b8794;font-size:11px;font-weight:650;line-height:1.4; } .lab-clinic-list,.lab-reserve-list,.lab-incubator-list { display:grid;gap:8px; } .lab-clinic-card { min-width:0;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid #d2e8ed;border-radius:15px;background:linear-gradient(100deg,#fff,#f5fbfc); } .lab-clinic-card.needs-care { border-color:#a7dce5;box-shadow:0 5px 14px rgba(43,122,148,.07); } .lab-pokemon-portrait { width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#e8f7fa;border:1px solid #b9dfe8;overflow:hidden; } .lab-pokemon-portrait img { width:88%;height:88%;object-fit:contain;transform:scale(var(--profile-scale,1)); } .lab-clinic-copy { min-width:0;display:grid;gap:5px; } .lab-clinic-copy > span { min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:8px; } .lab-clinic-copy b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px; } .lab-clinic-copy small { color:#76909b;font-size:9px;font-weight:850;white-space:nowrap; } .lab-condition-row { display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:6px; } .lab-condition-row > small { color:#299b70;font-weight:950; } .lab-condition-row > i { height:7px;overflow:hidden;border-radius:99px;background:#d7e9e7;box-shadow:inset 0 1px 2px rgba(23,79,87,.15); } .lab-condition-row > i > em { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#47d18d,#77df8d); } .lab-condition-meta { display:flex;gap:10px;color:#6f8790;font-size:9px;font-weight:750; } .lab-condition-meta .has-status { color:#db6b56; } .lab-clinic-card > button { min-width:76px;min-height:38px;display:flex;align-items:center;justify-content:center;gap:4px;border:1px solid #9bd2df;border-radius:11px;background:white;color:#1384a5;font:950 11px/1 inherit; } .lab-clinic-card > button .ui-icon { width:15px;height:15px; } .lab-clinic-card > button:disabled { color:#6f9998;background:#edf6f5;border-color:#d8e9e6; } .lab-team-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:11px; } .lab-team-slot { min-width:0;display:grid;grid-template-columns:30px 48px minmax(0,1fr) auto;align-items:center;gap:7px;padding:8px;border:1px solid #d4e8ed;border-radius:14px;background:#fbfeff; } .lab-team-slot.is-lead { border-color:#5fc9db;box-shadow:inset 3px 0 #29b8ce; } .lab-team-slot > strong { color:#a0b7bf;font-size:11px; } .lab-team-portrait,.lab-reserve-portrait { width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:#eaf7f9;border:1px solid #c6e3e9;overflow:hidden; } .lab-team-portrait img,.lab-reserve-portrait img { width:88%;height:88%;object-fit:contain;transform:scale(var(--profile-scale,1)); } .lab-team-slot > span,.lab-reserve-card > span { min-width:0;display:grid; } .lab-team-slot b,.lab-reserve-card b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px; } .lab-team-slot small,.lab-reserve-card small { color:#748d98;font-size:9px;font-weight:750; } .lab-team-slot > div { display:grid;gap:3px; } .lab-team-slot button,.lab-reserve-card button { min-height:28px;padding:0 7px;border:1px solid #b7dbe4;border-radius:8px;background:#f3fbfd;color:#2185a0;font:850 9px/1 inherit; } .lab-team-slot.is-empty { min-height:63px;grid-template-columns:30px 28px 1fr;color:#8aa1aa;border-style:dashed;background:rgba(238,248,249,.65); } .lab-team-slot.is-empty .ui-icon { width:22px;height:22px; } .lab-subheading { display:flex;justify-content:space-between;margin:14px 2px 7px;color:#4e727f; } .lab-subheading b { font-size:12px; }.lab-subheading small { font-size:10px;font-weight:800; } .lab-reserve-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .lab-reserve-card { min-width:0;display:grid;grid-template-columns:44px minmax(0,1fr) auto 34px;align-items:center;gap:7px;padding:7px;border:1px solid #d9e9ed;border-radius:13px;background:#fff; } .lab-reserve-card > button:last-child { width:34px;padding:0;display:grid;place-items:center; } .lab-reserve-card > button:last-child .ui-icon { width:17px;height:17px; } .lab-gene-rule { display:grid;grid-template-columns:50px 1fr;gap:10px;align-items:center;margin:10px 0 14px;padding:11px;border-radius:15px;color:#225d70;background:linear-gradient(120deg,#e8f8fb,#f1fbf6);border:1px solid #bde5e5; } .lab-gene-rule > span { width:46px;height:46px;display:grid;place-items:center;border-radius:14px;color:#16a1bd;background:white;box-shadow:0 5px 13px rgba(20,116,139,.11); } .lab-gene-rule .ui-icon { width:27px;height:27px; } .lab-gene-rule b { font-size:12px; }.lab-gene-rule p { margin:3px 0 0;font-size:10px;line-height:1.35;color:#65838d;font-weight:650; } .lab-parent-grid { display:grid;grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);align-items:end;gap:8px; } .lab-parent-grid label { min-width:0;display:grid;gap:5px; } .lab-parent-grid label > span { font-size:9px;font-weight:950;letter-spacing:.12em;color:#6f909c; } .lab-parent-grid select { width:100%;height:43px;padding:0 10px;border:1px solid #afd8e2;border-radius:11px;background:white;color:#244d5d;font:800 11px/1 inherit;outline:none; } .lab-parent-grid select:focus { border-color:#36afd0;box-shadow:0 0 0 3px rgba(54,175,208,.13); } .lab-parent-grid > i { width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:#ef7085;background:#fff0f3;border:1px solid #f5bec8; } .lab-parent-grid > i .ui-icon { width:21px;height:21px; } .lab-compatibility { display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:center;margin:11px 0;padding:10px;border:1px solid #d9e6e9;border-radius:13px;background:#f8fbfc; } .lab-compatibility > span { width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:white;color:#7997a1; } .lab-compatibility .ui-icon { width:20px;height:20px; } .lab-compatibility b { font-size:12px; }.lab-compatibility p { margin:2px 0 0;color:#718993;font-size:10px;font-weight:650; } .lab-compatibility.is-good,.lab-compatibility.is-excellent { border-color:#a9e1cd;background:#effaf5; }.lab-compatibility.is-good > span,.lab-compatibility.is-excellent > span { color:#1fa878; }.lab-compatibility.is-blocked { border-color:#f0c4c4;background:#fff4f3; }.lab-compatibility.is-blocked > span { color:#de6262; } .lab-breeding-facts { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:10px 0; } .lab-breeding-facts > span { min-width:0;padding:9px;border-radius:11px;background:#f1f8fa;border:1px solid #d9e9ed; } .lab-breeding-facts small { display:block;color:#78919b;font-size:8px;font-weight:900;letter-spacing:.1em; }.lab-breeding-facts b { display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px; } .lab-primary-action { width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;color:white;border-color:#168db8;background:linear-gradient(100deg,#168fc7,#3dc4bd);box-shadow:0 8px 18px rgba(21,137,173,.18); } .lab-primary-action .ui-icon { width:20px;height:20px; } .lab-incubator-list { grid-template-columns:repeat(3,minmax(0,1fr)); } .lab-incubator-slot { min-width:0;min-height:230px;display:grid;grid-template-rows:72px minmax(0,1fr) 38px;gap:8px;padding:12px;border:1px solid #bfe0e7;border-radius:17px;background:linear-gradient(155deg,#f8fdff,#eef9f7);overflow:hidden; } .lab-incubator-slot.is-ready { border-color:#62cba4;box-shadow:0 8px 22px rgba(26,152,112,.14),inset 0 0 24px rgba(100,225,172,.11); } .lab-egg-visual,.lab-empty-cradle { width:66px;height:66px;display:grid;place-items:center;margin:auto;border-radius:50%;color:#38a7bf;background:radial-gradient(circle at 35% 30%,#fff,#dff5f2 65%,#bfe5e7);border:1px solid #b3dce3;box-shadow:0 8px 18px rgba(27,112,139,.13); } .lab-egg-visual .ui-icon,.lab-empty-cradle .ui-icon { width:38px;height:38px; } .lab-incubator-slot.is-ready .lab-egg-visual { color:#20a873;animation:labEggReady 1.8s ease-in-out infinite; } .lab-egg-copy { min-width:0;text-align:center; } .lab-egg-copy > small,.lab-incubator-slot.is-empty small { color:#73909a;font-size:8px;font-weight:950;letter-spacing:.09em; } .lab-egg-copy > b,.lab-incubator-slot.is-empty b { display:block;margin-top:3px;font-size:12px; } .lab-egg-copy > p,.lab-incubator-slot.is-empty p { margin:3px 0;color:#7a919a;font-size:9px;line-height:1.3;font-weight:650; } .lab-egg-meta { display:flex;justify-content:center;gap:5px;margin:7px 0;flex-wrap:wrap; } .lab-egg-meta span { padding:3px 6px;border-radius:7px;background:white;border:1px solid #d4e9ed;color:#62818d;font-size:8px;font-weight:900;text-transform:uppercase; } .lab-egg-meta span.is-excellent { color:#168f67;border-color:#a8dcc9; }.lab-egg-meta span.is-good { color:#1688a5;border-color:#addce6; } .lab-egg-copy time { display:block;color:#137f9d;font-size:11px;font-weight:950; }.lab-egg-copy time.is-ready { color:#149864; } .lab-incubator-slot > button { min-height:38px;border:1px solid #8acddd;border-radius:11px;background:white;color:#1386a7;font:950 10px/1 inherit; }.lab-incubator-slot > button:disabled { opacity:.52; } .lab-incubator-slot.is-empty { display:grid;grid-template-rows:72px 1fr;text-align:center;border-style:dashed; }.lab-incubator-slot.is-empty > div { align-self:center; } .lab-empty-state { grid-column:1/-1;padding:18px;border:1px dashed #c8e0e5;border-radius:13px;text-align:center;color:#78919a;font-size:11px;font-weight:750; } .lab-shop-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; } .lab-shop-card { min-width:0;display:grid;grid-template-columns:58px minmax(0,1fr) 76px;align-items:center;gap:9px;padding:10px;border:1px solid #d3e8ed;border-radius:15px;background:linear-gradient(120deg,#fff,#f4fbfc); } .lab-shop-item { width:54px;height:54px;display:grid;place-items:center;border-radius:14px;background:#eaf8fa;border:1px solid #c8e5ea;overflow:hidden; } .lab-shop-item svg { width:42px;height:42px; }.lab-shop-item img { width:88%;height:88%;object-fit:contain; } .lab-shop-card > div { min-width:0; }.lab-shop-card > div > small { display:block;color:#36a0b6;font-size:7px;font-weight:950;letter-spacing:.1em;text-transform:uppercase; }.lab-shop-card > div > b { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px; }.lab-shop-card > div > p { margin:2px 0;color:#718b95;font-size:8px;line-height:1.25;font-weight:650; }.lab-shop-card > div > span { color:#5b7c88;font-size:8px;font-weight:850; } .lab-shop-card > button { min-height:50px;display:grid;place-items:center;border:1px solid #87cfda;border-radius:11px;background:white;color:#1385a2;font:900 9px/1 inherit; }.lab-shop-card > button small { display:flex;align-items:center;gap:3px;font-size:9px; }.lab-shop-card > button small .ui-icon { width:13px;height:13px; }.lab-shop-card > button:disabled { opacity:.48; } .genetics-lab-footer { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px;color:#66838e;font-size:9px;font-weight:800; } .genetics-lab-footer > span { display:flex;align-items:center;gap:5px; }.genetics-lab-footer .ui-icon { width:14px;height:14px;color:#29a586; } @keyframes labEggReady { 0%,100%{transform:rotate(-2deg) translateY(0)} 45%{transform:rotate(2deg) translateY(-3px)} 65%{transform:rotate(-1deg) translateY(-1px)} } .pokemon-genome-card { position:relative;min-width:0;display:grid;grid-template-columns:116px minmax(0,1fr) auto;align-items:center;gap:14px;margin:12px 0;padding:13px;border:1px solid rgba(81,187,207,.38);border-radius:18px;overflow:hidden;background:linear-gradient(120deg,#e9f9fb,#f6fcfa); } .pokemon-genome-card::after { content:"";position:absolute;inset:auto -60px -80px auto;width:180px;height:180px;border:1px solid rgba(55,180,199,.15);border-radius:50%; } .pokemon-genome-helix { position:relative;width:110px;height:66px;overflow:hidden; } .pokemon-genome-helix::before,.pokemon-genome-helix::after { content:"";position:absolute;left:5px;right:5px;top:50%;height:20px;border-top:3px solid #1ca7ca;border-bottom:3px solid #51c7a1;border-radius:50%;animation:genomeWave 2.7s ease-in-out infinite; } .pokemon-genome-helix::after { transform:scaleY(-1);animation-delay:-1.35s; } .pokemon-genome-helix > i { --x:calc(var(--gene-index) * 8.5px);position:absolute;left:calc(7px + var(--x));top:31px;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 7px #2bbbd1; } .pokemon-genome-card > span { position:relative;z-index:1;min-width:0; }.pokemon-genome-card small { display:block;color:#2a9db5;font-size:9px;font-weight:950;letter-spacing:.14em; }.pokemon-genome-card b { display:block;margin-top:2px;font-size:17px;letter-spacing:.06em; }.pokemon-genome-card p { margin:3px 0 0;color:#6d8994;font-size:10px;font-weight:700; } .pokemon-genome-card > strong { position:relative;z-index:1;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:white;background:linear-gradient(145deg,#21a7c3,#4cc797);box-shadow:0 7px 16px rgba(26,145,157,.2); } @keyframes genomeWave { 0%,100%{transform:translateY(-10px) scaleY(.75)} 50%{transform:translateY(10px) scaleY(.75)} } html[data-game-theme="dark"] .game-screen .side-panel.is-genetics-lab-panel { background:linear-gradient(145deg,rgba(10,33,46,.985),rgba(11,48,55,.985));border-color:rgba(79,183,207,.36); } html[data-game-theme="dark"] .genetics-lab-window { color:#e7f7fb; } html[data-game-theme="dark"] :is(.lab-service-panel,.lab-clinic-card,.lab-team-slot,.lab-reserve-card,.lab-parent-grid select,.lab-incubator-slot,.pokemon-genome-card) { background:#102f3b;border-color:#2c5967;color:#e7f7fb; } html[data-game-theme="dark"] :is(.lab-section-note,.lab-clinic-copy small,.lab-team-slot small,.lab-reserve-card small,.lab-gene-rule p,.lab-compatibility p,.lab-egg-copy p,.pokemon-genome-card p) { color:#9ab8c2; } html[data-game-theme="dark"] .genetics-lab-tabs { background:#0b2936;border-color:#28505e; } html[data-game-theme="dark"] .genetics-lab-tabs button.is-active { background:#194353;color:#77ddf1; } @media (max-width:760px) { .game-screen .side-panel.is-genetics-lab-panel { inset:max(6px,env(safe-area-inset-top)) 5px calc(67px + env(safe-area-inset-bottom)) 5px;width:auto;max-height:none;padding:8px;border-radius:19px; } .genetics-lab-window { gap:7px; } .genetics-lab-hero { grid-template-columns:46px minmax(0,1fr) auto;gap:8px;padding:9px 10px;border-radius:15px; } .genetics-lab-mark { width:43px;height:43px;border-radius:12px; }.genetics-lab-mark .ui-icon { width:25px;height:25px; } .genetics-lab-hero small { font-size:7px;letter-spacing:.1em; }.genetics-lab-hero h2 { font-size:19px; }.genetics-lab-hero p { display:none; } .genetics-lab-hero > strong { padding:7px 8px;font-size:11px; }.genetics-lab-hero > strong .ui-icon { width:14px;height:14px; } .genetics-lab-tabs { gap:3px;padding:3px;border-radius:13px; } .genetics-lab-tabs button { min-height:43px;display:grid;grid-template-rows:18px auto;gap:2px;padding:4px 2px;font-size:8px;border-radius:10px; } .genetics-lab-tabs .ui-icon { width:18px;height:18px;margin:auto; } .lab-service-panel { padding:10px;border-radius:14px; } .lab-section-heading h3 { font-size:16px; }.lab-section-heading small { font-size:7px; }.lab-section-heading > button { min-height:36px;padding:0 9px;font-size:9px; } .lab-section-note { margin-bottom:8px;font-size:9px; } .lab-clinic-card { grid-template-columns:44px minmax(0,1fr) 64px;gap:7px;padding:7px; }.lab-pokemon-portrait { width:42px;height:42px; }.lab-clinic-copy b { font-size:11px; }.lab-clinic-copy small { font-size:7px; }.lab-condition-meta { font-size:7px; }.lab-clinic-card > button { min-width:60px;min-height:36px;font-size:9px; } .lab-team-grid,.lab-reserve-list { grid-template-columns:1fr; }.lab-team-slot { grid-template-columns:25px 42px minmax(0,1fr) auto; }.lab-team-portrait,.lab-reserve-portrait { width:40px;height:40px; } .lab-parent-grid { grid-template-columns:1fr;align-items:center; }.lab-parent-grid > i { width:32px;height:32px;margin:-1px auto; }.lab-parent-grid > i .ui-icon { width:18px;height:18px; }.lab-parent-grid select { height:42px;font-size:10px; } .lab-gene-rule { grid-template-columns:42px 1fr;margin:7px 0 9px;padding:8px; }.lab-gene-rule > span { width:38px;height:38px; }.lab-gene-rule .ui-icon { width:22px;height:22px; } .lab-breeding-facts { grid-template-columns:repeat(3,minmax(0,1fr));gap:4px; }.lab-breeding-facts > span { padding:7px 5px; }.lab-breeding-facts b { font-size:8px; } .lab-primary-action { min-height:43px;font-size:10px; } .lab-incubator-list { grid-template-columns:1fr; }.lab-incubator-slot { min-height:116px;grid-template-columns:62px minmax(0,1fr) 78px;grid-template-rows:1fr;align-items:center;padding:8px; }.lab-incubator-slot.is-empty { min-height:92px;grid-template-columns:62px 1fr;grid-template-rows:1fr;text-align:left; }.lab-egg-visual,.lab-empty-cradle { width:56px;height:56px; }.lab-egg-visual .ui-icon,.lab-empty-cradle .ui-icon { width:31px;height:31px; }.lab-egg-copy { text-align:left; }.lab-egg-meta { justify-content:flex-start;margin:4px 0; }.lab-incubator-slot > button { min-height:40px;font-size:8px; } .lab-shop-grid { grid-template-columns:1fr; }.lab-shop-card { grid-template-columns:50px minmax(0,1fr) 68px;padding:8px; }.lab-shop-item { width:46px;height:46px; }.lab-shop-card > button { min-height:44px; } .genetics-lab-footer { font-size:7px; }.genetics-lab-footer small { text-align:right; } .pokemon-genome-card { grid-template-columns:78px minmax(0,1fr) 36px;gap:8px;padding:10px; }.pokemon-genome-helix { width:74px;height:56px;transform:scale(.78);transform-origin:left center; }.pokemon-genome-card b { font-size:13px; }.pokemon-genome-card p { font-size:8px; }.pokemon-genome-card > strong { width:36px;height:36px; } } @media (max-width:390px) { .genetics-lab-hero > strong { display:none; } .genetics-lab-hero { grid-template-columns:42px minmax(0,1fr); } .lab-section-heading { align-items:flex-start; }.lab-section-heading > button { max-width:126px;white-space:normal;line-height:1.1; } .lab-clinic-card { grid-template-columns:40px minmax(0,1fr); }.lab-clinic-card > button { grid-column:2;width:100%;min-height:34px; } .lab-reserve-card { grid-template-columns:40px minmax(0,1fr) auto 32px;gap:5px; } .genetics-lab-footer small { display:none; } } @media (prefers-reduced-motion:reduce) { .lab-incubator-slot.is-ready .lab-egg-visual,.pokemon-genome-helix::before,.pokemon-genome-helix::after { animation:none!important; } } /* v2.8.0 — in-game "Как работают функции" combat reference */ .combat-guide-intro { display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;padding:14px;border:1px solid rgba(81,193,239,.2);border-radius:18px;background:linear-gradient(135deg,rgba(57,173,224,.12),rgba(145,105,239,.08)); } .combat-guide-intro > span { width:56px;height:56px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,#278fc2,#7159c9);color:#fff;box-shadow:0 10px 24px rgba(25,96,139,.24); } .combat-guide-intro svg { width:30px;height:30px; }.combat-guide-intro > div { display:grid;gap:3px; }.combat-guide-intro small,.combat-guide-lead small,.combat-type-chart header small { color:#48bfe9;font-size:8px;font-weight:900;letter-spacing:.1em; }.combat-guide-intro b { font-size:15px; }.combat-guide-intro p { margin:2px 0 0;color:var(--muted,#78909c);font-size:10px;line-height:1.5; } .combat-guide-lead { display:grid;gap:10px;padding:13px;border:1px solid rgba(83,200,243,.18);border-radius:18px;background:rgba(18,83,111,.055); }.combat-guide-lead.status-prototype { border-color:rgba(234,176,72,.22); } .combat-guide-lead > header { display:flex;align-items:center;gap:10px; }.combat-guide-lead > header > span { display:grid;gap:2px; }.combat-guide-lead > header b { font-size:13px; } .combat-guide-lead > div { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }.combat-guide-lead > div article { min-width:0;display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;padding:9px;border:1px solid rgba(70,142,172,.12);border-radius:12px;background:rgba(255,255,255,.035); }.combat-guide-lead > div svg { width:24px;height:24px;color:#45bae8; }.combat-guide-lead > div span { display:grid;gap:2px; }.combat-guide-lead > div b { font-size:10px; }.combat-guide-lead > div p { margin:0;color:var(--muted,#78909c);font-size:8px;line-height:1.4; } .combat-guide-lead > ol { margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }.combat-guide-lead > ol li { position:relative;min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr);gap:8px;align-items:center;padding:6px;border:1px solid rgba(70,142,172,.11);border-radius:11px;background:rgba(255,255,255,.025); }.combat-guide-lead > ol .skill-icon { width:38px;height:38px;display:block;overflow:hidden;border-radius:9px; }.combat-guide-lead > ol .skill-icon img { width:100%;height:100%;object-fit:cover; }.combat-guide-lead > ol kbd { position:absolute;left:3px;top:3px;padding:2px 4px;border:0;border-radius:4px;background:rgba(2,28,42,.86);color:#fff;font:900 7px/1 inherit;box-shadow:none; }.combat-guide-lead > ol span { min-width:0;display:grid;gap:2px; }.combat-guide-lead > ol b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px; }.combat-guide-lead > ol small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted,#78909c);font-size:7px;letter-spacing:0; } .combat-type-chart { display:grid;gap:9px;padding:12px;border:1px solid rgba(70,142,172,.13);border-radius:18px;background:rgba(255,255,255,.025); }.combat-type-chart > header { display:flex;align-items:end;justify-content:space-between;gap:10px; }.combat-type-chart > header span { display:grid;gap:2px; }.combat-type-chart > header b { font-size:13px; }.combat-type-chart > header em { color:var(--muted,#78909c);font-size:8px;font-style:normal; }.combat-type-chart > div { overflow:auto;border:1px solid rgba(70,142,172,.12);border-radius:11px;scrollbar-width:thin; }.combat-type-chart table { width:max-content;min-width:100%;border-collapse:collapse;font-size:7px;text-align:center; }.combat-type-chart th,.combat-type-chart td { width:25px;height:25px;padding:2px;border:1px solid rgba(94,147,168,.09); }.combat-type-chart thead th,.combat-type-chart tbody th { position:sticky;z-index:2;background:rgba(9,48,65,.96); }.combat-type-chart thead th { top:0; }.combat-type-chart tbody th { left:0;min-width:94px;text-align:left;white-space:nowrap; }.combat-type-chart th b { margin-left:3px;font-size:7px; }.combat-type-chart .effect-2 { background:rgba(71,205,112,.22);color:#43cf73;font-weight:1000; }.combat-type-chart .effect-0-5 { background:rgba(255,184,66,.17);color:#e8a938;font-weight:1000; }.combat-type-chart .effect-0 { background:rgba(232,84,90,.18);color:#e55c64;font-weight:1000; }.combat-type-chart .effect-1 { color:rgba(151,177,188,.36); } body[data-ui-theme="light"] .combat-type-chart thead th,body[data-ui-theme="light"] .combat-type-chart tbody th { background:rgba(235,247,251,.98); } @media (max-width:760px) { .combat-guide-lead > div,.combat-guide-lead > ol { grid-template-columns:1fr; }.combat-type-chart > header { align-items:flex-start;flex-direction:column; }.combat-guide-intro { grid-template-columns:44px minmax(0,1fr);padding:10px; }.combat-guide-intro > span { width:42px;height:42px;border-radius:12px; }.combat-guide-intro svg { width:24px;height:24px; } } .dex-skill-card mark { margin-left:4px;padding:2px 4px;border-radius:4px;background:rgba(232,169,60,.14);color:#d99a2f;font-size:6px;vertical-align:middle; } .dex-skill-card.status-prototype { border-style:dashed; }.dex-skill-detail.status-prototype { border-color:rgba(231,168,62,.25); } .dex-combat-passives { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px; }.dex-combat-passives > article { display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding:9px;border:1px solid rgba(69,144,174,.13);border-radius:12px;background:rgba(255,255,255,.03); }.dex-combat-passives svg { width:26px;height:26px;color:#41b8e4; }.dex-combat-passives span { display:grid;gap:2px; }.dex-combat-passives small { color:#3aaad6;font-size:7px;font-weight:900;letter-spacing:.08em; }.dex-combat-passives b { font-size:10px; }.dex-combat-passives p { margin:0;color:var(--muted,#78909c);font-size:8px;line-height:1.4; } @media (max-width:620px) { .dex-combat-passives { grid-template-columns:1fr; } } /* v2.7.16 — cinematic starter selection, card flip, skill inspection and partner reveal */ .starter-dialog { place-items:center; padding:clamp(10px,2vw,24px) clamp(10px,2vw,24px) clamp(10px,2vw,24px) max(112px,calc(env(safe-area-inset-left) + 18px)); } .starter-dialog .starter-backdrop { background: radial-gradient(circle at 50% 28%,rgba(47,126,161,.18),transparent 42%), linear-gradient(180deg,rgba(2,20,31,.48),rgba(2,15,24,.84)); backdrop-filter:blur(7px) saturate(.9); } .starter-experience { --starter-panel:linear-gradient(160deg,rgba(7,35,47,.97),rgba(5,24,34,.98)); --starter-panel-soft:rgba(255,255,255,.055); --starter-border:rgba(143,207,231,.2); --starter-text:#f4fbff; --starter-muted:rgba(210,231,240,.72); position:relative; z-index:2; width:min(1080px,100%); max-height:min(820px,calc(100vh - 36px)); border:1px solid var(--starter-border); border-radius:28px; background:var(--starter-panel); color:var(--starter-text); box-shadow:0 36px 100px rgba(0,8,14,.62),inset 0 1px 0 rgba(255,255,255,.08); } .starter-flow-header { display:grid; grid-template-columns:minmax(0,1fr) auto 40px; align-items:center; gap:18px; border-bottom:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)); } .starter-flow-header > span { display:grid; gap:3px; min-width:0; } .starter-flow-header small { color:#77d9ff; font-size:7px; font-weight:900; letter-spacing:.12em; } .starter-flow-header b { overflow:hidden; color:var(--starter-text); font-size:clamp(18px,2.2vw,28px); line-height:1.05; text-overflow:ellipsis; white-space:nowrap; } .starter-flow-close { width:38px; height:38px; border:1px solid rgba(255,255,255,.13); border-radius:12px; background:rgba(255,255,255,.07); color:rgba(237,248,253,.78); font:500 23px/1 system-ui; } .starter-flow-close:hover { background:rgba(255,255,255,.12); color:#fff; } .starter-experience[data-stage="sending"] .starter-flow-close, .starter-experience[data-stage="reveal"] .starter-flow-close, .starter-experience[data-stage="partner"] .starter-flow-close { visibility:hidden; } .starter-flow-steps { display:flex; align-items:center; gap:5px; } .starter-flow-steps i { display:grid; place-items:center; width:23px; height:23px; border:1px solid rgba(153,200,221,.26); border-radius:50%; background:rgba(255,255,255,.04); color:rgba(206,228,237,.52); font:900 7px/1 system-ui; font-style:normal; } .starter-flow-steps em { width:18px; height:1px; background:rgba(160,204,222,.16); } .starter-flow-steps i.is-active { border-color:#6fd8ff; background:#0b7fbc; color:white; box-shadow:0 0 0 4px rgba(67,183,239,.1); } .starter-flow-steps i.is-done { border-color:#7dd75c; background:#2b8b3e; color:white; } .starter-flow-content { max-height:calc(min(820px,100vh - 36px) - 82px); padding:20px 22px 22px; } .starter-flow-lead { margin:0 0 16px; color:var(--starter-muted); font-size:11px; text-align:center; } .starter-flow-hint { display:block; margin:14px 0 0; color:rgba(202,224,234,.52); font-size:7px; text-align:center; } /* Selection cards */ .starter-choice-grid { gap:16px; } .starter-choice-card { grid-template-rows:auto minmax(190px,1fr) auto auto auto auto; min-height:470px; padding:12px; border:1px solid color-mix(in srgb,var(--starter-accent) 72%,white 12%); border-radius:24px; background: radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--starter-accent) 24%,transparent),transparent 46%), linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); text-align:left; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 35px rgba(0,10,18,.22); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,filter .2s ease; } .starter-choice-card::before { inset:-35% -30% auto; height:58%; opacity:.5; } .starter-choice-card:hover, .starter-choice-card:focus-visible { transform:translateY(-5px) scale(1.012); border-color:color-mix(in srgb,var(--starter-accent) 88%,white 16%); box-shadow:0 20px 46px rgba(0,10,18,.32),0 0 0 2px color-mix(in srgb,var(--starter-accent) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.12); filter:brightness(1.05); } .starter-card-element { z-index:2; padding:0 11px; background:rgba(2,22,31,.68); } .starter-card-element b { font-size:8px; } .starter-card-portrait { height:100%; min-height:205px; border-radius:19px; background: radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--starter-accent) 26%,white 6%),transparent 56%), linear-gradient(160deg,rgba(255,255,255,.08),rgba(0,0,0,.12)); } .starter-card-portrait img { width:88%; height:88%; filter:drop-shadow(0 15px 10px rgba(0,0,0,.22)); } .starter-card-name { gap:3px; padding:8px 6px 5px; } .starter-card-name b { font-size:20px; } .starter-card-name small { color:var(--starter-accent); font-size:8px; font-weight:900; text-transform:uppercase; } .starter-card-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; } .starter-card-stats i { padding:5px 2px; border-radius:8px; background:rgba(255,255,255,.055); color:rgba(235,247,251,.82); font:700 7px/1 system-ui; font-style:normal; text-align:center; } .starter-card-skills { gap:7px; padding:6px 0 2px; } .starter-card-skills > i { border:1px solid color-mix(in srgb,var(--starter-accent) 45%,rgba(255,255,255,.12)); background:rgba(0,18,26,.48); } .starter-card-skill-dot { width:70%; height:70%; } .starter-choice-card > em { color:rgba(211,231,239,.54); font:700 7px/1.2 system-ui; font-style:normal; text-align:center; } /* Details / card flip */ .starter-details-view { grid-template-columns:minmax(260px,.78fr) minmax(0,1.35fr); gap:22px; align-items:stretch; } .starter-flip-shell { min-height:500px; perspective:1100px; } .starter-flip-inner { position:relative; width:100%; height:100%; min-height:500px; transform-style:preserve-3d; transition:transform .72s cubic-bezier(.2,.75,.2,1); } .starter-flip-shell.is-flipped .starter-flip-inner { transform:rotateY(180deg); } .starter-flip-face { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--starter-accent) 68%,white 12%); border-radius:26px; backface-visibility:hidden; box-shadow:0 22px 48px rgba(0,10,18,.3),inset 0 1px 0 rgba(255,255,255,.1); } .starter-flip-back { align-content:center; background: radial-gradient(circle,color-mix(in srgb,var(--starter-accent) 18%,transparent),transparent 50%), linear-gradient(150deg,#092d3c,#041922); } .starter-flip-back > span { display:grid; place-items:center; width:116px; height:116px; border:2px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(255,255,255,.05); color:#fff; font:900 62px/1 system-ui; } .starter-flip-back small { color:rgba(223,239,246,.65); font-size:7px; letter-spacing:.12em; } .starter-flip-front { grid-template-rows:auto 1fr auto; gap:10px; padding:14px; transform:rotateY(180deg); background: radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--starter-accent) 29%,transparent),transparent 52%), linear-gradient(165deg,rgba(255,255,255,.085),rgba(0,0,0,.14)); } .starter-detail-element { justify-self:start; padding:5px 9px; border-radius:999px; background:rgba(0,22,30,.58); color:#fff; font-size:8px; font-weight:900; } .starter-detail-portrait { height:100%; min-height:320px; border-radius:21px; } .starter-detail-portrait img { width:92%; height:92%; filter:drop-shadow(0 18px 13px rgba(0,0,0,.25)); } .starter-flip-front > div { display:grid; gap:4px; justify-items:center; width:100%; padding:8px; } .starter-flip-front > div b { font-size:24px; } .starter-flip-front > div small { color:var(--starter-muted); font-size:8px; text-align:center; } .starter-details-copy { padding:4px 0; } .starter-details-eyebrow { color:var(--starter-accent); font-size:7px; font-weight:900; letter-spacing:.08em; } .starter-details-copy h3 { margin:0; color:var(--starter-text); font-size:18px; line-height:1.2; } .starter-skill-list { gap:8px; } .starter-skill-chip { grid-template-columns:42px minmax(0,1fr); gap:8px; min-height:56px; padding:6px 8px; border-radius:14px; transition:background .16s,border-color .16s,transform .16s; } .starter-skill-chip:hover,.starter-skill-chip:focus-visible,.starter-skill-chip.is-active { border-color:color-mix(in srgb,var(--starter-accent) 62%,rgba(255,255,255,.16)); background:color-mix(in srgb,var(--starter-accent) 10%,rgba(255,255,255,.045)); transform:translateY(-1px); } .starter-skill-chip-icon { width:40px; height:40px; box-shadow:0 4px 10px rgba(0,0,0,.18); } .starter-skill-chip span { gap:3px; } .starter-skill-chip b { font-size:9px; } .starter-skill-chip small { font-size:6px; } .starter-skill-detail { grid-template-columns:64px minmax(0,1fr); gap:12px; min-height:116px; border:1px solid color-mix(in srgb,var(--starter-accent) 32%,rgba(255,255,255,.1)); border-radius:17px; background:linear-gradient(145deg,color-mix(in srgb,var(--starter-accent) 8%,transparent),rgba(255,255,255,.035)); } .starter-skill-detail-icon { width:64px; height:64px; } .starter-skill-detail-atlas { width:54px; height:54px; } .starter-skill-detail > span { display:grid; align-content:start; gap:4px; } .starter-skill-detail small { color:var(--starter-accent); font-size:6px; font-weight:900; text-transform:uppercase; } .starter-skill-detail b { font-size:14px; } .starter-skill-detail p { margin:0; color:var(--starter-muted); font-size:9px; line-height:1.45; } .starter-skill-detail em { color:rgba(217,235,242,.56); font-size:6px; font-style:normal; } .starter-flow-actions { gap:9px; } .starter-flow-actions button,.starter-continue { min-height:44px; padding:0 16px; font-size:8px; } .starter-secondary { border:1px solid rgba(155,202,220,.22); background:rgba(255,255,255,.055); color:var(--starter-muted); } .starter-primary { border:1px solid color-mix(in srgb,var(--starter-accent) 68%,white 14%); background:linear-gradient(180deg,color-mix(in srgb,var(--starter-accent) 92%,white 5%),color-mix(in srgb,var(--starter-accent) 72%,black 18%)); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 18px color-mix(in srgb,var(--starter-accent) 18%,transparent); } .starter-primary:hover { filter:brightness(1.08); transform:translateY(-1px); } /* Confirmation */ .starter-confirm-view { grid-template-columns:minmax(250px,.72fr) minmax(0,1fr); gap:26px; padding:18px 28px; } .starter-confirm-orbit { position:relative; display:grid; place-items:center; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--starter-accent) 22%,transparent),transparent 66%); } .starter-confirm-orbit::before,.starter-confirm-orbit::after { content:''; position:absolute; inset:12%; border:1px solid color-mix(in srgb,var(--starter-accent) 45%,transparent); border-radius:50%; animation:starterOrbit 8s linear infinite; } .starter-confirm-orbit::after { inset:22%; animation-direction:reverse; animation-duration:5.5s; } @keyframes starterOrbit { to { transform:rotate(360deg); } } .starter-confirm-portrait { width:82%; height:82%; border-radius:50%; background:transparent; } .starter-confirm-portrait img { filter:drop-shadow(0 18px 14px rgba(0,0,0,.24)); } .starter-confirm-copy { gap:10px; } .starter-confirm-copy > small { font-size:7px; } .starter-confirm-copy h3 { font-size:clamp(28px,4vw,46px); } .starter-confirm-copy p { margin:0; color:var(--starter-muted); font-size:10px; line-height:1.5; } .starter-confirm-skills { gap:7px; } .starter-confirm-skills span { gap:7px; min-height:43px; padding:5px 8px; border-radius:12px; } .starter-confirm-skill-icon { width:32px; height:32px; } .starter-confirm-skills b { font-size:7px; } .starter-confirm-note { padding:8px 10px; border-left:2px solid var(--starter-accent); background:rgba(255,255,255,.035); color:rgba(214,231,238,.58)!important; font-size:7px!important; } .starter-button-spinner { display:inline-block; width:12px; height:12px; margin-right:5px; border:2px solid rgba(255,255,255,.38); border-top-color:white; border-radius:50%; animation:starterSpin .8s linear infinite; vertical-align:middle; } @keyframes starterSpin { to { transform:rotate(360deg); } } /* Reveal ceremony */ .starter-reveal-view { min-height:560px; } .starter-reveal-stage { height:420px; } .starter-reveal-beam { position:absolute; bottom:32px; width:42%; height:330px; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--starter-accent) 24%,transparent),color-mix(in srgb,var(--starter-accent) 52%,transparent)); clip-path:polygon(42% 0,58% 0,100% 100%,0 100%); filter:blur(3px); animation:starterBeam 1.9s ease both; } .starter-reveal-ring { position:absolute; bottom:22px; width:68%; height:96px; border:2px solid color-mix(in srgb,var(--starter-accent) 78%,white 10%); border-radius:50%; box-shadow:0 0 28px color-mix(in srgb,var(--starter-accent) 45%,transparent),inset 0 0 26px color-mix(in srgb,var(--starter-accent) 26%,transparent); animation:starterRing 1.3s ease-in-out infinite alternate; } @keyframes starterBeam { from { opacity:0; transform:scaleY(.08); transform-origin:bottom; } to { opacity:1; transform:scaleY(1); } } @keyframes starterRing { to { transform:scale(1.05); filter:brightness(1.2); } } .starter-reveal-creature { position:relative; z-index:3; width:310px; height:310px; transform:translateY(30px) scale(.4); opacity:0; animation:starterMaterialize 1.45s .35s cubic-bezier(.12,.8,.22,1.18) forwards; } .starter-reveal-portrait { background:transparent; } .starter-reveal-portrait img { filter:drop-shadow(0 20px 14px rgba(0,0,0,.25)); } @keyframes starterMaterialize { 55% { opacity:1; transform:translateY(3px) scale(1.08); } 100% { opacity:1; transform:translateY(0) scale(1); } } .starter-reveal-particles { position:absolute; inset:0; pointer-events:none; } .starter-reveal-particles i { position:absolute; left:50%; top:50%; width:7px; height:14px; border-radius:70% 10% 70% 10%; background:var(--starter-accent); opacity:0; transform:rotate(calc(var(--i) * 37deg)) translateY(-40px); animation:starterParticle 1.8s calc(var(--i) * 45ms) ease-out infinite; } @keyframes starterParticle { 0% { opacity:0; transform:rotate(calc(var(--i) * 37deg)) translateY(-30px) scale(.4); } 25% { opacity:.9; } 100% { opacity:0; transform:rotate(calc(var(--i) * 37deg)) translateY(-190px) scale(1.05); } } .starter-reveal-caption { position:relative; z-index:5; display:grid; justify-items:center; margin-top:-18px; text-align:center; } .starter-reveal-caption small { color:var(--starter-accent); font-size:8px; font-weight:900; letter-spacing:.1em; } .starter-reveal-caption b { font-size:30px; } .starter-reveal-caption span { color:var(--starter-muted); font-size:9px; } /* Final partner screen */ .starter-partner-view { grid-template-columns:minmax(300px,.9fr) minmax(0,1.25fr); gap:24px; } .starter-partner-art { position:relative; display:grid; place-items:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--starter-accent) 32%,rgba(255,255,255,.08)); border-radius:24px; background:radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--starter-accent) 29%,transparent),transparent 54%),linear-gradient(160deg,rgba(255,255,255,.04),rgba(0,0,0,.1)); } .starter-partner-portrait { width:92%; height:92%; background:transparent; animation:starterPartnerBounce 2.4s ease-in-out infinite; } .starter-partner-portrait img { filter:drop-shadow(0 22px 14px rgba(0,0,0,.24)); } @keyframes starterPartnerBounce { 50% { transform:translateY(-6px); } } .starter-partner-art > span { position:absolute; color:color-mix(in srgb,var(--starter-accent) 60%,white); font-size:28px; animation:starterSparkle 1.5s ease-in-out infinite alternate; } .starter-partner-art > span:nth-of-type(1) { top:18%; left:15%; } .starter-partner-art > span:nth-of-type(2) { top:11%; right:18%; animation-delay:.35s; } .starter-partner-art > span:nth-of-type(3) { bottom:18%; right:12%; animation-delay:.7s; } @keyframes starterSparkle { to { transform:scale(1.25) rotate(12deg); filter:brightness(1.35); } } .starter-partner-copy > small { font-size:8px; } .starter-partner-copy h3 { font-size:clamp(26px,3.6vw,42px); line-height:1.06; } .starter-partner-copy > p { font-size:10px; line-height:1.5; } .starter-continue { min-width:220px; margin-top:2px; } /* Light theme */ html[data-game-theme="light"] .starter-experience { --starter-panel:linear-gradient(160deg,rgba(244,251,253,.98),rgba(225,240,247,.97)); --starter-panel-soft:rgba(32,94,120,.05); --starter-border:rgba(73,145,177,.24); --starter-text:#153d55; --starter-muted:rgba(55,92,113,.72); box-shadow:0 30px 80px rgba(20,69,96,.28),inset 0 1px 0 white; } html[data-game-theme="light"] .starter-flow-header { border-bottom-color:rgba(47,112,142,.12); } html[data-game-theme="light"] .starter-flow-header small { color:#087db7; } html[data-game-theme="light"] .starter-flow-close { border-color:rgba(58,126,156,.15); background:rgba(47,118,151,.07); color:#2a647e; } html[data-game-theme="light"] .starter-choice-card, html[data-game-theme="light"] .starter-flip-face, html[data-game-theme="light"] .starter-partner-art { box-shadow:0 15px 34px rgba(41,91,116,.12),inset 0 1px 0 rgba(255,255,255,.8); } html[data-game-theme="light"] .starter-choice-card { background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--starter-accent) 20%,transparent),transparent 46%),linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.34)); } html[data-game-theme="light"] .starter-card-element, html[data-game-theme="light"] .starter-detail-element { background:rgba(247,252,254,.76); color:#234b60; } html[data-game-theme="light"] .starter-card-stats i, html[data-game-theme="light"] .starter-skill-chip, html[data-game-theme="light"] .starter-confirm-skills span { background:rgba(255,255,255,.52); } html[data-game-theme="light"] .starter-skill-detail { background:linear-gradient(145deg,color-mix(in srgb,var(--starter-accent) 9%,transparent),rgba(255,255,255,.48)); } html[data-game-theme="light"] .starter-flip-back { background:linear-gradient(150deg,#dceef5,#bfdce8); } html[data-game-theme="light"] .starter-flip-back > span { color:#245d78; border-color:rgba(46,119,151,.22); background:rgba(255,255,255,.52); } @media (max-width:800px) { .starter-dialog { padding:max(7px,env(safe-area-inset-top)) 7px calc(72px + env(safe-area-inset-bottom)); } .starter-experience { width:100%; max-height:100%; border-radius:20px; } .starter-flow-header { grid-template-columns:minmax(0,1fr) 34px; min-height:66px; gap:8px; padding:10px 10px 8px 14px; } .starter-flow-header b { font-size:18px; white-space:normal; } .starter-flow-header small { font-size:6px; } .starter-flow-steps { display:none; } .starter-flow-close { width:34px; height:34px; } .starter-flow-content { max-height:calc(100vh - 145px); padding:12px; } .starter-flow-lead { margin-bottom:10px; font-size:9px; } .starter-choice-grid { grid-template-columns:1fr; gap:9px; } .starter-choice-card { grid-template-columns:110px minmax(0,1fr); grid-template-rows:auto auto auto auto; min-height:152px; padding:8px; border-radius:17px; } .starter-card-element { position:absolute; top:8px; left:8px; min-height:23px; z-index:4; font-size:11px; } .starter-card-element b { font-size:6px; } .starter-card-art { grid-column:1; grid-row:1/5; } .starter-card-portrait { min-height:132px; height:132px; border-radius:13px; } .starter-card-name { grid-column:2; justify-items:start; padding:5px 2px 2px; } .starter-card-name b { font-size:17px; } .starter-card-stats { grid-column:2; } .starter-card-skills { grid-column:2; padding:3px 0; } .starter-choice-card > em { grid-column:2; text-align:left; } .starter-details-view,.starter-confirm-view,.starter-partner-view { grid-template-columns:1fr; gap:12px; } .starter-flip-shell,.starter-flip-inner { min-height:285px; } .starter-flip-front { grid-template-columns:132px 1fr; grid-template-rows:auto 1fr auto; padding:9px; } .starter-detail-element { grid-column:1/-1; justify-self:start; } .starter-detail-portrait { grid-column:1; grid-row:2/4; min-height:210px; } .starter-flip-front > div { grid-column:2; grid-row:2; justify-items:start; align-self:center; } .starter-flip-front > div b { font-size:20px; } .starter-details-copy { gap:8px; } .starter-details-copy h3 { font-size:15px; } .starter-skill-list { gap:6px; } .starter-skill-chip { grid-template-columns:34px minmax(0,1fr); min-height:48px; padding:5px; } .starter-skill-chip-icon { width:32px; height:32px; } .starter-skill-chip b { font-size:8px; } .starter-skill-detail { grid-template-columns:50px minmax(0,1fr); min-height:94px; padding:8px; } .starter-skill-detail-icon { width:50px; height:50px; } .starter-skill-detail-atlas { width:43px; height:43px; } .starter-skill-detail p { font-size:8px; } .starter-flow-actions { position:sticky; bottom:-12px; margin:0 -12px -12px; padding:9px 12px calc(9px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(4,24,34,0),rgba(4,24,34,.96) 28%); } html[data-game-theme="light"] .starter-flow-actions { background:linear-gradient(180deg,rgba(231,243,248,0),rgba(231,243,248,.97) 28%); } .starter-flow-actions button { flex:1; padding:0 9px; font-size:7px; } .starter-confirm-view { min-height:0; padding:4px; } .starter-confirm-orbit { justify-self:center; width:170px; } .starter-confirm-copy { gap:7px; } .starter-confirm-copy h3 { font-size:28px; } .starter-confirm-copy p { font-size:8px; } .starter-confirm-skills { grid-template-columns:repeat(2,1fr); } .starter-reveal-view { min-height:460px; } .starter-reveal-stage { height:330px; } .starter-reveal-creature { width:230px; height:230px; } .starter-reveal-caption b { font-size:25px; } .starter-partner-art { min-height:260px; } .starter-partner-portrait { width:260px; height:260px; } .starter-partner-copy h3 { font-size:27px; } .starter-partner-copy > p { font-size:9px; } .starter-partner-kit { grid-template-columns:repeat(2,1fr); } .starter-continue { width:100%; min-width:0; } } @media (max-width:480px) { .starter-skill-list,.starter-partner-kit,.starter-confirm-skills { grid-template-columns:1fr; } .starter-choice-card { grid-template-columns:96px minmax(0,1fr); } .starter-card-portrait { min-height:116px; height:116px; } .starter-flow-actions { flex-direction:column-reverse; } } @media (prefers-reduced-motion:reduce) { .starter-choice-card,.starter-flip-inner,.starter-confirm-orbit::before,.starter-confirm-orbit::after,.starter-reveal-beam,.starter-reveal-ring,.starter-reveal-creature,.starter-reveal-particles i,.starter-partner-portrait,.starter-partner-art > span { animation:none!important; transition:none!important; } .starter-flip-shell.is-flipped .starter-flip-inner { transform:rotateY(180deg); } .starter-reveal-creature { opacity:1; transform:none; } } /* v2.7.17 — partner handoff, reusable skill orbs and richer move cards */ .pokemon-skill-strip, .team-skill-strip, .partner-acquired-skills { display:flex; align-items:center; gap:6px; min-width:0; } .team-skill-strip { margin-top:6px; } .pokemon-skill-orb { position:relative; display:grid; place-items:center; flex:0 0 auto; width:30px; height:30px; border:1px solid color-mix(in srgb,var(--theme-accent,#3eb5ef) 34%,rgba(255,255,255,.14)); border-radius:50%; background:rgba(5,26,37,.52); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.12); transition:transform .16s,border-color .16s,filter .16s; } .pokemon-skill-orb:hover { transform:translateY(-2px) scale(1.04); border-color:rgba(112,211,255,.64); filter:brightness(1.12); } .pokemon-skill-orb-icon { width:26px; height:26px; border-radius:50%; } .pokemon-skill-orb::after { content:attr(data-skill-tooltip); position:absolute; z-index:40; left:50%; bottom:calc(100% + 9px); width:210px; padding:8px 10px; border:1px solid rgba(132,207,236,.24); border-radius:11px; background:rgba(5,27,38,.96); color:#eaf8ff; box-shadow:0 12px 26px rgba(0,0,0,.28); font:650 8px/1.4 "Segoe UI Variable",Inter,system-ui; white-space:normal; text-align:left; transform:translate(-50%,5px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .14s,transform .14s,visibility .14s; } .pokemon-skill-orb:hover::after { opacity:1; visibility:visible; transform:translate(-50%,0); } html[data-game-theme="light"] .game-screen .pokemon-skill-orb { background:rgba(235,247,252,.88); border-color:rgba(64,143,180,.24); } html[data-game-theme="light"] .game-screen .pokemon-skill-orb::after { background:rgba(247,252,254,.98); color:#21465c; border-color:rgba(64,143,180,.2); box-shadow:0 12px 24px rgba(45,90,115,.16); } .game-screen .pokemon-move-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .game-screen .pokemon-move-card { display:grid; grid-template-columns:48px minmax(0,1fr); gap:9px; align-items:start; min-height:112px; padding:10px; } .game-screen .pokemon-move-card-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:color-mix(in srgb,var(--theme-accent,#48aef0) 9%,var(--theme-surface-soft,#eef7fb)); } .game-screen .pokemon-move-card-atlas { width:39px; height:39px; border-radius:50%; } .game-screen .pokemon-move-card > span { display:grid; gap:3px; min-width:0; } .game-screen .pokemon-move-card small { color:var(--theme-accent,#1689d5); font-size:7px; font-weight:900; text-transform:uppercase; } .game-screen .pokemon-move-card b { font-size:11px; } .game-screen .pokemon-move-card p { margin:1px 0 0; color:var(--theme-muted,#6b8496); font-size:8px; line-height:1.4; } .game-screen .pokemon-move-card em { margin-top:2px; color:color-mix(in srgb,var(--theme-muted,#6b8496) 82%,transparent); font-size:7px; font-style:normal; } .partner-acquired-toast { position:absolute; z-index:32; right:max(22px,env(safe-area-inset-right)); bottom:max(28px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:11px; width:min(390px,calc(100vw - 32px)); min-height:86px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--partner-accent,#65cf55) 46%,rgba(145,211,236,.18)); border-radius:20px; background:linear-gradient(150deg,rgba(7,38,48,.96),rgba(5,25,35,.96)); color:#f5fbff; box-shadow:0 18px 44px rgba(0,19,28,.32),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transform:translateY(14px) scale(.97); pointer-events:none; } .partner-acquired-toast.is-open { visibility:visible; opacity:1; transform:translateY(0) scale(1); animation:partnerToastIn .32s cubic-bezier(.16,.8,.26,1.12) both; } .partner-acquired-toast.is-leaving { opacity:0; transform:translateY(7px) scale(.985); transition:opacity .24s,transform .24s; } @keyframes partnerToastIn { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } } .partner-acquired-visual { display:grid; place-items:center; width:58px; height:58px; overflow:hidden; border:1px solid color-mix(in srgb,var(--partner-accent,#65cf55) 70%,white 10%); border-radius:17px; background:radial-gradient(circle,color-mix(in srgb,var(--partner-accent,#65cf55) 24%,transparent),rgba(255,255,255,.035)); } .partner-acquired-emoji,.partner-acquired-emoji img { width:100%; height:100%; } .partner-acquired-emoji { display:grid; place-items:center; } .partner-acquired-emoji img { object-fit:contain; padding:5px; } .partner-acquired-copy { display:grid; gap:3px; min-width:0; } .partner-acquired-copy > small { color:var(--partner-accent,#78dd66); font-size:7px; font-weight:900; letter-spacing:.08em; } .partner-acquired-copy > b { overflow:hidden; font-size:13px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; } .partner-acquired-copy > em { color:rgba(218,234,242,.7); font-size:8px; font-style:normal; } .partner-acquired-skills { margin-top:3px; } .partner-acquired-skills .pokemon-skill-orb { width:25px; height:25px; } .partner-acquired-skills .pokemon-skill-orb-icon { width:22px; height:22px; } .partner-acquired-skills .pokemon-skill-orb::after { display:none; } html[data-game-theme="light"] .game-screen .partner-acquired-toast { background:linear-gradient(150deg,rgba(242,250,252,.97),rgba(225,240,247,.96)); color:#173f55; box-shadow:0 16px 34px rgba(47,92,116,.18),inset 0 1px 0 #fff; } html[data-game-theme="light"] .game-screen .partner-acquired-copy > em { color:rgba(62,95,114,.72); } @media (max-width:760px) { .team-skill-strip { gap:4px; } .team-skill-strip .pokemon-skill-orb { width:26px; height:26px; } .team-skill-strip .pokemon-skill-orb-icon { width:22px; height:22px; } .pokemon-skill-orb::after { display:none; } .game-screen .pokemon-move-grid { grid-template-columns:1fr; } .partner-acquired-toast { right:8px; bottom:calc(74px + env(safe-area-inset-bottom)); grid-template-columns:46px minmax(0,1fr); width:min(310px,calc(100vw - 16px)); min-height:68px; gap:8px; padding:8px 9px; border-radius:16px; } .partner-acquired-visual { width:46px; height:46px; border-radius:13px; } .partner-acquired-copy > small { font-size:6px; } .partner-acquired-copy > b { font-size:10px; } .partner-acquired-copy > em { font-size:7px; } .partner-acquired-skills { gap:3px; } .partner-acquired-skills .pokemon-skill-orb { width:21px; height:21px; } .partner-acquired-skills .pokemon-skill-orb-icon { width:18px; height:18px; } } @media (prefers-reduced-motion:reduce) { .partner-acquired-toast.is-open { animation:none; } .pokemon-skill-orb { transition:none; } } /* v2.7.19 — starter cards rebuilt: hero + four skills first, readable profile stats, sticker motion and clean acquisition */ .starter-asset-portrait { display:grid; place-items:center; overflow:visible; background:transparent; } .starter-asset-portrait img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 16px 12px rgba(0,0,0,.22)) drop-shadow(0 0 1px rgba(255,255,255,.38)); transform-origin:50% 82%; } .starter-skill-art { display:grid; place-items:center; overflow:hidden; background:none!important; } .starter-skill-art img { display:block; width:100%; height:100%; object-fit:contain; border-radius:inherit; } .starter-experience { width:min(1160px,100%); max-height:min(820px,calc(100vh - 34px)); border-radius:25px; } .starter-flow-header { grid-template-columns:minmax(0,1fr) auto 42px; padding:14px 18px 12px 22px; } .starter-flow-header small { font-size:8px; } .starter-flow-header b { font-size:clamp(23px,2.35vw,32px); } .starter-flow-steps { gap:7px; } .starter-flow-steps i { width:31px; height:31px; font-size:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:transform .2s,background .2s,border-color .2s,box-shadow .2s; } .starter-flow-steps em { width:20px; } .starter-flow-steps i.is-active { box-shadow:0 0 0 5px rgba(67,183,239,.1),inset 0 1px 0 rgba(255,255,255,.14); } .starter-flow-content { max-height:calc(min(820px,100vh - 34px) - 82px); padding:22px 24px 24px; } .starter-flow-lead,.starter-flow-hint { display:none!important; } /* Stage 1: a clean hero card and exactly four abilities. */ .starter-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .starter-choice-card { position:relative; display:grid; grid-template-rows:auto minmax(245px,1fr) auto 76px; min-width:0; min-height:455px; padding:14px; overflow:hidden; border:1px solid color-mix(in srgb,var(--starter-accent) 70%,white 10%); border-radius:23px; background: radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--starter-accent) 24%,transparent),transparent 48%), linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); color:var(--starter-text); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 34px rgba(0,10,18,.21); animation:starterChoiceIn .46s calc(var(--starter-index,0) * 80ms) cubic-bezier(.2,.8,.2,1) both; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,filter .22s ease; } @keyframes starterChoiceIn { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } } .starter-choice-card::before { content:''; position:absolute; inset:-32% -24% auto; height:54%; background:radial-gradient(circle,color-mix(in srgb,var(--starter-accent) 28%,transparent),transparent 65%); opacity:.46; pointer-events:none; } .starter-choice-card:hover,.starter-choice-card:focus-visible { transform:translateY(-6px) scale(1.012); border-color:color-mix(in srgb,var(--starter-accent) 90%,white 14%); box-shadow:0 22px 48px rgba(0,10,18,.3),0 0 0 2px color-mix(in srgb,var(--starter-accent) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.13); filter:brightness(1.055); } .starter-choice-card:active { transform:translateY(-2px) scale(.995); } .starter-card-element { position:relative; z-index:3; justify-self:center; display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 12px; border:1px solid color-mix(in srgb,var(--starter-accent) 62%,white 8%); border-radius:999px; background:rgba(2,22,31,.64); color:#fff; font-size:14px; } .starter-card-element b { font-size:9px; } .starter-card-art { position:relative; display:grid; place-items:center; min-height:0; } .starter-card-art::after { content:''; position:absolute; left:18%; right:18%; bottom:8%; height:12%; border-radius:50%; background:color-mix(in srgb,var(--starter-accent) 24%,transparent); filter:blur(12px); opacity:.65; } .starter-card-portrait { position:relative; z-index:2; width:100%; height:255px; padding:6px; border-radius:18px; background:transparent; } .starter-card-portrait img { width:98%; height:98%; animation:starterStickerFloat 2.8s ease-in-out infinite; } @keyframes starterStickerFloat { 50% { transform:translateY(-5px) rotate(.4deg); } } .starter-card-name { display:grid; justify-items:center; gap:4px; padding:5px 4px 2px; } .starter-card-name b { font-size:25px; line-height:1; } .starter-card-name small { color:rgba(226,241,248,.7); font-size:10px; font-weight:750; text-transform:none; } .starter-card-skills { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:7px 5px 2px; } .starter-card-skills > i { position:relative; display:grid; place-items:center; aspect-ratio:1; padding:4px; border:1px solid color-mix(in srgb,var(--starter-accent) 48%,rgba(255,255,255,.12)); border-radius:50%; background:rgba(0,18,26,.56); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 12px rgba(0,0,0,.14); transition:transform .18s,filter .18s,border-color .18s; } .starter-card-skills > i:hover { transform:translateY(-2px) scale(1.06); filter:brightness(1.12); border-color:var(--starter-accent); } .starter-card-skills > i > small { position:absolute; top:-3px; left:-3px; z-index:2; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:color-mix(in srgb,var(--starter-accent) 72%,#092532 28%); color:#fff; font:900 8px/1 system-ui; } .starter-card-skill-dot { width:100%; height:100%; border-radius:50%; } .starter-choice-card > .starter-stat-grid,.starter-choice-card > em { display:none!important; } /* Stage 2: stable profile card with readable bars. */ .starter-details-view { display:grid; grid-template-columns:minmax(360px,.92fr) minmax(0,1.22fr); gap:24px; align-items:start; } .starter-profile-card,.starter-flip-shell,.starter-flip-inner { min-height:575px; } .starter-flip-inner { transition:transform .62s cubic-bezier(.18,.78,.2,1); } .starter-flip-face { border-radius:24px; } .starter-flip-back { gap:10px; } .starter-flip-back > span { width:108px; height:108px; font-size:56px; } .starter-flip-back small { font-size:12px; font-weight:850; letter-spacing:.04em; } .starter-flip-front { grid-template-rows:auto 235px auto auto; align-content:start; gap:9px; padding:15px; overflow:hidden; } .starter-profile-head { display:flex!important; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:0!important; } .starter-detail-element { flex:0 0 auto; padding:6px 10px; font-size:9px; } .starter-profile-physical { margin-left:auto; } .starter-vitals { display:flex!important; gap:6px!important; width:auto!important; padding:0!important; } .starter-vitals > span { display:grid; gap:1px; min-width:66px; padding:5px 7px; border:1px solid rgba(154,207,226,.12); border-radius:9px; background:rgba(255,255,255,.035); text-align:left; } .starter-vitals small { color:rgba(207,229,238,.56); font-size:7px; font-weight:900; letter-spacing:.05em; } .starter-vitals b { font-size:10px; } .starter-profile-hero { display:grid; place-items:center; min-height:0; overflow:visible; } .starter-detail-portrait { width:100%; height:230px; min-height:0; padding:2px; background:transparent; } .starter-detail-portrait img { width:98%; height:98%; animation:starterStickerFloat 2.8s ease-in-out infinite; } .starter-flip-front > .starter-detail-identity { display:grid; justify-items:start; gap:5px; width:100%; padding:0!important; } .starter-detail-identity b { font-size:27px!important; line-height:1; } .starter-detail-identity > small { color:rgba(223,238,245,.7)!important; font-size:10px!important; text-align:left!important; } .starter-detail-identity .pokemon-type-list { justify-content:flex-start; } .starter-profile-stats { display:grid!important; gap:7px!important; width:100%!important; padding:5px 0 0!important; } .starter-profile-stats > b { font-size:11px; color:rgba(238,249,253,.92); } .starter-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; width:100%; } .starter-stat { display:grid; gap:4px; min-width:0; padding:6px 8px; border:1px solid rgba(152,205,225,.12); border-radius:10px; background:rgba(255,255,255,.04); } .starter-stat > span { display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items:center; gap:5px; min-width:0; } .starter-stat > span > i { font-size:10px; font-style:normal; } .starter-stat small { overflow:hidden; color:rgba(216,233,241,.72); font-size:8px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; } .starter-stat b { color:#fff; font-size:11px; } .starter-stat > em { display:block; height:4px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.075); } .starter-stat > em > i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,color-mix(in srgb,var(--starter-accent) 74%,white 2%),var(--starter-accent)); box-shadow:0 0 8px color-mix(in srgb,var(--starter-accent) 28%,transparent); } .starter-stat-grid.is-compact { grid-template-columns:repeat(3,minmax(0,1fr)); } .starter-details-copy { display:grid; align-content:start; gap:12px; padding:3px 0; } .starter-details-title { display:grid; gap:3px; } .starter-details-title > small { color:var(--starter-accent); font-size:10px; font-weight:850; } .starter-details-title h3 { margin:0; color:var(--starter-text); font-size:26px; line-height:1.08; } .starter-details-title p { margin:0; color:var(--starter-muted); font-size:11px; line-height:1.4; } .starter-details-eyebrow,.starter-details-intro { display:none!important; } .starter-skill-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .starter-skill-chip { display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:10px; min-width:0; min-height:72px; padding:7px 10px; border:1px solid rgba(151,204,225,.16); border-radius:15px; background:rgba(255,255,255,.04); color:var(--starter-text); text-align:left; transition:background .18s,border-color .18s,transform .18s,box-shadow .18s; } .starter-skill-chip:hover,.starter-skill-chip:focus-visible,.starter-skill-chip.is-active { border-color:color-mix(in srgb,var(--starter-accent) 66%,rgba(255,255,255,.16)); background:color-mix(in srgb,var(--starter-accent) 11%,rgba(255,255,255,.045)); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.06); } .starter-skill-chip-icon { width:54px; height:54px; border-radius:50%; box-shadow:0 5px 12px rgba(0,0,0,.17); } .starter-skill-chip span { display:grid; gap:4px; min-width:0; } .starter-skill-chip b { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .starter-skill-chip small { color:var(--starter-muted); font-size:8px; } .starter-skill-detail { display:grid; grid-template-columns:82px minmax(0,1fr); gap:13px; min-height:158px; padding:12px; border:1px solid color-mix(in srgb,var(--starter-accent) 34%,rgba(255,255,255,.1)); border-radius:18px; background:linear-gradient(145deg,color-mix(in srgb,var(--starter-accent) 9%,transparent),rgba(255,255,255,.035)); animation:starterDetailIn .2s ease both; } @keyframes starterDetailIn { from { opacity:.35; transform:translateY(3px); } } .starter-skill-detail-icon { display:grid; place-items:center; width:80px; height:80px; border-radius:18px; background:rgba(0,16,23,.5); } .starter-skill-detail-atlas { width:76px; height:76px; border-radius:50%; } .starter-skill-detail-copy { display:grid; align-content:start; gap:4px; min-width:0; } .starter-skill-detail-copy > small { color:var(--starter-accent); font-size:8px; font-weight:900; } .starter-skill-detail-copy > b { font-size:18px; } .starter-skill-detail-copy > p { margin:1px 0 4px; color:var(--starter-muted); font-size:10px; line-height:1.45; } .starter-skill-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-top:3px; } .starter-skill-metrics > i { display:grid; gap:2px; min-width:0; padding:6px 7px; border-radius:9px; background:rgba(255,255,255,.045); font-style:normal; } .starter-skill-metrics small { color:rgba(211,230,239,.54); font-size:6.5px; font-weight:900; } .starter-skill-metrics b { overflow:hidden; font-size:8.5px; text-overflow:ellipsis; white-space:nowrap; } .starter-flow-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:auto; padding-top:4px; } .starter-flow-actions button,.starter-continue { min-height:48px; padding:0 18px; border-radius:13px; font-size:10px; font-weight:900; } /* Confirmation is concise: identity, four skills, real sprite poses. */ .starter-confirm-view { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1fr); gap:30px; align-items:center; min-height:470px; padding:16px 30px; } .starter-confirm-orbit { width:min(330px,42vw); } .starter-confirm-portrait { width:285px; height:235px; } .starter-confirm-copy { display:grid; gap:12px; max-width:610px; } .starter-confirm-copy > small { color:var(--starter-accent); font-size:10px; font-weight:900; } .starter-confirm-copy h3 { margin:0; font-size:clamp(36px,4vw,52px); } .starter-confirm-copy > p { margin:0; color:var(--starter-muted); font-size:12px; line-height:1.45; } .starter-confirm-skills { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .starter-confirm-skills span { display:flex; align-items:center; gap:8px; min-height:54px; padding:7px 9px; border:1px solid rgba(255,255,255,.09); border-radius:13px; background:rgba(255,255,255,.035); } .starter-confirm-skill-icon { width:40px; height:40px; border-radius:50%; } .starter-confirm-skills b { font-size:10px; } .starter-confirm-note { display:none!important; } .starter-emote-strip { display:flex; align-items:center; gap:10px; } .starter-emote-strip > i { display:grid; place-items:center; width:62px; height:62px; overflow:hidden; border:1px solid color-mix(in srgb,var(--starter-accent) 34%,rgba(255,255,255,.12)); border-radius:18px; background:radial-gradient(circle,color-mix(in srgb,var(--starter-accent) 16%,transparent),rgba(255,255,255,.035)); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); animation:starterEmotePop 2.6s ease-in-out infinite; } .starter-emote-strip > i:nth-child(2) { animation-delay:.32s; } .starter-emote-strip > i:nth-child(3) { animation-delay:.64s; } .starter-emote-strip img { width:92%; height:92%; object-fit:contain; filter:drop-shadow(0 7px 6px rgba(0,0,0,.16)); } @keyframes starterEmotePop { 50% { transform:translateY(-3px) scale(1.035); filter:brightness(1.07); } } /* Reveal: use the real animated in-project sprite as the focus, not an empty stage. */ .starter-reveal-view { display:grid; align-content:center; justify-items:center; min-height:565px; overflow:hidden; } .starter-reveal-stage { position:relative; display:grid; place-items:center; width:min(620px,88vw); height:405px; } .starter-reveal-aura { position:absolute; left:50%; bottom:56px; width:min(520px,72%); height:210px; border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--starter-accent) 34%,transparent),transparent 68%); filter:blur(16px); transform:translateX(-50%); animation:starterAuraBreath 1.35s ease-in-out infinite alternate; } @keyframes starterAuraBreath { from { opacity:.45; transform:translateX(-50%) scale(.94); } to { opacity:.94; transform:translateX(-50%) scale(1.055); } } .starter-reveal-beam { height:320px; } .starter-reveal-ring { bottom:20px; } .starter-reveal-ring.is-secondary { width:390px; height:84px; opacity:.42; animation-delay:.34s; } .starter-reveal-creature { width:390px; height:330px; } .starter-reveal-portrait { width:100%; height:100%; } .starter-reveal-caption { gap:4px; margin-top:-10px; } .starter-reveal-caption small { font-size:10px; } .starter-reveal-caption b { font-size:44px; } .starter-reveal-caption span { font-size:11px; } .starter-reveal-view[data-starter-element="fire"] .starter-reveal-particles i { box-shadow:0 0 12px #ff8c35; } .starter-reveal-view[data-starter-element="water"] .starter-reveal-particles i { border-radius:50%; box-shadow:0 0 12px #56c8ff; } .starter-reveal-view[data-starter-element="grass"] .starter-reveal-particles i { border-radius:70% 20% 70% 20%; box-shadow:0 0 10px #83e85e; } /* Final partner handoff: one hero, three sticker poses, four skills, no repeated stat wall. */ .starter-partner-view { display:grid; grid-template-columns:minmax(360px,.9fr) minmax(0,1.2fr); gap:26px; min-height:520px; align-items:center; } .starter-partner-art { min-height:500px; border-radius:25px; background:radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--starter-accent) 30%,transparent),transparent 48%),linear-gradient(160deg,rgba(255,255,255,.055),rgba(0,0,0,.1)); } .starter-partner-portrait { width:400px; height:340px; animation:starterPartnerBounce 2.3s ease-in-out infinite; } .starter-partner-copy { display:grid; gap:11px; } .starter-partner-copy > small { color:var(--starter-accent); font-size:10px; font-weight:900; } .starter-partner-copy h3 { margin:0; font-size:clamp(32px,3.4vw,48px); line-height:1.04; } .starter-partner-copy > p { max-width:640px; margin:0; color:var(--starter-muted); font-size:12px; line-height:1.48; } .starter-partner-kit { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .starter-continue { justify-self:start; min-width:230px; min-height:52px; font-size:11px; } /* Theme tuning. */ html[data-game-theme="light"] .game-screen .starter-stat, html[data-game-theme="light"] .game-screen .starter-vitals > span, html[data-game-theme="light"] .game-screen .starter-skill-metrics > i { background:rgba(255,255,255,.46); border-color:rgba(65,139,171,.13); } html[data-game-theme="light"] .game-screen .starter-stat small, html[data-game-theme="light"] .game-screen .starter-details-title p, html[data-game-theme="light"] .game-screen .starter-detail-identity > small { color:rgba(45,83,105,.72)!important; } html[data-game-theme="light"] .game-screen .starter-stat b, html[data-game-theme="light"] .game-screen .starter-vitals b, html[data-game-theme="light"] .game-screen .starter-skill-metrics b { color:#173c52; } html[data-game-theme="light"] .game-screen .starter-card-name small { color:rgba(44,79,99,.72); } /* Mobile/tablet: one card per swipe, no micro text, details stack cleanly. */ @media (max-width:900px) { .starter-experience { max-height:calc(100vh - 88px); border-radius:21px; } .starter-flow-header { min-height:68px; grid-template-columns:minmax(0,1fr) 36px; padding:9px 10px 8px 13px; gap:7px; } .starter-flow-header small { font-size:6.5px; } .starter-flow-header b { font-size:20px; white-space:normal; } .starter-flow-steps { display:none; } .starter-flow-content { max-height:calc(100vh - 156px); padding:11px; } .starter-choice-grid { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 7vw 8px; } .starter-choice-card { flex:0 0 min(82vw,330px); grid-template-columns:112px minmax(0,1fr); grid-template-rows:auto 1fr 78px; min-height:245px; padding:9px; scroll-snap-align:center; } .starter-card-element { position:absolute; top:9px; left:9px; z-index:4; min-height:25px; font-size:11px; } .starter-card-element b { font-size:7px; } .starter-card-art { grid-column:1; grid-row:1/4; } .starter-card-portrait { width:112px; height:178px; padding:0; } .starter-card-name { grid-column:2; grid-row:1/3; align-content:end; justify-items:start; padding:14px 3px 8px; } .starter-card-name b { font-size:21px; } .starter-card-name small { font-size:8px; } .starter-card-skills { grid-column:2; grid-row:3; gap:5px; padding:3px 0; } .starter-card-skills > i > small { width:15px; height:15px; font-size:7px; } .starter-details-view,.starter-confirm-view,.starter-partner-view { grid-template-columns:1fr; gap:12px; } .starter-profile-card,.starter-flip-shell,.starter-flip-inner { min-height:500px; } .starter-flip-front { grid-template-rows:auto 190px auto auto; padding:11px; } .starter-detail-portrait { height:186px; } .starter-detail-identity b { font-size:23px!important; } .starter-detail-identity > small { font-size:9px!important; } .starter-vitals > span { min-width:58px; } .starter-profile-stats > b { font-size:10px; } .starter-stat { padding:5px 6px; } .starter-stat small { font-size:7px; } .starter-stat b { font-size:10px; } .starter-details-title h3 { font-size:22px; } .starter-details-title p { font-size:9px; } .starter-skill-list { gap:6px; } .starter-skill-chip { grid-template-columns:46px minmax(0,1fr); min-height:60px; padding:5px 7px; } .starter-skill-chip-icon { width:44px; height:44px; } .starter-skill-chip b { font-size:10px; } .starter-skill-chip small { font-size:7px; } .starter-skill-detail { grid-template-columns:62px minmax(0,1fr); min-height:138px; padding:9px; } .starter-skill-detail-icon { width:60px; height:60px; } .starter-skill-detail-atlas { width:58px; height:58px; } .starter-skill-detail-copy > b { font-size:15px; } .starter-skill-detail-copy > p { font-size:9px; } .starter-skill-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .starter-flow-actions { position:sticky; bottom:-11px; margin:0 -11px -11px; padding:9px 11px calc(9px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(4,24,34,0),rgba(4,24,34,.96) 28%); } html[data-game-theme="light"] .starter-flow-actions { background:linear-gradient(180deg,rgba(231,243,248,0),rgba(231,243,248,.97) 28%); } .starter-flow-actions button { flex:1; min-height:46px; font-size:9px; } .starter-confirm-view { min-height:0; padding:5px; } .starter-confirm-orbit { justify-self:center; width:220px; } .starter-confirm-portrait { width:210px; height:170px; } .starter-confirm-copy h3 { font-size:32px; } .starter-confirm-copy > p { font-size:10px; } .starter-confirm-skills { grid-template-columns:repeat(2,minmax(0,1fr)); } .starter-emote-strip > i { width:52px; height:52px; border-radius:15px; } .starter-reveal-view { min-height:470px; } .starter-reveal-stage { height:335px; } .starter-reveal-creature { width:280px; height:240px; } .starter-reveal-caption b { font-size:31px; } .starter-partner-art { min-height:280px; } .starter-partner-portrait { width:285px; height:238px; } .starter-partner-copy h3 { font-size:29px; } .starter-partner-copy > p { font-size:10px; } .starter-partner-kit { grid-template-columns:repeat(2,minmax(0,1fr)); } .starter-continue { width:100%; min-width:0; } } @media (max-width:520px) { .starter-choice-grid { padding-inline:3vw; } .starter-choice-card { flex-basis:92vw; grid-template-columns:100px minmax(0,1fr); } .starter-card-portrait { width:100px; height:165px; } .starter-skill-list,.starter-partner-kit,.starter-confirm-skills { grid-template-columns:1fr; } .starter-profile-card,.starter-flip-shell,.starter-flip-inner { min-height:520px; } .starter-stat-grid { grid-template-columns:1fr 1fr; } .starter-flow-actions { flex-direction:column-reverse; } } @media (prefers-reduced-motion:reduce) { .starter-choice-card,.starter-card-portrait img,.starter-detail-portrait img,.starter-emote-strip > i,.starter-reveal-aura,.starter-asset-portrait img { animation:none!important; transition:none!important; } } /* v2.7.20 — starter UI cleanup: three clear steps, clean light theme, rebuilt profile and new skill art */ .starter-flow-steps i { width:36px; height:36px; border-width:1.5px; font-size:12px; font-weight:950; } .starter-flow-steps em { width:24px; } .starter-flow-steps i.is-active { transform:scale(1.08); } /* Step 1: hero + four skills, no secondary micro-copy. */ .starter-choice-card-v2720 { grid-template-rows:auto minmax(250px,1fr) auto 86px; min-height:470px; padding:15px; } .starter-choice-card-v2720 .starter-card-name { padding:6px 4px 4px; } .starter-choice-card-v2720 .starter-card-name b { font-size:26px; letter-spacing:-.45px; } .starter-choice-card-v2720 .starter-card-name small { display:none!important; } .starter-choice-card-v2720 .starter-card-skills { align-self:end; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; padding:7px 2px 1px; } .starter-choice-card-v2720 .starter-card-skills > i { position:relative; aspect-ratio:1; padding:3px; overflow:visible; border-radius:15px; background:rgba(2,20,28,.5); } .starter-choice-card-v2720 .starter-card-skills > i > small { display:none!important; } .starter-choice-card-v2720 .starter-card-skill-dot, .starter-choice-card-v2720 .starter-card-skill-dot img { width:100%; height:100%; border-radius:12px!important; object-fit:cover; } .starter-card-skill::after { content:attr(data-skill-name); position:absolute; z-index:15; left:50%; bottom:calc(100% + 7px); width:max-content; max-width:155px; padding:6px 8px; border:1px solid rgba(132,203,229,.24); border-radius:9px; background:rgba(5,26,36,.96); color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.25); font:800 8px/1.2 system-ui; text-align:center; opacity:0; pointer-events:none; transform:translate(-50%,4px); transition:opacity .15s,transform .15s; } .starter-card-skill:hover::after { opacity:1; transform:translate(-50%,0); } /* Step 2: no flip shell. One stable information card and one skill inspector. */ .starter-details-v2720 { grid-template-columns:minmax(390px,.92fr) minmax(0,1.25fr); gap:24px; align-items:stretch; } .starter-profile-v2720 { display:grid; grid-template-rows:auto 235px auto 1fr; gap:10px; min-width:0; min-height:600px; padding:16px; border:1px solid color-mix(in srgb,var(--starter-accent) 62%,rgba(255,255,255,.13)); border-radius:24px; background: radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--starter-accent) 18%,transparent),transparent 47%), linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 38px rgba(0,13,20,.16); overflow:hidden; } .starter-profile-v2720-head { display:flex; align-items:center; justify-content:space-between; gap:10px; } .starter-profile-v2720-head .starter-vitals { margin-left:auto; } .starter-profile-v2720-hero { position:relative; display:grid; place-items:center; min-height:0; } .starter-profile-v2720-hero::after { content:''; position:absolute; left:22%; right:22%; bottom:5%; height:17%; border-radius:50%; background:color-mix(in srgb,var(--starter-accent) 22%,transparent); filter:blur(16px); opacity:.7; } .starter-profile-v2720-hero .starter-detail-portrait { position:relative; z-index:2; width:100%; height:230px; min-height:0; } .starter-profile-v2720-hero .starter-detail-portrait img { width:100%; height:100%; object-fit:contain; } .starter-profile-v2720-identity { display:grid; justify-items:start; gap:5px; } .starter-profile-v2720-identity > b { font-size:30px; line-height:1; letter-spacing:-.55px; } .starter-profile-v2720-identity > small { color:var(--starter-muted); font-size:10px; line-height:1.35; } .starter-profile-v2720-identity .pokemon-type-list { justify-content:flex-start; } .starter-profile-v2720-stats { display:grid; align-content:start; gap:9px; min-height:0; } .starter-profile-v2720-stats > header { display:grid; gap:2px; } .starter-profile-v2720-stats > header b { font-size:13px; } .starter-profile-v2720-stats > header small { color:var(--starter-muted); font-size:8px; } .starter-profile-v2720 .starter-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .starter-profile-v2720 .starter-stat { padding:8px 9px; border-radius:11px; } .starter-profile-v2720 .starter-stat > span { grid-template-columns:18px minmax(0,1fr) auto; gap:6px; } .starter-profile-v2720 .starter-stat small { font-size:8px; } .starter-profile-v2720 .starter-stat b { font-size:14px; } .starter-profile-v2720 .starter-stat > em { height:5px; } .starter-details-copy-v2720 { display:grid; grid-template-rows:auto auto auto auto; align-content:start; gap:12px; min-width:0; padding:3px 0; } .starter-details-copy-v2720 .starter-details-title { display:grid; gap:3px; } .starter-details-copy-v2720 .starter-details-title small { font-size:8px; } .starter-details-copy-v2720 .starter-details-title h3 { margin:0; font-size:27px; } .starter-details-copy-v2720 .starter-details-title p { margin:0; color:var(--starter-muted); font-size:10px; } .starter-skill-list-v2720 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .starter-skill-list-v2720 .starter-skill-chip { position:relative; grid-template-columns:54px minmax(0,1fr); min-height:102px; gap:10px; padding:9px 10px; border-radius:16px; text-align:left; overflow:hidden; } .starter-skill-list-v2720 .starter-skill-slot { position:absolute; top:6px; right:7px; display:grid; place-items:center; width:20px; height:20px; border-radius:7px; background:color-mix(in srgb,var(--starter-accent) 18%,rgba(255,255,255,.05)); color:var(--starter-accent); font:950 8px/1 system-ui; } .starter-skill-list-v2720 .starter-skill-chip-icon { width:54px; height:54px; border-radius:13px; box-shadow:0 5px 14px rgba(0,0,0,.2); } .starter-skill-chip-copy { display:grid!important; align-content:center; gap:3px!important; min-width:0; } .starter-skill-chip-copy b { padding-right:20px; font-size:11px!important; } .starter-skill-chip-copy small { color:var(--starter-accent)!important; font-size:7px!important; font-weight:800; } .starter-skill-chip-copy p { display:-webkit-box; overflow:hidden; margin:0; color:var(--starter-muted); font-size:8px; line-height:1.28; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .starter-skill-chip-copy em { color:var(--starter-muted); font-size:7px; font-style:normal; font-weight:750; } .starter-details-v2720 .starter-skill-detail { grid-template-columns:78px minmax(0,1fr); min-height:154px; padding:13px; border-radius:20px; } .starter-details-v2720 .starter-skill-detail-icon { width:76px; height:76px; border-radius:17px; overflow:hidden; } .starter-details-v2720 .starter-skill-detail-atlas { width:76px; height:76px; border-radius:15px; } .starter-details-v2720 .starter-skill-detail-copy > small { font-size:7px; } .starter-details-v2720 .starter-skill-detail-copy > b { font-size:18px; } .starter-details-v2720 .starter-skill-detail-copy > p { font-size:10px; line-height:1.4; } .starter-details-v2720 .starter-skill-metrics { margin-top:4px; } .starter-details-v2720 .starter-skill-metrics i { min-height:40px; } .starter-details-v2720 .starter-flow-actions { margin-top:2px; } /* Light theme must stay bright and readable, never gray-on-gray. */ html[data-game-theme="light"] .starter-experience { --starter-panel:linear-gradient(160deg,#fbfdff,#eef8fc); --starter-panel-soft:#f3f9fc; --starter-border:rgba(44,131,171,.26); --starter-text:#153f58; --starter-muted:#587b8f; background:var(--starter-panel); } html[data-game-theme="light"] .starter-flow-header { background:linear-gradient(180deg,#ffffff,#f4fafc); border-bottom-color:#d8e9f1; } html[data-game-theme="light"] .starter-flow-steps i { border-color:#9fcbdc; background:#fff; color:#41738a; box-shadow:0 2px 8px rgba(34,101,132,.08),inset 0 1px 0 #fff; } html[data-game-theme="light"] .starter-flow-steps em { background:#b8d6e3; } html[data-game-theme="light"] .starter-flow-steps i.is-active { border-color:#078dcc; background:#078dcc; color:#fff; box-shadow:0 0 0 5px rgba(7,141,204,.12); } html[data-game-theme="light"] .starter-flow-steps i.is-done { border-color:#48a943; background:#48a943; color:#fff; } html[data-game-theme="light"] .starter-choice-card-v2720 { background: radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--starter-accent) 15%,white),transparent 52%), linear-gradient(180deg,#fff,#f7fbfd); box-shadow:0 15px 32px rgba(40,93,118,.1),inset 0 1px 0 #fff; } html[data-game-theme="light"] .starter-card-element { background:#fff; color:#204b62; box-shadow:0 3px 10px rgba(31,87,112,.08); } html[data-game-theme="light"] .starter-choice-card-v2720 .starter-card-skills > i { background:#fff; border-color:color-mix(in srgb,var(--starter-accent) 48%,#c7dce6); box-shadow:0 5px 12px rgba(38,91,116,.12),inset 0 1px 0 #fff; } html[data-game-theme="light"] .starter-card-skill::after { background:#173e52; } html[data-game-theme="light"] .starter-profile-v2720 { background: radial-gradient(circle at 50% 27%,color-mix(in srgb,var(--starter-accent) 11%,white),transparent 48%), linear-gradient(160deg,#fff,#f7fbfd); box-shadow:0 15px 32px rgba(40,93,118,.09),inset 0 1px 0 #fff; } html[data-game-theme="light"] .starter-profile-v2720 .starter-vitals > span, html[data-game-theme="light"] .starter-profile-v2720 .starter-stat, html[data-game-theme="light"] .starter-skill-list-v2720 .starter-skill-chip, html[data-game-theme="light"] .starter-details-v2720 .starter-skill-detail, html[data-game-theme="light"] .starter-details-v2720 .starter-skill-metrics > i { border-color:#d6e7ee; background:#fff; color:#173f56; box-shadow:0 4px 12px rgba(38,91,116,.05); } html[data-game-theme="light"] .starter-skill-list-v2720 .starter-skill-chip.is-active { border-color:color-mix(in srgb,var(--starter-accent) 70%,#b7d5e2); background:color-mix(in srgb,var(--starter-accent) 7%,#fff); } html[data-game-theme="light"] .starter-profile-v2720-identity > small, html[data-game-theme="light"] .starter-profile-v2720-stats > header small, html[data-game-theme="light"] .starter-skill-chip-copy p, html[data-game-theme="light"] .starter-skill-chip-copy em, html[data-game-theme="light"] .starter-details-copy-v2720 .starter-details-title p, html[data-game-theme="light"] .starter-details-v2720 .starter-skill-detail-copy > p { color:#5c7d8f!important; } html[data-game-theme="light"] .starter-profile-v2720 .starter-stat small { color:#5c7d8f; } html[data-game-theme="light"] .starter-profile-v2720 .starter-stat b, html[data-game-theme="light"] .starter-profile-v2720 .starter-vitals b, html[data-game-theme="light"] .starter-details-v2720 .starter-skill-detail-copy > b, html[data-game-theme="light"] .starter-details-v2720 .starter-skill-metrics b { color:#173f56; } @media (max-width:900px) { .starter-choice-card-v2720 { flex-basis:min(86vw,340px); grid-template-columns:112px minmax(0,1fr); grid-template-rows:auto 1fr 70px; min-height:238px; } .starter-choice-card-v2720 .starter-card-name { align-content:end; justify-items:start; } .starter-choice-card-v2720 .starter-card-name b { font-size:22px; } .starter-choice-card-v2720 .starter-card-skills { gap:5px; } .starter-choice-card-v2720 .starter-card-skills > i { border-radius:11px; } .starter-choice-card-v2720 .starter-card-skill-dot, .starter-choice-card-v2720 .starter-card-skill-dot img { border-radius:9px!important; } .starter-card-skill::after { display:none; } .starter-details-v2720 { grid-template-columns:1fr; gap:12px; } .starter-profile-v2720 { grid-template-columns:132px minmax(0,1fr); grid-template-rows:auto 150px auto; min-height:0; padding:11px; } .starter-profile-v2720-head { grid-column:1/-1; } .starter-profile-v2720-hero { grid-column:1; grid-row:2/4; } .starter-profile-v2720-hero .starter-detail-portrait { height:170px; } .starter-profile-v2720-identity { grid-column:2; grid-row:2; align-self:center; } .starter-profile-v2720-identity > b { font-size:24px; } .starter-profile-v2720-stats { grid-column:1/-1; grid-row:4; } .starter-profile-v2720 .starter-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .starter-skill-list-v2720 .starter-skill-chip { min-height:88px; } .starter-details-v2720 .starter-skill-detail { min-height:132px; } } @media (max-width:560px) { .starter-profile-v2720 { grid-template-columns:105px minmax(0,1fr); } .starter-profile-v2720-head .starter-vitals { display:none!important; } .starter-profile-v2720-hero .starter-detail-portrait { height:145px; } .starter-profile-v2720 .starter-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .starter-skill-list-v2720 { grid-template-columns:1fr; } .starter-skill-list-v2720 .starter-skill-chip { min-height:78px; } } @media (prefers-reduced-motion:reduce) { .starter-card-skill::after { transition:none; } } /* v2.7.21 — modern Pokédex species cards and full Kanto dossier */ .side-panel.is-pokedex-detail { width:min(760px,calc(100vw - 118px)); padding:20px; } .pokedex-grid-v2721 .pokedex-species-card { width:100%; border:1px solid color-mix(in srgb,var(--theme-border,#b9d4e2) 78%,transparent); background:color-mix(in srgb,var(--theme-surface,#f7fbfd) 94%,transparent); color:var(--theme-text,#173c55); text-align:left; cursor:pointer; transition:transform .16s,border-color .16s,box-shadow .16s,background .16s; } .pokedex-grid-v2721 .pokedex-species-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--theme-accent,#148fd3) 50%,var(--theme-border,#b9d4e2)); box-shadow:0 10px 22px rgba(14,66,96,.12); } .pokedex-grid-v2721 .pokedex-species-card.is-locked { filter:none; opacity:.78; } .pokedex-grid-v2721 .pokedex-species-card .creature-portrait { background:color-mix(in srgb,var(--theme-surface-soft,#edf6fa) 92%,transparent); } .dex-detail-shell { display:grid; gap:14px; color:var(--theme-text,#173c55); } .dex-detail-head { position:sticky; z-index:5; top:-20px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; margin:-20px -20px 0; padding:16px 20px 13px; border-bottom:1px solid var(--theme-border,#c5dce8); background:color-mix(in srgb,var(--theme-surface,#f7fbfd) 92%,transparent); backdrop-filter:blur(14px); } .dex-detail-head > button,.dex-detail-head > div button { min-height:34px; padding:0 11px; border:1px solid var(--theme-border,#c3d9e5); border-radius:10px; background:var(--theme-surface-soft,#eaf4f8); color:var(--theme-text,#173c55); font-size:9px; font-weight:850; } .dex-detail-head > span small { display:block; color:var(--theme-accent,#168fd4); font-size:7px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; } .dex-detail-head h2 { margin:2px 0 0; font-size:28px; line-height:1; letter-spacing:-.7px; } .dex-detail-head > div { display:flex; gap:5px; } .dex-detail-head > div button { width:34px; padding:0; font-size:20px; } .dex-hero-grid { display:grid; grid-template-columns:minmax(245px,.92fr) minmax(300px,1.08fr); gap:12px; } .dex-hero-card,.dex-stats-card,.dex-section { overflow:hidden; border:1px solid var(--theme-border,#c9dde7); border-radius:18px; background:color-mix(in srgb,var(--theme-surface,#f8fcfe) 95%,transparent); box-shadow:0 8px 20px rgba(12,61,90,.07); } .dex-hero-card { padding:11px; } .dex-visual-tabs { display:flex; gap:5px; margin-bottom:8px; } .dex-visual-tabs button { min-height:28px; padding:0 10px; border:1px solid var(--theme-border,#c9dde7); border-radius:9px; background:var(--theme-surface-soft,#edf6fa); color:var(--theme-muted,#648398); font-size:8px; font-weight:850; } .dex-visual-tabs button.is-active { border-color:var(--theme-accent,#1590d5); background:color-mix(in srgb,var(--theme-accent,#1590d5) 12%,var(--theme-surface,#fff)); color:var(--theme-accent,#1590d5); } .dex-visual { position:relative; display:grid; place-items:center; min-height:242px; overflow:hidden; border-radius:16px; background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--theme-accent,#1c9ce1) 12%,transparent),transparent 58%),var(--theme-surface-soft,#edf6fa); } .dex-main-portrait { display:grid; place-items:center; width:220px; height:220px; background:transparent !important; } .dex-main-portrait img { width:100%; height:100%; image-rendering:auto; filter:drop-shadow(0 10px 12px rgba(0,22,34,.12)); } .dex-visual > span { position:absolute; left:10px; bottom:10px; padding:4px 8px; border-radius:999px; background:rgba(9,42,57,.78); color:#fff; font-size:7px; font-weight:900; } .dex-visual-shiny-pending::after { content:'✦'; position:absolute; right:18px; top:14px; color:#f1c849; font-size:24px; animation:dexShinyPulse 2.4s ease-in-out infinite; } .dex-visual-shiny-pending > small { position:absolute; right:10px; bottom:10px; max-width:155px; padding:5px 7px; border-radius:8px; background:rgba(9,42,57,.72); color:#e9f5fb; font-size:6px; line-height:1.25; text-align:right; } @keyframes dexShinyPulse { 50% { transform:scale(1.18) rotate(8deg); filter:brightness(1.25); } } .dex-identity { display:grid; gap:7px; padding:10px 2px 2px; } .dex-identity > div { display:flex; flex-wrap:wrap; gap:5px; } .dex-identity p { margin:0; color:var(--theme-muted,#638296); font-size:8px; line-height:1.35; } .dex-physical { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:8px; } .dex-physical span { padding:8px 9px; border:1px solid var(--theme-border,#d1e1e9); border-radius:11px; background:var(--theme-surface-soft,#eef6f9); } .dex-physical small,.dex-physical b { display:block; } .dex-physical small { color:var(--theme-muted,#7190a2); font-size:6px; font-weight:900; letter-spacing:.07em; } .dex-physical b { margin-top:2px; font-size:13px; } .dex-stats-card { padding:14px; } .dex-stats-card > header { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:10px; } .dex-stats-card > header small,.dex-stats-card > header b { display:block; } .dex-stats-card > header small { color:var(--theme-accent,#178fd1); font-size:7px; font-weight:900; letter-spacing:.09em; } .dex-stats-card > header b { margin-top:3px; font-size:20px; } .dex-stats-card > header em { max-width:145px; color:var(--theme-muted,#708b9b); font-size:6px; font-style:normal; line-height:1.3; text-align:right; } .dex-stat-row { display:grid; grid-template-columns:minmax(118px,1fr) 34px; gap:7px; align-items:center; margin:8px 0; } .dex-stat-row > span { display:flex; align-items:center; gap:7px; min-width:0; } .dex-stat-row > span i { width:19px; color:var(--theme-accent,#168fd4); font-size:12px; font-style:normal; text-align:center; } .dex-stat-row > span b { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; } .dex-stat-row > strong { font-size:13px; text-align:right; } .dex-stat-row > em { grid-column:1/-1; display:block; height:5px; overflow:hidden; border-radius:99px; background:color-mix(in srgb,var(--theme-border,#c8dde7) 72%,transparent); } .dex-stat-row > em > i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--theme-accent,#168fd4),#63d578); } .dex-stats-card > footer { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:13px; } .dex-stats-card > footer span { padding:8px; border-radius:10px; background:var(--theme-surface-soft,#eef6f9); } .dex-stats-card > footer small,.dex-stats-card > footer b { display:block; } .dex-stats-card > footer small { color:var(--theme-muted,#7590a1); font-size:5.8px; font-weight:900; } .dex-stats-card > footer b { margin-top:3px; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; } .dex-section { padding:14px; } .dex-section > header { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:11px; } .dex-section > header small { color:var(--theme-accent,#168fd4); font-size:7px; font-weight:900; letter-spacing:.09em; } .dex-section > header h3 { margin:2px 0 0; font-size:18px; } .dex-section > header em { max-width:285px; color:var(--theme-muted,#718b9b); font-size:6.5px; font-style:normal; line-height:1.3; text-align:right; } .dex-evolution-chain { display:flex; align-items:stretch; gap:6px; overflow:auto hidden; padding-bottom:3px; } .dex-evolution-chain > i { align-self:center; color:var(--theme-muted,#7e99a8); font-size:18px; font-style:normal; } .dex-evolution-chain button { display:grid; grid-template-columns:54px minmax(82px,1fr); align-items:center; gap:7px; min-width:148px; padding:7px; border:1px solid var(--theme-border,#c9dde7); border-radius:13px; background:var(--theme-surface-soft,#eef6f9); color:var(--theme-text,#173c55); text-align:left; } .dex-evolution-chain button.is-current { border-color:#6ad054; background:color-mix(in srgb,#6ad054 9%,var(--theme-surface,#fff)); } .dex-evo-portrait { width:52px; height:52px; border-radius:11px; } .dex-evolution-chain button span small,.dex-evolution-chain button span b,.dex-evolution-chain button span em { display:block; } .dex-evolution-chain button span small { color:var(--theme-muted,#7390a1); font-size:6px; } .dex-evolution-chain button span b { margin:2px 0; font-size:9px; } .dex-evolution-chain button span em { color:var(--theme-accent,#168fd4); font-size:6.5px; font-style:normal; font-weight:800; } .dex-evolution-branches,.dex-form-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .dex-evolution-branches button,.dex-form-list span { padding:6px 9px; border:1px solid var(--theme-border,#c9dde7); border-radius:9px; background:var(--theme-surface-soft,#eef6f9); color:var(--theme-text,#173c55); } .dex-evolution-branches b,.dex-evolution-branches small { display:block; } .dex-evolution-branches b { font-size:8px; }.dex-evolution-branches small { color:var(--theme-muted,#728c9d); font-size:6px; } .dex-form-list > small { width:100%; color:#8a62c6; font-size:6px; font-weight:900; letter-spacing:.08em; } .dex-form-list span { border-color:color-mix(in srgb,#9b6adb 45%,var(--theme-border,#c9dde7)); color:#8052bb; font-size:7px; font-weight:800; } .dex-skills-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; } .dex-skill-card { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:8px; min-height:70px; padding:8px; border:1px solid var(--theme-border,#cadde7); border-radius:13px; background:var(--theme-surface-soft,#eef6f9); color:var(--theme-text,#173c55); text-align:left; transition:border-color .16s,transform .16s,background .16s; } .dex-skill-card:hover { transform:translateY(-1px); } .dex-skill-card.is-active { border-color:var(--theme-accent,#168fd4); background:color-mix(in srgb,var(--theme-accent,#168fd4) 8%,var(--theme-surface,#fff)); } .dex-skill-card > span { display:grid; place-items:center; width:52px; height:52px; overflow:hidden; border-radius:13px; background:rgba(5,32,44,.86); } .dex-skill-icon { width:100%; height:100%; object-fit:cover; } .dex-skill-card i { min-width:0; font-style:normal; } .dex-skill-card small,.dex-skill-card b,.dex-skill-card em { display:block; } .dex-skill-card small { overflow:hidden; color:var(--theme-muted,#718d9d); font-size:6px; text-overflow:ellipsis; white-space:nowrap; } .dex-skill-card b { margin:3px 0; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; } .dex-skill-card em { color:var(--theme-accent,#168fd4); font-size:6.5px; font-style:normal; font-weight:800; } .dex-skill-detail { display:grid; grid-template-columns:78px minmax(0,1fr); gap:11px; margin-top:9px; padding:11px; border:1px solid color-mix(in srgb,var(--theme-accent,#168fd4) 45%,var(--theme-border,#cadde7)); border-radius:15px; background:color-mix(in srgb,var(--theme-accent,#168fd4) 6%,var(--theme-surface,#fff)); } .dex-skill-detail > div { display:grid; place-items:center; width:78px; height:78px; overflow:hidden; border-radius:16px; background:rgba(5,32,44,.88); } .dex-skill-detail-icon { width:100%; height:100%; object-fit:cover; } .dex-skill-detail > span small,.dex-skill-detail > span b { display:block; } .dex-skill-detail > span > small { color:var(--theme-accent,#168fd4); font-size:6px; font-weight:900; letter-spacing:.07em; } .dex-skill-detail > span > b { margin-top:2px; font-size:15px; } .dex-skill-detail p { margin:5px 0 8px; color:var(--theme-muted,#617f91); font-size:8px; line-height:1.42; } .dex-skill-detail section { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; } .dex-skill-detail section i { padding:6px; border-radius:8px; background:var(--theme-surface-soft,#eef6f9); font-style:normal; } .dex-skill-detail section small,.dex-skill-detail section strong { display:block; } .dex-skill-detail section small { color:var(--theme-muted,#7792a2); font-size:5px; font-weight:900; } .dex-skill-detail section strong { margin-top:2px; font-size:8px; } .dex-source-section { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; } .dex-source-section small,.dex-source-section b { display:block; } .dex-source-section small { color:var(--theme-accent,#168fd4); font-size:6px; font-weight:900; letter-spacing:.08em; } .dex-source-section b { margin-top:2px; font-size:11px; } .dex-source-section p { margin:4px 0 0; color:var(--theme-muted,#6d899a); font-size:7px; line-height:1.4; } .dex-source-section a { padding:8px 10px; border:1px solid var(--theme-border,#c9dde7); border-radius:10px; background:var(--theme-surface-soft,#eef6f9); color:var(--theme-accent,#168fd4); font-size:7px; font-weight:900; text-decoration:none; white-space:nowrap; } html[data-game-theme="dark"] .side-panel.is-pokedex-detail .dex-hero-card, html[data-game-theme="dark"] .side-panel.is-pokedex-detail .dex-stats-card, html[data-game-theme="dark"] .side-panel.is-pokedex-detail .dex-section, html[data-game-theme="dark"] .side-panel.is-pokedex-detail .pokedex-species-card { box-shadow:0 10px 24px rgba(0,12,20,.18); } @media (max-width:980px) { .side-panel.is-pokedex-detail { width:min(660px,calc(100vw - 28px)); } .dex-hero-grid { grid-template-columns:1fr; } .dex-main-portrait { width:190px; height:190px; } .dex-visual { min-height:210px; } } @media (max-width:760px) { .side-panel.is-pokedex-detail { top:8px; right:6px; bottom:72px; width:calc(100vw - 12px); padding:12px; border-radius:18px; } .dex-detail-head { top:-12px; margin:-12px -12px 0; padding:11px 12px 10px; } .dex-detail-head h2 { font-size:21px; } .dex-detail-head > button { font-size:8px; } .dex-hero-grid { grid-template-columns:1fr; } .dex-visual { min-height:185px; } .dex-main-portrait { width:170px; height:170px; } .dex-stats-card > footer { grid-template-columns:1fr 1fr; } .dex-skills-grid { grid-template-columns:1fr; } .dex-skill-detail { grid-template-columns:58px minmax(0,1fr); gap:8px; } .dex-skill-detail > div { width:58px; height:58px; } .dex-skill-detail section { grid-template-columns:1fr 1fr; } .dex-section > header { align-items:start; flex-direction:column; gap:4px; } .dex-section > header em { max-width:none; text-align:left; } .dex-source-section { grid-template-columns:1fr; } .dex-source-section a { width:max-content; } } @media (prefers-reduced-motion:reduce) { .pokedex-grid-v2721 .pokedex-species-card,.dex-skill-card,.dex-visual-shiny-pending::after { transition:none !important; animation:none !important; } } /* v2.7.22 — living Pokémon size system + in-game mechanics guide */ .mechanics-shell { display:grid; gap:14px; } .mechanics-live-card { display:grid; grid-template-columns:74px minmax(0,1fr); align-items:center; gap:12px; padding:13px; border:1px solid color-mix(in srgb,var(--theme-accent,#168fd4) 42%,var(--theme-border,#c9dde7)); border-radius:18px; background:linear-gradient(145deg,color-mix(in srgb,var(--theme-accent,#168fd4) 8%,var(--theme-surface,#fff)),var(--theme-surface-soft,#eef6f9)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); } .mechanics-live-card > span { display:grid; place-items:center; width:74px; height:74px; border-radius:18px; background:color-mix(in srgb,var(--theme-accent,#168fd4) 9%,var(--theme-surface,#fff)); } .mechanics-live-emoji { display:grid; place-items:center; width:62px; height:62px; } .mechanics-live-emoji img { width:100%; height:100%; object-fit:contain; } .mechanics-live-card small,.mechanics-live-card b,.mechanics-live-card p,.mechanics-live-card em { display:block; } .mechanics-live-card small { color:var(--theme-accent,#168fd4); font-size:7px; font-weight:900; letter-spacing:.08em; } .mechanics-live-card b { margin-top:3px; color:var(--theme-text,#173c55); font-size:15px; } .mechanics-live-card p { margin:4px 0 1px; color:var(--theme-text,#173c55); font-size:11px; font-weight:800; } .mechanics-live-card em { color:var(--theme-muted,#6d899a); font-size:8px; font-style:normal; line-height:1.35; } .mechanics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .mechanics-card { min-width:0; padding:13px; border:1px solid var(--theme-border,#c9dde7); border-radius:17px; background:var(--theme-surface-soft,#eef6f9); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } .mechanics-card header { display:flex; align-items:center; gap:9px; } .mechanics-card header > i { display:grid; place-items:center; width:39px; height:39px; flex:0 0 auto; border-radius:12px; background:color-mix(in srgb,var(--theme-accent,#168fd4) 10%,var(--theme-surface,#fff)); font-size:21px; font-style:normal; } .mechanics-card header span { min-width:0; } .mechanics-card header small,.mechanics-card header b { display:block; } .mechanics-card header small { color:#5fbe74; font-size:6px; font-weight:1000; letter-spacing:.08em; } .mechanics-card header b { margin-top:2px; overflow:hidden; color:var(--theme-text,#173c55); font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .mechanics-card > p { margin:9px 0 8px; color:var(--theme-text,#173c55); font-size:9px; font-weight:750; line-height:1.35; } .mechanics-card ul { display:grid; gap:5px; margin:0; padding:0; list-style:none; } .mechanics-card li { position:relative; padding-left:14px; color:var(--theme-muted,#6d899a); font-size:7.5px; line-height:1.35; } .mechanics-card li::before { content:'•'; position:absolute; left:2px; color:var(--theme-accent,#168fd4); font-weight:1000; } .dex-physical span em { display:block; margin-top:2px; color:var(--theme-muted,#7892a1); font-size:5.5px; font-style:normal; font-weight:700; } html[data-game-theme="dark"] .mechanics-card, html[data-game-theme="dark"] .mechanics-live-card { box-shadow:0 10px 24px rgba(0,12,20,.16),inset 0 1px 0 rgba(255,255,255,.05); } @media (max-width:760px) { .mobile-dock { grid-template-columns:repeat(8,minmax(0,1fr)) !important; } .mobile-dock b { font-size:4.5px !important; } .mechanics-grid { grid-template-columns:1fr; } .mechanics-live-card { grid-template-columns:56px minmax(0,1fr); padding:10px; } .mechanics-live-card > span { width:56px; height:56px; border-radius:14px; } .mechanics-live-emoji { width:48px; height:48px; } .mechanics-live-card b { font-size:12px; } .mechanics-card { padding:11px; } } /* v2.7.23 — species-specific size ecology in the Pokédex */ .dex-physical-profile { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:9px; } .dex-physical-profile > article { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:8px; min-height:64px; padding:9px; border:1px solid var(--theme-border,#d1e1e9); border-radius:13px; background:linear-gradient(145deg,color-mix(in srgb,var(--theme-surface-soft,#eef6f9) 96%,transparent),color-mix(in srgb,var(--theme-accent,#168fd4) 4%,var(--theme-surface,#fff))); } .dex-physical-profile > article > img,.dex-size-frequency-card header img { width:30px; height:30px; padding:5px; border-radius:10px; background:color-mix(in srgb,var(--theme-accent,#168fd4) 10%,var(--theme-surface,#fff)); color:var(--theme-accent,#168fd4); } .dex-physical-profile article span { min-width:0; } .dex-physical-profile article small,.dex-physical-profile article b,.dex-physical-profile article em { display:block; } .dex-physical-profile article small { color:var(--theme-muted,#7190a2); font-size:5.8px; font-weight:900; letter-spacing:.07em; } .dex-physical-profile article b { margin-top:2px; font-size:13px; } .dex-physical-profile article em { margin-top:2px; color:var(--theme-muted,#678597); font-size:6.5px; font-style:normal; line-height:1.3; } .dex-physical-profile .dex-size-range-card { grid-column:1/-1; grid-template-columns:34px minmax(0,1fr); } .dex-physical-profile .dex-size-frequency-card { grid-column:1/-1; display:block; min-height:0; padding:10px; } .dex-size-frequency-card > header { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .dex-size-frequency-card > header img { flex:0 0 auto; } .dex-size-distribution { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; height:76px; } .dex-size-frequency { display:grid; grid-template-rows:auto 1fr auto; justify-items:center; gap:3px; min-width:0; } .dex-size-frequency > b { color:var(--theme-text,#173c55); font-size:6.5px; } .dex-size-frequency > i { position:relative; display:flex; align-items:end; width:100%; max-width:25px; min-height:43px; overflow:hidden; border-radius:6px; background:color-mix(in srgb,var(--theme-border,#c9dde7) 60%,transparent); } .dex-size-frequency > i > em { display:block; width:100%; min-height:2px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#66db77,var(--theme-accent,#168fd4)); } .dex-size-frequency > small { color:var(--theme-muted,#738f9f); font-size:5.5px; font-weight:800; } .dex-size-frequency.is-impossible { opacity:.28; } .dex-physical-secondary { margin-top:7px; } .dex-physical-secondary span { min-height:45px; } html[data-game-theme="dark"] .dex-physical-profile > article { background:linear-gradient(145deg,rgba(15,47,60,.88),rgba(12,39,53,.78)); } html[data-game-theme="dark"] .dex-physical-profile > article > img, html[data-game-theme="dark"] .dex-size-frequency-card header img { background:rgba(44,135,181,.14); } @media (max-width:760px) { .dex-physical-profile { grid-template-columns:1fr; } .dex-physical-profile .dex-size-range-card,.dex-physical-profile .dex-size-frequency-card { grid-column:auto; } .dex-size-distribution { height:68px; gap:3px; } .dex-size-frequency > i { min-height:38px; } } /* v2.7.24 — real Pokémon emoji pack, red battle CTA and smaller Bug encounters */ .interaction-card.is-battle-action > .interaction-card__cta { box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px var(--ic-cta-shadow),0 0 0 1px rgba(255,88,88,.08); } html[data-game-theme="light"] .interaction-card.is-battle-action { --ic-visual-bg:radial-gradient(circle at 35% 30%,rgba(255,211,207,.82),rgba(235,242,244,.96)); --ic-cta-bg:linear-gradient(180deg,rgba(244,82,74,.96),rgba(197,43,48,.97)); --ic-cta-border:rgba(255,145,136,.68); --ic-cta-shadow:rgba(176,39,43,.18); } /* v2.7.25 — player interaction wheel and manual PvP */ .player-action-wheel { position:fixed; z-index:74; left:var(--player-wheel-x,50vw); top:var(--player-wheel-y,50vh); width:238px; height:238px; transform:translate(-50%,-50%) scale(.86); opacity:0; pointer-events:none; transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 18px 34px rgba(0,20,32,.28)); } .player-action-wheel.is-open { opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; } .player-action-wheel__center { position:absolute; left:50%; top:50%; display:grid; justify-items:center; align-content:center; width:112px; height:112px; padding:8px; transform:translate(-50%,-50%); border:1px solid rgba(125,203,237,.34); border-radius:50%; background:linear-gradient(160deg,rgba(7,39,52,.96),rgba(4,25,35,.96)); color:#f6fbff; box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 22px rgba(0,18,29,.24); text-align:center; } .player-action-wheel__avatar { display:grid; place-items:center; width:34px; height:34px; margin-bottom:4px; border-radius:50%; background:rgba(92,190,238,.14); color:#76d5ff; } .player-action-wheel__avatar .ui-icon { width:21px; height:21px; } .player-action-wheel__center b { max-width:92px; overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; } .player-action-wheel__center small { max-width:92px; margin-top:2px; overflow:hidden; color:rgba(210,232,242,.68); font-size:6px; text-overflow:ellipsis; white-space:nowrap; } .player-action-wheel__item { position:absolute; display:grid; place-items:center; gap:2px; width:62px; height:62px; padding:5px; border:1px solid rgba(125,200,236,.34); border-radius:50%; background:linear-gradient(155deg,rgba(13,58,75,.96),rgba(6,34,47,.96)); color:#eaf8ff; box-shadow:inset 0 1px rgba(255,255,255,.09),0 8px 18px rgba(0,19,31,.22); transition:transform .14s,border-color .14s,filter .14s; } .player-action-wheel__item:hover { transform:scale(1.08); border-color:rgba(145,220,255,.75); filter:brightness(1.08); } .player-action-wheel__item .ui-icon { width:20px; height:20px; } .player-action-wheel__item > span:last-child { font-size:6px; font-weight:850; } .player-action-wheel__item.is-profile { left:88px; } .player-action-wheel__item.is-battle { right:0; top:58px; border-color:rgba(245,99,90,.54); color:#ff9c94; } .player-action-wheel__item.is-trade { right:23px; bottom:8px; } .player-action-wheel__item.is-friend { left:23px; bottom:8px; } .player-action-wheel__item.is-wave { left:0; top:58px; font-size:19px; } html[data-game-theme="light"] .player-action-wheel__center, html[data-game-theme="light"] .player-action-wheel__item { background:linear-gradient(155deg,rgba(246,252,255,.98),rgba(222,239,247,.96)); color:#173f59; border-color:rgba(73,151,191,.3); } html[data-game-theme="light"] .player-action-wheel__center small { color:#66869a; } html[data-game-theme="light"] .player-action-wheel__item.is-battle { color:#c83c3b; border-color:rgba(209,67,63,.35); } .pvp-invite { position:fixed; z-index:95; inset:0; display:grid; place-items:center; padding:18px; background:rgba(1,14,22,.34); opacity:0; pointer-events:none; transition:opacity .16s; backdrop-filter:blur(3px); } .pvp-invite.is-open { opacity:1; pointer-events:auto; } .pvp-invite__card { width:min(390px,calc(100vw - 28px)); padding:20px; border:1px solid rgba(115,201,239,.4); border-radius:22px; background:linear-gradient(160deg,rgba(6,42,56,.98),rgba(4,26,37,.98)); color:#f4fbff; box-shadow:0 24px 62px rgba(0,15,27,.42),inset 0 1px rgba(255,255,255,.08); } .pvp-invite__card > small { color:#70d6ff; font-size:7px; font-weight:950; letter-spacing:.12em; } .pvp-invite__card > b { display:block; margin-top:6px; font-size:20px; } .pvp-invite__card > p { margin:8px 0 16px; color:rgba(219,235,243,.76); font-size:10px; line-height:1.5; } .pvp-invite__actions { display:grid; grid-template-columns:1fr 1.2fr; gap:8px; } .pvp-invite__actions button { min-height:44px; border:1px solid rgba(135,185,207,.28); border-radius:13px; background:rgba(255,255,255,.06); color:#dcecf4; font-weight:850; } .pvp-invite__actions .is-accept { border-color:rgba(245,103,93,.54); background:linear-gradient(180deg,#ef5b53,#c83238); color:#fff; box-shadow:0 7px 16px rgba(173,37,42,.22); } html[data-game-theme="light"] .pvp-invite { background:rgba(23,55,74,.22); } html[data-game-theme="light"] .pvp-invite__card { background:linear-gradient(160deg,#f7fcff,#e3f1f7); color:#173f59; border-color:#b8ddeb; } html[data-game-theme="light"] .pvp-invite__card > p { color:#617f91; } html[data-game-theme="light"] .pvp-invite__actions button:not(.is-accept) { background:#fff; color:#30546a; } .player-profile-pvp { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0; } .player-profile-pvp article { padding:12px 8px; border:1px solid var(--theme-border); border-radius:14px; background:var(--theme-surface-soft); text-align:center; } .player-profile-pvp small { display:block; color:var(--theme-muted); font-size:7px; } .player-profile-pvp b { display:block; margin-top:4px; color:var(--theme-text); font-size:19px; } .player-profile-lead { display:grid; grid-template-columns:62px 1fr; align-items:center; gap:12px; padding:12px; border:1px solid var(--theme-border); border-radius:16px; background:var(--theme-surface-soft); } .player-profile-lead > span { display:grid; place-items:center; width:62px; height:62px; border-radius:50%; background:rgba(72,178,226,.1); } .player-profile-pokemon-emoji { display:grid; place-items:center; width:100%; height:100%; } .player-profile-pokemon-emoji img { width:78%; height:78%; object-fit:contain; } .player-profile-lead small { color:var(--theme-muted); font-size:7px; font-weight:900; } .player-profile-lead b { display:block; margin-top:3px; color:var(--theme-text); font-size:14px; } .player-profile-lead p { margin:3px 0 0; color:var(--theme-muted); font-size:8px; } .player-profile-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; } .player-profile-actions button { min-height:42px; border:1px solid var(--theme-border); border-radius:13px; background:var(--theme-surface-soft); color:var(--theme-text); font-weight:800; } .player-profile-actions button:first-child { border-color:rgba(233,80,75,.38); background:color-mix(in srgb,#e84743 14%,var(--theme-surface-soft)); } .game-screen .battle-panel.is-pvp { border-color:rgba(232,78,73,.4); box-shadow:0 22px 60px rgba(42,10,15,.34),inset 0 1px rgba(255,255,255,.08); } .game-screen .battle-panel.is-pvp .battle-status small { color:#ff8f87; } .game-screen .battle-panel.is-pvp #cancelBattle { border-color:rgba(235,93,83,.45); color:#ffb0aa; } .game-screen .battle-panel.is-pvp .battle-skills button:not(:disabled):hover { border-color:#e95450; box-shadow:inset 0 0 0 1px rgba(233,84,80,.32); } @media (max-width:760px) { .player-action-wheel { left:50% !important; top:auto !important; bottom:86px; width:min(340px,calc(100vw - 18px)); height:164px; transform:translate(-50%,14px) scale(.96); } .player-action-wheel.is-open { transform:translate(-50%,0) scale(1); } .player-action-wheel__center { width:116px; height:100px; border-radius:24px; } .player-action-wheel__item { width:54px; height:54px; } .player-action-wheel__item.is-profile { left:calc(50% - 27px); top:0; } .player-action-wheel__item.is-battle { right:4px; top:54px; } .player-action-wheel__item.is-trade { right:62px; bottom:0; } .player-action-wheel__item.is-friend { left:62px; bottom:0; } .player-action-wheel__item.is-wave { left:4px; top:54px; } } @media (prefers-reduced-motion: reduce) { .player-action-wheel,.player-action-wheel__item,.pvp-invite { transition:none !important; } } .social-prototype-card { display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center; margin-top:16px; padding:14px; border:1px solid var(--theme-border); border-radius:16px; background:var(--theme-surface-soft); } .social-prototype-card > span { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:rgba(75,172,219,.12); font-size:24px; } .social-prototype-card > span .social-prototype-raster { width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(22,69,94,.2)); } .social-prototype-card b { color:var(--theme-text); font-size:12px; } .social-prototype-card p { margin:5px 0 0; color:var(--theme-muted); font-size:8px; line-height:1.5; } .panel-note { display:block; margin-top:12px; color:var(--theme-muted); font-size:7px; line-height:1.5; } /* v2.7.26 — persistent friends, three-trainer squads and richer player profiles */ .game-screen #playerProfileButton { cursor:pointer; transition:transform .14s,border-color .14s,box-shadow .14s; } .game-screen #playerProfileButton:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--role-color,#39aef4) 68%,var(--theme-border)); box-shadow:0 16px 34px rgba(0,22,35,.28),0 0 0 2px color-mix(in srgb,var(--role-color,#39aef4) 13%,transparent); } .game-screen #playerProfileButton:focus-visible { outline:2px solid color-mix(in srgb,var(--role-color,#39aef4) 78%,white); outline-offset:3px; } .party-hud { position:fixed; z-index:31; left:max(12px,env(safe-area-inset-left)); display:flex; gap:6px; max-width:430px; pointer-events:auto; } .party-hud[hidden] { display:none; } .party-hud-member { display:grid; grid-template-columns:26px minmax(0,1fr); gap:7px; align-items:center; min-width:132px; max-width:196px; min-height:42px; padding:5px 9px 5px 6px; border:1px solid rgba(82,214,196,.34); border-radius:13px; background:linear-gradient(155deg,rgba(5,43,52,.92),rgba(5,29,39,.9)); color:#effdff; box-shadow:0 8px 19px rgba(0,18,28,.22),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(10px); text-align:left; } .party-hud-member > span { display:grid; place-items:center; width:26px; height:26px; border-radius:9px; background:rgba(73,222,201,.12); font-size:14px; } .party-hud-member div { min-width:0; } .party-hud-member b,.party-hud-member small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .party-hud-member b { font-size:8px; } .party-hud-member small { margin-top:2px; color:rgba(207,236,237,.65); font-size:5.5px; } .party-hud-member.is-online { border-color:rgba(91,231,208,.54); } .party-hud-member:disabled { opacity:.58; } html[data-game-theme="light"] .party-hud-member { background:linear-gradient(155deg,rgba(245,253,253,.95),rgba(224,243,244,.92)); color:#194b54; border-color:rgba(39,159,146,.28); box-shadow:0 8px 18px rgba(48,92,102,.12),inset 0 1px #fff; } html[data-game-theme="light"] .party-hud-member small { color:#62858c; } .world-minimap-party-markers { position:absolute; inset:0; pointer-events:none; } .world-minimap-party-marker { position:absolute; width:10px; height:10px; transform:translate(-50%,-50%); border:2px solid rgba(238,255,252,.94); border-radius:50%; background:#40dac6; box-shadow:0 0 0 3px rgba(64,218,198,.2),0 0 9px rgba(64,218,198,.72); } .world-minimap-party-marker.is-leader { box-shadow:0 0 0 3px rgba(255,210,77,.2),0 0 9px rgba(255,210,77,.74); } /* More readable radial menu on desktop. */ .player-action-wheel { width:270px; height:270px; } .player-action-wheel__center { width:106px; height:106px; } .player-action-wheel__avatar { width:39px; height:39px; background:rgba(80,188,235,.13); overflow:hidden; } .player-wheel-trainer { display:block; width:36px; height:36px; border-radius:50%; background:#143f56 url('/assets/v1.4/trainers/trainer-male-walk-8dir-6f.png') 0 0/600% 800% no-repeat; } .player-wheel-trainer[data-skin="female"] { background-image:url('/assets/v1.4/trainers/trainer-female-walk-8dir-6f.png'); } .player-action-wheel__item { width:66px; height:66px; gap:3px; font-weight:800; } .player-action-wheel__item > span:first-child { display:grid; place-items:center; min-height:25px; font-size:20px; } .player-action-wheel__item > span:last-child { font-size:7px; font-weight:900; } .player-action-wheel__item.is-profile { left:102px; top:0; } .player-action-wheel__item.is-battle { right:4px; top:47px; } .player-action-wheel__item.is-trade { right:4px; bottom:47px; } .player-action-wheel__item.is-party { left:102px; bottom:0; border-color:rgba(87,222,201,.46); color:#8cf0df; } .player-action-wheel__item.is-friend { left:4px; bottom:47px; border-color:rgba(107,211,105,.4); } .player-action-wheel__item.is-wave { left:4px; top:47px; } .player-action-wheel__item.is-active-relation { border-color:rgba(89,224,135,.7); box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 0 2px rgba(89,224,135,.1),0 8px 18px rgba(0,19,31,.22); } .player-action-wheel__item.is-locked-relation { opacity:.58; } html[data-game-theme="light"] .player-action-wheel__item.is-party { color:#168d80; } .social-invite { position:fixed; z-index:96; inset:0; display:grid; place-items:center; padding:18px; background:rgba(1,14,22,.3); opacity:0; pointer-events:none; transition:opacity .16s; backdrop-filter:blur(3px); } .social-invite.is-open { opacity:1; pointer-events:auto; } .social-invite__card { position:relative; width:min(390px,calc(100vw - 28px)); padding:22px 20px 19px 84px; border:1px solid rgba(93,218,197,.38); border-radius:22px; background:linear-gradient(160deg,rgba(6,43,53,.98),rgba(4,27,37,.98)); color:#f4fbff; box-shadow:0 24px 62px rgba(0,15,27,.4),inset 0 1px rgba(255,255,255,.08); } .social-invite__emoji { position:absolute; left:20px; top:22px; display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(95,221,201,.34); border-radius:15px; background:rgba(72,218,195,.1); font-size:25px; } .social-invite__card > small { color:#6fe0ce; font-weight:950; letter-spacing:.12em; } .social-invite__card > b { display:block; margin-top:6px; font-size:19px; } .social-invite__card > p { margin:8px 0 16px; color:rgba(219,235,243,.76); font-size:9px; line-height:1.5; } .social-invite__actions { display:grid; grid-template-columns:1fr 1.35fr; gap:8px; margin-left:-64px; } .social-invite__actions button { min-height:43px; border:1px solid rgba(135,185,207,.28); border-radius:13px; background:rgba(255,255,255,.06); color:#dcecf4; font-weight:850; } .social-invite__actions .is-accept { border-color:rgba(87,222,201,.52); background:linear-gradient(180deg,#31c8b1,#168e88); color:#fff; box-shadow:0 7px 16px rgba(24,137,125,.22); } html[data-game-theme="light"] .social-invite { background:rgba(23,55,74,.2); } html[data-game-theme="light"] .social-invite__card { background:linear-gradient(160deg,rgba(248,253,255,.99),rgba(229,243,247,.98)); color:#173e55; border-color:rgba(38,158,147,.27); box-shadow:0 24px 54px rgba(35,79,104,.2),inset 0 1px #fff; } html[data-game-theme="light"] .social-invite__card > p { color:#668394; } html[data-game-theme="light"] .social-invite__actions button { color:#31586e; background:rgba(255,255,255,.65); } html[data-game-theme="light"] .social-invite__actions .is-accept { color:#fff; } .side-panel.is-social-profile { width:min(470px,calc(100vw - 24px)); } .social-profile-shell { display:grid; gap:12px; padding-bottom:22px; } .social-profile-hero { display:grid; grid-template-columns:82px 1fr; gap:14px; align-items:center; padding:14px; border:1px solid var(--theme-border); border-radius:20px; background:linear-gradient(145deg,color-mix(in srgb,var(--theme-accent) 9%,var(--theme-surface)),var(--theme-surface-soft)); } .social-profile-trainer { display:block; width:82px; height:82px; border:2px solid color-mix(in srgb,var(--theme-accent) 54%,white); border-radius:22px; background:#143f56 url('/assets/v1.4/trainers/trainer-male-walk-8dir-6f.png') 0 0/600% 800% no-repeat; box-shadow:0 9px 20px rgba(0,24,38,.16); } .social-profile-trainer[data-skin="female"] { background-image:url('/assets/v1.4/trainers/trainer-female-walk-8dir-6f.png'); } .social-profile-hero small { color:var(--theme-accent); font-size:7px; font-weight:950; letter-spacing:.08em; } .social-profile-hero h2 { margin:3px 0 4px; color:var(--theme-text); font-size:24px; line-height:1.04; } .social-profile-hero p { margin:0; color:var(--theme-muted); font-size:9px; } .social-profile-section { display:grid; gap:9px; padding:13px; border:1px solid var(--theme-border); border-radius:17px; background:var(--theme-surface-soft); } .social-profile-section.is-soft { border-style:dashed; } .social-profile-section > header { display:flex; justify-content:space-between; gap:10px; align-items:center; } .social-profile-section > header span small,.social-profile-section > header span b { display:block; } .social-profile-section > header small { color:var(--theme-muted); font-size:6.5px; font-weight:900; letter-spacing:.08em; } .social-profile-section > header b { margin-top:2px; color:var(--theme-text); font-size:12px; } .social-profile-section > header em { padding:4px 7px; border-radius:999px; background:color-mix(in srgb,var(--theme-accent) 10%,transparent); color:var(--theme-accent); font-size:7px; font-style:normal; font-weight:900; } .social-profile-section > p,.social-profile-empty { margin:0; color:var(--theme-muted); font-size:8px; line-height:1.5; } .social-team-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .social-team-pokemon { display:grid; grid-template-columns:42px 1fr; gap:8px; align-items:center; min-width:0; padding:7px; border:1px solid var(--theme-border); border-radius:13px; background:var(--theme-surface); } .social-team-pokemon.is-lead { border-color:color-mix(in srgb,var(--theme-accent) 55%,var(--theme-border)); } .social-team-pokemon > span { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:color-mix(in srgb,var(--theme-accent) 8%,transparent); } .social-team-emoji,.social-team-emoji img { width:100%; height:100%; object-fit:contain; } .social-team-pokemon div { min-width:0; } .social-team-pokemon small,.social-team-pokemon b,.social-team-pokemon em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .social-team-pokemon small { color:var(--theme-accent); font-size:5.5px; font-weight:900; } .social-team-pokemon b { margin-top:2px; color:var(--theme-text); font-size:8px; } .social-team-pokemon em { margin-top:2px; color:var(--theme-muted); font-size:6px; font-style:normal; } .social-reward-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .social-reward { display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid var(--theme-border); border-radius:12px; background:var(--theme-surface); opacity:.48; } .social-reward.is-unlocked { opacity:1; border-color:color-mix(in srgb,#f0c447 38%,var(--theme-border)); } .social-reward i { font-size:17px; font-style:normal; } .social-reward b { color:var(--theme-text); } .social-friend-list,.social-party-list { display:grid; gap:6px; } .social-friend-list button,.social-party-list button { display:grid; grid-template-columns:20px 1fr auto; gap:7px; align-items:center; min-height:38px; padding:6px 8px; border:1px solid var(--theme-border); border-radius:11px; background:var(--theme-surface); color:var(--theme-text); text-align:left; } .social-friend-list button > b,.social-party-list button > b { overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; } .social-friend-list button > small,.social-party-list button > small { color:var(--theme-muted); font-size:6px; } .social-status-dot { width:8px; height:8px; margin-left:5px; border-radius:50%; background:#81919a; } .social-status-dot.is-online { background:#57d86a; box-shadow:0 0 0 3px rgba(87,216,106,.12); } .social-danger-button { min-height:36px; border:1px solid color-mix(in srgb,#e65a55 36%,var(--theme-border)); border-radius:11px; background:color-mix(in srgb,#e65a55 7%,var(--theme-surface)); color:#d95450; font-size:7px; font-weight:850; } .player-profile-actions-v2726 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .player-profile-actions-v2726 button { min-height:40px; border:1px solid var(--theme-border); border-radius:12px; background:var(--theme-surface-soft); color:var(--theme-text); font-size:7px; font-weight:850; } .player-profile-actions-v2726 button.is-battle { border-color:rgba(224,77,71,.35); color:#e35a55; } .player-profile-actions-v2726 button:disabled { opacity:.45; } @media (max-width:760px) { .party-hud { top:max(59px,calc(env(safe-area-inset-top) + 56px)); left:max(7px,env(safe-area-inset-left)); max-width:calc(100vw - 100px); gap:4px; } .party-hud-member { min-width:0; width:116px; min-height:35px; grid-template-columns:22px minmax(0,1fr); padding:4px 6px 4px 4px; border-radius:11px; } .party-hud-member > span { width:22px; height:22px; border-radius:8px; font-size:12px; } .party-hud-member b { font-size:7px; } .party-hud-member small { font-size:5px; } /* On phones the radial wheel becomes a thumb-friendly bottom action sheet. */ .player-action-wheel { left:50% !important; top:auto !important; bottom:calc(72px + env(safe-area-inset-bottom)); width:min(356px,calc(100vw - 16px)); height:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:62px 8px 8px; transform:translate(-50%,12px) scale(.98); border:1px solid rgba(113,202,233,.3); border-radius:20px; background:linear-gradient(155deg,rgba(5,39,52,.96),rgba(4,26,36,.96)); filter:drop-shadow(0 16px 28px rgba(0,18,28,.32)); } .player-action-wheel.is-open { transform:translate(-50%,0) scale(1); } .player-action-wheel__center { left:8px; right:8px; top:8px; width:auto; height:46px; transform:none; display:grid; grid-template-columns:36px 1fr; grid-template-rows:1fr 1fr; justify-items:start; align-content:center; border-radius:13px; text-align:left; } .player-action-wheel__avatar { grid-row:1/3; width:34px; height:34px; margin:0 7px 0 0; } .player-wheel-trainer { width:31px; height:31px; } .player-action-wheel__center b,.player-action-wheel__center small { max-width:230px; } .player-action-wheel__center b { font-size:9px; } .player-action-wheel__center small { font-size:6px; } .player-action-wheel__item { position:static; width:auto; height:48px; border-radius:13px; display:flex; justify-content:center; gap:6px; } .player-action-wheel__item > span:first-child { min-height:0; font-size:17px; } .player-action-wheel__item > span:last-child { font-size:7px; } html[data-game-theme="light"] .player-action-wheel { background:linear-gradient(155deg,rgba(247,252,255,.98),rgba(226,241,248,.98)); border-color:rgba(67,151,191,.28); } .side-panel.is-social-profile { width:calc(100vw - 12px); } .social-profile-hero { grid-template-columns:62px 1fr; gap:10px; padding:10px; } .social-profile-trainer { width:62px; height:62px; border-radius:18px; } .social-profile-hero h2 { font-size:20px; } .social-team-grid,.social-reward-grid { grid-template-columns:1fr 1fr; } .social-profile-section { padding:10px; } .social-invite__card { padding-left:72px; } .social-invite__emoji { left:15px; width:43px; height:43px; } .social-invite__actions { margin-left:-52px; } } @media (prefers-reduced-motion:reduce) { #playerProfileButton,.social-invite,.player-action-wheel,.player-action-wheel__item { transition:none!important; animation:none!important; } } .player-action-wheel__item:disabled { opacity:.5; cursor:default; filter:saturate(.65); } .player-action-wheel__item:disabled:hover { transform:none; filter:saturate(.65); } /* v2.7.27 — social UI polish: animated invites, left-side profiles and teammate identity highlights */ .social-invite { background:rgba(4,20,30,.26); backdrop-filter:blur(7px); } .social-invite.is-open .social-invite__card { animation:socialInviteCardIn .32s cubic-bezier(.18,.84,.24,1.08) both; } .social-invite__card { display:grid; grid-template-columns:62px minmax(0,1fr); grid-template-areas: "emoji eyebrow" "emoji title" "actions actions"; column-gap:14px; width:min(430px,calc(100vw - 28px)); padding:20px; border-radius:24px; overflow:visible; } .social-invite__emoji { position:relative; left:auto; top:auto; grid-area:emoji; align-self:center; width:58px; height:58px; border-radius:18px; font-size:30px; transform-origin:50% 70%; } .social-invite.is-open .social-invite__emoji { animation:socialInviteEmoji .78s cubic-bezier(.2,.75,.25,1.15) .06s both; } .social-invite__emoji::before, .social-invite__emoji::after { content:'✦'; position:absolute; color:#77ead8; font-size:11px; opacity:0; } .social-invite__emoji::before { right:-8px; top:-8px; } .social-invite__emoji::after { left:-7px; bottom:-5px; font-size:8px; } .social-invite.is-open .social-invite__emoji::before { animation:socialInviteSpark .9s ease .24s both; } .social-invite.is-open .social-invite__emoji::after { animation:socialInviteSpark .9s ease .4s both; } .social-invite__card > small { grid-area:eyebrow; align-self:end; font-size:7px; } .social-invite__card > b { grid-area:title; align-self:start; min-width:0; margin-top:4px; overflow-wrap:anywhere; font-size:20px; line-height:1.12; } .social-invite__card > p { display:none!important; } .social-invite__actions { grid-area:actions; grid-template-columns:1fr 1.2fr; gap:10px; margin:18px 0 0; } .social-invite__actions button { min-height:46px; padding:0 14px; border-radius:14px; font-size:10px; } .social-invite__actions .is-accept { border-color:#42c9b4!important; background:linear-gradient(180deg,#35cdb4,#158d85)!important; color:#fff!important; text-shadow:0 1px 1px rgba(0,0,0,.12); box-shadow:0 8px 18px rgba(24,137,125,.24),inset 0 1px rgba(255,255,255,.28)!important; } .social-invite__actions .is-accept:hover { transform:translateY(-1px); filter:brightness(1.05); } .social-invite[data-invite-type="party"] .social-invite__emoji { border-color:rgba(255,210,77,.46); background:rgba(255,210,77,.11); } .social-invite[data-invite-type="party"] .social-invite__emoji::before, .social-invite[data-invite-type="party"] .social-invite__emoji::after { color:#ffd24d; } @keyframes socialInviteCardIn { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } } @keyframes socialInviteEmoji { 0% { opacity:0; transform:scale(.65) rotate(-10deg); } 56% { opacity:1; transform:scale(1.12) rotate(7deg); } 76% { transform:scale(.96) rotate(-3deg); } 100% { opacity:1; transform:scale(1) rotate(0); } } @keyframes socialInviteSpark { 0% { opacity:0; transform:scale(.3) rotate(0); } 45% { opacity:1; transform:scale(1.25) rotate(80deg); } 100% { opacity:0; transform:scale(.65) rotate(140deg); } } /* Social profile is a dedicated left drawer on desktop. */ @media (min-width:761px) and (pointer:fine) { .game-screen .side-panel.is-social-profile { left:max(18px,env(safe-area-inset-left)); right:auto; top:max(78px,calc(env(safe-area-inset-top) + 74px)); bottom:18px; width:min(540px,calc(100vw - 130px)); padding:20px; transform:translateX(calc(-100% - 44px)); border-radius:24px; } .game-screen .side-panel.is-social-profile.is-open { transform:none; } } .social-profile-shell-v2727 { gap:10px; padding:0 0 12px; } .social-profile-hero-v2727 { grid-template-columns:84px minmax(0,1fr); min-height:112px; padding:13px; overflow:hidden; } .social-profile-hero-v2727 > div { min-width:0; } .social-profile-hero-v2727 h2 { max-width:100%; margin:3px 0 5px; overflow:hidden; font-size:clamp(21px,2vw,28px); line-height:1.05; text-overflow:ellipsis; white-space:nowrap; } .social-profile-hero-v2727.is-party-profile { border-color:rgba(74,218,199,.56); box-shadow:inset 3px 0 #4adac7,0 8px 18px rgba(23,129,120,.08); } .social-profile-hero-v2727.is-friend-profile { border-color:rgba(91,203,104,.38); } .social-profile-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:sticky; top:-1px; z-index:3; padding:4px 0 6px; background:linear-gradient(180deg,var(--theme-surface) 65%,transparent); } .social-profile-tabs button { display:flex; align-items:center; justify-content:center; gap:6px; padding:0 8px; border:1px solid var(--theme-border); background:var(--theme-surface-soft); color:var(--theme-muted); } .social-profile-tabs button span { font-size:14px; } .social-profile-tabs button.is-active { border-color:color-mix(in srgb,var(--theme-accent) 58%,var(--theme-border)); background:color-mix(in srgb,var(--theme-accent) 11%,var(--theme-surface)); color:var(--theme-text); box-shadow:inset 0 1px rgba(255,255,255,.08); } .social-profile-tab-body { display:grid; gap:10px; animation:socialProfileTabIn .18s ease both; } @keyframes socialProfileTabIn { from { opacity:.25; transform:translateY(3px); } to { opacity:1; transform:none; } } .player-profile-pvp-v2727 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:0; } .player-profile-pvp-v2727 article { min-height:58px; padding:9px 6px; border-radius:14px; } .player-profile-pvp-v2727 article b { margin-top:4px; font-size:18px; } .social-profile-tab-card { min-height:0; } .social-party-card { min-height:0; } .player-profile-actions-v2727 { grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; } .player-profile-actions-v2727 button { min-height:46px; font-size:8px; } /* Teammates are identified by their nameplates, not floor circles. */ .party-hud { top:max(16px,env(safe-area-inset-top)); left:max(235px,calc(env(safe-area-inset-left) + 225px)); gap:7px; } .party-hud-member { min-width:142px; border-width:2px; border-color:#4adac7; box-shadow:0 8px 20px rgba(0,18,28,.22),0 0 0 2px rgba(74,218,199,.08),inset 0 1px rgba(255,255,255,.07); } .party-hud-member.is-online { border-color:#56e1cf; } .party-hud-member > span { background:rgba(86,225,207,.17); } /* Minimap party markers stay above every map layer and are visible to both sides. */ .world-minimap-party-markers { z-index:8; } .world-minimap-party-marker { z-index:9; display:grid; place-items:center; width:16px; height:16px; border:2px solid #f5fffd; background:#34d5c2; box-shadow:0 0 0 4px rgba(52,213,194,.22),0 0 13px rgba(52,213,194,.9); } .world-minimap-party-marker > span { display:grid; place-items:center; width:100%; height:100%; color:#073c3a; font:950 7px/1 system-ui; } .world-minimap-party-marker.is-leader { background:#ffd24d; border-color:#fffdf0; } .world-minimap-party-marker.is-leader > span { font-size:8px; } @keyframes minimapPartyPulse { 50% { transform:translate(-50%,-50%) scale(1.12); filter:brightness(1.08); } } @media (max-width:760px) { .social-invite__card { grid-template-columns:52px minmax(0,1fr); width:min(360px,calc(100vw - 18px)); padding:16px; border-radius:20px; } .social-invite__emoji { width:48px; height:48px; border-radius:15px; font-size:26px; } .social-invite__card > b { font-size:17px; } .social-invite__actions { margin-top:14px; gap:7px; } .social-invite__actions button { min-height:44px; font-size:9px; } .social-profile-hero-v2727 { grid-template-columns:62px minmax(0,1fr); min-height:86px; } .social-profile-hero-v2727 h2 { font-size:20px; } .social-profile-tabs button { min-height:36px; padding:0 5px; } .social-profile-tabs button span { font-size:12px; } .social-profile-tabs button b { font-size:7px; } .player-profile-pvp-v2727 { grid-template-columns:repeat(2,minmax(0,1fr)); } .party-hud { top:max(58px,calc(env(safe-area-inset-top) + 55px)); left:max(7px,env(safe-area-inset-left)); } .party-hud-member { width:118px; min-width:0; min-height:36px; border-width:1px; } .world-minimap-party-marker { width:13px; height:13px; border-width:2px; } .world-minimap-party-marker > span { font-size:6px; } } @media (prefers-reduced-motion:reduce) { .social-invite.is-open .social-invite__card, .social-invite.is-open .social-invite__emoji, .social-invite.is-open .social-invite__emoji::before, .social-invite.is-open .social-invite__emoji::after, .social-profile-tab-body, .world-minimap-party-marker { animation:none!important; } } @media (max-width:1180px) and (min-width:761px) { .party-hud { top:max(76px,calc(env(safe-area-inset-top) + 72px)); left:max(14px,env(safe-area-inset-left)); } .party-hud-member { min-width:132px; } } /* v2.7.28 — friend yellow identity, purple teammates, stacked partner HUD and clearer minimap relations */ .party-hud { top:max(82px,calc(env(safe-area-inset-top) + 78px)); left:max(18px,env(safe-area-inset-left)); flex-direction:column; align-items:flex-start; gap:5px; width:236px; max-width:236px; } .party-hud-member { grid-template-columns:38px minmax(0,1fr); width:100%; min-width:0; max-width:none; min-height:48px; padding:5px 9px 5px 5px; border:2px solid rgba(183,124,255,.82); border-radius:14px; background:linear-gradient(155deg,rgba(62,29,96,.96),rgba(38,18,67,.94)); color:#fff8ff; box-shadow:0 9px 22px rgba(70,30,122,.32),0 0 0 2px rgba(183,124,255,.1),inset 0 1px rgba(255,255,255,.09); } .party-hud-member.is-online { border-color:#b77cff; } .party-hud-member.is-leader { border-color:#d7a7ff; box-shadow:0 9px 22px rgba(70,30,122,.34),0 0 0 2px rgba(255,210,77,.12),inset 0 1px rgba(255,255,255,.09); } .party-hud-avatar, .social-party-avatar { position:relative; display:block; overflow:hidden; border:1px solid rgba(226,201,255,.62); background:#1d3150 url('/assets/v1.4/trainers/trainer-male-walk-8dir-6f.png') 0 0/600% 800% no-repeat; } .party-hud-avatar { width:36px; height:36px; border-radius:11px; } .social-party-avatar { width:30px; height:30px; border-radius:9px; } .party-hud-avatar[data-skin="female"],.social-party-avatar[data-skin="female"] { background-image:url('/assets/v1.4/trainers/trainer-female-walk-8dir-6f.png'); } .party-hud-avatar img,.social-party-avatar img { position:absolute; right:-2px; bottom:-2px; width:16px; height:16px; filter:drop-shadow(0 1px 2px rgba(28,10,49,.45)); } .party-hud-avatar i,.social-party-avatar i { position:absolute; left:1px; top:0; font-size:8px; font-style:normal; } .party-hud-member > div { min-width:0; } .party-hud-member .party-hud-relation { margin:0 0 1px; color:#d8b6ff; font-size:5px; font-weight:950; letter-spacing:.08em; } .party-hud-member b { color:#fff; font-size:8.5px; } .party-hud-member b em { margin-left:3px; color:#8fe990; font-size:7px; font-style:normal; } .party-hud-member > div > small:last-child { color:rgba(239,224,255,.7); font-size:5.5px; } html[data-game-theme="light"] .party-hud-member { border-color:#a56cf1; background:linear-gradient(155deg,rgba(245,235,255,.98),rgba(229,211,251,.96)); color:#462367; box-shadow:0 8px 18px rgba(92,55,135,.18),0 0 0 2px rgba(164,108,241,.08),inset 0 1px #fff; } html[data-game-theme="light"] .party-hud-member .party-hud-relation { color:#7c45bd; } html[data-game-theme="light"] .party-hud-member b { color:#40205e; } html[data-game-theme="light"] .party-hud-member > div > small:last-child { color:#765f88; } /* Friend and teammate identity inside social profiles. */ .social-friend-list button,.social-party-list button { grid-template-columns:32px minmax(0,1fr) auto; min-height:44px; } .social-friend-icon { position:relative; display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(238,193,57,.48); border-radius:10px; background:rgba(255,210,77,.13); } .social-friend-icon > img { width:24px; height:24px; } .social-friend-icon .social-status-dot { position:absolute; right:-2px; bottom:-2px; width:7px; height:7px; margin:0; border:2px solid var(--theme-surface); } .social-party-list .social-party-avatar { background-color:#39225d; } .social-profile-relation { display:inline-flex; align-items:center; gap:5px; width:max-content; margin-top:6px; padding:4px 8px 4px 5px; border-radius:999px; font-size:7px; font-weight:900; } .social-profile-relation img { width:18px; height:18px; } .social-profile-relation.is-friend { border:1px solid rgba(232,188,49,.48); background:rgba(255,210,77,.13); color:#b8890b; } .social-profile-relation.is-party { border:1px solid rgba(166,105,242,.55); background:rgba(151,86,231,.13); color:#b57cff; } .social-profile-hero-v2727.is-friend-profile { border-color:rgba(232,188,49,.58); box-shadow:inset 3px 0 #e8bc31,0 8px 18px rgba(152,111,14,.08); } .social-profile-hero-v2727.is-party-profile { border-color:rgba(171,110,247,.66); box-shadow:inset 3px 0 #a96df3,0 8px 18px rgba(91,46,145,.12); } html[data-game-theme="light"] .social-profile-relation.is-friend { color:#765607; background:rgba(255,224,111,.3); } html[data-game-theme="light"] .social-profile-relation.is-party { color:#6c35a8; background:rgba(172,117,239,.18); } /* Minimap: friends are warm yellow; teammates are intentionally much stronger purple. */ .world-minimap-friend-markers,.world-minimap-party-markers { position:absolute; inset:0; pointer-events:none; } .world-minimap-friend-markers { z-index:7; } .world-minimap-party-markers { z-index:9; } .world-minimap-friend-marker,.world-minimap-party-marker { position:absolute; display:grid; place-items:center; transform:translate(-50%,-50%); border-radius:50%; } .world-minimap-friend-marker { width:13px; height:13px; border:2px solid #fffdf0; background:#ffd24d; box-shadow:0 0 0 3px rgba(255,210,77,.2),0 0 10px rgba(255,196,48,.78); } .world-minimap-friend-marker img { width:10px; height:10px; } .world-minimap-party-marker { z-index:10; width:18px; height:18px; border:2px solid #fbf6ff; background:#9658ed; box-shadow:0 0 0 4px rgba(150,88,237,.26),0 0 15px rgba(150,88,237,.95); animation:minimapPartyPulse 1.65s ease-in-out infinite; } .world-minimap-party-marker img { width:14px; height:14px; } .world-minimap-party-marker > span { position:absolute; top:-8px; right:-7px; width:auto; height:auto; color:#ffd24d; font-size:8px; filter:drop-shadow(0 1px 2px #3c1b56); } .world-minimap-party-marker > span .world-minimap-leader-raster { display:block; width:10px; height:10px; object-fit:contain; } .world-minimap-party-marker.is-leader { background:#8f50e8; border-color:#fff7dc; box-shadow:0 0 0 4px rgba(150,88,237,.26),0 0 0 6px rgba(255,210,77,.13),0 0 16px rgba(150,88,237,.95); } @media (max-width:760px) { .party-hud { top:max(60px,calc(env(safe-area-inset-top) + 57px)); left:max(8px,env(safe-area-inset-left)); width:168px; max-width:168px; gap:4px; } .party-hud-member { grid-template-columns:31px minmax(0,1fr); min-height:40px; padding:4px 6px 4px 4px; border-radius:12px; } .party-hud-avatar { width:29px; height:29px; border-radius:9px; } .party-hud-avatar img { width:13px; height:13px; } .party-hud-member .party-hud-relation { font-size:4.5px; } .party-hud-member b { font-size:7px; } .party-hud-member b em { font-size:6px; } .party-hud-member > div > small:last-child { display:none; } .world-minimap-friend-marker { width:11px; height:11px; } .world-minimap-party-marker { width:16px; height:16px; } } /* v2.7.31 — referral program, rich rewards and profile invite tracking */ .referral-auth-field > span { display:flex; align-items:center; justify-content:space-between; gap:8px; } .referral-auth-field > span em { color:#7993a5; font-size:8px; font-style:normal; font-weight:700; text-transform:none; letter-spacing:0; } .referral-program-card { overflow:hidden; } .referral-program-card > header em { min-width:42px; color:#8359df; font-size:10px; font-weight:900; text-align:right; } .referral-reward-summary { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:11px; margin-top:10px; padding:11px; border:1px solid color-mix(in srgb,#8d63ec 34%,var(--theme-border)); border-radius:15px; background:linear-gradient(135deg,color-mix(in srgb,#8d63ec 10%,var(--theme-surface)),var(--theme-surface)); } .referral-gem-mark { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:linear-gradient(145deg,#f4eaff,#e3d2ff); font-size:24px; box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(105,70,170,.12); } .referral-reward-summary b { display:block; color:var(--theme-text); font-size:10px; } .referral-reward-summary p { margin:3px 0 0; color:var(--theme-muted); font-size:8px; line-height:1.4; } .referral-reward-summary > strong { color:#7e50d9; font-size:13px; white-space:nowrap; } .referral-link-box { display:grid; gap:7px; margin-top:10px; padding:11px; border:1px dashed color-mix(in srgb,#5baee1 45%,var(--theme-border)); border-radius:14px; background:color-mix(in srgb,#5baee1 5%,var(--theme-surface)); } .referral-link-box > small,.referral-progress-list > small { color:var(--theme-muted); font-size:7px; font-weight:900; letter-spacing:.08em; } .referral-link-box code { display:block; overflow:hidden; padding:8px 9px; border-radius:10px; background:color-mix(in srgb,var(--theme-text) 6%,transparent); color:var(--theme-text); font:700 8px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; } .referral-link-box > div { display:flex; gap:7px; } .referral-link-box button { flex:1; min-height:32px; border:1px solid var(--theme-border); border-radius:10px; background:var(--theme-surface); color:var(--theme-text); font-size:8px; font-weight:850; cursor:pointer; } .referral-link-box button:last-child { border-color:#8b65df; background:linear-gradient(145deg,#8e67e9,#7450ce); color:#fff; } .referral-link-box > span { color:var(--theme-muted); font-size:8px; } .referral-link-box > span b { color:#8257db; letter-spacing:.08em; } .referral-progress-list { display:grid; gap:7px; margin-top:12px; } .referral-invite-row { display:grid; grid-template-columns:34px minmax(0,1fr) 38px; align-items:center; gap:8px; min-height:50px; padding:7px 8px; border:1px solid var(--theme-border); border-radius:12px; background:var(--theme-surface); } .referral-invite-avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:color-mix(in srgb,#8d63ec 10%,var(--theme-surface)); font-size:17px; } .referral-invite-row b { display:block; overflow:hidden; color:var(--theme-text); font-size:9px; text-overflow:ellipsis; white-space:nowrap; } .referral-invite-row small { display:block; margin-top:2px; color:var(--theme-muted); font-size:7px; } .referral-invite-row i { display:block; height:5px; margin-top:5px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--theme-text) 8%,transparent); } .referral-invite-row i em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#69bdea,#8b5cf6); } .referral-invite-row strong { color:#6b8293; font-size:9px; text-align:right; } .referral-invite-row.is-complete { border-color:color-mix(in srgb,#9b6aef 48%,var(--theme-border)); background:linear-gradient(135deg,color-mix(in srgb,#8d63ec 8%,var(--theme-surface)),var(--theme-surface)); } .referral-invite-row.is-complete strong { color:#8557db; } .referral-debug-button { width:100%; margin-top:11px; min-height:35px; border:1px dashed color-mix(in srgb,#ef9b42 55%,var(--theme-border)); border-radius:11px; background:color-mix(in srgb,#ef9b42 7%,var(--theme-surface)); color:#a46624; font-size:8px; font-weight:900; cursor:pointer; } .reward-celebration { position:fixed; z-index:190; top:max(22px,env(safe-area-inset-top)); left:50%; display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:14px; width:min(470px,calc(100vw - 28px)); min-height:104px; padding:14px 16px; transform:translate(-50%,-24px) scale(.96); visibility:hidden; opacity:0; pointer-events:none; border:1px solid rgba(178,139,255,.56); border-radius:21px; background:linear-gradient(145deg,rgba(11,39,55,.97),rgba(22,33,54,.97)); color:#fff; box-shadow:0 24px 60px rgba(0,17,32,.38),0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:blur(18px); transition:opacity .24s,transform .24s,visibility .24s; } .reward-celebration.is-open { visibility:visible; opacity:1; transform:translate(-50%,0) scale(1); animation:rewardCelebrationOpen .42s cubic-bezier(.17,.85,.3,1.15) both; } .reward-celebration.is-leaving { opacity:0; transform:translate(-50%,-7px) scale(.985); } .reward-celebration-burst { display:grid; place-items:center; width:62px; height:62px; border-radius:19px; background:radial-gradient(circle at 35% 30%,#f7eaff,#8c5ce7 65%,#5631a8); font-size:31px; box-shadow:0 0 24px rgba(153,104,244,.36),inset 0 1px 0 rgba(255,255,255,.55); animation:rewardGemFloat 1.8s ease-in-out infinite; } .reward-celebration small { display:block; color:#b99af8; font-size:7px; font-weight:950; letter-spacing:.13em; } .reward-celebration h3 { margin:3px 0 2px; color:#fff; font-size:17px; line-height:1.08; } .reward-celebration p { margin:0; color:rgba(223,235,244,.82); font-size:9px; line-height:1.4; } .reward-celebration-items { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; } .reward-celebration-item { display:inline-flex; align-items:center; gap:5px; padding:5px 8px 5px 5px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.07); } .reward-celebration-icon { width:26px; height:26px; } .reward-celebration-item b { color:#fff; font-size:8px; } .reward-celebration-item strong { color:#e6d2ff; font-size:9px; } @keyframes rewardCelebrationOpen { 0%{transform:translate(-50%,-26px) scale(.94);filter:brightness(.85)} 65%{transform:translate(-50%,3px) scale(1.012);filter:brightness(1.08)} 100%{transform:translate(-50%,0) scale(1);filter:none} } @keyframes rewardGemFloat { 50%{transform:translateY(-2px) rotate(2deg);filter:brightness(1.08)} } html[data-game-theme="light"] .reward-celebration { background:linear-gradient(145deg,rgba(248,252,255,.98),rgba(237,242,252,.98)); color:#173f56; border-color:rgba(135,95,216,.34); box-shadow:0 20px 46px rgba(44,79,105,.2),inset 0 1px 0 #fff; } html[data-game-theme="light"] .reward-celebration h3,html[data-game-theme="light"] .reward-celebration-item b { color:#173f56; } html[data-game-theme="light"] .reward-celebration p { color:#648094; } html[data-game-theme="light"] .reward-celebration-item { border-color:#d8e3ee; background:#fff; } html[data-game-theme="light"] .reward-celebration-item strong { color:#7950c7; } @media (max-width:760px) { .reward-celebration { grid-template-columns:50px minmax(0,1fr); width:calc(100vw - 18px); min-height:86px; padding:10px 11px; border-radius:17px; } .reward-celebration-burst { width:48px; height:48px; border-radius:15px; font-size:24px; } .reward-celebration h3 { font-size:14px; } .reward-celebration p { font-size:8px; } .referral-reward-summary { grid-template-columns:42px minmax(0,1fr); } .referral-reward-summary > strong { grid-column:2; } } @media (prefers-reduced-motion:reduce) { .reward-celebration.is-open,.reward-celebration-burst { animation:none !important; } } /* v2.7.32 — full inventory + protected lots + live secure trading */ .game-screen .side-panel.is-inventory-panel { width:min(820px,calc(100vw - 40px)); padding:20px; } .inventory-shell-v2732 { display:grid; gap:14px; min-height:100%; } .inventory-header-v2732 { display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,300px); gap:18px; align-items:end; } .inventory-header-v2732 .panel-title { margin:2px 0 4px; } .inventory-header-v2732 p { margin:0; color:var(--theme-muted,#668499); font-size:12px; } .inventory-search { display:flex; align-items:center; gap:8px; min-height:42px; padding:0 12px; border:1px solid var(--theme-border,#c8dce7); border-radius:14px; background:var(--theme-card,#f7fbfd); } .inventory-search span { font-size:18px; opacity:.72; } .inventory-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--theme-text,#183d55); font:700 12px/1 system-ui; } .inventory-tabs-v2732 { display:flex; gap:7px; overflow:auto hidden; padding:2px 1px 6px; scrollbar-width:thin; } .inventory-tabs-v2732 button { flex:0 0 auto; display:flex; align-items:center; gap:6px; min-height:38px; padding:0 10px; border:1px solid var(--theme-border,#cbdde7); border-radius:13px; background:var(--theme-card,#f7fbfd); color:var(--theme-muted,#58788d); } .inventory-tabs-v2732 button i { font-style:normal; font-size:15px; } .inventory-tabs-v2732 button b { font-size:9px; } .inventory-tabs-v2732 button small { display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:color-mix(in srgb,var(--theme-accent,#36a9ea) 10%,transparent); font-size:8px; } .inventory-tabs-v2732 button.is-active { border-color:var(--theme-accent,#2b9fe9); color:var(--theme-text,#163f5b); box-shadow:0 5px 15px color-mix(in srgb,var(--theme-accent,#2b9fe9) 14%,transparent); } .inventory-layout-v2732 { display:grid; grid-template-columns:minmax(260px,.92fr) minmax(310px,1.08fr); gap:14px; min-height:0; } .inventory-list-v2732 { display:grid; align-content:start; gap:8px; max-height:calc(100vh - 270px); overflow:auto; padding-right:4px; } .inventory-card-v2732 { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:11px; align-items:center; min-height:72px; padding:9px 11px; border:1px solid var(--theme-border,#d1e1ea); border-radius:16px; background:color-mix(in srgb,var(--theme-card,#fff) 94%,transparent); color:var(--theme-text,#173e58); text-align:left; cursor:pointer; } .inventory-card-v2732:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--theme-accent,#2d9de3) 55%,var(--theme-border,#d1e1ea)); } .inventory-card-v2732.is-selected { border-color:var(--theme-accent,#269ce3); box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent,#269ce3) 11%,transparent); } .inventory-card-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background:color-mix(in srgb,var(--theme-accent,#2d9de3) 7%,var(--theme-card,#fff)); } .inventory-card-icon .item-icon { width:42px; height:42px; } .inventory-card-copy { display:grid; gap:3px; min-width:0; } .inventory-card-copy b { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .inventory-card-copy small { overflow:hidden; color:var(--theme-muted,#698397); font-size:8px; text-overflow:ellipsis; white-space:nowrap; } .inventory-card-copy i { color:color-mix(in srgb,var(--theme-accent,#269ce3) 72%,var(--theme-text,#173e58)); font-size:7px; font-style:normal; font-weight:800; } .inventory-card-v2732 > em { padding:5px 8px; border-radius:999px; background:color-mix(in srgb,var(--theme-text,#173e58) 6%,transparent); font-size:10px; font-style:normal; font-weight:900; } .inventory-detail-v2732 { min-width:0; } .inventory-detail-card,.inventory-detail-empty { min-height:360px; padding:17px; border:1px solid var(--theme-border,#d1e1ea); border-radius:20px; background:color-mix(in srgb,var(--theme-card,#fff) 96%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); } .inventory-detail-empty { display:grid; place-items:center; align-content:center; gap:8px; color:var(--theme-muted,#698397); text-align:center; } .inventory-detail-empty span { font-size:42px; } .inventory-detail-hero { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:13px; align-items:start; } .inventory-detail-hero > span { display:grid; place-items:center; width:72px; height:72px; border-radius:18px; background:color-mix(in srgb,var(--theme-accent,#269ce3) 8%,var(--theme-card,#fff)); } .inventory-detail-hero .item-icon { width:58px; height:58px; } .inventory-detail-hero small { color:var(--theme-accent,#269ce3); font-size:8px; font-weight:900; letter-spacing:.07em; } .inventory-detail-hero h3 { margin:3px 0 5px; font-size:20px; } .inventory-detail-hero p { margin:0; color:var(--theme-muted,#698397); font-size:10px; line-height:1.45; } .inventory-detail-hero > strong { font-size:15px; } .inventory-policy-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:17px; } .inventory-policy-grid span { display:grid; grid-template-columns:24px 1fr; grid-template-rows:auto auto; gap:1px 6px; min-height:51px; padding:8px; border:1px solid var(--theme-border,#d4e2ea); border-radius:13px; } .inventory-policy-grid span i { grid-row:1/3; display:grid; place-items:center; font-style:normal; font-size:17px; } .inventory-policy-grid span b { font-size:8px; } .inventory-policy-grid span small { color:var(--theme-muted,#718a9a); font-size:8px; } .inventory-policy-grid .is-ok { border-color:color-mix(in srgb,#42c788 42%,var(--theme-border,#d4e2ea)); } .inventory-policy-grid .is-lock { opacity:.56; } .inventory-protected-note { display:grid; grid-template-columns:36px 1fr; gap:10px; align-items:center; margin-top:12px; padding:10px; border:1px solid color-mix(in srgb,#e3a334 34%,var(--theme-border,#d4e2ea)); border-radius:14px; background:color-mix(in srgb,#ffd86a 8%,transparent); } .inventory-protected-note > span { font-size:22px; text-align:center; } .inventory-protected-note b { display:block; font-size:10px; } .inventory-protected-note small { color:var(--theme-muted,#6a8496); font-size:8px; line-height:1.35; } .inventory-detail-actions { display:grid; grid-template-columns:minmax(100px,.8fr) 1fr 1fr; gap:8px; margin-top:14px; } .inventory-detail-actions label { display:grid; gap:4px; color:var(--theme-muted,#698397); font-size:8px; font-weight:800; } .inventory-detail-actions input { min-width:0; height:38px; padding:0 9px; border:1px solid var(--theme-border,#d1e1ea); border-radius:11px; background:var(--theme-card,#fff); color:var(--theme-text,#173e58); font-weight:800; } .inventory-detail-actions button { min-height:42px; border:1px solid color-mix(in srgb,var(--theme-accent,#269ce3) 55%,var(--theme-border,#d1e1ea)); border-radius:12px; background:color-mix(in srgb,var(--theme-accent,#269ce3) 12%,var(--theme-card,#fff)); color:var(--theme-text,#173e58); font-size:9px; font-weight:900; } .inventory-detail-actions button.is-danger { border-color:rgba(227,92,90,.38); color:#d75250; background:rgba(227,92,90,.07); } .inventory-detail-actions button:disabled { opacity:.38; cursor:not-allowed; } .inventory-debug-card p { color:var(--theme-muted,#6c8799); font-size:9px; line-height:1.4; } .trade-dialog { position:fixed; inset:0; z-index:160; display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .18s ease; } .trade-dialog.is-open { opacity:1; pointer-events:auto; } .trade-dialog__backdrop { position:absolute; inset:0; background:rgba(3,16,25,.58); backdrop-filter:blur(7px); } .trade-dialog__content { position:relative; z-index:1; width:min(900px,calc(100vw - 36px)); max-height:min(780px,calc(100vh - 36px)); overflow:auto; } .trade-request-card,.trade-window-v2732 { border:1px solid rgba(127,202,239,.34); border-radius:24px; background:var(--theme-panel,#f5fbfe); color:var(--theme-text,#173e58); box-shadow:0 28px 80px rgba(0,18,31,.38); } .trade-request-card { width:min(470px,100%); margin:auto; padding:28px; text-align:center; } .trade-request-card > span { display:grid; place-items:center; width:72px; height:72px; margin:0 auto 12px; border-radius:22px; background:color-mix(in srgb,#5ac7ff 14%,transparent); font-size:38px; } .trade-request-card small { color:#31a7e4; font-size:9px; font-weight:900; letter-spacing:.08em; } .trade-request-card h2 { margin:8px 0; font-size:24px; } .trade-request-card p { color:var(--theme-muted,#6b8495); font-size:11px; line-height:1.45; } .trade-request-card > div { display:grid; grid-template-columns:1fr 1.25fr; gap:9px; margin-top:18px; } .trade-request-card button,.trade-window-v2732 button { min-height:44px; border:1px solid var(--theme-border,#cbdde7); border-radius:13px; background:var(--theme-card,#fff); color:var(--theme-text,#173e58); font-weight:900; } .trade-request-card button.is-primary,.trade-window-v2732 .is-confirm { border-color:#42b8ee; background:linear-gradient(180deg,#45baf2,#218fd2); color:#fff; } .trade-window-v2732 { overflow:hidden; } .trade-window-v2732 > header { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; padding:18px 20px; border-bottom:1px solid var(--theme-border,#d0e0e9); } .trade-window-v2732 > header small { color:#35a9e4; font-size:8px; font-weight:900; } .trade-window-v2732 > header h2 { margin:3px 0; font-size:22px; } .trade-window-v2732 > header p { margin:0; color:var(--theme-muted,#698397); font-size:9px; } .trade-window-v2732 > header button { width:42px; min-height:42px; font-size:22px; } .trade-columns { display:grid; grid-template-columns:1fr 1fr; } .trade-side { min-width:0; padding:16px; } .trade-side + .trade-side { border-left:1px solid var(--theme-border,#d0e0e9); } .trade-side h3 { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 10px; font-size:14px; } .trade-side h3 span { color:var(--theme-muted,#698397); font-size:8px; font-weight:800; } .trade-offer-list { display:grid; gap:6px; min-height:108px; padding:8px; border:1px dashed var(--theme-border,#cbdde7); border-radius:14px; } .trade-empty { display:grid; place-items:center; margin:0; color:var(--theme-muted,#7b929f); font-size:9px; } .trade-offer-row,.trade-money-row { display:grid; grid-template-columns:38px minmax(0,1fr) auto auto; gap:8px; align-items:center; min-height:42px; padding:5px 7px; border-radius:11px; background:color-mix(in srgb,var(--theme-card,#fff) 92%,transparent); } .trade-offer-row > span { display:grid; place-items:center; width:38px; height:38px; } .trade-offer-row .item-icon { width:34px; height:34px; } .trade-offer-row b,.trade-money-row b { font-size:9px; } .trade-offer-row em,.trade-money-row em { font-size:9px; font-style:normal; font-weight:900; } .trade-offer-row button { width:30px; min-height:30px; border-radius:9px; } .trade-money-input { display:flex; align-items:center; gap:8px; margin-top:8px; } .trade-money-input span { font-size:9px; font-weight:900; } .trade-money-input input { min-width:0; flex:1; height:38px; padding:0 10px; border:1px solid var(--theme-border,#cbdde7); border-radius:11px; background:var(--theme-card,#fff); color:var(--theme-text,#173e58); font-weight:800; } .trade-inventory-picker { display:grid; gap:5px; max-height:260px; margin-top:12px; overflow:auto; } .trade-inventory-picker > small { color:var(--theme-muted,#698397); font-size:8px; font-weight:900; } .trade-inventory-picker button { display:grid; grid-template-columns:38px minmax(0,1fr) auto 24px; gap:7px; align-items:center; min-height:48px; padding:5px 8px; text-align:left; } .trade-inventory-picker button > span { width:38px; height:38px; } .trade-inventory-picker button .item-icon { width:34px; height:34px; } .trade-inventory-picker button b { font-size:9px; } .trade-inventory-picker button small { color:var(--theme-muted,#698397); } .trade-inventory-picker button i { font-size:16px; font-style:normal; } .trade-safety { display:grid; grid-template-columns:36px 1fr; gap:8px; margin-top:12px; padding:11px; border:1px solid color-mix(in srgb,#50c98f 32%,var(--theme-border,#cbdde7)); border-radius:13px; background:color-mix(in srgb,#50c98f 7%,transparent); } .trade-safety > span { font-size:23px; } .trade-safety b { display:block; font-size:9px; } .trade-safety small { color:var(--theme-muted,#698397); font-size:8px; line-height:1.35; } .trade-window-v2732 > footer { display:flex; justify-content:flex-end; gap:9px; padding:13px 17px; border-top:1px solid var(--theme-border,#d0e0e9); } .trade-window-v2732 > footer button { min-width:150px; padding:0 15px; } .trade-window-v2732 .is-confirm.is-locked { background:#48b980; border-color:#48b980; } html[data-game-theme="dark"] .trade-request-card,html[data-game-theme="dark"] .trade-window-v2732 { --theme-panel:rgba(8,38,51,.98); } /* v2.7.33 — visual inventory & trade polish */ .inventory-shell-v2733 { gap:16px; } .inventory-header-v2733 { align-items:center; } .inventory-header-v2733 .inventory-search { height:48px; border-radius:16px; background:linear-gradient(180deg,color-mix(in srgb,var(--theme-card,#fff) 95%,transparent),color-mix(in srgb,var(--theme-card,#fff) 88%,transparent)); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); } .inventory-summary-v2733 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } .inventory-summary-v2733 article { display:grid; grid-template-columns:38px minmax(0,1fr); gap:4px 10px; align-items:center; min-height:70px; padding:12px; border:1px solid var(--theme-border,#d7e4ec); border-radius:18px; background:linear-gradient(180deg,color-mix(in srgb,var(--theme-card,#fff) 98%,transparent),color-mix(in srgb,var(--theme-accent,#2399dd) 3%,var(--theme-card,#fff))); box-shadow:0 10px 24px rgba(26,72,102,.08); } .inventory-summary-v2733 article i { grid-row:1 / 4; display:grid; place-items:center; width:38px; height:38px; border-radius:13px; background:color-mix(in srgb,var(--theme-accent,#2399dd) 12%,transparent); font-style:normal; font-size:20px; } .inventory-summary-v2733 article b { font-size:20px; line-height:1; } .inventory-summary-v2733 article small { color:var(--theme-text,#173e58); font-size:9px; font-weight:900; } .inventory-summary-v2733 article span { color:var(--theme-muted,#6f889a); font-size:8px; } .inventory-tabs-v2733 button { gap:10px; min-height:44px; padding:0 12px; border-radius:15px; } .inventory-tabs-v2733 button > span { display:grid; gap:1px; } .inventory-tabs-v2733 button b { font-size:10px; } .inventory-tabs-v2733 button small { justify-self:start; min-width:0; height:auto; padding:0; background:none; font-size:8px; } .inventory-layout-v2733 { grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr); gap:16px; } .inventory-list-v2733 { gap:10px; } .inventory-card-v2733 { grid-template-columns:58px minmax(0,1fr); gap:12px; min-height:88px; padding:11px 12px; border-radius:18px; box-shadow:0 8px 18px rgba(19,57,82,.05); } .inventory-card-v2733:hover { box-shadow:0 14px 28px rgba(29,95,135,.12); } .inventory-card-v2733 .inventory-card-icon { width:58px; height:58px; border-radius:16px; background:linear-gradient(180deg,color-mix(in srgb,var(--theme-card,#fff) 94%,transparent),color-mix(in srgb,var(--theme-accent,#2d9de3) 8%,var(--theme-card,#fff))); } .inventory-card-v2733 .inventory-card-icon .item-icon { width:46px; height:46px; } .inventory-card-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; } .inventory-card-v2733 .inventory-card-copy { gap:5px; } .inventory-card-v2733 .inventory-card-copy b { font-size:13px; } .inventory-card-v2733 .inventory-card-copy small { font-size:8px; } .inventory-card-topline em { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:color-mix(in srgb,var(--theme-accent,#269ce3) 10%,transparent); color:var(--theme-text,#173e58); font-size:10px; font-style:normal; font-weight:900; } .inventory-card-tags { display:flex; flex-wrap:wrap; gap:5px; } .inventory-card-tags i { display:inline-flex; align-items:center; min-height:20px; padding:0 8px; border-radius:999px; background:color-mix(in srgb,var(--theme-text,#173e58) 5%,transparent); color:var(--theme-text,#173e58); font-size:7px; font-style:normal; font-weight:900; letter-spacing:.02em; } .inventory-card-tags .is-trade { background:rgba(68,172,220,.12); color:#1a82ba; } .inventory-card-tags .is-protected,.inventory-card-tags .is-lock { background:rgba(228,173,75,.13); color:#98660f; } .inventory-card-tags .is-usable { background:rgba(75,195,135,.12); color:#2f8d5d; } .inventory-card-tags .is-mixed { background:rgba(137,112,232,.12); color:#6f50c9; } .inventory-card-tags .is-common { background:rgba(114,132,146,.10); color:#4d6679; } .inventory-card-tags .is-uncommon { background:rgba(89,184,113,.12); color:#327d48; } .inventory-card-tags .is-rare { background:rgba(79,148,235,.12); color:#2e6fc8; } .inventory-card-tags .is-epic { background:rgba(142,96,229,.14); color:#7046cb; } .inventory-card-tags .is-legendary { background:rgba(241,172,71,.16); color:#b06d06; } .item-graphic-shell { position:relative; display:grid; place-items:center; width:100%; height:100%; border-radius:inherit; isolation:isolate; } .item-graphic-shell::before { content:''; position:absolute; inset:10%; border-radius:inherit; background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.55), transparent 58%); opacity:.65; z-index:-1; } .item-graphic-shell > img,.item-graphic-shell > svg { width:100%; height:100%; } .item-graphic-base { width:100%; height:100%; } .item-species-badge { position:absolute; right:-2px; bottom:-2px; display:grid; place-items:center; width:20px; height:20px; border:2px solid var(--theme-card,#fff); border-radius:999px; background:#fff; box-shadow:0 4px 10px rgba(18,53,80,.18); overflow:hidden; } .item-species-badge img { width:100%; height:100%; object-fit:cover; } .inventory-detail-v2733 .inventory-detail-card { padding:18px; border-radius:22px; box-shadow:0 16px 36px rgba(21,65,92,.08); } .inventory-detail-hero-v2733 { gap:15px; } .inventory-detail-hero-v2733 > span { width:84px; height:84px; border-radius:22px; } .inventory-detail-hero-v2733 .item-icon { width:68px; height:68px; } .inventory-detail-headline { display:flex; align-items:center; gap:7px; flex-wrap:wrap; } .rarity-pill { display:inline-flex; align-items:center; min-height:20px; padding:0 8px; border-radius:999px; background:rgba(92,115,132,.1); color:#4a6479; font-size:7px; font-style:normal; font-weight:900; text-transform:uppercase; letter-spacing:.06em; } .rarity-pill.rarity-uncommon { background:rgba(81,181,112,.13); color:#327d48; } .rarity-pill.rarity-rare { background:rgba(84,149,238,.13); color:#2f6fc4; } .rarity-pill.rarity-epic { background:rgba(140,98,231,.14); color:#6c46c8; } .rarity-pill.rarity-legendary { background:rgba(241,177,76,.16); color:#aa6907; } .inventory-detail-submeta { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } .inventory-detail-submeta span { display:inline-flex; align-items:center; min-height:22px; padding:0 9px; border-radius:999px; background:color-mix(in srgb,var(--theme-text,#173e58) 5%,transparent); color:var(--theme-muted,#617d91); font-size:8px; font-weight:800; } .inventory-policy-grid-v2733 { margin-top:16px; } .inventory-detail-section { margin-top:14px; } .inventory-detail-section > header { display:flex; justify-content:space-between; gap:8px; align-items:flex-end; margin-bottom:8px; } .inventory-detail-section > header b { font-size:11px; } .inventory-detail-section > header small { color:var(--theme-muted,#6a8396); font-size:8px; } .inventory-lot-list { display:grid; gap:8px; } .inventory-lot-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; min-height:58px; padding:10px 12px; border:1px solid var(--theme-border,#d4e3ea); border-radius:15px; background:linear-gradient(180deg,color-mix(in srgb,var(--theme-card,#fff) 97%,transparent),color-mix(in srgb,var(--theme-accent,#289bde) 4%,var(--theme-card,#fff))); } .inventory-lot-row b { display:block; font-size:10px; } .inventory-lot-row small { color:var(--theme-muted,#698397); font-size:8px; line-height:1.45; } .inventory-lot-row em { padding:6px 9px; border-radius:999px; background:color-mix(in srgb,var(--theme-text,#173e58) 5%,transparent); font-size:10px; font-style:normal; font-weight:900; } .inventory-detail-actions-v2733 { grid-template-columns:minmax(100px,.75fr) 1fr 1fr 1fr; align-items:end; } .inventory-detail-actions-v2733 button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; } .inventory-detail-actions-v2733 button span { font-size:16px; } .inventory-detail-actions-v2733 button b { font-size:8px; } .inventory-detail-actions-v2733 button.is-secondary { border-color:var(--theme-border,#cbdde7); background:var(--theme-card,#fff); color:var(--theme-muted,#6f8798); } .inventory-detail-footnote { margin-top:11px; color:var(--theme-muted,#6d8697); font-size:8px; line-height:1.45; } .trade-window-v2733 { border-radius:28px; } .trade-window-v2733 > header { padding:20px 22px 16px; } .trade-window-v2733 > header small { letter-spacing:.08em; } .trade-flow-v2733 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 20px 16px; } .trade-flow-v2733 article { display:flex; align-items:center; gap:9px; min-height:46px; padding:0 12px; border:1px solid var(--theme-border,#d0e0e9); border-radius:16px; background:color-mix(in srgb,var(--theme-card,#fff) 96%,transparent); color:var(--theme-muted,#688396); } .trade-flow-v2733 article b { display:grid; place-items:center; width:24px; height:24px; border-radius:999px; background:color-mix(in srgb,var(--theme-accent,#269ce3) 9%,transparent); font-size:10px; } .trade-flow-v2733 article span { font-size:9px; font-weight:900; } .trade-flow-v2733 article.is-active,.trade-flow-v2733 article.is-done { border-color:color-mix(in srgb,var(--theme-accent,#2d9de3) 45%,var(--theme-border,#d0e0e9)); color:var(--theme-text,#173e58); } .trade-flow-v2733 article.is-done { background:color-mix(in srgb,#4ec988 8%,var(--theme-card,#fff)); } .trade-columns-v2733 { border-top:1px solid var(--theme-border,#d0e0e9); } .trade-side-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:10px; } .trade-side-meta { display:flex; gap:6px; flex-wrap:wrap; } .trade-side-meta i { display:inline-flex; align-items:center; min-height:22px; padding:0 8px; border-radius:999px; background:color-mix(in srgb,var(--theme-text,#173e58) 6%,transparent); font-size:8px; font-style:normal; font-weight:900; } .trade-offer-row-v2733,.trade-money-row-v2733 { grid-template-columns:42px minmax(0,1fr) auto auto; min-height:48px; padding:6px 8px; border-radius:13px; } .trade-offer-row-v2733 > span,.trade-money-row-v2733 > span { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:color-mix(in srgb,var(--theme-accent,#269ce3) 8%,transparent); } .trade-offer-row-v2733 .item-icon { width:34px; height:34px; } .trade-offer-row-v2733 div,.trade-money-row-v2733 div { display:grid; gap:2px; } .trade-offer-row-v2733 small,.trade-money-row-v2733 small { color:var(--theme-muted,#6e8698); font-size:7px; } .trade-money-input { margin-top:10px; } .trade-inventory-picker { gap:7px; margin-top:14px; } .trade-inventory-picker button { grid-template-columns:42px minmax(0,1fr) 24px; min-height:54px; border-radius:14px; } .trade-inventory-picker button > span { width:42px; height:42px; border-radius:13px; background:color-mix(in srgb,var(--theme-accent,#269ce3) 8%,transparent); display:grid; place-items:center; } .trade-inventory-picker button div { display:grid; gap:2px; min-width:0; } .trade-inventory-picker button b { font-size:10px; } .trade-inventory-picker button small { font-size:7px; } .trade-tip-card { display:grid; grid-template-columns:36px 1fr; gap:8px; margin-top:10px; padding:11px; border:1px solid color-mix(in srgb,#7b9ee8 28%,var(--theme-border,#cbdde7)); border-radius:13px; background:color-mix(in srgb,#7b9ee8 7%,transparent); } .trade-tip-card > span { font-size:22px; } .trade-tip-card b { display:block; font-size:9px; } .trade-tip-card small { color:var(--theme-muted,#698397); font-size:8px; line-height:1.35; } html[data-game-theme="dark"] .inventory-summary-v2733 article, html[data-game-theme="dark"] .inventory-lot-row, html[data-game-theme="dark"] .trade-flow-v2733 article { box-shadow:none; } @media (max-width:760px) { .game-screen .side-panel.is-inventory-panel { width:calc(100vw - 12px); padding:12px; } .inventory-header-v2732 { grid-template-columns:1fr; gap:9px; } .inventory-header-v2732 p { display:none; } .inventory-layout-v2732 { grid-template-columns:1fr; } .inventory-list-v2732 { max-height:260px; } .inventory-detail-card { min-height:auto; } .inventory-policy-grid { grid-template-columns:1fr 1fr; } .inventory-detail-actions { grid-template-columns:1fr 1fr; } .inventory-detail-actions label { grid-column:1/-1; } .trade-dialog { padding:7px; } .trade-dialog__content { width:100%; max-height:calc(100vh - 14px); } .trade-window-v2732 { border-radius:18px; } .trade-columns { grid-template-columns:1fr; } .trade-side + .trade-side { border-left:0; border-top:1px solid var(--theme-border,#d0e0e9); } .trade-inventory-picker { max-height:170px; } .trade-window-v2732 > footer { position:sticky; bottom:0; background:var(--theme-panel,#fff); } .trade-window-v2732 > footer button { min-width:0; flex:1; } .inventory-summary-v2733 { grid-template-columns:1fr 1fr; } .inventory-tabs-v2733 button { min-height:42px; } .inventory-layout-v2733 { grid-template-columns:1fr; } .inventory-card-v2733 { min-height:82px; } .inventory-detail-v2733 .inventory-detail-card { padding:14px; } .inventory-detail-actions-v2733 { grid-template-columns:1fr 1fr; } .inventory-detail-actions-v2733 label { grid-column:1 / -1; } .inventory-detail-actions-v2733 button.is-secondary { grid-column:1 / -1; } .trade-flow-v2733 { grid-template-columns:1fr; padding:0 14px 12px; } .trade-side-head { flex-direction:column; align-items:flex-start; } } /* v2.7.34 — compact visual inventory: fixed categories, item grid, mobile item sheet */ .game-screen .side-panel.is-inventory-panel { top: 72px; right: 18px; bottom: 18px; width: min(980px, calc(100vw - 92px)); } .inventory-shell-v2734 { display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:12px; height:100%; min-height:0; } .inventory-header-v2734 { display:grid; grid-template-columns:minmax(240px,1fr) minmax(320px,.9fr); gap:18px; align-items:center; } .inventory-header-v2734 .panel-eyebrow { font-size:8px; letter-spacing:.09em; } .inventory-header-v2734 h2 { margin:3px 0 0; font-size:29px; line-height:1; } .inventory-header-tools-v2734 { display:flex; justify-content:flex-end; align-items:center; gap:9px; min-width:0; } .inventory-count-pills-v2734 { display:flex; gap:6px; flex:0 0 auto; } .inventory-count-pills-v2734 span { display:flex; align-items:center; gap:4px; min-height:34px; padding:0 9px; border:1px solid var(--theme-border,#d2e1e9); border-radius:12px; background:color-mix(in srgb,var(--theme-card,#fff) 94%,transparent); color:var(--theme-muted,#658195); font-size:8px; font-weight:800; white-space:nowrap; } .inventory-count-pills-v2734 b { color:#2587bd; font-size:11px; } .inventory-count-pills-v2734 .is-locked b { color:#b57a16; } .inventory-header-v2734 .inventory-search { flex:1 1 230px; width:auto; min-width:190px; max-width:310px; height:40px; min-height:40px; } .inventory-header-v2734 .inventory-search > span { display:grid; place-items:center; width:20px; height:20px; } .inventory-header-v2734 .inventory-search .ui-icon { width:16px; height:16px; } .inventory-tabs-v2734 { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:7px; min-width:0; } .inventory-tabs-v2734 button { display:grid; grid-template-columns:30px minmax(0,1fr); gap:7px; align-items:center; min-width:0; min-height:48px; padding:6px 8px; border:1px solid var(--theme-border,#cfdee7); border-radius:14px; background:color-mix(in srgb,var(--theme-card,#fff) 95%,transparent); color:var(--theme-muted,#638095); text-align:left; cursor:pointer; transition:.16s ease; } .inventory-tabs-v2734 button:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--theme-accent,#289ce0) 45%,var(--theme-border,#cfdee7)); } .inventory-tabs-v2734 button.is-active { color:var(--theme-text,#173e58); border-color:var(--theme-accent,#279ce2); background:color-mix(in srgb,var(--theme-accent,#279ce2) 8%,var(--theme-card,#fff)); box-shadow:0 6px 14px color-mix(in srgb,var(--theme-accent,#279ce2) 10%,transparent); } .inventory-tabs-v2734 .inventory-category-icon { width:28px; height:28px; } .inventory-tabs-v2734 button > span { display:grid; min-width:0; } .inventory-tabs-v2734 button b { overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; } .inventory-tabs-v2734 button small { color:var(--theme-muted,#6f8799); font-size:7px; } .inventory-body-v2734 { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:12px; min-height:0; } .inventory-browser-v2734 { min-width:0; min-height:0; overflow:auto; padding:1px 4px 4px 1px; } .inventory-grid-v2734 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; align-content:start; } .inventory-grid-v2734 .bag-empty { grid-column:1/-1; min-height:180px; display:grid; place-items:center; align-content:center; gap:5px; color:var(--theme-muted,#698397); } .inventory-card-v2734 { position:relative; display:grid; grid-template-columns:58px minmax(0,1fr); gap:10px; align-items:center; min-width:0; min-height:94px; padding:10px; border:1px solid var(--theme-border,#d1e1e9); border-radius:17px; background:color-mix(in srgb,var(--theme-card,#fff) 96%,transparent); color:var(--theme-text,#173e58); text-align:left; cursor:pointer; box-shadow:0 6px 16px rgba(22,67,95,.045); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; } .inventory-card-v2734:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--theme-accent,#269ce3) 45%,var(--theme-border,#d1e1e9)); box-shadow:0 10px 22px rgba(30,88,122,.09); } .inventory-card-v2734.is-selected { border-color:var(--theme-accent,#269ce3); box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent,#269ce3) 10%,transparent),0 10px 22px rgba(30,88,122,.1); } .inventory-card-art-v2734 { display:grid; place-items:center; width:58px; height:58px; border-radius:16px; background:linear-gradient(180deg,color-mix(in srgb,var(--theme-card,#fff) 95%,transparent),color-mix(in srgb,var(--theme-accent,#269ce3) 7%,var(--theme-card,#fff))); overflow:visible; } .inventory-card-art-v2734 .item-icon { width:48px; height:48px; } .inventory-card-info-v2734 { display:grid; gap:4px; min-width:0; } .inventory-card-info-v2734 > b { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .inventory-card-info-v2734 > small { overflow:hidden; color:var(--theme-muted,#6b8597); font-size:7px; text-overflow:ellipsis; white-space:nowrap; } .inventory-card-info-v2734 > i { justify-self:start; display:inline-flex; align-items:center; min-height:19px; max-width:100%; padding:0 7px; border-radius:999px; background:rgba(76,171,218,.1); color:#227cad; font-size:7px; font-style:normal; font-weight:900; white-space:nowrap; } .inventory-card-info-v2734 > i.state-locked { color:#9a6813; background:rgba(224,170,65,.12); } .inventory-card-info-v2734 > i.state-mixed { color:#7352c6; background:rgba(132,99,221,.12); } .inventory-card-info-v2734 > i.state-usable { color:#2e8959; background:rgba(67,187,124,.12); } .inventory-card-v2734 > em { position:absolute; top:8px; right:8px; display:grid; place-items:center; min-width:27px; height:24px; padding:0 7px; border-radius:999px; background:color-mix(in srgb,var(--theme-text,#173e58) 6%,var(--theme-card,#fff)); font-size:9px; font-style:normal; font-weight:900; } .inventory-detail-v2734 { min-width:0; min-height:0; } .inventory-item-sheet-v2734 { display:grid; align-content:start; gap:12px; height:100%; min-height:0; padding:14px; border:1px solid var(--theme-border,#d0e0e9); border-radius:20px; background:color-mix(in srgb,var(--theme-card,#fff) 96%,transparent); box-shadow:0 14px 34px rgba(24,70,96,.08); overflow:auto; } .inventory-mobile-detail-close-v2734 { display:none; } .inventory-item-sheet-v2734 > header { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:12px; align-items:start; } .inventory-item-sheet-v2734 > header > span { display:grid; place-items:center; width:72px; height:72px; border-radius:18px; background:linear-gradient(180deg,color-mix(in srgb,var(--theme-card,#fff) 96%,transparent),color-mix(in srgb,var(--theme-accent,#269ce3) 8%,var(--theme-card,#fff))); } .inventory-item-sheet-v2734 > header .item-icon { width:58px; height:58px; } .inventory-item-sheet-v2734 > header small { color:var(--theme-accent,#269ce3); font-size:7px; font-weight:900; letter-spacing:.08em; } .inventory-item-sheet-v2734 > header h3 { margin:3px 0 5px; font-size:18px; line-height:1.05; } .inventory-item-sheet-v2734 > header p { margin:0; color:var(--theme-muted,#668397); font-size:9px; line-height:1.4; } .inventory-item-sheet-v2734 > header strong { padding:5px 7px; border-radius:999px; background:color-mix(in srgb,var(--theme-text,#173e58) 6%,transparent); font-size:10px; } .inventory-availability-v2734 { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; } .inventory-availability-v2734 article { display:grid; gap:2px; min-width:0; padding:9px 7px; border:1px solid var(--theme-border,#d3e1e9); border-radius:13px; text-align:center; } .inventory-availability-v2734 article b { font-size:16px; } .inventory-availability-v2734 article span { color:var(--theme-muted,#6d8698); font-size:7px; font-weight:800; } .inventory-availability-v2734 article.is-ok { border-color:rgba(68,187,127,.34); background:rgba(68,187,127,.055); } .inventory-availability-v2734 article.is-warn { border-color:rgba(226,171,66,.35); background:rgba(226,171,66,.06); } .inventory-mixed-note-v2734 { display:grid; gap:3px; padding:9px 10px; border:1px solid rgba(219,164,67,.31); border-radius:13px; background:rgba(229,181,80,.065); } .inventory-mixed-note-v2734 b { font-size:9px; } .inventory-mixed-note-v2734 span { color:var(--theme-muted,#698397); font-size:7px; line-height:1.35; } .inventory-lots-v2734 { border:1px solid var(--theme-border,#d3e1e9); border-radius:13px; overflow:hidden; } .inventory-lots-v2734 summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; padding:0 10px; cursor:pointer; font-size:8px; font-weight:900; list-style:none; } .inventory-lots-v2734 summary::-webkit-details-marker { display:none; } .inventory-lots-v2734 summary span { display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:color-mix(in srgb,var(--theme-accent,#269ce3) 10%,transparent); } .inventory-lots-v2734 > div { display:grid; gap:5px; padding:0 8px 8px; } .inventory-lots-v2734 article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; min-height:43px; padding:6px 8px; border-radius:10px; background:color-mix(in srgb,var(--theme-text,#173e58) 3%,transparent); } .inventory-lots-v2734 article b { display:block; font-size:8px; } .inventory-lots-v2734 article small { color:var(--theme-muted,#6b8495); font-size:7px; } .inventory-lots-v2734 article em { font-size:9px; font-style:normal; font-weight:900; } .inventory-actions-v2734 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; margin-top:auto; } .inventory-actions-v2734 label { grid-column:1/-1; display:grid; grid-template-columns:1fr 72px; gap:8px; align-items:center; min-height:36px; color:var(--theme-muted,#698397); font-size:8px; font-weight:900; } .inventory-actions-v2734 input { width:72px; height:34px; padding:0 8px; border:1px solid var(--theme-border,#d1e1ea); border-radius:10px; background:var(--theme-card,#fff); color:var(--theme-text,#173e58); font-weight:900; } .inventory-actions-v2734 button { display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:40px; padding:0 8px; border:1px solid var(--theme-border,#cfdfe8); border-radius:12px; background:var(--theme-card,#fff); color:var(--theme-text,#173e58); font-size:8px; font-weight:900; } .inventory-actions-v2734 button .ui-icon { width:15px; height:15px; } .inventory-actions-v2734 button.is-use { border-color:rgba(55,157,225,.36); background:rgba(55,157,225,.07); } .inventory-actions-v2734 button.is-trade { border-color:rgba(76,184,139,.36); background:rgba(76,184,139,.07); } .inventory-actions-v2734 button.is-sell { border-color:rgba(226,171,66,.36); background:rgba(226,171,66,.07); } .inventory-actions-v2734 button.is-danger { grid-column:1/-1; color:#d55454; border-color:rgba(224,90,90,.3); background:rgba(224,90,90,.055); } .inventory-actions-v2734 button:disabled { opacity:.34; cursor:not-allowed; } .item-species-badge { width:21px; height:21px; } /* Trade window polish follows the same visual language. */ .trade-window-v2733 { width:100%; } .trade-window-v2733 .trade-flow-v2733 article { min-height:42px; } .trade-window-v2733 .trade-inventory-picker button { min-height:50px; } .trade-window-v2733 .trade-offer-list { min-height:92px; } html[data-game-theme="dark"] .inventory-card-v2734, html[data-game-theme="dark"] .inventory-item-sheet-v2734, html[data-game-theme="dark"] .inventory-tabs-v2734 button, html[data-game-theme="dark"] .inventory-count-pills-v2734 span { box-shadow:none; } html[data-game-theme="dark"] .inventory-card-info-v2734 > i.state-locked { color:#f0be58; } html[data-game-theme="dark"] .inventory-card-info-v2734 > i.state-mixed { color:#b89cff; } html[data-game-theme="dark"] .inventory-card-info-v2734 > i.state-tradable { color:#73cbf2; } @media (max-width:1100px) and (pointer:fine) { .game-screen .side-panel.is-inventory-panel { width:min(860px,calc(100vw - 56px)); } .inventory-tabs-v2734 { grid-template-columns:repeat(5,minmax(0,1fr)); } .inventory-grid-v2734 { grid-template-columns:repeat(2,minmax(0,1fr)); } .inventory-body-v2734 { grid-template-columns:minmax(0,1fr) 300px; } .inventory-count-pills-v2734 { display:none; } } @media (max-width:760px) { .game-screen .side-panel.is-inventory-panel { inset:auto 6px calc(68px + env(safe-area-inset-bottom)) 6px; width:auto; max-height:calc(100% - 78px - env(safe-area-inset-top)); padding:10px; border-radius:20px; overflow:hidden; } .inventory-shell-v2734 { gap:9px; } .inventory-header-v2734 { grid-template-columns:1fr; gap:8px; } .inventory-header-v2734 h2 { font-size:21px; } .inventory-header-tools-v2734 { justify-content:stretch; } .inventory-count-pills-v2734 { display:none; } .inventory-header-v2734 .inventory-search { max-width:none; flex:1; height:38px; } .inventory-tabs-v2734 { display:flex; gap:6px; overflow:auto hidden; padding-bottom:3px; scrollbar-width:none; } .inventory-tabs-v2734::-webkit-scrollbar { display:none; } .inventory-tabs-v2734 button { flex:0 0 72px; grid-template-columns:1fr; justify-items:center; gap:3px; min-height:54px; padding:5px; text-align:center; } .inventory-tabs-v2734 .inventory-category-icon { width:24px; height:24px; } .inventory-tabs-v2734 button b { font-size:7px; } .inventory-tabs-v2734 button small { justify-self:center; font-size:7px; } .inventory-body-v2734 { grid-template-columns:1fr; min-height:0; } .inventory-browser-v2734 { padding-right:1px; } .inventory-grid-v2734 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .inventory-card-v2734 { grid-template-columns:48px minmax(0,1fr); min-height:79px; padding:8px; border-radius:15px; } .inventory-card-art-v2734 { width:48px; height:48px; border-radius:13px; } .inventory-card-art-v2734 .item-icon { width:40px; height:40px; } .inventory-card-info-v2734 > b { font-size:9px; } .inventory-card-info-v2734 > small { display:none; } .inventory-card-info-v2734 > i { max-width:92px; overflow:hidden; font-size:6px; text-overflow:ellipsis; } .inventory-card-v2734 > em { top:5px; right:5px; height:20px; min-width:23px; font-size:7px; } .inventory-detail-v2734 { display:none; } .inventory-shell-v2734.is-detail-open .inventory-detail-v2734 { position:fixed; z-index:82; inset:auto 6px calc(68px + env(safe-area-inset-bottom)) 6px; display:block; max-height:min(72vh,640px); } .inventory-shell-v2734.is-detail-open .inventory-item-sheet-v2734 { max-height:min(72vh,640px); padding:13px; border-radius:20px 20px 16px 16px; box-shadow:0 -18px 50px rgba(3,20,32,.28); } .inventory-shell-v2734.is-detail-open::after { content:''; position:fixed; z-index:81; inset:0; background:rgba(2,15,24,.28); backdrop-filter:blur(2px); pointer-events:none; } .inventory-mobile-detail-close-v2734 { position:sticky; top:0; z-index:2; display:grid; place-items:center; justify-self:start; width:36px; height:30px; margin:-5px 0 -5px; border:0; border-radius:10px; background:color-mix(in srgb,var(--theme-text,#173e58) 7%,var(--theme-card,#fff)); color:var(--theme-text,#173e58); font-size:25px; } .inventory-item-sheet-v2734 > header { grid-template-columns:64px minmax(0,1fr) auto; } .inventory-item-sheet-v2734 > header > span { width:64px; height:64px; } .inventory-item-sheet-v2734 > header .item-icon { width:52px; height:52px; } .inventory-item-sheet-v2734 > header h3 { font-size:16px; } .inventory-item-sheet-v2734 > header p { font-size:8px; } .inventory-availability-v2734 { grid-template-columns:1fr 1fr; } .inventory-actions-v2734 { grid-template-columns:1fr 1fr; position:sticky; bottom:-13px; padding:9px 0 4px; background:linear-gradient(180deg,transparent,var(--theme-card,#fff) 24%); } .inventory-actions-v2734 label { grid-column:1/-1; } .inventory-actions-v2734 button.is-danger { grid-column:auto; } .trade-dialog__content { max-height:calc(100vh - 14px); } .trade-window-v2733 > header p { display:none; } .trade-flow-v2733 { grid-template-columns:repeat(3,1fr); padding:0 10px 10px; } .trade-flow-v2733 article { display:grid; justify-items:center; gap:3px; min-height:48px; padding:5px; text-align:center; } .trade-flow-v2733 article span { font-size:6px; } } /* v2.7.35 — modal inventory details + cleaner responsive categories */ .game-screen .side-panel.is-inventory-panel { width: min(1080px, calc(100vw - 72px)); } .inventory-shell-v2735 { position: relative; min-height: 0; } .inventory-header-v2735 { grid-template-columns: minmax(220px,1fr) minmax(420px,1.15fr); } .inventory-header-tools-v2735 { gap: 10px; } .inventory-close-v2735 { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--theme-border,#cfdee7); border-radius: 14px; background: color-mix(in srgb,var(--theme-card,#fff) 95%,transparent); color: var(--theme-text,#173e58); font-size: 26px; line-height: 1; } .inventory-tabs-v2735 { grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: start; } .inventory-tabs-v2735 button { min-height: 56px; padding: 8px 10px; } .inventory-tabs-v2735 button span { display: grid; gap: 2px; min-width: 0; } .inventory-tabs-v2735 button b { font-size: 10px; line-height: 1.1; white-space: normal; } .inventory-tabs-v2735 button small { font-size: 8px; } .inventory-body-v2735 { grid-template-columns: 1fr; position: relative; } .inventory-grid-v2735 { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-right: 2px; } .inventory-card-v2735 { grid-template-columns: 56px minmax(0,1fr); min-height: 94px; } .inventory-card-v2735 .inventory-card-info-v2734 { align-content: start; } .inventory-card-v2735 .inventory-card-info-v2734 > b { white-space: normal; line-height: 1.15; } .inventory-card-v2735 .inventory-card-info-v2734 > i { margin-top: 2px; white-space: normal; line-height: 1.2; } .inventory-modal-v2735 { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; padding: 18px; } .inventory-modal-scrim-v2735 { position: absolute; inset: 0; border-radius: 28px; background: rgba(14,34,49,.22); backdrop-filter: blur(5px); } .inventory-item-sheet-v2735 { position: relative; z-index: 1; width: min(500px, calc(100% - 16px)); max-height: calc(100% - 10px); border-radius: 24px; padding: 18px; overflow: auto; } .inventory-detail-close-v2735 { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--theme-border,#d0e0e9); border-radius: 14px; background: color-mix(in srgb,var(--theme-card,#fff) 96%,transparent); color: var(--theme-text,#173e58); font-size: 24px; line-height: 1; } .inventory-item-sheet-v2735 > header { grid-template-columns: 78px minmax(0,1fr) auto; padding-right: 42px; } .inventory-item-sheet-v2735 > header p { margin-top: 6px; font-size: 10px; } .inventory-inline-hint-v2735 { margin: -2px 0 0; color: var(--theme-muted,#698397); font-size: 8px; line-height: 1.5; } .inventory-actions-v2735 button span { white-space: nowrap; } .inventory-shell-v2734.is-detail-open .inventory-grid-v2735 { pointer-events: none; } .inventory-shell-v2734.is-detail-open .inventory-browser-v2734 { overflow: hidden; } html[data-game-theme="dark"] .inventory-modal-scrim-v2735 { background: rgba(0,0,0,.42); } @media (max-width: 1200px) and (pointer:fine) { .inventory-grid-v2735 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 920px) and (pointer:fine) { .game-screen .side-panel.is-inventory-panel { width: min(940px, calc(100vw - 36px)); } .inventory-header-v2735 { grid-template-columns: 1fr; } .inventory-tabs-v2735 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width:760px) { .game-screen .side-panel.is-inventory-panel { top: max(6px, env(safe-area-inset-top)); right: 0; left: 0; bottom: calc(62px + env(safe-area-inset-bottom)); width: auto; max-height: none; padding: 10px; border-radius: 24px 24px 0 0; } .inventory-shell-v2735 { grid-template-rows: auto auto minmax(0,1fr); } .inventory-header-v2735 { grid-template-columns: 1fr; gap: 10px; } .inventory-header-v2735 .panel-eyebrow { font-size: 8px; } .inventory-header-v2735 h2 { font-size: 22px; } .inventory-header-tools-v2735 { display: grid; grid-template-columns: 1fr 44px; gap: 8px; } .inventory-header-tools-v2735 .inventory-search { min-width: 0; max-width: none; height: 42px; } .inventory-tabs-v2735 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; overflow: visible; padding-bottom: 0; } .inventory-tabs-v2735 button { grid-template-columns: 24px minmax(0, 1fr); justify-items: start; gap: 6px; min-height: 52px; padding: 7px 8px; text-align: left; } .inventory-tabs-v2735 .inventory-category-icon { width: 22px; height: 22px; } .inventory-tabs-v2735 button b { font-size: 9px; white-space: normal; } .inventory-tabs-v2735 button small { justify-self: start; font-size: 8px; } .inventory-browser-v2734 { overflow: auto; } .inventory-grid-v2735 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .inventory-card-v2735 { min-height: 88px; } .inventory-card-v2735 .inventory-card-info-v2734 > b { font-size: 10px; } .inventory-card-v2735 .inventory-card-info-v2734 > i { font-size: 7px; } .inventory-modal-v2735 { position: absolute; inset: 0; padding: 0; place-items: stretch; } .inventory-modal-scrim-v2735 { inset: 0; border-radius: 20px 20px 0 0; } .inventory-item-sheet-v2735 { width: 100%; max-height: 100%; min-height: 100%; border-radius: 20px 20px 0 0; padding: 16px 14px calc(20px + env(safe-area-inset-bottom)); background: var(--theme-panel,#fff); } .inventory-detail-close-v2735 { top: 12px; right: 12px; } .inventory-item-sheet-v2735 > header { grid-template-columns: 64px minmax(0,1fr) auto; gap: 10px; padding-right: 42px; } .inventory-item-sheet-v2735 > header > span { width: 64px; height: 64px; } .inventory-item-sheet-v2735 > header .item-icon { width: 50px; height: 50px; } .inventory-item-sheet-v2735 > header h3 { font-size: 18px; } .inventory-item-sheet-v2735 > header p { font-size: 10px; } .inventory-availability-v2734 { grid-template-columns: repeat(2, 1fr); } .inventory-actions-v2735 { grid-template-columns: 1fr 1fr; } .inventory-actions-v2735 label, .inventory-actions-v2735 button.is-danger { grid-column: 1 / -1; } .inventory-actions-v2735 button { min-height: 46px; } } /* v2.7.36 — stable window contract: compact desktop drawers, width-based mobile layout */ @media (min-width: 801px) { .game-screen .side-panel { top: 86px; right: 18px; bottom: auto; left: auto; width: min(500px, calc(100vw - 140px)); height: min(700px, calc(100vh - 118px)); max-width: calc(100vw - 140px); max-height: calc(100vh - 118px); padding: 20px; overflow: hidden auto; border-radius: 24px; } .game-screen .side-panel.is-social-profile { left: 18px; right: auto; width: min(520px, calc(100vw - 140px)); height: min(720px, calc(100vh - 118px)); transform: translateX(calc(-100% - 44px)); } .game-screen .side-panel.is-social-profile.is-open { transform: none; } .game-screen .side-panel.is-pokedex-detail { width: min(700px, calc(100vw - 140px)); height: min(720px, calc(100vh - 118px)); } .game-screen .side-panel.is-inventory-panel { right: 18px; left: auto; width: min(860px, calc(100vw - 140px)); height: min(680px, calc(100vh - 118px)); max-height: calc(100vh - 118px); padding: 16px; } .trade-dialog__content { width: min(820px, calc(100vw - 72px)); max-height: min(700px, calc(100vh - 72px)); } .professor-transfer-card-shell { width: min(560px, calc(100vw - 72px)); max-height: min(680px, calc(100vh - 72px)); } .starter-card { width: min(900px, calc(100vw - 72px)); max-height: min(720px, calc(100vh - 72px)); } } /* Keep long profile sections scrollable inside the drawer instead of stretching the window. */ .social-profile-shell-v2727 { min-width: 0; } .social-profile-tab-body, .social-profile-section, .referral-program-card, .referral-link-box { min-width: 0; } .social-profile-section code, .referral-link-box code { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Inventory detail is a compact action modal; the inventory itself never becomes a split layout. */ .inventory-modal-v2736 { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 14px; } .inventory-item-sheet-v2736 { width: min(460px, calc(100% - 20px)); max-height: min(560px, calc(100% - 18px)); gap: 10px; padding: 16px; overflow: auto; overscroll-behavior: contain; } .inventory-item-sheet-v2736 > header { grid-template-columns: 68px minmax(0,1fr) auto; gap: 10px; padding-right: 42px; } .inventory-item-sheet-v2736 > header > span { width: 68px; height: 68px; } .inventory-item-sheet-v2736 > header .item-icon { width: 54px; height: 54px; } .inventory-item-sheet-v2736 > header h3 { margin: 2px 0 4px; font-size: 18px; } .inventory-item-sheet-v2736 > header p { display: -webkit-box; margin: 0; overflow: hidden; font-size: 9px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .inventory-availability-v2736 { grid-template-columns: repeat(4, minmax(0,1fr)); } .inventory-availability-v2736 article { min-height: 56px; padding: 7px 5px; } .inventory-availability-v2736 article b { font-size: 15px; } .inventory-availability-v2736 article span { font-size: 7px; } .inventory-actions-v2736 { grid-template-columns: 92px repeat(4, minmax(0,1fr)); gap: 6px; margin: 0; } .inventory-actions-v2736 label { grid-column: auto; grid-template-columns: 1fr; gap: 3px; min-width: 0; } .inventory-actions-v2736 label span { font-size: 7px; } .inventory-actions-v2736 input { width: 100%; height: 38px; } .inventory-actions-v2736 button, .inventory-actions-v2736 button.is-danger { grid-column: auto; min-height: 48px; flex-direction: column; gap: 2px; padding: 4px 5px; } .inventory-actions-v2736 button span { font-size: 7px; } .inventory-actions-v2736 button .ui-icon { width: 16px; height: 16px; } .inventory-mixed-note-v2736 { padding: 8px 10px; } .inventory-mixed-note-v2736 span { font-size: 7px; } .inventory-lots-v2736 summary { min-height: 36px; } .inventory-lots-v2736 article { min-height: 38px; } /* Buttons and interactive elements stay above decorative layers. */ .side-panel.is-open, .trade-dialog.is-open, .professor-transfer-dialog.is-open, .social-invite.is-open, .starter-dialog.is-open { pointer-events: auto; } .side-panel button, .side-panel input, .side-panel summary, .trade-dialog button, .trade-dialog input, .professor-transfer-dialog button, .social-invite button, .starter-dialog button { position: relative; z-index: 2; } @media (max-width: 800px) { .game-screen .side-panel, .game-screen .side-panel.is-social-profile, .game-screen .side-panel.is-pokedex-detail, .game-screen .side-panel.is-inventory-panel { top: max(58px, calc(env(safe-area-inset-top) + 54px)); right: max(6px, env(safe-area-inset-right)); bottom: calc(72px + env(safe-area-inset-bottom)); left: max(6px, env(safe-area-inset-left)); width: auto; height: auto; max-width: none; max-height: none; padding: 12px; border-radius: 20px; transform: translateY(calc(100% + 100px)); } .game-screen .side-panel.is-open, .game-screen .side-panel.is-social-profile.is-open { transform: none; } .social-profile-hero-v2727 h2 { font-size: 19px; } .trade-dialog { padding: 8px; } .trade-dialog__content { width: 100%; max-height: calc(100dvh - 16px); } .professor-transfer-card-shell { width: calc(100vw - 16px); max-height: calc(100dvh - 24px); } .inventory-modal-v2736 { padding: 8px; } .inventory-item-sheet-v2736 { width: 100%; max-height: 100%; min-height: 0; border-radius: 18px; padding: 14px; } .inventory-item-sheet-v2736 > header { grid-template-columns: 58px minmax(0,1fr) auto; } .inventory-item-sheet-v2736 > header > span { width: 58px; height: 58px; } .inventory-item-sheet-v2736 > header .item-icon { width: 46px; height: 46px; } .inventory-availability-v2736 { grid-template-columns: repeat(2, minmax(0,1fr)); } .inventory-actions-v2736 { grid-template-columns: repeat(2, minmax(0,1fr)); } .inventory-actions-v2736 label { grid-column: 1 / -1; grid-template-columns: 1fr 84px; align-items: center; } .inventory-actions-v2736 button, .inventory-actions-v2736 button.is-danger { min-height: 48px; } .inventory-lots-v2736 { max-height: 150px; overflow: auto; } } /* Coarse pointers keep touch affordances only; layout still follows viewport width. */ @media (pointer: coarse) { button, [role="button"], summary { touch-action: manipulation; } } @media (pointer:coarse) { .game-screen button { -webkit-tap-highlight-color: transparent; } } /* v2.7.37 — unified adaptive window system */ :root { --game-window-radius: 22px; --game-window-shadow: 0 18px 48px rgba(14,48,70,.22); --game-window-pad: 16px; --game-window-gap: 10px; } .game-screen .side-panel, .game-screen .chat-panel, .game-screen .editor-panel, .game-screen .battle-panel, .trade-dialog__content, .professor-transfer-card-shell { border-radius: var(--game-window-radius); box-shadow: var(--game-window-shadow); } .game-screen .side-panel > .panel-close { top: 12px; right: 12px; z-index: 80; float: none; border-radius: 14px; box-shadow: 0 6px 16px rgba(27,75,102,.10); } #sidePanelContent { max-width: 100%; } .panel-title { margin: 3px 50px 6px 0; font-size: clamp(22px,2vw,28px); line-height: 1.04; letter-spacing: -.035em; } .panel-lead { display: -webkit-box; margin: 0 0 12px; overflow: hidden; font-size: 10px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .panel-eyebrow { font-size: 7px; letter-spacing: .1em; } .panel-primary { min-height: 42px; border-radius: 13px; font-size: 9px; } @media (min-width:801px) { .game-screen .side-panel { top: 86px; right: 18px; bottom: auto; left: auto; width: min(470px,calc(100vw - 130px)); height: auto; max-height: min(74vh,700px); padding: var(--game-window-pad); overflow: hidden; } .game-screen .side-panel.is-open { transform: none; } #sidePanelContent { max-height: calc(min(74vh,700px) - 32px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--theme-muted) 32%,transparent) transparent; padding-right: 2px; } #sidePanelContent::-webkit-scrollbar { width: 5px; } #sidePanelContent::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb,var(--theme-muted) 28%,transparent); } .game-screen .side-panel.is-social-profile { left: 18px; right: auto; width: min(500px,calc(100vw - 130px)); height: auto; max-height: min(76vh,700px); } .game-screen .side-panel.is-inventory-panel { width: min(790px,calc(100vw - 120px)); height: auto; max-height: min(76vh,700px); padding: 16px; } .game-screen .side-panel.is-team-panel { width:min(520px,calc(100vw - 130px)); } .game-screen .side-panel.is-center-panel { width:min(620px,calc(100vw - 130px)); } .game-screen .side-panel.is-pokedex-detail { width:min(720px,calc(100vw - 110px)); } } /* A panel mode can never leak into the next panel. */ .game-screen .side-panel:not(.is-social-profile) .social-profile-shell { display:none; } .game-screen .side-panel:not(.is-inventory-panel) .inventory-shell-v2735, .game-screen .side-panel:not(.is-inventory-panel) .inventory-shell-v2736 { display:none; } /* Modern compact profile */ .social-profile-shell-v2727 { display:grid; gap:9px; padding:0; } .social-profile-hero-v2727 { grid-template-columns:68px minmax(0,1fr); min-height:88px; padding:10px 52px 10px 10px; border-radius:18px; } .social-profile-trainer { width:64px; height:64px; border-radius:17px; } .social-profile-hero-v2727 h2 { margin:2px 0 3px; font-size:22px; } .social-profile-hero-v2727 p { font-size:8px; } .social-profile-tabs { position: static; grid-template-columns: repeat(auto-fit,minmax(80px,1fr)); gap:6px; padding:0; background:none; } .social-profile-tabs button { min-height:38px; padding:0 7px; border-radius:12px; } .social-profile-tabs button span { font-size:13px; } .social-profile-tabs button b { font-size:8px; } .social-profile-tab-body { gap:8px; } .player-profile-pvp-v2727 { gap:6px; } .player-profile-pvp-v2727 article { min-height:56px; padding:8px 6px; border:1px solid var(--theme-border); background:var(--theme-card); } .player-profile-pvp-v2727 article small { font-size:6px; } .player-profile-pvp-v2727 article b { margin:2px 0 0; font-size:17px; } .player-profile-pvp-v2727 article em { display:block; color:var(--theme-muted); font-size:6px; font-style:normal; } .social-profile-section { gap:7px; padding:10px; border-radius:15px; } .social-reward-grid { gap:6px; } .social-reward { min-height:38px; padding:6px 8px; } .social-reward i { font-size:15px; } .social-reward b { font-size:7px; } .social-party-list.is-compact { grid-template-columns:1fr 1fr; } .social-party-summary-v2737 > p { margin:0; font-size:8px; color:var(--theme-muted); } .referral-program-card-v2737 { gap:8px; } .referral-program-card-v2737 .referral-reward-summary { min-height:58px; padding:8px; } .referral-program-card-v2737 .referral-reward-summary p { margin:2px 0 0; font-size:7px; } .referral-program-card-v2737 .referral-link-box { padding:9px; } .referral-program-card-v2737 .referral-link-box code { font-size:7px; } .referral-program-card-v2737 .referral-progress-list { max-height:190px; overflow:auto; } .profile-debug-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; } .is-compact-debug .referral-debug-button { min-height:38px; margin:0; font-size:8px; } /* Team: one glance, six slots, no overlapping strips. */ .team-window-v2737, .center-window-v2737 { display:grid; gap:10px; min-width:0; } .panel-section-head-v2737 { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-right:48px; } .panel-section-head-v2737 > span { display:flex; align-items:center; gap:10px; min-width:0; } .panel-section-head-v2737 .panel-ui-icon { width:34px; height:34px; padding:7px; border-radius:12px; background:color-mix(in srgb,var(--theme-accent) 10%,var(--theme-card)); } .panel-section-head-v2737 small { display:block; color:var(--theme-accent); font-size:6px; font-weight:950; letter-spacing:.1em; } .panel-section-head-v2737 h2 { margin:2px 0 0; font-size:20px; line-height:1; } .panel-section-head-v2737 > em { display:grid; place-items:center; min-width:40px; height:30px; padding:0 8px; border-radius:999px; background:color-mix(in srgb,var(--theme-accent) 10%,transparent); font-size:9px; font-style:normal; font-weight:950; } .team-roster-v2737 { display:grid; gap:7px; } .team-roster-card-v2737 { position:relative; display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; min-height:72px; border:1px solid var(--theme-border); border-radius:15px; background:var(--theme-card); overflow:hidden; } .team-roster-card-v2737.is-lead { border-color:color-mix(in srgb,var(--theme-accent) 65%,var(--theme-border)); box-shadow:inset 3px 0 var(--theme-accent); } .team-roster-index-v2737 { display:grid; place-items:center; align-self:stretch; background:color-mix(in srgb,var(--theme-text) 4%,transparent); color:var(--theme-muted); font-size:9px; font-weight:950; } .team-roster-main-v2737 { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:9px; min-width:0; padding:5px 8px; border:0!important; background:transparent!important; color:var(--theme-text)!important; text-align:left; } .team-roster-portrait-v2737 { width:60px; height:60px; } .team-roster-copy-v2737 { display:grid; gap:4px; min-width:0; } .team-roster-copy-v2737 > span { display:flex; align-items:center; gap:5px; } .team-roster-copy-v2737 > span b { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .team-roster-copy-v2737 > span i { color:#f5b51d; font-size:10px; font-style:normal; } .team-roster-copy-v2737 > em { display:flex; align-items:center; flex-wrap:wrap; gap:5px; color:var(--theme-muted); font-size:7px; font-style:normal; } .team-roster-copy-v2737 .pokemon-type-badges { display:inline-flex; } .team-roster-level-v2737 { height:5px; overflow:hidden; border-radius:99px; background:color-mix(in srgb,var(--theme-text) 7%,transparent); } .team-roster-level-v2737 i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--theme-accent),#67c6f3); } .team-roster-main-v2737 > strong { min-width:42px; color:var(--theme-accent); font-size:13px; text-align:right; } .team-roster-main-v2737 > strong small { display:block; color:var(--theme-muted); font-size:6px; } .team-roster-actions-v2737 { display:grid; gap:4px; align-content:center; padding:5px 6px 5px 0; } .team-roster-actions-v2737 button, .team-roster-actions-v2737 span { display:grid; place-items:center; min-width:56px; min-height:25px; padding:0 6px; border:1px solid var(--theme-border); border-radius:9px; background:var(--theme-surface-soft); color:var(--theme-muted); font-size:6px; font-weight:900; } .team-roster-actions-v2737 span { color:var(--theme-accent); } .team-roster-card-v2737.is-empty { grid-template-columns:32px 42px 1fr; min-height:54px; border-style:dashed; color:var(--theme-muted); } .team-roster-card-v2737.is-empty > i { display:grid; place-items:center; width:32px; height:32px; border:1px dashed var(--theme-border); border-radius:50%; } .team-roster-card-v2737.is-empty > div b { display:block; font-size:9px; } .team-roster-card-v2737.is-empty > div small { font-size:7px; } .team-summary-v2737 { display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:7px; } .team-summary-v2737 > span { display:grid; place-items:center; min-height:45px; border:1px solid var(--theme-border); border-radius:12px; background:var(--theme-surface-soft); } .team-summary-v2737 small { color:var(--theme-muted); font-size:6px; } .team-summary-v2737 b { font-size:14px; } .team-summary-v2737 .panel-primary { min-height:45px; } /* Pokécenter is a compact storage list, not a wall of text. */ .center-list-v2737 { display:grid; grid-template-columns:1fr 1fr; gap:7px; max-height:min(58vh,520px); overflow:auto; padding-right:2px; } .center-card-v2737 { grid-template-columns:62px minmax(0,1fr); gap:8px; padding:8px; min-width:0; } .center-card-v2737 .center-portrait { width:58px; height:58px; } .center-card-copy-v2737 { min-width:0; } .center-card-copy-v2737 > span b { display:block; overflow:hidden; margin:2px 0; font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .center-card-copy-v2737 > span small { font-size:6px; } .center-card-copy-v2737 > em { display:flex; flex-wrap:wrap; gap:5px; align-items:center; color:var(--theme-muted); font-size:7px; font-style:normal; } .center-actions-v2737 { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; } .center-actions-v2737 button { min-height:30px; padding:0 6px; border-radius:9px; font-size:7px; } .center-actions-v2737 .is-evolve { color:#7b52d6; border-color:rgba(128,85,218,.28); background:rgba(128,85,218,.07); } /* Inventory: compact browser; modal never creates a second giant window. */ .game-screen .side-panel.is-inventory-panel #sidePanelContent { overflow:hidden; } .inventory-shell-v2735, .inventory-shell-v2736 { height:auto; min-height:0; } .inventory-header-v2735 { grid-template-columns:minmax(200px,.8fr) minmax(340px,1.2fr); } .inventory-header-v2735 h2 { margin-right:45px; font-size:24px; } .inventory-tabs-v2735 { grid-template-columns:repeat(5,minmax(0,1fr)); } .inventory-tabs-v2735 button { min-height:48px; padding:6px 8px; } .inventory-tabs-v2735 button b { font-size:8px; } .inventory-grid-v2735 { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:min(48vh,420px); overflow:auto; } .inventory-card-v2735 { min-height:82px; } .inventory-modal-v2735, .inventory-modal-v2736 { position:absolute; inset:0; padding:10px; } .inventory-modal-scrim-v2735 { border-radius:20px; background:rgba(15,34,49,.22); backdrop-filter:blur(4px); } .inventory-item-sheet-v2735, .inventory-item-sheet-v2736 { width:min(480px,calc(100% - 14px)); max-height:calc(100% - 14px); padding:14px; border-radius:20px; } .inventory-item-sheet-v2736 > header p { -webkit-line-clamp:1; } .inventory-lots-v2736 { max-height:116px; } .inventory-actions-v2736 { grid-template-columns:80px repeat(4,minmax(0,1fr)); } /* Quest, settings and mechanics stay compact and use the same typography. */ .game-screen .side-panel.is-quest-panel, .game-screen .side-panel.is-settings-panel, .game-screen .side-panel.is-mechanics-panel { width:min(500px,calc(100vw - 130px)); } .discovery-list, .settings-grid, .mechanics-grid { gap:7px; } .quest-card, .discovery-list article, .audio-settings, .binding-row, .theme-settings { border-radius:14px; } /* Dialogue and transfer windows are bounded, with one obvious close action. */ .dialogue-card { width:min(760px,calc(100vw - 48px)); max-height:min(72vh,560px); } .professor-transfer-card-shell { width:min(540px,calc(100vw - 48px)); max-height:min(72vh,580px); } .professor-transfer-list { max-height:min(42vh,330px); overflow:auto; } /* Battle HUD follows the same compact card language. */ .game-screen .battle-panel { width:min(620px,calc(100vw - 36px)); padding:12px; border-radius:20px; } .battle-status { gap:10px; } .battle-status small { font-size:6px; letter-spacing:.08em; } .battle-status b { font-size:16px; } .battle-controls button { min-height:32px; font-size:7px; } .battle-health { gap:7px; } .battle-health article { padding:8px; border-radius:13px; } .battle-skills { grid-template-columns:repeat(2,minmax(0,1fr)); } .battle-skills button { min-height:54px; border-radius:13px; } .capture-panel { border-radius:14px; } /* Chat remains resizable on desktop, but uses the same compact controls. */ .chat-panel { border-radius:20px; } .chat-head-actions button { width:34px; height:34px; border-radius:10px; } @media (max-width:800px) { .game-screen .side-panel, .game-screen .side-panel.is-social-profile, .game-screen .side-panel.is-inventory-panel, .game-screen .side-panel.is-team-panel, .game-screen .side-panel.is-center-panel, .game-screen .side-panel.is-pokedex-detail, .game-screen .side-panel.is-quest-panel, .game-screen .side-panel.is-settings-panel, .game-screen .side-panel.is-mechanics-panel { top:max(54px,calc(env(safe-area-inset-top) + 50px)); right:max(6px,env(safe-area-inset-right)); bottom:calc(70px + env(safe-area-inset-bottom)); left:max(6px,env(safe-area-inset-left)); width:auto; height:auto; max-width:none; max-height:none; padding:12px; border-radius:20px; overflow:hidden; } #sidePanelContent { max-height:100%; overflow:auto; padding-right:0; } .game-screen .side-panel > .panel-close { top:10px; right:10px; width:40px; height:40px; } .panel-title { font-size:22px; margin-right:48px; } .panel-lead { font-size:9px; } .social-profile-hero-v2727 { grid-template-columns:58px minmax(0,1fr); min-height:76px; padding:9px 46px 9px 9px; } .social-profile-trainer { width:54px; height:54px; } .social-profile-hero-v2727 h2 { font-size:18px; } .social-profile-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); } .social-profile-tabs button { min-height:36px; gap:3px; padding:0 4px; } .social-profile-tabs button span { font-size:11px; } .social-profile-tabs button b { font-size:6.5px; } .player-profile-pvp-v2727 { grid-template-columns:repeat(4,minmax(0,1fr)); } .player-profile-pvp-v2727 article { min-height:50px; } .player-profile-pvp-v2727 article b { font-size:15px; } .social-reward-grid { grid-template-columns:1fr 1fr; } .social-party-list.is-compact { grid-template-columns:1fr; } .team-roster-main-v2737 { grid-template-columns:54px minmax(0,1fr) auto; } .team-roster-portrait-v2737 { width:50px; height:50px; } .team-roster-actions-v2737 button, .team-roster-actions-v2737 span { min-width:48px; } .team-summary-v2737 { grid-template-columns:1fr 1fr; } .team-summary-v2737 .panel-primary { grid-column:1/-1; } .center-list-v2737 { grid-template-columns:1fr; max-height:none; overflow:visible; } .inventory-header-v2735 { grid-template-columns:1fr; } .inventory-header-tools-v2735 { grid-template-columns:1fr 42px; } .inventory-count-pills-v2734 { display:none; } .inventory-tabs-v2735 { grid-template-columns:repeat(3,minmax(0,1fr)); } .inventory-tabs-v2735 button { min-height:46px; } .inventory-grid-v2735 { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:none; overflow:visible; } .inventory-item-sheet-v2735, .inventory-item-sheet-v2736 { width:100%; max-height:100%; } .inventory-actions-v2736 { grid-template-columns:repeat(2,minmax(0,1fr)); } .inventory-actions-v2736 label { grid-column:1/-1; grid-template-columns:1fr 82px; } .game-screen .battle-panel { right:6px; bottom:calc(74px + env(safe-area-inset-bottom)); left:6px; width:auto; max-height:54vh; overflow:auto; } .battle-skills { grid-template-columns:1fr 1fr; } .dialogue-card { width:calc(100vw - 12px); max-height:calc(100dvh - 90px); } .professor-transfer-card-shell { width:calc(100vw - 12px); max-height:calc(100dvh - 90px); } } /* v2.7.38 — Inventory rebuilt as a compact desktop window + independent item dialog */ .game-screen .side-panel.is-inventory-panel { top: 78px; right: 24px; width: min(900px, calc(100vw - 116px)); height: min(660px, calc(100vh - 118px)); padding: 18px; } .game-screen .side-panel.is-inventory-panel > .panel-close { z-index: 8; border-radius: 14px; } .inventory-v2738 { display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 12px; width: 100%; height: 100%; min-width: 0; min-height: 0; color: var(--theme-text); } .inventory-v2738__header { display: grid; grid-template-columns: minmax(200px,.7fr) minmax(420px,1.3fr); gap: 18px; align-items: center; padding-right: 50px; } .inventory-v2738__title { display: flex; align-items: center; gap: 11px; min-width: 0; } .inventory-v2738__title > span { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border: 1px solid var(--theme-border); border-radius: 15px; background: color-mix(in srgb,var(--theme-accent) 9%,var(--theme-card)); } .inventory-v2738__title-icon { width: 28px; height: 28px; } .inventory-v2738__title small { display: block; color: var(--theme-accent); font-size: 7px; font-weight: 950; letter-spacing: .11em; } .inventory-v2738__title h2 { margin: 2px 0 1px; color: var(--theme-text); font-size: 23px; line-height: 1; } .inventory-v2738__title p { margin: 0; color: var(--theme-muted); font-size: 8px; } .inventory-v2738__tools { display: grid; grid-template-columns: minmax(190px,1fr) 150px 72px; gap: 8px; min-width: 0; } .inventory-v2738__search, .inventory-v2738__sort { display: flex; align-items: center; min-width: 0; height: 40px; border: 1px solid var(--theme-border); border-radius: 13px; background: var(--theme-input); } .inventory-v2738__search { gap: 7px; padding: 0 10px; } .inventory-v2738__search .ui-icon { width: 16px; height: 16px; color: var(--theme-muted); } .inventory-v2738__search input, .inventory-v2738__sort select { min-width: 0; width: 100%; height: 100%; padding: 0; border: 0 !important; outline: 0; background: transparent !important; color: var(--theme-text) !important; font-size: 9px; font-weight: 800; } .inventory-v2738__sort { position: relative; padding: 0 8px; } .inventory-v2738__sort > span { position: absolute; top: 4px; left: 9px; color: var(--theme-muted); font-size: 5px; font-weight: 900; pointer-events: none; } .inventory-v2738__sort select { padding-top: 8px; } .inventory-v2738__view { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--theme-border); border-radius: 13px; background: var(--theme-input); } .inventory-v2738__view button { display: grid; place-items: center; min-width: 0; border: 0; border-radius: 9px; background: transparent; color: var(--theme-muted); cursor: pointer; } .inventory-v2738__view button.is-active { background: color-mix(in srgb,var(--theme-accent) 14%,var(--theme-card)); color: var(--theme-accent); } .inventory-v2738__view .ui-icon { width: 15px; height: 15px; } .inventory-v2738__summary { position: absolute; top: 18px; right: 72px; display: none; } .inventory-v2738__categories { display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); gap: 6px; } .inventory-v2738__categories button { display: grid; grid-template-columns: 26px minmax(0,1fr); align-items: center; gap: 7px; min-width: 0; min-height: 48px; padding: 7px 8px; border: 1px solid var(--theme-border); border-radius: 13px; background: var(--theme-card); color: var(--theme-muted); text-align: left; cursor: pointer; transition: border-color .15s,background .15s,transform .15s; } .inventory-v2738__categories button:hover { transform: translateY(-1px); border-color: color-mix(in srgb,var(--theme-accent) 48%,var(--theme-border)); } .inventory-v2738__categories button.is-active { border-color: var(--theme-accent); background: color-mix(in srgb,var(--theme-accent) 10%,var(--theme-card)); color: var(--theme-text); box-shadow: inset 0 -2px color-mix(in srgb,var(--theme-accent) 60%,transparent); } .inventory-v2738__categories .inventory-category-icon { width: 25px; height: 25px; } .inventory-v2738__categories button > span { display: grid; min-width: 0; gap: 1px; } .inventory-v2738__categories b { overflow: hidden; font-size: 7px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .inventory-v2738__categories small { color: var(--theme-muted); font-size: 7px; } .inventory-v2738__content { min-width: 0; min-height: 0; overflow: hidden; border-top: 1px solid color-mix(in srgb,var(--theme-border) 75%,transparent); padding-top: 12px; } .inventory-v2738__items { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: start; gap: 9px; width: 100%; height: 100%; min-height: 0; overflow: auto; padding: 1px 3px 10px 1px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--theme-muted) 42%,transparent) transparent; } .inventory-v2738.is-list .inventory-v2738__items { grid-template-columns: 1fr; } .inventory-item-v2738 { position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 10px; align-items: center; min-width: 0; min-height: 92px; padding: 10px 11px; border: 1px solid var(--theme-border); border-radius: 17px; background: var(--theme-card); color: var(--theme-text); text-align: left; cursor: pointer; box-shadow: 0 7px 17px rgba(5,31,45,.06); transition: transform .14s,border-color .14s,background .14s,box-shadow .14s; } .inventory-item-v2738:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--theme-accent) 50%,var(--theme-border)); background: var(--theme-card-hover); box-shadow: 0 11px 24px rgba(5,31,45,.10); } .inventory-v2738.is-list .inventory-item-v2738 { grid-template-columns: 54px minmax(0,1fr) auto; min-height: 72px; } .inventory-item-v2738__art { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: color-mix(in srgb,var(--theme-accent) 8%,var(--theme-surface-soft)); } .inventory-item-v2738__art .item-icon { width: 48px; height: 48px; } .inventory-item-v2738__copy { display: grid; gap: 4px; min-width: 0; } .inventory-item-v2738__copy > b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .inventory-item-v2738__copy > small { color: var(--theme-muted); font-size: 7px; } .inventory-item-v2738__copy > i { justify-self: start; display: inline-flex; align-items: center; max-width: 100%; min-height: 19px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb,var(--theme-text) 5%,transparent); color: var(--theme-muted); font-size: 7px; font-style: normal; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inventory-item-v2738__copy > i.is-tradable { background: rgba(53,169,221,.11); color: #3da5d6; } .inventory-item-v2738__copy > i.is-protected { background: rgba(224,171,65,.11); color: #d3a33f; } .inventory-item-v2738__copy > i.is-usable { background: rgba(75,190,126,.11); color: #43ad73; } .inventory-item-v2738 > em { position: absolute; top: 8px; right: 8px; min-width: 29px; height: 24px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb,var(--theme-text) 7%,var(--theme-card)); color: var(--theme-text); font-size: 9px; font-style: normal; font-weight: 950; } .inventory-v2738.is-list .inventory-item-v2738 > em { position: static; min-width: 48px; } .inventory-v2738__empty { grid-column: 1/-1; display: grid; place-items: center; align-content: center; gap: 6px; min-height: 210px; border: 1px dashed var(--theme-border); border-radius: 18px; color: var(--theme-muted); background: color-mix(in srgb,var(--theme-card) 75%,transparent); } .inventory-v2738__empty .inventory-category-icon { width: 36px; height: 36px; opacity: .65; } .inventory-v2738__empty b { color: var(--theme-text); font-size: 11px; } .inventory-v2738__empty small { font-size: 8px; } /* Independent item dialog: never participates in inventory panel layout. */ .inventory-item-dialog-v2738 { position: fixed; inset: 0; z-index: 190; display: none; place-items: center; padding: 22px; pointer-events: none; } .inventory-item-dialog-v2738.is-open { display: grid; pointer-events: auto; } .inventory-item-dialog-v2738__backdrop { position: absolute; inset: 0; background: rgba(4,18,27,.38); backdrop-filter: blur(5px); } .inventory-item-dialog-v2738__content { position: relative; z-index: 1; width: min(460px, calc(100vw - 36px)); max-height: min(560px, calc(100vh - 80px)); } .inventory-item-dialog-card-v2738 { position: relative; display: grid; gap: 12px; width: 100%; max-height: inherit; overflow: auto; padding: 18px; border: 1px solid var(--theme-border); border-radius: 23px; background: var(--theme-surface); color: var(--theme-text); box-shadow: 0 28px 80px rgba(0,0,0,.28); } .inventory-item-dialog-card-v2738__close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--theme-border); border-radius: 13px; background: var(--theme-surface-soft); color: var(--theme-text); font-size: 22px; cursor: pointer; } .inventory-item-dialog-card-v2738 > header { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: 12px; align-items: center; padding-right: 42px; } .inventory-item-dialog-card-v2738__art { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 19px; background: color-mix(in srgb,var(--theme-accent) 9%,var(--theme-surface-soft)); } .inventory-item-dialog-card-v2738__art .item-icon { width: 58px; height: 58px; } .inventory-item-dialog-card-v2738 header small { color: var(--theme-accent); font-size: 7px; font-weight: 950; letter-spacing: .07em; } .inventory-item-dialog-card-v2738 header h3 { margin: 2px 0 4px; font-size: 19px; line-height: 1.08; } .inventory-item-dialog-card-v2738 header p { margin: 0; color: var(--theme-muted); font-size: 9px; line-height: 1.4; } .inventory-item-dialog-card-v2738 header strong { align-self: start; min-width: 36px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb,var(--theme-text) 7%,var(--theme-card)); font-size: 9px; } .inventory-item-dialog-card-v2738__availability { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; } .inventory-item-dialog-card-v2738__availability > span { display: grid; place-items: center; min-height: 58px; border: 1px solid var(--theme-border); border-radius: 13px; background: var(--theme-card); } .inventory-item-dialog-card-v2738__availability b { font-size: 15px; } .inventory-item-dialog-card-v2738__availability small { color: var(--theme-muted); font-size: 6px; } .inventory-item-dialog-card-v2738__availability .is-on { border-color: rgba(64,181,124,.38); background: rgba(64,181,124,.06); } .inventory-item-dialog-card-v2738__availability .is-lock { border-color: rgba(222,171,64,.38); background: rgba(222,171,64,.06); } .inventory-item-dialog-card-v2738__notice { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid rgba(222,171,64,.28); border-radius: 13px; background: rgba(222,171,64,.06); } .inventory-item-dialog-card-v2738__notice .ui-icon { width: 19px; height: 19px; } .inventory-item-dialog-card-v2738__notice b { display: block; font-size: 8px; } .inventory-item-dialog-card-v2738__notice small { color: var(--theme-muted); font-size: 7px; } .inventory-item-dialog-card-v2738__lots { border: 1px solid var(--theme-border); border-radius: 13px; overflow: hidden; } .inventory-item-dialog-card-v2738__lots summary { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 10px; cursor: pointer; color: var(--theme-text); font-size: 8px; font-weight: 900; list-style: none; } .inventory-item-dialog-card-v2738__lots summary::-webkit-details-marker { display:none; } .inventory-item-dialog-card-v2738__lots summary span { min-width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb,var(--theme-accent) 10%,transparent); } .inventory-item-dialog-card-v2738__lots > div { display: grid; gap: 5px; padding: 0 7px 7px; } .inventory-item-dialog-card-v2738__lots article { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; min-height: 40px; padding: 6px 8px; border-radius: 10px; background: var(--theme-surface-soft); } .inventory-item-dialog-card-v2738__lots article b { display:block; font-size:8px; } .inventory-item-dialog-card-v2738__lots article small { color:var(--theme-muted); font-size:6px; } .inventory-item-dialog-card-v2738__lots article em { font-size:8px; font-style:normal; font-weight:900; } .inventory-item-dialog-card-v2738 > footer { display: grid; gap: 8px; } .inventory-item-dialog-card-v2738 > footer > label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--theme-muted); font-size: 8px; font-weight: 900; } .inventory-item-dialog-card-v2738 > footer input { width: 84px; height: 34px; border: 1px solid var(--theme-border) !important; border-radius: 10px; background: var(--theme-input) !important; color: var(--theme-text) !important; text-align: center; font-weight: 900; } .inventory-item-dialog-card-v2738__actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; } .inventory-item-dialog-card-v2738__actions button { display: grid; place-items: center; gap: 4px; min-width: 0; min-height: 48px; padding: 6px 4px; border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-card); color: var(--theme-text); font-size: 7px; font-weight: 900; cursor: pointer; } .inventory-item-dialog-card-v2738__actions .ui-icon { width: 17px; height: 17px; } .inventory-item-dialog-card-v2738__actions button.is-use { border-color: rgba(52,157,225,.36); background: rgba(52,157,225,.07); } .inventory-item-dialog-card-v2738__actions button.is-trade { border-color: rgba(67,184,125,.36); background: rgba(67,184,125,.07); } .inventory-item-dialog-card-v2738__actions button.is-sell { border-color: rgba(221,168,63,.36); background: rgba(221,168,63,.07); } .inventory-item-dialog-card-v2738__actions button.is-danger { color:#df6666; border-color:rgba(223,102,102,.30); background:rgba(223,102,102,.06); } .inventory-item-dialog-card-v2738__actions button:disabled { opacity:.32; cursor:not-allowed; } html[data-game-theme="light"] .inventory-item-v2738 { box-shadow: 0 7px 18px rgba(45,93,121,.06); } html[data-game-theme="light"] .inventory-item-dialog-v2738__backdrop { background: rgba(25,54,72,.24); } html[data-game-theme="dark"] .inventory-item-v2738 { box-shadow: none; } html[data-game-theme="dark"] .inventory-item-dialog-card-v2738 { box-shadow: 0 28px 80px rgba(0,0,0,.5); } @media (max-width: 1050px) and (min-width: 761px) { .game-screen .side-panel.is-inventory-panel { width: min(820px,calc(100vw - 60px)); } .inventory-v2738__header { grid-template-columns: 1fr; gap: 10px; } .inventory-v2738__tools { grid-template-columns: minmax(180px,1fr) 150px 72px; } .inventory-v2738__categories { grid-template-columns: repeat(5,minmax(0,1fr)); } .inventory-v2738__items { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width:760px) { .game-screen .side-panel.is-inventory-panel { top: max(8px,env(safe-area-inset-top)); right: 6px; bottom: calc(66px + env(safe-area-inset-bottom)); left: 6px; width: auto; height: auto; max-height: none; padding: 12px; border-radius: 22px; } .game-screen .side-panel.is-inventory-panel > .panel-close { top: 10px; right: 10px; width: 40px; height: 40px; } .inventory-v2738 { gap: 9px; } .inventory-v2738__header { grid-template-columns: 1fr; gap: 9px; padding-right: 42px; } .inventory-v2738__title > span { width: 40px; height: 40px; border-radius: 13px; } .inventory-v2738__title-icon { width: 24px; height: 24px; } .inventory-v2738__title h2 { font-size: 20px; } .inventory-v2738__tools { grid-template-columns: minmax(0,1fr) 44px; gap: 7px; } .inventory-v2738__search { height: 40px; } .inventory-v2738__sort { grid-column: 1/2; height: 36px; } .inventory-v2738__view { grid-column: 2/3; grid-row: 1/3; } .inventory-v2738__categories { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .inventory-v2738__categories::-webkit-scrollbar { display:none; } .inventory-v2738__categories button { flex: 0 0 72px; grid-template-columns: 1fr; justify-items: center; gap: 3px; min-height: 54px; padding: 5px; text-align: center; } .inventory-v2738__categories .inventory-category-icon { width: 23px; height: 23px; } .inventory-v2738__categories b { max-width: 64px; font-size: 7px; } .inventory-v2738__categories small { font-size: 6px; } .inventory-v2738__content { padding-top: 8px; } .inventory-v2738__items { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; } .inventory-v2738.is-list .inventory-v2738__items { grid-template-columns: 1fr; } .inventory-item-v2738 { grid-template-columns: 48px minmax(0,1fr); min-height: 80px; padding: 8px; border-radius: 14px; } .inventory-item-v2738__art { width: 48px; height: 48px; border-radius: 13px; } .inventory-item-v2738__art .item-icon { width: 40px; height: 40px; } .inventory-item-v2738__copy > b { font-size: 9px; } .inventory-item-v2738__copy > small,.inventory-item-v2738__copy > i { font-size: 6px; } .inventory-item-dialog-v2738 { align-items: end; padding: 8px 8px calc(68px + env(safe-area-inset-bottom)); } .inventory-item-dialog-v2738__content { width:100%; max-height:min(74vh,590px); } .inventory-item-dialog-card-v2738 { max-height:inherit; padding:14px; border-radius:22px 22px 18px 18px; } .inventory-item-dialog-card-v2738 > header { grid-template-columns:62px minmax(0,1fr) auto; gap:9px; padding-right:38px; } .inventory-item-dialog-card-v2738__art { width:62px; height:62px; border-radius:16px; } .inventory-item-dialog-card-v2738__art .item-icon { width:50px; height:50px; } .inventory-item-dialog-card-v2738 header h3 { font-size:17px; } .inventory-item-dialog-card-v2738__availability { grid-template-columns:repeat(2,1fr); } .inventory-item-dialog-card-v2738__actions { grid-template-columns:repeat(2,1fr); } .inventory-item-dialog-card-v2738__actions button { min-height:46px; } } .inventory-v2738__categories b { overflow: visible; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.05; text-overflow: clip; white-space: normal; } /* v2.7.39 — game-ready compact inventory */ .game-screen .side-panel.is-inventory-panel { width: min(780px, calc(100vw - 96px)); height: min(590px, calc(100vh - 126px)); max-height: none; } .game-screen .side-panel.is-inventory-panel.has-inventory-dialog > .panel-close { opacity: 0; pointer-events: none; } .inventory-v2739 { display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 10px; width: 100%; height: 100%; min-height: 0; } .inventory-v2739__header { display: grid; grid-template-columns: minmax(190px,.7fr) minmax(380px,1.3fr); align-items: center; gap: 14px; padding-right: 48px; } .inventory-v2739__heading { display:flex; align-items:center; gap:10px; min-width:0; } .inventory-v2739__heading > span { display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px; border:1px solid var(--theme-border); border-radius:14px; background:color-mix(in srgb,var(--theme-accent) 9%,var(--theme-card)); } .inventory-v2739__heading-icon { width:27px; height:27px; } .inventory-v2739__heading small { display:block; color:var(--theme-accent); font-size:7px; font-weight:950; letter-spacing:.1em; } .inventory-v2739__heading h2 { margin:2px 0 1px; font-size:22px; line-height:1; } .inventory-v2739__heading p { margin:0; color:var(--theme-muted); font-size:8px; } .inventory-v2739__toolbar { display:grid; grid-template-columns:minmax(150px,1fr) 145px 70px; gap:7px; min-width:0; } .inventory-v2739__search, .inventory-v2739__sort { display:flex; align-items:center; gap:7px; min-width:0; height:38px; padding:0 9px; border:1px solid var(--theme-border); border-radius:12px; background:var(--theme-input); } .inventory-v2739__search .ui-icon,.inventory-v2739__sort .ui-icon { width:15px; height:15px; color:var(--theme-muted); flex:0 0 auto; } .inventory-v2739__search input,.inventory-v2739__sort select { min-width:0; width:100%; height:100%; border:0 !important; outline:0; padding:0; background:transparent !important; color:var(--theme-text) !important; font-size:9px; font-weight:800; } .inventory-v2739__view { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border:1px solid var(--theme-border); border-radius:12px; background:var(--theme-input); } .inventory-v2739__view button { display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--theme-muted); cursor:pointer; } .inventory-v2739__view button.is-active { color:var(--theme-accent); background:color-mix(in srgb,var(--theme-accent) 14%,var(--theme-card)); } .inventory-v2739__view .ui-icon { width:15px; height:15px; } .inventory-v2739__meta { position:absolute; top:15px; right:69px; display:none; } .inventory-v2739__categories { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:5px; } .inventory-v2739__categories button { position:relative; display:grid; justify-items:center; align-content:center; gap:2px; min-width:0; min-height:57px; padding:5px 3px; border:1px solid var(--theme-border); border-radius:12px; background:var(--theme-card); color:var(--theme-muted); cursor:pointer; transition:transform .14s,border-color .14s,background .14s,color .14s; } .inventory-v2739__categories button:hover { transform:translateY(-1px); color:var(--theme-text); border-color:color-mix(in srgb,var(--theme-accent) 44%,var(--theme-border)); } .inventory-v2739__categories button.is-active { color:var(--theme-accent); border-color:var(--theme-accent); background:color-mix(in srgb,var(--theme-accent) 10%,var(--theme-card)); } .inventory-v2739__categories .inventory-category-icon { width:24px; height:24px; } .inventory-v2739__categories button > span { width:100%; overflow:hidden; font-size:7px; font-weight:900; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; text-align:center; } .inventory-v2739__categories button > i { position:absolute; top:4px; right:5px; display:grid; place-items:center; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:color-mix(in srgb,var(--theme-text) 6%,var(--theme-card)); color:var(--theme-muted); font-size:6px; font-style:normal; font-weight:900; } .inventory-v2739__content { min-height:0; padding-top:9px; border-top:1px solid color-mix(in srgb,var(--theme-border) 76%,transparent); overflow:hidden; } .inventory-v2739__items { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:start; gap:8px; height:100%; overflow:auto; padding:1px 3px 8px 1px; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--theme-muted) 35%,transparent) transparent; } .inventory-v2739.is-list .inventory-v2739__items { grid-template-columns:1fr; } .inventory-item-v2739 { display:grid; grid-template-rows:58px auto auto; gap:6px; align-content:start; min-height:116px; padding:8px; border:1px solid var(--theme-border); border-radius:15px; background:var(--theme-card); color:var(--theme-text); text-align:left; cursor:pointer; box-shadow:0 5px 14px rgba(8,37,54,.05); transition:transform .14s,border-color .14s,box-shadow .14s,background .14s; } .inventory-item-v2739:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--theme-accent) 48%,var(--theme-border)); box-shadow:0 9px 20px rgba(8,37,54,.09); background:var(--theme-card-hover); } .inventory-item-v2739:focus-visible { outline:2px solid var(--theme-accent); outline-offset:2px; } .inventory-item-v2739__art { position:relative; display:grid; place-items:center; justify-self:center; width:58px; height:58px; border-radius:15px; background:color-mix(in srgb,var(--theme-accent) 7%,var(--theme-surface-soft)); } .inventory-item-v2739__art .item-icon { width:48px; height:48px; } .inventory-item-v2739__art > em { position:absolute; right:-6px; bottom:-4px; display:grid; place-items:center; min-width:27px; height:21px; padding:0 6px; border:2px solid var(--theme-card); border-radius:999px; background:var(--theme-text); color:var(--theme-surface); font-size:8px; font-style:normal; font-weight:950; } .inventory-item-v2739__name { display:grid; gap:2px; min-width:0; text-align:center; } .inventory-item-v2739__name b { overflow:hidden; font-size:9px; line-height:1.12; text-overflow:ellipsis; white-space:nowrap; } .inventory-item-v2739__name small { color:var(--theme-muted); font-size:6px; } .inventory-item-v2739__rights { display:flex; justify-content:center; gap:4px; min-height:20px; } .inventory-item-v2739__rights i { display:flex; align-items:center; gap:3px; min-width:24px; height:20px; padding:0 5px; border-radius:999px; background:color-mix(in srgb,var(--theme-text) 5%,transparent); color:var(--theme-muted); font-style:normal; } .inventory-item-v2739__rights .ui-icon { width:11px; height:11px; } .inventory-item-v2739__rights b { font-size:7px; } .inventory-item-v2739__rights i.is-locked { color:#c48e29; background:rgba(222,171,64,.10); } .inventory-item-v2739__rights i.is-usable { color:#3eaa70; background:rgba(64,181,124,.10); } .inventory-v2739.is-list .inventory-item-v2739 { grid-template-columns:48px minmax(0,1fr) auto; grid-template-rows:auto; min-height:66px; align-items:center; } .inventory-v2739.is-list .inventory-item-v2739__art { width:48px; height:48px; } .inventory-v2739.is-list .inventory-item-v2739__art .item-icon { width:40px; height:40px; } .inventory-v2739.is-list .inventory-item-v2739__name { text-align:left; } .inventory-v2739.is-list .inventory-item-v2739__rights { justify-content:flex-end; } .inventory-v2739__empty { grid-column:1/-1; display:grid; place-items:center; align-content:center; gap:5px; min-height:180px; border:1px dashed var(--theme-border); border-radius:16px; color:var(--theme-muted); background:color-mix(in srgb,var(--theme-card) 75%,transparent); } .inventory-v2739__empty .inventory-category-icon { width:34px; height:34px; opacity:.7; } .inventory-v2739__empty b { font-size:10px; color:var(--theme-text); } .inventory-v2739__empty small { font-size:7px; } /* Independent item actions window */ .inventory-item-dialog-v2739 { animation:none; } .inventory-item-dialog-v2739.is-open .inventory-item-dialog-v2738__backdrop { animation:inventoryBackdropIn .15s ease both; } .inventory-item-dialog-v2739.is-open .inventory-item-dialog-v2738__content { animation:inventoryCardIn .18s cubic-bezier(.2,.8,.2,1) both; } @keyframes inventoryBackdropIn { from { opacity:0 } to { opacity:1 } } @keyframes inventoryCardIn { from { opacity:0; transform:translateY(8px) scale(.975) } to { opacity:1; transform:none } } .inventory-item-dialog-v2739 .inventory-item-dialog-v2738__content { width:min(420px,calc(100vw - 32px)); } .inventory-item-dialog-card-v2739 { gap:10px; max-height:none; overflow:visible; padding:16px; border-radius:21px; background:var(--theme-surface); } .inventory-item-dialog-card-v2739__close { position:absolute; top:11px; right:11px; z-index:3; display:grid; place-items:center; width:37px; height:37px; border:1px solid var(--theme-border); border-radius:12px; background:var(--theme-surface-soft); color:var(--theme-text); font-size:22px; cursor:pointer; } .inventory-item-dialog-card-v2739__header { display:grid; grid-template-columns:68px minmax(0,1fr) auto; align-items:center; gap:11px; padding-right:38px; } .inventory-item-dialog-card-v2739__art { display:grid; place-items:center; width:68px; height:68px; border-radius:18px; background:color-mix(in srgb,var(--theme-accent) 8%,var(--theme-surface-soft)); } .inventory-item-dialog-card-v2739__art .item-icon { width:55px; height:55px; } .inventory-item-dialog-card-v2739__header small { display:block; color:var(--theme-accent); font-size:7px; font-weight:950; } .inventory-item-dialog-card-v2739__header h3 { margin:2px 0 4px; font-size:18px; line-height:1.05; } .inventory-item-dialog-card-v2739__header p { margin:0; color:var(--theme-muted); font-size:8px; line-height:1.35; } .inventory-item-dialog-card-v2739__header > strong { align-self:start; display:grid; place-items:center; min-width:34px; height:26px; border-radius:999px; background:color-mix(in srgb,var(--theme-text) 7%,var(--theme-card)); font-size:8px; } .inventory-item-dialog-card-v2739__rights { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; } .inventory-item-dialog-card-v2739__rights > span { display:grid; grid-template-columns:14px auto; grid-template-rows:auto auto; align-items:center; justify-content:center; column-gap:4px; min-height:48px; padding:5px; border:1px solid var(--theme-border); border-radius:12px; background:var(--theme-card); } .inventory-item-dialog-card-v2739__rights .ui-icon { grid-row:1/3; width:13px; height:13px; color:var(--theme-muted); } .inventory-item-dialog-card-v2739__rights b { font-size:12px; line-height:1; } .inventory-item-dialog-card-v2739__rights small { color:var(--theme-muted); font-size:5.5px; white-space:nowrap; } .inventory-item-dialog-card-v2739__rights > span.is-good { border-color:rgba(64,181,124,.32); background:rgba(64,181,124,.05); } .inventory-item-dialog-card-v2739__rights > span.is-lock { border-color:rgba(222,171,64,.32); background:rgba(222,171,64,.05); } .inventory-item-dialog-card-v2739__notice { display:grid; grid-template-columns:22px 1fr; gap:7px; align-items:center; padding:8px 9px; border:1px solid rgba(222,171,64,.25); border-radius:12px; background:rgba(222,171,64,.055); } .inventory-item-dialog-card-v2739__notice .ui-icon { width:16px; height:16px; color:#c69232; } .inventory-item-dialog-card-v2739__notice b { display:block; font-size:7px; } .inventory-item-dialog-card-v2739__notice small { color:var(--theme-muted); font-size:6px; } .inventory-item-dialog-card-v2739__quantity { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:38px; color:var(--theme-muted); font-size:7px; font-weight:900; } .inventory-item-dialog-card-v2739__quantity > div { display:flex; align-items:center; gap:5px; } .inventory-item-dialog-card-v2739__quantity button,.inventory-item-dialog-card-v2739__quantity input { height:34px; border:1px solid var(--theme-border) !important; border-radius:10px; background:var(--theme-input) !important; color:var(--theme-text) !important; text-align:center; font-size:10px; font-weight:900; } .inventory-item-dialog-card-v2739__quantity button { min-width:34px; padding:0 9px; cursor:pointer; } .inventory-item-dialog-card-v2739__quantity input { width:48px; } .inventory-item-dialog-card-v2739__quantity button.is-max { min-width:52px; font-size:7px; } .inventory-item-dialog-card-v2739__actions { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .inventory-item-dialog-card-v2739__actions button { display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:5px; min-width:0; min-height:42px; padding:0 9px; border:1px solid var(--theme-border); border-radius:11px; background:var(--theme-card); color:var(--theme-text); font-size:7px; font-weight:900; cursor:pointer; transition:transform .12s,background .12s,border-color .12s; } .inventory-item-dialog-card-v2739__actions button:hover:not(:disabled) { transform:translateY(-1px); border-color:color-mix(in srgb,var(--theme-accent) 42%,var(--theme-border)); } .inventory-item-dialog-card-v2739__actions button:active:not(:disabled) { transform:scale(.98); } .inventory-item-dialog-card-v2739__actions .ui-icon { width:16px; height:16px; } .inventory-item-dialog-card-v2739__actions button small { color:var(--theme-muted); font-size:6px; } .inventory-item-dialog-card-v2739__actions button.is-primary { grid-column:1/-1; display:flex; justify-content:center; min-height:46px; color:#fff; border-color:var(--theme-accent); background:linear-gradient(180deg,color-mix(in srgb,var(--theme-accent) 92%,white),var(--theme-accent)); box-shadow:0 8px 18px color-mix(in srgb,var(--theme-accent) 22%,transparent); font-size:9px; } .inventory-item-dialog-card-v2739__actions button.is-primary .ui-icon { color:#fff; } .inventory-item-dialog-card-v2739__actions button.is-danger { color:#df5b5b; border-color:rgba(223,91,91,.28); background:rgba(223,91,91,.055); } .inventory-item-dialog-card-v2739__actions button:disabled { opacity:.3; cursor:not-allowed; transform:none; } .inventory-item-dialog-card-v2739__lots { border-top:1px solid var(--theme-border); } .inventory-item-dialog-card-v2739__lots summary { display:flex; align-items:center; justify-content:space-between; min-height:34px; padding-top:5px; color:var(--theme-muted); font-size:7px; font-weight:900; cursor:pointer; list-style:none; } .inventory-item-dialog-card-v2739__lots summary::-webkit-details-marker { display:none; } .inventory-item-dialog-card-v2739__lots summary span { display:grid; place-items:center; min-width:18px; height:18px; border-radius:999px; background:color-mix(in srgb,var(--theme-accent) 9%,transparent); } .inventory-item-dialog-card-v2739__lots > div { display:grid; gap:4px; max-height:108px; overflow:auto; padding-top:5px; } .inventory-item-dialog-card-v2739__lots article { display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px; min-height:36px; padding:5px 7px; border-radius:9px; background:var(--theme-surface-soft); } .inventory-item-dialog-card-v2739__lots article b { display:block; font-size:7px; } .inventory-item-dialog-card-v2739__lots article small { color:var(--theme-muted); font-size:5.5px; } .inventory-item-dialog-card-v2739__lots article em { font-size:7px; font-style:normal; font-weight:900; } html[data-game-theme="light"] .inventory-v2739__categories button, html[data-game-theme="light"] .inventory-item-v2739 { box-shadow:0 4px 12px rgba(39,88,117,.045); } html[data-game-theme="dark"] .inventory-v2739__categories button, html[data-game-theme="dark"] .inventory-item-v2739 { box-shadow:none; } html[data-game-theme="dark"] .inventory-item-v2739__art > em { background:#dcebf3; color:#0d2b3a; border-color:var(--theme-card); } @media (max-width:1000px) and (min-width:761px) { .game-screen .side-panel.is-inventory-panel { width:min(720px,calc(100vw - 48px)); } .inventory-v2739__header { grid-template-columns:1fr; gap:8px; } .inventory-v2739__toolbar { grid-template-columns:minmax(160px,1fr) 140px 70px; } .inventory-v2739__items { grid-template-columns:repeat(3,minmax(0,1fr)); } .inventory-v2739__categories { grid-template-columns:repeat(9,minmax(0,1fr)); } } @media (max-width:760px) { .game-screen .side-panel.is-inventory-panel { top:max(8px,env(safe-area-inset-top)); right:7px; left:7px; bottom:calc(66px + env(safe-area-inset-bottom)); width:auto; height:auto; padding:10px; border-radius:20px; } .inventory-v2739 { gap:8px; } .inventory-v2739__header { grid-template-columns:1fr; gap:8px; padding-right:40px; } .inventory-v2739__heading > span { width:38px; height:38px; border-radius:12px; } .inventory-v2739__heading-icon { width:23px; height:23px; } .inventory-v2739__heading h2 { font-size:19px; } .inventory-v2739__heading p { font-size:7px; } .inventory-v2739__toolbar { grid-template-columns:minmax(0,1fr) 42px; grid-template-rows:38px 34px; gap:6px; } .inventory-v2739__search { grid-column:1/2; grid-row:1; height:38px; } .inventory-v2739__sort { grid-column:1/2; grid-row:2; height:34px; } .inventory-v2739__view { grid-column:2/3; grid-row:1/3; } .inventory-v2739__categories { display:flex; gap:5px; overflow:auto hidden; padding-bottom:2px; scrollbar-width:none; } .inventory-v2739__categories::-webkit-scrollbar { display:none; } .inventory-v2739__categories button { flex:0 0 61px; min-height:52px; padding:4px 2px; } .inventory-v2739__categories .inventory-category-icon { width:21px; height:21px; } .inventory-v2739__categories button > span { font-size:6px; } .inventory-v2739__categories button > i { top:3px; right:3px; min-width:15px; height:15px; font-size:5px; } .inventory-v2739__items { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .inventory-item-v2739 { grid-template-rows:50px auto auto; min-height:105px; padding:7px; border-radius:13px; } .inventory-item-v2739__art { width:50px; height:50px; border-radius:13px; } .inventory-item-v2739__art .item-icon { width:41px; height:41px; } .inventory-item-v2739__name b { font-size:8px; } .inventory-item-v2739__rights { gap:3px; } .inventory-item-v2739__rights i { min-width:21px; padding:0 4px; } .inventory-item-dialog-v2739 { align-items:end; padding:8px 8px calc(68px + env(safe-area-inset-bottom)); } .inventory-item-dialog-v2739 .inventory-item-dialog-v2738__content { width:100%; max-height:none; } .inventory-item-dialog-card-v2739 { gap:9px; width:100%; max-height:min(72vh,560px); overflow:auto; padding:14px; border-radius:20px 20px 16px 16px; } .inventory-item-dialog-card-v2739__header { grid-template-columns:58px minmax(0,1fr) auto; gap:8px; padding-right:36px; } .inventory-item-dialog-card-v2739__art { width:58px; height:58px; border-radius:15px; } .inventory-item-dialog-card-v2739__art .item-icon { width:47px; height:47px; } .inventory-item-dialog-card-v2739__header h3 { font-size:16px; } .inventory-item-dialog-card-v2739__rights { grid-template-columns:repeat(2,1fr); } .inventory-item-dialog-card-v2739__quantity { align-items:flex-start; flex-direction:column; gap:5px; } .inventory-item-dialog-card-v2739__quantity > div { width:100%; display:grid; grid-template-columns:36px 1fr 36px 52px; } .inventory-item-dialog-card-v2739__quantity input { width:100%; } .inventory-item-dialog-card-v2739__actions { grid-template-columns:repeat(2,1fr); } .inventory-item-dialog-card-v2739__actions button.is-primary { grid-column:1/-1; } .inventory-item-dialog-card-v2739__actions button.is-danger:last-child { grid-column:1/-1; } } /* v2.7.40 — finished inventory UI kit */ .inventory-ui-icon { width:18px; height:18px; color:currentColor; fill:none; flex:0 0 auto; } .game-screen .side-panel.is-inventory-panel { top:82px; right:22px; bottom:auto; width:min(820px,calc(100vw - 96px)); height:min(600px,calc(100vh - 126px)); padding:16px; border-radius:24px; overflow:hidden; } .game-screen .side-panel.is-inventory-panel > .panel-close { top:15px; right:15px; width:42px; height:42px; border-radius:13px; z-index:4; } .inventory-v2740 { --inv-bg:var(--theme-surface); --inv-card:var(--theme-card); --inv-soft:var(--theme-surface-soft); --inv-line:var(--theme-border); --inv-text:var(--theme-text); --inv-muted:var(--theme-muted); --inv-blue:var(--theme-accent); display:grid; grid-template-rows:auto auto auto minmax(0,1fr); gap:9px; width:100%; height:100%; min-height:0; color:var(--inv-text); } .inventory-v2740__header { display:grid; grid-template-columns:minmax(180px,.78fr) auto minmax(320px,1.25fr); gap:10px; align-items:center; min-width:0; padding-right:50px; } .inventory-v2740__title { display:flex; align-items:center; gap:10px; min-width:0; } .inventory-v2740__title > span { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--inv-line); border-radius:13px; background:color-mix(in srgb,var(--inv-blue) 8%,var(--inv-card)); color:var(--inv-blue); } .inventory-v2740__title > span .inventory-ui-icon { width:25px; height:25px; } .inventory-v2740__title small { display:block; color:var(--inv-muted); font-size:7px; font-weight:900; letter-spacing:.07em; } .inventory-v2740__title h2 { margin:1px 0 0; font-size:21px; line-height:1; } .inventory-v2740__wallet { display:flex; align-items:center; gap:5px; } .inventory-v2740__wallet > span { display:flex; align-items:center; gap:5px; min-height:34px; padding:0 9px; border:1px solid var(--inv-line); border-radius:999px; background:var(--inv-card); color:var(--inv-text); } .inventory-v2740__wallet .inventory-ui-icon { width:15px; height:15px; } .inventory-v2740__wallet > span:first-child .inventory-ui-icon { color:#d69c1b; } .inventory-v2740__wallet > span:last-child .inventory-ui-icon { color:#7762df; } .inventory-v2740__wallet b { font-size:8px; white-space:nowrap; } .inventory-v2740__tools { display:grid; grid-template-columns:minmax(130px,1fr) 135px 66px; gap:6px; min-width:0; } .inventory-v2740__search,.inventory-v2740__sort { display:flex; align-items:center; gap:6px; height:36px; min-width:0; padding:0 9px; border:1px solid var(--inv-line); border-radius:11px; background:var(--theme-input); color:var(--inv-muted); } .inventory-v2740__search .inventory-ui-icon,.inventory-v2740__sort .inventory-ui-icon { width:14px; height:14px; } .inventory-v2740__search input,.inventory-v2740__sort select { width:100%; min-width:0; height:100%; padding:0 !important; border:0 !important; outline:0; appearance:none; background:transparent !important; color:var(--inv-text) !important; font-size:8px; font-weight:800; } .inventory-v2740__sort > .inventory-ui-icon:last-child { width:12px; height:12px; margin-left:-18px; pointer-events:none; } .inventory-v2740__view { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border:1px solid var(--inv-line); border-radius:11px; background:var(--theme-input); } .inventory-v2740__view button { display:grid; place-items:center; padding:0; border:0; border-radius:7px; background:transparent; color:var(--inv-muted); cursor:pointer; } .inventory-v2740__view button.is-active { color:var(--inv-blue); background:color-mix(in srgb,var(--inv-blue) 12%,var(--inv-card)); } .inventory-v2740__view .inventory-ui-icon { width:14px; height:14px; } .inventory-v2740__categories { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:5px; min-width:0; } .inventory-v2740__categories button { position:relative; display:grid; grid-template-rows:24px auto; justify-items:center; align-items:center; gap:2px; min-width:0; min-height:52px; padding:5px 2px 4px; border:1px solid var(--inv-line); border-radius:12px; background:var(--inv-card); color:var(--inv-muted); cursor:pointer; transition:transform .13s ease,border-color .13s ease,background .13s ease,color .13s ease; } .inventory-v2740__categories button:hover { transform:translateY(-1px); color:var(--inv-text); border-color:color-mix(in srgb,var(--inv-blue) 45%,var(--inv-line)); } .inventory-v2740__categories button.is-active { color:var(--inv-blue); border-color:color-mix(in srgb,var(--inv-blue) 72%,var(--inv-line)); background:color-mix(in srgb,var(--inv-blue) 9%,var(--inv-card)); } .inventory-v2740__categories .inventory-category-icon,.inventory-v2740__categories .inventory-ui-icon { width:22px; height:22px; } .inventory-v2740__categories button > span { max-width:100%; overflow:hidden; font-size:6.5px; line-height:1; font-weight:900; text-overflow:ellipsis; white-space:nowrap; } .inventory-v2740__categories button > i { position:absolute; top:4px; right:4px; display:grid; place-items:center; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:color-mix(in srgb,var(--inv-text) 6%,var(--inv-card)); color:var(--inv-muted); font-size:5.5px; font-style:normal; font-weight:900; } .inventory-v2740__categories button.is-favorite { color:#d39d26; } .inventory-v2740__categories button.is-favorite.is-active { border-color:#e0b652; background:rgba(224,182,82,.09); color:#d39d26; } .inventory-v2740__summary { display:flex; gap:6px; min-height:24px; } .inventory-v2740__summary > span { display:flex; align-items:center; gap:4px; min-height:24px; padding:0 8px; border-radius:999px; background:color-mix(in srgb,var(--inv-text) 4%,transparent); color:var(--inv-muted); } .inventory-v2740__summary .inventory-ui-icon { width:12px; height:12px; } .inventory-v2740__summary b { color:var(--inv-text); font-size:7px; } .inventory-v2740__summary small { font-size:6px; } .inventory-v2740__content { min-height:0; overflow:hidden; border-top:1px solid color-mix(in srgb,var(--inv-line) 76%,transparent); padding-top:8px; } .inventory-v2740__items { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-content:start; gap:7px; height:100%; min-height:0; overflow:auto; padding:1px 3px 6px 1px; scrollbar-width:none; } .inventory-v2740__items::-webkit-scrollbar { width:0; height:0; } .inventory-item-v2740 { display:grid; grid-template-rows:58px minmax(22px,auto) 20px; gap:5px; min-width:0; min-height:105px; padding:7px; border:1px solid var(--inv-line); border-radius:14px; background:var(--inv-card); color:var(--inv-text); cursor:pointer; box-shadow:0 4px 13px rgba(8,38,56,.05); transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease; } .inventory-item-v2740:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--inv-blue) 50%,var(--inv-line)); box-shadow:0 8px 18px rgba(8,38,56,.09); background:var(--theme-card-hover); } .inventory-item-v2740:active { transform:scale(.985); } .inventory-item-v2740:focus-visible { outline:2px solid var(--inv-blue); outline-offset:2px; } .inventory-item-v2740__art { position:relative; display:grid; place-items:center; justify-self:center; width:58px; height:58px; border-radius:15px; background:color-mix(in srgb,var(--inv-blue) 6%,var(--inv-soft)); } .inventory-item-v2740__art .item-icon { width:48px; height:48px; } .inventory-item-v2740__art > em { position:absolute; right:-6px; bottom:-3px; display:grid; place-items:center; min-width:26px; height:20px; padding:0 6px; border:2px solid var(--inv-card); border-radius:999px; background:var(--inv-text); color:var(--inv-bg); font-size:7.5px; font-style:normal; font-weight:950; } .inventory-item-v2740__favorite { position:absolute; left:-5px; top:-5px; display:grid; place-items:center; width:20px; height:20px; border:2px solid var(--inv-card); border-radius:999px; background:#fff4d7; color:#d79e1e; } .inventory-item-v2740__favorite .inventory-ui-icon { width:12px; height:12px; } .inventory-item-v2740__name { display:grid; place-items:start center; min-width:0; text-align:center; } .inventory-item-v2740__name b { width:100%; overflow:hidden; font-size:8px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; } .inventory-item-v2740__rights { display:flex; justify-content:center; align-items:center; gap:3px; min-height:20px; } .inventory-item-v2740__rights i { display:flex; align-items:center; gap:2px; min-width:21px; height:19px; padding:0 4px; border-radius:999px; background:color-mix(in srgb,var(--inv-text) 5%,transparent); color:var(--inv-muted); font-style:normal; } .inventory-item-v2740__rights .inventory-ui-icon { width:10px; height:10px; } .inventory-item-v2740__rights b { font-size:6.5px; } .inventory-item-v2740__rights .is-transfer { color:#2d8ebf; background:rgba(63,154,200,.09); } .inventory-item-v2740__rights .is-trash { color:#788b98; } .inventory-item-v2740__rights .is-lock { color:#c28b26; background:rgba(222,171,64,.10); } .inventory-item-v2740__rights .is-use { color:#3caa72; background:rgba(64,181,124,.10); min-width:20px; justify-content:center; } .inventory-v2740.is-list .inventory-v2740__items { grid-template-columns:1fr; } .inventory-v2740.is-list .inventory-item-v2740 { grid-template-columns:48px minmax(0,1fr) auto; grid-template-rows:1fr; align-items:center; min-height:62px; } .inventory-v2740.is-list .inventory-item-v2740__art { width:48px; height:48px; } .inventory-v2740.is-list .inventory-item-v2740__art .item-icon { width:40px; height:40px; } .inventory-v2740.is-list .inventory-item-v2740__name { justify-items:start; text-align:left; } .inventory-v2740.is-list .inventory-item-v2740__rights { justify-content:flex-end; } .inventory-v2740__empty { grid-column:1/-1; display:grid; place-items:center; align-content:center; gap:6px; min-height:180px; color:var(--inv-muted); } .inventory-v2740__empty .inventory-ui-icon { width:34px; height:34px; opacity:.55; } .inventory-v2740__empty b { font-size:10px; color:var(--inv-text); } .inventory-v2740__empty small { font-size:7px; } /* Item action card is a separate window, never a permanent inventory column. */ .inventory-item-dialog-v2739 .inventory-item-dialog-v2738__content { width:min(390px,calc(100vw - 32px)); max-height:none; } .inventory-item-dialog-v2740 { position:relative; display:grid; gap:10px; padding:15px; border:1px solid var(--theme-border); border-radius:21px; background:var(--theme-surface); color:var(--theme-text); box-shadow:0 22px 56px rgba(0,0,0,.22); } .inventory-item-dialog-v2740__close { position:absolute; top:11px; right:11px; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--theme-border); border-radius:12px; background:var(--theme-card); color:var(--theme-text); cursor:pointer; } .inventory-item-dialog-v2740__close .inventory-ui-icon { width:17px; height:17px; } .inventory-item-dialog-v2740__header { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:10px; align-items:center; padding-right:38px; } .inventory-item-dialog-v2740__art { display:grid; place-items:center; width:64px; height:64px; border-radius:17px; background:color-mix(in srgb,var(--theme-accent) 7%,var(--theme-surface-soft)); } .inventory-item-dialog-v2740__art .item-icon { width:52px; height:52px; } .inventory-item-dialog-v2740__header small { display:block; color:var(--theme-accent); font-size:6.5px; font-weight:950; letter-spacing:.07em; } .inventory-item-dialog-v2740__header h3 { margin:2px 0 4px; font-size:17px; line-height:1.05; } .inventory-item-dialog-v2740__header p { margin:0; color:var(--theme-muted); font-size:8px; line-height:1.35; } .inventory-item-dialog-v2740__header i { display:block; margin-top:4px; color:var(--theme-muted); font-size:6.5px; font-style:normal; font-weight:800; } .inventory-item-dialog-v2740__header > strong { align-self:start; display:grid; place-items:center; min-width:32px; height:25px; padding:0 7px; border-radius:999px; background:color-mix(in srgb,var(--theme-text) 7%,var(--theme-card)); font-size:8px; } .inventory-item-dialog-v2740__stock { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; } .inventory-item-dialog-v2740__stock > span { display:grid; grid-template-columns:14px auto; grid-template-rows:auto auto; justify-content:center; align-items:center; column-gap:4px; min-height:46px; padding:5px; border:1px solid var(--theme-border); border-radius:11px; background:var(--theme-card); } .inventory-item-dialog-v2740__stock .inventory-ui-icon { grid-row:1/3; width:13px; height:13px; } .inventory-item-dialog-v2740__stock b { font-size:11px; line-height:1; } .inventory-item-dialog-v2740__stock small { color:var(--theme-muted); font-size:5.5px; } .inventory-item-dialog-v2740__stock .is-transfer { color:#2d8ebf; border-color:rgba(63,154,200,.25); background:rgba(63,154,200,.045); } .inventory-item-dialog-v2740__stock .is-trash { color:#718692; } .inventory-item-dialog-v2740__stock .is-lock { color:#c28b26; border-color:rgba(222,171,64,.27); background:rgba(222,171,64,.05); } .inventory-item-dialog-v2740__notice { display:grid; grid-template-columns:20px 1fr; gap:7px; align-items:center; padding:8px 9px; border:1px solid rgba(222,171,64,.24); border-radius:11px; background:rgba(222,171,64,.05); color:#c28b26; } .inventory-item-dialog-v2740__notice .inventory-ui-icon { width:15px; height:15px; } .inventory-item-dialog-v2740__notice b { display:block; color:var(--theme-text); font-size:7px; } .inventory-item-dialog-v2740__notice small { color:var(--theme-muted); font-size:6px; } .inventory-item-dialog-v2740__quantity { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:36px; color:var(--theme-muted); font-size:7px; font-weight:900; } .inventory-item-dialog-v2740__quantity > div { display:flex; gap:4px; align-items:center; } .inventory-item-dialog-v2740__quantity button,.inventory-item-dialog-v2740__quantity input { height:33px; border:1px solid var(--theme-border) !important; border-radius:9px; background:var(--theme-input) !important; color:var(--theme-text) !important; text-align:center; font-size:9px; font-weight:900; } .inventory-item-dialog-v2740__quantity button { display:grid; place-items:center; min-width:33px; padding:0 8px; cursor:pointer; } .inventory-item-dialog-v2740__quantity button .inventory-ui-icon { width:13px; height:13px; } .inventory-item-dialog-v2740__quantity input { width:48px; } .inventory-item-dialog-v2740__quantity button.is-max { min-width:48px; font-size:6.5px; } .inventory-item-dialog-v2740__actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .inventory-item-dialog-v2740__actions button { display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:5px; min-height:40px; padding:0 9px; border:1px solid var(--theme-border); border-radius:11px; background:var(--theme-card); color:var(--theme-text); font-size:7px; font-weight:900; cursor:pointer; transition:transform .12s ease,border-color .12s ease,background .12s ease; } .inventory-item-dialog-v2740__actions button:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--theme-accent) 40%,var(--theme-border)); } .inventory-item-dialog-v2740__actions button:active { transform:scale(.98); } .inventory-item-dialog-v2740__actions .inventory-ui-icon { width:15px; height:15px; } .inventory-item-dialog-v2740__actions button small { color:var(--theme-muted); font-size:6px; } .inventory-item-dialog-v2740__actions button.is-primary { grid-column:1/-1; display:flex; justify-content:center; min-height:45px; color:#fff; border-color:var(--theme-accent); background:linear-gradient(180deg,color-mix(in srgb,var(--theme-accent) 92%,white),var(--theme-accent)); box-shadow:0 7px 16px color-mix(in srgb,var(--theme-accent) 20%,transparent); font-size:8.5px; } .inventory-item-dialog-v2740__actions button.is-primary .inventory-ui-icon { color:#fff; } .inventory-item-dialog-v2740__actions button.is-danger { color:#d95b5b; border-color:rgba(217,91,91,.26); background:rgba(217,91,91,.045); } .inventory-item-dialog-v2740__actions button.is-favorite { grid-column:1/-1; display:flex; justify-content:center; color:#a27b23; } .inventory-item-dialog-v2740__actions button.is-favorite.is-active { color:#c18b13; border-color:rgba(222,171,64,.34); background:rgba(222,171,64,.075); } .inventory-item-dialog-v2740__lots { border-top:1px solid var(--theme-border); } .inventory-item-dialog-v2740__lots summary { display:grid; grid-template-columns:16px 1fr auto; align-items:center; gap:6px; min-height:32px; padding-top:5px; color:var(--theme-muted); font-size:7px; font-weight:900; cursor:pointer; list-style:none; } .inventory-item-dialog-v2740__lots summary::-webkit-details-marker { display:none; } .inventory-item-dialog-v2740__lots summary .inventory-ui-icon { width:13px; height:13px; } .inventory-item-dialog-v2740__lots summary b { display:grid; place-items:center; min-width:18px; height:18px; border-radius:999px; background:color-mix(in srgb,var(--theme-accent) 9%,transparent); font-size:6px; } .inventory-item-dialog-v2740__lots > div { display:grid; gap:4px; max-height:100px; overflow:auto; padding-top:5px; } .inventory-item-dialog-v2740__lots article { display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px; min-height:34px; padding:5px 7px; border-radius:9px; background:var(--theme-surface-soft); } .inventory-item-dialog-v2740__lots article b { display:block; font-size:6.5px; } .inventory-item-dialog-v2740__lots article small { color:var(--theme-muted); font-size:5.5px; } .inventory-item-dialog-v2740__lots article em { font-size:7px; font-style:normal; font-weight:900; } html[data-game-theme="light"] .inventory-v2740 { --inv-bg:#f8fbfd; --inv-card:#ffffff; --inv-soft:#f2f7fa; --inv-line:#d6e3eb; --inv-text:#163b55; --inv-muted:#6b8395; --inv-blue:#178fd2; } html[data-game-theme="light"] .game-screen .side-panel.is-inventory-panel { background:rgba(248,252,254,.975); box-shadow:0 18px 60px rgba(18,57,82,.18); } html[data-game-theme="dark"] .inventory-v2740 { --inv-bg:#092532; --inv-card:#103543; --inv-soft:#0d2e3b; --inv-line:#2b5665; --inv-text:#eef7fa; --inv-muted:#8fa9b4; --inv-blue:#4bb7ed; } html[data-game-theme="dark"] .game-screen .side-panel.is-inventory-panel { background:rgba(8,35,47,.98); box-shadow:0 18px 60px rgba(0,0,0,.32); } html[data-game-theme="dark"] .inventory-item-v2740 { box-shadow:none; } html[data-game-theme="dark"] .inventory-item-v2740__art > em { color:#0b2a38; background:#e7f2f6; } html[data-game-theme="dark"] .inventory-item-v2740__favorite { background:#4c401c; color:#ffd66a; } @media (max-width:1000px) and (min-width:761px) { .game-screen .side-panel.is-inventory-panel { width:min(740px,calc(100vw - 48px)); } .inventory-v2740__header { grid-template-columns:minmax(180px,1fr) auto; } .inventory-v2740__tools { grid-column:1/-1; } .inventory-v2740__items { grid-template-columns:repeat(4,minmax(0,1fr)); } .inventory-v2740__categories { grid-template-columns:repeat(5,minmax(0,1fr)); } } @media (max-width:760px) { .game-screen .side-panel.is-inventory-panel { top:max(8px,env(safe-area-inset-top)); right:7px; left:7px; bottom:calc(66px + env(safe-area-inset-bottom)); width:auto; height:auto; padding:10px; border-radius:20px; } .game-screen .side-panel.is-inventory-panel > .panel-close { top:9px; right:9px; width:38px; height:38px; border-radius:12px; } .inventory-v2740 { gap:7px; } .inventory-v2740__header { grid-template-columns:minmax(0,1fr) auto; gap:7px; padding-right:41px; } .inventory-v2740__title > span { width:37px; height:37px; border-radius:11px; } .inventory-v2740__title > span .inventory-ui-icon { width:22px; height:22px; } .inventory-v2740__title h2 { font-size:18px; } .inventory-v2740__title small { font-size:6px; } .inventory-v2740__wallet { justify-self:end; } .inventory-v2740__wallet > span { min-height:30px; padding:0 7px; } .inventory-v2740__wallet b { font-size:7px; } .inventory-v2740__tools { grid-column:1/-1; grid-template-columns:minmax(0,1fr) 108px 58px; } .inventory-v2740__search,.inventory-v2740__sort { height:34px; } .inventory-v2740__categories { display:flex; gap:5px; overflow:auto hidden; padding-bottom:1px; scrollbar-width:none; } .inventory-v2740__categories::-webkit-scrollbar { display:none; } .inventory-v2740__categories button { flex:0 0 58px; min-height:49px; padding:4px 2px; } .inventory-v2740__categories .inventory-category-icon,.inventory-v2740__categories .inventory-ui-icon { width:20px; height:20px; } .inventory-v2740__categories button > span { font-size:5.7px; } .inventory-v2740__categories button > i { top:3px; right:3px; min-width:14px; height:14px; font-size:5px; } .inventory-v2740__summary { display:none; } .inventory-v2740__items { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .inventory-item-v2740 { grid-template-rows:48px minmax(20px,auto) 18px; min-height:95px; padding:6px; border-radius:12px; } .inventory-item-v2740__art { width:48px; height:48px; border-radius:12px; } .inventory-item-v2740__art .item-icon { width:40px; height:40px; } .inventory-item-v2740__art > em { right:-5px; bottom:-3px; min-width:23px; height:18px; font-size:6.5px; } .inventory-item-v2740__name b { font-size:7px; } .inventory-item-v2740__rights i { min-width:18px; height:17px; padding:0 3px; } .inventory-item-v2740__rights .inventory-ui-icon { width:9px; height:9px; } .inventory-item-v2740__rights b { font-size:5.5px; } .inventory-item-dialog-v2739 { align-items:end; padding:8px 8px calc(68px + env(safe-area-inset-bottom)); } .inventory-item-dialog-v2739 .inventory-item-dialog-v2738__content { width:100%; max-height:none; } .inventory-item-dialog-v2740 { width:100%; max-height:min(66vh,520px); overflow:auto; border-radius:20px 20px 15px 15px; padding:13px; } .inventory-item-dialog-v2740__header { grid-template-columns:56px minmax(0,1fr) auto; gap:8px; padding-right:35px; } .inventory-item-dialog-v2740__art { width:56px; height:56px; border-radius:14px; } .inventory-item-dialog-v2740__art .item-icon { width:45px; height:45px; } .inventory-item-dialog-v2740__header h3 { font-size:15px; } .inventory-item-dialog-v2740__header p { font-size:7px; } .inventory-item-dialog-v2740__stock > span { min-height:42px; } .inventory-item-dialog-v2740__quantity { flex-direction:column; align-items:stretch; gap:5px; } .inventory-item-dialog-v2740__quantity > div { display:grid; grid-template-columns:34px 1fr 34px 48px; } .inventory-item-dialog-v2740__quantity input { width:100%; } .inventory-item-dialog-v2740__actions { grid-template-columns:repeat(2,minmax(0,1fr)); } .inventory-item-dialog-v2740__actions button { min-height:42px; } .inventory-item-dialog-v2740__actions button.is-primary,.inventory-item-dialog-v2740__actions button.is-favorite { grid-column:1/-1; } } @media (max-width:430px) { .inventory-v2740__wallet > span:first-child { display:none; } .inventory-v2740__tools { grid-template-columns:minmax(0,1fr) 56px; } .inventory-v2740__sort { grid-column:1/-1; grid-row:2; } .inventory-v2740__view { grid-column:2; grid-row:1; } .inventory-v2740__items { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* v2.7.41 — modern game-ready inventory visual pass */ .inventory-v2741 { --inv-blue:#2f80ed; --inv-green:#2aa876; --inv-gold:#d6a128; --inv-red:#e65555; --inv-purple:#795fe7; font-family:"Segoe UI Variable",Inter,"Segoe UI",system-ui,sans-serif; gap:8px; } .game-screen .side-panel.is-inventory-panel { width:min(800px,calc(100vw - 92px)); height:min(570px,calc(100vh - 122px)); padding:15px; border-radius:22px; border:1px solid color-mix(in srgb,var(--theme-border) 84%,transparent); } .game-screen .side-panel.is-inventory-panel > .panel-close { top:14px; right:14px; width:40px; height:40px; border-radius:12px; border:1px solid var(--theme-border); background:var(--theme-card); color:var(--theme-text); box-shadow:0 5px 14px rgba(12,38,56,.08); } .game-screen .side-panel.is-inventory-panel > .panel-close:hover { background:color-mix(in srgb,var(--theme-accent) 7%,var(--theme-card)); border-color:color-mix(in srgb,var(--theme-accent) 35%,var(--theme-border)); } .inventory-v2741 .inventory-v2740__header { grid-template-columns:minmax(180px,1fr) auto; grid-template-rows:auto auto; column-gap:10px; row-gap:8px; padding-right:46px; } .inventory-v2741 .inventory-v2740__title > span { width:40px; height:40px; border-radius:12px; color:var(--inv-blue); background:color-mix(in srgb,var(--inv-blue) 8%,var(--inv-card)); } .inventory-v2741 .inventory-v2740__title > span .inventory-ui-icon { width:23px; height:23px; } .inventory-v2741 .inventory-v2740__title small { color:var(--inv-muted); font-size:8px; font-weight:700; letter-spacing:.035em; text-transform:none; } .inventory-v2741 .inventory-v2740__title h2 { margin:2px 0 0; font-size:23px; font-weight:760; letter-spacing:-.025em; } .inventory-v2741__wallet { justify-self:end; gap:7px; } .inventory-v2741__wallet > span { display:grid; grid-template-columns:18px auto 25px; align-items:center; gap:6px; min-width:98px; height:35px; padding:0 4px 0 9px; border-radius:12px; background:var(--inv-card); border:1px solid var(--inv-line); box-shadow:0 3px 10px rgba(18,59,84,.045); } .inventory-v2741__wallet > span > .inventory-ui-icon { width:17px; height:17px; } .inventory-v2741__wallet > span.is-coins > .inventory-ui-icon { color:#d8a31f; } .inventory-v2741__wallet > span.is-gems > .inventory-ui-icon { color:#5aa6f5; } .inventory-v2741__wallet b { font-size:10px; font-weight:780; letter-spacing:.01em; } .inventory-v2741__wallet button { display:grid; place-items:center; width:25px; height:25px; padding:0; border:0; border-radius:8px; background:color-mix(in srgb,var(--inv-blue) 10%,var(--inv-soft)); color:var(--inv-blue); cursor:pointer; transition:transform .12s ease,background .12s ease,color .12s ease; } .inventory-v2741__wallet button .inventory-ui-icon { width:13px; height:13px; } .inventory-v2741__wallet button:hover { background:var(--inv-blue); color:#fff; transform:translateY(-1px); } .inventory-v2741__wallet button:active { transform:scale(.94); } .inventory-v2741 .inventory-v2740__tools { grid-column:1/-1; display:grid; grid-template-columns:minmax(180px,1fr) 145px 68px; gap:7px; } .inventory-v2741__search, .inventory-v2741__sort { height:37px; border-radius:11px; border-color:color-mix(in srgb,var(--inv-line) 94%,transparent); background:var(--inv-soft); } .inventory-v2741__search:focus-within, .inventory-v2741__sort:focus-within { border-color:color-mix(in srgb,var(--inv-blue) 65%,var(--inv-line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--inv-blue) 9%,transparent); } .inventory-v2741__search input, .inventory-v2741__sort select { font-size:9px !important; font-weight:650 !important; } .inventory-v2741__view { height:37px; border-radius:11px; background:var(--inv-soft); } .inventory-v2741__view button { transition:background .12s ease,color .12s ease,transform .12s ease; } .inventory-v2741__view button:hover { color:var(--inv-text); } .inventory-v2741__view button:active { transform:scale(.94); } .inventory-v2741__view button.is-active { background:var(--inv-card); color:var(--inv-blue); box-shadow:0 2px 7px rgba(28,78,108,.08); } .inventory-v2741__categories { grid-template-columns:repeat(10,minmax(0,1fr)); gap:5px; } .inventory-v2741__categories button { min-height:49px; grid-template-rows:21px auto; padding:5px 2px 4px; border-radius:11px; border-color:color-mix(in srgb,var(--inv-line) 92%,transparent); background:transparent; color:var(--inv-muted); box-shadow:none; } .inventory-v2741__categories button:hover { transform:none; background:var(--inv-soft); border-color:color-mix(in srgb,var(--inv-blue) 24%,var(--inv-line)); } .inventory-v2741__categories button.is-active { color:var(--inv-blue); border-color:color-mix(in srgb,var(--inv-blue) 54%,var(--inv-line)); background:color-mix(in srgb,var(--inv-blue) 7%,var(--inv-card)); box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--inv-blue) 70%,transparent); } .inventory-v2741__categories .inventory-category-icon, .inventory-v2741__categories .inventory-ui-icon { width:20px; height:20px; } .inventory-v2741__categories button > span { font-size:7px; line-height:1.05; font-weight:700; letter-spacing:-.01em; } .inventory-v2741__categories button > i { top:3px; right:3px; min-width:15px; height:15px; padding:0 4px; background:var(--inv-soft); color:var(--inv-muted); font-size:5.5px; } .inventory-v2741__categories button.is-active > i { background:color-mix(in srgb,var(--inv-blue) 13%,var(--inv-card)); color:var(--inv-blue); } .inventory-v2741__summary { min-height:22px; gap:5px; } .inventory-v2741__summary > span { min-height:22px; padding:0 8px; border:1px solid color-mix(in srgb,var(--inv-line) 68%,transparent); background:transparent; border-radius:8px; } .inventory-v2741__summary b { font-size:7.5px; } .inventory-v2741__summary small { font-size:6.5px; font-weight:600; } .inventory-v2741__summary > span:first-child { color:#288dbb; } .inventory-v2741__summary > span:last-child { color:#b9872d; } .inventory-v2741__content { padding-top:7px; border-top-color:color-mix(in srgb,var(--inv-line) 68%,transparent); } .inventory-v2741__items { grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; padding:1px 2px 7px 1px; } .inventory-item-v2741 { position:relative; grid-template-rows:60px minmax(24px,auto) 19px; min-height:109px; gap:4px; padding:7px; border-radius:13px; border:1px solid var(--inv-line); background:var(--inv-card); box-shadow:none; overflow:hidden; } .inventory-item-v2741::before { content:""; position:absolute; inset:0 auto 0 0; width:2px; background:transparent; opacity:.85; } .inventory-item-v2741.rarity-uncommon::before { background:#48ac75; } .inventory-item-v2741.rarity-rare::before { background:#4b91e6; } .inventory-item-v2741.rarity-epic::before { background:#8a61df; } .inventory-item-v2741.rarity-legendary::before { background:#dfaa34; } .inventory-item-v2741:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--inv-blue) 42%,var(--inv-line)); background:color-mix(in srgb,var(--inv-blue) 2.5%,var(--inv-card)); box-shadow:0 6px 16px rgba(17,57,80,.065); } .inventory-item-v2741:active { transform:scale(.98); } .inventory-item-v2741__art { width:60px; height:60px; border-radius:14px; background:var(--inv-soft); } .inventory-item-v2741.category-balls .inventory-item-v2741__art { background:color-mix(in srgb,#e85e5e 7%,var(--inv-soft)); } .inventory-item-v2741.category-consumables .inventory-item-v2741__art { background:color-mix(in srgb,#4daf72 7%,var(--inv-soft)); } .inventory-item-v2741.category-candy .inventory-item-v2741__art { background:color-mix(in srgb,#7f67dd 7%,var(--inv-soft)); } .inventory-item-v2741.category-evolution .inventory-item-v2741__art { background:color-mix(in srgb,#4a99df 7%,var(--inv-soft)); } .inventory-item-v2741.category-tools .inventory-item-v2741__art { background:color-mix(in srgb,#d69236 7%,var(--inv-soft)); } .inventory-item-v2741__art .item-icon { width:49px; height:49px; } .inventory-item-v2741__art > em { right:-4px; bottom:-2px; min-width:25px; height:19px; padding:0 5px; border-width:2px; font-size:7.5px; font-weight:800; letter-spacing:0; } .inventory-item-v2741__name b { font-size:8.5px; line-height:1.15; font-weight:720; } .inventory-item-v2741__rights { gap:3px; } .inventory-item-v2741__rights i { min-width:20px; height:18px; padding:0 4px; border-radius:6px; background:transparent; border:1px solid color-mix(in srgb,var(--inv-line) 75%,transparent); } .inventory-item-v2741__rights .inventory-ui-icon { width:9px; height:9px; } .inventory-item-v2741__rights b { font-size:6.5px; font-weight:760; } .inventory-item-v2741__rights .is-transfer { color:#298bb8; border-color:rgba(43,144,188,.20); background:rgba(43,144,188,.04); } .inventory-item-v2741__rights .is-trash { color:#6f8492; } .inventory-item-v2741__rights .is-lock { color:#ad7d22; border-color:rgba(191,140,41,.20); background:rgba(191,140,41,.04); } .inventory-item-v2741__rights .is-use { color:#268d61; border-color:rgba(38,141,97,.20); background:rgba(38,141,97,.04); } .inventory-v2741.is-list .inventory-item-v2741 { grid-template-columns:48px minmax(0,1fr) auto; min-height:60px; padding:6px 8px; } .inventory-v2741.is-list .inventory-item-v2741__art { width:48px; height:48px; } .inventory-v2741.is-list .inventory-item-v2741__art .item-icon { width:39px; height:39px; } .inventory-v2741.is-list .inventory-item-v2741__name b { font-size:9px; } /* item action window */ .inventory-item-dialog-v2741 { --action-blue:#2f80ed; --action-green:#2ca879; --action-gold:#d99c2d; --action-red:#e45656; gap:9px; padding:15px; border-radius:20px; border:1px solid var(--theme-border); box-shadow:0 18px 46px rgba(5,28,43,.24); font-family:"Segoe UI Variable",Inter,"Segoe UI",system-ui,sans-serif; } .inventory-item-dialog-v2741__header { grid-template-columns:66px minmax(0,1fr) auto; gap:11px; } .inventory-item-dialog-v2741__header h3 { margin:2px 0 3px; font-size:18px; font-weight:760; letter-spacing:-.02em; } .inventory-item-dialog-v2741__header p { font-size:8.5px; line-height:1.4; font-weight:500; } .inventory-item-dialog-v2741__header small { font-size:7px; font-weight:750; letter-spacing:.045em; } .inventory-item-dialog-v2741__stock { grid-template-columns:repeat(3,1fr); gap:6px; } .inventory-item-dialog-v2741__stock > span { min-height:48px; border-radius:10px; background:var(--theme-card); } .inventory-item-dialog-v2741__stock b { font-size:12px; font-weight:780; } .inventory-item-dialog-v2741__stock small { font-size:6.2px; font-weight:650; } .inventory-item-dialog-v2741__actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .inventory-item-dialog-v2741__actions button { min-height:42px; border-radius:10px; font-size:8px; font-weight:720; box-shadow:none; } .inventory-item-dialog-v2741__actions button:hover:not(:disabled) { transform:translateY(-1px); } .inventory-item-dialog-v2741__actions button.is-primary { grid-column:1/-1; min-height:46px; border-color:var(--action-blue); background:linear-gradient(180deg,#3e8df2,var(--action-blue)); color:#fff; box-shadow:0 7px 15px rgba(47,128,237,.20); font-size:9px; } .inventory-item-dialog-v2741__actions button.is-transfer { color:#23875f; border-color:rgba(44,168,121,.30); background:rgba(44,168,121,.065); } .inventory-item-dialog-v2741__actions button.is-sell { color:#a56c10; border-color:rgba(217,156,45,.30); background:rgba(217,156,45,.07); } .inventory-item-dialog-v2741__actions button.is-danger { color:#ce4545; border-color:rgba(228,86,86,.30); background:rgba(228,86,86,.06); } .inventory-item-dialog-v2741__actions button.is-favorite { grid-column:1/-1; color:#94701e; border-color:rgba(201,157,54,.22); background:rgba(201,157,54,.045); } .inventory-item-dialog-v2741__actions button small { justify-self:end; min-width:20px; padding:2px 5px; border-radius:999px; background:color-mix(in srgb,currentColor 7%,transparent); color:currentColor; font-size:6.5px; font-weight:800; } /* light theme */ html[data-game-theme="light"] .inventory-v2741 { --inv-bg:#f7fafc; --inv-card:#ffffff; --inv-soft:#f2f6f9; --inv-line:#d9e3ea; --inv-text:#17354d; --inv-muted:#6e8495; --inv-blue:#2f80ed; } html[data-game-theme="light"] .game-screen .side-panel.is-inventory-panel { background:rgba(248,251,253,.985); box-shadow:0 18px 50px rgba(22,61,86,.16); } html[data-game-theme="light"] .inventory-item-dialog-v2741 { background:#fbfdfe; } /* dark theme */ html[data-game-theme="dark"] .inventory-v2741 { --inv-bg:#0a2733; --inv-card:#10333f; --inv-soft:#0c2d39; --inv-line:#2c5260; --inv-text:#f0f7fa; --inv-muted:#94aab4; --inv-blue:#55b8ef; } html[data-game-theme="dark"] .game-screen .side-panel.is-inventory-panel { background:rgba(8,35,46,.985); border-color:#294d5b; box-shadow:0 20px 54px rgba(0,0,0,.35); } html[data-game-theme="dark"] .inventory-v2741__wallet > span, html[data-game-theme="dark"] .inventory-item-v2741 { box-shadow:none; } html[data-game-theme="dark"] .inventory-item-v2741:hover { background:#123a47; box-shadow:none; } html[data-game-theme="dark"] .inventory-v2741__wallet button { background:#143e4c; } html[data-game-theme="dark"] .inventory-v2741__wallet button:hover { background:var(--inv-blue); color:#082432; } html[data-game-theme="dark"] .inventory-item-dialog-v2741 { background:#0d303c; border-color:#315866; } html[data-game-theme="dark"] .inventory-item-dialog-v2741__actions button.is-transfer { color:#68d2a9; } html[data-game-theme="dark"] .inventory-item-dialog-v2741__actions button.is-sell { color:#efbd60; } html[data-game-theme="dark"] .inventory-item-dialog-v2741__actions button.is-danger { color:#ff8585; } @media (max-width:1000px) and (min-width:761px) { .game-screen .side-panel.is-inventory-panel { width:min(740px,calc(100vw - 44px)); } .inventory-v2741__items { grid-template-columns:repeat(4,minmax(0,1fr)); } .inventory-v2741__categories { grid-template-columns:repeat(5,minmax(0,1fr)); } } @media (max-width:760px) { .game-screen .side-panel.is-inventory-panel { top:max(8px,env(safe-area-inset-top)); right:7px; left:7px; bottom:calc(66px + env(safe-area-inset-bottom)); width:auto; height:auto; padding:10px; border-radius:19px; } .inventory-v2741 .inventory-v2740__header { grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; gap:7px; padding-right:39px; } .inventory-v2741 .inventory-v2740__title > span { width:36px; height:36px; } .inventory-v2741 .inventory-v2740__title h2 { font-size:19px; } .inventory-v2741 .inventory-v2740__title small { font-size:6.5px; } .inventory-v2741__wallet { gap:5px; } .inventory-v2741__wallet > span { min-width:73px; height:31px; grid-template-columns:14px auto 21px; gap:4px; padding-left:6px; } .inventory-v2741__wallet > span > .inventory-ui-icon { width:14px; height:14px; } .inventory-v2741__wallet b { font-size:7.5px; } .inventory-v2741__wallet button { width:21px; height:21px; border-radius:7px; } .inventory-v2741 .inventory-v2740__tools { grid-column:1/-1; grid-template-columns:minmax(0,1fr) 56px; grid-template-rows:35px 34px; gap:5px; } .inventory-v2741__search { grid-column:1; grid-row:1; height:35px; } .inventory-v2741__view { grid-column:2; grid-row:1; height:35px; } .inventory-v2741__sort { grid-column:1/-1; grid-row:2; height:34px; } .inventory-v2741__categories { display:flex; overflow:auto hidden; gap:5px; padding-bottom:1px; scrollbar-width:none; } .inventory-v2741__categories::-webkit-scrollbar { display:none; } .inventory-v2741__categories button { flex:0 0 58px; min-height:48px; } .inventory-v2741__categories button > span { font-size:6px; } .inventory-v2741__summary { display:none; } .inventory-v2741__items { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .inventory-item-v2741 { grid-template-rows:49px minmax(22px,auto) 18px; min-height:96px; padding:6px; border-radius:12px; } .inventory-item-v2741__art { width:49px; height:49px; border-radius:12px; } .inventory-item-v2741__art .item-icon { width:40px; height:40px; } .inventory-item-v2741__name b { font-size:7.5px; } .inventory-item-v2741__rights i { min-width:18px; height:17px; padding:0 3px; } .inventory-item-v2741__rights .inventory-ui-icon { width:8px; height:8px; } .inventory-item-v2741__rights b { font-size:5.8px; } .inventory-item-dialog-v2741 { width:100%; gap:8px; padding:13px; border-radius:19px 19px 14px 14px; } .inventory-item-dialog-v2741__header { grid-template-columns:56px minmax(0,1fr) auto; gap:8px; } .inventory-item-dialog-v2741__header h3 { font-size:16px; } .inventory-item-dialog-v2741__header p { font-size:7.5px; } .inventory-item-dialog-v2741__actions button { min-height:43px; } } @media (max-width:430px) { .inventory-v2741__wallet > span.is-coins { display:none; } .inventory-v2741__items { grid-template-columns:repeat(2,minmax(0,1fr)); } .inventory-item-v2741 { grid-template-rows:53px minmax(23px,auto) 18px; min-height:101px; } .inventory-item-v2741__art { width:53px; height:53px; } } .inventory-v2741__wallet button .inventory-ui-icon { color:currentColor !important; } /* v15 combat loadout: an inventory item is assigned to one of six explicit battle slots. The picker stays inside the existing item action dialog. */ .inventory-item-dialog-v2741 { max-height:min(84dvh,720px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; } .inventory-item-dialog-v2741__actions button.is-battle-equip > svg { width:18px;height:18px;color:currentColor; } .inventory-item-dialog-v2741__actions button.is-battle-equip small { min-width:auto;padding:2px 6px;text-transform:none; } .inventory-battle-loadout[hidden] { display:none!important; } .inventory-battle-loadout { display:grid; gap:8px; padding:10px; border:1px solid color-mix(in srgb,var(--theme-accent) 24%,var(--theme-border)); border-radius:13px; background:color-mix(in srgb,var(--theme-card) 90%,var(--theme-accent) 10%); animation:inventory-loadout-open .16s ease-out both; } @keyframes inventory-loadout-open { from { opacity:0;transform:translateY(-4px); } to { opacity:1;transform:none; } } .inventory-battle-loadout > header { display:flex;align-items:center;justify-content:space-between;gap:10px; } .inventory-battle-loadout > header > span { display:flex;align-items:center;gap:6px;color:var(--theme-text); } .inventory-battle-loadout > header svg { width:17px;height:17px;color:var(--theme-accent); } .inventory-battle-loadout > header b { font-size:9px;font-weight:800; } .inventory-battle-loadout > header small { color:var(--theme-muted);font-size:6.5px;font-weight:650;text-align:right; } .inventory-battle-loadout > nav { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px; } .inventory-battle-loadout > nav > button { position:relative; min-width:0; min-height:76px; padding:7px 5px 6px; display:grid; grid-template-columns:30px minmax(0,1fr); grid-template-rows:18px 17px; align-content:center; align-items:center; gap:1px 6px; border:1px solid var(--theme-border); border-radius:10px; background:var(--theme-card); color:var(--theme-text); box-shadow:none; text-align:left; transition:border-color .13s ease,background .13s ease,transform .13s ease; } .inventory-battle-loadout > nav > button:hover:not(:disabled), .inventory-battle-loadout > nav > button:focus-visible { border-color:color-mix(in srgb,var(--theme-accent) 62%,var(--theme-border)); background:color-mix(in srgb,var(--theme-card) 94%,var(--theme-accent) 6%); transform:translateY(-1px); } .inventory-battle-loadout > nav > button.is-current { border-color:var(--theme-accent); background:color-mix(in srgb,var(--theme-card) 88%,var(--theme-accent) 12%); box-shadow:inset 3px 0 var(--theme-accent); } .inventory-battle-loadout > nav > button > kbd { position:absolute;left:5px;top:5px;min-width:17px;height:17px;padding:0 3px; display:grid;place-items:center;border:1px solid var(--theme-border);border-radius:5px; background:var(--inv-soft,var(--theme-card));color:var(--theme-muted);font-family:inherit;font-size:7px;font-weight:800;line-height:1; } .inventory-battle-loadout > nav > button > span { grid-column:1;grid-row:1/3;width:30px;height:30px;display:grid;place-items:center; overflow:hidden;border:1px solid var(--theme-border);border-radius:9px;background:var(--inv-soft,var(--theme-card)); } .inventory-battle-loadout .inventory-battle-slot-art, .inventory-battle-loadout .inventory-battle-slot-art > *, .inventory-battle-loadout .inventory-battle-slot-empty { width:25px;height:25px;object-fit:contain; } .inventory-battle-loadout .inventory-battle-slot-empty { color:var(--theme-muted); } .inventory-battle-loadout > nav > button > b { grid-column:2;grid-row:1;min-width:0;overflow:hidden;color:var(--theme-text);font-size:7.5px;font-weight:780;text-overflow:ellipsis;white-space:nowrap; } .inventory-battle-loadout > nav > button > small { grid-column:2;grid-row:2;color:var(--theme-muted);font-size:6.2px;font-weight:680; } .inventory-battle-loadout > nav > button.is-current > small { color:var(--theme-accent);font-weight:800; } .inventory-battle-loadout > footer { display:flex;flex-wrap:wrap;gap:5px; } .inventory-battle-loadout > footer > button { min-height:27px;padding:0 9px;border:1px solid color-mix(in srgb,#e45656 28%,var(--theme-border));border-radius:8px; background:color-mix(in srgb,var(--theme-card) 96%,#e45656 4%);color:#d24b4b;font-size:6.7px;font-weight:750; } html[data-game-theme="dark"] .inventory-battle-loadout > footer > button { color:#ff8585; } @media (max-width:560px) { .inventory-battle-loadout > header { align-items:flex-start; } .inventory-battle-loadout > header small { max-width:46%; } .inventory-battle-loadout > nav { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* v2.7.42 — compact rectangular minimap with top/bottom status bars */ .world-minimap { --minimap-shell-bg: rgba(247,252,255,.97); --minimap-top-bg: rgba(7,35,48,.96); --minimap-top-text: #f6fbff; --minimap-bottom-bg: rgba(248,252,255,.98); --minimap-bottom-text: #193b50; --minimap-line: rgba(131,177,201,.46); position: absolute; z-index: 16; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: grid; grid-template-rows: 30px 126px 34px; width: 248px; height: 190px; padding: 0; overflow: hidden; border: 2px solid rgba(255,255,255,.92); border-radius: 20px; background: var(--minimap-shell-bg); box-shadow: 0 18px 42px rgba(0,25,41,.28), inset 0 0 0 1px rgba(12,114,173,.12); color: var(--minimap-bottom-text); } html[data-game-theme="dark"] .world-minimap { --minimap-shell-bg: rgba(5,30,42,.98); --minimap-top-bg: rgba(5,28,39,.98); --minimap-top-text: #f5fbff; --minimap-bottom-bg: rgba(6,37,50,.98); --minimap-bottom-text: #e8f7ff; --minimap-line: rgba(92,163,198,.34); border-color: rgba(126,197,230,.38); } .world-minimap.is-offline { opacity: .88; } .world-minimap-topbar, .world-minimap-bottombar { position: relative; z-index: 12; display: flex; align-items: center; } .world-minimap-topbar { justify-content: space-between; gap: 8px; padding: 0 11px; border-bottom: 1px solid rgba(255,255,255,.08); background: var(--minimap-top-bg); color: var(--minimap-top-text); } .world-minimap-place { display: flex; align-items: center; gap: 6px; } .world-minimap-place b { max-width: 154px; overflow: hidden; font-size: 9px; font-weight: 900; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; } .world-minimap-online-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #51d687; box-shadow: 0 0 0 3px rgba(81,214,135,.12); } .world-minimap.is-offline .world-minimap-online-dot { background:#8fa3ae; box-shadow:none; } .world-minimap-topbar time { flex: 0 0 auto; font-size: 9px; font-weight: 900; font-variant-numeric: tabular-nums; } .world-minimap-map-button { position: relative; display: block; width: 100%; height: 126px; min-height: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #16384a; box-shadow: none; color: inherit; cursor: pointer; } .world-minimap-map-button:hover { transform:none; filter:brightness(1.035); } .world-minimap-map-button:active { transform:none; filter:brightness(.97); } .world-minimap-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; border: 0; border-radius: 0; background: linear-gradient(180deg,#31586c,#102838); box-shadow: none; pointer-events: none; } .world-minimap-frame::after { content:''; position:absolute; z-index:2; inset:0; border-radius:0; background: linear-gradient(180deg,rgba(1,23,34,.05),transparent 22%,transparent 72%,rgba(1,22,33,.12)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events:none; } .world-minimap-preview { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; object-fit:fill; filter:saturate(1.08) contrast(1.025) brightness(1.01); transition:opacity .18s ease, filter .18s ease; } .world-minimap-map-button:hover .world-minimap-preview { filter:saturate(1.12) contrast(1.035) brightness(1.035); } .world-minimap-grid, .world-minimap-revision { display:none !important; } .world-minimap-north { position:absolute; z-index:5; top:7px; left:50%; display:grid; place-items:center; width:20px; height:20px; transform:translateX(-50%); border:1px solid rgba(255,255,255,.72); border-radius:50%; background:rgba(7,31,43,.72); color:#fff; font-size:9px; font-style:normal; font-weight:1000; text-shadow:0 1px 3px rgba(0,0,0,.65); box-shadow:0 3px 8px rgba(0,0,0,.18); } .world-minimap-player { position:absolute; z-index:10; width:28px; height:34px; border:0; border-radius:0; background:transparent; box-shadow:none; transform:translate(-50%,-50%) rotate(var(--minimap-heading,0deg)); transform-origin:50% 50%; transition:left .09s linear, top .09s linear, transform .14s ease-out; pointer-events:none; } .world-minimap-player svg { display:block; width:28px; height:34px; overflow:visible; filter:drop-shadow(0 3px 4px rgba(0,35,60,.48)); } .world-minimap-player path { fill:#1b9df0; stroke:#fff; stroke-width:3; stroke-linejoin:round; paint-order:stroke fill; } .world-minimap-friend-markers, .world-minimap-party-markers { border-radius:0; } .world-minimap-bottombar { gap: 8px; padding: 0 7px 0 10px; border-top: 1px solid var(--minimap-line); background: var(--minimap-bottom-bg); color: var(--minimap-bottom-text); } .world-minimap-channel { display:flex; min-width:0; align-items:center; gap:4px; white-space:nowrap; } .world-minimap-channel > i { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:color-mix(in srgb,#2d9fe8 12%,transparent); color:#258bc7; font-size:7px; font-style:normal; } .world-minimap-channel small { color:color-mix(in srgb,var(--minimap-bottom-text) 62%,transparent); font-size:6px; font-weight:800; } .world-minimap-channel b { max-width:44px; overflow:hidden; font-size:8px; font-weight:950; text-overflow:ellipsis; } .world-minimap-ping { display:flex; flex:0 0 auto; align-items:center; gap:5px; min-width:58px; padding-left:7px; border-left:1px solid var(--minimap-line); } .world-minimap-ping b { font-size:8px; font-weight:950; font-variant-numeric:tabular-nums; } .world-minimap-ping-bars { display:flex; height:13px; align-items:flex-end; gap:1px; } .world-minimap-ping-bars span { width:2px; border-radius:2px; background:currentColor; opacity:.92; } .world-minimap-ping-bars span:nth-child(1){height:4px}.world-minimap-ping-bars span:nth-child(2){height:7px}.world-minimap-ping-bars span:nth-child(3){height:10px}.world-minimap-ping-bars span:nth-child(4){height:13px} .world-minimap-ping.is-good { color:#28a75f; } .world-minimap-ping.is-medium { color:#d89423; } .world-minimap-ping.is-bad { color:#e25555; } .world-minimap-ping.is-unknown { color:#879aa6; } .world-minimap-open { margin-left:auto; display:flex; flex:0 0 auto; align-items:center; justify-content:center; gap:5px; min-width:62px; height:25px; padding:0 9px; border:1px solid #1685cf; border-radius:9px; background:linear-gradient(180deg,#2da7f2,#167fd1); color:#fff; box-shadow:0 4px 9px rgba(20,126,203,.22), inset 0 1px 0 rgba(255,255,255,.25); } .world-minimap-open:hover { transform:translateY(-1px); filter:brightness(1.04); } .world-minimap-open:active { transform:translateY(0) scale(.98); } .world-minimap-open span { display:grid; place-items:center; width:14px; height:14px; } .world-minimap-open .ui-icon { width:13px; height:13px; } .world-minimap-open b { font-size:8px; font-weight:950; } html[data-game-theme="dark"] .world-minimap-open { border-color:#2a9bd8; background:linear-gradient(180deg,#1688ca,#0a669f); } @media (max-width:1180px) and (min-width:761px) { .world-minimap { width:220px; height:171px; grid-template-rows:28px 113px 30px; } .world-minimap-map-button { height:113px; } .world-minimap-place b { max-width:132px; } .world-minimap-bottombar { gap:6px; padding-left:8px; } .world-minimap-open { min-width:56px; height:23px; padding:0 7px; } } @media (max-width:760px) { .world-minimap { top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); grid-template-rows:23px 82px 27px; width:158px; height:132px; border-width:1.5px; border-radius:15px; box-shadow:0 10px 24px rgba(0,24,38,.25); } .world-minimap-topbar { padding:0 7px; } .world-minimap-place { gap:4px; } .world-minimap-online-dot { width:5px; height:5px; box-shadow:none; } .world-minimap-place b { max-width:95px; font-size:7px; } .world-minimap-topbar time { font-size:7px; } .world-minimap-map-button { height:82px; } .world-minimap-north { top:4px; width:16px; height:16px; font-size:7px; } .world-minimap-player { width:20px; height:24px; } .world-minimap-player svg { width:20px; height:24px; } .world-minimap-player path { stroke-width:3.2; } .world-minimap-bottombar { gap:4px; padding:0 4px 0 6px; } .world-minimap-channel { gap:3px; } .world-minimap-channel > i { width:13px; height:13px; font-size:5px; } .world-minimap-channel small { display:none; } .world-minimap-channel b { max-width:31px; font-size:6px; } .world-minimap-ping { min-width:42px; gap:3px; padding-left:4px; } .world-minimap-ping b { font-size:6px; } .world-minimap-ping-bars { height:10px; } .world-minimap-ping-bars span { width:1.5px; } .world-minimap-ping-bars span:nth-child(1){height:3px}.world-minimap-ping-bars span:nth-child(2){height:5px}.world-minimap-ping-bars span:nth-child(3){height:8px}.world-minimap-ping-bars span:nth-child(4){height:10px} .world-minimap-open { min-width:43px; height:21px; padding:0 5px; border-radius:7px; gap:3px; } .world-minimap-open span { width:11px; height:11px; } .world-minimap-open .ui-icon { width:10px; height:10px; } .world-minimap-open b { font-size:6px; } .world-topbar { right:max(174px,calc(env(safe-area-inset-right) + 166px)); } .player-chip { width:min(174px,calc(100vw - 182px)); } .world-location { width:min(202px,calc(100vw - 174px)); } .quest-widget { top:max(142px,calc(env(safe-area-inset-top) + 136px)); } } @media (max-width:420px) { .world-minimap { width:148px; grid-template-rows:22px 76px 26px; height:124px; } .world-minimap-map-button { height:76px; } .world-minimap-place b { max-width:85px; } .world-minimap-open b { display:none; } .world-minimap-open { min-width:27px; width:27px; padding:0; } .world-topbar { right:max(160px,calc(env(safe-area-inset-right) + 154px)); } .player-chip { width:min(164px,calc(100vw - 168px)); } .world-location { width:min(184px,calc(100vw - 160px)); } .quest-widget { top:max(134px,calc(env(safe-area-inset-top) + 128px)); } } @media (prefers-reduced-motion:reduce) { .world-minimap-player, .world-minimap-preview, .world-minimap-open { transition:none!important; } } /* v2.7.43 — minimalist desktop minimap + classic round phone minimap */ @media (min-width:761px) { .world-minimap { --minimap-top-bg:rgba(13,29,31,.94); --minimap-bottom-bg:rgba(249,251,249,.98); --minimap-bottom-text:#263d47; --minimap-line:rgba(93,119,126,.26); top:max(14px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); display:grid; grid-template-rows:29px 112px 31px; width:252px; height:172px; overflow:visible; border:1px solid rgba(255,255,255,.92); border-radius:15px; background:transparent; box-shadow:0 13px 30px rgba(0,27,42,.28); } html[data-game-theme="dark"] .world-minimap { --minimap-top-bg:rgba(8,26,33,.97); --minimap-bottom-bg:rgba(9,34,43,.98); --minimap-bottom-text:#e8f5f8; --minimap-line:rgba(115,172,190,.2); border-color:rgba(139,190,204,.36); } .world-minimap-topbar { padding:0 10px 0 11px; border:0; border-radius:14px 14px 0 0; background:var(--minimap-top-bg); color:#f8fcfd; } .world-minimap-place { min-width:0; } .world-minimap-place b { max-width:154px; font-size:8px; font-weight:850; letter-spacing:.01em; } .world-minimap-server-meta { display:flex; flex:0 0 auto; align-items:center; gap:6px; } .world-minimap-server-meta img { width:16px; height:16px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.22)); } .world-minimap-topbar time { min-width:34px; font-size:8px; font-weight:900; text-align:right; } .world-minimap-map-surface { position:relative; width:100%; height:112px; overflow:hidden; background:#17394a; } .world-minimap-frame { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; box-shadow:none; } .world-minimap-preview { filter:saturate(1.06) contrast(1.015); } .world-minimap-frame::after { background:linear-gradient(180deg,rgba(4,24,31,.05),transparent 30%,transparent 75%,rgba(4,24,31,.1)); } .world-minimap-grid,.world-minimap-revision,.world-minimap-north { display:none!important; } .world-minimap-player { width:16px; height:20px; transform:translate(-50%,-50%) rotate(var(--minimap-heading,0deg)); transition:left .09s linear,top .09s linear,transform .13s ease-out; } .world-minimap-player svg { width:16px;height:20px;filter:drop-shadow(0 2px 3px rgba(0,35,60,.48)); } .world-minimap-player path { fill:#218fd4;stroke:#fff;stroke-width:2.3; } .world-minimap-bottombar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0; min-height:31px; padding:0; border-top:1px solid var(--minimap-line); border-radius:0 0 14px 14px; background:var(--minimap-bottom-bg); color:var(--minimap-bottom-text); } .world-minimap-channel { display:grid; grid-template-columns:18px minmax(0,1fr) auto 11px; gap:5px; align-items:center; height:30px; min-width:0; padding:0 8px 0 9px; border:0; border-radius:0 0 0 14px; background:transparent; color:inherit; box-shadow:none; text-align:left; } .world-minimap-channel:not(:disabled):hover { background:color-mix(in srgb,#2899d9 7%,transparent);transform:none; } .world-minimap-channel:disabled { opacity:.72;cursor:default; } .world-minimap-channel-icon { display:grid;place-items:center;width:18px;height:18px;color:#657d87; } .world-minimap-channel-icon svg { width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:1.3; } .world-minimap-channel-copy { display:grid;gap:0;min-width:0;line-height:1; } .world-minimap-channel-copy small { color:color-mix(in srgb,var(--minimap-bottom-text) 57%,transparent);font-size:5px;font-weight:750;text-transform:uppercase;letter-spacing:.05em; } .world-minimap-channel-copy b { overflow:hidden;font-size:7.5px;font-weight:900;text-overflow:ellipsis;white-space:nowrap; } .world-minimap-channel em { color:color-mix(in srgb,var(--minimap-bottom-text) 64%,transparent);font-size:6.5px;font-style:normal;font-weight:850;font-variant-numeric:tabular-nums; } .world-minimap-channel-chevron { color:color-mix(in srgb,var(--minimap-bottom-text) 55%,transparent);font-size:10px;transition:transform .15s ease; } .world-minimap.is-channel-open .world-minimap-channel-chevron { transform:rotate(180deg); } .world-minimap-ping { justify-content:center; min-width:66px; height:30px; padding:0 9px; border-left:1px solid var(--minimap-line); } .world-minimap-ping b { font-size:7.5px; } .world-minimap-ping-bars { height:12px; } .world-minimap-ping-bars span { width:2px; } .world-minimap-channel-menu { position:absolute; z-index:30; top:177px; right:0; width:206px; padding:8px; border:1px solid var(--theme-border,rgba(126,164,181,.38)); border-radius:13px; background:var(--theme-panel,#f7fbfc); color:var(--theme-text,#173e58); box-shadow:0 14px 34px rgba(0,27,42,.28); animation:minimap-channel-in .14s ease-out both; } .world-minimap-channel-menu[hidden] { display:none!important; } .world-minimap-channel-menu>header { display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:2px 3px 7px; } .world-minimap-channel-menu>header b { font-size:9px;font-weight:900; } .world-minimap-channel-menu>header small { color:var(--theme-muted,#718897);font-size:6px; } #worldMinimapChannelList { display:grid;gap:5px; } #worldMinimapChannelList button { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:37px; padding:6px 8px; border:1px solid var(--theme-border,rgba(124,163,180,.26)); border-radius:10px; background:var(--theme-surface-soft,rgba(225,239,245,.42)); color:var(--theme-text,#173e58); box-shadow:none; text-align:left; } #worldMinimapChannelList button:not(:disabled):hover { border-color:color-mix(in srgb,#2d9bd7 52%,var(--theme-border));background:color-mix(in srgb,#2d9bd7 8%,var(--theme-surface-soft));transform:none; } #worldMinimapChannelList button>span { display:grid;grid-template-columns:8px 1fr;column-gap:6px;align-items:center; } #worldMinimapChannelList button>span i { grid-row:1/3;width:7px;height:7px;border-radius:50%;background:#54bd7b;box-shadow:0 0 0 3px rgba(84,189,123,.1); } #worldMinimapChannelList button.is-medium>span i { background:#e0a439; } #worldMinimapChannelList button.is-busy>span i { background:#df6868; } #worldMinimapChannelList button>span b { font-size:8px;font-weight:900; } #worldMinimapChannelList button>span small { color:var(--theme-muted,#718897);font-size:5.5px; } #worldMinimapChannelList button em { font-size:7px;font-style:normal;font-weight:900;font-variant-numeric:tabular-nums; } #worldMinimapChannelList button.is-current { border-color:rgba(45,155,215,.38);background:rgba(45,155,215,.09); } @keyframes minimap-channel-in { from{opacity:0;transform:translateY(-5px) scale(.98)} to{opacity:1;transform:none} } } /* Phone keeps the familiar circular minimap for now. */ @media (max-width:760px) { .world-minimap { top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); display:block; width:102px; height:102px; overflow:hidden; border:2px solid rgba(255,255,255,.94); border-radius:50%; background:#17394a; box-shadow:0 10px 24px rgba(0,24,38,.25),inset 0 0 0 1px rgba(11,110,184,.14); } .world-minimap-topbar,.world-minimap-bottombar,.world-minimap-channel-menu { display:none!important; } .world-minimap-map-surface,.world-minimap-frame { position:absolute;inset:0;width:100%;height:100%;border-radius:50%;overflow:hidden; } .world-minimap-frame { border:0;box-shadow:none; } .world-minimap-frame::after { border-radius:50%;background:radial-gradient(circle at 50% 45%,transparent 60%,rgba(0,28,45,.15) 100%); } .world-minimap-preview { width:100%;height:100%;filter:saturate(1.04) contrast(1.01); } .world-minimap-grid,.world-minimap-revision,.world-minimap-north { display:none!important; } .world-minimap-player { width:11px; height:11px; border:2px solid #fff; border-radius:50%; background:#159ce8; box-shadow:0 0 0 4px rgba(18,161,255,.18),0 3px 8px rgba(2,76,140,.28); transform:translate(-50%,-50%)!important; } .world-minimap-player svg { display:none; } .world-topbar { right:max(118px,calc(env(safe-area-inset-right) + 110px)); } .player-chip { width:min(174px,calc(100vw - 118px)); } .world-location { width:min(202px,calc(100vw - 118px)); } .quest-widget { top:max(114px,calc(env(safe-area-inset-top) + 108px)); } } @media (max-width:420px) { .world-minimap { width:92px;height:92px; } .world-topbar { right:max(106px,calc(env(safe-area-inset-right) + 100px)); } .player-chip { width:min(164px,calc(100vw - 108px)); } .world-location { width:min(184px,calc(100vw - 106px)); } .quest-widget { top:max(104px,calc(env(safe-area-inset-top) + 100px)); } } @media (prefers-reduced-motion:reduce) { .world-minimap-channel-menu,.world-minimap-channel-chevron { animation:none!important;transition:none!important; } } /* v2.7.44 — stretched desktop minimap, stronger depth and world-channel teleport loading */ @media (min-width:761px) { .world-minimap { grid-template-rows:34px 136px 35px; width:286px; height:205px; border-color:rgba(255,255,255,.96); border-radius:17px; box-shadow: 0 22px 46px rgba(0,24,38,.32), 0 5px 14px rgba(0,31,48,.18), inset 0 0 0 1px rgba(15,105,150,.10); filter:drop-shadow(0 1px 0 rgba(255,255,255,.32)); } html[data-game-theme="dark"] .world-minimap { border-color:rgba(132,187,207,.32); box-shadow: 0 24px 52px rgba(0,0,0,.42), 0 5px 16px rgba(0,15,25,.28), inset 0 0 0 1px rgba(107,181,208,.08); } .world-minimap-topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; min-height:34px; padding:0 11px 0 13px; border-radius:16px 16px 0 0; } .world-minimap-place { min-width:0; width:100%; } .world-minimap-place b { display:block; width:100%; max-width:none; overflow:hidden; font-size:9.5px; font-weight:900; letter-spacing:.008em; line-height:1; text-overflow:ellipsis; white-space:nowrap; } .world-minimap-server-meta { min-width:max-content; gap:7px; } .world-minimap-server-meta img { width:17px; height:17px; } .world-minimap-topbar time { min-width:38px; font-size:9px; } .world-minimap-map-surface { height:136px; background:#17394a; box-shadow:inset 0 1px rgba(255,255,255,.10), inset 0 -1px rgba(0,20,31,.10); } .world-minimap-frame { height:136px; } .world-minimap-preview { width:100%; height:100%; transform:scale(1.018); transform-origin:center; filter:saturate(1.08) contrast(1.025) brightness(1.015); } .world-minimap-frame::after { box-shadow: inset 0 1px rgba(255,255,255,.10), inset 0 -12px 22px rgba(0,22,33,.10); } .world-minimap-player { width:15px; height:18px; } .world-minimap-player svg { width:15px; height:18px; } .world-minimap-bottombar { min-height:35px; border-radius:0 0 16px 16px; } .world-minimap-channel { grid-template-columns:19px minmax(0,1fr) auto 11px; height:34px; padding:0 10px 0 11px; border-radius:0 0 0 16px; } .world-minimap-channel-copy small { font-size:5.5px; } .world-minimap-channel-copy b { font-size:8px; } .world-minimap-channel em { padding:3px 6px; border-radius:999px; background:color-mix(in srgb,var(--minimap-bottom-text) 7%,transparent); font-size:6.7px; } .world-minimap-ping { min-width:72px; height:34px; padding:0 10px; } .world-minimap-ping b { font-size:7.8px; } .world-minimap-channel-menu { top:calc(100% + 7px); right:0; width:100%; padding:9px; border-radius:14px; box-shadow:0 18px 42px rgba(0,24,38,.32),0 3px 10px rgba(0,24,38,.12); } .world-minimap-channel-menu>header { padding:2px 4px 8px; } .world-minimap-channel-menu>header b { font-size:9.5px; } .world-minimap-channel-menu>header small { font-size:6.2px; } #worldMinimapChannelList { grid-template-columns:1fr 1fr; gap:6px; } #worldMinimapChannelList button { min-height:42px; padding:7px 9px; } #worldMinimapChannelList button>span b { font-size:8.2px; } #worldMinimapChannelList button>span small { font-size:5.8px; } #worldMinimapChannelList button em { font-size:7px; } .world-minimap.is-switching-world { pointer-events:none; } .world-minimap.is-switching-world::after { content:'Смена мира…'; position:absolute; z-index:40; inset:34px 0 35px; display:grid; place-items:center; background:rgba(5,28,39,.24); color:#fff; font-size:8px; font-weight:900; letter-spacing:.03em; backdrop-filter:blur(1.5px); } } .loading-screen.is-channel-switch { background:rgba(4,23,33,.58); backdrop-filter:blur(8px) saturate(.9); } .loading-screen.is-channel-switch .loading-orbit { width:58px; height:58px; border-width:4px; border-color:rgba(255,255,255,.22); border-top-color:#79d3ff; box-shadow:0 0 0 9px rgba(77,181,234,.08),0 18px 50px rgba(0,0,0,.24); } .loading-screen.is-channel-switch .loading-orbit i { inset:17px; border-radius:50%; background:#fff; box-shadow:0 0 0 6px rgba(79,191,240,.16); } .loading-screen.is-channel-switch b { margin-top:16px; font-size:17px; text-shadow:0 2px 10px rgba(0,0,0,.24); } .loading-screen.is-channel-switch small { max-width:min(420px,calc(100vw - 42px)); color:#e3f5fc; font-size:9px; line-height:1.45; text-align:center; } /* Phone deliberately stays on the previous circular minimap layout. */ @media (max-width:760px) { .world-minimap-preview { transform:none; } } /* v2.7.45 — edge-to-edge minimap chrome and minimap-first world navigation */ @media (min-width:761px) { .world-minimap { --minimap-top-bg:rgba(10,27,32,.82); grid-template-columns:minmax(0,1fr); align-items:stretch; justify-items:stretch; align-content:stretch; justify-content:stretch; padding:0; border:0; background:none; box-shadow:0 18px 38px rgba(0,24,38,.30),0 4px 12px rgba(0,31,48,.16); filter:none; } html[data-game-theme="dark"] .world-minimap { --minimap-top-bg:rgba(6,23,30,.86); border:0; box-shadow:0 20px 44px rgba(0,0,0,.40),0 4px 13px rgba(0,15,25,.26); } .world-minimap-topbar, .world-minimap-map-surface, .world-minimap-bottombar { width:100%; min-width:0; max-width:none; justify-self:stretch; } .world-minimap-topbar { grid-template-columns:minmax(0,1fr) auto; gap:5px; padding:0 10px 0 13px; background:var(--minimap-top-bg); backdrop-filter:blur(8px) saturate(1.03); box-shadow:inset 0 1px rgba(255,255,255,.06); } .world-minimap-place b { max-width:none; font-size:10px; font-weight:900; } .world-minimap-server-meta { gap:2px; margin-left:2px; } .world-minimap-server-meta img { width:14px; height:14px; margin-right:1px; } .world-minimap-topbar time { min-width:37px; font-size:9px; letter-spacing:.01em; } .world-minimap-map-surface { cursor:pointer; outline:none; } .world-minimap-map-surface:focus-visible { box-shadow:inset 0 0 0 2px rgba(67,174,235,.82); } .world-minimap-map-surface:hover .world-minimap-preview { filter:saturate(1.11) contrast(1.03) brightness(1.02); } .world-topbar { grid-template-columns:minmax(200px,230px) minmax(0,1fr); } } @media (max-width:760px) { .world-minimap-map-surface { cursor:pointer; } } /* v2.7.46 — server-world channel confirmation */ .world-channel-confirm { position:absolute; inset:0; z-index:96; display:none; place-items:center; padding:18px; } .world-channel-confirm.is-open { display:grid; } .world-channel-confirm__backdrop { position:absolute; inset:0; background:rgba(7,20,29,.28); backdrop-filter:blur(5px); } .world-channel-confirm__card { position:relative; z-index:1; width:min(390px,calc(100vw - 36px)); padding:22px; border:1px solid var(--theme-border,#d3e2ea); border-radius:24px; background:color-mix(in srgb,var(--theme-panel,#fff) 97%,transparent); color:var(--theme-text,#173e58); box-shadow:0 24px 70px rgba(5,25,38,.26); animation:world-channel-confirm-in .16s ease-out both; } .world-channel-confirm__close { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--theme-border,#d3e2ea); border-radius:13px; background:color-mix(in srgb,var(--theme-card,#fff) 94%,transparent); color:var(--theme-text,#173e58); font-size:22px; } .world-channel-confirm__icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:13px; border-radius:16px; background:color-mix(in srgb,#2d9fe8 12%,transparent); color:#1688cf; } .world-channel-confirm__icon svg { width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; } .world-channel-confirm__card>small { color:#1688cf;font-size:8px;font-weight:950;letter-spacing:.11em; } .world-channel-confirm__card h2 { margin:5px 42px 5px 0;font-size:23px;line-height:1.08; } .world-channel-confirm__card p { margin:0;color:var(--theme-muted,#698397);font-size:11px;line-height:1.5; } .world-channel-confirm__meta { margin-top:14px;padding:10px 12px;border-radius:13px;background:color-mix(in srgb,var(--theme-text,#173e58) 5%,transparent);font-size:9px;font-weight:850; } .world-channel-confirm__actions { display:grid;grid-template-columns:1fr 1.25fr;gap:8px;margin-top:16px; } .world-channel-confirm__actions button { min-height:44px;border:1px solid var(--theme-border,#d3e2ea);border-radius:14px;background:var(--theme-card,#fff);color:var(--theme-text,#173e58);font-size:10px;font-weight:900; } .world-channel-confirm__actions .is-primary { border-color:#238fd4;background:linear-gradient(180deg,#39a9ee,#218bd4);color:#fff;box-shadow:0 8px 18px rgba(33,139,212,.22); } html[data-game-theme="dark"] .world-channel-confirm__card { background:rgba(10,39,52,.98); } html[data-game-theme="dark"] .world-channel-confirm__actions button { background:rgba(255,255,255,.055); } @keyframes world-channel-confirm-in { from{opacity:0;transform:translateY(8px) scale(.97)} to{opacity:1;transform:none} } @media (max-width:760px) { .world-channel-confirm { align-items:end;padding:10px 10px calc(74px + env(safe-area-inset-bottom)); } .world-channel-confirm__card { width:100%;border-radius:22px;padding:18px; } } /* v2.7.47 — reliable one-click world picker hit areas */ @media (min-width:761px) { .world-minimap-channel { cursor:pointer; touch-action:manipulation; user-select:none; } .world-minimap-channel > * { pointer-events:none; } #worldMinimapChannelList button { min-height:48px; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-tap-highlight-color:transparent; } #worldMinimapChannelList button > * { pointer-events:none; } #worldMinimapChannelList button:not(:disabled):active { border-color:color-mix(in srgb,#2d9bd7 68%,var(--theme-border)); background:color-mix(in srgb,#2d9bd7 13%,var(--theme-surface-soft)); transform:scale(.985); } .world-minimap-channel-menu { animation:minimap-channel-fade-v2747 .11s ease-out both; } @keyframes minimap-channel-fade-v2747 { from { opacity:0; } to { opacity:1; } } } /* v2.7.48 — desktop onboarding HUD + five-button dock. Mobile layout intentionally unchanged. */ .desktop-dock { display:none; } @media (min-width:761px) { .game-screen .desktop-dock { position:absolute; z-index:24; left:50%; bottom:max(14px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,76px); gap:5px; padding:6px; transform:translateX(-50%); border:1px solid rgba(170,203,220,.24); border-radius:20px; background:linear-gradient(180deg,rgba(7,35,48,.88),rgba(5,29,41,.82)); box-shadow:0 16px 38px rgba(0,18,28,.28),inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(18px) saturate(1.12); } .game-screen .desktop-dock button { position:relative; display:grid; grid-template-rows:30px auto; place-items:center; gap:3px; min-width:0; min-height:55px; padding:5px 6px 6px; border:1px solid transparent; border-radius:14px; background:transparent; color:#c9dde8; transition:transform .14s ease,border-color .14s ease,background .14s ease,color .14s ease,box-shadow .14s ease; } .game-screen .desktop-dock button::after { content:''; position:absolute; left:17px; right:17px; bottom:3px; height:2px; border-radius:999px; background:transparent; transition:background .14s ease,box-shadow .14s ease; } .game-screen .desktop-dock button:hover { transform:translateY(-1px); border-color:rgba(101,195,245,.26); background:rgba(40,139,195,.13); color:#fff; } .game-screen .desktop-dock button:active { transform:translateY(0) scale(.97); } .game-screen .desktop-dock button.is-active { border-color:rgba(84,190,245,.38); background:linear-gradient(180deg,rgba(34,151,217,.25),rgba(22,119,176,.14)); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 7px 18px rgba(0,92,146,.14); } .game-screen .desktop-dock button.is-active::after { background:#52c8ff; box-shadow:0 0 8px rgba(74,197,255,.55); } .game-screen .desktop-dock button > span { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:rgba(255,255,255,.055); } .game-screen .desktop-dock button > span .ui-icon { width:20px; height:20px; } .game-screen .desktop-dock button > b { max-width:66px; overflow:hidden; color:inherit; font-size:7.5px; font-weight:760; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; } /* The old long rail becomes a compact secondary popover, only opened by Menu. */ .game-screen .world-rail { left:50%; right:auto; top:auto; bottom:84px; display:none; grid-template-columns:repeat(2,minmax(0,1fr)); width:286px; max-height:none; padding:8px; gap:5px; overflow:visible; transform:translateX(28px); border-radius:17px; background:linear-gradient(160deg,rgba(6,34,47,.96),rgba(5,43,58,.92)); box-shadow:0 18px 42px rgba(0,18,29,.3),inset 0 1px 0 rgba(255,255,255,.07); animation:desktopMenuIn .14s ease both; } .game-screen .world-rail.is-desktop-menu-open { display:grid; } .game-screen .world-rail button { display:grid; grid-template-columns:27px minmax(0,1fr); align-items:center; justify-items:start; min-height:40px; padding:5px 8px; gap:7px; border-radius:11px; color:#d8e9f1; } .game-screen .world-rail button span { width:27px; height:27px; } .game-screen .world-rail button span .ui-icon { width:17px; height:17px; } .game-screen .world-rail button b, .game-screen .world-rail button:hover b, .game-screen .world-rail button.is-active b { font-size:8px; font-weight:730; text-align:left; } .game-screen .world-rail button[data-panel="chat"], .game-screen .world-rail button[data-panel="home"] { margin-top:0; border-top:0; } @keyframes desktopMenuIn { from { opacity:0; transform:translateX(28px) translateY(5px) scale(.98); } to { opacity:1; transform:translateX(28px) translateY(0) scale(1); } } /* Compact training tracker: objective + progress at a glance, details live in the full quest panel. */ .game-screen .quest-widget { --quest-card-width:clamp(250px,20vw,286px); left:max(16px,env(safe-area-inset-left)); right:auto; top:calc(max(14px,env(safe-area-inset-top)) + 72px); width:var(--quest-card-width); gap:6px; padding:11px 12px 12px; border:1px solid rgba(128,194,225,.22); border-radius:16px; background:linear-gradient(155deg,rgba(5,31,43,.90),rgba(6,42,55,.84)); box-shadow:0 13px 30px rgba(0,20,30,.22),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(16px) saturate(1.08); } .game-screen .quest-widget:hover { transform:translateY(-1px); border-color:rgba(99,198,244,.35); box-shadow:0 16px 36px rgba(0,20,30,.27),inset 0 1px 0 rgba(255,255,255,.07); } .game-screen .quest-widget-head { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px; } .game-screen .quest-widget-head > #questWidgetState { min-width:0; overflow:hidden; color:#65d79a; font-size:6.5px; font-weight:850; letter-spacing:.8px; text-overflow:ellipsis; white-space:nowrap; } .game-screen .quest-widget-training-progress { position:relative; display:inline-flex; align-items:center; gap:5px; min-height:21px; padding:0 7px 0 6px; overflow:hidden; border:1px solid rgba(83,188,239,.20); border-radius:999px; background:rgba(57,158,214,.10); color:#bdeaff; } .game-screen .quest-widget-training-progress[hidden] { display:none; } .game-screen .quest-widget-training-progress::after { content:''; position:absolute; left:0; bottom:0; width:var(--tutorial-progress,0%); height:2px; background:#51c9ff; box-shadow:0 0 7px rgba(81,201,255,.5); } .game-screen .quest-widget-training-progress > i { width:6px; height:6px; border-radius:50%; background:#51c9ff; box-shadow:0 0 7px rgba(81,201,255,.6); } .game-screen .quest-widget-training-progress > b { color:inherit; font-size:6.5px; font-weight:780; white-space:nowrap; } .game-screen #questWidgetCounter { min-width:28px; min-height:21px; padding:0 6px; font-size:7px; } .game-screen .quest-widget > #questWidgetTitle { margin-top:1px; font-size:15px; font-weight:820; line-height:1.1; } .game-screen .quest-widget > #questWidgetDescription, .game-screen .quest-widget-meta { display:none; } .game-screen .quest-widget-target { grid-template-columns:34px minmax(0,1fr); gap:8px; padding:6px 8px 6px 6px; border:1px solid rgba(126,190,218,.16); border-radius:12px; background:rgba(255,255,255,.045); } .game-screen .quest-widget-target-icon { width:32px; height:32px; border-radius:9px; } .game-screen .quest-widget-target small { font-size:5.8px; letter-spacing:.65px; } .game-screen .quest-widget-target b { font-size:9.5px; font-weight:780; line-height:1.17; -webkit-line-clamp:2; } .game-screen .quest-widget-progress { gap:4px; } .game-screen .quest-widget-progress-copy { gap:8px; } .game-screen .quest-widget-progress-copy strong { font-size:8px; } .game-screen .quest-widget-progress-copy em { max-width:62%; color:#9bb7c5; font-size:7px; } .game-screen .quest-widget-progress-track { height:4px; background:rgba(255,255,255,.09); } .game-screen .quest-widget-progress-track > i { background:linear-gradient(90deg,#27aef1,#57d2ff); box-shadow:0 0 8px rgba(56,188,248,.34); } .game-screen .quest-widget.is-ready { border-color:rgba(255,208,79,.34); } .game-screen .quest-widget.is-ready .quest-widget-progress-track > i { background:linear-gradient(90deg,#e8b52e,#ffd861); } .game-screen .quest-widget.is-progress-updated { animation:questCompactUpdate .48s ease; } @keyframes questCompactUpdate { 0%,100% { transform:none; } 45% { transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,20,30,.28),0 0 0 2px rgba(69,195,250,.12); } } /* Keep contextual actions above the new dock. */ .game-screen .context-action { bottom:86px; } html[data-game-theme="light"] .game-screen .desktop-dock { border-color:rgba(190,214,226,.94); background:rgba(250,253,255,.92); box-shadow:0 14px 34px rgba(0,31,50,.18),inset 0 1px 0 #fff; } html[data-game-theme="light"] .game-screen .desktop-dock button { color:#42677d; } html[data-game-theme="light"] .game-screen .desktop-dock button > span { background:#edf6fa; } html[data-game-theme="light"] .game-screen .desktop-dock button:hover { border-color:#c8e2ef; background:#eff8fc; color:#087dcc; } html[data-game-theme="light"] .game-screen .desktop-dock button.is-active { border-color:#a9d8ee; background:linear-gradient(180deg,#e5f5fd,#f3fbff); color:#087dcc; box-shadow:0 7px 18px rgba(34,126,178,.10),inset 0 1px 0 #fff; } html[data-game-theme="light"] .game-screen .desktop-dock button.is-active::after { background:#149ce7; box-shadow:none; } html[data-game-theme="light"] .game-screen .world-rail { border-color:#cbdfe9; background:rgba(250,253,255,.97); box-shadow:0 16px 34px rgba(0,31,50,.19),inset 0 1px 0 #fff; } html[data-game-theme="light"] .game-screen .world-rail button { color:#315d77; } html[data-game-theme="light"] .game-screen .world-rail button:hover, html[data-game-theme="light"] .game-screen .world-rail button.is-active { border-color:#c8e4f2; background:#eaf6fc; color:#087dcc; box-shadow:none; } html[data-game-theme="light"] .game-screen .quest-widget { border-color:rgba(185,214,228,.95); background:rgba(250,253,255,.94); color:#173f59; box-shadow:0 13px 30px rgba(0,31,50,.16),inset 0 1px 0 #fff; } html[data-game-theme="light"] .game-screen .quest-widget-head > #questWidgetState { color:#2f9e68; } html[data-game-theme="light"] .game-screen .quest-widget-training-progress { border-color:#c6e4f2; background:#eef8fd; color:#147fbb; } html[data-game-theme="light"] .game-screen .quest-widget-target { border-color:#d7e7ee; background:#f1f8fb; } html[data-game-theme="light"] .game-screen .quest-widget-progress-copy em { color:#698596; } html[data-game-theme="light"] .game-screen .quest-widget-progress-track { background:#dceaf0; } } @media (min-width:761px) and (max-width:1080px) { .game-screen .desktop-dock { grid-template-columns:repeat(5,68px); } .game-screen .desktop-dock button { min-height:51px; } .game-screen .desktop-dock button > b { font-size:7px; } .game-screen .quest-widget { width:244px; } } @media (prefers-reduced-motion:reduce) { .game-screen .desktop-dock *, .game-screen .world-rail, .game-screen .quest-widget { animation:none !important; transition:none !important; } } /* v2.7.49 — five independent desktop/tablet actions on the right edge. Phone UI unchanged. */ @media (min-width:761px) { .game-screen .desktop-dock { --desktop-action-size:62px; --desktop-action-height:58px; position:absolute; z-index:26; left:auto; right:max(14px,env(safe-area-inset-right)); top:auto; bottom:max(18px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; width:var(--desktop-action-size); gap:8px; padding:0; transform:none; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; pointer-events:none; } .game-screen .desktop-dock button { position:relative; display:grid; grid-template-rows:31px auto; place-items:center; gap:3px; width:var(--desktop-action-size); min-width:var(--desktop-action-size); height:var(--desktop-action-height); min-height:var(--desktop-action-height); padding:6px 5px 5px; overflow:visible; border:1px solid rgba(126,181,207,.28); border-radius:16px; background:linear-gradient(160deg,rgba(7,38,52,.93),rgba(5,30,43,.90)); color:#cde1ea; box-shadow:0 9px 22px rgba(0,20,31,.20),inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(14px) saturate(1.08); pointer-events:auto; transition:transform .14s ease,border-color .14s ease,background .14s ease,color .14s ease,box-shadow .14s ease; } .game-screen .desktop-dock button::after { content:''; position:absolute; left:10px; right:10px; bottom:3px; height:2px; border-radius:999px; background:transparent; transition:background .14s ease,box-shadow .14s ease; } .game-screen .desktop-dock button:hover { transform:translateX(-2px); border-color:rgba(90,197,245,.48); background:linear-gradient(160deg,rgba(10,57,76,.96),rgba(7,40,55,.94)); color:#fff; box-shadow:0 12px 25px rgba(0,20,31,.26),0 0 0 1px rgba(54,174,232,.08),inset 0 1px 0 rgba(255,255,255,.09); } .game-screen .desktop-dock button:active { transform:translateX(-1px) scale(.965); } .game-screen .desktop-dock button.is-active { border-color:rgba(72,188,241,.60); background:linear-gradient(155deg,rgba(24,137,196,.93),rgba(16,91,137,.91)); color:#fff; box-shadow:0 11px 26px rgba(0,75,119,.25),inset 0 1px 0 rgba(255,255,255,.15); } .game-screen .desktop-dock button.is-active::after { background:#8be0ff; box-shadow:0 0 8px rgba(83,203,255,.58); } .game-screen .desktop-dock button > span { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; background:rgba(255,255,255,.06); } .game-screen .desktop-dock button > span .ui-icon { width:20px;height:20px; } .game-screen .desktop-dock button > b { width:100%; max-width:54px; overflow:hidden; color:inherit; font-size:7.2px; font-weight:780; line-height:1.05; text-align:center; text-overflow:ellipsis; white-space:nowrap; } .game-screen .desktop-dock-chat > i { position:absolute; top:-5px; right:-5px; display:grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border:2px solid #082b3b; border-radius:999px; background:#ef514a; color:#fff; font-size:7px; font-style:normal; font-weight:900; box-shadow:0 4px 9px rgba(116,22,19,.26); } .game-screen .desktop-dock-chat > i:empty, .game-screen .desktop-dock-chat > i[data-count="0"] { opacity:.58; } /* Secondary menu opens to the left of the fifth button, not on top of gameplay actions. */ .game-screen .world-rail { left:auto; right:calc(max(14px,env(safe-area-inset-right)) + 72px); top:auto; bottom:max(18px,env(safe-area-inset-bottom)); width:286px; max-height:min(286px,calc(100vh - 40px)); padding:8px; gap:5px; overflow:auto; transform:none; grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:17px; } .game-screen .world-rail.is-desktop-menu-open { display:grid; } .game-screen .world-rail button { grid-template-columns:27px minmax(0,1fr); min-height:40px; } @keyframes desktopMenuInRight2749 { from { opacity:0; transform:translateX(6px) scale(.98); } to { opacity:1; transform:none; } } .game-screen .world-rail.is-desktop-menu-open { animation:desktopMenuInRight2749 .14s ease both; } /* Context interaction stays clear of the five-button rail. */ .game-screen .context-action { right:calc(max(14px,env(safe-area-inset-right)) + 78px); bottom:max(24px,env(safe-area-inset-bottom)); } .game-screen:has(.world-rail.is-desktop-menu-open) .context-action.is-ready { opacity:0; pointer-events:none; } html[data-game-theme="light"] .game-screen .desktop-dock { border:0; background:transparent; box-shadow:none; } html[data-game-theme="light"] .game-screen .desktop-dock button { border-color:rgba(190,216,228,.96); background:rgba(249,253,255,.95); color:#365f78; box-shadow:0 9px 22px rgba(0,31,50,.15),inset 0 1px 0 #fff; } html[data-game-theme="light"] .game-screen .desktop-dock button > span { background:#edf6fa; } html[data-game-theme="light"] .game-screen .desktop-dock button:hover { border-color:#b9dfee; background:#f1faff; color:#087dcc; box-shadow:0 11px 25px rgba(0,54,84,.17),inset 0 1px 0 #fff; } html[data-game-theme="light"] .game-screen .desktop-dock button.is-active { border-color:#83caea; background:linear-gradient(180deg,#dff3fd,#effaff); color:#077abd; box-shadow:0 10px 23px rgba(24,117,168,.16),inset 0 1px 0 #fff; } html[data-game-theme="light"] .game-screen .desktop-dock button.is-active::after { background:#159ee5; box-shadow:none; } html[data-game-theme="light"] .game-screen .desktop-dock-chat > i { border-color:#f9fdff; } .is-battling .desktop-dock { opacity:0; pointer-events:none; } } /* Tablet / compact PC: same five actions, just denser. Mobile (<=760px) remains untouched. */ @media (min-width:761px) and (max-width:1080px) { .game-screen .desktop-dock { --desktop-action-size:54px; --desktop-action-height:52px; right:max(9px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); gap:6px; } .game-screen .desktop-dock button { grid-template-rows:27px auto; padding:5px 4px 4px; border-radius:14px; } .game-screen .desktop-dock button > span { width:27px;height:27px;border-radius:9px; } .game-screen .desktop-dock button > span .ui-icon { width:18px;height:18px; } .game-screen .desktop-dock button > b { max-width:48px;font-size:6.5px; } .game-screen .world-rail { right:calc(max(9px,env(safe-area-inset-right)) + 62px); bottom:max(12px,env(safe-area-inset-bottom)); width:min(250px,calc(100vw - 90px)); } .game-screen .context-action { right:calc(max(9px,env(safe-area-inset-right)) + 65px); bottom:max(14px,env(safe-area-inset-bottom)); } } @media (min-width:761px) and (max-height:680px) { .game-screen .desktop-dock { --desktop-action-size:50px; --desktop-action-height:46px; gap:5px; bottom:10px; } .game-screen .desktop-dock button { grid-template-rows:24px auto;padding:4px 3px 3px;border-radius:13px; } .game-screen .desktop-dock button > span { width:24px;height:24px; } .game-screen .desktop-dock button > span .ui-icon { width:16px;height:16px; } .game-screen .desktop-dock button > b { font-size:6px; } .game-screen .world-rail { right:68px;bottom:10px;max-height:230px; } .game-screen .context-action { right:68px;bottom:10px; } } @media (min-width:761px) { .game-screen .desktop-dock-chat > i[hidden] { display:none; } .game-screen .desktop-dock button.is-menu-open { border-color:rgba(84,190,245,.42); color:#fff; background:linear-gradient(155deg,rgba(22,105,150,.86),rgba(11,65,92,.90)); } html[data-game-theme="light"] .game-screen .desktop-dock button.is-menu-open { border-color:#abd9ed; color:#087dcc; background:#eaf7fd; } } /* v2.7.50 — reference-inspired desktop HUD composition. Phone UI remains unchanged. */ .desktop-utility-rail, .world-wallet { display:none; } @media (min-width:761px) { /* Player + balance: three quiet islands, not one giant top bar. */ .game-screen .world-topbar { z-index:24; top:max(12px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); right:auto; display:flex; align-items:flex-start; gap:10px; width:auto; pointer-events:none; } .game-screen .player-chip { pointer-events:auto; min-width:238px; min-height:62px; padding:7px 13px 7px 7px; border:1px solid rgba(132,191,211,.28); border-radius:19px; background:linear-gradient(145deg,rgba(7,39,51,.92),rgba(7,30,42,.88)); box-shadow:0 11px 27px rgba(0,22,33,.20),inset 0 1px rgba(255,255,255,.07); backdrop-filter:blur(13px) saturate(1.08); } .game-screen .player-chip-avatar { width:46px; height:46px; border-radius:15px; } .game-screen .player-chip-copy b { font-size:12px; } .game-screen .player-chip-copy small { font-size:7px; } .game-screen .instance-chip { display:none; } .game-screen .world-wallet { position:fixed; z-index:25; top:max(12px,env(safe-area-inset-top)); left:50%; display:flex; align-items:center; gap:8px; transform:translateX(-50%); pointer-events:auto; } .game-screen .world-wallet-currency { display:grid; grid-template-columns:25px minmax(52px,auto) 25px; align-items:center; gap:7px; min-height:42px; padding:0 7px 0 9px; border:1px solid rgba(132,191,211,.24); border-radius:14px; background:linear-gradient(145deg,rgba(7,39,51,.90),rgba(7,30,42,.88)); color:#effaff; box-shadow:0 9px 23px rgba(0,22,33,.18),inset 0 1px rgba(255,255,255,.07); backdrop-filter:blur(12px); } .game-screen .world-wallet-currency > i, .game-screen .world-wallet-currency > i .ui-icon { width:22px;height:22px; } .game-screen .world-wallet-currency.is-coins > i { color:#f6c544; } .game-screen .world-wallet-currency.is-gems > i { color:#63b7ff; } .game-screen .world-wallet-currency b { min-width:0; font-size:11px; font-weight:850; font-variant-numeric:tabular-nums; text-align:center; } .game-screen .world-wallet-currency button { display:grid; place-items:center; width:25px; height:25px; padding:0; border:1px solid rgba(255,255,255,.10); border-radius:8px; background:rgba(255,255,255,.08); color:#fff; font:850 17px/1 system-ui; transition:transform .12s ease,background .12s ease; } .game-screen .world-wallet-currency button:hover { background:rgba(77,181,240,.24); } .game-screen .world-wallet-currency button:active { transform:scale(.92); } /* Five primary actions live at the extreme bottom-right, clear of the centered interaction CTA. */ .game-screen .desktop-dock { --desktop-action-size:64px; --desktop-action-height:64px; position:absolute; z-index:27; right:max(14px,env(safe-area-inset-right)); bottom:max(14px,env(safe-area-inset-bottom)); left:auto; top:auto; display:grid; grid-template-columns:repeat(5,var(--desktop-action-size)); grid-auto-flow:column; gap:8px; width:auto; padding:0; transform:none; border:0; background:transparent; box-shadow:none; pointer-events:none; } .game-screen .desktop-dock button { pointer-events:auto; display:grid; grid-template-rows:34px auto; place-items:center; gap:3px; width:var(--desktop-action-size); min-width:var(--desktop-action-size); height:var(--desktop-action-height); min-height:var(--desktop-action-height); padding:7px 5px 5px; border:1px solid rgba(132,191,211,.27); border-radius:17px; background:linear-gradient(155deg,rgba(8,43,57,.94),rgba(6,32,44,.91)); color:#cde0e9; box-shadow:0 10px 24px rgba(0,21,32,.20),inset 0 1px rgba(255,255,255,.07); backdrop-filter:blur(13px) saturate(1.06); transition:transform .13s ease,border-color .13s ease,background .13s ease,color .13s ease,box-shadow .13s ease; } .game-screen .desktop-dock button::after { display:none; } .game-screen .desktop-dock button:hover { transform:translateY(-2px); border-color:rgba(84,194,241,.48); background:linear-gradient(155deg,rgba(12,59,78,.97),rgba(7,42,57,.95)); color:#fff; box-shadow:0 13px 28px rgba(0,25,38,.26),inset 0 1px rgba(255,255,255,.09); } .game-screen .desktop-dock button:active { transform:translateY(0) scale(.965); } .game-screen .desktop-dock button.is-active, .game-screen .desktop-dock button.is-menu-open { border-color:rgba(76,189,239,.62); background:linear-gradient(155deg,rgba(24,137,196,.94),rgba(15,92,138,.92)); color:#fff; box-shadow:0 12px 28px rgba(0,73,113,.26),inset 0 1px rgba(255,255,255,.15); } .game-screen .desktop-dock button > span { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:rgba(255,255,255,.06); } .game-screen .desktop-dock button > span .ui-icon { width:21px;height:21px; } .game-screen .desktop-dock button > b { max-width:58px; overflow:hidden; font-size:7.2px; font-weight:800; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; } .game-screen .desktop-dock-chat > i { top:-5px; right:-5px; } /* Four secondary shortcuts stay above the dock and never compete with the main actions. */ .game-screen .desktop-utility-rail { position:absolute; z-index:26; right:max(14px,env(safe-area-inset-right)); bottom:calc(max(14px,env(safe-area-inset-bottom)) + 76px); display:grid; gap:7px; width:54px; pointer-events:none; } .game-screen .desktop-utility-rail button { position:relative; pointer-events:auto; display:grid; grid-template-rows:28px auto; place-items:center; gap:2px; width:54px; min-height:49px; padding:5px 3px 4px; border:1px solid rgba(132,191,211,.25); border-radius:15px; background:linear-gradient(155deg,rgba(8,43,57,.89),rgba(6,32,44,.86)); color:#cfe1e9; box-shadow:0 8px 19px rgba(0,21,32,.17),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(11px); transition:transform .12s ease,border-color .12s ease,background .12s ease; } .game-screen .desktop-utility-rail button:hover { transform:translateX(-2px); border-color:rgba(84,194,241,.45); background:linear-gradient(155deg,rgba(11,58,76,.94),rgba(7,41,56,.92)); } .game-screen .desktop-utility-rail button > span { display:grid; place-items:center; width:27px; height:27px; } .game-screen .desktop-utility-rail .art-icon { width:27px;height:27px;object-fit:contain; } .game-screen .desktop-utility-rail button > b { max-width:48px; overflow:hidden; font-size:6.2px; font-weight:800; line-height:1; text-overflow:ellipsis; white-space:nowrap; } /* More menu opens up and to the left of the primary dock. */ .game-screen .world-rail { left:auto; right:calc(max(14px,env(safe-area-inset-right)) + 72px); top:auto; bottom:calc(max(14px,env(safe-area-inset-bottom)) + 76px); width:278px; max-height:min(286px,calc(100vh - 120px)); padding:8px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; overflow:auto; border-radius:17px; } /* The contextual action is visually dominant and stays centered. */ .game-screen .context-action, .game-screen .interaction-card { left:50%; right:auto; bottom:max(16px,env(safe-area-inset-bottom)); } .game-screen .interaction-card { width:min(420px,calc(100vw - 770px)); } .game-screen:has(.world-rail.is-desktop-menu-open) .context-action.is-ready { opacity:1; pointer-events:auto; } /* Desktop chat is intentionally openable as a compact lower-left tool window. */ .game-screen .chat-panel { z-index:38; min-width:300px; min-height:250px; max-width:min(420px,calc(100vw - 420px)); max-height:min(390px,calc(100vh - 150px)); padding:10px 11px 11px; border:1px solid rgba(120,181,204,.24); border-radius:18px; background:rgba(6,38,49,var(--chat-opacity)); color:#edf9fd; box-shadow:0 16px 38px rgba(0,22,33,.24),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(14px) saturate(1.03); } .game-screen .chat-head { min-height:36px; } .game-screen .chat-head small { display:none; } .game-screen .chat-head b { margin:0;font-size:11px; } .game-screen .chat-head-actions { gap:4px; } .game-screen .chat-head-actions button { width:29px; height:29px; border:1px solid rgba(255,255,255,.08); border-radius:9px; background:rgba(255,255,255,.06); color:#d8edf5; } .game-screen .chat-head-actions .chat-minimize span { font:900 15px/1 system-ui; } .game-screen .chat-tabs { gap:4px;margin:3px 0 6px; } .game-screen .chat-tabs button { min-height:28px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.05); color:#a9c3cf; font-size:7px; } .game-screen .chat-tabs button.is-active { border-color:rgba(80,184,234,.32); background:rgba(43,139,188,.23); color:#e8f8ff; } .game-screen .chat-message { grid-template-columns:20px 1fr;gap:6px;margin:5px 0; } .game-screen .chat-message > i { width:20px;height:20px;border-radius:7px;background:rgba(83,177,222,.16);color:#77cbf1;font-size:7px; } .game-screen .chat-message b { color:#dceff7;font-size:.72em; } .game-screen .chat-message p { color:#c1d8e1;font-size:.75em;line-height:1.3; } .game-screen .chat-message time { color:#6f98aa; } .game-screen #chatForm { gap:5px;margin-top:5px; } .game-screen #chatForm input { min-height:34px; border:1px solid rgba(123,181,203,.18); border-radius:10px; background:rgba(255,255,255,.05); color:#eef9fd; font-size:8px; } .game-screen #chatForm button { width:34px;height:34px;border-radius:10px; } .game-screen .chat-panel.is-minimized { min-height:0!important; height:48px!important; max-height:48px!important; overflow:hidden; } .game-screen .chat-panel.is-minimized .chat-config, .game-screen .chat-panel.is-minimized .chat-tabs, .game-screen .chat-panel.is-minimized .chat-log, .game-screen .chat-panel.is-minimized #chatForm, .game-screen .chat-panel.is-minimized .chat-resize { display:none!important; } .game-screen .chat-panel.is-minimized .chat-head { min-height:27px;cursor:pointer; } /* Slightly quieter quest tracker so the world remains the main visual layer. */ .game-screen .quest-widget { box-shadow:0 12px 26px rgba(0,25,35,.19),inset 0 1px rgba(255,255,255,.06); } html[data-game-theme="light"] .game-screen .player-chip, html[data-game-theme="light"] .game-screen .world-wallet-currency, html[data-game-theme="light"] .game-screen .desktop-dock button, html[data-game-theme="light"] .game-screen .desktop-utility-rail button { border-color:rgba(185,213,224,.92); background:rgba(249,253,255,.94); color:#355f77; box-shadow:0 9px 22px rgba(0,39,61,.12),inset 0 1px #fff; } html[data-game-theme="light"] .game-screen .desktop-dock button:hover, html[data-game-theme="light"] .game-screen .desktop-utility-rail button:hover { border-color:#aed9ea; background:#f0f9fd; color:#087fc5; } html[data-game-theme="light"] .game-screen .desktop-dock button.is-active, html[data-game-theme="light"] .game-screen .desktop-dock button.is-menu-open { border-color:#7fc8e8; background:linear-gradient(180deg,#def2fc,#eef9fd); color:#0779bd; } html[data-game-theme="light"] .game-screen .world-wallet-currency button { border-color:#d4e4ec; background:#edf5f9; color:#35677f; } html[data-game-theme="light"] .game-screen .chat-panel { border-color:rgba(181,211,224,.94); background:rgba(249,253,255,var(--chat-opacity)); color:#173f57; box-shadow:0 15px 34px rgba(19,63,87,.15),inset 0 1px #fff; } html[data-game-theme="light"] .game-screen .chat-head-actions button, html[data-game-theme="light"] .game-screen .chat-tabs button { border-color:#d9e8ef; background:#eef6fa; color:#527187; } html[data-game-theme="light"] .game-screen .chat-tabs button.is-active { background:#dff2fb;color:#087bbf;border-color:#a8d8ec; } html[data-game-theme="light"] .game-screen .chat-message b { color:#1f4b62; } html[data-game-theme="light"] .game-screen .chat-message p { color:#58758a; } html[data-game-theme="light"] .game-screen #chatForm input { border-color:#d5e5ed;background:#f7fbfd;color:#173f57; } } /* Compact PC and tablet: reserve room instead of letting HUD layers overlap. */ @media (min-width:861px) and (max-width:1180px) { .game-screen .desktop-dock { --desktop-action-size:52px; --desktop-action-height:54px; gap:6px; right:max(9px,env(safe-area-inset-right)); bottom:max(10px,env(safe-area-inset-bottom)); } .game-screen .desktop-dock button { grid-template-rows:29px auto;padding:5px 3px 4px;border-radius:14px; } .game-screen .desktop-dock button > span { width:29px;height:29px;border-radius:9px; } .game-screen .desktop-dock button > span .ui-icon { width:18px;height:18px; } .game-screen .desktop-dock button > b { max-width:47px;font-size:6.2px; } .game-screen .desktop-utility-rail { right:max(9px,env(safe-area-inset-right));bottom:72px;width:46px;gap:5px; } .game-screen .desktop-utility-rail button { width:46px;min-height:43px;border-radius:13px;grid-template-rows:24px auto; } .game-screen .desktop-utility-rail .art-icon { width:23px;height:23px; } .game-screen .desktop-utility-rail button > b { font-size:5.4px; } .game-screen .world-rail { right:64px;bottom:72px;width:242px; } .game-screen .interaction-card { width:min(340px,calc(100vw - 690px)); } .game-screen .interaction-card__visual { width:52px;height:52px; } .game-screen .interaction-card__cta { min-width:126px;padding-right:11px; } .game-screen .world-wallet-currency { grid-template-columns:21px minmax(44px,auto) 22px;min-height:38px;gap:5px; } .game-screen .world-wallet-currency > i,.game-screen .world-wallet-currency > i .ui-icon { width:19px;height:19px; } .game-screen .chat-panel { max-width:340px;max-height:310px; } } @media (min-width:761px) and (max-width:860px) { .game-screen .desktop-dock { --desktop-action-size:44px; --desktop-action-height:48px; right:max(7px,env(safe-area-inset-right)); bottom:max(8px,env(safe-area-inset-bottom)); gap:4px; } .game-screen .desktop-dock button { grid-template-rows:24px auto;padding:4px 2px 3px;border-radius:12px; } .game-screen .desktop-dock button > span { width:24px;height:24px;border-radius:8px; } .game-screen .desktop-dock button > span .ui-icon { width:16px;height:16px; } .game-screen .desktop-dock button > b { max-width:40px;font-size:5.3px; } .game-screen .desktop-utility-rail { right:max(7px,env(safe-area-inset-right));bottom:62px;width:40px;gap:4px; } .game-screen .desktop-utility-rail button { width:40px;min-height:38px;padding:4px 2px;border-radius:11px;grid-template-rows:22px auto; } .game-screen .desktop-utility-rail .art-icon { width:21px;height:21px; } .game-screen .desktop-utility-rail button > b { display:none; } .game-screen .world-rail { right:52px;bottom:62px;width:222px;max-height:230px; } .game-screen .interaction-card { width:max(250px,calc(100vw - 490px)); max-width:300px; min-height:68px; grid-template-columns:48px minmax(0,1fr) auto; gap:8px; padding:8px; } .game-screen .interaction-card__visual { width:46px;height:46px; } .game-screen .interaction-card__meta { display:none; } .game-screen .interaction-card__title { font-size:11px; } .game-screen .interaction-card__cta { min-width:110px;height:46px;padding:0 9px 0 7px;gap:6px; } .game-screen .interaction-card__key { width:32px;min-width:32px;height:32px;border-radius:8px;font-size:11px; } .game-screen .interaction-card__action-label { font-size:9px; } .game-screen .world-wallet { gap:5px; } .game-screen .world-wallet-currency { grid-template-columns:18px minmax(38px,auto) 20px;min-height:34px;padding:0 5px;gap:4px;border-radius:11px; } .game-screen .world-wallet-currency > i,.game-screen .world-wallet-currency > i .ui-icon { width:17px;height:17px; } .game-screen .world-wallet-currency b { font-size:8px; } .game-screen .world-wallet-currency button { width:20px;height:20px;border-radius:6px;font-size:13px; } .game-screen .player-chip { min-width:190px;min-height:52px;border-radius:16px; } .game-screen .player-chip-avatar { width:38px;height:38px;border-radius:12px; } .game-screen .chat-panel { max-width:300px;max-height:280px; } } @media (min-width:761px) and (max-height:680px) { .game-screen .desktop-utility-rail { bottom:58px; } .game-screen .world-rail { bottom:58px; } .game-screen .chat-panel { max-height:260px; } } @media (prefers-reduced-motion:reduce) { .game-screen .desktop-dock button, .game-screen .desktop-utility-rail button, .game-screen .world-wallet-currency button { transition:none!important; } } /* v2.7.51 — quest under minimap + trainer vitals card (desktop/tablet only) */ @media (min-width:761px) { .game-screen .player-chip { width:clamp(256px,19vw,294px); min-width:256px; min-height:90px; padding:8px 11px 8px 8px; gap:10px; border-radius:20px; align-items:flex-start; } .game-screen .player-chip-avatar { flex:0 0 auto; width:58px; height:58px; border:2px solid color-mix(in srgb,var(--role-color,#39aef4) 64%,#fff); border-radius:50%; box-shadow:0 0 0 3px color-mix(in srgb,var(--role-color,#39aef4) 16%,transparent),0 7px 16px rgba(0,25,38,.18); background-size:600% 800%; } .game-screen .player-chip-copy { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto; gap:3px; width:100%; min-width:0; padding-top:1px; } .game-screen .player-chip-identity { display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-width:0; } .game-screen #worldPlayerName { display:block; max-width:none; min-width:0; overflow:hidden; color:inherit; font-size:11.5px; font-weight:850; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; } .game-screen #worldPlayerLevel { flex:0 0 auto; color:#b9d1dd; font-size:7.5px; font-style:normal; font-weight:850; white-space:nowrap; } .game-screen .player-community-role { position:absolute; left:7px; bottom:6px; z-index:2; max-width:55px; overflow:hidden; padding:2px 5px; border:1px solid color-mix(in srgb,var(--role-color,#39aef4) 42%,transparent); background:rgba(5,33,45,.88); text-overflow:ellipsis; white-space:nowrap; } .game-screen .player-connection { display:flex; align-items:center; min-width:0; margin:0; color:#8faab8; font-size:6.4px!important; line-height:1.05; } .game-screen .player-chip-progress { display:grid; grid-template-columns:26px minmax(0,1fr) 48px; align-items:center; gap:6px; min-width:0; margin-top:2px; } .game-screen .player-chip-progress > small, .game-screen .player-chip-resources small { margin:0; color:#9cb4c0; font-size:6px!important; font-weight:850; letter-spacing:.02em; text-transform:uppercase; } .game-screen .player-chip-progress > i, .game-screen .player-chip-resources i { position:relative; display:block; height:5px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.11); } .game-screen .player-chip-progress > i > b, .game-screen .player-chip-resources i > b { position:absolute; inset:0 auto 0 0; width:0; border-radius:inherit; transition:width .22s ease; } .game-screen .player-chip-progress.is-exp > i > b { background:linear-gradient(90deg,#238ee9,#59c9ff); box-shadow:0 0 7px rgba(64,179,245,.38); } .game-screen .player-chip-progress > em, .game-screen .player-chip-resources em { color:#c7dbe4; font-size:6.2px; font-style:normal; font-weight:780; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; } .game-screen .player-chip-resources { display:grid; grid-template-columns:1fr 1fr; gap:7px; } .game-screen .player-chip-resources > span { display:grid; grid-template-columns:28px minmax(0,1fr) 20px; align-items:center; gap:4px; min-width:0; } .game-screen .player-chip-resources .is-stamina i > b { background:linear-gradient(90deg,#55bf3e,#a4dc36); } .game-screen .player-chip-resources .is-energy i > b { background:linear-gradient(90deg,#f1b62c,#ffd84d); } .game-screen .player-chip.is-tired .player-chip-resources .is-stamina i > b { background:linear-gradient(90deg,#e66e33,#f2a83b); } .game-screen .player-chip.is-low-energy .player-chip-resources .is-energy i > b { background:linear-gradient(90deg,#dc5845,#ee8a42); } /* Current objective belongs to the minimap cluster, not the player profile. */ .game-screen .quest-widget { --quest-card-width:286px; left:auto; right:max(14px,env(safe-area-inset-right)); top:calc(max(14px,env(safe-area-inset-top)) + 216px); width:var(--quest-card-width); max-height:190px; padding:10px 11px 11px; gap:5px; border-radius:16px; transition:opacity .14s ease,transform .14s ease,border-color .14s ease,box-shadow .14s ease; } .game-screen .quest-widget > #questWidgetTitle { font-size:13.5px; } .game-screen .quest-widget-target { grid-template-columns:30px minmax(0,1fr);padding:5px 7px 5px 5px; } .game-screen .quest-widget-target-icon { width:28px;height:28px;border-radius:8px; } .game-screen .quest-widget-target b { font-size:8.8px; } .game-screen .quest-widget-progress-copy strong { font-size:7.5px; } .game-screen .quest-widget-progress-copy em { font-size:6.5px; } .game-screen:has(.world-minimap.is-channel-open) .quest-widget { opacity:0; transform:translateY(7px); pointer-events:none; } html[data-game-theme="light"] .game-screen .player-chip { border-color:rgba(185,213,224,.95); background:rgba(249,253,255,.96); color:#173f57; box-shadow:0 11px 27px rgba(24,66,88,.14),inset 0 1px #fff; } html[data-game-theme="light"] .game-screen #worldPlayerLevel { color:#496f84; } html[data-game-theme="light"] .game-screen .player-connection, html[data-game-theme="light"] .game-screen .player-chip-progress > small, html[data-game-theme="light"] .game-screen .player-chip-resources small { color:#678697; } html[data-game-theme="light"] .game-screen .player-chip-progress > i, html[data-game-theme="light"] .game-screen .player-chip-resources i { background:#dce9ef; } html[data-game-theme="light"] .game-screen .player-chip-progress > em, html[data-game-theme="light"] .game-screen .player-chip-resources em { color:#486c80; } html[data-game-theme="light"] .game-screen .player-community-role { background:rgba(249,253,255,.94); } } @media (min-width:761px) and (max-width:1180px) { .game-screen .player-chip { width:236px; min-width:236px; min-height:78px; padding:7px 9px 7px 7px; } .game-screen .player-chip-avatar { width:48px;height:48px; } .game-screen #worldPlayerName { font-size:10px; } .game-screen #worldPlayerLevel { font-size:6.7px; } .game-screen .player-chip-progress { grid-template-columns:22px minmax(0,1fr) 40px;gap:4px; } .game-screen .player-chip-resources { gap:5px; } .game-screen .player-chip-resources > span { grid-template-columns:22px minmax(0,1fr) 18px;gap:3px; } .game-screen .player-chip-progress > small, .game-screen .player-chip-resources small, .game-screen .player-chip-progress > em, .game-screen .player-chip-resources em { font-size:5.4px!important; } .game-screen .quest-widget { --quest-card-width:252px; top:calc(max(10px,env(safe-area-inset-top)) + 216px); right:max(10px,env(safe-area-inset-right)); } } @media (min-width:761px) and (max-height:720px) { .game-screen .quest-widget { top:calc(max(8px,env(safe-area-inset-top)) + 210px); max-height:166px; } .game-screen .quest-widget > #questWidgetTitle { font-size:12.5px; } } /* v2.7.52 — desktop social chat rebuild. Mobile chat layout intentionally unchanged. */ @media (min-width:761px) { .game-screen .chat-panel { --chat-accent:#35aee8; min-width:340px; min-height:290px; max-width:min(540px,calc(100vw - 380px)); max-height:min(500px,calc(100vh - 118px)); padding:12px; grid-template-rows:auto auto auto minmax(0,1fr) auto; gap:7px; border:1px solid rgba(119,183,207,.27); border-radius:20px; background:rgba(6,36,48,var(--chat-opacity)); box-shadow:0 18px 44px rgba(0,19,31,.27),inset 0 1px rgba(255,255,255,.07); backdrop-filter:blur(17px) saturate(1.08); overflow:hidden; } .game-screen .chat-head { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; min-height:40px; padding:0 1px 2px; cursor:grab; } .game-screen .chat-head:active { cursor:grabbing; } .game-screen .chat-title-copy { display:grid; align-content:center; gap:2px; min-width:0; } .game-screen .chat-title-copy > b { margin:0; color:#eefaff; font-size:13px; font-weight:850; line-height:1.1; letter-spacing:-.01em; } .game-screen .chat-title-copy > small { display:flex!important; align-items:center; gap:5px; margin:0; color:#8fb1c0!important; font-size:7.5px!important; font-weight:750; letter-spacing:0; text-transform:none; } .game-screen .chat-title-copy > small > i { display:block; width:6px; height:6px; border-radius:50%; background:#50d889; box-shadow:0 0 0 3px rgba(80,216,137,.10); } .game-screen .chat-head-unread { display:grid; place-items:center; min-width:23px; height:23px; padding:0 7px; border-radius:999px; background:#ec5b68; color:#fff; font:850 8px/1 system-ui,sans-serif; box-shadow:0 5px 12px rgba(157,33,50,.25); } .game-screen .chat-head-unread[hidden] { display:none!important; } .game-screen .chat-head-actions { display:flex;gap:5px; } .game-screen .chat-head-actions button { width:31px; height:31px; border:1px solid rgba(148,199,218,.12); border-radius:10px; background:rgba(255,255,255,.055); color:#d7edf5; transition:transform .12s ease,background .12s ease,border-color .12s ease; } .game-screen .chat-head-actions button:hover { border-color:rgba(81,183,231,.35); background:rgba(55,147,190,.18); } .game-screen .chat-head-actions button:active { transform:scale(.93); } .game-screen .chat-head-actions .chat-minimize span { font:900 16px/1 system-ui; } .game-screen .chat-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:0; padding:3px; border:1px solid rgba(138,193,214,.10); border-radius:12px; background:rgba(255,255,255,.035); } .game-screen .chat-tabs button { position:relative; display:flex; align-items:center; justify-content:center; gap:6px; min-height:31px; padding:0 9px; border:0; border-radius:9px; background:transparent; color:#8fabba; font-size:8px; font-weight:800; } .game-screen .chat-tabs button:hover { color:#d8edf5;background:rgba(255,255,255,.045); } .game-screen .chat-tabs button.is-active { border:0; background:rgba(46,151,201,.20); color:#eaf9ff; box-shadow:inset 0 0 0 1px rgba(77,182,232,.22); } .game-screen .chat-tabs button > i { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#e85766; color:#fff; font:850 7px/1 system-ui,sans-serif; } .game-screen .chat-tabs button > i[hidden] { display:none!important; } .game-screen .chat-log-wrap { position:relative; min-height:0; overflow:hidden; border:1px solid rgba(134,190,211,.09); border-radius:13px; background:rgba(0,0,0,.055); } .game-screen .chat-log { height:100%; min-height:0; padding:8px 8px 12px; overflow:hidden auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(115,171,193,.28) transparent; } .game-screen .chat-message { display:grid; grid-template-columns:30px minmax(0,1fr); gap:8px; align-items:start; margin:2px 0; padding:6px; border-radius:11px; transition:background .12s ease; } .game-screen .chat-message:hover { background:rgba(255,255,255,.035); } .game-screen .chat-message-avatar { display:block; width:30px; height:30px; flex:0 0 30px; overflow:hidden; border:1px solid rgba(255,255,255,.20); border-radius:50%; background:#143f56 url('/assets/v1.4/trainers/trainer-male-walk-8dir-6f.png') 0 0/600% 800% no-repeat; color:transparent; box-shadow:0 0 0 2px rgba(61,163,210,.10); } .game-screen .chat-message-avatar[data-skin="female"] { background-image:url('/assets/v1.4/trainers/trainer-female-walk-8dir-6f.png'); } .game-screen .chat-message-avatar.is-system { display:grid; place-items:center; border-color:rgba(85,187,232,.22); background:rgba(46,151,201,.18); color:#72c9f1; font:900 9px/1 system-ui,sans-serif; } .game-screen .chat-message-body { min-width:0; } .game-screen .chat-message-meta { display:flex; align-items:baseline; gap:7px; min-width:0; } .game-screen .chat-message-meta b { overflow:hidden; color:#e4f4fa; font-size:8.5px; font-weight:850; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; } .game-screen .chat-message-meta time { flex:0 0 auto; margin:0; color:#668d9f; font-size:6.5px; font-weight:700; } .game-screen .chat-message p { display:inline-block; max-width:100%; margin:3px 0 0; padding:5px 7px; border-radius:3px 9px 9px 9px; background:rgba(255,255,255,.045); color:#bfd6df; font-size:8.5px; line-height:1.38; overflow-wrap:anywhere; } .game-screen .chat-message.is-self p { background:rgba(31,137,188,.18); color:#dff4fc; box-shadow:inset 0 0 0 1px rgba(66,176,225,.10); } .game-screen .chat-message.is-system { grid-template-columns:24px minmax(0,1fr); margin:5px 0; padding:5px 7px; background:rgba(67,159,200,.07); } .game-screen .chat-message.is-system .chat-message-avatar { width:24px;height:24px; } .game-screen .chat-message.is-system p { padding:0;background:none;color:#8db2c2;font-style:italic; } .game-screen .chat-jump-latest { position:absolute; z-index:3; right:9px; bottom:9px; min-height:27px; padding:0 10px; border:1px solid rgba(92,190,235,.30); border-radius:999px; background:rgba(17,101,143,.93); color:#effaff; box-shadow:0 7px 18px rgba(0,38,59,.25); font-size:7px; font-weight:850; } .game-screen .chat-jump-latest[hidden] { display:none!important; } .game-screen #chatForm { display:grid; grid-template-columns:minmax(0,1fr) 37px; gap:6px; margin:0; padding:5px; border:1px solid rgba(137,192,212,.11); border-radius:13px; background:rgba(255,255,255,.04); } .game-screen #chatForm input { min-width:0; min-height:35px; padding:0 10px; border:0!important; outline:0; background:transparent!important; color:#effaff; font-size:8.5px; } .game-screen #chatForm input::placeholder { color:#6f96a7; } .game-screen #chatForm button { display:grid; place-items:center; width:37px; height:35px; border:0; border-radius:10px; background:linear-gradient(145deg,#28a8e4,#147eb8); color:white; box-shadow:0 7px 15px rgba(11,111,163,.23); } .game-screen #chatForm button:hover { filter:brightness(1.07); } .game-screen #chatForm button:active { transform:scale(.94); } .game-screen .chat-config { margin:0; padding:9px; border-color:rgba(132,190,212,.12); background:rgba(255,255,255,.045); } .game-screen .chat-resize { right:4px; bottom:4px; width:24px; height:24px; opacity:.58; } .game-screen .chat-resize:hover { opacity:1; } /* Minimized chat docks to the same bottom baseline as the five primary HUD buttons. */ .game-screen .chat-panel.is-minimized { left:max(14px,env(safe-area-inset-left))!important; right:auto!important; top:auto!important; bottom:max(14px,env(safe-area-inset-bottom))!important; width:min(350px,calc(100vw - 410px))!important; min-width:250px!important; height:64px!important; min-height:64px!important; max-height:64px!important; padding:8px 10px!important; grid-template-rows:1fr!important; border-radius:17px; transform:none!important; cursor:pointer; } .game-screen .chat-panel.is-minimized .chat-head { min-height:46px; padding:0; cursor:pointer; } .game-screen .chat-panel.is-minimized .chat-title-copy > b { font-size:11px; } .game-screen .chat-panel.is-minimized .chat-title-copy > small { font-size:7px!important; } .game-screen .chat-panel.is-minimized [data-toggle-chat-settings], .game-screen .chat-panel.is-minimized [data-close-chat] { display:none!important; } .game-screen .chat-panel.is-minimized .chat-minimize { width:34px;height:34px; } .game-screen .chat-panel.is-minimized .chat-config, .game-screen .chat-panel.is-minimized .chat-tabs, .game-screen .chat-panel.is-minimized .chat-log-wrap, .game-screen .chat-panel.is-minimized #chatForm, .game-screen .chat-panel.is-minimized .chat-resize { display:none!important; } html[data-game-theme="light"] .game-screen .chat-panel { --chat-accent:#168bc9; border-color:rgba(182,211,224,.94); background:rgba(249,253,255,var(--chat-opacity)); color:#173f57; box-shadow:0 17px 39px rgba(16,59,82,.15),inset 0 1px #fff; } html[data-game-theme="light"] .game-screen .chat-title-copy > b { color:#173f57; } html[data-game-theme="light"] .game-screen .chat-title-copy > small { color:#6f8b9d!important; } html[data-game-theme="light"] .game-screen .chat-head-actions button { border-color:#dce9ef;background:#f0f7fa;color:#527187; } html[data-game-theme="light"] .game-screen .chat-tabs { border-color:#dce9ef;background:#f4f9fb; } html[data-game-theme="light"] .game-screen .chat-tabs button { color:#6b8495; } html[data-game-theme="light"] .game-screen .chat-tabs button:hover { color:#176d9a;background:#eaf5fa; } html[data-game-theme="light"] .game-screen .chat-tabs button.is-active { background:#dff2fb;color:#087bbf;box-shadow:inset 0 0 0 1px #add9ec; } html[data-game-theme="light"] .game-screen .chat-log-wrap { border-color:#e0ebf0;background:#f8fbfd; } html[data-game-theme="light"] .game-screen .chat-message:hover { background:#eff7fa; } html[data-game-theme="light"] .game-screen .chat-message-avatar { border-color:#d7e6ed;box-shadow:0 0 0 2px #edf6fa; } html[data-game-theme="light"] .game-screen .chat-message-meta b { color:#244f66; } html[data-game-theme="light"] .game-screen .chat-message-meta time { color:#91a4af; } html[data-game-theme="light"] .game-screen .chat-message p { background:#eef5f8;color:#4f6f82; } html[data-game-theme="light"] .game-screen .chat-message.is-self p { background:#e0f2fb;color:#25617f;box-shadow:inset 0 0 0 1px #c9e7f5; } html[data-game-theme="light"] .game-screen .chat-message.is-system { background:#f0f8fb; } html[data-game-theme="light"] .game-screen .chat-message.is-system p { color:#668799; } html[data-game-theme="light"] .game-screen #chatForm { border-color:#dce9ef;background:#f6fafc; } html[data-game-theme="light"] .game-screen #chatForm input { color:#173f57; } html[data-game-theme="light"] .game-screen #chatForm input::placeholder { color:#92a7b3; } html[data-game-theme="light"] .game-screen .chat-config { border-color:#dce9ef;background:#f4f9fb; } } @media (min-width:861px) and (max-width:1180px) { .game-screen .chat-panel.is-minimized { left:max(10px,env(safe-area-inset-left))!important; bottom:max(10px,env(safe-area-inset-bottom))!important; width:min(300px,calc(100vw - 330px))!important; height:54px!important; min-height:54px!important; max-height:54px!important; padding:6px 9px!important; } .game-screen .chat-panel.is-minimized .chat-head { min-height:40px; } .game-screen .chat-panel { max-width:min(430px,calc(100vw - 300px));max-height:min(390px,calc(100vh - 100px)); } } @media (min-width:761px) and (max-width:860px) { .game-screen .chat-panel.is-minimized { left:max(8px,env(safe-area-inset-left))!important; bottom:max(8px,env(safe-area-inset-bottom))!important; width:min(260px,calc(100vw - 245px))!important; height:48px!important; min-height:48px!important; max-height:48px!important; padding:5px 8px!important; } .game-screen .chat-panel.is-minimized .chat-head { min-height:36px; } .game-screen .chat-panel.is-minimized .chat-title-copy > small { display:none!important; } .game-screen .chat-panel { max-width:min(380px,calc(100vw - 240px));max-height:min(350px,calc(100vh - 90px)); } } @media (max-width:760px) { /* HTML wrapper added in v2.7.52 must remain transparent to the existing phone layout. */ .game-screen .chat-log-wrap { position:relative;min-height:0;overflow:hidden; } .game-screen .chat-log-wrap .chat-log { height:100%;min-height:0;overflow:hidden auto; } .game-screen .chat-jump-latest { position:absolute; right:8px; bottom:8px; min-height:28px; padding:0 10px; border:0; border-radius:999px; background:rgba(19,117,171,.94); color:#fff; font-size:8px; font-weight:850; } .game-screen .chat-jump-latest[hidden], .game-screen .chat-head-unread[hidden], .game-screen .chat-tabs button > i[hidden] { display:none!important; } } /* v2.7.53 — BookiePark messenger chat. Desktop social center, mobile kept compact. */ @media (min-width:761px) { .game-screen .chat-panel.chat-messenger { --chat-world:#1d9bf0; --chat-trade:#32ad72; --chat-clan:#8a63e8; --chat-players:#ec9a35; min-width:500px; min-height:400px; max-width:min(760px,calc(100vw - 330px)); max-height:min(620px,calc(100vh - 96px)); padding:12px; grid-template-rows:auto auto auto minmax(0,1fr); gap:8px; border-radius:22px; overflow:hidden; } .game-screen .chat-title-icon { display:inline-grid; place-items:center; width:18px; height:18px; margin-right:7px; border-radius:7px; background:color-mix(in srgb,var(--chat-world) 16%,transparent); vertical-align:middle; } .game-screen .chat-title-icon .ui-icon { width:12px;height:12px; } .game-screen .chat-title-copy > b { display:flex;align-items:center;font-size:14px; } .game-screen .chat-head-actions button { width:33px;height:33px;border-radius:11px; } .game-screen .chat-head-actions [data-chat-search-toggle] .ui-icon { width:15px;height:15px; } .game-screen .chat-search-bar { display:grid; grid-template-columns:20px minmax(0,1fr) 28px; align-items:center; gap:7px; min-height:39px; padding:4px 5px 4px 10px; border:1px solid rgba(137,192,212,.14); border-radius:12px; background:rgba(255,255,255,.045); } .game-screen .chat-search-bar[hidden] { display:none!important; } .game-screen .chat-search-bar > span .ui-icon { width:15px;height:15px;opacity:.7; } .game-screen .chat-search-bar input { min-width:0; height:30px; border:0; outline:0; background:transparent; color:#e8f6fb; font:700 9px/1.2 system-ui,sans-serif; } .game-screen .chat-search-bar button { display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:9px;background:transparent;color:#8fb0bf; } .game-screen .chat-search-bar button:hover { background:rgba(255,255,255,.06);color:#fff; } .game-screen .chat-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:3px; } .game-screen .chat-tabs button { position:relative; display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:37px; padding:0 7px; border-radius:9px; font-size:8px; } .game-screen .chat-tabs .chat-tab-icon { display:grid; place-items:center; width:17px; height:17px; color:currentColor; font-size:11px; } .game-screen .chat-tabs .chat-tab-icon .ui-icon { width:14px;height:14px; } .game-screen .chat-tabs button.channel-world.is-active { color:#e8f8ff;background:color-mix(in srgb,var(--chat-world) 30%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--chat-world) 48%,transparent); } .game-screen .chat-tabs button.channel-trade.is-active { color:#eafff3;background:color-mix(in srgb,var(--chat-trade) 28%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--chat-trade) 46%,transparent); } .game-screen .chat-tabs button.channel-clan.is-active { color:#f4edff;background:color-mix(in srgb,var(--chat-clan) 28%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--chat-clan) 46%,transparent); } .game-screen .chat-tabs button.channel-players.is-active { color:#fff5e7;background:color-mix(in srgb,var(--chat-players) 28%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--chat-players) 46%,transparent); } .game-screen .chat-config { position:absolute; z-index:12; top:58px; right:12px; width:min(390px,calc(100% - 24px)); max-height:min(390px,calc(100% - 76px)); overflow:auto; grid-template-columns:1fr 1fr; gap:9px 12px; padding:13px; border-radius:16px; box-shadow:0 16px 38px rgba(0,18,30,.28); } .game-screen .chat-config .chat-channel-visibility { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:0; padding:9px; border:1px solid rgba(137,192,212,.14); border-radius:12px; } .game-screen .chat-config .chat-channel-visibility legend { padding:0 5px;color:#7fa2b2;font-size:7px;font-weight:850; } .game-screen .chat-config .chat-channel-visibility label { display:flex;align-items:center;gap:5px;color:#b6ced8;font-size:8px;font-weight:750; } .game-screen .chat-messenger-layout { display:grid; grid-template-columns:minmax(0,3.15fr) minmax(135px,1fr); min-height:0; overflow:hidden; border:1px solid rgba(137,192,212,.11); border-radius:15px; background:rgba(0,0,0,.045); } .game-screen .chat-conversation { position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; min-width:0; min-height:0; padding:7px; border-right:1px solid rgba(137,192,212,.10); } .game-screen .chat-private-head { display:grid; grid-template-columns:28px 30px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:43px; margin:-1px -1px 6px; padding:5px 6px; border-radius:11px; background:rgba(255,255,255,.045); } .game-screen .chat-private-head[hidden] { display:none!important; } .game-screen .chat-private-head > button:first-child { width:28px;height:28px;border:0;border-radius:9px;background:rgba(255,255,255,.05);color:#bcd4de; } .game-screen .chat-private-head > button:last-child { min-height:27px;padding:0 9px;border:1px solid rgba(117,185,214,.18);border-radius:8px;background:transparent;color:#a8c6d3;font-size:7px;font-weight:850; } .game-screen .chat-private-head > span:nth-of-type(2) { display:grid;gap:1px;min-width:0; } .game-screen .chat-private-head b { overflow:hidden;color:#e6f5fb;font-size:9px;text-overflow:ellipsis;white-space:nowrap; } .game-screen .chat-private-head small { color:#5bd18e;font-size:6.5px;font-weight:750; } .game-screen .chat-private-avatar, .game-screen .chat-player-avatar { position:relative; display:block; width:30px; height:30px; overflow:hidden; border:1px solid rgba(255,255,255,.20); border-radius:50%; background:#143f56 url('/assets/v1.4/trainers/trainer-male-walk-8dir-6f.png') 0 0/600% 800% no-repeat; box-shadow:0 0 0 2px rgba(64,163,207,.10); } .game-screen .chat-private-avatar[data-skin="female"], .game-screen .chat-player-avatar[data-skin="female"] { background-image:url('/assets/v1.4/trainers/trainer-female-walk-8dir-6f.png'); } .game-screen .chat-log-wrap { min-height:0; border:0; border-radius:0; background:transparent; } .game-screen .chat-log { padding:3px 4px 10px; } .game-screen .chat-message { position:relative; grid-template-columns:30px minmax(0,1fr) 24px; gap:8px; margin:1px 0; padding:6px 4px; border-radius:10px; } .game-screen .chat-message:hover { background:rgba(255,255,255,.035); } .game-screen .chat-message-avatar { appearance:none;padding:0;cursor:pointer; } .game-screen .chat-message-body { min-width:0; } .game-screen .chat-message-meta { gap:6px;min-height:15px; } .game-screen .chat-author-button { max-width:160px; overflow:hidden; padding:0; border:0; background:transparent; color:#e5f5fb; font:850 8.5px/1.2 system-ui,sans-serif; text-align:left; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; } .game-screen .chat-author-button:hover { text-decoration:underline; } .game-screen .chat-message-meta > small { color:#698b9b;font-size:6px; } .game-screen .chat-message p { display:block; width:fit-content; max-width:100%; margin:2px 0 0; padding:3px 0; border-radius:0; background:transparent; color:#bfd6df; font-size:8.3px; line-height:1.42; } .game-screen .chat-message.is-self p { background:transparent;color:#d9edf5;box-shadow:none; } .game-screen .chat-message p mark { padding:1px 3px;border-radius:4px;background:rgba(236,157,54,.24);color:#ffd998; } .game-screen .chat-message.is-mentioned { background:rgba(235,149,42,.07);box-shadow:inset 2px 0 #e9a43f; } .game-screen .chat-message-more { align-self:start; opacity:0; display:grid; place-items:center; width:24px; height:22px; padding:0; border:0; border-radius:7px; background:transparent; color:#6d91a0; font-size:8px; transition:opacity .12s,background .12s; } .game-screen .chat-message:hover .chat-message-more { opacity:1; } .game-screen .chat-message-more:hover { background:rgba(255,255,255,.06);color:#d5eaf3; } .game-screen .chat-channel-chip { display:inline-flex; align-items:center; min-height:15px; padding:0 5px; border-radius:999px; font-size:5.7px; font-style:normal; font-weight:850; } .game-screen .chat-channel-chip.is-trade { background:rgba(50,173,114,.13);color:#68dda0; } .game-screen .chat-channel-chip.is-private { background:rgba(228,75,99,.13);color:#ff8397; } .game-screen .chat-message-reply-ref { display:grid; gap:1px; max-width:90%; margin:3px 0 1px; padding:4px 7px; border:0; border-left:2px solid rgba(49,158,211,.65); border-radius:0 7px 7px 0; background:rgba(53,153,198,.07); color:#809ead; text-align:left; } .game-screen .chat-message-reply-ref b { color:#79c9ed;font-size:6.5px; } .game-screen .chat-message-reply-ref span { overflow:hidden;font-size:6.5px;text-overflow:ellipsis;white-space:nowrap; } .game-screen .chat-message-attachment { display:flex; align-items:center; gap:6px; max-width:230px; margin-top:5px; padding:6px 8px; border:1px solid rgba(116,183,210,.15); border-radius:9px; background:rgba(255,255,255,.035); color:#b9d2dd; } .game-screen .chat-message-attachment > span { color:#6dc5ef; } .game-screen .chat-message-attachment b { overflow:hidden;font-size:7px;text-overflow:ellipsis;white-space:nowrap; } .game-screen .chat-message-attachment em { margin-left:auto;font-size:6px;font-style:normal; } .game-screen .chat-trade-actions { display:flex;gap:5px;margin-top:6px; } .game-screen .chat-trade-actions button { min-height:25px;padding:0 8px;border:1px solid rgba(66,184,125,.20);border-radius:8px;background:rgba(50,173,114,.08);color:#7fe0ab;font-size:6.5px;font-weight:850; } .game-screen .chat-message.is-trade-message { margin:4px 0;border:1px solid rgba(50,173,114,.10);background:rgba(50,173,114,.035); } .game-screen .chat-message.is-clan-message.is-leader-message { box-shadow:inset 2px 0 var(--chat-clan);background:rgba(138,99,232,.045); } .game-screen .chat-message.is-system { grid-template-columns:24px minmax(0,1fr);margin:4px 0;padding:5px 6px; } .game-screen .chat-message.is-system .chat-message-body p { color:#83a9b9;font-size:7.6px;font-style:normal; } .game-screen .chat-deleted-copy { color:#698896;font-size:7px;font-style:italic; } .game-screen .chat-message.is-flashed { animation:chat-message-flash .9s ease; } @keyframes chat-message-flash { 0%,100%{background:transparent} 35%{background:rgba(38,165,224,.18)} } .game-screen .chat-reply-preview { display:grid; grid-template-columns:minmax(0,1fr) 28px; gap:7px; align-items:center; margin:3px 0 4px; padding:6px 7px 6px 9px; border-left:2px solid var(--chat-world); border-radius:7px; background:rgba(41,146,195,.07); } .game-screen .chat-reply-preview[hidden] { display:none!important; } .game-screen .chat-reply-preview > span { display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 6px;min-width:0; } .game-screen .chat-reply-preview small { grid-column:1/-1;color:#54b9e8;font-size:5.5px;font-weight:900;text-transform:uppercase; } .game-screen .chat-reply-preview b { color:#b9d4df;font-size:7px; } .game-screen .chat-reply-preview em { overflow:hidden;color:#7899a7;font-size:7px;font-style:normal;text-overflow:ellipsis;white-space:nowrap; } .game-screen .chat-reply-preview button { display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:#7e9ba8; } .game-screen .chat-reply-preview button .ui-icon { width:12px;height:12px; } .game-screen #chatForm { position:relative; grid-template-columns:30px 30px minmax(0,1fr) 38px; align-items:end; gap:4px; min-height:47px; padding:5px; border-radius:12px; } .game-screen #chatForm[hidden] { display:none!important; } .game-screen #chatForm textarea { display:block; width:100%; min-width:0; min-height:36px; max-height:92px; padding:10px 7px 7px; resize:none; border:0; outline:0; background:transparent; color:#ecf8fc; font:700 8.5px/1.35 system-ui,sans-serif; } .game-screen #chatForm textarea::placeholder { color:#6f94a4; } .game-screen .chat-composer-tool { display:grid; place-items:center; width:30px; height:36px; padding:0; border:0; border-radius:9px; background:transparent; color:#86a6b3; font-size:14px; } .game-screen .chat-composer-tool:hover { background:rgba(255,255,255,.055);color:#d7ebf3; } .game-screen .chat-send-button { width:38px!important;height:36px!important; } .game-screen .chat-emoji-panel { position:absolute; z-index:8; left:8px; bottom:58px; display:grid; grid-template-columns:repeat(6,30px); gap:3px; padding:7px; border:1px solid rgba(133,190,212,.16); border-radius:12px; background:rgba(8,42,55,.98); box-shadow:0 14px 30px rgba(0,19,31,.30); } .game-screen .chat-emoji-panel[hidden] { display:none!important; } .game-screen .chat-emoji-panel button { width:30px;height:30px;border:0;border-radius:8px;background:transparent;font-size:15px; } .game-screen .chat-emoji-panel button:hover { background:rgba(255,255,255,.07); } .game-screen .chat-online-sidebar { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; min-width:0; min-height:0; padding:8px 7px 7px; background:rgba(255,255,255,.022); } .game-screen .chat-online-sidebar > header { display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:31px;padding:0 3px 5px; } .game-screen .chat-online-sidebar > header > span { display:flex;align-items:center;gap:5px;min-width:0; } .game-screen .chat-online-sidebar > header b { overflow:hidden;color:#c9e0e8;font-size:7.3px;text-overflow:ellipsis;white-space:nowrap; } .game-screen .chat-online-sidebar > header small { display:grid;place-items:center;min-width:19px;height:18px;padding:0 5px;border-radius:999px;background:rgba(48,176,111,.12);color:#67d99e;font-size:6px;font-weight:850; } .game-screen .chat-online-sidebar > header button { display:grid;place-items:center;width:27px;height:27px;border:0;border-radius:8px;background:transparent;color:#7e9dac; } .game-screen .chat-online-sidebar > header button:hover { background:rgba(255,255,255,.05);color:#d8eaf1; } .game-screen .chat-online-sidebar > header .ui-icon { width:12px;height:12px; } .game-screen .chat-player-search { display:grid;grid-template-columns:15px 1fr;align-items:center;gap:5px;margin:0 0 5px;padding:0 6px;border:1px solid rgba(134,187,207,.12);border-radius:9px;background:rgba(255,255,255,.03); } .game-screen .chat-player-search[hidden] { display:none!important; } .game-screen .chat-player-search .ui-icon { width:11px;height:11px;color:#7899a7; } .game-screen .chat-player-search input { min-width:0;height:29px;border:0;outline:0;background:transparent;color:#d9ebf2;font-size:7px; } .game-screen .chat-online-list { min-height:0;overflow:hidden auto;padding:2px; } .game-screen .chat-online-player { display:grid; grid-template-columns:27px minmax(0,1fr) 8px; align-items:center; gap:6px; width:100%; min-height:39px; padding:4px; border:0; border-radius:9px; background:transparent; color:inherit; text-align:left; } .game-screen .chat-online-player:hover { background:rgba(255,255,255,.045); } .game-screen .chat-online-player .chat-player-avatar { width:27px;height:27px; } .game-screen .chat-online-player > span:nth-child(2) { display:grid;gap:1px;min-width:0; } .game-screen .chat-online-player b { overflow:hidden;color:#bdd3dc;font-size:6.8px;text-overflow:ellipsis;white-space:nowrap; } .game-screen .chat-online-player small { overflow:hidden;color:#698b99;font-size:5.8px;text-overflow:ellipsis;white-space:nowrap; } .game-screen .chat-online-player > em { color:#45cf83;font-size:8px;font-style:normal; } .game-screen .chat-online-player.is-friend b { color:#f0ce69; } .game-screen .chat-online-player.is-party b { color:#c2a8ff; } .game-screen .chat-online-player.is-self { opacity:.65; } .game-screen .chat-online-empty { padding:15px 5px;color:#6e8f9e;font-size:7px;text-align:center; } .game-screen .chat-invite-group { display:flex; align-items:center; justify-content:center; gap:6px; min-height:32px; margin-top:5px; border:1px solid rgba(119,188,216,.14); border-radius:9px; background:rgba(45,145,190,.06); color:#8fc8e1; font-size:6.5px; font-weight:850; } .game-screen .chat-invite-group .ui-icon { width:12px;height:12px; } .game-screen .chat-directory-section { display:grid;gap:6px;margin:5px 2px 12px; } .game-screen .chat-directory-section > header { display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 4px; } .game-screen .chat-directory-section > header b { color:#c4dbe4;font-size:7px;text-transform:uppercase;letter-spacing:.04em; } .game-screen .chat-directory-section > header small { color:#6c8d9b;font-size:6px; } .game-screen .chat-recent-dialogs { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px; } .game-screen .chat-recent-dialogs > button { display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:6px;min-height:44px;padding:5px;border:1px solid rgba(129,187,208,.10);border-radius:9px;background:rgba(255,255,255,.025);color:inherit;text-align:left; } .game-screen .chat-recent-dialogs .chat-player-avatar { width:28px;height:28px; } .game-screen .chat-recent-dialogs > button > span:nth-child(2) { display:grid;gap:1px;min-width:0; } .game-screen .chat-recent-dialogs b { overflow:hidden;color:#c8dee7;font-size:7px;text-overflow:ellipsis;white-space:nowrap; } .game-screen .chat-recent-dialogs small { overflow:hidden;color:#6d8d9a;font-size:6px;text-overflow:ellipsis;white-space:nowrap; } .game-screen .chat-recent-dialogs em { display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#e85067;color:#fff;font-size:5.5px;font-style:normal;font-weight:900; } .game-screen .chat-directory-list { display:grid;gap:4px; } .game-screen .chat-directory-player { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding:5px;border-radius:9px;background:rgba(255,255,255,.025); } .game-screen .chat-directory-main { display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:7px;min-width:0;padding:0;border:0;background:transparent;color:inherit;text-align:left; } .game-screen .chat-directory-main > span:nth-child(2) { display:grid;gap:2px;min-width:0; } .game-screen .chat-directory-main b { color:#cee3eb;font-size:7.5px; } .game-screen .chat-directory-main small { color:#698d9d;font-size:6px; } .game-screen .chat-directory-player > div { display:flex;gap:4px; } .game-screen .chat-directory-player > div button { min-height:27px;padding:0 7px;border:1px solid rgba(127,187,212,.14);border-radius:8px;background:transparent;color:#8eb8ca;font-size:6px;font-weight:800; } .game-screen .chat-directory-empty { color:#6c8d9b;font-size:7px;text-align:center; } .game-screen .chat-empty-state { display:grid;place-items:center;align-content:center;gap:8px;min-height:100%;padding:20px;color:#6f919f;text-align:center; } .game-screen .chat-empty-state > span { font-size:24px;opacity:.65; } .game-screen .chat-empty-state > span .chat-empty-raster { display:block;width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(15,61,83,.2)); } .game-screen .chat-empty-state > b { max-width:250px;font-size:7.5px;line-height:1.45; } .game-screen .chat-popover { position:absolute; z-index:30; width:200px; padding:7px; border:1px solid rgba(126,187,211,.18); border-radius:13px; background:rgba(7,39,52,.985); box-shadow:0 18px 38px rgba(0,15,25,.35); } .game-screen .chat-popover[hidden] { display:none!important; } .game-screen .chat-player-popover-head { display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:7px;padding:5px 5px 8px;border-bottom:1px solid rgba(128,188,212,.10); } .game-screen .chat-player-popover-head .chat-player-avatar { width:34px;height:34px; } .game-screen .chat-player-popover-head > span:last-child { display:grid;gap:2px;min-width:0; } .game-screen .chat-player-popover-head b { overflow:hidden;color:#d7eaf2;font-size:8px;text-overflow:ellipsis;white-space:nowrap; } .game-screen .chat-player-popover-head small { color:#66bf91;font-size:6px; } .game-screen .chat-popover-actions { display:grid;gap:2px;padding-top:4px; } .game-screen .chat-popover-actions button { min-height:29px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:#a8c3ce;font-size:6.7px;font-weight:750;text-align:left; } .game-screen .chat-popover-actions button:hover { background:rgba(255,255,255,.055);color:#e6f3f8; } .game-screen .chat-popover-actions button:disabled { opacity:.35; } .game-screen .chat-popover-actions button.is-danger { color:#f07b88; } .game-screen .chat-panel.is-minimized .chat-search-bar, .game-screen .chat-panel.is-minimized .chat-messenger-layout, .game-screen .chat-panel.is-minimized .chat-emoji-panel, .game-screen .chat-panel.is-minimized .chat-popover { display:none!important; } html[data-game-theme="light"] .game-screen .chat-search-bar { border-color:#d9e7ed;background:#f7fbfd; } html[data-game-theme="light"] .game-screen .chat-search-bar input { color:#173f57; } html[data-game-theme="light"] .game-screen .chat-messenger-layout { border-color:#dce9ef;background:#fbfdfe; } html[data-game-theme="light"] .game-screen .chat-conversation { border-color:#e3edf1; } html[data-game-theme="light"] .game-screen .chat-private-head { background:#f2f8fb; } html[data-game-theme="light"] .game-screen .chat-private-head b { color:#204a61; } html[data-game-theme="light"] .game-screen .chat-private-head > button:first-child, html[data-game-theme="light"] .game-screen .chat-private-head > button:last-child { border-color:#d6e6ed;background:#fff;color:#587589; } html[data-game-theme="light"] .game-screen .chat-message:hover { background:#f2f8fa; } html[data-game-theme="light"] .game-screen .chat-author-button { color:#244f66; } html[data-game-theme="light"] .game-screen .chat-message p, html[data-game-theme="light"] .game-screen .chat-message.is-self p { color:#527184; } html[data-game-theme="light"] .game-screen .chat-message.is-self { background:#f7fbfd; } html[data-game-theme="light"] .game-screen .chat-message-reply-ref { background:#edf7fb;color:#688b9b; } html[data-game-theme="light"] .game-screen .chat-message.is-trade-message { border-color:#d8eee2;background:#f5fbf7; } html[data-game-theme="light"] .game-screen .chat-message.is-clan-message.is-leader-message { background:#faf7ff; } html[data-game-theme="light"] .game-screen #chatForm { border-color:#dbe8ee;background:#f7fafc; } html[data-game-theme="light"] .game-screen #chatForm textarea { color:#183f56; } html[data-game-theme="light"] .game-screen #chatForm textarea::placeholder { color:#91a6b1; } html[data-game-theme="light"] .game-screen .chat-composer-tool { color:#718d9b; } html[data-game-theme="light"] .game-screen .chat-composer-tool:hover { background:#edf5f8;color:#285e7a; } html[data-game-theme="light"] .game-screen .chat-emoji-panel { border-color:#d4e5ec;background:#fff;box-shadow:0 14px 30px rgba(22,62,83,.18); } html[data-game-theme="light"] .game-screen .chat-emoji-panel button:hover { background:#eef6f9; } html[data-game-theme="light"] .game-screen .chat-online-sidebar { background:#f5f9fb; } html[data-game-theme="light"] .game-screen .chat-online-sidebar > header b { color:#365f75; } html[data-game-theme="light"] .game-screen .chat-online-player:hover { background:#eaf3f7; } html[data-game-theme="light"] .game-screen .chat-online-player b { color:#42667a; } html[data-game-theme="light"] .game-screen .chat-online-player small { color:#849ba8; } html[data-game-theme="light"] .game-screen .chat-player-search { border-color:#d9e7ed;background:#fff; } html[data-game-theme="light"] .game-screen .chat-player-search input { color:#20465b; } html[data-game-theme="light"] .game-screen .chat-invite-group { border-color:#d5e7ef;background:#fff;color:#397b9d; } html[data-game-theme="light"] .game-screen .chat-directory-section > header b, html[data-game-theme="light"] .game-screen .chat-directory-main b, html[data-game-theme="light"] .game-screen .chat-recent-dialogs b { color:#365f75; } html[data-game-theme="light"] .game-screen .chat-directory-player, html[data-game-theme="light"] .game-screen .chat-recent-dialogs > button { border-color:#e0ebef;background:#f8fbfc; } html[data-game-theme="light"] .game-screen .chat-popover { border-color:#d6e5eb;background:#fff;box-shadow:0 18px 38px rgba(18,55,75,.20); } html[data-game-theme="light"] .game-screen .chat-player-popover-head { border-color:#e4edf1; } html[data-game-theme="light"] .game-screen .chat-player-popover-head b { color:#284f65; } html[data-game-theme="light"] .game-screen .chat-popover-actions button { color:#547487; } html[data-game-theme="light"] .game-screen .chat-popover-actions button:hover { background:#eef6f9;color:#1e526e; } } @media (min-width:761px) and (max-width:1050px) { .game-screen .chat-panel.chat-messenger { min-width:470px;max-width:min(610px,calc(100vw - 270px)); } .game-screen .chat-messenger-layout { grid-template-columns:minmax(0,3.4fr) minmax(118px,1fr); } .game-screen .chat-tabs button { gap:4px;padding:0 5px; } .game-screen .chat-online-player { grid-template-columns:25px minmax(0,1fr) 7px;gap:5px; } .game-screen .chat-online-player .chat-player-avatar { width:25px;height:25px; } } @media (max-width:760px) { .game-screen .chat-messenger-layout { display:grid;grid-template-columns:1fr;min-height:0;overflow:hidden; } .game-screen .chat-conversation { display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;min-height:0; } .game-screen .chat-online-sidebar { display:none; } .game-screen .chat-search-bar { display:grid;grid-template-columns:20px 1fr 28px;align-items:center;gap:5px;margin-bottom:5px;padding:4px 6px;border:1px solid var(--theme-border,#d7e5eb);border-radius:10px;background:var(--theme-card,#fff); } .game-screen .chat-search-bar[hidden] { display:none!important; } .game-screen .chat-search-bar input { min-width:0;height:28px;border:0;outline:0;background:transparent;color:var(--theme-text,#173f57);font-size:8px; } .game-screen .chat-search-bar button { display:grid;place-items:center;width:28px;height:28px;border:0;background:transparent;color:var(--theme-muted,#6f8798); } .game-screen .chat-tabs { grid-template-columns:repeat(4,1fr); } .game-screen .chat-tabs button { min-width:0;padding:0 3px; } .game-screen .chat-tabs .chat-tab-icon { display:none; } .game-screen .chat-private-head { display:grid;grid-template-columns:28px 28px minmax(0,1fr);align-items:center;gap:6px;padding:5px; } .game-screen .chat-private-head[hidden] { display:none!important; } .game-screen .chat-private-head > button:last-child { display:none; } .game-screen .chat-private-avatar { width:28px;height:28px;border-radius:50%;background:#e9f3f7 url('/assets/v1.4/trainers/trainer-male-walk-8dir-6f.png') 0 0/600% 800% no-repeat; } .game-screen .chat-private-avatar[data-skin="female"] { background-image:url('/assets/v1.4/trainers/trainer-female-walk-8dir-6f.png'); } .game-screen #chatForm { display:grid;grid-template-columns:30px minmax(0,1fr) 36px;gap:4px;align-items:end; } .game-screen #chatForm [data-chat-attachment] { display:none; } .game-screen #chatForm textarea { min-width:0;min-height:36px;max-height:74px;padding:9px 5px;resize:none;border:0;outline:0;background:transparent;color:var(--theme-text,#173f57);font-size:9px; } .game-screen .chat-composer-tool { width:30px;height:36px;border:0;background:transparent; } .game-screen .chat-emoji-panel { position:absolute;left:8px;bottom:55px;display:grid;grid-template-columns:repeat(6,28px);gap:3px;padding:6px;border:1px solid var(--theme-border,#d8e5eb);border-radius:11px;background:var(--theme-panel,#fff); } .game-screen .chat-emoji-panel[hidden] { display:none!important; } .game-screen .chat-emoji-panel button { width:28px;height:28px;border:0;background:transparent; } .game-screen .chat-message-more { display:none; } .game-screen .chat-popover { display:none!important; } } /* v2.7.54 — server-wide Telegram-like messenger polish */ @media (min-width:761px) { .game-screen .chat-panel.chat-messenger { --chat-world:#2297e6; --chat-trade:#24a86a; --chat-clan:#7b61df; --chat-players:#e4932f; min-width:600px; min-height:430px; max-width:min(820px,calc(100vw - 300px)); max-height:min(650px,calc(100vh - 86px)); padding:0; grid-template-rows:auto auto minmax(0,1fr); gap:0; overflow:hidden; border:1px solid rgba(126,178,198,.24); border-radius:20px; box-shadow:0 22px 58px rgba(4,28,42,.25),0 2px 7px rgba(4,28,42,.12); } .game-screen .chat-head { min-height:60px; padding:10px 12px 8px 14px; border-bottom:1px solid rgba(126,178,198,.11); } .game-screen .chat-title-copy { display:grid;gap:3px;min-width:0; } .game-screen .chat-title-copy > b { font-size:15px;font-weight:850;letter-spacing:-.01em; } .game-screen .chat-title-copy > small { display:flex;align-items:center;gap:6px!important;font-size:7px!important;letter-spacing:0!important; } .game-screen .chat-title-copy > small > i { width:7px;height:7px;border-radius:50%;background:#3ecb7e;box-shadow:0 0 0 3px rgba(62,203,126,.10); } .game-screen .chat-head-actions { gap:4px; } .game-screen .chat-head-actions button { width:34px;height:34px;border-radius:50%;border:0;background:transparent;transition:background .14s,transform .12s; } .game-screen .chat-head-actions button:hover { background:rgba(89,151,177,.10); } .game-screen .chat-head-actions button:active { transform:scale(.94); } .game-screen .chat-title-icon { width:23px;height:23px;margin-right:8px;border-radius:8px; } .game-screen .chat-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; margin:0; padding:5px 10px 7px; border:0; border-bottom:1px solid rgba(126,178,198,.10); border-radius:0; background:transparent; } .game-screen .chat-tabs button { min-height:38px; padding:0 10px; border-radius:11px; background:transparent; font-size:8px; font-weight:850; transition:background .14s,color .14s,box-shadow .14s; } .game-screen .chat-tabs button:hover { background:rgba(83,147,173,.07); } .game-screen .chat-tabs .chat-tab-icon { width:19px;height:19px;font-size:12px; } .game-screen .chat-tabs button.channel-world.is-active { color:#1689ce;background:rgba(34,151,230,.10);box-shadow:none; } .game-screen .chat-tabs button.channel-trade.is-active { color:#218d5d;background:rgba(36,168,106,.10);box-shadow:none; } .game-screen .chat-tabs button.channel-clan.is-active { color:#7156ce;background:rgba(123,97,223,.10);box-shadow:none; } .game-screen .chat-tabs button.channel-players.is-active { color:#c87818;background:rgba(228,147,47,.10);box-shadow:none; } .game-screen .chat-search-bar { position:absolute; z-index:18; top:56px; left:12px; right:12px; min-height:42px; border:1px solid rgba(118,174,196,.20); border-radius:13px; background:rgba(13,45,58,.98); box-shadow:0 13px 28px rgba(0,22,33,.22); } .game-screen .chat-messenger-layout { display:grid; grid-template-columns:minmax(0,1fr) 184px; min-height:0; height:100%; border:0; border-radius:0; background:transparent; } .game-screen .chat-conversation { min-height:0; padding:0; grid-template-rows:auto minmax(0,1fr) auto auto; border-right:1px solid rgba(126,178,198,.10); } .game-screen .chat-log-wrap { min-height:0;overflow:hidden; } .game-screen .chat-log { height:100%;padding:8px 10px 12px;scrollbar-width:thin;scrollbar-color:rgba(103,151,171,.25) transparent; } .game-screen .chat-message { grid-template-columns:32px minmax(0,1fr) 24px; gap:8px; margin:0; padding:6px 7px; border-radius:11px; } .game-screen .chat-message:hover { background:rgba(80,143,168,.055); } .game-screen .chat-message-avatar { width:32px;height:32px;border:0;box-shadow:none; } .game-screen .chat-message-meta { gap:5px;min-height:15px; } .game-screen .chat-author-button { max-width:180px;font-size:8px;font-weight:900; } .game-screen .chat-message-meta time { font-size:6.3px;opacity:.72; } .game-screen .chat-message p { width:auto; max-width:100%; margin:2px 0 0; padding:0; color:#b9d0da; font-size:8px; line-height:1.5; } .game-screen .chat-message.is-self { background:rgba(34,151,230,.035); } .game-screen .chat-message.is-system { margin:3px 1px;padding:7px 8px;background:rgba(45,139,180,.065);border-radius:10px; } .game-screen .chat-message.is-system p { color:#7fa3b2; } .game-screen .chat-message.is-trade-message { margin:4px 2px;padding:8px;border:1px solid rgba(36,168,106,.15);background:rgba(36,168,106,.045); } .game-screen .chat-message.is-clan-message.is-leader-message { border-left:2px solid rgba(123,97,223,.65); } .game-screen .chat-channel-chip { min-height:14px;padding:0 5px;font-size:5.4px; } .game-screen .chat-channel-chip.is-world { background:rgba(34,151,230,.10);color:#68bde9; } .game-screen .chat-message-more { top:5px; } .game-screen .chat-private-head { min-height:48px; margin:0; padding:6px 9px; border-radius:0; border-bottom:1px solid rgba(126,178,198,.10); background:rgba(83,143,168,.035); } .game-screen .chat-private-head b { font-size:8.5px; } .game-screen #chatForm { grid-template-columns:34px 34px minmax(0,1fr) 42px; gap:3px; min-height:54px; margin:0 8px 8px; padding:5px; border:1px solid rgba(126,178,198,.15); border-radius:16px; background:rgba(255,255,255,.035); box-shadow:none; } .game-screen #chatForm textarea { min-height:40px;max-height:96px;padding:11px 7px 7px;font-size:8.4px; } .game-screen .chat-composer-tool { width:34px;height:40px;border-radius:12px;font-size:17px; } .game-screen .chat-send-button { width:40px!important;height:40px!important;border-radius:13px!important;background:linear-gradient(180deg,#28a5ec,#1486d0)!important;box-shadow:0 7px 14px rgba(24,137,204,.20); } .game-screen .chat-send-button .ui-icon { width:17px;height:17px; } .game-screen .chat-reply-preview { margin:0 8px 5px;padding:6px 8px; } .game-screen .chat-emoji-panel { position:absolute; z-index:24; left:8px; bottom:68px; display:grid; grid-template-rows:auto auto minmax(0,1fr); width:328px; height:286px; padding:0; overflow:hidden; border:1px solid rgba(126,178,198,.19); border-radius:16px; background:rgba(8,38,50,.985); box-shadow:0 18px 44px rgba(0,18,28,.34); } .game-screen .chat-emoji-panel[hidden] { display:none!important; } .game-screen .chat-emoji-panel > header { display:flex;align-items:center;justify-content:space-between;min-height:38px;padding:0 11px;border-bottom:1px solid rgba(126,178,198,.10); } .game-screen .chat-emoji-panel > header b { color:#d9eaf1;font-size:8px; } .game-screen .chat-emoji-panel > header small { color:#688c9b;font-size:6px;font-weight:800;text-transform:uppercase;letter-spacing:.08em; } .game-screen .chat-emoji-categories { display:flex;gap:2px;padding:5px 6px;border-bottom:1px solid rgba(126,178,198,.08);overflow-x:auto;scrollbar-width:none; } .game-screen .chat-emoji-categories::-webkit-scrollbar { display:none; } .game-screen .chat-emoji-categories button { flex:0 0 34px;width:34px;height:32px;border:0;border-radius:9px;background:transparent;font-size:15px; } .game-screen .chat-emoji-categories button:hover { background:rgba(255,255,255,.055); } .game-screen .chat-emoji-categories button.is-active { background:rgba(34,151,230,.14);box-shadow:inset 0 0 0 1px rgba(34,151,230,.22); } .game-screen .chat-emoji-grid { display:grid;grid-template-columns:repeat(8,1fr);align-content:start;gap:2px;padding:7px;overflow-y:auto; } .game-screen .chat-emoji-grid button { width:auto;height:34px;border:0;border-radius:9px;background:transparent;font-size:18px;line-height:1; } .game-screen .chat-emoji-grid button:hover { background:rgba(255,255,255,.07);transform:scale(1.06); } .game-screen .chat-online-sidebar { grid-template-rows:auto auto minmax(0,1fr); padding:8px 7px 9px; background:rgba(67,128,152,.025); } .game-screen .chat-online-sidebar > header { min-height:39px;padding:1px 4px 7px; } .game-screen .chat-online-sidebar > header > span { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px; } .game-screen .chat-online-sidebar > header b { font-size:7px;font-weight:900; } .game-screen .chat-online-sidebar > header small { display:flex;align-items:center;gap:4px;min-width:0;height:auto;padding:0;background:transparent;color:#5bbf89; } .game-screen .chat-online-sidebar > header small i { width:6px;height:6px;border-radius:50%;background:#43cc7c; } .game-screen .chat-online-sidebar > header small strong { font-size:6px; } .game-screen .chat-player-search { margin-bottom:6px;border-radius:10px; } .game-screen .chat-online-list { padding:1px; } .game-screen .chat-online-player { grid-template-columns:30px minmax(0,1fr) 8px;gap:7px;min-height:45px;padding:5px 4px;border-radius:11px; } .game-screen .chat-online-player:hover { background:rgba(86,149,175,.07); } .game-screen .chat-online-player .chat-player-avatar { width:30px;height:30px; } .game-screen .chat-online-copy { display:grid;gap:2px;min-width:0; } .game-screen .chat-online-player b { display:flex;align-items:center;gap:3px;font-size:6.8px; } .game-screen .chat-online-player small { font-size:5.5px; } .game-screen .chat-friend-dot { color:#e9b941;font-size:7px;font-style:normal; } .game-screen .chat-friend-dot .chat-friend-raster { display:block;width:11px;height:11px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(30,66,83,.24)); } .game-screen .chat-author-button .chat-leader-raster { display:inline-grid;place-items:center;width:13px;height:13px;margin-right:3px;vertical-align:-2px; } .game-screen .chat-author-button .chat-leader-raster img { width:13px;height:13px;object-fit:contain; } .game-screen .chat-online-player.is-self { opacity:.82; } .game-screen .chat-popover { width:216px;border-radius:15px;padding:7px; } .game-screen .chat-popover-actions button { min-height:32px;border-radius:9px;font-size:6.7px; } .game-screen .chat-popover-actions button:disabled { opacity:.42;cursor:not-allowed; } .game-screen .chat-resize { width:18px;height:18px;right:4px;bottom:4px;opacity:.42; } html[data-game-theme="light"] .game-screen .chat-panel.chat-messenger { border-color:#d8e6ec; background:rgba(249,252,253,var(--chat-opacity)); box-shadow:0 20px 52px rgba(23,60,80,.18),0 2px 7px rgba(23,60,80,.08); } html[data-game-theme="light"] .game-screen .chat-head, html[data-game-theme="light"] .game-screen .chat-tabs, html[data-game-theme="light"] .game-screen .chat-conversation, html[data-game-theme="light"] .game-screen .chat-private-head { border-color:#e0ebf0; } html[data-game-theme="light"] .game-screen .chat-head-actions button:hover { background:#edf5f8; } html[data-game-theme="light"] .game-screen .chat-tabs button:hover { background:#eff6f8; } html[data-game-theme="light"] .game-screen .chat-messenger-layout { background:#fbfdfe; } html[data-game-theme="light"] .game-screen .chat-online-sidebar { background:#f7fafb; } html[data-game-theme="light"] .game-screen .chat-message:hover { background:#f0f6f8; } html[data-game-theme="light"] .game-screen .chat-message.is-self { background:#f5fbfe; } html[data-game-theme="light"] .game-screen .chat-message.is-system { background:#f1f7f9; } html[data-game-theme="light"] .game-screen .chat-message.is-trade-message { border-color:#d8eee2;background:#f7fbf8; } html[data-game-theme="light"] .game-screen .chat-message p { color:#46697c; } html[data-game-theme="light"] .game-screen .chat-author-button { color:#244e65; } html[data-game-theme="light"] .game-screen #chatForm { border-color:#dbe8ed;background:#f8fbfc; } html[data-game-theme="light"] .game-screen #chatForm textarea { color:#193f55; } html[data-game-theme="light"] .game-screen .chat-emoji-panel { border-color:#d4e4ea;background:#fff;box-shadow:0 18px 42px rgba(28,65,84,.20); } html[data-game-theme="light"] .game-screen .chat-emoji-panel > header, html[data-game-theme="light"] .game-screen .chat-emoji-categories { border-color:#e4edf1; } html[data-game-theme="light"] .game-screen .chat-emoji-panel > header b { color:#31586d; } html[data-game-theme="light"] .game-screen .chat-emoji-grid button:hover, html[data-game-theme="light"] .game-screen .chat-emoji-categories button:hover { background:#eef5f7; } html[data-game-theme="light"] .game-screen .chat-online-player:hover { background:#edf5f8; } html[data-game-theme="light"] .game-screen .chat-online-player b { color:#3f6579; } html[data-game-theme="light"] .game-screen .chat-online-player small { color:#8199a5; } html[data-game-theme="light"] .game-screen .chat-search-bar { background:#fff;border-color:#d8e6ec; } } @media (min-width:761px) and (max-width:1080px) { .game-screen .chat-panel.chat-messenger { min-width:560px;max-width:min(690px,calc(100vw - 245px)); } .game-screen .chat-messenger-layout { grid-template-columns:minmax(0,1fr) 160px; } .game-screen .chat-online-player { grid-template-columns:27px minmax(0,1fr) 7px;gap:5px; } .game-screen .chat-online-player .chat-player-avatar { width:27px;height:27px; } } @media (max-width:760px) { .game-screen .chat-emoji-panel { position:absolute; left:7px; right:7px; bottom:55px; width:auto; height:min(285px,46vh); display:grid; grid-template-rows:auto auto minmax(0,1fr); padding:0; overflow:hidden; border:1px solid var(--theme-border,#d8e5eb); border-radius:15px; background:var(--theme-panel,#fff); box-shadow:0 14px 30px rgba(19,54,74,.20); } .game-screen .chat-emoji-panel[hidden] { display:none!important; } .game-screen .chat-emoji-panel > header { display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:0 10px;border-bottom:1px solid var(--theme-border,#d8e5eb); } .game-screen .chat-emoji-panel > header b { font-size:9px;color:var(--theme-text,#173f57); } .game-screen .chat-emoji-panel > header small { font-size:7px;color:var(--theme-muted,#78909e); } .game-screen .chat-emoji-categories { display:flex;gap:3px;padding:5px;overflow-x:auto;border-bottom:1px solid var(--theme-border,#d8e5eb); } .game-screen .chat-emoji-categories button { flex:0 0 34px;width:34px;height:32px;border:0;border-radius:9px;background:transparent;font-size:15px; } .game-screen .chat-emoji-categories button.is-active { background:color-mix(in srgb,var(--theme-accent,#168bc9) 12%,transparent); } .game-screen .chat-emoji-grid { display:grid;grid-template-columns:repeat(7,1fr);align-content:start;gap:2px;padding:6px;overflow-y:auto; } .game-screen .chat-emoji-grid button { width:auto;height:34px;border:0;border-radius:8px;background:transparent;font-size:18px; } } /* v2.7.55 — persistent docked messenger, readable typography and working resize */ @media (min-width:761px) { .game-screen .chat-panel.chat-messenger { --chat-ui-blue:#2297e6; min-width:540px; min-height:390px; max-width:min(960px,calc(100vw - 28px)); max-height:min(720px,calc(100vh - 78px)); padding:0; border-radius:22px; overflow:hidden; } .game-screen .chat-head { min-height:62px; padding:10px 12px 9px 14px; } .game-screen .chat-title-copy { gap:3px; } .game-screen .chat-title-copy > b { gap:8px; font-size:16px; line-height:1.15; letter-spacing:-.015em; } .game-screen .chat-title-copy > small { font-size:9px!important; line-height:1.2; } .game-screen .chat-title-icon { width:20px;height:20px; } .game-screen .chat-head-actions { gap:5px; } .game-screen .chat-head-actions button { width:40px; height:40px; border-radius:13px; } .game-screen .chat-head-actions .ui-icon { width:17px;height:17px; } .game-screen .chat-tabs { min-height:52px; padding:5px 8px; gap:4px; } .game-screen .chat-tabs button { min-height:40px; border-radius:12px; font-size:11px; font-weight:800; } .game-screen .chat-tabs .chat-tab-icon { width:20px;height:20px;font-size:14px; } .game-screen .chat-tabs button > i[data-chat-unread] { min-width:18px; height:18px; padding:0 5px; font-size:8px; } .game-screen .chat-messenger-layout { grid-template-columns:minmax(0,3fr) minmax(170px,1fr); min-height:0; } .game-screen .chat-log { padding:10px 11px 13px; } .game-screen .chat-message { grid-template-columns:36px minmax(0,1fr) 25px; gap:9px; padding:7px 8px; border-radius:12px; } .game-screen .chat-message-avatar { width:36px;height:36px; } .game-screen .chat-message-meta { min-height:17px;gap:6px; } .game-screen .chat-author-button { max-width:220px; font-size:11px; line-height:1.2; font-weight:850; } .game-screen .chat-message-meta time { font-size:8.5px; } .game-screen .chat-message p { margin-top:3px; font-size:11.5px; line-height:1.44; } .game-screen .chat-channel-chip { min-height:18px;padding:0 6px;font-size:7px; } .game-screen .chat-message-more { width:25px;height:25px; } .game-screen .chat-private-head { min-height:52px;padding:6px 10px; } .game-screen .chat-private-head b { font-size:11px; } .game-screen .chat-private-head small { font-size:8.5px; } .game-screen #chatForm { grid-template-columns:40px 40px minmax(0,1fr) 48px; gap:5px; min-height:62px; margin:0 9px 9px; padding:6px; border-radius:17px; } .game-screen #chatForm textarea { min-height:44px; max-height:112px; padding:12px 8px 8px; font-size:12px; line-height:1.35; } .game-screen .chat-composer-tool { width:40px; height:44px; border-radius:12px; font-size:19px; } .game-screen .chat-send-button { width:44px!important; height:44px!important; border-radius:13px!important; } .game-screen .chat-send-button .ui-icon { width:19px;height:19px; } .game-screen .chat-online-sidebar { padding:9px 8px 10px; } .game-screen .chat-online-sidebar > header { min-height:44px;padding:2px 4px 8px; } .game-screen .chat-online-sidebar > header b { font-size:9.5px; } .game-screen .chat-online-sidebar > header small strong { font-size:8px; } .game-screen .chat-online-player { grid-template-columns:34px minmax(0,1fr) 8px; gap:8px; min-height:50px; padding:6px 5px; border-radius:12px; } .game-screen .chat-online-player .chat-player-avatar { width:34px;height:34px; } .game-screen .chat-online-player b { font-size:9.5px; } .game-screen .chat-online-player small { font-size:7.5px;line-height:1.3; } /* Emoji picker is a compact popover, not a second full chat window. */ .game-screen .chat-emoji-panel { left:10px!important; right:auto!important; bottom:78px!important; width:min(372px,calc(100% - 205px))!important; min-width:300px; height:min(304px,calc(100% - 142px))!important; min-height:236px; grid-template-rows:42px 46px minmax(0,1fr)!important; border-radius:16px!important; overflow:hidden!important; } .game-screen .chat-emoji-panel > header { min-height:42px!important; padding:0 12px!important; } .game-screen .chat-emoji-panel > header b { font-size:11px!important; } .game-screen .chat-emoji-panel > header small { font-size:8px!important; } .game-screen .chat-emoji-categories { display:grid!important; grid-template-columns:repeat(8,minmax(0,1fr))!important; gap:3px!important; padding:5px 7px!important; overflow:hidden!important; } .game-screen .chat-emoji-categories button { width:100%!important; height:35px!important; min-width:0!important; border-radius:10px!important; font-size:18px!important; } .game-screen .chat-emoji-categories button span { display:grid;place-items:center; } .game-screen .chat-emoji-grid { display:grid!important; grid-template-columns:repeat(8,minmax(0,1fr))!important; align-content:start!important; gap:3px!important; padding:8px!important; overflow-y:auto!important; overscroll-behavior:contain; scrollbar-width:thin; } .game-screen .chat-emoji-grid button { width:100%!important; height:36px!important; min-width:0!important; padding:0!important; border-radius:9px!important; font-size:22px!important; line-height:1!important; } /* The lower-right corner is now a real resize affordance. */ .game-screen .chat-resize { display:block!important; position:absolute!important; right:3px!important; bottom:3px!important; z-index:40!important; width:30px!important; height:30px!important; padding:0!important; border:0!important; border-radius:0 0 18px 0!important; background:transparent!important; cursor:nwse-resize!important; touch-action:none!important; opacity:.72!important; } .game-screen .chat-resize::before, .game-screen .chat-resize::after { content:''; position:absolute; right:6px; bottom:6px; width:13px; height:2px; border-radius:999px; background:currentColor; transform:rotate(-45deg); transform-origin:right center; } .game-screen .chat-resize::after { right:5px;bottom:10px;width:8px;opacity:.55; } .game-screen .chat-panel.is-adjusting { user-select:none;transition:none!important; } .game-screen .chat-panel.is-adjusting * { cursor:nwse-resize; } /* Persistent collapsed dock: it is never removed from the desktop HUD. */ .game-screen .chat-panel.is-minimized { display:grid!important; left:max(14px,env(safe-area-inset-left))!important; top:auto!important; bottom:max(14px,env(safe-area-inset-bottom))!important; width:min(360px,calc(100vw - 430px))!important; min-width:250px!important; height:64px!important; min-height:64px!important; max-height:64px!important; padding:8px 10px!important; border-radius:17px!important; } .game-screen .chat-panel.is-minimized .chat-head { min-height:46px!important; } .game-screen .chat-panel.is-minimized .chat-title-copy > b { font-size:13px!important; } .game-screen .chat-panel.is-minimized .chat-title-copy > small { font-size:8px!important; } .game-screen .chat-panel.is-minimized .chat-head-actions [data-chat-search-toggle] { display:grid!important; } .game-screen .chat-panel.is-minimized .chat-head-actions [data-toggle-chat-settings], .game-screen .chat-panel.is-minimized .chat-head-actions [data-close-chat] { display:none!important; } .game-screen .chat-panel.is-minimized .chat-minimize { display:grid!important;width:38px!important;height:38px!important; } .game-screen .chat-panel.is-minimized .chat-tabs, .game-screen .chat-panel.is-minimized .chat-search-bar, .game-screen .chat-panel.is-minimized .chat-messenger-layout, .game-screen .chat-panel.is-minimized .chat-config, .game-screen .chat-panel.is-minimized .chat-emoji-panel, .game-screen .chat-panel.is-minimized .chat-popover, .game-screen .chat-panel.is-minimized .chat-resize { display:none!important; } .game-screen .chat-config { max-height:min(420px,calc(100vh - 120px)); padding:12px; font-size:11px; overflow:auto; } .game-screen .chat-config label > span, .game-screen .chat-channel-visibility legend { font-size:10px; } } @media (min-width:761px) and (max-width:1080px) { .game-screen .chat-panel.chat-messenger { min-width:520px; } .game-screen .chat-messenger-layout { grid-template-columns:minmax(0,1fr) 158px; } .game-screen .chat-emoji-panel { width:min(330px,calc(100% - 178px))!important;grid-template-rows:40px 42px minmax(0,1fr)!important; } .game-screen .chat-emoji-grid { grid-template-columns:repeat(7,minmax(0,1fr))!important; } .game-screen .chat-emoji-categories { grid-template-columns:repeat(8,minmax(0,1fr))!important; } } html[data-game-theme="light"] .game-screen .chat-resize { color:#82a8bb; } html[data-game-theme="dark"] .game-screen .chat-resize { color:#78a7ba; } /* v2.7.56 — messenger interaction polish, SVG composer controls and trainer actions */ @media (min-width:761px) { .game-screen .chat-panel.chat-messenger { font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } .game-screen .chat-head { padding-left:16px; padding-right:13px; } .game-screen .chat-title-copy > b { font-size:16.5px; font-weight:800; } .game-screen .chat-title-copy > small { font-size:9.5px!important; font-weight:650; } .game-screen .chat-tabs button { font-size:11.5px; font-weight:750; letter-spacing:-.01em; } .game-screen .chat-message { padding:8px 8px; } .game-screen .chat-author-button { font-size:11.5px; font-weight:800; } .game-screen .chat-message-meta time { font-size:8.7px; font-weight:600; } .game-screen .chat-message p { font-size:12px; line-height:1.46; letter-spacing:-.004em; } /* One clean Telegram-like composer surface. */ .game-screen #chatForm { grid-template-columns:40px 40px minmax(0,1fr) 48px; align-items:end; gap:4px; min-height:64px; margin:0 10px 10px; padding:6px; border-radius:18px; border:1px solid rgba(115,166,187,.17); background:rgba(255,255,255,.045); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); } .game-screen #chatForm textarea { min-height:44px; max-height:118px; padding:12px 9px 9px; border:0!important; outline:0!important; background:transparent!important; font:500 12.5px/1.4 Inter,"Segoe UI",system-ui,sans-serif; resize:none; } .game-screen #chatForm textarea::placeholder { color:#7995a4; opacity:.82; } .game-screen .chat-composer-tool { display:grid; place-items:center; width:40px; height:44px; padding:0; border:0; border-radius:13px; background:transparent; color:#6f91a2; box-shadow:none; transition:background .14s ease,color .14s ease,transform .12s ease; } .game-screen .chat-composer-tool:hover { background:rgba(77,146,178,.10); color:#2499dc; } .game-screen .chat-composer-tool:active { transform:scale(.94); } .game-screen .chat-composer-tool .ui-icon { width:20px;height:20px; stroke-width:1.8; } .game-screen .chat-emoji-trigger[aria-expanded="true"] { background:rgba(34,151,230,.12); color:#2297e6; } .game-screen .chat-send-button { display:grid!important; place-items:center!important; width:44px!important; height:44px!important; margin:0!important; border-radius:14px!important; background:linear-gradient(180deg,#2ba8ee,#1688d2)!important; box-shadow:0 7px 18px rgba(24,137,204,.22)!important; transition:transform .12s ease,filter .12s ease!important; } .game-screen .chat-send-button:hover { filter:brightness(1.055); } .game-screen .chat-send-button:active { transform:scale(.94); } /* Sidebar is intentionally just people: no extra mini-search button. */ .game-screen .chat-online-sidebar { padding:10px 9px 10px; } .game-screen .chat-online-sidebar > header { min-height:40px; padding:2px 5px 7px; border-bottom:1px solid rgba(120,168,188,.08); } .game-screen .chat-online-sidebar > header > span { display:flex; align-items:center; justify-content:flex-start; gap:7px; width:100%; } .game-screen .chat-online-sidebar > header b { font-size:9.5px; font-weight:800; } .game-screen .chat-online-sidebar > header small { gap:4px; margin-left:auto; } .game-screen .chat-online-player { grid-template-columns:36px minmax(0,1fr) 8px; min-height:54px; gap:8px; padding:7px 6px; border-radius:13px; } .game-screen .chat-online-player .chat-player-avatar { width:36px;height:36px; } .game-screen .chat-online-player b { font-size:10px; font-weight:800; } .game-screen .chat-online-player small { font-size:7.8px; line-height:1.35; } /* Player popover is now a compact social action sheet. */ .game-screen .chat-popover { width:284px; max-height:min(430px,calc(100% - 64px)); padding:8px; border-radius:18px; overflow:auto; scrollbar-width:thin; } .game-screen .chat-player-popover-head { grid-template-columns:42px minmax(0,1fr); gap:10px; min-height:58px; padding:5px 5px 7px; } .game-screen .chat-player-popover-head .chat-player-avatar { width:42px;height:42px; } .game-screen .chat-player-popover-head b { font-size:12px; font-weight:850; } .game-screen .chat-player-popover-head small { font-size:8px; line-height:1.35; } .game-screen .chat-player-location { display:grid; grid-template-columns:8px minmax(0,1fr); gap:8px; align-items:center; margin:0 2px 7px; padding:8px 9px; border-radius:12px; background:rgba(91,145,168,.075); } .game-screen .chat-player-location > i { width:8px;height:8px;border-radius:50%;background:#f0b84c;box-shadow:0 0 0 4px rgba(240,184,76,.08); } .game-screen .chat-player-location.is-nearby > i { background:#45ce82;box-shadow:0 0 0 4px rgba(69,206,130,.09); } .game-screen .chat-player-location.is-private > i { background:#9aaeb8;box-shadow:none; } .game-screen .chat-player-location span { display:grid;gap:1px;min-width:0; } .game-screen .chat-player-location b { font-size:9px; } .game-screen .chat-player-location small { overflow:hidden;color:#76929f;font-size:7.5px;text-overflow:ellipsis;white-space:nowrap; } .game-screen .chat-popover > .is-join { display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; width:100%; min-height:48px; margin:0 0 7px; padding:7px 9px; border:1px solid rgba(38,154,222,.22); border-radius:12px; background:rgba(35,151,222,.10); color:#65bdf0; text-align:left; } .game-screen .chat-popover > .is-join .ui-icon { width:20px;height:20px;align-self:center; } .game-screen .chat-popover > .is-join span { display:grid;gap:2px;min-width:0; } .game-screen .chat-popover > .is-join b { color:inherit;font-size:9.5px; } .game-screen .chat-popover > .is-join small { overflow:hidden;color:#789ba9;font-size:7.3px;text-overflow:ellipsis;white-space:nowrap; } .game-screen .chat-popover-actions.is-social { gap:3px; } .game-screen .chat-popover-actions.is-social button { display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; align-items:center; min-height:48px; padding:6px 8px; border-radius:12px; } .game-screen .chat-popover-actions.is-social button .ui-icon { width:18px;height:18px; } .game-screen .chat-popover-actions.is-social button > span { display:grid;gap:1px;min-width:0; } .game-screen .chat-popover-actions.is-social button b { color:inherit;font-size:9.2px;font-weight:800; } .game-screen .chat-popover-actions.is-social button small { color:#718e9c;font-size:7.2px;font-weight:600; } .game-screen .chat-popover-actions button.requires-nearby { opacity:.72; } .game-screen .chat-popover-actions button.requires-nearby:hover { opacity:1; } .game-screen .chat-popover-actions button.is-status { opacity:.72; } /* Real SVG resize affordance instead of the broken painted corner. */ .game-screen .chat-resize { right:0!important; bottom:0!important; z-index:45!important; width:36px!important; height:36px!important; border-radius:14px 0 20px 0!important; color:#74a5bb!important; opacity:.72!important; background:linear-gradient(135deg,transparent 45%,rgba(103,160,184,.07))!important; } .game-screen .chat-resize::before, .game-screen .chat-resize::after { display:none!important;content:none!important; } .game-screen .chat-resize > span { display:grid;place-items:center;width:100%;height:100%;pointer-events:none; } .game-screen .chat-resize .ui-icon { width:21px;height:21px;transform:translate(5px,5px); } .game-screen .chat-resize:hover { opacity:1!important;color:#2499dc!important; } html[data-game-theme="light"] .game-screen #chatForm { border-color:#d8e6ec; background:#f8fbfc; box-shadow:inset 0 1px 0 #fff; } html[data-game-theme="light"] .game-screen .chat-composer-tool { color:#6e8b9b; } html[data-game-theme="light"] .game-screen .chat-composer-tool:hover { background:#eaf4f8;color:#168fd4; } html[data-game-theme="light"] .game-screen .chat-player-location { background:#f1f7f9; } html[data-game-theme="light"] .game-screen .chat-popover > .is-join { border-color:#c9e5f3;background:#edf8fd;color:#177fb9; } html[data-game-theme="light"] .game-screen .chat-popover-actions.is-social button small { color:#7f97a3; } html[data-game-theme="light"] .game-screen .chat-resize { color:#719bad!important; } } /* v2.7.57 — rebuilt classic emoji picker and simplified messenger composer */ @media (min-width:761px) { .game-screen #chatForm { grid-template-columns:42px minmax(0,1fr) 50px!important; align-items:end!important; gap:6px!important; min-height:66px!important; margin:0 10px 10px!important; padding:7px!important; border:1px solid rgba(113,166,187,.18)!important; border-radius:19px!important; } .game-screen #chatForm textarea { width:100%!important; min-width:0!important; min-height:44px!important; max-height:120px!important; padding:12px 10px 9px!important; border:0!important; background:transparent!important; color:var(--theme-text,#173f57)!important; font:500 12.5px/1.42 Inter,"Segoe UI",system-ui,sans-serif!important; letter-spacing:0!important; resize:none!important; } .game-screen #chatForm textarea::placeholder { color:#83a0ae!important;opacity:.88!important; } .game-screen .chat-emoji-trigger { display:grid!important; place-items:center!important; width:42px!important; height:44px!important; margin:0!important; padding:0!important; border:0!important; border-radius:14px!important; background:transparent!important; color:#6e93a5!important; } .game-screen .chat-emoji-trigger:hover, .game-screen .chat-emoji-trigger[aria-expanded="true"] { background:rgba(32,151,226,.11)!important; color:#168fd8!important; } .game-screen .chat-emoji-trigger .ui-icon { width:21px!important;height:21px!important; } .game-screen .chat-send-button { width:46px!important; height:46px!important; align-self:center!important; border-radius:14px!important; } .game-screen .chat-emoji-panel, .game-screen .chat-emoji-panel * { box-sizing:border-box!important; } .game-screen .chat-emoji-panel { position:absolute!important; z-index:80!important; left:10px!important; right:auto!important; bottom:84px!important; display:grid!important; grid-template-rows:42px 46px minmax(0,1fr)!important; width:390px!important; max-width:calc(100% - 22px)!important; height:326px!important; max-height:calc(100% - 150px)!important; min-width:320px!important; min-height:250px!important; margin:0!important; padding:0!important; overflow:hidden!important; border:1px solid rgba(125,174,195,.20)!important; border-radius:18px!important; background:rgba(9,38,51,.985)!important; box-shadow:0 20px 52px rgba(0,18,28,.34)!important; transform:none!important; } .game-screen .chat-emoji-panel[hidden] { display:none!important; } .game-screen .chat-emoji-head { display:flex!important; align-items:center!important; justify-content:space-between!important; min-width:0!important; min-height:42px!important; margin:0!important; padding:0 13px!important; border:0!important; border-bottom:1px solid rgba(126,178,198,.10)!important; background:transparent!important; } .game-screen .chat-emoji-head b { margin:0!important; color:#e5f2f6!important; font:800 11.5px/1 Inter,"Segoe UI",system-ui,sans-serif!important; } .game-screen .chat-emoji-head small { margin:0!important; color:#7394a3!important; font:700 9px/1 Inter,"Segoe UI",system-ui,sans-serif!important; } .game-screen .chat-emoji-categories { display:grid!important; grid-template-columns:repeat(10,minmax(0,1fr))!important; gap:3px!important; width:100%!important; min-width:0!important; height:46px!important; margin:0!important; padding:5px 7px!important; overflow:hidden!important; border:0!important; border-bottom:1px solid rgba(126,178,198,.09)!important; background:rgba(255,255,255,.012)!important; } .game-screen .chat-emoji-categories button { appearance:none!important; display:grid!important; place-items:center!important; width:100%!important; min-width:0!important; height:35px!important; min-height:35px!important; margin:0!important; padding:0!important; overflow:hidden!important; border:0!important; border-radius:10px!important; background:transparent!important; color:inherit!important; box-shadow:none!important; font:400 18px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; cursor:pointer!important; transform:none!important; } .game-screen .chat-emoji-categories button span { display:block!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; line-height:1!important; } .game-screen .chat-emoji-categories button:hover { background:rgba(255,255,255,.07)!important; } .game-screen .chat-emoji-categories button.is-active { background:rgba(35,153,228,.15)!important; box-shadow:inset 0 0 0 1px rgba(35,153,228,.24)!important; } .game-screen .chat-emoji-grid { display:grid!important; grid-template-columns:repeat(9,minmax(0,1fr))!important; grid-auto-rows:38px!important; align-content:start!important; gap:3px!important; width:100%!important; min-width:0!important; min-height:0!important; margin:0!important; padding:9px!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; scrollbar-gutter:stable!important; scrollbar-width:thin!important; scrollbar-color:rgba(111,158,177,.46) transparent!important; background:transparent!important; } .game-screen .chat-emoji-grid::-webkit-scrollbar { width:7px!important;height:0!important; } .game-screen .chat-emoji-grid::-webkit-scrollbar-track { background:transparent!important; } .game-screen .chat-emoji-grid::-webkit-scrollbar-thumb { border-radius:999px!important;background:rgba(111,158,177,.38)!important; } .game-screen .chat-emoji-grid button { appearance:none!important; display:grid!important; place-items:center!important; width:100%!important; min-width:0!important; height:38px!important; min-height:38px!important; margin:0!important; padding:0!important; overflow:hidden!important; border:0!important; border-radius:10px!important; background:transparent!important; color:inherit!important; box-shadow:none!important; font:400 23px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; cursor:pointer!important; transform:none!important; transition:background .12s ease,transform .12s ease!important; } .game-screen .chat-emoji-grid button:hover { background:rgba(255,255,255,.075)!important; transform:scale(1.08)!important; } .game-screen .chat-emoji-grid button:active { transform:scale(.93)!important; } html[data-game-theme="light"] .game-screen .chat-emoji-panel { border-color:#d5e4ea!important; background:rgba(255,255,255,.99)!important; box-shadow:0 20px 48px rgba(27,65,85,.20)!important; } html[data-game-theme="light"] .game-screen .chat-emoji-head, html[data-game-theme="light"] .game-screen .chat-emoji-categories { border-color:#e3edf1!important; } html[data-game-theme="light"] .game-screen .chat-emoji-head b { color:#244d63!important; } html[data-game-theme="light"] .game-screen .chat-emoji-head small { color:#7c96a3!important; } html[data-game-theme="light"] .game-screen .chat-emoji-categories { background:#fbfdfe!important; } html[data-game-theme="light"] .game-screen .chat-emoji-categories button:hover, html[data-game-theme="light"] .game-screen .chat-emoji-grid button:hover { background:#eef6f9!important; } html[data-game-theme="light"] .game-screen .chat-emoji-categories button.is-active { background:#e4f4fc!important; box-shadow:inset 0 0 0 1px #9ed6f1!important; } } @media (max-width:760px) { .game-screen #chatForm { grid-template-columns:38px minmax(0,1fr) 46px!important;gap:5px!important; } .game-screen #chatForm [data-chat-attachment] { display:none!important; } .game-screen .chat-emoji-panel { left:8px!important; right:8px!important; bottom:62px!important; width:auto!important; min-width:0!important; height:min(330px,48vh)!important; display:grid!important; grid-template-rows:40px 44px minmax(0,1fr)!important; padding:0!important; overflow:hidden!important; } .game-screen .chat-emoji-panel[hidden] { display:none!important; } .game-screen .chat-emoji-categories { display:grid!important; grid-template-columns:repeat(10,minmax(30px,1fr))!important; gap:2px!important; padding:4px 5px!important; overflow-x:auto!important; overflow-y:hidden!important; } .game-screen .chat-emoji-categories button { width:100%!important;height:34px!important;padding:0!important;font-size:17px!important; } .game-screen .chat-emoji-grid { grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:3px!important;padding:7px!important;overflow-y:auto!important; } .game-screen .chat-emoji-grid button { width:100%!important;height:38px!important;padding:0!important;font-size:22px!important; } } /* v2.7.58 — inline messenger search, single collapse control and stable emoji popover */ @media (min-width:761px) { .game-screen .chat-panel.chat-messenger { grid-template-rows:auto auto minmax(0,1fr)!important; } /* Search belongs to the title bar; it never creates a new row over messages. */ .game-screen .chat-head { min-width:0; } .game-screen .chat-head-search { flex:1 1 260px; display:grid; grid-template-columns:20px minmax(0,1fr) 28px; align-items:center; gap:6px; min-width:180px; max-width:330px; height:38px; margin-left:auto; padding:0 5px 0 10px; border:1px solid color-mix(in srgb,var(--theme-accent,#1b95d1) 24%,var(--theme-border,#d7e5eb)); border-radius:13px; background:color-mix(in srgb,var(--theme-card,#fff) 92%,transparent); box-shadow:0 7px 22px rgba(13,55,76,.08); } .game-screen .chat-head-search[hidden] { display:none!important; } .game-screen .chat-head-search > span { display:grid; place-items:center; color:var(--theme-muted,#7a96a4); } .game-screen .chat-head-search > span .ui-icon { width:15px;height:15px; } .game-screen .chat-head-search input { width:100%; min-width:0; height:34px; padding:0; border:0; outline:0; background:transparent; color:var(--theme-text,#173f57); font:600 12px/1.2 Inter,"Segoe UI",system-ui,sans-serif; } .game-screen .chat-head-search input::placeholder { color:var(--theme-muted,#8ba2ae); } .game-screen .chat-head-search button { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:9px; background:transparent; color:var(--theme-muted,#7692a0); } .game-screen .chat-head-search button:hover { background:color-mix(in srgb,var(--theme-accent,#1c96d5) 10%,transparent);color:var(--theme-accent,#168fd4); } .game-screen .chat-head-search button .ui-icon { width:13px;height:13px; } .game-screen .chat-panel.is-searching .chat-title-copy { max-width:150px; } .game-screen .chat-panel.is-searching .chat-head-actions [data-chat-search-toggle] { display:none; } .game-screen .chat-search-bar { display:none!important; } /* There is one collapse control on desktop: X. No separate minus button. */ .game-screen .chat-head-actions [data-chat-minimize], .game-screen .chat-minimize { display:none!important; } .game-screen .chat-head-actions [data-close-chat] { display:grid!important; } .game-screen .chat-panel.is-minimized .chat-head-actions [data-close-chat] { display:none!important; } /* Composer behaves like a messenger input, growing only when the user types. */ .game-screen #chatForm { grid-template-columns:42px minmax(0,1fr) 48px!important; align-items:end!important; gap:6px!important; min-height:62px!important; margin:0 8px 8px!important; padding:7px 7px 7px 8px!important; border:1px solid var(--theme-border,#d9e7ed)!important; border-radius:18px!important; background:color-mix(in srgb,var(--theme-card,#fff) 94%,transparent)!important; box-shadow:0 5px 18px rgba(13,55,76,.045),inset 0 1px 0 rgba(255,255,255,.36)!important; transition:border-color .15s ease,box-shadow .15s ease,background .15s ease!important; } .game-screen #chatForm:focus-within { border-color:color-mix(in srgb,var(--theme-accent,#1b96d6) 48%,var(--theme-border,#d9e7ed))!important; box-shadow:0 8px 24px rgba(22,125,181,.10),0 0 0 2px color-mix(in srgb,var(--theme-accent,#1b96d6) 8%,transparent)!important; } .game-screen #chatForm textarea { min-height:42px!important; max-height:96px!important; padding:10px 8px 8px!important; color:var(--theme-text,#173f57)!important; font:500 13px/1.42 Inter,"Segoe UI",system-ui,sans-serif!important; } .game-screen #chatForm textarea::placeholder { color:var(--theme-muted,#8da3ae)!important; } .game-screen .chat-emoji-trigger { width:42px!important; height:42px!important; align-self:center!important; border-radius:13px!important; } .game-screen .chat-send-button { width:46px!important; height:46px!important; align-self:center!important; border-radius:14px!important; box-shadow:0 7px 18px rgba(24,145,211,.22)!important; } /* Emoji picker is a true popover. It is outside the conversation grid and cannot resize it. */ .game-screen .chat-emoji-panel, .game-screen .chat-emoji-panel * { box-sizing:border-box!important; } .game-screen .chat-emoji-panel { position:absolute!important; z-index:120!important; left:16px!important; right:auto!important; bottom:82px!important; display:grid!important; grid-template-rows:45px minmax(0,1fr)!important; width:min(370px,calc(100% - 32px))!important; height:300px!important; min-width:0!important; min-height:0!important; max-width:none!important; max-height:min(300px,calc(100% - 132px))!important; margin:0!important; padding:0!important; overflow:hidden!important; border:1px solid var(--theme-border,#d9e7ed)!important; border-radius:18px!important; background:color-mix(in srgb,var(--theme-panel,#fff) 98%,transparent)!important; box-shadow:0 22px 55px rgba(10,38,54,.24),0 3px 10px rgba(10,38,54,.08)!important; backdrop-filter:blur(18px)!important; animation:chatEmojiPopoverIn .14s cubic-bezier(.2,.75,.25,1) both!important; } .game-screen .chat-emoji-panel[hidden] { display:none!important; } .game-screen .chat-emoji-categories { display:flex!important; align-items:center!important; gap:3px!important; width:100%!important; height:45px!important; margin:0!important; padding:5px 7px!important; overflow-x:auto!important; overflow-y:hidden!important; overscroll-behavior-x:contain!important; scrollbar-width:none!important; border:0!important; border-bottom:1px solid var(--theme-border,#e2edf1)!important; background:color-mix(in srgb,var(--theme-card,#fff) 72%,transparent)!important; } .game-screen .chat-emoji-categories::-webkit-scrollbar { display:none!important; } .game-screen .chat-emoji-categories button { flex:0 0 34px!important; display:grid!important; place-items:center!important; width:34px!important; min-width:34px!important; height:34px!important; min-height:34px!important; margin:0!important; padding:0!important; border:0!important; border-radius:10px!important; background:transparent!important; box-shadow:none!important; font:400 18px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; cursor:pointer!important; } .game-screen .chat-emoji-categories button span { display:block!important;width:auto!important;height:auto!important;line-height:1!important; } .game-screen .chat-emoji-categories button:hover { background:color-mix(in srgb,var(--theme-accent,#2198d8) 9%,transparent)!important; } .game-screen .chat-emoji-categories button.is-active { background:color-mix(in srgb,var(--theme-accent,#2198d8) 14%,transparent)!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--theme-accent,#2198d8) 24%,transparent)!important; } .game-screen .chat-emoji-grid { display:grid!important; grid-template-columns:repeat(8,minmax(0,1fr))!important; grid-auto-rows:39px!important; align-content:start!important; gap:3px!important; width:100%!important; min-width:0!important; min-height:0!important; margin:0!important; padding:9px!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; scrollbar-width:thin!important; scrollbar-color:color-mix(in srgb,var(--theme-muted,#7893a0) 42%,transparent) transparent!important; } .game-screen .chat-emoji-grid button { display:grid!important; place-items:center!important; width:100%!important; min-width:0!important; height:39px!important; min-height:39px!important; margin:0!important; padding:0!important; overflow:visible!important; border:0!important; border-radius:10px!important; background:transparent!important; box-shadow:none!important; font:400 23px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; cursor:pointer!important; transition:background .1s ease,transform .1s ease!important; } .game-screen .chat-emoji-grid button:hover { background:color-mix(in srgb,var(--theme-accent,#2198d8) 8%,transparent)!important;transform:scale(1.08)!important; } .game-screen .chat-emoji-grid button:active { transform:scale(.93)!important; } html[data-game-theme="dark"] .game-screen .chat-emoji-panel { border-color:rgba(125,178,198,.20)!important; background:rgba(8,36,49,.985)!important; box-shadow:0 22px 55px rgba(0,12,20,.42)!important; } html[data-game-theme="dark"] .game-screen .chat-emoji-categories { border-color:rgba(125,178,198,.12)!important;background:rgba(255,255,255,.018)!important; } } @keyframes chatEmojiPopoverIn { from { opacity:0;transform:translateY(7px) scale(.985); } to { opacity:1;transform:translateY(0) scale(1); } } @media (max-width:760px) { /* Mobile keeps its own compact chat, but the picker must still be a popover rather than a layout row. */ .game-screen .chat-emoji-panel { position:absolute!important; z-index:120!important; left:8px!important; right:8px!important; bottom:64px!important; display:grid!important; grid-template-rows:44px minmax(0,1fr)!important; width:auto!important; height:min(300px,45vh)!important; margin:0!important; padding:0!important; overflow:hidden!important; border-radius:17px!important; } .game-screen .chat-emoji-panel[hidden] { display:none!important; } .game-screen .chat-emoji-categories { display:flex!important; gap:3px!important; padding:5px 6px!important; overflow-x:auto!important; overflow-y:hidden!important; scrollbar-width:none!important; } .game-screen .chat-emoji-categories button { flex:0 0 34px!important;width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;font-size:18px!important; } .game-screen .chat-emoji-grid { grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:3px!important;padding:8px!important;overflow-y:auto!important; } .game-screen .chat-emoji-grid button { width:100%!important;height:39px!important;padding:0!important;font-size:22px!important; } } /* v2.7.59 — readable trainer profile, portrait assets, teammate cards and detached stamina HUD */ .game-screen .player-chip-avatar, .game-screen .party-hud-avatar { background-color:#eef8ff; background-image:url('/assets/v2.7/ui/player-profiles/trainer-boy-profile.png'); background-position:center center; background-repeat:no-repeat; background-size:contain; } .game-screen .player-chip-avatar[data-skin="female"], .game-screen .party-hud-avatar[data-skin="female"] { background-image:url('/assets/v2.7/ui/player-profiles/trainer-girl-profile.png'); } .game-screen .player-stamina-hud { --party-hud-offset:0px; position:fixed; z-index:24; left:max(12px,env(safe-area-inset-left)); top:calc(max(12px,env(safe-area-inset-top)) + 102px + var(--party-hud-offset)); display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; width:288px; min-height:34px; padding:5px 10px; border:1px solid rgba(117,180,202,.26); border-radius:12px; background:linear-gradient(145deg,rgba(7,39,51,.94),rgba(7,30,42,.92)); box-shadow:0 9px 24px rgba(0,22,33,.19),inset 0 1px rgba(255,255,255,.07); color:#e9f7fb; pointer-events:none; backdrop-filter:blur(12px) saturate(1.06); transition:top .16s ease,border-color .16s ease,background .16s ease; } .game-screen .player-stamina-title { display:flex; align-items:baseline; gap:5px; min-width:76px; white-space:nowrap; } .game-screen .player-stamina-title small { color:#91b4c3; font-size:5.8px; font-weight:950; letter-spacing:.08em; } .game-screen .player-stamina-title b { color:#dff1f7; font-size:7.3px; font-weight:850; } .game-screen .player-stamina-meter { display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:7px; } .game-screen .player-stamina-meter > i { height:6px; background:rgba(255,255,255,.12); } .game-screen .player-stamina-meter > i > b { width:0; background:linear-gradient(90deg,#52bd3d,#a8df39); box-shadow:0 0 7px rgba(116,205,58,.26); transition:width .2s ease,background .16s ease; } .game-screen .player-stamina-meter > em { color:#d1e5ec; font-size:6.8px; font-weight:850; } .game-screen .player-stamina-hud.is-tired .player-stamina-meter > i > b { background:linear-gradient(90deg,#e77735,#f4af3d); } .game-screen .player-stamina-hud.is-critical { border-color:rgba(236,105,67,.38); } .game-screen .player-stamina-hud.is-critical .player-stamina-meter > i > b { background:linear-gradient(90deg,#dc4f42,#ef8441); } @media (min-width:761px) { .game-screen .player-chip { width:288px; min-width:288px; min-height:90px; padding:9px 12px 9px 9px; gap:11px; align-items:center; border:1px solid rgba(117,180,202,.28); border-radius:22px; background:linear-gradient(145deg,rgba(7,39,51,.95),rgba(7,30,42,.91)); box-shadow:0 12px 30px rgba(0,22,33,.22),inset 0 1px rgba(255,255,255,.08); } .game-screen .player-chip-avatar { width:66px; height:66px; flex:0 0 66px; border:2px solid color-mix(in srgb,var(--role-color,#39aef4) 60%,#fff); border-radius:50%; background-size:112% 112%; box-shadow:0 0 0 4px color-mix(in srgb,var(--role-color,#39aef4) 14%,transparent),0 8px 18px rgba(0,25,38,.18); } .game-screen .player-chip-copy { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto; gap:3px; width:100%; min-width:0; padding:0; } .game-screen .player-chip-identity { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; } .game-screen #worldPlayerName { max-width:none; color:#f4fbfd; font-size:13px; font-weight:900; letter-spacing:-.12px; line-height:1.05; } .game-screen #worldPlayerLevel { flex:0 0 auto; padding:2px 5px; border:1px solid rgba(102,185,226,.2); border-radius:7px; background:rgba(89,174,220,.08); color:#bfe5f5; font-size:6.7px; font-weight:900; } .game-screen .player-connection { gap:4px; min-height:10px; color:#8faebb; font-size:6.1px!important; } .game-screen .player-community-role { left:13px; bottom:8px; max-width:58px; border-radius:7px; font-size:5px!important; } .game-screen .player-chip-progress { display:grid; grid-template-columns:30px minmax(0,1fr) 49px; align-items:center; gap:6px; min-width:0; margin:0; } .game-screen .player-chip-progress > small { margin:0; color:#91adba; font-size:5.7px!important; font-weight:900; letter-spacing:.04em; text-transform:uppercase; } .game-screen .player-chip-progress > i { position:relative; display:block; height:6px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.11); } .game-screen .player-chip-progress > i > b { position:absolute; inset:0 auto 0 0; width:0; border-radius:inherit; transition:width .2s ease,background .16s ease; } .game-screen .player-chip-progress.is-exp > i > b { background:linear-gradient(90deg,#238ee9,#58c9ff); box-shadow:0 0 7px rgba(64,179,245,.34); } .game-screen .player-chip-progress.is-energy > i > b { background:linear-gradient(90deg,#efb22a,#ffd94b); box-shadow:0 0 7px rgba(246,190,52,.24); } .game-screen .player-chip.is-low-energy .player-chip-progress.is-energy > i > b { background:linear-gradient(90deg,#dc5845,#ee8a42); } .game-screen .player-chip-progress > em { color:#c8dde5; font-size:6.2px; font-style:normal; font-weight:800; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; } .game-screen .party-hud { position:fixed; z-index:24; top:calc(max(12px,env(safe-area-inset-top)) + 102px); left:max(12px,env(safe-area-inset-left)); display:flex; flex-direction:column; align-items:stretch; gap:6px; width:288px; max-width:288px; pointer-events:auto; } .game-screen .party-hud[hidden] { display:none!important; } .game-screen .party-hud-member { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:9px; width:100%; min-width:0; min-height:68px; padding:7px 10px 7px 7px; overflow:hidden; border:1px solid rgba(174,120,244,.42); border-radius:18px; background:linear-gradient(145deg,rgba(38,27,58,.94),rgba(25,21,43,.93)); color:#fff; box-shadow:0 10px 26px rgba(43,18,72,.23),inset 0 1px rgba(255,255,255,.07); text-align:left; backdrop-filter:blur(12px) saturate(1.04); transition:transform .14s ease,border-color .14s ease,opacity .14s ease; } .game-screen .party-hud-member:not(:disabled):hover { transform:translateY(-1px);border-color:rgba(195,149,253,.68); } .game-screen .party-hud-member:disabled { opacity:.68;cursor:default; } .game-screen .party-hud-member.is-online { border-color:rgba(181,117,247,.58); } .game-screen .party-hud-member.is-leader { border-color:rgba(223,178,255,.7); } .game-screen .party-hud-avatar { position:relative; display:block; width:48px; height:48px; overflow:hidden; border:2px solid rgba(220,191,255,.72); border-radius:50%; background-size:112% 112%; box-shadow:0 0 0 3px rgba(177,111,244,.13); } .game-screen .party-hud-avatar img { position:absolute; right:-2px; bottom:-2px; width:17px; height:17px; filter:drop-shadow(0 1px 2px rgba(28,10,49,.45)); } .game-screen .party-hud-avatar i { position:absolute; left:0; top:-1px; font-size:8px; font-style:normal; } .game-screen .party-hud-copy { display:grid;gap:2px;min-width:0; } .game-screen .party-hud-identity { display:flex; align-items:center; justify-content:space-between; gap:7px; min-width:0; } .game-screen .party-hud-identity b { min-width:0; overflow:hidden; color:#fff; font-size:10.5px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; } .game-screen .party-hud-identity em { flex:0 0 auto; color:#dbc5f5; font-size:6.4px; font-style:normal; font-weight:850; } .game-screen .party-hud-status { display:flex; align-items:center; gap:4px; min-width:0; } .game-screen .party-hud-status > i { width:5px; height:5px; flex:0 0 5px; border-radius:50%; background:#737786; box-shadow:0 0 0 2px rgba(255,255,255,.05); } .game-screen .party-hud-member.is-online .party-hud-status > i { background:#55d978;box-shadow:0 0 0 2px rgba(85,217,120,.12); } .game-screen .party-hud-status small { overflow:hidden; color:#bca5d4; font-size:5.2px; font-weight:950; letter-spacing:.07em; text-overflow:ellipsis; white-space:nowrap; } .game-screen .party-hud-lead { overflow:hidden; color:#ddd1e9; font-size:6.4px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; } } html[data-game-theme="light"] .game-screen .player-chip, html[data-game-theme="light"] .game-screen .player-stamina-hud { border-color:rgba(183,211,223,.96); background:rgba(248,253,255,.965); color:#173f57; box-shadow:0 11px 28px rgba(24,66,88,.14),inset 0 1px #fff; } html[data-game-theme="light"] .game-screen #worldPlayerName { color:#153d58; } html[data-game-theme="light"] .game-screen #worldPlayerLevel { border-color:#d4e6ee; background:#eef7fb; color:#3f687d; } html[data-game-theme="light"] .game-screen .player-connection, html[data-game-theme="light"] .game-screen .player-chip-progress > small { color:#678697; } html[data-game-theme="light"] .game-screen .player-chip-progress > i, html[data-game-theme="light"] .game-screen .player-stamina-meter > i { background:#dce9ef; } html[data-game-theme="light"] .game-screen .player-chip-progress > em { color:#486c80; } html[data-game-theme="light"] .game-screen .player-stamina-title small { color:#6a8999; } html[data-game-theme="light"] .game-screen .player-stamina-title b { color:#315d72; } html[data-game-theme="light"] .game-screen .player-stamina-meter > em { color:#496e80; } @media (max-width:760px) { .game-screen .player-chip { width:min(178px,calc(100vw - 170px)); min-width:150px; min-height:78px; padding:6px 7px 6px 6px; gap:7px; align-items:center; border-radius:17px; } .game-screen .player-chip-avatar { width:48px; height:48px; flex:0 0 48px; border-radius:50%; background-size:114% 114%; } .game-screen .player-chip-copy { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto; gap:2px; width:100%; min-width:0; } .game-screen .player-chip-identity { display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0; } .game-screen #worldPlayerName { max-width:none;font-size:9.5px;line-height:1; } .game-screen #worldPlayerLevel { flex:0 0 auto;font-size:5.3px;font-style:normal;font-weight:900;white-space:nowrap; } .game-screen .player-community-role { left:7px;bottom:5px;max-width:40px;padding:1px 3px;font-size:4px!important; } .game-screen .player-connection { margin:0;font-size:4.8px!important; } .game-screen .player-chip-progress { display:grid; grid-template-columns:18px minmax(0,1fr) 31px; align-items:center; gap:3px; min-width:0; margin:0; } .game-screen .player-chip-progress > small { font-size:4.5px!important;font-weight:900; } .game-screen .player-chip-progress > i { height:4px; } .game-screen .player-chip-progress > em { font-size:4.6px;font-style:normal;font-weight:800;text-align:right;white-space:nowrap; } .game-screen .player-chip-progress.is-energy > small { font-size:0!important; } .game-screen .player-chip-progress.is-energy > small::after { content:'ЭН';font-size:4.5px; } .game-screen .party-hud { position:fixed; z-index:24; top:calc(max(8px,env(safe-area-inset-top)) + 86px); left:max(8px,env(safe-area-inset-left)); display:flex; flex-direction:column; gap:5px; width:min(178px,calc(100vw - 170px)); max-width:178px; } .game-screen .party-hud[hidden] { display:none!important; } .game-screen .party-hud-member { display:grid; grid-template-columns:39px minmax(0,1fr); align-items:center; gap:6px; width:100%; min-width:0; min-height:52px; padding:5px 6px 5px 5px; border:1px solid rgba(183,124,255,.54); border-radius:14px; background:linear-gradient(150deg,rgba(55,32,82,.95),rgba(33,24,51,.94)); box-shadow:0 8px 19px rgba(47,24,72,.22),inset 0 1px rgba(255,255,255,.07); text-align:left; } .game-screen .party-hud-member:disabled { opacity:.68; } .game-screen .party-hud-avatar { width:39px;height:39px;border:1.5px solid rgba(220,191,255,.7);border-radius:50%;background-size:114% 114%; } .game-screen .party-hud-avatar img { right:-2px;bottom:-2px;width:14px;height:14px; } .game-screen .party-hud-avatar i { left:0;top:-1px;font-size:6px; } .game-screen .party-hud-copy { display:grid;gap:1px;min-width:0; } .game-screen .party-hud-identity { display:flex;align-items:center;justify-content:space-between;gap:3px;min-width:0; } .game-screen .party-hud-identity b { min-width:0;overflow:hidden;color:#fff;font-size:7.5px;text-overflow:ellipsis;white-space:nowrap; } .game-screen .party-hud-identity em { flex:0 0 auto;color:#d8c0ee;font-size:5px;font-style:normal; } .game-screen .party-hud-status { display:flex;align-items:center;gap:3px; } .game-screen .party-hud-status > i { width:4px;height:4px;flex:0 0 4px;border-radius:50%;background:#737786; } .game-screen .party-hud-member.is-online .party-hud-status > i { background:#55d978; } .game-screen .party-hud-status small { overflow:hidden;color:#bca5d4;font-size:4px;font-weight:900;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap; } .game-screen .party-hud-lead { overflow:hidden;color:#ded1ea;font-size:4.8px;text-overflow:ellipsis;white-space:nowrap; } .game-screen .player-stamina-hud { left:max(8px,env(safe-area-inset-left)); top:calc(max(8px,env(safe-area-inset-top)) + 86px + var(--party-hud-offset)); grid-template-columns:29px minmax(0,1fr); gap:5px; width:min(178px,calc(100vw - 170px)); min-height:25px; padding:4px 6px; border-radius:10px; } .game-screen .player-stamina-title { min-width:0; } .game-screen .player-stamina-title small { font-size:4.4px; } .game-screen .player-stamina-title b { display:none; } .game-screen .player-stamina-meter { grid-template-columns:minmax(0,1fr) 18px;gap:4px; } .game-screen .player-stamina-meter > i { height:4px; } .game-screen .player-stamina-meter > em { font-size:4.8px; } } /* v2.7.59 — stamina follows the real teammate stack height without JS layout math */ .game-screen .party-hud[data-count="1"] + .player-stamina-hud { --party-hud-offset:74px; } .game-screen .party-hud[data-count="2"] + .player-stamina-hud { --party-hud-offset:148px; } @media (max-width:760px) { .game-screen .party-hud[data-count="1"] + .player-stamina-hud { --party-hud-offset:57px; } .game-screen .party-hud[data-count="2"] + .player-stamina-hud { --party-hud-offset:114px; } } html[data-game-theme="light"] .game-screen .party-hud-member { border-color:#ceb6eb; background:rgba(251,248,255,.97); color:#442561; box-shadow:0 9px 23px rgba(86,55,120,.14),inset 0 1px #fff; } html[data-game-theme="light"] .game-screen .party-hud-member.is-online { border-color:#ba91e9; } html[data-game-theme="light"] .game-screen .party-hud-identity b { color:#40205e; } html[data-game-theme="light"] .game-screen .party-hud-identity em { color:#7b5599; } html[data-game-theme="light"] .game-screen .party-hud-status small { color:#815da0; } html[data-game-theme="light"] .game-screen .party-hud-lead { color:#715b83; } /* v2.7.60 — modern top-left trainer HUD polish: clearer hierarchy, party presence, compact resources */ .game-screen .player-chip, .game-screen .party-hud-member, .game-screen .player-stamina-hud, .game-screen .party-hud-head { box-sizing:border-box; } .game-screen .player-chip { position:relative; cursor:pointer; outline:none; } .game-screen .player-chip::before { content:''; inset:0; border-radius:inherit; background:linear-gradient(115deg,color-mix(in srgb,var(--role-color,#39aef4) 12%,transparent),transparent 42%); pointer-events:none; } .game-screen .player-chip-avatar { color:transparent!important; font-size:0!important; } .game-screen .player-chip-meta { display:flex; gap:6px; min-height:11px; } .game-screen .player-chip-meta .player-community-role { position:static!important; inset:auto!important; display:inline-flex; align-items:center; gap:3px; max-width:86px; min-height:0; margin:0; padding:1px 5px; overflow:hidden; border:1px solid color-mix(in srgb,var(--role-color,#39aef4) 35%,transparent); border-radius:999px; background:color-mix(in srgb,var(--role-color,#39aef4) 11%,transparent); color:color-mix(in srgb,var(--role-color,#39aef4) 72%,#fff); font-size:5.2px!important; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; } .game-screen .player-chip-meta .player-community-role[hidden] { display:none!important; } .game-screen .player-chip-meta .player-community-role .ui-icon { width:9px;height:9px; } .game-screen .player-chip-meta .player-connection { display:flex; align-items:center; gap:4px; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .game-screen .player-chip-open-hint { position:absolute; right:6px; top:50%; display:grid; place-items:center; width:14px; height:25px; transform:translateY(-50%); border-radius:8px; color:rgba(207,232,241,.45); font:700 17px/1 system-ui; transition:transform .14s ease,color .14s ease,background .14s ease; } .game-screen .player-chip:hover .player-chip-open-hint, .game-screen .player-chip:focus-visible .player-chip-open-hint { transform:translate(2px,-50%); color:#fff; background:rgba(255,255,255,.06); } .game-screen .player-chip:focus-visible, .game-screen .party-hud-member:focus-visible { outline:2px solid color-mix(in srgb,#64c8ff 76%,#fff); outline-offset:2px; } .game-screen .player-chip-progress.is-exp > i { box-shadow:inset 0 0 0 1px rgba(255,255,255,.025); } .game-screen .player-chip-progress.is-energy { opacity:.86; } .game-screen .player-chip-progress.is-energy > i { height:5px; } .game-screen .player-chip.is-low-energy .player-chip-progress.is-energy { opacity:1; } .game-screen .party-hud-head { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:26px; padding:5px 8px; border:1px solid rgba(180,132,237,.24); border-radius:11px; background:linear-gradient(145deg,rgba(28,24,42,.84),rgba(18,25,35,.82)); color:#e9dcf7; box-shadow:0 7px 17px rgba(20,12,35,.14),inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(10px); pointer-events:none; } .game-screen .party-hud-head > span { display:flex;align-items:baseline;gap:6px;min-width:0; } .game-screen .party-hud-head small { color:#bda5d2;font-size:5.3px;font-weight:950;letter-spacing:.09em; } .game-screen .party-hud-head b { color:#fff;font-size:7.2px;font-weight:950;font-variant-numeric:tabular-nums; } .game-screen .party-hud-head em { overflow:hidden;color:#9f89b5;font-size:5.5px;font-style:normal;font-weight:800;text-overflow:ellipsis;white-space:nowrap; } .game-screen .party-hud-member { position:relative; padding-right:24px!important; } .game-screen .party-hud-member::before { content:''; position:absolute; left:0; top:14px; bottom:14px; width:2px; border-radius:0 3px 3px 0; background:#8660ad; opacity:.36; } .game-screen .party-hud-member.is-online::before { background:#8f6fc0;opacity:.75; } .game-screen .party-hud-member.is-nearby::before { background:#58d18a;box-shadow:0 0 8px rgba(88,209,138,.34); } .game-screen .party-hud-member.is-leader::before { background:#f0c64f;box-shadow:0 0 8px rgba(240,198,79,.25); } .game-screen .party-hud-member.is-offline .party-hud-avatar { filter:grayscale(.7) saturate(.55); } .game-screen .party-hud-member.is-offline .party-hud-copy { opacity:.72; } .game-screen .party-hud-status .party-hud-relation { letter-spacing:.055em; } .game-screen .party-hud-member.is-nearby .party-hud-status > i { background:#58d18a!important;box-shadow:0 0 0 2px rgba(88,209,138,.14),0 0 7px rgba(88,209,138,.22)!important; } .game-screen .party-hud-member.is-away .party-hud-status > i { background:#9a86ae!important; } .game-screen .party-hud-lead { display:flex; align-items:center; gap:5px; min-width:0; margin-top:1px; } .game-screen .party-hud-lead > small { flex:0 0 auto; margin:0; padding:2px 4px; border-radius:5px; background:rgba(166,112,231,.11); color:#a88fc1; font-size:4.5px; font-weight:950; letter-spacing:.05em; } .game-screen .party-hud-lead > b { min-width:0; overflow:hidden; color:#e5dceb; font-size:6.1px!important; font-weight:750!important; text-overflow:ellipsis; white-space:nowrap; } .game-screen .party-hud-open { position:absolute; right:7px; top:50%; transform:translateY(-50%); color:rgba(226,207,244,.38); font:700 15px/1 system-ui; transition:transform .14s ease,color .14s ease; } .game-screen .party-hud-member:not(:disabled):hover .party-hud-open, .game-screen .party-hud-member:focus-visible .party-hud-open { transform:translate(2px,-50%);color:#fff; } .game-screen .player-stamina-hud { opacity:.84; transition:top .16s ease,opacity .18s ease,border-color .16s ease,background .16s ease,transform .18s ease; } .game-screen .player-stamina-hud::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; background:#78cb50; opacity:.8; } .game-screen .player-stamina-hud.is-full:not(.is-moving) { opacity:.66; } .game-screen .player-stamina-hud.is-moving { opacity:1;transform:translateX(2px); } .game-screen .player-stamina-hud.is-tired::before { background:#efa33c; } .game-screen .player-stamina-hud.is-critical::before { background:#e45e4f; } .game-screen .player-stamina-hud.is-critical { opacity:1; } html[data-game-theme="light"] .game-screen .player-chip-open-hint { color:rgba(58,91,110,.42); } html[data-game-theme="light"] .game-screen .player-chip:hover .player-chip-open-hint, html[data-game-theme="light"] .game-screen .player-chip:focus-visible .player-chip-open-hint { color:#167fbb;background:rgba(33,137,194,.07); } html[data-game-theme="light"] .game-screen .player-chip-meta .player-community-role { color:color-mix(in srgb,var(--role-color,#228bc7) 74%,#173f57); } html[data-game-theme="light"] .game-screen .party-hud-head { border-color:#d7c7e8; background:rgba(252,249,255,.94); color:#4b2e62; box-shadow:0 7px 18px rgba(75,47,102,.09),inset 0 1px #fff; } html[data-game-theme="light"] .game-screen .party-hud-head small { color:#8669a0; } html[data-game-theme="light"] .game-screen .party-hud-head b { color:#4c2b68; } html[data-game-theme="light"] .game-screen .party-hud-head em { color:#876f99; } html[data-game-theme="light"] .game-screen .party-hud-lead > small { background:#efe5fa;color:#7b5599; } html[data-game-theme="light"] .game-screen .party-hud-lead > b { color:#6b567c!important; } html[data-game-theme="light"] .game-screen .party-hud-open { color:rgba(87,56,112,.32); } @media (min-width:761px) { .game-screen .player-chip { width:276px; min-width:276px; min-height:82px; padding:8px 24px 8px 8px; gap:10px; border-radius:20px; } .game-screen .player-chip-avatar { width:58px; height:58px; flex:0 0 58px; border-width:2px; background-size:110% 110%; } .game-screen .player-chip-copy { gap:2px; } .game-screen #worldPlayerName { font-size:12.5px; } .game-screen #worldPlayerLevel { padding:2px 6px;font-size:6.5px; } .game-screen .player-chip-progress { grid-template-columns:29px minmax(0,1fr) 49px;gap:5px; } .game-screen .player-chip-progress > i { height:6px; } .game-screen .player-chip-progress.is-energy > i { height:4px; } .game-screen .party-hud { top:calc(max(12px,env(safe-area-inset-top)) + 92px); width:276px; max-width:276px; gap:5px; } .game-screen .party-hud-member { grid-template-columns:43px minmax(0,1fr); min-height:58px; padding:6px 24px 6px 6px!important; gap:8px; border-radius:16px; } .game-screen .party-hud-avatar { width:43px;height:43px;background-size:110% 110%; } .game-screen .party-hud-identity b { font-size:9.6px; } .game-screen .party-hud-identity em { font-size:6px; } .game-screen .party-hud-status small { font-size:4.9px; } .game-screen .player-stamina-hud { left:max(12px,env(safe-area-inset-left)); top:calc(max(12px,env(safe-area-inset-top)) + 92px + var(--party-hud-offset)); width:276px; min-height:29px; padding:4px 9px 4px 11px; border-radius:11px; } .game-screen .player-stamina-title { min-width:68px; } .game-screen .player-stamina-title small { font-size:5.3px; } .game-screen .player-stamina-title b { font-size:6.6px; } .game-screen .player-stamina-meter > i { height:5px; } .game-screen .player-stamina-meter > em { font-size:6.2px; } .game-screen .party-hud[data-count="1"] + .player-stamina-hud { --party-hud-offset:94px; } .game-screen .party-hud[data-count="2"] + .player-stamina-hud { --party-hud-offset:157px; } } @media (max-width:760px) { .game-screen .player-chip { width:min(190px,calc(100vw - 164px)); min-width:156px; min-height:70px; padding:5px 18px 5px 5px; gap:6px; border-radius:16px; } .game-screen .player-chip-avatar { width:44px;height:44px;flex:0 0 44px;background-size:112% 112%; } .game-screen #worldPlayerName { font-size:9.2px; } .game-screen #worldPlayerLevel { font-size:5px; } .game-screen .player-chip-meta { gap:3px;min-height:8px; } .game-screen .player-chip-meta .player-community-role { max-width:54px;padding:1px 3px;font-size:3.9px!important; } .game-screen .player-chip-meta .player-community-role .ui-icon { width:7px;height:7px; } .game-screen .player-connection { font-size:4.4px!important; } .game-screen .player-chip-open-hint { right:3px;width:12px;height:20px;font-size:14px; } .game-screen .party-hud { top:calc(max(8px,env(safe-area-inset-top)) + 77px); width:min(190px,calc(100vw - 164px)); max-width:190px; gap:4px; } .game-screen .party-hud-head { min-height:21px;padding:3px 6px;border-radius:9px; } .game-screen .party-hud-head small { font-size:4px; } .game-screen .party-hud-head b { font-size:5.8px; } .game-screen .party-hud-head em { font-size:4.2px; } .game-screen .party-hud-member { grid-template-columns:36px minmax(0,1fr); min-height:48px; padding:4px 19px 4px 4px!important; gap:5px; border-radius:13px; } .game-screen .party-hud-member::before { top:11px;bottom:11px; } .game-screen .party-hud-avatar { width:36px;height:36px; } .game-screen .party-hud-identity b { font-size:7.3px; } .game-screen .party-hud-identity em { font-size:4.7px; } .game-screen .party-hud-status small { font-size:3.8px; } .game-screen .party-hud-lead { gap:3px; } .game-screen .party-hud-lead > small { display:none; } .game-screen .party-hud-lead > b { font-size:4.6px!important; } .game-screen .party-hud-open { right:5px;font-size:12px; } .game-screen .player-stamina-hud { top:calc(max(8px,env(safe-area-inset-top)) + 77px + var(--party-hud-offset)); width:min(190px,calc(100vw - 164px)); min-height:23px; padding:3px 6px 3px 9px; } .game-screen .party-hud[data-count="1"] + .player-stamina-hud { --party-hud-offset:78px; } .game-screen .party-hud[data-count="2"] + .player-stamina-hud { --party-hud-offset:130px; } } @media (max-width:420px) { .game-screen .player-chip, .game-screen .party-hud, .game-screen .player-stamina-hud { width:min(182px,calc(100vw - 148px)); } .game-screen .party-hud-status small { max-width:92px; } .game-screen .player-chip-progress { grid-template-columns:17px minmax(0,1fr) 29px; } } @media (prefers-reduced-motion:reduce) { .game-screen .player-chip-open-hint, .game-screen .party-hud-open, .game-screen .player-stamina-hud, .game-screen .party-hud-member { transition:none!important;animation:none!important; } } /* v2.7.61 — trainer progression, professions, factions and clan concept */ .game-screen .side-panel.is-progression-panel, .game-screen .side-panel.is-factions-panel { width:min(920px,calc(100vw - 132px)); padding:18px; } .progression-window-v2761, .factions-window-v2761 { display:grid; gap:13px; min-width:0; color:var(--theme-text); } .progression-icon { width:24px; height:24px; display:block; } .progression-hero-v2761, .factions-hero-v2761 { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; padding:15px 16px; border:1px solid var(--theme-border); border-radius:19px; background:linear-gradient(135deg,color-mix(in srgb,var(--theme-accent) 10%,var(--theme-card)),var(--theme-card)); } .progression-hero-v2761 > span, .factions-hero-v2761 > span { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; color:var(--theme-accent); background:color-mix(in srgb,var(--theme-accent) 13%,transparent); border:1px solid color-mix(in srgb,var(--theme-accent) 24%,var(--theme-border)); } .progression-hero-v2761 > div, .factions-hero-v2761 > div { min-width:0; } .progression-hero-v2761 small, .factions-hero-v2761 small { display:block; margin-bottom:2px; font-size:8px; font-weight:900; letter-spacing:.09em; color:var(--theme-accent); } .progression-hero-v2761 h2, .factions-hero-v2761 h2 { margin:0; font-size:22px; line-height:1.05; color:var(--theme-text); } .progression-hero-v2761 p, .factions-hero-v2761 p { margin:5px 0 0; max-width:710px; font-size:10px; line-height:1.42; color:var(--theme-muted); } .progression-hero-v2761 > strong, .factions-hero-v2761 > strong { align-self:start; padding:7px 10px; border-radius:11px; font-size:9px; white-space:nowrap; color:color-mix(in srgb,var(--faction-accent,var(--theme-accent)) 84%,var(--theme-text)); border:1px solid color-mix(in srgb,var(--faction-accent,var(--theme-accent)) 30%,var(--theme-border)); background:color-mix(in srgb,var(--faction-accent,var(--theme-accent)) 11%,var(--theme-card)); } .progression-tabs-v2761 { display:grid; grid-template-columns:1fr 1fr; gap:7px; } .progression-tabs-v2761 button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 12px; border:1px solid var(--theme-border); border-radius:13px; background:var(--theme-card); color:var(--theme-muted); font:inherit; font-size:10px; font-weight:900; cursor:pointer; } .progression-tabs-v2761 button em { display:grid; place-items:center; min-width:21px; height:21px; padding:0 6px; border-radius:999px; font-style:normal; background:var(--theme-surface-soft); color:var(--theme-muted); } .progression-tabs-v2761 button.is-active { border-color:color-mix(in srgb,var(--theme-accent) 55%,var(--theme-border)); color:var(--theme-text); background:color-mix(in srgb,var(--theme-accent) 9%,var(--theme-card)); box-shadow:inset 0 -2px 0 var(--theme-accent); } .progression-tabs-v2761 button.is-active em { background:var(--theme-accent); color:white; } .progression-summary-v2761 { display:grid; grid-template-columns:repeat(3,minmax(96px,130px)) minmax(220px,1fr); gap:8px; align-items:stretch; } .progression-summary-v2761.is-mastery { grid-template-columns:repeat(4,minmax(96px,130px)) minmax(210px,1fr); } .progression-summary-v2761 > span { display:flex; flex-direction:column; justify-content:center; min-height:58px; padding:9px 11px; border:1px solid var(--theme-border); border-radius:13px; background:var(--theme-card); } .progression-summary-v2761 small { font-size:7px; color:var(--theme-muted); } .progression-summary-v2761 b { margin-top:2px; font-size:15px; color:var(--theme-text); } .progression-summary-v2761 p { margin:0; display:flex; align-items:center; padding:10px 12px; border-radius:13px; background:var(--theme-surface-soft); color:var(--theme-muted); font-size:9px; line-height:1.4; } .talent-grid-v2761 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .talent-branch-v2761, .mastery-card-v2761, .faction-card-v2761, .clan-empty-v2761, .clan-create-v2761, .clan-dashboard-v2761, .factions-footer-v2761 { border:1px solid var(--theme-border); background:var(--theme-card); border-radius:16px; } .talent-branch-v2761 { overflow:hidden; } .talent-branch-v2761 > header, .mastery-card-v2761 > header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 12px; border-bottom:1px solid var(--theme-border); background:linear-gradient(110deg,color-mix(in srgb,var(--branch-accent,var(--mastery-accent)) 12%,var(--theme-card)),var(--theme-card)); } .talent-branch-v2761 > header > i, .mastery-card-v2761 > header > i, .faction-card-v2761 > header > i, .clan-create-v2761 > header > i, .clan-dashboard-v2761 > header > i, .clan-empty-v2761 > i { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:var(--branch-accent,var(--mastery-accent,var(--faction-accent,var(--theme-accent)))); background:color-mix(in srgb,var(--branch-accent,var(--mastery-accent,var(--faction-accent,var(--theme-accent)))) 12%,transparent); } .talent-branch-v2761 header span, .mastery-card-v2761 header span { min-width:0; } .talent-branch-v2761 header small, .mastery-card-v2761 header small { display:block; font-size:7px; font-weight:900; color:var(--branch-accent,var(--mastery-accent)); } .talent-branch-v2761 header b, .mastery-card-v2761 header b { display:block; margin-top:1px; font-size:13px; color:var(--theme-text); } .talent-branch-v2761 header em, .mastery-card-v2761 header em { display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; font-style:normal; color:var(--theme-muted); } .talent-branch-v2761 header strong { padding:5px 7px; border-radius:9px; color:var(--branch-accent); background:color-mix(in srgb,var(--branch-accent) 11%,transparent); font-size:9px; } .talent-path-v2761 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:9px; } .talent-node-v2761 { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:7px; min-height:48px; padding:6px 7px; text-align:left; border:1px solid var(--theme-border); border-radius:11px; background:var(--theme-surface-soft); color:var(--theme-muted); font:inherit; } .talent-node-v2761 > i, .mastery-rank-v2761 > i { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; border:1px solid var(--theme-border); background:var(--theme-card); font-size:8px; font-style:normal; font-weight:950; color:var(--theme-muted); flex:0 0 auto; } .talent-node-v2761 b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; color:var(--theme-text); } .talent-node-v2761 small { display:block; margin-top:2px; font-size:6.7px; line-height:1.25; color:var(--theme-muted); } .talent-node-v2761.is-unlocked { border-color:color-mix(in srgb,var(--branch-accent) 40%,var(--theme-border)); background:color-mix(in srgb,var(--branch-accent) 8%,var(--theme-card)); } .talent-node-v2761.is-unlocked > i { color:white; border-color:transparent; background:var(--branch-accent); } .talent-node-v2761.is-next:not(:disabled) { cursor:pointer; border-color:color-mix(in srgb,var(--branch-accent) 65%,var(--theme-border)); box-shadow:0 0 0 2px color-mix(in srgb,var(--branch-accent) 9%,transparent); } .talent-node-v2761.is-next:not(:disabled):hover { transform:translateY(-1px); background:color-mix(in srgb,var(--branch-accent) 12%,var(--theme-card)); } .talent-node-v2761:disabled { opacity:.62; cursor:default; } .progression-footer-v2761 { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:3px 2px; color:var(--theme-muted); font-size:8px; } .progression-footer-v2761 button, .clan-dashboard-v2761 footer button { padding:7px 10px; border:1px solid var(--theme-border); border-radius:10px; background:var(--theme-surface-soft); color:var(--theme-muted); font:inherit; font-size:8px; font-weight:850; cursor:pointer; } .mastery-grid-v2761 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .mastery-card-v2761 { overflow:hidden; } .mastery-card-v2761 > header { grid-template-columns:auto minmax(0,1fr); } .mastery-path-v2761 { display:grid; gap:5px; padding:9px; } .mastery-rank-v2761 { display:flex; align-items:center; gap:8px; min-height:34px; padding:4px 6px; border:1px solid var(--theme-border); border-radius:9px; background:var(--theme-surface-soft); color:var(--theme-muted); font:inherit; font-size:8px; text-align:left; } .mastery-rank-v2761.is-unlocked { border-color:color-mix(in srgb,var(--mastery-accent) 40%,var(--theme-border)); color:var(--theme-text); background:color-mix(in srgb,var(--mastery-accent) 8%,var(--theme-card)); } .mastery-rank-v2761.is-unlocked > i { color:white; border-color:transparent; background:var(--mastery-accent); } .mastery-rank-v2761.is-next:not(:disabled) { cursor:pointer; border-color:color-mix(in srgb,var(--mastery-accent) 65%,var(--theme-border)); } .mastery-card-v2761 > footer { display:grid; gap:2px; padding:8px 10px 10px; border-top:1px solid var(--theme-border); } .mastery-card-v2761 > footer b { font-size:8px; color:var(--theme-text); } .mastery-card-v2761 > footer small { font-size:7px; color:var(--theme-muted); } .faction-grid-v2761 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .faction-card-v2761 { display:grid; gap:9px; padding:12px; overflow:hidden; position:relative; } .faction-card-v2761::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--faction-accent); opacity:.7; } .faction-card-v2761.is-selected { border-color:color-mix(in srgb,var(--faction-accent) 55%,var(--theme-border)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--faction-accent) 14%,transparent); } .faction-card-v2761 > header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:9px; align-items:center; } .faction-card-v2761 header span { min-width:0; } .faction-card-v2761 header small { display:block; font-size:7px; font-weight:950; color:var(--faction-accent); } .faction-card-v2761 header b { display:block; margin-top:1px; font-size:13px; color:var(--theme-text); } .faction-card-v2761 header em { display:block; margin-top:1px; font-size:7px; font-style:normal; color:var(--theme-muted); } .faction-card-v2761 header strong { padding:5px 7px; border-radius:999px; font-size:7px; color:var(--faction-accent); background:color-mix(in srgb,var(--faction-accent) 12%,transparent); } .faction-card-v2761 > p { margin:0; font-size:10px; font-weight:800; color:var(--theme-text); } .faction-playstyle-v2761 { display:grid; gap:3px; padding:8px 9px; border-radius:11px; background:color-mix(in srgb,var(--faction-accent) 6%,var(--theme-surface-soft)); } .faction-playstyle-v2761 small { font-size:6.5px; font-weight:900; color:var(--faction-accent); } .faction-playstyle-v2761 span { font-size:8px; line-height:1.35; color:var(--theme-muted); } .faction-card-v2761 > footer { display:flex; align-items:center; justify-content:space-between; gap:9px; } .faction-card-v2761 > footer > span { flex:1; font-size:7px; line-height:1.3; color:var(--theme-muted); } .faction-card-v2761 > footer button { flex:0 0 auto; max-width:170px; min-height:31px; padding:6px 9px; border:1px solid color-mix(in srgb,var(--faction-accent) 35%,var(--theme-border)); border-radius:10px; background:color-mix(in srgb,var(--faction-accent) 11%,var(--theme-card)); color:var(--faction-accent); font:inherit; font-size:7px; font-weight:900; cursor:pointer; } .faction-card-v2761 > footer button:disabled { opacity:.56; cursor:default; } .clan-empty-v2761 { display:flex; align-items:center; gap:12px; padding:14px; } .clan-empty-v2761 > div { min-width:0; } .clan-empty-v2761 small { display:block; font-size:7px; font-weight:900; color:var(--theme-accent); } .clan-empty-v2761 b { display:block; margin-top:2px; font-size:13px; color:var(--theme-text); } .clan-empty-v2761 p { margin:4px 0 0; font-size:8px; color:var(--theme-muted); } .clan-create-v2761, .clan-dashboard-v2761 { padding:13px; } .clan-create-v2761 > header, .clan-dashboard-v2761 > header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; } .clan-create-v2761 > header { grid-template-columns:auto minmax(0,1fr); } .clan-create-v2761 header small, .clan-dashboard-v2761 header small { display:block; font-size:7px; font-weight:900; color:var(--faction-accent); } .clan-create-v2761 h3, .clan-dashboard-v2761 h3 { margin:1px 0 0; font-size:16px; color:var(--theme-text); } .clan-create-v2761 header p, .clan-dashboard-v2761 header p { margin:2px 0 0; font-size:8px; color:var(--theme-muted); } .clan-dashboard-v2761 header > strong { padding:6px 8px; border-radius:10px; background:color-mix(in srgb,var(--faction-accent) 10%,transparent); color:var(--faction-accent); font-size:9px; } .clan-create-fields-v2761 { display:grid; grid-template-columns:minmax(0,1fr) 110px auto; gap:8px; margin-top:11px; } .clan-create-fields-v2761 label { display:grid; gap:4px; } .clan-create-fields-v2761 label > span { font-size:7px; color:var(--theme-muted); } .clan-create-fields-v2761 input { width:100%; min-height:38px; padding:0 10px; border:1px solid var(--theme-border); border-radius:10px; background:var(--theme-input); color:var(--theme-text); font:inherit; font-size:9px; outline:none; } .clan-create-fields-v2761 input:focus { border-color:var(--faction-accent)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--faction-accent) 10%,transparent); } .clan-create-fields-v2761 > button { align-self:end; min-height:38px; padding:0 13px; border:0; border-radius:10px; background:var(--faction-accent); color:white; font:inherit; font-size:8px; font-weight:950; cursor:pointer; } .clan-create-note-v2761 { display:block; margin-top:8px; font-size:7px; line-height:1.35; color:var(--theme-muted); } .clan-stats-v2761 { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:11px; } .clan-stats-v2761 > span { display:grid; gap:2px; padding:8px 9px; border-radius:10px; background:var(--theme-surface-soft); } .clan-stats-v2761 small { font-size:6.5px; color:var(--theme-muted); } .clan-stats-v2761 b { font-size:11px; color:var(--theme-text); } .clan-module-grid-v2761 { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:8px; } .clan-module-grid-v2761 article { display:grid; gap:2px; min-height:70px; padding:8px; border:1px solid var(--theme-border); border-radius:11px; background:var(--theme-surface-soft); } .clan-module-grid-v2761 article i { font-style:normal; font-size:16px; color:var(--faction-accent); } .clan-module-grid-v2761 article b { font-size:8px; color:var(--theme-text); } .clan-module-grid-v2761 article small { font-size:6.5px; line-height:1.25; color:var(--theme-muted); } .clan-dashboard-v2761 > footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; } .clan-dashboard-v2761 > footer span { font-size:7px; color:var(--theme-muted); } .factions-footer-v2761 { display:flex; align-items:center; gap:8px; padding:10px 12px; } .factions-footer-v2761 b { flex:0 0 auto; font-size:8px; color:var(--theme-text); } .factions-footer-v2761 span { font-size:8px; color:var(--theme-muted); } @media (max-width:1050px) { .progression-summary-v2761, .progression-summary-v2761.is-mastery { grid-template-columns:repeat(2,minmax(0,1fr)); } .progression-summary-v2761 p { grid-column:1/-1; } .mastery-grid-v2761 { grid-template-columns:1fr; } } @media (max-width:760px) { .game-screen .side-panel.is-progression-panel, .game-screen .side-panel.is-factions-panel { inset:auto 6px calc(68px + env(safe-area-inset-bottom)) 6px; width:auto; max-height:calc(100% - 78px - env(safe-area-inset-top)); padding:10px; border-radius:20px; } .progression-window-v2761,.factions-window-v2761 { gap:9px; } .progression-hero-v2761,.factions-hero-v2761 { grid-template-columns:auto minmax(0,1fr); padding:11px; } .progression-hero-v2761 > strong,.factions-hero-v2761 > strong { grid-column:2; justify-self:start; } .progression-hero-v2761 h2,.factions-hero-v2761 h2 { font-size:18px; } .talent-grid-v2761,.faction-grid-v2761 { grid-template-columns:1fr; } .talent-path-v2761 { grid-template-columns:1fr; } .progression-summary-v2761,.progression-summary-v2761.is-mastery { grid-template-columns:repeat(2,minmax(0,1fr)); } .progression-footer-v2761,.factions-footer-v2761,.clan-dashboard-v2761 > footer { align-items:flex-start; flex-direction:column; } .clan-create-fields-v2761 { grid-template-columns:minmax(0,1fr) 92px; } .clan-create-fields-v2761 > button { grid-column:1/-1; } .clan-module-grid-v2761 { grid-template-columns:repeat(2,1fr); } .faction-card-v2761 > footer { align-items:flex-start; flex-direction:column; } .faction-card-v2761 > footer button { width:100%; max-width:none; } } /* v2.7.62 — explicit sprint, analog mobile sprint ring and movement feedback */ .game-screen .player-stamina-hud.is-sprinting { opacity:1; transform:translateX(3px); border-color:rgba(94,196,255,.42); box-shadow:0 10px 28px rgba(0,27,43,.24),0 0 0 1px rgba(90,199,255,.08) inset; } .game-screen .player-stamina-hud.is-sprinting::before { background:#4fc3ff; box-shadow:0 0 12px rgba(79,195,255,.55); } .game-screen .player-stamina-hud.is-sprinting .player-stamina-title small { color:#87dcff; text-shadow:0 0 8px rgba(79,195,255,.28); } .game-screen .player-stamina-hud.is-sprinting .player-stamina-meter > i > b { box-shadow:0 0 12px rgba(118,215,70,.42); } @media (max-width:800px) { .joystick { --joystick-pressure:0; width:124px; height:124px; border:2px solid rgba(226,246,255,.66); background:radial-gradient(circle,rgba(13,83,123,.18) 0 34%,rgba(4,45,74,.5) 68%,rgba(2,33,57,.56) 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 30px rgba(0,25,45,.22); backdrop-filter:blur(5px); } .joystick::before { content:''; position:absolute; inset:8px; border:1px dashed rgba(220,244,255,.28); border-radius:50%; opacity:calc(.25 + var(--joystick-pressure) * .55); transform:scale(calc(.94 + var(--joystick-pressure) * .06)); transition:opacity .12s ease,border-color .12s ease,transform .12s ease; } .joystick > span { inset:32px; border-color:rgba(232,249,255,.26); } .joystick > i { width:40px; height:40px; border-color:rgba(246,253,255,.9); background:linear-gradient(145deg,#28b4ff,#0b70c2); box-shadow:0 8px 18px rgba(0,30,54,.34),inset 0 1px rgba(255,255,255,.28); transition:background .12s ease,border-color .12s ease,box-shadow .12s ease; } .joystick > em { position:absolute; left:50%; top:-17px; min-width:44px; padding:4px 8px; transform:translateX(-50%) translateY(4px); border:1px solid rgba(255,255,255,.5); border-radius:999px; background:rgba(3,41,66,.82); color:#dff6ff; box-shadow:0 6px 16px rgba(0,28,48,.22); font-size:7px; font-style:normal; font-weight:1000; letter-spacing:.12em; opacity:0; transition:opacity .12s ease,transform .12s ease,background .12s ease,color .12s ease; } .joystick.is-sprinting { border-color:rgba(255,220,91,.92); box-shadow:0 0 0 5px rgba(255,207,62,.11),0 12px 30px rgba(0,25,45,.28),inset 0 0 22px rgba(255,209,65,.1); animation:mobile-sprint-ring .72s ease-in-out infinite alternate; } .joystick.is-sprinting::before { border-color:rgba(255,225,112,.62);opacity:.95; } .joystick.is-sprinting > i { border-color:#fff7ce; background:linear-gradient(145deg,#ffd957,#f0a823); box-shadow:0 0 0 5px rgba(255,212,66,.15),0 8px 18px rgba(0,30,54,.35); } .joystick.is-sprinting > em { opacity:1;transform:translateX(-50%) translateY(0); } .joystick.is-exhausted.is-sprinting { border-color:rgba(242,112,87,.9); box-shadow:0 0 0 5px rgba(230,90,66,.1),0 12px 30px rgba(0,25,45,.25); animation:none; } .joystick.is-exhausted.is-sprinting::before { border-color:rgba(247,139,116,.6); } .joystick.is-exhausted.is-sprinting > i { background:linear-gradient(145deg,#ef8b67,#ca5146);border-color:#ffe4dc; } .joystick.is-exhausted.is-sprinting > em { background:rgba(112,42,35,.9);color:#ffe6df; } } @keyframes mobile-sprint-ring { from { transform:translate(-50%,-50%) scale(1); } to { transform:translate(-50%,-50%) scale(1.035); } } /* v2.8.0 — authoritative PvE / PvP / co-op combat surface */ .game-screen .battle-panel { --battle-accent:#41c8f5; --battle-positive:#72de78; --battle-warning:#ffd263; left:50%; right:auto; bottom:18px; width:min(1040px,calc(100% - 32px)); max-height:min(720px,calc(100% - 34px)); padding:14px; overflow:auto; transform:translate(-50%,24px) scale(.985); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 12px; border:1px solid rgba(120,214,248,.25); border-radius:24px; background:linear-gradient(145deg,rgba(5,25,39,.97),rgba(7,38,55,.96) 60%,rgba(9,31,48,.98)); box-shadow:0 30px 80px rgba(0,12,23,.58),inset 0 1px rgba(255,255,255,.08),0 0 0 1px rgba(0,0,0,.18); color:#f2fbff; backdrop-filter:blur(22px) saturate(1.15); transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility .2s; } .game-screen .battle-panel.is-open {pointer-events:auto;transform:translate(-50%,0) scale(1); } .game-screen .battle-panel.is-pvp { --battle-accent:#ff737d;background:linear-gradient(145deg,rgba(38,12,26,.98),rgba(54,20,34,.97) 58%,rgba(25,19,38,.98));border-color:rgba(255,126,145,.3); } .game-screen .battle-panel.is-coop { --battle-accent:#ae8bff;background:linear-gradient(145deg,rgba(20,16,47,.98),rgba(29,34,67,.97) 58%,rgba(10,35,52,.98));border-color:rgba(176,143,255,.34); } .battle-panel .combat-icon,.battle-panel .skill-damage-icon { width:18px;height:18px;display:inline-block;flex:0 0 auto;vertical-align:middle; } .battle-panel .battle-status { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:2px 2px 8px;border-bottom:1px solid rgba(255,255,255,.08); } .battle-status > span {display:grid;gap:3px; } .battle-status > span > small { display:flex;align-items:center;gap:6px;color:rgba(213,237,247,.62);font-size:9px;font-weight:900;letter-spacing:.12em; } .battle-status > span > small > i { display:inline-grid;color:var(--battle-accent); } .battle-status > span > small > b { padding:3px 7px;border:1px solid color-mix(in srgb,var(--battle-accent) 42%,transparent);border-radius:999px;background:color-mix(in srgb,var(--battle-accent) 12%,transparent);color:var(--battle-accent);font-size:8px; } .battle-status > span > strong {font-size:17px;letter-spacing:.01em; } .battle-controls { display:flex;align-items:center;gap:6px; } .battle-controls button {padding:0 12px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);color:#dbedf5;font-size:9px;font-weight:900;letter-spacing:.06em;transition:transform .14s ease,border-color .14s ease,background .14s ease; } .battle-controls button:hover { transform:translateY(-1px);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.1); } .battle-controls #battleHelp { width:34px;padding:0;border-radius:50%;color:var(--battle-accent);font-size:15px; } .battle-controls #autoBattle.is-active { border-color:color-mix(in srgb,var(--battle-accent) 52%,transparent);background:color-mix(in srgb,var(--battle-accent) 18%,transparent);color:#fff; } .battle-team-strip,.battle-target-strip { grid-column:1/-1;display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin; } .battle-team-member,.battle-target-strip > button { min-width:168px;display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.045);color:inherit;text-align:left; } .battle-target-strip > button { cursor:pointer;transition:transform .14s ease,border-color .14s ease,background .14s ease; } .battle-target-strip > button:hover:not(:disabled) { transform:translateY(-2px);border-color:color-mix(in srgb,var(--battle-accent) 45%,transparent); } .battle-target-strip > button.is-selected { border-color:var(--battle-accent);background:color-mix(in srgb,var(--battle-accent) 14%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--battle-accent) 10%,transparent); } .battle-target-strip > button.is-selected > svg { color:var(--battle-accent);animation:battle-target-pulse 1.2s ease-in-out infinite; } .battle-team-member.is-ko,.battle-target-strip > button.is-ko { filter:grayscale(.85);opacity:.48; } .battle-team-member > strong { margin-left:auto;padding:3px 5px;border-radius:5px;background:rgba(173,139,255,.18);color:#cdb9ff;font-size:8px; } .battle-team-portrait,.battle-target-portrait { width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.08);overflow:hidden; } .battle-team-portrait img,.battle-target-portrait img { width:88%;height:88%;object-fit:contain; } .battle-team-member > span,.battle-target-strip > button > span { min-width:0;display:grid;flex:1;gap:1px; } .battle-team-member small,.battle-target-strip small { color:var(--battle-accent);font-size:7px;font-weight:900;letter-spacing:.11em; } .battle-team-member b,.battle-target-strip b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px; } .battle-team-member span > i,.battle-target-strip span > i { height:3px;margin-top:3px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.09); } .battle-team-member span > i em,.battle-target-strip span > i em { display:block;height:100%;border-radius:inherit;background:var(--battle-positive);transition:width .25s ease; } .battle-health { grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; } .battle-health > article { min-width:0;padding:11px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); } .battle-health > article > span,.battle-stamina > span,.battle-exp > span { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px; } .battle-health > article > span b { font-size:12px; } .battle-health > article > span small,.battle-stamina small,.battle-exp small { color:rgba(225,242,249,.66);font-size:9px;font-weight:800; } .battle-hp-bar,.battle-stamina > i,.battle-exp > i { position:relative;display:block;height:8px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.09);box-shadow:inset 0 1px 2px rgba(0,0,0,.35); } .battle-hp-bar > em { position:absolute;inset:0 auto 0 0;display:block;border-radius:inherit;background:linear-gradient(90deg,#41c86c,#86e87a);box-shadow:0 0 12px rgba(94,222,112,.3);transition:width .25s ease; } .enemy-health .battle-hp-bar > em { background:linear-gradient(90deg,#ff6b6e,#ffac67);box-shadow:0 0 12px rgba(255,108,94,.28); } .battle-hp-bar > strong { position:absolute;inset:0 auto 0 0;z-index:2;display:block;border-radius:inherit;background:repeating-linear-gradient(115deg,rgba(105,207,255,.95) 0 5px,rgba(159,227,255,.9) 5px 8px);box-shadow:0 0 9px rgba(86,199,255,.5);transition:width .2s ease; } .battle-stamina,.battle-exp { margin-top:7px; } .battle-stamina > span,.battle-exp > span { margin-bottom:3px; } .battle-stamina > span b,.battle-exp > span b { color:#77d7ff;font-size:7px;letter-spacing:.1em; } .battle-stamina > i,.battle-exp > i { height:4px; } .battle-stamina > i em { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3faef4,#72e0ff);transition:width .22s ease; } .battle-exp > i em { display:block;height:100%;border-radius:inherit;background:#b78cff;transition:width .22s ease; } .battle-statuses { min-height:0;display:flex;flex-wrap:wrap;gap:4px;margin-top:6px; } .battle-status-chip { display:flex;align-items:center;gap:3px;padding:2px 5px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(0,0,0,.18);font-style:normal; } .battle-status-chip svg { width:11px;height:11px;color:var(--battle-warning); } .battle-status-chip b { font-size:7px; }.battle-status-chip small { color:rgba(255,255,255,.65);font-size:7px; } .battle-basic { grid-column:1;display:grid;grid-template-columns:42px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:1px 9px;min-height:56px;padding:7px 10px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.03));color:#eefaff;text-align:left; } .battle-basic > span { grid-row:1/3;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.08);color:var(--battle-accent); } .battle-basic > span svg { width:23px;height:23px; }.battle-basic > b { font-size:10px; }.battle-basic > small { color:rgba(224,240,247,.55);font-size:8px; } .battle-basic > em { grid-column:3;grid-row:1/3;padding:4px 6px;border-radius:6px;background:rgba(83,210,124,.13);color:#86e5a5;font-size:7px;font-style:normal;font-weight:900; } .battle-basic.is-queued { border-color:var(--battle-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--battle-accent) 10%,transparent); } .battle-skills { grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; } .battle-skills.is-hidden { display:none; } .battle-skills > button { position:relative;min-width:0;min-height:78px;display:grid;grid-template-columns:50px minmax(0,1fr);align-items:center;gap:8px;padding:8px;border:1px solid rgba(255,255,255,.11);border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));color:#f4fbff;text-align:left;overflow:hidden;transition:transform .14s ease,border-color .14s ease,filter .14s ease; } .battle-skills > button:hover:not(:disabled) { transform:translateY(-2px);border-color:color-mix(in srgb,var(--battle-accent) 45%,transparent); } .battle-skills > button > .skill-icon { width:50px;height:50px;display:block;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.06); } .battle-skills > button > kbd { position:absolute;left:5px;top:5px;z-index:3;min-width:19px;padding:2px 4px;border:1px solid rgba(255,255,255,.28);border-radius:5px;background:rgba(0,12,23,.8);color:#fff;font:900 8px/1.2 inherit;text-align:center;box-shadow:none; } .battle-skills > button > span { min-width:0;display:grid;gap:5px; } .battle-skills > button > span b { min-width:0;font-size:10px;line-height:1.2; } .battle-skills > button > span b mark { display:inline-block;margin-left:4px;padding:2px 4px;border-radius:4px;background:rgba(255,191,75,.13);color:#ffc975;font-size:6px;vertical-align:middle; } .battle-skills > button > span small { display:flex;align-items:center;gap:3px;color:rgba(222,239,247,.58);font-size:7px;line-height:1.3; } .battle-skills > button > em { position:absolute;right:6px;top:6px;padding:3px 5px;border-radius:5px;background:rgba(76,204,118,.12);color:#80dda0;font-size:6px;font-style:normal;font-weight:900; } .battle-skills > button.is-queued { border-color:var(--battle-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--battle-accent) 13%,transparent);animation:battle-skill-queued .7s ease-in-out infinite alternate; } .battle-skills > button:disabled { cursor:not-allowed;filter:saturate(.55);opacity:.58; }.battle-skills > button.is-no-stamina { border-color:rgba(84,158,197,.16); } .battle-decision,.capture-panel { grid-column:1/-1; }.battle-decision:not(.is-open),.capture-panel:not(.is-open) { display:none; } .battle-footer { grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.75fr);gap:12px;padding-top:3px;border-top:1px solid rgba(255,255,255,.06); } .battle-footer > p { margin:0;align-self:center;color:rgba(224,241,248,.72);line-height:1.45; } .battle-footer > ol { max-height:54px;margin:0;padding:0;overflow:auto;list-style:none;display:grid;gap:3px; } .battle-footer > ol li { display:flex;justify-content:space-between;gap:8px;color:rgba(215,234,242,.57);font-size:7px; }.battle-footer > ol b { color:#eaf8ff;font-size:8px; } body[data-ui-theme="light"] .game-screen .battle-panel { background:linear-gradient(145deg,rgba(246,252,255,.97),rgba(226,242,250,.97));border-color:rgba(43,130,166,.28);box-shadow:0 30px 80px rgba(18,65,84,.28),inset 0 1px #fff;color:#153b4d; } body[data-ui-theme="light"] .battle-health > article,body[data-ui-theme="light"] .battle-skills > button,body[data-ui-theme="light"] .battle-basic,body[data-ui-theme="light"] .battle-team-member,body[data-ui-theme="light"] .battle-target-strip > button { background:rgba(255,255,255,.72);border-color:rgba(27,93,120,.13);color:#173b4b; } @keyframes battle-target-pulse { 50% { transform:scale(1.13);filter:drop-shadow(0 0 6px currentColor); } } @keyframes battle-skill-queued { to { box-shadow:0 0 0 3px color-mix(in srgb,var(--battle-accent) 18%,transparent),0 0 20px color-mix(in srgb,var(--battle-accent) 13%,transparent); } } @media (max-width:800px) { .game-screen .battle-panel { left:4px;right:4px;bottom:calc(4px + env(safe-area-inset-bottom));width:auto;max-height:min(88svh,760px);padding:9px;border-radius:19px;transform:translateY(30px);grid-template-columns:1fr;gap:7px;overscroll-behavior:contain; } .game-screen .battle-panel.is-open { transform:translateY(0); } .battle-panel .battle-status,.battle-team-strip,.battle-target-strip,.battle-health,.battle-skills,.battle-decision,.capture-panel,.battle-footer { grid-column:1; } .battle-status > span > strong { max-width:48vw;font-size:13px; }.battle-status > span > small { font-size:7px; } .battle-controls { gap:4px; }.battle-controls button { min-height:31px;padding:0 8px;font-size:7px; }.battle-controls #battleHelp { width:31px; } .battle-team-strip,.battle-target-strip { margin-inline:-2px;padding:1px 2px 3px; }.battle-team-member,.battle-target-strip > button { min-width:145px;padding:5px 7px; } .battle-team-portrait,.battle-target-portrait { width:29px;height:29px; }.battle-team-member b,.battle-target-strip b { font-size:9px; } .battle-health { grid-template-columns:repeat(2,minmax(0,1fr));gap:6px; }.battle-health > article { padding:7px;border-radius:12px; } .battle-health > article > span b { font-size:9px; }.battle-health > article > span small { font-size:7px; }.battle-stamina,.battle-exp { margin-top:5px; } .battle-statuses { display:none; } .battle-basic { position:relative;grid-column:1;min-height:48px;grid-template-columns:35px minmax(0,1fr) auto;padding:5px 7px; }.battle-basic > span { width:34px;height:34px; }.battle-basic > b { font-size:9px; } .battle-skills { grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-left:min(13vw,54px); } .battle-skills > button { min-height:62px;grid-template-columns:42px minmax(0,1fr);padding:6px; }.battle-skills > button > .skill-icon { width:42px;height:42px;border-radius:10px; }.battle-skills > button > span b { font-size:9px; }.battle-skills > button > span small { font-size:6px; }.battle-skills > button > span small .skill-damage-icon { display:none; } .battle-footer { grid-template-columns:1fr;padding-top:2px; }.battle-footer > p { font-size:8px; }.battle-footer > ol { display:none; } } @media (max-width:430px) { .battle-status > span > strong { max-width:38vw;font-size:11px; } .battle-controls #battleHelp { display:none; }.battle-controls button { padding-inline:6px; } .battle-health > article > span { align-items:flex-start;flex-direction:column;gap:1px; } .battle-team-strip { display:none; }.battle-target-strip > button { min-width:132px; } .battle-skills { padding-left:36px; }.battle-skills > button { grid-template-columns:38px minmax(0,1fr); }.battle-skills > button > .skill-icon { width:38px;height:38px; }.battle-skills > button > span small { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } } @media (prefers-reduced-motion:reduce) { .game-screen .battle-panel,.battle-skills > button,.battle-target-strip > button { transition:none!important; } .battle-target-strip > button.is-selected > svg,.battle-skills > button.is-queued { animation:none!important; } } /* v2.9.0 — arena-first battle HUD and server-scored capture gesture */ .game-screen .battle-panel { --battle-stage-width:min(1120px,calc(100vw - 44px)); --battle-deck-width:min(1120px,calc(100vw - 44px)); --battle-text:#f5fbff; --battle-muted:#a9c1cf; --battle-glass:rgba(7,30,43,.88); --battle-card:rgba(10,38,52,.9); position:absolute; inset:0; z-index:94; width:auto; max-height:none; padding:0; overflow:hidden; display:block; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--battle-text); opacity:0; visibility:hidden; pointer-events:none; transform:none; backdrop-filter:none; transition:opacity .24s ease,visibility .24s; } .game-screen .battle-panel.is-open { opacity:1;visibility:visible;pointer-events:none;transform:none; } .game-screen .battle-panel.is-pvp,.game-screen .battle-panel.is-coop { background:transparent; } .battle-panel::before { content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(2,19,30,.34),transparent 24%,transparent 68%,rgba(2,16,25,.5)); } .battle-stage { position:absolute;left:50%;top:68px;bottom:232px;min-height:310px; transform:translateX(-50%);overflow:hidden;border:1px solid rgba(226,249,255,.72);border-radius:30px; box-shadow:0 22px 60px rgba(0,20,31,.34),inset 0 1px rgba(255,255,255,.62),inset 0 -70px 90px rgba(3,27,35,.08); pointer-events:none; } .battle-stage::before { content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 5px rgba(255,255,255,.08);pointer-events:none; } .battle-stage::after { content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 67% 43%,transparent 0 20%,rgba(1,26,35,.03) 56%,rgba(2,18,28,.18));pointer-events:none; } .battle-status { position:absolute;z-index:7;left:50%;top:12px;width:var(--battle-stage-width);min-height:48px; transform:translateX(-50%);padding:6px 11px!important;border:1px solid rgba(222,245,252,.22)!important;border-radius:17px!important; background:rgba(4,28,42,.76);box-shadow:0 12px 30px rgba(0,16,27,.22),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(16px) saturate(1.12); pointer-events:auto; } .battle-status > span > small { color:#a9c7d4;font-size:8px; }.battle-status > span > strong { color:#f5fbff;font-size:16px; } .battle-controls button { min-width:44px;min-height:38px;border-color:rgba(228,247,253,.15);background:rgba(255,255,255,.065);color:#eaf8fd; } .battle-controls #cancelBattle { color:#ffd9d6; }.battle-controls #autoBattle.is-active { background:linear-gradient(180deg,color-mix(in srgb,var(--battle-accent) 30%,transparent),color-mix(in srgb,var(--battle-accent) 14%,transparent)); } .battle-turn-chip { position:absolute;z-index:4;left:50%;top:12px;display:flex;align-items:center;gap:8px;transform:translateX(-50%); min-height:36px;padding:5px 12px;border:1px solid rgba(255,255,255,.68);border-radius:999px;background:rgba(250,253,249,.88);color:#1b536b;box-shadow:0 8px 22px rgba(23,88,106,.18);backdrop-filter:blur(10px); } .battle-turn-chip small { font-size:7px;font-weight:950;letter-spacing:.1em;color:#299dcc; }.battle-turn-chip b { font-size:9px;white-space:nowrap; } .battle-health { position:absolute;z-index:6;left:50%;top:68px;bottom:232px;height:auto;transform:translateX(-50%);display:block;pointer-events:none; } .battle-health > article { position:absolute;width:min(310px,31vw);padding:12px 13px;border:1px solid rgba(255,255,255,.72);border-radius:19px; background:rgba(249,253,251,.91);color:#183f52;box-shadow:0 12px 30px rgba(20,76,92,.18),inset 0 1px #fff;backdrop-filter:blur(13px); } .battle-health > .enemy-health { right:18px;top:62px; }.battle-health > .ally-health { left:18px;bottom:18px; } .battle-health > article > span b { color:#153f55;font-size:13px; }.battle-health > article > span small,.battle-health .battle-stamina small,.battle-health .battle-exp small { color:#56788a; } .battle-health .battle-hp-bar,.battle-health .battle-stamina > i,.battle-health .battle-exp > i { background:rgba(30,78,96,.12); } .battle-health .battle-status-chip { border-color:rgba(21,91,117,.15);background:rgba(37,117,145,.07);color:#2d6075; } .battle-team-strip,.battle-target-strip { position:absolute;z-index:8;left:50%;top:116px;width:min(520px,calc(var(--battle-stage-width) - 650px));transform:translateX(-50%);justify-content:center;pointer-events:auto; } .battle-team-strip:empty,.battle-target-strip:empty,.battle-target-strip[hidden] { display:none; } .battle-team-member,.battle-target-strip > button { background:rgba(4,29,42,.76);border-color:rgba(226,247,253,.2);box-shadow:0 8px 22px rgba(0,20,32,.18);backdrop-filter:blur(10px); } .battle-command-deck { position:absolute;z-index:9;left:50%;bottom:12px;min-height:204px;transform:translateX(-50%); display:grid;grid-template-columns:190px minmax(0,1fr);grid-template-rows:auto auto;gap:8px 10px;padding:11px; border:1px solid rgba(220,245,253,.24);border-radius:24px;background:linear-gradient(145deg,rgba(6,31,45,.91),rgba(7,43,58,.88)); box-shadow:0 24px 64px rgba(0,17,28,.38),inset 0 1px rgba(255,255,255,.1);backdrop-filter:blur(22px) saturate(1.15);pointer-events:auto; transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s ease; } .battle-command-deck .battle-basic {min-height:78px; } .battle-command-deck .battle-decision,.battle-command-deck .capture-panel,.battle-command-deck .battle-footer { grid-column:1/-1; } .battle-command-deck .battle-footer { grid-row:2; } .battle-basic,.battle-skills > button { min-height:76px;border-color:rgba(234,249,255,.13);background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035)); } .battle-basic:focus-visible,.battle-skills > button:focus-visible,.battle-controls button:focus-visible,.capture-balls button:focus-visible,.capture-throw:focus-visible { outline:3px solid #fff;outline-offset:3px; } .battle-skills > button { min-height:76px; }.battle-skills > button > .skill-icon { width:52px;height:52px; } .battle-skills > button > span .skill-summary { display:block;overflow:hidden;color:rgba(213,235,244,.48);font-size:6px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap; } .battle-skills > button.is-queued::after { content:'';position:absolute;inset:0;border-radius:inherit;border:2px solid var(--battle-accent);pointer-events:none; } .battle-decision { min-height:86px;grid-template-columns:minmax(0,1fr) minmax(118px,.22fr) minmax(118px,.22fr);padding:12px 14px;border:1px solid rgba(255,218,98,.46);border-radius:17px;background:linear-gradient(135deg,rgba(104,75,10,.68),rgba(43,41,24,.72)); } .battle-decision small { color:#ffd86a;font-size:8px; }.battle-decision b { margin-top:3px;color:#fff;font-size:12px; }.battle-decision button { min-height:48px;border-radius:13px;font-size:9px; } .battle-decision #beginCapture { background:linear-gradient(180deg,#ed6657,#ca403c);box-shadow:0 8px 18px rgba(207,64,57,.22); } .capture-panel { position:relative;display:none;grid-template-columns:190px minmax(0,1fr);align-items:center;gap:12px;min-height:92px;margin:0;padding:10px 12px;overflow:visible;border:1px solid rgba(133,219,250,.25);border-radius:17px;background:rgba(5,31,44,.55);box-shadow:none; } .capture-panel.is-open { display:grid; }.capture-panel::before,.capture-panel::after { display:none!important; } .capture-copy { display:grid;gap:2px; }.capture-copy small { color:#6fd6ff;font-size:7px;font-weight:950;letter-spacing:.12em; }.capture-copy b { color:#f2fbff;font-size:12px; }.capture-copy em { color:#9bb8c6;font-size:7px;font-style:normal; } .capture-balls { display:flex;gap:8px;overflow-x:auto;padding:2px 2px 5px;scroll-snap-type:x proximity; } .capture-balls button { flex:0 0 150px;min-width:0;min-height:64px;display:grid;grid-template-columns:45px minmax(0,1fr) auto;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(229,248,255,.14);border-radius:14px;background:rgba(255,255,255,.06);color:#effaff;text-align:left;scroll-snap-align:start; } .capture-balls button:hover { transform:translateY(-1px);border-color:rgba(100,211,251,.54); }.capture-balls button.is-selected { border-color:#61d0fb;background:rgba(74,194,239,.16);box-shadow:0 0 0 2px rgba(75,200,245,.1); } .capture-balls .capture-ball-icon { width:43px;height:43px; }.capture-balls button b { overflow:hidden;font-size:8px;text-overflow:ellipsis;white-space:nowrap; }.capture-balls button small { color:#bcd1da;font-size:8px;font-weight:900; } .capture-empty { display:flex;align-items:center;min-height:52px;color:#ffd5cf;font-size:9px; } .capture-stage { position:absolute;z-index:5;inset:0;display:none;overflow:hidden;border-radius:inherit;pointer-events:none; } .battle-panel.is-capture .capture-stage { display:block; } .battle-panel.is-capture .battle-health > .ally-health { display:none; } .capture-stage::before { content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 43%,rgba(128,238,164,.13),transparent 25%),linear-gradient(180deg,rgba(3,31,42,.08),rgba(3,24,35,.12)); } .capture-target-reticle { position:absolute;z-index:4;left:50%;top:43%;width:170px;height:170px;transform:translate(-50%,-50%);display:grid;place-items:center; } .capture-target-reticle > i { position:absolute;border-radius:50%;pointer-events:none; } .capture-ring-outer { inset:0;border:3px solid rgba(255,255,255,.76);box-shadow:0 0 0 6px rgba(255,255,255,.08),0 0 24px rgba(68,226,136,.18); } .capture-ring-inner { inset:0;border:5px solid #68e38d;background:rgba(86,225,133,.04);animation:capture-ring-contract var(--capture-ring-period,1800ms) linear infinite;animation-delay:var(--capture-ring-offset,0ms); } .capture-target-reticle > span { position:absolute;top:-27px;display:flex;gap:5px;align-items:center;padding:5px 9px;border-radius:999px;background:rgba(4,34,45,.76);color:white;box-shadow:0 5px 14px rgba(0,22,30,.18); } .capture-target-reticle small { color:#78e8a0;font-size:6px;font-weight:950;letter-spacing:.12em; }.capture-target-reticle b { font-size:8px; } .capture-aim-guide { position:absolute;z-index:2;inset:0;width:100%;height:100%;opacity:0;transition:opacity .15s;pointer-events:none; } .capture-aim-guide path { fill:none;stroke:rgba(255,255,255,.7);stroke-width:4;stroke-linecap:round;stroke-dasharray:7 11;filter:drop-shadow(0 2px 3px rgba(0,41,55,.4)); } .capture-stage.is-aiming .capture-aim-guide { opacity:.82; } .capture-feedback { position:absolute;z-index:5;left:50%;top:55px;transform:translateX(-50%);min-width:250px;padding:7px 12px;border:1px solid rgba(255,255,255,.28);border-radius:13px;background:rgba(3,30,42,.72);color:white;text-align:center;box-shadow:0 8px 20px rgba(0,20,29,.18);backdrop-filter:blur(10px); } .capture-feedback small { display:block;color:#77ddff;font-size:6px;font-weight:950;letter-spacing:.14em; }.capture-feedback b { display:block;margin-top:2px;font-size:10px; } .capture-stage[data-quality="nice"] .capture-feedback b { color:#9cf2bd; }.capture-stage[data-quality="great"] .capture-feedback b { color:#77dcff; }.capture-stage[data-quality="excellent"] .capture-feedback b { color:#ffd766;text-shadow:0 0 12px rgba(255,208,70,.48); }.capture-stage[data-quality="miss"] .capture-feedback b { color:#ffaea5; } .capture-gesture-hint { position:absolute;z-index:4;left:24px;bottom:22px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;background:rgba(4,33,45,.68);color:#ecfaff;backdrop-filter:blur(8px); } .capture-gesture-hint > i { display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(95,210,251,.14);color:#73dcff; }.capture-gesture-hint svg { width:19px;height:19px; } .capture-gesture-hint b,.capture-gesture-hint small { display:block; }.capture-gesture-hint b { font-size:8px; }.capture-gesture-hint small { margin-top:2px;color:#a8c2ce;font-size:6px; } .capture-throw { --throw-x:0px;--throw-y:0px;--throw-rotate:0deg;--capture-spin-turn:0turn; position:absolute;z-index:8;left:50%;bottom:18px;width:94px;height:94px;display:grid;place-items:center;align-content:center;padding:5px; transform:translate(calc(-50% + var(--throw-x)),var(--throw-y)) rotate(var(--throw-rotate)); border:3px solid rgba(255,255,255,.92);border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff,#e6f5fa 70%);color:#17445f; box-shadow:0 13px 32px rgba(0,41,59,.34),0 0 0 7px rgba(255,255,255,.12);cursor:grab;pointer-events:auto;touch-action:none;user-select:none;transition:transform .18s ease,box-shadow .18s ease,opacity .18s; } .capture-throw::before { content:'';position:absolute;inset:-10px;border-radius:50%;background:conic-gradient(#6be4ff var(--capture-spin-turn),rgba(255,255,255,.08) 0);-webkit-mask:radial-gradient(circle,transparent 61%,#000 63%);mask:radial-gradient(circle,transparent 61%,#000 63%);opacity:.78;pointer-events:none; } .capture-throw.is-aiming { transition:none;box-shadow:0 18px 34px rgba(0,40,58,.42),0 0 0 9px rgba(99,222,255,.15); } .capture-throw:disabled { opacity:.34;filter:grayscale(.55);cursor:default; }.capture-throw-icon { width:61px;height:61px;pointer-events:none; }.capture-throw em { margin-top:-7px;font-size:5px;letter-spacing:.05em;pointer-events:none; } .capture-spin-meter { position:absolute;inset:-4px;border-radius:50%;pointer-events:none; } .capture-stage.is-resolving .capture-throw { opacity:0;pointer-events:none;transform:translate(-50%,30px) scale(.72); } .battle-panel.is-intro .battle-command-deck { opacity:0;transform:translate(-50%,34px);pointer-events:none; } .battle-panel.is-intro .battle-health { opacity:0; }.battle-panel.is-intro .battle-turn-chip { opacity:0; } .battle-intro { position:absolute;z-index:7;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none; } .battle-intro::before { content:'';position:absolute;left:-8%;right:-8%;top:43%;height:110px;transform:translateY(-50%) skewY(-3deg);background:linear-gradient(90deg,transparent,rgba(2,26,35,.84) 16% 84%,transparent); } .battle-intro > i { position:absolute;inset:-30%;background:linear-gradient(112deg,transparent 38%,rgba(109,232,255,.34) 45%,rgba(255,255,255,.76) 49%,rgba(121,231,255,.25) 53%,transparent 60%);transform:translateX(-55%); } .battle-intro > span { position:relative;display:grid;gap:3px;text-align:center;text-shadow:0 4px 18px rgba(0,20,28,.72); } .battle-intro small { color:#81e6ff;font-size:9px;font-weight:950;letter-spacing:.2em; }.battle-intro strong { color:#fff;font-size:clamp(28px,4vw,54px);line-height:1; }.battle-intro em { color:#d7f3fc;font-size:10px;font-style:normal;font-weight:800; } .battle-panel.is-intro .battle-intro { opacity:1;animation:battle-intro-copy 1.35s ease both; }.battle-panel.is-intro .battle-intro > i { animation:battle-intro-swipe 1.15s cubic-bezier(.2,.78,.2,1) both; } .battle-panel:not(.is-intro) .battle-intro { visibility:hidden; } .battle-footer { min-height:32px; }.battle-footer > p { color:#c1d8e2;font-size:9px; }.battle-footer > ol { max-height:38px; } body[data-ui-theme="light"] .game-screen .battle-panel { background:transparent;color:#eefaff;box-shadow:none; } body[data-ui-theme="light"] .battle-status,body[data-ui-theme="light"] .battle-command-deck { color:#eefaff; } @keyframes capture-ring-contract { 0% { transform:scale(1);border-color:#64e58b; } 82% { transform:scale(.28);border-color:#ffd95d; } 82.01% { transform:scale(1);border-color:#64e58b; } 100% { transform:scale(1);border-color:#64e58b; } } @keyframes battle-intro-swipe { 0% { transform:translateX(-65%);opacity:0; } 18% { opacity:1; } 75% { opacity:1; } 100% { transform:translateX(58%);opacity:0; } } @keyframes battle-intro-copy { 0%,8% { opacity:0;transform:scale(.94); } 25%,72% { opacity:1;transform:scale(1); } 100% { opacity:0;transform:scale(1.03); } } @media (max-width:800px) { .game-screen .battle-panel { --battle-stage-width:calc(100vw - 12px);--battle-deck-width:calc(100vw - 12px); } .battle-stage { top:56px;bottom:248px;min-height:230px;border-radius:22px; } .battle-status { top:5px;min-height:45px;padding:4px 7px!important;border-radius:14px!important; } .battle-status > span > small { font-size:6px; }.battle-status > span > strong { max-width:42vw;font-size:11px; } .battle-controls { gap:3px; }.battle-controls button { min-width:36px;min-height:36px;padding:0 7px;font-size:6px; }.battle-controls #battleHelp { display:none; } .battle-health { top:56px;bottom:248px; } .battle-health > article { width:46%;padding:7px 8px;border-radius:13px; } .battle-health > .enemy-health { right:7px;top:48px; }.battle-health > .ally-health { left:7px;bottom:7px; } .battle-health > article > span { flex-direction:row;align-items:center; }.battle-health > article > span b { font-size:8px; }.battle-health > article > span small { font-size:6px; } .battle-health .battle-hp-bar { height:6px; }.battle-health .battle-stamina,.battle-health .battle-exp { margin-top:4px; }.battle-health .battle-statuses { display:none; } .battle-turn-chip { top:7px;min-height:29px;padding:4px 8px; }.battle-turn-chip small { font-size:5px; }.battle-turn-chip b { font-size:7px; } .battle-team-strip,.battle-target-strip { top:92px;width:72vw; }.battle-team-member,.battle-target-strip > button { min-width:132px;min-height:44px; } .battle-command-deck { bottom:calc(5px + env(safe-area-inset-bottom));min-height:0;max-height:238px;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:6px;padding:7px;border-radius:19px;overflow:auto; } .battle-command-deck .battle-basic { grid-column:1;grid-row:auto;min-height:44px;grid-template-columns:34px minmax(0,1fr) auto;padding:4px 7px; }.battle-basic > span { width:32px;height:32px; }.battle-basic > b { font-size:8px; }.battle-basic > small { font-size:6px; } .battle-command-deck .battle-skills { grid-column:1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:0; } .battle-skills > button { min-height:58px;grid-template-columns:39px minmax(0,1fr);padding:5px; }.battle-skills > button > .skill-icon { width:39px;height:39px;border-radius:9px; }.battle-skills > button > span { gap:2px; }.battle-skills > button > span b { font-size:8px; }.battle-skills > button > span small { font-size:5px; }.battle-skills > button > em { font-size:5px; } .battle-skills > button > span .skill-summary { display:none; } .battle-command-deck .battle-decision,.battle-command-deck .capture-panel,.battle-command-deck .battle-footer { grid-column:1; } .battle-decision { grid-template-columns:1fr 1fr;min-height:0;padding:8px; }.battle-decision > span { grid-column:1/-1; }.battle-decision button { min-height:44px; } .battle-footer { grid-template-columns:1fr;min-height:22px; }.battle-footer > ol { display:none; }.battle-footer > p { font-size:7px; } .capture-panel { grid-template-columns:1fr;min-height:82px;padding:7px;gap:5px; }.capture-copy { display:none; }.capture-balls button { flex-basis:132px;min-height:54px;grid-template-columns:38px minmax(0,1fr) auto;padding:5px 7px; }.capture-balls .capture-ball-icon { width:37px;height:37px; } .battle-panel.is-capture .battle-stage { bottom:104px; }.battle-panel.is-capture .battle-health { bottom:104px; }.battle-panel.is-capture .battle-health > .ally-health { display:none; } .battle-panel.is-capture .battle-command-deck { max-height:94px; } .capture-target-reticle { left:50%;top:42%;width:118px;height:118px; }.capture-target-reticle > span { top:-24px; } .capture-feedback { top:45px;min-width:190px;padding:5px 8px; }.capture-feedback b { font-size:8px; } .capture-gesture-hint { left:8px;bottom:10px;padding:5px 7px; }.capture-gesture-hint > i { width:26px;height:26px; }.capture-gesture-hint small { display:none; }.capture-gesture-hint b { font-size:6px; } .capture-throw { bottom:8px;width:78px;height:78px; }.capture-throw-icon { width:51px;height:51px; }.capture-throw em { display:none; } } @media (max-width:430px) { .battle-status > span > small { max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.battle-status > span > strong { max-width:38vw;font-size:10px; } .battle-controls #autoBattle { max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .battle-stage { bottom:236px; }.battle-health { bottom:236px; }.battle-health > article { width:48%; }.battle-health .battle-exp { display:none; } .battle-skills > button > span small { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.battle-skills > button > span small .skill-damage-icon { display:none; } .capture-target-reticle { left:50%;width:104px;height:104px; }.capture-feedback { top:38px; }.capture-gesture-hint { display:none; } } @media (max-height:650px) and (max-width:900px) { .battle-stage { top:50px;bottom:194px; }.battle-health { top:50px;bottom:194px; } .battle-status { top:3px;min-height:41px; }.battle-command-deck { max-height:186px; } .battle-basic { display:none!important; }.battle-skills > button { min-height:50px; }.battle-footer { display:none; } .battle-panel.is-capture .battle-stage,.battle-panel.is-capture .battle-health { bottom:86px; }.battle-panel.is-capture .battle-command-deck { max-height:78px; } } @media (prefers-reduced-motion:reduce) { .battle-panel::before,.battle-stage::after { display:none; } .battle-intro,.battle-intro > i,.capture-ring-inner,.capture-throw,.battle-command-deck { animation:none!important;transition:none!important; } .battle-panel.is-intro .battle-intro { opacity:1; }.battle-panel.is-intro .battle-intro > i { display:none; } } .capture-guide-v290 { display:grid;gap:10px;padding:13px;border:1px solid color-mix(in srgb,#55c8f4 26%,var(--theme-border,#c9dde7));border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,#52c9f4 7%,var(--theme-card,#fff)),var(--theme-card,#fff)); } .capture-guide-v290 > header { display:grid;grid-template-columns:48px minmax(0,1fr);gap:11px;align-items:center; } .capture-guide-v290 > header > span { display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#35b8ec,#2979c9);color:#fff;box-shadow:0 9px 20px rgba(35,137,193,.22); } .capture-guide-v290 > header svg { width:27px;height:27px; }.capture-guide-v290 > header small { color:var(--theme-accent,#29a4df);font-size:7px;font-weight:950;letter-spacing:.09em; }.capture-guide-v290 > header b { display:block;margin-top:2px;color:var(--theme-text,#173c55);font-size:14px; }.capture-guide-v290 > header p { margin:3px 0 0;color:var(--theme-muted,#6d899a);font-size:8px;line-height:1.4; } .capture-guide-v290 > ol { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0;padding:0;list-style:none; } .capture-guide-v290 > ol li { display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center;min-height:58px;padding:8px;border:1px solid var(--theme-border,#d1e1e9);border-radius:13px;background:var(--theme-surface-soft,#eef6f9); } .capture-guide-v290 > ol li > i { display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--theme-accent,#2aa4df) 10%,var(--theme-card,#fff));color:var(--theme-accent,#2aa4df);font-style:normal; }.capture-guide-v290 > ol svg { width:22px;height:22px; }.capture-guide-v290 > ol b { display:block;color:var(--theme-text,#173c55);font-size:9px; }.capture-guide-v290 > ol small { display:block;margin-top:2px;color:var(--theme-muted,#6d899a);font-size:7px;line-height:1.35; } .capture-guide-v290 > footer { display:grid;gap:2px;padding:9px 10px;border-radius:12px;background:color-mix(in srgb,#46bd80 8%,var(--theme-surface-soft,#eef6f9)); }.capture-guide-v290 > footer b { color:#319365;font-size:8px; }.capture-guide-v290 > footer span { color:var(--theme-muted,#6d899a);font-size:7px;line-height:1.4; } .is-battling .side-panel.is-mechanics-panel { z-index:126;top:12px;right:12px;bottom:12px;left:auto;max-height:none;pointer-events:auto;box-shadow:0 30px 80px rgba(0,18,29,.54); } @media (max-width:760px) { .capture-guide-v290 > ol { grid-template-columns:1fr; }.is-battling .side-panel.is-mechanics-panel { inset:6px;max-height:none;width:auto; } } /* v2.9.1 — visible arena, compact MOBA skills and non-blocking game windows */ .visually-hidden { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; } .game-screen .battle-panel { --battle-stage-width:min(1180px,calc(100vw - 120px)); --battle-deck-width:min(650px,calc(100vw - 430px)); --battle-slot:62px; } html[data-game-theme] .game-screen .battle-panel, body[data-ui-theme] .game-screen .battle-panel { border:0!important; background:transparent!important; box-shadow:none!important; color:#effaff!important; } .battle-panel::before { background:radial-gradient(circle at 50% 43%,transparent 34%,rgba(2,20,29,.11) 72%,rgba(2,17,25,.34)),linear-gradient(180deg,rgba(2,20,30,.19),transparent 25%,transparent 72%,rgba(2,17,25,.35)); } .battle-stage { top:66px;bottom:118px;width:var(--battle-stage-width);min-height:300px;border:1px solid rgba(225,249,255,.62);border-radius:28px; box-shadow:0 20px 56px rgba(0,26,36,.3),inset 0 1px rgba(255,255,255,.65),inset 0 -42px 68px rgba(2,28,32,.08); } .battle-stage::before { box-shadow:inset 0 0 0 4px rgba(255,255,255,.055),inset 0 -34px 70px rgba(2,34,35,.08); } .battle-stage::after { background:radial-gradient(circle at 50% 49%,transparent 0 41%,rgba(3,32,36,.025) 68%,rgba(1,22,29,.17)); } .battle-stage-decor { position:absolute;z-index:3;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none; } .battle-stage-decor i { position:absolute;width:5px;height:5px;border-radius:50%;background:#fff8b1;box-shadow:0 0 10px rgba(255,246,161,.65);opacity:.38;animation:battle-mote-float 4.8s ease-in-out infinite; } .battle-stage-decor i:nth-child(1) { left:11%;top:29%;animation-delay:-.7s; }.battle-stage-decor i:nth-child(2) { left:24%;top:17%;animation-delay:-2.3s; }.battle-stage-decor i:nth-child(3) { left:43%;top:33%;animation-delay:-1.1s; }.battle-stage-decor i:nth-child(4) { left:66%;top:18%;animation-delay:-3.4s; }.battle-stage-decor i:nth-child(5) { left:79%;top:41%;animation-delay:-1.8s; }.battle-stage-decor i:nth-child(6) { left:91%;top:25%;animation-delay:-4.1s; } .battle-status { top:10px;width:min(720px,calc(100vw - 520px));min-width:480px;min-height:46px;padding:5px 9px!important;border-color:rgba(215,244,252,.2)!important;border-radius:15px!important;background:rgba(4,29,42,.8)!important;box-shadow:0 10px 28px rgba(0,19,28,.19),inset 0 1px rgba(255,255,255,.09);backdrop-filter:blur(12px) saturate(1.08); } .battle-status > span > strong { font-size:14px; }.battle-status > span > small { font-size:7px; } .battle-controls button { min-width:38px;min-height:34px;padding:0 9px;border-radius:10px; } .battle-controls button .combat-icon { width:16px;height:16px; }.battle-controls button > b { font-size:7px; } .battle-turn-chip { top:10px;min-height:32px;padding:4px 10px;background:rgba(251,255,252,.86); } .battle-health { top:66px;bottom:118px;width:var(--battle-stage-width); } html[data-game-theme] .game-screen .battle-health > article, body[data-ui-theme] .game-screen .battle-health > article { width:min(255px,25vw);padding:9px 10px;border:1px solid rgba(217,246,252,.24)!important;border-radius:15px; background:rgba(4,31,43,.8)!important;color:#effaff!important;box-shadow:0 11px 26px rgba(0,27,36,.18),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(10px); } .battle-health > .enemy-health { right:14px;top:50px; }.battle-health > .ally-health { left:14px;bottom:14px; } .battle-health > article > span b { color:#f1fbff!important;font-size:11px; }.battle-health > article > span small,.battle-health .battle-stamina small { color:#b7d1dc!important;font-size:7px; } .battle-health .battle-hp-bar,.battle-health .battle-stamina > i { background:rgba(219,244,250,.14); } .battle-health .battle-hp-bar { height:7px; }.battle-health .battle-stamina { margin-top:5px; }.battle-health .battle-stamina > i { height:3px; } .battle-health .battle-exp { display:none!important; }.battle-health .battle-statuses { margin-top:5px;gap:3px; } .battle-health .battle-status-chip { min-width:25px;justify-content:center;padding:2px 4px;border-color:rgba(220,246,252,.14)!important;background:rgba(255,255,255,.06)!important;color:#f4fbff!important; } .battle-health .battle-status-chip b { display:none; }.battle-health .battle-status-chip small { color:#fff!important; } .battle-team-strip,.battle-target-strip { top:104px;width:min(460px,calc(var(--battle-stage-width) - 560px)); } .battle-command-deck { bottom:14px;width:var(--battle-deck-width);min-height:82px;grid-template-columns:var(--battle-slot) minmax(0,1fr);grid-template-rows:var(--battle-slot);align-items:center;gap:7px;padding:9px; border-color:rgba(217,245,252,.22);border-radius:20px;background:linear-gradient(145deg,rgba(4,28,40,.93),rgba(7,42,54,.9));box-shadow:0 18px 46px rgba(0,18,27,.34),inset 0 1px rgba(255,255,255,.09);backdrop-filter:blur(15px) saturate(1.08); } .battle-basic,.battle-skills > button { position:relative;width:var(--battle-slot);height:var(--battle-slot);min-width:var(--battle-slot);min-height:var(--battle-slot);padding:5px!important;display:grid;place-items:center;border:1px solid rgba(222,246,252,.15);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.035));overflow:visible;color:#effaff;box-shadow:inset 0 1px rgba(255,255,255,.06);transition:transform .14s ease,border-color .14s ease,filter .14s ease,box-shadow .14s ease; } .battle-basic:hover:not(:disabled),.battle-skills > button:hover { transform:translateY(-2px);border-color:rgba(118,218,249,.52);box-shadow:0 8px 18px rgba(0,18,27,.2),inset 0 1px rgba(255,255,255,.1); } .battle-basic > span:first-child,.battle-skills > button > .skill-icon { width:50px;height:50px;grid-row:auto;display:grid;place-items:center;border-radius:11px;overflow:hidden;background:rgba(255,255,255,.06); } .battle-basic > span:first-child svg { width:27px;height:27px; }.battle-skills > button > .skill-icon img { width:100%;height:100%;object-fit:cover; } .battle-basic > b,.battle-basic > small { display:none; } .battle-basic > kbd,.battle-skills > button > kbd { position:absolute;z-index:6;left:-3px;top:-4px;min-width:20px;height:20px;padding:2px 4px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.36);border-radius:6px;background:rgba(0,15,24,.9);color:#fff;font:900 8px/1 inherit;box-shadow:0 4px 8px rgba(0,13,20,.24); } .battle-skills { display:grid;grid-template-columns:repeat(4,var(--battle-slot));justify-content:start;gap:7px;padding:0;margin:0;overflow:visible; } .battle-skills > button > span.skill-cost { position:absolute;z-index:7;right:-4px;bottom:-4px;min-width:24px;height:20px;padding:2px 4px;display:flex;align-items:center;justify-content:center;gap:1px;border:1px solid rgba(154,223,247,.32);border-radius:7px;background:rgba(3,27,40,.94);color:#82dcff;box-shadow:0 4px 9px rgba(0,15,23,.25); } .battle-skills > button > span.skill-cost svg { width:11px;height:11px; }.battle-skills > button > span.skill-cost b { font-size:7px; } .battle-basic > em,.battle-skills > button > em { position:absolute;z-index:8;right:3px;top:3px;min-width:15px;height:15px;padding:0 3px;display:grid;place-items:center;border-radius:999px;background:#5dd187;color:#fff;font:950 8px/1 inherit;box-shadow:0 0 0 2px rgba(3,25,35,.8); } .battle-basic > em:empty,.battle-skills > button > em:empty { display:none; } .battle-skills > button.is-queued,.battle-basic.is-queued { border-color:#70e8ff;box-shadow:0 0 0 2px rgba(80,220,248,.2),0 0 20px rgba(77,211,245,.16);animation:none; } .battle-skills > button.is-disabled { cursor:help;filter:saturate(.5) brightness(.78); }.battle-skills > button.is-disabled:not(.is-cooling) > .skill-icon { opacity:.72; } .battle-skills > button.is-no-stamina > em { background:#328eb5; }.battle-skills > button.is-blocked-status > em { background:#e36b62; } .skill-cooldown { position:absolute;z-index:5;inset:4px;display:grid;place-items:center;border-radius:11px;background:conic-gradient(from 0deg,rgba(1,14,22,.82) 0 var(--cooldown-sweep,0deg),transparent var(--cooldown-sweep,0deg) 360deg);opacity:0;pointer-events:none; } .is-cooling > .skill-cooldown { opacity:1; }.skill-cooldown > b { display:grid;place-items:center;min-width:26px;height:26px;padding:0 4px;border:1px solid rgba(255,255,255,.19);border-radius:999px;background:rgba(2,19,28,.82);color:#fff;font-size:11px;text-shadow:0 2px 4px #00131c; } .battle-action-slot.is-previewed { border-color:#9ce9ff!important;box-shadow:0 0 0 2px rgba(106,222,250,.18),0 0 22px rgba(70,195,229,.15)!important; } .battle-skill-preview { position:absolute;z-index:20;left:50%;bottom:calc(100% + 11px);width:min(330px,calc(100vw - 28px));min-height:86px;padding:10px;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:10px; transform:translate(-50%,8px) scale(.98);border:1px solid rgba(212,244,252,.22);border-radius:17px;background:rgba(4,29,41,.94);color:#effaff;box-shadow:0 16px 38px rgba(0,17,26,.38),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(14px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s; } .battle-skill-preview.is-open { opacity:1;visibility:visible;transform:translate(-50%,0) scale(1); } .battle-skill-preview > span { width:58px;height:58px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.07);overflow:hidden;color:#72dfff; }.battle-skill-preview > span svg { width:31px;height:31px; }.battle-skill-preview > span .skill-icon,.battle-skill-preview > span img { width:100%;height:100%;object-fit:cover; } .battle-skill-preview > div { min-width:0; }.battle-skill-preview small { color:#72dfff;font-size:7px;font-weight:900;letter-spacing:.09em; }.battle-skill-preview b { display:block;margin-top:2px;font-size:12px; }.battle-skill-preview p { margin:3px 0;color:#c7dce5;font-size:8px;line-height:1.35; }.battle-skill-preview em { color:#89aeba;font-size:7px;font-style:normal; } .battle-skill-preview[data-state="cooldown"] em { color:#ffd279; }.battle-skill-preview[data-state="resource"] em,.battle-skill-preview[data-state="blocked"] em { color:#ffaaa3; } .combat-ui-guide-v291 { display:grid;gap:9px;padding:11px;border:1px solid var(--theme-border,#d9e7ed);border-radius:16px;background:var(--theme-card,#fff); } .combat-ui-guide-v291 > header { display:flex;align-items:center;gap:9px; }.combat-ui-guide-v291 > header > span { display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--theme-accent,#159fca) 12%,transparent);color:var(--theme-accent,#159fca); }.combat-ui-guide-v291 > header svg { width:21px;height:21px; }.combat-ui-guide-v291 > header small { display:block;color:var(--theme-accent,#159fca);font-size:7px;font-weight:950;letter-spacing:.09em; }.combat-ui-guide-v291 > header b { display:block;margin-top:2px;color:var(--theme-text,#173b4c);font-size:12px; } .combat-ui-guide-v291 > div { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }.combat-ui-guide-v291 article { display:grid;grid-template-columns:30px minmax(0,1fr);align-items:start;gap:7px;padding:8px;border-radius:11px;background:var(--theme-surface-soft,#edf5f8); }.combat-ui-guide-v291 article > svg { width:22px;height:22px;color:var(--theme-accent,#159fca); }.combat-ui-guide-v291 article b { display:block;color:var(--theme-text,#173b4c);font-size:8px; }.combat-ui-guide-v291 article small { display:block;margin-top:2px;color:var(--theme-muted,#6e8794);font-size:7px;line-height:1.4; } .battle-footer { position:absolute;left:50%;bottom:calc(100% + 9px);width:min(520px,calc(100vw - 34px));min-height:30px;padding:6px 10px;transform:translateX(-50%);display:block;border:1px solid rgba(222,245,252,.2);border-radius:12px;background:rgba(4,30,42,.73);text-align:center;box-shadow:0 8px 20px rgba(0,20,29,.16);backdrop-filter:blur(8px);pointer-events:none; } .battle-footer > p { color:#e4f5fa!important;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.battle-footer > ol { display:none; } .battle-panel:not([data-phase="battle"]) .battle-basic { display:none; } .battle-panel[data-phase="decision"] .battle-command-deck,.battle-panel.is-capture .battle-command-deck { width:min(760px,calc(100vw - 32px));grid-template-columns:1fr;grid-template-rows:auto;min-height:0; } .battle-command-deck .battle-decision,.battle-command-deck .capture-panel { grid-column:1;grid-row:1; } .battle-decision { min-height:68px;grid-template-columns:minmax(0,1fr) 112px 112px;padding:8px 10px; }.battle-decision button { min-height:44px; } .battle-asset-loader { position:absolute;z-index:12;left:50%;top:50%;width:min(330px,calc(100% - 30px));padding:13px 15px;transform:translate(-50%,-50%) scale(.96);display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:11px;border:1px solid rgba(203,242,253,.24);border-radius:18px;background:rgba(3,28,40,.91);color:#f2fbff;box-shadow:0 20px 54px rgba(0,18,27,.35);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s,transform .18s,visibility .16s; } .battle-panel.is-preloading .battle-asset-loader { opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1); }.battle-panel.is-preloading .battle-intro { opacity:0!important; } .battle-asset-loader > i { width:44px;height:44px;border:4px solid rgba(112,221,250,.18);border-top-color:#70dcfa;border-radius:50%;animation:battle-loader-spin .72s linear infinite; }.battle-asset-loader span { min-width:0;display:grid;gap:2px; }.battle-asset-loader small { color:#74dcf8;font-size:7px;font-weight:950;letter-spacing:.12em; }.battle-asset-loader b { font-size:11px; }.battle-asset-loader em { display:block;width:100%;height:3px;margin-top:5px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.09); }.battle-asset-loader em::after { content:'';display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,transparent,#7de3fa,transparent);animation:battle-loader-line 1s ease-in-out infinite; } .battle-intro::before { height:96px;background:linear-gradient(90deg,transparent,rgba(3,29,39,.74) 18% 82%,transparent); }.battle-intro small { color:#84e6ff; }.battle-intro strong { font-size:clamp(30px,4.4vw,58px); } .battle-utility-rail { display:none; } body.is-battling .chat-panel.is-open { z-index:128!important; } body.is-battling .side-panel.is-open { z-index:129!important; } @media (min-width:801px) { body.is-battling .desktop-dock { z-index:121!important;opacity:1!important;pointer-events:auto!important;filter:none!important; } body.is-battling .desktop-utility-rail { z-index:120!important;opacity:.92;pointer-events:auto; } body.is-battling .chat-panel.is-minimized { z-index:128!important;opacity:1!important;pointer-events:auto!important; } } @media (max-width:800px) { .game-screen .battle-panel { --battle-stage-width:calc(100vw - 6px);--battle-deck-width:calc(100vw - 66px);--battle-slot:52px; } .battle-panel::before { background:linear-gradient(180deg,rgba(2,18,28,.12),transparent 62%,rgba(2,18,27,.32)); } .battle-stage { top:7px;bottom:164px;min-height:220px;border-radius:18px; } .battle-status { top:7px;left:7px;width:calc(100vw - 62px);min-width:0;min-height:40px;transform:none;padding:4px 6px!important;border-radius:13px!important; } .battle-status > span > small { max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:5px; }.battle-status > span > strong { max-width:42vw;font-size:9px; } .battle-controls { gap:2px; }.battle-controls button { min-width:31px;min-height:31px;padding:0 5px;font-size:0; }.battle-controls button > b { display:none; }.battle-controls button .combat-icon { width:15px;height:15px; }.battle-controls #battleHelp { display:none; } .battle-turn-chip { top:47px;min-height:27px;padding:3px 7px; }.battle-turn-chip small { font-size:5px; }.battle-turn-chip b { font-size:6px; } .battle-health { top:7px;bottom:164px;width:var(--battle-stage-width); } html[data-game-theme] .game-screen .battle-health > article,body[data-ui-theme] .game-screen .battle-health > article { width:47%;padding:6px 7px;border-radius:12px; } .battle-health > .enemy-health { right:6px;top:75px; }.battle-health > .ally-health { left:6px;bottom:7px; } .battle-health > article > span b { font-size:8px!important; }.battle-health > article > span small { font-size:6px!important; }.battle-health .battle-stamina > span b { font-size:5px; } .battle-team-strip,.battle-target-strip { top:82px;width:62vw; }.battle-team-member,.battle-target-strip > button { min-width:122px;min-height:40px;padding:4px 6px; } .battle-command-deck { left:7px;bottom:calc(6px + env(safe-area-inset-bottom));width:var(--battle-deck-width);min-height:118px;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto;align-items:start;gap:6px;padding:6px;transform:none;border-radius:17px; } .battle-command-deck .battle-basic { width:46px;height:46px;min-width:46px;min-height:46px; }.battle-basic > span:first-child { width:38px;height:38px; } .battle-command-deck .battle-skills { grid-template-columns:repeat(2,var(--battle-slot));grid-template-rows:repeat(2,var(--battle-slot));gap:6px;justify-content:start; } .battle-basic,.battle-skills > button { border-radius:12px; }.battle-skills > button > .skill-icon { width:44px;height:44px;border-radius:9px; } .battle-basic > kbd,.battle-skills > button > kbd { left:-2px;top:-3px;min-width:18px;height:18px;font-size:7px; }.battle-skills > button > span.skill-cost { right:-3px;bottom:-3px;min-width:21px;height:18px; }.battle-skills > button > span.skill-cost svg { display:none; } .battle-footer { bottom:calc(100% + 6px);width:min(430px,calc(100vw - 70px));min-height:26px;padding:5px 8px; }.battle-footer > p { font-size:6px; } .battle-skill-preview { left:0;bottom:calc(100% + 7px);width:calc(100vw - 70px);min-height:74px;grid-template-columns:46px minmax(0,1fr);padding:8px;transform:translateY(7px) scale(.98); }.battle-skill-preview.is-open { transform:none; }.battle-skill-preview > span { width:46px;height:46px;border-radius:11px; }.battle-skill-preview b { font-size:10px; }.battle-skill-preview p { font-size:7px;max-height:29px;overflow:hidden; }.battle-skill-preview em { font-size:6px; } .battle-panel[data-phase="decision"] .battle-command-deck,.battle-panel.is-capture .battle-command-deck { left:7px;width:calc(100vw - 14px);min-height:0; } .battle-decision { grid-template-columns:1fr 1fr;min-height:0;padding:7px; }.battle-decision > span { grid-column:1/-1; }.battle-decision button { min-height:41px; } .battle-panel.is-capture .battle-stage { bottom:94px; }.battle-panel.is-capture .battle-health { bottom:94px; }.battle-panel.is-capture .battle-command-deck { max-height:82px; } .capture-panel { min-height:68px;padding:6px; }.capture-balls button { min-height:50px; } .battle-utility-rail { position:absolute;z-index:31;right:5px;top:50%;display:grid;gap:5px;transform:translateY(-50%);pointer-events:auto; } .battle-utility-rail button { position:relative;width:45px;height:45px;padding:0;display:grid;place-items:center;border:1px solid rgba(218,246,252,.24);border-radius:14px;background:rgba(4,30,42,.84);color:#eaf9fd;box-shadow:0 8px 20px rgba(0,19,29,.2),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(9px); } .battle-utility-rail button span,.battle-utility-rail button svg { width:20px;height:20px; }.battle-utility-rail button b { position:absolute;right:calc(100% + 5px);padding:3px 5px;border-radius:6px;background:rgba(3,27,38,.83);color:#e9f8fd;font-size:5px;opacity:0;pointer-events:none; }.battle-utility-rail button:focus-visible b,.battle-utility-rail button:active b { opacity:1; } body.is-battling .mobile-dock { opacity:0!important;pointer-events:none!important; } body.is-battling .side-panel.is-open { inset:5px!important;width:auto!important;max-height:none!important;z-index:129!important; } body.is-battling .chat-panel.is-open { left:5px!important;right:5px!important;top:auto!important;bottom:5px!important;width:auto!important;max-width:none!important;height:min(72dvh,620px)!important;max-height:calc(100dvh - 10px)!important;z-index:130!important; } } @media (max-width:430px) { .battle-status > span > strong { max-width:35vw;font-size:8px; }.battle-status > span > small { max-width:35vw; } .battle-health > .enemy-health { top:68px; }.battle-health .battle-stamina { display:none; } .battle-footer { display:block; }.battle-intro strong { font-size:28px; } } @media (max-width:760px) { .combat-ui-guide-v291 > div { grid-template-columns:1fr; } } @media (max-height:650px) and (max-width:900px) { .game-screen .battle-panel { --battle-slot:46px; } .battle-stage { top:5px;bottom:112px; }.battle-health { top:5px;bottom:112px; } .battle-command-deck { min-height:58px;grid-template-columns:42px minmax(0,1fr); }.battle-command-deck .battle-basic { width:42px;height:42px;min-width:42px;min-height:42px; }.battle-basic > span:first-child { width:34px;height:34px; } .battle-command-deck .battle-skills { grid-template-columns:repeat(4,var(--battle-slot));grid-template-rows:var(--battle-slot); }.battle-skills > button > .skill-icon { width:38px;height:38px; } .battle-footer { display:none; }.battle-skill-preview { bottom:calc(100% + 5px); } .battle-health > .enemy-health { top:52px; }.battle-health > .ally-health { bottom:5px; } .battle-panel.is-capture .battle-stage,.battle-panel.is-capture .battle-health { bottom:80px; }.battle-panel.is-capture .battle-command-deck { max-height:70px; } .battle-utility-rail { position:absolute;z-index:31;right:4px;top:50%;display:grid;gap:4px;transform:translateY(-50%);pointer-events:auto; } .battle-utility-rail button { position:relative;width:40px;height:40px;padding:0;display:grid;place-items:center;border:1px solid rgba(218,246,252,.24);border-radius:12px;background:rgba(4,30,42,.84);color:#eaf9fd;box-shadow:0 7px 18px rgba(0,19,29,.2),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(8px); } .battle-utility-rail button span,.battle-utility-rail button svg { width:18px;height:18px; }.battle-utility-rail button b { display:none; } body.is-battling .desktop-dock,body.is-battling .desktop-utility-rail { opacity:0!important;pointer-events:none!important; } body.is-battling .chat-panel.is-open { left:5px!important;right:5px!important;top:5px!important;bottom:5px!important;width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;z-index:130!important; } body.is-battling .side-panel.is-open { inset:5px!important;width:auto!important;max-height:none!important;z-index:129!important; } } @media (prefers-reduced-motion:reduce) { .battle-stage-decor i,.battle-asset-loader > i,.battle-asset-loader em::after { animation:none!important; } } @keyframes battle-loader-spin { to { transform:rotate(360deg); } } @keyframes battle-loader-line { from { transform:translateX(-120%); } to { transform:translateX(260%); } } @keyframes battle-mote-float { 0%,100% { transform:translateY(0) scale(.8);opacity:.2; } 50% { transform:translateY(-15px) scale(1.2);opacity:.58; } } /* v2.9.2 — individual energy, ultimate warm-up, quick items and authoritative PvE pause */ .game-screen .battle-panel { --battle-item-slot:43px;--battle-deck-width:min(690px,calc(100vw - 400px)); } .battle-command-deck { grid-template-columns:var(--battle-slot) auto minmax(178px,1fr); } .battle-command-deck .battle-basic { grid-column:1;grid-row:1; } .battle-command-deck .battle-skills { grid-column:2;grid-row:1; } .battle-command-deck .battle-quick-items { grid-column:3;grid-row:1; } .battle-command-deck .battle-footer,.battle-command-deck .battle-decision,.battle-command-deck .capture-panel { grid-column:1/-1; } .battle-quick-items { position:relative;display:grid;grid-template-columns:repeat(4,var(--battle-item-slot));justify-content:end;align-items:center;gap:5px;min-width:0;overflow:visible; } .battle-quick-item { position:relative;width:var(--battle-item-slot);height:var(--battle-slot);min-width:var(--battle-item-slot);min-height:var(--battle-slot);padding:4px;display:grid;place-items:center;border:1px solid rgba(217,244,252,.14);border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.028));color:#f2fbff;box-shadow:inset 0 1px rgba(255,255,255,.07);overflow:visible;transition:transform .14s ease,border-color .14s ease,filter .14s ease; } .battle-quick-item:hover,.battle-quick-item:focus-visible { z-index:25;transform:translateY(-2px);border-color:rgba(124,224,250,.56);outline:0; } .battle-quick-item > span { width:35px;height:35px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.07);overflow:hidden; } .battle-quick-item .battle-item-icon,.battle-quick-item .item-graphic-base { width:100%;height:100%;display:block; } .battle-quick-item .item-graphic-base { padding:2px; } .battle-quick-item > kbd { position:absolute;z-index:8;left:-3px;top:-4px;min-width:19px;height:19px;padding:2px 3px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.36);border-radius:6px;background:rgba(0,15,24,.92);color:#fff;font:900 7px/1 inherit;box-shadow:0 4px 8px rgba(0,13,20,.24); } .battle-quick-item > b { position:absolute;z-index:8;right:-4px;bottom:-4px;min-width:21px;height:18px;padding:0 4px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.23);border-radius:7px;background:rgba(3,27,40,.95);color:#fff;font-size:7px; } .battle-quick-item > em { position:absolute;z-index:8;right:2px;top:2px;padding:2px 3px;border-radius:5px;background:rgba(69,187,225,.88);color:#fff;font-size:5px;font-style:normal;font-weight:950;line-height:1; } .battle-quick-item.is-disabled { cursor:help;filter:saturate(.45) brightness(.72); } .battle-quick-item.is-ready::before { content:'';position:absolute;inset:2px;border:1px solid rgba(103,230,173,.25);border-radius:11px;pointer-events:none; } .battle-quick-item::after { content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 11px);width:max-content;max-width:230px;padding:7px 9px;transform:translate(-50%,5px);border:1px solid rgba(213,244,252,.2);border-radius:9px;background:rgba(3,27,39,.96);color:#eefaff;box-shadow:0 9px 24px rgba(0,16,25,.34);font-size:7px;font-weight:800;line-height:1.35;text-align:center;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s,transform .12s,visibility .12s; } .battle-quick-item:hover::after,.battle-quick-item:focus-visible::after { opacity:1;visibility:visible;transform:translate(-50%,0); } .battle-energy > span b { color:#68d9ff!important; } .battle-energy > i > em { background:linear-gradient(90deg,#2d9ee9,#69ddff)!important;box-shadow:0 0 9px rgba(69,193,241,.4); } .battle-status-chip.is-buff { border-color:rgba(96,225,159,.34)!important;background:rgba(60,184,121,.16)!important;color:#94efbd!important; } .battle-status-chip.is-debuff { border-color:rgba(255,130,116,.3)!important;background:rgba(213,76,70,.13)!important;color:#ffd2cd!important; } .battle-status-chip small { min-width:10px;text-align:center;font-variant-numeric:tabular-nums; } .battle-skills > button.skill-kind-ultimate { border-color:rgba(236,191,79,.3);box-shadow:inset 0 0 15px rgba(224,165,54,.06); } .battle-skills > button.skill-kind-ultimate > kbd { border-color:rgba(255,222,125,.55);background:rgba(68,43,4,.9);color:#ffe598; } .battle-pause-overlay { position:absolute;z-index:18;inset:0;display:grid;place-content:center;grid-template-columns:54px auto;align-items:center;gap:13px;border-radius:inherit;background:rgba(2,23,34,.53);color:#f3fbff;backdrop-filter:blur(4px) saturate(.6);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility .18s; } .battle-pause-overlay > svg { width:54px;height:54px;padding:14px;border:1px solid rgba(208,244,252,.24);border-radius:17px;background:rgba(4,35,48,.76);color:#78ddfa;box-shadow:0 12px 30px rgba(0,17,27,.26); } .battle-pause-overlay span { display:grid;gap:2px; }.battle-pause-overlay small { color:#78ddfa;font-size:7px;font-weight:950;letter-spacing:.12em; }.battle-pause-overlay b { font-size:24px;letter-spacing:.08em; }.battle-pause-overlay em { color:#bfd7df;font-size:8px;font-style:normal; } .battle-panel.is-paused .battle-pause-overlay { opacity:1;visibility:visible; } .battle-panel.is-paused .battle-basic,.battle-panel.is-paused .battle-skills,.battle-panel.is-paused .battle-quick-items { filter:saturate(.45) brightness(.72); } .battle-controls #pauseBattle.is-active { border-color:rgba(112,221,250,.48);background:rgba(65,185,225,.22);color:#a7efff; } @media (max-width:800px) { .game-screen .battle-panel { --battle-item-slot:34px; } .battle-command-deck { grid-template-columns:46px minmax(110px,1fr) 74px; } .battle-command-deck .battle-basic { grid-column:1; }.battle-command-deck .battle-skills { grid-column:2; }.battle-command-deck .battle-quick-items { grid-column:3; } .battle-quick-items { grid-template-columns:repeat(2,var(--battle-item-slot));grid-template-rows:repeat(2,var(--battle-slot));align-content:start;gap:6px; } .battle-quick-item { width:var(--battle-item-slot);height:var(--battle-slot);min-width:var(--battle-item-slot);min-height:var(--battle-slot);padding:2px;border-radius:10px; } .battle-quick-item > span { width:29px;height:29px;border-radius:8px; }.battle-quick-item > em { display:none; }.battle-quick-item > kbd { min-width:16px;height:16px;font-size:6px; }.battle-quick-item > b { min-width:18px;height:16px;font-size:6px; } .battle-quick-item::after { left:auto;right:0;bottom:calc(100% + 7px);max-width:min(210px,70vw);transform:translateY(4px); }.battle-quick-item:hover::after,.battle-quick-item:focus-visible::after { transform:none; } .battle-health .battle-statuses { display:flex!important;min-height:21px;overflow-x:auto;scrollbar-width:none; }.battle-health .battle-statuses:empty { min-height:0; } .battle-health .battle-status-chip { flex:0 0 auto;min-width:23px;padding:2px 3px; }.battle-health .battle-status-chip svg { width:12px;height:12px; } .battle-pause-overlay { grid-template-columns:42px auto;gap:9px; }.battle-pause-overlay > svg { width:42px;height:42px;padding:11px;border-radius:13px; }.battle-pause-overlay b { font-size:18px; }.battle-pause-overlay em { font-size:6px; } } @media (max-width:430px) { .battle-health .battle-stamina.battle-energy { display:flex; } .battle-health .battle-statuses { margin-top:3px; } } @media (max-height:650px) and (max-width:900px) { .game-screen .battle-panel { --battle-item-slot:34px; } .battle-command-deck { grid-template-columns:42px auto minmax(144px,1fr); } .battle-quick-items { grid-template-columns:repeat(4,var(--battle-item-slot));grid-template-rows:var(--battle-slot);justify-content:end;gap:4px; } .battle-quick-item { width:var(--battle-item-slot);height:var(--battle-slot);min-width:var(--battle-item-slot);min-height:var(--battle-slot); } .battle-quick-item > span { width:29px;height:29px; } } @media (prefers-reduced-motion:reduce) { .battle-quick-item,.battle-quick-item::after,.battle-pause-overlay { transition:none!important; } } /* v2.9.3 — one self-contained battle window; no viewport-positioned battle fragments */ .game-screen .battle-panel { --battle-shell-width:min(1280px,calc(100vw - 48px)); --battle-shell-height:min(900px,calc(100dvh - 28px)); --battle-shell-head:54px; --battle-shell-command:104px; --battle-shell-gap:8px; --battle-shell-pad:8px; --battle-slot:58px; --battle-item-slot:46px; position:absolute!important; inset:0!important; width:auto!important; height:auto!important; padding:0!important; overflow:hidden!important; } .game-screen .battle-panel::before { z-index:0; background:radial-gradient(circle at 50% 46%,rgba(2,24,31,.08) 0 36%,rgba(2,18,27,.38) 78%),rgba(2,18,25,.18)!important; backdrop-filter:saturate(.82) brightness(.9); } .battle-shell { position:absolute; z-index:2; left:50%; top:50%; width:var(--battle-shell-width); height:var(--battle-shell-height); min-height:520px; box-sizing:border-box; padding:var(--battle-shell-pad); display:grid; grid-template-rows:var(--battle-shell-head) minmax(0,1fr) var(--battle-shell-command); gap:var(--battle-shell-gap); transform:translate(-50%,-50%); overflow:hidden; border:1px solid rgba(203,239,247,.46); border-radius:27px; background:rgba(2,25,34,.1); box-shadow:0 30px 90px rgba(0,16,24,.48),0 0 0 1px rgba(255,255,255,.05),inset 0 1px rgba(255,255,255,.18); pointer-events:none; } .battle-shell::after { content:''; position:absolute; z-index:40; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 3px rgba(255,255,255,.035),inset 0 -40px 80px rgba(1,18,25,.08); pointer-events:none; } .battle-shell > .battle-status { position:relative!important; z-index:12; inset:auto!important; grid-row:1; width:100%!important; min-width:0!important; min-height:0!important; height:100%; box-sizing:border-box; transform:none!important; padding:6px 9px!important; border:1px solid rgba(201,239,248,.18)!important; border-radius:17px!important; background:linear-gradient(135deg,rgba(3,27,39,.96),rgba(6,47,57,.92))!important; box-shadow:0 8px 22px rgba(0,17,25,.24),inset 0 1px rgba(255,255,255,.08)!important; pointer-events:auto; } .battle-status > span { min-width:0; } .battle-status > span > small { font-size:7px!important; } .battle-status > span > strong { max-width:420px;font-size:14px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .battle-controls { flex:0 0 auto; } .battle-controls button { min-height:36px!important;border-radius:11px!important; } .battle-shell > .battle-stage { position:relative!important; z-index:2; inset:auto!important; grid-row:2; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; transform:none!important; box-sizing:border-box; overflow:hidden; border:1px solid rgba(216,245,251,.52)!important; border-radius:21px!important; box-shadow:0 14px 38px rgba(0,20,27,.25),inset 0 1px rgba(255,255,255,.24),inset 0 -40px 76px rgba(1,25,31,.08)!important; } .battle-stage::before { box-shadow:inset 0 0 0 3px rgba(255,255,255,.045),inset 0 -36px 64px rgba(2,25,30,.07)!important; } .battle-stage::after { background:radial-gradient(circle at 50% 48%,transparent 0 44%,rgba(2,28,32,.025) 72%,rgba(1,20,27,.15))!important; } .battle-shell > .battle-health { position:absolute!important; z-index:8; left:var(--battle-shell-pad)!important; right:var(--battle-shell-pad)!important; top:calc(var(--battle-shell-pad) + var(--battle-shell-head) + var(--battle-shell-gap))!important; bottom:calc(var(--battle-shell-pad) + var(--battle-shell-command) + var(--battle-shell-gap))!important; width:auto!important; height:auto!important; transform:none!important; pointer-events:none; } html[data-game-theme] .game-screen .battle-health > article, body[data-ui-theme] .game-screen .battle-health > article { width:clamp(210px,22%,270px)!important; padding:9px 10px!important; border:1px solid rgba(207,242,249,.2)!important; border-radius:15px!important; background:linear-gradient(145deg,rgba(3,28,40,.91),rgba(5,47,55,.86))!important; box-shadow:0 10px 25px rgba(0,18,25,.22),inset 0 1px rgba(255,255,255,.07)!important; } .battle-health > .enemy-health { right:14px!important;top:14px!important; } .battle-health > .ally-health { left:14px!important;bottom:14px!important; } .battle-health .battle-hp-bar { height:7px!important; } .battle-health .battle-stamina { margin-top:5px!important; } .battle-health .battle-stamina > i { height:3px!important; } .battle-health .battle-statuses { display:flex!important;max-width:100%;min-height:0;gap:3px!important;overflow-x:auto;scrollbar-width:none; } .battle-health .battle-statuses,.battle-health .battle-status-chip { pointer-events:auto; } .battle-health .battle-statuses:empty { display:none!important; } .battle-shell > .battle-team-strip,.battle-shell > .battle-target-strip { position:absolute!important; z-index:10; left:50%!important; top:calc(var(--battle-shell-pad) + var(--battle-shell-head) + var(--battle-shell-gap) + 14px)!important; width:min(500px,42%)!important; transform:translateX(-50%)!important; pointer-events:auto; } .battle-panel:not(.is-coop) .battle-team-strip { display:none!important; } .battle-shell > .battle-command-deck { position:relative!important; z-index:13; inset:auto!important; grid-row:3; width:100%!important; height:100%; min-width:0!important; min-height:0!important; box-sizing:border-box; margin:0!important; padding:8px 12px 5px!important; display:grid; grid-template-rows:var(--battle-slot) minmax(17px,1fr)!important; align-items:center!important; align-content:center; justify-content:center; gap:5px 8px!important; transform:none!important; overflow:visible; border:1px solid rgba(202,240,248,.18)!important; border-radius:18px!important; background:linear-gradient(145deg,rgba(3,27,39,.97),rgba(5,45,55,.94))!important; box-shadow:0 9px 25px rgba(0,17,25,.27),inset 0 1px rgba(255,255,255,.075)!important; pointer-events:auto; } .battle-command-deck .battle-basic { grid-column:1!important;grid-row:1!important; } .battle-command-deck .battle-skills { grid-column:2!important;grid-row:1!important; } .battle-command-deck .battle-quick-items { grid-column:3!important;grid-row:1!important; } .battle-basic,.battle-skills > button {border-radius:14px!important; } .battle-basic > span:first-child,.battle-skills > button > .skill-icon { width:46px!important;height:46px!important;border-radius:10px!important; } .battle-skills {gap:6px!important;padding:0!important; } .battle-quick-items {gap:5px!important; } .battle-quick-items[hidden] { display:none!important; } .battle-quick-item {border-radius:12px!important; } .battle-quick-item > span { width:35px!important;height:35px!important; } .battle-command-deck .battle-footer { position:relative!important; inset:auto!important; grid-column:1/-1!important; grid-row:2!important; align-self:stretch; width:min(900px,100%)!important; min-height:0!important; height:auto; margin:0 auto!important; padding:1px 8px!important; transform:none!important; display:flex; align-items:center; justify-content:center; overflow:hidden; border:0!important; border-radius:6px!important; background:rgba(255,255,255,.035)!important; box-shadow:none!important; backdrop-filter:none!important; } .battle-footer > p { width:100%;font-size:7px!important;line-height:1.2;text-align:center; } .battle-command-deck .battle-decision,.battle-command-deck .capture-panel { grid-column:1/-1!important; grid-row:1!important; justify-self:center; width:min(760px,100%); max-width:100%; margin:0!important; } .battle-panel[data-phase="decision"] .battle-command-deck,.battle-panel.is-capture .battle-command-deck { grid-template-columns:1fr!important;grid-template-rows:1fr!important; } .battle-panel[data-phase="decision"] .battle-footer,.battle-panel.is-capture .battle-footer { display:none!important; } .battle-decision { min-height:0!important;height:100%;box-sizing:border-box;grid-template-columns:minmax(0,1fr) 118px 118px!important;padding:7px 9px!important; } .capture-panel { min-height:0!important;height:100%;box-sizing:border-box;padding:7px!important; } .battle-panel.is-intro .battle-command-deck { opacity:0!important;transform:translateY(18px)!important;pointer-events:none!important; } .battle-shell > .battle-utility-rail { position:absolute!important; z-index:16; right:16px!important; top:50%!important; display:grid!important; gap:5px; transform:translateY(-50%)!important; pointer-events:auto; } .battle-utility-rail button { position:relative; width:38px!important; height:38px!important; padding:0!important; display:grid!important; place-items:center; border:1px solid rgba(207,241,248,.2)!important; border-radius:12px!important; background:rgba(3,31,42,.88)!important; color:#eafaff!important; box-shadow:0 7px 18px rgba(0,17,24,.23),inset 0 1px rgba(255,255,255,.07)!important; backdrop-filter:blur(9px); } .battle-utility-rail button span,.battle-utility-rail button svg { width:18px!important;height:18px!important; } .battle-utility-rail button b { position:absolute;right:calc(100% + 6px);padding:4px 6px;border-radius:7px;background:rgba(2,25,35,.94);color:#f1fbff;font-size:6px;opacity:0;pointer-events:none;white-space:nowrap; } .battle-utility-rail button:hover b,.battle-utility-rail button:focus-visible b { opacity:1; } .battle-skill-preview { max-width:calc(var(--battle-shell-width) - 32px)!important; } body.is-battling .world-topbar, body.is-battling #partyHud, body.is-battling #playerProfileButton, body.is-battling #playerStaminaHud, body.is-battling #questWidget, body.is-battling #worldMinimapShell, body.is-battling #desktopDock, body.is-battling #desktopUtilityRail, body.is-battling #desktopMoreMenu, body.is-battling .interaction-card { opacity:0!important; visibility:hidden!important; pointer-events:none!important; } body.is-battling .chat-panel.is-open,body.is-battling .side-panel.is-open { visibility:visible!important; } body.is-battling .chat-panel.is-minimized { opacity:0!important;visibility:hidden!important;pointer-events:none!important; } body.is-battling .chat-panel.is-open:not(.is-minimized) {visibility:visible!important;pointer-events:auto!important; } @media (max-width:800px) { .game-screen .battle-panel { --battle-shell-width:calc(100vw - 8px); --battle-shell-height:calc(100dvh - 8px); --battle-shell-head:44px; --battle-shell-command:134px; --battle-shell-gap:4px; --battle-shell-pad:4px; --battle-slot:48px; --battle-item-slot:34px; } .battle-shell { left:4px;top:4px;min-width:0;min-height:420px;transform:none;border-radius:20px; } .battle-shell > .battle-status { left:auto!important;top:auto!important;width:100%!important;height:44px;padding:4px 6px!important;border-radius:14px!important; } .battle-status > span > small { max-width:38vw!important;font-size:5px!important; } .battle-status > span > strong { max-width:38vw!important;font-size:9px!important; } .battle-controls { gap:2px!important; } .battle-controls button { min-width:31px!important;min-height:31px!important;padding:0 5px!important;font-size:0!important; } .battle-controls button > b { display:none!important; } .battle-controls #battleHelp { display:grid!important;font-size:11px!important; } .battle-shell > .battle-stage { top:auto!important;bottom:auto!important;border-radius:15px!important; } .battle-turn-chip { top:8px!important;min-height:26px!important;padding:3px 7px!important; } .battle-turn-chip small { font-size:5px!important; }.battle-turn-chip b { font-size:6px!important; } html[data-game-theme] .game-screen .battle-health > article,body[data-ui-theme] .game-screen .battle-health > article { width:47%!important;padding:6px 7px!important;border-radius:11px!important; } .battle-health > .enemy-health { right:6px!important;top:45px!important; } .battle-health > .ally-health { left:6px!important;bottom:6px!important; } .battle-health > article > span b { font-size:8px!important; }.battle-health > article > span small { font-size:6px!important; } .battle-health .battle-stamina { display:flex!important;margin-top:3px!important; } .battle-health .battle-statuses { margin-top:3px!important;max-height:21px; } .battle-health .battle-status-chip { flex:0 0 auto;min-width:22px!important;padding:2px 3px!important; } .battle-health .battle-status-chip svg { width:11px!important;height:11px!important; } .battle-shell > .battle-team-strip,.battle-shell > .battle-target-strip { top:calc(var(--battle-shell-pad) + var(--battle-shell-head) + var(--battle-shell-gap) + 39px)!important;width:58%!important; } .battle-shell > .battle-command-deck { left:auto!important; bottom:auto!important; width:100%!important; min-height:0!important; padding:7px 8px 4px!important; grid-template-columns:44px 100px 72px!important; grid-template-rows:100px minmax(18px,1fr)!important; gap:5px!important; border-radius:15px!important; overflow:visible!important; } .battle-command-deck .battle-basic { width:44px!important;height:48px!important;min-width:44px!important;min-height:48px!important;align-self:start; } .battle-basic > span:first-child { width:36px!important;height:38px!important; } .battle-command-deck .battle-skills { grid-template-columns:repeat(2,48px)!important;grid-template-rows:repeat(2,48px)!important;gap:4px!important;align-self:start; } .battle-skills > button { width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important; } .battle-skills > button > .skill-icon { width:40px!important;height:40px!important; } .battle-command-deck .battle-quick-items { grid-template-columns:repeat(2,34px)!important;grid-template-rows:repeat(2,48px)!important;gap:4px!important;align-self:start; } .battle-quick-item { width:34px!important;height:48px!important;min-width:34px!important;min-height:48px!important; } .battle-quick-item > span { width:28px!important;height:31px!important; } .battle-command-deck .battle-footer { grid-row:2!important;width:100%!important;padding:1px 4px!important; } .battle-footer > p { font-size:5.5px!important; } .battle-command-deck .battle-decision,.battle-command-deck .capture-panel { height:100%!important;width:100%!important; } .battle-decision { grid-template-columns:1fr 1fr!important;grid-template-rows:auto 40px!important;padding:6px!important; } .battle-decision > span { grid-column:1/-1!important; } .battle-decision button { min-height:38px!important; } .battle-shell > .battle-utility-rail { right:7px!important;top:50%!important;gap:4px!important; } .battle-utility-rail button { width:36px!important;height:36px!important;border-radius:11px!important; } .battle-utility-rail button b { display:none!important; } .battle-skill-preview { left:50%!important;bottom:calc(100% + 7px)!important;width:calc(var(--battle-shell-width) - 18px)!important;max-width:none!important;transform:translate(-50%,7px) scale(.98)!important; } .battle-skill-preview.is-open { transform:translate(-50%,0) scale(1)!important; } .battle-panel[data-phase="decision"] .battle-command-deck,.battle-panel.is-capture .battle-command-deck { grid-template-columns:1fr!important;grid-template-rows:1fr!important;padding:6px!important; } .battle-panel.is-capture .battle-stage,.battle-panel.is-capture .battle-health { bottom:auto!important; } } @media (max-width:430px) { .battle-status > span > small { max-width:34vw!important; }.battle-status > span > strong { max-width:34vw!important; } .battle-health .battle-stamina.battle-energy { display:flex!important; } } @media (max-height:650px) and (max-width:900px) and (orientation:landscape) { .game-screen .battle-panel { --battle-shell-width:calc(100vw - 8px); --battle-shell-height:calc(100dvh - 8px); --battle-shell-head:40px; --battle-shell-command:68px; --battle-shell-gap:4px; --battle-shell-pad:4px; --battle-slot:44px; --battle-item-slot:34px; } .battle-shell { left:4px;top:4px;min-width:0;min-height:300px;transform:none;border-radius:17px; } .battle-shell > .battle-status { height:40px!important; } .battle-shell > .battle-command-deck { grid-template-columns:40px auto auto!important;grid-template-rows:52px!important;padding:7px!important;gap:5px!important; } .battle-command-deck .battle-basic { display:grid!important;width:40px!important;height:44px!important;min-width:40px!important;min-height:44px!important; } .battle-basic > span:first-child { width:33px!important;height:35px!important; } .battle-command-deck .battle-skills { grid-template-columns:repeat(4,44px)!important;grid-template-rows:44px!important;gap:4px!important; } .battle-skills > button { width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important; } .battle-skills > button > .skill-icon { width:36px!important;height:36px!important; } .battle-command-deck .battle-quick-items { grid-template-columns:repeat(4,34px)!important;grid-template-rows:44px!important;gap:3px!important; } .battle-quick-item { width:34px!important;height:44px!important;min-width:34px!important;min-height:44px!important; } .battle-quick-item > span { width:28px!important;height:30px!important; } .battle-command-deck .battle-footer { display:none!important; } .battle-health > .enemy-health { top:38px!important; }.battle-health > .ally-health { bottom:5px!important; } .battle-shell > .battle-utility-rail { right:6px!important; }.battle-utility-rail button { width:32px!important;height:32px!important; } .battle-panel[data-phase="decision"] .battle-command-deck,.battle-panel.is-capture .battle-command-deck { grid-template-columns:1fr!important;grid-template-rows:1fr!important; } .battle-decision { grid-template-columns:minmax(0,1fr) 100px 100px!important;grid-template-rows:1fr!important; } .battle-decision > span { grid-column:auto!important; } } @media (prefers-reduced-motion:reduce) { .battle-shell,.battle-shell > .battle-command-deck { transition:none!important; } } /* v2.9.4 — themed battle workspace, six-slot roster and live world HUD */ .game-screen .battle-panel { --battle-shell-width:min(1480px,calc(100vw - 40px)); --battle-shell-height:min(940px,calc(100dvh - 24px)); pointer-events:none!important; } .game-screen .battle-panel::before { pointer-events:none!important;backdrop-filter:saturate(.9) brightness(.96)!important; } html[data-game-theme="dark"] .game-screen .battle-panel::before { background:rgba(0,17,25,.22)!important; } html[data-game-theme="light"] .game-screen .battle-panel::before { background:rgba(30,73,91,.08)!important; } .battle-shell { --battle-ui-surface:rgba(5,31,43,.96); --battle-ui-surface-soft:rgba(9,45,57,.93); --battle-ui-card:rgba(8,43,54,.94); --battle-ui-card-hover:rgba(15,61,75,.97); --battle-ui-border:rgba(173,224,238,.26); --battle-ui-border-strong:rgba(191,234,245,.48); --battle-ui-text:#effbff; --battle-ui-muted:#9dbbc8; --battle-ui-accent:#42bdf4; --battle-ui-shadow:rgba(0,15,23,.42); border-color:var(--battle-ui-border-strong)!important; background:color-mix(in srgb,var(--battle-ui-surface) 32%,transparent)!important; box-shadow:0 30px 90px var(--battle-ui-shadow),0 0 0 1px rgba(255,255,255,.06),inset 0 1px rgba(255,255,255,.16)!important; color:var(--battle-ui-text); } html[data-game-theme="light"] .battle-shell { --battle-ui-surface:rgba(250,253,255,.98); --battle-ui-surface-soft:rgba(239,247,251,.97); --battle-ui-card:rgba(255,255,255,.96); --battle-ui-card-hover:#edf7fb; --battle-ui-border:#c6dce7; --battle-ui-border-strong:#afcedc; --battle-ui-text:#173d53; --battle-ui-muted:#617f91; --battle-ui-accent:#138bd0; --battle-ui-shadow:rgba(26,67,84,.24); background:rgba(242,249,252,.32)!important; } .battle-shell > .battle-status, .battle-shell > .battle-command-deck, .battle-roster-panel, .battle-tactics { border-color:var(--battle-ui-border)!important; background:linear-gradient(145deg,var(--battle-ui-surface),var(--battle-ui-surface-soft))!important; color:var(--battle-ui-text)!important; box-shadow:0 10px 28px var(--battle-ui-shadow),inset 0 1px rgba(255,255,255,.12)!important; } .battle-status > span > strong,.battle-status > span > small,.battle-status > span > small b { color:var(--battle-ui-text)!important; } .battle-status > span > small { color:var(--battle-ui-accent)!important; } .battle-controls button { border-color:var(--battle-ui-border)!important; background:var(--battle-ui-card)!important; color:var(--battle-ui-text)!important; box-shadow:none!important; } .battle-controls button:hover,.battle-controls button:focus-visible,.battle-controls button.is-active { border-color:var(--battle-ui-accent)!important;background:color-mix(in srgb,var(--battle-ui-accent) 14%,var(--battle-ui-card))!important; } .battle-controls :is(#battleTacticsToggle,#autoBattle,#pauseBattle)[hidden] { display:none!important; } .battle-shell > .battle-stage { border-color:var(--battle-ui-border-strong)!important; } html[data-game-theme="light"] .battle-stage::after { background:radial-gradient(circle at 50% 48%,transparent 0 52%,rgba(22,68,82,.06) 82%,rgba(18,51,65,.14))!important; } html[data-game-theme] .game-screen .battle-health > article, body[data-ui-theme] .game-screen .battle-health > article { border-color:var(--battle-ui-border)!important; background:color-mix(in srgb,var(--battle-ui-card) 94%,transparent)!important; color:var(--battle-ui-text)!important; box-shadow:0 10px 25px var(--battle-ui-shadow),inset 0 1px rgba(255,255,255,.12)!important; } .battle-health > article > span b,.battle-health > article > span small,.battle-health .battle-stamina b,.battle-health .battle-stamina small { color:var(--battle-ui-text)!important; } .battle-command-deck :is(.battle-basic,.battle-skills > button,.battle-quick-item), .battle-tactic-modes button { border-color:var(--battle-ui-border)!important; background:var(--battle-ui-card)!important; color:var(--battle-ui-text)!important; box-shadow:0 5px 14px color-mix(in srgb,var(--battle-ui-shadow) 72%,transparent),inset 0 1px rgba(255,255,255,.12)!important; } .battle-command-deck :is(.battle-basic,.battle-skills > button,.battle-quick-item):hover, .battle-command-deck :is(.battle-basic,.battle-skills > button,.battle-quick-item):focus-visible, .battle-tactic-modes button.is-active { border-color:var(--battle-ui-accent)!important; background:color-mix(in srgb,var(--battle-ui-accent) 13%,var(--battle-ui-card))!important; } .battle-command-deck .battle-footer { background:color-mix(in srgb,var(--battle-ui-card) 62%,transparent)!important;color:var(--battle-ui-muted)!important; } .battle-footer > p,#battleHint { color:var(--battle-ui-muted)!important; } .battle-skill-preview { border-color:var(--battle-ui-border)!important;background:var(--battle-ui-surface)!important;color:var(--battle-ui-text)!important; } .battle-skill-preview :is(b,p,em,small) { color:inherit!important; } .battle-decision,.capture-panel { border-color:var(--battle-ui-border)!important;background:var(--battle-ui-surface)!important;color:var(--battle-ui-text)!important; } .battle-roster-panel { position:absolute; z-index:18; left:18px; top:calc(var(--battle-shell-pad) + var(--battle-shell-head) + var(--battle-shell-gap) + 18px); bottom:calc(var(--battle-shell-pad) + var(--battle-shell-command) + var(--battle-shell-gap) + 18px); width:132px; min-height:0; box-sizing:border-box; padding:9px; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:7px; overflow:hidden; border:1px solid var(--battle-ui-border); border-radius:18px; pointer-events:auto; backdrop-filter:blur(14px); } .battle-roster-panel > header { display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0; } .battle-roster-panel > header span { display:grid;min-width:0; } .battle-roster-panel > header small { color:var(--battle-ui-accent);font-size:6px;font-weight:950;letter-spacing:.12em; } .battle-roster-panel > header b { overflow:hidden;color:var(--battle-ui-text);font-size:9px;text-overflow:ellipsis;white-space:nowrap; } .battle-roster-panel > header em { flex:0 0 auto;padding:3px 5px;border:1px solid color-mix(in srgb,var(--battle-ui-accent) 42%,var(--battle-ui-border));border-radius:7px;background:color-mix(in srgb,var(--battle-ui-accent) 10%,transparent);color:var(--battle-ui-accent);font-size:6px;font-style:normal;font-weight:950; } .battle-roster-panel > header em.is-cooling { border-color:#edb44c;color:#d99b28; } .battle-roster-panel > p { margin:0;color:var(--battle-ui-muted);font-size:5.5px;line-height:1.35;text-align:center; } .battle-roster { min-height:0;display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:5px; } .battle-roster-slot { position:relative; min-width:0; min-height:0; padding:4px 5px; display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:1fr; align-items:center; gap:5px; overflow:hidden; border:1px solid var(--battle-ui-border); border-radius:12px; background:var(--battle-ui-card); color:var(--battle-ui-text); cursor:pointer; transition:transform .16s,border-color .16s,background .16s,opacity .16s; } .battle-roster-slot:hover:not(:disabled),.battle-roster-slot:focus-visible { z-index:2;transform:translateX(2px);border-color:var(--battle-ui-accent);background:var(--battle-ui-card-hover); } .battle-roster-slot.is-active { border-color:#5bd889;background:color-mix(in srgb,#5bd889 12%,var(--battle-ui-card));box-shadow:inset 3px 0 #5bd889; } .battle-roster-slot.is-ready:not(.is-active) { border-color:color-mix(in srgb,var(--battle-ui-accent) 58%,var(--battle-ui-border)); } .battle-roster-slot.is-ko { filter:grayscale(.8);opacity:.48; } .battle-roster-slot.is-empty { opacity:.42;cursor:default; } .battle-roster-portrait,.battle-roster-slot.is-empty > i { grid-column:1;grid-row:1;position:relative;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--battle-ui-accent) 8%,var(--battle-ui-surface-soft));overflow:hidden; } .battle-roster-portrait img { width:100%;height:100%;object-fit:contain; } .battle-roster-slot.is-empty > i::before { content:'+';color:var(--battle-ui-muted);font-size:17px;font-style:normal; } .battle-roster-slot > kbd { position:absolute;z-index:3;left:2px;top:2px;min-width:15px;height:15px;padding:0 2px;display:grid;place-items:center;border:1px solid var(--battle-ui-border);border-radius:5px;background:var(--battle-ui-surface);color:var(--battle-ui-muted);font:900 5px system-ui; } .battle-roster-slot > span { min-width:0;display:grid;gap:2px; } .battle-roster-slot > span b,.battle-roster-slot > span small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .battle-roster-slot > span b { color:var(--battle-ui-text);font-size:7px; } .battle-roster-slot > span small { color:var(--battle-ui-muted);font-size:5px; } .battle-roster-hp,.battle-roster-energy { position:relative;height:3px;display:block;overflow:hidden;border-radius:3px;background:color-mix(in srgb,var(--battle-ui-muted) 20%,transparent); } .battle-roster-hp em,.battle-roster-energy em { position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,#43c87c,#7fe394); } .battle-roster-energy em { background:linear-gradient(90deg,#2e9ce8,#62d8ff); } .battle-roster-slot > strong { position:absolute;right:4px;top:4px;padding:2px 3px;border-radius:4px;background:var(--battle-ui-surface);color:var(--battle-ui-muted);font-size:4.5px;letter-spacing:.05em; } .battle-roster-slot.is-active > strong { background:#36b86c;color:#fff; } .battle-tactics { position:absolute; z-index:35; right:64px; top:calc(var(--battle-shell-pad) + var(--battle-shell-head) + var(--battle-shell-gap) + 18px); width:min(316px,calc(100% - 156px)); box-sizing:border-box; padding:12px; display:grid; gap:10px; overflow:auto; border:1px solid var(--battle-ui-border); border-radius:18px; opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transform-origin:top right; pointer-events:none; transition:opacity .18s,transform .18s,visibility .18s; backdrop-filter:blur(18px); } .battle-tactics.is-open { opacity:1;visibility:visible;transform:none;pointer-events:auto; } .battle-tactics > header { display:flex;align-items:center;justify-content:space-between;gap:10px; } .battle-tactics > header span { display:grid; } .battle-tactics > header small { color:var(--battle-ui-accent);font-size:6px;font-weight:950;letter-spacing:.12em; } .battle-tactics > header b { color:var(--battle-ui-text);font-size:13px; } .battle-tactics > header button { width:28px;height:28px;padding:0;display:grid;place-items:center;border:1px solid var(--battle-ui-border);border-radius:9px;background:var(--battle-ui-card);color:var(--battle-ui-text);font-size:17px; } .battle-tactic-modes { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; } .battle-tactic-modes button { min-width:0;padding:8px 5px;display:grid;justify-items:center;gap:5px;border-radius:12px; } .battle-tactic-modes button > svg { width:20px;height:20px;color:var(--battle-ui-accent); } .battle-tactic-modes button > span { min-width:0;display:grid;gap:2px;text-align:center; } .battle-tactic-modes button b { color:var(--battle-ui-text);font-size:7px; } .battle-tactic-modes button small { color:var(--battle-ui-muted);font-size:5px;line-height:1.25; } .battle-tactic-rules { display:grid;gap:5px; } .battle-tactic-rules label { padding:7px 8px;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;border:1px solid var(--battle-ui-border);border-radius:11px;background:var(--battle-ui-card);cursor:pointer; } .battle-tactic-rules input { width:30px;height:17px;margin:0;appearance:none;border:1px solid var(--battle-ui-border);border-radius:12px;background:var(--battle-ui-surface-soft);transition:background .15s; } .battle-tactic-rules input::after { content:'';display:block;width:13px;height:13px;margin:1px;border-radius:50%;background:var(--battle-ui-muted);transition:transform .15s,background .15s; } .battle-tactic-rules input:checked { border-color:var(--battle-ui-accent);background:color-mix(in srgb,var(--battle-ui-accent) 42%,var(--battle-ui-surface)); } .battle-tactic-rules input:checked::after { transform:translateX(13px);background:#fff; } .battle-tactic-rules span { display:grid;gap:2px; } .battle-tactic-rules b { color:var(--battle-ui-text);font-size:7px; } .battle-tactic-rules small { color:var(--battle-ui-muted);font-size:5.5px; } .battle-tactics > footer { padding-top:8px;border-top:1px solid var(--battle-ui-border);color:var(--battle-ui-muted);font-size:5.5px;line-height:1.4;text-align:center; } .battle-shell > .battle-utility-rail { right:14px!important; } .battle-utility-rail button { border-color:var(--battle-ui-border)!important;background:var(--battle-ui-surface)!important;color:var(--battle-ui-text)!important; } .battle-utility-rail button:hover,.battle-utility-rail button:focus-visible { border-color:var(--battle-ui-accent)!important;background:var(--battle-ui-card-hover)!important; } .battle-utility-rail button b { background:var(--battle-ui-surface)!important;color:var(--battle-ui-text)!important; } /* The world remains alive; application windows intentionally rise above combat. */ body.is-battling :is(.world-topbar,#partyHud,#playerProfileButton,#playerStaminaHud,#questWidget,#worldMinimapShell,#desktopDock,#desktopUtilityRail,#desktopMoreMenu,.mobile-dock) { opacity:1!important; visibility:visible!important; pointer-events:auto!important; } body.is-battling .chat-panel.is-minimized { opacity:1!important;visibility:visible!important;pointer-events:auto!important; } body.is-battling .chat-panel.is-open { z-index:242!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important; } body.is-battling .side-panel.is-open { z-index:243!important; } @media (max-width:800px) { .game-screen .battle-panel { --battle-shell-width:calc(100vw - 8px); --battle-shell-height:calc(100dvh - 78px - env(safe-area-inset-bottom)); } .battle-shell { top:4px!important;min-height:350px; } .battle-roster-panel { left:6px; top:calc(var(--battle-shell-pad) + var(--battle-shell-head) + var(--battle-shell-gap) + 48px); bottom:calc(var(--battle-shell-pad) + var(--battle-shell-command) + var(--battle-shell-gap) + 8px); width:44px; padding:4px; grid-template-rows:minmax(0,1fr); border-radius:13px; } .battle-roster-panel > header,.battle-roster-panel > p { display:none; } .battle-roster { gap:3px; } .battle-roster-slot { padding:2px;display:grid;grid-template-columns:1fr;border-radius:9px; } .battle-roster-portrait,.battle-roster-slot.is-empty > i { width:32px;height:32px;justify-self:center;border-radius:8px; } .battle-roster-slot > span { position:absolute;left:3px;right:3px;bottom:2px;display:block; } .battle-roster-slot > span b,.battle-roster-slot > span small,.battle-roster-slot > span .battle-roster-energy { display:none; } .battle-roster-slot > span .battle-roster-hp { height:3px; } .battle-roster-slot > kbd,.battle-roster-slot > strong { display:none; } .battle-health > .ally-health { left:48px!important; } .battle-tactics { right:6px;top:calc(var(--battle-shell-pad) + var(--battle-shell-head) + var(--battle-shell-gap) + 6px);width:calc(100% - 12px);max-height:calc(100% - var(--battle-shell-head) - var(--battle-shell-command) - 24px);padding:9px;border-radius:15px; } .battle-tactic-modes button small { display:none; } .battle-tactic-rules label { padding:6px 7px; } .battle-shell > .battle-utility-rail { right:5px!important; } body.is-battling .mobile-dock { z-index:23!important; } body.is-battling .chat-panel.is-open,body.is-battling .side-panel.is-open { z-index:243!important; } } @media (max-height:650px) and (max-width:900px) and (orientation:landscape) { .game-screen .battle-panel { --battle-shell-height:calc(100dvh - 8px); } .battle-roster-panel { top:calc(var(--battle-shell-pad) + var(--battle-shell-head) + var(--battle-shell-gap) + 30px);bottom:calc(var(--battle-shell-pad) + var(--battle-shell-command) + var(--battle-shell-gap) + 4px);width:38px;padding:3px; } .battle-roster-panel > header,.battle-roster-panel > p { display:none; } .battle-roster { gap:2px; } .battle-roster-slot { padding:1px;display:grid;grid-template-columns:1fr;border-radius:8px; } .battle-roster-portrait,.battle-roster-slot.is-empty > i { width:28px;height:28px; } .battle-roster-slot > span { position:absolute;left:2px;right:2px;bottom:1px;display:block; } .battle-roster-slot > span b,.battle-roster-slot > span small,.battle-roster-slot > span .battle-roster-energy { display:none; } .battle-roster-slot > span .battle-roster-hp { height:2px; } .battle-roster-slot > kbd,.battle-roster-slot > strong { display:none; } .battle-health > .ally-health { left:42px!important; } .battle-tactics { top:46px;right:5px;width:min(310px,56vw);max-height:calc(100% - 52px); } .battle-tactic-modes button { padding:5px 3px; }.battle-tactic-rules { gap:3px; }.battle-tactic-rules label { padding:4px 6px; } } @media (prefers-reduced-motion:reduce) { .battle-roster-slot,.battle-tactics,.battle-tactic-rules input,.battle-tactic-rules input::after { transition:none!important; } } /* v2.9.5 — compact responsive battle room, collision-safe messenger and crisp combat feedback */ @property --cooldown-sweep { syntax:''; inherits:true; initial-value:0deg; } .game-screen .battle-panel { --battle-shell-width:min(1180px,78vw,calc(100vw - 48px)); --battle-shell-height:min(760px,82dvh,calc(100dvh - 132px)); --battle-shell-head:48px; --battle-shell-command:88px; --battle-shell-gap:6px; --battle-shell-pad:7px; --battle-slot:50px; --battle-item-slot:38px; } .game-screen .battle-panel::before { filter:none!important; } html[data-game-theme="light"] .game-screen .battle-panel::before, html[data-game-theme="dark"] .game-screen .battle-panel::before { background:transparent!important; } .battle-shell { top:calc(50% - 20px)!important; min-width:720px; min-height:500px; border-radius:23px!important; background:rgba(2,25,34,.075)!important; box-shadow:0 24px 68px rgba(0,16,24,.32),0 0 0 1px rgba(255,255,255,.06),inset 0 1px rgba(255,255,255,.14)!important; transition:left .22s ease,right .22s ease,width .22s ease,opacity .18s ease,transform .22s ease; } html[data-game-theme="light"] .battle-shell { --battle-ui-surface:rgba(250,253,255,.94); --battle-ui-surface-soft:rgba(237,247,251,.92); --battle-ui-card:rgba(255,255,255,.93); --battle-ui-card-hover:rgba(237,248,252,.98); background:rgba(232,247,251,.075)!important; box-shadow:0 22px 62px rgba(23,63,81,.20),0 0 0 1px rgba(255,255,255,.5),inset 0 1px rgba(255,255,255,.52)!important; } .battle-shell::after { box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important; } .battle-shell > .battle-status { padding:5px 8px!important; border-radius:15px!important; box-shadow:0 6px 17px color-mix(in srgb,var(--battle-ui-shadow) 66%,transparent),inset 0 1px rgba(255,255,255,.12)!important; } .battle-status > span > strong { max-width:360px;font-size:12px!important; } .battle-controls { gap:4px!important; } .battle-controls button { min-height:32px!important;padding:0 9px!important;border-radius:10px!important;font-size:7px!important; } .battle-controls button > i,.battle-controls button > svg { width:15px!important;height:15px!important; } .battle-shell > .battle-stage { border-radius:18px!important; box-shadow:0 10px 29px rgba(0,20,27,.18),inset 0 1px rgba(255,255,255,.2)!important; } .battle-stage::before { background:transparent!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 -24px 50px rgba(2,25,30,.035)!important; } .battle-stage::after { background:radial-gradient(circle at 50% 48%,transparent 0 66%,rgba(2,27,34,.035) 88%,rgba(2,22,29,.095))!important; } html[data-game-theme="light"] .battle-stage::after { background:radial-gradient(circle at 50% 48%,transparent 0 72%,rgba(18,54,67,.045) 100%)!important; } /* Six server-backed team slots are visible without stealing a vertical strip from the arena. */ .battle-roster-panel { left:17px!important; top:calc(var(--battle-shell-pad) + var(--battle-shell-head) + var(--battle-shell-gap) + 10px)!important; right:auto!important; bottom:auto!important; width:min(500px,calc(100% - 360px))!important; height:56px!important; min-height:56px!important; padding:5px 6px!important; grid-template-columns:88px minmax(0,1fr)!important; grid-template-rows:1fr!important; align-items:center; gap:6px!important; border-radius:15px!important; backdrop-filter:blur(10px) saturate(1.05)!important; } .battle-roster-panel > header { height:100%;padding-right:6px;border-right:1px solid var(--battle-ui-border); } .battle-roster-panel > header span { gap:2px; } .battle-roster-panel > header small { font-size:5.5px; } .battle-roster-panel > header b { font-size:7px; } .battle-roster-panel > header em { padding:3px 4px;font-size:5px; } .battle-roster-panel > p { display:none!important; } .battle-roster { height:100%; display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr))!important; grid-template-rows:1fr!important; gap:4px!important; } .battle-roster-slot { height:44px; min-height:44px; padding:2px!important; display:grid!important; grid-template-columns:1fr!important; place-items:center; border-radius:10px!important; } .battle-roster-slot:hover:not(:disabled),.battle-roster-slot:focus-visible { transform:translateY(-2px)!important; } .battle-roster-slot.is-active { box-shadow:inset 0 -3px #5bd889!important; } .battle-roster-portrait,.battle-roster-slot.is-empty > i { width:38px!important; height:38px!important; border-radius:9px!important; } .battle-roster-slot > span { position:absolute;left:3px;right:3px;bottom:2px;display:grid!important;gap:1px!important; } .battle-roster-slot > span > b,.battle-roster-slot > span > small { display:none!important; } .battle-roster-hp,.battle-roster-energy { height:2px!important; } .battle-roster-slot > kbd { left:1px!important;top:1px!important;min-width:14px!important;height:14px!important;font-size:4.5px!important; } .battle-roster-slot > strong { display:none!important; } .battle-health > .enemy-health { right:12px!important;top:12px!important; } .battle-health > .ally-health { left:12px!important;bottom:10px!important; } html[data-game-theme] .game-screen .battle-health > article, body[data-ui-theme] .game-screen .battle-health > article { width:clamp(190px,22%,238px)!important; padding:7px 8px!important; border-radius:13px!important; backdrop-filter:blur(8px) saturate(1.05)!important; } .battle-health .battle-status-chip { padding:1px 3px!important; } .battle-health .battle-status-chip svg { width:12px!important;height:12px!important; } /* The entire command surface is a compact floating bar inside the battle shell. */ .battle-shell > .battle-command-deck { width:min(720px,calc(100% - 32px))!important; height:100%!important; justify-self:center!important; padding:6px 9px 4px!important; grid-template-columns:var(--battle-slot) auto auto!important; grid-template-rows:52px minmax(13px,1fr)!important; gap:3px 7px!important; border-radius:17px!important; background:linear-gradient(145deg,var(--battle-ui-surface),var(--battle-ui-surface-soft))!important; box-shadow:0 8px 22px color-mix(in srgb,var(--battle-ui-shadow) 72%,transparent),inset 0 1px rgba(255,255,255,.13)!important; backdrop-filter:blur(12px) saturate(1.05)!important; } .battle-basic,.battle-skills > button { width:var(--battle-slot)!important; height:var(--battle-slot)!important; min-width:var(--battle-slot)!important; min-height:var(--battle-slot)!important; border-radius:12px!important; } .battle-basic > span:first-child,.battle-skills > button > .skill-icon { width:42px!important;height:42px!important;border-radius:9px!important; } .battle-skills { grid-template-columns:repeat(4,var(--battle-slot))!important;grid-template-rows:var(--battle-slot)!important;gap:5px!important; } .battle-quick-items { grid-template-columns:repeat(4,var(--battle-item-slot))!important;grid-template-rows:var(--battle-slot)!important;gap:4px!important; } .battle-quick-item { width:var(--battle-item-slot)!important; height:var(--battle-slot)!important; min-width:var(--battle-item-slot)!important; min-height:var(--battle-slot)!important; border-radius:11px!important; } .battle-quick-item > span { width:31px!important;height:34px!important;padding:0!important;background:transparent!important; } .battle-quick-item .battle-item-icon { width:100%!important;height:100%!important;overflow:visible;filter:drop-shadow(0 3px 3px rgba(0,20,31,.24)); } .battle-quick-item > em { padding:2px!important;font-size:4px!important; } .battle-command-deck .battle-footer { padding:0 7px!important;background:transparent!important; } .battle-footer > p { font-size:6.5px!important; } .battle-command-deck .battle-decision,.battle-command-deck .capture-panel { width:100%!important; } .battle-panel[data-phase="decision"] .battle-command-deck,.battle-panel.is-capture .battle-command-deck { width:min(720px,calc(100% - 32px))!important; } .skill-cooldown { background:conic-gradient(from 0deg,rgba(1,14,22,.84) 0 var(--cooldown-sweep),rgba(4,25,34,.13) var(--cooldown-sweep) 360deg)!important; transition:--cooldown-sweep .12s linear,opacity .14s ease!important; } .skill-cooldown > b { min-width:24px;height:24px;font-size:10px; } .battle-action-slot.is-just-ready,.battle-quick-item.is-just-ready { animation:battle-control-ready .72s cubic-bezier(.2,.75,.25,1); } .battle-action-slot.is-just-ready::after,.battle-quick-item.is-just-ready::before { content:''; position:absolute; z-index:10; inset:-4px; border:2px solid #7ff0b4; border-radius:inherit; pointer-events:none; animation:battle-ready-ring .72s ease-out both; } .battle-skills > button.skill-kind-ultimate:not(.is-cooling) { box-shadow:inset 0 0 14px rgba(236,191,79,.08),0 0 0 1px rgba(236,191,79,.08)!important; } .battle-skills > button.is-queued,.battle-basic.is-queued { animation:battle-command-queued .74s ease-in-out infinite alternate!important; } .battle-shell > .battle-utility-rail { right:10px!important;gap:4px!important; } .battle-utility-rail button { width:32px!important;height:32px!important;border-radius:10px!important; } .battle-utility-rail button span,.battle-utility-rail button svg { width:15px!important;height:15px!important; } /* A minimized chat stays below the medium battle window. Large desktops can show full windows beside combat. */ @supports selector(body:has(*)) { @media (min-width:1900px) { body.is-battling:has(.chat-panel.is-open:not(.is-minimized)) .battle-shell { left:auto!important; right:18px!important; width:min(1040px,calc(100vw - 1000px))!important; transform:translateY(-50%)!important; } body.is-battling:has(.side-panel.is-open) .battle-shell { left:18px!important; right:auto!important; width:min(1040px,calc(100vw - 1000px))!important; transform:translateY(-50%)!important; } } @media (max-width:1899px) { body.is-battling:has(.chat-panel.is-open:not(.is-minimized)) .battle-shell, body.is-battling:has(.side-panel.is-open) .battle-shell { opacity:.08!important; pointer-events:none!important; } } } @media (min-width:801px) and (max-width:1180px) { .game-screen .battle-panel { --battle-shell-width:min(940px,88vw,calc(100vw - 32px)); --battle-shell-height:min(680px,80dvh,calc(100dvh - 108px)); } .battle-shell { min-width:700px;min-height:480px; } .battle-roster-panel { width:min(430px,calc(100% - 320px))!important;grid-template-columns:72px minmax(0,1fr)!important; } .battle-roster-panel > header b { display:none; } .battle-shell > .battle-command-deck { width:min(680px,calc(100% - 24px))!important; } } @media (max-width:800px) { .game-screen .battle-panel { --battle-shell-width:calc(100vw - 12px); --battle-shell-height:min(680px,calc(100dvh - 82px - env(safe-area-inset-bottom))); --battle-shell-head:44px; --battle-shell-command:116px; --battle-shell-gap:4px; --battle-shell-pad:4px; --battle-slot:44px; --battle-item-slot:32px; } .battle-shell { left:50%!important; right:auto!important; top:calc(50% - 37px)!important; min-width:0!important; min-height:480px!important; transform:translate(-50%,-50%)!important; border-radius:18px!important; } .battle-shell > .battle-status { height:44px!important;padding:4px 5px!important;border-radius:12px!important; } .battle-status > span > small,.battle-status > span > strong { max-width:38vw!important; } .battle-status > span > strong { font-size:8px!important; } .battle-controls button { min-width:29px!important;min-height:29px!important;padding:0 4px!important; } .battle-controls button > b { display:none!important; } .battle-shell > .battle-stage { border-radius:14px!important; } .battle-roster-panel { left:8px!important; top:calc(var(--battle-shell-pad) + var(--battle-shell-head) + var(--battle-shell-gap) + 6px)!important; width:calc(100% - 16px)!important; height:48px!important; min-height:48px!important; padding:3px 4px!important; display:grid!important; grid-template-columns:1fr!important; border-radius:12px!important; } .battle-roster-panel > header,.battle-roster-panel > p { display:none!important; } .battle-roster { grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-template-rows:42px!important;gap:3px!important; } .battle-roster-slot { height:42px!important;min-height:42px!important;border-radius:9px!important; } .battle-roster-portrait,.battle-roster-slot.is-empty > i { width:36px!important;height:36px!important; } .battle-roster-slot > kbd { display:none!important; } .battle-health > .enemy-health { top:52px!important;right:5px!important; } .battle-health > .ally-health { left:5px!important;bottom:5px!important; } html[data-game-theme] .game-screen .battle-health > article,body[data-ui-theme] .game-screen .battle-health > article { width:48%!important;padding:5px 6px!important; } .battle-shell > .battle-command-deck { width:calc(100% - 10px)!important; padding:6px 6px 3px!important; grid-template-columns:40px 92px 68px!important; grid-template-rows:92px minmax(13px,1fr)!important; gap:3px 5px!important; border-radius:13px!important; } .battle-command-deck .battle-basic { width:40px!important;height:44px!important;min-width:40px!important;min-height:44px!important;align-self:start!important; } .battle-basic > span:first-child { width:34px!important;height:36px!important; } .battle-command-deck .battle-skills { grid-template-columns:repeat(2,44px)!important;grid-template-rows:repeat(2,44px)!important;gap:4px!important; } .battle-skills > button { width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important; } .battle-skills > button > .skill-icon { width:37px!important;height:37px!important; } .battle-command-deck .battle-quick-items { grid-template-columns:repeat(2,32px)!important;grid-template-rows:repeat(2,44px)!important;gap:4px!important; } .battle-quick-item { width:32px!important;height:44px!important;min-width:32px!important;min-height:44px!important; } .battle-quick-item > span { width:28px!important;height:31px!important; } .battle-footer > p { font-size:5.3px!important; } .battle-command-deck .battle-decision { grid-template-columns:1fr 1fr!important;grid-template-rows:auto 37px!important; } .battle-command-deck .battle-decision > span { grid-column:1/-1!important; } .battle-shell > .battle-utility-rail { display:none!important; } .battle-skill-preview { width:calc(var(--battle-shell-width) - 18px)!important; } body.is-battling .mobile-dock { z-index:23!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important; } body.is-battling .chat-panel.is-open,body.is-battling .side-panel.is-open { z-index:243!important; } } @media (max-width:430px) { .game-screen .battle-panel { --battle-shell-width:calc(100vw - 8px); } .battle-shell { min-height:450px!important; } .battle-roster-panel { left:6px!important;width:calc(100% - 12px)!important; } .battle-roster-portrait,.battle-roster-slot.is-empty > i { width:33px!important;height:33px!important; } .battle-status > span > small,.battle-status > span > strong { max-width:33vw!important; } .battle-health .battle-stamina { display:flex!important; } } @media (max-height:650px) and (max-width:900px) and (orientation:landscape) { .game-screen .battle-panel { --battle-shell-width:min(880px,calc(100vw - 10px)); --battle-shell-height:calc(100dvh - 10px); --battle-shell-head:40px; --battle-shell-command:62px; --battle-slot:42px; --battle-item-slot:31px; } .battle-shell { left:50%!important;top:50%!important;min-height:300px!important;transform:translate(-50%,-50%)!important; } .battle-roster-panel { top:47px!important;left:7px!important;width:min(390px,calc(100% - 300px))!important;height:42px!important;min-height:42px!important;grid-template-columns:1fr!important; } .battle-roster-panel > header,.battle-roster-panel > p { display:none!important; } .battle-roster { grid-template-rows:36px!important; } .battle-roster-slot { height:36px!important;min-height:36px!important; } .battle-roster-portrait,.battle-roster-slot.is-empty > i { width:31px!important;height:31px!important; } .battle-health > .enemy-health { top:41px!important; }.battle-health > .ally-health { bottom:4px!important; } .battle-shell > .battle-command-deck { width:min(630px,calc(100% - 16px))!important;grid-template-columns:38px auto auto!important;grid-template-rows:46px!important;padding:5px 7px!important; } .battle-command-deck .battle-basic { width:38px!important;height:40px!important;min-width:38px!important;min-height:40px!important; } .battle-command-deck .battle-skills { grid-template-columns:repeat(4,42px)!important;grid-template-rows:42px!important; } .battle-skills > button { width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important; } .battle-command-deck .battle-quick-items { grid-template-columns:repeat(4,31px)!important;grid-template-rows:42px!important; } .battle-quick-item { width:31px!important;height:42px!important;min-width:31px!important;min-height:42px!important; } .battle-command-deck .battle-footer { display:none!important; } .battle-shell > .battle-utility-rail { display:none!important; } } @keyframes battle-control-ready { 0% { transform:scale(.92);filter:brightness(1); } 46% { transform:scale(1.08);filter:brightness(1.26) saturate(1.2); } 100% { transform:scale(1);filter:brightness(1); } } @keyframes battle-ready-ring { 0% { opacity:.95;transform:scale(.84); } 100% { opacity:0;transform:scale(1.18); } } @keyframes battle-command-queued { from { box-shadow:0 0 0 1px rgba(92,225,255,.22),0 0 8px rgba(77,211,245,.1); } to { box-shadow:0 0 0 2px rgba(92,225,255,.38),0 0 18px rgba(77,211,245,.23); } } @media (prefers-reduced-motion:reduce) { .battle-shell,.skill-cooldown,.battle-action-slot.is-just-ready,.battle-quick-item.is-just-ready, .battle-action-slot.is-just-ready::after,.battle-quick-item.is-just-ready::before, .battle-skills > button.is-queued,.battle-basic.is-queued { animation:none!important;transition:none!important; } } /* v2.9.6 — complete compact battle-room redesign */ .game-screen .battle-panel { --battle-shell-width:min(1040px,72vw,calc(100vw - 180px)); --battle-shell-height:min(650px,76dvh,calc(100dvh - 140px)); --battle-control:#28a7e8; --battle-control-ready:#5bd889; --battle-ultimate:#e8b84d; } .game-screen .battle-panel::before { background:transparent!important;backdrop-filter:none!important; } .game-screen .battle-panel .battle-shell { left:50%!important; right:auto!important; top:calc(50% - 18px)!important; min-width:760px!important; min-height:500px!important; padding:0!important; display:block!important; overflow:visible!important; transform:translate(-50%,-50%)!important; border:0!important; border-radius:22px!important; background:transparent!important; box-shadow:0 26px 70px rgba(0,18,27,.3)!important; } .game-screen .battle-panel .battle-shell::after { inset:0!important;border-radius:22px!important;box-shadow:0 0 0 1px rgba(227,249,255,.48),inset 0 0 0 2px rgba(255,255,255,.08)!important; } .game-screen .battle-panel .battle-stage { position:relative!important; inset:auto!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; box-sizing:border-box!important; overflow:hidden!important; transform:none!important; border:1px solid rgba(218,245,252,.62)!important; border-radius:22px!important; box-shadow:0 18px 48px rgba(0,20,28,.23),inset 0 1px rgba(255,255,255,.3)!important; pointer-events:none; } .game-screen .battle-panel .battle-stage::before { box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),inset 0 -32px 70px rgba(2,23,30,.035)!important; } .game-screen .battle-panel .battle-stage::after { background:radial-gradient(circle at 50% 48%,transparent 0 72%,rgba(2,23,30,.065) 100%)!important; } html[data-game-theme="light"] .game-screen .battle-panel .battle-stage::after { background:radial-gradient(circle at 50% 48%,transparent 0 78%,rgba(18,54,67,.04) 100%)!important; } /* Title and controls are two small overlays, never a full-width white header. */ .game-screen .battle-stage > .battle-status { position:absolute!important; z-index:34!important; inset:9px 10px auto 10px!important; width:auto!important; min-width:0!important; min-height:0!important; height:38px!important; padding:0!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; transform:none!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; pointer-events:none!important; } .battle-stage > .battle-status > span { min-width:0; height:38px; padding:5px 10px; display:grid; align-content:center; border:1px solid var(--battle-ui-border); border-radius:13px; background:linear-gradient(145deg,var(--battle-ui-surface),var(--battle-ui-surface-soft)); box-shadow:0 7px 19px var(--battle-ui-shadow),inset 0 1px rgba(255,255,255,.14); backdrop-filter:blur(10px) saturate(1.04); pointer-events:auto; } .battle-stage > .battle-status > span > small { display:flex!important;align-items:center;gap:4px;color:var(--battle-ui-accent)!important;font-size:8px!important;font-weight:950;letter-spacing:.08em; } .battle-stage > .battle-status > span > small i,.battle-stage > .battle-status > span > small svg { width:12px!important;height:12px!important; } .battle-stage > .battle-status > span > strong { max-width:270px!important;margin-top:1px;color:var(--battle-ui-text)!important;font-size:12px!important;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .battle-stage > .battle-status .battle-controls { height:38px; padding:3px; display:flex!important; align-items:center; gap:3px!important; border:1px solid var(--battle-ui-border); border-radius:13px; background:linear-gradient(145deg,var(--battle-ui-surface),var(--battle-ui-surface-soft)); box-shadow:0 7px 19px var(--battle-ui-shadow),inset 0 1px rgba(255,255,255,.14); backdrop-filter:blur(10px) saturate(1.04); pointer-events:auto; } .battle-stage > .battle-status .battle-controls button { width:auto!important; min-width:30px!important; height:30px!important; min-height:30px!important; padding:0 7px!important; display:flex!important; align-items:center; justify-content:center; gap:4px; border:0!important; border-radius:10px!important; background:transparent!important; color:var(--battle-ui-muted)!important; box-shadow:none!important; font-size:8px!important; font-weight:900!important; } .battle-stage > .battle-status .battle-controls button:hover,.battle-stage > .battle-status .battle-controls button:focus-visible,.battle-stage > .battle-status .battle-controls button.is-active { background:color-mix(in srgb,var(--battle-ui-accent) 13%,var(--battle-ui-card))!important;color:var(--battle-ui-accent)!important; } .battle-stage > .battle-status .battle-controls button > i,.battle-stage > .battle-status .battle-controls button > svg { width:14px!important;height:14px!important; } .battle-stage > .battle-status #cancelBattle { color:#df6a63!important; } .battle-stage > .battle-status #cancelBattle:hover { background:rgba(223,106,99,.12)!important;color:#e6534c!important; } .battle-turn-chip { z-index:32!important;top:10px!important;min-height:36px!important;padding:4px 9px!important;border-radius:12px!important;backdrop-filter:blur(9px)!important; } .battle-turn-chip small { font-size:7px!important; }.battle-turn-chip b { font-size:9px!important; } /* Large top participant cards with real emoji identity. */ .game-screen .battle-stage > .battle-health { position:absolute!important; z-index:21!important; inset:0!important; width:100%!important; height:100%!important; transform:none!important; pointer-events:none!important; } html[data-game-theme] .game-screen .battle-stage .battle-health > article, body[data-ui-theme] .game-screen .battle-stage .battle-health > article { position:absolute!important; top:57px!important; bottom:auto!important; width:250px!important; min-height:84px!important; box-sizing:border-box!important; padding:8px 9px!important; display:grid!important; grid-template-columns:58px minmax(0,1fr)!important; grid-template-rows:auto 7px auto auto auto!important; column-gap:9px!important; row-gap:3px!important; overflow:visible!important; border:1px solid var(--battle-ui-border)!important; border-radius:16px!important; background:linear-gradient(145deg,var(--battle-ui-surface),var(--battle-ui-surface-soft))!important; color:var(--battle-ui-text)!important; box-shadow:0 9px 24px var(--battle-ui-shadow),inset 0 1px rgba(255,255,255,.15)!important; backdrop-filter:blur(11px) saturate(1.05)!important; } .battle-stage .battle-health > .ally-health { left:11px!important;right:auto!important; } .battle-stage .battle-health > .enemy-health { right:11px!important;left:auto!important; } .battle-combat-portrait { grid-column:1!important; grid-row:1/6!important; align-self:center; width:58px!important; height:58px!important; display:grid!important; place-items:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--battle-ui-accent) 28%,var(--battle-ui-border)); border-radius:16px; background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--battle-ui-accent) 12%,var(--battle-ui-card)),var(--battle-ui-surface-soft)); box-shadow:inset 0 1px rgba(255,255,255,.2); } .battle-combat-portrait-art,.battle-combat-portrait-art img { width:100%!important;height:100%!important;display:block;object-fit:contain; } .battle-stage .battle-health > article > span { grid-column:2!important;grid-row:1!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:5px!important; } .battle-stage .battle-health > article > span b { min-width:0;color:var(--battle-ui-text)!important;font-size:12px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .battle-stage .battle-health > article > span small { flex:0 0 auto;color:var(--battle-ui-muted)!important;font-size:9px!important;font-weight:850; } .battle-stage .battle-health .battle-hp-bar { grid-column:2!important;grid-row:2!important;height:7px!important;border-radius:7px!important;background:color-mix(in srgb,var(--battle-ui-muted) 16%,transparent)!important; } .battle-stage .battle-health .battle-stamina { grid-column:2!important;grid-row:3!important;margin:0!important;display:grid!important;grid-template-columns:35px minmax(0,1fr)!important;align-items:center!important;gap:5px!important; } .battle-stage .battle-health .battle-stamina > span { display:flex!important;justify-content:space-between!important;gap:3px!important; } .battle-stage .battle-health .battle-stamina > span b,.battle-stage .battle-health .battle-stamina > span small { font-size:7px!important; } .battle-stage .battle-health .battle-stamina > i { height:4px!important;border-radius:4px!important; } .battle-stage .battle-health .battle-statuses { grid-column:2!important;grid-row:4!important;margin:0!important;display:flex!important;gap:2px!important;min-height:0!important;max-height:19px;overflow-x:auto;pointer-events:auto!important;scrollbar-width:none; } .battle-stage .battle-health .battle-statuses:empty { display:none!important; } .battle-stage .battle-health .battle-status-chip { min-width:19px!important;height:18px!important;padding:1px 3px!important;border-radius:6px!important; } .battle-stage .battle-health .battle-status-chip svg { width:11px!important;height:11px!important; } .battle-stage .battle-health .battle-status-chip b { display:none!important; } .battle-stage .battle-health .battle-status-chip small { font-size:7px!important; } .battle-stage .battle-health .battle-exp { grid-column:2!important;grid-row:5!important;margin:0!important;display:block!important; } .battle-stage .battle-health .battle-exp[hidden] { display:none!important; } .battle-stage .battle-health .battle-exp > span { margin:0 0 2px!important; }.battle-stage .battle-health .battle-exp > span b,.battle-stage .battle-health .battle-exp > span small { font-size:7px!important; } .battle-stage .battle-health .battle-exp > i { height:3px!important; } .battle-stage .battle-health > article.is-low-hp { border-color:rgba(236,94,85,.68)!important;box-shadow:0 9px 24px var(--battle-ui-shadow),0 0 0 2px rgba(236,94,85,.11),inset 0 1px rgba(255,255,255,.15)!important; } .battle-stage .battle-health > article.is-knocked-out { filter:saturate(.42);opacity:.72; } .battle-stage .battle-health > article.has-shield .battle-combat-portrait { box-shadow:0 0 0 2px rgba(82,198,255,.18),inset 0 1px rgba(255,255,255,.2); } /* Six circular team slots on the right; Poké Ball means a genuinely empty slot. */ .game-screen .battle-stage > .battle-roster-panel { position:absolute!important; z-index:30!important; left:auto!important; right:9px!important; bottom:auto!important; width:54px!important; height:auto!important; min-height:0!important; box-sizing:border-box!important; padding:5px!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:18px auto!important; gap:4px!important; transform:translateY(-38%)!important; overflow:visible!important; border:1px solid var(--battle-ui-border)!important; border-radius:18px!important; background:linear-gradient(145deg,var(--battle-ui-surface),var(--battle-ui-surface-soft))!important; box-shadow:0 10px 27px var(--battle-ui-shadow),inset 0 1px rgba(255,255,255,.14)!important; backdrop-filter:blur(11px) saturate(1.04)!important; pointer-events:auto!important; } .battle-stage .battle-roster-panel > header { height:18px!important;padding:0!important;display:grid!important;place-items:center!important;border:0!important; } .battle-stage .battle-roster-panel > header span { display:none!important; } .battle-stage .battle-roster-panel > header em { max-width:44px!important;padding:2px 4px!important;border:0!important;border-radius:7px!important;background:color-mix(in srgb,var(--battle-control-ready) 14%,transparent)!important;color:var(--battle-control-ready)!important;font-size:7px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .battle-stage .battle-roster-panel > header em.is-cooling { background:rgba(232,184,77,.13)!important;color:var(--battle-ultimate)!important; } .battle-stage .battle-roster-panel > p { display:none!important; } .battle-stage .battle-roster { width:44px!important; height:auto!important; min-height:0!important; display:grid!important; grid-template-columns:44px!important; grid-template-rows:repeat(6,44px)!important; gap:4px!important; } .battle-stage .battle-roster-slot { position:relative!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; padding:2px!important; display:grid!important; place-items:center!important; overflow:visible!important; border:1px solid var(--battle-ui-border)!important; border-radius:50%!important; background:var(--battle-ui-card)!important; box-shadow:inset 0 1px rgba(255,255,255,.16)!important; } .battle-stage .battle-roster-slot:hover:not(:disabled),.battle-stage .battle-roster-slot:focus-visible { z-index:4;transform:scale(1.06)!important;border-color:var(--battle-ui-accent)!important; } .battle-stage .battle-roster-slot.is-active { border-color:var(--battle-control-ready)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--battle-control-ready) 26%,transparent),inset 0 1px rgba(255,255,255,.18)!important; } .battle-stage .battle-roster-slot.is-ready:not(.is-active) { border-color:color-mix(in srgb,var(--battle-ui-accent) 56%,var(--battle-ui-border))!important; } .battle-stage .battle-roster-slot.is-ko { filter:grayscale(.88)!important;opacity:.48!important; } .battle-stage .battle-roster-portrait,.battle-stage .battle-roster-slot.is-empty > .battle-roster-empty { position:relative!important; width:38px!important; height:38px!important; display:grid!important; place-items:center!important; overflow:hidden!important; border:0!important; border-radius:50%!important; background:color-mix(in srgb,var(--battle-ui-accent) 7%,var(--battle-ui-surface-soft))!important; } .battle-stage .battle-roster-portrait img { width:100%!important;height:100%!important;object-fit:contain!important; } .battle-stage .battle-roster-empty::before { display:none!important;content:none!important; } .battle-stage .battle-roster-empty-ball { width:28px!important;height:28px!important;display:block!important;opacity:.58;filter:saturate(.72); } .battle-stage .battle-roster-slot > span { position:absolute!important;left:5px!important;right:5px!important;bottom:2px!important;display:block!important; } .battle-stage .battle-roster-slot > span b,.battle-stage .battle-roster-slot > span small,.battle-stage .battle-roster-slot > span .battle-roster-energy { display:none!important; } .battle-stage .battle-roster-slot > span .battle-roster-hp { display:block!important;height:3px!important;background:rgba(4,28,39,.28)!important; } .battle-stage .battle-roster-slot > kbd { left:-3px!important;top:-3px!important;min-width:15px!important;height:15px!important;padding:0 2px!important;border-radius:6px!important;font-size:7px!important; } .battle-stage .battle-roster-slot > strong { display:none!important; } /* Co-op target strips remain small and only appear when the mode needs them. */ .game-screen .battle-stage > .battle-team-strip,.game-screen .battle-stage > .battle-target-strip { z-index:25!important; top:58px!important; width:min(380px,38%)!important; transform:translateX(-50%)!important; } /* Compact circular MOBA dock: basic + Q/W/E + larger R + four consumables. */ .game-screen .battle-stage > .battle-command-deck { position:absolute!important; z-index:35!important; left:50%!important; right:auto!important; top:auto!important; bottom:9px!important; max-width:calc(100% - 136px)!important; height:92px!important; min-width:0!important; min-height:0!important; box-sizing:border-box!important; margin:0!important; padding:7px 10px 3px!important; display:grid!important; grid-template-columns:48px auto auto!important; grid-template-rows:70px 12px!important; justify-content:center!important; transform:translateX(-50%)!important; overflow:visible!important; border:1px solid var(--battle-ui-border)!important; border-radius:22px!important; background:linear-gradient(145deg,var(--battle-ui-surface),var(--battle-ui-surface-soft))!important; box-shadow:0 12px 32px var(--battle-ui-shadow),inset 0 1px rgba(255,255,255,.16)!important; backdrop-filter:blur(13px) saturate(1.05)!important; pointer-events:auto!important; } .battle-stage .battle-command-deck .battle-basic { --battle-control-diameter:46px; grid-column:1!important; grid-row:1!important; align-self:end!important; width:48px!important; height:66px!important; min-width:48px!important; min-height:66px!important; } .battle-stage .battle-command-deck .battle-skills { grid-column:2!important;grid-row:1!important; } .battle-stage .battle-command-deck .battle-quick-items { grid-column:3!important;grid-row:1!important; } .battle-stage .battle-basic,.battle-stage .battle-skills > button { --battle-control-diameter:52px; position:relative!important; width:56px!important; height:70px!important; min-width:56px!important; min-height:70px!important; padding:0 0 14px!important; display:grid!important; grid-template-rows:var(--battle-control-diameter) 12px!important; place-items:center!important; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; color:var(--battle-ui-text)!important; box-shadow:none!important; filter:none!important; } .battle-stage .battle-basic > span:first-child,.battle-stage .battle-skills > button > .skill-icon { grid-row:1!important; width:var(--battle-control-diameter)!important; height:var(--battle-control-diameter)!important; box-sizing:border-box!important; overflow:hidden!important; border:2px solid color-mix(in srgb,var(--battle-ui-accent) 38%,var(--battle-ui-border))!important; border-radius:50%!important; background:var(--battle-ui-card)!important; box-shadow:0 5px 13px color-mix(in srgb,var(--battle-ui-shadow) 70%,transparent),inset 0 1px rgba(255,255,255,.2)!important; transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease!important; } .battle-stage .battle-basic:hover:not(:disabled) > span:first-child,.battle-stage .battle-skills > button:hover > .skill-icon,.battle-stage .battle-basic:focus-visible > span:first-child,.battle-stage .battle-skills > button:focus-visible > .skill-icon { transform:translateY(-2px) scale(1.04)!important;border-color:var(--battle-ui-accent)!important;box-shadow:0 7px 18px color-mix(in srgb,var(--battle-ui-accent) 22%,transparent)!important; } .battle-stage .battle-basic > span:first-child svg { width:24px!important;height:24px!important; } .battle-stage .battle-skills > button > .skill-icon img { width:100%!important;height:100%!important;object-fit:cover!important; } .battle-stage .battle-skills { height:70px!important; padding:0!important; display:flex!important; align-items:end!important; justify-content:center!important; gap:3px!important; overflow:visible!important; } .battle-stage .battle-skills > button.skill-kind-ultimate { --battle-control-diameter:64px; width:68px!important; min-width:68px!important; height:80px!important; min-height:80px!important; margin:0 0 -1px 3px!important; padding-bottom:14px!important; } .battle-stage .battle-skills > button.skill-kind-ultimate > .skill-icon { border:3px solid color-mix(in srgb,var(--battle-ultimate) 76%,#fff)!important;box-shadow:0 0 0 3px rgba(232,184,77,.13),0 7px 18px rgba(70,42,3,.22)!important; } .battle-stage .battle-skills > button.skill-kind-ultimate > .battle-ultimate-badge { position:absolute;z-index:8;left:50%;top:calc(var(--battle-control-diameter) - 12px);padding:2px 5px;transform:translateX(-50%);border-radius:6px;background:var(--battle-ultimate);color:#422b05;font-size:6.5px;font-style:normal;font-weight:1000;letter-spacing:.05em;pointer-events:none; } .battle-stage .battle-basic > .battle-skill-name,.battle-stage .battle-skills > button > .battle-skill-name { grid-row:2!important; align-self:end!important; width:100%!important; display:block!important; color:var(--battle-ui-text)!important; font-size:8.5px!important; font-weight:900!important; line-height:1!important; text-align:center!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .battle-stage .battle-basic > small { position:absolute;right:0;bottom:12px;display:block!important;color:var(--battle-ui-accent)!important;font-size:7px!important;font-weight:900; } .battle-stage .battle-basic > kbd,.battle-stage .battle-skills > button > kbd { z-index:12!important; left:0!important; top:0!important; min-width:17px!important; height:17px!important; padding:0 3px!important; border-radius:7px!important; background:var(--battle-ui-surface)!important; color:var(--battle-ui-text)!important; border-color:var(--battle-ui-border-strong)!important; font-size:8px!important; } .battle-stage .battle-skills > button.skill-kind-ultimate > kbd { border-color:var(--battle-ultimate)!important;background:#60430c!important;color:#ffe7a7!important; } .battle-stage .battle-skills > button > span.skill-cost { z-index:12!important; right:-1px!important; bottom:12px!important; min-width:21px!important; height:16px!important; padding:1px 3px!important; border-radius:7px!important; background:var(--battle-ui-surface)!important; color:var(--battle-ui-accent)!important; } .battle-stage .battle-skills > button > span.skill-cost svg { width:9px!important;height:9px!important; }.battle-stage .battle-skills > button > span.skill-cost b { font-size:7.5px!important; } .battle-stage .battle-basic > em,.battle-stage .battle-skills > button > em { right:1px!important;top:1px!important;min-width:13px!important;height:13px!important;font-size:8px!important; } .battle-stage .battle-skills > button.skill-kind-ultimate > em { right:2px!important;top:1px!important;background:var(--battle-ultimate)!important;color:#483008!important; } .battle-stage .battle-basic > .skill-cooldown,.battle-stage .battle-skills > button > .skill-cooldown { position:absolute!important; z-index:7!important; inset:0 auto auto 0!important; width:var(--battle-control-diameter)!important; height:var(--battle-control-diameter)!important; display:grid!important; place-items:center!important; overflow:visible!important; border-radius:50%!important; background:rgba(2,17,25,.57)!important; opacity:0!important; } .battle-stage .battle-basic.is-cooling > .skill-cooldown,.battle-stage .battle-skills > button.is-cooling > .skill-cooldown { opacity:1!important; } .battle-stage .skill-cooldown::before { content:''; position:absolute; inset:-3px; border-radius:50%; background:conic-gradient(var(--battle-control) 0 var(--cooldown-sweep),rgba(255,255,255,.13) var(--cooldown-sweep) 360deg); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); pointer-events:none; } .battle-stage .skill-kind-ultimate > .skill-cooldown::before { background:conic-gradient(var(--battle-ultimate) 0 var(--cooldown-sweep),rgba(255,255,255,.13) var(--cooldown-sweep) 360deg); } .battle-stage .skill-cooldown > b { min-width:24px!important;height:24px!important;border:0!important;background:rgba(2,18,27,.78)!important;font-size:10px!important; } .battle-stage .battle-quick-items { position:relative!important; height:62px!important; min-width:0!important; padding:4px 5px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:3px!important; overflow:visible!important; border-left:1px solid var(--battle-ui-border)!important; } .battle-stage .battle-quick-item { --battle-control-diameter:38px; position:relative!important; width:42px!important; height:56px!important; min-width:42px!important; min-height:56px!important; padding:0 2px 12px!important; display:grid!important; place-items:center!important; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } .battle-stage .battle-quick-item > span { width:38px!important;height:38px!important;padding:2px!important;display:grid!important;place-items:center!important;overflow:visible!important;border:1px solid var(--battle-ui-border)!important;border-radius:50%!important;background:var(--battle-ui-card)!important;box-shadow:0 4px 11px var(--battle-ui-shadow)!important; } .battle-stage .battle-quick-item:hover > span,.battle-stage .battle-quick-item:focus-visible > span { transform:translateY(-2px) scale(1.04);border-color:var(--battle-ui-accent)!important; } .battle-stage .battle-quick-item .battle-item-icon { width:34px!important;height:34px!important; } .battle-stage .battle-quick-item > kbd { z-index:12!important;left:0!important;top:0!important;min-width:15px!important;height:15px!important;padding:0 2px!important;border-radius:6px!important;background:var(--battle-ui-surface)!important;color:var(--battle-ui-text)!important;font-size:7px!important; } .battle-stage .battle-quick-item > b { right:0!important;bottom:11px!important;min-width:18px!important;height:15px!important;padding:0 3px!important;border-radius:6px!important;background:var(--battle-ui-surface)!important;color:var(--battle-ui-text)!important;font-size:7px!important; } .battle-stage .battle-quick-item > em { right:50%!important;top:auto!important;bottom:0!important;transform:translateX(50%);padding:0!important;background:transparent!important;color:var(--battle-ui-muted)!important;font-size:6.5px!important;white-space:nowrap; } .battle-stage .battle-quick-item > .skill-cooldown { inset:0 auto auto 2px!important;width:38px!important;height:38px!important;border-radius:50%!important;background:rgba(2,17,25,.59)!important; } .battle-stage .battle-quick-item.is-cooling > .skill-cooldown { opacity:1!important; } .battle-stage .battle-quick-item > .skill-cooldown::before { inset:-2px!important; } .battle-stage .battle-quick-item::after { bottom:calc(100% + 7px)!important; } .battle-stage .battle-command-deck .battle-footer { position:relative!important; inset:auto!important; align-self:center!important; width:min(540px,100%)!important; height:12px!important; min-height:0!important; margin:0 auto!important; padding:0!important; transform:none!important; display:flex!important; align-items:center!important; border:0!important; background:transparent!important; box-shadow:none!important; pointer-events:none!important; } .battle-stage .battle-footer > p { font-size:7px!important;color:var(--battle-ui-muted)!important; } .battle-stage .battle-command-deck .battle-decision,.battle-stage .battle-command-deck .capture-panel { position:relative!important; inset:auto!important; grid-column:1/-1!important; grid-row:1/-1!important; width:min(620px,calc(100vw - 80px))!important; height:100%!important; min-height:0!important; margin:0!important; transform:none!important; border:0!important; border-radius:17px!important; background:transparent!important; box-shadow:none!important; } .battle-panel[data-phase="decision"] .battle-stage > .battle-command-deck,.battle-panel.is-capture .battle-stage > .battle-command-deck { width:min(640px,calc(100% - 120px))!important;grid-template-columns:1fr!important;grid-template-rows:1fr!important;padding:6px 8px!important; } .battle-panel[data-phase="decision"] .battle-stage .battle-footer,.battle-panel.is-capture .battle-stage .battle-footer { display:none!important; } .game-screen .battle-stage > .battle-tactics { z-index:45!important; right:9px!important; top:51px!important; width:min(292px,calc(100% - 20px))!important; max-height:calc(100% - 118px)!important; border-radius:16px!important; pointer-events:none!important; } .game-screen .battle-stage > .battle-tactics.is-open { pointer-events:auto!important; } /* The battle no longer owns chat/bag/settings buttons; the world dock remains the only navigation. */ .game-screen .battle-panel .battle-utility-rail { display:none!important; } @media (min-width:801px) and (max-width:1180px) { .game-screen .battle-panel { --battle-shell-width:min(900px,92vw,calc(100vw - 32px));--battle-shell-height:min(620px,80dvh,calc(100dvh - 108px)); } .game-screen .battle-panel .battle-shell { min-width:700px!important;min-height:480px!important; } html[data-game-theme] .game-screen .battle-stage .battle-health > article,body[data-ui-theme] .game-screen .battle-stage .battle-health > article { width:220px!important;grid-template-columns:50px minmax(0,1fr)!important; } .battle-combat-portrait { width:50px!important;height:50px!important; } .battle-stage .battle-basic > .battle-skill-name,.battle-stage .battle-skills > button > .battle-skill-name { display:none!important; } .battle-stage .battle-basic,.battle-stage .battle-skills > button { height:58px!important;min-height:58px!important;padding-bottom:2px!important; } .battle-stage .battle-skills > button.skill-kind-ultimate { height:68px!important;min-height:68px!important;padding-bottom:2px!important; } .battle-stage .battle-skills > button.skill-kind-ultimate > .battle-ultimate-badge { top:auto!important;bottom:-1px!important; } .battle-stage .battle-skills > button > span.skill-cost { bottom:0!important; }.battle-stage .battle-basic > small { bottom:0!important; } } @media (max-width:800px) { .game-screen .battle-panel { --battle-shell-width:calc(100vw - 8px); --battle-shell-height:min(640px,calc(100dvh - 78px - env(safe-area-inset-bottom))); } .game-screen .battle-panel .battle-shell { left:50%!important; top:calc(50% - 35px)!important; width:var(--battle-shell-width)!important; height:var(--battle-shell-height)!important; min-width:0!important; min-height:470px!important; transform:translate(-50%,-50%)!important; border-radius:17px!important; } .game-screen .battle-panel .battle-stage { border-radius:17px!important; } .game-screen .battle-stage > .battle-status { inset:5px 5px auto 5px!important;height:34px!important; } .battle-stage > .battle-status > span { height:34px;padding:4px 7px;border-radius:11px; } .battle-stage > .battle-status > span > small { font-size:6.5px!important; }.battle-stage > .battle-status > span > strong { max-width:34vw!important;font-size:9px!important; } .battle-stage > .battle-status .battle-controls { height:34px;padding:2px;border-radius:11px; } .battle-stage > .battle-status .battle-controls button { min-width:27px!important;width:27px!important;height:27px!important;min-height:27px!important;padding:0!important;font-size:0!important; } .battle-stage > .battle-status .battle-controls button > b { display:none!important; } .battle-stage > .battle-status #autoBattle { display:none!important; } .battle-stage > .battle-status #cancelBattle { font-size:0!important; } .battle-stage > .battle-status #cancelBattle::before { content:'';display:block;width:20px;height:20px;background:url('/assets/v2.9.11/items/escape-rope.png') center/contain no-repeat;font-size:0;filter:drop-shadow(0 2px 3px rgba(0,20,34,.28)); } .battle-turn-chip { top:41px!important;min-height:24px!important;padding:2px 5px!important; }.battle-turn-chip small { font-size:6px!important; }.battle-turn-chip b { font-size:7px!important; } html[data-game-theme] .game-screen .battle-stage .battle-health > article,body[data-ui-theme] .game-screen .battle-stage .battle-health > article { top:43px!important; width:calc(50% - 29px)!important; min-height:72px!important; padding:5px!important; grid-template-columns:42px minmax(0,1fr)!important; grid-template-rows:auto 6px auto auto auto!important; column-gap:5px!important; border-radius:12px!important; } .battle-stage .battle-health > .ally-health { left:5px!important; }.battle-stage .battle-health > .enemy-health { right:50px!important; } .battle-combat-portrait { width:42px!important;height:42px!important;border-radius:12px!important; } .battle-stage .battle-health > article > span b { font-size:9px!important; }.battle-stage .battle-health > article > span small { font-size:7px!important; } .battle-stage .battle-health .battle-stamina { grid-template-columns:27px minmax(0,1fr)!important;gap:3px!important; } .battle-stage .battle-health .battle-stamina > span b,.battle-stage .battle-health .battle-stamina > span small { font-size:6px!important; } .battle-stage .battle-health .battle-statuses { max-height:15px; }.battle-stage .battle-health .battle-status-chip { min-width:15px!important;height:14px!important;padding:1px!important; }.battle-stage .battle-health .battle-status-chip svg { width:9px!important;height:9px!important; } .game-screen .battle-stage > .battle-roster-panel { right:4px!important; top:120px!important; width:42px!important; padding:3px!important; grid-template-rows:16px auto!important; gap:3px!important; transform:none!important; border-radius:14px!important; } .battle-stage .battle-roster-panel > header { height:16px!important; }.battle-stage .battle-roster-panel > header em { max-width:34px!important;padding:2px!important;font-size:5.5px!important; } .battle-stage .battle-roster { width:34px!important;grid-template-columns:34px!important;grid-template-rows:repeat(6,34px)!important;gap:3px!important; } .battle-stage .battle-roster-slot { width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important; } .battle-stage .battle-roster-portrait,.battle-stage .battle-roster-slot.is-empty > .battle-roster-empty { width:30px!important;height:30px!important; } .battle-stage .battle-roster-empty-ball { width:22px!important;height:22px!important; } .battle-stage .battle-roster-slot > kbd { display:none!important; } .game-screen .battle-stage > .battle-command-deck { bottom:5px!important; width:calc(100% - 12px)!important; max-width:none!important; height:112px!important; padding:5px 7px 2px!important; grid-template-columns:42px auto!important; grid-template-rows:56px 42px 8px!important; align-items:end!important; gap:2px 4px!important; border-radius:16px!important; } .battle-stage .battle-command-deck .battle-basic { --battle-control-diameter:40px;width:42px!important;height:48px!important;min-width:42px!important;min-height:48px!important;padding:0!important; } .battle-stage .battle-basic > .battle-skill-name,.battle-stage .battle-skills > button > .battle-skill-name,.battle-stage .battle-basic > small { display:none!important; } .battle-stage .battle-command-deck .battle-skills { grid-column:2!important;grid-row:1!important; } .battle-stage .battle-skills { height:56px!important;gap:2px!important; } .battle-stage .battle-skills > button { --battle-control-diameter:42px;width:44px!important;height:48px!important;min-width:44px!important;min-height:48px!important;padding:0!important; } .battle-stage .battle-skills > button.skill-kind-ultimate { --battle-control-diameter:50px;width:52px!important;min-width:52px!important;height:56px!important;min-height:56px!important;margin:0 0 -1px 2px!important;padding:0!important; } .battle-stage .battle-skills > button.skill-kind-ultimate > .battle-ultimate-badge { top:auto!important;bottom:-1px!important;font-size:5.5px!important;padding:1px 3px!important; } .battle-stage .battle-basic > kbd,.battle-stage .battle-skills > button > kbd { min-width:14px!important;height:14px!important;font-size:7px!important; } .battle-stage .battle-skills > button > span.skill-cost { right:-1px!important;bottom:0!important;height:14px!important;min-width:18px!important; }.battle-stage .battle-skills > button > span.skill-cost svg { display:none!important; } .battle-stage .battle-command-deck .battle-quick-items { grid-column:1/-1!important;grid-row:2!important; } .battle-stage .battle-quick-items { height:42px!important;padding:1px!important;border-top:1px solid var(--battle-ui-border)!important;border-left:0!important; } .battle-stage .battle-quick-item { --battle-control-diameter:34px;width:38px!important;height:40px!important;min-width:38px!important;min-height:40px!important;padding:0 2px 5px!important; } .battle-stage .battle-quick-item > span { width:34px!important;height:34px!important; }.battle-stage .battle-quick-item .battle-item-icon { width:30px!important;height:30px!important; } .battle-stage .battle-quick-item > .skill-cooldown { left:2px!important;width:34px!important;height:34px!important; } .battle-stage .battle-quick-item > em { display:none!important; }.battle-stage .battle-quick-item > b { bottom:3px!important; } .battle-stage .battle-command-deck .battle-footer { grid-row:3!important;height:8px!important; }.battle-stage .battle-footer > p { font-size:6px!important; } .battle-panel[data-phase="decision"] .battle-stage > .battle-command-deck,.battle-panel.is-capture .battle-stage > .battle-command-deck { width:calc(100% - 12px)!important;height:86px!important;grid-template-columns:1fr!important;grid-template-rows:1fr!important; } .game-screen .battle-stage > .battle-tactics { top:42px!important;right:4px!important;width:calc(100% - 8px)!important;max-height:calc(100% - 52px)!important; } .battle-skill-preview { bottom:calc(100% + 6px)!important;width:calc(var(--battle-shell-width) - 16px)!important; } } @media (max-width:430px) { .battle-stage > .battle-status > span > small { max-width:29vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } html[data-game-theme] .game-screen .battle-stage .battle-health > article,body[data-ui-theme] .game-screen .battle-stage .battle-health > article { width:calc(50% - 28px)!important;grid-template-columns:38px minmax(0,1fr)!important; } .battle-combat-portrait { width:38px!important;height:38px!important; } .battle-stage .battle-skills > button { --battle-control-diameter:40px;width:42px!important;min-width:42px!important; } .battle-stage .battle-skills > button.skill-kind-ultimate { --battle-control-diameter:48px;width:50px!important;min-width:50px!important; } } @media (max-height:650px) and (max-width:900px) and (orientation:landscape) { .game-screen .battle-panel { --battle-shell-width:min(840px,calc(100vw - 10px));--battle-shell-height:calc(100dvh - 10px); } .game-screen .battle-panel .battle-shell { left:50%!important;top:50%!important;min-width:620px!important;min-height:300px!important;transform:translate(-50%,-50%)!important; } .game-screen .battle-stage > .battle-status { inset:4px 5px auto!important;height:32px!important; }.battle-stage > .battle-status > span,.battle-stage > .battle-status .battle-controls { height:32px!important; } .battle-turn-chip { top:38px!important; } html[data-game-theme] .game-screen .battle-stage .battle-health > article,body[data-ui-theme] .game-screen .battle-stage .battle-health > article { top:39px!important;width:205px!important;min-height:66px!important;grid-template-columns:42px minmax(0,1fr)!important; } .battle-combat-portrait { width:42px!important;height:42px!important; } .game-screen .battle-stage > .battle-roster-panel { top:50%!important;right:5px!important;width:40px!important;transform:translateY(-38%)!important; } .battle-stage .battle-roster { width:32px!important;grid-template-columns:32px!important;grid-template-rows:repeat(6,32px)!important;gap:2px!important; }.battle-stage .battle-roster-slot { width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important; }.battle-stage .battle-roster-portrait,.battle-stage .battle-roster-slot.is-empty > .battle-roster-empty { width:28px!important;height:28px!important; } .game-screen .battle-stage > .battle-command-deck { bottom:4px!important;width:min(650px,calc(100% - 94px))!important;max-width:none!important;height:66px!important;padding:4px 7px 2px!important;grid-template-columns:40px auto auto!important;grid-template-rows:56px!important;gap:3px 5px!important; } .battle-stage .battle-command-deck .battle-basic { --battle-control-diameter:38px;width:40px!important;height:46px!important;min-width:40px!important;min-height:46px!important; } .battle-stage .battle-skills { height:52px!important; }.battle-stage .battle-skills > button { --battle-control-diameter:40px;width:42px!important;height:46px!important;min-width:42px!important;min-height:46px!important; }.battle-stage .battle-skills > button.skill-kind-ultimate { --battle-control-diameter:48px;width:50px!important;min-width:50px!important;height:54px!important;min-height:54px!important; } .battle-stage .battle-command-deck .battle-quick-items { grid-column:3!important;grid-row:1!important; } .battle-stage .battle-quick-items { height:48px!important;padding:2px 4px!important;border-top:0!important;border-left:1px solid var(--battle-ui-border)!important; } .battle-stage .battle-quick-item { --battle-control-diameter:32px;width:35px!important;height:43px!important;min-width:35px!important;min-height:43px!important; }.battle-stage .battle-quick-item > span { width:32px!important;height:32px!important; }.battle-stage .battle-quick-item .battle-item-icon { width:29px!important;height:29px!important; }.battle-stage .battle-quick-item > .skill-cooldown { width:32px!important;height:32px!important; } .battle-stage .battle-command-deck .battle-footer { display:none!important; } .battle-panel[data-phase="decision"] .battle-stage > .battle-command-deck,.battle-panel.is-capture .battle-stage > .battle-command-deck { width:min(620px,calc(100% - 90px))!important;height:58px!important;grid-template-columns:1fr!important; } } /* Short desktop screens keep the six-slot rail clear of the command dock. */ @media (min-width:801px) and (max-height:700px) { .game-screen .battle-stage > .battle-roster-panel { top:48%!important;width:46px!important;padding:4px!important;gap:3px!important;transform:translateY(-38%)!important; } .battle-stage .battle-roster { width:36px!important;grid-template-columns:36px!important;grid-template-rows:repeat(6,36px)!important;gap:3px!important; } .battle-stage .battle-roster-slot { width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important; } .battle-stage .battle-roster-portrait,.battle-stage .battle-roster-slot.is-empty > .battle-roster-empty { width:32px!important;height:32px!important; } .battle-stage .battle-roster-empty-ball { width:24px!important;height:24px!important; } } /* Full chat and side windows remain usable beside combat on ordinary desktop widths. */ @supports selector(body:has(*)) { @media (min-width:1280px) { body.is-battling:has(.chat-panel.is-open:not(.is-minimized)) .game-screen .battle-panel .battle-shell { left:auto!important; right:14px!important; width:min(790px,calc(100vw - 590px))!important; min-width:650px!important; opacity:1!important; pointer-events:auto!important; transform:translateY(-50%)!important; } body.is-battling:has(.side-panel.is-open) .game-screen .battle-panel .battle-shell { left:14px!important; right:auto!important; width:min(790px,calc(100vw - 550px))!important; min-width:650px!important; opacity:1!important; pointer-events:auto!important; transform:translateY(-50%)!important; } } @media (min-width:801px) and (max-width:1279px) { body.is-battling:has(.chat-panel.is-open:not(.is-minimized)) .game-screen .battle-panel .battle-shell, body.is-battling:has(.side-panel.is-open) .game-screen .battle-panel .battle-shell { opacity:.16!important; pointer-events:none!important; } } } @media (prefers-reduced-motion:reduce) { .battle-stage .battle-basic > span:first-child,.battle-stage .battle-skills > button > .skill-icon, .battle-stage .battle-quick-item > span,.battle-stage .battle-roster-slot { transition:none!important;transform:none!important; } } /* v2.9.7 — reward reveal, unified skill cluster and collision-safe battle states */ .game-screen .battle-panel { --battle-shell-width:min(920px,66vw,calc(100vw - 220px)); --battle-shell-height:min(580px,70dvh,calc(100dvh - 170px)); } .game-screen .battle-panel .battle-shell { width:var(--battle-shell-width)!important; height:var(--battle-shell-height)!important; min-width:700px!important; min-height:450px!important; top:calc(50% - 14px)!important; border-radius:20px!important; } .game-screen .battle-panel .battle-stage { border-radius:20px!important; background:transparent!important; } .game-screen .battle-panel .battle-stage::before { background:transparent!important; } /* The six server slots live on the left and never reserve space outside the arena. */ .game-screen .battle-stage > .battle-roster-panel { left:8px!important; right:auto!important; top:50%!important; width:52px!important; padding:4px!important; transform:translateY(-34%)!important; } .battle-stage .battle-roster-slot > kbd { left:auto!important;right:-3px!important; } /* Exactly one lower state is allowed to participate in layout. */ .battle-stage .battle-skill-cluster[hidden], .battle-stage .battle-consumable-panel[hidden], .battle-stage .battle-decision[aria-hidden="true"], .battle-stage .capture-panel[aria-hidden="true"] { display:none!important; } .battle-panel:not([data-phase="battle"]) .battle-stage .battle-skill-cluster, .battle-panel:not([data-phase="battle"]) .battle-stage .battle-consumable-panel { display:none!important; } .battle-panel[data-phase="battle"] .battle-stage .battle-decision, .battle-panel[data-phase="battle"] .battle-stage .capture-panel { display:none!important; } .game-screen .battle-stage > .battle-command-deck { bottom:8px!important; width:auto!important; max-width:calc(100% - 106px)!important; height:94px!important; padding:6px 8px 3px!important; grid-template-columns:auto 190px!important; grid-template-rows:72px 11px!important; align-items:end!important; gap:2px 8px!important; border-radius:20px!important; } .battle-stage .battle-skill-cluster { grid-column:1!important; grid-row:1!important; height:72px!important; min-width:0; display:flex!important; align-items:end; justify-content:center; gap:3px; } .battle-stage .battle-skill-cluster > .battle-basic { --battle-control-diameter:50px; flex:0 0 54px; width:54px!important; height:70px!important; min-width:54px!important; min-height:70px!important; } .battle-stage .battle-basic > span:first-child { display:grid!important; place-items:center; overflow:hidden!important; } .battle-stage .battle-basic > span:first-child .battle-interface-art, .battle-stage .battle-basic > span:first-child > svg { width:100%!important;height:100%!important; } .battle-stage .battle-skill-cluster > .battle-skills { height:72px!important;gap:3px!important; } .battle-stage .battle-skill-cluster > .battle-skills > button { --battle-control-diameter:50px; width:54px!important; min-width:54px!important; height:70px!important; min-height:70px!important; } .battle-stage .battle-skill-cluster > .battle-skills > button.skill-kind-ultimate { --battle-control-diameter:60px; width:64px!important; min-width:64px!important; height:78px!important; min-height:78px!important; margin-left:3px!important; } .battle-stage .battle-skill-cluster .skill-cooldown { pointer-events:none; } .battle-stage .battle-basic.is-cooling > .skill-cooldown, .battle-stage .battle-skills > button.is-cooling > .skill-cooldown { opacity:1!important; } .battle-stage .battle-consumable-panel { grid-column:2!important; grid-row:1!important; width:190px!important; height:68px!important; padding:4px 5px!important; display:grid!important; grid-template-rows:16px 44px!important; gap:2px!important; box-sizing:border-box; border:1px solid var(--battle-ui-border)!important; border-radius:15px!important; background:color-mix(in srgb,var(--battle-ui-card) 72%,transparent)!important; box-shadow:inset 0 1px rgba(255,255,255,.1)!important; } .battle-consumable-panel > header { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:5px; padding:0 3px; color:var(--battle-ui-text); } .battle-consumable-panel > header span { min-width:0;display:flex;align-items:baseline;gap:5px; } .battle-consumable-panel > header small { color:var(--battle-ui-accent);font-size:6px;font-weight:950;letter-spacing:.08em; } .battle-consumable-panel > header b { font-size:8px; } .battle-consumable-panel > header em { color:var(--battle-ui-muted);font-size:7px;font-style:normal;font-weight:900; } .battle-stage .battle-consumable-panel > .battle-quick-items { width:100%!important; height:44px!important; padding:0!important; display:grid!important; grid-template-columns:repeat(4,40px)!important; justify-content:center!important; gap:3px!important; overflow:visible!important; border:0!important; } .battle-stage .battle-consumable-panel .battle-quick-item { --battle-control-diameter:36px; width:40px!important; height:44px!important; min-width:40px!important; min-height:44px!important; padding:0 2px 5px!important; } .battle-stage .battle-consumable-panel .battle-quick-item > span { width:36px!important;height:36px!important; } .battle-stage .battle-consumable-panel .battle-quick-item .battle-item-icon { width:32px!important;height:32px!important; } .battle-stage .battle-consumable-panel .battle-quick-item > .skill-cooldown { left:2px!important;width:36px!important;height:36px!important; } .battle-stage .battle-consumable-panel .battle-quick-item > b { bottom:3px!important; } .battle-stage .battle-consumable-panel .battle-quick-item > em { display:none!important; } .battle-stage .battle-command-deck .battle-footer { grid-column:1/-1!important;grid-row:2!important; } /* Reward state replaces—not overlays—the controls. */ .battle-panel[data-phase="decision"] .battle-stage > .battle-command-deck { width:min(700px,calc(100% - 94px))!important; max-width:none!important; height:176px!important; padding:7px!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:1fr!important; border-radius:19px!important; } .battle-stage .battle-command-deck .battle-decision { width:100%!important; height:100%!important; padding:0!important; display:none!important; grid-template-columns:minmax(0,1fr) 158px!important; gap:7px!important; box-sizing:border-box!important; background:transparent!important; } .battle-stage .battle-command-deck .battle-decision.is-open { display:grid!important; } .battle-reward-card { min-width:0; padding:8px 9px 6px; display:grid; grid-template-rows:auto 1fr auto; gap:6px; overflow:hidden; border:1px solid color-mix(in srgb,#66d6f5 38%,var(--battle-ui-border)); border-radius:14px; background:linear-gradient(135deg,color-mix(in srgb,var(--battle-ui-card) 94%,#168cc7 6%),var(--battle-ui-surface-soft)); box-shadow:inset 0 1px rgba(255,255,255,.15),0 7px 18px color-mix(in srgb,var(--battle-ui-shadow) 60%,transparent); color:var(--battle-ui-text); } .battle-reward-card > header { min-width:0;display:flex;align-items:center;gap:8px; } .battle-reward-card > header > i { flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center; } .battle-reward-card > header > i svg { width:40px;height:40px; } .battle-reward-card > header > span { min-width:0;display:grid;gap:1px; } .battle-reward-card > header small { color:var(--battle-ui-accent);font-size:6.5px;font-weight:1000;letter-spacing:.12em; } .battle-reward-card > header b { font-size:12px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .battle-reward-card > header em { color:var(--battle-ui-muted);font-size:7px;font-style:normal;font-weight:750; } .battle-reward-list { min-width:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; } .battle-reward-item { position:relative; min-width:0; min-height:48px; padding:4px 5px; display:grid; grid-template-columns:38px minmax(0,1fr); grid-template-rows:1fr auto; align-items:center; column-gap:5px; border:1px solid var(--battle-ui-border); border-radius:11px; background:color-mix(in srgb,var(--battle-ui-card) 88%,transparent); box-shadow:inset 0 1px rgba(255,255,255,.12); } .battle-reward-item.is-quest { border-color:rgba(234,187,67,.62);background:linear-gradient(145deg,color-mix(in srgb,var(--battle-ui-card) 88%,#e2a82e 12%),var(--battle-ui-card)); } .battle-reward-art { grid-column:1;grid-row:1/3;width:38px;height:38px;filter:drop-shadow(0 3px 5px rgba(0,20,35,.2)); } .battle-reward-item > span { min-width:0;display:grid;gap:1px; } .battle-reward-item > span small { color:var(--battle-ui-muted);font-size:5.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .battle-reward-item > span b { font-size:7.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .battle-reward-item > strong { color:#4dc7f4;font-size:10px;line-height:1; } .battle-reward-item.is-quest > strong { color:#e9b947; } .battle-reward-card > footer { min-width:0;display:flex;align-items:center;justify-content:space-between;gap:7px;color:var(--battle-ui-muted);font-size:6px; } .battle-reward-card > footer span { display:flex;align-items:center;gap:4px; } .battle-reward-card > footer span i { width:6px;height:6px;border-radius:50%;background:#55d887;box-shadow:0 0 0 3px rgba(85,216,135,.12); } .battle-reward-card > footer b { color:var(--battle-ui-text);font-size:6px;text-align:right; } .battle-decision-actions { display:grid;grid-template-rows:1fr 1fr;gap:6px; } .battle-decision-actions > button { min-width:0!important; min-height:0!important; padding:7px 8px!important; display:grid!important; grid-template-columns:30px minmax(0,1fr)!important; align-items:center!important; gap:6px!important; border:1px solid color-mix(in srgb,var(--battle-ui-accent) 36%,var(--battle-ui-border))!important; border-radius:13px!important; background:linear-gradient(145deg,color-mix(in srgb,var(--battle-ui-accent) 18%,var(--battle-ui-card)),var(--battle-ui-card))!important; color:var(--battle-ui-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.15)!important; text-align:left!important; } .battle-decision-actions > button:hover:not(:disabled),.battle-decision-actions > button:focus-visible { transform:translateY(-1px);border-color:var(--battle-ui-accent)!important; } .battle-decision-actions > button > svg { width:28px;height:28px;color:var(--battle-ui-accent); } .battle-decision-actions > button > span { min-width:0;display:grid;gap:2px; } .battle-decision-actions > button small { color:var(--battle-ui-muted);font-size:5.5px;font-weight:950;letter-spacing:.06em; } .battle-decision-actions > button b { font-size:9px;line-height:1.05; } .battle-decision-actions #beginCapture { border-color:rgba(78,210,135,.44)!important;background:linear-gradient(145deg,color-mix(in srgb,#42c77d 17%,var(--battle-ui-card)),var(--battle-ui-card))!important; } .battle-decision-actions #beginCapture > svg { color:#55d887; } .battle-decision-actions > button:disabled { opacity:.48;filter:saturate(.55); } /* Compact, measurable battle asset loader. */ .battle-stage .battle-asset-loader { width:min(350px,calc(100% - 32px)); padding:12px 14px; grid-template-columns:52px minmax(0,1fr); gap:11px; border-color:var(--battle-ui-border); background:linear-gradient(145deg,var(--battle-ui-surface),var(--battle-ui-surface-soft)); color:var(--battle-ui-text); } .battle-loader-ball { position:relative;width:48px!important;height:48px!important;display:block!important;border:3px solid #dff8ff;border-radius:50%;overflow:hidden;background:linear-gradient(#ec5d5b 0 46%,#17394d 46% 54%,#f4fbfd 54%);box-shadow:0 7px 16px rgba(0,20,31,.25);animation:battle-loader-ball 1s cubic-bezier(.4,0,.2,1) infinite; } .battle-loader-ball::before { content:'';position:absolute;z-index:2;left:50%;top:50%;width:15px;height:15px;transform:translate(-50%,-50%);border:4px solid #17394d;border-radius:50%;background:#eaf8fc; } .battle-loader-ball > i,.battle-loader-ball > b { position:absolute;width:6px;height:6px;border-radius:50%;background:#fff4a5;box-shadow:0 0 9px #fff5ad; } .battle-loader-ball > i { left:7px;top:8px; }.battle-loader-ball > b { right:6px;bottom:8px; } .battle-loader-copy { min-width:0!important;display:grid!important;grid-template-columns:1fr auto;grid-template-rows:auto auto 5px;gap:2px 8px!important; } .battle-loader-copy > small { grid-column:1/-1;color:var(--battle-ui-accent)!important;font-size:6.5px!important; } .battle-loader-copy > b { min-width:0;font-size:10px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .battle-loader-copy > strong { color:var(--battle-ui-muted);font-size:7px;align-self:center; } .battle-load-track { grid-column:1/-1;position:relative;width:100%;height:5px!important;margin:2px 0 0!important;display:block!important;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--battle-ui-muted) 18%,transparent)!important; } .battle-load-track > em { width:0;height:100%!important;margin:0!important;display:block!important;border-radius:inherit;background:linear-gradient(90deg,#3ab9ed,#67e1c3,#f1cd61)!important;transition:width .2s ease; } .battle-load-track > em::after { display:none!important;content:none!important; } @keyframes battle-loader-ball { 0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-5px) rotate(8deg)} } /* Capture remains a separate compact state. */ .battle-panel.is-capture .battle-stage > .battle-command-deck { width:min(610px,calc(100% - 94px))!important;height:88px!important;grid-template-columns:1fr!important;grid-template-rows:1fr!important; } @media (min-width:801px) and (max-width:1180px) { .game-screen .battle-panel { --battle-shell-width:min(860px,calc(100vw - 72px));--battle-shell-height:min(550px,calc(100dvh - 126px)); } .game-screen .battle-panel .battle-shell { min-width:680px!important;min-height:440px!important; } .game-screen .battle-stage > .battle-command-deck { max-width:calc(100% - 88px)!important;grid-template-columns:auto 174px!important;gap:5px!important; } .battle-stage .battle-consumable-panel { width:174px!important; } .battle-stage .battle-consumable-panel > .battle-quick-items { grid-template-columns:repeat(4,37px)!important; } .battle-stage .battle-consumable-panel .battle-quick-item { width:37px!important;min-width:37px!important; } } @media (max-width:800px) { .game-screen .battle-panel { --battle-shell-width:calc(100vw - 8px);--battle-shell-height:min(620px,calc(100dvh - 80px - env(safe-area-inset-bottom))); } .game-screen .battle-panel .battle-shell { min-width:0!important;min-height:450px!important;top:calc(50% - 34px)!important; } .battle-stage .battle-health > .ally-health { left:5px!important; } .battle-stage .battle-health > .enemy-health { left:auto!important;right:5px!important; } .game-screen .battle-stage > .battle-roster-panel { left:4px!important;right:auto!important;top:122px!important;transform:none!important; } .game-screen .battle-stage > .battle-command-deck { bottom:5px!important; width:calc(100% - 12px)!important; max-width:none!important; height:122px!important; padding:5px 6px 2px!important; grid-template-columns:1fr!important; grid-template-rows:62px 47px 7px!important; gap:2px!important; } .battle-stage .battle-skill-cluster { grid-column:1!important;grid-row:1!important;height:62px!important; } .battle-stage .battle-skill-cluster > .battle-basic { --battle-control-diameter:42px;flex-basis:44px;width:44px!important;min-width:44px!important;height:52px!important;min-height:52px!important;padding:0!important; } .battle-stage .battle-skill-cluster > .battle-skills { height:60px!important; } .battle-stage .battle-skill-cluster > .battle-skills > button { --battle-control-diameter:42px;width:44px!important;min-width:44px!important;height:52px!important;min-height:52px!important;padding:0!important; } .battle-stage .battle-skill-cluster > .battle-skills > button.skill-kind-ultimate { --battle-control-diameter:50px;width:52px!important;min-width:52px!important;height:60px!important;min-height:60px!important; } .battle-stage .battle-basic > .battle-skill-name,.battle-stage .battle-skills > button > .battle-skill-name,.battle-stage .battle-basic > small { display:none!important; } .battle-stage .battle-consumable-panel { grid-column:1!important;grid-row:2!important;width:min(260px,100%)!important;height:47px!important;margin:auto;padding:2px 5px!important;grid-template-columns:72px 1fr!important;grid-template-rows:1fr!important;align-items:center; } .battle-consumable-panel > header { padding:0 4px;display:grid;justify-content:start; } .battle-consumable-panel > header span { display:grid;gap:0; }.battle-consumable-panel > header em { display:none; } .battle-stage .battle-consumable-panel > .battle-quick-items { height:40px!important;grid-template-columns:repeat(4,37px)!important; } .battle-stage .battle-consumable-panel .battle-quick-item { --battle-control-diameter:34px;width:37px!important;height:40px!important;min-width:37px!important;min-height:40px!important; } .battle-stage .battle-consumable-panel .battle-quick-item > span { width:34px!important;height:34px!important; } .battle-stage .battle-consumable-panel .battle-quick-item > .skill-cooldown { width:34px!important;height:34px!important; } .battle-stage .battle-command-deck .battle-footer { grid-row:3!important;height:7px!important; } .battle-panel[data-phase="decision"] .battle-stage > .battle-command-deck { width:calc(100% - 12px)!important;height:218px!important;padding:5px!important; } .battle-stage .battle-command-deck .battle-decision { grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr) 48px!important;gap:5px!important; } .battle-reward-card { padding:6px;gap:4px; } .battle-reward-card > header > i,.battle-reward-card > header > i svg { width:34px;height:34px;flex-basis:34px; } .battle-reward-list { grid-template-columns:repeat(3,minmax(112px,1fr));overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none; } .battle-reward-list::-webkit-scrollbar { display:none; } .battle-reward-item { min-height:44px;grid-template-columns:34px minmax(0,1fr); }.battle-reward-art { width:34px;height:34px; } .battle-reward-card > footer { display:grid;gap:2px; }.battle-reward-card > footer b { text-align:left; } .battle-decision-actions { grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:5px; } .battle-decision-actions > button { grid-template-columns:25px minmax(0,1fr)!important;padding:4px 6px!important; } .battle-decision-actions > button > svg { width:23px;height:23px; } .battle-decision-actions > button b { font-size:8px; } .battle-panel.is-capture .battle-stage > .battle-command-deck { width:calc(100% - 12px)!important;height:88px!important; } } @media (max-width:430px) { .battle-stage .battle-skill-cluster { gap:1px; } .battle-stage .battle-skill-cluster > .battle-basic { --battle-control-diameter:39px;flex-basis:41px;width:41px!important;min-width:41px!important; } .battle-stage .battle-skill-cluster > .battle-skills { gap:1px!important; } .battle-stage .battle-skill-cluster > .battle-skills > button { --battle-control-diameter:39px;width:41px!important;min-width:41px!important; } .battle-stage .battle-skill-cluster > .battle-skills > button.skill-kind-ultimate { --battle-control-diameter:47px;width:49px!important;min-width:49px!important; } .battle-reward-card > header b { font-size:10px; } } @media (max-height:650px) and (max-width:900px) and (orientation:landscape) { .game-screen .battle-panel { --battle-shell-width:min(820px,calc(100vw - 10px));--battle-shell-height:calc(100dvh - 10px); } .game-screen .battle-panel .battle-shell { min-width:620px!important;min-height:300px!important;top:50%!important; } .game-screen .battle-stage > .battle-roster-panel { left:4px!important;right:auto!important;top:50%!important;transform:translateY(-34%)!important; } .game-screen .battle-stage > .battle-command-deck { width:min(640px,calc(100% - 84px))!important;height:68px!important;grid-template-columns:auto 166px!important;grid-template-rows:58px!important;gap:4px!important; } .battle-stage .battle-skill-cluster { grid-column:1!important;grid-row:1!important;height:58px!important; } .battle-stage .battle-skill-cluster > .battle-basic { --battle-control-diameter:38px;flex-basis:40px;width:40px!important;min-width:40px!important;height:48px!important;min-height:48px!important; } .battle-stage .battle-skill-cluster > .battle-skills { height:56px!important; } .battle-stage .battle-skill-cluster > .battle-skills > button { --battle-control-diameter:38px;width:40px!important;min-width:40px!important;height:48px!important;min-height:48px!important; } .battle-stage .battle-skill-cluster > .battle-skills > button.skill-kind-ultimate { --battle-control-diameter:46px;width:48px!important;min-width:48px!important;height:56px!important;min-height:56px!important; } .battle-stage .battle-consumable-panel { grid-column:2!important;grid-row:1!important;width:166px!important;height:48px!important;margin:0!important;padding:2px 4px!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:1fr!important; } .battle-consumable-panel > header { display:none!important; } .battle-stage .battle-consumable-panel > .battle-quick-items { height:42px!important;grid-template-columns:repeat(4,36px)!important;border:0!important; } .battle-stage .battle-command-deck .battle-footer { display:none!important; } .battle-panel[data-phase="decision"] .battle-stage > .battle-command-deck { width:min(650px,calc(100% - 84px))!important;height:148px!important;grid-template-columns:1fr!important; } .battle-stage .battle-command-deck .battle-decision { grid-template-columns:minmax(0,1fr) 145px!important;grid-template-rows:1fr!important; } .battle-reward-card > footer { display:none; } .battle-panel.is-capture .battle-stage > .battle-command-deck { width:min(590px,calc(100% - 84px))!important;height:62px!important;grid-template-columns:1fr!important; } } @supports selector(body:has(*)) { @media (min-width:1280px) { body.is-battling:has(.chat-panel.is-open:not(.is-minimized)) .game-screen .battle-panel .battle-shell { left:auto!important;right:14px!important;width:min(760px,calc(100vw - 590px))!important;min-width:620px!important;transform:translateY(-50%)!important; } body.is-battling:has(.side-panel.is-open) .game-screen .battle-panel .battle-shell { left:14px!important;right:auto!important;width:min(760px,calc(100vw - 550px))!important;min-width:620px!important;transform:translateY(-50%)!important; } } } @media (prefers-reduced-motion:reduce) { .battle-loader-ball { animation:none!important; } .battle-load-track > em { transition:none!important; } .battle-reward-art,.battle-decision-actions > button { transition:none!important;transform:none!important; } } /* V34 — transparent raster item art. Capture balls are drawn objects, not icons placed on an extra coloured tile. The same atlas is shared by the inventory and battle capture selector so their silhouettes stay identical. */ .item-ball-raster { display:block; width:100%; height:100%; background-image:var(--ball-atlas); background-repeat:no-repeat; background-size:500% 300%; background-position:var(--ball-atlas-x) var(--ball-atlas-y); filter:drop-shadow(0 3px 3px rgba(13,44,62,.18)); transform:translateZ(0); } .item-graphic-shell.category-balls::before { content:none!important; display:none!important; } .inventory-item-v2741.category-balls .inventory-item-v2741__art, .inventory-item-v2741.category-balls .item-graphic-shell, .inventory-card-v2733.category-balls .inventory-card-icon, .inventory-detail-v2733 .item-graphic-shell.category-balls { background:transparent!important; box-shadow:none!important; } .inventory-item-v2741.category-balls .inventory-item-v2741__art .item-icon { width:56px; height:56px; } /* City Pokecenter + Pokemart */ .city-facility{padding:18px;min-height:100%;background:linear-gradient(145deg,#f7fbff 0%,#edf8ff 46%,#fff7ee 100%);color:#17384a}.city-facility .panel-section-head-v2737{margin:-18px -18px 14px;padding:18px 20px;background:linear-gradient(110deg,#123c54,#176c78);color:#fff}.facility-tabs{display:flex;gap:8px;margin:0 0 14px;padding:5px;background:#dcebf1;border-radius:16px}.facility-tabs button{flex:1;border:0;border-radius:12px;padding:11px 12px;background:transparent;color:#486675;font-weight:900;cursor:pointer}.facility-tabs button.active{background:#fff;color:#0c6b78;box-shadow:0 5px 16px #24576c22}.facility-search{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:10px 14px;background:#fff;border:1px solid #cce0e8;border-radius:15px}.facility-search span{font-size:11px;font-weight:900;color:#67808c;text-transform:uppercase}.facility-search input{width:100%;border:0;outline:0;background:transparent;color:#163747;font:700 14px inherit}.facility-pokemon-card .facility-hp{display:block;width:100%;height:6px;overflow:hidden;border-radius:99px;background:#dce7e7}.facility-pokemon-card .facility-hp span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1ebd75,#80d856)}.facility-clinic-summary,.facility-nursery{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;padding:16px 18px;border-radius:18px;background:linear-gradient(110deg,#fff,#eefbfa);border:1px solid #cde5e4}.facility-clinic-summary h3,.facility-nursery h3{margin:3px 0}.facility-clinic-summary small,.facility-nursery small{font-weight:900;color:#0a8b83}.facility-clinic-summary button,.facility-nursery button,.pokemart-product button{border:0;border-radius:12px;padding:11px 14px;background:#ef4b4b;color:#fff;font-weight:900;cursor:pointer}.facility-clinic-summary button:disabled,.facility-nursery button:disabled,.pokemart-product button:disabled{opacity:.42;cursor:not-allowed}.pokemart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pokemart-product{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:15px;border:1px solid #d3e5eb;border-radius:18px;background:#fff;box-shadow:0 10px 24px #16485b12}.pokemart-product-art{display:grid;place-items:center;width:72px;height:72px;border-radius:18px;background:linear-gradient(145deg,#eaf8ff,#fff0d8)}.pokemart-product-art img{max-width:54px;max-height:54px}.pokemart-product h3{margin:3px 0 5px}.pokemart-product p{margin:0;color:#627985;font-size:12px;line-height:1.4}.pokemart-product footer{grid-column:1/-1;display:flex;align-items:center;gap:8px;border-top:1px solid #edf2f4;padding-top:11px}.pokemart-product footer b{margin-right:auto}.pokemart-product footer button:last-child{background:#167b8b}@media(max-width:740px){.city-facility{padding:12px}.city-facility .panel-section-head-v2737{margin:-12px -12px 10px}.facility-tabs{overflow-x:auto}.facility-tabs button{min-width:112px}.facility-clinic-summary,.facility-nursery{align-items:flex-start;flex-direction:column}.pokemart-grid{grid-template-columns:1fr}.pokemart-product{grid-template-columns:58px 1fr}.pokemart-product-art{width:58px;height:58px}} /* Full dev atlas: every published location stays named and selectable. */ .region-map-v2204-node.has-label>span{transform:translate(calc(-50% + var(--node-label-x,0px)),var(--node-label-y,0px));max-width:126px;white-space:normal;text-align:center;line-height:1.08;padding:4px 7px;background:rgba(8,35,49,.84);border:1px solid rgba(255,255,255,.24);border-radius:8px;box-shadow:0 3px 9px rgba(5,24,34,.24)} .region-map-v2204-node:hover,.region-map-v2204-node:focus-visible,.region-map-v2204-node.is-selected{z-index:40} .region-map-v2204-node:hover>span,.region-map-v2204-node:focus-visible>span,.region-map-v2204-node.is-selected>span{background:#fff;color:#123b4d;border-color:var(--node-accent);box-shadow:0 7px 18px rgba(4,28,40,.3)} @media(max-width:760px){.region-map-v2204-node.has-label>span{max-width:104px;font-size:9px;padding:3px 5px}} .region-map-v2253-directory { margin:0 0 10px; padding:10px; border:1px solid rgba(41,118,146,.16); border-radius:16px; background:rgba(247,253,255,.94); } .region-map-v2253-directory > header { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:8px; color:#173f52; } .region-map-v2253-directory > header span { display:grid; gap:1px; } .region-map-v2253-directory > header small { color:#2493bd; font-size:8px; font-weight:1000; letter-spacing:1.2px; } .region-map-v2253-directory > header b { font-size:13px; } .region-map-v2253-directory > header em { color:#678694; font-size:9px; font-style:normal; } .region-map-v2253-directory > div { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:5px; max-height:132px; overflow:auto; scrollbar-width:thin; } .region-map-v2253-directory button { display:flex; align-items:center; gap:7px; min-width:0; padding:6px 8px; border:1px solid rgba(39,104,127,.12); border-radius:10px; background:#fff; color:#244b5c; text-align:left; cursor:pointer; } .region-map-v2253-directory button:hover,.region-map-v2253-directory button:focus-visible { border-color:#27a2d1; background:#eefaff; outline:none; } .region-map-v2253-directory button.is-selected { border-color:#f4a51c; background:#fff8e9; box-shadow:0 0 0 2px rgba(244,165,28,.12); } .region-map-v2253-directory button.is-current { border-color:#28ad79; } .region-map-v2253-directory button > i { display:grid; place-items:center; flex:0 0 25px; width:25px; height:25px; border-radius:8px; background:#eaf6fa; color:#218bb2; } .region-map-v2253-directory button > i svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; } .region-map-v2253-directory button > span { display:grid; min-width:0; } .region-map-v2253-directory button b,.region-map-v2253-directory button small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .region-map-v2253-directory button b { font-size:9px; } .region-map-v2253-directory button small { color:#78929d; font-size:7px; } @media (max-width:760px) { .region-map-v2253-directory > div { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:118px; } } /* 2.27.1 — clean scalable Kanto overworld. */ .side-panel.is-regions-panel{width:min(1240px,calc(100vw - 48px));height:min(840px,calc(100dvh - 40px));max-height:none;left:50%;right:auto;top:50%;transform:translate(-50%,-50%)} .side-panel.is-regions-panel .side-panel-content{height:100%;padding:0;overflow:hidden;background:#eaf5f4} .kanto-map-v2262{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;background:linear-gradient(145deg,#f9fcf7,#e7f5f4);color:#173e4b;font-family:Inter,"Segoe UI",Arial,sans-serif} .kanto-map-v2262 .region-map-v2204-header{min-height:70px;padding:12px 16px 11px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #c8dedf;background:rgba(252,255,252,.96);box-shadow:0 5px 18px #18465c12;box-sizing:border-box} .kanto-map-v2262 .region-map-v2204-header>div:first-child{display:grid;grid-template-columns:auto auto;align-items:end;gap:0 10px}.kanto-map-v2262 .region-map-v2204-header>div:first-child>span{grid-column:1/-1;color:#278f91;font-size:8px;font-weight:1000;letter-spacing:.16em}.kanto-map-v2262 .region-map-v2204-header h2{margin:0;font-size:22px;line-height:1}.kanto-map-v2262 .region-map-v2204-header p{margin:0;color:#6c858c;font-size:10px;font-weight:750} .kanto-map-v2262 .region-map-v2204-header>div:last-child{display:flex;align-items:center;gap:8px}.kanto-map-v2262 .region-map-v2204-close{width:36px;height:36px;border:0;border-radius:12px;background:#e7f0f1;color:#315965;font-size:24px;line-height:1;cursor:pointer}.kanto-map-v2262 .region-map-v2204-close:hover{background:#d8e8e9} .kanto-map-v2262 .region-map-v2204-test-toggle{min-height:36px;padding:5px 9px;display:flex;align-items:center;gap:7px;border:1px solid #d0e0e1;border-radius:12px;background:#f6faf9;color:#496a72;cursor:pointer}.kanto-map-v2262 .region-map-v2204-test-toggle.is-active{border-color:#58b18c;background:#e8f8ef;color:#176a4b}.kanto-map-v2262 .region-map-v2204-test-toggle>i{width:20px;height:20px;display:grid;place-items:center}.kanto-map-v2262 .region-map-v2204-test-toggle svg{width:16px;height:16px}.kanto-map-v2262 .region-map-v2204-test-toggle span{display:grid;text-align:left}.kanto-map-v2262 .region-map-v2204-test-toggle b{font-size:9px}.kanto-map-v2262 .region-map-v2204-test-toggle small{font-size:7px;opacity:.72} .kanto-map-v2262 .region-map-v2204-layout{min-height:0;padding:12px;display:grid;grid-template-columns:minmax(0,1fr) 304px;gap:12px;box-sizing:border-box} .kanto-map-v2262 .region-map-v2204-stage{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:7px}.kanto-map-v2262 .region-map-v2204-toolbar{min-height:26px;display:flex;align-items:center;justify-content:space-between;gap:12px}.kanto-map-v2262 .region-map-v2204-toolbar>em{color:#69858d;font-size:8px;font-style:normal;font-weight:700;white-space:nowrap}.kanto-map-v2262 .region-map-v2204-legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.kanto-map-v2262 .region-map-v2204-legend span{display:flex;align-items:center;gap:4px;color:#53727b;font-size:8px;font-weight:850}.kanto-map-v2262 .region-map-v2204-legend span:before{content:"";width:8px;height:8px;border-radius:50%;background:#b9c7ca;box-shadow:0 0 0 2px #fff}.kanto-map-v2262 .region-map-v2204-legend .is-current:before{background:#ffcf39}.kanto-map-v2262 .region-map-v2204-legend .is-open:before{background:#37bd7d}.kanto-map-v2262 .region-map-v2204-legend .is-locked:before{background:#6f7e82}.kanto-map-v2262 .region-map-v2204-legend .is-route:before{background:#f3833d} .kanto-map-v2262 .region-map-v2204-viewport{position:relative;min-height:0;overflow:hidden;border:1px solid rgba(20,82,91,.24);border-radius:18px;background:#47bde5;box-shadow:0 15px 30px #174d6224;isolation:isolate;touch-action:none;cursor:grab}.kanto-map-v2262 .region-map-v2204-viewport.is-dragging{cursor:grabbing}.kanto-map-v2262 .region-map-v2204-canvas{position:absolute;inset:0;transform:translate(var(--map-pan-x),var(--map-pan-y)) scale(var(--map-zoom));transform-origin:center;will-change:transform}.kanto-map-v2262 .region-map-v2204-canvas.is-animated{transition:transform .22s ease}.kanto-map-v2262 .region-map-v2204-canvas>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;user-select:none;pointer-events:none}.kanto-map-v2262 .region-map-v2204-canvas>svg{position:absolute;z-index:2;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.kanto-map-v2262 .region-map-v2204-canvas>svg line{stroke:#536b70;stroke-width:3;stroke-linecap:round;stroke-dasharray:5 8;opacity:.5;vector-effect:non-scaling-stroke}.kanto-map-v2262 .region-map-v2204-canvas>svg line.is-open{stroke:#fff;stroke-width:4;opacity:.9;filter:drop-shadow(0 1px 2px #17666a)}.kanto-map-v2262 .region-map-v2204-canvas>svg line.is-planned{stroke:#ff8a3e;stroke-width:6;stroke-dasharray:10 7;opacity:1;animation:kanto-route-flow 1.2s linear infinite} .kanto-map-v2262 .region-map-v2204-node{position:absolute;z-index:4;left:var(--node-x);top:var(--node-y);width:30px;height:30px;padding:0;display:grid;place-items:center;border:0;background:transparent;color:#1f6b80;transform:translate(-50%,-50%);cursor:pointer;overflow:visible}.kanto-map-v2262 .region-map-v2204-node>i{width:27px;height:27px;display:grid;place-items:center;border:3px solid #fff;border-radius:50%;background:#eff9f6;box-shadow:0 3px 8px #0b3f5266;transition:.18s ease}.kanto-map-v2262 .region-map-v2204-node.is-hub>i,.kanto-map-v2262 .region-map-v2204-node.is-market>i{width:33px;height:33px;background:#fff6d7;color:#bc6c21}.kanto-map-v2262 .region-map-v2204-node.is-water>i{background:#e4f8ff;color:#1788bc}.kanto-map-v2262 .region-map-v2204-node.is-special>i{background:#f2e9ff;color:#7652aa}.kanto-map-v2262 .region-map-v2204-node.is-locked>i{border-color:#d4dcdd;background:#596b70;color:#eef2f2;filter:saturate(.35)}.kanto-map-v2262 .region-map-v2204-node.is-current>i{border-color:#fff4a9;background:#ffcb35;color:#68440a;box-shadow:0 0 0 4px #fff8,0 5px 13px #6a4e1e88}.kanto-map-v2262 .region-map-v2204-node.is-selected>i{transform:scale(1.18);box-shadow:0 0 0 4px #ff8b3d99,0 6px 16px #173d5266}.kanto-map-v2262 .region-map-marker-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.kanto-map-v2262 .region-map-v2204-node>em{position:absolute;z-index:3;right:-8px;top:-8px;width:15px;height:15px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:#ff7c36;color:#fff;font-size:7px;font-style:normal;font-weight:1000}.kanto-map-v2262 .region-map-v2204-node>span{position:absolute;z-index:2;left:50%;top:calc(100% + 5px);min-width:max-content;max-width:132px;padding:4px 7px;border:1px solid #fff8;border-radius:8px;background:#163f4de6;color:#fff;font-size:8px;font-weight:900;line-height:1.1;text-align:center;white-space:normal;box-shadow:0 4px 10px #102f3e55;opacity:0;pointer-events:none;transform:translate(-50%,2px);transition:.15s ease}.kanto-map-v2262 .region-map-v2204-node.has-label>span,.kanto-map-v2262 .region-map-v2204-node:hover>span,.kanto-map-v2262 .region-map-v2204-node:focus-visible>span,.kanto-map-v2262 .region-map-v2204-node.is-selected>span{opacity:1;transform:translate(-50%,0)}.kanto-map-v2262 .region-map-v2204-node:focus-visible{outline:3px solid #fff;outline-offset:5px;border-radius:50%} .kanto-map-v2262 .region-map-v2204-zoom{position:absolute;z-index:8;right:10px;bottom:10px;display:flex;align-items:center;overflow:hidden;border:1px solid #d5e4e4;border-radius:12px;background:#fffffff2;box-shadow:0 5px 16px #133d5033}.kanto-map-v2262 .region-map-v2204-zoom button,.kanto-map-v2262 .region-map-v2204-zoom output{height:34px;padding:0 10px;display:grid;place-items:center;border:0;border-right:1px solid #e0ebeb;background:transparent;color:#295562;font:900 11px inherit}.kanto-map-v2262 .region-map-v2204-zoom button{cursor:pointer}.kanto-map-v2262 .region-map-v2204-zoom button:hover{background:#edf7f5}.kanto-map-v2262 .region-map-v2204-zoom button:last-child{display:flex;gap:5px;border-right:0}.kanto-map-v2262 .region-map-v2204-zoom svg{width:15px;height:15px}.kanto-map-v2262 .region-map-v2204-mobile-hint{color:#6a858d;font-size:8px;text-align:center} .kanto-map-v2262 .region-map-v2204-sidebar{min-height:0;display:grid;align-content:start;gap:8px;overflow:auto;scrollbar-width:thin;padding-right:2px}.kanto-map-v2262 .region-map-v2204-selection,.kanto-map-v2262 .region-route-v2204,.kanto-map-v2262 .region-teleport-v2204{padding:12px;border:1px solid #cfdfdf;border-radius:16px;background:#fff;box-shadow:0 7px 18px #163d4e12}.kanto-map-v2262 .region-map-v2204-selection>header{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:8px}.kanto-map-v2262 .region-map-v2204-selection>header span{display:grid;min-width:0}.kanto-map-v2262 .region-map-v2204-selection>header small,.kanto-map-v2262 .region-route-v2204 header small,.kanto-map-v2262 .region-teleport-v2204 header small{color:#2c9795;font-size:7px;font-weight:1000;letter-spacing:.12em}.kanto-map-v2262 .region-map-v2204-selection>header b{font-size:16px;line-height:1.1}.kanto-map-v2262 .region-map-v2204-selection>header>i{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:#eaf7f5;color:var(--region-accent)}.kanto-map-v2262 .region-map-v2204-selection>header svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}.kanto-map-v2262 .region-map-v2204-selection-copy>p,.kanto-map-v2262 .region-route-v2204>p,.kanto-map-v2262 .region-teleport-v2204>p{margin:0 0 8px;color:#617980;font-size:9px;line-height:1.4}.kanto-map-v2262 .region-map-v2204-selection-copy>div{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}.kanto-map-v2262 .region-map-v2204-selection-copy>div>span{padding:6px 7px;display:grid;border-radius:9px;background:#eef6f5}.kanto-map-v2262 .region-map-v2204-selection-copy small{color:#789096;font-size:6px;font-weight:900}.kanto-map-v2262 .region-map-v2204-selection-copy b{font-size:9px}.kanto-map-v2262 .region-map-v2204-selection-copy ul{margin:0 0 8px;padding:0;display:flex;gap:4px;flex-wrap:wrap;list-style:none}.kanto-map-v2262 .region-map-v2204-selection-copy li{padding:4px 6px;border-radius:8px;background:#eef8ee;color:#3b7050;font-size:7px;font-weight:800}.kanto-map-v2262 .region-map-v2204-primary{width:100%;min-height:40px;padding:7px 9px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;border-radius:11px;background:linear-gradient(120deg,#1591a8,#1eb47e);color:#fff;cursor:pointer}.kanto-map-v2262 .region-map-v2204-primary:disabled{background:#d1dddd;color:#7b9296;cursor:not-allowed}.kanto-map-v2262 .region-map-v2204-primary span{display:grid;text-align:left}.kanto-map-v2262 .region-map-v2204-primary small{color:inherit;font-size:6px;opacity:.8}.kanto-map-v2262 .region-map-v2204-primary b{font-size:9px}.kanto-map-v2262 .region-map-v2204-primary svg{width:18px;height:18px} .kanto-map-v2262 .region-route-v2204>header,.kanto-map-v2262 .region-teleport-v2204>header{display:flex;align-items:center;gap:8px}.kanto-map-v2262 .region-route-v2204>header>span,.kanto-map-v2262 .region-teleport-v2204>header>span{min-width:0;display:grid;flex:1}.kanto-map-v2262 .region-route-v2204 header b,.kanto-map-v2262 .region-teleport-v2204 header b{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kanto-map-v2262 .region-route-v2204 header em,.kanto-map-v2262 .region-teleport-v2204 header em{padding:4px 7px;border-radius:8px;background:#edf6f4;color:#2b7774;font-size:8px;font-style:normal;font-weight:900}.kanto-map-v2262 .region-route-v2204 details{font-size:8px}.kanto-map-v2262 .region-route-v2204 summary{color:#187d92;font-weight:900;cursor:pointer}.kanto-map-v2262 .region-route-v2204 ol{max-height:100px;margin:7px 0 0;padding:0;display:grid;gap:4px;overflow:auto;list-style:none}.kanto-map-v2262 .region-route-v2204 li{display:flex;align-items:center;gap:6px}.kanto-map-v2262 .region-route-v2204 li>i{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#eaf3f3;font-style:normal;font-size:7px}.kanto-map-v2262 .region-route-v2204 li>span{display:grid}.kanto-map-v2262 .region-route-v2204 li b{font-size:8px}.kanto-map-v2262 .region-route-v2204 li small{color:#789095;font-size:6px} .kanto-map-v2262 .region-teleport-v2204>header>i{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#eee8ff;color:#7154ae}.kanto-map-v2262 .region-teleport-glyph{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}.kanto-map-v2262 .region-teleport-v2204-sources,.kanto-map-v2262 .region-teleport-v2204-destinations{display:grid;gap:5px}.kanto-map-v2262 .region-teleport-v2204-source,.kanto-map-v2262 .region-teleport-v2204-destination,.kanto-map-v2262 .region-teleport-v2204-empty{min-height:38px;padding:5px 7px;display:flex;align-items:center;gap:7px;border:1px solid #d9e6e5;border-radius:10px;background:#f8fbfa;color:#355a62;text-align:left}.kanto-map-v2262 button.region-teleport-v2204-source,.kanto-map-v2262 button.region-teleport-v2204-destination{cursor:pointer}.kanto-map-v2262 .region-teleport-v2204-source.is-selected{border-color:#7b65c6;background:#f2efff}.kanto-map-v2262 .region-teleport-v2204-source>span,.kanto-map-v2262 .region-teleport-v2204-destination>span,.kanto-map-v2262 .region-teleport-v2204-empty>span{min-width:0;display:grid;flex:1}.kanto-map-v2262 .region-teleport-v2204-source b,.kanto-map-v2262 .region-teleport-v2204-destination b,.kanto-map-v2262 .region-teleport-v2204-empty b{font-size:8px}.kanto-map-v2262 .region-teleport-v2204-source small,.kanto-map-v2262 .region-teleport-v2204-destination small,.kanto-map-v2262 .region-teleport-v2204-empty small{color:#789095;font-size:6px}.kanto-map-v2262 .region-teleport-v2204-destination>i,.kanto-map-v2262 .region-teleport-v2204-empty>i{width:24px;height:24px;display:grid;place-items:center}.kanto-map-v2262 .region-teleport-v2204-destination>i svg,.kanto-map-v2262 .region-teleport-v2204-empty>i svg{width:18px;height:18px}.kanto-map-v2262 .region-teleport-v2204-destination>em{font-size:6px;font-style:normal;font-weight:900}.kanto-map-v2262 .region-teleport-v2204-destination:disabled{opacity:.5;cursor:not-allowed} @keyframes kanto-route-flow{to{stroke-dashoffset:-34}} @media(max-width:900px){.side-panel.is-regions-panel{width:calc(100vw - 16px);height:calc(100dvh - 24px)}.kanto-map-v2262 .region-map-v2204-layout{grid-template-columns:minmax(0,1fr) 250px}.kanto-map-v2262 .region-map-v2204-header p{display:none}} @media(max-width:700px){.side-panel.is-regions-panel{inset:4px 4px calc(72px + env(safe-area-inset-bottom)) 4px;width:auto;height:auto;transform:none;border-radius:18px}.kanto-map-v2262{overflow:auto}.kanto-map-v2262 .region-map-v2204-header{position:sticky;z-index:20;top:0;min-height:58px;padding:9px 10px}.kanto-map-v2262 .region-map-v2204-header h2{font-size:18px}.kanto-map-v2262 .region-map-v2204-test-toggle span{display:none}.kanto-map-v2262 .region-map-v2204-layout{padding:8px;display:block}.kanto-map-v2262 .region-map-v2204-toolbar{padding:0 2px}.kanto-map-v2262 .region-map-v2204-toolbar>em{display:none}.kanto-map-v2262 .region-map-v2204-legend{gap:7px}.kanto-map-v2262 .region-map-v2204-viewport{height:min(57dvh,520px);min-height:360px;border-radius:14px}.kanto-map-v2262 .region-map-v2204-sidebar{margin-top:8px;overflow:visible}.kanto-map-v2262 .region-map-v2204-node{width:26px;height:26px}.kanto-map-v2262 .region-map-v2204-node>i{width:23px;height:23px;border-width:2px}.kanto-map-v2262 .region-map-v2204-node.is-hub>i,.kanto-map-v2262 .region-map-v2204-node.is-market>i{width:28px;height:28px}.kanto-map-v2262 .region-map-v2204-node>span{max-width:104px;font-size:7px}.kanto-map-v2262 .region-map-v2204-zoom{right:6px;bottom:6px}.kanto-map-v2262 .region-map-v2204-zoom button,.kanto-map-v2262 .region-map-v2204-zoom output{height:31px;padding:0 8px}.kanto-map-v2262 .region-map-v2204-zoom button:last-child span{display:none}} @media(prefers-reduced-motion:reduce){.kanto-map-v2262 .region-map-v2204-canvas.is-animated{transition:none}.kanto-map-v2262 .region-map-v2204-canvas>svg line.is-planned{animation:none}} /* The atlas and its markers share one fixed 3:2 coordinate plane. This keeps every route aligned with the illustration on wide screens and phones. */ .kanto-map-v2262 .region-map-v2204-stage{grid-template-rows:auto auto auto;align-content:center} .kanto-map-v2262 .region-map-v2204-viewport{width:min(100%,calc((100dvh - 210px)*1.5));max-width:100%;aspect-ratio:3/2;margin-inline:auto} .kanto-map-v2262 .region-map-v2204-canvas>img{object-fit:fill} .kanto-map-v2262 .region-map-v2204-legend .is-future:before{background:#9786bb} .kanto-map-v2262 .region-map-v2204-canvas>svg line.is-future-link{stroke:#665e78;stroke-width:2;stroke-dasharray:3 7;opacity:.46} .kanto-map-v2262 .region-map-v2204-node.is-stadium>i{width:25px;height:25px;background:#fff1df;color:#c35b35} .kanto-map-v2262 .region-map-v2204-node.is-future>i{width:20px;height:20px;border-width:2px;border-style:dashed;border-color:#e7e1ef;background:#716888;color:#f4f1fa;opacity:.88} .kanto-map-v2262 .region-map-v2204-node.is-future.is-stadium>i{width:22px;height:22px} .kanto-map-v2262 .region-map-v2204-node.is-future .region-map-marker-icon{width:13px;height:13px} .kanto-map-v2262 .region-map-v2204-node.is-future>span{background:#4f4963eb} .kanto-map-v2262 .region-map-v2204-selection.is-future{border-style:dashed} .kanto-map-v2262 .region-map-v2204-selection.is-future>header>i{background:#eeeaf6;color:#716888} @media(max-width:700px){.kanto-map-v2262 .region-map-v2204-viewport{width:100%;height:auto;min-height:0;aspect-ratio:3/2}} /* Readable map typography and a compact two-column teleport chooser. */ .kanto-map-v2262 .region-map-v2204-header>div:first-child>span{font-size:9px} .kanto-map-v2262 .region-map-v2204-header p{font-size:11px} .kanto-map-v2262 .region-map-v2204-legend span,.kanto-map-v2262 .region-map-v2204-toolbar>em{font-size:9px} .kanto-map-v2262 .region-map-v2262-search{height:28px;min-width:170px;padding:0 8px;display:flex;align-items:center;gap:6px;border:1px solid #cbdedf;border-radius:9px;background:#fff;color:#618088}.kanto-map-v2262 .region-map-v2262-search svg{width:14px;height:14px;flex:0 0 auto}.kanto-map-v2262 .region-map-v2262-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#244d58;font:750 9px/1 Inter,"Segoe UI",sans-serif}.kanto-map-v2262 .region-map-v2262-search input::placeholder{color:#80979c}.kanto-map-v2262 .region-map-v2204-node.is-search-muted{opacity:.12;pointer-events:none}.kanto-map-v2262 .region-map-v2204-node.is-search-match{z-index:7}.kanto-map-v2262 .region-map-v2204-node.is-search-match>i{box-shadow:0 0 0 4px #fff9,0 0 0 7px #29b7a0,0 8px 18px #173d5266}.kanto-map-v2262 .region-map-v2204-node.is-search-match>span{opacity:1;transform:translate(-50%,0)} .kanto-map-v2262 .region-map-v2204-node>span{font-size:9px;line-height:1.2} .kanto-map-v2262 .region-map-v2204-selection>header small,.kanto-map-v2262 .region-route-v2204 header small,.kanto-map-v2262 .region-teleport-v2204 header small{font-size:8px} .kanto-map-v2262 .region-map-v2204-selection-copy>p,.kanto-map-v2262 .region-route-v2204>p,.kanto-map-v2262 .region-teleport-v2204>p{font-size:10.5px;line-height:1.45} .kanto-map-v2262 .region-map-v2204-selection-copy small{font-size:7px} .kanto-map-v2262 .region-map-v2204-selection-copy b,.kanto-map-v2262 .region-map-v2204-primary b{font-size:10px} .kanto-map-v2262 .region-map-v2204-primary small{font-size:7px} .kanto-map-v2262 .region-route-v2204 header b,.kanto-map-v2262 .region-teleport-v2204 header b{font-size:11px} .kanto-map-v2262 .region-teleport-v2204-destinations{grid-template-columns:repeat(2,minmax(0,1fr))} .kanto-map-v2262 .region-teleport-v2204-destination{min-width:0} .kanto-map-v2262 .region-teleport-v2204-destination.is-home{grid-column:1/-1} .kanto-map-v2262 .region-teleport-v2204-source b,.kanto-map-v2262 .region-teleport-v2204-destination b,.kanto-map-v2262 .region-teleport-v2204-empty b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kanto-map-v2262 .region-teleport-v2204-source small,.kanto-map-v2262 .region-teleport-v2204-destination small,.kanto-map-v2262 .region-teleport-v2204-empty small{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:700px){.kanto-map-v2262 .region-map-v2204-header>div:first-child>span{font-size:8px}.kanto-map-v2262 .region-map-v2204-node>span{font-size:7px}.kanto-map-v2262 .region-map-v2204-legend span{font-size:7px}} @media(max-width:1400px){.kanto-map-v2262 .region-map-v2204-toolbar>em{display:none}} @media(max-width:700px){.kanto-map-v2262 .region-map-v2204-toolbar{align-items:flex-start;flex-wrap:wrap}.kanto-map-v2262 .region-map-v2262-search{width:100%;order:2;box-sizing:border-box}} @media(max-width:700px){ .kanto-map-v2262 .region-map-v2204-node>i{width:18px;height:18px} .kanto-map-v2262 .region-map-v2204-node.is-hub>i,.kanto-map-v2262 .region-map-v2204-node.is-market>i{width:22px;height:22px} .kanto-map-v2262 .region-map-v2204-node.is-stadium>i{width:17px;height:17px} .kanto-map-v2262 .region-map-v2204-node.is-future>i{width:14px;height:14px} .kanto-map-v2262 .region-map-v2204-node.is-future.is-stadium>i{width:15px;height:15px} .kanto-map-v2262 .region-map-v2204-node.is-current>i{width:26px;height:26px} .kanto-map-v2262 .region-map-v2204-node .region-map-marker-icon{width:12px;height:12px} .kanto-map-v2262 .region-map-v2204-node.has-label:not(.is-current):not(.is-selected):not(.is-search-match)>span{opacity:0;transform:translate(-50%,2px)} .kanto-map-v2262 .region-map-v2204-canvas>svg line.is-future-link{opacity:.28} } /* 2.27.2 — quiet atlas UI: one active route, compact controls and flag marker. */ .kanto-map-v2272 .region-map-v2204-header{min-height:58px;padding:9px 12px 9px 16px} .kanto-map-v2272 .region-map-v2204-header>div:first-child{display:block} .kanto-map-v2272 .region-map-v2204-header>div:first-child>span{display:block;margin-bottom:2px;font-size:8px} .kanto-map-v2272 .region-map-v2204-header h2{font-size:20px;line-height:1.05} .kanto-map-v2272 .region-map-v2272-progress{min-height:34px;padding:0 11px;display:flex;align-items:center;gap:5px;border:1px solid #d5e4e2;border-radius:11px;background:#f5faf8;color:#55737a} .kanto-map-v2272 .region-map-v2272-progress b{color:#187e74;font-size:14px}.kanto-map-v2272 .region-map-v2272-progress small{font-size:8px;font-weight:850} .kanto-map-v2272 .region-map-v2204-layout{padding:10px;grid-template-columns:minmax(0,1fr) 286px;gap:10px} .kanto-map-v2272 .region-map-v2204-stage{grid-template-rows:minmax(0,1fr) auto;align-content:stretch;gap:6px} .kanto-map-v2272 .region-map-v2204-viewport{width:min(100%,calc((100dvh - 140px)*1.5));box-shadow:0 11px 28px #174d6220} .kanto-map-v2272 .region-map-v2272-floating{position:absolute;z-index:12;top:9px;left:9px;right:9px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;pointer-events:none} .kanto-map-v2272 .region-map-v2272-search{width:min(310px,calc(100% - 52px));height:36px;padding:0 8px 0 10px;display:flex;align-items:center;gap:7px;border:1px solid #d5e4e2;border-radius:12px;background:#fffffff2;color:#607b82;box-shadow:0 5px 16px #133d5030;box-sizing:border-box;pointer-events:auto;backdrop-filter:blur(9px)} .kanto-map-v2272 .region-map-v2272-search>svg{width:15px;height:15px;flex:0 0 auto}.kanto-map-v2272 .region-map-v2272-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#214b57;font:800 10px/1 Inter,"Segoe UI",sans-serif}.kanto-map-v2272 .region-map-v2272-search input::placeholder{color:#789096}.kanto-map-v2272 .region-map-v2272-search input::-webkit-search-cancel-button{display:none}.kanto-map-v2272 .region-map-v2272-search button{width:22px;height:22px;padding:0;border:0;border-radius:7px;background:#e8f1f0;color:#557078;font:900 15px/1 Inter,sans-serif;cursor:pointer}.kanto-map-v2272 .region-map-v2272-search output{padding-left:7px;border-left:1px solid #dbe7e6;color:#71898f;font-size:7px;font-weight:900;white-space:nowrap} .kanto-map-v2272 .region-map-v2272-key{position:relative;pointer-events:auto}.kanto-map-v2272 .region-map-v2272-key>summary{width:36px;height:36px;display:grid;place-items:center;border:1px solid #d5e4e2;border-radius:12px;background:#fffffff2;color:#44666f;box-shadow:0 5px 16px #133d5030;cursor:pointer;list-style:none;backdrop-filter:blur(9px)}.kanto-map-v2272 .region-map-v2272-key>summary::-webkit-details-marker{display:none}.kanto-map-v2272 .region-map-v2272-key>summary i{width:18px;height:18px;display:grid;place-items:center;border:2px solid currentColor;border-radius:50%;font-size:10px;font-style:normal;font-weight:1000}.kanto-map-v2272 .region-map-v2272-key>summary span{display:none} .kanto-map-v2272 .region-map-v2272-key>div{position:absolute;top:42px;right:0;width:148px;padding:9px;display:grid;gap:8px;border:1px solid #d5e4e2;border-radius:12px;background:#fffffff5;box-shadow:0 9px 24px #133d5040;box-sizing:border-box}.kanto-map-v2272 .region-map-v2204-legend span{font-size:8px} .kanto-map-v2272 .region-map-v2204-canvas>svg polyline.is-active-route{fill:none;stroke:#ff873d;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:.92;filter:drop-shadow(0 1px 2px #fff) drop-shadow(0 2px 2px #17666a);vector-effect:non-scaling-stroke;animation:kanto-route-flow 1.6s linear infinite;stroke-dasharray:9 7} .kanto-map-v2272 .region-map-v2204-node{width:26px;height:26px;color:#236579}.kanto-map-v2272 .region-map-v2204-node>i{width:21px;height:21px;border-width:2px;background:#f7fcfa;box-shadow:0 2px 6px #0b3f5255}.kanto-map-v2272 .region-map-v2204-node.is-route>i{width:16px;height:16px;color:#47717b}.kanto-map-v2272 .region-map-v2204-node.is-hub>i,.kanto-map-v2272 .region-map-v2204-node.is-market>i{width:26px;height:26px}.kanto-map-v2272 .region-map-v2204-node.is-stadium>i{width:21px;height:21px}.kanto-map-v2272 .region-map-v2204-node.is-locked>i{border-color:#f1f5f4;background:#64777b;color:#e8eeee;filter:saturate(.35);opacity:.78}.kanto-map-v2272 .region-map-v2204-node.is-future>i{width:12px;height:12px;border:2px solid #f1edf5;background:#716988;color:transparent;opacity:.7}.kanto-map-v2272 .region-map-v2204-node.is-future .region-map-marker-icon{display:none}.kanto-map-v2272 .region-map-v2204-node.is-current{z-index:9}.kanto-map-v2272 .region-map-v2204-node.is-current>i{width:34px;height:34px;border:3px solid #fff9b6;border-radius:12px 12px 12px 3px;background:#ffca34;color:#684309;box-shadow:0 0 0 4px #fff9,0 6px 15px #5d421e80;transform:rotate(-4deg)}.kanto-map-v2272 .region-map-v2204-node.is-current .region-map-marker-icon{width:21px;height:21px;transform:rotate(4deg)}.kanto-map-v2272 .region-map-v2204-node.is-selected:not(.is-current)>i{transform:scale(1.12);box-shadow:0 0 0 3px #fff9,0 0 0 6px #ff8b3dcc,0 6px 14px #173d5266}.kanto-map-v2272 .region-map-v2204-node.is-on-route{z-index:6} .kanto-map-v2272 .region-map-v2204-node>em{right:-6px;top:-6px;width:13px;height:13px;border-width:1px;background:#f47732;font-size:6px}.kanto-map-v2272 .region-map-v2204-node>span{top:calc(100% + 6px);max-width:145px;padding:5px 8px;font-size:9px;opacity:0}.kanto-map-v2272 .region-map-v2204-node:hover>span,.kanto-map-v2272 .region-map-v2204-node:focus-visible>span,.kanto-map-v2272 .region-map-v2204-node.is-selected>span{opacity:1;transform:translate(-50%,0)}.kanto-map-v2272 .region-map-v2204-node.is-label-left>span{left:50%;transform:translate(0,2px)}.kanto-map-v2272 .region-map-v2204-node.is-label-left:hover>span,.kanto-map-v2272 .region-map-v2204-node.is-label-left:focus-visible>span,.kanto-map-v2272 .region-map-v2204-node.is-label-left.is-selected>span{transform:translate(0,0)}.kanto-map-v2272 .region-map-v2204-node.is-label-right>span{left:auto;right:50%;transform:translate(0,2px)}.kanto-map-v2272 .region-map-v2204-node.is-label-right:hover>span,.kanto-map-v2272 .region-map-v2204-node.is-label-right:focus-visible>span,.kanto-map-v2272 .region-map-v2204-node.is-label-right.is-selected>span{transform:translate(0,0)}.kanto-map-v2272 .region-map-v2204-node.is-label-top>span{top:auto;bottom:calc(100% + 6px)} .kanto-map-v2272 .region-map-v2204-node.is-search-muted{opacity:.1;pointer-events:none}.kanto-map-v2272 .region-map-v2204-node.is-search-match{z-index:7}.kanto-map-v2272 .region-map-v2204-node.is-search-match>i{box-shadow:0 0 0 3px #fff9,0 0 0 6px #28b89f,0 6px 14px #173d5266}.kanto-map-v2272 .region-map-v2204-node.is-search-match>span{opacity:0}.kanto-map-v2272 .region-map-v2204-node.is-search-match.is-selected>span{opacity:1} .kanto-map-v2272 .region-map-v2272-help{position:absolute;z-index:8;left:10px;bottom:10px;padding:6px 8px;border-radius:9px;background:#183f4db8;color:#fff;font-size:8px;font-weight:800;pointer-events:none;backdrop-filter:blur(5px)} .kanto-map-v2272 .region-map-v2204-zoom{right:10px;bottom:10px}.kanto-map-v2272 .region-map-v2204-sidebar{gap:7px}.kanto-map-v2272 .region-map-v2204-selection,.kanto-map-v2272 .region-route-v2204,.kanto-map-v2272 .region-teleport-v2204{padding:10px;border-radius:14px;box-shadow:0 5px 14px #163d4e10}.kanto-map-v2272 .region-map-v2204-selection>header{margin-bottom:6px}.kanto-map-v2272 .region-map-v2204-selection-copy>p,.kanto-map-v2272 .region-route-v2204>p{margin-bottom:6px;font-size:9.5px}.kanto-map-v2272 .region-map-v2204-selection-copy ul{display:none}.kanto-map-v2272 .region-map-v2204-selection-copy>div{margin-bottom:6px}.kanto-map-v2272 .region-route-v2204 details ol{max-height:84px} .kanto-map-v2272 .region-teleport-v2204>details>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none}.kanto-map-v2272 .region-teleport-v2204>details>summary::-webkit-details-marker{display:none}.kanto-map-v2272 .region-teleport-v2204>details>summary>i{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#eee8ff;color:#7154ae}.kanto-map-v2272 .region-teleport-v2204>details>summary>span{min-width:0;display:grid;flex:1}.kanto-map-v2272 .region-teleport-v2204>details>summary small{color:#2c9795;font-size:8px;font-weight:1000;letter-spacing:.12em}.kanto-map-v2272 .region-teleport-v2204>details>summary b{font-size:11px}.kanto-map-v2272 .region-teleport-v2204>details>summary em{padding:4px 7px;border-radius:8px;background:#edf6f4;color:#2b7774;font-size:8px;font-style:normal;font-weight:900}.kanto-map-v2272 .region-teleport-v2204>details>summary:after{content:"⌄";color:#6b858b;font-size:14px;transition:transform .16s}.kanto-map-v2272 .region-teleport-v2204>details[open]>summary:after{transform:rotate(180deg)}.kanto-map-v2272 .region-teleport-v2272-content{margin-top:9px;padding-top:9px;border-top:1px solid #e2eceb}.kanto-map-v2272 .region-teleport-v2272-content>p{margin:0 0 7px;color:#617980;font-size:9px;line-height:1.4}.kanto-map-v2272 .region-teleport-v2272-content .region-map-v2204-test-toggle{width:100%;margin-top:7px;box-sizing:border-box} @media(max-width:900px){.kanto-map-v2272 .region-map-v2204-layout{grid-template-columns:minmax(0,1fr) 250px}.kanto-map-v2272 .region-map-v2272-progress small{display:none}} @media(max-width:700px){.kanto-map-v2272 .region-map-v2204-header{min-height:52px;padding:7px 9px 7px 12px}.kanto-map-v2272 .region-map-v2204-header h2{font-size:17px}.kanto-map-v2272 .region-map-v2272-progress{min-height:32px;padding:0 8px}.kanto-map-v2272 .region-map-v2204-layout{padding:7px;display:block}.kanto-map-v2272 .region-map-v2204-stage{display:grid}.kanto-map-v2272 .region-map-v2204-viewport{width:100%;height:auto;min-height:0;aspect-ratio:3/2}.kanto-map-v2272 .region-map-v2272-floating{top:6px;left:6px;right:6px}.kanto-map-v2272 .region-map-v2272-search{width:calc(100% - 43px);height:32px}.kanto-map-v2272 .region-map-v2272-search output{display:none}.kanto-map-v2272 .region-map-v2272-key>summary{width:32px;height:32px}.kanto-map-v2272 .region-map-v2272-key>div{top:38px}.kanto-map-v2272 .region-map-v2204-node{width:22px;height:22px}.kanto-map-v2272 .region-map-v2204-node>i{width:16px;height:16px}.kanto-map-v2272 .region-map-v2204-node.is-hub>i,.kanto-map-v2272 .region-map-v2204-node.is-market>i{width:21px;height:21px}.kanto-map-v2272 .region-map-v2204-node.is-current>i{width:28px;height:28px}.kanto-map-v2272 .region-map-v2204-node.is-future>i{width:9px;height:9px}.kanto-map-v2272 .region-map-v2204-node .region-map-marker-icon{width:11px;height:11px}.kanto-map-v2272 .region-map-v2204-node.is-current .region-map-marker-icon{width:17px;height:17px}.kanto-map-v2272 .region-map-v2204-canvas>svg polyline.is-active-route{stroke-width:3}.kanto-map-v2272 .region-map-v2272-help{display:none}.kanto-map-v2272 .region-map-v2204-sidebar{margin-top:7px}.kanto-map-v2272 .region-map-v2204-node>span{max-width:108px;font-size:8px}} @media(prefers-reduced-motion:reduce){.kanto-map-v2272 .region-map-v2204-canvas>svg polyline.is-active-route{animation:none}} /* 2.29.2 — unified Kanto points, route tracking and visual teleport hub. */ .kanto-map-v2292 .region-map-v2204-node{width:24px;height:24px;color:#315f67} .kanto-map-v2292 .region-map-v2204-node>i{width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#409b83;box-shadow:0 0 0 1px #215b6673,0 2px 5px #163d505c} .kanto-map-v2292 .region-map-v2204-node>i::after{content:"";width:3px;height:3px;border-radius:50%;background:#fff9;box-shadow:inset 0 0 0 1px #fff6} .kanto-map-v2292 .region-map-v2204-node .region-map-marker-icon{display:none} .kanto-map-v2292 .region-map-v2204-node.is-hub>i,.kanto-map-v2292 .region-map-v2204-node.is-market>i,.kanto-map-v2292 .region-map-v2204-node.is-stadium>i{width:16px;height:16px;background:#eea94d} .kanto-map-v2292 .region-map-v2204-node.is-market>i{background:#ec8258} .kanto-map-v2292 .region-map-v2204-node.is-stadium>i{background:#c87bba} .kanto-map-v2292 .region-map-v2204-node.is-water>i{background:#43a9c8} .kanto-map-v2292 .region-map-v2204-node.is-special>i{background:#796fc3} .kanto-map-v2292 .region-map-v2204-node.is-locked>i{border-color:#f5f7f5;background:#7d8b8c;filter:none;opacity:.78} .kanto-map-v2292 .region-map-v2204-node.is-future>i{width:8px;height:8px;border:2px solid #e9edf0;background:#657279;color:transparent;opacity:.72} .kanto-map-v2292 .region-map-v2204-node.is-selected:not(.is-current)>i{transform:scale(1.1);box-shadow:0 0 0 3px #fff,0 0 0 6px #ff873dcc,0 4px 10px #173d5266} .kanto-map-v2292 .region-map-v2204-node.is-tracked:not(.is-current)>i{box-shadow:0 0 0 3px #fff,0 0 0 7px #1dc6a999,0 5px 13px #173d5266} .kanto-map-v2292 .region-map-v2204-node.is-current>i{width:31px;height:31px;border:3px solid #fff3a9;border-radius:11px 11px 11px 3px;background:linear-gradient(145deg,#ffe46b,#f7b91d);color:#6d4a08;box-shadow:0 0 0 3px #fff,0 7px 16px #5d421e80;transform:rotate(-3deg)} .kanto-map-v2292 .region-map-v2204-node.is-current>i::after{display:none} .kanto-map-v2292 .region-map-v2204-node.is-current .region-map-marker-icon{display:block;width:19px;height:19px;transform:rotate(3deg)} .kanto-map-v2292 .region-map-v2204-node.is-current .region-map-marker-icon .marker-fill{fill:currentColor;stroke:none} .kanto-map-v2292 .region-map-v2204-node>em{right:-5px;top:-7px;width:13px;height:13px;font-size:6px} .kanto-map-v2292 .region-map-v2204-node>span{max-width:122px;padding:4px 7px;border:1px solid #dbe6e5;background:#fffef7f2;color:#254e57;font-size:7px;line-height:1.15;box-shadow:0 3px 9px #163d5030;opacity:0} .kanto-map-v2292 .region-map-v2204-canvas.is-labels-major .region-map-v2204-node:is(.is-hub,.is-market)>span, .kanto-map-v2292 .region-map-v2204-canvas.is-labels-all .region-map-v2204-node:not(.is-future)>span, .kanto-map-v2292 .region-map-v2204-canvas.is-labels-planned .region-map-v2204-node.is-future>span{opacity:.92;transform:translate(-50%,0)} .kanto-map-v2292 .region-map-v2204-canvas:is(.is-labels-major,.is-labels-all,.is-labels-planned) .region-map-v2204-node.is-label-left>span{transform:translate(0,0)} .kanto-map-v2292 .region-map-v2204-canvas:is(.is-labels-major,.is-labels-all,.is-labels-planned) .region-map-v2204-node.is-label-right>span{transform:translate(0,0)} .kanto-map-v2292 .region-map-v2204-node:hover>span,.kanto-map-v2292 .region-map-v2204-node:focus-visible>span,.kanto-map-v2292 .region-map-v2204-node.is-selected>span,.kanto-map-v2292 .region-map-v2204-node.is-tracked>span,.kanto-map-v2292 .region-map-v2204-node.is-current>span{opacity:1} .kanto-map-v2292 .region-map-v2204-legend .is-hub::before{background:#eea94d} .kanto-map-v2292 .region-map-v2292-search{position:relative;height:auto;padding:0;border:0;background:transparent;box-shadow:none;display:block;overflow:visible} .kanto-map-v2292 .region-map-v2292-search-field{width:100%;height:36px;padding:0 8px 0 10px;display:flex;align-items:center;gap:7px;border:1px solid #d5e4e2;border-radius:12px;background:#fffffff4;color:#607b82;box-shadow:0 5px 16px #133d5030;box-sizing:border-box;backdrop-filter:blur(9px)} .kanto-map-v2292 .region-map-v2292-search-field>.ui-icon{width:15px;height:15px;flex:0 0 auto} .kanto-map-v2292 .region-map-v2292-search-field input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#214b57;font:800 10px/1 Inter,"Segoe UI",sans-serif} .kanto-map-v2292 .region-map-v2292-search-field input::placeholder{color:#789096} .kanto-map-v2292 .region-map-v2292-search-field input::-webkit-search-cancel-button{display:none} .kanto-map-v2292 .region-map-v2292-search-field>button{width:22px;height:22px;padding:0;border:0;border-radius:7px;background:#e8f1f0;color:#557078;font:900 15px/1 Inter,sans-serif} .kanto-map-v2292 .region-map-v2292-search-field>output{min-width:18px;padding-left:7px;border-left:1px solid #dbe7e6;color:#58747b;font-size:8px;font-weight:950;text-align:center;white-space:nowrap} .kanto-map-v2292 .region-map-v2292-search-results{position:absolute;z-index:20;top:42px;left:0;width:100%;max-height:232px;padding:5px;display:grid;gap:3px;overflow:auto;border:1px solid #d4e3e1;border-radius:12px;background:#fffffff8;box-shadow:0 12px 30px #143d5052;box-sizing:border-box;backdrop-filter:blur(12px)} .kanto-map-v2292 .region-map-v2292-search-results[hidden]{display:none} .kanto-map-v2292 .region-map-v2292-search-results>button{min-height:36px;padding:5px 7px;display:flex;align-items:center;gap:7px;border:0;border-radius:9px;background:transparent;color:#315861;text-align:left} .kanto-map-v2292 .region-map-v2292-search-results>button:hover,.kanto-map-v2292 .region-map-v2292-search-results>button:focus-visible{background:#eaf6f3} .kanto-map-v2292 .region-map-v2292-search-results>button span{min-width:0;display:grid;flex:1} .kanto-map-v2292 .region-map-v2292-search-results>button b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kanto-map-v2292 .region-map-v2292-search-results>button small{color:#789095;font-size:7px} .kanto-map-v2292 .region-map-v2292-search-results>button svg{width:13px;height:13px} .kanto-map-v2292 .region-map-v2292-search-results>p{margin:0;padding:9px;display:grid;color:#47636a;text-align:left} .kanto-map-v2292 .region-map-v2292-search-results>p b{font-size:10px}.kanto-map-v2292 .region-map-v2292-search-results>p small{margin-top:2px;color:#809399;font-size:7px} .kanto-map-v2292 .region-map-v2204-selection-copy>.region-map-v2292-actions{margin:0;display:grid;grid-template-columns:minmax(105px,.72fr) minmax(0,1.28fr);gap:6px;background:transparent;padding:0} .kanto-map-v2292 .region-map-v2292-track{min-height:40px;padding:6px 8px;display:flex;align-items:center;gap:6px;border:1px solid #cfe0de;border-radius:11px;background:#f2f8f6;color:#2b6767;text-align:left} .kanto-map-v2292 .region-map-v2292-track.is-active{border-color:#25aa91;background:#e0f7f0;color:#147663} .kanto-map-v2292 .region-map-v2292-track:disabled{opacity:.48;cursor:not-allowed} .kanto-map-v2292 .region-map-v2292-track>svg{width:17px;height:17px}.kanto-map-v2292 .region-map-v2292-track>span{display:grid}.kanto-map-v2292 .region-map-v2292-track small{font-size:6px}.kanto-map-v2292 .region-map-v2292-track b{font-size:8px} .kanto-map-v2292 .region-teleport-v2292{border-color:#d8d1ed;background:linear-gradient(155deg,#fff 0,#f8f5ff 100%)} .kanto-map-v2292 .region-teleport-v2292>details>summary>i{overflow:hidden;background:#eee8ff} .kanto-map-v2292 .region-teleport-v2292-summary-art{width:32px;height:32px}.kanto-map-v2292 .region-teleport-v2292-summary-art img{width:100%;height:100%;object-fit:contain} .kanto-map-v2292 .region-teleport-v2204-sources{margin-bottom:7px} .kanto-map-v2292 .region-teleport-v2292-preview{position:relative;min-height:68px;padding:6px 8px;border-color:#cfc5ec;background:linear-gradient(120deg,#f4efff,#fff)} .kanto-map-v2292 .region-teleport-v2292-abra-art{width:54px;height:54px;flex:0 0 auto;filter:saturate(.8)} .kanto-map-v2292 .region-teleport-v2292-abra-art img{width:100%;height:100%;object-fit:contain} .kanto-map-v2292 .region-teleport-v2292-preview span small{color:#795eb0;font-size:6px;font-weight:950;letter-spacing:.08em} .kanto-map-v2292 .region-teleport-v2292-preview span b{font-size:12px} .kanto-map-v2292 .region-teleport-v2292-preview span em{margin-top:2px;color:#718087;font-size:7px;font-style:normal;line-height:1.25;white-space:normal} .kanto-map-v2292 .region-teleport-v2292-preview>strong{padding:4px 6px;border-radius:7px;background:#e7e1f2;color:#7d6c9d;font-size:6px} .kanto-map-v2292 .region-teleport-v2204-destinations{max-height:245px;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;overflow:auto;scrollbar-width:thin} .kanto-map-v2292 .region-teleport-v2204-destination{min-height:54px;padding:4px 5px;border-color:#d8e2e2;background:#f9fbfb;overflow:hidden} .kanto-map-v2292 .region-teleport-v2204-destination.is-home{grid-column:1/-1} .kanto-map-v2292 .region-teleport-v2204-destination.is-available{border-color:#74c4ad;background:#edfaf6} .kanto-map-v2292 .region-teleport-v2204-destination.is-current{border-color:#ebc46b;background:#fff8e7} .kanto-map-v2292 .region-teleport-v2204-destination:disabled{opacity:.68} .kanto-map-v2292 .region-teleport-v2292-destination-art{width:38px;height:38px;flex:0 0 auto;overflow:hidden;border-radius:9px;background:#e9f2f0} .kanto-map-v2292 .region-teleport-v2292-destination-art img{width:100%;height:100%;object-fit:cover} .kanto-map-v2292 .region-teleport-v2204-destination.is-locked .region-teleport-v2292-destination-art img{filter:grayscale(1) brightness(.72)} .kanto-map-v2292 .region-teleport-v2204-destination>span b{font-size:8px}.kanto-map-v2292 .region-teleport-v2204-destination>span small{font-size:6px}.kanto-map-v2292 .region-teleport-v2204-destination>em{padding:3px 4px;border-radius:6px;background:#e8efee;color:#60777b;font-size:5px;text-align:center} .region-tracker-v2292{position:absolute;z-index:49;right:22px;bottom:118px;width:min(390px,calc(100vw - 44px));min-height:60px;display:flex;align-items:stretch;border:1px solid #d2e4e1;border-radius:16px;background:#fffffff2;color:#244d56;box-shadow:0 12px 30px #102f4040;overflow:hidden;backdrop-filter:blur(14px)} .region-tracker-v2292[hidden]{display:none} .region-tracker-v2292-main{min-width:0;padding:8px 9px;display:flex;align-items:center;gap:9px;flex:1;border:0;background:transparent;color:inherit;text-align:left} .region-tracker-v2292-main>i{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:linear-gradient(145deg,#1cb69a,#157f8e);color:#fff;box-shadow:0 5px 11px #177f8052} .region-tracker-v2292-main>i svg{width:18px;height:18px;transform:rotate(var(--tracker-bearing));transition:transform .18s ease} .region-tracker-v2292-main>span{min-width:0;display:grid;flex:1}.region-tracker-v2292-main>span small{color:#238d82;font-size:6px;font-weight:950;letter-spacing:.09em}.region-tracker-v2292-main>span b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.region-tracker-v2292-main>span em{color:#6c8185;font-size:8px;font-style:normal} .region-tracker-v2292-main>strong{max-width:100px;padding-left:8px;display:grid;border-left:1px solid #dfe9e7;color:#315b62;font-size:8px;line-height:1.1;text-align:right}.region-tracker-v2292-main>strong small{color:#89a09f;font-size:5px;letter-spacing:.1em} .region-tracker-v2292-close{width:30px;border:0;border-left:1px solid #dfe9e7;background:#f3f7f6;color:#6b8185;font-size:17px} .region-tracker-v2292 button:hover{filter:brightness(.98)} @media(max-width:700px){ .kanto-map-v2292 .region-map-v2292-search{width:calc(100% - 39px)} .kanto-map-v2292 .region-map-v2292-search-field{height:32px} .kanto-map-v2292 .region-map-v2292-search-results{top:37px} .kanto-map-v2292 .region-map-v2204-node>span{max-width:92px;font-size:6px} .kanto-map-v2292 .region-map-v2204-selection-copy>.region-map-v2292-actions{grid-template-columns:1fr} .kanto-map-v2292 .region-teleport-v2204-destinations{max-height:220px} .region-tracker-v2292{left:8px;right:8px;bottom:calc(80px + env(safe-area-inset-bottom));width:auto;min-height:54px;border-radius:14px} .region-tracker-v2292-main{padding:6px 7px;gap:7px}.region-tracker-v2292-main>i{width:31px;height:31px}.region-tracker-v2292-main>strong{display:none}.region-tracker-v2292-main>span b{font-size:10px} } @media(prefers-reduced-motion:reduce){.region-tracker-v2292-main>i svg{transition:none}} /* Complete painted starter appearances; legacy skin payloads are retained. */ .skin-picker .trainer-mini{background-size:contain;background-position:center;background-image:url('/assets/hero-trainers-v1/leagueTrainer/registration.webp')} .skin-picker .trainer-mini.female{background-image:url('/assets/hero-trainers-v1/classicGirl/registration.webp')} .trainer-avatar-preview{background:url('/assets/hero-trainers-v1/leagueTrainer/portrait.webp') center/contain no-repeat}body[data-skin-preview='female'] .trainer-avatar-preview{background-image:url('/assets/hero-trainers-v1/classicGirl/portrait.webp')} /* pk-style-source:30 */ /* /battle-v299.css */ /* PokePark Online v2.9.9 — compact battle rebuild from the stable v2.9.7 base. */ #battleHud[data-battle-ui="2.9.9"] { --battle-bg:rgba(3,29,42,.96); --battle-surface:rgba(8,44,58,.94); --battle-card:rgba(13,57,72,.9); --battle-card-soft:rgba(22,70,83,.72); --battle-border:rgba(122,218,241,.28); --battle-border-strong:rgba(118,226,248,.62); --battle-cyan:#65dcf6; --battle-teal:#57d9ad; --battle-gold:#f5ca58; --battle-red:#ff7e75; --battle-text:#f4fbff; --battle-muted:#a9c7d2; --battle-shadow:rgba(0,20,30,.42); position:fixed!important; inset:0!important; z-index:140!important; display:none!important; width:auto!important; height:auto!important; padding:0!important; border:0!important; background:rgba(1,20,29,.18)!important; font-family:"Segoe UI Variable",Inter,"Segoe UI",system-ui,sans-serif!important; pointer-events:none; } #battleHud[data-battle-ui="2.9.9"].is-open { display:block!important; pointer-events:auto; } /* -------------------------------------------------------------------------- v2.9.9 clean cockpit and staged outcome pass One live panel, explicit status timers and a result scene without a card. -------------------------------------------------------------------------- */ /* Remove the two legacy highlights that could surface as a white corner flare. */ #battleHud[data-battle-ui="2.9.9"] .battle-shell::after, #battleHud[data-battle-ui="2.9.9"] .combat-command-deck::before, #battleHud[data-battle-ui="2.9.9"] .combat-command-deck::after { content:none!important; display:none!important; background:none!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stage::before, #battleHud[data-battle-ui="2.9.9"] .battle-stage::after { box-shadow:none!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } /* Pause is a clean arena state: one large symbol and one readable label. */ #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay { grid-template-columns:76px auto!important; place-content:center!important; align-items:center!important; gap:17px!important; background:linear-gradient(180deg,rgba(2,28,39,.22),rgba(2,28,39,.32))!important; color:#f4fbff!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay > :is(i,svg) { width:76px!important; height:76px!important; color:#79def8!important; filter:drop-shadow(0 8px 18px rgba(0,24,34,.28))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay > span { display:grid!important; gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay > span > b { color:#f7fdff!important; font-size:39px!important; font-weight:1000!important; line-height:.92!important; letter-spacing:.075em!important; text-shadow:0 7px 22px rgba(0,22,32,.34)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay > span > em { color:#d1e7ed!important; font-size:11px!important; font-style:normal!important; font-weight:800!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay > span > small { color:#82def5!important; font-size:7px!important; font-weight:1000!important; letter-spacing:.13em!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay { background:linear-gradient(180deg,rgba(238,250,252,.18),rgba(225,244,248,.29))!important; color:#123746!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay > :is(i,svg) { color:#078fbd!important; filter:drop-shadow(0 8px 16px rgba(23,92,112,.2))!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay > span > b { color:#123746!important; text-shadow:0 4px 16px rgba(255,255,255,.78),0 8px 22px rgba(26,82,99,.13)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay > span > em { color:#4f7380!important; } /* The live controls are one panel. All inner cards and the energy wrapper go. */ #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { width:min(760px,calc(100% - 112px))!important; height:166px!important; bottom:10px!important; padding:7px 10px 5px!important; background:linear-gradient(150deg,var(--cockpit-surface),color-mix(in srgb,var(--cockpit-raised) 92%,transparent))!important; box-shadow:0 15px 34px color-mix(in srgb,var(--cockpit-shadow) 82%,transparent),inset 0 1px rgba(255,255,255,.13)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-live-controls { grid-template-rows:minmax(0,1fr) 24px!important; gap:2px!important; border:0!important; background:transparent!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(390px,1fr) 154px 104px!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] :is( .combat-skills-panel, .combat-skills-shell, .combat-items-panel, .combat-item-grid, .combat-utility-panel, .combat-utility-actions, .combat-resource-row ) { border:0!important; background:transparent!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { height:24px!important; min-height:24px!important; padding:0 6px!important; border-radius:0!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy { width:min(500px,100%)!important; grid-template-columns:116px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > span > i { border-color:color-mix(in srgb,var(--energy-b) 30%,var(--cockpit-line))!important; background:transparent!important; box-shadow:none!important; } /* All three utility buttons share one quiet surface. Only the flag is red. */ #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:104px!important; padding:14px 0 0!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, #battleHud[data-battle-ui="2.9.9"] #cancelBattle, #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button.is-active { min-height:30px!important; padding:0 7px!important; border:1px solid var(--cockpit-line)!important; border-radius:9px!important; background:linear-gradient(145deg,var(--cockpit-raised),var(--cockpit-chip))!important; color:var(--cockpit-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.12),0 4px 10px color-mix(in srgb,var(--cockpit-shadow) 45%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button.is-active { border-color:color-mix(in srgb,var(--battle-cyan) 38%,var(--cockpit-line))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > :is(i,svg) { color:var(--battle-cyan)!important; } #battleHud[data-battle-ui="2.9.9"] #cancelBattle > :is(i,svg) { color:var(--battle-red)!important; } #battleHud[data-battle-ui="2.9.9"] #cancelBattle > b { color:var(--cockpit-text)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button:is(:hover,:focus-visible) { background:linear-gradient(145deg,color-mix(in srgb,var(--cockpit-raised) 92%,var(--battle-cyan) 8%),var(--cockpit-chip))!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] #cancelBattle, html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button.is-active { border-color:rgba(27,128,158,.22)!important; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(235,247,250,.98))!important; color:#123746!important; box-shadow:inset 0 1px #fff,0 4px 10px rgba(31,83,99,.11)!important; } /* Status chips now communicate identity, remaining time and real stacks. */ #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { padding:2px 6px!important; grid-template-columns:58px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area > small { letter-spacing:.08em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area .battle-statuses { height:27px!important; gap:5px!important; overflow-x:auto!important; overflow-y:hidden!important; scrollbar-width:none!important; overscroll-behavior-inline:contain!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area .battle-statuses::-webkit-scrollbar { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area .battle-status-chip { --status-progress:360deg; flex:0 1 auto!important; max-width:220px!important; height:27px!important; padding:2px 7px 2px 3px!important; display:grid!important; grid-template-columns:21px minmax(0,1fr)!important; align-items:center!important; gap:5px!important; overflow:hidden!important; border-radius:9px!important; font-style:normal!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-icon { position:relative!important; width:21px!important; height:21px!important; padding:3px!important; display:grid!important; place-items:center!important; border-radius:50%!important; background:conic-gradient(currentColor var(--status-progress),color-mix(in srgb,currentColor 14%,transparent) 0)!important; box-sizing:border-box!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-icon::before { content:''!important; position:absolute!important; inset:2px!important; border-radius:inherit!important; background:var(--cockpit-chip)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-icon > :is(i,svg) { position:relative!important; z-index:1!important; width:13px!important; height:13px!important; color:inherit!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-copy { min-width:0!important; display:grid!important; gap:1px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-chip .battle-status-copy > b { display:block!important; overflow:hidden!important; color:inherit!important; font-size:7.5px!important; font-weight:1000!important; line-height:1!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-chip .battle-status-copy > small { display:block!important; overflow:hidden!important; color:var(--cockpit-muted)!important; font-size:6.5px!important; font-weight:850!important; line-height:1!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-chip.is-capture-ready { max-width:245px!important; color:var(--battle-gold)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-empty { min-height:23px!important; font-size:7.5px!important; } /* Results live over the arena. There is no enclosing reward card. */ #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"], #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { bottom:18px!important; width:min(850px,calc(100% - 82px))!important; height:330px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision { grid-template-rows:minmax(0,1fr) 64px!important; gap:9px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card { width:100%!important; height:100%!important; padding:0 8px!important; grid-template-rows:104px 17px minmax(92px,1fr)!important; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card::before { content:none!important; display:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header { width:min(620px,100%)!important; justify-self:center!important; gap:14px!important; filter:drop-shadow(0 8px 20px rgba(0,19,28,.28))!important; } #battleHud[data-battle-ui="2.9.9"] #battleResultArt, #battleHud[data-battle-ui="2.9.9"] .combat-result-art { width:84px!important; height:84px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header b { color:#f9fdff!important; font-size:44px!important; line-height:.9!important; text-shadow:0 5px 20px rgba(0,20,29,.48),0 0 26px color-mix(in srgb,var(--outcome-accent) 34%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header em { color:#d4e9ee!important; text-shadow:0 2px 8px rgba(0,17,25,.42)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-result-divider { width:min(660px,100%)!important; justify-self:center!important; color:color-mix(in srgb,var(--outcome-accent) 76%,#f2fbff 24%)!important; text-shadow:0 2px 8px rgba(0,17,25,.35)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list, #battleHud[data-battle-ui="2.9.9"] .combat-reward-list[data-mode="losses"] { width:min(720px,100%)!important; justify-self:center!important; grid-template-columns:repeat(auto-fit,minmax(168px,1fr))!important; grid-auto-rows:minmax(88px,1fr)!important; gap:10px!important; overflow:visible!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-reward-item,.combat-result-message), html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] :is(.combat-reward-item,.combat-result-message) { min-height:88px!important; padding:8px 7px!important; grid-template-columns:68px minmax(0,1fr)!important; border:0!important; border-radius:0!important; background:radial-gradient(circle at 36px 46px,color-mix(in srgb,var(--outcome-accent) 15%,var(--cockpit-raised)) 0 28px,transparent 29px)!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list[data-mode="losses"] .combat-result-message, #battleHud[data-battle-ui="2.9.9"] .combat-result-message { grid-column:auto!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-reward-art,.combat-result-message-art,.combat-loss-art) { width:64px!important; height:64px!important; padding:3px!important; border:0!important; border-radius:0!important; background:transparent!important; filter:drop-shadow(0 7px 12px rgba(0,16,24,.34))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item > mark { top:6px!important; right:6px!important; min-width:55px!important; border-color:color-mix(in srgb,var(--outcome-accent) 45%,var(--cockpit-line))!important; background:color-mix(in srgb,var(--cockpit-surface) 88%,transparent)!important; color:color-mix(in srgb,var(--outcome-accent) 72%,var(--cockpit-text) 28%)!important; box-shadow:0 3px 9px color-mix(in srgb,var(--cockpit-shadow) 45%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item b, #battleHud[data-battle-ui="2.9.9"] .combat-result-message b { color:#f4fbff!important; text-shadow:0 2px 8px rgba(0,17,25,.48)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item small, #battleHud[data-battle-ui="2.9.9"] .combat-result-message small { color:#b5d3dc!important; text-shadow:0 2px 7px rgba(0,17,25,.48)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item > strong { font-size:16px!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header b, html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-reward-item b, html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-result-message b { color:#123746!important; text-shadow:0 2px 8px rgba(255,255,255,.88),0 5px 15px rgba(31,82,98,.14)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header em, html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-reward-item small, html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-result-message small { color:#557681!important; text-shadow:0 2px 7px rgba(255,255,255,.86)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions { width:min(720px,100%)!important; justify-self:center!important; opacity:1!important; transform:none!important; transition:opacity .28s ease,transform .28s ease!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions.is-single { width:min(360px,100%)!important; grid-template-columns:1fr!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing .combat-decision-actions { opacity:0!important; transform:translateY(10px)!important; animation:none!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing .combat-reward-item { animation:combat-reward-enter .55s cubic-bezier(.16,.84,.2,1) calc(var(--reward-index,0) * 420ms + 460ms) both!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing .combat-reward-item > strong { animation:battle-reward-count-in .42s ease calc(var(--reward-index,0) * 420ms + 710ms) both!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing .combat-result-message { animation:combat-reward-enter .55s cubic-bezier(.16,.84,.2,1) calc(var(--reward-index,0) * 420ms + 460ms) both!important; } @media (max-width:920px) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { width:min(740px,calc(100% - 68px))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(370px,1fr) 150px 100px!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:100px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"], #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { width:calc(100% - 36px)!important; } } @media (max-width:700px) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { width:calc(100% - 10px)!important; height:246px!important; padding:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-live-controls { grid-template-rows:minmax(0,1fr) 23px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(0,1fr) 104px!important; grid-template-rows:126px 82px!important; gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel { grid-column:1/-1!important;grid-row:1!important; } #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { grid-column:1!important;grid-row:2!important;padding:0!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { grid-template-columns:repeat(6,44px)!important; grid-template-rows:48px!important; justify-content:center!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { width:44px!important;min-width:44px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { grid-column:2!important;grid-row:2!important;width:104px!important;padding:14px 0 0!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { grid-template-columns:repeat(3,1fr)!important;grid-template-rows:48px!important;gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button,#battleHud[data-battle-ui="2.9.9"] #cancelBattle { min-height:48px!important;padding:0!important;place-items:center!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { height:23px!important;padding:0 4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy { width:100%!important;grid-template-columns:96px minmax(0,1fr)!important;gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay { grid-template-columns:58px auto!important;gap:11px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay > :is(i,svg) { width:58px!important;height:58px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay > span > b { font-size:30px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"], #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { width:calc(100% - 10px)!important;height:310px!important;bottom:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card { grid-template-rows:86px 15px minmax(90px,1fr)!important;padding:0 4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header { grid-template-columns:70px minmax(0,1fr)!important;gap:9px!important; } #battleHud[data-battle-ui="2.9.9"] #battleResultArt,#battleHud[data-battle-ui="2.9.9"] .combat-result-art { width:68px!important;height:68px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header b { font-size:34px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list,#battleHud[data-battle-ui="2.9.9"] .combat-reward-list[data-mode="losses"] { grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important; } } @media (max-height:650px) and (orientation:landscape) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { width:min(720px,calc(100% - 64px))!important; height:154px!important; bottom:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(370px,1fr) 148px 96px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:96px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"], #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { height:250px!important;bottom:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card { grid-template-rows:72px 14px minmax(74px,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header b { font-size:34px!important; } } @media (prefers-reduced-motion:reduce) { #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing :is(.combat-reward-item,.combat-result-message,.combat-reward-item > strong) { animation:none!important; } } /* Hidden remains stronger than every responsive display override above. */ #battleHud[data-battle-ui="2.9.9"] .battle-shell { position:absolute!important; width:min(1080px,calc(100vw - 56px))!important; height:min(680px,calc(100dvh - 88px))!important; min-width:720px!important; min-height:500px!important; margin:0!important; padding:0!important; border:2px solid rgba(217,248,255,.82)!important; border-radius:26px!important; background:rgba(7,43,57,.08)!important; box-shadow:0 0 0 5px rgba(83,186,224,.13),0 24px 68px rgba(0,18,28,.42)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stage { position:relative!important; inset:auto!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; overflow:hidden!important; border:0!important; border-radius:24px!important; background:transparent!important; box-shadow:inset 0 0 0 1px rgba(109,217,242,.22)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stage::before { content:''!important; position:absolute!important; inset:0!important; z-index:0!important; border-radius:inherit!important; background:linear-gradient(180deg,rgba(2,26,39,.12),transparent 22%,transparent 73%,rgba(1,25,36,.2))!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status { position:absolute!important; z-index:24!important; left:12px!important; height:46px!important; min-height:46px!important; padding:5px 6px 5px 11px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:14px!important; border:1px solid var(--battle-border)!important; border-radius:15px!important; background:linear-gradient(145deg,rgba(3,35,49,.97),rgba(4,28,41,.96))!important; box-shadow:inset 0 1px rgba(255,255,255,.09),0 8px 22px rgba(0,24,35,.26)!important; color:var(--battle-text)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status > span { min-width:0!important; display:grid!important; grid-template-columns:auto minmax(0,1fr)!important; grid-template-rows:14px 18px!important; align-items:center!important; column-gap:9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status > span > small { grid-column:1/-1!important; display:flex!important; align-items:center!important; gap:4px!important; color:var(--battle-cyan)!important; font-size:8px!important; font-weight:900!important; line-height:1!important; letter-spacing:.08em!important; text-transform:uppercase!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status > span > small > i, #battleHud[data-battle-ui="2.9.9"] .battle-status > span > small svg { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status > span > strong { min-width:0!important; color:var(--battle-text)!important; font-size:13px!important; font-weight:850!important; line-height:1.15!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls { min-width:0!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls > button { width:34px!important; min-width:34px!important; height:34px!important; min-height:34px!important; margin:0!important; padding:0!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:0!important; border:1px solid var(--battle-border)!important; border-radius:10px!important; background:var(--battle-card)!important; color:var(--battle-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.08)!important; font-size:9px!important; font-weight:900!important; line-height:1!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls > button:hover:not(:disabled), #battleHud[data-battle-ui="2.9.9"] .battle-controls > button:focus-visible { border-color:var(--battle-border-strong)!important; background:color-mix(in srgb,var(--battle-card) 78%,var(--battle-cyan) 22%)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls > button > i, #battleHud[data-battle-ui="2.9.9"] .battle-controls > button svg { width:17px!important; height:17px!important; } #battleHud[data-battle-ui="2.9.9"] #battleHelp { width:34px!important; min-width:34px!important; padding:0!important; font-size:14px!important; } #battleHud[data-battle-ui="2.9.9"][data-phase="battle"] .battle-turn-chip { opacity:0!important; visibility:hidden!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] #cancelBattle { border-color:rgba(255,126,117,.38)!important; color:#ffe9e7!important; } #battleHud[data-battle-ui="2.9.9"] #autoBattle { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-turn-chip { position:absolute!important; z-index:14!important; left:50%!important; top:82px!important; width:auto!important; min-width:210px!important; max-width:360px!important; min-height:40px!important; padding:7px 14px!important; display:grid!important; justify-items:center!important; gap:2px!important; transform:translateX(-50%)!important; border:1px solid rgba(255,255,255,.78)!important; border-radius:14px!important; background:rgba(239,249,251,.94)!important; box-shadow:0 7px 18px rgba(0,35,48,.17)!important; color:#153e50!important; text-align:center!important; } #battleHud[data-battle-ui="2.9.9"] .battle-turn-chip small { color:#1885ad!important; font-size:9px!important; font-weight:950!important; letter-spacing:.09em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-turn-chip b { max-width:100%!important; font-size:11px!important; line-height:1.1!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } /* Readable combatant cards. */ #battleHud[data-battle-ui="2.9.9"] .battle-health { position:static!important; width:auto!important; height:auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article { position:absolute!important; z-index:12!important; top:96px!important; height:116px!important; min-width:0!important; min-height:0!important; grid-template-columns:72px minmax(0,1fr)!important; grid-template-rows:24px 10px 18px 18px 14px!important; align-items:center!important; column-gap:10px!important; row-gap:3px!important; overflow:visible!important; border:1px solid var(--battle-border)!important; background:linear-gradient(145deg,rgba(5,43,57,.97),rgba(4,31,44,.95))!important; box-shadow:inset 0 1px rgba(255,255,255,.1),0 10px 26px rgba(0,24,36,.25)!important; box-sizing:border-box!important; color:var(--battle-text)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .ally-health { left:30px!important; --fighter-accent:var(--battle-teal); } #battleHud[data-battle-ui="2.9.9"] .battle-health > .enemy-health { right:30px!important; --fighter-accent:var(--battle-red); } #battleHud[data-battle-ui="2.9.9"] .battle-health > article::before { content:''!important; position:absolute!important; inset:0 auto 0 0!important; width:4px!important; border-radius:18px 0 0 18px!important; background:var(--fighter-accent)!important; box-shadow:0 0 13px color-mix(in srgb,var(--fighter-accent) 70%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { grid-row:1/6!important; width:72px!important; height:72px!important; margin:0!important; display:grid!important; place-items:center!important; overflow:hidden!important; border:2px solid color-mix(in srgb,var(--fighter-accent) 58%,#fff 42%)!important; border-radius:17px!important; background:#eef9fb!important; box-shadow:0 5px 13px rgba(0,21,31,.2)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art, #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:64px!important; height:64px!important; object-fit:contain!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > span { grid-column:2!important; grid-row:1!important; min-width:0!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > span b { min-width:0!important; color:var(--battle-text)!important; font-size:15px!important; font-weight:850!important; line-height:1!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > span small { color:#d8edf4!important; font-size:11px!important; font-weight:850!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .battle-hp-bar { grid-column:2!important; grid-row:2!important; position:relative!important; width:100%!important; height:9px!important; overflow:hidden!important; border-radius:999px!important; background:rgba(1,20,29,.8)!important; box-shadow:inset 0 1px 3px rgba(0,0,0,.34)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-hp-bar > em { height:100%!important; display:block!important; border-radius:inherit!important; background:linear-gradient(90deg,var(--fighter-accent),color-mix(in srgb,var(--fighter-accent) 60%,#fff 40%))!important; transition:width .28s ease!important; } #battleHud[data-battle-ui="2.9.9"] .battle-hp-bar > strong { position:absolute!important; inset:0 auto 0 0!important; height:100%!important; border-radius:inherit!important; background:linear-gradient(90deg,rgba(102,212,255,.78),rgba(171,237,255,.9))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stamina, #battleHud[data-battle-ui="2.9.9"] .battle-exp { grid-column:2!important; min-width:0!important; display:grid!important; grid-template-columns:62px minmax(0,1fr)!important; align-items:center!important; gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stamina { grid-row:3!important; } #battleHud[data-battle-ui="2.9.9"] .battle-exp { grid-row:5!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stamina > span, #battleHud[data-battle-ui="2.9.9"] .battle-exp > span { min-width:0!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:4px!important; color:var(--battle-muted)!important; font-size:8px!important; font-weight:850!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stamina > i, #battleHud[data-battle-ui="2.9.9"] .battle-exp > i { width:100%!important; height:5px!important; overflow:hidden!important; border-radius:999px!important; background:rgba(1,21,30,.72)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stamina > i > em, #battleHud[data-battle-ui="2.9.9"] .battle-exp > i > em { height:100%!important; display:block!important; border-radius:inherit!important; background:var(--battle-cyan)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-exp > i > em { background:linear-gradient(90deg,#856cfa,#d998ff)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-statuses { grid-column:2!important; grid-row:4!important; min-width:0!important; display:flex!important; align-items:center!important; gap:4px!important; overflow:visible!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-chip { min-width:0!important; height:18px!important; padding:2px 5px!important; display:flex!important; align-items:center!important; gap:3px!important; border:1px solid var(--battle-border)!important; border-radius:7px!important; background:rgba(7,40,53,.88)!important; color:var(--battle-text)!important; font-size:8px!important; font-style:normal!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-chip svg { width:12px!important; height:12px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-chip b { max-width:138px!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-chip small { color:inherit!important; font-size:8px!important; font-weight:900!important; } #battleHud[data-battle-ui="2.9.9"] .enemy-health.is-capturable { border-color:rgba(246,203,88,.8)!important; box-shadow:0 0 0 3px rgba(246,203,88,.14),0 0 28px rgba(246,203,88,.22),0 10px 26px rgba(0,24,36,.3)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-chip.is-capture-ready { border-color:rgba(246,203,88,.7)!important; background:linear-gradient(135deg,#5d4315,#33270f)!important; color:#fff2a6!important; animation:battle-capture-ready 1.35s ease-in-out infinite; } @keyframes battle-capture-ready { 50% { box-shadow:0 0 13px rgba(246,203,88,.42); } } /* Six-slot team rail stays inside the arena. */ #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel { position:absolute!important; z-index:18!important; left:12px!important; top:224px!important; bottom:auto!important; width:58px!important; min-width:0!important; grid-template-rows:22px auto 13px!important; gap:5px!important; border:1px solid var(--battle-border)!important; border-radius:18px!important; background:linear-gradient(160deg,rgba(4,40,53,.96),rgba(3,28,40,.95))!important; box-shadow:inset 0 1px rgba(255,255,255,.08),0 9px 22px rgba(0,24,35,.26)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel > header { min-width:0!important; display:grid!important; place-items:center!important; color:var(--battle-teal)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel > header span { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel > header em { font-size:8px!important; font-style:normal!important; font-weight:950!important; letter-spacing:.04em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster { width:46px!important; grid-template-columns:46px!important; grid-template-rows:repeat(6,46px)!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { width:46px!important; height:46px!important; min-width:46px!important; min-height:46px!important; margin:0!important; padding:3px!important; border:1px solid var(--battle-border)!important; background:rgba(5,39,52,.95)!important; box-shadow:inset 0 1px rgba(255,255,255,.08)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-active { border-color:var(--battle-teal)!important; box-shadow:0 0 0 3px rgba(87,217,173,.15),0 0 16px rgba(87,217,173,.24)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-ko { opacity:.44!important; filter:grayscale(.8)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > span, #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > strong { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > kbd { position:absolute!important; z-index:3!important; right:-5px!important; min-width:18px!important; height:18px!important; padding:0 3px!important; display:grid!important; place-items:center!important; border:1px solid var(--battle-border)!important; border-radius:7px!important; background:rgba(2,25,36,.98)!important; color:var(--battle-text)!important; font-size:7px!important; font-weight:900!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait, #battleHud[data-battle-ui="2.9.9"] .battle-roster-empty, #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait > *, #battleHud[data-battle-ui="2.9.9"] .battle-roster-empty > * { width:38px!important; height:38px!important; object-fit:contain!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel > p { margin:0!important; color:var(--battle-muted)!important; font-size:7px!important; font-weight:850!important; text-align:center!important; } #battleHud[data-battle-ui="2.9.9"] .battle-skill-name { position:absolute!important; z-index:7!important; left:3px!important; right:3px!important; bottom:2px!important; display:block!important; overflow:hidden!important; color:var(--battle-text)!important; font-size:7px!important; font-weight:850!important; line-height:10px!important; text-align:center!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .skill-cost { position:absolute!important; z-index:9!important; right:2px!important; top:2px!important; min-width:22px!important; height:17px!important; padding:1px 3px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:1px!important; border-radius:7px!important; background:rgba(1,24,35,.88)!important; color:var(--battle-cyan)!important; font-size:7px!important; font-weight:900!important; } #battleHud[data-battle-ui="2.9.9"] .skill-cost svg { width:9px!important; height:9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-ultimate-badge { position:absolute!important; z-index:10!important; left:50%!important; bottom:-5px!important; min-width:42px!important; padding:3px 6px!important; transform:translateX(-50%)!important; border-radius:8px!important; background:linear-gradient(90deg,#eab23b,#fff08b)!important; color:#4b3300!important; font-size:7px!important; font-style:normal!important; font-weight:1000!important; line-height:1!important; letter-spacing:.06em!important; } #battleHud[data-battle-ui="2.9.9"] .skill-cooldown { position:absolute!important; z-index:6!important; left:3px!important; top:3px!important; width:var(--control-size)!important; height:var(--control-size)!important; display:grid!important; place-items:center!important; overflow:hidden!important; border-radius:12px!important; background:conic-gradient(rgba(0,18,28,.8) var(--cooldown-sweep,0deg),transparent 0)!important; color:#fff!important; opacity:0!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .is-cooling > .skill-cooldown { opacity:1!important; } #battleHud[data-battle-ui="2.9.9"] .skill-cooldown > b { font-size:13px!important; font-weight:950!important; text-shadow:0 1px 3px #000!important; } /* Painted alpha-channel atlases. */ #battleHud[data-battle-ui="2.9.9"] .battle-painted-art { display:block!important; width:100%!important; height:100%!important; background-image:url('/assets/v2.9.9/combat/battle-reward-icons.png')!important; background-repeat:no-repeat!important; background-size:500% 100%!important; background-position-y:center!important; filter:drop-shadow(0 4px 7px rgba(0,19,28,.23)); } #battleHud[data-battle-ui="2.9.9"] .battle-painted-art.is-xp { background-position-x:0!important; } #battleHud[data-battle-ui="2.9.9"] .battle-painted-art.is-trainer { background-position-x:25%!important; } #battleHud[data-battle-ui="2.9.9"] .battle-painted-art.is-feather { background-position-x:50%!important; } #battleHud[data-battle-ui="2.9.9"] .battle-painted-art.is-victory { background-position-x:75%!important; } #battleHud[data-battle-ui="2.9.9"] .battle-painted-art.is-ball { background-position-x:100%!important; } #battleHud[data-battle-ui="2.9.9"] .battle-outcome-art { display:block!important; width:100%!important; height:100%!important; background-image:var(--battle-outcome-atlas)!important; background-repeat:no-repeat!important; background-size:400% 200%!important; filter:drop-shadow(0 4px 7px rgba(0,19,28,.24)); } #battleHud[data-battle-ui="2.9.9"] .battle-outcome-art.is-tactic-manual { background-position:33.333% 0!important; } #battleHud[data-battle-ui="2.9.9"] .battle-outcome-art.is-tactic-smart { background-position:100% 0!important; } #battleHud[data-battle-ui="2.9.9"] .battle-outcome-art.is-outcome-victory { background-position:0 100%!important; } #battleHud[data-battle-ui="2.9.9"] .battle-outcome-art.is-outcome-defeat { background-position:33.333% 100%!important; } #battleHud[data-battle-ui="2.9.9"] .battle-outcome-art.is-outcome-draw { background-position:66.667% 100%!important; } #battleHud[data-battle-ui="2.9.9"] .battle-outcome-art.is-outcome-capture { background-position:100% 100%!important; } #battleHud[data-battle-ui="2.9.9"] #battleResultArt, #battleHud[data-battle-ui="2.9.9"] #battleResultArt > * { width:48px!important; height:48px!important; display:block!important; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-art { grid-column:1!important; grid-row:1/3!important; width:42px!important; height:42px!important; } /* Tactics remains readable and editable while the wild battle is paused. */ #battleHud[data-battle-ui="2.9.9"] .battle-tactics { position:absolute!important; z-index:42!important; top:82px!important; bottom:auto!important; width:366px!important; max-width:calc(100% - 36px)!important; max-height:calc(100% - 238px)!important; min-width:0!important; min-height:0!important; padding:12px!important; display:grid!important; grid-template-rows:auto auto auto auto!important; gap:10px!important; transform:translateY(-7px) scale(.985)!important; border:1px solid var(--battle-border-strong)!important; border-radius:18px!important; background:linear-gradient(150deg,rgba(4,42,56,.99),rgba(3,28,41,.99))!important; box-shadow:0 18px 42px rgba(0,18,28,.46),inset 0 1px rgba(255,255,255,.1)!important; color:var(--battle-text)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transition:opacity .17s ease,transform .17s ease,visibility .17s!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics.is-open { opacity:1!important; visibility:visible!important; transform:none!important; pointer-events:auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header { min-width:0!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header span { min-width:0!important; display:grid!important; gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header small { font-size:8px!important; font-weight:950!important; letter-spacing:.1em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header b { color:var(--battle-text)!important; font-size:16px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header button { width:34px!important; height:34px!important; min-width:34px!important; padding:0!important; display:grid!important; place-items:center!important; border:1px solid var(--battle-border)!important; border-radius:10px!important; background:var(--battle-card)!important; color:var(--battle-text)!important; font-size:21px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes { min-width:0!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button { min-width:0!important; min-height:112px!important; padding:7px 5px!important; display:grid!important; grid-template-rows:58px auto!important; justify-items:center!important; align-items:center!important; border:1px solid var(--battle-border)!important; border-radius:14px!important; background:var(--battle-card)!important; color:var(--battle-text)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button.is-active { border-color:var(--battle-cyan)!important; background:linear-gradient(150deg,rgba(23,85,98,.98),rgba(8,51,65,.98))!important; box-shadow:0 0 0 3px rgba(101,220,246,.12)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button > i, #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button > i > * { width:58px!important; height:58px!important; display:block!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button > span { min-width:0!important; display:grid!important; gap:2px!important; text-align:center!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes b { color:var(--battle-text)!important; font-size:9px!important; line-height:1.1!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes small { color:var(--battle-muted)!important; font-size:7px!important; line-height:1.25!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules { min-width:0!important; display:grid!important; gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules label { min-width:0!important; min-height:48px!important; padding:7px 9px!important; display:grid!important; grid-template-columns:40px minmax(0,1fr)!important; align-items:center!important; gap:9px!important; border:1px solid var(--battle-border)!important; border-radius:12px!important; background:rgba(12,55,69,.78)!important; color:var(--battle-text)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules input { position:relative!important; width:38px!important; height:22px!important; margin:0!important; appearance:none!important; border:1px solid var(--battle-border)!important; border-radius:999px!important; background:rgba(2,28,39,.9)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules input::after { content:''!important; position:absolute!important; left:3px!important; top:3px!important; width:14px!important; height:14px!important; margin:0!important; border-radius:50%!important; background:#b3cad3!important; transform:none!important; transition:transform .15s ease,background .15s ease!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules input:checked { background:rgba(61,172,136,.55)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules input:checked::after { transform:translateX(16px)!important; background:#fff!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules span { min-width:0!important; display:grid!important; gap:2px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules b { color:var(--battle-text)!important;font-size:10px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules small { color:var(--battle-muted)!important;font-size:8px!important;line-height:1.25!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics > footer { padding-top:8px!important; border-top:1px solid var(--battle-border)!important; color:var(--battle-muted)!important; font-size:8px!important; line-height:1.35!important; text-align:center!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay { z-index:30!important; background:rgba(3,23,31,.52)!important; backdrop-filter:blur(3px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay > span b { font-size:34px!important; letter-spacing:.06em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-asset-loader { z-index:46!important; } /* Do not let unrelated chat/side panels resize the combat window. */ @supports selector(body:has(*)) { @media (min-width:1280px) { body.is-battling:has(.chat-panel.is-open:not(.is-minimized)) #battleHud[data-battle-ui="2.9.9"] .battle-shell, body.is-battling:has(.side-panel.is-open) #battleHud[data-battle-ui="2.9.9"] .battle-shell { left:50%!important; right:auto!important; width:min(1080px,calc(100vw - 56px))!important; min-width:720px!important; transform:translate(-50%,-50%)!important; } } } @media (max-width:920px) { #battleHud[data-battle-ui="2.9.9"] .battle-shell { width:calc(100vw - 16px)!important; height:min(680px,calc(100dvh - 24px))!important; min-width:0!important; min-height:480px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status { left:8px!important; right:8px!important; top:8px!important; height:44px!important; min-height:44px!important; padding:4px 5px 4px 9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status > span > strong { font-size:13px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls { gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls > button { width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;font-size:8px!important; } #battleHud[data-battle-ui="2.9.9"] #battleHelp { width:32px!important;min-width:32px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-turn-chip { top:58px!important; min-width:180px!important; min-height:34px!important; padding:5px 10px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article { top:105px!important; width:calc(50% - 16px)!important; height:102px!important; padding:8px!important; grid-template-columns:58px minmax(0,1fr)!important; grid-template-rows:22px 9px 17px 17px 12px!important; column-gap:8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .ally-health { left:8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .enemy-health { right:8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { width:58px!important;height:58px!important;border-radius:14px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art, #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:52px!important;height:52px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > span b { font-size:12px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > span small { font-size:9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stamina, #battleHud[data-battle-ui="2.9.9"] .battle-exp { grid-template-columns:52px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-chip b { max-width:92px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel { left:5px!important; top:222px!important; width:49px!important; padding:4px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster { width:39px!important; grid-template-columns:39px!important; grid-template-rows:repeat(6,39px)!important; gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { width:39px!important;height:39px!important;min-width:39px!important;min-height:39px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait, #battleHud[data-battle-ui="2.9.9"] .battle-roster-empty, #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait > *, #battleHud[data-battle-ui="2.9.9"] .battle-roster-empty > * { width:32px!important;height:32px!important; } #battleHud[data-battle-ui="2.9.9"] #battleResultArt, #battleHud[data-battle-ui="2.9.9"] #battleResultArt > * { width:42px!important;height:42px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics { right:8px!important; top:58px!important; width:min(366px,calc(100% - 16px))!important; max-height:calc(100% - 260px)!important; } } @media (max-width:620px) { #battleHud[data-battle-ui="2.9.9"] .battle-shell { width:calc(100vw - 6px)!important; height:calc(100dvh - 6px)!important; min-height:420px!important; border-radius:19px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stage { border-radius:17px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status { left:5px!important;right:5px!important;top:5px!important;height:42px!important;min-height:42px!important;border-radius:13px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status > span > small { font-size:8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status > span > strong { font-size:11px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls > button { width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;padding:0!important; } #battleHud[data-battle-ui="2.9.9"] #battleHelp { width:30px!important;min-width:30px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-turn-chip { top:53px!important;min-width:150px!important;max-width:50%!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article { top:96px!important; width:calc(50% - 8px)!important; height:86px!important; padding:6px!important; grid-template-columns:44px minmax(0,1fr)!important; grid-template-rows:20px 8px 15px 15px 10px!important; column-gap:5px!important; row-gap:2px!important; border-radius:13px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .ally-health { left:4px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .enemy-health { right:4px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { width:44px!important;height:44px!important;border-radius:11px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art, #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:40px!important;height:40px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > span b { font-size:10px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > span small { font-size:8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stamina, #battleHud[data-battle-ui="2.9.9"] .battle-exp { grid-template-columns:36px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stamina > span, #battleHud[data-battle-ui="2.9.9"] .battle-exp > span { font-size:6px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-statuses { overflow:hidden!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-chip { height:15px!important;padding:1px 3px!important;font-size:6px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-chip b { max-width:58px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel { top:191px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-skill-name { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics { right:5px!important;top:53px!important;width:calc(100% - 10px)!important;max-height:calc(100% - 236px)!important;padding:9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button { min-height:90px!important;grid-template-rows:46px auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button > i, #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button > i > * { width:46px!important;height:46px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes small { display:none!important; } } @media (max-height:650px) and (orientation:landscape) { #battleHud[data-battle-ui="2.9.9"] .battle-shell { width:calc(100vw - 10px)!important; height:calc(100dvh - 10px)!important; min-width:0!important; min-height:0!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article { top:72px!important;height:88px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-turn-chip { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel { top:168px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics { top:66px!important;right:7px!important;width:340px!important;max-height:calc(100% - 76px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button { min-height:88px!important;grid-template-rows:44px auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button > i, #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button > i > * { width:44px!important;height:44px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules label { min-height:40px!important;padding:5px 7px!important; } } @media (max-width:520px) and (max-height:650px) and (orientation:landscape) { #battleHud[data-battle-ui="2.9.9"] .battle-health > article { top:62px!important; height:84px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics { right:5px!important; width:calc(100% - 10px)!important; } } /* -------------------------------------------------------------------------- v2.9.9 canonical combat cockpit The command area uses isolated combat-* classes so historical battle CSS cannot revive removed controls or change its grid. -------------------------------------------------------------------------- */ body.is-battling :is( .world-topbar, .player-stamina-hud, .party-hud, .quest-widget, #worldMinimapShell, .world-rail, .desktop-dock, .desktop-utility-rail, .mobile-dock, .chat-panel ) { opacity:0!important; visibility:hidden!important; pointer-events:none!important; } body.is-battling .world-shade { background:rgba(0,18,28,.16)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck, #battleHud[data-battle-ui="2.9.9"] .combat-command-deck * { box-sizing:border-box; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck { position:absolute!important; z-index:42!important; left:50%!important; right:auto!important; top:auto!important; width:min(820px,calc(100% - 112px))!important; height:172px!important; min-width:0!important; min-height:0!important; margin:0!important; display:block!important; overflow:visible!important; transform:translateX(-50%)!important; border:1px solid rgba(116,211,236,.45)!important; border-radius:18px!important; background:linear-gradient(145deg,rgba(5,43,57,.98),rgba(2,24,36,.99) 68%),radial-gradient(circle at 35% 0,rgba(91,215,245,.12),transparent 55%)!important; box-shadow:inset 0 1px rgba(255,255,255,.11),inset 0 0 24px rgba(78,192,222,.035),0 15px 34px rgba(0,14,24,.38)!important; color:#f3fbff!important; font-family:"Segoe UI Variable",Inter,"Segoe UI",system-ui,sans-serif!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck::before { content:''; position:absolute; inset:3px; z-index:-1; border:1px solid rgba(90,185,214,.14); border-radius:14px; pointer-events:none; } #battleHud[data-battle-ui="2.9.9"] .combat-live-controls { padding:0!important; gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(0,1fr) 204px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel, #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { min-width:0!important; min-height:0!important; margin:0!important; padding:0 4px!important; display:grid!important; grid-template-rows:17px minmax(0,1fr)!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { border-left:1px solid rgba(110,200,225,.2)!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) > header { min-width:0!important; height:17px!important; justify-content:flex-start!important; gap:5px!important; color:#f1fbff!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) > header b { overflow:hidden!important; color:#70dff6!important; font-size:7px!important; font-weight:950!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills-shell, #battleHud[data-battle-ui="2.9.9"] .combat-skills { width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { grid-template-columns:repeat(4,minmax(88px,108px))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-ring:color-mix(in srgb,var(--skill-type,#5acbea) 72%,#eafcff 28%); --combat-size:76px; margin:0!important; padding:4px 4px 30px!important; display:grid!important; place-items:start center!important; border:1px solid rgba(115,204,229,.22)!important; border-radius:13px!important; background:linear-gradient(155deg,rgba(18,64,79,.93),rgba(4,30,43,.98))!important; box-shadow:inset 0 1px rgba(255,255,255,.09),0 6px 14px rgba(0,15,24,.22)!important; color:#f4fbff!important; cursor:pointer!important; pointer-events:auto!important; touch-action:manipulation!important; user-select:none!important; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,filter .18s ease!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button::before { content:''; position:absolute; inset:1px; z-index:1; border-radius:12px; background:linear-gradient(125deg,rgba(255,255,255,.09),transparent 28% 70%,color-mix(in srgb,var(--skill-type,#5acbea) 14%,transparent)); pointer-events:none; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button.kind-ultimate { --combat-ring:rgba(255,211,91,.94); border-color:rgba(244,197,71,.54)!important; background:linear-gradient(160deg,rgba(73,55,16,.96),rgba(16,35,45,.98))!important; box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 20px rgba(244,196,66,.1),0 7px 16px rgba(0,15,24,.26)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button:is(:hover,:focus-visible), #battleHud[data-battle-ui="2.9.9"] .combat-action-button.is-previewed { z-index:3!important; border-color:var(--combat-ring)!important; transform:translateY(-2px)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--combat-ring) 15%,transparent),0 12px 22px rgba(0,14,23,.3)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button.is-disabled { filter:saturate(.58) brightness(.78)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button.is-no-stamina { --combat-ring:rgba(255,153,106,.82); } #battleHud[data-battle-ui="2.9.9"] .combat-action-button.is-queued { border-color:#ffe47d!important; box-shadow:0 0 0 3px rgba(255,224,91,.14),0 0 22px rgba(255,216,70,.18)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-art { position:relative!important; z-index:2!important; width:var(--combat-size)!important; height:var(--combat-size)!important; min-width:var(--combat-size)!important; min-height:var(--combat-size)!important; display:grid!important; place-items:center!important; overflow:hidden!important; border:4px solid var(--combat-ring)!important; border-radius:50%!important; background:radial-gradient(circle at 42% 34%,rgba(29,91,109,.98),rgba(2,23,35,.98))!important; box-shadow:inset 0 0 0 3px rgba(1,18,28,.82),0 0 0 2px rgba(2,22,33,.82),0 6px 16px rgba(0,14,23,.34),0 0 16px color-mix(in srgb,var(--combat-ring) 16%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-art > img, #battleHud[data-battle-ui="2.9.9"] img.combat-skill-art { width:100%!important; height:100%!important; object-fit:cover!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button > kbd, #battleHud[data-battle-ui="2.9.9"] .combat-item-button > kbd { position:absolute!important; z-index:8!important; left:5px!important; top:5px!important; min-width:20px!important; height:20px!important; padding:0 4px!important; display:grid!important; place-items:center!important; border:1px solid rgba(175,230,243,.42)!important; border-radius:7px!important; background:rgba(1,18,28,.94)!important; box-shadow:0 4px 9px rgba(0,10,18,.3)!important; color:#f7fdff!important; font:950 8px/1 inherit!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { z-index:7!important; left:4px!important; right:4px!important; bottom:18px!important; color:#f5fbff!important; font-size:7.5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tags { position:absolute!important; z-index:8!important; left:3px!important; right:3px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag { min-width:0!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:2px!important; overflow:hidden!important; border:1px solid rgba(143,209,226,.22)!important; border-radius:6px!important; background:rgba(1,20,30,.91)!important; color:#dff7fd!important; font-style:normal!important; line-height:1!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag > span { font-size:7px!important; line-height:1!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag > b { overflow:hidden!important; font-size:5.5px!important; font-weight:950!important; letter-spacing:.025em!important; text-overflow:ellipsis!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag.is-type { border-color:color-mix(in srgb,var(--skill-type,#5acbea) 48%,transparent)!important; background:color-mix(in srgb,var(--skill-type,#5acbea) 16%,rgba(1,20,30,.94))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag.damage-physical { color:#ffe0b2!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag.damage-special { color:#d9c8ff!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag.damage-pure { color:#bdf8ff!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button:is(:hover,:focus-visible) .combat-skill-tag, #battleHud[data-battle-ui="2.9.9"] .combat-action-button.is-previewed .combat-skill-tag { border-color:color-mix(in srgb,var(--combat-ring) 62%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { position:absolute!important; z-index:9!important; right:5px!important; top:62px!important; min-width:29px!important; height:20px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:2px!important; border:1px solid rgba(93,199,226,.28)!important; border-radius:9px!important; background:rgba(1,17,27,.95)!important; color:#70daf6!important; font-size:8px!important; font-weight:950!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost svg { width:10px!important; height:10px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button > em { position:absolute!important; z-index:10!important; right:6px!important; top:6px!important; min-width:15px!important; height:15px!important; padding:0 3px!important; display:grid!important; place-items:center!important; border-radius:999px!important; background:#63d496!important; box-shadow:0 0 0 2px rgba(2,23,33,.88)!important; color:#fff!important; font-size:7px!important; font-style:normal!important; font-weight:950!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button > em:empty { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-ultimate-badge { position:absolute!important; z-index:9!important; right:5px!important; top:5px!important; padding:3px 5px!important; border:1px solid rgba(255,225,132,.42)!important; border-radius:6px!important; background:rgba(76,51,7,.94)!important; color:#ffe48b!important; font-size:6px!important; font-style:normal!important; font-weight:950!important; letter-spacing:.05em!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button.kind-ultimate > em { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-cooldown { position:absolute!important; z-index:6!important; left:50%!important; top:4px!important; width:var(--combat-size,48px)!important; height:var(--combat-size,48px)!important; display:grid!important; place-items:center!important; overflow:hidden!important; transform:translateX(-50%)!important; border-radius:50%!important; background:radial-gradient(circle,rgba(0,11,18,.72) 0 calc(100% - 7px),transparent calc(100% - 6px)),conic-gradient(from 0deg,rgba(4,13,20,.98) var(--cooldown-sweep,0deg),color-mix(in srgb,var(--combat-ring) 30%,rgba(7,37,49,.36)) 0)!important; box-shadow:inset 0 0 0 2px rgba(1,13,21,.9),0 0 0 2px color-mix(in srgb,var(--combat-ring) 72%,rgba(1,17,26,.92)),0 0 18px rgba(0,12,20,.45)!important; opacity:0!important; pointer-events:none!important; transition:opacity .16s ease!important; } #battleHud[data-battle-ui="2.9.9"] .is-cooling > .combat-cooldown { opacity:1!important; } #battleHud[data-battle-ui="2.9.9"] .combat-cooldown > b { min-width:34px!important; height:26px!important; padding:0 5px!important; display:grid!important; place-items:center!important; border-radius:9px!important; border:1px solid rgba(170,227,241,.22)!important; background:rgba(0,13,21,.86)!important; color:#fff!important; font-size:15px!important; font-weight:950!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button.is-just-ready, #battleHud[data-battle-ui="2.9.9"] .combat-item-button.is-just-ready { animation:combat-control-ready .72s ease both!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button:active, #battleHud[data-battle-ui="2.9.9"] .combat-item-button:active { transform:translateY(0) scale(.96)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button.is-queued .combat-skill-art { animation:combat-skill-queued 1.05s ease-in-out infinite alternate!important; } @keyframes combat-skill-queued { from { filter:brightness(1);box-shadow:inset 0 0 0 3px rgba(1,18,28,.82),0 0 0 2px rgba(2,22,33,.82),0 5px 14px rgba(0,14,23,.3),0 0 12px rgba(255,216,70,.12); } to { filter:brightness(1.14);box-shadow:inset 0 0 0 3px rgba(1,18,28,.82),0 0 0 3px rgba(255,222,91,.72),0 6px 16px rgba(0,14,23,.34),0 0 24px rgba(255,216,70,.32); } } @keyframes combat-control-ready { 0% { box-shadow:0 0 0 0 rgba(105,225,183,.56);filter:brightness(1); } 42% { box-shadow:0 0 0 6px rgba(105,225,183,.16),0 0 26px rgba(105,225,183,.3);filter:brightness(1.18); } 100% { box-shadow:0 0 0 0 transparent;filter:brightness(1); } } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { margin:0!important; padding:0!important; grid-template-columns:repeat(3,58px)!important; grid-template-rows:repeat(2,48px)!important; gap:4px 6px!important; list-style:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { --combat-size:40px; position:relative!important; width:58px!important; height:48px!important; min-width:58px!important; min-height:48px!important; margin:0!important; padding:4px!important; display:grid!important; place-items:center!important; border:1px solid rgba(107,199,224,.22)!important; border-radius:11px!important; background:linear-gradient(155deg,rgba(16,59,73,.94),rgba(4,31,44,.98))!important; box-shadow:inset 0 1px rgba(255,255,255,.08),0 6px 13px rgba(0,15,24,.22)!important; color:#f4fbff!important; cursor:pointer!important; pointer-events:auto!important; touch-action:manipulation!important; user-select:none!important; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,filter .18s ease!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button:is(:hover,:focus-visible) { z-index:4!important; border-color:#72dbf4!important; transform:translateY(-1px)!important; box-shadow:0 0 0 3px rgba(105,216,244,.11),0 9px 18px rgba(0,14,23,.28)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button.is-ready { border-color:rgba(99,220,170,.5)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button.is-disabled { filter:saturate(.42) brightness(.72)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child { position:relative!important; z-index:2!important; width:40px!important; height:40px!important; display:grid!important; place-items:center!important; border:1px solid rgba(110,209,235,.28)!important; background:radial-gradient(circle at 45% 36%,rgba(28,83,101,.94),rgba(2,24,36,.97))!important; box-shadow:inset 0 0 0 2px rgba(1,18,28,.6)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-painted { width:38px!important; height:38px!important; display:block!important; background-image:var(--battle-quick-item-atlas)!important; background-repeat:no-repeat!important; background-size:300% 200%!important; filter:drop-shadow(0 3px 4px rgba(0,11,18,.28))!important; } #battleHud[data-battle-ui="2.9.9"] svg.combat-item-art { width:38px!important; height:38px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-painted.is-potion { background-position:0 0!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-painted.is-super-potion { background-position:50% 0!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-painted.is-full-heal { background-position:100% 0!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-painted.is-energy-tonic { background-position:0 100%!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-painted.is-guard-tonic { background-position:50% 100%!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-painted.is-slow-orb { background-position:100% 100%!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > b { position:absolute!important; z-index:10!important; bottom:-3px!important; min-width:23px!important; height:18px!important; padding:0 4px!important; display:grid!important; place-items:center!important; border:1px solid rgba(112,210,235,.28)!important; border-radius:8px!important; background:rgba(1,17,27,.96)!important; color:#effbff!important; font-weight:950!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown { top:4px!important; width:40px!important; height:40px!important; background:radial-gradient(circle,rgba(0,11,18,.7) 0 calc(100% - 5px),transparent calc(100% - 4px)),conic-gradient(from 0deg,rgba(4,13,20,.98) var(--cooldown-sweep,0deg),rgba(92,208,235,.28) 0)!important; box-shadow:inset 0 0 0 1px rgba(1,16,25,.78),0 0 0 2px rgba(89,200,227,.62)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown > b { min-width:28px!important; height:22px!important; font-size:11px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button::after { content:attr(data-tooltip); position:absolute; z-index:30; left:50%; bottom:calc(100% + 8px); width:max-content; max-width:220px; padding:6px 8px; transform:translate(-50%,4px); border:1px solid rgba(115,211,236,.32); border-radius:8px; background:rgba(1,21,32,.97); box-shadow:0 8px 20px rgba(0,12,20,.35); color:#eaf9fd; font-size:7px; font-weight:800; line-height:1.35; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .14s ease,transform .14s ease; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button:is(:hover,:focus-visible)::after { opacity:1; visibility:visible; transform:translate(-50%,0); } #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { width:100%!important; min-width:0!important; margin:0!important; padding:3px 7px!important; display:grid!important; grid-template-columns:1fr!important; align-items:center!important; gap:0!important; border:1px solid rgba(108,198,223,.17)!important; background:rgba(2,25,37,.8)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy { width:min(620px,100%)!important; min-width:0!important; margin:0 auto!important; display:grid!important; grid-template-columns:92px minmax(0,1fr)!important; align-items:center!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > span { display:flex!important; justify-content:space-between!important; gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy small { color:#63d7f4!important; font-size:7px!important; font-weight:950!important; letter-spacing:.07em!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy b { color:#eefbff!important; font-size:8px!important; font-weight:950!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i { height:10px!important; overflow:hidden!important; border:1px solid rgba(114,211,237,.26)!important; border-radius:5px!important; background:#061d2a!important; box-shadow:inset 0 2px 4px rgba(0,0,0,.36)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(1,16,25,.56) 18px 20px); pointer-events:none; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i > em { display:block!important; width:0; height:100%!important; border-radius:4px!important; background:linear-gradient(90deg,#299ed7,#5bd9f4)!important; box-shadow:0 0 12px rgba(71,196,238,.34)!important; transition:width .24s ease!important; } #battleHud[data-battle-ui="2.9.9"] .combat-resource-row > p { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .combat-resource-row > ol { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview { position:absolute!important; z-index:70!important; left:50%!important; bottom:calc(100% + 8px)!important; width:min(430px,calc(100% - 80px))!important; min-height:72px!important; padding:8px!important; display:grid!important; grid-template-columns:54px minmax(0,1fr)!important; align-items:center!important; gap:9px!important; transform:translate(-50%,8px) scale(.98)!important; border:1px solid rgba(120,214,238,.38)!important; border-radius:14px!important; background:linear-gradient(150deg,rgba(5,42,56,.985),rgba(2,25,37,.99))!important; box-shadow:0 15px 36px rgba(0,13,22,.44)!important; color:#f2fbff!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transition:opacity .16s ease,transform .16s ease!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.is-open { transform:translate(-50%,0) scale(1)!important; opacity:1!important; visibility:visible!important; } #battleHud[data-battle-ui="2.9.9"] .combat-preview-art { width:54px!important; height:54px!important; display:grid!important; place-items:center!important; overflow:hidden!important; border:2px solid rgba(106,211,238,.56)!important; border-radius:50%!important; background:#082b3b!important; } #battleHud[data-battle-ui="2.9.9"] .combat-preview-art > img { width:100%!important; height:100%!important; object-fit:cover!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview > div { min-width:0!important; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; gap:2px 8px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview small { color:#64d7f4!important; font-size:7px!important; font-weight:950!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview b { color:#f3fbff!important; font-size:12px!important; font-weight:950!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview p { grid-column:1/-1!important; margin:0!important; overflow:hidden!important; color:#b8d0d8!important; font-size:7px!important; line-height:1.35!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview em { grid-column:1/-1!important; color:#81aebb!important; font-size:7px!important; font-style:normal!important; font-weight:800!important; } /* Result and capture reuse the same outer deck, never a second panel. */ #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"], #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { width:min(850px,calc(100% - 110px))!important; height:204px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision { min-width:0!important; min-height:0!important; grid-template-columns:minmax(0,1fr) 214px!important; gap:8px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card { padding:8px 10px!important; grid-template-rows:52px 15px minmax(0,1fr) 19px!important; gap:3px!important; border:1px solid rgba(112,208,233,.2)!important; border-radius:14px!important; background:linear-gradient(150deg,rgba(12,53,67,.76),rgba(5,33,46,.82))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header { grid-template-columns:46px minmax(0,1fr)!important; gap:9px!important; } #battleHud[data-battle-ui="2.9.9"] #battleResultArt, #battleHud[data-battle-ui="2.9.9"] .combat-result-art { width:46px!important; height:46px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header > span { gap:1px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header small { color:#67d8f4!important; font-size:7px!important; font-weight:950!important; letter-spacing:.08em!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header b { color:#f5fbff!important; font-size:18px!important; font-weight:950!important; line-height:1!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header em { color:#a9c8d2!important; font-size:7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-result-divider { gap:8px!important; color:#6ed8f2!important; font-size:6px!important; font-weight:950!important; letter-spacing:.08em!important; } #battleHud[data-battle-ui="2.9.9"] .combat-result-divider > i { background:linear-gradient(90deg,rgba(107,211,236,.4),transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list { gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item, #battleHud[data-battle-ui="2.9.9"] .combat-result-message { height:55px!important; padding:5px 6px!important; grid-template-columns:38px minmax(0,1fr) auto!important; gap:5px!important; border:1px solid rgba(112,205,230,.18)!important; border-radius:11px!important; background:rgba(3,30,42,.68)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-result-message { grid-template-columns:40px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-art, #battleHud[data-battle-ui="2.9.9"] .combat-result-message-art { width:38px!important; height:38px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item > span, #battleHud[data-battle-ui="2.9.9"] .combat-result-message > span { gap:1px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item small, #battleHud[data-battle-ui="2.9.9"] .combat-result-message small { color:#80adbb!important; font-size:5.5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item b, #battleHud[data-battle-ui="2.9.9"] .combat-result-message b { color:#edfaff!important; font-size:7px!important; font-weight:900!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item > strong { color:#79e0fb!important; font-size:8px!important; font-weight:950!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing .combat-reward-item { animation:combat-reward-enter .48s cubic-bezier(.2,.78,.2,1) calc(var(--reward-index,0) * 140ms + 180ms) both!important; } @keyframes combat-reward-enter { from { opacity:0;transform:translateY(10px) scale(.96);filter:blur(3px); } to { opacity:1;transform:none;filter:none; } } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus { gap:8px!important; color:#8eb5c1!important; font-size:6px!important; } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus :is(span,b) { overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions { grid-template-rows:repeat(2,minmax(0,1fr))!important; gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button { min-height:0!important; padding:8px 10px!important; gap:8px!important; border:1px solid rgba(109,208,233,.3)!important; border-radius:13px!important; background:linear-gradient(150deg,rgba(16,64,79,.92),rgba(5,34,47,.96))!important; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button:is(:hover,:focus-visible) { border-color:#72dcf4!important; transform:translateY(-1px)!important; box-shadow:0 0 0 3px rgba(105,216,244,.11),0 10px 20px rgba(0,14,23,.28)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button:disabled { opacity:.46!important; filter:saturate(.45)!important; cursor:not-allowed!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-button-art { width:46px!important; height:46px!important; display:block!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button > span { gap:2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions small { color:#70d9f4!important; font-size:6px!important; font-weight:950!important; letter-spacing:.06em!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions b { color:#f4fbff!important; font-size:9px!important; font-weight:950!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="capture"] { width:min(790px,calc(100% - 110px))!important; height:112px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-panel { width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; padding:5px!important; display:grid!important; grid-template-columns:178px minmax(0,1fr) 132px!important; align-items:center!important; gap:8px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-copy { min-width:0!important; display:grid!important; gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-copy small { color:#6ed9f4!important; font-size:7px!important; font-weight:950!important; letter-spacing:.08em!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-copy b { color:#f4fbff!important; font-size:12px!important; font-weight:950!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-copy em { overflow:hidden!important; color:#93b8c4!important; font-size:7px!important; font-style:normal!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls { min-width:0!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls > button { position:relative!important; width:70px!important; height:76px!important; min-width:70px!important; padding:5px!important; display:grid!important; grid-template-rows:42px 12px 10px!important; place-items:center!important; overflow:hidden!important; border:1px solid rgba(112,205,231,.2)!important; border-radius:12px!important; background:rgba(9,48,62,.82)!important; color:#effaff!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls > button.is-selected { border-color:#72dcf4!important; box-shadow:0 0 0 3px rgba(105,216,244,.12)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls .capture-ball-icon { width:40px!important; height:40px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls b { max-width:100%!important; overflow:hidden!important; font-size:7px!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls small { color:#71d8f3!important; font-size:7px!important; font-weight:900!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls .capture-empty { color:#a8c4ce!important; font-size:8px!important; text-align:center!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-cancel { height:44px!important; min-height:44px!important; padding:0 10px!important; border:1px solid rgba(255,126,118,.4)!important; border-radius:11px!important; background:rgba(82,39,45,.84)!important; color:#ffd9d5!important; font-size:8px!important; font-weight:950!important; } /* Tablet */ @media (max-width:960px) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck { width:min(800px,calc(100% - 92px))!important; height:172px!important; bottom:7px!important; padding:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(0,1fr) 198px!important;gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel { padding:0 4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { padding:0 3px 0 8px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { grid-template-columns:repeat(4,minmax(76px,104px))!important;gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:72px; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:58px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { grid-template-columns:repeat(3,55px)!important;gap:4px 5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { width:55px!important;min-width:55px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"], #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { width:calc(100% - 88px)!important;height:196px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="capture"] { width:calc(100% - 88px)!important;height:108px!important; } } /* Phone */ @media (max-width:700px) { body.is-battling :is(.world-topbar,.player-stamina-hud,.party-hud,.quest-widget,#worldMinimapShell,.world-rail,.desktop-dock,.desktop-utility-rail,.mobile-dock,.chat-panel) { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck { width:calc(100% - 8px)!important; height:228px!important; bottom:4px!important; padding:5px!important; border-radius:16px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-live-controls { grid-template-rows:minmax(0,1fr) 28px!important;gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:1fr!important;grid-template-rows:120px 64px!important;gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) { padding:0 3px!important;grid-template-rows:15px minmax(0,1fr)!important;gap:1px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { border-top:1px solid rgba(110,200,225,.18)!important;border-left:0!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) > header { height:15px!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) > header b { font-size:6.5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { grid-template-columns:repeat(4,minmax(66px,88px))!important;gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:61px;padding:3px 3px 28px!important;border-radius:12px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:49px!important;right:2px!important;height:18px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { bottom:17px!important;font-size:6.5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tags { bottom:2px!important;height:13px!important;gap:2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag { height:13px!important;padding:0 3px 0 1px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag > b { font-size:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button > kbd { left:3px!important;top:3px!important;min-width:18px!important;height:18px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-ultimate-badge { right:3px!important;top:3px!important;padding:2px 3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { grid-template-columns:repeat(6,minmax(43px,52px))!important;grid-template-rows:48px!important;gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { --combat-size:42px;width:100%!important;height:48px!important;min-width:0!important;min-height:48px!important;padding:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child { width:42px!important;height:42px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-painted { width:39px!important;height:39px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown { top:3px!important;width:42px!important;height:42px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > kbd { left:-2px!important;top:-2px!important;min-width:17px!important;height:17px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { height:28px!important;grid-template-columns:1fr!important;padding:3px 6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy { grid-template-columns:82px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview { bottom:calc(100% + 5px)!important;width:calc(100% - 12px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel { left:5px!important; right:5px!important; top:190px!important; width:auto!important; height:48px!important; padding:3px 5px!important; display:block!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel > header, #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel > p { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster { width:100%!important; height:40px!important; display:grid!important; grid-template-columns:repeat(6,40px)!important; grid-template-rows:40px!important; justify-content:center!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait, #battleHud[data-battle-ui="2.9.9"] .battle-roster-empty, #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait > *, #battleHud[data-battle-ui="2.9.9"] .battle-roster-empty > * { width:33px!important;height:33px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"], #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { width:calc(100% - 8px)!important;height:260px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision { grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr) 54px!important;gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card { grid-template-rows:44px 13px minmax(0,1fr) 17px!important;padding:5px 7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header { grid-template-columns:38px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] #battleResultArt, #battleHud[data-battle-ui="2.9.9"] .combat-result-art { width:38px!important;height:38px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header b { font-size:15px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list { gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item { height:49px!important;padding:3px!important;grid-template-columns:32px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item > strong { grid-column:2!important;font-size:7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-art { width:32px!important;height:32px!important;grid-row:1/3!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions { grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:54px!important;gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button { padding:4px 6px!important;grid-template-columns:36px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-button-art { width:36px!important;height:36px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="capture"] { width:calc(100% - 8px)!important;height:152px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-panel { grid-template-columns:1fr 110px!important;grid-template-rows:34px minmax(0,1fr)!important;gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-copy { grid-column:1/-1!important;grid-template-columns:auto auto minmax(0,1fr)!important;align-items:baseline!important;gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-copy b { font-size:10px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls { justify-content:flex-start!important;overflow-x:auto!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls > button { width:58px!important;height:82px!important;min-width:58px!important; } } @media (max-width:360px) { #battleHud[data-battle-ui="2.9.9"] .combat-skills { grid-template-columns:repeat(4,minmax(61px,78px))!important;gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:57px; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:45px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { grid-template-columns:repeat(6,42px)!important;gap:2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > b { right:-1px!important; } } /* Short desktop/tablet landscape */ @media (min-width:701px) and (max-height:650px) and (orientation:landscape) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck { width:min(780px,calc(100% - 126px))!important; height:146px!important; bottom:4px!important; padding:5px!important; border-radius:16px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-live-controls { grid-template-rows:minmax(0,1fr) 24px!important;gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(0,1fr) 190px!important;gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) { grid-template-rows:15px minmax(0,1fr)!important;padding:0 3px!important;gap:1px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { padding-left:7px!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) > header { height:15px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { grid-template-columns:repeat(4,minmax(66px,88px))!important;gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:60px;padding:2px 3px 27px!important;border-radius:11px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:48px!important;right:2px!important;height:17px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { bottom:16px!important;font-size:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tags { bottom:1px!important;height:13px!important;gap:2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag { height:13px!important;padding:0 2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag > b { font-size:4.7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button > kbd { left:2px!important;top:2px!important;min-width:17px!important;height:17px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-ultimate-badge { top:2px!important;right:2px!important;padding:2px 3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { grid-template-columns:repeat(3,52px)!important;grid-template-rows:repeat(2,39px)!important;gap:3px 5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { --combat-size:37px;width:52px!important;height:39px!important;min-width:52px!important;min-height:39px!important;padding:2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child { width:37px!important;height:37px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-painted { width:35px!important;height:35px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown { top:3px!important;width:37px!important;height:37px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > kbd { min-width:16px!important;height:16px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { height:24px!important;padding:2px 5px!important;grid-template-columns:1fr!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy { grid-template-columns:82px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i { height:8px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview { bottom:calc(100% + 5px)!important;min-height:64px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"], #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { width:min(780px,calc(100% - 126px))!important;height:158px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="capture"] { width:min(730px,calc(100% - 126px))!important;height:94px!important; } } @media (prefers-reduced-motion:reduce) { #battleHud[data-battle-ui="2.9.9"] :is(.combat-command-deck,.combat-command-deck *) { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item { opacity:1!important; transform:none!important; filter:none!important; } } /* -------------------------------------------------------------------------- v2.9.9 battle polish — four-skill combat, quiet top actions, bright arena. These scoped rules are deliberately last so legacy battle sheets cannot stretch the header or revive the removed basic-attack presentation. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] .battle-stage::before, #battleHud[data-battle-ui="2.9.9"] .battle-stage::after { background:transparent!important; box-shadow:inset 0 0 0 1px rgba(221,249,255,.18)!important; } /* Only the three battle actions live at the top; there is no spanning bar. */ #battleHud[data-battle-ui="2.9.9"] .battle-status { left:auto!important; right:12px!important; top:10px!important; width:auto!important; height:auto!important; min-height:0!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls { padding:0!important; gap:7px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls > button { position:relative!important; width:auto!important; min-width:76px!important; height:36px!important; min-height:36px!important; padding:0 11px!important; gap:6px!important; overflow:hidden!important; border:1px solid rgba(120,220,244,.34)!important; border-radius:12px!important; background:linear-gradient(155deg,rgba(10,58,73,.93),rgba(3,31,44,.96))!important; box-shadow:inset 0 1px rgba(255,255,255,.12),0 8px 18px rgba(0,19,29,.22)!important; font-size:7px!important; letter-spacing:.045em!important; text-transform:uppercase!important; backdrop-filter:blur(8px)!important; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls > button::before { content:''!important; position:absolute!important; inset:1px!important; border-radius:10px!important; background:linear-gradient(125deg,rgba(255,255,255,.1),transparent 34% 70%,rgba(79,210,242,.08))!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls > button:is(:hover,:focus-visible) { border-color:rgba(122,226,250,.78)!important; outline:0!important; transform:translateY(-1px)!important; box-shadow:0 0 0 3px rgba(89,213,242,.1),0 11px 23px rgba(0,17,27,.3)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls > button > b { display:block!important; color:inherit!important; font-size:7px!important; font-weight:950!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls > button > i, #battleHud[data-battle-ui="2.9.9"] .battle-controls > button > svg { position:relative!important; z-index:1!important; width:17px!important; height:17px!important; color:#82e3f8!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls > button > b { position:relative!important; z-index:1!important; } #battleHud[data-battle-ui="2.9.9"] #cancelBattle { min-width:82px!important; background:linear-gradient(155deg,rgba(112,48,55,.9),rgba(51,30,40,.96))!important; } #battleHud[data-battle-ui="2.9.9"] #pauseBattle.is-active { border-color:rgba(250,205,87,.62)!important; background:linear-gradient(155deg,rgba(89,69,27,.93),rgba(39,35,34,.96))!important; } #battleHud[data-battle-ui="2.9.9"] #battleTacticsToggle.is-active { border-color:rgba(94,224,183,.66)!important; background:linear-gradient(155deg,rgba(25,91,77,.94),rgba(4,39,48,.96))!important; } /* Encounter identity now sits between the two combatant cards. */ #battleHud[data-battle-ui="2.9.9"] .battle-versus-card { position:absolute!important; z-index:13!important; top:78px!important; width:220px!important; min-height:78px!important; padding:8px 11px!important; display:grid!important; grid-template-rows:13px auto 18px!important; justify-items:center!important; align-content:center!important; gap:3px!important; border:1px solid rgba(126,220,241,.3)!important; border-radius:15px!important; background:linear-gradient(150deg,rgba(6,45,58,.88),rgba(3,27,39,.9))!important; box-shadow:inset 0 1px rgba(255,255,255,.1),0 9px 21px rgba(0,22,32,.2)!important; color:var(--battle-text)!important; text-align:center!important; backdrop-filter:blur(8px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > small { display:flex!important; align-items:center!important; gap:5px!important; color:var(--battle-cyan)!important; font-size:7px!important; font-weight:950!important; letter-spacing:.1em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > small :is(i,svg) { width:12px!important; height:12px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > strong { width:100%!important; overflow:hidden!important; color:#f6fcff!important; font-size:12px!important; font-weight:900!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > span { width:100%!important; display:grid!important; grid-template-columns:1fr 31px 1fr!important; align-items:center!important; gap:7px!important; color:#ffe387!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > span > i { height:1px!important; background:linear-gradient(90deg,transparent,rgba(108,219,244,.65))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > span > i:last-child { background:linear-gradient(90deg,rgba(108,219,244,.65),transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > span > b { font-size:12px!important; font-weight:1000!important; letter-spacing:.08em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > em { position:absolute!important; left:50%!important; bottom:-7px!important; padding:3px 7px!important; transform:translateX(-50%)!important; border:1px solid rgba(115,213,237,.28)!important; border-radius:999px!important; background:rgba(2,25,36,.95)!important; color:#9adff0!important; font-size:6px!important; font-style:normal!important; font-weight:950!important; letter-spacing:.08em!important; white-space:nowrap!important; } /* Combatant cards: identity, types and every resource have their own row. */ #battleHud[data-battle-ui="2.9.9"] .battle-health > article { --fighter-hp:#56df8d; top:66px!important; width:350px!important; height:154px!important; display:grid!important; grid-template-columns:78px minmax(0,1fr)!important; grid-template-rows:32px 24px 24px 29px 17px!important; column-gap:11px!important; row-gap:2px!important; overflow:hidden!important; border-color:color-mix(in srgb,var(--fighter-accent) 36%,rgba(126,220,241,.28))!important; border-radius:19px!important; background:linear-gradient(145deg,rgba(6,47,60,.95),rgba(3,28,41,.965))!important; box-shadow:inset 0 1px rgba(255,255,255,.11),inset 0 0 30px rgba(74,192,221,.035),0 11px 27px rgba(0,21,32,.26)!important; backdrop-filter:blur(10px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article::after { content:''!important; position:absolute!important; inset:0!important; border-radius:inherit!important; background:linear-gradient(118deg,rgba(255,255,255,.055),transparent 32% 72%,color-mix(in srgb,var(--fighter-accent) 8%,transparent))!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { grid-column:1!important; grid-row:1/4!important; width:78px!important; height:78px!important; border-width:2px!important; border-radius:18px!important; background:linear-gradient(145deg,#f4fcfd,#dff4f3)!important; box-shadow:inset 0 0 0 3px rgba(255,255,255,.56),0 6px 15px rgba(0,18,29,.26)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art, #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:70px!important; height:70px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity { grid-column:2!important; grid-row:1!important; min-width:0!important; display:grid!important; grid-template-rows:17px 14px!important; gap:1px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header { min-width:0!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > b { min-width:0!important; overflow:hidden!important; color:#f7fcff!important; font-size:15px!important; font-weight:900!important; line-height:1!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > em { flex:none!important; min-width:42px!important; height:16px!important; padding:0 6px!important; display:grid!important; place-items:center!important; border:1px solid rgba(126,218,240,.24)!important; border-radius:6px!important; background:rgba(3,27,39,.74)!important; color:#c9e8f0!important; font-size:7px!important; font-style:normal!important; font-weight:950!important; letter-spacing:.03em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types, #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-list { min-width:0!important; display:flex!important; align-items:center!important; gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge { width:auto!important; height:13px!important; min-height:13px!important; padding:0 5px 0 3px!important; gap:3px!important; border:1px solid color-mix(in srgb,var(--type-color) 58%,rgba(255,255,255,.25))!important; border-radius:999px!important; background:color-mix(in srgb,var(--type-color) 22%,rgba(3,25,36,.9))!important; color:#eefbff!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge img { width:9px!important; height:9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge b { font-size:5.5px!important; font-weight:950!important; letter-spacing:.04em!important; text-transform:uppercase!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-vital { grid-column:2!important; min-width:0!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:11px 9px!important; align-items:center!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-vital-hp { grid-row:2!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-energy { grid-row:3!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-vital > span { min-width:0!important; display:grid!important; grid-template-columns:11px minmax(0,1fr) auto!important; align-items:center!important; gap:4px!important; color:#a9cbd5!important; font-size:6.5px!important; font-weight:950!important; line-height:1!important; letter-spacing:.04em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-vital > span :is(i,svg) { width:10px!important; height:10px!important; color:var(--battle-cyan)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-vital-hp > span :is(i,svg), #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-vital-hp > span > b { color:var(--fighter-hp)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-vital > span > :is(strong,small) { color:#edfaff!important; font-size:7.5px!important; font-weight:950!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article .battle-hp-bar, #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-energy > i { grid-column:auto!important; grid-row:auto!important; position:relative!important; width:100%!important; height:8px!important; overflow:hidden!important; border:1px solid rgba(190,237,246,.1)!important; border-radius:999px!important; background:rgba(1,19,29,.86)!important; box-shadow:inset 0 2px 4px rgba(0,0,0,.38)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article .battle-hp-bar > em { height:100%!important; display:block!important; border-radius:inherit!important; background:linear-gradient(90deg,#31bd6c,var(--fighter-hp) 68%,#91f2ad)!important; box-shadow:0 0 10px rgba(83,226,140,.22)!important; transition:width .28s ease!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-energy > i > em { height:100%!important; display:block!important; background:linear-gradient(90deg,#258dca,#58d7f5)!important; box-shadow:0 0 10px rgba(79,207,240,.22)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { grid-column:1/-1!important; grid-row:4!important; min-width:0!important; height:27px!important; padding:3px 5px!important; display:grid!important; grid-template-columns:52px minmax(0,1fr)!important; align-items:center!important; gap:5px!important; overflow:hidden!important; border:1px solid rgba(114,207,231,.14)!important; border-radius:9px!important; background:rgba(2,24,35,.62)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area > small { display:flex!important; align-items:center!important; gap:4px!important; color:#79cfe3!important; font-size:5.5px!important; font-weight:950!important; letter-spacing:.07em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area > small > i, #battleHud[data-battle-ui="2.9.9"] .battle-status-empty > i { width:5px!important; height:5px!important; border-radius:50%!important; background:#64d8f3!important; box-shadow:0 0 7px rgba(93,218,246,.5)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area .battle-statuses { grid-column:auto!important; grid-row:auto!important; min-width:0!important; height:20px!important; display:flex!important; align-items:center!important; gap:4px!important; overflow:hidden!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-empty { min-width:0!important; display:flex!important; align-items:center!important; gap:4px!important; color:#718f9a!important; font-size:5.5px!important; font-weight:850!important; letter-spacing:.05em!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-empty > i { background:#6f8d97!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area .battle-status-chip { flex:none!important; max-width:205px!important; height:19px!important; padding:2px 5px!important; border-radius:6px!important; font-size:6px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area .battle-status-chip svg { width:11px!important; height:11px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-exp { grid-column:1/-1!important; grid-row:5!important; min-width:0!important; display:grid!important; grid-template-columns:91px minmax(0,1fr)!important; align-items:center!important; gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-exp > span { min-width:0!important; display:grid!important; grid-template-columns:11px minmax(0,1fr) auto!important; align-items:center!important; gap:3px!important; color:#a999f7!important; font-size:5.5px!important; font-weight:950!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-exp > span :is(i,svg) { width:10px!important; height:10px!important; color:#b8a2ff!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-exp > span > small { color:#d9d2ff!important; font-size:6px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-exp > i { width:100%!important; height:5px!important; overflow:hidden!important; border-radius:999px!important; background:rgba(1,19,29,.82)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-exp > i > em { height:100%!important; display:block!important; border-radius:inherit!important; background:linear-gradient(90deg,#826ef0,#d09aff)!important; } #battleHud[data-battle-ui="2.9.9"] .enemy-health .battle-card-status-area { grid-row:4/6!important; height:48px!important; } #battleHud[data-battle-ui="2.9.9"] .enemy-health.is-capturable .battle-card-status-area { border-color:rgba(246,203,88,.44)!important; background:rgba(63,48,13,.62)!important; } /* A compact cockpit: the skill artwork remains large, empty panel width does not. */ #battleHud[data-battle-ui="2.9.9"] .combat-command-deck { width:min(720px,calc(100% - 118px))!important; height:168px!important; bottom:10px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(0,1fr) 184px!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { padding-left:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { grid-template-columns:repeat(4,minmax(88px,100px))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { grid-template-columns:repeat(3,52px)!important; grid-template-rows:repeat(2,46px)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { width:52px!important; min-width:52px!important; height:46px!important; min-height:46px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-cooldown { border:2px solid color-mix(in srgb,var(--combat-ring) 74%,#dffaff 26%)!important; box-shadow:inset 0 0 0 3px rgba(1,13,21,.9),0 0 0 3px color-mix(in srgb,var(--combat-ring) 62%,rgba(1,17,26,.92)),0 0 22px rgba(0,12,20,.48)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown { box-shadow:inset 0 0 0 2px rgba(1,16,25,.82),0 0 0 3px rgba(89,200,227,.68)!important; } /* Two clear tactics modes; help is available inside this panel, not top HUD. */ #battleHud[data-battle-ui="2.9.9"] .battle-tactics { top:58px!important; right:12px!important; width:334px!important; max-height:calc(100% - 92px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header > nav { display:flex!important; align-items:center!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header button { font-size:15px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button { min-height:104px!important; } /* Asset preparation uses a versus seal, not a bouncing Poké Ball. */ #battleHud[data-battle-ui="2.9.9"] .battle-asset-loader { width:min(390px,calc(100% - 32px))!important; min-height:96px!important; padding:14px 16px!important; grid-template-columns:68px minmax(0,1fr)!important; border:1px solid rgba(132,226,248,.46)!important; border-radius:20px!important; background:linear-gradient(145deg,rgba(6,49,64,.96),rgba(2,27,39,.97))!important; box-shadow:inset 0 1px rgba(255,255,255,.13),0 22px 54px rgba(0,17,27,.36)!important; backdrop-filter:blur(12px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem { position:relative!important; width:62px!important; height:62px!important; display:grid!important; place-items:center!important; border:2px solid rgba(120,222,246,.55)!important; border-radius:50%!important; background:radial-gradient(circle,rgba(39,112,133,.6),rgba(3,28,40,.96) 68%)!important; color:#ffe17c!important; box-shadow:inset 0 0 0 5px rgba(5,33,45,.9),0 0 22px rgba(90,212,242,.24)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem::before, #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem::after { content:''!important; position:absolute!important; inset:-6px!important; border:2px solid transparent!important; border-top-color:#66dbf4!important; border-right-color:rgba(255,220,105,.72)!important; border-radius:50%!important; animation:battle-versus-orbit 1.35s linear infinite!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem::after { inset:6px!important; animation-direction:reverse!important; animation-duration:.9s!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem > b { position:relative!important; z-index:2!important; font-size:14px!important; font-weight:1000!important; letter-spacing:.08em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem > i { position:absolute!important; width:7px!important; height:7px!important; border-radius:50%!important; background:#70def5!important; box-shadow:0 0 10px currentColor!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem > i:first-child { left:9px!important;top:27px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem > i:last-child { right:9px!important;top:27px!important;background:#ffe27c!important; } @keyframes battle-versus-orbit { to { transform:rotate(1turn); } } #battleHud[data-battle-ui="2.9.9"] .battle-intro { z-index:10!important; inset:0!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:16px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-intro::before { left:50%!important; right:auto!important; top:48%!important; width:min(520px,72%)!important; height:116px!important; transform:translate(-50%,-50%)!important; border:1px solid rgba(120,220,243,.26)!important; border-radius:24px!important; background:linear-gradient(90deg,rgba(3,30,42,.12),rgba(3,35,47,.74) 18% 82%,rgba(3,30,42,.12))!important; box-shadow:0 14px 35px rgba(0,24,34,.16)!important; backdrop-filter:blur(4px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-intro-mark { position:relative!important; z-index:2!important; width:68px!important; height:68px!important; display:grid!important; place-items:center!important; border:2px solid #6cdef5!important; border-radius:18px!important; background:rgba(4,39,52,.9)!important; color:#ffe07b!important; box-shadow:inset 0 0 0 4px rgba(3,25,36,.68),0 0 20px rgba(99,219,245,.22)!important; transform:rotate(45deg)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-intro-mark > b { font-size:15px!important; font-weight:1000!important; transform:rotate(-45deg)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-intro-mark > i { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-intro > span:last-child { z-index:2!important; min-width:250px!important; text-align:left!important; text-shadow:0 3px 12px rgba(0,18,28,.6)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-intro strong { font-size:clamp(25px,3vw,40px)!important; } /* Explicit, reversible surrender confirmation. */ #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm { position:absolute!important; inset:0!important; z-index:1000!important; display:grid!important; place-items:center!important; padding:16px!important; background:rgba(2,20,29,.24)!important; backdrop-filter:blur(3px)!important; pointer-events:auto!important; touch-action:manipulation!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm > article { width:min(420px,calc(100% - 24px))!important; display:grid!important; grid-template-columns:48px minmax(0,1fr)!important; gap:12px!important; border:1px solid rgba(255,137,127,.46)!important; border-radius:20px!important; background:linear-gradient(145deg,rgba(49,34,43,.98),rgba(4,29,41,.99))!important; box-shadow:inset 0 1px rgba(255,255,255,.11),0 22px 60px rgba(0,13,22,.5)!important; color:var(--battle-text)!important; pointer-events:auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm > article > :is(i,svg) { width:46px!important; height:46px!important; padding:9px!important; display:grid!important; place-items:center!important; border:1px solid rgba(255,137,127,.4)!important; border-radius:14px!important; background:rgba(116,48,54,.34)!important; color:#ff9a90!important; box-sizing:border-box!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm > article > i > svg { width:100%!important; height:100%!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm span { display:grid!important; gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm small { color:#ff9c92!important;font-size:7px!important;font-weight:950!important;letter-spacing:.08em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm p { margin:0!important;color:#bcd3dc!important;font-size:9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm footer { grid-column:1/-1!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; pointer-events:auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm footer > button { position:relative!important; z-index:2!important; min-height:40px!important; border:1px solid rgba(111,211,236,.3)!important; border-radius:11px!important; background:rgba(13,58,72,.9)!important; color:#effbff!important; font-size:8px!important; font-weight:950!important; cursor:pointer!important; pointer-events:auto!important; touch-action:manipulation!important; } #battleHud[data-battle-ui="2.9.9"] #confirmSurrender { border-color:rgba(255,130,121,.46)!important; background:rgba(112,46,52,.8)!important; color:#ffe5e2!important; } /* Result/capture are isolated states: no roster or live command controls. */ #battleHud[data-battle-ui="2.9.9"]:is([data-phase="decision"],[data-phase="capture"],[data-phase="result"],[data-phase="complete"]) .battle-roster-panel, #battleHud[data-battle-ui="2.9.9"]:is([data-phase="decision"],[data-phase="capture"],[data-phase="result"],[data-phase="complete"]) .combat-live-controls { display:none!important; } #battleHud[data-battle-ui="2.9.9"][data-phase="decision"] .enemy-health { animation:battle-stunned-card 1.6s ease-in-out infinite!important; } @keyframes battle-stunned-card { 50% { box-shadow:0 0 0 4px rgba(247,208,83,.14),0 0 30px rgba(247,208,83,.28),0 10px 26px rgba(0,24,36,.25); } } /* Cinematic result stage: large outcome, staged rewards, always-live actions. */ #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"], #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { bottom:14px!important; width:min(820px,calc(100% - 74px))!important; height:352px!important; overflow:visible!important; border-radius:0!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { height:286px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"]::before, #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"]::before { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision { --outcome-accent:#f5cc5d; position:relative!important; z-index:2!important; width:100%!important; height:100%!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:minmax(0,1fr) 66px!important; gap:10px!important; pointer-events:auto!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-result { grid-template-rows:minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision[data-outcome="defeat"] { --outcome-accent:#ff8178; } #battleHud[data-battle-ui="2.9.9"] .combat-decision[data-outcome="draw"] { --outcome-accent:#a8b8c4; } #battleHud[data-battle-ui="2.9.9"] .combat-decision[data-outcome="capture"] { --outcome-accent:#71e0b1; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card { position:relative!important; z-index:1!important; min-width:0!important; min-height:0!important; padding:17px 21px 13px!important; display:grid!important; grid-template-rows:94px 18px minmax(78px,1fr) 20px!important; gap:5px!important; overflow:hidden!important; border:1px solid color-mix(in srgb,var(--outcome-accent) 30%,rgba(112,208,233,.32))!important; border-radius:25px!important; background:radial-gradient(circle at 15% 0,color-mix(in srgb,var(--outcome-accent) 16%,transparent),transparent 38%),linear-gradient(150deg,rgba(8,52,65,.94),rgba(2,25,37,.965) 72%)!important; box-shadow:inset 0 1px rgba(255,255,255,.13),inset 0 0 34px rgba(80,207,235,.035),0 24px 55px rgba(0,14,23,.38)!important; pointer-events:none!important; backdrop-filter:blur(11px) saturate(1.08)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card::before { content:''!important; position:absolute!important; left:-60px!important; top:-105px!important; width:300px!important; height:300px!important; border-radius:50%!important; background:radial-gradient(circle,color-mix(in srgb,var(--outcome-accent) 17%,transparent),transparent 66%)!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header { position:relative!important; z-index:1!important; min-width:0!important; display:grid!important; grid-template-columns:88px minmax(0,1fr)!important; align-items:center!important; gap:15px!important; } #battleHud[data-battle-ui="2.9.9"] #battleResultArt, #battleHud[data-battle-ui="2.9.9"] .combat-result-art { position:relative!important; width:86px!important; height:86px!important; display:grid!important; place-items:center!important; filter:drop-shadow(0 0 18px color-mix(in srgb,var(--outcome-accent) 42%,transparent))!important; } #battleHud[data-battle-ui="2.9.9"] #battleResultArt::after { content:''!important; position:absolute!important; inset:5px!important; z-index:-1!important; border:1px solid color-mix(in srgb,var(--outcome-accent) 58%,transparent)!important; border-radius:50%!important; box-shadow:0 0 28px color-mix(in srgb,var(--outcome-accent) 22%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header > span { min-width:0!important; display:grid!important; align-content:center!important; gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header small { color:color-mix(in srgb,var(--outcome-accent) 76%,#dff8ff 24%)!important; font-size:8px!important; font-weight:1000!important; letter-spacing:.18em!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header b { color:#fffdf2!important; font-family:"Segoe UI Variable Display","Segoe UI Variable",Inter,"Segoe UI",system-ui,sans-serif!important; font-size:36px!important; font-weight:1000!important; line-height:.96!important; letter-spacing:.045em!important; text-shadow:0 5px 20px rgba(0,17,25,.42),0 0 22px color-mix(in srgb,var(--outcome-accent) 18%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header em { overflow:hidden!important; color:#c0d9e1!important; font-size:10px!important; font-style:normal!important; font-weight:750!important; line-height:1.25!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .combat-result-divider { position:relative!important; z-index:1!important; display:flex!important; align-items:center!important; gap:10px!important; color:#8edced!important; font-size:6.5px!important; font-weight:1000!important; letter-spacing:.14em!important; } #battleHud[data-battle-ui="2.9.9"] .combat-result-divider > i { flex:1!important; height:1px!important; background:linear-gradient(90deg,color-mix(in srgb,var(--outcome-accent) 52%,rgba(107,211,236,.38)),transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list { position:relative!important; z-index:1!important; min-width:0!important; min-height:0!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; overflow:auto!important; scrollbar-width:thin!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item, #battleHud[data-battle-ui="2.9.9"] .combat-result-message { position:relative!important; min-width:0!important; height:auto!important; min-height:78px!important; padding:9px 10px!important; display:grid!important; grid-template-columns:54px minmax(0,1fr)!important; grid-template-rows:1fr auto!important; align-items:center!important; gap:4px 8px!important; overflow:hidden!important; border:1px solid rgba(125,217,239,.2)!important; border-radius:15px!important; background:linear-gradient(145deg,rgba(14,58,72,.84),rgba(3,28,40,.88))!important; box-shadow:inset 0 1px rgba(255,255,255,.07)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item::after { content:''!important; position:absolute!important; inset:auto 0 0!important; height:2px!important; background:linear-gradient(90deg,transparent,var(--outcome-accent),transparent)!important; opacity:.45!important; } #battleHud[data-battle-ui="2.9.9"] .combat-result-message { grid-column:1/-1!important; grid-template-columns:62px minmax(0,1fr)!important; grid-template-rows:1fr!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-art, #battleHud[data-battle-ui="2.9.9"] .combat-result-message-art { grid-column:1!important; grid-row:1/3!important; width:54px!important; height:54px!important; display:block!important; filter:drop-shadow(0 5px 10px rgba(0,14,23,.34))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item > span, #battleHud[data-battle-ui="2.9.9"] .combat-result-message > span { grid-column:2!important; grid-row:1!important; min-width:0!important; display:grid!important; align-content:center!important; gap:2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item small, #battleHud[data-battle-ui="2.9.9"] .combat-result-message small { overflow:hidden!important; color:#86afbb!important; font-size:6px!important; font-weight:850!important; letter-spacing:.04em!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item b, #battleHud[data-battle-ui="2.9.9"] .combat-result-message b { overflow:hidden!important; color:#f0fbff!important; font-size:9px!important; font-weight:950!important; line-height:1.2!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item > strong { grid-column:2!important; grid-row:2!important; justify-self:start!important; color:color-mix(in srgb,var(--outcome-accent) 70%,#a8efff 30%)!important; font-size:14px!important; font-weight:1000!important; line-height:1!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus { z-index:1!important; display:flex!important; justify-content:space-between!important; gap:10px!important; color:#8fb8c3!important; font-size:6.5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions { position:relative!important; z-index:8!important; min-width:0!important; min-height:0!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:1fr!important; gap:9px!important; pointer-events:auto!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button { position:relative!important; z-index:2!important; min-width:0!important; min-height:66px!important; padding:7px 14px!important; display:grid!important; grid-template-columns:48px minmax(0,1fr)!important; align-items:center!important; gap:10px!important; overflow:hidden!important; border:1px solid rgba(111,216,241,.42)!important; border-radius:16px!important; background:linear-gradient(150deg,rgba(18,73,88,.97),rgba(4,35,48,.98))!important; box-shadow:inset 0 1px rgba(255,255,255,.12),0 10px 24px rgba(0,14,23,.34)!important; color:#f3fbff!important; text-align:left!important; cursor:pointer!important; pointer-events:auto!important; touch-action:manipulation!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button::before { content:''!important; position:absolute!important; inset:1px!important; border-radius:14px!important; background:linear-gradient(120deg,rgba(255,255,255,.1),transparent 36% 70%,rgba(80,211,241,.08))!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button:is(:hover,:focus-visible) { z-index:3!important; border-color:#79e2fa!important; outline:0!important; transform:translateY(-2px)!important; box-shadow:0 0 0 3px rgba(105,216,244,.12),0 14px 28px rgba(0,14,23,.4)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button.is-locked { border-color:rgba(163,184,191,.28)!important; filter:saturate(.58)!important; cursor:help!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions.is-submitting > button:not(.is-pending) { opacity:.62!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button.is-pending::after { content:''!important; position:absolute!important; right:14px!important; top:50%!important; width:16px!important; height:16px!important; margin-top:-8px!important; border:2px solid rgba(219,248,255,.3)!important; border-top-color:#8be8fc!important; border-radius:50%!important; animation:battle-submit-spin .7s linear infinite!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-button-art { position:relative!important; z-index:1!important; width:48px!important; height:48px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button > span { position:relative!important; z-index:1!important; min-width:0!important; display:grid!important; gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions small { color:#79dff6!important; font-size:6.5px!important; font-weight:1000!important; letter-spacing:.09em!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions b { overflow:hidden!important; color:#f7fdff!important; font-size:11px!important; font-weight:1000!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing .combat-reward-card > header { animation:battle-result-title-in .64s cubic-bezier(.16,.86,.23,1) both!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing .combat-result-divider { animation:battle-result-divider-in .45s ease .16s both!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing .combat-reward-item { animation:combat-reward-enter .5s cubic-bezier(.16,.82,.22,1) calc(var(--reward-index,0) * 140ms + 250ms) both!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing .combat-reward-item > strong { animation:battle-reward-count-in .36s ease calc(var(--reward-index,0) * 140ms + 560ms) both!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing .combat-decision-actions { animation:battle-result-actions-in .44s ease .48s both!important; } @keyframes battle-result-title-in { from { opacity:0;transform:translateY(-12px) scale(.96);filter:blur(5px); } to { opacity:1;transform:none;filter:none; } } @keyframes battle-result-divider-in { from { opacity:0;transform:scaleX(.55); } to { opacity:1;transform:none; } } @keyframes battle-reward-count-in { from { opacity:0;transform:translateY(5px) scale(.84); } to { opacity:1;transform:none; } } @keyframes battle-result-actions-in { from { opacity:0;transform:translateY(9px); } to { opacity:1;transform:none; } } @keyframes battle-submit-spin { to { transform:rotate(1turn); } } @media (max-width:920px) { #battleHud[data-battle-ui="2.9.9"] .battle-status { right:7px!important;top:6px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls > button { min-width:32px!important;width:32px!important;padding:0!important; } #battleHud[data-battle-ui="2.9.9"] .battle-controls > button > b { display:none!important; } #battleHud[data-battle-ui="2.9.9"] #cancelBattle { min-width:32px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card { top:58px!important;width:190px!important;min-height:72px!important;grid-template-rows:13px auto 18px!important;padding:6px 8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > strong { font-size:10px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article { top:58px!important;width:calc(50% - 108px)!important;min-width:205px!important;height:138px!important;padding:8px 9px!important;grid-template-columns:66px minmax(0,1fr)!important;grid-template-rows:28px 22px 22px 25px 15px!important;column-gap:8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .ally-health { left:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .enemy-health { right:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { width:66px!important;height:66px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art,#battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:59px!important;height:59px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity { grid-template-rows:15px 12px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > b { font-size:12px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge { height:12px!important;min-height:12px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { grid-template-columns:45px minmax(0,1fr)!important;height:24px!important;padding:2px 4px!important; } #battleHud[data-battle-ui="2.9.9"] .enemy-health .battle-card-status-area { height:41px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck { width:min(700px,calc(100% - 68px))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"],#battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { width:calc(100% - 24px)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card { padding:14px 16px 11px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header b { font-size:31px!important; } } @media (max-width:700px) { #battleHud[data-battle-ui="2.9.9"] .battle-versus-card { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article { width:calc(50% - 10px)!important;min-width:0!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .ally-health { left:5px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .enemy-health { right:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck { width:calc(100% - 10px)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"],#battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { width:calc(100% - 10px)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list { grid-template-columns:repeat(2,minmax(0,1fr))!important; } } @media (max-height:650px) and (orientation:landscape) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"] { height:260px!important;bottom:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { height:218px!important;bottom:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision { grid-template-rows:minmax(0,1fr) 54px!important;gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-result { grid-template-rows:1fr!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card { padding:9px 13px 8px!important;grid-template-rows:62px 13px minmax(62px,1fr) 15px!important;gap:3px!important;border-radius:18px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header { grid-template-columns:58px minmax(0,1fr)!important;gap:9px!important; } #battleHud[data-battle-ui="2.9.9"] #battleResultArt,#battleHud[data-battle-ui="2.9.9"] .combat-result-art { width:58px!important;height:58px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header b { font-size:25px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header em { font-size:7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list { grid-auto-rows:minmax(62px,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item,#battleHud[data-battle-ui="2.9.9"] .combat-result-message { min-height:62px!important;padding:6px 7px!important;grid-template-columns:42px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-art,#battleHud[data-battle-ui="2.9.9"] .combat-result-message-art { width:42px!important;height:42px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button { min-height:54px!important;grid-template-columns:38px minmax(0,1fr)!important;padding:5px 10px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-button-art { width:38px!important;height:38px!important; } } @media (prefers-reduced-motion:reduce) { #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem::before, #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem::after, #battleHud[data-battle-ui="2.9.9"][data-phase="decision"] .enemy-health { animation:none!important; } } /* -------------------------------------------------------------------------- Unified cockpit pass: controls belong to the command deck, not the arena. This is the authoritative 2.9.9 geometry for the live battle view. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] .battle-health > article { top:10px!important; width:360px!important; height:164px!important; padding:11px 13px!important; grid-template-columns:82px minmax(0,1fr)!important; grid-template-rows:35px 25px 25px 31px 18px!important; column-gap:12px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .ally-health { left:22px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .enemy-health { right:22px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card { top:24px!important; width:210px!important; min-height:76px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { width:82px!important; height:82px!important; border-radius:20px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art, #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:74px!important; height:74px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity { grid-template-rows:18px 17px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > b { font-size:16px!important; letter-spacing:-.015em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > em { min-width:46px!important; height:18px!important; border-color:color-mix(in srgb,var(--fighter-accent) 34%,rgba(126,218,240,.24))!important; background:color-mix(in srgb,var(--fighter-accent) 10%,rgba(3,27,39,.82))!important; color:#e4f7fb!important; font-size:8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge { height:17px!important; min-height:17px!important; padding:0 7px 0 4px!important; gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge img { width:11px!important; height:11px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge b { font-size:7px!important; letter-spacing:.055em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-vital { grid-template-rows:12px 10px!important; gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-vital > span { grid-template-columns:13px minmax(0,1fr) auto!important; font-size:7.5px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-vital > span :is(i,svg) { width:12px!important; height:12px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-vital > span > :is(strong,small) { font-size:8.5px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article .battle-hp-bar, #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-energy > i { height:9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { height:31px!important; padding:3px 6px!important; grid-template-columns:61px minmax(0,1fr)!important; gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area > small { font-size:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area .battle-statuses { height:24px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-empty { gap:5px!important; color:#9bb8c1!important; font-size:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-status-empty :is(i,svg) { width:13px!important; height:13px!important; color:#6da9b8!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area .battle-status-chip { max-width:235px!important; height:23px!important; padding:2px 7px!important; gap:4px!important; font-size:7.2px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area .battle-status-chip svg { width:14px!important; height:14px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area .battle-status-chip small { font-size:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-exp { grid-template-columns:104px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-exp > span, #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-exp > span > small { font-size:6.7px!important; } #battleHud[data-battle-ui="2.9.9"] .enemy-health .battle-card-status-area { height:51px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck { width:min(780px,calc(100% - 104px))!important; height:164px!important; padding:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-live-controls { grid-template-rows:minmax(0,1fr) 26px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(360px,1fr) 166px 112px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel, #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { grid-template-rows:15px minmax(0,1fr)!important; gap:1px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { padding:0 5px 0 7px!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) > header { height:15px!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) > header b { font-size:6.5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { grid-template-columns:repeat(4,minmax(84px,94px))!important; gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:73px; padding:3px 3px 29px!important; border-radius:12px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-art { border-width:4px!important; box-shadow:inset 0 0 0 3px rgba(1,18,28,.84),0 0 0 3px color-mix(in srgb,var(--combat-ring) 42%,rgba(2,22,33,.82)),0 7px 17px rgba(0,14,23,.38),0 0 19px color-mix(in srgb,var(--combat-ring) 19%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button > kbd { left:3px!important; min-width:20px!important; height:20px!important; border-color:color-mix(in srgb,var(--combat-ring) 45%,rgba(175,230,243,.42))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { bottom:17px!important; font-size:8px!important; line-height:11px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tags { bottom:2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag { padding:0 4px 0 2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag > b { font-size:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { right:3px!important; top:59px!important; min-width:34px!important; padding:2px 5px!important; border:1px solid color-mix(in srgb,var(--combat-ring) 48%,rgba(93,199,226,.28))!important; background:linear-gradient(145deg,rgba(4,36,51,.98),rgba(1,17,27,.98))!important; color:#8de8fb!important; font-size:8.5px!important; box-shadow:0 3px 9px rgba(0,12,19,.36),inset 0 1px rgba(255,255,255,.08)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost svg { width:13px!important; height:13px!important; filter:drop-shadow(0 0 5px rgba(92,219,246,.38))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-cooldown { border:3px solid color-mix(in srgb,var(--combat-ring) 78%,#dffaff 22%)!important; box-shadow:inset 0 0 0 3px rgba(1,13,21,.92),0 0 0 3px color-mix(in srgb,var(--combat-ring) 70%,rgba(1,17,26,.94)),0 0 24px color-mix(in srgb,var(--combat-ring) 22%,rgba(0,12,20,.48))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { grid-template-columns:repeat(3,48px)!important; grid-template-rows:repeat(2,45px)!important; gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { --combat-size:38px; height:45px!important; min-height:45px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child, #battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown { width:38px!important; height:38px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-painted, #battleHud[data-battle-ui="2.9.9"] svg.combat-item-art { width:36px!important; height:36px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { position:static!important; inset:auto!important; grid-column:3!important; grid-row:1!important; width:112px!important; min-width:0!important; min-height:0!important; margin:0!important; padding:15px 0 0 6px!important; display:block!important; align-self:stretch!important; justify-self:stretch!important; transform:none!important; z-index:2!important; border-left:1px solid rgba(110,200,225,.2)!important; border-radius:0!important; pointer-events:auto!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { position:static!important; height:100%!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; grid-template-rows:repeat(3,minmax(0,1fr))!important; transform:none!important; border:0!important; border-radius:0!important; pointer-events:auto!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, #battleHud[data-battle-ui="2.9.9"] #cancelBattle { position:relative!important; width:100%!important; min-width:0!important; height:auto!important; min-height:29px!important; padding:0 8px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; overflow:hidden!important; border:1px solid rgba(120,220,244,.34)!important; border-radius:9px!important; background:linear-gradient(155deg,rgba(10,58,73,.93),rgba(3,31,44,.96))!important; color:#effbff!important; box-shadow:inset 0 1px rgba(255,255,255,.12),0 6px 14px rgba(0,19,29,.2)!important; font-size:6.5px!important; font-weight:950!important; letter-spacing:.035em!important; text-transform:uppercase!important; cursor:pointer!important; pointer-events:auto!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > :is(i,svg) { position:relative!important; z-index:1!important; width:15px!important; height:15px!important; flex:0 0 15px!important; color:#82e3f8!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b { position:relative!important; z-index:1!important; display:block!important; font-size:6.5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button:is(:hover,:focus-visible) { outline:0!important; transform:translateY(-1px)!important; border-color:rgba(122,226,250,.78)!important; box-shadow:0 0 0 3px rgba(89,213,242,.1),0 9px 18px rgba(0,17,27,.28)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button.is-active { border-color:rgba(111,226,179,.58)!important; background:linear-gradient(155deg,rgba(14,84,70,.94),rgba(3,42,43,.97))!important; } #battleHud[data-battle-ui="2.9.9"] #cancelBattle { border-color:rgba(255,133,123,.48)!important; background:linear-gradient(155deg,rgba(112,48,55,.94),rgba(51,30,40,.98))!important; color:#ffe7e3!important; } #battleHud[data-battle-ui="2.9.9"] #cancelBattle > :is(i,svg) { color:#ffaaa1!important; } #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { height:26px!important; padding:2px 7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy { width:min(470px,100%)!important; grid-template-columns:108px minmax(0,1fr)!important; gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > span { grid-template-columns:17px minmax(0,1fr) auto!important; gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > span :is(i,svg) { width:16px!important; height:16px!important; color:#65def7!important; filter:drop-shadow(0 0 6px rgba(87,213,243,.42))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics { right:18px!important; bottom:181px!important; width:360px!important; max-height:calc(100% - 205px)!important; gap:7px!important; padding:11px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button { min-height:86px!important; grid-template-rows:45px auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button > i, #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button > i > * { width:45px!important; height:45px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules label { min-height:43px!important; padding:5px 8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules label.is-ai-rule { grid-template-columns:38px 26px minmax(0,1fr)!important; border-color:rgba(92,218,181,.28)!important; background:linear-gradient(145deg,rgba(13,68,69,.78),rgba(8,47,61,.82))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules label.is-ai-rule > i, #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules label.is-ai-rule > i > svg { width:23px!important; height:23px!important; color:#75e0bd!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules b { font-size:9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules small { font-size:7.2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card { grid-template-rows:94px 18px minmax(84px,1fr)!important; padding-bottom:17px!important; } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list { grid-auto-rows:minmax(84px,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item, #battleHud[data-battle-ui="2.9.9"] .combat-result-message { min-height:84px!important; grid-template-columns:50px minmax(0,1fr)!important; padding:7px 10px!important; gap:4px 9px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-art { width:44px!important; height:70px!important; background-size:500% 100%!important; filter:drop-shadow(0 6px 10px rgba(0,14,23,.34))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-result-message-art { width:58px!important; height:58px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item small, #battleHud[data-battle-ui="2.9.9"] .combat-result-message small { font-size:7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item b, #battleHud[data-battle-ui="2.9.9"] .combat-result-message b { font-size:10px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item > strong { font-size:15px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button { grid-template-columns:46px minmax(0,1fr)!important; padding:7px 16px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-button-art { width:44px!important; height:44px!important; padding:7px!important; overflow:visible!important; border:1px solid rgba(118,224,247,.42)!important; border-radius:50%!important; background:radial-gradient(circle at 35% 30%,rgba(65,170,195,.42),rgba(3,33,46,.94))!important; color:#86e8fb!important; filter:drop-shadow(0 5px 10px rgba(0,14,23,.36))!important; } #battleHud[data-battle-ui="2.9.9"] #finishBattle .combat-decision-button-art { border-color:rgba(103,226,174,.48)!important; color:#77e1b5!important; } #battleHud[data-battle-ui="2.9.9"] #beginCapture.is-locked .combat-decision-button-art { border-color:rgba(170,190,198,.28)!important; color:#a7bdc4!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions b { font-size:12px!important; } @media (max-width:920px) { #battleHud[data-battle-ui="2.9.9"] .battle-health > article { top:8px!important;width:calc(50% - 108px)!important;min-width:205px!important;height:148px!important;padding:8px 9px!important;grid-template-columns:68px minmax(0,1fr)!important;grid-template-rows:31px 23px 23px 27px 16px!important;column-gap:8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card { top:20px!important;width:190px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { width:68px!important;height:68px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art,#battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:61px!important;height:61px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge { height:15px!important;min-height:15px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { height:27px!important;grid-template-columns:53px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .enemy-health .battle-card-status-area { height:44px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck { width:min(746px,calc(100% - 64px))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(344px,1fr) 158px 100px!important;gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { grid-template-columns:repeat(4,minmax(80px,90px))!important;gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:100px!important;padding-left:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button { padding:0 6px!important; } } @media (max-width:700px) { #battleHud[data-battle-ui="2.9.9"] .battle-health > article { width:calc(50% - 10px)!important;min-width:0!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck { width:calc(100% - 10px)!important;height:250px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-live-controls { grid-template-rows:minmax(0,1fr) 26px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(0,1fr) 108px!important;grid-template-rows:128px 70px!important;gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel { grid-column:1/-1!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { grid-template-columns:repeat(4,minmax(66px,1fr))!important;gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:61px; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:48px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { grid-column:1!important;grid-row:2!important;border-top:1px solid rgba(110,200,225,.18)!important;border-left:0!important;padding:0 4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { grid-template-columns:repeat(6,minmax(34px,48px))!important;grid-template-rows:48px!important;gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { width:100%!important;min-width:34px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child,#battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown { width:34px!important;height:34px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-painted,#battleHud[data-battle-ui="2.9.9"] svg.combat-item-art { width:32px!important;height:32px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { grid-column:2!important;grid-row:2!important;width:108px!important;padding:15px 0 0 4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { grid-template-columns:repeat(3,1fr)!important;grid-template-rows:1fr!important;gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button,#battleHud[data-battle-ui="2.9.9"] #cancelBattle { min-height:48px!important;padding:0!important;display:grid!important;place-items:center!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics { right:5px!important;bottom:267px!important;width:min(360px,calc(100% - 10px))!important;max-height:calc(100% - 282px)!important; } } @media (max-height:650px) and (orientation:landscape) { #battleHud[data-battle-ui="2.9.9"] .battle-health > article { top:5px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card { top:10px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck { height:150px!important;bottom:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(340px,1fr) 156px 98px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:65px; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:51px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics { bottom:162px!important;max-height:calc(100% - 174px)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card { grid-template-rows:62px 13px minmax(62px,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-art { width:36px!important;height:56px!important; } } /* -------------------------------------------------------------------------- v2.9.9 theme, outcome and performance pass One DOM outcome, two complete themes, readable adaptive controls and a frozen world frame behind combat. This block stays last by design. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] { --battle-panel-glass:rgba(3,31,44,.94); --battle-panel-raised:rgba(8,48,62,.96); --battle-panel-soft:rgba(15,63,77,.88); --battle-control-bg:linear-gradient(155deg,rgba(10,58,73,.96),rgba(3,31,44,.98)); --battle-track:rgba(152,214,229,.16); --battle-copy:#f4fbff; --battle-copy-muted:#a9c7d2; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] { --battle-bg:rgba(239,249,252,.97); --battle-surface:rgba(250,254,255,.97); --battle-card:rgba(240,250,253,.96); --battle-card-soft:rgba(223,242,248,.88); --battle-border:rgba(41,139,170,.3); --battle-border-strong:rgba(17,155,197,.62); --battle-cyan:#078fbd; --battle-teal:#168b68; --battle-gold:#a66d00; --battle-red:#d95049; --battle-text:#123746; --battle-muted:#5e7b87; --battle-shadow:rgba(22,68,85,.18); --battle-panel-glass:rgba(244,252,254,.96); --battle-panel-raised:rgba(252,255,255,.98); --battle-panel-soft:rgba(229,245,249,.94); --battle-control-bg:linear-gradient(155deg,rgba(252,255,255,.98),rgba(224,244,250,.98)); --battle-track:rgba(31,112,139,.14); --battle-copy:#123746; --battle-copy-muted:#5e7b87; } /* The overlay itself never blocks the still-visible world HUD. */ #battleHud[data-battle-ui="2.9.9"] :is(.battle-shell,.battle-surrender-confirm,.battle-tactics,.combat-command-deck) { pointer-events:auto!important; } body.is-battling .world-shade { background:linear-gradient(180deg,rgba(3,28,38,.05),rgba(3,28,38,.12))!important; backdrop-filter:blur(1.5px) saturate(.92)!important; } html[data-game-theme="light"] body.is-battling .world-shade { background:linear-gradient(180deg,rgba(222,244,250,.04),rgba(20,70,87,.08))!important; } body.is-battling :is( .world-topbar, #partyHud, #playerProfileButton, #playerStaminaHud, #questWidget, #worldMinimapShell, #desktopDock, #desktopUtilityRail, #desktopMoreMenu, .world-rail, .desktop-dock, .desktop-utility-rail, .mobile-dock ) { opacity:.86!important; filter:saturate(.86)!important; } body.is-battling :is(.chat-panel,.side-panel).is-open { opacity:1!important; visibility:visible!important; pointer-events:auto!important; } /* Readable, screen-aware command deck without growing across the arena. */ #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { width:min(840px,calc(100% - 104px))!important; height:176px!important; padding:7px!important; border-color:var(--battle-border)!important; background:linear-gradient(150deg,var(--battle-panel-glass),color-mix(in srgb,var(--battle-panel-raised) 92%,transparent))!important; color:var(--battle-copy)!important; box-shadow:inset 0 1px rgba(255,255,255,.12),0 16px 34px var(--battle-shadow)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(400px,1fr) 172px 118px!important; gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) > header b { color:var(--battle-copy-muted)!important; font-size:clamp(8.5px,.62vw,10px)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { grid-template-columns:repeat(4,minmax(92px,104px))!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { color:var(--battle-copy)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { max-width:calc(100% - 6px)!important; color:var(--battle-copy)!important; font-size:clamp(9px,.68vw,10.5px)!important; line-height:12px!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag > b { font-size:clamp(6.5px,.5vw,8px)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:61px!important; min-width:36px!important; height:22px!important; font-size:clamp(9px,.6vw,10px)!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-action-button,.combat-item-button) > kbd, #battleHud[data-battle-ui="2.9.9"] .combat-item-button > b { font-size:9px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { grid-template-columns:repeat(3,50px)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { width:50px!important; min-width:50px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { border-color:var(--battle-border)!important; background:color-mix(in srgb,var(--battle-panel-raised) 93%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > span :is(small,b), #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b { font-size:clamp(8px,.58vw,9px)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i { background:var(--battle-track)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { color:var(--battle-copy)!important; border-left-color:var(--battle-border)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button { border-color:var(--battle-border)!important; background:var(--battle-control-bg)!important; color:var(--battle-copy)!important; } /* Small labels remain readable without making the cockpit taller. */ #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge b, #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area > small, #battleHud[data-battle-ui="2.9.9"] .battle-status-empty, #battleHud[data-battle-ui="2.9.9"] .battle-exp > span { font-size:clamp(7px,.52vw,8px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-vital > span { font-size:clamp(7.5px,.56vw,8.5px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-vital > span > :is(strong,small), #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area .battle-status-chip { font-size:clamp(8px,.6vw,9.5px)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-result-divider, #battleHud[data-battle-ui="2.9.9"] .combat-reward-item small, #battleHud[data-battle-ui="2.9.9"] .combat-result-message small { font-size:clamp(7.5px,.55vw,9px)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item b, #battleHud[data-battle-ui="2.9.9"] .combat-result-message b { font-size:clamp(10px,.74vw,12px)!important; } /* Cinematic preparation card with both fighters and one calm progress line. */ #battleHud[data-battle-ui="2.9.9"] .battle-asset-loader { width:min(540px,calc(100% - 34px))!important; min-height:218px!important; padding:19px 22px 17px!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:minmax(118px,1fr) auto!important; gap:14px!important; overflow:hidden!important; border:1px solid var(--battle-border-strong)!important; border-radius:26px!important; background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--battle-cyan) 18%,transparent),transparent 46%),linear-gradient(145deg,var(--battle-panel-raised),var(--battle-panel-glass))!important; color:var(--battle-copy)!important; box-shadow:inset 0 1px rgba(255,255,255,.18),0 28px 70px var(--battle-shadow)!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-asset-loader[aria-hidden="true"] { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-asset-loader::before { content:''!important; position:absolute!important; inset:-60% -20%!important; background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.13) 50%,transparent 58%)!important; transform:translateX(-55%)!important; animation:battle-loader-scan 2.6s ease-in-out infinite!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-matchup { position:relative!important; z-index:1!important; display:grid!important; grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr)!important; align-items:center!important; gap:12px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-fighter { min-width:0!important; display:grid!important; grid-template-rows:72px auto auto!important; justify-items:center!important; gap:4px!important; text-align:center!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-fighter > i { width:72px!important; height:72px!important; display:grid!important; place-items:center!important; overflow:hidden!important; border:2px solid color-mix(in srgb,var(--battle-cyan) 70%,#fff 30%)!important; border-radius:22px!important; background:var(--battle-panel-soft)!important; box-shadow:inset 0 1px rgba(255,255,255,.18),0 9px 22px var(--battle-shadow)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-fighter.is-enemy > i { border-color:color-mix(in srgb,var(--battle-red) 72%,#fff 28%)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-portrait-art, #battleHud[data-battle-ui="2.9.9"] .battle-loader-portrait-art > * { width:66px!important; height:66px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-fighter > b { max-width:150px!important; overflow:hidden!important; color:var(--battle-copy)!important; font-size:13px!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-fighter > small { color:var(--battle-copy-muted)!important; font-size:7px!important; font-weight:950!important; letter-spacing:.11em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem { width:68px!important; height:68px!important; background:radial-gradient(circle,var(--battle-panel-soft),var(--battle-panel-glass) 68%)!important; color:var(--battle-gold)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-copy { position:relative!important; z-index:1!important; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; grid-template-rows:auto auto 8px!important; align-items:center!important; gap:3px 10px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-copy > small { color:var(--battle-cyan)!important; font-size:7px!important; font-weight:1000!important; letter-spacing:.12em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-copy > b { grid-column:1!important; min-width:0!important; overflow:hidden!important; color:var(--battle-copy)!important; font-size:11px!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-copy > strong { grid-column:2!important; grid-row:1/3!important; color:var(--battle-copy-muted)!important; font-size:8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-load-track { grid-column:1/-1!important; height:8px!important; overflow:hidden!important; border-radius:999px!important; background:var(--battle-track)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-load-track > em { background:linear-gradient(90deg,var(--battle-cyan),color-mix(in srgb,var(--battle-gold) 78%,#fff 22%))!important; box-shadow:0 0 14px color-mix(in srgb,var(--battle-cyan) 55%,transparent)!important; } @keyframes battle-loader-scan { 0%,18% { transform:translateX(-60%); } 72%,100% { transform:translateX(60%); } } /* Defeat has one title and one truthful loss report. */ #battleHud[data-battle-ui="2.9.9"] .combat-loss-item { border-color:color-mix(in srgb,var(--battle-red) 44%,var(--battle-border))!important; background:linear-gradient(145deg,color-mix(in srgb,var(--battle-red) 13%,var(--battle-panel-raised)),var(--battle-panel-glass))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-loss-art, #battleHud[data-battle-ui="2.9.9"] .combat-result-message.is-safe .combat-result-message-art { width:52px!important; height:52px!important; padding:10px!important; border:1px solid color-mix(in srgb,var(--battle-red) 48%,var(--battle-border))!important; border-radius:16px!important; background:color-mix(in srgb,var(--battle-red) 14%,var(--battle-panel-soft))!important; color:var(--battle-red)!important; box-sizing:border-box!important; } #battleHud[data-battle-ui="2.9.9"] .combat-result-message.is-safe { border-color:color-mix(in srgb,var(--battle-teal) 42%,var(--battle-border))!important; background:linear-gradient(145deg,color-mix(in srgb,var(--battle-teal) 10%,var(--battle-panel-raised)),var(--battle-panel-glass))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-result-message.is-safe .combat-result-message-art { border-color:color-mix(in srgb,var(--battle-teal) 48%,var(--battle-border))!important; background:color-mix(in srgb,var(--battle-teal) 13%,var(--battle-panel-soft))!important; color:var(--battle-teal)!important; } /* Light theme keeps the arena bright and moves only the interface to pearl glass. */ html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-shell { border-color:rgba(227,251,255,.96)!important; box-shadow:0 0 0 5px rgba(36,155,190,.14),0 24px 64px rgba(24,69,84,.24)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] :is( .battle-health > article, .battle-versus-card, .battle-card-status-area, .battle-tactics, .combat-resource-row, .combat-reward-card, .combat-reward-item, .combat-result-message ) { border-color:var(--battle-border)!important; background:linear-gradient(145deg,var(--battle-panel-raised),var(--battle-panel-glass))!important; color:var(--battle-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.8),0 11px 26px var(--battle-shadow)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] :is( .battle-fighter-identity b, .battle-vital b, .battle-vital strong, .battle-status-empty b, .combat-skill-name, .combat-energy b, .combat-energy small, .combat-reward-card b, .combat-reward-item b, .combat-result-message b ) { color:var(--battle-text)!important; text-shadow:none!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] :is( .battle-vital small, .battle-card-status-area > small, .combat-reward-item small, .combat-result-message small, .combat-reward-card em ) { color:var(--battle-muted)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] :is(.combat-action-button,.combat-item-button) { border-color:var(--battle-border)!important; background:linear-gradient(145deg,rgba(251,255,255,.98),rgba(222,242,248,.96))!important; box-shadow:inset 0 1px rgba(255,255,255,.88),0 7px 16px rgba(25,77,94,.16)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag { border-color:rgba(37,123,150,.24)!important; background:rgba(247,253,255,.94)!important; color:var(--battle-text)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag.is-type { border-color:color-mix(in srgb,var(--skill-type,#1598c4) 46%,rgba(37,123,150,.2))!important; background:color-mix(in srgb,var(--skill-type,#1598c4) 12%,rgba(250,254,255,.96))!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge { background:color-mix(in srgb,var(--type-color) 15%,rgba(252,255,255,.96))!important; color:#143b49!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] :is( .battle-health > article .battle-hp-bar, .battle-health > article > .battle-energy > i, .battle-health > article > .battle-exp > i ) { border-color:rgba(40,122,147,.14)!important; background:rgba(47,112,133,.13)!important; box-shadow:inset 0 1px 3px rgba(25,72,88,.12)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button { box-shadow:inset 0 1px rgba(255,255,255,.9),0 5px 12px rgba(25,77,94,.14)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] #cancelBattle { border-color:rgba(207,83,78,.4)!important; background:linear-gradient(155deg,rgba(255,246,245,.98),rgba(250,220,217,.98))!important; color:#a83f3a!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm > article { border-color:rgba(207,83,78,.38)!important; background:linear-gradient(145deg,rgba(255,250,249,.99),rgba(242,250,252,.99))!important; color:var(--battle-text)!important; box-shadow:inset 0 1px #fff,0 22px 60px rgba(26,69,83,.25)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm p { color:var(--battle-muted)!important; } @media (max-width:920px) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { width:min(760px,calc(100% - 64px))!important;height:170px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(344px,1fr) 158px 100px!important;gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { grid-template-columns:repeat(4,minmax(80px,90px))!important;gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:70px; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:56px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:100px!important; } } @media (max-width:700px) { body.is-battling .mobile-dock { display:flex!important;opacity:.9!important;visibility:visible!important;pointer-events:auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-shell { top:4px!important;bottom:auto!important;height:calc(100dvh - 82px)!important;transform:translateX(-50%)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { width:calc(100% - 10px)!important;height:258px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(0,1fr) 108px!important;grid-template-rows:134px 72px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:63px; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { font-size:8px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag > b { font-size:6px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-asset-loader { min-height:190px!important;padding:14px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-matchup { grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr)!important;gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem { width:54px!important;height:54px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-fighter { grid-template-rows:58px auto auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-fighter > i { width:58px!important;height:58px!important;border-radius:17px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-portrait-art,#battleHud[data-battle-ui="2.9.9"] .battle-loader-portrait-art > * { width:52px!important;height:52px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list[data-mode="losses"] { grid-template-columns:1fr!important; } } @media (max-height:650px) and (orientation:landscape) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { height:154px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(340px,1fr) 156px 98px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:66px; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:52px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:98px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-asset-loader { min-height:166px!important;grid-template-rows:94px auto!important;padding:11px 16px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-fighter { grid-template-rows:54px auto auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-fighter > i { width:54px!important;height:54px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-portrait-art,#battleHud[data-battle-ui="2.9.9"] .battle-loader-portrait-art > * { width:49px!important;height:49px!important; } } @media (prefers-reduced-motion:reduce) { #battleHud[data-battle-ui="2.9.9"] .battle-asset-loader::before { animation:none!important; } } /* -------------------------------------------------------------------------- v2.9.9 modern circular cockpit One shared dock, circular skills/items, complete light/dark colour contract. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] { --cockpit-surface:rgba(3,30,43,.95); --cockpit-raised:rgba(8,48,62,.96); --cockpit-soft:rgba(16,65,79,.78); --cockpit-chip:rgba(4,38,51,.92); --cockpit-line:rgba(112,207,231,.25); --cockpit-line-strong:rgba(106,221,246,.58); --cockpit-text:#f3fbff; --cockpit-muted:#a6c3cd; --cockpit-track:rgba(132,203,220,.16); --cockpit-shadow:rgba(0,15,24,.38); --cockpit-hover:rgba(91,213,241,.14); } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] { --cockpit-surface:rgba(241,249,251,.95); --cockpit-raised:rgba(252,255,255,.97); --cockpit-soft:rgba(221,241,247,.86); --cockpit-chip:rgba(232,246,250,.94); --cockpit-line:rgba(32,129,158,.24); --cockpit-line-strong:rgba(10,155,196,.54); --cockpit-text:#123746; --cockpit-muted:#607c87; --cockpit-track:rgba(34,116,142,.14); --cockpit-shadow:rgba(22,67,83,.2); --cockpit-hover:rgba(12,157,198,.1); } #battleHud[data-battle-ui="2.9.9"] .battle-shell { border:1px solid color-mix(in srgb,var(--cockpit-line-strong) 82%,#fff 18%)!important; background:rgba(5,39,52,.035)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--cockpit-line-strong) 20%,transparent),0 24px 64px var(--cockpit-shadow)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stage::before { background:linear-gradient(180deg,rgba(2,24,34,.07),transparent 24% 70%,rgba(2,23,33,.1))!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-stage::before { background:linear-gradient(180deg,rgba(226,246,251,.03),transparent 25% 72%,rgba(19,83,102,.045))!important; } /* Fighter cards and the central matchup card share one readable palette. */ #battleHud[data-battle-ui="2.9.9"] :is(.battle-health > article,.battle-versus-card) { border-color:var(--cockpit-line)!important; background:linear-gradient(145deg,var(--cockpit-raised),var(--cockpit-surface))!important; color:var(--cockpit-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.11),0 12px 28px var(--cockpit-shadow)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article { backdrop-filter:blur(9px) saturate(1.04)!important; } #battleHud[data-battle-ui="2.9.9"] :is( .battle-fighter-identity > header > b, .battle-health > article > .battle-vital > span > strong, .battle-health > article > .battle-vital > span > small, .battle-status-empty, .battle-status-empty b, .battle-exp > span, .battle-exp > span > small, .battle-versus-card > strong ) { color:var(--cockpit-text)!important; text-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > em { border-color:var(--cockpit-line)!important; background:var(--cockpit-chip)!important; color:var(--cockpit-text)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge { background:color-mix(in srgb,var(--type-color) 17%,var(--cockpit-chip))!important; color:var(--cockpit-text)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { border-color:var(--cockpit-line)!important; background:color-mix(in srgb,var(--cockpit-soft) 72%,transparent)!important; color:var(--cockpit-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.08)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area > small, #battleHud[data-battle-ui="2.9.9"] .battle-status-empty { color:var(--cockpit-muted)!important; } #battleHud[data-battle-ui="2.9.9"] :is( .battle-health > article .battle-hp-bar, .battle-health > article > .battle-energy > i, .battle-health > article > .battle-exp > i ) { border-color:color-mix(in srgb,var(--cockpit-line) 68%,transparent)!important; background:var(--cockpit-track)!important; box-shadow:inset 0 2px 4px color-mix(in srgb,var(--cockpit-shadow) 45%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > small, #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > small b { color:var(--battle-cyan)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > span { color:var(--battle-gold)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > em { border-color:var(--cockpit-line)!important; background:var(--cockpit-chip)!important; color:var(--cockpit-muted)!important; } /* The live command surface is one compact dock, not three oversized cards. */ #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { width:min(770px,calc(100% - 112px))!important; height:170px!important; bottom:12px!important; padding:7px 9px!important; border:1px solid var(--cockpit-line)!important; border-radius:22px!important; background:linear-gradient(145deg,var(--cockpit-surface),color-mix(in srgb,var(--cockpit-raised) 91%,transparent))!important; color:var(--cockpit-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.14),0 15px 34px var(--cockpit-shadow)!important; backdrop-filter:blur(13px) saturate(1.04)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-live-controls { grid-template-rows:minmax(0,1fr) 27px!important; gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(396px,1fr) 158px 106px!important; gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) { min-width:0!important; grid-template-rows:14px minmax(0,1fr)!important; gap:0!important; border:0!important; background:transparent!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { padding-left:7px!important; border-left:1px solid var(--cockpit-line)!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) > header { height:14px!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) > header b { color:var(--cockpit-muted)!important; font-size:8px!important; letter-spacing:.1em!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { grid-template-columns:repeat(4,minmax(92px,98px))!important; grid-template-rows:1fr!important; justify-content:center!important; gap:3px!important; } /* Skills are circular controls. Their old square wrappers are deliberately gone. */ #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:74px; position:relative!important; padding:2px 0 0!important; display:flex!important; align-items:flex-start!important; justify-content:center!important; border:0!important; border-radius:0!important; background:transparent!important; color:var(--cockpit-text)!important; transform:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button.kind-ultimate, #battleHud[data-battle-ui="2.9.9"] .combat-action-button.is-queued { border:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] :is(.combat-action-button,.combat-item-button), html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] :is(.combat-action-button,.combat-item-button):is(:hover,:focus-visible) { border:0!important; background:transparent!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button::before { content:''!important; position:absolute!important; inset:auto!important; left:50%!important; top:1px!important; width:calc(var(--combat-size) + 14px)!important; height:calc(var(--combat-size) + 14px)!important; transform:translateX(-50%)!important; border-radius:50%!important; background:radial-gradient(circle,color-mix(in srgb,var(--combat-ring) 16%,transparent),transparent 68%)!important; opacity:.62!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button:is(:hover,:focus-visible), #battleHud[data-battle-ui="2.9.9"] .combat-action-button.is-previewed { border:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; transform:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-art { flex:0 0 var(--combat-size)!important; border-width:3px!important; box-shadow:inset 0 0 0 3px rgba(1,18,28,.8),0 0 0 2px color-mix(in srgb,var(--combat-ring) 55%,rgba(2,22,33,.78)),0 7px 17px var(--cockpit-shadow),0 0 17px color-mix(in srgb,var(--combat-ring) 18%,transparent)!important; transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button:is(:hover,:focus-visible) .combat-skill-art, #battleHud[data-battle-ui="2.9.9"] .combat-action-button.is-previewed .combat-skill-art { transform:translateY(-3px) scale(1.035)!important; filter:brightness(1.08) saturate(1.06)!important; box-shadow:inset 0 0 0 3px rgba(1,18,28,.76),0 0 0 3px var(--combat-ring),0 10px 22px var(--cockpit-shadow),0 0 24px color-mix(in srgb,var(--combat-ring) 32%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button.is-disabled:not(.is-cooling) .combat-skill-art { filter:saturate(.58) brightness(.8)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { position:absolute!important; left:1px!important; right:1px!important; top:78px!important; bottom:auto!important; height:18px!important; max-width:none!important; display:-webkit-box!important; overflow:hidden!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; color:var(--cockpit-text)!important; font-size:8.5px!important; font-weight:950!important; line-height:9px!important; text-align:center!important; text-overflow:ellipsis!important; white-space:normal!important; overflow-wrap:anywhere!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tags { left:0!important; right:0!important; bottom:0!important; height:14px!important; gap:2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag { height:14px!important; padding:0 4px 0 3px!important; border-color:var(--cockpit-line)!important; background:var(--cockpit-chip)!important; color:var(--cockpit-text)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag.is-type { border-color:color-mix(in srgb,var(--skill-type,#5acbea) 48%,var(--cockpit-line))!important; background:color-mix(in srgb,var(--skill-type,#5acbea) 15%,var(--cockpit-chip))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag > span { font-size:8px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag > b { font-size:6.5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button > kbd { left:5px!important; top:3px!important; border-color:color-mix(in srgb,var(--combat-ring) 45%,var(--cockpit-line))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { right:4px!important; top:56px!important; height:21px!important; min-width:35px!important; border-color:color-mix(in srgb,var(--combat-ring) 50%,rgba(92,209,235,.3))!important; background:rgba(1,22,32,.94)!important; color:#8ce8fb!important; font-size:9px!important; box-shadow:0 4px 9px rgba(0,14,22,.3)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-cooldown { top:2px!important; border-width:3px!important; } /* Quick items use only the circular item face, key and quantity badges. */ #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { grid-template-columns:repeat(3,47px)!important; grid-template-rows:repeat(2,47px)!important; align-content:center!important; justify-content:center!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { --combat-size:44px; width:47px!important; min-width:47px!important; height:47px!important; min-height:47px!important; padding:0!important; border-radius:0!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button:is(:hover,:focus-visible) { border:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; transform:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child { width:44px!important; height:44px!important; border:2px solid var(--cockpit-line)!important; background:radial-gradient(circle at 42% 34%,rgba(27,82,99,.96),rgba(2,24,35,.98))!important; box-shadow:inset 0 0 0 2px rgba(1,18,28,.62),0 5px 12px var(--cockpit-shadow)!important; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button:is(:hover,:focus-visible) > span:first-child { transform:translateY(-2px) scale(1.055)!important; border-color:var(--battle-cyan)!important; box-shadow:inset 0 0 0 2px rgba(1,18,28,.58),0 8px 17px var(--cockpit-shadow),0 0 16px rgba(88,211,240,.25)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button.is-ready > span:first-child { border-color:color-mix(in srgb,var(--battle-teal) 62%,var(--cockpit-line))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-painted, #battleHud[data-battle-ui="2.9.9"] svg.combat-item-art { width:42px!important; height:42px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown { top:0!important; width:44px!important; height:44px!important; border-width:2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > kbd { left:-3px!important; top:-3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > b { right:-3px!important; font-size:8px!important; } /* Utility actions stay compact after the item grid. */ #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:106px!important; padding:14px 0 0 6px!important; border-left-color:var(--cockpit-line)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, #battleHud[data-battle-ui="2.9.9"] #cancelBattle { min-height:31px!important; padding:0 7px!important; gap:6px!important; border-color:var(--cockpit-line)!important; border-radius:10px!important; background:linear-gradient(145deg,var(--cockpit-raised),var(--cockpit-chip))!important; color:var(--cockpit-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.11),0 5px 12px color-mix(in srgb,var(--cockpit-shadow) 62%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b { color:inherit!important; font-size:8px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button:is(:hover,:focus-visible) { border-color:var(--cockpit-line-strong)!important; background:linear-gradient(145deg,color-mix(in srgb,var(--cockpit-raised) 86%,var(--battle-cyan) 14%),var(--cockpit-chip))!important; } #battleHud[data-battle-ui="2.9.9"] #cancelBattle { border-color:color-mix(in srgb,var(--battle-red) 48%,var(--cockpit-line))!important; background:linear-gradient(145deg,color-mix(in srgb,var(--battle-red) 15%,var(--cockpit-raised)),var(--cockpit-chip))!important; color:color-mix(in srgb,var(--battle-red) 76%,var(--cockpit-text) 24%)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { height:27px!important; border:1px solid color-mix(in srgb,var(--cockpit-line) 68%,transparent)!important; border-radius:10px!important; background:color-mix(in srgb,var(--cockpit-raised) 90%,transparent)!important; box-shadow:inset 0 1px rgba(255,255,255,.08)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy { width:min(450px,100%)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > span :is(small,b) { color:var(--cockpit-text)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i { height:9px!important; background:var(--cockpit-track)!important; } /* Tooltip/skill details use the same theme as the dock. */ #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview { border-color:var(--cockpit-line)!important; background:linear-gradient(145deg,var(--cockpit-raised),var(--cockpit-surface))!important; color:var(--cockpit-text)!important; box-shadow:0 12px 28px var(--cockpit-shadow)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview :is(b,p,em) { color:var(--cockpit-text)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview :is(p,em) { color:var(--cockpit-muted)!important; } /* Tactics is fully themed; no dark rows with dark copy in the light theme. */ #battleHud[data-battle-ui="2.9.9"] .battle-tactics { bottom:174px!important; width:350px!important; max-height:calc(100% - 194px)!important; border-color:var(--cockpit-line-strong)!important; background:linear-gradient(150deg,var(--cockpit-raised),var(--cockpit-surface))!important; color:var(--cockpit-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.13),0 18px 42px var(--cockpit-shadow)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header b, #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes b, #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules b { color:var(--cockpit-text)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics :is(small,footer) { color:var(--cockpit-muted)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header small { color:var(--battle-cyan)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header button, #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button, #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules label { border-color:var(--cockpit-line)!important; background:var(--cockpit-chip)!important; color:var(--cockpit-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.08)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button.is-active { border-color:var(--cockpit-line-strong)!important; background:linear-gradient(145deg,color-mix(in srgb,var(--battle-cyan) 14%,var(--cockpit-raised)),var(--cockpit-soft))!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--battle-cyan) 12%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules label.is-ai-rule { border-color:color-mix(in srgb,var(--battle-teal) 35%,var(--cockpit-line))!important; background:linear-gradient(145deg,color-mix(in srgb,var(--battle-teal) 9%,var(--cockpit-raised)),var(--cockpit-chip))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules input { border-color:var(--cockpit-line)!important; background:var(--cockpit-track)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules input::after { background:var(--cockpit-muted)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules input:checked { border-color:var(--battle-teal)!important; background:color-mix(in srgb,var(--battle-teal) 60%,var(--cockpit-chip))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics > footer { border-top-color:var(--cockpit-line)!important; } /* Remaining battle surfaces also obey the selected theme. */ #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel { border-color:var(--cockpit-line)!important; background:linear-gradient(160deg,var(--cockpit-raised),var(--cockpit-surface))!important; box-shadow:inset 0 1px rgba(255,255,255,.1),0 9px 22px var(--cockpit-shadow)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { border-color:var(--cockpit-line)!important; background:var(--cockpit-chip)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > kbd { border-color:var(--cockpit-line)!important; background:var(--cockpit-surface)!important; color:var(--cockpit-text)!important; } #battleHud[data-battle-ui="2.9.9"] :is( .battle-asset-loader, .combat-reward-card, .combat-reward-item, .combat-result-message, .combat-capture-panel, .battle-surrender-confirm > article ) { border-color:var(--cockpit-line)!important; background:linear-gradient(145deg,var(--cockpit-raised),var(--cockpit-surface))!important; color:var(--cockpit-text)!important; } #battleHud[data-battle-ui="2.9.9"] :is( .combat-reward-card > header b, .combat-reward-item b, .combat-result-message b, .combat-capture-copy b, .combat-capture-balls b, .battle-surrender-confirm b ) { color:var(--cockpit-text)!important; } #battleHud[data-battle-ui="2.9.9"] :is( .combat-reward-card > header em, .combat-reward-item small, .combat-result-message small, .combat-capture-copy em, .battle-surrender-confirm p ) { color:var(--cockpit-muted)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button, #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls > button { border-color:var(--cockpit-line)!important; background:linear-gradient(145deg,var(--cockpit-raised),var(--cockpit-chip))!important; color:var(--cockpit-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.1),0 8px 18px var(--cockpit-shadow)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls > button.is-selected { border-color:var(--cockpit-line-strong)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--battle-cyan) 12%,transparent),0 8px 18px var(--cockpit-shadow)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm footer > button { border-color:var(--cockpit-line)!important; background:var(--cockpit-chip)!important; color:var(--cockpit-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.1)!important; } #battleHud[data-battle-ui="2.9.9"] #confirmSurrender, #battleHud[data-battle-ui="2.9.9"] .combat-capture-cancel { border-color:color-mix(in srgb,var(--battle-red) 44%,var(--cockpit-line))!important; background:linear-gradient(145deg,color-mix(in srgb,var(--battle-red) 14%,var(--cockpit-raised)),var(--cockpit-chip))!important; color:color-mix(in srgb,var(--battle-red) 78%,var(--cockpit-text) 22%)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-fighter > i { background:var(--cockpit-chip)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-fighter > b, #battleHud[data-battle-ui="2.9.9"] .battle-loader-copy > b { color:var(--cockpit-text)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-loader-fighter > small, #battleHud[data-battle-ui="2.9.9"] .battle-loader-copy > strong { color:var(--cockpit-muted)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-skill-art, html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child { background:radial-gradient(circle at 42% 34%,rgba(32,91,108,.98),rgba(3,28,40,.99))!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > :is(i,svg) { color:#098eb8!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-outcome-art, html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-painted-art { filter:drop-shadow(0 4px 7px rgba(26,76,91,.2))!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-intro::before { border-color:var(--cockpit-line)!important; background:linear-gradient(90deg,rgba(243,251,253,.15),rgba(249,254,255,.9) 18% 82%,rgba(243,251,253,.15))!important; box-shadow:0 14px 35px rgba(24,70,85,.15)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-intro-mark { border-color:var(--cockpit-line-strong)!important; background:var(--cockpit-raised)!important; box-shadow:inset 0 0 0 4px var(--cockpit-soft),0 0 20px rgba(19,150,190,.16)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-intro > span:last-child { color:var(--cockpit-text)!important; text-shadow:none!important; } /* Theme completion: every nested label must follow the surface it sits on. */ #battleHud[data-battle-ui="2.9.9"] :is( .combat-decision-actions b, .combat-capture-balls b, .combat-capture-copy b, .capture-feedback b, .capture-gesture-hint b, #battleRewardBonus b ) { color:var(--cockpit-text)!important; text-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] :is( .combat-capture-copy em, .combat-capture-balls .capture-empty, .capture-gesture-hint small, #battleRewardBonus, #battleRewardBonus :is(span,b) ) { color:var(--cockpit-muted)!important; } #battleHud[data-battle-ui="2.9.9"] :is( .combat-reward-card > header small, .combat-result-divider, .combat-capture-copy small, .combat-capture-balls small, .combat-decision-actions small, .capture-feedback small ) { color:color-mix(in srgb,var(--outcome-accent,var(--battle-cyan)) 68%,var(--cockpit-text) 32%)!important; } #battleHud[data-battle-ui="2.9.9"] :is(.capture-feedback,.capture-gesture-hint,.capture-target-reticle > span) { border-color:var(--cockpit-line)!important; background:color-mix(in srgb,var(--cockpit-surface) 86%,transparent)!important; color:var(--cockpit-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.1),0 8px 20px var(--cockpit-shadow)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay { background:color-mix(in srgb,var(--cockpit-surface) 44%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay > :is(i,svg) { border-color:var(--cockpit-line)!important; background:var(--cockpit-chip)!important; box-shadow:0 12px 30px var(--cockpit-shadow)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay :is(small,em) { color:var(--cockpit-muted)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay small { color:var(--battle-cyan)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card::before { opacity:.9!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item > strong { color:color-mix(in srgb,var(--outcome-accent,var(--battle-cyan)) 72%,var(--cockpit-text) 28%)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-loss-item { border-color:color-mix(in srgb,var(--battle-red) 42%,var(--cockpit-line))!important; background:linear-gradient(145deg,color-mix(in srgb,var(--battle-red) 11%,var(--cockpit-raised)),var(--cockpit-surface))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-result-message.is-safe { border-color:color-mix(in srgb,var(--battle-teal) 40%,var(--cockpit-line))!important; background:linear-gradient(145deg,color-mix(in srgb,var(--battle-teal) 9%,var(--cockpit-raised)),var(--cockpit-surface))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm { background:color-mix(in srgb,var(--cockpit-shadow) 38%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm > article > :is(i,svg) { border-color:color-mix(in srgb,var(--battle-red) 43%,var(--cockpit-line))!important; background:color-mix(in srgb,var(--battle-red) 13%,var(--cockpit-chip))!important; color:var(--battle-red)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm small { color:color-mix(in srgb,var(--battle-red) 76%,var(--cockpit-text) 24%)!important; } #battleHud[data-battle-ui="2.9.9"] .capture-stage[data-quality="nice"] .capture-feedback b { color:var(--battle-teal)!important; } #battleHud[data-battle-ui="2.9.9"] .capture-stage[data-quality="great"] .capture-feedback b { color:var(--battle-cyan)!important; } #battleHud[data-battle-ui="2.9.9"] .capture-stage[data-quality="excellent"] .capture-feedback b { color:var(--battle-gold)!important; } #battleHud[data-battle-ui="2.9.9"] .capture-stage[data-quality="miss"] .capture-feedback b { color:var(--battle-red)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-loss-item { border-color:color-mix(in srgb,var(--battle-red) 42%,var(--cockpit-line))!important; background:linear-gradient(145deg,color-mix(in srgb,var(--battle-red) 9%,var(--cockpit-raised)),var(--cockpit-surface))!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-result-message.is-safe { border-color:color-mix(in srgb,var(--battle-teal) 38%,var(--cockpit-line))!important; background:linear-gradient(145deg,color-mix(in srgb,var(--battle-teal) 8%,var(--cockpit-raised)),var(--cockpit-surface))!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button::before { background:linear-gradient(120deg,rgba(255,255,255,.72),transparent 38% 72%,rgba(11,153,195,.06))!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { border-color:color-mix(in srgb,var(--combat-ring) 52%,rgba(97,205,231,.34))!important; background:rgba(7,42,54,.96)!important; color:#9beafd!important; } /* Responsive density changes only geometry; labels and circular language stay. */ @media (max-width:920px) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { width:min(720px,calc(100% - 64px))!important;height:168px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(356px,1fr) 148px 94px!important;gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { grid-template-columns:repeat(4,minmax(84px,91px))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:70px; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { top:75px!important;font-size:8px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:52px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:94px!important;padding-left:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b { font-size:7px!important; } } @media (max-width:700px) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { width:calc(100% - 10px)!important;height:246px!important;padding:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(0,1fr) 104px!important;grid-template-rows:128px 66px!important;gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { grid-template-columns:repeat(4,minmax(64px,1fr))!important;gap:2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:61px; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { top:66px!important;height:23px!important;font-size:7.5px!important;line-height:10px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:44px!important;right:1px!important;min-width:30px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag { padding-inline:2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag > b { font-size:5.7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { padding:0 3px!important;border-top:1px solid var(--cockpit-line)!important;border-left:0!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { grid-template-columns:repeat(6,minmax(34px,46px))!important;grid-template-rows:47px!important;gap:2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { width:100%!important;min-width:34px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:104px!important;padding:14px 0 0 3px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics { bottom:258px!important;max-height:calc(100% - 274px)!important; } } @media (max-height:650px) and (orientation:landscape) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { width:min(720px,calc(100% - 64px))!important;height:158px!important;bottom:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(352px,1fr) 148px 92px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:65px; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { top:68px!important;height:17px!important;line-height:8.5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:47px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:92px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics { bottom:158px!important;max-height:calc(100% - 168px)!important; } } /* -------------------------------------------------------------------------- v2.9.9 modal layer and kinetic energy pass The world stays rendered behind combat, but only the area outside the arena is blurred. The active arena, fighters and controls remain pixel-sharp. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] { --battle-modal-width:min(1080px,calc(100vw - 56px)); --battle-modal-height:min(680px,calc(100dvh - 88px)); --battle-modal-gap-x:calc((100vw - var(--battle-modal-width)) / 2); --battle-modal-gap-y:calc((100dvh - var(--battle-modal-height)) / 2); z-index:5000!important; background:transparent!important; pointer-events:none!important; isolation:isolate!important; } #battleHud[data-battle-ui="2.9.9"].is-open { pointer-events:auto!important; } #battleHud[data-battle-ui="2.9.9"]::before, #battleHud[data-battle-ui="2.9.9"]::after { display:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-shell { z-index:1!important; width:var(--battle-modal-width)!important; height:var(--battle-modal-height)!important; min-width:min(720px,calc(100vw - 8px))!important; min-height:min(500px,calc(100dvh - 8px))!important; } body.is-battling .world-shade { background:transparent!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } body.is-battling :is( .world-topbar, #partyHud, #playerProfileButton, #playerStaminaHud, #questWidget, #worldMinimapShell, #desktopDock, #desktopUtilityRail, #desktopMoreMenu, .world-rail, .desktop-dock, .desktop-utility-rail, .mobile-dock, .chat-panel, .side-panel ) { pointer-events:none!important; } /* A continuous energy cell replaces the old segmented ruler. */ #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { padding:2px 9px!important; overflow:visible!important; border-radius:13px!important; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cockpit-chip) 82%,transparent) 12% 88%,transparent)!important; box-shadow:inset 0 1px rgba(255,255,255,.07)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy { --energy-a:#1478df; --energy-b:#29c8f1; --energy-c:#79f4e7; --energy-label:#8feaff; width:min(520px,100%)!important; grid-template-columns:122px minmax(0,1fr)!important; gap:9px!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-energy { --energy-a:#0872c4; --energy-b:#0faed8; --energy-c:#35d7c2; --energy-label:#087c9d; } #battleHud[data-battle-ui="2.9.9"] .combat-energy[data-energy-state="low"] { --energy-a:#df5d35; --energy-b:#f09a38; --energy-c:#ffd36a; --energy-label:#ffad65; } #battleHud[data-battle-ui="2.9.9"] .combat-energy[data-energy-state="empty"] { --energy-a:#687b83; --energy-b:#84969d; --energy-c:#a5b3b8; --energy-label:var(--cockpit-muted); } #battleHud[data-battle-ui="2.9.9"] .combat-energy > span { min-width:0!important; display:grid!important; grid-template-columns:21px minmax(0,1fr) auto!important; align-items:center!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > span > i { width:20px!important; height:20px!important; padding:3px!important; display:grid!important; place-items:center!important; border:1px solid color-mix(in srgb,var(--energy-b) 46%,var(--cockpit-line))!important; border-radius:7px!important; background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--energy-c) 24%,var(--cockpit-raised)),var(--cockpit-chip))!important; color:var(--energy-label)!important; box-shadow:inset 0 1px rgba(255,255,255,.13),0 0 12px color-mix(in srgb,var(--energy-b) 20%,transparent)!important; box-sizing:border-box!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > span > i > svg { width:100%!important; height:100%!important; filter:drop-shadow(0 0 4px color-mix(in srgb,var(--energy-c) 48%,transparent))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > span :is(small,b) { font-size:8px!important; line-height:1!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > span small { color:var(--cockpit-muted)!important; letter-spacing:.1em!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > span b { color:var(--energy-label)!important; text-shadow:0 0 10px color-mix(in srgb,var(--energy-b) 26%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i { position:relative!important; height:13px!important; overflow:visible!important; border:1px solid color-mix(in srgb,var(--energy-b) 30%,var(--cockpit-line))!important; border-radius:999px!important; background:linear-gradient(180deg,rgba(1,16,25,.95),rgba(8,38,49,.94))!important; box-shadow:inset 0 2px 5px rgba(0,0,0,.52),0 1px rgba(255,255,255,.08),0 0 0 3px color-mix(in srgb,var(--energy-b) 6%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i::before { content:''!important; position:absolute!important; inset:2px!important; z-index:2!important; border-radius:inherit!important; background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 48%)!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i::after { content:''!important; position:absolute!important; inset:0!important; z-index:3!important; border-radius:inherit!important; background:linear-gradient(90deg,transparent 0 24%,rgba(255,255,255,.035) 50%,transparent 76%)!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i > em { position:absolute!important; left:2px!important; top:2px!important; bottom:2px!important; z-index:1!important; max-width:calc(100% - 4px)!important; height:auto!important; overflow:visible!important; border-radius:999px!important; background:linear-gradient(90deg,var(--energy-a),var(--energy-b) 52%,var(--energy-c),var(--energy-b))!important; background-size:220% 100%!important; box-shadow:0 0 9px color-mix(in srgb,var(--energy-b) 48%,transparent),inset 0 1px rgba(255,255,255,.46)!important; transition:width .34s cubic-bezier(.2,.82,.2,1),filter .2s ease!important; animation:battle-energy-flow 3.4s linear infinite!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i > em::before { content:''!important; position:absolute!important; inset:-1px!important; border-radius:inherit!important; background:linear-gradient(112deg,transparent 12% 38%,rgba(255,255,255,.72) 49%,transparent 60% 88%)!important; transform:translateX(-145%)!important; animation:battle-energy-sheen 2.8s ease-in-out infinite!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i > em::after { content:''!important; position:absolute!important; right:-4px!important; top:50%!important; width:9px!important; height:9px!important; transform:translateY(-50%)!important; border-radius:50%!important; background:radial-gradient(circle,#fff 0 18%,var(--energy-c) 38%,var(--energy-b) 70%,transparent 72%)!important; box-shadow:0 0 8px var(--energy-b),0 0 15px color-mix(in srgb,var(--energy-c) 58%,transparent)!important; animation:battle-energy-tip 1.45s ease-in-out infinite!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy[data-energy-state="empty"] > i > em::after { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy[data-energy-state="full"] > i { animation:battle-energy-full 1.8s ease-in-out infinite!important; } @keyframes battle-energy-flow { to { background-position:-220% 0; } } @keyframes battle-energy-sheen { 0%,32% { transform:translateX(-145%);opacity:0; } 46% { opacity:.9; } 68%,100% { transform:translateX(145%);opacity:0; } } @keyframes battle-energy-tip { 50% { transform:translateY(-50%) scale(1.28);filter:brightness(1.18); } } @keyframes battle-energy-full { 50% { box-shadow:inset 0 2px 5px rgba(0,0,0,.48),0 0 0 3px color-mix(in srgb,var(--energy-b) 12%,transparent),0 0 16px color-mix(in srgb,var(--energy-b) 25%,transparent); } } @media (max-width:920px) { #battleHud[data-battle-ui="2.9.9"] { --battle-modal-width:calc(100vw - 16px); --battle-modal-height:min(680px,calc(100dvh - 24px)); } #battleHud[data-battle-ui="2.9.9"] .combat-energy { width:min(470px,100%)!important;grid-template-columns:112px minmax(0,1fr)!important; } } @media (max-width:700px) { #battleHud[data-battle-ui="2.9.9"] { --battle-modal-width:calc(100vw - 8px); --battle-modal-height:calc(100dvh - 8px); } #battleHud[data-battle-ui="2.9.9"] .combat-energy { width:100%!important;grid-template-columns:96px minmax(0,1fr)!important;gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > span > i { width:18px!important;height:18px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > span :is(small,b) { font-size:7px!important; } } @media (max-height:650px) and (orientation:landscape) { #battleHud[data-battle-ui="2.9.9"] { --battle-modal-width:calc(100vw - 10px); --battle-modal-height:calc(100dvh - 10px); } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i { height:11px!important; } } @media (prefers-reduced-motion:reduce) { #battleHud[data-battle-ui="2.9.9"] :is(.combat-skill-art,.combat-item-button > span:first-child) { transition:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i, #battleHud[data-battle-ui="2.9.9"] .combat-energy > i > em, #battleHud[data-battle-ui="2.9.9"] .combat-energy > i > em::before, #battleHud[data-battle-ui="2.9.9"] .combat-energy > i > em::after { animation:none!important; } } /* -------------------------------------------------------------------------- v2.9.9 outcome clarity, theme parity and living energy stream This final layer is authoritative for results and energy feedback. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] { --battle-energy-a:#1677df; --battle-energy-b:#26c8ef; --battle-energy-c:#72f2df; --result-glass:rgba(3,31,44,.965); --result-raised:rgba(9,51,65,.98); --result-chip:rgba(13,61,75,.9); --result-line:rgba(118,216,239,.27); } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] { --battle-energy-a:#0877c7; --battle-energy-b:#0cb7dc; --battle-energy-c:#31d9bc; --result-glass:rgba(242,250,252,.975); --result-raised:rgba(253,255,255,.985); --result-chip:rgba(225,243,248,.95); --result-line:rgba(28,139,169,.24); } /* The outcome is one readable stage: title, truthful changes, verification. */ #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"] { height:362px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { height:314px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card { grid-template-rows:88px 18px minmax(82px,1fr) 42px!important; gap:6px!important; padding:14px 17px 13px!important; border-color:color-mix(in srgb,var(--outcome-accent,var(--battle-cyan)) 31%,var(--result-line))!important; background:radial-gradient(circle at 15% 0,color-mix(in srgb,var(--outcome-accent,var(--battle-cyan)) 14%,transparent),transparent 40%),linear-gradient(150deg,var(--result-raised),var(--result-glass) 72%)!important; box-shadow:inset 0 1px rgba(255,255,255,.13),0 22px 52px var(--cockpit-shadow)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list { align-items:stretch!important; grid-auto-rows:minmax(78px,1fr)!important; gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list[data-mode="losses"] { grid-template-columns:repeat(2,minmax(0,1fr))!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list[data-mode="losses"] .combat-result-message { grid-column:auto!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-reward-item,.combat-result-message) { position:relative!important; min-height:78px!important; height:auto!important; border-color:var(--result-line)!important; background:linear-gradient(145deg,color-mix(in srgb,var(--result-chip) 88%,var(--result-raised)),var(--result-glass))!important; box-shadow:inset 0 1px rgba(255,255,255,.09),0 8px 18px color-mix(in srgb,var(--cockpit-shadow) 48%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item { padding:17px 10px 7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item > mark { position:absolute!important; z-index:3!important; top:5px!important; right:7px!important; min-width:58px!important; height:15px!important; padding:0 6px!important; display:grid!important; place-items:center!important; border:1px solid color-mix(in srgb,var(--battle-teal) 46%,var(--result-line))!important; border-radius:999px!important; background:color-mix(in srgb,var(--battle-teal) 13%,var(--result-chip))!important; color:color-mix(in srgb,var(--battle-teal) 76%,var(--cockpit-text) 24%)!important; font-size:5.5px!important; font-weight:1000!important; letter-spacing:.085em!important; line-height:1!important; text-decoration:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list[data-locked="true"] .combat-reward-item > mark { border-color:color-mix(in srgb,var(--battle-gold) 48%,var(--result-line))!important; background:color-mix(in srgb,var(--battle-gold) 13%,var(--result-chip))!important; color:color-mix(in srgb,var(--battle-gold) 78%,var(--cockpit-text) 22%)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-loss-item > mark { border-color:color-mix(in srgb,var(--battle-red) 52%,var(--result-line))!important; background:color-mix(in srgb,var(--battle-red) 13%,var(--result-chip))!important; color:color-mix(in srgb,var(--battle-red) 78%,var(--cockpit-text) 22%)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item > strong { font-variant-numeric:tabular-nums!important; text-shadow:0 0 13px color-mix(in srgb,var(--outcome-accent,var(--battle-cyan)) 22%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing .combat-result-message { animation:combat-reward-enter .5s cubic-bezier(.16,.82,.22,1) .27s both!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing .combat-result-message:nth-child(2) { animation-delay:.42s!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing #battleRewardBonus { animation:battle-result-footer-in .42s ease .5s both!important; } #battleHud[data-battle-ui="2.9.9"] .combat-result-message.is-recovery { border-color:color-mix(in srgb,var(--battle-cyan) 39%,var(--result-line))!important; background:linear-gradient(145deg,color-mix(in srgb,var(--battle-cyan) 9%,var(--result-raised)),var(--result-glass))!important; } #battleHud[data-battle-ui="2.9.9"] :is( .combat-result-message.is-recovery .combat-result-message-art, .combat-result-message.is-safe .combat-result-message-art, .combat-loss-art ) { width:52px!important; height:52px!important; padding:9px!important; border-radius:16px!important; box-sizing:border-box!important; } #battleHud[data-battle-ui="2.9.9"] .combat-result-message.is-recovery .combat-result-message-art { border:1px solid color-mix(in srgb,var(--battle-cyan) 48%,var(--result-line))!important; background:color-mix(in srgb,var(--battle-cyan) 13%,var(--result-chip))!important; color:var(--battle-cyan)!important; filter:drop-shadow(0 0 10px color-mix(in srgb,var(--battle-cyan) 25%,transparent))!important; } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus { position:relative!important; z-index:2!important; min-width:0!important; min-height:38px!important; padding:4px 8px!important; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:9px!important; overflow:hidden!important; border:1px solid var(--result-line)!important; border-radius:12px!important; background:linear-gradient(145deg,var(--result-chip),color-mix(in srgb,var(--result-glass) 92%,transparent))!important; color:var(--cockpit-muted)!important; box-shadow:inset 0 1px rgba(255,255,255,.08)!important; } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus > span { min-width:0!important; display:grid!important; grid-template-columns:25px minmax(0,1fr)!important; grid-template-rows:auto auto!important; align-items:center!important; column-gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus > span > :is(i,svg) { grid-column:1!important; grid-row:1/3!important; width:24px!important; height:24px!important; padding:4px!important; border:1px solid color-mix(in srgb,var(--outcome-accent,var(--battle-cyan)) 38%,var(--result-line))!important; border-radius:8px!important; background:color-mix(in srgb,var(--outcome-accent,var(--battle-cyan)) 10%,var(--result-chip))!important; color:var(--outcome-accent,var(--battle-cyan))!important; box-sizing:border-box!important; } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus > span > b { grid-column:2!important; color:var(--cockpit-text)!important; font-size:7px!important; font-weight:1000!important; letter-spacing:.06em!important; } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus > span > small { grid-column:2!important; overflow:hidden!important; color:var(--cockpit-muted)!important; font-size:6px!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus > strong { min-width:0!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:5px!important; overflow:hidden!important; color:color-mix(in srgb,var(--outcome-accent,var(--battle-cyan)) 72%,var(--cockpit-text) 28%)!important; font-size:7px!important; font-weight:950!important; text-align:right!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus > strong > :is(i,svg) { width:17px!important; height:17px!important; flex:0 0 17px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button:focus-visible { outline:3px solid color-mix(in srgb,var(--outcome-accent,var(--battle-cyan)) 34%,transparent)!important; outline-offset:2px!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] :is(.combat-reward-item,.combat-result-message) { box-shadow:inset 0 1px rgba(255,255,255,.88),0 8px 18px rgba(25,77,93,.1)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus { box-shadow:inset 0 1px rgba(255,255,255,.9),0 6px 15px rgba(25,77,93,.08)!important; } /* Status surfaces no longer retain a dark-theme fill inside light fighter cards. */ #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area .battle-status-chip { border-color:var(--cockpit-line)!important; background:var(--cockpit-chip)!important; color:var(--cockpit-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.08)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area .battle-status-chip.is-buff { border-color:color-mix(in srgb,var(--battle-teal) 43%,var(--cockpit-line))!important; background:color-mix(in srgb,var(--battle-teal) 12%,var(--cockpit-chip))!important; color:color-mix(in srgb,var(--battle-teal) 72%,var(--cockpit-text) 28%)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area .battle-status-chip.is-debuff { border-color:color-mix(in srgb,var(--battle-red) 43%,var(--cockpit-line))!important; background:color-mix(in srgb,var(--battle-red) 11%,var(--cockpit-chip))!important; color:color-mix(in srgb,var(--battle-red) 72%,var(--cockpit-text) 28%)!important; } #battleHud[data-battle-ui="2.9.9"] .enemy-health.is-capturable .battle-card-status-area { border-color:color-mix(in srgb,var(--battle-gold) 48%,var(--cockpit-line))!important; background:color-mix(in srgb,var(--battle-gold) 12%,var(--cockpit-soft))!important; color:var(--cockpit-text)!important; } /* Both card bars and the command meter use the same flowing energy language. */ #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-energy > i { overflow:hidden!important; border-color:color-mix(in srgb,var(--battle-energy-b) 25%,var(--cockpit-line))!important; background:color-mix(in srgb,var(--cockpit-track) 88%,rgba(0,12,20,.2))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-energy > i > em { border-radius:inherit!important; background:linear-gradient(90deg,var(--battle-energy-a),var(--battle-energy-b) 54%,var(--battle-energy-c),var(--battle-energy-b))!important; background-size:220% 100%!important; box-shadow:0 0 8px color-mix(in srgb,var(--battle-energy-b) 40%,transparent),inset 0 1px rgba(255,255,255,.38)!important; transition:width .34s cubic-bezier(.2,.82,.2,1)!important; animation:battle-fighter-energy-flow 3.6s linear infinite!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy-current { position:absolute!important; left:2px!important; top:2px!important; bottom:2px!important; z-index:4!important; width:var(--energy-level,0%)!important; max-width:calc(100% - 4px)!important; display:block!important; overflow:hidden!important; border-radius:999px!important; opacity:.92!important; pointer-events:none!important; transition:width .34s cubic-bezier(.2,.82,.2,1),opacity .18s ease!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-energy > i { border-color:color-mix(in srgb,var(--energy-b) 34%,var(--cockpit-line))!important; background:linear-gradient(180deg,rgba(211,233,239,.96),rgba(230,245,248,.98))!important; box-shadow:inset 0 2px 5px rgba(42,105,123,.17),0 1px rgba(255,255,255,.9),0 0 0 3px color-mix(in srgb,var(--energy-b) 7%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy-current > i { position:absolute!important; left:-10px!important; top:50%!important; width:4px!important; height:4px!important; border-radius:50%!important; background:#fff!important; box-shadow:0 0 5px 1px var(--energy-c),0 0 10px var(--energy-b)!important; opacity:0!important; animation:battle-energy-particle 2.45s linear infinite!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy-current > i:nth-child(2) { width:3px!important; height:3px!important; animation-delay:-.8s!important; animation-duration:2.9s!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy-current > i:nth-child(3) { width:2px!important; height:2px!important; animation-delay:-1.65s!important; animation-duration:2.15s!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy[data-energy-state="empty"] .combat-energy-current { opacity:0!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy.is-spending > span > i { animation:battle-energy-icon-spend .58s cubic-bezier(.2,.78,.22,1)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy.is-spending > i { animation:battle-energy-track-spend .58s ease!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy.is-spending > i > em { animation:battle-energy-flow 3.4s linear infinite,battle-energy-spend .58s ease!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy.is-restoring > span > i { animation:battle-energy-icon-restore .62s cubic-bezier(.18,.84,.2,1)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy.is-restoring > i { animation:battle-energy-track-restore .62s ease!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy.is-restoring > i > em { animation:battle-energy-flow 3.4s linear infinite,battle-energy-restore .62s ease!important; } @keyframes battle-fighter-energy-flow { to { background-position:-220% 0; } } @keyframes battle-energy-particle { 0% { left:-10px;opacity:0;transform:translateY(-50%) scale(.55); } 12% { opacity:.92; } 78% { opacity:.82; } 100% { left:calc(100% + 7px);opacity:0;transform:translateY(-50%) scale(1.12); } } @keyframes battle-energy-icon-spend { 35% { transform:scale(.82) rotate(-10deg);filter:brightness(1.45) sepia(.35); } 72% { transform:scale(1.08) rotate(4deg); } } @keyframes battle-energy-icon-restore { 40% { transform:scale(1.22) rotate(8deg);filter:brightness(1.42);box-shadow:0 0 18px color-mix(in srgb,var(--energy-c) 64%,transparent); } } @keyframes battle-energy-track-spend { 36% { border-color:color-mix(in srgb,#ffb454 74%,var(--cockpit-line));box-shadow:inset 0 2px 5px rgba(0,0,0,.52),0 0 15px rgba(255,154,60,.35); } } @keyframes battle-energy-track-restore { 42% { border-color:color-mix(in srgb,var(--energy-c) 72%,var(--cockpit-line));box-shadow:inset 0 2px 5px rgba(0,0,0,.42),0 0 18px color-mix(in srgb,var(--energy-c) 44%,transparent); } } @keyframes battle-energy-spend { 38% { filter:brightness(1.28) saturate(.72) hue-rotate(-24deg); } } @keyframes battle-energy-restore { 40% { filter:brightness(1.42) saturate(1.22);box-shadow:0 0 17px color-mix(in srgb,var(--energy-c) 72%,transparent),inset 0 1px rgba(255,255,255,.58); } } @keyframes battle-result-footer-in { from { opacity:0;transform:translateY(6px); } to { opacity:1;transform:none; } } @media (max-width:700px) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"] { height:318px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { height:286px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card { grid-template-rows:65px 14px minmax(66px,1fr) 37px!important;padding:8px 9px!important;gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list[data-mode="losses"] { grid-template-columns:1fr!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list[data-mode="losses"] .combat-result-message { min-height:58px!important; } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus { min-height:33px!important;padding:3px 6px!important; } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus > span > small { display:none!important; } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus > strong { font-size:6px!important; } } @media (max-height:650px) and (orientation:landscape) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"] { height:278px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { height:238px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-card { grid-template-rows:60px 13px minmax(58px,1fr) 34px!important;padding:7px 10px!important;gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-reward-item,.combat-result-message) { min-height:58px!important; } #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus { min-height:31px!important; } } @media (prefers-reduced-motion:reduce) { #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-energy > i > em, #battleHud[data-battle-ui="2.9.9"] .combat-energy-current > i, #battleHud[data-battle-ui="2.9.9"] .combat-energy.is-spending > span > i, #battleHud[data-battle-ui="2.9.9"] .combat-energy.is-spending > i, #battleHud[data-battle-ui="2.9.9"] .combat-energy.is-spending > i > em, #battleHud[data-battle-ui="2.9.9"] .combat-energy.is-restoring > span > i, #battleHud[data-battle-ui="2.9.9"] .combat-energy.is-restoring > i, #battleHud[data-battle-ui="2.9.9"] .combat-energy.is-restoring > i > em, #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing .combat-result-message, #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-revealing #battleRewardBonus { animation:none!important; } } /* Keep the native hidden contract authoritative after all scoped overrides. */ /* -------------------------------------------------------------------------- v2.9.9 battle cleanup — no screen blur, stable defeat acknowledgement This pass intentionally touches only modal blur, pause chrome and terminal UI. -------------------------------------------------------------------------- */ /* The four-piece world blur was removed from the DOM. Keep the legacy class inert so stale/cached markup can never reintroduce blur around the arena. */ #battleHud[data-battle-ui="2.9.9"] .battle-world-backdrop, #battleHud[data-battle-ui="2.9.9"] .battle-world-backdrop > i { background:transparent!important; pointer-events:none!important; } /* Pause stays readable without blurring the world and without a square icon tile. */ #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay { background:color-mix(in srgb,var(--cockpit-surface) 72%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay > :is(i,svg) { width:82px!important; height:82px!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:var(--battle-cyan)!important; filter:drop-shadow(0 8px 18px color-mix(in srgb,var(--cockpit-shadow) 72%,transparent))!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] #pauseBattle.is-active { border-color:rgba(16,151,192,.42)!important; background:linear-gradient(155deg,rgba(224,246,251,.98),rgba(204,235,244,.98))!important; color:#0a789d!important; box-shadow:inset 0 1px rgba(255,255,255,.92),0 7px 17px rgba(33,103,123,.14)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] #pauseBattle.is-active > :is(i,svg) { color:#078fbd!important; } /* Hidden result actions must remain truly hidden even against the stronger button rules below. This prevents the disabled capture action from leaking into defeat. */ #battleHud[data-battle-ui="2.9.9"] .combat-decision-actions > button[hidden], #battleHud[data-battle-ui="2.9.9"] .combat-decision[data-outcome="defeat"] #beginCapture, #battleHud[data-battle-ui="2.9.9"] .combat-decision[data-outcome="draw"] #beginCapture { display:none!important; } /* Defeat/draw are explicit terminal states: one visible finish button, immediately. */ #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"].has-terminal-actions { height:360px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-result.has-terminal-actions { grid-template-rows:minmax(0,1fr) 64px!important; gap:9px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-result.has-terminal-actions .combat-decision-actions, #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-result.has-terminal-actions.is-revealing .combat-decision-actions { width:min(380px,100%)!important; grid-template-columns:1fr!important; opacity:1!important; transform:none!important; animation:none!important; visibility:visible!important; pointer-events:auto!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision.is-result.has-terminal-actions #finishBattle { display:grid!important; } /* Remove the decorative white scan that could flash as a stray strip on the left. */ #battleHud[data-battle-ui="2.9.9"] .battle-asset-loader::before { content:none!important; display:none!important; animation:none!important; background:none!important; } @media (max-width:700px) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"].has-terminal-actions { height:300px!important; } } @media (max-height:650px) and (orientation:landscape) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"].has-terminal-actions { height:270px!important; } } /* -------------------------------------------------------------------------- v2.9.9 defeat losses + live world UI contract Combat freezes only the local trainer's world movement on the server. The shared world keeps running and global UI/windows remain interactive. -------------------------------------------------------------------------- */ /* The battle root is a visual layer; only its actual panels receive input. */ #battleHud[data-battle-ui="2.9.9"] :is( .battle-shell, .battle-surrender-confirm, .battle-tactics, .combat-command-deck, .battle-pause-overlay ) { pointer-events:auto!important; } /* Global HUD and navigation stay available while combat is active. They sit above the battle layer so clicks cannot be swallowed by the combat root. */ body.is-battling :is( .world-topbar, #partyHud, #playerProfileButton, #playerStaminaHud, #questWidget, #worldMinimapShell, #desktopDock, #desktopUtilityRail, #desktopMoreMenu, .world-rail, .desktop-dock, .desktop-utility-rail, .mobile-dock ) { opacity:1!important; visibility:visible!important; pointer-events:auto!important; filter:none!important; z-index:5100!important; } body.is-battling .chat-panel.is-minimized, body.is-battling .chat-panel.is-open { opacity:1!important; visibility:visible!important; pointer-events:auto!important; filter:none!important; z-index:5200!important; } body.is-battling .side-panel.is-open { opacity:1!important; visibility:visible!important; pointer-events:auto!important; filter:none!important; z-index:5201!important; } @media (max-width:700px) { body.is-battling .mobile-dock { display:grid!important; } } /* Defeat contains only the outcome header, the actual loss list and the final action button. The generic reward footer must never reserve empty space. */ #battleHud[data-battle-ui="2.9.9"] .combat-decision[data-outcome="defeat"] #battleRewardBonus, #battleHud[data-battle-ui="2.9.9"] #battleRewardBonus[hidden] { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-decision[data-outcome="defeat"] .combat-reward-card { grid-template-rows:auto auto minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list[data-mode="losses"] { align-content:start!important; } /* Quick battle-item wells follow the active UI theme instead of remaining permanently dark behind the item art. */ html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child { border-color:rgba(51,137,160,.28)!important; background:radial-gradient(circle at 38% 30%,rgba(255,255,255,.99),rgba(220,240,246,.98) 72%,rgba(202,229,237,.98))!important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.72),0 5px 12px rgba(32,89,108,.14)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .combat-item-button:is(:hover,:focus-visible) > span:first-child { border-color:#1599bd!important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.82),0 8px 17px rgba(32,89,108,.18),0 0 16px rgba(41,172,205,.18)!important; } html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child { border-color:var(--cockpit-line)!important; background:radial-gradient(circle at 42% 34%,rgba(27,82,99,.96),rgba(2,24,35,.98))!important; box-shadow:inset 0 0 0 2px rgba(1,18,28,.62),0 5px 12px var(--cockpit-shadow)!important; } /* -------------------------------------------------------------------------- v2.9.9 live-world battle contract — view everything, mutate no battle roster Global windows remain usable. Only controls that could alter the already materialized battle roster are visibly locked until combat ends. -------------------------------------------------------------------------- */ body.is-battling .side-panel .battle-roster-lock-note { margin:8px 0 10px!important; padding:8px 10px!important; border:1px solid color-mix(in srgb,var(--battle-cyan) 28%,transparent)!important; border-radius:10px!important; background:color-mix(in srgb,var(--cockpit-surface) 88%,transparent)!important; color:var(--cockpit-muted)!important; font-size:10px!important; font-weight:750!important; line-height:1.35!important; } body.is-battling .side-panel :is( [data-set-lead][disabled], [data-team-add][disabled], [data-team-remove][disabled], [data-evolve-pokemon][disabled] ) { opacity:.48!important; cursor:not-allowed!important; filter:saturate(.45)!important; } /* -------------------------------------------------------------------------- v2.9.9 reward reveal + battle-world render contract The old decision card/two-button result is replaced by one staged payout. -------------------------------------------------------------------------- */ /* The fixed combat root must never steal clicks from world UI. Only the real combat shell and its explicit controls receive pointer input. */ #battleHud[data-battle-ui="2.9.9"].is-open { pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-shell { pointer-events:auto!important; } body.is-battling :is(#desktopDock,.desktop-dock,.mobile-dock,.world-rail,.world-topbar,#desktopUtilityRail,#desktopMoreMenu) { pointer-events:auto!important; z-index:5300!important; } body.is-battling .chat-panel { z-index:5400!important; } body.is-battling .chat-panel.is-open, body.is-battling .chat-panel.is-minimized { visibility:visible!important; pointer-events:auto!important; } body.is-battling .chat-panel.is-open:not(.is-minimized) { opacity:1!important; } body.is-battling .side-panel.is-open { z-index:5401!important; } /* New result scene: no reward card, no status badges, no Capture/Finish pair. */ #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"], #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { bottom:22px!important; width:min(760px,calc(100% - 92px))!important; height:340px!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-scene { width:100%!important; height:100%!important; display:grid!important; grid-template-rows:auto minmax(0,1fr) 54px!important; align-content:end!important; gap:12px!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-outcome { justify-self:center!important; display:grid!important; grid-template-columns:88px auto!important; align-items:center!important; gap:14px!important; min-width:0!important; opacity:0; transform:translateY(10px) scale(.96); transition:opacity .28s ease,transform .38s cubic-bezier(.2,.9,.2,1.18); filter:drop-shadow(0 10px 22px rgba(0,17,26,.34)); } #battleHud[data-battle-ui="2.9.9"] .battle-result-scene.is-outcome-visible .battle-result-outcome { opacity:1; transform:none; } #battleHud[data-battle-ui="2.9.9"] .battle-result-emblem, #battleHud[data-battle-ui="2.9.9"] .battle-result-emblem .combat-result-art { width:88px!important; height:88px!important; display:grid!important; place-items:center!important; border:0!important; background:transparent!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-copy { min-width:0!important; display:grid!important; gap:2px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-copy > small { color:color-mix(in srgb,var(--outcome-accent) 82%,#fff 18%)!important; font-size:8px!important; font-weight:1000!important; letter-spacing:.16em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-copy > b { color:#f8fdff!important; font-size:44px!important; font-weight:1000!important; line-height:.88!important; letter-spacing:.025em!important; text-shadow:0 5px 18px rgba(0,18,27,.48),0 0 22px color-mix(in srgb,var(--outcome-accent) 30%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-copy > em { max-width:420px!important; overflow:hidden!important; color:#c9dfe6!important; font-size:10px!important; font-style:normal!important; font-weight:780!important; text-overflow:ellipsis!important; white-space:nowrap!important; text-shadow:0 2px 7px rgba(0,17,25,.4)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-drops { min-height:0!important; display:grid!important; grid-template-rows:18px minmax(0,1fr)!important; gap:4px!important; border:0!important; background:transparent!important; box-shadow:none!important; overflow:visible!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-drops > header { display:flex!important; align-items:center!important; justify-content:center!important; color:color-mix(in srgb,var(--outcome-accent) 74%,#eefdff 26%)!important; font-size:7px!important; font-weight:1000!important; letter-spacing:.17em!important; text-shadow:0 2px 7px rgba(0,15,23,.35)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list, #battleHud[data-battle-ui="2.9.9"] .combat-reward-list[data-mode="losses"] { width:100%!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:20px!important; padding:0 6px!important; overflow-x:auto!important; overflow-y:visible!important; scrollbar-width:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list::-webkit-scrollbar { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop { position:relative!important; flex:0 0 auto!important; width:min(190px,27vw)!important; min-width:146px!important; min-height:92px!important; padding:0!important; display:grid!important; grid-template-columns:68px minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr) 24px!important; align-items:center!important; column-gap:10px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; opacity:0; transform:translateY(18px) scale(.88); filter:none; transition:opacity .24s ease,transform .42s cubic-bezier(.16,.9,.22,1.18); } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop.is-visible { opacity:1; transform:none; filter:none; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop::before { content:''; position:absolute; left:4px; top:7px; width:58px; height:58px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--outcome-accent) 20%,transparent),transparent 68%); pointer-events:none; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop.is-loss::before { background:radial-gradient(circle,rgba(255,99,91,.18),transparent 68%); } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop-art { position:relative!important; z-index:1!important; grid-column:1!important; grid-row:1!important; width:64px!important; height:64px!important; padding:2px!important; display:grid!important; place-items:center!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; filter:drop-shadow(0 8px 12px rgba(0,15,24,.35))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span { min-width:0!important; grid-column:2!important; grid-row:1!important; display:grid!important; gap:3px!important; align-self:center!important; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span > b { overflow:hidden!important; color:#f5fbfd!important; font-size:10px!important; font-weight:950!important; line-height:1.15!important; text-overflow:ellipsis!important; white-space:nowrap!important; text-shadow:0 2px 7px rgba(0,17,25,.46)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span > small { overflow:hidden!important; color:#adcbd5!important; font-size:7px!important; font-weight:760!important; text-overflow:ellipsis!important; white-space:nowrap!important; text-shadow:0 2px 6px rgba(0,17,25,.4)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > strong { grid-column:1 / -1!important; grid-row:2!important; align-self:start!important; justify-self:center!important; color:color-mix(in srgb,var(--outcome-accent) 78%,#fff 22%)!important; font-size:18px!important; font-weight:1000!important; line-height:1!important; font-variant-numeric:tabular-nums!important; text-shadow:0 2px 9px rgba(0,17,25,.45)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop.is-loss > strong { color:#ff8b83!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-action { justify-self:center!important; width:min(330px,80%)!important; height:54px!important; padding:0 16px 0 20px!important; display:grid!important; grid-template-columns:minmax(0,1fr) 30px!important; align-items:center!important; gap:10px!important; border:1px solid color-mix(in srgb,var(--outcome-accent) 62%,rgba(255,255,255,.25))!important; border-radius:18px!important; background:linear-gradient(135deg,color-mix(in srgb,var(--outcome-accent) 82%,#143745 18%),color-mix(in srgb,var(--outcome-accent) 58%,#092936 42%))!important; color:#fff!important; box-shadow:0 10px 24px rgba(0,18,28,.28),inset 0 1px rgba(255,255,255,.22)!important; opacity:.42; transform:translateY(8px); pointer-events:none!important; transition:opacity .2s,transform .22s,filter .18s,box-shadow .18s!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-action.is-ready:not(:disabled) { opacity:1; transform:none; pointer-events:auto!important; cursor:pointer!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-action.is-ready:not(:disabled):is(:hover,:focus-visible) { filter:brightness(1.08)!important; box-shadow:0 13px 30px rgba(0,18,28,.34),0 0 18px color-mix(in srgb,var(--outcome-accent) 24%,transparent),inset 0 1px rgba(255,255,255,.28)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-action > span { min-width:0!important; display:grid!important; gap:2px!important; text-align:left!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-action b { color:#fff!important; font-size:10px!important; font-weight:1000!important; letter-spacing:.05em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-action small { overflow:hidden!important; color:rgba(255,255,255,.76)!important; font-size:6.5px!important; font-weight:760!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-action > i, #battleHud[data-battle-ui="2.9.9"] .battle-result-action > i > svg { width:28px!important; height:28px!important; color:#fff!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-action.is-pending { opacity:.58!important;pointer-events:none!important; } /* Kill every trace of the old decision UI. */ #battleHud[data-battle-ui="2.9.9"] :is(.combat-reward-card,.combat-result-divider,.combat-decision-actions,#battleRewardBonus,#beginCapture,#finishBattle) { display:none!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-result-copy > b { color:#123744!important; text-shadow:0 3px 12px rgba(255,255,255,.9),0 6px 18px rgba(34,91,108,.14)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-result-copy > em, html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span > small { color:#52727d!important; text-shadow:0 1px 5px rgba(255,255,255,.85)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span > b { color:#173b47!important; text-shadow:0 1px 5px rgba(255,255,255,.9)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > strong { text-shadow:0 1px 5px rgba(255,255,255,.9)!important; } @media (max-width:700px) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"], #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { bottom:74px!important; width:calc(100% - 18px)!important; height:330px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-scene { grid-template-rows:auto minmax(0,1fr) 50px!important; gap:8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-outcome { grid-template-columns:64px auto!important; gap:9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-emblem, #battleHud[data-battle-ui="2.9.9"] .battle-result-emblem .combat-result-art { width:64px!important;height:64px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-copy > b { font-size:32px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-list { justify-content:flex-start!important;gap:10px!important;padding:0 12px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop { width:150px!important;min-width:150px!important;grid-template-columns:54px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop-art { width:52px!important;height:52px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop::before { width:48px;height:48px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-action { width:min(310px,92%)!important;height:50px!important; } } @media (max-height:650px) and (orientation:landscape) { #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"], #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { bottom:8px!important;height:250px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-emblem, #battleHud[data-battle-ui="2.9.9"] .battle-result-emblem .combat-result-art { width:58px!important;height:58px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-copy > b { font-size:30px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop { min-height:72px!important;grid-template-columns:50px minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) 20px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop-art { width:48px!important;height:48px!important; } } /* -------------------------------------------------------------------------- v2.9.9 battle application-window contract Combat is a background mode, not an owner of the application chrome. Navigation/chat/windows stay present and independently closable above it. -------------------------------------------------------------------------- */ body.is-battling #battleHud[data-battle-ui="2.9.9"].is-open { z-index:5000!important; pointer-events:none!important; } /* World chrome stays reachable. A minimized chat is a persistent control, not something combat is allowed to hide. */ body.is-battling :is( .world-topbar,#partyHud,#playerProfileButton,#playerStaminaHud,#questWidget, #worldMinimapShell,#desktopDock,#desktopUtilityRail,#desktopMoreMenu, .world-rail,.desktop-dock,.desktop-utility-rail,.mobile-dock ) { opacity:1!important; visibility:visible!important; pointer-events:auto!important; filter:none!important; z-index:5600!important; } body.is-battling #chatPanel.is-open, body.is-battling #chatPanel.is-minimized { opacity:1!important; visibility:visible!important; pointer-events:auto!important; filter:none!important; z-index:5700!important; } body.is-battling #sidePanel.is-open, body.is-battling #editorPanel.is-open { opacity:1!important; visibility:visible!important; pointer-events:auto!important; filter:none!important; z-index:5710!important; } body.is-battling :is(#sidePanel,#chatPanel,#editorPanel).is-window-front { z-index:5790!important; } body.is-battling #sidePanel.is-open > .panel-close, body.is-battling #chatPanel.is-open .chat-head-actions, body.is-battling #editorPanel.is-open .editor-head { pointer-events:auto!important; } body.is-battling #sidePanel.is-open > .panel-close { z-index:30!important; } /* Opening an application window must not move, fade or disable the battle. The window simply stacks above it. */ @supports selector(body:has(*)) { body.is-battling:has(.chat-panel.is-open:not(.is-minimized)) #battleHud[data-battle-ui="2.9.9"] .battle-shell, body.is-battling:has(.side-panel.is-open) #battleHud[data-battle-ui="2.9.9"] .battle-shell { left:50%!important; right:auto!important; width:var(--battle-modal-width)!important; opacity:1!important; pointer-events:auto!important; transform:translate(-50%,-50%)!important; } } /* On narrow screens the most recently focused application window can cover another one, but closing it reveals the previous window instead of deleting its state. */ @media (max-width:800px) { body.is-battling :is(#sidePanel,#chatPanel,#editorPanel).is-window-front { z-index:5795!important; } } /* -------------------------------------------------------------------------- v2.9.9 battle child-dialog + inventory read-only contract A world window may sit above combat; every transient dialog spawned by that window must sit above both the window and the pause overlay. Inventory stays inspectable during combat, but all item mutations are explicitly disabled. -------------------------------------------------------------------------- */ body.is-battling { --battle-layer:5000; --battle-world-ui-layer:5600; --battle-app-window-layer:5710; --battle-app-front-layer:5790; --battle-child-dialog-layer:5900; } /* The item dialog belongs to Inventory, not to the battle scene. It must never fall behind PAUSE or the combat command deck just because its DOM node lives earlier in the document. */ body.is-battling #inventoryItemDialog.is-open { z-index:var(--battle-child-dialog-layer)!important; display:grid!important; opacity:1!important; visibility:visible!important; pointer-events:none!important; isolation:isolate; } body.is-battling #inventoryItemDialog.is-open .inventory-item-dialog-v2738__content { z-index:2!important; pointer-events:auto!important; } body.is-battling #inventoryItemDialog.is-open .inventory-item-dialog-v2738__backdrop { z-index:1!important; background:transparent!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; pointer-events:none!important; } /* Browsing is allowed in combat; mutation is not. Keep cards/categories/search readable and clickable, while action controls communicate the lock clearly. */ .inventory-battle-readonly, .inventory-item-dialog-battle-lock { display:grid; grid-template-columns:28px minmax(0,1fr); gap:9px; align-items:center; border:1px solid color-mix(in srgb,#d59b32 34%,var(--theme-border)); background:color-mix(in srgb,#e7ac3c 7%,var(--theme-card)); color:var(--theme-text); } .inventory-battle-readonly { min-height:44px; padding:8px 10px; border-radius:12px; } .inventory-item-dialog-battle-lock { min-height:50px; padding:9px 10px; border-radius:12px; } .inventory-battle-readonly > .inventory-ui-icon, .inventory-item-dialog-battle-lock > .inventory-ui-icon { width:20px; height:20px; color:#c68c25; justify-self:center; } .inventory-battle-readonly b, .inventory-item-dialog-battle-lock b { display:block; font-size:8px; font-weight:850; } .inventory-battle-readonly small, .inventory-item-dialog-battle-lock small { display:block; margin-top:2px; color:var(--theme-muted); font-size:6.5px; line-height:1.35; font-weight:650; } .inventory-v2741.is-battle-readonly .inventory-v2741__summary { opacity:.58; } .inventory-item-dialog-v2741.is-battle-readonly .inventory-item-dialog-v2740__quantity :is(button,input), .inventory-item-dialog-v2741.is-battle-readonly .inventory-item-dialog-v2741__actions button { opacity:.42!important; cursor:not-allowed!important; transform:none!important; box-shadow:none!important; } .inventory-item-dialog-v2741.is-battle-readonly .inventory-item-dialog-v2741__actions button:is(:hover,:focus-visible), .inventory-item-dialog-v2741.is-battle-readonly .inventory-item-dialog-v2740__quantity button:is(:hover,:focus-visible) { transform:none!important; } html[data-game-theme="light"] .inventory-battle-readonly, html[data-game-theme="light"] .inventory-item-dialog-battle-lock { border-color:rgba(194,139,34,.28); background:rgba(218,164,58,.055); } html[data-game-theme="dark"] .inventory-battle-readonly, html[data-game-theme="dark"] .inventory-item-dialog-battle-lock { border-color:rgba(232,180,76,.27); background:rgba(232,180,76,.075); } @media (max-width:760px) { body.is-battling #inventoryItemDialog.is-open { padding:8px 8px calc(68px + env(safe-area-inset-bottom))!important; } .inventory-battle-readonly { grid-template-columns:24px minmax(0,1fr); min-height:40px; padding:7px 8px; } .inventory-battle-readonly small { font-size:6px; } } /* -------------------------------------------------------------------------- v2.9.9 battle pause menu contract Esc/P pause the PvE fight; pause is a real battle menu, not a tinted veil. No backdrop blur. Light/dark use the same semantic cockpit tokens. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay { padding:18px!important; background:color-mix(in srgb,var(--cockpit-shadow) 30%,transparent)!important; pointer-events:auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-menu { width:min(440px,calc(100% - 28px))!important; display:grid!important; gap:12px!important; padding:16px!important; border:1px solid var(--cockpit-line-strong)!important; border-radius:22px!important; background:linear-gradient(150deg,var(--cockpit-raised),var(--cockpit-surface))!important; box-shadow:inset 0 1px color-mix(in srgb,#fff 18%,transparent),0 22px 56px var(--cockpit-shadow)!important; color:var(--cockpit-text)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-menu > header { display:grid!important; grid-template-columns:60px minmax(0,1fr)!important; gap:13px!important; align-items:center!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-menu > header > :is(i,svg) { width:60px!important; height:60px!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; color:var(--battle-cyan)!important; box-shadow:none!important; filter:drop-shadow(0 7px 13px color-mix(in srgb,var(--cockpit-shadow) 70%,transparent))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-menu > header > span { display:grid!important; gap:2px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-menu > header small, #battleHud[data-battle-ui="2.9.9"] .battle-pause-mode small { color:var(--battle-cyan)!important; font-size:7px!important; font-weight:1000!important; letter-spacing:.11em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-menu > header b { color:var(--cockpit-text)!important; font-size:28px!important; line-height:1!important; letter-spacing:.025em!important; text-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-menu > header em { color:var(--cockpit-muted)!important; font-size:9px!important; line-height:1.35!important; font-style:normal!important; font-weight:700!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-mode { display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; gap:10px!important; align-items:center!important; padding:10px 11px!important; border:1px solid var(--cockpit-line)!important; border-radius:14px!important; background:var(--cockpit-chip)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-mode > span { display:grid!important; gap:2px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-mode > span > b { color:var(--cockpit-text)!important; font-size:10px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-mode nav { display:grid!important; grid-template-columns:1fr 1fr!important; gap:3px!important; padding:3px!important; border:1px solid var(--cockpit-line)!important; border-radius:11px!important; background:color-mix(in srgb,var(--cockpit-surface) 72%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-mode button { min-width:66px!important; min-height:31px!important; padding:0 9px!important; border:0!important; border-radius:8px!important; background:transparent!important; color:var(--cockpit-muted)!important; font-size:8px!important; font-weight:950!important; cursor:pointer!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-mode button.is-active { background:color-mix(in srgb,var(--battle-cyan) 16%,var(--cockpit-raised))!important; color:color-mix(in srgb,var(--battle-cyan) 76%,var(--cockpit-text) 24%)!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--battle-cyan) 35%,var(--cockpit-line))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-mode button:disabled { opacity:.42!important; cursor:not-allowed!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-actions { display:grid!important; grid-template-columns:1.35fr 1fr 1fr!important; gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-actions > button { min-width:0!important; min-height:58px!important; display:grid!important; grid-template-columns:28px minmax(0,1fr)!important; align-items:center!important; gap:7px!important; padding:8px!important; border:1px solid var(--cockpit-line)!important; border-radius:13px!important; background:linear-gradient(150deg,var(--cockpit-chip),var(--cockpit-surface))!important; color:var(--cockpit-text)!important; text-align:left!important; cursor:pointer!important; box-shadow:inset 0 1px color-mix(in srgb,#fff 10%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-actions > button:hover, #battleHud[data-battle-ui="2.9.9"] .battle-pause-actions > button:focus-visible { border-color:var(--cockpit-line-strong)!important; background:linear-gradient(150deg,color-mix(in srgb,var(--battle-cyan) 9%,var(--cockpit-chip)),var(--cockpit-surface))!important; outline:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-actions > button > :is(i,svg) { width:27px!important; height:27px!important; color:var(--battle-cyan)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-actions > button > span { display:grid!important; gap:2px!important; min-width:0!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-actions > button b { color:inherit!important; font-size:9px!important; line-height:1.05!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-actions > button small { color:var(--cockpit-muted)!important; font-size:6px!important; line-height:1.15!important; letter-spacing:.02em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-actions > .is-primary { border-color:color-mix(in srgb,var(--battle-cyan) 46%,var(--cockpit-line))!important; background:linear-gradient(150deg,color-mix(in srgb,var(--battle-cyan) 15%,var(--cockpit-raised)),var(--cockpit-chip))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-actions > .is-danger { border-color:color-mix(in srgb,var(--battle-red) 42%,var(--cockpit-line))!important; color:color-mix(in srgb,var(--battle-red) 74%,var(--cockpit-text) 26%)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-actions > .is-danger > :is(i,svg) { color:var(--battle-red)!important; } /* Surrender is a decision card, never an instant action and never a blur layer. */ #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm { z-index:90!important; background:color-mix(in srgb,var(--cockpit-shadow) 34%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm > article { border-color:color-mix(in srgb,var(--battle-red) 42%,var(--cockpit-line))!important; background:linear-gradient(150deg,var(--cockpit-raised),var(--cockpit-surface))!important; color:var(--cockpit-text)!important; box-shadow:inset 0 1px color-mix(in srgb,#fff 12%,transparent),0 22px 56px var(--cockpit-shadow)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm p { color:var(--cockpit-muted)!important; } #battleHud[data-battle-ui="2.9.9"] #keepBattling { border-color:color-mix(in srgb,var(--battle-cyan) 38%,var(--cockpit-line))!important; background:color-mix(in srgb,var(--battle-cyan) 10%,var(--cockpit-chip))!important; color:var(--cockpit-text)!important; } #battleHud[data-battle-ui="2.9.9"] #confirmSurrender { border-color:color-mix(in srgb,var(--battle-red) 48%,var(--cockpit-line))!important; background:color-mix(in srgb,var(--battle-red) 14%,var(--cockpit-chip))!important; color:color-mix(in srgb,var(--battle-red) 72%,var(--cockpit-text) 28%)!important; } @media (max-width:700px) { #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay { padding:8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-menu { width:min(430px,calc(100% - 10px))!important;padding:11px!important;gap:8px!important;border-radius:17px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-menu > header { grid-template-columns:44px minmax(0,1fr)!important;gap:9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-menu > header > :is(i,svg) { width:44px!important;height:44px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-menu > header b { font-size:22px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-mode { grid-template-columns:1fr!important;gap:6px!important;padding:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-actions { grid-template-columns:1fr!important;gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-actions > button { min-height:43px!important;grid-template-columns:23px minmax(0,1fr)!important;padding:6px 8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-actions > button > :is(i,svg) { width:22px!important;height:22px!important; } } /* Pause settings is a child of the pause menu and must render above it. */ #battleHud[data-battle-ui="2.9.9"].is-paused .battle-tactics.is-open { z-index:82!important; } /* -------------------------------------------------------------------------- v2.9.9 pause simplification Pause is only a state indicator. The existing bottom battle controls remain the only controls; the overlay must never capture CHAT/window clicks. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay { z-index:72!important; padding:0!important; color:var(--cockpit-text)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status { display:grid!important; justify-items:center!important; gap:8px!important; margin-top:-3vh!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > :is(i,svg) { width:72px!important; height:72px!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; color:var(--battle-cyan)!important; box-shadow:none!important; filter:drop-shadow(0 3px 2px color-mix(in srgb,var(--cockpit-shadow) 70%,transparent)) drop-shadow(0 10px 20px color-mix(in srgb,var(--cockpit-shadow) 45%,transparent))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > b { padding:0!important; color:var(--cockpit-text)!important; font-weight:1000!important; letter-spacing:.08em!important; text-transform:uppercase!important; text-shadow:0 2px 2px color-mix(in srgb,var(--cockpit-surface) 90%,transparent),0 5px 18px var(--cockpit-shadow)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > b { color:#15354a!important; text-shadow:0 1px 0 rgba(255,255,255,.95),0 4px 14px rgba(255,255,255,.85),0 6px 18px rgba(24,64,87,.18)!important; } html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > b { color:#eefbff!important; text-shadow:0 2px 3px rgba(0,0,0,.85),0 6px 20px rgba(0,0,0,.6)!important; } @media (max-width:700px) { #battleHud[data-battle-ui="2.9.9"] .battle-pause-status { gap:6px!important;margin-top:-1vh!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > :is(i,svg) { width:56px!important;height:56px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > b { font-size:26px!important; } } /* -------------------------------------------------------------------------- v2.9.9 instant pause feedback + optical pause alignment The pause state flips locally on the same frame; this block only fixes visual alignment and keeps the surrender confirmation stable while awaiting server. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] .battle-pause-status { gap:0!important; transform:translateY(4px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > :is(i,svg) { width:40px!important; height:40px!important; flex:0 0 40px!important; margin-right:-7px!important; transform:translateY(1px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > b { display:block!important; font-size:34px!important; line-height:.92!important; letter-spacing:.075em!important; } #battleHud[data-battle-ui="2.9.9"] #confirmSurrender[aria-busy="true"] { cursor:progress!important; opacity:.82!important; } #battleHud[data-battle-ui="2.9.9"] #keepBattling:disabled, #battleHud[data-battle-ui="2.9.9"] #confirmSurrender:disabled { pointer-events:none!important; } @media (max-width:700px) { #battleHud[data-battle-ui="2.9.9"] .battle-pause-status { gap:0!important;transform:translateY(2px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > :is(i,svg) { width:34px!important;height:34px!important;flex-basis:34px!important;margin-right:-6px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > b { font-size:27px!important; } } /* v2.9.9 active roster arrow + refreshed utility buttons The active Pokemon slot needs an explicit pointer because up to six identical portraits may exist. Utility buttons are restyled to the supplied pill look in both light and dark themes. */ #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:132px!important; padding:8px 0 0!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { align-content:start!important; gap:10px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, #battleHud[data-battle-ui="2.9.9"] #cancelBattle, #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button.is-active { min-height:50px!important; padding:0 14px!important; border-radius:15px!important; border:1px solid color-mix(in srgb,var(--battle-ui-accent) 28%,var(--battle-ui-border))!important; display:grid!important; align-items:center!important; justify-items:start!important; gap:10px!important; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(232,246,251,.97))!important; color:#1f89d7!important; box-shadow:0 9px 20px rgba(55,111,128,.14), inset 0 1px rgba(255,255,255,.96), inset 0 -1px rgba(79,171,207,.12)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > :is(i,svg), #battleHud[data-battle-ui="2.9.9"] #cancelBattle > :is(i,svg) { width:22px!important; height:22px!important; color:currentColor!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b, #battleHud[data-battle-ui="2.9.9"] #cancelBattle > b { font-size:11px!important; font-weight:900!important; letter-spacing:.03em!important; } #battleHud[data-battle-ui="2.9.9"] #battleTacticsToggle, #battleHud[data-battle-ui="2.9.9"] #pauseBattle, #battleHud[data-battle-ui="2.9.9"] #pauseBattle.is-active { border-color:rgba(71,166,215,.42)!important; background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(234,247,252,.98))!important; color:#2288d5!important; } #battleHud[data-battle-ui="2.9.9"] #battleTacticsToggle:is(:hover,:focus-visible), #battleHud[data-battle-ui="2.9.9"] #pauseBattle:is(:hover,:focus-visible), #battleHud[data-battle-ui="2.9.9"] #battleTacticsToggle[aria-expanded="true"] { transform:translateY(-1px)!important; border-color:rgba(48,155,214,.58)!important; background:linear-gradient(180deg,rgba(255,255,255,1),rgba(222,242,250,.99))!important; box-shadow:0 12px 22px rgba(39,102,121,.18), inset 0 1px rgba(255,255,255,.98), inset 0 -1px rgba(61,161,203,.14)!important; } #battleHud[data-battle-ui="2.9.9"] #cancelBattle { border-color:rgba(233,124,138,.55)!important; background:linear-gradient(180deg,rgba(255,249,249,.99),rgba(255,234,236,.98))!important; color:#ee535a!important; box-shadow:0 9px 20px rgba(158,74,82,.14), inset 0 1px rgba(255,255,255,.96), inset 0 -1px rgba(245,127,140,.13)!important; } #battleHud[data-battle-ui="2.9.9"] #cancelBattle:is(:hover,:focus-visible) { transform:translateY(-1px)!important; border-color:rgba(231,92,109,.66)!important; background:linear-gradient(180deg,rgba(255,253,253,1),rgba(255,226,230,.99))!important; box-shadow:0 12px 22px rgba(160,72,82,.18), inset 0 1px rgba(255,255,255,.97), inset 0 -1px rgba(240,107,123,.15)!important; } html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button.is-active, html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] #cancelBattle { box-shadow:0 10px 22px rgba(1,8,12,.28), inset 0 1px rgba(255,255,255,.06), inset 0 -1px rgba(255,255,255,.03)!important; } html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] #battleTacticsToggle, html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] #pauseBattle, html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] #pauseBattle.is-active { border-color:rgba(90,176,226,.34)!important; background:linear-gradient(180deg,rgba(28,47,61,.97),rgba(19,34,46,.98))!important; color:#76c7ff!important; } html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] #battleTacticsToggle:is(:hover,:focus-visible), html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] #pauseBattle:is(:hover,:focus-visible), html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] #battleTacticsToggle[aria-expanded="true"] { border-color:rgba(110,199,251,.52)!important; background:linear-gradient(180deg,rgba(35,58,75,.98),rgba(22,40,53,.99))!important; } html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] #cancelBattle { border-color:rgba(221,109,121,.42)!important; background:linear-gradient(180deg,rgba(59,34,40,.98),rgba(40,24,29,.99))!important; color:#ff808a!important; } html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] #cancelBattle:is(:hover,:focus-visible) { border-color:rgba(238,127,140,.58)!important; background:linear-gradient(180deg,rgba(69,39,46,.99),rgba(46,27,33,1))!important; } .battle-stage .battle-roster-slot > .battle-roster-active-arrow { position:absolute!important; z-index:5!important; left:-15px!important; top:50%!important; width:18px!important; height:18px!important; display:grid!important; place-items:center!important; color:#39b7ff!important; opacity:0!important; transform:translate(-2px,-50%) scale(.85)!important; filter:drop-shadow(0 2px 4px rgba(30,132,193,.24)); transition:opacity .14s ease,transform .14s ease,color .14s ease!important; pointer-events:none!important; } .battle-stage .battle-roster-slot > .battle-roster-active-arrow svg { width:100%!important; height:100%!important; display:block!important; } html[data-game-theme="light"] .battle-stage .battle-roster-slot > .battle-roster-active-arrow { color:#35aefa!important; } html[data-game-theme="dark"] .battle-stage .battle-roster-slot > .battle-roster-active-arrow { color:#7bd8ff!important; filter:drop-shadow(0 3px 7px rgba(29,131,179,.38)); } .battle-stage .battle-roster-slot.is-active > .battle-roster-active-arrow { opacity:1!important; transform:translate(0,-50%) scale(1)!important; } @media (max-width: 900px) { #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:120px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { gap:8px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, #battleHud[data-battle-ui="2.9.9"] #cancelBattle, #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button.is-active { min-height:46px!important; padding:0 12px!important; border-radius:14px!important; grid-template-columns:20px minmax(0,1fr)!important; gap:8px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > :is(i,svg), #battleHud[data-battle-ui="2.9.9"] #cancelBattle > :is(i,svg) { width:20px!important;height:20px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b, #battleHud[data-battle-ui="2.9.9"] #cancelBattle > b { font-size:10px!important; } .battle-stage .battle-roster-slot > .battle-roster-active-arrow { left:-13px!important;width:16px!important;height:16px!important; } } /* v2.9.9 pause polish + utility button containment The first pill-button pass overshot the available utility rail width and the pause badge icon looked too small/high. This pass keeps the buttons inside the battle frame and makes the pause mark read as one clean centered lockup. */ #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(364px,1fr) 154px 122px!important; align-items:end!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:122px!important; min-width:122px!important; max-width:122px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { gap:8px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, #battleHud[data-battle-ui="2.9.9"] #cancelBattle, #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button.is-active { width:100%!important; max-width:100%!important; box-sizing:border-box!important; min-height:44px!important; padding:0 12px!important; border-radius:14px!important; grid-template-columns:22px minmax(0,1fr)!important; gap:8px!important; overflow:hidden!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b, #battleHud[data-battle-ui="2.9.9"] #cancelBattle > b { text-overflow:ellipsis!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status { display:flex!important; gap:10px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > :is(i,svg) { width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; display:grid!important; place-items:center!important; transform:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > b { font-size:48px!important; line-height:1!important; letter-spacing:.01em!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > :is(i,svg) { color:#169ce6!important; } html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > :is(i,svg) { color:#5fc9ff!important; } @media (max-width: 900px) { #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(0,1fr) 146px 114px!important; gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:114px!important; min-width:114px!important; max-width:114px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, #battleHud[data-battle-ui="2.9.9"] #cancelBattle, #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button.is-active { min-height:42px!important; padding:0 10px!important; border-radius:13px!important; grid-template-columns:20px minmax(0,1fr)!important; gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > :is(i,svg), #battleHud[data-battle-ui="2.9.9"] #cancelBattle > :is(i,svg) { width:19px!important; height:19px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b, #battleHud[data-battle-ui="2.9.9"] #cancelBattle > b { font-size:9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status { gap:8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > :is(i,svg) { width:38px!important; height:38px!important; min-width:38px!important; min-height:38px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > b { font-size:38px!important; } } /* pk-style-source:31 */ /* /battle-v299-final.css */ /* PokePark Online v2.9.9 — FINAL BATTLE UI CONTRACT -------------------------------------------------------------------------- This file is intentionally loaded after styles.css and battle-v299.css. Legacy battle CSS still owns historical component detail and animations; this layer is the single source of truth for final geometry, typography, theme surfaces, pause composition and responsive containment. */ #battleHud[data-battle-ui="2.9.9"] { --bui-font:"Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif; --bui-micro:9px; --bui-xs:10px; --bui-sm:11px; --bui-md:12px; --bui-body:13px; --bui-name:18px; --bui-title:28px; --bui-pause:50px; --bui-accent:#35b8ef; --bui-accent-strong:#168dcc; --bui-good:#54cf8b; --bui-danger:#ef5b63; --bui-warning:#e3b54f; --bui-text:#f3f9fc; --bui-muted:#9fb7c3; --bui-surface:#102a38; --bui-surface-raised:#173746; --bui-surface-soft:#1b3e4d; --bui-card:#15323f; --bui-line:rgba(123,205,231,.27); --bui-line-strong:rgba(111,213,244,.55); --bui-track:rgba(146,202,220,.16); --bui-shadow:rgba(0,14,22,.34); --bui-shell-w:min(1080px,calc(100vw - 56px)); --bui-shell-h:min(680px,calc(100dvh - 88px)); --bui-command-w:min(820px,calc(100% - 132px)); --bui-command-h:196px; --bui-command-bottom:14px; /* Keep high-specificity legacy window rules on the same final geometry. */ --battle-modal-width:var(--bui-shell-w); --battle-modal-height:var(--bui-shell-h); font-family:var(--bui-font)!important; font-size:var(--bui-body)!important; font-variant-numeric:tabular-nums; } /* ========================================================================== V36.2 — narrow visual repair over the verified v36.1 battle layout. No combat geometry, bindings or mechanics are owned by this layer. ========================================================================== */ /* Fighter cards: replace the solid side rails with quiet team tinting and a low-contrast Poké Ball watermark. Status rows remain outside on mobile. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] #battleHealth > article { isolation:isolate!important; border-color:color-mix(in srgb,var(--fighter-accent,#49b7c9) 34%,#cfe2e8)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] #battleHealth > .ally-health { --fighter-accent:#38aa92; background:linear-gradient(145deg,rgba(226,249,244,.99),rgba(250,253,254,.99) 38%,rgba(241,249,251,.98))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] #battleHealth > .enemy-health { --fighter-accent:#e46f66; background:linear-gradient(215deg,rgba(255,234,231,.99),rgba(251,253,254,.99) 38%,rgba(247,249,250,.98))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] #battleHealth > article::before { content:""!important; position:absolute!important; z-index:0!important; inset:0!important; width:auto!important; height:auto!important; display:block!important; border:0!important; border-radius:inherit!important; background:linear-gradient(112deg,color-mix(in srgb,var(--fighter-accent) 11%,transparent),transparent 45%)!important; box-shadow:none!important; opacity:1!important; pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] #battleHealth > article::after { content:""!important; position:absolute!important; z-index:0!important; inset:0!important; display:block!important; border-radius:inherit!important; background:var(--fighter-accent)!important; -webkit-mask:url('/assets/v3.0/combat/fighter-card-pokeball-pattern.svg') left -26px center / 150px 100px no-repeat!important; mask:url('/assets/v3.0/combat/fighter-card-pokeball-pattern.svg') left -26px center / 150px 100px no-repeat!important; opacity:.065!important; pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] #battleHealth > .enemy-health::after { -webkit-mask-position:right -26px center!important; mask-position:right -26px center!important; transform:scaleX(-1)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] #battleHealth > article > * { z-index:1!important; } /* Skill artwork and cooldowns are independently clipped to their circular face. Hover uses light/color only, so no texture or overlay can leave it. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-action-button .combat-skill-art { overflow:hidden!important; border-radius:50%!important; clip-path:circle(50% at 50% 50%)!important; contain:paint!important; isolation:isolate!important; transform:none!important; background-clip:padding-box!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-action-button .combat-skill-art :is(img,svg), html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-action-button .combat-skill-art::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-action-button .combat-skill-art::after { border-radius:50%!important; clip-path:circle(50% at 50% 50%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-action-button .combat-skill-art > img { width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-action-button:is(:hover,:focus-visible), html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-action-button.is-previewed { transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-action-button:is(:hover,:focus-visible) .combat-skill-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-action-button.is-previewed .combat-skill-art { transform:none!important; filter:brightness(1.055) saturate(1.035)!important; box-shadow:inset 0 0 0 3px rgba(1,18,28,.7),0 0 0 3px color-mix(in srgb,var(--combat-ring) 86%,#fff),0 7px 17px var(--cockpit-shadow),0 0 18px color-mix(in srgb,var(--combat-ring) 22%,transparent)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-action-button > .combat-cooldown { top:2px!important; left:50%!important; width:var(--combat-size)!important; height:var(--combat-size)!important; overflow:hidden!important; border-radius:50%!important; clip-path:circle(50% at 50% 50%)!important; contain:paint!important; transform:translateX(-50%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-action-button.is-cooling { opacity:1!important; filter:saturate(.97) brightness(.98)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-action-button.is-cooling > .combat-cooldown { background:conic-gradient(from 0deg,rgba(3,17,26,.38) var(--cooldown-sweep,0deg),rgba(9,37,48,.045) 0)!important; box-shadow:inset 0 0 0 2px rgba(2,22,31,.48),0 0 0 2px color-mix(in srgb,var(--combat-ring) 46%,rgba(5,32,42,.44))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-skill-preview.battle-tooltip { max-width:calc(100% - 16px)!important; overflow:hidden!important; border-radius:13px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-skill-preview.battle-tooltip::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-skill-preview.battle-tooltip::after { content:none!important; display:none!important; } /* Energy endpoint: only the lightning glyph remains—no second dot, glow or generated cap. This applies to the live and capture command deck. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-energy-current { display:none!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] { --bui-accent:#2299dc; --bui-accent-strong:#087fc0; --bui-good:#38b977; --bui-danger:#ea535b; --bui-warning:#ce9630; --bui-text:#173d51; --bui-muted:#6a8796; --bui-surface:#f4fbfd; --bui-surface-raised:#ffffff; --bui-surface-soft:#e8f5f9; --bui-card:#f5fbfd; --bui-line:rgba(52,136,170,.23); --bui-line-strong:rgba(31,150,199,.48); --bui-track:rgba(47,124,155,.12); --bui-shadow:rgba(32,75,93,.16); } /* One font family and a constrained hierarchy for every battle component. */ #battleHud[data-battle-ui="2.9.9"] .battle-shell, #battleHud[data-battle-ui="2.9.9"] .battle-shell *, #battleHud[data-battle-ui="2.9.9"] .battle-shell button, #battleHud[data-battle-ui="2.9.9"] .battle-shell input, #battleHud[data-battle-ui="2.9.9"] .battle-shell select, #battleHud[data-battle-ui="2.9.9"] .battle-shell textarea { font-family:var(--bui-font)!important; text-rendering:optimizeLegibility; } #battleHud[data-battle-ui="2.9.9"] .battle-shell small, #battleHud[data-battle-ui="2.9.9"] .battle-shell kbd, #battleHud[data-battle-ui="2.9.9"] .battle-shell .combat-skill-tag b { font-size:var(--bui-micro)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-shell button { font-size:var(--bui-md)!important; font-weight:800!important; } /* -------------------------------------------------------------------------- Shell / stage -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] .battle-shell { left:50%!important; right:auto!important; top:50%!important; bottom:auto!important; width:var(--bui-shell-w)!important; height:var(--bui-shell-h)!important; min-width:min(720px,calc(100vw - 12px))!important; min-height:min(500px,calc(100dvh - 12px))!important; transform:translate(-50%,-50%)!important; overflow:hidden!important; border:1px solid var(--bui-line-strong)!important; border-radius:24px!important; background:transparent!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--bui-accent) 13%,transparent),0 24px 62px var(--bui-shadow)!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stage, #battleHud[data-battle-ui="2.9.9"] .battle-stage::before, #battleHud[data-battle-ui="2.9.9"] .battle-stage::after { filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-stage::before { background:linear-gradient(180deg,rgba(6,33,45,.08),transparent 24% 72%,rgba(5,29,40,.12))!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-stage::before { background:linear-gradient(180deg,rgba(218,243,251,.025),transparent 24% 72%,rgba(25,93,119,.035))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-world-backdrop, #battleHud[data-battle-ui="2.9.9"] .battle-world-backdrop > i { display:none!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } /* -------------------------------------------------------------------------- Fighter cards / VS card -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] .battle-health > article { top:14px!important; width:318px!important; min-height:146px!important; padding:10px 12px!important; border:1px solid var(--bui-line)!important; border-radius:18px!important; background:linear-gradient(155deg,var(--bui-surface-raised),var(--bui-surface))!important; color:var(--bui-text)!important; box-shadow:0 10px 24px var(--bui-shadow),inset 0 1px rgba(255,255,255,.12)!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .ally-health { left:14px!important;right:auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .enemy-health { right:14px!important;left:auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > b { color:var(--bui-text)!important; font-size:var(--bui-name)!important; font-weight:850!important; line-height:1.05!important; letter-spacing:0!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > em, #battleHud[data-battle-ui="2.9.9"] .battle-health > article > .battle-vital > span :is(b,strong,small), #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area, #battleHud[data-battle-ui="2.9.9"] .battle-exp > span { font-size:var(--bui-xs)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { border-color:var(--bui-line)!important; background:var(--bui-surface-soft)!important; color:var(--bui-text)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card { top:18px!important; left:50%!important; right:auto!important; width:230px!important; min-height:92px!important; padding:10px 12px!important; transform:translateX(-50%)!important; border:1px solid var(--bui-line)!important; border-radius:17px!important; background:linear-gradient(155deg,var(--bui-surface-raised),var(--bui-surface))!important; color:var(--bui-text)!important; box-shadow:0 10px 24px var(--bui-shadow),inset 0 1px rgba(255,255,255,.12)!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > strong { color:var(--bui-text)!important; font-size:15px!important; font-weight:850!important; line-height:1.15!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > small, #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > em { font-size:var(--bui-micro)!important; } /* -------------------------------------------------------------------------- Six-slot roster + active arrow -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel { z-index:30!important; left:20px!important; right:auto!important; top:186px!important; bottom:214px!important; width:49px!important; height:auto!important; min-height:0!important; padding:5px!important; display:grid!important; grid-template-rows:18px minmax(0,1fr)!important; gap:4px!important; transform:none!important; overflow:visible!important; border:1px solid var(--bui-line)!important; border-radius:16px!important; background:linear-gradient(155deg,var(--bui-surface-raised),var(--bui-surface))!important; box-shadow:0 9px 22px var(--bui-shadow),inset 0 1px rgba(255,255,255,.1)!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel > header { height:18px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel > header span, #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel > p { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel > header em { max-width:40px!important; font-size:var(--bui-micro)!important; font-weight:800!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster { width:37px!important; height:auto!important; min-height:0!important; display:grid!important; grid-template-columns:37px!important; grid-template-rows:repeat(6,37px)!important; align-content:start!important; gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { position:relative!important; width:37px!important; height:37px!important; min-width:37px!important; min-height:37px!important; padding:2px!important; overflow:visible!important; border:1px solid var(--bui-line)!important; border-radius:50%!important; background:var(--bui-card)!important; box-shadow:inset 0 1px rgba(255,255,255,.13)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait, #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-empty > .battle-roster-empty { width:31px!important; height:31px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-active { border-color:var(--bui-good)!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--bui-good) 25%,transparent),inset 0 1px rgba(255,255,255,.16)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > .battle-roster-active-arrow { left:-16px!important; top:50%!important; width:18px!important; height:18px!important; color:var(--bui-accent)!important; opacity:0!important; transform:translate(-2px,-50%) scale(.86)!important; filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-active > .battle-roster-active-arrow { opacity:1!important; transform:translate(0,-50%) scale(1)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-active-arrow > svg { width:100%!important; height:100%!important; } /* Roster slots are self-contained circles; portraits never inherit legacy offsets. */ #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { display:grid!important; place-items:center!important; line-height:0!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait, #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-empty > .battle-roster-empty { position:relative!important; inset:auto!important; margin:0!important; padding:0!important; display:grid!important; place-items:center!important; overflow:hidden!important; border-radius:50%!important; transform:none!important; line-height:0!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait > img, #battleHud[data-battle-ui="2.9.9"] .battle-roster-empty > img { position:static!important; inset:auto!important; width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:0!important; padding:0!important; display:block!important; object-fit:contain!important; object-position:50% 50%!important; transform:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > kbd { left:auto!important; right:-4px!important; top:-4px!important; margin:0!important; line-height:1!important; } /* -------------------------------------------------------------------------- Bottom command panel: one fixed grid, nothing may escape it. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { z-index:40!important; left:50%!important; right:auto!important; top:auto!important; bottom:var(--bui-command-bottom)!important; width:var(--bui-command-w)!important; height:var(--bui-command-h)!important; min-width:0!important; min-height:0!important; padding:9px 10px 7px!important; transform:translateX(-50%)!important; overflow:visible!important; border:1px solid var(--bui-line)!important; border-radius:20px!important; background:linear-gradient(155deg,var(--bui-surface-raised),var(--bui-surface))!important; box-shadow:0 9px 20px color-mix(in srgb,var(--bui-shadow) 68%,transparent),inset 0 1px rgba(255,255,255,.1)!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-live-controls { width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; display:grid!important; grid-template-rows:minmax(0,1fr) 28px!important; gap:6px!important; overflow:visible!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { min-width:0!important; min-height:0!important; display:grid!important; grid-template-columns:minmax(380px,1fr) 164px 118px!important; grid-template-rows:minmax(0,1fr)!important; align-items:stretch!important; gap:8px!important; overflow:visible!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel,.combat-utility-panel) { min-width:0!important; min-height:0!important; overflow:visible!important; border:0!important; background:transparent!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) { padding:0!important; display:grid!important; grid-template-rows:18px minmax(0,1fr)!important; gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { padding-left:8px!important; border-left:1px solid var(--bui-line)!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) > header { height:18px!important; padding:0 3px!important; display:flex!important; align-items:center!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) > header b { color:var(--bui-muted)!important; font-size:var(--bui-micro)!important; font-weight:800!important; letter-spacing:.08em!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; grid-template-rows:minmax(0,1fr)!important; align-items:stretch!important; justify-content:stretch!important; gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:72px; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; padding:2px 3px 29px!important; overflow:visible!important; box-shadow:none!important; filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { overflow:hidden!important; border-radius:50%!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:var(--combat-size)!important; height:var(--combat-size)!important; max-width:100%!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { font-size:var(--bui-xs)!important; font-weight:800!important; line-height:1.05!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button > kbd, #battleHud[data-battle-ui="2.9.9"] .combat-item-button > kbd { font-size:var(--bui-micro)!important; font-weight:800!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; padding:3px 4px!important; box-sizing:border-box!important; overflow:visible!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-template-rows:repeat(2,minmax(0,1fr))!important; align-items:center!important; justify-items:center!important; gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { --combat-size:45px; width:48px!important; height:50px!important; min-width:48px!important; min-height:50px!important; padding:2px!important; overflow:visible!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child, #battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown { width:45px!important; height:45px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { height:28px!important; min-height:28px!important; padding:2px 8px!important; overflow:hidden!important; border:0!important; border-radius:11px!important; background:var(--bui-surface-soft)!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy { grid-template-columns:112px minmax(0,1fr)!important; gap:8px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy :is(small,b) { font-size:var(--bui-xs)!important; } /* Item wells: badges may overflow, only the circular art/cooldown mask clips. */ #battleHud[data-battle-ui="2.9.9"] .combat-items-panel, #battleHud[data-battle-ui="2.9.9"] .combat-item-grid, #battleHud[data-battle-ui="2.9.9"] .combat-item-button { overflow:visible!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { border:0!important; background:transparent!important; box-shadow:none!important; filter:none!important; transform:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button::before, #battleHud[data-battle-ui="2.9.9"] .combat-item-button::after { content:none!important; display:none!important; box-shadow:none!important; filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child { overflow:hidden!important; border:1px solid var(--bui-line)!important; border-radius:50%!important; background:radial-gradient(circle at 38% 30%,var(--bui-surface-raised),var(--bui-surface-soft))!important; box-shadow:inset 0 1px rgba(255,255,255,.22),0 2px 5px color-mix(in srgb,var(--bui-shadow) 42%,transparent)!important; transform:none!important; filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button:is(:hover,:focus-visible) > span:first-child, #battleHud[data-battle-ui="2.9.9"] .combat-item-button.is-ready > span:first-child { border-color:color-mix(in srgb,var(--bui-accent) 55%,var(--bui-line))!important; box-shadow:inset 0 1px rgba(255,255,255,.24),0 2px 6px color-mix(in srgb,var(--bui-shadow) 46%,transparent)!important; transform:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-painted, #battleHud[data-battle-ui="2.9.9"] svg.combat-item-art { filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown { overflow:hidden!important; border-radius:50%!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bui-line) 65%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > kbd { left:-2px!important; top:-2px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > b { right:-2px!important; bottom:-2px!important; box-shadow:none!important; } /* -------------------------------------------------------------------------- Utility actions: compact, contained, no floating shadow. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:118px!important; min-width:118px!important; max-width:118px!important; height:auto!important; padding:0!important; align-self:end!important; overflow:visible!important; border:0!important; background:transparent!important; box-shadow:none!important; filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { width:100%!important; height:auto!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:repeat(3,31px)!important; align-content:end!important; gap:4px!important; overflow:visible!important; background:transparent!important; box-shadow:none!important; filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button.is-active, #battleHud[data-battle-ui="2.9.9"] #cancelBattle { width:100%!important; min-width:0!important; max-width:100%!important; height:31px!important; min-height:31px!important; margin:0!important; padding:0 8px!important; box-sizing:border-box!important; display:grid!important; grid-template-columns:16px minmax(0,1fr)!important; align-items:center!important; justify-items:start!important; gap:6px!important; overflow:hidden!important; border:1px solid rgba(61,161,208,.34)!important; border-radius:11px!important; background:linear-gradient(180deg,#fff,#edf7fa)!important; color:#228bd3!important; box-shadow:none!important; filter:none!important; transform:none!important; transition:border-color .14s ease,background .14s ease,color .14s ease!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button::before, #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button::after { box-shadow:none!important; filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > :is(svg,i) { width:16px!important; height:16px!important; min-width:16px!important; min-height:16px!important; margin:0!important; display:grid!important; place-items:center!important; color:currentColor!important; filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > i > svg, #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > svg { width:100%!important; height:100%!important; display:block!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b, #battleHud[data-battle-ui="2.9.9"] #cancelBattle > b { min-width:0!important; overflow:hidden!important; color:currentColor!important; font-size:var(--bui-micro)!important; font-weight:800!important; line-height:1!important; letter-spacing:.01em!important; text-overflow:clip!important; white-space:nowrap!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button:is(:hover,:focus-visible), #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button.is-active { border-color:rgba(45,151,205,.56)!important; background:linear-gradient(180deg,#fff,#e3f3f8)!important; box-shadow:none!important; filter:none!important; transform:none!important; } #battleHud[data-battle-ui="2.9.9"] #cancelBattle { border-color:rgba(229,103,115,.45)!important; background:linear-gradient(180deg,#fffafa,#fcedef)!important; color:var(--bui-danger)!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"] #cancelBattle:is(:hover,:focus-visible) { border-color:rgba(226,83,99,.62)!important; background:linear-gradient(180deg,#fffdfd,#fae2e5)!important; box-shadow:none!important; } html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button.is-active { border-color:rgba(86,180,224,.31)!important; background:linear-gradient(180deg,#203d4c,#18313e)!important; color:#73caff!important; box-shadow:none!important; } html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button:is(:hover,:focus-visible), html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button.is-active { border-color:rgba(105,201,245,.49)!important; background:linear-gradient(180deg,#284959,#1d3947)!important; } html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] #cancelBattle { border-color:rgba(213,102,116,.37)!important; background:linear-gradient(180deg,#452b32,#352229)!important; color:#ff818b!important; } html[data-game-theme="dark"] #battleHud[data-battle-ui="2.9.9"] #cancelBattle:is(:hover,:focus-visible) { border-color:rgba(232,123,136,.53)!important; background:linear-gradient(180deg,#52323a,#3d272d)!important; } /* -------------------------------------------------------------------------- Pause = status only. Direct SVG, no card, no blur, no pointer capture. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay { z-index:55!important; position:absolute!important; inset:0!important; display:grid!important; place-items:center!important; padding:0 0 var(--bui-command-h)!important; background:transparent!important; color:var(--bui-text)!important; pointer-events:none!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay[aria-hidden="true"] { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status { display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:13px!important; margin:0!important; padding:0!important; transform:none!important; border:0!important; background:transparent!important; box-shadow:none!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-glyph { width:42px!important; height:52px!important; min-width:42px!important; min-height:52px!important; display:block!important; overflow:visible!important; color:var(--bui-accent)!important; filter:drop-shadow(0 4px 9px color-mix(in srgb,var(--bui-accent) 20%,transparent))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > b { margin:0!important; color:var(--bui-text)!important; font-family:var(--bui-font)!important; font-size:var(--bui-pause)!important; font-weight:850!important; line-height:.94!important; letter-spacing:.035em!important; text-shadow:0 3px 12px var(--bui-shadow)!important; } html[data-game-theme="light"] #battleHud[data-battle-ui="2.9.9"] .battle-pause-status > b { color:#173d51!important; text-shadow:0 2px 7px rgba(255,255,255,.9),0 4px 12px rgba(42,91,109,.12)!important; } /* -------------------------------------------------------------------------- Tactics and surrender confirmation -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] .battle-tactics { z-index:60!important; right:14px!important; left:auto!important; top:auto!important; bottom:calc(var(--bui-command-bottom) + var(--bui-command-h) + 10px)!important; width:306px!important; max-height:min(390px,calc(100% - var(--bui-command-h) - var(--bui-command-bottom) - 34px))!important; overflow:auto!important; overscroll-behavior:contain; scrollbar-width:thin; border:1px solid var(--bui-line)!important; border-radius:17px!important; background:linear-gradient(155deg,var(--bui-surface-raised),var(--bui-surface))!important; color:var(--bui-text)!important; box-shadow:0 14px 30px var(--bui-shadow),inset 0 1px rgba(255,255,255,.1)!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics :is(b,small,footer,label) { font-family:var(--bui-font)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header b { font-size:14px!important;font-weight:850!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header small, #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes small, #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules small, #battleHud[data-battle-ui="2.9.9"] .battle-tactics > footer { font-size:var(--bui-micro)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes b, #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules b { font-size:var(--bui-xs)!important;font-weight:800!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button { min-height:72px!important; padding:7px 8px!important; grid-template-rows:34px auto!important; gap:4px!important; border-radius:12px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button > i, #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button > i > * { width:34px!important; height:34px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-manual-note { margin:2px 0 0!important; padding:10px 11px!important; border:1px solid var(--bui-line)!important; border-radius:11px!important; background:var(--bui-surface-soft)!important; color:var(--bui-muted)!important; font-size:var(--bui-xs)!important; font-weight:650!important; line-height:1.4!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-manual-note[hidden], #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules[hidden], #battleHud[data-battle-ui="2.9.9"] .battle-tactics[data-mode="manual"] .battle-tactic-rules, #battleHud[data-battle-ui="2.9.9"] .battle-tactics[data-mode="smart"] .battle-tactic-manual-note { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules { gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules-head { min-height:32px!important; padding:4px 2px!important; display:grid!important; gap:1px!important; border:0!important; background:transparent!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules-head small { color:var(--bui-accent)!important; font-size:var(--bui-micro)!important; font-weight:800!important; letter-spacing:.08em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules-head b { color:var(--bui-text)!important; font-size:var(--bui-sm)!important; font-weight:800!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules label { min-height:42px!important; padding:6px 8px!important; grid-template-columns:34px minmax(0,1fr)!important; gap:8px!important; border-color:var(--bui-line)!important; background:var(--bui-card)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules input { width:32px!important; height:19px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules input::after { left:2px!important; top:2px!important; width:13px!important; height:13px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules input:checked::after { transform:translateX(13px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm { z-index:70!important; background:transparent!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm > article { width:min(380px,calc(100% - 32px))!important; padding:16px!important; border:1px solid color-mix(in srgb,var(--bui-danger) 42%,var(--bui-line))!important; border-radius:18px!important; background:linear-gradient(155deg,var(--bui-surface-raised),var(--bui-surface))!important; color:var(--bui-text)!important; box-shadow:0 16px 38px var(--bui-shadow),inset 0 1px rgba(255,255,255,.1)!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm b { font-size:18px!important;font-weight:850!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm p { font-size:var(--bui-sm)!important;line-height:1.45!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm footer button { min-height:42px!important;font-size:var(--bui-sm)!important; } /* -------------------------------------------------------------------------- Result / rewards typography and containment -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"], #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { left:50%!important; right:auto!important; bottom:var(--bui-command-bottom)!important; width:min(760px,calc(100% - 104px))!important; height:min(340px,calc(100% - 188px))!important; min-height:250px!important; transform:translateX(-50%)!important; overflow:hidden!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-copy > b, #battleHud[data-battle-ui="2.9.9"] .combat-reward-card > header b { font-family:var(--bui-font)!important; font-size:32px!important; font-weight:850!important; line-height:1!important; letter-spacing:.025em!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-copy :is(small,em), #battleHud[data-battle-ui="2.9.9"] .combat-reward-item :is(small,strong), #battleHud[data-battle-ui="2.9.9"] .battle-result-action small { font-size:var(--bui-xs)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-reward-item b, #battleHud[data-battle-ui="2.9.9"] .battle-result-action b { font-size:var(--bui-md)!important; font-weight:850!important; } /* -------------------------------------------------------------------------- Secondary battle chrome: skill preview, co-op strips and capture feedback. These were still inheriting legacy 7px type, dark-only surfaces and blur. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] .battle-tooltip-layer { position:absolute!important; z-index:68!important; inset:0!important; overflow:visible!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip { position:absolute!important; z-index:1!important; left:0!important; top:0!important; bottom:auto!important; width:min(280px,calc(100% - 20px))!important; min-height:72px!important; max-height:150px!important; padding:9px 10px!important; display:grid!important; grid-template-columns:48px minmax(0,1fr)!important; align-items:center!important; gap:9px!important; overflow:hidden!important; transform:translate3d(var(--battle-tooltip-x,10px),var(--battle-tooltip-y,10px),0)!important; border:1px solid var(--bui-line-strong)!important; border-radius:12px!important; background:linear-gradient(155deg,var(--bui-surface-raised),var(--bui-surface))!important; color:var(--bui-text)!important; box-shadow:0 8px 18px color-mix(in srgb,var(--bui-shadow) 72%,transparent)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; transition:opacity .12s ease!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip.is-open { opacity:1!important; visibility:visible!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip[aria-hidden="true"] { display:grid!important; opacity:0!important; visibility:hidden!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip > span { width:48px!important; height:48px!important; display:grid!important; place-items:center!important; overflow:hidden!important; border:1px solid var(--bui-line)!important; border-radius:11px!important; background:var(--bui-surface-soft)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip :is(.combat-preview-art,.combat-preview-item-art) { width:44px!important; height:44px!important; max-width:44px!important; max-height:44px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip small { color:var(--bui-accent)!important; font-size:var(--bui-micro)!important; font-weight:800!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip b { color:var(--bui-text)!important; font-size:var(--bui-md)!important; font-weight:850!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip p, #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip em { color:var(--bui-muted)!important; font-size:var(--bui-micro)!important; line-height:1.3!important; } #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip p { margin:2px 0!important; white-space:normal!important; display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; } #battleHud[data-battle-ui="2.9.9"] :is(.battle-team-member,.battle-target-strip > button) { border-color:var(--bui-line)!important; background:linear-gradient(155deg,var(--bui-surface-raised),var(--bui-surface))!important; color:var(--bui-text)!important; box-shadow:0 8px 18px var(--bui-shadow)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] :is(.battle-team-member,.battle-target-strip > button) small { color:var(--bui-muted)!important; font-size:var(--bui-micro)!important; } #battleHud[data-battle-ui="2.9.9"] :is(.battle-team-member,.battle-target-strip > button) b { color:var(--bui-text)!important; font-size:var(--bui-xs)!important; font-weight:800!important; } #battleHud[data-battle-ui="2.9.9"] .battle-target-strip > button.is-selected { border-color:var(--bui-accent)!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--bui-accent) 18%,transparent),0 8px 18px var(--bui-shadow)!important; } #battleHud[data-battle-ui="2.9.9"] :is(.capture-feedback,.capture-gesture-hint) { border:1px solid var(--bui-line)!important; background:color-mix(in srgb,var(--bui-surface-raised) 94%,transparent)!important; color:var(--bui-text)!important; box-shadow:0 8px 18px var(--bui-shadow)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .capture-feedback small, #battleHud[data-battle-ui="2.9.9"] .capture-gesture-hint small { color:var(--bui-muted)!important; font-size:var(--bui-micro)!important; } #battleHud[data-battle-ui="2.9.9"] .capture-feedback b, #battleHud[data-battle-ui="2.9.9"] .capture-gesture-hint b { color:var(--bui-text)!important; font-size:var(--bui-sm)!important; font-weight:800!important; } /* AI-only rows keep a consistent 3-column layout in both themes. */ #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules label.is-ai-rule { grid-template-columns:32px 24px minmax(0,1fr)!important; border-color:color-mix(in srgb,var(--bui-good) 30%,var(--bui-line))!important; background:color-mix(in srgb,var(--bui-good) 7%,var(--bui-card))!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules label.is-ai-rule > i, #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules label.is-ai-rule > i > svg { width:21px!important; height:21px!important; color:var(--bui-good)!important; } /* The surrender card must remain usable even on a short landscape viewport. */ #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm > article { max-height:calc(100% - 24px)!important; overflow:auto!important; overscroll-behavior:contain; } /* -------------------------------------------------------------------------- No blur on battle UI surfaces. This is intentional. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"], #battleHud[data-battle-ui="2.9.9"]::before, #battleHud[data-battle-ui="2.9.9"]::after, #battleHud[data-battle-ui="2.9.9"] *, #battleHud[data-battle-ui="2.9.9"] *::before, #battleHud[data-battle-ui="2.9.9"] *::after { -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } /* -------------------------------------------------------------------------- Compact desktop / landscape tablet -------------------------------------------------------------------------- */ @media (max-width:1099px) { #battleHud[data-battle-ui="2.9.9"] { --bui-shell-w:calc(100vw - 24px); --bui-shell-h:min(680px,calc(100dvh - 36px)); --bui-command-w:calc(100% - 92px); --bui-command-h:188px; --bui-pause:44px; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article { width:278px!important; min-height:136px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card { width:205px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(318px,1fr) 148px 112px!important; gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:112px!important; min-width:112px!important; max-width:112px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { grid-template-rows:repeat(3,32px)!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, #battleHud[data-battle-ui="2.9.9"] #cancelBattle { height:32px!important; min-height:32px!important; padding-inline:8px!important; grid-template-columns:17px minmax(0,1fr)!important; gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > :is(svg,i) { width:17px!important; height:17px!important; min-width:17px!important; min-height:17px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b, #battleHud[data-battle-ui="2.9.9"] #cancelBattle > b { font-size:9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-glyph { width:38px!important; height:47px!important; } } /* -------------------------------------------------------------------------- Narrow / mobile: buttons become a contained horizontal row. -------------------------------------------------------------------------- */ @media (max-width:760px) { #battleHud[data-battle-ui="2.9.9"] { --bui-shell-w:calc(100vw - 8px); --bui-shell-h:calc(100dvh - 8px); --bui-command-w:calc(100% - 8px); --bui-command-h:282px; --bui-command-bottom:4px; --bui-pause:36px; } #battleHud[data-battle-ui="2.9.9"] .battle-shell { min-width:0!important; min-height:0!important; border-radius:18px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article { top:6px!important; width:calc(50% - 10px)!important; min-height:118px!important; padding:7px!important; border-radius:14px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .ally-health { left:5px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .enemy-health { right:5px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > b { font-size:14px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel { left:5px!important; right:5px!important; top:130px!important; bottom:auto!important; width:auto!important; height:46px!important; padding:4px 7px!important; display:block!important; border-radius:14px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel > header { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster { width:100%!important; height:38px!important; grid-template-columns:repeat(6,38px)!important; grid-template-rows:38px!important; justify-content:center!important; gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > .battle-roster-active-arrow { left:50%!important; top:-13px!important; width:16px!important; height:16px!important; transform:translate(-50%,-2px) rotate(90deg) scale(.86)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-active > .battle-roster-active-arrow { transform:translate(-50%,0) rotate(90deg) scale(1)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { padding:6px!important; border-radius:16px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-live-controls { grid-template-rows:minmax(0,1fr) 25px!important; gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:1fr!important; grid-template-rows:120px 64px 40px!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { padding:0!important; border-left:0!important; border-top:1px solid var(--bui-line)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { grid-template-columns:repeat(6,minmax(0,1fr))!important; grid-template-rows:1fr!important; gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { width:42px!important; min-width:40px!important; height:44px!important; min-height:44px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child, #battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown { width:39px!important; height:39px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:100%!important; min-width:0!important; max-width:none!important; height:40px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-template-rows:40px!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, #battleHud[data-battle-ui="2.9.9"] #cancelBattle { height:40px!important; min-height:40px!important; padding-inline:7px!important; grid-template-columns:18px minmax(0,1fr)!important; gap:5px!important; border-radius:12px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > :is(svg,i) { width:18px!important; height:18px!important; min-width:18px!important; min-height:18px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b, #battleHud[data-battle-ui="2.9.9"] #cancelBattle > b { font-size:10px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay { padding-bottom:var(--bui-command-h)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status { gap:9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-glyph { width:30px!important;height:38px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics { right:6px!important; left:6px!important; width:auto!important; bottom:calc(var(--bui-command-bottom) + var(--bui-command-h) + 6px)!important; max-height:calc(100% - var(--bui-command-h) - 28px)!important; } } /* -------------------------------------------------------------------------- Portrait tablet edge case (768–819 CSS px) This width is too narrow for the compact-desktop trio (ally + VS + enemy), but has enough vertical room for the mobile-style command composition. Keep two fighter cards, hide VS, use a horizontal roster and contained rows. -------------------------------------------------------------------------- */ @media (min-width:761px) and (max-width:819px) and (orientation:portrait) { #battleHud[data-battle-ui="2.9.9"] { --bui-shell-w:calc(100vw - 16px); --bui-shell-h:calc(100dvh - 20px); --bui-command-w:calc(100% - 18px); --bui-command-h:282px; --bui-command-bottom:8px; --bui-pause:38px; } #battleHud[data-battle-ui="2.9.9"] .battle-shell { min-width:0!important; min-height:0!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article { top:8px!important; width:calc(50% - 14px)!important; min-height:132px!important; padding:8px 10px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .ally-health { left:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .enemy-health { right:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel { left:50%!important; right:auto!important; top:148px!important; bottom:auto!important; width:314px!important; height:50px!important; padding:5px 8px!important; display:block!important; transform:translateX(-50%)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel > header { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster { width:100%!important; height:40px!important; display:grid!important; grid-template-columns:repeat(6,40px)!important; grid-template-rows:40px!important; justify-content:center!important; gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > .battle-roster-active-arrow { left:50%!important; top:-14px!important; width:17px!important; height:17px!important; transform:translate(-50%,-2px) rotate(90deg) scale(.86)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-active > .battle-roster-active-arrow { transform:translate(-50%,0) rotate(90deg) scale(1)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { padding:6px 8px!important; border-radius:18px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-live-controls { grid-template-rows:minmax(0,1fr) 25px!important; gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:1fr!important; grid-template-rows:120px 64px 40px!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { padding:0!important; border-left:0!important; border-top:1px solid var(--bui-line)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { grid-template-columns:repeat(6,minmax(0,1fr))!important; grid-template-rows:1fr!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:100%!important; min-width:0!important; max-width:none!important; height:40px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-template-rows:40px!important; gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, #battleHud[data-battle-ui="2.9.9"] #cancelBattle { height:40px!important; min-height:40px!important; padding-inline:10px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay { padding-bottom:var(--bui-command-h)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics { right:10px!important; left:10px!important; width:auto!important; bottom:calc(var(--bui-command-bottom) + var(--bui-command-h) + 8px)!important; max-height:calc(100% - var(--bui-command-h) - 34px)!important; } } @media (max-height:650px) and (orientation:landscape) and (min-width:761px) { #battleHud[data-battle-ui="2.9.9"] { --bui-shell-h:calc(100dvh - 10px); --bui-command-h:178px; --bui-command-bottom:5px; --bui-pause:40px; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article { top:7px!important; min-height:126px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card { top:8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel { left:12px!important; right:auto!important; top:143px!important; bottom:auto!important; width:238px!important; height:42px!important; padding:4px 6px!important; display:block!important; transform:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel > header { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster { width:226px!important; height:34px!important; grid-template-columns:repeat(6,34px)!important; grid-template-rows:34px!important; gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait, #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-empty > .battle-roster-empty { width:28px!important;height:28px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > .battle-roster-active-arrow { left:50%!important;top:-12px!important;width:15px!important;height:15px!important; transform:translate(-50%,-2px) rotate(90deg) scale(.86)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-active > .battle-roster-active-arrow { transform:translate(-50%,0) rotate(90deg) scale(1)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:64px; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-glyph { width:34px!important;height:42px!important; } } /* -------------------------------------------------------------------------- TABLET CONTRACT — 761..1100px Tablets previously sat between old <=800px mobile rules and the compact desktop contract. These rules deliberately load last and make tablet geometry explicit in both orientations without changing the phone layout. -------------------------------------------------------------------------- */ @media (min-width:761px) and (max-width:1100px) { #battleHud[data-battle-ui="2.9.9"] { --bui-shell-w:calc(100vw - 16px); --bui-shell-h:min(720px,calc(100dvh - 20px)); --bui-command-w:min(850px,calc(100% - 48px)); --bui-command-h:184px; --bui-command-bottom:10px; --bui-pause:44px; } #battleHud[data-battle-ui="2.9.9"] .battle-shell { min-width:0!important; min-height:0!important; border-radius:21px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article { top:10px!important; width:264px!important; min-height:132px!important; padding:8px 9px!important; border-radius:16px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .ally-health { left:10px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-health > .enemy-health { right:10px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > b { font-size:16px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card { top:12px!important; width:188px!important; min-height:82px!important; padding:8px 10px!important; border-radius:15px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > strong { font-size:13px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel { left:14px!important; top:158px!important; bottom:calc(var(--bui-command-h) + var(--bui-command-bottom) + 12px)!important; width:48px!important; padding:4px!important; border-radius:15px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster { width:38px!important; grid-template-columns:38px!important; grid-template-rows:repeat(6,38px)!important; gap:3px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait, #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-empty > .battle-roster-empty { width:32px!important;height:32px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > .battle-roster-active-arrow { left:-16px!important;width:18px!important;height:18px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="combat"] { padding:7px 8px 6px!important; border-radius:18px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-live-controls { grid-template-rows:minmax(0,1fr) 26px!important; gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(0,1fr) 144px 112px!important; gap:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:64px; } #battleHud[data-battle-ui="2.9.9"] .combat-skills { gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { padding-left:6px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-grid { gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button { width:43px!important;height:46px!important;min-width:43px!important;min-height:46px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child, #battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown { width:40px!important;height:40px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:112px!important;min-width:112px!important;max-width:112px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { grid-template-rows:repeat(3,31px)!important; gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, #battleHud[data-battle-ui="2.9.9"] #cancelBattle { height:31px!important;min-height:31px!important; padding:0 7px!important; grid-template-columns:16px minmax(0,1fr)!important; gap:5px!important; border-radius:10px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > :is(svg,i) { width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b, #battleHud[data-battle-ui="2.9.9"] #cancelBattle > b { font-size:9px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { height:26px!important;min-height:26px!important;padding:1px 7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-status { gap:10px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-glyph { width:38px!important;height:48px!important;min-width:38px!important;min-height:48px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics { right:10px!important; width:min(300px,calc(100% - 20px))!important; bottom:calc(var(--bui-command-bottom) + var(--bui-command-h) + 8px)!important; max-height:calc(100% - var(--bui-command-h) - var(--bui-command-bottom) - 26px)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="decision"], #battleHud[data-battle-ui="2.9.9"] .combat-command-deck[data-view="result"] { width:min(700px,calc(100% - 40px))!important; max-width:calc(100% - 40px)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm > article { width:min(360px,calc(100% - 24px))!important; max-height:calc(100% - 20px)!important; } } /* 7–8 inch portrait tablets: keep all three top cards separated. */ @media (min-width:761px) and (max-width:850px) and (orientation:portrait) { #battleHud[data-battle-ui="2.9.9"] { --bui-shell-h:min(740px,calc(100dvh - 16px)); --bui-command-w:calc(100% - 32px); } #battleHud[data-battle-ui="2.9.9"] .battle-health > article { width:232px!important; min-height:128px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card { width:174px!important; min-height:78px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card > strong { font-size:12px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(0,1fr) 138px 110px!important; gap:5px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:110px!important;min-width:110px!important;max-width:110px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:60px; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-glyph { width:40px!important;height:50px!important;min-width:40px!important;min-height:50px!important; } } /* Short landscape tablets: spend vertical space on the arena, not chrome. */ @media (min-width:761px) and (max-width:1100px) and (max-height:700px) and (orientation:landscape) { #battleHud[data-battle-ui="2.9.9"] { --bui-shell-w:calc(100vw - 10px); --bui-shell-h:calc(100dvh - 10px); --bui-command-w:min(820px,calc(100% - 76px)); --bui-command-h:170px; --bui-command-bottom:5px; --bui-pause:40px; } #battleHud[data-battle-ui="2.9.9"] .battle-health > article { top:6px!important;width:248px!important;min-height:118px!important;padding:7px 8px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-versus-card { top:7px!important;width:176px!important;min-height:72px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-panel { left:8px!important;top:132px!important;bottom:auto!important; width:78px!important;height:auto!important; grid-template-rows:16px auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster { width:68px!important; grid-template-columns:repeat(2,32px)!important; grid-template-rows:repeat(3,32px)!important; gap:3px 4px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait, #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-empty > .battle-roster-empty { width:27px!important;height:27px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > .battle-roster-active-arrow { left:-13px!important;width:15px!important;height:15px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:58px; } #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(0,1fr) 138px 108px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:108px!important;min-width:108px!important;max-width:108px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { grid-template-rows:repeat(3,29px)!important;gap:4px!important; } #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, #battleHud[data-battle-ui="2.9.9"] #cancelBattle { height:29px!important;min-height:29px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-glyph { width:35px!important;height:44px!important;min-width:35px!important;min-height:44px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-tactics { width:286px!important; max-height:calc(100% - var(--bui-command-h) - 18px)!important; } } @media (prefers-reduced-motion:reduce) { #battleHud[data-battle-ui="2.9.9"] *, #battleHud[data-battle-ui="2.9.9"] *::before, #battleHud[data-battle-ui="2.9.9"] *::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } } /* -------------------------------------------------------------------------- VISUAL CLARITY + MOTION CONTRACT Keep the approved geometry intact. This section only standardises motion, visual feedback and readability so battle states feel deliberate rather than like unrelated legacy CSS effects. -------------------------------------------------------------------------- */ #battleHud[data-battle-ui="2.9.9"] { --bui-ease:cubic-bezier(.22,.78,.22,1); --bui-ease-soft:cubic-bezier(.2,.72,.2,1); --bui-motion-fast:140ms; --bui-motion:220ms; --bui-motion-slow:320ms; } /* Smooth numeric state changes instead of snapping HP/energy bars. */ #battleHud[data-battle-ui="2.9.9"] :is( .battle-hp-bar > em, .battle-stamina > i > em, .battle-exp > i > em, .battle-roster-hp > em, .battle-roster-energy > em, .combat-energy > i > em ) { transition:width var(--bui-motion-slow) var(--bui-ease-soft),filter var(--bui-motion-fast) ease!important; } /* Open the battle as one coherent surface. Never change final geometry. */ #battleHud[data-battle-ui="2.9.9"].is-open .battle-shell { animation:bui-shell-enter var(--bui-motion) var(--bui-ease) both!important; } #battleHud[data-battle-ui="2.9.9"].is-open .battle-health > .ally-health { animation:bui-fighter-left 260ms var(--bui-ease) 35ms both!important; } #battleHud[data-battle-ui="2.9.9"].is-open .battle-health > .enemy-health { animation:bui-fighter-right 260ms var(--bui-ease) 35ms both!important; } #battleHud[data-battle-ui="2.9.9"].is-open .battle-versus-card { animation:bui-versus-enter 250ms var(--bui-ease) 70ms both!important; } /* Interaction feedback: short and physical, no bouncing/floating layout. */ #battleHud[data-battle-ui="2.9.9"] :is(.combat-action-button,.combat-item-button,.battle-roster-slot) { transition:border-color var(--bui-motion-fast) ease,background var(--bui-motion-fast) ease, box-shadow var(--bui-motion-fast) ease,filter var(--bui-motion-fast) ease, opacity var(--bui-motion-fast) ease,transform var(--bui-motion-fast) var(--bui-ease)!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-action-button,.combat-item-button):active:not(:disabled) { transform:scale(.965)!important; transition-duration:70ms!important; } #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-active > .battle-roster-active-arrow { animation:bui-active-arrow-in 220ms var(--bui-ease) both!important; } /* Queued/ready states remain visible but stop screaming continuously. */ #battleHud[data-battle-ui="2.9.9"] .combat-action-button.is-queued .combat-skill-art { animation:bui-queued-soft 1.8s ease-in-out infinite!important; } #battleHud[data-battle-ui="2.9.9"] :is(.combat-action-button,.combat-item-button).is-just-ready { animation:bui-control-ready 520ms var(--bui-ease) both!important; } /* The old energy bar had three independent infinite animations. A stable fill plus smooth width changes is clearer and cheaper to render. */ #battleHud[data-battle-ui="2.9.9"] .combat-energy > i > em, #battleHud[data-battle-ui="2.9.9"] .combat-energy > i > em::before, #battleHud[data-battle-ui="2.9.9"] .combat-energy > i > em::after, #battleHud[data-battle-ui="2.9.9"] .combat-energy[data-energy-state="full"] > i { animation:none!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i > em::before { opacity:.18!important; transform:none!important; background:linear-gradient(180deg,rgba(255,255,255,.32),transparent 62%)!important; } #battleHud[data-battle-ui="2.9.9"] .combat-energy > i > em::after { opacity:.75!important; } /* Pause is a state change, not a cinematic. One fast, clean lockup. */ #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay[aria-hidden="false"] .battle-pause-status { animation:bui-pause-in 160ms var(--bui-ease) both!important; } #battleHud[data-battle-ui="2.9.9"] .battle-pause-glyph { filter:none!important; } /* Tactics appears as a child panel without spring/overshoot animation. */ #battleHud[data-battle-ui="2.9.9"] .battle-tactics.is-open { animation:bui-panel-in 170ms var(--bui-ease-soft) both!important; } /* Result reveal follows the JS reveal order, but removes the legacy overshoot. */ #battleHud[data-battle-ui="2.9.9"] .battle-result-outcome { opacity:0!important; transform:translateY(8px) scale(.985)!important; transition:opacity 180ms ease,transform 240ms var(--bui-ease)!important; filter:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-scene.is-outcome-visible .battle-result-outcome { opacity:1!important; transform:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop { opacity:0!important; transform:translateY(10px) scale(.97)!important; transition:opacity 180ms ease,transform 260ms var(--bui-ease)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop.is-visible { opacity:1!important; transform:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-result-action { transition:opacity 170ms ease,transform 200ms var(--bui-ease),border-color 140ms ease,background 140ms ease!important; } /* One type rhythm: labels are tracked, controls/names are not artificially stretched. This does not alter component placement. */ #battleHud[data-battle-ui="2.9.9"] :is( .battle-fighter-identity > header > b, .combat-skill-name, .combat-utility-actions > button > b, .battle-tactic-modes b, .battle-result-copy > b ) { letter-spacing:0!important; } #battleHud[data-battle-ui="2.9.9"] :is( .battle-card-status-area > small, .combat-skills-panel > header b, .combat-items-panel > header b, .battle-result-copy > small, .battle-result-drops > header, .battle-tactic-rules-head small ) { letter-spacing:.08em!important; } @keyframes bui-shell-enter { from { opacity:0;transform:translate(-50%,-50%) scale(.992); } to { opacity:1;transform:translate(-50%,-50%) scale(1); } } @keyframes bui-fighter-left { from { opacity:0;transform:translateX(-8px); } to { opacity:1;transform:none; } } @keyframes bui-fighter-right { from { opacity:0;transform:translateX(8px); } to { opacity:1;transform:none; } } @keyframes bui-versus-enter { from { opacity:0;transform:translateX(-50%) translateY(-5px) scale(.985); } to { opacity:1;transform:translateX(-50%) translateY(0) scale(1); } } @keyframes bui-active-arrow-in { from { opacity:0;filter:none; } to { opacity:1;filter:none; } } @keyframes bui-queued-soft { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.07); } } @keyframes bui-control-ready { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--bui-good) 0%,transparent);filter:brightness(1); } 45% { box-shadow:0 0 0 3px color-mix(in srgb,var(--bui-good) 18%,transparent);filter:brightness(1.08); } 100% { box-shadow:0 0 0 0 transparent;filter:brightness(1); } } @keyframes bui-pause-in { from { opacity:0;transform:scale(.975); } to { opacity:1;transform:scale(1); } } @keyframes bui-panel-in { from { opacity:0;transform:translateY(5px); } to { opacity:1;transform:none; } } @media (prefers-reduced-motion: reduce) { #battleHud[data-battle-ui="2.9.9"] .battle-shell, #battleHud[data-battle-ui="2.9.9"] .battle-health > article, #battleHud[data-battle-ui="2.9.9"] .battle-versus-card, #battleHud[data-battle-ui="2.9.9"] .battle-pause-status, #battleHud[data-battle-ui="2.9.9"] .battle-tactics, #battleHud[data-battle-ui="2.9.9"] .battle-roster-active-arrow, #battleHud[data-battle-ui="2.9.9"] :is(.combat-action-button,.combat-item-button), #battleHud[data-battle-ui="2.9.9"] :is(.battle-result-outcome,.battle-reward-drop,.battle-result-action) { animation:none!important; transition:none!important; } } /* ========================================================================== BATTLE UI V6 — isolated phases + rebuilt fragile components One authoritative geometry block. Major phases are mutually exclusive in DOM (hidden) and in CSS. Result is stage-level, never a child of live HUD. ========================================================================== */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --v6-card-w:320px; --v6-card-h:154px; --v6-card-top:14px; --v6-roster-top:184px; --v6-slot:38px; --v6-roster-gap:5px; --v6-deck-w:min(940px,calc(100% - 92px)); --v6-deck-h:166px; --v6-main-h:118px; --v6-energy-h:26px; --v6-item-w:166px; --v6-util-w:122px; --v6-gap:8px; --v6-pad:10px; --bui-command-w:var(--v6-deck-w); --bui-command-h:var(--v6-deck-h); } /* Hidden always wins. Old !important display rules may never resurrect a phase. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] [hidden] { display:none!important; } /* -------------------------------------------------------------------------- Phase whitelist. These rules are a second safety net behind JS hidden state. -------------------------------------------------------------------------- */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-view="loading"] :is( #battleIntro,#battleMatchHeader,#battleHealth,#battleRosterPanel,#battleAllies,#battleTargets, #battleCommandDeck,#battleDecision,#captureStage,#battlePauseOverlay,#battleTactics,#capturePanel ) { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-view="intro"] :is( #battleAssetLoader,#battleMatchHeader,#battleHealth,#battleRosterPanel,#battleAllies,#battleTargets, #battleCommandDeck,#battleDecision,#captureStage,#battlePauseOverlay,#battleTactics,#capturePanel ) { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"]:is([data-view="combat"],[data-view="paused"]) :is( #battleAssetLoader,#battleIntro,#battleDecision,#captureStage,#capturePanel ) { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-view="capture"] :is( #battleAssetLoader,#battleIntro,#battleRosterPanel,#battleDecision,#battleLiveControls,#battlePauseOverlay,#battleTactics ) { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-view="resolving"] :is( #battleAssetLoader,#battleIntro,#battleMatchHeader,#battleHealth,#battleRosterPanel,#battleAllies,#battleTargets, #battleCommandDeck,#battleLiveControls,#battleDecision,#captureStage,#capturePanel,#battlePauseOverlay,#battleTactics ) { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"]:is([data-view="decision"],[data-view="result"]) :is( #battleAssetLoader,#battleIntro,#battleMatchHeader,#battleHealth,#battleRosterPanel,#battleAllies,#battleTargets, #battleCommandDeck,#battleLiveControls,#captureStage,#capturePanel,#battlePauseOverlay,#battleTactics ) { display:none!important; } body.is-battling #interactionCard { display:none!important; } /* -------------------------------------------------------------------------- Loader — arena reveal, no modal card. The battle opens instead of showing another white window. One emblem + copy + two lightweight shutters. -------------------------------------------------------------------------- */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleAssetLoader { position:absolute!important; z-index:54!important; inset:0!important; width:auto!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; display:grid!important; place-items:center!important; transform:none!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; overflow:hidden!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; pointer-events:none!important; isolation:isolate!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleAssetLoader::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleAssetLoader::after { content:''!important; position:absolute!important; z-index:-1!important; top:0!important; bottom:0!important; width:50.5%!important; display:block!important; opacity:.18!important; background:linear-gradient(90deg,color-mix(in srgb,var(--bui-accent) 18%,transparent),transparent 72%)!important; border:0!important; box-shadow:none!important; transform:translateX(0)!important; transition:transform .22s cubic-bezier(.3,.8,.2,1),opacity .18s ease!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleAssetLoader::before { left:0!important; clip-path:polygon(0 0,100% 0,88% 100%,0 100%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleAssetLoader::after { right:0!important; background:linear-gradient(270deg,color-mix(in srgb,var(--bui-accent) 18%,transparent),transparent 72%)!important; clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleAssetLoader.is-opening::before { transform:translateX(-104%)!important; opacity:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleAssetLoader.is-opening::after { transform:translateX(104%)!important; opacity:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem { position:absolute!important; left:50%!important; top:calc(50% - 34px)!important; width:62px!important; height:62px!important; display:grid!important; place-items:center!important; transform:translate(-50%,-50%)!important; border-radius:50%!important; color:var(--bui-accent)!important; background:conic-gradient(var(--bui-accent) var(--battle-load-progress,0deg),color-mix(in srgb,var(--bui-line) 70%,transparent) 0)!important; box-shadow:0 8px 20px rgba(12,91,130,.16)!important; animation:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem::before { content:''!important; position:absolute!important; inset:4px!important; border-radius:50%!important; background:color-mix(in srgb,var(--bui-surface-raised) 96%,transparent)!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bui-line) 76%,transparent)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem svg { position:relative!important; z-index:1!important; width:33px!important; height:33px!important; animation:v13-clean-loader-core 1.35s ease-in-out infinite!important; } @keyframes v13-clean-loader-core { 0%,100% { transform:scale(.97);opacity:.82; } 50% { transform:scale(1);opacity:1; } } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleAssetLoader.is-opening .battle-loader-emblem { animation:none!important; transform:translate(-50%,-50%) scale(1.06)!important; opacity:0!important; transition:transform .2s ease,opacity .18s ease!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleAssetLoader.is-opening .battle-loader-emblem svg { animation:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-loader-copy { position:absolute!important; left:50%!important; top:calc(50% + 16px)!important; width:min(280px,70%)!important; display:grid!important; justify-items:center!important; gap:4px!important; transform:translateX(-50%)!important; text-align:center!important; text-shadow:0 1px 2px rgba(255,255,255,.55)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-loader-copy small { color:var(--bui-accent)!important;font-size:9px!important;font-weight:900!important;letter-spacing:.12em!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-loader-copy b { color:var(--bui-text)!important;font-size:14px!important;font-weight:850!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-loader-copy strong { color:var(--bui-muted)!important;font-size:8px!important;font-weight:800!important;letter-spacing:.05em!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-load-track { width:128px!important;height:3px!important;margin:5px 0 2px!important;overflow:hidden!important;border-radius:999px!important; background:color-mix(in srgb,var(--bui-track) 76%,transparent)!important;box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-load-track > em { height:100%!important;border-radius:inherit!important;background:var(--bui-accent)!important;box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleAssetLoader.is-opening .battle-loader-copy { opacity:0!important; transform:translateX(-50%) translateY(-4px)!important; transition:opacity .16s ease,transform .18s ease!important; } /* -------------------------------------------------------------------------- Encounter beat — no modal card. Arena actors remain left/right while one compact centered label announces the fight and disappears. -------------------------------------------------------------------------- */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleIntro { position:absolute!important; z-index:49!important; inset:0!important; width:auto!important; min-width:0!important; height:auto!important; min-height:0!important; padding:0!important; display:grid!important; place-items:center!important; transform:none!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; overflow:visible!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleIntro::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleIntro::after { content:none!important; display:none!important; } /* Portraits already exist as the real arena actors; duplicated intro portraits only made the entrance feel like another window. Keep DOM hooks hidden. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleIntro .battle-intro-fighter { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleIntro .battle-intro-copy { min-width:210px!important; max-width:min(360px,70%)!important; padding:10px 18px 11px!important; display:grid!important; justify-items:center!important; gap:3px!important; border:1px solid color-mix(in srgb,var(--bui-accent) 28%,var(--bui-line))!important; border-radius:16px!important; background:color-mix(in srgb,var(--bui-surface-raised) 86%,transparent)!important; color:var(--bui-text)!important; box-shadow:0 8px 18px color-mix(in srgb,var(--bui-shadow) 30%,transparent)!important; text-align:center!important; animation:v13-base-intro-beat .58s cubic-bezier(.2,.8,.2,1) both!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleIntro .battle-intro-copy > small { color:var(--bui-accent)!important; font-size:8px!important; font-weight:900!important; letter-spacing:.13em!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleIntro .battle-intro-copy > strong { color:var(--bui-text)!important; font-size:21px!important; font-weight:900!important; line-height:1!important; letter-spacing:.03em!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleIntro .battle-intro-copy > em { max-width:100%!important; overflow:hidden!important; color:var(--bui-muted)!important; font-size:9px!important; font-style:normal!important; font-weight:750!important; text-overflow:ellipsis!important; white-space:nowrap!important; } @keyframes v13-base-intro-beat { 0% { opacity:0; transform:translateY(6px) scale(.97); } 18%,70% { opacity:1; transform:none; } 100% { opacity:0; transform:translateY(-3px) scale(.99); } } /* The old foreground matchup card remains retired. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleMatchHeader { display:none!important; } @media (max-width: 900px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleIntro .battle-intro-copy { min-width:180px!important; max-width:calc(100% - 88px)!important; padding:9px 14px 10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleIntro .battle-intro-copy > strong { font-size:18px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleIntro .battle-intro-copy > em { font-size:8px!important; } } /* -------------------------------------------------------------------------- Fighter cards — one shared grid, explicit player/enemy secondary resource. -------------------------------------------------------------------------- */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth { position:absolute!important;inset:0!important;z-index:33!important;display:block!important;pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { position:absolute!important; top:var(--v6-card-top)!important; width:var(--v6-card-w)!important; height:var(--v6-card-h)!important; min-height:0!important; max-height:var(--v6-card-h)!important; padding:11px 12px!important; box-sizing:border-box!important; display:grid!important; grid-template-columns:70px minmax(0,1fr)!important; grid-template-rows:34px 28px 23px 32px!important; column-gap:10px!important; row-gap:3px!important; align-items:center!important; border:1px solid var(--bui-line)!important; border-radius:18px!important; background:linear-gradient(155deg,var(--bui-surface-raised),var(--bui-surface))!important; color:var(--bui-text)!important; box-shadow:0 9px 22px color-mix(in srgb,var(--bui-shadow) 52%,transparent),inset 0 1px rgba(255,255,255,.12)!important; overflow:hidden!important; filter:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .ally-health { left:14px!important;right:auto!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .enemy-health { right:14px!important;left:auto!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { grid-column:1!important;grid-row:1/4!important;width:64px!important;height:64px!important;align-self:start!important; border:1px solid var(--bui-line-strong)!important;border-radius:16px!important;background:var(--bui-surface-soft)!important; box-shadow:inset 0 1px rgba(255,255,255,.18)!important;overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:56px!important;height:56px!important;max-width:56px!important;max-height:56px!important;object-fit:contain!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity { grid-column:2!important;grid-row:1!important;min-width:0!important;display:grid!important;grid-template-rows:21px 15px!important;gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header { display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-width:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > b { min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:var(--bui-text)!important;font-size:18px!important;font-weight:850!important;line-height:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > em { flex:none!important;min-width:46px!important;height:20px!important;padding:0 7px!important;display:grid!important;place-items:center!important;border:1px solid var(--bui-line)!important;border-radius:7px!important;background:var(--bui-surface-soft)!important;color:var(--bui-text)!important;font-size:9px!important;font-style:normal!important;font-weight:800!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types { min-width:0!important;display:flex!important;align-items:center!important;gap:4px!important;overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge { height:15px!important;min-height:15px!important;padding:0 5px!important;gap:3px!important;border-radius:999px!important;box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge img { width:9px!important;height:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge b { font-size:7px!important;font-weight:800!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > .battle-vital, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > .battle-exp { grid-column:2!important;min-width:0!important;display:grid!important;grid-template-rows:12px 11px!important;grid-template-columns:1fr!important;gap:4px!important;align-items:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > .battle-vital-hp { grid-row:2!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .ally-health > .battle-exp { grid-row:3!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .enemy-health > .battle-energy { grid-row:3!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span { min-width:0!important;display:grid!important;grid-template-columns:12px minmax(0,1fr) auto!important;align-items:center!important;gap:4px!important;color:var(--bui-muted)!important;font-size:8px!important;font-weight:800!important;line-height:1!important;letter-spacing:.03em!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span :is(i,svg) { width:11px!important;height:11px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span > :is(strong,small) { color:var(--bui-text)!important;font-size:9px!important;font-weight:850!important;white-space:nowrap!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > .battle-vital-hp > span > :is(i,svg,b) { color:var(--bui-good)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .ally-health > .battle-exp > span > :is(i,svg,b) { color:#9d7cf6!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-hp-bar, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-energy > i, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-exp > i { position:relative!important;width:100%!important;overflow:hidden!important;border:1px solid color-mix(in srgb,var(--bui-line) 70%,transparent)!important;border-radius:999px!important;background:var(--bui-track)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-hp-bar { height:11px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-energy > i { height:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-exp > i { height:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-hp-bar > em { height:100%!important;display:block!important;border-radius:inherit!important;background:linear-gradient(90deg,#30bd6a,#55da7d 58%,#98efad)!important;box-shadow:none!important;transition:width .24s ease!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-energy > i > em { height:100%!important;display:block!important;border-radius:inherit!important;background:linear-gradient(90deg,#279bd1,#4ecdec)!important;box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-exp > i > em { height:100%!important;display:block!important;border-radius:inherit!important;background:linear-gradient(90deg,#8d71ef,#c38cff)!important;box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-hp-bar > strong { position:absolute!important;left:0!important;top:0!important;bottom:0!important;height:100%!important;border-radius:inherit!important; background:repeating-linear-gradient(135deg,rgba(128,224,255,.9) 0 7px,rgba(181,240,255,.94) 7px 14px)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)!important;opacity:.88!important; } /* Player top energy was removed from DOM. It must never reappear via legacy rules. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .ally-health > .battle-energy { display:none!important; } /* One-line status strip. Status duration uses one tiny bottom progress line. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { grid-column:1/-1!important;grid-row:4!important;height:30px!important;min-height:30px!important;padding:3px 6px!important; display:grid!important;grid-template-columns:58px minmax(0,1fr)!important;gap:6px!important;border:1px solid var(--bui-line)!important;border-radius:10px!important;background:var(--bui-surface-soft)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area > small { display:flex!important;align-items:center!important;gap:4px!important;color:var(--bui-muted)!important;font-size:8px!important;font-weight:800!important;letter-spacing:.06em!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area > small > i { width:6px!important;height:6px!important;border-radius:50%!important;background:var(--bui-accent)!important;box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-statuses {gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip {flex:0 1 auto!important;max-width:138px!important;height:22px!important;min-height:22px!important;padding:2px 6px 3px!important; display:flex!important;align-items:center!important;gap:5px!important;border:1px solid var(--bui-line)!important; background:color-mix(in srgb,var(--status-color,var(--bui-accent)) 8%,var(--bui-card))!important;color:var(--status-color,var(--bui-text))!important;box-shadow:none!important;filter:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip::before { content:none!important;display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip::after { content:''!important;position:absolute!important;left:0!important;bottom:0!important;width:calc(var(--status-ratio,1) * 100%)!important;height:2px!important;border-radius:0 999px 999px 0!important;background:currentColor!important;opacity:.48!important;pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip:is(.is-buff,.is-debuff) { border-color:color-mix(in srgb,var(--status-color,currentColor) 34%,var(--bui-line))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip.is-shield { --status-color:#2aa9c8;color:var(--status-color)!important;border-color:color-mix(in srgb,var(--status-color) 36%,var(--bui-line))!important;background:color-mix(in srgb,var(--status-color) 9%,var(--bui-card))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-icon { flex:none!important;width:15px!important;height:15px!important;border-radius:50%!important;background:color-mix(in srgb,currentColor 10%,transparent)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-icon svg { width:13px!important;height:13px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-copy { min-width:0!important;display:flex!important;align-items:center!important;gap:5px!important;white-space:nowrap!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-copy > b { min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--bui-text)!important;font-size:9px!important;font-weight:800!important;line-height:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-copy > small { flex:none!important;color:var(--bui-muted)!important;font-size:8px!important;font-weight:750!important;line-height:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-empty { display:flex!important;align-items:center!important;gap:5px!important;color:var(--bui-muted)!important;font-size:9px!important;font-weight:750!important;white-space:nowrap!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-empty > i { width:12px!important;height:12px!important;display:grid!important;place-items:center!important;background:transparent!important;box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-more { flex:none!important;height:20px!important;min-width:24px!important;padding:0 5px!important;display:grid!important;place-items:center!important;border:1px solid var(--bui-line)!important;border-radius:7px!important;background:var(--bui-card)!important;color:var(--bui-muted)!important;font-size:8px!important;font-weight:850!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article.is-shield-pulse .battle-hp-bar > strong { animation:v7-shield-charge .22s ease-out both!important; } @keyframes v7-shield-charge { 0% { opacity:.35;filter:brightness(1); } 45% { opacity:1;filter:brightness(1.35); } 100% { opacity:.82;filter:brightness(1); } } /* -------------------------------------------------------------------------- Roster — six floating slots, no stretched white capsule. -------------------------------------------------------------------------- */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel { position:absolute!important;z-index:36!important;left:18px!important;right:auto!important;top:var(--v6-roster-top)!important;bottom:auto!important; width:42px!important;min-width:42px!important;max-width:42px!important;height:auto!important;min-height:0!important;max-height:none!important; padding:0!important;display:grid!important;grid-template-rows:18px auto!important;gap:5px!important;align-content:start!important; transform:none!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;filter:none!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel > header { width:42px!important;height:18px!important;display:block!important;overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel > header span, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel > p { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSwitchCooldown { width:42px!important;height:18px!important;display:grid!important;place-items:center!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;border:1px solid color-mix(in srgb,var(--bui-good) 40%,var(--bui-line))!important;border-radius:8px!important;background:color-mix(in srgb,var(--bui-good) 8%,var(--bui-surface-raised))!important;color:var(--bui-good)!important;font-size:7px!important;font-style:normal!important;font-weight:850!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRoster { width:42px!important;height:auto!important;display:grid!important;grid-template-columns:42px!important;grid-auto-rows:var(--v6-slot)!important;gap:var(--v6-roster-gap)!important;align-content:start!important;overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { position:relative!important;width:var(--v6-slot)!important;height:var(--v6-slot)!important;min-width:var(--v6-slot)!important;min-height:var(--v6-slot)!important; margin:0 auto!important;padding:2px!important;display:grid!important;place-items:center!important;overflow:visible!important;border:1px solid var(--bui-line)!important;border-radius:50%!important; background:var(--bui-surface-raised)!important;box-shadow:0 2px 6px color-mix(in srgb,var(--bui-shadow) 34%,transparent),inset 0 1px rgba(255,255,255,.15)!important;transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-empty {background:var(--bui-surface-soft)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-active {border-color:var(--bui-accent)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--bui-accent) 16%,transparent),inset 0 1px rgba(255,255,255,.18)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-empty > .battle-roster-empty { width:32px!important;height:32px!important;display:grid!important;place-items:center!important;object-fit:contain!important;object-position:center!important;transform:none!important;margin:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > span, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > strong { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > kbd { position:absolute!important;right:-3px!important;min-width:17px!important;height:17px!important;padding:0 3px!important;display:grid!important;place-items:center!important;border:1px solid var(--bui-line)!important;border-radius:7px!important;background:#10242d!important;color:#fff!important;font-size:7px!important;font-weight:850!important;box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-active-arrow { position:absolute!important;z-index:5!important;left:-15px!important;width:16px!important;height:16px!important;display:grid!important;place-items:center!important;color:var(--bui-accent)!important;opacity:0!important;transform:translateY(-50%) scale(.88)!important;filter:none!important;pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-active > .battle-roster-active-arrow { opacity:1!important;transform:translateY(-50%) scale(1)!important; } /* -------------------------------------------------------------------------- Command deck — one surface. Energy belongs to skills column only. -------------------------------------------------------------------------- */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandDeck { position:absolute!important;z-index:42!important;left:50%!important;right:auto!important;bottom:12px!important;top:auto!important; width:var(--v6-deck-w)!important;min-width:0!important;max-width:var(--v6-deck-w)!important;height:var(--v6-deck-h)!important;min-height:0!important;max-height:var(--v6-deck-h)!important; padding:var(--v6-pad)!important;box-sizing:border-box!important;transform:translateX(-50%)!important;overflow:visible!important; border:1px solid var(--bui-line)!important;border-radius:20px!important;background:linear-gradient(160deg,var(--bui-surface-raised),var(--bui-surface))!important; box-shadow:0 10px 24px color-mix(in srgb,var(--bui-shadow) 48%,transparent),inset 0 1px rgba(255,255,255,.12)!important; filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandDeck::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandDeck::after { content:none!important;display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls { width:100%!important;height:100%!important;display:grid!important;grid-template-rows:var(--v6-main-h) var(--v6-energy-h)!important;gap:6px!important;overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-main-row { width:100%!important;height:var(--v6-main-h)!important;display:grid!important;grid-template-columns:minmax(360px,1fr) var(--v6-item-w) var(--v6-util-w)!important;grid-template-rows:1fr!important;gap:var(--v6-gap)!important;align-items:stretch!important;overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel,.combat-utility-panel) { min-width:0!important;min-height:0!important;height:100%!important;overflow:visible!important;border:0!important;background:transparent!important;box-shadow:none!important;filter:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { padding-left:8px!important;border-left:1px solid var(--bui-line)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { width:var(--v6-util-w)!important;padding-left:8px!important;border-left:1px solid var(--bui-line)!important;align-self:stretch!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { width:100%!important;height:100%!important;padding-top:18px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:repeat(3,31px)!important;align-content:start!important;gap:5px!important;background:transparent!important;box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #cancelBattle { width:100%!important;height:31px!important;min-height:31px!important;margin:0!important;padding:0 8px!important;display:grid!important;grid-template-columns:16px minmax(0,1fr)!important;align-items:center!important;gap:6px!important;overflow:hidden!important;border-radius:11px!important;box-shadow:none!important;filter:none!important;transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > :is(i,svg) { width:16px!important;height:16px!important;color:currentColor!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b { overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important;font-size:9px!important;font-weight:850!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { width:100%!important;height:var(--v6-energy-h)!important;min-height:var(--v6-energy-h)!important;padding:0!important;display:grid!important; grid-template-columns:minmax(360px,1fr) var(--v6-item-w) var(--v6-util-w)!important;gap:var(--v6-gap)!important;align-items:center!important; border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row::after { content:none!important;display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy { grid-column:1!important;width:100%!important;max-width:none!important;height:var(--v6-energy-h)!important;margin:0!important;padding:0 4px!important;box-sizing:border-box!important; display:grid!important;grid-template-columns:154px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;border:0!important;background:transparent!important;box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy > span { min-width:0!important;display:grid!important;grid-template-columns:20px auto 1fr!important;align-items:center!important;gap:5px!important;color:var(--bui-text)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy > span > :is(i,svg) { width:20px!important;height:20px!important;color:var(--bui-accent)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy > span :is(small,b) { font-size:9px!important;font-weight:850!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandEnergyTrack { position:relative!important;width:100%!important;height:8px!important;overflow:hidden!important;border:1px solid color-mix(in srgb,var(--bui-accent) 24%,var(--bui-line))!important;border-radius:999px!important;background:var(--bui-track)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandEnergyBar { height:100%!important;border-radius:inherit!important;background:linear-gradient(90deg,#28a9dc,#35c3eb)!important;box-shadow:none!important;transition:width .22s ease!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandEnergyBar::after { content:''!important;float:right!important;width:4px!important;height:100%!important;border-radius:999px!important;background:#b8f3ff!important;opacity:.9!important;box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy-current { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLog { display:none!important; } /* Capture keeps the command surface but never restores live controls. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-view="capture"] #battleCommandDeck { height:122px!important;max-height:122px!important; } /* -------------------------------------------------------------------------- V7 Result — terminal-only stage card. Auto-sized on desktop, no live HUD. -------------------------------------------------------------------------- */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision.battle-result-layer { position:absolute!important;z-index:58!important;inset:0!important;width:auto!important;height:auto!important;margin:0!important;padding:28px!important; display:grid!important;place-items:center!important;transform:none!important;border:0!important;background:transparent!important;box-shadow:none!important;filter:none!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important;pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-card { width:min(560px,calc(100% - 24px))!important;height:auto!important;min-height:0!important;max-height:calc(100% - 24px)!important;padding:18px!important;box-sizing:border-box!important; display:grid!important;grid-template-rows:auto auto auto!important;gap:14px!important;align-content:start!important;overflow:visible!important; border:1px solid var(--bui-line)!important;border-radius:20px!important;background:linear-gradient(160deg,var(--bui-surface-raised),var(--bui-surface))!important; color:var(--bui-text)!important;box-shadow:0 16px 36px color-mix(in srgb,var(--bui-shadow) 58%,transparent),inset 0 1px rgba(255,255,255,.12)!important; pointer-events:auto!important;filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-view="result"] .battle-result-card { animation:v7-result-card-in .24s ease-out both!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-view="decision"] .battle-result-card { animation:v7-result-card-in .2s ease-out both!important; } @keyframes v7-result-card-in { from { opacity:0;transform:translateY(8px) scale(.988); } to { opacity:1;transform:none; } } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-outcome { width:100%!important;display:grid!important;grid-template-columns:64px minmax(0,1fr)!important;align-items:center!important;gap:16px!important;padding:0 0 14px!important; border-bottom:1px solid var(--bui-line)!important;filter:none!important;opacity:1!important;transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-emblem { width:68px!important;height:68px!important;display:grid!important;place-items:center!important;border:0!important; border-radius:0!important;background:transparent!important;box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-emblem > svg, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-emblem .combat-result-art { width:68px!important;height:68px!important;color:var(--outcome-accent,var(--bui-danger))!important;filter:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-copy { min-width:0!important;display:grid!important;gap:4px!important;margin:0!important;transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-copy > small { margin:0!important;color:var(--outcome-accent,var(--bui-accent))!important;font-size:9px!important;font-weight:850!important;letter-spacing:.11em!important;line-height:1!important;text-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-copy > b { margin:0!important;color:var(--bui-text)!important;font-size:36px!important;font-weight:900!important;line-height:1!important;letter-spacing:0!important;text-shadow:none!important;white-space:normal!important;overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-copy > em { margin:0!important;max-width:none!important;color:var(--bui-muted)!important;font-size:10px!important;font-style:normal!important;font-weight:700!important;line-height:1.3!important;white-space:normal!important;text-overflow:unset!important;text-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-drops { min-height:0!important;display:grid!important;grid-template-rows:auto auto!important;gap:8px!important;overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-drops > header { min-height:18px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;border:0!important;background:transparent!important;color:var(--outcome-accent,var(--bui-accent))!important;font-size:9px!important;font-weight:850!important;letter-spacing:.1em!important;text-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-reward-list, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-reward-list[data-mode="losses"] { width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;padding:0!important;display:grid!important;grid-template-columns:1fr!important;align-content:start!important;gap:7px!important;overflow:visible!important;scrollbar-width:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-reward-list::-webkit-scrollbar { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop {min-height:54px!important;padding:8px 11px!important;grid-template-columns:38px minmax(0,1fr) auto!important;grid-template-rows:1fr!important;align-items:center!important;gap:9px!important; border:1px solid var(--bui-line)!important;border-radius:12px!important;background:var(--bui-surface-soft)!important;filter:none!important;transform:translateY(5px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop-art {width:36px!important;height:36px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span { grid-column:2!important;grid-row:1!important;display:grid!important;gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span > b {white-space:nowrap!important;text-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span > small { color:var(--bui-muted)!important;font-size:8px!important;font-weight:700!important;white-space:normal!important;text-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > strong { grid-column:3!important;grid-row:1!important;justify-self:end!important;font-weight:900!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-action { width:min(360px,100%)!important;height:50px!important;min-height:50px!important;margin-top:2px!important;justify-self:center!important;padding:0 15px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 24px!important;align-items:center!important;gap:8px!important;border-radius:14px!important;box-shadow:none!important;transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-action > span { display:grid!important;gap:1px!important;text-align:left!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-action b { font-size:10px!important;font-weight:850!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-action small { font-size:8px!important;white-space:normal!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-action > i, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-action > i > svg { width:22px!important;height:22px!important; } /* Empty roster slots remain readable without turning the rail into a white capsule. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-empty { opacity:.62!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-active { opacity:1!important; } @media (max-height:620px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision.battle-result-layer { padding:12px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision.has-many-results .battle-result-card { max-height:calc(100% - 12px)!important;overflow:auto!important;overscroll-behavior:contain!important; } } /* -------------------------------------------------------------------------- Responsive containment. -------------------------------------------------------------------------- */ @media (max-width:1100px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --v6-card-w:294px;--v6-card-h:146px;--v6-roster-top:174px;--v6-deck-w:calc(100% - 42px);--v6-item-w:154px;--v6-util-w:116px;--v6-main-h:114px;--v6-deck-h:162px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-main-row, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { grid-template-columns:minmax(320px,1fr) var(--v6-item-w) var(--v6-util-w)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { grid-template-columns:64px minmax(0,1fr)!important;grid-template-rows:32px 27px 22px 29px!important;padding:10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { width:58px!important;height:58px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:52px!important;height:52px!important; } } @media (max-width:900px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --v6-card-w:calc(50% - 16px);--v6-card-h:134px;--v6-deck-w:calc(100% - 18px);--v6-item-w:148px;--v6-util-w:112px;--v6-main-h:110px;--v6-deck-h:158px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .ally-health { left:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .enemy-health { right:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { padding:8px!important;grid-template-columns:54px minmax(0,1fr)!important;grid-template-rows:32px 27px 22px 29px!important;column-gap:7px!important;row-gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { width:48px!important;height:48px!important;border-radius:13px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:43px!important;height:43px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > b { font-size:14px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { height:27px!important;min-height:27px!important;grid-template-columns:46px minmax(0,1fr)!important;padding:2px 4px!important;gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area > small { font-size:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip { max-width:108px!important;height:20px!important;min-height:20px!important;padding:1px 4px 2px!important;gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-icon { width:13px!important;height:13px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-icon svg { width:11px!important;height:11px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-copy > b { font-size:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-copy > small { font-size:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel { left:50%!important;top:auto!important;bottom:calc(var(--v6-deck-h) + 18px)!important;width:282px!important;min-width:282px!important;max-width:calc(100% - 20px)!important;height:42px!important;padding:0!important;display:block!important;transform:translateX(-50%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel > header { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRoster { width:282px!important;display:grid!important;grid-template-columns:repeat(6,42px)!important;grid-template-rows:42px!important;gap:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-active-arrow { left:50%!important;top:-14px!important;transform:translateX(-50%) rotate(90deg) scale(.88)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-active > .battle-roster-active-arrow { transform:translateX(-50%) rotate(90deg) scale(1)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-main-row, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { grid-template-columns:minmax(0,1fr) var(--v6-item-w) var(--v6-util-w)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy { grid-template-columns:138px minmax(0,1fr)!important; } } @media (max-width:760px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --v6-card-w:calc(50% - 9px);--v6-card-h:124px;--v6-deck-w:calc(100% - 12px);--v6-deck-h:184px;--v6-main-h:136px;--v6-item-w:138px;--v6-util-w:auto; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleMatchHeader { top:8px!important;width:190px!important;min-height:56px!important;padding:6px 9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { top:6px!important;padding:6px!important;grid-template-columns:46px minmax(0,1fr)!important;grid-template-rows:29px 25px 20px 27px!important;column-gap:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { width:40px!important;height:40px!important;border-radius:11px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:36px!important;height:36px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > b { font-size:12px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge { height:13px!important;min-height:13px!important;padding:0 3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { height:25px!important;min-height:25px!important;grid-template-columns:38px minmax(0,1fr)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area > small { font-size:6px!important;letter-spacing:.02em!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip:nth-child(n+2) { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(0,1fr) var(--v6-item-w)!important;grid-template-rows:94px 36px!important;gap:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel { grid-column:1!important;grid-row:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { grid-column:2!important;grid-row:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { grid-column:1/-1!important;grid-row:2!important;width:100%!important;padding:0!important;border-left:0!important;border-top:1px solid var(--bui-line)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:32px!important;align-content:end!important;gap:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #cancelBattle { height:32px!important;min-height:32px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { grid-template-columns:minmax(0,1fr) var(--v6-item-w)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy { grid-column:1!important;grid-template-columns:118px minmax(0,1fr)!important;padding:0 2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel { bottom:calc(var(--v6-deck-h) + 10px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-card { width:min(470px,94%)!important;padding:14px!important;grid-template-rows:auto minmax(0,1fr) 46px!important;gap:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-copy > b { font-size:28px!important; } } @media (max-height:620px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --v6-deck-h:150px;--v6-main-h:104px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { top:6px!important;height:128px!important;max-height:128px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel { bottom:calc(var(--v6-deck-h) + 8px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision.battle-result-layer { padding:36px 16px 24px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-card { max-height:calc(100% - 12px)!important; } } @media (prefers-reduced-motion:reduce) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-loader-emblem svg, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-card { animation:none!important;transition:none!important;opacity:1!important;transform:none!important; } } /* ========================================================================== V8 HARD-RESET / FIRST-FRAME SAFETY A hidden battle component must stay out of layout even before body.is-battling is applied. This prevents stale result/tooltip/roster surfaces from flashing during the first frame of a new battle session. ========================================================================== */ #battleHud[data-battle-ui="2.9.9"] [hidden] { display:none!important; } /* Tooltip is a floating layer only. It can never become an extra row under Q/W/E/R. */ #battleHud[data-battle-ui="2.9.9"] #battleTooltipLayer { position:absolute!important; inset:0!important; z-index:68!important; width:100%!important; height:100%!important; overflow:visible!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] #battleSkillPreview { position:absolute!important; left:0!important; top:0!important; right:auto!important; bottom:auto!important; margin:0!important; float:none!important; pointer-events:none!important; } #battleHud[data-battle-ui="2.9.9"] #battleSkillPreview[hidden] { display:none!important; } /* Roster art owns one centered 32px well; old item/sprite transforms may not leak in. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { grid-template-columns:1fr!important; grid-template-rows:1fr!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] :is(.battle-roster-portrait,.battle-roster-empty) { position:relative!important; inset:auto!important; width:32px!important; height:32px!important; min-width:32px!important; min-height:32px!important; margin:0!important; padding:0!important; display:grid!important; place-items:center!important; align-self:center!important; justify-self:center!important; overflow:hidden!important; transform:none!important; translate:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] :is(.battle-roster-portrait,.battle-roster-empty) > :is(img,svg,picture,span), html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] :is(.battle-roster-portrait,.battle-roster-empty) > * > :is(img,svg) { position:static!important; inset:auto!important; width:29px!important; height:29px!important; max-width:29px!important; max-height:29px!important; margin:0!important; object-fit:contain!important; object-position:center!important; transform:none!important; translate:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > kbd { top:-4px!important; right:-4px!important; left:auto!important; bottom:auto!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-active-arrow { left:-13px!important; top:50%!important; transform:translateY(-50%)!important; } /* Result header: icon and copy are isolated grid columns, never overlapping. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-outcome { position:relative!important; inset:auto!important; min-width:0!important; padding:0 0 14px!important; grid-template-rows:auto!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem { inset:auto!important; grid-row:1!important; align-self:center!important; justify-self:center!important; overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem :is(svg,.combat-result-art), html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem .combat-result-art > * { position:static!important; inset:auto!important; width:68px!important; height:68px!important; margin:0!important; transform:none!important; translate:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy { inset:auto!important; grid-row:1!important; width:auto!important; overflow:visible!important; } /* Standard desktop result content must size to content; two losses never create an admin-like scrollbar. */ @media (min-width:901px) and (min-height:621px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-card { width:min(540px,calc(100% - 48px))!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList[data-mode="losses"] { height:auto!important; max-height:none!important; overflow:visible!important; } } /* ========================================================================== V9 — terminal result isolation + skill text geometry Fixes the three screenshot regressions: result over live HUD/actors, stale tooltip/FX at terminal, and skill title/type rows being clipped by energy. ========================================================================== */ /* Terminal views own the arena. Live HUD components are never allowed to survive under a result card, even if a legacy selector tries to resurrect them with !important. */ #battleHud[data-battle-ui="2.9.9"]:is([data-view="resolving"],[data-view="result"]) :is( #battleMatchHeader,#battleHealth,#battleRosterPanel,#battleAllies,#battleTargets, #battleCommandDeck,#battleLiveControls,#battlePauseOverlay,#battleTactics, #captureStage,#capturePanel,#battleTooltipLayer,#battleHint,#battleLog ) { display:none!important; } #battleHud[data-battle-ui="2.9.9"][data-view="result"] #battleDecision:not([hidden]) { display:grid!important; } #battleHud[data-battle-ui="2.9.9"][data-view="resolving"] #battleDecision, #battleHud[data-battle-ui="2.9.9"][data-view="combat"] #battleDecision, #battleHud[data-battle-ui="2.9.9"][data-view="paused"] #battleDecision, #battleHud[data-battle-ui="2.9.9"][data-view="intro"] #battleDecision, #battleHud[data-battle-ui="2.9.9"][data-view="loading"] #battleDecision { display:none!important; } /* Tooltip is inspection-only. In terminal phases it cannot remain visible or reopen because the mouse happens to still be over a former skill slot. */ #battleHud[data-battle-ui="2.9.9"]:is([data-view="resolving"],[data-view="result"]) #battleSkillPreview, #battleHud[data-battle-ui="2.9.9"]:is([data-view="resolving"],[data-view="result"]) #battleTooltipLayer { display:none!important; } /* Result card sizes to content on desktop. The icon and copy use separate columns and no transform/negative offsets, so ПОБЕДА/ПОРАЖЕНИЕ cannot slide underneath the emblem. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision.battle-result-layer { padding:18px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-card { width:min(540px,calc(100% - 36px))!important; max-height:none!important; padding:18px!important; gap:12px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-outcome { position:static!important; grid-template-columns:72px minmax(0,1fr)!important; column-gap:18px!important; padding:0 0 12px!important; margin:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem { grid-column:1!important; width:68px!important; height:68px!important; min-width:68px!important; margin:0!important; transform:none!important; translate:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy { position:static!important; grid-column:2!important; margin:0!important; padding:0!important; transform:none!important; translate:none!important; text-indent:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > :is(small,b,em) { position:static!important; inset:auto!important; margin:0!important; transform:none!important; translate:none!important; text-indent:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > b { font-size:34px!important; line-height:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-drops { gap:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList[data-mode="losses"] { gap:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision.has-many-results .battle-result-card { max-height:calc(100% - 24px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-pending { width:100%!important; min-height:54px!important; padding:8px 11px!important; box-sizing:border-box!important; display:grid!important; grid-template-columns:36px minmax(0,1fr)!important; align-items:center!important; gap:10px!important; border:1px solid var(--bui-line)!important; border-radius:12px!important; background:var(--bui-surface-soft)!important; color:var(--bui-text)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-pending > i, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-pending > i > svg { width:30px!important;height:30px!important;color:var(--outcome-accent,var(--bui-accent))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-pending > span { min-width:0!important;display:grid!important;gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-pending b { font-size:10px!important;font-weight:850!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-pending small { color:var(--bui-muted)!important;font-size:8px!important;font-weight:700!important; } /* Result actions only exist after the rows have finished revealing. */ #battleHud[data-battle-ui="2.9.9"] #battleResultAction[hidden] { display:none!important; } /* Skills: title and tags are now real grid rows rather than absolute labels sitting on top of the energy footer. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --v6-main-h:128px; --v6-deck-h:180px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel { grid-template-rows:18px minmax(0,1fr)!important; gap:3px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-shell, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills { overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:70px; position:relative!important; width:100%!important; height:100%!important; min-height:0!important; padding:0 3px!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:70px 18px 15px!important; align-content:start!important; justify-items:center!important; row-gap:2px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { position:relative!important; grid-column:1!important; grid-row:1!important; align-self:start!important; justify-self:center!important; width:70px!important; height:70px!important; min-width:70px!important; min-height:70px!important; margin:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { position:static!important; inset:auto!important; grid-column:1!important; grid-row:2!important; width:100%!important; height:18px!important; min-height:18px!important; margin:0!important; display:block!important; overflow:hidden!important; color:var(--bui-text)!important; font-size:9px!important; font-weight:850!important; line-height:18px!important; text-align:center!important; text-overflow:ellipsis!important; white-space:nowrap!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-tags { position:static!important; inset:auto!important; grid-column:1!important; grid-row:3!important; width:100%!important; height:15px!important; min-height:15px!important; margin:0!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:3px!important; overflow:visible!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag { height:15px!important; min-height:15px!important; padding:0 4px 0 3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag > b { font-size:7px!important; line-height:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag > span { font-size:8px!important; line-height:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:52px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { position:relative!important; margin:0!important; transform:none!important; } #battleHud[data-battle-ui="2.9.9"] #battleHint { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } @media (max-width:1100px) and (min-width:901px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --v6-main-h:124px;--v6-deck-h:176px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:66px;grid-template-rows:66px 18px 15px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:66px!important;height:66px!important;min-width:66px!important;min-height:66px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:48px!important; } } @media (max-width:900px) and (min-width:761px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --v6-main-h:120px;--v6-deck-h:172px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:62px;grid-template-rows:62px 18px 15px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:62px!important;height:62px!important;min-width:62px!important;min-height:62px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:44px!important; } } @media (max-width:760px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --v6-main-h:142px;--v6-deck-h:190px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-rows:100px 36px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel { grid-template-rows:15px minmax(0,1fr)!important;gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:54px;grid-template-rows:54px 14px 12px!important;row-gap:1px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { height:14px!important;min-height:14px!important;font-size:7.5px!important;line-height:14px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-tags { height:12px!important;min-height:12px!important;gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag { height:12px!important;min-height:12px!important;padding:0 2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag > b { font-size:5.8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-tag > span { font-size:6.5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:38px!important; } } /* ========================================================================== V10 — cross-battle result leak / t=0 terminal flash hard stop Hidden battle nodes use two IDs so no one-ID legacy selector with !important can resurrect a previous Result or live HUD component. ========================================================================== */ html body #battleHud[data-battle-ui="2.9.9"] #battleAssetLoader[hidden], html body #battleHud[data-battle-ui="2.9.9"] #battleIntro[hidden], html body #battleHud[data-battle-ui="2.9.9"] #battleMatchHeader[hidden], html body #battleHud[data-battle-ui="2.9.9"] #battleHealth[hidden], html body #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel[hidden], html body #battleHud[data-battle-ui="2.9.9"] #battleAllies[hidden], html body #battleHud[data-battle-ui="2.9.9"] #battleTargets[hidden], html body #battleHud[data-battle-ui="2.9.9"] #battleCommandDeck[hidden], html body #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[hidden], html body #battleHud[data-battle-ui="2.9.9"] #battleDecision[hidden], html body #battleHud[data-battle-ui="2.9.9"] #battleResultAction[hidden], html body #battleHud[data-battle-ui="2.9.9"] #battleSkillPreview[hidden], html body #battleHud[data-battle-ui="2.9.9"] #captureStage[hidden], html body #battleHud[data-battle-ui="2.9.9"] #capturePanel[hidden], html body #battleHud[data-battle-ui="2.9.9"] #battlePauseOverlay[hidden], html body #battleHud[data-battle-ui="2.9.9"] #battleTactics[hidden] { display:none!important; } /* The first frame of a fresh fight can only be loader/intro. A stale Result from the previous battle is prohibited even before all JS render work ends. */ html body #battleHud[data-battle-ui="2.9.9"][data-view="loading"] #battleDecision, html body #battleHud[data-battle-ui="2.9.9"][data-view="intro"] #battleDecision, html body #battleHud[data-battle-ui="2.9.9"][data-view="combat"] #battleDecision, html body #battleHud[data-battle-ui="2.9.9"][data-view="paused"] #battleDecision, html body #battleHud[data-battle-ui="2.9.9"][data-view="capture"] #battleDecision, html body #battleHud[data-battle-ui="2.9.9"][data-view="resolving"] #battleDecision { display:none!important; } html body #battleHud[data-battle-ui="2.9.9"][data-view="result"] #battleCommandDeck, html body #battleHud[data-battle-ui="2.9.9"][data-view="result"] #battleLiveControls, html body #battleHud[data-battle-ui="2.9.9"][data-view="result"] #battleRosterPanel, html body #battleHud[data-battle-ui="2.9.9"][data-view="result"] #battleHealth, html body #battleHud[data-battle-ui="2.9.9"][data-view="result"] #battleMatchHeader, html body #battleHud[data-battle-ui="2.9.9"][data-view="result"] #battleTooltipLayer, html body #battleHud[data-battle-ui="2.9.9"][data-view="result"] #battleAllies, html body #battleHud[data-battle-ui="2.9.9"][data-view="result"] #battleTargets, html body #battleHud[data-battle-ui="2.9.9"][data-view="result"] #battleTactics, html body #battleHud[data-battle-ui="2.9.9"][data-view="result"] #battleHint, html body #battleHud[data-battle-ui="2.9.9"][data-view="result"] #battleLog { display:none!important; } /* -------------------------------------------------------------------------- Stable single-target matchup summary (V13-base continuation). Replaces the jumping "ЦЕЛЬ" button only when there is one wild opponent. Multi-target/co-op keeps the real interactive target buttons. -------------------------------------------------------------------------- */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleTargets.is-matchup-summary { position:absolute!important; z-index:26!important; left:0!important; right:0!important; top:14px!important; width:min(360px,calc(100% - 700px))!important; max-width:380px!important; min-width:320px!important; margin:0 auto!important; padding:0!important; display:block!important; overflow:visible!important; transform:none!important; pointer-events:none!important; scrollbar-width:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleTargets.is-matchup-summary::-webkit-scrollbar { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary { position:relative!important; min-height:52px!important; height:58px!important; box-sizing:border-box!important; padding:15px 12px 7px!important; display:grid!important; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)!important; align-items:center!important; gap:7px!important; border:1px solid color-mix(in srgb,var(--bui-accent) 18%,var(--bui-line))!important; border-radius:15px!important; background:linear-gradient(160deg,color-mix(in srgb,var(--bui-surface-raised) 98%,transparent),color-mix(in srgb,var(--bui-surface) 96%,transparent))!important; color:var(--bui-text)!important; box-shadow:0 5px 12px color-mix(in srgb,var(--bui-shadow) 25%,transparent)!important; transform:none!important; transition:none!important; animation:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary > small { position:absolute!important; left:50%!important; top:5px!important; transform:translateX(-50%)!important; color:var(--bui-accent)!important; font-size:7px!important; font-weight:900!important; letter-spacing:.1em!important; white-space:nowrap!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary > span { min-width:0!important; display:flex!important; align-items:center!important; gap:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary > span.is-enemy { flex-direction:row-reverse!important; text-align:right!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary > span > b { min-width:0!important; overflow:hidden!important; color:var(--bui-text)!important; font-size:10px!important; font-weight:850!important; text-overflow:ellipsis!important; white-space:nowrap!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-portrait { width:30px!important; height:30px!important; min-width:30px!important; display:grid!important; place-items:center!important; overflow:hidden!important; border:1px solid color-mix(in srgb,var(--bui-accent) 25%,var(--bui-line))!important; border-radius:50%!important; background:var(--bui-surface-soft)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-portrait > * { object-fit:contain!important; object-position:center!important; transform:none!important; margin:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-arrow { width:22px!important; height:22px!important; display:grid!important; place-items:center!important; color:var(--bui-accent)!important; transform:none!important; transition:none!important; animation:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-arrow svg { width:22px!important; height:22px!important; } @media (max-width: 900px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleTargets.is-matchup-summary { top:10px!important; min-width:220px!important; max-width:calc(100% - 80px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary { min-height:50px!important; padding:15px 10px 7px!important; grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important; gap:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-portrait { width:26px!important;height:26px!important;min-width:26px!important;border-radius:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary > span > b { font-size:9px!important; } } /* ========================================================================== CLEAN FIX 03 — phase-safe matchup + keyboard clarity ========================================================================== */ /* At compact desktop widths the centre gap between the two fighter cards is narrower. Keep the informational matchup compact so it never touches them. */ @media (max-width:1100px) and (min-width:901px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleTargets.is-matchup-summary { min-width:230px!important; max-width:280px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary { min-height:48px!important; padding:14px 9px 6px!important; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-portrait { width:25px!important; height:25px!important; min-width:25px!important; border-radius:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary > span > b { font-size:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-arrow, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-arrow svg { width:22px!important; } } /* On tablet/phone the two fighter cards already identify both participants and there is no safe centre column. Do not force a third card between them. */ @media (max-width:900px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleTargets.is-matchup-summary { display:none!important; } } /* Keyboard focus should be clear without moving or resizing dense battle UI. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] :is( .combat-action-button, .combat-item-button, .combat-utility-actions > button, .battle-roster-slot ):focus-visible { outline:2px solid color-mix(in srgb,var(--bui-accent) 78%,#fff 22%)!important; outline-offset:2px!important; transform:none!important; } /* V16 — the inventory loadout is retained without changing the stable combat geometry. Empty quick slots use the same circular wells as filled items. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button.is-empty-slot { opacity:.72!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button.is-empty-slot > span:first-child { border-style:dashed!important; border-color:color-mix(in srgb,var(--bui-muted) 42%,var(--bui-line))!important; background:var(--bui-surface-soft)!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-empty-art { width:24px!important; height:24px!important; color:var(--bui-muted)!important; } /* ========================================================================== V17 — focused visual polish. This layer intentionally leaves the stable skill/item geometry, input mapping and battle phase visibility untouched. ========================================================================== */ /* Empty item slots read as loadout sockets, not add buttons. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button.is-empty-slot { opacity:.82!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button.is-empty-slot > span:first-child { border-style:solid!important; border-color:color-mix(in srgb,var(--bui-accent) 18%,var(--bui-line))!important; background: radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--bui-accent) 10%,transparent) 0 31%,transparent 32%), linear-gradient(145deg,color-mix(in srgb,var(--bui-accent) 7%,var(--bui-surface-soft)) 0 51%,var(--bui-surface-soft) 52%)!important; box-shadow:inset 0 1px rgba(255,255,255,.2)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-empty-art { width:22px!important; height:22px!important; color:color-mix(in srgb,var(--bui-accent) 34%,var(--bui-muted))!important; } /* Subtle card texture over the existing skill art. It never changes the circular hit target and stays non-interactive. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { isolation:isolate!important; background-color:color-mix(in srgb,var(--skill-type,#39b7dc) 14%,var(--bui-surface-soft))!important; border-color:color-mix(in srgb,var(--skill-type,#39b7dc) 58%,var(--bui-line))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art::after { content:''!important; position:absolute!important; z-index:3!important; inset:0!important; border-radius:inherit!important; background: linear-gradient(132deg,color-mix(in srgb,var(--skill-type,#39b7dc) 15%,transparent) 0 48%,transparent 49%), repeating-linear-gradient(60deg,color-mix(in srgb,var(--skill-type,#39b7dc) 9%,transparent) 0 1px,transparent 1px 9px)!important; opacity:.55!important; pointer-events:none!important; } /* Effects are now icon telemetry inside the fighter card, without a third labelled panel. The full name and timer remain available to assistive tech. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { height:26px!important; min-height:26px!important; padding:1px 0!important; display:flex!important; align-items:center!important; gap:0!important; overflow:hidden!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-statuses { width:100%!important; height:24px!important; min-width:0!important; display:flex!important; align-items:center!important; gap:5px!important; overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .enemy-health .battle-statuses { justify-content:flex-end!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip { position:relative!important; flex:0 0 24px!important; width:24px!important; max-width:24px!important; height:24px!important; min-height:24px!important; padding:0!important; display:grid!important; place-items:center!important; overflow:hidden!important; border:1px solid color-mix(in srgb,var(--status-color,currentColor) 34%,var(--bui-line))!important; border-radius:8px!important; background: linear-gradient(135deg,color-mix(in srgb,var(--status-color,currentColor) 15%,var(--bui-card)) 0 52%,color-mix(in srgb,var(--status-color,currentColor) 6%,var(--bui-card)) 53%)!important; box-shadow:inset 0 1px rgba(255,255,255,.22)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-icon { width:16px!important; height:16px!important; display:grid!important; place-items:center!important; border-radius:0!important; background:transparent!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-icon svg { width:15px!important; height:15px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-copy, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-empty { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-more { height:22px!important; min-width:22px!important; padding:0 4px!important; border-radius:8px!important; background:color-mix(in srgb,var(--bui-accent) 6%,var(--bui-card))!important; } /* Compact, responsive matchup plaque with a real VS glyph. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleTargets.is-matchup-summary { top:10px!important; width:min(320px,calc(100% - 720px))!important; min-width:280px!important; max-width:320px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary { min-height:50px!important; height:50px!important; padding:13px 10px 5px!important; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important; gap:5px!important; border-radius:14px!important; background: linear-gradient(132deg,color-mix(in srgb,var(--bui-accent) 10%,transparent) 0 51%,transparent 52%), repeating-linear-gradient(60deg,color-mix(in srgb,var(--bui-accent) 5%,transparent) 0 1px,transparent 1px 10px), linear-gradient(160deg,var(--bui-surface-raised),var(--bui-surface))!important; box-shadow:0 4px 10px color-mix(in srgb,var(--bui-shadow) 22%,transparent)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary > small { top:4px!important; font-size:6.5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary > span { gap:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary > span > b { font-size:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-portrait { width:26px!important; height:26px!important; min-width:26px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-arrow, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-arrow svg { width:22px!important; height:22px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-arrow { color:color-mix(in srgb,var(--bui-accent) 88%,var(--bui-text))!important; } /* The result uses the painted outcome atlas and a light thematic surface. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-card { background: radial-gradient(circle at 10% 8%,color-mix(in srgb,var(--outcome-accent,var(--bui-accent)) 12%,transparent),transparent 35%), repeating-linear-gradient(60deg,color-mix(in srgb,var(--outcome-accent,var(--bui-accent)) 4%,transparent) 0 1px,transparent 1px 13px), linear-gradient(160deg,var(--bui-surface-raised),color-mix(in srgb,var(--outcome-accent,var(--bui-accent)) 4%,var(--bui-surface)))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-emblem .battle-outcome-art { width:68px!important; height:68px!important; filter:drop-shadow(0 5px 8px color-mix(in srgb,var(--outcome-accent,var(--bui-danger)) 24%,transparent))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-action { width:min(280px,100%)!important; height:46px!important; min-height:46px!important; padding:0 13px!important; border-radius:13px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision[data-outcome="defeat"] .battle-result-action { background:linear-gradient(180deg,#f44f56,#da3542)!important; color:#fff!important; box-shadow:0 4px 0 #b52330,0 8px 16px rgba(158,25,38,.2)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision[data-outcome="defeat"] .battle-result-action :is(b,small,i,svg) { color:#fff!important; } @media (max-width:1100px) and (min-width:901px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleTargets.is-matchup-summary { width:min(248px,calc(100% - 650px))!important; min-width:220px!important; max-width:248px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary { min-height:46px!important; height:46px!important; padding:12px 8px 4px!important; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-portrait { width:22px!important;height:22px!important;min-width:22px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary > span > b { font-size:7.5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-arrow, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-arrow svg { width:18px!important;height:18px!important; } } @media (max-width:900px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleTargets.is-matchup-summary { display:none!important; } } @media (max-width:560px), (max-height:620px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-action { width:min(250px,100%)!important; height:44px!important; min-height:44px!important; } } /* ========================================================================== V18 — visibility repair from live screenshots. Component-scoped only. ========================================================================== */ /* Empty means an unfilled battle pouch. Keep the preview pictogram smaller than its tile so it cannot turn into an unexplained full-size logo. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button.is-empty-slot > span:first-child { border-color:color-mix(in srgb,var(--bui-muted) 35%,var(--bui-line))!important; background:linear-gradient(180deg,var(--bui-surface-raised),var(--bui-surface-soft))!important; box-shadow:inset 0 1px rgba(255,255,255,.24)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] :is(.combat-item-empty-art,.combat-preview-empty-art) { color:color-mix(in srgb,var(--bui-accent) 28%,var(--bui-muted))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-empty-art { width:20px!important; height:20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip .combat-preview-empty-art { width:30px!important; height:30px!important; max-width:30px!important; max-height:30px!important; } /* The matchup is intentionally plain: no diagonal tiles or striped texture. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-matchup-summary { border-color:color-mix(in srgb,var(--bui-accent) 22%,var(--bui-line))!important; background:linear-gradient(180deg,var(--bui-surface-raised),color-mix(in srgb,var(--bui-accent) 3%,var(--bui-surface)))!important; box-shadow:0 4px 10px color-mix(in srgb,var(--bui-shadow) 18%,transparent),inset 0 1px rgba(255,255,255,.24)!important; } /* The live screenshot exposed two clipping ancestors. Effects must be the top telemetry layer of a fighter card and both visible icons stay available. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth { z-index:38!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { position:relative!important; z-index:20!important; overflow:visible!important; transform:translateY(-2px)!important; isolation:isolate!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-statuses { position:relative!important; z-index:21!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip:nth-child(n+2) { z-index:22!important; display:grid!important; } /* Defeat no longer depends on a background-positioned PNG cell. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-defeat-crest { width:68px!important; height:68px!important; max-width:68px!important; max-height:68px!important; display:block!important; overflow:visible!important; opacity:1!important; visibility:visible!important; filter:drop-shadow(0 6px 9px rgba(173,31,45,.26))!important; } /* ========================================================================== V19 — foreground battle application + dedicated phone composition. The phone is no longer a scaled desktop deck. This final layer owns all mobile geometry and deliberately supersedes the old world-window contract. ========================================================================== */ /* Combat owns focus and stacking. World chrome can return after combat, but it cannot cover, shrink or intercept the active battle. */ body.is-battling #battleHud[data-battle-ui="2.9.9"].is-open { position:fixed!important; z-index:8000!important; inset:0!important; width:100vw!important; height:100dvh!important; max-width:none!important; max-height:none!important; padding:0!important; overflow:hidden!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; isolation:isolate!important; } body.is-battling :is( .world-topbar,#partyHud,#playerProfileButton,#playerStaminaHud,#questWidget, #worldMinimapShell,#desktopDock,#desktopUtilityRail,#desktopMoreMenu, .world-rail,.desktop-dock,.desktop-utility-rail,.mobile-dock, #chatPanel,#sidePanel,#editorPanel,#inventoryItemDialog ) { opacity:0!important; visibility:hidden!important; pointer-events:none!important; transform:none!important; } body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-shell { z-index:1!important; opacity:1!important; pointer-events:auto!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-help { display:grid!important; gap:5px!important; padding:7px!important; border:1px solid var(--bui-line)!important; border-radius:12px!important; background:var(--bui-surface-soft)!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-help[hidden] { display:none!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-help > article { min-height:38px!important; display:grid!important; grid-template-columns:24px minmax(0,1fr)!important; align-items:center!important; gap:7px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-help > article > i { width:24px!important; height:24px!important; display:grid!important; place-items:center!important; border-radius:8px!important; background:color-mix(in srgb,var(--bui-accent) 12%,var(--bui-card))!important; color:var(--bui-accent)!important; font-size:9px!important; font-style:normal!important; font-weight:900!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-help > article > span { min-width:0!important;display:grid!important;gap:1px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-help > article b { color:var(--bui-text)!important;font-size:9px!important; } #battleHud[data-battle-ui="2.9.9"] .battle-quick-help > article small { color:var(--bui-muted)!important;font-size:7px!important;line-height:1.3!important; } /* Phone-only action switch. Desktop and tablet keep their simultaneous rows. */ #battleHud[data-battle-ui="2.9.9"] .mobile-combat-tabs { display:none!important; } @media (max-width:760px), (max-width:900px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --mobile-command-h:228px; --mobile-safe-bottom:max(4px,env(safe-area-inset-bottom)); --bui-shell-w:100vw; --bui-shell-h:100dvh; --bui-command-w:auto; --bui-command-h:var(--mobile-command-h); --bui-command-bottom:var(--mobile-safe-bottom); --v6-deck-w:auto; --v6-deck-h:var(--mobile-command-h); --v6-main-h:142px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-shell { position:fixed!important; left:0!important; right:0!important; top:0!important; bottom:0!important; width:100vw!important; height:100dvh!important; min-width:0!important; min-height:0!important; max-width:none!important; max-height:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-stage { inset:0!important; width:100%!important; height:100%!important; border-radius:0!important; } /* Two readable status cards; no third header or duplicated VS plaque. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleMatchHeader, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleTargets.is-matchup-summary { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth { z-index:52!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { top:max(6px,env(safe-area-inset-top))!important; width:calc(50% - 8px)!important; height:112px!important; min-height:112px!important; max-height:112px!important; padding:7px!important; grid-template-columns:43px minmax(0,1fr)!important; grid-template-rows:29px 25px 18px 24px!important; column-gap:6px!important; row-gap:2px!important; overflow:visible!important; border-radius:14px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .ally-health { left:5px!important;right:auto!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .enemy-health { right:5px!important;left:auto!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { width:40px!important; height:40px!important; border-radius:11px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:36px!important; height:36px!important; max-width:36px!important; max-height:36px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity { grid-template-rows:17px 12px!important; gap:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header { gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > b { font-size:11px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > em { min-width:34px!important; height:17px!important; padding:0 4px!important; font-size:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge { height:12px!important; min-height:12px!important; padding:0 3px!important; gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge img { width:8px!important;height:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge b { font-size:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > :is(.battle-vital,.battle-exp) { grid-template-rows:10px 8px!important; gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span { grid-template-columns:9px minmax(0,1fr) auto!important; gap:2px!important; font-size:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span :is(i,svg) { width:8px!important;height:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span > :is(strong,small) { font-size:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-hp-bar { height:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-energy > i, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-exp > i { height:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { grid-column:1/-1!important; grid-row:4!important; height:24px!important; min-height:24px!important; padding:0!important; display:flex!important; align-items:center!important; overflow:visible!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-statuses { height:24px!important; gap:4px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip:nth-child(n+2) { flex:0 0 24px!important; width:24px!important; max-width:24px!important; height:24px!important; min-height:24px!important; display:grid!important; } /* Switch row is anchored above the command sheet, never over the actors or underneath the sheet. Six 44px targets still fit a 320px viewport. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel { z-index:54!important; left:50%!important; right:auto!important; top:auto!important; bottom:calc(var(--mobile-command-h) + var(--mobile-safe-bottom) + 7px)!important; width:min(304px,calc(100% - 12px))!important; min-width:0!important; max-width:none!important; height:48px!important; padding:2px 5px!important; display:block!important; overflow:visible!important; border-radius:15px!important; transform:translateX(-50%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel > header, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel > p { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRoster { width:100%!important; height:44px!important; display:grid!important; grid-template-columns:repeat(6,minmax(0,44px))!important; grid-template-rows:44px!important; justify-content:center!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-empty > .battle-roster-empty { width:38px!important; height:38px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > kbd { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-active-arrow { left:50%!important; top:-14px!important; width:17px!important; height:17px!important; transform:translateX(-50%) rotate(90deg) scale(.88)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-active > .battle-roster-active-arrow { transform:translateX(-50%) rotate(90deg) scale(1)!important; } /* Dedicated bottom sheet: a selector, one action page, stable utility row and the shared energy meter. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandDeck[data-view="combat"] { z-index:60!important; left:max(4px,env(safe-area-inset-left))!important; right:max(4px,env(safe-area-inset-right))!important; top:auto!important; bottom:var(--mobile-safe-bottom)!important; width:auto!important; height:var(--mobile-command-h)!important; min-height:var(--mobile-command-h)!important; max-height:var(--mobile-command-h)!important; padding:6px!important; overflow:hidden!important; border-radius:18px!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls { width:100%!important; height:100%!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:44px minmax(0,1fr) 26px!important; gap:4px!important; overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .mobile-combat-tabs { grid-column:1!important; grid-row:1!important; height:44px!important; padding:0!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:3px!important; border:1px solid var(--bui-line)!important; border-radius:12px!important; background:var(--bui-surface-soft)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .mobile-combat-tabs > button { min-width:0!important; min-height:44px!important; padding:0 8px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; border:0!important; border-radius:11px!important; background:transparent!important; color:var(--bui-muted)!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .mobile-combat-tabs > button.is-active { background:var(--bui-surface-raised)!important; color:var(--bui-accent)!important; box-shadow:0 1px 4px color-mix(in srgb,var(--bui-shadow) 35%,transparent)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .mobile-combat-tabs > button > i, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .mobile-combat-tabs > button > i > svg { width:16px!important; height:16px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .mobile-combat-tabs > button > b { font-size:10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-column:1!important; grid-row:2!important; width:100%!important; height:100%!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:minmax(0,1fr) 44px!important; gap:4px!important; overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel { grid-column:1!important; grid-row:1!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; padding:0!important; border:0!important; background:transparent!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="skills"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="items"] .combat-skills-panel { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel > header, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel > header { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-shell, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { width:100%!important; height:100%!important; min-height:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; grid-template-rows:1fr!important; align-items:start!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:60px; width:100%!important; height:88px!important; min-width:44px!important; min-height:88px!important; padding:0 1px!important; grid-template-rows:60px 15px!important; row-gap:2px!important; overflow:visible!important; touch-action:manipulation!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:60px!important; height:60px!important; min-width:60px!important; min-height:60px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { grid-row:2!important; height:15px!important; min-height:15px!important; font-size:8px!important; line-height:15px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-tags { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:42px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button > kbd { left:0!important;top:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleQuickItems { width:100%!important; height:100%!important; display:grid!important; grid-template-columns:repeat(6,46px)!important; grid-template-rows:52px!important; align-content:center!important; justify-content:center!important; gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button { width:46px!important; height:52px!important; min-width:46px!important; min-height:52px!important; touch-action:manipulation!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown { width:44px!important; height:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { grid-column:1!important; grid-row:2!important; width:100%!important; min-width:0!important; max-width:none!important; height:44px!important; padding:0!important; border:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { width:100%!important; height:44px!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-template-rows:44px!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #cancelBattle { width:100%!important; height:44px!important; min-width:0!important; min-height:44px!important; padding:0 7px!important; grid-template-columns:18px minmax(0,1fr)!important; gap:5px!important; border-radius:12px!important; touch-action:manipulation!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > :is(i,svg) { width:18px!important; height:18px!important; min-width:18px!important; min-height:18px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b { font-size:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { grid-column:1!important; grid-row:3!important; width:100%!important; height:26px!important; min-height:26px!important; padding:1px 4px!important; display:block!important; overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy { width:100%!important; height:24px!important; display:grid!important; grid-template-columns:112px minmax(0,1fr)!important; gap:7px!important; } /* Touch tooltip is pinned above the sheet. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip { position:absolute!important; left:50%!important; top:auto!important; bottom:calc(var(--mobile-command-h) + var(--mobile-safe-bottom) + 64px)!important; width:min(310px,calc(100% - 18px))!important; max-height:132px!important; transform:translateX(-50%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-tactics { z-index:72!important; left:max(6px,env(safe-area-inset-left))!important; right:max(6px,env(safe-area-inset-right))!important; top:max(124px,calc(env(safe-area-inset-top) + 120px))!important; bottom:calc(var(--mobile-command-h) + var(--mobile-safe-bottom) + 6px)!important; width:auto!important; max-height:none!important; border-radius:17px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header nav > button { width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-surrender-confirm footer button { min-height:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-pause-overlay { padding:112px 0 calc(var(--mobile-command-h) + 56px)!important; } /* Terminal card is viewport-bound. Losses become a readable vertical list. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-view="result"] #battleDecision.battle-result-layer:not([hidden]) { z-index:80!important; inset:0!important; padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important; display:grid!important; place-items:center!important; overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-card { width:min(420px,100%)!important; height:auto!important; min-height:0!important; max-height:100%!important; padding:15px!important; grid-template-rows:auto auto auto!important; gap:10px!important; overflow:auto!important; overscroll-behavior:contain!important; border-radius:20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-outcome { grid-template-columns:58px minmax(0,1fr)!important; column-gap:10px!important; padding:0 0 10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem :is(.battle-outcome-art,.battle-defeat-crest,.combat-result-art) { width:56px!important; height:56px!important; min-width:56px!important; max-width:56px!important; max-height:56px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > b { max-width:100%!important; overflow:hidden!important; font-size:clamp(24px,8vw,32px)!important; line-height:1!important; text-overflow:clip!important; white-space:nowrap!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > em { display:block!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList[data-mode="losses"] { width:100%!important; height:auto!important; display:grid!important; grid-template-columns:1fr!important; gap:7px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop { width:100%!important; min-width:0!important; min-height:62px!important; padding:5px 8px!important; grid-template-columns:46px minmax(0,1fr) auto!important; grid-template-rows:1fr!important; column-gap:8px!important; border:1px solid var(--bui-line)!important; border-radius:14px!important; background:var(--bui-surface-soft)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop::before { width:42px!important;height:42px!important;left:7px!important;top:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop-art { grid-column:1!important; grid-row:1!important; width:42px!important; height:42px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span { grid-column:2!important; grid-row:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span > b, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span > small { white-space:normal!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > strong { grid-column:3!important; grid-row:1!important; align-self:center!important; justify-self:end!important; font-size:20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-action { width:100%!important; height:52px!important; min-height:52px!important; padding:0 13px!important; border-radius:14px!important; touch-action:manipulation!important; } } /* 320px phones retain 44px actions by removing only decorative text. */ @media (max-width:340px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:56px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleQuickItems { grid-template-columns:repeat(6,44px)!important; gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button { width:44px!important;min-width:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b { font-size:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-card { padding:12px!important; } } /* Short portrait: preserve touch sizes and reclaim vertical space from labels. */ @media (max-width:760px) and (max-height:650px) and (orientation:portrait) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --mobile-command-h:214px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { height:104px!important; min-height:104px!important; max-height:104px!important; grid-template-rows:27px 23px 16px 22px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { height:76px!important; min-height:76px!important; grid-template-rows:58px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-card { padding:11px!important; gap:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop { min-height:56px!important; } } /* Landscape phone: a lower sheet and top row leave the arena centre readable. */ @media (max-width:900px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --mobile-command-h:190px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { width:min(250px,calc((100% - 316px) / 2))!important; height:104px!important; min-height:104px!important; max-height:104px!important; grid-template-rows:27px 23px 16px 22px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel { left:50%!important; top:max(20px,calc(env(safe-area-inset-top) + 14px))!important; bottom:auto!important; width:304px!important; height:48px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRoster { height:44px!important; grid-template-columns:repeat(6,44px)!important; grid-template-rows:44px!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot.is-empty > .battle-roster-empty { width:38px!important;height:38px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls { grid-template-rows:44px minmax(0,1fr) 22px!important; gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .mobile-combat-tabs { height:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-rows:minmax(0,1fr) 38px!important; gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { height:62px!important; min-height:62px!important; grid-template-rows:54px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { height:44px!important; grid-template-rows:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #cancelBattle { height:44px!important; min-height:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy { height:22px!important;min-height:22px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { grid-column:1!important; grid-row:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-tactics { top:110px!important; bottom:calc(var(--mobile-command-h) + var(--mobile-safe-bottom) + 4px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-card { width:min(620px,100%)!important; grid-template-columns:minmax(210px,.85fr) minmax(260px,1.15fr)!important; grid-template-rows:auto auto!important; align-items:start!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-outcome { grid-column:1!important;grid-row:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-drops { grid-column:2!important;grid-row:1/3!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-action { grid-column:1!important;grid-row:2!important; } } /* ========================================================================== V29 — mobile resource and fighter-card polish. The stable native-v28 layout stays intact; this isolated layer improves resource readability, item-slot language and fighter-card hierarchy. ========================================================================== */ @media (max-width:760px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article { top:max(5px,env(safe-area-inset-top))!important; width:calc(50% - 6px)!important; height:100px!important; min-height:100px!important; max-height:100px!important; padding:6px!important; grid-template-columns:44px minmax(0,1fr)!important; grid-template-rows:27px 20px 15px 20px!important; column-gap:6px!important; row-gap:2px!important; overflow:visible!important; border:1px solid #bad7de!important; border-radius:15px!important; background:linear-gradient(155deg,rgba(255,255,255,.99),rgba(241,249,251,.98))!important; box-shadow:0 5px 14px rgba(18,62,77,.14),inset 0 1px #fff!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > .ally-health { left:3px!important; border-color:#a7d8ce!important; background:linear-gradient(145deg,rgba(226,249,244,.99),rgba(250,253,254,.99) 31%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > .enemy-health { right:3px!important; border-color:#efc2bd!important; background:linear-gradient(215deg,rgba(255,235,232,.99),rgba(250,253,254,.99) 31%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article::after { content:none!important; display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait-art > * { width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; max-width:42px!important; max-height:42px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait { grid-column:1!important; grid-row:1/4!important; align-self:start!important; border-width:1.5px!important; border-radius:13px!important; background:linear-gradient(145deg,#fff,#e8f6f8)!important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.68),0 2px 7px rgba(20,67,82,.12)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .ally-health .battle-combat-portrait { border-color:#50bba7!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .enemy-health .battle-combat-portrait { border-color:#ef756b!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-fighter-identity { grid-template-rows:15px 10px!important; gap:1px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-fighter-identity > header { gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-fighter-identity > header > b { font-size:11px!important; line-height:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-fighter-identity > header > em { min-width:31px!important; height:16px!important; padding:0 4px!important; border-radius:7px!important; font-size:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-fighter-types { height:10px!important; gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-fighter-types .pokemon-type-badge { height:10px!important; min-height:10px!important; padding:0 3px!important; gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-fighter-types .pokemon-type-badge img { width:7px!important;height:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-fighter-types .pokemon-type-badge b { font-size:6.8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article > .battle-vital-hp { grid-template-rows:9px 9px!important; gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > .ally-health > .battle-exp, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > .enemy-health > .battle-energy { grid-template-rows:7px 7px!important; gap:1px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span { grid-template-columns:10px minmax(0,1fr) auto!important; gap:3px!important; min-height:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span :is(i,svg) { width:10px!important; height:10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span :is(b,strong,small) { font-size:8px!important; line-height:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > :is(.ally-health,.enemy-health) > :is(.battle-exp,.battle-energy) > span :is(i,svg) { width:8px!important; height:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > :is(.ally-health,.enemy-health) > :is(.battle-exp,.battle-energy) > span :is(b,strong,small) { font-size:7.5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth .battle-hp-bar { height:9px!important; min-height:9px!important; border-color:#bad4d9!important; background:#dce9ec!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth .battle-energy > i, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth .battle-exp > i { height:7px!important; min-height:7px!important; border-color:#bfd5da!important; background:#dfeaed!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-card-status-area { grid-column:1/-1!important; grid-row:4!important; width:100%!important; height:20px!important; min-height:20px!important; padding:0 2px!important; display:block!important; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-statuses { width:100%!important; height:20px!important; min-height:20px!important; gap:3px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-status-chip, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-status-chip:nth-child(n+2) { height:20px!important; min-height:20px!important; } /* The energy row remains unboxed, but the actual resource is now readable. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] { grid-template-rows:28px 80px 48px 36px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] :is(.combat-resource-row,.combat-energy) { height:28px!important; min-height:28px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy { grid-template-columns:132px minmax(0,1fr)!important; gap:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy > span { height:28px!important; grid-template-columns:22px auto minmax(0,1fr)!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy > span > :is(i,svg) { width:22px!important; height:22px!important; min-width:22px!important; min-height:22px!important; color:#149bc7!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy > span :is(small,b) { font-size:8.8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyTrack { height:8px!important; min-height:8px!important; max-height:8px!important; border:1px solid #abd5df!important; background:#dcebef!important; box-shadow:inset 0 1px 2px rgba(20,73,89,.13),0 1px rgba(255,255,255,.9)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyBar { height:100%!important; min-height:6px!important; background:linear-gradient(90deg,#38c8e9,#169dcc 72%,#77ddf0)!important; box-shadow:inset 0 1px rgba(255,255,255,.48)!important; } /* Empty slots read as prepared loadout cells, not disabled system buttons. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel { grid-template-columns:52px minmax(0,1fr)!important; gap:4px!important; border-top-color:#cee1e6!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header { width:52px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header > b { color:#456c79!important; font-size:7.2px!important; letter-spacing:.045em!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] #battleQuickItems { gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button { max-width:42px!important; height:42px!important; min-height:42px!important; padding:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > span:first-child, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > .combat-cooldown { width:38px!important; height:38px!important; min-width:38px!important; min-height:38px!important; max-width:38px!important; max-height:38px!important; border-radius:12px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > span:first-child { border:1px solid #a9cbd4!important; background:linear-gradient(145deg,#fff,#eaf4f6)!important; box-shadow:inset 0 1px #fff,0 2px 5px rgba(24,73,87,.1)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button.is-empty-slot, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button.is-empty-slot.is-disabled { opacity:1!important; filter:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button.is-empty-slot > span:first-child { overflow:hidden!important; border:1px solid #afcbd2!important; border-radius:12px!important; background:linear-gradient(145deg,rgba(249,253,254,.98),rgba(225,239,243,.94))!important; box-shadow:inset 0 1px #fff,inset 0 0 0 2px rgba(255,255,255,.34),0 2px 5px rgba(28,71,83,.08)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-empty-art { width:22px!important; height:22px!important; color:#5f7f8a!important; opacity:.9!important; filter:none!important; } } @media (max-width:340px) and (orientation:portrait) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article { grid-template-columns:40px minmax(0,1fr)!important; column-gap:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait-art > * { width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;max-width:38px!important;max-height:38px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-fighter-identity > header { gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-fighter-identity > header > b { font-size:10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-fighter-identity > header > em { min-width:28px!important;padding:0 3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel { grid-template-columns:44px minmax(0,1fr)!important; gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header { width:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header > b { font-size:6.4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] #battleQuickItems { gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button { max-width:40px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > span:first-child, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > .combat-cooldown { width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important; } } @media (max-width:760px) and (max-height:650px) and (orientation:portrait) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article { height:92px!important; min-height:92px!important; max-height:92px!important; padding:6px!important; grid-template-columns:40px minmax(0,1fr)!important; grid-template-rows:24px 19px 14px 17px!important; column-gap:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait-art > * { width:38px!important; height:38px!important; min-width:38px!important; min-height:38px!important; max-width:38px!important; max-height:38px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth .battle-hp-bar { height:8px!important;min-height:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth .battle-energy > i, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth .battle-exp > i { height:6px!important;min-height:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article > .battle-vital-hp { grid-template-rows:9px 8px!important;gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > .ally-health > .battle-exp, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > .enemy-health > .battle-energy { grid-template-rows:7px 6px!important;gap:1px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-card-status-area, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-statuses { height:17px!important;min-height:17px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] { grid-template-rows:26px 72px 44px 34px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] :is(.combat-resource-row,.combat-energy) { height:26px!important; min-height:26px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyTrack { height:7px!important; min-height:7px!important; max-height:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > span:first-child, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > .combat-cooldown { width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important; max-width:36px!important; max-height:36px!important; } } @media (max-width:900px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] { --mobile-command-h:150px; --v6-deck-h:150px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article { top:max(4px,env(safe-area-inset-top))!important; width:min(280px,calc(50% - 6px))!important; height:84px!important; min-height:84px!important; max-height:84px!important; padding:5px!important; grid-template-columns:40px minmax(0,1fr)!important; grid-template-rows:22px 18px 14px 14px!important; column-gap:5px!important; row-gap:2px!important; overflow:visible!important; border:1px solid #bad7de!important; border-radius:13px!important; background:linear-gradient(155deg,rgba(255,255,255,.99),rgba(241,249,251,.98))!important; box-shadow:0 4px 12px rgba(18,62,77,.13),inset 0 1px #fff!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > .ally-health { left:3px!important;border-color:#a7d8ce!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > .enemy-health { right:3px!important;border-color:#efc2bd!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article::after { content:none!important;display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait-art > * { width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;max-width:38px!important;max-height:38px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait { grid-column:1!important;grid-row:1/4!important;border-width:1.5px!important;border-radius:12px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .ally-health .battle-combat-portrait { border-color:#50bba7!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .enemy-health .battle-combat-portrait { border-color:#ef756b!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-fighter-identity > header > b { font-size:10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article > .battle-vital-hp { grid-template-rows:8px 8px!important;gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > .ally-health > .battle-exp, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > .enemy-health > .battle-energy { grid-template-rows:7px 6px!important;gap:1px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth .battle-hp-bar { height:8px!important;min-height:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth .battle-energy > i, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth .battle-exp > i { height:6px!important;min-height:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-card-status-area, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-statuses { height:14px!important;min-height:14px!important;transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] { grid-template-rows:26px 72px 34px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] :is(.combat-resource-row,.combat-energy) { height:26px!important; min-height:26px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy { grid-template-columns:128px minmax(0,1fr)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy > span > :is(i,svg) { width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;color:#149bc7!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyTrack { height:7px!important;min-height:7px!important;max-height:7px!important;border:1px solid #abd5df!important;background:#dcebef!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyBar { min-height:5px!important;background:linear-gradient(90deg,#38c8e9,#169dcc 72%,#77ddf0)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel { border-left-color:#cee1e6!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button.is-empty-slot, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button.is-empty-slot.is-disabled { opacity:1!important;filter:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button.is-empty-slot > span:first-child { border:1px solid #afcbd2!important;border-radius:12px!important;background:linear-gradient(145deg,#fff,#e5f1f4)!important;box-shadow:inset 0 1px #fff,0 2px 5px rgba(28,71,83,.08)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-empty-art { width:21px!important;height:21px!important;color:#5f7f8a!important;opacity:.9!important; } } @media (max-width:560px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article { width:calc(50% - 6px)!important; height:64px!important; min-height:64px!important; max-height:64px!important; padding:5px!important; grid-template-columns:36px minmax(0,1fr)!important; grid-template-rows:22px 24px!important; column-gap:4px!important; row-gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait-art > * { width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:34px!important;max-height:34px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-combat-portrait { grid-row:1/3!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth > article > .battle-vital-hp { grid-column:2!important;grid-row:2!important;grid-template-rows:9px 8px!important;gap:2px!important;padding-right:68px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] #battleHealth .battle-hp-bar { height:8px!important;min-height:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-card-status-area { position:absolute!important;right:5px!important;bottom:5px!important;width:64px!important;height:18px!important;min-height:18px!important;padding:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v29"] .battle-statuses { width:64px!important;height:18px!important;min-height:18px!important; } } /* ========================================================================== V20 — pre-release responsive audit. Repairs confirmed boundary collisions without changing combat mechanics. ========================================================================== */ /* Capture uses the same stage as combat, so its interactive ball must be explicitly parked above the capture selector instead of underneath it. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --v20-capture-deck-h:122px; --v20-capture-deck-bottom:12px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandDeck[data-view="capture"] { left:50%!important; right:auto!important; bottom:var(--v20-capture-deck-bottom)!important; width:min(790px,calc(100% - 110px))!important; min-width:0!important; max-width:none!important; height:var(--v20-capture-deck-h)!important; min-height:var(--v20-capture-deck-h)!important; max-height:var(--v20-capture-deck-h)!important; transform:translateX(-50%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .capture-throw { bottom:calc(var(--v20-capture-deck-bottom) + var(--v20-capture-deck-h) + 16px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .capture-gesture-hint { bottom:calc(var(--v20-capture-deck-bottom) + var(--v20-capture-deck-h) + 18px)!important; } @media (max-width:760px), (max-width:900px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --v20-capture-deck-h:152px; --v20-capture-deck-bottom:var(--mobile-safe-bottom); } /* The four explicit tracks now equal the card's inner height. The status row no longer protrudes below the surface on short devices. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { grid-template-rows:28px 24px 17px 23px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-statuses { height:23px!important; min-height:23px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip:nth-child(n+2) { flex-basis:23px!important; width:23px!important; max-width:23px!important; height:23px!important; min-height:23px!important; } /* Capture is a separate mobile composition: zero-HP telemetry is replaced by the target reticle and the full-width selector remains touchable. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-view="capture"] #battleHealth { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandDeck[data-view="capture"] { left:max(4px,env(safe-area-inset-left))!important; right:max(4px,env(safe-area-inset-right))!important; bottom:var(--v20-capture-deck-bottom)!important; width:auto!important; min-width:0!important; max-width:none!important; height:var(--v20-capture-deck-h)!important; min-height:var(--v20-capture-deck-h)!important; max-height:var(--v20-capture-deck-h)!important; padding:6px!important; overflow:hidden!important; border-radius:18px!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-capture-panel { width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; padding:4px!important; box-sizing:border-box!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-capture-cancel { min-height:44px!important; touch-action:manipulation!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .capture-throw { bottom:calc(var(--v20-capture-deck-bottom) + var(--v20-capture-deck-h) + 12px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .capture-gesture-hint { bottom:calc(var(--v20-capture-deck-bottom) + var(--v20-capture-deck-h) + 14px)!important; } } @media (max-width:760px) and (max-height:650px) and (orientation:portrait) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { grid-template-rows:26px 22px 15px 21px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-statuses { height:21px!important; min-height:21px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip:nth-child(n+2) { flex-basis:21px!important; width:21px!important; max-width:21px!important; height:21px!important; min-height:21px!important; } } @media (max-width:900px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --v20-capture-deck-h:104px; } /* 108px of live main space = 62px action row + 2px gap + 44px utility row. The previous 38px track forced the 44px buttons into energy. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-rows:minmax(0,1fr) 44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { height:44px!important; grid-template-rows:44px!important; } /* Tactics cannot fit in the thin arena strip above a landscape command sheet. While explicitly open, it becomes a contained, scrollable modal. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-tactics { left:max(6px,env(safe-area-inset-left))!important; right:max(6px,env(safe-area-inset-right))!important; top:max(6px,env(safe-area-inset-top))!important; bottom:max(6px,env(safe-area-inset-bottom))!important; width:auto!important; height:auto!important; max-height:none!important; border-radius:17px!important; } /* The two-column result stays compact, but its longest Russian outcome now fits the left column instead of being clipped. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > b { font-size:clamp(20px,3.7vw,26px)!important; } /* Landscape capture uses one compact row and reserves the middle of the arena for a 64px throw target above the selector. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-capture-panel { grid-template-columns:minmax(126px,176px) minmax(0,1fr) 110px!important; grid-template-rows:1fr!important; align-items:center!important; gap:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-capture-copy { grid-column:1!important; grid-row:1!important; grid-template-columns:1fr!important; align-items:start!important; gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls { grid-column:2!important; grid-row:1!important; min-width:0!important; justify-content:flex-start!important; overflow-x:auto!important; overscroll-behavior-inline:contain!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls > button { width:54px!important; min-width:54px!important; height:72px!important; min-height:72px!important; padding:4px!important; grid-template-rows:38px 11px 9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls .capture-ball-icon { width:36px!important; height:36px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-capture-cancel { grid-column:3!important; grid-row:1!important; height:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .capture-feedback { top:max(6px,env(safe-area-inset-top))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .capture-target-reticle { top:clamp(86px,25dvh,102px)!important; width:86px!important; height:86px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .capture-target-reticle > span { top:-21px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .capture-throw { width:64px!important; height:64px!important; bottom:calc(var(--v20-capture-deck-bottom) + var(--v20-capture-deck-h) + 10px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .capture-throw-icon { width:44px!important; height:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .capture-gesture-hint { display:none!important; } } /* ========================================================================== V21 — final mobile battle and capture edge audit. Covers 320px capture results, 480px landscape and in-flight ball locking. ========================================================================== */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-capture-balls > button:disabled, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #capturePanel[aria-busy="true"] .combat-capture-cancel { opacity:.48!important; cursor:wait!important; pointer-events:none!important; filter:saturate(.55)!important; } @media (max-width:760px) { /* The longest Russian outcome must remain complete on a 320px viewport. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision[data-outcome="capture"] .battle-result-copy > b { font-size:clamp(19px,6vw,25px)!important; line-height:1.02!important; white-space:normal!important; } } @media (max-width:900px) and (max-height:650px) and (orientation:landscape) { /* Feedback already names the current action. Removing the second label prevents it from covering the ring on 320–375px-tall viewports. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .capture-target-reticle > span { display:none!important; } } /* Ultra-narrow landscape (for example 480×320): cards become concise status telemetry, while the six 44px switch targets remain fully available below them. The terminal card stacks because two fixed columns cannot fit here. */ @media (max-width:560px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { width:calc(50% - 7px)!important; height:56px!important; min-height:56px!important; max-height:56px!important; padding:5px!important; grid-template-columns:34px minmax(0,1fr)!important; grid-template-rows:22px 20px!important; column-gap:4px!important; row-gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:32px!important; height:32px!important; min-width:32px!important; min-height:32px!important; max-width:32px!important; max-height:32px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { grid-column:1!important; grid-row:1/3!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity { grid-column:2!important; grid-row:1!important; grid-template-rows:20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > b { font-size:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > em { min-width:30px!important; height:16px!important; padding:0 3px!important; font-size:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > .battle-vital-hp { grid-column:2!important; grid-row:2!important; grid-template-rows:9px 7px!important; gap:2px!important; padding-right:26px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .ally-health > .battle-exp, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .enemy-health > .battle-energy { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { position:absolute!important; right:5px!important; bottom:4px!important; width:22px!important; height:22px!important; min-height:22px!important; overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-statuses { width:22px!important; height:22px!important; gap:0!important; overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip { flex-basis:22px!important; width:22px!important; min-width:22px!important; max-width:22px!important; height:22px!important; min-height:22px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip:nth-child(n+2), html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-more { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel { top:max(66px,calc(env(safe-area-inset-top) + 62px))!important; bottom:auto!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-card { width:100%!important; max-height:100%!important; grid-template-columns:1fr!important; grid-template-rows:auto auto auto!important; overflow:auto!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-outcome { grid-column:1!important; grid-row:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-drops { grid-column:1!important; grid-row:2!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-action { grid-column:1!important; grid-row:3!important; } } /* ========================================================================== V22 — verified capture decision and terminal acknowledgement. The decision card may expose finish and capture at the same time. Keeping their layout on a wrapper prevents legacy direct-child grid rules from stacking the buttons or stretching either control beyond the result card. ========================================================================== */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-actions { width:min(570px,100%)!important; min-width:0!important; justify-self:center!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; align-items:stretch!important; gap:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-actions[data-mode="single"] { width:min(280px,100%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-actions[data-mode="split"] { grid-template-columns:repeat(2,minmax(0,1fr))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-actions > .battle-result-action { grid-column:auto!important; grid-row:auto!important; width:100%!important; min-width:0!important; max-width:none!important; margin:0!important; justify-self:stretch!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-actions > .battle-result-action[hidden] { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-capture-action { border-color:#32bea8!important; background:linear-gradient(135deg,#22bba3,#168dac)!important; color:#fff!important; box-shadow:0 7px 16px rgba(18,139,151,.2)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-capture-action :is(b,small,i,svg) { color:#fff!important; stroke:currentColor!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-capture-action:disabled { border-color:#b7c9cf!important; background:linear-gradient(135deg,#8fa6ad,#758d96)!important; box-shadow:none!important; } @media (max-width:760px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-actions { width:100%!important; gap:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-actions > .battle-result-action { height:52px!important; min-height:52px!important; padding:0 9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-actions[data-mode="split"] .battle-result-action small { overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } } @media (max-width:340px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-actions[data-mode="split"] { gap:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-actions[data-mode="split"] > .battle-result-action { grid-template-columns:minmax(0,1fr) 19px!important; gap:4px!important; padding:0 7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-actions[data-mode="split"] .battle-result-action > i, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-actions[data-mode="split"] .battle-result-action > i > svg { width:19px!important; height:19px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-actions[data-mode="split"] .battle-result-action small { display:none!important; } } @media (max-width:900px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-actions { grid-column:1!important; grid-row:2!important; width:100%!important; } } @media (max-width:560px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-actions { grid-column:1!important; grid-row:3!important; } } /* ========================================================================== V23 — centered result gallery + simultaneous mobile combat controls. Result art is now real SVG, rewards are game tiles rather than admin rows, and phone players can see skills, items, utilities and energy together. ========================================================================== */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision.battle-result-layer:not([hidden]) { position:absolute!important; z-index:86!important; inset:0!important; width:auto!important; height:auto!important; padding:clamp(14px,3dvh,34px)!important; display:grid!important; place-items:center!important; align-content:center!important; overflow:hidden!important; transform:none!important; pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-card { width:min(650px,calc(100% - 20px))!important; height:auto!important; min-height:0!important; max-height:min(720px,calc(100% - 20px))!important; margin:0!important; padding:22px 24px 20px!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto auto auto!important; gap:16px!important; align-self:center!important; align-content:start!important; border:1px solid color-mix(in srgb,var(--outcome-accent,var(--bui-accent)) 24%,var(--bui-line))!important; border-radius:24px!important; background: linear-gradient(155deg,var(--bui-surface-raised),color-mix(in srgb,var(--outcome-accent,var(--bui-accent)) 2%,var(--bui-surface)))!important; box-shadow:0 22px 50px color-mix(in srgb,var(--bui-shadow) 62%,transparent),inset 0 1px rgba(255,255,255,.2)!important; transform:none!important; pointer-events:auto!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-card::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-card::after, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-drops::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-drops::after { content:none!important; display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision.has-many-results .battle-result-card { overflow:auto!important; overscroll-behavior:contain!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-outcome { grid-column:1!important; grid-row:1!important; width:100%!important; padding:0 0 15px!important; display:grid!important; grid-template-columns:82px minmax(0,1fr)!important; align-items:center!important; gap:18px!important; border-bottom:1px solid color-mix(in srgb,var(--outcome-accent,var(--bui-accent)) 18%,var(--bui-line))!important; opacity:1!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem > .battle-result-vector, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem > .combat-result-art { width:78px!important; height:78px!important; min-width:78px!important; min-height:78px!important; max-width:78px!important; max-height:78px!important; display:block!important; overflow:visible!important; border:0!important; background:transparent!important; box-shadow:none!important; filter:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy { min-width:0!important; display:grid!important; gap:5px!important; text-align:left!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > small { color:var(--outcome-accent,var(--bui-accent))!important; font-size:10px!important; font-weight:900!important; letter-spacing:.12em!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > b { max-width:100%!important; color:var(--bui-text)!important; font-size:clamp(31px,4vw,43px)!important; line-height:.94!important; overflow:visible!important; text-overflow:clip!important; white-space:normal!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > em { display:block!important; max-width:100%!important; color:var(--bui-muted)!important; font-size:11px!important; line-height:1.35!important; overflow:visible!important; text-overflow:clip!important; white-space:normal!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-drops { grid-column:1!important; grid-row:2!important; width:100%!important; min-height:0!important; display:grid!important; grid-template-rows:auto auto!important; gap:10px!important; overflow:visible!important; border:0!important; border-radius:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-drops > header { min-height:16px!important; justify-content:center!important; color:var(--outcome-accent,var(--bui-accent))!important; font-size:9px!important; font-weight:900!important; letter-spacing:.14em!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList[data-mode="losses"] { width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; display:grid!important; grid-template-columns:repeat(auto-fit,minmax(112px,140px))!important; grid-auto-rows:auto!important; align-items:start!important; justify-content:center!important; gap:12px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop { position:relative!important; width:100%!important; min-width:0!important; min-height:116px!important; padding:2px 3px 4px!important; box-sizing:border-box!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:62px auto 24px!important; align-items:start!important; justify-items:center!important; gap:4px!important; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; opacity:0!important; transform:translateY(7px) scale(.97)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop.is-visible { opacity:1!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop::before { content:none!important; display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop.is-loss::before { content:none!important; display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop-art { position:relative!important; z-index:1!important; grid-column:1!important; grid-row:1!important; align-self:start!important; width:60px!important; height:60px!important; min-width:60px!important; min-height:60px!important; padding:0!important; display:block!important; overflow:visible!important; color:inherit!important; filter:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span { position:relative!important; z-index:1!important; grid-column:1!important; grid-row:2!important; min-width:0!important; width:100%!important; display:block!important; text-align:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span > b { display:-webkit-box!important; min-height:24px!important; overflow:hidden!important; color:var(--bui-text)!important; font-size:10px!important; font-weight:850!important; line-height:1.2!important; text-align:center!important; white-space:normal!important; text-overflow:ellipsis!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span > small { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > strong { position:relative!important; z-index:1!important; grid-column:1!important; grid-row:3!important; align-self:center!important; justify-self:center!important; color:var(--outcome-accent,var(--bui-accent))!important; font-size:20px!important; font-weight:950!important; line-height:1!important; text-align:center!important; text-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop.is-loss > strong { color:var(--bui-danger)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-actions { grid-column:1!important; grid-row:3!important; width:min(560px,100%)!important; min-width:0!important; justify-self:center!important; gap:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-actions[data-mode="single"] { width:min(240px,100%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-action { width:100%!important; height:44px!important; min-height:44px!important; margin:0!important; padding:0 14px!important; grid-template-columns:minmax(0,1fr) 22px!important; gap:8px!important; border:1px solid #238fd0!important; border-radius:14px!important; background:linear-gradient(135deg,#25aee9,#147dcc)!important; color:#fff!important; box-shadow:0 7px 16px rgba(20,125,204,.22),inset 0 1px rgba(255,255,255,.2)!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-action :is(b,small,i,svg) { color:#fff!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-action b { font-size:10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-action small { font-size:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision[data-outcome="defeat"] .battle-result-action { border-color:#c92c38!important; background:linear-gradient(135deg,#f35660,#d93343)!important; box-shadow:0 7px 16px rgba(170,28,45,.2),inset 0 1px rgba(255,255,255,.18)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-action:disabled { border-color:var(--bui-line)!important; background:linear-gradient(135deg,#8ea4ad,#718992)!important; box-shadow:none!important; } @media (max-width:760px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --mobile-command-h:206px; --v6-deck-h:206px; } /* Compact top telemetry: readable but no longer dominates the arena. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { top:max(5px,env(safe-area-inset-top))!important; width:calc(50% - 7px)!important; height:94px!important; min-height:94px!important; max-height:94px!important; padding:5px 6px!important; grid-template-columns:37px minmax(0,1fr)!important; grid-template-rows:23px 18px 13px 19px!important; column-gap:5px!important; row-gap:2px!important; overflow:visible!important; border-radius:13px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .ally-health { left:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .enemy-health { right:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:34px!important; height:34px!important; min-width:34px!important; min-height:34px!important; max-width:34px!important; max-height:34px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { border-radius:10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity { grid-template-rows:14px 10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > b { font-size:10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > em { min-width:30px!important; height:15px!important; padding:0 3px!important; font-size:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge { height:10px!important; min-height:10px!important; padding:0 2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge img { width:7px!important;height:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge b { font-size:6.2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > :is(.battle-vital,.battle-exp) { grid-template-rows:8px 7px!important; gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span { grid-template-columns:8px minmax(0,1fr) auto!important; gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span :is(i,svg) { width:7px!important;height:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span :is(b,strong,small) { font-size:7.2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-hp-bar { height:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-energy > i, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth .battle-exp > i { height:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-statuses { grid-column:1/-1!important; grid-row:4!important; width:100%!important; height:19px!important; min-height:19px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-statuses { gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip:nth-child(n+2) { flex:0 0 19px!important; width:19px!important; min-width:19px!important; max-width:19px!important; height:19px!important; min-height:19px!important; display:grid!important; } /* Mobile controls are one continuous battle sheet. The legacy tab state is still maintained for compatibility, but it no longer hides a control. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandDeck[data-view="combat"] { height:var(--mobile-command-h)!important; min-height:var(--mobile-command-h)!important; max-height:var(--mobile-command-h)!important; padding:6px!important; overflow:hidden!important; border-radius:18px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls { width:100%!important; height:100%!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:74px 22px 44px 44px!important; gap:3px!important; overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .mobile-combat-tabs { display:none!important; } /* V26 — native touch contract. A phone is not a keyboard. Slot hotkeys stay available on desktop, while touch uses art, name, cost and live state. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button > kbd, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button > kbd, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > kbd { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] :is(.combat-action-button,.combat-item-button,.battle-roster-slot,.combat-utility-actions > button) { -webkit-tap-highlight-color:transparent!important; -webkit-touch-callout:none!important; user-select:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { grid-column:1!important; grid-row:2!important; width:100%!important; height:22px!important; min-height:22px!important; padding:0 4px!important; display:block!important; overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy { width:100%!important; height:22px!important; min-height:22px!important; display:grid!important; grid-template-columns:108px minmax(0,1fr)!important; gap:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy > span { grid-template-columns:17px auto 1fr!important; gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy > span > :is(i,svg) { width:17px!important;height:17px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy > span :is(small,b) { font-size:7.5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandEnergyTrack { height:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-main-row { display:contents!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="items"] .combat-skills-panel { grid-column:1!important; grid-row:1!important; width:100%!important; height:74px!important; display:block!important; padding:0!important; border:0!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="skills"] .combat-items-panel { grid-column:1!important; grid-row:3!important; width:100%!important; height:44px!important; display:block!important; padding:0!important; border:0!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-panel,.combat-items-panel) > header { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-shell, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { width:100%!important; height:74px!important; min-height:74px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; grid-template-rows:74px!important; gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:52px; width:100%!important; height:74px!important; min-width:44px!important; min-height:74px!important; padding:0 1px!important; grid-template-rows:52px 18px!important; row-gap:2px!important; overflow:visible!important; touch-action:manipulation!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:52px!important; height:52px!important; min-width:52px!important; min-height:52px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { grid-row:2!important; width:100%!important; height:18px!important; min-height:18px!important; display:-webkit-box!important; font-size:7px!important; line-height:8.5px!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:normal!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-tags { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:35px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleQuickItems { width:100%!important; height:44px!important; padding:0!important; display:grid!important; grid-template-columns:repeat(6,44px)!important; grid-template-rows:44px!important; align-content:center!important; justify-content:center!important; gap:2px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button { width:100%!important; max-width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; padding:2px!important; touch-action:manipulation!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown { width:40px!important; height:40px!important; max-width:100%!important; max-height:40px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { grid-column:1!important; grid-row:4!important; width:min(300px,100%)!important; min-width:0!important; max-width:300px!important; height:44px!important; padding:0!important; border:0!important; justify-self:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { width:min(300px,100%)!important; height:44px!important; padding:0!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-template-rows:44px!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #cancelBattle { width:100%!important; height:44px!important; min-width:0!important; min-height:44px!important; padding:0 5px!important; grid-template-columns:15px minmax(0,1fr)!important; gap:4px!important; border-radius:12px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > :is(i,svg) { width:15px!important; height:15px!important; min-width:15px!important; min-height:15px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b { font-size:7.2px!important; } /* The visible utilities differ by mode: PvE has three, co-op has two and manual PvP only needs surrender. Do not reserve invisible grid columns. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions[data-visible-actions="1"] { width:min(108px,100%)!important; grid-template-columns:minmax(0,1fr)!important; justify-self:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions[data-visible-actions="2"] { width:min(216px,100%)!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; justify-self:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions[data-visible-actions="3"] { width:min(300px,100%)!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel { bottom:calc(var(--mobile-command-h) + var(--mobile-safe-bottom) + 6px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip { bottom:calc(var(--mobile-command-h) + var(--mobile-safe-bottom) + 60px)!important; } /* The result card is genuinely centred and its rewards stay graphical. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-view="result"] #battleDecision.battle-result-layer:not([hidden]), html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-view="decision"] #battleDecision.battle-result-layer:not([hidden]) { inset:0!important; padding:max(9px,env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left))!important; display:grid!important; place-items:center!important; align-content:center!important; overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-card { width:min(410px,calc(100% - 4px))!important; height:auto!important; min-height:0!important; max-height:calc(100% - 4px)!important; padding:14px 13px 13px!important; grid-template-columns:1fr!important; grid-template-rows:auto auto auto!important; gap:10px!important; align-self:center!important; overflow:visible!important; border-radius:21px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision.has-many-results .battle-result-card { overflow:auto!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-outcome { grid-template-columns:64px minmax(0,1fr)!important; gap:10px!important; padding:0 0 10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem > .battle-result-vector, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem > .combat-result-art { width:60px!important; height:60px!important; min-width:60px!important; min-height:60px!important; max-width:60px!important; max-height:60px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy { gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > small { font-size:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > b { font-size:clamp(24px,8vw,32px)!important; line-height:.96!important; overflow:visible!important; white-space:normal!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > em { font-size:8.5px!important; line-height:1.3!important; overflow:visible!important; text-overflow:clip!important; white-space:normal!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-drops { gap:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList[data-mode="losses"] { grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop { min-height:118px!important; padding:3px 1px 5px!important; grid-template-rows:60px auto 20px!important; gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop::before { top:5px!important; width:58px!important; height:58px!important; border-radius:20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop-art { width:56px!important; height:56px!important; min-width:56px!important; min-height:56px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span > b { min-height:22px!important; font-size:8px!important; line-height:1.3!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > strong { font-size:16px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-actions { width:100%!important; gap:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-actions[data-mode="single"] { width:min(250px,100%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-action { height:46px!important; min-height:46px!important; padding:0 10px!important; border-radius:13px!important; touch-action:manipulation!important; } } @media (max-width:340px) and (orientation:portrait) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --mobile-command-h:202px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls { grid-template-rows:70px 22px 44px 44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="items"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-shell, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { height:70px!important;min-height:70px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { grid-template-rows:70px!important;gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:49px; height:70px!important; min-height:70px!important; grid-template-rows:49px 17px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:49px!important;height:49px!important;min-width:49px!important;min-height:49px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:32px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="skills"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleQuickItems { height:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleQuickItems { grid-template-columns:repeat(6,44px)!important; grid-template-rows:44px!important; gap:1px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button { height:44px!important;min-height:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battleRewardList, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList[data-mode="losses"] { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop { min-height:112px!important; } } @media (max-width:760px) and (max-height:650px) and (orientation:portrait) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --mobile-command-h:198px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls { grid-template-rows:66px 20px 44px 44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy { height:20px!important; min-height:20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandEnergyTrack { height:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { height:86px!important; min-height:86px!important; max-height:86px!important; grid-template-rows:21px 16px 12px 15px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-statuses { height:15px!important;min-height:15px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip:nth-child(n+2) { flex-basis:15px!important;width:15px!important;min-width:15px!important;max-width:15px!important;height:15px!important;min-height:15px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="items"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-shell, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { height:66px!important;min-height:66px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { grid-template-rows:66px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:46px; height:66px!important; min-height:66px!important; grid-template-rows:46px 16px!important; row-gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:29px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { display:-webkit-box!important; height:16px!important; min-height:16px!important; font-size:6.8px!important; line-height:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="skills"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleQuickItems { height:44px!important; } } @media (max-width:900px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --mobile-command-h:146px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls { grid-template-rows:22px minmax(0,1fr)!important; gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy { height:22px!important;min-height:22px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { grid-column:1!important; grid-row:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-column:1!important; grid-row:2!important; width:100%!important; height:100%!important; display:grid!important; grid-template-columns:minmax(176px,.42fr) minmax(264px,.58fr)!important; grid-template-rows:61px 44px!important; gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="items"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-shell, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { grid-column:1!important; grid-row:1!important; height:61px!important; min-height:61px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { grid-template-rows:61px!important;gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:48px; height:61px!important; min-height:61px!important; grid-template-rows:48px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:31px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="skills"] .combat-items-panel { grid-column:2!important; grid-row:1!important; height:61px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleQuickItems { height:61px!important; grid-template-columns:repeat(6,44px)!important; grid-template-rows:48px!important; gap:1px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button { width:44px!important;height:48px!important;min-width:44px!important;min-height:48px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { grid-column:1/-1!important; grid-row:2!important; width:min(300px,100%)!important; max-width:300px!important; justify-self:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions { width:min(300px,100%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel { top:auto!important; bottom:calc(var(--mobile-command-h) + var(--mobile-safe-bottom) + 5px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-card { width:min(620px,calc(100% - 8px))!important; max-height:calc(100% - 8px)!important; grid-template-columns:1fr!important; grid-template-rows:auto auto auto!important; padding:10px 12px!important; gap:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-outcome, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-drops, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-actions { grid-column:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-outcome { grid-row:1!important;grid-template-columns:52px minmax(0,1fr)!important;padding-bottom:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-drops { grid-row:2!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-actions { grid-row:3!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem > .battle-result-vector { width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > b { font-size:24px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList[data-mode="losses"] { grid-template-columns:repeat(auto-fit,minmax(90px,116px))!important;gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop { min-height:92px!important;grid-template-rows:48px auto 16px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop::before { width:46px!important;height:46px!important;top:3px!important;border-radius:16px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop-art { width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span > b { min-height:16px!important;font-size:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > strong { font-size:14px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-action { height:44px!important;min-height:44px!important; } } @media (max-width:560px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --mobile-command-h:140px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { width:calc(50% - 7px)!important; height:56px!important; min-height:56px!important; max-height:56px!important; padding:5px!important; grid-template-columns:34px minmax(0,1fr)!important; grid-template-rows:22px 20px!important; column-gap:4px!important; row-gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;max-width:32px!important;max-height:32px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait { grid-column:1!important;grid-row:1/3!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity { grid-column:2!important;grid-row:1!important;grid-template-rows:20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .ally-health > .battle-exp, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .enemy-health > .battle-energy { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > .battle-vital-hp { grid-column:2!important;grid-row:2!important;grid-template-rows:9px 7px!important;gap:2px!important;padding-right:70px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area { position:absolute!important;right:5px!important;bottom:4px!important;grid-column:auto!important;grid-row:auto!important;width:66px!important;height:20px!important;min-height:20px!important;overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-statuses { width:66px!important;height:20px!important;min-height:20px!important;gap:2px!important;overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip { flex-basis:20px!important;width:20px!important;min-width:20px!important;max-width:20px!important;height:20px!important;min-height:20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-chip:nth-child(n+2) { display:grid!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-status-more { width:22px!important;height:20px!important;min-width:22px!important;padding:0 2px!important;display:grid!important;place-items:center!important;font-size:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-template-columns:minmax(174px,.4fr) minmax(264px,.6fr)!important; grid-template-rows:57px 44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="items"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-shell, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { height:57px!important;min-height:57px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { grid-template-rows:57px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:45px;height:57px!important;min-height:57px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:45px!important;height:45px!important;min-width:45px!important;min-height:45px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:28px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="skills"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleQuickItems { height:57px!important; } } /* V26 also covers touch tablets that intentionally use the wider tablet composition: physical-key hints are useful on a PC, not under a finger. */ @media (hover:none) and (pointer:coarse) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button > kbd, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button > kbd, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > kbd { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] :is(.combat-action-button,.combat-item-button,.battle-roster-slot,.combat-utility-actions > button) { -webkit-tap-highlight-color:transparent!important; -webkit-touch-callout:none!important; user-select:none!important; } } @media (prefers-reduced-motion:reduce) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-result-card { transition:none!important; animation:none!important; } } /* ========================================================================== V27 — native mobile battle application. The phone cockpit is deliberately authored after every legacy breakpoint: it is not a scaled desktop deck and it never exposes keyboard bindings. ========================================================================== */ /* Terminal result: one clean card. No decorative circles, ovals, pseudo backgrounds or CSS geometry may sit behind the actual result artwork. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision.battle-result-layer:not([hidden]) { background:color-mix(in srgb,#071b27 18%,transparent)!important; backdrop-filter:blur(2px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-card { width:min(620px,calc(100% - 24px))!important; padding:20px 22px 18px!important; gap:14px!important; overflow:visible!important; border:1px solid color-mix(in srgb,var(--outcome-accent,var(--bui-accent)) 22%,#d8e8ed)!important; border-radius:22px!important; outline:0!important; background:#f8fcfd!important; box-shadow:0 22px 52px rgba(9,42,56,.25),inset 0 1px #fff!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision :is( .battle-result-card,.battle-result-outcome,.battle-result-emblem,.battle-result-drops, .combat-reward-list,.battle-reward-drop,.battle-result-actions )::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision :is( .battle-result-card,.battle-result-outcome,.battle-result-emblem,.battle-result-drops, .combat-reward-list,.battle-reward-drop,.battle-result-actions )::after { content:none!important; display:none!important; width:0!important; height:0!important; border:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem { position:static!important; width:70px!important; height:70px!important; min-width:70px!important; min-height:70px!important; max-width:70px!important; max-height:70px!important; overflow:visible!important; border:0!important; border-radius:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem > :is(svg,.battle-result-vector,.combat-result-art) { position:static!important; inset:auto!important; width:70px!important; height:70px!important; min-width:70px!important; min-height:70px!important; max-width:70px!important; max-height:70px!important; margin:0!important; overflow:visible!important; transform:none!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem .combat-result-art > :is(defs,path,g,use,circle,ellipse,rect,linearGradient,stop) { position:static!important; inset:auto!important; width:revert!important; height:revert!important; min-width:0!important; min-height:0!important; max-width:none!important; max-height:none!important; margin:0!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-defeat-crest > ellipse { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-outcome { grid-template-columns:76px minmax(0,1fr)!important; gap:14px!important; padding:0 0 13px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > b { font-size:clamp(30px,4.4vw,42px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-actions[data-mode="single"] { width:min(232px,100%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-action { height:42px!important; min-height:42px!important; border-radius:12px!important; } @media (max-width:760px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --mobile-command-h:236px; --v6-deck-h:236px; --v27-touch-gap:4px; } /* Top telemetry remains compact but no longer uses microscopic copy. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { top:max(5px,env(safe-area-inset-top))!important; width:calc(50% - 6px)!important; height:91px!important; min-height:91px!important; max-height:91px!important; padding:6px!important; grid-template-columns:38px minmax(0,1fr)!important; grid-template-rows:24px 18px 13px 18px!important; column-gap:5px!important; row-gap:2px!important; overflow:visible!important; border-radius:14px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .ally-health { left:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > .enemy-health { right:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-combat-portrait-art > * { width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important; max-width:36px!important; max-height:36px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > b { font-size:10.5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-identity > header > em { min-width:31px!important; height:16px!important; font-size:6.8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-fighter-types .pokemon-type-badge b { font-size:6.8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span :is(b,strong,small) { font-size:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-card-status-area, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-statuses { z-index:6!important; height:18px!important; min-height:18px!important; overflow:visible!important; } /* Native touch cockpit: energy -> skills -> items -> named utilities. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandDeck[data-view="combat"] { height:var(--mobile-command-h)!important; min-height:var(--mobile-command-h)!important; max-height:var(--mobile-command-h)!important; padding:7px!important; overflow:visible!important; border-radius:18px!important; background:rgba(248,253,254,.97)!important; box-shadow:0 -9px 28px rgba(13,53,67,.18),inset 0 1px #fff!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v27"] { width:100%!important; height:100%!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:34px 82px 50px 38px!important; gap:var(--v27-touch-gap)!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .mobile-combat-tabs { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-main-row { display:contents!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { grid-column:1!important; grid-row:1!important; width:100%!important; height:34px!important; min-height:34px!important; padding:3px 7px!important; display:block!important; overflow:hidden!important; border:1px solid #b8dfeb!important; border-radius:11px!important; background:#eaf9fd!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy { width:100%!important; height:26px!important; min-height:26px!important; display:grid!important; grid-template-columns:124px minmax(0,1fr)!important; align-items:center!important; gap:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy > span { grid-template-columns:20px auto 1fr!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy > span > :is(i,svg) { width:20px!important; height:20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy > span :is(small,b) { font-size:9px!important; line-height:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandEnergyTrack { height:10px!important; border-radius:999px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="items"] .combat-skills-panel { grid-column:1!important; grid-row:2!important; width:100%!important; height:82px!important; min-height:82px!important; padding:0!important; display:block!important; overflow:visible!important; border:0!important; background:transparent!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel > header { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-shell,#battleSkills) { width:100%!important; height:82px!important; min-height:82px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; grid-template-rows:82px!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:54px; width:100%!important; height:82px!important; min-width:0!important; min-height:82px!important; padding:0 2px!important; display:grid!important; grid-template-rows:56px 22px!important; align-items:start!important; justify-items:center!important; row-gap:2px!important; overflow:visible!important; touch-action:manipulation!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { grid-row:1!important; width:54px!important; height:54px!important; min-width:54px!important; min-height:54px!important; max-width:54px!important; max-height:54px!important; border-radius:50%!important; overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { grid-row:2!important; width:100%!important; height:22px!important; min-height:22px!important; display:-webkit-box!important; overflow:hidden!important; color:#173d4e!important; font-size:8.8px!important; font-weight:850!important; line-height:10px!important; text-align:center!important; white-space:normal!important; text-overflow:ellipsis!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button > kbd, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button > kbd, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot > kbd, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-tags { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:36px!important; right:calc(50% - 29px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-ultimate-badge { top:1px!important; right:1px!important; font-size:6.5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="skills"] .combat-items-panel { position:relative!important; grid-column:1!important; grid-row:3!important; width:100%!important; height:50px!important; min-height:50px!important; padding:3px 4px!important; display:grid!important; grid-template-columns:54px minmax(0,1fr)!important; align-items:center!important; gap:4px!important; overflow:visible!important; border:1px solid #d2e5e9!important; border-radius:12px!important; background:#f4fafb!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel > header { width:54px!important; height:100%!important; padding:0!important; display:grid!important; place-items:center!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel > header > b { color:#527583!important; font-size:7.5px!important; font-weight:900!important; letter-spacing:.04em!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleQuickItems { width:100%!important; height:42px!important; min-height:42px!important; padding:0!important; display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr))!important; grid-template-rows:42px!important; align-items:center!important; justify-content:stretch!important; gap:2px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button { width:100%!important; max-width:42px!important; height:42px!important; min-width:0!important; min-height:42px!important; justify-self:center!important; padding:2px!important; touch-action:manipulation!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button > span:first-child, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button > .combat-cooldown { width:38px!important; height:38px!important; max-width:100%!important; max-height:38px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { grid-column:1!important; grid-row:4!important; width:100%!important; max-width:none!important; height:38px!important; min-height:38px!important; padding:0!important; border:0!important; background:transparent!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions[data-visible-actions="3"] { width:100%!important; max-width:none!important; height:38px!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-template-rows:38px!important; gap:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions[data-visible-actions="1"] { width:min(142px,100%)!important; grid-template-columns:minmax(0,1fr)!important; justify-self:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions[data-visible-actions="2"] { width:min(286px,100%)!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; justify-self:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #cancelBattle { width:100%!important; height:38px!important; min-width:0!important; min-height:38px!important; padding:0 7px!important; display:grid!important; grid-template-columns:16px minmax(0,auto)!important; place-content:center!important; gap:5px!important; border-radius:11px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > :is(i,svg) { width:16px!important; height:16px!important; min-width:16px!important; min-height:16px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b { display:block!important; overflow:visible!important; color:currentColor!important; font-size:9.5px!important; font-weight:900!important; line-height:1!important; white-space:nowrap!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel { bottom:calc(var(--mobile-command-h) + var(--mobile-safe-bottom) + 8px)!important; width:min(286px,calc(100% - 20px))!important; min-width:0!important; max-width:286px!important; height:42px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-roster-slot { width:40px!important; min-width:40px!important; height:40px!important; min-height:40px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip { bottom:calc(var(--mobile-command-h) + var(--mobile-safe-bottom) + 58px)!important; width:min(328px,calc(100% - 16px))!important; max-width:328px!important; } /* Tactics is a modal phone sheet with its own scrolling and safe-area. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-tactics:not([hidden]) { position:absolute!important; z-index:104!important; top:auto!important; right:max(8px,env(safe-area-inset-right))!important; bottom:max(8px,env(safe-area-inset-bottom))!important; left:max(8px,env(safe-area-inset-left))!important; width:auto!important; min-width:0!important; max-width:none!important; height:auto!important; min-height:0!important; max-height:calc(100% - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))!important; margin:0!important; padding:12px!important; display:grid!important; grid-template-rows:auto auto auto minmax(0,1fr) auto!important; gap:9px!important; overflow:auto!important; overscroll-behavior:contain!important; border:1px solid #b8dce7!important; border-radius:20px!important; background:#f7fcfd!important; box-shadow:0 24px 60px rgba(5,29,42,.38)!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header { position:sticky!important; z-index:2!important; top:-12px!important; min-height:46px!important; padding:5px 0 7px!important; background:#f7fcfd!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-tactics > header nav > button { width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-tactic-modes > button { min-height:70px!important; padding:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules { min-height:0!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-tactic-rules > label { min-height:46px!important; padding:7px 8px!important; } /* Mobile result uses icon -> label -> value, centred in the viewport. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision.battle-result-layer:not([hidden]) { inset:0!important; padding:max(9px,env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left))!important; display:grid!important; place-items:center!important; align-content:center!important; overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-card { width:min(404px,calc(100% - 2px))!important; max-height:calc(100% - 2px)!important; padding:13px!important; gap:9px!important; align-self:center!important; overflow:visible!important; border-radius:19px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision.has-many-results .battle-result-card { overflow:auto!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-outcome { grid-template-columns:58px minmax(0,1fr)!important; gap:10px!important; padding:0 0 9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-emblem > :is(svg,.battle-result-vector,.combat-result-art) { width:56px!important; height:56px!important; min-width:56px!important; min-height:56px!important; max-width:56px!important; max-height:56px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > small { font-size:8.5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > b { font-size:clamp(25px,8.7vw,33px)!important; line-height:.96!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-copy > em { font-size:9.5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRewardList[data-mode="losses"] { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:6px 8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop { min-height:104px!important; grid-template-rows:54px auto 20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop-art { width:52px!important; height:52px!important; min-width:52px!important; min-height:52px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > span > b { min-height:20px!important; font-size:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-reward-drop > strong { font-size:17px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-actions[data-mode="single"] { width:min(224px,100%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleDecision .battle-result-action { height:42px!important; min-height:42px!important; } } @media (max-width:760px) and (max-height:650px) and (orientation:portrait) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --mobile-command-h:218px; --v6-deck-h:218px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v27"] { grid-template-rows:32px 72px 48px 36px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { height:32px!important; min-height:32px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy { height:24px!important; min-height:24px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-shell,#battleSkills) { height:72px!important; min-height:72px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { grid-template-rows:72px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:48px; height:72px!important; min-height:72px!important; grid-template-rows:49px 20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:48px!important; height:48px!important; min-width:48px!important; min-height:48px!important; max-width:48px!important; max-height:48px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { height:20px!important; min-height:20px!important; font-size:8.2px!important; line-height:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:31px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="skills"] .combat-items-panel { height:48px!important; min-height:48px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #cancelBattle { height:36px!important; min-height:36px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleHealth > article { height:84px!important; min-height:84px!important; max-height:84px!important; } } @media (max-width:900px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --mobile-command-h:154px; --v6-deck-h:154px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandDeck[data-view="combat"] { height:var(--mobile-command-h)!important; min-height:var(--mobile-command-h)!important; max-height:var(--mobile-command-h)!important; padding:6px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v27"] { display:grid!important; grid-template-columns:1fr!important; grid-template-rows:28px 74px 36px!important; gap:3px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-resource-row { grid-column:1!important; grid-row:1!important; height:28px!important; min-height:28px!important; padding:2px 7px!important; display:block!important; border:1px solid #b8dfeb!important; border-radius:9px!important; background:#eaf9fd!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy { height:22px!important; min-height:22px!important; grid-template-columns:122px minmax(0,1fr)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-energy > span :is(small,b) { font-size:8.5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandEnergyTrack { height:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-main-row { grid-column:1!important; grid-row:2/4!important; width:100%!important; height:113px!important; display:grid!important; grid-template-columns:minmax(280px,.58fr) minmax(250px,.42fr)!important; grid-template-rows:74px 36px!important; gap:3px 5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="items"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] :is(.combat-skills-shell,#battleSkills) { grid-column:1!important; grid-row:1!important; height:74px!important; min-height:74px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleSkills { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; grid-template-rows:74px!important; gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button { --combat-size:49px; height:74px!important; min-height:74px!important; grid-template-rows:50px 20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-action-button .combat-skill-art { width:49px!important; height:49px!important; min-width:49px!important; min-height:49px!important; max-width:49px!important; max-height:49px!important; border-radius:50%!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-name { display:-webkit-box!important; height:20px!important; min-height:20px!important; font-size:8px!important; line-height:9px!important; -webkit-line-clamp:2!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-cost { top:32px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-tab="skills"] .combat-items-panel { grid-column:2!important; grid-row:1!important; width:100%!important; height:74px!important; min-height:74px!important; padding:4px!important; display:grid!important; grid-template-columns:46px minmax(0,1fr)!important; gap:3px!important; overflow:visible!important; border:1px solid #d2e5e9!important; border-radius:11px!important; background:#f4fafb!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel > header { display:grid!important; place-items:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-items-panel > header > b { font-size:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleQuickItems { width:100%!important; height:64px!important; display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr))!important; grid-template-rows:42px!important; align-content:center!important; gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-item-button { width:100%!important; max-width:42px!important; height:42px!important; min-width:0!important; min-height:42px!important; justify-self:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-panel { grid-column:1/-1!important; grid-row:2!important; width:min(420px,100%)!important; max-width:420px!important; height:36px!important; justify-self:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #cancelBattle { height:36px!important; min-height:36px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-utility-actions > button > b { display:block!important; font-size:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel { bottom:calc(var(--mobile-command-h) + var(--mobile-safe-bottom) + 5px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .battle-tactics:not([hidden]) { top:max(6px,env(safe-area-inset-top))!important; bottom:max(6px,env(safe-area-inset-bottom))!important; max-height:none!important; grid-template-columns:minmax(210px,.42fr) minmax(300px,.58fr)!important; grid-template-rows:auto auto 1fr auto!important; } } @media (hover:none) and (pointer:coarse) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] :is( .combat-action-button,.combat-item-button,.battle-roster-slot,.combat-utility-actions > button, .battle-tactic-modes > button,.battle-tactic-rules > label ) { -webkit-tap-highlight-color:transparent!important; -webkit-touch-callout:none!important; user-select:none!important; } } /* ========================================================================== V28 — clean mobile command deck. One cockpit surface, no nested energy/item cards, no empty quantity pills. ========================================================================== */ @media (max-width:760px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --mobile-command-h:218px; --v6-deck-h:218px; --v28-row-gap:3px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleCommandDeck[data-view="combat"] { height:var(--mobile-command-h)!important; min-height:var(--mobile-command-h)!important; max-height:var(--mobile-command-h)!important; padding:7px!important; overflow:visible!important; border-radius:18px!important; background:rgba(249,253,254,.98)!important; box-shadow:0 -8px 24px rgba(14,52,66,.16),inset 0 1px #fff!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] { width:100%!important; height:100%!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:24px 80px 48px 36px!important; gap:var(--v28-row-gap)!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-main-row { display:contents!important; } /* Energy is telemetry, not another card. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-resource-row { grid-column:1!important; grid-row:1!important; width:100%!important; height:24px!important; min-height:24px!important; padding:0 3px!important; display:block!important; overflow:visible!important; border:0!important; border-radius:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy { width:100%!important; height:24px!important; min-height:24px!important; padding:0!important; display:grid!important; grid-template-columns:122px minmax(0,1fr)!important; align-items:center!important; gap:8px!important; border:0!important; border-radius:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy::after { content:none!important; display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy > span { min-width:0!important; height:22px!important; display:grid!important; grid-template-columns:18px auto 1fr!important; align-items:center!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy > span > :is(i,svg) { width:18px!important; height:18px!important; min-width:18px!important; min-height:18px!important; color:#24acd7!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy > span :is(small,b) { font-size:8.5px!important; font-weight:900!important; line-height:1!important; white-space:nowrap!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyTrack { position:relative!important; width:100%!important; height:5px!important; min-height:5px!important; max-height:5px!important; overflow:hidden!important; border:0!important; border-radius:999px!important; outline:0!important; background:#d7e8ed!important; box-shadow:inset 0 1px 2px rgba(22,73,91,.12)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyTrack::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyTrack::after { content:none!important; display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyBar { height:100%!important; min-height:5px!important; border-radius:999px!important; background:linear-gradient(90deg,#3bc4e7,#1da5d7)!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy-current { display:none!important; } /* Skills remain the main visual row, with no inner panel surface. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-skills-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"][data-mobile-tab="items"] .combat-skills-panel { grid-column:1!important; grid-row:2!important; width:100%!important; height:80px!important; min-height:80px!important; padding:0!important; display:block!important; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-skills-panel > header { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] :is(.combat-skills-shell,#battleSkills) { width:100%!important; height:80px!important; min-height:80px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] #battleSkills { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; grid-template-rows:80px!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-action-button { --combat-size:52px; width:100%!important; height:80px!important; min-width:0!important; min-height:80px!important; padding:0 2px!important; grid-template-rows:54px 22px!important; row-gap:2px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-action-button .combat-skill-art { width:52px!important; height:52px!important; min-width:52px!important; min-height:52px!important; max-width:52px!important; max-height:52px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-skill-name { height:22px!important; min-height:22px!important; font-size:8.7px!important; line-height:10px!important; -webkit-line-clamp:2!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-skill-cost { top:34px!important; right:calc(50% - 28px)!important; } /* Items are a clean row separated only by one hairline. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"][data-mobile-tab="skills"] .combat-items-panel { position:relative!important; grid-column:1!important; grid-row:3!important; width:100%!important; height:48px!important; min-height:48px!important; padding:4px 0 0!important; display:grid!important; grid-template-columns:50px minmax(0,1fr)!important; align-items:center!important; gap:2px!important; overflow:visible!important; border:0!important; border-top:1px solid #d7e6ea!important; border-radius:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel::after { content:none!important; display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header { width:50px!important; height:43px!important; padding:0!important; display:grid!important; place-items:center start!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header > b { color:#5d7984!important; font-size:7px!important; font-weight:900!important; letter-spacing:.035em!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] #battleQuickItems { width:100%!important; height:43px!important; min-height:43px!important; padding:0!important; display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr))!important; grid-template-rows:40px!important; align-content:center!important; align-items:center!important; justify-content:stretch!important; gap:3px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button { width:100%!important; max-width:40px!important; height:40px!important; min-width:0!important; min-height:40px!important; padding:2px!important; justify-self:center!important; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > span:first-child, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > .combat-cooldown { width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important; max-width:36px!important; max-height:36px!important; border-radius:11px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > span:first-child { border:1px solid #b9cfd6!important; background:#f1f6f7!important; box-shadow:inset 0 1px #fff!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button.is-empty-slot { opacity:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button.is-empty-slot > span:first-child { overflow:hidden!important; border:1px dashed #a9c0c7!important; border-radius:11px!important; background:rgba(235,243,245,.72)!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-empty-art { width:20px!important; height:20px!important; color:#79939d!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button.is-empty-slot > .combat-cooldown, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button.is-empty-slot > b, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > b:empty { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button:not(.is-empty-slot) > b { right:-1px!important; bottom:-1px!important; min-width:17px!important; height:15px!important; padding:0 4px!important; display:grid!important; place-items:center!important; border-radius:7px!important; background:#29434c!important; color:#fff!important; font-size:7.5px!important; } /* Compact named actions remain the final row of the same surface. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-utility-panel { grid-column:1!important; grid-row:4!important; width:100%!important; max-width:none!important; height:36px!important; min-height:36px!important; padding:0!important; border:0!important; background:transparent!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-utility-actions, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-utility-actions[data-visible-actions="3"] { width:100%!important; max-width:none!important; height:36px!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-template-rows:36px!important; gap:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-utility-actions[data-visible-actions="1"] { width:min(138px,100%)!important; grid-template-columns:minmax(0,1fr)!important; justify-self:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-utility-actions[data-visible-actions="2"] { width:min(280px,100%)!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; justify-self:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-utility-actions > button, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] #cancelBattle { height:36px!important; min-height:36px!important; border-radius:10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-utility-actions > button > b { display:block!important; font-size:9.2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel { bottom:calc(var(--mobile-command-h) + var(--mobile-safe-bottom) + 7px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] .combat-skill-preview.battle-tooltip { bottom:calc(var(--mobile-command-h) + var(--mobile-safe-bottom) + 57px)!important; } } @media (max-width:340px) and (orientation:portrait) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"][data-mobile-tab="skills"] .combat-items-panel { grid-template-columns:42px minmax(0,1fr)!important; gap:1px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header { width:42px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header > b { font-size:6.2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] #battleQuickItems { gap:2px!important; } } @media (max-width:760px) and (max-height:650px) and (orientation:portrait) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --mobile-command-h:204px; --v6-deck-h:204px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] { grid-template-rows:22px 72px 44px 34px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] :is(.combat-resource-row,.combat-energy) { height:22px!important; min-height:22px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] :is(.combat-skills-panel,.combat-skills-shell,#battleSkills) { height:72px!important; min-height:72px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] #battleSkills { grid-template-rows:72px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-action-button { --combat-size:47px; height:72px!important; min-height:72px!important; grid-template-rows:49px 20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-action-button .combat-skill-art { width:47px!important; height:47px!important; min-width:47px!important; min-height:47px!important; max-width:47px!important; max-height:47px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-skill-name { height:20px!important; min-height:20px!important; font-size:8px!important; line-height:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-skill-cost { top:30px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel { height:44px!important; min-height:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] :is(.combat-utility-panel,.combat-utility-actions,.combat-utility-actions > button,#cancelBattle) { height:34px!important; min-height:34px!important; } } @media (max-width:900px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] { --mobile-command-h:146px; --v6-deck-h:146px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] { width:100%!important; height:100%!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:22px 72px 34px!important; gap:3px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-resource-row { grid-column:1!important; grid-row:1!important; width:100%!important; height:22px!important; min-height:22px!important; padding:0 3px!important; display:block!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy { height:22px!important; min-height:22px!important; grid-template-columns:118px minmax(0,1fr)!important; border:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyTrack { height:4px!important; min-height:4px!important; max-height:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-main-row { grid-column:1!important; grid-row:2/4!important; width:100%!important; height:109px!important; display:grid!important; grid-template-columns:minmax(280px,.59fr) minmax(244px,.41fr)!important; grid-template-rows:72px 34px!important; gap:3px 5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] :is(.combat-skills-panel,.combat-skills-shell,#battleSkills) { grid-column:1!important; grid-row:1!important; width:100%!important; height:72px!important; min-height:72px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] #battleSkills { grid-template-rows:72px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-action-button { --combat-size:47px; height:72px!important; min-height:72px!important; grid-template-rows:49px 20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-action-button .combat-skill-art { width:47px!important; height:47px!important; min-width:47px!important; min-height:47px!important; max-width:47px!important; max-height:47px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-skill-name { display:-webkit-box!important; height:20px!important; min-height:20px!important; font-size:8px!important; line-height:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-skill-cost { top:30px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"][data-mobile-tab="skills"] .combat-items-panel { grid-column:2!important; grid-row:1!important; width:100%!important; height:72px!important; min-height:72px!important; padding:0 0 0 5px!important; display:grid!important; grid-template-columns:42px minmax(0,1fr)!important; gap:2px!important; overflow:visible!important; border:0!important; border-left:1px solid #d7e6ea!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header { width:42px!important; height:72px!important; display:grid!important; place-items:center start!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header > b { font-size:6.5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] #battleQuickItems { width:100%!important; height:72px!important; display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr))!important; grid-template-rows:40px!important; align-content:center!important; gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-utility-panel { grid-column:1/-1!important; grid-row:2!important; width:min(410px,100%)!important; max-width:410px!important; height:34px!important; justify-self:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleLiveControls[data-mobile-layout="native-v28"] :is(.combat-utility-actions,.combat-utility-actions > button,#cancelBattle) { height:34px!important; min-height:34px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"] #battleRosterPanel { bottom:calc(var(--mobile-command-h) + var(--mobile-safe-bottom) + 5px)!important; } } /* ========================================================================== V30 — detached mobile statuses and resource-row geometry. This is the last mobile owner: the card surface ends after HP + the secondary resource, while status telemetry lives below each fighter. ========================================================================== */ @media (max-width:760px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth { z-index:46!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article { top:max(5px,env(safe-area-inset-top))!important; width:calc(50% - 6px)!important; height:78px!important; min-height:78px!important; max-height:78px!important; padding:6px!important; grid-template-columns:44px minmax(0,1fr)!important; grid-template-rows:27px 20px 15px!important; column-gap:6px!important; row-gap:2px!important; overflow:visible!important; border:1px solid #bad7de!important; border-radius:15px!important; background:linear-gradient(155deg,rgba(255,255,255,.99),rgba(241,249,251,.98))!important; box-shadow:0 5px 14px rgba(18,62,77,.14),inset 0 1px #fff!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > .ally-health { left:3px!important; border-color:#a7d8ce!important; background:linear-gradient(145deg,rgba(226,249,244,.99),rgba(250,253,254,.99) 31%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > .enemy-health { right:3px!important; border-color:#efc2bd!important; background:linear-gradient(215deg,rgba(255,235,232,.99),rgba(250,253,254,.99) 31%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article::after { content:none!important; display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait-art > * { width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; max-width:42px!important; max-height:42px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait { grid-column:1!important; grid-row:1/4!important; align-self:start!important; border-width:1.5px!important; border-radius:13px!important; background:linear-gradient(145deg,#fff,#e8f6f8)!important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.68),0 2px 7px rgba(20,67,82,.12)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .ally-health .battle-combat-portrait { border-color:#50bba7!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .enemy-health .battle-combat-portrait { border-color:#ef756b!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-fighter-identity { grid-template-rows:15px 10px!important; gap:1px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-fighter-identity > header { gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-fighter-identity > header > b { font-size:11px!important;line-height:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-fighter-identity > header > em { min-width:31px!important; height:16px!important; padding:0 4px!important; border-radius:7px!important; font-size:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-fighter-types { height:10px!important;gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-fighter-types .pokemon-type-badge { height:10px!important; min-height:10px!important; padding:0 3px!important; gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-fighter-types .pokemon-type-badge img { width:7px!important;height:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-fighter-types .pokemon-type-badge b { font-size:6.8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article > .battle-vital-hp { grid-template-rows:9px 9px!important;gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > .ally-health > .battle-exp, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > .enemy-health > .battle-energy { display:grid!important; grid-template-rows:7px 7px!important; gap:1px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span { grid-template-columns:10px minmax(0,1fr) auto!important; gap:3px!important; min-height:9px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span :is(i,svg) { width:10px!important;height:10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article > :is(.battle-vital,.battle-exp) > span :is(b,strong,small) { font-size:8px!important;line-height:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > :is(.ally-health,.enemy-health) > :is(.battle-exp,.battle-energy) > span :is(i,svg) { width:8px!important;height:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > :is(.ally-health,.enemy-health) > :is(.battle-exp,.battle-energy) > span :is(b,strong,small) { font-size:7.5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth .battle-hp-bar { height:9px!important; min-height:9px!important; border-color:#bad4d9!important; background:#dce9ec!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth .battle-energy > i, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth .battle-exp > i { height:7px!important; min-height:7px!important; border-color:#bfd5da!important; background:#dfeaed!important; } /* Statuses are independent, readable telemetry below the matching fighter. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-card-status-area { position:absolute!important; z-index:30!important; left:0!important; right:0!important; top:calc(100% + 4px)!important; bottom:auto!important; width:100%!important; height:22px!important; min-height:22px!important; padding:0 2px!important; display:block!important; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; transform:none!important; isolation:isolate!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-card-status-area:not(:has(.battle-status-chip)) { height:0!important; min-height:0!important; padding:0!important; pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-statuses { position:relative!important; z-index:31!important; width:100%!important; height:22px!important; min-height:22px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:3px!important; overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .enemy-health .battle-statuses { justify-content:flex-end!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-empty { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-chip, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-chip:nth-child(n+2) { position:relative!important; z-index:32!important; flex:0 1 auto!important; width:auto!important; min-width:22px!important; max-width:calc(50% - 2px)!important; height:22px!important; min-height:22px!important; padding:2px 5px!important; display:flex!important; align-items:center!important; gap:3px!important; overflow:hidden!important; border-radius:8px!important; box-shadow:0 2px 7px rgba(17,59,72,.13),inset 0 1px rgba(255,255,255,.65)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-icon { flex:none!important;width:15px!important;height:15px!important;border-radius:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-icon svg { width:13px!important;height:13px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-copy { min-width:0!important;display:flex!important;align-items:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-copy > b { font-size:7.5px!important;line-height:1!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-copy > small { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-more { height:22px!important; min-width:22px!important; padding:0 4px!important; display:grid!important; place-items:center!important; } /* Energy is one unboxed resource row with a visible battery gauge. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] { grid-template-rows:30px 80px 48px 36px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] :is(.combat-resource-row,.combat-energy) { height:30px!important; min-height:30px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-resource-row { padding:0 3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy { grid-template-columns:134px minmax(0,1fr)!important; gap:8px!important; border:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy > span { height:30px!important; grid-template-columns:23px auto minmax(0,1fr)!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy > span > :is(i,svg) { width:23px!important; height:23px!important; min-width:23px!important; min-height:23px!important; padding:0!important; display:grid!important; place-items:center!important; border:0!important; border-radius:0!important; outline:0!important; background:transparent!important; color:#149fc9!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy > span > i > svg { width:100%!important;height:100%!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy > span :is(small,b) { font-size:8.8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyTrack { height:10px!important; min-height:10px!important; max-height:10px!important; border:1px solid #9fcfdc!important; background:#d7e9ed!important; box-shadow:inset 0 1px 2px rgba(20,73,89,.14),0 1px rgba(255,255,255,.9)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyBar { height:100%!important; min-height:8px!important; background:linear-gradient(90deg,#42d2ed,#159dcb 72%,#70dcef)!important; box-shadow:inset 0 1px rgba(255,255,255,.52)!important; } /* The divider occupies its own pixel; item cells begin seven pixels lower. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel { height:48px!important; min-height:48px!important; padding:8px 0 0!important; grid-template-columns:52px minmax(0,1fr)!important; gap:4px!important; overflow:visible!important; border:0!important; border-top:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel::before { content:""!important; position:absolute!important; left:0!important; right:0!important; top:1px!important; width:auto!important; height:1px!important; display:block!important; background:#cee1e6!important; pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel::after { content:none!important;display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header { width:52px!important; height:40px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header > b { color:#456c79!important; font-size:7.2px!important; letter-spacing:.045em!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] #battleQuickItems { height:40px!important; min-height:40px!important; grid-template-rows:40px!important; gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button { max-width:40px!important; height:40px!important; min-height:40px!important; padding:1px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > span:first-child, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > .combat-cooldown { width:38px!important; height:38px!important; min-width:38px!important; min-height:38px!important; max-width:38px!important; max-height:38px!important; border-radius:12px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button.is-empty-slot, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button.is-empty-slot.is-disabled { opacity:1!important;filter:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button.is-empty-slot > span:first-child { overflow:hidden!important; border:1px solid #afcbd2!important; border-radius:12px!important; background:linear-gradient(145deg,rgba(249,253,254,.98),rgba(225,239,243,.94))!important; box-shadow:inset 0 1px #fff,inset 0 0 0 2px rgba(255,255,255,.34),0 2px 5px rgba(28,71,83,.08)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-empty-art { width:22px!important; height:22px!important; color:#5f7f8a!important; opacity:.9!important; filter:none!important; } } @media (max-width:340px) and (orientation:portrait) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article { grid-template-columns:40px minmax(0,1fr)!important;column-gap:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait-art > * { width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;max-width:38px!important;max-height:38px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-fighter-identity > header { gap:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-fighter-identity > header > b { font-size:10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-fighter-identity > header > em { min-width:28px!important;padding:0 3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy { grid-template-columns:128px minmax(0,1fr)!important;gap:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel { grid-template-columns:44px minmax(0,1fr)!important;gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header { width:44px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header > b { font-size:6.4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] #battleQuickItems { gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button { max-width:38px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > span:first-child, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > .combat-cooldown { width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important; } } @media (max-width:760px) and (max-height:650px) and (orientation:portrait) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article { height:74px!important; min-height:74px!important; max-height:74px!important; grid-template-columns:40px minmax(0,1fr)!important; grid-template-rows:24px 19px 14px!important; column-gap:5px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait-art > * { width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;max-width:38px!important;max-height:38px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-card-status-area { top:calc(100% + 3px)!important;height:18px!important;min-height:18px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-statuses, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-chip, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-chip:nth-child(n+2) { height:18px!important;min-height:18px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-icon { width:13px!important;height:13px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-copy > b { font-size:6.8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] { grid-template-rows:28px 72px 44px 34px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] :is(.combat-resource-row,.combat-energy) { height:28px!important;min-height:28px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyTrack { height:8px!important;min-height:8px!important;max-height:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyBar { min-height:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel { height:44px!important;min-height:44px!important;padding-top:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] #battleQuickItems { height:37px!important;min-height:37px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] #battleQuickItems { grid-template-rows:37px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > span:first-child, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-item-button > .combat-cooldown { width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important; } } @media (max-width:900px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] { --mobile-command-h:152px;--v6-deck-h:152px; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth { z-index:46!important;overflow:visible!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article { top:max(4px,env(safe-area-inset-top))!important; width:min(280px,calc(50% - 6px))!important; height:68px!important; min-height:68px!important; max-height:68px!important; padding:5px!important; grid-template-columns:40px minmax(0,1fr)!important; grid-template-rows:22px 18px 14px!important; column-gap:5px!important; row-gap:2px!important; overflow:visible!important; border:1px solid #bad7de!important; border-radius:13px!important; background:linear-gradient(155deg,rgba(255,255,255,.99),rgba(241,249,251,.98))!important; box-shadow:0 4px 12px rgba(18,62,77,.13),inset 0 1px #fff!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > .ally-health { left:3px!important;border-color:#a7d8ce!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > .enemy-health { right:3px!important;border-color:#efc2bd!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article::after { content:none!important;display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait-art > * { width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;max-width:38px!important;max-height:38px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait { grid-column:1!important;grid-row:1/4!important;border-width:1.5px!important;border-radius:12px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .ally-health .battle-combat-portrait { border-color:#50bba7!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .enemy-health .battle-combat-portrait { border-color:#ef756b!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-fighter-identity > header > b { font-size:10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article > .battle-vital-hp { grid-template-rows:8px 8px!important;gap:2px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > .ally-health > .battle-exp, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > .enemy-health > .battle-energy { display:grid!important;grid-template-rows:7px 6px!important;gap:1px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth .battle-hp-bar { height:8px!important;min-height:8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth .battle-energy > i, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth .battle-exp > i { height:6px!important;min-height:6px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-card-status-area { position:absolute!important;z-index:30!important;left:0!important;right:0!important;top:calc(100% + 3px)!important;bottom:auto!important;width:100%!important;height:18px!important;min-height:18px!important;padding:0 2px!important;display:block!important;overflow:visible!important;border:0!important;background:transparent!important;box-shadow:none!important;transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-card-status-area:not(:has(.battle-status-chip)) { height:0!important;min-height:0!important;padding:0!important;pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-statuses { width:100%!important;height:18px!important;min-height:18px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:2px!important;overflow:visible!important;transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .enemy-health .battle-statuses { justify-content:flex-end!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-empty { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-chip, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-chip:nth-child(n+2) { flex:0 1 auto!important;width:auto!important;min-width:18px!important;max-width:calc(50% - 1px)!important;height:18px!important;min-height:18px!important;padding:1px 4px!important;display:flex!important;align-items:center!important;gap:2px!important;border-radius:7px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-icon { width:13px!important;height:13px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-copy { display:flex!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-copy > b { font-size:6.8px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-status-copy > small { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] { grid-template-rows:28px 72px 34px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] :is(.combat-resource-row,.combat-energy) { height:28px!important;min-height:28px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy { grid-template-columns:128px minmax(0,1fr)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy > span > :is(i,svg) { width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;border:0!important;background:transparent!important;box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyTrack { height:8px!important;min-height:8px!important;max-height:8px!important;border:1px solid #9fcfdc!important;background:#d7e9ed!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyBar { min-height:6px!important;background:linear-gradient(90deg,#42d2ed,#159dcb 72%,#70dcef)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel { padding-left:8px!important;border:0!important;border-left:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel::before { content:""!important;position:absolute!important;left:1px!important;right:auto!important;top:4px!important;bottom:4px!important;width:1px!important;height:auto!important;display:block!important;background:#cee1e6!important;pointer-events:none!important; } } @media (max-width:560px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article { width:calc(50% - 6px)!important; height:68px!important; min-height:68px!important; max-height:68px!important; grid-template-columns:36px minmax(0,1fr)!important; grid-template-rows:22px 18px 14px!important; column-gap:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait-art, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait-art > * { width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:34px!important;max-height:34px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-combat-portrait { grid-row:1/4!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] .battle-fighter-identity { grid-template-rows:20px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > article > .battle-vital-hp { grid-column:2!important;grid-row:2!important;padding-right:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > .ally-health > .battle-exp, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-polish="v30"] #battleHealth > .enemy-health > .battle-energy { grid-column:2!important;grid-row:3!important;display:grid!important; } } /* ========================================================================== V31 — readable desktop status timers and aligned mobile resources. V30 remains the mobile geometry owner; this additive final layer repairs desktop effect chips, energy alignment/tip and the repeated item divider. ========================================================================== */ @media (min-width:901px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] .battle-card-status-area { grid-column:1/-1!important; grid-row:4!important; width:100%!important; height:28px!important; min-height:28px!important; padding:2px 0!important; display:block!important; overflow:hidden!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] .battle-statuses { position:relative!important; width:100%!important; height:24px!important; min-height:24px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:4px!important; overflow:hidden!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] .enemy-health .battle-statuses { justify-content:flex-end!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] .battle-status-empty { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] .battle-status-chip, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] .battle-status-chip:nth-child(n+2) { position:relative!important; z-index:1!important; flex:0 1 calc(50% - 2px)!important; width:auto!important; min-width:0!important; max-width:calc(50% - 2px)!important; height:24px!important; min-height:24px!important; padding:2px 5px!important; display:grid!important; grid-template-columns:16px minmax(0,1fr)!important; align-items:center!important; gap:4px!important; overflow:hidden!important; border:1px solid color-mix(in srgb,var(--status-color,currentColor) 38%,var(--bui-line))!important; border-radius:8px!important; background:linear-gradient(135deg,color-mix(in srgb,var(--status-color,currentColor) 13%,var(--bui-card)),color-mix(in srgb,var(--status-color,currentColor) 5%,var(--bui-card)))!important; color:var(--status-color,var(--bui-text))!important; box-shadow:inset 0 1px rgba(255,255,255,.55),0 2px 5px rgba(16,55,68,.08)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] .battle-status-chip::before { content:none!important; display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] .battle-status-chip::after { content:""!important; position:absolute!important; left:0!important; right:auto!important; bottom:0!important; width:calc(var(--status-ratio,1) * 100%)!important; height:2px!important; display:block!important; border-radius:0 999px 999px 0!important; background:currentColor!important; opacity:.42!important; pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] .battle-status-icon { grid-column:1!important; width:16px!important; height:16px!important; display:grid!important; place-items:center!important; border-radius:5px!important; background:color-mix(in srgb,currentColor 10%,transparent)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] .battle-status-icon svg { width:14px!important; height:14px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] .battle-status-copy { grid-column:2!important; min-width:0!important; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:4px!important; white-space:nowrap!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] .battle-status-copy > b { min-width:0!important; overflow:hidden!important; color:var(--bui-text)!important; font-size:9px!important; font-weight:850!important; line-height:1!important; text-overflow:ellipsis!important; white-space:nowrap!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] .battle-status-copy > small { min-width:29px!important; height:16px!important; padding:0 4px!important; display:grid!important; place-items:center!important; overflow:hidden!important; border:1px solid color-mix(in srgb,currentColor 22%,transparent)!important; border-radius:6px!important; background:color-mix(in srgb,currentColor 8%,rgba(255,255,255,.72))!important; color:currentColor!important; font-size:8px!important; font-weight:900!important; line-height:1!important; text-overflow:ellipsis!important; white-space:nowrap!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] .battle-status-more { flex:none!important; width:auto!important; min-width:24px!important; height:22px!important; padding:0 5px!important; display:grid!important; place-items:center!important; } } @media (max-width:760px), (max-width:900px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-resource-row, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy { align-items:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy > span { align-self:center!important; margin:0!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyTrack { position:relative!important; top:auto!important; right:auto!important; bottom:auto!important; left:auto!important; align-self:center!important; margin:0!important; display:block!important; overflow:visible!important; box-sizing:border-box!important; vertical-align:middle!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyBar { position:relative!important; min-height:0!important; overflow:visible!important; border-radius:inherit!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyBar::before { content:none!important; display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyBar::after { content:""!important; position:absolute!important; top:1px!important; right:-2px!important; width:6px!important; height:6px!important; display:block!important; float:none!important; border:1px solid rgba(255,255,255,.94)!important; border-radius:50%!important; background:#d8faff!important; opacity:1!important; box-shadow:0 0 4px #baf5ff,0 0 8px rgba(58,211,241,.82)!important; pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-energy[data-energy-state="empty"] #battleCommandEnergyBar::after { content:none!important; display:none!important; } /* The repeated divider is removed; whitespace now separates skills/items. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel { padding:4px 0 0!important; border:0!important; border-top:0!important; border-left:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel::after { content:none!important; display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel > header, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] #battleQuickItems { align-self:center!important; margin:0!important; } } @media (max-width:760px) and (max-height:650px) and (orientation:portrait), (max-width:900px) and (max-height:650px) and (orientation:landscape) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] #battleCommandEnergyBar::after { top:1px!important; right:-1px!important; width:4px!important; height:4px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-status-polish="v31"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-items-panel { padding-top:3px!important; } } /* ========================================================================== V32 — cohesive surrender, contained energy and native capture scene. The capture UI is a dedicated state on desktop and phone. All chance, inventory and animation data remains server authoritative. ========================================================================== */ #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] { --bui-font:Inter,"Segoe UI Variable","Segoe UI",ui-rounded,system-ui,sans-serif; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] :is( .battle-surrender-confirm,.battle-surrender-confirm *, .capture-stage,.capture-stage *, .combat-capture-panel,.combat-capture-panel * ) { font-family:var(--bui-font)!important; font-variant-numeric:tabular-nums; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .battle-surrender-confirm { padding:clamp(12px,3vw,24px)!important; background:color-mix(in srgb,#062635 28%,transparent)!important; -webkit-backdrop-filter:blur(2px)!important; backdrop-filter:blur(2px)!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .battle-surrender-confirm > article { width:min(460px,calc(100% - 16px))!important; padding:18px!important; grid-template-columns:48px minmax(0,1fr)!important; gap:10px 14px!important; overflow:hidden!important; border:1px solid color-mix(in srgb,var(--bui-danger) 38%,var(--bui-line))!important; border-radius:17px!important; background:linear-gradient(145deg,color-mix(in srgb,var(--bui-danger) 5%,var(--bui-surface-raised)),var(--bui-surface))!important; color:var(--bui-text)!important; box-shadow:inset 0 1px rgba(255,255,255,.55),0 22px 60px var(--bui-shadow)!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .battle-surrender-confirm > article::before { content:""!important; position:absolute!important; top:0!important; right:0!important; left:0!important; height:3px!important; background:linear-gradient(90deg,var(--bui-danger),color-mix(in srgb,var(--bui-danger) 18%,transparent))!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .battle-surrender-confirm > article > i { width:46px!important; height:46px!important; padding:10px!important; border:1px solid color-mix(in srgb,var(--bui-danger) 32%,var(--bui-line))!important; border-radius:12px!important; background:color-mix(in srgb,var(--bui-danger) 9%,var(--bui-card))!important; color:var(--bui-danger)!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .battle-surrender-confirm small { color:var(--bui-danger)!important;font-size:9px!important;line-height:1.1!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .battle-surrender-confirm b { color:var(--bui-text)!important;font-size:21px!important;font-weight:850!important;line-height:1.05!important;letter-spacing:-.02em!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .battle-surrender-confirm p { color:var(--bui-muted)!important;font-size:12px!important;line-height:1.45!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .battle-surrender-confirm footer { gap:9px!important;margin-top:3px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .battle-surrender-confirm footer > button { min-height:44px!important; padding:0 14px!important; border-radius:11px!important; border:1px solid var(--bui-line)!important; background:var(--bui-card)!important; color:var(--bui-text)!important; font-size:12px!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] #confirmSurrender { border-color:color-mix(in srgb,var(--bui-danger) 52%,var(--bui-line))!important; background:var(--bui-danger)!important; color:#fff!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] #battleCommandEnergyTrack { position:relative!important; height:10px!important; min-height:10px!important; max-height:10px!important; padding:1px!important; overflow:hidden!important; border:1px solid color-mix(in srgb,var(--bui-accent) 32%,var(--bui-line))!important; border-radius:999px!important; background:color-mix(in srgb,var(--bui-accent) 10%,var(--bui-track))!important; box-shadow:inset 0 1px 2px rgba(7,63,82,.16)!important; box-sizing:border-box!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] #battleCommandEnergyBar { position:relative!important; width:min(var(--energy-level,0%),100%)!important; max-width:100%!important; height:100%!important; min-height:0!important; overflow:hidden!important; border-radius:999px!important; background:linear-gradient(90deg,#39c4e6 0%,#199fd0 72%,#69ddf0 100%)!important; box-shadow:0 0 7px rgba(45,194,229,.28)!important; box-sizing:border-box!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] #battleCommandEnergyBar::after { content:""!important; position:absolute!important; top:50%!important; right:1px!important; width:4px!important; height:calc(100% - 2px)!important; display:block!important; transform:translateY(-50%)!important; border:0!important; border-radius:3px!important; background:#eaffff!important; box-shadow:0 0 4px #d9fbff,0 0 7px rgba(71,214,240,.72)!important; pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-energy[data-energy-state="empty"] #battleCommandEnergyBar::after { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-energy-current { display:none!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-stage { --capture-chance-color:#ef6666; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-stage[data-chance="medium"] { --capture-chance-color:#e6b64f; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-stage[data-chance="high"] { --capture-chance-color:#54cf8b; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-ring-inner { border-color:var(--capture-chance-color)!important;box-shadow:0 0 16px color-mix(in srgb,var(--capture-chance-color) 62%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-feedback { min-width:220px!important; padding:8px 12px!important; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; gap:2px 10px!important; border-radius:12px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-feedback > small { grid-column:1!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-feedback > b { grid-column:1!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-feedback > em { grid-column:2!important; grid-row:1/3!important; align-self:center!important; color:var(--capture-chance-color)!important; font-size:9px!important; font-style:normal!important; font-weight:900!important; letter-spacing:.06em!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-command-deck[data-view="capture"] { height:132px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-panel { grid-template-columns:190px minmax(0,1fr) 126px!important; gap:10px!important; padding:10px!important; border-radius:16px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-copy { gap:3px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-copy b { font-size:13px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-copy em { white-space:normal!important;font-size:9px!important;line-height:1.25!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-copy strong { color:var(--capture-chance-color,var(--bui-accent))!important;font-size:10px!important;font-weight:900!important;letter-spacing:.04em!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls { justify-content:flex-start!important; gap:7px!important; overflow-x:auto!important; overflow-y:hidden!important; overscroll-behavior-inline:contain!important; scrollbar-width:thin!important; scrollbar-color:var(--bui-line-strong) transparent!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls > button { width:68px!important; min-width:68px!important; height:96px!important; min-height:96px!important; padding:5px 4px!important; grid-template-rows:46px 13px 13px 12px!important; gap:1px!important; overflow:hidden!important; border-radius:12px!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls > button.is-selected { transform:translateY(-1px)!important;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--bui-accent) 42%,transparent)!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls .capture-ball-icon, #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-throw-icon { border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls .capture-ball-icon { width:44px!important;height:44px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls b { font-size:8px!important;line-height:1!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls > button > span { width:100%!important;display:flex!important;justify-content:center!important;gap:3px!important;font-size:7px!important;line-height:1!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls > button > span em { color:var(--bui-muted)!important;font-style:normal!important;font-weight:800!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls > button > span strong { color:var(--capture-chance-color,var(--bui-accent))!important;font-weight:950!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls > button[data-chance="medium"] { --capture-chance-color:#d6a22f; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls > button[data-chance="high"] { --capture-chance-color:#32b876; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-cancel { min-height:44px!important;height:auto!important;padding:8px 10px!important;font-size:9px!important;line-height:1.2!important; } @media (max-width:760px), (hover:none) and (pointer:coarse) { #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .battle-surrender-confirm > article { width:min(430px,calc(100% - 8px))!important;padding:15px!important;grid-template-columns:42px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .battle-surrender-confirm > article > i { width:40px!important;height:40px!important;padding:8px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .battle-surrender-confirm b { font-size:19px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .battle-surrender-confirm p { font-size:11px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .battle-surrender-confirm footer > button { min-height:44px!important;font-size:11px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] #battleCommandEnergyTrack { height:10px!important;min-height:10px!important;max-height:10px!important;overflow:hidden!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] #battleCommandEnergyBar { overflow:hidden!important;max-width:100%!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-command-deck[data-view="capture"] { right:6px!important; bottom:max(6px,env(safe-area-inset-bottom))!important; left:6px!important; width:auto!important; height:154px!important; max-height:34dvh!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-panel { padding:8px!important; grid-template-columns:minmax(0,1fr) 112px!important; grid-template-rows:43px minmax(0,1fr)!important; grid-template-areas:"copy cancel" "balls balls"!important; gap:5px 8px!important; border-radius:16px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-copy { grid-area:copy!important;display:grid!important;grid-template-columns:auto 1fr!important;grid-template-rows:13px 14px!important;column-gap:7px!important;align-content:center!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-copy small { grid-column:1!important;grid-row:1!important;font-size:7px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-copy b { grid-column:1/3!important;grid-row:2!important;font-size:11px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-copy em { display:none!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-copy strong { grid-column:2!important;grid-row:1!important;justify-self:start!important;font-size:8px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls { grid-area:balls!important;min-height:0!important;align-items:center!important;padding:0 1px 1px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls > button { width:62px!important;min-width:62px!important;height:86px!important;min-height:86px!important;grid-template-rows:42px 12px 12px 11px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls .capture-ball-icon { width:40px!important;height:40px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-cancel { grid-area:cancel!important;min-height:40px!important;height:40px!important;padding:0 8px!important;font-size:8px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-throw { width:72px!important;height:72px!important;bottom:calc(max(6px,env(safe-area-inset-bottom)) + 164px)!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-throw-icon { width:52px!important;height:52px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-throw > em { font-size:7px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-target-reticle { top:31dvh!important;width:clamp(88px,24vw,118px)!important;height:clamp(88px,24vw,118px)!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-feedback { top:clamp(116px,17dvh,148px)!important;min-width:0!important;width:min(280px,calc(100% - 24px))!important;padding:7px 10px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-gesture-hint { display:none!important; } } @media (max-width:380px), (max-height:650px) { #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-command-deck[data-view="capture"] { height:138px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-panel { grid-template-rows:38px minmax(0,1fr)!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls > button { width:56px!important;min-width:56px!important;height:76px!important;min-height:76px!important;grid-template-rows:36px 11px 11px 10px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .combat-capture-balls .capture-ball-icon { width:35px!important;height:35px!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-polish="v32"] .capture-throw { width:64px!important;height:64px!important;bottom:calc(max(6px,env(safe-area-inset-bottom)) + 147px)!important; } } /* ========================================================================== V34 — generated raster capture atlas, contained result CTA and energy rail. This is the terminal ownership layer for result/capture geometry. ========================================================================== */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleDecision.battle-result-layer:not([hidden]) { position:absolute!important; inset:0!important; box-sizing:border-box!important; display:grid!important; place-items:center!important; align-content:center!important; padding:clamp(18px,4dvh,38px) clamp(14px,3vw,32px)!important; overflow:hidden!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleDecision .battle-result-card { position:relative!important; width:min(680px,calc(100% - 8px))!important; height:auto!important; min-height:0!important; max-height:calc(100% - 8px)!important; margin:0!important; padding:22px 26px 30px!important; box-sizing:border-box!important; grid-template-rows:auto auto auto!important; gap:16px!important; align-self:center!important; align-content:start!important; overflow:visible!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleDecision.has-many-results .battle-result-card { overflow:auto!important; overscroll-behavior:contain!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleDecision .battle-result-actions { position:static!important; inset:auto!important; min-height:46px!important; margin:4px 0 0!important; align-self:start!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleDecision .battle-result-action { position:static!important; inset:auto!important; margin:0!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleCommandEnergyTrack { position:relative!important; height:10px!important; min-height:10px!important; max-height:10px!important; padding:1px!important; box-sizing:border-box!important; overflow:hidden!important; border:1px solid color-mix(in srgb,var(--bui-accent) 34%,var(--bui-line))!important; border-radius:999px!important; background:linear-gradient(180deg,color-mix(in srgb,var(--bui-accent) 9%,#e8f3f5),color-mix(in srgb,var(--bui-accent) 15%,#d7e7ea))!important; box-shadow:inset 0 1px 2px rgba(7,63,82,.16)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleCommandEnergyBar { position:relative!important; width:min(var(--energy-level,0%),100%)!important; max-width:100%!important; height:100%!important; min-height:0!important; overflow:hidden!important; border-radius:inherit!important; background:linear-gradient(90deg,#1597d3 0%,#28c7ea 62%,#79f1db 100%)!important; box-shadow:inset 0 1px rgba(255,255,255,.42),0 0 7px rgba(40,199,234,.34)!important; box-sizing:border-box!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleCommandEnergyBar::before { content:none!important; display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleCommandEnergyBar::after { content:""!important; position:absolute!important; top:50%!important; right:1px!important; width:6px!important; height:6px!important; display:block!important; float:none!important; transform:translateY(-50%)!important; border:0!important; border-radius:50%!important; background:#efffff!important; box-shadow:0 0 4px #fff,0 0 7px #52e7ef!important; pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] .combat-energy[data-energy-state="empty"] #battleCommandEnergyBar::after { content:none!important; display:none!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] .item-ball-raster { width:100%!important; height:100%!important; background-image:var(--ball-atlas)!important; background-repeat:no-repeat!important; background-size:500% 300%!important; background-position:var(--ball-atlas-x) var(--ball-atlas-y)!important; filter:drop-shadow(0 3px 3px rgba(12,42,58,.2))!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] :is(.capture-ball-icon,.capture-throw-icon).category-balls, #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] .combat-capture-balls .capture-ball-icon { overflow:visible!important; border:0!important; background:transparent!important; box-shadow:none!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] :is(.capture-ball-icon,.capture-throw-icon).category-balls::before { content:none!important; display:none!important; } @media (max-width:760px), (hover:none) and (pointer:coarse) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleDecision.battle-result-layer:not([hidden]) { padding:max(12px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleDecision .battle-result-card { width:min(420px,calc(100% - 2px))!important; max-height:calc(100% - 2px)!important; padding:15px 14px 20px!important; gap:10px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleDecision .battle-result-actions { min-height:44px!important; margin-top:3px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleCommandEnergyTrack { height:12px!important; min-height:12px!important; max-height:12px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleCommandEnergyBar::after { width:7px!important; height:7px!important; } } /* ========================================================================== V37 — authored 3D capture balls and a single presentation owner. Core ball art is shared by inventory, selector, held control and Canvas. The legacy phase atlas is deliberately not layered over these images. ========================================================================== */ .item-ball-raster-v37 { display:block!important; width:100%!important; height:100%!important; object-fit:contain!important; object-position:center!important; background:transparent!important; filter:drop-shadow(0 4px 4px rgba(7,35,50,.22))!important; transform:translateZ(0)!important; } #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] #battleLiveControls[hidden], #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] #capturePanel[hidden] { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw { contain:layout style!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw-icon { width:92px!important; height:92px!important; display:grid!important; place-items:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw-icon > .item-ball-raster-v37 { width:90px!important; height:90px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw.is-aiming .item-ball-raster-v37 { filter:drop-shadow(0 7px 7px rgba(2,31,45,.32)) drop-shadow(0 0 7px rgba(99,228,255,.38))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .combat-capture-balls > button { isolation:isolate!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .combat-capture-balls .capture-ball-icon { display:grid!important; place-items:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .combat-capture-balls > button.is-selected { border-color:color-mix(in srgb,var(--bui-accent) 62%,#fff)!important; background:linear-gradient(180deg,color-mix(in srgb,var(--bui-accent) 8%,#fff),rgba(240,249,252,.86))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-stage.is-resolving .capture-aim-guide, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-stage.is-resolving .capture-ring-inner { opacity:0!important; } @media (max-width:760px), (hover:none) and (pointer:coarse) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw { width:82px!important; height:82px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw-icon, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw-icon > .item-ball-raster-v37 { width:78px!important; height:78px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .combat-capture-balls { scroll-snap-type:x mandatory!important; -webkit-overflow-scrolling:touch!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .combat-capture-balls > button { scroll-snap-align:center!important; touch-action:manipulation!important; } } @media (max-width:380px), (max-height:650px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw { width:68px!important; height:68px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw-icon, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw-icon > .item-ball-raster-v37 { width:64px!important; height:64px!important; } } @media (max-width:380px), (max-height:650px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-atlas="v34"] #battleDecision .battle-result-card { padding:10px 10px 14px!important; gap:7px!important; } } /* ========================================================================== V35.1 — minimal fixes on the verified v34 layout. This layer intentionally owns no deck, card, item or roster geometry. ========================================================================== */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-minimal-fix="v35-1"] .combat-energy > span > :is(i,svg) { border:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; filter:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-minimal-fix="v35-1"] #battleCommandEnergyBar::after { content:none!important; display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-minimal-fix="v35-1"] .combat-energy-marker { position:absolute!important; z-index:4!important; left:clamp(6px,var(--energy-level,0%),calc(100% - 6px))!important; top:50%!important; width:10px!important; height:10px!important; display:block!important; overflow:visible!important; color:#f4fdff!important; filter:none!important; transform:translate(-50%,-50%)!important; transition:left .22s ease!important; pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-minimal-fix="v35-1"] .combat-energy[data-energy-state="empty"] .combat-energy-marker { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-minimal-fix="v35-1"] .combat-action-button.is-cooling { opacity:1!important; filter:saturate(.9) brightness(.94)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-minimal-fix="v35-1"] .combat-action-button.is-cooling > .combat-cooldown { background:conic-gradient(from 0deg,rgba(3,17,26,.52) var(--cooldown-sweep,0deg),rgba(9,37,48,.08) 0)!important; box-shadow:inset 0 0 0 2px rgba(2,22,31,.58),0 0 0 2px color-mix(in srgb,var(--combat-ring) 54%,rgba(5,32,42,.54))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-minimal-fix="v35-1"] .combat-action-button.is-cooling > .combat-cooldown > b { border-color:rgba(189,235,246,.3)!important; background:rgba(2,21,30,.74)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-minimal-fix="v35-1"] .battle-matchup-arrow { font-size:12px!important; font-style:normal!important; font-weight:950!important; letter-spacing:-.04em!important; line-height:1!important; } /* ========================================================================== V36 — raster capture presentation. The interactive area remains large, but the visible control is only the selected 3D ball: no white disc, card or duplicate frame behind it. ========================================================================== */ #battleHud[data-battle-ui="2.9.9"][data-capture-presentation="v36"] .item-ball-raster { background-image:var(--ball-atlas)!important; background-size:500% 300%!important; background-position:var(--ball-atlas-x) var(--ball-atlas-y)!important; filter:drop-shadow(0 4px 4px rgba(7,35,50,.2))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-presentation="v36"] .capture-throw { width:92px!important; height:92px!important; padding:0!important; overflow:visible!important; border:0!important; border-radius:50%!important; outline:0!important; background:transparent!important; box-shadow:none!important; filter:drop-shadow(0 10px 10px rgba(4,36,50,.28))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-presentation="v36"] .capture-throw::before { inset:3px!important; border-radius:50%!important; background:conic-gradient(from -90deg,#66e5ff var(--capture-spin-turn),transparent 0)!important; -webkit-mask:radial-gradient(circle,transparent 66%,#000 69%,#000 74%,transparent 77%)!important; mask:radial-gradient(circle,transparent 66%,#000 69%,#000 74%,transparent 77%)!important; opacity:0!important; transition:opacity .12s ease!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-presentation="v36"] .capture-throw.is-aiming::before { opacity:.9!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-presentation="v36"] .capture-throw.is-aiming { box-shadow:none!important; filter:drop-shadow(0 14px 12px rgba(4,36,50,.34)) drop-shadow(0 0 8px rgba(92,224,255,.42))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-presentation="v36"] .capture-throw-icon { width:86px!important; height:86px!important; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-presentation="v36"] .capture-throw > em, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-presentation="v36"] .capture-spin-meter { display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-presentation="v36"] .combat-capture-balls .capture-ball-icon { overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-presentation="v36"] .combat-capture-balls > button.is-selected .capture-ball-icon { transform:translateY(-1px) scale(1.05)!important; } @media (max-width:760px), (hover:none) and (pointer:coarse) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-presentation="v36"] .capture-throw { width:74px!important; height:74px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-presentation="v36"] .capture-throw-icon { width:70px!important; height:70px!important; } } @media (max-width:380px), (max-height:650px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-presentation="v36"] .capture-throw { width:64px!important; height:64px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-presentation="v36"] .capture-throw-icon { width:60px!important; height:60px!important; } } /* ========================================================================== V36.1 — mobile-only energy alignment and true result centring. No combat deck, skill, item, roster or capture geometry is changed here. ========================================================================== */ @media (max-width:760px), (hover:none) and (pointer:coarse) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-hotfix="v36-1"] .combat-energy { align-items:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-hotfix="v36-1"] .combat-energy > span { grid-template-columns:24px auto minmax(0,1fr)!important; align-items:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-hotfix="v36-1"] .combat-energy > span > i { width:24px!important; height:24px!important; min-width:24px!important; min-height:24px!important; display:grid!important; place-items:center!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-hotfix="v36-1"] .combat-energy > span > i > svg { width:19px!important; height:19px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-hotfix="v36-1"] #battleCommandEnergyTrack { align-self:center!important; top:auto!important; bottom:auto!important; width:100%!important; height:12px!important; min-height:12px!important; max-height:12px!important; margin:0!important; overflow:visible!important; transform:translateY(-1px)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-hotfix="v36-1"] #battleCommandEnergyBar { top:auto!important; bottom:auto!important; height:100%!important; min-height:0!important; max-height:100%!important; margin:0!important; overflow:hidden!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-hotfix="v36-1"] .combat-energy-marker { left:clamp(8px,var(--energy-level,0%),calc(100% - 8px))!important; top:50%!important; width:16px!important; height:16px!important; min-width:16px!important; min-height:16px!important; color:#f7feff!important; filter:drop-shadow(0 0 2px rgba(34,189,224,.9))!important; transform:translate(-50%,-50%)!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-hotfix="v36-1"] #battleDecision.battle-result-layer:not([hidden]) { position:absolute!important; inset:0!important; top:0!important; right:0!important; bottom:0!important; left:0!important; width:100%!important; height:100%!important; min-height:100%!important; max-height:none!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important; overflow:hidden!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-hotfix="v36-1"] #battleDecision .battle-result-card { flex:0 1 420px!important; align-self:auto!important; justify-self:auto!important; width:min(420px,100%)!important; max-height:calc(100% - 2px)!important; margin:auto!important; transform:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-hotfix="v36-1"] #battleDecision.has-many-results .battle-result-card { overflow:auto!important; overscroll-behavior:contain!important; } } @media (max-width:760px) and (max-height:650px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-mobile-hotfix="v36-1"] #battleDecision .battle-result-card { max-height:calc(100% - 2px)!important; overflow:auto!important; overscroll-behavior:contain!important; } } /* V36.2 cascade lock — placed after the v36.1 mobile owner on purpose. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] #battleCommandEnergyBar::before, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] #battleCommandEnergyBar::after { content:none!important; display:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] .combat-energy-marker { overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; filter:none!important; } @media (max-width:760px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] #battleHealth > .ally-health { --fighter-accent:#38aa92; border-color:#a7d8ce!important; background:linear-gradient(145deg,rgba(226,249,244,.99),rgba(250,253,254,.99) 38%,rgba(241,249,251,.98))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] #battleHealth > .enemy-health { --fighter-accent:#e46f66; border-color:#efc2bd!important; background:linear-gradient(215deg,rgba(255,234,231,.99),rgba(251,253,254,.99) 38%,rgba(247,249,250,.98))!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] #battleHealth > article::before { content:""!important; position:absolute!important; z-index:0!important; inset:0!important; width:auto!important; height:auto!important; display:block!important; border:0!important; border-radius:inherit!important; background:linear-gradient(112deg,color-mix(in srgb,var(--fighter-accent) 11%,transparent),transparent 45%)!important; box-shadow:none!important; opacity:1!important; pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] #battleHealth > article::after { content:""!important; position:absolute!important; z-index:0!important; inset:0!important; display:block!important; border-radius:inherit!important; background:var(--fighter-accent)!important; -webkit-mask:url('/assets/v3.0/combat/fighter-card-pokeball-pattern.svg') left -26px center / 150px 100px no-repeat!important; mask:url('/assets/v3.0/combat/fighter-card-pokeball-pattern.svg') left -26px center / 150px 100px no-repeat!important; opacity:.055!important; pointer-events:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-visual-fix="v36-2"] #battleHealth > .enemy-health::after { -webkit-mask-position:right -26px center!important; mask-position:right -26px center!important; transform:scaleX(-1)!important; } } /* V37 terminal capture ownership. Keep this after every v36 compatibility layer. */ html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw { width:96px!important; height:96px!important; border:0!important; background:transparent!important; box-shadow:none!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw-icon, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw-icon > .item-ball-raster-v37 { width:92px!important; height:92px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .item-ball-raster-v37 { object-fit:contain!important; background:transparent!important; } @media (max-width:760px), (hover:none) and (pointer:coarse) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw { width:82px!important; height:82px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw-icon, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw-icon > .item-ball-raster-v37 { width:78px!important; height:78px!important; } } @media (max-width:380px), (max-height:650px) { html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw { width:68px!important; height:68px!important; } html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw-icon, html[data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-capture-flight="v37"] .capture-throw-icon > .item-ball-raster-v37 { width:64px!important; height:64px!important; } } /* pk-style-source:32 */ /* /airship-flight-r1.css */ /* Original complete ship, stable perspective, one direction of cloud motion. */ #app.is-airship-loading #gameScreen #airshipTransition.is-open{z-index:800!important} #app.is-airship-loading #toast{visibility:hidden!important} #airshipTransition[data-airship-revision="r1"]{--flight-progress:0;position:absolute;inset:0;z-index:140;display:block;overflow:hidden;isolation:isolate;visibility:hidden;opacity:0;pointer-events:none;background:#91cfe9;transition:opacity .22s ease,visibility 0s linear .22s;color:#24475b;font-family:Inter,"Segoe UI",system-ui,sans-serif;user-select:none;-webkit-user-select:none} #airshipTransition[data-airship-revision="r1"].is-open{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s} #airshipTransition[data-airship-revision="r1"] img{pointer-events:none;-webkit-user-drag:none;user-select:none} #airshipTransition[data-airship-revision="r1"] .airship-sky{position:absolute;inset:-4%;z-index:0;background:url('/assets/v2.1/transit/airship-sky.png') center/cover no-repeat;filter:none;transform:none;animation:none} #airshipTransition[data-airship-revision="r1"] .airship-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#e5f4f944,transparent 60%),linear-gradient(0deg,#c9e7f63d,transparent 55%)} #airshipTransition[data-airship-revision="r1"] .airship-cloud{position:absolute;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,#ffffffb3,transparent 68%);filter:blur(12px);z-index:1;left:100%;right:auto;aspect-ratio:3.4;animation:airshipR1Clouds 32s linear infinite} #airshipTransition[data-airship-revision="r1"] .cloud-far{width:38vw;top:18%;opacity:.3;animation-delay:-15s} #airshipTransition[data-airship-revision="r1"] .cloud-front{width:65vw;bottom:-9%;opacity:.6;animation-duration:21s;animation-delay:-4s} #airshipTransition[data-airship-revision="r1"] .airship-cinematic-stage{position:absolute;inset:max(24px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:clamp(24px,5vw,92px);align-items:center;max-width:1500px;margin:auto;z-index:3;opacity:1;transform:none;transition:none} #airshipTransition[data-airship-revision="r1"] .airship-vehicle-stage{grid-column:2;grid-row:1;position:relative;justify-self:center;align-self:center;width:min(100%,780px);max-width:100%;aspect-ratio:1100/900;max-height:76dvh;perspective:none;filter:none;transform:none;opacity:1;animation:airshipR1Float 5.5s ease-in-out infinite alternate;will-change:transform} #airshipTransition[data-airship-revision="r1"] .airship-flight-vehicle{position:relative;inset:auto;width:100%;height:100%;max-height:76dvh;display:block;object-fit:contain;filter:drop-shadow(0 16px 20px #1b517326);transform:none;animation:none;opacity:0;transition:opacity .25s ease} #airshipTransition[data-airship-revision="r1"].is-art-ready .airship-flight-vehicle{opacity:1} #airshipTransition[data-airship-revision="r1"] .airship-flight-console{grid-column:1;grid-row:1;position:relative;inset:auto;align-self:center;min-width:0;max-width:100%;margin-top:7vh;padding:clamp(20px,2.2vw,30px);border:1px solid #ffffffe0;border-radius:22px;background:#f8fcfff0;box-shadow:0 16px 44px #285b7b1a;backdrop-filter:none;opacity:1;transform:none;transition:none} #airshipTransition[data-airship-revision="r1"] .airship-flight-console::before{content:none} #airshipTransition[data-airship-revision="r1"] .airship-console-heading{display:flex;align-items:center;gap:12px;padding:0 0 20px;border-bottom:1px solid #d9e8ef} #airshipTransition[data-airship-revision="r1"] .airship-console-heading>img{flex:none;width:44px;height:34px;object-fit:contain} #airshipTransition[data-airship-revision="r1"] .airship-console-heading>span{min-width:0;display:grid;gap:5px} #airshipTransition[data-airship-revision="r1"] .airship-console-heading small{font-size:10px;letter-spacing:.12em;font-weight:700;color:#4e829d} #airshipTransition[data-airship-revision="r1"] h2{margin:0;font-size:clamp(20px,2vw,27px);font-weight:750;line-height:1.2;color:#204b64;overflow-wrap:anywhere} #airshipTransition[data-airship-revision="r1"] .airship-destination{display:grid;gap:6px;margin:21px 0 18px;min-width:0} #airshipTransition[data-airship-revision="r1"] .airship-destination>small{font-size:10px;letter-spacing:.1em;color:#5a7e92;font-weight:700} #airshipTransition[data-airship-revision="r1"] .airship-destination>b{font-size:19px;line-height:1.3;color:#234e64;overflow-wrap:anywhere} #airshipTransition[data-airship-revision="r1"] .airship-destination>span{font-size:12px;line-height:1.5;color:#5a7788} #airshipTransition[data-airship-revision="r1"] .airship-route-progress{position:relative;height:5px;border-radius:6px;background:#d9e8ef;overflow:hidden} #airshipTransition[data-airship-revision="r1"] .airship-route-progress>i{position:absolute;inset:0;background:#2496bd;border-radius:inherit;transform-origin:left;transform:scaleX(var(--flight-progress));transition:transform .15s linear} #airshipTransition[data-airship-revision="r1"] .airship-flight-meta{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-top:9px;font-size:11px;color:#5b7788;line-height:1.45} #airshipTransition[data-airship-revision="r1"] .airship-flight-meta>span:last-child{display:grid;text-align:right;gap:2px;flex:none} #airshipTransition[data-airship-revision="r1"] .airship-flight-meta small{font-size:10px;max-width:130px} #airshipTransition[data-airship-revision="r1"] #airshipFlightTimer{font-size:15px;color:#285a71;font-variant-numeric:tabular-nums} #airshipTransition[data-airship-revision="r1"] .airship-loading-steps{list-style:none;display:flex;gap:6px;margin:22px 0 16px;padding:0} #airshipTransition[data-airship-revision="r1"] .airship-loading-steps>li{display:flex;align-items:center;gap:5px;font-size:11px;line-height:1.4;color:#728a98;flex:1} #airshipTransition[data-airship-revision="r1"] .airship-loading-steps>li::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid #9db5c3;flex:none} #airshipTransition[data-airship-revision="r1"] .airship-loading-steps>li[data-state="current"]{color:#237da1;font-weight:700} #airshipTransition[data-airship-revision="r1"] .airship-loading-steps>li[data-state="current"]::before{background:#298fb2;border-color:#298fb2;box-shadow:0 0 0 3px #2998bd15} #airshipTransition[data-airship-revision="r1"] .airship-loading-steps>li[data-state="done"]::before{background:#6a9e8c;border-color:#6a9e8c} #airshipTransition[data-airship-revision="r1"] #airshipArrivalHint{margin:0;min-height:3em;font-size:12px;line-height:1.6;color:#597786} #airshipTransition:not(.is-open) *,#airshipTransition:not(.is-open) *::before,#airshipTransition:not(.is-open) *::after,#airshipTransition.is-document-hidden *{animation-play-state:paused!important} @keyframes airshipR1Float{from{transform:translate3d(-5px,4px,0)}to{transform:translate3d(5px,-4px,0)}} @keyframes airshipR1Clouds{from{transform:translate3d(0,0,0)}to{transform:translate3d(-190vw,0,0)}} @media(max-width:800px){ #airshipTransition[data-airship-revision="r1"] .airship-cinematic-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:14px;inset:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))} #airshipTransition[data-airship-revision="r1"] .airship-vehicle-stage{grid-column:1;grid-row:1;width:min(88vw,530px);height:100%;min-height:0;max-height:100%;aspect-ratio:auto} #airshipTransition[data-airship-revision="r1"] .airship-flight-vehicle{max-height:100%} #airshipTransition[data-airship-revision="r1"] .airship-flight-console{grid-column:1;grid-row:2;justify-self:center;width:min(100%,440px);box-sizing:border-box;margin:0;padding:20px;border-radius:18px;max-height:calc(100dvh - 32px);overflow:auto} #airshipTransition[data-airship-revision="r1"] .airship-console-heading{padding-bottom:14px} #airshipTransition[data-airship-revision="r1"] .airship-destination{margin:16px 0} #airshipTransition[data-airship-revision="r1"] .airship-loading-steps{margin:18px 0 12px} } @media(max-width:430px) and (max-height:720px){ #airshipTransition[data-airship-revision="r1"] .airship-flight-console{padding:16px} #airshipTransition[data-airship-revision="r1"] .airship-console-heading{padding-bottom:12px} #airshipTransition[data-airship-revision="r1"] .airship-destination{margin:12px 0} #airshipTransition[data-airship-revision="r1"] h2{font-size:19px} #airshipTransition[data-airship-revision="r1"] .airship-destination>b{font-size:17px} } @media(max-height:560px) and (orientation:landscape){ #airshipTransition[data-airship-revision="r1"] .airship-cinematic-stage{grid-template-columns:minmax(260px,340px) minmax(0,1fr);grid-template-rows:1fr;gap:20px;inset:14px max(20px,env(safe-area-inset-right)) 14px max(20px,env(safe-area-inset-left))} #airshipTransition[data-airship-revision="r1"] .airship-flight-console{grid-column:1;grid-row:1;padding:16px;max-height:calc(100dvh - 28px);overflow:auto} #airshipTransition[data-airship-revision="r1"] .airship-vehicle-stage{grid-column:2;grid-row:1;width:100%;max-height:82dvh} #airshipTransition[data-airship-revision="r1"] .airship-flight-vehicle{max-height:82dvh} #airshipTransition[data-airship-revision="r1"] .airship-console-heading{padding-bottom:10px} #airshipTransition[data-airship-revision="r1"] h2{font-size:18px} #airshipTransition[data-airship-revision="r1"] .airship-destination{margin:10px 0} #airshipTransition[data-airship-revision="r1"] .airship-loading-steps{margin:12px 0 8px} } @media(prefers-reduced-motion:reduce){#airshipTransition[data-airship-revision="r1"] *,#airshipTransition[data-airship-revision="r1"] *::after{animation:none!important;transition:none!important}#airshipTransition[data-airship-revision="r1"]{transition:none}} /* Explicitly suppress legacy pseudo-elements without modifying their old sheet. */ #airshipTransition[data-airship-revision="r1"] .airship-cinematic-stage::before, #airshipTransition[data-airship-revision="r1"] .airship-cinematic-stage::after, #airshipTransition[data-airship-revision="r1"] .airship-vehicle-stage::before, #airshipTransition[data-airship-revision="r1"] .airship-vehicle-stage::after{content:none;animation:none} #airshipTransition[data-airship-revision="r1"]:not(.is-open) .airship-vehicle-stage{will-change:auto} /* pk-style-source:33 */ /* /starter-v39.css */ /* v39 — starter selection and server-authoritative skill mastery. Loaded last. */ .starter-dialog.is-open{display:grid;padding:clamp(10px,3vw,34px)} .starter-experience{width:min(1180px,100%);max-height:min(790px,calc(100dvh - 28px));border:1px solid rgba(113,202,235,.35);border-radius:26px;overflow:hidden;box-shadow:0 32px 90px rgba(0,18,31,.56);background:linear-gradient(160deg,#071f2c,#092b3b)} .starter-flow-header{min-height:82px;padding:15px 18px 13px 24px} .starter-flow-content{padding:20px;max-height:calc(100dvh - 132px);overflow:auto;scrollbar-gutter:stable} .starter-select-v39{display:grid;gap:16px} .starter-select-v39>header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:0 3px} .starter-select-v39>header b{color:var(--starter-text,#eefaff);font-size:15px} .starter-select-v39>header span{max-width:580px;color:var(--starter-muted,#9ab6c5);font-size:10px;line-height:1.45;text-align:right} .starter-choice-grid-v39{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .starter-choice-card-v39{position:relative;display:grid;grid-template-rows:190px auto auto 32px;min-width:0;padding:13px;border:1px solid color-mix(in srgb,var(--starter-accent) 60%,#31576a);border-radius:22px;background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--starter-accent) 20%,transparent),transparent 47%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 28px rgba(0,10,18,.2);color:#fff;text-align:left;cursor:pointer;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .starter-choice-card-v39:hover,.starter-choice-card-v39:focus-visible{transform:translateY(-4px);border-color:var(--starter-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 20px 38px color-mix(in srgb,var(--starter-accent) 18%,rgba(0,10,18,.46));outline:0} .starter-card-art-v39{display:grid;place-items:center;min-height:0} .starter-card-portrait-v39,.starter-card-portrait-v39 img{display:block;width:178px;height:178px;object-fit:contain;user-select:none;-webkit-user-drag:none} .starter-card-copy-v39{display:grid;gap:3px;min-width:0;padding:3px 4px 11px;text-align:center} .starter-card-copy-v39 small{color:color-mix(in srgb,var(--starter-accent) 78%,white);font-size:8px;font-weight:900;letter-spacing:.075em;text-transform:uppercase} .starter-card-copy-v39 b{color:var(--starter-text,#f3fbff);font-size:23px;line-height:1.05} .starter-card-copy-v39 em{color:var(--starter-muted,#9ab6c5);font-style:normal;white-space:normal} .starter-card-skills-v39{grid-template-columns:repeat(4,1fr);gap:6px;padding:9px 3px;border-top:1px solid rgba(160,210,230,.12)} .starter-card-skill-v39{position:relative;display:grid;place-items:center;border:1px solid rgba(140,197,220,.24);border-radius:12px;background:rgba(1,14,22,.38);} .starter-card-skill-v39.is-locked{filter:saturate(.35);opacity:.58} .starter-card-skill-v39.is-learned{border-color:var(--starter-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--starter-accent) 18%,transparent)} .starter-card-skill-dot,.starter-card-skill-dot img{width:100%;height:100%;object-fit:cover} .starter-card-skill-v39 small{position:absolute;right:3px;bottom:3px;padding:2px 4px;border-radius:6px;background:rgba(3,18,27,.84);color:#fff;font-size:6px;font-weight:900} .starter-card-open-v39{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;background:color-mix(in srgb,var(--starter-accent) 14%,rgba(255,255,255,.03));color:color-mix(in srgb,var(--starter-accent) 76%,white);font-size:9px;font-weight:900;text-transform:uppercase} .starter-details-v39{display:grid;grid-template-columns:minmax(290px,.82fr) minmax(420px,1.18fr);gap:16px;min-height:500px} .starter-profile-v39,.starter-details-copy-v39{border:1px solid rgba(128,195,220,.2);border-radius:21px;background:rgba(255,255,255,.035)} .starter-profile-v39{display:grid;grid-template-rows:250px auto;padding:14px;background:radial-gradient(circle at 50% 27%,color-mix(in srgb,var(--starter-accent) 20%,transparent),transparent 48%),rgba(255,255,255,.03)} .starter-profile-art-v39{display:grid;place-items:center;min-height:0} .starter-detail-portrait-v39,.starter-detail-portrait-v39 img{display:block;width:245px;height:245px;object-fit:contain;user-select:none;-webkit-user-drag:none} .starter-profile-copy-v39{display:grid;gap:5px;align-content:start;text-align:center} .starter-profile-copy-v39>small{color:color-mix(in srgb,var(--starter-accent) 75%,white);font-size:8px;font-weight:900;letter-spacing:.08em} .starter-profile-copy-v39 h3{margin:0;color:var(--starter-text,#effaff);font-size:30px} .starter-profile-copy-v39 p{margin:0;color:var(--starter-muted,#9ab6c5);font-size:10px} .starter-v39-legacy-label{color:var(--starter-muted,#9ab6c5);font-size:7px;font-weight:800} .starter-profile-copy-v39 .pokemon-type-badges{justify-content:center} .starter-profile-copy-v39 .starter-stat-grid{grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px} .starter-profile-copy-v39 .starter-stat{padding:7px;border-radius:10px} .starter-profile-copy-v39 .starter-stat span small{font-size:6px} .starter-details-copy-v39{display:flex;flex-direction:column;gap:10px;padding:16px;min-width:0} .starter-details-copy-v39>header small{color:var(--starter-accent);font-size:7px;font-weight:900;letter-spacing:.11em} .starter-details-copy-v39>header b{display:block;margin-top:3px;color:var(--starter-text,#effaff);font-size:19px} .starter-details-copy-v39>header p{margin:3px 0 0;color:var(--starter-muted,#9ab6c5);font-size:9px} .starter-roadmap-v39{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px} .starter-roadmap-skill{grid-template-columns:50px minmax(0,1fr) 28px;align-items:center;gap:8px;min-width:0;padding:7px;border:1px solid rgba(130,191,215,.18);border-radius:13px;background:rgba(1,15,23,.3);color:inherit;text-align:left;cursor:pointer} .starter-roadmap-skill.is-active{border-color:var(--starter-accent);background:color-mix(in srgb,var(--starter-accent) 9%,rgba(1,15,23,.36))} .starter-roadmap-skill.is-locked{opacity:.7} .starter-roadmap-icon,.starter-roadmap-icon img{display:block;width:48px;height:48px;border-radius:10px;object-fit:cover} .starter-roadmap-skill span{display:grid;min-width:0} .starter-roadmap-skill small{color:var(--starter-accent);font-weight:900;letter-spacing:.05em} .starter-roadmap-skill b{color:var(--starter-text,#effaff);font-size:10px;} .starter-roadmap-skill em{overflow:hidden;color:var(--starter-muted,#9ab6c5);font-size:7px;font-style:normal;text-overflow:ellipsis;white-space:nowrap} .starter-roadmap-skill>strong{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:rgba(255,255,255,.08);color:var(--starter-accent);font-size:9px} .starter-detail-inline-v39 .starter-skill-detail{grid-template-columns:76px 1fr;min-height:98px} .starter-detail-inline-v39 .starter-skill-detail-icon,.starter-detail-inline-v39 .starter-skill-detail-atlas,.starter-detail-inline-v39 .starter-skill-detail-atlas img{width:72px;height:72px} .starter-detail-inline-v39 .starter-skill-detail-copy p{margin:3px 0 6px;font-size:8px} .starter-detail-inline-v39 .starter-skill-metrics i{min-height:34px;padding:5px} .starter-confirm-v39,.starter-partner-v39{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(360px,1.15fr);gap:20px;align-items:center;max-width:860px;min-height:450px;margin:auto;padding:25px;border:1px solid color-mix(in srgb,var(--starter-accent) 45%,#31566a);border-radius:24px;background:radial-gradient(circle at 23% 40%,color-mix(in srgb,var(--starter-accent) 18%,transparent),transparent 34%),rgba(255,255,255,.03)} .starter-confirm-art-v39,.starter-partner-art-v39{position:relative;display:grid;place-items:center} .starter-confirm-portrait-v39,.starter-confirm-portrait-v39 img,.starter-partner-portrait-v39,.starter-partner-portrait-v39 img{display:block;width:280px;height:280px;object-fit:contain;user-select:none;-webkit-user-drag:none} .starter-confirm-copy-v39,.starter-partner-copy-v39{display:grid;gap:8px} .starter-confirm-copy-v39>small,.starter-partner-copy-v39>small{color:var(--starter-accent);font-size:8px;font-weight:900;letter-spacing:.1em} .starter-confirm-copy-v39 h3,.starter-partner-copy-v39 h3{margin:0;color:var(--starter-text,#effaff);font-size:32px;line-height:1.05} .starter-confirm-copy-v39>p,.starter-partner-copy-v39>p{margin:0;color:var(--starter-muted,#9ab6c5);font-size:11px;line-height:1.5} .starter-confirm-first-skill,.starter-learned-v39{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:7px;padding:9px;border:1px solid color-mix(in srgb,var(--starter-accent) 36%,#395c6e);border-radius:15px;background:color-mix(in srgb,var(--starter-accent) 9%,rgba(2,17,25,.55))} .starter-confirm-skill-icon,.starter-confirm-skill-icon img,.starter-learned-icon-v39,.starter-learned-icon-v39 img{display:block;width:62px;height:62px;border-radius:12px;object-fit:cover} .starter-confirm-first-skill span,.starter-learned-v39 span{display:grid;gap:2px} .starter-confirm-first-skill small,.starter-learned-v39 small{color:var(--starter-accent);font-size:7px;font-weight:900} .starter-confirm-first-skill b,.starter-learned-v39 b{color:var(--starter-text,#effaff);font-size:13px} .starter-confirm-first-skill strong{padding:6px 8px;border-radius:9px;background:#39a558;color:#fff;font-size:7px} .starter-partner-art-v39>span{position:absolute;right:20px;bottom:32px;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#43b95b;color:#fff;font-size:24px;box-shadow:0 0 0 7px rgba(67,185,91,.16)} .starter-learned-v39{grid-template-columns:64px minmax(0,1fr)} .starter-learned-v39 em{color:var(--starter-muted,#9ab6c5);font-size:8px;font-style:normal} .pokemon-mastery-section{padding:0!important;overflow:hidden} .pokemon-mastery-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;background:linear-gradient(135deg,#eff9ff,#f8fcff);border-bottom:1px solid #dceaf2} .pokemon-mastery-head span small{display:block;color:#0787cf;font-size:8px;font-weight:900;letter-spacing:.08em} .pokemon-mastery-head span b{display:block;margin-top:2px;color:#173e5c;font-size:15px} .pokemon-mastery-head span p{margin:3px 0 0;color:#6b8496;font-size:9px} .pokemon-mastery-head>strong{display:grid;grid-template-columns:auto auto;align-items:end;gap:0 5px;min-width:70px;padding:8px 10px;border-radius:13px;background:#078dd0;color:#fff;font-size:23px;text-align:center} .pokemon-mastery-head>strong small{grid-column:1/-1;font-size:6px;letter-spacing:.08em}.pokemon-mastery-head>strong em{padding-bottom:3px;font-size:7px;font-style:normal;opacity:.8} .pokemon-mastery-next{padding:7px 15px;background:#f8fbfd;color:#638095;font-size:8px;font-weight:800} .pokemon-mastery-grid{display:grid;gap:8px;padding:12px} .pokemon-mastery-card{display:grid;grid-template-columns:62px minmax(0,1fr) 76px;align-items:center;gap:10px;padding:9px;border:1px solid #dbe8ef;border-left:3px solid var(--skill-type,#4ba5d9);border-radius:14px;background:#fff} .pokemon-mastery-card.is-locked{background:#f6f9fb} .pokemon-mastery-icon{position:relative;width:60px;height:60px}.pokemon-mastery-art,.pokemon-mastery-art img{display:block;width:60px;height:60px;border-radius:12px;object-fit:cover}.pokemon-mastery-icon>span{position:absolute;left:3px;top:3px;padding:2px 4px;border-radius:5px;background:rgba(6,25,36,.82);color:#fff;font-size:6px;font-weight:900} .pokemon-mastery-copy{display:grid;gap:2px;min-width:0}.pokemon-mastery-copy>small{color:#6d8799;font-size:7px;font-weight:900;letter-spacing:.05em}.pokemon-mastery-copy>b{color:#173e5c;font-size:12px}.pokemon-mastery-copy>p{overflow:hidden;margin:0;color:#668095;font-size:8px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.pokemon-mastery-copy>em{color:#7c92a2;font-size:7px;font-style:normal} .pokemon-mastery-ranks{display:flex;gap:4px;margin:3px 0}.pokemon-mastery-ranks i{width:18px;height:5px;border-radius:999px;background:#dce7ed}.pokemon-mastery-ranks i.is-filled{background:var(--skill-type,#3fa9dd);box-shadow:0 0 6px color-mix(in srgb,var(--skill-type,#3fa9dd) 45%,transparent)} .pokemon-mastery-card>button{min-height:34px;border:0;border-radius:10px;background:#078dd0;color:#fff;font-size:8px;font-weight:900;cursor:pointer}.pokemon-mastery-card>button:disabled{background:#e4ebef;color:#8296a4;cursor:not-allowed} html[data-game-theme="light"] .starter-experience{background:linear-gradient(160deg,#fbfdff,#eef8fc)} html[data-game-theme="light"] .starter-choice-card-v39,html[data-game-theme="light"] .starter-profile-v39,html[data-game-theme="light"] .starter-details-copy-v39,html[data-game-theme="light"] .starter-confirm-v39,html[data-game-theme="light"] .starter-partner-v39{background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--starter-accent) 12%,transparent),transparent 48%),#fff;box-shadow:0 14px 34px rgba(36,89,115,.1)} html[data-game-theme="light"] .starter-card-skill-v39,html[data-game-theme="light"] .starter-roadmap-skill{background:#f5fafc} @media(max-width:760px){ .starter-dialog.is-open{place-items:center;padding:7px} .starter-experience{max-height:calc(100dvh - 14px);border-radius:20px} .starter-flow-header{min-height:62px;padding:9px 10px 8px 13px} .starter-flow-content{max-height:calc(100dvh - 78px);padding:10px} .starter-select-v39{gap:9px}.starter-select-v39>header{display:grid;gap:2px}.starter-select-v39>header b{font-size:12px}.starter-select-v39>header span{font-size:8px;text-align:left} .starter-choice-grid-v39{grid-template-columns:1fr;gap:8px} .starter-choice-card-v39{grid-template-columns:94px minmax(0,1fr) 116px;grid-template-rows:auto 30px;min-height:130px;padding:8px;border-radius:16px} .starter-card-art-v39{grid-row:1/3}.starter-card-portrait-v39,.starter-card-portrait-v39 img{width:92px;height:108px} .starter-card-copy-v39{align-content:center;padding:2px 6px;text-align:left}.starter-card-copy-v39 small{font-size:6px}.starter-card-copy-v39 b{font-size:18px}.starter-card-copy-v39 em{font-size:7px} .starter-card-skills-v39{align-self:center;padding:0;border:0}.starter-card-skill-v39{border-radius:9px}.starter-card-skill-v39 small{font-size:5px} .starter-card-open-v39{grid-column:2/4;font-size:7px} .starter-details-v39{grid-template-columns:1fr;gap:9px;min-height:0} .starter-profile-v39{grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto;padding:8px}.starter-detail-portrait-v39,.starter-detail-portrait-v39 img{width:110px;height:150px}.starter-profile-copy-v39{text-align:left}.starter-profile-copy-v39 h3{font-size:22px}.starter-profile-copy-v39 .pokemon-type-badges{justify-content:flex-start}.starter-profile-copy-v39 .starter-stat-grid{grid-template-columns:repeat(3,1fr)} .starter-details-copy-v39{padding:9px}.starter-details-copy-v39>header b{font-size:15px}.starter-roadmap-v39{grid-template-columns:1fr 1fr}.starter-roadmap-skill{grid-template-columns:42px minmax(0,1fr) 23px;padding:5px}.starter-roadmap-icon,.starter-roadmap-icon img{width:40px;height:40px}.starter-roadmap-skill em{display:none}.starter-detail-inline-v39{display:none} .starter-details-copy-v39 .starter-flow-actions{position:sticky;bottom:-9px;margin:0 -9px -9px;padding:8px 9px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(4,24,34,0),rgba(4,24,34,.97) 30%)} .starter-confirm-v39,.starter-partner-v39{grid-template-columns:130px minmax(0,1fr);gap:10px;min-height:340px;padding:12px}.starter-confirm-portrait-v39,.starter-confirm-portrait-v39 img,.starter-partner-portrait-v39,.starter-partner-portrait-v39 img{width:135px;height:190px}.starter-confirm-copy-v39 h3,.starter-partner-copy-v39 h3{font-size:22px}.starter-confirm-copy-v39>p,.starter-partner-copy-v39>p{font-size:9px}.starter-confirm-first-skill,.starter-learned-v39{grid-template-columns:48px minmax(0,1fr);padding:6px}.starter-confirm-skill-icon,.starter-confirm-skill-icon img,.starter-learned-icon-v39,.starter-learned-icon-v39 img{width:46px;height:46px}.starter-confirm-first-skill strong{display:none}.starter-partner-art-v39>span{right:0;bottom:22px;width:38px;height:38px;font-size:18px} .pokemon-mastery-card{grid-template-columns:52px minmax(0,1fr);padding:7px}.pokemon-mastery-icon,.pokemon-mastery-art,.pokemon-mastery-art img{width:50px;height:50px}.pokemon-mastery-card>button{grid-column:1/-1}.pokemon-mastery-copy>p{white-space:normal}.pokemon-mastery-head span p{display:none} } @media(max-width:430px){ .starter-choice-card-v39{grid-template-columns:82px minmax(0,1fr);grid-template-rows:auto auto auto}.starter-card-art-v39{grid-row:1/4}.starter-card-portrait-v39,.starter-card-portrait-v39 img{width:80px;height:112px}.starter-card-skills-v39{grid-column:2}.starter-card-open-v39{grid-column:2} .starter-roadmap-v39{grid-template-columns:1fr}.starter-profile-v39{grid-template-columns:94px minmax(0,1fr)}.starter-detail-portrait-v39,.starter-detail-portrait-v39 img{width:92px;height:132px}.starter-profile-copy-v39 .starter-stat-grid{display:none} .starter-confirm-v39,.starter-partner-v39{grid-template-columns:1fr;text-align:center}.starter-confirm-art-v39,.starter-partner-art-v39{height:130px}.starter-confirm-portrait-v39,.starter-confirm-portrait-v39 img,.starter-partner-portrait-v39,.starter-partner-portrait-v39 img{width:150px;height:150px}.starter-confirm-copy-v39,.starter-partner-copy-v39{text-align:left} } /* pk-style-source:34 */ /* /starter-v40.css */ /* v40 — compact, responsive starter choice. Loaded after starter-v39.css. */ .starter-dialog.is-open { place-items: center; padding: clamp(8px, 2vw, 24px); } .starter-experience { width: min(1040px, 100%); max-height: min(720px, calc(100dvh - 20px)); border-radius: 24px; } .starter-flow-header { min-height: 68px; padding: 11px 15px 10px 20px; } .starter-flow-header b { font-size: clamp(21px, 2vw, 28px); } .starter-flow-content { max-height: calc(100dvh - 98px); padding: 16px; } .starter-select-v39 { gap: 0; } .starter-choice-grid-v39 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 960px; margin: 0 auto; } .starter-choice-card-v39 { grid-template-rows: 164px auto 58px 44px; min-height: 370px; padding: 12px; border-radius: 20px; } .starter-card-portrait-v39, .starter-card-portrait-v39 img { width: 164px; height: 164px; } .starter-home-art, .starter-home-art img { display: block; object-fit: contain; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none; } .starter-card-copy-v39 { position: relative; gap: 4px; padding: 3px 4px 9px; } .starter-card-copy-v39 b { font-size: 22px; } .starter-card-copy-v39 em { font-size: 9px; line-height: 1.3; } .starter-card-level-v40 { position: absolute; top: -25px; right: 2px; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--starter-accent) 45%, rgba(255,255,255,.2)); border-radius: 999px; background: rgba(4, 23, 32, .76); color: #fff; font-size: 8px; font-weight: 900; } .starter-card-types-v40, .starter-card-types-v40 .pokemon-type-list { display: flex; justify-content: center; gap: 4px; } .starter-card-types-v40 .pokemon-type-badge { min-height: 18px; } .starter-card-skills-v39 { display: grid; grid-template-columns: repeat(4, 48px); justify-content: center; align-items: center; gap: 7px; padding: 5px 2px; border: 0; } .starter-card-skill-v39 { width: 48px; height: 48px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; } .starter-card-skill-v39.is-locked { filter: saturate(.76) brightness(.88); opacity: .82; } .starter-card-skill-dot, .starter-card-skill-dot img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .starter-card-open-v39 { min-height: 44px; border: 1px solid color-mix(in srgb, var(--starter-accent) 28%, transparent); border-radius: 12px; font-size: 10px; } .starter-details-v39 { grid-template-columns: minmax(270px, .72fr) minmax(480px, 1.28fr); gap: 12px; min-height: 460px; max-width: 940px; margin: 0 auto; } .starter-profile-v39, .starter-details-copy-v39 { border-radius: 18px; } .starter-profile-v39 { grid-template-rows: 218px auto; padding: 11px; } .starter-detail-portrait-v39, .starter-detail-portrait-v39 img { width: 218px; height: 218px; } .starter-profile-copy-v39 { gap: 4px; } .starter-profile-copy-v39 h3 { font-size: 27px; } .starter-profile-copy-v39 > small { font-size: 7px; } .starter-profile-copy-v39 > p { font-size: 9px; } .starter-profile-copy-v39 .pokemon-type-list { justify-content: center; } .starter-profile-copy-v39 .starter-stat-grid { margin-top: 5px; } .starter-details-copy-v39 { gap: 9px; padding: 13px; } .starter-details-copy-v39 > header b { font-size: 18px; } .starter-roadmap-v39 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .starter-roadmap-skill { display: grid; grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 5px; min-height: 105px; padding: 7px 4px; border-color: transparent; border-radius: 15px; background: transparent; text-align: center; } .starter-roadmap-skill:hover, .starter-roadmap-skill:focus-visible, .starter-roadmap-skill.is-active { border-color: color-mix(in srgb, var(--starter-accent) 62%, rgba(255,255,255,.16)); background: color-mix(in srgb, var(--starter-accent) 10%, rgba(255,255,255,.035)); outline: 0; } .starter-roadmap-skill.is-locked { opacity: .84; } .starter-roadmap-icon, .starter-roadmap-icon img { display: block; width: 62px; height: 62px; border-radius: 50%; object-fit: cover; overflow: hidden; } .starter-roadmap-skill span { justify-items: center; gap: 2px; } .starter-roadmap-skill b { max-width: 100%; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .starter-roadmap-skill small { font-size: 6px; order: 2; } .starter-detail-inline-v39 { display: block; min-height: 104px; } .starter-detail-inline-v39 .starter-skill-detail { grid-template-columns: 68px minmax(0, 1fr); min-height: 104px; padding: 9px; } .starter-detail-inline-v39 .starter-skill-detail-icon, .starter-detail-inline-v39 .starter-skill-detail-atlas, .starter-detail-inline-v39 .starter-skill-detail-atlas img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; overflow: hidden; } .starter-skill-detail-copy > em { color: var(--starter-muted, #9ab6c5); font-size: 7px; font-style: normal; } .starter-details-copy-v39 .starter-flow-actions { position: static; display: grid; grid-template-columns: minmax(120px, .65fr) minmax(190px, 1fr); gap: 8px; margin: auto 0 0; padding: 0; background: none; } .starter-details-copy-v39 .starter-flow-actions button { min-height: 48px; font-size: 10px; } .starter-sending-v40 { display: grid; grid-template-columns: 210px minmax(220px, 1fr); align-items: center; gap: 24px; width: min(620px, 100%); min-height: 360px; margin: 0 auto; padding: 22px; border: 1px solid color-mix(in srgb, var(--starter-accent) 45%, #31566a); border-radius: 22px; background: radial-gradient(circle at 25% 45%, color-mix(in srgb, var(--starter-accent) 18%, transparent), transparent 38%), rgba(255,255,255,.035); } .starter-sending-portrait-v40, .starter-sending-portrait-v40 img { width: 210px; height: 210px; } .starter-sending-v40 > span { display: grid; gap: 6px; } .starter-sending-v40 > span > i { margin-bottom: 4px; } .starter-sending-v40 > span > b { color: var(--starter-text, #effaff); font-size: 20px; } .starter-sending-v40 > span > small { color: var(--starter-muted, #9ab6c5); font-size: 9px; } html[data-game-theme="light"] .starter-card-level-v40 { background: rgba(255,255,255,.94); color: #17445d; } html[data-game-theme="light"] .starter-roadmap-skill { background: transparent; } html[data-game-theme="light"] .starter-roadmap-skill:hover, html[data-game-theme="light"] .starter-roadmap-skill:focus-visible, html[data-game-theme="light"] .starter-roadmap-skill.is-active { background: color-mix(in srgb, var(--starter-accent) 10%, #fff); } @media (max-width: 760px) { .starter-dialog.is-open { padding: 5px; } .starter-experience { width: 100%; max-height: calc(100dvh - 10px); border-radius: 19px; } .starter-flow-header { min-height: 58px; padding: 8px 9px 7px 12px; } .starter-flow-header b { font-size: 19px; } .starter-flow-content { max-height: calc(100dvh - 68px); padding: 9px; scrollbar-gutter: auto; } .starter-choice-grid-v39 { grid-template-columns: 1fr; gap: 8px; } .starter-choice-card-v39 { grid-template-columns: 100px minmax(0, 1fr); grid-template-rows: auto 52px 46px; min-height: 154px; padding: 8px; border-radius: 16px; } .starter-card-art-v39 { grid-column: 1; grid-row: 1 / 4; } .starter-card-portrait-v39, .starter-card-portrait-v39 img { width: 96px; height: 132px; } .starter-card-copy-v39 { grid-column: 2; align-content: center; justify-items: start; min-width: 0; padding: 2px 4px 4px; text-align: left; } .starter-card-copy-v39 b { font-size: 20px; } .starter-card-copy-v39 em { max-width: 100%; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .starter-card-level-v40 { position: static; padding: 3px 6px; font-size: 7px; } .starter-card-types-v40, .starter-card-types-v40 .pokemon-type-list { justify-content: flex-start; } .starter-card-skills-v39 { grid-column: 2; grid-template-columns: repeat(4, 42px); justify-content: start; gap: 5px; padding: 3px 4px; } .starter-card-skill-v39 { width: 42px; height: 42px; } .starter-card-open-v39 { grid-column: 2; min-height: 44px; font-size: 10px; } .starter-details-v39 { grid-template-columns: 1fr; gap: 8px; min-height: 0; } .starter-profile-v39 { grid-template-columns: 108px minmax(0, 1fr); grid-template-rows: auto; padding: 7px; } .starter-detail-portrait-v39, .starter-detail-portrait-v39 img { width: 104px; height: 130px; } .starter-profile-copy-v39 { align-content: center; justify-items: start; text-align: left; } .starter-profile-copy-v39 h3 { font-size: 22px; } .starter-profile-copy-v39 .pokemon-type-list { justify-content: flex-start; } .starter-profile-copy-v39 .starter-stat-grid { display: none; } .starter-details-copy-v39 { gap: 7px; padding: 8px; } .starter-details-copy-v39 > header p { margin-top: 2px; font-size: 8px; } .starter-roadmap-v39 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; } .starter-roadmap-skill { min-height: 84px; padding: 5px 2px; border-radius: 12px; } .starter-roadmap-icon, .starter-roadmap-icon img { width: 50px; height: 50px; } .starter-roadmap-skill b { max-width: 70px; font-size: 7px; } .starter-roadmap-skill small { font-size: 5.5px; } .starter-detail-inline-v39 { display: block; min-height: 92px; } .starter-detail-inline-v39 .starter-skill-detail { grid-template-columns: 56px minmax(0, 1fr); min-height: 92px; padding: 7px; } .starter-detail-inline-v39 .starter-skill-detail-icon, .starter-detail-inline-v39 .starter-skill-detail-atlas, .starter-detail-inline-v39 .starter-skill-detail-atlas img { width: 52px; height: 52px; } .starter-detail-inline-v39 .starter-skill-detail-copy > b { font-size: 14px; } .starter-detail-inline-v39 .starter-skill-detail-copy > p { font-size: 8px; line-height: 1.35; } .starter-skill-detail-copy > em { display: none; } .starter-details-copy-v39 .starter-flow-actions { position: sticky; bottom: -8px; grid-template-columns: minmax(92px, .6fr) minmax(150px, 1fr); gap: 7px; margin: 0 -8px -8px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(4,24,34,0), rgba(4,24,34,.97) 25%); } .starter-details-copy-v39 .starter-flow-actions button { min-height: 48px; padding: 0 10px; font-size: 10px; } html[data-game-theme="light"] .starter-details-copy-v39 .starter-flow-actions { background: linear-gradient(180deg, rgba(238,248,252,0), rgba(238,248,252,.98) 25%); } .starter-sending-v40 { grid-template-columns: 1fr; justify-items: center; gap: 8px; min-height: 330px; padding: 14px; text-align: center; } .starter-sending-portrait-v40, .starter-sending-portrait-v40 img { width: 160px; height: 160px; } } @media (max-width: 370px) { .starter-choice-card-v39 { grid-template-columns: 84px minmax(0, 1fr); } .starter-card-portrait-v39, .starter-card-portrait-v39 img { width: 82px; height: 122px; } .starter-card-skills-v39 { grid-template-columns: repeat(4, 38px); gap: 4px; } .starter-card-skill-v39 { width: 38px; height: 38px; } .starter-roadmap-icon, .starter-roadmap-icon img { width: 46px; height: 46px; } .starter-roadmap-skill b { max-width: 58px; } .starter-details-copy-v39 .starter-flow-actions button { min-height: 50px; } } @media (max-height: 650px) and (max-width: 760px) { .starter-flow-header { min-height: 52px; } .starter-flow-content { max-height: calc(100dvh - 62px); } .starter-choice-card-v39 { min-height: 142px; } .starter-card-portrait-v39, .starter-card-portrait-v39 img { height: 116px; } } @media (prefers-reduced-motion: reduce) { .starter-choice-card-v39, .starter-home-art img { animation: none !important; transition: none !important; } } /* pk-style-source:35 */ /* /ui-v41.css */ /* PokéPark UI v4.1 — unified typography, themes, windows and Pokédex */ :root { --ui-font: "Segoe UI Variable", "Segoe UI", Inter, Roboto, system-ui, -apple-system, sans-serif; --ui-display: Bahnschrift, "Arial Narrow", "Segoe UI Variable", system-ui, sans-serif; --ui-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; --ui-radius-xs: 10px; --ui-radius-sm: 14px; --ui-radius-md: 20px; --ui-radius-lg: 28px; --ui-control: 42px; --ui-speed: 180ms; --ui-ease: cubic-bezier(.2,.8,.2,1); font-family: var(--ui-font); font-size: 16px; font-synthesis: none; } html[data-game-theme="dark"] { color-scheme: dark; --theme-surface: rgba(7,24,34,.975); --theme-surface-soft: rgba(12,38,50,.96); --theme-card: rgba(15,45,58,.94); --theme-card-hover: rgba(21,58,73,.98); --theme-border: rgba(150,205,225,.19); --theme-text: #f3f9fb; --theme-muted: #9eb6c3; --theme-accent: #55bff2; --theme-input: rgba(4,19,28,.82); --ui-shadow: 0 24px 72px rgba(0,8,14,.48), 0 1px 0 rgba(255,255,255,.04) inset; --ui-shadow-soft: 0 10px 28px rgba(0,8,14,.25); --ui-glass: rgba(8,29,40,.88); --ui-glass-strong: rgba(8,29,40,.97); --ui-highlight: rgba(255,255,255,.055); --ui-overlay: rgba(1,9,14,.62); } html[data-game-theme="light"] { color-scheme: light; --theme-surface: rgba(248,252,253,.985); --theme-surface-soft: rgba(235,245,248,.97); --theme-card: rgba(255,255,255,.97); --theme-card-hover: #f1f9fb; --theme-border: rgba(71,119,139,.18); --theme-text: #153848; --theme-muted: #607d8b; --theme-accent: #147eae; --theme-input: rgba(255,255,255,.9); --ui-shadow: 0 24px 72px rgba(26,66,82,.22), 0 1px 0 #fff inset; --ui-shadow-soft: 0 10px 28px rgba(27,72,91,.11); --ui-glass: rgba(245,251,252,.9); --ui-glass-strong: rgba(249,253,254,.98); --ui-highlight: rgba(255,255,255,.75); --ui-overlay: rgba(13,40,52,.34); } html, body, button, input, select, textarea { font-family: var(--ui-font); } body { color: var(--theme-text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } button, input, select, textarea { letter-spacing: normal; } button { transition: color var(--ui-speed), background var(--ui-speed), border-color var(--ui-speed), box-shadow var(--ui-speed), transform var(--ui-speed); } button:where(:not(:disabled)):active { transform: translateY(1px) scale(.99); } button:disabled { cursor: not-allowed; opacity: .55; } :where(button,input,select,textarea,[role="button"]):focus-visible { outline: 3px solid color-mix(in srgb,var(--theme-accent) 35%,transparent) !important; outline-offset: 2px !important; } ::selection { background: color-mix(in srgb,var(--theme-accent) 32%,transparent); } /* Entry screens */ .gate-screen, .auth-screen, .home-screen { font-family: var(--ui-font); } .auth-card, .hero-card, .adventure-hero, .adventure-card { border: 1px solid var(--theme-border) !important; background: var(--ui-glass-strong) !important; color: var(--theme-text) !important; box-shadow: var(--ui-shadow) !important; backdrop-filter: blur(24px) saturate(1.12); } .auth-card, .hero-card { border-radius: var(--ui-radius-lg) !important; } .auth-card h1, .hero-card h1, .adventure-hero h1, .adventure-card b, .hero-card-head strong { color: var(--theme-text) !important; font-family: var(--ui-display); font-weight: 750; letter-spacing: -.025em; } .auth-card > p, .hero-card > p, .adventure-hero > p, .adventure-card p, .hero-card-head em, .auth-security, .foundation-status small { color: var(--theme-muted) !important; } .auth-step, .adventure-eyebrow, .hero-card-head small { color: var(--theme-accent) !important; font-weight: 800; letter-spacing: .12em; } .auth-field input, .name-field input { min-height: 46px; border: 1px solid var(--theme-border) !important; border-radius: var(--ui-radius-sm) !important; background: var(--theme-input) !important; color: var(--theme-text) !important; box-shadow: 0 1px 0 var(--ui-highlight) inset; } .auth-tabs, .skin-picker button, .adventure-profile-strip article { border-color: var(--theme-border) !important; background: var(--theme-card) !important; color: var(--theme-text) !important; } .primary-cta { min-height: 52px; border: 1px solid rgba(255,255,255,.18) !important; border-bottom: 3px solid color-mix(in srgb,#086496 76%,#062b43) !important; border-radius: 16px !important; background: linear-gradient(180deg,#22a7df,#0877af) !important; box-shadow: 0 12px 28px rgba(5,111,163,.27), 0 1px 0 rgba(255,255,255,.25) inset !important; font-size: .76rem !important; font-weight: 850 !important; letter-spacing: .04em !important; } /* Shared game windows */ .game-screen { --game-window-radius: var(--ui-radius-md); --game-window-shadow: var(--ui-shadow); --game-window-pad: 18px; --game-window-gap: 12px; color: var(--theme-text); } .game-screen .hud-window, .game-screen .side-panel, .game-screen .chat-panel, .game-screen .editor-panel, .trade-dialog__content, .professor-transfer-card-shell, .inventory-item-dialog-v2738__content, .world-channel-confirm__card, .social-invite__card, .pvp-invite__card, .controls-tutorial-card, .dialogue-card, .starter-card { border: 1px solid var(--theme-border) !important; border-radius: var(--ui-radius-md) !important; background: var(--ui-glass-strong) !important; color: var(--theme-text) !important; box-shadow: var(--ui-shadow) !important; backdrop-filter: blur(24px) saturate(1.12); } .trade-dialog__backdrop, .inventory-item-dialog-v2738__backdrop, .world-channel-confirm__backdrop, .professor-transfer-dialog::before { background: var(--ui-overlay) !important; backdrop-filter: blur(5px); } .game-screen .side-panel { isolation: isolate; padding: 18px; overflow: hidden; } .game-screen .side-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--theme-accent) 12%,transparent),transparent 34%), linear-gradient(145deg,var(--ui-highlight),transparent 38%); pointer-events: none; } #sidePanelContent { min-width: 0; height: 100%; max-height: 100%; padding: 1px 4px 12px 1px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--theme-muted) 30%,transparent) transparent; } #sidePanelContent::-webkit-scrollbar { width: 6px; height: 6px; } #sidePanelContent::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb,var(--theme-muted) 30%,transparent); } .game-screen .side-panel > .panel-close { position: absolute; z-index: 90; top: 13px; right: 13px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--theme-border) !important; border-radius: 14px !important; background: color-mix(in srgb,var(--theme-surface-soft) 92%,transparent) !important; color: var(--theme-text) !important; box-shadow: var(--ui-shadow-soft) !important; } .game-screen .side-panel > .panel-close:hover { border-color: color-mix(in srgb,var(--theme-accent) 45%,var(--theme-border)) !important; background: color-mix(in srgb,var(--theme-accent) 10%,var(--theme-surface-soft)) !important; } .panel-title, .inventory-v2741__title h2, .inventory-v2740__title h2, .inventory-v2739__title h2, .social-profile-hero-v2727 h2, .pokemon-detail-hero h2, .dex-detail-head h2 { font-family: var(--ui-display); font-weight: 750; letter-spacing: -.025em; } .panel-title { margin: 5px 54px 7px 0; color: var(--theme-text) !important; font-size: clamp(1.65rem,2.2vw,2rem); line-height: 1; } .panel-eyebrow { color: var(--theme-accent) !important; font-size: .68rem !important; font-weight: 800; letter-spacing: .12em; } .panel-lead { margin-bottom: 16px; color: var(--theme-muted) !important; font-size: .82rem !important; line-height: 1.5; } #sidePanelContent :is(button,input,select,textarea,summary) { font-family: var(--ui-font); } #sidePanelContent :is(p,li) { line-height: 1.48; } #sidePanelContent small { font-size: max(9px,.61rem); } .game-screen .side-panel :is(input:not([type="range"]),select,textarea) { min-height: var(--ui-control); border: 1px solid var(--theme-border) !important; border-radius: 13px !important; background: var(--theme-input) !important; color: var(--theme-text) !important; } .game-screen .side-panel :is(.panel-primary,.settings-reset,.center-actions button,.editor-actions button) { min-height: var(--ui-control); border-radius: 13px; font-size: .72rem; font-weight: 800; } /* Normalize legacy cards without flattening their semantic colors. */ #sidePanelContent :is( .region-card,.mechanics-card,.mechanics-live-card,.team-roster-card-v2737, .center-card-v2737,.pokemon-detail-section,.pokemon-trait-grid article, .quest-card,.progression-card,.faction-card,.lab-clinic-card,.lab-team-slot, .audio-settings,.binding-row,.battle-setting,.theme-settings,.social-profile-section ) { border-color: var(--theme-border) !important; border-radius: var(--ui-radius-sm) !important; background: var(--theme-card) !important; color: var(--theme-text) !important; box-shadow: var(--ui-shadow-soft); } #sidePanelContent :is(.region-card,.mechanics-card,.team-roster-card-v2737,.center-card-v2737,.quest-card):hover { border-color: color-mix(in srgb,var(--theme-accent) 35%,var(--theme-border)) !important; } /* World HUD */ .game-screen .player-chip, .game-screen .world-wallet, .game-screen .instance-chip, .game-screen .world-minimap, .game-screen .quest-widget, .game-screen .player-stamina-hud, .game-screen .party-hud-member, .game-screen .context-action, .game-screen .world-rail, .game-screen .mobile-dock { border-color: var(--theme-border) !important; background: var(--ui-glass) !important; color: var(--theme-text) !important; box-shadow: var(--ui-shadow-soft) !important; backdrop-filter: blur(18px) saturate(1.1); } .game-screen .player-chip, .game-screen .instance-chip, .game-screen .world-wallet { border-radius: 17px; } .game-screen #worldPlayerName, .game-screen .instance-chip b, .game-screen .world-wallet b { color: var(--theme-text) !important; } .game-screen :is(.player-connection,.player-chip-progress > small,.player-chip-progress > em,.instance-chip small,.player-stamina-title small,.player-stamina-meter > em) { color: var(--theme-muted) !important; } .game-screen .world-rail { gap: 5px; padding: 8px; border-radius: 22px; } .game-screen .world-rail button { min-height: 54px; border: 1px solid transparent; border-radius: 15px; color: var(--theme-muted); } .game-screen .world-rail button:hover, .game-screen .world-rail button.is-active { border-color: color-mix(in srgb,var(--theme-accent) 26%,var(--theme-border)); background: color-mix(in srgb,var(--theme-accent) 11%,var(--theme-card)); color: var(--theme-accent); box-shadow: none; } .game-screen .world-rail button b { font-size: .58rem; } .game-screen .mobile-dock button { min-width: 0; color: var(--theme-muted); } .game-screen .mobile-dock button.is-active { color: var(--theme-accent); } .game-screen .quest-widget { border-radius: 18px; } .game-screen .context-action { border-radius: 20px; } /* Chat and editor */ .game-screen .chat-panel, .game-screen .editor-panel { overflow: hidden; } .chat-head, .editor-head { min-height: 54px; border-bottom: 1px solid var(--theme-border) !important; background: color-mix(in srgb,var(--theme-surface-soft) 86%,transparent) !important; } .chat-head-actions button, .editor-head button { width: 38px; height: 38px; border: 1px solid var(--theme-border) !important; border-radius: 12px !important; background: var(--theme-card) !important; color: var(--theme-muted) !important; } .chat-tabs button { min-height: 42px; } .chat-message p { font-size: var(--chat-font-size,14px) !important; line-height: 1.45 !important; } .chat-online-sidebar { border-left-color: var(--theme-border) !important; } #chatForm { min-height: 48px; border-color: var(--theme-border) !important; border-radius: 15px !important; } .chat-send-button { min-width: 40px; min-height: 40px; border-radius: 12px !important; } /* Dialogs and transient windows */ .social-invite, .pvp-invite, .world-channel-confirm, .trade-dialog, .inventory-item-dialog-v2738, .professor-transfer-dialog { font-family: var(--ui-font); } .social-invite__card, .pvp-invite__card, .world-channel-confirm__card { padding: 22px !important; } :is(.social-invite__card,.pvp-invite__card,.world-channel-confirm__card) > b, .world-channel-confirm__card h2 { color: var(--theme-text) !important; font-family: var(--ui-display); } :is(.social-invite__card,.pvp-invite__card,.world-channel-confirm__card) > p { color: var(--theme-muted) !important; font-size: .82rem; line-height: 1.48; } :is(.social-invite__actions,.pvp-invite__actions,.world-channel-confirm__actions) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 9px !important; } :is(.social-invite__actions,.pvp-invite__actions,.world-channel-confirm__actions) button { min-width: 0; min-height: 44px; border: 1px solid var(--theme-border) !important; border-radius: 13px !important; background: var(--theme-card) !important; color: var(--theme-text) !important; font-weight: 800; } :is(.social-invite__actions,.pvp-invite__actions,.world-channel-confirm__actions) :is(.is-accept,.is-primary) { border-color: transparent !important; background: linear-gradient(180deg,#24a2da,#1478aa) !important; color: #fff !important; } .dialogue-actions { gap: 8px; } .dialogue-actions button { min-height: 44px; border-radius: 13px !important; } /* Pokédex library */ .game-screen .side-panel.is-pokedex-panel, .game-screen .side-panel.is-pokedex-detail { --theme-accent: #2aa7c7; } .pokedex-library { display: grid; gap: 14px; min-width: 0; color: var(--theme-text); } .pokedex-library-head { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: 20px; align-items: center; min-height: 150px; padding: 22px 70px 22px 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: linear-gradient(90deg,rgba(4,31,43,.92),rgba(5,43,52,.68)), url('/assets/v4.1/ui/pokedex-expedition-bg.png') 50% 54%/cover no-repeat; color: #fff; box-shadow: var(--ui-shadow-soft); } .pokedex-library-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg,rgba(255,255,255,.08),transparent 35% 72%,rgba(42,198,207,.09)); pointer-events: none; } .pokedex-library-title, .pokedex-progress { position: relative; z-index: 1; } .pokedex-library-title { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 14px; align-items: center; min-width: 0; } .pokedex-library-mark { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(255,255,255,.12); color: #8fe6f0; backdrop-filter: blur(12px); } .pokedex-library-mark .ui-icon { width: 34px; height: 34px; } .pokedex-library-title small { display: block; color: #8fe6f0; font-size: .64rem; font-weight: 850; letter-spacing: .14em; } .pokedex-library-title h2 { margin: 3px 0 4px; font: 760 clamp(2.3rem,4vw,3.45rem)/.9 var(--ui-display); letter-spacing: -.045em; } .pokedex-library-title p { max-width: 520px; margin: 0; color: rgba(237,249,251,.8); font-size: .78rem; line-height: 1.42; } .pokedex-progress { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; padding: 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 17px; background: rgba(5,26,35,.46); backdrop-filter: blur(14px); } .pokedex-progress span small { display: block; color: rgba(223,242,245,.66); font-size: .57rem; font-weight: 800; letter-spacing: .12em; } .pokedex-progress span b { display: block; margin-top: 2px; font-size: 1.25rem; } .pokedex-progress span b em { color: rgba(232,245,247,.6); font-size: .72rem; font-style: normal; font-weight: 650; } .pokedex-progress > strong { color: #8fe6f0; font-size: .83rem; } .pokedex-progress > i { grid-column: 1/-1; display: block; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.13); } .pokedex-progress > i > em { display: block; width: var(--dex-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#56d2db,#9ee479); box-shadow: 0 0 12px rgba(95,217,215,.35); } .pokedex-toolbar { display: grid; grid-template-columns: minmax(220px,1.3fr) minmax(300px,1.6fr) 150px; gap: 9px; align-items: center; min-width: 0; } .pokedex-search { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 8px; min-width: 0; min-height: 46px; padding: 0 11px; border: 1px solid var(--theme-border); border-radius: 14px; background: var(--theme-input); color: var(--theme-muted); } .pokedex-search > span .ui-icon { width: 18px; height: 18px; } .pokedex-search input { min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size: .8rem; outline: 0 !important; } .pokedex-search kbd { display: grid; place-items: center; min-width: 24px; height: 24px; border: 1px solid var(--theme-border); border-radius: 7px; background: var(--theme-card); color: var(--theme-muted); font: 700 .66rem/1 var(--ui-mono); } .pokedex-filter-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; min-width: 0; padding: 4px; border: 1px solid var(--theme-border); border-radius: 15px; background: color-mix(in srgb,var(--theme-surface-soft) 72%,transparent); scrollbar-width: none; } .pokedex-filter-tabs::-webkit-scrollbar { display: none; } .pokedex-filter-tabs button { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 36px; padding: 0 7px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--theme-muted); font-size: .68rem; font-weight: 750; white-space: nowrap; } .pokedex-filter-tabs button b { color: inherit; font-size: .58rem; opacity: .72; } .pokedex-filter-tabs button.is-active { border-color: color-mix(in srgb,var(--theme-accent) 28%,var(--theme-border)); background: var(--theme-card); color: var(--theme-accent); box-shadow: var(--ui-shadow-soft); } .pokedex-type-filter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; } .pokedex-type-filter > span { color: var(--theme-muted); font-size: .58rem; font-weight: 850; letter-spacing: .1em; } .pokedex-type-filter select { width: 100%; min-width: 0; min-height: 46px !important; padding: 0 28px 0 10px; font-size: .72rem; font-weight: 700; } .pokedex-results-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; color: var(--theme-muted); font-size: .68rem; } .pokedex-results-meta b { color: var(--theme-text); } .pokedex-results-meta button { min-height: 28px; padding: 0 9px; border: 1px solid var(--theme-border); border-radius: 9px; background: var(--theme-card); color: var(--theme-accent); font-size: .64rem; font-weight: 750; } .pokedex-grid-v41 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; } .pokedex-grid-v41 .pokedex-species-card { position: relative; isolation: isolate; display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: center; min-width: 0; min-height: 132px; padding: 14px 11px 11px; border: 1px solid var(--theme-border); border-radius: 18px; background: var(--theme-card); color: var(--theme-text); text-align: left; box-shadow: 0 7px 20px rgba(12,53,69,.07); opacity: 1; filter: none; } .pokedex-grid-v41 .pokedex-species-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 17% 40%,color-mix(in srgb,var(--species-accent) 17%,transparent),transparent 35%), linear-gradient(135deg,var(--ui-highlight),transparent 50%); pointer-events: none; } .pokedex-grid-v41 .pokedex-species-card::after { content: ""; position: absolute; z-index: -1; left: -24px; bottom: -36px; width: 130px; height: 130px; border: 1px solid color-mix(in srgb,var(--species-accent) 17%,transparent); border-radius: 50%; box-shadow: 0 0 0 19px color-mix(in srgb,var(--species-accent) 4%,transparent); } .pokedex-grid-v41 .pokedex-species-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--species-accent) 54%,var(--theme-border)); background: var(--theme-card-hover); box-shadow: 0 15px 30px rgba(9,46,62,.13); } .pokedex-card-number { position: absolute; top: 9px; left: 11px; color: color-mix(in srgb,var(--species-accent) 75%,var(--theme-text)); font: 800 .62rem/1 var(--ui-mono); letter-spacing: .04em; } .pokedex-card-art { display: grid; place-items: center; width: 96px; height: 96px; align-self: end; } .pokedex-home-portrait { display: grid; place-items: center; width: 100%; height: 100%; } .pokedex-home-portrait img { width: 112%; height: 112%; filter: drop-shadow(0 10px 9px rgba(0,20,29,.17)); transition: transform 220ms var(--ui-ease); } .pokedex-species-card:hover .pokedex-home-portrait img { transform: translateY(-3px) scale(1.05); } .pokedex-card-copy { display: block; min-width: 0; padding-top: 10px; } .pokedex-card-copy > small { display: block; overflow: hidden; color: var(--theme-muted); font-size: .58rem !important; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .pokedex-card-copy > b { display: block; margin: 3px 0 7px; overflow: hidden; font: 750 1rem/1.05 var(--ui-display); text-overflow: ellipsis; white-space: nowrap; } .pokedex-card-types { display: block; min-height: 25px; } .pokedex-card-types .pokemon-type-list { display: flex; gap: 4px; } .pokedex-card-types .pokemon-type-badge { width: 23px; height: 23px; margin: 0; border-radius: 8px; } .pokedex-card-types .type-icon { width: 14px; height: 14px; margin: 0; } .pokedex-card-copy > i { display: block; margin-top: 5px; color: var(--theme-muted); font-size: .61rem; font-style: normal; } .pokedex-grid-v41 .pokedex-species-card > em { position: absolute; top: 8px; right: 8px; padding: 4px 6px; border-radius: 7px; background: color-mix(in srgb,var(--species-accent) 18%,var(--theme-card)); color: color-mix(in srgb,var(--species-accent) 78%,var(--theme-text)); font-size: .49rem; font-style: normal; font-weight: 850; letter-spacing: .04em; } .pokedex-grid-v41 .pokedex-species-card > em.is-neutral { color: var(--theme-muted); background: color-mix(in srgb,var(--theme-muted) 8%,var(--theme-card)); } .pokedex-grid-v41 .pokedex-species-card.is-lead { border-width: 1px; border-color: #e8bd41; box-shadow: 0 0 0 2px rgba(232,189,65,.13),var(--ui-shadow-soft); } .pokedex-grid-v41 .pokedex-species-card.is-locked { opacity: .82; } .pokedex-empty { grid-column: 1/-1; display: grid; justify-items: center; padding: 48px 18px; border: 1px dashed var(--theme-border); border-radius: 20px; background: var(--theme-card); text-align: center; } .pokedex-empty > span { font-size: 2.4rem; color: var(--theme-accent); } .pokedex-empty > b { margin-top: 8px; font: 750 1.2rem/1 var(--ui-display); } .pokedex-empty > p { margin: 7px 0 14px; color: var(--theme-muted); font-size: .75rem; } .pokedex-empty > button { min-height: 40px; padding: 0 14px; border: 1px solid var(--theme-border); border-radius: 12px; background: color-mix(in srgb,var(--theme-accent) 12%,var(--theme-card)); color: var(--theme-accent); font-weight: 800; } /* Pokédex dossier */ .dex-detail-shell { --theme-accent: var(--dex-accent); gap: 13px; } .dex-detail-head { top: -18px; margin: -18px 0 0; padding: 14px 68px 14px 18px; border-bottom-color: var(--theme-border); background: color-mix(in srgb,var(--ui-glass-strong) 94%,transparent); backdrop-filter: blur(20px) saturate(1.1); } .dex-detail-head h2 { font-size: clamp(1.8rem,3vw,2.35rem); } .dex-detail-head > span { min-width: 0; } .dex-detail-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dex-detail-head > span small { color: var(--dex-accent); font-size: .62rem; } .dex-detail-head > button, .dex-detail-head > div button { min-height: 40px; border-color: var(--theme-border); border-radius: 12px; background: var(--theme-card); font-size: .7rem; } .dex-detail-head > div button { width: 40px; font-size: 1.35rem; } .dex-hero-card, .dex-stats-card, .dex-section { border-color: var(--theme-border); border-radius: 19px; background: var(--theme-card); box-shadow: var(--ui-shadow-soft); } .dex-hero-card { position: relative; padding: 13px; } .dex-hero-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 260px; border-radius: inherit; background: linear-gradient(180deg,color-mix(in srgb,var(--dex-accent) 7%,transparent),transparent), url('/assets/v4.1/ui/pokedex-expedition-bg.png') 50% 48%/cover no-repeat; opacity: .16; pointer-events: none; } .dex-visual-tabs, .dex-visual, .dex-identity, .dex-physical-profile, .dex-physical-secondary { position: relative; } .dex-visual-tabs button { min-height: 34px; border-radius: 10px; font-size: .66rem; } .dex-visual-tabs button.is-active { border-color: color-mix(in srgb,var(--dex-accent) 55%,var(--theme-border)); background: color-mix(in srgb,var(--dex-accent) 13%,var(--theme-card)); color: var(--dex-accent); } .dex-visual { min-height: 280px; border: 1px solid color-mix(in srgb,var(--dex-accent) 18%,var(--theme-border)); background: radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--dex-accent) 20%,transparent),transparent 58%),color-mix(in srgb,var(--theme-surface-soft) 90%,transparent); } .dex-main-portrait { width: 260px; height: 260px; } .dex-main-portrait, .dex-evo-portrait { overflow: clip; } .dex-main-portrait img { width: 110%; height: 110%; object-fit: contain; filter: drop-shadow(0 18px 16px rgba(0,20,28,.22)); } .dex-visual > span { padding: 6px 9px; font-size: .59rem; } .dex-identity p { font-size: .72rem; } .dex-physical-profile > article, .dex-physical span, .dex-stats-card > footer span, .dex-stat-row > em, .dex-evolution-chain button, .dex-evolution-branches button, .dex-form-list span, .dex-skill-card, .dex-skill-detail section i { border-color: var(--theme-border); background: var(--theme-surface-soft); } .dex-physical-profile article small, .dex-physical small, .dex-stats-card > footer small, .dex-size-frequency > small { font-size: .54rem !important; } .dex-physical-profile article em { font-size: .59rem; } .dex-stats-card > header small, .dex-section > header small { color: var(--dex-accent); font-size: .61rem; } .dex-stats-card > header b { font: 750 1.3rem/1 var(--ui-display); } .dex-stat-row > span b { font-size: .72rem; } .dex-stat-row > strong { font-size: .84rem; } .dex-stat-row > em { height: 7px; } .dex-stat-row > em > i { background: linear-gradient(90deg,var(--dex-accent),#75d46b); } .dex-section > header h3 { font: 750 1.3rem/1 var(--ui-display); } .dex-section > header em { font-size: .62rem; } .dex-evo-portrait { display: grid; place-items: center; background: transparent; } .dex-evo-portrait img { width: 110%; height: 110%; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(0,20,28,.15)); } .dex-evolution-chain button.is-current { border-color: color-mix(in srgb,var(--dex-accent) 55%,var(--theme-border)); background: color-mix(in srgb,var(--dex-accent) 10%,var(--theme-card)); } .dex-skill-card { min-height: 78px; } .dex-skill-card.is-active { border-color: var(--dex-accent); background: color-mix(in srgb,var(--dex-accent) 9%,var(--theme-card)); } .dex-skill-card small { font-size: .54rem; } .dex-skill-card b { font-size: .72rem; } .dex-skill-card em { color: var(--dex-accent); font-size: .6rem; } .dex-skill-detail { border-color: color-mix(in srgb,var(--dex-accent) 45%,var(--theme-border)); background: color-mix(in srgb,var(--dex-accent) 6%,var(--theme-card)); } .dex-skill-detail > span > small { color: var(--dex-accent); font-size: .56rem; } .dex-skill-detail > span > b { font: 750 1.05rem/1.1 var(--ui-display); } .dex-skill-detail p { font-size: .7rem; } .dex-skill-detail section small { font-size: .48rem !important; } .dex-source-section p { font-size: .65rem; } .dex-source-section a { min-height: 38px; display: flex; align-items: center; font-size: .64rem; } /* Desktop geometry */ @media (min-width: 801px) { .game-screen .side-panel { top: 78px; right: 22px; bottom: auto; left: auto; width: min(520px,calc(100vw - 126px)); height: min(760px,calc(100dvh - 102px)); max-height: none; } .game-screen .side-panel:is(.is-inventory-panel,.is-pokedex-panel) { top: 68px; width: min(980px,calc(100vw - 120px)); height: min(790px,calc(100dvh - 90px)); max-height: none; } .game-screen .side-panel.is-pokedex-detail { top: 68px; width: min(900px,calc(100vw - 120px)); height: min(790px,calc(100dvh - 90px)); max-height: none; } .game-screen .side-panel.is-social-profile { left: 104px; right: auto; width: min(520px,calc(100vw - 130px)); } .game-screen .side-panel.is-team-panel { width: min(570px,calc(100vw - 126px)); } .game-screen .side-panel.is-center-panel, .game-screen .side-panel.is-genetics-lab-panel { width: min(720px,calc(100vw - 126px)); } .game-screen .chat-panel { left: 104px; bottom: 20px; width: min(560px,calc(100vw - 130px)); height: min(650px,calc(100dvh - 110px)); } .game-screen .editor-panel { right: 22px; bottom: 22px; width: min(420px,calc(100vw - 126px)); max-height: calc(100dvh - 110px); } .world-topbar { top: 14px; left: 18px; right: 18px; grid-template-columns: minmax(270px,1fr) auto minmax(220px,1fr); gap: 10px; } .game-screen .player-chip { min-width: 276px; } .game-screen .instance-chip { min-width: 220px; } } @media (min-width: 801px) and (max-width: 1180px) { .game-screen .side-panel:is(.is-inventory-panel,.is-pokedex-panel,.is-pokedex-detail) { width: calc(100vw - 108px); } .pokedex-grid-v41 { grid-template-columns: repeat(2,minmax(0,1fr)); } .pokedex-toolbar { grid-template-columns: 1fr 1.25fr; } .pokedex-type-filter { grid-column: 1/-1; justify-self: end; width: 170px; } .game-screen .instance-chip { display: none; } .world-topbar { grid-template-columns: minmax(260px,1fr) auto; } } /* Phone and tablet */ @media (max-width: 800px) { :root { --ui-control: 46px; } .auth-card, .hero-card { width: min(100% - 20px,520px) !important; max-height: calc(100dvh - 106px); padding: 20px !important; overflow: auto; border-radius: 22px !important; } .auth-card h1 { font-size: 1.9rem !important; } .home-topbar { left: max(12px,env(safe-area-inset-left)); right: max(12px,env(safe-area-inset-right)); } .brand b { font-size: clamp(1.35rem,7vw,2rem); } .home-screen[data-mode="returning"] .adventure-home { inset: max(74px,calc(env(safe-area-inset-top) + 64px)) max(10px,env(safe-area-inset-right)) auto max(10px,env(safe-area-inset-left)); display: block; max-height: calc(100dvh - 88px - env(safe-area-inset-bottom)); overflow: auto; } .home-screen[data-mode="returning"] .adventure-hero { justify-content: flex-start; min-height: auto; padding: 22px 18px 20px; border-radius: 22px; } .home-screen[data-mode="returning"] .adventure-hero h1 { margin: 7px 0 10px; font-size: clamp(2rem,10vw,2.65rem); line-height: .94; } .home-screen[data-mode="returning"] .adventure-hero > p { margin-bottom: 0; font-size: .75rem; } .home-screen[data-mode="returning"] .adventure-profile-strip { margin: 14px 0 11px; } .home-screen[data-mode="returning"] .adventure-profile-strip article { min-width: 0; padding: 10px; } .home-screen[data-mode="returning"] .adventure-profile-strip b { font-size: .75rem; } .home-screen[data-mode="returning"] .adventure-continue { min-height: 52px; } .game-screen .side-panel, .game-screen .side-panel:is(.is-social-profile,.is-inventory-panel,.is-team-panel,.is-center-panel,.is-pokedex-panel,.is-pokedex-detail,.is-quest-panel,.is-settings-panel,.is-mechanics-panel,.is-progression-panel,.is-factions-panel,.is-genetics-lab-panel) { top: max(58px,calc(env(safe-area-inset-top) + 54px)); right: max(6px,env(safe-area-inset-right)); bottom: calc(72px + env(safe-area-inset-bottom)); left: max(6px,env(safe-area-inset-left)); width: auto; height: auto; max-width: none; max-height: none; padding: 12px; border-radius: 19px !important; } .game-screen .side-panel > .panel-close { top: 9px; right: 9px; width: 40px; height: 40px; } #sidePanelContent { padding-right: 1px; } #sidePanelContent small { font-size: max(9px,.6rem); } .panel-title { margin-right: 48px; font-size: 1.55rem; } .panel-lead { font-size: .76rem !important; } .world-topbar { top: max(6px,env(safe-area-inset-top)); left: max(6px,env(safe-area-inset-left)); right: max(6px,env(safe-area-inset-right)); display: flex; align-items: start; justify-content: space-between; gap: 6px; } .game-screen .player-chip { min-width: 0; max-width: min(68vw,300px); min-height: 48px; } .game-screen .world-wallet { flex: 0 0 auto; } .game-screen .instance-chip { display: none; } .game-screen .player-stamina-hud { top: max(66px,calc(env(safe-area-inset-top) + 62px)); left: max(8px,env(safe-area-inset-left)); width: min(182px,calc(100vw - 118px)); } .game-screen .world-minimap { top: max(6px,env(safe-area-inset-top)); right: max(6px,env(safe-area-inset-right)); } .game-screen .quest-widget { top: max(104px,calc(env(safe-area-inset-top) + 100px)); right: max(6px,env(safe-area-inset-right)); left: max(6px,env(safe-area-inset-left)); width: auto; max-width: none; } .game-screen #toast { top: auto; right: 50%; bottom: calc(208px + env(safe-area-inset-bottom)); left: auto; width: min(300px,calc(100vw - 24px)); transform: translateX(50%); } .game-screen .chat-panel { top: max(58px,calc(env(safe-area-inset-top) + 54px)); right: max(6px,env(safe-area-inset-right)); bottom: calc(72px + env(safe-area-inset-bottom)); left: max(6px,env(safe-area-inset-left)); width: auto; height: auto; max-width: none; max-height: none; border-radius: 19px !important; } .chat-online-sidebar { display: none; } .chat-messenger-layout { grid-template-columns: minmax(0,1fr); } .chat-tabs button { min-width: 0; padding-inline: 4px; } .chat-tabs button span:not(.chat-tab-icon) { font-size: .61rem; } .pokedex-library { gap: 10px; } .pokedex-library-head { grid-template-columns: 1fr; min-height: 0; padding: 18px 52px 16px 16px; gap: 13px; } .pokedex-library-title { grid-template-columns: 45px minmax(0,1fr); gap: 10px; } .pokedex-library-mark { width: 45px; height: 45px; border-radius: 14px; } .pokedex-library-mark .ui-icon { width: 26px; height: 26px; } .pokedex-library-title small { font-size: .54rem; } .pokedex-library-title h2 { font-size: 2.25rem; } .pokedex-library-title p { font-size: .68rem; } .pokedex-progress { grid-template-columns: 1fr auto; padding: 10px 12px; } .pokedex-toolbar { grid-template-columns: 1fr; gap: 7px; } .pokedex-filter-tabs { order: 2; overflow-x: auto; } .pokedex-filter-tabs button { min-width: 78px; min-height: 38px; } .pokedex-type-filter { order: 3; grid-template-columns: 38px 1fr; } .pokedex-results-meta small { display: none; } .pokedex-grid-v41 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; } .pokedex-grid-v41 .pokedex-species-card { grid-template-columns: 78px minmax(0,1fr); min-height: 112px; padding: 12px 8px 8px; border-radius: 15px; } .pokedex-card-art { width: 76px; height: 76px; } .pokedex-card-copy > b { font-size: .82rem; } .pokedex-grid-v41 .pokedex-species-card > em { font-size: .42rem; } .dex-detail-head { top: -12px; margin: -12px 0 0; padding: 11px 54px 10px 10px; gap: 7px; } .dex-detail-head h2 { font-size: 1.55rem; } .dex-detail-head > button { min-height: 38px; padding-inline: 9px; font-size: .62rem; } .dex-detail-head > div button { width: 38px; min-height: 38px; } .dex-hero-grid { grid-template-columns: 1fr; } .dex-visual { min-height: 220px; } .dex-main-portrait { width: 210px; height: 210px; } .dex-stats-card > footer { grid-template-columns: repeat(2,minmax(0,1fr)); } .dex-skills-grid { grid-template-columns: 1fr; } .dex-skill-detail { grid-template-columns: 64px minmax(0,1fr); } .dex-skill-detail > div { width: 64px; height: 64px; } .dex-skill-detail section { grid-template-columns: 1fr 1fr; } .dex-section > header { align-items: start; flex-direction: column; } .dex-source-section { grid-template-columns: 1fr; } :is(.social-invite__card,.pvp-invite__card,.world-channel-confirm__card) { width: min(100% - 16px,420px); } } @media (max-width: 430px) { .pokedex-grid-v41 { grid-template-columns: 1fr; } .pokedex-grid-v41 .pokedex-species-card { grid-template-columns: 94px minmax(0,1fr); min-height: 122px; } .pokedex-card-art { width: 91px; height: 91px; } .pokedex-card-copy > b { font-size: 1rem; } .pokedex-card-copy > small { font-size: .57rem !important; } .pokedex-filter-tabs { grid-template-columns: repeat(4,82px); } .pokedex-results-meta { font-size: .62rem; } .dex-detail-head { grid-template-areas: "back nav" "identity identity"; grid-template-columns: minmax(0,1fr) auto; align-items: center; } .dex-detail-head > button { grid-area: back; justify-self: start; } .dex-detail-head > span { grid-area: identity; } .dex-detail-head > div { grid-area: nav; } .dex-physical-profile { grid-template-columns: 1fr; } .dex-physical-profile .dex-size-range-card, .dex-physical-profile .dex-size-frequency-card { grid-column: auto; } :is(.social-invite__actions,.pvp-invite__actions,.world-channel-confirm__actions) { grid-template-columns: 1fr; } } @media (max-height: 650px) and (max-width: 900px) and (orientation: landscape) { .game-screen .side-panel, .game-screen .side-panel:is(.is-pokedex-panel,.is-pokedex-detail,.is-inventory-panel) { top: 6px; bottom: 6px; left: 6px; right: 6px; } .pokedex-library-head { grid-template-columns: 1fr 170px; padding-block: 12px; } .pokedex-library-title p { display: none; } .pokedex-grid-v41 { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (pointer: coarse) { :where(button,[role="button"],summary) { touch-action: manipulation; } .game-screen :where(button,[role="button"],summary) { min-height: 44px; } .pokedex-grid-v41 .pokedex-species-card { min-height: 118px; } } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* Keep marker smoothing off the layout path, including while large windows are open. */ #worldMinimapShell .world-minimap-player-motion{position:absolute;inset:0;pointer-events:none;z-index:10;transition:transform .09s linear} @media(prefers-reduced-motion:reduce){#worldMinimapShell .world-minimap-player-motion{transition:none}} /* pk-style-source:36 */ /* /ui-v42.css */ /* PokéPark UI v4.2 — National Pokédex, five-action mobile dock and role dialogue system */ @font-face { font-family: "Onest PokePark"; src: url("/assets/v4.2/fonts/Onest-Variable.ttf") format("truetype-variations"); font-style: normal; font-weight: 100 900; font-display: swap; } :root { --ui-font: "Onest PokePark", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; --ui-display: "Onest PokePark", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; } html, body, button, input, select, textarea, .inventory-v2741, .inventory-item-dialog-v2741 { font-family: var(--ui-font) !important; } /* National Pokédex filters */ .pokedex-toolbar { grid-template-columns: minmax(260px,.92fr) minmax(430px,1.08fr); align-items: stretch; } .pokedex-search, .pokedex-filter-tabs { align-self: end; } .pokedex-scroll-filter { grid-column: 1 / -1; display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 9px; min-width: 0; padding: 7px; border: 1px solid var(--theme-border); border-radius: 16px; background: color-mix(in srgb,var(--theme-surface-soft) 78%,transparent); box-shadow: 0 1px 0 var(--ui-highlight) inset; } .pokedex-scroll-filter > header { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; padding: 5px 2px 5px 5px; } .pokedex-scroll-filter > header span { min-width: 0; } .pokedex-scroll-filter > header small { display: block; color: var(--theme-muted); font-size: .52rem; font-weight: 820; letter-spacing: .12em; } .pokedex-scroll-filter > header b { display: block; margin-top: 3px; overflow: hidden; color: var(--theme-text); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; } .pokedex-scroll-filter > header nav { display: flex; gap: 5px; } .pokedex-scroll-filter > header nav button { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 1px solid var(--theme-border); border-radius: 9px; background: var(--theme-card); color: var(--theme-muted); font-size: 1.1rem; line-height: 1; } .pokedex-scroll-filter > header nav button:hover { color: var(--theme-accent); border-color: color-mix(in srgb,var(--theme-accent) 38%,var(--theme-border)); } .pokedex-scroll-track { display: flex; gap: 7px; min-width: 0; padding: 1px 1px 4px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-color: color-mix(in srgb,var(--theme-accent) 35%,transparent) transparent; scrollbar-width: thin; } .pokedex-scroll-track::-webkit-scrollbar { height: 5px; } .pokedex-scroll-track::-webkit-scrollbar-track { background: transparent; } .pokedex-scroll-track::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb,var(--theme-accent) 35%,transparent); } .pokedex-generation-track > button { position: relative; flex: 0 0 134px; scroll-snap-align: start; display: grid; grid-template-columns: 1fr auto; align-content: center; min-height: 58px; padding: 8px 10px; overflow: hidden; border: 1px solid var(--theme-border); border-radius: 13px; background: radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--theme-accent) 11%,transparent),transparent 52%), var(--theme-card); color: var(--theme-text); text-align: left; } .pokedex-generation-track > button::after { content: ""; position: absolute; right: -18px; bottom: -25px; width: 62px; height: 62px; border: 1px solid color-mix(in srgb,var(--theme-accent) 13%,transparent); border-radius: 50%; } .pokedex-generation-track > button small { grid-column: 1 / -1; color: var(--theme-muted); font-size: .47rem; font-weight: 800; letter-spacing: .08em; } .pokedex-generation-track > button b { margin-top: 3px; font-size: .7rem; } .pokedex-generation-track > button em { align-self: end; color: var(--theme-muted); font-size: .58rem; font-style: normal; font-weight: 800; } .pokedex-generation-track > button.is-all { flex-basis: 158px; } .pokedex-generation-track > button:hover { transform: translateY(-1px); border-color: color-mix(in srgb,var(--theme-accent) 40%,var(--theme-border)); } .pokedex-generation-track > button.is-active { border-color: color-mix(in srgb,var(--theme-accent) 62%,var(--theme-border)); background: radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--theme-accent) 24%,transparent),transparent 58%), color-mix(in srgb,var(--theme-accent) 9%,var(--theme-card)); color: var(--theme-accent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--theme-accent) 9%,transparent),0 8px 18px rgba(7,57,74,.08); } .pokedex-type-filter-v42 { grid-template-columns: 118px minmax(0,1fr); } .pokedex-type-track > button { flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 11px; border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-card); color: var(--theme-muted); } .pokedex-type-track > button > i { width: 10px; height: 10px; border-radius: 50%; background: var(--type-chip); box-shadow: 0 0 0 4px color-mix(in srgb,var(--type-chip) 14%,transparent); } .pokedex-type-track > button > .ui-icon { width: 16px; height: 16px; color: var(--type-chip); } .pokedex-type-track > button b { font-size: .64rem; white-space: nowrap; } .pokedex-type-track > button:hover { transform: translateY(-1px); color: var(--theme-text); border-color: color-mix(in srgb,var(--type-chip) 45%,var(--theme-border)); } .pokedex-type-track > button.is-active { border-color: color-mix(in srgb,var(--type-chip) 65%,var(--theme-border)); background: color-mix(in srgb,var(--type-chip) 10%,var(--theme-card)); color: color-mix(in srgb,var(--type-chip) 72%,var(--theme-text)); box-shadow: 0 0 0 2px color-mix(in srgb,var(--type-chip) 8%,transparent); } .pokedex-card-number { display: flex; align-items: center; gap: 6px; } .pokedex-card-number small { padding: 3px 5px; border-radius: 6px; background: color-mix(in srgb,var(--species-accent) 10%,var(--theme-card)); color: var(--theme-muted); font: 750 .42rem/1 var(--ui-font); letter-spacing: .04em; } /* Wide, centered library and inventory on desktop */ @media (min-width: 801px) { .game-screen .side-panel:is(.is-pokedex-panel,.is-pokedex-detail,.is-inventory-panel) { position: fixed !important; top: 50% !important; right: auto !important; bottom: auto !important; left: 50% !important; width: min(1180px,calc(100vw - 132px)) !important; height: min(820px,calc(100dvh - 92px)) !important; max-width: none !important; max-height: none !important; opacity: 0; pointer-events: none; transform: translate(-50%,-46%) scale(.985) !important; transition: opacity 180ms ease,transform 220ms cubic-bezier(.2,.8,.2,1) !important; } .game-screen .side-panel:is(.is-pokedex-panel,.is-pokedex-detail,.is-inventory-panel).is-open { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1) !important; } .game-screen .side-panel.is-pokedex-detail { width: min(1040px,calc(100vw - 132px)) !important; } .game-screen .side-panel.is-inventory-panel { width: min(1100px,calc(100vw - 132px)) !important; height: min(760px,calc(100dvh - 92px)) !important; } .pokedex-grid-v41 { grid-template-columns: repeat(4,minmax(0,1fr)); } .inventory-v2741__items { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; } .inventory-item-v2741 { min-height: 166px; grid-template-rows: 72px minmax(58px,auto) 20px; padding: 9px; border-radius: 16px; } .inventory-item-v2741__art { width: 72px; height: 72px; } .inventory-item-v2741__art .item-icon { width: 59px; height: 59px; } .inventory-item-v2741__name b { font-size: .67rem; } .inventory-v2741__categories { gap: 8px; } .inventory-v2741__categories button { min-height: 58px; border-radius: 14px; } .inventory-v2741__categories .inventory-category-icon, .inventory-v2741__categories .inventory-ui-icon { width: 24px; height: 24px; } .inventory-v2741__categories button > span { font-size: .52rem; } } .inventory-item-v2741__name { display: grid; align-content: start; gap: 2px; min-width: 0; } .inventory-item-v2741__name > em { overflow: hidden; color: var(--inv-blue); font-size: .44rem; font-style: normal; font-weight: 820; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; } .inventory-item-v2741__name > small { font-size: .48rem; line-height: 1.3; } .inventory-v2741.is-list .inventory-item-v2741__name > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 801px) and (max-width: 1120px) { .pokedex-grid-v41 { grid-template-columns: repeat(3,minmax(0,1fr)); } .inventory-v2741__items { grid-template-columns: repeat(5,minmax(0,1fr)); } } /* Role-based visual-novel dialogue */ .dialogue-layer { --dialogue-accent:#2b8fd6; } .dialogue-layer[data-dialogue-role="captain"] { --dialogue-accent:#247fc7; --dialogue-bg:url('/assets/v4.2/dialogue/dialogue-captain.webp'); } .dialogue-layer[data-dialogue-role="trainer"] { --dialogue-accent:#e86462; --dialogue-bg:url('/assets/v4.2/dialogue/dialogue-trainer.webp'); } .dialogue-layer[data-dialogue-role="system"] { --dialogue-accent:#4a93d2; --dialogue-bg:url('/assets/v4.2/dialogue/dialogue-system.webp'); } .dialogue-layer .dialogue-shade { background: color-mix(in srgb,var(--ui-overlay) 86%,transparent) !important; backdrop-filter: blur(7px) saturate(.82); } .dialogue-layer .dialogue-card { isolation: isolate; grid-template-columns: 230px minmax(0,1fr) 170px; grid-template-rows: minmax(220px,auto) 66px; gap: 0 18px; width: min(1040px,calc(100vw - 48px)); min-height: 350px; max-height: min(76dvh,620px); padding: 0 20px 14px 0; overflow: hidden !important; border-color: color-mix(in srgb,var(--dialogue-accent) 34%,var(--theme-border)) !important; border-radius: 28px !important; background: linear-gradient(90deg,color-mix(in srgb,var(--theme-card) 18%,transparent),var(--ui-glass-strong) 33% 100%), var(--dialogue-bg) center/cover no-repeat !important; } .dialogue-layer .dialogue-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(105deg,color-mix(in srgb,var(--dialogue-accent) 7%,transparent),transparent 45%),linear-gradient(180deg,transparent 72%,color-mix(in srgb,var(--dialogue-accent) 5%,var(--theme-card))); pointer-events: none; } .dialogue-layer .dialogue-card::after { content: ""; position: absolute; right: 20px; bottom: 71px; left: 250px; height: 4px; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg,var(--dialogue-accent) var(--dialogue-progress),color-mix(in srgb,var(--dialogue-accent) 12%,transparent) var(--dialogue-progress)); box-shadow: 0 0 10px color-mix(in srgb,var(--dialogue-accent) 20%,transparent); } .dialogue-layer .dialogue-portrait { position: relative; left: auto; bottom: auto; grid-column: 1; grid-row: 1 / 3; justify-self: stretch; width: 230px; height: 340px; margin: 0; align-self: end; overflow: visible; border: 0; border-radius: 0 0 0 28px; background: linear-gradient(90deg,color-mix(in srgb,var(--dialogue-accent) 18%,transparent),transparent) !important; } .dialogue-layer .dialogue-portrait > i { width: 100%; height: 100%; background-repeat: no-repeat; filter: drop-shadow(0 18px 18px rgba(3,31,48,.25)); } .dialogue-layer .dialogue-portrait > span { right: 18px; bottom: 15px; left: 18px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: color-mix(in srgb,var(--dialogue-accent) 82%,#173c55) !important; font-size: .56rem; letter-spacing: .07em; } .dialogue-layer .dialogue-copy { position: relative; z-index: 1; grid-column: 2; grid-row: 1; align-self: stretch; min-width: 0; padding: 30px 4px 18px; } .dialogue-layer .dialogue-copy header { align-items: start; } .dialogue-layer .dialogue-copy header small { color: var(--dialogue-accent); font-size: .64rem; font-weight: 850; letter-spacing: .1em; } .dialogue-layer .dialogue-copy h2 { margin-top: 5px; font: 780 1.45rem/1.05 var(--ui-display); letter-spacing: -.025em; } .dialogue-layer .dialogue-copy > p { min-height: 108px; margin: 26px 0 18px; color: var(--theme-text); font-size: .96rem; font-weight: 520; line-height: 1.65; } .dialogue-layer .dialogue-hint { color: var(--theme-muted); font-size: .6rem; } .dialogue-layer #dialogueSound { min-height: 36px; border: 1px solid var(--theme-border); border-radius: 11px; background: color-mix(in srgb,var(--theme-card) 80%,transparent); color: var(--theme-muted); } .dialogue-layer .dialogue-listener { grid-column: 3; grid-row: 1; align-self: end; justify-self: center; height: 238px; padding: 0; opacity: .95; } .dialogue-layer .dialogue-listener > i { width: 154px; height: 226px; filter: drop-shadow(0 12px 13px rgba(4,31,49,.16)); } .dialogue-layer .dialogue-actions { grid-column: 2 / 4; display: grid; grid-template-columns: minmax(110px,.42fr) minmax(190px,.72fr); justify-content: end; align-items: end; gap: 9px; padding-top: 16px; margin: 0; } .dialogue-layer .dialogue-actions button { min-height: 48px; border: 1px solid var(--theme-border); border-radius: 14px !important; background: color-mix(in srgb,var(--theme-card) 86%,transparent); color: var(--theme-muted); font-size: .7rem; font-weight: 800; } .dialogue-layer #dialogueNext { border-color: color-mix(in srgb,var(--dialogue-accent) 70%,var(--theme-border)); background: linear-gradient(180deg,color-mix(in srgb,var(--dialogue-accent) 82%,#fff 18%),var(--dialogue-accent)); color: #fff; box-shadow: 0 11px 24px color-mix(in srgb,var(--dialogue-accent) 22%,transparent); } /* Five-action mobile dock */ @media (max-width: 800px) { .game-screen .mobile-dock { z-index: 74 !important; left: max(8px,env(safe-area-inset-left)) !important; right: max(8px,env(safe-area-inset-right)) !important; bottom: max(7px,env(safe-area-inset-bottom)) !important; display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; height: 76px !important; padding: 6px 7px !important; overflow: visible !important; border-radius: 24px !important; background: color-mix(in srgb,var(--ui-glass-strong) 94%,transparent) !important; box-shadow: 0 16px 44px rgba(0,20,33,.32),0 1px 0 rgba(255,255,255,.12) inset !important; } .game-screen .mobile-dock button { position: relative; display: grid !important; place-items: center; align-content: center; gap: 3px !important; min-width: 0; min-height: 62px; padding: 4px 2px !important; border: 1px solid transparent !important; border-radius: 16px !important; background: transparent !important; color: var(--theme-muted) !important; } .game-screen .mobile-dock button > span { display: grid; place-items: center; width: 31px; height: 31px; } .game-screen .mobile-dock .mobile-nav-icon { width: 29px; height: 29px; overflow: visible; } .game-screen .mobile-dock button > b { max-width: 100%; color: currentColor; font-size: .52rem !important; font-weight: 750; letter-spacing: -.01em; text-transform: none; white-space: nowrap; } .game-screen .mobile-dock button:is(:hover,.is-active,.is-menu-open) { border-color: color-mix(in srgb,var(--theme-accent) 20%,transparent) !important; background: color-mix(in srgb,var(--theme-accent) 9%,transparent) !important; color: var(--theme-accent) !important; } .game-screen .mobile-dock .mobile-dock-primary { --nav-accent:#e9fbff; width: 68px; height: 74px; min-height: 74px; justify-self: center; margin-top: -18px; border: 5px solid color-mix(in srgb,var(--ui-glass-strong) 96%,transparent) !important; border-radius: 24px !important; background: linear-gradient(155deg,#35b8e8,#157ac0) !important; color: #fff !important; box-shadow: 0 13px 25px rgba(13,113,170,.34),0 2px 0 rgba(255,255,255,.24) inset !important; } .game-screen .mobile-dock .mobile-dock-primary > span { width: 35px; height: 35px; } .game-screen .mobile-dock .mobile-dock-primary .mobile-nav-icon { width: 34px; height: 34px; } .game-screen .mobile-dock .mobile-dock-primary > b { color: #fff; } .game-screen .mobile-dock .mobile-dock-primary > i { position: absolute; top: 5px; right: 7px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid #fff; border-radius: 999px; background: #ef5860; color: #fff; font-size: .52rem; font-style: normal; font-weight: 850; } .game-screen .side-panel, .game-screen .side-panel:is(.is-inventory-panel,.is-pokedex-panel,.is-pokedex-detail), .game-screen .chat-panel { bottom: calc(91px + env(safe-area-inset-bottom)) !important; } .game-screen .world-rail { position: absolute !important; z-index: 73 !important; top: auto !important; right: max(9px,env(safe-area-inset-right)) !important; bottom: calc(92px + env(safe-area-inset-bottom)) !important; left: max(9px,env(safe-area-inset-left)) !important; display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px !important; width: auto !important; max-height: min(58dvh,430px); padding: 10px !important; overflow: auto; border-radius: 22px !important; opacity: 0; pointer-events: none; transform: translateY(18px) scale(.98) !important; transition: opacity 160ms ease,transform 200ms ease !important; } .game-screen .world-rail.is-desktop-menu-open { opacity: 1; pointer-events: auto; transform: none !important; } .game-screen .world-rail button { min-height: 68px; } .game-screen .world-rail button span .ui-icon { width: 24px; height: 24px; } .game-screen .world-rail button b { font-size: .56rem; } .pokedex-scroll-filter { grid-template-columns: 1fr; gap: 4px; padding: 6px; } .pokedex-scroll-filter > header { flex-direction: row; align-items: center; padding: 2px 2px 4px 4px; } .pokedex-scroll-filter > header nav button { width: 36px; height: 34px; } .pokedex-generation-track > button { flex-basis: 128px; min-height: 56px; } .pokedex-type-track > button { min-height: 44px; } .pokedex-toolbar { grid-template-columns: 1fr; } .pokedex-filter-tabs { min-width: 0; overflow-x: auto; grid-template-columns: repeat(4,94px); } .pokedex-search { min-height: 48px; } .pokedex-card-number small { display: none; } .dialogue-layer .dialogue-card { grid-template-columns: 98px minmax(0,1fr); grid-template-rows: minmax(178px,auto) auto; gap: 0 10px; width: calc(100vw - 12px); min-height: 250px; max-height: calc(100dvh - 94px); padding: 9px 10px 10px 0; overflow: auto !important; border-radius: 22px !important; } .dialogue-layer .dialogue-card::after { right: 10px; bottom: 63px; left: 108px; } .dialogue-layer .dialogue-portrait { position: relative; left: auto; bottom: auto; grid-column: 1; grid-row: 1; width: 98px; height: 170px; margin: 0; align-self: start; justify-self: stretch; } .dialogue-layer .dialogue-portrait > span { right: 4px; bottom: 3px; left: 4px; padding: 5px 3px; font-size: .43rem; } .dialogue-layer .dialogue-copy { grid-column: 2; grid-row: 1; padding: 12px 0; } .dialogue-layer .dialogue-copy header { gap: 5px; } .dialogue-layer .dialogue-copy header small { font-size: .48rem; } .dialogue-layer .dialogue-copy h2 { font-size: 1.05rem; } .dialogue-layer .dialogue-copy > p { min-height: 76px; margin: 16px 0 9px; font-size: .76rem; line-height: 1.52; } .dialogue-layer .dialogue-hint { font-size: .5rem; } .dialogue-layer #dialogueSound { min-width: 38px; width: 38px; padding: 0; } .dialogue-layer #dialogueSound b { display: none; } .dialogue-layer .dialogue-listener { display: none; } .dialogue-layer .dialogue-actions { grid-column: 1 / 3; grid-row: 2; grid-template-columns: .7fr 1.3fr; padding: 13px 0 0 9px; margin: 0; } .dialogue-layer .dialogue-actions button { min-height: 46px; font-size: .6rem; } } @media (max-width: 430px) { .game-screen .mobile-dock { height: 70px !important; padding-inline: 5px !important; } .game-screen .mobile-dock button { min-height: 57px; } .game-screen .mobile-dock button > span { width: 27px; height: 27px; } .game-screen .mobile-dock .mobile-nav-icon { width: 26px; height: 26px; } .game-screen .mobile-dock button > b { font-size: .46rem !important; } .game-screen .mobile-dock .mobile-dock-primary { width: 62px; height: 69px; min-height: 69px; border-radius: 22px !important; } .game-screen .side-panel, .game-screen .side-panel:is(.is-inventory-panel,.is-pokedex-panel,.is-pokedex-detail), .game-screen .chat-panel { bottom: calc(84px + env(safe-area-inset-bottom)) !important; } .game-screen .world-rail { bottom: calc(85px + env(safe-area-inset-bottom)) !important; } .pokedex-library-title p { display: none; } .pokedex-generation-track > button { flex-basis: 122px; } } /* v4.9 — inventory as an item-first game catalogue. */ .inventory-v49 { gap: 8px; } .inventory-head-v49 { min-height: 58px; padding-block: 4px 7px; } .inventory-title-v49 > span { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(145deg,color-mix(in srgb,var(--theme-accent) 13%,var(--theme-card)),color-mix(in srgb,var(--theme-accent) 4%,var(--theme-card))); box-shadow: inset 0 1px rgba(255,255,255,.45),0 7px 18px color-mix(in srgb,var(--theme-accent) 10%,transparent); } .inventory-title-v49 h2 { font-size: 22px; letter-spacing: -.025em; } .inventory-title-v49 em { display: block; margin-top: 3px; color: var(--theme-muted); font-size: 9px; font-style: normal; font-weight: 750; } .inventory-toolbar-v49 { grid-template-columns: minmax(0,1fr) 168px 76px; min-height: 40px; } .inventory-search-v49 { position: relative; border-color: color-mix(in srgb,var(--theme-accent) 18%,var(--theme-border)); background: color-mix(in srgb,var(--theme-card) 82%,transparent); box-shadow: inset 0 1px rgba(255,255,255,.35); } .inventory-search-v49:focus-within { border-color: color-mix(in srgb,var(--theme-accent) 68%,var(--theme-border)); box-shadow: 0 0 0 3px color-mix(in srgb,var(--theme-accent) 10%,transparent); } .inventory-search-v49 input[type="search"]::-webkit-search-cancel-button { display: none; } .inventory-search-v49 > button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: color-mix(in srgb,var(--theme-muted) 8%,transparent); color: var(--theme-muted); cursor: pointer; } .inventory-search-v49 > button:hover { background: color-mix(in srgb,var(--theme-accent) 10%,transparent); color: var(--theme-accent); } .inventory-search-v49 > button svg { width: 15px; height: 15px; } .inventory-layout-v49 { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 7px; } .inventory-v49 .inventory-categories-v49 { border-radius: 14px; } .inventory-v49 .inventory-categories-v49 > button { border-radius: 10px; text-align: center; } .inventory-v49 .inventory-categories-v49 > button::after { display: none; } .inventory-v49 .inventory-categories-v49 > button svg { width: 19px; height: 19px; } .inventory-v49 .inventory-categories-v49 > button i { background: color-mix(in srgb,currentColor 9%,var(--theme-card)); } .inventory-v49 .inventory-categories-v49 > button.is-active { box-shadow: inset 0 -2px var(--theme-accent),0 3px 10px color-mix(in srgb,var(--theme-accent) 8%,transparent); } .inventory-catalog-v49 { border-radius: 16px; background: color-mix(in srgb,var(--theme-card) 72%,transparent); } .inventory-catalog-v49 > header { min-height: 45px; padding: 5px 9px 5px 12px; } .inventory-catalog-v49 > header > span b { font-size: 12px; } .inventory-overview-v49 { display: flex; gap: 4px; } .inventory-catalog-v49 > header .inventory-overview-v49 > em { display: grid; grid-template-columns: 16px auto; grid-template-rows: auto auto; align-items: center; gap: 0 4px; min-width: 88px; padding: 4px 7px; border: 1px solid color-mix(in srgb,var(--theme-border) 82%,transparent); border-radius: 10px; background: color-mix(in srgb,var(--theme-surface-soft) 76%,transparent); } .inventory-overview-v49 svg { grid-row: 1/3; width: 15px; height: 15px; color: var(--theme-accent); } .inventory-overview-v49 b { color: var(--theme-text); font-size: 10px; line-height: 1; } .inventory-overview-v49 small { color: var(--theme-muted); font-size: 6.5px; font-weight: 750; line-height: 1.1; } .inventory-content-v49 { padding: 8px; } .inventory-v49 .inventory-item-v49 { --rarity-color:#8ba0ad; isolation: isolate; display: grid; border: 1px solid color-mix(in srgb,var(--rarity-color) 25%,var(--theme-border)); background: linear-gradient(155deg,color-mix(in srgb,var(--rarity-color) 5%,var(--theme-card)),var(--theme-card) 64%); box-shadow: 0 7px 18px rgba(4,34,51,.055),inset 0 1px rgba(255,255,255,.45); color: var(--theme-text); } .inventory-v49 .inventory-item-v49.rarity-uncommon { --rarity-color:#45ad73; } .inventory-v49 .inventory-item-v49.rarity-rare { --rarity-color:#3f91e7; } .inventory-v49 .inventory-item-v49.rarity-epic { --rarity-color:#8d61e1; } .inventory-v49 .inventory-item-v49.rarity-legendary { --rarity-color:#e4a92f; } .inventory-v49 .inventory-item-v49.rarity-quest { --rarity-color:#22a4b8; } .inventory-v49 .inventory-item-v49.rarity-starter { --rarity-color:#ee7651; } .inventory-v49 .inventory-item-v49::before,.inventory-v49 .inventory-item-v49::after { display: none !important; content: none !important; } .inventory-v49 .inventory-item-v49:hover,.inventory-v49 .inventory-item-v49:focus-visible { z-index: 4; border-color: color-mix(in srgb,var(--rarity-color) 62%,var(--theme-border)); box-shadow: 0 12px 28px rgba(3,28,45,.14),0 0 0 2px color-mix(in srgb,var(--rarity-color) 10%,transparent); transform: translateY(-2px); } .inventory-item-type-v49 { position: absolute; z-index: 4; top: 7px; left: 7px; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid color-mix(in srgb,var(--rarity-color) 20%,var(--theme-border)); border-radius: 9px; background: color-mix(in srgb,var(--theme-card) 88%,transparent); color: var(--rarity-color); box-shadow: 0 3px 10px rgba(4,34,51,.06); } .inventory-item-type-v49 svg { width: 16px; height: 16px; } .inventory-item-rarity-v49 { top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 0; background: color-mix(in srgb,var(--rarity-color) 8%,var(--theme-card)); color: var(--rarity-color); font-size: 7px; letter-spacing: .02em; } .inventory-item-rarity-v49 > i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb,currentColor 10%,transparent); } .inventory-item-art-v49 { position: relative; width: 100%; height: 126px; overflow: hidden; border: 0; border-radius: 13px; background: radial-gradient(circle at 50% 53%,color-mix(in srgb,var(--rarity-color) 13%,var(--theme-card)),transparent 63%); box-shadow: none; } .inventory-item-art-v49::before { content:""; position: absolute; z-index: -1; inset: 24% 16% 11%; border-radius: 50%; background: var(--rarity-color); filter: blur(24px); opacity: .08; } .inventory-item-art-v49::after { content:""; position: absolute; z-index: 2; inset: -42% auto -42% -58%; width: 34%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent); opacity: 0; transform: skewX(-18deg); pointer-events: none; } .inventory-item-v49:is(.rarity-uncommon,.rarity-rare,.rarity-epic,.rarity-legendary) .inventory-item-art-v49::after { opacity: .32; animation: inventory-rarity-sheen-v49 5.8s ease-in-out infinite; } @keyframes inventory-rarity-sheen-v49 { 0%,64% { left:-58%; } 84%,100% { left:132%; } } .inventory-item-art-v49 .item-icon,.inventory-item-art-v49 .item-icon img { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(4,31,46,.12)); transition: transform 180ms ease; } .inventory-item-v49:hover .inventory-item-art-v49 .item-icon,.inventory-item-v49:focus-visible .inventory-item-art-v49 .item-icon { transform: translateY(-2px) scale(1.035); } .inventory-item-art-v49 > em { right: 3px; bottom: 3px; display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 3px; min-width: 43px; padding: 5px 7px; border: 2px solid color-mix(in srgb,var(--theme-card) 92%,transparent); border-radius: 11px; background: color-mix(in srgb,#0d3048 94%,transparent); color: #fff; font-size: 12px; line-height: 1; box-shadow: 0 4px 12px rgba(2,24,39,.18); } .inventory-item-art-v49 > em small { color: rgba(255,255,255,.65); font-size: 5px; font-weight: 900; letter-spacing: .06em; } .inventory-item-favorite-v49 { position: absolute; z-index: 3; left: 5px; bottom: 5px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 8px; background: color-mix(in srgb,#f0bc32 16%,var(--theme-card)); color: #d89a08; } .inventory-item-favorite-v49 svg { width: 14px; height: 14px; } .inventory-item-copy-v49 { display: grid; place-items: center; min-height: 28px; padding: 0 4px; } .inventory-item-copy-v49 > b { display: -webkit-box; overflow: hidden; font-size: 11px; line-height: 1.16; text-align: center; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .inventory-item-tooltip-v49 { position: absolute; z-index: 12; inset: 5px; display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; gap: 6px; padding: 12px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--rarity-color) 30%,var(--theme-border)); border-radius: 14px; background: color-mix(in srgb,var(--theme-card) 94%,transparent); box-shadow: 0 12px 30px rgba(2,23,38,.2); opacity: 0; transform: scale(.96); pointer-events: none; text-align: left; backdrop-filter: blur(15px); transition: opacity 130ms ease,transform 130ms ease; } .inventory-item-tooltip-v49 small { color: var(--rarity-color); font-size: 7px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; } .inventory-item-tooltip-v49 b { display: -webkit-box; overflow: hidden; color: var(--theme-text); font-size: 10px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .inventory-item-tooltip-v49 em { display: -webkit-box; overflow: hidden; color: var(--theme-muted); font-size: 8px; font-style: normal; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .inventory-item-tooltip-v49 > i { align-self: end; color: var(--theme-accent); font-size: 7px; font-style: normal; font-weight: 900; } .inventory-item-v49:hover .inventory-item-tooltip-v49,.inventory-item-v49:focus-visible .inventory-item-tooltip-v49 { opacity: 1; transform: scale(1); } .inventory-v49.is-list .inventory-item-copy-v49 { padding-left: 7px; } .inventory-v49.is-list .inventory-item-type-v49 { display: none; } .inventory-v49.is-list .inventory-item-rarity-v49 { top: 8px; } .inventory-empty-v49 { min-height: 190px; margin-top: 24px; } @media (max-width: 800px) { .inventory-v49 { gap: 7px; } .inventory-head-v49 { min-height: 54px; padding-right: 46px; } .inventory-title-v49 em { font-size: 7px; } .inventory-toolbar-v49 { grid-template-columns: minmax(0,1fr) 42px; } .inventory-layout-v49 { display: flex; flex-direction: column; gap: 6px; } .inventory-v49 .inventory-categories-v49 { display: flex; gap: 5px; padding: 4px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; } .inventory-v49 .inventory-categories-v49 > button { flex: 0 0 82px; width: 82px; min-height: 38px; scroll-snap-align: start; } .inventory-catalog-v49 > header { min-height: 40px; } .inventory-overview-v49 { display: none; } .inventory-content-v49 { padding: 6px; } .inventory-v49 .inventory-items-v49 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; } .inventory-v49 .inventory-item-v49 { grid-template-rows: minmax(0,1fr) 30px; min-height: 151px; height: 151px; padding: 6px; } .inventory-item-art-v49 { height: 110px; } .inventory-item-art-v49 .item-icon,.inventory-item-art-v49 .item-icon img { width: 96px; height: 96px; } .inventory-item-rarity-v49 { top: 6px; right: 6px; font-size: 6px; } .inventory-item-type-v49 { top: 6px; left: 6px; width: 24px; height: 24px; } .inventory-item-copy-v49 > b { font-size: 10px; } .inventory-item-tooltip-v49 { display: none; } .inventory-v49.is-list .inventory-items-v49 { grid-template-columns: 1fr; } } @media (max-width: 430px) { .inventory-wallet-v49 > span { min-height: 32px; } .inventory-v49 .inventory-item-v49 { min-height: 145px; height: 145px; } .inventory-item-art-v49 { height: 104px; } .inventory-item-art-v49 .item-icon,.inventory-item-art-v49 .item-icon img { width: 90px; height: 90px; } } @media (prefers-reduced-motion: reduce) { .inventory-item-art-v49::after { animation: none !important; opacity: 0 !important; } .inventory-item-v49,.inventory-item-v49 .item-icon,.inventory-item-tooltip-v49 { transition: none !important; } } /* v4.5 — generation-scoped Pokédex, six-slot team and owned Pokémon dashboard. */ .pokedex-generation-track > button { min-width: 142px; } .pokedex-generation-track > button.is-active { box-shadow: 0 7px 18px color-mix(in srgb,var(--theme-accent) 15%,transparent),inset 0 -3px 0 var(--theme-accent); } .pokedex-results-meta > span { letter-spacing: .01em; } .dex-detail-v43 .dex-visual::before { width: min(320px,76%); } .dex-innate-card > img { width: 48px !important; height: 48px !important; } @media (min-width: 801px) { .game-screen .side-panel.is-team-panel { width: min(900px,calc(100vw - 132px)); height: min(720px,calc(100dvh - 92px)); } .game-screen .side-panel.is-center-panel { width: min(1040px,calc(100vw - 132px)); height: min(760px,calc(100dvh - 92px)); } .game-screen .side-panel.is-pokemon-detail-panel { width: min(1200px,calc(100vw - 110px)); height: min(790px,calc(100dvh - 72px)); } } .team-window-v45,.center-window-v45,.pokemon-instance-v45 { min-width: 0; color: var(--theme-text); } .team-window-v45,.center-window-v45 { display: grid; gap: 10px; height: 100%; min-height: 0; } .team-window-v45 { grid-template-rows: auto auto minmax(0,1fr) auto; } .center-window-v45 { grid-template-rows: auto auto minmax(0,1fr); } .team-head-v45,.center-head-v45 { padding: 2px 4px 9px; border-bottom: 1px solid var(--theme-border); cursor: grab; } .team-head-v45:active,.center-head-v45:active,.pokemon-detail-head-v45:active { cursor: grabbing; } .team-grid-v45 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; min-height: 0; overflow: auto; padding: 2px; } .team-slot-v45 { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto auto; min-width: 0; min-height: 244px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--species-accent,var(--theme-accent)) 28%,var(--theme-border)); border-radius: 21px; background: radial-gradient(circle at 78% 18%,color-mix(in srgb,var(--species-accent,var(--theme-accent)) 14%,transparent),transparent 34%), linear-gradient(150deg,color-mix(in srgb,var(--species-accent,var(--theme-accent)) 4%,var(--theme-card)),var(--theme-card) 58%); box-shadow: 0 8px 25px rgba(7,39,56,.08); } .team-slot-v45::after { content: ""; position: absolute; right: -40px; top: 38px; width: 120px; height: 120px; border: 1px solid color-mix(in srgb,var(--species-accent,var(--theme-accent)) 11%,transparent); border-radius: 50%; pointer-events: none; } .team-slot-v45.is-lead { border-color: color-mix(in srgb,var(--species-accent,var(--theme-accent)) 70%,var(--theme-border)); box-shadow: 0 10px 28px color-mix(in srgb,var(--species-accent,var(--theme-accent)) 16%,transparent),inset 0 3px var(--species-accent,var(--theme-accent)); } .team-slot-v45 > header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 0; } .team-slot-v45 > header span { color: var(--theme-muted); font-size: .58rem; font-weight: 900; } .team-slot-v45 > header small { padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb,var(--species-accent,var(--theme-accent)) 10%,var(--theme-card)); color: var(--species-accent,var(--theme-accent)); font-size: .48rem; font-weight: 900; } .team-slot-main-v45 { position: relative; z-index: 1; display: grid; grid-template-rows: 115px auto; min-width: 0; padding: 0 10px 5px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; } .team-slot-art-v45 { display: grid; place-items: center; min-height: 0; } .team-slot-portrait-v45 { width: 126px; height: 112px; overflow: visible; filter: drop-shadow(0 11px 9px rgba(1,30,44,.22)); } .team-slot-portrait-v45 img { width: 100%; height: 100%; object-fit: contain; } .team-slot-copy-v45 { min-width: 0; } .team-slot-copy-v45 > b { display: block; overflow: hidden; font-size: .9rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .team-slot-copy-v45 > b i { margin-left: 4px; color: #efb51c; font-style: normal; } .team-slot-copy-v45 > em { display: flex; justify-content: center; margin-top: 4px; font-style: normal; } .team-slot-copy-v45 > small { display: block; margin-top: 4px; color: var(--theme-muted); font-size: .52rem; text-align: center; } .team-slot-progress-v45 { display: grid; gap: 3px; padding: 0 10px 7px; } .team-slot-progress-v45 > span { display: flex; justify-content: space-between; color: var(--theme-muted); font-size: .43rem; } .team-slot-progress-v45 > i { height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb,var(--theme-text) 7%,transparent); } .team-slot-progress-v45 > i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--species-accent,var(--theme-accent)),#66d1df); } .team-slot-stats-v45 { display: grid; grid-template-columns: 1fr 1fr; margin: 0 10px 8px; border: 1px solid var(--theme-border); border-radius: 11px; background: color-mix(in srgb,var(--theme-surface-soft) 82%,transparent); } .team-slot-stats-v45 span { display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 5px 7px; } .team-slot-stats-v45 span + span { border-left: 1px solid var(--theme-border); } .team-slot-stats-v45 small { color: var(--theme-muted); font-size: .41rem; } .team-slot-stats-v45 b { color: var(--species-accent,var(--theme-accent)); font-size: .68rem; } .team-slot-v45 > footer { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 5px; padding: 0 8px 8px; } .team-slot-v45 > footer :is(button,span),.team-slot-v45.is-empty > button { display: grid; place-items: center; min-height: 28px; padding: 0 7px; border: 1px solid var(--theme-border); border-radius: 9px; background: var(--theme-surface-soft); color: var(--theme-muted); font-size: .46rem; font-weight: 850; } .team-slot-v45 > footer span { color: var(--species-accent,var(--theme-accent)); } .team-slot-v45.is-empty { place-items: center; grid-template-rows: auto 1fr auto auto; border-style: dashed; background: color-mix(in srgb,var(--theme-surface-soft) 70%,transparent); box-shadow: none; color: var(--theme-muted); } .team-slot-v45.is-empty::after { right: 50%; top: 50%; transform: translate(50%,-50%); } .team-slot-v45.is-empty > header { width: 100%; } .team-slot-v45.is-empty > i { align-self: end; display: grid; place-items: center; width: 62px; height: 62px; border: 1px dashed var(--theme-border); border-radius: 22px; background: var(--theme-card); } .team-slot-v45.is-empty > i .ui-icon { width: 28px; height: 28px; } .team-slot-v45.is-empty > div { z-index: 1; text-align: center; } .team-slot-v45.is-empty > div b { display: block; color: var(--theme-text); font-size: .7rem; } .team-slot-v45.is-empty > div small { display: block; margin-top: 3px; font-size: .48rem; } .team-slot-v45.is-empty > button { z-index: 1; min-width: 110px; margin: 8px 8px 10px; color: var(--theme-accent); cursor: pointer; } .team-summary-v45 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 7px; } .team-summary-v45 > span { display: grid; place-items: center; min-height: 46px; border: 1px solid var(--theme-border); border-radius: 13px; background: var(--theme-surface-soft); } .team-summary-v45 small { color: var(--theme-muted); font-size: .48rem; } .team-summary-v45 b { font-size: 1rem; } .center-grid-v45 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: start; gap: 9px; min-height: 0; overflow: auto; padding: 2px 3px 8px 2px; } .center-card-v45 { position: relative; display: grid; grid-template-rows: auto auto auto auto; min-width: 0; min-height: 278px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--species-accent,var(--theme-accent)) 24%,var(--theme-border)); border-radius: 20px; background: radial-gradient(circle at 25% 32%,color-mix(in srgb,var(--species-accent,var(--theme-accent)) 13%,transparent),transparent 34%),var(--theme-card); } .center-card-v45.is-lead { box-shadow: inset 0 3px var(--species-accent,var(--theme-accent)); } .center-card-v45 > header { display: flex; align-items: center; justify-content: space-between; padding: 8px 9px 0; } .center-card-v45 > header small { color: var(--species-accent,var(--theme-accent)); font-size: .47rem; font-weight: 900; } .center-card-v45 > header span { color: var(--theme-muted); font-size: .5rem; font-weight: 850; } .center-main-v45 { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; min-width: 0; padding: 3px 9px 1px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; } .center-art-v45 { display: grid; place-items: center; } .center-portrait-v45 { width: 110px; height: 112px; overflow: visible; filter: drop-shadow(0 9px 8px rgba(4,32,46,.2)); } .center-portrait-v45 img { width: 100%; height: 100%; object-fit: contain; } .center-copy-v45 { min-width: 0; } .center-copy-v45 > b { display: block; overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; } .center-copy-v45 > b i { color: #efb51c; font-style: normal; } .center-copy-v45 > em { display: flex; margin-top: 5px; font-style: normal; } .center-copy-v45 > small { display: block; margin-top: 5px; color: var(--theme-muted); font-size: .48rem; } .center-copy-v45 > code { display: block; overflow: hidden; margin-top: 6px; color: color-mix(in srgb,var(--species-accent,var(--theme-accent)) 72%,var(--theme-text)); font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: .45rem; text-overflow: ellipsis; white-space: nowrap; } .center-potential-v45 { display: grid; gap: 4px; margin: 0 10px 9px; } .center-potential-v45 > span { display: flex; justify-content: space-between; color: var(--theme-muted); font-size: .43rem; } .center-potential-v45 > i { height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb,var(--theme-text) 7%,transparent); } .center-potential-v45 > i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--species-accent,var(--theme-accent)),#5ed3b4); } .center-actions-v45 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; padding: 0 8px 8px; } .center-actions-v45 button { min-height: 29px; padding: 0 6px; border: 1px solid var(--theme-border); border-radius: 9px; background: var(--theme-surface-soft); color: var(--theme-muted); font-size: .46rem; font-weight: 850; } .center-actions-v45 button.is-primary { color: var(--species-accent,var(--theme-accent)); border-color: color-mix(in srgb,var(--species-accent,var(--theme-accent)) 38%,var(--theme-border)); } .center-actions-v45 button.is-evolve { color: #8a61d6; } .pokemon-instance-v45 { height: 100%; min-height: 0; } .pokemon-detail-head-v45 { padding: 2px 4px 8px; cursor: grab; } .pokemon-instance-grid-v45 { display: grid; grid-template-columns: minmax(390px,.88fr) minmax(0,1.12fr); gap: 10px; min-height: 0; } .pokemon-instance-left-v45,.pokemon-instance-right-v45 { display: grid; align-content: start; gap: 9px; min-width: 0; } .pokemon-detail-hero-v45 { grid-template-columns: 165px minmax(0,1fr); min-height: 192px; padding: 12px; overflow: hidden; background: radial-gradient(circle at 22% 48%,color-mix(in srgb,var(--species-accent) 15%,transparent),transparent 35%),var(--theme-card); } .pokemon-detail-art-v45 { display: grid; place-items: center; } .pokemon-detail-portrait-v45 { width: 166px; height: 166px; overflow: visible; filter: drop-shadow(0 14px 12px rgba(2,28,42,.22)); } .pokemon-detail-portrait-v45 img { width: 100%; height: 100%; object-fit: contain; } .pokemon-genome-card-v45 { grid-template-columns: 150px minmax(0,1fr) 42px; margin: 0; padding: 11px; background: linear-gradient(120deg,color-mix(in srgb,#24b9cf 10%,var(--theme-card)),color-mix(in srgb,#6a5cdb 5%,var(--theme-card))); } .pokemon-genome-card-v45 > img { width: 148px; height: 62px; object-fit: contain; } .pokemon-genome-card-v45 b { overflow-wrap: anywhere; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: .78rem; letter-spacing: .04em; } .pokemon-genome-card-v45 code { display: block; margin-top: 3px; color: var(--theme-muted); font-size: .5rem; } .pokemon-trait-grid-v45 { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 0; } .pokemon-trait-grid-v45 article { min-height: 66px; padding: 9px; } .pokemon-trait-grid-v45 b { font-size: .66rem; } .pokemon-trait-grid-v45 span { font-size: .47rem; } .pokemon-instance-v45 .pokemon-detail-section { margin-top: 0; padding: 10px; } .pokemon-effective-stats-v45 { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5px; } .pokemon-stat-tile-v45 { min-width: 0; padding: 7px 5px !important; text-align: center; } .pokemon-stat-tile-v45 small { overflow: hidden; font-size: .46rem; text-overflow: ellipsis; white-space: nowrap; } .pokemon-stat-tile-v45 b { font-size: .9rem; } .pokemon-stat-tile-v45 span { font-size: .4rem; } .pokemon-gene-grid-v45 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; } .pokemon-gene-tile-v45 { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px; padding: 7px; border: 1px solid var(--theme-border); border-radius: 10px; background: var(--theme-surface-soft); } .pokemon-gene-tile-v45 span { overflow: hidden; color: var(--theme-muted); font-size: .48rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .pokemon-gene-tile-v45 b { font-size: .64rem; } .pokemon-gene-tile-v45 b small { color: var(--theme-muted); font-size: .4rem; } .pokemon-gene-tile-v45 > i { grid-column: 1/-1; height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb,var(--theme-text) 7%,transparent); } .pokemon-gene-tile-v45 > i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#48c778,var(--species-accent,var(--theme-accent))); } .pokemon-mastery-section-v45 { min-height: 0; } .pokemon-detail-actions-v45 { margin-top: 0; } /* Inventory: two balanced navigation rows, consistent art and a useful empty state. */ .inventory-v45 { position: relative; isolation: isolate; } .inventory-v45::before,.inventory-v45::after { content: ""; position: absolute; z-index: -1; pointer-events: none; } .inventory-v45::before { left: -30px; bottom: -44px; width: 190px; height: 140px; border: 1px solid color-mix(in srgb,var(--inv-blue) 10%,transparent); border-radius: 58% 42% 0 0; transform: rotate(12deg); } .inventory-v45::after { right: 5%; top: 74px; width: 160px; height: 160px; background: radial-gradient(circle,color-mix(in srgb,var(--inv-blue) 5%,transparent),transparent 68%); } .inventory-v45 .inventory-v2740__categories { grid-template-columns: repeat(5,minmax(96px,1fr)); gap: 5px; } .inventory-v45 .inventory-v2740__categories button { grid-template-columns: 30px minmax(0,1fr); grid-template-rows: 1fr; justify-items: start; min-height: 43px; padding: 5px 9px; } .inventory-v45 .inventory-v2740__categories button > span { font-size: .5rem; } .inventory-v45 .inventory-v2740__categories .inventory-category-icon,.inventory-v45 .inventory-v2740__categories .inventory-ui-icon { width: 26px; height: 26px; } .inventory-v45 .inventory-v2740__items { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; } .inventory-v45 .inventory-item-v2740 { grid-template-rows: 70px minmax(30px,auto) 22px; min-height: 136px; padding: 8px; } .inventory-v45 .inventory-item-v2740__art { width: 70px; height: 70px; } .inventory-v45 .inventory-item-v2740__art .item-icon,.inventory-v45 .inventory-item-v2740__art .item-graphic-base { width: 59px; height: 59px; object-fit: contain; } .inventory-v45 .inventory-item-v2740__name b { font-size: .6rem; } .inventory-v45 .inventory-item-v2741__name > small { font-size: .46rem; } .inventory-empty-v45 { align-self: center; justify-self: center; width: min(430px,86%); min-height: 220px; padding: 24px; border: 1px solid color-mix(in srgb,var(--inv-blue) 18%,var(--inv-line)); border-radius: 24px; background: radial-gradient(circle at 18% 14%,color-mix(in srgb,var(--inv-blue) 10%,transparent),transparent 30%),var(--inv-card); box-shadow: 0 16px 40px rgba(7,42,61,.08); text-align: center; } .inventory-empty-v45 > span { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid var(--inv-line); border-radius: 22px; background: color-mix(in srgb,var(--inv-blue) 7%,var(--inv-soft)); color: var(--inv-blue); } .inventory-empty-v45 > span .inventory-ui-icon { width: 34px; height: 34px; opacity: 1; } .inventory-empty-v45 > small { color: var(--inv-blue); font-size: .48rem; font-weight: 900; letter-spacing: .11em; } .inventory-empty-v45 > b { font-size: 1rem; } .inventory-empty-v45 > p { max-width: 330px; margin: 0; color: var(--inv-muted); font-size: .62rem; line-height: 1.45; } .inventory-empty-v45 > button { min-height: 34px; margin-top: 5px; padding: 0 14px; border: 1px solid color-mix(in srgb,var(--inv-blue) 35%,var(--inv-line)); border-radius: 11px; background: color-mix(in srgb,var(--inv-blue) 8%,var(--inv-card)); color: var(--inv-blue); font-size: .54rem; font-weight: 850; cursor: pointer; } @media (max-width: 1000px) and (min-width: 801px) { .team-grid-v45,.center-grid-v45 { grid-template-columns: repeat(2,minmax(0,1fr)); } .pokemon-instance-grid-v45 { grid-template-columns: minmax(330px,.9fr) minmax(0,1.1fr); } .pokemon-trait-grid-v45 { grid-template-columns: repeat(2,minmax(0,1fr)); } .pokemon-effective-stats-v45 { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (max-width: 800px) { .game-screen .side-panel:is(.is-team-panel,.is-center-panel,.is-pokemon-detail-panel) { width: auto; } .team-grid-v45,.center-grid-v45 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; overflow: visible; } .team-slot-v45 { min-height: 218px; } .team-slot-main-v45 { grid-template-rows: 94px auto; padding-inline: 6px; } .team-slot-portrait-v45 { width: 96px; height: 92px; } .team-slot-copy-v45 > b { font-size: .72rem; } .team-slot-stats-v45 { margin-inline: 6px; } .team-slot-v45 > footer { grid-template-columns: 1fr; } .team-summary-v45 { grid-template-columns: 1fr 1fr; } .team-summary-v45 .panel-primary { grid-column: 1/-1; } .center-card-v45 { min-height: 244px; } .center-main-v45 { grid-template-columns: 84px minmax(0,1fr); padding-inline: 6px; } .center-portrait-v45 { width: 84px; height: 92px; } .center-copy-v45 > code { display: none; } .center-actions-v45 { grid-template-columns: 1fr; } .pokemon-instance-grid-v45 { grid-template-columns: 1fr; } .pokemon-detail-hero-v45 { grid-template-columns: 116px minmax(0,1fr); min-height: 148px; } .pokemon-detail-portrait-v45 { width: 118px; height: 118px; } .pokemon-genome-card-v45 { grid-template-columns: 105px minmax(0,1fr) 36px; } .pokemon-genome-card-v45 > img { width: 102px; } .pokemon-trait-grid-v45 { grid-template-columns: repeat(2,minmax(0,1fr)); } .pokemon-effective-stats-v45,.pokemon-gene-grid-v45 { grid-template-columns: repeat(3,minmax(0,1fr)); } .inventory-v45 .inventory-v2740__categories { display: flex; overflow-x: auto; padding-bottom: 4px; } .inventory-v45 .inventory-v2740__categories button { flex: 0 0 94px; grid-template-columns: 25px minmax(0,1fr); } .inventory-v45 .inventory-v2740__items { grid-template-columns: repeat(2,minmax(0,1fr)); } .inventory-empty-v45 { min-height: 190px; padding: 18px; } } @media (max-width: 430px) { .team-slot-v45 { min-height: 206px; border-radius: 17px; } .team-slot-copy-v45 > small,.team-slot-progress-v45 { display: none; } .team-slot-stats-v45 { margin-top: 4px; } .team-slot-stats-v45 span { display: grid; padding: 4px 5px; text-align: center; } .center-grid-v45 { grid-template-columns: 1fr; } .pokemon-detail-hero-v45 { grid-template-columns: 98px minmax(0,1fr); padding: 8px; } .pokemon-detail-portrait-v45 { width: 100px; height: 105px; } .pokemon-detail-hero-v45 h2 { font-size: 1.1rem; } .pokemon-genome-card-v45 { grid-template-columns: 82px minmax(0,1fr) 32px; padding: 8px; } .pokemon-genome-card-v45 > img { width: 80px; height: 54px; } .pokemon-genome-card-v45 b { font-size: .62rem; } .pokemon-trait-grid-v45,.pokemon-effective-stats-v45,.pokemon-gene-grid-v45 { grid-template-columns: repeat(2,minmax(0,1fr)); } .inventory-v45 .inventory-item-v2740 { min-height: 124px; } .inventory-v45 .inventory-item-v2740__art { width: 62px; height: 62px; } .inventory-v45 .inventory-item-v2740__art .item-icon,.inventory-v45 .inventory-item-v2740__art .item-graphic-base { width: 52px; height: 52px; } } @media (prefers-reduced-motion: reduce) { .pokedex-scroll-track { scroll-behavior: auto; } .game-screen .side-panel:is(.is-pokedex-panel,.is-pokedex-detail,.is-inventory-panel), .game-screen .world-rail { transition-duration: 1ms !important; } } /* v4.3 — compact Russian Pokédex dossier and mobile HUD polish */ .quest-widget-journal { display: none; } .pokedex-nav-device img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(4,30,42,.2)); } .pokedex-library { gap: 9px; } .pokedex-library-head { grid-template-columns: minmax(0,1fr) 220px; min-height: 104px; padding: 14px 64px 14px 16px; border-radius: 20px; cursor: grab; user-select: none; } .pokedex-library-head.is-dragging, .dex-detail-head.is-dragging { cursor: grabbing; } .pokedex-library-title { grid-template-columns: 68px minmax(0,1fr); gap: 12px; } .pokedex-library-mark { width: 68px; height: 68px; border: 0; background: rgba(239,253,255,.09); } .pokedex-library-mark img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,12,21,.3)); } .pokedex-library-title h2 { margin: 4px 0 0; font-size: clamp(2rem,3vw,2.8rem); } .pokedex-library-title small { font-size: .56rem; } .pokedex-progress { padding: 10px 12px 9px; border-radius: 15px; } .pokedex-progress > i { height: 6px; } .pokedex-progress-next { grid-column: 1/-1; margin-top: 1px; color: rgba(226,246,248,.62); font-size: .5rem !important; } .pokedex-toolbar { grid-template-columns: minmax(260px,.72fr) minmax(460px,1.28fr); gap: 7px; } .pokedex-search { min-height: 42px; border-radius: 13px; } .pokedex-filter-tabs { padding: 3px; border-radius: 13px; } .pokedex-filter-tabs button { min-height: 34px; font-size: .63rem; } .pokedex-scroll-filter { grid-template-columns: 96px minmax(0,1fr); gap: 6px; padding: 5px; border-radius: 14px; } .pokedex-scroll-filter > header { gap: 4px; padding: 3px; } .pokedex-scroll-filter > header small { font-size: .46rem; } .pokedex-scroll-filter > header b { font-size: .62rem; } .pokedex-scroll-filter > header nav { gap: 4px; } .pokedex-scroll-filter > header nav button { width: 30px; height: 27px; border-radius: 8px; } .pokedex-generation-track > button { flex-basis: 123px; min-height: 49px; padding: 6px 8px; border-radius: 11px; } .pokedex-generation-track > button.is-all { flex-basis: 146px; } .pokedex-generation-track > button em { position: relative; z-index: 1; } .pokedex-generation-track > button em span { color: var(--theme-accent); } .pokedex-type-filter-v42 { grid-template-columns: 96px minmax(0,1fr); } .pokedex-type-track > button { min-height: 38px; padding: 0 9px; border-radius: 10px; } .pokedex-filter-type-icon { width: 18px; height: 18px; object-fit: contain; } .pokedex-filter-type-icon.is-device { width: 22px; height: 22px; } .pokedex-type-track > button > .pokedex-filter-type-icon { filter: drop-shadow(0 2px 3px color-mix(in srgb,var(--type-chip) 28%,transparent)); } .pokedex-results-meta { min-height: 20px; } .pokedex-grid-v41 { gap: 8px; } .pokedex-grid-v41 .pokedex-species-card { min-height: 122px; grid-template-columns: 94px minmax(0,1fr); padding: 13px 10px 9px; overflow: hidden; } .pokedex-grid-v41 .pokedex-species-card::before { background: radial-gradient(circle at var(--species-spot-x) var(--species-spot-y),color-mix(in srgb,var(--species-accent) 22%,transparent),transparent 32%), linear-gradient(var(--species-angle),color-mix(in srgb,var(--species-accent-2) 10%,transparent),transparent 52%), linear-gradient(135deg,var(--ui-highlight),transparent 55%); } .pokedex-grid-v41 .pokedex-species-card::after { left: 16px; bottom: 2px; width: 82px; height: 82px; border: 0; border-radius: 0; background: var(--species-type-icon) center/contain no-repeat; box-shadow: none; opacity: .075; transform: rotate(var(--species-angle)); } .pokedex-card-art { position: relative; z-index: 1; width: 91px; height: 91px; overflow: visible; } .pokedex-home-portrait { overflow: visible; } .pokedex-home-portrait img { width: 100%; height: 100%; object-fit: contain; } .pokedex-grid-v41 .pokedex-species-card.is-locked .pokedex-home-portrait img { filter: saturate(.76) drop-shadow(0 8px 8px rgba(0,20,29,.15)); } .pokedex-grid-v41 .pokedex-species-card > em.is-caught { background: color-mix(in srgb,#55bd69 15%,var(--theme-card)); color: color-mix(in srgb,#44a95a 80%,var(--theme-text)); } .dex-detail-v43 { display: grid; grid-template-rows: auto minmax(0,1fr); height: 100%; min-height: 0; gap: 9px; } .dex-detail-v43 .dex-detail-head { position: relative; top: auto; margin: 0; min-height: 62px; padding: 7px 54px 7px 7px; cursor: grab; user-select: none; } .dex-detail-v43 .dex-detail-head > span small { font-size: .55rem; } .dex-detail-v43 .dex-detail-head h2 { margin-top: 2px; font-size: 1.65rem; } .dex-detail-v43 .dex-detail-head > button { min-height: 38px; } .dex-dossier-grid { display: grid; grid-template-columns: minmax(0,.93fr) minmax(0,1.07fr); gap: 9px; min-height: 0; } .dex-dossier-left, .dex-dossier-right { display: grid; gap: 9px; min-width: 0; min-height: 0; } .dex-dossier-left { grid-template-rows: minmax(0,1fr) 250px; } .dex-dossier-right { grid-template-rows: auto minmax(0,1fr) auto; align-content: stretch; } .dex-detail-v43 .dex-hero-card { display: grid; grid-template-rows: auto minmax(190px,1fr) auto auto; min-height: 0; padding: 9px; overflow: hidden; } .dex-detail-v43 .dex-hero-card::before { height: 100%; background: radial-gradient(circle at var(--species-spot-x) var(--species-spot-y),color-mix(in srgb,var(--species-accent) 21%,transparent),transparent 35%), linear-gradient(var(--species-angle),color-mix(in srgb,var(--species-accent-2) 14%,transparent),transparent 55%); opacity: 1; } .dex-detail-v43 .dex-hero-card::after { content: ""; position: absolute; right: 18px; top: 68px; width: 170px; height: 170px; background: var(--species-type-icon) center/contain no-repeat; opacity: .06; pointer-events: none; } .dex-detail-v43 .dex-visual-tabs { z-index: 2; align-items: center; margin-bottom: 5px; } .dex-detail-v43 .dex-visual-tabs > em { margin-left: auto; padding: 5px 8px; border-radius: 9px; background: color-mix(in srgb,var(--dex-accent) 11%,var(--theme-card)); color: var(--dex-accent); font-size: .56rem; font-style: normal; font-weight: 800; } .dex-detail-v43 .dex-visual { min-height: 190px; overflow: visible; border-radius: 15px; background: radial-gradient(circle at 50% 58%,color-mix(in srgb,var(--dex-accent) 20%,transparent),transparent 58%),color-mix(in srgb,var(--theme-surface-soft) 78%,transparent); } .dex-detail-v43 .dex-main-portrait { width: min(250px,80%); height: min(250px,100%); overflow: visible; } .dex-detail-v43 .dex-main-portrait img { width: 100%; height: 100%; object-fit: contain; } .dex-detail-v43 .dex-identity { grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px; padding: 6px 2px 3px; } .dex-detail-v43 .dex-identity p { display: grid; gap: 2px; min-width: 0; } .dex-detail-v43 .dex-identity p b { overflow: hidden; color: var(--theme-text); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; } .dex-detail-v43 .dex-identity p span { color: var(--theme-muted); font-size: .54rem; } .dex-detail-v43 .dex-physical-profile { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin-top: 4px; } .dex-detail-v43 .dex-physical-profile > article { grid-template-columns: 25px minmax(0,1fr); min-height: 49px; gap: 5px; padding: 5px; border-radius: 10px; } .dex-detail-v43 .dex-physical-profile > article > img, .dex-detail-v43 .dex-size-frequency-card header img { width: 22px; height: 22px; } .dex-detail-v43 .dex-physical-profile article small { font-size: .43rem !important; } .dex-detail-v43 .dex-physical-profile article b { margin-top: 1px; font-size: .7rem; } .dex-detail-v43 .dex-physical-profile article em { font-size: .46rem; white-space: nowrap; } .dex-detail-v43 .dex-physical-profile .dex-size-range-card { grid-column: auto; grid-template-columns: 25px minmax(0,1fr); } .dex-detail-v43 .dex-physical-profile .dex-size-frequency-card { grid-column: 1/-1; display: grid; grid-template-columns: 95px minmax(0,1fr); align-items: center; min-height: 54px; padding: 5px 7px; } .dex-detail-v43 .dex-size-frequency-card header { grid-template-columns: 24px minmax(0,1fr); gap: 4px; margin: 0; } .dex-detail-v43 .dex-size-distribution { height: 44px; gap: 3px; } .dex-detail-v43 .dex-size-frequency b { font-size: .45rem; } .dex-detail-v43 .dex-size-frequency small { font-size: .42rem !important; } .dex-detail-v43 .dex-stats-card { min-height: 0; padding: 10px 11px; } .dex-detail-v43 .dex-stats-card > header { margin-bottom: 5px; } .dex-detail-v43 .dex-stats-card > header b { font-size: 1rem; } .dex-detail-v43 .dex-stat-row { grid-template-columns: 94px 27px minmax(0,1fr); min-height: 22px; gap: 5px; margin: 2px 0; } .dex-detail-v43 .dex-stat-row > span b { font-size: .59rem; } .dex-detail-v43 .dex-stat-row > strong { font-size: .67rem; } .dex-detail-v43 .dex-stat-row > em { grid-column: 3; grid-row: 1; height: 5px; } .dex-detail-v43 .dex-stats-card > footer { gap: 4px; margin-top: 4px; } .dex-detail-v43 .dex-stats-card > footer span { padding: 4px 5px; border-radius: 8px; } .dex-detail-v43 .dex-stats-card > footer b { font-size: .61rem; } .dex-detail-v43 .dex-section { min-height: 0; padding: 10px; overflow: visible; } .dex-detail-v43 .dex-section > header { margin-bottom: 7px; } .dex-detail-v43 .dex-section > header h3 { font-size: 1rem; } .dex-detail-v43 .dex-section > header em { font-size: .52rem; } .dex-detail-v43 .dex-evolution-chain { gap: 5px; overflow-x: auto; } .dex-detail-v43 .dex-evolution-chain button { grid-template-columns: 44px minmax(68px,1fr); min-width: 130px; padding: 5px; } .dex-detail-v43 .dex-evo-portrait { width: 44px; height: 44px; overflow: visible; } .dex-detail-v43 .dex-evo-portrait img { width: 100%; height: 100%; } .dex-detail-v43 .dex-evolution-chain button span em { max-width: 102px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dex-detail-v43 .dex-form-list { margin-top: 5px; } .dex-detail-v43 .dex-form-list span { padding: 4px 6px; font-size: .5rem; } .dex-detail-v43 .dex-skills-section { display: grid; grid-template-rows: auto minmax(0,1fr); } .dex-detail-v43 .dex-skills-grid { grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 6px; } .dex-detail-v43 .dex-skill-card { position: relative; grid-template-columns: 44px minmax(0,1fr); min-height: 64px; padding: 6px; overflow: visible; } .dex-detail-v43 .dex-skill-card > span:first-child { width: 42px; height: 42px; border-radius: 10px; } .dex-detail-v43 .dex-skill-card b { font-size: .63rem; } .dex-detail-v43 .dex-skill-card small, .dex-detail-v43 .dex-skill-card em { font-size: .48rem; } .dex-skill-tooltip { position: absolute; z-index: 30; right: 0; bottom: calc(100% + 7px); display: grid; width: min(280px,75vw); padding: 10px; border: 1px solid color-mix(in srgb,var(--dex-accent) 45%,var(--theme-border)); border-radius: 13px; background: color-mix(in srgb,var(--ui-glass-strong) 97%,var(--theme-card)); color: var(--theme-text); box-shadow: 0 18px 38px rgba(2,25,37,.28); opacity: 0; pointer-events: none; transform: translateY(5px) scale(.98); transition: opacity 130ms ease,transform 150ms ease; } .dex-skill-tooltip small { color: var(--dex-accent) !important; font-weight: 850; } .dex-skill-tooltip b { margin-top: 2px; font-size: .75rem !important; } .dex-skill-tooltip p { margin: 5px 0; color: var(--theme-muted); font-size: .6rem; line-height: 1.42; } .dex-skill-tooltip em { color: var(--dex-accent) !important; font-size: .52rem !important; } .dex-skill-card:hover .dex-skill-tooltip, .dex-skill-card:focus-visible .dex-skill-tooltip, .dex-skill-card.is-active:focus .dex-skill-tooltip { opacity: 1; transform: none; } .dex-passive-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; } .dex-passive-strip > article { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 7px; min-height: 66px; padding: 7px; border: 1px solid var(--theme-border); border-radius: 13px; background: var(--theme-card); } .dex-passive-strip svg { width: 26px; height: 26px; color: var(--dex-accent); } .dex-passive-strip span { min-width: 0; } .dex-passive-strip small { color: var(--dex-accent); font-size: .46rem !important; font-weight: 850; } .dex-passive-strip b { display: block; margin: 1px 0 2px; overflow: hidden; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; } .dex-passive-strip p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--theme-muted); font-size: .49rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } @media (min-width: 801px) { .game-screen .side-panel:is(.is-pokedex-panel,.is-pokedex-detail) { top: calc(50% + var(--panel-drag-y,0px)) !important; left: calc(50% + var(--panel-drag-x,0px)) !important; } .game-screen .side-panel.is-pokedex-detail { width: min(1120px,calc(100vw - 104px)) !important; height: min(820px,calc(100dvh - 24px)) !important; } .game-screen .side-panel.is-pokedex-detail #sidePanelContent { padding-bottom: 0; overflow: hidden; } .game-screen .side-panel.is-pokedex-detail > .panel-close { top: 11px; right: 11px; width: 40px; height: 40px; } .dex-detail-v43 .dex-physical-profile .dex-size-frequency-card { display: none; } } @media (max-width: 800px) { .game-screen .quest-widget { top: max(112px,calc(env(safe-area-inset-top) + 106px)) !important; right: max(7px,env(safe-area-inset-right)) !important; left: auto !important; display: block !important; width: 112px !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; border-radius: 18px !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; } .game-screen .quest-widget > :not(.quest-widget-journal) { display: none !important; } .game-screen .quest-widget > .quest-widget-journal { display: grid !important; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 7px; min-height: 58px; padding: 7px; border: 1px solid color-mix(in srgb,var(--theme-accent) 28%,var(--theme-border)); border-radius: 17px; background: color-mix(in srgb,var(--ui-glass-strong) 95%,transparent); color: var(--theme-text); box-shadow: 0 10px 24px rgba(3,27,39,.22),0 1px var(--ui-highlight) inset; backdrop-filter: blur(16px) saturate(1.12); } .quest-widget-journal > span:first-child { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: color-mix(in srgb,var(--theme-accent) 13%,var(--theme-card)); } .quest-widget-journal .mobile-nav-icon { width: 26px; height: 26px; } .quest-widget-journal > span:last-child { min-width: 0; } .quest-widget-journal b, .quest-widget-journal small { display: block; } .quest-widget-journal b { font-size: .67rem; } .quest-widget-journal small { margin-top: 2px; color: var(--theme-muted); font-size: .44rem !important; line-height: 1.2; } .game-screen .mobile-dock { height: 66px !important; padding: 5px 6px !important; border-radius: 22px !important; } .game-screen .mobile-dock button { min-height: 54px; border-radius: 15px !important; } .game-screen .mobile-dock button > span { width: 29px; height: 29px; } .game-screen .mobile-dock .mobile-nav-icon { width: 27px; height: 27px; } .game-screen .mobile-dock button > b { font-size: .48rem !important; } .game-screen .mobile-dock button:is(.is-active,.is-menu-open)::after { content: ""; position: absolute; bottom: 2px; width: 18px; height: 3px; border-radius: 999px; background: currentColor; opacity: .78; } .game-screen .mobile-dock .mobile-dock-primary { width: 62px; height: 68px; min-height: 68px; margin-top: -15px; border-width: 4px !important; border-radius: 21px !important; } .game-screen .interaction-card { right: max(8px,env(safe-area-inset-right)) !important; bottom: calc(91px + env(safe-area-inset-bottom)) !important; left: auto !important; width: min(226px,calc(100vw - 16px)) !important; min-height: 54px !important; grid-template-columns: 38px minmax(0,1fr) auto !important; gap: 6px !important; padding: 6px !important; border-radius: 17px !important; } .game-screen .interaction-card__visual { width: 38px !important; height: 38px !important; } .game-screen .interaction-card__title { font-size: .62rem !important; } .game-screen .interaction-card__meta { display: none !important; } .game-screen .interaction-card__cta { min-width: 90px !important; height: 42px !important; padding: 0 8px !important; border-radius: 13px !important; } .game-screen .interaction-card__key { display: none !important; } .game-screen .interaction-card__action-label { font-size: .56rem !important; } .pokedex-library-head { grid-template-columns: minmax(0,1fr) 116px; min-height: 82px; padding: 9px 42px 9px 9px; border-radius: 16px; cursor: default; } .pokedex-library-title { grid-template-columns: 46px minmax(0,1fr); gap: 7px; } .pokedex-library-mark { width: 46px; height: 46px; border-radius: 13px; } .pokedex-library-mark img { width: 51px; height: 51px; } .pokedex-library-title small { font-size: .43rem; } .pokedex-library-title h2 { font-size: 1.55rem; } .pokedex-progress { gap: 2px 5px; padding: 6px; border-radius: 11px; } .pokedex-progress span small { font-size: .42rem; } .pokedex-progress span b { font-size: .82rem; } .pokedex-progress > strong { font-size: .61rem; } .pokedex-progress-next { display: none; } .pokedex-toolbar { grid-template-columns: 1fr; } .pokedex-filter-tabs { grid-template-columns: repeat(4,90px); overflow-x: auto; } .pokedex-scroll-filter, .pokedex-type-filter-v42 { grid-template-columns: 1fr; } .pokedex-scroll-filter > header { flex-direction: row; } .pokedex-generation-track > button { flex-basis: 116px; } .pokedex-type-track > button { min-height: 37px; } .pokedex-grid-v41 { grid-template-columns: 1fr; } .pokedex-grid-v41 .pokedex-species-card { min-height: 108px; grid-template-columns: 82px minmax(0,1fr); } .pokedex-card-art { width: 80px; height: 80px; } .dex-detail-v43 { height: auto; } .dex-detail-v43 .dex-detail-head { position: sticky; top: -1px; z-index: 20; grid-template-columns: auto minmax(0,1fr) auto; cursor: default; } .dex-detail-v43 .dex-detail-head > span small { font-size: .44rem; } .dex-detail-v43 .dex-detail-head h2 { font-size: 1.25rem; } .dex-dossier-grid { grid-template-columns: 1fr; } .dex-dossier-left { grid-template-rows: auto auto; } .dex-dossier-right { grid-template-rows: auto auto auto; } .dex-detail-v43 .dex-hero-card { grid-template-rows: auto 230px auto auto; } .dex-detail-v43 .dex-visual { min-height: 230px; } .dex-detail-v43 .dex-physical-profile { grid-template-columns: repeat(2,minmax(0,1fr)); } .dex-detail-v43 .dex-physical-profile .dex-size-range-card { grid-column: 1/-1; } .dex-detail-v43 .dex-skills-grid { grid-template-columns: 1fr; } .dex-passive-strip { grid-template-columns: 1fr; } .game-screen .side-panel.is-quest-panel #sidePanelContent { padding: 2px 1px 8px; } .game-screen .side-panel.is-quest-panel .panel-lead { display: none; } .game-screen .side-panel.is-quest-panel .discovery-score { margin-bottom: 8px; } .game-screen .side-panel.is-quest-panel .quest-chain { gap: 6px; } .game-screen .side-panel.is-quest-panel .quest-card { min-height: 64px; padding: 8px; border-radius: 13px; } .game-screen .side-panel.is-quest-panel .quest-card > i { width: 34px; height: 34px; } .game-screen .side-panel.is-quest-panel .quest-card small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } @media (max-width: 430px) { .game-screen .mobile-dock { height: 64px !important; } .game-screen .side-panel, .game-screen .side-panel:is(.is-inventory-panel,.is-pokedex-panel,.is-pokedex-detail), .game-screen .chat-panel { bottom: calc(89px + env(safe-area-inset-bottom)) !important; } .game-screen .world-rail { bottom: calc(90px + env(safe-area-inset-bottom)) !important; } .game-screen .interaction-card { bottom: calc(94px + env(safe-area-inset-bottom)) !important; } .pokedex-library-head { grid-template-columns: minmax(0,1fr) 104px; } .pokedex-library-title h2 { font-size: 1.38rem; } } /* v4.4 — evolution economy, innate abilities and movable social windows */ .panel-window-grip { position: absolute; z-index: 12; top: 5px; left: 50%; display: grid; place-items: center; width: 74px; height: 18px; transform: translateX(-50%); cursor: grab; touch-action: none; } .panel-window-grip i { width: 34px; height: 4px; border-radius: 999px; background: color-mix(in srgb,var(--theme-muted) 38%,transparent); } .panel-window-grip:hover i { background: color-mix(in srgb,var(--theme-accent) 70%,var(--theme-muted)); } .panel-window-grip.is-dragging { cursor: grabbing; } @media (min-width: 801px) { .game-screen .side-panel.is-user-positioned, .game-screen .side-panel.is-user-positioned.is-open, .game-screen .side-panel:is(.is-pokedex-panel,.is-pokedex-detail,.is-inventory-panel).is-user-positioned, .game-screen .side-panel:is(.is-pokedex-panel,.is-pokedex-detail,.is-inventory-panel).is-user-positioned.is-open { position: fixed !important; top: var(--panel-user-top,8px) !important; right: auto !important; bottom: auto !important; left: var(--panel-user-left,8px) !important; transform: none !important; transition: opacity 160ms ease,box-shadow 160ms ease !important; } } .pokedex-generation-track > button[data-progress-label] { overflow: visible; } .pokedex-generation-track > button[data-progress-label]::before { content: attr(data-progress-label); position: absolute; z-index: 45; left: 50%; bottom: calc(100% + 7px); width: max-content; max-width: 210px; padding: 7px 9px; border: 1px solid var(--theme-border); border-radius: 10px; background: color-mix(in srgb,var(--ui-glass-strong) 97%,var(--theme-card)); color: var(--theme-text); box-shadow: 0 12px 26px rgba(1,28,40,.22); font-size: .56rem; font-weight: 760; line-height: 1.25; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%,5px); transition: opacity 120ms ease,transform 120ms ease; } .pokedex-generation-track > button[data-progress-label]:hover::before, .pokedex-generation-track > button[data-progress-label]:focus-visible::before { opacity: 1; transform: translate(-50%,0); } .pokedex-type-track { gap: 5px; } .pokedex-type-track > button { min-height: 34px; gap: 5px; padding: 0 7px; border-radius: 9px; } .pokedex-type-track > button b { font-size: .55rem; } .pokedex-filter-type-icon { width: 16px; height: 16px; } .pokedex-filter-type-icon.is-device { width: 19px; height: 19px; } .dex-detail-v43 .dex-dossier-right { grid-template-rows: auto auto auto; align-content: start; } .dex-detail-v43 .dex-visual { position: relative; isolation: isolate; } .dex-detail-v43 .dex-visual::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 55%; width: min(330px,78%); aspect-ratio: 1; border: 1px solid color-mix(in srgb,var(--dex-accent) 22%,transparent); border-radius: 50%; background: radial-gradient(circle,transparent 48%,color-mix(in srgb,var(--dex-accent) 9%,transparent) 49% 50%,transparent 51%), conic-gradient(from var(--species-angle),transparent 0 12%,color-mix(in srgb,var(--dex-accent-2) 13%,transparent) 12% 22%,transparent 22% 64%,color-mix(in srgb,var(--dex-accent) 10%,transparent) 64% 72%,transparent 72%); transform: translate(-50%,-50%); pointer-events: none; } .dex-detail-v43 .dex-evolution-section { display: grid; gap: 6px; } .dex-detail-v43 .dex-evolution-section > header { margin-bottom: 0; } .dex-detail-v43 .dex-evolution-chain { min-height: 48px; padding-bottom: 1px; } .dex-detail-v43 .dex-evolution-chain button { min-width: 116px; grid-template-columns: 38px minmax(62px,1fr); min-height: 46px; } .dex-detail-v43 .dex-evo-portrait { width: 38px; height: 38px; } .dex-evolution-options { display: grid; gap: 6px; } .dex-evolution-options.is-branching { grid-template-columns: repeat(4,minmax(0,1fr)); } .dex-evolution-option { display: grid; grid-template-columns: minmax(134px,.72fr) minmax(0,1.28fr); align-items: center; gap: 5px; min-width: 0; padding: 5px; border: 1px solid color-mix(in srgb,var(--dex-accent) 22%,var(--theme-border)); border-radius: 12px; background: color-mix(in srgb,var(--dex-accent) 3.5%,var(--theme-card)); } .dex-evolution-option > button { display: grid; grid-template-columns: 38px minmax(0,1fr) 10px; align-items: center; gap: 5px; min-width: 0; padding: 2px; border: 0; background: transparent; color: var(--theme-text); text-align: left; } .dex-evolution-option-portrait { width: 38px; height: 38px; overflow: visible; } .dex-evolution-option-portrait img { width: 100%; height: 100%; object-fit: contain; } .dex-evolution-option > button span { min-width: 0; } .dex-evolution-option > button small { display: block; color: var(--dex-accent); font-size: .42rem; font-weight: 850; } .dex-evolution-option > button b { display: block; overflow: hidden; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; } .dex-evolution-option > button em { display: block; overflow: hidden; margin-top: 2px; color: var(--theme-muted); font-size: .44rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; } .dex-evolution-option > button > i { color: var(--dex-accent); font-size: 1rem; font-style: normal; } .dex-evolution-costs { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; } .dex-evolution-resource, .dex-evolution-condition { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 3px; min-width: 78px; min-height: 26px; padding: 2px 5px 2px 3px; border: 1px solid var(--theme-border); border-radius: 8px; background: var(--theme-surface-soft); color: var(--theme-muted); } .dex-evolution-resource.is-ready { border-color: color-mix(in srgb,#40b772 48%,var(--theme-border)); color: #35a968; } .dex-evolution-resource-icon { display: grid; place-items: center; width: 20px; height: 20px; } .dex-evolution-resource-icon > :is(svg,img), .dex-evolution-resource-icon .item-graphic-base { width: 20px; height: 20px; object-fit: contain; } .dex-evolution-resource-icon .item-species-badge { display: none; } .dex-evolution-resource b, .dex-evolution-condition b { overflow: hidden; font-size: .43rem; text-overflow: ellipsis; white-space: nowrap; } .dex-evolution-resource em { font-size: .42rem; font-style: normal; font-weight: 850; } .dex-evolution-condition { grid-template-columns: 16px minmax(0,1fr); } .dex-evolution-condition .ui-icon { width: 14px; height: 14px; color: var(--dex-accent); } .dex-evolution-options.is-branching .dex-evolution-option { grid-template-columns: 1fr; align-content: start; padding: 4px; } .dex-evolution-options.is-branching .dex-evolution-option > button { grid-template-columns: 34px minmax(0,1fr) 8px; } .dex-evolution-options.is-branching .dex-evolution-option-portrait { width: 34px; height: 34px; } .dex-evolution-options.is-branching .dex-evolution-costs { gap: 2px; } .dex-evolution-options.is-branching .dex-evolution-resource, .dex-evolution-options.is-branching .dex-evolution-condition { flex: 1 1 43px; grid-template-columns: 17px 1fr; min-width: 0; min-height: 21px; padding: 1px 3px; } .dex-evolution-options.is-branching .dex-evolution-resource-icon, .dex-evolution-options.is-branching .dex-evolution-resource-icon > :is(svg,img), .dex-evolution-options.is-branching .dex-evolution-resource-icon .item-graphic-base { width: 17px; height: 17px; } .dex-evolution-options.is-branching .dex-evolution-resource b, .dex-evolution-options.is-branching .dex-evolution-condition b { display: none; } .dex-evolution-options.is-branching .dex-evolution-resource em { font-size: .38rem; text-align: right; } .dex-evolution-final { padding: 7px 9px; border: 1px dashed color-mix(in srgb,var(--dex-accent) 30%,var(--theme-border)); border-radius: 10px; color: var(--theme-muted); font-size: .55rem; font-weight: 750; } .dex-detail-v43 .dex-skills-section { grid-template-rows: auto auto; padding: 8px 10px; } .dex-detail-v43 .dex-skills-section > header { margin-bottom: 5px; } .dex-detail-v43 .dex-skills-grid { gap: 5px; } .dex-detail-v43 .dex-skill-card { grid-template-columns: 36px minmax(0,1fr); min-height: 52px; gap: 5px; padding: 5px; border-radius: 11px; } .dex-detail-v43 .dex-skill-card > span:first-child { width: 34px; height: 34px; border-radius: 9px; } .dex-detail-v43 .dex-skill-card b { font-size: .56rem; } .dex-detail-v43 .dex-skill-card small, .dex-detail-v43 .dex-skill-card em { font-size: .41rem; } .dex-detail-v43 .dex-skill-card i { min-width: 0; } .dex-detail-v43 .dex-skill-card i > :is(small,b,em) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dex-system-strip { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); gap: 6px; } .dex-system-strip > article { position: relative; display: grid; grid-template-columns: 43px minmax(0,1fr); align-items: center; gap: 8px; min-height: 68px; padding: 8px; overflow: hidden; border: 1px solid var(--theme-border); border-radius: 13px; background: var(--theme-card); } .dex-system-strip > article::after { content: ""; position: absolute; right: -24px; bottom: -28px; width: 74px; height: 74px; border: 1px solid color-mix(in srgb,var(--dex-accent) 12%,transparent); border-radius: 50%; } .dex-system-strip > article > :is(img,svg) { width: 42px; height: 42px; object-fit: contain; color: var(--dex-accent); filter: drop-shadow(0 5px 7px rgba(4,35,50,.14)); } .dex-system-strip span { min-width: 0; } .dex-system-strip small { color: var(--dex-accent); font-size: .43rem !important; font-weight: 900; letter-spacing: .055em; } .dex-system-strip b { display: block; margin: 2px 0; overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; } .dex-system-strip p { margin: 0; color: var(--theme-muted); font-size: .48rem; line-height: 1.35; } .dex-energy-card p { display: flex; flex-wrap: wrap; gap: 3px; } .dex-energy-card p em { padding: 2px 5px; border-radius: 999px; background: color-mix(in srgb,var(--dex-accent) 9%,var(--theme-surface-soft)); color: color-mix(in srgb,var(--dex-accent) 76%,var(--theme-text)); font-size: .4rem; font-style: normal; font-weight: 800; } /* Clearer inventory rarity and navigation hierarchy. */ .inventory-item-v2741::after { content: attr(data-rarity-label); position: absolute; z-index: 3; top: 7px; right: 7px; padding: 3px 5px; border-radius: 6px; background: color-mix(in srgb,var(--inv-text) 5%,var(--inv-card)); color: var(--inv-muted); font-size: .42rem; font-weight: 850; line-height: 1; } .inventory-item-v2741.rarity-uncommon::after { color:#2d9c61; background:color-mix(in srgb,#48ac75 10%,var(--inv-card)); } .inventory-item-v2741.rarity-rare::after { color:#337fcf; background:color-mix(in srgb,#4b91e6 10%,var(--inv-card)); } .inventory-item-v2741.rarity-epic::after { color:#7650ca; background:color-mix(in srgb,#8a61df 11%,var(--inv-card)); } .inventory-item-v2741.rarity-legendary::after { color:#b17a12; background:linear-gradient(90deg,color-mix(in srgb,#ffd96b 18%,var(--inv-card)),color-mix(in srgb,#f195c7 12%,var(--inv-card))); } .inventory-item-v2741__art { border: 1px solid color-mix(in srgb,var(--inv-line) 72%,transparent); box-shadow: 0 7px 16px rgba(12,52,72,.07); } .inventory-item-v2741__name > em { color: var(--inv-muted); font-size: .43rem; font-weight: 780; text-transform: uppercase; letter-spacing: .04em; } .inventory-item-v2741__name > small { display: -webkit-box; overflow: hidden; color: var(--inv-muted); font-size: .46rem; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .inventory-rarity-label { color: var(--action-blue,var(--theme-accent)); font-weight: 850; } .inventory-v2741__categories { position: relative; z-index: 2; padding: 3px; border: 1px solid color-mix(in srgb,var(--inv-line) 72%,transparent); border-radius: 15px; background: color-mix(in srgb,var(--inv-soft) 72%,transparent); } .inventory-v2741__categories button.is-active { background: var(--inv-card); box-shadow: 0 5px 12px rgba(12,50,70,.08),inset 0 -2px 0 color-mix(in srgb,var(--inv-blue) 70%,transparent); } /* Team cards read like compact player cards instead of form rows. */ .game-screen .side-panel.is-team-panel { width: min(640px,calc(100vw - 126px)); } .team-window-v2737 { gap: 8px; } .team-roster-v2737 { gap: 6px; } .team-roster-card-v2737 { min-height: 78px; border-radius: 17px; background: linear-gradient(105deg,color-mix(in srgb,var(--theme-accent) 4%,var(--theme-card)),var(--theme-card) 58%); } .team-roster-card-v2737::after { content: ""; position: absolute; left: 58px; bottom: -42px; width: 120px; height: 120px; border: 1px solid color-mix(in srgb,var(--theme-accent) 8%,transparent); border-radius: 50%; pointer-events: none; } .team-roster-main-v2737 { position: relative; z-index: 1; grid-template-columns: 70px minmax(0,1fr) auto; gap: 10px; } .team-roster-portrait-v2737 { width: 68px; height: 68px; overflow: visible; filter: drop-shadow(0 8px 7px rgba(4,31,43,.17)); } .team-roster-copy-v2737 > span b { font-size: .84rem; } .team-roster-main-v2737 > strong { padding: 6px; border-radius: 10px; background: color-mix(in srgb,var(--theme-accent) 8%,var(--theme-surface-soft)); } .team-roster-actions-v2737 button:hover { color: var(--theme-accent); border-color: color-mix(in srgb,var(--theme-accent) 35%,var(--theme-border)); } /* Chat: stronger social hierarchy and a reliable composer. */ .game-screen .chat-panel.chat-messenger { border-color: color-mix(in srgb,var(--theme-accent) 16%,var(--theme-border)); box-shadow: 0 24px 62px rgba(0,24,37,.3),0 1px var(--ui-highlight) inset; } .game-screen .chat-head { min-height: 54px; padding: 6px 7px 6px 9px; border-bottom: 1px solid color-mix(in srgb,var(--theme-border) 72%,transparent); } .game-screen .chat-title-icon { background: linear-gradient(145deg,color-mix(in srgb,var(--theme-accent) 18%,var(--theme-card)),color-mix(in srgb,var(--theme-accent) 7%,var(--theme-surface-soft))); } .game-screen .chat-tabs { gap: 4px; padding: 4px; border: 1px solid var(--theme-border); border-radius: 14px; background: color-mix(in srgb,var(--theme-surface-soft) 82%,transparent); } .game-screen .chat-tabs button { min-height: 39px; border-radius: 10px; } .game-screen .chat-tabs button.is-active { background: var(--theme-card); color: var(--theme-accent); box-shadow: 0 4px 10px rgba(8,50,70,.09); } .game-screen .chat-tab-icon { display: grid; place-items: center; width: 22px; height: 22px; } .game-screen .chat-tab-icon .ui-icon { width: 18px; height: 18px; } .game-screen .chat-messenger-layout { border-radius: 15px; } .game-screen .chat-message { border-radius: 12px; } .game-screen .chat-message:hover { background: color-mix(in srgb,var(--theme-accent) 4%,transparent); } .game-screen #chatForm { grid-template-columns: 40px minmax(0,1fr) 46px !important; gap: 5px !important; min-height: 54px; padding: 5px !important; border: 1px solid color-mix(in srgb,var(--theme-border) 92%,transparent) !important; border-radius: 16px !important; background: color-mix(in srgb,var(--theme-input) 92%,transparent) !important; } .game-screen #chatForm:focus-within { border-color: color-mix(in srgb,var(--theme-accent) 58%,var(--theme-border)) !important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--theme-accent) 9%,transparent); } .game-screen #chatForm textarea { min-height: 42px !important; max-height: 92px !important; padding: 11px 7px 8px !important; font-size: 12px !important; line-height: 1.4 !important; } .game-screen .chat-composer-tool { width: 40px !important; height: 42px !important; border-radius: 12px !important; } .game-screen .chat-send-button { width: 46px !important; height: 42px !important; border-radius: 13px !important; background: linear-gradient(145deg,#36a9eb,#147fc7) !important; box-shadow: 0 7px 14px rgba(22,132,198,.22); } .game-screen .chat-send-button .ui-icon { width: 20px; height: 20px; } .game-screen .chat-online-sidebar { border-left: 1px solid var(--theme-border); background: color-mix(in srgb,var(--theme-surface-soft) 72%,transparent); } @media (prefers-reduced-motion: no-preference) { .dex-detail-v43 .dex-visual::before { animation: dex-species-aura 18s linear infinite; } @keyframes dex-species-aura { to { transform: translate(-50%,-50%) rotate(360deg); } } } @media (max-width: 800px) { .panel-window-grip { display: none; } .pokedex-generation-track > button[data-progress-label]::before { display: none; } .dex-detail-v43 .dex-dossier-right { grid-template-rows: auto auto auto; } .dex-evolution-options.is-branching { grid-template-columns: repeat(2,minmax(0,1fr)); } .dex-evolution-option { grid-template-columns: 1fr; } .dex-detail-v43 .dex-skills-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .dex-system-strip { grid-template-columns: 1fr; } .dex-system-strip > article { min-height: 72px; } .inventory-item-v2741::after { top: 5px; right: 5px; font-size: .36rem; } .inventory-item-v2741__name > small { -webkit-line-clamp: 1; } .game-screen .side-panel.is-team-panel { width: auto; } .team-roster-main-v2737 { grid-template-columns: 58px minmax(0,1fr); } .team-roster-portrait-v2737 { width: 56px; height: 56px; } .team-roster-main-v2737 > strong { grid-column: 2; justify-self: start; } .game-screen #chatForm { grid-template-columns: 36px minmax(0,1fr) 42px !important; min-height: 50px; } .game-screen #chatForm textarea { min-height: 38px !important; font-size: 11px !important; } .game-screen .chat-composer-tool { width: 36px !important; height: 38px !important; } .game-screen .chat-send-button { width: 42px !important; height: 38px !important; } } @media (max-width: 430px) { .dex-evolution-options.is-branching { grid-template-columns: 1fr; } .dex-detail-v43 .dex-skills-grid { grid-template-columns: 1fr 1fr; } .dex-detail-v43 .dex-skill-card { grid-template-columns: 32px minmax(0,1fr); min-height: 49px; } .dex-detail-v43 .dex-skill-card > span:first-child { width: 31px; height: 31px; } .inventory-v2741__categories { padding: 2px; border-radius: 12px; } .team-roster-actions-v2737 button, .team-roster-actions-v2737 span { min-width: 46px; padding-inline: 4px; } } /* v4.5 final ownership: these rules must remain after the v4.4 compatibility layer. */ .dex-detail-v43 .dex-visual::before { border-radius: 38%; background: radial-gradient(circle at 50% 50%,transparent 0 43%,color-mix(in srgb,var(--dex-accent) 8%,transparent) 44% 45%,transparent 46%), linear-gradient(135deg,color-mix(in srgb,var(--dex-accent) 7%,transparent),transparent 48%,color-mix(in srgb,var(--dex-accent-2) 6%,transparent)); transform: translate(-50%,-50%) rotate(var(--species-angle)); animation: none !important; } @media (min-width: 801px) { .game-screen .side-panel.is-team-panel { width: min(900px,calc(100vw - 132px)); height: min(720px,calc(100dvh - 92px)); } .game-screen .side-panel.is-center-panel { width: min(1040px,calc(100vw - 132px)); height: min(760px,calc(100dvh - 92px)); } .game-screen .side-panel.is-pokemon-detail-panel { width: min(1200px,calc(100vw - 110px)); height: min(790px,calc(100dvh - 72px)); } } @media (max-width: 800px) { .game-screen .side-panel:is(.is-team-panel,.is-center-panel,.is-pokemon-detail-panel) { width: auto; } } /* v4.6 — active companions, Pokécenter storage and compact training dossier */ .team-window-v46,.center-window-v46,.pokemon-instance-v46 { display: grid; min-height: 0; height: 100%; color: var(--theme-text); } .team-window-v46 { grid-template-rows: auto auto minmax(0,1fr) auto; gap: 8px; } .center-window-v46 { grid-template-rows: auto auto auto minmax(0,1fr); gap: 7px; } .team-head-v46,.center-head-v46,.pokemon-detail-head-v46 { padding: 3px 5px 9px; border-bottom: 1px solid var(--theme-border); cursor: grab; } .team-grid-v46 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; min-height: 0; overflow: auto; padding: 2px; } .team-slot-v46 { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto; min-width: 0; min-height: 205px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--species-accent,var(--theme-accent)) 26%,var(--theme-border)); border-radius: 20px; background: radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--species-accent,var(--theme-accent)) 15%,transparent),transparent 36%),linear-gradient(155deg,var(--theme-card),color-mix(in srgb,var(--species-accent,var(--theme-accent)) 4%,var(--theme-card))); box-shadow: 0 9px 24px rgba(7,39,56,.08); } .team-slot-v46::after { content: ""; position: absolute; right: -32px; top: 23px; width: 100px; height: 100px; border: 1px solid color-mix(in srgb,var(--species-accent,var(--theme-accent)) 14%,transparent); border-radius: 50%; pointer-events: none; } .team-slot-v46.is-lead { border-color: color-mix(in srgb,var(--species-accent,var(--theme-accent)) 72%,var(--theme-border)); box-shadow: inset 0 3px var(--species-accent,var(--theme-accent)),0 12px 28px color-mix(in srgb,var(--species-accent,var(--theme-accent)) 14%,transparent); } .team-slot-v46 > header,.center-card-v46 > header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 8px 9px 0; } .team-slot-v46 > header span,.center-card-v46 > header span { color: var(--theme-muted); font-size: .5rem; font-weight: 900; } .team-slot-v46 > header small,.center-card-v46 > header small { color: var(--species-accent,var(--theme-accent)); font-size: .46rem; font-weight: 900; } .team-slot-main-v46 { position: relative; z-index: 1; display: grid; grid-template-rows: 108px auto; min-width: 0; padding: 0 8px 5px; border: 0; background: transparent; color: inherit; text-align: center; cursor: pointer; } .team-slot-art-v46 { display: grid; place-items: center; min-height: 0; } .team-slot-portrait-v46 { width: 116px; height: 108px; overflow: visible; filter: drop-shadow(0 10px 9px rgba(1,30,44,.2)); } .team-slot-portrait-v46 img { width: 100%; height: 100%; object-fit: contain; } .team-slot-copy-v46 { display: grid; justify-items: center; min-width: 0; gap: 4px; } .team-slot-copy-v46 > b { max-width: 100%; overflow: hidden; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; } .team-slot-copy-v46 > b i,.center-copy-v46 > b i { color: #efb51c; font-style: normal; } .team-slot-copy-v46 > em,.center-copy-v46 > em { display: flex; font-style: normal; } .team-slot-copy-v46 > small { color: var(--theme-muted); font-size: .45rem; } .team-slot-v46 > footer { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 7px 7px; } .team-slot-v46 > footer :is(button,span) { display: grid; place-items: center; min-height: 28px; padding: 0 5px; border: 1px solid var(--theme-border); border-radius: 9px; background: var(--theme-surface-soft); color: var(--theme-muted); font-size: .43rem; font-weight: 900; } .team-slot-v46 > footer span:first-child { color: var(--species-accent,var(--theme-accent)); } .team-slot-v46 > footer .danger,.pokemon-detail-actions-v46 .danger { color: #d95d6a; } .team-slot-v46.is-empty { place-items: center; grid-template-rows: auto 1fr auto; border-style: dashed; background: color-mix(in srgb,var(--theme-surface-soft) 76%,transparent); box-shadow: none; } .team-slot-v46.is-empty::after { right: 50%; top: 48%; transform: translate(50%,-50%); } .team-slot-v46.is-empty > header { width: 100%; } .team-slot-v46.is-empty > i { z-index: 1; align-self: end; display: grid; place-items: center; width: 58px; height: 58px; border: 1px dashed var(--theme-border); border-radius: 20px; background: var(--theme-card); color: var(--theme-muted); } .team-slot-v46.is-empty > i .ui-icon { width: 27px; height: 27px; } .team-slot-v46.is-empty > div { z-index: 1; align-self: start; padding: 8px 8px 18px; text-align: center; } .team-slot-v46.is-empty b { display: block; font-size: .65rem; } .team-slot-v46.is-empty small { display: block; margin-top: 3px; color: var(--theme-muted); font-size: .43rem; line-height: 1.3; } .team-note-v46,.center-note-v46 { margin: 0; padding: 8px 10px; border: 1px solid color-mix(in srgb,var(--theme-accent) 14%,var(--theme-border)); border-radius: 12px; background: color-mix(in srgb,var(--theme-accent) 4%,var(--theme-surface-soft)); color: var(--theme-muted); font-size: .5rem; line-height: 1.35; } .center-grid-v46 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; min-height: 0; overflow: auto; padding: 2px; } .center-card-v46 { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto; min-width: 0; min-height: 190px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--species-accent,var(--theme-accent)) 24%,var(--theme-border)); border-radius: 18px; background: radial-gradient(circle at 28% 39%,color-mix(in srgb,var(--species-accent,var(--theme-accent)) 14%,transparent),transparent 34%),var(--theme-card); } .center-card-v46.is-lead { box-shadow: inset 0 3px var(--species-accent,var(--theme-accent)); } .center-main-v46 { display: grid; grid-template-columns: 92px minmax(0,1fr); align-items: center; min-width: 0; padding: 3px 8px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; } .center-art-v46 { display: grid; place-items: center; } .center-portrait-v46 { width: 92px; height: 94px; overflow: visible; filter: drop-shadow(0 9px 8px rgba(4,32,46,.18)); } .center-portrait-v46 img { width: 100%; height: 100%; object-fit: contain; } .center-copy-v46 { min-width: 0; } .center-copy-v46 > b { display: block; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; } .center-copy-v46 > small,.center-copy-v46 > code { display: block; overflow: hidden; margin-top: 5px; color: var(--theme-muted); font-size: .43rem; text-overflow: ellipsis; white-space: nowrap; } .center-copy-v46 > code { color: color-mix(in srgb,var(--species-accent,var(--theme-accent)) 72%,var(--theme-text)); font-family: ui-monospace,SFMono-Regular,Consolas,monospace; } .center-actions-v46 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; padding: 0 7px 7px; } .center-actions-v46 button { min-height: 27px; padding: 0 5px; border: 1px solid var(--theme-border); border-radius: 9px; background: var(--theme-surface-soft); color: var(--theme-muted); font-size: .43rem; font-weight: 900; } .center-actions-v46 button.is-primary { color: var(--species-accent,var(--theme-accent)); } .center-actions-v46 button.is-evolve { color: #8459d6; } .pokemon-instance-v46 { grid-template-rows: auto minmax(0,1fr); gap: 8px; } .pokemon-detail-head-v46 { display: flex; align-items: center; justify-content: space-between; } .pokemon-instance-grid-v46 { display: grid; grid-template-columns: 310px minmax(0,1fr); gap: 9px; min-height: 0; overflow: hidden; } .pokemon-instance-left-v46,.pokemon-instance-right-v46 { display: grid; align-content: start; gap: 8px; min-width: 0; min-height: 0; } .pokemon-instance-right-v46 { overflow: auto; padding-right: 2px; } .pokemon-detail-hero-v46 { display: grid; grid-template-columns: 126px minmax(0,1fr); align-items: center; min-height: 150px; padding: 10px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--species-accent) 25%,var(--theme-border)); border-radius: 19px; background: radial-gradient(circle at 25% 50%,color-mix(in srgb,var(--species-accent) 16%,transparent),transparent 38%),var(--theme-card); } .pokemon-detail-art-v46 { display: grid; place-items: center; } .pokemon-detail-portrait-v46 { width: 128px; height: 130px; overflow: visible; filter: drop-shadow(0 12px 10px rgba(2,28,42,.2)); } .pokemon-detail-portrait-v46 img { width: 100%; height: 100%; object-fit: contain; } .pokemon-detail-hero-v46 h2 { max-width: 100%; overflow: hidden; margin: 3px 0 5px; font-size: 1.25rem; text-overflow: ellipsis; white-space: nowrap; } .pokemon-detail-hero-v46 small { color: var(--species-accent,var(--theme-accent)); font-size: .46rem; font-weight: 900; } .pokemon-detail-hero-v46 p,.pokemon-detail-hero-v46 em { margin: 5px 0 0; color: var(--theme-muted); font-size: .47rem; font-style: normal; } .pokemon-detail-hero-v46 .pokemon-exp-track { height: 6px; margin-top: 8px; } .pokemon-genome-v46 { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; min-height: 78px; padding: 8px 10px; border: 1px solid var(--theme-border); border-radius: 16px; background: linear-gradient(120deg,color-mix(in srgb,#24b9cf 10%,var(--theme-card)),color-mix(in srgb,#6a5cdb 6%,var(--theme-card))); } .pokemon-genome-v46 > img { width: 110px; height: 58px; object-fit: contain; } .pokemon-genome-v46 small { display: block; color: var(--theme-muted); font-size: .43rem; font-weight: 900; } .pokemon-genome-v46 b { display: block; overflow-wrap: anywhere; margin-top: 3px; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: .68rem; } .pokemon-genome-v46 p { margin: 4px 0 0; color: var(--theme-muted); font-size: .42rem; line-height: 1.3; } .pokemon-facts-v46 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .pokemon-facts-v46 article { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 6px; min-width: 0; min-height: 51px; padding: 7px; border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-card); } .pokemon-facts-v46 article > i { font-style: normal; font-size: 1rem; text-align: center; } .pokemon-facts-v46 small,.pokemon-facts-v46 b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pokemon-facts-v46 small { color: var(--theme-muted); font-size: .4rem; font-weight: 900; } .pokemon-facts-v46 b { margin-top: 2px; font-size: .53rem; } .pokemon-detail-actions-v46 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .pokemon-detail-actions-v46 :is(button,span) { display: grid; place-items: center; min-height: 34px; padding: 0 8px; border: 1px solid var(--theme-border); border-radius: 10px; background: var(--theme-surface-soft); color: var(--theme-muted); font-size: .46rem; font-weight: 900; } .pokemon-active-state-v46 { color: var(--species-accent,var(--theme-accent)) !important; } .pokemon-evolution-v46 { min-height: 72px; margin: 0; padding: 11px 12px; border-color: color-mix(in srgb,#8a63da 30%,var(--theme-border)); background: radial-gradient(circle at 16% 50%,color-mix(in srgb,#8a63da 12%,transparent),transparent 34%),linear-gradient(135deg,color-mix(in srgb,#f9f4ff 55%,var(--theme-card)),var(--theme-card)); } .pokemon-evolution-v46 b { font-size: .78rem; } .pokemon-evolution-v46 b i { color: #8a63da; font-style: normal; } .pokemon-evolution-v46 button { min-width: 126px; min-height: 40px; box-shadow: 0 8px 20px rgba(93,59,176,.2); } .pokemon-training-v46 { margin: 0; padding: 10px; } .pokemon-training-v46 .pokemon-section-title { margin-bottom: 8px; } .pokemon-training-v46 .pokemon-section-title p { margin: 3px 0 0; color: var(--theme-muted); font-size: .43rem; } .pokemon-training-v46 .pokemon-section-title > strong { display: flex; gap: 4px; width: auto; min-width: 48px; padding: 5px 8px; } .pokemon-training-v46 .pokemon-section-title > strong img { width: 25px; height: 25px; } .pokemon-effective-stats-v46 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; } .pokemon-stat-tile-v46 { display: grid; grid-template-columns: 28px minmax(0,1fr) 26px; align-items: center; gap: 6px; min-width: 0; padding: 7px; border: 1px solid var(--theme-border); border-radius: 11px; background: var(--theme-surface-soft); } .pokemon-stat-tile-v46 > svg { width: 25px; height: 25px; color: var(--species-accent,var(--theme-accent)); } .pokemon-stat-tile-v46 > span { display: grid; min-width: 0; } .pokemon-stat-tile-v46 small { overflow: hidden; color: var(--theme-muted); font-size: .4rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } .pokemon-stat-tile-v46 b { font-size: .72rem; } .pokemon-stat-tile-v46 em { color: var(--theme-muted); font-size: .38rem; font-style: normal; } .pokemon-stat-tile-v46 span > i { height: 4px; margin-top: 3px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb,var(--theme-text) 7%,transparent); } .pokemon-stat-tile-v46 span > i u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--species-accent,var(--theme-accent)),#54c988); text-decoration: none; } .pokemon-stat-tile-v46 > button { display: grid; place-items: center; width: 26px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: var(--species-accent,var(--theme-accent)); color: #fff; font-weight: 900; } .pokemon-stat-tile-v46 > button:disabled { background: color-mix(in srgb,var(--theme-muted) 18%,var(--theme-card)); color: var(--theme-muted); } .pokemon-mastery-section-v46 { margin: 0; padding: 0; overflow: hidden; } .pokemon-mastery-section-v46 .pokemon-mastery-head { padding: 9px 10px; background: color-mix(in srgb,var(--theme-accent) 5%,var(--theme-card)); } .pokemon-mastery-section-v46 .pokemon-mastery-head span b { color: var(--theme-text); font-size: .7rem; } .pokemon-mastery-section-v46 .pokemon-mastery-head span p { color: var(--theme-muted); } .pokemon-mastery-section-v46 .pokemon-mastery-head > strong { min-width: 54px; padding: 6px 8px; font-size: 1rem; } .pokemon-mastery-section-v46 .pokemon-mastery-next { padding: 5px 10px; background: var(--theme-surface-soft); color: var(--theme-muted); } .pokemon-mastery-section-v46 .pokemon-mastery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 8px; } .pokemon-mastery-section-v46 .pokemon-mastery-card { grid-template-columns: 43px minmax(0,1fr); gap: 6px; padding: 6px; border-color: var(--theme-border); background: var(--theme-card); } .pokemon-mastery-section-v46 .pokemon-mastery-icon,.pokemon-mastery-section-v46 .pokemon-mastery-art,.pokemon-mastery-section-v46 .pokemon-mastery-art img { width: 42px; height: 42px; } .pokemon-mastery-section-v46 .pokemon-mastery-copy > b { color: var(--theme-text); font-size: .58rem; } .pokemon-mastery-section-v46 .pokemon-mastery-copy > small,.pokemon-mastery-section-v46 .pokemon-mastery-copy > em { color: var(--theme-muted); font-size: .38rem; } .pokemon-mastery-section-v46 .pokemon-mastery-copy > p { display: none; } .pokemon-mastery-section-v46 .pokemon-mastery-ranks { margin: 2px 0; } .pokemon-mastery-section-v46 .pokemon-mastery-ranks i { width: 13px; height: 4px; } .pokemon-mastery-section-v46 .pokemon-mastery-card > button { grid-column: 1/-1; min-height: 27px; font-size: .43rem; } @supports (content-visibility:auto) { .pokedex-species-card { content-visibility: auto; contain-intrinsic-size: 122px; } } @media (min-width: 801px) { .game-screen .side-panel.is-team-panel { width: min(760px,calc(100vw - 132px)); height: min(610px,calc(100dvh - 92px)); } .game-screen .side-panel.is-center-panel { width: min(960px,calc(100vw - 132px)); height: min(720px,calc(100dvh - 92px)); } .game-screen .side-panel.is-pokemon-detail-panel { width: min(1000px,calc(100vw - 110px)); height: min(720px,calc(100dvh - 72px)); } } @media (max-width: 800px) { .team-grid-v46,.center-grid-v46 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; overflow: visible; } .team-window-v46,.center-window-v46,.pokemon-instance-v46 { height: auto; } .team-slot-v46 { min-height: 170px; border-radius: 16px; } .team-slot-main-v46 { grid-template-rows: 76px auto; padding-inline: 5px; } .team-slot-portrait-v46 { width: 82px; height: 78px; } .team-slot-copy-v46 > b { font-size: .64rem; } .team-slot-copy-v46 > small { font-size: .4rem; } .team-slot-v46 > footer { grid-template-columns: 1fr; } .team-slot-v46 > footer :is(button,span) { min-height: 25px; font-size: .39rem; } .team-slot-v46.is-empty > i { width: 50px; height: 50px; } .team-note-v46 { display: none; } .center-card-v46 { min-height: 174px; border-radius: 16px; } .center-main-v46 { grid-template-columns: 72px minmax(0,1fr); padding-inline: 5px; } .center-portrait-v46 { width: 74px; height: 78px; } .center-copy-v46 > b { font-size: .63rem; } .center-copy-v46 > code { display: none; } .center-actions-v46 { grid-template-columns: 1fr; } .center-note-v46 { font-size: .43rem; } .pokemon-instance-grid-v46 { grid-template-columns: 1fr; overflow: visible; } .pokemon-instance-right-v46 { overflow: visible; } .pokemon-detail-hero-v46 { grid-template-columns: 108px minmax(0,1fr); min-height: 132px; padding: 8px; } .pokemon-detail-portrait-v46 { width: 108px; height: 112px; } .pokemon-effective-stats-v46 { grid-template-columns: repeat(2,minmax(0,1fr)); } .pokemon-mastery-section-v46 .pokemon-mastery-grid { grid-template-columns: 1fr; } .pokemon-evolution-v46 { align-items: stretch; } .pokedex-library-head { grid-template-columns: 1fr !important; min-height: 0; gap: 7px; padding: 10px 42px 10px 10px; } .pokedex-library-title { grid-template-columns: 48px minmax(0,1fr); } .pokedex-library-title h2 { margin-top: 1px; font-size: 1.42rem; line-height: 1; } .pokedex-library-title small { font-size: .4rem; } .pokedex-progress { grid-template-columns: minmax(0,1fr) auto; min-height: 43px; padding: 6px 8px; } .pokedex-progress-next { display: block; } .pokedex-toolbar { grid-template-columns: 1fr; } .pokedex-filter-tabs { grid-template-columns: repeat(4,minmax(88px,1fr)); } .pokedex-scroll-filter,.pokedex-type-filter-v42 { grid-template-columns: 1fr; padding: 4px; } .pokedex-scroll-filter > header { flex-direction: row; min-height: 31px; } .pokedex-generation-track > button { flex-basis: 110px; min-width: 110px; min-height: 45px; } .pokedex-type-track > button { min-height: 34px; } } @media (max-width: 480px) { .pokedex-grid-v41 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; } .pokedex-grid-v41 .pokedex-species-card { grid-template-columns: 1fr; grid-template-rows: auto 82px auto auto; align-content: start; min-height: 162px; padding: 7px; border-radius: 15px; text-align: center; } .pokedex-grid-v41 .pokedex-species-card::after { left: 50%; bottom: 40px; width: 68px; height: 68px; transform: translateX(-50%) rotate(var(--species-angle)); } .pokedex-grid-v41 .pokedex-card-number { position: relative; inset: auto; justify-self: stretch; display: flex; justify-content: space-between; font-size: .47rem; } .pokedex-grid-v41 .pokedex-card-art { justify-self: center; width: 82px; height: 82px; } .pokedex-grid-v41 .pokedex-card-copy { display: grid; justify-items: center; min-width: 0; } .pokedex-grid-v41 .pokedex-card-copy > small,.pokedex-grid-v41 .pokedex-card-copy > i { display: none; } .pokedex-grid-v41 .pokedex-card-copy > b { max-width: 100%; overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; } .pokedex-grid-v41 .pokedex-card-types { justify-content: center; } .pokedex-grid-v41 .pokedex-species-card > em { position: relative; inset: auto; justify-self: center; max-width: 100%; padding: 3px 6px; font-size: .34rem; } .pokedex-results-meta small { display: none; } .pokemon-genome-v46 { grid-template-columns: 92px minmax(0,1fr); } .pokemon-genome-v46 > img { width: 90px; } .pokemon-facts-v46 { grid-template-columns: 1fr 1fr; } .pokemon-detail-actions-v46 { grid-template-columns: 1fr; } .pokemon-evolution-v46 { flex-direction: row; } .pokemon-evolution-v46 button { min-width: 94px; padding-inline: 7px; } } /* v4.7 — carried team is a compact read-only roster; storage stays inside the city facility. */ .team-window-v47 { position: relative; isolation: isolate; display: grid; grid-template-rows: auto minmax(0,1fr); gap: 13px; min-height: 0; height: 100%; overflow: hidden; color: var(--theme-text); } .team-window-v47::before { content: ""; position: absolute; z-index: -1; inset: -18px; background: linear-gradient(145deg,color-mix(in srgb,var(--theme-card) 76%,transparent),color-mix(in srgb,var(--theme-surface-soft) 88%,transparent)),url("/assets/v4.7/ui/team-background.svg") center/cover no-repeat; opacity: .78; pointer-events: none; } .team-head-v47 { min-height: 58px; margin: 0; padding: 7px 9px 10px; border-bottom: 1px solid color-mix(in srgb,var(--theme-accent) 18%,var(--theme-border)); } .team-head-v47 > span { gap: 10px; } .team-head-v47 .panel-ui-icon { width: 32px; height: 32px; } .team-head-v47 small { font-size: 10px; letter-spacing: .11em; } .team-head-v47 h2 { margin-top: 2px; font-size: 22px; line-height: 1.05; } .team-head-v47 > em { min-width: 58px; padding: 8px 11px; border: 1px solid color-mix(in srgb,var(--theme-accent) 20%,var(--theme-border)); border-radius: 999px; background: color-mix(in srgb,var(--theme-card) 84%,transparent); color: var(--theme-accent); font-size: 13px; font-style: normal; font-weight: 900; text-align: center; } .team-grid-v47 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 10px; min-height: 0; padding: 2px; overflow: auto; } .team-slot-v47 { position: relative; min-width: 0; min-height: 164px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--species-accent,var(--theme-accent)) 30%,var(--theme-border)); border-radius: 20px; background: radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--species-accent,var(--theme-accent)) 18%,transparent),transparent 41%),linear-gradient(150deg,color-mix(in srgb,var(--theme-card) 94%,transparent),color-mix(in srgb,var(--species-accent,var(--theme-accent)) 5%,var(--theme-card))); box-shadow: 0 10px 24px rgba(6,38,56,.1); } .team-slot-v47::after { content: ""; position: absolute; right: -31px; bottom: -31px; width: 92px; height: 92px; border: 9px solid color-mix(in srgb,var(--species-accent,var(--theme-accent)) 8%,transparent); border-radius: 50%; pointer-events: none; } .team-slot-v47.is-lead { border-color: color-mix(in srgb,var(--species-accent,var(--theme-accent)) 74%,var(--theme-border)); box-shadow: inset 0 3px var(--species-accent,var(--theme-accent)),0 12px 28px color-mix(in srgb,var(--species-accent,var(--theme-accent)) 18%,transparent); } .team-slot-main-v47 { position: relative; z-index: 1; display: grid; grid-template-rows: auto 88px auto; width: 100%; height: 100%; padding: 0 9px 10px; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: center; } .team-slot-main-v47 > header,.team-slot-v47.is-empty > header { display: flex; align-items: center; justify-content: space-between; min-height: 30px; color: var(--theme-muted); font-size: 10px; font-weight: 900; } .team-slot-main-v47 > header small,.team-slot-v47.is-empty > header small { display: inline-flex; align-items: center; gap: 3px; color: var(--species-accent,var(--theme-accent)); font-size: 9px; font-weight: 900; } .team-slot-main-v47 > header .pokemon-ui-icon-v47 { width: 14px; height: 14px; } .team-slot-art-v47 { display: grid; place-items: center; min-height: 0; } .team-slot-portrait-v47 { width: 108px; height: 94px; overflow: visible; filter: drop-shadow(0 10px 8px rgba(2,31,46,.2)); } .team-slot-portrait-v47 img { width: 100%; height: 100%; object-fit: contain; } .team-slot-copy-v47 { display: grid; justify-items: center; gap: 4px; min-width: 0; } .team-slot-copy-v47 > b { max-width: 100%; overflow: hidden; font-size: 15px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; } .team-slot-copy-v47 > b i { color: #eeb41c; font-style: normal; } .team-slot-copy-v47 > em { display: flex; font-style: normal; } .team-slot-copy-v47 > small { color: var(--theme-muted); font-size: 11px; font-weight: 750; } .team-slot-v47.is-empty { display: grid; grid-template-rows: auto minmax(0,1fr); padding: 0 10px 10px; border-style: solid; border-color: color-mix(in srgb,var(--theme-muted) 18%,var(--theme-border)); background: color-mix(in srgb,var(--theme-card) 56%,transparent); box-shadow: none; } .team-slot-v47.is-empty::after { display: none; } .team-empty-mark-v47 { align-self: center; justify-self: center; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: color-mix(in srgb,var(--theme-surface-soft) 76%,transparent); color: color-mix(in srgb,var(--theme-muted) 44%,transparent); } .team-empty-mark-v47 .pokemon-ui-icon-v47 { width: 38px; height: 38px; } .pokemon-ui-icon-v47 { width: 24px; height: 24px; fill: none; color: currentColor; } /* Detailed instance card: readable information density and vector-only facts. */ .pokemon-instance-v47 { gap: 10px; } .pokemon-detail-head-v47 { min-height: 42px; } .pokemon-detail-head-v47 > span { font-size: 10px; letter-spacing: .08em; } .pokemon-instance-grid-v47 { grid-template-columns: 330px minmax(0,1fr); gap: 11px; } .pokemon-detail-hero-v47 { min-height: 158px; } .pokemon-detail-hero-v47 small { font-size: 10px; } .pokemon-detail-hero-v47 p,.pokemon-detail-hero-v47 em { font-size: 11px; } .pokemon-genome-v47 { grid-template-columns: 128px minmax(0,1fr); min-height: 84px; padding: 9px 11px; overflow: hidden; background: radial-gradient(circle at 18% 50%,color-mix(in srgb,#25bfd8 18%,transparent),transparent 42%),linear-gradient(120deg,color-mix(in srgb,#24b9cf 9%,var(--theme-card)),color-mix(in srgb,#6a5cdb 7%,var(--theme-card))); } .pokemon-genome-visual-v47 { position: relative; display: block; width: 120px; height: 62px; overflow: hidden; border-radius: 12px; -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .pokemon-genome-visual-v47::after { content: ""; position: absolute; inset: 4px auto 4px 50%; width: 1px; background: linear-gradient(transparent,#eaffff,transparent); box-shadow: 0 0 10px #60dff1; animation: genome-scan-v47 2.6s ease-in-out infinite; } .pokemon-genome-visual-v47 > img { width: 310px; max-width: none; height: 62px; object-fit: fill; animation: genome-flow-v47 5.2s linear infinite alternate; } .pokemon-genome-v47 small { font-size: 10px; letter-spacing: .08em; } .pokemon-genome-v47 b { margin-top: 5px; font-size: 13px; letter-spacing: .055em; } .pokemon-facts-v47 { gap: 8px; } .pokemon-facts-v47 article { grid-template-columns: 34px minmax(0,1fr); min-height: 60px; gap: 8px; padding: 9px; border-radius: 14px; } .pokemon-facts-v47 article > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb,var(--species-accent,var(--theme-accent)) 9%,var(--theme-surface-soft)); color: var(--species-accent,var(--theme-accent)); } .pokemon-facts-v47 article > i .pokemon-ui-icon-v47 { width: 23px; height: 23px; } .pokemon-facts-v47 small { font-size: 9px; } .pokemon-facts-v47 b { font-size: 11px; } .pokemon-detail-actions-v47 { gap: 8px; } .pokemon-detail-actions-v47 :is(button,span) { display: flex; flex-direction: row; gap: 7px; min-height: 40px; font-size: 10px; } .pokemon-detail-actions-v47 .pokemon-ui-icon-v47,.pokemon-detail-actions-v47 .ui-icon { width: 18px; height: 18px; } .pokemon-evolution-v47 { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; min-height: 82px; } .pokemon-evolution-v47 > i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: color-mix(in srgb,#8a63da 12%,var(--theme-card)); color: #8a63da; } .pokemon-evolution-v47 > i .pokemon-ui-icon-v47 { width: 26px; height: 26px; } .pokemon-evolution-v47 > div > small { font-size: 9px; } .pokemon-evolution-v47 > div > b { font-size: 14px; } .pokemon-evolution-v47 > div > span { font-size: 11px; } .pokemon-evolution-v47.is-final { grid-template-columns: 42px minmax(0,1fr); } .pokemon-training-v47 .pokemon-section-title small { font-size: 9px; } .pokemon-training-v47 .pokemon-section-title b { font-size: 14px; } .pokemon-training-v47 .pokemon-section-title p { font-size: 10px; } .pokemon-stat-tile-v47 { grid-template-columns: 30px minmax(0,1fr) 30px; gap: 7px; min-height: 61px; padding: 8px; border-radius: 13px; } .pokemon-stat-tile-v47 > svg { width: 27px; height: 27px; } .pokemon-stat-tile-v47 small { font-size: 9px; } .pokemon-stat-tile-v47 b { font-size: 14px; } .pokemon-stat-tile-v47 em { font-size: 9px; } .pokemon-stat-tile-v47 > button { width: 30px; height: 31px; } .pokemon-stat-tile-v47 > button .pokemon-ui-icon-v47 { width: 17px; height: 17px; } .pokemon-mastery-section-v47 .pokemon-mastery-head { min-height: 60px; padding: 10px 12px; } .pokemon-mastery-section-v47 .pokemon-mastery-head span > small { font-size: 9px; } .pokemon-mastery-section-v47 .pokemon-mastery-head span > b { font-size: 14px; } .pokemon-mastery-section-v47 .pokemon-mastery-head > strong { display: flex; align-items: center; gap: 7px; min-width: 94px; padding: 6px 9px; } .pokemon-mastery-section-v47 .pokemon-mastery-head > strong > .pokemon-ui-icon-v47 { width: 24px; height: 24px; } .pokemon-mastery-section-v47 .pokemon-mastery-head > strong > span { display: grid; } .pokemon-mastery-section-v47 .pokemon-mastery-head > strong small,.pokemon-mastery-section-v47 .pokemon-mastery-head > strong em { font-size: 8px; } .pokemon-mastery-section-v47 .pokemon-mastery-next { padding: 7px 11px; font-size: 10px; } .pokemon-mastery-section-v47 .pokemon-mastery-copy > b { font-size: 11px; } .pokemon-mastery-section-v47 .pokemon-mastery-copy > small,.pokemon-mastery-section-v47 .pokemon-mastery-copy > em { font-size: 9px; } .pokemon-mastery-section-v47 .pokemon-mastery-card > button { min-height: 31px; font-size: 9px; } @keyframes genome-flow-v47 { from { transform: translateX(-18px); } to { transform: translateX(-168px); } } @keyframes genome-scan-v47 { 0%,100% { opacity: .25; transform: translateX(-38px); } 50% { opacity: .95; transform: translateX(38px); } } @media (min-width: 801px) { .game-screen .side-panel.is-team-panel { width: min(700px,calc(100vw - 132px)); height: min(510px,calc(100dvh - 92px)); } .game-screen .side-panel.is-pokemon-detail-panel { width: min(1010px,calc(100vw - 110px)); height: min(720px,calc(100dvh - 72px)); } } @media (max-width: 800px) { .game-screen .side-panel.is-team-panel { top: max(66px,calc(env(safe-area-inset-top) + 58px)) !important; bottom: auto !important; height: auto !important; max-height: calc(100dvh - 154px - env(safe-area-inset-bottom)) !important; } .game-screen .side-panel.is-team-panel #sidePanelContent { max-height: calc(100dvh - 178px - env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; } .team-window-v47 { height: auto; overflow: hidden; } .team-window-v47::before { inset: 0; border-radius: 17px; } .team-grid-v47 { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; gap: 8px; overflow: visible; } .team-slot-v47 { min-height: 146px; border-radius: 17px; } .team-slot-main-v47 { grid-template-rows: auto 72px auto; padding-inline: 7px; } .team-slot-portrait-v47 { width: 88px; height: 78px; } .team-head-v47 h2 { font-size: 20px; } .pokemon-instance-grid-v47 { grid-template-columns: 1fr; } .pokemon-genome-v47 { grid-template-columns: 120px minmax(0,1fr); } } @media (max-width: 480px) { .team-head-v47 { min-height: 53px; padding-right: 40px; } .team-head-v47 .panel-ui-icon { width: 27px; height: 27px; } .team-head-v47 small { font-size: 9px; } .team-head-v47 h2 { font-size: 18px; } .team-head-v47 > em { min-width: 48px; padding: 6px 8px; font-size: 11px; } .team-slot-v47 { min-height: 132px; } .team-slot-main-v47 { grid-template-rows: auto 64px auto; padding-bottom: 8px; } .team-slot-main-v47 > header,.team-slot-v47.is-empty > header { min-height: 27px; font-size: 9px; } .team-slot-main-v47 > header small,.team-slot-v47.is-empty > header small { font-size: 8px; } .team-slot-portrait-v47 { width: 78px; height: 68px; } .team-slot-copy-v47 { gap: 3px; } .team-slot-copy-v47 > b { font-size: 13px; } .team-slot-copy-v47 > small { font-size: 10px; } .team-empty-mark-v47 { width: 50px; height: 50px; } .team-empty-mark-v47 .pokemon-ui-icon-v47 { width: 33px; height: 33px; } .pokemon-detail-head-v47 > span { display: none; } .pokemon-detail-hero-v47 { grid-template-columns: 102px minmax(0,1fr); } .pokemon-genome-v47 { grid-template-columns: 104px minmax(0,1fr); } .pokemon-genome-visual-v47 { width: 98px; } .pokemon-genome-v47 b { font-size: 11px; } .pokemon-facts-v47 article { grid-template-columns: 28px minmax(0,1fr); min-height: 55px; padding: 7px; } .pokemon-facts-v47 article > i { width: 28px; height: 28px; } .pokemon-facts-v47 article > i .pokemon-ui-icon-v47 { width: 20px; height: 20px; } .pokemon-evolution-v47 { grid-template-columns: 34px minmax(0,1fr) auto; gap: 7px; } .pokemon-evolution-v47 > i { width: 34px; height: 34px; } } @media (prefers-reduced-motion: reduce) { .pokemon-genome-visual-v47::after,.pokemon-genome-visual-v47 > img { animation: none !important; } } /* v4.8 — centered game windows, rebuilt inventory, quest journal and polished roster. */ @media (min-width: 801px) { .game-screen .side-panel:is(.is-team-panel,.is-inventory-panel,.is-quest-panel,.is-pokemon-detail-panel,.is-center-panel), .game-screen .side-panel:is(.is-team-panel,.is-inventory-panel,.is-quest-panel,.is-pokemon-detail-panel,.is-center-panel).is-open { position: fixed !important; top: calc(50% + var(--panel-drag-y,0px)) !important; right: auto !important; bottom: auto !important; left: calc(50% + var(--panel-drag-x,0px)) !important; transform: translate(-50%,-50%) !important; } .game-screen .side-panel.is-team-panel { width: min(690px,calc(100vw - 120px)) !important; height: min(470px,calc(100dvh - 84px)) !important; } .game-screen .side-panel.is-inventory-panel { width: min(1040px,calc(100vw - 104px)) !important; height: min(690px,calc(100dvh - 72px)) !important; } .game-screen .side-panel.is-quest-panel { width: min(900px,calc(100vw - 118px)) !important; height: min(700px,calc(100dvh - 74px)) !important; } .game-screen .side-panel.is-pokemon-detail-panel { width: min(1060px,calc(100vw - 90px)) !important; height: min(730px,calc(100dvh - 54px)) !important; } } .team-head-v48 { padding-right: 64px; } .team-grid-v48 { overflow: hidden; } .team-slot-v48 { min-height: 158px; border-radius: 17px; } .team-slot-v48.is-empty { grid-template-rows: auto minmax(0,1fr) auto; padding: 0 11px 11px; overflow: hidden; border-style: solid; border-color: color-mix(in srgb,var(--theme-muted) 15%,var(--theme-border)); background: linear-gradient(135deg,transparent 0 48%,color-mix(in srgb,var(--theme-muted) 5%,transparent) 49% 51%,transparent 52%), color-mix(in srgb,var(--theme-card) 65%,transparent); background-size: 22px 22px,auto; } .team-slot-v48.is-empty > header small { color: color-mix(in srgb,var(--theme-muted) 72%,var(--theme-text)); letter-spacing: .08em; } .team-empty-mark-v48 { position: relative; width: 66px; height: 66px; border: 1px solid color-mix(in srgb,var(--theme-muted) 16%,var(--theme-border)); background: color-mix(in srgb,var(--theme-card) 86%,transparent); box-shadow: 0 8px 24px color-mix(in srgb,var(--theme-text) 6%,transparent),inset 0 1px var(--ui-highlight); } .team-empty-mark-v48::before,.team-empty-mark-v48::after { content: ""; position: absolute; z-index: -1; border: 1px solid color-mix(in srgb,var(--theme-muted) 13%,transparent); border-radius: 50%; } .team-empty-mark-v48::before { inset: -9px; } .team-empty-mark-v48::after { inset: -18px; } .team-empty-mark-v48 > i { position: absolute; right: -3px; bottom: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--theme-accent); box-shadow: -15px 6px color-mix(in srgb,var(--theme-accent) 45%,transparent),-29px 3px color-mix(in srgb,var(--theme-accent) 20%,transparent); } .team-slot-v48.is-empty > p { margin: 0; color: var(--theme-muted); font-size: 10px; font-weight: 750; text-align: center; } /* Inventory v4.8 */ .inventory-v48 { display: flex; flex-direction: column; gap: 9px; min-height: 0; height: 100%; overflow: hidden; color: var(--theme-text); } .inventory-head-v48 { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 62px; padding: 7px 58px 9px 5px; border-bottom: 1px solid color-mix(in srgb,var(--theme-accent) 15%,var(--theme-border)); cursor: grab; } .inventory-title-v48 { display: flex; align-items: center; gap: 11px; min-width: 0; } .inventory-title-v48 > span { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid color-mix(in srgb,var(--theme-accent) 22%,var(--theme-border)); border-radius: 14px; background: color-mix(in srgb,var(--theme-accent) 8%,var(--theme-card)); color: var(--theme-accent); } .inventory-title-v48 > span svg { width: 25px; height: 25px; } .inventory-title-v48 small,.inventory-title-v48 h2 { display: block; } .inventory-title-v48 small { color: var(--theme-muted); font-size: 9px; font-weight: 900; letter-spacing: .09em; } .inventory-title-v48 h2 { margin: 2px 0 0; font-size: 23px; line-height: 1; } .inventory-wallet-v48 { display: flex; gap: 7px; } .inventory-wallet-v48 > span { display: grid; grid-template-columns: 21px minmax(34px,auto) 24px; align-items: center; gap: 5px; min-height: 37px; padding: 4px 5px 4px 9px; border: 1px solid var(--theme-border); border-radius: 13px; background: color-mix(in srgb,var(--theme-card) 88%,transparent); } .inventory-wallet-v48 svg { width: 19px; height: 19px; } .inventory-wallet-v48 .is-coins > svg { color: #e7ae21; } .inventory-wallet-v48 .is-gems > svg { color: #42a3ed; } .inventory-wallet-v48 b { font-size: 12px; text-align: center; } .inventory-wallet-v48 button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 8px; background: color-mix(in srgb,var(--theme-accent) 10%,var(--theme-surface-soft)); color: var(--theme-accent); } .inventory-wallet-v48 button svg { width: 14px; height: 14px; } .inventory-toolbar-v48 { display: grid; grid-template-columns: minmax(0,1fr) 170px 82px; gap: 8px; min-height: 42px; } .inventory-search-v48,.inventory-sort-v48 { display: grid; align-items: center; min-width: 0; border: 1px solid var(--theme-border); border-radius: 13px; background: color-mix(in srgb,var(--theme-surface-soft) 82%,transparent); } .inventory-search-v48 { grid-template-columns: 22px minmax(0,1fr) auto; gap: 7px; padding: 0 10px; } .inventory-search-v48 svg,.inventory-sort-v48 svg { width: 18px; height: 18px; color: var(--theme-muted); } .inventory-search-v48 input,.inventory-sort-v48 select { min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: var(--theme-text); font: inherit; font-size: 11px; font-weight: 750; } .inventory-search-v48 input::placeholder { color: color-mix(in srgb,var(--theme-muted) 72%,transparent); } .inventory-search-v48 kbd { padding: 3px 6px; border: 1px solid var(--theme-border); border-radius: 7px; background: var(--theme-card); color: var(--theme-muted); font: 800 10px/1 Onest,sans-serif; } .inventory-sort-v48 { grid-template-columns: 20px minmax(0,1fr) 16px; gap: 4px; padding: 0 8px; } .inventory-sort-v48 select { appearance: none; cursor: pointer; } .inventory-view-v48 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border: 1px solid var(--theme-border); border-radius: 13px; background: var(--theme-surface-soft); } .inventory-view-v48 button { display: grid; place-items: center; min-width: 0; border: 0; border-radius: 9px; background: transparent; color: var(--theme-muted); } .inventory-view-v48 button.is-active { background: var(--theme-card); color: var(--theme-accent); box-shadow: 0 3px 10px rgba(8,44,64,.09); } .inventory-view-v48 svg { width: 18px; height: 18px; } .inventory-layout-v48 { display: grid; grid-template-columns: 164px minmax(0,1fr); gap: 10px; min-height: 0; flex: 1; } .inventory-v48 .inventory-categories-v48 { align-content: start; display: grid; grid-template-columns: minmax(0,1fr); gap: 4px; min-width: 0; min-height: 0; padding: 7px; overflow-x: hidden; overflow-y: auto; border: 1px solid var(--theme-border); border-radius: 16px; background: color-mix(in srgb,var(--theme-surface-soft) 72%,transparent); } .inventory-v48 .inventory-categories-v48 > button { position: relative; display: grid; grid-template-columns: 25px minmax(0,1fr) auto; grid-template-rows: 1fr; justify-items: stretch; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 39px; padding: 5px 8px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--theme-muted); text-align: left; } .inventory-categories-v48 > button:hover { background: color-mix(in srgb,var(--theme-card) 78%,transparent); color: var(--theme-text); } .inventory-categories-v48 > button.is-active { border-color: color-mix(in srgb,var(--theme-accent) 35%,var(--theme-border)); background: color-mix(in srgb,var(--theme-accent) 8%,var(--theme-card)); color: var(--theme-accent); box-shadow: inset 3px 0 var(--theme-accent); } .inventory-categories-v48 > button svg { width: 21px; height: 21px; } .inventory-categories-v48 > button span { overflow: hidden; font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; } .inventory-categories-v48 > button i { display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb,var(--theme-muted) 9%,transparent); color: currentColor; font-size: 9px; font-style: normal; font-weight: 900; } .inventory-catalog-v48 { display: grid; grid-template-rows: auto minmax(0,1fr); min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--theme-border); border-radius: 17px; background: color-mix(in srgb,var(--theme-card) 64%,transparent); } .inventory-catalog-v48 > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 7px 11px; border-bottom: 1px solid var(--theme-border); } .inventory-catalog-v48 > header small,.inventory-catalog-v48 > header b { display: block; } .inventory-catalog-v48 > header small { color: var(--theme-accent); font-size: 8px; font-weight: 900; letter-spacing: .08em; } .inventory-catalog-v48 > header b { margin-top: 2px; font-size: 14px; } .inventory-catalog-v48 > header > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; } .inventory-catalog-v48 > header em { padding: 4px 7px; border-radius: 999px; background: var(--theme-surface-soft); color: var(--theme-muted); font-size: 9px; font-style: normal; font-weight: 800; } .inventory-content-v48 { min-height: 0; overflow: auto; padding: 9px; } .inventory-items-v48 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-content: start; gap: 8px; } .inventory-v48 .inventory-item-v48 { position: relative; display: grid; grid-template-rows: 96px auto auto; align-content: start; width: auto; min-width: 0; min-height: 194px; height: auto; padding: 8px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--rarity-color,var(--theme-accent)) 22%,var(--theme-border)); border-radius: 15px; background: linear-gradient(155deg,color-mix(in srgb,var(--theme-card) 96%,transparent),color-mix(in srgb,var(--rarity-color,var(--theme-accent)) 4%,var(--theme-card))); color: var(--theme-text); text-align: left; box-shadow: 0 6px 17px rgba(5,37,54,.06); transition: transform 130ms ease,border-color 130ms ease,box-shadow 130ms ease; } .inventory-item-v48:hover,.inventory-item-v48:focus-visible { z-index: 2; border-color: color-mix(in srgb,var(--rarity-color,var(--theme-accent)) 58%,var(--theme-border)); box-shadow: 0 12px 26px rgba(4,34,51,.12); transform: translateY(-2px); } .inventory-item-rarity-v48 { position: absolute; z-index: 3; top: 7px; right: 7px; padding: 3px 6px; border-radius: 999px; background: color-mix(in srgb,var(--rarity-color,var(--theme-accent)) 10%,var(--theme-card)); color: var(--rarity-color,var(--theme-muted)); font-size: 8px; font-weight: 900; } .inventory-item-art-v48 { position: relative; display: grid; place-items: center; width: 100%; height: 92px; margin: 0; border: 0; border-radius: 12px; background: radial-gradient(circle,color-mix(in srgb,var(--rarity-color,var(--theme-accent)) 12%,transparent),transparent 64%); } .inventory-item-art-v48 .item-icon,.inventory-item-art-v48 .item-icon img { width: 86px; height: 86px; object-fit: contain; } .inventory-item-art-v48 > em { position: absolute; right: 1px; bottom: 1px; min-width: 29px; padding: 4px 6px; border: 2px solid var(--theme-card); border-radius: 999px; background: #173e58; color: #fff; font-size: 10px; font-style: normal; font-weight: 900; text-align: center; } .inventory-item-copy-v48 { display: grid; min-width: 0; gap: 2px; padding: 0 2px; } .inventory-item-copy-v48 > em { color: var(--theme-muted); font-size: 8px; font-style: normal; font-weight: 850; text-transform: uppercase; } .inventory-item-copy-v48 > b { overflow: hidden; font-size: 12px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .inventory-item-copy-v48 > small { display: -webkit-box; overflow: hidden; color: var(--theme-muted); font-size: 9px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .inventory-item-rights-v48 { align-self: end; justify-self: start; display: flex; gap: 3px; min-height: 18px; margin-top: 4px; } .inventory-item-rights-v48 > i { display: inline-flex; align-items: center; gap: 2px; min-width: 0; padding: 2px 4px; border: 1px solid var(--theme-border); border-radius: 6px; background: var(--theme-surface-soft); color: var(--theme-muted); font-size: 8px; font-style: normal; } .inventory-item-rights-v48 svg { width: 12px; height: 12px; } .inventory-v48.is-list .inventory-items-v48 { grid-template-columns: 1fr 1fr; } .inventory-v48.is-list .inventory-item-v48 { grid-template-columns: 72px minmax(0,1fr) auto; grid-template-rows: 1fr; align-items: center; min-height: 86px; } .inventory-v48.is-list .inventory-item-art-v48 { width: 68px; height: 68px; } .inventory-v48.is-list .inventory-item-art-v48 .item-icon,.inventory-v48.is-list .inventory-item-art-v48 .item-icon img { width: 64px; height: 64px; } .inventory-v48.is-list .inventory-item-rarity-v48 { display: none; } .inventory-v48.is-list .inventory-item-rights-v48 { align-self: center; } .inventory-empty-v48 { grid-column: 1/-1; align-self: center; justify-self: center; width: min(360px,100%); min-height: 230px; margin-top: 50px; padding: 24px; border: 1px dashed var(--theme-border); border-radius: 20px; background: color-mix(in srgb,var(--theme-surface-soft) 62%,transparent); text-align: center; } .inventory-battle-readonly-v48 { min-height: 46px; margin: 0; padding: 7px 10px; } .inventory-item-dialog-v48 { width: min(720px,calc(100vw - 24px)); max-height: min(660px,calc(100dvh - 24px)); border-radius: 22px; } .inventory-item-dialog-head-v48 { grid-template-columns: 150px minmax(0,1fr) auto; gap: 14px; min-height: 190px; padding: 16px; } .inventory-item-dialog-head-v48 .inventory-item-dialog-v2740__art { width: 142px; height: 142px; border-radius: 22px; } .inventory-item-dialog-head-v48 .item-icon,.inventory-item-dialog-head-v48 .item-icon img { width: 132px; height: 132px; object-fit: contain; } .inventory-item-dialog-head-v48 h3 { font-size: 24px; } .inventory-item-dialog-head-v48 p { font-size: 12px; line-height: 1.45; } .inventory-mechanic-v48 { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 8px 9px; border-radius: 11px; background: color-mix(in srgb,var(--theme-accent) 7%,var(--theme-surface-soft)); color: var(--theme-text); font-size: 10px; } .inventory-mechanic-v48 svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--theme-accent); } /* Pokémon evolution and skill points v4.8 */ .pokemon-detail-head-v47 { padding-right: 56px; } .pokemon-detail-head-v47 > span { margin-right: 0; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb,var(--theme-accent) 8%,var(--theme-surface-soft)); color: var(--theme-accent); } .pokemon-evolution-v48 { grid-template-columns: 126px minmax(0,1fr) auto; gap: 11px; padding: 9px 11px; } .pokemon-evolution-pair-v48 { display: grid; grid-template-columns: 50px 18px 50px; align-items: center; gap: 2px; min-width: 0; } .pokemon-evolution-pair-v48 > i { display: grid; place-items: center; width: 50px; height: 50px; overflow: hidden; border: 1px solid color-mix(in srgb,#8a63da 20%,var(--theme-border)); border-radius: 14px; background: color-mix(in srgb,#8a63da 7%,var(--theme-card)); } .pokemon-evolution-pair-v48 > em { color: #8a63da; font-size: 18px; font-style: normal; font-weight: 900; text-align: center; } .pokemon-evolution-portrait-v48,.pokemon-evolution-portrait-v48 img { width: 48px; height: 48px; object-fit: contain; } .pokemon-evolution-pair-v48.is-final { grid-template-columns: 50px; } .pokemon-mastery-head-v48 { display: grid; grid-template-columns: minmax(0,1fr) 154px; align-items: center; gap: 12px; } .pokemon-mastery-head-v48 > span p { margin: 3px 0 0; color: var(--theme-muted); font-size: 9px; } .pokemon-skill-points-v48 { display: grid !important; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 8px; min-width: 0 !important; padding: 7px 9px !important; border: 1px solid color-mix(in srgb,var(--theme-accent) 22%,var(--theme-border)); border-radius: 13px !important; background: color-mix(in srgb,var(--theme-accent) 6%,var(--theme-card)) !important; color: var(--theme-accent) !important; box-shadow: none !important; } .pokemon-skill-points-v48 > span { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 0 6px; min-width: 0; } .pokemon-skill-points-v48 small { grid-column: 1; overflow: hidden; color: var(--theme-muted); font-size: 8px !important; text-overflow: ellipsis; white-space: nowrap; } .pokemon-skill-points-v48 b { grid-column: 2; grid-row: 1/3; color: var(--theme-text); font-size: 20px !important; line-height: 1; } .pokemon-skill-points-v48 em { grid-column: 1; color: var(--theme-muted); font-size: 8px !important; font-style: normal; } /* Quest journal v4.8 */ .quest-journal-v48 { display: grid; grid-template-rows: auto auto auto minmax(0,1fr); gap: 9px; min-height: 0; height: 100%; overflow: hidden; color: var(--theme-text); } .quest-journal-head-v48 { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 62px; padding: 6px 58px 9px 6px; border-bottom: 1px solid var(--theme-border); cursor: grab; } .quest-journal-head-v48 > span { display: flex; align-items: center; gap: 10px; } .quest-journal-head-v48 > span > svg { width: 34px; height: 34px; color: var(--theme-accent); } .quest-journal-head-v48 small,.quest-journal-head-v48 h2,.quest-journal-head-v48 b { display: block; } .quest-journal-head-v48 small { color: var(--theme-muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; } .quest-journal-head-v48 h2 { margin: 2px 0 0; font-size: 23px; line-height: 1; } .quest-journal-head-v48 > div { max-width: 230px; min-width: 0; padding: 7px 10px; border: 1px solid color-mix(in srgb,var(--theme-accent) 20%,var(--theme-border)); border-radius: 12px; background: color-mix(in srgb,var(--theme-accent) 6%,var(--theme-card)); } .quest-journal-head-v48 > div b { overflow: hidden; margin-top: 2px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .quest-journal-summary-v48 { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; } .quest-journal-summary-v48 article { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 8px 11px; border: 1px solid var(--theme-border); border-radius: 14px; background: var(--theme-card); } .quest-journal-summary-v48 small { color: var(--theme-muted); font-size: 9px; font-weight: 900; } .quest-journal-summary-v48 b { color: var(--theme-accent); font-size: 18px; } .quest-journal-tabs-v48 { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 4px; border: 1px solid var(--theme-border); border-radius: 14px; background: var(--theme-surface-soft); } .quest-journal-tabs-v48 button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; border: 0; border-radius: 10px; background: transparent; color: var(--theme-muted); font-size: 10px; font-weight: 850; } .quest-journal-tabs-v48 button.is-active { background: var(--theme-card); color: var(--theme-accent); box-shadow: 0 4px 12px rgba(7,41,59,.09); } .quest-journal-tabs-v48 i { min-width: 20px; padding: 2px 5px; border-radius: 999px; background: color-mix(in srgb,currentColor 9%,transparent); font-size: 8px; font-style: normal; } .quest-journal-scroll-v48 { min-height: 0; overflow: auto; padding-right: 2px; } .quest-journal-group-v48 + .quest-journal-group-v48 { margin-top: 12px; } .quest-journal-group-v48 > h3,.quest-locations-v48 > h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: var(--theme-text); font-size: 12px; } .quest-journal-group-v48 > h3 span { display: grid; place-items: center; min-width: 21px; height: 21px; border-radius: 999px; background: var(--theme-surface-soft); color: var(--theme-muted); font-size: 9px; } .quest-journal-group-v48 > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .quest-journal-card-v48 { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 9px; min-width: 0; min-height: 150px; padding: 9px; border: 1px solid var(--theme-border); border-radius: 16px; background: var(--theme-card); } .quest-journal-card-v48.is-active { border-color: color-mix(in srgb,var(--theme-accent) 26%,var(--theme-border)); } .quest-journal-card-v48.is-tracked { border-color: var(--theme-accent); box-shadow: inset 3px 0 var(--theme-accent),0 8px 20px color-mix(in srgb,var(--theme-accent) 10%,transparent); } .quest-journal-card-v48.is-locked { opacity: .6; } .quest-journal-icon-v48 { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 13px; background: color-mix(in srgb,var(--theme-accent) 8%,var(--theme-surface-soft)); color: var(--theme-accent); } .quest-journal-icon-v48 > :is(i,svg),.quest-journal-icon-v48 .ui-icon { width: 28px; height: 28px; } .quest-journal-icon-v48 img { width: 42px; height: 42px; object-fit: contain; } .quest-journal-copy-v48 { display: grid; align-content: start; min-width: 0; } .quest-journal-copy-v48 > small { color: var(--theme-accent); font-size: 8px; font-weight: 900; letter-spacing: .04em; } .quest-journal-copy-v48 > b { overflow: hidden; margin-top: 2px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .quest-journal-copy-v48 > p { display: -webkit-box; min-height: 27px; margin: 4px 0 6px; overflow: hidden; color: var(--theme-muted); font-size: 10px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .quest-journal-progress-v48 { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; } .quest-journal-progress-v48 > i { height: 6px; overflow: hidden; border-radius: 999px; background: var(--theme-surface-soft); } .quest-journal-progress-v48 > i u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--theme-accent),#64cc88); text-decoration: none; } .quest-journal-progress-v48 > em { color: var(--theme-muted); font-size: 8px; font-style: normal; font-weight: 800; } .quest-journal-copy-v48 > footer { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px; margin-top: 7px; } .quest-journal-copy-v48 > footer > span { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; color: var(--theme-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .quest-journal-copy-v48 > footer > span svg { flex: 0 0 auto; width: 14px; height: 14px; } .quest-journal-copy-v48 > footer button { display: flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 8px; border: 1px solid var(--theme-border); border-radius: 9px; background: var(--theme-surface-soft); color: var(--theme-muted); font-size: 8px; font-weight: 900; } .quest-journal-copy-v48 > footer button.is-active { border-color: var(--theme-accent); background: color-mix(in srgb,var(--theme-accent) 9%,var(--theme-card)); color: var(--theme-accent); } .quest-journal-copy-v48 > footer button svg { width: 14px; height: 14px; } .quest-locations-v48 { margin-top: 14px; } .quest-locations-v48 > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; } .quest-locations-v48 article { display: grid; grid-template-columns: 27px minmax(0,1fr); align-items: center; gap: 7px; min-width: 0; min-height: 47px; padding: 7px; border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-surface-soft); } .quest-locations-v48 article > i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: var(--theme-card); color: var(--theme-muted); font-size: 9px; font-style: normal; font-weight: 900; } .quest-locations-v48 article.is-done > i { color: #43ae6d; } .quest-locations-v48 b,.quest-locations-v48 small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quest-locations-v48 b { font-size: 10px; }.quest-locations-v48 small { margin-top: 2px; color: var(--theme-muted); font-size: 8px; } .quest-journal-empty-v48 { display: grid; justify-items: center; gap: 7px; padding: 36px; border: 1px dashed var(--theme-border); border-radius: 17px; color: var(--theme-muted); text-align: center; } .quest-journal-empty-v48 svg { width: 34px; height: 34px; }.quest-journal-empty-v48 b { color: var(--theme-text); } .quest-widget-collapse { position: absolute; z-index: 5; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid color-mix(in srgb,var(--theme-accent) 18%,var(--theme-border)); border-radius: 9px; background: color-mix(in srgb,var(--theme-card) 90%,transparent); color: var(--theme-muted); cursor: pointer; } .quest-widget-collapse span { display: block; font-size: 18px; line-height: 1; transition: transform 160ms ease; } .game-screen .quest-widget.is-collapsed { width: 116px !important; min-height: 58px !important; padding: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .game-screen .quest-widget.is-collapsed > :not(.quest-widget-journal,.quest-widget-collapse) { display: none !important; } .game-screen .quest-widget.is-collapsed > .quest-widget-journal { display: grid !important; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 6px; min-height: 56px; padding: 7px 30px 7px 7px; border: 1px solid color-mix(in srgb,var(--theme-accent) 26%,var(--theme-border)); border-radius: 16px; background: color-mix(in srgb,var(--ui-glass-strong) 95%,transparent); color: var(--theme-text); box-shadow: 0 10px 24px rgba(3,27,39,.2); backdrop-filter: blur(14px); } .game-screen .quest-widget.is-collapsed .quest-widget-journal > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb,var(--theme-accent) 11%,var(--theme-card)); } .game-screen .quest-widget.is-collapsed .quest-widget-journal > span:first-child svg { display: block; width: 18px !important; height: 18px !important; min-width: 18px; min-height: 18px; color: var(--theme-accent); } .game-screen .quest-widget.is-collapsed .quest-widget-journal > span:last-child { min-width: 0; }.game-screen .quest-widget.is-collapsed .quest-widget-journal b,.game-screen .quest-widget.is-collapsed .quest-widget-journal small { display: block; } .game-screen .quest-widget.is-collapsed .quest-widget-journal b { font-size: 10px; }.game-screen .quest-widget.is-collapsed .quest-widget-journal small { display: none; } .game-screen .quest-widget.is-collapsed .quest-widget-collapse span { transform: rotate(180deg); } @media (max-width: 800px) { .inventory-v48 { height: auto; min-height: 0; overflow: visible; } .inventory-head-v48 { min-height: 55px; padding: 5px 48px 7px 3px; cursor: default; } .inventory-title-v48 > span { width: 38px; height: 38px; } .inventory-title-v48 h2 { font-size: 19px; }.inventory-title-v48 small { font-size: 8px; } .inventory-wallet-v48 { gap: 4px; }.inventory-wallet-v48 > span { grid-template-columns: 17px minmax(24px,auto); min-height: 34px; padding: 4px 7px; }.inventory-wallet-v48 button { display: none; } .inventory-toolbar-v48 { grid-template-columns: minmax(0,1fr) 42px; }.inventory-sort-v48 { display: none; }.inventory-search-v48 kbd { display: none; } .inventory-layout-v48 { display: flex; flex-direction: column; overflow: visible; } .inventory-v48 .inventory-categories-v48 { display: flex; flex: 0 0 auto; gap: 5px; padding: 5px; overflow-x: auto; overflow-y: hidden; } .inventory-v48 .inventory-categories-v48 > button { flex: 0 0 84px; width: auto; grid-template-columns: 21px minmax(0,1fr); grid-template-rows: 1fr; min-height: 38px; padding: 5px 7px; } .inventory-categories-v48 > button span { font-size: 9px; }.inventory-categories-v48 > button i { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px; font-size: 7px; } .inventory-catalog-v48 { overflow: visible; }.inventory-catalog-v48 > header { min-height: 43px; }.inventory-catalog-v48 > header > div { display: none; } .inventory-content-v48 { overflow: visible; padding: 6px; }.inventory-items-v48 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; } .inventory-v48 .inventory-item-v48 { grid-template-rows: 82px auto auto; min-height: 148px; padding: 6px; border-radius: 14px; } .inventory-item-art-v48 { height: 80px; }.inventory-item-art-v48 .item-icon,.inventory-item-art-v48 .item-icon img { width: 74px; height: 74px; } .inventory-item-copy-v48 > b { font-size: 11px; }.inventory-item-copy-v48 > small { -webkit-line-clamp: 1; } .inventory-item-rights-v48 { display: none; }.inventory-item-rarity-v48 { top: 5px; right: 5px; font-size: 7px; } .inventory-v48.is-list .inventory-items-v48 { grid-template-columns: 1fr; } .inventory-item-dialog-head-v48 { grid-template-columns: 104px minmax(0,1fr); min-height: 140px; padding: 12px; }.inventory-item-dialog-head-v48 .inventory-item-dialog-v2740__art { width: 100px; height: 100px; }.inventory-item-dialog-head-v48 .item-icon,.inventory-item-dialog-head-v48 .item-icon img { width: 94px; height: 94px; }.inventory-item-dialog-head-v48 > strong { grid-column: 1/-1; justify-self: end; } .game-screen .side-panel.is-quest-panel { top: max(60px,calc(env(safe-area-inset-top) + 54px)) !important; bottom: calc(88px + env(safe-area-inset-bottom)) !important; height: auto !important; } .quest-journal-v48 { height: auto; overflow: visible; }.quest-journal-head-v48 { min-height: 54px; padding: 5px 46px 7px 3px; cursor: default; }.quest-journal-head-v48 h2 { font-size: 19px; }.quest-journal-head-v48 > div { display: none; } .quest-journal-summary-v48 article { min-height: 44px; padding: 6px 8px; }.quest-journal-summary-v48 small { font-size: 7px; }.quest-journal-summary-v48 b { font-size: 14px; } .quest-journal-scroll-v48 { overflow: visible; }.quest-journal-group-v48 > div { grid-template-columns: 1fr; }.quest-journal-card-v48 { min-height: 134px; } .quest-locations-v48 > div { grid-template-columns: 1fr 1fr; } .game-screen .quest-widget .quest-widget-collapse { display: none !important; } .pokemon-evolution-v48 { grid-template-columns: 116px minmax(0,1fr); }.pokemon-evolution-v48 > button { grid-column: 1/-1; min-height: 36px; }.pokemon-mastery-head-v48 { grid-template-columns: minmax(0,1fr) 142px; } .team-head-v48 { padding-right: 46px; }.team-grid-v48 { overflow: visible; }.team-slot-v48.is-empty > p { font-size: 9px; } } @media (max-width: 430px) { .inventory-head-v48 { align-items: flex-start; }.inventory-title-v48 small { max-width: 134px; }.inventory-wallet-v48 { padding-top: 2px; }.inventory-wallet-v48 > span { grid-template-columns: 15px minmax(18px,auto); gap: 2px; padding-inline: 5px; }.inventory-wallet-v48 b { font-size: 10px; } .inventory-v48 .inventory-item-v48 { min-height: 142px; }.inventory-item-copy-v48 > em { font-size: 7px; }.inventory-item-copy-v48 > b { font-size: 10px; } .quest-journal-tabs-v48 button { font-size: 9px; }.quest-journal-card-v48 { grid-template-columns: 40px minmax(0,1fr); min-height: 128px; padding: 7px; }.quest-journal-icon-v48 { width: 38px; height: 38px; }.quest-journal-copy-v48 > footer { grid-template-columns: 1fr; }.quest-journal-copy-v48 > footer button { justify-content: center; } .quest-locations-v48 > div { grid-template-columns: 1fr; } .pokemon-evolution-v48 { grid-template-columns: 104px minmax(0,1fr); }.pokemon-evolution-pair-v48 { grid-template-columns: 42px 16px 42px; }.pokemon-evolution-pair-v48 > i,.pokemon-evolution-portrait-v48,.pokemon-evolution-portrait-v48 img { width: 42px; height: 42px; }.pokemon-mastery-head-v48 { grid-template-columns: 1fr 124px; }.pokemon-skill-points-v48 { grid-template-columns: 23px minmax(0,1fr); padding: 6px 7px !important; }.pokemon-skill-points-v48 small { font-size: 7px !important; }.pokemon-skill-points-v48 b { font-size: 17px !important; } } /* v4.9 cascade anchors — intentionally last so legacy inventory layers cannot restore the rail or verbose cards. */ .inventory-v49 .inventory-layout-v49 { display:grid; grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); gap:7px; overflow:hidden; } .inventory-v49 .inventory-categories-v49 { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px; padding:4px; overflow:visible; } .inventory-v49 .inventory-categories-v49 > button { display:grid; grid-template-columns:22px minmax(0,1fr); grid-template-rows:1fr; gap:5px; width:100%; min-height:37px; padding:4px 7px; } .inventory-v49 .inventory-categories-v49 > button span { font-size:8px; } .inventory-v49 .inventory-categories-v49 > button i { position:absolute; top:1px; right:2px; min-width:15px; height:15px; padding:0 3px; font-size:7px; } .inventory-v49 .inventory-catalog-v49 { overflow:hidden; } .inventory-v49 .inventory-content-v49 { overflow:auto; padding:8px; } .inventory-v49 .inventory-items-v49 { grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:0 1px 8px; } .inventory-v49 .inventory-item-v49 { grid-template-rows:minmax(0,1fr) 30px; gap:2px; min-height:170px; height:170px; padding:7px; overflow:hidden; border-radius:17px; } .inventory-v49 .inventory-item-art-v49 { width:100%; height:126px; border:0; border-radius:13px; box-shadow:none; } .inventory-v49 .inventory-item-art-v49 .item-icon,.inventory-v49 .inventory-item-art-v49 .item-icon img { width:112px; height:112px; } .inventory-v49 .inventory-item-copy-v49 { display:grid; place-items:center; min-height:28px; padding:0 4px; } .inventory-v49 .inventory-item-copy-v49 > b { display:-webkit-box; font-size:11px; line-height:1.16; text-align:center; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .inventory-v49 .inventory-item-rarity-v49 { top:8px; right:8px; font-size:7px; } .inventory-v49.is-list .inventory-items-v49 { grid-template-columns:repeat(2,minmax(0,1fr)); } .inventory-v49.is-list .inventory-item-v49 { grid-template-columns:82px minmax(0,1fr); grid-template-rows:1fr; min-height:92px; height:92px; padding:5px 9px; } .inventory-v49.is-list .inventory-item-art-v49 { width:80px; height:80px; } .inventory-v49.is-list .inventory-item-art-v49 .item-icon,.inventory-v49.is-list .inventory-item-art-v49 .item-icon img { width:74px; height:74px; } .inventory-v49.is-list .inventory-item-copy-v49 { justify-items:start; } .inventory-v49.is-list .inventory-item-copy-v49 > b { font-size:12px; text-align:left; } @media (max-width:800px) { .inventory-v49 .inventory-layout-v49 { display:flex; flex-direction:column; gap:6px; overflow:visible; } .inventory-v49 .inventory-categories-v49 { display:flex; gap:5px; padding:4px; overflow-x:auto; overflow-y:hidden; } .inventory-v49 .inventory-categories-v49 > button { flex:0 0 82px; width:82px; min-height:38px; } .inventory-v49 .inventory-catalog-v49 { overflow:visible; } .inventory-v49 .inventory-content-v49 { overflow:visible; padding:6px; } .inventory-v49 .inventory-items-v49 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .inventory-v49 .inventory-item-v49 { grid-template-rows:minmax(0,1fr) 30px; min-height:151px; height:151px; padding:6px; } .inventory-v49 .inventory-item-art-v49 { width:100%; height:110px; } .inventory-v49 .inventory-item-art-v49 .item-icon,.inventory-v49 .inventory-item-art-v49 .item-icon img { width:96px; height:96px; } .inventory-v49.is-list .inventory-items-v49 { grid-template-columns:1fr; } } @media (max-width:430px) { .inventory-v49 .inventory-item-v49 { min-height:145px; height:145px; } .inventory-v49 .inventory-item-art-v49 { height:104px; } .inventory-v49 .inventory-item-art-v49 .item-icon,.inventory-v49 .inventory-item-art-v49 .item-icon img { width:90px; height:90px; } } /* v5.6 — the mobile carried team is a fixed 2x3 board: header and all six slots stay visible. */ @media (max-width:800px) { .game-screen .side-panel.is-team-panel, .game-screen .side-panel.is-team-panel.is-open { top:max(56px,calc(env(safe-area-inset-top) + 52px))!important; right:max(6px,env(safe-area-inset-right))!important; bottom:calc(72px + env(safe-area-inset-bottom))!important; left:max(6px,env(safe-area-inset-left))!important; width:auto!important; height:auto!important; max-width:none!important; max-height:none!important; padding:8px!important; overflow:hidden!important; } .game-screen .side-panel.is-team-panel #sidePanelContent { width:100%; height:100%!important; min-height:0; max-height:none!important; padding:0!important; overflow:hidden!important; overscroll-behavior:none; } .team-window-v56 { grid-template-rows:52px minmax(0,1fr)!important; gap:6px!important; width:100%; height:100%!important; min-height:0; overflow:hidden!important; } .team-window-v56::before { inset:0; border-radius:16px; } .team-head-v56 { position:relative; z-index:3; min-height:0!important; height:52px; padding:4px 48px 6px 4px!important; cursor:default; } .team-head-v56 > span { min-width:0; gap:8px; } .team-head-v56 .panel-ui-icon { flex:0 0 auto; width:28px; height:28px; } .team-head-v56 small { overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; } .team-head-v56 h2 { margin-top:1px; font-size:18px; } .team-head-v56 > em { flex:0 0 auto; min-width:48px; padding:6px 8px; font-size:11px; } .team-grid-v56 { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:repeat(3,minmax(0,1fr))!important; gap:6px!important; width:100%; height:100%; min-height:0; padding:1px!important; overflow:hidden!important; } .team-slot-v56 { width:100%; height:auto!important; min-width:0; min-height:0!important; border-radius:15px!important; } .team-slot-main-v56 { grid-template-rows:clamp(22px,3.4dvh,28px) minmax(0,1fr) auto!important; width:100%; height:100%; min-height:0; padding:0 6px 6px!important; overflow:hidden; } .team-slot-main-v56 > header, .team-slot-v56.is-empty > header { min-height:clamp(22px,3.4dvh,28px)!important; font-size:clamp(8px,1.35vw,10px)!important; } .team-slot-main-v56 > header small, .team-slot-v56.is-empty > header small { font-size:clamp(7px,1.2vw,9px)!important; } .team-slot-art-v56 { min-height:0; overflow:hidden; } .team-slot-portrait-v56 { width:clamp(58px,11dvh,88px)!important; height:clamp(52px,9.5dvh,78px)!important; } .team-slot-copy-v56 { align-self:end; gap:2px!important; padding-bottom:1px; } .team-slot-copy-v56 > b { font-size:clamp(11px,2.1vw,14px)!important; } .team-slot-copy-v56 > small { margin:0; font-size:clamp(8px,1.45vw,10px)!important; } .team-slot-v56.is-empty { grid-template-rows:clamp(22px,3.4dvh,28px) minmax(0,1fr) 18px!important; padding:0 6px 6px!important; } .team-empty-mark-v56 { width:clamp(44px,8dvh,58px)!important; height:clamp(44px,8dvh,58px)!important; } .team-empty-mark-v56 .pokemon-ui-icon-v47 { width:60%; height:60%; } .team-slot-v56.is-empty > p { align-self:end; font-size:clamp(8px,1.25vw,9px)!important; line-height:1; } } @media (max-width:800px) and (max-height:650px) { .game-screen .side-panel.is-team-panel, .game-screen .side-panel.is-team-panel.is-open { top:max(48px,calc(env(safe-area-inset-top) + 44px))!important; bottom:calc(64px + env(safe-area-inset-bottom))!important; padding:6px!important; } .team-window-v56 { grid-template-rows:44px minmax(0,1fr)!important; gap:4px!important; } .team-head-v56 { height:44px; padding:3px 44px 4px 3px!important; } .team-head-v56 .panel-ui-icon { width:24px; height:24px; } .team-head-v56 small { font-size:7px; } .team-head-v56 h2 { font-size:16px; } .team-head-v56 > em { min-width:44px; padding:5px 7px; font-size:10px; } .team-grid-v56 { gap:4px!important; } .team-slot-main-v56 { grid-template-rows:22px minmax(0,1fr) auto!important; padding:0 5px 4px!important; } .team-slot-portrait-v56 { width:58px!important; height:48px!important; } .team-slot-copy-v56 { gap:1px!important; } .team-slot-copy-v56 > b { font-size:11px!important; } .team-slot-copy-v56 > small { font-size:8px!important; } .team-slot-v56.is-empty { grid-template-rows:22px minmax(0,1fr) 15px!important; padding:0 5px 4px!important; } .team-empty-mark-v56 { width:42px!important; height:42px!important; } .team-slot-v56.is-empty > p { font-size:8px!important; } } @media (max-width:800px) and (orientation:landscape) { .team-grid-v56 { grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-template-rows:repeat(2,minmax(0,1fr))!important; } } /* /inventory-v50.css: deferred, original cascade position */ @media all{:root[data-pk-style-slot="owner-37"]{}} /* /inventory-v51.css: deferred, original cascade position */ @media all{:root[data-pk-style-slot="owner-38"]{}} /* /inventory-v52.css: deferred, original cascade position */ @media all{:root[data-pk-style-slot="owner-39"]{}} /* pk-style-source:40 */ /* /quests-v57.css */ /* Quest system v57 — four semantic types, one lifecycle, compact game HUD. */ :root { --quest-blue: #2f80ed; --quest-gold: #f2b84b; --quest-coral: #e86a3c; --quest-purple: #8b5cf6; --quest-success: #28a96b; } .game-screen .quest-widget { position: absolute !important; z-index: 18 !important; top: 236px !important; right: max(18px, env(safe-area-inset-right)) !important; left: auto !important; display: block !important; width: min(350px, calc(100vw - 36px)) !important; min-height: 0 !important; max-height: min(390px, calc(100dvh - 330px)) !important; padding: 0 !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--quest-accent, var(--theme-accent)) 25%, var(--theme-border)) !important; border-radius: 18px !important; background: color-mix(in srgb, var(--ui-glass-strong, var(--theme-card)) 96%, transparent) !important; box-shadow: 0 16px 34px rgba(8, 37, 54, .2), 0 1px var(--ui-highlight) inset !important; color: var(--theme-text) !important; backdrop-filter: blur(18px) saturate(1.12) !important; cursor: default; } .game-screen .quest-widget::before, .game-screen .quest-widget::after { display: none !important; } .quest-tracker-head-v57 { display: flex !important; align-items: center; justify-content: space-between; min-height: 43px; padding: 7px 8px 7px 11px; border-bottom: 1px solid var(--theme-border); background: color-mix(in srgb, var(--quest-accent) 6%, var(--theme-surface-soft)); } .quest-tracker-head-v57 > span, .quest-tracker-head-v57 > div { display: flex; align-items: center; gap: 7px; min-width: 0; } .quest-tracker-head-v57 svg { width: 17px; height: 17px; color: var(--quest-accent); } .quest-tracker-head-v57 b { color: var(--theme-text) !important; font-size: 11px !important; letter-spacing: 0 !important; } .quest-tracker-head-v57 em { display: grid; place-items: center; min-width: 23px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--quest-accent) 12%, var(--theme-card)); color: var(--quest-accent); font-size: 8px; font-style: normal; font-weight: 900; } .quest-tracker-head-v57 small { color: var(--theme-muted) !important; font-size: 7px !important; letter-spacing: .3px !important; } .quest-tracker-head-v57 button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--theme-border); border-radius: 10px; background: var(--theme-card); color: var(--theme-muted); cursor: pointer; } .quest-tracker-head-v57 button:hover { border-color: color-mix(in srgb, var(--quest-accent) 45%, var(--theme-border)); color: var(--quest-accent); } .quest-tracker-list-v57 { max-height: 330px; overflow: hidden auto; scrollbar-width: thin; } .quest-tracker-row-v57 { position: relative; display: grid !important; grid-template-columns: 27px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 62px; padding: 8px 10px 10px; border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 76%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--quest-accent) 5%, var(--theme-card)), var(--theme-card) 58%); color: var(--theme-text); } .quest-tracker-row-v57:last-child { border-bottom: 0; } .quest-tracker-row-v57.is-primary { min-height: 78px; box-shadow: 3px 0 var(--quest-accent) inset; } .quest-tracker-row-v57 > img { width: 27px; height: 27px; } .quest-tracker-row-v57 > span { display: block; min-width: 0; } .quest-tracker-row-v57 small, .quest-tracker-row-v57 b, .quest-tracker-row-v57 em, .quest-tracker-row-v57 u { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quest-tracker-row-v57 small { color: var(--quest-accent) !important; font-size: 6.5px !important; font-weight: 950; letter-spacing: .7px !important; } .quest-tracker-row-v57 b { margin-top: 2px; color: var(--theme-text) !important; font-size: 11px !important; line-height: 1.15 !important; } .quest-tracker-row-v57 em { margin-top: 3px; color: var(--theme-muted); font-size: 9px; font-style: normal; font-weight: 750; } .quest-tracker-row-v57 u { margin-top: 3px; color: color-mix(in srgb, var(--quest-accent) 70%, var(--theme-muted)); font-size: 7.5px; font-weight: 850; text-decoration: none; } .quest-tracker-row-v57 u svg { width: 9px; height: 9px; vertical-align: -2px; } .quest-tracker-row-v57 > strong { color: var(--quest-accent); font-size: 10px; } .quest-tracker-row-v57.is-ready > strong, .quest-tracker-row-v57.is-ready em { color: var(--quest-success); } .quest-tracker-row-v57 > i { position: absolute; right: 10px; bottom: 5px; left: 10px; height: 2px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--theme-border) 82%, transparent); } .quest-tracker-row-v57 > i::after { content: ''; display: block; width: var(--value); height: 100%; border-radius: inherit; background: var(--quest-accent); transition: width .32s ease; } .quest-tracker-row-v57 > button { position: absolute; right: 8px; top: 7px; width: 25px; height: 25px; padding: 0; border: 1px solid var(--theme-border); border-radius: 8px; background: var(--theme-card); color: var(--quest-accent); font-weight: 900; cursor: pointer; } .quest-tracker-row-v57 > .quest-hud-more-v57 { display: none; } .quest-tracker-empty-v57 { display: grid; gap: 3px; width: 100%; min-height: 62px; padding: 10px 12px; border: 0; background: transparent; color: var(--theme-text); text-align: left; cursor: pointer; } .quest-tracker-empty-v57 b { font-size: 10px !important; }.quest-tracker-empty-v57 small { color: var(--theme-muted) !important; font-size: 8px !important; } .game-screen .quest-widget.is-collapsed { width: 176px !important; max-height: 44px !important; border: 1px solid color-mix(in srgb, var(--quest-accent) 24%, var(--theme-border)) !important; background: var(--ui-glass-strong) !important; } .game-screen .quest-widget.is-collapsed > .quest-tracker-head-v57 { display: flex !important; } .game-screen .quest-widget.is-collapsed > .quest-tracker-list-v57, .game-screen .quest-widget.is-collapsed > .quest-tracker-empty-v57 { display: none !important; } .game-screen .quest-widget.is-collapsed .quest-tracker-list-v57, .game-screen .quest-widget.is-collapsed .quest-tracker-empty-v57, .game-screen .quest-widget.is-collapsed .quest-tracker-head-v57 > div > :not([data-quest-widget-collapse]) { display: none !important; } .game-screen .quest-widget.is-collapsed .quest-tracker-head-v57 { border-bottom: 0; } .game-screen .quest-widget.is-collapsed .quest-tracker-head-v57 > span { overflow: hidden; } .game-screen .quest-widget.is-collapsed .quest-tracker-head-v57 > span > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game-screen .quest-widget.is-collapsed [data-quest-widget-collapse] svg { transform: rotate(180deg); } .game-screen .quest-widget.is-progress-updated { animation: questHudPulseV57 .8s ease; } @keyframes questHudPulseV57 { 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--quest-accent) 24%, transparent), 0 18px 38px rgba(8,37,54,.22); } } /* Primary quest marker on the minimap. */ .world-minimap-quest-marker { position: absolute; z-index: 8; width: 24px; height: 24px; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 3px 4px rgba(2,31,49,.35)); } .world-minimap-quest-marker[hidden] { display: none !important; } .world-minimap-quest-marker img { position: relative; z-index: 2; display: block; width: 24px; height: 24px; } .world-minimap-quest-marker > i { position: absolute; inset: -4px; border: 1px solid color-mix(in srgb, var(--quest-accent) 70%, #fff); border-radius: 50%; animation: questMapPulseV57 1.5s ease-out infinite; } .world-minimap-quest-marker.is-search-area { width: 40px; height: 40px; border: 1.5px dashed var(--quest-accent); border-radius: 50%; background: color-mix(in srgb, var(--quest-accent) 12%, transparent); } .world-minimap-quest-marker.is-search-area img { width: 19px; height: 19px; margin: 10px; } @keyframes questMapPulseV57 { to { opacity: 0; transform: scale(1.55); } } /* Desktop journal. */ .game-screen .side-panel.is-quest-panel { width: min(1120px, calc(100vw - 96px)) !important; height: min(820px, calc(100dvh - 30px)) !important; } .game-screen .side-panel.is-quest-panel #sidePanelContent { height: 100%; padding: 0 !important; overflow: hidden !important; } .quest-journal-v57 { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); height: 100%; min-height: 0; overflow: hidden; color: var(--theme-text); } .quest-journal-head-v57 { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 13px 62px 11px 17px; border-bottom: 1px solid var(--theme-border); background: linear-gradient(115deg, color-mix(in srgb, var(--theme-accent) 8%, var(--theme-surface-soft)), var(--theme-surface-soft)); cursor: grab; } .quest-journal-head-v57 > span { display: flex; align-items: center; gap: 12px; min-width: 0; } .quest-journal-head-v57 > span > svg { width: 40px; height: 40px; padding: 9px; border: 1px solid color-mix(in srgb, var(--theme-accent) 24%, var(--theme-border)); border-radius: 14px; background: var(--theme-card); color: var(--theme-accent); } .quest-journal-head-v57 small { color: var(--theme-accent); font-size: 8px !important; font-weight: 950; letter-spacing: 1.4px; } .quest-journal-head-v57 h2 { margin: 2px 0 0; font-size: 25px; line-height: 1; letter-spacing: -.6px; } .quest-journal-head-v57 > div { max-width: 330px; min-width: 0; padding: 8px 12px; border: 1px solid var(--theme-border); border-radius: 13px; background: var(--theme-card); text-align: right; } .quest-journal-head-v57 > div small, .quest-journal-head-v57 > div b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quest-journal-head-v57 > div small { color: var(--theme-muted); font-size: 7px !important; }.quest-journal-head-v57 > div b { margin-top: 2px; font-size: 11px; } .quest-mode-tabs-v57 { display: flex; gap: 6px; padding: 8px 12px 0; background: var(--theme-surface-soft); } .quest-mode-tabs-v57 button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 15px; border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-card); color: var(--theme-muted); font-size: 10px; font-weight: 900; cursor: pointer; } .quest-mode-tabs-v57 button svg { width: 16px; height: 16px; }.quest-mode-tabs-v57 button.is-active { border-color: color-mix(in srgb, var(--theme-accent) 45%, var(--theme-border)); background: color-mix(in srgb, var(--theme-accent) 10%, var(--theme-card)); color: var(--theme-accent); } .quest-type-tabs-v57 { display: flex; gap: 6px; padding: 9px 12px 7px; overflow: hidden auto; background: var(--theme-surface-soft); scrollbar-width: none; } .quest-type-tabs-v57 button { flex: 1 0 auto; display: grid; grid-template-columns: 24px auto 21px; align-items: center; justify-content: center; gap: 7px; min-height: 43px; padding: 5px 10px; border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-card); color: var(--theme-muted); font-size: 9px; font-weight: 900; cursor: pointer; } .quest-type-tabs-v57 button > img, .quest-type-tabs-v57 button > svg { width: 24px; height: 24px; } .quest-type-tabs-v57 button > i { display: grid; place-items: center; min-width: 21px; height: 20px; border-radius: 999px; background: var(--theme-surface-soft); color: var(--theme-muted); font-size: 7px; font-style: normal; } .quest-type-tabs-v57 button.is-active { border-color: color-mix(in srgb, var(--quest-accent) 50%, var(--theme-border)); background: color-mix(in srgb, var(--quest-accent) 8%, var(--theme-card)); color: var(--quest-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--quest-accent) 10%, transparent) inset; } .quest-type-tabs-v57 button.is-active > i { background: color-mix(in srgb, var(--quest-accent) 14%, var(--theme-card)); color: var(--quest-accent); } .quest-status-tabs-v57 { display: flex; gap: 5px; padding: 0 12px 9px; border-bottom: 1px solid var(--theme-border); background: var(--theme-surface-soft); } .quest-status-tabs-v57 button { display: inline-flex; align-items: center; gap: 8px; min-height: 35px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--theme-muted); font-size: 9px; font-weight: 850; cursor: pointer; } .quest-status-tabs-v57 button i { display: grid; place-items: center; min-width: 20px; height: 19px; border-radius: 999px; background: color-mix(in srgb, var(--theme-border) 60%, transparent); font-size: 7px; font-style: normal; } .quest-status-tabs-v57 button.is-active { background: var(--theme-card); color: var(--theme-text); box-shadow: 0 0 0 1px var(--theme-border) inset; } .quest-journal-body-v57 { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(430px, 1.25fr); min-height: 0; overflow: hidden; } .quest-list-v57 { display: grid; align-content: start; gap: 7px; min-height: 0; padding: 10px; overflow: hidden auto; border-right: 1px solid var(--theme-border); background: color-mix(in srgb, var(--theme-surface-soft) 84%, var(--theme-card)); scrollbar-width: thin; } .quest-list-card-v57 { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 96px; padding: 10px 11px 12px; overflow: hidden; border: 1px solid var(--theme-border); border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--quest-accent) 5%, var(--theme-card)), var(--theme-card) 46%); color: var(--theme-text); text-align: left; cursor: pointer; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; } .quest-list-card-v57::before { content: ''; position: absolute; top: 9px; bottom: 9px; left: 0; width: 3px; border-radius: 0 4px 4px 0; background: var(--quest-accent); } .quest-list-card-v57:hover { border-color: color-mix(in srgb, var(--quest-accent) 42%, var(--theme-border)); transform: translateY(-1px); } .quest-list-card-v57.is-selected { border-color: color-mix(in srgb, var(--quest-accent) 62%, var(--theme-border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--quest-accent) 11%, transparent); } .quest-list-card-v57.is-locked, .quest-list-card-v57.is-expired { opacity: .62; filter: saturate(.65); } .quest-list-card-v57 > img { width: 34px; height: 34px; }.quest-list-card-v57 > span { min-width: 0; } .quest-list-card-v57 small, .quest-list-card-v57 b, .quest-list-card-v57 em, .quest-list-card-v57 u { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quest-list-card-v57 small { color: var(--quest-accent); font-size: 7px !important; font-weight: 950; letter-spacing: .8px; } .quest-list-card-v57 b { margin-top: 3px; color: var(--theme-text); font-size: 13px; }.quest-list-card-v57 em { margin-top: 4px; color: var(--theme-muted); font-size: 9px; font-style: normal; font-weight: 750; } .quest-list-card-v57 u { margin-top: 5px; color: color-mix(in srgb, var(--quest-accent) 65%, var(--theme-muted)); font-size: 8px; font-weight: 800; text-decoration: none; } .quest-list-card-v57 > span > i { position: absolute; right: 11px; bottom: 6px; left: 11px; height: 3px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--theme-border) 76%, transparent); } .quest-list-card-v57 > span > i s { display: block; height: 100%; border-radius: inherit; background: var(--quest-accent); text-decoration: none; } .quest-list-card-v57 > strong { align-self: start; padding-top: 3px; color: var(--quest-accent); font-size: 7px; white-space: nowrap; } .quest-list-card-v57.is-ready > strong { padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb, var(--quest-success) 12%, var(--theme-card)); color: var(--quest-success); } .quest-detail-shell-v57 { min-height: 0; overflow: hidden auto; background: var(--theme-card); scrollbar-width: thin; } .quest-detail-v57 { min-height: 100%; padding: 18px 20px 22px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--quest-accent) 9%, transparent), transparent 34%), var(--theme-card); } .quest-detail-back-v57 { display: none; } .quest-detail-v57 > header { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--theme-border); } .quest-detail-v57 > header > img { width: 48px; height: 48px; }.quest-detail-v57 > header > span { min-width: 0; } .quest-detail-v57 > header small { color: var(--quest-accent); font-size: 8px !important; font-weight: 950; letter-spacing: 1px; }.quest-detail-v57 > header h2 { margin: 4px 0 3px; font-size: 22px; line-height: 1.05; }.quest-detail-v57 > header em { color: var(--theme-muted); font-size: 9px; font-style: normal; font-weight: 750; } .quest-detail-v57 > header > strong { padding: 6px 9px; border-radius: 999px; background: color-mix(in srgb, var(--quest-accent) 9%, var(--theme-card)); color: var(--quest-accent); font-size: 7px; white-space: nowrap; }.quest-detail-v57 > header > strong.is-ready { background: color-mix(in srgb, var(--quest-success) 12%, var(--theme-card)); color: var(--quest-success); } .quest-detail-description-v57 { margin: 14px 0; color: var(--theme-muted); font-size: 11px; line-height: 1.55; } .quest-current-v57 { display: grid; gap: 5px; padding: 14px 15px; border: 1px solid color-mix(in srgb, var(--quest-accent) 30%, var(--theme-border)); border-radius: 15px; background: color-mix(in srgb, var(--quest-accent) 7%, var(--theme-surface-soft)); box-shadow: 3px 0 var(--quest-accent) inset; } .quest-current-v57 small { color: var(--quest-accent); font-size: 7px !important; font-weight: 950; letter-spacing: 1.1px; }.quest-current-v57 b { font-size: 14px; }.quest-current-v57 span { color: var(--theme-muted); font-size: 9px; font-weight: 800; }.quest-current-v57 span svg { width: 12px; height: 12px; vertical-align: -3px; }.quest-current-v57 em { color: #b46d13; font-size: 8px; font-style: normal; font-weight: 900; } .quest-season-progress-v57 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--quest-accent) 28%, var(--theme-border)); border-radius: 12px; background: color-mix(in srgb, var(--quest-accent) 7%, var(--theme-surface-soft)); } .quest-season-progress-v57 span small,.quest-season-progress-v57 span b { display: block; }.quest-season-progress-v57 span small { color: var(--quest-accent); font-size: 7px !important; font-weight: 950; letter-spacing: .7px; }.quest-season-progress-v57 span b { margin-top: 2px; font-size: 10px; }.quest-season-progress-v57 > strong { color: var(--quest-accent); font-size: 14px; } .quest-steps-v57, .quest-rewards-v57 { margin-top: 16px; } .quest-steps-v57 h3, .quest-rewards-v57 h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font-size: 11px; }.quest-steps-v57 h3 span { color: var(--theme-muted); font-size: 9px; } .quest-steps-v57 ol { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; } .quest-steps-v57 li { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 40px; padding: 7px 10px; border: 1px solid var(--theme-border); border-radius: 11px; background: var(--theme-surface-soft); color: var(--theme-muted); } .quest-steps-v57 li > i { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--theme-card); color: var(--theme-muted); font-style: normal; font-weight: 900; }.quest-steps-v57 li b { font-size: 9px; }.quest-steps-v57 li small { color: var(--theme-muted); font-size: 7px !important; } .quest-steps-v57 li.is-current { border-color: color-mix(in srgb, var(--quest-accent) 42%, var(--theme-border)); background: color-mix(in srgb, var(--quest-accent) 6%, var(--theme-surface-soft)); color: var(--theme-text); }.quest-steps-v57 li.is-current > i { background: color-mix(in srgb, var(--quest-accent) 14%, var(--theme-card)); color: var(--quest-accent); } .quest-steps-v57 li.is-done { color: var(--theme-text); }.quest-steps-v57 li.is-done > i { background: color-mix(in srgb, var(--quest-success) 14%, var(--theme-card)); color: var(--quest-success); } .quest-rewards-v57 p { margin: 0; padding: 11px 12px; border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-surface-soft); color: var(--theme-text); font-size: 9px; font-weight: 850; } .quest-detail-v57 > footer { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--theme-border); } .quest-detail-v57 > footer button { min-height: 42px; padding: 0 13px; border: 1px solid var(--theme-border); border-radius: 11px; background: var(--theme-card); color: var(--theme-text); font-size: 9px; font-weight: 900; cursor: pointer; }.quest-detail-v57 > footer button.is-primary { border-color: color-mix(in srgb, var(--quest-accent) 52%, var(--theme-border)); background: var(--quest-accent); color: #fff; }.quest-detail-v57 > footer button.is-danger { color: #d64747; } .quest-detail-empty-v57, .quest-list-empty-v57 { display: grid; place-items: center; align-content: center; gap: 7px; min-height: 220px; padding: 30px; color: var(--theme-muted); text-align: center; }.quest-detail-empty-v57 svg,.quest-list-empty-v57 svg { width: 36px; height: 36px; }.quest-detail-empty-v57 b,.quest-list-empty-v57 b { color: var(--theme-text); } /* World progress is a separate mode. */ .quest-journal-v57.mode-world { grid-template-rows: auto auto minmax(0, 1fr); } .quest-world-v57 { min-height: 0; padding: 12px; overflow: hidden auto; background: var(--theme-surface-soft); } .quest-world-summary-v57 { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 7px; } .quest-world-summary-v57 article { position: relative; min-height: 66px; padding: 10px 12px; overflow: hidden; border: 1px solid var(--theme-border); border-radius: 13px; background: var(--theme-card); }.quest-world-summary-v57 small { color: var(--theme-muted); font-size: 7px !important; font-weight: 900; }.quest-world-summary-v57 b { display: block; margin-top: 5px; font-size: 18px; }.quest-world-summary-v57 article > i { position: absolute; right: 10px; bottom: 8px; left: 10px; height: 3px; border-radius: 3px; background: var(--theme-border); }.quest-world-summary-v57 article > i u { display: block; height: 100%; border-radius: inherit; background: var(--theme-accent); } .quest-world-v57 > header { display: flex; justify-content: space-between; gap: 12px; margin: 18px 2px 8px; }.quest-world-v57 > header small { color: var(--theme-accent); font-size: 7px !important; font-weight: 950; letter-spacing: 1px; }.quest-world-v57 > header h3 { margin: 3px 0 0; font-size: 16px; }.quest-world-v57 > header em { align-self: end; color: var(--theme-muted); font-size: 8px; font-style: normal; } .quest-world-grid-v57 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }.quest-world-card-v57 { display: grid; grid-template-columns: 33px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 70px; padding: 9px 11px; border: 1px solid var(--theme-border); border-radius: 13px; background: var(--theme-card); }.quest-world-card-v57 > i { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: color-mix(in srgb, var(--theme-accent) 10%, var(--theme-surface-soft)); color: var(--theme-accent); }.quest-world-card-v57 svg { width: 16px; height: 16px; }.quest-world-card-v57 b,.quest-world-card-v57 small { display: block; }.quest-world-card-v57 b { font-size: 10px; }.quest-world-card-v57 small { display: -webkit-box; margin-top: 3px; overflow: hidden; color: var(--theme-muted); font-size: 7px !important; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.quest-world-card-v57 > strong { color: var(--theme-accent); font-size: 6.5px; }.quest-world-card-v57.is-locked { opacity: .55; filter: saturate(.5); }.quest-world-card-v57.is-locked > strong { color: var(--theme-muted); } /* Confirmation and event feedback. */ .quest-abandon-confirm-v57 { position: absolute; z-index: 15; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(7, 29, 43, .42); backdrop-filter: blur(5px); }.quest-abandon-confirm-v57 > section { width: min(390px, 100%); padding: 22px; border: 1px solid var(--theme-border); border-radius: 20px; background: var(--theme-card); box-shadow: 0 24px 60px rgba(2,24,38,.34); text-align: center; }.quest-abandon-confirm-v57 img { width: 46px; height: 46px; }.quest-abandon-confirm-v57 small { display: block; margin-top: 8px; color: var(--quest-blue); font-size: 8px !important; font-weight: 950; letter-spacing: 1px; }.quest-abandon-confirm-v57 h3 { margin: 5px 0 8px; font-size: 19px; }.quest-abandon-confirm-v57 p { margin: 0; color: var(--theme-muted); font-size: 10px; line-height: 1.5; }.quest-abandon-confirm-v57 div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 17px; }.quest-abandon-confirm-v57 button { min-height: 44px; border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-surface-soft); color: var(--theme-text); font-size: 9px; font-weight: 900; }.quest-abandon-confirm-v57 button.is-danger { border-color: #e06a6a; background: #d94d4d; color: #fff; } .quest-announcement-v57 { position: absolute; z-index: 80; top: 18%; left: 50%; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px; width: min(360px, calc(100vw - 28px)); padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--quest-accent) 48%, rgba(255,255,255,.8)); border-radius: 17px; background: color-mix(in srgb, var(--ui-glass-strong, #fff) 96%, transparent); box-shadow: 0 20px 50px rgba(1,28,46,.3), 4px 0 var(--quest-accent) inset; color: var(--theme-text); opacity: 0; transform: translate(-50%, -18px) scale(.96); transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1); pointer-events: none; backdrop-filter: blur(16px); }.quest-announcement-v57.is-open { opacity: 1; transform: translate(-50%, 0) scale(1); }.quest-announcement-v57 img { width: 46px; height: 46px; }.quest-announcement-v57 small,.quest-announcement-v57 b,.quest-announcement-v57 em { display: block; }.quest-announcement-v57 small { color: var(--quest-accent); font-size: 7px !important; font-weight: 950; letter-spacing: 1.2px; }.quest-announcement-v57 b { margin-top: 3px; font-size: 14px; }.quest-announcement-v57 em { margin-top: 3px; color: var(--theme-muted); font-size: 8px; font-style: normal; font-weight: 850; } .quest-offer-v57 { position: absolute; z-index: 85; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(5,27,42,.34); opacity: 0; transition: opacity .18s ease; pointer-events: none; backdrop-filter: blur(4px); }.quest-offer-v57.is-open { opacity: 1; pointer-events: auto; }.quest-offer-v57 > section { width: min(430px, 100%); padding: 18px; border: 1px solid color-mix(in srgb, var(--quest-accent) 38%, rgba(255,255,255,.7)); border-radius: 21px; background: var(--theme-card); box-shadow: 0 28px 70px rgba(2,26,42,.38), 4px 0 var(--quest-accent) inset; transform: translateY(10px) scale(.98); transition: transform .22s ease; }.quest-offer-v57.is-open > section { transform: translateY(0) scale(1); }.quest-offer-v57 header { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 12px; align-items: center; }.quest-offer-v57 header img { width: 52px; height: 52px; }.quest-offer-v57 header small { color: var(--quest-accent); font-size: 8px !important; font-weight: 950; letter-spacing: 1px; }.quest-offer-v57 header h2 { margin: 3px 0; font-size: 20px; }.quest-offer-v57 header em { color: var(--theme-muted); font-size: 8px; font-style: normal; font-weight: 800; }.quest-offer-v57 > section > p { margin: 14px 0; color: var(--theme-muted); font-size: 10px; line-height: 1.5; }.quest-offer-v57 article { display: grid; gap: 4px; padding: 12px; border: 1px solid color-mix(in srgb, var(--quest-accent) 28%, var(--theme-border)); border-radius: 13px; background: color-mix(in srgb, var(--quest-accent) 7%, var(--theme-surface-soft)); }.quest-offer-v57 article small,.quest-offer-v57 footer small { color: var(--quest-accent); font-size: 7px !important; font-weight: 950; letter-spacing: .9px; }.quest-offer-v57 article b { font-size: 12px; }.quest-offer-v57 footer { display: grid; gap: 14px; margin-top: 15px; }.quest-offer-v57 footer > span b { display: block; margin-top: 3px; font-size: 9px; }.quest-offer-v57 footer > div { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; }.quest-offer-v57 button { min-height: 45px; border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-surface-soft); color: var(--theme-text); font-size: 9px; font-weight: 900; cursor: pointer; }.quest-offer-v57 button.is-primary { border-color: var(--quest-accent); background: var(--quest-accent); color: #fff; } @media (max-width: 1366px) and (min-width: 801px) { .game-screen .side-panel.is-quest-panel { width: min(1000px, calc(100vw - 54px)) !important; height: min(730px, calc(100dvh - 24px)) !important; } .quest-journal-body-v57 { grid-template-columns: minmax(290px, .76fr) minmax(390px, 1.12fr); } .quest-detail-v57 { padding: 15px 16px 18px; } .game-screen .quest-widget { top: 214px !important; width: 320px !important; max-height: 310px !important; } } @media (max-width: 800px) { .game-screen .quest-widget, .game-screen .quest-widget.is-collapsed { top: max(106px, calc(env(safe-area-inset-top) + 100px)) !important; right: max(7px, env(safe-area-inset-right)) !important; left: max(7px, env(safe-area-inset-left)) !important; display: block !important; width: auto !important; max-height: 92px !important; padding: 0 !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--quest-accent) 30%, var(--theme-border)) !important; border-radius: 16px !important; background: color-mix(in srgb, var(--ui-glass-strong) 97%, transparent) !important; box-shadow: 0 10px 25px rgba(3,27,39,.2) !important; } .game-screen .quest-widget > * { display: initial !important; } .game-screen .quest-widget .quest-tracker-head-v57 { display: none !important; } .game-screen .quest-widget .quest-tracker-list-v57 { display: block !important; max-height: none; overflow: visible; } .game-screen .quest-widget .quest-tracker-row-v57 { display: none !important; } .game-screen .quest-widget .quest-tracker-row-v57.is-primary { display: grid !important; min-height: 76px; padding: 8px 38px 10px 9px; border: 0; } .game-screen .quest-widget .quest-tracker-row-v57.is-primary > .quest-hud-more-v57 { display: grid; place-items: center; } .quest-tracker-row-v57.is-primary > img { width: 30px; height: 30px; } .quest-tracker-row-v57 small { font-size: 6px !important; }.quest-tracker-row-v57 b { font-size: 11px !important; }.quest-tracker-row-v57 em { font-size: 8px; }.quest-tracker-row-v57 u { font-size: 7px; } .game-screen .quest-widget.is-hud-expanded { max-height: min(310px, calc(100dvh - 210px)) !important; overflow: hidden auto !important; } .game-screen .quest-widget.is-hud-expanded .quest-tracker-head-v57 { display: flex !important; min-height: 38px; } .game-screen .quest-widget.is-hud-expanded .quest-tracker-row-v57 { display: grid !important; } .game-screen .quest-widget.is-hud-expanded .quest-tracker-row-v57:not(.is-primary) { min-height: 58px; } .game-screen .quest-widget.is-collapsed .quest-tracker-list-v57 { display: block !important; } .game-screen .quest-widget.is-collapsed .quest-tracker-row-v57.is-primary { display: grid !important; } .game-screen .side-panel.is-quest-panel { top: max(38px, env(safe-area-inset-top)) !important; right: max(5px, env(safe-area-inset-right)) !important; bottom: calc(76px + env(safe-area-inset-bottom)) !important; left: max(5px, env(safe-area-inset-left)) !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; border-radius: 21px !important; } .game-screen .side-panel.is-quest-panel > .panel-close { top: 8px; right: 8px; width: 42px; height: 42px; } .quest-journal-v57 { grid-template-rows: auto auto auto auto minmax(0, 1fr); } .quest-journal-head-v57 { position: sticky; z-index: 4; top: 0; min-height: 64px; padding: 9px 52px 9px 12px; cursor: default; } .quest-journal-head-v57 > span > svg { width: 36px; height: 36px; padding: 8px; }.quest-journal-head-v57 small { font-size: 6.5px !important; }.quest-journal-head-v57 h2 { font-size: 20px; }.quest-journal-head-v57 > div { display: none; } .quest-mode-tabs-v57 { padding: 7px 8px 0; }.quest-mode-tabs-v57 button { flex: 1; min-height: 44px; padding: 0 8px; } .quest-type-tabs-v57 { justify-content: flex-start; padding: 7px 8px; scroll-snap-type: x proximity; }.quest-type-tabs-v57 button { flex: 0 0 auto; grid-template-columns: 24px auto 20px; min-height: 44px; scroll-snap-align: start; } .quest-status-tabs-v57 { padding: 0 8px 7px; overflow-x: auto; scrollbar-width: none; }.quest-status-tabs-v57 button { flex: 0 0 auto; min-height: 40px; } .quest-journal-body-v57 { position: relative; display: block; min-height: 0; overflow: hidden; } .quest-list-v57 { height: 100%; padding: 8px; overflow: hidden auto; border-right: 0; } .quest-list-card-v57 { min-height: 92px; padding: 9px 10px 12px; touch-action: manipulation; } .quest-detail-shell-v57 { position: absolute; z-index: 6; inset: 0; overflow: hidden auto; background: var(--theme-card); opacity: 0; transform: translateX(105%); transition: transform .24s ease, opacity .2s ease; pointer-events: none; } .quest-journal-v57.is-mobile-detail-open .quest-detail-shell-v57 { opacity: 1; transform: translateX(0); pointer-events: auto; } .quest-detail-v57 { min-height: 100%; padding: 10px 12px 22px; } .quest-detail-back-v57 { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 7px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--theme-surface-soft); color: var(--theme-text); font-size: 9px; font-weight: 900; } .quest-detail-v57 > header { grid-template-columns: 43px minmax(0, 1fr); gap: 9px; }.quest-detail-v57 > header > img { width: 43px; height: 43px; }.quest-detail-v57 > header > strong { grid-column: 1 / -1; justify-self: start; }.quest-detail-v57 > header h2 { font-size: 19px; } .quest-current-v57 { padding: 12px; }.quest-current-v57 b { font-size: 12px; } .quest-detail-v57 > footer { position: sticky; bottom: 0; margin-inline: -12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--theme-card) 95%, transparent); backdrop-filter: blur(12px); }.quest-detail-v57 > footer button { flex: 1 1 130px; min-height: 46px; } .quest-world-v57 { padding: 8px; }.quest-world-summary-v57 { grid-template-columns: repeat(2, minmax(0, 1fr)); }.quest-world-v57 > header { display: block; }.quest-world-v57 > header em { display: block; margin-top: 4px; }.quest-world-grid-v57 { grid-template-columns: 1fr; }.quest-world-card-v57 { min-height: 76px; } .quest-abandon-confirm-v57 { position: fixed; padding: 14px; }.quest-abandon-confirm-v57 > section { padding: 19px 15px; }.quest-abandon-confirm-v57 button { min-height: 48px; } .quest-announcement-v57 { top: max(84px, calc(env(safe-area-inset-top) + 78px)); width: min(350px, calc(100vw - 20px)); } .quest-offer-v57 { padding: 12px; }.quest-offer-v57 > section { padding: 16px 14px; }.quest-offer-v57 button { min-height: 48px; } } @media (max-width: 430px) { .game-screen .quest-widget { top: max(101px, calc(env(safe-area-inset-top) + 95px)) !important; } .quest-tracker-row-v57.is-primary { grid-template-columns: 28px minmax(0, 1fr) auto; } .quest-tracker-row-v57.is-primary u { display: none; } .quest-type-tabs-v57 button { padding-inline: 8px; }.quest-type-tabs-v57 button span { font-size: 8px; } .quest-list-card-v57 { grid-template-columns: 31px minmax(0, 1fr) auto; }.quest-list-card-v57 > img { width: 31px; height: 31px; }.quest-list-card-v57 b { font-size: 11.5px; } .quest-world-summary-v57 article { min-height: 62px; }.quest-world-summary-v57 b { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .quest-announcement-v57, .quest-detail-shell-v57 { transition: none; } .world-minimap-quest-marker > i { animation: none; } } /* pk-style-source:41 */ /* /quests-v59.css */ /* Quest journal v59 — visual branches, spoiler-safe nodes and responsive detail view. */ .quest-journal-branches-v59 .quest-journal-body-v57 { grid-template-columns: minmax(360px, .92fr) minmax(500px, 1.48fr); background: var(--theme-surface-soft); } .quest-branch-list-v59 { min-height: 0; padding: 12px; overflow: hidden auto; border-right: 1px solid var(--theme-border); background: radial-gradient(circle at 15% 0, color-mix(in srgb, var(--theme-accent) 8%, transparent), transparent 28%), color-mix(in srgb, var(--theme-surface-soft) 88%, var(--theme-card)); scrollbar-width: thin; } .quest-branch-card-v59 { --quest-accent: var(--theme-accent); position: relative; margin: 0 0 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--quest-accent) 22%, var(--theme-border)); border-radius: 19px; background: var(--theme-card); box-shadow: 0 12px 28px rgba(4, 33, 49, .08), 0 1px var(--ui-highlight) inset; } .quest-branch-card-v59 > header { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; min-height: 112px; padding: 17px 18px 16px; overflow: hidden; color: #fff; background-image: linear-gradient(90deg, rgba(7, 29, 43, .88) 0%, rgba(7, 29, 43, .69) 58%, rgba(7, 29, 43, .28) 100%), var(--quest-art); background-position: center; background-size: cover; } .quest-branch-card-v59 > header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 46%, rgba(2,20,31,.16)); pointer-events: none; } .quest-branch-card-v59 > header > span, .quest-branch-card-v59 > header > strong, .quest-branch-card-v59 > header > i { position: relative; z-index: 1; } .quest-branch-card-v59 > header > span { min-width: 0; align-self: end; } .quest-branch-card-v59 > header small, .quest-branch-card-v59 > header b, .quest-branch-card-v59 > header em { display: block; } .quest-branch-card-v59 > header small { color: color-mix(in srgb, var(--quest-accent) 54%, #fff); font-size: 7px !important; font-weight: 950; letter-spacing: 1.05px; } .quest-branch-card-v59 > header b { margin-top: 5px; overflow: hidden; font-size: 18px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 9px rgba(0,0,0,.32); } .quest-branch-card-v59 > header em { margin-top: 5px; overflow: hidden; color: rgba(255,255,255,.78); font-size: 8px; font-style: normal; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .quest-branch-card-v59 > header > strong { align-self: start; min-width: 46px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(5,24,35,.5); font-size: 10px; text-align: center; backdrop-filter: blur(8px); } .quest-branch-card-v59 > header > i { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.2); } .quest-branch-card-v59 > header > i u { display: block; height: 100%; border-radius: inherit; background: var(--quest-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--quest-accent) 72%, transparent); } .quest-branch-track-v59 { position: relative; padding: 10px 10px 8px; } .quest-branch-track-v59::before { content: ''; position: absolute; top: 28px; bottom: 28px; left: 31px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--quest-accent) 22%, var(--theme-border)); } .quest-branch-node-v59 { position: relative; z-index: 1; display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 10px; width: 100%; min-height: 76px; padding: 8px 10px 8px 0; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--theme-text); text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; } .quest-branch-node-v59 + .quest-branch-node-v59 { margin-top: 2px; } .quest-branch-node-v59:hover:not(:disabled) { border-color: color-mix(in srgb, var(--quest-accent) 28%, var(--theme-border)); background: color-mix(in srgb, var(--quest-accent) 5%, var(--theme-surface-soft)); transform: translateX(2px); } .quest-branch-node-v59.is-selected { border-color: color-mix(in srgb, var(--quest-accent) 48%, var(--theme-border)); background: color-mix(in srgb, var(--quest-accent) 8%, var(--theme-surface-soft)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--quest-accent) 8%, transparent) inset; } .quest-branch-node-v59.is-current:not(.is-selected) { background: color-mix(in srgb, var(--quest-accent) 4%, var(--theme-surface-soft)); } .quest-branch-node-v59 > i { display: grid; place-items: center; width: 34px; height: 34px; margin-left: 4px; border: 3px solid var(--theme-card); border-radius: 50%; background: color-mix(in srgb, var(--quest-accent) 15%, var(--theme-surface-soft)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--quest-accent) 40%, var(--theme-border)); color: var(--quest-accent); font-size: 9px; font-style: normal; font-weight: 950; } .quest-branch-node-v59 > i svg { width: 15px; height: 15px; } .quest-branch-node-v59.is-completed > i { background: color-mix(in srgb, var(--quest-success) 15%, var(--theme-card)); color: var(--quest-success); box-shadow: 0 0 0 1px color-mix(in srgb, var(--quest-success) 50%, var(--theme-border)); } .quest-branch-node-v59 > span { min-width: 0; } .quest-branch-node-v59 small, .quest-branch-node-v59 b, .quest-branch-node-v59 em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quest-branch-node-v59 small { color: var(--quest-accent); font-size: 6.5px !important; font-weight: 950; letter-spacing: .85px; } .quest-branch-node-v59 b { margin-top: 4px; font-size: 12px; line-height: 1.1; } .quest-branch-node-v59 em { margin-top: 4px; color: var(--theme-muted); font-size: 8px; font-style: normal; font-weight: 750; } .quest-branch-node-v59 > strong { color: var(--quest-accent); font-size: 13px; text-align: center; } .quest-branch-node-v59.is-hidden { cursor: default; opacity: .62; filter: saturate(.45); } .quest-branch-node-v59.is-hidden > i { background: var(--theme-surface-soft); color: var(--theme-muted); box-shadow: 0 0 0 1px var(--theme-border); } .quest-branch-node-v59.is-hidden small, .quest-branch-node-v59.is-hidden > strong { color: var(--theme-muted); } .quest-branch-node-v59.is-hidden b { letter-spacing: .2px; } .quest-branch-card-v59 > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 37px; padding: 7px 13px; border-top: 1px solid var(--theme-border); background: var(--theme-surface-soft); color: var(--theme-muted); } .quest-branch-card-v59 > footer span { overflow: hidden; font-size: 7px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; } .quest-branch-card-v59 > footer b { color: var(--quest-accent); font-size: 8px; } .quest-detail-v59 { --quest-accent: var(--theme-accent); min-height: 100%; padding: 14px 16px 22px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--quest-accent) 8%, transparent), transparent 30%), var(--theme-card); } .quest-detail-hero-v59 { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 188px; padding: 20px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--quest-accent) 26%, var(--theme-border)); border-radius: 19px; color: #fff; background-image: linear-gradient(90deg, rgba(4,23,35,.9) 0%, rgba(4,23,35,.64) 57%, rgba(4,23,35,.24) 100%), linear-gradient(0deg, rgba(4,23,35,.7), transparent 70%), var(--quest-art); background-position: center; background-size: cover; box-shadow: 0 16px 34px rgba(2,25,38,.16); } .quest-detail-hero-v59::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 1px rgba(255,255,255,.23) inset; pointer-events: none; } .quest-detail-hero-v59 > span, .quest-detail-hero-v59 > strong { position: relative; z-index: 1; } .quest-detail-hero-v59 > span { min-width: 0; max-width: 80%; } .quest-detail-hero-v59 small, .quest-detail-hero-v59 h2, .quest-detail-hero-v59 em { display: block; } .quest-detail-hero-v59 small { color: color-mix(in srgb, var(--quest-accent) 52%, #fff); font-size: 7px !important; font-weight: 950; letter-spacing: 1.05px; } .quest-detail-hero-v59 h2 { margin: 7px 0 5px; font-size: clamp(22px, 2.5vw, 31px); line-height: 1.02; letter-spacing: -.6px; text-shadow: 0 3px 12px rgba(0,0,0,.34); } .quest-detail-hero-v59 em { color: rgba(255,255,255,.78); font-size: 9px; font-style: normal; font-weight: 800; } .quest-detail-hero-v59 > strong { align-self: flex-start; padding: 7px 10px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(3,23,34,.5); font-size: 7px; white-space: nowrap; backdrop-filter: blur(8px); } .quest-detail-hero-v59 > strong.is-ready { border-color: rgba(121,237,181,.5); color: #93f0c0; } .quest-branch-progress-v59 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; margin: 11px 0 0; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--quest-accent) 24%, var(--theme-border)); border-radius: 14px; background: color-mix(in srgb, var(--quest-accent) 6%, var(--theme-surface-soft)); } .quest-branch-progress-v59 small, .quest-branch-progress-v59 b { display: block; } .quest-branch-progress-v59 small { color: var(--quest-accent); font-size: 6.5px !important; font-weight: 950; letter-spacing: .9px; } .quest-branch-progress-v59 b { margin-top: 3px; font-size: 10px; } .quest-branch-progress-v59 > strong { align-self: center; color: var(--quest-accent); font-size: 14px; } .quest-branch-progress-v59 > i { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 99px; background: var(--theme-border); } .quest-branch-progress-v59 > i u { display: block; height: 100%; border-radius: inherit; background: var(--quest-accent); } .quest-detail-description-v59 { margin: 13px 2px; color: var(--theme-muted); font-size: 10px; line-height: 1.55; } .quest-current-v59 { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; padding: 13px; border: 1px solid color-mix(in srgb, var(--quest-accent) 34%, var(--theme-border)); border-radius: 15px; background: color-mix(in srgb, var(--quest-accent) 7%, var(--theme-surface-soft)); box-shadow: 3px 0 var(--quest-accent) inset; } .quest-current-v59 > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--quest-accent); color: #fff; font-size: 18px; font-style: normal; font-weight: 950; box-shadow: 0 7px 16px color-mix(in srgb, var(--quest-accent) 25%, transparent); } .quest-current-v59 small, .quest-current-v59 b, .quest-current-v59 em, .quest-current-v59 u { display: block; } .quest-current-v59 small { color: var(--quest-accent); font-size: 6.5px !important; font-weight: 950; letter-spacing: 1px; } .quest-current-v59 b { margin-top: 4px; font-size: 13px; line-height: 1.25; } .quest-current-v59 em { margin-top: 5px; color: var(--theme-muted); font-size: 8px; font-style: normal; font-weight: 800; } .quest-current-v59 em svg { width: 12px; height: 12px; vertical-align: -3px; } .quest-current-v59 u { margin-top: 4px; color: #b46d13; font-size: 7px; font-weight: 900; text-decoration: none; } .quest-steps-v59, .quest-rewards-v59 { margin-top: 17px; } .quest-steps-v59 > header, .quest-rewards-v59 > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 8px; } .quest-steps-v59 h3, .quest-rewards-v59 h3 { margin: 0; font-size: 11px; } .quest-steps-v59 > header span, .quest-rewards-v59 > header span { color: var(--quest-accent); font-size: 7px; font-weight: 900; } .quest-rewards-v59 > header span.is-mystery { color: var(--theme-muted); } .quest-steps-v59 ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; } .quest-steps-v59 li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 62px; padding: 8px 9px; border: 1px solid var(--theme-border); border-radius: 13px; background: var(--theme-surface-soft); color: var(--theme-muted); } .quest-steps-v59 li > i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--theme-card); color: var(--theme-muted); font-size: 8px; font-style: normal; font-weight: 950; } .quest-steps-v59 li b, .quest-steps-v59 li small { display: block; } .quest-steps-v59 li b { font-size: 8px; line-height: 1.3; } .quest-steps-v59 li small { margin-top: 3px; color: var(--theme-muted); font-size: 6.5px !important; } .quest-steps-v59 li.is-current { border-color: color-mix(in srgb, var(--quest-accent) 42%, var(--theme-border)); background: color-mix(in srgb, var(--quest-accent) 6%, var(--theme-surface-soft)); color: var(--theme-text); } .quest-steps-v59 li.is-current > i { background: color-mix(in srgb, var(--quest-accent) 14%, var(--theme-card)); color: var(--quest-accent); } .quest-steps-v59 li.is-done { color: var(--theme-text); } .quest-steps-v59 li.is-done > i { background: color-mix(in srgb, var(--quest-success) 14%, var(--theme-card)); color: var(--quest-success); } .quest-rewards-v59 > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 7px; } .quest-rewards-v59 article { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 58px; padding: 8px 10px; border: 1px solid var(--theme-border); border-radius: 13px; background: var(--theme-surface-soft); } .quest-rewards-v59 article > i { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: color-mix(in srgb, var(--quest-accent) 11%, var(--theme-card)); color: var(--quest-accent); font-size: 17px; font-style: normal; } .quest-rewards-v59 article > i svg { width: 15px; height: 15px; } .quest-rewards-v59 article small, .quest-rewards-v59 article b { display: block; } .quest-rewards-v59 article small { color: var(--quest-accent); font-size: 6px !important; font-weight: 950; letter-spacing: .8px; } .quest-rewards-v59 article b { margin-top: 3px; font-size: 8px; line-height: 1.25; } .quest-rewards-v59 article.is-mystery { border-style: dashed; filter: saturate(.4); } .quest-rewards-v59 article.is-mystery small, .quest-rewards-v59 article.is-mystery > i { color: var(--theme-muted); } .quest-detail-actions-v59 { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--theme-border); } .quest-detail-actions-v59 button { min-height: 44px; padding: 0 14px; border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-card); color: var(--theme-text); font-size: 8px; font-weight: 950; cursor: pointer; } .quest-detail-actions-v59 button svg { width: 14px; height: 14px; vertical-align: -3px; } .quest-detail-actions-v59 button.is-primary { border-color: color-mix(in srgb, var(--quest-accent) 55%, var(--theme-border)); background: var(--quest-accent); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--quest-accent) 22%, transparent); } .quest-detail-actions-v59 button.is-danger { color: #d64747; } .quest-detail-empty-v59 { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 100%; padding: 32px; color: var(--theme-muted); text-align: center; } .quest-detail-empty-v59 svg { width: 42px; height: 42px; color: var(--theme-accent); opacity: .65; } .quest-detail-empty-v59 b { color: var(--theme-text); font-size: 14px; } .quest-detail-empty-v59 p { max-width: 360px; margin: 0; font-size: 9px; line-height: 1.5; } @media (max-width: 1366px) and (min-width: 801px) { .quest-journal-branches-v59 .quest-journal-body-v57 { grid-template-columns: minmax(330px, .9fr) minmax(450px, 1.35fr); } .quest-detail-v59 { padding: 11px 13px 18px; } .quest-detail-hero-v59 { min-height: 160px; padding: 17px; } .quest-branch-card-v59 > header { min-height: 98px; } .quest-branch-node-v59 { min-height: 70px; } } @media (max-width: 800px) { .quest-branch-list-v59 { height: 100%; padding: 8px; overflow: hidden auto; border-right: 0; } .quest-branch-card-v59 { margin-bottom: 9px; border-radius: 17px; } .quest-branch-card-v59 > header { min-height: 101px; padding: 14px; } .quest-branch-card-v59 > header b { font-size: 17px; } .quest-branch-track-v59 { padding: 7px; } .quest-branch-track-v59::before { left: 27px; } .quest-branch-node-v59 { grid-template-columns: 38px minmax(0, 1fr) 18px; min-height: 76px; padding-right: 7px; touch-action: manipulation; } .quest-branch-node-v59 > i { width: 32px; height: 32px; margin-left: 3px; } .quest-branch-node-v59 b { font-size: 11.5px; } .quest-branch-node-v59 em { font-size: 7.5px; } .quest-detail-v59 { min-height: 100%; padding: 8px 9px 22px; } .quest-detail-v59 > .quest-detail-back-v57 { position: sticky; z-index: 4; top: 0; display: inline-flex; margin: 0 0 7px; } .quest-detail-hero-v59 { min-height: 156px; padding: 15px; border-radius: 16px; } .quest-detail-hero-v59 > span { max-width: 78%; } .quest-detail-hero-v59 h2 { font-size: 22px; } .quest-detail-hero-v59 > strong { padding: 6px 8px; } .quest-current-v59 { grid-template-columns: 38px minmax(0, 1fr); padding: 11px; } .quest-current-v59 > i { width: 34px; height: 34px; } .quest-current-v59 b { font-size: 11.5px; } .quest-steps-v59 ol { grid-template-columns: 1fr; } .quest-steps-v59 li { min-height: 57px; } .quest-rewards-v59 > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quest-detail-actions-v59 { position: sticky; bottom: 0; z-index: 3; margin-inline: -9px; padding: 9px 9px calc(9px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--theme-card) 95%, transparent); backdrop-filter: blur(13px); } .quest-detail-actions-v59 button { flex: 1 1 130px; min-height: 48px; } } @media (max-width: 430px) { .quest-branch-card-v59 > header { min-height: 92px; } .quest-branch-card-v59 > header em { max-width: 245px; } .quest-branch-node-v59 { min-height: 72px; } .quest-branch-node-v59 small { font-size: 6px !important; } .quest-detail-hero-v59 { min-height: 144px; padding: 13px; } .quest-detail-hero-v59 h2 { font-size: 20px; } .quest-branch-progress-v59 { padding: 9px 10px; } .quest-rewards-v59 > div { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .quest-branch-node-v59 { transition: none; } } /* pk-style-source:42 */ /* /quests-v61.css */ /* Quest journal v61 — readable hierarchy, distinctive icons and stable empty states. */ .quest-journal-polish-v61, .game-screen .quest-widget { font-family: var(--ui-font, "Onest PokePark", "Segoe UI", system-ui, sans-serif); } .quest-control-icon-v61, .quest-reward-icon-v61 { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.25em; } .quest-type-graphic-v61 { display: block; flex: 0 0 auto; object-fit: contain; } .game-screen .side-panel.is-quest-panel { width: min(1360px, calc(100vw - 56px)) !important; height: min(870px, calc(100dvh - 28px)) !important; } .quest-journal-polish-v61 { grid-template-rows: auto auto auto auto minmax(0, 1fr); } .quest-journal-polish-v61 .quest-journal-head-v57 { min-height: 86px; padding: 15px 70px 14px 20px; background: radial-gradient(circle at 18% 0, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent 32%), var(--theme-surface-soft); } .quest-journal-polish-v61 .quest-journal-head-v57 > span { gap: 14px; } .quest-journal-polish-v61 .quest-journal-head-v57 > span > .quest-type-graphic-v61 { width: 48px; height: 48px; } .quest-journal-polish-v61 .quest-journal-head-v57 small { font-size: 10px !important; letter-spacing: 1.15px; } .quest-journal-polish-v61 .quest-journal-head-v57 h2 { margin-top: 4px; font-size: 30px; letter-spacing: -.75px; } .quest-journal-polish-v61 .quest-journal-head-v57 > div { min-width: 285px; padding: 11px 15px; border-radius: 15px; } .quest-journal-polish-v61 .quest-journal-head-v57 > div small { font-size: 9px !important; } .quest-journal-polish-v61 .quest-journal-head-v57 > div b { margin-top: 4px; font-size: 13px; } .quest-journal-polish-v61 .quest-mode-tabs-v57 { gap: 8px; padding: 10px 16px 0; } .quest-journal-polish-v61 .quest-mode-tabs-v57 button { min-height: 48px; padding: 0 18px; border-radius: 14px; font-size: 12px; } .quest-journal-polish-v61 .quest-mode-tabs-v57 .quest-type-graphic-v61, .quest-journal-polish-v61 .quest-mode-tabs-v57 .quest-control-icon-v61 { width: 22px; height: 22px; } .quest-journal-polish-v61 .quest-type-tabs-v57 { display: grid; grid-template-columns: .9fr 1.22fr 1fr 1fr .9fr; gap: 8px; padding: 11px 16px 9px; overflow: visible; } .quest-journal-polish-v61 .quest-type-tabs-v57 button { grid-template-columns: 38px minmax(0, 1fr) 26px; justify-content: stretch; gap: 9px; min-width: 0; min-height: 60px; padding: 7px 10px; border-radius: 15px; text-align: left; } .quest-journal-polish-v61 .quest-type-tabs-v57 button > .quest-type-graphic-v61 { width: 38px; height: 38px; } .quest-journal-polish-v61 .quest-type-tabs-v57 button > span { display: block; min-width: 0; } .quest-journal-polish-v61 .quest-type-tabs-v57 button > span small, .quest-journal-polish-v61 .quest-type-tabs-v57 button > span b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quest-journal-polish-v61 .quest-type-tabs-v57 button > span small { color: color-mix(in srgb, var(--quest-accent) 76%, var(--theme-muted)); font-size: 7.5px !important; font-weight: 900; letter-spacing: .65px; } .quest-journal-polish-v61 .quest-type-tabs-v57 button > span b { margin-top: 3px; font-size: 12px; } .quest-journal-polish-v61 .quest-type-tabs-v57 button > i { min-width: 25px; height: 25px; font-size: 9px; } .quest-journal-polish-v61 .quest-type-tabs-v57 button.is-core { border-color: color-mix(in srgb, var(--quest-gold) 54%, var(--theme-border)); background: linear-gradient(135deg, color-mix(in srgb, var(--quest-gold) 13%, var(--theme-card)), var(--theme-card)); box-shadow: 0 6px 16px color-mix(in srgb, var(--quest-gold) 10%, transparent); } .quest-journal-polish-v61 .quest-type-tabs-v57 button.is-core > span b { color: #b9740c; } .quest-journal-polish-v61 .quest-status-tabs-v57 { gap: 7px; padding: 0 16px 11px; } .quest-journal-polish-v61 .quest-status-tabs-v57 button { min-height: 40px; padding: 0 14px; font-size: 11px; } .quest-journal-polish-v61 .quest-status-tabs-v57 button i { min-width: 23px; height: 22px; font-size: 9px; } .quest-journal-polish-v61 .quest-journal-body-v57 { grid-template-columns: minmax(405px, .92fr) minmax(520px, 1.45fr); } .quest-journal-polish-v61 .quest-branch-list-v59 { padding: 14px; } .quest-journal-polish-v61 .quest-branch-card-v59 { margin-bottom: 14px; border-radius: 21px; } .quest-journal-polish-v61 .quest-branch-card-v59.is-core-branch { border-color: color-mix(in srgb, var(--quest-gold) 50%, var(--theme-border)); box-shadow: 0 14px 32px rgba(4,33,49,.1), 0 0 0 2px color-mix(in srgb, var(--quest-gold) 7%, transparent) inset; } .quest-journal-polish-v61 .quest-branch-card-v59 > header { min-height: 128px; padding: 19px 20px 17px; } .quest-journal-polish-v61 .quest-branch-title-v61 { display: flex; align-items: flex-end; gap: 12px; } .quest-journal-polish-v61 .quest-branch-title-v61 > .quest-type-graphic-v61 { width: 44px; height: 44px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)); } .quest-journal-polish-v61 .quest-branch-title-v61 > span { min-width: 0; } .quest-journal-polish-v61 .quest-branch-card-v59 > header small { font-size: 9px !important; } .quest-journal-polish-v61 .quest-branch-card-v59 > header b { margin-top: 6px; font-size: 21px; } .quest-journal-polish-v61 .quest-branch-card-v59 > header em { margin-top: 6px; font-size: 11px; } .quest-journal-polish-v61 .quest-branch-card-v59 > header > strong { min-width: 54px; padding: 8px 11px; font-size: 12px; } .quest-journal-polish-v61 .quest-branch-track-v59 { padding: 12px 11px 10px; } .quest-journal-polish-v61 .quest-branch-track-v59::before { top: 31px; bottom: 31px; left: 34px; } .quest-journal-polish-v61 .quest-branch-node-v59 { grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 11px; min-height: 84px; padding: 9px 11px 9px 0; } .quest-journal-polish-v61 .quest-branch-node-v59 > i { width: 38px; height: 38px; } .quest-journal-polish-v61 .quest-branch-node-v59 small { font-size: 8px !important; } .quest-journal-polish-v61 .quest-branch-node-v59 b { margin-top: 5px; font-size: 14px; } .quest-journal-polish-v61 .quest-branch-node-v59 em { margin-top: 5px; font-size: 10px; } .quest-journal-polish-v61 .quest-branch-card-v59 > footer { min-height: 42px; padding: 8px 15px; } .quest-journal-polish-v61 .quest-branch-card-v59 > footer span, .quest-journal-polish-v61 .quest-branch-card-v59 > footer b { font-size: 9px; } .quest-journal-polish-v61 .quest-detail-v59 { padding: 16px 19px 24px; } .quest-journal-polish-v61 .quest-detail-hero-v59 { min-height: 210px; padding: 23px; border-radius: 21px; } .quest-journal-polish-v61 .quest-detail-kicker-v61 { display: flex; align-items: center; gap: 7px; font-size: 9px !important; } .quest-journal-polish-v61 .quest-detail-kicker-v61 .quest-type-graphic-v61 { width: 27px; height: 27px; } .quest-journal-polish-v61 .quest-detail-hero-v59 h2 { margin: 9px 0 7px; font-size: clamp(27px, 2.7vw, 36px); } .quest-journal-polish-v61 .quest-detail-hero-v59 em { font-size: 12px; } .quest-journal-polish-v61 .quest-detail-hero-v59 > strong { padding: 8px 12px; font-size: 9px; } .quest-journal-polish-v61 .quest-branch-progress-v59 { margin-top: 13px; padding: 13px 15px; } .quest-journal-polish-v61 .quest-branch-progress-v59 small { font-size: 8.5px !important; } .quest-journal-polish-v61 .quest-branch-progress-v59 b { margin-top: 4px; font-size: 13px; } .quest-journal-polish-v61 .quest-branch-progress-v59 > strong { font-size: 17px; } .quest-journal-polish-v61 .quest-detail-description-v59 { margin: 15px 3px; font-size: 13px; line-height: 1.55; } .quest-journal-polish-v61 .quest-current-v59 { grid-template-columns: 48px minmax(0, 1fr); gap: 13px; padding: 15px; } .quest-journal-polish-v61 .quest-current-v59 > i { width: 43px; height: 43px; } .quest-journal-polish-v61 .quest-current-v59 > i .quest-control-icon-v61 { width: 22px; height: 22px; } .quest-journal-polish-v61 .quest-current-v59 small { font-size: 8.5px !important; } .quest-journal-polish-v61 .quest-current-v59 b { margin-top: 5px; font-size: 16px; } .quest-journal-polish-v61 .quest-current-v59 em { margin-top: 6px; font-size: 10.5px; } .quest-journal-polish-v61 .quest-current-v59 u { font-size: 9px; } .quest-journal-polish-v61 .quest-steps-v59, .quest-journal-polish-v61 .quest-rewards-v59 { margin-top: 20px; } .quest-journal-polish-v61 .quest-steps-v59 h3, .quest-journal-polish-v61 .quest-rewards-v59 h3 { font-size: 14px; } .quest-journal-polish-v61 .quest-steps-v59 > header span, .quest-journal-polish-v61 .quest-rewards-v59 > header span { font-size: 9px; } .quest-journal-polish-v61 .quest-steps-v59 ol { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; } .quest-journal-polish-v61 .quest-steps-v59 li { grid-template-columns: 34px minmax(0, 1fr); min-height: 72px; padding: 10px 11px; } .quest-journal-polish-v61 .quest-steps-v59 li > i { width: 32px; height: 32px; font-size: 10px; } .quest-journal-polish-v61 .quest-steps-v59 li b { font-size: 11px; } .quest-journal-polish-v61 .quest-steps-v59 li small { font-size: 8.5px !important; } .quest-journal-polish-v61 .quest-rewards-v59 > div { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 9px; } .quest-journal-polish-v61 .quest-rewards-v59 article { grid-template-columns: 40px minmax(0, 1fr); min-height: 68px; padding: 10px 12px; } .quest-journal-polish-v61 .quest-rewards-v59 article > i { width: 38px; height: 38px; } .quest-journal-polish-v61 .quest-rewards-v59 article > i .quest-reward-icon-v61, .quest-journal-polish-v61 .quest-rewards-v59 article > i .quest-control-icon-v61 { width: 20px; height: 20px; } .quest-journal-polish-v61 .quest-rewards-v59 article small { font-size: 8px !important; } .quest-journal-polish-v61 .quest-rewards-v59 article b { margin-top: 4px; font-size: 11px; } .quest-journal-polish-v61 .quest-detail-actions-v59 { gap: 9px; margin-top: 21px; padding-top: 15px; } .quest-journal-polish-v61 .quest-detail-actions-v59 button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 0 17px; font-size: 11px; } .quest-journal-polish-v61 .quest-detail-empty-v59, .quest-journal-polish-v61 .quest-list-empty-v57 { gap: 11px; min-height: 100%; padding: 36px; } .quest-journal-polish-v61 .quest-detail-empty-v59 b, .quest-journal-polish-v61 .quest-list-empty-v57 b { font-size: 17px; } .quest-journal-polish-v61 .quest-detail-empty-v59 p, .quest-journal-polish-v61 .quest-list-empty-v57 small { font-size: 11px !important; } /* World progress uses the same readable type scale. */ .quest-journal-polish-v61 .quest-world-summary-v57 small, .quest-journal-polish-v61 .quest-world-v57 > header small { font-size: 9px !important; } .quest-journal-polish-v61 .quest-world-summary-v57 b { font-size: 22px; } .quest-journal-polish-v61 .quest-world-v57 > header h3 { font-size: 20px; } .quest-journal-polish-v61 .quest-world-v57 > header em { font-size: 10px; } .quest-journal-polish-v61 .quest-world-card-v57 { min-height: 80px; } .quest-journal-polish-v61 .quest-world-card-v57 b { font-size: 12px; } .quest-journal-polish-v61 .quest-world-card-v57 small { font-size: 9px !important; } .quest-journal-polish-v61 .quest-world-card-v57 > strong { font-size: 8px; } /* Compact tracker: one clear primary objective and explicit controls. */ .game-screen .quest-widget { width: min(420px, calc(100vw - 36px)) !important; max-height: min(470px, calc(100dvh - 300px)) !important; border-radius: 20px !important; } .quest-tracker-head-v57 { min-height: 52px; padding: 8px 9px 8px 13px; } .quest-tracker-head-v57 > span { gap: 9px; } .quest-tracker-head-v57 .quest-type-graphic-v61 { width: 28px; height: 28px; } .quest-tracker-head-v57 b { font-size: 14px !important; } .quest-tracker-head-v57 em { min-width: 31px; height: 25px; font-size: 10px; } .quest-tracker-head-v57 small { font-size: 9px !important; } .quest-tracker-head-v57 button { width: 36px; height: 36px; border-radius: 11px; } .quest-tracker-head-v57 button .quest-control-icon-v61 { width: 18px; height: 18px; } .quest-tracker-row-v57 { grid-template-columns: 42px minmax(0, 1fr) 28px; gap: 11px; min-height: 82px; padding: 10px 12px 13px; } .quest-tracker-row-v57.is-primary { min-height: 98px; box-shadow: 4px 0 var(--quest-accent) inset; } .quest-tracker-row-v57 > .quest-type-graphic-v61 { width: 40px; height: 40px; } .quest-tracker-row-v57 small { font-size: 8px !important; letter-spacing: .65px !important; } .quest-tracker-row-v57 b { margin-top: 4px; font-size: 14px !important; } .quest-tracker-row-v57 em { margin-top: 5px; font-size: 10.5px; } .quest-tracker-row-v57 u { margin-top: 4px; font-size: 9px; } .quest-tracker-row-v57 > strong { font-size: 12px; } .quest-tracker-row-v57 > i { height: 3px; } .quest-tracker-row-v57 > button { top: 9px; right: 9px; width: 31px; height: 31px; } .quest-tracker-row-v57 > button .quest-control-icon-v61 { width: 16px; height: 16px; } .quest-tracker-empty-v57 { min-height: 76px; padding: 13px 15px; } .quest-tracker-empty-v57 b { font-size: 12px !important; } .quest-tracker-empty-v57 small { font-size: 9px !important; } .game-screen .quest-widget.is-collapsed { width: 230px !important; max-height: 54px !important; } .game-screen .quest-widget.is-collapsed .quest-tracker-head-v57 { min-height: 52px; } .quest-announcement-v57 img { width: 50px; height: 50px; } .quest-announcement-v57 small { font-size: 8.5px !important; } .quest-announcement-v57 b { margin-top: 4px; font-size: 15px; } .quest-announcement-v57 em { margin-top: 4px; font-size: 9.5px; } .quest-offer-v57 header img { width: 58px; height: 58px; } .quest-offer-v57 header small, .quest-offer-v57 article small, .quest-offer-v57 footer small { font-size: 8.5px !important; } .quest-offer-v57 header h2 { font-size: 22px; } .quest-offer-v57 header em { font-size: 10px; } .quest-offer-v57 > section > p { font-size: 12px; } .quest-offer-v57 article b { font-size: 14px; } .quest-offer-v57 footer > span b { font-size: 11px; } .quest-offer-v57 button { min-height: 48px; font-size: 11px; } @media (max-width: 1180px) and (min-width: 801px) { .game-screen .side-panel.is-quest-panel { width: min(1080px, calc(100vw - 36px)) !important; } .quest-journal-polish-v61 .quest-type-tabs-v57 { grid-template-columns: repeat(5, minmax(145px, 1fr)); overflow-x: auto; } .quest-journal-polish-v61 .quest-journal-body-v57 { grid-template-columns: minmax(360px, .9fr) minmax(470px, 1.35fr); } } @media (max-width: 800px) { .game-screen .side-panel.is-quest-panel { top: max(30px, env(safe-area-inset-top)) !important; right: max(5px, env(safe-area-inset-right)) !important; left: max(5px, env(safe-area-inset-left)) !important; width: auto !important; max-width: none !important; } .quest-journal-polish-v61 .quest-journal-head-v57 { min-height: 70px; padding: 10px 55px 10px 12px; } .quest-journal-polish-v61 .quest-journal-head-v57 > span > .quest-type-graphic-v61 { width: 40px; height: 40px; } .quest-journal-polish-v61 .quest-journal-head-v57 small { font-size: 8px !important; } .quest-journal-polish-v61 .quest-journal-head-v57 h2 { font-size: 23px; } .quest-journal-polish-v61 .quest-mode-tabs-v57 { padding: 8px 9px 0; } .quest-journal-polish-v61 .quest-mode-tabs-v57 button { min-height: 46px; padding: 0 10px; font-size: 10px; } .quest-journal-polish-v61 .quest-type-tabs-v57 { display: flex; gap: 7px; padding: 8px 9px; overflow-x: auto; } .quest-journal-polish-v61 .quest-type-tabs-v57 button { flex: 0 0 170px; grid-template-columns: 35px minmax(0, 1fr) 24px; min-height: 56px; } .quest-journal-polish-v61 .quest-type-tabs-v57 button.is-core { flex-basis: 190px; } .quest-journal-polish-v61 .quest-type-tabs-v57 button > .quest-type-graphic-v61 { width: 35px; height: 35px; } .quest-journal-polish-v61 .quest-type-tabs-v57 button > span b { font-size: 11px; } .quest-journal-polish-v61 .quest-status-tabs-v57 { display: grid; grid-template-columns: 1.12fr 1.28fr .8fr; padding: 0 9px 8px; overflow: hidden; } .quest-journal-polish-v61 .quest-status-tabs-v57 button { min-width: 0; min-height: 40px; padding: 0 6px; font-size: 9.5px; } .quest-journal-polish-v61 .quest-branch-list-v59 { padding: 9px; } .quest-journal-polish-v61 .quest-branch-card-v59 > header { min-height: 112px; padding: 16px; } .quest-journal-polish-v61 .quest-branch-title-v61 > .quest-type-graphic-v61 { width: 39px; height: 39px; } .quest-journal-polish-v61 .quest-branch-card-v59 > header small { font-size: 8px !important; } .quest-journal-polish-v61 .quest-branch-card-v59 > header b { font-size: 18px; } .quest-journal-polish-v61 .quest-branch-card-v59 > header em { font-size: 9.5px; } .quest-journal-polish-v61 .quest-branch-node-v59 { min-height: 82px; } .quest-journal-polish-v61 .quest-branch-node-v59 b { font-size: 13px; } .quest-journal-polish-v61 .quest-branch-node-v59 em { font-size: 9px; } .quest-journal-polish-v61 .quest-detail-v59 { padding: 9px 10px 24px; } .quest-journal-polish-v61 .quest-detail-hero-v59 { min-height: 175px; padding: 17px; } .quest-journal-polish-v61 .quest-detail-hero-v59 h2 { font-size: 25px; } .quest-journal-polish-v61 .quest-detail-description-v59 { font-size: 12px; } .quest-journal-polish-v61 .quest-current-v59 b { font-size: 14px; } .quest-journal-polish-v61 .quest-steps-v59 ol { grid-template-columns: 1fr; } .game-screen .quest-widget { max-height: 104px !important; border-radius: 18px !important; } .game-screen .quest-widget .quest-tracker-row-v57.is-primary { min-height: 88px; padding: 10px 44px 13px 10px; } .game-screen .quest-widget .quest-tracker-row-v57.is-primary > .quest-type-graphic-v61 { width: 38px; height: 38px; } .game-screen .quest-widget .quest-tracker-row-v57 small { font-size: 7.5px !important; } .game-screen .quest-widget .quest-tracker-row-v57 b { font-size: 13px !important; } .game-screen .quest-widget .quest-tracker-row-v57 em { font-size: 9.5px; } .game-screen .quest-widget.is-hud-expanded { max-height: min(390px, calc(100dvh - 190px)) !important; } .game-screen .quest-widget.is-hud-expanded .quest-tracker-head-v57 { min-height: 48px; } .game-screen .quest-widget.is-collapsed { right: max(8px, env(safe-area-inset-right)) !important; left: auto !important; width: 224px !important; max-height: 54px !important; } .game-screen .quest-widget.is-collapsed > .quest-tracker-head-v57 { display: flex !important; min-height: 52px; } .game-screen .quest-widget.is-collapsed > .quest-tracker-list-v57, .game-screen .quest-widget.is-collapsed .quest-tracker-list-v57, .game-screen .quest-widget.is-collapsed .quest-tracker-row-v57 { display: none !important; } } @media (max-width: 430px) { .quest-journal-polish-v61 .quest-type-tabs-v57 button { flex-basis: 160px; } .quest-journal-polish-v61 .quest-type-tabs-v57 button.is-core { flex-basis: 182px; } .quest-journal-polish-v61 .quest-detail-hero-v59 { min-height: 158px; } .quest-journal-polish-v61 .quest-detail-hero-v59 h2 { font-size: 22px; } .quest-journal-polish-v61 .quest-detail-kicker-v61 { font-size: 8px !important; } .quest-journal-polish-v61 .quest-rewards-v59 > div { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .quest-journal-polish-v61 .quest-branch-node-v59 { transition: none; } } /* pk-style-source:43 */ /* /quests-v62.css */ /* Quest clarity pass: collapsible history, explicit primary objective and flat icon system. */ .quest-journal-polish-v62 .quest-completed-toggle-v62 { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 58px; margin: 2px 0 7px; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--quest-accent) 22%, var(--theme-border)); border-radius: 14px; background: color-mix(in srgb, var(--quest-accent) 5%, var(--theme-card)); color: var(--theme-text); text-align: left; cursor: pointer; } .quest-journal-polish-v62 .quest-completed-toggle-v62:hover, .quest-journal-polish-v62 .quest-completed-toggle-v62.is-open { border-color: color-mix(in srgb, var(--quest-accent) 44%, var(--theme-border)); background: color-mix(in srgb, var(--quest-accent) 9%, var(--theme-card)); } .quest-journal-polish-v62 .quest-completed-toggle-v62 > span { display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; align-items: center; gap: 9px; min-width: 0; flex: 1; } .quest-journal-polish-v62 .quest-completed-toggle-v62 > span > .quest-control-icon-v61 { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: color-mix(in srgb, var(--quest-success) 14%, var(--theme-card)); color: var(--quest-success); } .quest-journal-polish-v62 .quest-completed-toggle-v62 > span > span { min-width: 0; } .quest-journal-polish-v62 .quest-completed-toggle-v62 b, .quest-journal-polish-v62 .quest-completed-toggle-v62 small { display: block; } .quest-journal-polish-v62 .quest-completed-toggle-v62 b { font-size: 12px; line-height: 1.2; } .quest-journal-polish-v62 .quest-completed-toggle-v62 small { margin-top: 3px; color: var(--theme-muted); font-size: 9px !important; font-weight: 750; } .quest-journal-polish-v62 .quest-completed-toggle-v62 em { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 999px; background: var(--theme-card); color: var(--quest-accent); font-size: 10px; font-style: normal; font-weight: 950; } .quest-journal-polish-v62 .quest-completed-toggle-v62 > .quest-control-icon-v61 { width: 18px; height: 18px; color: var(--theme-muted); transform: rotate(180deg); transition: transform .18s ease; } .quest-journal-polish-v62 .quest-completed-toggle-v62.is-open > .quest-control-icon-v61 { transform: none; } .quest-journal-polish-v62 .quest-completed-toggle-v62 + .quest-branch-node-v59 { margin-top: 0; } .quest-journal-polish-v62 .quest-branch-card-v59 > header { grid-template-columns: minmax(0, 1fr) auto 40px; } .quest-journal-polish-v62 .quest-branch-card-v59 > header > i { grid-column: 1 / -1; } .quest-journal-polish-v62 .quest-branch-fold-v62 { position: relative; z-index: 3; display: grid; place-items: center; align-self: start; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.38); border-radius: 12px; background: rgba(5,24,35,.52); color: #fff; cursor: pointer; backdrop-filter: blur(8px); } .quest-journal-polish-v62 .quest-branch-fold-v62:hover { background: color-mix(in srgb, var(--quest-accent) 70%, rgba(5,24,35,.65)); } .quest-journal-polish-v62 .quest-branch-fold-v62 .quest-control-icon-v61 { width: 18px; height: 18px; transition: transform .18s ease; } .quest-journal-polish-v62 .is-branch-collapsed .quest-branch-fold-v62 .quest-control-icon-v61 { transform: rotate(180deg); } .quest-journal-polish-v62 .quest-branch-collapsed-summary-v62 { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 8px 15px; border: 0; background: color-mix(in srgb, var(--quest-accent) 4%, var(--theme-card)); color: var(--theme-text); cursor: pointer; } .quest-journal-polish-v62 .quest-branch-collapsed-summary-v62:hover { background: color-mix(in srgb, var(--quest-accent) 9%, var(--theme-card)); } .quest-journal-polish-v62 .quest-branch-collapsed-summary-v62 > span { display: flex; align-items: center; gap: 8px; min-width: 0; } .quest-journal-polish-v62 .quest-branch-collapsed-summary-v62 .quest-control-icon-v61 { width: 19px; height: 19px; color: var(--quest-success); } .quest-journal-polish-v62 .quest-branch-collapsed-summary-v62 b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .quest-journal-polish-v62 .quest-branch-collapsed-summary-v62 > strong { color: var(--quest-accent); font-size: 9px; font-weight: 950; } /* Tracker header has a normal title and a separate collapsed primary summary. */ .quest-tracker-compact-v62 { display: none !important; } .quest-tracker-choice-v62 { display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; } .quest-tracker-choice-v62 > strong { flex: 0 0 100%; color: var(--quest-accent); font-size: 12px; font-weight: 950; text-align: right; } .quest-tracker-choice-v62 > button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 78px; height: 31px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--quest-accent) 45%, var(--theme-border)); border-radius: 10px; background: color-mix(in srgb, var(--quest-accent) 8%, var(--theme-card)); color: var(--quest-accent); font-size: 8px; font-weight: 950; cursor: pointer; } .quest-tracker-choice-v62 > button:hover { background: var(--quest-accent); color: #fff; } .quest-tracker-choice-v62 > button .quest-control-icon-v61 { width: 15px; height: 15px; } .quest-tracker-choice-v62 > .quest-hud-more-v57 { min-width: 31px; width: 31px; padding: 0; } .quest-primary-badge-v62 { display: inline-flex; align-items: center; min-height: 25px; padding: 0 7px; border-radius: 8px; background: var(--quest-accent); color: #fff; font-size: 7px; font-weight: 950; letter-spacing: .55px; } .quest-tracker-row-v57 { grid-template-columns: 42px minmax(0, 1fr) 92px !important; min-height: 88px; padding: 11px 12px 14px !important; } .quest-tracker-row-v57.is-primary { min-height: 102px; border-left: 0; background: color-mix(in srgb, var(--quest-accent) 10%, var(--theme-card)); box-shadow: 5px 0 var(--quest-accent) inset, 0 1px color-mix(in srgb, var(--quest-accent) 22%, transparent) inset; } .quest-tracker-row-v57.is-primary > span > b { font-size: 14.5px !important; } .quest-tracker-row-v57 > i { right: 12px; bottom: 7px; left: 12px; } .quest-tracker-row-v57.is-ready .quest-tracker-choice-v62 > strong { color: var(--quest-success); } .game-screen .quest-widget.is-collapsed { width: min(360px, calc(100vw - 18px)) !important; max-height: 68px !important; } .game-screen .quest-widget.is-collapsed .quest-tracker-head-v57 { min-height: 66px !important; padding: 7px 8px 7px 10px; } .game-screen .quest-widget.is-collapsed .quest-tracker-heading-v62 { display: none !important; } .game-screen .quest-widget.is-collapsed .quest-tracker-compact-v62 { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; flex: 1; } .game-screen .quest-widget.is-collapsed .quest-tracker-compact-v62 > .quest-type-graphic-v61 { width: 38px; height: 38px; } .game-screen .quest-widget.is-collapsed .quest-tracker-compact-v62 > span { min-width: 0; } .game-screen .quest-widget.is-collapsed .quest-tracker-compact-v62 small, .game-screen .quest-widget.is-collapsed .quest-tracker-compact-v62 b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game-screen .quest-widget.is-collapsed .quest-tracker-compact-v62 small { color: var(--quest-accent) !important; font-size: 7px !important; font-weight: 950; letter-spacing: .75px !important; } .game-screen .quest-widget.is-collapsed .quest-tracker-compact-v62 b { margin-top: 4px; font-size: 12px !important; } .game-screen .quest-widget.is-collapsed .quest-tracker-compact-v62 > strong { color: var(--quest-accent); font-size: 11px; font-weight: 950; } .game-screen .quest-widget.is-collapsed .quest-tracker-head-v57 > div { flex: 0 0 auto; } @media (max-width: 800px) { .quest-journal-polish-v62 .quest-completed-toggle-v62 { min-height: 61px; } .quest-journal-polish-v62 .quest-completed-toggle-v62 b { font-size: 12.5px; } .game-screen .quest-widget .quest-tracker-row-v57.is-primary, .game-screen .quest-widget.is-hud-expanded .quest-tracker-row-v57 { grid-template-columns: 38px minmax(0, 1fr) 58px !important; min-height: 94px; padding: 10px 10px 13px !important; } .game-screen .quest-widget.is-hud-expanded .quest-tracker-row-v57:not(.is-primary) { min-height: 84px; } .game-screen .quest-widget .quest-tracker-row-v57.is-primary > .quest-type-graphic-v61 { width: 38px; height: 38px; } .game-screen .quest-widget .quest-tracker-choice-v62 > button { min-width: 34px; width: 34px; padding: 0; } .game-screen .quest-widget .quest-tracker-choice-v62 > button > span { display: none; } .game-screen .quest-widget .quest-primary-badge-v62 { display: none; } .game-screen .quest-widget { max-height: 108px !important; } .game-screen .quest-widget.is-hud-expanded { max-height: min(430px, calc(100dvh - 190px)) !important; } .game-screen .quest-widget.is-collapsed { top: max(118px, calc(env(safe-area-inset-top) + 112px)) !important; right: max(10px, env(safe-area-inset-right)) !important; left: auto !important; width: 60px !important; height: 60px !important; max-height: 60px !important; overflow: visible !important; border-radius: 50% !important; } .game-screen .quest-widget.is-collapsed > .quest-tracker-head-v57 { position: relative; display: grid !important; place-items: center; width: 58px; min-height: 58px !important; padding: 0; overflow: visible; border: 0; border-radius: 50%; } .game-screen .quest-widget.is-collapsed .quest-tracker-compact-v62 { position: relative; display: block !important; width: 44px; height: 44px; } .game-screen .quest-widget.is-collapsed .quest-tracker-compact-v62 > .quest-type-graphic-v61 { width: 44px; height: 44px; } .game-screen .quest-widget.is-collapsed .quest-tracker-compact-v62 > span, .game-screen .quest-widget.is-collapsed .quest-tracker-compact-v62 > strong { display: none !important; } .game-screen .quest-widget.is-collapsed .quest-tracker-compact-v62::after { content: attr(data-count); position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; border: 2px solid var(--theme-card); border-radius: 999px; background: var(--quest-accent); color: #fff; font-size: 8px; font-weight: 950; } .game-screen .quest-widget.is-collapsed .quest-tracker-head-v57 > div { position: absolute; inset: 0; display: block; } .game-screen .quest-widget.is-collapsed .quest-tracker-head-v57 > div > :not([data-quest-widget-collapse]) { display: none !important; } .game-screen .quest-widget.is-collapsed [data-quest-widget-collapse] { position: absolute; inset: 0; width: 58px; height: 58px; border: 0; border-radius: 50%; background: transparent; opacity: 0; } .game-screen .quest-widget.is-collapsed > .quest-tracker-list-v57, .game-screen .quest-widget.is-collapsed .quest-tracker-list-v57, .game-screen .quest-widget.is-collapsed .quest-tracker-row-v57 { display: none !important; } } @media (max-width: 430px) { .game-screen .quest-widget.is-collapsed { width: 60px !important; } .game-screen .quest-widget .quest-tracker-row-v57.is-primary, .game-screen .quest-widget.is-hud-expanded .quest-tracker-row-v57 { grid-template-columns: 34px minmax(0, 1fr) 48px !important; gap: 8px; } .game-screen .quest-widget .quest-tracker-choice-v62 > strong { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .quest-journal-polish-v62 .quest-completed-toggle-v62 > .quest-control-icon-v61, .quest-journal-polish-v62 .quest-branch-fold-v62 .quest-control-icon-v61 { transition: none; } } /* pk-style-source:44 */ /* /quests-v67.css */ /* Quest journal v67 — less repetition, denser branches and always-visible actions. */ .quest-journal-polish-v67 .quest-journal-head-v57 { min-height: 70px; padding: 10px 64px 10px 16px; } .quest-journal-polish-v67 .quest-journal-head-v57 > span { gap: 10px; } .quest-journal-polish-v67 .quest-journal-head-v57 > span > .quest-type-graphic-v61 { width: 40px; height: 40px; } .quest-journal-polish-v67 .quest-journal-head-v57 small { font-size: 8px !important; letter-spacing: .95px; } .quest-journal-polish-v67 .quest-journal-head-v57 h2 { margin-top: 3px; font-size: 24px; letter-spacing: -.45px; } .quest-journal-polish-v67 .quest-journal-head-v57 > div { min-width: 230px; max-width: 310px; padding: 8px 11px; border-radius: 12px; } .quest-journal-polish-v67 .quest-journal-head-v57 > div small { font-size: 7px !important; } .quest-journal-polish-v67 .quest-journal-head-v57 > div b { margin-top: 3px; font-size: 11px; } .quest-journal-polish-v67 .quest-mode-tabs-v57 { gap: 6px; padding: 7px 12px 0; } .quest-journal-polish-v67 .quest-mode-tabs-v57 button { min-height: 38px; padding: 0 12px; border-radius: 11px; font-size: 10px; } .quest-journal-polish-v67 .quest-mode-tabs-v57 .quest-type-graphic-v61, .quest-journal-polish-v67 .quest-mode-tabs-v57 .quest-control-icon-v61 { width: 18px; height: 18px; } .quest-journal-polish-v67 .quest-type-tabs-v57 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 8px 12px 6px; } .quest-journal-polish-v67 .quest-type-tabs-v57 button { grid-template-columns: 30px minmax(0, 1fr) 22px; gap: 7px; min-height: 48px; padding: 5px 8px; border-radius: 12px; } .quest-journal-polish-v67 .quest-type-tabs-v57 button > .quest-type-graphic-v61 { width: 30px; height: 30px; } .quest-journal-polish-v67 .quest-type-tabs-v57 button > span small { display: none; } .quest-journal-polish-v67 .quest-type-tabs-v57 button > span b { margin: 0; font-size: 10px; } .quest-journal-polish-v67 .quest-type-tabs-v57 button > i { min-width: 22px; height: 22px; font-size: 8px; } .quest-journal-polish-v67 .quest-status-tabs-v57 { gap: 5px; padding: 0 12px 7px; } .quest-journal-polish-v67 .quest-status-tabs-v57 button { min-height: 33px; padding: 0 10px; font-size: 9.5px; } .quest-journal-polish-v67 .quest-status-tabs-v57 button i { min-width: 20px; height: 20px; font-size: 8px; } .quest-journal-polish-v67 .quest-journal-body-v57 { grid-template-columns: minmax(330px, .68fr) minmax(0, 1.42fr); } .quest-journal-polish-v67 .quest-branch-list-v59 { padding: 10px; } .quest-journal-polish-v67 .quest-branch-card-v59 { margin-bottom: 10px; border-radius: 17px; } .quest-journal-polish-v67 .quest-branch-card-v59 > header { min-height: 88px; padding: 13px 14px 11px; gap: 7px 10px; } .quest-journal-polish-v67 .quest-branch-title-v61 { gap: 9px; } .quest-journal-polish-v67 .quest-branch-title-v61 > .quest-type-graphic-v61 { width: 34px; height: 34px; } .quest-journal-polish-v67 .quest-branch-card-v59 > header small { font-size: 7px !important; } .quest-journal-polish-v67 .quest-branch-card-v59 > header b { margin-top: 4px; font-size: 17px; } .quest-journal-polish-v67 .quest-branch-card-v59 > header em { margin-top: 4px; font-size: 8.5px; } .quest-journal-polish-v67 .quest-branch-card-v59 > header > strong { min-width: 44px; padding: 6px 8px; font-size: 10px; } .quest-journal-polish-v67 .quest-branch-fold-v62 { width: 34px; height: 34px; border-radius: 11px; } .quest-journal-polish-v67 .quest-branch-track-v59 { padding: 8px 8px 7px; } .quest-journal-polish-v67 .quest-branch-track-v59::before { top: 25px; bottom: 25px; left: 28px; } .quest-journal-polish-v67 .quest-branch-node-v59 { grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 8px; min-height: 62px; padding: 7px 8px 7px 0; border-radius: 12px; } .quest-journal-polish-v67 .quest-branch-node-v59 > i { width: 30px; height: 30px; margin-left: 2px; border-width: 2px; } .quest-journal-polish-v67 .quest-branch-node-v59 small { font-size: 6.5px !important; } .quest-journal-polish-v67 .quest-branch-node-v59 b { margin-top: 3px; font-size: 12px; } .quest-journal-polish-v67 .quest-branch-node-v59 em { margin-top: 3px; font-size: 8px; } .quest-journal-polish-v67 .quest-branch-card-v59 > footer { min-height: 32px; padding: 6px 11px; } .quest-journal-polish-v67 .quest-branch-card-v59 > footer span, .quest-journal-polish-v67 .quest-branch-card-v59 > footer b { font-size: 7.5px; } .quest-journal-polish-v67 .quest-completed-toggle-v62 { min-height: 46px; padding: 7px 9px; border-radius: 12px; } .quest-journal-polish-v67 .quest-completed-toggle-v62 > span { grid-template-columns: 30px minmax(0, 1fr) 25px; gap: 7px; } .quest-journal-polish-v67 .quest-completed-toggle-v62 > span > .quest-control-icon-v61 { width: 30px; height: 30px; padding: 7px; } .quest-journal-polish-v67 .quest-completed-toggle-v62 b { font-size: 10px; } .quest-journal-polish-v67 .quest-completed-toggle-v62 small { display: none; } .quest-journal-polish-v67 .quest-detail-shell-v57 { display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; } .quest-journal-polish-v67 .quest-detail-scroll-v67 { min-height: 0; overflow: hidden auto; scrollbar-width: thin; } .quest-journal-polish-v67 .quest-detail-v59 { min-height: 100%; padding: 10px 14px 14px; } .quest-journal-polish-v67 .quest-detail-hero-v59 { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; align-items: end; min-height: 148px; padding: 15px 16px 12px; border-radius: 16px; } .quest-journal-polish-v67 .quest-detail-hero-v59 > span { align-self: end; max-width: none; } .quest-journal-polish-v67 .quest-detail-kicker-v61 { gap: 6px; font-size: 7px !important; } .quest-journal-polish-v67 .quest-detail-kicker-v61 .quest-type-graphic-v61 { width: 21px; height: 21px; } .quest-journal-polish-v67 .quest-detail-hero-v59 h2 { margin: 6px 0 4px; font-size: clamp(22px, 2vw, 28px); } .quest-journal-polish-v67 .quest-detail-hero-v59 em { font-size: 9px; } .quest-journal-polish-v67 .quest-detail-hero-v59 > strong { padding: 6px 9px; font-size: 7px; } .quest-detail-branch-v67 { position: relative; z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; margin-top: 11px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; background: rgba(3,24,35,.48); backdrop-filter: blur(8px); } .quest-detail-branch-v67 small, .quest-detail-branch-v67 b { display: inline; } .quest-detail-branch-v67 small { color: rgba(255,255,255,.68) !important; font-size: 6.5px !important; letter-spacing: .75px; } .quest-detail-branch-v67 b { margin-left: 7px; color: #fff; font-size: 9px; } .quest-detail-branch-v67 > strong { color: #fff; font-size: 9px; } .quest-detail-branch-v67 > i { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.18); } .quest-detail-branch-v67 > i u { display: block; height: 100%; border-radius: inherit; background: var(--quest-accent); } .quest-journal-polish-v67 .quest-detail-description-v59 { margin: 9px 2px; font-size: 10.5px; line-height: 1.42; } .quest-journal-polish-v67 .quest-current-v59 { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 11px 12px; border-radius: 13px; } .quest-journal-polish-v67 .quest-current-v59 > i { width: 36px; height: 36px; border-radius: 11px; } .quest-journal-polish-v67 .quest-current-v59 small { font-size: 7px !important; } .quest-journal-polish-v67 .quest-current-v59 b { margin-top: 3px; font-size: 13.5px; } .quest-journal-polish-v67 .quest-current-v59 em { margin-top: 4px; font-size: 8.5px; } .quest-journal-polish-v67 .quest-steps-v59, .quest-journal-polish-v67 .quest-rewards-v59 { margin-top: 12px; } .quest-journal-polish-v67 .quest-steps-v59 h3, .quest-journal-polish-v67 .quest-rewards-v59 h3 { font-size: 11.5px; } .quest-journal-polish-v67 .quest-steps-v59 li { min-height: 56px; padding: 7px 9px; } .quest-journal-polish-v67 .quest-rewards-v59 > div { gap: 7px; } .quest-journal-polish-v67 .quest-rewards-v59 article { grid-template-columns: 32px minmax(0, 1fr); min-height: 54px; padding: 7px 9px; } .quest-journal-polish-v67 .quest-rewards-v59 article > i { width: 31px; height: 31px; } .quest-journal-polish-v67 .quest-rewards-v59 article small { font-size: 6.5px !important; } .quest-journal-polish-v67 .quest-rewards-v59 article b { margin-top: 3px; font-size: 9px; } .quest-journal-polish-v67 .quest-detail-actions-v59 { z-index: 5; display: flex; flex-wrap: wrap; gap: 7px; min-height: 62px; margin: 0; padding: 9px 14px; border-top: 1px solid var(--theme-border); background: color-mix(in srgb, var(--theme-card) 96%, transparent); box-shadow: 0 -9px 24px rgba(4,33,49,.08); backdrop-filter: blur(14px); } .quest-journal-polish-v67 .quest-detail-actions-v59 button { min-height: 42px; padding: 0 13px; border-radius: 11px; font-size: 10px; } @media (max-width: 1180px) and (min-width: 801px) { .quest-journal-polish-v67 .quest-type-tabs-v57 { grid-template-columns: repeat(5, minmax(118px, 1fr)); overflow-x: auto; } .quest-journal-polish-v67 .quest-journal-body-v57 { grid-template-columns: minmax(300px, .62fr) minmax(0, 1.38fr); } .quest-journal-polish-v67 .quest-detail-hero-v59 { min-height: 138px; } } @media (max-width: 800px) { .quest-journal-polish-v67 .quest-journal-head-v57 { min-height: 60px; padding: 8px 50px 8px 10px; } .quest-journal-polish-v67 .quest-journal-head-v57 > span > .quest-type-graphic-v61 { width: 34px; height: 34px; } .quest-journal-polish-v67 .quest-journal-head-v57 small { font-size: 7px !important; } .quest-journal-polish-v67 .quest-journal-head-v57 h2 { font-size: 20px; } .quest-journal-polish-v67 .quest-mode-tabs-v57 { padding: 6px 8px 0; } .quest-journal-polish-v67 .quest-mode-tabs-v57 button { min-height: 38px; padding: 0 8px; font-size: 9px; } .quest-journal-polish-v67 .quest-type-tabs-v57 { display: flex; gap: 6px; padding: 7px 8px 6px; overflow-x: auto; } .quest-journal-polish-v67 .quest-type-tabs-v57 button { flex: 0 0 138px; grid-template-columns: 28px minmax(0, 1fr) 21px; min-height: 46px; } .quest-journal-polish-v67 .quest-type-tabs-v57 button.is-core { flex-basis: 150px; } .quest-journal-polish-v67 .quest-type-tabs-v57 button > .quest-type-graphic-v61 { width: 28px; height: 28px; } .quest-journal-polish-v67 .quest-type-tabs-v57 button > span b { font-size: 9.5px; } .quest-journal-polish-v67 .quest-status-tabs-v57 { padding: 0 8px 6px; } .quest-journal-polish-v67 .quest-status-tabs-v57 button { min-height: 34px; padding: 0 5px; font-size: 8.5px; } .quest-journal-polish-v67 .quest-branch-list-v59 { padding: 7px; } .quest-journal-polish-v67 .quest-branch-card-v59 > header { min-height: 86px; padding: 12px; } .quest-journal-polish-v67 .quest-branch-card-v59 > header b { font-size: 16px; } .quest-journal-polish-v67 .quest-branch-node-v59 { min-height: 64px; } .quest-journal-polish-v67 .quest-detail-shell-v57 { display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; } .quest-journal-polish-v67 .quest-detail-scroll-v67 { overflow: hidden auto; } .quest-journal-polish-v67 .quest-detail-v59 { padding: 7px 8px 10px; } .quest-journal-polish-v67 .quest-detail-v59 > .quest-detail-back-v57 { min-height: 36px; margin-bottom: 6px; } .quest-journal-polish-v67 .quest-detail-hero-v59 { min-height: 132px; padding: 11px 12px 10px; border-radius: 14px; } .quest-journal-polish-v67 .quest-detail-hero-v59 h2 { margin-top: 5px; font-size: 20px; } .quest-journal-polish-v67 .quest-detail-hero-v59 em { font-size: 8px; } .quest-journal-polish-v67 .quest-detail-description-v59 { margin: 8px 2px; font-size: 10px; } .quest-journal-polish-v67 .quest-current-v59 { grid-template-columns: 36px minmax(0, 1fr); padding: 9px 10px; } .quest-journal-polish-v67 .quest-current-v59 > i { width: 33px; height: 33px; } .quest-journal-polish-v67 .quest-current-v59 b { font-size: 12px; } .quest-journal-polish-v67 .quest-rewards-v59 > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quest-journal-polish-v67 .quest-detail-actions-v59 { min-height: 58px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); } .quest-journal-polish-v67 .quest-detail-actions-v59 button { flex: 1 1 118px; min-height: 44px; padding: 0 10px; font-size: 9.5px; } } @media (max-width: 430px) { .quest-journal-polish-v67 .quest-type-tabs-v57 button { flex-basis: 126px; } .quest-journal-polish-v67 .quest-type-tabs-v57 button.is-core { flex-basis: 138px; } .quest-journal-polish-v67 .quest-detail-hero-v59 { min-height: 128px; } .quest-journal-polish-v67 .quest-detail-hero-v59 h2 { font-size: 18px; } .quest-detail-branch-v67 { margin-top: 8px; padding: 7px 8px; } .quest-detail-branch-v67 small { display: none; } .quest-detail-branch-v67 b { margin-left: 0; } .quest-journal-polish-v67 .quest-rewards-v59 > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quest-journal-polish-v67 .quest-rewards-v59 article { min-height: 50px; padding: 6px 7px; } } @media (prefers-reduced-motion: reduce) { .quest-journal-polish-v67 .quest-detail-shell-v57 { transition: none !important; } } /* pk-style-source:45 */ /* /quests-v68.css */ /* Quest journal v68 — narrower desktop window, reliable dragging and a working HUD list toggle. */ .quest-journal-polish-v68 .quest-journal-head-v57 { justify-content: flex-start; } .quest-journal-polish-v68 .quest-journal-body-v57 { grid-template-columns: minmax(300px, .64fr) minmax(0, 1.46fr); } .game-screen .quest-widget .quest-hud-journal-v68 { border-color: color-mix(in srgb, var(--quest-accent) 36%, var(--theme-border)); background: color-mix(in srgb, var(--quest-accent) 8%, var(--theme-card)); color: var(--quest-accent); } .game-screen .quest-widget .quest-hud-journal-v68:hover { border-color: var(--quest-accent); background: var(--quest-accent); color: #fff; } @media (min-width: 801px) { .game-screen .side-panel.is-quest-panel { width: min(1180px, calc(100vw - 88px)) !important; height: min(800px, calc(100dvh - 52px)) !important; max-width: none !important; max-height: none !important; } .game-screen .side-panel.is-quest-panel.is-user-positioned, .game-screen .side-panel.is-quest-panel.is-user-positioned.is-open { position: fixed !important; top: var(--panel-user-top, 8px) !important; right: auto !important; bottom: auto !important; left: var(--panel-user-left, 8px) !important; transform: none !important; transition: opacity 160ms ease, box-shadow 160ms ease !important; } .game-screen .side-panel.is-quest-panel.is-panel-dragging { transform: none !important; transition: none !important; will-change: left, top; box-shadow: 0 30px 78px rgba(3, 31, 48, .34) !important; } .game-screen .side-panel.is-quest-panel.is-panel-dragging #sidePanelContent { pointer-events: none; } .quest-journal-polish-v68 .quest-journal-head-v57 { cursor: grab; } .quest-journal-polish-v68 .quest-journal-head-v57.is-dragging { cursor: grabbing; } } @media (max-width: 1180px) and (min-width: 801px) { .game-screen .side-panel.is-quest-panel { width: min(1040px, calc(100vw - 40px)) !important; height: min(760px, calc(100dvh - 32px)) !important; max-width: none !important; max-height: none !important; } .quest-journal-polish-v68 .quest-journal-body-v57 { grid-template-columns: minmax(285px, .62fr) minmax(0, 1.38fr); } } @media (max-width: 800px) { .quest-journal-polish-v68 .quest-journal-head-v57 { justify-content: flex-start; } } @media (prefers-reduced-motion: reduce) { .game-screen .side-panel.is-quest-panel.is-user-positioned { transition: none !important; } } /* pk-style-source:46 */ /* /desktop-polish-v68.css */ /* Desktop UI v68 — restrained navigation icons and a clean compact chat. */ @media (min-width: 761px) { .game-screen .desktop-dock, .game-screen .world-rail, .game-screen .chat-panel.chat-messenger { font-family: var(--ui-font, "Onest PokePark", "Segoe UI", system-ui, sans-serif) !important; } .game-screen .desktop-dock button { border: 1px solid color-mix(in srgb, var(--theme-muted) 18%, var(--theme-border)) !important; background: color-mix(in srgb, var(--theme-card) 92%, transparent) !important; box-shadow: 0 10px 24px rgba(8, 38, 55, .12), inset 0 1px var(--ui-highlight) !important; } .game-screen .desktop-dock button > span { border: 1px solid color-mix(in srgb, var(--theme-accent) 10%, var(--theme-border)) !important; background: color-mix(in srgb, var(--theme-surface-soft) 82%, transparent) !important; } .game-screen .desktop-dock-icon-v68 { width: calc(var(--desktop-nav-icon-size) - 4px) !important; height: calc(var(--desktop-nav-icon-size) - 4px) !important; filter: none !important; } .game-screen .desktop-dock button:hover, .game-screen .desktop-dock button.is-active, .game-screen .desktop-dock button.is-menu-open { border-color: color-mix(in srgb, var(--theme-accent) 46%, var(--theme-border)) !important; background: color-mix(in srgb, var(--theme-accent) 7%, var(--theme-card)) !important; box-shadow: 0 13px 28px rgba(8, 49, 72, .16), inset 0 1px var(--ui-highlight) !important; } .game-screen .desktop-dock button:hover .desktop-dock-icon-v68, .game-screen .desktop-dock button.is-active .desktop-dock-icon-v68, .game-screen .desktop-dock button.is-menu-open .desktop-dock-icon-v68 { transform: translateY(-1px) !important; filter: none !important; } .game-screen .desktop-dock button > b { color: color-mix(in srgb, var(--theme-text) 88%, var(--theme-muted)) !important; font-family: inherit !important; font-weight: 780 !important; letter-spacing: 0 !important; } .game-screen .chat-panel.chat-messenger { --chat-ui-blue: var(--theme-accent, #2297e6); } .game-screen .chat-panel.chat-messenger .chat-head, .game-screen .chat-panel.chat-messenger .chat-title-copy, .game-screen .chat-panel.chat-messenger button, .game-screen .chat-panel.chat-messenger input, .game-screen .chat-panel.chat-messenger textarea { font-family: inherit !important; } .game-screen .chat-panel.is-minimized { width: clamp(310px, 25vw, 382px) !important; min-width: 310px !important; height: 60px !important; min-height: 60px !important; max-height: 60px !important; padding: 7px 8px 7px 11px !important; border: 1px solid color-mix(in srgb, var(--theme-muted) 18%, var(--theme-border)) !important; border-radius: 16px !important; background: color-mix(in srgb, var(--theme-card) 94%, transparent) !important; box-shadow: 0 13px 30px rgba(5, 36, 53, .15), inset 0 1px var(--ui-highlight) !important; } .game-screen .chat-panel.is-minimized .chat-head { min-height: 44px !important; padding: 0 !important; border: 0 !important; background: transparent !important; cursor: pointer; } .game-screen .chat-panel.is-minimized .chat-title-copy { gap: 2px !important; } .game-screen .chat-panel.is-minimized .chat-title-copy > b { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; color: var(--theme-text) !important; font-size: 13px !important; font-weight: 820 !important; line-height: 1.15 !important; } .game-screen .chat-panel.is-minimized .chat-title-icon { display: grid !important; place-items: center !important; width: 26px !important; height: 26px !important; padding: 6px !important; border: 1px solid color-mix(in srgb, var(--theme-accent) 18%, var(--theme-border)) !important; border-radius: 9px !important; background: color-mix(in srgb, var(--theme-accent) 7%, var(--theme-surface-soft)) !important; color: var(--theme-accent) !important; } .game-screen .chat-panel.is-minimized .chat-title-copy > small { display: flex !important; align-items: center !important; gap: 5px !important; margin: 2px 0 0 34px !important; color: var(--theme-muted) !important; font-size: 7.5px !important; font-weight: 690 !important; line-height: 1 !important; } .game-screen .chat-panel.is-minimized .chat-title-copy > small i { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #37bf79 !important; box-shadow: 0 0 0 3px rgba(55, 191, 121, .1) !important; } .game-screen .chat-panel.is-minimized .chat-head-actions { gap: 5px !important; } .game-screen .chat-panel.is-minimized .chat-head-actions [data-chat-search-toggle], .game-screen .chat-panel.is-minimized .chat-minimize { display: grid !important; place-items: center !important; width: 36px !important; height: 36px !important; border: 1px solid color-mix(in srgb, var(--theme-muted) 18%, var(--theme-border)) !important; border-radius: 11px !important; background: color-mix(in srgb, var(--theme-surface-soft) 88%, transparent) !important; color: var(--theme-text) !important; } .game-screen .chat-panel.is-minimized .chat-head-actions [data-chat-search-toggle]:hover, .game-screen .chat-panel.is-minimized .chat-minimize:hover { border-color: color-mix(in srgb, var(--theme-accent) 42%, var(--theme-border)) !important; background: color-mix(in srgb, var(--theme-accent) 8%, var(--theme-card)) !important; color: var(--theme-accent) !important; } } @media (min-width: 761px) and (max-width: 980px) { .game-screen .chat-panel.is-minimized { width: 292px !important; min-width: 292px !important; } } /* pk-style-source:47 */ /* /world-hud-v63.css */ /* Unified world HUD geometry: minimap, objectives and resources share one visual system. */ @media (min-width: 761px) { .game-screen { --world-hud-width: clamp(320px, 24vw, 344px); --world-hud-map-height: clamp(222px, 16vw, 238px); --world-hud-radius: 20px; --world-hud-gap: 14px; } .game-screen .world-minimap { width: var(--world-hud-width) !important; height: var(--world-hud-map-height) !important; grid-template-rows: 36px minmax(0, 1fr) 38px !important; overflow: visible; border-radius: var(--world-hud-radius) !important; box-shadow: 0 18px 42px rgba(0, 27, 43, .25), 0 3px 10px rgba(0, 31, 48, .12) !important; contain: layout style; isolation: isolate; } .game-screen .world-minimap-topbar { min-height: 36px; padding-inline: 14px 12px; border-radius: var(--world-hud-radius) var(--world-hud-radius) 0 0 !important; } .game-screen .world-minimap-place b { font-size: 11px; letter-spacing: 0; } .game-screen .world-minimap-topbar time { font-size: 9.5px; } .game-screen .world-minimap-map-surface, .game-screen .world-minimap-frame { width: 100%; height: auto !important; min-height: 0; } .game-screen .world-minimap-map-surface { box-shadow: inset 0 1px rgba(255,255,255,.10), inset 0 -1px rgba(0,20,31,.10); } .game-screen .world-minimap-frame { border-radius: 0 !important; } .game-screen .world-minimap-preview { contain: strict; } .game-screen .world-minimap-bottombar { min-height: 38px; border-radius: 0 0 var(--world-hud-radius) var(--world-hud-radius) !important; } .game-screen .world-minimap-channel { height: 37px; border-radius: 0 0 0 var(--world-hud-radius) !important; } .game-screen .world-minimap-channel-copy b, .game-screen .world-minimap-ping b { font-size: 8.5px; } .game-screen .world-minimap-ping { height: 37px; } .game-screen .quest-widget, .game-screen .quest-widget.is-collapsed { right: max(14px, env(safe-area-inset-right)) !important; left: auto !important; top: calc(max(14px, env(safe-area-inset-top)) + var(--world-hud-map-height) + var(--world-hud-gap)) !important; width: var(--world-hud-width) !important; max-width: var(--world-hud-width) !important; border-radius: var(--world-hud-radius) !important; box-shadow: 0 14px 32px rgba(0, 27, 43, .20), 0 1px rgba(255,255,255,.72) inset !important; contain: layout paint; isolation: isolate; } .game-screen .quest-widget .quest-tracker-head-v57 { border-radius: var(--world-hud-radius) var(--world-hud-radius) 0 0; } .game-screen .quest-widget.is-collapsed .quest-tracker-head-v57 { border-radius: var(--world-hud-radius) !important; } .game-screen .quest-widget.is-collapsed { height: 68px !important; max-height: 68px !important; } .game-screen .quest-widget.is-hud-expanded { max-height: min(470px, calc(100dvh - var(--world-hud-map-height) - 52px)) !important; } .game-screen .quest-tracker-row-v57 > span > b { display: -webkit-box; overflow: hidden; white-space: normal; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* One resource rail instead of several unrelated blocks. */ .game-screen .world-wallet { gap: 0 !important; padding: 4px; overflow: hidden; border: 1px solid rgba(132,191,211,.25); border-radius: 18px; background: linear-gradient(145deg, rgba(7,39,51,.91), rgba(7,30,42,.88)); box-shadow: 0 10px 25px rgba(0,22,33,.18), inset 0 1px rgba(255,255,255,.07); backdrop-filter: blur(12px) saturate(1.06); contain: layout paint; } .game-screen .world-wallet-currency { min-height: 38px; border: 0 !important; border-radius: 13px !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } .game-screen .world-wallet-currency + .world-wallet-currency { border-left: 1px solid rgba(132,191,211,.18) !important; border-radius: 0 13px 13px 0 !important; } .game-screen .world-wallet-currency b { font-size: 11px; } .game-screen .world-wallet-currency button { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.065); } html[data-game-theme="light"] .game-screen .world-wallet { border-color: rgba(185,213,224,.95); background: rgba(249,253,255,.95); box-shadow: 0 9px 22px rgba(0,39,61,.12), inset 0 1px #fff; } html[data-game-theme="light"] .game-screen .world-wallet-currency + .world-wallet-currency { border-left-color: #d9e7ee !important; } } @media (min-width: 761px) and (max-width: 1180px) { .game-screen { --world-hud-width: clamp(292px, 34vw, 320px); --world-hud-map-height: 218px; } .game-screen .quest-tracker-row-v57 { grid-template-columns: 38px minmax(0, 1fr) 58px !important; gap: 9px; } .game-screen .quest-tracker-choice-v62 > button { min-width: 34px; width: 34px; padding: 0; } .game-screen .quest-tracker-choice-v62 > button > span, .game-screen .quest-primary-badge-v62 { display: none; } } @media (min-width: 1500px) { .game-screen { --world-hud-width: 360px; --world-hud-map-height: 248px; } } @media (min-width: 761px) and (max-height: 720px) { .game-screen { --world-hud-map-height: 202px; --world-hud-gap: 10px; } .game-screen .world-minimap { grid-template-rows: 33px minmax(0, 1fr) 35px !important; } .game-screen .world-minimap-topbar { min-height: 33px; } .game-screen .world-minimap-bottombar, .game-screen .world-minimap-channel, .game-screen .world-minimap-ping { min-height: 35px; height: 34px; } .game-screen .quest-widget.is-hud-expanded { max-height: min(360px, calc(100dvh - 250px)) !important; } } @media (max-width: 760px) { .game-screen .quest-widget:not(.is-collapsed) { top: max(118px, calc(env(safe-area-inset-top) + 112px)) !important; right: max(8px, env(safe-area-inset-right)) !important; left: max(8px, env(safe-area-inset-left)) !important; width: auto !important; max-width: none !important; border-radius: 19px !important; box-shadow: 0 12px 28px rgba(0, 27, 43, .20), 0 1px rgba(255,255,255,.7) inset !important; contain: layout paint; } .game-screen .quest-widget.is-collapsed { top: max(118px, calc(env(safe-area-inset-top) + 112px)) !important; right: max(29px, calc(env(safe-area-inset-right) + 21px)) !important; border: 2px solid rgba(255,255,255,.92) !important; background: color-mix(in srgb, var(--ui-glass-strong) 97%, transparent) !important; box-shadow: 0 10px 24px rgba(0,31,52,.24), 0 1px #fff inset !important; contain: layout paint; } .game-screen .quest-widget.is-collapsed > .quest-tracker-head-v57 { background: transparent; } .game-screen .quest-widget.is-hud-expanded { max-height: min(440px, calc(100dvh - 196px)) !important; } .game-screen .quest-tracker-row-v57 b { font-size: 13px !important; } .game-screen .quest-tracker-row-v57 em { font-size: 9.5px; } } @media (max-width: 430px) { .game-screen .quest-widget:not(.is-collapsed) { top: max(110px, calc(env(safe-area-inset-top) + 104px)) !important; } .game-screen .quest-widget.is-collapsed { top: max(108px, calc(env(safe-area-inset-top) + 102px)) !important; right: max(22px, calc(env(safe-area-inset-right) + 16px)) !important; } } @media (prefers-reduced-motion: reduce) { .game-screen .world-minimap, .game-screen .quest-widget, .game-screen .world-wallet { transition: none !important; } } /* pk-style-source:48 */ /* /world-hud-v64.css */ /* Resource rail v64: explicit currency artwork and independent add controls. */ .game-screen .world-wallet-currency-icon, .game-screen .world-wallet-currency-icon img { display: block; width: 22px; height: 22px; } .game-screen .world-wallet-currency-icon img { object-fit: contain; pointer-events: none; } .game-screen .world-wallet-currency button { flex: 0 0 auto; isolation: isolate; } @media (max-width: 760px) { .game-screen .world-wallet-currency-icon, .game-screen .world-wallet-currency-icon img { width: 19px; height: 19px; } } @media (max-width: 430px) { .game-screen .world-wallet-currency-icon, .game-screen .world-wallet-currency-icon img { width: 17px; height: 17px; } } /* pk-style-source:49 */ /* /desktop-nav-v65.css */ /* Desktop navigation v65. The phone dock and its menu remain owned by the existing <=760px rules. */ .desktop-menu-only { display: none !important; } @media (min-width: 761px) { .game-screen { --desktop-nav-card-width: clamp(78px, 5.1vw, 88px); --desktop-nav-card-height: clamp(74px, 4.65vw, 82px); --desktop-nav-icon-size: clamp(40px, 2.7vw, 46px); --desktop-nav-gap: clamp(8px, .62vw, 11px); --desktop-nav-edge: max(16px, env(safe-area-inset-right)); } .game-screen .desktop-utility-rail { display: none !important; } .game-screen .desktop-menu-only { display: grid !important; } .game-screen .mobile-menu-only { display: none !important; } .game-screen .desktop-dock { right: var(--desktop-nav-edge) !important; bottom: max(16px, env(safe-area-inset-bottom)) !important; grid-template-columns: repeat(5, var(--desktop-nav-card-width)) !important; gap: var(--desktop-nav-gap) !important; width: auto !important; } .game-screen .desktop-dock button { grid-template-rows: var(--desktop-nav-icon-size) minmax(12px, auto) !important; width: var(--desktop-nav-card-width) !important; min-width: var(--desktop-nav-card-width) !important; height: var(--desktop-nav-card-height) !important; min-height: var(--desktop-nav-card-height) !important; gap: 5px !important; padding: 8px 6px 7px !important; border-radius: clamp(17px, 1.2vw, 21px) !important; } .game-screen .desktop-dock button > span { width: var(--desktop-nav-icon-size) !important; height: var(--desktop-nav-icon-size) !important; border-radius: 14px !important; background: rgba(231,246,253,.78) !important; } .game-screen .desktop-dock-icon-v65 { display: block; width: calc(var(--desktop-nav-icon-size) - 4px); height: calc(var(--desktop-nav-icon-size) - 4px); object-fit: contain; filter: drop-shadow(0 3px 5px rgba(25,78,109,.13)); transition: transform .14s ease, filter .14s ease; } .game-screen .desktop-dock button:hover .desktop-dock-icon-v65, .game-screen .desktop-dock button.is-active .desktop-dock-icon-v65, .game-screen .desktop-dock button.is-menu-open .desktop-dock-icon-v65 { transform: translateY(-1px) scale(1.045); filter: drop-shadow(0 4px 7px rgba(19,96,140,.2)); } .game-screen .desktop-dock button > b { max-width: calc(var(--desktop-nav-card-width) - 10px) !important; font-size: clamp(8px, .58vw, 10px) !important; font-weight: 850 !important; letter-spacing: .01em; } .game-screen .desktop-dock button.is-active, .game-screen .desktop-dock button.is-menu-open { transform: translateY(-2px); } /* Every secondary desktop action lives in one readable popover above the dock. */ .game-screen .world-rail { right: var(--desktop-nav-edge) !important; bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--desktop-nav-card-height) + 14px) !important; left: auto !important; top: auto !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: clamp(390px, 31vw, 470px) !important; max-height: min(390px, calc(100dvh - var(--desktop-nav-card-height) - 64px)) !important; gap: 8px !important; padding: 12px !important; overflow: auto !important; transform: none !important; border-radius: 22px !important; } .game-screen .world-rail.is-desktop-menu-open { display: grid !important; } .game-screen .world-rail button { grid-template-columns: 38px minmax(0, 1fr) !important; min-height: 58px !important; gap: 9px !important; padding: 8px 10px !important; border: 1px solid rgba(140,191,211,.18) !important; border-radius: 15px !important; background: rgba(255,255,255,.045) !important; } .game-screen .world-rail button > span { display: grid !important; place-items: center !important; width: 38px !important; height: 38px !important; border-radius: 12px; background: rgba(255,255,255,.06); } .game-screen .world-rail button > span .ui-icon { width: 24px !important; height: 24px !important; } .game-screen .world-rail button .art-icon, .game-screen .world-rail button .pokedex-nav-device img { width: 34px !important; height: 34px !important; object-fit: contain; } .game-screen .world-rail button b, .game-screen .world-rail button:hover b, .game-screen .world-rail button.is-active b { max-width: none !important; font-size: 9px !important; font-weight: 800 !important; text-align: left !important; } .game-screen .world-rail button > i { top: 5px !important; right: 5px !important; } html[data-game-theme="light"] .game-screen .desktop-dock button > span { background: #edf7fb !important; } html[data-game-theme="light"] .game-screen .world-rail button { border-color: #d9e9f0 !important; background: #f8fcfe !important; } html[data-game-theme="light"] .game-screen .world-rail button > span { background: #eaf5fa; } html[data-game-theme="light"] .game-screen .world-rail button:hover, html[data-game-theme="light"] .game-screen .world-rail button.is-active { border-color: #acd9ed !important; background: #e9f7fd !important; } } @media (min-width: 981px) and (max-width: 1280px) { .game-screen { --desktop-nav-card-width: 68px; --desktop-nav-card-height: 66px; --desktop-nav-icon-size: 36px; --desktop-nav-gap: 7px; --desktop-nav-edge: max(11px, env(safe-area-inset-right)); } .game-screen .desktop-dock button { padding: 6px 5px 5px !important; border-radius: 16px !important; } .game-screen .desktop-dock button > span { border-radius: 11px !important; } .game-screen .desktop-dock button > b { font-size: 7.5px !important; } .game-screen .world-rail { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 384px !important; } .game-screen .world-rail button { min-height: 53px !important; } } @media (min-width: 761px) and (max-width: 980px) { .game-screen { --desktop-nav-card-width: 54px; --desktop-nav-card-height: 54px; --desktop-nav-icon-size: 30px; --desktop-nav-gap: 5px; --desktop-nav-edge: max(8px, env(safe-area-inset-right)); } .game-screen .desktop-dock button { grid-template-rows: 30px minmax(9px, auto) !important; gap: 2px !important; padding: 4px 3px 3px !important; border-radius: 13px !important; } .game-screen .desktop-dock button > span { border-radius: 9px !important; } .game-screen .desktop-dock button > b { font-size: 6.2px !important; } .game-screen .world-rail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: min(330px, calc(100vw - 90px)) !important; gap: 6px !important; padding: 9px !important; border-radius: 18px !important; } .game-screen .world-rail button { grid-template-columns: 32px minmax(0, 1fr) !important; min-height: 48px !important; padding: 6px 8px !important; } .game-screen .world-rail button > span { width: 32px !important; height: 32px !important; } .game-screen .world-rail button > span .ui-icon { width: 20px !important; height: 20px !important; } .game-screen .world-rail button .art-icon { width: 29px !important; height: 29px !important; } .game-screen .world-rail button b, .game-screen .world-rail button:hover b, .game-screen .world-rail button.is-active b { font-size: 8px !important; } } @media (min-width: 761px) and (max-height: 700px) { .game-screen { --desktop-nav-card-height: 56px; --desktop-nav-icon-size: 32px; } .game-screen .desktop-dock button { grid-template-rows: 32px minmax(9px, auto) !important; padding-block: 4px !important; } .game-screen .world-rail { max-height: calc(100dvh - 92px) !important; } } @media (prefers-reduced-motion: reduce) { .game-screen .desktop-dock-icon-v65 { transition: none !important; } } /* pk-style-source:50 */ /* /desktop-nav-v66.css */ /* Desktop navigation v66: collision-safe lower HUD for compact and short PCs. */ @media (min-width: 761px) and (max-width: 1280px) { /* Chat and the five-button dock keep the lower corners. Context interaction moves to a second centered row, so all three controls remain readable. */ .game-screen .interaction-card { left: 50% !important; right: auto !important; bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--desktop-nav-card-height) + 14px) !important; width: min(380px, calc(100vw - 32px)) !important; max-width: none !important; } .game-screen:has(.world-rail.is-desktop-menu-open) .interaction-card.is-ready { opacity: 0 !important; pointer-events: none !important; } } @media (min-width: 761px) and (max-width: 980px) { .game-screen .interaction-card { grid-template-columns: 48px minmax(0, 1fr) auto !important; gap: 8px !important; width: min(340px, calc(100vw - 24px)) !important; min-height: 66px !important; padding: 7px 8px !important; border-radius: 17px !important; } .game-screen .interaction-card__visual { width: 46px !important; height: 46px !important; } .game-screen .interaction-card__meta { display: none !important; } .game-screen .interaction-card__title { font-size: 11px !important; } .game-screen .interaction-card__cta, .game-screen .interaction-card.has-creature-emoji .interaction-card__cta { min-width: 110px !important; height: 46px !important; gap: 6px !important; padding: 0 9px 0 7px !important; border-radius: 12px !important; } .game-screen .interaction-card__key { width: 32px !important; min-width: 32px !important; height: 32px !important; border-radius: 8px !important; font-size: 11px !important; } .game-screen .interaction-card__action-label { font-size: 9px !important; } } @media (min-width: 761px) and (max-width: 1280px) and (max-height: 520px) { .game-screen .interaction-card { bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--desktop-nav-card-height) + 8px) !important; width: min(380px, calc(100vw - 24px)) !important; min-height: 58px !important; padding-block: 5px !important; } .game-screen .interaction-card__visual { width: 42px !important; height: 42px !important; } .game-screen .interaction-card__meta { display: none !important; } .game-screen .interaction-card__cta, .game-screen .interaction-card.has-creature-emoji .interaction-card__cta { min-width: 104px !important; height: 42px !important; } } @media (prefers-reduced-motion: reduce) { .game-screen .interaction-card { transition: none !important; } } /* pk-style-source:51 */ /* /player-hud-v69.css */ /* HUD v69 — trainer identity, movement stamina, chat and navigation as one system. */ .game-screen { --hud69-ink: var(--theme-text, #153848); --hud69-muted: var(--theme-muted, #648194); --hud69-card: color-mix(in srgb, var(--theme-card, #fff) 95%, transparent); --hud69-soft: color-mix(in srgb, var(--theme-surface-soft, #edf7fb) 88%, transparent); --hud69-line: color-mix(in srgb, var(--theme-border, #c9dfe8) 82%, transparent); --hud69-blue: #258fe0; --hud69-teal: #18bcb6; --hud69-warning: #ed9a22; --hud69-critical: #df6257; --hud69-font: var(--ui-font, "Onest PokePark", "Segoe UI", system-ui, sans-serif); } .game-screen .player-chip, .game-screen .player-stamina-hud, .game-screen .chat-panel, .game-screen .desktop-dock, .game-screen .mobile-dock { font-family: var(--hud69-font) !important; } /* Keep the conversation as the flexible row. The settings row may appear or disappear without collapsing the message list into a short strip. */ .game-screen .chat-panel.chat-messenger:not(.is-minimized) { grid-template-rows: auto auto auto minmax(0, 1fr) !important; gap: 0 !important; } .game-screen .chat-panel.chat-messenger:not(.is-minimized) > .chat-head { grid-row: 1; } .game-screen .chat-panel.chat-messenger:not(.is-minimized) > .chat-config { grid-row: 2; } .game-screen .chat-panel.chat-messenger:not(.is-minimized) > .chat-tabs { grid-row: 3; } .game-screen .chat-panel.chat-messenger:not(.is-minimized) > .chat-messenger-layout { grid-row: 4; height: 100%; min-height: 0; } .game-screen .player-chip { isolation: isolate; overflow: hidden; border: 1px solid var(--hud69-line) !important; background: var(--hud69-card) !important; color: var(--hud69-ink) !important; box-shadow: 0 14px 34px rgba(6, 38, 53, .15), inset 0 1px rgba(255, 255, 255, .78) !important; backdrop-filter: blur(18px) saturate(1.08) !important; } .game-screen .player-chip::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: 3px; background: var(--hud69-blue); opacity: .72; } .game-screen .player-chip-avatar { flex: 0 0 auto; border: 2px solid color-mix(in srgb, var(--hud69-blue) 58%, #fff) !important; background-color: #e8f4f8 !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--hud69-blue) 10%, transparent), 0 8px 18px rgba(13, 55, 72, .16) !important; } .game-screen .player-chip-copy { display: grid !important; min-width: 0; align-content: center; } .game-screen .player-chip-identity { display: flex !important; min-width: 0; align-items: center !important; justify-content: space-between !important; } .game-screen #worldPlayerName { min-width: 0 !important; max-width: none !important; overflow: hidden !important; color: var(--hud69-ink) !important; font-weight: 820 !important; letter-spacing: -.018em; text-overflow: ellipsis !important; white-space: nowrap !important; } .game-screen #worldPlayerLevel { flex: 0 0 auto; margin-left: 8px; border: 1px solid color-mix(in srgb, var(--hud69-blue) 20%, var(--hud69-line)); border-radius: 999px; background: color-mix(in srgb, var(--hud69-blue) 8%, var(--hud69-soft)); color: color-mix(in srgb, var(--hud69-blue) 76%, var(--hud69-ink)) !important; font-style: normal; font-weight: 820 !important; line-height: 1; white-space: nowrap; } .game-screen .player-chip-meta { display: flex !important; min-width: 0; align-items: center; min-height: 12px; } .game-screen .player-connection { display: flex !important; min-width: 0; align-items: center; margin: 0 !important; color: var(--hud69-muted) !important; white-space: nowrap; } .game-screen .player-chip-progress { display: grid !important; min-width: 0; align-items: center !important; margin: 1px 0 0 !important; } .game-screen .player-chip-progress > small { display: grid !important; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; margin: 0 !important; color: var(--hud69-muted) !important; font-weight: 780 !important; letter-spacing: 0 !important; text-transform: none !important; } .game-screen .player-chip-progress > small img { display: block; width: 100%; height: 100%; } .game-screen .player-chip-progress > i { position: relative; display: block !important; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--hud69-muted) 14%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--theme-muted, #6d8796) 16%, transparent) !important; box-shadow: inset 0 1px 2px rgba(20, 53, 67, .08); } .game-screen .player-chip-progress > i > b { position: absolute; inset: 0 auto 0 0; border-radius: inherit; transition: width .2s ease; } .game-screen .player-chip-progress.is-exp > i > b { background: linear-gradient(90deg, #2e8cf7, #57c4ef) !important; box-shadow: none !important; } .game-screen .player-chip-progress.is-energy > i > b { background: linear-gradient(90deg, #f0a21c, #ffd34d) !important; box-shadow: none !important; } .game-screen .player-chip-progress > em { color: color-mix(in srgb, var(--hud69-ink) 82%, var(--hud69-muted)) !important; font-style: normal; font-weight: 750 !important; font-variant-numeric: tabular-nums; line-height: 1; text-align: right; white-space: nowrap; } .game-screen .player-stamina-hud { --stamina-color: var(--hud69-teal); isolation: isolate; overflow: hidden; border: 1px solid var(--hud69-line) !important; background: var(--hud69-card) !important; color: var(--hud69-ink) !important; box-shadow: 0 9px 22px rgba(6, 38, 53, .12), inset 0 1px rgba(255, 255, 255, .7) !important; backdrop-filter: blur(16px) saturate(1.06) !important; } .game-screen .player-stamina-hud::before { background: var(--stamina-color) !important; } .game-screen .player-stamina-hud.is-tired { --stamina-color: var(--hud69-warning); } .game-screen .player-stamina-hud.is-critical { --stamina-color: var(--hud69-critical); } .game-screen .player-stamina-hud.is-sprinting { transform: translateX(2px) !important; } .game-screen .player-stamina-title { display: grid !important; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; } .game-screen .player-stamina-title > img { display: block; } .game-screen .player-stamina-title > span { display: grid; min-width: 0; } .game-screen .player-stamina-title small, .game-screen .player-stamina-title b { margin: 0 !important; line-height: 1.05; } .game-screen .player-stamina-title small { color: var(--stamina-color) !important; font-weight: 850 !important; letter-spacing: .06em; } .game-screen .player-stamina-title b { overflow: hidden; color: var(--hud69-ink) !important; font-weight: 740 !important; text-overflow: ellipsis; white-space: nowrap; } .game-screen .player-stamina-meter { display: grid !important; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .game-screen .player-stamina-meter > i { position: relative; display: block; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--theme-muted, #6d8796) 16%, transparent) !important; } .game-screen .player-stamina-meter > i > b { position: absolute; inset: 0 auto 0 0; width: var(--player-stamina, 100%); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--stamina-color) 78%, #fff), var(--stamina-color)) !important; box-shadow: none !important; } .game-screen .player-stamina-meter > em { color: color-mix(in srgb, var(--hud69-ink) 82%, var(--hud69-muted)) !important; font-style: normal; font-weight: 760 !important; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } @media (min-width: 761px) { .game-screen .world-topbar { top: max(14px, env(safe-area-inset-top)) !important; left: max(18px, env(safe-area-inset-left)) !important; } .game-screen .player-chip { display: grid !important; width: clamp(312px, 22vw, 348px) !important; min-width: 312px !important; min-height: 106px !important; grid-template-columns: 68px minmax(0, 1fr); gap: 12px !important; align-items: center !important; padding: 10px 15px 10px 10px !important; border-radius: 22px !important; } .game-screen .player-chip-avatar { width: 66px !important; height: 66px !important; } .game-screen .player-chip-copy { gap: 4px !important; } .game-screen #worldPlayerName { font-size: 14px !important; } .game-screen #worldPlayerLevel { padding: 4px 8px; font-size: 8px !important; } .game-screen .player-connection { font-size: 7px !important; } .game-screen .player-chip-progress { grid-template-columns: 52px minmax(0, 1fr) 62px !important; gap: 6px !important; } .game-screen .player-chip-progress > small { grid-template-columns: 22px minmax(0, 1fr); gap: 4px; font-size: 7px !important; } .game-screen .player-chip-progress > i { height: 7px !important; } .game-screen .player-chip-progress > em { font-size: 7.2px !important; } .game-screen .player-stamina-hud, .game-screen .party-hud[data-count="1"] + .player-stamina-hud, .game-screen .party-hud[data-count="2"] + .player-stamina-hud { --party-hud-offset: 0px !important; left: max(18px, env(safe-area-inset-left)) !important; top: calc(max(14px, env(safe-area-inset-top)) + 114px) !important; width: clamp(312px, 22vw, 348px) !important; min-height: 42px !important; grid-template-columns: 122px minmax(0, 1fr) !important; gap: 9px !important; padding: 5px 10px 5px 8px !important; border-radius: 14px !important; } .game-screen .player-stamina-title { grid-template-columns: 30px minmax(0, 1fr); gap: 7px; } .game-screen .player-stamina-title > img { width: 29px; height: 29px; } .game-screen .player-stamina-title small { font-size: 7px !important; } .game-screen .player-stamina-title b { font-size: 7.5px !important; } .game-screen .player-stamina-meter { grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; } .game-screen .player-stamina-meter > i { height: 7px !important; } .game-screen .player-stamina-meter > em { font-size: 7px !important; } .game-screen .party-hud { top: calc(max(14px, env(safe-area-inset-top)) + 164px) !important; } .game-screen .desktop-dock button { border-color: var(--hud69-line) !important; background: var(--hud69-card) !important; box-shadow: 0 10px 24px rgba(6, 38, 53, .13), inset 0 1px rgba(255, 255, 255, .76) !important; } .game-screen .desktop-dock button > b { color: color-mix(in srgb, var(--hud69-ink) 88%, var(--hud69-muted)) !important; font-family: inherit !important; font-weight: 760 !important; } .game-screen .chat-panel.chat-messenger:not(.is-minimized) { left: max(18px, env(safe-area-inset-left)) !important; bottom: max(18px, env(safe-area-inset-bottom)) !important; width: clamp(420px, 34vw, 540px) !important; height: min(620px, calc(100dvh - 188px)) !important; max-width: calc(100vw - 36px) !important; max-height: calc(100dvh - 36px) !important; border: 1px solid var(--hud69-line) !important; border-radius: 22px !important; background: var(--hud69-card) !important; box-shadow: 0 24px 58px rgba(4, 31, 46, .24), inset 0 1px rgba(255, 255, 255, .76) !important; } .game-screen .chat-panel.is-minimized { left: max(18px, env(safe-area-inset-left)) !important; bottom: max(18px, env(safe-area-inset-bottom)) !important; width: clamp(330px, 26vw, 398px) !important; min-width: 330px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; padding: 8px 9px 8px 12px !important; border-radius: 18px !important; } .game-screen .chat-panel.is-minimized .chat-head { min-height: 46px !important; } .game-screen .chat-panel.is-minimized .chat-title-copy > b { font-size: 13.5px !important; } .game-screen .chat-panel.is-minimized .chat-title-copy > small { margin-left: 36px !important; font-size: 8px !important; } } @media (min-width: 761px) and (max-width: 980px) { .game-screen .player-chip, .game-screen .player-stamina-hud, .game-screen .party-hud[data-count="1"] + .player-stamina-hud, .game-screen .party-hud[data-count="2"] + .player-stamina-hud { width: 286px !important; min-width: 286px !important; } .game-screen .player-chip { min-height: 94px !important; grid-template-columns: 58px minmax(0, 1fr); padding: 8px 12px 8px 8px !important; } .game-screen .player-chip-avatar { width: 56px !important; height: 56px !important; } .game-screen #worldPlayerName { font-size: 12px !important; } .game-screen .player-chip-progress { grid-template-columns: 45px minmax(0, 1fr) 54px !important; gap: 4px !important; } .game-screen .player-chip-progress > small { grid-template-columns: 19px minmax(0, 1fr); gap: 3px; font-size: 6px !important; } .game-screen .player-stamina-hud, .game-screen .party-hud[data-count="1"] + .player-stamina-hud, .game-screen .party-hud[data-count="2"] + .player-stamina-hud { top: calc(max(12px, env(safe-area-inset-top)) + 102px) !important; } .game-screen .party-hud { top: calc(max(12px, env(safe-area-inset-top)) + 151px) !important; } .game-screen .chat-panel.is-minimized { width: 300px !important; min-width: 300px !important; } } @media (max-width: 760px) { .game-screen .world-topbar { top: max(8px, env(safe-area-inset-top)) !important; left: max(8px, env(safe-area-inset-left)) !important; right: auto !important; width: auto !important; } .game-screen .player-chip { display: grid !important; width: min(298px, calc(100vw - 126px)) !important; min-width: 188px !important; min-height: 92px !important; grid-template-columns: 58px minmax(0, 1fr); gap: 8px !important; align-items: center !important; padding: 7px 12px 7px 7px !important; border-radius: 19px !important; } .game-screen .player-chip::before { width: 2px; } .game-screen .player-chip-avatar { width: 56px !important; height: 56px !important; } .game-screen .player-chip-copy { gap: 3px !important; } .game-screen #worldPlayerName { font-size: 11px !important; } .game-screen #worldPlayerLevel { padding: 3px 6px; font-size: 6px !important; } .game-screen .player-connection { font-size: 5.5px !important; } .game-screen .player-chip-progress { grid-template-columns: 25px minmax(0, 1fr) 47px !important; gap: 4px !important; } .game-screen .player-chip-progress > small { grid-template-columns: 20px; gap: 0; font-size: 0 !important; } .game-screen .player-chip-progress > small span { display: none; } .game-screen .player-chip-progress > i { height: 6px !important; } .game-screen .player-chip-progress > em { font-size: 5.7px !important; } .game-screen .player-community-role { max-width: 47px !important; } .game-screen .player-stamina-hud { display: none !important; } .game-screen .party-hud { top: calc(max(8px, env(safe-area-inset-top)) + 101px) !important; width: min(298px, calc(100vw - 126px)) !important; } .game-screen .quest-widget { top: calc(max(8px, env(safe-area-inset-top)) + 118px) !important; } .game-screen .movement-zone { bottom: calc(96px + env(safe-area-inset-bottom)) !important; } .game-screen .joystick { --joystick-stamina: 100; --joystick-stamina-color: var(--hud69-teal); width: 150px !important; height: 150px !important; overflow: visible; border: 0 !important; background: url('/assets/v6.9/hud/joystick/joystick-base.svg') center/contain no-repeat !important; box-shadow: 0 14px 32px rgba(4, 29, 46, .25) !important; backdrop-filter: none !important; } .game-screen .joystick[data-stamina-level="low"] { --joystick-stamina-color: var(--hud69-warning); } .game-screen .joystick[data-stamina-level="critical"] { --joystick-stamina-color: var(--hud69-critical); } .game-screen .joystick::after { content: ""; position: absolute; z-index: 3; inset: -5px; border-radius: 50%; background: conic-gradient(from -90deg, var(--joystick-stamina-color) calc(var(--joystick-stamina) * 1%), rgba(227, 243, 248, .18) 0); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--joystick-stamina-color) 36%, transparent)); pointer-events: none; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); } .game-screen .joystick::before { content: ""; position: absolute; inset: 17px; border: 1px solid rgba(239, 251, 255, .34); border-radius: 50%; opacity: 1; transform: none; } .game-screen .joystick > span { display: none !important; } .game-screen .joystick > i { z-index: 4; width: 58px !important; height: 58px !important; border: 2px solid rgba(255, 255, 255, .88) !important; background: linear-gradient(145deg, rgba(252, 254, 255, .96), rgba(218, 236, 242, .92)) !important; box-shadow: 0 9px 20px rgba(6, 37, 55, .24), inset 0 1px #fff !important; } .game-screen .joystick > em.joystick-run-status-v69 { position: absolute; z-index: 5; top: -38px; left: 50%; display: grid !important; min-width: 108px; grid-template-columns: 24px 1fr auto; gap: 5px; align-items: center; padding: 5px 8px 5px 6px; transform: translateX(-50%) !important; border: 1px solid color-mix(in srgb, var(--joystick-stamina-color) 34%, rgba(255, 255, 255, .5)); border-radius: 999px; background: rgba(9, 42, 58, .88) !important; color: #f4fbfd !important; box-shadow: 0 8px 20px rgba(4, 29, 46, .2); font-size: 8px !important; font-style: normal; font-weight: 820; letter-spacing: .04em; opacity: 1 !important; backdrop-filter: blur(10px); } .game-screen .joystick > em.joystick-run-status-v69 img { width: 24px; height: 24px; } .game-screen .joystick > em.joystick-run-status-v69 strong { color: var(--joystick-stamina-color); font-size: 9px; font-weight: 850; font-variant-numeric: tabular-nums; } .game-screen .joystick.is-exhausted > em.joystick-run-status-v69 { border-color: color-mix(in srgb, var(--hud69-critical) 48%, rgba(255, 255, 255, .42)); } .game-screen .joystick.is-sprinting { animation: none !important; } .game-screen .mobile-dock { left: 50% !important; right: auto !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; display: grid !important; width: min(430px, calc(100vw - max(16px, env(safe-area-inset-left) + env(safe-area-inset-right)))) !important; height: 78px !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(76px, 1.28fr) minmax(0, 1fr) minmax(0, 1fr) !important; gap: 3px !important; align-items: center; padding: 7px !important; transform: translateX(-50%); border: 1px solid var(--hud69-line) !important; border-radius: 22px !important; background: var(--hud69-card) !important; box-shadow: 0 18px 42px rgba(4, 32, 48, .22), inset 0 1px rgba(255, 255, 255, .78) !important; backdrop-filter: blur(18px) saturate(1.08) !important; } .game-screen .mobile-dock button { display: grid !important; min-width: 0 !important; min-height: 58px !important; grid-template-rows: 30px auto !important; place-items: center; align-content: center; gap: 3px !important; margin: 0 !important; padding: 4px 2px !important; border: 1px solid transparent !important; border-radius: 15px !important; background: transparent !important; color: var(--hud69-muted) !important; box-shadow: none !important; } .game-screen .mobile-dock button > span { display: grid !important; width: 30px !important; height: 30px !important; place-items: center; } .game-screen .mobile-dock .mobile-nav-asset-v69 { display: block; width: 28px; height: 28px; } .game-screen .mobile-dock button > b { max-width: 100%; overflow: hidden; color: currentColor !important; font-size: 9.5px !important; font-weight: 720 !important; letter-spacing: -.015em; text-overflow: ellipsis; text-transform: none; white-space: nowrap; } .game-screen .mobile-dock button:is(.is-active, .is-menu-open):not(.mobile-dock-primary) { border-color: color-mix(in srgb, var(--hud69-blue) 18%, transparent) !important; background: color-mix(in srgb, var(--hud69-blue) 8%, transparent) !important; color: color-mix(in srgb, var(--hud69-blue) 80%, var(--hud69-ink)) !important; } .game-screen .mobile-dock button:is(.is-active, .is-menu-open):not(.mobile-dock-primary)::after { bottom: 3px !important; width: 20px !important; height: 2px !important; background: var(--hud69-blue) !important; opacity: .9 !important; } .game-screen .mobile-dock .mobile-dock-primary { position: relative; width: 100% !important; min-width: 76px !important; height: 54px !important; min-height: 54px !important; grid-template-columns: 28px auto 7px !important; grid-template-rows: 1fr !important; gap: 5px !important; padding: 0 10px !important; border: 1px solid color-mix(in srgb, var(--hud69-blue) 70%, #fff) !important; border-radius: 16px !important; background: linear-gradient(145deg, #36a7ec, #267fce) !important; color: #fff !important; box-shadow: 0 9px 20px rgba(27, 117, 184, .24), inset 0 1px rgba(255, 255, 255, .28) !important; } .game-screen .mobile-dock .mobile-dock-primary > span { width: 28px !important; height: 28px !important; } .game-screen .mobile-dock .mobile-dock-primary .mobile-nav-asset-v69 { width: 26px; height: 26px; filter: brightness(0) invert(1); } .game-screen .mobile-dock .mobile-dock-primary > b { color: #fff !important; font-size: 10px !important; } .game-screen .mobile-chat-online-v69 { display: block; width: 7px; height: 7px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; background: #46c96f; text-decoration: none; } .game-screen .mobile-dock .mobile-dock-primary > i { top: -5px !important; right: -3px !important; min-width: 20px !important; height: 20px !important; padding: 0 5px !important; border: 2px solid #fff !important; background: #efa823 !important; font-size: 8px !important; } .game-screen .chat-panel.chat-messenger { top: max(8px, env(safe-area-inset-top)) !important; right: max(8px, env(safe-area-inset-right)) !important; bottom: calc(96px + env(safe-area-inset-bottom)) !important; left: max(8px, env(safe-area-inset-left)) !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; border: 1px solid var(--hud69-line) !important; border-radius: 24px !important; background: var(--hud69-card) !important; box-shadow: 0 24px 60px rgba(4, 31, 46, .28), inset 0 1px rgba(255, 255, 255, .76) !important; } .game-screen .chat-panel .chat-head { min-height: 58px !important; padding: 7px 8px 7px 10px !important; } .game-screen .chat-panel .chat-title-copy > b { font-size: 14px !important; } .game-screen .chat-panel .chat-title-copy > small { font-size: 8px !important; } .game-screen .chat-panel .chat-tabs { margin: 0 8px; } .game-screen .chat-panel .chat-messenger-layout { min-height: 0; } .game-screen .chat-panel .chat-conversation { min-height: 0; } .game-screen .chat-panel .chat-log-wrap { min-height: 0; } } @media (max-width: 360px) { .game-screen .player-chip { width: min(212px, calc(100vw - 134px)) !important; min-width: 180px !important; min-height: 84px !important; grid-template-columns: 48px minmax(0, 1fr); gap: 6px !important; padding: 6px 8px 6px 6px !important; } .game-screen .player-chip-avatar { width: 46px !important; height: 46px !important; } .game-screen #worldPlayerName { font-size: 9.5px !important; } .game-screen #worldPlayerLevel { margin-left: 4px; padding: 2px 4px; font-size: 5px !important; } .game-screen .player-chip-progress { grid-template-columns: 20px minmax(0, 1fr) 39px !important; gap: 3px !important; } .game-screen .player-chip-progress > small { grid-template-columns: 17px; } .game-screen .player-chip-progress > em { font-size: 4.8px !important; } .game-screen .mobile-dock { height: 72px !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(68px, 1.22fr) minmax(0, 1fr) minmax(0, 1fr) !important; gap: 1px !important; padding: 5px !important; } .game-screen .mobile-dock button { min-height: 54px !important; } .game-screen .mobile-dock button > b { font-size: 8px !important; } .game-screen .mobile-dock .mobile-dock-primary { min-width: 68px !important; height: 50px !important; min-height: 50px !important; grid-template-columns: 24px auto 6px !important; gap: 3px !important; padding: 0 7px !important; } .game-screen .mobile-dock .mobile-dock-primary .mobile-nav-asset-v69 { width: 23px; height: 23px; } .game-screen .mobile-dock .mobile-dock-primary > b { font-size: 9px !important; } .game-screen .mobile-chat-online-v69 { width: 6px; height: 6px; } .game-screen .movement-zone { bottom: calc(88px + env(safe-area-inset-bottom)) !important; } .game-screen .chat-panel.chat-messenger { bottom: calc(88px + env(safe-area-inset-bottom)) !important; } } @media (prefers-reduced-motion: reduce) { .game-screen .player-chip-progress > i > b, .game-screen .player-stamina-hud, .game-screen .player-stamina-meter > i > b, .game-screen .mobile-dock button, .game-screen .chat-panel { transition: none !important; animation: none !important; } } /* pk-style-source:52 */ /* /main-hud-v70.css */ /* Main HUD v70 — one readable field-interface language, anchored to the interaction card and minimap rather than to tiny technical telemetry. */ .game-screen[data-main-hud="v70"] { --hud70-ink: #173f52; --hud70-muted: #6a8390; --hud70-line: rgba(174, 205, 214, .88); --hud70-card: rgba(247, 251, 249, .95); --hud70-card-strong: rgba(252, 254, 253, .98); --hud70-soft: #eaf3f3; --hud70-blue: #2a99db; --hud70-blue-dark: #157fc0; --hud70-green: #22a98b; --hud70-yellow: #f0b43d; --hud70-red: #ef4b52; --hud70-shadow: 0 16px 38px rgba(5, 38, 50, .17), inset 0 1px rgba(255, 255, 255, .88); --hud70-font: var(--ui-font, "Onest PokePark", "Segoe UI", system-ui, sans-serif); } .game-screen[data-main-hud="v70"] :is( .player-chip, .player-stamina-hud, .world-wallet, .world-minimap, .quest-widget, .chat-panel, .desktop-dock, .mobile-dock, .world-rail ) { font-family: var(--hud70-font) !important; } .game-screen[data-main-hud="v70"] .instance-chip { display: none !important; } /* Trainer identity: name first, resources second, diagnostics out of sight. */ .game-screen[data-main-hud="v70"] .player-chip { position: relative !important; isolation: isolate; overflow: hidden !important; border: 1px solid var(--hud70-line) !important; background: var(--hud70-card) !important; color: var(--hud70-ink) !important; box-shadow: var(--hud70-shadow) !important; backdrop-filter: blur(18px) saturate(1.04) !important; } .game-screen[data-main-hud="v70"] .player-chip::before { inset: 0 auto 0 0 !important; width: 4px !important; border-radius: 0 !important; background: var(--hud70-blue) !important; opacity: 1 !important; } .game-screen[data-main-hud="v70"] .player-chip::after { content: ""; position: absolute; z-index: -1; top: -50px; left: -22px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(49, 161, 220, .12), transparent 68%); pointer-events: none; } .game-screen[data-main-hud="v70"] .player-chip-avatar { border: 2px solid rgba(255, 255, 255, .95) !important; background-color: #dff2f4 !important; box-shadow: 0 0 0 1px rgba(48, 139, 177, .24), 0 8px 19px rgba(12, 55, 68, .16) !important; } .game-screen[data-main-hud="v70"] .player-chip-copy { display: grid !important; min-width: 0; align-content: center; } .game-screen[data-main-hud="v70"] .player-chip-identity { display: flex !important; min-width: 0; align-items: center !important; justify-content: flex-start !important; } .game-screen[data-main-hud="v70"] #worldPlayerName { min-width: 0 !important; max-width: none !important; overflow: hidden !important; color: var(--hud70-ink) !important; font-weight: 850 !important; letter-spacing: -.025em !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .game-screen[data-main-hud="v70"] #worldPlayerLevel { flex: 0 0 auto; border: 1px solid rgba(42, 153, 219, .24) !important; border-radius: 999px !important; background: rgba(42, 153, 219, .09) !important; color: #177fb9 !important; font-style: normal !important; font-weight: 850 !important; line-height: 1 !important; } .game-screen[data-main-hud="v70"] .player-chip-meta { display: none !important; } .game-screen[data-main-hud="v70"] .player-hud-kind-v70 { color: var(--hud70-muted) !important; font-weight: 750 !important; } .game-screen[data-main-hud="v70"] .player-connection { display: inline-flex !important; width: auto !important; min-width: 0 !important; align-items: center !important; color: var(--hud70-muted) !important; } .game-screen[data-main-hud="v70"] .player-connection > span { display: none !important; } .game-screen[data-main-hud="v70"] .player-connection > i { width: 8px !important; height: 8px !important; margin: 0 !important; border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; box-shadow: 0 0 0 2px rgba(52, 188, 111, .12); } .game-screen[data-main-hud="v70"] .player-community-role { max-width: 98px !important; min-height: 18px !important; padding: 2px 7px !important; font-size: 9px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress { display: grid !important; min-width: 0; align-items: center !important; margin: 0 !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > small { display: grid !important; min-width: 0; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; margin: 0 !important; color: var(--hud70-muted) !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > small img { display: block !important; width: 100% !important; height: 100% !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > i { position: relative; display: block !important; min-width: 0; overflow: hidden; border: 0 !important; border-radius: 999px !important; background: #d9e6e8 !important; box-shadow: inset 0 1px 2px rgba(22, 59, 69, .08) !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > i > b { position: absolute; inset: 0 auto 0 0; border-radius: inherit; transition: width .2s ease; } .game-screen[data-main-hud="v70"] .player-chip-progress.is-exp > i > b { background: linear-gradient(90deg, #258fd6, #55bee2) !important; box-shadow: none !important; } .game-screen[data-main-hud="v70"] .player-chip-progress.is-energy { opacity: 1 !important; } .game-screen[data-main-hud="v70"] .player-chip-progress.is-energy > i > b { background: linear-gradient(90deg, #e8a62c, #f6cb51) !important; box-shadow: none !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > em { color: #426475 !important; font-style: normal !important; font-weight: 780 !important; font-variant-numeric: tabular-nums; line-height: 1 !important; text-align: right; white-space: nowrap; } .game-screen[data-main-hud="v70"] .player-chip-open-hint { display: grid !important; place-items: center; border: 1px solid rgba(42, 153, 219, .16); background: rgba(42, 153, 219, .06); color: #48819c !important; } /* Sprint is a real movement resource, not a third microscopic profile row. */ .game-screen[data-main-hud="v70"] .player-stamina-hud { --stamina-color: var(--hud70-green); display: grid !important; overflow: hidden; align-items: center !important; border: 1px solid var(--hud70-line) !important; background: var(--hud70-card) !important; color: var(--hud70-ink) !important; box-shadow: 0 10px 24px rgba(5, 38, 50, .13), inset 0 1px rgba(255, 255, 255, .86) !important; opacity: 1 !important; backdrop-filter: blur(16px) !important; } .game-screen[data-main-hud="v70"] .player-stamina-hud::before { width: 4px !important; background: var(--stamina-color) !important; opacity: 1 !important; } .game-screen[data-main-hud="v70"] .player-stamina-hud.is-tired { --stamina-color: #e4a033; } .game-screen[data-main-hud="v70"] .player-stamina-hud.is-critical { --stamina-color: #e25a52; } .game-screen[data-main-hud="v70"] .player-stamina-title { display: grid !important; min-width: 0; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; } .game-screen[data-main-hud="v70"] .player-stamina-title > img { display: block; } .game-screen[data-main-hud="v70"] .player-stamina-title > span { display: grid; min-width: 0; gap: 2px; } .game-screen[data-main-hud="v70"] .player-stamina-title small { color: var(--stamina-color) !important; font-weight: 900 !important; letter-spacing: .06em !important; } .game-screen[data-main-hud="v70"] .player-stamina-title b { display: block !important; color: var(--hud70-ink) !important; font-weight: 780 !important; } .game-screen[data-main-hud="v70"] .player-stamina-meter { display: grid !important; min-width: 0; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; } .game-screen[data-main-hud="v70"] .player-stamina-meter > i { position: relative; display: block; overflow: hidden; border-radius: 999px; background: #d9e6e8 !important; } .game-screen[data-main-hud="v70"] .player-stamina-meter > i > b { background: linear-gradient(90deg, color-mix(in srgb, var(--stamina-color) 76%, #fff), var(--stamina-color)) !important; box-shadow: none !important; } .game-screen[data-main-hud="v70"] .player-stamina-meter > em { color: #426475 !important; font-style: normal; font-weight: 800 !important; font-variant-numeric: tabular-nums; } /* Resource rail: clear values, compact add action, no nested glass blocks. */ .game-screen[data-main-hud="v70"] .world-wallet { border: 1px solid var(--hud70-line) !important; background: var(--hud70-card) !important; box-shadow: 0 12px 29px rgba(5, 38, 50, .14), inset 0 1px rgba(255, 255, 255, .88) !important; backdrop-filter: blur(18px) !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency { border: 0 !important; background: transparent !important; color: var(--hud70-ink) !important; box-shadow: none !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency + .world-wallet-currency { border-left: 1px solid #d6e4e7 !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency-icon, .game-screen[data-main-hud="v70"] .world-wallet-currency-icon img { display: block !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency b { color: var(--hud70-ink) !important; font-weight: 850 !important; font-variant-numeric: tabular-nums; } .game-screen[data-main-hud="v70"] .world-wallet-currency button { border: 1px solid #d2e3e7 !important; background: #eaf3f4 !important; color: #286478 !important; font-weight: 800 !important; box-shadow: none !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency button:hover { border-color: rgba(42, 153, 219, .42) !important; background: rgba(42, 153, 219, .12) !important; color: #147db7 !important; } /* Preserve the minimap concept the user likes; only align typography/chrome. */ .game-screen[data-main-hud="v70"] .world-minimap { --world-hud-radius: 24px; box-shadow: 0 18px 42px rgba(5, 38, 50, .21), 0 3px 10px rgba(5, 38, 50, .10) !important; } .game-screen[data-main-hud="v70"] .world-minimap-topbar { background: rgba(24, 57, 65, .94) !important; } .game-screen[data-main-hud="v70"] .world-minimap-place b, .game-screen[data-main-hud="v70"] .world-minimap-topbar time, .game-screen[data-main-hud="v70"] .world-minimap-channel-copy b, .game-screen[data-main-hud="v70"] .world-minimap-ping b { font-weight: 800 !important; } /* Quest HUD: one current decision, large title, no reward/debug narration. */ .game-screen[data-main-hud="v70"] .quest-widget, .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed { overflow: hidden !important; border: 1px solid var(--hud70-line) !important; background: var(--hud70-card) !important; color: var(--hud70-ink) !important; box-shadow: var(--hud70-shadow) !important; backdrop-filter: blur(18px) !important; } .game-screen[data-main-hud="v70"] .quest-tracker-head-v57 { min-width: 0; border-bottom: 1px solid rgba(173, 204, 213, .52) !important; background: transparent !important; } .game-screen[data-main-hud="v70"] .quest-tracker-heading-v62 { display: flex; align-items: center; gap: 9px; } .game-screen[data-main-hud="v70"] .quest-tracker-heading-v62 > img { display: block; width: 30px; height: 30px; flex: 0 0 30px; } .game-screen[data-main-hud="v70"] .quest-tracker-compact-v62 { display: none; min-width: 0; align-items: center; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; } .game-screen[data-main-hud="v70"] .quest-tracker-compact-v62 > img { display: block; width: 32px; height: 32px; } .game-screen[data-main-hud="v70"] .quest-tracker-compact-v62 > span { display: grid; min-width: 0; gap: 2px; } .game-screen[data-main-hud="v70"] .quest-tracker-compact-v62 small { color: #718b96; font-weight: 850; letter-spacing: .055em; } .game-screen[data-main-hud="v70"] .quest-tracker-compact-v62 b { overflow: hidden; color: var(--hud70-ink); font-weight: 850; text-overflow: ellipsis; white-space: nowrap; } .game-screen[data-main-hud="v70"] .quest-tracker-compact-v62 strong { color: #7c58df; font-weight: 900; } .game-screen[data-main-hud="v70"] .quest-tracker-head-v57 > span:first-child, .game-screen[data-main-hud="v70"] .quest-tracker-heading-v62 { min-width: 0; } .game-screen[data-main-hud="v70"] .quest-tracker-heading-v62 > b, .game-screen[data-main-hud="v70"] .quest-tracker-head-v57 > span:first-child > b { color: var(--hud70-ink) !important; font-weight: 850 !important; letter-spacing: -.015em !important; } .game-screen[data-main-hud="v70"] .quest-tracker-heading-v62 > em { border-radius: 999px; background: rgba(42, 153, 219, .09) !important; color: #1984bd !important; font-style: normal; font-weight: 850 !important; } .game-screen[data-main-hud="v70"] .quest-tracker-head-v57 > div > small { display: none !important; } .game-screen[data-main-hud="v70"] .quest-tracker-head-v57 button { border: 1px solid #d2e2e6 !important; background: var(--hud70-card-strong) !important; color: #386878 !important; box-shadow: none !important; } .game-screen[data-main-hud="v70"] .quest-tracker-head-v57 button:hover { border-color: rgba(42, 153, 219, .4) !important; background: rgba(42, 153, 219, .08) !important; color: #1882bd !important; } .game-screen[data-main-hud="v70"] .quest-tracker-list-v57 { min-height: 0; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 { position: relative; min-width: 0; border-bottom: 1px solid rgba(173, 204, 213, .45) !important; background: transparent !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57.is-primary { background: linear-gradient(90deg, color-mix(in srgb, var(--quest-accent, #2a99db) 9%, transparent), transparent 72%) !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > svg, .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > .quest-type-graphic-v57 { filter: saturate(.82) !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > span > small { color: color-mix(in srgb, var(--quest-accent, #2a99db) 82%, var(--hud70-ink)) !important; font-weight: 850 !important; letter-spacing: .055em !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > span > b { color: var(--hud70-ink) !important; font-weight: 850 !important; letter-spacing: -.015em !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > span > em, .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > span > u { color: var(--hud70-muted) !important; font-style: normal; text-decoration: none; } .game-screen[data-main-hud="v70"] .quest-tracker-choice-v62 > strong { color: color-mix(in srgb, var(--quest-accent, #2a99db) 82%, var(--hud70-ink)) !important; font-weight: 900 !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > i { background: #d9e7e9 !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > i::before { background: var(--quest-accent, var(--hud70-blue)) !important; } .game-screen[data-main-hud="v70"] .quest-widget > p, .game-screen[data-main-hud="v70"] .quest-widget-meta, .game-screen[data-main-hud="v70"] .quest-widget-training-progress { display: none !important; } .game-screen[data-main-hud="v70"] .quest-widget > #questWidgetTitle { color: var(--hud70-ink) !important; font-weight: 850 !important; letter-spacing: -.015em; } .game-screen[data-main-hud="v70"] .quest-widget-target { border: 1px solid rgba(173, 204, 213, .58) !important; background: rgba(234, 243, 243, .72) !important; } .game-screen[data-main-hud="v70"] .quest-widget-target b { color: var(--hud70-ink) !important; } html[data-game-theme="dark"] .game-screen[data-main-hud="v70"] .quest-widget-target { border-color: #41697c !important; background: #203f51 !important; } html[data-game-theme="dark"] .game-screen[data-main-hud="v70"] .quest-widget-target b { color: #eef8fc !important; } html[data-game-theme="dark"] .game-screen[data-main-hud="v70"] .quest-widget-target small { color: #a8d1df !important; } /* Primary navigation: mature line icons, readable labels, restrained active state. */ .game-screen[data-main-hud="v70"] .desktop-dock { pointer-events: none; } .game-screen[data-main-hud="v70"] .desktop-dock button { pointer-events: auto; border: 1px solid var(--hud70-line) !important; background: var(--hud70-card) !important; color: #486b79 !important; box-shadow: 0 11px 25px rgba(5, 38, 50, .14), inset 0 1px rgba(255, 255, 255, .88) !important; backdrop-filter: blur(16px) !important; } .game-screen[data-main-hud="v70"] .desktop-dock button > span { background: transparent !important; } .game-screen[data-main-hud="v70"] .desktop-dock button > span img { display: block !important; width: 100% !important; height: 100% !important; filter: none !important; } .game-screen[data-main-hud="v70"] .desktop-dock button > b { max-width: none !important; color: currentColor !important; font-weight: 780 !important; letter-spacing: -.015em !important; text-transform: none !important; } .game-screen[data-main-hud="v70"] .desktop-dock button:hover { transform: translateY(-3px) !important; border-color: rgba(42, 153, 219, .42) !important; background: #f7fcfd !important; color: #167fb8 !important; } .game-screen[data-main-hud="v70"] .desktop-dock button:is(.is-active, .is-menu-open) { border-color: rgba(42, 153, 219, .46) !important; background: linear-gradient(180deg, #e2f3f9, #f4fafb) !important; color: #147eb8 !important; box-shadow: 0 13px 28px rgba(19, 104, 145, .17), inset 0 1px #fff !important; } .game-screen[data-main-hud="v70"] .world-rail { border: 1px solid var(--hud70-line) !important; background: var(--hud70-card-strong) !important; color: var(--hud70-ink) !important; box-shadow: 0 22px 52px rgba(5, 38, 50, .2), inset 0 1px #fff !important; } .game-screen[data-main-hud="v70"] .world-rail button { min-height: 54px !important; border: 1px solid transparent !important; border-radius: 14px !important; background: transparent !important; color: #496d7b !important; } .game-screen[data-main-hud="v70"] .world-rail button:hover { border-color: rgba(42, 153, 219, .18) !important; background: rgba(42, 153, 219, .07) !important; color: #167fb8 !important; } .game-screen[data-main-hud="v70"] .world-rail button b { font-size: 11px !important; font-weight: 780 !important; } /* Chat follows the same component scale instead of falling back to 7 px UI. */ .game-screen[data-main-hud="v70"] .chat-panel.chat-messenger { border: 1px solid var(--hud70-line) !important; background: var(--hud70-card-strong) !important; color: var(--hud70-ink) !important; box-shadow: 0 22px 54px rgba(5, 38, 50, .22), inset 0 1px #fff !important; } .game-screen[data-main-hud="v70"] .chat-head { border-bottom-color: rgba(173, 204, 213, .56) !important; } .game-screen[data-main-hud="v70"] .chat-title-copy > b { color: var(--hud70-ink) !important; font-weight: 850 !important; } .game-screen[data-main-hud="v70"] .chat-title-copy > small { display: flex !important; color: var(--hud70-muted) !important; font-weight: 700 !important; } .game-screen[data-main-hud="v70"] .chat-head-actions button { border: 1px solid #d3e3e7 !important; background: #edf5f5 url('/assets/v7.0/hud/nav/search.svg') center/23px 23px no-repeat !important; color: #426b7a !important; font-size: 0 !important; } .game-screen[data-main-hud="v70"] .chat-panel.is-minimized .chat-head-actions button::before, .game-screen[data-main-hud="v70"] .chat-panel.is-minimized .chat-head-actions button::after, .game-screen[data-main-hud="v70"] .chat-panel.is-minimized .chat-head-actions button > * { display: none !important; } .game-screen[data-main-hud="v70"] .chat-panel.chat-messenger.is-minimized .chat-head-actions > button { background-color: #edf5f5 !important; background-image: url('/assets/v7.0/hud/nav/search.svg') !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 23px 23px !important; } .game-screen[data-main-hud="v70"] .chat-title-icon { background: url('/assets/v7.0/hud/nav/chat.svg') center/20px 20px no-repeat !important; font-size: 0 !important; } .game-screen[data-main-hud="v70"] .chat-title-icon::before, .game-screen[data-main-hud="v70"] .chat-title-icon::after { display: none !important; } .game-screen[data-main-hud="v70"] .chat-tabs { border-color: rgba(173, 204, 213, .55) !important; background: #edf5f5 !important; } .game-screen[data-main-hud="v70"] .chat-tabs button { color: #617d89 !important; font-weight: 780 !important; } .game-screen[data-main-hud="v70"] .chat-tabs button.is-active { background: #fff !important; color: #137eb9 !important; box-shadow: 0 4px 11px rgba(18, 73, 94, .09) !important; } .game-screen[data-main-hud="v70"] .chat-messenger-layout { background: #fbfdfd !important; } .game-screen[data-main-hud="v70"] .chat-message:hover { background: #f0f6f6 !important; } .game-screen[data-main-hud="v70"] .chat-author-button { color: var(--hud70-ink) !important; font-weight: 820 !important; } .game-screen[data-main-hud="v70"] .chat-message p { color: #526f7d !important; } .game-screen[data-main-hud="v70"] #chatForm { border-color: #d5e4e7 !important; background: #f5f9f9 !important; } .game-screen[data-main-hud="v70"] #chatForm textarea { color: var(--hud70-ink) !important; } .game-screen[data-main-hud="v70"] .chat-send-button { background: linear-gradient(180deg, #35a5e5, #208bd0) !important; } @media (min-width: 761px) { .game-screen[data-main-hud="v70"] { --world-hud-width: clamp(336px, 24vw, 360px); --world-hud-map-height: clamp(226px, 16vw, 248px); --world-hud-gap: 14px; } .game-screen[data-main-hud="v70"] .world-topbar { top: max(18px, env(safe-area-inset-top)) !important; left: max(18px, env(safe-area-inset-left)) !important; right: max(18px, env(safe-area-inset-right)) !important; } .game-screen[data-main-hud="v70"] .player-chip { display: grid !important; width: 360px !important; min-width: 360px !important; min-height: 116px !important; grid-template-columns: 78px minmax(0, 1fr) !important; gap: 13px !important; align-items: center !important; padding: 12px 17px 12px 12px !important; border-radius: 26px !important; } .game-screen[data-main-hud="v70"] .player-chip-avatar { width: 74px !important; height: 74px !important; } .game-screen[data-main-hud="v70"] .player-chip-copy { gap: 8px !important; } .game-screen[data-main-hud="v70"] #worldPlayerName { font-size: 17px !important; } .game-screen[data-main-hud="v70"] #worldPlayerLevel { margin-left: 9px !important; padding: 5px 9px !important; font-size: 10px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress { grid-template-columns: 64px minmax(0, 1fr) 64px !important; gap: 8px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > small { grid-template-columns: 25px minmax(0, 1fr) !important; gap: 6px !important; font-size: 10px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > i, .game-screen[data-main-hud="v70"] .player-chip-progress.is-energy > i { height: 10px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > em { font-size: 11px !important; } .game-screen[data-main-hud="v70"] .player-chip-open-hint { right: 9px !important; width: 22px !important; height: 42px !important; border-radius: 11px !important; font-size: 19px !important; } .game-screen[data-main-hud="v70"] .player-stamina-hud, .game-screen[data-main-hud="v70"] .party-hud[data-count="1"] + .player-stamina-hud, .game-screen[data-main-hud="v70"] .party-hud[data-count="2"] + .player-stamina-hud { left: max(18px, env(safe-area-inset-left)) !important; top: calc(max(18px, env(safe-area-inset-top)) + 126px + var(--hud70-party-offset, 0px)) !important; width: 360px !important; min-height: 58px !important; grid-template-columns: 142px minmax(0, 1fr) !important; gap: 12px !important; padding: 8px 13px 8px 10px !important; border-radius: 18px !important; } .game-screen[data-main-hud="v70"] .party-hud[data-count="1"] + .player-stamina-hud { --hud70-party-offset: 102px; } .game-screen[data-main-hud="v70"] .party-hud[data-count="2"] + .player-stamina-hud { --hud70-party-offset: 170px; } .game-screen[data-main-hud="v70"] .player-stamina-title { grid-template-columns: 36px minmax(0, 1fr) !important; gap: 8px !important; } .game-screen[data-main-hud="v70"] .player-stamina-title > img { width: 34px !important; height: 34px !important; } .game-screen[data-main-hud="v70"] .player-stamina-title small { font-size: 9px !important; } .game-screen[data-main-hud="v70"] .player-stamina-title b { font-size: 11px !important; } .game-screen[data-main-hud="v70"] .player-stamina-meter { grid-template-columns: minmax(0, 1fr) 58px !important; gap: 9px !important; } .game-screen[data-main-hud="v70"] .player-stamina-meter > i { height: 9px !important; } .game-screen[data-main-hud="v70"] .player-stamina-meter > em { font-size: 9.5px !important; text-align: right; } .game-screen[data-main-hud="v70"] .party-hud { top: calc(max(18px, env(safe-area-inset-top)) + 126px) !important; width: 360px !important; max-width: 360px !important; } .game-screen[data-main-hud="v70"] .world-topbar > .world-wallet { top: max(18px, env(safe-area-inset-top)) !important; gap: 0 !important; padding: 5px !important; border-radius: 19px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency { grid-template-columns: 30px minmax(58px, auto) 30px !important; min-height: 46px !important; gap: 8px !important; padding: 0 7px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency-icon, .game-screen[data-main-hud="v70"] .world-wallet-currency-icon img { width: 28px !important; height: 28px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency b { font-size: 13px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency button { width: 30px !important; height: 30px !important; border-radius: 10px !important; font-size: 18px !important; } .game-screen[data-main-hud="v70"] .world-minimap { top: max(18px, env(safe-area-inset-top)) !important; right: max(18px, env(safe-area-inset-right)) !important; } .game-screen[data-main-hud="v70"] .world-minimap-place b { font-size: 12px !important; } .game-screen[data-main-hud="v70"] .world-minimap-topbar time { font-size: 10.5px !important; } .game-screen[data-main-hud="v70"] .world-minimap-channel-copy b, .game-screen[data-main-hud="v70"] .world-minimap-ping b { font-size: 9.5px !important; } .game-screen[data-main-hud="v70"] .quest-widget:not(.is-collapsed) { max-height: min(390px, calc(100dvh - var(--world-hud-map-height) - 54px)) !important; padding: 0 !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed { display: grid !important; width: var(--world-hud-width, 360px) !important; min-width: var(--world-hud-width, 360px) !important; max-width: var(--world-hud-width, 360px) !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed > .quest-tracker-head-v57 { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed .quest-tracker-heading-v62 { display: none !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed .quest-tracker-compact-v62 { display: grid !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed .quest-tracker-head-v57 > div { display: grid !important; place-items: center; } .game-screen[data-main-hud="v70"] .quest-tracker-head-v57 { min-height: 66px !important; padding: 10px 12px !important; } .game-screen[data-main-hud="v70"] .quest-tracker-heading-v62 > b, .game-screen[data-main-hud="v70"] .quest-tracker-head-v57 > span:first-child > b { font-size: 15px !important; } .game-screen[data-main-hud="v70"] .quest-tracker-heading-v62 > em { padding: 4px 8px !important; font-size: 10px !important; } .game-screen[data-main-hud="v70"] .quest-tracker-head-v57 button { width: 42px !important; height: 42px !important; border-radius: 13px !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 { min-height: 92px !important; grid-template-columns: 46px minmax(0, 1fr) 64px !important; gap: 11px !important; padding: 12px !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > span > small { font-size: 9px !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > span > b { font-size: 14px !important; line-height: 1.17 !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > span > em { font-size: 11px !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > span > u { font-size: 9px !important; } .game-screen[data-main-hud="v70"] .quest-tracker-choice-v62 > strong { font-size: 12px !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed { height: 76px !important; max-height: 76px !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed .quest-tracker-head-v57 { min-height: 74px !important; border-bottom: 0 !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed .quest-tracker-compact-v62 small { font-size: 9px !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed .quest-tracker-compact-v62 b { font-size: 13px !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed .quest-tracker-compact-v62 strong { font-size: 12px !important; } .game-screen[data-main-hud="v70"] .desktop-dock { --desktop-action-size: 72px !important; --desktop-action-height: 76px !important; gap: 9px !important; right: max(18px, env(safe-area-inset-right)) !important; bottom: max(18px, env(safe-area-inset-bottom)) !important; } .game-screen[data-main-hud="v70"] .desktop-dock button { grid-template-rows: 38px auto !important; gap: 4px !important; padding: 8px 5px 7px !important; border-radius: 20px !important; } .game-screen[data-main-hud="v70"] .desktop-dock button > span { width: 34px !important; height: 34px !important; } .game-screen[data-main-hud="v70"] .desktop-dock button > b { font-size: 10px !important; } .game-screen[data-main-hud="v70"] .chat-panel.is-minimized { width: 376px !important; min-width: 376px !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; padding: 9px 10px 9px 14px !important; border-radius: 22px !important; } .game-screen[data-main-hud="v70"] .chat-panel.is-minimized .chat-head { min-height: 52px !important; } .game-screen[data-main-hud="v70"] .chat-title-copy > b { font-size: 15px !important; } .game-screen[data-main-hud="v70"] .chat-title-copy > small { font-size: 10px !important; } .game-screen[data-main-hud="v70"] .chat-head-actions button { width: 42px !important; height: 42px !important; border-radius: 13px !important; } .game-screen[data-main-hud="v70"] .chat-tabs button { font-size: 11px !important; } .game-screen[data-main-hud="v70"] .chat-message p { font-size: 13px !important; line-height: 1.45 !important; } .game-screen[data-main-hud="v70"] .chat-author-button { font-size: 12px !important; } } @media (min-width: 761px) and (max-width: 1180px) { .game-screen[data-main-hud="v70"] .player-chip, .game-screen[data-main-hud="v70"] .player-stamina-hud, .game-screen[data-main-hud="v70"] .party-hud { width: 320px !important; min-width: 320px !important; max-width: 320px !important; } .game-screen[data-main-hud="v70"] .player-chip { min-height: 108px !important; grid-template-columns: 68px minmax(0, 1fr) !important; padding: 10px 15px 10px 10px !important; } .game-screen[data-main-hud="v70"] .player-chip-avatar { width: 64px !important; height: 64px !important; } .game-screen[data-main-hud="v70"] #worldPlayerName { font-size: 15px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress { grid-template-columns: 55px minmax(0, 1fr) 58px !important; gap: 6px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > small { grid-template-columns: 22px minmax(0, 1fr) !important; gap: 4px !important; font-size: 9px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > em { font-size: 10px !important; } .game-screen[data-main-hud="v70"] .player-stamina-hud, .game-screen[data-main-hud="v70"] .party-hud[data-count="1"] + .player-stamina-hud, .game-screen[data-main-hud="v70"] .party-hud[data-count="2"] + .player-stamina-hud { top: calc(max(18px, env(safe-area-inset-top)) + 118px + var(--hud70-party-offset, 0px)) !important; } .game-screen[data-main-hud="v70"] .party-hud { top: calc(max(18px, env(safe-area-inset-top)) + 118px) !important; } .game-screen[data-main-hud="v70"] .desktop-dock { --desktop-action-size: 62px !important; --desktop-action-height: 66px !important; gap: 7px !important; right: max(11px, env(safe-area-inset-right)) !important; bottom: max(11px, env(safe-area-inset-bottom)) !important; } .game-screen[data-main-hud="v70"] .desktop-dock button { grid-template-rows: 33px auto !important; padding: 6px 4px !important; border-radius: 18px !important; } .game-screen[data-main-hud="v70"] .desktop-dock button > span { width: 30px !important; height: 30px !important; } .game-screen[data-main-hud="v70"] .desktop-dock button > b { overflow: visible !important; font-size: 9px !important; white-space: nowrap !important; } .game-screen[data-main-hud="v70"] .chat-panel.is-minimized { width: 330px !important; min-width: 330px !important; } } @media (min-width: 761px) and (max-width: 980px) { .game-screen[data-main-hud="v70"] .world-wallet { left: calc(50% - 13px) !important; width: 150px !important; min-width: 150px !important; max-width: 150px !important; } .game-screen[data-main-hud="v70"] .world-topbar > .world-wallet > .world-wallet-currency { display: grid !important; flex: 1 1 0 !important; grid-template-columns: 20px minmax(24px, 1fr) 20px !important; min-width: 0 !important; gap: 1px !important; padding: 0 1px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency-icon, .game-screen[data-main-hud="v70"] .world-wallet-currency-icon img { width: 19px !important; height: 19px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency b { font-size: 11px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency button { width: 20px !important; height: 26px !important; border-radius: 8px !important; font-size: 15px !important; } .game-screen[data-main-hud="v70"] .desktop-dock button { width: 60px !important; min-width: 60px !important; max-width: 60px !important; } } @media (min-width: 761px) and (max-width: 820px) { .game-screen[data-main-hud="v70"] .world-wallet { top: calc(max(18px, env(safe-area-inset-top)) + 186px) !important; left: max(18px, env(safe-area-inset-left)) !important; width: 194px !important; min-width: 194px !important; max-width: 194px !important; transform: none !important; } } @media (max-width: 760px) { .game-screen[data-main-hud="v70"] .world-topbar { top: max(8px, env(safe-area-inset-top)) !important; left: max(8px, env(safe-area-inset-left)) !important; right: auto !important; width: auto !important; } .game-screen[data-main-hud="v70"] .player-chip { display: grid !important; width: min(300px, calc(100vw - 124px)) !important; min-width: 188px !important; min-height: 94px !important; grid-template-columns: 58px minmax(0, 1fr) !important; gap: 8px !important; align-items: center !important; padding: 8px 11px 8px 8px !important; border-radius: 21px !important; } .game-screen[data-main-hud="v70"] .player-chip-avatar { width: 56px !important; height: 56px !important; } .game-screen[data-main-hud="v70"] .player-chip-copy { gap: 6px !important; } .game-screen[data-main-hud="v70"] #worldPlayerName { font-size: 13px !important; } .game-screen[data-main-hud="v70"] #worldPlayerLevel { margin-left: 6px !important; padding: 3px 6px !important; font-size: 7px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress { grid-template-columns: 50px minmax(0, 1fr) 51px !important; gap: 5px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > small { grid-template-columns: 19px minmax(0, 1fr) !important; gap: 3px !important; font-size: 8px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > small > span { display: block !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > i, .game-screen[data-main-hud="v70"] .player-chip-progress.is-energy > i { height: 8px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > em { font-size: 8px !important; } .game-screen[data-main-hud="v70"] .player-chip-open-hint { display: none !important; } .game-screen[data-main-hud="v70"] .player-stamina-hud { display: none !important; } .game-screen[data-main-hud="v70"] .party-hud { top: calc(max(8px, env(safe-area-inset-top)) + 104px) !important; width: min(300px, calc(100vw - 124px)) !important; } .game-screen[data-main-hud="v70"] .world-topbar > .world-wallet { position: fixed !important; top: calc(max(8px, env(safe-area-inset-top)) + 102px) !important; left: max(8px, env(safe-area-inset-left)) !important; right: auto !important; width: 188px !important; min-width: 188px !important; max-width: 188px !important; height: 46px !important; padding: 4px !important; transform: none !important; border-radius: 16px !important; } .game-screen[data-main-hud="v70"] .world-topbar > .world-wallet > .world-wallet-currency { display: grid !important; flex: 1 1 0 !important; grid-template-columns: 24px minmax(30px, 1fr) 24px !important; min-width: 0 !important; min-height: 38px !important; gap: 3px !important; padding: 0 3px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency-icon, .game-screen[data-main-hud="v70"] .world-wallet-currency-icon img { width: 23px !important; height: 23px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency b { font-size: 12px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency button { width: 24px !important; height: 28px !important; border-radius: 9px !important; font-size: 16px !important; } .game-screen[data-main-hud="v70"] .quest-widget:not(.is-collapsed) { top: max(124px, calc(env(safe-area-inset-top) + 116px)) !important; padding: 0 !important; } .game-screen[data-main-hud="v70"] .quest-tracker-head-v57 { min-height: 60px !important; padding: 8px 10px !important; } .game-screen[data-main-hud="v70"] .quest-tracker-heading-v62 > b { font-size: 14px !important; } .game-screen[data-main-hud="v70"] .quest-tracker-head-v57 button { width: 40px !important; height: 40px !important; border-radius: 13px !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 { min-height: 82px !important; grid-template-columns: 42px minmax(0, 1fr) 56px !important; gap: 8px !important; padding: 10px !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > span > small { font-size: 8px !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > span > b { font-size: 13px !important; } .game-screen[data-main-hud="v70"] .quest-tracker-row-v57 > span > em { font-size: 10px !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed { top: max(116px, calc(env(safe-area-inset-top) + 108px)) !important; right: max(14px, env(safe-area-inset-right)) !important; width: 60px !important; min-width: 60px !important; max-width: 60px !important; height: 60px !important; min-height: 60px !important; max-height: 60px !important; border-radius: 20px !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed > .quest-tracker-head-v57 { display: grid !important; width: 58px !important; height: 58px !important; min-height: 58px !important; grid-template-columns: 1fr !important; place-items: center !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed .quest-tracker-head-v57 { min-height: 58px !important; padding: 8px !important; border: 0 !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed .quest-tracker-heading-v62, .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed .quest-tracker-compact-v62, .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed .quest-hud-journal-v68 { display: none !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed .quest-tracker-head-v57 > div { display: grid !important; width: 100%; place-items: center; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed [data-quest-widget-collapse] { display: grid !important; width: 42px !important; height: 42px !important; background: rgba(255, 255, 255, .88) url('/assets/v8/ui/nav-pokedex.png') center/34px 34px no-repeat !important; opacity: 1 !important; font-size: 0 !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed .quest-tracker-head-v57 > div > button[data-quest-widget-collapse] { background-color: rgba(255, 255, 255, .88) !important; background-image: url('/assets/v8/ui/nav-pokedex.png') !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 34px 34px !important; } .game-screen[data-main-hud="v70"] .quest-widget.is-collapsed [data-quest-widget-collapse] svg { display: none !important; } .game-screen[data-main-hud="v70"] .mobile-dock { border: 1px solid var(--hud70-line) !important; background: var(--hud70-card) !important; box-shadow: 0 18px 42px rgba(5, 38, 50, .2), inset 0 1px #fff !important; } .game-screen[data-main-hud="v70"] .mobile-dock button { color: #587683 !important; } .game-screen[data-main-hud="v70"] .mobile-dock button > span { background: transparent !important; } .game-screen[data-main-hud="v70"] .mobile-dock .mobile-nav-asset-v69 { width: 30px !important; height: 30px !important; filter: none !important; } .game-screen[data-main-hud="v70"] .mobile-dock button > b { font-size: 10px !important; font-weight: 780 !important; } .game-screen[data-main-hud="v70"] .mobile-dock button:is(.is-active, .is-menu-open):not(.mobile-dock-primary) { border-color: rgba(42, 153, 219, .22) !important; background: rgba(42, 153, 219, .08) !important; color: #147eb8 !important; } .game-screen[data-main-hud="v70"] .mobile-dock .mobile-dock-primary { border-color: #237fba !important; background: linear-gradient(180deg, #36a5e2, #278bc9) !important; box-shadow: 0 9px 20px rgba(25, 111, 163, .22), inset 0 1px rgba(255, 255, 255, .24) !important; } .game-screen[data-main-hud="v70"] .mobile-dock .mobile-dock-primary .mobile-nav-asset-v69 { filter: brightness(0) invert(1) !important; } .game-screen[data-main-hud="v70"] .chat-panel.chat-messenger { border-radius: 25px !important; } .game-screen[data-main-hud="v70"] .chat-title-copy > b { font-size: 15px !important; } .game-screen[data-main-hud="v70"] .chat-title-copy > small { font-size: 9.5px !important; } .game-screen[data-main-hud="v70"] .chat-tabs button { font-size: 10px !important; } .game-screen[data-main-hud="v70"] .chat-message p { font-size: 12px !important; } } @media (max-width: 390px) { .game-screen[data-main-hud="v70"] .interaction-card { width: 140px !important; min-width: 140px !important; max-width: 140px !important; } .game-screen[data-main-hud="v70"] .player-chip { width: calc(100vw - 124px) !important; min-width: 180px !important; min-height: 90px !important; grid-template-columns: 52px minmax(0, 1fr) !important; gap: 6px !important; padding: 7px 8px 7px 7px !important; } .game-screen[data-main-hud="v70"] .player-chip-avatar { width: 50px !important; height: 50px !important; } .game-screen[data-main-hud="v70"] #worldPlayerName { font-size: 11.5px !important; } .game-screen[data-main-hud="v70"] #worldPlayerLevel { font-size: 6px !important; } .game-screen[data-main-hud="v70"] .player-hud-kind-v70 { font-size: 7px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress { grid-template-columns: 20px minmax(0, 1fr) 44px !important; gap: 4px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > small { grid-template-columns: 19px !important; font-size: 0 !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > small span { display: none !important; } .game-screen[data-main-hud="v70"] .player-chip-progress > em { font-size: 6.5px !important; } .game-screen[data-main-hud="v70"] .mobile-dock button > b { font-size: 8.5px !important; } } @media (max-width: 330px) { .game-screen[data-main-hud="v70"] .player-chip { width: calc(100vw - 134px) !important; min-width: 178px !important; } .game-screen[data-main-hud="v70"] .mobile-dock { gap: 1px !important; padding: 5px !important; } .game-screen[data-main-hud="v70"] .mobile-dock button > b { font-size: 8px !important; } } @media (prefers-reduced-motion: reduce) { .game-screen[data-main-hud="v70"] :is( .player-chip, .player-stamina-hud, .world-wallet, .quest-widget, .desktop-dock button, .mobile-dock button, .chat-panel ) { transition: none !important; animation: none !important; } } /* pk-style-source:53 */ /* /main-hud-v71.css */ /* Main HUD v71 — restrained field interface. One surface per control, one visual weight per icon, no nested icon plates. */ .game-screen[data-main-hud="v70"][data-hud-revision="v71"] { --hud71-ink: #143e50; --hud71-muted: #647c88; --hud71-line: rgba(174, 197, 205, .86); --hud71-surface: rgba(250, 252, 250, .96); --hud71-surface-solid: #fbfdfc; --hud71-blue: #0b92cd; --hud71-green: #159c80; --hud71-gold: #d89d20; --hud71-shadow: 0 12px 28px rgba(9, 42, 53, .14), 0 2px 6px rgba(9, 42, 53, .06); } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] :is( .player-chip, .player-stamina-hud, .world-wallet, .quest-widget, .chat-panel, .desktop-dock button, .mobile-dock ) { border-color: var(--hud71-line) !important; background-color: var(--hud71-surface) !important; box-shadow: var(--hud71-shadow) !important; } /* Profile: one calm identity surface. */ .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip { border-radius: 20px !important; background: var(--hud71-surface) !important; backdrop-filter: blur(14px) saturate(1.02) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip::before { width: 2px !important; background: var(--hud71-blue) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip::after { display: none !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-avatar { border-width: 1px !important; border-color: rgba(255, 255, 255, .98) !important; box-shadow: 0 0 0 1px rgba(41, 95, 112, .22), 0 5px 13px rgba(12, 49, 59, .12) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] #worldPlayerName { color: var(--hud71-ink) !important; font-weight: 820 !important; letter-spacing: -.022em !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] #worldPlayerLevel { margin-left: 10px !important; padding: 0 0 0 10px !important; border: 0 !important; border-left: 1px solid #c6d6db !important; border-radius: 0 !important; background: transparent !important; color: #317087 !important; font-weight: 780 !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-open-hint { display: none !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress > small { color: var(--hud71-muted) !important; font-weight: 720 !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress > small img { transform: translateY(-1px); } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress > i, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-meter > i { border-radius: 3px !important; background: #dfe8e9 !important; box-shadow: none !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress > i > b, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-meter > i > b { border-radius: 3px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress.is-exp > i > b { background: var(--hud71-blue) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress.is-energy > i > b { background: #e2aa2d !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress > em { color: #405f6d !important; font-weight: 760 !important; } /* Running resource: visually subordinate to identity, but still immediately readable. */ .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-hud { border-radius: 16px !important; background: var(--hud71-surface) !important; backdrop-filter: blur(13px) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-hud::before { width: 2px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-title > img { transform: translateY(-2px); } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-title small { color: var(--hud71-green) !important; font-weight: 820 !important; letter-spacing: .075em !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-title b { color: var(--hud71-ink) !important; font-weight: 760 !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-meter > i > b { background: var(--stamina-color, var(--hud71-green)) !important; } /* Wallet: plain values and direct add glyphs, never a button inside a button. */ .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .world-wallet { border-radius: 16px !important; background: var(--hud71-surface) !important; backdrop-filter: blur(14px) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .world-wallet-currency + .world-wallet-currency { border-left-color: #cedde1 !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .world-wallet-currency b { color: var(--hud71-ink) !important; font-weight: 800 !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .world-wallet-currency button { border: 0 !important; border-radius: 50% !important; background: transparent !important; color: #3f6a7a !important; box-shadow: none !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .world-wallet-currency button:hover { background: rgba(11, 146, 205, .09) !important; color: var(--hud71-blue) !important; } /* Desktop navigation: the icon itself is the visual anchor. */ .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button { border-radius: 15px !important; background: var(--hud71-surface) !important; color: #496b79 !important; box-shadow: 0 9px 20px rgba(8, 39, 50, .13), 0 1px 3px rgba(8, 39, 50, .05) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button::before, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button::after, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button > span::before, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button > span::after { display: none !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button > span { display: grid !important; place-items: center !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: translateY(-3px); } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button > span img { width: 100% !important; height: 100% !important; filter: none !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button > b { color: #4c6d7a !important; font-weight: 730 !important; letter-spacing: -.01em !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button:is(:hover,.is-active) { border-color: rgba(11, 146, 205, .36) !important; background: var(--hud71-surface-solid) !important; color: var(--hud71-blue) !important; transform: translateY(-2px); } /* Quest and chat use the same bare-icon rule. */ .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .quest-widget { border-radius: 16px !important; background: var(--hud71-surface) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .quest-tracker-compact-v62 > img, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .quest-tracker-heading-v62 > img { transform: translateY(-1px); } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .quest-tracker-head-v57 button { border: 0 !important; border-radius: 0 !important; background-color: transparent !important; box-shadow: none !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .chat-panel { border-radius: 18px !important; background: var(--hud71-surface) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .chat-title-icon { width: 27px !important; height: 27px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent url('/assets/v8/ui/nav-pokedex.png') center/25px 25px no-repeat !important; box-shadow: none !important; } html .game-screen[data-main-hud="v70"][data-hud-revision="v71"] #chatPanel.chat-panel.chat-messenger.is-minimized .chat-head-actions > button { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html .game-screen[data-main-hud="v70"][data-hud-revision="v71"] #chatPanel.chat-panel.chat-messenger.is-minimized .chat-head-actions > button::before { content: '' !important; display: block !important; width: 25px !important; height: 25px !important; background: url('/assets/v8/ui/nav-pokedex.png') center/contain no-repeat !important; } @media (min-width: 761px) { .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock { --desktop-action-size: 78px !important; --desktop-action-height: 82px !important; grid-template-columns: repeat(5, var(--desktop-action-size)) !important; gap: 9px !important; width: auto !important; height: auto !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip { width: 390px !important; min-width: 390px !important; min-height: 112px !important; grid-template-columns: 74px minmax(0, 1fr) !important; gap: 14px !important; padding: 12px 15px 12px 12px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-avatar { width: 72px !important; height: 72px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] #worldPlayerName { font-size: 17px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] #worldPlayerLevel { font-size: 10px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-copy { gap: 9px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress { grid-template-columns: 76px minmax(0, 1fr) 70px !important; gap: 9px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress > small { grid-template-columns: 27px minmax(0, 1fr) !important; gap: 7px !important; font-size: 10px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress > i { height: 7px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress > em { font-size: 10.5px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-hud, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .party-hud[data-count="1"] + .player-stamina-hud, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .party-hud[data-count="2"] + .player-stamina-hud { top: calc(max(18px, env(safe-area-inset-top)) + 122px + var(--hud70-party-offset, 0px)) !important; width: 390px !important; min-height: 54px !important; grid-template-columns: 150px minmax(0, 1fr) !important; gap: 12px !important; padding: 7px 14px 7px 10px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .party-hud { top: calc(max(18px, env(safe-area-inset-top)) + 122px) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-title { grid-template-columns: 39px minmax(0, 1fr) !important; gap: 8px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-title > img { width: 38px !important; height: 38px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-meter > i { height: 7px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button { width: var(--desktop-action-size) !important; min-width: var(--desktop-action-size) !important; max-width: var(--desktop-action-size) !important; height: var(--desktop-action-height) !important; min-height: var(--desktop-action-height) !important; grid-template-rows: 47px auto !important; gap: 2px !important; padding: 8px 6px 8px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button > span { width: 45px !important; height: 45px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button > b { overflow: visible !important; font-size: 10px !important; line-height: 1.05 !important; white-space: nowrap !important; } } @media (min-width: 761px) and (max-width: 1180px) { .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock { --desktop-action-size: 60px !important; --desktop-action-height: 68px !important; grid-template-columns: repeat(5, 60px) !important; gap: 7px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-hud, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .party-hud { width: 320px !important; min-width: 320px !important; max-width: 320px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip { min-height: 104px !important; grid-template-columns: 66px minmax(0, 1fr) !important; gap: 10px !important; padding: 10px 12px 10px 10px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-avatar { width: 64px !important; height: 64px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress { grid-template-columns: 65px minmax(0, 1fr) 56px !important; gap: 6px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress > small { grid-template-columns: 24px minmax(0, 1fr) !important; gap: 5px !important; font-size: 10px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress > em { font-size: 9.5px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-hud, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .party-hud[data-count="1"] + .player-stamina-hud, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .party-hud[data-count="2"] + .player-stamina-hud { top: calc(max(18px, env(safe-area-inset-top)) + 114px + var(--hud70-party-offset, 0px)) !important; grid-template-columns: 134px minmax(0, 1fr) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .party-hud { top: calc(max(18px, env(safe-area-inset-top)) + 114px) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button { grid-template-rows: 38px auto !important; gap: 2px !important; padding: 6px 4px 7px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button > span { width: 37px !important; height: 37px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button > b { font-size: 9px !important; } } @media (min-width: 761px) and (max-width: 980px) { .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .interaction-card, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .context-action { bottom: calc(max(11px, env(safe-area-inset-bottom)) + 82px) !important; } } @media (max-width: 760px) { .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip { min-height: 96px !important; grid-template-columns: 54px minmax(0, 1fr) !important; gap: 8px !important; padding: 8px 10px 8px 8px !important; border-radius: 16px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-avatar { width: 52px !important; height: 52px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] #worldPlayerName { font-size: 14px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] #worldPlayerLevel { margin-left: 6px !important; padding-left: 6px !important; font-size: 8.5px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-copy { gap: 6px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress { grid-template-columns: 52px minmax(0, 1fr) 52px !important; gap: 4px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress > small { grid-template-columns: 20px minmax(0, 1fr) !important; gap: 3px !important; font-size: 9px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress > i { height: 6px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress > em { font-size: 8.5px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .world-wallet { border-radius: 13px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .world-wallet-currency button { background: transparent !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .quest-widget.is-collapsed { border-radius: 15px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .quest-widget.is-collapsed .quest-tracker-head-v57 > div > button[data-quest-widget-collapse] { border: 0 !important; background-color: transparent !important; background-image: url('/assets/v8/ui/nav-pokedex.png') !important; background-size: 36px 36px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock { border-radius: 20px !important; background: var(--hud71-surface) !important; box-shadow: 0 12px 28px rgba(8, 39, 50, .16) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock button, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock .mobile-dock-primary { border: 0 !important; border-radius: 12px !important; background: transparent !important; color: #526f7c !important; box-shadow: none !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock button::before, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock button::after, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock button > span::before, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock button > span::after { display: none !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock button > span { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: translateY(-2px); } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock .mobile-nav-asset-v69 { width: 32px !important; height: 32px !important; filter: none !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock .mobile-dock-primary .mobile-nav-asset-v69 { filter: none !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock button > b { color: #526f7c !important; font-weight: 720 !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock button:is(.is-active,.is-menu-open), .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock .mobile-dock-primary { color: var(--hud71-blue) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock button:is(.is-active,.is-menu-open) > b, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock .mobile-dock-primary > b { color: var(--hud71-blue) !important; } } @media (max-width: 390px) { .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip { min-height: 86px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-avatar { width: 48px !important; height: 48px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .mobile-dock .mobile-nav-asset-v69 { width: 29px !important; height: 29px !important; } } @media (prefers-reduced-motion: reduce) { .game-screen[data-main-hud="v70"][data-hud-revision="v71"] :is(.desktop-dock button,.mobile-dock button) { transition: none !important; } } /* pk-style-source:54 */ /* /resource-raster-v74.css */ /* Pokémon-world resource art: Pokédex, Pikachu, Rapidash, Meowth and League medal. */ .resource-art-v74 { display: block; max-width: none; object-fit: contain; object-position: center; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 2px 3px rgba(7, 44, 55, .18)); } .game-screen[data-main-hud="v70"] .player-chip-progress > small > img.resource-art-v74 { width: 27px !important; height: 27px !important; transform: none !important; } .game-screen[data-main-hud="v70"] .player-chip-progress.is-exp > small > img.resource-art-v74--experience { width: 28px !important; height: 28px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress.is-energy > small > img.resource-art-v74--energy { width: 29px !important; height: 29px !important; margin: -1px; } .game-screen[data-main-hud="v70"] .player-stamina-title > img.resource-art-v74--stamina { width: 40px !important; height: 40px !important; margin: -1px; transform: none !important; } .game-screen .joystick > em.joystick-run-status-v69 img.resource-art-v74--stamina { width: 27px !important; height: 27px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency.is-coins { grid-template-columns: 38px minmax(58px, auto) 30px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency.is-coins .world-wallet-currency-icon, .game-screen[data-main-hud="v70"] .world-wallet-currency.is-coins .resource-art-v74--money { width: 38px !important; height: 32px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency.is-gems .world-wallet-currency-icon, .game-screen[data-main-hud="v70"] .world-wallet-currency.is-gems .resource-art-v74--crystal { width: 32px !important; height: 32px !important; } .inventory-v52 .inventory-wallet-v49 > span.is-coins { grid-template-columns: 32px minmax(42px, auto) 28px !important; } .inventory-v52 .inventory-wallet-v49 > span.is-gems { grid-template-columns: 26px minmax(42px, auto) 28px !important; } .inventory-v52 .inventory-wallet-v49 > span.is-coins > .resource-art-v74--money { width: 32px !important; height: 27px !important; } .inventory-v52 .inventory-wallet-v49 > span.is-gems > .resource-art-v74--crystal { width: 26px !important; height: 26px !important; } .inventory-v52 .inventory-capacity-v52 > button > .resource-art-v74--crystal { width: 22px !important; height: 22px !important; } @media (min-width: 761px) and (max-width: 1180px) { .game-screen[data-main-hud="v70"] .player-chip-progress > small > img.resource-art-v74 { width: 24px !important; height: 24px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress.is-energy > small > img.resource-art-v74--energy { width: 26px !important; height: 26px !important; } .game-screen[data-main-hud="v70"] .player-stamina-title > img.resource-art-v74--stamina { width: 35px !important; height: 35px !important; } } @media (min-width: 761px) and (max-width: 980px) { .game-screen[data-main-hud="v70"] .world-topbar > .world-wallet > .world-wallet-currency.is-coins { grid-template-columns: 26px minmax(21px, 1fr) 20px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency.is-coins .world-wallet-currency-icon, .game-screen[data-main-hud="v70"] .world-wallet-currency.is-coins .resource-art-v74--money { width: 26px !important; height: 23px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency.is-gems .world-wallet-currency-icon, .game-screen[data-main-hud="v70"] .world-wallet-currency.is-gems .resource-art-v74--crystal { width: 22px !important; height: 22px !important; } } @media (max-width: 760px) { .game-screen[data-main-hud="v70"] .player-chip-progress > small > img.resource-art-v74 { width: 20px !important; height: 20px !important; } .game-screen[data-main-hud="v70"] .player-chip-progress.is-energy > small > img.resource-art-v74--energy { width: 22px !important; height: 22px !important; } .game-screen[data-main-hud="v70"] .world-topbar > .world-wallet > .world-wallet-currency.is-coins { grid-template-columns: 29px minmax(29px, 1fr) 24px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency.is-coins .world-wallet-currency-icon, .game-screen[data-main-hud="v70"] .world-wallet-currency.is-coins .resource-art-v74--money { width: 29px !important; height: 25px !important; } .game-screen[data-main-hud="v70"] .world-wallet-currency.is-gems .world-wallet-currency-icon, .game-screen[data-main-hud="v70"] .world-wallet-currency.is-gems .resource-art-v74--crystal { width: 25px !important; height: 25px !important; } .inventory-v52 .inventory-wallet-v49 > span.is-coins { grid-template-columns: 25px minmax(18px, auto) !important; } .inventory-v52 .inventory-wallet-v49 > span.is-gems { grid-template-columns: 21px minmax(18px, auto) !important; } .inventory-v52 .inventory-wallet-v49 > span.is-coins > .resource-art-v74--money { width: 25px !important; height: 21px !important; } .inventory-v52 .inventory-wallet-v49 > span.is-gems > .resource-art-v74--crystal { width: 21px !important; height: 21px !important; } .inventory-v52 .inventory-capacity-v52 > button > .resource-art-v74--crystal { width: 17px !important; height: 17px !important; } } @media (max-width: 360px) { .inventory-v52 .inventory-wallet-v49 > span.is-coins { grid-template-columns: 22px minmax(16px, auto) !important; } .inventory-v52 .inventory-wallet-v49 > span.is-gems { grid-template-columns: 19px minmax(16px, auto) !important; } .inventory-v52 .inventory-wallet-v49 > span.is-coins > .resource-art-v74--money { width: 22px !important; height: 19px !important; } .inventory-v52 .inventory-wallet-v49 > span.is-gems > .resource-art-v74--crystal { width: 19px !important; height: 19px !important; } } /* pk-style-source:55 */ /* /chat-messenger-v75.css */ /* Chat messenger v75 — one authoritative geometry and a readable messenger UI. */ /* Window coordinates are used only by the panel, not inherited by every row. Unregistered custom properties made each resize restyle the entire history. Older engines ignore these registrations and retain the original geometry. */ @property --chat-x { syntax: ""; inherits: false; initial-value: 18px; } @property --chat-y { syntax: ""; inherits: false; initial-value: 0px; } @property --chat-width { syntax: ""; inherits: false; initial-value: 720px; } @property --chat-height { syntax: ""; inherits: false; initial-value: 520px; } /* Keep the complete, searchable history in the DOM. The browser can skip layout/paint of distant rows, retaining measured heights and scroll anchors. */ @supports (content-visibility: auto) and (contain-intrinsic-block-size: auto 76px) { html .game-screen #chatPanel #chatLog:not(.is-history-navigation) > .chat-message:nth-last-child(n+33) { content-visibility: auto; contain-intrinsic-block-size: auto 76px; } } html .game-screen #chatPanel.chat-panel.chat-messenger, html .game-screen #chatPanel.chat-panel.chat-messenger * { box-sizing: border-box; } html .game-screen #chatPanel.chat-panel.chat-messenger { --chat75-accent: #168fda; --chat75-accent-strong: #0579c7; --chat75-ink: #173f57; --chat75-copy: #456a7d; --chat75-muted: #7893a2; --chat75-line: #d4e5ec; --chat75-panel: rgba(250, 253, 254, var(--chat-opacity, .96)); --chat75-card: #ffffff; --chat75-soft: #f1f7f9; --chat75-hover: #edf6f9; isolation: isolate !important; z-index: 92 !important; display: grid !important; grid-template-rows: 64px 52px minmax(0, 1fr) !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--chat75-line) 88%, white) !important; border-radius: 22px !important; background: var(--chat75-panel) !important; color: var(--chat75-ink) !important; box-shadow: 0 24px 64px rgba(5, 36, 52, .25), 0 2px 9px rgba(5, 36, 52, .1), inset 0 1px rgba(255, 255, 255, .9) !important; backdrop-filter: blur(19px) saturate(1.08) !important; transform: none !important; font-family: var(--ui-font, "Onest PokePark", "Segoe UI", system-ui, sans-serif) !important; } html[data-game-theme="dark"] .game-screen #chatPanel.chat-panel.chat-messenger { --chat75-ink: #e6f2f6; --chat75-copy: #b5ccd6; --chat75-muted: #819eaa; --chat75-line: #2b5060; --chat75-panel: rgba(10, 38, 50, var(--chat-opacity, .96)); --chat75-card: #102f3c; --chat75-soft: #123745; --chat75-hover: #174453; box-shadow: 0 27px 72px rgba(0, 18, 28, .48), inset 0 1px rgba(255, 255, 255, .06) !important; } html .game-screen #chatPanel.chat-no-blur { backdrop-filter: none !important; } html .game-screen #chatPanel > .chat-head { position: relative !important; z-index: 12 !important; grid-row: 1 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; align-items: center !important; gap: 10px !important; min-height: 64px !important; padding: 9px 11px 9px 16px !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--chat75-line) 76%, transparent) !important; border-radius: 0 !important; background: color-mix(in srgb, var(--chat75-card) 78%, transparent) !important; cursor: grab !important; touch-action: none !important; } html .game-screen #chatPanel.is-adjusting[data-adjusting="move"] > .chat-head { cursor: grabbing !important; } html .game-screen #chatPanel.is-adjusting[data-adjusting="resize"], html .game-screen #chatPanel.is-adjusting[data-adjusting="resize"] * { cursor: nwse-resize !important; } html .game-screen #chatPanel .chat-title-copy { display: grid !important; gap: 3px !important; min-width: 0 !important; } html .game-screen #chatPanel .chat-title-copy > b { display: flex !important; align-items: center !important; gap: 9px !important; color: var(--chat75-ink) !important; font-size: 16px !important; font-weight: 820 !important; line-height: 1.1 !important; letter-spacing: -.015em !important; } html .game-screen #chatPanel .chat-title-icon { display: grid !important; place-items: center !important; width: 27px !important; height: 27px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--chat75-accent) !important; box-shadow: none !important; } html .game-screen #chatPanel .chat-title-icon .ui-icon { width: 23px !important; height: 23px !important; } html .game-screen #chatPanel .chat-title-copy > small { display: flex !important; align-items: center !important; gap: 7px !important; margin: 0 0 0 36px !important; color: var(--chat75-muted) !important; font-size: 10px !important; font-weight: 650 !important; line-height: 1.15 !important; letter-spacing: 0 !important; text-transform: none !important; } html .game-screen #chatPanel .chat-title-copy > small > i { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #37c979 !important; box-shadow: 0 0 0 3px rgba(55, 201, 121, .12) !important; } html .game-screen #chatPanel .chat-head-actions { display: flex !important; align-items: center !important; gap: 4px !important; } html .game-screen #chatPanel .chat-head-actions > button { display: grid !important; place-items: center !important; width: 40px !important; height: 40px !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 12px !important; background: transparent !important; color: var(--chat75-copy) !important; box-shadow: none !important; cursor: pointer !important; transition: background .15s ease, color .15s ease, transform .12s ease !important; } html .game-screen #chatPanel .chat-head-actions > button:hover { border-color: color-mix(in srgb, var(--chat75-line) 75%, transparent) !important; background: var(--chat75-hover) !important; color: var(--chat75-accent-strong) !important; } html .game-screen #chatPanel .chat-head-actions > button:active { transform: scale(.94) !important; } html .game-screen #chatPanel .chat-head-actions .ui-icon { width: 19px !important; height: 19px !important; } html .game-screen #chatPanel .chat-head-search { position: absolute !important; z-index: 4 !important; inset: 9px 151px 9px 14px !important; display: grid !important; grid-template-columns: 20px minmax(0, 1fr) 34px !important; align-items: center !important; gap: 8px !important; min-width: 220px !important; padding: 0 4px 0 12px !important; border: 1px solid color-mix(in srgb, var(--chat75-accent) 30%, var(--chat75-line)) !important; border-radius: 14px !important; background: var(--chat75-card) !important; box-shadow: 0 7px 22px rgba(7, 48, 66, .1) !important; } html .game-screen #chatPanel .chat-head-search[hidden] { display: none !important; } html .game-screen #chatPanel .chat-head-search > span { color: var(--chat75-accent) !important; } html .game-screen #chatPanel .chat-head-search input { min-width: 0 !important; height: 42px !important; padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; color: var(--chat75-ink) !important; font: inherit !important; font-size: 13px !important; } html .game-screen #chatPanel .chat-head-search input::placeholder { color: var(--chat75-muted) !important; } html .game-screen #chatPanel .chat-head-search button { display: grid !important; place-items: center !important; width: 32px !important; height: 32px !important; padding: 0 !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: var(--chat75-muted) !important; } html .game-screen #chatPanel > .chat-tabs { position: relative !important; z-index: 8 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: center !important; gap: 4px !important; min-width: 0 !important; margin: 0 !important; padding: 6px 10px 7px !important; overflow: visible !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--chat75-line) 68%, transparent) !important; border-radius: 0 !important; background: color-mix(in srgb, var(--chat75-card) 48%, transparent) !important; } html .game-screen #chatPanel > .chat-tabs > button { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; min-width: 0 !important; min-height: 38px !important; padding: 0 9px !important; border: 1px solid transparent !important; border-radius: 11px !important; background: transparent !important; color: var(--chat75-muted) !important; font-size: 11px !important; font-weight: 760 !important; box-shadow: none !important; } html .game-screen #chatPanel > .chat-tabs > button:hover { background: var(--chat75-hover) !important; color: var(--chat75-copy) !important; } html .game-screen #chatPanel > .chat-tabs > button.is-active { border-color: color-mix(in srgb, var(--chat75-accent) 22%, var(--chat75-line)) !important; background: color-mix(in srgb, var(--chat75-accent) 10%, var(--chat75-card)) !important; color: var(--chat75-accent-strong) !important; } html .game-screen #chatPanel .chat-tab-icon { display: grid !important; width: 19px !important; height: 19px !important; } html .game-screen #chatPanel .chat-tab-icon .ui-icon { width: 18px !important; height: 18px !important; } html .game-screen #chatPanel > .chat-messenger-layout { position: relative !important; z-index: 2 !important; grid-row: 3 !important; display: grid !important; grid-template-columns: minmax(340px, 1fr) clamp(168px, 27%, 220px) !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } html .game-screen #chatPanel .chat-conversation { display: grid !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-right: 1px solid color-mix(in srgb, var(--chat75-line) 72%, transparent) !important; background: color-mix(in srgb, var(--chat75-card) 34%, transparent) !important; } html .game-screen #chatPanel .chat-log-wrap { position: relative !important; min-height: 0 !important; overflow: hidden !important; } html .game-screen #chatPanel .chat-log { min-height: 0 !important; padding: 12px 12px 18px !important; overflow: auto !important; scrollbar-width: thin !important; scrollbar-color: color-mix(in srgb, var(--chat75-muted) 35%, transparent) transparent !important; } html .game-screen #chatPanel .chat-message { position: relative !important; display: grid !important; grid-template-columns: 38px minmax(0, 1fr) 28px !important; align-items: start !important; gap: 9px !important; width: 100% !important; margin: 0 0 3px !important; padding: 8px 8px !important; border: 1px solid transparent !important; border-radius: 13px !important; background: transparent !important; color: var(--chat75-ink) !important; } html .game-screen #chatPanel .chat-message:hover { border-color: color-mix(in srgb, var(--chat75-line) 60%, transparent) !important; background: color-mix(in srgb, var(--chat75-hover) 68%, transparent) !important; } html .game-screen #chatPanel .chat-message.is-self { background: color-mix(in srgb, var(--chat75-accent) 5%, transparent) !important; } html .game-screen #chatPanel .chat-message.is-system { grid-template-columns: 32px minmax(0, 1fr) !important; margin: 3px 0 6px !important; border-color: color-mix(in srgb, var(--chat75-line) 68%, transparent) !important; background: var(--chat75-soft) !important; } html .game-screen #chatPanel .chat-message-avatar { width: 38px !important; height: 38px !important; } html .game-screen #chatPanel .chat-message-avatar.is-system { width: 32px !important; height: 32px !important; } html .game-screen #chatPanel .chat-message-body { display: grid !important; gap: 3px !important; min-width: 0 !important; } html .game-screen #chatPanel .chat-message-meta { display: flex !important; align-items: center !important; gap: 7px !important; min-height: 18px !important; } html .game-screen #chatPanel .chat-author-button, html .game-screen #chatPanel .chat-message-meta > b { color: var(--chat75-ink) !important; font-size: 12px !important; font-weight: 820 !important; } html .game-screen #chatPanel .chat-message-meta time, html .game-screen #chatPanel .chat-message-meta small { color: var(--chat75-muted) !important; font-size: 9px !important; font-weight: 620 !important; } html .game-screen #chatPanel .chat-message p { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-wrap: anywhere !important; color: var(--chat75-copy) !important; font-size: var(--chat-font-size, 14px) !important; font-weight: 520 !important; line-height: 1.46 !important; letter-spacing: -.006em !important; } html .game-screen #chatPanel .chat-message-more { width: 28px !important; height: 28px !important; } html .game-screen #chatPanel #chatForm { display: grid !important; align-items: end !important; gap: 5px !important; min-height: 60px !important; margin: 0 10px 10px !important; padding: 7px !important; border: 1px solid color-mix(in srgb, var(--chat75-line) 90%, transparent) !important; border-radius: 17px !important; box-shadow: 0 7px 20px rgba(9, 49, 66, .07) !important; } html .game-screen #chatPanel #chatForm[hidden] { display: none !important; } html .game-screen #chatPanel #chatForm:focus-within { border-color: color-mix(in srgb, var(--chat75-accent) 52%, var(--chat75-line)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat75-accent) 9%, transparent), 0 7px 20px rgba(9, 49, 66, .07) !important; } html .game-screen #chatPanel #chatForm textarea { min-height: 44px !important; max-height: 96px !important; padding: 11px 7px 8px !important; resize: none !important; border: 0 !important; outline: 0 !important; background: transparent !important; color: var(--chat75-ink) !important; font: inherit !important; font-size: 13px !important; line-height: 1.38 !important; } html .game-screen #chatPanel #chatForm textarea::placeholder { color: var(--chat75-muted) !important; opacity: .9 !important; } html .game-screen #chatPanel .chat-composer-tool { display: grid !important; place-items: center !important; width: 42px !important; height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 13px !important; background: var(--chat75-soft) !important; color: var(--chat75-copy) !important; } html .game-screen #chatPanel .chat-composer-tool:hover, html .game-screen #chatPanel .chat-composer-tool[aria-expanded="true"] { background: color-mix(in srgb, var(--chat75-accent) 11%, var(--chat75-card)) !important; color: var(--chat75-accent) !important; } html .game-screen #chatPanel .chat-composer-tool .ui-icon { width: 21px !important; height: 21px !important; } html .game-screen #chatPanel .chat-send-button { display: grid !important; place-items: center !important; width: 46px !important; height: 46px !important; padding: 0 !important; border: 0 !important; border-radius: 14px !important; background: linear-gradient(150deg, #31a9ee, #087fd0) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(12, 128, 207, .25) !important; } html .game-screen #chatPanel .chat-send-button:hover { filter: brightness(1.05) !important; transform: translateY(-1px) !important; } html .game-screen #chatPanel .chat-send-button .ui-icon { width: 21px !important; height: 21px !important; } html .game-screen #chatPanel .chat-online-sidebar { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; min-width: 0 !important; min-height: 0 !important; padding: 10px 9px !important; overflow: hidden !important; background: color-mix(in srgb, var(--chat75-soft) 64%, transparent) !important; } html .game-screen #chatPanel .chat-online-sidebar > header { min-height: 46px !important; padding: 5px 6px 9px !important; } html .game-screen #chatPanel .chat-online-sidebar > header b { color: var(--chat75-copy) !important; font-size: 11px !important; font-weight: 790 !important; } html .game-screen #chatPanel .chat-online-sidebar > header small { color: #2eaa69 !important; } html .game-screen #chatPanel .chat-online-list { min-height: 0 !important; padding: 0 !important; overflow: auto !important; } html .game-screen #chatPanel .chat-online-player { grid-template-columns: 35px minmax(0, 1fr) 8px !important; gap: 8px !important; min-height: 52px !important; padding: 7px 6px !important; border-radius: 12px !important; } html .game-screen #chatPanel .chat-online-player:hover { background: var(--chat75-hover) !important; } html .game-screen #chatPanel .chat-online-player .chat-player-avatar { width: 35px !important; height: 35px !important; } html .game-screen #chatPanel .chat-online-player b { color: var(--chat75-copy) !important; font-size: 10px !important; } html .game-screen #chatPanel .chat-online-player small { color: var(--chat75-muted) !important; font-size: 8px !important; line-height: 1.25 !important; } html .game-screen #chatPanel > .chat-config { position: absolute !important; z-index: 60 !important; top: 58px !important; right: 10px !important; display: none !important; grid-template-columns: 1fr !important; gap: 10px !important; width: min(340px, calc(100% - 20px)) !important; max-height: calc(100% - 72px) !important; margin: 0 !important; padding: 15px !important; overflow: auto !important; border: 1px solid var(--chat75-line) !important; border-radius: 17px !important; background: color-mix(in srgb, var(--chat75-card) 97%, transparent) !important; box-shadow: 0 20px 48px rgba(5, 34, 49, .25) !important; } html .game-screen #chatPanel > .chat-config.is-open { display: grid !important; } html .game-screen #chatPanel > .chat-config > label { display: grid !important; gap: 6px !important; min-width: 0 !important; color: var(--chat75-copy) !important; } html .game-screen #chatPanel > .chat-config > label > span { font-size: 11px !important; font-weight: 720 !important; } html .game-screen #chatPanel > .chat-config .chat-check { grid-template-columns: 18px minmax(0, 1fr) !important; align-items: center !important; } html .game-screen #chatPanel > .chat-config fieldset { border-color: var(--chat75-line) !important; border-radius: 13px !important; } html .game-screen #chatPanel > .chat-config button[data-reset-chat] { min-height: 40px !important; border: 1px solid color-mix(in srgb, #df6257 30%, var(--chat75-line)) !important; border-radius: 12px !important; background: color-mix(in srgb, #df6257 7%, var(--chat75-card)) !important; color: #c64d49 !important; font-size: 10px !important; font-weight: 780 !important; } html .game-screen #chatPanel > .chat-emoji-panel { position: absolute !important; z-index: 72 !important; left: 10px !important; bottom: 78px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 56px 52px minmax(0, 1fr) !important; align-items: stretch !important; width: min(430px, calc(100% - 30px)) !important; height: min(390px, calc(100% - 144px)) !important; min-height: 270px !important; padding: 0 !important; border: 1px solid var(--chat75-line) !important; border-radius: 18px !important; background: color-mix(in srgb, var(--chat75-card) 98%, transparent) !important; color: var(--chat75-ink) !important; box-shadow: 0 20px 52px rgba(3, 28, 42, .3) !important; } html .game-screen #chatPanel > .chat-emoji-panel[hidden] { display: none !important; } html .game-screen #chatPanel > .chat-emoji-panel > .chat-media-head, html .game-screen #chatPanel > .chat-emoji-panel > .chat-emoji-categories, html .game-screen #chatPanel > .chat-emoji-panel > .chat-emoji-grid { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; } html .game-screen #chatPanel .chat-media-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; min-height: 56px !important; padding: 8px 9px 8px 15px !important; border-bottom: 1px solid color-mix(in srgb, var(--chat75-line) 75%, transparent) !important; background: color-mix(in srgb, var(--chat75-soft) 48%, transparent) !important; } html .game-screen #chatPanel .chat-media-head > span { display: grid !important; gap: 2px !important; min-width: 0 !important; } html .game-screen #chatPanel .chat-media-head b { color: var(--chat75-ink) !important; font-size: 12px !important; font-weight: 800 !important; } html .game-screen #chatPanel .chat-media-head small { color: var(--chat75-muted) !important; font-size: 8px !important; font-weight: 650 !important; } html .game-screen #chatPanel .chat-emoji-categories { display: flex !important; align-items: center !important; gap: 5px !important; min-width: 0 !important; padding: 6px 8px !important; overflow-x: auto !important; overflow-y: hidden !important; border-bottom: 1px solid color-mix(in srgb, var(--chat75-line) 65%, transparent) !important; background: transparent !important; scrollbar-width: none !important; } html .game-screen #chatPanel .chat-emoji-categories::-webkit-scrollbar { display: none !important; } html .game-screen #chatPanel .chat-emoji-categories > button { position: relative !important; flex: 0 0 auto !important; display: grid !important; grid-template-columns: 24px auto !important; place-items: center start !important; gap: 6px !important; width: auto !important; min-width: 42px !important; height: 38px !important; padding: 0 10px !important; border: 1px solid transparent !important; border-radius: 11px !important; background: transparent !important; color: var(--chat75-muted) !important; font-size: 18px !important; } html .game-screen #chatPanel .chat-emoji-categories > button > span { display: grid !important; place-items: center !important; width: 24px !important; height: 24px !important; } html .game-screen #chatPanel .chat-emoji-categories > button > b { display: block !important; color: inherit !important; font-size: 9px !important; font-weight: 740 !important; white-space: nowrap !important; } html .game-screen #chatPanel .chat-emoji-categories > button > i { position: absolute !important; top: 2px !important; right: 3px !important; font-size: 8px !important; font-style: normal !important; } html .game-screen #chatPanel .chat-emoji-categories > button:hover { background: var(--chat75-hover) !important; } html .game-screen #chatPanel .chat-emoji-categories > button.is-active { border-color: color-mix(in srgb, var(--chat75-accent) 25%, var(--chat75-line)) !important; background: color-mix(in srgb, var(--chat75-accent) 9%, var(--chat75-card)) !important; color: var(--chat75-accent-strong) !important; } html .game-screen #chatPanel .chat-emoji-categories > button.is-locked { opacity: .72 !important; } html .game-screen #chatPanel .chat-emoji-grid { display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; align-content: start !important; gap: 4px !important; padding: 10px !important; overflow: auto !important; background: transparent !important; } html .game-screen #chatPanel .chat-emoji-grid > button { display: grid !important; place-items: center !important; width: 100% !important; height: 42px !important; padding: 0 !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; font-size: 23px !important; line-height: 1 !important; } html .game-screen #chatPanel .chat-emoji-grid > button:hover { background: var(--chat75-hover) !important; transform: scale(1.07) !important; } html .game-screen #chatPanel > .chat-resize { position: absolute !important; z-index: 90 !important; right: 2px !important; bottom: 2px !important; display: grid !important; place-items: end !important; width: 38px !important; height: 38px !important; padding: 9px 6px 5px 9px !important; border: 0 !important; border-radius: 0 0 19px 0 !important; background: linear-gradient(135deg, transparent 48%, color-mix(in srgb, var(--chat75-muted) 38%, transparent) 49%, transparent 51%) !important; color: var(--chat75-muted) !important; opacity: .72 !important; cursor: nwse-resize !important; touch-action: none !important; } html .game-screen #chatPanel > .chat-resize::before, html .game-screen #chatPanel > .chat-resize::after { display: none !important; content: none !important; } html .game-screen #chatPanel > .chat-resize .ui-icon { width: 18px !important; height: 18px !important; transform: none !important; } html .game-screen #chatPanel > .chat-resize:hover { opacity: 1 !important; color: var(--chat75-accent) !important; } @media (min-width: 761px) { html .game-screen #chatPanel.chat-panel.chat-messenger:not(.is-minimized) { position: absolute !important; left: var(--chat-x, 18px) !important; top: var(--chat-y, calc(100% - 632px)) !important; right: auto !important; bottom: auto !important; width: var(--chat-width, min(720px, calc(100% - 36px))) !important; height: var(--chat-height, min(620px, calc(100% - 36px))) !important; min-width: 560px !important; min-height: 460px !important; max-width: none !important; max-height: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger.is-minimized { position: absolute !important; left: max(18px, env(safe-area-inset-left)) !important; top: auto !important; right: auto !important; bottom: max(18px, env(safe-area-inset-bottom)) !important; display: grid !important; grid-template-rows: 1fr !important; width: clamp(340px, 25vw, 410px) !important; min-width: 340px !important; max-width: 410px !important; height: 62px !important; min-height: 62px !important; max-height: 62px !important; padding: 0 !important; border-radius: 18px !important; } html .game-screen #chatPanel.is-minimized > .chat-head { grid-row: 1 !important; min-height: 60px !important; padding: 8px 10px 8px 14px !important; border: 0 !important; } html .game-screen #chatPanel.is-minimized .chat-title-copy > small { margin-left: 36px !important; font-size: 9px !important; } html .game-screen #chatPanel.is-minimized .chat-head-actions > [data-chat-search-toggle], html .game-screen #chatPanel.is-minimized .chat-head-actions > [data-toggle-chat-settings], html .game-screen #chatPanel.is-minimized .chat-head-actions > [data-close-chat] { display: none !important; } html .game-screen #chatPanel.is-minimized .chat-head-actions > .chat-minimize { display: grid !important; } html .game-screen #chatPanel.is-minimized > :not(.chat-head) { display: none !important; } } @media (min-width: 761px) and (max-width: 1050px) { html .game-screen #chatPanel.chat-panel.chat-messenger:not(.is-minimized) { min-width: 520px !important; } html .game-screen #chatPanel > .chat-messenger-layout { grid-template-columns: minmax(330px, 1fr) 170px !important; } html .game-screen #chatPanel .chat-online-player { grid-template-columns: 31px minmax(0, 1fr) 7px !important; gap: 6px !important; } html .game-screen #chatPanel .chat-online-player .chat-player-avatar { width: 31px !important; height: 31px !important; } } @media (max-width: 760px) { html .game-screen #chatPanel.chat-panel.chat-messenger { position: absolute !important; top: max(8px, env(safe-area-inset-top)) !important; right: max(8px, env(safe-area-inset-right)) !important; bottom: calc(92px + env(safe-area-inset-bottom)) !important; left: max(8px, env(safe-area-inset-left)) !important; grid-template-rows: 58px 50px minmax(0, 1fr) !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; border-radius: 20px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger:not(.is-open) { transform: translateY(calc(100% + 120px)) !important; pointer-events: none !important; } html .game-screen #chatPanel > .chat-head { min-height: 58px !important; padding: 7px 8px 7px 12px !important; } html .game-screen #chatPanel .chat-title-copy > b { font-size: 14px !important; } html .game-screen #chatPanel .chat-title-copy > small { margin-left: 34px !important; font-size: 8px !important; } html .game-screen #chatPanel .chat-head-actions > button { width: 38px !important; height: 38px !important; } html .game-screen #chatPanel .chat-head-actions [data-toggle-chat-settings] { display: none !important; } html .game-screen #chatPanel .chat-head-search { inset: 7px 98px 7px 9px !important; min-width: 0 !important; } html .game-screen #chatPanel > .chat-tabs { padding: 5px 7px 6px !important; } html .game-screen #chatPanel > .chat-tabs > button { min-height: 38px !important; padding: 0 5px !important; font-size: 9px !important; } html .game-screen #chatPanel .chat-tab-icon { display: none !important; } html .game-screen #chatPanel > .chat-messenger-layout { grid-template-columns: minmax(0, 1fr) !important; } html .game-screen #chatPanel .chat-conversation { border-right: 0 !important; } html .game-screen #chatPanel .chat-online-sidebar { display: none !important; } html .game-screen #chatPanel .chat-log { padding: 9px 8px 14px !important; } html .game-screen #chatPanel .chat-message { grid-template-columns: 34px minmax(0, 1fr) !important; gap: 8px !important; padding: 7px 6px !important; } html .game-screen #chatPanel .chat-message-avatar { width: 34px !important; height: 34px !important; } html .game-screen #chatPanel .chat-message-more { display: none !important; } html .game-screen #chatPanel .chat-message p { font-size: max(12px, var(--chat-font-size, 14px)) !important; } html .game-screen #chatPanel #chatForm { grid-template-columns: 40px minmax(0, 1fr) 44px !important; min-height: 58px !important; margin: 0 7px 7px !important; } html .game-screen #chatPanel > .chat-emoji-panel { right: 7px !important; bottom: 70px !important; left: 7px !important; width: auto !important; height: min(47dvh, 410px) !important; min-height: 270px !important; } html .game-screen #chatPanel .chat-media-head { grid-template-columns: minmax(0, 1fr) auto !important; padding-left: 11px !important; } html .game-screen #chatPanel .chat-emoji-categories > button > b { display: none !important; } html .game-screen #chatPanel .chat-emoji-categories > button { grid-template-columns: 24px !important; min-width: 38px !important; padding: 0 7px !important; } html .game-screen #chatPanel .chat-emoji-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 3px !important; padding: 7px !important; } html .game-screen #chatPanel .chat-emoji-grid > button { height: 38px !important; font-size: 21px !important; } html .game-screen #chatPanel > .chat-config { top: 56px !important; right: 7px !important; left: 7px !important; width: auto !important; max-height: calc(100% - 64px) !important; } html .game-screen #chatPanel > .chat-resize { display: none !important; } } @media (max-width: 380px) { html .game-screen #chatPanel.chat-panel.chat-messenger { right: 5px !important; bottom: calc(86px + env(safe-area-inset-bottom)) !important; left: 5px !important; } html .game-screen #chatPanel .chat-title-copy > small { display: none !important; } html .game-screen #chatPanel .chat-title-copy > b { font-size: 13px !important; } html .game-screen #chatPanel .chat-head-actions > button { width: 36px !important; height: 36px !important; } html .game-screen #chatPanel > .chat-tabs > button { font-size: 8px !important; } html .game-screen #chatPanel .chat-media-head { grid-template-columns: 1fr !important; min-height: 82px !important; gap: 5px !important; } html .game-screen #chatPanel > .chat-emoji-panel { grid-template-rows: 82px 48px minmax(0, 1fr) !important; } html .game-screen #chatPanel .chat-emoji-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } } @media (prefers-reduced-motion: reduce) { html .game-screen #chatPanel.chat-panel.chat-messenger, html .game-screen #chatPanel.chat-panel.chat-messenger * { transition: none !important; animation: none !important; } } /* pk-style-source:56 */ /* /chat-social-v76.css */ /* PokePark v76 — unified trainer identity, notification hierarchy and social chat. */ .trainer-avatar { display: inline-block; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background-color: #dff5ff; background-image: url('/assets/v2.7/ui/player-profiles/trainer-boy-profile.png') !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; box-shadow: inset 0 0 0 1px rgba(37, 91, 123, .15), 0 3px 12px rgba(12, 64, 93, .12); } .trainer-avatar:is([data-avatar-key="trainer-02"],[data-avatar-key="trainer-04"],[data-avatar-key="trainer-05"],[data-avatar-key="trainer-07"],[data-avatar-key="trainer-10"],[data-avatar-key="trainer-12"]) { background-image: url('/assets/v2.7/ui/player-profiles/trainer-girl-profile.png') !important; } .player-chip-avatar.trainer-avatar { width: clamp(58px, 4.3vw, 72px); height: clamp(58px, 4.3vw, 72px); color: transparent; border: 3px solid rgba(255,255,255,.9); } .social-profile-avatar-button { position: relative; width: 92px; height: 92px; padding: 0; border: 0; border-radius: 28px; background: transparent; cursor: pointer; } .social-profile-avatar-button .social-profile-trainer, .social-profile-hero > .social-profile-trainer { width: 92px !important; height: 92px !important; border: 3px solid rgba(255,255,255,.94); border-radius: 28px; } .social-profile-avatar-button > i { position: absolute; inset: auto 7px 7px; padding: 5px 8px; border-radius: 10px; background: rgba(7, 45, 67, .82); color: #fff; font: 800 10px/1 var(--ui-font, system-ui); font-style: normal; letter-spacing: .02em; } .social-profile-avatar-button:hover .social-profile-trainer, .social-profile-avatar-button:focus-visible .social-profile-trainer { box-shadow: 0 0 0 4px rgba(33, 152, 232, .2), 0 8px 22px rgba(11, 77, 116, .18); } .trainer-avatar-picker { margin: -4px 0 12px; padding: 16px; border: 1px solid #b9dbef; border-radius: 20px; background: rgba(248,253,255,.98); box-shadow: 0 14px 34px rgba(18, 73, 105, .14); } .trainer-avatar-picker[hidden] { display: none !important; } .trainer-avatar-picker > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .trainer-avatar-picker > header span { display: grid; gap: 2px; } .trainer-avatar-picker > header small { color: #1489d1; font-size: 10px; font-weight: 900; letter-spacing: .12em; } .trainer-avatar-picker > header b { color: #173e58; font-size: 16px; } .trainer-avatar-picker > header button { width: 34px; height: 34px; border: 1px solid #c7dfed; border-radius: 12px; background: #fff; color: #476c83; font-size: 20px; } .trainer-avatar-picker > div { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; } .trainer-avatar-picker > div > button { position: relative; aspect-ratio: 1; padding: 3px; border: 2px solid transparent; border-radius: 18px; background: #eaf6fc; cursor: pointer; } .trainer-avatar-picker > div > button:hover { border-color: #8bd0f7; transform: translateY(-1px); } .trainer-avatar-picker > div > button.is-selected { border-color: #168fe0; background: #dcf3ff; } .trainer-avatar-choice { width: 100%; height: 100%; } .trainer-avatar-picker > div > button > i { display: none; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #168fe0; color: #fff; font: 900 12px/1 system-ui; font-style: normal; } .trainer-avatar-picker > div > button.is-selected > i { display: grid; } .trainer-avatar-picker > p { margin: 11px 2px 0; color: #65859a; font-size: 12px; } .social-party-avatar, .social-friend-icon, .party-hud-avatar { width: 44px !important; height: 44px !important; border-radius: 15px !important; } .chat-tabs { display: grid !important; grid-template-columns: repeat(5, minmax(88px, 1fr)) !important; gap: 5px !important; overflow-x: auto; scrollbar-width: none; } .chat-tabs::-webkit-scrollbar { display: none; } .chat-tabs > button { min-width: 0; padding-inline: 8px !important; } .chat-tabs .channel-location.is-active { color: #0b8c72 !important; background: #effbf8 !important; } html .game-screen #chatPanel > .chat-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; overflow: hidden !important; } html .game-screen #chatPanel > .chat-tabs > button { gap: 5px !important; padding-inline: 6px !important; } html .game-screen #chatPanel > .chat-tabs > .channel-location.is-active { border-color: #a9dfd3 !important; background: #effbf8 !important; color: #0b8c72 !important; } .chat-player-avatar, .chat-message-avatar:not(.is-system), .chat-private-avatar, .mobile-chat-avatar { width: 40px !important; height: 40px !important; border: 2px solid rgba(255,255,255,.96) !important; } .chat-message-avatar:not(.is-system) { padding: 0; } .chat-private-avatar { width: 42px !important; height: 42px !important; } .mobile-chat-avatar { width: 42px !important; height: 42px !important; border-radius: 14px !important; } .chat-message:not(.is-notice) { align-items: start; padding: 10px 12px; border-radius: 16px; background: transparent; } .chat-message:not(.is-notice):hover { background: rgba(226,242,250,.55); } .chat-message.is-self:not(.is-notice) { background: rgba(222,242,252,.72); } .chat-message:not(.is-notice) .chat-message-body > p { width: fit-content; max-width: min(100%, 560px); margin-top: 3px; padding: 0; border: 0; background: none; color: #315b73; line-height: 1.46; } .chat-message.is-self:not(.is-notice) .chat-message-body > p { padding: 8px 11px; border-radius: 3px 13px 13px 13px; background: #d4eefb; color: #214f69; } .chat-message.is-location-message .chat-message-body > p { color: #176d60; } .chat-channel-chip.is-location { background: #e6f7f2; color: #16836f; } html .game-screen #chatPanel .chat-message.is-notice { --notice-soft: #edf8fe; grid-template-columns: 42px minmax(0, 1fr) !important; gap: 11px !important; margin: 6px 8px !important; padding: 13px 14px !important; border: 1px solid color-mix(in srgb, var(--notice) 28%, white) !important; border-left: 4px solid var(--notice) !important; border-radius: 16px !important; background: var(--notice-soft) !important; } html .game-screen #chatPanel .chat-message.is-notice.notice-success { --notice: #20a56b; --notice-soft: #edf9f3; } html .game-screen #chatPanel .chat-message.is-notice.notice-warning { --notice: #dd9220; --notice-soft: #fff8e9; } html .game-screen #chatPanel .chat-message.is-notice.notice-critical { --notice: #e35050; --notice-soft: #fff1f1; } html .game-screen #chatPanel .chat-message.is-notice.notice-admin { --notice: #665ee8; --notice-soft: #f3f2ff; } html .game-screen #chatPanel .chat-message.is-notice.notice-event { --notice: #b16de0; --notice-soft: #fbf2ff; } html .game-screen #chatPanel .chat-message.is-notice .chat-message-avatar.is-system { display: grid; place-items: center; width: 42px !important; height: 42px !important; border-radius: 14px !important; background: color-mix(in srgb, var(--notice) 14%, white) !important; } html .game-screen #chatPanel .chat-message.is-notice .chat-message-avatar svg { width: 23px !important; height: 23px !important; } html .game-screen #chatPanel .chat-message.is-notice .chat-message-meta { gap: 7px !important; } html .game-screen #chatPanel .chat-message.is-notice .chat-message-meta > b { color: #173e58 !important; } html .game-screen #chatPanel .chat-message.is-notice .chat-message-meta > small { font-size: 10px !important; font-weight: 850 !important; text-transform: uppercase; letter-spacing: .06em; } html .game-screen #chatPanel .chat-message.is-notice .chat-message-body > p { margin: 4px 0 0 !important; color: #476a7f !important; } .chat-recent-dialogs > article { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 4px; align-items: center; border-radius: 14px; } .chat-recent-dialogs > article.is-pinned { background: #eef8ff; } .chat-recent-dialogs > article > button:first-child { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; min-width: 0; } .chat-dialog-pin, [data-chat-private-pin] { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #c9e0ed; border-radius: 11px; background: #fff; color: #7994a5; font-size: 20px; transform: rotate(-30deg); } .chat-dialog-pin[aria-pressed="true"], [data-chat-private-pin].is-active { border-color: #76bff0; background: #e7f5ff; color: #168fe0; } .chat-private-head { grid-template-columns: auto 42px minmax(0,1fr) auto auto !important; } .chat-directory-player.is-friend, .chat-online-player.is-friend { background: #f0f9ff; } @media (max-width: 760px) { html .game-screen #chatPanel > .chat-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; padding-bottom: 4px !important; } html .game-screen #chatPanel > .chat-tabs > button { min-height: 46px !important; padding-inline: 3px !important; } html .game-screen #chatPanel .chat-message.is-notice { margin-inline: 2px !important; padding: 11px !important; } .trainer-avatar-picker { margin-inline: 0; padding: 13px; border-radius: 18px; } .trainer-avatar-picker > div { grid-template-columns: repeat(4, minmax(0, 1fr)); } .social-profile-avatar-button { width: 78px; height: 78px; } .social-profile-avatar-button .social-profile-trainer, .social-profile-hero > .social-profile-trainer { width: 78px !important; height: 78px !important; border-radius: 23px; } } @supports not (color: color-mix(in srgb, red 50%, white)) { html .game-screen #chatPanel .chat-message.is-notice { border-color: #c8dfea !important; } html .game-screen #chatPanel .chat-message.is-notice .chat-message-avatar.is-system { background: #e6f3fa !important; } } /* pk-style-source:57 */ /* /chat-stability-v77.css */ /* PokePark v77 — stable chat dock, flat messages and scroll-safe media picker. */ html .game-screen #chatPanel.chat-panel.chat-messenger { --chat-dock-height: 72px; } html .game-screen #chatPanel > .chat-tabs { grid-template-columns: repeat(var(--chat-visible-channel-count, 5), minmax(0, 1fr)) !important; } html .game-screen #chatPanel > .chat-tabs > button[hidden] { display: none !important; } html .game-screen #chatPanel > .chat-messenger-layout, html .game-screen #chatPanel .chat-conversation, html .game-screen #chatPanel .chat-log-wrap { min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; } html .game-screen #chatPanel .chat-conversation { grid-template-rows: auto minmax(0, 1fr) auto auto !important; background: color-mix(in srgb, var(--chat75-card) 44%, transparent) !important; } /* Keep every region on its intended row even when the private-chat header or reply preview is hidden. Auto-placement previously moved the log into row 1 and allowed the composer to cover the newest message. */ html .game-screen #chatPanel .chat-private-head { grid-row: 1 !important; } html .game-screen #chatPanel .chat-log-wrap { grid-row: 2 !important; } html .game-screen #chatPanel .chat-reply-preview { grid-row: 3 !important; } html .game-screen #chatPanel #chatForm { grid-row: 4 !important; } html .game-screen #chatPanel .chat-log { width: 100% !important; max-width: 100% !important; height: 100% !important; padding: 10px 12px 16px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; scroll-padding-block: 12px 18px !important; scrollbar-gutter: stable !important; } html .game-screen #chatPanel .chat-log > *, html .game-screen #chatPanel .chat-message-body, html .game-screen #chatPanel .chat-message-meta, html .game-screen #chatPanel .chat-message-body > p { min-width: 0 !important; max-width: 100% !important; } html .game-screen #chatPanel .chat-message:not(.is-notice) { grid-template-columns: 38px minmax(0, 1fr) 28px !important; gap: 9px !important; width: 100% !important; margin: 0 !important; padding: 9px 4px !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--chat75-line) 52%, transparent) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html .game-screen #chatPanel .chat-message:not(.is-notice):hover, html .game-screen #chatPanel .chat-message.is-self:not(.is-notice), html .game-screen #chatPanel .chat-message.is-location-message:not(.is-notice), html .game-screen #chatPanel .chat-message.is-trade-message:not(.is-notice) { background: transparent !important; box-shadow: none !important; } html .game-screen #chatPanel .chat-message:not(.is-notice) .chat-message-body > p, html .game-screen #chatPanel .chat-message.is-self:not(.is-notice) .chat-message-body > p { width: auto !important; margin: 2px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--chat75-copy) !important; box-shadow: none !important; overflow-wrap: anywhere !important; word-break: break-word !important; } html .game-screen #chatPanel .chat-message:not(.is-notice) .chat-message-more { opacity: .34 !important; } html .game-screen #chatPanel .chat-message:not(.is-notice):hover .chat-message-more, html .game-screen #chatPanel .chat-message:not(.is-notice):focus-within .chat-message-more { opacity: 1 !important; } html .game-screen #chatPanel .chat-message.is-notice { --notice: #238fce; display: grid !important; grid-template-columns: 32px minmax(0, 1fr) !important; gap: 10px !important; width: auto !important; margin: 0 4px !important; padding: 11px 4px !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--chat75-line) 64%, transparent) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html .game-screen #chatPanel .chat-message.is-notice.notice-success { --notice: #169b65; } html .game-screen #chatPanel .chat-message.is-notice.notice-warning { --notice: #c98419; } html .game-screen #chatPanel .chat-message.is-notice.notice-critical { --notice: #df4e4e; } html .game-screen #chatPanel .chat-message.is-notice.notice-admin { --notice: #6259df; } html .game-screen #chatPanel .chat-message.is-notice.notice-event { --notice: #9e57cf; } html .game-screen #chatPanel .chat-message.is-notice .chat-message-avatar.is-system { display: grid !important; place-items: center !important; width: 32px !important; height: 32px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--notice) !important; box-shadow: none !important; } html .game-screen #chatPanel .chat-message.is-notice .chat-message-avatar svg { width: 22px !important; height: 22px !important; } html .game-screen #chatPanel .chat-message.is-notice .chat-message-meta { display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 4px 7px !important; } html .game-screen #chatPanel .chat-message.is-notice .chat-message-meta > b { color: var(--chat75-ink) !important; font-size: 13px !important; } html .game-screen #chatPanel .chat-message.is-notice .chat-message-meta > small { color: var(--notice) !important; font-size: 9px !important; font-weight: 840 !important; letter-spacing: .045em !important; text-transform: uppercase !important; } html .game-screen #chatPanel .chat-message.is-notice .chat-message-body > p { width: auto !important; margin: 2px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--chat75-copy) !important; box-shadow: none !important; font-style: normal !important; line-height: 1.42 !important; overflow-wrap: anywhere !important; } html .game-screen #chatPanel .chat-reply-preview { position: relative !important; z-index: 5 !important; margin: 0 !important; padding: 7px 12px !important; border: 0 !important; border-top: 1px solid color-mix(in srgb, var(--chat75-line) 66%, transparent) !important; border-left: 3px solid var(--chat75-accent) !important; border-radius: 0 !important; background: var(--chat75-card) !important; } html .game-screen #chatPanel #chatForm { position: relative !important; z-index: 6 !important; flex: 0 0 auto !important; grid-template-columns: 42px minmax(0, 1fr) 46px !important; min-width: 0 !important; min-height: 66px !important; margin: 0 !important; padding: 10px 12px 11px !important; border: 0 !important; border-top: 1px solid color-mix(in srgb, var(--chat75-line) 78%, transparent) !important; border-radius: 0 !important; background: var(--chat75-card) !important; box-shadow: 0 -5px 14px rgba(12, 55, 75, .035) !important; } html .game-screen #chatPanel #chatForm:focus-within { border-color: color-mix(in srgb, var(--chat75-accent) 38%, var(--chat75-line)) !important; box-shadow: 0 -5px 14px rgba(12, 55, 75, .035) !important; } html .game-screen #chatPanel #chatForm textarea { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; } html .game-screen #chatPanel .chat-jump-latest { right: 12px !important; bottom: 12px !important; } html .game-screen #chatPanel > .chat-emoji-panel { right: auto !important; bottom: calc(var(--chat-dock-height, 72px) + 8px) !important; left: 12px !important; width: min(440px, calc(100% - 24px)) !important; height: min(390px, calc(100% - var(--chat-dock-height, 72px) - 132px)) !important; min-height: 220px !important; max-height: calc(100% - var(--chat-dock-height, 72px) - 24px) !important; overflow: hidden !important; } html .game-screen #chatPanel .chat-emoji-grid { min-width: 0 !important; min-height: 0 !important; max-height: 100% !important; overflow-x: hidden !important; overflow-y: scroll !important; overscroll-behavior: contain !important; touch-action: pan-y !important; scrollbar-gutter: stable !important; scrollbar-width: thin !important; scrollbar-color: color-mix(in srgb, var(--chat75-accent) 48%, var(--chat75-line)) transparent !important; } html .game-screen #chatPanel .chat-emoji-grid::-webkit-scrollbar { width: 8px !important; } html .game-screen #chatPanel .chat-emoji-grid::-webkit-scrollbar-thumb { border: 2px solid transparent !important; border-radius: 99px !important; background: color-mix(in srgb, var(--chat75-accent) 48%, var(--chat75-line)) !important; background-clip: padding-box !important; } html .game-screen #chatPanel .chat-channel-visibility { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 12px !important; } html .game-screen #chatPanel .chat-channel-visibility legend { padding-inline: 5px !important; color: var(--chat75-copy) !important; font-size: 11px !important; font-weight: 800 !important; } html .game-screen #chatPanel .chat-channel-visibility > label { display: grid !important; grid-template-columns: 18px minmax(0, 1fr) !important; align-items: center !important; gap: 7px !important; } html .game-screen #chatPanel .chat-channel-visibility > small { grid-column: 1 / -1 !important; color: var(--chat75-muted) !important; font-size: 9px !important; line-height: 1.4 !important; } @media (max-width: 760px) { html .game-screen #chatPanel .chat-message:not(.is-notice) { grid-template-columns: 34px minmax(0, 1fr) !important; padding: 8px 2px !important; } html .game-screen #chatPanel .chat-message.is-notice { grid-template-columns: 28px minmax(0, 1fr) !important; gap: 8px !important; margin-inline: 2px !important; padding: 9px 2px !important; } html .game-screen #chatPanel .chat-message.is-notice .chat-message-avatar.is-system { width: 28px !important; height: 28px !important; } html .game-screen #chatPanel #chatForm { grid-template-columns: 40px minmax(0, 1fr) 44px !important; min-height: 64px !important; padding: 8px 9px 9px !important; } html .game-screen #chatPanel > .chat-emoji-panel { right: 8px !important; left: 8px !important; width: auto !important; height: min(48dvh, calc(100% - var(--chat-dock-height, 68px) - 124px)) !important; min-height: 230px !important; } } @media (max-width: 380px) { html .game-screen #chatPanel > .chat-emoji-panel { min-height: 210px !important; } } @supports not (color: color-mix(in srgb, red 50%, white)) { html .game-screen #chatPanel .chat-message.is-notice, html .game-screen #chatPanel .chat-message:not(.is-notice), html .game-screen #chatPanel #chatForm { border-color: #d4e5ec !important; } } /* pk-style-source:58 */ /* /chat-pokemon-v78.css */ /* PokePark v78 — scrollable media rail, compact message actions and Pokémon mentions. */ html .game-screen #chatPanel .chat-conversation { position: relative !important; } html .game-screen #chatPanel > .chat-emoji-panel > .chat-emoji-category-rail { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: 36px minmax(0, 1fr) 36px !important; align-items: center !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; height: 48px !important; padding: 5px 6px !important; border-bottom: 1px solid color-mix(in srgb, var(--chat75-line) 70%, transparent) !important; background: color-mix(in srgb, var(--chat75-card) 82%, transparent) !important; } html .game-screen #chatPanel .chat-emoji-category-rail .chat-emoji-categories { display: flex !important; align-items: center !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; height: 38px !important; margin: 0 !important; padding: 0 2px !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-inline: contain !important; scroll-behavior: smooth !important; scroll-snap-type: inline proximity !important; touch-action: pan-x !important; border: 0 !important; background: transparent !important; scrollbar-width: none !important; } html .game-screen #chatPanel .chat-emoji-category-rail .chat-emoji-categories::-webkit-scrollbar { display: none !important; } html .game-screen #chatPanel .chat-emoji-category-rail .chat-emoji-categories > button { flex: 0 0 auto !important; grid-template-columns: 22px auto !important; gap: 6px !important; width: auto !important; min-width: 42px !important; height: 36px !important; min-height: 36px !important; padding: 0 9px !important; scroll-snap-align: start !important; border-radius: 10px !important; } html .game-screen #chatPanel .chat-emoji-category-rail .chat-emoji-categories > button > span { width: 22px !important; height: 22px !important; font-size: 17px !important; } html .game-screen #chatPanel .chat-emoji-category-rail .chat-emoji-categories > button > b { display: block !important; font-size: 10px !important; font-weight: 760 !important; } html .game-screen #chatPanel .chat-emoji-rail-button { display: grid !important; place-items: center !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; padding: 0 0 2px !important; border: 1px solid color-mix(in srgb, var(--chat75-line) 90%, transparent) !important; border-radius: 10px !important; background: var(--chat75-card) !important; color: var(--chat75-accent-strong) !important; box-shadow: 0 2px 7px rgba(13, 59, 79, .06) !important; font: 760 22px/1 Inter, "Segoe UI", sans-serif !important; cursor: pointer !important; } html .game-screen #chatPanel .chat-emoji-rail-button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--chat75-accent) 40%, var(--chat75-line)) !important; background: color-mix(in srgb, var(--chat75-accent) 9%, var(--chat75-card)) !important; } html .game-screen #chatPanel .chat-emoji-rail-button:disabled { opacity: .28 !important; cursor: default !important; } html .game-screen #chatPanel .chat-message:not(.is-notice) { grid-template-columns: 38px minmax(0, 1fr) 34px !important; } html .game-screen #chatPanel .chat-message-more { display: grid !important; place-items: center !important; align-self: start !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--chat75-muted) !important; cursor: pointer !important; } html .game-screen #chatPanel .chat-message-more svg { width: 21px !important; height: 21px !important; fill: currentColor !important; } html .game-screen #chatPanel .chat-message-more:hover, html .game-screen #chatPanel .chat-message-more:focus-visible { background: color-mix(in srgb, var(--chat75-accent) 10%, transparent) !important; color: var(--chat75-accent-strong) !important; outline: none !important; } html .game-screen #chatPanel > .chat-popover.is-message-actions { width: 232px !important; min-width: 210px !important; max-width: min(252px, calc(100% - 16px)) !important; height: auto !important; min-height: 0 !important; max-height: min(310px, calc(100% - 58px)) !important; padding: 7px !important; overflow-x: hidden !important; overflow-y: auto !important; border: 1px solid color-mix(in srgb, var(--chat75-line) 96%, transparent) !important; border-radius: 15px !important; background: color-mix(in srgb, var(--chat75-card) 98%, transparent) !important; box-shadow: 0 18px 42px rgba(7, 37, 52, .22), 0 2px 7px rgba(7, 37, 52, .08) !important; } html .game-screen #chatPanel > .chat-popover.is-message-actions .chat-popover-actions { display: grid !important; gap: 2px !important; padding: 0 !important; } html .game-screen #chatPanel > .chat-popover.is-message-actions .chat-popover-actions > button { display: grid !important; grid-template-columns: 22px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; width: 100% !important; min-height: 42px !important; padding: 7px 10px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--chat75-copy) !important; text-align: left !important; cursor: pointer !important; } html .game-screen #chatPanel > .chat-popover.is-message-actions .chat-popover-actions > button:hover, html .game-screen #chatPanel > .chat-popover.is-message-actions .chat-popover-actions > button:focus-visible { background: var(--chat75-hover) !important; color: var(--chat75-ink) !important; outline: none !important; } html .game-screen #chatPanel > .chat-popover.is-message-actions .chat-popover-actions > button.is-danger { color: #d54c55 !important; } html .game-screen #chatPanel > .chat-popover.is-message-actions .chat-action-icon { width: 20px !important; height: 20px !important; } html .game-screen #chatPanel > .chat-popover.is-message-actions .chat-popover-actions > button span, html .game-screen #chatPanel > .chat-popover.is-message-actions .chat-popover-actions > button b { display: block !important; min-width: 0 !important; margin: 0 !important; color: inherit !important; font: 760 13px/1.2 Inter, "Segoe UI", system-ui, sans-serif !important; } html .game-screen #chatPanel .chat-pokemon-mention { display: inline-flex !important; align-items: center !important; gap: 6px !important; min-height: 34px !important; margin: 1px 2px !important; padding: 2px 8px 2px 3px !important; border: 1px solid color-mix(in srgb, var(--chat75-accent) 24%, var(--chat75-line)) !important; border-radius: 11px !important; background: color-mix(in srgb, var(--chat75-accent) 7%, var(--chat75-card)) !important; color: var(--chat75-ink) !important; vertical-align: middle !important; box-shadow: none !important; cursor: pointer !important; } html .game-screen #chatPanel .chat-pokemon-mention:hover { border-color: color-mix(in srgb, var(--chat75-accent) 50%, var(--chat75-line)) !important; background: color-mix(in srgb, var(--chat75-accent) 12%, var(--chat75-card)) !important; } html .game-screen #chatPanel .chat-pokemon-mention img { width: 30px !important; height: 30px !important; object-fit: contain !important; image-rendering: pixelated !important; } html .game-screen #chatPanel .chat-pokemon-mention > span { display: inline-flex !important; align-items: baseline !important; gap: 5px !important; } html .game-screen #chatPanel .chat-pokemon-mention small { color: var(--chat75-accent-strong) !important; font: 820 9px/1 Inter, "Segoe UI", sans-serif !important; } html .game-screen #chatPanel .chat-pokemon-mention b { color: inherit !important; font: 760 12px/1.1 Inter, "Segoe UI", sans-serif !important; } html .game-screen #chatPanel .chat-pokemon-suggest { position: absolute !important; right: 10px !important; bottom: calc(var(--chat-dock-height, 72px) + 8px) !important; left: 10px !important; z-index: 28 !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; max-height: min(326px, calc(100% - var(--chat-dock-height, 72px) - 24px)) !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--chat75-accent) 22%, var(--chat75-line)) !important; border-radius: 16px !important; background: color-mix(in srgb, var(--chat75-card) 98%, transparent) !important; box-shadow: 0 20px 46px rgba(6, 37, 52, .24) !important; } html .game-screen #chatPanel .chat-pokemon-suggest[hidden] { display: none !important; } html .game-screen #chatPanel .chat-pokemon-suggest > header { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 48px !important; padding: 8px 12px !important; border-bottom: 1px solid var(--chat75-line) !important; } html .game-screen #chatPanel .chat-pokemon-suggest > header span { display: grid !important; gap: 2px !important; } html .game-screen #chatPanel .chat-pokemon-suggest > header small { color: var(--chat75-accent-strong) !important; font-size: 8px !important; font-weight: 850 !important; letter-spacing: .07em !important; } html .game-screen #chatPanel .chat-pokemon-suggest > header b { color: var(--chat75-ink) !important; font-size: 13px !important; } html .game-screen #chatPanel .chat-pokemon-suggest > header kbd { padding: 4px 7px !important; border: 1px solid var(--chat75-line) !important; border-radius: 7px !important; background: var(--chat75-soft) !important; color: var(--chat75-muted) !important; font-size: 9px !important; } html .game-screen #chatPanel .chat-pokemon-suggest > div[role="listbox"] { min-height: 0 !important; padding: 5px !important; overflow-y: auto !important; overscroll-behavior: contain !important; scrollbar-width: thin !important; } html .game-screen #chatPanel .chat-pokemon-suggest [data-chat-pokemon-suggest] { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto !important; align-items: center !important; gap: 9px !important; width: 100% !important; min-height: 52px !important; padding: 4px 9px 4px 5px !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: var(--chat75-copy) !important; text-align: left !important; cursor: pointer !important; } html .game-screen #chatPanel .chat-pokemon-suggest [data-chat-pokemon-suggest]:hover, html .game-screen #chatPanel .chat-pokemon-suggest [data-chat-pokemon-suggest].is-active { background: color-mix(in srgb, var(--chat75-accent) 9%, var(--chat75-card)) !important; } html .game-screen #chatPanel .chat-pokemon-suggest [data-chat-pokemon-suggest] img { width: 42px !important; height: 42px !important; object-fit: contain !important; image-rendering: pixelated !important; } html .game-screen #chatPanel .chat-pokemon-suggest [data-chat-pokemon-suggest] > span { display: grid !important; gap: 3px !important; min-width: 0 !important; } html .game-screen #chatPanel .chat-pokemon-suggest [data-chat-pokemon-suggest] small { overflow: hidden !important; color: var(--chat75-muted) !important; font-size: 9px !important; font-weight: 700 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html .game-screen #chatPanel .chat-pokemon-suggest [data-chat-pokemon-suggest] b { overflow: hidden !important; color: var(--chat75-ink) !important; font-size: 13px !important; font-weight: 780 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html .game-screen #chatPanel .chat-pokemon-suggest [data-chat-pokemon-suggest] em { color: var(--chat75-accent-strong) !important; font-size: 9px !important; font-style: normal !important; font-weight: 800 !important; } html .game-screen #chatPanel .chat-pokemon-suggest-loading { display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; min-height: 62px !important; color: var(--chat75-copy) !important; font-size: 12px !important; } html .game-screen #chatPanel .chat-pokemon-suggest-loading span { width: 18px !important; height: 18px !important; border: 2px solid color-mix(in srgb, var(--chat75-accent) 24%, transparent) !important; border-top-color: var(--chat75-accent) !important; border-radius: 50% !important; animation: chatPokemonSpin .7s linear infinite !important; } @keyframes chatPokemonSpin { to { transform: rotate(360deg); } } @media (max-width: 760px) { html .game-screen #chatPanel > .chat-emoji-panel > .chat-emoji-category-rail { grid-template-columns: 34px minmax(0, 1fr) 34px !important; gap: 2px !important; padding-inline: 4px !important; } html .game-screen #chatPanel .chat-emoji-category-rail .chat-emoji-categories > button { grid-template-columns: 22px !important; min-width: 34px !important; padding: 0 6px !important; } html .game-screen #chatPanel .chat-emoji-category-rail .chat-emoji-categories > button > b { display: none !important; } html .game-screen #chatPanel .chat-message:not(.is-notice) { grid-template-columns: 34px minmax(0, 1fr) 30px !important; } html .game-screen #chatPanel .chat-message-more { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; } html .game-screen #chatPanel .chat-pokemon-suggest { right: 7px !important; left: 7px !important; } html .game-screen #chatPanel .chat-pokemon-mention b { font-size: 11px !important; } } @media (prefers-reduced-motion: reduce) { html .game-screen #chatPanel .chat-emoji-category-rail .chat-emoji-categories { scroll-behavior: auto !important; } html .game-screen #chatPanel .chat-pokemon-suggest-loading span { animation-duration: 1.4s !important; } } /* pk-style-source:59 */ /* /chat-content-v79.css */ html .game-screen #chatPanel .chat-pokemon-mention.is-pending{border-style:dashed !important;}html .game-screen #chatPanel .chat-pokemon-mention.is-pending b{color:var(--chat75-copy) !important;}html .game-screen #chatPanel .chat-message-meta{gap:8px !important;min-height:20px !important;}html .game-screen #chatPanel .chat-channel-chip{min-height:20px !important;padding:0 7px !important;font-size:8.5px !important;line-height:20px !important;font-weight:650 !important;letter-spacing:.005em !important;}@media(max-width:760px){html .game-screen #chatPanel .chat-channel-chip{min-height:19px !important;padding-inline:6px !important;font-size:8px !important;line-height:19px !important;}} /* pk-style-source:60 */ /* /profile-v80.css */ /* v2.9.43 — illustrated trainer profile scenes, owner/visitor modes and gifts */ .game-screen .side-panel.is-social-profile { width:min(760px,calc(100vw - 120px)); max-height:min(84vh,790px); } .game-screen .side-panel.is-social-profile #sidePanelContent { max-height:calc(min(84vh,790px) - 32px); } .profile-v80 { --profile-blue:#218cf0; --profile-ink:#173d57; --profile-muted:#688396; --profile-line:rgba(74,135,171,.2); --profile-card:rgba(255,255,255,.86); position:relative; display:grid; gap:11px; color:var(--theme-text,var(--profile-ink)); } .profile-v80-icon { width:20px; height:20px; } .profile-v80-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 255px; min-height:248px; overflow:hidden; border:1px solid rgba(255,255,255,.78); border-radius:24px; background-color:#328bcc; background-position:center; background-size:100% 100%; background-repeat:no-repeat; box-shadow:inset 0 -68px 70px rgba(8,65,84,.34),0 12px 28px rgba(28,89,119,.16); } .profile-v80-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,35,61,.82),rgba(7,48,72,.28) 48%,rgba(9,43,55,.04) 72%); pointer-events:none; } .profile-v80-identity { position:relative; z-index:2; display:grid; grid-template-columns:96px minmax(0,1fr); gap:15px; align-items:end; align-self:end; padding:24px; color:#fff; } .profile-v80-identity > .social-profile-trainer, .profile-v80-identity > .social-profile-avatar-button { align-self:end; } .profile-v80 .social-profile-trainer { width:92px; height:92px; border:4px solid rgba(255,255,255,.92); border-radius:50%; box-shadow:0 10px 28px rgba(0,36,58,.34),0 0 0 2px rgba(26,139,221,.28); } .profile-v80 .social-profile-avatar-button { position:relative; width:96px; height:116px; border:0; background:none; color:#fff; } .profile-v80 .social-profile-avatar-button .social-profile-trainer { display:block; } .profile-v80 .social-profile-avatar-button > i { position:absolute; left:50%; bottom:0; display:flex; align-items:center; gap:4px; min-width:76px; height:24px; padding:0 8px; transform:translateX(-50%); border:1px solid rgba(255,255,255,.65); border-radius:999px; background:rgba(8,59,79,.82); font:800 9px/1 system-ui; font-style:normal; white-space:nowrap; } .profile-v80 .social-profile-avatar-button > i svg { width:12px; height:12px; } .profile-v80-identity small { display:block; color:#d9f4ff; font-size:10px; font-weight:900; letter-spacing:.1em; } .profile-v80-identity h2 { margin:5px 0 9px; color:#fff; font-size:clamp(28px,3.2vw,39px); line-height:.96; letter-spacing:-.045em; text-shadow:0 2px 8px rgba(0,40,63,.3); } .profile-v80-identity p { display:flex; flex-wrap:wrap; gap:6px; margin:0; } .profile-v80-identity p span { display:flex; align-items:center; gap:5px; min-height:28px; padding:0 9px; border:1px solid rgba(255,255,255,.34); border-radius:999px; background:rgba(5,53,70,.58); color:#f5fcff; font-size:11px; font-weight:800; backdrop-filter:blur(5px); } .profile-v80-identity p svg { width:14px; height:14px; } .profile-v80-relation { display:inline-flex; align-items:center; min-height:23px; margin-top:7px; padding:0 9px; border-radius:999px; background:#38c97a; color:#fff; font-size:9px; font-style:normal; font-weight:900; } .profile-v80-relation.is-friend { background:#e8b62c; } .profile-v80-relation.is-party { background:#9863e9; } .profile-v80-stage { position:relative; z-index:2; align-self:end; height:238px; pointer-events:none; } .profile-v80-trainer-stage { display:none; } .profile-v80-stage-pokemon { position:absolute; right:3px; bottom:12px; display:grid; place-items:center; width:126px; height:126px; transform-origin:50% 100%; animation:profile-v80-companion-idle 3.4s ease-in-out infinite; filter:drop-shadow(0 11px 6px rgba(0,31,45,.38)); } .profile-v80-stage-pokemon img { width:100%; height:100%; object-fit:contain; } .profile-v80-stage-empty { position:absolute; right:31px; bottom:36px; display:grid; place-items:center; width:68px; height:68px; border:2px dashed rgba(255,255,255,.65); border-radius:50%; background:rgba(7,43,61,.2); color:#fff; font:700 30px/1 system-ui; font-style:normal; backdrop-filter:blur(4px); } @keyframes profile-v80-companion-idle { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-5px) rotate(1deg); } } .profile-v80-edit { position:absolute; z-index:4; top:14px; right:14px; display:flex; align-items:center; gap:8px; min-height:42px; padding:6px 13px; border:1px solid rgba(255,255,255,.7); border-radius:14px; background:rgba(255,255,255,.9); color:#1769b1; box-shadow:0 8px 18px rgba(20,70,96,.16); text-align:left; } .profile-v80-edit svg { width:17px; height:17px; } .profile-v80-edit b,.profile-v80-edit small { display:block; } .profile-v80-edit b { font-size:10px; } .profile-v80-edit small { margin-top:2px; color:#66879a; font-size:8px; } .profile-v80-actions { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); overflow:hidden; border:1px solid var(--profile-line); border-radius:17px; background:var(--profile-card); } .profile-v80-actions button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:52px; padding:6px 8px; border:0; border-right:1px solid var(--profile-line); background:transparent; color:#315a71; text-align:left; } .profile-v80-actions button:last-child { border-right:0; } .profile-v80-actions button:hover { background:#eef8ff; color:#1786e9; } .profile-v80-actions button.is-gift { color:#8c52d8; } .profile-v80-actions button.is-battle { color:#df5a58; } .profile-v80-actions svg { width:21px; height:21px; } .profile-v80-actions b,.profile-v80-actions small { display:block; } .profile-v80-actions b { font-size:10.5px; } .profile-v80-actions small { margin-top:2px; color:#7890a0; font-size:8px; } .profile-v80-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; } .profile-v80--visitor .profile-v80-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); } .profile-v80-tabs button { min-height:44px; gap:7px; border:1px solid var(--profile-line); border-radius:13px; background:rgba(255,255,255,.82); color:#4e6d81; font-size:11px; } .profile-v80-tabs button svg { width:18px; height:18px; } .profile-v80-tabs button b { font-size:10px; } .profile-v80-tabs button.is-active { border-color:#58aaf0; background:#eaf6ff; color:#137dcc; box-shadow:inset 0 -2px #2c91eb; } .profile-v80-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .profile-v80-stats article { display:grid; grid-template-columns:44px minmax(0,1fr); gap:9px; align-items:center; min-height:82px; padding:11px; border:1px solid var(--profile-line); border-radius:17px; background:var(--profile-card); box-shadow:0 7px 18px rgba(38,90,120,.06); } .profile-v80-stats article > svg { width:38px; height:38px; padding:7px; border-radius:13px; background:#edf7ff; color:#2f91e5; } .profile-v80-stats article > span.is-level { display:grid; place-items:center; width:42px; height:42px; clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%); background:linear-gradient(145deg,#65cf82,#2ba861); color:#fff; font:900 18px/1 system-ui; } .profile-v80-stats small,.profile-v80-stats b,.profile-v80-stats em { display:block; } .profile-v80-stats small { color:var(--profile-muted); font-size:8.5px; font-weight:900; letter-spacing:.06em; } .profile-v80-stats b { margin-top:3px; color:var(--profile-ink); font-size:21px; line-height:1; } .profile-v80-stats b i { color:#7890a0; font-size:9px; font-style:normal; } .profile-v80-stats em { margin-top:5px; overflow:hidden; color:#7890a0; font-size:8px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; } .profile-v80-overview-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:9px; } .profile-v80-lead, .profile-v80-progress, .profile-v80-achievement-panel, .profile-v80-showcase, .profile-v80-code { border:1px solid var(--profile-line); border-radius:18px; background:var(--profile-card); box-shadow:0 7px 18px rgba(38,90,120,.05); } .profile-v80-lead { display:grid; grid-template-columns:104px minmax(0,1fr); grid-template-rows:1fr auto; gap:8px 13px; min-height:176px; padding:13px; } .profile-v80-lead-art { grid-row:1/3; display:grid; place-items:center; overflow:hidden; border-radius:18px; background:radial-gradient(circle at 50% 40%,#fff,#dff2ff); } .profile-v80-lead-emoji,.profile-v80-lead-emoji img { width:94px; height:94px; object-fit:contain; } .profile-v80-lead small { color:var(--profile-muted); font-size:8.5px; font-weight:900; letter-spacing:.08em; } .profile-v80-lead h3 { margin:4px 0; color:var(--profile-ink); font-size:18px; } .profile-v80-lead h3 i { color:#f0bd2e; font-style:normal; } .profile-v80-lead p { margin:0 0 10px; color:var(--profile-muted); font-size:10.5px; } .profile-v80-lead label span { display:flex; justify-content:space-between; color:#607c8f; font-size:9px; } .profile-v80-lead label > i { display:block; height:7px; margin-top:5px; overflow:hidden; border-radius:999px; background:#dce8ef; } .profile-v80-lead label em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ff5c87,#fa9cbd); } .profile-v80-lead > button { min-height:33px; border:1px solid #b9ddf7; border-radius:10px; background:#f5fbff; color:#187fd2; font-size:9px; font-weight:850; } .profile-v80-progress { min-height:176px; padding:14px; } .profile-v80-progress header small,.profile-v80-progress header b { display:block; } .profile-v80-progress header small { color:var(--profile-muted); font-size:8.5px; font-weight:900; letter-spacing:.08em; } .profile-v80-progress header b { margin-top:3px; color:var(--profile-ink); font-size:14px; } .profile-v80-progress > div { display:grid; gap:0; margin-top:9px; } .profile-v80-progress > div span { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:8px; align-items:center; min-height:29px; border-top:1px solid rgba(90,136,164,.13); color:#55758a; } .profile-v80-progress > div span:first-child { border-top:0; } .profile-v80-progress span svg { width:16px; height:16px; color:#5c9ecf; } .profile-v80-progress span b { overflow:hidden; font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; } .profile-v80-progress span em { color:var(--profile-ink); font-size:11px; font-style:normal; font-weight:900; } .profile-v80-achievement-panel { display:grid; gap:10px; padding:14px; } .profile-v80-achievement-panel > header,.profile-v80-showcase > header { display:flex; align-items:center; justify-content:space-between; gap:10px; } .profile-v80-achievement-panel > header small,.profile-v80-achievement-panel > header b,.profile-v80-showcase > header small,.profile-v80-showcase > header b { display:block; } .profile-v80-achievement-panel > header small,.profile-v80-showcase > header small { color:var(--profile-muted); font-size:8.5px; font-weight:900; letter-spacing:.08em; } .profile-v80-achievement-panel > header b,.profile-v80-showcase > header b { margin-top:3px; color:var(--profile-ink); font-size:14px; } .profile-v80-achievement-panel > header em { color:#7c92a0; font-size:7px; font-style:normal; } .profile-v80-achievement-panel > header button { border:0; background:none; color:#218cf0; font-size:9px; font-weight:850; } .profile-v80-achievements { display:grid; gap:8px; } .profile-v80-achievement { position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); gap:9px; align-items:center; min-height:73px; padding:9px; border:1px solid rgba(86,132,160,.18); border-radius:15px; background:#fbfdff; } .profile-v80-achievement.is-locked { opacity:.52; filter:grayscale(.75); } .profile-v80-achievement > span { display:grid; place-items:center; width:46px; height:52px; clip-path:polygon(50% 0,90% 18%,100% 62%,50% 100%,0 62%,10% 18%); color:#fff; filter:drop-shadow(0 4px 5px rgba(45,74,94,.16)); } .profile-v80-achievement.is-gold > span { background:linear-gradient(145deg,#ffd966,#e9a313); } .profile-v80-achievement.is-blue > span { background:linear-gradient(145deg,#79c8ff,#3881cc); } .profile-v80-achievement.is-violet > span { background:linear-gradient(145deg,#c590ff,#7245ba); } .profile-v80-achievement.is-green > span { background:linear-gradient(145deg,#7ee195,#35a564); } .profile-v80-achievement > span svg { width:25px; height:25px; } .profile-v80-achievement b,.profile-v80-achievement small { display:block; } .profile-v80-achievement b { color:var(--profile-ink); font-size:9.5px; line-height:1.2; } .profile-v80-achievement small { margin-top:4px; color:#718999; font-size:7.5px; line-height:1.25; } .profile-v80-achievement > i { position:absolute; top:5px; right:6px; color:#eeb82c; font-size:8px; font-style:normal; } .profile-v80-achievement-panel.is-compact .profile-v80-achievement:nth-child(4) { display:none; } .profile-v80-achievement-panel.is-compact .profile-v80-achievements { grid-template-columns:repeat(3,minmax(0,1fr)); } .profile-v80-showcase { display:grid; gap:10px; padding:14px; } .profile-v80-showcase > header > em { color:#7b92a1; font-size:7px; font-style:normal; } .profile-v80-showcase > header > button { display:flex; align-items:center; gap:5px; min-height:31px; padding:0 10px; border:1px solid #c9b4ee; border-radius:10px; background:#f8f2ff; color:#8653c8; font-weight:850; } .profile-v80-showcase > header > button svg { width:15px; height:15px; } .profile-v80-showcase > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .profile-v80-gift { position:relative; display:grid; grid-template-rows:minmax(86px,1fr) auto; overflow:hidden; min-width:0; border:1px solid rgba(82,135,165,.16); border-radius:15px; background:#f5fbff; transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,filter .22s; } .profile-v80-gift:hover { transform:translateY(-4px) rotate(-1deg); filter:saturate(1.08); box-shadow:0 12px 22px rgba(52,104,135,.15); } .profile-v80-gift:nth-child(even):hover { transform:translateY(-4px) rotate(1deg); } .profile-v80-gift img { width:100%; height:94px; transition:transform .28s cubic-bezier(.2,.8,.2,1); } .profile-v80-gift:hover img { transform:scale(1.07); } .profile-v80-gift > span { min-width:0; padding:7px 8px 8px; background:rgba(255,255,255,.9); } .profile-v80-gift b,.profile-v80-gift small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .profile-v80-gift b { color:var(--profile-ink); font-size:9.5px; } .profile-v80-gift small { margin-top:3px; color:#718999; font-size:8px; } .profile-v80-gift-empty { grid-column:1/-1; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:2px 10px; min-height:72px; padding:10px; border:1px dashed #a9cfe8; border-radius:14px; color:#648398; } .profile-v80-gift-empty span { grid-row:1/3; display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#e9f6ff; color:#368fd2; } .profile-v80-gift-empty b { font-size:9px; } .profile-v80-gift-empty small { font-size:7px; } .profile-v80-code { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:62px; padding:12px 15px; } .profile-v80-code small,.profile-v80-code b { display:block; } .profile-v80-code small { color:var(--profile-muted); font-size:7px; font-weight:900; letter-spacing:.08em; } .profile-v80-code b { margin-top:3px; color:var(--profile-ink); font:900 17px/1.1 system-ui; letter-spacing:.06em; } .profile-v80-code button { display:flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; border:1px solid #b7ddf7; border-radius:11px; background:#f3faff; color:#187fd2; font-size:8px; font-weight:850; } .profile-v80-code button svg { width:16px; height:16px; } .profile-v80-team .social-team-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .profile-v80-team .social-team-pokemon { min-height:66px; grid-template-columns:54px minmax(0,1fr); } .profile-v80-team .social-team-pokemon > span { width:54px; height:54px; } .profile-v80-team .social-team-pokemon b { font-size:10px; } .profile-v80-team .social-team-pokemon em { font-size:7px; } .profile-v80-social-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .profile-v80-invite { display:grid; gap:10px; } .profile-v80-invite > header { padding:15px 16px; border:1px solid var(--profile-line); border-radius:18px; background:linear-gradient(135deg,#f4fbff,#f8f5ff); } .profile-v80-invite > header small,.profile-v80-invite > header b { display:block; } .profile-v80-invite > header small { color:#6b70c8; font-size:7px; font-weight:900; letter-spacing:.09em; } .profile-v80-invite > header b { margin-top:4px; color:var(--profile-ink); font-size:15px; } .profile-v80-invite > header p { margin:5px 0 0; color:var(--profile-muted); font-size:8px; } .profile-v80-social-card { align-content:start; } .profile-v80 .trainer-avatar-picker { z-index:25; } .profile-v80-appearance-picker { display:grid; gap:14px; margin-top:-3px; padding:17px; } .profile-v80-appearance-picker > header { margin-bottom:0; } .profile-v80-appearance-picker > div { display:block; } .profile-v80-appearance-picker > div > small { display:block; margin:0 0 7px 2px; color:#638398; font-size:8px; font-weight:900; letter-spacing:.09em; } .profile-v80-scene-picker > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; } .profile-v80-scene-picker button { position:relative; overflow:hidden; padding:0; border:2px solid transparent; border-radius:15px; background:#eaf4fa; text-align:left; } .profile-v80-scene-picker button:hover { transform:translateY(-2px); border-color:#8ecdf3; } .profile-v80-scene-picker button.is-selected { border-color:#168fe0; box-shadow:0 0 0 3px rgba(22,143,224,.12); } .profile-v80-scene-picker img { display:block; width:100%; aspect-ratio:2.15; object-fit:cover; } .profile-v80-scene-picker button > span { display:block; min-height:45px; padding:7px 9px; background:#fff; } .profile-v80-scene-picker button b,.profile-v80-scene-picker button small { display:block; } .profile-v80-scene-picker button b { color:var(--profile-ink); font-size:9px; } .profile-v80-scene-picker button small { margin-top:2px; overflow:hidden; color:#718999; font-size:6.5px; text-overflow:ellipsis; white-space:nowrap; } .profile-v80-scene-picker button > i { display:none; position:absolute; top:7px; right:7px; width:23px; height:23px; place-items:center; border:2px solid #fff; border-radius:50%; background:#168fe0; color:#fff; font:900 12px/1 system-ui; font-style:normal; } .profile-v80-scene-picker button.is-selected > i { display:grid; } .profile-v80-avatar-picker > div { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; } .profile-v80-avatar-picker button { position:relative; aspect-ratio:1; padding:2px; border:2px solid transparent; border-radius:13px; background:#eaf6fc; } .profile-v80-avatar-picker button.is-selected { border-color:#168fe0; } .profile-v80-avatar-picker button > i { display:none; position:absolute; right:-2px; bottom:-2px; width:18px; height:18px; place-items:center; border:2px solid #fff; border-radius:50%; background:#168fe0; color:#fff; font:900 10px/1 system-ui; font-style:normal; } .profile-v80-avatar-picker button.is-selected > i { display:grid; } .profile-v80-gift-picker { position:fixed; z-index:300; inset:0; display:grid; place-items:center; padding:18px; background:rgba(10,41,58,.43); backdrop-filter:blur(7px); } .profile-v80-gift-picker[hidden] { display:none; } .profile-v80-gift-picker-card { width:min(530px,100%); max-height:100%; overflow:auto; padding:16px; border:1px solid rgba(255,255,255,.9); border-radius:22px; background:#f8fcff; box-shadow:0 22px 50px rgba(8,43,61,.3); } .profile-v80-gift-picker-card > header { display:flex; justify-content:space-between; gap:16px; padding:2px 2px 12px; } .profile-v80-gift-picker-card > header small,.profile-v80-gift-picker-card > header b { display:block; } .profile-v80-gift-picker-card > header small { color:#7a5db1; font-size:7px; font-weight:900; letter-spacing:.08em; } .profile-v80-gift-picker-card > header b { margin-top:4px; color:var(--profile-ink); font-size:18px; } .profile-v80-gift-picker-card > header p { margin:5px 0 0; color:#718999; font-size:8px; } .profile-v80-gift-picker-card > header button { width:36px; height:36px; border:1px solid #c9dce8; border-radius:12px; background:#fff; color:#47677b; font-size:20px; } .profile-v80-gift-picker-card > div { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .profile-v80-gift-choice { display:grid; grid-template-columns:86px minmax(0,1fr); gap:10px; align-items:center; min-height:96px; overflow:hidden; padding:7px; border:1px solid #c9dce8; border-radius:16px; background:#fff; color:var(--profile-ink); text-align:left; } .profile-v80-gift-choice:hover { transform:translateY(-2px); border-color:#9d7ed1; box-shadow:0 9px 18px rgba(76,87,137,.11); } .profile-v80-gift-choice img { width:82px; height:82px; border-radius:12px; object-fit:cover; } .profile-v80-gift-choice b,.profile-v80-gift-choice small { display:block; } .profile-v80-gift-choice b { font-size:10px; } .profile-v80-gift-choice small { margin-top:5px; color:#718999; font-size:7px; line-height:1.3; } .profile-v80-gift-picker-card > footer { margin-top:12px; color:#718999; font-size:8px; text-align:center; } .profile-v80-gift-picker-card > footer b { color:#8354c6; } html[data-game-theme="dark"] .profile-v80 { --profile-ink:#e7f5ff; --profile-muted:#8caabb; --profile-line:rgba(110,180,211,.2); --profile-card:rgba(12,42,57,.88); } html[data-game-theme="dark"] .profile-v80 :is(.profile-v80-achievement,.profile-v80-gift,.profile-v80-gift-choice) { background:#12394d; } html[data-game-theme="dark"] .profile-v80 :is(.profile-v80-gift > span,.profile-v80-gift-picker-card) { background:#0f3346; } html[data-game-theme="dark"] .profile-v80-tabs button.is-active { background:#163f57; color:#7bc4ff; } html[data-game-theme="dark"] .profile-v80-stats article > svg { background:#173e52; } @media (max-width:800px) { .game-screen .side-panel.is-social-profile { width:auto; max-height:none; } .game-screen .side-panel.is-social-profile #sidePanelContent { max-height:100%; } .profile-v80 { gap:9px; } .profile-v80-hero { grid-template-columns:minmax(0,1fr) 154px; min-height:214px; border-radius:19px; } .profile-v80-identity { grid-template-columns:70px minmax(0,1fr); gap:10px; padding:15px 10px 15px 14px; } .profile-v80 .social-profile-trainer { width:68px; height:68px; border-width:3px; } .profile-v80 .social-profile-avatar-button { width:70px; height:91px; } .profile-v80 .social-profile-avatar-button > i { min-width:62px; height:21px; font-size:7px; } .profile-v80-identity small { font-size:8.5px; } .profile-v80-identity h2 { margin:4px 0 6px; font-size:25px; } .profile-v80-identity p { display:grid; gap:4px; } .profile-v80-identity p span { width:max-content; max-width:100%; min-height:24px; padding:0 7px; font-size:9px; } .profile-v80-stage { height:204px; } .profile-v80-stage-pokemon { right:0; bottom:9px; width:90px; height:90px; } .profile-v80-edit { top:8px; right:8px; min-height:34px; padding:5px 8px; } .profile-v80-edit span { display:none; } .profile-v80-actions { grid-template-columns:repeat(3,minmax(0,1fr)); } .profile-v80-actions button { min-height:48px; border-bottom:1px solid var(--profile-line); } .profile-v80-actions button:nth-child(3) { border-right:0; } .profile-v80-actions button:nth-last-child(-n+2) { border-bottom:0; } .profile-v80-actions small { display:none; } .profile-v80-tabs,.profile-v80--visitor .profile-v80-tabs { grid-template-columns:repeat(5,minmax(86px,1fr)); overflow:auto; } .profile-v80--visitor .profile-v80-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); } .profile-v80-tabs button { min-width:86px; min-height:40px; } .profile-v80-stats { grid-template-columns:1fr 1fr; } .profile-v80-stats article { min-height:70px; } .profile-v80-overview-grid,.profile-v80-social-grid { grid-template-columns:1fr; } .profile-v80-lead,.profile-v80-progress { min-height:160px; } .profile-v80-achievements { grid-template-columns:1fr 1fr; } .profile-v80-achievement-panel.is-compact .profile-v80-achievements { grid-template-columns:1fr; } .profile-v80-achievement-panel.is-compact .profile-v80-achievement:nth-child(4) { display:grid; } .profile-v80-showcase > div { grid-template-columns:1fr 1fr; } .profile-v80-gift img { height:112px; } .profile-v80-team .social-team-grid { grid-template-columns:1fr 1fr; } .profile-v80-code { min-height:58px; } .profile-v80-code b { font-size:15px; } .profile-v80-gift-picker { padding:8px; } .profile-v80-gift-picker-card { padding:12px; border-radius:18px; } .profile-v80-gift-picker-card > div { grid-template-columns:1fr; } .profile-v80-avatar-picker > div { grid-template-columns:repeat(6,minmax(0,1fr)); } } @media (max-width:410px) { .profile-v80-hero { grid-template-columns:minmax(0,1fr) 125px; min-height:196px; } .profile-v80-identity { grid-template-columns:60px minmax(0,1fr); } .profile-v80 .social-profile-trainer { width:58px; height:58px; } .profile-v80 .social-profile-avatar-button { width:60px; } .profile-v80-identity h2 { font-size:21px; } .profile-v80-stage { height:186px; } .profile-v80-stage-pokemon { width:76px; height:76px; } .profile-v80-scene-picker > div { grid-template-columns:1fr; } .profile-v80-achievements,.profile-v80-team .social-team-grid { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { .profile-v80-gift,.profile-v80-gift img,.profile-v80-gift-choice { transition:none!important; } .profile-v80-gift:hover,.profile-v80-gift:nth-child(even):hover,.profile-v80-gift-choice:hover { transform:none!important; } } /* v2.9.44 — separate profile scene layers, Pokedex companion art and raster icon system */ .game-screen .side-panel.is-social-profile { width:min(980px,calc(100vw - 72px)); max-height:min(88vh,880px); } .game-screen .side-panel.is-social-profile #sidePanelContent { max-height:calc(min(88vh,880px) - 32px); } .profile-v80 { gap:9px; } .profile-v80-icon { display:block; width:24px; height:24px; flex:0 0 auto; border-radius:50%; object-fit:cover; box-shadow:0 2px 7px rgba(29,76,111,.14); } .profile-v80-hero { grid-template-columns:minmax(0,1fr) 280px; min-height:216px; border-radius:22px; background-image:var(--profile-scene,url('/assets/v2.9.60/maps/kanto/oak-lab-district.webp')); background-position:center 58%; background-size:cover; box-shadow:inset 0 -58px 70px rgba(8,52,72,.28),0 10px 25px rgba(28,89,119,.14); } .profile-v80-hero::before { background:linear-gradient(90deg,rgba(5,35,61,.84),rgba(7,48,72,.34) 45%,rgba(9,43,55,.03) 73%); } .profile-v80-identity { grid-template-columns:88px minmax(0,1fr); gap:13px; padding:18px 20px; } .profile-v80 .social-profile-trainer { width:84px; height:84px; } .profile-v80 .social-profile-avatar-button { width:88px; height:106px; } .profile-v80 .social-profile-avatar-button > i { min-width:72px; height:23px; font-size:8px; } .profile-v80 .social-profile-avatar-button > i .profile-v80-icon { width:14px; height:14px; } .profile-v80-identity small { font-size:9px; } .profile-v80-identity h2 { margin:4px 0 7px; font-size:clamp(27px,3vw,36px); } .profile-v80-identity p span { min-height:26px; font-size:10px; } .profile-v80-identity p .profile-v80-icon { width:17px; height:17px; } .profile-v80-stage { height:210px; } .profile-v82-trainer { position:absolute; right:78px; bottom:25px; width:124px; height:124px; object-fit:contain; object-position:center; filter:drop-shadow(0 9px 5px rgba(0,31,45,.25)); } .profile-v80-stage-pokemon { right:2px; bottom:10px; width:78px; height:78px; overflow:visible; background:transparent; filter:drop-shadow(0 8px 5px rgba(0,31,45,.34)); } .profile-v80-stage-pokemon img { transform:none!important; } .profile-v80-stage-empty { right:10px; bottom:22px; } .profile-v80-edit { top:10px; right:10px; min-height:38px; padding:5px 10px; } .game-screen .side-panel.is-social-profile .profile-v80-edit { position:absolute; z-index:4; } .profile-v80-edit > .profile-v80-icon { width:23px; height:23px; } .profile-v80-actions button { min-height:50px; } .profile-v80-actions button > .profile-v80-icon { width:30px; height:30px; } .profile-v80-actions b { font-size:11px; } .profile-v80-tabs { gap:6px; } .profile-v80-tabs button { min-height:42px; } .profile-v80-tabs button > .profile-v80-icon { width:28px; height:28px; } .profile-v80-tabs button b { font-size:10.5px; } .profile-v80-stats article { grid-template-columns:40px minmax(0,1fr); min-height:68px; padding:9px 10px; border-radius:15px; } .profile-v80-stats article > .profile-v80-icon { width:38px; height:38px; padding:0; border-radius:12px; } .profile-v80-stats article > span.is-level { width:38px; height:38px; font-size:17px; } .profile-v80-stats small { font-size:8px; } .profile-v80-stats b { font-size:19px; } .profile-v80-stats em { margin-top:3px; font-size:7.5px; } .profile-v80-showcase { gap:7px; padding:11px 12px; } .profile-v80-showcase > header small { font-size:8px; } .profile-v80-showcase > header b { font-size:13px; } .profile-v80-showcase > header > button { min-height:30px; font-size:8px; } .profile-v80-showcase > header > button .profile-v80-icon { width:20px; height:20px; } .profile-v80-gift { grid-template-columns:64px minmax(0,1fr); grid-template-rows:1fr; align-items:center; min-height:70px; } .profile-v80-gift img { width:64px; height:68px; object-fit:cover; } .profile-v80-gift > span { align-self:stretch; display:grid; align-content:center; padding:6px 7px; } .profile-v80-gift b { font-size:9px; } .profile-v80-overview-grid { grid-template-columns:1.02fr .9fr 1.08fr; gap:8px; align-items:stretch; } .profile-v80-lead { grid-template-columns:78px minmax(0,1fr); gap:7px 10px; min-height:148px; padding:10px; } .profile-v80-lead-art { border-radius:15px; } .profile-v80-lead-emoji,.profile-v80-lead-emoji img { width:72px; height:72px; } .profile-v80-lead-emoji { overflow:visible; background:transparent; } .profile-v80-lead-emoji img { transform:none!important; } .profile-v80-lead small { font-size:7.5px; } .profile-v80-lead h3 { font-size:15px; } .profile-v80-lead p { margin-bottom:7px; font-size:9px; } .profile-v80-lead > button { min-height:29px; font-size:8px; } .profile-v80-progress { min-height:148px; padding:11px; } .profile-v80-progress header small { font-size:7.5px; } .profile-v80-progress header b { font-size:13px; } .profile-v80-progress > div { margin-top:6px; } .profile-v80-progress > div span { grid-template-columns:22px minmax(0,1fr) auto; min-height:25px; gap:6px; } .profile-v80-progress span > .profile-v80-icon { width:20px; height:20px; } .profile-v80-progress span b { font-size:8.5px; } .profile-v80-progress span em { font-size:10px; } .profile-v80-achievement-panel { padding:11px; } .profile-v80-achievement-panel > header small { font-size:7.5px; } .profile-v80-achievement-panel > header b { font-size:13px; } .profile-v80-achievements { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; } .profile-v80-achievement { grid-template-columns:44px minmax(0,1fr); min-height:64px; padding:7px; border-radius:14px; } .profile-v80-achievement > span { width:42px; height:42px; clip-path:none; border-radius:13px; background:transparent!important; filter:none; } .profile-v80-achievement > span .profile-v80-icon { width:42px; height:42px; border-radius:13px; } .profile-v80-achievement b { font-size:9px; } .profile-v80-achievement small { margin-top:2px; font-size:7px; } .profile-v80-achievement-panel.is-compact { min-height:148px; gap:6px; } .profile-v80-achievement-panel.is-compact .profile-v80-achievements { grid-template-columns:1fr; gap:3px; } .profile-v80-achievement-panel.is-compact .profile-v80-achievement { grid-template-columns:34px minmax(0,1fr); min-height:33px; padding:3px 5px; border-radius:10px; } .profile-v80-achievement-panel.is-compact .profile-v80-achievement:nth-child(n+4) { display:none; } .profile-v80-achievement-panel.is-compact .profile-v80-achievement > span, .profile-v80-achievement-panel.is-compact .profile-v80-achievement > span .profile-v80-icon { width:32px; height:32px; border-radius:9px; } .profile-v80-achievement-panel.is-compact .profile-v80-achievement small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .profile-v80-achievement.is-rose,.profile-v80-achievement.is-amber,.profile-v80-achievement.is-aqua,.profile-v80-achievement.is-red { background:#fbfdff; } .profile-v80-code { min-height:54px; padding:9px 13px; } .profile-v80-code button .profile-v80-icon { width:22px; height:22px; } .profile-v80-code b { font-size:16px; } .profile-v80-appearance-picker { gap:11px; padding:14px; } .profile-v80-scene-picker img { aspect-ratio:2.4; } @media (max-width:800px) { .game-screen .side-panel.is-social-profile { width:auto; max-height:none; } .game-screen .side-panel.is-social-profile #sidePanelContent { max-height:100%; } .profile-v80-hero { grid-template-columns:minmax(0,1fr) 164px; min-height:196px; } .profile-v80-stage { height:190px; } .profile-v82-trainer { right:55px; bottom:30px; width:104px; height:104px; } .profile-v80-stage-pokemon { width:68px; height:68px; } .profile-v80-overview-grid { grid-template-columns:1fr; } .profile-v80-achievement-panel.is-compact .profile-v80-achievements { grid-template-columns:repeat(3,minmax(0,1fr)); } .profile-v80-achievement-panel.is-compact .profile-v80-achievement { grid-template-columns:32px minmax(0,1fr); } .profile-v80-showcase > div { display:flex; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; padding-bottom:3px; } .profile-v80-showcase > div::-webkit-scrollbar { display:none; } .profile-v80-gift { flex:0 0 150px; scroll-snap-align:start; } } @media (max-width:470px) { .profile-v80-hero { grid-template-columns:minmax(0,1fr) 128px; min-height:184px; } .profile-v80-identity { grid-template-columns:62px minmax(0,1fr); gap:8px; padding:12px 8px 12px 12px; } .profile-v80 .social-profile-trainer { width:58px; height:58px; } .profile-v80 .social-profile-avatar-button { width:62px; height:79px; } .profile-v80-identity h2 { font-size:21px; } .profile-v80-identity p span { min-height:23px; font-size:8px; } .profile-v80-stage { height:178px; } .profile-v82-trainer { right:44px; bottom:43px; width:78px; height:78px; } .profile-v80-stage-pokemon { right:-3px; width:56px; height:56px; } .profile-v80-edit { top:7px; right:7px; } .profile-v80-stats article { grid-template-columns:36px minmax(0,1fr); } .profile-v80-stats article > .profile-v80-icon { width:34px; height:34px; } .profile-v80-achievement-panel.is-compact .profile-v80-achievements { grid-template-columns:1fr; } .profile-v80-achievements { grid-template-columns:1fr 1fr; } } /* v2.9.45 profile navigation and Pokedex team polish */ .profile-v80-tabs { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-x:contain; scroll-snap-type:x proximity; } .profile-v80-tabs::-webkit-scrollbar { display:none; } .profile-v80-tabs button { scroll-snap-align:center; } .profile-v80-tabs button:focus-visible { outline:3px solid rgba(37,147,229,.28); outline-offset:2px; } .profile-v80-team .social-team-pokemon > span { overflow:hidden; border:1px solid rgba(96,151,183,.18); background:radial-gradient(circle at 50% 42%,#fff 0 28%,#e8f6ff 72%,#d6ebf7 100%); } .profile-v80-team-art, .profile-v80-team-art img { display:block; width:52px; height:52px; object-fit:contain; } .profile-v80-team-art img { transform:scale(var(--profile-scale,1)); } .profile-v80-team .social-team-pokemon.is-lead { border-color:#6db8ec; background:linear-gradient(135deg,#f8fdff,#eef8ff); box-shadow:inset 3px 0 #2f9ce9; } .profile-v80-team .social-team-pokemon small { font-size:7px; letter-spacing:.06em; } .profile-v80-team .social-team-pokemon b { font-size:11px; } .profile-v80-team .social-team-pokemon em { font-size:8px; } .profile-v80-team > header p { margin:3px 0 0; color:var(--profile-muted); font-size:8px; } .profile-v80-team .social-team-grid { margin-top:4px; } .profile-v80 .social-profile-tab-card, .profile-v80 .profile-v80-social-card, .profile-v80 .referral-program-card { border-color:var(--profile-line); border-radius:18px; background:var(--profile-card); box-shadow:0 7px 18px rgba(38,90,120,.05); } @media (max-width:470px) { .profile-v80-tabs, .profile-v80--visitor .profile-v80-tabs { grid-template-columns:repeat(5,minmax(94px,1fr)); padding-bottom:0; } .profile-v80--visitor .profile-v80-tabs { grid-template-columns:repeat(3,minmax(108px,1fr)); } .profile-v80-team .social-team-grid { grid-template-columns:1fr 1fr; } .profile-v80-team .social-team-pokemon { grid-template-columns:48px minmax(0,1fr); min-height:60px; } .profile-v80-team .social-team-pokemon > span, .profile-v80-team-art, .profile-v80-team-art img { width:46px; height:46px; } } @media (max-width:360px) { .profile-v80-team .social-team-grid { grid-template-columns:1fr; } } /* pk-style-source:61 */ /* /quest-hud-v87.css */ /* The quest HUD is a list, not a one-objective teaser. Scope overrides to this widget. */ .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed){display:flex!important;flex-direction:column;min-height:0!important;height:auto!important;max-height:min(410px,calc(100dvh - 280px))!important;overflow:hidden!important} .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed)>.quest-tracker-head-v57{display:flex!important;flex:0 0 auto;min-height:48px!important;padding:10px 12px!important} .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed) .quest-tracker-heading-v62{display:flex!important} .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed) .quest-tracker-compact-v62{display:none!important} .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed)>.quest-tracker-list-v57{display:block!important;min-height:0;flex:0 1 auto;max-height:350px;overflow:hidden auto!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable;touch-action:pan-y} .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed) .quest-tracker-row-v57{display:grid!important;position:relative;grid-template-columns:32px minmax(0,1fr) 68px;align-items:start;gap:10px;min-height:96px!important;padding:12px 10px 15px!important;border-bottom:1px solid var(--theme-border)} .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-row-v57>span>b{font-size:14px!important;line-height:1.3!important;white-space:normal!important;display:block!important;overflow-wrap:anywhere} .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-row-v57>span>em{font-size:12px!important;line-height:1.4!important;white-space:normal!important;display:block!important} .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-row-v57>span>small{font-size:9px!important;line-height:1.3!important} .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-row-v57>span>u{display:flex!important;align-items:center;gap:4px;font-size:11px!important;line-height:1.3!important;text-decoration:none} .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-row-v57>span>u svg{width:12px!important;height:12px!important;flex:0 0 12px} .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-choice-v62>button svg{width:14px!important;height:14px!important;flex:0 0 14px} .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-choice-v62{position:static!important;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;width:auto} .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-choice-v62>strong{font-size:14px!important;width:100%;text-align:right} .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-choice-v62>button{position:static!important;min-width:28px;min-height:28px;padding:5px!important;font-size:10px!important;cursor:pointer} .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-choice-v62>button[data-quest-primary]{width:100%} .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-choice-v62>.quest-hud-hide-v87{font-size:20px!important;line-height:1!important;color:var(--theme-muted);background:transparent;border:1px solid var(--theme-border);border-radius:8px} .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-row-v57>.quest-type-graphic-v61{width:32px!important;height:32px!important} .game-screen #questWidget.quest-widget-list-v87.is-collapsed>.quest-tracker-list-v57{display:none!important} @media(max-width:800px){.game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed){max-height:min(330px,calc(100dvh - 235px))!important}.game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed)>.quest-tracker-list-v57{max-height:275px}.game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed) .quest-tracker-row-v57{grid-template-columns:26px minmax(0,1fr) 62px;gap:7px;min-height:98px!important}} @media(max-height:540px){.game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed){max-height:45dvh!important}} /* pk-style-source:62 */ /* /pokepass-launcher-r1.css */ .ppl{position:absolute;z-index:47;width:254px;height:86px;border:0;background:none;padding:0;isolation:isolate;color:#24556a}.pplt{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.ppls,.pplm{display:none}.pplc{display:block;margin-left:49%}.pplc small{display:block;font-size:9px}.pplb{position:absolute;right:0;top:0;background:#e65;color:white;border-radius:50%}@media(max-width:760px){.ppl{width:70px;height:83px}.pplt,.pplc{display:none}.ppls,.pplm{display:block}.ppls{width:66px;height:66px}.pplm{font-size:9px;background:#fff5d5}} /* pk-style-source:63 */ /* /loading-v2956.css */ /* v2.9.56 · lightweight, panel-free world loading scene. */ #app .loading-screen { --loading-ink:#f8fcfb; --loading-muted:rgba(239,251,248,.82); position:fixed; z-index:160; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:max(24px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(54px,calc(34px + env(safe-area-inset-bottom))) max(18px,env(safe-area-inset-left)); overflow:hidden; background:#7abed7; color:var(--loading-ink); isolation:isolate; } #app .loading-scene { position:absolute; z-index:-3; inset:-2%; background-image:url('/assets/v2.9.56/loading/expedition-valley-v2.jpg'); background-position:center; background-size:cover; transform:scale(1.025); animation:loading-v2956-drift 16s ease-in-out infinite alternate; } #app .loading-screen::before { position:absolute; z-index:-2; inset:0; content:''; background: linear-gradient(180deg,rgba(20,70,88,.02) 22%,rgba(12,50,56,.08) 48%,rgba(5,27,32,.76) 100%), radial-gradient(ellipse at 50% 72%,transparent 0 22%,rgba(5,27,32,.08) 60%,rgba(3,22,27,.30) 100%); } #app .loading-screen::after { position:absolute; z-index:-1; left:50%; bottom:-150px; width:min(780px,110vw); height:410px; content:''; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse,rgba(4,27,32,.46),transparent 70%); pointer-events:none; } #app .loading-card { display:flex; width:min(480px,calc(100vw - 36px)); padding:0; flex-direction:column; align-items:center; border:0; border-radius:0; background:none; box-shadow:none; text-align:center; backdrop-filter:none; } #app .loading-compass { position:relative; width:62px; height:62px; margin:0 0 15px; border:2px solid rgba(255,255,255,.8); border-radius:50%; background:linear-gradient(180deg,#205a64 0 45%,#f1c956 45% 55%,#f7f3e7 55% 100%); box-shadow:0 13px 32px rgba(0,24,31,.30),inset 0 2px 2px rgba(255,255,255,.42); animation:loading-v2956-float 2.4s ease-in-out infinite; } #app .loading-compass::before { position:absolute; z-index:3; left:50%; top:50%; width:17px; height:17px; content:''; transform:translate(-50%,-50%); border:4px solid rgba(255,255,255,.92); border-radius:50%; background:#57b9c3; box-shadow:0 0 0 2px rgba(14,68,77,.54),0 4px 10px rgba(0,27,34,.24); } #app .loading-compass::after { position:absolute; left:12px; top:8px; width:24px; height:11px; content:''; transform:rotate(-24deg); border-radius:50%; background:rgba(255,255,255,.27); filter:blur(.2px); } #app .loading-compass i { position:absolute; inset:-8px; border:1px solid rgba(255,255,255,.34); border-top-color:rgba(255,255,255,.92); border-right-color:transparent; border-radius:50%; animation:loading-v2956-orbit 1.65s linear infinite; } #app .loading-compass span { position:absolute; z-index:4; right:-5px; left:auto; top:4px; width:6px; height:6px; clip-path:none; transform:none; border-radius:50%; background:#fff7ba; box-shadow:0 0 0 5px rgba(255,239,145,.12),0 0 16px rgba(255,239,145,.72); } #app .loading-kicker { margin:0 0 7px; color:#c8f2e7; font:850 9px/1.2 "Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif; letter-spacing:.17em; text-shadow:0 2px 13px rgba(2,28,34,.64); } #app .loading-card > b { margin:0; max-width:100%; color:#fff; font:780 clamp(24px,3.2vw,34px)/1.08 "Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif; letter-spacing:-.035em; text-wrap:balance; text-shadow:0 3px 20px rgba(0,25,31,.62); } #app .loading-card > #loadingSubtitle { max-width:430px; margin:8px 0 17px; color:var(--loading-muted); font:560 12px/1.45 "Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif; text-wrap:balance; text-shadow:0 2px 12px rgba(0,23,29,.72); } #app .loading-progress { width:min(360px,100%); height:4px; overflow:hidden; border:0; border-radius:99px; background:rgba(238,252,249,.22); box-shadow:0 1px 0 rgba(255,255,255,.09),0 6px 18px rgba(0,22,28,.16); } #app .loading-progress i { position:relative; display:block; width:8%; height:100%; overflow:hidden; border-radius:inherit; background:linear-gradient(90deg,#5ce1bf,#bde56b 60%,#ffd56b); box-shadow:0 0 12px rgba(101,226,190,.35); transition:width .35s cubic-bezier(.2,.7,.2,1); } #app .loading-progress i::after { position:absolute; inset:0; content:''; transform:translateX(-110%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); animation:loading-v2956-shimmer 1.7s ease-in-out infinite; } #app .loading-meta { display:flex; width:min(360px,100%); margin-top:8px; justify-content:space-between; gap:12px; color:rgba(244,255,252,.9); font:760 9px/1.2 "Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif; text-shadow:0 2px 9px rgba(0,24,30,.7); } #app .loading-meta time { color:rgba(225,243,240,.72); font-variant-numeric:tabular-nums; } #app .loading-tip { min-height:18px; max-width:410px; margin:11px 0 0; color:rgba(225,244,240,.72); font:520 10px/1.4 "Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif; text-wrap:balance; text-shadow:0 2px 10px rgba(0,23,29,.7); } #app .loading-recovery { width:min(430px,100%); margin-top:15px; padding:13px; border:1px solid rgba(255,255,255,.20); border-radius:17px; background:rgba(7,34,40,.66); box-shadow:0 14px 34px rgba(0,21,27,.24); backdrop-filter:blur(8px); } #app .loading-screen.is-error .loading-compass { animation:none; background:linear-gradient(180deg,#8f493b 0 45%,#f1bd54 45% 55%,#fff0d5 55% 100%); } #app .loading-screen.is-error .loading-progress i { background:linear-gradient(90deg,#ffad58,#ffdf6c); } #app .loading-screen.is-channel-switch { background:#173f46; backdrop-filter:none; } #app .loading-screen.is-channel-switch .loading-scene { opacity:.62; filter:saturate(.8); } #app .loading-screen.is-session-conflict .loading-compass { background:linear-gradient(180deg,#745b2d 0 45%,#ffd25c 45% 55%,#fff8df 55% 100%); } @keyframes loading-v2956-drift { to { transform:scale(1.055) translate3d(-.35%,.2%,0); } } @keyframes loading-v2956-float { 0%,100% { transform:translate3d(0,0,0); } 50% { transform:translate3d(0,-5px,0); } } @keyframes loading-v2956-orbit { to { transform:rotate(360deg); } } @keyframes loading-v2956-shimmer { 55%,100% { transform:translateX(120%); } } @media (max-width:600px) { #app .loading-screen { align-items:flex-end; padding:20px 18px max(34px,calc(23px + env(safe-area-inset-bottom))); } #app .loading-scene { inset:-3%; background-position:53% center; } #app .loading-screen::before { background:linear-gradient(180deg,rgba(10,53,67,.02) 20%,rgba(7,37,44,.15) 46%,rgba(4,25,30,.85) 100%); } #app .loading-card { width:min(100%,390px); } #app .loading-compass { width:54px; height:54px; margin-bottom:13px; } #app .loading-compass::before { width:15px; height:15px; border-width:3px; } #app .loading-card > b { font-size:25px; } #app .loading-card > #loadingSubtitle { margin-bottom:15px; font-size:11px; } #app .loading-tip { max-width:340px; font-size:9px; } } @media (prefers-reduced-motion:reduce) { #app .loading-scene, #app .loading-compass, #app .loading-compass i, #app .loading-progress i::after { animation:none; } } /* pk-style-source:64 */ /* /map-test-v2961.css */ /* DEV map testing mode. Loaded last so the atlas is not narrowed by legacy panel geometry. */ @media (min-width:801px) { .game-screen .side-panel.is-regions-panel, .game-screen .side-panel.is-regions-panel.is-open { top:28px; right:auto; bottom:auto; left:50%; width:min(1180px,calc(100vw - 56px)); height:min(860px,calc(100dvh - 56px)); max-width:none; max-height:none; border:1px solid rgba(205,226,237,.95); border-radius:28px!important; box-shadow:0 34px 90px rgba(4,30,47,.34),0 0 0 9999px rgba(5,31,43,.28); } .game-screen .side-panel.is-regions-panel { opacity:0; transform:translate(-50%,20px) scale(.985); transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1); } .game-screen .side-panel.is-regions-panel.is-open { opacity:1; transform:translate(-50%,0) scale(1); } .is-regions-panel .kanto-atlas-scroll { overflow-x:auto; } } .kanto-test-access { display:flex; align-items:center; gap:12px; margin-top:14px; padding:11px 14px; border:1px solid #8fd8bc; border-radius:15px; background:linear-gradient(135deg,#e9fff5,#eef9ff); color:#22664e; } .kanto-test-access b { flex:0 0 auto; padding:5px 8px; border-radius:8px; background:#1fa66d; color:#fff; font-size:8px; letter-spacing:.06em; } .kanto-test-access span { font-size:9px; font-weight:800; } .kanto-atlas-legend span.is-test::before { background:#19a9c9; box-shadow:0 0 0 3px rgba(25,169,201,.18); } .kanto-atlas-node.is-test-access > i { background:var(--node-accent,#19a9c9); } .kanto-atlas-node.is-test-access > span { color:#174f66; } .kanto-location-row.is-test-access { border-color:#9edce6; background:#f0fcff; cursor:pointer; } .kanto-location-row.is-test-access > i { background:#d9f7fb; color:#168eaa; } .kanto-location-row.is-test-access > em { color:#168eaa; } .kanto-atlas-canvas { background-color:#83c997; background-image:linear-gradient(rgba(235,255,246,.17),rgba(35,111,91,.15)),url('/assets/v2.9.61/maps/kanto-region-atlas-v1.png'); background-position:center; background-size:cover; } .kanto-atlas-canvas::before { background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(13,77,70,.08)); } .kanto-atlas-water { display:none; } @media (min-width:1400px) { .game-screen .side-panel.is-regions-panel, .game-screen .side-panel.is-regions-panel.is-open { width:min(1320px,calc(100vw - 72px)); } } @media (max-width:800px) { .kanto-test-access { align-items:flex-start; flex-direction:column; gap:7px; } } /* pk-style-source:65 */ /* /lab-minigames-v2964.css */ .lab-games{position:fixed;inset:0;z-index:980;display:none;place-items:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));font-family:Inter,system-ui,sans-serif}.lab-games.is-open{display:grid}.lab-games__shade{position:absolute;inset:0;background:rgba(3,9,18,.82)}.lab-games__shell{position:relative;width:min(920px,100%);height:min(760px,calc(100dvh - 24px));display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;border:1px solid color-mix(in srgb,var(--lab-accent) 55%,#27374d);border-radius:22px;background:linear-gradient(155deg,#101c2a,#07101b 70%);box-shadow:0 24px 80px #000b;color:#eff8ff}.lab-games__header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #ffffff18;background:linear-gradient(90deg,color-mix(in srgb,var(--lab-accent) 18%,transparent),transparent)}.lab-games__header h2{margin:1px 0 0;font-size:clamp(18px,3vw,28px)}.lab-games__header small{color:var(--lab-accent);font-weight:900;letter-spacing:.1em}.lab-games__header button{margin-left:auto;width:42px;height:42px;border:0;border-radius:13px;background:#ffffff12;color:#fff;font-size:28px}.lab-games__emblem{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:color-mix(in srgb,var(--lab-accent) 20%,#0b1420);font-size:26px}.lab-games__body{min-height:0;display:grid;grid-template-columns:1fr 270px;gap:14px;padding:14px}.lab-games__brief{grid-column:1/-1;display:flex;gap:12px;align-items:center;min-height:58px;padding:10px 13px;border-radius:14px;background:#ffffff0b}.lab-games__brief p{margin:0;color:#c9d8e8}.lab-games__brief b{color:var(--lab-accent)}.lab-games__arena{position:relative;min-height:330px;overflow:hidden;border-radius:18px;touch-action:none;user-select:none;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--lab-accent) 20%,#132030),#07101a 72%);box-shadow:inset 0 0 0 1px #ffffff14}.lab-games__board{overflow:auto;border-radius:16px;background:#ffffff08;padding:12px}.lab-games__board h3{margin:0 0 9px;font-size:14px;color:var(--lab-accent)}.lab-games__board ol{list-style:none;padding:0;margin:0;display:grid;gap:7px}.lab-games__board li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:8px;border-radius:10px;background:#0003;font-size:12px}.lab-games__board li.is-player{outline:1px solid var(--lab-accent)}.lab-games__footer{display:flex;align-items:center;gap:18px;padding:12px 16px;border-top:1px solid #ffffff18;background:#050c14}.lab-games__footer span{display:grid;min-width:70px}.lab-games__footer small{font-size:10px;color:#8294a8}.lab-games__footer b{font-size:21px}.lab-games__footer button{margin-left:auto;min-height:48px;padding:0 20px;border:0;border-radius:14px;background:var(--lab-accent);color:#07101a;font-weight:950;letter-spacing:.04em}.lab-games__footer button:disabled{opacity:.45}.lab-target{position:absolute;display:grid;place-items:center;width:76px;height:76px;border:0;border-radius:50%;background:color-mix(in srgb,var(--lab-accent) 28%,#111f2c);box-shadow:0 0 0 8px #ffffff0b,0 0 28px color-mix(in srgb,var(--lab-accent) 50%,transparent);color:#fff;font-size:30px;transform:translate(-50%,-50%);touch-action:manipulation}.lab-target.is-hit{animation:lab-hit .18s ease-out}.lab-grid{position:absolute;inset:12%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.lab-grid button{border:1px solid #ffffff1f;border-radius:14px;background:#ffffff0c;color:#fff;font-size:26px;touch-action:manipulation}.lab-grid button.is-active{background:var(--lab-accent);color:#07101a;box-shadow:0 0 22px var(--lab-accent)}.lab-meter{position:absolute;left:10%;right:10%;top:44%;height:38px;border-radius:20px;background:linear-gradient(90deg,#e95c70,#e8bf54 28%,#71e39b 43% 57%,#e8bf54 72%,#e95c70);box-shadow:inset 0 0 0 3px #0006}.lab-meter i{position:absolute;top:-9px;width:8px;height:56px;border-radius:4px;background:#fff;box-shadow:0 0 14px #fff}.lab-controls{position:absolute;inset:auto 8% 10%;display:flex;justify-content:center;gap:12px}.lab-controls button{min-width:82px;min-height:58px;border:1px solid #ffffff22;border-radius:16px;background:#ffffff14;color:#fff;font-weight:900;font-size:20px}.lab-status{position:absolute;left:12px;top:12px;padding:7px 10px;border-radius:10px;background:#0008;color:#fff;font-weight:800}.lab-games__arena.is-finished:after{content:'ИСПЫТАНИЕ ЗАВЕРШЕНО';position:absolute;inset:0;display:grid;place-items:center;background:#06101bd9;color:var(--lab-accent);font-weight:950;letter-spacing:.08em}.lab-result{display:grid;place-items:center;height:100%;text-align:center;padding:24px}.lab-result strong{font-size:56px;color:var(--lab-accent)}.lab-result b{font-size:22px}.lab-result p{color:#aebed0}.lab-result em{font-style:normal;padding:8px 13px;border-radius:20px;background:color-mix(in srgb,var(--lab-accent) 18%,transparent)}@keyframes lab-hit{50%{transform:translate(-50%,-50%) scale(.72)}} @media(max-width:720px){.lab-games{padding:0}.lab-games__shell{width:100%;height:100dvh;border-radius:0;border:0}.lab-games__body{grid-template-columns:1fr;padding:10px;gap:9px}.lab-games__brief{font-size:13px;min-height:50px}.lab-games__arena{min-height:0;height:42dvh}.lab-games__board{max-height:145px}.lab-games__footer{padding-bottom:max(12px,env(safe-area-inset-bottom));gap:10px}.lab-games__footer button{padding:0 13px;font-size:12px}.lab-target{width:68px;height:68px}} @media(max-height:620px) and (orientation:landscape){.lab-games__shell{height:100dvh;width:100%;border-radius:0}.lab-games__body{grid-template-columns:1fr 220px;padding:8px}.lab-games__brief{display:none}.lab-games__arena{min-height:0}.lab-games__header{padding:7px 12px}.lab-games__footer{padding:7px 12px}} @media(prefers-reduced-motion:reduce){.lab-target{animation:none!important}} .lab-flight{isolation:isolate;background:#5bc5f3;cursor:pointer}.lab-flight__sky{position:absolute;z-index:-3;inset:-3%;background:url('/assets/v2.9.66/minigames/pidgeot-flight/kanto-flight-course-v1.png') center/cover;animation:lab-flight-pan 22s ease-in-out infinite alternate;filter:saturate(1.08)}.lab-flight__sky:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#3e9ed422,transparent 30% 75%,#fff2)}.lab-flight__speed{position:absolute;z-index:-1;inset:0;opacity:.35;background:repeating-linear-gradient(174deg,transparent 0 28px,#fff9 30px 32px,transparent 34px 86px);background-size:180% 100%;animation:lab-flight-speed .7s linear infinite;mix-blend-mode:screen}.lab-flight__rider{position:absolute;z-index:4;left:28%;top:50%;width:clamp(150px,31%,270px);aspect-ratio:1.5;transform:translate(-50%,-50%) rotate(var(--tilt,0deg));transition:top .07s linear,transform .1s ease;filter:drop-shadow(0 12px 12px #16476b66)}.lab-flight__rider i{position:absolute;inset:-35%;background:url('/assets/v2.9.52/pokemon-actions/pidgeot-idle-pmd-v1.png') center/contain no-repeat;animation:lab-flight-breathe .48s ease-in-out infinite alternate}.lab-flight__rider.is-flapping i{animation:lab-flight-flap .14s ease-out}.lab-flight__gate{position:absolute;z-index:3;left:108%;top:var(--gate-y);width:clamp(74px,13%,118px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}.lab-flight__gate>i{position:absolute;inset:3%;border:clamp(8px,1.3vw,14px) solid #ffe069;border-radius:50%;box-shadow:0 0 10px #fff,0 0 25px #ffc400,0 0 50px #ffb30099,inset 0 0 18px #fff8;animation:lab-gate-spin 1.4s linear infinite}.lab-flight__gate.is-cleared>i{animation:lab-gate-clear .38s ease-out forwards}.lab-flight__gate.is-missed>i{filter:grayscale(1);opacity:.4}.lab-flight__gate.is-storm{display:grid;place-items:center;width:95px;border-radius:45%;background:radial-gradient(circle,#273059dd,#10152acc 67%,transparent 70%);box-shadow:0 0 40px #565effaa;color:#fff552;font-size:42px;animation:lab-storm .6s steps(2) infinite}.lab-flight__gate.is-storm>i{position:static;border:0;box-shadow:none;animation:none}.lab-flight__hud{position:absolute;z-index:8;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;pointer-events:none}.lab-flight__hud span{padding:7px 10px;border:1px solid #fff5;border-radius:12px;background:#063351b8;box-shadow:0 4px 16px #002a;font-size:11px;font-weight:900;letter-spacing:.08em}.lab-flight__hud b{color:#ffe571;font-size:16px}.lab-flight__hint{position:absolute;z-index:8;left:50%;bottom:13px;transform:translateX(-50%);width:max-content;max-width:90%;padding:8px 13px;border-radius:20px;background:#063351c7;color:#fff;font-size:12px;font-weight:800;text-align:center;animation:lab-hint 3.5s forwards}.lab-flight.is-flight-hit{animation:lab-flight-hit .3s}.lab-flight.is-flight-hit:before{content:'';position:absolute;z-index:7;inset:0;background:#ff335544;pointer-events:none}.lab-flight.lab-games__arena.is-finished:after{z-index:20}@keyframes lab-flight-pan{to{transform:scale(1.06) translateX(-2%)}}@keyframes lab-flight-speed{to{background-position:-180% 0}}@keyframes lab-flight-breathe{to{transform:translateY(-3px) scaleY(.985)}}@keyframes lab-flight-flap{50%{transform:scaleY(.86) rotate(-2deg)}}@keyframes lab-gate-spin{to{transform:rotateY(360deg)}}@keyframes lab-gate-clear{to{transform:scale(1.8);opacity:0}}@keyframes lab-storm{50%{filter:brightness(1.7)}}@keyframes lab-flight-hit{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}@keyframes lab-hint{0%,70%{opacity:1}100%{opacity:0}} @media(max-width:720px){.lab-flight__rider{left:25%;width:38%}.lab-flight__hint{font-size:11px}.lab-flight__gate{width:88px}} @media(prefers-reduced-motion:reduce){.lab-flight__sky,.lab-flight__speed,.lab-flight__rider i,.lab-flight__gate{animation:none!important}} .lab-flight__pidgey{position:absolute;z-index:5;left:28%;top:50%;width:128px;height:128px;background-image:url('/assets/v2.9.67/minigames/pidgey-flight/pidgey-flight-sheet-v1.png');background-size:768px 1024px;background-position:0 -512px;image-rendering:auto;transform:translate(-50%,-50%) scale(1.18) rotate(var(--tilt,0deg));transform-origin:center;animation:pidgey-flight-cycle .5s steps(5) infinite;filter:drop-shadow(0 7px 5px #16476b88);transition:top .065s linear,transform .1s ease}.lab-flight__pidgey.is-flapping{animation-duration:.22s;filter:drop-shadow(0 7px 5px #16476b88) brightness(1.15)}.lab-flight__reward-progress{position:absolute;z-index:8;left:14%;right:14%;bottom:13px;height:7px;border-radius:8px;background:#062c48bb;box-shadow:0 0 0 1px #fff5;display:flex;justify-content:space-between}.lab-flight__reward-progress i{position:absolute;inset:0 auto 0 0;width:0;border-radius:8px;background:linear-gradient(90deg,#9feaff,#ffe15d);box-shadow:0 0 13px #8de8ff;transition:width .2s}.lab-flight__reward-progress span{position:relative;top:-7px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#073a59;border:2px solid #fff;color:#fff;font-weight:900}.lab-flight__rewards{width:min(510px,95%);display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:12px}.lab-flight__rewards>b{grid-column:1/-1;color:#65d9ff;font-size:12px;letter-spacing:.12em}.lab-flight__rewards span{padding:7px 3px;border:1px solid #ffffff26;border-radius:9px;background:#071a2bc9;color:#ddecf7;font-size:11px;font-weight:800}.lab-flight__gate.is-flock{display:grid;place-items:center;width:108px;height:70px;color:#182435;font-size:21px;letter-spacing:-2px;text-shadow:24px -18px #223349,-20px 17px #0b1624;animation:lab-flock .45s ease-in-out infinite alternate}.lab-flight__gate.is-flock>i{position:static;border:0;box-shadow:none;animation:none}.lab-flight__hint{bottom:40px}@keyframes pidgey-flight-cycle{from{background-position:0 -512px}to{background-position:-768px -512px}}@keyframes lab-flock{to{transform:translate(-50%,-50%) translateY(8px)}} @media(max-width:720px){.lab-flight__pidgey{left:24%;transform:translate(-50%,-50%) scale(.92) rotate(var(--tilt,0deg))}.lab-flight__hud span{padding:5px 7px;font-size:9px}.lab-flight__hud b{font-size:13px}.lab-flight__reward-progress{left:10%;right:10%}.lab-flight__rewards span{font-size:9px}} @media(prefers-reduced-motion:reduce){.lab-flight__pidgey{animation:none!important}} .lab-flight__pidgey{animation-timing-function:steps(6)} .lab-flight__gate.is-storm,.lab-flight__gate.is-flock,.lab-flight__gate.is-gust,.lab-flight__gate.is-balloon{display:block;width:clamp(88px,15%,132px);height:clamp(88px,15vw,132px);border-radius:0;background:none;box-shadow:none;color:transparent;animation:none}.lab-flight__gate.is-storm>i,.lab-flight__gate.is-flock>i,.lab-flight__gate.is-gust>i,.lab-flight__gate.is-balloon>i{position:absolute;inset:-18%;border:0;border-radius:0;box-shadow:none;background-image:url('/assets/v2.9.68/minigames/pidgey-flight/flight-hazards-atlas-v1.png');background-repeat:no-repeat;background-size:200% 200%;filter:drop-shadow(0 7px 8px #16304e88);animation:lab-hazard-float .75s ease-in-out infinite alternate}.lab-flight__gate.is-storm>i{background-position:0 0}.lab-flight__gate.is-flock>i{background-position:100% 0}.lab-flight__gate.is-gust>i{background-position:0 100%;animation:lab-gust-spin .9s linear infinite}.lab-flight__gate.is-balloon>i{background-position:100% 100%;animation-duration:1.2s}.lab-flight__gate.is-gold{width:clamp(62px,10%,88px)}.lab-flight__gate.is-gold>i{border-color:#fff4a3;box-shadow:0 0 12px #fff,0 0 30px #ffdc3e,0 0 60px #ff8500,inset 0 0 20px #fff;animation-duration:.7s}.lab-flight__gate.is-triggered>i{opacity:.3;transition:opacity .2s}@keyframes lab-hazard-float{to{transform:translateY(7px) rotate(2deg)}}@keyframes lab-gust-spin{to{transform:rotate(360deg)}} .lab-flight__hud span{color:#fff} .lab-flight__sky{background-image:url('/assets/v2.9.69/minigames/pidgey-flight/clear-route-background-v2.png');background-position:center;background-size:cover}.lab-flight__pidgey{transform:translate(-50%,-50%) scale(.98) rotate(var(--tilt,0deg))}.lab-flight__gate>i{inset:-20%;border:0;background-image:url('/assets/v2.9.69/minigames/pidgey-flight/rings-balloons-atlas-v2.png');background-size:200% 200%;background-position:0 0;background-repeat:no-repeat;box-shadow:none}.lab-flight__gate.is-gold>i,.lab-flight__gate.is-gold-ring>i{background-position:100% 0}.lab-flight__gate.is-balloon>i{background-image:url('/assets/v2.9.69/minigames/pidgey-flight/rings-balloons-atlas-v2.png');background-size:200% 200%;background-position:0 100%}.lab-flight__gate.is-spearow,.lab-flight__gate.is-fearow{display:block;width:128px;height:128px;background:none;box-shadow:none}.lab-flight__gate.is-spearow>i,.lab-flight__gate.is-fearow>i{position:absolute;inset:0;border:0;background-size:768px 1024px;background-repeat:no-repeat;filter:drop-shadow(0 6px 5px #17304c88)}.lab-flight__gate.is-spearow>i{background-image:url('/assets/v2.9.69/minigames/pidgey-flight/spearow-sheet-v1.png');background-position:0 -128px;animation:spearow-flight .42s steps(6) infinite}.lab-flight__gate.is-fearow>i{background-image:url('/assets/v2.9.69/minigames/pidgey-flight/fearow-sheet-v1.png');background-position:0 -128px;animation:fearow-flight .34s steps(6) infinite}.lab-flight__lightning{position:absolute;z-index:9;left:0;right:0;height:18%;transform:translateY(-50%);pointer-events:none}.lab-flight__lightning i{position:absolute;inset:40% 0;border-top:3px dashed #fff36d;background:#fff32a18;box-shadow:0 0 16px #ffef38}.lab-flight__lightning b{position:absolute;right:8%;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffcf25;color:#321b00;font-size:24px;animation:lightning-warning .28s steps(2) infinite}.lab-flight__lightning.is-striking{height:24%;background:#ffffff88;box-shadow:0 0 55px #fff,0 0 95px #8de8ff;animation:lightning-strike .12s steps(2) 3}.lab-flight__lightning.is-striking i{inset:0 45%;border:0;background:linear-gradient(100deg,transparent 40%,#fff 42% 55%,#8ef 57% 65%,transparent 67%);}.lab-flight__lightning.is-striking b{display:none}@keyframes spearow-flight{to{background-position:-768px -128px}}@keyframes fearow-flight{to{background-position:-768px -128px}}@keyframes lightning-warning{50%{opacity:.35}}@keyframes lightning-strike{50%{filter:brightness(2)}} @media(max-width:720px){.lab-flight__pidgey{transform:translate(-50%,-50%) scale(.76) rotate(var(--tilt,0deg))}.lab-flight__gate.is-spearow,.lab-flight__gate.is-fearow{transform:translate(-50%,-50%) scale(.82)}} .lab-flight__gate{width:68px;height:112px;aspect-ratio:auto}.lab-flight__gate>i{inset:-12%;background:url('/assets/v2.9.70/minigames/pidgey-flight/side-checkpoint-ring-v3.png') center/contain no-repeat;filter:drop-shadow(0 0 8px #59ddff)}.lab-flight__gate.is-gold>i,.lab-flight__gate.is-gold-ring>i{background-image:url('/assets/v2.9.70/minigames/pidgey-flight/side-checkpoint-ring-v3.png');filter:hue-rotate(35deg) saturate(1.5) brightness(1.22) drop-shadow(0 0 12px #fff36a)}.lab-flight__gate.is-balloon{width:94px;height:128px}.lab-flight__gate.is-balloon>i{inset:-8%;background:url('/assets/v2.9.70/minigames/pidgey-flight/weather-balloon-v3.png') center/contain no-repeat;animation:lab-balloon-float .9s ease-in-out infinite alternate}.lab-flight__boundary{position:absolute;z-index:2;left:-3%;right:-3%;height:31%;pointer-events:none;background-image:url('/assets/v2.9.70/minigames/pidgey-flight/cloud-mountain-boundaries-v1.png');background-size:100% 200%;filter:drop-shadow(0 4px 7px #25466d44);transition:height 8s linear}.lab-flight__boundary.is-top{top:-7%;background-position:center top}.lab-flight__boundary.is-bottom{bottom:-7%;background-position:center bottom}.lab-flight__lightning i{left:22%;right:0;top:50%;bottom:auto;height:3px;border:0;background:repeating-linear-gradient(90deg,#fff36d 0 10px,transparent 10px 18px);box-shadow:0 0 13px #ffef38}.lab-flight__lightning b{right:3%}.lab-flight__lightning.is-striking{height:18%;background:#ffffff66}.lab-flight__lightning.is-striking i{left:22%;right:0;top:42%;bottom:auto;height:22px;background:linear-gradient(175deg,transparent 0 35%,#fff 37% 48%,#64dfff 50% 58%,#fff 60% 68%,transparent 70%);clip-path:polygon(0 35%,18% 20%,34% 55%,51% 28%,68% 62%,84% 31%,100% 44%,100% 68%,84% 54%,68% 82%,51% 50%,34% 78%,18% 43%,0 60%);filter:drop-shadow(0 0 8px #fff)}@keyframes lab-balloon-float{to{transform:translateY(7px) rotate(2deg)}} .lab-flight[data-phase="2"] .lab-flight__boundary{height:34%}.lab-flight[data-phase="3"] .lab-flight__boundary{height:38%} .lab-flight__gate>i{background-image:url('/assets/v2.9.71/minigames/pidgey-flight/checkpoint-ring-v4.png')}.lab-flight__gate.is-boost-ring{width:76px;height:122px}.lab-flight__gate.is-boost-ring>i{inset:-18%;background:url('/assets/v2.9.71/minigames/pidgey-flight/boost-ring-v1.png') center/contain no-repeat;filter:drop-shadow(0 0 14px #ff41e6);animation:boost-ring-pulse .45s ease-in-out infinite alternate}.lab-flight__gate.is-mountain,.lab-flight__gate.is-cloud{top:auto!important;width:190px;transform:none;overflow:visible}.lab-flight__gate.is-mountain{bottom:0;height:var(--terrain-size)}.lab-flight__gate.is-cloud{top:0!important;height:var(--terrain-size)}.lab-flight__gate.is-mountain>i,.lab-flight__gate.is-cloud>i{position:absolute;inset:-12px -25px;border:0;background-image:url('/assets/v2.9.70/minigames/pidgey-flight/cloud-mountain-boundaries-v1.png');background-size:100% 200%;background-repeat:no-repeat;filter:drop-shadow(0 5px 7px #15324c55);animation:none}.lab-flight__boost-label{position:absolute;z-index:10;left:50%;top:20%;transform:translate(-50%,-50%) scale(.7);padding:8px 15px;border-radius:18px;background:#e51fffcc;color:#fff;font-size:15px;font-weight:950;letter-spacing:.12em;opacity:0;pointer-events:none}.lab-flight.is-boosting .lab-flight__boost-label{animation:boost-label 2.3s ease-out}.lab-flight.is-boosting .lab-flight__speed{opacity:.8;animation-duration:.22s}.lab-flight.is-boosting .lab-flight__pidgey:after{content:'';position:absolute;right:78%;top:48%;width:150px;height:16px;background:linear-gradient(90deg,transparent,#5ff,#f4f);filter:blur(4px);z-index:-1}@keyframes boost-ring-pulse{to{transform:scale(1.08);filter:drop-shadow(0 0 22px #4ff)}}@keyframes boost-label{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}12%,65%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-80%) scale(1.05)}} .lab-flight__finish{position:absolute;z-index:4;left:112%;top:8%;bottom:7%;width:88px;transform:translateX(-50%);pointer-events:none}.lab-flight__finish i{position:absolute;inset:0;border:9px solid #ffd968;border-bottom-color:#65d9ff;border-radius:48% 48% 8px 8px;box-shadow:0 0 12px #fff,0 0 30px #59ceff,inset 0 0 18px #ffe56a;animation:finish-gate 1s ease-in-out infinite alternate}.lab-flight__finish b{position:absolute;left:50%;top:5%;transform:translateX(-50%);padding:5px 9px;border-radius:10px;background:#073a59;color:#fff;font-size:10px;letter-spacing:.12em}.lab-flight__popup{position:absolute;z-index:14;left:34%;transform:translate(-50%,-50%);padding:6px 11px;border-radius:15px;background:#073a59e8;color:#fff;font-weight:950;font-size:13px;pointer-events:none;animation:flight-popup .85s ease-out forwards}.lab-flight__popup.is-perfect{color:#8dffff;box-shadow:0 0 18px #43edff}.lab-flight__popup.is-near{color:#ffe66c}.lab-flight__popup.is-finish{left:50%;font-size:18px;color:#fff18a}.lab-flight__burst{position:absolute;z-index:13;left:28%;top:50%;width:1px;height:1px;pointer-events:none}.lab-flight__burst i{position:absolute;width:7px;height:7px;border-radius:50%;background:#7ef4ff;box-shadow:0 0 7px #fff;transform:rotate(calc(var(--i)*45deg)) translateX(8px);animation:flight-particle .7s ease-out forwards}.lab-flight__burst.is-feather i{width:12px;height:5px;border-radius:80% 20%;background:#e9c38b;box-shadow:none}.lab-flight__summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;width:min(430px,100%);margin:12px 0}.lab-flight__summary span{display:grid;padding:7px;border-radius:10px;background:#ffffff0c;color:#aebed0;font-size:10px}.lab-flight__summary b{color:#fff;font-size:17px}@keyframes finish-gate{to{filter:brightness(1.25);transform:scaleX(.9)}}@keyframes flight-popup{70%{opacity:1}100%{opacity:0;transform:translate(-50%,-130%) scale(1.12)}}@keyframes flight-particle{to{opacity:0;transform:rotate(calc(var(--i)*45deg)) translateX(70px) rotate(180deg)}} .lab-flight__pidgey{transform:translate(-50%,-50%) scale(.82) rotate(var(--tilt,0deg))}.lab-flight__gate.is-clear{display:none}.lab-flight__gate.is-spearow,.lab-flight__gate.is-fearow{transform:translate(-50%,calc(-50% + var(--bird-drift,0%))) scale(var(--approach-scale,.62));transform-origin:center;will-change:left,transform}.lab-flight__gate.is-spearow>i,.lab-flight__gate.is-fearow>i{animation-duration:.3s;filter:drop-shadow(-10px 7px 7px #17304c77)}.lab-flight__gate.is-fearow>i{animation-duration:.24s}.lab-flight__gate.is-spearow[data-lane="high"]>i,.lab-flight__gate.is-fearow[data-lane="high"]>i{filter:drop-shadow(-10px 7px 7px #17304c77) brightness(1.08)}.lab-flight__gate.is-spearow[data-lane="low"]>i,.lab-flight__gate.is-fearow[data-lane="low"]>i{filter:drop-shadow(-10px 7px 7px #17304c77) saturate(1.12)} @media(max-width:720px){.lab-flight__pidgey{transform:translate(-50%,-50%) scale(.64) rotate(var(--tilt,0deg))}.lab-flight__gate.is-spearow,.lab-flight__gate.is-fearow{transform:translate(-50%,calc(-50% + var(--bird-drift,0%))) scale(calc(var(--approach-scale,.62)*.84))}} .lab-flight__gate.is-mountain>i{inset:-18px -34px -8px;background-position:center bottom;background-size:100% 200%}.lab-flight__gate.is-cloud>i{inset:-22px -42px;background-position:center top;background-size:100% 200%}.lab-flight__gate.is-feather{width:58px;height:58px}.lab-flight__gate.is-feather>i{inset:8% 28%;border-radius:90% 12% 85% 16%;background:linear-gradient(145deg,#fffbe7 5%,#ffd765 36%,#ed9f27 62%,#fff5c5 64% 72%,#c77418 74%);box-shadow:inset -5px -3px 8px #9e571d66,0 0 12px #fff1a0;filter:none;transform:rotate(-32deg);animation:flight-feather-spin 1.15s ease-in-out infinite}.lab-flight__gate.is-feather>i:after{content:'';position:absolute;left:48%;top:4%;bottom:-17%;width:3px;border-radius:2px;background:#a8631e;transform:rotate(4deg)}.lab-flight__popup.is-feather{color:#fff2a1;box-shadow:0 0 18px #ffda56}.lab-flight__rewards span{position:relative;display:block}.lab-flight__rewards span strong{color:#fff;}.lab-flight__rewards span i{display:block;margin-top:3px;color:#72e7ff;font-size:8px;font-style:normal;letter-spacing:.08em}.lab-flight__rewards span.is-claimed{opacity:.55;filter:saturate(.35)}.lab-flight__rewards span.is-claimed i{color:#8ee6a6}@keyframes flight-feather-spin{0%{transform:rotate(-24deg) rotateY(0) scale(.88)}50%{transform:rotate(12deg) rotateY(180deg) translateY(-5px) scale(1.05)}100%{transform:rotate(-24deg) rotateY(360deg) scale(.88)}} .lab-flight__gate.is-mountain,.lab-flight__gate.is-cloud{width:clamp(118px,16vw,148px)}.lab-flight__gate.is-mountain>i{inset:-10px -18px -5px}.lab-flight__gate.is-cloud>i{inset:-12px -22px}.lab-flight__gate.is-boost-ring{width:70px;height:112px}@media(max-width:720px){.lab-flight__gate.is-mountain,.lab-flight__gate.is-cloud{width:112px}.lab-flight__gate.is-feather{width:48px;height:48px}.lab-flight__gate.is-boost-ring{width:62px;height:100px}} .lab-games[data-game-mode="flight"] .lab-games__shade{background:rgba(30,78,103,.48)}.lab-games[data-game-mode="flight"] .lab-games__shell{border-color:#a8ebff;background:linear-gradient(155deg,#f5fdff,#d7f3ff 58%,#fff3c9);box-shadow:0 28px 90px #174d6d66;color:#103d57}.lab-games[data-game-mode="flight"] .lab-games__header{border-color:#69b8d655;background:linear-gradient(90deg,#dff8ff,#fff8dd)}.lab-games[data-game-mode="flight"] .lab-games__header small{color:#2282aa}.lab-games[data-game-mode="flight"] .lab-games__header button{background:#167aa91a;color:#15506d}.lab-games[data-game-mode="flight"] .lab-games__emblem{background:#fff;border:1px solid #8edcf1;box-shadow:0 6px 18px #297c9f22}.lab-games[data-game-mode="flight"] .lab-games__brief{background:#ffffffb8;box-shadow:inset 0 0 0 1px #65badb35}.lab-games[data-game-mode="flight"] .lab-games__brief p{color:#346078}.lab-games[data-game-mode="flight"] .lab-games__board{background:#ffffffa8;box-shadow:inset 0 0 0 1px #65badb35}.lab-games[data-game-mode="flight"] .lab-games__board li{background:#e4f5fa;color:#24526b}.lab-games[data-game-mode="flight"] .lab-games__footer{border-color:#6bbbd955;background:#effaff}.lab-games[data-game-mode="flight"] .lab-games__footer small{color:#548197}.lab-games[data-game-mode="flight"] .lab-games__footer button{background:linear-gradient(135deg,#ffdc5e,#ffad42);box-shadow:0 8px 20px #d6773055;color:#523008}.lab-flight-lobby{position:absolute;inset:0;overflow:auto;padding:24px;background:linear-gradient(#8fddff 0 43%,#e6f9ff 68%,#fff3bd);color:#153f58}.lab-flight-lobby:after{content:'';position:absolute;left:-5%;right:-5%;bottom:-24%;height:58%;background:url('/assets/v2.9.70/minigames/pidgey-flight/cloud-mountain-boundaries-v1.png') center bottom/100% 200% no-repeat;opacity:.78}.lab-flight-lobby__clouds{position:absolute;inset:-9% -8% auto;height:50%;background:url('/assets/v2.9.70/minigames/pidgey-flight/cloud-mountain-boundaries-v1.png') center top/100% 200% no-repeat;opacity:.72;animation:flight-lobby-clouds 8s ease-in-out infinite alternate}.lab-flight-lobby__bird{position:absolute;z-index:2;right:4%;top:9%;width:128px;height:128px;background:url('/assets/v2.9.67/minigames/pidgey-flight/pidgey-flight-sheet-v1.png') 0 -512px/768px 1024px;animation:pidgey-flight-cycle .5s steps(6) infinite;filter:drop-shadow(0 9px 8px #235f7a55)}.lab-flight-lobby__copy{position:relative;z-index:3;width:min(520px,76%);padding:16px 18px;border:1px solid #ffffffcc;border-radius:20px;background:#ffffffd9;box-shadow:0 14px 38px #256e8d30;text-align:left}.lab-flight-lobby__copy small{color:#2183aa;font-weight:950;letter-spacing:.1em}.lab-flight-lobby__copy strong{display:block;margin-top:4px;font-size:clamp(28px,5vw,44px);line-height:1;color:#17465f}.lab-flight-lobby__copy p{margin:10px 0;color:#426b7d}.lab-flight-lobby__copy>div{display:flex;gap:7px;flex-wrap:wrap}.lab-flight-lobby__copy span{display:grid;padding:7px 10px;border-radius:12px;background:#e1f7ff;color:#167aa4;font-size:18px;font-weight:950}.lab-flight-lobby__copy span b{color:#527589;font-size:9px;letter-spacing:.05em}.lab-flight-lobby__copy em{display:inline-block;margin-top:9px;padding:6px 10px;border-radius:12px;background:#fff2bd;color:#7a5611;font-style:normal;font-weight:900}.lab-flight-lobby>.lab-flight__rewards{position:relative;z-index:3;width:100%;margin-top:14px}.lab-flight-lobby>.lab-flight__rewards>b{color:#176e94}.lab-flight-lobby>.lab-flight__rewards span{background:#ffffffdc;color:#42677a;box-shadow:0 5px 14px #276d8830}.lab-flight__gate.is-feather>i{inset:-5%;border-radius:0;background:url('/assets/v2.9.76/minigames/pidgey-flight/pretty-feather-v1.png') center/contain no-repeat;box-shadow:none;image-rendering:auto}.lab-flight__gate.is-feather:before,.lab-flight__gate.is-feather:after{content:'✦';position:absolute;z-index:2;color:#fff5a3;text-shadow:0 0 7px #3ee9ff;font-size:13px;animation:flight-feather-spark .7s ease-in-out infinite alternate}.lab-flight__gate.is-feather:before{left:2%;top:5%}.lab-flight__gate.is-feather:after{right:0;bottom:5%;animation-delay:-.35s}@keyframes flight-lobby-clouds{to{transform:translateX(4%) translateY(2%)}}@keyframes flight-feather-spark{to{opacity:.2;transform:scale(.55) rotate(45deg)}}@media(max-width:720px){.lab-flight-lobby{padding:13px}.lab-flight-lobby__copy{width:100%;padding:13px}.lab-flight-lobby__bird{right:-22px;top:28%;transform:scale(.76)}.lab-flight-lobby__copy p{font-size:12px}.lab-flight-lobby>.lab-flight__rewards{grid-template-columns:repeat(5,minmax(66px,1fr));overflow-x:auto}.lab-flight-lobby>.lab-flight__rewards span{min-width:66px}} .lab-flight__gate.is-feather>i:after{display:none} .lab-games[data-game-mode="flight"] .lab-games__shell{width:min(1080px,calc(100vw - 32px));height:min(760px,calc(100dvh - 32px));grid-template-rows:76px minmax(0,1fr) 82px}.lab-games[data-game-mode="flight"] .lab-games__header{padding:12px 20px}.lab-games[data-game-mode="flight"] .lab-games__header h2{font-family:Georgia,'Times New Roman',serif;font-size:28px;letter-spacing:-.02em}.lab-games[data-game-mode="flight"] .lab-games__emblem{width:52px;height:52px;color:#2b9bc7}.lab-games[data-game-mode="flight"] .lab-games__emblem svg{width:36px;height:36px}.lab-games[data-game-mode="flight"] .lab-games__body{grid-template-columns:minmax(0,1fr) 300px;gap:12px;padding:12px}.lab-games[data-game-mode="flight"] .lab-games__brief[hidden]{display:none}.lab-games[data-game-mode="flight"] .lab-games__arena{border:1px solid #9ddcf0;background:#87d7f5;box-shadow:0 10px 28px #286c8830}.lab-games[data-game-mode="flight"] .lab-games__board{overflow:hidden;padding:14px;border:1px solid #acdce9}.lab-games[data-game-mode="flight"] .lab-games__board>header{display:grid;gap:7px;margin-bottom:12px;padding-bottom:11px;border-bottom:1px solid #90cfdf66}.lab-games[data-game-mode="flight"] .lab-games__board>header>span{display:flex;align-items:center;gap:8px;color:#207fa5}.lab-games[data-game-mode="flight"] .lab-games__board>header svg{width:25px;height:25px}.lab-games[data-game-mode="flight"] .lab-games__board>header b{font-size:13px;letter-spacing:.09em}.lab-games[data-game-mode="flight"] .lab-games__board>header em{display:flex;justify-content:space-between;color:#648698;font-size:11px;font-style:normal}.lab-games[data-game-mode="flight"] .lab-games__board>header strong{color:#163f56;font-size:14px}.lab-games[data-game-mode="flight"] .lab-games__board li{min-height:42px;grid-template-columns:38px minmax(0,1fr) auto;padding:5px 9px;background:#eefaff}.lab-games[data-game-mode="flight"] .lab-games__board li>b{color:#5d8091}.lab-games[data-game-mode="flight"] .lab-games__board li>b svg{width:31px;height:36px}.lab-games[data-game-mode="flight"] .lab-games__board li>span{font-weight:750}.lab-games[data-game-mode="flight"] .lab-games__board li>strong{color:#184c65}.lab-games[data-game-mode="flight"] .lab-games__board li.rank-1{border-color:#f0c84f;background:linear-gradient(90deg,#fff4c6,#fffdf1);box-shadow:0 5px 14px #c7952430}.lab-games[data-game-mode="flight"] .lab-games__board li.rank-2{border-color:#b7cad6;background:linear-gradient(90deg,#eaf4f8,#fff)}.lab-games[data-game-mode="flight"] .lab-games__board li.rank-3{border-color:#d8a279;background:linear-gradient(90deg,#f8e8dd,#fff)}.lab-games[data-game-mode="flight"] .lab-games__footer{padding:12px 20px}.lab-games[data-game-mode="flight"] .lab-games__footer button{gap:10px;min-width:250px;height:54px;border-radius:18px;font-size:15px;transition:transform .18s ease,box-shadow .18s ease}.lab-games[data-game-mode="flight"] .lab-games__footer button:hover{transform:translateY(-2px);box-shadow:0 12px 28px #d6773066}.lab-games[data-game-mode="flight"] .lab-games__footer button svg{width:24px;height:24px}.lab-flight-lobby{overflow:hidden;padding:20px}.lab-flight-lobby__sun{position:absolute;right:9%;top:8%;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#fffbd5 0 23%,#ffed8499 24% 42%,transparent 70%);animation:flight-lobby-sun 3s ease-in-out infinite alternate}.lab-flight-lobby__copy{width:min(480px,69%);padding:18px 20px}.lab-flight-lobby__copy strong{font-size:clamp(34px,4.5vw,52px);text-shadow:0 2px #fff}.lab-flight-lobby__copy>div span{grid-template-columns:28px auto;align-items:center;column-gap:6px;min-width:112px;font-size:0}.lab-flight-lobby__copy>div svg{grid-row:1/3;width:26px;height:26px}.lab-flight-lobby__copy>div span b{font-size:10px}.lab-flight-lobby__copy em b{font-size:16px}.lab-flight-lobby>.lab-flight__rewards{position:absolute;left:20px;right:20px;bottom:20px;width:auto;margin:0;padding:12px;border:1px solid #ffffffb8;border-radius:18px;background:#ffffffa8;backdrop-filter:blur(4px);box-shadow:0 10px 25px #276d8825}.lab-flight__rewards>b{display:flex;justify-content:space-between;align-items:center}.lab-flight__rewards>b em{color:#6f8a97;font-size:9px;font-style:normal}.lab-flight__rewards span{min-width:0!important;display:grid!important;grid-template-columns:38px 1fr;grid-template-rows:auto auto auto;column-gap:7px;padding:7px!important;text-align:left}.lab-flight__rewards span img{grid-row:1/4;width:38px;height:38px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 4px 4px #17455f30)}.lab-flight__rewards span strong{font-size:12px}.lab-flight__rewards span u{overflow:hidden;color:#42677a;font-size:9px;font-weight:800;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.lab-flight__rewards span i{font-size:7px}.lab-flight-lobby__bird{right:6%;top:18%;transform:scale(1.12);animation:pidgey-flight-cycle .5s steps(6) infinite,flight-lobby-bird 2.6s ease-in-out infinite alternate}@keyframes flight-lobby-sun{to{transform:scale(1.08);opacity:.82}}@keyframes flight-lobby-bird{to{margin-top:12px}}@media(max-width:720px){.lab-games[data-game-mode="flight"] .lab-games__shell{width:100%;height:100dvh;grid-template-rows:65px minmax(0,1fr) 74px}.lab-games[data-game-mode="flight"] .lab-games__body{grid-template-columns:1fr;grid-template-rows:minmax(300px,1fr) 190px;padding:8px;gap:8px}.lab-games[data-game-mode="flight"] .lab-games__board{padding:9px;overflow:auto}.lab-games[data-game-mode="flight"] .lab-games__board li{min-height:36px}.lab-flight-lobby{padding:10px}.lab-flight-lobby__copy{width:100%;padding:12px}.lab-flight-lobby__copy strong{font-size:31px}.lab-flight-lobby__copy p{max-width:76%;margin:6px 0}.lab-flight-lobby__copy>div{gap:4px}.lab-flight-lobby__copy>div span{min-width:92px;padding:5px 7px}.lab-flight-lobby__bird{right:-27px;top:22%;transform:scale(.68)}.lab-flight-lobby>.lab-flight__rewards{left:8px;right:8px;bottom:8px;padding:7px;grid-template-columns:repeat(5,1fr);overflow:visible}.lab-flight__rewards>b{font-size:9px}.lab-flight__rewards>b em{display:none}.lab-flight__rewards span{display:grid!important;grid-template-columns:1fr;grid-template-rows:30px auto auto;padding:4px!important;text-align:center}.lab-flight__rewards span img{grid-row:auto;width:28px;height:28px;margin:auto}.lab-flight__rewards span u{display:none}.lab-games[data-game-mode="flight"] .lab-games__footer button{min-width:190px;height:50px}} /* v2.9.78: inventory-art collectible with a genuine transparent PNG. */ .lab-games[data-game-mode="flight"] .lab-flight__gate.is-feather>i{background-image:url('/assets/v2.9.78/minigames/pidgey-flight/feather.png')} /* pk-style-source:66 */ /* /lab-flight-lobby-v3.css */ /* Pidgey flight: intact clouds, risk trails, route checkpoints and portrait rings. */ .lab-games[data-game-mode="flight"]{--ink:#153f51;--muted:#496c7c;--line:#c9e3ea;padding:24px;background:#123c4c55;backdrop-filter:blur(5px);font-family:Inter,"Segoe UI",Arial,sans-serif} .lab-games[data-game-mode="flight"],.lab-games[data-game-mode="flight"] *{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none} .lab-games[data-game-mode="flight"] *{box-sizing:border-box;font-family:inherit!important} .lab-games[data-game-mode="flight"] img{-webkit-user-drag:none} .lab-games[data-game-mode="flight"] button{cursor:pointer;touch-action:manipulation} .lab-games[data-game-mode="flight"] button:focus-visible{outline:3px solid #f8ca54;outline-offset:2px} .lab-games[data-game-mode="flight"] .lab-games__shade{background:#123c4c55} .lab-games[data-game-mode="flight"] .lab-games__shell{width:min(1320px,100%);height:min(880px,calc(100dvh - 48px));display:grid;grid-template-rows:76px minmax(0,1fr) 80px;border:1px solid #daeff5;border-radius:24px;background:#edf7fa;color:var(--ink);box-shadow:0 24px 90px #102c4c66;overflow:hidden} .lab-games[data-game-mode="flight"] .lab-games__header{display:grid;grid-template-columns:46px minmax(0,1fr) 44px;align-items:center;gap:12px;padding:12px 18px;background:#f7fcfe;border-bottom:1px solid var(--line)} .lab-games[data-game-mode="flight"] .lab-games__emblem{width:46px;height:46px;background:#e6f4f9;border-radius:14px} .lab-games[data-game-mode="flight"] .lab-games__emblem img{width:30px;height:30px;object-fit:contain} .lab-games[data-game-mode="flight"] .lab-games__header small{display:block;color:#32798f;font-size:10px;letter-spacing:.08em;line-height:1.4} .lab-games[data-game-mode="flight"] .lab-games__header h2{margin:2px 0 0;font-size:24px;font-weight:800;line-height:1.15;color:var(--ink)} .lab-games[data-game-mode="flight"] .lab-games__header button{width:44px;height:44px;margin:0;background:#e3f0f5;color:#275969;border-radius:14px;font-size:28px} .lab-games[data-game-mode="flight"] .lab-games__body{display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:minmax(0,1fr);gap:14px;min-height:0;padding:14px;overflow:hidden} .lab-games[data-game-mode="flight"] .lab-games__brief{display:none!important} .lab-games[data-game-mode="flight"] .lab-games__arena{height:auto;min-height:0;min-width:0;background:#d7f0f7;border:0;border-radius:18px;overflow:hidden;box-shadow:none} .lab-games[data-game-mode="flight"] .lab-games__board{min-height:0;max-height:none;padding:16px;overflow-y:auto;overflow-x:hidden;border:1px solid var(--line);border-radius:18px;background:#f8fcfd;color:var(--ink)} .lab-games[data-game-mode="flight"] .lab-games__board header{display:grid;gap:12px;margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid var(--line)} .lab-games[data-game-mode="flight"] .lab-games__board header>span{display:flex;align-items:center;gap:8px} .lab-games[data-game-mode="flight"] .lab-games__board header img{width:32px;height:32px;object-fit:contain} .lab-games[data-game-mode="flight"] .lab-games__board header b{font-size:12px;letter-spacing:.07em;color:#267890} .lab-games[data-game-mode="flight"] .lab-games__board header em{display:none} .lab-games[data-game-mode="flight"] .lab-games__board header strong{color:var(--ink);font-size:16px} .lab-games[data-game-mode="flight"] .lab-games__board ol{display:grid;gap:6px;padding:0;list-style:none} .lab-games[data-game-mode="flight"] .lab-games__board li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;min-height:48px;align-items:center;padding:6px;border-radius:10px;background:#eef6f9;font-size:12px;border:1px solid transparent;box-shadow:none} .lab-games[data-game-mode="flight"] .lab-games__board li.rank-1{background:#fff8e5;border-color:#eac86f} .lab-games[data-game-mode="flight"] .lab-games__board li.rank-2{background:#edf3f8;border-color:#becfdd} .lab-games[data-game-mode="flight"] .lab-games__board li.rank-3{background:#faf0e9;border-color:#ddbb9c} .lab-games[data-game-mode="flight"] .lab-games__board li>b{display:grid;place-items:center;color:#587986} .lab-games[data-game-mode="flight"] .lab-games__board li img{width:32px;height:32px;object-fit:contain} .lab-games[data-game-mode="flight"] .lab-games__board li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lab-games[data-game-mode="flight"] .lab-games__board li>strong{font-variant-numeric:tabular-nums;color:var(--ink)} .lab-games[data-game-mode="flight"] .lab-games__footer{display:flex;gap:28px;align-items:center;padding:12px 18px;border-top:1px solid var(--line);background:#f7fcfe} .lab-games[data-game-mode="flight"] .lab-games__footer>span{min-width:56px;display:grid;gap:3px} .lab-games[data-game-mode="flight"] .lab-games__footer small{font-size:10px;color:var(--muted)} .lab-games[data-game-mode="flight"] .lab-games__footer b{font-size:19px;color:var(--ink)} .lab-games[data-game-mode="flight"] .lab-games__footer button{display:flex;align-items:center;justify-content:center;min-width:240px;max-width:65%;height:52px;padding:0 22px;margin-left:auto;border:0;border-radius:15px;background:#118bb3;color:#fff;font-size:13px;font-weight:800;letter-spacing:.02em;box-shadow:0 6px 16px #1e86a62b} .lab-games[data-game-mode="flight"] .lab-games__footer button:hover{background:#087397;transform:none} .lab-games[data-game-mode="flight"] .lab-flight-lobby{position:relative;inset:auto;display:flex;flex-direction:column;justify-content:space-between;gap:18px;height:100%;min-height:520px;padding:24px;overflow:hidden;isolation:isolate;background:#80c9e3;color:var(--ink)} .lab-flight-lobby:before,.lab-flight-lobby:after{display:none!important} .lab-flight-lobby__sky{position:absolute;z-index:-2;inset:0;pointer-events:none} .lab-flight-lobby__sky--far{background:url('/assets/v2.9.85/minigames/pidgey-flight/forest-panorama.jpg') center/cover;animation:flight-lobby-far 20s ease-in-out infinite alternate;will-change:transform} .lab-flight-lobby__sky--near{background:linear-gradient(90deg,#e7f8ff66,transparent 75%)} .lab-flight-lobby__land{position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,#1238426b,transparent 50%);pointer-events:none} .lab-games[data-game-mode="flight"] .lab-flight-lobby__bird{position:absolute;z-index:1;right:4%;top:30%;width:128px;height:128px;background:url('/assets/v2.9.67/minigames/pidgey-flight/pidgey-flight-sheet-v1.png') 0 -512px/768px 1024px;transform:none;animation:pidgey-flight-cycle .5s steps(6) infinite,flight-lobby-bird 2.5s ease-in-out infinite;filter:drop-shadow(0 8px 8px #1b4c6055)} .lab-flight-intro{position:relative;z-index:2;display:grid;gap:18px;width:75%;padding:22px;border-radius:20px;background:#f6fcffe8;box-shadow:0 10px 30px #15405926;backdrop-filter:blur(10px)} .lab-flight-intro header small{font-size:10px;color:#21758f;font-weight:800;text-transform:uppercase;letter-spacing:.09em} .lab-flight-intro h3{margin:8px 0 10px;color:var(--ink);font-size:clamp(28px,3vw,42px);font-weight:850;letter-spacing:-.045em;line-height:1.05} .lab-flight-intro header p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)} .lab-flight-intro header em{display:inline-block;margin-top:12px;font-style:normal;font-size:12px;color:#356878}.lab-flight-intro header em b{margin-left:5px;color:#17786a} .lab-flight-intro__rules{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding-top:14px;border-top:1px solid #cde4eb} .lab-flight-intro__rules>b{grid-column:1/-1;font-size:11px;text-transform:uppercase;color:#356878;letter-spacing:.05em} .lab-flight-intro__rules p{margin:0;font-size:12px;color:var(--ink)}.lab-flight-intro__rules p span{margin-right:4px;font-size:10px;color:#2987a6;font-weight:800} .lab-flight-intro__controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;border-top:1px solid #cde4eb;padding-top:14px}.lab-flight-intro__controls>b{display:none} .lab-flight-intro__controls>span{display:flex;align-items:center;gap:12px}.lab-flight-intro__controls img{width:40px;height:40px;object-fit:contain;flex-shrink:0} .lab-flight-credits{justify-self:start;color:#426c7b;font-size:10px;text-underline-offset:3px} .lab-flight-intro__controls i{font-style:normal;font-size:12px;line-height:1.45;color:var(--muted)}.lab-flight-intro__controls strong{display:block;margin-bottom:3px;color:var(--ink);font-size:12px} .lab-games[data-game-mode="flight"] .lab-flight__rewards{position:relative;inset:auto;z-index:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;width:100%;padding:14px;margin:0;border:1px solid #ffffffc2;border-radius:18px;background:#f6fcfff0;overflow:visible;box-shadow:0 8px 24px #123e501f} .lab-games[data-game-mode="flight"] .lab-flight__rewards>b{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;color:var(--ink);font-size:12px;letter-spacing:0} .lab-games[data-game-mode="flight"] .lab-flight__rewards>b span{display:inline!important;padding:0!important;background:none;border:0;font:inherit;box-shadow:none} .lab-games[data-game-mode="flight"] .lab-flight__rewards>b em{display:block;font-style:normal;font-size:10px;color:var(--muted)} .lab-flight__reward-track{grid-column:1/-1;height:4px;margin-bottom:4px;overflow:hidden;border-radius:4px;background:#d1e8ed}.lab-flight__reward-track>i{display:block;height:100%;background:#31a59a;transition:width .3s} .lab-games[data-game-mode="flight"] .lab-flight__rewards>span{display:grid!important;grid-template-columns:1fr;grid-template-rows:36px auto auto auto;justify-items:center;gap:3px;min-width:0;padding:4px!important;text-align:center;border:0;border-radius:0;background:none;box-shadow:none;opacity:1;color:var(--ink)} .lab-games[data-game-mode="flight"] .lab-flight__rewards>span img{grid-row:auto;width:34px;height:34px;margin:0;object-fit:contain;image-rendering:auto} .lab-games[data-game-mode="flight"] .lab-flight__rewards>span strong{display:block;color:var(--ink);font-size:12px} .lab-games[data-game-mode="flight"] .lab-flight__rewards>span u{display:block;font-size:10px;font-weight:600;text-decoration:none;white-space:normal;overflow:visible;color:#496c7c} .lab-games[data-game-mode="flight"] .lab-flight__rewards>span i{display:block;font-style:normal;font-size:9px;color:#496c7c} .lab-games[data-game-mode="flight"] .lab-flight__rewards>.is-claimed i{color:#197366;font-weight:800} .lab-flight-story{position:relative;z-index:2;display:flex;align-items:center;gap:16px;padding:14px 18px;border:1px solid #ffffffb8;border-radius:18px;background:#f3fffaef} .lab-flight-story img{width:64px;height:64px;object-fit:contain}.lab-flight-story span{display:grid;gap:5px}.lab-flight-story small{font-size:10px;color:#278471;letter-spacing:.05em}.lab-flight-story b{font-size:17px;color:#214f51}.lab-flight-story i{font-size:12px;font-style:normal;color:#517974} .lab-flight-story-board{display:grid;justify-items:center;align-content:center;gap:14px;min-height:100%;text-align:center} .lab-flight-story-board img{width:132px;height:132px;object-fit:contain;animation:flight-key-float 3s ease-in-out infinite} .lab-flight-story-board small{font-size:10px;color:#38877e;letter-spacing:.1em}.lab-flight-story-board b{font-size:22px;line-height:1.2}.lab-flight-story-board p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}.lab-flight-story-board>span{font-size:11px;color:#35756e} /* Playing replaces the lobby and score board. */ .lab-games[data-game-mode="flight"].is-playing .lab-games__body{grid-template-columns:minmax(0,1fr);overflow:hidden;padding:10px} .lab-games[data-game-mode="flight"].is-playing .lab-games__board{display:none} .lab-games[data-game-mode="flight"].is-playing .lab-games__footer button{display:none} .lab-games[data-game-mode="flight"] .lab-flight{container-type:size;touch-action:none;cursor:pointer} .lab-flight:not(.has-flight-hint) .lab-flight__hint{opacity:0;visibility:hidden} .lab-flight__chapters{position:absolute;inset:0;z-index:0;overflow:hidden;background:#74bdd7} .lab-flight__chapters>i{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 2.4s;will-change:auto} .lab-flight__chapters>i>b{position:absolute;top:0;bottom:0;width:var(--scene-tile,1200px);background-image:var(--scene);background-size:cover;background-position:center;mask-image:linear-gradient(90deg,transparent,#000 12%)} .lab-flight__chapters>i:not(.is-loaded)>b,.lab-flight__chapters>i:not(.is-scene-active):not(.is-scene-outgoing)>b{background-image:none} .lab-flight__chapters>i.is-scene-active,.lab-flight__chapters>i.is-scene-outgoing{will-change:transform,opacity} .lab-flight__chapters>i>b:nth-child(1){left:calc(-1 * var(--scene-stride,1056px))}.lab-flight__chapters>i>b:nth-child(2){left:0}.lab-flight__chapters>i>b:nth-child(3){left:var(--scene-stride,1056px)} .lab-flight__chapters>.is-forest{--scene:url('/assets/v2.9.85/minigames/pidgey-flight/forest-panorama.jpg')} .lab-flight__chapters>.is-cave{--scene:url('/assets/v2.9.82/minigames/pidgey-flight/story/crystal-cave.jpg')} .lab-flight__chapters>.is-coast{--scene:url('/assets/v2.9.83/minigames/pidgey-flight/coast.jpg')} .lab-flight__chapters>.is-alpine{--scene:url('/assets/v2.9.83/minigames/pidgey-flight/alpine.jpg')} .lab-flight__chapters>.is-storm{--scene:url('/assets/v2.9.83/minigames/pidgey-flight/storm.jpg')} .lab-flight__chapters>.is-tempest{--scene:url('/assets/v2.9.86/minigames/pidgey-flight/tempest-panorama.jpg')} .lab-flight[data-chapter="forest"] .is-forest,.lab-flight[data-chapter="forest-pass"] .is-forest{opacity:1} .lab-flight[data-chapter="cave"] .is-cave,.lab-flight[data-chapter="vault"] .is-cave,.lab-flight[data-chapter="depths"] .is-cave{opacity:1} .lab-flight[data-chapter="coast"] .is-coast,.lab-flight[data-chapter="alpine"] .is-alpine,.lab-flight[data-chapter="storm"] .is-storm,.lab-flight[data-chapter="tempest"] .is-tempest{opacity:1} .lab-flight>.lab-flight__sky{z-index:1;inset:0;background:linear-gradient(90deg,#9cdcdd16,transparent 75%);animation:none;filter:none;pointer-events:none} .lab-flight__depth{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;background:radial-gradient(circle,#e8ffffb3 1px,transparent 2px) 0 0/180px 150px} .lab-flight>.lab-flight__speed{z-index:2;opacity:0;pointer-events:none}.lab-flight.is-boosting>.lab-flight__speed{opacity:.24} .lab-games[data-game-mode="flight"] .lab-flight__pidgey{z-index:7;left:28%;width:min(12cqw,9cqh);height:min(12cqw,9cqh);background-size:600% 800%;background-position:0 57.142857%;transform:translate(-50%,-50%) rotate(var(--tilt,0deg));transition:transform .1s;animation:flight-bird-frames .5s steps(6) infinite} @keyframes flight-bird-frames{from{background-position:0 57.142857%}to{background-position:120% 57.142857%}} .lab-games[data-game-mode="flight"] .lab-flight__gate{z-index:6;left:0!important;width:8%;height:22%;transform:translate3d(var(--gate-x,0px),0,0) translate(-50%,-50%);will-change:transform} .lab-games[data-game-mode="flight"] .lab-flight__gate>i{border-radius:0;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;animation:none} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-boost-ring{width:9%;height:24%} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-boost-ring>i{animation:boost-ring-pulse .6s ease-in-out infinite alternate} /* On portrait fields, the old 8/9%-wide box shrank the entire contained PNG. Fit rings to the existing height, cap their width, and leave gameplay rules and every non-ring object unchanged. Container units also handle resizing. */ @container (max-aspect-ratio:1/1){ .lab-games[data-game-mode="flight"] .lab-flight__gate[data-kind="ring"]{width:min(24cqw,14.6667cqh)} .lab-games[data-game-mode="flight"] .lab-flight__gate[data-kind="boost-ring"]{width:min(27cqw,16cqh)} } .lab-games[data-game-mode="flight"] .lab-flight__gate.is-mountain,.lab-games[data-game-mode="flight"] .lab-flight__gate.is-cloud,.lab-games[data-game-mode="flight"] .lab-flight__gate.is-cave-floor,.lab-games[data-game-mode="flight"] .lab-flight__gate.is-cave-ceiling{width:var(--terrain-width,22%);height:var(--terrain-size);top:auto!important;bottom:0;transform:translate3d(var(--gate-x,0px),0,0);filter:none} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-cloud,.lab-games[data-game-mode="flight"] .lab-flight__gate.is-cave-ceiling{top:0!important;bottom:auto} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-mountain,.lab-games[data-game-mode="flight"] .lab-flight__gate.is-cloud,.lab-games[data-game-mode="flight"] .lab-flight__gate.is-cave-floor,.lab-games[data-game-mode="flight"] .lab-flight__gate.is-cave-ceiling{overflow:hidden;aspect-ratio:auto;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-mountain>i,.lab-games[data-game-mode="flight"] .lab-flight__gate.is-cloud>i,.lab-games[data-game-mode="flight"] .lab-flight__gate.is-cave-floor>i,.lab-games[data-game-mode="flight"] .lab-flight__gate.is-cave-ceiling>i{inset:0;background-position:center;background-size:auto 100%;background-repeat:repeat-x;filter:none;animation:none;border:0;box-shadow:none} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-cloud{mask-image:none} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-cloud>i{background-size:contain;background-repeat:no-repeat;background-position:center top} .lab-flight__gate.is-key>i{background:url('/assets/v8/items/oak-lab-pass-pokemon-v1.png') center/contain no-repeat} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-key{width:12%;height:16%} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-key>i{background-size:contain;filter:drop-shadow(0 0 8px #fff2ae);animation:flight-key-float 1.5s ease-in-out infinite} .lab-flight__gate.is-key>b{position:absolute;left:50%;top:100%;transform:translateX(-50%);padding:4px 8px;background:#194b57;color:#fff8cd;border-radius:8px;font-size:10px} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-feather{width:clamp(24px,min(9cqw,6.5cqh),44px);height:clamp(24px,min(9cqw,6.5cqh),44px)} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-feather>i{background:url('/assets/v2.9.85/minigames/pidgey-flight/feather.png') center/contain no-repeat;animation:flight-feather-turn 1.7s ease-in-out infinite;filter:drop-shadow(0 2px 1px #683511) drop-shadow(0 0 3px #fff6c8)} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-feather:before,.lab-games[data-game-mode="flight"] .lab-flight__gate.is-feather:after{display:none} @keyframes flight-feather-turn{0%,100%{transform:translateY(0) rotate(-10deg) scaleX(1)}50%{transform:translateY(-3px) rotate(12deg) scaleX(.75)}} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-spearow{width:min(17cqw,13cqh);height:min(17cqw,13cqh);transform:translate3d(var(--gate-x,0px),0,0) translate(-50%,-50%)} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-spearow>i{background-size:600% 800%;animation:flight-enemy-frames .4s steps(6) infinite} @keyframes flight-enemy-frames{from{background-position:0 14.285714%}to{background-position:120% 14.285714%}} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-fearow{width:min(34cqw,29cqh);height:min(34cqw,29cqh);transform:translate3d(var(--gate-x,0px),0,0) translate(-50%,-50%)} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-fearow>i{background-image:url('/assets/v2.9.83/minigames/pidgey-flight/fearow-flight.png');background-size:600% 100%;background-position:0 0;transform:translateY(var(--wing-bob,0px)) scaleX(-1);animation:flight-fearow-incoming .68s steps(6) infinite;filter:drop-shadow(0 3px 3px #16364766)} @keyframes flight-fearow-incoming{from{background-position:0 0}to{background-position:120% 0}} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-balloon{width:min(28cqw,16cqh);height:29cqh} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-balloon>i{background-image:url('/assets/v2.9.83/minigames/pidgey-flight/weather-balloon.png');background-size:contain;animation:lab-balloon-float 1.3s ease-in-out infinite alternate} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-rocket-balloon{width:min(32cqw,21cqh);height:35cqh} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-rocket-balloon>i{background:url('/assets/v2.9.84/minigames/pidgey-flight/rocket-balloon.png') center/contain no-repeat;animation:lab-balloon-float 2s ease-in-out infinite alternate;filter:drop-shadow(0 4px 5px #26354c55)} .lab-games[data-game-mode="flight"] .lab-flight__lightning{z-index:8;right:auto;width:26%;height:12%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:none;background:none} .lab-games[data-game-mode="flight"] .lab-flight__lightning.is-warning{left:0!important;right:0;width:100%;height:12%;transform:translateY(-50%);border-top:1px dashed #cefaff;border-bottom:1px dashed #cefaff;background:#79d9ff24;animation:flight-discharge-warning .7s ease-in-out infinite alternate} .lab-games[data-game-mode="flight"] .lab-flight__lightning.is-warning i,.lab-games[data-game-mode="flight"] .lab-flight__lightning.is-warning em{display:none} .lab-games[data-game-mode="flight"] .lab-flight__lightning b{position:absolute;right:3%;top:50%;width:auto;height:auto;transform:translateY(-50%);padding:6px 9px;border:1px solid #b5f1ff;border-radius:6px;background:#17425b;color:#ebfeff;font-size:10px;font-weight:800;letter-spacing:.05em;animation:none} .lab-games[data-game-mode="flight"] .lab-flight__lightning.is-striking{left:0!important;width:100%;height:16%;transform:translateY(-50%);animation:flight-beam-impact .32s ease-out both;filter:drop-shadow(0 0 7px #08acff)} .lab-games[data-game-mode="flight"] .lab-flight__lightning.is-striking i{display:block;position:absolute;inset:0;width:100%;height:100%;border:0;background:url('/assets/v2.9.84/minigames/pidgey-flight/lightning-beam.png') center/100% 100% no-repeat;clip-path:none;box-shadow:none;filter:none;animation:none} .lab-games[data-game-mode="flight"] .lab-flight__lightning.is-striking em{display:none} .lab-games[data-game-mode="flight"] .lab-flight__lightning.is-striking:after{content:'';position:absolute;left:0;right:0;top:50%;height:clamp(7px,1.2cqh,12px);transform:translateY(-50%);background:linear-gradient(#6cddff,#fff 40% 60%,#6cddff);box-shadow:0 0 14px 3px #4acaff;border-radius:50%;opacity:.95} @keyframes flight-beam-impact{0%,65%{opacity:1}100%{opacity:.5}} .lab-games[data-game-mode="flight"] .lab-flight__lightning.is-striking b{display:none} @keyframes flight-discharge-warning{to{background:#79d9ff45}} @keyframes flight-discharge-arc{50%{opacity:.78;transform:scaleY(.7)}} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-cleared{visibility:hidden} .lab-games[data-game-mode="flight"] .lab-flight__hud{left:10px;right:10px;top:10px;} .lab-games[data-game-mode="flight"] .lab-flight__hud>span{display:grid;gap:3px;background:#164d63db;border:1px solid #d7f4ff55;color:#daeff9;font-size:9px;letter-spacing:.02em;border-radius:12px;} .lab-games[data-game-mode="flight"] .lab-flight__hud b{font-size:13px;color:#fff} .lab-games[data-game-mode="flight"] .lab-flight__hud>button{pointer-events:auto;display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid #b4ddea;border-radius:12px;background:#f4fbff;color:#215b70;font-size:21px;box-shadow:none} .lab-flight__reward-progress{bottom:27px;left:8%;right:8%;height:4px;background:#143f50b3;box-shadow:none} .lab-flight__reward-progress span{position:absolute;top:10px;display:block;width:auto;height:auto;transform:translateX(-50%);border:0;border-radius:0;background:none;font-size:9px;text-shadow:0 1px 3px #123e50} .lab-flight__reward-progress i{background:#85e9d7;box-shadow:none} .lab-games[data-game-mode="flight"] .lab-flight__reward-progress .lab-flight__checkpoint{top:0;display:flex;flex-direction:column;align-items:center;gap:5px;width:1px;color:#f0faff;white-space:nowrap} .lab-flight__checkpoint>b{display:grid;place-items:center;flex-shrink:0;width:13px;height:13px;margin-top:-5px;border:2px solid #dceff5;border-radius:50%;background:#285970;color:#fff;font-size:9px;line-height:1;box-shadow:0 1px 4px #092d41} .lab-flight__checkpoint>em{font-style:normal;font-size:9px;line-height:1;text-shadow:0 1px 3px #123e50} .lab-flight__checkpoint.is-complete>b{background:#87edc5;border-color:#c9ffe9;color:#134636} .lab-flight__checkpoint.is-current>b{border-color:#fff0a8;background:#22617c;box-shadow:0 0 0 3px #fff4bf40} .lab-flight__checkpoint.is-complete>em{color:#d6ffed} .lab-flight__countdown,.lab-flight__pause,.lab-flight__arrival{position:absolute;z-index:40;inset:0;display:grid;place-content:center;justify-items:center;padding:22px;background:#174c6055;backdrop-filter:blur(4px);text-align:center;color:#fff} .lab-flight__countdown b{font-size:100px;line-height:1;font-weight:850;text-shadow:0 4px 20px #133a5099}.lab-flight__countdown span{margin-top:14px;font-size:13px} .lab-flight__pause{z-index:50;background:#12374499}.lab-flight__pause>div{display:grid;gap:12px;width:min(360px,100%);padding:28px;background:#f5fbfd;border-radius:22px;color:var(--ink);box-shadow:0 20px 60px #12334555} .lab-flight__pause small{font-size:10px;color:#367b8e;letter-spacing:.06em}.lab-flight__pause b{font-size:30px}.lab-flight__pause p{margin:0 0 4px;font-size:14px;line-height:1.5;color:var(--muted)} .lab-flight__pause button{min-height:48px;padding:8px;border:0;border-radius:12px;background:#148bae;color:#fff;font-size:12px;font-weight:800}.lab-flight__pause button+button{background:#e0eef3;color:#28556a} .lab-flight.is-paused *{animation-play-state:paused!important} .lab-flight__arrival{gap:12px;z-index:41}.lab-flight__arrival img{width:120px;height:120px;object-fit:contain}.lab-flight__arrival small{font-size:11px}.lab-flight__arrival b{font-size:clamp(24px,4vw,44px)}.lab-flight__arrival p{font-size:14px;max-width:440px} .lab-games[data-game-mode="flight"] .lab-result{min-height:400px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;background:#f1fafc;color:var(--ink)} .lab-games[data-game-mode="flight"] .lab-result>img{width:130px;height:130px;object-fit:contain}.lab-games[data-game-mode="flight"] .lab-result strong{color:var(--ink);font-size:34px}.lab-games[data-game-mode="flight"] .lab-result p{margin:0;max-width:480px;color:var(--muted);font-size:14px;line-height:1.6}.lab-games[data-game-mode="flight"] .lab-result small{color:#2c7e79;font-size:11px}.lab-games[data-game-mode="flight"] .lab-result em{font-size:12px;background:#e2f2f5}.lab-flight__summary{flex-wrap:wrap} @keyframes flight-lobby-far{from{transform:scale(1.08) translateX(2%)}to{transform:scale(1.14) translateX(-3%)}} @keyframes flight-lobby-bird{50%{margin-top:-10px}}@keyframes flight-key-float{50%{transform:translateY(-5px) rotate(5deg)}} @media(max-width:1050px),(max-height:760px){ .lab-games[data-game-mode="flight"] .lab-games__body{overflow-y:auto;align-items:start;grid-template-rows:max-content} .lab-games[data-game-mode="flight"] .lab-games__arena{overflow:visible;touch-action:pan-y} .lab-games[data-game-mode="flight"] .lab-flight-lobby{min-height:360px;height:auto} .lab-games[data-game-mode="flight"] .lab-games__board{overflow:visible} .lab-games[data-game-mode="flight"].is-playing .lab-games__arena{height:100%;overflow:hidden;touch-action:none} .lab-games[data-game-mode="flight"].is-playing .lab-games__body{align-items:stretch} .lab-flight-intro{width:78%;padding:18px} .lab-games[data-game-mode="flight"] .lab-flight-lobby__bird{right:0;transform:scale(.75);transform-origin:right center} } @media(max-width:760px){ .lab-games[data-game-mode="flight"]{padding:0} .lab-games[data-game-mode="flight"] .lab-games__shell{height:100dvh;width:100%;border:0;border-radius:0;grid-template-rows:64px minmax(0,1fr) auto} .lab-games[data-game-mode="flight"] .lab-games__header{grid-template-columns:40px minmax(0,1fr) 44px;gap:9px;padding:10px} .lab-games[data-game-mode="flight"] .lab-games__emblem{width:40px;height:40px} .lab-games[data-game-mode="flight"] .lab-games__header small{font-size:8px;letter-spacing:.03em} .lab-games[data-game-mode="flight"] .lab-games__header h2{font-size:20px} .lab-games[data-game-mode="flight"] .lab-games__body{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content minmax(138px,1fr);padding:8px;gap:8px;align-items:stretch;overscroll-behavior:contain} .lab-games[data-game-mode="flight"] .lab-flight-lobby{padding:8px;gap:8px;min-height:0;height:auto} .lab-flight-intro{width:100%;padding:10px;background:#f4fcffe8;gap:8px;border-radius:14px} .lab-flight-intro header{padding-right:62px}.lab-flight-intro header small,.lab-flight-intro h3{display:none}.lab-flight-intro header p{font-size:12px;line-height:1.4} .lab-flight-intro header em{margin-top:6px;font-size:12px}.lab-flight-intro header em b{font-size:15px;font-variant-numeric:tabular-nums} .lab-flight-intro__controls{padding-top:7px;gap:6px}.lab-flight-intro__controls>span{gap:7px}.lab-flight-intro__controls img{width:26px;height:26px}.lab-flight-intro__controls i{font-size:11px}.lab-flight-intro__controls strong{display:none} .lab-flight-credits{font-size:9px;padding:7px 0} .lab-games[data-game-mode="flight"] .lab-flight-lobby__bird{z-index:3;top:14px;right:14px;transform:scale(.45);transform-origin:right top;pointer-events:none} .lab-games[data-game-mode="flight"] .lab-flight__rewards{grid-template-columns:repeat(3,minmax(0,1fr));padding:8px;gap:5px 8px;border-radius:14px} .lab-games[data-game-mode="flight"] .lab-flight__rewards>b{font-size:11px}.lab-games[data-game-mode="flight"] .lab-flight__rewards>b em{font-size:10px} .lab-flight__reward-track{height:3px;margin:0} .lab-games[data-game-mode="flight"] .lab-flight__rewards>span{grid-template-columns:26px minmax(0,1fr);grid-template-rows:26px auto auto;gap:2px;padding:3px 0!important;align-items:center} .lab-games[data-game-mode="flight"] .lab-flight__rewards>span img{grid-column:1;grid-row:1;width:26px;height:26px} .lab-games[data-game-mode="flight"] .lab-flight__rewards>span strong{grid-column:2;grid-row:1;font-size:11px} .lab-games[data-game-mode="flight"] .lab-flight__rewards>span u{grid-column:1/-1;font-size:10px;line-height:1.2}.lab-games[data-game-mode="flight"] .lab-flight__rewards>span i{grid-column:1/-1;font-size:9px;line-height:1.2} .lab-games[data-game-mode="flight"] .lab-games__board{display:flex;flex-direction:column;overflow:hidden;padding:8px 10px;border-radius:14px} .lab-games[data-game-mode="flight"] .lab-games__board header{flex-shrink:0;margin:0 0 5px;padding:0 0 5px;gap:0} .lab-games[data-game-mode="flight"] .lab-games__board header img{width:23px;height:23px}.lab-games[data-game-mode="flight"] .lab-games__board header b{font-size:11px;letter-spacing:.04em} .lab-games[data-game-mode="flight"] .lab-games__board ol{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;margin:0;gap:4px;align-content:start;scrollbar-width:thin} .lab-games[data-game-mode="flight"] .lab-games__board li{grid-template-columns:25px minmax(0,1fr) auto;min-height:32px;padding:3px 5px;font-size:11px;gap:6px} .lab-games[data-game-mode="flight"] .lab-games__board li img{width:24px;height:24px} .lab-flight-story{padding:12px;gap:8px}.lab-flight-story img{width:48px;height:48px}.lab-flight-story small{font-size:9px}.lab-flight-story b{font-size:15px}.lab-flight-story i{font-size:11px} .lab-flight-story-board{grid-template-columns:64px 1fr;gap:8px 12px;text-align:left;justify-items:start} .lab-flight-story-board img{grid-row:1/5;width:64px;height:64px}.lab-flight-story-board b{font-size:15px}.lab-flight-story-board p{display:none} .lab-games[data-game-mode="flight"] .lab-games__footer{gap:10px;padding:10px 12px max(10px,env(safe-area-inset-bottom))} .lab-games[data-game-mode="flight"] .lab-games__footer>span{min-width:44px}.lab-games[data-game-mode="flight"] .lab-games__footer small{font-size:9px}.lab-games[data-game-mode="flight"] .lab-games__footer b{font-size:14px} .lab-games[data-game-mode="flight"] .lab-games__footer button{min-width:0;max-width:none;flex:1;padding:6px 10px;font-size:11px;height:44px} .lab-games[data-game-mode="flight"]:not(.is-playing) .lab-games__footer>span{display:none} .lab-games[data-game-mode="flight"].is-playing .lab-games__body{padding:4px} .lab-games[data-game-mode="flight"] .lab-flight__hud{gap:4px;top:8px;left:6px;right:6px}.lab-games[data-game-mode="flight"] .lab-flight__hud>span{padding:6px;font-size:8px}.lab-games[data-game-mode="flight"] .lab-flight__hud b{font-size:10px} .lab-flight__pause>div{padding:22px}.lab-games[data-game-mode="flight"] .lab-result{min-height:430px;padding:20px 12px} } @media(max-height:520px) and (orientation:landscape){.lab-games[data-game-mode="flight"]{padding:0}.lab-games[data-game-mode="flight"] .lab-games__shell{height:100dvh;grid-template-rows:54px minmax(0,1fr) 56px}.lab-games[data-game-mode="flight"] .lab-games__header{padding:5px 12px}.lab-games[data-game-mode="flight"] .lab-games__footer{padding:5px 12px}} @media(prefers-reduced-motion:reduce){.lab-flight-lobby__sky,.lab-flight-lobby__bird,.lab-flight-story-board img{animation:none!important}} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-mountain[data-variant="0"]>i{background-image:url('/assets/v2.9.82/minigames/pidgey-flight/story/mountain-low.png')} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-mountain[data-variant="1"]>i{background-image:url('/assets/v2.9.82/minigames/pidgey-flight/story/mountain-medium.png')} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-mountain[data-variant="2"]>i{background-image:url('/assets/v2.9.82/minigames/pidgey-flight/story/mountain-tall.png')} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-cloud>i{background-image:url('/assets/v2.9.85/minigames/pidgey-flight/cloud.png');transform:none} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-mountain[data-zone="alpine"]>i{background-image:url('/assets/v2.9.84/minigames/pidgey-flight/alpine-rock.png')} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-cave-floor[data-variant="0"]>i{background-image:url('/assets/v2.9.82/minigames/pidgey-flight/story/cave-floor-small.png')} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-cave-floor[data-variant="1"]>i{background-image:url('/assets/v2.9.82/minigames/pidgey-flight/story/cave-floor-medium.png')} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-cave-floor[data-variant="2"]>i{background-image:url('/assets/v2.9.82/minigames/pidgey-flight/story/cave-floor-tall.png')} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-cave-ceiling[data-variant="0"]>i{background-image:url('/assets/v2.9.82/minigames/pidgey-flight/story/cave-ceiling-small.png')} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-cave-ceiling[data-variant="1"]>i{background-image:url('/assets/v2.9.82/minigames/pidgey-flight/story/cave-ceiling-medium.png')} .lab-games[data-game-mode="flight"] .lab-flight__gate.is-cave-ceiling[data-variant="2"]>i{background-image:url('/assets/v2.9.82/minigames/pidgey-flight/story/cave-ceiling-tall.png');clip-path:inset(0 0 6% 0)} /* Floating controls inside the field: no separate bar or reserved grid row. */ .lab-games[data-game-mode="flight"] .lab-flight__hud{position:absolute;inset:10px 10px 44px;z-index:42;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:0;border:0;background:none;backdrop-filter:none;pointer-events:none} .lab-games[data-game-mode="flight"] .lab-flight__hud>span{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid #ffffff35;border-radius:10px;background:#123e586e;color:#f5fcff;min-width:0;font-size:11px;box-shadow:none;text-shadow:0 1px 2px #16435d} .lab-games[data-game-mode="flight"] .lab-flight__hud .lab-flight__route{position:absolute;bottom:0;left:50%;transform:translateX(-50%);max-width:90%;padding:5px 10px;justify-content:center;white-space:nowrap} .lab-games[data-game-mode="flight"] .lab-flight__route>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px} .lab-games[data-game-mode="flight"] .lab-flight__route em{font-size:9px;font-style:normal;color:#daeff5}.lab-games[data-game-mode="flight"] .lab-flight__route em b{font-size:10px} .lab-games[data-game-mode="flight"] [data-flight-shield]{display:flex;align-items:center;gap:4px;line-height:0} .lab-games[data-game-mode="flight"] [data-flight-shield] img{display:block;width:25px;height:25px;object-fit:contain;filter:drop-shadow(0 1px 2px #61243166)} .lab-games[data-game-mode="flight"] .lab-flight__hud>.lab-flight__lives{padding:7px 8px} .lab-games[data-game-mode="flight"] .lab-flight__hud button{width:auto;min-width:88px;min-height:44px;padding:6px 10px;border:1px solid #ffffff70;background:#edfaff9c;color:#16475f;border-radius:11px;font-size:12px;font-weight:800;display:flex;gap:5px;align-items:center;justify-content:center;pointer-events:auto} .lab-flight__hud button i{font-style:normal;font-size:19px} .lab-flight__transition{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;will-change:auto} .lab-flight__transition.is-active{will-change:transform,opacity} .lab-flight__transition i,.lab-flight__transition b{position:absolute;right:0;width:24cqh;height:46%;background:url('/assets/v2.9.82/minigames/pidgey-flight/story/cave-ceiling-tall.png') center top/contain no-repeat;filter:drop-shadow(0 0 18px #113446);top:0} .lab-flight__transition i{height:24cqh;clip-path:inset(0 0 6% 0)} .lab-flight__transition b{top:auto;bottom:0;background-image:url('/assets/v2.9.82/minigames/pidgey-flight/story/cave-floor-tall.png');background-position:center bottom} .lab-games[data-game-mode="flight"].is-playing .lab-games__body{grid-template-rows:minmax(0,1fr);gap:0} @media(max-width:760px){ .lab-games[data-game-mode="flight"] .lab-flight__hud{gap:6px;inset:6px 6px 40px;padding:0} .lab-games[data-game-mode="flight"] .lab-flight__hud>span{font-size:10px;padding:7px 8px} .lab-games[data-game-mode="flight"] .lab-flight__hud b{font-size:11px} .lab-games[data-game-mode="flight"] .lab-flight__hud button{min-width:72px;padding:5px;font-size:11px} .lab-games[data-game-mode="flight"] .lab-flight__hud .lab-flight__route{gap:5px;padding:4px 8px} .lab-games[data-game-mode="flight"] .lab-flight__route>b{font-size:10px} .lab-games[data-game-mode="flight"] .lab-flight__reward-progress span{font-size:8px} .lab-flight__checkpoint>em{font-size:8px}.lab-flight__checkpoint>b{width:11px;height:11px;margin-top:-4px;font-size:8px} .lab-games[data-game-mode="flight"] .lab-flight__hint{bottom:78px;max-width:80%;font-size:10px} } /* Isolate layout work without clipping the authored glow/shadow artwork. */ .lab-games[data-game-mode="flight"] .lab-flight,.lab-flight__gate,.lab-flight__popup,.lab-flight__burst{contain:layout style} .lab-games:not(.is-open) *{animation-play-state:paused!important} /* pk-style-source:67 */ /* /pokemon-next-v1.css */ /* * Pokémon Next UI foundation. * One reversible, last-loaded layer for the new visual contract. Legacy * revision files remain untouched until each surface reaches visual parity. */ html[data-ui-revision="pokemon-next"] { --pk-font: "Onest", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --pk-ink: #102f46; --pk-ink-soft: #45687c; --pk-line: rgba(31, 104, 140, .22); --pk-surface: rgba(247, 253, 255, .94); --pk-surface-strong: #f8fdff; --pk-surface-dark: rgba(10, 39, 58, .9); --pk-blue: #168fc2; --pk-blue-deep: #0873a5; --pk-red: #e83e4f; --pk-gold: #f1bd3f; --pk-success: #2aa873; --pk-danger: #d94a59; --pk-radius-sm: 8px; --pk-radius-md: 12px; --pk-radius-lg: 18px; --pk-hit: 44px; --pk-safe-top: env(safe-area-inset-top, 0px); --pk-safe-right: env(safe-area-inset-right, 0px); --pk-safe-bottom: env(safe-area-inset-bottom, 0px); --pk-safe-left: env(safe-area-inset-left, 0px); --pk-z-world: 0; --pk-z-hud: 100; --pk-z-window: 1000; --pk-z-modal: 2000; --pk-z-toast: 3000; font-family: var(--pk-font); } html[data-ui-revision="pokemon-next"] body, html[data-ui-revision="pokemon-next"] button, html[data-ui-revision="pokemon-next"] input, html[data-ui-revision="pokemon-next"] textarea, html[data-ui-revision="pokemon-next"] select { font-family: var(--pk-font); } html[data-ui-revision="pokemon-next"] :where(button, input, textarea, select, a, [role="button"]):focus-visible { outline: 3px solid rgba(61, 190, 239, .78); outline-offset: 3px; } /* High-resolution raster family: team, bag, Pokédex and trainer club. */ html[data-ui-revision="pokemon-next"] .pokemon-nav-art { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 2px 3px rgba(5, 28, 48, .22)); pointer-events: none; } html[data-ui-revision="pokemon-next"] .pokemon-nav-art--team { background-image: url('/assets/v8/ui/nav-team.png'); } html[data-ui-revision="pokemon-next"] .pokemon-nav-art--bag { background-image: url('/assets/v8/ui/nav-bag.png'); } html[data-ui-revision="pokemon-next"] .pokemon-nav-art--pokedex { background-image: url('/assets/v8/ui/nav-pokedex.png'); } html[data-ui-revision="pokemon-next"] .pokemon-nav-art--club { background-image: url('/assets/v8/ui/nav-club.png'); } html[data-ui-revision="pokemon-next"] .pokemon-nav-art--chat { background-image: url('/assets/v8/ui/nav-pokedex.png'); } html[data-ui-revision="pokemon-next"] .pokemon-nav-art--quests { background-image: url('/assets/v2.9.11/items/oak-parcel.png'); } html[data-ui-revision="pokemon-next"] .pokemon-nav-art--menu { background-image: url('/assets/v4.8/items/research-medal.png'); } html[data-ui-revision="pokemon-next"] .progression-raster-icon, html[data-ui-revision="pokemon-next"] .progression-icon.pokemon-nav-art { display: block; width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; filter: drop-shadow(0 3px 5px rgba(7, 36, 54, .18)); } html[data-ui-revision="pokemon-next"] .progression-hero-icon .progression-raster-icon, html[data-ui-revision="pokemon-next"] .factions-hero-v2761 > span > .progression-icon { width: 62px; height: 62px; } /* Global dock: one compact trainer-device surface, not five floating cards. */ html[data-ui-revision="pokemon-next"] .desktop-dock, html[data-ui-revision="pokemon-next"] .mobile-dock { border: 1px solid rgba(117, 207, 239, .42); background: linear-gradient(180deg, rgba(21, 67, 91, .94), rgba(8, 39, 59, .96)), var(--pk-surface-dark); box-shadow: 0 14px 34px rgba(0, 24, 42, .28), inset 0 1px 0 rgba(255,255,255,.16); color: #eefaff; } html[data-ui-revision="pokemon-next"] .desktop-dock::before, html[data-ui-revision="pokemon-next"] .mobile-dock::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border-top: 2px solid rgba(232, 62, 79, .8); pointer-events: none; } html[data-ui-revision="pokemon-next"] .desktop-dock > button, html[data-ui-revision="pokemon-next"] .mobile-dock > button { min-width: var(--pk-hit); min-height: var(--pk-hit); color: inherit; border-radius: var(--pk-radius-md); -webkit-tap-highlight-color: transparent; } html[data-ui-revision="pokemon-next"] .desktop-dock > button > span, html[data-ui-revision="pokemon-next"] .mobile-dock > button > span { display: grid; place-items: center; overflow: visible; } html[data-ui-revision="pokemon-next"] .desktop-dock .pokemon-nav-art { width: 42px; height: 42px; } html[data-ui-revision="pokemon-next"] .mobile-dock .pokemon-nav-art { width: 34px; height: 34px; } html[data-ui-revision="pokemon-next"] .desktop-dock button:hover, html[data-ui-revision="pokemon-next"] .desktop-dock button[aria-pressed="true"], html[data-ui-revision="pokemon-next"] .mobile-dock button[aria-pressed="true"] { background: rgba(94, 196, 232, .16); } /* Fix the old 761–800 px hybrid: exactly one navigation family. */ @media (min-width: 761px) { html[data-ui-revision="pokemon-next"] .mobile-dock { display: none !important; } html[data-ui-revision="pokemon-next"] .desktop-dock { display: flex; } } @media (max-width: 760px) { html[data-ui-revision="pokemon-next"] .desktop-dock { display: none !important; } html[data-ui-revision="pokemon-next"] .mobile-dock { display: grid; padding-bottom: max(6px, var(--pk-safe-bottom)); } } /* Trainer progression and clubs reuse real Pokémon objects instead of runes. */ html[data-ui-revision="pokemon-next"] :where(.progression-window-v2761, .factions-window-v2761) { color: var(--pk-ink); } html[data-ui-revision="pokemon-next"] :where(.progression-hero-v2761, .factions-hero-v2761) { background: linear-gradient(105deg, rgba(247, 253, 255, .97), rgba(227, 246, 252, .91)), url('/assets/v4.1/ui/pokedex-expedition-bg.png') center / cover; border-color: var(--pk-line); border-radius: var(--pk-radius-lg); } html[data-ui-revision="pokemon-next"] :where(.progression-hero-v2761, .factions-hero-v2761) h2 { color: var(--pk-ink); } html[data-ui-revision="pokemon-next"] :where(.progression-hero-v2761, .factions-hero-v2761) p { color: var(--pk-muted); } html[data-ui-revision="pokemon-next"] :where(.progression-hero-v2761, .factions-hero-v2761) > strong { color: var(--pk-ink); border-color: color-mix(in srgb, var(--pk-blue) 26%, var(--pk-line)); background: rgba(255, 255, 255, .76); } html[data-ui-revision="pokemon-next"] :where(.talent-branch-v2761, .mastery-card-v2761, .faction-card-v2761) { border-radius: var(--pk-radius-md); border-color: var(--pk-line); box-shadow: 0 9px 22px rgba(13, 62, 88, .08); } html[data-ui-revision="pokemon-next"] .clan-module-grid-v2761 article > i { display: grid; place-items: center; width: 48px; height: 48px; font-style: normal; } html[data-ui-revision="pokemon-next"] .clan-module-grid-v2761 .progression-icon { width: 44px; height: 44px; } html[data-ui-revision="pokemon-next"] :where(.pokemon-type-badge, .combat-skill-tag.is-type) img { display: block; width: 20px; height: 20px; object-fit: contain; } html[data-ui-revision="pokemon-next"] .combat-type-icon-v8 { width: 18px; height: 18px; object-fit: contain; } html[data-ui-revision="pokemon-next"] :where(.quest-type-graphic-v61, .quest-reward-icon-v61, .quest-target-raster img, .interaction-fallback-badge img, .creature-placeholder img) { display: block; width: 100%; height: 100%; object-fit: contain; } html[data-ui-revision="pokemon-next"] .interaction-fallback-badge { display: grid; place-items: center; overflow: visible; } html[data-ui-revision="pokemon-next"] .interaction-fallback-badge img { filter: drop-shadow(0 4px 7px rgba(8, 35, 52, .22)); } /* Pokémon-world raster language: no platform emoji or fantasy glyphs in authored interface surfaces. */ html[data-ui-revision="pokemon-next"] :where( .starter-stat-art-v8, .mechanics-card-art-v8, .starter-reveal-ball-v8, .reward-celebration-burst-art-v8, .referral-invite-avatar img, .referral-gem-mark img, .profile-v80-lead-emoji.is-placeholder img ) { display: block; width: 100%; height: 100%; object-fit: contain; } html[data-ui-revision="pokemon-next"] .starter-stat-art-v8 { display: inline-grid; place-items: center; width: 22px; height: 22px; overflow: visible; } html[data-ui-revision="pokemon-next"] .starter-stat-art-v8 img, html[data-ui-revision="pokemon-next"] .mechanics-card-art-v8 { filter: drop-shadow(0 2px 4px rgba(7, 41, 62, .2)); } html[data-ui-revision="pokemon-next"] .mechanics-card > header > i { display: grid; place-items: center; width: 46px; height: 46px; overflow: visible; background: color-mix(in srgb, var(--pk-sky) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pk-sky) 28%, transparent); border-radius: var(--pk-radius-sm); } html[data-ui-revision="pokemon-next"] .mechanics-card-art-v8 { width: 38px; height: 38px; } html[data-ui-revision="pokemon-next"] :where(.referral-invite-avatar, .referral-gem-mark) { display: grid; place-items: center; overflow: visible; } html[data-ui-revision="pokemon-next"] .referral-invite-avatar img { width: 34px; height: 34px; } html[data-ui-revision="pokemon-next"] .referral-gem-mark img { width: 44px; height: 44px; } html[data-ui-revision="pokemon-next"] .profile-v80-lead-emoji.is-placeholder { display: grid; place-items: center; width: 100%; height: 100%; } html[data-ui-revision="pokemon-next"] .profile-v80-lead-emoji.is-placeholder img { max-width: 92px; max-height: 92px; } html[data-ui-revision="pokemon-next"] .profile-shiny-mark { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border: 1px solid rgba(255, 194, 62, .58); border-radius: 999px; background: rgba(255, 224, 128, .22); color: #7b5310; font-size: 10px; font-style: normal; letter-spacing: .08em; vertical-align: middle; } html[data-ui-revision="pokemon-next"] .starter-reveal-ball-v8 { display: inline-block; width: 22px; height: 22px; margin-right: 5px; vertical-align: middle; filter: drop-shadow(0 2px 4px rgba(9, 37, 56, .25)); } html[data-ui-revision="pokemon-next"] .reward-celebration-burst-art-v8, html[data-ui-revision="pokemon-next"] .reward-celebration-burst .item-icon { width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(8, 38, 58, .28)); } /* A single mobile contract: readable type, safe insets and 44 px actions. */ @media (max-width: 760px) { html[data-ui-revision="pokemon-next"] :where(.quest-widget, .side-panel, .chat-window, .battle-window, .starter-experience, .lab-games__window) { font-size: max(12px, 1rem); } html[data-ui-revision="pokemon-next"] :where( .quest-widget-collapse, .quest-hud-journal-v68, .quest-mode-tabs-v57 button, .quest-status-tabs-v57 button, .profile-v80 button, .inventory-v52 button, .dex-type-filter button, .pokemon-detail button, .battle-quick-item, .battle-utility-button, .battle-capture-cancel ) { min-width: var(--pk-hit); min-height: var(--pk-hit); } html[data-ui-revision="pokemon-next"] .starter-experience { margin: max(6px, var(--pk-safe-top)) max(6px, var(--pk-safe-right)) max(6px, var(--pk-safe-bottom)) max(6px, var(--pk-safe-left)); max-height: calc(100dvh - max(6px, var(--pk-safe-top)) - max(6px, var(--pk-safe-bottom))); } html[data-ui-revision="pokemon-next"] :where(.lab-games, .quarry-root, .pursuit-root) { padding-top: var(--pk-safe-top); padding-right: var(--pk-safe-right); padding-bottom: var(--pk-safe-bottom); padding-left: var(--pk-safe-left); } html[data-ui-revision="pokemon-next"] :where(.lab-games__header, .quarry-header, .pursuit-header) { padding-top: max(8px, var(--pk-safe-top)); } } /* World interaction must never select page text or flash a browser highlight. */ html[data-ui-revision="pokemon-next"] :where( .game-screen canvas, .movement-zone, .joystick, .interaction-card, .desktop-dock, .mobile-dock, .battle-screen, .lab-games, .quarry-root, .pursuit-root ) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } @media (prefers-reduced-motion: reduce) { html[data-ui-revision="pokemon-next"] *, html[data-ui-revision="pokemon-next"] *::before, html[data-ui-revision="pokemon-next"] *::after { scroll-behavior: auto !important; } } /* pk-style-source:68 */ /* /pokemon-next-canonical-art-v1.css */ /* Active Pokémon-world action art. Every primary image points to an existing trainer, Pokémon or inventory object; the rejected generic system atlas is deliberately not referenced by this runtime stylesheet. */ .pokemon-canonical-art { display: block; flex: 0 0 auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; user-select: none; pointer-events: none; -webkit-user-drag: none; } .battle-result-raster { display: block; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; user-select: none; pointer-events: none; -webkit-user-drag: none; } .pokemon-ui-raster { display: inline-block; width: 1em; height: 1em; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; vertical-align: middle; user-select: none; pointer-events: none; -webkit-user-drag: none; } .player-action-wheel__item > .pokemon-canonical-art:first-child { width: 34px; height: 34px; filter: drop-shadow(0 3px 5px rgba(0, 10, 24, .35)); transition: filter .14s ease, transform .14s ease; } .player-action-wheel__item:hover > .pokemon-canonical-art:first-child, .player-action-wheel__item:focus-visible > .pokemon-canonical-art:first-child { filter: drop-shadow(0 4px 7px rgba(36, 188, 239, .42)) brightness(1.06); transform: translateY(-1px) scale(1.04); } #socialInviteEmoji.pokemon-canonical-art { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 6px 9px rgba(0, 18, 33, .32)); } .controls-tutorial-mobile article > .pokemon-canonical-art { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(2, 18, 32, .22)); } #labGameIcon > .pokemon-canonical-art { width: 40px; height: 40px; } .lab-target > .lab-target__art, .lab-grid button > .lab-grid__art { display: block; max-width: 72%; max-height: 72%; object-fit: contain; pointer-events: none; user-select: none; filter: drop-shadow(0 4px 6px rgba(0, 13, 27, .28)); } .game-screen[data-main-hud="v70"] .world-wallet-currency.is-gems .resource-art-v74--league { width: 32px !important; height: 32px !important; } @media (max-width: 760px) { .player-action-wheel__item > .pokemon-canonical-art:first-child { width: 30px; height: 30px; } .game-screen[data-main-hud="v70"] .world-wallet-currency.is-gems .resource-art-v74--league { width: 25px !important; height: 25px !important; } } @media (min-width: 761px) and (max-width: 980px) { .game-screen[data-main-hud="v70"] .world-wallet-currency.is-gems .resource-art-v74--league { width: 22px !important; height: 22px !important; } } @media (prefers-reduced-motion: reduce) { .player-action-wheel__item > .pokemon-canonical-art:first-child { transition: none; } } /* pk-style-source:69 */ /* /pokemon-next-mobile-v1.css */ /* * Pokémon Next mobile P1 layer. * Loaded after pokemon-next-v1.css so every rule is removable as one file. * Geometry is driven by MobileViewportController and falls back to dvh. */ @media (max-width: 760px) { html[data-ui-revision="pokemon-next"] { --pk-mobile-hit: 44px; --pk-mobile-vv-height: 100dvh; --pk-mobile-vv-width: 100vw; --pk-mobile-vv-offset-top: 0px; --pk-mobile-vv-offset-right: 0px; --pk-mobile-vv-offset-bottom: 0px; --pk-mobile-vv-offset-left: 0px; --pk-mobile-keyboard-inset: 0px; --pk-mobile-chat-reserve: calc(92px + var(--pk-safe-bottom)); } html[data-ui-revision="pokemon-next"][data-mobile-keyboard="open"] { --pk-mobile-chat-reserve: max(8px, var(--pk-safe-bottom)); } /* Chat follows the visible viewport instead of the layout viewport/OSK. */ html[data-ui-revision="pokemon-next"] .game-screen #chatPanel.chat-panel.chat-messenger { top: calc(var(--pk-mobile-vv-offset-top) + max(8px, var(--pk-safe-top))) !important; right: calc(var(--pk-mobile-vv-offset-right) + max(8px, var(--pk-safe-right))) !important; bottom: calc(var(--pk-mobile-vv-offset-bottom) + var(--pk-mobile-chat-reserve)) !important; left: calc(var(--pk-mobile-vv-offset-left) + max(8px, var(--pk-safe-left))) !important; grid-template-rows: 58px 56px minmax(0, 1fr) !important; height: auto !important; min-height: 0 !important; max-height: none !important; overscroll-behavior: contain; } html[data-ui-revision="pokemon-next"][data-mobile-keyboard="open"] .game-screen .mobile-dock { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } html[data-ui-revision="pokemon-next"] .game-screen #chatPanel > .chat-emoji-panel { right: 7px !important; bottom: 72px !important; left: 7px !important; grid-template-rows: minmax(52px, auto) 54px minmax(0, 1fr) !important; width: auto !important; height: min(44%, 320px) !important; min-height: 0 !important; max-height: calc(100% - 80px) !important; overflow: hidden !important; } html[data-ui-revision="pokemon-next"][data-mobile-keyboard="open"] .game-screen #chatPanel > .chat-emoji-panel { height: min(38%, 220px) !important; } html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-media-head { grid-template-columns: minmax(0, 1fr) auto !important; min-height: 52px !important; gap: 6px !important; } html[data-ui-revision="pokemon-next"] .game-screen #chatPanel > .chat-emoji-panel > .chat-emoji-category-rail { grid-template-columns: var(--pk-mobile-hit) minmax(0, 1fr) var(--pk-mobile-hit) !important; height: 54px !important; padding: 5px 4px !important; } html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-emoji-category-rail .chat-emoji-categories { height: var(--pk-mobile-hit) !important; } html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-head-actions > button, html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-head-search > button, html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-private-head > button, html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-reply-preview > button, html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-emoji-rail-button, html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-message-more, html[data-ui-revision="pokemon-next"] .game-screen #chatPanel #chatForm > button { width: var(--pk-mobile-hit) !important; height: var(--pk-mobile-hit) !important; min-width: var(--pk-mobile-hit) !important; min-height: var(--pk-mobile-hit) !important; } html[data-ui-revision="pokemon-next"] .game-screen #chatPanel > .chat-tabs > button, html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-popover-actions > button, html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-jump-latest { min-height: var(--pk-mobile-hit) !important; } html[data-ui-revision="pokemon-next"] .game-screen #chatPanel > .chat-tabs { padding-block: 5px !important; } html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-emoji-category-rail .chat-emoji-categories > button { min-width: var(--pk-mobile-hit) !important; height: var(--pk-mobile-hit) !important; min-height: var(--pk-mobile-hit) !important; } html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-emoji-grid > button { min-width: 0 !important; height: var(--pk-mobile-hit) !important; min-height: var(--pk-mobile-hit) !important; } html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-message:not(.is-notice) { grid-template-columns: 34px minmax(0, 1fr) var(--pk-mobile-hit) !important; } html[data-ui-revision="pokemon-next"] .game-screen #chatPanel :is(#chatInput, #chatSearchInput) { font-size: 16px !important; } /* Starter selection: the parent owns insets; the card no longer overflows them. */ html[data-ui-revision="pokemon-next"] .starter-dialog.is-open { inset: var(--pk-mobile-vv-offset-top) var(--pk-mobile-vv-offset-right) var(--pk-mobile-vv-offset-bottom) var(--pk-mobile-vv-offset-left) !important; padding: max(6px, var(--pk-safe-top)) max(6px, var(--pk-safe-right)) max(6px, var(--pk-safe-bottom)) max(6px, var(--pk-safe-left)) !important; } html[data-ui-revision="pokemon-next"] .starter-experience { width: 100% !important; max-height: calc( var(--pk-mobile-vv-height) - max(6px, var(--pk-safe-top)) - max(6px, var(--pk-safe-bottom)) ) !important; margin: 0 !important; } html[data-ui-revision="pokemon-next"] .starter-flow-content { max-height: calc( var(--pk-mobile-vv-height) - max(6px, var(--pk-safe-top)) - max(6px, var(--pk-safe-bottom)) - 58px ) !important; } html[data-ui-revision="pokemon-next"] .starter-experience button { min-width: var(--pk-mobile-hit); min-height: var(--pk-mobile-hit); touch-action: manipulation; } /* Geodude Quarry is injected later, so important declarations keep this P1 layer authoritative. */ html[data-ui-revision="pokemon-next"] body > .quarry { inset: var(--pk-mobile-vv-offset-top) var(--pk-mobile-vv-offset-right) var(--pk-mobile-vv-offset-bottom) var(--pk-mobile-vv-offset-left) !important; box-sizing: border-box !important; padding: max(6px, var(--pk-safe-top)) max(6px, var(--pk-safe-right)) max(6px, var(--pk-safe-bottom)) max(6px, var(--pk-safe-left)) !important; } html[data-ui-revision="pokemon-next"] body > .quarry .quarry-window { max-height: 100% !important; } html[data-ui-revision="pokemon-next"] body > .quarry[data-view="game"] .quarry-window { height: 100% !important; } html[data-ui-revision="pokemon-next"] body > .quarry .quarry-grid { --tile: max( 44px, min( 68px, calc((var(--pk-mobile-vv-height) - 304px) / 6), calc((100vw - var(--pk-safe-left) - var(--pk-safe-right) - 60px) / 5) ) ) !important; } html[data-ui-revision="pokemon-next"] body > .quarry[data-view="game"] .quarry-header { height: auto !important; } html[data-ui-revision="pokemon-next"] body > .quarry :is( .quarry-header button, .quarry-hud button, .quarry-tools > button, .quarry-combinations > button, .quarry-legend > button, .quarry-overlay button, .quarry-footer button, .quarry-round button ) { min-width: var(--pk-mobile-hit) !important; min-height: var(--pk-mobile-hit) !important; touch-action: manipulation; } html[data-ui-revision="pokemon-next"] body > .quarry .quarry-header button { width: var(--pk-mobile-hit) !important; height: var(--pk-mobile-hit) !important; } html[data-ui-revision="pokemon-next"] body > .quarry .quarry-tools > .quarry-help { min-width: var(--pk-mobile-hit) !important; } /* Pidgey Flight: preserve the full Pokémon scene inside notches and rounded corners. */ html[data-ui-revision="pokemon-next"] .lab-games[data-game-mode="flight"] { inset: var(--pk-mobile-vv-offset-top) var(--pk-mobile-vv-offset-right) var(--pk-mobile-vv-offset-bottom) var(--pk-mobile-vv-offset-left) !important; width: auto !important; height: auto !important; padding: 0 !important; } html[data-ui-revision="pokemon-next"] .lab-games[data-game-mode="flight"] .lab-games__shell { width: 100% !important; height: 100% !important; grid-template-rows: auto minmax(0, 1fr) auto !important; } html[data-ui-revision="pokemon-next"] .lab-games[data-game-mode="flight"] .lab-games__header { min-height: 64px !important; padding: max(10px, var(--pk-safe-top)) max(12px, var(--pk-safe-right)) 10px max(12px, var(--pk-safe-left)) !important; } html[data-ui-revision="pokemon-next"] .lab-games[data-game-mode="flight"] .lab-games__body { padding-right: max(8px, var(--pk-safe-right)) !important; padding-left: max(8px, var(--pk-safe-left)) !important; } html[data-ui-revision="pokemon-next"] .lab-games[data-game-mode="flight"] .lab-games__footer { padding: 10px max(12px, var(--pk-safe-right)) max(10px, var(--pk-safe-bottom)) max(12px, var(--pk-safe-left)) !important; } html[data-ui-revision="pokemon-next"] .lab-games[data-game-mode="flight"] :is( .lab-games__header button, .lab-games__footer button, .lab-flight__hud button, .lab-flight__pause button ) { min-width: var(--pk-mobile-hit) !important; min-height: var(--pk-mobile-hit) !important; touch-action: manipulation; } /* Remaining P1 actions that legacy compact rules shrink below 44 CSS px. */ html[data-ui-revision="pokemon-next"] :is( .profile-v80 button, .quest-mode-tabs-v57 button, .quest-status-tabs-v57 button, .quest-type-tabs-v57 button, .quest-widget-collapse, .quest-hud-journal-v68, .quest-tracker-choice-v62 > button, .pokedex-library button, .pokedex-detail button, .dex-detail-shell button, .pokemon-detail button, .game-screen .side-panel.is-pokemon-detail-panel button, .battle-quick-item, .battle-utility-button, .battle-capture-cancel ) { min-width: var(--pk-mobile-hit) !important; min-height: var(--pk-mobile-hit) !important; touch-action: manipulation; } html[data-ui-revision="pokemon-next"] .inventory-v52 :is( button, summary, .inventory-search-clear-v54, .inventory-search-clear-v55 ) { min-width: var(--pk-mobile-hit) !important; min-height: var(--pk-mobile-hit) !important; touch-action: manipulation; } html[data-ui-revision="pokemon-next"] .inventory-v52 :is(.inventory-search-clear-v54, .inventory-search-clear-v55), html[data-ui-revision="pokemon-next"] .inventory-v52 :is(.inventory-sort-v54, .inventory-sort-v54 summary), html[data-ui-revision="pokemon-next"] .inventory-v52 .inventory-view-v54 button { width: var(--pk-mobile-hit) !important; height: var(--pk-mobile-hit) !important; } html[data-ui-revision="pokemon-next"] .inventory-v52 .inventory-view-v54 { grid-template-columns: repeat(2, var(--pk-mobile-hit)) !important; width: 97px !important; height: 50px !important; } html[data-ui-revision="pokemon-next"] .inventory-v52 .inventory-toolbar-v54 { min-height: 50px !important; flex-basis: 50px !important; } html[data-ui-revision="pokemon-next"] .inventory-v52 .inventory-categories-v52 > button, html[data-ui-revision="pokemon-next"] .inventory-v52 .inventory-capacity-v53 > button { height: var(--pk-mobile-hit) !important; min-height: var(--pk-mobile-hit) !important; } /* Keep the compact wallet geometry while extending each add action's hit box. */ html[data-ui-revision="pokemon-next"] .game-screen .world-wallet-currency > button { position: relative !important; overflow: visible !important; } html[data-ui-revision="pokemon-next"] .game-screen .world-wallet-currency > button::after { content: ""; position: absolute; top: 50%; left: 50%; width: var(--pk-mobile-hit); height: var(--pk-mobile-hit); transform: translate(-50%, -50%); } html[data-ui-revision="pokemon-next"] :where( #chatPanel, .starter-experience, .quarry, .lab-games[data-game-mode="flight"], .inventory-v52, .profile-v80, .pokedex-library, .pokedex-detail ) :where(button, [role="button"]) { -webkit-tap-highlight-color: transparent; } } @media (max-width: 380px) { html[data-ui-revision="pokemon-next"] .game-screen #chatPanel.chat-panel.chat-messenger { right: calc(var(--pk-mobile-vv-offset-right) + max(5px, var(--pk-safe-right))) !important; left: calc(var(--pk-mobile-vv-offset-left) + max(5px, var(--pk-safe-left))) !important; } html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-media-head { grid-template-columns: minmax(0, 1fr) auto !important; min-height: 52px !important; } html[data-ui-revision="pokemon-next"] .game-screen #chatPanel > .chat-emoji-panel { grid-template-rows: minmax(52px, auto) 54px minmax(0, 1fr) !important; } html[data-ui-revision="pokemon-next"] .game-screen #chatPanel .chat-emoji-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 2px !important; padding: 4px !important; } } @media (max-width: 760px) and (max-height: 520px) and (orientation: landscape) { html[data-ui-revision="pokemon-next"] .lab-games[data-game-mode="flight"] .lab-games__header { min-height: 54px !important; padding: max(5px, var(--pk-safe-top)) max(12px, var(--pk-safe-right)) 5px max(12px, var(--pk-safe-left)) !important; } html[data-ui-revision="pokemon-next"] .lab-games[data-game-mode="flight"] .lab-games__footer { padding: 5px max(12px, var(--pk-safe-right)) max(5px, var(--pk-safe-bottom)) max(12px, var(--pk-safe-left)) !important; } } /* pk-style-source:70 */ /* /pokemon-next-overhaul-v2.css */ /* * Pokémon-only P2 presentation layer. * * This file is intentionally last in index.html. It consolidates the active * player-facing shell without deleting the older revision files, so reverting * the pass is a one-line stylesheet removal. Semantic illustrations continue * to come from Pokémon, trainer and inventory raster assets; CSS draws only * neutral chrome, spacing and state feedback. */ html[data-ui-revision="pokemon-next"] { --pk2-navy: #12384f; --pk2-navy-deep: #082a3e; --pk2-blue: #158fbe; --pk2-sky: #55c9ea; --pk2-red: #df3f4c; --pk2-yellow: #f2c64d; --pk2-paper: #f8fdff; --pk2-paper-soft: #eaf7fb; --pk2-line: rgba(44, 125, 159, .23); --pk2-shadow: 0 22px 64px rgba(3, 34, 53, .26); --pk2-font: "Onest PokePark", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; color-scheme: light; } html[data-ui-revision="pokemon-next"] :where(body, button, input, select, textarea) { font-family: var(--pk2-font) !important; } html[data-ui-revision="pokemon-next"] :where(button, [role="button"], a) { touch-action: manipulation; } html[data-ui-revision="pokemon-next"] :where(.home-screen, .game-screen, .lab-games, .dialogue-layer, .starter-dialog) { -webkit-tap-highlight-color: transparent; } /* Dynamic semantic raster mounts must never fall back to their source bitmap dimensions (several Pokédex images are 550 × 724). */ html[data-ui-revision="pokemon-next"] .pokemon-semantic-raster { display: block; flex: 0 0 auto; width: 1.25em; height: 1.25em; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; image-rendering: auto; pointer-events: none; -webkit-user-drag: none; } html[data-ui-revision="pokemon-next"] #chatPanel :where(.chat-notice-raster, .chat-action-icon) { width: 18px !important; height: 18px !important; } html[data-ui-revision="pokemon-next"] #chatPanel :where(.chat-log-wrap, .chat-log) { overflow-x: hidden !important; } /* ---------- Continue screen: compact trainer dossier ---------- */ html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) { color: var(--pk2-navy); } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .home-vignette { background: linear-gradient(180deg, rgba(4, 28, 40, .08), rgba(4, 25, 38, .55)), radial-gradient(circle at 50% 36%, transparent 24%, rgba(4, 27, 41, .18) 78%); } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .home-topbar { isolation: isolate; } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .brand-mark, html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .account-chip { border: 1px solid rgba(255, 255, 255, .8); background: rgba(248, 253, 255, .92) !important; box-shadow: 0 12px 30px rgba(4, 31, 48, .2), inset 0 1px 0 #fff !important; backdrop-filter: blur(14px); } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-home { gap: 12px; } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-hero, html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-card { border: 1px solid rgba(127, 201, 226, .46) !important; background: linear-gradient(145deg, rgba(248, 253, 255, .96), rgba(231, 247, 252, .93)) !important; color: var(--pk2-navy) !important; box-shadow: var(--pk2-shadow), inset 0 1px 0 #fff !important; backdrop-filter: blur(16px); } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-hero { position: relative; overflow: hidden; } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-hero::before { content: ""; position: absolute; width: 230px; height: 230px; right: -98px; top: -122px; border: 28px solid rgba(223, 63, 76, .07); border-radius: 50%; box-shadow: inset 0 0 0 17px rgba(18, 56, 79, .045); pointer-events: none; } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-eyebrow, html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-card > small { color: var(--pk2-blue) !important; font-weight: 900; letter-spacing: .105em; } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-hero h1, html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-card b { color: var(--pk2-navy-deep) !important; text-wrap: balance; } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-hero p, html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-card p, html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-profile-strip span { color: #557488 !important; } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-profile-strip article { border: 1px solid rgba(62, 140, 173, .18) !important; background: rgba(255, 255, 255, .52) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82) !important; } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-profile-strip small { color: #6c8a9c !important; } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-continue, html[data-ui-revision="pokemon-next"] :where(.lab-games__footer > button, .dialogue-actions > button:last-child) { border: 1px solid rgba(255, 255, 255, .38) !important; background: linear-gradient(180deg, #28aee0, #087eaf) !important; color: #fff !important; box-shadow: 0 12px 24px rgba(6, 107, 150, .27), inset 0 1px 0 rgba(255, 255, 255, .36) !important; } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-continue:hover { filter: brightness(1.045); transform: translateY(-1px); } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-card.is-featured { border-top: 3px solid var(--pk2-yellow); } /* ---------- World HUD: legibility and non-overlapping notifications ---------- */ html[data-ui-revision="pokemon-next"] #app[data-screen="game"] .toast { z-index: var(--pk-z-toast); border: 1px solid rgba(126, 207, 234, .42); background: rgba(8, 42, 62, .94); box-shadow: 0 14px 34px rgba(2, 23, 38, .32), inset 0 1px 0 rgba(255, 255, 255, .14); color: #f5fcff; font-weight: 760; line-height: 1.3; text-align: center; } html[data-ui-revision="pokemon-next"] .game-screen .world-topbar, html[data-ui-revision="pokemon-next"] .game-screen .world-minimap, html[data-ui-revision="pokemon-next"] .game-screen .quest-widget, html[data-ui-revision="pokemon-next"] .game-screen .mobile-dock, html[data-ui-revision="pokemon-next"] .game-screen .desktop-dock { isolation: isolate; } html[data-ui-revision="pokemon-next"] .game-screen .player-chip, html[data-ui-revision="pokemon-next"] .game-screen .world-wallet, html[data-ui-revision="pokemon-next"] .game-screen .quest-widget { border-color: rgba(111, 193, 222, .45) !important; box-shadow: 0 13px 32px rgba(3, 30, 47, .24), inset 0 1px 0 rgba(255, 255, 255, .8) !important; } html[data-ui-revision="pokemon-next"] .game-screen .player-chip-avatar, html[data-ui-revision="pokemon-next"] .game-screen .resource-art-v74, html[data-ui-revision="pokemon-next"] .game-screen .pokemon-nav-art { image-rendering: auto; } /* ---------- Shared Pokémon window chrome ---------- */ html[data-ui-revision="pokemon-next"] :where( .side-panel.hud-window, .professor-transfer-card-shell, .controls-tutorial-card, .pvp-invite__card ) { border: 1px solid rgba(100, 184, 215, .44) !important; background: linear-gradient(150deg, rgba(249, 253, 255, .98), rgba(231, 246, 251, .97)) !important; box-shadow: var(--pk2-shadow), inset 0 1px 0 #fff !important; color: var(--pk2-navy) !important; } html[data-ui-revision="pokemon-next"] :where( .panel-close, .professor-transfer-card-shell > header button, .controls-tutorial-card > header button ) { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; border: 1px solid rgba(63, 137, 168, .16) !important; border-radius: 14px !important; background: rgba(220, 239, 247, .78) !important; color: var(--pk2-navy) !important; } html[data-ui-revision="pokemon-next"] .dialogue-layer .dialogue-card { border: 1px solid rgba(105, 193, 222, .52); background: linear-gradient(155deg, rgba(250, 254, 255, .98), rgba(228, 245, 251, .97)); box-shadow: 0 30px 90px rgba(2, 26, 43, .38), inset 0 1px 0 #fff; color: var(--pk2-navy); } html[data-ui-revision="pokemon-next"] .dialogue-layer .dialogue-card::before { background: linear-gradient(90deg, var(--pk2-red), #f26b67 32%, var(--pk2-yellow) 32% 43%, var(--pk2-blue) 43%); } html[data-ui-revision="pokemon-next"] .dialogue-layer :where(#dialogueSpeaker, #dialogueText) { color: var(--pk2-navy-deep); } html[data-ui-revision="pokemon-next"] .dialogue-layer :where(#dialogueProgress, .dialogue-hint) { color: #668497; } html[data-ui-revision="pokemon-next"] .dialogue-actions > button:first-child { border: 1px solid var(--pk2-line) !important; background: rgba(255, 255, 255, .74) !important; color: var(--pk2-navy) !important; } /* ---------- Laboratory terminal: Pokémon research presentation ---------- */ html[data-ui-revision="pokemon-next"] .lab-games { --lab-ink: var(--pk2-navy); --lab-muted: #58798b; color: var(--lab-ink); } html[data-ui-revision="pokemon-next"] .lab-games__shade { background: rgba(4, 27, 41, .68); backdrop-filter: blur(9px) saturate(.88); } html[data-ui-revision="pokemon-next"] .lab-games__shell { border: 1px solid rgba(116, 202, 231, .58); border-radius: 26px; background: linear-gradient(150deg, #f9fdff, #e5f4f9 72%); box-shadow: 0 32px 110px rgba(2, 27, 44, .42), inset 0 1px 0 #fff; color: var(--lab-ink); } html[data-ui-revision="pokemon-next"] .lab-games__shell::before { content: ""; position: absolute; z-index: 4; top: 0; right: 88px; left: 88px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, var(--lab-accent), transparent); opacity: .9; pointer-events: none; } html[data-ui-revision="pokemon-next"] .lab-games__header { min-height: 72px; border-bottom: 1px solid var(--pk2-line); background: rgba(248, 253, 255, .88); } html[data-ui-revision="pokemon-next"] .lab-games__emblem { overflow: visible; border: 1px solid color-mix(in srgb, var(--lab-accent) 44%, #b8dce8); background: color-mix(in srgb, var(--lab-accent) 10%, #f8fdff); box-shadow: inset 0 1px 0 #fff, 0 7px 16px rgba(6, 62, 85, .1); } html[data-ui-revision="pokemon-next"] .lab-games__header h2 { color: var(--pk2-navy-deep); font-family: var(--pk2-font) !important; font-weight: 880; letter-spacing: -.035em; } html[data-ui-revision="pokemon-next"] .lab-games__header small { color: color-mix(in srgb, var(--lab-accent) 72%, var(--pk2-navy)); } html[data-ui-revision="pokemon-next"] .lab-games__header > button { width: 44px; height: 44px; min-width: 44px; border: 1px solid rgba(61, 139, 171, .14); border-radius: 14px; background: #e3f1f6; color: var(--pk2-navy); font-size: 25px; line-height: 1; } html[data-ui-revision="pokemon-next"] .lab-games__body { background: radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--lab-accent) 11%, transparent), transparent 32%), linear-gradient(150deg, #eff9fc, #e3f2f7); } html[data-ui-revision="pokemon-next"] .lab-games__brief, html[data-ui-revision="pokemon-next"] .lab-games__board { border: 1px solid rgba(82, 159, 190, .19); background: rgba(250, 254, 255, .82); color: var(--lab-ink); box-shadow: inset 0 1px 0 #fff; } html[data-ui-revision="pokemon-next"] .lab-games__brief p, html[data-ui-revision="pokemon-next"] .lab-result p { color: var(--lab-muted); } html[data-ui-revision="pokemon-next"] .lab-games__arena:not(.lab-flight) { border: 1px solid color-mix(in srgb, var(--lab-accent) 25%, #b2d7e4); background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--lab-accent) 16%, #f8fdff), #e5f3f8 74%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 10px 24px rgba(5, 54, 76, .09); } html[data-ui-revision="pokemon-next"] .lab-result { position: relative; gap: 10px; } html[data-ui-revision="pokemon-next"] .lab-result::before { content: "ИССЛЕДОВАНИЕ ПРОФЕССОРА ОУКА"; color: color-mix(in srgb, var(--lab-accent) 66%, var(--pk2-navy)); font-size: 10px; font-weight: 900; letter-spacing: .12em; } html[data-ui-revision="pokemon-next"] .lab-result > img, html[data-ui-revision="pokemon-next"] .lab-result > .pokemon-canonical-art { width: min(120px, 28%); height: min(120px, 28%); filter: drop-shadow(0 12px 18px rgba(6, 50, 72, .2)); } html[data-ui-revision="pokemon-next"] .lab-result b { color: var(--pk2-navy-deep); } html[data-ui-revision="pokemon-next"] .lab-result em { border: 1px solid color-mix(in srgb, var(--lab-accent) 28%, #c4e0e9); background: color-mix(in srgb, var(--lab-accent) 10%, #f8fdff); color: var(--pk2-navy); } html[data-ui-revision="pokemon-next"] .lab-games__board h3 { color: color-mix(in srgb, var(--lab-accent) 76%, var(--pk2-navy)); } html[data-ui-revision="pokemon-next"] .lab-games__board li { border: 1px solid rgba(58, 138, 170, .13); background: rgba(236, 248, 252, .88); color: var(--pk2-navy); } html[data-ui-revision="pokemon-next"] .lab-games__board li.is-player { border-color: color-mix(in srgb, var(--lab-accent) 70%, #7fb5c8); outline: 0; background: color-mix(in srgb, var(--lab-accent) 12%, #f8fdff); } html[data-ui-revision="pokemon-next"] .lab-games__footer { border-top: 1px solid var(--pk2-line); background: rgba(248, 253, 255, .94); color: var(--pk2-navy); } html[data-ui-revision="pokemon-next"] .lab-games__footer small { color: #6a8798; } html[data-ui-revision="pokemon-next"] .lab-games__footer > button { min-height: 48px; } /* Flight keeps its authored scene art; only its surrounding research device is unified. */ html[data-ui-revision="pokemon-next"] .lab-games[data-game-mode="flight"] .lab-games__body { background: #eaf7fb; } html[data-ui-revision="pokemon-next"] .lab-games[data-game-mode="flight"] .lab-games__arena { border-color: rgba(63, 166, 204, .45); } /* ---------- Mobile composition ---------- */ @media (max-width: 760px) { html[data-ui-revision="pokemon-next"] #app[data-screen="game"] .toast { top: calc(max(8px, var(--pk-safe-top)) + 112px) !important; width: max-content; max-width: calc(100vw - 136px); min-height: 34px; padding: 8px 12px; border-radius: 12px; transform: translate(-50%, -8px); font-size: 10px; } html[data-ui-revision="pokemon-next"] #app[data-screen="game"] .toast.is-open { transform: translate(-50%, 0); } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-home { gap: 8px; } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-hero, html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-card { border-radius: 19px; } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-profile-strip { gap: 6px; } html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-profile-strip article { border-radius: 12px; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) { padding: max(5px, var(--pk-safe-top)) max(5px, var(--pk-safe-right)) max(5px, var(--pk-safe-bottom)) max(5px, var(--pk-safe-left)); } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__shell { width: 100%; height: 100%; border-radius: 20px; grid-template-rows: auto minmax(0, 1fr) auto; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__header { min-height: 62px; gap: 9px; padding: 8px 10px; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__emblem { width: 44px; height: 44px; flex: 0 0 44px; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__header h2 { max-width: calc(100vw - 126px); overflow: hidden; font-size: clamp(16px, 4.8vw, 21px); text-overflow: ellipsis; white-space: nowrap; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__header small { display: block; max-width: calc(100vw - 126px); overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__body { grid-template-columns: 1fr; grid-template-rows: auto minmax(210px, 1fr) minmax(108px, auto); gap: 7px; padding: 7px; overflow: hidden; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__brief { grid-column: auto; min-height: 0; padding: 7px 9px; font-size: 10px; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__arena { min-height: 210px; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__board { min-height: 0; max-height: 142px; padding: 8px; overflow: auto; overscroll-behavior: contain; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__footer { min-height: 62px; gap: 10px; padding: 7px 9px max(7px, var(--pk-safe-bottom)); } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__footer span { min-width: 46px; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__footer b { font-size: 17px; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__footer > button { min-width: 0; min-height: 48px; padding-inline: 14px; border-radius: 14px; font-size: 11px; } html[data-ui-revision="pokemon-next"] .dialogue-layer .dialogue-card { max-height: calc(100dvh - max(12px, var(--pk-safe-top)) - max(12px, var(--pk-safe-bottom))); } } @media (max-width: 390px) { html[data-ui-revision="pokemon-next"] #app[data-screen="game"] .toast { top: calc(max(6px, var(--pk-safe-top)) + 102px) !important; max-width: calc(100vw - 112px); font-size: 9px; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__brief { display: none; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__body { grid-template-rows: minmax(230px, 1fr) minmax(104px, auto); } } @media (max-width: 760px) and (max-height: 560px) and (orientation: landscape) { html[data-ui-revision="pokemon-next"] #app[data-screen="game"] .toast { top: calc(max(6px, var(--pk-safe-top)) + 58px) !important; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__shell { grid-template-rows: 54px minmax(0, 1fr) 58px; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__body { grid-template-columns: minmax(0, 1fr) 190px; grid-template-rows: minmax(0, 1fr); } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__brief { display: none; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__arena { min-height: 0; } html[data-ui-revision="pokemon-next"] .lab-games:not([data-game-mode="flight"]) .lab-games__board { max-height: none; } } @media (prefers-reduced-motion: reduce) { html[data-ui-revision="pokemon-next"] .home-screen:is([data-mode="dashboard"], [data-mode="returning"]) .adventure-continue { transition: none !important; } } /* pk-style-source:71 */ /* /battle-pokemon-v1.css */ /* * Pokémon battle surface v1. * * Terminal, removable ownership layer for the live battle HUD. Historical * battle files stay intact for rollback; this file owns only presentation, * concrete Pokémon raster art and responsive containment. */ html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] { --pk-battle-blue: #148fc5; --pk-battle-blue-deep: #086b9d; --pk-battle-red: #df4252; --pk-battle-gold: #f3bd3b; --pk-battle-ink: #12384e; --pk-battle-muted: #5b7989; --pk-battle-line: rgba(24, 126, 167, .3); --pk-battle-surface: rgba(247, 253, 255, .96); --pk-battle-surface-strong: rgba(255, 255, 255, .985); --pk-battle-shadow: 0 18px 52px rgba(3, 28, 45, .3); --bui-font: var(--pk-font); --battle-modal-width: min(1180px, calc(100vw - 32px)); --battle-modal-height: min(760px, calc(100dvh - 32px)); color: var(--pk-battle-ink); } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-shell, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-shell * { box-sizing: border-box; font-family: var(--pk-font) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-shell { width: var(--battle-modal-width) !important; height: var(--battle-modal-height) !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; border: 1px solid rgba(122, 211, 239, .62) !important; border-radius: 24px !important; background: rgba(7, 36, 53, .72) !important; box-shadow: var(--pk-battle-shadow), inset 0 1px 0 rgba(255, 255, 255, .2) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-stage { inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; border-radius: inherit !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] :is(.battle-combat-raster, .battle-result-raster, .battle-quick-raster) { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center !important; user-select: none; -webkit-user-drag: none; pointer-events: none; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-loader-emblem { display: grid !important; place-items: center !important; overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-loader-emblem > img { width: 76px !important; height: 76px !important; object-fit: contain !important; filter: drop-shadow(0 10px 16px rgba(3, 35, 52, .32)); animation: pk-battle-ball-ready 1.2s cubic-bezier(.38, .05, .23, .98) infinite; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-loader-emblem::before, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-loader-emblem::after { content: none !important; display: none !important; } @keyframes pk-battle-ball-ready { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-4px) rotate(-8deg); } 65% { transform: translateY(-2px) rotate(8deg); } } /* Trainer-card hierarchy above the arena. */ html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-versus-card { min-width: 0 !important; max-width: min(340px, calc(100% - 24px)) !important; overflow: hidden !important; border: 1px solid rgba(122, 211, 239, .48) !important; border-top: 3px solid var(--pk-battle-red) !important; border-radius: 16px !important; color: #eefaff !important; background: linear-gradient(145deg, rgba(15, 64, 87, .94), rgba(5, 35, 53, .96)) !important; box-shadow: 0 10px 26px rgba(0, 24, 40, .26) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-versus-card strong { max-width: 100% !important; overflow: hidden !important; color: #f4fbff !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] #battleModeIcon { width: 28px !important; height: 28px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-health > article { min-width: 0 !important; overflow: visible !important; border: 1px solid var(--pk-battle-line) !important; border-top: 3px solid var(--fighter-accent, var(--pk-battle-blue)) !important; border-radius: 17px !important; color: var(--pk-battle-ink) !important; background: var(--pk-battle-surface-strong) !important; box-shadow: 0 10px 26px rgba(7, 43, 61, .18), inset 0 1px 0 #fff !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-health > article::after { background: url('/assets/v2.9.11/items/poke-ball.png') center / 112px 112px no-repeat !important; -webkit-mask: none !important; mask: none !important; opacity: .035 !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-fighter-identity, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-fighter-identity > header { min-width: 0 !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-fighter-identity > header > b { display: block !important; min-width: 0 !important; overflow: hidden !important; color: var(--pk-battle-ink) !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-fighter-identity > header > em, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-vital > span > :is(b, strong, small), html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-exp > span > :is(b, small) { color: var(--pk-battle-muted) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-vital > span > i, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-exp > span > i { width: 24px !important; height: 24px !important; min-width: 24px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-card-status-area { min-width: 0 !important; overflow: visible !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-statuses { min-width: 0 !important; overflow-x: auto !important; overflow-y: visible !important; scrollbar-width: none; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-statuses::-webkit-scrollbar { display: none; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-status-icon, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-status-icon > img { width: 24px !important; height: 24px !important; } /* One clean Pokédex command tray instead of nested futuristic panels. */ html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-command-deck { max-width: calc(100% - 24px) !important; min-width: 0 !important; overflow: visible !important; border: 1px solid rgba(74, 161, 193, .46) !important; border-top: 4px solid var(--pk-battle-blue) !important; border-radius: 19px !important; color: var(--pk-battle-ink) !important; background: linear-gradient(100deg, rgba(255, 255, 255, .98), rgba(235, 248, 252, .97)), var(--pk-battle-surface) !important; box-shadow: 0 14px 34px rgba(3, 35, 52, .25), inset 0 1px 0 #fff !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] :is(.combat-live-controls, .combat-main-row, .combat-skills-panel, .combat-items-panel, .combat-utility-panel) { min-width: 0 !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] :is(.combat-skills-panel, .combat-items-panel) { border-color: rgba(30, 126, 166, .18) !important; background: transparent !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] :is(.combat-skills-panel, .combat-items-panel) > header b, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-skill-name, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-energy > span > :is(small, b) { color: var(--pk-battle-ink) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-action-button { min-width: 0 !important; border-radius: 13px !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-action-button:focus-visible, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] :is(.combat-item-button, .combat-utility-actions > button, .mobile-combat-tabs > button, .battle-result-action):focus-visible { outline: 3px solid rgba(28, 164, 216, .72) !important; outline-offset: 2px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-item-button { min-width: 0 !important; overflow: visible !important; border-color: rgba(40, 132, 170, .25) !important; background: rgba(255, 255, 255, .72) !important; box-shadow: inset 0 1px 0 #fff !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-item-button > span:first-child { overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-quick-raster { filter: drop-shadow(0 4px 5px rgba(11, 45, 62, .22)); } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-utility-actions > button { min-width: 44px !important; min-height: 44px !important; border: 1px solid rgba(36, 132, 171, .24) !important; border-radius: 11px !important; color: var(--pk-battle-ink) !important; background: rgba(255, 255, 255, .74) !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-utility-actions > button > i { width: 30px !important; height: 30px !important; border: 0 !important; background: transparent !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] #cancelBattle { border-color: rgba(213, 73, 84, .28) !important; color: #96303b !important; background: rgba(255, 239, 241, .9) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-resource-row { min-width: 0 !important; border-color: rgba(36, 132, 171, .18) !important; background: rgba(226, 245, 251, .68) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-energy-marker { object-fit: contain !important; filter: drop-shadow(0 0 4px rgba(29, 166, 218, .5)) !important; } /* Pokémon Trainer / Pokédex tactics sheet. */ html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-tactics { min-width: 0 !important; max-width: calc(100% - 16px) !important; max-height: calc(100% - 24px) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; border: 1px solid var(--pk-battle-line) !important; border-top: 4px solid var(--pk-battle-red) !important; border-radius: 17px !important; color: var(--pk-battle-ink) !important; background: var(--pk-battle-surface-strong) !important; box-shadow: 0 18px 46px rgba(3, 31, 48, .3) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-tactics :is(b, p, small, footer) { overflow-wrap: anywhere; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-tactics :is(header b, .battle-tactic-modes b, .battle-tactic-rules b) { color: var(--pk-battle-ink) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-tactics :is(header small, .battle-tactic-modes small, .battle-tactic-rules small, footer, p) { color: var(--pk-battle-muted) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-tactic-modes > button { min-height: 64px !important; min-width: 0 !important; border-color: rgba(35, 133, 171, .24) !important; background: rgba(235, 248, 252, .7) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-tactic-modes > button[aria-pressed="true"] { border-color: var(--pk-battle-blue) !important; background: rgba(211, 241, 251, .88) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-tactic-modes > button > i { width: 48px !important; height: 48px !important; overflow: visible !important; } /* Pause / surrender remain legible over every arena background. */ html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-pause-overlay, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-surrender-confirm { backdrop-filter: none !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-pause-status { max-width: calc(100% - 24px) !important; border: 1px solid rgba(124, 209, 238, .42) !important; border-top: 4px solid var(--pk-battle-red) !important; border-radius: 18px !important; color: #f3fbff !important; background: rgba(7, 42, 61, .92) !important; box-shadow: 0 18px 45px rgba(0, 23, 38, .34) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-pause-glyph { display: block !important; width: 58px !important; height: 58px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-pause-glyph > svg { display: block !important; width: 100% !important; height: 100% !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-surrender-confirm > article { width: min(460px, calc(100% - 24px)) !important; max-height: calc(100% - 24px) !important; overflow: auto !important; border: 1px solid rgba(210, 77, 89, .3) !important; border-top: 4px solid var(--pk-battle-red) !important; border-radius: 18px !important; color: var(--pk-battle-ink) !important; background: var(--pk-battle-surface-strong) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-surrender-confirm > article > i { width: 54px !important; height: 54px !important; border: 0 !important; background: transparent !important; } /* Result is a compact League report, never a second full-screen dashboard. */ html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] #battleDecision:not([hidden]) { display: grid !important; place-items: center !important; overflow: hidden !important; padding: clamp(10px, 2vw, 24px) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] #battleDecision .battle-result-card { width: min(680px, 100%) !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: 100% !important; align-self: center !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; border: 1px solid rgba(48, 143, 180, .32) !important; border-top: 5px solid var(--pk-battle-blue) !important; border-radius: 21px !important; color: var(--pk-battle-ink) !important; background: linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(233, 248, 252, .98)), var(--pk-battle-surface-strong) !important; box-shadow: 0 22px 58px rgba(2, 28, 44, .34) !important; scrollbar-gutter: stable; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-result-outcome { min-width: 0 !important; border-bottom: 1px solid rgba(34, 129, 168, .18) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-result-emblem { width: 82px !important; height: 82px !important; overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-result-copy { min-width: 0 !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-result-copy > :is(b, em) { display: block !important; max-width: 100% !important; overflow: hidden !important; color: var(--pk-battle-ink) !important; text-overflow: ellipsis !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-result-copy > em, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-result-drops header { color: var(--pk-battle-muted) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-reward-list { min-width: 0 !important; overflow-x: hidden !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-reward-drop { min-width: 0 !important; border: 1px solid rgba(41, 132, 169, .18) !important; border-radius: 13px !important; color: var(--pk-battle-ink) !important; background: rgba(255, 255, 255, .72) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-reward-drop :is(b, strong) { color: var(--pk-battle-ink) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-reward-drop small { color: var(--pk-battle-muted) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-reward-drop-art { width: 54px !important; height: 54px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-result-actions { min-width: 0 !important; gap: 9px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-result-action { min-width: 0 !important; min-height: 50px !important; border-radius: 13px !important; color: #f7fcff !important; background: linear-gradient(135deg, var(--pk-battle-blue), var(--pk-battle-blue-deep)) !important; box-shadow: 0 8px 18px rgba(11, 111, 154, .22) !important; touch-action: manipulation; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-capture-action { color: #692c32 !important; background: linear-gradient(135deg, #fff0f1, #ffd9dd) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-result-action > i { width: 42px !important; height: 42px !important; border: 0 !important; background: transparent !important; } /* Capture controls use real Poké Ball artwork and remain touch safe. */ html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-capture-panel { min-width: 0 !important; overflow: hidden !important; border-color: var(--pk-battle-line) !important; color: var(--pk-battle-ink) !important; background: var(--pk-battle-surface-strong) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-capture-balls { min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-inline: contain; scrollbar-width: thin; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-capture-balls > button, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-capture-cancel { min-width: 44px !important; min-height: 44px !important; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Tablet: keep two readable fighter cards and a single compact tray. */ @media (min-width: 761px) and (max-width: 1100px) { html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] { --battle-modal-width: calc(100vw - 20px); --battle-modal-height: calc(100dvh - 20px); } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-health > article { width: calc(50% - 92px) !important; min-width: 220px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-command-deck { width: min(820px, calc(100% - 20px)) !important; } } /* Phone portrait: the arena owns the visible viewport and every interactive surface fits without horizontal page scroll. */ @media (max-width: 760px) { html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] { --battle-modal-width: var(--pk-mobile-vv-width, 100vw); --battle-modal-height: var(--pk-mobile-vv-height, 100dvh); } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-shell { left: var(--pk-mobile-vv-offset-left, 0) !important; top: var(--pk-mobile-vv-offset-top, 0) !important; width: var(--battle-modal-width) !important; height: var(--battle-modal-height) !important; max-width: 100vw !important; max-height: 100dvh !important; border: 0 !important; border-radius: 0 !important; transform: none !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-stage { border-radius: 0 !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-health { inset: max(6px, var(--pk-safe-top)) 6px auto !important; width: auto !important; min-width: 0 !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-health > article { width: calc(50% - 4px) !important; min-width: 0 !important; max-width: none !important; padding: 7px !important; border-radius: 13px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-fighter-identity > header > b { font-size: clamp(12px, 3.5vw, 15px) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-fighter-types .pokemon-type-badge b, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-exp > span > b { display: none !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-versus-card { top: max(6px, var(--pk-safe-top)) !important; width: min(132px, 31vw) !important; min-width: 0 !important; padding-inline: 7px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-versus-card > strong, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-versus-card > em { display: none !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-command-deck { right: max(6px, var(--pk-safe-right)) !important; bottom: max(6px, var(--pk-safe-bottom)) !important; left: max(6px, var(--pk-safe-left)) !important; width: auto !important; max-width: none !important; min-width: 0 !important; border-radius: 16px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-main-row { min-width: 0 !important; overflow: hidden !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-skills, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-item-grid { width: 100% !important; min-width: 0 !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-skills { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-item-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-skill-name { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .mobile-combat-tabs > button { min-width: 0 !important; min-height: 44px !important; border-radius: 10px !important; color: var(--pk-battle-ink) !important; touch-action: manipulation; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .mobile-combat-tabs > button > i { width: 28px !important; height: 28px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-tactics { inset: max(6px, var(--pk-safe-top)) max(6px, var(--pk-safe-right)) max(6px, var(--pk-safe-bottom)) max(6px, var(--pk-safe-left)) !important; width: auto !important; max-width: none !important; max-height: none !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-tactic-modes { grid-template-columns: 1fr 1fr !important; min-width: 0 !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] #battleDecision:not([hidden]) { padding: max(8px, var(--pk-safe-top)) max(8px, var(--pk-safe-right)) max(8px, var(--pk-safe-bottom)) max(8px, var(--pk-safe-left)) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] #battleDecision .battle-result-card { width: 100% !important; max-height: 100% !important; padding: 12px !important; border-radius: 17px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-result-emblem { width: 64px !important; height: 64px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-result-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-result-action { min-height: 48px !important; } } /* Very narrow and short screens preserve the arena by trimming optional copy, never by shrinking hit targets below 44 px. */ @media (max-width: 380px), (max-height: 650px) { html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-result-copy > em, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-reward-drop small, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-capture-copy > em { display: none !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-result-card, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-tactics, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-surrender-confirm > article { scrollbar-gutter: auto; } } @media (max-width: 900px) and (max-height: 650px) and (orientation: landscape) { html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] { --battle-modal-width: 100vw; --battle-modal-height: 100dvh; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-shell { width: 100vw !important; height: 100dvh !important; border: 0 !important; border-radius: 0 !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .battle-health > article { max-height: 116px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] .combat-command-deck { right: 6px !important; bottom: max(4px, var(--pk-safe-bottom)) !important; left: 6px !important; width: auto !important; max-width: none !important; } } @media (hover: none) and (pointer: coarse) { html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] button { -webkit-tap-highlight-color: transparent; } } @media (prefers-reduced-motion: reduce) { html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] *, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] *::before, html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ------------------------------------------------------------------------- Live geometry guard The historic battle stack still renders a single-enemy matchup banner even though the two fighter cards already own that information. Keeping both creates a second, enormous pair of portraits over the arena, so the terminal skin retires only that duplicate. Co-op target controls remain untouched. Older mobile layers also center the command deck with translateX(-50%). Once the terminal skin switches to left/right safe-area insets that transform must be explicitly cleared or half of the controls leave the viewport. ------------------------------------------------------------------------- */ html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] #battleTargets.is-matchup-summary { display: none !important; } html[data-ui-revision="pokemon-next"] body.is-battling #battleHud[data-pokemon-battle="v1"] #battleRosterPanel { left: 12px !important; right: auto !important; transform: none !important; } @media (max-width: 760px) { html[data-ui-revision="pokemon-next"] body.is-battling #battleHud[data-pokemon-battle="v1"] #battleRosterPanel { left: max(5px, var(--pk-safe-left)) !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] #battleCommandDeck.combat-command-deck { inset: auto max(6px, var(--pk-safe-right)) max(6px, var(--pk-safe-bottom)) max(6px, var(--pk-safe-left)) !important; width: auto !important; max-width: none !important; margin: 0 !important; transform: none !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] #battleLiveControls :is(.combat-action-button, .combat-item-button) > kbd { display: none !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] #battleQuickItems { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 3px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] #battleQuickItems .combat-item-button { width: auto !important; min-width: 0 !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] #battleDecision:not([hidden]) { display: grid !important; place-items: center !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] #battleDecision .battle-result-card { align-self: center !important; height: auto !important; min-height: 0 !important; max-height: calc(100% - 16px) !important; } } @media (max-width: 900px) and (max-height: 650px) and (orientation: landscape) { html[data-ui-revision="pokemon-next"] body.is-battling #battleHud[data-pokemon-battle="v1"] #battleRosterPanel { left: 6px !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-pokemon-battle="v1"] #battleCommandDeck.combat-command-deck { inset: auto 6px max(4px, var(--pk-safe-bottom)) 6px !important; width: auto !important; max-width: none !important; margin: 0 !important; transform: none !important; } } /* pk-style-source:72 */ /* /pokemon-social-surfaces-v1.css */ /* Pokémon social surfaces v1 Inventory, quest journal, trainer profiles and social/menu chrome only. This file is deliberately loaded after the legacy layers so each window has one final responsive owner instead of accumulating another component tree. */ :is( .inventory-v52, .quest-journal-polish-v68, .profile-v80, .chat-messenger, .world-rail ) { font-family:"Onest PokePark","Segoe UI Variable","Segoe UI",system-ui,sans-serif; } :is( .inventory-v52 button, .quest-journal-polish-v68 button, .profile-v80 button, .chat-messenger button, .world-rail button ) { -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none; } /* Semantic raster art must behave like an icon, never like an unbounded photo. */ :is( .inventory-v52, .quest-journal-polish-v68, .profile-v80, .chat-messenger, .world-rail ) :is( .pokemon-semantic-raster, .pokemon-ui-raster, .profile-v80-icon, .quest-type-graphic-v61, .quest-reward-icon-v61, .pokemon-social-raster, .inventory-category-icon, .chat-emoji-category-raster ) { display:block; max-width:100%; max-height:100%; object-fit:contain; object-position:center; background:transparent; } /* Pokémon dossier art stays legible without inheriting legacy SVG stretch rules. */ .dex-innate-card > img, .pokemon-training-v46 .pokemon-section-title > strong img { object-fit:contain!important; } .pokemon-genome-visual-v47 { display:grid!important; place-items:center; -webkit-mask-image:none!important; mask-image:none!important; } .pokemon-genome-visual-v47::after { display:none!important; } .pokemon-genome-visual-v47 > img { width:58px!important; max-width:58px!important; height:58px!important; object-fit:contain!important; animation:pokemon-specimen-float 2.8s ease-in-out infinite!important; } @keyframes pokemon-specimen-float { 0%,100% { transform:translateY(1px) rotate(-2deg); } 50% { transform:translateY(-3px) rotate(2deg); } } /* -------------------------------------------------------------------------- Inventory: bounded Pokémon item art + a single catalogue scroller. -------------------------------------------------------------------------- */ .inventory-v52 { --pp-inventory-red:#e44b51; --pp-inventory-blue:#248fc9; --pp-inventory-ink:#173d55; --pp-inventory-muted:#6d8798; --pp-inventory-line:rgba(50,118,151,.18); --pp-inventory-paper:rgba(250,253,255,.96); --pp-inventory-card:#fff; color:var(--theme-text,var(--pp-inventory-ink)); } html[data-game-theme="dark"] .inventory-v52 { --pp-inventory-ink:#edf8fc; --pp-inventory-muted:#a8c0cc; --pp-inventory-line:rgba(139,200,225,.22); --pp-inventory-paper:rgba(15,49,64,.97); --pp-inventory-card:#194255; } .game-screen .side-panel.is-inventory-panel { border-color:color-mix(in srgb,var(--pp-inventory-blue) 28%,var(--theme-border))!important; background: radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--pp-inventory-red) 7%,transparent),transparent 28%), linear-gradient(155deg,var(--pp-inventory-paper),color-mix(in srgb,var(--pp-inventory-paper) 94%,var(--theme-surface-soft)))!important; } .inventory-v52 .inventory-catalog-v52, .inventory-v52 .inventory-categories-v52, .inventory-v52 .inventory-search-input-v55, .inventory-v52 .inventory-capacity-v53 { border-color:var(--pp-inventory-line)!important; } .inventory-v52 .inventory-item-v52 { position:relative; overflow:hidden!important; isolation:isolate; border-color:var(--pp-inventory-line)!important; background: linear-gradient(180deg,color-mix(in srgb,var(--pp-inventory-card) 97%,var(--r,#8ca4b1) 3%),var(--pp-inventory-card))!important; box-shadow:0 7px 20px rgba(19,67,91,.07),inset 0 1px rgba(255,255,255,.7)!important; } .inventory-v52 .inventory-item-v52::after { content:""; position:absolute; z-index:0; inset:auto -36px -46px auto; width:104px; height:104px; border:14px solid color-mix(in srgb,var(--r,#8ca4b1) 7%,transparent); border-radius:50%; pointer-events:none; } .inventory-v52 .inventory-item-art-v49 { position:relative!important; z-index:1; display:grid!important; place-items:center!important; overflow:hidden!important; isolation:isolate!important; contain:paint!important; clip-path:inset(0 round 14px); } .inventory-v52 .inventory-item-art-v49 .item-graphic-shell { position:relative!important; z-index:1!important; display:grid!important; place-items:center!important; box-sizing:border-box!important; width:min(108px,78%)!important; height:min(108px,78%)!important; max-width:108px!important; max-height:108px!important; margin:auto!important; padding:4px!important; overflow:hidden!important; contain:paint!important; border-radius:18px!important; background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.92),rgba(231,245,252,.48) 55%,transparent 72%)!important; } .inventory-v52 .inventory-item-art-v49 .item-graphic-shell > :is(img,svg,.item-ball-raster) { position:relative!important; z-index:1!important; display:block!important; width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; object-position:center!important; transform:none!important; } .inventory-v52 .inventory-item-type-v49, .inventory-v52 .inventory-item-rarity-v49, .inventory-v52 .inventory-item-weight-v52, .inventory-v52 .inventory-item-art-v49 > em, .inventory-v52 .inventory-item-favorite-v49, .inventory-v52 .inventory-item-copy-v49 { z-index:4!important; } .inventory-v52 .inventory-item-type-v49 .inventory-category-icon, .inventory-v52 .inventory-categories-v52 .inventory-category-icon, .inventory-v52 .inventory-categories-v52 .pokemon-semantic-raster { width:24px!important; height:24px!important; padding:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; } .inventory-v52 .inventory-content-v49 { min-width:0!important; min-height:0!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain; scrollbar-gutter:stable; } .inventory-v52 .inventory-categories-v52 > button { min-width:0!important; } /* -------------------------------------------------------------------------- Trainer profile: one outer scroller, contained companion art and gifts. -------------------------------------------------------------------------- */ .game-screen .side-panel.is-social-profile #sidePanelContent { height:100%!important; min-height:0!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain; scrollbar-gutter:stable; } .profile-v80, .profile-v80 .social-profile-tab-body { min-width:0; overflow:visible!important; } .profile-v80 .profile-v80-icon { object-fit:contain!important; border-radius:0!important; box-shadow:none!important; } .profile-v80 .profile-v80-stage { overflow:hidden!important; contain:paint; } .profile-v80 .profile-v80-stage-empty { overflow:hidden!important; contain:paint; } .profile-v80 .profile-v80-stage-empty-ball { display:block!important; width:52px!important; height:52px!important; max-width:52px!important; max-height:52px!important; object-fit:contain!important; object-position:center!important; } .profile-v80 .profile-v80-gift, .profile-v80 .profile-v80-gift-choice { overflow:hidden!important; contain:paint; } .profile-v80 .profile-v80-gift > img, .profile-v80 .profile-v80-gift-choice > img { box-sizing:border-box!important; padding:5px!important; object-fit:contain!important; object-position:center!important; background:radial-gradient(circle at 50% 45%,#fff 0 34%,#edf8ff 72%,#dceef8 100%)!important; } .profile-v80 .profile-v80-tabs { min-width:0; } .profile-v80 .profile-v80-tabs button { min-width:0!important; min-height:44px!important; } .profile-v80 .profile-v80-tabs button > .profile-v80-icon { width:26px!important; height:26px!important; } /* -------------------------------------------------------------------------- Quest journal: compact, readable tabs with no clipped branch names. -------------------------------------------------------------------------- */ .quest-journal-polish-v68 { min-width:0; min-height:0; overflow:hidden!important; } .quest-journal-polish-v68 .quest-type-graphic-v61 { border-radius:0!important; box-shadow:none!important; } .quest-journal-polish-v68 .quest-type-tabs-v57, .quest-journal-polish-v68 .quest-status-tabs-v57, .quest-journal-polish-v68 .quest-mode-tabs-v57 { min-width:0; } .quest-journal-polish-v68 .quest-type-tabs-v57 button > span, .quest-journal-polish-v68 .quest-type-tabs-v57 button > span > b { min-width:0; overflow:visible!important; text-overflow:clip!important; white-space:normal!important; } .quest-journal-polish-v68 .quest-branch-list-v59, .quest-journal-polish-v68 .quest-detail-scroll-v67 { overscroll-behavior:contain; scrollbar-gutter:stable; } .quest-journal-polish-v68 .quest-abandon-confirm-v57 > section > img { width:62px!important; height:62px!important; object-fit:contain!important; } /* -------------------------------------------------------------------------- Chat/social/menu semantic art. Neutral controls intentionally remain SVG. -------------------------------------------------------------------------- */ .chat-messenger .chat-emoji-category-raster { width:22px!important; height:22px!important; border-radius:0!important; } .chat-messenger .chat-popover { max-width:min(360px,calc(100vw - 20px)); overflow-x:hidden; } .world-rail button > span > :is(img,.pokemon-ui-raster), .world-rail button > span.pokemon-ui-raster { display:block!important; width:30px!important; height:30px!important; max-width:30px!important; max-height:30px!important; object-fit:contain!important; border-radius:0!important; } .mobile-dock .pokemon-nav-raster { display:block!important; width:30px!important; height:30px!important; max-width:30px!important; max-height:30px!important; object-fit:contain!important; object-position:center!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } @media (max-width:800px) { /* Inventory portrait: the catalogue is the only vertical scroll owner. */ .game-screen .side-panel.is-inventory-panel { overflow:hidden!important; padding:7px!important; } .game-screen .side-panel.is-inventory-panel #sidePanelContent, .inventory-v52, .inventory-v52 .inventory-layout-v49, .inventory-v52 .inventory-catalog-v52 { height:100%!important; min-height:0!important; overflow:hidden!important; } .inventory-v52 { display:flex!important; flex-direction:column!important; gap:5px!important; } .inventory-v52 .inventory-head-v54 { flex:0 0 48px!important; min-height:48px!important; padding:0 45px 4px 0!important; } .inventory-v52 .inventory-title-v49 > span { width:36px!important; height:36px!important; } .inventory-v52 .inventory-title-v49 > span > img { width:30px!important; height:30px!important; object-fit:contain!important; } .inventory-v52 .inventory-title-v49 small { font-size:.625rem!important; } .inventory-v52 .inventory-title-v49 h2 { font-size:1.08rem!important; } .inventory-v52 .inventory-title-v49 em { display:none!important; } .inventory-v52 .inventory-wallet-v49 > span { min-width:50px!important; } .inventory-v52 .inventory-toolbar-v54 { flex:0 0 42px!important; min-height:42px!important; } .inventory-v52 .inventory-layout-v49 { display:flex!important; flex:1 1 auto!important; flex-direction:column!important; gap:5px!important; } .inventory-v52 .inventory-categories-v52 { display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; grid-auto-rows:44px!important; flex:0 0 92px!important; gap:4px!important; width:100%!important; height:92px!important; min-height:92px!important; padding:0!important; overflow:hidden!important; border:0!important; background:transparent!important; box-shadow:none!important; } .inventory-v52 .inventory-categories-v52 > button { display:grid!important; grid-template-columns:21px minmax(0,1fr)!important; align-items:center!important; gap:3px!important; width:auto!important; min-width:0!important; height:44px!important; min-height:44px!important; padding:3px 4px!important; overflow:hidden!important; border-radius:11px!important; } .inventory-v52 .inventory-categories-v52 > button > :is(.inventory-category-icon,.pokemon-semantic-raster) { width:20px!important; height:20px!important; } .inventory-v52 .inventory-categories-v52 > button > span { display:block!important; min-width:0!important; overflow:hidden!important; font-size:.5625rem!important; font-weight:800!important; line-height:1.05!important; text-align:left!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .inventory-v52 .inventory-categories-v52 > button > i { top:1px!important; right:2px!important; min-width:16px!important; height:15px!important; font-size:.5rem!important; } .inventory-v52 .inventory-catalog-v52 { display:grid!important; grid-template-rows:auto minmax(0,1fr)!important; flex:1 1 auto!important; } .inventory-v52 .inventory-catalog-head-v54 { min-height:52px!important; padding:4px!important; } .inventory-v52 .inventory-content-v49 { height:100%!important; min-height:0!important; padding:6px!important; overflow-x:hidden!important; overflow-y:auto!important; } .inventory-v52 .inventory-items-v49 { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:7px!important; } .inventory-v52 .inventory-item-v52 { height:148px!important; min-height:148px!important; } .inventory-v52 .inventory-item-art-v49 { height:102px!important; } .inventory-v52 .inventory-item-art-v49 .item-graphic-shell { width:74px!important; height:74px!important; max-width:74px!important; max-height:74px!important; padding:3px!important; } .inventory-v52 .inventory-item-copy-v49 > b { font-size:.75rem!important; line-height:1.15!important; } /* Profile portrait: fixed grid tabs and no nested horizontal gift scroller. */ .game-screen .side-panel.is-social-profile { overflow:hidden!important; } .profile-v80 .profile-v80-tabs, .profile-v80.profile-v80--visitor .profile-v80-tabs { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:5px!important; overflow:visible!important; scroll-snap-type:none!important; } .profile-v80.profile-v80--visitor .profile-v80-tabs { grid-template-columns:repeat(3,minmax(0,1fr))!important; } .profile-v80 .profile-v80-tabs button { display:grid!important; grid-template-columns:24px minmax(0,1fr)!important; gap:5px!important; width:auto!important; min-width:0!important; min-height:44px!important; padding:4px 6px!important; } .profile-v80 .profile-v80-tabs button > .profile-v80-icon { width:24px!important; height:24px!important; } .profile-v80 .profile-v80-tabs button > b { overflow:hidden!important; font-size:.6875rem!important; line-height:1.12!important; text-overflow:ellipsis!important; } .profile-v80 .profile-v80-showcase > div { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:7px!important; overflow:visible!important; padding:0!important; } .profile-v80 .profile-v80-gift { display:grid!important; grid-template-columns:58px minmax(0,1fr)!important; width:auto!important; min-width:0!important; min-height:66px!important; } .profile-v80 .profile-v80-gift > img { width:58px!important; height:64px!important; } .profile-v80 .profile-v80-gift-choice > img { width:72px!important; height:72px!important; } .profile-v80 .profile-v80-stage-empty-ball { width:44px!important; height:44px!important; max-width:44px!important; max-height:44px!important; } /* Quest portrait: no horizontally clipped tabs; list/detail remain exclusive. */ .game-screen .side-panel.is-quest-panel, .game-screen .side-panel.is-quest-panel #sidePanelContent { overflow:hidden!important; } .game-screen .side-panel.is-quest-panel #sidePanelContent, .quest-journal-polish-v68 { height:100%!important; min-height:0!important; } .quest-journal-polish-v68 { display:grid!important; grid-template-rows:52px 44px 58px 44px minmax(0,1fr)!important; } .quest-journal-polish-v68 .quest-journal-head-v57 { min-height:52px!important; padding:6px 50px 6px 9px!important; } .quest-journal-polish-v68 .quest-journal-head-v57 > span > .quest-type-graphic-v61 { width:34px!important; height:34px!important; } .quest-journal-polish-v68 .quest-journal-head-v57 small { font-size:.625rem!important; } .quest-journal-polish-v68 .quest-journal-head-v57 h2 { font-size:1.15rem!important; } .quest-journal-polish-v68 .quest-mode-tabs-v57 { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:5px!important; padding:0 7px!important; } .quest-journal-polish-v68 .quest-mode-tabs-v57 button { min-width:0!important; min-height:44px!important; padding:0 6px!important; font-size:.6875rem!important; } .quest-journal-polish-v68 .quest-type-tabs-v57 { display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:4px!important; padding:5px 7px!important; overflow:hidden!important; } .quest-journal-polish-v68 .quest-type-tabs-v57 button, .quest-journal-polish-v68 .quest-type-tabs-v57 button.is-core { position:relative!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:24px minmax(0,1fr)!important; place-items:center!important; gap:1px!important; width:auto!important; min-width:0!important; height:50px!important; min-height:50px!important; padding:2px 3px!important; overflow:hidden!important; border-radius:10px!important; } .quest-journal-polish-v68 .quest-type-tabs-v57 button > .quest-type-graphic-v61 { width:23px!important; height:23px!important; } .quest-journal-polish-v68 .quest-type-tabs-v57 button > span small { display:none!important; } .quest-journal-polish-v68 .quest-type-tabs-v57 button > span b { display:block!important; max-width:100%!important; overflow:hidden!important; font-size:.5625rem!important; font-weight:800!important; line-height:1.05!important; text-align:center!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .quest-journal-polish-v68 .quest-type-tabs-v57 button > i { position:absolute!important; top:1px!important; right:1px!important; min-width:16px!important; width:auto!important; height:15px!important; padding:0 3px!important; font-size:.5rem!important; } .quest-journal-polish-v68 .quest-status-tabs-v57 { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:4px!important; padding:0 7px 4px!important; overflow:hidden!important; } .quest-journal-polish-v68 .quest-status-tabs-v57 button { justify-content:center!important; min-width:0!important; min-height:40px!important; padding:0 5px!important; overflow:hidden!important; font-size:.625rem!important; line-height:1.1!important; text-align:center!important; white-space:normal!important; } .quest-journal-polish-v68 .quest-journal-body-v57 { position:relative!important; display:block!important; min-height:0!important; overflow:hidden!important; } .quest-journal-polish-v68 .quest-branch-list-v59 { height:100%!important; overflow-x:hidden!important; overflow-y:auto!important; } .quest-journal-polish-v68 .quest-detail-shell-v57 { overflow:hidden!important; } .quest-journal-polish-v68 .quest-detail-scroll-v67 { height:100%!important; overflow-x:hidden!important; overflow-y:auto!important; } .chat-messenger .chat-popover { right:6px!important; left:6px!important; width:auto!important; max-width:none!important; } .world-rail button > span > :is(img,.pokemon-ui-raster), .world-rail button > span.pokemon-ui-raster { width:28px!important; height:28px!important; max-width:28px!important; max-height:28px!important; } .mobile-dock .pokemon-nav-raster { width:28px!important; height:28px!important; max-width:28px!important; max-height:28px!important; } } @media (max-width:420px) { .inventory-v52 .inventory-wallet-v49 > span:last-child { display:none!important; } .inventory-v52 .inventory-categories-v52 > button > span { font-size:.53125rem!important; } .profile-v80 .profile-v80-tabs button { grid-template-columns:22px minmax(0,1fr)!important; padding-inline:4px!important; } .profile-v80 .profile-v80-tabs button > .profile-v80-icon { width:22px!important; height:22px!important; } .profile-v80 .profile-v80-tabs button > b { font-size:.625rem!important; } .profile-v80 .profile-v80-showcase > div { grid-template-columns:1fr!important; } .quest-journal-polish-v68 .quest-type-tabs-v57 button > span b { font-size:.53125rem!important; } .quest-journal-polish-v68 .quest-status-tabs-v57 button { font-size:.5625rem!important; } } @media (prefers-reduced-motion:reduce) { .inventory-v52 *, .profile-v80 *, .quest-journal-polish-v68 *, .chat-messenger * { scroll-behavior:auto!important; } .pokemon-genome-visual-v47 > img { animation:none!important; } } /* pk-style-source:73 */ /* inline-73 */ @media(max-width:720px){.lab-games[data-game-mode="flight"] .lab-games__board ol{grid-auto-rows:minmax(20px,1fr)}.lab-games[data-game-mode="flight"] .lab-games__board li:nth-child(n){display:grid}}@media(max-height:560px) and (orientation:landscape){.lab-games[data-game-mode="flight"] .lab-games__board li:nth-child(n){display:grid}} /* pk-style-source:74 */ /* /battle-ui-v2185.css */ /* * PokePark battle + world HUD repair, v2.18.5. * * This is the only terminal override for the screenshot regressions. Older * battle layers stay untouched so the release remains atomically reversible. */ /* The arena renderer already paints the location. The late v1 shell used to place a 72% navy sheet over it, which made every arena look grey. */ html[data-ui-revision="pokemon-next"] body.is-battling #battleHud[data-battle-skin="v2185"], html[data-ui-revision="pokemon-next"] body.is-battling #battleHud[data-battle-skin="v2185"] .battle-shell, html[data-ui-revision="pokemon-next"] body.is-battling #battleHud[data-battle-skin="v2185"] .battle-stage { background: transparent !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html[data-ui-revision="pokemon-next"] body.is-battling #battleHud[data-battle-skin="v2185"]::before, html[data-ui-revision="pokemon-next"] body.is-battling #battleHud[data-battle-skin="v2185"]::after, html[data-ui-revision="pokemon-next"] body.is-battling #battleHud[data-battle-skin="v2185"] .battle-shell::before, html[data-ui-revision="pokemon-next"] body.is-battling #battleHud[data-battle-skin="v2185"] .battle-stage::before, html[data-ui-revision="pokemon-next"] body.is-battling #battleHud[data-battle-skin="v2185"] .battle-stage::after { content: none !important; display: none !important; background: transparent !important; opacity: 0 !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #battleMatchHeader, html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #battleTargets.is-matchup-summary { display: none !important; } /* The phase controller owns the hidden attribute. Historical battle layers must never resurrect controls from another phase with display:...!important. */ html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] [hidden] { display: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #battleLiveControls[hidden], html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #capturePanel[hidden] { display: none !important; } /* Dedicated raster resources keep Pokémon portraits reserved for actual Pokémon. These bounds also undo the old global img { width:100% } rule. */ html[data-ui-revision="pokemon-next"] #battleHud[data-battle-skin="v2185"] .combat-skill-cost > img.battle-combat-raster { width: 14px !important; height: 14px !important; min-width: 14px !important; max-width: 14px !important; object-fit: contain !important; } html[data-ui-revision="pokemon-next"] #battleHud[data-battle-skin="v2185"] :is(.combat-energy, .battle-vital, .battle-exp) img.battle-combat-raster { width: 20px !important; height: 20px !important; min-width: 20px !important; max-width: 20px !important; object-fit: contain !important; } /* Dark-theme inheritance previously painted important copy white on the pale fighter, capture and result cards. These cards have their own light skin. */ html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] .battle-fighter-identity > header > b { color: #153e52 !important; -webkit-text-fill-color: #153e52 !important; text-shadow: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] .combat-capture-copy > b, html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] #battleDecision .battle-result-copy > b { color: #173f54 !important; -webkit-text-fill-color: #173f54 !important; background: none !important; text-shadow: none !important; opacity: 1 !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] .combat-capture-copy > em, html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] #battleDecision .battle-result-copy > em, html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] .battle-reward-drop > span > b, html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] .battle-reward-drop > span > small { color: #4c7080 !important; -webkit-text-fill-color: #4c7080 !important; text-shadow: none !important; opacity: 1 !important; } /* Six deliberate item wells. Empty slots are quiet equipment sockets rather than six repeated backpacks and never grow phantom black quantity badges. */ html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] #battleQuickItems { display: grid !important; grid-template-columns: repeat(3, minmax(46px, 1fr)) !important; grid-template-rows: repeat(2, minmax(46px, 1fr)) !important; gap: 6px !important; min-width: 0 !important; overflow: visible !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] #battleQuickItems .combat-item-button { position: relative !important; width: auto !important; min-width: 46px !important; max-width: none !important; height: auto !important; min-height: 46px !important; padding: 3px !important; overflow: visible !important; border: 1px solid rgba(36, 133, 171, .24) !important; border-radius: 12px !important; background: rgba(250, 254, 255, .94) !important; box-shadow: inset 0 1px 0 #fff !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] #battleQuickItems .combat-item-button > span:first-child { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin: auto !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] #battleQuickItems .battle-quick-raster { width: 100% !important; height: 100% !important; object-fit: contain !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] #battleQuickItems .combat-item-button.is-empty-slot { border-style: dashed !important; border-color: rgba(67, 131, 157, .28) !important; background: rgba(226, 240, 246, .58) !important; opacity: 1 !important; filter: none !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] #battleQuickItems .combat-item-button.is-empty-slot .combat-item-empty-art { width: 31px !important; height: 31px !important; opacity: .72 !important; filter: saturate(.72) !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] #battleQuickItems .combat-item-button.is-empty-slot > b, html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] #battleQuickItems .combat-item-button.is-empty-slot > .combat-cooldown { display: none !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] #battleQuickItems .combat-item-button > b { right: -4px !important; bottom: -4px !important; min-width: 23px !important; height: 19px !important; padding: 0 5px !important; display: grid !important; place-items: center !important; border: 2px solid #f7fdff !important; border-radius: 999px !important; color: #fff !important; background: #173f55 !important; box-shadow: 0 3px 7px rgba(6, 39, 55, .22) !important; font-size: 9px !important; line-height: 1 !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] #battleQuickItems .combat-item-button.is-disabled:not(.is-empty-slot) { opacity: .68 !important; filter: saturate(.74) !important; } /* All available Poké Balls wrap into a compact selector. No native horizontal scrollbar, clipped final ball or half-visible exit action. */ html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #battleCommandDeck[data-view="capture"] { height: clamp(184px, 24dvh, 218px) !important; min-height: clamp(184px, 24dvh, 218px) !important; max-height: clamp(184px, 24dvh, 218px) !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #battleCommandDeck[data-view="capture"] #capturePanel.combat-capture-panel { display: grid !important; grid-template-columns: 174px minmax(0, 1fr) 116px !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: "copy balls cancel" !important; align-items: stretch !important; gap: 10px !important; min-width: 0 !important; padding: 10px !important; overflow: hidden !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] .combat-capture-copy { grid-area: copy !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] .combat-capture-cancel { grid-area: cancel !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #battleCommandDeck[data-view="capture"] #captureBalls.combat-capture-balls { grid-area: balls !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)) !important; grid-auto-rows: minmax(72px, 1fr) !important; align-content: start !important; align-items: stretch !important; gap: 4px !important; min-width: 0 !important; min-height: 0 !important; padding: 1px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; scrollbar-width: none !important; scroll-snap-type: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #battleCommandDeck[data-view="capture"] #captureBalls.combat-capture-balls::-webkit-scrollbar { display: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #battleCommandDeck[data-view="capture"] #captureBalls.combat-capture-balls > button { width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 72px !important; padding: 4px 3px !important; grid-template-rows: 38px 12px 11px 10px !important; gap: 1px !important; overflow: hidden !important; border: 1px solid rgba(43, 132, 168, .2) !important; border-radius: 11px !important; background: rgba(248, 253, 255, .88) !important; scroll-snap-align: none !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] .combat-capture-balls .capture-ball-icon { width: 38px !important; height: 38px !important; margin: auto !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] .combat-capture-balls > button:disabled { opacity: .78 !important; filter: saturate(.82) !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] .combat-capture-balls > button.is-selected { border-color: #1e9dd0 !important; background: linear-gradient(180deg, #fafdff, #dff5fc) !important; box-shadow: inset 0 0 0 2px rgba(29, 157, 208, .18), 0 5px 12px rgba(6, 91, 126, .12) !important; } /* Restore the 2.17 desktop navigation geometry while keeping the current PNG artwork and JS behaviour. */ @media (min-width: 761px) { html[data-ui-revision="pokemon-next"] .game-screen .world-rail:not(.is-desktop-menu-open) { display: none !important; } html[data-ui-revision="pokemon-next"] .game-screen .desktop-dock { display: grid !important; grid-auto-flow: column !important; grid-template-columns: repeat(5, var(--desktop-action-size, 78px)) !important; flex-direction: row !important; left: auto !important; right: max(16px, env(safe-area-inset-right)) !important; top: auto !important; bottom: max(16px, env(safe-area-inset-bottom)) !important; width: auto !important; height: auto !important; padding: 0 !important; transform: none !important; border: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; pointer-events: none !important; } html[data-ui-revision="pokemon-next"] .game-screen .desktop-dock::before { content: none !important; display: none !important; } html[data-ui-revision="pokemon-next"] .game-screen .desktop-dock > button { pointer-events: auto !important; } } @media (max-width: 760px) { html[data-ui-revision="pokemon-next"] .game-screen .desktop-dock { display: none !important; } html[data-ui-revision="pokemon-next"] .game-screen .mobile-dock { display: grid !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] #battleQuickItems { grid-template-columns: repeat(3, minmax(44px, 1fr)) !important; grid-template-rows: repeat(2, minmax(44px, 1fr)) !important; gap: 5px !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] #battleQuickItems .combat-item-button { min-width: 44px !important; min-height: 44px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #battleCommandDeck[data-view="capture"] { height: min(278px, 45dvh) !important; min-height: min(278px, 45dvh) !important; max-height: min(278px, 45dvh) !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #battleCommandDeck[data-view="capture"] #capturePanel.combat-capture-panel { grid-template-columns: minmax(0, 1fr) 112px !important; grid-template-rows: 42px minmax(0, 1fr) !important; grid-template-areas: "copy cancel" "balls balls" !important; gap: 6px 8px !important; padding: 8px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #battleCommandDeck[data-view="capture"] #captureBalls.combat-capture-balls { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-auto-rows: minmax(64px, 1fr) !important; gap: 4px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #battleCommandDeck[data-view="capture"] #captureBalls.combat-capture-balls > button { min-width: 0 !important; min-height: 64px !important; grid-template-rows: 34px 10px 10px 9px !important; padding: 3px 2px !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] .combat-capture-balls .capture-ball-icon { width: 33px !important; height: 33px !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] .combat-capture-balls b { overflow: hidden !important; font-size: 7px !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html[data-game-theme] body.is-battling #battleHud[data-battle-skin="v2185"] .capture-throw { bottom: calc(min(278px, 45dvh) + max(12px, env(safe-area-inset-bottom))) !important; } } @media (min-width: 761px) and (max-width: 900px) and (min-height: 600px) { html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #battleCommandDeck[data-view="capture"] { height: 292px !important; min-height: 292px !important; max-height: 292px !important; } } @media (max-width: 900px) and (max-height: 650px) and (orientation: landscape) { html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"] #battleCommandDeck[data-view="combat"] #battleLiveControls[data-mobile-layout="native-v28"] .combat-utility-panel { transform: translateY(-10px) !important; } } @media (prefers-reduced-motion: reduce) { html[data-ui-revision="pokemon-next"] #battleHud[data-battle-skin="v2185"] *, html[data-ui-revision="pokemon-next"] .desktop-dock * { scroll-behavior: auto !important; } } /* pk-style-source:75 */ /* /capture-v2186.css */ /* * PokePark capture scene v2.18.6. * * Capture is intentionally isolated from the combat dashboard. The arena, * target, shrinking ring and the physical Poké Ball are the interface; the * inventory is a compact belt at the bottom instead of a second stat panel. */ html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"][data-view="capture"] { --capture-tray-h: 98px; --capture-edge: max(8px, env(safe-area-inset-left)); position: fixed !important; inset: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; transform: none !important; overflow: hidden !important; border: 1px solid rgba(224, 251, 255, .9) !important; border-radius: 24px !important; background: transparent !important; box-shadow: 0 18px 56px rgba(4, 35, 48, .28) !important; isolation: isolate !important; overscroll-behavior: none !important; -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"][data-view="capture"] :is(.battle-shell, #battleStage) { position: absolute !important; inset: 0 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; border: 0 !important; border-radius: inherit !important; background: transparent !important; box-shadow: none !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"][data-view="capture"] #battleHealth, html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"][data-view="capture"] #battleMatchHeader, html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"][data-view="capture"] #battleRosterPanel, html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"][data-view="capture"] #battleTargets, html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"][data-view="capture"] #battleAllies { display: none !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #captureStage[hidden], html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #capturePanel[hidden] { display: none !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"][data-view="capture"] #captureStage { position: absolute !important; z-index: 8 !important; inset: 0 !important; display: block !important; overflow: hidden !important; border-radius: inherit !important; pointer-events: none !important; touch-action: none !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"][data-view="capture"] #captureStage::before { content: "" !important; position: absolute !important; inset: 0 !important; display: block !important; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0) 0 36%, rgba(8,65,76,.05) 78%, rgba(3,38,48,.14) 100%), linear-gradient(180deg, rgba(255,255,255,.03), transparent 30%, rgba(7,48,57,.04) 72%, rgba(5,39,48,.18)) !important; opacity: 1 !important; pointer-events: none !important; } .capture-minimal-hud { position: absolute; z-index: 14; top: max(12px, env(safe-area-inset-top)); right: var(--capture-edge); left: var(--capture-edge); display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; } .capture-wild-label { display: grid; gap: 1px; min-width: 132px; padding: 8px 12px 9px; border: 1px solid rgba(224,249,253,.68); border-radius: 14px; color: #f4fdff; background: rgba(9,52,66,.56); box-shadow: 0 7px 18px rgba(4,35,46,.12), inset 0 1px rgba(255,255,255,.18); -webkit-backdrop-filter: blur(12px) saturate(1.08); backdrop-filter: blur(12px) saturate(1.08); } .capture-wild-label small { color: #99e8fa; font-size: 8px; font-weight: 900; letter-spacing: .11em; } .capture-wild-label b { overflow: hidden; color: #fff; font-size: 14px; font-weight: 900; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #cancelCapture.combat-capture-cancel { position: relative !important; z-index: 2 !important; grid-area: auto !important; display: inline-grid !important; grid-template-columns: 20px auto !important; align-items: center !important; gap: 5px !important; width: auto !important; min-width: 82px !important; max-width: none !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding: 0 12px 0 9px !important; border: 1px solid rgba(225,249,253,.68) !important; border-radius: 14px !important; color: #f6fdff !important; background: rgba(10,52,66,.58) !important; box-shadow: 0 7px 18px rgba(4,35,46,.12), inset 0 1px rgba(255,255,255,.18) !important; -webkit-backdrop-filter: blur(12px) saturate(1.08) !important; backdrop-filter: blur(12px) saturate(1.08) !important; pointer-events: auto !important; } #battleHud[data-capture-ui="v2186"] #cancelCapture > span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.14); font-size: 19px; font-weight: 500; line-height: 1; } #battleHud[data-capture-ui="v2186"] #cancelCapture > b { color: inherit !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .02em !important; } #battleHud[data-capture-ui="v2186"] #cancelCapture:disabled { opacity: .48 !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] .capture-feedback { position: absolute !important; z-index: 15 !important; top: max(14px, env(safe-area-inset-top)) !important; left: 50% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 2px 12px !important; width: min(360px, calc(100% - 390px)) !important; min-width: 250px !important; min-height: 44px !important; padding: 7px 12px !important; transform: translateX(-50%) !important; overflow: visible !important; border: 1px solid rgba(224,249,253,.68) !important; border-radius: 14px !important; color: #f5fdff !important; background: rgba(8,49,63,.57) !important; box-shadow: 0 7px 18px rgba(4,35,46,.12), inset 0 1px rgba(255,255,255,.18) !important; text-align: left !important; -webkit-backdrop-filter: blur(12px) saturate(1.08) !important; backdrop-filter: blur(12px) saturate(1.08) !important; } #battleHud[data-capture-ui="v2186"] .capture-feedback > span:first-child { display: grid; min-width: 0; } #battleHud[data-capture-ui="v2186"] .capture-feedback #captureFeedbackKicker { color: #8be9fb !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .12em !important; } #battleHud[data-capture-ui="v2186"] .capture-feedback #captureQuality { overflow: hidden; color: #fff !important; font-size: 11px !important; font-weight: 850 !important; line-height: 1.25 !important; text-overflow: ellipsis; white-space: nowrap; } #battleHud[data-capture-ui="v2186"] .capture-feedback #captureAttempt { align-self: center; color: #d7f7fc !important; font-size: 9px !important; font-style: normal !important; font-weight: 900 !important; letter-spacing: .04em !important; white-space: nowrap; } #battleHud[data-capture-ui="v2186"] .capture-live-metrics { position: absolute; top: calc(100% + 6px); left: 50%; display: grid; grid-template-columns: repeat(3, auto); gap: 5px; transform: translateX(-50%); transition: opacity .12s ease, transform .12s ease; } #battleHud[data-capture-ui="v2186"] .capture-live-metrics[aria-hidden="true"] { opacity: 0; transform: translate(-50%, -5px); pointer-events: none; } #battleHud[data-capture-ui="v2186"] .capture-live-metrics > i { display: flex; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid rgba(220,248,252,.42); border-radius: 999px; color: #effcff; background: rgba(7,47,60,.7); box-shadow: 0 4px 10px rgba(2,25,34,.1); font-style: normal; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #battleHud[data-capture-ui="v2186"] .capture-live-metrics small { color: #9fdce9; font-size: 7px; font-weight: 900; letter-spacing: .08em; } #battleHud[data-capture-ui="v2186"] .capture-live-metrics b { color: #fff; font-size: 8px; font-weight: 950; } #battleHud[data-capture-ui="v2186"] #captureStage[data-aim="direct"] .capture-live-metrics > i:first-child, #battleHud[data-capture-ui="v2186"] #captureStage[data-aim="direct"] .capture-feedback { border-color: rgba(96,224,157,.72) !important; } #battleHud[data-capture-ui="v2186"] #captureStage[data-aim="wide"] .capture-live-metrics > i:nth-child(2) b, #battleHud[data-capture-ui="v2186"] #captureStage[data-aim="weak"] .capture-live-metrics > i:first-child b { color: #ffd277 !important; } #battleHud[data-capture-ui="v2186"] #captureStage[data-curve="true"] .capture-live-metrics > i:last-child b { color: #72e8ff !important; text-shadow: 0 0 8px rgba(77,217,255,.55); } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] .capture-target-reticle { position: absolute !important; z-index: 10 !important; top: 47% !important; left: 50% !important; width: clamp(148px, 14vw, 198px) !important; height: clamp(148px, 14vw, 198px) !important; transform: translate(-50%, -50%) !important; pointer-events: none !important; } #battleHud[data-capture-ui="v2186"] .capture-target-reticle > span { display: none !important; } #battleHud[data-capture-ui="v2186"] .capture-target-reticle > i { border-width: 3px !important; } #battleHud[data-capture-ui="v2186"] .capture-ring-outer { border-color: rgba(255,255,255,.92) !important; box-shadow: 0 0 0 1px rgba(13,76,86,.12), 0 4px 18px rgba(14,89,99,.12) !important; } #battleHud[data-capture-ui="v2186"] .capture-ring-inner { border-color: var(--capture-chance-color, #54cf8b) !important; box-shadow: 0 0 15px color-mix(in srgb, var(--capture-chance-color, #54cf8b) 55%, transparent) !important; } #battleHud[data-capture-ui="v2186"] .capture-aim-guide { z-index: 9 !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; } #battleHud[data-capture-ui="v2186"] #captureStage.is-aiming .capture-aim-guide { opacity: .72 !important; } #battleHud[data-capture-ui="v2186"] .capture-aim-guide path { stroke: rgba(244,254,255,.88) !important; stroke-width: 2.2 !important; stroke-dasharray: 7 8 !important; filter: drop-shadow(0 2px 4px rgba(2,45,59,.22)); } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] .capture-throw { position: absolute !important; z-index: 18 !important; right: auto !important; bottom: calc(var(--capture-tray-h) + 28px) !important; left: 50% !important; display: grid !important; place-items: center !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 112px !important; min-height: 112px !important; max-height: 112px !important; padding: 0 !important; transform: translateX(-50%) translate(var(--throw-x, 0), var(--throw-y, 0)) rotate(var(--throw-rotate, 0)) !important; overflow: visible !important; border: 0 !important; border-radius: 50% !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; filter: drop-shadow(0 13px 9px rgba(4,37,48,.3)) !important; opacity: 1 !important; pointer-events: auto !important; touch-action: none !important; cursor: grab !important; transition: filter .13s ease, opacity .13s ease !important; } #battleHud[data-capture-ui="v2186"] .capture-throw::after { content: "" !important; position: absolute !important; z-index: -1 !important; right: 14px !important; bottom: -5px !important; left: 14px !important; display: block !important; height: 20px !important; border-radius: 50% !important; background: radial-gradient(ellipse, rgba(4,44,54,.36), transparent 70%) !important; opacity: .72 !important; filter: blur(4px) !important; pointer-events: none !important; } #battleHud[data-capture-ui="v2186"] .capture-throw.is-aiming { cursor: grabbing !important; transition: none !important; filter: drop-shadow(0 16px 11px rgba(4,37,48,.34)) drop-shadow(0 0 11px rgba(92,224,255,.55)) !important; } #battleHud[data-capture-ui="v2186"] .capture-throw:disabled { cursor: default !important; } #battleHud[data-capture-ui="v2186"] .capture-throw-icon, #battleHud[data-capture-ui="v2186"] .capture-throw-icon > .item-ball-raster-v37 { width: 106px !important; min-width: 106px !important; max-width: 106px !important; height: 106px !important; min-height: 106px !important; max-height: 106px !important; object-fit: contain !important; pointer-events: none !important; } #battleHud[data-capture-ui="v2186"] .capture-throw > em, #battleHud[data-capture-ui="v2186"] .capture-spin-meter { display: none !important; } #battleHud[data-capture-ui="v2186"] #captureStage.is-resolving .capture-throw { opacity: 0 !important; transform: translateX(-50%) scale(.7) !important; pointer-events: none !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] .capture-gesture-hint { position: absolute !important; z-index: 13 !important; right: auto !important; bottom: calc(var(--capture-tray-h) + 32px) !important; left: max(14px, env(safe-area-inset-left)) !important; display: flex !important; align-items: center !important; gap: 8px !important; max-width: 255px !important; padding: 8px 10px !important; border: 1px solid rgba(220,248,252,.48) !important; border-radius: 14px !important; color: #effcff !important; background: rgba(7,47,60,.58) !important; box-shadow: 0 6px 16px rgba(2,25,34,.1) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; transition: opacity .25s ease, transform .25s ease !important; } #battleHud[data-capture-ui="v2186"] .capture-gesture-hint > i { display: grid !important; place-items: center !important; width: 30px !important; min-width: 30px !important; height: 30px !important; border-radius: 10px !important; color: #75e2f8 !important; background: rgba(116,226,248,.13) !important; } #battleHud[data-capture-ui="v2186"] .capture-gesture-hint svg { width: 18px !important; height: 18px !important; } #battleHud[data-capture-ui="v2186"] .capture-gesture-hint b { display: block !important; color: #f6fdff !important; font-size: 9px !important; font-weight: 900 !important; } #battleHud[data-capture-ui="v2186"] .capture-gesture-hint small { display: block !important; margin-top: 1px !important; color: #b8dce4 !important; font-size: 7px !important; line-height: 1.25 !important; } #battleHud[data-capture-ui="v2186"] #captureStage.has-interacted .capture-gesture-hint { opacity: 0 !important; transform: translateY(6px) !important; pointer-events: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #battleCommandDeck[data-view="capture"] { position: absolute !important; z-index: 16 !important; right: max(10px, env(safe-area-inset-right)) !important; bottom: max(10px, env(safe-area-inset-bottom)) !important; left: max(10px, env(safe-area-inset-left)) !important; display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: var(--capture-tray-h) !important; min-height: var(--capture-tray-h) !important; max-height: var(--capture-tray-h) !important; margin: 0 !important; transform: none !important; overflow: visible !important; border: 0 !important; border-radius: 18px !important; background: transparent !important; box-shadow: none !important; pointer-events: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #capturePanel.combat-capture-panel { position: relative !important; inset: auto !important; display: grid !important; grid-template-columns: 190px minmax(0, 1fr) !important; grid-template-rows: 1fr !important; grid-template-areas: "copy balls" !important; align-items: stretch !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important; max-height: none !important; padding: 9px 10px !important; transform: none !important; overflow: hidden !important; border: 1px solid rgba(225,249,253,.76) !important; border-radius: 18px !important; color: #173e52 !important; background: linear-gradient(105deg, rgba(249,253,254,.94), rgba(232,247,251,.9)) !important; box-shadow: 0 10px 28px rgba(5,48,62,.18), inset 0 1px rgba(255,255,255,.88) !important; -webkit-backdrop-filter: blur(16px) saturate(1.05) !important; backdrop-filter: blur(16px) saturate(1.05) !important; pointer-events: auto !important; } #battleHud[data-capture-ui="v2186"] .combat-capture-copy { grid-area: copy !important; display: grid !important; grid-template-rows: 11px 18px 14px 13px !important; align-content: center !important; gap: 1px !important; min-width: 0 !important; padding: 0 2px !important; } #battleHud[data-capture-ui="v2186"] .combat-capture-copy > small { color: #168ebc !important; font-size: 7px !important; font-weight: 950 !important; letter-spacing: .13em !important; } #battleHud[data-capture-ui="v2186"] .combat-capture-copy > b { overflow: hidden !important; color: #143d51 !important; font-size: 14px !important; font-weight: 950 !important; line-height: 1.2 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #battleHud[data-capture-ui="v2186"] .combat-capture-copy > em { overflow: hidden !important; color: #587785 !important; font-size: 8px !important; font-style: normal !important; font-weight: 700 !important; line-height: 1.2 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #battleHud[data-capture-ui="v2186"] .combat-capture-copy > strong { color: var(--capture-chance-color, #168ebc) !important; font-size: 9px !important; font-weight: 950 !important; letter-spacing: .035em !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #captureBalls.combat-capture-balls { grid-area: balls !important; display: grid !important; grid-template-columns: repeat(var(--capture-ball-count, 15), minmax(46px, 1fr)) !important; grid-template-rows: 1fr !important; grid-auto-flow: row !important; align-items: stretch !important; align-content: stretch !important; gap: 4px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; scrollbar-width: none !important; } #battleHud[data-capture-ui="v2186"] #captureBalls::-webkit-scrollbar { display: none !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #captureBalls > button { position: relative !important; display: grid !important; place-items: center !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 3px !important; transform: none !important; overflow: hidden !important; border: 1px solid rgba(44,127,157,.13) !important; border-radius: 12px !important; background: rgba(255,255,255,.48) !important; box-shadow: inset 0 1px rgba(255,255,255,.75) !important; opacity: 1 !important; filter: none !important; scroll-snap-align: none !important; transition: border-color .12s ease, background .12s ease, box-shadow .12s ease !important; } #battleHud[data-capture-ui="v2186"] #captureBalls > button > :is(b, .capture-ball-odds) { display: none !important; } #battleHud[data-capture-ui="v2186"] #captureBalls .capture-ball-icon, #battleHud[data-capture-ui="v2186"] #captureBalls .capture-ball-icon > * { width: min(48px, 100%) !important; min-width: 0 !important; max-width: 48px !important; height: min(48px, 100%) !important; min-height: 0 !important; max-height: 48px !important; margin: auto !important; object-fit: contain !important; pointer-events: none !important; } #battleHud[data-capture-ui="v2186"] #captureBalls .capture-ball-quantity { position: absolute !important; right: 2px !important; bottom: 2px !important; display: grid !important; place-items: center !important; min-width: 22px !important; height: 16px !important; padding: 0 4px !important; border: 1px solid rgba(255,255,255,.88) !important; border-radius: 999px !important; color: #f8fdff !important; background: rgba(14,61,78,.88) !important; box-shadow: 0 2px 5px rgba(5,37,49,.18) !important; font-size: 7px !important; font-weight: 900 !important; line-height: 1 !important; } #battleHud[data-capture-ui="v2186"] #captureBalls > button.is-selected { z-index: 2 !important; transform: none !important; border-color: #16a8d7 !important; background: rgba(225,248,255,.92) !important; box-shadow: inset 0 0 0 2px rgba(22,168,215,.28), 0 5px 13px rgba(8,101,134,.14) !important; } #battleHud[data-capture-ui="v2186"] #captureBalls > button.is-selected::after { content: "" !important; position: absolute !important; inset: 3px !important; display: block !important; border: 1px solid rgba(255,255,255,.88) !important; border-radius: 9px !important; pointer-events: none !important; } #battleHud[data-capture-ui="v2186"] #captureBalls > button:focus-visible, #battleHud[data-capture-ui="v2186"] #cancelCapture:focus-visible, #battleHud[data-capture-ui="v2186"] .capture-throw:focus-visible { outline: 3px solid #7ce6ff !important; outline-offset: 2px !important; } #battleHud[data-capture-ui="v2186"] .capture-chance-note { display: none !important; } #battleHud[data-capture-ui="v2186"] #captureStage[data-quality="master"] .capture-feedback, #battleHud[data-capture-ui="v2186"] #captureStage[data-quality="master"] .capture-ring-inner { border-color: #b782ef !important; box-shadow: 0 0 18px rgba(174,112,237,.42) !important; } #battleHud[data-capture-ui="v2186"] #captureStage[data-quality="excellent"] .capture-feedback { border-color: rgba(255,218,104,.82) !important; } @media (max-width: 1040px) { html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #capturePanel.combat-capture-panel { grid-template-columns: 156px minmax(0, 1fr) !important; } #battleHud[data-capture-ui="v2186"] .combat-capture-copy > em { display: none !important; } #battleHud[data-capture-ui="v2186"] .combat-capture-copy { grid-template-rows: 11px 18px 14px !important; } } @media (max-width: 900px), (hover: none) and (pointer: coarse) { html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"][data-view="capture"] { --capture-tray-h: 214px; inset: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .capture-minimal-hud { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); left: max(8px, env(safe-area-inset-left)); } .capture-wild-label { min-width: 0; max-width: calc(100% - 60px); padding: 6px 9px 7px; border-radius: 12px; } .capture-wild-label small { font-size: 7px; } .capture-wild-label b { font-size: 11px; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #cancelCapture.combat-capture-cancel { grid-template-columns: 1fr !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; padding: 0 !important; border-radius: 12px !important; } #battleHud[data-capture-ui="v2186"] #cancelCapture > b { display: none !important; } #battleHud[data-capture-ui="v2186"] #cancelCapture > span { margin: auto; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] .capture-feedback { top: max(58px, calc(env(safe-area-inset-top) + 52px)) !important; width: min(300px, calc(100% - 20px)) !important; min-width: 0 !important; min-height: 40px !important; padding: 6px 9px !important; } #battleHud[data-capture-ui="v2186"] .capture-feedback #captureFeedbackKicker { font-size: 7px !important; } #battleHud[data-capture-ui="v2186"] .capture-feedback #captureQuality { font-size: 9px !important; } #battleHud[data-capture-ui="v2186"] .capture-feedback #captureAttempt { font-size: 8px !important; } #battleHud[data-capture-ui="v2186"] .capture-live-metrics { gap: 3px; } #battleHud[data-capture-ui="v2186"] .capture-live-metrics > i { gap: 3px; padding: 3px 5px; } #battleHud[data-capture-ui="v2186"] .capture-live-metrics small { font-size: 7px; } #battleHud[data-capture-ui="v2186"] .capture-live-metrics b { font-size: 8px; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] .capture-target-reticle { top: 37% !important; width: clamp(112px, 32vw, 146px) !important; height: clamp(112px, 32vw, 146px) !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] .capture-throw { bottom: calc(var(--capture-tray-h) + 17px) !important; width: 84px !important; min-width: 84px !important; max-width: 84px !important; height: 84px !important; min-height: 84px !important; max-height: 84px !important; } #battleHud[data-capture-ui="v2186"] .capture-throw-icon, #battleHud[data-capture-ui="v2186"] .capture-throw-icon > .item-ball-raster-v37 { width: 80px !important; min-width: 80px !important; max-width: 80px !important; height: 80px !important; min-height: 80px !important; max-height: 80px !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] .capture-gesture-hint { right: 8px !important; bottom: calc(var(--capture-tray-h) + 24px) !important; left: 8px !important; width: fit-content !important; max-width: 136px !important; padding: 6px 8px !important; } #battleHud[data-capture-ui="v2186"] .capture-gesture-hint > i { width: 26px !important; min-width: 26px !important; height: 26px !important; } #battleHud[data-capture-ui="v2186"] .capture-gesture-hint b { font-size: 8px !important; } #battleHud[data-capture-ui="v2186"] .capture-gesture-hint small { display: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #battleCommandDeck[data-view="capture"] { right: max(6px, env(safe-area-inset-right)) !important; bottom: max(6px, env(safe-area-inset-bottom)) !important; left: max(6px, env(safe-area-inset-left)) !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #capturePanel.combat-capture-panel { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 38px minmax(0, 1fr) !important; grid-template-areas: "copy" "balls" !important; gap: 4px !important; padding: 6px !important; border-radius: 16px !important; } #battleHud[data-capture-ui="v2186"] .combat-capture-copy { grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-rows: 14px 14px !important; column-gap: 6px !important; align-content: center !important; padding: 0 4px !important; } #battleHud[data-capture-ui="v2186"] .combat-capture-copy > small { grid-column: 1 !important; grid-row: 1 !important; font-size: 7px !important; } #battleHud[data-capture-ui="v2186"] .combat-capture-copy > b { grid-column: 1 / 3 !important; grid-row: 2 !important; font-size: 11px !important; } #battleHud[data-capture-ui="v2186"] .combat-capture-copy > em { display: none !important; } #battleHud[data-capture-ui="v2186"] .combat-capture-copy > strong { grid-column: 3 !important; grid-row: 1 / 3 !important; align-self: center !important; font-size: 8px !important; white-space: nowrap !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #captureBalls.combat-capture-balls { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-template-rows: repeat(3, minmax(0, 1fr)) !important; gap: 3px !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #captureBalls > button { min-width: 0 !important; min-height: 0 !important; padding: 1px !important; border-radius: 10px !important; } #battleHud[data-capture-ui="v2186"] #captureBalls .capture-ball-icon, #battleHud[data-capture-ui="v2186"] #captureBalls .capture-ball-icon > * { width: min(38px, 100%) !important; max-width: 38px !important; height: min(38px, 100%) !important; max-height: 38px !important; } #battleHud[data-capture-ui="v2186"] #captureBalls .capture-ball-quantity { right: 1px !important; bottom: 1px !important; min-width: 18px !important; height: 13px !important; padding: 0 2px !important; font-size: 7px !important; } } @media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) { html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"][data-view="capture"] { --capture-tray-h: 68px; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] .capture-feedback { top: max(8px, env(safe-area-inset-top)) !important; width: min(300px, calc(100% - 320px)) !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] .capture-target-reticle { top: 46% !important; width: clamp(98px, 16vh, 126px) !important; height: clamp(98px, 16vh, 126px) !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] .capture-throw { bottom: calc(var(--capture-tray-h) + 9px) !important; width: 76px !important; min-width: 76px !important; max-width: 76px !important; height: 76px !important; min-height: 76px !important; max-height: 76px !important; } #battleHud[data-capture-ui="v2186"] .capture-throw-icon, #battleHud[data-capture-ui="v2186"] .capture-throw-icon > .item-ball-raster-v37 { width: 72px !important; min-width: 72px !important; max-width: 72px !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] .capture-gesture-hint { display: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #capturePanel.combat-capture-panel { grid-template-columns: 112px minmax(0, 1fr) !important; grid-template-rows: 1fr !important; grid-template-areas: "copy balls" !important; gap: 5px !important; padding: 5px !important; } #battleHud[data-capture-ui="v2186"] .combat-capture-copy { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: 10px 15px 12px !important; } #battleHud[data-capture-ui="v2186"] .combat-capture-copy > small, #battleHud[data-capture-ui="v2186"] .combat-capture-copy > b, #battleHud[data-capture-ui="v2186"] .combat-capture-copy > strong { grid-column: 1 !important; grid-row: auto !important; align-self: auto !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud[data-capture-ui="v2186"] #captureBalls.combat-capture-balls { grid-template-columns: repeat(var(--capture-ball-count, 15), minmax(34px, 1fr)) !important; grid-template-rows: 1fr !important; gap: 2px !important; } #battleHud[data-capture-ui="v2186"] #captureBalls .capture-ball-icon, #battleHud[data-capture-ui="v2186"] #captureBalls .capture-ball-icon > * { width: min(34px, 100%) !important; max-width: 34px !important; height: min(34px, 100%) !important; max-height: 34px !important; } } @media (max-width: 900px) and (max-height: 650px) and (orientation: portrait) { html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"] .capture-target-reticle { top: 30% !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"] .capture-gesture-hint { gap: 4px !important; max-width: 108px !important; padding: 5px 6px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"] .capture-gesture-hint > i { width: 22px !important; min-width: 22px !important; height: 22px !important; } } @media (prefers-reduced-motion: reduce) { #battleHud[data-capture-ui="v2186"] .capture-live-metrics, #battleHud[data-capture-ui="v2186"] .capture-gesture-hint, #battleHud[data-capture-ui="v2186"] .capture-throw { transition: none !important; } } /* * Terminal capture geometry guard. * Historical battle skins intentionally use very specific !important rules. * Repeating the HUD id keeps this isolated layer authoritative without * changing combat/result layouts or deleting their legacy contracts. */ html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-view="capture"] .battle-shell { position: absolute !important; inset: 0 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; transform: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-view="capture"] #battleStage, html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-view="capture"] #captureStage { position: absolute !important; inset: 0 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; transform: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"] #battleCommandDeck[data-view="capture"] { inset: auto max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: var(--capture-tray-h) !important; min-height: var(--capture-tray-h) !important; max-height: var(--capture-tray-h) !important; transform: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"] #battleCommandDeck[data-view="capture"] #capturePanel.combat-capture-panel { grid-template-columns: 190px minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: "copy balls" !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important; max-height: none !important; padding: 9px 10px !important; overflow: hidden !important; transform: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"] #battleCommandDeck[data-view="capture"] #captureBalls.combat-capture-balls { grid-template-columns: repeat(var(--capture-ball-count, 15), minmax(46px, 1fr)) !important; grid-template-rows: minmax(0, 1fr) !important; grid-auto-flow: row !important; grid-auto-columns: 0 !important; grid-auto-rows: 0 !important; gap: 4px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"] #battleCommandDeck[data-view="capture"] #captureBalls.combat-capture-balls > button { width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; grid-template-rows: 1fr !important; gap: 0 !important; padding: 3px !important; } @media (max-width: 900px), (hover: none) and (pointer: coarse) { html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"] #battleCommandDeck[data-view="capture"] { inset: auto max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"] #battleCommandDeck[data-view="capture"] #capturePanel.combat-capture-panel { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 38px minmax(0, 1fr) !important; grid-template-areas: "copy" "balls" !important; gap: 4px !important; padding: 6px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"] #battleCommandDeck[data-view="capture"] #captureBalls.combat-capture-balls { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-template-rows: repeat(3, minmax(0, 1fr)) !important; grid-auto-columns: 0 !important; grid-auto-rows: 0 !important; gap: 3px !important; } } @media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) { html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"] #battleCommandDeck[data-view="capture"] #capturePanel.combat-capture-panel { grid-template-columns: 112px minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: "copy balls" !important; gap: 5px !important; padding: 5px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"] #battleCommandDeck[data-view="capture"] #captureBalls.combat-capture-balls { grid-template-columns: repeat(var(--capture-ball-count, 15), minmax(34px, 1fr)) !important; grid-template-rows: minmax(0, 1fr) !important; gap: 2px !important; } } /* pk-style-source:76 */ /* /capture-v2202.css */ /* Capture window v2.20.2: compact arena, clean raster balls and provenance UI. */ html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-capture-ui="v2186"][data-capture-layout="v2202"]:is([data-view="capture"], .is-capture-result) { --capture-tray-h: 108px; position: fixed !important; top: 50% !important; right: auto !important; bottom: auto !important; left: 50% !important; width: min(1180px, calc(100vw - 32px)) !important; min-width: 0 !important; max-width: 1180px !important; height: min(720px, calc(100dvh - 32px)) !important; min-height: 0 !important; max-height: 720px !important; margin: 0 !important; transform: translate(-50%, -50%) !important; overflow: hidden !important; border: 1px solid rgba(224, 251, 255, .96) !important; border-radius: 28px !important; background: #e9f7fa !important; box-shadow: 0 28px 84px rgba(1, 26, 38, .34), 0 0 0 1px rgba(19, 120, 151, .12) !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-layout="v2202"][data-view="capture"] #battleCanvas { filter: brightness(1.1) saturate(1.04) !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-layout="v2202"][data-view="capture"] #captureStage::before { background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.02) 0 50%, rgba(4,72,91,.025) 82%, rgba(2,42,56,.08) 100%), linear-gradient(180deg, rgba(255,255,255,.025), transparent 62%, rgba(4,48,61,.1)) !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-layout="v2202"] .capture-feedback { color: #123e53 !important; background: rgba(247, 253, 255, .93) !important; border-color: rgba(118, 207, 230, .88) !important; box-shadow: 0 10px 28px rgba(3, 49, 67, .16), inset 0 1px rgba(255,255,255,.95) !important; text-shadow: none !important; -webkit-backdrop-filter: blur(8px) saturate(1.05) !important; backdrop-filter: blur(8px) saturate(1.05) !important; } #battleHud[data-capture-layout="v2202"] .capture-feedback #captureFeedbackKicker { color: #128eb7 !important; } #battleHud[data-capture-layout="v2202"] .capture-feedback #captureQuality, #battleHud[data-capture-layout="v2202"] .capture-feedback #captureAttempt { color: #153d51 !important; } #battleHud[data-capture-layout="v2202"] .capture-aim-guide path { stroke: rgba(239, 253, 255, .98) !important; stroke-width: 3 !important; filter: drop-shadow(0 2px 3px rgba(0, 52, 71, .65)) drop-shadow(0 0 5px rgba(69, 217, 255, .55)) !important; } #battleHud[data-capture-layout="v2202"] .item-ball-raster-v2202 { background-size: 500% 300% !important; background-color: transparent !important; background-repeat: no-repeat !important; filter: drop-shadow(0 3px 3px rgba(5, 34, 47, .2)) !important; } #battleHud[data-capture-layout="v2202"] #captureBalls > button { contain: layout paint !important; } #battleHud[data-capture-layout="v2202"] #captureBalls .capture-ball-icon { overflow: visible !important; } .pokemon-caught-ball-v2202 { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: #315d72; } .pokemon-caught-ball-v2202 > .pokemon-caught-ball-art-v2202, .pokemon-caught-ball-v2202 > .pokemon-caught-ball-art-v2202 > * { display: block; flex: 0 0 auto; width: 26px; height: 26px; object-fit: contain; } .pokemon-caught-ball-v2202 > span:last-child { display: grid; min-width: 0; text-align: left; } .pokemon-caught-ball-v2202 small { color: #178bb6; font-size: 7px; font-weight: 950; letter-spacing: .09em; } .pokemon-caught-ball-v2202 b { overflow: hidden; color: #244c61; font-size: 9px; font-weight: 900; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .pokemon-caught-ball-v2202.is-team { align-self: center; max-width: 100%; margin-top: 2px; } .pokemon-caught-ball-v2202.is-team > .pokemon-caught-ball-art-v2202, .pokemon-caught-ball-v2202.is-team > .pokemon-caught-ball-art-v2202 > * { width: 20px; height: 20px; } .pokemon-caught-ball-v2202.is-center { margin-top: 4px; } .pokemon-caught-ball-fact-v2202 .pokemon-caught-ball-v2202 { width: 100%; } .pokemon-caught-ball-fact-v2202 .pokemon-caught-ball-v2202 > .pokemon-caught-ball-art-v2202, .pokemon-caught-ball-fact-v2202 .pokemon-caught-ball-v2202 > .pokemon-caught-ball-art-v2202 > * { width: 36px; height: 36px; } .pokemon-caught-ball-partner-v2202 { display: grid !important; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #ffc94c, #ef7e25); box-shadow: 0 3px 8px rgba(167, 86, 13, .22); font-size: 12px; } .capture-result-ball-v2202, .capture-result-ball-v2202 > * { width: 112px !important; height: 112px !important; object-fit: contain !important; } @media (max-width: 900px), (hover: none) and (pointer: coarse) { html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-capture-ui="v2186"][data-capture-layout="v2202"]:is([data-view="capture"], .is-capture-result) { --capture-tray-h: 184px; top: 50% !important; right: auto !important; bottom: auto !important; left: 50% !important; width: calc(100vw - 10px) !important; max-width: calc(100vw - 10px) !important; height: min(760px, calc(100dvh - 10px)) !important; max-height: calc(100dvh - 10px) !important; transform: translate(-50%, -50%) !important; border: 1px solid rgba(224, 251, 255, .94) !important; border-radius: 18px !important; box-shadow: 0 16px 48px rgba(1, 26, 38, .3) !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-layout="v2202"] .capture-target-reticle { top: 39% !important; } #battleHud[data-capture-layout="v2202"] #captureBalls .capture-ball-icon, #battleHud[data-capture-layout="v2202"] #captureBalls .capture-ball-icon > * { width: min(42px, 100%) !important; max-width: 42px !important; height: min(42px, 100%) !important; max-height: 42px !important; } } @media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) { html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-capture-ui="v2186"][data-capture-layout="v2202"]:is([data-view="capture"], .is-capture-result) { --capture-tray-h: 68px; width: calc(100vw - 12px) !important; height: calc(100dvh - 12px) !important; max-height: calc(100dvh - 12px) !important; border-radius: 16px !important; } } @media (prefers-reduced-motion: reduce) { #battleHud[data-capture-layout="v2202"] #battleCanvas { filter: brightness(1.08) !important; } } /* pk-style-source:77 */ /* /capture-v2203.css */ @media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) { html[data-game-theme] body.is-battling #battleHud#battleHud[data-capture-continuity="v2203"][data-view="capture"] #captureThrow { width: 64px !important; height: 64px !important; bottom: calc(var(--capture-tray-h) + 16px) !important; } } /* * Capture continuity v2.20.3. * * Capture and its terminal result are states of the existing battle arena. * This layer deliberately never resizes or paints the root battle HUD. */ html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"]:is([data-view="capture"], .is-capture-result) { position: fixed !important; inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; transform: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; isolation: isolate !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"][data-view="capture"] .battle-shell, html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"].is-capture-result .battle-shell { position: absolute !important; inset: auto !important; top: 50% !important; right: auto !important; bottom: auto !important; left: 50% !important; width: var(--battle-modal-width) !important; min-width: 0 !important; max-width: none !important; height: var(--battle-modal-height) !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; transform: translate(-50%, -50%) !important; overflow: hidden !important; border: 1px solid var(--bui-line-strong) !important; border-radius: 24px !important; background: transparent !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bui-accent) 13%, transparent), 0 24px 62px var(--bui-shadow) !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"]:is([data-view="capture"], .is-capture-result) #battleStage { position: relative !important; inset: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; transform: none !important; overflow: hidden !important; border: 0 !important; border-radius: inherit !important; background: transparent !important; box-shadow: inset 0 0 0 1px rgba(109, 217, 242, .22) !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"][data-view="capture"] #captureStage::before { background: radial-gradient(circle at 50% 43%, transparent 0 52%, rgba(4, 55, 69, .025) 78%, rgba(2, 33, 44, .11) 100%), linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 64%, rgba(4, 43, 55, .1)) !important; } /* Captured is an integrated arena HUD, not a modal placed over a modal. */ html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision.battle-result-layer:not([hidden]) { position: absolute !important; z-index: 86 !important; inset: 0 !important; width: auto !important; height: auto !important; padding: 16px !important; display: grid !important; place-items: end center !important; align-content: end !important; overflow: hidden !important; transform: none !important; border: 0 !important; border-radius: inherit !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; pointer-events: none !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision::before, html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision::after { content: none !important; display: none !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-card { position: relative !important; inset: auto !important; width: min(950px, calc(100% - 12px)) !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr) !important; grid-template-rows: auto 48px !important; gap: 9px 11px !important; align-self: end !important; align-content: end !important; overflow: visible !important; transform: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; animation: v2203-capture-result-in .28s cubic-bezier(.2, .74, .2, 1) both !important; pointer-events: none !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-card::before, html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-card::after { content: none !important; display: none !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-outcome { grid-column: 1 !important; grid-row: 1 / 3 !important; width: 100% !important; min-height: 130px !important; padding: 13px 15px !important; display: grid !important; grid-template-columns: 66px minmax(0, 1fr) !important; align-items: center !important; gap: 12px !important; border: 1px solid rgba(164, 226, 236, .72) !important; border-radius: 18px !important; background: rgba(245, 252, 253, .94) !important; box-shadow: 0 10px 28px rgba(3, 40, 53, .18), inset 0 1px rgba(255, 255, 255, .95) !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-emblem, html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-emblem > .combat-result-art, html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-emblem .combat-result-art > * { width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-copy { display: grid !important; gap: 3px !important; min-width: 0 !important; color: #153d51 !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-copy > small { color: #24ad80 !important; font-size: 8px !important; font-weight: 950 !important; letter-spacing: .12em !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-copy > b { color: #153d51 !important; font-size: clamp(27px, 3vw, 40px) !important; line-height: .96 !important; text-shadow: none !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-copy > em { color: #527487 !important; font-size: 9px !important; line-height: 1.28 !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-drops { grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; min-height: 73px !important; padding: 8px 10px 9px !important; display: grid !important; gap: 5px !important; border: 1px solid rgba(164, 226, 236, .72) !important; border-radius: 16px !important; background: rgba(245, 252, 253, .94) !important; box-shadow: 0 10px 28px rgba(3, 40, 53, .16), inset 0 1px rgba(255, 255, 255, .95) !important; pointer-events: auto !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-drops > header { min-height: 10px !important; color: #249a76 !important; font-size: 7px !important; letter-spacing: .11em !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision #battleRewardList { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-reward-drop { min-height: 44px !important; padding: 4px 7px !important; display: grid !important; grid-template-columns: 38px minmax(0, 1fr) auto !important; grid-template-rows: 1fr !important; align-items: center !important; gap: 6px !important; border: 1px solid rgba(57, 157, 187, .14) !important; border-radius: 11px !important; background: rgba(255, 255, 255, .76) !important; box-shadow: none !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-reward-drop::before { content: none !important; display: none !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-reward-drop-art { grid-column: 1 !important; grid-row: 1 !important; width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-reward-drop > span { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; text-align: left !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-reward-drop > span > b { min-height: 0 !important; color: #234c61 !important; font-size: 8px !important; line-height: 1.15 !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-reward-drop > span > small { color: #6a8796 !important; font-size: 7px !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-reward-drop > strong { grid-column: 3 !important; grid-row: 1 !important; color: #36be8b !important; font-size: 15px !important; white-space: nowrap !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-actions { grid-column: 2 !important; grid-row: 2 !important; width: 100% !important; min-height: 48px !important; margin: 0 !important; display: grid !important; align-items: stretch !important; pointer-events: auto !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-actions[data-mode="single"] { width: 100% !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-action { width: 100% !important; min-height: 48px !important; margin: 0 !important; border-radius: 14px !important; } @keyframes v2203-capture-result-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1100px) { html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"]:is([data-view="capture"], .is-capture-result) .battle-shell { min-width: 0 !important; min-height: 0 !important; border-radius: 21px !important; } } @media (max-width: 760px), (hover: none) and (pointer: coarse) { html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"]:is([data-view="capture"], .is-capture-result) { inset: 0 !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; transform: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"]:is([data-view="capture"], .is-capture-result) .battle-shell { top: var(--pk-mobile-vv-offset-top, 0) !important; right: auto !important; bottom: auto !important; left: var(--pk-mobile-vv-offset-left, 0) !important; width: var(--battle-modal-width) !important; min-width: 0 !important; max-width: 100vw !important; height: var(--battle-modal-height) !important; min-height: 0 !important; max-height: 100dvh !important; transform: none !important; border: 0 !important; border-radius: 0 !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision.battle-result-layer:not([hidden]) { padding: max(7px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)) !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-card { width: min(520px, 100%) !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto 44px !important; gap: 6px !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-outcome { grid-column: 1 !important; grid-row: 1 !important; min-height: 62px !important; padding: 7px 9px !important; grid-template-columns: 48px minmax(0, 1fr) !important; gap: 8px !important; border-radius: 14px !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-emblem, html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-emblem > .combat-result-art, html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-emblem .combat-result-art > * { width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-copy > b { font-size: clamp(21px, 6.8vw, 28px) !important; } html[data-game-theme] body.is-battling #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-copy > em { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-drops { grid-column: 1 !important; grid-row: 2 !important; min-height: 65px !important; padding: 6px 7px !important; border-radius: 13px !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-reward-drop { min-height: 38px !important; padding: 3px 5px !important; grid-template-columns: 32px minmax(0, 1fr) auto !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-reward-drop-art { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-actions { grid-column: 1 !important; grid-row: 3 !important; min-height: 44px !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-action { min-height: 44px !important; } } @media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) { html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-card { width: min(850px, 100%) !important; grid-template-columns: minmax(230px, .85fr) minmax(340px, 1.15fr) !important; grid-template-rows: auto 42px !important; gap: 5px 7px !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-outcome { grid-column: 1 !important; grid-row: 1 / 3 !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-drops { grid-column: 2 !important; grid-row: 1 !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-actions { grid-column: 2 !important; grid-row: 2 !important; min-height: 42px !important; } html[data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-action { min-height: 42px !important; } } @media (prefers-reduced-motion: reduce) { #battleHud[data-capture-continuity="v2203"].is-capture-result #battleDecision .battle-result-card { animation: none !important; } } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"][data-view="capture"] { --capture-tray-h: 120px; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #battleCommandDeck[data-view="capture"] { padding: 0 !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #capturePanel .combat-capture-copy { grid-template-rows: 10px 18px 14px 26px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #battleCommandDeck[data-view="capture"] #capturePanel.combat-capture-panel { grid-template-columns: 185px minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: "copy balls" !important; gap: 12px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] .capture-carousel-v2203 { grid-area: balls; display: flex; align-items: center; gap: 6px; min-width: 0; height: 100%; overflow: hidden; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #battleCommandDeck[data-view="capture"] #captureBalls.combat-capture-balls { display: flex !important; flex: 1 1 0 !important; align-items: stretch !important; width: 0 !important; height: 100% !important; gap: 6px !important; padding: 2px 2px 7px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #57b5d0 transparent; touch-action: pan-x; overscroll-behavior-x: contain; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #battleCommandDeck[data-view="capture"] #captureBalls.combat-capture-balls > button { display: grid !important; flex: 0 0 76px !important; width: 76px !important; height: 84px !important; grid-template-rows: 55px 16px !important; align-content: center !important; justify-items: center !important; padding: 4px !important; scroll-snap-align: start; border-radius: 14px !important; opacity: 1 !important; filter: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #captureBalls > button:disabled { opacity: .65 !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #captureBalls > button.is-selected { border: 2px solid #129fcc !important; background: #e1f7fc !important; box-shadow: inset 0 0 0 1px white !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #captureBalls .capture-ball-icon, html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #captureBalls .capture-ball-icon > * { width: 54px !important; max-width: 54px !important; height: 54px !important; max-height: 54px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #captureBalls > button > b { display: block !important; font-size: 10px !important; color: #173e52 !important; line-height: 14px !important; max-width: 68px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #captureBalls .capture-ball-odds { display: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #captureBalls .capture-ball-quantity { top: 43px !important; right: 3px !important; bottom: auto !important; font-size: 9px !important; color: #fff !important; background: #225a6e !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] .capture-scroll-v2203 { flex: 0 0 30px; display: grid; place-items: center; width: 30px; height: 58px; padding: 0; border: 1px solid #add6e5; border-radius: 12px; color: #147da0; background: #effaff; font: 700 28px/1 sans-serif; cursor: pointer; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] .capture-scroll-v2203:disabled { opacity: .35; cursor: default; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] .capture-scroll-v2203[hidden] { display: none; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #captureSelectedChance { display: inline-block !important; padding: 5px 8px !important; border-radius: 9px; background: #dff5fd; color: #087fac !important; font-size: 12px !important; line-height: 16px !important; } .item-graphic-shell > img.item-ball-image-v2203 { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; background: none !important; border: 0 !important; border-radius: 0 !important; transform: none !important; } .team-slot-main-v56 { display: grid !important; grid-template-rows: 26px minmax(36px, 1fr) auto !important; height: 100% !important; min-height: 0 !important; } .team-slot-art-v56 { min-height: 0 !important; overflow: hidden !important; } .team-slot-portrait-v56 { max-height: 100% !important; object-fit: contain !important; } .team-slot-copy-v56 { min-height: 0 !important; gap: 2px !important; padding-bottom: 5px !important; } .pokemon-caught-ball-v2202 { padding: 3px 6px; border-radius: 8px; background: #e7f6fc; } .pokemon-caught-ball-v2202 small { color: #17637f !important; } .pokemon-caught-ball-v2202 b { color: #173e52 !important; } @media (max-width: 760px) { html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"][data-view="capture"] { --capture-tray-h: 148px; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #battleCommandDeck[data-view="capture"] #capturePanel.combat-capture-panel { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 38px minmax(0, 1fr) !important; grid-template-areas: "copy" "balls" !important; gap: 4px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #capturePanel .combat-capture-copy { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: 18px 18px !important; gap: 0 6px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #capturePanel .combat-capture-copy > small { display: none !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #captureSelectedName { grid-column: 1; grid-row: 1; font-size: 13px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #captureSelectedEffect { grid-column: 1; grid-row: 2; font-size: 9px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #captureSelectedChance { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 10px !important; padding: 4px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] .capture-scroll-v2203 { flex-basis: 24px; width: 24px; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #battleCommandDeck[data-view="capture"] #captureBalls.combat-capture-balls > button { flex-basis: 68px !important; width: 68px !important; height: 76px !important; grid-template-rows: 48px 14px !important; } } @media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) { html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"][data-view="capture"] { --capture-tray-h: 96px; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"][data-view="capture"] .battle-shell { border: 0 !important; border-radius: 0 !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #battleCommandDeck[data-view="capture"] #capturePanel.combat-capture-panel { grid-template-columns: 140px minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: "copy balls" !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #battleCommandDeck[data-view="capture"] #captureBalls.combat-capture-balls > button { height: 68px !important; grid-template-rows: 44px 14px !important; } html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #captureBalls .capture-ball-icon, html[data-ui-revision="pokemon-next"][data-game-theme] body.is-battling #battleHud#battleHud[data-battle-ui="2.9.9"][data-battle-skin="v2185"][data-capture-ui="v2186"][data-capture-continuity="v2203"] #captureBalls .capture-ball-icon > * { width: 46px !important; height: 46px !important; } } /* pk-style-source:78 */ /* /kanto-combat-v1.css */ .kanto-mastery { color:#193e54; font-family:"Segoe UI Variable","Trebuchet MS",system-ui,sans-serif; } .kanto-mastery header { display:flex; align-items:start; justify-content:space-between; gap:12px; } .kanto-mastery header span { display:grid; gap:3px; } .kanto-mastery header small { color:#1e9e7b; font-size:9px; font-weight:900; letter-spacing:.11em; } .kanto-mastery header strong { display:grid; gap:2px; min-width:76px; padding:8px 10px; border:1px solid #a9d9e8; border-radius:12px; background:linear-gradient(135deg,#e7faff,#d9f3fb); color:#09688b; font-size:20px; line-height:1; text-align:center; } .kanto-mastery header strong small { color:#437388; font-size:8px; } .kanto-mastery p { font-size:12px; line-height:1.5; } .kanto-mastery-evolution-note { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:11px 0 0; padding:10px 12px; border:1px solid #cbd9ff; border-radius:12px; background:linear-gradient(100deg,#f6f4ff,#eff9ff); color:#465a9f; } .kanto-mastery-evolution-note b { font-size:11px; }.kanto-mastery-evolution-note span { color:#65788b; font-size:10px; text-align:right; }.kanto-mastery-evolution-note.is-complete { border-color:#bfe8d0; background:linear-gradient(100deg,#f2fff7,#effcf8); color:#247c58; } .kanto-mastery-reset { width:100%; margin-top:9px; border-color:#90d2b4!important; background:linear-gradient(135deg,#eafff2,#dff8ed)!important; color:#176a4b!important; font-weight:900; } .kanto-mastery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:12px; margin-top:12px; } .kanto-mastery-card { background:linear-gradient(145deg,#fff,#f3fbff); border:1px solid #b9dae9; border-radius:16px; padding:14px; min-width:0; box-shadow:0 4px 12px rgba(37,95,119,.07); } .kanto-mastery-title { display:flex; align-items:center; gap:10px; } .kanto-mastery-title span { display:grid; gap:4px; min-width:0; overflow-wrap:anywhere; } .kanto-mastery-title small { font-size:9px; color:#376b82; } .kanto-mastery-title b { font-size:15px; } .kanto-mastery-art,.kanto-mastery-art img { width:52px!important; height:52px!important; flex:0 0 52px; object-fit:contain; } .kanto-mastery-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; } .kanto-mastery button { padding:8px; border:1px solid #82bed7; border-radius:9px; background:#e4f5fe; color:#154861; min-height:38px; cursor:pointer; font-family:inherit; font-weight:800; } .kanto-mastery-actions [aria-pressed=true] { background:#087fad; color:white; } .kanto-mastery button:disabled { opacity:.45; cursor:default; } @media(max-width:600px) { .kanto-mastery-grid { grid-template-columns:1fr; } .kanto-mastery header { flex-wrap:wrap; } } /* Full Gen-I learnsets: eight researched techniques, four active battle slots. */ .dex-detail-v43 .dex-skills-section { grid-template-rows:auto auto auto auto; overflow:visible; } .dex-combat-plan-v2211{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:center;padding:11px 12px;border:1px solid color-mix(in srgb,var(--dex-accent) 36%,#cde1e9);border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--dex-accent) 9%,#fff),#f7fcfe)} .dex-combat-plan-v2211 span{min-width:0}.dex-combat-plan-v2211 small{display:block;color:#bf8311;font-size:9px;font-weight:900;letter-spacing:.1em}.dex-combat-plan-v2211 span>b{display:block;margin-top:2px;color:#163b50;font-size:14px}.dex-combat-plan-v2211 p{margin:3px 0 0;color:#557385;font-size:10px;line-height:1.35}.dex-combat-plan-v2211 ol{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none}.dex-combat-plan-v2211 li{display:flex;align-items:center;gap:4px;min-width:0;max-width:calc(50% - 3px);padding:5px 7px;border:1px solid #d8e9ef;border-radius:10px;background:#fff;color:#315a6c;font-size:9px}.dex-combat-plan-v2211 li i{display:grid;place-items:center;flex:0 0 16px;height:16px;border-radius:50%;background:var(--dex-accent);color:#fff;font-style:normal;font-weight:900}.dex-combat-plan-v2211 li b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:800px){.dex-combat-plan-v2211 li{flex:1 1 calc(50% - 3px);max-width:none}} .dex-detail-v43 .dex-skills-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .dex-detail-v43 .dex-skill-detail { grid-column:1/-1; } .dex-detail-v43 .dex-skill-detail p { max-height:none; overflow:visible; } .dex-detail-v43 .dex-stats-card { font-family:"Segoe UI Variable","Trebuchet MS",system-ui,sans-serif; } .dex-detail-v43 .dex-stat-row > span i { display:grid; place-items:center; width:22px; height:22px; overflow:visible; border:0; background:transparent; } .dex-detail-v43 .dex-stat-row > span i img { width:22px; height:22px; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(30,65,93,.15)); } @media(min-width:801px) { .game-screen .side-panel.is-pokedex-detail #sidePanelContent { overflow-y:auto!important; overscroll-behavior:contain; } .dex-detail-v43 { height:auto; min-height:100%; } .dex-detail-v43 .dex-dossier-grid { align-items:start; } .dex-detail-v43 .dex-dossier-right { grid-template-rows:auto auto auto; align-content:start; } } @media(max-width:760px) { .dex-detail-v43 .dex-skills-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:430px) { .dex-detail-v43 .dex-skills-grid { grid-template-columns:1fr; } } /* Owned Pokemon dossier: genes, stat-specific training pills and readable mastery. */ .pokemon-instance-v2324 { font-family:"Segoe UI Variable","Trebuchet MS",system-ui,sans-serif; } .pokemon-genome-v2324 { display:grid!important; gap:10px; padding:13px!important; border:1px solid #cbbdf5!important; background:linear-gradient(145deg,#fbf9ff,#eefbfa)!important; } .pokemon-genome-v2324 header { display:flex; align-items:center; gap:10px; min-width:0; } .pokemon-genome-v2324 header>img { width:48px; height:48px; flex:0 0 48px; filter:drop-shadow(0 3px 5px rgba(94,70,160,.16)); } .pokemon-genome-v2324 header span { display:grid; gap:2px; min-width:0; } .pokemon-genome-v2324 header small { color:#6c54af; font-size:9px; font-weight:900; letter-spacing:.08em; } .pokemon-genome-v2324 header b { overflow:hidden; color:#1c3d58; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; letter-spacing:.05em; text-overflow:ellipsis; white-space:nowrap; } .pokemon-genome-v2324 header em { color:#648091; font-size:10px; font-style:normal; } .pokemon-gene-grid-v2324 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; } .pokemon-gene-stat-v2324 { display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:4px; min-width:0; padding:6px; border:1px solid color-mix(in srgb,var(--gene-tone) 30%,#d7e7ec); border-radius:9px; background:#fff; } .pokemon-gene-stat-v2324 img { width:19px; height:19px; object-fit:contain; }.pokemon-gene-stat-v2324 i { overflow:hidden; color:#557386; font-size:9px; font-style:normal; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.pokemon-gene-stat-v2324 b { color:var(--gene-tone); font-size:13px; }.pokemon-gene-stat-v2324 b small { color:#7890a0; font-size:8px; } .pokemon-genome-v2324>p { margin:0; color:#61798b; font-size:10px; line-height:1.35; } .pokemon-training-v2324 .pokemon-section-title>strong { display:grid!important; grid-template-columns:28px auto; align-items:center; column-gap:5px; min-width:78px!important; padding:7px 9px!important; }.pokemon-training-v2324 .pokemon-section-title>strong img { width:28px!important; height:28px!important; grid-row:span 2; object-fit:contain; }.pokemon-training-v2324 .pokemon-section-title>strong small { grid-column:2; color:#5f7d8c; font-size:8px; font-weight:800; white-space:nowrap; } .pokemon-training-hint-v2324 { margin:8px 0 10px; color:#557384; font-size:10px; line-height:1.38; } .pokemon-energy-readout-v2324 { display:grid; grid-template-columns:24px auto 1fr; align-items:center; gap:4px 6px; margin-top:9px; padding:7px 8px; border:1px solid #e5c45e; border-radius:10px; background:linear-gradient(110deg,#fffbe8,#fff); color:#705a1d; }.pokemon-energy-readout-v2324>span { display:grid; grid-row:span 2; place-items:center; width:24px; height:24px; color:#e1a719; }.pokemon-energy-readout-v2324>span svg { width:20px; height:20px; }.pokemon-energy-readout-v2324 b { font-size:15px; line-height:1; }.pokemon-energy-readout-v2324 small { color:#796b3e; font-size:9px; font-weight:800; }.pokemon-energy-readout-v2324 em { grid-column:2/-1; color:#96845a; font-size:8px; font-style:normal; } .pokemon-stat-tile-v2324 { grid-template-columns:28px minmax(0,1fr) auto!important; border-color:color-mix(in srgb,var(--stat-tone) 34%,#cfe5ee)!important; background:linear-gradient(125deg,color-mix(in srgb,var(--stat-tone) 7%,#fff),#fbfeff)!important; } .pokemon-stat-glyph-v2324 { width:25px; height:25px; align-self:start; margin-top:4px; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(20,56,78,.15)); } .pokemon-stat-tile-v2324>button { display:grid!important; grid-template-columns:27px auto; align-items:center; gap:2px; min-width:45px; padding:4px!important; border-color:color-mix(in srgb,var(--stat-tone) 50%,#b7d7e3)!important; background:#fff!important; color:#234d60!important; }.pokemon-stat-tile-v2324>button img { width:25px; height:25px; object-fit:contain; }.pokemon-stat-tile-v2324>button strong { font-size:10px; }.pokemon-stat-tile-v2324>button:disabled { background:#f1f5f6!important; } .pokemon-evolution-v48 { position:relative; overflow:hidden; }.pokemon-evolution-v48:after { position:absolute; right:8px; bottom:-14px; color:color-mix(in srgb,var(--pokemon-accent,#4aa7e8) 18%,transparent); content:"↑"; font-size:64px; font-weight:900; line-height:1; pointer-events:none; } .pokemon-evolution-v48>* { position:relative; z-index:1; } .kanto-mastery { display:grid; gap:10px; }.kanto-mastery>p { margin:0; padding:9px 11px; border-radius:10px; background:#f2f8fa; color:#5b7586; font-size:10px; } .kanto-mastery-card { min-height:156px; }.kanto-mastery-card>p { min-height:39px; margin:9px 0; color:#5b7586; font-size:10px; line-height:1.38; }.kanto-mastery-actions { align-items:center; }.kanto-mastery-actions>div { display:flex; gap:4px; }.kanto-mastery-actions>div button { min-width:29px; padding:5px; } @media(max-width:760px) { .pokemon-gene-grid-v2324 { grid-template-columns:repeat(3,minmax(0,1fr)); }.pokemon-genome-v2324>p { display:none; }.pokemon-stat-tile-v2324 { grid-template-columns:25px minmax(0,1fr) auto!important; }.pokemon-stat-glyph-v2324 { width:22px; height:22px; } } @media(max-width:430px) { .pokemon-gene-grid-v2324 { grid-template-columns:repeat(2,minmax(0,1fr)); }.pokemon-genome-v2324 header>img { width:40px; height:40px; flex-basis:40px; }.pokemon-stat-tile-v2324>button { grid-template-columns:22px auto; min-width:39px; }.pokemon-stat-tile-v2324>button img { width:21px; height:21px; } } /* v2.32.5 — owned Pokémon dossier: one readable system, no inherited card geometry. */ .pokemon-instance-v2325 { --dossier-ink:#163a55; --dossier-muted:#647d90; --dossier-line:#d7e6ed; color:var(--dossier-ink); font-family:"Segoe UI Variable","Trebuchet MS",system-ui,sans-serif; } .pokemon-detail-head-v2325 { margin-bottom:10px; padding-bottom:9px; border-bottom:1px solid var(--dossier-line); } .pokemon-instance-grid-v2325 { grid-template-columns:minmax(280px,318px) minmax(0,1fr)!important; gap:14px!important; overflow:visible!important; } .pokemon-instance-left-v2325,.pokemon-instance-right-v2325 { gap:12px!important; } .pokemon-detail-hero-v2325 { min-height:164px!important; padding:13px!important; border-color:color-mix(in srgb,var(--species-accent) 32%,var(--dossier-line))!important; border-radius:18px!important; box-shadow:0 7px 18px rgba(22,67,91,.07); } .pokemon-detail-hero-v2325 .pokemon-detail-art-v46 { align-self:center; }.pokemon-detail-hero-v2325 h2 { font-size:1.35rem!important; }.pokemon-detail-hero-v2325 .pokemon-exp-track { margin-top:9px; } .pokemon-energy-readout-v2325 { display:grid; grid-template-columns:25px auto 1fr; align-items:center; gap:0 7px; margin-top:9px; padding:7px 9px; border:1px solid #eedb8d; border-radius:11px; background:linear-gradient(120deg,#fffaf0,#fff); } .pokemon-energy-readout-v2325>span { display:grid; grid-row:span 2; place-items:center; width:25px; height:25px; color:#dd9e17; }.pokemon-energy-readout-v2325>span svg { width:20px; height:20px; }.pokemon-energy-readout-v2325>b { color:#674b11; font-size:16px; line-height:1; }.pokemon-energy-readout-v2325 small { color:#856a2c; font-size:9px; font-weight:900; }.pokemon-energy-readout-v2325 em { grid-column:2/-1; margin:2px 0 0!important; color:#9a8251!important; font-size:8px!important; } .pokemon-genome-v2325 { display:grid; gap:10px; padding:12px; border:1px solid #cbc4ee; border-radius:18px; background:linear-gradient(145deg,#faf9ff,#f3fbff); box-shadow:0 7px 18px rgba(67,48,126,.05); } .pokemon-genome-head-v2325 { display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:9px; }.pokemon-genome-head-v2325>img { width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(47,57,115,.18)); }.pokemon-genome-head-v2325>span { display:grid; min-width:0; gap:2px; }.pokemon-genome-head-v2325 small { color:#6e56af; font-size:8px; font-weight:900; letter-spacing:.11em; }.pokemon-genome-head-v2325>span>b { overflow:hidden; color:#28495f; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; letter-spacing:.035em; text-overflow:ellipsis; white-space:nowrap; }.pokemon-genome-head-v2325 em { color:var(--dossier-muted); font-size:9px; font-style:normal; }.pokemon-genome-head-v2325>strong { display:grid; place-items:end; color:#6549a2; line-height:1; text-align:right; }.pokemon-genome-head-v2325>strong>b { font-size:20px; }.pokemon-genome-head-v2325>strong small { color:#8d7aa8; font-size:9px; } .pokemon-gene-grid-v2325 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }.pokemon-gene-chip-v2325 { display:grid; grid-template-columns:17px minmax(0,1fr) auto; align-items:center; gap:3px; min-width:0; padding:5px; border:1px solid color-mix(in srgb,var(--gene-tone) 30%,#dbe8ef); border-radius:9px; background:#fff; }.pokemon-gene-chip-v2325 img { width:17px; height:17px; object-fit:contain; }.pokemon-gene-chip-v2325 i { overflow:hidden; color:#617d8f; font-size:8px; font-style:normal; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.pokemon-gene-chip-v2325 b { color:var(--gene-tone); font-size:11px; line-height:1; }.pokemon-gene-chip-v2325 b small { color:#8ca0ad; font-size:7px; }.pokemon-genome-v2325>p { margin:0; color:#718597; font-size:9px; line-height:1.36; } .pokemon-training-v2325 { margin-top:0!important; padding:13px!important; border-color:#cbe3ef!important; border-radius:18px!important; background:linear-gradient(150deg,#fff,#f7fcff)!important; box-shadow:0 7px 18px rgba(22,67,91,.05); }.pokemon-training-v2325>header { display:flex; align-items:center; justify-content:space-between; gap:12px; }.pokemon-training-v2325>header>span { display:grid; gap:2px; min-width:0; }.pokemon-training-v2325>header small { color:#238294; font-size:8px; font-weight:900; letter-spacing:.11em; }.pokemon-training-v2325>header>span>b { color:#153e5a; font-size:17px; }.pokemon-training-v2325>header em { color:var(--dossier-muted); font-size:9px; font-style:normal; }.pokemon-training-v2325>header>strong { display:grid; grid-template-columns:30px auto; grid-template-rows:16px 12px; align-items:center; column-gap:5px; flex:0 0 auto; padding:6px 8px; border:1px solid #d5eaf4; border-radius:12px; background:#edf9ff; }.pokemon-training-v2325>header>strong img { grid-row:span 2; width:30px; height:30px; object-fit:contain; }.pokemon-training-v2325>header>strong>b { color:#126c8a; font-size:16px; line-height:1; }.pokemon-training-v2325>header>strong small { color:#658494; font-size:8px; font-weight:800; white-space:nowrap; }.pokemon-training-v2325>p { margin:9px 0 11px; color:#587488; font-size:10px; line-height:1.38; } .pokemon-training-grid-v2325 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.pokemon-training-row-v2325 { display:grid; grid-template-columns:29px minmax(0,1fr) auto; align-items:center; gap:7px; min-width:0; padding:7px; border:1px solid color-mix(in srgb,var(--stat-tone) 34%,#d6e6ed); border-radius:12px; background:linear-gradient(115deg,color-mix(in srgb,var(--stat-tone) 7%,#fff),#fff); }.pokemon-training-stat-art-v2325 { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; background:#fff; }.pokemon-training-stat-art-v2325 img { width:22px; height:22px; object-fit:contain; }.pokemon-training-stat-copy-v2325 { display:grid; grid-template-columns:auto auto; align-items:baseline; gap:1px 5px; min-width:0; }.pokemon-training-stat-copy-v2325 small { overflow:hidden; color:#536f82; font-size:9px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.pokemon-training-stat-copy-v2325 b { color:#1b405a; font-size:13px; }.pokemon-training-stat-copy-v2325 em { color:#7b93a1; font-size:8px; font-style:normal; }.pokemon-training-stat-copy-v2325>i { grid-column:1/-1; display:block; height:4px; overflow:hidden; border-radius:999px; background:#dfeaf0; }.pokemon-training-stat-copy-v2325>i>u { display:block; height:100%; border-radius:inherit; background:var(--stat-tone); }.pokemon-training-row-v2325>button { display:grid; grid-template-columns:22px auto; grid-template-rows:12px 12px; align-items:center; column-gap:3px; min-width:53px; padding:4px 5px; border:1px solid color-mix(in srgb,var(--stat-tone) 48%,#c5dbe5); border-radius:9px; background:#fff; color:#426579; cursor:pointer; font:inherit; }.pokemon-training-row-v2325>button img { grid-row:span 2; width:22px; height:22px; object-fit:contain; }.pokemon-training-row-v2325>button span { color:var(--stat-tone); font-size:9px; font-weight:900; line-height:1; }.pokemon-training-row-v2325>button strong { color:#527084; font-size:7px; line-height:1; }.pokemon-training-row-v2325>button:disabled { opacity:.53; cursor:not-allowed; filter:saturate(.4); } .pokemon-mastery-section-v2325 { padding:13px!important; border-color:#d4e5ec!important; border-radius:18px!important; box-shadow:0 7px 18px rgba(22,67,91,.04); } .pokemon-facts-v2325 article { min-height:56px!important; }.pokemon-facts-v2325 article i { background:#f2f7fa!important; }.pokemon-facts-v2325 article small { font-size:8px!important; }.pokemon-facts-v2325 article b { font-size:10px!important; } @media(max-width:860px) { .pokemon-instance-grid-v2325 { grid-template-columns:1fr!important; }.pokemon-instance-left-v2325 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }.pokemon-detail-hero-v2325 { grid-column:1/-1; }.pokemon-detail-actions-v46 { grid-column:1/-1; } } @media(max-width:560px) { .pokemon-instance-left-v2325 { grid-template-columns:1fr; }.pokemon-training-grid-v2325 { grid-template-columns:1fr; }.pokemon-gene-grid-v2325 { grid-template-columns:repeat(2,minmax(0,1fr)); }.pokemon-genome-v2325>p { display:block; }.pokemon-detail-hero-v2325 { grid-template-columns:94px minmax(0,1fr)!important; min-height:130px!important; }.pokemon-detail-hero-v2325 .pokemon-detail-portrait-v46 { width:90px!important; height:90px!important; }.pokemon-training-v2325>header>span>b { font-size:15px; }.pokemon-training-v2325>header>strong { min-width:0; } } @media(max-width:380px) { .pokemon-genome-head-v2325 { grid-template-columns:44px minmax(0,1fr); }.pokemon-genome-head-v2325>img { width:44px; height:44px; }.pokemon-genome-head-v2325>strong { display:none; }.pokemon-training-v2325>header em { display:none; }.pokemon-training-row-v2325 { grid-template-columns:26px minmax(0,1fr) auto; gap:5px; }.pokemon-training-stat-art-v2325 { width:26px; height:26px; } } /* pk-style-source:79 */ /* /focused-v2210.css */ /* Focused public refresh based on 2.19.0: brand, Pokédex mode icons and battle scene only. */ :root { --focus-ink:#082c3c; --focus-blue:#168fd0; --focus-yellow:#ffd43f; --focus-paper:#f7fbf5; } .pkl-v2210-focused .pkl-brand img, .pub-brand img, .dex-brand img { object-fit:contain; filter:drop-shadow(0 7px 13px rgba(3,52,73,.2)); } .pkl-v2210-focused .pkl-brand img { width:48px; height:48px; } .pkl-v2210-focused .pkl-brand b { letter-spacing:-.045em; } .pkl-v2210-focused .pkl-brand b > span { color:#0d8cd0; } .pkl-v2210-focused .pkl-brand small { letter-spacing:.24em; color:#567985; } .pub-brand span,.dex-brand b { letter-spacing:-.04em; } .pub-brand i,.dex-brand b > span { color:#ffd43f; } /* Dedicated illustrated Pokédex devices replace the previous CSS mock devices. */ .dex-mode-switch .dex-mode-device { width:clamp(104px,10vw,156px)!important; height:clamp(104px,10vw,156px)!important; flex:0 0 clamp(104px,10vw,156px)!important; border:0!important; border-radius:0!important; background-color:transparent!important; background-repeat:no-repeat!important; background-position:center!important; background-size:contain!important; box-shadow:none!important; transform:rotate(-2deg); transition:transform .25s ease,filter .25s ease; filter:drop-shadow(0 18px 20px rgba(5,45,65,.17)); } .dex-mode-switch a:hover .dex-mode-device { transform:translateY(-5px) rotate(1deg) scale(1.03); filter:drop-shadow(0 24px 24px rgba(5,45,65,.23)); } .dex-mode-switch .dex-mode-device::before, .dex-mode-switch .dex-mode-device::after, .dex-mode-switch .dex-mode-device > span { display:none!important; content:none!important; } .dex-mode-switch .dex-mode-device.is-original { background-image:url('/focused-assets-v2210/pokedex-original-v2210.webp')!important; } .dex-mode-switch .dex-mode-device.is-game { background-image:url('/focused-assets-v2210/pokedex-game-v2210.webp')!important; } .dex-mode-switch > a { min-height:190px!important; overflow:hidden; } /* Battle section: readable light command console and full-colour combatants. */ .pkl-v2210-focused .ppx-battle-shade { background:linear-gradient(90deg,rgba(237,251,255,.97) 0%,rgba(237,251,255,.72) 35%,rgba(4,40,55,.04) 64%,rgba(4,40,55,.16) 100%)!important; } .pkl-v2210-focused .ppx-battle-layout { padding-top:104px; padding-bottom:24px; } .pkl-v2210-focused .ppx-battle-head { position:relative; z-index:5; max-width:580px; padding:27px 30px 25px; border:1px solid rgba(255,255,255,.75); border-radius:25px; color:var(--focus-ink); background:rgba(250,255,253,.82); box-shadow:0 22px 55px rgba(6,66,87,.13); backdrop-filter:blur(18px) saturate(1.16); } .pkl-v2210-focused .ppx-battle-head h2 { margin-top:12px; color:var(--focus-ink); font-size:clamp(45px,4.5vw,72px); line-height:.9; letter-spacing:-.065em; } .pkl-v2210-focused .ppx-battle-head p { max-width:510px; color:#476774; font-size:13px; line-height:1.58; } .pkl-v2210-focused .ppx-battle-head .pkl-eyebrow { color:#0f88be; } .pkl-v2210-focused .ppx-battle-stage { min-height:330px; isolation:isolate; } .pkl-v2210-focused .ppx-battle-stage::before { content:""; position:absolute; z-index:-1; left:50%; bottom:8px; width:min(720px,72vw); height:170px; border:2px solid rgba(255,211,63,.7); border-radius:50%; transform:translateX(-50%); background:radial-gradient(ellipse,rgba(255,255,255,.6),rgba(60,198,235,.09) 56%,transparent 70%); box-shadow:0 0 0 14px rgba(255,255,255,.2),0 34px 65px rgba(7,60,81,.13); } .pkl-v2210-focused .ppx-fighter img { opacity:1!important; filter:drop-shadow(0 26px 20px rgba(4,41,57,.22)) saturate(1.13)!important; } .pkl-v2210-focused .ppx-fighter.is-player img { transform:scale(1.04); } .pkl-v2210-focused .ppx-fighter > span { min-width:168px; padding:10px 13px 11px!important; border:1px solid rgba(255,255,255,.8)!important; border-radius:14px!important; color:var(--focus-ink)!important; background:rgba(255,255,255,.9)!important; box-shadow:0 14px 30px rgba(4,48,65,.16)!important; backdrop-filter:blur(12px); } .pkl-v2210-focused .ppx-fighter > span small { color:#78909a!important; } .pkl-v2210-focused .ppx-fighter > span b { color:var(--focus-ink)!important; font-size:15px; } .pkl-v2210-focused .ppx-health { display:block; width:100%; height:5px; margin-top:7px; overflow:hidden; border-radius:9px; background:#d8e7e7; } .pkl-v2210-focused .ppx-health i { display:block; width:var(--hp,100%); height:100%; border-radius:inherit; background:linear-gradient(90deg,#25b97c,#82d845); } .pkl-v2210-focused .ppx-fighter.is-rival .ppx-health i { background:linear-gradient(90deg,#9a6be8,#e05aab); } .pkl-v2210-focused .ppx-battle-spark { width:88px!important; height:88px!important; border:8px solid rgba(255,255,255,.75)!important; border-radius:50%!important; color:#fff!important; background:linear-gradient(145deg,#13a3dd,#0870ae)!important; box-shadow:0 18px 36px rgba(5,64,91,.25),inset 0 0 0 2px rgba(255,213,63,.9)!important; } .pkl-v2210-focused .ppx-battle-spark i,.pkl-v2210-focused .ppx-battle-spark span { display:none!important; } .pkl-v2210-focused .ppx-battle-spark b { font-size:17px; letter-spacing:.12em; } .pkl-v2210-focused .ppx-battle-console { display:grid!important; grid-template-columns:minmax(280px,.86fr) minmax(0,1.7fr); gap:18px; align-items:stretch; padding:15px!important; border:1px solid rgba(10,78,101,.13)!important; border-radius:25px!important; color:var(--focus-ink)!important; background:rgba(250,255,253,.93)!important; box-shadow:0 26px 62px rgba(5,57,77,.18)!important; backdrop-filter:blur(20px) saturate(1.12); } .pkl-v2210-focused .ppx-battle-readout { display:flex; min-height:125px; flex-direction:column; justify-content:center; padding:15px 18px; border-radius:18px; background:linear-gradient(145deg,#eaf9ff,#f7fbec); } .pkl-v2210-focused .ppx-battle-readout-top { display:flex; align-items:center; justify-content:space-between; gap:10px; } .pkl-v2210-focused .ppx-battle-readout [data-battle-kicker] { color:#128bc2!important; } .pkl-v2210-focused .ppx-battle-role { color:#68848f; font-size:8px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; } .pkl-v2210-focused .ppx-battle-readout h3 { margin:8px 0 4px; color:var(--focus-ink)!important; font-size:25px; letter-spacing:-.035em; } .pkl-v2210-focused .ppx-battle-readout p { color:#637b84!important; font-size:10px; line-height:1.45; } .pkl-v2210-focused .ppx-battle-metrics { display:flex; gap:14px; margin:11px 0 0; } .pkl-v2210-focused .ppx-battle-metrics div { display:grid; gap:2px; } .pkl-v2210-focused .ppx-battle-metrics dt { color:#8ba0a6; font-size:7px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .pkl-v2210-focused .ppx-battle-metrics dd { margin:0; color:#163f50; font-size:11px; font-weight:900; } .pkl-v2210-focused .ppx-battle-skills { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px!important; } .pkl-v2210-focused .ppx-battle-skills button { position:relative; display:grid!important; min-width:0!important; min-height:125px!important; grid-template-columns:43px 1fr; grid-template-rows:1fr auto; align-items:center; gap:6px 9px; padding:12px!important; overflow:hidden; border:1px solid #dbe8e7!important; border-radius:18px!important; color:var(--focus-ink)!important; background:#fff!important; box-shadow:none!important; text-align:left!important; } .pkl-v2210-focused .ppx-battle-skills button::after { content:""; position:absolute; right:-20px; bottom:-30px; width:70px; height:70px; border-radius:50%; background:var(--skill-glow,#dff4ff); opacity:.7; } .pkl-v2210-focused .ppx-battle-skills button:nth-child(2){--skill-glow:#e0f5ff}.pkl-v2210-focused .ppx-battle-skills button:nth-child(3){--skill-glow:#e8f7ef}.pkl-v2210-focused .ppx-battle-skills button:nth-child(4){--skill-glow:#f3e8ff} .pkl-v2210-focused .ppx-battle-skills button.is-active { border-color:#f3c83b!important; background:#fffbea!important; transform:translateY(-3px); box-shadow:0 14px 28px rgba(108,84,3,.12)!important; } .pkl-v2210-focused .ppx-battle-skills button img { width:43px!important; height:43px!important; grid-row:1; border-radius:12px; object-fit:cover; } .pkl-v2210-focused .ppx-battle-skills button > span { display:grid!important; min-width:0; gap:3px; color:inherit!important; } .pkl-v2210-focused .ppx-battle-skills button > span b { overflow:hidden; text-overflow:ellipsis; font-size:10px; white-space:nowrap; } .pkl-v2210-focused .ppx-battle-skills button > span small { color:#789098; font-size:7px; line-height:1.3; } .pkl-v2210-focused .ppx-battle-skills button kbd { position:absolute; top:7px; left:7px; z-index:2; min-width:18px; padding:3px; border:0; border-radius:6px; color:#fff; background:#113f52; font:800 7px/1 sans-serif; text-align:center; } .pkl-v2210-focused .ppx-battle-skills button em { z-index:1; grid-column:1/-1; color:#68808a; font-size:7px; font-style:normal; font-weight:800; } @media(max-width:820px){ .dex-mode-switch .dex-mode-device{width:108px!important;height:108px!important;flex-basis:108px!important}.dex-mode-switch>a{min-height:150px!important} .pkl-v2210-focused .ppx-battle-layout{padding-top:84px;padding-bottom:76px}.pkl-v2210-focused .ppx-battle-head{margin:0 10px;padding:21px;border-radius:20px}.pkl-v2210-focused .ppx-battle-head h2{font-size:45px} .pkl-v2210-focused .ppx-battle-stage{min-height:300px}.pkl-v2210-focused .ppx-battle-spark{width:58px!important;height:58px!important;border-width:5px!important}.pkl-v2210-focused .ppx-fighter>span{min-width:112px;padding:8px!important}.pkl-v2210-focused .ppx-fighter>span b{font-size:11px} .pkl-v2210-focused .ppx-battle-console{grid-template-columns:1fr!important;margin:0 10px;padding:10px!important}.pkl-v2210-focused .ppx-battle-readout{min-height:0}.pkl-v2210-focused .ppx-battle-skills{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}.pkl-v2210-focused .ppx-battle-skills button{flex:0 0 165px;scroll-snap-align:start} } @media(max-width:520px){ .pkl-v2210-focused .pkl-brand img{width:42px;height:42px}.pkl-v2210-focused .pkl-brand b{font-size:15px}.pkl-v2210-focused .pkl-brand small{font-size:6px} .dex-mode-switch>a{align-items:center!important}.dex-mode-switch .dex-mode-device{width:86px!important;height:86px!important;flex-basis:86px!important} } @media(prefers-reduced-motion:reduce){.dex-mode-switch .dex-mode-device,.pkl-v2210-focused .ppx-battle-skills button{transition:none!important}} /* pk-style-source:80 */ /* /reputation-v2200.css */ .profile-v2200-reputation{margin-top:14px;padding:15px 16px;border:1px solid rgba(75,178,137,.28);border-radius:17px;background:linear-gradient(145deg,rgba(23,66,72,.94),rgba(17,52,62,.96));color:#fff;box-shadow:0 12px 28px rgba(7,31,39,.14)} .profile-v2200-reputation>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .profile-v2200-reputation>header span{display:grid;gap:2px}.profile-v2200-reputation>header small{color:#72d6a7;font-size:8px;font-weight:950;letter-spacing:.12em}.profile-v2200-reputation>header b{font-size:14px}.profile-v2200-reputation>header a{padding:7px 9px;border:1px solid rgba(255,255,255,.14);border-radius:9px;color:#d8eff1;font-size:9px;font-weight:900;text-decoration:none} .profile-v2200-reputation>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.profile-v2200-reputation article{display:grid;gap:6px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.05)}.profile-v2200-reputation article>span{display:flex;align-items:center;justify-content:space-between;color:#c1d8dc;font-size:9px}.profile-v2200-reputation article>span b{color:#fff;font-size:13px}.profile-v2200-reputation article>i{height:6px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.13)}.profile-v2200-reputation article>i em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f2b33c,#49cf8e)}.profile-v2200-reputation article>small{color:#74d3a6;font-size:8px;font-weight:900;text-transform:uppercase} @media(max-width:520px){.profile-v2200-reputation>div{grid-template-columns:1fr}} /* pk-style-source:81 */ /* /region-map-v2204.css */ /* Region atlas 2.20.2 — one centered workspace on desktop, touch-first sheet on mobile. */ .game-screen .side-panel.is-regions-panel, .game-screen .side-panel.is-regions-panel.is-open { padding:0; overflow:hidden; color:#17394a; background:#f3f9f5; border:1px solid rgba(255,255,255,.92); box-shadow:0 34px 100px rgba(7,37,53,.38),0 0 0 9999px rgba(5,30,43,.34); } .is-regions-panel .side-panel-header { display:none!important; } .is-regions-panel .side-panel-content, .is-regions-panel #sidePanelContent { height:100%; max-height:none!important; padding:0!important; overflow:hidden!important; scrollbar-width:none; } .is-regions-panel .side-panel-content::-webkit-scrollbar, .is-regions-panel #sidePanelContent::-webkit-scrollbar { display:none; } .region-map-v2204, .region-map-v2204 * { box-sizing:border-box; } .region-map-v2204 button { font:inherit; } .region-map-v2204 { --ink:#17394a; --muted:#637d88; --paper:#f7fbf8; --line:#dbe9e3; --blue:#168fc5; --green:#2f9b68; display:grid; grid-template-rows:auto minmax(0,1fr); width:100%; height:100%; min-height:0; background:radial-gradient(circle at 18% -8%,#fff 0 16%,transparent 38%),linear-gradient(145deg,#f7fbf7,#edf6f2 62%,#e6f1ed); user-select:none; } .region-map-v2204-header { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:82px; padding:15px 19px 14px 24px; color:#f8ffff; background:linear-gradient(110deg,#113b4d 0%,#0c5663 56%,#177b75 100%); box-shadow:0 10px 30px rgba(14,65,73,.17); } .region-map-v2204-header::after { position:absolute; inset:0; content:""; pointer-events:none; opacity:.36; background:radial-gradient(circle at 68% -50%,#9af0c5 0 8%,transparent 34%),linear-gradient(100deg,transparent 55%,rgba(255,255,255,.07)); } .region-map-v2204-header > div { position:relative;z-index:1; } .region-map-v2204-header > div:first-child { display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:end; } .region-map-v2204-header > div:first-child > span { grid-row:1 / span 2; align-self:center; padding:8px 10px; border:1px solid rgba(158,237,215,.34); border-radius:11px; color:#aef4dc; background:rgba(5,39,50,.28); font-size:9px; font-weight:900; letter-spacing:.13em; } .region-map-v2204-header h2 { margin:0;font-size:25px;line-height:1;font-weight:950;letter-spacing:-.035em; } .region-map-v2204-header p { margin:5px 0 0;color:#b8d9dc;font-weight:750; } .region-map-v2204-header > div:last-child { display:flex;align-items:center;gap:9px; } .region-map-v2204-close { display:grid; place-items:center; width:43px; height:43px; border:1px solid rgba(255,255,255,.2); border-radius:14px; color:#fff; background:rgba(5,35,45,.3); font-size:25px; cursor:pointer; transition:background .16s ease,transform .16s ease; } .region-map-v2204-close:hover { background:rgba(255,255,255,.15);transform:translateY(-1px); } .region-map-v2204-test-toggle { display:flex; align-items:center; gap:9px; min-width:190px; min-height:43px; padding:7px 12px; border:1px solid rgba(255,255,255,.22); border-radius:14px; color:#eafcff; background:rgba(3,34,44,.28); text-align:left; cursor:pointer; } .region-map-v2204-test-toggle > i { display:grid;place-items:center;width:26px;height:26px;border-radius:9px;color:#b7dce3;background:rgba(255,255,255,.1); } .region-map-v2204-test-toggle svg { width:14px;height:14px; } .region-map-v2204-test-toggle span { display:grid;gap:2px; } .region-map-v2204-test-toggle b { font-size:10px; } .region-map-v2204-test-toggle small { color:#a9ced3;font-size:8px;font-weight:700; } .region-map-v2204-test-toggle.is-active { color:#123d31;background:#baf0c9;border-color:#d6ffe3;box-shadow:0 0 0 3px rgba(134,229,167,.15); } .region-map-v2204-test-toggle.is-active > i { color:#fff;background:#2c9d69; } .region-map-v2204-test-toggle.is-active small { color:#477863; } .region-map-v2204-story-mode { padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#bfe0df;font-size:9px;font-weight:850;letter-spacing:.04em; } .region-map-v2204-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,340px); min-height:0; overflow:hidden; } .region-map-v2204-stage { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; min-width:0; min-height:0; padding:16px 14px 13px 17px; border-right:1px solid #d6e6df; } .region-map-v2204-toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:31px;padding:0 2px 10px; } .region-map-v2204-toolbar > em {font-style:normal;font-weight:750; } .region-map-v2204-legend { display:flex;align-items:center;gap:13px; } .region-map-v2204-legend span { display:flex;align-items:center;gap:6px;color:#55727c;font-size:8px;font-weight:850;letter-spacing:.025em; } .region-map-v2204-legend span::before { width:8px;height:8px;border:2px solid #fff;border-radius:50%;content:"";box-shadow:0 0 0 1px rgba(17,55,72,.12); } .region-map-v2204-legend .is-current::before { background:#ffca3d;box-shadow:0 0 0 2px rgba(255,185,48,.22); } .region-map-v2204-legend .is-layered::before { background:#7b55df;box-shadow:0 0 0 2px rgba(123,85,223,.2); } .region-map-v2204-legend .is-open::before { background:#2a9f74; } .region-map-v2204-legend .is-locked::before { background:#809098; } .region-map-v2221-test-locations { display:flex; align-items:stretch; gap:7px; min-width:0; margin:0 2px 10px; overflow-x:auto; scrollbar-width:none; } .region-map-v2221-test-locations::-webkit-scrollbar { display:none; } .region-map-v2221-test-locations > span { display:grid; align-content:center; flex:0 0 auto; gap:2px; min-width:106px; padding:7px 10px; border:1px solid #d9cdf8; border-radius:12px; color:#50378f; background:linear-gradient(135deg,#f5f0ff,#edf8ff); } .region-map-v2221-test-locations > span small { font-size:6px;font-weight:950;letter-spacing:.11em; } .region-map-v2221-test-locations > span b { font-size:10px; } .region-map-v2221-test-locations button { display:flex; align-items:center; gap:7px; min-width:205px; padding:7px 10px; border:1px solid #cfe3ea; border-radius:12px; color:#245365; background:rgba(255,255,255,.9); box-shadow:0 3px 10px rgba(20,62,75,.06); cursor:pointer; } .region-map-v2221-test-locations button:hover, .region-map-v2221-test-locations button.is-selected { border-color:#7b55df;color:#51338f;background:#f6f1ff;box-shadow:0 0 0 2px rgba(123,85,223,.11); } .region-map-v2221-test-locations button > i { display:grid;place-items:center;width:25px;height:25px;flex:0 0 auto;border-radius:8px;color:#fff;background:linear-gradient(145deg,#8d68eb,#5c3ab7); } .region-map-v2221-test-locations button > i svg { width:13px;height:13px; } .region-map-v2221-test-locations button > span { display:grid;gap:2px;min-width:0;text-align:left; } .region-map-v2221-test-locations button b { overflow:hidden;font-size:8px;text-overflow:ellipsis;white-space:nowrap; } .region-map-v2221-test-locations button small { color:#7f9299;font-size:6px;font-weight:750;white-space:nowrap; } .region-map-v2204-viewport { position:relative; min-width:0; min-height:0; overflow:hidden; display:grid; place-items:center; container-type:size; border:1px solid rgba(24,79,85,.18); border-radius:22px; background:#8cd5bb; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 12px 28px rgba(22,80,76,.12); } .region-map-v2204-canvas { position:relative; width:100%; height:100%; width:min(100cqw,150cqh); height:min(66.6667cqw,100cqh); overflow:hidden; background:#75cabb; isolation:isolate; } .region-map-v2204-canvas::after { position:absolute; inset:0; z-index:1; content:""; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 32%,rgba(8,66,64,.08)); box-shadow:inset 0 0 45px rgba(7,55,64,.12); } .region-map-v2204-canvas > img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none; } .region-map-v2204-canvas > svg { position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none; } .region-map-v2204-canvas line { stroke-width:5;stroke-linecap:round;stroke-dasharray:3 10;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px rgba(255,255,255,.9)); } .region-map-v2204-canvas line.is-open { stroke:rgba(255,255,255,.9); } .region-map-v2204-canvas line.is-locked { stroke:rgba(44,74,76,.34); } .region-map-v2204-node { position:absolute; z-index:4; left:var(--node-x); top:var(--node-y); display:grid; place-items:center; width:24px; height:24px; padding:0; border:3px solid rgba(255,255,255,.94); border-radius:50%; color:#fff; background:#6f858a; box-shadow:0 2px 7px rgba(7,44,52,.35),0 0 0 1px rgba(12,57,68,.16); transform:translate(-50%,-50%); cursor:pointer; transition:width .14s ease,height .14s ease,transform .14s ease,box-shadow .14s ease,filter .14s ease; } .region-map-v2204-node > i { display:grid;place-items:center;width:100%;height:100%;font-size:8px;font-style:normal;font-weight:950;line-height:1; } .region-map-v2204-node > i svg { width:10px;height:10px; } .region-map-v2204-node > span { position:absolute; top:calc(100% + 7px); left:50%; min-width:max-content; max-width:112px; border:1px solid rgba(255,255,255,.85); border-radius:7px; color:#173e4c; background:rgba(250,255,252,.92); box-shadow:0 2px 7px rgba(8,45,52,.13); font-weight:900; line-height:1.2; opacity:0; pointer-events:none; transform:translate(-50%,-3px); transition:opacity .14s ease,transform .14s ease; } .region-map-v2204-node.is-open { background:var(--node-accent,#2b9f70); } .region-map-v2204-node.is-test { background:#1c9bc0; } .region-map-v2204-node.is-layered-test { z-index:7; width:30px; height:30px; border-color:#fff3a8; background:linear-gradient(145deg,#966df1,#5d3db9); box-shadow:0 0 0 5px rgba(123,85,223,.25),0 4px 12px rgba(45,29,91,.42); } .region-map-v2204-node.is-layered-test::before { position:absolute; top:-12px; left:50%; padding:2px 4px; border:1px solid rgba(255,255,255,.82); border-radius:5px; color:#fff; background:#6a43c5; box-shadow:0 2px 5px rgba(43,25,87,.28); content:"NEW"; font-size:5px; font-weight:950; letter-spacing:.08em; line-height:1; transform:translateX(-50%); } .region-map-v2204-node.is-layered-test > span { color:#4e328a;border-color:#d9cdf8;background:rgba(250,247,255,.96); } .region-map-v2204-node.is-current { width:30px;height:30px;color:#714813;background:#ffd052;box-shadow:0 0 0 5px rgba(255,208,82,.26),0 3px 8px rgba(6,45,52,.34); } .region-map-v2204-node.is-hub:not(.is-current) { width:27px;height:27px; } .region-map-v2204-node.is-market:not(.is-current) { z-index:6; width:30px; height:30px; color:#fff8d2; background:linear-gradient(145deg,#ef8f2b,#d65b32); box-shadow:0 0 0 4px rgba(255,204,90,.28),0 4px 11px rgba(91,45,20,.34); } .region-map-v2204-node.is-market > span { color:#7b3e1f;border-color:#f2c98b;background:rgba(255,249,232,.96); } .region-map-v2204-node.is-selected { z-index:8;width:32px;height:32px;box-shadow:0 0 0 5px rgba(255,255,255,.62),0 5px 14px rgba(5,49,58,.4);filter:saturate(1.12); } .region-map-v2204-node.has-label > span, .region-map-v2204-node:hover > span, .region-map-v2204-node:focus-visible > span { opacity:1;transform:translate(-50%,0); } .region-map-v2204-node:focus-visible { outline:3px solid #fff;outline-offset:3px; } .region-map-v2204-mobile-hint { display:none;padding:8px 4px 0;color:#6c858e;font-size:8px;font-weight:750;text-align:center; } .region-map-v2204-sidebar { min-width:0; min-height:0; padding:14px; overflow:auto; background:linear-gradient(180deg,#f8fcf9,#eff7f3); scrollbar-width:thin; scrollbar-color:#b9cec6 transparent; } .region-map-v2204-sidebar::-webkit-scrollbar { width:6px; } .region-map-v2204-sidebar::-webkit-scrollbar-thumb { border-radius:6px;background:#b9cec6; } .region-map-v2204-selection, .region-teleport-v2204 { overflow:hidden;border:1px solid #d4e5dd;border-radius:18px;background:rgba(255,255,255,.93);box-shadow:0 8px 24px rgba(18,63,67,.075); } .region-map-v2204-selection-art { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:125px; padding:14px; color:#fff; background-position:center; background-size:cover; } .region-map-v2204-selection-art::after { position:absolute;inset:auto 0 0;height:4px;content:"";background:var(--region-accent); } .region-map-v2204-selection-art span { align-self:flex-start;padding:4px 7px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(8,37,48,.48);font-size:7px;font-weight:900;letter-spacing:.06em; } .region-map-v2204-selection-art b { margin-top:7px;font-size:17px;line-height:1.05;text-shadow:0 2px 10px #092d3d; } .region-map-v2204-selection-copy { padding:13px; } .region-map-v2204-selection-copy > p { min-height:31px;margin:0 0 11px;color:#59727c;font-weight:650;line-height:1.55; } .region-map-v2204-selection-copy > div { display:grid;grid-template-columns:.72fr 1.28fr;gap:7px;margin-bottom:10px; } .region-map-v2204-selection-copy > div > span { display:grid;gap:3px;padding:8px 9px;border:1px solid #e2ece8;border-radius:10px;background:#f6faf8; } .region-map-v2204-selection-copy small { color:#819298;font-size:7px;font-weight:850;letter-spacing:.07em; } .region-map-v2204-selection-copy > div b { overflow:hidden;color:#244c5a;font-size:9px;text-overflow:ellipsis;white-space:nowrap; } .region-map-v2204-selection-copy ul { display:flex;flex-wrap:wrap;gap:5px;margin:0 0 11px;padding:0;list-style:none; } .region-map-v2204-selection-copy li { display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:7px;color:#3c6c5a;background:#eaf6ee;font-size:7px;font-weight:800; } .region-map-v2204-selection-copy li svg { width:10px;height:10px; } .region-map-v2204-primary { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:38px; padding:0 12px; border:0; color:#fff; background:linear-gradient(110deg,#158dbe,#167b9f); box-shadow:0 6px 16px rgba(20,130,167,.2); font-size:9px; font-weight:900; cursor:pointer; } .region-map-v2204-primary svg { width:14px;height:14px; } .region-map-v2204-primary:disabled { color:#7b9096;background:#e0e9e6;box-shadow:none;cursor:not-allowed; } .region-teleport-v2204 { margin-top:11px;padding:13px; } .region-teleport-v2204 > header { display:flex;align-items:flex-start;justify-content:space-between;gap:10px; } .region-teleport-v2204 > header > span { display:grid;gap:2px; } .region-teleport-v2204 > header small { color:#87989e;font-size:7px;font-weight:900;letter-spacing:.1em; } .region-teleport-v2204 > header b { color:#193f4e;font-size:14px; } .region-teleport-v2204 > header > em { padding:5px 7px;border-radius:7px;color:#6b4b94;background:#efe8fa;font-style:normal;font-weight:900; } .region-teleport-v2204 > p { margin:7px 0 10px;color:#657d86;font-weight:650;line-height:1.45; } .region-teleport-v2204-sources { display:flex;gap:6px;margin-bottom:9px;overflow:auto;scrollbar-width:none; } .region-teleport-v2204-sources::-webkit-scrollbar { display:none; } .region-teleport-v2204-source, .region-teleport-v2204-empty { display:flex;align-items:center;gap:7px;min-width:130px;padding:7px;border:1px solid #e0e9e5;border-radius:10px;color:#244a57;background:#f7faf9;text-align:left; } .region-teleport-v2204-source { cursor:pointer; } .region-teleport-v2204-source.is-selected { border-color:#9a78cf;background:#f3edfb;box-shadow:inset 0 0 0 1px rgba(140,97,195,.18); } .region-teleport-v2204-source-art { width:28px!important;height:28px!important; } .region-teleport-v2204-source span, .region-teleport-v2204-empty span { display:grid;gap:2px;min-width:0; } .region-teleport-v2204-source b, .region-teleport-v2204-empty b { overflow:hidden;font-size:8px;text-overflow:ellipsis;white-space:nowrap; } .region-teleport-v2204-source small, .region-teleport-v2204-empty small { color:#7c8f96;font-size:7px;font-weight:700; } .region-teleport-v2204-source > svg { width:12px;height:12px;margin-left:auto;color:#8058bd; } .region-teleport-v2204-empty { width:100%; } .region-teleport-v2204-empty > i { display:grid;place-items:center;width:28px;height:28px;border-radius:9px;color:#7f8f94;background:#e9efed; } .region-teleport-v2204-empty svg { width:13px;height:13px; } .region-teleport-v2204-destinations { display:grid;grid-template-columns:1fr 1fr;max-height:132px;overflow:auto;padding-right:2px;scrollbar-width:thin;scrollbar-color:#c2d1cc transparent; } .region-teleport-v2204-destination { display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:6px;min-width:0;min-height:42px;padding:6px;border:1px solid #e1eae7;color:#294f5d;background:#f9fbfa;text-align:left;cursor:pointer; } .region-teleport-v2204-destination > i { display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:#328d72;background:#e5f4ed; } .region-teleport-v2204-destination > i svg { width:13px;height:13px; } .region-teleport-v2204-destination span { display:grid;gap:2px;min-width:0; } .region-teleport-v2204-destination b { overflow:hidden;font-size:7px;text-overflow:ellipsis;white-space:nowrap; } .region-teleport-v2204-destination small { color:#829399;font-weight:700; } .region-teleport-v2204-destination > em { color:#7b8d92;font-size:6px;font-style:normal;font-weight:900;letter-spacing:.04em; } .region-teleport-v2204-destination.is-home { border-color:#a8dab5;background:#f0faef; } .region-teleport-v2204-destination.is-home > i { color:#fff;background:#45a767; } .region-teleport-v2204-destination:disabled { opacity:.5;filter:grayscale(.55);cursor:not-allowed; } .region-teleport-v2204 > footer { display:flex;align-items:center;gap:8px;margin-top:9px;padding:8px;border:1px dashed #d6ddda;border-radius:10px;color:#778b91;background:#f5f7f6; } .region-teleport-v2204 > footer > i { display:grid;place-items:center;width:24px;height:24px;border-radius:8px;color:#8c6db6;background:#ece6f3; } .region-teleport-v2204 > footer svg { width:12px;height:12px; } .region-teleport-v2204 > footer span { display:grid;gap:2px; } .region-teleport-v2204 > footer b { font-size:7px; } .region-teleport-v2204 > footer small { font-size:6px;font-weight:650; } .region-map-v2204-empty { display:grid;place-items:center;height:100%;color:#55727c;font-size:12px;font-weight:800; } @media (min-width:801px) { .game-screen .side-panel.is-regions-panel, .game-screen .side-panel.is-regions-panel.is-open { top:50%!important; right:auto!important; bottom:auto!important; left:50%!important; width:min(1440px,calc(100vw - 34px))!important; height:min(930px,calc(100dvh - 34px))!important; max-width:none!important; max-height:none!important; border-radius:25px!important; } .game-screen .side-panel.is-regions-panel { opacity:0;transform:translate(-50%,calc(-50% + 18px)) scale(.986)!important;transition:opacity .18s ease,transform .23s cubic-bezier(.2,.8,.2,1)!important; } .game-screen .side-panel.is-regions-panel.is-open { opacity:1;transform:translate(-50%,-50%) scale(1)!important; } } @media (max-width:1100px) and (min-width:801px) { .region-map-v2204-layout { grid-template-columns:minmax(0,1fr) 300px; } .region-map-v2204-stage { padding:13px 10px 11px 13px; } .region-map-v2204-sidebar { padding:11px; } .region-map-v2204-selection-art { min-height:110px; } .region-teleport-v2204-destinations { grid-template-columns:1fr;max-height:112px; } } @media (max-width:800px) { .game-screen .side-panel.is-regions-panel, .game-screen .side-panel.is-regions-panel.is-open { position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; max-width:none!important; max-height:none!important; border:0!important; border-radius:0!important; transform:none!important; } .region-map-v2204 { overflow:auto;overscroll-behavior:contain;scrollbar-width:none; } .region-map-v2204::-webkit-scrollbar { display:none; } .region-map-v2204-header { position:sticky;top:0;min-height:68px;padding:10px max(12px,env(safe-area-inset-right)) 9px max(14px,env(safe-area-inset-left)); } .region-map-v2204-header > div:first-child { column-gap:8px; } .region-map-v2204-header > div:first-child > span { padding:6px 7px;font-size:7px; } .region-map-v2204-header h2 { font-size:21px; } .region-map-v2204-header p { font-size:8px; } .region-map-v2204-header > div:last-child { gap:6px; } .region-map-v2204-test-toggle { min-width:0;width:42px;height:42px;padding:7px; } .region-map-v2204-test-toggle span { display:none; } .region-map-v2204-test-toggle > i { width:27px;height:27px; } .region-map-v2204-story-mode { display:none; } .region-map-v2204-close { width:42px;height:42px; } .region-map-v2204-layout { display:block;overflow:visible; } .region-map-v2204-stage { display:block;padding:11px 0 10px;border:0; } .region-map-v2204-toolbar { padding:0 14px 9px; } .region-map-v2204-toolbar > em { display:none; } .region-map-v2204-legend { width:100%;justify-content:center;gap:18px; } .region-map-v2204-viewport { height:min(58vh,490px);overflow-x:auto;overflow-y:hidden;border-width:1px 0;border-radius:0;overscroll-behavior-x:contain; } .region-map-v2204-viewport { display:block;place-items:start;justify-items:start;align-items:start;height:min(calc(max(100vw,650px) * .6667),calc(100dvh - 150px));min-height:330px; } .region-map-v2204-canvas { position:relative;width:max(100%,650px);height:auto;min-height:0;aspect-ratio:3 / 2; } .region-map-v2204-mobile-hint { display:block; } .region-map-v2204-node { width:26px;height:26px; } .region-map-v2204-node.is-current, .region-map-v2204-node.is-selected { width:33px;height:33px; } .region-map-v2204-node > span { font-size:7px; } .region-map-v2204-sidebar { padding:10px max(12px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow:visible;background:linear-gradient(180deg,#f4faf6,#eaf3ef); } .region-map-v2204-selection { display:grid;grid-template-columns:128px minmax(0,1fr); } .region-map-v2204-selection-art { min-height:100%;padding:10px; } .region-map-v2204-selection-copy { padding:10px; } .region-map-v2204-selection-copy > p { display:-webkit-box;min-height:0;margin-bottom:8px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2; } .region-map-v2204-selection-copy > div { margin-bottom:8px; } .region-map-v2204-selection-copy ul { display:none; } .region-teleport-v2204 { padding:12px; } .region-teleport-v2204-destinations { grid-template-columns:1fr 1fr;max-height:none; } } @media (max-width:800px) and (orientation:landscape) { .region-map-v2204-viewport { height:calc(100dvh - 138px);min-height:230px;overflow:auto; } } @media (max-width:430px) { .region-map-v2204-header > div:first-child > span { display:none; } .region-map-v2204-header > div:first-child { display:block; } .region-map-v2204-selection { display:block; } .region-map-v2204-selection-art { min-height:105px; } .region-map-v2204-selection-copy > p { display:block; } .region-teleport-v2204-destinations { grid-template-columns:1fr; } } @media (max-height:690px) and (min-width:801px) { .region-map-v2204-header { min-height:68px;padding-block:10px; } .region-map-v2204-selection-art { min-height:92px; } .region-map-v2204-selection-copy > p { display:-webkit-box;min-height:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2; } .region-map-v2204-selection-copy ul { display:none; } .region-teleport-v2204 > p { display:none; } .region-teleport-v2204-destinations { max-height:90px; } } @media (prefers-reduced-motion:reduce) { .region-map-v2204 *, .game-screen .side-panel.is-regions-panel { scroll-behavior:auto!important;transition:none!important; } } /* Interactive atlas 2.20.4: zoom, pan, route planning and travel markers. */ .region-map-v2204-viewport { cursor:grab; touch-action:none; overscroll-behavior:contain; } .region-map-v2204-viewport.is-dragging { cursor:grabbing; } .region-map-v2204-canvas { --map-zoom:1; --map-pan-x:0px; --map-pan-y:0px; transform:translate3d(var(--map-pan-x),var(--map-pan-y),0) scale(var(--map-zoom)); transform-origin:50% 50%; will-change:transform; } .region-map-v2204-canvas.is-animated { transition:transform .22s cubic-bezier(.2,.78,.2,1); } .region-map-v2204-canvas > img { user-select:none;-webkit-user-drag:none; } .region-map-v2204-canvas line { opacity:.64;transition:stroke .2s ease,opacity .2s ease; } .region-map-v2204-canvas line.is-planned { stroke:#ffe06a; stroke-width:7; stroke-dasharray:11 9; opacity:1; filter:drop-shadow(0 1px 1px rgba(82,54,5,.7)) drop-shadow(0 0 5px rgba(255,224,106,.9)); animation:region-route-flow 1.15s linear infinite; } @keyframes region-route-flow { to { stroke-dashoffset:-40; } } .region-map-v2204-node { isolation:isolate; } .region-map-v2204-node > i { color:inherit; } .region-map-v2204-node .region-map-marker-icon { width:13px; height:13px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .region-map-v2204-node .marker-cut { stroke-width:1.25; } .region-map-v2204-node > em { position:absolute; z-index:2; top:-8px; right:-8px; display:grid; place-items:center; min-width:16px; height:16px; padding:0 3px; border-radius:999px; color:#173a48; background:#ffe16d; box-shadow:0 2px 6px rgba(14,47,58,.32); font-style:normal; font-weight:950; } .region-map-v2204-node.is-on-route { z-index:7;box-shadow:0 0 0 4px rgba(255,223,93,.42),0 4px 10px rgba(7,44,52,.38); } .region-map-v2204-node.is-selected { z-index:9; } .region-map-v2204-node.is-selected::after { position:absolute; inset:-9px; border:2px solid rgba(255,232,120,.88); border-radius:50%; content:""; animation:region-pin-pulse 1.8s ease-out infinite; } @keyframes region-pin-pulse { 0%{opacity:.9;transform:scale(.72)} 70%,100%{opacity:0;transform:scale(1.32)} } .region-map-v2204[data-zoomed="true"] .region-map-v2204-node:not(.is-locked) > span { opacity:1;transform:translate(-50%,0); } .region-map-v2204-zoom { position:absolute; z-index:14; right:13px; bottom:13px; display:flex; align-items:center; gap:3px; padding:4px; border:1px solid rgba(255,255,255,.72); border-radius:13px; background:rgba(12,49,60,.88); box-shadow:0 8px 22px rgba(5,35,44,.28); backdrop-filter:blur(12px); } .region-map-v2204-zoom button, .region-map-v2204-zoom output { display:grid; place-items:center; height:31px; border:0; border-radius:9px; color:#efffff; background:transparent; font:900 13px/1 system-ui,sans-serif; } .region-map-v2204-zoom button { min-width:31px;cursor:pointer; } .region-map-v2204-zoom button:hover { background:rgba(255,255,255,.13); } .region-map-v2204-zoom output { min-width:44px;color:#b9dedb;font-size:9px; } .region-map-v2204-zoom button:last-child { grid-auto-flow:column;gap:5px;width:auto;padding:0 8px;color:#172f3b;background:#f4fbf7;font-size:8px; } .region-map-v2204-zoom button:last-child svg { width:12px;height:12px; } .region-map-v2204-primary { min-height:44px;padding:7px 10px 7px 12px; } .region-map-v2204-primary > span:first-child { display:grid;gap:2px;text-align:left; } .region-map-v2204-primary small { color:rgba(255,255,255,.68);font-size:6px;font-weight:900;letter-spacing:.08em; } .region-map-v2204-primary b { font-size:9px; } .region-map-v2204-primary > svg { flex:0 0 auto; } .region-route-v2204 { margin-top:10px; overflow:hidden; border:1px solid #d7e5dd; border-radius:17px; background:rgba(255,255,255,.94); box-shadow:0 8px 22px rgba(18,63,67,.06); } .region-route-v2204 > header { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px 7px; } .region-route-v2204 > header > span { display:grid;gap:2px;min-width:0; } .region-route-v2204 > header small { color:#8a9a9d;font-size:6px;font-weight:950;letter-spacing:.1em; } .region-route-v2204 > header b { overflow:hidden;color:#1b4654;font-size:10px;text-overflow:ellipsis;white-space:nowrap; } .region-route-v2204 > header em { display:grid;place-items:center;min-width:28px;height:28px;border-radius:9px;color:#604c0d;background:#ffe583;font-size:10px;font-style:normal;font-weight:950; } .region-route-v2204 > p { margin:0;padding:0 12px 9px;color:#687d83;font-size:7px;font-weight:700; } .region-route-v2204 ol { display:flex;gap:4px;margin:0;padding:0 10px 11px;overflow-x:auto;list-style:none;scrollbar-width:none; } .region-route-v2204 ol::-webkit-scrollbar { display:none; } .region-route-v2204 li { display:flex;align-items:center;gap:5px;min-width:115px;padding:6px;border:1px solid #e2ebe6;border-radius:9px;background:#f7faf8; } .region-route-v2204 li > i { display:grid;place-items:center;min-width:21px;height:21px;border-radius:7px;color:#fff;background:#799097;font-size:7px;font-style:normal;font-weight:950; } .region-route-v2204 li > span { display:grid;gap:1px;min-width:0; } .region-route-v2204 li b { overflow:hidden;color:#294e59;font-size:7px;text-overflow:ellipsis;white-space:nowrap; } .region-route-v2204 li small { color:#8b999c;font-size:6px;font-weight:700; } .region-route-v2204 li.is-origin > i { color:#553f00;background:#ffda58; } .region-route-v2204 li.is-destination { border-color:#83c7ab;background:#edf9f1; } .region-route-v2204 li.is-destination > i { background:#27936b; } .region-route-v2204 li.is-gap { min-width:124px; } .region-teleport-glyph { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } .region-teleport-v2204 > header > i { display:grid;place-items:center;width:35px;height:35px;flex:0 0 auto;color:#fff;box-shadow:0 6px 14px rgba(91,61,158,.22); } .region-teleport-v2204-source-art { width:30px!important;height:30px!important;flex:0 0 auto; } .region-teleport-v2204-destination .region-map-marker-icon { width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; } .region-teleport-v2204 > footer { position:relative; } .region-teleport-v2204 > footer > em { margin-left:auto;padding:3px 5px;border-radius:5px;color:#8a709f;background:#ece5f1;font-size:6px;font-style:normal;font-weight:950; } @media (max-width:800px) { .region-map-v2204-viewport { display:grid!important; place-items:center!important; width:100%; height:auto!important; min-height:0!important; aspect-ratio:3 / 2; overflow:hidden!important; } .region-map-v2204-canvas { width:100%!important;height:100%!important;min-height:0!important;aspect-ratio:3 / 2; } .region-map-v2204-zoom { right:9px;bottom:9px; } .region-map-v2204-zoom button:last-child span { display:none; } .region-map-v2204-toolbar { padding-inline:10px; } .region-map-v2221-test-locations { margin-inline:10px; } .region-map-v2221-test-locations > span { min-width:94px;padding-inline:8px; } .region-map-v2221-test-locations button { min-width:188px; } .region-map-v2204-legend { gap:9px;overflow-x:auto;justify-content:flex-start;scrollbar-width:none; } .region-map-v2204-legend span { min-width:max-content; } .region-map-v2204-mobile-hint { display:block; } .region-route-v2204 li { min-width:108px; } } @media (max-width:430px) { .region-map-v2204-legend .is-locked { display:none; } .region-map-v2204-legend .is-route { display:none; } .region-map-v2221-test-locations { margin-bottom:7px; } .region-map-v2221-test-locations > span { min-width:86px; } .region-map-v2221-test-locations button { min-width:174px; } .region-map-v2204-zoom output { display:none; } .region-map-v2204-zoom button { min-width:34px; } } @media (prefers-reduced-motion:reduce) { .region-map-v2204-canvas line.is-planned, .region-map-v2204-node.is-selected::after { animation:none; } } /* pk-style-source:82 */ /* /ui-responsive-v2206.css */ /* v2.20.6 — one final responsive contract for the in-game HUD and heavy windows. */ .world-minimap-weather-v2206 { --weather-ink:#ffe172; --weather-fill:rgba(255,209,73,.22); display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border-radius:8px; color:var(--weather-ink); background:color-mix(in srgb,var(--weather-ink) 10%,transparent); } .world-minimap-weather-v2206 .weather-icon-v2206 { display:block;width:21px;height:21px;overflow:visible; } .world-minimap-weather-v2206 .weather-icon-v2206 path, .world-minimap-weather-v2206 .weather-icon-v2206 circle { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .world-minimap-weather-v2206 .weather-icon-v2206 .weather-fill { fill:var(--weather-fill); } .world-minimap-weather-v2206 .weather-icon-v2206 .weather-bolt { fill:#ffd54f;stroke:#ffd54f; } .world-minimap-weather-v2206[data-weather="cloud"] { --weather-ink:#d8edf5;--weather-fill:rgba(216,237,245,.16); } .world-minimap-weather-v2206[data-weather="rain"] { --weather-ink:#77d5ff;--weather-fill:rgba(119,213,255,.15); } .world-minimap-weather-v2206[data-weather="storm"] { --weather-ink:#a7bbff;--weather-fill:rgba(167,187,255,.14); } .world-minimap-weather-v2206[data-weather="snow"] { --weather-ink:#eafcff;--weather-fill:rgba(234,252,255,.14); } .world-minimap-weather-v2206[data-weather="wind"] { --weather-ink:#c6eef2;--weather-fill:transparent; } .world-minimap-weather-v2206[data-weather="fog"] { --weather-ink:#cfdee3;--weather-fill:transparent; } .world-minimap-weather-v2206[data-weather="motes"] { --weather-ink:#ffe581;--weather-fill:rgba(255,229,129,.18); } .world-minimap-weather-v2206[data-weather="indoor"] { --weather-ink:#9fe0ff;--weather-fill:rgba(159,224,255,.12); } @media (min-width:761px) { .game-screen { --world-hud-width:clamp(286px,17vw,324px)!important; --world-hud-map-height:clamp(184px,11vw,210px)!important; --world-hud-gap:10px!important; } .game-screen .world-minimap { top:max(14px,env(safe-area-inset-top))!important; right:max(14px,env(safe-area-inset-right))!important; width:var(--world-hud-width)!important; height:var(--world-hud-map-height)!important; grid-template-rows:32px minmax(0,1fr) 34px!important; border-radius:18px!important; } .game-screen .world-minimap-topbar { min-height:32px!important;padding-inline:11px 9px!important;border-radius:18px 18px 0 0!important; } .game-screen .world-minimap-place b { font-size:9.5px!important; } .game-screen .world-minimap-topbar time { min-width:34px!important;font-size:8.5px!important; } .game-screen .world-minimap-server-meta { gap:4px!important; } .game-screen .world-minimap-weather-v2206 { width:22px;height:22px;flex-basis:22px;border-radius:7px; } .game-screen .world-minimap-weather-v2206 .weather-icon-v2206 { width:19px;height:19px; } .game-screen .world-minimap-map-surface, .game-screen .world-minimap-frame { width:100%!important;height:auto!important;min-height:0!important; } .game-screen .world-minimap-bottombar { min-height:34px!important;border-radius:0 0 18px 18px!important; } .game-screen .world-minimap-channel, .game-screen .world-minimap-ping { height:33px!important;min-height:33px!important; } .game-screen .world-minimap-channel { padding-inline:9px!important;border-radius:0 0 0 18px!important; } .game-screen .world-minimap-channel-menu { top:calc(100% + 6px)!important; } .game-screen #questWidget.quest-widget-list-v87, .game-screen #questWidget.quest-widget-list-v87.is-collapsed { top:calc(max(14px,env(safe-area-inset-top)) + var(--world-hud-map-height) + var(--world-hud-gap))!important; right:max(14px,env(safe-area-inset-right))!important; width:var(--world-hud-width)!important; max-width:var(--world-hud-width)!important; border-radius:17px!important; } .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed) { max-height:min(270px,calc(100dvh - var(--world-hud-map-height) - 132px))!important; } .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed)>.quest-tracker-head-v57 { min-height:42px!important;padding:7px 9px!important; } .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed)>.quest-tracker-list-v57 { max-height:226px!important; } .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed) .quest-tracker-row-v57 { grid-template-columns:28px minmax(0,1fr) 58px!important; gap:8px!important; min-height:78px!important; padding:8px 8px 11px!important; } .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-row-v57>.quest-type-graphic-v61 { width:28px!important;height:28px!important; } .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-row-v57>span>small { font-size:7.5px!important; } .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-row-v57>span>b { font-size:12px!important;line-height:1.2!important; } .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-row-v57>span>em { font-size:9.5px!important;line-height:1.3!important; } .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-row-v57>span>u { font-size:8.5px!important; } .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-choice-v62>strong { font-size:11px!important; } .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-choice-v62 { display:grid!important; grid-template-columns:25px 25px!important; align-content:start!important; justify-content:end!important; gap:4px!important; height:auto!important; } .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-choice-v62>strong { grid-column:1/-1;width:auto!important;text-align:right!important; } .game-screen #questWidget.quest-widget-list-v87 .quest-primary-badge-v62 { display:none!important; } .game-screen #questWidget.quest-widget-list-v87 .quest-tracker-choice-v62>button { min-width:25px!important;min-height:25px!important;padding:4px!important; } .game-screen #questWidget.quest-widget-list-v87.is-collapsed { height:56px!important;max-height:56px!important; } /* The three most frequently opened windows appear immediately at the visual centre. */ html .game-screen #sidePanel.side-panel.is-open:is(.is-inventory-panel,.is-pokedex-panel,.is-pokedex-detail,.is-team-panel,.is-pokemon-detail-panel) { left:50%!important; top:50%!important; right:auto!important; bottom:auto!important; margin:0!important; transform:translate(-50%,-50%)!important; transform-origin:center!important; transition:none!important; animation:none!important; will-change:auto!important; } html .game-screen #sidePanel.side-panel.is-open.is-inventory-panel { width:min(1080px,calc(100vw - 64px))!important;height:min(720px,calc(100dvh - 112px))!important; } html .game-screen #sidePanel.side-panel.is-open.is-pokedex-panel { width:min(1080px,calc(100vw - 64px))!important;height:min(720px,calc(100dvh - 112px))!important; } html .game-screen #sidePanel.side-panel.is-open:is(.is-pokedex-detail,.is-pokemon-detail-panel) { width:min(860px,calc(100vw - 64px))!important;height:min(700px,calc(100dvh - 112px))!important; } html .game-screen #sidePanel.side-panel.is-open.is-team-panel { width:min(720px,calc(100vw - 64px))!important;height:min(520px,calc(100dvh - 112px))!important; } html .game-screen #sidePanel.side-panel.is-open:is(.is-inventory-panel,.is-pokedex-panel,.is-pokedex-detail,.is-team-panel,.is-pokemon-detail-panel) #sidePanelContent { overscroll-behavior:contain; } /* Messenger stays useful without covering half of a laptop screen. */ html .game-screen #chatPanel.chat-panel.chat-messenger:not(.is-minimized) { left:clamp(12px,var(--chat-x,16px),calc(100vw - 616px))!important; top:clamp(58px,var(--chat-y,72px),calc(100dvh - 516px))!important; width:min(600px,calc(100vw - 32px))!important; height:min(500px,calc(100dvh - 116px))!important; min-width:min(500px,calc(100vw - 32px))!important; min-height:min(390px,calc(100dvh - 116px))!important; max-width:600px!important; max-height:500px!important; transition:none!important; } html .game-screen #chatPanel.chat-panel.chat-messenger.is-minimized { left:max(14px,env(safe-area-inset-left))!important; bottom:max(14px,env(safe-area-inset-bottom))!important; width:300px!important; min-width:300px!important; max-width:300px!important; height:50px!important; min-height:50px!important; max-height:50px!important; border-radius:15px!important; transition:none!important; } html .game-screen #chatPanel.is-minimized>.chat-head { min-height:48px!important;padding:6px 7px 6px 11px!important; } html .game-screen #chatPanel.is-minimized .chat-title-copy>b { font-size:13px!important; } html .game-screen #chatPanel.is-minimized .chat-title-copy>small { display:none!important; } html .game-screen #chatPanel.is-minimized .chat-title-icon { width:23px!important;height:23px!important; } html .game-screen #chatPanel.is-minimized .chat-head-actions>button { width:32px!important;height:32px!important; } html .game-screen #chatPanel.is-minimized .chat-head-actions>button::before { content:none!important;display:none!important; } html .game-screen #chatPanel.is-minimized .chat-head-actions .ui-icon { display:block!important;width:16px!important;height:16px!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip { width:356px!important;min-width:356px!important;min-height:104px!important; grid-template-columns:66px minmax(0,1fr)!important;gap:11px!important;padding:10px 13px 10px 10px!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-avatar { width:64px!important;height:64px!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-progress { grid-template-columns:68px minmax(0,1fr) 59px!important;gap:7px!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-hud, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .party-hud[data-count="1"]+.player-stamina-hud, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .party-hud[data-count="2"]+.player-stamina-hud { top:calc(max(14px,env(safe-area-inset-top)) + 112px + var(--hud70-party-offset,0px))!important; width:356px!important;min-width:356px!important;min-height:50px!important; grid-template-columns:140px minmax(0,1fr)!important;gap:9px!important;padding:6px 12px 6px 9px!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .party-hud { top:calc(max(14px,env(safe-area-inset-top)) + 112px)!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock { --desktop-action-size:70px!important;--desktop-action-height:74px!important; grid-template-columns:repeat(5,70px)!important;gap:8px!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button { width:70px!important;min-width:70px!important;max-width:70px!important;height:74px!important;min-height:74px!important; grid-template-rows:41px auto!important;padding:6px 5px 7px!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button>span { width:40px!important;height:40px!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button>b { font-size:9.5px!important; } } @media (min-width:2200px) and (min-height:1200px) { .game-screen { --world-hud-width:348px!important;--world-hud-map-height:232px!important;--world-hud-gap:12px!important; } } @media (min-width:761px) and (max-width:1500px), (min-width:761px) and (max-height:900px) { .game-screen { --world-hud-width:286px!important;--world-hud-map-height:178px!important;--world-hud-gap:8px!important; } html .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .world-minimap { top:max(14px,env(safe-area-inset-top))!important;right:max(14px,env(safe-area-inset-right))!important;grid-template-rows:29px minmax(0,1fr) 31px!important; } .game-screen .world-minimap-topbar { min-height:29px!important; } .game-screen .world-minimap-bottombar, .game-screen .world-minimap-channel, .game-screen .world-minimap-ping { min-height:31px!important;height:30px!important; } .game-screen #questWidget.quest-widget-list-v87, .game-screen #questWidget.quest-widget-list-v87.is-collapsed { top:calc(max(14px,env(safe-area-inset-top)) + var(--world-hud-map-height) + var(--world-hud-gap))!important;right:max(14px,env(safe-area-inset-right))!important; } .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed) { max-height:min(220px,calc(100dvh - var(--world-hud-map-height) - 104px))!important; } .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed)>.quest-tracker-list-v57 { max-height:178px!important; } .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed) .quest-tracker-row-v57 { min-height:70px!important;padding-block:7px 9px!important; } html .game-screen #chatPanel.chat-panel.chat-messenger:not(.is-minimized) { width:min(540px,calc(100vw - 28px))!important;height:min(450px,calc(100dvh - 100px))!important;min-width:min(470px,calc(100vw - 28px))!important;min-height:min(350px,calc(100dvh - 100px))!important;max-width:540px!important;max-height:450px!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip { width:318px!important;min-width:318px!important;min-height:96px!important;grid-template-columns:60px minmax(0,1fr)!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-chip-avatar { width:58px!important;height:58px!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .player-stamina-hud, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .party-hud[data-count="1"]+.player-stamina-hud, .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .party-hud[data-count="2"]+.player-stamina-hud { top:calc(max(10px,env(safe-area-inset-top)) + 104px + var(--hud70-party-offset,0px))!important;width:318px!important;min-width:318px!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .party-hud { top:calc(max(10px,env(safe-area-inset-top)) + 104px)!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock { --desktop-action-size:62px!important;--desktop-action-height:67px!important;grid-template-columns:repeat(5,62px)!important;gap:6px!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button { width:62px!important;min-width:62px!important;max-width:62px!important;height:67px!important;min-height:67px!important;grid-template-rows:36px auto!important;padding:5px 4px 6px!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button>span { width:35px!important;height:35px!important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"] .desktop-dock button>b { font-size:8.5px!important; } html .game-screen #sidePanel.side-panel.is-open:is(.is-inventory-panel,.is-pokedex-panel) { width:min(960px,calc(100vw - 48px))!important;height:min(620px,calc(100dvh - 92px))!important; } } /* During combat the collapsed messenger becomes one clear, clickable chat button. */ @media (min-width:761px) { body.is-battling .game-screen #chatPanel.chat-panel.chat-messenger.is-minimized { left:max(12px,env(safe-area-inset-left))!important; right:auto!important; top:auto!important; bottom:max(12px,env(safe-area-inset-bottom))!important; width:48px!important;min-width:48px!important;max-width:48px!important; height:48px!important;min-height:48px!important;max-height:48px!important; overflow:hidden!important;border-radius:15px!important; opacity:1!important;visibility:visible!important;pointer-events:auto!important;z-index:244!important; } body.is-battling .game-screen #chatPanel.is-minimized>.chat-head { display:grid!important;grid-template-columns:1fr!important;place-items:center!important;min-height:46px!important;padding:0!important;cursor:pointer!important; } body.is-battling .game-screen #chatPanel.is-minimized .chat-title-copy { display:grid!important;place-items:center!important; } body.is-battling .game-screen #chatPanel.is-minimized .chat-title-copy>b { display:grid!important;place-items:center!important;width:46px!important;height:46px!important;font-size:0!important; } body.is-battling .game-screen #chatPanel.is-minimized .chat-title-icon { display:grid!important;width:24px!important;height:24px!important;margin:0!important; } body.is-battling .game-screen #chatPanel.is-minimized .chat-title-icon .ui-icon { width:22px!important;height:22px!important; } body.is-battling .game-screen #chatPanel.is-minimized .chat-title-copy>small, body.is-battling .game-screen #chatPanel.is-minimized .chat-head-actions { display:none!important; } body.is-battling .game-screen #chatPanel.chat-panel.chat-messenger.is-open:not(.is-minimized) { left:12px!important;right:auto!important;top:58px!important;bottom:auto!important; width:min(500px,calc(100vw - 24px))!important;height:min(460px,calc(100dvh - 116px))!important; min-width:min(460px,calc(100vw - 24px))!important;min-height:min(350px,calc(100dvh - 116px))!important; max-width:500px!important;max-height:460px!important;z-index:244!important; } } @media (max-width:760px) { .world-minimap { width:88px!important;height:88px!important; } .world-topbar { right:max(100px,calc(env(safe-area-inset-right) + 96px))!important; } .player-chip { width:min(164px,calc(100vw - 104px))!important; } .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed) { top:max(101px,calc(env(safe-area-inset-top) + 96px))!important;max-height:min(300px,calc(100dvh - 210px))!important; } .game-screen #questWidget.quest-widget-list-v87.is-collapsed { top:max(100px,calc(env(safe-area-inset-top) + 94px))!important;right:max(16px,calc(env(safe-area-inset-right) + 11px))!important; } html .game-screen #sidePanel.side-panel.is-open:is(.is-inventory-panel,.is-pokedex-panel,.is-pokedex-detail,.is-team-panel,.is-pokemon-detail-panel) { top:max(7px,env(safe-area-inset-top))!important; right:7px!important; bottom:calc(94px + env(safe-area-inset-bottom))!important; left:7px!important; width:auto!important; height:auto!important; max-width:none!important; max-height:none!important; transform:none!important; transition:none!important; animation:none!important; } body.is-battling .game-screen #chatPanel.chat-panel.chat-messenger.is-open:not(.is-minimized) { top:auto!important;right:6px!important;bottom:calc(94px + env(safe-area-inset-bottom))!important;left:6px!important; width:auto!important;height:min(62dvh,520px)!important;min-height:300px!important;max-height:min(62dvh,520px)!important; border-radius:18px!important;z-index:244!important;transition:none!important; } } @media (max-width:430px) { .world-minimap { width:82px!important;height:82px!important; } .world-topbar { right:max(93px,calc(env(safe-area-inset-right) + 89px))!important; } .player-chip { width:min(158px,calc(100vw - 97px))!important; } .game-screen #questWidget.quest-widget-list-v87:not(.is-collapsed) { top:max(94px,calc(env(safe-area-inset-top) + 89px))!important; } .game-screen #questWidget.quest-widget-list-v87.is-collapsed { top:max(92px,calc(env(safe-area-inset-top) + 87px))!important; } } @media (prefers-reduced-motion:reduce) { html .game-screen #sidePanel.side-panel, html .game-screen #chatPanel.chat-panel { transition:none!important;animation:none!important; } } /* pk-style-source:83 */ /* /marketplace-v2208.css */ .notification-center-button{position:relative;display:grid;width:48px;height:48px;place-items:center;border:1px solid rgba(255,255,255,.72);border-radius:16px;color:#10384b;background:rgba(255,255,255,.9);box-shadow:0 10px 28px rgba(6,39,56,.14);cursor:pointer}.notification-center-button>span{width:20px;height:24px;border:3px solid currentColor;border-top-left-radius:12px;border-top-right-radius:12px;border-bottom:0;font-size:0}.notification-center-button>span:after{content:"";display:block;width:8px;height:3px;margin:22px auto 0;border-radius:4px;background:currentColor}.notification-center-button i{position:absolute;top:-5px;right:-5px;display:grid;min-width:22px;height:22px;place-items:center;padding:0 5px;border:2px solid #fff;border-radius:999px;color:#fff;background:#ef4d53;font-size:9px;font-style:normal;font-weight:900}.notification-center{position:fixed;z-index:92;top:86px;right:22px;display:flex;width:min(390px,calc(100vw - 28px));max-height:min(650px,calc(100vh - 110px));overflow:hidden;border:1px solid rgba(13,69,88,.12);border-radius:24px;background:rgba(250,255,253,.98);box-shadow:0 30px 85px rgba(4,28,40,.28);opacity:0;pointer-events:none;transform:translateY(-10px) scale(.98);transition:.18s ease;flex-direction:column}.notification-center.is-open{opacity:1;pointer-events:auto;transform:none}.notification-center>header{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;border-bottom:1px solid #dcebea}.notification-center>header span{display:grid}.notification-center>header small{color:#15916d;font-size:8px;font-weight:900;letter-spacing:.14em}.notification-center>header b{font-size:21px}.notification-center>header div{display:flex;gap:6px}.notification-center>header button{min-height:34px;padding:0 10px;border:0;border-radius:10px;color:#315d6b;background:#eaf4f3;font-size:9px;font-weight:850;cursor:pointer}.notification-center-list{display:grid;gap:8px;padding:12px;overflow:auto}.notification-card{display:grid;grid-template-columns:40px 1fr auto;gap:10px;padding:12px;border:1px solid #dcebea;border-radius:15px;background:#fff}.notification-card.is-unread{border-color:#8bd9c0;background:#f1fff9}.notification-card__icon{display:grid;width:40px;height:40px;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(145deg,#21a479,#087fa4);font-size:15px;font-weight:900}.notification-card.is-patch .notification-card__icon{background:linear-gradient(145deg,#ffca37,#ef7b2f)}.notification-card span{min-width:0}.notification-card b{display:block;color:#123c4e;font-size:12px}.notification-card p{margin:4px 0 0;color:#65808a;font-size:9px;line-height:1.45}.notification-card time{display:block;margin-top:5px;color:#8ca0a7;font-size:8px}.notification-card a,.notification-card button{align-self:center;padding:8px;border:0;border-radius:9px;color:#087eab;background:#e8f6fa;font-size:8px;font-weight:850;cursor:pointer}.notification-empty{padding:42px 18px;text-align:center;color:#71909a}.notification-empty b{display:block;color:#173f4f;font-size:16px}.notification-empty p{font-size:10px} .marketplace-modal{position:fixed;z-index:180;inset:0;display:none;place-items:center;padding:22px}.marketplace-modal.is-open{display:grid}.marketplace-modal__backdrop{position:absolute;inset:0;background:rgba(4,26,37,.68);backdrop-filter:blur(12px)}.marketplace-shell{position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr);width:min(1180px,100%);height:min(790px,calc(100vh - 44px));overflow:hidden;border:1px solid rgba(255,255,255,.7);border-radius:30px;color:#123947;background:#f4faf7;box-shadow:0 42px 120px rgba(0,16,26,.4)}.marketplace-head{display:flex;align-items:center;gap:24px;padding:22px 25px;color:#fff;background:radial-gradient(circle at 78% 20%,rgba(255,211,60,.28),transparent 26%),linear-gradient(120deg,#0b4960,#087b72)}.marketplace-head>span{display:grid;margin-right:auto}.marketplace-head small{color:#8ce7cd;font-size:8px;font-weight:900;letter-spacing:.16em}.marketplace-head h2{margin:4px 0 0;font-size:28px;letter-spacing:-.04em}.marketplace-head>button{display:grid;width:42px;height:42px;place-items:center;border:0;border-radius:13px;color:#fff;background:rgba(255,255,255,.13);font-size:24px;cursor:pointer}.marketplace-head-stats{display:flex;gap:8px}.marketplace-head-stats span{padding:8px 11px;border-radius:11px;background:rgba(255,255,255,.1);font-size:9px}.marketplace-head-stats b{display:block;font-size:14px}.marketplace-tabs{display:flex;gap:6px;padding:10px 18px;border-bottom:1px solid #dce8e5;background:#fff}.marketplace-tabs button{min-height:40px;padding:0 18px;border:0;border-radius:12px;color:#557581;background:transparent;font-size:10px;font-weight:900;cursor:pointer}.marketplace-tabs button.is-active{color:#087e78;background:#e7f7f2}.marketplace-body{min-height:0;overflow:auto;padding:18px}.marketplace-toolbar{display:grid;grid-template-columns:minmax(200px,1.5fr) repeat(2,minmax(130px,.5fr));gap:9px;margin-bottom:14px}.marketplace-toolbar input,.marketplace-toolbar select,.marketplace-sell-form input,.marketplace-sell-form select{min-height:44px;border:1px solid #d3e3e1;border-radius:12px;padding:0 12px;color:#163c4b;background:#fff;outline:none}.marketplace-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.market-card{display:grid;grid-template-rows:154px auto;overflow:hidden;border:1px solid #d9e7e5;border-radius:19px;background:#fff;box-shadow:0 8px 24px rgba(3,41,55,.06)}.market-card__visual{position:relative;display:grid;place-items:center;background:radial-gradient(circle,#fff 0 35%,#e7f5ef 36%)}.market-card__visual img{width:132px;height:132px;object-fit:contain;filter:drop-shadow(0 13px 12px rgba(2,37,48,.2))}.market-card__visual small{position:absolute;top:10px;left:10px;padding:6px 8px;border-radius:8px;color:#fff;background:#0b7d79;font-size:7px;font-weight:900}.market-card__body{display:grid;gap:8px;padding:13px}.market-card h3{margin:0;font-size:15px}.market-card p{min-height:27px;margin:0;color:#6d858e;font-size:9px;line-height:1.45}.market-card__meta{display:flex;justify-content:space-between;color:#6a858e;font-size:8px}.market-card__price{display:flex;align-items:center;justify-content:space-between}.market-card__price strong{font-size:17px}.market-card__actions{display:flex;gap:6px}.market-card button{min-height:36px;flex:1;border:0;border-radius:10px;color:#fff;background:#168f70;font-size:9px;font-weight:900;cursor:pointer}.market-card button.is-secondary{color:#287183;background:#e8f4f4}.market-empty{grid-column:1/-1;padding:70px 20px;text-align:center;color:#69858e}.market-empty b{display:block;color:#173c49;font-size:20px}.marketplace-sell-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,.7fr);gap:16px}.marketplace-sell-assets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.market-sell-asset{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center;padding:10px;border:1px solid #d8e6e4;border-radius:15px;background:#fff;text-align:left;cursor:pointer}.market-sell-asset.is-active{border-color:#1ba77d;box-shadow:0 0 0 3px rgba(27,167,125,.11)}.market-sell-asset img{width:52px;height:52px;object-fit:contain}.market-sell-asset b{display:block;font-size:10px}.market-sell-asset small{color:#75909a;font-size:8px}.marketplace-sell-form{position:sticky;top:0;display:grid;align-content:start;gap:12px;padding:18px;border:1px solid #d8e6e4;border-radius:20px;background:#fff}.marketplace-sell-form h3{margin:0}.marketplace-sell-form label{display:grid;gap:5px;color:#55727b;font-size:9px;font-weight:850}.marketplace-sell-form button{min-height:46px;border:0;border-radius:13px;color:#fff;background:linear-gradient(135deg,#17a378,#0a7c8e);font-size:10px;font-weight:900;cursor:pointer}.market-fee-note{padding:11px;border-radius:12px;color:#56737c;background:#eef7f4;font-size:8px;line-height:1.5}.market-history{margin:0 0 14px;padding:13px 15px;border:1px solid #d6e6e3;border-radius:15px;}.market-history b{font-size:11px}.market-history span{display:flex;gap:16px;margin-top:7px;color:#56747d;font-size:9px} @media(max-width:900px){.marketplace-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.marketplace-sell-layout{grid-template-columns:1fr}.marketplace-sell-assets{grid-template-columns:repeat(2,minmax(0,1fr))}.marketplace-sell-form{position:static}.marketplace-head-stats{display:none}} @media(max-width:620px){.notification-center-button{position:absolute;top:8px;right:64px;width:42px;height:42px}.notification-center{top:60px;right:10px}.marketplace-modal{padding:0}.marketplace-shell{width:100%;height:100%;border-radius:0}.marketplace-head{padding:16px}.marketplace-head h2{font-size:23px}.marketplace-tabs{padding:8px}.marketplace-tabs button{flex:1;padding:0 8px}.marketplace-body{padding:10px}.marketplace-toolbar{grid-template-columns:1fr}.marketplace-grid{grid-template-columns:1fr}.marketplace-sell-assets{grid-template-columns:1fr}.market-card{grid-template-columns:115px 1fr;grid-template-rows:auto}.market-card__visual{min-height:150px}.market-card__visual img{width:105px;height:105px}} .market-card__quantity{display:flex;align-items:center;justify-content:space-between;color:#6a858e;font-size:8px;font-weight:800}.market-card__quantity input{width:64px;height:32px;border:1px solid #d3e3e1;border-radius:9px;padding:0 8px;color:#173d4a;background:#fff} .has-marketplace-open{overflow:hidden} .marketplace-modal[aria-busy="true"] .marketplace-head:after{content:"Сохраняем…";padding:7px 10px;border-radius:10px;color:#0b655f;background:#dcfff4;font-size:8px;font-weight:900;letter-spacing:.08em}.market-card button:disabled,.marketplace-sell-form button:disabled{cursor:wait;opacity:.55;filter:saturate(.55)} .marketplace-sell-assets{grid-auto-rows:minmax(78px,auto);align-content:start}.market-history span{flex-wrap:wrap;row-gap:6px} .market-price-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.market-price-preview span{display:grid;gap:3px;padding:9px;border:1px solid #dce9e6;border-radius:11px;color:#6b858d;background:#f8fcfa;font-size:8px}.market-price-preview b{color:#123d49;font-size:10px}.market-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}.market-pagination button{min-height:38px;padding:0 14px;border:0;border-radius:11px;color:#fff;background:#168f70;font-size:9px;font-weight:900;cursor:pointer}.market-pagination button:disabled{cursor:default;opacity:.38}.market-pagination span{color:#607b84;font-size:9px}.market-card.is-quarantined{border-color:#ef9c9c}.market-card.is-quarantined .market-card__visual small{background:#c94747}.market-sell-asset>span:first-child{display:grid;min-height:54px;place-items:center}.market-sell-asset>span:first-child>b{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;color:#52747e;background:#eaf3f1}.market-card__visual>b{display:grid;width:58px;height:58px;place-items:center;border-radius:18px;color:#5f7f87;background:#fff;font-size:24px} .game-screen .notification-center-button{position:fixed;z-index:26;top:calc(max(18px,env(safe-area-inset-top)) + 8px);left:calc(max(18px,env(safe-area-inset-left)) + 398px);width:42px;height:42px;border-color:#d3e3e3;background:rgba(250,253,251,.96);box-shadow:0 5px 14px rgba(6,39,56,.1);pointer-events:auto}.world-notification-menu-icon{display:grid!important;width:27px!important;height:27px!important;place-items:center;border:2px solid currentColor;border-radius:50%;font-size:11px!important;font-weight:950;line-height:1} @media(min-width:761px) and (max-width:1180px){.game-screen .notification-center-button{left:calc(max(18px,env(safe-area-inset-left)) + 328px)}} @media(max-width:760px){.game-screen .notification-center-button{display:none}.notification-center{top:10px;max-height:calc(100dvh - 20px)}} @media(max-width:620px){.market-price-preview{grid-template-columns:1fr}.market-pagination{justify-content:space-between}.market-pagination span{text-align:center}.market-pagination button{padding:0 10px}} .market-history{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,300px);gap:18px;align-items:end}.market-history>div:first-child{min-width:0}.market-history__chart{display:flex;height:58px;align-items:end;gap:3px;padding:7px 8px 0;border-bottom:1px solid #cddfdb;background:linear-gradient(180deg,rgba(18,163,121,.08),transparent);overflow:hidden}.market-history__chart i{position:relative;display:block;min-width:3px;height:var(--market-point);flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#20b889,#087f88);opacity:.82}.market-history__chart i:hover{opacity:1}.market-history__chart span{position:absolute;left:50%;bottom:calc(100% + 3px);display:none;padding:3px 5px;border-radius:6px;color:#fff;background:#123d49;font-size:7px;font-style:normal;white-space:nowrap;transform:translateX(-50%)}.market-history__chart i:hover span{display:block}.market-card__price small{max-width:52%;text-align:right;line-height:1.25}.market-card__actions button:first-child{min-width:0}.market-card__quantity input:focus,.marketplace-toolbar input:focus,.marketplace-toolbar select:focus,.marketplace-sell-form input:focus,.marketplace-sell-form select:focus{border-color:#19a57e;box-shadow:0 0 0 3px rgba(25,165,126,.13)} @media(max-width:760px){.market-history{grid-template-columns:1fr}.market-history__chart{height:48px}.market-card__actions{flex-wrap:wrap}.market-card__actions button{min-width:76px}.market-card h3{font-size:14px}.market-card p{font-size:10px}.market-card__meta,.market-card__quantity{font-size:9px}} /* Market catalog and long-term analytics */ .market-sell-categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:14px}.market-sell-categories button{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;min-height:64px;padding:10px 12px;border:1px solid #d7e6e3;border-radius:15px;color:#345b68;background:#fff;text-align:left;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.market-sell-categories button:hover{border-color:#8ccfbb;transform:translateY(-1px)}.market-sell-categories button.is-active{border-color:#18a47a;color:#0b6959;background:linear-gradient(135deg,#effcf7,#fff);box-shadow:0 0 0 3px rgba(24,164,122,.11)}.market-sell-categories i{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(145deg,#0d7f91,#20a87a);font-size:9px;font-style:normal;font-weight:950;letter-spacing:.08em}.market-sell-categories span{display:grid;gap:3px;min-width:0}.market-sell-categories b{font-size:11px}.market-sell-categories small{color:#789098;font-size:8px}.marketplace-sell-form__eyebrow{color:#12916f;font-size:8px;font-weight:950;letter-spacing:.12em}.marketplace-sell-form h3{font-size:18px;line-height:1.2} .market-history{display:block;margin-bottom:16px;padding:0;overflow:hidden;border:1px solid #d4e5e1;border-radius:20px;background:#fff;box-shadow:0 9px 30px rgba(5,52,62,.06)}.market-history>header{display:grid;grid-template-columns:minmax(180px,1fr) auto 38px;gap:14px;align-items:center;padding:15px 17px;border-bottom:1px solid #e1ece9;background:linear-gradient(120deg,#f6fcf9,#eef8f6)}.market-history>header>span{display:grid;gap:3px;margin:0}.market-history>header small{color:#15916d;font-size:7px;font-weight:950;letter-spacing:.14em}.market-history>header b{font-size:15px}.market-history>header>button{display:grid;width:34px;height:34px;place-items:center;border:0;border-radius:10px;color:#59777e;background:#e5f0ed;font-size:18px;cursor:pointer}.market-history__periods{display:flex;gap:4px}.market-history__periods button{min-height:32px;padding:0 10px;border:0;border-radius:9px;color:#5a777f;background:#e7f1ef;font-size:8px;font-weight:900;cursor:pointer}.market-history__periods button.is-active{color:#fff;background:#148e72}.market-history__stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:12px 14px}.market-history__stats>span{display:grid;gap:3px;margin:0;padding:10px 11px;border:1px solid #e0ebe8;border-radius:12px;background:#fbfdfc}.market-history__stats small{color:#718990;font-size:7px}.market-history__stats b{font-size:12px}.market-history__stats em{color:#779096;font-size:7px;font-style:normal}.market-history__content{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:12px;padding:0 14px 14px}.market-history__chart-wrap{min-width:0;padding:10px 12px 7px;border:1px solid #e0ebe8;border-radius:15px;background:linear-gradient(180deg,#fbfefc,#f4faf7)}.market-history .market-history__chart{display:block;width:100%;height:auto;min-height:150px;padding:0;overflow:visible;border:0;background:none}.market-history__area{fill:url(#marketHistoryArea)}.market-history__line{fill:none;stroke:#119476;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.market-history__volume{fill:#f3b83f;opacity:.32}.market-history__chart circle{fill:#fff;stroke:#119476;stroke-width:3}.market-history__chart text{fill:#748b92;font-size:9px;font-weight:750}.market-history__legend{display:flex;gap:14px;justify-content:flex-end;color:#6d858d;font-size:8px}.market-history__legend span{display:flex;gap:5px;align-items:center;margin:0}.market-history__legend i{display:block;width:14px;height:3px;border-radius:4px;background:#119476}.market-history__legend span+span i{height:7px;background:#f3b83f;opacity:.7}.market-history__content aside{padding:13px;border:1px solid #e0ebe8;border-radius:15px;background:#fbfdfc}.market-history__content aside>small{color:#6e878e;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.market-history__content ol{display:grid;gap:7px;margin:9px 0 0;padding:0;list-style:none;counter-reset:market-peak}.market-history__content li{display:grid;grid-template-columns:1fr auto;gap:3px 8px;padding:8px;border-radius:10px;background:#edf7f3;counter-increment:market-peak}.market-history__content li time{font-size:8px;font-weight:850}.market-history__content li b{font-size:9px}.market-history__content li span{grid-column:1/-1;display:block;margin:0;color:#718a91;font-size:7px}.market-history__transactions{border-top:1px solid #e2ece9}.market-history__transactions summary{display:flex;justify-content:space-between;padding:12px 16px;color:#2a5664;font-size:9px;font-weight:900;cursor:pointer}.market-history__transactions summary span{display:block;margin:0;color:#7a9096;font-size:8px;font-weight:600}.market-history__transactions>div{max-height:220px;overflow:auto;padding:0 14px 14px}.market-history__transactions table{width:100%;border-collapse:collapse;font-size:8px}.market-history__transactions th,.market-history__transactions td{padding:8px;border-bottom:1px solid #e7efed;text-align:left}.market-history__transactions th{position:sticky;top:0;color:#688088;background:#f7fbf9}.market-history__empty{display:grid;gap:6px;padding:35px 18px;text-align:center}.market-history__empty span{display:block;margin:0;color:#71888f;font-size:9px}.market-history--empty>header{grid-template-columns:1fr 38px}.market-history--empty .market-history__periods{grid-row:2;grid-column:1/-1} @media(max-width:900px){.market-sell-categories{grid-template-columns:repeat(2,minmax(0,1fr))}.market-history__stats{grid-template-columns:repeat(3,minmax(0,1fr))}.market-history__content{grid-template-columns:1fr}.market-history__content aside ol{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:620px){.market-sell-categories{gap:6px}.market-sell-categories button{grid-template-columns:31px 1fr;min-height:56px;padding:8px}.market-sell-categories i{width:31px;height:31px}.market-history>header{grid-template-columns:1fr 34px}.market-history>header .market-history__periods{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr)}.market-history__periods button{padding:0 4px}.market-history__stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:9px}.market-history__content{padding:0 9px 9px}.market-history__content aside ol{grid-template-columns:1fr}.market-history .market-history__chart{min-height:128px}.market-history__transactions summary span{display:none}} /* pk-style-source:84 */ /* /pokemon-animation-lab-v2390.css */ /* v2.39.0 — temporary, client-only follower animation laboratory. */ @media (min-width:761px) { .game-screen .side-panel.is-animation-lab-panel { width:min(780px,calc(100vw - 96px)); padding:16px; background:linear-gradient(145deg,rgba(246,253,255,.985),rgba(236,248,252,.985)); } } .animation-lab-launcher { position:absolute;z-index:25;left:calc(50% + 216px);bottom:max(20px,calc(env(safe-area-inset-bottom) + 6px)); display:grid;grid-template-rows:30px auto;place-items:center;gap:3px;width:76px;min-height:55px;padding:5px 4px 6px; border:1px solid rgba(84,190,245,.38);border-radius:14px;background:linear-gradient(180deg,rgba(14,72,92,.94),rgba(7,42,57,.92)); color:#fff;box-shadow:0 12px 28px rgba(0,18,28,.26);backdrop-filter:blur(16px);cursor:pointer;isolation:isolate; } .animation-lab-launcher:hover { transform:translateY(-1px);border-color:#67d3e8; } .animation-lab-launcher.is-active { background:linear-gradient(180deg,rgba(31,155,177,.96),rgba(13,104,122,.94)); } .animation-lab-launcher > b { max-width:68px;overflow:hidden;font-size:7px;font-weight:850;line-height:1.05;text-overflow:ellipsis;white-space:nowrap; } .animation-lab-launcher > .animation-lab-dock-art, .animation-lab-menu-art { overflow:hidden; background:linear-gradient(145deg,#e3fbff,#fff4d5); } .animation-lab-dock-art img, .animation-lab-menu-art img { width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(20,67,87,.2)); } .animation-lab-launcher > i { position:absolute;top:2px;right:3px;padding:2px 4px;border-radius:6px; background:#ef4a4a;color:#fff;font:900 5.5px/1.1 Inter,system-ui,sans-serif;letter-spacing:.08em; } .animation-lab { min-height:100%;color:#163b4b; } .animation-lab-hero { display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:15px; margin:-16px -16px 14px;padding:18px 54px 18px 18px; background:linear-gradient(120deg,#0d5367 0%,#147f89 62%,#46b7a0 100%);color:#fff; box-shadow:0 12px 28px rgba(18,73,92,.16); } .animation-lab-hero-art { display:grid;place-items:center;width:76px;height:76px;border:1px solid rgba(255,255,255,.46);border-radius:23px;background:rgba(255,255,255,.9);box-shadow:0 10px 24px rgba(4,46,59,.23); } .animation-lab-hero-art img { width:70px;height:70px;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(3,43,56,.2)); } .animation-lab-hero small,.animation-lab-current small { display:block;font-size:9px;font-weight:900;letter-spacing:.11em;opacity:.76; } .animation-lab-hero h2 { margin:3px 0 5px;font-size:25px;line-height:1; } .animation-lab-hero p { margin:0;max-width:470px;font-size:12px;font-weight:650;line-height:1.45;opacity:.84; } .animation-lab-hero > strong { display:flex;align-items:baseline;gap:4px;font-size:27px;white-space:nowrap; } .animation-lab-hero > strong small { font-size:9px; } .animation-lab-notice { display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:10px 13px;border:1px solid #b8dce8;border-radius:14px; background:#edfaff;color:#426677;font-size:11px;line-height:1.4; } .animation-lab-notice b { flex:0 0 auto;color:#087a8b;font-size:10px;text-transform:uppercase;letter-spacing:.06em; } .animation-lab-current { display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:13px;margin-bottom:12px;padding:12px 14px; border:1px solid #c8e2e8;border-radius:18px;background:linear-gradient(110deg,#fff,#edfbf9);box-shadow:0 8px 20px rgba(28,87,104,.08); } .animation-lab-current > span { display:grid;place-items:center;width:70px;height:70px;border-radius:17px;background:linear-gradient(145deg,#e9f9ff,#fff5dd); } .animation-lab-current > span img,.animation-lab-current-art img { width:64px;height:64px;object-fit:contain; } .animation-lab-current b { display:block;margin:3px 0;font-size:18px; } .animation-lab-current p { margin:0;color:#69838f;font-size:11px;font-weight:650; } .animation-lab-current button,.animation-lab-more { border:0;border-radius:12px;padding:10px 13px;background:#e94d4d;color:#fff;font:850 11px Inter,system-ui,sans-serif;cursor:pointer; box-shadow:0 6px 14px rgba(196,48,48,.2); } .animation-lab-search { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-bottom:12px;padding:9px 12px; border:1px solid #c8dfe7;border-radius:14px;background:#fff; } .animation-lab-search span { color:#557380;font-size:9px;font-weight:900;letter-spacing:.08em; } .animation-lab-search input {border:0;outline:0;background:transparent;color:#173c4b;font:750 13px Inter,system-ui,sans-serif; } .animation-lab-search em { min-width:32px;padding:4px 7px;border-radius:9px;background:#eaf4f7;color:#46707f;text-align:center;font-size:10px;font-weight:900;font-style:normal; } .animation-lab-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px; } .animation-lab-card { position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px;min-width:0;min-height:86px;padding:10px; border:1px solid #d5e5e9;border-radius:16px;background:#fff;color:#193d4b;text-align:left;cursor:pointer;box-shadow:0 5px 15px rgba(23,72,89,.06); transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease; } .animation-lab-card:hover { transform:translateY(-1px);border-color:#60b9c8;box-shadow:0 9px 21px rgba(19,101,119,.12); } .animation-lab-card.is-selected { border-color:#16a391;background:linear-gradient(145deg,#fff,#e9faf5);box-shadow:0 0 0 2px rgba(22,163,145,.12),0 9px 22px rgba(12,118,105,.12); } .animation-lab-card-art { display:grid;place-items:center;width:64px;height:64px;border-radius:15px;background:linear-gradient(145deg,color-mix(in srgb,var(--pokemon-accent,#68bdd1) 16%,#eefbff),#fff7e5);overflow:hidden; } .animation-lab-portrait img { width:60px;height:60px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(14,55,69,.16)); } .animation-lab-card-copy { min-width:0; } .animation-lab-card-copy small { display:block;overflow:hidden;color:#7b929c;font-size:8px;font-weight:850;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase; } .animation-lab-card-copy b { display:block;overflow:hidden;margin:3px 0 5px;font-size:14px;text-overflow:ellipsis;white-space:nowrap; } .animation-lab-card-copy em { display:inline-flex;padding:3px 6px;border-radius:7px;background:#e8f7f1;color:#188067;font-size:8px;font-weight:900;font-style:normal; } .animation-lab-card-copy em.is-fallback { background:#fff0df;color:#a4611d; } .animation-lab-card > i { position:absolute;right:8px;bottom:6px;color:#8299a2;font-size:6px;font-weight:900;font-style:normal;letter-spacing:.07em; } .animation-lab-card.is-selected > i { color:#128775; } .animation-lab-more { display:block;margin:14px auto 4px;background:#147c8d;box-shadow:0 6px 14px rgba(20,124,141,.18); } .animation-lab-empty { grid-column:1/-1;display:grid;place-items:center;min-height:160px;border:1px dashed #bcd6de;border-radius:18px;color:#607b87;background:#f7fcfd; } .animation-lab-empty b { font-size:15px; } .animation-lab-empty span { font-size:11px; } .animation-lab-footer { display:flex;gap:10px;margin-top:14px;padding:12px 14px;border-radius:14px;background:#eaf2f4;color:#617b86;font-size:10px;line-height:1.45; } .animation-lab-footer b { color:#224b5b;white-space:nowrap; } html[data-game-theme="dark"] .game-screen .side-panel.is-animation-lab-panel { background:linear-gradient(145deg,rgba(7,31,43,.985),rgba(8,45,53,.985)); } html[data-game-theme="dark"] .animation-lab { color:#eef9fc; } html[data-game-theme="dark"] .animation-lab-notice,html[data-game-theme="dark"] .animation-lab-current,html[data-game-theme="dark"] .animation-lab-search,html[data-game-theme="dark"] .animation-lab-card { border-color:rgba(132,190,205,.22);background:rgba(14,55,66,.86);color:#eef9fc; } html[data-game-theme="dark"] .animation-lab-search input { color:#fff; } html[data-game-theme="dark"] .animation-lab-card.is-selected { border-color:#49d7bd;background:rgba(18,91,84,.78); } html[data-game-theme="dark"] .animation-lab-footer { background:rgba(255,255,255,.06);color:#aec8d1; } html[data-game-theme="dark"] .animation-lab-footer b { color:#fff; } @media (max-width:1180px) and (min-width:761px) { .animation-lab-launcher { left:calc(50% + 190px);width:66px; } .animation-lab-launcher > b { max-width:58px;font-size:6.4px; } .animation-lab-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:760px) { .animation-lab-launcher { display:none; } .game-screen .side-panel.is-animation-lab-panel { inset:5px 5px calc(68px + env(safe-area-inset-bottom)) 5px;width:auto;max-height:none;padding:10px;border-radius:20px; } .animation-lab-hero { grid-template-columns:58px minmax(0,1fr);margin:-10px -10px 10px;padding:13px 48px 13px 12px; } .animation-lab-hero-art { width:56px;height:56px;border-radius:17px; } .animation-lab-hero-art img { width:52px;height:52px; } .animation-lab-hero h2 { font-size:21px; } .animation-lab-hero p { font-size:10px; } .animation-lab-hero > strong { display:none; } .animation-lab-notice { align-items:flex-start;flex-direction:column;gap:3px; } .animation-lab-current { grid-template-columns:56px minmax(0,1fr); } .animation-lab-current > span { width:54px;height:54px; } .animation-lab-current > span img,.animation-lab-current-art img { width:50px;height:50px; } .animation-lab-current button { grid-column:1/-1;width:100%; } .animation-lab-search { grid-template-columns:1fr auto; } .animation-lab-search span { grid-column:1/-1; } .animation-lab-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; } .animation-lab-card { grid-template-columns:52px minmax(0,1fr);min-height:74px;padding:8px; } .animation-lab-card-art { width:52px;height:52px; } .animation-lab-portrait img { width:49px;height:49px; } .animation-lab-card-copy b { font-size:12px; } } @media (max-width:420px) { .animation-lab-grid { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { .animation-lab-card { transition:none; } } /* pk-style-source:85 */ /* /hero-lab-v2580.css */ /* Scoped character workshop. No global button/input/canvas overrides. */ .hero-lab-tabs{display:flex;gap:6px;margin:0 52px 14px 0;padding:4px;border-radius:12px;background:#e8f2f5;width:max-content} .hero-lab-tabs button{border:0;padding:9px 22px;border-radius:9px;background:transparent;color:#517585;font-weight:750;cursor:pointer} .hero-lab-tabs button[aria-pressed=true]{background:#fff;color:#067f96;box-shadow:0 2px 8px #15465414} .hero-lab{color:#173d50;font:14px/1.4 'Segoe UI',system-ui,sans-serif;--hero-border:#c9dfe7;--hero-card:#fff;--hero-quiet:#5b7888} .hero-lab *{box-sizing:border-box} .hero-lab-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px} .hero-lab-heading small{font-size:10px;letter-spacing:.12em;color:#338093;font-weight:800} .hero-lab-heading h2{font-size:25px;margin:3px 0} .hero-lab-heading>span{font-size:11px;color:var(--hero-quiet)} .hero-lab-body{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(310px,1.15fr);gap:20px} .hero-lab-stage{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;border-radius:22px;border:1px solid var(--hero-border);background:radial-gradient(ellipse at 50% 20%,#fff 0%,#ddf4f5 62%,#c8e8f0 100%);overflow:hidden} .hero-lab-stage canvas{display:block;width:100%;max-height:350px;object-fit:contain} .hero-lab-stage-figures{display:grid;grid-template-columns:minmax(0,1fr);width:100%;align-items:end} .hero-lab-stage-figures.is-comparing{grid-template-columns:repeat(2,minmax(0,1fr))} .hero-lab-stage-figures figure{min-width:0;margin:0;display:grid;justify-items:center} .hero-lab-stage-figures canvas{width:100%;height:auto;max-height:290px} .hero-lab-stage-figures figcaption{font-size:11px;font-weight:700;color:#2b6578;padding:0 4px 4px;text-align:center} .hero-lab-stage-caption{font-size:11px;color:#3d7786;margin:8px 12px 15px} .hero-lab-controls{min-width:0} .hero-lab button,.hero-lab select{font:inherit;color:inherit;border:1px solid var(--hero-border);border-radius:10px;background:var(--hero-card);padding:9px 12px;cursor:pointer} .hero-lab button:hover:not(:disabled){border-color:#159faf;background:#e7f7f8} .hero-lab button:focus-visible,.hero-lab select:focus-visible,.hero-lab input:focus-visible,.hero-lab-tabs button:focus-visible{outline:3px solid #30a9e0;outline-offset:2px} .hero-lab button[aria-pressed=true]{border-color:#1094a5;background:#e4f6f6;color:#086c7d;box-shadow:inset 0 0 0 1px #1094a5} .hero-lab button:disabled{opacity:.5;cursor:not-allowed} .hero-lab-characters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .hero-lab-characters button{text-align:left;display:grid;gap:3px;min-width:0;padding:9px 8px;overflow-wrap:anywhere;hyphens:auto} .hero-roster-card{display:flex;min-width:0;position:relative;border-radius:10px} .hero-lab .hero-roster-card>[data-hero-pick]{width:100%;padding-right:36px} .hero-lab .hero-roster-card>.hero-roster-favorite{position:absolute;right:5px;top:6px;width:31px;height:31px;padding:0;display:grid;place-items:center;font-size:20px;color:#a67818} .hero-roster-status{display:inline-block;width:max-content;padding:1px 5px;border-radius:5px;background:#e9f4eb;color:#327353} .hero-roster-status[data-status="Закрыт"]{background:#eef1f4;color:#677c87} .hero-roster-status[data-status="Тестовый"]{background:#fff0dc;color:#925e12} .hero-lab-characters small{color:var(--hero-quiet);font-size:11px} .hero-lab h3{font-size:13px;margin:16px 0 8px} .hero-lab-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .hero-lab-actions button{padding:9px 5px;font-size:12px} .hero-lab-help{color:var(--hero-quiet);font-size:12px;min-height:34px;margin:10px 0} .hero-lab-playback{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px} .hero-lab-playback label{margin-left:auto} .hero-lab-playback select{padding:6px} .hero-lab-scrubber{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;margin:10px 0;font-size:12px} .hero-lab-scrubber input{width:100%;min-width:0;accent-color:#118c9c} .hero-lab-status{font-size:11px;color:var(--hero-quiet);min-height:17px;margin:6px 0} .hero-lab-apply{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .hero-lab-apply button{font-size:12px} .hero-lab-apply .hero-primary{background:#087f92;border-color:#087f92;color:white;font-weight:750} .hero-lab-apply .hero-primary:hover:not(:disabled){background:#096a7a;color:#fff} .hero-lab-directions{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-top:14px} .hero-lab-directions button{min-width:0;padding:3px;border-radius:12px} .hero-lab-directions canvas{display:block;width:100%;height:80px;object-fit:contain} .hero-lab-directions span{display:block;font-size:10px;margin:1px 0 3px} .hero-lab-footer{margin-top:12px;color:var(--hero-quiet);font-size:11px;line-height:1.5} .hero-lab [hidden]{display:none!important} /* Game windows use the shared light paper surface even over a dark world. */ #app #sidePanel.side-panel.is-animation-lab-panel:has(.hero-lab){width:min(960px,calc(100vw - 32px))!important;max-height:calc(100dvh - 32px)!important;background:#f8fcff!important;backdrop-filter:none!important;isolation:isolate} .hero-lab-heading{margin-bottom:8px}.hero-lab-heading h2{font-size:22px;margin:0} .hero-lab-heading small{display:none}.hero-lab-stage canvas{max-height:290px} .hero-lab h3{margin:9px 0 5px}.hero-lab-actions button{padding:6px 4px} .hero-lab-help{min-height:0;font-size:11px;margin:7px 0}.hero-lab-scrubber{margin:7px 0} .hero-lab-directions{margin-top:10px}.hero-lab-directions canvas{height:65px} .hero-lab-footer{margin-top:8px} .hero-roster-filters{display:grid;grid-template-columns:minmax(100px,1fr) 90px 115px 128px;gap:6px;margin-bottom:8px} .hero-roster-filters label{min-width:0;font-size:10px;color:var(--hero-quiet)} .hero-roster-filters input,.hero-roster-filters select{display:block;width:100%;min-width:0;margin-top:2px;font:12px 'Segoe UI',sans-serif;padding:7px;border:1px solid var(--hero-border);border-radius:9px;background:white;color:#173d50} .hero-lab-characters{grid-template-columns:repeat(2,minmax(0,1fr));max-height:182px;overflow:auto;overscroll-behavior:contain;align-content:start} .hero-lab-characters [data-hero-pick]{display:flex;align-items:center;gap:7px;overflow-wrap:normal;hyphens:none;min-height:64px} .hero-lab-characters button>span{min-width:0;display:grid;gap:2px} .hero-lab-characters b{font-size:12px;overflow-wrap:break-word} .hero-lab-characters small{font-size:10px;line-height:1.25} .hero-lab-characters img{object-fit:contain;flex:0 0 48px} .hero-roster-pages{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;font-size:11px} .hero-roster-pages button{padding:3px 12px}.hero-roster-empty{grid-column:1/-1;color:var(--hero-quiet)} .hero-floor-action{position:absolute;z-index:65;left:50%;bottom:104px;transform:translateX(-50%);max-width:calc(100% - 32px);padding:10px 20px;border:1px solid #94d6df;border-radius:14px;background:#f8ffff;color:#086b7c;font:700 14px 'Segoe UI',sans-serif;box-shadow:0 4px 18px #10273924;cursor:pointer} .hero-floor-action[hidden]{display:none!important} .hero-self-actions{width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:20px;border:1px solid #b9d8e5;border-radius:20px;background:#f8fcff;color:#183b50;overflow:auto;font:14px/1.45 'Segoe UI',sans-serif} .hero-self-actions::backdrop{background:#10314b55}.hero-self-actions header{display:flex;align-items:center;justify-content:space-between;gap:10px}.hero-self-actions h2{margin:0;font-size:21px} .hero-self-actions button{min-height:40px;border:1px solid #bfdae4;border-radius:10px;background:white;color:#174b64;font:inherit;padding:8px 12px;cursor:pointer} .hero-self-actions button:disabled{opacity:.5;cursor:not-allowed}.hero-self-actions button:focus-visible,.hero-floor-action:focus-visible{outline:3px solid #249ce0;outline-offset:2px} .hero-self-actions small{display:block;color:#567485;margin:12px 0}.hero-self-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero-self-actions footer{display:flex;gap:8px;flex-wrap:wrap} .hero-self-actions{position:fixed;z-index:86;left:var(--hero-wheel-x,50%);top:var(--hero-wheel-y,50%);transform:translate(-50%,-50%);width:292px;height:292px;max-height:none;overflow:visible;padding:0;border:0;background:transparent;box-shadow:none;filter:drop-shadow(0 9px 20px #102f4860)} .hero-self-actions[hidden]{display:none!important}.hero-self-actions__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;z-index:2;border-radius:50%!important;background:#fff!important;border:3px solid #9acde1!important;display:grid;place-content:center;text-align:center;font-size:15px!important;line-height:1.1}.hero-self-actions__center span{display:block;font-size:10px;margin-top:4px}.hero-self-grid{display:contents}.hero-self-grid button{position:absolute;width:76px;height:76px;min-height:0!important;padding:7px 3px!important;border-radius:50%!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:10px!important;line-height:1.1;box-shadow:0 4px 12px #203d5033}.hero-self-grid button span{font-size:23px;line-height:1}.hero-self-grid button:nth-child(1){left:13px;top:25px}.hero-self-grid button:nth-child(2){right:13px;top:25px}.hero-self-grid button:nth-child(3){right:0;top:110px}.hero-self-grid button:nth-child(4){right:13px;bottom:25px}.hero-self-grid button:nth-child(5){left:13px;bottom:25px}.hero-self-grid button:nth-child(6){left:0;top:110px}.hero-self-actions>small{position:absolute;top:294px;left:0;width:100%;margin:0;padding:5px 8px;background:#f8fcffeb;border-radius:8px;text-align:center;font-size:10px} @media(max-width:760px){ #app #sidePanel.side-panel.is-animation-lab-panel:has(.hero-lab){width:auto!important;max-height:calc(100dvh - 82px)!important} .hero-lab-body{grid-template-columns:1fr;gap:12px}.hero-lab-stage canvas{height:210px}.hero-lab-stage-caption{margin:0 0 8px} .hero-lab-heading h2{font-size:21px}.hero-lab-heading>span{display:none}.hero-lab-directions{grid-template-columns:repeat(4,minmax(0,1fr))} .hero-lab-directions canvas{height:74px}.hero-lab-apply button{flex:1 1 45%;min-height:42px} .hero-roster-filters{grid-template-columns:1fr 1fr}.hero-roster-filters label:first-child{grid-column:1/-1}.hero-floor-action{bottom:116px;font-size:12px} .hero-lab-stage-figures.is-comparing{grid-template-columns:repeat(2,minmax(0,1fr))} .hero-lab-stage-figures canvas{height:170px;max-height:170px} .hero-lab-stage-figures figcaption{font-size:10px} } /* Complete names stay readable beside the favorite control on narrow phones. */ @media(max-width:400px){.hero-lab-characters{grid-template-columns:minmax(0,1fr)}.hero-lab-characters b{overflow-wrap:anywhere}} /* pk-style-source:86 */ /* /mobile-ui-v2260.css */ /* Mobile UI v2.26.0 One final geometry owner for world windows on phones. Feature styles keep their colours and content; this file owns only viewport fit, stacking, scrolling and touch targets. */ @media (max-width:760px), (pointer:coarse) and (max-height:560px) { html, body { overscroll-behavior:none; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] { --m26-edge: max(6px, env(safe-area-inset-left)); --m26-edge-right: max(6px, env(safe-area-inset-right)); --m26-top: calc(var(--pk-mobile-vv-offset-top, 0px) + max(6px, env(safe-area-inset-top))); --m26-dock-height: 68px; --m26-dock-bottom: max(6px, env(safe-area-inset-bottom)); --m26-dock-space: calc(var(--m26-dock-height) + var(--m26-dock-bottom) + 8px); --m26-panel-radius: 18px; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] :is(button, input, select, textarea) { touch-action:manipulation; } /* Exactly five stable navigation cells. No raised centre button and no transforms: opening the menu cannot move a button into the popover. */ body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .desktop-dock, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .desktop-utility-rail { display:none!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock { position:absolute!important; z-index:212!important; top:auto!important; right:var(--m26-edge-right)!important; bottom:var(--m26-dock-bottom)!important; left:var(--m26-edge)!important; display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:3px!important; width:auto!important; height:var(--m26-dock-height)!important; min-height:var(--m26-dock-height)!important; max-height:var(--m26-dock-height)!important; padding:5px!important; overflow:visible!important; border:1px solid color-mix(in srgb,var(--theme-border) 88%,white)!important; border-radius:19px!important; background:color-mix(in srgb,var(--theme-card) 95%,transparent)!important; box-shadow:0 12px 34px rgba(4,31,47,.24),inset 0 1px rgba(255,255,255,.86)!important; transform:none!important; backdrop-filter:blur(14px) saturate(1.08)!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > button, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > .mobile-dock-primary { position:relative!important; display:grid!important; grid-template-rows:31px 13px!important; place-items:center!important; align-content:center!important; justify-self:stretch!important; gap:2px!important; width:auto!important; min-width:0!important; max-width:none!important; height:56px!important; min-height:56px!important; max-height:56px!important; margin:0!important; padding:3px 1px!important; border:0!important; border-radius:13px!important; background:transparent!important; color:#587481!important; box-shadow:none!important; transform:none!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > button:is(.is-active,.is-menu-open), body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > .mobile-dock-primary { background:color-mix(in srgb,var(--theme-accent) 10%,transparent)!important; color:var(--theme-accent)!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > button::before, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > button::after, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > button > span::before, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > button > span::after { display:none!important;content:none!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > button > span { display:grid!important; grid-row:1!important; place-items:center!important; width:31px!important; height:31px!important; border:0!important; background:transparent!important; box-shadow:none!important; transform:none!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock .pokemon-nav-art, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock .pokemon-nav-raster, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock .mobile-nav-asset-v69 { display:block!important; width:30px!important; height:30px!important; object-fit:contain!important; filter:none!important; transform:none!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > button > b { grid-row:2!important; display:block!important; max-width:100%!important; overflow:hidden!important; color:currentColor!important; font-size:10px!important; font-weight:800!important; line-height:1.1!important; letter-spacing:0!important; text-overflow:ellipsis!important; text-transform:none!important; white-space:nowrap!important; } @layer mobile-phone-patch { #desktopMoreMenu[data-mobile-menu-layout] { --menu-paper:var(--pp-dark-surface-0,#f1f5f6); --menu-card:var(--pp-dark-surface-1,#fff); --menu-band:var(--pp-dark-surface-2,#e6eef1); --menu-ink:var(--pp-dark-text,#213847); --menu-muted:var(--pp-dark-text-muted,#4c6371); --menu-line:var(--pp-dark-border,#c4d5dd); position:absolute!important;z-index:211!important; inset:var(--m26-top) var(--m26-edge-right) calc(var(--m26-dock-space) + 6px) var(--m26-edge)!important; width:auto!important;height:auto!important;max-width:none!important;max-height:none!important; display:none!important;flex-direction:column!important;gap:0!important; overflow:hidden!important;padding:0!important;transform:none!important; border:1px solid var(--menu-line)!important;border-radius:16px!important; background:var(--menu-paper)!important;color:var(--menu-ink)!important; box-shadow:0 12px 34px #051b2b45!important; } body:not(.is-battling) #desktopMoreMenu[data-mobile-menu-layout].is-desktop-menu-open { display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important; } #desktopMoreMenu .menu-directions-head { display:flex;align-items:center;justify-content:space-between;flex:none;gap:8px; padding:6px 10px;border-bottom:1px solid var(--menu-line);background:var(--menu-card); } #desktopMoreMenu .menu-directions-head h2 {margin:0;font:800 21px/1.2 system-ui;} #desktopMoreMenu .menu-directions-head button { width:44px!important;height:44px!important;min-height:44px!important;padding:0!important; border:1px solid var(--menu-line)!important;border-radius:10px!important; background:var(--menu-band)!important;color:var(--menu-ink)!important;font:23px/1 system-ui!important; } #desktopMoreMenu .menu-directions-body { display:grid;grid-auto-rows:max-content;align-content:start;gap:8px;flex:1;min-height:0; overflow:auto;overscroll-behavior:contain;padding:8px; } #desktopMoreMenu .menu-directions-body section { min-width:0;border:1px solid var(--menu-line);border-radius:12px;background:var(--menu-card);overflow:hidden; } #desktopMoreMenu .menu-directions-body h3 { margin:0;padding:5px 10px;background:var(--menu-band);font:750 12px/1.3 system-ui; } #desktopMoreMenu .menu-directions-body button { position:relative;display:grid!important;grid-template-columns:32px minmax(0,1fr) 14px!important; grid-template-rows:auto auto!important;align-content:center!important;align-items:center!important; justify-items:start!important;column-gap:7px!important;row-gap:0!important; min-height:44px!important;width:100%!important;margin:0!important;padding:3px 9px!important; border:0!important;border-radius:0!important;background:transparent!important;color:var(--menu-ink)!important; } #desktopMoreMenu .menu-directions-body button + button {border-top:1px solid var(--menu-line)!important;} #desktopMoreMenu .menu-directions-body button:is([hidden],.desktop-menu-only) {display:none!important;} #desktopMoreMenu .menu-directions-body button > span { grid-row:1/span 2;width:30px!important;height:30px!important;display:grid!important;place-items:center; } #desktopMoreMenu .menu-directions-body button > span :is(img,.mobile-nav-icon,.ui-icon) { width:29px!important;height:29px!important;object-fit:contain!important; } #desktopMoreMenu .menu-directions-body button > b {grid-column:2;text-align:left!important;font:750 13px/1.15 system-ui!important;} #desktopMoreMenu .menu-directions-body small {grid-column:2;font:11px/1.2 system-ui;color:var(--menu-muted);} #desktopMoreMenu .menu-directions-body button::after {content:"›" / "";grid-area:1/3/span 2;color:var(--menu-muted);} #desktopMoreMenu .menu-directions-body [data-desktop-utility="encyclopedia"]::after {content:"↗" / "";} #desktopMoreMenu[data-mobile-menu-layout] button:focus-visible { outline:2px solid var(--pp-dark-focus,#17647d)!important;outline-offset:-3px; } @media (min-width:761px) and (orientation:landscape) { #desktopMoreMenu .menu-directions-body {grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;} } } /* Shared sheet geometry for every world-side panel. Region map intentionally remains a dedicated full-screen surface below. */ body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.side-panel:not(.is-regions-panel), body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #editorPanel.editor-panel { position:absolute!important; z-index:204!important; top:var(--m26-top)!important; right:var(--m26-edge-right)!important; bottom:var(--m26-dock-space)!important; left:var(--m26-edge)!important; box-sizing:border-box!important; width:auto!important; min-width:0!important; max-width:none!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:10px!important; overflow:hidden!important; border-radius:var(--m26-panel-radius)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transform:scale(.985)!important; transform-origin:center bottom!important; transition:opacity .14s ease,transform .16s ease,visibility 0s linear 0s!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.side-panel:not(.is-regions-panel).is-open, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #editorPanel.editor-panel.is-open { opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; transition-delay:0s!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #editorPanel.editor-panel.is-open { overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #editorPanel.editor-panel { background:#f5fbfe!important; backdrop-filter:none!important; } html[data-game-theme="dark"] body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #editorPanel.editor-panel { background:#102d3b!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #editorPanel .editor-head { position:sticky!important; z-index:4!important; top:-7px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel > .panel-window-grip, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #editorPanel [data-panel-drag] { touch-action:auto!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel > .panel-close { position:absolute!important; z-index:90!important; top:8px!important; right:8px!important; display:grid!important; place-items:center!important; width:44px!important; min-width:44px!important; height:44px!important; min-height:44px!important; margin:0!important; padding:0!important; border-radius:13px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel > .panel-close:empty::before { content:"×"!important; display:block!important; color:var(--theme-text)!important; font-size:28px!important; font-weight:500!important; line-height:1!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanelContent { box-sizing:border-box!important; width:100%!important; min-width:0!important; max-width:100%!important; height:100%!important; min-height:0!important; max-height:100%!important; padding:1px 1px 8px!important; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain!important; scrollbar-width:thin; -webkit-overflow-scrolling:touch; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanelContent > * { min-width:0!important;max-width:100%!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanelContent :is(img,svg,canvas,video) { max-width:100%; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanelContent :is(input,select,textarea) { max-width:100%;font-size:max(16px,1em); } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanelContent :is(.panel-title,.panel-section-head-v2737,.inventory-head-v49,.pokedex-library-head) { padding-right:52px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .profile-v80 > .profile-v80-edit { display:none!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .profile-v80-status-icon { display:block!important;width:15px!important;height:15px!important;max-width:15px!important;max-height:15px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .genetics-lab-hero { padding-right:62px!important; } /* Nested feature views keep one scroll owner instead of making the whole document and the inner catalogue fight for the same touch gesture. */ body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.is-inventory-panel #sidePanelContent, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.is-team-panel #sidePanelContent, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.is-center-panel #sidePanelContent, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.is-pokedex-panel #sidePanelContent { overflow:hidden!important; } /* Detail dossiers are long, linear documents on a phone. Older feature styles turned their root scroller off and made the lower half impossible to reach. Keep catalogue grids internally scrollable, but let both detail views use the shared sheet scroller. */ body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel:is(.is-pokedex-detail,.is-pokemon-detail-panel) #sidePanelContent { overflow-x:hidden!important; overflow-y:auto!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.is-pokemon-detail-panel :is(.pokemon-instance-v46,.pokemon-instance-v47) { height:auto!important; min-height:100%!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] :is(.team-grid-v47,.team-grid-v48,.team-grid-v56,.center-grid-v46,.pokedex-grid-v41,.inventory-items-v49,.inventory-items-v52) { overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] :is(.binding-row,.audio-setting-row) { grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .binding-row > div { display:grid!important;grid-template-columns:1fr 1fr!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .binding-row button { min-width:0!important;min-height:44px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] :is(.progression-summary-v2761,.faction-grid-v2761) { grid-template-columns:1fr!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] :is(.oak-program-card,.oak-program-top,.oak-rewards,.oak-reward-chip) { min-width:0!important;max-width:100%!important;box-sizing:border-box!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .oak-reward-chip { white-space:normal!important;overflow-wrap:anywhere!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .oak-reward-chip :is(.oak-reward-icon,img,svg) { flex:0 0 24px!important;width:24px!important;height:24px!important; } /* Region atlas is the only world panel that needs every pixel. The dock is hidden while it is open, so its own close button is the single exit. */ body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.side-panel.is-regions-panel, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.side-panel.is-regions-panel.is-open { position:fixed!important; z-index:230!important; inset:0!important; width:100vw!important; min-width:0!important; max-width:none!important; height:var(--pk-mobile-vv-height,100dvh)!important; min-height:0!important; max-height:none!important; margin:0!important; padding:0!important; overflow:hidden!important; border:0!important; border-radius:0!important; transform:none!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.side-panel.is-regions-panel { opacity:0!important; visibility:hidden!important; pointer-events:none!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.side-panel.is-regions-panel.is-open { opacity:1!important; visibility:visible!important; pointer-events:auto!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"]:has(#sidePanel.is-open.is-regions-panel) :is(.mobile-dock,#desktopMoreMenu) { opacity:0!important; visibility:hidden!important; pointer-events:none!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.is-regions-panel #sidePanelContent { padding:0!important;overflow:auto!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .region-map-v2204 { min-height:100%;overflow:auto!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .region-map-v2204-header { position:sticky!important;top:0!important;z-index:30!important; } /* Messenger uses the same safe rectangle as game sheets. */ body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel.chat-panel.chat-messenger { position:absolute!important; z-index:205!important; top:var(--m26-top)!important; right:var(--m26-edge-right)!important; bottom:var(--m26-dock-space)!important; left:var(--m26-edge)!important; display:grid!important; grid-template-rows:56px 48px minmax(0,1fr)!important; box-sizing:border-box!important; width:auto!important; min-width:0!important; max-width:none!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:0!important; overflow:hidden!important; border-radius:var(--m26-panel-radius)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transform:scale(.985)!important; transition:opacity .14s ease,transform .16s ease,visibility 0s linear 0s!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel.chat-panel.chat-messenger.is-open { opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; transition-delay:0s!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel > .chat-head { min-height:56px!important;padding:6px 7px 6px 11px!important;touch-action:auto!important;cursor:default!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel .chat-head-actions > button { width:44px!important;height:44px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel > .chat-tabs { min-width:0!important;padding:4px 5px!important;overflow-x:auto!important;scrollbar-width:none; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel > .chat-tabs::-webkit-scrollbar { display:none; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel > .chat-tabs > button { min-width:0!important;min-height:40px!important;padding-inline:3px!important;font-size:10px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel > .chat-messenger-layout { grid-template-columns:minmax(0,1fr)!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel .chat-online-sidebar { display:none!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel > .chat-resize { display:none!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel > .chat-messenger-layout, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel .chat-conversation, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel .chat-log-wrap { min-width:0!important;min-height:0!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel .chat-log { overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel .chat-author-button { display:inline!important; width:auto!important; min-width:0!important; max-width:min(48vw,220px)!important; height:auto!important; min-height:0!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:var(--chat75-ink)!important; font-size:12px!important; line-height:1.2!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel #chatForm { grid-template-columns:44px minmax(0,1fr) 44px!important;min-height:58px!important;margin:0 6px 6px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel #chatForm textarea { min-width:0!important;font-size:16px!important;line-height:1.35!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel #chatForm textarea::placeholder { font-size:14px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel :is(.chat-composer-tool,.chat-send-button) { width:44px!important;height:44px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel > .chat-emoji-panel { top:108px!important;right:6px!important;bottom:64px!important;left:6px!important;width:auto!important;height:auto!important;min-height:0!important;max-height:none!important; } /* Other game dialogs follow the same safe-area and internal-scroll rules. */ .notification-center.is-open { z-index:224!important; top:max(6px,env(safe-area-inset-top))!important; right:max(6px,env(safe-area-inset-right))!important; bottom:calc(82px + env(safe-area-inset-bottom))!important; left:max(6px,env(safe-area-inset-left))!important; width:auto!important; max-width:none!important; height:auto!important; max-height:none!important; border-radius:18px!important; } .notification-center-list { min-height:0!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch; } .marketplace-modal { z-index:320!important;padding:0!important; } .marketplace-shell { width:100%!important;height:var(--pk-mobile-vv-height,100dvh)!important;max-height:none!important;border:0!important;border-radius:0!important; } .marketplace-head { min-height:64px!important;padding:10px max(10px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))!important; } .marketplace-head h2 { font-size:20px!important; } .marketplace-head > button { width:44px!important;height:44px!important; } .marketplace-tabs { overflow-x:auto!important;overscroll-behavior-x:contain;scrollbar-width:none; } .marketplace-tabs::-webkit-scrollbar { display:none; } .marketplace-tabs button { min-width:96px!important;min-height:44px!important; } .marketplace-body { min-width:0!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch; } .marketplace-toolbar { grid-template-columns:1fr!important; } :is(.trade-dialog,#inventoryItemDialog,.world-channel-confirm,.professor-transfer-dialog,.social-invite,.pvp-invite) { z-index:300!important;box-sizing:border-box!important; } .trade-dialog { align-items:end!important;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important; } .trade-dialog__content { width:100%!important;max-height:calc(var(--pk-mobile-vv-height,100dvh) - 94px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch; } #inventoryItemDialog { align-items:end!important;padding:6px max(6px,env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important; } #inventoryItemDialog .inventory-item-dialog-v2738__content { width:100%!important;max-height:calc(var(--pk-mobile-vv-height,100dvh) - 94px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important; } #inventoryItemDialog .inventory-item-dialog-v2741 { max-height:inherit!important;overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch; } .world-channel-confirm { align-items:end!important;padding:6px max(6px,env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important; } .world-channel-confirm__card { width:100%!important;max-height:calc(var(--pk-mobile-vv-height,100dvh) - 94px)!important;overflow:auto!important;border-radius:20px!important; } .professor-transfer-dialog { align-items:end!important;padding:6px max(6px,env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important; } .professor-transfer-card-shell { width:100%!important;max-height:calc(var(--pk-mobile-vv-height,100dvh) - 94px)!important;border-radius:20px 20px 16px 16px!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch; } :is(.social-invite,.pvp-invite) { align-items:end!important;padding:6px max(6px,env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important; } :is(.social-invite__card,.pvp-invite__card) { width:100%!important;max-height:calc(var(--pk-mobile-vv-height,100dvh) - 94px)!important;overflow:auto!important;border-radius:20px!important; } .controls-tutorial { right:max(6px,env(safe-area-inset-right))!important;bottom:calc(82px + env(safe-area-inset-bottom))!important;left:max(6px,env(safe-area-inset-left))!important;width:auto!important;transform:translateY(12px)!important; } .controls-tutorial.is-open { transform:none!important; } .controls-tutorial-card { max-height:calc(var(--pk-mobile-vv-height,100dvh) - 100px)!important;overflow:auto!important; } .dialogue-layer { box-sizing:border-box!important;height:var(--pk-mobile-vv-height,100dvh)!important;align-items:end!important;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important; } .dialogue-layer .dialogue-card { width:100%!important;height:auto!important;min-height:0!important;max-height:calc(var(--pk-mobile-vv-height,100dvh) - 94px)!important;overflow:auto!important;overscroll-behavior:contain!important; } html[data-ui-revision="pokemon-next"] .dialogue-layer .dialogue-card::before { z-index:3!important; top:0!important; right:auto!important; bottom:0!important; left:0!important; width:6px!important; border-radius:inherit 0 0 inherit!important; background:linear-gradient(180deg,var(--pk2-red) 0 33%,var(--pk2-yellow) 33% 66%,var(--pk2-blue) 66% 100%)!important; opacity:1!important; } .starter-dialog { padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important; } .starter-dialog .starter-experience { width:100%!important;height:calc(var(--pk-mobile-vv-height,100dvh) - max(12px,env(safe-area-inset-top) + env(safe-area-inset-bottom)))!important;max-height:none!important;border-radius:18px!important; } .starter-dialog .starter-flow-content { min-width:0!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch; } .lab-games.is-open { z-index:330!important;box-sizing:border-box!important;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important; } .lab-games.is-open .lab-games__shell { width:100%!important;height:calc(var(--pk-mobile-vv-height,100dvh) - max(12px,env(safe-area-inset-top) + env(safe-area-inset-bottom)))!important;max-width:none!important;max-height:none!important;border-radius:18px!important; } .lab-games.is-open :is(.lab-games__body,.lab-games__arena,.lab-games__board) { min-width:0!important;min-height:0!important; } .quest-offer-v57 { z-index:305!important; box-sizing:border-box!important; align-items:end!important; padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important; } .quest-offer-v57 > section { width:100%!important;max-height:calc(var(--pk-mobile-vv-height,100dvh) - 94px)!important;overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch; } .player-action-wheel { left:50%!important; top:auto!important; bottom:var(--m26-dock-space)!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:7px!important; width:min(340px,calc(100vw - 12px))!important; height:auto!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - var(--m26-dock-space) - var(--m26-top) - 6px)!important; padding:62px 8px 8px!important; overflow:auto!important; transform:translate(-50%,0) scale(.98)!important; } .player-action-wheel.is-open { transform:translate(-50%,0) scale(1)!important; } .player-action-wheel__center { left:8px!important;right:8px!important;top:8px!important;width:auto!important;height:46px!important;transform:none!important;display:grid!important;grid-template-columns:36px minmax(0,1fr)!important;grid-template-rows:1fr 1fr!important;justify-items:start!important;align-content:center!important; } .player-action-wheel__avatar { grid-row:1/3!important;width:34px!important;height:34px!important;margin:0 7px 0 0!important; } .player-action-wheel__item { position:static!important;width:auto!important;height:48px!important;display:flex!important;justify-content:center!important;gap:6px!important; } .reward-celebration { top:var(--m26-top)!important;width:calc(100vw - 12px)!important;max-height:calc(var(--pk-mobile-vv-height,100dvh) - var(--m26-top) - 6px)!important;overflow:hidden!important; } /* The software keyboard owns the bottom of the visual viewport. Hide the dock and lift chat above the real keyboard inset instead of resizing twice. */ html[data-mobile-keyboard="open"] body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock { opacity:0!important;visibility:hidden!important;pointer-events:none!important; } html[data-mobile-keyboard="open"] body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel.chat-panel.chat-messenger { bottom:calc(var(--pk-mobile-keyboard-inset,0px) + 6px)!important; border-radius:15px!important; } } @media (max-width:380px) { body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] { --m26-dock-height:64px;--m26-panel-radius:16px; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock { gap:1px!important;padding-inline:3px!important;border-radius:17px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > button, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > .mobile-dock-primary { height:53px!important;min-height:53px!important;max-height:53px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > button > b { font-size:9px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] :is(.team-grid-v47,.team-grid-v48,.team-grid-v56,.center-grid-v46) { grid-template-columns:1fr!important; } } @media (pointer:coarse) and (max-height:560px) and (orientation:landscape) { body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] { --m26-dock-height:60px;--m26-dock-space:calc(var(--m26-dock-height) + var(--m26-dock-bottom) + 5px);--m26-panel-radius:15px; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock { left:50%!important;right:auto!important;width:min(520px,calc(100vw - 12px))!important;transform:translateX(-50%)!important;border-radius:16px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > button, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock > .mobile-dock-primary { height:50px!important;min-height:50px!important;max-height:50px!important;grid-template-rows:27px 12px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock .pokemon-nav-art, body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] .mobile-dock .pokemon-nav-raster { width:26px!important;height:26px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.side-panel:not(.is-regions-panel), body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #editorPanel.editor-panel { left:max(4px,env(safe-area-inset-left))!important;right:max(4px,env(safe-area-inset-right))!important;padding:7px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel.chat-panel.chat-messenger { grid-template-rows:50px 44px minmax(0,1fr)!important;left:max(4px,env(safe-area-inset-left))!important;right:max(4px,env(safe-area-inset-right))!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel > .chat-head { min-height:50px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #chatPanel > .chat-emoji-panel { top:96px!important; } .dialogue-layer .dialogue-card { grid-template-columns:84px minmax(0,1fr)!important;grid-template-rows:minmax(110px,auto) auto!important; } .dialogue-layer .dialogue-portrait { width:84px!important;height:122px!important; } .dialogue-layer .dialogue-copy { padding:8px 0!important; } .dialogue-layer .dialogue-copy > p { min-height:44px!important;margin:8px 0 5px!important;font-size:12px!important; } .dialogue-layer .dialogue-actions { padding-top:6px!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.is-regions-panel .region-map-v2204-layout { display:block!important;overflow:visible!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.is-regions-panel .region-map-v2204-stage { display:block!important;padding:7px 0!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.is-regions-panel .region-map-v2204-viewport { width:100%!important;height:calc(var(--pk-mobile-vv-height,100dvh) - 122px)!important;min-height:220px!important;border-radius:0!important; } body:not(.is-battling) .game-screen[data-mobile-ui="v2260"] #sidePanel.is-regions-panel .region-map-v2204-sidebar { padding:8px!important;overflow:visible!important; } } @media (prefers-reduced-motion:reduce) { .game-screen[data-mobile-ui="v2260"] :is(#sidePanel,#chatPanel,#editorPanel,#desktopMoreMenu,.mobile-dock), :is(.notification-center,.controls-tutorial) { transition:none!important;animation:none!important; } } /* pk-style-source:87 */ /* /mobile-navigation-v2280.css */ /* Raster game navigation and circular phone minimap v2.28.0. */ .game-ui-raster-v2280 { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; filter:drop-shadow(0 2px 2px rgba(9,42,60,.18)); pointer-events:none; user-select:none; -webkit-user-drag:none; } .mobile-quest-launcher-v2270 { display:none; } .game-screen[data-mobile-navigation="v2280"] :is(.desktop-dock,.mobile-dock) [data-nav-icon] { display:grid; place-items:center; overflow:visible; } .game-screen[data-mobile-navigation="v2280"] :is(.desktop-dock,.mobile-dock) .mobile-nav-icon { display:block!important; width:100%!important; height:100%!important; overflow:visible!important; object-fit:contain!important; } .game-screen[data-mobile-navigation="v2280"] #desktopMoreMenu > button > span[data-nav-icon] { display:grid!important; place-items:center!important; width:34px!important; height:34px!important; padding:2px!important; overflow:visible!important; border:1px solid color-mix(in srgb,var(--theme-border) 72%,white)!important; border-radius:11px!important; background:color-mix(in srgb,var(--theme-card) 90%,#e9f7fc)!important; box-shadow:inset 0 1px rgba(255,255,255,.9),0 3px 8px rgba(7,45,64,.09)!important; } .game-screen[data-mobile-navigation="v2280"] #desktopMoreMenu > button > span[data-nav-icon] .mobile-nav-icon { width:31px!important; height:31px!important; } .game-screen[data-mobile-navigation="v2280"] .chat-title-icon > .game-ui-raster-v2280 { width:29px!important; height:29px!important; } .game-screen[data-mobile-navigation="v2280"] .chat-head-actions .game-ui-raster-v2280 { width:20px!important; height:20px!important; filter:none; } .game-screen[data-mobile-navigation="v2280"] .resource-art-v74--experience { filter:drop-shadow(0 2px 2px rgba(18,82,143,.22)); } .game-screen[data-mobile-navigation="v2280"] .world-wallet-currency.is-gems .world-wallet-currency-icon, .game-screen[data-mobile-navigation="v2280"] .world-wallet-currency.is-gems .resource-art-v74--crystal { width:32px!important; height:32px!important; } .inventory-v52 .inventory-wallet-v49 > span.is-gems > .resource-art-v74--crystal { width:26px!important; height:26px!important; } .inventory-v52 .inventory-capacity-v52 > button > .resource-art-v74--crystal { width:22px!important; height:22px!important; } @media (min-width:761px) { .game-screen[data-mobile-navigation="v2280"] .desktop-dock .mobile-nav-icon { width:42px!important; height:42px!important; } } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] { --m28-map-top:calc(var(--pk-mobile-vv-offset-top,0px) + max(7px,env(safe-area-inset-top))); --m28-map-size:118px; --m28-quest-size:52px; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .mobile-dock .mobile-nav-icon { width:35px!important; height:35px!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .world-topbar > .world-wallet { display:flex!important; z-index:25!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .mobile-dock > button:is(.is-active,.is-menu-open) .game-ui-raster-v2280 { filter:drop-shadow(0 4px 5px color-mix(in srgb,var(--theme-accent) 30%,transparent)) brightness(1.04); transform:translateY(-1px) scale(1.035); } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] #questWidget { display:none!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .mobile-quest-launcher-v2270 { position:absolute!important; z-index:83!important; top:calc(var(--m28-map-top) + var(--m28-map-size) + 7px)!important; right:max(7px,env(safe-area-inset-right))!important; display:grid!important; grid-template-rows:31px 10px!important; place-items:center!important; gap:1px!important; width:var(--m28-quest-size)!important; min-width:var(--m28-quest-size)!important; height:var(--m28-quest-size)!important; min-height:var(--m28-quest-size)!important; padding:4px 3px!important; border:1px solid color-mix(in srgb,var(--theme-border) 88%,white)!important; border-radius:17px!important; background:color-mix(in srgb,var(--theme-card) 96%,transparent)!important; color:var(--theme-text)!important; box-shadow:0 8px 22px rgba(5,35,52,.22),inset 0 1px rgba(255,255,255,.92)!important; backdrop-filter:blur(12px) saturate(1.08)!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .mobile-quest-launcher-v2270 > span, body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .mobile-quest-launcher-v2270 .mobile-nav-icon { display:grid!important; place-items:center!important; width:31px!important; height:31px!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .mobile-quest-launcher-v2270 > b { max-width:100%!important; overflow:hidden!important; font-size:8px!important; font-weight:850!important; line-height:1!important; text-overflow:ellipsis!important; white-space:nowrap!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .mobile-quest-launcher-v2270 > i { position:absolute!important; top:-5px!important; right:-5px!important; display:grid!important; place-items:center!important; min-width:20px!important; height:20px!important; padding:0 5px!important; border:2px solid var(--theme-card)!important; border-radius:999px!important; background:#ef4e5f!important; color:#fff!important; font-size:9px!important; font-style:normal!important; font-weight:900!important; box-shadow:0 3px 8px rgba(118,20,34,.25)!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .mobile-quest-launcher-v2270 > i[hidden] { display:none!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .mobile-quest-launcher-v2270.has-ready { border-color:#58c995!important;background:color-mix(in srgb,#eafff4 88%,var(--theme-card))!important; } /* The phone map is intentionally circular. Desktop keeps its full rectangular navigator. */ body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .world-minimap { top:var(--m28-map-top)!important; right:max(7px,env(safe-area-inset-right))!important; display:block!important; width:var(--m28-map-size)!important; min-width:var(--m28-map-size)!important; max-width:var(--m28-map-size)!important; height:var(--m28-map-size)!important; min-height:var(--m28-map-size)!important; max-height:var(--m28-map-size)!important; overflow:hidden!important; border:2px solid rgba(255,255,255,.95)!important; border-radius:50%!important; background:#17394a!important; box-shadow:0 10px 25px rgba(0,24,38,.27),inset 0 0 0 1px rgba(11,110,184,.14)!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .world-minimap-topbar, body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .world-minimap-bottombar, body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .world-minimap-channel-menu { display:none!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .world-minimap-map-surface, body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .world-minimap-frame { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; overflow:hidden!important; border-radius:50%!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .world-minimap-frame::after { border-radius:50%!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .world-minimap-preview { width:100%!important;height:100%!important;object-fit:cover!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .world-topbar { right:calc(max(7px,env(safe-area-inset-right)) + var(--m28-map-size) + 9px)!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] #desktopMoreMenu > button { min-height:58px!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] #desktopMoreMenu > button > b { font-size:11px!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"]:has(#sidePanel.is-open,#chatPanel.is-open:not(.is-minimized),#editorPanel.is-open) .mobile-quest-launcher-v2270, body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"]:has(#desktopMoreMenu.is-desktop-menu-open) .mobile-quest-launcher-v2270 { opacity:0!important; visibility:hidden!important; pointer-events:none!important; } .inventory-v52 .inventory-wallet-v49 > span.is-gems > .resource-art-v74--crystal { width:21px!important; height:21px!important; } } @media (max-width:340px) { body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] { --m28-map-size:104px; --m28-quest-size:48px; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .mobile-dock .mobile-nav-icon { width:31px!important; height:31px!important; } } @media (max-width:340px) and (orientation:portrait) { body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] { --m28-map-top:calc(var(--pk-mobile-vv-offset-top,0px) + max(108px,calc(env(safe-area-inset-top) + 104px))); } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .world-topbar { right:max(7px,env(safe-area-inset-right))!important; } } @media (max-width:760px) and (orientation:portrait) { body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .world-topbar > .world-wallet { top:calc(var(--pk-mobile-vv-offset-top,0px) + max(120px,calc(env(safe-area-inset-top) + 112px)))!important; left:max(8px,env(safe-area-inset-left))!important; } } @media (pointer:coarse) and (max-height:560px) and (orientation:landscape) { body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] { --m28-map-size:94px; --m28-quest-size:44px; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .mobile-quest-launcher-v2270 { grid-template-rows:27px 9px!important; border-radius:14px!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .mobile-quest-launcher-v2270 > span, body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .mobile-quest-launcher-v2270 .mobile-nav-icon { width:27px!important; height:27px!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .world-topbar > .world-wallet { top:max(18px,env(safe-area-inset-top))!important; left:calc(max(8px,env(safe-area-inset-left)) + 308px)!important; right:auto!important; transform:none!important; } body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .notification-center-button { display:none!important; } } @media (min-width:761px) and (pointer:coarse) and (max-height:560px) and (orientation:landscape) { body:not(.is-battling) .game-screen[data-mobile-navigation="v2280"] .world-topbar > .world-wallet { left:calc(max(18px,env(safe-area-inset-left)) + 328px)!important; } } @media (prefers-reduced-motion:reduce) { .game-screen[data-mobile-navigation="v2280"] .game-ui-raster-v2280 { transition:none!important;transform:none!important; } } /* pk-style-source:88 */ /* /navigation-icon-polish-v2290.css */ /* Unified raster navigation artwork and flat icon/text menu v2.29.0. */ .game-ui-raster-v2290 { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; filter:drop-shadow(0 2px 2px rgba(9,42,60,.18)); pointer-events:none; user-select:none; -webkit-user-drag:none; } .game-screen[data-icon-revision="v2290"] :is(.desktop-dock,.mobile-dock) [data-nav-icon] { display:grid; place-items:center; overflow:visible; } .game-screen[data-icon-revision="v2290"] :is(.desktop-dock,.mobile-dock) .mobile-nav-icon { display:block!important; width:100%!important; height:100%!important; overflow:visible!important; object-fit:contain!important; } /* The menu card is the only container: the artwork no longer sits in a second tile. */ .game-screen[data-icon-revision="v2290"] #desktopMoreMenu > button > :is(span[data-nav-icon],span[data-icon]) { display:grid!important; place-items:center!important; flex:0 0 40px!important; width:40px!important; height:40px!important; padding:0!important; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } .game-screen[data-icon-revision="v2290"] #desktopMoreMenu > button > :is(span[data-nav-icon],span[data-icon]) :is(.mobile-nav-icon,.ui-icon) { display:block!important; width:38px!important; height:38px!important; max-width:38px!important; max-height:38px!important; object-fit:contain!important; overflow:visible!important; } .game-screen[data-icon-revision="v2290"] #desktopMoreMenu > button > b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .game-screen[data-icon-revision="v2290"] .chat-title-icon > .game-ui-raster-v2290 { width:29px!important; height:29px!important; } .game-screen[data-icon-revision="v2290"] .chat-head-actions .game-ui-raster-v2290 { width:20px!important; height:20px!important; filter:none; } @media (min-width:761px) { .game-screen[data-icon-revision="v2290"] .desktop-dock .mobile-nav-icon { width:42px!important; height:42px!important; } } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { body:not(.is-battling) .game-screen[data-icon-revision="v2290"] .mobile-dock .mobile-nav-icon { width:36px!important; height:36px!important; } body:not(.is-battling) .game-screen[data-icon-revision="v2290"] .mobile-dock > button:is(.is-active,.is-menu-open) .game-ui-raster-v2290 { filter:drop-shadow(0 3px 4px rgba(6,92,137,.22)) saturate(1.04); } body:not(.is-battling) .game-screen[data-icon-revision="v2290"] #desktopMoreMenu > button > :is(span[data-nav-icon],span[data-icon]) { flex-basis:34px!important; width:34px!important; height:34px!important; } body:not(.is-battling) .game-screen[data-icon-revision="v2290"] #desktopMoreMenu > button > :is(span[data-nav-icon],span[data-icon]) :is(.mobile-nav-icon,.ui-icon) { width:34px!important; height:34px!important; max-width:34px!important; max-height:34px!important; } } @media (prefers-reduced-motion:reduce) { .game-screen[data-icon-revision="v2290"] .game-ui-raster-v2290 { transition:none!important; transform:none!important; } } /* pk-style-source:89 */ /* /quest-icon-polish-v2300.css */ /* Quest journal v2.30 — raster category art, bounded inline artwork and compact empty HUD. */ .quest-journal-polish-v2300 .quest-type-graphic-v2300, .game-screen[data-quest-ui="v2300"] #questWidget .quest-type-graphic-v2300 { max-width:100%; max-height:100%; object-fit:contain; object-position:center; filter:drop-shadow(0 3px 4px rgba(5,38,57,.2)); } .quest-journal-polish-v2300 .quest-type-graphic-v2300.is-season { filter:drop-shadow(0 4px 7px rgba(104,49,184,.3)); } .quest-journal-polish-v2300 .quest-type-graphic-v2300.is-commission { transform:scale(.92); } /* Raster navigation art must never inherit the dimensions of quest copy. */ .quest-journal-polish-v2300 .quest-inline-location-v2300, .game-screen[data-quest-ui="v2300"] #questWidget .quest-inline-location-v2300 { display:inline-block!important; flex:0 0 15px!important; width:15px!important; height:15px!important; max-width:15px!important; max-height:15px!important; margin:0 3px 0 0; object-fit:contain!important; vertical-align:-3px; } .quest-journal-polish-v2300 .quest-current-v59 em:has(.quest-inline-location-v2300) { display:flex; align-items:center; gap:3px; min-width:0; } .quest-journal-polish-v2300 .quest-action-icon-v2300 { display:inline-block!important; flex:0 0 18px!important; width:18px!important; height:18px!important; max-width:18px!important; max-height:18px!important; object-fit:contain!important; } .quest-journal-polish-v2300 .quest-empty-icon-v2300 { display:block!important; width:58px!important; height:58px!important; max-width:58px!important; max-height:58px!important; object-fit:contain!important; } .quest-journal-polish-v2300 .quest-detail-empty-v59 > .game-ui-raster-v2290 { width:58px!important; height:58px!important; max-width:58px!important; max-height:58px!important; } @media (min-width:801px) { .game-screen[data-quest-ui="v2300"] #questWidget.quest-widget-list-v87.is-empty:not(.is-collapsed) { width:min(360px,calc(100vw - 32px))!important; max-height:116px!important; border-radius:17px!important; } .game-screen[data-quest-ui="v2300"] #questWidget.quest-widget-list-v87.is-empty:not(.is-collapsed) > .quest-tracker-head-v57 { min-height:44px!important; padding:6px 8px 6px 11px!important; } .game-screen[data-quest-ui="v2300"] #questWidget.quest-widget-list-v87.is-empty .quest-tracker-head-v57 .quest-type-graphic-v2300 { width:27px!important; height:27px!important; } .game-screen[data-quest-ui="v2300"] #questWidget.quest-widget-list-v87.is-empty .quest-tracker-head-v57 b { font-size:13px!important; } .game-screen[data-quest-ui="v2300"] #questWidget.quest-widget-list-v87.is-empty .quest-tracker-head-v57 button { width:32px; height:32px; } .game-screen[data-quest-ui="v2300"] #questWidget.quest-widget-list-v87.is-empty .quest-tracker-empty-v57 { min-height:60px; padding:8px 12px 10px; } .game-screen[data-quest-ui="v2300"] #questWidget.quest-widget-list-v87.is-empty .quest-tracker-empty-v57 b { font-size:11px!important; } .game-screen[data-quest-ui="v2300"] #questWidget.quest-widget-list-v87.is-empty .quest-tracker-empty-v57 small { font-size:8px!important; } } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { body:not(.is-battling) .game-screen[data-quest-ui="v2300"] .mobile-quest-launcher-v2270 { grid-template-rows:28px 9px!important; width:48px!important; min-width:48px!important; height:48px!important; min-height:48px!important; padding:4px 3px!important; border-radius:15px!important; } body:not(.is-battling) .game-screen[data-quest-ui="v2300"] .mobile-quest-launcher-v2270 > span, body:not(.is-battling) .game-screen[data-quest-ui="v2300"] .mobile-quest-launcher-v2270 .mobile-nav-icon { width:28px!important; height:28px!important; } body:not(.is-battling) .game-screen[data-quest-ui="v2300"] .mobile-quest-launcher-v2270 > b { font-size:7.5px!important; } } @media (max-width:430px) { .quest-journal-polish-v2300 .quest-empty-icon-v2300, .quest-journal-polish-v2300 .quest-detail-empty-v59 > .game-ui-raster-v2290 { width:48px!important; height:48px!important; max-width:48px!important; max-height:48px!important; } } @media (prefers-reduced-motion:reduce) { .quest-journal-polish-v2300 .quest-type-graphic-v2300 { transition:none!important; } } /* pk-style-source:90 */ /* /map-ui-polish-v2301.css */ /* v2.31.2 — calm map language: the atlas is navigation, not a dashboard. */ .region-map-v2204 { --atlas-ink:#173e4c; --atlas-muted:#6d858c; --atlas-border:#d7e7e1; --atlas-surface:#f8fcfa; --atlas-route:#2f9eb5; --atlas-focus:#f2a83b; } .region-map-v2204-header { min-height:78px; padding:17px 20px; background:linear-gradient(112deg,#0f4656 0%,#195f6a 54%,#328b82 100%); } .region-map-v2204-header > div:first-child > span { color:#d5f7ec;background:rgba(255,255,255,.1); } .region-map-v2204-header h2 { font-size:28px;letter-spacing:-.045em; } .region-map-v2204-header p { color:#b8e0dc;font-size:10px; } .region-map-v2204-test-toggle { min-width:128px;min-height:34px;padding:5px 8px;border-radius:11px;box-shadow:none; } .region-map-v2204-test-toggle > i { width:22px;height:22px;border-radius:7px; } .region-map-v2204-test-toggle b { font-size:8px; } .region-map-v2204-test-toggle small { display:none; } .region-map-v2204-stage { grid-template-rows:auto minmax(0,1fr) auto;padding:14px 15px 13px 17px; } .region-map-v2204-toolbar { min-height:28px;padding:0 2px 9px; } .region-map-v2204-legend, .region-map-v2221-test-locations { display:none!important; } .region-map-v2301-summary { display:flex;align-items:center;min-width:0;gap:7px;color:var(--atlas-muted);font-size:9px;font-weight:800; } .region-map-v2301-summary span, .region-map-v2301-summary strong { overflow:hidden;max-width:150px;text-overflow:ellipsis;white-space:nowrap; } .region-map-v2301-summary strong { color:var(--atlas-ink); } .region-map-v2301-summary i { color:#9ab1b1;font-style:normal;font-size:14px; } .region-map-v2204-toolbar > em { color:#6c858e;font-size:9px; } .region-map-v2312-key { display:flex;align-items:center;justify-content:center;gap:10px;min-width:0; } .region-map-v2312-key span { display:flex;align-items:center;gap:4px;color:#607a82;font-size:7px;font-weight:900;white-space:nowrap; } .region-map-v2312-key span::before { width:7px;height:7px;border:1px solid rgba(255,255,255,.95);border-radius:50%;content:"";box-shadow:0 0 0 1px rgba(13,56,66,.16); } .region-map-v2312-key .is-current::before { background:#f2ae42;box-shadow:0 0 0 3px rgba(242,174,66,.2); } .region-map-v2312-key .is-open::before { background:#218ea7; } .region-map-v2312-key .is-locked::before { background:#8c9ca0; } .region-map-v2204-viewport { border-color:#bed9d2;border-radius:18px;background:#83cbb6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 7px 20px rgba(18,66,68,.1); } .region-map-v2204-canvas::after { background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 46%,rgba(7,55,62,.11));box-shadow:inset 0 0 35px rgba(7,55,64,.1); } .region-map-v2204-canvas line { opacity:.22;stroke:#dceff0;stroke-width:4;stroke-dasharray:none;filter:none; } .region-map-v2204-canvas line.is-locked { opacity:.12;stroke:#365d62;stroke-dasharray:2 9; } .region-map-v2204-canvas line.is-planned { opacity:.94;stroke:var(--atlas-route);stroke-width:5;stroke-dasharray:7 7;filter:drop-shadow(0 1px 1px rgba(255,255,255,.82)); } .region-map-v2204-canvas line.is-selected-edge { stroke:var(--atlas-focus); } .region-map-v2204-node { width:20px;height:20px;border-width:2px;background:#7b8b90;box-shadow:0 2px 5px rgba(7,44,52,.28); } .region-map-v2204-node.is-open:not(.is-current):not(.is-selected) { background:#2b91a7; } .region-map-v2204-node > i svg { width:9px;height:9px; } .region-map-v2204-node.is-hub:not(.is-current) { width:22px;height:22px; } .region-map-v2204-node.is-current { width:26px;height:26px;background:#f2ae42;box-shadow:0 0 0 4px rgba(242,174,66,.22),0 3px 8px rgba(6,45,52,.3); } .region-map-v2204-node.is-selected { width:28px;height:28px;background:var(--node-accent,#1f92a5);box-shadow:0 0 0 4px rgba(255,255,255,.76),0 5px 12px rgba(5,49,58,.35); } .region-map-v2204-node.is-on-route:not(.is-selected):not(.is-current) { box-shadow:0 0 0 3px rgba(47,158,181,.22),0 2px 6px rgba(7,44,52,.3); } .region-map-v2204-node.is-locked { opacity:.42;filter:saturate(.3); } .region-map-v2204-node > span { top:calc(100% + 6px);max-width:128px;padding:4px 7px;border-color:rgba(255,255,255,.92);border-radius:8px;color:#174252;background:rgba(251,255,253,.96);box-shadow:0 2px 8px rgba(8,45,52,.13);font-size:7px; } .region-map-v2204[data-zoomed="true"] .region-map-v2204-node:not(.is-locked) > span { opacity:0;transform:translate(-50%,-3px); } .region-map-v2204[data-zoomed="true"] .region-map-v2204-node.has-label > span, .region-map-v2204-node.has-label > span, .region-map-v2204-node:hover > span, .region-map-v2204-node:focus-visible > span { opacity:1;transform:translate(-50%,0); } .region-map-v2204-node > em { top:-7px;right:-7px;min-width:15px;height:15px;padding:0;border:2px solid #fff;background:var(--atlas-route);font-size:7px;line-height:11px;box-shadow:0 2px 5px rgba(10,68,84,.28); } .region-map-v2204-zoom { display:grid!important;grid-template-columns:34px 34px 34px!important;grid-auto-flow:column!important;gap:1px!important;width:auto!important;min-width:0!important;height:38px!important;padding:2px!important;overflow:hidden!important;right:10px;bottom:10px;border-color:rgba(13,63,70,.78);background:rgba(10,55,63,.9);box-shadow:0 4px 13px rgba(8,51,58,.18); } .region-map-v2204-zoom output { display:none!important; } .region-map-v2204-zoom button, .region-map-v2204-zoom button:last-child { display:grid!important;place-items:center!important;width:34px!important;min-width:34px!important;height:34px!important;padding:0!important;border-radius:8px!important; } .region-map-v2204-zoom button:last-child { color:#174252;background:#f7fcfa; } .region-map-v2204-zoom button:last-child svg { width:15px!important;height:15px!important; } .region-map-v2204-zoom button:last-child span { display:none!important; } .region-map-v2204-sidebar { display:grid;align-content:start;gap:10px;padding:13px;background:linear-gradient(180deg,#f5fbf8,#edf6f1); } .region-map-v2204-selection, .region-teleport-v2204 { border-color:var(--atlas-border);border-radius:15px;box-shadow:0 5px 17px rgba(18,63,67,.06); } .region-map-v2204-selection-art { min-height:102px;padding:11px; } .region-map-v2204-selection-art b { font-size:16px; } .region-map-v2204-selection-copy { padding:11px; } .region-map-v2204-selection-copy > p { min-height:0;margin-bottom:9px;font-size:9px; } .region-map-v2204-selection-copy > div { gap:6px;margin-bottom:8px; } .region-map-v2204-selection-copy > div > span { padding:7px 8px; } .region-map-v2204-selection-copy ul { display:none; } .region-map-v2204-primary { min-height:42px;border-radius:11px;background:linear-gradient(135deg,#168aa2,#14788b);box-shadow:0 5px 12px rgba(14,109,130,.18); } .region-route-v2204 { display:none; } .region-teleport-v2204 { margin-top:0;padding:12px; } .region-teleport-v2204 > header { align-items:center; } .region-teleport-v2204 > header > i { width:34px;height:34px;padding:3px;border-radius:11px;background:linear-gradient(145deg,#8161bd,#5b3d9e);box-shadow:0 5px 11px rgba(91,61,158,.18); } .region-teleport-v2204 > header > i img { width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(23,12,62,.25)); } .region-teleport-v2204 > header b { font-size:13px; } .region-teleport-v2204 > header > em { color:#563d78;background:#eee7f6;font-size:7px; } .region-teleport-v2204 > p { margin:8px 0;color:#607a84;font-size:8px; } .region-teleport-v2301-guide { display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 7px;padding:6px 8px;border-radius:8px;color:#4d3b67;background:#f6f2fb; } .region-teleport-v2301-guide small, .region-teleport-v2301-destinations-head span { color:#80659e;font-size:6px;font-weight:950;letter-spacing:.1em; } .region-teleport-v2301-guide b { overflow:hidden;color:#4d3b67;font-size:8px;text-overflow:ellipsis;white-space:nowrap; } .region-teleport-v2204-sources { gap:7px;margin:0 0 10px; } .region-teleport-v2204-source { display:grid;grid-template-columns:34px minmax(0,1fr) auto;min-width:175px;padding:7px;border-radius:10px;background:#f8fbfa; } .region-teleport-v2204-source.is-selected { border-color:#8969c0;background:#f5f0fc;box-shadow:inset 0 0 0 1px rgba(137,105,192,.15); } .region-teleport-v2204-source-art, .region-teleport-v2204-source > img { width:34px!important;height:34px!important;object-fit:contain; } .region-teleport-v2204-source span { gap:1px;align-self:center; } .region-teleport-v2204-source small { color:#9276b0;font-size:6px;font-weight:950;letter-spacing:.05em; } .region-teleport-v2204-source b { color:#244654;font-size:9px; } .region-teleport-v2204-source em { color:#6d7f85;font-size:7px;font-style:normal;font-weight:800; } .region-teleport-v2204-source > i { display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:#fff;background:#7552ae; } .region-teleport-v2204-source > i svg { width:11px;height:11px; } .region-teleport-v2204-empty { min-width:0;padding:8px; } .region-teleport-v2204-empty > img { width:31px;height:31px;object-fit:contain; } .region-teleport-v2301-destinations-head { display:flex;align-items:center;justify-content:space-between;margin:0 1px 6px; } .region-teleport-v2301-destinations-head b { display:grid;place-items:center;min-width:17px;height:17px;border-radius:999px;color:#fff;background:#388f78;font-size:7px; } .region-teleport-v2204-destinations { grid-template-columns:1fr;max-height:180px;gap:5px; } .region-teleport-v2204-destination { grid-template-columns:28px minmax(0,1fr) auto;min-height:44px;padding:6px 7px;border-radius:10px; } .region-teleport-v2204-destination > i { width:28px;height:28px;border-radius:9px; } .region-teleport-v2204-destination b { font-size:8px; } .region-teleport-v2204-destination small { font-size:6px; } .region-teleport-v2204 > footer { display:none; } .region-teleport-v2204.needs-guide { padding-bottom:10px; } .region-teleport-v2204.needs-guide > header { margin-bottom:4px; } .region-teleport-v2312-empty-copy { margin:5px 0 8px!important;padding:7px 8px;border-radius:9px;color:#6d7f85!important;background:#f4f1f8;font-size:8px!important;line-height:1.35!important; } .region-teleport-v2204.needs-guide .region-teleport-v2204-sources { margin:0; } .region-teleport-v2204.needs-guide .region-teleport-v2204-empty { width:100%;min-height:44px;padding:7px 8px; } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { .region-map-v2204-header { min-height:65px;padding:9px max(12px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left)); } .region-map-v2204-header h2 { font-size:21px; } .region-map-v2204-header p { display:none; } .region-map-v2204-toolbar { padding-inline:12px; } .region-map-v2301-summary span, .region-map-v2301-summary strong { max-width:112px; } .region-map-v2204-toolbar > em { display:none; } .region-map-v2312-key { display:none; } .region-map-v2204-viewport { height:min(48vh,400px);min-height:255px; } .region-map-v2204-node { width:22px;height:22px; } .region-map-v2204-node.is-current, .region-map-v2204-node.is-selected { width:29px;height:29px; } .region-map-v2204-node > span { font-size:7px; } .region-map-v2204-sidebar { padding:10px max(12px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); } .region-map-v2204-selection { grid-template-columns:104px minmax(0,1fr); } .region-map-v2204-selection-art { min-height:100%;padding:9px; } .region-map-v2204-selection-copy { padding:9px; } .region-map-v2204-selection-copy > p { display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2; } .region-teleport-v2204 { padding:10px; } .region-teleport-v2204-sources { overflow-x:auto;scroll-snap-type:x mandatory; } .region-teleport-v2204-source { flex:0 0 min(78vw,250px);scroll-snap-align:start; } .region-teleport-v2204-destinations { grid-template-columns:1fr 1fr;max-height:none; } } @media (max-width:430px) { .region-map-v2204-selection { display:block; } .region-map-v2204-selection-art { min-height:88px; } .region-map-v2204-selection-copy > p { display:none; } .region-teleport-v2204-destinations { grid-template-columns:1fr; } .region-map-v2204-zoom output { display:none; } } /* pk-style-source:91 */ /* /brand-trainer.css */ /* Shared graphic identity; does not alter game HUD typography or window geometry. */ .pp-brand-wordmark{display:block;width:216px;height:72px;object-fit:contain;flex:none;user-select:none;-webkit-user-drag:none} .ppu-nav .ppu-brand,.portal-nav .portal-brand{display:flex;align-items:center;min-width:0;gap:0} #authScreen.ppu .ppu-brand .pp-brand-wordmark,.portal-nav .portal-brand .pp-brand-wordmark,.portal-footer .portal-brand .pp-brand-wordmark{width:216px;height:72px;max-width:100%;object-fit:contain;filter:none;border:0;border-radius:0;background:none} #authScreen.ppu .ppu-footer .pp-brand-wordmark{width:252px;height:84px} .auth-brand.brand.pp-trainer-brand{gap:8px;display:flex;align-items:center;flex-direction:column;background:none;padding:0} .auth-brand.brand.pp-trainer-brand .pp-brand-wordmark{width:min(320px,74vw);height:auto;aspect-ratio:3/1} .pp-brand-caption{font:600 10px/1.4 Arial,sans-serif;letter-spacing:.1em;color:inherit;opacity:.7} .pub-nav .pub-brand{display:flex;align-items:center;gap:0;min-width:0} .portal-footer .portal-brand .pp-brand-wordmark{background:#f7fafc;border-radius:12px} .pub-nav .pub-brand .pp-brand-wordmark{display:block;width:216px;height:72px;max-width:100%;object-fit:contain;filter:none;border:0;border-radius:0;background:none} @media(max-width:700px){.pub-nav .pub-brand .pp-brand-wordmark{width:174px;height:58px}} @media(max-width:370px){.pub-nav .pub-brand .pp-brand-wordmark{width:148px;height:50px}} @media(max-width:700px){#authScreen.ppu .ppu-nav .pp-brand-wordmark,.portal-nav .portal-brand .pp-brand-wordmark{width:174px;height:58px}} @media(max-width:370px){#authScreen.ppu .ppu-nav .pp-brand-wordmark,.portal-nav .portal-brand .pp-brand-wordmark{width:148px;height:50px}} /* pk-style-source:92 */ /* /homepage-brand-v1.css */ @font-face { font-family: ParkText; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/brand-v1/golos-text-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: ParkText; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/brand-v1/golos-text-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: ParkDisplay; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/brand-v1/russo-one-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: ParkDisplay; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/brand-v1/russo-one-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Trainer identity: two local Cyrillic faces, six real captures, lightweight motion. */ #authScreen.ppu{font-family:ParkText,Arial,sans-serif;--park-accent:#167eb4;--park-ink:#163e56} #authScreen.ppu :is(h1,h2,.ppu-partner-detail h3){font-family:ParkDisplay,Arial,sans-serif;font-weight:400;font-style:normal;font-synthesis:none;letter-spacing:-.025em;text-wrap:balance} #authScreen.ppu :is(h1,h2) em{font-family:inherit;font-style:normal;font-weight:400} #authScreen.ppu .ppu-hero h1{font-size:clamp(38px,4.1vw,66px);line-height:1.08;letter-spacing:-.035em;max-width:780px} #authScreen.ppu .ppu-hero-copy>p{font-size:clamp(15px,1.2vw,18px);line-height:1.7;max-width:540px} #authScreen.ppu .ppu-section-head h2{font-size:clamp(31px,3.1vw,49px);line-height:1.16;letter-spacing:-.025em} #authScreen.ppu .ppu-section-head h2 em{color:#258dbe} #authScreen.ppu .ppu-section-head>p{font-size:14px;line-height:1.75;color:#527084;max-width:320px} #authScreen.ppu .ppu-eyebrow{font-size:10px;font-weight:750;letter-spacing:.15em} #authScreen.ppu .ppu-nav{grid-template-columns:auto 1fr auto;gap:24px} #authScreen.ppu .ppu-nav nav{justify-content:center;gap:22px} #authScreen.ppu .ppu-nav nav a{font-size:12px;font-weight:650} #authScreen.ppu .ppu-button{border-radius:14px;background:linear-gradient(135deg,#ffbd49,#ff922f);color:#253e51;box-shadow:0 3px 0 #d47b242b,0 8px 20px #ff9b2420;transition:transform .18s,box-shadow .18s;font-weight:750;letter-spacing:0} #authScreen.ppu .ppu-button:active{transform:translateY(1px);box-shadow:none} #authScreen.ppu .ppu-watch{border-radius:16px;box-shadow:none;background:#fffffff2;border:1px solid #ffffffc9;min-height:66px} #authScreen.ppu .ppu-watch .ppu-play{background:#e9f5fd;color:#1789bd;border-radius:13px;border:1px solid #cce7f4} #authScreen.ppu .ppu-park-stats{border-radius:18px;padding:12px 18px;backdrop-filter:none;gap:20px;box-shadow:0 10px 32px #173c5515} #authScreen.ppu .ppu-stat-icon{width:48px;height:48px;border-radius:15px;background:#ecf8f2;color:#268c69;overflow:visible} #authScreen.ppu .ppu-stat-icon img{display:block;width:46px;height:46px;object-fit:contain} #authScreen.ppu .ppu-stat-icon.ppu-trainers-icon{background:#eef5ff;width:56px} #authScreen.ppu .ppu-trainers-icon img{position:absolute;top:8px;left:1px;width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:#dff2ff;object-fit:cover} #authScreen.ppu .ppu-trainers-icon img+img{left:24px;top:12px;width:31px;height:31px} #authScreen.ppu .ppu-online-icon i{right:-1px;bottom:0;border-width:3px} #authScreen.ppu .ppu-stat strong{font-family:ParkDisplay,Arial,sans-serif;font-weight:400;font-size:24px;color:#214e63} #authScreen.ppu .ppu-stat small{font-size:11px;color:#4d6c7e} #authScreen.ppu .ppu-stat+.ppu-stat{padding-left:18px} #authScreen.ppu .ppu-entry h2{font-size:24px;line-height:1.2} #authScreen.ppu .ppu-entry-return>img{width:138px;height:138px;background:#e8f6ff;border:5px solid white;box-shadow:0 8px 30px #26537617;object-fit:cover} /* The track spans the screen; neighbours retain their own full frame and soften slightly. */ #authScreen.ppu .ppu-gameplay{width:100%;max-width:none;padding-block:76px 64px;overflow:hidden;background:linear-gradient(#fff,#f1f8fc)} #authScreen.ppu .ppu-gameplay>.ppu-section-head{width:min(1280px,calc(100% - 96px));margin-inline:auto} #authScreen.ppu .ppu-slider{--slide-size:min(1040px,80vw);width:100%;margin-top:32px} #authScreen.ppu .ppu-slider-toolbar,#authScreen.ppu .ppu-slider-bottom{width:min(1280px,calc(100% - 96px));margin-inline:auto} #authScreen.ppu .ppu-slider-toolbar{margin-bottom:12px} #authScreen.ppu .ppu-slide-count{font-family:ParkText,Arial,sans-serif;letter-spacing:.06em;font-size:12px;color:#637b8d} #authScreen.ppu .ppu-slide-count b{font-family:ParkDisplay,Arial,sans-serif;font-weight:400;color:#1e709c;font-size:26px} #authScreen.ppu .ppu-carousel{position:relative;display:flex;gap:24px;width:100%;padding:22px calc((100% - var(--slide-size))/2) 30px;overflow-x:auto;border-radius:0;scroll-padding-inline:calc((100% - var(--slide-size))/2);scroll-snap-type:x mandatory;scrollbar-width:none;align-items:stretch;overscroll-behavior-x:contain} #authScreen.ppu .ppu-carousel:focus-visible{outline-offset:-5px} #authScreen.ppu .ppu-slide{flex:0 0 var(--slide-size);display:flex;flex-direction:column;min-width:0;border-radius:24px;background:#fff;box-shadow:0 18px 34px #20496810;border:1px solid #dceaf2;opacity:.58;transform:scale(.93);filter:blur(.7px);transition:opacity .35s,transform .4s,filter .35s;scroll-snap-align:center;overflow:hidden} #authScreen.ppu .ppu-slide[data-active=true]{opacity:1;transform:scale(1);filter:none;box-shadow:0 20px 45px #2049681c} #authScreen.ppu .ppu-slide-image{width:100%;aspect-ratio:16/9;display:block;border:0;padding:0;background:#e8f2f7;cursor:grab} #authScreen.ppu .ppu-slide:not([data-active=true]) .ppu-slide-image{cursor:pointer} #authScreen.ppu .ppu-slide-image img{width:100%;height:100%;aspect-ratio:16/9;object-fit:contain;object-position:center;transform:none;transition:none} #authScreen.ppu .ppu-slide-copy{display:grid;grid-template-columns:1fr minmax(240px,.8fr);column-gap:36px;row-gap:8px;padding:25px 32px 28px;align-items:center;min-height:128px} #authScreen.ppu .ppu-slide-copy>span{grid-column:1;font-size:10px;color:#267fab;font-weight:700;letter-spacing:.12em} #authScreen.ppu .ppu-slide-copy h3{grid-column:1;font:650 clamp(20px,2vw,28px)/1.24 ParkText,Arial,sans-serif;letter-spacing:-.035em;margin:0;color:#214e65;text-wrap:balance} #authScreen.ppu .ppu-slide-copy p{grid-column:2;grid-row:1/3;color:#516f81;font-size:13px;line-height:1.7;margin:0} #authScreen.ppu .ppu-slider-bottom{display:flex;justify-content:center;margin-top:5px;min-width:0} #authScreen.ppu .ppu-swipe-hint{display:none} #authScreen.ppu .ppu-carousel.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing} #authScreen.ppu .ppu-carousel.is-dragging *{cursor:grabbing;user-select:none} #authScreen.ppu .ppu-partners h2 em{color:#469471} #authScreen.ppu .ppu-partner-detail h3{font-size:clamp(34px,3.6vw,54px);line-height:1.14;letter-spacing:-.025em} #authScreen.ppu .ppu-partner-visual>img{max-height:100%;object-fit:contain} #authScreen.ppu .ppu-starter-tabs button{border-radius:20px;min-height:104px;transition:transform .18s,border-color .18s,background .18s} #authScreen.ppu .ppu-starter-tabs b{font-family:ParkText,Arial,sans-serif;font-size:16px;font-weight:700} #authScreen.ppu .ppu-skills>div{border:1px solid #e0ebef;border-radius:15px;padding:11px;background:#ffffffbd;align-items:center} #authScreen.ppu .ppu-skills{gap:10px;margin:23px 0} #authScreen.ppu .ppu-skills img{width:52px;height:52px;border-radius:12px;box-shadow:none} #authScreen.ppu .ppu-skills b{color:#29566b;font-size:13px} #authScreen.ppu .ppu-skills small{font-size:11px;color:#536f81;line-height:1.35} #authScreen.ppu .ppu-activity h3{font-family:ParkText,Arial,sans-serif;font-size:25px;font-weight:700;line-height:1.25;letter-spacing:-.04em} #authScreen.ppu .ppu-activity p{color:#526b7b;font-size:14px;line-height:1.75} #authScreen.ppu .ppu-community h2{font-size:clamp(30px,3.6vw,48px);line-height:1.16;letter-spacing:-.025em} #authScreen.ppu .ppu-community-copy>p{color:#536c82;font-size:14px;line-height:1.7} #authScreen.ppu .ppu-social-card{border-radius:17px;box-shadow:none} #authScreen.ppu .ppu-social-card small{color:#5f7c91;font-size:11px} #authScreen.ppu .ppu-footer :is(p,a){color:#527084} #authScreen.ppu .ppu-reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)} #authScreen.ppu .ppu-reveal.is-visible,#authScreen.ppu[data-motion=paused] .ppu-reveal{opacity:1;transform:none} #authScreen.ppu[data-motion=paused] *{animation-play-state:paused!important} #authScreen.ppu[data-motion=paused] :is(.ppu-slide,.ppu-reveal,.ppu-button){transition:none} @media(hover:hover) and (pointer:fine){#authScreen.ppu .ppu-button:hover{transform:translateY(-2px);box-shadow:0 4px 0 #d47b242b,0 12px 25px #ff9b2430}} @media(max-width:1100px){#authScreen.ppu .ppu-nav{grid-template-columns:auto 1fr auto;gap:14px}#authScreen.ppu .ppu-slider{--slide-size:82vw}#authScreen.ppu .ppu-slide-copy{padding:22px 24px;gap:8px 24px}#authScreen.ppu .ppu-slide-copy h3{font-size:23px}} @media(max-width:700px){ #authScreen.ppu .ppu-nav{height:74px;padding-inline:16px;gap:10px}#authScreen.ppu .ppu-mobile-nav{top:74px} #authScreen.ppu .ppu-nav-actions{gap:8px}#authScreen.ppu .ppu-nav .ppu-small{font-size:11px;padding:9px 12px;min-height:40px} #authScreen.ppu .ppu-hero h1{font-size:clamp(29px,8.4vw,43px);letter-spacing:-.035em;line-height:1.12} #authScreen.ppu .ppu-hero-copy>p{font-size:14px;line-height:1.65;margin-top:16px;max-width:330px} #authScreen.ppu .ppu-hero-art{top:300px}#authScreen.ppu .ppu-hero-shade{height:calc(300px + 56.25vw)}#authScreen.ppu .ppu-hero-copy{min-height:calc(288px + 56.25vw)} #authScreen.ppu .ppu-gameplay{padding-block:50px 45px}#authScreen.ppu .ppu-gameplay>.ppu-section-head,#authScreen.ppu .ppu-slider-toolbar,#authScreen.ppu .ppu-slider-bottom{width:calc(100% - 40px)} #authScreen.ppu .ppu-section-head h2{font-size:clamp(28px,7.7vw,38px);line-height:1.16}#authScreen.ppu .ppu-section-head>p{font-size:13px} #authScreen.ppu .ppu-slider{--slide-size:86vw;margin-top:24px}#authScreen.ppu .ppu-carousel{gap:12px;padding-block:12px 22px} #authScreen.ppu .ppu-slide{border-radius:18px;transform:scale(.94);filter:blur(.4px)} #authScreen.ppu .ppu-slide-copy{display:block;padding:19px 20px 23px;min-height:205px}#authScreen.ppu .ppu-slide-copy h3{font-size:22px;margin:9px 0 10px}#authScreen.ppu .ppu-slide-copy p{font-size:12px;line-height:1.65} #authScreen.ppu .ppu-game-tabs{gap:7px}#authScreen.ppu .ppu-game-tabs button{padding:8px 11px;min-height:38px;font-size:11px}#authScreen.ppu .ppu-game-tabs button span{display:none} #authScreen.ppu .ppu-park-stats{width:100%;gap:12px;padding:12px;border-radius:17px;justify-content:space-between}#authScreen.ppu .ppu-stat{gap:8px}#authScreen.ppu .ppu-stat+.ppu-stat{padding-left:12px}#authScreen.ppu .ppu-stat small{white-space:normal;font-size:10px;line-height:1.3}#authScreen.ppu .ppu-stat strong{font-size:23px}#authScreen.ppu .ppu-stat-icon{width:40px;height:40px}#authScreen.ppu .ppu-stat-icon img{width:39px;height:39px}#authScreen.ppu .ppu-stat-icon.ppu-trainers-icon{width:43px}#authScreen.ppu .ppu-trainers-icon img{width:28px;height:28px;top:4px}#authScreen.ppu .ppu-trainers-icon img+img{width:27px;height:27px;left:16px;top:10px} #authScreen.ppu .ppu-starter-tabs{gap:7px}#authScreen.ppu .ppu-starter-tabs button{padding:10px 5px;min-height:100px;border-radius:15px}#authScreen.ppu .ppu-starter-tabs b{font-size:11px} #authScreen.ppu .ppu-skills img{width:43px;height:43px}#authScreen.ppu .ppu-skills>div{padding:9px;gap:8px}#authScreen.ppu .ppu-skills b{font-size:12px}#authScreen.ppu .ppu-skills small{font-size:10px} } @media(max-width:370px){#authScreen.ppu .ppu-stat-icon{display:none}#authScreen.ppu .ppu-stat-icon.ppu-trainers-icon{display:none}#authScreen.ppu .ppu-skills{grid-template-columns:1fr}#authScreen.ppu .ppu-hero h1{font-size:28px}#authScreen.ppu .ppu-nav .ppu-small{font-size:10px;padding-inline:9px}} @media(prefers-reduced-motion:reduce){#authScreen.ppu :is(.ppu-slide,.ppu-reveal,.ppu-button){transition:none}#authScreen.ppu .ppu-reveal{opacity:1;transform:none}#authScreen.ppu .ppu-carousel{scroll-behavior:auto}} #authScreen.ppu .ppu-dialog header button{flex:0 0 44px;min-width:44px;min-height:44px} @media(max-width:700px){#authScreen.ppu .ppu-dialog>p{font-size:11px;line-height:1.6}} @media(max-width:370px){#authScreen.ppu .ppu-nav{padding-inline:12px;gap:8px;grid-template-columns:minmax(0,1fr) auto auto}#authScreen.ppu .ppu-nav .pp-brand-wordmark{width:128px;height:44px}#authScreen.ppu .ppu-nav .ppu-small{white-space:nowrap;padding-inline:9px;font-size:10px}} /* Shared game type artwork, including the static first paint. */ /* Type symbols must not inherit the much larger Pokémon thumbnail dimensions. */ #authScreen.ppu .ppu-partner-caption{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:8px 16px;border-radius:30px;background:#ffffffdb;border:1px solid #d7e7e5;color:#36586b;font:600 13px/1.25 ParkText,Arial,sans-serif;z-index:3} #authScreen.ppu [data-starter-type]{display:block;background:none;padding:0;margin:0 0 20px} #authScreen.ppu [data-starter-type] .pokemon-type-list{display:flex;gap:7px;flex-wrap:wrap} #authScreen.ppu [data-starter-type] .pokemon-type-badge{display:inline-flex;align-items:center;gap:5px;border:1px solid color-mix(in srgb,var(--type-color) 22%,white);border-radius:20px;padding:4px 9px;background:color-mix(in srgb,var(--type-color) 7%,white);color:#365365;font:500 12px/1.25 ParkText,Arial,sans-serif;letter-spacing:0} #authScreen.ppu [data-starter-type] .pokemon-type-badge b{font:inherit} #authScreen.ppu [data-starter-type] img.type-icon{display:block;width:15px;height:15px;min-width:15px;max-width:15px;max-height:15px;flex:0 0 15px;object-fit:contain;margin:0;transform:none;filter:none;position:static;animation:none} #authScreen.ppu .ppu-starter-tabs button>img{width:76px;height:76px;object-fit:contain;flex:0 0 76px} #authScreen.ppu .ppu-starter-tabs small .pokemon-type-list{display:flex;gap:6px;flex-wrap:wrap} #authScreen.ppu .ppu-starter-tabs small .pokemon-type-badge{display:inline-flex;align-items:center;gap:3px;padding:0;background:none;border:0;font:500 11px/1.2 ParkText,Arial,sans-serif} #authScreen.ppu .ppu-starter-tabs small .pokemon-type-badge b{font:inherit} #authScreen.ppu .ppu-starter-tabs small img.type-icon{display:block;width:13px;height:13px;min-width:13px;max-width:13px;max-height:13px;flex:0 0 13px;object-fit:contain;margin:0;transform:none;filter:none;position:static;animation:none} @media(max-width:700px){#authScreen.ppu .ppu-starter-tabs button>img{width:60px;height:60px;flex-basis:60px}#authScreen.ppu .ppu-starter-tabs small .pokemon-type-list{justify-content:center;gap:3px}#authScreen.ppu .ppu-starter-tabs small .pokemon-type-badge{font-size:9px;gap:2px}#authScreen.ppu .ppu-partner-caption{font-size:12px}} /* pk-style-source:93 */ /* /desktop-download-v2763.css */ #authScreen.ppu .ppu-nav-download{display:inline-flex;align-items:center;gap:7px;min-height:38px;background:#eff7fc;border:1px solid #c8e2ef;border-radius:11px;padding:8px 12px;color:#245675;font:750 12px/1.2 ParkText,Arial,sans-serif;cursor:pointer;white-space:nowrap} #authScreen.ppu .ppu-nav-download:hover{background:#dff0f9;border-color:#83c8e2} #authScreen.ppu .ppu-nav-download svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #authScreen.ppu .ppu-mobile-nav [data-download-open]{width:100%;text-align:left;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:10px 0} #authScreen.ppu .ppu-download-dialog{box-sizing:border-box;width:min(760px,calc(100vw - 28px));max-height:min(800px,calc(100dvh - 32px));padding:0;border:1px solid #c7dfeb;border-radius:25px;background:#f5fbff;color:#21465f;box-shadow:0 25px 85px #052c4770;overflow:auto} #authScreen.ppu .ppu-download-dialog::backdrop{background:#062636b8;backdrop-filter:blur(5px)} #authScreen.ppu .ppu-download-dialog *{box-sizing:border-box} #authScreen.ppu .ppu-download-dialog-head{position:relative;display:flex;align-items:center;gap:17px;padding:26px 58px 20px 28px;background:linear-gradient(110deg,#e1f5fc,#f9fcff)} #authScreen.ppu .ppu-download-dialog-head img{width:61px;height:61px;object-fit:contain;flex:none} #authScreen.ppu .ppu-download-dialog-head small{display:block;color:#2085a6;font:800 10px/1.2 ParkText,Arial,sans-serif;letter-spacing:.12em} #authScreen.ppu .ppu-download-dialog-head h2{margin:5px 0 0;color:#173e59;font:400 clamp(27px,4vw,37px)/1.05 ParkDisplay,Arial,sans-serif} #authScreen.ppu .ppu-download-dialog-close{position:absolute;right:20px;top:22px;width:34px;height:34px;border:1px solid #d2e6f1;border-radius:10px;background:#fff;color:#34617a;font:500 23px/1 Arial,sans-serif;cursor:pointer} #authScreen.ppu .ppu-download-dialog-close:hover{background:#e7f5fb} #authScreen.ppu .ppu-download-dialog-intro{margin:0;padding:0 28px 21px;color:#617e90;font:500 13px/1.55 ParkText,Arial,sans-serif;background:#f9fcff} #authScreen.ppu .ppu-download-dialog-grid{display:grid;grid-template-columns:1.14fr 1fr 1fr;gap:12px;padding:24px 28px 18px} #authScreen.ppu .ppu-download-platform{min-width:0;min-height:245px;display:flex;flex-direction:column;padding:19px;border:1px solid #d8eaf3;border-radius:18px;background:#fff} #authScreen.ppu .ppu-download-platform--ready{border-color:#40a7c9;background:linear-gradient(145deg,#0a5978,#0e7796);color:#fff} #authScreen.ppu .ppu-download-platform-mark{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;background:#e4f4fa;color:#1679a2} #authScreen.ppu .ppu-download-platform-mark svg{width:22px;height:22px;fill:currentColor} #authScreen.ppu .ppu-download-platform--ready .ppu-download-platform-mark{background:#ffffff2b;color:#fff} #authScreen.ppu .ppu-download-platform small{display:block;margin-top:15px;color:#2685aa;font:800 10px/1.2 ParkText,Arial,sans-serif;letter-spacing:.08em} #authScreen.ppu .ppu-download-platform--ready small{color:#b8f0ee} #authScreen.ppu .ppu-download-platform h3{margin:5px 0 8px;color:#21485f;font:400 24px/1.15 ParkDisplay,Arial,sans-serif} #authScreen.ppu .ppu-download-platform--ready h3{color:#fff} #authScreen.ppu .ppu-download-platform p{margin:0;color:#698594;font:500 12px/1.52 ParkText,Arial,sans-serif} #authScreen.ppu .ppu-download-platform--ready p{color:#d8f2f3} #authScreen.ppu .ppu-download-platform a,#authScreen.ppu .ppu-download-platform .ppu-download-soon{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-top:auto;padding:9px 11px;border-radius:10px;font:800 11px/1.25 ParkText,Arial,sans-serif;text-decoration:none;text-align:center} #authScreen.ppu .ppu-download-platform a{background:#ffda78;color:#23475d;cursor:pointer} #authScreen.ppu .ppu-download-platform a:hover{background:#ffe69d} #authScreen.ppu .ppu-download-platform .ppu-download-soon{background:#eef5f8;color:#678291} #authScreen.ppu .ppu-download-dialog-foot{margin:0 28px 26px;padding:14px 16px;border-radius:12px;background:#e9f5fa;color:#59798c;font:500 11px/1.55 ParkText,Arial,sans-serif} #authScreen.ppu .ppu-download-dialog-foot strong{color:#245b78} #authScreen.ppu .ppu-download-dialog button:focus-visible,#authScreen.ppu .ppu-download-dialog a:focus-visible,#authScreen.ppu [data-download-open]:focus-visible{outline:3px solid #ffc955;outline-offset:3px} @media(max-width:850px){#authScreen.ppu .ppu-nav-download{display:none}} @media(max-width:640px){#authScreen.ppu .ppu-download-dialog{max-height:calc(100dvh - 20px);border-radius:18px}#authScreen.ppu .ppu-download-dialog-head{padding:21px 52px 16px 19px;gap:11px}#authScreen.ppu .ppu-download-dialog-head img{width:49px;height:49px}#authScreen.ppu .ppu-download-dialog-close{right:12px;top:15px}#authScreen.ppu .ppu-download-dialog-intro{padding:0 19px 16px;font-size:12px}#authScreen.ppu .ppu-download-dialog-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px 19px;gap:9px}#authScreen.ppu .ppu-download-platform{min-height:190px;padding:13px}#authScreen.ppu .ppu-download-platform--ready{grid-column:1/-1;min-height:176px}#authScreen.ppu .ppu-download-platform h3{font-size:20px}#authScreen.ppu .ppu-download-dialog-foot{margin:0 19px 20px}} @media(max-width:390px){#authScreen.ppu .ppu-download-dialog-grid{grid-template-columns:1fr}#authScreen.ppu .ppu-download-platform--ready{grid-column:auto}#authScreen.ppu .ppu-download-platform{min-height:150px}} #authScreen.ppu .ppu-download-facts{display:flex;flex-wrap:wrap;gap:8px 17px;margin:0 28px 12px;padding:12px 16px;border:1px solid #d2e6f0;border-radius:12px;background:#fff;color:#567489;font:500 11px/1.5 ParkText,Arial,sans-serif} #authScreen.ppu .ppu-download-facts b{color:#234d68;margin-right:4px} #authScreen.ppu .ppu-download-facts a{color:#087ca6;text-decoration:underline;text-underline-offset:2px} @media(max-width:640px){#authScreen.ppu .ppu-download-facts{margin:0 19px 12px;display:grid;gap:6px}} /* pk-style-source:94 */ /* /css/world-transitions.css */ .transition-setting{display:grid;gap:12px;padding:16px;margin-bottom:16px;border:1px solid #cae3e9;border-radius:16px;background:#f2fafc;color:#254b60} .transition-setting span{display:grid;gap:7px}.transition-setting small{font-size:13px;line-height:1.5;color:#678797} .transition-setting select{width:100%;min-width:0;min-height:46px;padding:10px 12px;border:1px solid #b5d8e2;border-radius:12px;background:white;color:#234e61;font:inherit} .transition-setting select:focus-visible{outline:3px solid #79cee1;outline-offset:2px} /* /settings-v2915.css: deferred, original cascade position */ @media all{:root[data-pk-style-slot="owner-95"]{}} /* pk-style-source:96 */ /* /chat-groups-v2933.css */ /* Group additions share the established messenger layer and header picker. */ @layer chat-trainers { html .game-screen #chatPanel.chat-panel.chat-messenger > .chat-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 2px !important; overflow: hidden !important; } html .game-screen #chatPanel.chat-panel.chat-messenger > .chat-tabs > button { min-width: 0 !important; max-width: 100% !important; gap: 4px !important; padding-inline: 3px !important; font-size: clamp(9px, .75vw, 11px) !important; white-space: nowrap !important; } html .game-screen #chatPanel.chat-panel.chat-messenger > .chat-tabs > button > span:last-of-type { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; } html .game-screen #chatPanel #chatMinimizedBadge[hidden], html .game-screen #chatPanel #chatLauncherBadge[hidden] { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger > .chat-tabs > button.channel-groups.is-active { color: #116b92 !important; background: color-mix(in srgb, #78c8e3 17%, var(--chat75-card)) !important; } html .game-screen #chatPanel .chat-group-head[hidden], html .game-screen #chatPanel .chat-private-head[hidden], html .game-screen #chatPanel .chat-group-dialog:not([open]) { display: none !important; } html .game-screen #chatPanel .chat-group-head { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; min-height: 48px !important; padding: 6px 12px !important; border-bottom: 1px solid var(--chat75-line) !important; background: var(--chat75-card) !important; } html .game-screen #chatPanel .chat-group-head > span { display: grid !important; min-width: 0 !important; flex: 1 !important; } html .game-screen #chatPanel .chat-group-head b, html .game-screen #chatPanel .chat-group-head small { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html .game-screen #chatPanel .chat-group-head b { color: var(--chat75-ink) !important; font-size: 13px !important; } html .game-screen #chatPanel .chat-group-head small { color: var(--chat75-muted) !important; font-size: 10px !important; } html .game-screen #chatPanel .chat-group-head button, html .game-screen #chatPanel [data-chat-group-create-from-private] { flex: none !important; padding: 6px 8px !important; border: 1px solid var(--chat75-line) !important; border-radius: 10px !important; background: var(--chat75-soft) !important; color: var(--chat75-accent-strong) !important; font: inherit !important; font-size: 10px !important; font-weight: 750 !important; cursor: pointer !important; } html .game-screen #chatPanel .chat-group-head button:first-child { font-size: 18px !important; line-height: 1 !important; } html .game-screen #chatPanel .chat-group-directory { display: grid !important; align-content: start !important; gap: 12px !important; color: var(--chat75-ink) !important; } html .game-screen #chatPanel .chat-group-directory > header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } html .game-screen #chatPanel .chat-group-directory > header > span { display: grid !important; gap: 2px !important; } html .game-screen #chatPanel .chat-group-directory > header small { color: var(--chat75-muted) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .11em !important; } html .game-screen #chatPanel .chat-group-directory > header b { font-size: 17px !important; } html .game-screen #chatPanel .chat-group-directory button { cursor: pointer !important; } html .game-screen #chatPanel .chat-group-directory > header button, html .game-screen #chatPanel .chat-group-invite button:first-child { border: 0 !important; border-radius: 10px !important; padding: 9px 12px !important; background: #168fda !important; color: #fff !important; font-size: 11px !important; font-weight: 800 !important; } html .game-screen #chatPanel .chat-group-list, html .game-screen #chatPanel .chat-group-invitations { display: grid !important; gap: 7px !important; } html .game-screen #chatPanel .chat-group-invitations h3 { margin: 0 !important; font-size: 12px !important; } html .game-screen #chatPanel .chat-group-invitations h3 i { font-style: normal !important; color: var(--chat75-accent) !important; } html .game-screen #chatPanel .chat-group-card, html .game-screen #chatPanel .chat-group-invite { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; width: 100% !important; padding: 10px !important; border: 1px solid var(--chat75-line) !important; border-radius: 13px !important; background: var(--chat75-card) !important; color: var(--chat75-ink) !important; text-align: left !important; } html .game-screen #chatPanel .chat-group-card:hover { border-color: var(--chat75-accent) !important; background: var(--chat75-hover) !important; } html .game-screen #chatPanel .chat-group-card > span:nth-child(2), html .game-screen #chatPanel .chat-group-invite > span:nth-child(2) { display: grid !important; gap: 3px !important; flex: 1 !important; min-width: 0 !important; } html .game-screen #chatPanel .chat-group-card b, html .game-screen #chatPanel .chat-group-invite b { font-size: 12px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html .game-screen #chatPanel .chat-group-card small, html .game-screen #chatPanel .chat-group-invite small { font-size: 10px !important; color: var(--chat75-muted) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html .game-screen #chatPanel .chat-group-symbol { display: grid !important; place-items: center !important; flex: none !important; width: 38px !important; height: 38px !important; border-radius: 12px !important; background: var(--chat75-soft) !important; color: var(--chat75-accent) !important; } html .game-screen #chatPanel .chat-group-symbol svg { width: 21px !important; height: 21px !important; } html .game-screen #chatPanel .chat-group-card em { display: grid !important; place-items: center !important; min-width: 20px !important; height: 20px !important; border-radius: 10px !important; background: var(--chat75-accent) !important; color: #fff !important; font-size: 10px !important; font-style: normal !important; } html .game-screen #chatPanel .chat-group-invite { flex-wrap: wrap !important; } html .game-screen #chatPanel .chat-group-invite > div { display: flex !important; gap: 6px !important; width: 100% !important; justify-content: end !important; } html .game-screen #chatPanel .chat-group-invite button:last-child { border: 1px solid var(--chat75-line) !important; border-radius: 10px !important; padding: 8px 10px !important; background: var(--chat75-soft) !important; color: var(--chat75-copy) !important; font-size: 11px !important; } html .game-screen #chatPanel .chat-group-help { margin: 2px !important; color: var(--chat75-muted) !important; font-size: 10px !important; line-height: 1.4 !important; } html .game-screen #chatPanel .chat-group-dialog { width: min(420px, calc(100vw - 24px)) !important; max-width: none !important; padding: 0 !important; border: 1px solid var(--chat75-line) !important; border-radius: 20px !important; background: var(--chat75-card) !important; color: var(--chat75-ink) !important; box-shadow: 0 25px 70px #072b3f66 !important; } html .game-screen #chatPanel .chat-group-dialog::backdrop { background: #0926348a !important; } html .game-screen #chatPanel .chat-group-dialog form { display: grid !important; gap: 14px !important; padding: 18px !important; } html .game-screen #chatPanel .chat-group-dialog header, html .game-screen #chatPanel .chat-group-dialog footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } html .game-screen #chatPanel .chat-group-dialog header b { font-size: 18px !important; } html .game-screen #chatPanel .chat-group-dialog header button { border: 0 !important; background: transparent !important; color: var(--chat75-copy) !important; font-size: 23px !important; } html .game-screen #chatPanel .chat-group-dialog label { display: grid !important; gap: 5px !important; font-size: 11px !important; font-weight: 750 !important; } html .game-screen #chatPanel .chat-group-dialog label[hidden] { display: none !important; } html .game-screen #chatPanel .chat-group-dialog input, html .game-screen #chatPanel .chat-group-dialog select { width: 100% !important; min-height: 42px !important; padding: 8px 10px !important; border: 1px solid var(--chat75-line) !important; border-radius: 10px !important; background: var(--chat75-soft) !important; color: var(--chat75-ink) !important; font: inherit !important; } html .game-screen #chatPanel .chat-group-dialog p { margin: 0 !important; color: var(--chat75-muted) !important; font-size: 11px !important; line-height: 1.4 !important; } html .game-screen #chatPanel .chat-group-dialog footer button { padding: 9px 14px !important; border: 1px solid var(--chat75-line) !important; border-radius: 10px !important; background: var(--chat75-soft) !important; color: var(--chat75-ink) !important; font-size: 12px !important; font-weight: 750 !important; } html .game-screen #chatPanel .chat-group-dialog footer button[type="submit"] { border-color: #168fda !important; background: #168fda !important; color: #fff !important; } @media (max-width: 760px) { html .game-screen #chatPanel.chat-panel.chat-messenger > .chat-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 2px !important; padding: 3px 5px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger > .chat-tabs > button { min-height: 31px !important; font-size: 11px !important; padding-inline: 6px !important; } html .game-screen #chatPanel .chat-group-head { padding-inline: 7px !important; gap: 4px !important; } html .game-screen #chatPanel .chat-group-head button { padding: 6px !important; font-size: 9px !important; } } /* Explicit tracks prevent optional group/private headers from creating columns. */ html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision], html .game-screen #chatPanel .chat-conversation { grid-template-columns: minmax(0,1fr) !important; } html .game-screen #chatPanel :is(.chat-private-head,.chat-group-head,.chat-log-wrap,.chat-reply-preview,#chatForm) { grid-column: 1 !important; } html .game-screen #chatPanel .chat-group-head { grid-row: 1 !important; flex-wrap: wrap !important; } html .game-screen #chatPanel .chat-group-head > span { flex-basis: 90px !important; } html .game-screen #chatPanel .chat-group-head button { min-height: 44px !important; font-size: 12px !important; } html .game-screen #chatPanel .chat-group-head button:first-child { min-width: 44px !important; } html .game-screen #chatPanel .chat-group-head button[hidden] { display: none !important; } html .game-screen #chatPanel .chat-group-directory { min-width: 0 !important; } html .game-screen #chatPanel .chat-group-directory > header { flex-wrap: wrap !important; } html .game-screen #chatPanel :is(.chat-group-directory,.chat-group-dialog) button { min-height: 44px !important; } html .game-screen #chatPanel .chat-group-dialog { max-height: calc(100dvh - 24px) !important; overflow: auto !important; } html .game-screen #chatPanel .chat-group-dialog header button { width: 44px !important; flex: none !important; } html .game-screen #chatPanel .chat-group-dialog :is(input,select) { min-width: 0 !important; font-size: 16px !important; } html .game-screen #chatPanel .chat-private-head { grid-template-columns: auto 42px minmax(0,1fr) auto auto auto !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-channel-menu-open .chat-head .chat-tabs { max-height: calc(100dvh - 72px) !important; overflow-y: auto !important; overscroll-behavior: contain !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-channel-menu-open .chat-head #chatChannelTabs > button { min-height: 44px !important; } @container trainer-chat (max-width: 440px) { html .game-screen #chatPanel .chat-private-head { grid-template-columns: auto 36px minmax(0,1fr) auto !important; } html .game-screen #chatPanel .chat-private-head [data-chat-group-create-from-private] { grid-row: 2 !important; grid-column: 3 / -1 !important; width: auto !important; min-height: 44px !important; } html .game-screen #chatPanel .chat-private-head :is([data-chat-private-pin],[data-chat-private-profile]) { grid-row: 2 !important; } html .game-screen #chatPanel .chat-private-head [data-chat-private-pin] { grid-column: 1 !important; } html .game-screen #chatPanel .chat-private-head [data-chat-private-profile] { grid-column: 2 !important; } } } @layer ui-theme { @media (max-width:760px), (pointer:coarse) and (max-height:560px) { /* Generic HUD sizing must not shrink the full-screen messenger. */ html #gameScreen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger.is-open:not(.is-minimized) { position: fixed !important; left: var(--pk-mobile-vv-offset-left,0px) !important; top: var(--pk-mobile-vv-offset-top,0px) !important; right: auto !important; bottom: auto !important; width: var(--pk-mobile-vv-width,100vw) !important; height: var(--pk-mobile-vv-height,100dvh) !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; transform: none !important; border-radius: 0 !important; border: 0 !important; } html .game-screen.is-chat-fullscreen #testerLauncher { visibility: hidden !important; pointer-events: none !important; } } } /* pk-style-source:97 */ /* /marketplace-polish.css */ /* Market window over the world. Theme-layer rules beat the shared modal paper fill. */ @layer ui-theme { html[data-game-theme] #app #marketplaceModal { background:transparent!important; background-image:none!important; box-shadow:none!important; --win-paper:var(--ui-paper)!important; --win-card:var(--ui-card)!important; --win-soft:var(--ui-soft)!important; --win-ink:var(--ui-ink)!important; --win-muted:var(--ui-muted)!important; --win-line:var(--ui-line)!important; --win-accent:var(--ui-accent)!important; --win-tint:var(--ui-tint)!important; position:fixed!important; inset:0!important; padding:20px!important; align-items:center!important; justify-content:center!important; font-family:inherit!important; color:var(--ui-ink)!important; } html[data-game-theme] #app #marketplaceModal:not(.is-open) { display:none!important; } html[data-game-theme] #app #marketplaceModal.is-open { display:flex!important; } html[data-game-theme] #app #marketplaceModal .marketplace-modal__backdrop { background:rgba(20,45,62,.10)!important; backdrop-filter:none!important; position:absolute!important; inset:0!important; } html[data-game-theme] #app #marketplaceModal .marketplace-shell { position:relative!important; inset:auto!important; transform:none!important; width:min(1140px,100%)!important; height:min(820px,calc(100dvh - 40px))!important; max-height:calc(100dvh - 40px)!important; min-width:0!important; min-height:0!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; background:var(--ui-paper)!important; color:var(--ui-ink)!important; border:1px solid var(--ui-line)!important; border-radius:22px!important; box-shadow:0 18px 60px rgba(15,44,62,.22)!important; } html[data-game-theme] #app #marketplaceModal :is(button,input,select,summary) { font-family:inherit!important; font-size:13px!important; line-height:1.35!important; letter-spacing:normal!important; text-transform:none!important; } html[data-game-theme] #app #marketplaceModal button { min-height:44px!important; padding:8px 12px!important; border-radius:10px!important; border:1px solid var(--ui-line)!important; background:var(--ui-card)!important; color:var(--ui-ink)!important; cursor:pointer!important; box-shadow:none!important; } html[data-game-theme] #app #marketplaceModal button:hover:not(:disabled) { background:var(--ui-soft)!important; } html[data-game-theme] #app #marketplaceModal button.is-active { background:var(--ui-tint)!important; color:var(--ui-accent)!important; border-color:var(--ui-accent)!important; } html[data-game-theme] #app #marketplaceModal :is(button,input,select,summary,[data-market-point]):focus-visible { outline:2px solid var(--ui-accent)!important; outline-offset:3px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-shell button:disabled { opacity:1!important; background:var(--ui-soft)!important; color:var(--ui-muted)!important; border-color:var(--ui-line)!important; cursor:not-allowed!important; } html[data-game-theme] #app #marketplaceModal .marketplace-head { padding:18px 22px!important; gap:16px!important; display:flex!important; align-items:center!important; background:var(--ui-paper)!important; border-bottom:1px solid var(--ui-line)!important; } html[data-game-theme] #app #marketplaceModal .marketplace-head>span { flex:1!important; min-width:0!important; } html[data-game-theme] #app #marketplaceModal .marketplace-head h2 { margin:3px 0 0!important; font-size:25px!important; line-height:1.2!important; color:var(--ui-ink)!important; } html[data-game-theme] #app #marketplaceModal .marketplace-head small { font-size:10px!important; color:var(--ui-muted)!important; } html[data-game-theme] #app #marketplaceModal .marketplace-head>button { flex:0 0 44px!important; width:44px!important; height:44px!important; font-size:24px!important; padding:0!important; } html[data-game-theme] #app #marketplaceModal .marketplace-head-stats { display:flex!important; gap:18px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-head-stats span { display:grid!important; gap:3px!important; font-size:11px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-head-stats b { font-size:14px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-tabs { display:flex!important; padding:10px 22px!important; gap:8px!important; background:var(--ui-paper)!important; } html[data-game-theme] #app #marketplaceModal .marketplace-tabs button { min-width:100px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-body { flex:1!important; min-height:0!important; min-width:0!important; overflow:auto!important; overflow-x:hidden!important; padding:18px 22px 24px!important; background:var(--ui-paper)!important; overscroll-behavior:contain!important; scrollbar-gutter:stable!important; font-size:13px!important; } html[data-game-theme] #app #marketplaceModal :is(p,small,label) { color:var(--ui-muted)!important; } html[data-game-theme] #app #marketplaceModal :is(h3,b,strong) { color:var(--ui-ink)!important; } html[data-game-theme] #app #marketplaceModal :is(.market-browse-switch,.market-search-row,.market-selected-product,.market-lot-summary) { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; } html[data-game-theme] #app #marketplaceModal .market-browse-switch { margin-bottom:12px!important; } html[data-game-theme] #app #marketplaceModal .market-browse-switch>div { display:flex!important; gap:6px!important; } html[data-game-theme] #app #marketplaceModal .market-category-chips { display:flex!important; flex-wrap:wrap!important; gap:6px!important; margin:10px 0!important; } html[data-game-theme] #app #marketplaceModal .market-category-chips button { display:flex!important; align-items:center!important; gap:7px!important; } html[data-game-theme] #app #marketplaceModal :is(.market-category-chips,.market-sell-categories,.market-product__image,.market-sell-asset) svg { width:22px!important; height:22px!important; flex-shrink:0!important; } html[data-game-theme] #app #marketplaceModal .marketplace-toolbar { display:block!important; margin:12px 0 16px!important; padding:0!important; background:transparent!important; border:0!important; } html[data-game-theme] #app #marketplaceModal .market-search-row>input { flex:1!important; width:0!important; min-width:0!important; } html[data-game-theme] #app #marketplaceModal .market-search-row>select { width:210px!important; min-width:0!important; } html[data-game-theme] #app #marketplaceModal :is(input:not([type=range]):not([type=checkbox]),select) { min-height:42px!important; padding:9px 11px!important; border-radius:10px!important; background:var(--ui-card)!important; color:var(--ui-ink)!important; border:1px solid var(--ui-line)!important; box-sizing:border-box!important; max-width:100%!important; } html[data-game-theme] #app #marketplaceModal .market-filters { margin-top:10px!important; border:1px solid var(--ui-line)!important; border-radius:12px!important; padding:0 12px!important; } html[data-game-theme] #app #marketplaceModal .market-filters summary { padding:12px 0!important; cursor:pointer!important; } html[data-game-theme] #app #marketplaceModal .market-filters summary small { margin-left:8px!important; } html[data-game-theme] #app #marketplaceModal .market-filters>div { display:flex!important; flex-wrap:wrap!important; align-items:end!important; gap:12px!important; padding-bottom:12px!important; } html[data-game-theme] #app #marketplaceModal .market-filters label:not(.market-check) { display:grid!important; gap:5px!important; width:132px!important; } html[data-game-theme] #app #marketplaceModal .market-check { display:flex!important; gap:7px!important; align-items:center!important; min-height:42px!important; } html[data-game-theme] #app #marketplaceModal .market-check input { width:18px!important; height:18px!important; accent-color:var(--ui-accent)!important; } html[data-game-theme] #app #marketplaceModal .marketplace-grid { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:12px!important; } html[data-game-theme] #app #marketplaceModal .market-card { display:grid!important; grid-template-columns:72px minmax(0,1fr)!important; min-width:0!important; padding:12px!important; gap:12px!important; background:var(--ui-card)!important; border:1px solid var(--ui-line)!important; border-radius:14px!important; box-shadow:none!important; } html[data-game-theme] #app #marketplaceModal .market-card__visual { width:72px!important; height:88px!important; min-height:0!important; background:var(--ui-soft)!important; border-radius:12px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; padding:6px!important; box-sizing:border-box!important; } html[data-game-theme] #app #marketplaceModal .market-card__visual img { width:56px!important; height:56px!important; object-fit:contain!important; } html[data-game-theme] #app #marketplaceModal .market-card__visual small { font-size:9px!important; position:static!important; } html[data-game-theme] #app #marketplaceModal .market-card__body { padding:0!important; min-width:0!important; } html[data-game-theme] #app #marketplaceModal .market-card { height:auto!important; min-height:0!important; grid-template-rows:auto!important; overflow:visible!important; } html[data-game-theme] #app #marketplaceModal .market-card__body { display:block!important; height:auto!important; min-height:0!important; } html[data-game-theme] #app #marketplaceModal .market-card__visual small { padding:0!important; background:transparent!important; box-shadow:none!important; border:0!important; border-radius:0!important; } html[data-game-theme] #app #marketplaceModal .market-card h3 { font-size:15px!important; margin:0!important; line-height:1.35!important; overflow-wrap:anywhere!important; } html[data-game-theme] #app #marketplaceModal .market-card p { margin:4px 0 8px!important; font-size:11px!important; min-height:0!important; line-height:1.45!important; } html[data-game-theme] #app #marketplaceModal .market-card__meta { font-size:11px!important; display:flex!important; justify-content:space-between!important; flex-wrap:wrap!important; gap:4px!important; } html[data-game-theme] #app #marketplaceModal .market-card__price { margin:10px 0!important; display:grid!important; gap:3px!important; } html[data-game-theme] #app #marketplaceModal .market-card__price strong { font-size:17px!important; } html[data-game-theme] #app #marketplaceModal .market-card__price small { font-size:11px!important; } html[data-game-theme] #app #marketplaceModal .market-card__price small { width:auto!important; max-width:none!important; height:auto!important; text-align:left!important; } html[data-game-theme] #app #marketplaceModal .market-card__quantity { display:flex!important; align-items:center!important; justify-content:space-between!important; font-size:11px!important; gap:6px!important; margin:8px 0!important; } html[data-game-theme] #app #marketplaceModal .market-card__quantity { flex-direction:row!important; width:auto!important; } html[data-game-theme] #app #marketplaceModal .market-card__quantity input { width:78px!important; } html[data-game-theme] #app #marketplaceModal .market-card__actions { display:flex!important; flex-wrap:wrap!important; gap:6px!important; } html[data-game-theme] #app #marketplaceModal :is(.market-card__actions button:not(.is-secondary),.marketplace-sell-form button[type=submit]):not(:disabled) { background:var(--ui-primary)!important; color:var(--ui-on-accent)!important; border-color:var(--ui-primary)!important; } html[data-game-theme] #app #marketplaceModal :is(.market-card__actions button:not(.is-secondary),.marketplace-sell-form button[type=submit]):hover:not(:disabled) { background:var(--ui-primary-hover)!important; border-color:var(--ui-primary-hover)!important; color:var(--ui-on-accent)!important; } html[data-game-theme] #app #marketplaceModal button:disabled :is(b,strong,small,span) { color:inherit!important; } html[data-game-theme] #app #marketplaceModal .market-card__actions button.is-secondary { background:var(--ui-soft)!important; color:var(--ui-ink)!important; } html[data-game-theme] #app #marketplaceModal .market-empty { grid-column:1/-1!important; padding:30px 18px!important; text-align:center!important; background:var(--ui-card)!important; border:1px dashed var(--ui-line)!important; border-radius:14px!important; } html[data-game-theme] #app #marketplaceModal .market-pagination { display:flex!important; align-items:center!important; justify-content:center!important; gap:12px!important; margin:16px 0!important; font-size:12px!important; } html[data-game-theme] #app #marketplaceModal .market-pagination span { text-align:center!important; } html[data-game-theme] #app #marketplaceModal .market-product-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } html[data-game-theme] #app #marketplaceModal button.market-product { display:grid!important; grid-template-columns:48px minmax(0,1fr) auto!important; text-align:left!important; gap:12px!important; align-items:center!important; padding:14px!important; min-width:0!important; } html[data-game-theme] #app #marketplaceModal .market-product span:not(.market-product__image) { display:grid!important; gap:5px!important; min-width:0!important; } html[data-game-theme] #app #marketplaceModal .market-product span:last-child { text-align:right!important; } html[data-game-theme] #app #marketplaceModal .market-product b { overflow-wrap:anywhere!important; font-size:14px!important; } html[data-game-theme] #app #marketplaceModal .market-product small { font-size:11px!important; } html[data-game-theme] #app #marketplaceModal .market-product__image img { width:44px!important; height:44px!important; object-fit:contain!important; } html[data-game-theme] #app #marketplaceModal :is(.market-catalog-note,.market-history-note,.market-fee-note) { font-size:12px!important; line-height:1.55!important; margin:12px 0!important; } html[data-game-theme] #app #marketplaceModal .market-selected-product { padding:10px 12px!important; margin-bottom:14px!important; border-radius:12px!important; background:var(--ui-tint)!important; } html[data-game-theme] #app #marketplaceModal .market-lot-summary { flex-wrap:wrap!important; padding:12px 14px!important; border:1px solid var(--ui-line)!important; background:var(--ui-soft)!important; border-radius:12px!important; margin-bottom:14px!important; } html[data-game-theme] #app #marketplaceModal .market-lot-summary small { font-size:11px!important; } html[data-game-theme] #app #marketplaceModal .market-sell-categories { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:8px!important; margin-bottom:14px!important; } html[data-game-theme] #app #marketplaceModal .market-sell-categories button { display:flex!important; align-items:center!important; gap:10px!important; min-width:0!important; text-align:left!important; } html[data-game-theme] #app #marketplaceModal .market-sell-categories span { display:grid!important; gap:3px!important; } html[data-game-theme] #app #marketplaceModal .market-sell-categories small { font-size:11px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-sell-layout { display:grid!important; grid-template-columns:260px minmax(0,1fr)!important; align-items:start!important; gap:18px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-sell-assets { display:grid!important; align-content:start!important; gap:8px!important; padding:0!important; max-height:600px!important; overflow:auto!important; } html[data-game-theme] #app #marketplaceModal .marketplace-sell-assets { grid-template-columns:1fr!important; } html[data-game-theme] #app #marketplaceModal .market-sell-asset { display:flex!important; align-items:center!important; gap:12px!important; text-align:left!important; padding:12px!important; min-width:0!important; } html[data-game-theme] #app #marketplaceModal .market-sell-asset>span:last-child { min-width:0!important; display:grid!important; gap:5px!important; } html[data-game-theme] #app #marketplaceModal .market-sell-asset>span { width:auto!important; height:auto!important; background:transparent!important; } html[data-game-theme] #app #marketplaceModal .market-sell-asset b { font-size:13px!important; overflow-wrap:anywhere!important; } html[data-game-theme] #app #marketplaceModal .market-sell-asset small { font-size:11px!important; } html[data-game-theme] #app #marketplaceModal .market-sell-asset img { width:40px!important; height:40px!important; object-fit:contain!important; } html[data-game-theme] #app #marketplaceModal .market-sell-details { min-width:0!important; } html[data-game-theme] #app #marketplaceModal .marketplace-sell-form { display:block!important; padding:18px!important; border:1px solid var(--ui-line)!important; background:var(--ui-card)!important; border-radius:14px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-sell-form { position:static!important; top:auto!important; } html[data-game-theme] #app #marketplaceModal .marketplace-sell-form h3 { font-size:22px!important; margin:6px 0 16px!important; } html[data-game-theme] #app #marketplaceModal .market-sell-fields { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px!important; } html[data-game-theme] #app #marketplaceModal .market-sell-fields label { display:grid!important; gap:6px!important; font-size:12px!important; min-width:0!important; } html[data-game-theme] #app #marketplaceModal .market-price-preview { display:grid!important; grid-template-columns:1fr!important; gap:0!important; padding:12px 0!important; margin:12px 0!important; border-block:1px solid var(--ui-line)!important; background:transparent!important; } html[data-game-theme] #app #marketplaceModal .market-price-preview span { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; padding:6px 0!important; font-size:12px!important; } html[data-game-theme] #app #marketplaceModal .market-price-preview span { background:transparent!important; border:0!important; border-radius:0!important; text-align:left!important; } html[data-game-theme] #app #marketplaceModal .market-price-preview span:last-child { font-weight:700!important; padding-top:10px!important; } html[data-game-theme] #app #marketplaceModal .market-price-preview b { font-size:14px!important; display:inline!important; } html[data-game-theme] #app #marketplaceModal .market-sell-warning { color:var(--ui-danger,#ac3441)!important; } html[data-game-theme] #app #marketplaceModal .market-history { margin:20px 0 0!important; padding:18px!important; border:1px solid var(--ui-line)!important; background:var(--ui-card)!important; border-radius:14px!important; scroll-margin-top:16px!important; } html[data-game-theme] #app #marketplaceModal .market-history>header { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; margin-bottom:14px!important; } html[data-game-theme] #app #marketplaceModal .market-history>header { background:transparent!important; padding:0!important; border:0!important; } html[data-game-theme] #app #marketplaceModal .market-history>header>span { display:grid!important; gap:4px!important; } html[data-game-theme] #app #marketplaceModal .market-history>header b { font-size:18px!important; } html[data-game-theme] #app #marketplaceModal .market-history>header small { font-size:10px!important; } html[data-game-theme] #app #marketplaceModal .market-quote { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:12px!important; padding:12px!important; background:var(--ui-soft)!important; border-radius:10px!important; } html[data-game-theme] #app #marketplaceModal .market-quote span { display:grid!important; align-content:start!important; gap:5px!important; min-width:0!important; } html[data-game-theme] #app #marketplaceModal .market-quote small { font-size:10px!important; line-height:1.4!important; } html[data-game-theme] #app #marketplaceModal .market-quote b { font-size:14px!important; } html[data-game-theme] #app #marketplaceModal .market-history__periods { display:flex!important; flex-wrap:wrap!important; gap:6px!important; margin:14px 0!important; } html[data-game-theme] #app #marketplaceModal .market-history__stats { display:flex!important; flex-wrap:wrap!important; gap:22px!important; padding:0!important; margin:14px 0!important; background:transparent!important; } html[data-game-theme] #app #marketplaceModal .market-history__stats span { display:grid!important; gap:4px!important; } html[data-game-theme] #app #marketplaceModal .market-history__stats b { font-size:15px!important; } html[data-game-theme] #app #marketplaceModal .market-history__stats small { font-size:11px!important; } html[data-game-theme] #app #marketplaceModal .market-price-chart { width:100%!important; height:auto!important; display:block!important; overflow:visible!important; } html[data-game-theme] #app #marketplaceModal .market-price-chart text { font-size:11px!important; fill:var(--ui-muted)!important; } html[data-game-theme] #app #marketplaceModal .market-chart-grid { stroke:var(--ui-line)!important; stroke-dasharray:3 4!important; } html[data-game-theme] #app #marketplaceModal .market-chart-line { stroke:var(--ui-accent)!important; stroke-width:2!important; stroke-linejoin:round!important; } html[data-game-theme] #app #marketplaceModal .market-chart-dot { fill:var(--ui-accent)!important; } html[data-game-theme] #app #marketplaceModal .market-chart-hit { fill:transparent!important; cursor:pointer!important; } html[data-game-theme] #app #marketplaceModal .market-chart-volume { fill:var(--ui-positive,#168561)!important; opacity:.6!important; } html[data-game-theme] #app #marketplaceModal [data-market-point]:is(:hover,:focus) .market-chart-dot { r:5!important; stroke:var(--ui-card)!important; stroke-width:2!important; } html[data-game-theme] #app #marketplaceModal .market-chart-readout { display:block!important; min-height:36px!important; padding:10px 12px!important; font-size:12px!important; line-height:1.5!important; background:var(--ui-soft)!important; border-radius:10px!important; } html[data-game-theme] #app #marketplaceModal .market-chart-legend { display:flex!important; flex-wrap:wrap!important; gap:14px!important; font-size:11px!important; color:var(--ui-muted)!important; margin:10px 0!important; } html[data-game-theme] #app #marketplaceModal .market-history-navigator { border:1px solid var(--ui-line)!important; border-radius:10px!important; padding:10px!important; } html[data-game-theme] #app #marketplaceModal .market-history-navigator svg { width:100%!important; height:32px!important; display:block!important; background:var(--ui-soft)!important; } html[data-game-theme] #app #marketplaceModal .market-history-navigator polyline { stroke:var(--ui-accent)!important; stroke-width:.4!important; } html[data-game-theme] #app #marketplaceModal .market-history-navigator>div { display:grid!important; grid-template-columns:1fr 1fr!important; gap:16px!important; margin-top:6px!important; } html[data-game-theme] #app #marketplaceModal .market-history-navigator label { display:grid!important; font-size:11px!important; } html[data-game-theme] #app #marketplaceModal input[type=range] { width:100%!important; margin:4px 0!important; min-height:32px!important; accent-color:var(--ui-accent)!important; } html[data-game-theme] #app #marketplaceModal .market-history__empty { display:grid!important; gap:8px!important; padding:26px 16px!important; background:var(--ui-soft)!important; border-radius:10px!important; font-size:13px!important; text-align:center!important; line-height:1.5!important; } html[data-game-theme] #app #marketplaceModal .market-history__transactions { margin-top:14px!important; } html[data-game-theme] #app #marketplaceModal .market-history__transactions summary { cursor:pointer!important; padding:10px 0!important; } html[data-game-theme] #app #marketplaceModal .market-history__transactions>div { overflow:auto!important; } html[data-game-theme] #app #marketplaceModal .market-history__transactions table { width:100%!important; border-collapse:collapse!important; font-size:12px!important; } html[data-game-theme] #app #marketplaceModal .market-history__transactions :is(td,th) { text-align:left!important; padding:9px 6px!important; border-bottom:1px solid var(--ui-line)!important; white-space:nowrap!important; } html[data-game-theme] #app #marketplaceModal .market-chart-day { display:flex!important; align-items:center!important; gap:12px!important; flex-wrap:wrap!important; margin:12px 0!important; font-size:12px!important; } html[data-game-theme] #app #marketplaceModal .market-chart-day select { flex:1!important; min-width:0!important; } html[data-game-theme] #app #marketplaceModal .market-plot-mobile-labels { display:none!important; } @media(max-width:960px) { html[data-game-theme] #app #marketplaceModal .marketplace-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; } html[data-game-theme] #app #marketplaceModal .marketplace-sell-layout { grid-template-columns:200px minmax(0,1fr)!important; } } @media(max-width:640px) { html[data-game-theme] #app #marketplaceModal .market-price-chart text { display:none!important; } html[data-game-theme] #app #marketplaceModal .market-plot-mobile-labels { display:grid!important; gap:5px!important; font-size:11px!important; margin:8px 0!important; } html[data-game-theme] #app #marketplaceModal .market-plot-mobile-labels>div { display:flex!important; justify-content:space-between!important; gap:8px!important; } html[data-game-theme] #app #marketplaceModal { padding:calc(6px + env(safe-area-inset-top)) 6px calc(78px + env(safe-area-inset-bottom))!important; } html[data-game-theme] #app #marketplaceModal .marketplace-shell { border-radius:16px!important; height:calc(100dvh - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important; max-height:100%!important; } html[data-game-theme] #app #marketplaceModal .marketplace-head { padding:12px!important; gap:8px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-head h2 { font-size:19px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-head>span>small { display:none!important; } html[data-game-theme] #app #marketplaceModal .marketplace-head-stats { gap:6px!important; flex-direction:column!important; } html[data-game-theme] #app #marketplaceModal .marketplace-head-stats span { display:flex!important; gap:4px!important; font-size:10px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-head-stats b { font-size:11px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-tabs { padding:6px 12px 10px!important; gap:6px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-tabs button { flex:1!important; min-width:0!important; min-height:44px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-body { padding:12px!important; scrollbar-gutter:auto!important; } html[data-game-theme] #app #marketplaceModal button { min-height:44px!important; } html[data-game-theme] #app #marketplaceModal :is(input:not([type=range]):not([type=checkbox]),select) { font-size:16px!important; } html[data-game-theme] #app #marketplaceModal .market-browse-switch { flex-wrap:wrap!important; } html[data-game-theme] #app #marketplaceModal .market-browse-switch>div { flex:1!important; } html[data-game-theme] #app #marketplaceModal .market-browse-switch>div button { flex:1!important; padding:8px!important; } html[data-game-theme] #app #marketplaceModal .market-category-chips { gap:4px!important; } html[data-game-theme] #app #marketplaceModal .market-category-chips button { padding:6px 8px!important; font-size:12px!important; gap:4px!important; } html[data-game-theme] #app #marketplaceModal .market-category-chips svg { width:18px!important; height:18px!important; } html[data-game-theme] #app #marketplaceModal .market-search-row { display:grid!important; grid-template-columns:1fr!important; } html[data-game-theme] #app #marketplaceModal .market-search-row>:is(input,select) { width:100%!important; } html[data-game-theme] #app #marketplaceModal .market-filters summary small { display:none!important; } html[data-game-theme] #app #marketplaceModal .market-filters label:not(.market-check) { width:calc(50% - 6px)!important; } html[data-game-theme] #app #marketplaceModal .marketplace-grid { grid-template-columns:1fr!important; } html[data-game-theme] #app #marketplaceModal .market-card { grid-template-columns:64px minmax(0,1fr)!important; } html[data-game-theme] #app #marketplaceModal .market-card__visual { width:64px!important; height:80px!important; } html[data-game-theme] #app #marketplaceModal .market-card__actions button { flex:1!important; } html[data-game-theme] #app #marketplaceModal .market-product-grid { grid-template-columns:1fr!important; } html[data-game-theme] #app #marketplaceModal button.market-product { grid-template-columns:36px minmax(0,1fr)!important; gap:10px!important; } html[data-game-theme] #app #marketplaceModal .market-product span:last-child { grid-column:2!important; text-align:left!important; display:flex!important; flex-wrap:wrap!important; align-items:center!important; } html[data-game-theme] #app #marketplaceModal .market-product__image img { width:36px!important; height:36px!important; } html[data-game-theme] #app #marketplaceModal .market-sell-categories { grid-template-columns:repeat(2,minmax(0,1fr))!important; } html[data-game-theme] #app #marketplaceModal .marketplace-sell-layout { grid-template-columns:1fr!important; gap:12px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-sell-assets { display:flex!important; overflow:auto!important; max-height:150px!important; padding-bottom:4px!important; } html[data-game-theme] #app #marketplaceModal .market-sell-asset { flex:0 0 200px!important; } html[data-game-theme] #app #marketplaceModal .marketplace-sell-form { padding:14px!important; } html[data-game-theme] #app #marketplaceModal .market-sell-fields { grid-template-columns:1fr 1fr!important; } html[data-game-theme] #app #marketplaceModal .market-sell-fields label:last-child { grid-column:1/-1!important; } html[data-game-theme] #app #marketplaceModal .market-history { padding:12px!important; } html[data-game-theme] #app #marketplaceModal .market-quote { grid-template-columns:repeat(2,minmax(0,1fr))!important; } html[data-game-theme] #app #marketplaceModal .market-history__stats { gap:12px!important; } html[data-game-theme] #app #marketplaceModal .market-history__periods button { flex:1!important; padding:6px!important; font-size:12px!important; } html[data-game-theme] #app #marketplaceModal .market-pagination { gap:6px!important; font-size:11px!important; } html[data-game-theme] #app #marketplaceModal .market-pagination button { padding:6px!important; } } @media(prefers-reduced-motion:reduce) { html[data-game-theme] #app #marketplaceModal * { transition:none!important; animation:none!important; scroll-behavior:auto!important; } } } /* pk-style-source:98 */ /* /quest-guidance-v1.css */ .quest-hint-guide{color:var(--win-ink,#e8f1ed);padding:16px;border-radius:16px;background:var(--win-panel,#213329)} .quest-hint-guide p{line-height:1.55;margin:12px 0}.quest-hint-guide p>img{vertical-align:middle;object-fit:contain} .quest-hint-guide button,.quest-hint-guide a{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;color:inherit} .quest-hint-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px;margin:14px 0} .quest-hint-legend>div{padding:10px;border-radius:12px;background:color-mix(in srgb,currentColor 5%,transparent)} .quest-hint-legend dt{display:flex;align-items:center;gap:9px}.quest-hint-legend dt img{object-fit:contain;flex:none}.quest-hint-legend dd{margin:7px 0 0;font-size:12px;line-height:1.5} .exp-hint-action{display:flex;align-items:center;gap:5px;margin:8px 0;font-size:12px;line-height:1.4}.exp-hint-action img{flex:none;object-fit:contain} html[data-game-theme="light"] .quest-hint-guide{color:#24362d;background:#f4f8f3} @media(max-width:480px){.quest-hint-legend{grid-template-columns:1fr}.quest-hint-guide{padding:12px}} .quest-hint-settings{min-width:0}.quest-hint-settings h3{margin:0;font-size:17px} #app #sidePanel .hint-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0} #app #sidePanel .hint-control{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:12px;font-weight:650;color:var(--set-ink)} #app #sidePanel .hint-control[hidden]{display:none} #app #sidePanel .hint-control>span{display:flex;justify-content:space-between;gap:8px;line-height:1.4} #app #sidePanel .hint-control output{white-space:nowrap;color:var(--set-muted);font-variant-numeric:tabular-nums} #app #sidePanel .hint-control select,#app #sidePanel .hint-control input[type="color"]{width:100%;min-width:0;min-height:44px;border:1px solid var(--set-line);border-radius:9px;background:var(--set-paper);color:var(--set-ink);padding:7px;font:inherit} #app #sidePanel .hint-control input[type="range"]{width:100%;min-width:0;min-height:44px;margin:0;accent-color:var(--set-accent)} #app #sidePanel .hint-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px;line-height:1.45;cursor:pointer} #app #sidePanel .hint-check input{width:20px;height:20px;flex:none;accent-color:var(--set-accent)} #app #sidePanel .hint-presets,#app #sidePanel .hint-settings-footer{display:flex;gap:8px;flex-wrap:wrap} #app #sidePanel .hint-presets button,#app #sidePanel .hint-settings-footer button,#app #sidePanel .hint-settings-footer a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid var(--set-line);border-radius:9px;background:var(--set-paper);color:var(--set-ink);font:650 12px/1.4 system-ui;text-decoration:none} #app #sidePanel .hint-advanced{margin:12px 0;border-block:1px solid var(--set-line)} #app #sidePanel .hint-advanced summary{padding:13px 0;min-height:44px;font-size:13px;cursor:pointer} #app #sidePanel .hint-target-options{display:grid;gap:2px;margin:12px 0} .hint-preview{margin:14px 0;border-radius:12px;overflow:hidden;border:1px solid #8e9c70;background:linear-gradient(100deg,#e8c38a 0%,#edcf9a 48%,#7f9f47 52%,#527e3e 100%);color:#203326} .hint-preview-route{container-type:inline-size;position:relative;height:96px;overflow:hidden}.hint-preview figcaption{background:#ffffffd9;padding:7px 10px;font:600 11px/1.4 system-ui} .hint-preview-marks{position:relative;height:100%;width:100%} .hint-preview-marks>i{position:absolute;display:block;left:calc((.5 + var(--i)) * 100% / var(--hint-count));top:calc(30px + (var(--i) / 6 - .5) * 6px);width:calc(18px * var(--hint-size));height:calc(30px * var(--hint-size));rotate:90deg;filter:drop-shadow(1px 0 #16344d) drop-shadow(-1px 0 #16344d) drop-shadow(0 1px #16344d) drop-shadow(0 -1px #16344d)} .hint-preview[data-animated="true"] .hint-preview-marks>i{left:-40px;animation:hint-preview-travel var(--hint-duration) linear infinite;animation-delay:calc(var(--i) * var(--hint-duration) / var(--hint-count) * -1)} .hint-preview-marks b{display:block;width:100%;height:100%;background:var(--hint-color);mask:url('/assets/action-emoji-v2/foot-left.webp') center / contain no-repeat;opacity:var(--hint-opacity);animation:hint-preview-step var(--hint-duration) linear infinite;animation-delay:calc(var(--i) * var(--hint-duration) / var(--hint-count) * -1)} .hint-preview-marks>i:nth-child(even){margin-top:14px}.hint-preview-marks>i:nth-child(even)>b{mask-image:url('/assets/action-emoji-v2/foot-right.webp')} .hint-preview[data-style="arrows"] .hint-preview-marks>i{top:32px;margin-top:0}.hint-preview[data-style="arrows"] .hint-preview-marks b{mask:none;clip-path:polygon(50% 4%,56% 8%,92% 82%,89% 88%,50% 69%,11% 88%,8% 82%,44% 8%)} .hint-preview[data-contrast="soft"] .hint-preview-marks>i{filter:none} .hint-preview[data-contrast="high"] .hint-preview-marks>i{filter:drop-shadow(1px 0 #16344d) drop-shadow(-1px 0 #16344d) drop-shadow(0 1px #16344d) drop-shadow(0 -1px #16344d) drop-shadow(1px 0 #fff) drop-shadow(-1px 0 #fff) drop-shadow(0 1px #fff) drop-shadow(0 -1px #fff)} .hint-preview-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:none} .hint-preview-line path{fill:none;stroke:var(--hint-color);stroke-width:calc(4px * var(--hint-size));stroke-dasharray:14 12;stroke-linecap:round;opacity:var(--hint-opacity);filter:drop-shadow(0 1px #16344d) drop-shadow(0 -1px #16344d);animation:hint-preview-flow var(--hint-flow-duration) linear infinite} .hint-preview[data-contrast="soft"] .hint-preview-line path{filter:none}.hint-preview[data-contrast="high"] .hint-preview-line path{filter:drop-shadow(0 1px #16344d) drop-shadow(0 -1px #16344d) drop-shadow(0 2px #fff) drop-shadow(0 -2px #fff)} .hint-preview[data-style="line"] .hint-preview-line{display:block}.hint-preview[data-style="line"] .hint-preview-marks,.hint-preview[data-style="off"] .hint-preview-marks{display:none} .hint-preview-off{display:none;text-align:center;padding-top:35px;font:600 13px system-ui;color:#203326}.hint-preview[data-style="off"] .hint-preview-off{display:block} .hint-preview[data-animated="false"] b,.hint-preview[data-animated="false"] path,fieldset:disabled .hint-preview b,fieldset:disabled .hint-preview path{animation:none} @keyframes hint-preview-travel{to{translate:calc(100cqw + 80px) 0}} .hint-preview[data-animated="false"] .hint-preview-marks>i,fieldset:disabled .hint-preview-marks>i{animation:none;left:calc((.5 + var(--i)) * 100% / var(--hint-count))} @keyframes hint-preview-step{0%,100%{opacity:calc(var(--hint-opacity) * .58);transform:scale(.94)}50%{opacity:var(--hint-opacity);transform:scale(1)}} @keyframes hint-preview-flow{to{stroke-dashoffset:-26}} @media(prefers-reduced-motion:reduce){.hint-preview .hint-preview-marks>i{animation:none!important;left:calc((.5 + var(--i)) * 100% / var(--hint-count))}.hint-preview b,.hint-preview path{animation:none!important}} @media(max-width:480px){#app #sidePanel .hint-control-grid{grid-template-columns:1fr;gap:10px}.hint-preview figcaption{font-size:10px}} @media(max-width:760px){#app #sidePanel .settings-workbench .settings-navigation{grid-template-columns:repeat(3,minmax(0,1fr))}} /* pk-style-source:99 */ /* /window-system-v2325.css */ /* Window System v2.32.5 Final composition layer for the live game. Earlier feature styles keep their content rules; this file owns only viewport geometry, stacking and scrolling. */ :root { --window-safe-top:max(8px,env(safe-area-inset-top)); --window-safe-right:max(8px,env(safe-area-inset-right)); --window-safe-bottom:max(8px,env(safe-area-inset-bottom)); --window-safe-left:max(8px,env(safe-area-inset-left)); --window-layer-panel:300; --window-layer-dialog:420; --window-layer-critical:520; --window-ink:#173c56; --window-muted:#648095; --window-line:#cfe2eb; --window-card:#f9fdff; --window-shadow:0 22px 60px rgba(8,42,61,.24); } /* One predictable layer order. A raised window always stays below a true dialog. */ .game-screen :is(#sidePanel,#chatPanel,#editorPanel).is-open { z-index:var(--window-layer-panel)!important; isolation:isolate; } .game-screen :is(#marketplaceModal,#inventoryItemDialog,#tradeDialog,#worldChannelConfirm,#dialogueDialog,#starterDialog,#professorTransferDialog,#labGames,#pvpInvite,#socialInvite)[aria-hidden="false"] { z-index:var(--window-layer-dialog)!important; } .game-screen :is(#battleSurrenderConfirm,#activityRecoveryDialog)[aria-hidden="false"] { z-index:var(--window-layer-critical)!important; } /* The movable desktop windows have a single scroll owner. Individual feature panels that render virtual grids retain their own internal scroll container. */ @media (min-width:761px) { .game-screen #sidePanel.side-panel.is-open:not(.is-inventory-panel) { overflow:hidden!important; box-shadow:var(--window-shadow); } .game-screen #sidePanel.side-panel.is-open:not(.is-inventory-panel) #sidePanelContent { min-height:0; overscroll-behavior:contain; } .game-screen #sidePanel.side-panel.is-open:is(.is-team-panel,.is-center-panel,.is-pokemon-detail-panel,.is-quest-panel,.is-settings-panel,.is-mechanics-panel,.is-progression-panel,.is-factions-panel,.is-genetics-lab-panel) #sidePanelContent { height:100%; overflow:auto!important; scrollbar-gutter:stable; } .game-screen #chatPanel.chat-panel.is-open:not(.is-minimized) { overflow:hidden!important; box-shadow:var(--window-shadow); } } /* Dialog cards never create page-level scrolling. Their own body owns overflow. */ .game-screen :is(.marketplace-modal,.inventory-item-dialog-v2738,.trade-dialog,.world-channel-confirm,.dialogue-layer,.starter-dialog,.professor-transfer-dialog,.lab-games) { overscroll-behavior:contain; } .game-screen :is(.marketplace-shell,.inventory-item-dialog-v2738__content,.trade-dialog__content,.world-channel-confirm__card,.dialogue-card,.starter-experience,.professor-transfer-card-shell,.lab-games__shell) { max-height:calc(100dvh - var(--window-safe-top) - var(--window-safe-bottom)); } .game-screen :is(.marketplace-modal__backdrop,.inventory-item-dialog-v2738__backdrop,.trade-dialog__backdrop,.world-channel-confirm__backdrop,.dialogue-shade,.starter-backdrop,.lab-games__shade) { backdrop-filter:blur(3px); } /* Shared close affordance: touch-size is stable, visible focus is never hidden. */ .game-screen :is(.panel-close,.marketplace-head>button,.world-channel-confirm__close,.dialogue-close,.starter-close,.inventory-item-dialog-v2738 [data-inventory-detail-close]) { min-width:40px; min-height:40px; touch-action:manipulation; } .game-screen :is(button,[role="button"],input,select,textarea):focus-visible { outline:3px solid color-mix(in srgb,#1598df 72%,white)!important; outline-offset:2px; } /* Phone portrait: the side panel becomes one full-height sheet. It deliberately overrides legacy translated/positioned states, so no old window can escape below the dock or under the notch. */ @media (max-width:760px) and (orientation:portrait) { body:not(.is-battling) .game-screen #sidePanel.side-panel.is-open { position:fixed!important; top:var(--window-safe-top)!important; right:var(--window-safe-right)!important; bottom:calc(70px + var(--window-safe-bottom))!important; left:var(--window-safe-left)!important; width:auto!important; height:auto!important; max-width:none!important; max-height:none!important; margin:0!important; padding:8px!important; transform:none!important; border-radius:22px!important; overflow:hidden!important; box-shadow:var(--window-shadow)!important; } body:not(.is-battling) .game-screen #sidePanel.side-panel.is-open #sidePanelContent { height:100%!important; min-height:0!important; padding:0!important; overflow:auto!important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } body:not(.is-battling) .game-screen #sidePanel.side-panel.is-open .panel-window-grip { display:none!important; } body:not(.is-battling) .game-screen #sidePanel.side-panel.is-open>.panel-close { position:absolute!important; z-index:4!important; top:12px!important; right:12px!important; width:40px!important; height:40px!important; border-radius:13px!important; } /* The atlas is a map canvas, therefore it needs every safe pixel, not a second bottom sheet inside a bottom sheet. */ body:not(.is-battling) .game-screen #sidePanel.side-panel.is-regions-panel.is-open { bottom:var(--window-safe-bottom)!important; } body:not(.is-battling) .game-screen #chatPanel.chat-panel.chat-messenger.is-open:not(.is-minimized) { position:fixed!important; top:auto!important; right:var(--window-safe-right)!important; bottom:calc(70px + var(--window-safe-bottom))!important; left:var(--window-safe-left)!important; width:auto!important; height:min(70dvh,610px)!important; max-width:none!important; max-height:calc(100dvh - 84px - var(--window-safe-top) - var(--window-safe-bottom))!important; margin:0!important; border-radius:22px!important; box-shadow:var(--window-shadow)!important; transform:none!important; } body:not(.is-battling) .game-screen #chatPanel.chat-panel.chat-messenger.is-minimized { right:var(--window-safe-right)!important; bottom:calc(74px + var(--window-safe-bottom))!important; left:auto!important; max-width:calc(100vw - var(--window-safe-left) - var(--window-safe-right))!important; } .game-screen .marketplace-modal { align-items:end!important; padding:var(--window-safe-top) var(--window-safe-right) var(--window-safe-bottom)!important; } .game-screen .marketplace-shell { width:100%!important; height:min(88dvh,760px)!important; border-radius:22px 22px 17px 17px!important; } .game-screen .marketplace-body { padding:12px!important; overscroll-behavior:contain; } .game-screen .inventory-item-dialog-v2738 { align-items:end!important; padding:var(--window-safe-top) var(--window-safe-right) var(--window-safe-bottom)!important; } .game-screen .inventory-item-dialog-v2738__content { width:100%!important; max-width:560px!important; max-height:min(82dvh,680px)!important; border-radius:22px 22px 16px 16px!important; overflow:auto!important; overscroll-behavior:contain; } .game-screen .trade-dialog__content,.game-screen .world-channel-confirm__card,.game-screen .dialogue-card,.game-screen .starter-experience,.game-screen .professor-transfer-card-shell,.game-screen .lab-games__shell { width:min(100% - 16px,620px)!important; max-height:calc(100dvh - var(--window-safe-top) - var(--window-safe-bottom) - 16px)!important; overflow:auto!important; overscroll-behavior:contain; } } /* Short phone landscape uses the full viewport for an intentional task, while persistent HUD and decorative rails are retired by the existing battle mode. */ @media (max-height:560px) and (orientation:landscape) { body:not(.is-battling) .game-screen #sidePanel.side-panel.is-open, body:not(.is-battling) .game-screen #chatPanel.chat-panel.chat-messenger.is-open:not(.is-minimized) { position:fixed!important; top:var(--window-safe-top)!important; right:var(--window-safe-right)!important; bottom:var(--window-safe-bottom)!important; left:var(--window-safe-left)!important; width:auto!important; height:auto!important; max-width:none!important; max-height:none!important; transform:none!important; } /* The dock remains visible outside of battle, so chat must reserve its row even in the compact landscape composition. The keyboard case replaces that reserve below because the dock is intentionally hidden then. */ body:not(.is-battling) .game-screen #chatPanel.chat-panel.chat-messenger.is-open:not(.is-minimized) { bottom:calc(70px + var(--window-safe-bottom))!important; } html[data-mobile-keyboard="open"] body:not(.is-battling) .game-screen #chatPanel.chat-panel.chat-messenger.is-open:not(.is-minimized) { bottom:calc(var(--pk-mobile-keyboard-inset,0px) + var(--window-safe-bottom))!important; } body:not(.is-battling) .game-screen #sidePanel.side-panel.is-open #sidePanelContent { height:100%!important; overflow:auto!important; } } @media (prefers-reduced-motion:reduce) { .game-screen :is(#sidePanel,#chatPanel,#editorPanel,.marketplace-shell,.inventory-item-dialog-v2738__content,.trade-dialog__content,.world-channel-confirm__card,.dialogue-card,.starter-experience) { transition:none!important; animation:none!important; } } /* pk-style-source:100 */ /* /pokemon-command-center-v2326.css */ /* Pokémon Command Center v2.32.6 One calm operational surface: manage the roster first, inspect deep systems on demand. This deliberately replaces the inherited stack of tiny cards. */ .pokemon-instance-v2326 { --command-ink:#153950; --command-muted:#668095; --command-line:#d5e5ec; --command-surface:#ffffff; --command-soft:#f4f9fb; color:var(--command-ink); } .pokemon-instance-v2326 .pokemon-detail-head-v2325 { display:flex; min-height:46px; align-items:center; margin-bottom:14px; padding:0 2px 12px; } .pokemon-instance-v2326 .pokemon-detail-head-v2325 > span { margin-left:auto; border:1px solid #bfe2ee; background:#eefaff; color:#197d9c; font-size:10px; letter-spacing:.08em; } .pokemon-instance-grid-v2326 { grid-template-columns:minmax(280px,330px) minmax(0,1fr)!important; align-items:start!important; gap:18px!important; } .pokemon-instance-v2326 .pokemon-instance-left-v2325, .pokemon-instance-v2326 .pokemon-instance-right-v2326 { display:grid!important; align-content:start; gap:14px!important; } .pokemon-instance-v2326 .pokemon-detail-hero-v2325 { min-height:212px!important; grid-template-columns:122px minmax(0,1fr)!important; border:1px solid color-mix(in srgb,var(--species-accent) 38%,var(--command-line))!important; border-radius:20px!important; background:radial-gradient(circle at 8% 12%,color-mix(in srgb,var(--species-accent) 17%,transparent),transparent 42%),var(--command-surface)!important; box-shadow:none!important; } .pokemon-instance-v2326 .pokemon-detail-portrait-v46 { width:126px!important; height:132px!important; } .pokemon-instance-v2326 .pokemon-detail-hero-v2325 h2 { font-size:1.52rem!important; letter-spacing:-.03em; } .pokemon-instance-v2326 .pokemon-detail-types { margin:8px 0!important; } .pokemon-instance-v2326 .pokemon-energy-readout-v2325 { border-color:#f0da90; background:#fffdf4; } .pokemon-command-center-v2326, .pokemon-command-tab-body-v2326 > .pokemon-detail-section, .pokemon-command-tab-body-v2326 > .pokemon-genome-v2325, .pokemon-command-overview-v2326 { border:1px solid var(--command-line); border-radius:18px; background:var(--command-surface); box-shadow:none; } .pokemon-command-center-v2326 { padding:15px; } .pokemon-command-center-v2326 header, .pokemon-command-overview-v2326 > header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .pokemon-command-center-v2326 header > span, .pokemon-command-overview-v2326 > header > span { display:grid; gap:3px; } .pokemon-command-center-v2326 small, .pokemon-command-overview-v2326 small { color:#5a7a90; font-size:9px; font-weight:900; letter-spacing:.1em; } .pokemon-command-center-v2326 b, .pokemon-command-overview-v2326 b { color:var(--command-ink); font-size:14px; line-height:1.2; } .pokemon-command-center-v2326 header em { flex:0 0 auto; padding:6px 8px; border:1px solid #d8e5ea; border-radius:999px; background:#f5f8fa; color:#678091; font-size:9px; font-style:normal; font-weight:900; white-space:nowrap; } .pokemon-command-center-v2326 header em.is-team { border-color:#bfe2ef; background:#effaff; color:#187b9a; } .pokemon-command-center-v2326 header em.is-lead { border-color:#b8dfc7; background:#eefaf2; color:#237650; } .pokemon-command-center-v2326 > p { margin:10px 0 13px; color:var(--command-muted); font-size:11px; line-height:1.45; } .pokemon-command-actions-v2326 { display:grid; grid-template-columns:1fr; gap:8px; } .pokemon-command-actions-v2326 :is(button,span) { display:flex; min-height:42px; align-items:center; justify-content:center; padding:9px 12px; border:1px solid var(--command-line); border-radius:12px; font:800 11px/1 "Segoe UI Variable",system-ui,sans-serif; text-align:center; } .pokemon-command-primary-v2326 { border-color:#168bc1!important; background:#168bc1!important; color:#fff!important; cursor:pointer; } .pokemon-command-secondary-v2326 { background:#fff!important; color:#315c74!important; cursor:pointer; } .pokemon-command-current-v2326 { border-color:#b8dfc7!important; background:#effaf3!important; color:#24744e!important; } .pokemon-command-protected-v2326 { border-color:#e5d596!important; background:#fffdf1!important; color:#7b651f!important; } .pokemon-command-release-v2326 { margin-top:3px; border-color:#ebc4c7!important; background:#fff!important; color:#b84955!important; cursor:pointer; } .pokemon-command-actions-v2326 button:disabled { cursor:not-allowed; opacity:.48; } .pokemon-command-tabs-v2326 { display:flex; gap:4px; overflow-x:auto; padding:4px; border:1px solid var(--command-line); border-radius:14px; background:var(--command-soft); scrollbar-width:none; } .pokemon-command-tabs-v2326::-webkit-scrollbar { display:none; } .pokemon-command-tab-v2326 { flex:1 0 auto; min-height:36px; padding:7px 12px; border:0; border-radius:10px; background:transparent; color:#647f91; cursor:pointer; font:900 10px/1 "Segoe UI Variable",system-ui,sans-serif; } .pokemon-command-tab-v2326.is-active { background:#fff; box-shadow:0 2px 6px rgba(25,66,87,.12); color:#167faa; } .pokemon-command-tab-v2326:focus-visible { outline:3px solid #61c9ee; outline-offset:1px; } .pokemon-command-tab-body-v2326 { min-width:0; } .pokemon-command-overview-stack-v2326 { display:grid; gap:14px; } .pokemon-instance-v2326 .pokemon-evolution-v48 { min-height:118px; margin:0; padding:15px!important; border-radius:18px!important; } .pokemon-instance-v2326 .pokemon-evolution-v48:after { display:none; } .pokemon-command-overview-v2326 { padding:15px; } .pokemon-command-overview-v2326 > header { margin-bottom:13px; } .pokemon-command-overview-v2326 > header > strong { color:#24764e; font-size:13px; } .pokemon-command-facts-v2326 { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0!important; } .pokemon-command-facts-v2326 article { min-height:60px!important; padding:9px!important; border:1px solid #e0ebf0!important; border-radius:12px!important; background:#fbfdfe!important; } .pokemon-command-facts-v2326 article b { font-size:10px!important; } .pokemon-command-facts-v2326 .pokemon-caught-ball-fact-v2202 { grid-column:1/-1; } .pokemon-instance-v2326 .pokemon-training-v2325, .pokemon-instance-v2326 .pokemon-genome-v2325, .pokemon-instance-v2326 .pokemon-mastery-section-v2325 { margin:0!important; } .pokemon-instance-v2326 .pokemon-mastery-section-v2325 { background:#fff!important; } @media (max-width:860px) { .pokemon-instance-grid-v2326 { grid-template-columns:1fr!important; } .pokemon-instance-v2326 .pokemon-instance-left-v2325 { grid-template-columns:1fr!important; } .pokemon-instance-v2326 .pokemon-detail-hero-v2325 { grid-column:auto; } .pokemon-command-center-v2326 { grid-column:auto; } } @media (max-width:560px) { .pokemon-instance-v2326 .pokemon-detail-head-v2325 { min-height:40px; margin-bottom:9px; padding-bottom:8px; } .pokemon-instance-v2326 .pokemon-detail-hero-v2325 { min-height:154px!important; grid-template-columns:94px minmax(0,1fr)!important; padding:11px!important; } .pokemon-instance-v2326 .pokemon-detail-portrait-v46 { width:96px!important; height:100px!important; } .pokemon-instance-v2326 .pokemon-detail-hero-v2325 h2 { font-size:1.25rem!important; } .pokemon-command-center-v2326,.pokemon-command-overview-v2326 { padding:12px; } .pokemon-command-facts-v2326 { grid-template-columns:1fr; } .pokemon-command-facts-v2326 .pokemon-caught-ball-fact-v2202 { grid-column:auto; } .pokemon-command-tab-v2326 { min-height:38px; padding:8px 10px; } } /* pk-style-source:101 */ /* /pokemon-hub-v2327.css */ /* Pokémon Hub v2.32.7 A single, game-facing language for roster selection and Pokémon management. It intentionally uses an isolated namespace so legacy team/card revisions cannot re-style this surface. */ :root { --pokemon-hub-ink:#102c43; --pokemon-hub-muted:#6a8495; --pokemon-hub-line:rgba(133,180,198,.34); --pokemon-hub-paper:#f4fafc; --pokemon-hub-panel:#ffffff; --pokemon-hub-navy:#10394c; --pokemon-hub-blue:#1698d5; --pokemon-hub-green:#2cab78; --pokemon-hub-shadow:0 18px 44px rgba(16,55,75,.16); } .pokemon-roster-console-v2327, .pokemon-control-room-v2327 { box-sizing:border-box; min-height:100%; color:var(--pokemon-hub-ink); font-family:"Segoe UI Variable","Trebuchet MS",system-ui,sans-serif; } .pokemon-roster-console-v2327 *, .pokemon-control-room-v2327 * { box-sizing:border-box; } .pokemon-roster-console-v2327 button, .pokemon-control-room-v2327 button { font:inherit; touch-action:manipulation; } /* Compact roster: one clear party rail plus a useful lead preview. */ .pokemon-roster-console-v2327 { padding:18px; border:1px solid rgba(137,188,205,.45); border-radius:24px; background: radial-gradient(circle at 94% 3%,rgba(50,204,194,.2),transparent 25%), linear-gradient(145deg,#fafdff 0%,#edf7f8 100%); box-shadow:0 10px 28px rgba(10,60,80,.08); } .pokemon-roster-console-v2327-head { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:58px; margin:0 0 16px; padding:0 2px 14px; border-bottom:1px solid var(--pokemon-hub-line); } .pokemon-roster-console-v2327-head span { display:grid; gap:3px; } .pokemon-roster-console-v2327-head small, .pokemon-control-room-v2327 small { color:#51798d; font-size:10px; font-weight:800; letter-spacing:.09em; } .pokemon-roster-console-v2327-head h1 { margin:0; color:#123d58; font-size:25px; letter-spacing:-.035em; } .pokemon-roster-console-v2327-head>div { display:flex; align-items:center; gap:10px; } .pokemon-roster-console-v2327-head strong { display:grid; min-width:72px; padding:7px 10px; border:1px solid #c2e8f1; border-radius:13px; background:#e9fbff; color:#107fa7; font-size:18px; line-height:1; text-align:center; } .pokemon-roster-console-v2327-head strong small { margin-top:3px; color:#568294; font-size:8px; letter-spacing:0; } .pokemon-roster-console-v2327-head button, .pokemon-roster-console-v2327-hero.is-empty button { min-height:42px; padding:9px 14px; border:1px solid #c8e1e9; border-radius:12px; background:#fff; color:#1c5b75; font-size:12px; font-weight:800; cursor:pointer; } .pokemon-roster-console-v2327-head button:hover, .pokemon-roster-console-v2327-hero.is-empty button:hover { border-color:#42aed2; color:#087ea7; } .pokemon-roster-console-v2327-layout { display:grid; grid-template-columns:minmax(212px,270px) minmax(0,1fr); gap:16px; } .pokemon-roster-console-v2327-rail { min-width:0; overflow:hidden; border:1px solid var(--pokemon-hub-line); border-radius:18px; background:rgba(255,255,255,.7); } .pokemon-roster-console-v2327-rail-head { display:flex; justify-content:space-between; align-items:center; min-height:44px; padding:0 13px; border-bottom:1px solid rgba(135,184,200,.25); color:#52788c; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } .pokemon-roster-console-v2327-rail-head b { min-width:36px; padding:5px 7px; border-radius:999px; background:#e6f6fa; color:#1780a2; font-size:10px; text-align:center; } .pokemon-roster-console-v2327-members { display:grid; gap:6px; padding:7px; } .pokemon-roster-console-v2327-member, .pokemon-roster-console-v2327-empty { display:grid; grid-template-columns:26px 46px minmax(0,1fr); align-items:center; min-height:62px; width:100%; padding:6px; border:1px solid transparent; border-radius:13px; background:transparent; color:var(--pokemon-hub-ink); text-align:left; cursor:pointer; } .pokemon-roster-console-v2327-member:hover { border-color:color-mix(in srgb,var(--species-accent,#1a9dd0) 35%,#c9e0e7); background:#f8fdff; } .pokemon-roster-console-v2327-member.is-lead { border-color:color-mix(in srgb,var(--species-accent,#1a9dd0) 50%,#c9e7e0); background:linear-gradient(105deg,color-mix(in srgb,var(--species-accent,#1a9dd0) 14%,#fff),#f9fffd); } .pokemon-roster-console-v2327-index { color:#7893a0; font-size:10px; font-weight:900; letter-spacing:.06em; } .pokemon-roster-console-v2327-portrait { display:grid; place-items:center; width:43px; height:43px; overflow:hidden; border-radius:12px; background:radial-gradient(circle at 35% 25%,#fff,#e6f5f9); } .pokemon-roster-console-v2327-portrait-image, .pokemon-roster-console-v2327-portrait-image img { width:46px!important; height:46px!important; object-fit:contain; } .pokemon-roster-console-v2327-member-copy { display:grid; min-width:0; gap:2px; padding-left:7px; } .pokemon-roster-console-v2327-member-copy b { overflow:hidden; color:#173d55; font-size:12px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; } .pokemon-roster-console-v2327-member-copy small { color:#668496; font-size:9px; font-weight:700; letter-spacing:0; } .pokemon-roster-console-v2327-member-copy i { display:block; width:100%; height:3px; overflow:hidden; border-radius:99px; background:#e1edf0; } .pokemon-roster-console-v2327-member-copy i em { display:block; height:100%; border-radius:inherit; background:var(--species-accent,#39b779); } .pokemon-roster-console-v2327-empty { grid-template-columns:26px minmax(0,1fr); gap:7px; min-height:54px; border-style:dashed; border-color:#d3e5ea; background:rgba(247,252,253,.72); cursor:pointer; } .pokemon-roster-console-v2327-empty:hover { border-color:#57bad5; background:#f0fcff; } .pokemon-roster-console-v2327-empty span { grid-row:1/3; color:#89a2ad; font-size:10px; font-weight:900; } .pokemon-roster-console-v2327-empty b { color:#5a7989; font-size:11px; } .pokemon-roster-console-v2327-empty small { color:#8ba2ad; font-size:9px; font-weight:700; letter-spacing:0; } .pokemon-roster-console-v2327-main { display:grid; align-content:start; gap:13px; min-width:0; } .pokemon-roster-console-v2327-hero { position:relative; display:grid; grid-template-columns:minmax(150px,230px) minmax(0,1fr) minmax(152px,190px); align-items:center; min-height:224px; overflow:hidden; border:1px solid color-mix(in srgb,var(--species-accent,#1a9dd0) 40%,#bed8e4); border-radius:20px; background:#123a4b; color:#fff; isolation:isolate; } .pokemon-roster-console-v2327-hero-background { position:absolute; z-index:-2; inset:0; background: linear-gradient(90deg,rgba(9,35,50,.94) 0%,rgba(10,48,61,.77) 54%,rgba(8,36,49,.66) 100%), url("/assets/v8/ui/pokemon-command-lab-v2327.png") center/cover; } .pokemon-roster-console-v2327-hero:after { position:absolute; z-index:-1; right:-13%; bottom:-52%; width:62%; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--species-accent,#78ddff) 45%,transparent); border-radius:50%; box-shadow:0 0 0 28px color-mix(in srgb,var(--species-accent,#78ddff) 10%,transparent),0 0 0 58px color-mix(in srgb,var(--species-accent,#78ddff) 6%,transparent); content:""; } .pokemon-roster-console-v2327-hero-portrait { display:grid; place-items:center; align-self:stretch; padding:12px 8px 0; } .pokemon-roster-console-v2327-hero-image, .pokemon-roster-console-v2327-hero-image img { width:min(100%,220px)!important; height:194px!important; object-fit:contain; filter:drop-shadow(0 15px 14px rgba(0,0,0,.42)); } .pokemon-roster-console-v2327-hero-copy { display:grid; align-content:center; gap:9px; min-width:0; padding:22px 10px 22px 0; } .pokemon-roster-console-v2327-hero-copy small { color:#a9dcea; } .pokemon-roster-console-v2327-hero-copy h2 { margin:0; color:#fff; font-size:28px; letter-spacing:-.045em; } .pokemon-roster-console-v2327-hero-copy>div { display:flex; flex-wrap:wrap; align-items:center; gap:7px; } .pokemon-roster-console-v2327-hero-copy>div>span { padding:5px 8px; border:1px solid rgba(255,255,255,.26); border-radius:999px; color:#ddf6ff; font-size:10px; font-weight:800; } .pokemon-roster-console-v2327-hero-copy p { margin:0; color:#bfd8e2; font-size:11px; line-height:1.45; } .pokemon-roster-console-v2327-hero-stats { display:grid; align-content:center; gap:8px; padding:20px 18px 20px 8px; } .pokemon-roster-console-v2327-hero-stats>span { display:flex; justify-content:space-between; gap:7px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.14); } .pokemon-roster-console-v2327-hero-stats small { color:#9ecbd9; font-size:9px; } .pokemon-roster-console-v2327-hero-stats b { color:#fff; font-size:12px; } .pokemon-roster-console-v2327-hero-stats button { min-height:40px; margin-top:4px; border:0; border-radius:11px; background:var(--species-accent,#1f9fd5); color:#fff; font-size:11px; font-weight:900; cursor:pointer; box-shadow:0 7px 16px rgba(0,0,0,.16); } .pokemon-roster-console-v2327-hero.is-empty { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; min-height:156px; padding:24px; border-color:#c9e0e7; background:linear-gradient(135deg,#f8fdff,#e9f7f6); color:var(--pokemon-hub-ink); } .pokemon-roster-console-v2327-hero.is-empty h2 { margin:4px 0; color:#1b4a62; font-size:22px; } .pokemon-roster-console-v2327-hero.is-empty p { margin:0; color:#698596; font-size:12px; } .pokemon-roster-console-v2327-synergy { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:86px; padding:14px 16px; border:1px solid #cce3eb; border-radius:17px; background:#fff; } .pokemon-roster-console-v2327-synergy>span { display:grid; min-width:0; gap:3px; } .pokemon-roster-console-v2327-synergy small { color:#5c8193; font-size:9px; } .pokemon-roster-console-v2327-synergy>span>b { color:#184c65; font-size:15px; } .pokemon-roster-console-v2327-synergy p { margin:0; color:#6b8796; font-size:11px; } .pokemon-roster-console-v2327-synergy>strong { position:relative; display:grid; place-items:center; flex:0 0 55px; width:55px; height:55px; border-radius:50%; background:conic-gradient(#2ab783 var(--synergy-value,0%),#e4eff0 0); color:#177957; font-size:14px; } .pokemon-roster-console-v2327-synergy>strong:before { position:absolute; inset:5px; border-radius:inherit; background:#fff; content:""; } .pokemon-roster-console-v2327-synergy>strong b { position:relative; z-index:1; } .pokemon-roster-console-v2327-synergy>strong i { display:none; } .pokemon-roster-console-v2327-guide { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .pokemon-roster-console-v2327-guide>span { display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px; align-items:start; padding:10px 12px; border-radius:13px; background:rgba(255,255,255,.68); color:#668394; } .pokemon-roster-console-v2327-guide b { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#d9f2f8; color:#137b9f; font-size:11px; } .pokemon-roster-console-v2327-guide p { margin:0; font-size:10px; line-height:1.42; } .pokemon-roster-console-v2327-lock { margin:0; padding:10px 12px; border:1px solid #f0d5a3; border-radius:12px; background:#fff9ee; color:#85632d; font-size:11px; line-height:1.4; } /* Pokémon card: focused, game-like control room rather than nested white forms. */ .pokemon-control-room-v2327 { padding:17px; border:1px solid rgba(127,177,194,.42); border-radius:24px; background:linear-gradient(145deg,#f9fdff,#eaf5f8); box-shadow:0 10px 28px rgba(10,60,80,.08); } .pokemon-control-room-v2327-head { display:flex; align-items:center; justify-content:space-between; min-height:40px; margin:0 0 12px; } .pokemon-control-room-v2327-head button { padding:7px 0; border:0; background:transparent; color:#3b6680; font-size:12px; font-weight:850; cursor:pointer; } .pokemon-control-room-v2327-head button:hover { color:#147fa8; } .pokemon-control-room-v2327-head>span { padding:6px 10px; border:1px solid color-mix(in srgb,var(--species-accent,#1d9cd1) 35%,#c8e2e9); border-radius:999px; background:color-mix(in srgb,var(--species-accent,#1d9cd1) 10%,#fff); color:#31718b; font-size:10px; font-weight:900; } .pokemon-control-room-v2327-hero { position:relative; display:grid; grid-template-columns:minmax(150px,230px) minmax(220px,1fr) minmax(255px,310px); min-height:246px; overflow:hidden; border:1px solid color-mix(in srgb,var(--species-accent,#1e9bcf) 38%,#275464); border-radius:22px; background:#103848; color:#fff; isolation:isolate; } .pokemon-control-room-v2327-hero-background { position:absolute; z-index:-2; inset:0; background: linear-gradient(90deg,rgba(6,31,43,.92) 0%,rgba(9,48,61,.8) 52%,rgba(7,38,51,.9) 100%), url("/assets/v8/ui/pokemon-command-lab-v2327.png") center/cover; } .pokemon-control-room-v2327-hero:after { position:absolute; z-index:-1; top:-35%; right:13%; width:280px; height:280px; border:1px solid color-mix(in srgb,var(--species-accent,#77d9ff) 38%,transparent); border-radius:50%; box-shadow:0 0 0 34px color-mix(in srgb,var(--species-accent,#77d9ff) 8%,transparent),0 0 0 75px color-mix(in srgb,var(--species-accent,#77d9ff) 4%,transparent); content:""; } .pokemon-control-room-v2327-hero-portrait { display:grid; place-items:center; min-width:0; padding:14px 8px 0; } .pokemon-control-room-v2327-hero-image, .pokemon-control-room-v2327-hero-image img { width:min(100%,220px)!important; height:216px!important; object-fit:contain; filter:drop-shadow(0 18px 17px rgba(0,0,0,.48)); } .pokemon-control-room-v2327-hero-copy { display:grid; align-content:center; gap:8px; min-width:0; padding:20px 12px 20px 0; } .pokemon-control-room-v2327-hero-copy small { color:#a7d5e2; } .pokemon-control-room-v2327-hero-copy h1 { margin:0; overflow:hidden; color:#fff; font-size:30px; letter-spacing:-.05em; text-overflow:ellipsis; white-space:nowrap; } .pokemon-control-room-v2327-hero-copy>div { display:flex; flex-wrap:wrap; align-items:center; gap:7px; } .pokemon-control-room-v2327-hero-copy>div>span { padding:5px 8px; border:1px solid rgba(255,255,255,.23); border-radius:999px; color:#d8f4ff; font-size:10px; font-weight:800; } .pokemon-control-room-v2327-hero-copy p { margin:0; color:#c2dce5; font-size:11px; } .pokemon-control-room-v2327-hero-copy label { display:grid; gap:5px; max-width:230px; margin-top:4px; } .pokemon-control-room-v2327-hero-copy label>span { display:flex; justify-content:space-between; color:#a7cfdb; font-size:10px; font-weight:800; } .pokemon-control-room-v2327-hero-copy label>span b { color:#fff; } .pokemon-control-room-v2327-hero-copy label>i, .pokemon-control-room-v2327-vitals i { display:block; height:5px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.15); } .pokemon-control-room-v2327-hero-copy label em, .pokemon-control-room-v2327-vitals i em { display:block; height:100%; border-radius:inherit; background:var(--species-accent,#42c79a); } .pokemon-control-room-v2327-vitals { display:grid; align-content:center; gap:10px; min-width:0; padding:20px 20px 20px 6px; } .pokemon-control-room-v2327-vitals>span { display:grid; grid-template-columns:minmax(105px,1fr) auto; gap:4px 10px; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.13); } .pokemon-control-room-v2327-vitals small { color:#a6d1de; font-size:9px; } .pokemon-control-room-v2327-vitals b { color:#fff; font-size:14px; text-align:right; } .pokemon-control-room-v2327-vitals b em { color:#a9d6e3; font-size:9px; font-style:normal; } .pokemon-control-room-v2327-vitals i { grid-column:1/-1; } .pokemon-control-room-v2327-vitals>span:nth-child(1) i em { background:#53d396; } .pokemon-control-room-v2327-vitals>span:nth-child(2) i em { background:#f2bd45; } .pokemon-control-room-v2327-vitals>span:nth-child(3) i em { background:#b77cea; } .pokemon-control-room-v2327-layout { display:grid; grid-template-columns:minmax(238px,285px) minmax(0,1fr); gap:15px; margin-top:15px; } .pokemon-control-room-v2327-control { display:grid; align-content:start; gap:12px; min-width:0; } .pokemon-control-room-v2327-control>section, .pokemon-control-room-v2327-stat-section, .pokemon-control-room-v2327-evolution, .pokemon-control-room-v2327-facts, .pokemon-control-room-v2327-training, .pokemon-control-room-v2327-genome, .pokemon-control-room-v2327-skills { border:1px solid var(--pokemon-hub-line); border-radius:17px; background:rgba(255,255,255,.92); box-shadow:0 5px 14px rgba(14,64,85,.04); } .pokemon-control-room-v2327-control>section { padding:14px; } .pokemon-control-room-v2327-control header { display:grid; gap:4px; } .pokemon-control-room-v2327-control header b { color:#1a4d66; font-size:15px; } .pokemon-control-room-v2327-control>section>p { margin:9px 0 13px; color:#698696; font-size:11px; line-height:1.48; } .pokemon-control-room-v2327-control>section>div:not(.pokemon-control-room-v2327-synergy-card div) { display:grid; gap:8px; } .pokemon-control-room-v2327-primary, .pokemon-control-room-v2327-secondary, .pokemon-control-room-v2327-release, .pokemon-control-room-v2327-current, .pokemon-control-room-v2327-protected { display:flex; align-items:center; justify-content:center; width:100%; min-height:43px; padding:9px 12px; border:1px solid #cce3ea; border-radius:12px; font-size:11px; font-weight:900; text-align:center; } .pokemon-control-room-v2327-primary { border-color:var(--species-accent,#169bd0); background:var(--species-accent,#169bd0); color:#fff; cursor:pointer; } .pokemon-control-room-v2327-secondary { background:#fff; color:#235c74; cursor:pointer; } .pokemon-control-room-v2327-release { border-color:#e6c1c3; background:#fffafb; color:#b9525c; cursor:pointer; } .pokemon-control-room-v2327-current { border-color:#b9e4ce; background:#effbf4; color:#247a54; } .pokemon-control-room-v2327-protected { border-color:#eddb9a; background:#fffbed; color:#826929; } .pokemon-control-room-v2327-control button:disabled { cursor:not-allowed; opacity:.48; } .pokemon-control-room-v2327-synergy-card { border-color:#bfded9!important; background:linear-gradient(140deg,#f0fbf6,#fbfffd)!important; } .pokemon-control-room-v2327-synergy-card>b { display:block; margin:4px 0 9px; color:#1f6954; font-size:18px; } .pokemon-control-room-v2327-synergy-card>b em { color:#1ca778; font-size:10px; font-style:normal; } .pokemon-control-room-v2327-synergy-card>div { position:relative; height:9px; overflow:hidden; border-radius:99px; background:#dceee7; } .pokemon-control-room-v2327-synergy-card>div i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2bb487,#61d2ae); } .pokemon-control-room-v2327-synergy-card>div strong { position:absolute; top:-22px; right:0; color:#197657; font-size:12px; } .pokemon-control-room-v2327-synergy-card ul { display:grid; gap:5px; margin:11px 0 0; padding:0; list-style:none; } .pokemon-control-room-v2327-synergy-card li { display:flex; justify-content:space-between; color:#4d7d6e; font-size:10px; } .pokemon-control-room-v2327-synergy-card li b { color:#28745d; } .pokemon-control-room-v2327-content { display:grid; align-content:start; gap:13px; min-width:0; } .pokemon-control-room-v2327-tabs { display:flex; gap:4px; overflow-x:auto; padding:4px; border:1px solid var(--pokemon-hub-line); border-radius:14px; background:#eaf4f7; scrollbar-width:none; } .pokemon-control-room-v2327-tabs::-webkit-scrollbar { display:none; } .pokemon-control-room-v2327-tab { flex:1 0 auto; min-height:39px; padding:8px 13px; border:0; border-radius:10px; background:transparent; color:#5a7d90; font-size:11px; font-weight:850; cursor:pointer; } .pokemon-control-room-v2327-tab:hover { color:#127da4; } .pokemon-control-room-v2327-tab.is-active { background:#fff; box-shadow:0 3px 9px rgba(17,75,98,.13); color:#147da5; } .pokemon-control-room-v2327-tab:focus-visible { outline:3px solid #61c9ee; outline-offset:1px; } .pokemon-control-room-v2327-overview { display:grid; gap:12px; } .pokemon-control-room-v2327-stat-section { padding:15px; } .pokemon-control-room-v2327-stat-section header, .pokemon-control-room-v2327-training>header, .pokemon-control-room-v2327-genome>header, .pokemon-control-room-v2327-skills>header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .pokemon-control-room-v2327-stat-section header span, .pokemon-control-room-v2327-training header span, .pokemon-control-room-v2327-genome header span, .pokemon-control-room-v2327-skills header span { display:grid; gap:4px; } .pokemon-control-room-v2327-stat-section header b, .pokemon-control-room-v2327-training header b, .pokemon-control-room-v2327-genome header b, .pokemon-control-room-v2327-skills header b { color:#194b64; font-size:16px; } .pokemon-control-room-v2327-stat-section header em { margin-top:5px; color:#6b8998; font-size:10px; font-style:normal; text-align:right; } .pokemon-control-room-v2327-stat-section>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:13px; } .pokemon-control-room-v2327-stat { position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:7px; min-width:0; padding:9px; border:1px solid color-mix(in srgb,var(--stat-tone) 38%,#d6e9ee); border-radius:13px; background:linear-gradient(135deg,color-mix(in srgb,var(--stat-tone) 7%,#fff),#fff); } .pokemon-control-room-v2327-stat>img { width:27px; height:27px; object-fit:contain; } .pokemon-control-room-v2327-stat span { display:grid; min-width:0; gap:1px; } .pokemon-control-room-v2327-stat small { color:#5d7d8e; font-size:9px; letter-spacing:0; } .pokemon-control-room-v2327-stat b { color:#1a4b64; font-size:18px; line-height:1; } .pokemon-control-room-v2327-stat em { overflow:hidden; color:#7591a0; font-size:8px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; } .pokemon-control-room-v2327-stat>i { grid-column:1/-1; display:block; height:4px; overflow:hidden; border-radius:99px; background:#e4eff1; } .pokemon-control-room-v2327-stat>i u { display:block; height:100%; border-radius:inherit; background:var(--stat-tone); text-decoration:none; } .pokemon-control-room-v2327-evolution { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:15px; align-items:center; min-height:104px; padding:13px 15px; } .pokemon-control-room-v2327-evolution>div { display:grid; gap:4px; } .pokemon-control-room-v2327-evolution b { color:#1d516b; font-size:15px; } .pokemon-control-room-v2327-evolution b i { color:#338fb0; font-style:normal; } .pokemon-control-room-v2327-evolution p { margin:0; color:#6e8999; font-size:10px; } .pokemon-control-room-v2327-evolution-art { display:flex; align-items:center; gap:5px; } .pokemon-control-room-v2327-evolution-art>i { display:grid; place-items:center; width:48px; height:48px; overflow:hidden; border:1px solid #cddfe8; border-radius:13px; background:#f6fbfd; } .pokemon-control-room-v2327-evolution-portrait, .pokemon-control-room-v2327-evolution-portrait img { width:48px!important; height:48px!important; object-fit:contain; } .pokemon-control-room-v2327-evolution-art>em { color:#5a97ad; font-style:normal; } .pokemon-control-room-v2327-evolution>button, .pokemon-control-room-v2327-genome footer button { min-height:38px; padding:7px 10px; border:1px solid #b7ddcf; border-radius:11px; background:#eefbf4; color:#267d58; font-size:10px; font-weight:900; cursor:pointer; } .pokemon-control-room-v2327-evolution>button:disabled { cursor:default; opacity:.52; } .pokemon-control-room-v2327-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; overflow:hidden; background:#dcebf0; } .pokemon-control-room-v2327-facts span { display:grid; min-width:0; gap:3px; padding:12px 14px; background:#fbfeff; } .pokemon-control-room-v2327-facts b { overflow:hidden; color:#315e76; font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .pokemon-control-room-v2327-training { padding:15px; } .pokemon-control-room-v2327-training header p, .pokemon-control-room-v2327-skills header p, .pokemon-control-room-v2327-genome header p { max-width:480px; margin:2px 0 0; color:#6b8798; font-size:11px; line-height:1.45; } .pokemon-control-room-v2327-training>header>strong { display:grid; grid-template-columns:31px auto; grid-template-rows:1fr 1fr; column-gap:6px; align-items:center; padding:7px 9px; border:1px solid #d1e6ed; border-radius:13px; background:#f2fbff; } .pokemon-control-room-v2327-training>header>strong img { grid-row:1/3; width:28px; height:28px; object-fit:contain; } .pokemon-control-room-v2327-training>header>strong b { color:#1c6581; font-size:16px; } .pokemon-control-room-v2327-training>header>strong small { color:#6a8794; font-size:8px; letter-spacing:0; } .pokemon-control-room-v2327-training-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:13px; } .pokemon-control-room-v2327-training-row { display:grid; grid-template-columns:31px minmax(0,1fr) auto; gap:8px; align-items:center; min-width:0; padding:9px; border:1px solid color-mix(in srgb,var(--stat-tone) 34%,#d7e8ed); border-radius:13px; background:linear-gradient(135deg,color-mix(in srgb,var(--stat-tone) 6%,#fff),#fff); } .pokemon-control-room-v2327-training-row>img { width:29px; height:29px; object-fit:contain; } .pokemon-control-room-v2327-training-row>div { display:grid; min-width:0; gap:2px; } .pokemon-control-room-v2327-training-row>div>b { color:#1e5068; font-size:11px; } .pokemon-control-room-v2327-training-row>div>small { color:#6b8798; font-size:9px; } .pokemon-control-room-v2327-training-row>div>i { display:block; height:4px; overflow:hidden; border-radius:99px; background:#e4eff1; } .pokemon-control-room-v2327-training-row>div>i em { display:block; height:100%; border-radius:inherit; background:var(--stat-tone); } .pokemon-control-room-v2327-training-row button { display:grid; grid-template-columns:17px auto; grid-template-rows:1fr 1fr; align-items:center; gap:0 3px; min-width:59px; min-height:38px; padding:4px 6px; border:1px solid color-mix(in srgb,var(--stat-tone) 60%,#b2d9e2); border-radius:10px; background:#fff; color:#3e677b; font-size:8px; cursor:pointer; } .pokemon-control-room-v2327-training-row button>img { grid-row:1/3; width:17px; height:17px; object-fit:contain; } .pokemon-control-room-v2327-training-row button>span { color:#417287; font-size:8px; } .pokemon-control-room-v2327-training-row button>b { color:#1e7898; font-size:8px; } .pokemon-control-room-v2327-training-row button:disabled { cursor:not-allowed; opacity:.45; } .pokemon-control-room-v2327-genome { padding:16px; } .pokemon-control-room-v2327-genome header { align-items:center; } .pokemon-control-room-v2327-genome header>img { width:58px; height:58px; object-fit:contain; } .pokemon-control-room-v2327-genome header>span { flex:1; } .pokemon-control-room-v2327-genome header>strong { display:grid; min-width:68px; padding:7px; border:1px solid #d8c7f4; border-radius:13px; background:#faf6ff; color:#6e4ba7; text-align:center; } .pokemon-control-room-v2327-genome header>strong b { font-size:20px; } .pokemon-control-room-v2327-genome header>strong small { color:#8c73ab; font-size:9px; letter-spacing:0; } .pokemon-control-room-v2327-genome header>strong em { color:#936bc0; font-size:9px; font-style:normal; } .pokemon-control-room-v2327-gene-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:15px; } .pokemon-control-room-v2327-gene { display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:center; gap:6px; min-height:49px; padding:8px; border:1px solid color-mix(in srgb,var(--gene-tone) 34%,#d8e9ed); border-radius:12px; background:linear-gradient(135deg,color-mix(in srgb,var(--gene-tone) 6%,#fff),#fff); } .pokemon-control-room-v2327-gene>img { width:23px; height:23px; object-fit:contain; } .pokemon-control-room-v2327-gene small { overflow:hidden; color:#607e8f; font-size:9px; letter-spacing:0; text-overflow:ellipsis; white-space:nowrap; } .pokemon-control-room-v2327-gene>b { color:#315d74; font-size:16px; } .pokemon-control-room-v2327-gene>b em { color:#8ca2ae; font-size:8px; font-style:normal; } .pokemon-control-room-v2327-genome footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:13px; padding-top:12px; border-top:1px solid #e1ebed; color:#6d8194; font-size:10px; } .pokemon-control-room-v2327-skills { padding:15px; } .pokemon-control-room-v2327-skills>header { margin-bottom:12px; } .pokemon-control-room-v2327-skills .kanto-mastery { display:grid; gap:12px; padding:0; background:transparent; color:#1a4c65; } .pokemon-control-room-v2327-skills .kanto-mastery>header { display:none; } .pokemon-control-room-v2327-skills .kanto-mastery-evolution-note { margin:0; border-radius:13px; } .pokemon-control-room-v2327-skills .kanto-mastery-reset { min-height:42px; margin:0; border-radius:12px; } .pokemon-control-room-v2327-skills .kanto-mastery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:0; } .pokemon-control-room-v2327-skills .kanto-mastery-card { min-height:0; padding:11px; border-radius:14px; box-shadow:none; } .pokemon-control-room-v2327-skills .kanto-mastery-title b { font-size:13px; } .pokemon-control-room-v2327-skills .kanto-mastery-title small { font-size:8px; } .pokemon-control-room-v2327-skills .kanto-mastery-art, .pokemon-control-room-v2327-skills .kanto-mastery-art img { width:44px!important; height:44px!important; flex-basis:44px; } .pokemon-control-room-v2327-skills .kanto-mastery-card>p { min-height:0; margin:8px 0; font-size:10px; } .pokemon-control-room-v2327-skills .kanto-mastery-actions { align-items:center; } .pokemon-control-room-v2327-skills .kanto-mastery-actions>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex:1; } .pokemon-control-room-v2327-skills .kanto-mastery-actions>div button { min-width:0; padding:5px 6px; font-size:8px; } .pokemon-control-room-v2327-skills .kanto-mastery-actions>button { min-height:32px; font-size:9px; } .pokemon-control-room-v2327-empty { padding:28px; border:1px solid var(--pokemon-hub-line); border-radius:20px; background:#f8fdff; color:#2e5d76; } .pokemon-control-room-v2327-empty h2 { margin:6px 0; } .pokemon-control-room-v2327-empty p { color:#6e8897; } .pokemon-control-room-v2327-empty button { min-height:42px; padding:9px 13px; border:1px solid #b9dfe9; border-radius:12px; background:#fff; color:#1a7699; font-weight:800; cursor:pointer; } @media (max-width:960px) { .pokemon-roster-console-v2327-layout, .pokemon-control-room-v2327-layout { grid-template-columns:1fr; } .pokemon-roster-console-v2327-rail { order:2; } .pokemon-roster-console-v2327-members { grid-template-columns:repeat(2,minmax(0,1fr)); } .pokemon-control-room-v2327-control { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; } .pokemon-control-room-v2327-hero { grid-template-columns:150px minmax(0,1fr) minmax(210px,250px); } } @media (max-width:680px) { .pokemon-roster-console-v2327, .pokemon-control-room-v2327 { padding:12px; border-radius:18px; } .pokemon-roster-console-v2327-head { min-height:52px; margin-bottom:11px; padding-bottom:10px; } .pokemon-roster-console-v2327-head h1 { font-size:21px; } .pokemon-roster-console-v2327-head>div { gap:6px; } .pokemon-roster-console-v2327-head strong { min-width:57px; padding:6px; font-size:15px; } .pokemon-roster-console-v2327-head button { min-height:38px; padding:7px 9px; font-size:10px; } .pokemon-roster-console-v2327-hero { grid-template-columns:108px minmax(0,1fr); min-height:192px; } .pokemon-roster-console-v2327-hero-portrait { padding:9px 3px 0; } .pokemon-roster-console-v2327-hero-image, .pokemon-roster-console-v2327-hero-image img { height:170px!important; } .pokemon-roster-console-v2327-hero-copy { padding:17px 13px 17px 0; } .pokemon-roster-console-v2327-hero-copy h2 { font-size:23px; } .pokemon-roster-console-v2327-hero-stats { grid-column:1/-1; grid-template-columns:1fr 1fr 1fr; gap:6px; padding:0 11px 11px; } .pokemon-roster-console-v2327-hero-stats>span { display:grid; gap:2px; padding:6px 0; } .pokemon-roster-console-v2327-hero-stats button { grid-column:1/-1; min-height:38px; } .pokemon-roster-console-v2327-guide { grid-template-columns:1fr; } .pokemon-roster-console-v2327-hero.is-empty { align-items:flex-start; flex-direction:column; } .pokemon-control-room-v2327-head { min-height:35px; margin-bottom:8px; } .pokemon-control-room-v2327-hero { grid-template-columns:104px minmax(0,1fr); min-height:205px; } .pokemon-control-room-v2327-hero-portrait { padding:8px 3px 0; } .pokemon-control-room-v2327-hero-image, .pokemon-control-room-v2327-hero-image img { height:180px!important; } .pokemon-control-room-v2327-hero-copy { padding:13px 11px 13px 0; } .pokemon-control-room-v2327-hero-copy h1 { font-size:24px; } .pokemon-control-room-v2327-vitals { grid-column:1/-1; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:0 10px 10px; } .pokemon-control-room-v2327-vitals>span { grid-template-columns:1fr; padding:6px 0; } .pokemon-control-room-v2327-vitals b { font-size:11px; text-align:left; } .pokemon-control-room-v2327-vitals b em { display:block; margin-top:1px; } .pokemon-control-room-v2327-control { grid-template-columns:1fr; } .pokemon-control-room-v2327-tabs { position:sticky; top:0; z-index:3; } .pokemon-control-room-v2327-tab { min-height:42px; padding:9px 12px; } .pokemon-control-room-v2327-stat-section>div, .pokemon-control-room-v2327-gene-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .pokemon-control-room-v2327-training-grid, .pokemon-control-room-v2327-skills .kanto-mastery-grid { grid-template-columns:1fr; } .pokemon-control-room-v2327-evolution { grid-template-columns:minmax(0,1fr) auto; } .pokemon-control-room-v2327-evolution>button { grid-column:1/-1; width:100%; } .pokemon-control-room-v2327-facts { grid-template-columns:1fr; } .pokemon-control-room-v2327-genome header { align-items:flex-start; } .pokemon-control-room-v2327-genome header>img { width:47px; height:47px; } } @media (max-width:430px) { .pokemon-roster-console-v2327-members { grid-template-columns:1fr; } .pokemon-roster-console-v2327-synergy { gap:10px; padding:12px; } .pokemon-roster-console-v2327-synergy p { font-size:10px; } .pokemon-control-room-v2327-stat-section, .pokemon-control-room-v2327-training, .pokemon-control-room-v2327-genome, .pokemon-control-room-v2327-skills { padding:12px; } .pokemon-control-room-v2327-stat-section>div { gap:6px; } .pokemon-control-room-v2327-stat { grid-template-columns:24px minmax(0,1fr); padding:7px; } .pokemon-control-room-v2327-stat>img { width:23px; height:23px; } .pokemon-control-room-v2327-stat b { font-size:16px; } .pokemon-control-room-v2327-training header { align-items:center; } .pokemon-control-room-v2327-training>header>strong { flex:0 0 auto; } .pokemon-control-room-v2327-genome header>strong { min-width:54px; } .pokemon-control-room-v2327-genome footer { align-items:flex-start; flex-direction:column; } } @media (prefers-reduced-motion:reduce) { .pokemon-roster-console-v2327 *, .pokemon-control-room-v2327 * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } } /* v2.33.2 — active party only. This is intentionally separate from the retired roster rail above. The team view is a single, compact status board; storage remains a PokéCenter service. */ .pokemon-roster-console-v2327.pokemon-team-board-v2332 { padding:16px; border-color:rgba(107,172,192,.48); border-radius:22px; background:linear-gradient(145deg,#faffff 0%,#eaf5f5 100%); } .pokemon-team-board-v2332-head { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:54px; margin:0 0 12px; padding:0 2px 12px; border-bottom:1px solid var(--pokemon-hub-line); } .pokemon-team-board-v2332-head>span { display:grid; gap:3px; } .pokemon-team-board-v2332-head small, .pokemon-team-board-v2332-surface small { color:#5c8293; font-size:9px; font-weight:900; letter-spacing:.09em; } .pokemon-team-board-v2332-head h1 { margin:0; color:#143d56; font-size:24px; letter-spacing:-.04em; } .pokemon-team-board-v2332-head>strong { display:flex; align-items:baseline; gap:5px; padding:8px 11px; border:1px solid #c7e6ef; border-radius:13px; background:#edfbff; color:#1681a7; } .pokemon-team-board-v2332-head>strong>b { font-size:19px; line-height:1; } .pokemon-team-board-v2332-head>strong>small { color:#618697; font-size:9px; letter-spacing:0; } .pokemon-team-board-v2332-surface { display:grid; gap:11px; min-width:0; } .pokemon-team-board-v2332-focus { position:relative; display:grid; grid-template-columns:126px minmax(0,1fr) minmax(160px,195px) auto; align-items:center; min-height:130px; overflow:hidden; border:1px solid color-mix(in srgb,var(--species-accent,#1d9fce) 45%,#9acbd9); border-radius:18px; background:#153c4d; color:#fff; isolation:isolate; } .pokemon-team-board-v2332-focus-background { position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(10,40,54,.96),rgba(9,55,66,.82) 52%,rgba(13,44,58,.85)),url("/assets/v8/ui/pokemon-command-lab-v2327.png") center/cover; } .pokemon-team-board-v2332-focus::after { position:absolute; z-index:-1; right:-5%; bottom:-62%; width:220px; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--species-accent,#83e0f7) 44%,transparent); border-radius:50%; box-shadow:0 0 0 22px color-mix(in srgb,var(--species-accent,#83e0f7) 9%,transparent),0 0 0 44px color-mix(in srgb,var(--species-accent,#83e0f7) 5%,transparent); content:""; } .pokemon-team-board-v2332-focus-portrait { display:grid; place-items:center; align-self:stretch; padding:7px 2px 0; } .pokemon-team-board-v2332-focus-image, .pokemon-team-board-v2332-focus-image img { width:124px!important; height:119px!important; object-fit:contain; filter:drop-shadow(0 11px 10px rgba(0,0,0,.38)); } .pokemon-team-board-v2332-focus-copy { display:grid; gap:5px; min-width:0; padding:14px 7px 14px 0; } .pokemon-team-board-v2332-focus-copy>small { color:#a8dbe8; } .pokemon-team-board-v2332-focus-copy>b { overflow:hidden; color:#fff; font-size:23px; line-height:1.05; letter-spacing:-.04em; text-overflow:ellipsis; white-space:nowrap; } .pokemon-team-board-v2332-focus-copy>em { display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-style:normal; } .pokemon-team-board-v2332-focus-copy>em>i { padding:4px 6px; border:1px solid rgba(255,255,255,.24); border-radius:999px; color:#d8f2f8; font-size:9px; font-style:normal; font-weight:800; } .pokemon-team-board-v2332-focus-copy p { margin:0; color:#bcdae3; font-size:10px; font-weight:700; } .pokemon-team-board-v2332-focus-vitals { display:grid; align-content:center; gap:5px; min-width:0; padding:12px 9px; border-left:1px solid rgba(255,255,255,.12); } .pokemon-team-board-v2332-focus-vitals>span { display:grid; grid-template-columns:1fr auto; gap:3px 6px; align-items:center; } .pokemon-team-board-v2332-focus-vitals small { color:#a9d4df; font-size:8px; } .pokemon-team-board-v2332-focus-vitals b { color:#fff; font-size:12px; white-space:nowrap; } .pokemon-team-board-v2332-focus-vitals b>em { color:#a9d7e3; font-size:8px; font-style:normal; } .pokemon-team-board-v2332-focus-vitals i { grid-column:1/-1; display:block; height:4px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.15); } .pokemon-team-board-v2332-focus-vitals i>em { display:block; height:100%; border-radius:inherit; background:var(--species-accent,#54d099); } .pokemon-team-board-v2332-focus>button { z-index:1; min-height:34px; margin:0 13px 0 2px; padding:7px 10px; border:1px solid rgba(255,255,255,.22); border-radius:10px; background:rgba(255,255,255,.13); color:#fff; font-size:10px; font-weight:900; cursor:pointer; } .pokemon-team-board-v2332-focus>button:hover { background:rgba(255,255,255,.22); } .pokemon-team-board-v2332-focus.is-empty { grid-template-columns:48px minmax(0,1fr); gap:12px; min-height:104px; padding:17px; border-color:#c7e0e6; background:linear-gradient(135deg,#faffff,#eef8f7); color:#1a5068; } .pokemon-team-board-v2332-focus.is-empty::after { display:none; } .pokemon-team-board-v2332-focus.is-empty>span { display:grid; place-items:center; width:43px; height:43px; border-radius:13px; background:#def2f4; } .pokemon-team-board-v2332-focus.is-empty b { display:block; margin:3px 0; color:#1c5067; font-size:16px; } .pokemon-team-board-v2332-focus.is-empty p { margin:0; color:#6f8998; font-size:10px; } .pokemon-team-board-v2332-center-icon { width:30px; height:30px; object-fit:contain; } .pokemon-team-board-v2332-roster { padding:12px; border:1px solid #cde3e9; border-radius:17px; background:rgba(255,255,255,.82); } .pokemon-team-board-v2332-roster>header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 10px; } .pokemon-team-board-v2332-roster>header>span { display:grid; gap:3px; } .pokemon-team-board-v2332-roster>header b { color:#20546c; font-size:14px; } .pokemon-team-board-v2332-roster>header p { max-width:295px; margin:2px 0 0; color:#6f8997; font-size:10px; line-height:1.35; text-align:right; } .pokemon-team-board-v2332-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .pokemon-team-board-v2332-member { display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-width:0; min-height:132px; overflow:hidden; border:1px solid #d4e5e9; border-radius:14px; background:#fff; } .pokemon-team-board-v2332-member.is-lead { border-color:color-mix(in srgb,var(--species-accent,#199fd0) 52%,#c6e4dc); box-shadow:inset 3px 0 var(--species-accent,#199fd0); } .pokemon-team-board-v2332-member>header { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:29px; padding:6px 7px 0 10px; } .pokemon-team-board-v2332-member>header small { color:#7893a0; font-size:8px; } .pokemon-team-board-v2332-lead, .pokemon-team-board-v2332-lead-action { min-height:22px; padding:4px 6px; border:1px solid color-mix(in srgb,var(--species-accent,#199fd0) 36%,#b4dce5); border-radius:999px; background:color-mix(in srgb,var(--species-accent,#199fd0) 11%,#f8fdff); color:#22657d; font-size:8px; font-weight:900; white-space:nowrap; } .pokemon-team-board-v2332-lead-action { cursor:pointer; } .pokemon-team-board-v2332-lead-action:hover:not(:disabled) { border-color:var(--species-accent,#199fd0); color:#0f799d; } .pokemon-team-board-v2332-lead-action:disabled { cursor:not-allowed; opacity:.5; } .pokemon-team-board-v2332-view { display:grid; grid-template-columns:52px minmax(0,1fr); gap:7px; align-items:center; min-width:0; padding:2px 9px 7px; border:0; background:transparent; color:var(--pokemon-hub-ink); text-align:left; cursor:pointer; } .pokemon-team-board-v2332-view:hover .pokemon-team-board-v2332-copy>b { color:var(--species-accent,#137fa8); } .pokemon-team-board-v2332-portrait { display:grid; place-items:center; width:50px; height:50px; overflow:hidden; border-radius:13px; background:radial-gradient(circle at 35% 24%,#fff,#e8f4f6); } .pokemon-team-board-v2332-portrait-image, .pokemon-team-board-v2332-portrait-image img { width:53px!important; height:53px!important; object-fit:contain; } .pokemon-team-board-v2332-copy { display:grid; min-width:0; gap:2px; } .pokemon-team-board-v2332-copy>b { overflow:hidden; color:#183f57; font-size:12px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; } .pokemon-team-board-v2332-copy>b>i { margin-left:3px; color:#d99523; font-size:10px; font-style:normal; } .pokemon-team-board-v2332-copy>small { overflow:hidden; color:#6d8998; font-size:8px; letter-spacing:0; text-overflow:ellipsis; white-space:nowrap; } .pokemon-team-board-v2332-copy>em { display:flex; min-height:16px; overflow:hidden; font-style:normal; } .pokemon-team-board-v2332-copy>.pokemon-caught-ball-v2202 { min-width:0; margin-top:0; } .pokemon-team-board-v2332-copy>.pokemon-caught-ball-v2202 small { font-size:6px; } .pokemon-team-board-v2332-copy>.pokemon-caught-ball-v2202 b { font-size:8px; } .pokemon-team-board-v2332-member>footer { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px; padding:6px 9px 8px; border-top:1px solid #edf3f4; } .pokemon-team-board-v2332-member>footer>span { display:grid; grid-template-columns:1fr auto; gap:2px 4px; align-items:baseline; min-width:0; } .pokemon-team-board-v2332-member>footer small { color:#7893a0; font-size:8px; letter-spacing:0; } .pokemon-team-board-v2332-member>footer b { overflow:hidden; color:#28566d; font-size:10px; text-align:right; text-overflow:ellipsis; white-space:nowrap; } .pokemon-team-board-v2332-member>footer b>em { color:#6e92a0; font-size:7px; font-style:normal; } .pokemon-team-board-v2332-member>footer i { grid-column:1/-1; display:block; height:3px; overflow:hidden; border-radius:99px; background:#e4eef0; } .pokemon-team-board-v2332-member>footer i>em { display:block; height:100%; border-radius:inherit; background:var(--species-accent,#36bd83); } .pokemon-team-board-v2332-empty-roster { grid-column:1/-1; margin:0; padding:13px; border:1px dashed #cde0e5; border-radius:12px; color:#708997; font-size:11px; text-align:center; } .pokemon-team-board-v2332-footer { display:grid; grid-template-columns:43px minmax(0,1fr) minmax(138px,165px); gap:10px; align-items:center; padding:10px 12px; border:1px solid #cfe3e7; border-radius:15px; background:linear-gradient(100deg,#f6fcfb,#fff); } .pokemon-team-board-v2332-footer>span { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#e2f3ed; } .pokemon-team-board-v2332-footer>div { display:grid; gap:2px; min-width:0; } .pokemon-team-board-v2332-footer>div>b { color:#235d68; font-size:12px; } .pokemon-team-board-v2332-footer>div>p { margin:0; color:#698693; font-size:9px; line-height:1.35; } .pokemon-team-board-v2332-footer>aside { display:grid; grid-template-columns:1fr auto; gap:2px 6px; min-width:0; padding-left:10px; border-left:1px solid #dbecee; } .pokemon-team-board-v2332-footer>aside small { color:#5d8390; font-size:8px; } .pokemon-team-board-v2332-footer>aside>b { color:#157a62; font-size:15px; text-align:right; } .pokemon-team-board-v2332-footer>aside>b>em { color:#6b9298; font-size:8px; font-style:normal; } .pokemon-team-board-v2332-footer>aside>i { grid-column:1/-1; display:block; height:5px; overflow:hidden; border-radius:99px; background:#deeee9; } .pokemon-team-board-v2332-footer>aside>i>em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2bb58a,#65d3af); } .pokemon-team-board-v2332-footer>aside>span { grid-column:1/-1; overflow:hidden; color:#418071; font-size:9px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; } .pokemon-team-board-v2332-battle-note { margin:0; padding:9px 11px; border:1px solid #f0d6a2; border-radius:12px; background:#fff9ed; color:#89692f; font-size:10px; line-height:1.35; } @media (max-width:960px) { .pokemon-team-board-v2332-focus { grid-template-columns:112px minmax(0,1fr) minmax(145px,180px) auto; } .pokemon-team-board-v2332-focus-image, .pokemon-team-board-v2332-focus-image img { width:110px!important; height:112px!important; } .pokemon-team-board-v2332-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:680px) { .pokemon-roster-console-v2327.pokemon-team-board-v2332 { padding:12px; border-radius:18px; } .pokemon-team-board-v2332-head { min-height:48px; margin-bottom:10px; padding-bottom:10px; } .pokemon-team-board-v2332-head h1 { font-size:21px; } .pokemon-team-board-v2332-head>strong { padding:7px 9px; } .pokemon-team-board-v2332-focus { grid-template-columns:90px minmax(0,1fr); min-height:139px; } .pokemon-team-board-v2332-focus-portrait { padding-top:3px; } .pokemon-team-board-v2332-focus-image, .pokemon-team-board-v2332-focus-image img { width:91px!important; height:104px!important; } .pokemon-team-board-v2332-focus-copy { padding:12px 10px 8px 0; } .pokemon-team-board-v2332-focus-copy>b { font-size:20px; } .pokemon-team-board-v2332-focus-vitals { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 10px; padding:5px 10px 10px; border-top:1px solid rgba(255,255,255,.12); border-left:0; } .pokemon-team-board-v2332-focus-vitals>span { grid-template-columns:1fr auto; } .pokemon-team-board-v2332-focus>button { position:absolute; top:9px; right:8px; margin:0; } .pokemon-team-board-v2332-roster { padding:10px; } .pokemon-team-board-v2332-roster>header { align-items:flex-end; margin-bottom:8px; } .pokemon-team-board-v2332-roster>header p { display:none; } .pokemon-team-board-v2332-member { min-height:122px; } .pokemon-team-board-v2332-footer { grid-template-columns:39px minmax(0,1fr); gap:8px; padding:9px 10px; } .pokemon-team-board-v2332-footer>aside { grid-column:1/-1; grid-template-columns:1fr auto; padding:8px 0 0; border-top:1px solid #deedef; border-left:0; } } @media (max-width:370px) { .pokemon-team-board-v2332-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .pokemon-team-board-v2332-member { min-height:104px; } .pokemon-team-board-v2332-view { grid-template-columns:42px minmax(0,1fr); gap:5px; padding:2px 6px 6px; } .pokemon-team-board-v2332-portrait { width:40px; height:40px; border-radius:10px; } .pokemon-team-board-v2332-portrait-image, .pokemon-team-board-v2332-portrait-image img { width:43px!important; height:43px!important; } .pokemon-team-board-v2332-copy>b { font-size:11px; } .pokemon-team-board-v2332-member>footer { gap:4px; padding:5px 6px 6px; } } /* PokéCenter Box v2.33.2 — transfers live in one focused service surface, deliberately separate from the portable Team board above. */ .pokemon-center-box-v2332 { display:grid; grid-template-rows:auto minmax(0,1fr); min-height:100%; padding:18px; border:1px solid rgba(137,188,205,.45); border-radius:24px; background:radial-gradient(circle at 96% 2%,rgba(73,205,183,.17),transparent 26%),linear-gradient(145deg,#fbfeff,#edf7f7); box-shadow:0 12px 32px rgba(12,61,77,.1); color:var(--pokemon-hub-ink); } .pokemon-center-box-v2332, .pokemon-center-box-v2332 * { box-sizing:border-box; } .pokemon-center-box-v2332 button, .pokemon-center-box-v2332 input { font:inherit; } .pokemon-center-box-v2332-head { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; margin:0 0 14px; padding:0 2px 13px; border-bottom:1px solid var(--pokemon-hub-line); } .pokemon-center-box-v2332-mobile-tabs { display:none; } .pokemon-center-box-v2332-head>span { display:grid; gap:2px; } .pokemon-center-box-v2332 small { color:#5c8190; font-size:9px; font-weight:900; letter-spacing:.08em; } .pokemon-center-box-v2332-head h2 { margin:0; color:#143c55; font-size:24px; letter-spacing:-.04em; } .pokemon-center-box-v2332-head p { margin:1px 0 0; color:#708a97; font-size:10px; font-weight:650; } .pokemon-center-box-v2332-head>strong { display:grid; min-width:72px; padding:7px 11px; border:1px solid #bce6df; border-radius:13px; background:#edfcf7; color:#138463; text-align:center; } .pokemon-center-box-v2332-head>strong>b { font-size:20px; line-height:1; } .pokemon-center-box-v2332-head>strong>small { margin-top:3px; color:#5e8c84; font-size:8px; letter-spacing:0; } .pokemon-center-box-v2332-layout { display:grid; grid-template-columns:minmax(252px,.72fr) minmax(380px,1.28fr); grid-template-rows:minmax(0,1fr) auto; gap:12px; min-width:0; } .pokemon-center-box-v2332-party, .pokemon-center-box-v2332-box, .pokemon-center-box-v2332-action { min-width:0; border:1px solid #cbe3e8; border-radius:18px; background:rgba(255,255,255,.84); } .pokemon-center-box-v2332-party { display:grid; grid-row:1/3; grid-template-rows:auto minmax(0,1fr); padding:12px; } .pokemon-center-box-v2332-party>header, .pokemon-center-box-v2332-box>header { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:35px; margin:0 0 10px; } .pokemon-center-box-v2332-party>header>span, .pokemon-center-box-v2332-box>header>span { display:grid; gap:2px; } .pokemon-center-box-v2332-party>header b, .pokemon-center-box-v2332-box>header b { color:#25536a; font-size:14px; } .pokemon-center-box-v2332-party>header>em { color:#76929d; font-size:9px; font-style:normal; text-align:right; } .pokemon-center-box-v2332-party>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:8px; min-height:0; } .pokemon-center-box-v2332-party-slot { display:grid; grid-template-columns:42px minmax(0,1fr); grid-template-rows:auto 1fr auto; column-gap:6px; align-items:center; min-width:0; min-height:88px; padding:8px; border:1px solid #d6e7eb; border-radius:14px; background:#fff; color:#204e65; text-align:left; cursor:pointer; transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease; } .pokemon-center-box-v2332-party-slot:hover { border-color:var(--species-accent,#1d9fcb); transform:translateY(-1px); } .pokemon-center-box-v2332-party-slot.is-selected { border-color:var(--species-accent,#1d9fcb); box-shadow:0 0 0 3px color-mix(in srgb,var(--species-accent,#1d9fcb) 13%,transparent); } .pokemon-center-box-v2332-party-slot.is-lead { background:linear-gradient(140deg,color-mix(in srgb,var(--species-accent,#1d9fcb) 10%,#fff),#fff); } .pokemon-center-box-v2332-party-slot>small { grid-column:1/-1; overflow:hidden; color:#6d8c99; font-size:8px; text-overflow:ellipsis; white-space:nowrap; } .pokemon-center-box-v2332-party-slot>span { grid-row:2/4; display:grid; place-items:center; width:40px; height:40px; overflow:hidden; border-radius:11px; background:radial-gradient(circle at 35% 24%,#fff,#e5f3f5); } .pokemon-center-box-v2332-party-slot>span>.pokemon-center-box-v2332-party-portrait, .pokemon-center-box-v2332-party-portrait, .pokemon-center-box-v2332-party-portrait img { width:44px!important; height:44px!important; object-fit:contain; } .pokemon-center-box-v2332-party-slot>b { overflow:hidden; color:#1d4b62; font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .pokemon-center-box-v2332-party-slot>em { overflow:hidden; color:#78909b; font-size:9px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; } .pokemon-center-box-v2332-party-slot.is-empty { display:grid; grid-template-columns:1fr; grid-template-rows:auto auto 1fr; gap:3px; border-style:dashed; background:#f8fcfc; cursor:default; } .pokemon-center-box-v2332-party-slot.is-empty>b { color:#6b8795; } .pokemon-center-box-v2332-party-slot.is-empty>span { width:auto; height:auto; border:0; background:transparent; color:#8ca4ae; font-size:9px; } .pokemon-center-box-v2332-box { display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:12px; } .pokemon-center-box-v2332-box>header { align-items:flex-start; } .pokemon-center-box-v2332-box>header>label { position:relative; display:block; width:min(176px,42%); } .pokemon-center-box-v2332-box input { width:100%; min-height:34px; padding:7px 29px 7px 10px; border:1px solid #cce2e7; border-radius:10px; outline:0; background:#f9fdfd; color:#214f65; font-size:10px; font-weight:700; } .pokemon-center-box-v2332-box input:focus { border-color:#30a7c9; box-shadow:0 0 0 3px rgba(48,167,201,.13); } .pokemon-center-box-v2332-box>header>label>i { position:absolute; top:9px; right:9px; width:15px; height:15px; color:#6f919d; pointer-events:none; } .pokemon-center-box-v2332-storage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(72px,1fr)); gap:7px; min-height:0; } .pokemon-center-box-v2332-storage-card { display:grid; grid-template-columns:49px minmax(0,1fr); gap:7px; align-items:center; min-width:0; min-height:72px; padding:7px; border:1px solid #d7e8eb; border-radius:13px; background:#fff; color:#244f65; text-align:left; cursor:pointer; transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease; } .pokemon-center-box-v2332-storage-card:hover { border-color:var(--species-accent,#1d9fcb); transform:translateY(-1px); } .pokemon-center-box-v2332-storage-card.is-selected { border-color:var(--species-accent,#1d9fcb); background:color-mix(in srgb,var(--species-accent,#1d9fcb) 9%,#fff); box-shadow:0 0 0 3px color-mix(in srgb,var(--species-accent,#1d9fcb) 12%,transparent); } .pokemon-center-box-v2332-storage-portrait { display:grid; place-items:center; width:48px; height:48px; overflow:hidden; border-radius:12px; background:radial-gradient(circle at 35% 22%,#fff,#e5f3f5); } .pokemon-center-box-v2332-storage-image, .pokemon-center-box-v2332-storage-image img { width:52px!important; height:52px!important; object-fit:contain; } .pokemon-center-box-v2332-storage-card>span:last-child { display:grid; min-width:0; gap:2px; } .pokemon-center-box-v2332-storage-card b { overflow:hidden; color:#1f4c62; font-size:10px; text-overflow:ellipsis; white-space:nowrap; } .pokemon-center-box-v2332-storage-card b>i { margin-left:2px; color:#d99b26; font-size:9px; font-style:normal; } .pokemon-center-box-v2332-storage-card small { overflow:hidden; color:#748e9b; font-size:8px; letter-spacing:0; text-overflow:ellipsis; white-space:nowrap; } .pokemon-center-box-v2332-storage-card em { display:flex; min-height:15px; overflow:hidden; font-style:normal; } .pokemon-center-box-v2332-storage-card .pokemon-caught-ball-v2202.is-center { min-width:0; margin-top:0; gap:3px; } .pokemon-center-box-v2332-storage-card .pokemon-caught-ball-v2202.is-center > .pokemon-caught-ball-art-v2202, .pokemon-center-box-v2332-storage-card .pokemon-caught-ball-v2202.is-center > .pokemon-caught-ball-art-v2202 > * { width:15px; height:15px; } .pokemon-center-box-v2332-storage-card .pokemon-caught-ball-v2202.is-center small { display:none; } .pokemon-center-box-v2332-storage-card .pokemon-caught-ball-v2202.is-center b { color:#60818f; font-size:7px; } .pokemon-center-box-v2332-empty-box { grid-column:1/-1; display:grid; place-items:center; margin:0; border:1px dashed #d3e5e8; border-radius:12px; color:#788f9b; font-size:10px; } .pokemon-center-box-v2332-box>footer { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:29px; margin-top:8px; color:#6b8895; font-size:9px; font-weight:750; } .pokemon-center-box-v2332-box>footer>div { display:flex; align-items:center; gap:6px; } .pokemon-center-box-v2332-box>footer button { display:grid; place-items:center; width:26px; height:26px; border:1px solid #cbe2e7; border-radius:8px; background:#fff; color:#1f708e; font-size:18px; line-height:1; cursor:pointer; } .pokemon-center-box-v2332-box>footer button:disabled { cursor:default; opacity:.42; } .pokemon-center-box-v2332-box>footer b { color:#557b8b; font-size:9px; } .pokemon-center-box-v2332-action { display:grid; grid-template-columns:minmax(0,1fr) minmax(246px,.9fr); gap:10px 12px; align-items:center; padding:11px 12px; } .pokemon-center-box-v2332-action>header { display:grid; gap:3px; min-width:0; } .pokemon-center-box-v2332-action>header>b { color:#215168; font-size:15px; } .pokemon-center-box-v2332-action>header>p { margin:0; color:#708b98; font-size:10px; line-height:1.35; } .pokemon-center-box-v2332-selection { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:8px; align-items:center; min-width:0; padding:7px; border:1px solid color-mix(in srgb,var(--species-accent,#1d9fcb) 30%,#cfe3e7); border-radius:13px; background:color-mix(in srgb,var(--species-accent,#1d9fcb) 7%,#faffff); } .pokemon-center-box-v2332-selection>span { display:grid; place-items:center; width:46px; height:46px; overflow:hidden; border-radius:11px; background:radial-gradient(circle at 35% 22%,#fff,#e5f3f5); } .pokemon-center-box-v2332-selection-image, .pokemon-center-box-v2332-selection-image img { width:50px!important; height:50px!important; object-fit:contain; } .pokemon-center-box-v2332-selection>div { display:grid; min-width:0; gap:2px; } .pokemon-center-box-v2332-selection>div>b { overflow:hidden; color:#204f66; font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .pokemon-center-box-v2332-selection>div>p { overflow:hidden; margin:0; color:#728d9a; font-size:9px; text-overflow:ellipsis; white-space:nowrap; } .pokemon-center-box-v2332-selection>button { min-height:31px; padding:6px 9px; border:1px solid #bcdde5; border-radius:9px; background:#fff; color:#176d8d; font-size:9px; font-weight:900; cursor:pointer; } .pokemon-center-box-v2332-selection.is-empty { grid-template-columns:28px minmax(0,1fr); background:#fbfefe; } .pokemon-center-box-v2332-selection.is-empty>span { width:27px; height:27px; border-radius:50%; background:#e5f2f4; color:#6e8c99; font-size:10px; font-weight:900; } .pokemon-center-box-v2332-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .pokemon-center-box-v2332-primary, .pokemon-center-box-v2332-secondary, .pokemon-center-box-v2332-release, .pokemon-center-box-v2332-release-confirm button { min-height:34px; padding:7px 10px; border-radius:10px; font-size:10px; font-weight:900; cursor:pointer; } .pokemon-center-box-v2332-primary { border:1px solid #168fbd; background:linear-gradient(135deg,#159fcf,#167fc2); color:#fff; box-shadow:0 5px 12px rgba(23,130,193,.16); } .pokemon-center-box-v2332-secondary { border:1px solid #bfdde3; background:#fff; color:#286477; } .pokemon-center-box-v2332-release { border:1px solid #efc5bf; background:#fff8f6; color:#bd584b; } .pokemon-center-box-v2332-primary:disabled, .pokemon-center-box-v2332-secondary:disabled { cursor:not-allowed; opacity:.48; } .pokemon-center-box-v2332-release-confirm { display:flex; flex-wrap:wrap; align-items:center; gap:5px; width:100%; padding:7px; border:1px solid #efc4bd; border-radius:10px; background:#fff8f6; } .pokemon-center-box-v2332-release-confirm>small { width:100%; color:#a35b51; letter-spacing:0; } .pokemon-center-box-v2332-release-confirm button:first-of-type { border:1px solid #d65f52; background:#d65f52; color:#fff; } .pokemon-center-box-v2332-release-confirm button:last-of-type { border:1px solid #e4c6c1; background:#fff; color:#8d655f; } .pokemon-center-box-v2332-protected { padding:7px 9px; border:1px solid #e8d78d; border-radius:10px; background:#fffbed; color:#88702f; font-size:9px; font-weight:800; } .pokemon-center-box-v2332-lock { grid-column:1/-1; margin:0; padding:7px 9px; border:1px solid #efd6a2; border-radius:10px; background:#fff9ed; color:#8a6b32; font-size:9px; line-height:1.3; } .pokemon-center-box-v2332.is-unavailable { grid-template-rows:auto minmax(0,1fr); } .pokemon-center-box-v2332.is-unavailable>header { align-self:start; } .pokemon-center-box-v2332.is-unavailable>div { display:grid; grid-template-columns:62px minmax(0,420px); gap:13px; align-content:center; justify-content:center; min-height:230px; } .pokemon-center-box-v2332.is-unavailable>div>span { display:grid; place-items:center; width:58px; height:58px; border-radius:17px; background:#e3f4f1; } .pokemon-center-box-v2332-service-icon { width:34px; height:34px; object-fit:contain; } .pokemon-center-box-v2332.is-unavailable section { display:grid; align-content:center; gap:4px; } .pokemon-center-box-v2332.is-unavailable section>b { color:#214f65; font-size:17px; } .pokemon-center-box-v2332.is-unavailable section>p { margin:0; color:#698692; font-size:11px; line-height:1.5; } @media (max-width:900px) { .pokemon-center-box-v2332-layout { grid-template-columns:minmax(220px,.68fr) minmax(330px,1.32fr); } } @media (max-width:700px) { .pokemon-center-box-v2332 { /* A phone must not reserve desktop-height tracks for an almost empty box. Keep the terminal as one compact, natural-height service surface so the selected Pokémon and its action sit in the same viewport. */ grid-template-rows:auto auto; align-content:start; min-height:auto; padding:12px; border-radius:18px; } .pokemon-center-box-v2332-head { min-height:50px; margin-bottom:10px; padding:0 56px 10px 0; } .pokemon-center-box-v2332-head h2 { font-size:20px; } .pokemon-center-box-v2332-head p { display:none; } .pokemon-center-box-v2332-head>strong { display:none; } .pokemon-center-box-v2332-mobile-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0 0 9px; padding:4px; border:1px solid #c9e2e7; border-radius:12px; background:#eaf5f6; } .pokemon-center-box-v2332-mobile-tabs>button { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:34px; padding:7px 10px; border:1px solid transparent; border-radius:9px; background:transparent; color:#537888; font-size:10px; font-weight:900; cursor:pointer; } .pokemon-center-box-v2332-mobile-tabs>button>b { color:inherit; font-size:11px; } .pokemon-center-box-v2332-mobile-tabs>button.is-active { border-color:#b7dce5; background:#fff; color:#176f90; box-shadow:0 2px 6px rgba(31,101,124,.1); } .pokemon-center-box-v2332-layout { grid-template-columns:1fr; grid-template-rows:auto auto auto; align-content:start; } .pokemon-center-box-v2332-party { grid-row:auto; min-height:0; } .pokemon-center-box-v2332-party>div { min-height:0; grid-template-columns:repeat(2,minmax(0,1fr)); } .pokemon-center-box-v2332-box { grid-template-rows:auto auto auto; align-content:start; min-height:0; } .pokemon-center-box-v2332-party.is-mobile-hidden, .pokemon-center-box-v2332-box.is-mobile-hidden { display:none; } .pokemon-center-box-v2332-storage-grid { /* The active page grows only with its cards: 2 stored Pokémon = one row; a full six-card page remains the intended 2 × 3 grid. */ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; /* A card can contain two type marks and its capture-ball provenance. 104px is the compact readable floor; it prevents those real game details from bleeding into the pager on a short two-card page. */ grid-auto-rows:104px; align-content:start; } .pokemon-center-box-v2332-storage-card { min-height:66px; grid-template-columns:43px minmax(0,1fr); padding:6px; } .pokemon-center-box-v2332-storage-portrait { width:42px; height:42px; border-radius:10px; } .pokemon-center-box-v2332-storage-image, .pokemon-center-box-v2332-storage-image img { width:46px!important; height:46px!important; } .pokemon-center-box-v2332-action { grid-template-columns:1fr; } .pokemon-center-box-v2332-selection { max-width:none; } .pokemon-team-board-v2332-head { padding-right:56px; } } @media (max-width:390px) { .pokemon-center-box-v2332-head>strong { min-width:58px; padding:7px; } .pokemon-center-box-v2332-party { padding:9px; } .pokemon-center-box-v2332-party>div { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .pokemon-center-box-v2332-party-slot { min-height:68px; grid-template-columns:36px minmax(0,1fr); grid-template-rows:auto auto; padding:6px; } .pokemon-center-box-v2332-party-slot>small { grid-column:2/-1; } .pokemon-center-box-v2332-party-slot>span { grid-row:1/3; } .pokemon-center-box-v2332-party-slot>em { grid-column:2; } .pokemon-center-box-v2332-party-slot>span { width:34px; height:34px; border-radius:9px; } .pokemon-center-box-v2332-party-portrait, .pokemon-center-box-v2332-party-portrait img { width:37px!important; height:37px!important; } .pokemon-center-box-v2332-box>header>label { width:48%; } } /* Expedition roster. A single namespace; no legacy team card classes. */ #gameScreen #sidePanel#sidePanel.is-team-panel { background:#fffdf7!important; color:#183445!important; border:1px solid #dce3dd!important; padding:20px!important; } #gameScreen #sidePanel#sidePanel.is-team-panel #sidePanelContent { padding:0!important; scrollbar-gutter:auto!important; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster { min-height:0; padding:0; color:#183445; font:400 14px/1.4 "Segoe UI",sans-serif; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster * { box-sizing:border-box; letter-spacing:normal; text-transform:none; font-family:inherit; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster button { font:600 13px/1.3 "Segoe UI",sans-serif; cursor:pointer; touch-action:manipulation; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster button:disabled { cursor:not-allowed; opacity:.55; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-head { display:flex!important; justify-content:space-between; align-items:center; gap:16px; min-height:56px; padding:0 60px 16px 0; margin:0; border-bottom:1px solid #dce3dd; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-head>span { display:flex; align-items:center; gap:12px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-icon,#gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-icon img { display:block; width:32px; height:32px; object-fit:contain; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster h1 { margin:0; color:#183445; font:700 26px/1.2 "Segoe UI",sans-serif; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-head>b { white-space:nowrap; font-size:20px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-head>b>small { color:#546c74; font-size:13px; font-weight:400; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-summary { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; padding:14px 0; color:#546c74; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-summary b { margin-left:6px; color:#207b69; font-size:18px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-summary small { font-size:12px; font-weight:400; color:#546c74; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member { min-width:0; border:1px solid #dce3dd; border-radius:16px; background:#fff; overflow:hidden; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member.is-lead { border-color:#d97659; box-shadow:inset 0 3px #db513b; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member>header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px 0; height:34px; gap:8px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member>header small { color:#546c74; font-size:12px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-lead { padding:3px 8px; border-radius:6px; background:#f9e9e0; color:#a64430; font-size:12px; font-weight:600; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-view { display:grid; grid-template-columns:88px minmax(0,1fr); gap:10px; align-items:center; width:100%; min-height:104px; padding:8px 12px; background:transparent; border:0; color:#183445; text-align:left; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-view:hover { background:#faf7f0; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-art { display:grid; place-items:center; width:88px; height:88px; border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--dex-accent,#b6cbbd) 12%,white),transparent 70%); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-image,#gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-image img { width:88px!important; height:88px!important; max-width:88px!important; max-height:88px!important; object-fit:contain!important; transform:none!important; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-copy { display:grid; gap:4px; min-width:0; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-copy>b { color:#183445; font-size:17px; overflow-wrap:anywhere; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-copy>small { color:#546c74; font-size:13px; font-weight:400; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-types { display:flex; flex-wrap:wrap; gap:4px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-types .pokemon-type-badge { font-size:11px!important; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-vitals { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:2px 14px 12px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-vitals>span { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px; min-width:0; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-vitals small { color:#546c74; font-size:12px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-vitals b { color:#183445; font-size:14px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-vitals i { grid-column:1/-1; display:block; height:4px; border-radius:5px; background:#e5ebe7; overflow:hidden; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-vitals i>em { display:block; height:100%; background:#289d82; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-vitals>span>em { grid-column:1/-1; color:#546c74; font-size:12px; font-style:normal; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-moves { display:flex; align-items:center; gap:10px; padding:0 14px 12px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-moves>small { color:#546c74; font-size:12px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-skills { display:flex; align-items:center; gap:6px; padding:0; margin:0; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-skills .pokemon-skill-orb { width:28px!important; height:28px!important; padding:0!important; border:0!important; border-radius:8px!important; box-shadow:none!important; background:transparent!important; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-skills .pokemon-skill-orb-icon,#gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-skills img { width:28px!important; height:28px!important; object-fit:contain!important; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-skills .pokemon-skill-orb::after { display:none!important; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member>footer { display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid #edf0ea; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member>footer button { min-height:38px; padding:7px 8px; border:1px solid #e3ded3; border-radius:9px; background:#f6f2e9; color:#183445; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member>footer .exp-roster-set-lead { flex:1; border-color:transparent; color:#49696d; background:transparent; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member>footer>span { flex:1; text-align:center; color:#a64430; font-size:12px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member>footer button:hover { background:#f5e4da; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-note { display:flex; align-items:center; gap:10px; margin-top:16px; padding:12px 0 0; border-top:1px solid #dce3dd; color:#546c74; font-size:13px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-note .exp-roster-icon,#gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-note .exp-roster-icon img { width:26px; height:26px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-empty { grid-column:1/-1; padding:32px; text-align:center; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-empty>.exp-roster-icon { margin:0 auto; width:48px; height:48px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-empty h2 { font-size:20px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-empty p,#gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-battle-note { color:#546c74; } @media(min-width:761px) and (min-height:561px) { #gameScreen #sidePanel#sidePanel.is-team-panel { width:min(1060px,calc(100vw - 48px))!important; max-width:none!important; height:auto!important; max-height:calc(100dvh - 48px)!important; } #gameScreen #sidePanel#sidePanel.is-team-panel #sidePanelContent { height:auto!important; max-height:calc(100dvh - 90px)!important; } } @media(max-width:1000px) { #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:600px) { #gameScreen #sidePanel#sidePanel.is-team-panel { padding:14px!important; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-grid { grid-template-columns:1fr; gap:10px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-head { padding-right:44px; gap:8px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-head>span { gap:7px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster h1 { font-size:22px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-head>b { font-size:17px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-head>b>small { display:block; font-size:11px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-summary { font-size:12px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-view { grid-template-columns:76px minmax(0,1fr); min-height:84px; padding:4px 12px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-art,#gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-image,#gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-image img { width:76px!important; height:76px!important; max-width:76px!important; max-height:76px!important; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member>footer button { min-height:44px; } } /* pk-style-source:102 */ /* /world-expedition-v2340.css */ /* World-only presentation contract. Existing battle and window styles stay isolated. This file owns HUD geometry; do not add HUD rules to window patch stylesheets. */ body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] { --exp-paper:#ffffff; --exp-ink:#17384f; --exp-muted:#546c74; --exp-line:#cbe1f0; --exp-accent:#1684d9; --exp-shadow:0 5px 20px #152e3824; --exp-gap:20px; --exp-map-width:284px; --exp-map-height:150px; --exp-goal-top:274px; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-topbar { position:absolute!important; inset:18px 20px auto!important; display:block!important; height:auto!important; padding:0!important; pointer-events:none!important; z-index:90!important; transform:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip { position:relative!important; display:grid!important; grid-template-columns:48px minmax(0,1fr)!important; gap:12px!important; width:284px!important; min-width:0!important; max-width:none!important; min-height:0!important; padding:14px!important; border:1px solid var(--exp-line)!important; border-radius:18px!important; background:var(--exp-paper)!important; color:var(--exp-ink)!important; box-shadow:var(--exp-shadow)!important; pointer-events:auto!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip::before,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip::after { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-avatar { width:48px!important; height:48px!important; min-width:0!important; margin:0!important; border-radius:50%!important; grid-column:1!important; grid-row:1!important; align-self:start!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-copy { display:flex!important; flex-direction:column!important; gap:8px!important; min-width:0!important; width:auto!important; padding:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-identity { display:flex!important; gap:8px!important; align-items:baseline!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldPlayerName { font:700 16px/1.2 "Segoe UI",sans-serif!important; color:var(--exp-ink)!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldPlayerLevel { font:600 12px/1.2 "Segoe UI",sans-serif!important; color:var(--exp-muted)!important; white-space:nowrap!important; border:0!important; padding:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-meta,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-open-hint,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .instance-chip { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-progress { display:grid!important; grid-template-columns:18px minmax(30px,1fr) auto!important; align-items:center!important; gap:6px!important; width:100%!important; height:16px!important; min-height:0!important; margin:0!important; padding:0!important; border:0!important; background:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-progress>small { display:block!important; width:18px!important; height:18px!important; margin:0!important; padding:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-progress>small>span { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-progress img { position:static!important; display:block!important; width:18px!important; height:18px!important; max-width:18px!important; max-height:18px!important; object-fit:contain!important; transform:none!important; filter:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-progress>i { display:block!important; width:100%!important; height:5px!important; margin:0!important; border:0!important; border-radius:8px!important; background:#e2e8e3!important; overflow:hidden!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-progress>i>b { display:block!important; height:100%!important; background:#329c99!important; border-radius:8px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-progress.is-energy>i>b { background:#dda62d!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-progress>em { display:block!important; min-width:44px!important; font:600 11px/1 "Segoe UI",sans-serif!important; color:var(--exp-muted)!important; font-variant-numeric:tabular-nums!important; white-space:nowrap!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-topbar>#worldWallet { position:absolute!important; top:0!important; left:50%!important; right:auto!important; transform:translateX(-50%)!important; display:flex!important; align-items:center!important; width:auto!important; min-width:210px!important; height:44px!important; min-height:0!important; padding:4px 8px!important; gap:0!important; border:1px solid var(--exp-line)!important; border-radius:14px!important; background:var(--exp-paper)!important; box-shadow:var(--exp-shadow)!important; pointer-events:auto!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-wallet-currency { display:flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; min-width:92px!important; height:32px!important; padding:0 6px!important; border:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-wallet-currency+.world-wallet-currency { border-left:1px solid var(--exp-line)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-wallet-currency-icon,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-wallet-currency-icon img { position:static!important; width:26px!important; height:26px!important; min-width:0!important; object-fit:contain!important; transform:none!important; filter:none!important; background:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-wallet-currency>b { font:700 14px/1 "Segoe UI",sans-serif!important; color:var(--exp-ink)!important; min-width:20px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-wallet-currency>button { width:28px!important; height:32px!important; min-height:0!important; padding:0!important; font:600 18px/1 "Segoe UI",sans-serif!important; color:var(--exp-muted)!important; border:0!important; background:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #notificationCenterButton { position:absolute!important; top:0!important; left:296px!important; right:auto!important; width:42px!important; height:42px!important; min-width:0!important; min-height:0!important; padding:10px!important; border:1px solid var(--exp-line)!important; border-radius:14px!important; color:var(--exp-ink)!important; background:var(--exp-paper)!important; box-shadow:var(--exp-shadow)!important; pointer-events:auto!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #notificationCenterButton>span { display:block!important; width:22px!important; height:22px!important; background:url('/assets/v8/ui/menu-notifications-v2290.png') center/contain no-repeat!important; font-size:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #playerStaminaHud { position:absolute!important; top:128px!important; left:20px!important; right:auto!important; width:284px!important; height:28px!important; min-height:0!important; padding:4px 12px!important; display:flex!important; gap:8px!important; border:0!important; border-radius:10px!important; background:var(--exp-paper)!important; box-shadow:none!important; opacity:1!important; transform:none!important; z-index:89!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #playerStaminaHud.is-full:not(.is-sprinting) { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-stamina-title { display:flex!important; align-items:center!important; gap:6px!important; min-width:90px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-stamina-title img { width:18px!important; height:18px!important; object-fit:contain!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-stamina-title small { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-stamina-title b { font:600 11px/1 "Segoe UI",sans-serif!important; color:var(--exp-muted)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-stamina-meter { display:flex!important; gap:8px!important; align-items:center!important; flex:1!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-stamina-meter>i { height:4px!important; width:100%!important; background:#e2e8e3!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-stamina-meter>i>b { display:block!important; height:100%!important; background:#2e9f84!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-stamina-meter>em { font:600 11px/1 "Segoe UI",sans-serif!important; color:var(--exp-muted)!important; white-space:nowrap!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget { position:absolute!important; top:var(--exp-goal-top)!important; left:auto!important; right:20px!important; bottom:auto!important; display:block!important; width:284px!important; min-width:0!important; height:auto!important; max-height:none!important; padding:14px!important; margin:0!important; border:1px solid var(--exp-line)!important; border-radius:16px!important; background:var(--exp-paper)!important; color:var(--exp-ink)!important; box-shadow:var(--exp-shadow)!important; transform:none!important; z-index:88!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget::before,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget::after { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-head img { width:26px; height:26px; object-fit:contain; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-head>span { flex:1; font:600 12px/1.3 "Segoe UI",sans-serif; color:var(--exp-muted); } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-head button { width:30px; height:30px; border:0; background:none; color:var(--exp-muted); font:600 17px/1 "Segoe UI",sans-serif; border-radius:8px; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-title { display:block; margin:0 0 5px; font:700 15px/1.3 "Segoe UI",sans-serif; color:var(--exp-ink); } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-next { margin:0; font:400 13px/1.4 "Segoe UI",sans-serif; color:var(--exp-muted); } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-foot>small { font:400 12px/1.3 "Segoe UI",sans-serif; color:var(--exp-muted); } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-route { padding:8px 11px; border:0; border-radius:9px; background:#e2f1fd; color:#166ca8; font:600 12px/1.2 "Segoe UI",sans-serif; white-space:nowrap; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget.is-collapsed .exp-goal-body { display:none; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget.is-collapsed .exp-goal-head { margin:0; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #mobileQuestLauncher { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapShell { position:absolute!important; top:18px!important; right:20px!important; left:auto!important; bottom:auto!important; display:flex!important; flex-direction:column!important; width:var(--exp-map-width)!important; height:auto!important; padding:8px!important; gap:6px!important; border:1px solid var(--exp-line)!important; border-radius:18px!important; background:var(--exp-paper)!important; box-shadow:var(--exp-shadow)!important; overflow:visible!important; transform:none!important; z-index:92!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-topbar { position:static!important; display:flex!important; gap:6px!important; width:100%!important; height:32px!important; min-height:32px!important; padding:0 3px!important; border:0!important; background:none!important; color:var(--exp-ink)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapLocation { font:600 12px/1.3 "Segoe UI",sans-serif!important; color:var(--exp-ink)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-server-meta { display:flex!important; align-items:center!important; flex-shrink:0!important; gap:5px!important; color:var(--exp-muted)!important; font:600 12px/1 "Segoe UI",sans-serif!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-map-surface { position:relative!important; display:block!important; width:100%!important; height:var(--exp-map-height)!important; min-height:0!important; aspect-ratio:auto!important; padding:0!important; border:0!important; border-radius:11px!important; overflow:hidden!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-frame { position:absolute!important; inset:0!important; display:block!important; width:100%!important; height:100%!important; min-height:0!important; border:0!important; border-radius:inherit!important; overflow:hidden!important; background:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapPreview { position:absolute!important; inset:0!important; display:block!important; width:100%!important; height:100%!important; object-fit:fill!important; transform:none!important; border-radius:inherit!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-grid,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-revision { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-bottombar { display:flex!important; height:32px!important; min-height:32px!important; padding:0!important; background:none!important; border:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-channel { min-height:32px!important; height:32px!important; padding:0 3px!important; background:none!important; color:var(--exp-muted)!important; border:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-channel-copy small,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-channel>svg { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-channel-copy b { font:600 13px/1 "Segoe UI",sans-serif!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelPopulation { font-size:11px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapPing { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelMenu { position:absolute!important; height:auto!important; min-height:0!important; flex:none!important; box-sizing:border-box!important; z-index:20!important; transform:none!important; top:calc(100% + 8px)!important; right:0!important; left:auto!important; width:var(--exp-map-width)!important; padding:14px!important; border:1px solid var(--exp-line)!important; border-radius:16px!important; background:var(--exp-paper)!important; box-shadow:var(--exp-shadow)!important; color:var(--exp-ink)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopDock { position:absolute!important; inset:auto 20px 20px auto!important; display:grid!important; grid-template-columns:repeat(5,64px)!important; gap:6px!important; width:auto!important; padding:8px 10px!important; min-height:0!important; border:1px solid var(--exp-line)!important; border-radius:20px!important; background:var(--exp-paper)!important; box-shadow:var(--exp-shadow)!important; z-index:95!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopDock>button,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock>button { display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:3px!important; width:auto!important; min-width:0!important; max-width:none!important; height:58px!important; min-height:0!important; padding:4px!important; border:0!important; border-radius:12px!important; background:transparent!important; color:var(--exp-muted)!important; box-shadow:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopDock>button::before,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopDock>button::after,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock>button::before,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock>button::after { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopDock>button:hover,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopDock>button.is-active,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock>button.is-active { background:#e3f2fd!important; color:#166ca8!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopDock>button>span,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock>button>span { width:32px!important; height:32px!important; margin:0!important; padding:0!important; background:none!important; border:0!important; box-shadow:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopDock img,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock img { width:32px!important; height:32px!important; max-width:32px!important; max-height:32px!important; object-fit:contain!important; transform:none!important; filter:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopDock>button>b,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock>button>b { display:block!important; font:600 11px/1.3 "Segoe UI",sans-serif!important; color:inherit!important; text-transform:none!important; letter-spacing:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopMoreMenu.world-rail { inset:auto 20px 106px auto!important; width:380px!important; max-width:calc(100% - 40px)!important; padding:12px!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; border:1px solid var(--exp-line)!important; border-radius:18px!important; background:var(--exp-paper)!important; box-shadow:var(--exp-shadow)!important; z-index:190!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopMoreMenu.world-rail button { min-height:68px!important; height:auto!important; background:none!important; border:0!important; box-shadow:none!important; color:var(--exp-ink)!important; border-radius:12px!important; font-family:"Segoe UI",sans-serif!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopMoreMenu.world-rail button:hover { background:#e3f2fd!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopMoreMenu.world-rail button>span { background:none!important; box-shadow:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopMoreMenu.world-rail img { object-fit:contain!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction { position:absolute!important; left:50%!important; right:auto!important; bottom:26px!important; transform:translateX(-50%)!important; width:auto!important; min-width:260px!important; max-width:400px!important; height:64px!important; min-height:0!important; display:none!important; align-items:center!important; gap:10px!important; padding:8px!important; border:1px solid var(--exp-line)!important; border-radius:18px!important; background:var(--exp-paper)!important; color:var(--exp-ink)!important; box-shadow:var(--exp-shadow)!important; z-index:94!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-ready { display:flex!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction::before,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction::after { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionVisual { display:block!important; flex:0 0 42px!important; width:42px!important; height:42px!important; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionVisual img,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionVisual .context-pokemon-emoji { width:42px!important; height:42px!important; object-fit:contain!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .interaction-card__copy { display:flex!important; flex-direction:column!important; gap:4px!important; min-width:0!important; padding:0!important; flex:1!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionTarget { font:700 14px/1.2 "Segoe UI",sans-serif!important; color:var(--exp-ink)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionMeta { font:400 12px/1.2 "Segoe UI",sans-serif!important; color:var(--exp-muted)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .interaction-card__cta { display:flex!important; align-items:center!important; gap:8px!important; height:46px!important; padding:10px 12px!important; border:0!important; border-radius:12px!important; background:var(--exp-accent)!important; color:white!important; box-shadow:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionKey { display:grid!important; place-items:center!important; flex:0 0 auto!important; min-width:38px!important; width:auto!important; height:38px!important; padding:0 10px!important; border:1px solid #fff!important; border-bottom:3px solid #cbbba8!important; border-radius:8px!important; background:#ffffff!important; color:#17384f!important; box-shadow:0 2px 3px #75251530!important; font:800 16px/1 "Segoe UI",sans-serif!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionIcon { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionLabel { font:700 13px/1.2 "Segoe UI",sans-serif!important; color:white!important; white-space:nowrap!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-team { position:absolute; left:auto; right:20px; bottom:108px; display:flex; align-items:center; gap:6px; padding:8px; border:1px solid var(--exp-line); border-radius:18px; background:var(--exp-paper); box-shadow:var(--exp-shadow); z-index:93; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-team button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:44px; height:56px; padding:3px; border:0; border-radius:10px; background:none; color:var(--exp-muted); } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-team button:hover,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-team .is-lead { background:#e3f2fd; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-team img { width:36px; height:36px; object-fit:contain; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-team .exp-team-hp { width:32px; height:3px; background:#dce6df; border-radius:4px; overflow:hidden; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-team .exp-team-hp i { display:block; height:100%; background:#279c82; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-team .exp-team-empty { border:1px dashed var(--exp-line); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font:500 12px/1 "Segoe UI",sans-serif; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-team-first { width:auto!important; padding:8px 12px!important; font:600 13px/1.3 "Segoe UI",sans-serif!important; flex-direction:row!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel.is-minimized { left:20px!important; right:auto!important; bottom:20px!important; top:auto!important; width:188px!important; height:44px!important; min-height:0!important; border:1px solid color-mix(in srgb,var(--exp-line) 85%, transparent)!important; border-radius:15px!important; background:linear-gradient(145deg,color-mix(in srgb,var(--exp-paper) 90%,#ffffff) 0%,var(--exp-paper) 100%)!important; color:var(--exp-ink)!important; box-shadow:0 10px 22px rgba(20,34,52,.14)!important; transition:transform .16s ease, box-shadow .16s ease!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel.is-minimized .chat-head { min-height:42px!important; height:42px!important; background:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel.is-minimized .chat-head b { color:var(--exp-ink)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #partyHud { top:350px!important; left:20px!important; width:284px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"]:has(#desktopMoreMenu.is-desktop-menu-open) #contextAction { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"]:has(#sidePanel.is-open:not(.is-settings-panel)) .exp-team,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"]:has(#editorPanel.is-open) .exp-team { visibility:hidden; } @media(max-width:1100px) and (min-width:761px) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-topbar>#worldWallet { left:350px!important; transform:none!important; min-width:190px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction { bottom:198px!important; } } @media(max-width:760px),(pointer:coarse) and (max-height:560px) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-topbar { inset:calc(10px + env(safe-area-inset-top)) 12px auto!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip { width:min(238px,calc(100vw - 136px))!important; padding:10px!important; gap:8px!important; grid-template-columns:36px minmax(0,1fr)!important; border-radius:15px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-avatar { width:36px!important; height:36px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-copy { gap:6px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldPlayerName { font-size:14px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldPlayerLevel { font-size:11px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-identity { flex-wrap:wrap!important; gap:2px 7px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-progress { grid-template-columns:14px minmax(10px,1fr) auto!important; gap:4px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-progress img,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-progress>small { width:14px!important; height:14px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip-progress>em { font-size:10px!important; min-width:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-topbar>#worldWallet { top:112px!important; left:0!important; transform:none!important; min-width:0!important; height:34px!important; padding:0 3px!important; border-radius:10px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-wallet-currency { min-width:76px!important; gap:4px!important; padding:0 3px!important; height:30px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-wallet-currency-icon,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-wallet-currency-icon img { width:20px!important; height:20px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-wallet-currency>b { font-size:12px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-wallet-currency>button { width:26px!important; height:30px!important; font-size:16px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #notificationCenterButton { top:113px!important; left:174px!important; width:32px!important; height:32px!important; padding:6px!important; border-radius:10px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #notificationCenterButton>span { width:20px!important; height:20px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #playerStaminaHud { top:calc(105px + env(safe-area-inset-top))!important; left:14px!important; width:150px!important; height:13px!important; padding:0!important; border-radius:8px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-stamina-title { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapShell { top:calc(12px + env(safe-area-inset-top))!important; right:12px!important; width:116px!important; height:116px!important; padding:4px!important; border-radius:50%!important; border:2px solid var(--exp-paper)!important; overflow:visible!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-map-surface { height:104px!important; width:104px!important; border-radius:50%!important; flex:none!important; overflow:hidden!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-topbar { position:absolute!important; top:calc(100% + 6px)!important; left:-2px!important; width:116px!important; height:24px!important; min-height:24px!important; padding:3px 7px!important; border-radius:10px!important; background:var(--exp-paper)!important; justify-content:center!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-place { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-bottombar { position:absolute!important; top:calc(100% + 34px)!important; left:-2px!important; width:116px!important; height:32px!important; padding:0 4px!important; border-radius:10px!important; background:var(--exp-paper)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelMenu { top:calc(100% + 72px)!important; right:-2px!important; width:min(284px,calc(100vw - 24px))!important; max-height:calc(100dvh - 280px)!important; overflow:auto!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget { top:calc(208px + env(safe-area-inset-top))!important; left:auto!important; right:12px!important; width:min(284px,calc(100% - 24px))!important; padding:10px 12px!important; border-radius:14px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-head { margin-bottom:5px; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-head img { width:22px; height:22px; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-head>span { font-size:12px; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-title { font-size:14px; margin-bottom:3px; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-next { font-size:12px; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-foot { margin-top:8px; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-route { min-height:36px; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-head button { width:36px; height:32px; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-team,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopDock { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock { position:absolute!important; inset:auto 8px calc(8px + env(safe-area-inset-bottom))!important; display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; width:auto!important; height:68px!important; min-height:0!important; padding:5px 4px!important; gap:0!important; border:1px solid var(--exp-line)!important; border-radius:18px!important; background:var(--exp-paper)!important; box-shadow:var(--exp-shadow)!important; z-index:212!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock>button { height:56px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock>button>span,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock img { width:28px!important; height:28px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock>button>b { font-size:10px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopMoreMenu.world-rail { left:8px!important; right:8px!important; bottom:calc(84px + env(safe-area-inset-bottom))!important; width:auto!important; max-width:none!important; padding:10px!important; z-index:211!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopMoreMenu.world-rail button { min-height:64px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction { left:auto!important; right:12px!important; bottom:calc(92px + env(safe-area-inset-bottom))!important; transform:none!important; min-width:0!important; max-width:calc(100% - 112px)!important; height:auto!important; min-height:58px!important; gap:7px!important; padding:7px!important; border-radius:14px!important; flex-wrap:wrap!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionVisual { width:30px!important; height:30px!important; flex-basis:30px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionVisual img,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionVisual .context-pokemon-emoji { width:30px!important; height:30px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionTarget { font-size:12px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionMeta { font-size:11px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .interaction-card__cta { height:36px!important; width:100%!important; justify-content:center!important; padding:8px!important; border-radius:9px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionKey { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #actionLabel { font-size:13px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"]:has(#sidePanel.is-open) #questWidget,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"]:has(#chatPanel.is-open:not(.is-minimized)) #questWidget,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"]:has(#editorPanel.is-open) #questWidget { visibility:hidden!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #partyHud { display:none!important; } } @media(max-height:560px) and (orientation:landscape) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-topbar { top:8px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .player-chip { width:220px!important; padding:8px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-topbar>#worldWallet { top:0!important; left:274px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #notificationCenterButton { top:0!important; left:230px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapShell { top:8px!important; width:92px!important; height:92px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-map-surface { width:80px!important; height:80px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget { top:184px!important; left:auto!important; right:12px!important; width:230px!important; padding:10px!important; max-height:calc(100dvh - 272px)!important; overflow:auto!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-next { display:none; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #playerStaminaHud { top:103px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock { left:auto!important; right:8px!important; width:330px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction { left:12px!important; right:auto!important; bottom:88px!important; width:340px!important; max-width:calc(100% - 276px)!important; } } html[data-mobile-keyboard="open"] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock { display:none!important; } @media(prefers-reduced-motion:reduce) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget { animation:none!important; transition:none!important; } } /* Explicit resets for legacy collapsed/mobile rules; battle has its own HUD. */ body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-topbar>#worldWallet { width:max-content!important; max-width:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget:not(.is-collapsed)>.exp-goal-body { display:block!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopMoreMenu.world-rail button[hidden] { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] :is(#desktopMoreMenu,#desktopDock,.mobile-dock,#notificationCenterButton,#worldMinimapShell) [hidden] { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock { transform:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock>button>b { max-width:none!important; text-overflow:clip!important; overflow:visible!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget .exp-goal-head>button { display:inline-flex!important; align-items:center!important; justify-content:center!important; align-self:center!important; margin:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopMoreMenu.world-rail button { display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:6px!important; padding:6px 4px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopMoreMenu.world-rail button>b { max-width:100%!important; white-space:normal!important; text-overflow:clip!important; text-align:center!important; font:600 11px/1.25 "Segoe UI",sans-serif!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopMoreMenu.world-rail button.desktop-menu-only { display:none!important; } @media(min-width:761px) and (min-height:561px) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopMoreMenu.world-rail button.desktop-menu-only { display:flex!important; } } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopMoreMenu.world-rail { transform:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #controlsTutorial { z-index:320!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget { max-width:none!important; min-height:0!important; overflow:hidden!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget>.exp-goal-head { display:flex!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget .exp-goal-head>button { position:static!important; inset:auto!important; transform:none!important; flex-shrink:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock::before,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock::after { display:none!important; } @media(max-width:760px) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #notificationCenterButton { left:194px!important; } } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget.is-collapsed>.exp-goal-head { display:flex!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #notificationCenterButton>span { border:0!important; border-radius:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #notificationCenterButton>span::after { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .exp-goal-foot>small { letter-spacing:0!important; text-transform:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelPopulation { color:var(--exp-muted)!important; background:#eaf0ea!important; } @media(min-width:761px) and (min-height:561px) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"]:has(#playerStaminaHud.is-full:not(.is-sprinting)) #questWidget { top:var(--exp-goal-top)!important; } } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"]:has(#controlsTutorial.is-open) #contextAction { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel.is-minimized { min-width:0!important; max-width:188px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #notificationCenterButton::before,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #notificationCenterButton::after { display:none!important; } body.is-battling #gameScreen[data-world-hud="v2340"] #worldTeamQuick { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapShell { min-width:0!important; max-width:none!important; min-height:0!important; max-height:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget [data-quest-widget-collapse] { width:32px!important; height:32px!important; min-width:32px!important; padding:0!important; background:none!important; background-image:none!important; border:0!important; border-radius:8px!important; font:600 18px/1 "Segoe UI",sans-serif!important; color:#49606a!important; box-shadow:none!important; } /* Notifications are a map-adjacent popover: the button stays beside the minimap, and its contents deliberately layer above the map instead of being hidden by it. */ body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #notificationCenterButton { top:18px!important; right:calc(20px + var(--exp-map-width) + 10px)!important; left:auto!important; z-index:96!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #notificationCenter { position:fixed!important; z-index:240!important; top:18px!important; right:20px!important; bottom:auto!important; left:auto!important; width:min(var(--exp-map-width),calc(100vw - 40px))!important; max-height:calc(100dvh - 36px)!important; transform-origin:top right!important; } @media(max-width:760px),(pointer:coarse) and (max-height:560px) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #notificationCenterButton { display:grid!important; top:calc(12px + env(safe-area-inset-top))!important; right:calc(20px + env(safe-area-inset-right) + 116px)!important; left:auto!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #notificationCenter.is-open { position:fixed!important; z-index:240!important; top:calc(12px + env(safe-area-inset-top))!important; right:calc(12px + env(safe-area-inset-right))!important; bottom:auto!important; left:auto!important; width:min(360px,calc(100vw - 24px))!important; height:auto!important; max-height:calc(100dvh - 24px)!important; border-radius:18px!important; } } /* Shared map controls: same palette and touch targets on desktop and phone. */ body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-place { flex:1!important; min-width:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapClock { color:var(--exp-muted)!important; font:600 12px/1 "Segoe UI",sans-serif!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapWeatherIcon { width:24px!important; height:24px!important; background:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapWeatherIcon svg { width:24px!important; height:24px!important; color:#9a7323!important; --weather-fill:#dac78944; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelMenu>header { display:grid!important; gap:4px!important; margin:0 0 10px!important; padding:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelMenu:not([hidden]) { display:block!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelMenu>header b { font:700 14px/1.3 "Segoe UI",sans-serif!important; color:var(--exp-ink)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelMenu>header small { font:400 12px/1.3 "Segoe UI",sans-serif!important; color:var(--exp-muted)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelList { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelList>button { min-height:62px!important; border:1px solid var(--exp-line)!important; border-radius:12px!important; padding:10px!important; background:#ffffff!important; color:var(--exp-ink)!important; box-shadow:none!important; opacity:1!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelList>button.is-current { background:#e7f2e9!important; border-color:#97b8a3!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelList>button:disabled:not(.is-current) { opacity:.55!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelList b { font:600 13px/1.2 "Segoe UI",sans-serif!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelList small,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelList em { font:400 11px/1.3 "Segoe UI",sans-serif!important; color:var(--exp-muted)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelList>button>span>i { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelList>button { display:flex!important; align-items:center!important; justify-content:space-between!important; text-align:left!important; gap:6px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelList>button>span { display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:3px!important; padding:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelList>button b { white-space:nowrap!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"]:has(#worldMinimapChannelMenu:not([hidden])) #questWidget { visibility:hidden!important; } @media(min-width:761px) and (min-height:561px) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel.is-minimized { width:202px!important; max-width:202px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel.is-minimized .chat-head { min-height:44px!important; height:44px!important; padding-right:10px!important; gap:6px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel.is-minimized .chat-head b { font:600 15px/1 "Segoe UI",sans-serif!important; letter-spacing:-.01em!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel.is-minimized:hover { transform:translateY(-1px)!important; box-shadow:0 14px 24px rgba(20,34,52,.18)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel:not(.is-minimized) { left:20px!important; bottom:20px!important; top:auto!important; right:auto!important; width:var(--chat-width,560px)!important; height:var(--chat-height,440px)!important; min-width:0!important; max-width:none!important; min-height:0!important; max-height:none!important; transform:none!important; container-type:inline-size; border:1px solid var(--exp-line)!important; border-radius:18px!important; background:var(--exp-paper)!important; box-shadow:var(--exp-shadow)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel .chat-head { cursor:default!important; padding-right:36px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel:not(.is-minimized) [data-chat-resize] { display:grid!important; position:absolute!important; top:2px!important; right:2px!important; bottom:auto!important; width:32px!important; height:32px!important; z-index:20!important; cursor:nesw-resize!important; touch-action:none!important; border:0!important; background:transparent!important; transform:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel [data-chat-resize]>span { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel [data-chat-resize]::before { display:block!important; content:""!important; width:12px; height:12px; border-top:3px solid #6d888f; border-right:3px solid #6d888f; border-radius:0 3px 0 0; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel>.chat-messenger-layout { grid-template-columns:minmax(0,1fr) 160px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel .chat-tabs { grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:0!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel .chat-tabs>button { min-width:0!important; padding:8px 3px!important; font:600 12px/1.2 "Segoe UI",sans-serif!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel .chat-tab-icon { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel .chat-message p { font-size:var(--chat-font-size,14px)!important; } } @container(max-width:580px) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel>.chat-messenger-layout { grid-template-columns:minmax(0,1fr)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel .chat-online-sidebar { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel .chat-conversation { border-right:0!important; } } @media(max-height:560px) and (orientation:landscape) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-topbar,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .world-minimap-bottombar { width:104px!important; left:-8px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget { top:174px!important; max-height:calc(100dvh - 252px)!important; overflow:auto!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #worldMinimapChannelMenu { max-height:calc(100dvh - 254px)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel [data-chat-resize] { display:none!important; } } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"]:has(#sidePanel.is-open) #contextAction { display:none!important; } /* World chat uses the same paper/ink contract even if the game's legacy theme is dark. */ body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel { --chat75-ink:#17384f!important; --chat75-copy:#49646d!important; --chat75-muted:#617a81!important; --chat75-line:#cbe1f0!important; --chat75-card:#ffffff!important; --chat75-soft:#f1f8fe!important; --chat75-hover:#e3f2fd!important; --chat75-panel:rgba(255,253,247,var(--chat-opacity,.96))!important; --chat75-accent:#167abc!important; --chat75-accent-strong:#166ca8!important; font-family:"Segoe UI",sans-serif!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel:not(.is-minimized) { background:var(--chat75-panel)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel .chat-head-actions>button { background:#f1f8fe!important; color:#49646d!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel>.chat-tabs>button.is-active { color:#166ca8!important; background:#e3f2fd!important; border-color:#ecd3c4!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel>.chat-tabs>button:not(.is-active) { color:#49646d!important; background:transparent!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel .chat-send-button { background:#1684d9!important; border-color:#1684d9!important; box-shadow:none!important; color:#fff!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel #chatForm,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel #chatInput { background:#ffffff!important; color:#17384f!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel .chat-online-sidebar { background:#f3f5ef!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel .chat-log-wrap { background:var(--chat75-panel)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel .chat-head,body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel .chat-tabs { background:var(--chat75-panel)!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel [data-chat-resize] { border-width:0!important; border-radius:0!important; background-image:none!important; clip-path:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel [data-chat-resize]::after { content:none!important; display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #chatPanel [data-chat-resize]::before { position:static!important; inset:auto!important; transform:none!important; background:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #sidePanel.is-team-panel::before { display:none!important; } /* /inventory-expedition-v2342.css: deferred, original cascade position */ @media all{:root[data-pk-style-slot="owner-103"]{}} /* pk-style-source:104 */ /* /windows-expedition-v2343.css */ /* Player windows, v2.34.3. */ :root { --win-paper:#ffffff; --win-card:#fff; --win-soft:#f1f8fe; --win-ink:#17384f; --win-muted:#5b788c; --win-line:#cbe1f0; --win-accent:#1684d9; --win-tint:#e3f2fd; --win-positive:#247a65; --win-focus:#1684d9; --win-shadow:0 24px 80px #15344440; } #app :is(#sidePanel:not(.is-inventory-panel),#editorPanel,#marketplaceModal,#tradeDialog,#worldChannelConfirm,#dialogueDialog,#socialInvite,#pvpInvite,#professorTransferDialog,#starterDialog,#questOfferV57,#controlsTutorial) { --theme-text:var(--win-ink); --theme-muted:var(--win-muted); --theme-accent:var(--win-accent); --theme-border:var(--win-line); --theme-card:var(--win-card); --theme-surface:var(--win-paper); --theme-surface-soft:var(--win-soft); color-scheme:light; color:var(--win-ink); font-family:"Segoe UI",sans-serif!important; text-shadow:none!important; } #app :is(#sidePanel:not(.is-inventory-panel),#editorPanel,#marketplaceModal,#tradeDialog,#worldChannelConfirm,#dialogueDialog,#socialInvite,#pvpInvite,#professorTransferDialog,#starterDialog,#questOfferV57,#controlsTutorial) :is(button,input,select,textarea,summary) { font-family:inherit!important; touch-action:manipulation; } #app :is(#sidePanel:not(.is-inventory-panel),#editorPanel,#marketplaceModal,#tradeDialog,#worldChannelConfirm,#dialogueDialog,#socialInvite,#pvpInvite,#professorTransferDialog,#starterDialog,#questOfferV57,#controlsTutorial) :is(button,input,select,textarea,summary):focus-visible { outline:3px solid var(--win-focus)!important; outline-offset:2px!important; } #app :is(#sidePanel:not(.is-inventory-panel),#editorPanel,#marketplaceModal,#tradeDialog,#worldChannelConfirm,#dialogueDialog,#socialInvite,#pvpInvite,#professorTransferDialog,#starterDialog,#questOfferV57,#controlsTutorial) :is(input:not([type=range]):not([type=radio]):not([type=checkbox]),select,textarea) { min-height:44px; min-width:0; max-width:100%; padding:10px 12px; border:1px solid var(--win-line)!important; border-radius:12px; background:var(--win-card)!important; color:var(--win-ink)!important; font-size:14px; } #app :is(#sidePanel:not(.is-inventory-panel),#editorPanel,#marketplaceModal,#tradeDialog,#worldChannelConfirm,#dialogueDialog,#socialInvite,#pvpInvite,#professorTransferDialog,#starterDialog,#questOfferV57,#controlsTutorial) input { accent-color:var(--win-accent); } #app :is(#sidePanel:not(.is-inventory-panel),#editorPanel,#marketplaceModal,#tradeDialog,#worldChannelConfirm,#dialogueDialog,#socialInvite,#pvpInvite,#professorTransferDialog,#starterDialog,#questOfferV57,#controlsTutorial) button:disabled { cursor:not-allowed; } /* Common window geometry. User-dragged desktop windows retain their position. */ #app #sidePanel:not(.is-inventory-panel):not(.is-team-panel) { width:min(1120px,calc(100vw - 64px))!important; height:min(760px,calc(100dvh - 64px))!important; max-width:calc(100vw - 32px)!important; max-height:calc(100dvh - 32px)!important; padding:22px!important; border:1px solid var(--win-line)!important; border-radius:24px!important; background:var(--win-paper)!important; box-shadow:var(--win-shadow)!important; overflow:hidden!important; } #app #sidePanel:not(.is-user-positioned):not(.is-inventory-panel):not(.is-team-panel) { inset:50% auto auto 50%!important; transform:translate(-50%,-50%)!important; } #app #sidePanel:not(.is-inventory-panel):not(.is-team-panel)::before, #app #sidePanel:not(.is-inventory-panel):not(.is-team-panel)::after { display:none!important; } #app #sidePanel:not(.is-inventory-panel):not(.is-team-panel)>#sidePanelContent { height:100%!important; padding:0!important; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; } #app #sidePanel:not(.is-inventory-panel)>.panel-close { top:16px!important; right:16px!important; width:44px!important; height:44px!important; min-height:44px!important; background:var(--win-soft)!important; color:var(--win-ink)!important; border:1px solid var(--win-line)!important; border-radius:13px!important; box-shadow:none!important; z-index:8!important; } #app #sidePanel:not(.is-inventory-panel)>.panel-window-grip { top:5px!important; opacity:.35; } #app #sidePanel:not(.is-inventory-panel) :is(.panel-title,.panel-lead,.panel-eyebrow) { padding-right:48px; } #app #sidePanel:not(.is-inventory-panel) .panel-title { color:var(--win-ink)!important; font-size:26px!important; line-height:1.2!important; margin:6px 0 12px!important; } #app #sidePanel:not(.is-inventory-panel) .panel-eyebrow { color:var(--win-muted)!important; font-size:11px!important; letter-spacing:.07em!important; } #app #sidePanel:not(.is-inventory-panel) .panel-lead { color:var(--win-muted)!important; font-size:14px!important; line-height:1.55!important; } /* Long-form windows use readable cards and honest hierarchy. */ #app #sidePanel :is(.progression-window-v2761,.factions-window-v2761,.genetics-lab-window,.mechanics-shell) { padding:0!important; background:none!important; color:var(--win-ink)!important; font:14px/1.5 "Segoe UI",sans-serif!important; } #app #sidePanel :is(.progression-hero-v2761,.factions-hero-v2761,.genetics-lab-hero) { min-height:88px!important; padding:8px 54px 20px 0!important; margin:0 0 16px!important; background:none!important; border:0!important; border-bottom:1px solid var(--win-line)!important; border-radius:0!important; box-shadow:none!important; gap:14px!important; color:var(--win-ink)!important; } #app #sidePanel :is(.progression-hero-v2761,.factions-hero-v2761,.genetics-lab-hero) :is(h2,h3) { color:var(--win-ink)!important; font-size:25px!important; line-height:1.2!important; } #app #sidePanel :is(.progression-hero-v2761,.factions-hero-v2761,.genetics-lab-hero) :is(small,p) { color:var(--win-muted)!important; font-size:12px!important; line-height:1.5!important; } #app #sidePanel :is(.progression-hero-icon,.factions-hero-v2761>span,.genetics-lab-mark) { width:48px!important; height:48px!important; min-width:48px!important; background:var(--win-soft)!important; border-radius:14px!important; } #app #sidePanel :is(.progression-hero-icon,.factions-hero-v2761>span,.genetics-lab-mark) :is(img,svg) { width:36px!important; height:36px!important; max-width:36px!important; max-height:36px!important; object-fit:contain!important; } #app #sidePanel :is(.progression-tabs-v2761,.genetics-lab-tabs,.settings-tabs-v2343) { display:flex!important; gap:6px!important; padding:5px!important; background:var(--win-soft)!important; border:1px solid var(--win-line)!important; border-radius:14px!important; margin:0 0 16px!important; } #app #sidePanel :is(.progression-tabs-v2761,.genetics-lab-tabs,.settings-tabs-v2343)>button { flex:1; min-height:44px!important; padding:10px 12px!important; border:0!important; border-radius:10px!important; color:var(--win-muted)!important; background:transparent!important; box-shadow:none!important; font-size:13px!important; line-height:1.2!important; } #app #sidePanel :is(.progression-tabs-v2761,.genetics-lab-tabs,.settings-tabs-v2343)>button.is-active { background:var(--win-card)!important; color:var(--win-accent)!important; box-shadow:0 2px 5px #1734450c!important; } #app #sidePanel :is(.talent-branch-v2761,.mastery-card-v2761,.faction-card-v2761,.clan-create-v2761,.clan-dashboard-v2761,.clan-empty-v2761,.lab-service-panel,.lab-clinic-card,.lab-breeding-panel,.lab-incubator-slot,.lab-shop-card,.mechanics-card,.combat-guide-intro,.combat-ui-guide-v291,.capture-guide-v290,.combat-guide-lead,.mechanics-live-card,.combat-type-chart) { background:var(--win-card)!important; color:var(--win-ink)!important; border:1px solid var(--win-line)!important; border-radius:16px!important; box-shadow:none!important; } #app #sidePanel :is(.talent-branch-v2761,.mastery-card-v2761,.faction-card-v2761,.mechanics-card)>header { background:var(--win-soft)!important; border-color:var(--win-line)!important; padding:16px!important; } #app #sidePanel :is(.talent-branch-v2761,.mastery-card-v2761,.faction-card-v2761,.mechanics-card)>header :is(b,h3) { color:var(--win-ink)!important; font-size:16px!important; } #app #sidePanel :is(.talent-branch-v2761,.mastery-card-v2761,.faction-card-v2761,.mechanics-card)>header :is(small,em) { color:var(--win-muted)!important; font-size:11px!important; line-height:1.45!important; } #app #sidePanel :is(.talent-grid-v2761,.mastery-grid-v2761,.faction-grid-v2761) { gap:16px!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; } #app #sidePanel :is(.talent-node-v2761,.mastery-rank-v2761) { min-height:66px!important; background:var(--win-soft)!important; border:1px solid var(--win-line)!important; border-radius:12px!important; padding:10px!important; color:var(--win-muted)!important; opacity:1!important; box-shadow:none!important; } #app #sidePanel .talent-node-v2761 b { font-size:12px!important; color:var(--win-ink)!important; line-height:1.35!important; } #app #sidePanel .talent-node-v2761 small,#app #sidePanel .mastery-rank-v2761 span { font-size:12px!important; color:var(--win-muted)!important; line-height:1.45!important; } #app #sidePanel :is(.talent-node-v2761,.mastery-rank-v2761).is-next { border-color:var(--win-accent)!important; background:var(--win-tint)!important; } #app #sidePanel :is(.talent-node-v2761,.mastery-rank-v2761).is-unlocked { background:#eef7ef!important; border-color:#b7d8c2!important; } #app #sidePanel :is(.progression-summary-v2761,.lab-section-heading,.genetics-lab-footer,.progression-footer-v2761,.factions-footer-v2761,.clan-stats-v2761) { background:var(--win-soft)!important; border-color:var(--win-line)!important; color:var(--win-muted)!important; border-radius:14px!important; padding:14px!important; gap:14px!important; } #app #sidePanel .progression-summary-v2761>span { background:var(--win-card)!important; border-color:var(--win-line)!important; min-width:0!important; } #app #sidePanel .progression-summary-v2761 p { font-size:12px!important; line-height:1.5!important; } #app #sidePanel .guide-group-v2343 { margin:14px 0; border:1px solid var(--win-line); border-radius:16px; overflow:hidden; background:var(--win-card); } #app #sidePanel .guide-group-v2343>summary { min-height:52px; padding:15px 18px; font-weight:700; font-size:16px; cursor:pointer; color:var(--win-ink); background:var(--win-soft); } #app #sidePanel .guide-group-v2343>summary::marker { color:var(--win-accent); } #app #sidePanel .guide-group-v2343>section,#app #sidePanel .guide-group-v2343>.mechanics-grid { margin:12px!important; } #app #sidePanel .guide-group-v2343>section { border:0!important; } #app #sidePanel .combat-type-chart>div { overflow:auto!important; max-width:100%; } #app #sidePanel .combat-type-chart th { position:sticky; left:0; z-index:1; background:var(--win-soft)!important; color:var(--win-ink)!important; } #app #sidePanel .combat-type-chart thead th { top:0; z-index:2; } #app #sidePanel .combat-type-chart :is(th,td) { min-width:35px; height:35px; } #app #sidePanel .mechanics-grid { gap:14px!important; } #app #sidePanel :is(.combat-guide-intro,.combat-ui-guide-v291,.capture-guide-v290,.combat-guide-lead) :is(p,small,li) { font-size:13px!important; line-height:1.6!important; color:var(--win-muted)!important; } #app #sidePanel .combat-ui-guide-v291>div>article { background:var(--win-soft)!important; border-color:var(--win-line)!important; border-radius:12px!important; } #app #sidePanel :is(.faction-card-v2761,.clan-create-v2761,.clan-dashboard-v2761,.lab-service-panel,.lab-clinic-card,.mechanics-card) :is(p,li) { font-size:14px!important; line-height:1.55!important; color:var(--win-muted)!important; } #app #sidePanel :is(.faction-card-v2761,.clan-create-v2761,.lab-service-panel,.lab-clinic-card) button { min-height:44px!important; padding:10px 14px!important; border-radius:11px!important; font-size:13px!important; } #app #sidePanel .faction-card-v2761.is-selected { border-color:var(--win-accent)!important; box-shadow:inset 0 0 0 1px var(--win-accent)!important; } #app #sidePanel :is([data-faction-choose],[data-clan-create]) { background:var(--win-accent)!important; color:white!important; border:0!important; } #app #sidePanel :is([data-faction-choose],[data-clan-create]):disabled { background:var(--win-soft)!important; color:var(--win-muted)!important; } #app #sidePanel :is(.progression-footer-v2761,.clan-dashboard-v2761)>button,#app #sidePanel [data-clan-disband] { min-height:44px!important; border:1px solid var(--win-line)!important; border-radius:11px!important; background:var(--win-card)!important; color:var(--win-accent)!important; font-size:13px!important; } /* Settings: three short sections instead of a wall of keyboard bindings. */ #app #sidePanel .settings-window-v2343 { display:flex; flex-direction:column; gap:18px; font-size:14px; } #app #sidePanel .settings-window-v2343>header { padding:2px 50px 0 0; } #app #sidePanel .settings-window-v2343 h2 { margin:5px 0 8px; font-size:28px; line-height:1.2; } #app #sidePanel .settings-window-v2343 p { margin:0; font-size:14px; line-height:1.55; color:var(--win-muted); } #app #sidePanel .settings-window-v2343>header>small { font-size:11px; color:var(--win-muted); letter-spacing:.08em; } #app #sidePanel .settings-window-v2343 :is(.theme-settings,.audio-settings,.battle-setting,.binding-group-v2343) { background:var(--win-card)!important; border:1px solid var(--win-line)!important; border-radius:16px!important; padding:18px!important; margin:0!important; box-shadow:none!important; } #app #sidePanel .settings-window-v2343 :is(.theme-settings,.audio-settings) { display:grid; gap:18px; } #app #sidePanel .settings-window-v2343 .theme-settings>header { margin:0!important; display:flex; flex-direction:column; gap:4px; } #app #sidePanel .settings-window-v2343 .theme-settings>header b { font-size:16px!important; color:var(--win-ink)!important; } #app #sidePanel .settings-window-v2343 .theme-settings>header small { font-size:12px!important; line-height:1.5; color:var(--win-muted)!important; } #app #sidePanel .settings-window-v2343 .theme-option { padding:14px!important; background:var(--win-soft)!important; border:1px solid var(--win-line)!important; box-shadow:none!important; border-radius:12px!important; } #app #sidePanel .settings-window-v2343 .theme-option { display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:8px!important; min-width:0!important; } #app #sidePanel .settings-window-v2343 .theme-option>i { position:relative!important; width:44px!important; height:44px!important; margin:0!important; } #app #sidePanel .settings-window-v2343 .theme-option>b { position:static!important; margin:0!important; } #app #sidePanel .settings-window-v2343 .theme-option:has(input:checked) { border-color:var(--win-accent)!important; background:var(--win-tint)!important; } #app #sidePanel .settings-window-v2343 .theme-option :is(b,small) { width:auto!important; max-width:none!important; white-space:normal!important; font-size:13px!important; color:var(--win-ink)!important; } #app #sidePanel .settings-window-v2343 .audio-setting-row { margin:0!important; padding:0!important; gap:16px!important; } #app #sidePanel .settings-window-v2343 .audio-setting-row b { font-size:14px!important; color:var(--win-ink)!important; } #app #sidePanel .settings-window-v2343 .audio-setting-row small { font-size:12px!important; color:var(--win-muted)!important; } #app #sidePanel .settings-window-v2343 input[type=range] { min-height:44px; accent-color:var(--win-accent); } #app #sidePanel .settings-window-v2343 .binding-group-v2343 { min-width:0; } #app #sidePanel .settings-window-v2343 .binding-group-v2343 legend { padding:0 8px; font-size:16px; font-weight:700; } #app #sidePanel .settings-window-v2343 .binding-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0!important; } #app #sidePanel .settings-window-v2343 .binding-row { display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:10px!important; margin:0!important; padding:12px!important; background:var(--win-soft)!important; border:0!important; border-radius:12px!important; box-shadow:none!important; } #app #sidePanel .settings-window-v2343 .binding-row b { font-size:13px!important; color:var(--win-ink)!important; } #app #sidePanel .settings-window-v2343 .binding-row small { font-size:11px!important; color:var(--win-muted)!important; } #app #sidePanel .settings-window-v2343 .binding-row>div { display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; } #app #sidePanel .settings-window-v2343 .binding-row button { min-height:44px!important; width:auto!important; border:1px solid var(--win-line)!important; border-radius:10px!important; background:var(--win-card)!important; color:var(--win-ink)!important; font-size:13px!important; box-shadow:none!important; } #app #sidePanel .settings-window-v2343 .binding-row button.is-listening { background:var(--win-tint)!important; border-color:var(--win-accent)!important; color:var(--win-accent)!important; } #app #sidePanel .settings-window-v2343 .settings-reset { min-height:44px!important; background:var(--win-soft)!important; border:1px solid var(--win-line)!important; color:var(--win-accent)!important; font-size:13px!important; border-radius:12px!important; } #app #sidePanel .settings-window-v2343 .battle-setting { display:flex!important; gap:14px!important; align-items:flex-start!important; } #app #sidePanel .settings-window-v2343 .battle-setting input { flex:0 0 22px!important; width:22px!important; height:22px!important; margin:0!important; } #app #sidePanel .settings-window-v2343 .battle-setting b { font-size:16px!important; color:var(--win-ink)!important; } #app #sidePanel .settings-window-v2343 .battle-setting small { display:block; margin-top:6px; font-size:13px!important; line-height:1.55!important; color:var(--win-muted)!important; } /* Pokemon dossier: content comes before management on compact screens. */ #app #sidePanel .pokemon-control-room-v2327 { background:none!important; padding:0!important; } #app #sidePanel .pokemon-control-room-v2327-head { padding:0 48px 12px 0!important; min-height:44px!important; } #app #sidePanel .pokemon-control-room-v2327-head button { min-height:44px!important; color:var(--win-ink)!important; font-size:14px!important; } #app #sidePanel .pokemon-control-room-v2327-hero { min-height:210px!important; border:1px solid var(--win-line)!important; border-radius:18px!important; background:var(--win-soft)!important; color:var(--win-ink)!important; box-shadow:none!important; } #app #sidePanel .pokemon-control-room-v2327-hero-background { opacity:.07!important; } #app #sidePanel .pokemon-control-room-v2327-hero :is(h1,b,p,small,label) { color:var(--win-ink)!important; text-shadow:none!important; } #app #sidePanel .pokemon-control-room-v2327-hero h1 { font-size:28px!important; } #app #sidePanel .pokemon-control-room-v2327-hero p { font-size:13px!important; } #app #sidePanel .pokemon-control-room-v2327-hero-copy>div>span { background:white!important; color:var(--win-ink)!important; border-color:var(--win-line)!important; } #app #sidePanel .pokemon-control-room-v2327-vitals { background:#ffffffb8!important; border-color:var(--win-line)!important; } #app #sidePanel .pokemon-control-room-v2327-vitals i,#app #sidePanel .pokemon-control-room-v2327-hero-copy label>i { background:#dce6dd!important; } #app #sidePanel .pokemon-control-room-v2327-layout { gap:18px!important; margin-top:18px!important; grid-template-columns:240px minmax(0,1fr)!important; } #app #sidePanel :is(.pokemon-control-room-v2327-control>section,.pokemon-control-room-v2327-stat-section,.pokemon-control-room-v2327-training,.pokemon-control-room-v2327-genome,.pokemon-control-room-v2327-skills,.pokemon-control-room-v2327-evolution,.pokemon-control-room-v2327-facts) { background:var(--win-card)!important; border:1px solid var(--win-line)!important; border-radius:16px!important; box-shadow:none!important; color:var(--win-ink)!important; } #app #sidePanel .pokemon-control-room-v2327 :is(p,small) { color:var(--win-muted); line-height:1.5; } #app #sidePanel .pokemon-control-room-v2327-tabs { position:sticky!important; top:0; z-index:4; background:var(--win-paper)!important; padding:4px!important; border:1px solid var(--win-line)!important; border-radius:12px!important; gap:4px!important; } #app #sidePanel .pokemon-control-room-v2327-tabs>button { min-height:44px!important; font-size:13px!important; padding:10px!important; background:transparent!important; color:var(--win-muted)!important; border:0!important; box-shadow:none!important; } #app #sidePanel .pokemon-control-room-v2327-tabs>button.is-active { background:var(--win-tint)!important; color:var(--win-accent)!important; } #app #sidePanel .pokemon-control-room-v2327 :is(.pokemon-control-room-v2327-stat,.pokemon-control-room-v2327-training-row,.pokemon-control-room-v2327-gene) { background:var(--win-soft)!important; border-color:var(--win-line)!important; border-radius:12px!important; } #app #sidePanel .pokemon-control-room-v2327-training-row button { min-height:44px!important; } #app #sidePanel .kanto-mastery-card { background:var(--win-card)!important; border:1px solid var(--win-line)!important; border-radius:14px!important; padding:14px!important; } #app #sidePanel .kanto-mastery-card p { font-size:13px!important; line-height:1.6!important; color:var(--win-muted)!important; } #app #sidePanel .kanto-mastery-title b { font-size:16px!important; color:var(--win-ink)!important; } #app #sidePanel .kanto-mastery-actions { gap:8px!important; } #app #sidePanel .kanto-mastery-actions button { min-height:44px!important; min-width:0!important; padding:8px!important; font-size:12px!important; border:1px solid var(--win-line)!important; border-radius:10px!important; color:var(--win-ink)!important; background:var(--win-soft)!important; } #app #sidePanel .kanto-mastery-actions button[aria-pressed=true] { background:var(--win-tint)!important; border-color:var(--win-accent)!important; color:var(--win-accent)!important; } #app #sidePanel .kanto-mastery-reset { min-height:44px!important; padding:10px 14px!important; border:1px solid var(--win-line)!important; background:var(--win-soft)!important; color:var(--win-ink)!important; font-size:13px!important; } #app #sidePanel .faction-playstyle-v2761 { background:var(--win-soft)!important; } #app #sidePanel .faction-playstyle-v2761 small { color:var(--win-muted)!important; font-size:11px!important; } #app #sidePanel .faction-playstyle-v2761 span,#app #sidePanel .faction-card-v2761 footer>span { font-size:12px!important; line-height:1.5!important; color:var(--win-muted)!important; } #app #sidePanel .faction-card-v2761>p { font-weight:500!important; } /* Pokemon Center: keep the six-slot comparison and server-only transfers. */ #app #sidePanel .pokemon-center-box-v2332 { background:none!important; padding:0!important; color:var(--win-ink)!important; } #app #sidePanel .pokemon-center-box-v2332-head { padding:0 52px 16px 0!important; background:none!important; border-color:var(--win-line)!important; } #app #sidePanel .pokemon-center-box-v2332-head h2 { color:var(--win-ink)!important; font-size:26px!important; } #app #sidePanel .pokemon-center-box-v2332-head :is(small,p) { color:var(--win-muted)!important; font-size:12px!important; } #app #sidePanel :is(.pokemon-center-box-v2332-party,.pokemon-center-box-v2332-box,.pokemon-center-box-v2332-action,.pokemon-center-box-v2332-selection) { background:var(--win-card)!important; border-color:var(--win-line)!important; border-radius:16px!important; box-shadow:none!important; } #app #sidePanel :is(.pokemon-center-box-v2332-party,.pokemon-center-box-v2332-box)>header { background:var(--win-soft)!important; color:var(--win-ink)!important; border-color:var(--win-line)!important; } #app #sidePanel :is(.pokemon-center-box-v2332-party-slot,.pokemon-center-box-v2332-storage-card) { background:var(--win-soft)!important; border-color:var(--win-line)!important; box-shadow:none!important; color:var(--win-ink)!important; } #app #sidePanel :is(.pokemon-center-box-v2332-party-slot,.pokemon-center-box-v2332-storage-card).is-selected { background:var(--win-tint)!important; border-color:var(--win-accent)!important; } #app #sidePanel .pokemon-center-box-v2332-mobile-tabs { background:var(--win-soft)!important; border-color:var(--win-line)!important; } #app #sidePanel .pokemon-center-box-v2332-mobile-tabs button { min-height:44px!important; background:transparent!important; color:var(--win-muted)!important; } #app #sidePanel .pokemon-center-box-v2332-mobile-tabs button.is-active { background:var(--win-card)!important; color:var(--win-accent)!important; } #app #sidePanel .pokemon-center-box-v2332-actions button { min-height:44px!important; border-radius:11px!important; } /* Pokedex: quiet header, larger search target, intentional horizontal filters. */ #app #sidePanel.is-pokedex-panel #sidePanelContent { overflow:hidden!important; } #app #sidePanel .pokedex-library { height:100%!important; display:flex!important; flex-direction:column!important; gap:12px!important; background:none!important; padding:0!important; } #app #sidePanel .pokedex-library-head { flex-shrink:0; min-height:78px!important; padding:4px 54px 16px 0!important; border:0!important; border-bottom:1px solid var(--win-line)!important; border-radius:0!important; background:none!important; color:var(--win-ink)!important; } #app #sidePanel .pokedex-library-head::before,#app #sidePanel .pokedex-library-head::after { display:none!important; } #app #sidePanel .pokedex-library-title h2 { color:var(--win-ink)!important; font-size:28px!important; } #app #sidePanel .pokedex-library-title small { color:var(--win-muted)!important; font-size:11px!important; } #app #sidePanel .pokedex-library-mark { width:48px!important; height:48px!important; background:var(--win-soft)!important; border:0!important; } #app #sidePanel .pokedex-library-mark img { width:38px!important; height:38px!important; } #app #sidePanel .pokedex-progress { background:var(--win-soft)!important; color:var(--win-ink)!important; border:1px solid var(--win-line)!important; } #app #sidePanel .pokedex-progress :is(b,strong,small,em) { color:var(--win-muted)!important; } #app #sidePanel .pokedex-toolbar { flex-shrink:0; } #app #sidePanel .pokedex-search { min-height:46px!important; background:var(--win-soft)!important; border:1px solid var(--win-line)!important; border-radius:12px!important; padding:0 12px!important; } #app #sidePanel .pokedex-search input { min-height:44px!important; width:100%!important; padding:8px!important; background:transparent!important; border:0!important; font-size:15px!important; } #app #sidePanel .pokedex-filter-tabs { background:var(--win-soft)!important; border:1px solid var(--win-line)!important; border-radius:12px!important; } #app #sidePanel .pokedex-filter-tabs button { min-height:44px!important; border:0!important; color:var(--win-muted)!important; background:transparent!important; font-size:12px!important; } #app #sidePanel .pokedex-filter-tabs button.is-active { background:var(--win-card)!important; color:var(--win-accent)!important; } #app #sidePanel .pokedex-scroll-filter { background:var(--win-soft)!important; border:1px solid var(--win-line)!important; border-radius:12px!important; } #app #sidePanel .pokedex-scroll-filter>header { background:none!important; color:var(--win-muted)!important; } #app #sidePanel .pokedex-scroll-filter>header nav button { min-height:32px!important; min-width:32px!important; background:var(--win-card)!important; border-color:var(--win-line)!important; color:var(--win-ink)!important; } #app #sidePanel .pokedex-scroll-track>button { min-height:44px!important; border:1px solid var(--win-line)!important; background:var(--win-card)!important; color:var(--win-ink)!important; box-shadow:none!important; } #app #sidePanel .pokedex-scroll-track>button.is-active { background:var(--win-tint)!important; border-color:var(--win-accent)!important; color:var(--win-accent)!important; } #app #sidePanel .pokedex-scroll-track>button::after { opacity:.1!important; } #app #sidePanel .pokedex-results-meta { color:var(--win-muted)!important; flex-shrink:0; } #app #sidePanel .pokedex-grid-v41 { flex:1; min-height:0!important; overflow:auto!important; align-content:start!important; padding:0 4px 4px 0!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; } #app #sidePanel .pokedex-species-card { background:var(--win-card)!important; border:1px solid var(--win-line)!important; box-shadow:none!important; color:var(--win-ink)!important; } #app #sidePanel .pokedex-species-card.is-lead,#app #sidePanel .pokedex-species-card.is-owned { border-color:#a8cbb7!important; } #app #sidePanel .pokedex-card-copy>b { color:var(--win-ink)!important; } #app #sidePanel .pokedex-grid-v41 { grid-auto-rows:148px!important; grid-template-rows:none!important; } #app #sidePanel .pokedex-species-card { height:148px!important; min-height:148px!important; max-height:none!important; flex-shrink:0!important; } #app #sidePanel .pokedex-search { width:100%!important; margin:0!important; } #app #sidePanel .pokedex-filter-tabs { grid-template-columns:repeat(4,minmax(0,1fr))!important; width:100%!important; } #app #sidePanel .pokedex-generation-track>button { min-width:120px!important; } #app #sidePanel .pokedex-generation-track>button em { font-size:10px!important; } #app #sidePanel .pokedex-species-card.is-locked .pokedex-card-art { opacity:.85!important; } #app #sidePanel .dex-detail-shell { padding:0!important; background:none!important; color:var(--win-ink)!important; } #app #sidePanel .dex-detail-head { padding-right:48px!important; } #app #sidePanel :is(.dex-hero-card,.dex-stats-card,.dex-section,.dex-size-range-card,.dex-size-frequency-card,.dex-innate-card,.dex-energy-card,.dex-combat-plan-v2211) { background:var(--win-card)!important; border:1px solid var(--win-line)!important; border-radius:16px!important; box-shadow:none!important; color:var(--win-ink)!important; } #app #sidePanel :is(.dex-skill-card,.dex-evolution-option,.dex-stat-row,.dex-skill-detail) { background:var(--win-soft)!important; border-color:var(--win-line)!important; color:var(--win-ink)!important; } #app #sidePanel .dex-skill-card.is-active { border-color:var(--win-accent)!important; background:var(--win-tint)!important; } /* Quest journal keeps its two-pane task flow, with one scroll owner per pane. */ #app #sidePanel.is-quest-panel #sidePanelContent { overflow:hidden!important; } #app #sidePanel .quest-journal-v57 { display:flex!important; flex-direction:column!important; height:100%!important; min-height:0!important; background:none!important; padding:0!important; gap:10px!important; } #app #sidePanel .quest-journal-head-v57 { flex-shrink:0; min-height:60px!important; padding:0 54px 12px 0!important; background:none!important; border:0!important; border-bottom:1px solid var(--win-line)!important; } #app #sidePanel .quest-journal-head-v57 h2 { color:var(--win-ink)!important; font-size:26px!important; } #app #sidePanel .quest-journal-head-v57 small { color:var(--win-muted)!important; font-size:11px!important; } #app #sidePanel :is(.quest-mode-tabs-v57,.quest-type-tabs-v57,.quest-status-tabs-v57) { flex-shrink:0; background:var(--win-soft)!important; border-color:var(--win-line)!important; border-radius:12px!important; } #app #sidePanel :is(.quest-mode-tabs-v57,.quest-type-tabs-v57,.quest-status-tabs-v57)>button { min-height:42px!important; color:var(--win-muted)!important; border-color:transparent!important; background:transparent!important; box-shadow:none!important; font-size:12px!important; } #app #sidePanel :is(.quest-mode-tabs-v57,.quest-type-tabs-v57,.quest-status-tabs-v57)>button.is-active { color:var(--win-accent)!important; background:var(--win-card)!important; } #app #sidePanel .quest-journal-body-v57 { flex:1!important; min-height:0!important; overflow:hidden!important; gap:14px!important; } #app #sidePanel :is(.quest-branch-list-v59,.quest-detail-scroll-v67) { min-height:0!important; overscroll-behavior:contain; } #app #sidePanel :is(.quest-branch-card-v59,.quest-detail-shell-v57,.quest-rewards-v59,.quest-current-v59) { background:var(--win-card)!important; border-color:var(--win-line)!important; border-radius:14px!important; box-shadow:none!important; } #app #sidePanel .quest-branch-card-v59>header { border-color:var(--win-line)!important; } #app #sidePanel .quest-branch-node-v59 { background:var(--win-soft)!important; color:var(--win-ink)!important; border-color:var(--win-line)!important; min-height:48px!important; } #app #sidePanel .quest-branch-node-v59.is-selected { background:var(--win-tint)!important; border-color:var(--win-accent)!important; } #app #sidePanel .quest-detail-description-v59 { font-size:14px!important; color:var(--win-muted)!important; line-height:1.55!important; } #app #sidePanel .quest-detail-actions-v59 { background:var(--win-paper)!important; border-color:var(--win-line)!important; padding:12px!important; } #app #sidePanel .quest-detail-actions-v59 button { min-height:44px!important; border-radius:11px!important; font-size:13px!important; } #app #sidePanel .quest-detail-actions-v59 .is-primary { background:var(--win-accent)!important; color:white!important; } /* Social profile: keep the chosen scenic art; the information uses paper cards. */ #app #sidePanel .profile-v80 { background:none!important; padding:0!important; color:var(--win-ink)!important; } #app #sidePanel .profile-v80-hero { margin-right:0!important; border-color:var(--win-line)!important; border-radius:18px!important; } #app #sidePanel .profile-v80-tabs { background:var(--win-soft)!important; border:1px solid var(--win-line)!important; border-radius:12px!important; padding:4px!important; } #app #sidePanel .profile-v80-tabs>button { min-height:44px!important; background:none!important; color:var(--win-muted)!important; border:0!important; border-radius:9px!important; font-size:13px!important; } #app #sidePanel .profile-v80-tabs>button.is-active { background:var(--win-card)!important; color:var(--win-accent)!important; } #app #sidePanel :is(.profile-v80-stats>article,.profile-v80-showcase,.profile-v80-lead,.profile-v80-progress,.profile-v80-achievement-panel,.profile-v80-code,.social-profile-section,.profile-v80-team-card,.profile-v80-referral-card,.profile-v80-invite) { background:var(--win-card)!important; border:1px solid var(--win-line)!important; border-radius:14px!important; box-shadow:none!important; color:var(--win-ink)!important; } #app #sidePanel .profile-v80 :is(.social-profile-section p,.profile-v80-code small) { color:var(--win-muted)!important; font-size:13px!important; line-height:1.5!important; } /* The region canvas is not recolored or resized: only its surrounding chrome. */ #app #sidePanel .region-map-v2204 { background:var(--win-paper)!important; color:var(--win-ink)!important; } #app #sidePanel :is(.region-map-v2204-header,.region-map-v2204-toolbar,.region-map-v2204-sidebar,.region-map-v2204-selection-copy,.region-route-v2204,.region-teleport-v2204,.region-map-v2204-zoom) { background:var(--win-paper)!important; border-color:var(--win-line)!important; color:var(--win-ink)!important; } #app #sidePanel .region-map-v2204-header { padding-right:8px!important; } #app #sidePanel .region-map-v2204 :is(.region-map-v2204-primary,.region-map-v2204-close) { min-height:44px!important; border-radius:11px!important; } #app #sidePanel .region-map-v2204-primary { background:var(--win-accent)!important; color:#fff!important; } #app #sidePanel .region-map-v2204-primary:disabled { background:var(--win-soft)!important; color:var(--win-muted)!important; } #app #sidePanel .region-map-v2204-zoom button { width:44px!important; height:44px!important; min-height:44px!important; } #app #sidePanel.is-regions-panel>.panel-close { display:none!important; } /* Modal shells, consistently bounded even when the keyboard reduces height. */ #app :is(#tradeDialog,#worldChannelConfirm,#dialogueDialog,#socialInvite,#pvpInvite,#professorTransferDialog,#starterDialog,#questOfferV57,#controlsTutorial,#marketplaceModal) { --win-available-height:var(--pk-mobile-vv-height,100dvh); } #app :is(#tradeDialog,#worldChannelConfirm,#socialInvite,#pvpInvite,#professorTransferDialog,#starterDialog,#questOfferV57,#controlsTutorial,#marketplaceModal).is-open { position:fixed!important; inset:0!important; width:auto!important; height:var(--win-available-height)!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:16px!important; transform:none!important; overflow:hidden!important; box-sizing:border-box!important; } #app :is(#tradeDialog,#worldChannelConfirm,#socialInvite,#pvpInvite,#professorTransferDialog,#starterDialog,#questOfferV57,#controlsTutorial,#marketplaceModal) :is(.trade-dialog__content,.world-channel-confirm__card,.social-invite__card,.pvp-invite__card,.professor-transfer-card-shell,.starter-experience,.controls-tutorial-card,.marketplace-shell), #app #questOfferV57>section { box-sizing:border-box!important; min-width:0!important; max-width:100%!important; max-height:calc(var(--win-available-height) - 32px)!important; margin:0!important; transform:none!important; background:var(--win-paper)!important; color:var(--win-ink)!important; border:1px solid var(--win-line)!important; border-radius:22px!important; box-shadow:var(--win-shadow)!important; overscroll-behavior:contain; overflow:auto!important; } #app :is(#worldChannelConfirm,#socialInvite,#pvpInvite,#controlsTutorial) :is(.world-channel-confirm__card,.social-invite__card,.pvp-invite__card,.controls-tutorial-card) { width:min(480px,100%)!important; padding:26px!important; } #app :is(#socialInvite,#pvpInvite) { background:#17344570!important; backdrop-filter:blur(4px); } #app :is(#socialInvite,#pvpInvite) :is(b,h2) { display:block; color:var(--win-ink)!important; font-size:22px!important; line-height:1.25!important; overflow-wrap:anywhere; } #app :is(#worldChannelConfirm,#socialInvite,#pvpInvite,#controlsTutorial,#questOfferV57) p { color:var(--win-muted)!important; font-size:14px!important; line-height:1.55!important; } #app :is(#worldChannelConfirm,#socialInvite,#pvpInvite,#controlsTutorial,#questOfferV57) button { min-height:44px!important; padding:10px 16px!important; border-radius:12px!important; background:var(--win-soft)!important; color:var(--win-ink)!important; border:1px solid var(--win-line)!important; font-size:14px!important; } #app :is(#worldChannelConfirm,#socialInvite,#pvpInvite,#questOfferV57) button:is(.is-primary,.is-accept) { background:var(--win-accent)!important; border-color:var(--win-accent)!important; color:white!important; } #app #worldChannelConfirm .world-channel-confirm__card { padding-top:55px!important; } #app #worldChannelConfirm .world-channel-confirm__close { width:44px!important; height:44px!important; padding:0!important; } #app #worldChannelConfirm .world-channel-confirm__icon { color:var(--win-accent)!important; background:var(--win-tint)!important; } #app #worldChannelConfirm .world-channel-confirm__meta { background:var(--win-soft)!important; border-color:var(--win-line)!important; color:var(--win-muted)!important; } #app #questOfferV57>section { width:min(620px,100%)!important; padding:24px!important; } #app #questOfferV57 :is(header,article,footer) { background:none!important; border-color:var(--win-line)!important; } #app #questOfferV57 h2 { color:var(--win-ink)!important; font-size:25px!important; line-height:1.25!important; } #app #questOfferV57 article { padding:16px!important; background:var(--win-soft)!important; border-radius:12px!important; } /* Trade is an actual bounded sheet, not a scaled desktop window. */ #app #tradeDialog #tradeContent { width:min(1040px,100%)!important; height:auto!important; padding:22px!important; position:relative!important; top:auto!important; left:auto!important; } #app #tradeDialog .trade-window-v2733 { display:flex!important; flex-direction:column!important; min-height:0!important; padding:0!important; gap:16px!important; background:none!important; } #app #tradeDialog .trade-window-v2733>header { align-items:flex-start!important; background:none!important; padding:0!important; border-color:var(--win-line)!important; } #app #tradeDialog .trade-window-v2733>header h2 { color:var(--win-ink)!important; font-size:25px!important; line-height:1.25!important; } #app #tradeDialog .trade-window-v2733>header p { max-width:720px; color:var(--win-muted)!important; font-size:13px!important; line-height:1.5!important; } #app #tradeDialog .trade-window-v2733>header button { flex:0 0 44px!important; width:44px!important; height:44px!important; padding:0!important; background:var(--win-soft)!important; color:var(--win-ink)!important; border:1px solid var(--win-line)!important; border-radius:12px!important; } #app #tradeDialog :is(.trade-flow-v2733>article,.trade-side,.trade-safety,.trade-tip-card,.trade-inventory-picker) { background:var(--win-soft)!important; border-color:var(--win-line)!important; color:var(--win-ink)!important; border-radius:12px!important; } #app #tradeDialog .trade-columns { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; min-height:0!important; } #app #tradeDialog .trade-inventory-picker { max-height:260px!important; overflow:auto!important; padding:10px!important; } #app #tradeDialog .trade-inventory-picker>button { background:var(--win-card)!important; border:1px solid var(--win-line)!important; min-height:58px!important; color:var(--win-ink)!important; } #app #tradeDialog :is(.trade-side-head,.trade-money-input,.trade-offer-row) { color:var(--win-ink)!important; border-color:var(--win-line)!important; } #app #tradeDialog .trade-money-input { display:flex!important; align-items:center!important; gap:12px!important; padding:12px!important; background:var(--win-card)!important; border-radius:12px!important; } #app #tradeDialog .trade-money-input>span { display:flex!important; align-items:center!important; flex:1!important; gap:8px!important; } #app #tradeDialog .trade-money-input input { width:110px!important; } #app #tradeDialog .trade-money-input :is(img,svg) { width:24px!important; height:24px!important; max-width:24px!important; max-height:24px!important; object-fit:contain!important; } #app #tradeDialog .trade-window-v2733>footer { position:sticky; bottom:-22px; padding:12px 0!important; background:var(--win-paper)!important; border-top:1px solid var(--win-line)!important; } #app #tradeDialog .trade-window-v2733>footer button { min-height:44px!important; padding:10px 16px!important; border:1px solid var(--win-line)!important; border-radius:12px!important; background:var(--win-soft)!important; color:var(--win-ink)!important; font-size:14px!important; } #app #tradeDialog .trade-window-v2733>footer .is-confirm { background:var(--win-accent)!important; color:white!important; } #app #tradeDialog .trade-window-v2733>footer .is-confirm:disabled { background:var(--win-soft)!important; color:var(--win-positive)!important; } #app #tradeDialog :is(.trade-side-meta,.trade-safety,.trade-tip-card) :is(svg,img) { max-width:24px!important; max-height:24px!important; width:24px!important; height:24px!important; object-fit:contain!important; } /* Market: retain transactional controls and confirmation semantics. */ #app #marketplaceModal .marketplace-shell { width:min(1120px,100%)!important; height:min(800px,calc(var(--win-available-height) - 32px))!important; overflow:hidden!important; } #app #marketplaceModal :is(.marketplace-head,.marketplace-tabs) { flex-shrink:0!important; background:var(--win-paper)!important; border-color:var(--win-line)!important; } #app #marketplaceModal .marketplace-head h2 { color:var(--win-ink)!important; font-size:26px!important; } #app #marketplaceModal .marketplace-head small { color:var(--win-muted)!important; } #app #marketplaceModal .marketplace-head>button { background:var(--win-soft)!important; color:var(--win-ink)!important; border:1px solid var(--win-line)!important; width:44px!important; height:44px!important; } #app #marketplaceModal .marketplace-tabs>button { min-height:44px!important; background:var(--win-soft)!important; color:var(--win-muted)!important; border-color:var(--win-line)!important; border-radius:11px!important; } #app #marketplaceModal .marketplace-tabs>button.is-active { color:var(--win-accent)!important; background:var(--win-tint)!important; } #app #marketplaceModal .marketplace-body { min-height:0!important; overflow:auto!important; background:var(--win-paper)!important; padding:18px!important; } #app #marketplaceModal :is(.market-card,.market-empty,.market-sell-form,.market-sell-assets,.market-price-history) { background:var(--win-card)!important; border:1px solid var(--win-line)!important; border-radius:14px!important; box-shadow:none!important; color:var(--win-ink)!important; } #app #marketplaceModal .market-card__visual { background:var(--win-soft)!important; } #app #marketplaceModal .market-card__actions button { min-height:44px!important; border-radius:10px!important; background:var(--win-accent)!important; color:#fff!important; border:0!important; } #app #marketplaceModal .market-card__actions button.is-secondary { background:var(--win-soft)!important; color:var(--win-ink)!important; } #app #marketplaceModal .market-card__actions button:disabled { background:var(--win-soft)!important; color:var(--win-muted)!important; } #app #marketplaceModal .market-card__body :is(h3,strong) { color:var(--win-ink)!important; } /* NPCs, starter selection and sample handover retain their character art. */ #app #dialogueDialog .dialogue-card { background:var(--win-paper)!important; border:1px solid var(--win-line)!important; color:var(--win-ink)!important; border-radius:22px!important; box-shadow:var(--win-shadow)!important; max-height:calc(var(--win-available-height) - 32px)!important; overflow:auto!important; } #app #dialogueDialog .dialogue-copy :is(h2,b,p,small) { color:var(--win-ink)!important; text-shadow:none!important; } #app #dialogueDialog .dialogue-copy p { font-size:17px!important; line-height:1.6!important; } #app #dialogueDialog .dialogue-actions button { min-height:44px!important; border-radius:12px!important; background:var(--win-soft)!important; color:var(--win-ink)!important; border-color:var(--win-line)!important; font-size:14px!important; } #app #dialogueDialog #dialogueNext { background:var(--win-accent)!important; color:#fff!important; } #app #professorTransferDialog .professor-transfer-card-shell { width:min(680px,100%)!important; padding:22px!important; } #app #professorTransferDialog header { background:none!important; padding:0!important; gap:14px!important; } #app #professorTransferDialog h2 { font-size:23px!important; color:var(--win-ink)!important; line-height:1.3!important; } #app #professorTransferDialog :is(header button,footer button) { min-height:44px!important; background:var(--win-soft)!important; color:var(--win-ink)!important; border:1px solid var(--win-line)!important; border-radius:12px!important; padding:10px 16px!important; } #app #professorTransferDialog #professorTransferConfirm { background:var(--win-accent)!important; color:white!important; } #app #professorTransferDialog .professor-transfer-card { background:var(--win-card)!important; border-color:var(--win-line)!important; border-radius:14px!important; } #app #professorTransferDialog .professor-transfer-card.is-selected { background:var(--win-tint)!important; border-color:var(--win-accent)!important; } #app #starterDialog .starter-experience { width:min(1040px,100%)!important; } #app #starterDialog .starter-flow-header { padding:18px!important; background:var(--win-paper)!important; border-color:var(--win-line)!important; } #app #starterDialog .starter-flow-header :is(b,small) { color:var(--win-ink)!important; } #app #starterDialog .starter-flow-close { min-width:44px!important; min-height:44px!important; color:var(--win-ink)!important; background:var(--win-soft)!important; border-color:var(--win-line)!important; } #app #starterDialog .starter-flow-content { background:var(--win-paper)!important; } #app #starterDialog .starter-choice-card-v39 { background:var(--win-card)!important; color:var(--win-ink)!important; border-color:var(--win-line)!important; border-radius:18px!important; box-shadow:none!important; } #app #starterDialog .starter-card-copy-v39 :is(b,em) { color:var(--win-ink)!important; } /* Quick editor and non-gameplay auxiliary windows. */ #app #editorPanel { background:var(--win-paper)!important; color:var(--win-ink)!important; border:1px solid var(--win-line)!important; border-radius:22px!important; } #app #editorPanel :is(.editor-head,.editor-modes,.editor-actions) { background:var(--win-soft)!important; border-color:var(--win-line)!important; } #app #editorPanel .object-catalog>button { background:var(--win-card)!important; border-color:var(--win-line)!important; color:var(--win-ink)!important; border-radius:12px!important; } .activity-recovery.activity-recovery article { background:var(--win-paper)!important; color:var(--win-ink)!important; border:1px solid var(--win-line)!important; box-shadow:var(--win-shadow)!important; } .activity-recovery.activity-recovery button { background:var(--win-accent)!important; color:white!important; } .activity-recovery.activity-recovery button:last-child { background:var(--win-soft)!important; color:var(--win-ink)!important; } .activity-recovery.activity-recovery :is(p,small) { color:var(--win-muted)!important; } .window-confirm-v2343 { display:none; } #app #windowConfirm.is-open { position:fixed; inset:0; z-index:14000; display:flex; align-items:center; justify-content:center; padding:16px; background:#17344580; backdrop-filter:blur(4px); color:var(--win-ink); font:14px/1.5 "Segoe UI",sans-serif; } #app #windowConfirm>article { width:min(460px,100%); max-height:calc(var(--pk-mobile-vv-height,100dvh) - 32px); overflow:auto; padding:26px; border:1px solid var(--win-line); border-radius:22px; background:var(--win-paper); box-shadow:var(--win-shadow); } #app #windowConfirm small { color:var(--win-muted); font-size:11px; letter-spacing:.08em; } #app #windowConfirm h2 { margin:10px 0 12px; font-size:25px; line-height:1.25; } #app #windowConfirm p { margin:0 0 22px; color:var(--win-muted); font-size:15px; line-height:1.6; overflow-wrap:anywhere; } #app #windowConfirm footer { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; } #app #windowConfirm button { min-height:44px; padding:11px 16px; border:1px solid var(--win-line); border-radius:12px; background:var(--win-soft); color:var(--win-ink); font:600 14px/1.3 "Segoe UI",sans-serif; touch-action:manipulation; } #app #windowConfirm [data-window-confirm-accept] { background:var(--win-accent); color:white; border-color:var(--win-accent); } #app #windowConfirm button:focus-visible { outline:3px solid var(--win-focus); outline-offset:2px; } /* Mini-game lobbies share the window frame, not the in-game arena palette. */ body :is(.quarry,.pursuit,.voltage)[data-view=lobby] :is(.quarry-window,.pursuit-window,.voltage-window) { background:var(--win-paper)!important; color:var(--win-ink)!important; border-color:var(--win-line)!important; box-shadow:var(--win-shadow)!important; } body :is(.quarry,.pursuit,.voltage)[data-view=lobby] :is(.quarry-header,.pursuit-header,.voltage-header,.quarry-footer,.pursuit-footer,.voltage-footer) { background:var(--win-paper)!important; border-color:var(--win-line)!important; color:var(--win-ink)!important; } body :is(.quarry,.pursuit,.voltage)[data-view=lobby] :is(.quarry-header,.pursuit-header,.voltage-header) h2 { color:var(--win-ink)!important; } body :is(.quarry,.pursuit,.voltage)[data-view=lobby] :is(.quarry-header,.pursuit-header,.voltage-header) small { color:var(--win-muted)!important; } body :is(.quarry,.pursuit,.voltage)[data-view=lobby] :is(.quarry-header,.pursuit-header,.voltage-header)>button { min-width:44px!important; min-height:44px!important; background:var(--win-soft)!important; color:var(--win-ink)!important; border-color:var(--win-line)!important; } body :is(.quarry,.pursuit,.voltage)[data-view=lobby] :is(.quarry-footer,.pursuit-footer,.voltage-footer) button { min-height:44px!important; border-radius:12px!important; } body :is(.quarry,.pursuit,.voltage)[data-view=lobby] :is(.quarry-primary,.pursuit-primary,.voltage-primary) { background:var(--win-accent)!important; color:white!important; box-shadow:none!important; border-color:var(--win-accent)!important; } body :is(.quarry,.pursuit,.voltage) :is(.quarry-overlay,.pursuit-overlay,.voltage-overlay)>:is(section,div) { background:var(--win-paper)!important; color:var(--win-ink)!important; border-color:var(--win-line)!important; max-height:calc(100dvh - 32px); overflow:auto; } #app #labGames:not([data-game-mode=flight]) .lab-games__shell { background:var(--win-paper)!important; color:var(--win-ink)!important; border:1px solid var(--win-line)!important; box-shadow:var(--win-shadow)!important; width:min(1080px,calc(100vw - 24px))!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 24px)!important; min-width:0!important; } #app #labGames:not([data-game-mode=flight]) :is(.lab-games__header,.lab-games__footer) { background:var(--win-paper)!important; color:var(--win-ink)!important; border-color:var(--win-line)!important; flex-shrink:0!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__header { gap:12px!important; padding:14px!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__header h2 { font:700 23px/1.2 "Segoe UI",sans-serif!important; color:var(--win-ink)!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__header small { color:var(--win-muted)!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__header button { min-width:44px!important; min-height:44px!important; background:var(--win-soft)!important; color:var(--win-ink)!important; border-color:var(--win-line)!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__body { min-height:0!important; overflow:auto!important; background:var(--win-soft)!important; } #app #labGames:not([data-game-mode=flight]) :is(.lab-games__brief,.lab-games__board,.lab-result) { color:var(--win-ink)!important; background:var(--win-card)!important; border-color:var(--win-line)!important; } #app #labGames:not([data-game-mode=flight]) :is(.lab-games__brief,.lab-result) p { color:var(--win-muted)!important; font-size:14px!important; line-height:1.55!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__footer button { min-height:44px!important; padding:10px 14px!important; background:var(--win-accent)!important; color:#fff!important; font-size:14px!important; border-radius:12px!important; white-space:normal!important; } @media (max-width:1000px) { #app #sidePanel .pokedex-grid-v41 { grid-template-columns:repeat(3,minmax(0,1fr))!important; } #app #sidePanel .pokemon-control-room-v2327-layout { grid-template-columns:210px minmax(0,1fr)!important; } } @media (max-width:760px) { #app #labGames:not([data-game-mode=flight]) .lab-games__header h2 { font-size:19px!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__footer { display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; padding:12px!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__footer button { grid-column:1/-1!important; width:100%!important; } #app #sidePanel#sidePanel:not(.is-inventory-panel):not(.is-team-panel) { position:fixed!important; inset:var(--window-safe-top) var(--window-safe-right) calc(70px + var(--window-safe-bottom)) var(--window-safe-left)!important; width:auto!important; height:auto!important; max-width:none!important; max-height:none!important; padding:14px!important; transform:none!important; border-radius:20px!important; } #app #sidePanel:not(.is-inventory-panel)>.panel-close { top:10px!important; right:10px!important; } #app #sidePanel:not(.is-inventory-panel):not(.is-team-panel)>#sidePanelContent { padding:0!important; } #app #sidePanel :is(.progression-hero-v2761,.factions-hero-v2761,.genetics-lab-hero) { align-items:flex-start!important; padding:0 44px 16px 0!important; gap:10px!important; } #app #sidePanel :is(.progression-hero-v2761,.factions-hero-v2761,.genetics-lab-hero) :is(h2,h3) { font-size:22px!important; } #app #sidePanel :is(.progression-hero-v2761,.factions-hero-v2761)>strong { display:none!important; } #app #sidePanel :is(.progression-hero-icon,.factions-hero-v2761>span,.genetics-lab-mark) { display:none!important; } #app #sidePanel :is(.talent-grid-v2761,.mastery-grid-v2761,.faction-grid-v2761) { grid-template-columns:minmax(0,1fr)!important; } #app #sidePanel .talent-path-v2761 { grid-template-columns:minmax(0,1fr)!important; } #app #sidePanel .progression-summary-v2761 { grid-template-columns:repeat(3,minmax(0,1fr))!important; } #app #sidePanel .progression-summary-v2761>p { grid-column:1/-1!important; } #app #sidePanel :is(.genetics-lab-tabs,.progression-tabs-v2761) { overflow-x:auto; } #app #sidePanel .genetics-lab-tabs>button { flex:0 0 auto!important; padding:10px!important; white-space:nowrap!important; } #app #sidePanel .settings-window-v2343>header { padding-right:44px; } #app #sidePanel .settings-window-v2343 h2 { font-size:25px; } #app #sidePanel .settings-window-v2343 .binding-list { grid-template-columns:1fr; } #app #sidePanel .settings-window-v2343 :is(.theme-settings,.audio-settings,.battle-setting,.binding-group-v2343) { padding:14px!important; } #app #sidePanel .settings-window-v2343 .theme-option small { display:none!important; } #app #sidePanel .pokemon-control-room-v2327-layout { display:flex!important; flex-direction:column!important; gap:16px!important; margin-top:12px!important; } #app #sidePanel .pokemon-control-room-v2327-content { order:0!important; } #app #sidePanel .pokemon-control-room-v2327-control { order:1!important; } #app #sidePanel .pokemon-control-room-v2327-hero { min-height:0!important; height:194px!important; padding:12px!important; } #app #sidePanel .pokemon-control-room-v2327-hero-copy { padding:0!important; } #app #sidePanel .pokemon-control-room-v2327-hero h1 { font-size:23px!important; } #app #sidePanel .pokemon-control-room-v2327-hero-portrait { width:95px!important; height:125px!important; } #app #sidePanel .pokemon-control-room-v2327-vitals { padding:8px 10px!important; } #app #sidePanel .pokemon-control-room-v2327-tabs { display:flex!important; overflow-x:auto!important; } #app #sidePanel .pokemon-control-room-v2327-tabs>button { flex:0 0 auto!important; font-size:12px!important; } #app #sidePanel .pokedex-library-head { min-height:64px!important; padding:0 44px 10px 0!important; } #app #sidePanel .pokedex-library-title h2 { font-size:24px!important; } #app #sidePanel .pokedex-progress { display:none!important; } #app #sidePanel .pokedex-library { gap:8px!important; } #app #sidePanel .pokedex-toolbar { display:flex!important; flex-direction:column!important; gap:6px!important; } #app #sidePanel .pokedex-scroll-filter { padding:4px!important; } #app #sidePanel .pokedex-scroll-filter>header { display:none!important; } #app #sidePanel .pokedex-generation-track>button { min-width:108px!important; min-height:48px!important; } #app #sidePanel .pokedex-generation-track>button small { display:none!important; } #app #sidePanel .pokedex-type-track>button { min-height:44px!important; padding:8px 10px!important; } #app #sidePanel .pokedex-filter-tabs { min-height:44px!important; } #app #sidePanel .pokedex-filter-tabs button { font-size:11px!important; padding:6px!important; } #app #sidePanel .pokedex-results-meta { font-size:11px!important; } #app #sidePanel .pokedex-results-meta>small { display:none!important; } #app #sidePanel .pokedex-grid-v41 { grid-template-columns:repeat(2,minmax(0,1fr))!important; } #app #sidePanel .pokedex-card-copy>b { font-size:13px!important; } #app #sidePanel .pokedex-grid-v41 { grid-auto-rows:180px!important; } #app #sidePanel .pokedex-species-card { display:grid!important; grid-template-columns:1fr!important; grid-template-rows:16px 76px auto 16px!important; align-content:start!important; justify-items:center!important; gap:4px!important; height:180px!important; min-height:180px!important; padding:8px!important; } #app #sidePanel .pokedex-card-number { position:static!important; width:100%!important; font-size:10px!important; } #app #sidePanel .pokedex-card-number small { display:none!important; } #app #sidePanel .pokedex-card-art { position:static!important; width:76px!important; height:76px!important; } #app #sidePanel .pokedex-card-art :is(.starter-home-art,img) { width:76px!important; height:76px!important; object-fit:contain!important; } #app #sidePanel .pokedex-card-copy { display:grid!important; justify-items:center!important; width:100%; min-width:0!important; } #app #sidePanel .pokedex-card-copy>small,#app #sidePanel .pokedex-card-copy>i { display:none!important; } #app #sidePanel .pokedex-card-copy>b { max-width:100%; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } #app #sidePanel .pokedex-species-card>em { position:static!important; font-size:8px!important; padding:2px 5px!important; } #app #sidePanel .pokemon-control-room-v2327-hero { display:grid!important; grid-template-columns:95px minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr) 48px!important; gap:10px!important; height:224px!important; min-height:224px!important; } #app #sidePanel .pokemon-control-room-v2327-hero-portrait { align-self:center!important; padding:0!important; } #app #sidePanel :is(.pokemon-control-room-v2327-hero-image,.pokemon-control-room-v2327-hero-image img) { width:95px!important; height:120px!important; max-height:120px!important; } #app #sidePanel .pokemon-control-room-v2327-vitals { position:static!important; grid-column:1/-1!important; grid-row:2!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; width:auto!important; padding:4px 8px!important; gap:8px!important; } #app #sidePanel .pokemon-control-room-v2327-vitals>span { display:grid!important; grid-template-columns:1fr!important; gap:2px!important; padding:0!important; border:0!important; } #app #sidePanel .pokemon-control-room-v2327-vitals b { font-size:12px!important; text-align:left!important; line-height:1.1!important; } #app #sidePanel .pokemon-control-room-v2327-vitals small { font-size:8px!important; } #app #sidePanel .pokemon-control-room-v2327-vitals b em { color:var(--win-muted)!important; font-size:9px!important; } #app #sidePanel .pokemon-control-room-v2327-hero-copy { gap:5px!important; } #app #sidePanel .pokemon-control-room-v2327-hero-copy label>span { color:var(--win-muted)!important; } #app #sidePanel .quest-type-tabs-v57 { display:flex!important; overflow-x:auto!important; } #app #sidePanel .quest-type-tabs-v57>button { flex:0 0 auto!important; padding:8px 12px!important; white-space:nowrap!important; } #app #sidePanel :is(.quest-mode-tabs-v57,.quest-status-tabs-v57)>button { min-height:44px!important; } #app #sidePanel .quest-journal-head-v57 { min-height:54px!important; } #app #sidePanel .quest-detail-actions-v59 { padding:10px!important; } #app #sidePanel .profile-v80-tabs { display:flex!important; overflow-x:auto!important; } #app #sidePanel .profile-v80-tabs>button { flex:0 0 auto!important; min-width:78px!important; padding:10px 12px!important; } #app #sidePanel .profile-v80-hero { margin-top:46px!important; } #app :is(#tradeDialog,#worldChannelConfirm,#socialInvite,#pvpInvite,#professorTransferDialog,#starterDialog,#questOfferV57,#controlsTutorial,#marketplaceModal).is-open { padding:8px!important; } #app :is(#tradeDialog,#worldChannelConfirm,#socialInvite,#pvpInvite,#professorTransferDialog,#starterDialog,#questOfferV57,#controlsTutorial,#marketplaceModal) :is(.trade-dialog__content,.world-channel-confirm__card,.social-invite__card,.pvp-invite__card,.professor-transfer-card-shell,.starter-experience,.controls-tutorial-card,.marketplace-shell),#app #questOfferV57>section { max-height:calc(var(--win-available-height) - 16px)!important; border-radius:18px!important; } #app :is(#sidePanel:not(.is-inventory-panel),#marketplaceModal,#tradeDialog,#professorTransferDialog) :is(input:not([type=range]):not([type=radio]):not([type=checkbox]),select,textarea) { font-size:16px!important; } #app #tradeDialog #tradeContent { padding:16px!important; } #app #tradeDialog .trade-columns { grid-template-columns:minmax(0,1fr)!important; } #app #tradeDialog .trade-flow-v2733 { display:none!important; } #app #tradeDialog .trade-window-v2733>header h2 { font-size:22px!important; } #app #tradeDialog .trade-window-v2733>footer { bottom:-16px; } #app #marketplaceModal .marketplace-shell { height:calc(var(--win-available-height) - 16px)!important; } #app #marketplaceModal .marketplace-head { padding:14px!important; } #app #marketplaceModal .marketplace-head h2 { font-size:22px!important; } #app #marketplaceModal .marketplace-head-stats { display:none!important; } #app #marketplaceModal .marketplace-body { padding:12px!important; } #app #marketplaceModal .marketplace-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } #app #marketplaceModal .market-card__body { padding:10px!important; } #app #marketplaceModal .market-card { display:flex!important; flex-direction:column!important; min-width:0!important; } #app #marketplaceModal .market-card__visual { width:100%!important; height:118px!important; min-height:118px!important; } #app #marketplaceModal .market-card__visual>img { width:78px!important; height:78px!important; } #app #marketplaceModal .market-card__body { display:flex!important; flex-direction:column!important; min-width:0!important; gap:8px!important; } #app #marketplaceModal .market-card__body h3 { white-space:normal!important; font-size:14px!important; line-height:1.3!important; overflow-wrap:anywhere; } #app #marketplaceModal .market-card__meta { flex-wrap:wrap!important; gap:3px!important; } #app #marketplaceModal .market-card__quantity { display:flex!important; flex-direction:column!important; gap:5px!important; } #app #marketplaceModal .market-card__quantity input { width:100%!important; } #app #marketplaceModal .market-card__actions { flex-direction:column!important; } #app #marketplaceModal .market-card__price strong { font-size:16px!important; } #app #dialogueDialog .dialogue-card { max-width:calc(100vw - 16px)!important; max-height:calc(var(--win-available-height) - 16px)!important; } #app #dialogueDialog .dialogue-copy p { font-size:15px!important; } #app #questOfferV57>section { padding:18px!important; } #app #questOfferV57 footer { flex-direction:column!important; align-items:stretch!important; gap:16px!important; } #app #professorTransferDialog .professor-transfer-card-shell { padding:16px!important; } #app #professorTransferDialog footer { display:grid!important; grid-template-columns:1fr!important; gap:8px!important; } } @media (max-height:560px) and (orientation:landscape) { #app #sidePanel#sidePanel:not(.is-inventory-panel):not(.is-team-panel) { position:fixed!important; inset:8px 70px 76px!important; width:auto!important; height:auto!important; max-width:none!important; max-height:none!important; padding:12px!important; transform:none!important; } #app #sidePanel.is-regions-panel { bottom:8px!important; } #app #sidePanel .pokedex-library-head { min-height:48px!important; padding-bottom:8px!important; } #app #sidePanel .pokedex-library-title h2 { font-size:22px!important; } #app #sidePanel .pokedex-library-mark,#app #sidePanel .pokedex-progress { display:none!important; } #app #sidePanel.is-pokedex-panel #sidePanelContent { overflow:auto!important; } #app #sidePanel .pokedex-library { height:auto!important; } #app #sidePanel .pokedex-grid-v41 { flex:none!important; max-height:none!important; overflow:visible!important; } #app #sidePanel .pokemon-control-room-v2327-layout { display:flex!important; flex-direction:column!important; } #app #sidePanel .pokemon-control-room-v2327-content { order:0!important; } #app #sidePanel .pokemon-control-room-v2327-control { order:1!important; } } @media (prefers-reduced-motion:reduce) { #app :is(#sidePanel,#marketplaceModal,#tradeDialog,#worldChannelConfirm,#dialogueDialog,#socialInvite,#pvpInvite,#professorTransferDialog,#starterDialog,#questOfferV57,#controlsTutorial) { scroll-behavior:auto!important; animation:none!important; transition:none!important; } } /* Content audit: constrain intrinsic raster sizes and legacy fixed columns. */ #app #sidePanel .profile-v80-control-icon { position:static!important; display:block!important; width:22px!important; height:22px!important; max-width:22px!important; max-height:22px!important; margin:0!important; } #app #sidePanel .profile-v80-status-icon { position:static!important; display:block!important; width:14px!important; height:14px!important; max-width:14px!important; max-height:14px!important; } #app #sidePanel .profile-v80-appearance-picker>header>button { display:grid!important; place-items:center!important; min-width:44px!important; min-height:44px!important; padding:0!important; } #app #sidePanel .profile-v80-appearance-picker>header { padding-right:48px!important; } #app #sidePanel .profile-v80-identity>div { min-width:0!important; max-width:100%!important; } #app #sidePanel .profile-v80-identity h2 { max-width:100%!important; white-space:normal!important; overflow-wrap:anywhere; } #app #sidePanel .dex-physical-profile { min-width:0!important; } #app #sidePanel .dex-physical-profile :is(article,span) { min-width:0!important; } #app #sidePanel .dex-physical-profile :is(em,b,small) { white-space:normal!important; overflow-wrap:anywhere; } #app #sidePanel .mechanics-shell .combat-guide-lead { display:flex!important; flex-direction:column!important; align-items:stretch!important; width:auto!important; } #app #sidePanel .mechanics-shell .combat-guide-lead>div { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; } #app #sidePanel .mechanics-shell .combat-guide-lead>div>article { display:flex!important; align-items:flex-start!important; min-width:0!important; gap:10px!important; background:var(--win-soft)!important; padding:12px!important; border-radius:12px!important; } #app #sidePanel .mechanics-shell .combat-guide-lead>div>article>span { min-width:0!important; } #app #sidePanel .mechanics-shell .combat-guide-lead>ol { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; padding:0!important; } #app #sidePanel .mechanics-shell .combat-guide-lead>ol>li { display:grid!important; grid-template-columns:40px 22px minmax(0,1fr)!important; gap:8px!important; min-width:0!important; background:var(--win-soft)!important; padding:10px!important; border-radius:12px!important; } #app #sidePanel .mechanics-shell .combat-guide-lead>ol :is(.skill-icon,.skill-icon img) { width:40px!important; height:40px!important; object-fit:contain!important; } #app #sidePanel .mechanics-shell .combat-guide-lead>:is(header,div,ol) { width:100%!important; max-width:100%!important; align-self:stretch!important; box-sizing:border-box!important; } #app #sidePanel .mechanics-shell .combat-guide-lead>ol>li { width:auto!important; max-width:none!important; } #app #sidePanel .mechanics-shell .combat-guide-lead>ol>li>kbd { position:static!important; width:22px!important; align-self:center!important; } #app #sidePanel .mechanics-shell .combat-guide-lead>ol>li>span { min-width:0!important; } #app #sidePanel .mechanics-shell .combat-guide-lead>ol>li :is(b,small) { white-space:normal!important; overflow:visible!important; line-height:1.4!important; } #app #sidePanel .mechanics-shell .combat-guide-lead>ol>li small { font-weight:400!important; font-size:12px!important; } #app #sidePanel .lab-condition-row>small { color:var(--win-positive)!important; } #app #sidePanel .lab-clinic-copy>span>small { color:var(--win-muted)!important; } #app #sidePanel .genetics-lab-window p { font-weight:400!important; } #app #sidePanel:not(.is-inventory-panel)>#sidePanelContent { position:relative; isolation:isolate; z-index:0; } #app #sidePanel:has([data-profile-gift-picker]:not([hidden]))>.panel-close { visibility:hidden!important; } #app #sidePanel .profile-v80-gift-picker { background:#17344580!important; padding:8px!important; } #app #sidePanel .profile-v80-gift-picker-card { background:var(--win-paper)!important; border:1px solid var(--win-line)!important; border-radius:18px!important; max-height:100%!important; padding:16px!important; } #app #sidePanel .profile-v80-gift-picker-card>header { display:grid!important; grid-template-columns:minmax(0,1fr) 44px!important; gap:12px!important; } #app #sidePanel .profile-v80-gift-picker-card>header>button { display:grid!important; place-items:center!important; width:44px!important; height:44px!important; min-height:44px!important; padding:0!important; background:var(--win-soft)!important; border:1px solid var(--win-line)!important; border-radius:12px!important; } #app #sidePanel .profile-v80-gift-picker-card>header>button :is(svg,img) { position:static!important; width:22px!important; height:22px!important; transform:none!important; margin:0!important; } #app #sidePanel .profile-v80-gift-picker-card>header :is(b,p) { color:var(--win-ink)!important; } #app #sidePanel .profile-v80-gift-choice { background:var(--win-card)!important; color:var(--win-ink)!important; border-color:var(--win-line)!important; border-radius:12px!important; } #app #sidePanel .profile-v80-gift-choice :is(b,small) { font-size:12px!important; line-height:1.45!important; } #app #sidePanel .profile-v80-gift-picker-card>footer { font-size:12px!important; color:var(--win-muted)!important; } #app #sidePanel .profile-v80-style-picker { background:var(--win-card)!important; border:1px solid var(--win-line)!important; border-radius:16px!important; } #app #sidePanel .profile-v80-appearance-picker { background:var(--win-card)!important; border:1px solid var(--win-line)!important; border-radius:16px!important; } #app #sidePanel .profile-v80-scene-picker button { background:var(--win-soft)!important; color:var(--win-ink)!important; border-color:var(--win-line)!important; } #app #sidePanel .profile-v80-scene-picker button.is-selected { border-color:var(--win-accent)!important; } #app #sidePanel .profile-v80-scene-picker button :is(b,small) { font-size:12px!important; } #app #sidePanel .profile-v80-actions>button { min-height:44px!important; background:var(--win-soft)!important; color:var(--win-ink)!important; border-color:var(--win-line)!important; border-radius:12px!important; } #app #sidePanel .profile-v80-actions>button b { color:var(--win-ink)!important; } #app #sidePanel .profile-v80-actions>button small { color:var(--win-muted)!important; } #app #sidePanel :is(.quest-mode-tabs-v57,.quest-type-tabs-v57,.quest-status-tabs-v57)>button { min-height:44px!important; } #app #sidePanel .quest-detail-branch-v67 { background:var(--win-card)!important; color:var(--win-ink)!important; border:1px solid var(--win-line)!important; } #app #sidePanel .quest-detail-branch-v67 :is(b,small,strong) { color:var(--win-ink)!important; } #app #sidePanel .oak-reward-chip { font-size:11px!important; } #app #sidePanel .oak-program-card>button { font-size:12px!important; } #app #sidePanel .clan-dashboard-v2761>footer>span { font-size:12px!important; } #app #sidePanel .quest-branch-card-v59>header { background:var(--win-soft)!important; } #app #sidePanel .quest-branch-card-v59>header::before,#app #sidePanel .quest-branch-card-v59>header::after { display:none!important; } #app #sidePanel .quest-branch-title-v61 :is(b,em) { color:var(--win-ink)!important; text-shadow:none!important; white-space:normal!important; line-height:1.35!important; } #app #sidePanel .quest-branch-title-v61 b { font-size:15px!important; } #app #sidePanel .quest-branch-title-v61 em { font-size:11px!important; color:var(--win-muted)!important; } #app #sidePanel .quest-branch-card-v59>header>strong,#app #sidePanel .quest-branch-fold-v62 { background:var(--win-card)!important; color:var(--win-ink)!important; border:1px solid var(--win-line)!important; } #app #sidePanel .quest-detail-hero-v59 { background:var(--win-soft)!important; border-color:var(--win-line)!important; color:var(--win-ink)!important; } #app #sidePanel .quest-detail-hero-v59 :is(h2,em,small) { color:var(--win-ink)!important; } #app #sidePanel :is(.oak-board-summary>article,.oak-program-card) { background:var(--win-card)!important; color:var(--win-ink)!important; border:1px solid var(--win-line)!important; border-radius:16px!important; box-shadow:none!important; } #app #sidePanel .oak-program-top>span { min-width:0!important; } #app #sidePanel .oak-program-top :is(b,p) { color:var(--win-ink)!important; white-space:normal!important; } #app #sidePanel .oak-program-top p { font-size:14px!important; color:var(--win-muted)!important; line-height:1.55!important; } #app #sidePanel .oak-program-card>button { min-height:44px!important; background:var(--win-accent)!important; color:white!important; border-radius:12px!important; } #app #sidePanel .oak-program-card>button:disabled { background:var(--win-soft)!important; color:var(--win-muted)!important; opacity:1!important; } #app #sidePanel .oak-reward-chip { background:var(--win-soft)!important; color:var(--win-ink)!important; border-color:var(--win-line)!important; } #app #sidePanel .oak-board-summary b { color:var(--win-ink)!important; } #app #editorPanel .object-catalog { grid-template-columns:repeat(3,minmax(0,1fr))!important; } #app #editorPanel .object-catalog>button { font-size:11px!important; min-height:110px!important; padding:9px!important; } #app #editorPanel .object-catalog>button :is(b,small) { font-size:11px!important; line-height:1.3!important; } #app #editorPanel .editor-head h2 { font-size:20px!important; } #app #editorPanel .editor-modes button { min-height:44px!important; font-size:13px!important; } #app #sidePanel :is(h1,h2)[tabindex="-1"] { outline:none!important; } #app #sidePanel .mechanics-shell :is(.combat-icon,.ui-icon) { width:28px!important; height:28px!important; max-width:28px!important; max-height:28px!important; flex:0 0 28px!important; object-fit:contain!important; } #app #sidePanel .mechanics-shell :is(.combat-guide-intro,.combat-guide-lead) { display:flex!important; align-items:flex-start!important; gap:14px!important; padding:14px!important; min-width:0!important; } #app #sidePanel .mechanics-shell :is(.combat-guide-intro,.combat-guide-lead)>span { display:grid!important; place-items:center!important; flex:0 0 48px!important; width:48px!important; height:48px!important; background:var(--win-soft)!important; box-shadow:none!important; border-radius:12px!important; } #app #sidePanel .mechanics-shell :is(.combat-guide-intro,.combat-guide-lead)>div { min-width:0!important; } #app #sidePanel .combat-ui-guide-v291>div>article { display:flex!important; align-items:flex-start!important; gap:12px!important; padding:14px!important; min-width:0!important; } #app #sidePanel .combat-ui-guide-v291>div>article>span { min-width:0!important; } #app #sidePanel .mechanics-shell :is(b,h3) { font-size:14px!important; line-height:1.4!important; white-space:normal!important; } #app #sidePanel .mechanics-shell :is(.mechanics-live-card em,.mechanics-card em) { font-size:12px!important; line-height:1.5!important; } #app #sidePanel .pokedex-generation-track>button { display:grid!important; grid-template-columns:minmax(0,1fr)!important; justify-items:start!important; gap:3px!important; padding:9px 12px!important; width:132px!important; min-width:132px!important; } #app #sidePanel .pokedex-generation-track>button em { position:static!important; width:auto!important; max-width:100%!important; } #app #sidePanel .pokedex-card-copy { gap:5px!important; } #app #sidePanel .genetics-lab-hero { grid-template-columns:48px minmax(0,1fr) auto!important; } #app #sidePanel .genetics-lab-hero::before,#app #sidePanel .genetics-lab-hero::after { display:none!important; } #app #sidePanel .genetics-lab-hero>div { min-width:0!important; } #app #sidePanel .genetics-lab-hero>strong { background:var(--win-soft)!important; color:var(--win-ink)!important; } #app #sidePanel .settings-window-v2343 .theme-option { min-height:126px!important; height:auto!important; justify-content:flex-start!important; } #app #sidePanel .settings-window-v2343 .theme-option>input[type=radio] { position:absolute!important; width:1px!important; height:1px!important; min-width:1px!important; min-height:1px!important; margin:0!important; padding:0!important; opacity:0!important; clip-path:inset(50%); } #app #sidePanel .settings-window-v2343 .theme-option:has(input:focus-visible) { outline:3px solid var(--win-focus); outline-offset:2px; } #app #sidePanel .settings-window-v2343 .theme-settings>header { align-items:flex-start!important; text-align:left!important; } #app #sidePanel .settings-window-v2343 .theme-settings>header small { text-align:left!important; } #app #sidePanel .profile-v80 { --profile-ink:var(--win-ink)!important; --profile-muted:var(--win-muted)!important; --profile-line:var(--win-line)!important; --profile-card:var(--win-card)!important; } #app #sidePanel .settings-window-v2343 .theme-option>i { inset:auto!important; order:0!important; } #app #sidePanel .settings-window-v2343 .theme-option>b { order:1!important; } #app #sidePanel .settings-window-v2343 .theme-option>b { align-self:flex-start!important; } #app #sidePanel .settings-window-v2343 .theme-option>small { order:2!important; } #app #sidePanel .window-prototype-note { margin:0 0 16px; padding:12px 16px; border-radius:12px; border:1px solid #e8d5ac; background:#fff6df; color:#75613a; font-size:13px; line-height:1.5; } #app #sidePanel .dex-detail-head { position:relative!important; z-index:0!important; background:var(--win-paper)!important; } #app #dialogueDialog.is-open { position:fixed!important; inset:0!important; width:auto!important; height:var(--win-available-height)!important; padding:16px!important; display:flex!important; align-items:flex-end!important; justify-content:center!important; transform:none!important; } #app #dialogueDialog .dialogue-card { position:relative!important; inset:auto!important; margin:0!important; transform:none!important; width:min(1080px,100%)!important; max-width:100%!important; } #app #dialogueDialog .dialogue-card::before,#app #dialogueDialog .dialogue-card::after { display:none!important; } #app #dialogueDialog .dialogue-portrait { background:var(--win-tint)!important; border-radius:16px!important; } #app #dialogueDialog .dialogue-portrait>span { background:var(--win-soft)!important; color:var(--win-ink)!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__shell { grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto minmax(0,1fr) auto!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__header { display:grid!important; grid-template-columns:44px minmax(0,1fr) 44px!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__header>span { min-width:0!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__header h2 { white-space:normal!important; overflow-wrap:anywhere; } #app #labGames:not([data-game-mode=flight]) .lab-games__emblem { width:44px!important; height:44px!important; } #app #labGames:not([data-game-mode=flight]) :is(.lab-games__body,.lab-games__board,.lab-games__footer) { min-width:0!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__body { grid-template-columns:minmax(0,1fr) 250px!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__board>header { display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:10px!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__board>header>span { display:flex!important; align-items:center!important; gap:8px!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__board>header img { width:32px!important; height:32px!important; object-fit:contain!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__board li { grid-template-columns:24px minmax(0,1fr) auto!important; background:var(--win-soft)!important; } #app #labGames:not([data-game-mode=flight]) .lab-result { width:100%!important; box-sizing:border-box!important; padding:20px!important; } #app #labGames:not([data-game-mode=flight]) .lab-result>b { white-space:normal!important; font-size:22px!important; line-height:1.3!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__arena:has(>.lab-result) { height:auto!important; min-height:340px!important; max-height:none!important; overflow:auto!important; touch-action:pan-y!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__arena>.lab-result { position:relative!important; inset:auto!important; min-height:340px!important; height:auto!important; gap:14px!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__body:has(.lab-result) { align-content:start!important; grid-auto-rows:auto!important; } .activity-recovery.activity-recovery article { max-height:calc(var(--pk-mobile-vv-height,100dvh) - 32px)!important; } .activity-recovery.activity-recovery button:focus-visible { outline:3px solid var(--win-focus); outline-offset:2px; } @media(max-width:760px) { #app #sidePanel .mechanics-shell .combat-guide-lead>:is(div,ol) { grid-template-columns:minmax(0,1fr)!important; } #app #sidePanel .profile-v80-hero { grid-template-columns:minmax(0,1fr)!important; min-height:200px!important; } #app #sidePanel .profile-v80-identity { min-width:0!important; width:auto!important; grid-template-columns:56px minmax(0,1fr)!important; gap:10px!important; padding:18px 58px 18px 12px!important; align-items:center!important; } #app #sidePanel .profile-v80-identity h2 { font-size:20px!important; line-height:1.2!important; } #app #sidePanel .profile-v80-stage { position:absolute!important; right:0!important; bottom:0!important; width:66px!important; height:96px!important; pointer-events:none!important; } #app #sidePanel .profile-v82-trainer { inset:auto 0 0 auto!important; width:66px!important; height:96px!important; max-width:66px!important; max-height:96px!important; object-fit:contain!important; } #app #sidePanel .profile-v80-stage-pokemon { display:none!important; } #app #sidePanel .quest-journal-v57.is-mobile-detail-open>:is(.quest-mode-tabs-v57,.quest-type-tabs-v57,.quest-status-tabs-v57) { display:none!important; } #app #sidePanel .pokedex-generation-track>button { width:116px!important; min-width:116px!important; grid-template-columns:minmax(0,1fr) auto!important; gap:6px!important; padding:10px!important; } #app #sidePanel .pokedex-grid-v41 { grid-auto-rows:196px!important; } #app #sidePanel .pokedex-species-card { height:196px!important; min-height:196px!important; } #app #sidePanel .pokedex-species-card>em { font-size:9px!important; } #app #sidePanel .genetics-lab-hero { grid-template-columns:minmax(0,1fr)!important; } #app #sidePanel .genetics-lab-hero h2 { font-size:24px!important; } #app #sidePanel .genetics-lab-hero small { font-size:10px!important; } #app #sidePanel .genetics-lab-hero :is(.genetics-lab-mark,strong) { display:none!important; } #app #sidePanel .combat-ui-guide-v291>div { grid-template-columns:minmax(0,1fr)!important; } #app #sidePanel .mechanics-shell :is(.combat-guide-intro,.combat-guide-lead)>span { display:none!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__body { grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__header { padding:10px!important; gap:8px!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__header h2 { font-size:17px!important; } #app #labGames:not([data-game-mode=flight]) .lab-games__header small { font-size:9px!important; } #app #labGames:not([data-game-mode=flight]) .lab-result>b { font-size:19px!important; } #app #dialogueDialog.is-open { padding:8px!important; } } @media(max-height:650px) { #app #sidePanel.is-pokedex-panel #sidePanelContent { overflow:auto!important; } #app #sidePanel .pokedex-library { height:auto!important; } #app #sidePanel .pokedex-grid-v41 { flex:none!important; max-height:none!important; overflow:visible!important; } } /* Follow the visible viewport when an on-screen keyboard covers the page. */ #app #windowConfirm.is-open,.activity-recovery.activity-recovery:not([hidden]) { top:var(--pk-mobile-vv-offset-top,0px); bottom:auto; height:var(--pk-mobile-vv-height,100dvh); box-sizing:border-box; } html[data-mobile-keyboard="open"] #app #sidePanel#sidePanel:not(.is-inventory-panel):not(.is-team-panel) { top:calc(var(--pk-mobile-vv-offset-top,0px) + 8px)!important; bottom:auto!important; height:calc(var(--pk-mobile-vv-height,100dvh) - 16px)!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 16px)!important; } html[data-mobile-keyboard="open"] #app #sidePanel.is-pokedex-panel #sidePanelContent { overflow:auto!important; } html[data-mobile-keyboard="open"] #app #sidePanel .pokedex-library { height:auto!important; } html[data-mobile-keyboard="open"] #app #sidePanel .pokedex-grid-v41 { flex:none!important; max-height:none!important; overflow:visible!important; } /* 2.35.2: intrinsic settings height, compact controls and neutral dex chrome. Keep a scroll fallback for small landscape screens and enlarged text. */ #app #sidePanel#sidePanel#sidePanel.is-settings-panel { width:min(880px,calc(100vw - 32px))!important; height:auto!important; min-height:0!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 32px)!important; z-index:var(--window-layer-panel)!important; } #app #sidePanel#sidePanel#sidePanel.is-settings-panel>#sidePanelContent { flex:1 1 auto!important; height:auto!important; min-height:0!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 78px)!important; overflow:auto!important; scrollbar-gutter:auto; } #app #sidePanel .settings-window-v2343 { gap:12px; } #app #sidePanel .settings-window-v2343 h2 { font-size:25px; margin:3px 0 0; } #app #sidePanel .settings-window-v2343 .settings-tabs-v2343 { margin:0!important; } #app #sidePanel .settings-window-v2343 :is(.theme-settings,.audio-settings,.battle-setting,.binding-group-v2343) { padding:14px!important; } #app #sidePanel .settings-window-v2343 :is(.theme-settings,.audio-settings) { gap:12px; } #app #sidePanel .settings-window-v2343 .theme-option { display:grid!important; grid-template-columns:36px minmax(0,1fr)!important; grid-template-rows:auto auto!important; align-items:center!important; column-gap:10px!important; row-gap:2px!important; min-height:72px!important; padding:10px!important; } #app #sidePanel .settings-window-v2343 .theme-option>i { grid-column:1; grid-row:1/3; width:36px!important; height:36px!important; } #app #sidePanel .settings-window-v2343 .theme-option>b { grid-column:2; grid-row:1; align-self:end!important; } #app #sidePanel .settings-window-v2343 .theme-option>small { grid-column:2; grid-row:2; align-self:start; font-size:12px!important; } #app #sidePanel .settings-window-v2343 .audio-setting-control { min-width:0; } #app #sidePanel .settings-window-v2343 .audio-setting-control output { min-width:36px; font:600 12px/1.4 "Segoe UI",sans-serif!important; } #app #sidePanel .settings-controls-nav { display:flex; gap:6px; padding:4px; border-radius:12px; background:var(--win-soft); } #app #sidePanel .settings-controls-nav>button { flex:1; min-width:0; min-height:44px; padding:8px; border:1px solid transparent; border-radius:9px; color:var(--win-muted); background:transparent; font-size:13px; } #app #sidePanel .settings-controls-nav>button[aria-pressed=true] { background:var(--win-card); border-color:var(--win-line); color:var(--win-accent); } #app #sidePanel .settings-window-v2343 .binding-row { flex-direction:row!important; align-items:center!important; gap:8px!important; padding:8px!important; } #app #sidePanel .settings-window-v2343 .binding-row>span { flex:1; min-width:0; } #app #sidePanel .settings-window-v2343 .binding-row>div { flex:0 0 126px; gap:6px!important; } #app #sidePanel .settings-window-v2343 .binding-row button { padding:6px!important; overflow-wrap:anywhere; } #app #sidePanel .settings-window-v2343 .binding-row button>.ui-icon { display:block; width:18px!important; height:18px!important; margin:auto; } #app #sidePanel#sidePanel#sidePanel.is-center-panel:has(.is-unavailable) { width:min(620px,calc(100vw - 16px))!important; height:auto!important; min-height:0!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 32px)!important; bottom:auto!important; z-index:var(--window-layer-panel)!important; } #app #sidePanel#sidePanel#sidePanel.is-center-panel:has(.is-unavailable)>#sidePanelContent { height:auto!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 78px)!important; } #app #sidePanel .pokemon-center-box-v2332.is-unavailable { min-height:0!important; padding:16px!important; box-shadow:none!important; } #app #sidePanel .pokemon-center-box-v2332.is-unavailable>header { min-height:0!important; padding-right:0!important; } #app #sidePanel .pokemon-center-box-v2332.is-unavailable>header small { display:block; padding-right:36px; } #app #sidePanel .pokemon-center-box-v2332.is-unavailable h2 { font-size:22px!important; line-height:1.25!important; margin:10px 0 12px!important; } #app #sidePanel .pokemon-center-box-v2332.is-unavailable p { font-size:13px!important; line-height:1.5!important; } #app #sidePanel .pokemon-center-box-v2332.is-unavailable>div { min-height:0!important; padding:16px 0 0!important; } #app #sidePanel .pokemon-center-box-v2332.is-unavailable>div>span { flex:0 0 44px!important; width:44px!important; height:44px!important; } #app #sidePanel .center-open-team { min-height:44px; margin-top:8px; padding:10px 16px; border:1px solid var(--win-accent); border-radius:12px; background:var(--win-accent); color:#fff; font-size:14px; } #app #sidePanel .dex-detail-shell { --dex-accent:var(--win-accent)!important; --dex-accent-2:#43b8e6!important; } #app #sidePanel .dex-detail-head small { color:var(--win-muted)!important; } #app #sidePanel .dex-detail-head button { display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; min-height:44px!important; } #app #sidePanel .dex-detail-head button>.ui-icon { width:20px!important; height:20px!important; flex:0 0 20px; } #app #sidePanel .dex-hero-card { background:var(--win-card)!important; } @media(max-width:900px) { #app #sidePanel .settings-window-v2343 .binding-list { grid-template-columns:minmax(0,1fr); } } @media(max-width:760px),(max-height:650px) { #app #sidePanel#sidePanel#sidePanel.is-settings-panel { width:calc(100vw - 16px)!important; max-height:calc(var(--pk-mobile-vv-height,100dvh) - 16px)!important; padding:14px!important; inset:calc(var(--pk-mobile-vv-offset-top,0px) + 8px) auto auto 8px!important; transform:none!important; } #app #sidePanel#sidePanel#sidePanel.is-settings-panel>#sidePanelContent { max-height:calc(var(--pk-mobile-vv-height,100dvh) - 46px)!important; } #app #sidePanel .settings-window-v2343 :is(.theme-settings,.audio-settings,.battle-setting,.binding-group-v2343) { padding:10px!important; } #app #sidePanel .settings-window-v2343 .theme-option { min-height:58px!important; grid-template-rows:auto!important; } #app #sidePanel .settings-window-v2343 .theme-option>i { grid-row:1; } #app #sidePanel .settings-window-v2343 .theme-option>b { align-self:center!important; } #app #sidePanel .settings-window-v2343 .theme-option>small { display:none!important; } #app #sidePanel .settings-window-v2343 .audio-setting-row { display:grid!important; grid-template-columns:100px minmax(0,1fr)!important; align-items:center!important; gap:8px!important; } #app #sidePanel .settings-window-v2343 .audio-setting-row small { font-size:11px!important; } #app #sidePanel .settings-window-v2343 .audio-setting-control { gap:6px!important; } #app #sidePanel .settings-window-v2343 .audio-setting-control input { min-width:0!important; width:100%!important; } } @media(max-width:360px) { #app #sidePanel .settings-window-v2343 .theme-option { grid-template-columns:24px minmax(0,1fr)!important; gap:6px!important; } #app #sidePanel .settings-window-v2343 .theme-option>i { width:24px!important; height:30px!important; } #app #sidePanel .settings-window-v2343 .binding-row>div { flex-basis:112px; } } @media(min-width:600px) and (max-height:500px) { #app #sidePanel .settings-window-v2343[data-settings-view=interface] { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:10px; } #app #sidePanel .settings-window-v2343[data-settings-view=interface]>:is(header,nav) { grid-column:1/-1; } #app #sidePanel .settings-window-v2343[data-settings-view=interface] .audio-settings { align-self:stretch; align-content:center; } } /* Physical city services: no empty tab row or stretched nursery button. */ #app #sidePanel .genetics-lab-window[data-facility="clinic"], #app #sidePanel .genetics-lab-window[data-facility="pokemart"] { height:auto!important; min-height:0!important; grid-template-rows:none!important; grid-auto-rows:auto!important; align-content:start!important; } #app #sidePanel [data-facility="clinic"] [data-town-nursery] { height:46px!important; min-height:46px!important; flex:none!important; } @media(max-width:700px) { #app #sidePanel .genetics-lab-window:is([data-facility="clinic"],[data-facility="pokemart"]) .genetics-lab-hero { grid-template-columns:40px minmax(0,1fr)!important; } #app #sidePanel .genetics-lab-window:is([data-facility="clinic"],[data-facility="pokemart"]) .genetics-lab-mark { display:grid!important; width:40px!important; height:40px!important; min-width:40px!important; } #app #sidePanel .genetics-lab-window:is([data-facility="clinic"],[data-facility="pokemart"]) .genetics-lab-hero h2 { font-size:21px!important; } } #app :is(#socialInvite,#pvpInvite,#tradeDialog,#professorTransferDialog)[aria-hidden=true]{visibility:hidden!important} /* pk-style-source:105 */ /* /pokemon-hub-v2350.css */ /* 2.37.1 — Partner Deck. Quiet habitat, clear identity and equipment below the portrait. */ :root { --ph-ink:#173b55;--ph-muted:#486a83;--ph-blue:#0877c7;--ph-line:#c4dfef;--ph-ice:#f1f8fe;--ph-soft:#e6f3fd; } #app .ph-empty-battle-slot { opacity:.42;pointer-events:none;filter:grayscale(1); } #app #sidePanel#sidePanel#sidePanel.is-pokemon-detail-panel { width:min(1000px,calc(100vw - 32px))!important;height:auto!important;min-height:0!important;max-width:calc(100vw - 32px)!important;max-height:calc(100dvh - 32px)!important; padding:0!important;background:var(--ui-card,#f8fbff)!important;border:1px solid #ffffffc9!important;border-radius:24px!important;box-shadow:0 28px 90px #102f5e61,0 0 0 1px #94b8d33b!important;z-index:var(--window-layer-panel)!important; } #app #sidePanel#sidePanel#sidePanel.is-pokemon-detail-panel>#sidePanelContent { padding:0!important;position:static;overflow:auto!important;scrollbar-gutter:auto!important;min-height:0!important;max-height:calc(100dvh - 36px)!important; } #app #sidePanel#sidePanel#sidePanel.is-pokemon-detail-panel>.panel-close { top:10px!important;right:10px!important;width:44px!important;height:44px!important;min-height:44px!important;border-radius:14px!important; } #app #sidePanel#sidePanel.is-pokemon-detail-panel:has([data-hub-modal])>.panel-close { visibility:hidden!important; } #app #sidePanel .ph-hub { padding:0;margin:0;min-width:0;isolation:isolate;color:var(--ph-ink);font:14px/1.4 "Segoe UI",sans-serif; } #app #sidePanel .ph-hub * { box-sizing:border-box;text-shadow:none; } #app #sidePanel .ph-hub :is(h1,h2,h3,p,dl,dd) { margin:0;font-family:inherit!important; } #app #sidePanel .ph-hub :is(b,strong,h1,h2,h3) { font-family:inherit!important;font-weight:700; } #app #sidePanel .ph-hub h1 { font-size:28px;line-height:1.1;letter-spacing:-.03em;overflow-wrap:anywhere; } #app #sidePanel .ph-hub h2 { font-size:18px;line-height:1.25;letter-spacing:-.02em; } #app #sidePanel .ph-hub h3 { font-size:16px;line-height:1.25;overflow-wrap:anywhere; } #app #sidePanel .ph-hub small { font:12px/1.35 "Segoe UI",sans-serif;color:var(--ph-muted); } #app #sidePanel .ph-hub :is(i,em) { font-style:normal; } #app #sidePanel .ph-hub .ph-icon { display:inline-block;width:22px;height:22px;vertical-align:middle;flex:none;max-width:none; } #app #sidePanel .ph-hub button { display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;min-height:44px;min-width:0;max-width:100%;width:auto;height:auto;margin:0;padding:9px 14px; border:1px solid var(--ui-line,#d2e1ef);border-radius:12px;background:var(--ui-card,#fff);color:var(--ph-ink);box-shadow:0 2px 6px #153a6020;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s; font:650 14px/1.3 "Segoe UI",sans-serif!important;letter-spacing:normal;text-transform:none;cursor:pointer;touch-action:manipulation;overflow-wrap:anywhere; } #app #sidePanel .ph-hub button:hover:not(:disabled) { background:var(--ui-paper,#eaf6ff);border-color:var(--ui-line,#7fb9df); } #app #sidePanel .ph-hub button:active:not(:disabled) { transform:translateY(1px);box-shadow:0 1px 3px #153a6020; } #app #sidePanel .ph-hub :is(button,select,summary):focus-visible { outline:3px solid #087acc!important;outline-offset:3px!important; } #app #sidePanel .ph-hub button:disabled { cursor:not-allowed;color:var(--ui-muted,#7791a3);background:var(--ui-paper,#edf3f7);border-color:var(--ui-line,#d3e1eb);box-shadow:none;opacity:1; } #app #sidePanel .ph-hub .ph-button.is-primary { background:linear-gradient(125deg,#087fcd,#245ccd);border-color:transparent;box-shadow:0 5px 12px #116cca2b;color:#fff; } #app #sidePanel .ph-hub .ph-button.is-primary:hover:not(:disabled) { background:#0877c7; } #app #sidePanel .ph-hub .ph-button.is-primary:disabled { background:var(--ui-soft,#e3edf5);border-color:var(--ui-line,#c3d8e8);color:var(--ui-muted,#69869b);box-shadow:none; } #app #sidePanel .ph-hub .ph-button.is-quiet { background:transparent;border-color:transparent;box-shadow:none;color:var(--ui-muted,#39799f); } #app #sidePanel .ph-hub .ph-button.is-icon { width:44px;padding:10px;flex:none; } #app #sidePanel .ph-header { display:flex;align-items:center;gap:12px;padding:7px 62px 7px 12px;min-height:60px;border-bottom:1px solid var(--ui-line,#e0eaf2);background:var(--ui-card,#fff); } #app #sidePanel .ph-header-label { font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--ui-muted,#486a83); } #app #sidePanel .ph-roster { display:flex;gap:7px;min-width:0;margin-left:auto; } #app #sidePanel .ph-hub .ph-roster button { width:44px;min-width:44px;height:44px;padding:2px;border-radius:50%;border-color:transparent;background:var(--ui-paper,#f0f6fc);box-shadow:none; } #app #sidePanel .ph-roster button[aria-pressed=true] { border-color:#1487d9;background:var(--ui-paper,#e0f2ff);box-shadow:0 0 0 2px #fff,0 0 0 4px #269cdc; } #app #sidePanel .ph-roster button>span {display:block; } #app #sidePanel .ph-roster button>b { position:absolute;right:1px;bottom:0;border-radius:5px;padding:0 3px; } #app #sidePanel .ph-roster button>i { position:absolute;top:-2px;left:1px;color:var(--ui-accent,#1684d9);font-size:10px; } #app #sidePanel .ph-hub :is(.ph-roster-art,.ph-roster-art img,.ph-item-art,.ph-item-art img,.ph-evolution-portrait,.ph-evolution-portrait img) { display:block;position:static;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;image-rendering:auto;transform:none;filter:none;background:none; } #app #sidePanel .ph-hub :is(.ph-roster-select,.ph-skill-select) { display:none; } #app #sidePanel .ph-hub select { min-height:44px;min-width:0;max-width:100%;padding:6px 10px;border:1px solid var(--ui-line,#c3dfef);border-radius:12px;background:var(--ui-card,#f4faff);color:var(--ph-ink);font:650 14px "Segoe UI",sans-serif; } /* Identity, portrait and equipment have separate, deliberate reading zones. */ #app #sidePanel .ph-layout { display:grid;grid-template-columns:330px minmax(0,1fr);gap:22px;padding:14px;align-items:start; } #app #sidePanel .ph-identity { min-width:0;display:grid;gap:10px; } #app #sidePanel .ph-specimen { min-width:0; } #app #sidePanel .ph-exhibit { position:relative;isolation:isolate;height:228px;min-height:228px;display:grid;grid-template-rows:minmax(0,1fr);border-radius:22px;overflow:hidden;background:radial-gradient(ellipse at 70% 55%,#fff8,transparent 58%),linear-gradient(150deg,#def7ff,#b9e4fa 54%,#86b9ed);box-shadow:inset 0 0 0 1px #fff9; } .ph-type-scene { position:absolute;inset:0;overflow:hidden;pointer-events:none;background:var(--ui-soft,#d7e9f4); } .ph-scene-panorama { position:absolute;inset:-4px;filter:blur(2.2px) saturate(.6) contrast(.82) brightness(1.08);transform:scale(1.025);transform-origin:50% 65%;animation:ph-habitat-pan 18s ease-in-out infinite alternate; } #app #sidePanel .ph-hub .ph-scene-art { display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;image-rendering:auto;pointer-events:none; } .ph-scene-art--secondary { mask-image:linear-gradient(90deg,transparent 38%,#0003 55%,#000c 80%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 38%,#0003 55%,#000c 80%,#000 100%); } .ph-type-scene:after { content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,#f7fbff66,transparent 72%),linear-gradient(180deg,#e8f5ff20,#eaf4ff38); } @keyframes ph-habitat-pan { to { transform:translate3d(-3px,-2px,0) scale(1.045); } } #app #sidePanel .ph-identity-intro { position:relative;z-index:2;padding:0 70px 11px 2px;background:transparent;border:0; } #app #sidePanel .ph-identity-heading { display:flex;align-items:center;gap:7px;min-height:21px;color:var(--ui-muted,#47718d);font-size:11px;letter-spacing:.06em;font-weight:700; } #app #sidePanel .ph-identity h1 { margin:4px 0 8px;font-size:28px;line-height:1.04;letter-spacing:-.04em; } #app #sidePanel .ph-level { position:absolute;right:0;top:0;display:grid;gap:3px;justify-items:center;min-width:58px;padding:9px 8px;background:linear-gradient(145deg,#fafdff,#e0f0ff);border:1px solid var(--ui-line,#bddcf2);border-radius:18px;color:var(--ui-accent,#166eb0);font-size:27px;line-height:1;box-shadow:inset 0 2px 0 #fff,0 3px 0 #c8e2f4;letter-spacing:-.04em; } #app #sidePanel .ph-level small {letter-spacing:0; } #app #sidePanel .ph-types { display:flex;align-items:center;gap:6px;flex-wrap:wrap; } #app #sidePanel .ph-types .pokemon-type-badge { font-size:11px;min-height:27px;padding:4px 8px;box-shadow:none;color:color-mix(in srgb,var(--type-color) 28%,#173b55); } #app #sidePanel .ph-types .pokemon-type-badge b { font-size:11px;line-height:1.1; } #app #sidePanel .ph-types .pokemon-type-badge .type-icon { width:17px;height:17px; } #app #sidePanel .ph-gender { display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border:1px solid var(--ui-line,#d8e7f1);border-radius:9px;background:var(--ui-paper,#edf6fc);font-size:11px;color:var(--ui-muted,#395f7b); } #app #sidePanel .ph-gender .ph-icon { width:15px;height:15px; } #app #sidePanel .ph-dex-number { color:var(--ui-muted,#357294);font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.08em; } #app #sidePanel .ph-shiny-label { color:#7862ac;font-size:10px; } #app #sidePanel .ph-level strong { font-size:inherit; } #app #sidePanel .ph-gender[data-gender=female] { color:var(--ui-muted,#86527f);background:var(--ui-paper,#f7f0f8);border-color:#ead9ee; } #app #sidePanel .ph-hero-status { position:absolute;z-index:2;top:6px;left:10px;display:inline-flex;align-items:center;gap:4px;margin:0;padding:4px 7px;border:1px solid var(--ui-line,#d1e4ef);border-radius:8px;background:var(--ui-card,#f4faff);color:var(--ui-muted,#325872);font-size:10px;line-height:1.25;box-shadow:0 2px 5px #12384e10; } #app #sidePanel .ph-hero-status .ph-icon { width:13px;height:13px; } #app #sidePanel .ph-stage { position:relative;inset:auto;min-height:0;height:auto;isolation:isolate;padding:18px 28px 8px; } #app #sidePanel .ph-stage-platform { position:absolute;bottom:5px;left:23%;width:54%;height:22px;background:radial-gradient(ellipse,#42667b40,transparent 68%);border-radius:50%;pointer-events:none; } #app #sidePanel .ph-hub[data-hub-motion-paused=true] .ph-scene-panorama { animation-play-state:paused; } #app #sidePanel .ph-hub :is(.ph-portrait,.ph-portrait img) { display:block;position:absolute;inset:18px 26px 8px;width:calc(100% - 52px);height:calc(100% - 26px);max-width:none;max-height:none;object-fit:contain;image-rendering:auto;transform:none;filter:drop-shadow(0 6px 4px #294b7333); } #app #sidePanel .ph-hub .ph-portrait img { position:static;inset:auto;width:100%;height:100%;filter:none;transform:none; } #app #sidePanel .ph-hub .ph-motion { position:absolute;right:10px;bottom:8px;width:44px;min-height:44px;padding:14px;border:1px solid #fff9;border-radius:50%;background:var(--ui-card,#fff);color:var(--ui-muted,#346e97);box-shadow:none; } #app #sidePanel .ph-motion .ph-icon { width:14px;height:14px; } #app #sidePanel .ph-equipment { position:relative;margin-top:10px; } #app #sidePanel .ph-equipment .ph-section-head { display:flex;margin-bottom:6px; } #app #sidePanel .ph-equipment .ph-section-head h2 { font-size:12px; } #app #sidePanel .ph-equipment .ph-section-head .ph-icon { width:15px;height:15px; } #app #sidePanel .ph-equipment .ph-section-head small { font-size:10px; } #app #sidePanel .ph-gear-slots { display:grid;grid-template-columns:1fr 1fr;gap:8px; } #app #sidePanel .ph-hub .ph-gear-slot { display:flex;gap:8px;align-items:center;justify-content:flex-start;min-height:50px;padding:7px 9px;text-align:left;background:var(--ui-card,#fff);border:1px solid var(--ui-line,#d3e4ef);border-radius:13px;box-shadow:0 2px 0 #dcebf5; } #app #sidePanel .ph-gear-art { position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;color:var(--ui-muted,#4f97c1);background:var(--ui-paper,#e8f4ff);border:1px solid var(--ui-line,#d7eaf7);border-radius:10px; } #app #sidePanel .ph-gear-art>.ph-icon { width:23px;height:23px; } #app #sidePanel .ph-gear-art>i { position:absolute;right:-4px;bottom:-3px;display:grid;place-items:center;width:15px;height:15px;border:2px solid var(--ui-line,#fff);border-radius:50%;background:#248dcd;color:#fff; } #app #sidePanel .ph-gear-art>i .ph-icon { width:9px;height:9px; } #app #sidePanel .ph-gear-slot>span:last-child { display:grid;gap:2px;min-width:0; } #app #sidePanel .ph-gear-slot small { display:block;font-size:9px;font-weight:700;letter-spacing:.07em;color:var(--ui-muted,#486a83); } #app #sidePanel .ph-gear-slot b { font-size:11px;line-height:1.15; } #app #sidePanel .ph-gear-slot em { display:none; } #app #sidePanel .ph-gear-slot.is-filled small { display:none; } #app #sidePanel .ph-gear-slot.is-filled em { display:block;font-size:9px;color:var(--ui-muted,#34779c); } #app #sidePanel .ph-gear-slot[aria-expanded=true] { outline:2px solid #138bdf;outline-offset:2px; } #app #sidePanel .ph-gear-slot.is-drag-over { outline:3px solid #2aa585;background:#e0ffef; } #app #sidePanel .ph-field-notes { display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:8px;padding:10px 2px 7px; } #app #sidePanel .ph-body-facts { display:grid;grid-template-columns:1fr 1fr;gap:8px; } #app #sidePanel .ph-body-facts>span { display:grid;grid-template-columns:16px 1fr;gap:1px 4px;align-items:center; } #app #sidePanel .ph-body-facts .ph-icon { grid-row:1/3;width:16px;height:16px;color:var(--ui-muted,#6a91ac); } #app #sidePanel .ph-body-facts small { font-size:10px; } #app #sidePanel .ph-body-facts b { font-size:12px;white-space:nowrap; } #app #sidePanel .ph-capture { display:flex;align-items:center;gap:6px;min-width:0;padding-left:8px;border-left:1px solid var(--ui-line,#dce8f1); } #app #sidePanel .ph-capture>span { display:grid;min-width:0; } #app #sidePanel .ph-capture small { font-size:9px; } #app #sidePanel .ph-capture b {line-height:1.2;overflow-wrap:anywhere; } #app #sidePanel .ph-hub :is(.ph-capture-art,.ph-capture-art img) { display:block;position:static;width:26px;height:26px;object-fit:contain;flex:none;transform:none; } #app #sidePanel .ph-capture>.ph-icon { width:23px;height:23px;color:var(--ui-accent,#2479b3); } #app #sidePanel .ph-record { display:flex;justify-content:space-between;gap:6px;border-top:1px solid var(--ui-line,#e0eaf2);padding:5px 2px 0;font-size:9px;color:var(--ui-muted,#688399); } #app #sidePanel .ph-passport-preview { font-size:9px; } #app #sidePanel .ph-vitals { display:grid;gap:8px; } #app #sidePanel .ph-meter>span { display:flex;align-items:center;gap:5px;color:var(--ph-muted);font-size:11px; } #app #sidePanel .ph-meter b { margin-left:auto;color:var(--ph-ink);font-size:12px;font-variant-numeric:tabular-nums; } #app #sidePanel .ph-meter .ph-icon { width:15px;height:15px; } #app #sidePanel .ph-meter>i { display:block;height:5px;background:var(--ui-soft,#e0eaf3);border-radius:6px;overflow:hidden;margin-top:4px; } #app #sidePanel .ph-meter u { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#36acdf,#3b77ce);text-decoration:none; } #app #sidePanel .ph-meter--hp>i { height:7px;background:var(--ui-soft,#daece7); } #app #sidePanel .ph-meter--hp u { background:linear-gradient(90deg,#278c7c,#54c3a0); } #app #sidePanel .ph-meter--heart u { background:linear-gradient(90deg,#8570c1,#b699d7); } #app #sidePanel .ph-meter-note { display:flex;justify-content:space-between;font-size:9px!important;margin-top:3px; } #app #sidePanel .ph-resources { display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--ui-line,#e0eaf2); } #app #sidePanel .ph-energy { display:grid;grid-template-columns:1fr 1fr;gap:1px 6px; } #app #sidePanel .ph-energy>span { grid-column:1/-1;font-size:10px;color:var(--ph-muted); } #app #sidePanel .ph-energy .ph-icon { width:14px;height:14px;margin-right:4px; } #app #sidePanel .ph-energy>b { font-size:13px; } #app #sidePanel .ph-energy small { display:block;font-size:8px; } #app #sidePanel .ph-resources .ph-meter>span { flex-wrap:wrap;font-size:10px; } #app #sidePanel .ph-resources .ph-meter b { width:100%;margin-left:19px; } #app #sidePanel .ph-identity-actions { display:flex;gap:8px; } #app #sidePanel .ph-identity-actions>* { flex:1; } #app #sidePanel .ph-hub .ph-identity-actions button { font-size:12px!important;padding:8px;background:var(--ui-paper,#e7f3fc);border-color:var(--ui-line,#d6e8f5);box-shadow:none; } #app #sidePanel .ph-identity-actions:not(:has(button)) { display:none; } /* Clean stat rails; visual strength, invested training and nature remain distinct. */ #app #sidePanel .ph-work-area { min-width:0;display:grid;gap:6px; } #app #sidePanel .ph-pages { display:flex;gap:6px;border-bottom:1px solid var(--ui-line,#e2ebf3); } #app #sidePanel .ph-hub .ph-pages button { min-height:44px;padding:7px 16px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ui-muted,#6a859b); } #app #sidePanel .ph-hub .ph-pages button[aria-selected=true] { color:var(--ui-accent,#136fb6);background:none;box-shadow:inset 0 -3px #198fce; } #app #sidePanel .ph-pages .ph-icon { width:18px;height:18px; } #app #sidePanel .ph-workspace,.ph-screen { min-width:0; } #app #sidePanel .ph-screen { display:none; } #app #sidePanel .ph-hub[data-hub-view=loadout] .ph-screen--loadout,#app #sidePanel .ph-hub[data-hub-view=genes] .ph-screen--genes { display:grid;gap:6px; } #app #sidePanel .ph-section { min-width:0;padding:0;border:0;background:none; } #app #sidePanel .ph-section-head { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px; } #app #sidePanel .ph-section-head h2 { display:flex;align-items:center;gap:7px;font-size:16px;letter-spacing:-.03em; } #app #sidePanel .ph-section-head h2 .ph-icon { width:19px;height:19px;color:var(--ui-accent,#247bb5); } #app #sidePanel .ph-points { font-size:10px;color:var(--ui-muted,#496d89);white-space:nowrap; } #app #sidePanel .ph-points b { color:var(--ui-accent,#176fa7); } #app #sidePanel .ph-parameters { padding:0; } #app #sidePanel .ph-training-toolbar { display:grid;grid-template-columns:1fr 1.15fr;gap:14px;align-items:center;margin-bottom:6px;padding:5px 9px;border:1px solid var(--ui-line,#d6e8f5);background:var(--ui-paper,#edf7ff);border-radius:12px; } #app #sidePanel .ph-pill-wallet { display:flex;gap:8px;align-items:center;min-width:0; } #app #sidePanel .ph-pill-wallet .ph-pill-art,.ph-pill-wallet .ph-pill-art img { display:block;width:38px;height:38px;max-width:38px;object-fit:contain;flex:none;transform:none;filter:none; } #app #sidePanel .ph-pill-wallet>span { display:grid;gap:1px;min-width:0; } #app #sidePanel .ph-pill-wallet b { font-size:12px;display:flex;align-items:center;gap:8px; } #app #sidePanel .ph-pill-wallet strong { color:var(--ui-accent,#1676b1);font-size:17px;line-height:1; } #app #sidePanel .ph-pill-wallet small { font-size:10px; } #app #sidePanel .ph-training-budget { display:grid;grid-template-columns:1fr auto;gap:4px 8px;font-size:10px; } #app #sidePanel .ph-training-budget>i { grid-column:1/-1;display:block;height:4px;background:var(--ui-soft,#e3ecf5);border-radius:4px;overflow:hidden; } #app #sidePanel .ph-training-budget>small { grid-column:2;grid-row:1;font-size:9px; } #app #sidePanel .ph-training-budget u { display:block;height:100%;background:linear-gradient(90deg,#18b6d5,#4376d4);border-radius:inherit; } #app #sidePanel .ph-stats { display:grid;gap:2px; } #app #sidePanel .ph-stat-row { --stat-color:#328974;--stat-bg:#ecf8f2;display:grid;grid-template-columns:29px minmax(90px,1fr) 48px minmax(115px,1.4fr) 44px;gap:8px;align-items:center;min-width:0;min-height:44px;padding:0 3px 0 8px;border-radius:11px;background:#fff linear-gradient(90deg,var(--stat-bg),#fff 56%);border:0;box-shadow:inset 0 0 0 1px #e7eef4; } #app #sidePanel .ph-stat-row[data-stat-row=attack] { --stat-color:#bd8057;--stat-bg:#fff6ed; } #app #sidePanel .ph-stat-row[data-stat-row=defense] { --stat-color:#4b8fc4;--stat-bg:#eef7ff; } #app #sidePanel .ph-stat-row[data-stat-row=specialAttack] { --stat-color:#9c70b3;--stat-bg:#f7f0fd; } #app #sidePanel .ph-stat-row[data-stat-row=specialDefense] { --stat-color:#7587bc;--stat-bg:#f1f4ff; } #app #sidePanel .ph-stat-row[data-stat-row=speed] { --stat-color:#39969f;--stat-bg:#eefbfa; } #app #sidePanel .ph-stat-icon { color:var(--stat-color);display:grid;place-items:center;width:28px;height:30px; } #app #sidePanel .ph-stat-icon .ph-icon { width:23px;height:23px;fill:color-mix(in srgb,var(--stat-color) 12%,transparent); } #app #sidePanel .ph-stat-label { font-size:12px;line-height:1.2; } #app #sidePanel .ph-nature-mark { display:block;font-size:9px!important;color:#2a8065!important;font-weight:700!important; } #app #sidePanel .is-down .ph-nature-mark { color:#b23d4b!important; } #app #sidePanel .ph-stat-row>strong { display:flex;align-items:baseline;gap:2px;flex-wrap:wrap;font-size:23px;line-height:1;color:var(--ui-ink,#1d3e5b); } #app #sidePanel .ph-stat-row>strong em { font-size:8px;color:#3e826e; } #app #sidePanel .ph-stat-meta { min-width:0;display:grid;grid-template-columns:auto 1fr;gap:4px 5px;font-size:9px;color:var(--ui-muted,#4c697f); } #app #sidePanel .ph-stat-training { display:contents; } #app #sidePanel .ph-stat-training>span { font-size:11px;color:var(--ui-muted,#58738b);white-space:nowrap; } #app #sidePanel .ph-stat-training>span b { color:var(--ui-muted,#335d7b); } #app #sidePanel .ph-stat-training>i { grid-column:1/-1;grid-row:2;display:block;height:5px;border-radius:3px;overflow:hidden;background:var(--ui-soft,#e7edf3); } #app #sidePanel .ph-stat-training u { display:block;height:100%;border-radius:inherit;text-decoration:none; } #app #sidePanel .ph-train-reason { grid-column:2;grid-row:1;text-align:right;font-size:9px; } #app #sidePanel .ph-hub .ph-train { width:44px;min-height:44px;padding:8px;border:0;border-radius:9px;color:var(--ui-accent,#1574b4);background:var(--ui-paper,#eaf5ff);box-shadow:none; } #app #sidePanel .ph-hub .ph-train:not(:disabled):hover { color:#fff;background:#187ebd;box-shadow:0 4px 10px #1682c432; } #app #sidePanel .ph-hub .ph-train:disabled { background:var(--ui-paper,#f2f5f8);color:var(--ui-muted,#9baebb); } #app #sidePanel .ph-train .ph-icon { width:17px;height:17px; } #app #sidePanel .ph-nature { margin-top:6px; } #app #sidePanel .ph-nature summary { display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px;font-size:10px;color:var(--ui-muted,#536f87);cursor:pointer; } #app #sidePanel .ph-nature summary>span { display:flex;gap:5px;align-items:center;flex-wrap:wrap; } #app #sidePanel .ph-nature .is-up { color:#268064; } #app #sidePanel .ph-nature .is-down { color:#b23d4b; } #app #sidePanel .ph-nature .ph-icon { width:15px;height:15px; } #app #sidePanel .ph-nature p { padding:6px 0;font-size:11px;color:var(--ui-muted,#56748c); } #app #sidePanel .ph-genome { position:relative;padding:6px 10px;background:var(--ui-paper,#edf4fb);border:1px solid var(--ui-line,#dce8f5);border-radius:12px; } #app #sidePanel .ph-genome .ph-section-head { margin-bottom:7px;padding-right:28px; } #app #sidePanel .ph-genome h2 { font-size:13px; } #app #sidePanel .ph-gene-ribbon { display:grid;grid-template-columns:repeat(6,minmax(0,1fr)); } #app #sidePanel .ph-gene-cell { display:grid;grid-template-columns:1fr auto;align-items:baseline;padding:0 8px;border-right:1px solid var(--ui-line,#d2e0ef); } #app #sidePanel .ph-gene-cell:first-child { padding-left:0; } #app #sidePanel .ph-gene-cell:last-child { padding-right:0;border:0; } #app #sidePanel .ph-gene-cell>span { font-size:9px;color:var(--ui-muted,#53748c); } #app #sidePanel .ph-gene-cell>b { font-size:14px;line-height:1; } #app #sidePanel .ph-gene-cell small { display:none; } #app #sidePanel .ph-gene-cell>i { grid-column:1/-1;display:block;height:3px;border-radius:3px;background:var(--ui-card,#fff);overflow:hidden; } #app #sidePanel .ph-gene-cell u { display:block;height:100%;border-radius:inherit;background:#7299c7; } #app #sidePanel .ph-genome-code summary { position:absolute;right:1px;top:0;display:flex;align-items:center;justify-content:center;width:44px;min-height:44px;color:var(--ui-muted,#486e8b);cursor:pointer;border-radius:10px;list-style:none; } #app #sidePanel .ph-genome-code summary>span { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); } #app #sidePanel .ph-genome-code .ph-icon { width:14px;height:14px; } #app #sidePanel .ph-passport-body { padding:8px 0; } #app #sidePanel .ph-genome-code code { overflow-wrap:anywhere;font-size:11px; } #app #sidePanel .ph-genome-code p { margin:6px 0!important;font-size:11px;color:var(--ui-muted,#486e8b); } #app #sidePanel .ph-loadout { padding:0; } #app #sidePanel .ph-moves { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; } #app #sidePanel .ph-hub .ph-move { display:grid;grid-template-columns:1fr;grid-template-rows:36px auto auto;align-content:center;justify-items:center;gap:4px;min-height:80px;border:1px solid var(--ui-line,#dce9f3);background:var(--ui-card,#fff);border-radius:15px;box-shadow:0 3px 9px #214f7310;text-align:center; } #app #sidePanel .ph-move-art { display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--ui-paper,#eaf4fc);color:var(--ui-muted,#689bbb);box-shadow:0 0 0 3px #f3f8fc; } #app #sidePanel .ph-hub :is(.ph-skill-art,.ph-skill-art img) { display:block;position:static;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;transform:none;border-radius:12px; } #app #sidePanel .ph-move b { font-size:11px;line-height:1.15;align-self:end; } #app #sidePanel .ph-move small { font-size:10px;align-self:start; } #app #sidePanel .ph-move kbd { position:absolute;top:6px;left:6px;border-radius:4px;background:var(--ui-paper,#e9f1f8);color:var(--ui-muted,#4e7695);padding:1px 4px;font:9px/12px "Segoe UI",sans-serif; } #app #sidePanel .ph-move.is-empty { border-style:dashed;box-shadow:none;background:var(--ui-card,#f7fbfe); } #app #sidePanel .ph-move.is-empty .ph-move-art { background:var(--ui-paper,#eaf4fc);box-shadow:none;border:1px dashed var(--ui-line,#bad6e9); } #app #sidePanel .ph-helper { margin-top:7px!important;font-size:10px;color:var(--ph-muted); } #app #sidePanel .ph-evolution { display:grid;gap:14px; } #app #sidePanel .ph-evolution-path { display:grid;grid-template-columns:40px 20px 80px minmax(0,1fr);align-items:center;gap:10px; } #app #sidePanel .ph-current-form { width:40px;height:40px; } #app #sidePanel .ph-evolution-art { width:80px;height:80px;background:var(--ui-paper,#eaf5ff);border:1px solid var(--ui-line,#bdd9ed);border-radius:22px; } #app #sidePanel .ph-evolution-path h3 { font-size:18px; } #app #sidePanel .ph-evolution-path small { font-size:11px; } #app #sidePanel .ph-evolution-requirements { display:grid;gap:12px; } #app #sidePanel .ph-evolution-level { display:grid;grid-template-columns:18px 1fr;gap:5px; } #app #sidePanel .ph-evolution-level>span { display:flex;justify-content:space-between; } #app #sidePanel .ph-evolution-level>i { grid-column:2;height:5px;background:var(--ui-soft,#e1edf5);border-radius:5px;overflow:hidden; } #app #sidePanel .ph-evolution-level u { display:block;height:100%;background:#77b9e3; } #app #sidePanel .ph-evolution-item { display:flex;align-items:center;gap:8px; } #app #sidePanel .ph-evolution-item>span { flex:1; } #app #sidePanel .ph-evolution-item small { display:block; } #app #sidePanel .ph-hub :is(.ph-evolution-item-art,.ph-evolution-item-art img) { width:28px;height:28px;object-fit:contain; } #app #sidePanel .ph-evolution .is-met,#app #sidePanel .ph-evolution-state.is-ready { color:#3b9079; } #app #sidePanel .ph-evolution-state { font-size:12px;color:var(--ph-muted); } #app #sidePanel .ph-final-form { display:flex;gap:14px;align-items:center; } #app #sidePanel .ph-development-note { font-size:12px;color:var(--ph-muted);padding:0 7px; } #app #sidePanel .ph-battle-lock { padding:5px 16px;background:var(--ui-paper,#e0f0fc);color:var(--ui-muted,#4d7893);font-size:12px; } #app #sidePanel .ph-battle-lock .ph-icon { width:16px;height:16px; } #app #sidePanel .ph-battle-lock--header { display:inline-flex;align-items:center;gap:5px;border-radius:9px;padding:5px 8px; } #app #sidePanel .ph-battle-lock--mobile { display:none; } #app #sidePanel .ph-hub[data-hub-editor=equipment] .ph-summary,#app #sidePanel .ph-hub[data-hub-editor=equipment] .ph-pages { display:none; } #app #sidePanel .ph-picker { min-width:0; } #app #sidePanel .ph-equipment-desk { background:var(--ui-card,#fff);border:1px solid var(--ui-line,#bedbee);border-radius:18px;padding:14px; } #app #sidePanel .ph-equipment-list { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px; } #app #sidePanel .ph-equipment-list>article { display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:10px;background:var(--ui-card,#f4faff);border:1px solid var(--ui-line,#cee2f1);border-radius:14px; } #app #sidePanel .ph-item-preview { width:36px;height:36px;position:relative; } #app #sidePanel .ph-item-preview>b { position:absolute;right:-3px;bottom:-2px;background:var(--ui-card,#fff);border-radius:5px;font-size:10px; } #app #sidePanel .ph-equipment-list h3 { font-size:13px; } #app #sidePanel .ph-equipment-list p { font-size:11px;color:var(--ph-muted); } #app #sidePanel .ph-equipment-list>article>button { grid-column:1/-1; } #app #sidePanel .ph-picker>footer { display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--ui-line,#d6e6f1);margin-top:12px;padding-top:10px; } #app #sidePanel .ph-picker>footer small { max-width:200px;font-size:11px; } #app #sidePanel .ph-empty { padding:20px;text-align:center; } #app #sidePanel .ph-empty>.ph-icon { width:32px;height:32px;display:block;margin:0 auto 8px; } #app #sidePanel .ph-empty p { font-size:12px;color:var(--ph-muted);margin-top:8px; } #app #sidePanel .ph-modal-layer { position:absolute;inset:0;z-index:500;display:grid;place-items:center;padding:16px;isolation:isolate; } #app #sidePanel .ph-modal-backdrop { position:absolute;inset:0;border-radius:23px;background:#173f6257;backdrop-filter:blur(2px);z-index:-1; } #app #sidePanel .ph-hub .ph-skill-modal { position:relative;z-index:501;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(750px,100%);min-height:0;padding:16px;background:var(--ui-card,#f8fcff);border:1px solid var(--ui-line,#a8cde6);border-radius:22px;box-shadow:0 18px 60px #14375955;overflow:hidden; } #app #sidePanel .ph-skill-modal>.ph-section-head { margin-bottom:12px; } #app #sidePanel .ph-skill-library { display:grid;grid-template-columns:210px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px;max-height:370px;overflow:hidden; } #app #sidePanel .ph-skill-list { display:flex;flex-direction:column;gap:7px;padding:3px;min-height:0;overflow:auto;scrollbar-width:thin; } #app #sidePanel .ph-hub .ph-skill-list>button { display:flex;align-items:center;justify-content:flex-start;gap:8px;text-align:left;padding:8px;flex:none;background:var(--ui-card,#fff);box-shadow:0 2px 0 #d5e5f0; } #app #sidePanel .ph-skill-list>button>span:first-child { width:36px;height:36px;flex:none; } #app #sidePanel .ph-skill-list>button>span:nth-child(2) { display:flex;flex:1;flex-direction:column;gap:3px;min-width:0; } #app #sidePanel .ph-skill-list>button b { font-size:12px; } #app #sidePanel .ph-skill-list>button small { font-size:10px; } #app #sidePanel .ph-skill-list>button>.ph-icon { display:none; } #app #sidePanel .ph-skill-list>button[aria-pressed=true] { background:var(--ui-paper,#e3f2ff);border-color:#59a6db; } #app #sidePanel .ph-skill-detail { display:flex;flex-direction:column;min-width:0;min-height:0;padding:12px;border-radius:16px;border:1px solid var(--ui-line,#d2e5f3);background:var(--ui-paper,#eaf4fc);overflow:hidden; } #app #sidePanel .ph-skill-detail>header { display:flex;gap:10px;flex:none; } #app #sidePanel .ph-hub :is(.ph-detail-art,.ph-detail-art img) { display:block;width:40px;height:40px;object-fit:contain;flex:none; } #app #sidePanel .ph-skill-detail>header small { font-size:11px; } #app #sidePanel .ph-detail-body { flex:1;scrollbar-width:thin; } #app #sidePanel .ph-detail-body p { margin:10px 0;font-size:12px;line-height:1.5; } #app #sidePanel .ph-skill-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px; } #app #sidePanel .ph-skill-metrics>span { display:flex;flex-direction:column;gap:4px;font-size:10px;color:var(--ph-muted); } #app #sidePanel .ph-skill-metrics b { font-size:14px;color:var(--ph-ink); } #app #sidePanel .ph-upgrade-hint { padding:7px;background:var(--ui-soft,#dceefa);border-radius:8px;font-size:11px!important; } #app #sidePanel .ph-hub .ph-info-toggle { width:100%;justify-content:flex-start;flex:none;padding:8px 0;font-size:12px!important; } #app #sidePanel .ph-picker-actions { display:flex;gap:7px;flex:none;margin-top:6px;padding-bottom:3px; } #app #sidePanel .ph-picker-actions>button { flex:1;font-size:12px!important; } /* Mobile is a stacked partner card, not a shrunken desktop table. */ #app #sidePanel .ph-hub:has(.ph-battle-lock--header) .ph-header-label { display:none; } #app #sidePanel .ph-hub[data-hub-view=genes] .ph-identity>:not(.ph-specimen), #app #sidePanel .ph-hub[data-hub-editor=equipment] .ph-identity>:not(.ph-specimen) { display:none; } @media(max-height:800px) and (min-width:901px) { #app #sidePanel .ph-layout { padding:12px;gap:18px;grid-template-columns:310px minmax(0,1fr); } #app #sidePanel .ph-exhibit { height:188px;min-height:188px; } #app #sidePanel .ph-work-area { gap:6px; } #app #sidePanel .ph-hub[data-hub-view=loadout] .ph-screen--loadout { gap:6px; } #app #sidePanel .ph-identity { gap:7px; } } @media(max-width:900px),(max-height:650px) { #app #sidePanel#sidePanel#sidePanel.is-pokemon-detail-panel { inset:8px 8px auto!important;transform:none!important;width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:calc(var(--pk-mobile-vv-height,100dvh) - 16px)!important;border-radius:22px!important; } #app #sidePanel#sidePanel#sidePanel.is-pokemon-detail-panel>#sidePanelContent { max-height:calc(var(--pk-mobile-vv-height,100dvh) - 20px)!important;scroll-padding-top:64px; } #app #sidePanel#sidePanel#sidePanel.is-pokemon-detail-panel>.panel-close { top:7px!important;right:7px!important; } #app #sidePanel .ph-header { position:sticky;top:0;z-index:20;min-height:58px;padding:6px 58px 6px 6px;gap:6px; } #app #sidePanel .ph-hub .ph-header>.ph-button { width:44px;padding:10px;flex:none; } #app #sidePanel .ph-header>.ph-button>span,#app #sidePanel .ph-header-label,#app #sidePanel .ph-roster,#app #sidePanel .ph-battle-lock--header { display:none; } #app #sidePanel .ph-battle-lock--mobile { display:block; } #app #sidePanel .ph-hub .ph-roster-select { display:block;flex:1; } #app #sidePanel .ph-layout { display:flex;flex-direction:column;padding:10px;gap:14px; } #app #sidePanel .ph-identity,#app #sidePanel .ph-work-area { width:100%;gap:10px; } #app #sidePanel .ph-exhibit { height:244px;min-height:244px; } #app #sidePanel .ph-identity h1 { font-size:30px; } #app #sidePanel .ph-vitals { grid-template-columns:1fr 1fr;gap:12px; } #app #sidePanel .ph-meter-note { display:none; } #app #sidePanel .ph-resources { padding:6px 0; } #app #sidePanel .ph-resources .ph-meter>span { flex-wrap:nowrap; } #app #sidePanel .ph-resources .ph-meter b { margin-left:auto;width:auto; } #app #sidePanel .ph-energy { display:flex;gap:5px;align-items:center;flex-wrap:wrap; } #app #sidePanel .ph-energy>span { width:100%; } #app #sidePanel .ph-energy>b { font-size:12px; } #app #sidePanel .ph-energy small { display:inline;margin-left:3px;font-size:8px; } #app #sidePanel .ph-pages>* { flex:1; } #app #sidePanel .ph-stat-row { grid-template-columns:25px minmax(0,1fr) auto 44px;grid-template-rows:auto auto;gap:5px 7px;padding:7px 5px 7px 8px;min-height:70px; } #app #sidePanel .ph-stat-icon { grid-column:1;grid-row:1; } #app #sidePanel .ph-stat-label { grid-column:2;grid-row:1;font-size:13px; } #app #sidePanel .ph-stat-row>strong { grid-column:3;grid-row:1;font-size:24px; } #app #sidePanel .ph-stat-meta { grid-column:1/4;grid-row:2; } #app #sidePanel .ph-hub .ph-train { grid-column:4;grid-row:1/3; } #app #sidePanel .ph-stat-training>span { font-size:11px; } #app #sidePanel .ph-train-reason { font-size:10px; } #app #sidePanel .ph-nature summary,#app #sidePanel .ph-genome-code summary { min-height:44px; } #app #sidePanel .ph-gene-cell { grid-template-columns:1fr;gap:4px;text-align:center;padding:0 5px; } #app #sidePanel .ph-gene-cell>span { font-size:9px; } #app #sidePanel .ph-gene-cell>b { font-size:15px; } #app #sidePanel .ph-training-toolbar { gap:8px;padding:7px;grid-template-columns:1fr 1fr; } #app #sidePanel .ph-training-budget { grid-template-columns:1fr;gap:2px; } #app #sidePanel .ph-training-budget>small { grid-column:1;grid-row:3; } #app #sidePanel .ph-genome .ph-points { font-size:9px; } #app #sidePanel .ph-moves { grid-template-columns:1fr 1fr; } #app #sidePanel .ph-hub .ph-move { grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;gap:3px 9px;min-height:70px;padding:9px;text-align:left;justify-items:start; } #app #sidePanel .ph-move-art { grid-row:1/3;width:40px;height:40px; } #app #sidePanel .ph-move b { font-size:12px; } #app #sidePanel .ph-move kbd { display:none; } #app #sidePanel .ph-hub[data-hub-view=genes] .ph-identity { display:none; } #app #sidePanel .ph-hub[data-hub-editor=equipment] .ph-exhibit { display:none; } #app #sidePanel .ph-hub[data-hub-editor=equipment] :is(.ph-identity-intro,.ph-type-scene,.ph-stage,.ph-field-notes,.ph-record) { display:none; } #app #sidePanel .ph-equipment-desk { padding:10px; } #app #sidePanel .ph-equipment-list>article { padding:7px;grid-template-columns:28px minmax(0,1fr);gap:6px; } #app #sidePanel .ph-item-preview { width:28px;height:28px; } #app #sidePanel .ph-equipment-list h3 { font-size:12px; } #app #sidePanel .ph-picker>footer small { font-size:10px;max-width:130px; } } @media(max-width:360px) { #app #sidePanel .ph-layout { padding:8px; } #app #sidePanel .ph-identity-intro { padding-left:2px; } #app #sidePanel .ph-identity h1 { font-size:26px; } #app #sidePanel .ph-exhibit { height:224px;min-height:224px; } #app #sidePanel .ph-hub .ph-gear-slot { padding:6px;gap:6px; } #app #sidePanel .ph-gear-slot b { font-size:10px; } #app #sidePanel .ph-gear-art { width:28px;height:28px; } #app #sidePanel .ph-field-notes { grid-template-columns:1fr; } #app #sidePanel .ph-capture { border:0;padding:4px 0; } #app #sidePanel .ph-capture small { font-size:9px; } #app #sidePanel .ph-capture b { font-size:11px; } #app #sidePanel .ph-body-facts b { font-size:12px; } #app #sidePanel .ph-hub .ph-move { grid-template-columns:30px minmax(0,1fr);gap:3px 7px;padding:8px 6px; } #app #sidePanel .ph-move-art { width:30px;height:30px; } #app #sidePanel .ph-move b { font-size:11px; } } @media(max-width:600px) { #app #sidePanel .ph-modal-layer { position:fixed;inset:8px;max-height:calc(var(--pk-mobile-vv-height,100dvh) - 16px);padding:8px; } #app #sidePanel .ph-hub .ph-skill-modal { padding:10px;border-radius:17px; } #app #sidePanel .ph-skill-modal>.ph-section-head { margin-bottom:7px; } #app #sidePanel .ph-skill-library { display:flex;flex-direction:column;gap:8px;max-height:440px; } #app #sidePanel .ph-skill-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:100px;flex:none;gap:5px; } #app #sidePanel .ph-hub .ph-skill-list>button { padding:6px;gap:6px;min-height:48px; } #app #sidePanel .ph-skill-list>button>span:first-child { width:28px;height:28px; } #app #sidePanel .ph-skill-list>button b { font-size:11px; } #app #sidePanel .ph-skill-list>button small { font-size:9px; } #app #sidePanel .ph-skill-detail { flex:1;padding:9px; } #app #sidePanel .ph-hub :is(.ph-detail-art,.ph-detail-art img) { width:32px;height:32px; } #app #sidePanel .ph-skill-detail>header h3 { font-size:15px; } #app #sidePanel .ph-skill-detail>header small { font-size:10px; } #app #sidePanel .ph-skill-metrics .ph-icon { display:none; } #app #sidePanel .ph-picker-actions>button { padding:8px 5px;font-size:11px!important; } #app #sidePanel .ph-detail-body { min-height:70px; } } @media(max-height:500px) and (min-width:600px) { #app #sidePanel .ph-layout { display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px; } #app #sidePanel .ph-hub[data-hub-view=genes] .ph-layout { display:block; } #app #sidePanel .ph-vitals { grid-template-columns:1fr; } #app #sidePanel .ph-field-notes { grid-template-columns:1fr; } #app #sidePanel .ph-capture { border:0;padding:3px 0; } #app #sidePanel .ph-modal-layer { position:fixed;inset:8px;padding:8px; } #app #sidePanel .ph-hub .ph-skill-modal { padding:8px 12px; } #app #sidePanel .ph-skill-modal>.ph-section-head { margin-bottom:5px; } #app #sidePanel .ph-skill-library { grid-template-columns:185px minmax(0,1fr);max-height:245px;gap:10px; } #app #sidePanel .ph-skill-detail { display:grid;grid-template-columns:minmax(0,1fr) 180px;grid-template-rows:auto minmax(48px,1fr) auto;padding:8px; } #app #sidePanel .ph-skill-detail>header { grid-column:1;grid-row:1;gap:7px; } #app #sidePanel .ph-detail-body { grid-column:1/-1;grid-row:2; } #app #sidePanel .ph-hub .ph-info-toggle { grid-column:2;grid-row:1;justify-content:flex-end;font-size:10px!important; } #app #sidePanel .ph-picker-actions { grid-column:1/-1;grid-row:3;margin-top:3px; } #app #sidePanel .ph-skill-detail>header h3 { font-size:14px; } #app #sidePanel .ph-hub :is(.ph-detail-art,.ph-detail-art img) { width:30px;height:30px; } #app #sidePanel .ph-skill-metrics .ph-icon { display:none; } #app #sidePanel .ph-skill-metrics>span { display:block; } #app #sidePanel .ph-skill-metrics b { margin-right:3px;font-size:12px; } #app #sidePanel .ph-picker>footer { margin-top:5px;padding-top:4px; } } @media(prefers-reduced-motion:reduce) { #app #sidePanel .ph-hub * { animation:none!important;transition:none!important;scroll-behavior:auto!important; } #app #sidePanel .ph-motion { display:none!important; } } /* Team shares the card's ice/white/blue surfaces. */ #gameScreen #sidePanel#sidePanel.is-team-panel { background:var(--ui-card,#f4f9fe)!important;border-color:var(--ui-line,#bfdbee)!important;box-shadow:0 24px 80px #163e6540!important; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster { color:var(--ph-ink); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-head { border-color:var(--ph-line); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster h1 { color:var(--ph-ink); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-summary { color:var(--ph-muted); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-summary b { color:var(--ui-muted,#398bbc); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member { border-color:var(--ph-line);background:linear-gradient(150deg,#fff,#f8fcff); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member.is-lead { border-color:var(--ui-line,#77b7e2);box-shadow:inset 0 3px #60ace0; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-lead { background:var(--ui-paper,#e1f1fd);color:var(--ui-accent,#267bb4); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-view:hover { background:var(--ui-paper,#eef7ff); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-art { border-radius:18px;background:radial-gradient(ellipse,#fff,#e4f3fd); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member>footer { background:var(--ui-card,#f6fbff);border-color:var(--ui-line,#e2eff8); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member>footer>button { background:var(--ui-paper,#e6f3fd);border-color:var(--ui-line,#c7e1f4);color:var(--ui-accent,#256f9f);border-radius:10px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member>footer>span { color:var(--ui-accent,#317eac); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member>footer>.exp-roster-set-lead { background:transparent;border-color:transparent;color:var(--ui-muted,#537e99); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-note { border-color:var(--ph-line);color:var(--ph-muted); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-member>footer>button:hover:not(:disabled) { background:var(--ui-soft,#dceefa); } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-vitals small { display:flex;align-items:center;gap:4px; } #gameScreen #sidePanel#sidePanel.is-team-panel .exp-roster-vitals .ph-icon { width:14px;height:14px;color:var(--ui-muted,#5b9dc5); } #gameScreen #sidePanel#sidePanel.is-team-panel svg.exp-roster-icon { color:var(--ui-accent,#328bc2); } /* v2.38.1: compact identity and non-expanding, accessible help. */ #app #sidePanel .ph-gender[data-gender=male]{color:var(--ui-accent,#1766a3);background:var(--ui-paper,#eaf5ff);border-color:var(--ui-line,#75baf0)} #app #sidePanel .ph-gender[data-gender=female]{color:#a63274;background:#fff0f8;border-color:#ef98c8} #app #sidePanel .ph-gender[data-gender=genderless]{color:var(--ui-muted,#5a647c);background:var(--ui-paper,#f0f1f8);border-color:var(--ui-line,#b6bdce)} #app #sidePanel .ph-level{border-radius:14px;min-width:56px;padding:7px 9px;gap:4px;background:linear-gradient(155deg,#fff,#d9efff)} #app #sidePanel .ph-level-progress{width:100%;height:3px;background:var(--ui-soft,#c8e3f4);border-radius:3px;overflow:hidden} #app #sidePanel .ph-level-progress u{display:block;height:100%;background:#178fce} #app #sidePanel .ph-nature-line{display:flex;align-items:center;justify-content:space-between;gap:5px;color:var(--ui-muted,#496b83);font-size:10px} #app #sidePanel .ph-nature-line>span{display:flex;align-items:center;flex-wrap:wrap;gap:5px} #app #sidePanel .ph-hub .ph-help-button{display:inline-grid;place-items:center;border:1px solid var(--ui-line,#bfdcee);background:var(--ui-card,#f6fbff);color:var(--ui-accent,#277aa9);border-radius:50%;width:30px;height:30px;min-height:30px;min-width:30px;padding:4px;cursor:help;box-shadow:none} #app #sidePanel .ph-hub .ph-help-button .ph-icon{width:20px;height:20px} #app #sidePanel .ph-hub .ph-help-button:hover,#app #sidePanel .ph-hub .ph-help-button:focus-visible{background:var(--ui-paper,#dff1ff);outline:2px solid #268bd1;outline-offset:2px} #app #sidePanel .ph-size-badge{color:var(--ui-muted,#387393);background:var(--ui-paper,#eaf5ff);border-radius:5px;padding:2px 5px} #app #sidePanel .ph-record{gap:4px;flex-wrap:wrap;padding-top:3px} #app #sidePanel .ph-capture b{font-size:11px} #app #sidePanel .ph-genome>.ph-section-head{gap:7px;padding-right:0;margin-bottom:3px} #app #sidePanel .ph-genome .ph-help-button{margin-left:0} #app #sidePanel .ph-stat-row>strong{position:relative;font-variant-numeric:tabular-nums} #app #sidePanel .ph-stat-delta{position:absolute;right:0;top:-9px;font-size:11px;line-height:1;font-style:normal;color:#16835e;background:#e5f8ed;border-radius:4px;padding:2px 3px;pointer-events:none} #app #sidePanel .ph-stat-delta.is-loss{color:#bf3853;background:#fff0f2} .ph-hover-tip{position:fixed;z-index:20000;box-sizing:border-box;width:max-content;padding:14px 16px;border:1px solid var(--ui-line,#aed6ef);border-radius:14px;background:var(--ui-card,#f9fcff);color:var(--ui-ink,#25485f);box-shadow:0 12px 34px #17364e33;font:500 12px/1.6 Inter,Arial,sans-serif;white-space:pre-line;overflow-wrap:anywhere;pointer-events:auto} .ph-hover-tip[hidden]{display:none} @media(max-width:680px){#app #sidePanel .ph-hub .ph-help-button{width:44px;height:44px;min-width:44px}#app #sidePanel .ph-nature-line{align-items:flex-start}.ph-hover-tip{font-size:12px}} @media(prefers-reduced-motion:reduce){#app #sidePanel .ph-stat-delta{transition:none}} /* 2.38.2 — equipment is a separate confirmation-aware window. */ #app #sidePanel .ph-equipment-modal { width:min(630px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--ui-card,#f8fcff);border:1px solid var(--ui-line,#bbd9ee);border-radius:20px;padding:18px;box-shadow:0 18px 60px #14334d35;overflow:hidden; } #app #sidePanel .ph-equipment-modal .ph-section-head {flex-shrink:0} #app #sidePanel .ph-equipment-modal .ph-helper {font-size:12px;margin:4px 0;color:var(--ui-muted,#496b83)} #app #sidePanel .ph-equipment-modal .ph-equipment-list {overflow-y:auto;overscroll-behavior:contain;min-height:0;max-height:390px;padding:2px 5px 8px 2px} #app #sidePanel .ph-equipment-modal .ph-equipment-list>article {grid-template-columns:48px minmax(0,1fr);gap:8px;padding:10px;background:white} #app #sidePanel .ph-equipment-modal .ph-item-preview {width:48px;height:48px} #app #sidePanel .ph-equipment-modal .ph-item-art {width:48px;height:48px} #app #sidePanel .ph-equipment-modal footer {flex-shrink:0;display:flex;align-items:center;gap:10px;border-top:1px solid var(--ui-line,#d4e5f1);padding-top:10px;margin-top:8px} #app #sidePanel .ph-equipment-modal footer small {font-size:11px;color:var(--ui-muted,#496b83)} #app #sidePanel .ph-gear-effects {display:flex;gap:4px;flex-wrap:wrap;margin-top:5px;font-size:11px} #app #sidePanel .ph-gear-effect {display:inline-flex;gap:3px;align-items:center;padding:3px 5px;border-radius:6px;background:var(--ui-paper,#eef8f4)} #app #sidePanel .ph-gear-effect .ph-icon {width:16px;height:16px} #app #sidePanel .ph-gear-effect.is-negative {background:#fff0f1} #app #sidePanel .ph-hub .is-positive {color:#197d60} #app #sidePanel .ph-hub .is-negative {color:#b23d4b} @media(min-width:1000px){#app #sidePanel .ph-hub[data-hub-editor=gear-modal] .ph-modal-layer {justify-items:end;padding:20px} } @media(max-width:600px){#app #sidePanel .ph-equipment-modal {padding:12px} #app #sidePanel .ph-equipment-modal .ph-equipment-list {grid-template-columns:1fr;max-height:none} #app #sidePanel .ph-equipment-modal .ph-equipment-list>article {grid-template-columns:48px minmax(0,1fr) auto} #app #sidePanel .ph-equipment-modal .ph-equipment-list>article>button {grid-column:auto;padding:0 10px}} #app #sidePanel .ph-equipment-modal .ph-button {min-height:40px;height:40px;padding:6px 12px;font-size:13px} #app #sidePanel .ph-equipment-modal .ph-button.is-icon {width:44px;height:44px;padding:0} #app #sidePanel .ph-equipment-modal .ph-item-preview>b {font-size:10px} /* 2.38.3 — consistent stat colors and tangible talent progression. */ #app #sidePanel .ph-hub .ph-emblem {filter:drop-shadow(0 1px 0 #ffffffb0);fill:none} #app #sidePanel .ph-stat-icon .ph-emblem {width:28px;height:28px;fill:none} #app #sidePanel .ph-stat-training u {background:var(--stat-color)} #app #sidePanel .ph-gear-effect {background:var(--stat-bg);color:var(--stat-ink);border:1px solid color-mix(in srgb,var(--stat-color) 18%,transparent);gap:4px;font-size:11px} #app #sidePanel .ph-gear-effect .ph-icon {width:20px;height:20px} #app #sidePanel .ph-gear-effect>span {color:var(--ph-ink)} #app #sidePanel .ph-equipped-effects {display:flex;gap:3px;flex-wrap:wrap;margin-top:3px} #app #sidePanel .ph-equipped-effects .ph-gear-effect {padding:1px 3px;gap:2px;font-size:10px} #app #sidePanel .ph-equipped-effects .ph-icon {width:17px;height:17px} #app #sidePanel .ph-equipped-effects .ph-gear-effect>span {display:none} #app #sidePanel .ph-nature-line {flex-wrap:wrap;font-size:11px;gap:3px 8px} #app #sidePanel .ph-nature-effects {margin-left:auto;gap:8px} #app #sidePanel .ph-nature-effects i {font-size:10px;font-weight:600} #app #sidePanel .ph-genome {display:flex;align-items:center;gap:8px;padding:3px 8px;background:var(--ui-paper,#f0f5fb);min-height:44px} #app #sidePanel .ph-hub .ph-genome-label {display:inline-flex;flex:none;gap:4px;min-height:36px;padding:0;border:0;background:none;box-shadow:none;color:var(--ui-muted,#3b6381);font-size:12px!important;cursor:help} #app #sidePanel .ph-genome-label .ph-icon {width:22px;height:26px} #app #sidePanel .ph-gene-ribbon {flex:1;gap:6px;min-width:0;align-items:center} #app #sidePanel .ph-gene-cell {display:flex;align-items:center;gap:3px;padding:0;border:0;min-width:0;text-align:left} #app #sidePanel .ph-gene-cell>span {display:flex;flex:none} #app #sidePanel .ph-gene-cell .ph-icon {width:18px;height:18px} #app #sidePanel .ph-gene-cell>i {flex:1;min-width:5px;height:5px;background:color-mix(in srgb,var(--stat-color) 14%,#fff);border-radius:5px} #app #sidePanel .ph-gene-cell u {background:var(--stat-color)} #app #sidePanel .ph-gene-cell>b {font-size:12px;line-height:1.2;min-width:15px;text-align:right;font-variant-numeric:tabular-nums;color:var(--stat-ink)} #app #sidePanel .ph-gene-cell.is-max>i {box-shadow:0 0 0 1px color-mix(in srgb,var(--stat-color) 30%,transparent),0 1px 3px color-mix(in srgb,var(--stat-color) 20%,transparent)} #app #sidePanel .ph-gene-cell.is-max u {background:linear-gradient(180deg,color-mix(in srgb,var(--stat-color) 65%,#fff),var(--stat-color))} #app #sidePanel .ph-hub .ph-talent-wallet {display:inline-flex;gap:5px;min-height:32px;padding:3px 7px;border-radius:9px;border-color:#ecdbb2;background:#fff9e8;box-shadow:none;color:#77561d;cursor:help;font-size:11px!important;white-space:nowrap} #app #sidePanel .ph-talent-wallet .ph-icon {width:22px;height:22px} #app #sidePanel .ph-talent-wallet b {font-size:15px} #app #sidePanel .ph-hub .ph-move {grid-template-rows:50px minmax(14px,auto) 8px;min-height:96px;gap:5px;padding:6px 5px} #app #sidePanel .ph-move-art {width:50px;height:50px;border-radius:13px;box-shadow:0 2px 5px #194b6926} #app #sidePanel .ph-move.is-filled .ph-move-art {background:transparent} #app #sidePanel .ph-move b {align-self:center;font-size:12px} #app #sidePanel .ph-move small {display:none} #app #sidePanel .ph-move small .ph-icon {width:12px;height:12px} #app #sidePanel .ph-rank-pips {display:inline-flex;align-items:center;gap:4px;height:8px;flex:none} #app #sidePanel .ph-rank-pips>i {display:block;width:13px;height:6px;border:1px solid var(--ui-line,#bdcddd);border-radius:2px;background:var(--ui-paper,#e9f0f6)} #app #sidePanel .ph-rank-pips>i.is-earned {border-color:#bc8c28;background:linear-gradient(#ffe7a1,#efb541);box-shadow:inset 0 1px 0 #fff8} #app #sidePanel .ph-move.can-upgrade {border-color:#dec47f;box-shadow:0 2px 6px #97701715} #app #sidePanel .ph-upgrade-dot {position:absolute;top:5px;right:6px;display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:#fff1c4;border:1px solid #dcc280;color:#82601a;font-weight:800;font-size:15px} #app #sidePanel .ph-empty-ranks {font-size:10px;line-height:1;color:var(--ui-muted,#64829a)} #app #sidePanel .ph-skill-detail>header .ph-rank-pips {display:flex;margin-top:7px} #app #sidePanel .ph-skill-list>button>span:first-child {width:42px;height:42px} #app #sidePanel .ph-skill-metrics .ph-emblem {width:24px;height:24px} @media (max-width:1100px) and (min-width:901px) { #app #sidePanel .ph-genome-label span {font-size:11px} #app #sidePanel .ph-gene-ribbon {gap:5px} #app #sidePanel .ph-gene-cell .ph-icon {width:16px;height:16px} #app #sidePanel .ph-genome {gap:6px} } @media (max-width:900px), (max-height:650px) { #app #sidePanel .ph-hub .ph-genome-label {min-height:44px} #app #sidePanel .ph-genome-label>span {display:none} #app #sidePanel .ph-genome {gap:6px;padding:0 6px} #app #sidePanel .ph-gene-ribbon {gap:5px} #app #sidePanel .ph-gene-cell {gap:2px} #app #sidePanel .ph-gene-cell .ph-icon {width:15px;height:15px} #app #sidePanel .ph-gene-cell>b {font-size:11px;min-width:13px} #app #sidePanel .ph-hub .ph-talent-wallet {min-height:44px} #app #sidePanel .ph-hub .ph-move {grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto 8px;justify-items:start;gap:5px 7px;padding:9px 7px;min-height:80px} #app #sidePanel .ph-move-art {width:44px;height:44px;grid-column:1;grid-row:1/3} #app #sidePanel .ph-move b {grid-column:2;grid-row:1;text-align:left;font-size:11px} #app #sidePanel .ph-move .ph-rank-pips,#app #sidePanel .ph-empty-ranks {grid-column:2;grid-row:2;gap:3px} #app #sidePanel .ph-rank-pips>i {width:10px} #app #sidePanel .ph-move small {grid-column:2;grid-row:3;text-align:left;justify-content:start} #app #sidePanel .ph-upgrade-dot {width:15px;height:15px;top:2px;right:3px;font-size:12px} #app #sidePanel .ph-nature-effects {margin-left:0} #app #sidePanel .ph-nature-effects i {font-size:11px} } /* 2.38.4 — painted RPG assets and original Pokémon emoji portraits. */ .rpg-icon {object-fit:contain;object-position:center;image-rendering:auto;vertical-align:middle;flex-shrink:0} #app #sidePanel .ph-hub .ph-raster {object-fit:contain;filter:none;image-rendering:auto} #app #sidePanel .ph-stat-icon .ph-raster {width:30px;height:30px} #app #sidePanel .ph-meter .ph-raster {width:19px;height:19px} #app #sidePanel .ph-energy .ph-raster {width:18px;height:18px} #app #sidePanel .ph-section-head h2 .ph-raster {width:24px;height:24px} #app #sidePanel .ph-equipment .ph-section-head .ph-raster {width:19px;height:19px} #app #sidePanel .ph-pages .ph-raster {width:23px;height:23px} #app #sidePanel .ph-talent-wallet .ph-raster {width:26px;height:26px} #app #sidePanel .ph-gear-art>.ph-raster {width:30px;height:30px} #app #sidePanel .ph-genome-label .ph-raster {width:23px;height:26px} #app #sidePanel .ph-meter--xp>i {height:6px;background:var(--ui-soft,#deedfa)} #app #sidePanel .ph-meter--xp u {background:linear-gradient(90deg,#4fbadd,#5187dc);box-shadow:inset 0 1px 0 #ffffff65} #app #sidePanel .ph-meter--xp>span {color:var(--ui-muted,#417497)} #app #sidePanel .ph-hub .ph-roster button {width:46px;min-width:46px;height:46px;border-radius:14px;padding:3px;border:1px solid var(--ui-line,#d8e6f2);background:var(--ui-card,#f6faff);box-shadow:0 2px 0 #e1edf6;overflow:visible} #app #sidePanel .ph-roster button[aria-pressed=true] {border:2px solid #1688d4;padding:2px;background:var(--ui-paper,#e3f3ff);box-shadow:0 2px 0 #1688d4} #app #sidePanel .ph-roster button>span {width:38px;height:38px} #app #sidePanel .ph-roster button>b {right:-2px;bottom:-3px;min-width:18px;padding:1px 4px;border:1px solid var(--ui-line,#cbe1f1);border-radius:6px;background:var(--ui-card,#fff);color:var(--ui-muted,#345c7b);font-size:10px;line-height:1.2} #app #sidePanel .ph-roster button[aria-pressed=true]>b {background:#1688d4;border-color:#1688d4;color:#fff} #app #sidePanel .ph-roster button>.ph-roster-lead {top:-5px;left:-5px;width:17px;height:17px;border-radius:50%;background:var(--ui-card,#fff);box-shadow:0 1px 3px #3b709944;display:grid;place-items:center} #app #sidePanel .ph-roster-lead img {display:block;width:15px;height:15px;object-fit:contain} #app #sidePanel .ph-mobile-roster-art {display:none} #app #sidePanel .ph-evolution .ph-button>.ph-raster {width:28px;height:28px} #app #sidePanel .ph-evolution .ph-button:disabled>.ph-raster {opacity:.55;filter:saturate(.55)} @media(max-width:900px),(max-height:650px) { #app #sidePanel .ph-mobile-roster-art {display:block;width:34px;height:34px;flex:0 0 34px} #app #sidePanel .ph-mobile-roster-art .ph-roster-art {width:34px;height:34px} #app #sidePanel .ph-hub .ph-roster-select {font-size:12px;padding:6px;min-width:0} #app #sidePanel .ph-header {gap:7px} #app #sidePanel .ph-stat-icon .ph-raster {width:27px;height:27px} #app #sidePanel .ph-section-head h2 .ph-raster {width:22px;height:22px} } /* Keep the desktop card compact while giving painted icons readable optical size. */ @media(min-width:901px) and (min-height:651px) { #app #sidePanel .ph-layout {padding:12px 14px} #app #sidePanel .ph-identity {gap:5px} #app #sidePanel .ph-vitals {gap:6px} #app #sidePanel .ph-resources {padding:6px 0} #app #sidePanel .ph-work-area {gap:4px} #app #sidePanel .ph-hub[data-hub-view=loadout] .ph-screen--loadout {gap:5px} #app #sidePanel :is(#ph-training,#ph-skills)>.ph-section-head {margin-bottom:6px} } /* 2.38.5 — quiet, readable line symbols and real capture-ball provenance. */ #app #sidePanel .ph-hub .ph-line {filter:none;fill:none} #app #sidePanel .ph-hub .ph-button.is-primary .ph-line {color:inherit} #app #sidePanel .ph-stat-icon .ph-line {width:25px;height:25px} #app #sidePanel .ph-section-head h2 .ph-line,#app #sidePanel .ph-pages .ph-line {width:21px;height:21px} #app #sidePanel .ph-equipment .ph-section-head .ph-line {width:18px;height:18px} #app #sidePanel .ph-meter .ph-line,#app #sidePanel .ph-energy .ph-line {width:17px;height:17px} #app #sidePanel .ph-talent-wallet .ph-line {width:22px;height:22px} #app #sidePanel .ph-gear-art>.ph-line {width:25px;height:25px} #app #sidePanel .ph-genome-label .ph-line {width:21px;height:24px} #app #sidePanel .ph-evolution .ph-button>.ph-line {width:23px;height:23px} #app #sidePanel .ph-roster button>.ph-roster-ball,#app #sidePanel .ph-mobile-roster-art>.ph-roster-ball {position:absolute;top:-5px;left:-5px;display:grid;place-items:center;width:20px;height:20px;padding:1px;border-radius:50%;background:var(--ui-card,#fff);pointer-events:none;box-shadow:0 1px 2px #385c7624} #app #sidePanel .ph-roster-ball .pokemon-mini-ball {width:18px;height:18px;display:block} #app #sidePanel .ph-roster button>.ph-roster-lead {top:auto;bottom:-3px;left:-3px;width:15px;height:15px;background:#fff8e7;box-shadow:none} #app #sidePanel .ph-roster button>.ph-roster-lead .ph-line {width:12px;height:12px;color:#99701e} #app #sidePanel .ph-mobile-roster-art {position:relative;overflow:visible} @media(max-width:900px),(max-height:650px){#app #sidePanel .ph-stat-icon .ph-line {width:24px;height:24px}#app #sidePanel .ph-mobile-roster-art>.ph-roster-ball {width:17px;height:17px;top:-2px;left:-3px}#app #sidePanel .ph-mobile-roster-art .pokemon-mini-ball {width:15px;height:15px}} /* /pokedex-v2370.css: deferred, original cascade position */ @media all{:root[data-pk-style-slot="owner-106"]{}} /* /pokedex-v2400.css: deferred, original cascade position */ @media all{:root[data-pk-style-slot="owner-107"]{}} /* pk-style-source:108 */ /* /pokedex-v2410.css */ /* Digital Pokédex: a new composition. The 2.40.1 layout is not loaded. */ /* One device shell for the index and every dossier, independent of its content. */ #app #sidePanel.side-panel.is-open:is(.is-pokedex-panel,.is-pokedex-detail){display:flex!important;flex-direction:column;width:min(1120px,calc(100vw - 64px))!important;height:min(760px,calc(100dvh - 64px))!important;max-height:calc(100dvh - 32px)!important} #app #sidePanel.side-panel.is-open.is-pokedex-detail:has(.dd-dossier){background:var(--ui-card,#f8fbff)!important} #app #sidePanel:is(.is-pokedex-panel,.is-pokedex-detail)>#sidePanelContent{flex:1 1 auto;min-height:0} #app #sidePanel.side-panel.is-open:is(.is-pokedex-panel,.is-pokedex-detail)>.panel-close{top:12px!important;right:12px!important} @media(min-width:961px) and (min-height:561px){ #app #sidePanel.side-panel.is-open:is(.is-pokedex-panel,.is-pokedex-detail).is-user-positioned{inset:clamp(8px,var(--panel-user-top,32px),calc(100dvh - min(760px,100dvh - 64px) - 8px)) auto auto clamp(8px,var(--panel-user-left,32px),calc(100vw - min(1120px,100vw - 64px) - 8px))!important;transform:none!important;transition:none!important} } #app #sidePanel .dd-dossier{--dd-ink:#173650;--dd-muted:#58758b;--dd-blue:#147bba;--dd-line:#d8e6ef;color:var(--dd-ink);font:500 13px/1.4 var(--font-ui,'Nunito Sans',Arial,sans-serif);background:var(--ui-card,#f8fbff)} #app #sidePanel .dd-dossier :is(h2,h3,h4,p,dl,dd){margin:0} #app #sidePanel .dd-dossier button{font:inherit;cursor:pointer;color:inherit} #app #sidePanel .dd-dossier button:disabled{opacity:.45;cursor:not-allowed} #app #sidePanel .dd-dossier :is(button,select):focus-visible{outline:3px solid #157dcc!important;outline-offset:2px} #app #sidePanel .dd-dossier svg{width:18px;height:18px;vertical-align:middle;flex:0 0 18px} #app #sidePanel .dd-header{display:flex;align-items:center;gap:18px;min-height:60px;padding:8px 78px 8px 20px;border-bottom:1px solid var(--dd-line);background:var(--ui-card,#fff);position:relative;z-index:6} #app #sidePanel .dd-header>button{background:transparent;border:0;display:flex;align-items:center;gap:8px;padding:8px 0;font-weight:800;color:var(--ui-accent,#1c648f)} #app #sidePanel .dd-header-label{font-size:10px;letter-spacing:1.7px;color:var(--ui-muted,#718a9c)} #app #sidePanel .dd-header nav{display:flex;align-items:center;gap:7px;margin-left:auto} #app #sidePanel .dd-header nav>button{height:38px;min-width:38px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--dd-line);border-radius:8px;background:var(--ui-card,#f6faff);padding:7px 10px;color:var(--ui-accent,#256284);font-weight:700} #app #sidePanel .dd-layout{display:grid;grid-template-columns:minmax(260px,300px) minmax(0,1fr);gap:22px;padding:12px 22px;align-items:start} #app #sidePanel .dd-profile,#app #sidePanel .dd-main{min-width:0;display:grid;gap:10px} #app #sidePanel .dd-showcase{min-width:0;border:1px solid var(--ui-line,#c9e3f4);border-radius:14px;overflow:hidden;background:linear-gradient(155deg,#f5fdff,#dcefff 75%,#e8f3ff)} #app #sidePanel .dd-identity{padding:12px 18px 0;position:relative;z-index:2} #app #sidePanel .dd-dexline{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:11px;font-weight:800;color:var(--ui-muted,#437a9c);letter-spacing:.8px} #app #sidePanel .dd-dexline i{font-style:normal;color:var(--ui-muted,#96b6ca);margin:0 3px} #app #sidePanel .dd-caught{display:flex;align-items:center;gap:4px;letter-spacing:0;font-size:10px;font-weight:600;color:var(--ui-muted,#5e7f94);white-space:nowrap} #app #sidePanel .dd-caught.is-caught{color:var(--ui-accent,#1c8067)} #app #sidePanel .dd-caught svg{width:13px;height:13px;flex-basis:13px} #app #sidePanel .dd-identity h2{font-size:34px;letter-spacing:-.8px;line-height:1.15;margin:5px 0 7px;overflow-wrap:anywhere;color:var(--ui-ink,#173650)} #app #sidePanel .dd-types{display:flex;align-items:center;gap:7px} #app #sidePanel .dd-types .pokemon-type-badge{font-size:10px;min-height:25px;padding:4px 7px;background:color-mix(in srgb,var(--type-color) 9%,white)} #app #sidePanel .dd-types .pokemon-type-badge img{width:15px;height:15px} #app #sidePanel .dd-dossier .pc-info-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--ui-line,#ccdfec);border-radius:7px;min-width:28px;min-height:28px;padding:4px;background:var(--ui-card,#f5fbff);color:var(--ui-muted,#427491);font-size:11px} #app #sidePanel .dd-types .pc-info-button{border:0;background:transparent;color:var(--ui-muted,#447998)} #app #sidePanel :is(.dd-types,.dd-stats,.dd-move-detail) .pc-info-button>span{display:none} /* A clear character silhouette above a slowly rotating digital landing pad. */ #app #sidePanel .dd-stage{position:relative;isolation:isolate;height:282px;overflow:hidden} #app #sidePanel .dd-platform{position:absolute;inset:0;overflow:hidden;pointer-events:none} #app #sidePanel .dd-horizon{position:absolute;inset:10% 0 13%;background:radial-gradient(ellipse at 50% 50%,#ffffffed,transparent 66%)} #app #sidePanel .dd-floor{position:absolute;inset:38% -65% -100%;background-image:linear-gradient(#67aee02a 1px,transparent 1px),linear-gradient(90deg,#67aee02a 1px,transparent 1px);background-size:38px 38px;transform:perspective(270px) rotateX(54deg);transform-origin:center top;mask-image:linear-gradient(transparent,#000 20%,#000 72%,transparent)} #app #sidePanel .dd-orbit{position:absolute;left:50%;bottom:-87px;width:min(90%,340px);aspect-ratio:1;transform:translateX(-50%) rotateX(66deg);border-radius:50%;background:radial-gradient(circle,#77c7ff20 40%,#ffffff70 61%,transparent 64%);box-shadow:0 0 45px #40a9ed24} #app #sidePanel .dd-orbit .dd-ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#67b4e3;stroke-width:1.5;overflow:visible;animation:dd-orbit-spin 28s linear infinite;animation-play-state:paused;transform-origin:center} #app #sidePanel .dd-ring--outer circle:nth-child(2){stroke:#2e9fdf;stroke-width:3} #app #sidePanel .dd-orbit .dd-ring--inner{stroke:var(--dd-type);stroke-width:5;animation-direction:reverse;animation-duration:19s} #app #sidePanel .dd-ring--inner circle:last-child{stroke:#fff;stroke-width:1.5;opacity:.7} #app #sidePanel .dd-dossier[data-dd-motion=running] .dd-ring{animation-play-state:running} @keyframes dd-orbit-spin{to{transform:rotate(360deg)}} #app #sidePanel .dd-stage .dd-portrait-layers{position:absolute;inset:0;z-index:2;display:block;pointer-events:none} #app #sidePanel .dd-portrait-layers>[data-dex-art]{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .16s ease;visibility:hidden} #app #sidePanel .dd-portrait-layers[data-dex-visible=normal]>[data-dex-art=normal],#app #sidePanel .dd-portrait-layers[data-dex-visible=shiny]>[data-dex-art=shiny]{opacity:1;visibility:visible} #app #sidePanel .dd-stage .dd-portrait{display:block!important;position:absolute;inset:0 3% 20px;width:94%!important;height:calc(100% - 20px)!important;min-width:0;min-height:0;max-width:100%;max-height:100%;margin:0!important;background:none!important;filter:drop-shadow(0 12px 8px #22567423);line-height:0} #app #sidePanel .dd-stage .dd-portrait img{display:block;position:absolute;inset:0;width:100%!important;height:100%!important;min-width:0;min-height:0;max-height:100%;object-fit:contain;object-position:center bottom;filter:none!important;opacity:1!important} #app #sidePanel .dd-art-status{position:absolute;left:10px;bottom:10px;right:auto;max-width:calc(100% - 20px);background:#ffffffed;color:var(--ui-muted,#326582);font-size:11px;border-radius:6px;padding:4px 7px} #app #sidePanel .dd-art-status:empty{display:none} #app #sidePanel .dd-appearance{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 14px 11px} #app #sidePanel .dd-appearance>div{display:flex;background:#ffffffa6;padding:3px;border:1px solid var(--ui-line,#c8e1f2);border-radius:8px} #app #sidePanel .dd-appearance button{border:0;border-radius:5px;background:transparent;font-size:11px;padding:6px 9px;color:var(--ui-muted,#416880)} #app #sidePanel .dd-appearance button[aria-pressed=true]{background:var(--ui-card,#fff);box-shadow:0 1px 4px #1d568520;color:var(--ui-accent,#176699);font-weight:800} #app #sidePanel .dd-appearance>span{color:var(--ui-muted,#517589);font-size:10px;text-align:right} #app #sidePanel .dd-physical{display:grid;grid-template-columns:1fr 1fr;padding:10px 16px;background:#ffffffbd;border-top:1px solid var(--ui-line,#cce3f3);gap:12px} #app #sidePanel .dd-physical>div{display:flex;align-items:center;justify-content:space-between;gap:5px} #app #sidePanel .dd-physical>div+div{border-left:1px solid var(--ui-line,#ccdfeb);padding-left:12px} #app #sidePanel .dd-physical dt{font-size:11px;display:flex;gap:4px;align-items:center;color:var(--ui-muted,#56758b)} #app #sidePanel .dd-physical dd{font-size:16px;font-weight:800;white-space:nowrap} #app #sidePanel .dd-physical dd small{font-size:10px;font-weight:600} /* Actual stat rows, not six miniature cards. */ #app #sidePanel .dd-top{display:grid;grid-template-columns:minmax(212px,250px) minmax(0,1fr);gap:16px;align-items:start} #app #sidePanel .dd-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:29px;margin-bottom:8px} #app #sidePanel .dd-section-head h3{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:800} #app #sidePanel .dd-section-head h3 svg{color:var(--ui-accent,#2a7da8)} #app #sidePanel .dd-section-head>span{font-size:10px;color:var(--dd-muted);white-space:nowrap} #app #sidePanel .dd-stat-table{width:100%;border:0;border-collapse:collapse;border-spacing:0;table-layout:fixed} #app #sidePanel .dd-stat-table tr{height:32px;background:transparent;border-bottom:1px solid var(--ui-line,#e3edf5)} #app #sidePanel .dd-stat-table tr:last-child{border:0} #app #sidePanel .dd-stat-table th{width:124px;text-align:left;font-weight:600;white-space:nowrap;font-size:12px;padding:6px 0} #app #sidePanel .dd-stat-table th svg{color:var(--stat-color);width:18px;height:18px;margin-right:6px} #app #sidePanel .dd-stat-table td{padding:6px 0} #app #sidePanel .dd-stat-table .dd-stat-value{width:35px;font-size:16px;font-weight:800;text-align:right;padding-right:10px;font-variant-numeric:tabular-nums} #app #sidePanel .dd-stat-meter{display:block;height:6px;width:100%;background:var(--ui-soft,#e4edf5);border-radius:2px;overflow:hidden} #app #sidePanel .dd-stat-meter u{display:block;height:100%;background:var(--stat-color);border-radius:2px} #app #sidePanel .dd-stats>footer{display:flex;justify-content:space-between;border-top:1px solid var(--ui-line,#cddfeb);margin-top:6px;padding-top:6px;font-size:10px;color:var(--ui-muted,#688396)} #app #sidePanel .dd-stats>footer b{color:var(--ui-muted,#3b6784)} #app #sidePanel .dd-move-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} #app #sidePanel .dd-dossier .dd-move{position:relative;display:flex!important;align-items:center;flex-direction:column;justify-content:flex-start;gap:4px;width:100%!important;height:auto!important;min-height:104px!important;min-width:0!important;padding:5px 3px!important;border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;box-shadow:none!important;transform:none!important;color:var(--ui-ink,#31526b)!important;text-align:center!important} #app #sidePanel .dd-move::before,#app #sidePanel .dd-move::after{display:none!important} #app #sidePanel .dd-move:hover{background:var(--ui-paper,#eaf4fc)!important} #app #sidePanel .dd-move.is-active{border-color:#5aa8d9!important;background:var(--ui-paper,#e8f5ff)!important;box-shadow:inset 0 -2px #2993d0!important} #app #sidePanel .dd-move>small{align-self:flex-start;font-size:9px;color:var(--ui-muted,#6d8798);line-height:1} #app #sidePanel .dd-dossier :is(.dd-slot-art,.dd-move-icon){display:inline-grid!important;place-items:center;width:50px!important;height:50px!important;min-width:0!important;flex:0 0 50px;border-radius:9px!important;background-size:contain!important;overflow:hidden;line-height:0;padding:0!important} #app #sidePanel :is(.dd-slot-art,.dd-move-icon) img{width:100%!important;height:100%!important;object-fit:contain;display:block} #app #sidePanel .dd-move>b{font-size:10px!important;font-weight:800;line-height:1.2!important;white-space:normal!important;overflow-wrap:anywhere} #app #sidePanel .dd-readiness{font-size:10px;color:#896427;margin-bottom:7px} #app #sidePanel .dd-move-detail{border:1px solid var(--ui-line,#ccdfed);border-radius:11px;background:var(--ui-card,#fff);padding:12px 14px} #app #sidePanel .dd-move-detail>header{display:flex;align-items:center;gap:10px} #app #sidePanel .dd-move-detail .dd-move-icon{width:42px!important;height:42px!important;flex-basis:42px} #app #sidePanel .dd-move-heading{min-width:0} #app #sidePanel .dd-move-heading small{font-size:10px;color:var(--dd-muted)} #app #sidePanel .dd-move-heading h3{font-size:17px;font-weight:800;line-height:1.2} #app #sidePanel .dd-ranks{display:flex;align-items:center;gap:3px;margin-left:auto;white-space:nowrap} #app #sidePanel .dd-ranks>span{font-size:10px;color:var(--ui-muted,#6e8394);margin-right:4px} #app #sidePanel .dd-ranks button{width:27px;height:29px;border:1px solid var(--ui-line,#cce0ee);background:var(--ui-card,#f7fbff);border-radius:5px;font-size:11px} #app #sidePanel .dd-ranks button[aria-pressed=true]{background:#187fbb;border-color:#187fbb;color:white;font-weight:800} #app #sidePanel .dd-numbers{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:12px;margin-top:12px} #app #sidePanel .dd-effects{display:flex;gap:7px;flex-wrap:wrap} #app #sidePanel .dd-effects>div{flex:1 1 135px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px;background:var(--ui-paper,#f0f8fe);padding:7px 9px;border-radius:6px} #app #sidePanel .dd-effects dt{font-size:11px;display:flex;align-items:center;gap:4px} #app #sidePanel .dd-effects dt svg{width:15px;height:15px;flex-basis:15px;color:var(--ui-accent,#2786b7)} #app #sidePanel .dd-effects dd{grid-column:2;grid-row:1/3;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums} #app #sidePanel .dd-effects small{font-size:10px;color:var(--ui-muted,#628197);line-height:1.35;overflow-wrap:anywhere} #app #sidePanel .dd-costs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;align-items:center} #app #sidePanel .dd-costs dt{font-size:10px;color:var(--ui-muted,#658399);display:flex;align-items:center;gap:3px;white-space:nowrap} #app #sidePanel .dd-costs dt svg{width:13px;height:13px;flex-basis:13px;color:var(--ui-muted,#3889b4)} #app #sidePanel .dd-costs dd{font-size:17px;font-weight:800;margin-top:4px} #app #sidePanel .dd-move-detail>footer{display:flex;align-items:center;gap:9px;margin-top:10px} #app #sidePanel .dd-move-detail>footer p{flex:1;font-size:11px;line-height:1.45;color:var(--ui-muted,#4c6c84)} #app #sidePanel .dd-move-detail>footer b{color:var(--ui-accent,#227bad);margin-right:5px} /* Biology belongs with the specimen, not in a second long document. */ #app #sidePanel .dd-dossier .pc-biology{padding:0 4px} #app #sidePanel .dd-dossier .pc-biology h3{display:none} #app #sidePanel .dd-dossier .pc-gender-labels{display:flex;justify-content:space-between;align-items:center;font-size:10px} #app #sidePanel .dd-dossier .pc-gender-labels svg{width:13px;height:13px;margin-right:3px} #app #sidePanel .dd-dossier [data-gender=male]{color:var(--ui-accent,#257ab7)}#app #sidePanel .dd-dossier [data-gender=female]{color:#b33b80} #app #sidePanel .dd-dossier .pc-gender-bar{display:flex;height:3px;background:var(--ui-soft,#dde8f1);margin:5px 0 10px;overflow:hidden;border-radius:2px} #app #sidePanel .dd-dossier .pc-gender-bar .is-male{background:#65b0e7}#app #sidePanel .dd-dossier .pc-gender-bar .is-female{background:#e68cba}#app #sidePanel .dd-dossier .pc-gender-bar .is-neutral{background:#92aabc} #app #sidePanel .dd-dossier .pc-size-head{display:none} #app #sidePanel .dd-dossier .pc-size-head small{font-size:9px;color:var(--ui-muted,#7790a2)} #app #sidePanel .dd-dossier .pc-size-scale{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:5px 0} #app #sidePanel .dd-dossier .pc-size-scale button{border:1px solid var(--ui-line,#d4e3ed);display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 3px;padding:4px;background:var(--ui-paper,#f0f6fc);border-radius:5px;font-size:9px;color:var(--ui-muted,#55768d)} #app #sidePanel .dd-dossier .pc-size-scale button>span{font-size:8px;grid-column:1/-1;text-align:left} #app #sidePanel .dd-dossier .pc-size-scale i{height:12px;width:6px;background:var(--ui-soft,#dce9f4);display:flex;align-items:end;border-radius:2px;overflow:hidden} #app #sidePanel .dd-dossier .pc-size-scale u{min-height:1px;width:100%;background:#7ab6d9;border-radius:2px} #app #sidePanel .dd-dossier .pc-size-scale button[aria-pressed=true]{border-color:#3694c9;color:var(--ui-accent,#116c9e);background:var(--ui-paper,#def1ff)} #app #sidePanel .dd-dossier .pc-size-scale button[aria-pressed=true] u{background:#2697ce} #app #sidePanel .dd-dossier .pc-size-detail{font-size:10px;line-height:1.35;display:grid;gap:3px} #app #sidePanel .dd-dossier .pc-size-detail :is(header,div){display:flex;justify-content:space-between;gap:5px} #app #sidePanel .dd-dossier .pc-size-detail header>span{color:var(--ui-muted,#5285a2)} #app #sidePanel .dd-dossier .pc-size-detail svg{width:13px;height:13px;margin-right:3px} #app #sidePanel .dd-dossier .pc-range-total{display:none} /* Evolution stays visible, including branches. */ #app #sidePanel .dd-dossier .pc-evolution{border-top:1px solid var(--ui-line,#d5e4ef);padding-top:12px} #app #sidePanel .dd-dossier .pc-evolution>header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px} #app #sidePanel .dd-dossier .pc-evolution h3{display:flex;align-items:center;gap:7px;font-size:15px} #app #sidePanel .dd-dossier .pc-evolution h3 svg{color:var(--ui-accent,#2a7da8)} #app #sidePanel .dd-dossier .pc-evo-node{display:flex;align-items:center;gap:7px;min-width:0;flex:1} #app #sidePanel .dd-dossier .pc-evo-node>button{display:flex;align-items:center;gap:6px;flex:1;min-width:0;padding:7px;border:1px solid var(--ui-line,#d9e7f1);background:var(--ui-card,#fff);border-radius:8px;text-align:left} #app #sidePanel .dd-dossier .pc-evo-node>button[aria-current=true]{border-color:#52a2d5;background:var(--ui-paper,#eaf6ff)} #app #sidePanel .dd-dossier .pc-evo-node>button>span{display:grid;gap:2px;min-width:0} #app #sidePanel .dd-dossier .pc-evo-node b{font-size:11px;overflow-wrap:anywhere} #app #sidePanel .dd-dossier .pc-evo-node small{font-size:9px;color:var(--ui-muted,#678294);line-height:1.25} #app #sidePanel .dd-dossier .pc-evo-node .pd-evo-art{width:36px;height:36px;min-width:36px;flex:0 0 36px} #app #sidePanel .dd-dossier .pc-evo-children{display:flex;gap:6px;min-width:0;flex:2} #app #sidePanel .dd-dossier .pc-evo-children:has(>.pc-evo-node:nth-child(2)){flex:3} #app #sidePanel .dd-dossier .pc-evo-arrow{color:var(--ui-muted,#82acc5)} #app #sidePanel .dd-dossier .pc-note{font-size:10px;color:var(--ui-muted,#688397);line-height:1.4;margin-top:7px} /* Compact top-layer help: hover, keyboard focus and touch use the same content. */ .pc-popover,.pc-location-dialog{box-sizing:border-box;color:var(--ui-ink,#24475e);background:var(--ui-card,#fff);border:1px solid var(--ui-line,#bdd7e9);border-radius:11px;padding:16px;box-shadow:0 16px 50px #153a5833;font:500 12px/1.5 var(--font-ui,Arial,sans-serif)} .pc-popover{position:fixed;inset:auto;margin:0;width:min(650px,calc(100vw - 20px));max-height:calc(100dvh - 20px);overflow:auto;z-index:24000} .pc-popover::backdrop{background:transparent} .pc-popover>header,.pc-location-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .pc-popover :is(h3,h4,p,dl,dd),.pc-location-dialog :is(h3,h4,p){margin:0} .pc-popover h3,.pc-location-dialog h3{font-size:16px}.pc-popover h4{font-size:12px;margin-bottom:7px} .pc-popover button,.pc-location-dialog button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--ui-line,#c5ddec);background:var(--ui-paper,#f4f9fd);border-radius:6px;padding:6px} .pc-popover [data-pc-close],.pc-location-dialog [data-pc-close]{min-width:32px;min-height:32px;display:grid;place-items:center} .pc-popover svg,.pc-location-dialog svg{width:18px;height:18px;vertical-align:middle} .pc-popover .pc-note,.pc-location-dialog .pc-note{font-size:10px;color:var(--ui-muted,#5e7a8d);margin-top:10px;line-height:1.5} .pc-matchup-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.pc-type-row{display:grid;gap:4px;margin-bottom:8px;font-size:11px}.pc-type-row>div{display:flex;gap:4px;flex-wrap:wrap} .pc-type-factor{display:inline-flex;align-items:center;gap:3px}.pc-type-factor .pokemon-type-badge{font-size:9px;min-height:22px;padding:3px 5px;gap:3px}.pc-type-factor .pokemon-type-badge img{width:12px;height:12px}.pc-type-factor>strong{font-size:10px;min-width:20px} .pc-type-choice{display:flex;gap:4px;margin-bottom:6px}.pc-type-choice button{padding:1px;border-color:transparent;background:transparent}.pc-type-choice [aria-pressed=true]{border-color:#4e9ecc}.pc-muted{color:var(--ui-muted,#738b9d)} .pc-compare{padding:8px 0;border-bottom:1px solid var(--ui-line,#dfebf4)}.pc-compare>div{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.pc-compare>div>span{display:grid;gap:3px;font-size:11px}.pc-compare svg{color:var(--stat-color)}.pc-compare small{font-size:10px}.pc-compare em{font-style:normal;font-size:10px}.pc-compare .is-up{color:#218764}.pc-compare .is-down{color:#c94f61} .pc-location-dialog{width:min(590px,calc(100vw - 24px));max-height:min(600px,calc(100dvh - 32px));padding:0;overflow:hidden}.pc-location-dialog::backdrop{background:#18384c55;backdrop-filter:blur(2px)} .pc-location-dialog>header{padding:14px 16px;margin:0;border-bottom:1px solid var(--ui-line,#d8e7f1)}.pc-location-dialog>header small{font-size:9px;letter-spacing:1.4px;color:var(--ui-muted,#557f98)}.pc-location-content{padding:4px 16px 14px;overflow:auto;max-height:calc(min(600px,100dvh - 32px) - 76px)} .pc-location-content>article{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--ui-line,#e3edf4)}.pc-location-content>article>div{display:grid;gap:4px}.pc-location-content small{font-size:10px;color:var(--ui-muted,#607e90)}.pc-location-content [data-dex-map]{min-height:40px;white-space:nowrap} .pc-parents{display:flex;gap:6px;margin-top:6px}.pc-parents button{display:flex;align-items:center;gap:5px}.pc-parents .pd-evo-art{width:32px;height:32px;display:inline-flex}.pc-parents img{max-width:100%;max-height:100%;object-fit:contain} /* The index shares the device language without obscuring uncollected Pokémon. */ #app #sidePanel .pg-catalog .pokedex-library-head{border-bottom:2px solid var(--ui-line,#a9d9f6);background:linear-gradient(110deg,#f7fcff,#eaf5ff);border-radius:10px 10px 0 0;padding:14px 18px!important} #app #sidePanel .pg-catalog .pokedex-library-title h2{color:var(--ui-ink,#173650);letter-spacing:-.6px} #app #sidePanel .pg-catalog .pokedex-species-card{border-radius:9px!important;box-shadow:none!important;background:var(--ui-card,#fff)!important;border-color:var(--ui-line,#d4e3ef)!important} #app #sidePanel .pg-catalog .pokedex-species-card:hover{border-color:#5aa8d7!important;background:var(--ui-card,#f4faff)!important} @media(min-width:961px) and (max-width:1150px){ #app #sidePanel .dd-layout{grid-template-columns:280px minmax(0,1fr);gap:16px;padding:14px} #app #sidePanel .dd-identity{padding:13px 13px 0}#app #sidePanel .dd-identity h2{font-size:29px} #app #sidePanel .dd-stage{height:244px} #app #sidePanel .dd-top{grid-template-columns:minmax(200px,220px) minmax(0,1fr);gap:13px} #app #sidePanel .dd-stat-table th{width:109px;font-size:11px}#app #sidePanel .dd-stat-table th svg{width:16px;height:16px;margin-right:4px} #app #sidePanel .dd-stat-table .dd-stat-value{width:32px;font-size:15px;padding-right:7px} #app #sidePanel .dd-dossier .dd-slot-art{width:43px!important;height:43px!important;flex-basis:43px} #app #sidePanel .dd-dossier .dd-move{min-height:103px!important} #app #sidePanel .dd-appearance{padding-inline:10px}#app #sidePanel .dd-appearance button{font-size:10px;padding:6px} #app #sidePanel .dd-physical{padding:9px 11px;gap:9px}#app #sidePanel .dd-physical dd{font-size:14px} #app #sidePanel .dd-dossier .pc-evo-node .pd-evo-art{width:28px;height:28px;min-width:28px;flex-basis:28px} #app #sidePanel .dd-dossier .pc-evo-node>button{padding:5px;gap:3px}#app #sidePanel .dd-dossier .pc-evo-node b{font-size:10px}#app #sidePanel .dd-dossier .pc-evo-node small{font-size:8px} } @media(max-width:960px){ #app #sidePanel .dd-header{position:sticky;top:0;background:var(--ui-card,#f8fbff);padding-left:12px;gap:8px} #app #sidePanel .dd-layout{grid-template-columns:260px minmax(0,1fr);gap:15px;padding:12px} #app #sidePanel .dd-top{grid-template-columns:1fr;gap:14px} #app #sidePanel .dd-stage{height:245px}#app #sidePanel .dd-identity h2{font-size:28px} #app #sidePanel .dd-numbers{grid-template-columns:1fr} #app #sidePanel .dd-move-detail>header{flex-wrap:wrap}#app #sidePanel .dd-ranks{margin-left:0;width:100%} #app #sidePanel .dd-ranks button{min-width:36px;min-height:40px} #app #sidePanel .dd-dossier .pc-evo-node>button{flex-direction:column;text-align:center} #app #sidePanel .dd-dossier .pc-evo-node b{font-size:10px} #app #sidePanel .dd-dossier .pc-evo-node small{font-size:8px} } @media(min-width:961px) and (max-height:800px){ #app #sidePanel .dd-stage{height:238px} #app #sidePanel .dd-stat-table th,#app #sidePanel .dd-stat-table td{padding-block:4px} #app #sidePanel .dd-stat-table tr{height:30px} #app #sidePanel .dd-section-head{margin-bottom:6px} #app #sidePanel .dd-dossier .dd-move{min-height:94px!important} #app #sidePanel .dd-move-detail{padding:10px 12px} #app #sidePanel .dd-numbers{margin-top:8px} #app #sidePanel .dd-move-detail>footer{margin-top:8px} #app #sidePanel .dd-dossier .pc-evolution{padding-top:8px} #app #sidePanel .dd-dossier .pc-evolution>header{margin-bottom:7px} } @media(max-width:680px){ #app #sidePanel .dd-header{padding:8px 58px 8px 10px;min-height:60px} #app #sidePanel .dd-header-label{display:none}#app #sidePanel .dd-header nav{gap:3px} #app #sidePanel .dd-header nav>button{padding:5px;min-width:33px;height:40px} #app #sidePanel .dd-header>button{font-size:11px;gap:4px} #app #sidePanel .dd-header [data-pc-open=habitat]>span{display:none} #app #sidePanel .dd-layout{grid-template-columns:1fr;gap:22px;padding:10px} #app #sidePanel .dd-identity h2{font-size:31px} #app #sidePanel .dd-stage{height:265px}#app #sidePanel .dd-identity{padding:14px 14px 0} #app #sidePanel .dd-stat-table tr{height:36px} #app #sidePanel .dd-top{gap:18px} #app #sidePanel .dd-dossier .dd-slot-art{width:48px!important;height:48px!important;flex-basis:48px} #app #sidePanel .dd-dossier .pc-info-button{min-width:36px;min-height:36px} #app #sidePanel .dd-dossier .pc-size-scale button{min-height:44px} #app #sidePanel .dd-dossier .pc-evo-node,#app #sidePanel .dd-dossier .pc-evo-children{gap:3px} #app #sidePanel .dd-dossier .pc-evo-node>button{padding:4px} .pc-matchup-columns{grid-template-columns:1fr;gap:8px}.pc-compare>div{grid-template-columns:repeat(3,minmax(0,1fr))} .pc-location-dialog [data-pc-close]{min-width:44px;min-height:44px} } @media(prefers-reduced-motion:reduce){#app #sidePanel .dd-dossier .dd-ring{animation:none!important}#app #sidePanel .dd-portrait-layers>[data-dex-art]{transition:none}} /* /pokedex-catalog-v2420.css: deferred, original cascade position */ @media all{:root[data-pk-style-slot="owner-109"]{}} /* pk-style-source:110 */ /* /pokedex-evolution-v2430.css */ /* Scoped evolution surfaces: no recursive flex tree, no viewport-sized tooltip. */ #app #sidePanel .pe-family{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} #app #sidePanel .pe-family.is-branched{grid-template-columns:repeat(4,minmax(0,1fr))} #app #sidePanel .pe-evolution .is-branched .pe-form{position:relative} #app #sidePanel .pe-evolution .is-branched .pe-form-open{height:40px;min-height:40px;padding:3px 25px 3px 3px} #app #sidePanel .pe-evolution .is-branched .pe-form-art{width:24px;height:24px;flex-basis:24px} #app #sidePanel .pe-evolution .is-branched .pe-requirements-link{position:absolute;right:3px;top:8px;width:20px;font-size:0;padding:1px;border:0;background:transparent} #app #sidePanel .pe-evolution .is-branched .pe-form-open small{font-size:9px} #app #sidePanel .pe-evolution .pe-root{height:20px} #app #sidePanel .pe-evolution .pe-root .pe-form-art{width:20px;height:20px;flex-basis:20px} #app #sidePanel .pe-form{min-width:0;border:1px solid var(--ui-line,#d7e5ef);border-radius:9px;background:var(--ui-card,#fff);overflow:hidden} #app #sidePanel .pe-form:has([aria-current="true"]){border-color:#3996c8;background:var(--ui-paper,#edf8ff)} #app #sidePanel .pe-form-open{display:flex;align-items:center;gap:6px;width:100%;min-width:0;padding:6px;border:0;background:transparent;box-shadow:none;border-radius:0;text-align:left} #app #sidePanel .pe-form-open span{min-width:0;display:grid;gap:3px} #app #sidePanel .pe-form-open b{font-size:11px;overflow-wrap:anywhere} #app #sidePanel .pe-form-open small{font-size:10px;color:var(--ui-muted,#597c94)} #app #sidePanel .pe-form-art{display:inline-flex;flex:0 0 35px;width:35px;height:35px;background:none} #app #sidePanel .pe-form-art img{width:100%;height:100%;object-fit:contain} #app #sidePanel .pe-requirements-link{display:flex;gap:4px;justify-content:center;align-items:center;width:100%;min-height:25px;padding:3px;border:0;border-top:1px solid var(--ui-line,#e3eef4);border-radius:0;background:var(--ui-card,#f6fafc);font-size:10px;color:var(--ui-muted,#356b8a);box-shadow:none} #app #sidePanel .pe-requirements-link svg{width:13px;height:13px} #app #sidePanel .pe-root{display:flex;align-items:center;gap:8px;margin-bottom:5px;color:var(--ui-muted,#577b93);font-size:10px} #app #sidePanel .pe-root button{display:flex;align-items:center;gap:4px;border:0;background:none;padding:0;box-shadow:none;font-size:12px;font-weight:700} #app #sidePanel .pe-root .pe-form-art{width:25px;height:25px;flex-basis:25px} #app #sidePanel .pe-route{width:330px;padding:14px} #app #sidePanel .pe-route h3{font-size:15px} #app #sidePanel .pe-route ul{list-style:none;padding:0;margin:12px 0;display:grid;gap:9px} #app #sidePanel .pe-route li{display:flex;align-items:center;gap:8px;font-size:13px} #app #sidePanel .pe-requirement-art{display:inline-flex;width:26px;height:26px;flex:0 0 26px} #app #sidePanel .pe-requirement-art img{width:100%;height:100%;object-fit:contain} #app #sidePanel .pe-route>small{display:block;font-size:11px;color:var(--ui-muted,#638096);line-height:1.5} #app #sidePanel .pe-compare-dialog{position:fixed;inset:auto;width:720px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;margin:0;padding:20px;border:1px solid var(--ui-line,#bad5e6);border-radius:16px;color:var(--ui-ink,#214961);background:var(--ui-card,#fff);box-shadow:0 16px 55px #12384f40} #app #sidePanel .pe-compare-dialog::backdrop{background:#19394d5c} #app #sidePanel .pe-compare-dialog>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} #app #sidePanel .pe-compare-dialog h3{font-size:21px;margin:4px 0} #app #sidePanel .pe-compare-dialog header small{font-size:10px;letter-spacing:.12em;color:var(--ui-muted,#6c8b9f)} #app #sidePanel .pe-compare-dialog [data-pc-close]{display:grid;place-items:center;width:36px;height:36px;padding:6px;border:1px solid var(--ui-line,#ccdfea);border-radius:9px;background:var(--ui-card,#f4faff)} #app #sidePanel .pe-compare-select{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:14px;font-weight:700} #app #sidePanel .pe-compare-select select{min-width:0;flex:1;padding:9px;background:var(--ui-card,#f7fbfe);border:1px solid var(--ui-line,#c9dce9);border-radius:7px;color:inherit;font:inherit} #app #sidePanel .pe-comparison{display:grid;grid-template-columns:280px minmax(0,1fr);gap:15px;align-items:center} #app #sidePanel .pe-radar>svg{display:block;width:100%;height:auto;overflow:visible} #app #sidePanel .pe-radar-grid polygon,#app #sidePanel .pe-radar-grid line{fill:none;stroke:#d9e6ee;stroke-width:1} #app #sidePanel .pe-radar-grid text{font-size:10px;fill:#526f86;stroke:none} #app #sidePanel .pe-radar-own{fill:#349ed02b;stroke:#268dbe;stroke-width:2} #app #sidePanel .pe-radar-target{fill:#ab65c735;stroke:#9855b7;stroke-width:2} #app #sidePanel .pe-legend{display:flex;justify-content:center;gap:14px;font-size:11px} #app #sidePanel .pe-legend span:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#268dbe;margin-right:4px} #app #sidePanel .pe-legend span+span:before{background:#9855b7} #app #sidePanel .pe-radar>small{display:block;text-align:center;font-size:10px;color:var(--ui-muted,#6c8b9f);margin-top:6px} #app #sidePanel .pe-compare-table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums} #app #sidePanel .pe-compare-table th,#app #sidePanel .pe-compare-table td{padding:10px 3px;border-bottom:1px solid var(--ui-line,#e3edf4);text-align:right} #app #sidePanel .pe-compare-table th:first-child{text-align:left} #app #sidePanel .pe-compare-table thead th{font-size:10px;color:var(--ui-muted,#6c8b9f);overflow-wrap:anywhere} #app #sidePanel .pe-compare-table tbody th{font-size:11px;font-weight:500} #app #sidePanel .pe-compare-table svg{width:17px;height:17px;vertical-align:middle;color:var(--stat-color);margin-right:4px} #app #sidePanel .pe-compare-table .is-up{color:#208362}#app #sidePanel .pe-compare-table .is-down{color:#c45458} #app #sidePanel .pe-compare-dialog .pc-note{font-size:11px;margin:16px 0 0;line-height:1.6;color:var(--ui-muted,#638096)} #app #sidePanel .dd-move-detail .dd-move-summary{margin:0;font-size:12px;line-height:1.45} #app #sidePanel .dd-move-detail .dd-move-summary strong{color:var(--ui-accent,#286e97)} #app #sidePanel .pc-popover .pe-skill-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12px;margin:12px 0} #app #sidePanel .pc-popover .pe-skill-meta dt{font-size:10px;color:var(--ui-muted,#7892a4)}#app #sidePanel .pc-popover .pe-skill-meta dd{margin:3px 0 0;font-weight:700} #app #sidePanel .ph-evolution-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #app #sidePanel .ph-evolution-check{display:flex;align-items:center;gap:7px;min-width:0;padding:10px;border:1px solid var(--ui-line,#d5e3ec);border-radius:9px;font-size:12px;background:var(--ui-card,#f8fbfe)} #app #sidePanel .ph-evolution-check.is-met{border-color:#b8e1d4} #app #sidePanel .ph-evolution-check>span{flex:1;min-width:0} #app #sidePanel .ph-evolution-check small,#app #sidePanel .ph-shiny-row small{display:block;margin-top:3px;font-size:11px;color:var(--ui-muted,#688395)} #app #sidePanel .ph-evolution-check svg{flex-shrink:0} #app #sidePanel .ph-shiny{margin-top:14px} #app #sidePanel .ph-shiny-row{display:flex;gap:9px;align-items:center;font-size:13px;padding:12px 0} #app #sidePanel .ph-shiny-row>span{flex:1} #app #sidePanel .ph-shiny-row .ph-evolution-item-art{width:36px;height:36px;flex:0 0 36px} @media(max-width:760px){ #app #sidePanel .pe-compare-dialog{padding:14px} #app #sidePanel .pe-comparison{grid-template-columns:1fr;gap:8px} #app #sidePanel .pe-radar{max-width:230px;justify-self:center} #app #sidePanel .pe-compare-table th,#app #sidePanel .pe-compare-table td{padding:7px 3px} #app #sidePanel .pe-family.is-branched{grid-template-columns:repeat(2,minmax(0,1fr))} #app #sidePanel .ph-evolution-checklist{grid-template-columns:1fr} #app #sidePanel .ph-shiny-row{flex-wrap:wrap} } @media(min-width:761px) and (max-height:800px){ #app #sidePanel .dd-dossier .pc-evolution{padding-top:8px} #app #sidePanel .pe-form-art{width:28px;height:28px;flex-basis:28px} #app #sidePanel .pe-form-open{padding:4px} #app #sidePanel .pe-form-open b{font-size:10px} #app #sidePanel .pe-requirements-link{min-height:22px;font-size:9px} } #app #sidePanel .pe-evolution>header .pe-root{margin:0;font-size:10px;white-space:nowrap} #app #sidePanel .pe-evolution>header .pe-root .pe-form-art{display:none} @media(min-width:961px) and (max-height:740px){ #app #sidePanel .dd-layout{padding-block:8px} #app #sidePanel .dd-main{gap:6px} #app #sidePanel .dd-move-detail>footer{margin-top:6px} #app #sidePanel .dd-numbers{margin-top:6px} } @media(max-width:760px){ #app #sidePanel .pe-evolution>header{flex-wrap:wrap} #app #sidePanel .pe-evolution>header .pe-root{order:3;width:100%} } /* pk-style-source:111 */ /* /pokemon-clarity-v2440.css */ /* Partner + reference surfaces; no global controls or window geometry overrides. */ #app #sidePanel .ph-header{justify-content:flex-start;gap:14px} #app #sidePanel .ph-header .ph-roster{margin-left:0;margin-right:auto;justify-content:flex-start;flex:0 1 auto;max-width:calc(100% - 160px)} #app #sidePanel .ph-header .ph-battle-lock--header{order:3;margin-left:auto} #app #sidePanel .ph-identity-intro{padding:4px 76px 12px 2px} #app #sidePanel .ph-identity-intro h1{letter-spacing:-.025em;line-height:1.08;margin-top:6px;margin-bottom:9px} #app #sidePanel .ph-dex-number{font-size:11px;letter-spacing:.1em;color:var(--ui-muted,#64859a)} #app #sidePanel .ph-level{background:var(--ui-card,#fff);border:1px solid var(--ui-line,#c9dfed);box-shadow:0 3px 0 #dcecf5;border-radius:12px;padding:7px 10px;min-width:52px} #app #sidePanel .ph-level strong{font-size:29px;line-height:1} #app #sidePanel .ph-level small{font-size:9px;color:inherit} .ph-hover-tip.is-structured{width:340px;padding:14px;white-space:normal} .ph-help-card header{display:grid;gap:3px;margin-bottom:11px}.ph-help-card header small{font-size:9px;letter-spacing:.15em;color:var(--ui-muted,#6c8799)}.ph-help-card header>b{font-size:18px} .ph-help-changes{display:grid;gap:6px}.ph-help-changes>div{display:flex;align-items:center;gap:8px;padding:9px;background:var(--stat-bg);border-radius:8px}.ph-help-changes svg{width:21px;height:21px;color:var(--stat-color)}.ph-help-changes span{flex:1}.ph-help-changes b{font-size:15px}.ph-help-card .is-up{color:#168265}.ph-help-card .is-down{color:#c34c58} .ph-help-card ul{list-style:none;margin:11px 0;padding:0;display:grid;gap:7px}.ph-help-card li{display:flex;justify-content:space-between;gap:12px;font-size:11px}.ph-help-card li span{color:var(--ui-muted,#668297);text-align:right}.ph-help-card footer{display:flex;gap:6px;align-items:center;border-top:1px solid var(--ui-line,#dfebf2);padding-top:8px;font-size:10px;color:var(--ui-muted,#628094)}.ph-help-card footer svg{width:16px;height:16px;color:#249b76} #app #sidePanel .ps-channel{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;background:var(--stat-bg);color:var(--stat-ink);border-radius:5px;padding:3px 6px;font-size:10px;font-weight:650;white-space:nowrap} #app #sidePanel .ps-channel svg{width:16px;height:16px;color:var(--stat-color)} #app #sidePanel .dd-effects>div{background:var(--stat-bg,#eff7fc)} #app #sidePanel .dd-effects dt svg{color:var(--stat-color)} #app #sidePanel .ph-hub .ph-skill-modal{width:min(780px,100%);height:auto;max-height:100%;border-radius:18px} #app #sidePanel .ph-skill-library{min-height:0;max-height:510px;grid-template-columns:205px minmax(0,1fr)} #app #sidePanel .ph-skill-detail{padding:14px;background:var(--ui-card,#fff);gap:10px} #app #sidePanel .ph-skill-detail>header{align-items:center} #app #sidePanel .ph-hub .ph-skill-detail .ph-detail-art{width:54px;height:54px;flex:0 0 54px} #app #sidePanel .ph-hub .ph-skill-detail .ph-detail-art img{width:100%;height:100%} #app #sidePanel .ph-skill-detail>header h3{font-size:19px;line-height:1.12;margin:3px 0 6px} #app #sidePanel .ph-detail-body{flex:0 1 auto;min-height:0;overflow:auto} #app #sidePanel .ps-rank-line{display:flex;gap:7px;align-items:center;flex-wrap:wrap} #app #sidePanel .ph-skill-detail>header .ph-rank-pips{margin:0} #app #sidePanel .ps-rank-line>b{font-size:10px;color:var(--ui-muted,#69879a)} #app #sidePanel .ph-effect{font-size:12px;margin:0 0 10px;line-height:1.45} #app #sidePanel .ps-effects{display:flex;gap:7px} #app #sidePanel .ps-effects>div{flex:1;min-width:0;background:var(--stat-bg);border-radius:8px;padding:9px 11px;display:grid;grid-template-columns:1fr auto;gap:3px 8px} #app #sidePanel .ps-effects span{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--stat-ink)} #app #sidePanel .ps-effects span svg{color:var(--stat-color);width:18px;height:18px} #app #sidePanel .ps-effects b{grid-column:2;grid-row:1/3;align-self:center;font-size:23px} #app #sidePanel .ps-effects small{font-size:9px;color:var(--ui-muted,#6a8396);line-height:1.3} #app #sidePanel .ps-timings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:11px 0} #app #sidePanel .ps-timings dt{font-size:10px;color:var(--ui-muted,#6b899e);display:flex;align-items:center;gap:5px} #app #sidePanel .ps-timings dt svg{width:16px;height:16px} #app #sidePanel .ps-timings dd{font-size:17px;font-weight:750;margin:3px 0 0} #app #sidePanel .ps-upgrade{border:1px solid var(--ui-line,#d9e8f1);border-radius:9px;padding:10px;background:var(--ui-card,#f8fcfe)} #app #sidePanel .ps-upgrade>header{display:flex;align-items:center;gap:6px;font-size:12px} #app #sidePanel .ps-upgrade>header>svg{width:18px;height:18px;color:#b18222} #app #sidePanel .ps-upgrade>header>span{margin-left:auto;font-size:10px;color:#996d15} #app #sidePanel .ps-upgrade-deltas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:9px 0} #app #sidePanel .ps-upgrade-deltas dt{font-size:9px;color:var(--ui-muted,#7490a3)} #app #sidePanel .ps-upgrade-deltas dd{margin:3px 0 0;display:flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap} #app #sidePanel .ps-upgrade-deltas dd span{color:var(--ui-muted,#758799)}.ps-upgrade-deltas i{font-style:normal;color:var(--ui-muted,#8095a4)} #app #sidePanel .ps-upgrade-deltas b{color:#21866b} #app #sidePanel .ps-gates{display:flex;flex-wrap:wrap;gap:7px;font-size:10px;color:#8d6b46} #app #sidePanel .ps-gates span{display:flex;align-items:center;gap:3px}.ps-gates svg{width:13px;height:13px} #app #sidePanel .ps-gates .is-met{color:#278367} #app #sidePanel .ps-next-point{font-size:10px;text-align:right;color:var(--ui-muted,#6d8ca2)} #app #sidePanel .ph-skill-detail .ph-picker-actions{margin:0;gap:7px} #app #sidePanel .ph-skill-detail .ph-picker-actions button{font-size:12px;padding:9px 7px;min-height:39px} #app #sidePanel .ph-info-toggle{align-self:flex-start;margin:0;font-size:11px;min-height:25px;padding:2px 0} #app #sidePanel .pe-direction{display:inline-flex!important;flex:0 0 12px;color:var(--ui-muted,#69a0c3)} #app #sidePanel .pe-direction svg{width:13px;height:13px} #app #sidePanel .pe-resource{display:inline-flex;align-items:center;gap:2px;font-size:11px} #app #sidePanel .pe-cost-art{display:inline-flex;width:21px;height:21px;flex:0 0 21px;background:none} #app #sidePanel .pe-cost-art img{width:100%;height:100%;object-fit:contain} #app #sidePanel .pe-resource>svg{width:15px;height:15px} #app #sidePanel .pe-requirements-link{gap:10px;min-height:27px} #app #sidePanel .pe-requirements-link>svg{margin-left:auto;margin-right:4px} #app #sidePanel .pe-evolution .is-branched .pe-form-open{padding:3px;min-height:33px;height:33px;gap:3px} #app #sidePanel .pe-evolution .is-branched .pe-requirements-link{position:static;width:100%;height:24px;min-height:24px;padding:1px 4px;font-size:10px;background:var(--ui-card,#f6fafc);border-top:1px solid var(--ui-line,#e3eef4);gap:5px} #app #sidePanel .pe-evolution .is-branched .pe-cost-art{width:17px;height:17px;flex-basis:17px} #app #sidePanel .pe-evolution .is-branched .pe-resource{font-size:9px} #app #sidePanel .pf-open{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:10px;padding:5px 7px;background:var(--ui-card,#fff);border:1px solid var(--ui-line,#c5dceb);border-radius:7px} #app #sidePanel .pf-open svg{width:16px;height:16px} #app #sidePanel .dd-appearance>[role=group]{flex:0 0 auto;white-space:nowrap} #app #sidePanel .dd-appearance [data-pokedex-visual]{white-space:nowrap;padding:6px;font-size:10px} #app #sidePanel .dd-appearance .pf-open{display:inline-flex;gap:3px;align-items:center;font-size:10px;padding:5px 3px;white-space:nowrap} #app #sidePanel .dd-appearance>.pc-info-button{flex:0 0 25px;width:25px;min-width:25px;height:28px;padding:3px} #app #sidePanel .dd-appearance>.pc-info-button>span{display:none} #app #sidePanel .dd-appearance>.pc-info-button svg{width:17px;height:17px} #app #sidePanel .pf-dialog{width:750px;padding:18px} #app #sidePanel .pf-dialog [data-pf-content]{min-width:0} #app #sidePanel .pf-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px} #app #sidePanel .pf-tabs button{display:flex;align-items:center;gap:5px;border:1px solid var(--ui-line,#d1e1ec);border-radius:7px;padding:4px 9px;background:var(--ui-card,#f7fbfe);font-size:12px;box-shadow:none} #app #sidePanel .pf-tabs button[aria-pressed=true]{background:var(--ui-paper,#e5f4ff);border-color:#3798d2;color:var(--ui-accent,#146da3)} #app #sidePanel .pf-tabs img{width:30px;height:30px;object-fit:contain} #app #sidePanel .pf-body{display:grid;grid-template-columns:225px minmax(0,1fr);gap:20px;align-items:start} #app #sidePanel .pf-art{display:grid;justify-items:center;gap:10px;align-self:center;background:radial-gradient(ellipse,#e9f6ff,transparent 70%)} #app #sidePanel .pf-art img{width:225px;height:225px;object-fit:contain} #app #sidePanel .pf-art>span{font-size:10px;border:1px solid var(--ui-line,#d7e5f0);border-radius:5px;background:var(--ui-card,#f5fafd);padding:4px 8px;color:var(--ui-muted,#5f829a)} #app #sidePanel .pf-body h3{font-size:22px;margin:0 0 7px} #app #sidePanel .pf-body h4{font-size:12px;margin:14px 0 8px} #app #sidePanel .pf-types{display:flex;gap:6px;font-size:11px;color:var(--ui-muted,#557991)} #app #sidePanel .pf-types span{border-bottom:2px solid var(--ui-line,#cfe4f1);padding-bottom:3px} #app #sidePanel .pf-base-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:12px 0} #app #sidePanel .pf-base-stats>div{background:var(--stat-bg);border-radius:6px;padding:7px} #app #sidePanel .pf-base-stats dt{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--stat-ink)} #app #sidePanel .pf-base-stats svg{width:15px;height:15px;color:var(--stat-color)} #app #sidePanel .pf-base-stats dd{font-size:19px;font-weight:750;margin:3px 0 0} #app #sidePanel .pf-measures{display:flex;gap:16px;font-size:11px;color:var(--ui-muted,#66879d)} #app #sidePanel .pf-measures span{display:flex;align-items:center;gap:4px} #app #sidePanel .pf-measures svg{width:15px;height:15px} #app #sidePanel .pf-requirements{display:grid;gap:6px} #app #sidePanel .pf-requirements>div{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--ui-line,#d9e7f0);border-radius:7px;font-size:12px} #app #sidePanel .pf-requirements img,#app #sidePanel .pf-requirements svg{width:30px;height:30px;object-fit:contain} #app #sidePanel .pf-requirements small{display:block;font-size:10px;color:var(--ui-muted,#718b9e);margin-top:3px} #app #sidePanel .pf-note{font-size:11px;line-height:1.5;color:var(--ui-muted,#64849a);margin:10px 0 0} #app #sidePanel .pf-shiny-cost{display:flex;gap:10px;align-items:center;margin:10px 0} #app #sidePanel .pf-shiny-cost img{width:42px;height:42px} #app #sidePanel .pf-shiny-cost small{display:block;color:var(--ui-muted,#718b9e);font-size:11px;margin-top:5px} @media(max-width:760px){ #app #sidePanel .ph-skill-library{display:flex;flex-direction:column;max-height:none} #app #sidePanel .ph-skill-detail{padding:10px;gap:7px} #app #sidePanel .ps-rank-line{gap:5px} #app #sidePanel .ps-channel{font-size:9px} #app #sidePanel .ph-skill-detail>header h3{font-size:17px} #app #sidePanel .ph-hub .ph-skill-detail .ph-detail-art{width:45px;height:45px;flex-basis:45px} #app #sidePanel .ps-upgrade{padding:8px} #app #sidePanel .ps-upgrade-deltas dd{font-size:10px;gap:3px} #app #sidePanel .ps-timings{margin:9px 0} #app #sidePanel .ps-effects>div{padding:8px} #app #sidePanel .pf-dialog{padding:12px} #app #sidePanel .pf-body{grid-template-columns:1fr;gap:8px} #app #sidePanel .pf-art img{width:150px;height:150px} #app #sidePanel .pf-art{gap:4px} #app #sidePanel .pf-body h3{font-size:19px} #app #sidePanel .pf-tabs button{font-size:10px;padding:3px 6px} #app #sidePanel .dd-appearance{gap:4px;flex-wrap:wrap} } @media(max-height:500px) and (min-width:761px){ #app #sidePanel .ph-skill-detail{display:flex;gap:5px;padding:8px} #app #sidePanel .ph-skill-detail>header{display:none} #app #sidePanel .ph-effect{margin-bottom:4px} #app #sidePanel .ps-upgrade{padding:5px} #app #sidePanel .ps-upgrade-deltas{margin:4px 0} #app #sidePanel .ps-timings{margin:4px 0} #app #sidePanel .ps-next-point{display:none} } @media(prefers-reduced-motion:reduce){#app #sidePanel .pf-art img{animation:none}} @media(min-width:961px) and (max-height:800px){ #app #sidePanel .pe-evolution .is-branched .pe-form-open{height:24px;min-height:24px;padding:1px 3px;gap:2px} #app #sidePanel .pe-evolution .is-branched .pe-form-art{width:20px;height:20px;flex-basis:20px} #app #sidePanel .pe-evolution .is-branched .pe-form-open>span:last-child{display:flex;flex:1;align-items:center;justify-content:space-between;gap:2px} #app #sidePanel .pe-evolution .is-branched .pe-form-open b{font-size:9px} #app #sidePanel .pe-evolution .is-branched .pe-form-open small{font-size:8px;white-space:nowrap} #app #sidePanel .pe-evolution .is-branched .pe-requirements-link{height:22px;min-height:22px} } /* pk-style-source:112 */ /* /adaptive-hud-v2470.css */ /* v2.47.0 — adaptive world HUD, centered action feedback and real window focus. */ .game-screen[data-adaptive-hud="v2470"] { --hud2470-panel-layer: 300; --hud2470-front-layer: 360; --hud2470-dialog-layer: 420; } /* Every movable HUD window participates in one predictable focus order. */ .game-screen[data-adaptive-hud="v2470"] .hud-window.is-open { z-index: var(--hud2470-panel-layer) !important; } .game-screen[data-adaptive-hud="v2470"] :is(#sidePanel, #chatPanel, #editorPanel).hud-window.is-open.is-window-front { z-index: var(--hud2470-front-layer) !important; isolation: isolate; } body.is-battling .game-screen[data-adaptive-hud="v2470"] .hud-window.is-open.is-window-front { z-index: 390 !important; } /* Short, central feedback does not compete with the top HUD. */ #app[data-screen="game"] .toast { --toast-accent: #54b9ea; position: fixed !important; z-index: 500 !important; top: clamp(168px, 43dvh, 430px) !important; left: 50% !important; display: grid; min-height: 46px; max-width: min(440px, calc(100vw - 32px)) !important; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 16px 10px 13px !important; transform: translate(-50%, -50%) scale(.96) !important; border: 1px solid color-mix(in srgb, var(--toast-accent) 36%, rgba(255, 255, 255, .72)) !important; border-radius: 16px !important; background: color-mix(in srgb, var(--theme-surface, #12394b) 91%, transparent) !important; color: var(--theme-text, #fff) !important; box-shadow: 0 15px 36px rgba(4, 29, 42, .22), inset 0 1px rgba(255, 255, 255, .32) !important; font-size: 12px !important; font-weight: 760 !important; line-height: 1.35; letter-spacing: -.01em; opacity: 0 !important; pointer-events: none; backdrop-filter: blur(14px) saturate(1.08); transition: opacity .16s ease, transform .18s cubic-bezier(.2,.8,.2,1) !important; } #app[data-screen="game"] .toast::before { width: 8px; height: 8px; border-radius: 50%; background: var(--toast-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--toast-accent) 16%, transparent), 0 0 18px color-mix(in srgb, var(--toast-accent) 54%, transparent); content: ""; } #app[data-screen="game"] .toast[data-tone="blocked"] { --toast-accent: #f2a640; } #app[data-screen="game"] .toast[data-tone="success"] { --toast-accent: #30bd83; } #app[data-screen="game"] .toast.is-open { transform: translate(-50%, -50%) scale(1) !important; opacity: 1 !important; } html[data-game-theme="light"] #app[data-screen="game"] .toast { background: rgba(249, 253, 252, .94) !important; color: #173e50 !important; box-shadow: 0 15px 34px rgba(7, 47, 62, .18), inset 0 1px #fff !important; } /* Minimap top bar keeps the useful state visible in both expanded and compact modes. */ .game-screen[data-adaptive-hud="v2470"] .world-minimap-topbar { display: grid !important; grid-template-columns: 28px minmax(0, 1fr) auto !important; gap: 8px; align-items: center; } .world-minimap-collapse-v2470 { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .08); color: currentColor; cursor: pointer; box-shadow: none; transition: background .14s ease, transform .16s ease; } .world-minimap-collapse-v2470:hover { background: rgba(255, 255, 255, .16); } .world-minimap-collapse-v2470:active { transform: scale(.93); } .world-minimap-collapse-v2470 svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; } .world-minimap-place { display: grid; min-width: 0; gap: 0; } .world-minimap-place > small { display: none; color: currentColor; font-size: 7px; font-weight: 800; letter-spacing: .09em; opacity: .62; text-transform: uppercase; } .world-minimap-place > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .world-minimap-date-v2470 { display: none; } @media (min-width: 761px) { .game-screen[data-adaptive-hud="v2470"] { --world-hud-width: clamp(286px, 20vw, 316px); --world-hud-map-height: clamp(190px, 13.5vw, 216px); --world-hud-current-height: var(--world-hud-map-height); --world-hud-gap: 10px; --world-hud-radius: 17px; } .game-screen[data-adaptive-hud="v2470"] .world-minimap { width: var(--world-hud-width) !important; height: var(--world-hud-map-height) !important; grid-template-rows: 34px minmax(0, 1fr) 35px !important; border-radius: var(--world-hud-radius) !important; transition: height .18s ease, width .18s ease, box-shadow .18s ease !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap-topbar { min-height: 34px !important; padding: 3px 9px 3px 7px !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap-bottombar, .game-screen[data-adaptive-hud="v2470"] .world-minimap-channel, .game-screen[data-adaptive-hud="v2470"] .world-minimap-ping { min-height: 35px !important; height: 35px !important; } .game-screen[data-adaptive-hud="v2470"] .quest-widget, .game-screen[data-adaptive-hud="v2470"] .quest-widget.is-collapsed { top: calc(max(14px, env(safe-area-inset-top)) + var(--world-hud-current-height) + var(--world-hud-gap)) !important; width: var(--world-hud-width) !important; max-width: var(--world-hud-width) !important; } .game-screen[data-adaptive-hud="v2470"][data-minimap-collapsed="true"] { --world-hud-current-height: 52px; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed { height: 52px !important; grid-template-rows: 52px !important; overflow: hidden !important; box-shadow: 0 10px 25px rgba(0, 27, 43, .18), inset 0 1px rgba(255,255,255,.26) !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-topbar { min-height: 52px !important; border-radius: var(--world-hud-radius) !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-map-surface, .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-bottombar, .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-channel-menu { display: none !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-place > small, .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-date-v2470 { display: block; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-collapse-v2470 svg { transform: rotate(-90deg); } } /* A 16:9 laptop keeps the world visible instead of scaling as a large desktop. */ @media (min-width: 761px) and (max-height: 900px) { .game-screen[data-adaptive-hud="v2470"] { --world-hud-width: clamp(278px, 19vw, 304px); --world-hud-map-height: 190px; --world-hud-gap: 9px; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"][data-adaptive-hud="v2470"] .player-chip { width: 300px !important; min-width: 300px !important; min-height: 94px !important; grid-template-columns: 57px minmax(0, 1fr) !important; gap: 9px !important; padding: 8px 12px 8px 8px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"][data-adaptive-hud="v2470"] .player-chip-avatar { width: 55px !important; height: 55px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"][data-adaptive-hud="v2470"] .player-chip-progress { grid-template-columns: 47px minmax(0, 1fr) 56px !important; gap: 5px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"][data-adaptive-hud="v2470"] .player-stamina-hud, .game-screen[data-main-hud="v70"][data-hud-revision="v71"][data-adaptive-hud="v2470"] .party-hud[data-count="1"] + .player-stamina-hud, .game-screen[data-main-hud="v70"][data-hud-revision="v71"][data-adaptive-hud="v2470"] .party-hud[data-count="2"] + .player-stamina-hud { top: calc(max(14px, env(safe-area-inset-top)) + 102px) !important; width: 300px !important; min-height: 38px !important; grid-template-columns: 108px minmax(0, 1fr) !important; padding-block: 4px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"][data-adaptive-hud="v2470"] .player-stamina-title { grid-template-columns: 27px minmax(0, 1fr) !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"][data-adaptive-hud="v2470"] .player-stamina-title > img { width: 26px !important; height: 26px !important; } .game-screen[data-main-hud="v70"][data-hud-revision="v71"][data-adaptive-hud="v2470"] .party-hud { top: calc(max(14px, env(safe-area-inset-top)) + 148px) !important; } .game-screen[data-adaptive-hud="v2470"] .chat-panel.chat-messenger:not(.is-minimized) { width: clamp(400px, 31vw, 500px) !important; height: min(560px, calc(100dvh - 170px)) !important; } } @media (min-width: 1800px) and (min-height: 1000px) { .game-screen[data-adaptive-hud="v2470"] { --world-hud-width: 326px; --world-hud-map-height: 224px; } } /* The chat title no longer repeats the online count already shown in its people column. */ .game-screen[data-adaptive-hud="v2470"] .chat-title-copy { align-content: center; } .game-screen[data-adaptive-hud="v2470"] .chat-title-copy > b { margin: 0 !important; } .chat-settings-button-v2470 svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } /* Resize is a compact corner control, aligned with the chat surface. */ @media (min-width: 761px) { .game-screen[data-adaptive-hud="v2470"] .chat-resize { right: 5px !important; bottom: 5px !important; width: 28px !important; height: 28px !important; border-radius: 9px !important; background: rgba(69, 133, 159, .07) !important; } .game-screen[data-adaptive-hud="v2470"] .chat-resize .ui-icon { width: 17px !important; height: 17px !important; transform: none !important; } } /* Atlas zoom controls behave like one compact tool instead of four drifting buttons. */ .region-map-v2204-zoom { grid-template-columns: repeat(3, 32px) !important; gap: 2px !important; height: 40px !important; padding: 3px !important; } .region-map-v2204-zoom button, .region-map-v2204-zoom button:last-child { width: 32px !important; min-width: 32px !important; height: 32px !important; } @media (max-width: 760px) { #app[data-screen="game"] .toast { top: 42dvh !important; min-height: 44px; max-width: calc(100vw - 28px) !important; padding: 9px 13px 9px 12px !important; border-radius: 15px !important; font-size: 11px !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap-topbar { grid-template-columns: 25px minmax(0, 1fr) auto !important; gap: 5px; padding-inline: 5px 7px !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap-collapse-v2470 { width: 25px; height: 25px; border-radius: 8px; } .game-screen[data-adaptive-hud="v2470"] .world-minimap-collapse-v2470 svg { width: 15px; height: 15px; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed { width: 104px !important; height: 48px !important; grid-template-rows: 48px !important; overflow: hidden !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-topbar { min-height: 48px !important; grid-template-columns:25px minmax(0,1fr)!important; border-radius: 15px !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed :is(.world-minimap-map-surface,.world-minimap-bottombar,.world-minimap-channel-menu) { display: none !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-place, .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-date-v2470 { display: none !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-server-meta { justify-self:end; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-collapse-v2470 svg { transform: rotate(-90deg); } } @media (prefers-reduced-motion: reduce) { #app[data-screen="game"] .toast, .game-screen[data-adaptive-hud="v2470"] .world-minimap, .world-minimap-collapse-v2470 svg { transition: none !important; } } /* pk-style-source:113 */ /* /pokemon-hub-fit-v2480.css */ /* 2.48.0 — height-aware Pokémon card. Desktop and laptop layouts fit as one canvas. */ @media (min-width: 901px) { #app #sidePanel#sidePanel#sidePanel.is-pokemon-detail-panel { height: auto !important; max-height: calc(100dvh - 20px) !important; } #app #sidePanel#sidePanel#sidePanel.is-pokemon-detail-panel > #sidePanelContent { overflow: hidden !important; max-height: calc(100dvh - 24px) !important; scrollbar-gutter: auto !important; } #app #sidePanel .ph-card-content, #app #sidePanel .ph-layout, #app #sidePanel .ph-identity, #app #sidePanel .ph-work-area, #app #sidePanel .ph-workspace, #app #sidePanel .ph-screen { min-height: 0; } #app #sidePanel .ph-pages [data-hub-page="profile"] { display: none; } #app #sidePanel .ph-hub[data-hub-view="profile"] .ph-screen--loadout { display: grid; gap: 6px; } } /* A regular laptop window, including Windows/browser scaling around 110–125%. */ @media (min-width: 901px) and (max-height: 900px) { #app #sidePanel .ph-header { min-height: 52px; padding-block: 4px; } #app #sidePanel .ph-layout { grid-template-columns: 310px minmax(0, 1fr); gap: 16px; padding: 10px 12px; } #app #sidePanel .ph-identity, #app #sidePanel .ph-work-area, #app #sidePanel .ph-hub[data-hub-view="loadout"] .ph-screen--loadout { gap: 5px; } #app #sidePanel .ph-exhibit { height: clamp(166px, 22dvh, 198px); min-height: clamp(166px, 22dvh, 198px); } #app #sidePanel .ph-equipment { margin-top: 6px; } #app #sidePanel .ph-hub .ph-gear-slot { min-height: 46px; padding-block: 5px; } #app #sidePanel .ph-field-notes { padding-block: 6px 4px; } #app #sidePanel .ph-vitals { gap: 5px; } #app #sidePanel .ph-resources { padding-block: 4px; } #app #sidePanel .ph-hub .ph-pages button { min-height: 40px; padding-block: 5px; } #app #sidePanel .ph-section-head { margin-bottom: 5px; } #app #sidePanel .ph-training-toolbar { margin-bottom: 4px; padding-block: 4px; } #app #sidePanel .ph-stat-row { min-height: 40px; } #app #sidePanel .ph-hub .ph-train { min-height: 40px; height: 40px; } #app #sidePanel .ph-nature { margin-top: 2px; } #app #sidePanel .ph-genome { min-height: 40px; padding-block: 2px; } #app #sidePanel .ph-hub .ph-move { min-height: 84px; } } /* Dense laptop mode: all information remains visible and interactive without a panel scrollbar. */ @media (min-width: 901px) and (max-height: 780px) { #app #sidePanel .ph-header { min-height: 46px; padding: 3px 58px 3px 8px; } #app #sidePanel .ph-hub .ph-roster button { width: 40px; min-width: 40px; height: 40px; } #app #sidePanel .ph-roster button > span { width: 33px; height: 33px; } #app #sidePanel .ph-layout { display: grid; grid-template-columns: 286px minmax(0, 1fr); gap: 12px; padding: 7px 10px 8px; align-items: start; } #app #sidePanel .ph-identity, #app #sidePanel .ph-work-area { width: auto; gap: 3px; } #app #sidePanel .ph-identity-intro { padding: 0 58px 5px 1px; } #app #sidePanel .ph-identity h1 { margin-block: 2px 4px; font-size: 24px; } #app #sidePanel .ph-level { min-width: 50px; padding: 5px 7px; font-size: 23px; } #app #sidePanel .ph-types .pokemon-type-badge { min-height: 24px; padding-block: 2px; } #app #sidePanel .ph-exhibit { height: clamp(128px, 21dvh, 158px); min-height: clamp(128px, 21dvh, 158px); border-radius: 17px; } #app #sidePanel .ph-stage { padding: 10px 22px 4px; } #app #sidePanel .ph-hub :is(.ph-portrait, .ph-portrait img) { inset: 10px 22px 4px; width: calc(100% - 44px); height: calc(100% - 14px); } #app #sidePanel .ph-equipment { margin-top: 4px; } #app #sidePanel .ph-equipment .ph-section-head { margin-bottom: 3px; } #app #sidePanel .ph-hub .ph-gear-slot { min-height: 42px; padding: 4px 7px; } #app #sidePanel .ph-gear-art { width: 29px; height: 29px; } #app #sidePanel .ph-field-notes { gap: 6px; padding: 4px 1px 3px; } #app #sidePanel .ph-record { padding-top: 3px; } #app #sidePanel .ph-vitals { gap: 3px; } #app #sidePanel .ph-meter > i { margin-top: 2px; } #app #sidePanel .ph-resources { gap: 8px; padding: 3px 0; } #app #sidePanel .ph-hub .ph-pages button { min-height: 36px; padding: 3px 12px; } #app #sidePanel .ph-section-head { margin-bottom: 3px; } #app #sidePanel .ph-section-head h2 { font-size: 14px; } #app #sidePanel .ph-training-toolbar { min-height: 40px; margin-bottom: 3px; padding: 2px 7px; } #app #sidePanel .ph-pill-wallet .ph-pill-art, #app #sidePanel .ph-pill-wallet .ph-pill-art img { width: 32px; height: 32px; max-width: 32px; } #app #sidePanel .ph-stats { gap: 1px; } #app #sidePanel .ph-stat-row { grid-template-columns: 26px minmax(82px, 1fr) 44px minmax(105px, 1.35fr) 38px; gap: 6px; min-height: 34px; padding-left: 6px; } #app #sidePanel .ph-stat-icon { width: 25px; height: 27px; } #app #sidePanel .ph-stat-row > strong { font-size: 20px; } #app #sidePanel .ph-hub .ph-train { width: 38px; min-height: 34px; height: 34px; padding: 5px; } #app #sidePanel .ph-nature { margin-top: 0; } #app #sidePanel .ph-nature summary { min-height: 21px; } #app #sidePanel .ph-genome { min-height: 34px; padding: 0 6px; } #app #sidePanel .ph-hub .ph-genome-label { min-height: 32px; } #app #sidePanel .ph-gene-cell .ph-icon { width: 15px; height: 15px; } #app #sidePanel .ph-hub .ph-talent-wallet { min-height: 28px; } #app #sidePanel .ph-hub .ph-move { grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto 7px; justify-items: start; gap: 3px 6px; min-height: 64px; padding: 5px; text-align: left; } #app #sidePanel .ph-move-art { grid-column: 1; grid-row: 1 / 3; width: 40px; height: 40px; } #app #sidePanel .ph-move b { grid-column: 2; grid-row: 1; align-self: end; text-align: left; } #app #sidePanel .ph-move .ph-rank-pips, #app #sidePanel .ph-empty-ranks { grid-column: 2; grid-row: 2; } } /* Restore the wide two-column card on short desktop viewports; the legacy rule stacked it like a phone. */ @media (min-width: 901px) and (max-height: 650px) { #app #sidePanel .ph-header { position: relative; min-height: 42px; } #app #sidePanel .ph-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 9px; padding: 5px 8px 6px; } #app #sidePanel .ph-exhibit { height: 112px; min-height: 112px; } #app #sidePanel .ph-vitals { grid-template-columns: 1fr 1fr; } #app #sidePanel .ph-stat-row { grid-template-columns: 24px minmax(74px, 1fr) 40px minmax(96px, 1.3fr) 36px; grid-template-rows: 1fr; min-height: 31px; padding-block: 0; } #app #sidePanel .ph-stat-icon, #app #sidePanel .ph-stat-label, #app #sidePanel .ph-stat-row > strong, #app #sidePanel .ph-stat-meta, #app #sidePanel .ph-hub .ph-train { grid-column: auto; grid-row: auto; } #app #sidePanel .ph-moves { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Phones keep readable touch targets, but waste less vertical space before the useful controls. */ @media (max-width: 900px) { #app #sidePanel .ph-layout { display: flex; flex-direction: column; gap: 10px; padding: 6px 8px; } #app #sidePanel .ph-work-area { display: contents; } #app #sidePanel .ph-pages { order: 1; position: sticky; top: 58px; z-index: 18; width: 100%; align-self: stretch; background: var(--ui-card,#f8fbff); } #app #sidePanel .ph-identity { order: 2; } #app #sidePanel .ph-workspace { order: 3; } #app #sidePanel .ph-hub:not([data-hub-view="profile"]) .ph-identity, #app #sidePanel .ph-hub[data-hub-view="profile"] .ph-workspace { display: none; } #app #sidePanel .ph-pages > * { min-width: 0; } #app #sidePanel .ph-hub .ph-pages button { gap: 4px; padding-inline: 4px; font-size: 12px !important; line-height: 1.1; white-space: nowrap; } #app #sidePanel .ph-pages .ph-icon { width: 16px; height: 16px; } #app #sidePanel .ph-exhibit { height: clamp(174px, 27dvh, 220px); min-height: clamp(174px, 27dvh, 220px); } #app #sidePanel .ph-stat-row { grid-template-rows: 26px 18px; gap: 2px 5px; min-height: 52px; padding: 3px 5px 3px 7px; } #app #sidePanel .ph-stat-icon { width: 24px; height: 26px; } #app #sidePanel .ph-stat-label { font-size: 12px; } #app #sidePanel .ph-stat-row > strong { font-size: 21px; } #app #sidePanel .ph-stat-meta { gap: 2px 4px; } #app #sidePanel .ph-hub .ph-train { min-height: 44px; height: 44px; } #app #sidePanel .ph-hub .ph-move { min-height: 64px; } #app #sidePanel .ph-hub[data-hub-view="loadout"] .ph-screen--loadout { gap: 4px; } #app #sidePanel .ph-training-toolbar { gap: 6px; padding: 3px 5px; } #app #sidePanel .ph-pill-wallet .ph-pill-art, #app #sidePanel .ph-pill-wallet .ph-pill-art img { width: 32px; height: 32px; max-width: 32px; } } /* pk-style-source:114 */ /* /pokemon-team-v2940.css */ /* Team ordering and compact identity. Neutral surfaces follow the canonical theme. */ @layer ui-theme { #app #sidePanel.is-team-panel {width:min(1080px,calc(100vw - 28px))!important;max-height:calc(100dvh - 24px)!important;height:auto!important;} #app #sidePanel.is-team-panel>#sidePanelContent {padding:20px!important;overflow:auto!important;max-height:calc(100dvh - 28px)!important;} #app .pt-team {color:var(--ui-ink)!important;} #app .pt-head {display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;padding:0 60px 14px 0!important;border-bottom:1px solid var(--ui-line)!important;} #app .pt-head h1 {display:flex!important;align-items:center!important;gap:10px!important;margin:0!important;font-size:26px!important;} #app .pt-ball {width:28px!important;height:28px!important;object-fit:contain!important;flex:none!important;} #app .pt-capacity {display:flex!important;gap:10px!important;align-items:center!important;} #app .pt-capacity-balls {display:flex!important;gap:3px!important;} #app .pt-capacity-slot {display:inline-flex!important;} #app .pt-capacity-slot.is-free {opacity:.27!important;} #app .pt-capacity>b {white-space:nowrap!important;font-size:22px!important;} #app .pt-capacity small {font-size:13px!important;color:var(--ui-muted)!important;} #app .pt-help,#app .pt-note {font-size:13px!important;color:var(--ui-muted)!important;line-height:1.45!important;} #app .pt-help {margin:12px 0!important;} #app .pt-note {margin-top:14px!important;padding-top:12px!important;border-top:1px solid var(--ui-line)!important;} #app .pt-grid {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;} #app .pt-member {min-width:0!important;border:1px solid var(--ui-line)!important;border-radius:18px!important;background:var(--ui-card)!important;overflow:hidden!important;box-shadow:none!important;} #app .pt-member>header {display:flex!important;justify-content:space-between!important;align-items:center!important;gap:6px!important;padding:10px 12px 0!important;min-height:38px!important;} #app .pt-order {display:flex!important;align-items:center!important;gap:4px!important;font-size:12px!important;color:var(--ui-muted)!important;} #app .pt-order .pt-ball {width:22px!important;height:22px!important;} #app .pt-order b {color:var(--ui-ink)!important;} #app .pt-lead {font-size:11px!important;white-space:nowrap!important;color:var(--ui-accent)!important;background:var(--ui-tint)!important;border-radius:8px!important;padding:4px 6px!important;} #app .pt-open {display:flex!important;flex-direction:column!important;gap:11px!important;padding:10px 12px 12px!important;width:100%!important;background:transparent!important;color:var(--ui-ink)!important;border:0!important;border-radius:0!important;text-align:left!important;cursor:pointer!important;min-height:0!important;box-shadow:none!important;} #app .pt-open:hover {background:var(--ui-hover)!important;} #app .pt-identity {display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important;} #app .pt-portrait {display:grid!important;place-items:center!important;width:76px!important;height:76px!important;flex:none!important;background:var(--ui-soft)!important;border-radius:14px!important;overflow:hidden!important;} #app .pt-image,#app .pt-image img {width:100%!important;height:100%!important;object-fit:contain!important;} #app .pt-name {display:flex!important;flex-direction:column!important;gap:4px!important;min-width:0!important;} #app .pt-name>b {font-size:18px!important;line-height:1.2!important;overflow-wrap:anywhere!important;} #app .pt-name>small {font-size:12px!important;color:var(--ui-muted)!important;} #app .pt-types {display:flex!important;flex-wrap:wrap!important;gap:3px!important;} #app .pt-types .pokemon-type-badge {font-size:10px!important;min-height:20px!important;padding:2px 5px!important;} #app .pt-types .pokemon-type-badge svg {width:12px!important;height:12px!important;} #app .pt-meter {display:flex!important;flex-direction:column!important;gap:5px!important;width:100%!important;} #app .pt-meter>span {display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;font-size:12px!important;color:var(--ui-muted)!important;} #app .pt-meter b {color:var(--ui-ink)!important;font-size:12px!important;} #app .pt-meter>i {display:block!important;height:5px!important;background:var(--ui-soft)!important;border-radius:5px!important;overflow:hidden!important;} #app .pt-meter u {display:block!important;height:100%!important;background:var(--ui-positive)!important;border-radius:inherit!important;} #app .pt-xp u {background:var(--ui-accent)!important;} #app .pt-combat {display:flex!important;justify-content:space-between!important;gap:6px!important;font-size:11px!important;color:var(--ui-muted)!important;} #app .pt-combat b {color:var(--ui-ink)!important;} #app .pt-moves {display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-height:34px!important;} #app .pt-skill-strip {display:flex!important;gap:5px!important;} #app .pt-skill-strip .pokemon-skill-orb {display:grid!important;place-items:center!important;width:32px!important;height:32px!important;} #app .pt-skill-strip .pokemon-skill-orb-icon {width:30px!important;height:30px!important;object-fit:contain!important;} #app .pt-detail-hint {font-size:11px!important;color:var(--ui-accent)!important;white-space:nowrap!important;} #app .pt-member>footer {display:flex!important;justify-content:space-between!important;align-items:center!important;gap:4px!important;border-top:1px solid var(--ui-line)!important;padding:4px 6px!important;background:var(--ui-soft)!important;} #app .pt-member>footer button {min-width:44px!important;min-height:44px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:var(--ui-accent)!important;padding:4px 7px!important;font-size:14px!important;box-shadow:none!important;} #app .pt-member>footer .pt-set-lead {font-size:12px!important;white-space:nowrap!important;} #app .pt-order-controls {display:flex!important;flex:none!important;gap:1px!important;} #app .pt-grip {cursor:grab!important;touch-action:none!important;font-size:23px!important;} #app .pt-member>footer button:hover:not(:disabled) {background:var(--ui-hover)!important;} #app .pt-member>footer button:disabled {color:var(--ui-muted)!important;opacity:.65!important;cursor:default!important;} #app .pt-team button:focus-visible {outline:2px solid var(--ui-focus)!important;outline-offset:-3px!important;} #app .pt-dragging {user-select:none!important;} #app .pt-member.is-drag-source {opacity:.65!important;} #app .pt-member.is-drop-target {outline:2px solid var(--ui-focus)!important;outline-offset:-2px!important;background:var(--ui-tint)!important;} #app .pt-empty {grid-column:1/-1!important;padding:32px 12px!important;text-align:center!important;} #app .pt-announcement {position:absolute!important;clip-path:inset(50%)!important;width:1px!important;height:1px!important;overflow:hidden!important;} /* Identity is a single name/level row; the partner action lives near its team status. */ #app #sidePanel .ph-identity-intro {padding:0!important;} #app #sidePanel .ph-identity-heading {display:flex!important;align-items:center!important;gap:8px!important;justify-content:space-between!important;} #app #sidePanel .ph-identity-heading h1 {min-width:0!important;margin:0!important;line-height:1.15!important;overflow-wrap:anywhere!important;font-size:27px!important;} #app #sidePanel .ph-level {position:static!important;display:flex!important;align-items:baseline!important;gap:4px!important;min-width:0!important;padding:6px 9px!important;flex:none!important;border-radius:10px!important;} #app #sidePanel .ph-level strong {font-size:24px!important;} #app #sidePanel .ph-level small {font-size:10px!important;} #app #sidePanel .ph-dex-number {display:inline-block!important;font-size:10px!important;margin:3px 6px 4px 0!important;} #app #sidePanel .ph-partner-actions {display:flex!important;align-items:center!important;gap:6px!important;margin:0!important;padding:0!important;min-height:44px!important;} #app #sidePanel .ph-partner-actions .ph-button {min-height:44px!important;flex:1!important;padding:6px 10px!important;font-size:12px!important;border-radius:12px!important;} #app #sidePanel .ph-partner-actions .ph-lead-state {display:flex!important;align-items:center!important;gap:6px!important;font-size:12px!important;color:var(--ui-accent)!important;} #app #sidePanel .ph-hub .ph-train {display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-width:44px!important;width:44px!important;height:44px!important;min-height:44px!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;margin:0!important;background:var(--ui-tint)!important;color:var(--ui-accent)!important;box-shadow:none!important;} #app #sidePanel .ph-train small {display:none!important;} #app #sidePanel .ph-train:hover:not(:disabled) {border-color:var(--ui-focus)!important;background:var(--ui-hover)!important;} #app #sidePanel .ph-train:disabled {background:var(--ui-soft)!important;color:var(--ui-muted)!important;} #app #sidePanel .ph-stat-row {min-height:46px!important;} @media (max-width:1000px) { #app .pt-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;} } @media (max-width:600px) { #app #sidePanel.is-team-panel {width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important;} #app #sidePanel.is-team-panel>#sidePanelContent {padding:14px 10px!important;max-height:calc(100dvh - 16px)!important;} #app .pt-head {gap:8px!important;padding-right:48px!important;flex-wrap:wrap!important;} #app .pt-head h1 {font-size:21px!important;gap:5px!important;} #app .pt-capacity {gap:5px!important;width:100%!important;justify-content:space-between!important;} #app .pt-capacity-slot .pt-ball {width:17px!important;height:17px!important;} #app .pt-capacity-balls {gap:1px!important;} #app .pt-capacity>b {font-size:17px!important;} #app .pt-help,#app .pt-note {font-size:12px!important;} #app .pt-grid {grid-template-columns:1fr!important;gap:10px!important;} #app .pt-open {display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px 12px!important;} #app :is(.pt-identity,.pt-combat,.pt-moves) {grid-column:1/-1!important;} #app .pt-identity {gap:12px!important;} #app .pt-meter>span {font-size:11px!important;flex-wrap:wrap!important;gap:3px!important;} #app .pt-meter b {font-size:11px!important;} #app .pt-portrait {width:64px!important;height:64px!important;} #app .pt-name>b {font-size:17px!important;} #app .pt-member>header {padding-top:6px!important;min-height:32px!important;} #app #sidePanel .ph-identity-heading h1 {font-size:24px!important;} } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { #app #sidePanel.is-team-panel {max-height:calc(100dvh - 90px)!important;} #app #sidePanel.is-team-panel>#sidePanelContent {max-height:calc(100dvh - 94px)!important;} } #app:has(#sidePanel.is-open:is(.is-team-panel,.is-pokemon-detail-panel)) #testerLauncher {visibility:hidden!important;pointer-events:none!important;} /* Small desktop windows may scroll; clipping an actionable field is never allowed. */ @media (min-width:901px) and (max-height:780px) { #app #sidePanel.is-pokemon-detail-panel>#sidePanelContent {overflow:auto!important;} } } /* pk-style-source:115 */ /* /hud-minimap-v2490.css */ /* 2.49.0 — stable laptop close control and a useful compact minimap card. */ @media (min-width: 901px) { /* Keep the close action inside the Pokémon card at every desktop density. */ #app #sidePanel#sidePanel#sidePanel.is-pokemon-detail-panel > .panel-close { position: absolute !important; inset: 10px 10px auto auto !important; z-index: 30 !important; width: 42px !important; height: 42px !important; margin: 0 !important; transform: none !important; } #app #sidePanel#sidePanel#sidePanel.is-pokemon-detail-panel > #sidePanelContent { position: relative; } } @media (min-width: 761px) { .game-screen[data-adaptive-hud="v2470"] .world-minimap-collapse-v2470 svg { /* Expanded map: up means “collapse”. */ transform: rotate(180deg); } .game-screen[data-adaptive-hud="v2470"][data-minimap-collapsed="true"] { --world-hud-current-height: 86px; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed { height: 86px !important; grid-template-rows: 48px 38px !important; overflow: visible !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-topbar { min-height: 48px !important; padding: 5px 10px 5px 7px !important; border-radius: var(--world-hud-radius) var(--world-hud-radius) 0 0 !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-map-surface { display: none !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-bottombar { display: flex !important; min-height: 38px !important; height: 38px !important; border-radius: 0 0 var(--world-hud-radius) var(--world-hud-radius) !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-place > small { display: block !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-collapse-v2470 svg { /* Collapsed map: down means “expand”. */ transform: rotate(0deg); } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-channel-menu:not([hidden]) { display: block !important; top: calc(100% + 7px) !important; } } @media (min-width: 901px) and (max-height: 900px) { #app #sidePanel#sidePanel#sidePanel.is-pokemon-detail-panel > .panel-close { inset: 8px 8px auto auto !important; width: 40px !important; height: 40px !important; } } @media (prefers-reduced-motion: reduce) { .world-minimap-collapse-v2470 svg { transition: none !important; } } /* pk-style-source:116 */ /* /chat-trainers-v2482.css */ @layer chat-trainers { /* Compact chat and consistent trainer identity. All overrides stay in game UI. */ html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision="v2482"] { --chat75-ink: #203f50 !important; --chat75-copy: #3e5c6d !important; --chat75-muted: #617b89 !important; --chat75-line: #e2eaf0 !important; --chat75-card: #fff !important; --chat75-soft: #f4f8fa !important; --chat75-hover: #eaf3f8 !important; --chat-dock-height: 60px; container-type: inline-size; container-name: trainer-chat; grid-template-rows: 54px minmax(0, 1fr) !important; border-radius: 20px !important; background: rgba(255,255,255,var(--chat-opacity,.98)) !important; box-shadow: 0 12px 42px #183c4e26 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-head { display: flex !important; min-height: 54px !important; height: 54px !important; gap: 10px !important; padding: 6px 32px 6px 14px !important; background: transparent !important; overflow: visible !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-title-copy { flex: 0 0 auto; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-title-copy b { font-size: 14px !important; gap: 5px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-title-icon { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs { display: flex !important; flex: 1 1 auto !important; align-items: center !important; min-width: 0 !important; height: 40px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; gap: 2px !important; border: 0 !important; background: transparent !important; overflow-x: auto !important; scrollbar-width: none; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs > button { display: flex !important; flex: 1 0 auto; align-items: center; justify-content: center; gap: 3px !important; min-width: 0 !important; min-height: 36px !important; padding: 7px 9px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: var(--chat75-copy) !important; box-shadow: none !important; font-size: 12px !important; font-weight: 700 !important; white-space: nowrap; cursor: pointer; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs > button[hidden] { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-tabs .chat-tab-icon { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-tabs > button.is-active { background: var(--ui-paper,#e6f3fa) !important; color: var(--ui-accent,#0976ae) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-tabs > button:hover { background: var(--chat75-hover) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions { gap: 1px !important; flex: 0 0 auto; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > button, html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatForm .chat-emoji-trigger { display: grid !important; place-items: center; width: 30px !important; height: 36px !important; min-width: 0 !important; padding: 6px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: var(--chat75-copy) !important; box-shadow: none !important; transform: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > button:hover, html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatForm .chat-emoji-trigger:hover { background: var(--chat75-hover) !important; color: var(--ui-accent,#067caf) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions svg { width: 19px !important; height: 19px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-resize { top: 14px !important; right: 6px !important; bottom: auto !important; width: 24px !important; height: 26px !important; padding: 3px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: var(--ui-muted,#668291) !important; box-shadow: none !important; opacity: .8 !important; cursor: nesw-resize !important; z-index: 14 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-resize::before, html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-resize::after { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-resize svg { width: 18px; height: 18px; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-messenger-layout { grid-row: 2 !important; grid-template-columns: minmax(0,1fr) 202px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar { background: var(--ui-paper,#f5f8fa) !important; border-left: 1px solid var(--chat75-line) !important; padding: 10px 8px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar > header { min-height: 35px !important; padding: 2px 8px 10px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar > header b { font-size: 12px !important; color: var(--chat75-ink) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar header small { font-size: 12px !important; color: #248052 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-player { display: grid !important; align-items: center !important; text-align: left !important; width: 100% !important; grid-template-columns: 38px minmax(0,1fr) 5px !important; gap: 8px !important; padding: 10px 5px !important; opacity: 1 !important; border-radius: 10px !important; background: transparent !important; border: 0 !important; min-height: 72px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-player:hover { background: var(--ui-paper,#e8f1f5) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-copy b { color: var(--chat75-ink) !important; font-size: 13px !important; line-height: 1.3 !important; white-space: normal !important; overflow-wrap: anywhere; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-copy small { color: var(--ui-muted,#536f7e) !important; font-size: 11px !important; line-height: 1.4 !important; white-space: normal !important; overflow: visible !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-player em { color: #2baf71 !important; font-size: 8px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-log { padding: 6px 12px 14px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message:not(.is-notice) { grid-template-columns: 38px minmax(0,1fr) 24px !important; padding: 10px 2px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message-body > p { font-size: var(--chat-font-size,14px) !important; line-height: 1.55 !important; color: var(--chat75-copy) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-author-button { color: var(--chat75-ink) !important; font-size: 13px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-author-button:hover { color: var(--ui-accent,#087eb7) !important; text-decoration: underline; text-underline-offset: 3px; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message-meta time { color: var(--ui-muted,#647e8d) !important; font-size: 10px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message-more { width: 24px !important; color: var(--ui-muted,#597888) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatForm { min-height: 60px !important; gap: 8px !important; padding: 8px 12px !important; grid-template-columns: 32px minmax(0,1fr) 40px !important; align-items: center !important; background: var(--chat75-card) !important; border-top: 1px solid var(--chat75-line) !important; box-shadow: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatInput { color: var(--chat75-ink) !important; font-size: 14px !important; line-height: 1.45 !important; min-height: 40px !important; padding: 10px 4px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatInput::placeholder { color: var(--ui-muted,#698493) !important; opacity: 1; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatForm .chat-send-button { width: 40px !important; height: 40px !important; padding: 10px !important; border-radius: 12px !important; box-shadow: none !important; background: #168cd0 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-reply-preview { grid-template-columns: minmax(0,1fr) 30px !important; align-items: center; min-height: 62px !important; padding: 10px 12px !important; gap: 12px !important; border: 0 !important; border-left: 3px solid #168cd0 !important; background: var(--ui-paper,#edf6fb) !important; color: var(--ui-ink,#284e64) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-reply-preview:not([hidden]) { display: grid !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-reply-preview[hidden] { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-reply-preview > span { display: grid !important; grid-template-columns: auto 1fr !important; gap: 2px 8px !important; min-width: 0; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-reply-preview small { font-size: 11px !important; color: var(--ui-accent,#1676a5) !important; text-transform: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatReplyAuthor { font-size: 12px !important; color: var(--ui-ink,#24485d) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatReplyText { grid-column: 1 / -1; font-size: 12px !important; line-height: 1.4 !important; color: var(--ui-muted,#426376) !important; font-style: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-reply-preview button { display: grid; place-items: center; width: 30px !important; height: 30px !important; padding: 6px !important; color: var(--ui-muted,#426376) !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-reply-preview button svg { width: 18px; height: 18px; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message-reply-ref { padding: 8px 10px !important; border-left: 3px solid var(--ui-line,#78bbdc) !important; background: var(--ui-paper,#eff6fa) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message-reply-ref { display: grid !important; gap: 4px !important; text-align: left !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message-reply-ref :is(b,span) { font-size: 12px !important; color: var(--ui-muted,#426376) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-empty-state { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 12px !important; padding: 32px 22px !important; color: var(--chat75-copy) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-empty-state > span { display: grid; place-items: center; width: 72px !important; height: 72px !important; border-radius: 24px; background: var(--ui-paper,#e9f4fa); color: var(--ui-muted,#3c94bd); } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-empty-illustration { width: 36px; height: 36px; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-empty-state strong { font-size: 17px; color: var(--chat75-ink); } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-empty-state > .chat-empty-art { position: relative; display: flex !important; width: 170px !important; height: 94px !important; background: transparent !important; gap: 0; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-empty-art img { width: 90px !important; height: 90px !important; object-fit: contain; filter: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-empty-art img + img { margin-left: -10px; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-empty-art > i { display: grid; place-items: center; position: absolute; top: -8px; left: 70px; width: 32px; height: 32px; border-radius: 12px; background: var(--ui-paper,#e9f4fa); color: var(--ui-accent,#3288b1); box-shadow: 0 3px 8px #215a7c15; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-empty-art > i svg { width: 19px !important; height: 19px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-empty-state b { max-width: 310px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.6 !important; color: var(--chat75-copy) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-empty-state { height: 100% !important; min-height: 240px !important; text-align: center !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-empty-state b { text-align: center !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatPopover { max-height: calc(100% - 68px) !important; width: min(292px,calc(100% - 16px)) !important; overflow-y: auto !important; padding: 10px !important; background: var(--chat75-card) !important; border: 1px solid var(--chat75-line) !important; border-radius: 16px !important; box-shadow: 0 8px 30px #213d5030 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-popover-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 1px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-popover-actions button { min-height: 38px !important; padding: 8px 9px !important; display: flex !important; align-items: center; gap: 10px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 8px !important; color: var(--chat75-ink) !important; text-align: left; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-popover-actions button:hover { background: var(--chat75-hover) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-popover-actions button b { font-size: 12px !important; line-height: 1.35 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-popover-actions button small { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-popover-actions button.is-danger { color: #b34451 !important; } .trainer-action-icon { width: 22px; height: 22px; flex: 0 0 auto; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-player-location { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-player-popover-head { display: grid !important; grid-template-columns: 44px minmax(0,1fr) !important; align-items: center; gap: 10px; padding: 6px 6px 12px !important; border-bottom: 1px solid var(--chat75-line); } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-player-popover-head > span:last-child { display: grid; gap: 3px; min-width: 0; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-player-popover-head .chat-player-avatar { display: block; width: 44px !important; height: 44px !important; background-repeat: no-repeat; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-player-popover-head b { font-size: 14px !important; color: var(--chat75-ink) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-player-popover-head small { font-size: 11px !important; color: var(--chat75-copy) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-config { top: 54px !important; max-height: calc(100% - 64px) !important; overflow: auto !important; } .chat-staff-link { padding: 12px; color: var(--ui-accent,#117cae); border-radius: 8px; background: var(--ui-paper,#eaf4fa); text-decoration: none; font-weight: 700; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] button:focus-visible { outline: 2px solid #2898cd !important; outline-offset: -2px; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-search { position: absolute !important; inset: 6px 38px 6px 12px !important; width: auto !important; z-index: 15; background: var(--chat75-card) !important; border: 1px solid var(--ui-line,#a5c9db) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-minimized { grid-template-rows: 48px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-minimized .chat-head { height: 48px !important; min-height: 48px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-minimized :is(.chat-tabs,.chat-resize,.chat-head-actions) { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-minimized .chat-title-copy { display: grid !important; flex: 1; } @container trainer-chat (max-width: 650px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-messenger-layout { grid-template-columns: minmax(0,1fr) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-people-open .chat-online-sidebar { display: flex !important; flex-direction: column; position: absolute; right: 6px; top: 6px; bottom: 66px; width: 218px; z-index: 11; border: 1px solid var(--chat75-line); border-radius: 14px; box-shadow: 0 8px 25px #1d405629; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-title-copy { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-head { gap: 3px !important; padding-left: 7px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs > button { padding-inline: 7px !important; font-size: 11px !important; } } @container trainer-chat (min-width: 651px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > button[data-chat-people-toggle] { display: none !important; } } @container trainer-chat (max-width: 440px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > button { width: 27px !important; padding: 4px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs > button { padding-inline: 7px !important; } } @media (max-width: 760px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-head { padding-right: 6px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-resize { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatInput { font-size: 16px !important; } } /* Transparent, uncropped portraits share one calm surface in HUD, menus and chat. */ html .game-screen .trainer-avatar { background-color: var(--ui-paper,#eaf4f8) !important; background-size: 94% auto !important; background-position: center !important; border: 1px solid var(--ui-line,#d2e4ed) !important; box-shadow: none !important; filter: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .trainer-avatar { border-radius: 13px !important; } html .game-screen #playerActionWheel { width: 316px !important; height: 310px !important; } html .game-screen #playerActionWheel .player-action-wheel__center { width: 112px !important; height: 112px !important; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important; border: 1px solid var(--ui-line,#d7e7ee) !important; background: var(--ui-card,#f8fcff) !important; box-shadow: 0 6px 24px #203d5020 !important; } html .game-screen #playerActionWheel .player-action-wheel__avatar { width: 44px !important; height: 44px !important; background: transparent !important; } html .game-screen #playerActionWheel .player-wheel-trainer { width: 44px !important; height: 44px !important; } html .game-screen #playerActionWheel .player-action-wheel__center b { font-size: 12px !important; color: var(--ui-ink,#254a60) !important; } html .game-screen #playerActionWheel .player-action-wheel__center small { font-size: 9px !important; color: var(--ui-muted,#5c7989) !important; } html .game-screen #playerActionWheel .player-action-wheel__center { padding: 6px !important; cursor: pointer; font-family: inherit; } html .game-screen #playerActionWheel .player-action-wheel__center:focus-visible { outline: 2px solid #2697c8; outline-offset: 2px; } html .game-screen #playerActionWheel .player-action-wheel__center small { font-size: 10px !important; white-space: normal !important; line-height: 1.25 !important; max-width: 96px !important; } html .game-screen #playerActionWheel .player-action-wheel__item { width: 72px !important; height: 72px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--ui-line,#dae8ef) !important; border-radius: 22px !important; background: var(--ui-card,#f8fcff) !important; box-shadow: 0 4px 16px #21435d1c !important; color: var(--ui-ink,#27607c) !important; } html .game-screen #playerActionWheel .player-action-wheel__item:hover { background: var(--ui-paper,#e8f5fc) !important; transform: translateY(-2px) !important; } html .game-screen #playerActionWheel .player-action-wheel__item > span:last-child { font-size: 10px !important; } html .game-screen #playerActionWheel .player-action-wheel__item svg { width: 26px; height: 26px; } html .game-screen #playerActionWheel .is-profile { left: 122px !important; top: 14px !important; } html .game-screen #playerActionWheel .is-battle { left: 232px !important; top: 74px !important; color: #b75b58 !important; } html .game-screen #playerActionWheel .is-trade { left: 232px !important; top: 173px !important; } html .game-screen #playerActionWheel .is-party { left: 122px !important; top: 226px !important; } html .game-screen #playerActionWheel .is-friend { left: 12px !important; top: 173px !important; } html .game-screen #playerActionWheel .is-wave { left: 12px !important; top: 74px !important; } html[data-game-theme="dark"] .game-screen:not([data-world-hud="v2340"]) #chatPanel.chat-panel.chat-messenger[data-chat-revision] { --chat75-ink:#e1edf3 !important; --chat75-copy:#c1d3dc !important; --chat75-muted:#a2bac7 !important; --chat75-line:#355162 !important; --chat75-card:#183444 !important; --chat75-soft:#244455 !important; --chat75-hover:#2a4e61 !important; background: #183444 !important; } html[data-game-theme="dark"] .game-screen:not([data-world-hud="v2340"]) #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-online-sidebar,.chat-reply-preview,.chat-message-reply-ref) { background:#244455 !important; } html[data-game-theme="dark"] .game-screen:not([data-world-hud="v2340"]) #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-online-copy small,#chatReplyAuthor,#chatReplyText,.chat-reply-preview small,.chat-message-reply-ref b,.chat-message-reply-ref span) { color:var(--ui-muted,#c1d3dc) !important; } html .game-screen .trainer-avatar { background-image: url('/assets/chat-trainers-v2482/trainer-boy.webp') !important; } html .game-screen .trainer-avatar:is([data-avatar-key="trainer-02"],[data-avatar-key="trainer-04"],[data-avatar-key="trainer-05"],[data-avatar-key="trainer-07"],[data-avatar-key="trainer-10"],[data-avatar-key="trainer-12"]) { background-image: url('/assets/chat-trainers-v2482/trainer-girl.webp') !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-extra-actions { margin-top: 6px; border-top: 1px solid var(--chat75-line); } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-extra-actions summary { cursor: pointer; padding: 12px 9px; font-size: 12px; color: var(--chat75-copy); display: flex; justify-content: space-between; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatPopover { position: absolute !important; z-index: 40 !important; right: auto !important; scrollbar-width: thin; scrollbar-color: #b2cad5 transparent; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatPopover:not([hidden]) { display: block !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatPopover[hidden] { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-role-badge { display:inline-flex; align-items:center; gap:3px; border-radius:5px; padding:2px 5px; background:var(--ui-paper,#edf0fa); color:var(--ui-muted,#6464a3); font-size:10px; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-role-badge svg { width:12px; height:12px; } } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-copy { display: grid !important; gap: 2px !important; min-width: 0 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar > header > span { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar > header small { display: flex !important; gap: 5px !important; align-items: center !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-list { display: grid !important; align-content: start !important; overflow-y: auto !important; min-height: 0 !important; } /* v2.49.2: one header, compact channels, readable conversations and full-screen mobile. */ @layer chat-trainers { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-title-copy { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-head { padding: 7px 25px 7px 10px !important; gap: 8px !important; position: relative !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs { gap: 3px !important; overflow: visible !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs > button { gap: 6px !important; padding: 7px 8px !important; font-size: 12px !important; flex: 1 1 auto !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-tabs .chat-tab-icon { display: inline-flex !important; width: 17px !important; height: 17px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-tab-icon svg { width: 17px !important; height: 17px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-tabs > button.is-active { background: var(--ui-paper,#e4f3fb) !important; color: var(--ui-accent,#0677ac) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions { display: flex !important; align-items: center !important; gap: 2px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > button { width: 32px !important; height: 36px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatChannelPicker { display: none !important; align-items: center !important; gap: 8px !important; border: 0 !important; box-shadow: none !important; background: var(--ui-paper,#e7f3fa) !important; color: var(--ui-accent,#176588) !important; border-radius: 11px !important; padding: 8px 10px !important; min-height: 40px !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatChannelPicker svg { width: 19px !important; height: 19px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatChannelPicker svg:last-child { width: 14px !important; height: 14px !important; margin-left: auto !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-resize { top: 3px !important; right: 2px !important; width: 22px !important; height: 22px !important; border-radius: 0 15px 0 5px !important; opacity: .65 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-resize svg { width: 16px !important; height: 16px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-resize:hover { background: var(--ui-paper,#e4f3fb) !important; opacity: 1 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-chat-expanded [data-chat-expand] { color: var(--ui-accent,#087eac) !important; background: var(--ui-paper,#e7f3fa) !important; transform: rotate(180deg) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-search { inset: 7px 25px 7px 10px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 6px 0 12px !important; display: flex !important; align-items: center !important; gap: 8px !important; border-radius: 11px !important; transform: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-search[hidden] { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-search > span { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; display: grid !important; place-items: center !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-search input { height: 36px !important; min-height: 0 !important; width: 100% !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 14px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-search button { width: 32px !important; height: 32px !important; padding: 7px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; flex: 0 0 32px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-launcher { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-minimized { width: 204px !important; height: 54px !important; min-width: 0 !important; min-height: 0 !important; max-height: 54px !important; grid-template-rows: 54px !important; border-radius: 17px !important; overflow: hidden !important; background: var(--ui-card,#fff) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-minimized > :not(.chat-launcher) { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-minimized > .chat-launcher { width: 100% !important; height: 54px !important; display: flex !important; gap: 10px !important; align-items: center !important; padding: 8px 14px !important; border: 0 !important; box-shadow: none !important; background: var(--ui-card,#fff) !important; color: var(--ui-ink,#24485b) !important; text-align: left !important; cursor: pointer !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-launcher > svg { width: 23px !important; height: 23px !important; flex: 0 0 23px !important; color: var(--ui-accent,#198aba) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-launcher > svg:last-child { width: 16px !important; height: 16px !important; flex-basis: 16px !important; margin-left: auto !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-launcher > span { display: grid !important; gap: 1px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-launcher b { font-size: 14px !important; line-height: 18px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-launcher small { font-size: 11px !important; line-height: 14px !important; color: var(--ui-muted,#5e7c8d) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatLauncherBadge { display: grid !important; place-items: center !important; min-width: 21px !important; height: 21px !important; border-radius: 12px !important; background: #158fc5 !important; color: #fff !important; font-size: 11px !important; font-style: normal !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatLauncherBadge[hidden] { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-list { display: grid !important; align-content: start !important; gap: 2px !important; overflow-y: auto !important; padding: 6px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-player { display: grid !important; grid-template-columns: 36px minmax(0,1fr) 22px !important; align-items: center !important; min-height: 54px !important; height: auto !important; padding: 7px !important; gap: 9px !important; text-align: left !important; border: 0 !important; border-radius: 11px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-player .chat-player-avatar { width: 36px !important; height: 36px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-copy { display: block !important; min-width: 0 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-copy b { display: block !important; font-size: 13px !important; line-height: 20px !important; white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-role { display: grid !important; place-items: center !important; width: 22px !important; height: 25px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-role img { width: 22px !important; height: 25px !important; object-fit: contain !important; filter: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar > header { min-height: 45px !important; padding: 10px 14px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar > header b { font-size: 13px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar > header small { font-size: 12px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-player-facts { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 9px !important; padding: 13px 7px !important; border-bottom: 1px solid var(--ui-line,#e2eaf0) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-player-facts span { display: flex !important; align-items: center !important; gap: 7px !important; color: var(--ui-muted,#4c6a7d) !important; font-size: 12px !important; line-height: 1.4 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-player-facts span:last-child { grid-column: 1 / -1 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-player-facts svg { width: 17px !important; height: 17px !important; color: var(--ui-muted,#6a8e9e) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-popover-actions button b { font-size: 13px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message p mark.chat-mention { padding: 1px 3px !important; background: var(--ui-paper,#e6f3fc) !important; border-radius: 4px !important; color: var(--ui-accent,#096e9f) !important; font-weight: 650 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message p mark.chat-mention.is-self { background: var(--ui-soft,#cceafa) !important; color: var(--ui-ink,#07557c) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message.is-mentioned { border-left: 3px solid #59aed6 !important; background: var(--ui-paper,#f2faff) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-directory-section { padding: 4px 0 12px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-directory-section > header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 8px 10px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-directory-section > header b { font-size: 12px !important; line-height: 18px !important; letter-spacing: .02em !important; color: var(--ui-muted,#5f7a89) !important; text-transform: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-directory-section > header small { font-size: 12px !important; color: var(--ui-muted,#5f7a89) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-directory-list, html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-recent-dialogs { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 4px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-directory-player,.chat-recent-dialogs > article) { display: flex !important; align-items: center !important; gap: 4px !important; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: var(--ui-paper,#f5f9fc) !important; min-width: 0 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-directory-main,.chat-recent-dialogs > article > button:first-child) { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 10px !important; min-height: 72px !important; min-width: 0 !important; flex: 1 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 12px !important; text-align: left !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-directory-main,.chat-recent-dialogs > article > button:first-child):hover { background: var(--ui-paper,#eaf3f8) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-directory-main,.chat-recent-dialogs > article > button:first-child) > .chat-player-avatar { width: 42px !important; height: 42px !important; flex: 0 0 42px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-directory-main,.chat-recent-dialogs > article > button:first-child) > span:last-of-type { display: grid !important; gap: 5px !important; min-width: 0 !important; flex: 1 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-directory-main,.chat-recent-dialogs) b { font-size: 14px !important; line-height: 19px !important; font-weight: 750 !important; color: var(--ui-ink,#24485b) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-directory-main,.chat-recent-dialogs) small { font-size: 12px !important; line-height: 18px !important; color: var(--ui-muted,#607c8b) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-directory-player > div { padding-right: 8px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-dialog-pin,.chat-directory-player > div > button) { display: grid !important; place-items: center !important; width: 36px !important; min-width: 36px !important; height: 36px !important; padding: 7px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ui-muted,#61849a) !important; border-radius: 9px !important; margin-right: 5px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-dialog-pin[aria-pressed="true"] { background: var(--ui-soft,#e0f0fa) !important; color: var(--ui-accent,#087bb2) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-directory-player > div svg, html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-dialog-pin svg { width: 20px !important; height: 20px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-recent-dialogs em { display: grid !important; place-items: center !important; min-width: 22px !important; height: 22px !important; border-radius: 12px !important; background: #148fc8 !important; color: #fff !important; font-size: 11px !important; font-style: normal !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head { display: grid !important; grid-template-columns: 30px 38px minmax(0,1fr) 30px 30px !important; min-height: 64px !important; padding: 8px 12px !important; gap: 8px !important; background: var(--ui-paper,#f5f9fc) !important; border-bottom: 1px solid var(--ui-line,#e2eaf0) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head[hidden] { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head button { display: grid !important; place-items: center !important; width: 30px !important; min-width: 0 !important; height: 36px !important; padding: 6px !important; border: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--ui-muted,#486a7d) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head button svg { width: 20px !important; height: 20px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatPrivateAvatar { width: 38px !important; height: 38px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatPrivateName { font-size: 14px !important; line-height: 20px !important; color: var(--ui-ink,#24485b) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatPrivateStatus { font-size: 11px !important; line-height: 16px !important; color: var(--ui-muted,#5b7f8e) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-emoji-panel { top: auto !important; left: 8px !important; right: 8px !important; bottom: calc(var(--chat-dock-height,60px) + 5px) !important; width: auto !important; height: min(330px,calc(100% - 130px)) !important; max-height: calc(100% - 125px) !important; display: grid !important; grid-template-rows: 49px 45px minmax(0,1fr) !important; border: 1px solid var(--ui-line,#dce7ed) !important; border-radius: 15px !important; background: var(--ui-card,#fff) !important; box-shadow: 0 5px 20px #25465b25 !important; overflow: hidden !important; backdrop-filter: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-emoji-panel[hidden] { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-media-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; height: 49px !important; min-height: 0 !important; padding: 7px 10px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-media-head b { font-size: 12px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-media-head small { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-emoji-category-rail { display: grid !important; grid-template-columns: 30px minmax(0,1fr) 30px !important; gap: 3px !important; align-items: center !important; height: 45px !important; min-height: 0 !important; padding: 3px 6px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] [data-chat-emoji-scroll] { position: static !important; display: grid !important; place-items: center !important; width: 30px !important; min-width: 0 !important; height: 34px !important; min-height: 0 !important; padding: 8px !important; margin: 0 !important; border: 0 !important; border-radius: 8px !important; background: var(--ui-paper,#f2f7fa) !important; box-shadow: none !important; transform: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatEmojiCategories { display: flex !important; gap: 4px !important; align-items: center !important; height: 39px !important; min-height: 0 !important; padding: 0 !important; overflow-x: auto !important; scroll-snap-type: x proximity !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatEmojiCategories > button { display: grid !important; place-items: center !important; flex: 0 0 38px !important; grid-template-columns: 1fr !important; width: 38px !important; min-width: 38px !important; height: 36px !important; min-height: 0 !important; padding: 5px !important; margin: 0 !important; border: 0 !important; border-radius: 9px !important; scroll-snap-align: start !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatEmojiCategories > button > b, html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatEmojiCategories > button > i { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatEmojiCategories > button > span { width: 26px !important; height: 26px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatEmojiCategories img { width: 26px !important; height: 26px !important; object-fit: contain !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatEmojiGrid { display: grid !important; grid-template-columns: repeat(8,minmax(0,1fr)) !important; align-content: start !important; gap: 3px !important; padding: 7px !important; min-height: 0 !important; overflow: auto !important; overscroll-behavior: contain !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatEmojiGrid > button { display: grid !important; place-items: center !important; width: auto !important; height: 40px !important; padding: 3px !important; font-size: 25px !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; background: transparent !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-log, html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-list { overscroll-behavior: contain !important; scrollbar-width: thin !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatForm { padding: 8px 12px !important; min-height: 64px !important; gap: 8px !important; background: var(--ui-card,#fff) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatForm[hidden] { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatForm .chat-emoji-trigger { width: 36px !important; height: 40px !important; flex: 0 0 36px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatInput { max-height: 92px !important; line-height: 22px !important; padding: 8px 4px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-send-button { width: 42px !important; height: 42px !important; min-width: 42px !important; border-radius: 13px !important; } @container trainer-chat (max-width: 650px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatChannelPicker { display: flex !important; min-width: 138px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions { margin-left: auto !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-channel-menu-open .chat-head .chat-tabs { display: grid !important; grid-template-columns: 1fr !important; position: absolute !important; top: 50px !important; left: 8px !important; width: 215px !important; height: auto !important; padding: 6px !important; gap: 3px !important; border: 1px solid var(--ui-line,#dce7ed) !important; border-radius: 13px !important; background: var(--ui-card,#fff) !important; box-shadow: 0 8px 24px #21495a26 !important; z-index: 35 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-channel-menu-open .chat-head .chat-tabs > button { width: 100% !important; display: flex !important; flex: none !important; justify-content: flex-start !important; gap: 12px !important; min-height: 42px !important; padding: 8px 12px !important; font-size: 14px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-tabs .chat-tab-icon, html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-tab-icon svg { width: 19px !important; height: 19px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-people-open .chat-online-sidebar { top: 4px !important; bottom: 5px !important; right: 5px !important; width: min(270px,calc(100% - 10px)) !important; background: var(--ui-card,#f7fafc) !important; } } @container trainer-chat (max-width: 440px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > button { width: 32px !important; padding: 6px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatEmojiGrid { grid-template-columns: repeat(7,minmax(0,1fr)) !important; } } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { html .game-screen.is-chat-fullscreen { isolation: isolate !important; } html .game-screen.is-chat-fullscreen > :not(#chatPanel):not(#testerLauncher):not(.modal-overlay):not(dialog[open]):not(#toastContainer):not(#confirmModal) { visibility: hidden !important; pointer-events: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-open:not(.is-minimized) { position: fixed !important; left: var(--pk-mobile-vv-offset-left,0px) !important; top: var(--pk-mobile-vv-offset-top,0px) !important; right: auto !important; bottom: auto !important; width: var(--pk-mobile-vv-width,100vw) !important; max-width: none !important; min-width: 0 !important; height: var(--pk-mobile-vv-height,100dvh) !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; transform: none !important; border: 0 !important; border-radius: 0 !important; background: var(--ui-card,#fff) !important; box-shadow: none !important; backdrop-filter: none !important; grid-template-rows: calc(56px + env(safe-area-inset-top,0px)) minmax(0,1fr) !important; z-index: 200 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-head { height: calc(56px + env(safe-area-inset-top,0px)) !important; min-height: 56px !important; padding: calc(8px + env(safe-area-inset-top,0px)) 10px 8px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatChannelPicker { display: flex !important; min-width: 130px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > button { width: 36px !important; height: 40px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-resize,[data-chat-expand]) { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > button[data-chat-people-toggle] { display: grid !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-search { inset: calc(8px + env(safe-area-inset-top,0px)) 10px 8px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatForm { padding-bottom: max(8px,env(safe-area-inset-bottom,0px)) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatInput { font-size: 16px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatEmojiPanel { bottom: calc(var(--chat-dock-height,64px) + 2px) !important; left: 5px !important; right: 5px !important; max-height: calc(100% - 140px - env(safe-area-inset-top,0px)) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message { padding-block: 12px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-empty-state { min-height: 160px !important; } } @media (prefers-reduced-motion:reduce) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] *, html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] *::before, html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } } } #playerFollowStatus { position:absolute; bottom:90px; left:50%; transform:translateX(-50%); padding:10px 16px; border:1px solid var(--ui-line,#cce1eb); border-radius:24px; background:var(--ui-card,#fff); color:var(--ui-accent,#24607d); z-index:90; box-shadow:0 4px 15px #17394d25; font:600 13px/1.4 system-ui; cursor:pointer; } #playerFollowStatus[hidden] { display:none; } /* v2.49.5: compact identity, channel accents and a search field that leaves window actions usable. */ @layer chat-trainers { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-player { grid-template-columns: 42px minmax(0,1fr) !important; min-height: 62px !important; gap: 10px !important; padding: 9px 7px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-player:has(.chat-online-role) { grid-template-columns: 42px minmax(0,1fr) 26px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-player .chat-player-avatar { width: 42px !important; height: 42px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-copy b { font-size: 15px !important; line-height: 22px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-role, html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-role img { width: 26px !important; height: 28px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar > header { min-height: 52px !important; padding: 12px 14px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatOnlineLabel { font-size: 16px !important; line-height: 24px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar > header small { padding: 4px 9px !important; background: var(--ui-soft,#e4f5ec) !important; border-radius: 16px !important; gap: 7px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatOnlineCount { font-size: 14px !important; line-height: 20px !important; color: #23845b !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar > header small i { width: 7px !important; height: 7px !important; background: #38b77b !important; border-radius: 50% !important; animation: chat-online-pulse 2.8s ease-out infinite; } @keyframes chat-online-pulse { 0%,100% { box-shadow: 0 0 0 0 #38b77b00; } 45% { box-shadow: 0 0 0 4px #38b77b20; } } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-trainer-name { display: inline-flex !important; align-items: center !important; gap: 5px !important; min-width: 0 !important; max-width: 100% !important; vertical-align: middle !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-trainer-name > span:first-child { overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-trainer-name.is-premium { color: #91601d !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-premium-badge { display: inline-grid !important; place-items: center !important; flex: 0 0 20px !important; width: 20px !important; height: 20px !important; border-radius: 6px !important; background: #fff0d2 !important; color: #976318 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-premium-badge svg { width: 15px !important; height: 15px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is([data-chat-channel="global"],[data-channel="global"]) { --channel-ink: #167da4; --channel-wash: #e4f3fb; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is([data-chat-channel="location"],[data-channel="location"]) { --channel-ink: #2b8060; --channel-wash: #e7f5ed; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is([data-chat-channel="trade"],[data-channel="trade"]) { --channel-ink: #a15c19; --channel-wash: #fff0dd; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is([data-chat-channel="clan"],[data-channel="clan"]) { --channel-ink: #7952ad; --channel-wash: #f0eafa; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is([data-chat-channel="players"],[data-channel="players"]) { --channel-ink: #5369ae; --channel-wash: #edf0fc; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-tabs > button .chat-tab-icon { color: var(--channel-ink) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-tabs > button:is(.is-active,:hover), html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatChannelPicker { color: var(--channel-ink,#167da4) !important; background: var(--channel-wash,#e4f3fb) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-head { padding-right: 37px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-resize { top: 2px !important; right: 2px !important; width: 31px !important; height: 31px !important; opacity: 1 !important; color: var(--ui-muted,#3b7e9a) !important; background: var(--ui-paper,#eff7fb) !important; border-radius: 0 16px 0 10px !important; cursor: nesw-resize !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-resize svg { width: 22px !important; height: 22px !important; stroke-width: 2 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > button[data-chat-expand] { color: var(--ui-accent,#26789a) !important; background: var(--ui-paper,#f0f7fb) !important; border-radius: 9px !important; transform: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-chat-expanded [data-chat-expand] { transform: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] [data-chat-expand] svg { width: 22px !important; height: 22px !important; stroke-width: 2 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > button[aria-expanded="true"] { background: var(--ui-paper,#e6f2f9) !important; color: var(--ui-accent,#167da4) !important; border-radius: 9px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatHeadSearch { position: static !important; inset: auto !important; flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; z-index: auto !important; box-shadow: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions { flex: 0 0 auto !important; } html .game-screen:is(.is-chat-fullscreen,:not(.is-chat-fullscreen)) #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-searching :is(#chatChannelTabs,#chatChannelPicker,.chat-title-copy) { display: none !important; } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-head { padding-right: 10px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatSearchInput { font-size: 16px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-searching #chatHeadSearch { padding-left: 8px !important; gap: 4px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-searching #chatHeadSearch > span { display: none !important; } } } @layer chat-trainers { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-directory-empty {font-size:13px !important; line-height:1.6 !important;} } @layer chat-trainers { @media (max-width:760px), (pointer:coarse) and (max-height:560px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > button[data-chat-expand] {display:none !important;} } } @layer chat-trainers { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head > span:not(.trainer-avatar) { display:grid !important; gap:2px !important; min-width:0 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatPrivateName { overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head [aria-pressed="true"] { color:var(--ui-accent,#087dad) !important; background:var(--ui-paper,#e2f1fa) !important; border-radius:9px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head button { transform:none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatHeadSearch { max-width:none !important; width:auto !important; z-index:45 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-send-button[aria-busy="true"] { opacity:.65 !important; } } @layer chat-trainers { /* Fullscreen uses the channel menu in landscape too. */ html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-messenger-layout { grid-template-columns: minmax(0,1fr) !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar { display: none !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-people-open .chat-online-sidebar { display: flex !important; flex-direction: column; position: absolute; right: 6px; top: 6px; bottom: 66px; width: 218px; z-index: 11; border: 1px solid var(--chat75-line); border-radius: 14px; box-shadow: 0 8px 25px #1d405629; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-title-copy { display: none !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-head { gap: 3px !important; padding-left: 7px !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs > button { padding-inline: 7px !important; font-size: 11px !important; } } @layer chat-trainers { html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatChannelPicker { display: flex !important; min-width: 138px !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions { margin-left: auto !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs { display: none !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-channel-menu-open .chat-head .chat-tabs { display: grid !important; grid-template-columns: 1fr !important; position: absolute !important; top: 50px !important; left: 8px !important; width: 215px !important; height: auto !important; padding: 6px !important; gap: 3px !important; border: 1px solid var(--ui-line,#dce7ed) !important; border-radius: 13px !important; background: var(--ui-card,#fff) !important; box-shadow: 0 8px 24px #21495a26 !important; z-index: 35 !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-channel-menu-open .chat-head .chat-tabs > button { width: 100% !important; display: flex !important; flex: none !important; justify-content: flex-start !important; gap: 12px !important; min-height: 42px !important; padding: 8px 12px !important; font-size: 14px !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-tabs .chat-tab-icon, html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-tab-icon svg { width: 19px !important; height: 19px !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-people-open .chat-online-sidebar { top: 4px !important; bottom: 5px !important; right: 5px !important; width: min(270px,calc(100% - 10px)) !important; background: var(--ui-card,#f7fafc) !important; } } /* pk-style-source:117 */ /* /hud-minimap-v2492.css */ /* 2.49.2 — the collapsed minimap becomes one genuinely compact server row. */ @media (min-width: 761px) { .game-screen[data-adaptive-hud="v2470"][data-minimap-collapsed="true"] { --world-hud-current-height: 46px; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed { width: clamp(224px, 17vw, 252px) !important; height: 46px !important; min-height: 46px !important; display: grid !important; grid-template-columns: 34px minmax(0, 1fr) auto !important; grid-template-rows: 46px !important; align-items: center !important; padding: 0 6px !important; overflow: visible !important; border-radius: 15px !important; background: var(--minimap-bottom-bg, rgba(248, 251, 250, .96)) !important; box-shadow: 0 10px 28px rgba(10, 40, 51, .18) !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-topbar, .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-bottombar { display: contents !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-map-surface, .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-place, .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-server-meta { display: none !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-collapse-v2470 { grid-column: 1; grid-row: 1; width: 32px !important; height: 32px !important; margin: 0 !important; color: var(--minimap-bottom-text, #173f52) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-channel { grid-column: 2; grid-row: 1; min-width: 0 !important; width: 100% !important; height: 36px !important; padding: 0 5px 0 2px !important; gap: 6px !important; border: 0 !important; background: transparent !important; color: var(--minimap-bottom-text, #173f52) !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-channel-icon { width: 17px !important; height: 17px !important; flex: 0 0 17px !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-channel-copy { min-width: 0 !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-channel-copy small { display: none !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-channel-copy b { display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 12px !important; line-height: 1 !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-channel em { flex: 0 0 auto !important; margin-left: auto !important; padding: 4px 7px !important; border-radius: 999px !important; font-size: 10px !important; line-height: 1 !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-channel-chevron { display: none !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-ping { grid-column: 3; grid-row: 1; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; min-width: 58px !important; height: 36px !important; padding: 0 4px !important; gap: 4px !important; border: 0 !important; color: var(--minimap-bottom-text, #173f52) !important; background: transparent !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-ping b { font-size: 10px !important; line-height: 1 !important; white-space: nowrap !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-ping-bars { transform: scale(.82); transform-origin: center right; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-channel-menu:not([hidden]) { display: block !important; top: calc(100% + 7px) !important; right: 0 !important; left: auto !important; width: min(280px, calc(100vw - 24px)) !important; } } @media (min-width: 761px) and (max-width: 1100px) { .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed { width: 224px !important; } } @media (prefers-reduced-motion: reduce) { .world-minimap { transition: none !important; } } /* pk-style-source:118 */ /* /hud-minimap-v2493.css */ /* 2.49.3 — hide only the map image while preserving both information rows. */ @media (min-width: 761px) { .game-screen[data-adaptive-hud="v2470"] .world-minimap-collapse-v2470 svg { /* Expanded by default: down means the next action is collapse. */ transform: rotate(0deg) !important; } .game-screen[data-adaptive-hud="v2470"][data-minimap-collapsed="true"] { --world-hud-current-height: 86px; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed { width: var(--world-hud-width) !important; height: 86px !important; min-height: 86px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 48px 38px !important; align-items: stretch !important; padding: 0 !important; overflow: visible !important; border-radius: var(--world-hud-radius) !important; background: transparent !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-topbar { display: grid !important; grid-column: 1 !important; grid-row: 1 !important; grid-template-columns: 28px minmax(0, 1fr) auto !important; min-height: 48px !important; padding: 5px 10px 5px 7px !important; border-radius: var(--world-hud-radius) var(--world-hud-radius) 0 0 !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-map-surface { display: none !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-place { display: grid !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-place > small { display: none !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-server-meta { display: flex !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-bottombar { display: flex !important; grid-column: 1 !important; grid-row: 2 !important; min-height: 38px !important; height: 38px !important; border-radius: 0 0 var(--world-hud-radius) var(--world-hud-radius) !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-channel { display: flex !important; width: auto !important; min-width: 0 !important; height: 38px !important; flex: 1 1 auto !important; padding: 0 8px !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-channel-copy small { display: none !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-channel-chevron { display: inline !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-ping { display: inline-flex !important; width: auto !important; min-width: 72px !important; height: 38px !important; padding: 0 9px !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-collapse-v2470 { width: 28px !important; height: 28px !important; margin: 0 !important; color: currentColor !important; background: rgba(255, 255, 255, .08) !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-collapse-v2470 svg { /* Collapsed: up means the next action is expand. */ transform: rotate(180deg) !important; } .game-screen[data-adaptive-hud="v2470"] .world-minimap.is-collapsed .world-minimap-channel-menu:not([hidden]) { display: block !important; top: calc(100% + 7px) !important; right: 0 !important; left: auto !important; width: min(280px, calc(100vw - 24px)) !important; } } @media (prefers-reduced-motion: reduce) { .world-minimap { transition: none !important; } } /* pk-style-source:119 */ /* /hud-minimap-v2496.css */ /* 2.49.6 — containment-safe minimap collapse with compact location and live ping. */ /* .world-minimap owns a style containment boundary, so these rules intentionally start at the contained root instead of relying on an outside .game-screen ancestor. */ .world-minimap-ping { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; } .world-minimap-collapse-v2470 svg { transform: rotate(0deg) !important; } .game-screen[data-adaptive-hud="v2470"][data-minimap-collapsed="true"] { --world-hud-current-height: 86px; } @media (min-width: 761px) { .world-minimap.is-collapsed { width: var(--world-hud-width) !important; height: 86px !important; min-height: 86px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 48px 38px !important; align-items: stretch !important; padding: 0 !important; overflow: hidden !important; border-radius: var(--world-hud-radius) !important; } .world-minimap.is-collapsed .world-minimap-topbar { display: grid !important; grid-column: 1 !important; grid-row: 1 !important; grid-template-columns: 28px minmax(0, 1fr) auto !important; min-height: 48px !important; padding: 5px 10px 5px 7px !important; border-radius: var(--world-hud-radius) var(--world-hud-radius) 0 0 !important; } .world-minimap.is-collapsed .world-minimap-map-surface { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; opacity: 0 !important; pointer-events: none !important; } .world-minimap.is-collapsed .world-minimap-place { display: grid !important; } .world-minimap.is-collapsed .world-minimap-place > small { display: none !important; } .world-minimap.is-collapsed .world-minimap-server-meta { display: flex !important; } .world-minimap.is-collapsed .world-minimap-bottombar { display: flex !important; grid-column: 1 !important; grid-row: 2 !important; min-height: 38px !important; height: 38px !important; border-radius: 0 0 var(--world-hud-radius) var(--world-hud-radius) !important; } .world-minimap.is-collapsed .world-minimap-channel { display: flex !important; width: auto !important; min-width: 0 !important; height: 38px !important; flex: 1 1 auto !important; padding: 0 8px !important; } .world-minimap.is-collapsed .world-minimap-channel-copy small { display: none !important; } .world-minimap.is-collapsed .world-minimap-channel-chevron { display: inline !important; } .world-minimap.is-collapsed .world-minimap-ping { display: inline-flex !important; width: auto !important; min-width: 72px !important; height: 38px !important; padding: 0 9px !important; } .world-minimap.is-collapsed .world-minimap-collapse-v2470 svg { transform: rotate(180deg) !important; } } @media (prefers-reduced-motion: reduce) { .world-minimap, .world-minimap-collapse-v2470 svg { transition: none !important; } } /* pk-style-source:120 */ /* /hud-minimap-v2497.css */ /* Layer order keeps touch HUD overrides above desktop minimap fixes. */ @layer mobile-hud-v2496, desktop-minimap-v2498; @layer desktop-minimap-v2498 { /* 2.49.7 — high-specificity containment-safe minimap collapse with compact location and live ping. */ /* .world-minimap owns a style containment boundary, so these rules intentionally start at the contained root instead of relying on an outside .game-screen ancestor. */ #worldMinimapPing { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; } .worldMinimapCollapse.world-minimap-collapse-v2470 svg, #worldMinimapCollapse.world-minimap-collapse-v2470 svg { transform: rotate(0deg) !important; } .game-screen[data-adaptive-hud="v2470"][data-minimap-collapsed="true"] { --world-hud-current-height: 86px; } @media (min-width: 761px) { #worldMinimapShell.world-minimap.is-collapsed { width: var(--world-hud-width) !important; height: 86px !important; min-height: 86px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 48px 38px !important; align-items: stretch !important; padding: 0 !important; overflow: visible !important; border-radius: var(--world-hud-radius) !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-topbar { display: grid !important; grid-column: 1 !important; grid-row: 1 !important; grid-template-columns: 28px minmax(0, 1fr) auto !important; min-height: 48px !important; padding: 5px 10px 5px 7px !important; border-radius: var(--world-hud-radius) var(--world-hud-radius) 0 0 !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-map-surface { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; opacity: 0 !important; pointer-events: none !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-place { display: grid !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-place > small { display: none !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-server-meta { display: flex !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-bottombar { display: flex !important; grid-column: 1 !important; grid-row: 2 !important; min-height: 38px !important; height: 38px !important; border-radius: 0 0 var(--world-hud-radius) var(--world-hud-radius) !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-channel { display: flex !important; width: auto !important; min-width: 0 !important; height: 38px !important; flex: 1 1 auto !important; padding: 0 8px !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-channel-copy small { display: none !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-channel-chevron { display: inline !important; } #worldMinimapShell.world-minimap.is-collapsed #worldMinimapPing { display: inline-flex !important; width: auto !important; min-width: 72px !important; height: 38px !important; padding: 0 9px !important; } #worldMinimapShell.world-minimap.is-collapsed #worldMinimapCollapse.world-minimap-collapse-v2470 svg { transform: rotate(180deg) !important; } } @media (prefers-reduced-motion: reduce) { .world-minimap, .world-minimap-collapse-v2470 svg { transition: none !important; } } } /* pk-style-source:121 */ /* /mobile-hud-v2496.css */ /* Mobile world HUD. The battle HUD and desktop layout retain their own geometry. Important declarations in this layer override the legacy unlayered HUD patches. */ @layer mobile-hud-v2496 { .world-minimap-dayphase { display:none; } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { body:not(.is-battling) #gameScreen[data-world-hud="v2340"] { --mobile-hud-edge:10px; --mobile-map-width:112px; --mobile-profile-width:min(230px, calc(100% - 134px - env(safe-area-inset-right))); } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .world-topbar { inset:calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) auto calc(10px + env(safe-area-inset-left))!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .player-chip { width:var(--mobile-profile-width)!important; grid-template-columns:34px minmax(0,1fr)!important; height:76px!important; gap:7px!important; padding:9px!important; border-radius:15px!important; box-shadow:0 3px 12px #18394c16!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .player-chip-avatar { width:34px!important; height:34px!important; align-self:center!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .player-chip-copy { gap:5px!important; justify-content:center!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .player-chip-identity { gap:5px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldPlayerName { font-size:12px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldPlayerLevel { font-size:10px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .player-chip-progress { grid-template-columns:13px minmax(12px,1fr) auto!important; height:13px!important; gap:4px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .player-chip-progress>small, body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .player-chip-progress img { width:13px!important; height:13px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .player-chip-progress>em { font-size:9px!important; min-width:0!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] :is(#worldWallet,#playerStaminaHud) { display:none!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #sidePanel.is-inventory-panel .inventory-head-v54 { flex-wrap:wrap!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #sidePanel.is-inventory-panel .inventory-wallet-v49 { display:flex!important; flex-wrap:nowrap!important; gap:6px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #sidePanel.is-inventory-panel .inventory-wallet-v49>span { min-height:30px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #notificationCenterButton { top:84px!important; left:0!important; right:auto!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; border-radius:13px!important; background:#fffffff5!important; border:1px solid #d6e6ed!important; box-shadow:0 3px 12px #18394c16!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #notificationCenterButton>span { width:24px!important; height:24px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #notificationCenterButton img { width:24px!important; height:24px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #notificationCenter.is-open { top:calc(144px + env(safe-area-inset-top))!important; left:calc(10px + env(safe-area-inset-left))!important; right:auto!important; width:min(360px, calc(100% - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)))!important; max-height:calc(100dvh - 234px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important; border-radius:16px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #notificationCenter { background:#fff!important; color:#244c60!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #notificationCenter>header { padding:12px!important; gap:8px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #notificationCenter>header b { color:#244c60!important; font:700 15px/1.3 "Segoe UI",sans-serif!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #notificationCenter>header small { display:none!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #notificationCenter>header button { min-height:36px!important; font-size:11px!important; color:#456473!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .notification-card { display:grid!important; grid-template-columns:30px minmax(0,1fr)!important; gap:8px!important; padding:10px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .notification-card__icon { width:30px!important; height:30px!important; border-radius:9px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .notification-card b { font-size:13px!important; line-height:1.35!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .notification-card p { font-size:12px!important; line-height:1.45!important; color:#4b6977!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .notification-card time { font-size:10px!important; color:#637c87!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .notification-card>a { grid-column:2!important; justify-self:start!important; font-size:12px!important; min-height:36px!important; display:flex!important; align-items:center!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #questWidget { top:calc(94px + env(safe-area-inset-top))!important; left:calc(62px + env(safe-area-inset-left))!important; right:auto!important; width:min(178px, calc(100% - 206px - env(safe-area-inset-left) - env(safe-area-inset-right)))!important; min-width:0!important; min-height:44px!important; height:auto!important; padding:0!important; border:1px solid #d6e6ed!important; border-radius:13px!important; background:#fffffff5!important; box-shadow:0 3px 12px #18394c16!important; overflow:visible!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #questWidget:not(.is-collapsed) { left:calc(10px + env(safe-area-inset-left))!important; width:min(310px, calc(100% - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)))!important; top:calc(144px + env(safe-area-inset-top))!important; z-index:110!important; max-height:calc(100dvh - 240px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important; overflow:auto!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #questWidget .exp-goal-head { display:flex!important; gap:0!important; height:auto!important; min-height:44px!important; padding:0!important; margin:0!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #questWidget .exp-goal-toggle { display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:6px!important; flex:1!important; width:auto!important; min-width:0!important; height:auto!important; min-height:44px!important; padding:7px 9px!important; border:0!important; background:transparent!important; color:#315767!important; box-shadow:none!important; border-radius:12px!important; text-align:left!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .exp-goal-toggle>span { display:grid!important; gap:3px!important; flex:1!important; min-width:0!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .exp-goal-toggle b { font:650 12px/1.2 "Segoe UI",sans-serif!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .exp-goal-toggle small { overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; font:400 10px/1.3 "Segoe UI",sans-serif!important; color:#587481!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #questWidget svg { flex:0 0 18px!important; width:18px!important; height:18px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .exp-goal-toggle svg.exp-goal-chevron { flex-basis:12px!important; width:12px!important; height:12px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #questWidget .exp-goal-journal { width:44px!important; height:44px!important; min-height:44px!important; padding:12px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .exp-goal-body { padding:0 12px 12px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .exp-goal-next { display:block!important; font-size:12px!important; line-height:1.5!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .exp-goal-route { min-height:44px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldMinimapShell { top:calc(10px + env(safe-area-inset-top))!important; right:calc(10px + env(safe-area-inset-right))!important; left:auto!important; display:flex!important; flex-direction:column!important; gap:4px!important; width:112px!important; height:auto!important; min-height:0!important; padding:0!important; border:0!important; border-radius:14px!important; background:transparent!important; box-shadow:none!important; overflow:visible!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .world-minimap-topbar { position:relative!important; inset:auto!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:0!important; width:112px!important; height:34px!important; min-height:34px!important; padding:0 8px 0 0!important; border:1px solid #d6e6ed!important; border-radius:12px!important; background:#fffffff5!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldMinimapCollapse { width:34px!important; height:32px!important; min-height:32px!important; flex:0 0 34px!important; padding:7px!important; border:0!important; background:none!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldMinimapCollapse svg { transform:none!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldMinimapShell.is-collapsed #worldMinimapCollapse svg { transform:rotate(-90deg)!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .world-minimap-place { display:none!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .world-minimap-server-meta { gap:4px!important; font-size:11px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldMinimapWeatherIcon { width:20px!important; height:20px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldMinimapWeatherIcon { display:none!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .world-minimap-dayphase { display:flex!important; width:20px!important; height:20px!important; color:#aa7a24!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .world-minimap-dayphase[data-phase="night"] { color:#697da9!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .world-minimap-dayphase svg { width:20px!important; height:20px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .world-minimap-map-surface { width:108px!important; height:108px!important; min-height:0!important; margin:0 auto!important; flex:none!important; border:1px solid #ffffffa8!important; border-radius:50%!important; box-shadow:0 2px 7px #143d3f20!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldMinimapShell.is-collapsed .world-minimap-map-surface { display:none!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .world-minimap-bottombar { position:relative!important; inset:auto!important; display:flex!important; width:112px!important; height:34px!important; min-height:34px!important; padding:0 6px!important; border:1px solid #d6e6ed!important; border-radius:12px!important; background:#fffffff5!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldMinimapChannelButton { width:100%!important; height:32px!important; min-height:32px!important; gap:5px!important; padding:0!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .world-minimap-channel-copy b { font-size:12px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldMinimapChannelPopulation { font-size:10px!important; margin-left:auto!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldMinimapPing { display:none!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .world-minimap-channel-icon { display:none!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldMinimapChannelMenu { top:calc(100% + 6px)!important; right:0!important; width:min(284px, calc(100vw - 20px))!important; max-height:calc(100dvh - 300px)!important; overflow:auto!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] :is(.exp-goal-toggle,#notificationCenterButton,#worldMinimapCollapse,#worldMinimapChannelButton):focus-visible { outline:2px solid #278baa!important; outline-offset:2px!important; } } @media (max-height:560px) and (orientation:landscape) and (pointer:coarse), (max-height:560px) and (max-width:760px) and (orientation:landscape) { body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #sidePanel.is-inventory-panel .inventory-expedition { grid-template-rows:auto minmax(0,1fr)!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldMinimapShell { width:112px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] .world-minimap-map-surface { width:76px!important; height:76px!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #questWidget:not(.is-collapsed) { max-height:calc(100dvh - 224px)!important; } body:not(.is-battling) #gameScreen[data-world-hud="v2340"] #worldMinimapChannelMenu { max-height:calc(100dvh - 230px)!important; } } } @layer chat-trainers { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > button[data-chat-expand] { width:32px!important; height:36px!important; min-width:32px!important; color:#3e5c6d!important; background:transparent!important; border:0!important; box-shadow:none!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > button[data-chat-expand] svg { width:20px!important; height:20px!important; stroke-width:1.7!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > button[data-chat-expand]:hover { background:#edf5f8!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-resize { width:28px!important; height:28px!important; top:2px!important; right:2px!important; color:#78929e!important; opacity:.7!important; background:transparent!important; border-radius:8px!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-resize svg { width:17px!important; height:17px!important; stroke-width:1.5!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-resize:is(:hover,:focus-visible) { opacity:1!important; color:#496a7b!important; background:#edf5f8!important; } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message-meta { flex-wrap:wrap!important; gap:4px 7px!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message-meta>.chat-author-button { max-width:100%!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message-meta>:is(time,.chat-role-badge,.chat-channel-chip) { flex:0 0 auto!important; white-space:nowrap!important; } } } @layer chat-trainers { #gameScreen.is-chat-fullscreen #controlsTutorial { display:none!important; } } /* pk-style-source:122 */ /* /hud-minimap-v2499.css */ /* 2.49.9 — compact minimap override loaded after every adaptive HUD stylesheet. */ @media (prefers-reduced-motion: reduce) { #worldMinimapShell.world-minimap, #worldMinimapCollapse svg { transition: none !important; } } /* pk-style-source:123 */ /* /hud-minimap-v24910.css */ /* 2.49.10 — compact minimap override with readable live ping. */ #worldMinimapPing { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; color: #17445d !important; background: rgba(222, 241, 247, 0.72) !important; border-left: 1px solid rgba(86, 137, 158, 0.22) !important; font-weight: 800 !important; } #worldMinimapShell.world-minimap.is-collapsed { width: var(--world-hud-width) !important; height: 86px !important; min-height: 86px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 48px 38px !important; align-items: stretch !important; padding: 0 !important; overflow: hidden !important; border-radius: var(--world-hud-radius) !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-topbar { display: grid !important; grid-column: 1 !important; grid-row: 1 !important; grid-template-columns: 28px minmax(0, 1fr) auto !important; min-height: 48px !important; padding: 5px 10px 5px 7px !important; border-radius: var(--world-hud-radius) var(--world-hud-radius) 0 0 !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-map-surface { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; opacity: 0 !important; pointer-events: none !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-place { display: grid !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-place > small { display: none !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-server-meta { display: flex !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-bottombar { display: flex !important; grid-column: 1 !important; grid-row: 2 !important; min-height: 38px !important; height: 38px !important; border-radius: 0 0 var(--world-hud-radius) var(--world-hud-radius) !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-channel { display: flex !important; width: auto !important; min-width: 0 !important; height: 38px !important; flex: 1 1 auto !important; padding: 0 8px !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-channel-copy small { display: none !important; } #worldMinimapShell.world-minimap.is-collapsed .world-minimap-channel-chevron { display: inline !important; } #worldMinimapShell.world-minimap.is-collapsed #worldMinimapPing { display: inline-flex !important; width: auto !important; min-width: 72px !important; height: 38px !important; padding: 0 9px !important; } #worldMinimapShell.world-minimap.is-collapsed #worldMinimapCollapse svg { transform: rotate(180deg) !important; } @media (prefers-reduced-motion: reduce) { #worldMinimapShell.world-minimap, #worldMinimapCollapse svg { transition: none !important; } } /* pk-style-source:124 */ /* /world-loading.css */ .game-entry-pending #app>:not(#loadingScreen){visibility:hidden!important}[data-world-loading-blocked],[data-world-loading-blocked] *{visibility:hidden!important;pointer-events:none!important} #app #loadingScreen{--story-progress:0%;position:fixed;inset:0;z-index:99999;display:block;overflow:hidden;isolation:isolate;background:#101a2b;color:#fff9ee;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility .18s;font-family:'Segoe UI',Arial,sans-serif;color-scheme:dark;text-align:center} #app #loadingScreen.is-open{opacity:1;visibility:visible;pointer-events:auto}#app #loadingScreen [hidden]{display:none!important}#app #loadingScreen::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 54%,#08141d88,transparent 62%);pointer-events:none}#app #loadingScreen::after{display:none} #app #loadingScreen .loading-scenes{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}#app #loadingScreen .loading-scene{position:absolute;inset:0;display:block;opacity:0;background-size:cover;background-position:var(--scene-position,50% 50%);background-repeat:no-repeat;transition:opacity .18s;filter:none;transform:none}#app #loadingScreen .loading-scene.is-visible{opacity:1}#app #loadingScreen:not(.has-story-art) .loading-scene:first-child{background-image:var(--early-loading-art,none);opacity:1} #app #loadingScreen .loading-scene::before{display:none}#app #loadingScreen .loading-scene.has-drawn-sketch::before{content:'';position:absolute;inset:0;display:block;background-image:var(--scene-sketch);background-size:cover;background-position:inherit;mask-image:linear-gradient(90deg,transparent calc(var(--story-progress) - 2%),#000 calc(var(--story-progress) + 2%));filter:none;transition:mask-position .18s,opacity .18s}#app #loadingScreen.is-ready .loading-scene::before,#app #loadingScreen.is-art-complete .loading-scene::before{opacity:0} #app #loadingScreen .loading-card{display:block;position:absolute;left:50%;top:calc(50% - 3px);right:auto;bottom:auto;transform:translateX(-50%);width:min(680px,86vw);max-width:none;min-height:0;gap:0;margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0;backdrop-filter:none;animation:none;text-align:center} #app #loadingScreen .loading-progress{display:block;position:relative;width:min(400px,100%);height:6px;margin:0 auto;border:1px solid #ffffff6b;border-radius:4px;overflow:hidden;background:#07151d85;box-shadow:0 1px 9px #0009;box-sizing:border-box} #app #loadingScreen .loading-progress::before,#app #loadingScreen .loading-progress::after,#app #loadingScreen:not(.has-recovery) .loading-scenes::after{display:none} #app #loadingScreen #loadingProgressBar{display:block;position:absolute;inset:0;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#b8e8de,#fff2cc);border-radius:3px;transition:transform .18s linear;box-shadow:none} #app #loadingScreen .loading-advice{display:block;margin:22px 0 0;padding:0;border:0;background:none;box-shadow:none;text-align:center;text-shadow:0 2px 7px #000,0 0 14px #00101c} #app #loadingScreen #loadingTipTitle{display:block;font-size:12px;color:#f7dfac;font-weight:600;line-height:1.4}#app #loadingScreen #loadingTip{margin:10px auto 0;max-width:650px;font-size:16px;line-height:1.5;font-weight:500;color:#fffaf1} #app #loadingScreen .loading-a11y{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;margin:0!important;padding:0!important;border:0!important} #app #loadingScreen .loading-failure-label,#app #loadingScreen #loadingFailureReason{display:none}#app #loadingScreen .loading-slow{font-size:11px;line-height:1.5;color:#eee3c6;margin:15px auto 0;text-shadow:0 2px 7px #000} #app #loadingScreen.has-recovery .loading-scenes::after{content:'';display:block;position:absolute;inset:0;background:#11172c url('/assets/loading/story-r2/porygon-error.png') center/cover no-repeat} #app #loadingScreen.has-recovery .loading-progress,#app #loadingScreen.has-recovery .loading-advice,#app #loadingScreen.has-recovery #loadingSlow{display:none} /* Error surface R3: keep the illustration, one explanation and four clear actions. */ #app #loadingScreen.has-recovery .loading-card,#app #loadingScreen.has-recovery #loadingRecovery button,#app #loadingScreen.has-recovery #loadingRecovery a{box-sizing:border-box} #app #loadingScreen.has-recovery .loading-card{left:55%;top:50%;right:auto;bottom:auto;width:min(480px,39vw);max-width:none;min-height:0;max-height:calc(100svh - 40px);transform:translateY(-50%);display:block;padding:8px!important;margin:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;filter:none!important;text-align:left;overflow:auto} #app #loadingScreen.has-recovery::before{background:linear-gradient(90deg,transparent 32%,#070f2866 53%,#070f28de 76%,#070f28ed)} #app #loadingScreen.has-recovery .loading-a11y#loadingTitle{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;white-space:normal!important;font:600 clamp(28px,2.5vw,36px)/1.16 'Segoe UI',Arial,sans-serif;letter-spacing:-.8px;color:#f7f8ff;text-shadow:none;margin:0 0 16px!important} #app #loadingScreen.has-recovery #loadingSubtitle{position:absolute!important;width:1px!important;height:1px!important;clip:rect(0,0,0,0)!important;overflow:hidden!important;white-space:nowrap!important;margin:0!important;padding:0!important} #app #loadingScreen.has-recovery #loadingFailureReason{display:block;margin:0!important;padding:0;font:400 15px/1.65 'Segoe UI',Arial,sans-serif;color:#cbd4e6;text-shadow:0 1px 8px #050c2244;max-width:450px} #app #loadingScreen.has-recovery #loadingRecovery{display:block;margin:25px 0 0;padding:0;border:0;background:none!important;box-shadow:none!important} #app #loadingScreen.has-recovery #loadingRecovery .loading-actions{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px;align-items:stretch;margin:0;padding:0;border:0} #app #loadingScreen.has-recovery #loadingRecovery .loading-actions button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:48px;margin:0;padding:11px 15px;border-radius:12px;font:600 13px/1.3 'Segoe UI',Arial,sans-serif;letter-spacing:0;text-decoration:none;box-shadow:none;transition:background .15s,border-color .15s,transform .15s} #app #loadingScreen.has-recovery #retryWorldConnection{color:#30283c;background:#ffda8a;border:1px solid #ffe2a5} #app #loadingScreen.has-recovery #retryWorldConnection:hover{background:#ffe5ab;border-color:#ffedc8;transform:translateY(-1px)} #app #loadingScreen.has-recovery #retryWorldConnection:disabled{opacity:.55;transform:none;cursor:wait} #app #loadingScreen.has-recovery #cancelWorldConnection{color:#e1e6f4;background:#ffffff08;border:1px solid #d0d9ff33} #app #loadingScreen.has-recovery #cancelWorldConnection:hover{background:#ffffff13;border-color:#d0d9ff66} #app #loadingScreen.has-recovery #retryWorldConnection::before,#app #loadingScreen.has-recovery #cancelWorldConnection::before{content:'';display:block;width:16px;height:16px;flex:none;background:currentColor;mask:var(--action-icon) center/contain no-repeat} #app #loadingScreen.has-recovery #retryWorldConnection{--action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7v5h-5M4 17v-5h5'/%3E%3Cpath d='M6.1 6.1A8 8 0 0 1 19.7 11M17.9 17.9A8 8 0 0 1 4.3 13'/%3E%3C/svg%3E")} #app #loadingScreen.has-recovery #cancelWorldConnection{--action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7M5 9v11h5v-6h4v6h5V9'/%3E%3C/svg%3E")} #app #loadingScreen.has-recovery .loading-communities{margin:27px 0 0;padding:20px 0 0;border:0;border-top:1px solid #c2cfee20;background:none!important;box-shadow:none!important} #app #loadingScreen.has-recovery .loading-communities>p{margin:0 0 11px;padding:0;color:#9faecb;font:400 12px/1.4 'Segoe UI',Arial,sans-serif} #app #loadingScreen.has-recovery #loadingRecovery .loading-communities nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0} #app #loadingScreen.has-recovery #loadingRecovery a.loading-community{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:46px;width:auto;min-width:0;margin:0;padding:10px 13px;border:1px solid #c2cfee25;border-radius:11px;color:#dee7fa;background:#ffffff06;box-shadow:none;font:500 13px/1.3 'Segoe UI',Arial,sans-serif;text-decoration:none;transition:background .15s,border-color .15s} #app #loadingScreen.has-recovery #loadingRecovery a.loading-community:hover{background:#4a9bea18;border-color:#69abf15c} #app #loadingScreen.has-recovery #loadingRecovery a.loading-community>svg{display:block;width:21px;height:21px;flex:none;color:#76b9ff} #app #loadingScreen.has-recovery #loadingRecovery a.loading-community-tg>svg{color:#71c9f4} #app #loadingScreen.has-recovery #loadingRecovery a.loading-community>svg.community-arrow{width:14px;height:14px;margin-left:auto;color:#98abc9} #app #loadingScreen.has-recovery #loadingRecovery a.loading-community:focus-visible,#app #loadingScreen.has-recovery #loadingRecovery button:focus-visible{outline:2px solid #fff;outline-offset:3px} @media(orientation:portrait){#app #loadingScreen.has-recovery .loading-card{left:6%;top:auto;bottom:max(5%,calc(env(safe-area-inset-bottom) + 12px));width:88%;transform:none;max-height:calc(100svh - 32px)}#app #loadingScreen.has-recovery .loading-a11y#loadingTitle{font-size:28px;margin-bottom:13px!important}#app #loadingScreen.has-recovery #loadingFailureReason{font-size:14px;line-height:1.6}#app #loadingScreen.has-recovery #loadingRecovery{margin-top:21px}#app #loadingScreen.has-recovery .loading-communities{margin-top:23px;padding-top:17px}} @media(max-width:380px){#app #loadingScreen.has-recovery #loadingRecovery .loading-actions button{font-size:12px;padding:10px 8px;gap:6px}#app #loadingScreen.has-recovery #loadingRecovery a.loading-community{font-size:12px;padding:10px;gap:8px}} @media(max-height:580px) and (orientation:landscape){#app #loadingScreen.has-recovery .loading-card{left:52%;width:45%;max-height:calc(100svh - 24px)}#app #loadingScreen.has-recovery .loading-a11y#loadingTitle{font-size:26px;margin-bottom:12px!important}#app #loadingScreen.has-recovery #loadingFailureReason{font-size:13px}#app #loadingScreen.has-recovery #loadingRecovery{margin-top:18px}#app #loadingScreen.has-recovery .loading-communities{margin-top:18px;padding-top:15px}} #app #loadingScreen.has-recovery .loading-card::before,#app #loadingScreen.has-recovery .loading-card::after{display:none!important;content:none!important} @media(max-width:720px){#app #loadingScreen .loading-scene{background-position:var(--scene-mobile-position,50% 50%)}#app #loadingScreen .loading-progress{width:min(320px,76vw)}#app #loadingScreen #loadingTip{font-size:14px;line-height:1.5}#app #loadingScreen #loadingTipTitle{font-size:11px}} @media(orientation:portrait){#app #loadingScreen.has-recovery .loading-scenes::after{background-position:13% 35%}#app #loadingScreen.has-recovery::before{background:linear-gradient(transparent 24%,#070f2888 50%,#070f28f2)}} @media(prefers-reduced-motion:reduce){#app #loadingScreen,#app #loadingScreen *,#app #loadingScreen *::before{animation:none!important;transition:none!important}} /* One labelled, accessible meter; sketch and paint share the same immutable art pair. */ #app #loadingScreen:not(.has-recovery) .loading-card{top:calc(50% - 5px)} #app #loadingScreen .loading-meter{position:relative;width:min(420px,100%);margin:0 auto} #app #loadingScreen .loading-meter-header{position:absolute;left:0;right:0;bottom:calc(100% + 13px);display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fff8e8;text-shadow:0 1px 8px #05121ecc} #app #loadingScreen .loading-meter-title{display:flex;align-items:center;gap:9px;font:600 14px/1.3 'Segoe UI',Arial,sans-serif} #app #loadingScreen .loading-meter-title svg{display:block;width:19px;height:19px;flex:none;color:#f8dfac} #app #loadingScreen .loading-meter #loadingPercent{display:block;position:static;width:auto;height:auto;clip:auto;margin:0;padding:0;font:600 13px/1.3 'Segoe UI',Arial,sans-serif;font-variant-numeric:tabular-nums;color:#f4ead4;letter-spacing:0} #app #loadingScreen .loading-meter .loading-progress{width:100%;height:10px;border:1px solid #ffffff69;border-radius:6px;background:#07131f9c;box-shadow:0 2px 12px #03101b80;overflow:hidden} #app #loadingScreen .loading-meter #loadingProgressBar{border-radius:5px;background:linear-gradient(90deg,#9bded2,#f9dc96);box-shadow:0 0 10px #d4edcf44;transition:transform .35s ease-out} #app #loadingScreen .loading-tip-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;color:#f1dfb8;font:400 11px/1.5 'Segoe UI',Arial,sans-serif} #app #loadingScreen .loading-tip-meta svg{display:block;width:15px;height:15px;flex:none} #app #loadingScreen .loading-tip-meta i{font-style:normal;color:#c3cbbf} #app #loadingScreen .loading-tip-meta #loadingTipTitle{display:inline;margin:0;font:600 11px/1.5 'Segoe UI',Arial,sans-serif;color:#f3e5c7} #app #loadingScreen #loadingTip{margin-top:10px;font-size:15px;line-height:1.6} #app #loadingScreen.has-recovery .loading-meter{display:none} #app #loadingScreen .loading-scene.has-drawn-sketch::before{display:none!important} #app #loadingScreen .loading-scene.has-drawn-sketch::after{content:'';display:block;position:absolute;inset:0;background-image:var(--scene-color);background-size:cover;background-position:inherit;opacity:1;mask-image:radial-gradient(ellipse farthest-corner at 18% 22%,#000 calc(var(--loading-paint-a,0%) - 2%),transparent var(--loading-paint-a,0%)),radial-gradient(ellipse farthest-corner at 73% 31%,#000 calc(var(--loading-paint-b,0%) - 2%),transparent var(--loading-paint-b,0%)),radial-gradient(ellipse farthest-corner at 42% 74%,#000 calc(var(--loading-paint-c,0%) - 2%),transparent var(--loading-paint-c,0%)),radial-gradient(ellipse farthest-corner at 86% 79%,#000 calc(var(--loading-paint-d,0%) - 2%),transparent var(--loading-paint-d,0%)),radial-gradient(ellipse farthest-corner at 47% 29%,#000 calc(var(--loading-paint-e,0%) - 2%),transparent var(--loading-paint-e,0%)),radial-gradient(ellipse farthest-corner at 12% 78%,#000 calc(var(--loading-paint-f,0%) - 2%),transparent var(--loading-paint-f,0%)),radial-gradient(ellipse farthest-corner at 83% 12%,#000 calc(var(--loading-paint-g,0%) - 2%),transparent var(--loading-paint-g,0%)),radial-gradient(ellipse farthest-corner at 64% 58%,#000 calc(var(--loading-paint-h,0%) - 2%),transparent var(--loading-paint-h,0%));mask-composite:add;transition:--loading-paint-a .5s ease-out,--loading-paint-b .5s ease-out,--loading-paint-c .5s ease-out,--loading-paint-d .5s ease-out,--loading-paint-e .5s ease-out,--loading-paint-f .5s ease-out,--loading-paint-g .5s ease-out,--loading-paint-h .5s ease-out} #app #loadingScreen.is-ready .loading-scene.has-drawn-sketch::after,#app #loadingScreen.is-art-complete .loading-scene.has-drawn-sketch::after{mask-image:none;transition:none} @media(max-width:720px){#app #loadingScreen .loading-meter{width:min(340px,84vw)}#app #loadingScreen .loading-meter-title{font-size:13px}#app #loadingScreen #loadingTip{font-size:14px}#app #loadingScreen .loading-tip-meta{font-size:10px}} @media(prefers-reduced-motion:reduce){#app #loadingScreen .loading-scene.has-drawn-sketch::after,#app #loadingScreen .loading-meter #loadingProgressBar{transition:none!important}} /* pk-style-source:125 */ /* /pokeclub-v2530.css */ .club-radio{position:absolute;left:22px;top:160px;z-index:30;display:flex;width:260px;max-width:calc(100% - 32px);padding:6px;border:1px solid #c4b6ed;border-radius:18px;color:#f3eefe;background:linear-gradient(125deg,#241d49f5,#433365f0);box-shadow:0 5px 20px #17103b35;font:13px/1.35 system-ui} .club-radio[hidden],.club-track[hidden],.club-empty[hidden]{display:none!important} .club-radio button{border:0;background:transparent;color:inherit;cursor:pointer} .club-radio-open{display:flex;align-items:center;gap:10px;min-width:0;flex:1;padding:7px;text-align:left} .club-radio svg{width:26px;height:26px;flex:none;color:#8ce8ff}.club-radio-open span{min-width:0}.club-radio small{display:block;font-size:8px;letter-spacing:1px;color:#c9beeb}.club-radio strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;max-width:180px;margin-top:4px}.club-radio .club-sound{width:38px;border-radius:12px;background:#ffffff16;font-size:21px} .club-music-dialog{box-sizing:border-box;position:fixed;inset:0;margin:auto;width:min(840px,calc(100vw - 32px));max-width:840px;height:auto;max-height:min(840px,calc(100dvh - 36px));overflow:auto;border:1px solid #c9bbee;border-radius:26px;padding:24px;background:#fdfbff;color:#292047;box-shadow:0 24px 90px #110a3f88;font:14px/1.45 system-ui;z-index:15000} .club-music-dialog::backdrop{background:#101126a6;backdrop-filter:blur(4px)} .club-music-dialog *{box-sizing:border-box}.club-music-dialog button,.club-music-dialog input{font:inherit}.club-music-dialog button{cursor:pointer}.club-music-dialog button:disabled{cursor:default;opacity:.5}.club-music-dialog button:focus-visible,.club-radio button:focus-visible{outline:3px solid #b490ff;outline-offset:2px}.club-music-dialog h2,.club-music-dialog h3,.club-music-dialog p{margin:0}.club-music-head{display:flex;gap:14px;align-items:center;margin-bottom:20px}.club-music-head small{font-size:10px;letter-spacing:1.6px;color:#75629d}.club-music-head h2{font-size:23px;line-height:1.2;margin-top:5px}.club-disc{width:50px;height:50px;border:6px solid #dad0ed;border-radius:50%;display:grid;place-items:center;background:#393055;color:#e8dfff}.club-disc svg{width:23px;height:23px}.club-music-head>button{margin-left:auto;flex:none;width:40px;height:40px;border:0;border-radius:13px;background:#ede8f7;color:#544272;font-size:26px} .club-now{position:relative;padding:22px 24px;border-radius:20px;overflow:hidden;color:white;background:radial-gradient(ellipse at 90% 5%,#276e96,transparent 65%),linear-gradient(125deg,#28234e,#5c357b)}.club-now>small{font-size:10px;letter-spacing:2px;color:#c9c3ea}.club-now h3{font-size:25px;line-height:1.2;margin:10px 0 6px;max-width:80%}.club-now p{font-size:13px;color:#dfd7f6}.club-now progress{display:block;width:100%;height:5px;margin-top:20px;border:0;accent-color:#79dff7}.club-now progress::-webkit-progress-bar{background:#ffffff20;border-radius:5px}.club-now progress::-webkit-progress-value{background:linear-gradient(90deg,#ba8ffc,#71e1ef);border-radius:5px}.club-timeline{display:flex;justify-content:space-between;font-size:11px;color:#d0c8e2;margin-top:5px}.club-now>button{margin-top:10px;padding:8px 14px;border:1px solid #ffffff40;border-radius:10px;background:#ffffff15;color:white;font-size:12px} .club-order-hint{padding:14px 2px;color:#736181;font-size:12px}.club-library{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px}.club-library h3{font-size:15px;margin:0 0 12px}.club-search span{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.club-search input{width:100%;padding:10px 13px;color:#302247;border:1px solid #dbd2e8;border-radius:12px;background:#fff;outline-color:#a589ce;margin-bottom:6px}.club-track{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #ece6f3}.club-track-number{font-size:11px;color:#a293b7;width:19px;flex:none}.club-track>div{min-width:0;flex:1}.club-track strong{display:block;line-height:1.35}.club-track small{display:block;color:#877794;font-size:11px;margin-top:4px}.club-track button{padding:8px 9px;border:1px solid #d7c9ec;border-radius:10px;background:#eee6fa;color:#684091;font-size:11px;font-weight:650;min-width:76px;flex:none}.club-queue{border-left:1px solid #e7deee;padding-left:20px}.club-queue h3 span{border-radius:6px;padding:1px 5px;background:#eae1f5;color:#8556ad;font-size:11px}.club-queue ol{padding-left:20px}.club-queue li{padding:5px 0;font-size:12px}.club-queue small{display:block;color:#92829f}.club-queue p{font-size:12px;color:#8c7b9c}.club-queue .club-fine{font-size:11px;border-top:1px solid #e7deee;margin-top:20px;padding-top:12px}.club-feedback{color:#65428d;font-size:12px;padding-top:12px;min-height:25px}.club-credits{font-size:10px;color:#95869e;margin-top:12px}.club-credits a{color:#74569e}.club-credits summary{cursor:pointer}.club-credits p{margin-top:8px}.is-chat-fullscreen .club-radio{display:none} @media(max-width:760px){.club-radio{top:120px;left:12px;width:190px;border-radius:14px;padding:3px}.club-radio strong{max-width:112px;font-size:10px}.club-radio small{font-size:6px;letter-spacing:.5px}.club-radio svg{width:20px;height:20px}.club-radio-open{gap:6px}.club-radio .club-sound{width:30px}.club-music-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:18px;border-radius:22px}.club-music-head{gap:10px}.club-disc{width:42px;height:42px;flex:none}.club-music-head h2{font-size:18px}.club-music-head small{font-size:8px}.club-now{padding:18px}.club-now h3{font-size:22px;max-width:100%}.club-library{grid-template-columns:1fr;gap:20px}.club-queue{border-left:0;border-top:1px solid #e7deee;padding:16px 0 0}.club-track button{min-height:40px}.club-search input{font-size:16px}} #gameScreen .club-music-dialog .club-search input{background:#fff;color:#302247;border:1px solid #dbd2e8} #gameScreen .club-music-dialog .club-search input{background:#fff!important;color:#302247!important;border:1px solid #dbd2e8!important} .club-music-head{position:sticky;top:0;z-index:2;background:#fdfbff;padding:8px 0} .club-volume{display:inline-flex;align-items:center;gap:10px;margin:10px 0 0 20px;color:#e0d8f3;font-size:11px}.club-volume input{width:110px;accent-color:#be9bf1} @media(max-width:440px){.club-volume{margin-left:10px}.club-volume input{width:88px}} @media(max-width:760px){.club-radio{top:calc(env(safe-area-inset-top, 0px) + 150px)}} /* pk-style-source:126 */ /* /pokeclub-v2540.css */ /* Club 2.54 — local art, compact music deck, bar and synchronized countdown. */ #gameScreen .club-radio{top:auto;bottom:96px;left:18px;width:254px;flex-wrap:wrap;border-color:#b49ad27a;background:linear-gradient(125deg,#241a3df2,#344d69f2);border-radius:18px} .club-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none} .club-radio .club-radio-open{gap:8px}.club-radio strong{max-width:162px}.club-radio .club-sound{width:34px;font-size:18px} .club-view{display:flex;width:100%;align-items:center;justify-content:center;gap:4px;border-top:1px solid #ffffff15;margin-top:3px;padding-top:3px} .club-view button{padding:3px 10px;min-height:28px;font-size:11px}.club-view button:first-child,.club-view button:last-child{font-size:18px;width:34px}.club-view button:hover{background:#ffffff18;border-radius:8px} #gameScreen .club-music-dialog{width:min(870px,calc(100vw - 24px));max-width:870px;max-height:calc(100dvh - 28px);padding:20px 24px;background:#fffaf6;border-color:#ded2ec;scrollbar-width:thin} #gameScreen .club-music-head{padding:0 0 14px;background:#fffaf6;margin:0;top:-20px}.club-dj-portrait{width:72px;height:72px;object-fit:cover;border-radius:22px;border:1px solid #d2bde9}.club-music-head h2{font-size:22px}.club-music-head small{font-size:9px}.club-wallet{display:flex;align-items:center;gap:6px;font-size:12px!important;margin-top:7px!important;color:#725087}.club-wallet img{width:20px;height:20px;object-fit:contain}.club-wallet span{margin-left:8px;color:#81718e;font-size:11px}.club-wallet b{color:#413050} #gameScreen .club-now{padding:17px 20px;border-radius:18px;background:radial-gradient(ellipse at 95% 0,#337b8e,transparent 65%),linear-gradient(130deg,#332044,#674e92)} #gameScreen .club-now h3{font-size:21px;margin:6px 0;max-width:100%;overflow-wrap:anywhere}.club-now progress{margin-top:12px}.club-now>button{margin-top:7px}.club-now .club-volume{margin-top:7px}.club-order-hint{padding:12px 0;font-size:11px}.club-library{grid-template-columns:minmax(0,1.75fr) minmax(190px,1fr);gap:18px}.club-library h3{font-size:14px;margin-bottom:8px}.club-track-list{max-height:264px;overflow:auto;scrollbar-width:thin;padding-right:5px}.club-track{gap:8px;padding:10px 0}.club-track button{font-size:10px;min-width:120px;min-height:36px}.club-track strong{font-size:12px}.club-track small{font-size:10px}.club-queue{padding-left:16px}.club-queue ol{max-height:190px;overflow:auto;scrollbar-width:thin}.club-queue .club-fine{line-height:1.5;margin-top:10px}.club-feedback{padding-top:8px;min-height:20px}.club-credits{margin-top:8px} .club-announcement{pointer-events:none;position:absolute;top:18%;left:50%;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:12px;width:max-content;max-width:min(560px,calc(100% - 32px));padding:14px 20px;border:1px solid #dec4fb80;border-radius:24px;color:#fff;background:linear-gradient(120deg,#221939f2,#354c65f2);box-shadow:0 12px 45px #09082055;font:13px/1.4 system-ui} .club-announcement[hidden]{display:none!important}.club-announcement>img{width:48px;height:48px;border-radius:50%;border:2px solid #c7a5f0}.club-announcement>div{min-width:0}.club-announcement small{display:block;font-size:8px;letter-spacing:1px;color:#cbb7ea}.club-announcement strong{display:block;margin:4px 0;overflow-wrap:anywhere;font-size:15px}.club-announcement span{font-size:11px;color:#c5d9e4}.club-count{width:56px;flex:none;text-align:center;font:800 44px/1 system-ui;color:#c2f6ff;text-shadow:0 0 16px #81c8ff80}.club-announcement.is-counting{animation:club-count-pulse 1s ease-in-out infinite}.club-announcement.is-counting .club-count{animation:club-number-pop 1s ease-out infinite}.club-announcement:not(.is-counting) .club-count{display:none} @keyframes club-count-pulse{0%,100%{box-shadow:0 8px 35px #09082055,0 0 0 0 #a088d733}50%{box-shadow:0 8px 45px #29204b66,0 0 0 12px #a088d700}} @keyframes club-number-pop{0%{transform:scale(1.15)}70%,100%{transform:scale(1)}} .club-bar-dialog{box-sizing:border-box;position:fixed;inset:0;margin:auto;width:min(780px,calc(100vw - 24px));max-height:calc(100dvh - 28px);overflow:auto;border:1px solid #bee0d5;border-radius:26px;padding:22px 24px;color:#243e42;background:#fffaf2;box-shadow:0 24px 80px #101c2c88;font:14px/1.45 system-ui;z-index:15000;scrollbar-width:thin} .club-bar-dialog::backdrop{background:#101126a6;backdrop-filter:blur(4px)}.club-bar-dialog *{box-sizing:border-box}.club-bar-dialog h2,.club-bar-dialog h3,.club-bar-dialog p{margin:0}.club-bar-dialog button{font:inherit;cursor:pointer}.club-bar-dialog button:disabled{opacity:.5;cursor:default}.club-bar-dialog button:focus-visible{outline:3px solid #49ab99;outline-offset:3px} .club-bar-dialog header{display:flex;align-items:center;gap:14px;margin-bottom:18px}.club-bar-dialog header>img{width:72px;height:72px;border-radius:22px;object-fit:cover;border:1px solid #aad6ca}.club-bar-dialog header small{font-size:9px;letter-spacing:1.6px;color:#408b7e}.club-bar-dialog header h2{font-size:23px;margin:4px 0}.club-bar-dialog header p{font-size:11px;color:#78958f}.club-bar-dialog header button{margin-left:auto;align-self:flex-start;width:36px;height:36px;background:#e5f1eb;border:0;border-radius:12px;color:#437e72;font-size:24px;flex:none} .club-bar-status{display:flex;align-items:center;gap:14px;border:1px solid #dbe9df;border-radius:14px;padding:12px 15px;background:#eff7f0;margin-bottom:18px;font-size:12px}.club-bar-status span{display:flex;align-items:center;gap:7px;white-space:nowrap}.club-bar-status img{width:26px;height:26px;object-fit:contain}.club-bar-status progress{min-width:30px;flex:1;height:7px;accent-color:#45ac94;border:0;border-radius:6px}.club-drinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.club-drinks article{border:1px solid #ebe0d2;border-radius:18px;padding:10px 12px 14px;background:#fffdf8;display:flex;flex-direction:column;align-items:stretch;text-align:center;overflow:hidden}.club-drink-art{width:100%;aspect-ratio:1;background-image:url('/assets/v2.54/club/cocktails.png');background-size:300% 100%;background-repeat:no-repeat;border-radius:12px}.drink-0{background-position:0 50%}.drink-1{background-position:50% 50%}.drink-2{background-position:100% 50%}.club-drinks h3{font-size:16px;margin:10px 0 5px}.club-drinks p{font-size:11px;line-height:1.5;color:#87938d;min-height:34px}.club-drinks strong{font-size:12px;color:#32947e;margin:11px 0}.club-drinks button{padding:11px 8px;border:1px solid #b6d8c8;background:#e4f4e9;color:#317660;border-radius:12px;font-size:11px;font-weight:700;min-height:42px}.club-bar-hint{font-size:11px;color:#87968c;margin-top:16px!important;text-align:center}.club-bar-feedback{min-height:20px;margin-top:8px!important;text-align:center;color:#448675;font-size:12px} .is-chat-fullscreen .club-announcement{display:none} @media(max-width:760px){#gameScreen .club-radio{bottom:100px;left:10px;top:auto;width:220px;padding:4px}.club-radio strong{max-width:131px;font-size:10px}.club-avatar{width:28px;height:28px}.club-view button{min-height:26px;font-size:10px}#gameScreen .club-music-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);padding:15px;border-radius:20px}#gameScreen .club-music-head{top:-15px;padding-bottom:12px}.club-dj-portrait{width:52px;height:52px;border-radius:16px}.club-music-head h2{font-size:18px}.club-music-head small{font-size:8px}.club-wallet{font-size:11px!important}.club-wallet span{font-size:9px;margin-left:3px}.club-music-head>button{width:34px;height:34px}.club-library{display:flex;flex-direction:column}.club-track-list{max-height:240px}.club-track button{min-width:115px;min-height:40px}.club-queue{border-left:0;border-top:1px solid #e7deee;padding:14px 0 0}.club-queue .club-fine{font-size:10px}#gameScreen .club-now{padding:14px}.club-now h3{font-size:19px!important}.club-order-hint{font-size:10px}.club-announcement{top:24%;padding:12px;gap:8px;border-radius:19px}.club-announcement>img{width:36px;height:36px}.club-announcement strong{font-size:12px}.club-announcement small{font-size:6px}.club-count{width:34px;font-size:36px}.club-bar-dialog{padding:16px;border-radius:22px}.club-bar-dialog header{gap:10px}.club-bar-dialog header>img{width:52px;height:52px;border-radius:16px}.club-bar-dialog header h2{font-size:20px}.club-bar-status{gap:8px;padding:10px;font-size:10px;flex-wrap:wrap}.club-bar-status progress{order:3;flex-basis:100%}.club-bar-status span:last-child{margin-left:auto}.club-drinks{grid-template-columns:1fr;gap:10px}.club-drinks article{display:grid;grid-template-columns:86px 1fr;column-gap:12px;text-align:left;padding:10px}.club-drink-art{grid-row:1/5;align-self:center}.club-drinks h3{font-size:15px;margin:3px 0}.club-drinks p{min-height:0;font-size:10px}.club-drinks strong{font-size:11px;margin:6px 0}.club-drinks button{font-size:11px}.club-bar-hint{line-height:1.5}} @media(prefers-reduced-motion:reduce){.club-announcement,.club-count{animation:none!important}} @media(min-width:761px) and (min-height:600px){ #gameScreen .club-music-dialog[open]{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;height:min(720px,calc(100dvh - 28px));overflow:hidden} #gameScreen .club-music-head{position:relative;top:auto} .club-music-dialog .club-library{min-height:0} .club-music-dialog .club-library>section{min-height:0;display:flex;flex-direction:column} .club-music-dialog .club-track-list{min-height:0;max-height:none;flex:1;overflow:auto} .club-music-dialog .club-queue{overflow:auto} .club-music-dialog .club-credits[open]{max-height:110px;overflow:auto} } @media(max-width:760px){.club-music-dialog .club-track-list{max-height:none;overflow:visible}} .club-bar-status progress::-webkit-progress-bar{background:#d5e7db;border-radius:8px} .club-bar-status progress::-webkit-progress-value{background:linear-gradient(90deg,#46a98f,#86d8b0);border-radius:8px} .club-bar-status progress::-moz-progress-bar{background:#46a98f;border-radius:8px} /* pk-style-source:127 */ /* /pokeclub-v2550.css */ /* LED countdown is a non-interactive overlay; gameplay input stays available. */ .club-count[hidden]{display:none!important} .club-count-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .club-announcement.is-counting{top:46%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:7px;width:min(410px,calc(100% - 32px));max-width:410px;padding:24px 28px 19px;background:radial-gradient(ellipse at 50% 42%,#393565ec,#12192bf5 75%);border:1px solid #aa9ef887;border-radius:32px;text-align:center;animation:none;box-shadow:0 18px 75px #05091977,inset 0 0 40px #6787fc12} .club-announcement.is-counting>img{display:none} .club-announcement.is-counting>div:first-of-type{order:2;width:100%} .club-announcement.is-counting small{font-size:9px;letter-spacing:2px;color:#b9c5ef} .club-announcement.is-counting strong{font-size:18px;line-height:1.3;margin:8px 0 4px} .club-announcement.is-counting span{color:#b3c8e3;font-size:11px} .club-announcement.is-counting .club-count{order:1;position:relative;display:grid;place-items:center;width:210px;height:236px;flex:none;color:#b9f9ff;animation:none;text-shadow:none;font:inherit} .club-count b{display:block;width:102px;height:164px;z-index:1;filter:drop-shadow(0 0 12px #78cfee66)} .club-count svg{display:block;width:100%;height:100%;overflow:visible;transform:skewX(-7deg)} .club-count .lit{fill:#d4fcff;stroke:#78dae9;stroke-width:1} .club-count .dim{fill:#7389b414;stroke:#a4b3e011;stroke-width:.7} .club-count i{position:absolute;inset:0 0 24px;border:1px solid #9aa7dc38;border-radius:50%;box-shadow:inset 0 0 30px #7299f411} .club-count i:before,.club-count i:after{content:"";position:absolute;inset:9px;border:3px solid transparent;border-top-color:#8de8f1a6;border-bottom-color:#aa97f7a6;border-radius:50%;transform:rotate(-25deg)} .club-count i:after{inset:20px;border-width:1px;border-top-color:#d1c4ff66;border-bottom-color:#79c7e666;transform:rotate(38deg)} .club-count em{position:absolute;bottom:0;font:700 9px/1.5 system-ui;letter-spacing:3px;color:#93d8e4;font-style:normal} .club-announcement.is-counting:before,.club-announcement.is-counting:after{content:"";position:absolute;top:43%;width:22px;height:42px;border-top:2px solid #9ee8f366;border-bottom:2px solid #baa3ff66;transform:skewY(-20deg)} .club-announcement.is-counting:before{left:18px}.club-announcement.is-counting:after{right:18px;transform:skewY(20deg)} @media(max-width:760px){ .club-announcement.is-counting{top:45%;width:min(294px,calc(100% - 30px));padding:18px 18px 16px;border-radius:26px;gap:5px} .club-announcement.is-counting .club-count{width:175px;height:198px} .club-count b{width:85px;height:138px}.club-count em{font-size:8px;letter-spacing:2px} .club-announcement.is-counting strong{font-size:15px}.club-announcement.is-counting small{font-size:7px;letter-spacing:1.5px} } @media(max-height:480px){.club-announcement.is-counting{top:46%;padding:12px 24px;gap:0}.club-announcement.is-counting .club-count{height:145px;width:145px}.club-count b{height:108px;width:68px}.club-count em{bottom:-2px}.club-announcement.is-counting strong{font-size:13px;margin:5px 0}.club-announcement.is-counting small{display:none}} @media(prefers-reduced-motion:reduce){.club-count,.club-count b,.club-count i{animation:none!important;transition:none!important}} /* pk-style-source:128 */ /* /pokeclub-v2570.css */ /* Pokeclub menu: inventory drinks and a compact genre-aware music deck. */ #gameScreen .club-bar-dialog{width:min(830px,calc(100vw - 24px));background:linear-gradient(155deg,#fbfffc,#f6f6fb);padding:20px 24px;border-color:#c9e5dc} .club-bar-dialog header{margin-bottom:14px}.club-bar-dialog header h2{color:#244b49}.club-bar-dialog header p{color:#638580} .club-bar-dialog .club-bar-status{display:flex;flex-wrap:nowrap;gap:20px;margin-bottom:0;padding:13px 16px;border-color:#d8e9e0;background:#fff} .club-energy{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:18px;min-width:0} .club-energy label{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:11px;color:#698781;min-width:0} .club-energy b{margin-left:auto;color:#28584c;font-size:11px}.club-energy progress{width:100%;flex-basis:100%;height:6px;margin:3px 0 0} .club-bar-dialog .club-bar-wallet{font-size:15px;color:#245748;flex:none;gap:6px} .club-bar-dialog .club-bar-hint{margin:10px 0 12px!important;font-size:11px;line-height:1.5;color:#608379} .club-bar-dialog .club-drinks{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .club-bar-dialog .club-drinks article{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:center;padding:10px 12px 12px;border:1px solid #dce9e0;border-radius:19px;background:radial-gradient(ellipse at 50% 18%,color-mix(in srgb,var(--drink-color) 18%,transparent),transparent 60%),#fff;box-shadow:0 3px 10px #304d4510} .club-bar-dialog .club-drink-art{width:126px;max-width:100%;height:126px;aspect-ratio:auto;align-self:center;background-image:none;background-size:300% 200%;background-repeat:no-repeat;border-radius:0;flex:none;margin:0 auto} .club-bar-dialog[open] .club-drink-art{background-image:url('/assets/v2.57/club/poke-cocktails-v2.png')} .club-drink-art.drink-0{background-position:0 0}.club-drink-art.drink-1{background-position:50% 0}.club-drink-art.drink-2{background-position:100% 0}.club-drink-art.drink-3{background-position:0 100%}.club-drink-art.drink-4{background-position:50% 100%}.club-drink-art.drink-5{background-position:100% 100%} .club-drink-power{font-size:9px;letter-spacing:.3px;color:#548572;font-weight:700;margin-top:1px} .club-bar-dialog .club-drinks h3{font-size:15px;margin:4px 0;color:#2d514d}.club-bar-dialog .club-drinks p{min-height:29px;font-size:10px;line-height:1.4;color:#6a8781;margin:0} .club-bar-dialog .club-drinks strong{font-size:10px;color:#31876c;margin:8px 0;line-height:1.35;min-height:14px} .club-bar-dialog .club-drinks button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:auto;padding:7px 10px;border-color:#c9e4d7;background:#ebf7ef;border-radius:11px;color:#286b51;min-height:40px;font-size:11px;transition:background .15s} .club-drinks button b{display:flex;align-items:center;gap:4px;white-space:nowrap}.club-drinks button img{width:21px;height:21px;object-fit:contain}.club-drinks button:not(:disabled):hover{background:#d7f1e2!important} .club-bar-dialog footer{font-size:10px;line-height:1.5;color:#82968e;text-align:center;margin-top:6px}.club-bar-feedback:empty{min-height:0;margin-top:0!important} #gameScreen .club-now{position:relative;overflow:hidden;min-height:190px;padding-right:145px;background:radial-gradient(ellipse at 100% 10%,#227d8b88,transparent 70%),linear-gradient(125deg,#261d43,#58447b)} .club-now [data-now-genre]{display:inline-block;margin-left:8px;color:#a8e6e5;letter-spacing:0;font-size:9px}.club-now h3{position:relative}.club-now .club-timeline{position:relative} .club-deck-art{position:absolute;right:18px;top:25px;width:110px;display:flex;align-items:center;flex-direction:column;gap:12px;pointer-events:none} .club-vinyl{width:94px;height:94px;border-radius:50%;position:relative;border:1px solid #d6c1fc40;background:repeating-radial-gradient(circle,#171a32 0px,#171a32 4px,#34304e 5px,#171a32 6px);box-shadow:0 8px 20px #0a122b55;animation:club-record 9s linear infinite;animation-play-state:paused} .club-vinyl::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 12deg,transparent 0 8%,#aeabce38 12%,transparent 22% 53%,#aeabce40 62%,transparent 72%)} .club-vinyl i{position:absolute;inset:30px;border-radius:50%;border:8px solid #bfa4e7;background:#fff3e0;box-shadow:0 0 0 1px #112534} .club-equalizer{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:24px}.club-equalizer i{height:100%;width:5px;border-radius:3px;background:linear-gradient(#dbb8ff,#70e6df);transform:scaleY(.25);transform-origin:bottom;animation:club-bars .84s ease-in-out infinite alternate;animation-play-state:paused} .club-equalizer i:nth-child(2n){animation-delay:-.32s;animation-duration:.64s}.club-equalizer i:nth-child(3n){animation-delay:-.56s;animation-duration:1.1s}.club-equalizer i:nth-child(4n){animation-delay:-.17s} .club-music-dialog[open].is-playing .club-vinyl,.club-music-dialog[open].is-playing .club-equalizer i{animation-play-state:running} .club-radio.is-playing .club-avatar{box-shadow:0 0 0 2px #75e5db88} .club-genres{display:flex;gap:5px;flex-wrap:wrap;margin:4px 0 8px;flex:none} .club-genres button{padding:6px 9px;border:1px solid #e3d9ed;background:#fff;color:#8b749b;border-radius:10px;font-size:10px;min-height:30px;font-weight:650;cursor:pointer} .club-genres button[aria-pressed=true]{background:#674487;border-color:#674487;color:#fff;box-shadow:0 3px 7px #67448720} .club-track[hidden],.club-track button b[hidden]{display:none!important} .club-track em{display:block;font-style:normal;font-size:9px;color:#a285b3;margin-top:4px} .club-track button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:116px!important;padding:8px!important} .club-track button b{display:inline-flex;align-items:center;gap:4px;font-size:12px}.club-track button img{width:21px;height:21px;object-fit:contain}.club-track-number{color:#aa90bf} .club-track button:not(:disabled):hover{background:#e1d2f3}.club-genres button:focus-visible,.club-track button:focus-visible{outline:3px solid #70b9cd;outline-offset:2px} .club-now .club-volume{margin-left:12px} @keyframes club-record{to{transform:rotate(360deg)}} @keyframes club-bars{0%{transform:scaleY(.23)}100%{transform:scaleY(.95)}} @media(min-width:761px) and (min-height:650px){ #gameScreen .club-bar-dialog{padding:16px 22px} .club-bar-dialog header{margin-bottom:10px}.club-bar-dialog header>img{width:52px;height:52px;border-radius:17px}.club-bar-dialog header h2{font-size:21px} .club-bar-dialog .club-drink-art{width:92px;height:92px}.club-bar-dialog .club-drinks article{padding:8px 12px 10px}.club-bar-dialog .club-drinks strong{margin:4px 0} .club-bar-dialog .club-drinks h3{margin:3px 0}.club-bar-dialog .club-drinks p{min-height:0}.club-bar-dialog .club-bar-hint{margin:6px 0!important} } @media(max-width:760px){ #gameScreen .club-bar-dialog{width:calc(100vw - 12px);padding:15px;max-height:calc(100dvh - 16px)} .club-bar-dialog .club-bar-status{gap:9px;padding:10px}.club-energy{gap:9px}.club-energy label,.club-energy b{font-size:9px}.club-bar-dialog .club-bar-wallet{font-size:12px}.club-bar-wallet img{width:21px!important;height:21px!important} .club-bar-dialog .club-drinks{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.club-bar-dialog .club-drinks article{padding:8px 8px 10px} .club-bar-dialog .club-drink-art{width:110px;height:110px;grid-row:auto}.club-bar-dialog .club-drinks h3{font-size:13px}.club-bar-dialog .club-drinks p{font-size:10px;min-height:38px}.club-bar-dialog .club-drinks strong{font-size:10px;min-height:25px;max-width:130px;align-self:center} .club-bar-dialog .club-drinks button{min-height:42px;font-size:10px;padding:7px}.club-bar-dialog .club-bar-hint{font-size:10px} #gameScreen .club-now{padding:14px 98px 14px 14px;min-height:183px}.club-deck-art{right:10px;top:22px;width:75px}.club-vinyl{width:70px;height:70px}.club-vinyl i{inset:22px;border-width:6px}.club-equalizer{height:22px;gap:3px}.club-equalizer i{width:4px} #gameScreen .club-now h3{font-size:17px!important}.club-now>small{font-size:8px}.club-now [data-now-genre]{display:block;margin:4px 0 0}.club-now>p{font-size:10px}.club-now .club-volume{margin-left:0;font-size:10px;display:flex;gap:8px}.club-now .club-volume input{width:83px} .club-track button{min-width:100px!important;gap:4px;font-size:9px;min-height:42px}.club-track button b{font-size:11px}.club-track button img{width:19px;height:19px}.club-track strong{font-size:11px}.club-track-number{width:14px;font-size:9px}.club-track{gap:6px}.club-genres button{min-height:34px;padding:6px 9px} } @media(max-width:350px){.club-energy{grid-template-columns:1fr;gap:7px}.club-bar-dialog .club-drink-art{width:96px;height:96px}.club-bar-dialog .club-drinks h3{font-size:11px}} @media(max-width:760px) and (min-height:600px){ #gameScreen:has(#contextAction.is-ready) .club-radio{bottom:calc(220px + env(safe-area-inset-bottom,0px))} } @media(prefers-reduced-motion:reduce){.club-vinyl,.club-equalizer i{animation:none!important}.club-equalizer i{transform:scaleY(.45)}} /* pk-style-source:129 */ /* /club-notifications-v2580.css */ /* Stable geometry, readable controls, and a single scroll area per surface. */ #gameScreen .club-bar-dialog{width:min(880px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;overflow:hidden;border-radius:24px;background:#f7fafb;color:#183d50} #gameScreen .club-bar-dialog[open]{display:flex;flex-direction:column} #gameScreen .club-bar-dialog>header{flex:none;margin:0;padding:20px 24px 16px;gap:14px;border-bottom:1px solid #e1ebef;background:#fff} #gameScreen .club-bar-dialog>header>img{width:52px;height:52px;border-radius:16px}#gameScreen .club-bar-dialog header small{font-size:10px;letter-spacing:1.2px;color:#497686} #gameScreen .club-bar-dialog header h2{font-size:24px;margin:4px 0;color:#183d50}#gameScreen .club-bar-dialog header p{font-size:13px;margin:0;color:#587380} #gameScreen .club-bar-dialog header button{width:40px;height:40px;min-width:40px;align-self:flex-start;background:#eff4f7;color:#426274;border-radius:13px} #gameScreen .club-bar-dialog .club-bar-status{flex:none;gap:22px;margin:0;padding:15px 24px;border:0;border-radius:0;border-bottom:1px solid #e1ebef;background:#fff} #gameScreen .club-energy{gap:24px}#gameScreen .club-energy label{display:grid;grid-template-columns:22px 1fr auto;gap:3px 6px;font-size:12px;color:#405e6b} #gameScreen .club-energy b{font-size:12px;color:#183d50;white-space:nowrap}#gameScreen .club-energy progress{grid-column:2/-1;height:6px;accent-color:#deb02e}#gameScreen .club-energy progress::-webkit-progress-value{background:#deb02e}#gameScreen .club-energy label+label progress::-webkit-progress-value{background:#1bada5} #gameScreen .club-bar-dialog [data-player-resource-icon]{width:20px;height:24px;object-fit:contain} #gameScreen .club-bar-wallet{border-left:1px solid #e0e9ec;padding-left:20px;gap:8px}#gameScreen .club-bar-wallet>img{width:28px;height:28px}#gameScreen .club-bar-wallet>span{display:grid;text-align:left;gap:3px}#gameScreen .club-bar-wallet small{font-size:10px;font-weight:400;color:#617b85}#gameScreen .club-bar-wallet b{font-size:17px;color:#183d50} .club-bar-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 20px 18px} #gameScreen .club-bar-dialog .club-bar-hint{font-size:12px;margin:13px 0!important;text-align:left;color:#4d6d7b;line-height:1.4} #gameScreen .club-bar-dialog .club-drinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #gameScreen .club-bar-dialog .club-drinks article{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:10px;padding:14px;border-radius:17px;text-align:left;box-shadow:0 2px 6px #17394b08;background:radial-gradient(ellipse at 10% 20%,color-mix(in srgb,var(--drink-color) 13%,transparent),transparent 60%),#fff;border:1px solid #dce7ec} #gameScreen .club-bar-dialog .club-drink-art{width:100px;height:100px;margin:0;max-width:none;grid-row:auto} .club-drink-copy{min-width:0}#gameScreen .club-bar-dialog .club-drinks h3{font-size:15px;line-height:1.25;margin:0 0 5px;color:#183d50} #gameScreen .club-bar-dialog .club-drinks p{font-size:11px;line-height:1.45;min-height:32px;color:#526d79;margin:0} #gameScreen .club-drink-power{font-size:10px;color:#5e7782;margin:9px 0 4px;font-weight:500;letter-spacing:0} .club-drink-gains{display:flex;gap:8px;flex-wrap:wrap}.club-drink-gains>span{display:flex;align-items:center;gap:3px;color:#214f68;font-size:13px;font-variant-numeric:tabular-nums}.club-drink-gains>span.is-full{font-size:10px;color:#687d88;font-weight:400}.club-drink-gains img{width:16px!important;height:20px!important} .club-drink-buy{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #e8eef1;padding-top:9px} .club-drink-price{display:flex;gap:5px;align-items:center;font-size:15px;color:#183d50}.club-drink-price img{width:23px;height:23px;object-fit:contain} #gameScreen .club-bar-dialog .club-drinks button{width:auto;min-width:108px;min-height:36px;margin:0;justify-content:center;border:0;background:#177ec0;color:#fff;font-size:12px;padding:7px 14px;border-radius:10px} #gameScreen .club-bar-dialog .club-drinks button:disabled{opacity:1;background:#edf2f4;color:#6a818d;cursor:default}#gameScreen .club-drinks button:not(:disabled):hover{background:#0c679f!important} #gameScreen .club-bar-dialog>footer{flex:none;margin:0;border-top:1px solid #e1ebef;padding:10px 16px;font-size:10px;color:#627b88;background:#fff;text-align:center} #gameScreen .club-bar-feedback:not(:empty){flex:none;padding:8px 20px;margin:0!important;background:#e6f4fa;color:#17445d;font-size:12px} #gameScreen .club-bar-dialog button:focus-visible{outline:3px solid #5fbbe6;outline-offset:2px} #gameScreen .club-bar-dialog header h2{line-height:1.25}#gameScreen .club-bar-dialog header small{line-height:1.3}#gameScreen .club-bar-dialog header p{line-height:1.4} @media(min-width:1100px){#gameScreen .club-bar-dialog{width:1000px}#gameScreen .club-bar-dialog .club-drinks{grid-template-columns:repeat(3,minmax(0,1fr))}#gameScreen .club-bar-dialog .club-drinks article{grid-template-columns:78px minmax(0,1fr);padding:12px;gap:8px}#gameScreen .club-bar-dialog .club-drink-art{width:78px;height:90px;background-size:300% 200%}#gameScreen .club-bar-dialog .club-drink-art{height:78px}#gameScreen .club-bar-dialog .club-drinks h3{font-size:14px}#gameScreen .club-bar-dialog .club-drinks p{font-size:11px}} @media(max-width:620px){ #gameScreen .club-bar-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:19px} #gameScreen .club-bar-dialog>header{padding:14px;gap:10px}#gameScreen .club-bar-dialog>header>img{width:42px;height:42px}#gameScreen .club-bar-dialog header h2{font-size:20px}#gameScreen .club-bar-dialog header p{font-size:11px}#gameScreen .club-bar-dialog header small{font-size:8px} #gameScreen .club-bar-dialog .club-bar-status{padding:12px 14px;gap:9px;flex-wrap:wrap}#gameScreen .club-energy{gap:12px;flex-basis:100%}#gameScreen .club-energy label,#gameScreen .club-energy b{font-size:11px} #gameScreen .club-bar-wallet{padding-left:0;border:0;gap:4px}#gameScreen .club-bar-wallet>span{display:flex;align-items:center;gap:6px}#gameScreen .club-bar-wallet b{font-size:13px}#gameScreen .club-bar-wallet small{font-size:11px} .club-bar-body{padding:0 12px 12px}#gameScreen .club-bar-dialog .club-drinks{grid-template-columns:1fr;gap:9px}#gameScreen .club-bar-dialog .club-drinks article{grid-template-columns:92px minmax(0,1fr);padding:12px;gap:7px 12px} #gameScreen .club-bar-dialog .club-drink-art{width:92px;height:92px}#gameScreen .club-bar-dialog .club-drinks h3{font-size:15px}#gameScreen .club-bar-dialog .club-drinks p{font-size:12px;min-height:0}#gameScreen .club-bar-dialog .club-drinks button{min-height:40px;min-width:124px} #gameScreen .club-bar-dialog>footer{font-size:9px;padding:8px} } /* Match the expanded panel exactly; only its height changes on collapse. */ @layer desktop-minimap-v2498{ @media(min-width:761px){#worldMinimapShell#worldMinimapShell.world-minimap.is-collapsed{width:var(--exp-map-width,284px)!important;min-width:0!important;max-width:none!important}} } /* Existing mobile HUD uses important rules: stay in its own layer. */ @layer mobile-hud-v2496{ body:not(.is-battling) #gameScreen#gameScreen #notificationCenter{width:min(520px,calc(100vw - 32px))!important;max-height:min(740px,calc(100dvh - 36px))!important;right:18px!important;left:auto!important;top:18px!important;border-radius:22px!important;background:#f7fafc!important;box-shadow:0 16px 60px #102b4250!important} body:not(.is-battling) #gameScreen#gameScreen #notificationCenter>header{padding:18px 20px!important;gap:12px!important;flex:none;background:#fff;align-items:center!important} body:not(.is-battling) #gameScreen#gameScreen #notificationCenter>header small{display:block!important;font-size:9px!important;letter-spacing:1.2px;color:#4f788c} body:not(.is-battling) #gameScreen#gameScreen #notificationCenter>header h2{margin:4px 0 0;font:750 22px/1.2 system-ui;color:#183e54} body:not(.is-battling) #gameScreen#gameScreen #notificationCenter>header button{width:38px!important;min-height:38px!important;font-size:23px!important;padding:0!important;background:#eef3f7!important;color:#365e73!important} body:not(.is-battling) #gameScreen#gameScreen #notificationCenterButton>span{background:url('/assets/pokemon-equipment-v2380/guardian-bell.webp') center/contain no-repeat!important;width:28px!important;height:28px!important} @media(max-width:760px){body:not(.is-battling) #gameScreen#gameScreen #notificationCenter.is-open{inset:max(8px,env(safe-area-inset-top)) 8px auto!important;width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;border-radius:18px!important}} } #notificationCenter[aria-hidden=true]{visibility:hidden}#notificationCenter [hidden]{display:none!important}#notificationCenter *{box-sizing:border-box} #notificationCenter>header>div{display:block} #notificationCenter .notice-tabs{display:flex;gap:6px;padding:12px 14px 8px;flex:none;overflow-x:auto;scrollbar-width:thin;background:#fff} #notificationCenter .notice-tabs button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;min-width:70px;min-height:66px;padding:7px 5px;border:1px solid transparent;border-radius:12px;background:#f3f6f9;color:#4d697c;font-size:10px;font-weight:600;cursor:pointer} #notificationCenter .notice-tabs button[aria-pressed=true]{background:#e7f3fc;border-color:#a6cde5;color:#0e628d}.notice-tabs img{width:25px;height:25px;object-fit:contain}.notice-tabs i{position:absolute;right:2px;top:2px;padding:1px 4px;background:#d44e51;color:white;font:700 9px system-ui;border-radius:8px} #notificationCenter .notice-tools{display:flex;justify-content:space-between;gap:6px;padding:7px 16px 13px;background:white;border-bottom:1px solid #dee8ed;flex:none} #notificationCenter .notice-tools button{border:0;border-radius:9px;padding:8px 10px;background:transparent;color:#41687e;font-size:12px;cursor:pointer;min-height:34px}#notificationCenter .notice-tools [aria-pressed=true]{background:#173f58;color:#fff}#notificationCenter button:disabled{opacity:.5;cursor:default} #notificationCenter .notification-center-list{display:block;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 14px;scrollbar-width:thin;scrollbar-gutter:stable} .notice-entry{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;border:1px solid #e0e8ed;border-radius:15px;background:white;padding:14px;margin-bottom:9px}.notice-entry:last-child{margin-bottom:0}.notice-entry.is-unread{border-color:#a9cee6;box-shadow:inset 3px 0 #4598c7;background:#fbfdff} .notice-entry-icon{background:#edf5fb;border-radius:12px;width:40px;height:40px;padding:7px}.notice-entry-icon img{width:100%;height:100%;object-fit:contain}.notice-entry[data-category=admin] .notice-entry-icon{background:#f0eafa}.notice-entry[data-category=game] .notice-entry-icon{background:#edf7ef}.notice-entry[data-category=market] .notice-entry-icon{background:#fff5e3} .notice-entry-copy{min-width:0}.notice-entry-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:#607b8b;font:500 10px/1.4 system-ui}.notice-entry-meta time{margin-left:auto}.notice-entry-meta>i{width:6px;height:6px;flex:none;background:#318fc7;border-radius:50%} .notice-entry h3{margin:5px 0 4px;font:700 15px/1.3 system-ui;color:#193c51;overflow-wrap:anywhere}.notice-entry p{margin:0;color:#4e6c7e;font:400 12px/1.5 system-ui;overflow-wrap:anywhere} .notice-entry-actions{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}.notice-entry-actions button,.notice-entry-actions a{padding:7px 10px;border:0;border-radius:8px;background:#edf4f9;color:#196992;text-decoration:none;font:650 11px system-ui;cursor:pointer;min-height:32px}.notice-entry-actions [data-notice-read]{color:#6c8593;background:transparent;padding-left:0}.notice-read{font-size:10px;color:#78909d} .notice-empty{padding:32px 18px;text-align:center}.notice-empty>img{width:46px;height:46px;object-fit:contain;opacity:.75}.notice-empty h3{font-size:16px;color:#24485c}.notice-empty p{font-size:13px;line-height:1.5;color:#587487} .notice-connection{margin:0;padding:8px 18px;font-size:12px;background:#fff1d7;color:#7f5a15;flex:none} .notice-detail{display:flex;flex-direction:column;overflow:hidden;min-height:0}.notice-detail>button{align-self:flex-start;margin:12px 18px 5px;border:0;background:transparent;color:#286781;font-size:13px;min-height:36px;cursor:pointer}.notice-detail-body{overflow:auto;min-height:0;overscroll-behavior:contain;padding:12px 24px 24px} .notice-release-version{font-size:10px;letter-spacing:1px;color:#3279a2;font-weight:750}.notice-release h2{font-size:26px;line-height:1.2;color:#183f55;margin:10px 0}.notice-release-lead{font-size:14px;line-height:1.6;color:#526e7f}.notice-release section{margin:22px 0}.notice-release h3{font-size:17px;color:#183f55;margin:0 0 8px}.notice-release ul{padding-left:20px;margin:0}.notice-release li{font-size:13px;line-height:1.65;color:#345467;margin:7px 0}.notice-release footer{border-top:1px solid #dfe9ee;padding-top:16px;font-size:11px;color:#78909d} #notificationCenter button:focus-visible,#notificationCenter a:focus-visible{outline:3px solid #5fb8e2;outline-offset:2px} @media(max-width:420px){#notificationCenter .notice-tabs{padding:9px 10px 7px;gap:4px}#notificationCenter .notice-tabs button{min-width:64px;font-size:9px}.notice-entry{padding:11px;gap:9px;grid-template-columns:32px minmax(0,1fr)}.notice-entry-icon{width:32px;height:32px;padding:5px}.notice-entry-meta time{font-size:9px}.notice-detail-body{padding:12px 18px 20px}.notice-release h2{font-size:23px}} @media(prefers-reduced-motion:reduce){#notificationCenter{transition:none!important}} @media(max-height:500px){ #gameScreen .club-bar-dialog>header{padding:10px 16px} #gameScreen .club-bar-dialog>header>img{width:36px;height:36px} #gameScreen .club-bar-dialog header h2{font-size:20px;margin:0} #gameScreen .club-bar-dialog header small,#gameScreen .club-bar-dialog header p,#gameScreen .club-bar-dialog>footer{display:none} #gameScreen .club-bar-dialog .club-bar-status{padding:9px 16px} } /* pk-style-source:130 */ /* /location-library-v2520.css */ .location-library-nav{display:flex;align-items:center;gap:8px;padding:12px 18px;background:var(--ui-paper,#f5fafc);border-bottom:1px solid var(--ui-line,#dcebf0);flex-wrap:wrap} .location-library-nav button{display:flex;align-items:center;gap:8px;min-height:42px;padding:9px 16px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--ui-muted,#486577);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer} .location-library-nav button[aria-pressed=true]{background:var(--ui-paper,#dff2fc);color:var(--ui-accent,#087aad);border-color:var(--ui-line,#b3dff4)} .location-library-nav small{padding:3px 6px;border-radius:7px;background:var(--ui-card,#fff);font-size:11px} .location-library-nav .location-library-return{margin-left:auto;background:white;border-color:var(--ui-line,#d5e5ec)} .location-library-nav svg,.location-library svg{width:20px;height:20px;flex-shrink:0} .location-library{padding:22px;color:var(--ui-ink,#214454);background:var(--ui-card,#fcfdfb);min-height:480px} .location-library-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px} .location-library-head small,.location-library-detail small{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ui-muted,#568294)} .location-library h2{font-size:26px;margin:6px 0}.location-library p{font-size:14px;line-height:1.5;color:var(--ui-muted,#67808b);margin:6px 0} .location-library-close{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--ui-line,#d7e7ed);background:white;color:var(--ui-muted,#527487);border-radius:12px;cursor:pointer;flex-shrink:0} .location-library-retry{margin-top:16px;padding:12px 18px;min-height:44px;border:0;border-radius:12px;background:#138cbe;color:white;font:inherit;cursor:pointer} .location-library-filters{display:flex;gap:12px;margin-bottom:12px}.location-library-filters label{display:flex;align-items:center;gap:9px;min-width:0}.location-library-filters label:first-child{flex:1;border:1px solid var(--ui-line,#cfe1e9);background:white;border-radius:12px;padding:0 12px;color:var(--ui-muted,#7595a2)} .location-library-filters input{width:100%;min-width:0;border:0!important;outline:none!important;background:transparent!important;padding:12px 0!important;font-size:14px!important;color:var(--ui-ink,#214454)!important} #sidePanel .location-library-filters input{border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important} .location-library-filters label:first-child:focus-within{outline:2px solid #138cbe;outline-offset:2px} .location-library-filters select{max-width:200px;min-height:44px;border:1px solid var(--ui-line,#cfe1e9);border-radius:12px;background:white;color:var(--ui-ink,#345867);padding:8px 12px;font:inherit;font-size:14px} .location-library-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start}.location-library .location-library-count{font-size:12px;margin:0 0 10px} .location-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .location-library-card{padding:0;overflow:hidden;text-align:left;border:2px solid var(--ui-line,#e0eaf0);background:white;border-radius:14px;color:inherit;cursor:pointer;min-width:0;transition:border-color .15s,box-shadow .15s} .location-library-card:hover{border-color:var(--ui-line,#8bcde6)}.location-library-card.is-selected{border-color:#1995c1;box-shadow:0 0 0 2px #1995c11a}.location-library-card img{display:block;width:100%;height:auto;aspect-ratio:400/224;object-fit:cover}.location-library-card>span{display:block;padding:10px;min-height:72px} .location-library-card small{display:block;font-size:10px;line-height:1.4;color:var(--ui-muted,#71909e)}.location-library-card b{display:block;font-size:13px;line-height:1.35;margin-top:4px}.location-library-card em{display:inline-block;font-size:10px;font-style:normal;color:#159264;margin-top:4px} .location-library-detail{position:sticky;top:12px;border:1px solid var(--ui-line,#dbe7ec);border-radius:18px;overflow:hidden;background:white;box-shadow:0 8px 26px #2545500b}.location-library-detail>img{display:block;width:100%;height:auto;aspect-ratio:400/224;object-fit:cover}.location-library-detail>div{padding:18px}.location-library-detail h3{font-size:21px;line-height:1.25;margin:8px 0 12px}.location-library-detail button{display:flex;align-items:center;justify-content:center;gap:9px;background:#138cbe;border:0;border-radius:12px;color:white;padding:14px 12px;font-family:inherit;font-size:14px;font-weight:700;width:100%;min-height:48px;margin-top:20px;cursor:pointer} .location-library button:disabled,.location-library-nav button:disabled{opacity:.5;cursor:default}.location-library button:focus-visible,.location-library-nav button:focus-visible{outline:3px solid #67c5ee;outline-offset:3px} .location-library-pages{display:flex;gap:18px;align-items:center;justify-content:center;margin:18px 0 0;font-size:13px}.location-library-pages button{border:1px solid var(--ui-line,#dae7ed);border-radius:10px;background:white;color:var(--ui-accent,#3187ac);width:40px;height:40px;display:grid;place-items:center;cursor:pointer}.location-library-empty{grid-column:1/-1;padding:30px 5px} @media(max-width:1000px){.location-library-layout{grid-template-columns:minmax(0,1fr) 245px;gap:14px}.location-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:650px){.location-library{padding:14px}.location-library-nav{padding:10px;gap:5px}.location-library-nav button{padding:8px 10px;font-size:13px}.location-library-nav .location-library-return{margin-left:0;width:100%;justify-content:center}.location-library h2{font-size:22px}.location-library-head{margin-bottom:14px}.location-library-filters{flex-direction:column;gap:8px}.location-library-filters select{max-width:none;width:100%;font-size:16px}.location-library-filters input{font-size:16px!important}.location-library-filters label{width:100%}.location-library-layout{display:flex;flex-direction:column}.location-library-layout>div,.location-library-detail{width:100%}.location-library-detail{position:static;order:-1;display:grid;grid-template-columns:34% minmax(0,1fr);border-radius:12px}.location-library-detail>img{height:100%;object-fit:cover}.location-library-detail>div{padding:12px}.location-library-detail h3{font-size:17px;margin:5px 0}.location-library-detail p{display:none}.location-library-detail small{font-size:9px;letter-spacing:0}.location-library-detail button{margin-top:10px;padding:10px 6px;font-size:13px;min-height:42px}.location-library-grid{gap:9px}.location-library-card>span{padding:9px;min-height:69px}} @media(prefers-reduced-motion:reduce){.location-library-card{transition:none}} /* pk-style-source:131 */ /* /world-personality-v2510.css */ /* One action symbol, the bound key and a short label. No nested button. */ @layer hud-v2680 { #gameScreen #contextAction[data-action-tone] {--prompt-tone:#496477;} #gameScreen #contextAction[data-action-tone="travel"] {--prompt-tone:#6263ac;} #gameScreen #contextAction[data-action-tone="talk"] {--prompt-tone:#246d9d;} #gameScreen #contextAction[data-action-tone="collect"] {--prompt-tone:#24724f;} #gameScreen #contextAction[data-action-tone="storage"] {--prompt-tone:#926024;} #gameScreen #contextAction[data-action-tone="chop"],#gameScreen #contextAction[data-action-tone="craft"] {--prompt-tone:#99591f;} #gameScreen #contextAction[data-action-tone="fishing"] {--prompt-tone:#246b87;} #gameScreen #contextAction[data-action-tone="battle"] {--prompt-tone:#ae3f4b;} #gameScreen #contextAction[data-action-tone="rest"],#gameScreen #contextAction[data-action-tone="music"] {--prompt-tone:#7456a1;} #gameScreen #contextAction[data-action-tone="dress"] {--prompt-tone:#a04f83;} #gameScreen #contextAction[data-action-tone="light"],#gameScreen #contextAction[data-action-tone="awards"] {--prompt-tone:#876219;} #gameScreen #contextAction[data-action-tone="incubate"] {--prompt-tone:#397a68;} body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction[data-action-tone] { --prompt-paper:#fff;--prompt-ink:#263b50;--action-color:var(--prompt-tone)!important;--action-ink:var(--prompt-ink)!important; width:max-content!important;min-width:0!important;max-width:min(300px,calc(100% - 32px))!important;height:auto!important;min-height:52px!important;box-sizing:border-box!important;padding:8px 12px!important;gap:10px!important; flex-wrap:nowrap!important;border:1px solid color-mix(in srgb,var(--prompt-tone) 24%,#dce5ec)!important;border-radius:15px!important;background:var(--prompt-paper)!important;color:var(--prompt-ink)!important;box-shadow:0 3px 14px #182b401c!important;touch-action:manipulation!important; } html[data-game-theme="dark"] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction[data-action-tone] {--prompt-paper:#203141;--prompt-ink:#edf5fc;--action-color:color-mix(in srgb,var(--prompt-tone),#fff 55%)!important;border-color:color-mix(in srgb,var(--prompt-tone) 45%,#546c80)!important;} body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction[data-action-tone] #actionVisual {display:grid!important;place-items:center!important;width:28px!important;height:28px!important;flex:0 0 28px!important;padding:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--action-color)!important;} #contextAction #actionVisual :is(svg,img) {width:100%;height:100%;display:block;object-fit:contain;} body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction[data-action-tone] :is(.interaction-card__copy,#actionIcon) {display:none!important;} body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction[data-action-tone] .interaction-card__cta {display:flex!important;align-items:center!important;justify-content:flex-start!important;flex:1 1 auto!important;min-width:0!important;min-height:0!important;height:auto!important;width:auto!important;max-width:100%!important;padding:0!important;gap:9px!important;background:transparent!important;color:var(--prompt-ink)!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:none!important;} body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction[data-action-tone] #actionKey {display:grid!important;place-items:center!important;flex:0 0 auto!important;min-width:28px!important;height:28px!important;padding:0 5px!important;background:color-mix(in srgb,var(--prompt-paper),var(--prompt-ink) 5%)!important;color:var(--prompt-ink)!important;border:1px solid color-mix(in srgb,var(--prompt-ink) 18%,var(--prompt-paper))!important;border-bottom-width:2px!important;border-radius:7px!important;font:700 12px/1 system-ui!important;box-shadow:none!important;} body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction[data-action-tone] #actionLabel {min-width:0!important;white-space:normal!important;overflow:hidden!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;font:600 14px/1.25 system-ui!important;text-align:left!important;color:var(--prompt-ink)!important;} #contextAction:focus-visible {outline:3px solid var(--action-color)!important;outline-offset:3px;} @media (hover:hover) {#contextAction:hover {box-shadow:0 4px 18px #182b4033!important;}} @media (max-width:760px), (pointer:coarse) and (max-height:560px) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction[data-action-tone] {left:12px!important;right:auto!important;transform:none!important;max-width:min(260px,calc(100% - 96px))!important;min-height:48px!important;padding:8px 10px!important;gap:8px!important;border-radius:13px!important;} body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction[data-action-tone] #actionVisual {width:24px!important;height:24px!important;flex-basis:24px!important;} body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction[data-action-tone] #actionLabel {font-size:12px!important;} } } /* /region-atlas-v1.css: deferred, original cascade position */ @media all{:root[data-pk-style-slot="owner-132"]{}} /* /region-atlas-refinement-v2.css: deferred, original cascade position */ @layer ui-theme;@media all{:root[data-pk-style-slot="owner-133"]{}} /* pk-style-source:134 */ /* /hud-compact-fix.css */ @layer desktop-minimap-v2498 { @media (min-width: 761px) { /* Compact HUD geometry: rows + borders determine height, with no inherited gap. */ #worldMinimapShell#worldMinimapShell.world-minimap.is-collapsed { box-sizing: border-box !important; height: auto !important; min-height: 0 !important; gap: 0 !important; grid-template-rows: 48px 38px !important; overflow: visible !important; } #worldMinimapShell#worldMinimapShell.is-collapsed .world-minimap-topbar { box-sizing: border-box !important; height: 48px !important; min-height: 0 !important; margin: 0 !important; } #worldMinimapShell#worldMinimapShell.is-collapsed .world-minimap-bottombar { box-sizing: border-box !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; } #worldMinimapShell#worldMinimapShell.is-collapsed .world-minimap-channel { box-sizing: border-box !important; align-items: center !important; overflow: hidden; } #worldMinimapShell#worldMinimapShell .world-minimap-channel-copy { min-width: 0; } #worldMinimapShell#worldMinimapShell #worldMinimapChannelPopulation, #worldMinimapShell#worldMinimapShell .world-minimap-channel-chevron { flex-shrink: 0; white-space: nowrap; } #worldMinimapShell#worldMinimapShell.is-collapsed #worldMinimapPing { box-sizing: border-box !important; flex: 0 0 auto !important; white-space: nowrap !important; align-self: stretch !important; border-bottom-right-radius: var(--world-hud-radius, 17px); } } } #worldMinimapWeatherIcon .pokeclub-location-icon { width: 26px; height: 26px; display: block; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget .exp-goal-summary { display: block; margin-top: 3px; color: var(--exp-ink, #17384f); font: 600 13px/1.35 "Segoe UI", sans-serif; overflow-wrap: anywhere; letter-spacing: normal !important; text-transform: none !important; } /* Layered important rules also outrank the legacy full-stamina :has selector. */ @layer desktop-minimap-v2498 { /* Touch phones keep their dedicated top-left goal launcher. */ @media (min-width: 761px) and (pointer: fine), (min-width: 761px) and (min-height: 561px) { body:not(.is-battling) #gameScreen#gameScreen#gameScreen[data-world-hud="v2340"] #questWidget { top: var(--world-goal-top, var(--exp-goal-top)) !important; right: var(--world-goal-right, 20px) !important; width: var(--world-goal-width, 284px) !important; max-height: var(--world-goal-max-height, calc(100dvh - 320px)) !important; overflow: auto !important; } } } @layer mobile-hud-v2496 { @media (max-width: 760px), (pointer: coarse) and (max-height: 560px) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #questWidget:not(.is-collapsed) { top: max(calc(144px + env(safe-area-inset-top)), var(--world-goal-top, 144px)) !important; max-height: var(--world-goal-max-height, calc(100dvh - 240px)) !important; } } } /* pk-style-source:135 */ /* /trainer-card.css */ @layer trainer-card-compact{#app #gameScreen #sidePanel.is-trainer-card.is-open{position:fixed!important;inset:var(--tc-center-y,50%) auto auto 50%!important;transform:translate(-50%,-50%)!important;translate:none!important;scale:none!important;zoom:1!important;display:block!important;width:var(--tc-width,440px)!important;height:var(--tc-height,620px)!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;padding:0!important;margin:0!important;border:1px solid var(--ui-line,#d6e5e9)!important;border-radius:22px!important;background:var(--ui-card,#fff)!important;overflow:hidden!important;box-shadow:0 16px 60px #102e4b40!important}#app #gameScreen #sidePanel.is-trainer-card #sidePanelContent{display:block!important;width:100%!important;height:100%!important;max-height:none!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden!important;scrollbar-gutter:auto!important}#sidePanel.is-trainer-card>.panel-close,#sidePanel.is-trainer-card>.panel-window-grip{display:none!important}@media(min-width:801px){#app #gameScreen #sidePanel.is-trainer-card.is-open.is-user-positioned{inset:var(--panel-user-top,8px) auto auto var(--panel-user-left,8px)!important;transform:none!important;transition:none!important}}@media(max-width:800px){#app #gameScreen #sidePanel.is-trainer-card.is-open{top:var(--tc-center-y,calc(50% - 28px))!important}}}.tc,.tc-studio{color:var(--ui-ink,#244656);font:13px/1.35 "Nunito Sans",system-ui,sans-serif;text-align:left}.tc *,.tc-studio *{box-sizing:border-box;min-width:0}.tc{position:relative;height:100%;display:grid;grid-template-rows:minmax(120px,1fr) auto;isolation:isolate}.tc h2,.tc h3,.tc p,.tc-studio h2,.tc-studio h3,.tc-studio p{margin:0}.tc button,.tc-studio button{font:inherit;cursor:pointer;color:var(--ui-ink,#28576c);border:1px solid var(--ui-line,#d5e5eb);background:var(--ui-paper,#f4fafc);border-radius:10px;min-height:36px;padding:6px 12px;box-shadow:none;transition:background .12s}.tc button:hover,.tc-studio button:hover{background:var(--ui-paper,#e7f4f7)}.tc button:focus-visible,.tc-studio :is(button,select,input):focus-visible{outline:3px solid #12a0bb;outline-offset:2px}.tc button:disabled,.tc-studio :disabled{cursor:default;opacity:.55}.tc [hidden],.tc-studio [hidden]{display:none!important}.tc-scene{position:relative;min-height:0;overflow:hidden;background-image:linear-gradient(0deg,#173e3640,transparent 55%),var(--tc-scene);background-size:cover;background-position:center 62%;isolation:isolate}.tc-scene[data-scene=academy]{background-position:center 68%}.tc-top{position:absolute;z-index:3;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;height:51px;padding:8px 12px;color:#fff;background:linear-gradient(#173e3bb0,transparent);cursor:grab;touch-action:none}.tc-top>span.tc-drag-handle{height:4px;width:32px;border-radius:9px;background:#ffffff90;box-shadow:0 1px 4px #173e3b40}.tc-top>div{display:flex;gap:6px}.tc .tc-top button{height:36px;min-height:36px;width:36px;padding:8px;border:1px solid #ffffffa0;border-radius:12px;display:grid;place-items:center;box-shadow:0 2px 9px #12384915}.tc svg,.tc-studio svg{width:20px;height:20px;flex:none;vertical-align:middle}.tc-top.is-dragging{cursor:grabbing}.tc-scene .tc-hero-canvas{position:absolute;left:4%;bottom:0;width:230px;height:230px;max-width:68%;max-height:calc(100% - 25px);object-fit:contain;object-position:bottom;filter:drop-shadow(0 4px 3px #163d3228);pointer-events:none}.tc-scene .tc-partner{position:absolute;right:7%;bottom:16px;width:116px;padding:0;border:0;border-radius:12px;background:transparent;display:grid;justify-items:center;gap:0;min-height:0;filter:drop-shadow(0 3px 2px #163d3220)}.tc-scene .tc-partner:hover{background:#ffffff15}.tc-pokemon-canvas{display:block;width:112px;height:112px;object-fit:contain}.tc-partner>span{background:#ffffffe8;border:1px solid #ffffffa0;border-radius:9px;padding:4px 9px;font-size:11px;font-weight:750;max-width:116px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-partner small{display:block;font-weight:500;font-size:10px;color:var(--ui-muted,#56757e)}.tc-hero-right .tc-hero-canvas{left:auto;right:3%}.tc-scene.tc-hero-right .tc-partner{right:auto;left:7%}.tc-scene-status,.tc-pokemon-status{position:absolute;z-index:4;left:10px;right:10px;top:54px;background:#fffffff0;padding:5px;border-radius:8px;font-size:11px;text-align:center}.tc-pokemon-status{top:auto;bottom:0}.tc-scene-status:empty,.tc-pokemon-status:empty{display:none}.tc-body{display:grid;gap:9px;padding:12px 16px 14px;background:linear-gradient(#fff,#f8fbfd)}.tc-identity{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px}.tc-identity h2{font-size:22px;line-height:1.12;letter-spacing:-.035em;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:270px}.tc-presence{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:#97a9b1}.tc-presence.is-online{background:#08ac80;box-shadow:0 0 0 3px #0ab68010}.tc-identity-actions{display:flex;align-items:center;gap:8px;flex:none}.tc .tc-details{min-height:30px;width:28px;padding:0;border:0;background:none;color:var(--ui-muted,#7899aa);font-size:20px}.tc-showcase>header{display:flex;align-items:center;justify-content:space-between;gap:8px;height:20px;margin-bottom:3px}.tc-showcase h3{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ui-muted,#718c9a);font-weight:750}.tc-showcase h3 small{margin-left:4px;font-size:10px;color:var(--ui-muted,#8d9fac);letter-spacing:0;font-weight:500}.tc-showcase>header>div{display:flex;gap:4px}.tc .tc-mini{padding:0 6px;min-height:20px;height:20px;font-size:10px;border:0;background:none}.tc-awards,.tc-gifts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;height:44px;align-items:center}.tc .tc-awards button,.tc .tc-gifts button{position:relative;display:grid;place-items:center}.tc .tc-awards button.is-earned{background:linear-gradient(#fffdf6,#fff6db);border-color:#efdfb5}.tc .tc-awards button.is-locked{background:var(--ui-paper,#f4f6f8);border-color:var(--ui-line,#e7ecee)}.tc-medal{display:block;width:40px;height:40px;background-image:url('/assets/trainer-card/achievement-atlas.png');background-repeat:no-repeat;background-size:500% auto;background-position:calc(var(--medal-index)*25%) center}.tc-awards .is-locked .tc-medal{filter:grayscale(1);opacity:.4}.tc-gifts img{width:38px;height:38px;object-fit:contain}.tc-gifts button>small{position:absolute;right:1px;bottom:1px;background:#edf6f9ed;border-radius:5px;min-width:19px;font-size:9px;font-weight:750;color:var(--ui-muted,#457389)}.tc-empty-gifts{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:9px;height:44px;border:1px dashed var(--ui-line,#d6e3e7);border-radius:10px;color:var(--ui-muted,#8b9da5);font-size:11px}.tc-empty-gifts img{width:28px;height:28px;filter:grayscale(.7);opacity:.45}.tc-actions{display:flex;gap:7px;padding-top:3px}.tc-actions button{flex:1;font-size:11px;font-weight:750;min-height:36px;height:36px}.tc-actions button:first-child{background:#117f90;color:#fff;border-color:#117f90}.tc-actions [data-tc-sheet=actions]{flex:0 0 36px;padding:0}.tc-hint{font-size:11px;line-height:1.5;color:var(--ui-muted,#74909d)}.tc-sheet{position:absolute;z-index:8;inset:0;background:var(--ui-card,#f9fcfd);padding:16px;display:flex;flex-direction:column;gap:20px}.tc-sheet>header{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--ui-line,#e0ebef);padding-bottom:12px}.tc-sheet>header h3{flex:1;font-size:16px}.tc-sheet>header button{width:36px;padding:0;display:grid;place-items:center}.tc-facts{display:grid;gap:20px;margin:0;padding:8px}.tc-facts dt{font-size:11px;color:var(--ui-muted,#7c95a2);margin-bottom:5px}.tc-facts dd{margin:0;font-size:14px;font-weight:650}.tc-facts code{font-size:12px}.tc-friend-list{display:grid;gap:8px}.tc-friend-list button{display:flex;align-items:center;gap:8px;min-height:44px}.tc-friend-list b{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.tc-friend-list small{font-size:10px}.tc-invitation code{padding:8px 20px;border:1px dashed var(--ui-line,#b0d6df);border-radius:9px;background:var(--ui-paper,#eef8fa)}.tc-invitation [data-referral-copy]{background:var(--ui-primary);color:white;border-color:var(--ui-primary)}.tc-invitation button svg{width:17px;height:17px;margin-right:4px}.tc-pagination{display:flex;align-items:center;justify-content:center;gap:20px}.tc-invitation{display:grid;justify-items:center;gap:16px;text-align:center}.tc-invitation img{width:64px;height:64px;object-fit:contain}.tc-invitation p{max-width:260px;color:var(--ui-muted,#74909d);font-size:12px}.tc-invitation code{font-size:18px}.tc-invitation button{width:100%}.tc-landscape .tc-facts{grid-template-columns:1fr 1fr;gap:18px}.tc-landscape .tc-invitation{grid-template-columns:80px 1fr 1fr;gap:12px;text-align:left}.tc-landscape .tc-invitation img{grid-row:1/4}.tc-landscape .tc-invitation :is(h3,p,code){grid-column:2/-1;justify-self:start}.tc-landscape .tc-invitation button{grid-row:4}.tc-landscape .tc-invitation button:first-of-type{grid-column:2}.tc .profile-v80-gift-picker{position:absolute;z-index:10;inset:0;display:grid;background:var(--ui-card,#f9fcfd);padding:12px}.tc .profile-v80-gift-picker-card{display:flex;flex-direction:column;justify-content:space-between;gap:12px;background:none;padding:0;max-height:none;overflow:visible;width:100%}.tc .profile-v80-gift-picker-card>header{display:flex;gap:8px;align-items:center}.tc .profile-v80-gift-picker-card>header span{flex:1}.tc .profile-v80-gift-picker-card p{font-size:11px}.tc .profile-v80-gift-picker-card b{display:block}.tc .profile-v80-gift-picker-card>header small{font-size:9px}.tc .profile-v80-gift-picker-card>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tc .profile-v80-gift-choice{padding:5px;min-height:82px}.tc .profile-v80-gift-choice img{width:40px;height:40px;object-fit:contain}.tc .profile-v80-gift-choice b{font-size:10px}.tc .profile-v80-gift-choice small{display:none}.tc .profile-v80-gift-picker-card>footer{font-size:11px}.tc-landscape .tc .profile-v80-gift-picker-card{gap:6px;justify-content:start}.tc-landscape .tc .profile-v80-gift-picker-card>div{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.tc-landscape .tc .profile-v80-gift-choice{min-height:72px;height:72px}.tc-landscape .tc .profile-v80-gift-choice img{width:34px;height:34px}.tc-tooltip{position:fixed;inset:auto;margin:0;padding:12px 14px;width:max-content;max-width:min(270px,calc(100vw - 16px));border:1px solid var(--ui-line,#d2e3e9);border-radius:12px;font:12px/1.6 system-ui,sans-serif;z-index:2147483647;pointer-events:none}.tc-tooltip::first-line{font-weight:800;color:var(--ui-accent,#176d80)}.tc-tooltip[hidden]{display:none!important}dialog.tc-studio{position:fixed!important;inset:50% 0 auto!important;margin:0 auto!important;width:min(740px,calc(100vw - 24px))!important;height:fit-content!important;min-height:0!important;max-width:none!important;max-height:calc(100dvh - 24px)!important;padding:16px!important;border:1px solid var(--ui-line,#d8e7ed)!important;border-radius:22px!important;background:var(--ui-card,#f9fcfe)!important;overflow:visible!important;box-shadow:0 20px 90px #12334b55!important;transform:translateY(-50%)!important}.tc-studio::backdrop{background:#14334770;backdrop-filter:blur(3px)}.tc-studio-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.tc-studio-top small{font-size:9px;letter-spacing:.12em;color:var(--ui-muted,#7998a9)}.tc-studio-top h2{font-size:20px;line-height:1.3}.tc-studio-top button{width:36px;padding:0;font-size:22px}.tc-studio-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}.tc-studio-preview{display:flex;flex-direction:column;min-height:0}.tc-studio-preview .tc-scene{height:300px;flex:1;border-radius:16px;min-height:190px}.tc-studio-preview>small{text-align:center;font-size:10px;color:var(--ui-muted,#7694a2);margin-top:6px}.tc-studio-preview .tc-hero-canvas{left:-4%;bottom:6px;max-height:100%;max-width:78%;width:260px;height:260px}.tc-studio-preview .tc-partner{right:3%;bottom:17px;width:98px}.tc-studio-preview .tc-pokemon-canvas{width:98px;height:98px}.tc-studio-preview .tc-hero-right .tc-hero-canvas{left:auto;right:-4%}.tc-studio-preview .tc-scene.tc-hero-right .tc-partner{right:auto;left:3%}.tc-controls>nav{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--ui-paper,#e8f1f5);border-radius:10px;padding:3px;margin-bottom:12px}.tc-controls>nav button{border:0;min-height:30px;padding:5px 3px;font-size:11px;background:none}.tc-controls>nav button[aria-pressed=true]{background:white;color:var(--ui-accent,#087e91);font-weight:800;box-shadow:0 2px 5px #31546710}.tc-fields{display:grid;gap:12px;align-content:start;min-height:276px}.tc-fields label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--ui-muted,#5a7887)}.tc-fields select{width:100%;height:35px;min-height:0;padding:4px 7px;border:1px solid var(--ui-line,#cddfe8);border-radius:8px;background:var(--ui-card,#fff);color:var(--ui-ink,#254b61);font:12px system-ui,sans-serif}.tc-fields fieldset{margin:0;padding:0;border:0}.tc-fields legend{font-size:11px;color:var(--ui-muted,#5a7887);margin-bottom:6px;float:none;width:100%}.tc-fields legend b{float:right;color:var(--ui-accent,#13859a)}.tc-fields h3{font-size:16px}.tc-backgrounds{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.tc-studio .tc-backgrounds button{height:47px;padding:0;min-height:0;border:2px solid transparent;background-size:cover;background-position:center;border-radius:9px;overflow:hidden}.tc-backgrounds button[aria-pressed=true]{border-color:#1595a9;box-shadow:0 0 0 2px #1595a922}.tc-backgrounds button span{display:grid;place-items:center;height:100%;background:#17364360;text-shadow:0 1px 4px #15302e;color:#fff;font-size:10px;font-weight:750}.tc-control-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}.tc-frames{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.tc-studio .tc-frames button{padding:0;min-height:32px}.tc-studio .tc-frames [aria-pressed=true]{background:#147e91;border-color:#147e91;color:white}.tc-fields .tc-switch{flex-direction:row;align-items:center;gap:10px;min-height:35px;font-size:12px;color:var(--ui-ink,#254b61)}.tc-switch input{accent-color:#0a8d9e;width:18px;height:18px;flex:none}.tc-switch small{display:block;color:var(--ui-muted,#8b9da7);font-size:10px;margin-top:4px}.tc-studio>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--ui-line,#dce9ef);margin-top:14px}.tc-studio>footer span{font-size:10px;color:var(--ui-muted,#7894a3);max-width:75%}.tc-studio [data-tc-save]{background:#087e94;border-color:#087e94;color:#fff;font-weight:750;min-width:115px}@media(max-width:580px){dialog.tc-studio{padding:12px!important;border-radius:18px!important}.tc-studio-top{margin-bottom:10px}.tc-studio-top h2{font-size:18px}.tc-studio-layout{grid-template-columns:1fr;gap:10px}.tc-studio-preview .tc-scene{height:175px;min-height:175px;flex:none}.tc-studio-preview>small{display:none}.tc-studio-preview .tc-hero-canvas{left:10%;height:190px;width:190px}.tc-studio-preview .tc-partner{right:9%;bottom:8px}.tc-studio-preview .tc-hero-right .tc-hero-canvas{right:10%}.tc-studio-preview .tc-scene.tc-hero-right .tc-partner{left:9%}.tc-fields{min-height:250px;gap:9px}.tc-controls>nav{margin-bottom:9px}.tc-studio>footer{margin-top:10px;padding-top:10px}}@media(max-height:650px){dialog.tc-studio{padding:10px!important}.tc-studio-top{margin-bottom:8px}.tc-studio-top h2{font-size:17px}.tc-studio-top small{display:none}.tc-fields{min-height:218px;gap:7px}.tc-fields select{height:30px;font-size:11px}.tc-fields label{gap:3px}.tc-studio .tc-backgrounds button{height:32px}.tc-controls>nav{margin-bottom:8px}.tc-studio-layout{gap:10px}.tc-studio>footer{padding-top:8px;margin-top:8px}.tc-studio-preview .tc-scene{min-height:145px}.tc-studio-preview .tc-hero-canvas{max-height:100%;bottom:0}.tc-studio .tc-frames button{min-height:27px}.tc-studio-preview>small{display:none}}@media(max-width:580px) and (max-height:650px){.tc-studio-preview .tc-scene{height:100px;min-height:100px}.tc-studio-preview .tc-hero-canvas{height:118px;width:118px;left:20%}.tc-studio-preview .tc-hero-right .tc-hero-canvas{right:20%}.tc-studio-preview .tc-pokemon-canvas{width:65px;height:65px}.tc-studio-preview .tc-partner{bottom:2px;right:16%}.tc-studio-preview .tc-scene.tc-hero-right .tc-partner{left:16%}.tc-studio-preview .tc-partner>span{padding:2px 5px;font-size:9px}.tc-studio-preview .tc-partner small{display:none}}@media(min-width:581px) and (max-height:420px){.tc-fields{min-height:202px;gap:5px}.tc-studio>footer{padding-top:6px;margin-top:6px}.tc-studio-top{margin-bottom:6px}.tc-studio .tc-backgrounds button{height:28px}.tc-studio-preview .tc-scene{height:235px}}.tc .tc-body{padding:12px 16px;gap:8px;background:var(--ui-card,#fff)}.tc .tc-identity{gap:4px;align-items:stretch;justify-content:stretch;width:100%}.tc .tc-body>.pt-entry{margin:0}.tc .tc-body>.pt-entry:empty{display:none}#sidePanel.is-trainer-card .tc-name-row h2{margin:0;padding:0;border:0;background:none;box-shadow:none}.tc .tc-top button{background:var(--ui-card,#fff);color:var(--ui-ink,#193b50);border-color:var(--ui-line,#bcced9)}.tc .tc-name-row{gap:12px}.tc .tc-name-row h2{font-size:24px;line-height:1.25;font-weight:850}.tc .tc-presence{width:7px;height:7px}.tc .tc-presence.is-online{background:var(--ui-positive,#176d54)}.tc .tc-showcase{border:0;border-top:1px solid var(--ui-line,#bcced9);border-radius:0;padding:2px 0 0;background:none}.tc .tc-showcase>header{height:44px;min-height:44px;margin:0;gap:4px}.tc .tc-showcase h3{font-size:12px;letter-spacing:.025em;text-transform:none;color:var(--ui-ink,#193b50)}.tc .tc-showcase h3 small{font-size:11px;margin-left:4px;font-weight:700;color:var(--ui-muted,#496577)}.tc .tc-showcase>header>.tc-shelf-actions{align-items:center;gap:2px}.tc .tc-showcase .tc-mini{display:flex;align-items:center;justify-content:center;gap:4px;height:44px;min-height:44px;min-width:44px;padding:0 6px;font-size:11px;font-weight:650;color:var(--ui-accent,#096caa);background:transparent;border:0;border-radius:8px;white-space:nowrap}.tc .tc-showcase .tc-mini:hover{background:var(--ui-hover,#e2edf4)}.tc .tc-collection-count{font-variant-numeric:tabular-nums;color:var(--ui-muted,#496577);font-size:10px;font-weight:500}.tc .tc-mini svg{width:16px;height:16px}.tc .tc-shelf-pages{display:flex;align-items:center;justify-content:center;gap:2px}.tc .tc-showcase .tc-shelf-pages{padding:0;background:none;border:0;border-radius:0;height:44px;gap:0}.tc .tc-shelf-pages button,.tc .tc-pagination button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;flex:none;padding:0;background:transparent;border:0;border-radius:8px}.tc .tc-showcase .tc-shelf-pages button{background:transparent}.tc .tc-shelf-pages button:hover,.tc .tc-pagination button:hover{background:var(--ui-hover,#e2edf4)}.tc .tc-shelf-pages span{font-size:11px;white-space:nowrap;color:var(--ui-muted,#496577);font-variant-numeric:tabular-nums;min-width:30px;text-align:center}.tc .tc-awards,.tc .tc-gifts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;height:56px;padding:0;background:none;border-radius:0}.tc .tc-awards button,.tc .tc-gifts button{height:56px;min-height:56px;width:100%;padding:2px;background:var(--ui-soft,#edf4f8)!important;border:0!important;border-radius:10px}.tc .tc-awards button:hover,.tc .tc-gifts button:hover{background:var(--ui-hover,#e2edf4)!important}.tc .tc-awards .tc-badge-art{width:52px;height:52px;max-width:100%;max-height:100%}.tc .tc-gifts img,.tc .tc-gifts .tc-animated-gift{width:50px;height:50px;max-width:100%;object-fit:contain}.tc .tc-gifts button>small{right:3px;bottom:3px;padding:1px 4px;min-width:22px;font-size:11px;color:var(--ui-ink,#193b50);background:var(--ui-card,#fff)}.tc .tc-gifts.is-empty{height:32px}.tc .tc-empty-gifts{height:32px;font-size:12px;background:none;border:0;justify-content:flex-start;padding:0 4px;color:var(--ui-muted,#496577)}.tc .tc-empty-gifts svg{width:18px;height:18px}.tc .tc-awards>.tc-hint{grid-column:1/-1;align-self:center;font-size:12px}.tc .tc-actions{border-top:1px solid var(--ui-line,#bcced9);padding-top:8px;gap:8px}.tc .tc-actions button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;height:44px;font-size:12px;padding:5px 8px}.tc .tc-actions button:first-child{background:var(--ui-primary,#096caa);color:var(--ui-on-accent,#fff);border-color:var(--ui-primary,#096caa)}.tc .tc-actions button:first-child:hover{filter:brightness(1.08)}.tc .tc-friend-count{padding:1px 6px;border-radius:6px;background:#ffffff26;font-size:11px}.tc .tc-actions [data-tc-sheet=actions]{flex:0 0 44px}.tc .tc-sheet{padding:14px;gap:14px;overflow:auto;overscroll-behavior:contain}.tc .tc-sheet>header button{width:44px;height:44px;min-height:44px;flex:none}.tc .tc-sheet--collection{overflow:hidden;gap:8px;padding:12px}.tc .tc-sheet--collection>header{flex:none;padding-bottom:8px}.tc .tc-collection-tabs{display:flex;gap:4px;flex:none;border-bottom:1px solid var(--ui-line,#bcced9)}.tc .tc-collection-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:88px;height:44px;min-height:44px;padding:0 10px;border:0;border-bottom:2px solid transparent;border-radius:8px 8px 0 0;background:transparent;font-size:12px;color:var(--ui-muted,#496577)}.tc .tc-collection-tabs button[aria-selected=true]{border-bottom-color:var(--ui-accent,#096caa);color:var(--ui-accent,#096caa);background:var(--ui-soft,#edf4f8);font-weight:750}.tc .tc-collection-tabs span{font-size:11px;font-variant-numeric:tabular-nums}.tc .tc-collection-panel{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:3px;scrollbar-gutter:stable}.tc .tc-collection-panel:focus-visible{outline:2px solid var(--ui-accent,#096caa);outline-offset:-2px;border-radius:8px}.tc .tc-badge-collection{grid-template-columns:repeat(var(--tc-collection-columns,4),minmax(0,1fr));gap:8px;flex:none}.tc .tc-badge-collection button{grid-template-rows:48px 28px 12px;align-items:center;gap:1px;height:100px;min-height:100px;padding:4px;font-size:11px;background:var(--ui-soft,#edf4f8);border:1px solid transparent;border-radius:10px}.tc .tc-badge-collection button:hover{background:var(--ui-hover,#e2edf4);border-color:var(--ui-line,#bcced9)}.tc .tc-badge-collection .tc-badge-art{width:48px;height:48px;max-width:100%}.tc .tc-badge-collection b{font-size:11px;line-height:14px;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:700}.tc .tc-badge-collection small{font-size:10px;line-height:12px;color:var(--ui-muted,#496577)}.tc .tc-badge-collection>.tc-hint{grid-column:1/-1;padding:12px 4px}.tc .tc-sheet--collection>.tc-shelf-pages{flex:none;margin:0;justify-content:center}.tc .tc-sheet>.tc-shelf-pages{margin-top:auto}.tc-tooltip{background:var(--ui-card,#fff);color:var(--ui-ink,#193b50);border-color:var(--ui-line,#bcced9);box-shadow:var(--ui-shadow);font-size:13px;}.tc-tooltip-souvenir{display:grid;grid-template-columns:56px 1fr;gap:10px;white-space:normal;width:min(290px,calc(100vw - 16px))}.tc-tooltip-souvenir img,.tc-tooltip-souvenir .tc-animated-gift{width:56px;height:56px;object-fit:contain;animation:none}.tc-tooltip-souvenir strong{display:block;margin-bottom:5px;color:var(--ui-ink,#193b50)}.tc-tooltip-souvenir p{margin:3px 0;color:var(--ui-muted,#496577);font-size:12px}#gameScreen:has(#sidePanel.is-trainer-card.is-open) #testerLauncher{visibility:hidden!important;pointer-events:none!important;transition:none!important}.tc .pt-entry>button{background:var(--ui-soft,#edf4f8);color:var(--ui-ink,#193b50);border-color:var(--ui-line,#bcced9)}.tc .pt-entry small{background:var(--ui-tint,#deedf8);color:var(--ui-accent,#096caa)}.tc .tc-scene-status,.tc .tc-pokemon-status{background:var(--ui-card,#fff);color:var(--ui-ink,#193b50)}.tc .tc-party-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.tc .tc-party-row>button:only-child{grid-column:1/-1}.tc .tc-party-row>[data-party-kick]{width:44px;justify-content:center;color:var(--ui-danger,#a52d49)} /* pk-style-source:136 */ /* /trainer-card-builder.css */ .tc-scene-composed .tc-object{position:absolute;transform-origin:center bottom;isolation:isolate}.tc-scene-composed .tc-hero-object{aspect-ratio:1}.tc-scene-composed .tc-pokemon-object{aspect-ratio:1}.tc-scene-composed .tc-decoration{aspect-ratio:1}.tc-scene-composed .tc-object .tc-hero-canvas,.tc-scene-composed .tc-object .tc-pokemon-canvas{position:static;display:block;width:100%;height:100%;max-width:none;max-height:none;pointer-events:none}.tc-scene-composed .tc-object .tc-partner{position:static;width:100%;height:100%;padding:0;display:block;filter:none}.tc-scene-composed .tc-partner>span{position:absolute;top:auto;bottom:-6px;left:50%;transform:translateX(-50%);max-width:150px;padding:3px 8px}.tc-scene-composed .tc-object-motion{width:100%;height:100%;display:grid;place-items:center;transform-origin:center bottom}.tc-scene-composed .tc-decoration img{width:100%;height:100%;object-fit:contain;pointer-events:none}.tc-scene-composed .tc-decoration .tc-medal{width:100%;height:100%}.tc-scene-composed .tc-top{z-index:12}.tc-scene-composed .tc-scene-status,.tc-scene-composed .tc-pokemon-status{z-index:13}.tc-object-motion.is-float{animation:tc-decor-float 3.4s ease-in-out infinite}.tc-object-motion.is-pulse{animation:tc-decor-pulse 2.6s ease-in-out infinite}@keyframes tc-decor-float{50%{transform:translateY(-6px) rotate(2deg)}}@keyframes tc-decor-pulse{50%{transform:scale(1.04)}}.tc-scene.is-editing .tc-object{cursor:grab;touch-action:none;border:1px dashed transparent;border-radius:12px}.tc-scene.is-editing .tc-object.is-selected{border-color:var(--ui-line,#fff);background:#fff2;box-shadow:0 0 0 2px #078caa}.tc-scene.is-editing .tc-object.is-selected{outline:2px solid #078caa;outline-offset:2px}.tc-scene.is-editing .tc-object:active{cursor:grabbing}.tc-scene.is-editing .tc-partner{pointer-events:none}.player-chip-avatar.is-hero-portrait{background-image:none!important;overflow:hidden!important}.player-chip-avatar.is-hero-portrait :is(canvas,img){display:block;width:100%;height:100%;object-fit:contain}dialog.tc-studio.tc-builder{width:min(1240px,calc(100vw - 24px))!important;height:min(860px,calc(100dvh - 24px))!important;max-height:calc(100dvh - 24px)!important;display:flex;flex-direction:column;overflow:hidden!important;padding:18px!important}.tc-builder .tc-studio-top{flex:none;margin-bottom:14px}.tc-builder .tc-studio-top h2{font-size:22px;font-weight:850}.cb-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px;min-height:0;flex:1}.cb-workspace{display:flex;flex-direction:column;min-height:0}.cb-preview{flex:none}.cb-preview .tc-scene{height:235px;border-radius:17px;background-position:center 65%}.cb-preview>small{display:block;text-align:center;color:var(--ui-muted,#6d8c9a);font-size:10px;margin-top:7px}.cb-object-list{display:grid;grid-template-columns:minmax(0,1fr) auto auto minmax(0,.85fr);gap:6px;margin:8px 0;flex:none}.tc-builder .cb-object-list button{min-height:34px;padding:3px 8px;font-size:11px;display:flex;align-items:center;gap:3px}.cb-object-list select{width:100%;border:1px solid var(--ui-line,#d3e3ea);border-radius:9px;color:var(--ui-ink,#28576c);background:white;font:11px system-ui;padding:3px 6px}.tc-builder .cb-object-list [data-cb-remove-selected]{min-width:34px;justify-content:center;color:#aa4655}.tc-builder .cb-object-list [data-cb-remove-selected] svg{width:17px;height:17px}.cb-properties{min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px 3px 2px;border-top:1px solid var(--ui-line,#deeaef)}.cb-properties>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.cb-properties h3{font-size:13px}.tc-builder .cb-properties>header button{font-size:10px;min-height:24px;padding:2px 6px;color:#ae5662}.cb-position,.cb-pose{display:grid;grid-template-columns:1fr 1fr;gap:8px 13px}.cb-properties label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--ui-muted,#648391)}.cb-properties input[type=range]{width:100%;height:22px;accent-color:#0b8ba4;padding:0;cursor:ew-resize}.cb-properties :is(select,input[type=number]),.cb-search :is(input,select){width:100%;height:32px;min-height:0;border:1px solid var(--ui-line,#cddfe8);border-radius:8px;padding:4px 7px;font:12px system-ui;color:var(--ui-ink,#234a60);background:var(--ui-card,#fff)}.cb-pose .cb-check{flex-direction:row;align-items:center;font-size:11px}.cb-pose>small{font-size:10px;line-height:1.4;color:var(--ui-muted,#7e96a3);align-self:center}.cb-library{display:flex;flex-direction:column;min-height:0}.cb-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;border-radius:11px;background:var(--ui-paper,#e9f1f5);padding:4px;flex:none}.tc-builder .cb-tabs button{min-height:33px;padding:5px 2px;background:transparent;border:none;font-size:11px}.tc-builder .cb-tabs button[aria-pressed=true]{background:var(--ui-card,#fff);box-shadow:0 2px 6px #20475815;color:var(--ui-accent,#087e94);font-weight:850}.cb-search{display:grid;grid-template-columns:1fr 120px;gap:8px;margin:12px 0;flex:none}.cb-catalogue{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:9px;min-height:0;flex:1}.tc-builder .cb-tile{position:relative;display:flex;flex-direction:column;align-items:center;padding:8px 5px;background:var(--ui-card,#fff);border:1px solid var(--ui-line,#d9e5ec);border-radius:14px;overflow:hidden;text-align:center;min-height:0;gap:3px}.tc-builder .cb-tile[aria-pressed=true]{border:2px solid #0e98ad;background:var(--ui-paper,#eaf8fa);padding:7px 4px}.tc-builder .cb-tile:hover{background:var(--ui-paper,#f0fafb)}.cb-tile-art{display:grid;place-items:center;flex:1;width:100%;min-height:0;position:relative}.cb-tile-art :is(canvas,img){width:100%;height:100%;max-height:150px;object-fit:contain}.cb-tile-art .tc-medal{width:74px;height:74px}.cb-tile b{font-size:11px;font-weight:800}.cb-tile>small{color:var(--ui-muted,#77939f);font-size:9px;line-height:1.35;max-height:25px;overflow:hidden}.cb-tile>i{font-style:normal;font-size:8px;letter-spacing:.03em;color:var(--ui-accent,#258575);background:var(--ui-paper,#e5f7f0);padding:2px 7px;border-radius:6px}.cb-tile.is-locked>i{color:var(--ui-muted,#8b829c);background:var(--ui-paper,#edeaf4)}.cb-tile.is-locked .cb-tile-art{filter:saturate(.65);opacity:.8}.cb-preview-status{position:absolute;inset:auto 0 0;font-size:8px;color:var(--ui-muted,#74919a)}.cb-preview-status:empty{display:none}.cb-preview-status button{font-size:8px!important;padding:2px!important;min-height:22px!important}.cb-pages{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex:none;font-size:11px;color:var(--ui-muted,#6b8a9b)}.tc-builder .cb-pages button{padding:0 12px;min-height:30px;font-size:20px}.cb-empty{grid-column:1/-1;align-self:center;text-align:center;color:var(--ui-muted,#8a9ba6);font-size:12px}.tc-builder>footer{flex:none;gap:9px;margin-top:14px;padding-top:12px;flex-wrap:wrap}.cb-privacy{display:flex;flex-direction:column;gap:6px;margin-right:auto}.cb-privacy label{display:flex;gap:6px;align-items:center;font-size:10px;color:var(--ui-muted,#638291)}.cb-privacy input,.cb-check input{accent-color:#008d9e;width:15px;height:15px;margin:0}.tc-builder>footer>span{flex:1;max-width:270px}.tc-builder [data-cb-save]{background:#09869b;color:#fff;border:0;font-weight:800;white-space:nowrap}.cb-mobile-nav{display:none}@media(max-height:700px) and (min-width:641px){dialog.tc-studio.tc-builder{padding:12px!important}.cb-preview .tc-scene{height:210px}.tc-builder .tc-studio-top{margin-bottom:8px}.cb-object-list{margin:6px 0}.tc-builder>footer{margin-top:8px;padding-top:8px}.cb-catalogue{gap:6px}.cb-tile-art :is(canvas,img){max-height:125px}}@media(max-width:640px){dialog.tc-studio.tc-builder{width:calc(100vw - 4px)!important;height:calc(100dvh - 8px)!important;max-height:calc(100dvh - 8px)!important;padding:6px!important;border-radius:17px!important}.tc-builder .tc-studio-top{margin-bottom:8px}.tc-builder .tc-studio-top h2{font-size:18px}.cb-mobile-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:10px}.tc-builder .cb-mobile-nav button{min-height:30px;padding:3px}.tc-builder .cb-mobile-nav [aria-pressed=true]{color:#fff;background:#168da0;border-color:#168da0}.cb-layout{grid-template-columns:1fr;gap:0}.tc-builder[data-mobile-view=scene] .cb-library,.tc-builder[data-mobile-view=settings] .cb-library,.tc-builder[data-mobile-view=catalogue] .cb-workspace,.tc-builder[data-mobile-view=scene] .cb-properties,.tc-builder[data-mobile-view=settings] .cb-preview,.tc-builder[data-mobile-view=settings] .cb-budget{display:none}.cb-preview .tc-scene{height:clamp(160px,30dvh,260px)}.cb-catalogue{gap:7px}.cb-tile-art :is(canvas,img){max-height:160px}.cb-search{margin:9px 0}.cb-properties{padding-top:6px}.tc-builder>footer{margin-top:8px;padding-top:8px}.tc-builder>footer>span{display:none}.tc-builder [data-cb-save]{font-size:11px;padding:7px 9px}.cb-privacy label{font-size:9px}}@media(max-height:430px) and (min-width:641px){dialog.tc-studio.tc-builder{padding:9px!important}.tc-builder .tc-studio-top h2{font-size:17px}.cb-layout{gap:12px}.cb-workspace{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cb-preview .tc-scene{height:100%;min-height:160px}.cb-preview>small{display:none}.cb-object-list{display:none}.cb-properties{border:0;padding:0}.cb-catalogue{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.cb-tile-art :is(canvas,img){max-height:64px}.tc-builder .cb-tile{padding:3px}.cb-tile>small{display:none}.cb-tabs{padding:2px}.tc-builder .cb-tabs button{min-height:24px;font-size:10px}.cb-search{margin:5px 0}.cb-search :is(input,select){height:27px}.cb-pages{margin-top:5px}.cb-pages span{font-size:9px}.tc-builder>footer{padding-top:5px;margin-top:5px}.cb-privacy{flex-direction:row}.tc-builder>footer>span{display:none}}@media(prefers-reduced-motion:reduce){.tc-object-motion{animation:none!important}}.tc-builder [hidden]{display:none!important}.cb-property-tabs{display:flex;gap:5px;margin-bottom:9px}.tc-builder .cb-property-tabs button{min-height:27px;padding:3px 9px;font-size:10px}.tc-builder .cb-property-tabs [aria-pressed=true]{background:var(--ui-soft,#daf1f4);border-color:#0796a7;color:var(--ui-accent,#06788b)}.cb-pose{margin-top:0;padding-top:0;border-top:0}@media(max-width:640px) and (max-height:650px){.cb-preview .tc-scene{height:135px}.cb-preview>small{display:none}.cb-object-list{margin:6px 0}.cb-properties>header{margin-bottom:5px}.cb-properties label{font-size:10px}.cb-position,.cb-pose{gap:4px 9px}.cb-properties input[type=range]{height:17px}.cb-privacy{gap:3px}.tc-builder>footer{flex-wrap:nowrap}.tc-builder [data-cb-save]{font-size:10px;white-space:normal;width:108px}.tc-builder .cb-property-tabs button{min-height:23px;padding:2px 6px}.cb-property-tabs{margin-bottom:5px}}.tc-gift-dialog{width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid var(--ui-line,#d7e7ef);border-radius:22px;padding:22px;color:var(--ui-ink,#234a60);background:var(--ui-card,#f9fcff);box-shadow:0 22px 80px #16375355}.tc-gift-dialog::backdrop{background:#15384c77}.tc-gift-dialog header{display:flex;align-items:center;justify-content:space-between}.tc-gift-dialog h2{font-size:22px;margin:5px 0}.tc-gift-dialog header small{font-size:10px;color:var(--ui-muted,#6c899a)}.tc-gift-dialog button{min-width:44px;min-height:44px;border:1px solid var(--ui-line,#ccdee7);background:var(--ui-soft,white);border-radius:12px;color:var(--ui-ink,#285269);padding:10px;cursor:pointer}.tc-gift-dialog button:disabled{opacity:.45;cursor:default}.tc-gift-wallet,.tc-gift-dialog [role=status]{font-size:12px;color:var(--ui-muted,#658795);margin:14px 0}.tc-gift-catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tc-gift-catalog button{display:flex;flex-direction:column;align-items:center;gap:5px}.tc-gift-catalog img{width:64px;height:64px;object-fit:contain}.tc-gift-catalog b{font-size:11px}.tc-gift-catalog small{font-size:11px}.tc-gift-confirm{text-align:center}.tc-gift-confirm img{width:128px;height:128px;object-fit:contain}.tc-gift-confirm p{font-size:14px;line-height:1.5}.tc-gift-confirm [data-gift-send]{background:var(--ui-primary,#07879b);color:var(--ui-on-accent,#fff);margin-right:8px}.tc-gift-dialog .tc-gem-icon{width:16px;height:16px;object-fit:contain;display:inline-block;vertical-align:middle;margin-right:3px}.tc-gift-capacity{font-size:11px;line-height:1.5;background:var(--ui-paper,#eaf5f8);color:var(--ui-muted,#5a7d8d);padding:10px;border-radius:9px}.cb-header-tools{display:flex;gap:6px}.tc-builder .cb-header-tools button{display:grid;place-items:center;width:36px;height:36px;padding:7px;font-size:14px}.tc-builder [data-cb-random]{background:var(--ui-soft,#e0f3f5);border-color:var(--ui-line,#9dd2dc);color:var(--ui-accent,#087b90)}.cb-budget{display:flex;align-items:center;gap:8px;min-height:30px;flex:none;font-size:10px;color:var(--ui-muted,#648494)}.cb-budget b{color:var(--ui-ink,#24637a)}.cb-budget meter{height:7px;flex:1;min-width:35px;accent-color:#148a9d}.tc-builder .cb-budget button{display:flex;align-items:center;gap:4px;padding:0;border:0;background:none;min-height:28px;font-size:11px}.cb-budget button svg{width:15px;height:15px}.cb-position-v273{grid-template-columns:126px minmax(0,1fr);gap:15px;align-items:center}.cb-nudge{display:grid;grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,38px);gap:4px}.tc-builder .cb-nudge button{display:grid;place-items:center}.tc-builder .cb-nudge [data-cb-center]{background:var(--ui-soft,#e2f4f6);border-color:var(--ui-line,#b0d9df)}.cb-sizing{display:grid;gap:7px}.cb-sizing label>b{float:right;color:var(--ui-accent,#177c92)}.cb-stepper{display:flex;align-items:center;gap:7px}.tc-builder .cb-stepper button{padding:4px;display:grid;place-items:center}.cb-stepper input{min-width:30px}.cb-sizing .cb-snap{flex-direction:row;align-items:center;font-size:9px;gap:6px}.cb-playback{display:flex;gap:6px;grid-column:1/-1}.tc-builder .cb-playback button{min-height:33px;display:flex;align-items:center;justify-content:center;gap:6px;flex:1;font-size:11px;padding:5px}.cb-frame-track{display:flex;flex-wrap:wrap;gap:4px;grid-column:1/-1}.tc-builder .cb-frame-track button{min-width:30px;min-height:30px;padding:3px 8px;font-size:11px}.tc-builder .cb-frame-track [aria-pressed=true]{background:#12879b;color:white;border-color:#12879b}.cb-pose-v273>small{grid-column:1/-1}.tc-builder .cb-properties>header button{display:flex;align-items:center;gap:4px}.tc-builder .cb-properties>header svg{width:14px;height:14px}.tc-builder>footer [role=status]{overflow-wrap:anywhere;line-height:1.4}.cb-budget meter{appearance:none;background:var(--ui-soft,#e0edf0);border-radius:5px;overflow:hidden}@media(max-width:640px){.cb-header-tools{gap:4px}.tc-builder .cb-header-tools button{width:32px;min-height:34px;height:34px;padding:6px}.tc-builder .tc-studio-top h2{font-size:17px}.tc-builder .tc-studio-top small{font-size:7px;letter-spacing:.06em}.cb-position-v273{grid-template-columns:126px minmax(0,1fr);gap:12px}.cb-preview .tc-scene{height:clamp(150px,27dvh,230px)}.tc-builder>footer{display:grid;grid-template-columns:1fr auto;gap:6px}.tc-builder>footer>span{display:block;grid-column:1/-1;grid-row:2;max-width:none;font-size:9px;min-height:13px}.tc-builder [data-cb-save]{grid-column:2;grid-row:1}.cb-privacy{grid-column:1;grid-row:1}.cb-budget{font-size:9px}.cb-object-list{gap:4px}.cb-object-list select{font-size:10px}.tc-builder .cb-object-list button{font-size:10px}}@media(max-width:640px) and (max-height:650px){.cb-preview .tc-scene{height:114px}.cb-mobile-nav{margin-bottom:6px}.tc-builder .tc-studio-top{margin-bottom:5px}.cb-position-v273{grid-template-columns:108px minmax(0,1fr);gap:8px}.cb-nudge{grid-template-columns:repeat(3,32px);grid-template-rows:repeat(3,32px);gap:3px}.tc-builder .cb-nudge button{min-height:32px}.cb-sizing{gap:4px}.cb-budget{min-height:25px}.cb-object-list{margin:4px 0}.cb-properties{padding-top:4px}.tc-builder .cb-object-list button{min-height:30px}.cb-sizing .cb-snap{font-size:8px}.cb-pose-v273{gap:4px}.cb-pose-v273>small{display:none}.cb-frame-track{gap:3px}.tc-builder .cb-frame-track button{min-height:26px;min-width:26px;padding:2px 5px}.tc-builder .cb-playback button{min-height:29px;font-size:10px}.cb-properties :is(select,input[type=number]){height:29px}.tc-builder>footer{margin-top:5px;padding-top:5px}.cb-properties>header{display:none}}@media(max-height:430px) and (min-width:641px){.cb-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) 25px;gap:6px}.cb-preview{grid-column:1;grid-row:1}.cb-budget{grid-column:1;grid-row:2}.cb-properties{grid-column:2;grid-row:1/-1}.cb-preview .tc-scene{height:100%;min-height:0}.cb-object-list{display:none}.cb-position-v273{display:flex;flex-direction:column;gap:5px}.cb-nudge{grid-template-columns:repeat(3,26px);grid-template-rows:repeat(3,26px);gap:2px}.tc-builder .cb-nudge button{min-height:26px;padding:2px}.cb-sizing{gap:4px;width:100%}.cb-sizing .cb-snap{display:none}.cb-properties>header{display:none}.cb-property-tabs{gap:2px}.tc-builder .cb-property-tabs button{font-size:8px;padding:2px 3px;min-height:25px}.cb-properties label{font-size:9px}.cb-pose-v273{gap:4px}.cb-playback{flex-wrap:wrap}.tc-builder .cb-playback button{font-size:9px;min-height:26px}.cb-pose-v273>small{display:none}.tc-builder .cb-frame-track button{min-height:25px;min-width:25px;padding:2px}.tc-builder>footer>span{display:block;max-width:220px;font-size:8px}.cb-header-tools button{height:30px!important;min-height:30px!important}}@media(max-height:430px) and (min-width:641px){.cb-mobile-nav{display:flex;gap:5px;position:absolute;left:42%;top:10px;transform:translateX(-50%);margin:0}.tc-builder .cb-mobile-nav button{min-height:30px;height:30px;padding:3px 14px;font-size:11px}.tc-builder .cb-mobile-nav [aria-pressed=true]{background:#14879a;color:white;border-color:#14879a}.cb-layout{grid-template-columns:1fr}.tc-builder[data-mobile-view=scene] .cb-library,.tc-builder[data-mobile-view=catalogue] .cb-workspace{display:none}.cb-workspace{grid-template-columns:1fr 1fr;grid-template-rows:34px minmax(0,1fr) 25px;gap:6px 14px}.cb-preview{grid-column:1;grid-row:1/3}.cb-budget{grid-column:1;grid-row:3}.cb-object-list{display:grid;grid-column:2;grid-row:1;margin:0}.cb-properties{grid-column:2;grid-row:2/4}.cb-position-v273{display:grid;grid-template-columns:126px 1fr;gap:12px}.cb-nudge{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,38px);gap:4px}.tc-builder .cb-nudge button{min-height:38px}.cb-property-tabs{margin-bottom:7px}.tc-builder .cb-property-tabs button{font-size:10px;padding:3px 9px;min-height:29px}.cb-properties label{font-size:11px}.cb-pose-v273{gap:5px 10px}.tc-builder .cb-playback button{font-size:11px;min-height:30px}.cb-catalogue{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.tc-builder .cb-tile{display:grid;grid-template-columns:68px 1fr;grid-template-rows:1fr auto;gap:3px 6px;padding:6px 10px;text-align:left}.cb-tile-art{grid-column:1;grid-row:1/-1;height:100%;max-height:76px}.cb-tile-art :is(canvas,img){max-height:76px}.cb-tile b{font-size:12px;align-self:end}.cb-tile>i{justify-self:start;align-self:start}.cb-tile-art .tc-medal{width:52px;height:52px}}@media(min-width:641px) and (min-height:431px){.tc-builder .cb-preview .tc-scene{height:215px}}@media(min-width:641px) and (min-height:431px) and (max-height:760px){.tc-builder .cb-preview .tc-scene{height:180px}}.tc-builder .cb-properties{overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column;gap:0}.tc-builder .cb-position-v273{grid-template-columns:108px minmax(0,1fr);gap:7px 12px;align-items:start}.tc-builder .cb-nudge{grid-template-columns:repeat(3,32px);grid-template-rows:repeat(3,32px);gap:3px}.tc-builder .cb-nudge button{min-height:32px;padding:3px}.tc-builder .cb-sizing{gap:5px}.tc-builder .cb-sizing label{font-size:10px}.tc-builder .cb-stepper button{min-height:29px;min-width:29px}.tc-builder .cb-layers{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.tc-builder .cb-layer-choice{display:flex;align-items:center;gap:5px;min-height:41px;padding:4px 7px;text-align:left;background:var(--ui-paper,#f4f8fb)}.tc-builder .cb-layer-choice b{display:block;font-size:10px;line-height:1.1}.tc-builder .cb-layer-choice small{display:block;font-size:8px;line-height:1.1;color:var(--ui-muted,#668493)}.tc-builder .cb-layer-choice[aria-pressed=true]{background:var(--ui-soft,#e2f5f7);color:var(--ui-ink,#066e82);border-color:#30a2b2;box-shadow:inset 0 0 0 1px #71c7d2}.tc-layer-icon{display:block;flex:none;width:23px;height:22px;color:var(--ui-accent,#1590a4)}.tc-builder .cb-layer-custom{display:flex;align-items:center;gap:4px;min-height:41px;padding:3px 5px;border:1px solid var(--ui-line,#d5e5eb);border-radius:10px;background:var(--ui-paper,#f4f8fb);color:var(--ui-ink,#28576c)}.tc-builder .cb-layer-custom[data-active=true]{border-color:#30a2b2;background:var(--ui-soft,#e2f5f7)}.tc-builder .cb-layer-custom span{font-size:9px;line-height:1.1}.tc-builder .cb-layer-custom select{display:block;width:100%;height:19px;min-height:0;padding:0 2px;border:0;background:transparent;font-size:9px;line-height:1}.tc-builder .cb-pose-v273{align-content:start;grid-template-columns:repeat(2,minmax(0,1fr))}.tc-builder .cb-pose-v273>.cb-playback,.tc-builder .cb-pose-v273>.cb-frame-track{grid-column:1/-1}.tc-builder .cb-cycle-range{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.tc-builder .cb-mon-settings{display:grid;align-content:start;gap:10px;padding:7px 2px}.tc-builder .cb-mon-settings label{display:flex;flex-direction:row;align-items:center;gap:9px;font-size:12px;color:var(--ui-ink,#315c70)}.tc-builder .cb-mon-settings input{width:17px;height:17px;accent-color:#078a9d}.tc-builder .cb-mon-settings p{font-size:10px;line-height:1.35;color:var(--ui-muted,#75909b)}.tc-builder .cb-library[data-category=backgrounds] .cb-tile-art{overflow:hidden;border-radius:9px}.tc-builder .cb-library[data-category=backgrounds] .cb-tile-art img{display:block;width:100%;height:100%;max-height:none;object-fit:cover}.tc-mon-summary{position:absolute;right:10px;top:42px;z-index:14;width:min(174px,47%);padding:7px 8px;border:1px solid var(--ui-line,#c8e6ee);border-radius:12px;background:#f8fdffee;box-shadow:0 5px 17px #1b537a32;pointer-events:none;color:var(--ui-ink,#21475e);backdrop-filter:blur(4px)}.tc-mon-summary-head{display:flex;justify-content:space-between;align-items:baseline;gap:3px}.tc-mon-summary-head b{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-mon-summary-head small{font-size:9px;white-space:nowrap;color:var(--ui-accent,#0f8aa2)}.tc-mon-types{display:flex;gap:4px;margin:2px 0 4px}.tc-mon-types span{display:flex;align-items:center;gap:2px;font-size:8px;white-space:nowrap}.tc-mon-types img{width:14px;height:14px;object-fit:contain}.tc-mon-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;border-top:1px solid var(--ui-line,#d6e9ee);padding-top:3px}.tc-mon-stats span{display:grid;text-align:center}.tc-mon-stats small{font-size:7px;color:var(--ui-muted,#66818f)}.tc-mon-stats b{font-size:11px}.cb-preview .tc-mon-summary{top:5px;right:5px;padding:4px 5px;transform:scale(.82);transform-origin:top right}@media(max-width:640px){.tc-builder .cb-layer-choice{min-height:34px;padding:3px 5px}.tc-builder .cb-layer-choice small{display:none}.tc-builder .cb-layer-custom{min-height:34px;padding:2px 3px}.tc-builder .cb-layer-custom span{font-size:8px}.tc-builder .cb-layer-custom select{height:16px;font-size:8px}.tc-builder .cb-layers{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.tc-builder .cb-layer-choice{justify-content:center;gap:2px}.tc-builder .cb-layer-choice b{font-size:8px}.tc-layer-icon{width:19px;height:19px}.tc-builder .cb-position-v273{grid-template-columns:100px minmax(0,1fr);gap:5px 8px}.tc-builder .cb-nudge{grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px);gap:2px}.tc-builder .cb-nudge button{min-height:30px}.tc-builder .cb-property-tabs{margin-bottom:5px}.tc-builder .cb-budget{gap:4px}.tc-builder .cb-budget>span{font-size:8px}.tc-mon-summary{width:min(154px,48%);padding:5px 6px}.tc-mon-types span{font-size:7px}}@media(max-height:430px) and (min-width:641px){.tc-builder .cb-position-v273{grid-template-columns:82px minmax(0,1fr);gap:2px 6px}.tc-builder .cb-nudge{grid-template-columns:repeat(3,25px);grid-template-rows:repeat(3,25px);gap:2px}.tc-builder .cb-nudge button{min-height:25px}.tc-builder .cb-layer-choice{min-height:30px;padding:2px 4px}.tc-builder .cb-layer-choice small{display:none}.tc-builder .cb-pose-v273{gap:3px 6px}.tc-builder .cb-playback button{min-height:26px}.tc-builder .cb-frame-track button{min-height:23px;min-width:23px}}@media(max-width:360px) and (max-height:650px){.tc-builder .cb-frame-track{gap:2px;flex-wrap:nowrap}.tc-builder .cb-frame-track button{min-width:0;width:20px;min-height:23px;padding:0;font-size:9px;flex:1}}.tc-scene-composed .tc-object{transform:translate(-50%,-100%) scaleX(var(--tc-mirror,1)) scale(var(--tc-scale,1))}.tc-builder .cb-preview{display:flex;flex-direction:column;align-items:center;min-width:0}.tc-builder .cb-preview .tc-scene{flex:none;max-width:100%;max-height:none;background-size:cover}.tc-builder .cb-preview>small{max-width:100%}.tc-scene-composed .tc-pokemon-object{overflow:visible}.tc-scene-composed{container-type:inline-size}.tc-scene-composed>.tc-pokemon-label{position:absolute;z-index:14;transform:translateX(-50%);display:flex;align-items:center;gap:2px;width:max-content;max-width:min(78px,18cqw);white-space:nowrap;overflow:hidden;padding:3px 5px;border-radius:9px;background:#fffffff0;border:1px solid #ffffffa0;font-size:10px;font-weight:800;line-height:1.2;color:var(--ui-ink,#285269);box-shadow:0 2px 7px #15384a25;pointer-events:none}.tc-scene-composed>.tc-pokemon-label>span{min-width:0;overflow:hidden;text-overflow:ellipsis}.tc-scene-composed>.tc-pokemon-label>b{flex:none;font-size:.85em}.tc .tc-pokemon-info,.tc-builder .tc-pokemon-info{position:absolute;z-index:15;display:grid;place-items:center;width:25px;height:25px;min-height:25px;padding:0;border:1px solid var(--ui-line,#b7d9e5);border-radius:50%;background:#f8fdffff;color:var(--ui-accent,#13839d);font:800 14px/1 Georgia,serif;box-shadow:0 2px 7px #15384a35;cursor:help}.tc .tc-pokemon-info:hover,.tc-builder .tc-pokemon-info:hover{background:var(--ui-soft,#e0f4f8)}.tc-tooltip.tc-tooltip-card{white-space:normal;line-height:1.3}.tc-tip-title{display:block;color:var(--ui-ink,#164c65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-tip-types{display:block;margin:2px 0 7px;color:var(--ui-muted,#5c8397);font-size:10px}.tc-tip-stats{display:grid}.tc-tip-stats span{align-items:baseline;justify-content:center;min-width:0;border-radius:7px;white-space:nowrap}.tc-tip-stats small{color:var(--ui-muted,#608596)}.tc-tip-stats b{color:var(--ui-accent,#23627c)}.tc-tip-extra{display:block;border-top:1px solid var(--ui-line,#dfebef);margin-top:7px;padding-top:6px;color:var(--ui-muted,#628394)}.tc-builder .cb-tabs button{display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}.tc-builder .cb-tabs svg{width:15px;height:15px;color:var(--ui-accent,#21849b)}.cb-subtabs{display:flex;gap:4px;margin-top:6px;flex:none;min-height:28px}.tc-builder .cb-subtabs button{flex:1;min-height:27px;padding:3px 4px;font-size:10px}.tc-builder .cb-subtabs [aria-pressed=true]{background:var(--ui-soft,#dff2f6);border-color:#62b7c6;color:var(--ui-accent,#087a91);font-weight:800}.tc-builder .cb-properties h3 small{font-size:10px;font-weight:650;color:var(--ui-muted,#6f91a0)}.tc-builder .cb-mirror{display:flex;flex-direction:row;align-items:center;gap:5px;font-size:10px;color:var(--ui-muted,#376577)}.tc-builder .cb-mirror svg{width:16px;height:16px}.tc-builder .cb-snap{display:flex;flex-direction:row;align-items:center}.tc-builder .cb-cycle-range{display:flex;gap:8px;justify-content:flex-start;align-items:end}.tc-builder .cb-cycle-range label{width:76px;flex:none}.tc-builder .cb-cycle-range select{width:76px;height:28px;padding:2px 5px}.tc-builder .cb-privacy{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:3px 12px}.tc-builder .cb-privacy label{white-space:nowrap}.tc-builder .cb-budget>span{white-space:normal;line-height:1.25}@media(max-width:640px){.tc-builder .cb-preview .tc-scene{max-height:none}.tc-builder .cb-tabs button{gap:2px;font-size:9px}.tc-builder .cb-tabs svg{width:13px;height:13px}.tc-builder .cb-subtabs button{font-size:9px}.tc-builder .cb-cycle-range label,.tc-builder .cb-cycle-range select{width:64px}.tc-builder .cb-privacy{gap:2px 8px}.tc-builder .cb-privacy label{font-size:9px}}@media(max-height:650px){.tc-builder .cb-budget{min-height:22px}.tc-builder .cb-privacy label{font-size:8px}}@media(max-width:640px) and (max-height:650px){.tc-builder[data-mobile-view=settings] .cb-properties>header{display:flex}}@media(max-height:430px) and (min-width:641px){.tc-builder .cb-preview .tc-scene{max-height:245px}}@media(max-width:640px) and (max-height:650px){.tc-builder .cb-preview .tc-pokemon-info{width:17px;height:17px;min-height:17px;font-size:10px}.tc-builder .cb-preview .tc-pokemon-label{font-size:8px;padding:1px 3px}.tc-builder .cb-tabs button{font-size:8px;padding:2px 0;gap:1px}.tc-builder .cb-tabs svg{width:11px;height:11px}.tc-builder .cb-tile{justify-content:flex-start;gap:2px;padding:4px 2px}.tc-builder .cb-tile .cb-tile-art{flex:0 0 59px;height:59px;max-height:59px}.tc-builder .cb-tile-art :is(canvas,img){width:100%;height:59px;max-height:59px;object-fit:contain}.tc-builder .cb-tile b{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;line-height:1.1}.tc-builder .cb-tile>small{max-height:12px;font-size:8px;line-height:1.1}.tc-builder .cb-tile>i{font-size:7px;padding:1px 3px;white-space:nowrap}}.tc-builder .cb-weight{display:inline-flex;align-items:center;justify-content:center;border-radius:7px;font:800 10px/1 system-ui;white-space:nowrap}.tc-builder .cb-weight svg,.tc-builder .cb-budget-total svg{width:14px;height:14px;flex:none}.tc-builder .cb-budget-total{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.tc-builder .cb-tile .cb-weight{margin-top:auto}.tc-builder .cb-tile.is-locked .cb-weight{background:var(--ui-paper,#edeaf4);color:var(--ui-muted,#817896)}.tc-builder .cb-properties>header .cb-weight{flex:none}.tc-builder .cb-cycle-range{min-width:0;padding:2px 3px 4px;overflow:visible}.tc-builder .cb-cycle-range label{min-width:0}.tc-builder .cb-cycle-range select{box-sizing:border-box;max-width:100%}@media(max-width:640px){.tc-builder .cb-cycle-range{gap:12px;padding-inline:5px}.tc-builder .cb-cycle-range label,.tc-builder .cb-cycle-range select{width:72px}}@media(min-width:641px) and (min-height:431px){.tc-builder .cb-properties>header{margin-bottom:5px}.tc-builder .cb-position-v273{gap:4px 10px}.tc-builder .cb-nudge{grid-template-columns:repeat(3,29px);grid-template-rows:repeat(3,29px);gap:2px}.tc-builder .cb-nudge button{min-height:29px}.tc-builder .cb-layer-choice,.tc-builder .cb-layer-custom{min-height:34px}.tc-builder .cb-motion-label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;margin-top:3px;white-space:nowrap}.tc-builder .cb-motion-label select{height:29px}}.tc-scene-composed .tc-pokemon-object{transform:translate(-50%,-100%) scale(var(--tc-scale,1))}.tc-scene-composed .tc-pokemon-object canvas{transform:scaleX(var(--tc-mirror,1))}.tc-pokemon-object>.tc-pokemon-label{position:absolute;z-index:2;left:50%;bottom:-7px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;max-width:140px;white-space:nowrap;padding:3px 6px;border-radius:9px;background:#fffffff0;color:var(--ui-ink,#23576b);box-shadow:0 2px 7px #15384a25;font-size:10px;line-height:1.2;pointer-events:none}.tc-pokemon-label>span{overflow:hidden;text-overflow:ellipsis}.tc-pokemon-label>b{flex:none;font-size:9px}.tc .tc-pokemon-object>.tc-pokemon-info,.tc-builder .tc-pokemon-object>.tc-pokemon-info{left:auto;top:3%;right:6%;z-index:3;cursor:pointer}.tc-tooltip.tc-tooltip-card{width:min(300px,calc(100vw - 16px));padding:13px;border-radius:17px}.tc-tip-title{font-size:14px}.tc-tip-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.tc-tip-stats span{display:grid;gap:2px;padding:7px 3px;background:var(--ui-paper,#e8f3f7)}.tc-tip-stats b{font-size:16px}.tc-tip-stats small{font-size:9px}.tc-tip-measurements{margin-top:8px;color:var(--ui-muted,#3d8094);font-size:11px}.tc-tip-extra{font-size:11px;line-height:1.45}.tc-builder .cb-weight{min-height:25px;font-size:12px;padding:2px 7px;gap:5px;background:var(--ui-paper,#eaf5f8);color:var(--ui-ink,#286175)}.cb-weight img,.cb-budget-total img{width:23px;height:23px;object-fit:contain}.tc-builder .cb-budget{gap:7px}.tc-builder .cb-budget meter{flex:1;min-width:40px;height:10px}.cb-budget meter::-webkit-meter-bar{background:var(--ui-soft,#deebef);border:0;border-radius:6px}.cb-budget meter::-webkit-meter-optimum-value{background:#1894a5;border-radius:6px}.cb-budget[data-load=near] meter::-webkit-meter-optimum-value{background:#e5a630}.cb-budget[data-load=full] meter::-webkit-meter-optimum-value{background:#e24e60}.cb-budget meter::-moz-meter-bar{background:#1894a5}.cb-budget[data-load=near] meter::-moz-meter-bar{background:#e5a630}.cb-budget[data-load=full] meter::-moz-meter-bar{background:#e24e60}.tc-builder [data-cb-capacity]{display:flex;align-items:center;gap:3px;padding:2px 5px;min-height:28px;font-size:11px;flex:none}[data-cb-capacity] img{width:24px;height:24px;object-fit:contain}[data-cb-capacity] small{font-size:9px}.tc-builder .cb-visual-choice{grid-column:1/-1}.tc-gift-catalog .tc-animated-gift{width:64px;height:64px;flex:none}.tc-gift-confirm>.tc-animated-gift{width:128px;height:128px;margin:0 auto}.tc-collection-pages{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:10px}@media(max-height:600px){.tc-gift-dialog{padding:12px}.tc-gift-catalog img,.tc-gift-catalog .tc-animated-gift{width:44px;height:44px}.tc-gift-dialog h2{font-size:18px}.tc-gift-wallet,.tc-gift-dialog [role=status]{margin:7px 0}.tc-gift-confirm>img,.tc-gift-confirm>.tc-animated-gift{width:80px;height:80px}}.tc-builder .cb-pose-v273{gap:6px}.tc-builder .cb-tile-art .tc-badge-art{width:100%;height:100%;object-fit:contain}.cb-tile-art .tc-animated-gift{width:86px;height:86px;max-width:100%;margin:auto}@media(max-height:650px){.tc-builder .cb-weight{min-height:20px;font-size:10px}.cb-weight img,.cb-budget-total img{width:19px;height:19px}.tc-builder .cb-pose-v273{gap:3px}.tc-builder .cb-visual-choice select{height:26px}}@media(max-height:430px) and (min-width:641px){.tc-builder .cb-property-tabs{margin-bottom:4px}.tc-builder .cb-pose-v273{gap:2px}.tc-builder .cb-pose-v273 label{gap:2px}.tc-builder .cb-cycle-range{padding-block:0}}@media(min-width:641px) and (min-height:431px) and (max-height:760px){.tc-builder .cb-pose-v273:has(.cb-visual-choice){grid-template-columns:repeat(3,minmax(0,1fr))}.tc-builder .cb-pose-v273 .cb-visual-choice{grid-column:auto}.tc-builder .cb-pose-v273{gap:3px}.tc-builder .cb-properties>header{margin-bottom:5px}.tc-builder .cb-property-tabs{margin-bottom:5px}}.cb-background-theme{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin:0 0 9px;color:var(--ui-ink,#234a60);font:12px system-ui}.cb-background-theme select{width:100%;min-width:0;min-height:44px;padding:8px 11px;border:1px solid var(--ui-line,#cddfe8);border-radius:10px;background:var(--ui-card,#fff);color:inherit;font:inherit}.cb-background-theme select:focus-visible{outline:2px solid var(--ui-accent,#0a9ab4);outline-offset:2px}@media(max-height:600px){.cb-background-theme{margin-bottom:5px}.cb-background-theme select{min-height:36px;padding:5px 9px}}@media(pointer:coarse){.cb-background-theme select{min-height:44px}}@media(max-width:640px) and (max-height:650px){.tc-builder .cb-library[data-category=backgrounds] .cb-tile .cb-tile-art{flex-basis:48px;height:48px;max-height:48px}.tc-builder .cb-library[data-category=backgrounds] .cb-tile>b,.tc-builder .cb-library[data-category=backgrounds] .cb-tile>small,.tc-builder .cb-library[data-category=backgrounds] .cb-tile>.cb-weight{flex-shrink:0}}.cb-background-card{display:grid;grid-template-rows:minmax(0,1fr) 44px;gap:4px;min-width:0;min-height:0}.tc-builder .cb-background-card>.cb-tile{width:100%;height:100%}.cb-votes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;min-width:0}.tc-builder .cb-vote{display:flex;align-items:center;justify-content:center;gap:5px;height:44px;min-height:44px;padding:3px;min-width:0;border:1px solid var(--ui-line,#cddfe8);border-radius:10px;background:var(--ui-card,#fff);color:var(--ui-ink,#234a60);font:700 12px system-ui;box-shadow:none}.cb-vote svg{width:18px;height:18px;flex:none}.cb-vote[data-background-vote="-1"] svg{transform:rotate(180deg)}.tc-builder .cb-vote[aria-pressed=true]{color:#076746;background:#ddf8ed;border-color:#188466}.tc-builder .cb-vote[data-background-vote="-1"][aria-pressed=true]{color:#952f44;background:#ffe6ec;border-color:#bb4e68}.tc-builder .cb-vote:focus-visible{outline:3px solid var(--ui-accent,#07879b);outline-offset:1px}.tc-builder .cb-vote:disabled{opacity:.65;cursor:default}.tc-builder .cb-vote span{overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}.cb-vote-status{flex:none;min-height:15px;margin:5px 0 0;font-size:10px;line-height:1.3;color:var(--ui-muted,#648391)}@media(max-height:430px) and (min-width:641px){.cb-library[data-category=backgrounds] .cb-catalogue{grid-template-rows:repeat(2,minmax(100px,1fr));overflow-y:auto;overscroll-behavior:contain}.cb-library[data-category=backgrounds] .cb-tile-art{min-height:40px}.cb-vote-status{font-size:9px;margin-top:3px}}@media(max-width:360px){.cb-library[data-category=backgrounds] .cb-catalogue{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(128px,1fr));overflow-y:auto;overscroll-behavior:contain}.cb-library[data-category=backgrounds] .cb-tile-art{min-height:48px}.cb-vote-status{font-size:9px}}:root :is(#sidePanel.is-trainer-card,#chatPanel,.tc-studio,.tc-gift-dialog,.tc-tooltip){--ui-card:#fff;--ui-paper:#f4f7fb;--ui-soft:#edf2f7;--ui-hover:#e5edf6;--ui-line:#d7e0eb;--ui-ink:#172536;--ui-muted:#607188;--ui-accent:#1768c5;--ui-primary:#1768c5;--ui-positive:#167a57;--ui-on-accent:#fff;color:var(--ui-ink);background:var(--ui-card);color-scheme:light}html[data-game-theme=dark] :is(#sidePanel.is-trainer-card,#chatPanel,.tc-studio,.tc-gift-dialog,.tc-tooltip){--ui-card:#171f2a;--ui-paper:#202b39;--ui-soft:#202b39;--ui-hover:#29384a;--ui-line:#314052;--ui-ink:#eef3f8;--ui-muted:#a4b1c2;--ui-accent:#5ba7ff;--ui-primary:#2869ad;--ui-positive:#45d6a0;--ui-on-accent:#fff;color-scheme:dark}#app #gameScreen #sidePanel.is-trainer-card.is-open{border-color:var(--ui-line)!important;background:var(--ui-card)!important;border-radius:22px!important}#sidePanel.is-trainer-card .tc{display:grid;grid-template-columns:1fr;overscroll-behavior:contain;scrollbar-width:thin;background:var(--ui-card);font-size:13px}#sidePanel.is-trainer-card .tc:has(>.tc-sheet){overflow:hidden}#sidePanel.is-trainer-card .tc .tc-scene{flex:none;background-position:center 65%}#sidePanel.is-trainer-card .tc .tc-body{display:flex;flex-direction:column;background:var(--ui-card);align-content:initial}#sidePanel.is-trainer-card .tc .tc-identity{display:flex;flex-direction:column;min-height:0}#sidePanel.is-trainer-card .tc .tc-name-row{gap:12px;align-items:center}.tc-name-group{flex:1;display:grid;gap:4px;min-width:0}#sidePanel.is-trainer-card .tc .tc-name-row h2{line-height:1.2;letter-spacing:-.025em}.tc-clan{display:flex;align-items:center;gap:6px;min-width:0;color:var(--ui-muted);font-size:12px}.tc-clan>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc .tc-clan svg{flex:none}.tc .tc-details-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}#sidePanel.is-trainer-card .tc .tc-clothing-entry{display:flex;align-items:center;gap:6px;min-height:44px;width:auto}#sidePanel.is-trainer-card .tc .tc-clothing-entry svg{width:20px;height:20px}#sidePanel.is-trainer-card .tc .tc-clothing-entry span{display:block}#sidePanel.is-trainer-card .tc .tc-clothing-entry small{display:inline;font-size:11px;margin-left:4px}#sidePanel.is-trainer-card .tc .tc-showcase{border-top:1px solid var(--ui-line);padding:0;background:transparent}#sidePanel.is-trainer-card .tc .tc-showcase>header{display:flex;align-items:center;justify-content:space-between;height:auto;min-height:44px;gap:6px}#sidePanel.is-trainer-card .tc .tc-showcase>header>.tc-shelf-actions{display:flex;align-items:center;gap:2px}#sidePanel.is-trainer-card .tc .tc-showcase h3{font-size:13px;color:var(--ui-ink);letter-spacing:0;text-transform:none}#sidePanel.is-trainer-card .tc .tc-showcase h3 small{font-size:12px}#sidePanel.is-trainer-card .tc :is(.tc-awards,.tc-gifts){display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}#sidePanel.is-trainer-card .tc :is(.tc-awards,.tc-gifts) button{background:var(--ui-soft)!important;border:0!important;border-radius:10px}#sidePanel.is-trainer-card .tc :is(.tc-awards,.tc-gifts) button:hover{background:var(--ui-hover)!important}#sidePanel.is-trainer-card .tc :is(.tc-badge-art,.tc-gifts img,.tc-gifts .tc-animated-gift){object-fit:contain}#sidePanel.is-trainer-card .tc .tc-gift-showcase.is-empty{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}#sidePanel.is-trainer-card .tc .tc-gift-showcase.is-empty .tc-gifts{display:none}#sidePanel.is-trainer-card .tc .tc-actions{display:flex;border-top:1px solid var(--ui-line)}#sidePanel.is-trainer-card .tc .tc-actions button{min-height:44px;height:auto;font-size:13px;flex:1}#sidePanel.is-trainer-card .tc .tc-actions button:first-child{background:var(--ui-primary);border-color:var(--ui-primary);color:#fff}.tc .tc-top{padding:12px 16px;height:68px;background:linear-gradient(#0f141c55,transparent)}#sidePanel.is-trainer-card .tc .tc-top button{width:44px;height:44px;min-height:44px;padding:11px;border-radius:12px;border-color:var(--ui-line);background:var(--ui-card);color:var(--ui-ink)}.tc .tc-sheet{background:var(--ui-card);color:var(--ui-ink)}.tc-studio.tc-builder,.tc-gift-dialog{background:var(--ui-card)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important}.tc-studio.tc-builder :is(button,input,select),.tc-gift-dialog button{background:var(--ui-paper);color:var(--ui-ink);border-color:var(--ui-line)}.tc-studio.tc-builder button:hover,.tc-gift-dialog button:hover{background:var(--ui-hover)}.tc-studio.tc-builder [data-cb-save]{background:var(--ui-primary);color:#fff}.tc-studio.tc-builder :is(.cb-property-tabs,.cb-tabs,.cb-subtabs) [aria-pressed=true]{background:var(--ui-soft);color:var(--ui-accent);border-color:var(--ui-accent)}.tc-studio.tc-builder .cb-tile{background:var(--ui-paper);border-color:var(--ui-line);color:var(--ui-ink)}.tc-studio.tc-builder .cb-tile[aria-pressed=true]{background:var(--ui-hover);border-color:var(--ui-accent)}.tc-studio.tc-builder .cb-tile-art{background:var(--ui-soft)}.cb-card-blocks{border-top:1px solid var(--ui-line);margin-top:12px;padding-top:6px;flex:none;color:var(--ui-ink)}.cb-card-blocks summary{min-height:44px;display:list-item;align-content:center;font-size:13px;font-weight:750;cursor:pointer}.cb-card-blocks p{font-size:12px;color:var(--ui-muted);margin:4px 0 10px}.cb-block-row{display:flex;align-items:center;gap:4px;min-height:48px;border-top:1px solid var(--ui-line)}.cb-block-row label{flex:1;display:flex;align-items:center;gap:8px;font-size:12px;min-height:44px;cursor:pointer}.cb-block-row input{width:17px;height:17px;accent-color:var(--ui-accent)}.tc-builder .cb-block-row button{width:44px;height:44px;min-height:44px;flex:none;padding:5px;font-size:20px}.tc-scene-composed .tc-hero-object{height:min(170px,44cqw);width:auto}.tc-scene-composed .tc-pokemon-object{height:min(104px,28cqw);width:auto}.tc-scene-composed .tc-decoration{height:min(100px,24cqw);width:auto}@media(max-width:800px){#sidePanel.is-trainer-card .tc .tc-body{padding:12px 14px 14px;gap:8px}#sidePanel.is-trainer-card .tc .tc-name-row h2{font-size:23px}#sidePanel.is-trainer-card .tc .tc-details-row{gap:5px}.tc-scene-composed .tc-hero-object{height:min(146px,44cqw)}.tc-scene-composed .tc-pokemon-object{height:min(90px,28cqw)}.tc-builder[data-mobile-view=scene] .cb-card-blocks{display:none}}@media(max-width:360px){#sidePanel.is-trainer-card .tc .tc-body{padding-inline:10px}#sidePanel.is-trainer-card .tc .tc-showcase h3{font-size:12px}#sidePanel.is-trainer-card .tc .tc-showcase>header{flex-wrap:wrap}}@media(max-height:465px) and (min-width:550px){#sidePanel.is-trainer-card.tc-landscape .tc{grid-template-columns:43% 57%;grid-template-rows:1fr;overflow:hidden}#sidePanel.is-trainer-card.tc-landscape .tc .tc-scene{min-height:0;height:100%}#sidePanel.is-trainer-card.tc-landscape .tc .tc-body{overflow:auto;overscroll-behavior:contain;padding:12px}}.tc-builder .cb-workspace{overflow:auto;overscroll-behavior:contain;padding-right:3px}.cb-preview .tc-scene-composed .tc-hero-object{height:calc(100cqw * 170 / var(--tc-reference-width,760))}.cb-preview .tc-scene-composed .tc-pokemon-object{height:calc(100cqw * 104 / var(--tc-reference-width,760))}.cb-preview .tc-scene-composed .tc-decoration{height:calc(100cqw * 100 / var(--tc-reference-width,760))}@media(max-width:800px){.cb-preview .tc-scene-composed .tc-hero-object{height:calc(100cqw * 146 / var(--tc-reference-width,366))}.cb-preview .tc-scene-composed .tc-pokemon-object{height:calc(100cqw * 90 / var(--tc-reference-width,366))}}.tc .tc-name-row{display:flex;align-items:center}.tc-badge-collection{display:grid;align-content:start}.tc .tc-badge-collection button{display:grid;justify-items:center}.tc-badge-collection .is-locked .tc-badge-art{filter:grayscale(1);opacity:.45}.tc-animated-gift{display:block;background-image:var(--gift-art);background-size:400% 100%;background-repeat:no-repeat;animation:tc-gift-frames 1.2s steps(4) infinite}@keyframes tc-gift-frames{to{background-position:133.3333% 0}}.tc-animated-gift.is-still{animation:none}@media(prefers-reduced-motion:reduce){.tc-animated-gift{animation:none}}@media(max-height:465px) and (min-width:641px){.tc-builder .cb-workspace{display:flex;flex-direction:column;overflow:auto}.tc-builder[data-mobile-view=settings] .cb-preview,.tc-builder[data-mobile-view=settings] .cb-budget,.tc-builder[data-mobile-view=scene] .cb-properties,.tc-builder[data-mobile-view=scene] .cb-card-blocks{display:none}.tc-builder .cb-card-blocks{width:100%}}.tc-tooltip.tc-tooltip-card{background:var(--ui-card);border-color:var(--ui-line);color:var(--ui-ink)}#sidePanel.is-trainer-card .tc .tc-body>*{flex-shrink:0}#sidePanel.is-trainer-card .tc .tc-clothing-entry{background:transparent!important;color:var(--ui-muted)!important;border:0!important}#sidePanel.is-trainer-card .tc .tc-clothing-entry small{color:var(--ui-muted)}.tc-sheet--clothing{--cl-card:var(--ui-card);--cl-soft:var(--ui-soft);--cl-line:var(--ui-line);--cl-ink:var(--ui-ink);--cl-muted:var(--ui-muted)}:is(.tc,.tc-builder) .tc-pokemon-label{background:var(--ui-card);color:var(--ui-ink);border-color:var(--ui-line)}:is(.tc,.tc-builder) .tc-pokemon-info{background:var(--ui-card);color:var(--ui-accent);border-color:var(--ui-line)}@media(max-width:480px){}#sidePanel.is-trainer-card .tc{grid-template-rows:276px minmax(0,1fr);overflow:hidden}#sidePanel.is-trainer-card .tc .tc-scene{height:276px}#sidePanel.is-trainer-card .tc .tc-body{padding:8px 16px 10px;gap:4px;scrollbar-width:thin}#sidePanel.is-trainer-card .tc .tc-identity{gap:5px}#sidePanel.is-trainer-card .tc .tc-name-row h2{gap:8px;font-size:21px;}.tc-name-row h2>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc .tc-clan{font-size:11px;gap:5px;min-height:20px}.tc .tc-clan svg{width:20px;height:20px}.tc-scene-location{display:flex;align-items:center;gap:5px;color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:20px;font-size:11px;line-height:1.35;pointer-events:none}.tc-scene-location svg{width:15px;height:15px;flex:none}.tc-scene-location span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-scene-location b{font-weight:650}#sidePanel.is-trainer-card .tc .tc-clothing-entry{font-size:11px;padding:4px 0}#sidePanel.is-trainer-card .tc .tc-stats b,#sidePanel.is-trainer-card .tc .tc-stats [data-tc-top] b{font-size:18px;text-align:center}#sidePanel.is-trainer-card .tc :is(.tc-awards,.tc-gifts){height:50px}#sidePanel.is-trainer-card .tc :is(.tc-awards,.tc-gifts) button{height:50px;min-height:50px}#sidePanel.is-trainer-card .tc :is(.tc-badge-art,.tc-gifts img,.tc-gifts .tc-animated-gift){width:44px;height:44px}#sidePanel.is-trainer-card .tc .tc-top{height:60px;padding:8px 10px}#sidePanel.is-trainer-card .tc .tc-actions{padding-top:6px;gap:6px}.tc-reputation-rules{font-size:12px;color:var(--ui-muted);display:grid;gap:10px}.tc-reputation-rules h4{margin:0;color:var(--ui-ink);font-size:13px}.tc-reputation-rules p{line-height:1.5}.tc-reputation-rules .tc-facts{margin:0}.tc-reputation-rules a{color:var(--ui-accent)}.tc-reputation-rules summary{cursor:pointer;min-height:44px;align-content:center}.tc-friend-filters{display:flex;gap:4px;margin-bottom:8px}.tc-friend-filters button{flex:1;min-height:44px;padding:6px;font-size:11px}.tc-friend-filters [aria-pressed=true]{background:var(--ui-soft);border-color:var(--ui-accent);color:var(--ui-accent)}.tc-friend-filters small{font-size:10px;color:var(--ui-muted)}.tc .tc-friend-list--dense{gap:3px}.tc-friend-row{display:flex;gap:4px}.tc .tc-friend-row>button{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 9px;margin:0}.tc-friend-row>button:first-child{flex:1}.tc-friend-row b{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-friend-row small{font-size:10px}.tc-friend-row>button:last-child:not(:first-child){font-size:10px;padding:4px 6px}.tc .tc-invite-link{margin-top:10px;width:100%;font-size:12px}@media(max-width:800px){#sidePanel.is-trainer-card .tc{grid-template-rows:244px minmax(0,1fr)}#sidePanel.is-trainer-card .tc .tc-scene{height:244px}#sidePanel.is-trainer-card .tc .tc-body{padding:9px 12px 10px}#sidePanel.is-trainer-card .tc .tc-name-row h2{font-size:19px}}@media(max-height:620px) and (max-width:550px){#sidePanel.is-trainer-card .tc{grid-template-rows:186px minmax(0,1fr)}#sidePanel.is-trainer-card .tc .tc-scene{height:186px}.tc-scene-composed .tc-hero-object{height:min(124px,40cqw)}}@media(max-height:465px) and (min-width:550px){#sidePanel.is-trainer-card.tc-landscape .tc{grid-template-columns:42% 58%;grid-template-rows:1fr}#sidePanel.is-trainer-card.tc-landscape .tc .tc-scene{height:100%}}@layer ui-theme{#sidePanel.is-trainer-card .tc .tc-clothing-entry{background:transparent!important;color:var(--ui-muted)!important;border:0!important}}#sidePanel.is-trainer-card .tc-scene-location{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);z-index:11;max-width:calc(100% - 20px);padding:4px 9px;background:color-mix(in srgb,var(--ui-card) 85%,transparent);backdrop-filter:blur(8px);box-shadow:0 2px 8px #0001}.tc-name-row .player-presence{display:flex;flex:none}.tc-name-row .player-presence-icon{width:18px;height:18px}.tc-rep-track{display:flex;align-items:center;gap:5px;height:16px;color:var(--ui-positive)}.tc-rep-track svg{width:15px;height:15px;flex:none}.tc-name-row .player-presence.is-online{color:var(--ui-positive)}.tc .tc-name-group{display:flex;flex-direction:row;align-items:center;gap:7px;flex:1;min-width:0}.tc .tc-name-group h2{flex:0 1 auto;min-width:0}.tc .tc-name-row>.tc-clan{flex:0 1 auto;max-width:38%;margin:0;text-align:right;justify-content:flex-end}.tc .tc-clan>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-joined{font-size:11px;line-height:1.4;color:var(--ui-muted);overflow-wrap:anywhere}.tc-details-row{gap:10px}#sidePanel.is-trainer-card .tc :is(.tc-awards,.tc-gifts){--tc-award-size:50px;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:var(--tc-award-size);justify-content:start;gap:4px}#sidePanel.is-trainer-card .tc :is(.tc-awards,.tc-gifts) button{width:var(--tc-award-size);height:var(--tc-award-size);min-height:var(--tc-award-size)}@media(max-width:800px){#sidePanel.is-trainer-card .tc :is(.tc-awards,.tc-gifts){--tc-award-size:44px;gap:4px;height:44px}#sidePanel.is-trainer-card .tc :is(.tc-awards .tc-badge-art,.tc-gifts img,.tc-gifts .tc-animated-gift){width:40px;height:40px}.tc .tc-name-group{gap:5px}.tc .tc-name-row{gap:8px}.tc .tc-name-row>.tc-clan{max-width:35%}}#sidePanel.is-trainer-card .tc .tc-awards:has(>.tc-hint){grid-template-columns:minmax(0,1fr);grid-auto-flow:row} #sidePanel.is-trainer-card .tc .tc-details-row{min-height:36px}#sidePanel.is-trainer-card .tc .tc-showcase{padding-top:4px;gap:4px}.tc-tooltip[role=dialog]{pointer-events:auto;display:grid;gap:4px;max-height:60vh;overflow:auto}.tc-tooltip[role=dialog] button{min-height:44px;color:var(--ui-accent);background:var(--ui-soft);border:1px solid var(--ui-line);border-radius:7px;text-align:left;cursor:pointer}.tc .tc-player-menu .is-danger{color:var(--ui-danger,#c64754)} /* Fit the complete card above navigation; its content scrolls inside the frame. */ #app #gameScreen #sidePanel.is-trainer-card.is-open:not(.is-user-positioned){top:calc(50% - var(--tc-bottom-reserve,12px)/2)!important} #sidePanel.is-trainer-card .tc{height:100%;min-height:0;grid-template-rows:var(--tc-scene-height,186px) minmax(0,1fr)} #sidePanel.is-trainer-card .tc .tc-scene{height:100%;min-height:0} #sidePanel.is-trainer-card .tc .tc-body{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable} #sidePanel.is-trainer-card .tc .tc-name-row h2{display:flex;align-items:center;gap:6px;min-width:0;max-width:none;color:var(--ui-ink);background:transparent;border:0;box-shadow:none;line-height:1.3} #sidePanel.is-trainer-card .tc .tc-name-row h2>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @layer ui-theme{#sidePanel.is-trainer-card .tc .tc-name-row h2[tabindex="-1"]:focus{outline:none!important}} #sidePanel.is-trainer-card .tc .tc-scene-location{backdrop-filter:none;background:var(--ui-card)} @media(max-width:550px){ #sidePanel.is-trainer-card .tc .tc-name-row{flex-wrap:wrap;gap:4px} #sidePanel.is-trainer-card .tc .tc-name-group{flex:1 1 100%;width:100%} #sidePanel.is-trainer-card .tc .tc-name-row>.tc-clan{max-width:100%;margin-left:auto;font-size:11px} #sidePanel.is-trainer-card .tc .tc-name-row h2{font-size:clamp(16px,5vw,20px)} } #sidePanel.is-trainer-card.tc-landscape .tc{grid-template-columns:42% 58%;grid-template-rows:minmax(0,1fr)} /* Quiet metric surfaces with one readable explanation per control. */ #sidePanel.is-trainer-card .tc .tc-reputation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0;background:transparent;border:0;box-shadow:none;width:100%} #sidePanel.is-trainer-card .tc .tc-rep-item{display:grid;gap:5px;min-width:0;min-height:48px;padding:7px 9px;background:var(--ui-soft);border:1px solid transparent;border-radius:9px;color:var(--ui-muted);text-align:left;cursor:help} #sidePanel.is-trainer-card .tc .tc-rep-item>span:first-child{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:10px;line-height:1.4} #sidePanel.is-trainer-card .tc .tc-rep-item b{font-size:11px;font-weight:650;white-space:nowrap;color:var(--ui-ink)} #sidePanel.is-trainer-card .tc .tc-rep-item small{font-size:9px;font-weight:400;color:var(--ui-muted)} #sidePanel.is-trainer-card .tc .tc-rep-item:is(:hover,:focus-visible){border-color:var(--ui-line);background:var(--ui-hover,var(--ui-soft))} #sidePanel.is-trainer-card .tc .tc-rep-track i{display:block;flex:1;height:3px;background:var(--ui-line);border-radius:4px;overflow:hidden} #sidePanel.is-trainer-card .tc .tc-rep-track em{display:block;height:100%;background:currentColor} #sidePanel.is-trainer-card .tc .tc-rep-item:nth-child(2) .tc-rep-track{color:var(--ui-accent)} #sidePanel.is-trainer-card .tc .tc-rep-item.is-limited .tc-rep-track{color:#b58526} #sidePanel.is-trainer-card .tc .tc-rep-item.is-low .tc-rep-track{color:var(--ui-danger,#ce6b70)} #sidePanel.is-trainer-card .tc .tc-name-group .tc-level{display:flex;align-items:center;flex-direction:row;flex:none;gap:5px;min-width:0;min-height:36px;padding:0 8px;border:0;border-left:1px solid var(--ui-line);border-radius:0;background:transparent;box-shadow:none;color:var(--ui-accent);cursor:help} #sidePanel.is-trainer-card .tc .tc-name-group .tc-level b{font-size:20px;line-height:1;font-weight:750} #sidePanel.is-trainer-card .tc .tc-name-group .tc-level small{font-size:10px;font-weight:450;line-height:1.2;color:var(--ui-muted)} #sidePanel.is-trainer-card .tc .tc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;border:0;border-radius:0;padding:0;background:transparent;overflow:visible} #sidePanel.is-trainer-card .tc .tc-stats>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;height:56px;min-height:44px;padding:6px 3px;border:1px solid transparent;border-radius:9px;background:var(--ui-soft);box-shadow:none;text-align:center} #sidePanel.is-trainer-card .tc .tc-stats>button:is(:hover,:focus-visible){background:var(--ui-hover,var(--ui-soft));border-color:var(--ui-line)} #sidePanel.is-trainer-card .tc .tc-stats>button>b{font-size:18px;line-height:1.1;text-align:center} #sidePanel.is-trainer-card .tc .tc-stats>button>small{font-size:10px;line-height:1.2} #sidePanel.is-trainer-card .tc .tc-stats>button>svg{display:none} .tc-tooltip{max-width:min(320px,calc(100vw - 24px));font-size:12px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere} @media(max-width:550px){#sidePanel.is-trainer-card .tc .tc-name-group .tc-level{min-height:44px;padding-inline:6px}#sidePanel.is-trainer-card .tc .tc-name-group .tc-level small{font-size:9px}} /* Native showroom entry; existing scene controls retain their layout. */ .tc-builder .cb-header-tools [data-cb-showroom]{font-size:10px;min-width:44px;padding:0 9px;width:auto;white-space:nowrap}.tc-builder footer [data-cb-shop-buy]{min-height:44px;padding:8px 12px;border-radius:8px;border:1px solid #d94c55;background:#d94c55;color:white;font:inherit;font-size:11px} @media(max-width:760px){.tc-builder .cb-header-tools [data-cb-showroom]{font-size:0;width:44px;padding:0}.tc-builder .cb-header-tools [data-cb-showroom]:before{content:"◉";font-size:20px}.tc-builder footer [data-cb-shop-buy]{width:100%;grid-column:1/-1}} /* Private subscription status, rendered only on the owner card. */ #sidePanel.is-trainer-card .tc .tc-name-group{flex-wrap:wrap} #sidePanel.is-trainer-card .tc .tc-own-vip{display:inline-flex;align-items:center;min-height:28px;max-width:100%;padding:4px 9px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-card);color:var(--ui-accent);font-size:11px;line-height:1.3;text-align:left;overflow-wrap:anywhere;cursor:pointer} #sidePanel.is-trainer-card .tc .tc-own-vip:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px} @media(max-width:800px){#sidePanel.is-trainer-card .tc .tc-own-vip{min-height:44px}} /* pk-style-source:137 */ /* /tester-v2790.css */ #testerLauncher[hidden]{display:none!important} #gameScreen .tester-launcher{position:absolute;left:var(--tester-left,calc(50% + 250px));bottom:var(--tester-bottom,18px);width:64px;height:66px;z-index:32;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid #a3a0f1;border-radius:19px;background:linear-gradient(155deg,#f9f6ff,#e2e5ff);color:#54448d;box-shadow:0 6px 20px #17294435;font:700 11px/1.2 inherit;cursor:pointer;padding:6px} #testerLauncher svg{width:29px;height:29px;filter:drop-shadow(0 2px 3px #7262bd30)} #testerLauncher b{font-size:11px} #testerLauncher i{position:absolute;top:-5px;right:-3px;font:800 8px/1.5 sans-serif;font-style:normal;border-radius:5px;padding:1px 4px;background:#6853b6;color:#fff;border:1px solid #cfc6ff} #testerLauncher:hover,#testerLauncher.is-active{background:linear-gradient(155deg,#f7f0ff,#d3d2ff);box-shadow:0 0 0 3px #a899ef45,0 6px 20px #17294435} #gameScreen.is-battling #testerLauncher,#gameScreen.has-fullscreen-chat #testerLauncher{display:none} #sidePanel.is-tester-panel{width:min(960px,calc(100vw - 32px))!important;max-width:960px!important;max-height:calc(100dvh - 40px)!important;border-radius:24px;background:var(--tester-bg,#f4f6fb);color:var(--tester-ink,#293947);--tester-bg:#f4f6fb;--tester-surface:#fff;--tester-ink:#293947;--tester-muted:#748491;--tester-line:#e1e6ee;--tester-accent:#7662b8;--tester-tint:#efebfb} html[data-game-theme="dark"] #sidePanel.is-tester-panel{--tester-bg:#162331;--tester-surface:#1e2e3f;--tester-ink:#e5edf5;--tester-muted:#9fb0c1;--tester-line:#334455;--tester-accent:#b7a2f2;--tester-tint:#302d49} #sidePanel.is-tester-panel .side-content{padding:0!important;overflow:auto;scrollbar-width:thin;scrollbar-color:#aaa0ce transparent} .tester-panel{padding:22px;font-family:inherit;color:var(--tester-ink);font-size:13px} .tester-panel *{box-sizing:border-box} .tester-header{display:flex;align-items:center;gap:12px;padding-right:34px;margin-bottom:15px} .tester-mark{display:grid;place-items:center;width:47px;height:47px;flex:0 0 47px;border-radius:16px;background:var(--tester-tint);color:var(--tester-accent);font:30px/1 sans-serif} .tester-mark svg{width:28px;height:28px} .tester-header small{color:var(--tester-muted);font-size:9px;letter-spacing:1px} .tester-header h2{font-size:22px;line-height:1.25;margin:3px 0 0;color:var(--tester-ink)} .tester-status{margin-left:auto;padding:6px 10px;border-radius:20px;background:var(--tester-tint);color:var(--tester-accent);font-size:10px;white-space:nowrap} .tester-status.is-active{background:#38ac841c;color:#39a685} .tester-session{display:flex;align-items:center;gap:18px;padding:12px 14px;border:1px solid var(--tester-line);border-radius:15px;background:var(--tester-surface)} .tester-session p{flex:1;margin:0;font-size:12px;line-height:1.45} .tester-session p small{display:block;margin-top:5px;color:var(--tester-muted);font-size:10px} .tester-panel button{font-family:inherit;font-size:12px;color:var(--tester-ink);border:1px solid var(--tester-line);border-radius:10px;background:var(--tester-surface);padding:9px 12px;cursor:pointer;transition:background .15s,box-shadow .15s;min-height:38px;line-height:1.25} .tester-panel button:hover{background:var(--tester-tint)} .tester-panel button:focus-visible,.tester-panel input:focus-visible,.tester-panel select:focus-visible{outline:2px solid var(--tester-accent);outline-offset:2px} .tester-panel button:disabled{opacity:.45;cursor:default} .tester-panel .tester-primary{background:linear-gradient(125deg,#7960bd,#5f73b6);color:#fff;border:0;font-weight:700;box-shadow:0 4px 10px #50469520} .tester-panel .tester-primary:hover{background:linear-gradient(125deg,#8a71ce,#6b83c4)} .tester-panel .tester-reset{color:#bf6277;border-color:#be667b40} .tester-tabs{display:flex;gap:5px;margin-top:15px;padding:4px;background:var(--tester-surface);border-radius:13px;overflow:auto;scrollbar-width:none} .tester-tabs button{flex:1;border:0;background:transparent;white-space:nowrap;font-weight:600} .tester-tabs .is-active{background:var(--tester-tint);color:var(--tester-accent)} .tester-feedback{min-height:29px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#399a77;padding:6px 2px} .tester-feedback:empty{min-height:14px;padding:0} .tester-feedback.is-error{color:#dc7a88} .tester-workbench{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(310px,1fr);gap:16px;align-items:start} .tester-catalog{min-width:0;position:sticky;top:54px} .tester-search{display:flex;gap:6px;margin-bottom:10px} .tester-panel input:not([type="checkbox"]),.tester-panel select{display:block;width:100%;min-width:0;border:1px solid var(--tester-line);border-radius:9px;background:var(--tester-surface);color:var(--tester-ink);font-family:inherit;font-size:12px;line-height:1.2;height:38px;padding:8px} .tester-search input{flex:1} .tester-search select{max-width:150px} .tester-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;max-height:450px;overflow:auto;padding:2px;scrollbar-width:thin} .tester-panel .tester-card{padding:7px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:106px;overflow:hidden;border-radius:13px} .tester-card img,.tester-art-fallback{width:58px;height:58px;object-fit:contain} .tester-art-fallback{display:grid;place-items:center;font-size:35px;color:var(--tester-muted)} .tester-card b{font-size:10px;line-height:1.3;overflow-wrap:anywhere;text-align:center} .tester-card small{font-size:9px;color:var(--tester-muted);text-align:center} .tester-panel .tester-card.is-selected{background:var(--tester-tint);border-color:var(--tester-accent);box-shadow:0 0 0 1px var(--tester-accent)} .tester-pages{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:10px;font-size:10px;color:var(--tester-muted)} .tester-pages button{padding:5px 10px;min-width:38px} .tester-config,.tester-resource{padding:15px;border:1px solid var(--tester-line);background:var(--tester-surface);border-radius:17px;min-width:0} .tester-selection{display:flex;gap:12px;align-items:center;margin-bottom:13px} .tester-selection img,.tester-selection>.tester-art-fallback{width:78px;height:78px;object-fit:contain;flex:0 0 78px;background:var(--tester-bg);border-radius:17px;padding:5px} .tester-selection h3{font-size:18px;line-height:1.25;margin:3px 0 7px;overflow-wrap:anywhere;color:var(--tester-ink)} .tester-selection small{color:var(--tester-muted);font-size:10px;overflow-wrap:anywhere} .tester-selection button{font-size:10px;min-height:32px;padding:6px 8px} .tester-panel label{display:block;font-size:10px;font-weight:600;color:var(--tester-muted);margin-bottom:10px} .tester-panel label input,.tester-panel label select{margin-top:5px} .tester-panel fieldset{border:0;margin:0;padding:0;min-width:0} .tester-panel fieldset:disabled{opacity:.65} .tester-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 10px} .tester-wide{grid-column:1/-1} .tester-panel .tester-check{display:flex;align-items:center;gap:7px;min-height:38px;color:var(--tester-ink);font-size:11px;line-height:1.4} .tester-check input{width:16px;height:16px;margin:0;accent-color:#8b74c6} .tester-panel details{border-top:1px solid var(--tester-line);padding:10px 0;margin:2px 0} .tester-panel summary{font-size:12px;font-weight:700;cursor:pointer;margin-bottom:10px;color:var(--tester-ink)} .tester-panel summary span{float:right;color:var(--tester-muted);font-size:10px} .tester-panel summary span.is-over{color:#de637b} .tester-stat-heading,.tester-stats>div{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:7px;align-items:center} .tester-stat-heading{font-size:9px;color:var(--tester-muted);margin-bottom:5px} .tester-stats>div{margin:5px 0;font-size:10px} .tester-stats input{height:31px!important;padding:5px 7px!important} .tester-presets{display:flex;gap:7px;margin:10px 0 0} .tester-presets button{min-height:30px;font-size:10px;padding:5px 9px} .tester-config .tester-primary{width:100%;margin-top:5px} .tester-hint{font-size:11px;color:var(--tester-muted);line-height:1.5;margin:6px 0 14px} .tester-moves{display:grid;grid-template-columns:1fr 1fr;gap:0 10px} .tester-resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .tester-resource h3{font-size:17px;margin:2px 0 13px;color:var(--tester-ink)} .tester-resource p{color:var(--tester-muted);font-size:12px;line-height:1.5} .tester-resource>button{margin-top:10px} .tester-balances{display:flex;gap:12px;margin-bottom:15px} .tester-balances span{flex:1;background:var(--tester-bg);border-radius:12px;padding:10px;font-size:10px;color:var(--tester-muted)} .tester-balances b{display:block;margin-top:4px;font-size:19px;color:var(--tester-ink)} .tester-cosmetic-preview{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px} .tester-cosmetic-preview img{width:48px;height:48px;object-fit:contain;border-radius:9px;background:var(--tester-bg);padding:3px} .tester-gifts{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:7px;margin:12px 0} .tester-gifts button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px;min-width:0} .tester-gifts img{width:56px;height:56px;object-fit:contain} .tester-visual{text-align:center;max-width:460px;margin:16px auto;padding:14px} .tester-visual>img{width:130px;height:130px;object-fit:contain;filter:drop-shadow(0 8px 12px #d4b43128)} .tester-visual h3{font-size:22px;margin:10px 0} .tester-visual p{line-height:1.6;color:var(--tester-muted)} .tester-visual button{display:block;width:100%;margin:9px 0} .tester-log article{display:flex;align-items:start;gap:14px;padding:13px;margin-bottom:7px;background:var(--tester-surface);border-radius:12px} .tester-log time{font-size:10px;color:var(--tester-muted);padding-top:2px} .tester-empty{padding:30px;text-align:center;color:var(--tester-muted)} .tester-empty button{display:block;margin:15px auto} @media(max-width:760px),(pointer:coarse) and (max-height:560px){ #gameScreen .tester-launcher{left:auto;right:12px;bottom:calc(80px + env(safe-area-inset-bottom,0px));width:46px;height:46px;border-radius:14px;gap:0;padding:4px;z-index:31} #testerLauncher svg{width:23px;height:23px}#testerLauncher b{font-size:8px}#testerLauncher i{font-size:7px} #sidePanel.is-tester-panel{width:calc(100vw - 16px)!important;max-width:none!important;max-height:calc(var(--mobile-vh,100dvh) - 20px)!important;border-radius:19px} .tester-panel{padding:14px 12px}.tester-header{gap:8px;padding-right:24px}.tester-header h2{font-size:19px}.tester-header small{font-size:8px;letter-spacing:.5px}.tester-mark{width:38px;height:38px;flex-basis:38px;font-size:26px}.tester-status{font-size:8px;padding:5px 7px} .tester-session{flex-direction:column;align-items:stretch;gap:10px;padding:11px}.tester-session p{font-size:11px}.tester-session p small{font-size:9px}.tester-session button{min-height:40px} .tester-tabs{gap:0}.tester-tabs button{padding:9px 8px;font-size:10px;min-height:40px}.tester-workbench{grid-template-columns:minmax(0,1fr);gap:12px}.tester-catalog{position:static}.tester-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:230px}.tester-panel .tester-card{min-height:94px}.tester-card img,.tester-art-fallback{width:49px;height:49px}.tester-card b{font-size:9px}.tester-card small{font-size:8px}.tester-config{padding:13px}.tester-resource-grid{grid-template-columns:1fr}.tester-panel input:not([type="checkbox"]),.tester-panel select{font-size:16px;min-height:40px}.tester-panel label{font-size:11px}.tester-stats input{font-size:14px!important;min-height:36px}.tester-fields{gap:0 8px}.tester-header{margin-bottom:10px} } @media(max-width:360px){.tester-tabs button{padding:9px 5px;font-size:9px}.tester-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tester-status{display:none}} @media(prefers-reduced-motion:reduce){.tester-panel button{transition:none}} /* Keep the dev shortcut beside the team, above movable world windows. */ #gameScreen #testerLauncher{position:fixed!important;left:var(--tester-left,calc(100vw - 76px))!important;top:var(--tester-top,calc(100dvh - 174px))!important;right:auto!important;bottom:auto!important;width:56px!important;height:60px!important;z-index:1500!important;display:flex!important;border-radius:16px;touch-action:manipulation} #gameScreen #testerLauncher[hidden]{display:none!important} body #gameScreen#gameScreen #desktopDock.desktop-dock{grid-template-columns:repeat(5,64px)!important} #desktopChatBadge{position:absolute;top:1px;right:3px;min-width:16px;height:16px;padding:1px 4px;border-radius:9px;background:#2488bd;color:white;font:700 9px/14px sans-serif} #desktopChatBadge[hidden]{display:none!important} /* Share the earliest HUD layer so its mobile safe rectangle cannot override tester bounds. */ @layer world-hud-compact { body #gameScreen#gameScreen[data-world-hud="v2340"] #sidePanel.is-tester-panel.is-open{position:fixed!important;inset:auto!important;left:50%!important;top:calc(50% - 44px)!important;width:min(1040px,calc(100vw - 168px))!important;height:min(840px,calc(100dvh - 128px))!important;max-height:calc(100dvh - 128px)!important;min-height:0!important;transform:translate(-50%,-50%)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;padding:0!important;margin:0!important} body #gameScreen#gameScreen[data-world-hud="v2340"] #sidePanel.is-tester-panel #sidePanelContent{height:auto!important;max-height:none!important;min-height:0!important;min-width:0!important;flex:1 1 0!important;display:block!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#9986c1 transparent} } .tc-pokemon-canvas[data-pokemon-visual^="home"]{image-rendering:auto!important} @media(max-width:760px),(pointer:coarse) and (max-height:560px){ #gameScreen #testerLauncher{left:auto!important;right:12px!important;top:auto!important;bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;width:52px!important;height:54px!important;border-radius:14px} @layer world-hud-compact { body #gameScreen#gameScreen[data-world-hud="v2340"] #sidePanel.is-tester-panel.is-open{inset:8px 8px calc(144px + env(safe-area-inset-bottom,0px)) 8px!important;width:auto!important;height:auto!important;max-height:none!important;transform:none!important} } .tester-collection .tester-config{order:-1} .tester-collection .tester-grid{max-height:340px} .tester-tabs button{flex:0 0 auto} } .tester-tabs{position:sticky;top:0;z-index:3;scroll-padding:8px} .tester-collections-shortcuts>div{display:flex;gap:8px;flex-wrap:wrap} .tester-collection .tester-card.is-background img{width:100%;height:80px;object-fit:cover;border-radius:8px} .tester-selection.is-background{display:block} .tester-selection.is-background>img{width:100%;height:auto;max-height:180px;object-fit:cover;border-radius:12px;margin-bottom:12px} .tester-collection .tester-config{scroll-margin-top:64px} .tester-card .tester-gift-art{width:58px;height:58px;flex:none} .tester-selection>.tester-gift-art{width:78px;height:78px;flex:0 0 78px;border-radius:17px;background-color:var(--tester-bg)} @media(max-width:760px),(pointer:coarse) and (max-height:560px){.tester-card .tester-gift-art{width:49px;height:49px}} /* pk-style-source:138 */ /* /kanto-field-tools-v2750.css */ .kanto-tool-dialog { width: min(760px, calc(100vw - 28px)); max-height: min(790px, calc(100dvh - 28px)); padding: 0; border: 1px solid var(--ui-line,#aed3e7); border-radius: 24px; background: var(--ui-paper,#f7fbfe); color: var(--ui-ink,#18384e); box-shadow: 0 26px 90px #061f36a8; overflow: auto; } .kanto-tool-dialog::backdrop { background: #06192dbd; backdrop-filter: blur(4px); } .kanto-tool-dialog > header { position: sticky; z-index: 2; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 23px 26px 18px; background: var(--ui-paper,#f7fbfef2); border-bottom: 1px solid var(--ui-line,#d4e7f0); } .kanto-tool-dialog > header small { color: var(--ui-accent,#3980a4); font-size: 11px; font-weight: 900; letter-spacing: .11em; } .kanto-tool-dialog h2 { margin: 4px 0; font-size: clamp(23px, 4vw, 30px); line-height: 1.1; } .kanto-tool-dialog > header p { margin: 0; color: var(--ui-muted,#608094); font-size: 13px; } .kanto-tool-dialog [data-tool-close] { width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid var(--ui-line,#c7e0ec); border-radius: 13px; background: var(--ui-soft,#eaf5fa); color: var(--ui-ink,#23475f); font-size: 27px; cursor: pointer; } .kanto-tool-wallet { display: flex; justify-content: space-between; align-items: center; margin: 18px 26px 0; padding: 12px 16px; border-radius: 14px; background: var(--ui-tint,#dff2f5); } .kanto-tool-wallet strong { font-size: 21px; color: var(--ui-accent,#086e86); } .kanto-tool-loadout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 12px 26px 18px; } .kanto-tool-loadout > div { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid var(--ui-line,#cfe5ef); border-radius: 13px; background: var(--ui-card,white); } .kanto-tool-loadout small { color: var(--ui-muted,#628198); } .kanto-tool-loadout b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .kanto-tool-loadout button { border: 0; border-radius: 8px; background: var(--ui-soft,#e9f3f7); color: var(--ui-ink,#287390); padding: 6px 9px; cursor: pointer; } .kanto-tool-stock { display: grid; gap: 9px; margin: 0 26px 16px; } .kanto-tool-stock article { display: grid; grid-template-columns: 64px minmax(0,1fr) auto auto; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--ui-line,#d3e6ef); border-radius: 17px; background: var(--ui-card,#fff); } .kanto-tool-stock img { width: 64px; height: 64px; object-fit: contain; } .kanto-tool-stock small { display: block; color: var(--ui-accent,#3f8da6); font-size: 11px; font-weight: 800; text-transform: uppercase; } .kanto-tool-stock h3 { margin: 3px 0 4px; font-size: 16px; } .kanto-tool-stock p { margin: 0; color: var(--ui-muted,#658498); font-size: 12px; } .kanto-tool-stock strong { white-space: nowrap; color: var(--ui-ink,#105979); } .kanto-tool-stock button { min-width: 104px; padding: 10px 12px; border: 0; border-radius: 11px; background: var(--ui-primary,#1597cb); color: var(--ui-on-accent,white); font-weight: 800; cursor: pointer; } .kanto-tool-stock button:disabled { background: var(--ui-soft,#e6eff4); color: var(--ui-muted,#7490a0); cursor: default; } .kanto-tool-status { margin: 0 26px 22px; min-height: 20px; color: var(--ui-muted,#44718a); font-size: 13px; } @media (max-width: 600px) { .kanto-tool-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 19px; } .kanto-tool-dialog > header { padding: 17px 16px 14px; } .kanto-tool-wallet, .kanto-tool-loadout { margin-left: 16px; margin-right: 16px; } .kanto-tool-stock { margin-left: 16px; margin-right: 16px; } .kanto-tool-stock article { grid-template-columns: 48px minmax(0,1fr) auto; gap: 8px; padding: 10px; } .kanto-tool-stock img { width: 48px; height: 48px; grid-column: 1; grid-row: 1 / span 2; align-self: center; } .kanto-tool-stock article > div { grid-column: 2 / -1; grid-row: 1; } .kanto-tool-stock strong { grid-column: 2; grid-row: 2; } .kanto-tool-stock button { grid-column: 3; grid-row: 2; min-width: 83px; padding: 9px 7px; } .kanto-tool-loadout { grid-template-columns: 1fr; } .kanto-tool-status { margin-left: 16px; margin-right: 16px; } } /* pk-style-source:139 */ /* /hud-design-v2680.css */ @layer hud-v2680 { #gameScreen[data-hud-design="v2680"] { --hud-ink:#18384e !important; --hud-muted:#6a8393 !important; --hud-blue:#1688ce !important; --hud-line:#dbe8ef !important; --hud-shadow:0 5px 22px #15394c1c !important; } #gameScreen[data-hud-design="v2680"] [hidden] { display:none !important; } #gameScreen .hud-icon { display:inline-block !important; width:22px !important; height:22px !important; flex:0 0 22px !important; vertical-align:middle !important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] .world-topbar { position:absolute !important; top:calc(16px + env(safe-area-inset-top)) !important; left:20px !important; right:20px !important; width:auto !important; height:96px !important; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important; display:block !important; pointer-events:none !important; z-index:42 !important; } #gameScreen[data-hud-design="v2680"] .world-topbar>* { pointer-events:auto !important; } #gameScreen[data-hud-design="v2680"] .player-chip { position:absolute !important; top:0 !important; left:0 !important; width:302px !important; min-width:0 !important; max-width:none !important; height:94px !important; min-height:0 !important; display:grid !important; grid-template-columns:64px minmax(0,1fr) !important; gap:12px !important; padding:12px 16px 12px 12px !important; background:#ffffffed !important; border:1px solid #fff !important; border-radius:24px !important; box-shadow:var(--hud-shadow) !important; color:var(--hud-ink) !important; backdrop-filter:none !important; } #gameScreen[data-hud-design="v2680"] .player-chip::before,#gameScreen[data-hud-design="v2680"] .player-chip::after { display:none !important; } #gameScreen[data-hud-design="v2680"] .player-chip-avatar { width:64px !important; height:64px !important; margin:0 !important; border:2px solid #cbe7f1 !important; border-radius:50% !important; background-color:#e8f5fb !important; box-shadow:0 0 0 3px white !important; align-self:center !important; overflow:hidden !important; } #gameScreen[data-hud-design="v2680"] .player-chip-avatar img { width:100% !important; height:100% !important; object-fit:contain !important; } #gameScreen[data-hud-design="v2680"] .player-chip-copy { display:grid !important; grid-template-rows:22px 15px 15px !important; align-content:center !important; gap:4px !important; min-width:0 !important; } #gameScreen[data-hud-design="v2680"] .player-chip-identity { display:flex !important; align-items:center !important; gap:8px !important; min-width:0 !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerName { font:750 14px/1.2 'Segoe UI',sans-serif !important; color:var(--hud-ink) !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerLevel { font:650 11px/1.2 'Segoe UI',sans-serif !important; color:#698397 !important; background:none !important; padding:0 !important; white-space:nowrap !important; } #gameScreen[data-hud-design="v2680"] .player-chip-meta,#gameScreen[data-hud-design="v2680"] .player-chip-open-hint { display:none !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress { display:grid !important; grid-template-columns:12px minmax(0,1fr) 55px !important; gap:5px !important; height:15px !important; align-items:center !important; margin:0 !important; padding:0 !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>small { display:block !important; width:12px !important; height:12px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>small>span { display:none !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress img { display:block !important; width:12px !important; height:12px !important; object-fit:contain !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>i { display:block !important; width:100% !important; height:6px !important; border:0 !important; border-radius:6px !important; background:#dfebef !important; overflow:hidden !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>i>b { display:block !important; height:100% !important; border-radius:6px !important; background:#2fbcae !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress.is-energy>i>b { background:#edb83b !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>em { display:block !important; min-width:0 !important; color:#536c7c !important; font:600 9px/1 'Segoe UI',sans-serif !important; text-align:right !important; white-space:nowrap !important; } #gameScreen[data-hud-design="v2680"] .world-wallet { position:absolute !important; left:50% !important; top:8px !important; transform:translateX(-50%) !important; display:flex !important; align-items:center !important; gap:0 !important; min-height:52px !important; width:auto !important; padding:5px 9px !important; border:1px solid white !important; border-radius:18px !important; background:#ffffffed !important; box-shadow:var(--hud-shadow) !important; } #gameScreen[data-hud-design="v2680"] .world-wallet-currency { min-width:0 !important; display:flex !important; align-items:center !important; gap:7px !important; padding:0 8px !important; font-size:15px !important; color:var(--hud-ink) !important; height:40px !important; } #gameScreen[data-hud-design="v2680"] .world-wallet-currency+.world-wallet-currency { border-left:1px solid var(--hud-line) !important; } #gameScreen[data-hud-design="v2680"] .world-wallet-currency-icon,#gameScreen[data-hud-design="v2680"] .world-wallet-currency-icon img { width:27px !important; height:27px !important; } #gameScreen[data-hud-design="v2680"] .world-wallet-currency button { width:30px !important; height:36px !important; min-width:30px !important; border:0 !important; border-radius:10px !important; background:#e9f4fb !important; color:#2179aa !important; font-size:21px !important; } #gameScreen[data-hud-design="v2680"] .instance-chip { display:none !important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton { display:grid !important; place-items:center !important; position:absolute !important; top:8px !important; right:290px !important; left:auto !important; width:48px !important; height:48px !important; padding:0 !important; background:#ffffffed !important; color:#34617e !important; border:1px solid white !important; border-radius:16px !important; box-shadow:var(--hud-shadow) !important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton::before,#gameScreen[data-hud-design="v2680"] #notificationCenterButton::after { display:none !important; content:none !important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton .hud-icon { width:26px !important; height:26px !important; } #gameScreen[data-hud-design="v2680"] #notificationCenterBadge { position:absolute !important; top:-4px !important; right:-4px !important; min-width:19px !important; height:19px !important; padding:0 4px !important; border:2px solid white !important; font:700 10px/15px 'Segoe UI',sans-serif !important; border-radius:10px !important; background:#ed6268 !important; color:white !important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #worldMinimapShell { position:absolute !important; top:calc(16px + env(safe-area-inset-top)) !important; right:20px !important; left:auto !important; bottom:auto !important; width:270px !important; max-width:none !important; height:auto !important; min-height:0 !important; display:flex !important; flex-direction:column !important; gap:0 !important; padding:0 !important; border:1px solid white !important; border-radius:22px !important; background:#fffffff2 !important; box-shadow:var(--hud-shadow) !important; overflow:visible !important; z-index:43 !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-topbar { display:flex !important; align-items:center !important; min-height:52px !important; height:52px !important; padding:5px 9px 5px 13px !important; gap:5px !important; background:none !important; border:0 !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-place { display:block !important; min-width:0 !important; flex:1 !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-place>small,#gameScreen[data-hud-design="v2680"] #worldMinimapDayPhase,#gameScreen[data-hud-design="v2680"] #worldMinimapClock { display:none !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapLocation { display:block !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; color:var(--hud-ink) !important; font:700 13px/1.4 'Segoe UI',sans-serif !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-server-meta { position:static !important; inset:auto !important; width:auto !important; height:auto !important; min-height:0 !important; padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; display:flex !important; align-items:center !important; gap:0 !important; margin:0 !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapWeatherIcon { display:grid !important; place-items:center !important; width:38px !important; height:38px !important; min-width:38px !important; padding:6px !important; border:0 !important; border-radius:50% !important; background:#eff6fb !important; color:#6a93b3 !important; cursor:pointer !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapWeatherIcon svg { width:26px !important; height:26px !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapCollapse { position:static !important; inset:auto !important; flex:0 0 26px !important; order:3 !important; width:26px !important; height:38px !important; min-width:26px !important; padding:4px !important; border:0 !important; background:transparent !important; color:#7d96a6 !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapCollapse svg { width:18px !important; height:18px !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-map-surface { display:block !important; position:relative !important; width:calc(100% - 16px) !important; height:135px !important; margin:0 8px !important; padding:0 !important; border:0 !important; border-radius:14px !important; overflow:hidden !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; cursor:pointer !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-frame { display:block !important; position:absolute !important; border:0 !important; border-radius:0 !important; overflow:hidden !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-preview { display:block !important; width:100% !important; height:100% !important; border:0 !important; border-radius:0 !important; object-fit:fill !important; opacity:1 !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-grid,#gameScreen[data-hud-design="v2680"] .world-minimap-revision { display:none !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-bottombar { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:2px !important; height:46px !important; min-height:46px !important; padding:3px 8px !important; border:0 !important; background:none !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelButton { display:flex !important; align-items:center !important; gap:5px !important; flex:1 !important; width:auto !important; min-width:0 !important; height:40px !important; padding:0 6px !important; background:none !important; border:0 !important; color:#496d83 !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-channel-icon { display:block !important; width:18px !important; height:18px !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-channel-copy { display:block !important; min-width:0 !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-channel-copy>small { display:none !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannel { display:block !important; font:650 14px/1.3 'Segoe UI',sans-serif !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelPopulation { display:block !important; padding:3px 5px !important; border-radius:6px !important; background:#edf4f6 !important; font:600 10px/1 'Segoe UI',sans-serif !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPing { display:flex !important; align-items:center !important; justify-content:center !important; gap:5px !important; flex:0 0 auto !important; width:auto !important; min-width:68px !important; height:36px !important; padding:0 7px !important; background:#eef7f7 !important; color:#327578 !important; border:0 !important; border-radius:10px !important; font:650 11px/1 'Segoe UI',sans-serif !important; cursor:pointer !important; white-space:nowrap !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPing.is-bad { background:#fff0ed !important; color:#b45446 !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPing.is-medium { background:#fff7e3 !important; color:#967025 !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPing.is-unknown { background:#edf0f2 !important; color:#77848b !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPingValue { font-size:11px !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelMenu { top:calc(100% + 8px) !important; left:auto !important; right:0 !important; width:286px !important; max-width:calc(100vw - 24px) !important; max-height:min(400px,60dvh) !important; padding:14px !important; overflow:auto !important; border-radius:18px !important; border:1px solid var(--hud-line) !important; background:white !important; box-shadow:0 12px 40px #15394c33 !important; } #gameScreen[data-hud-design="v2680"] .hud-context { position:absolute !important; top:calc(100% + 8px) !important; right:0 !important; width:286px !important; max-width:calc(100vw - 24px) !important; padding:15px !important; color:var(--hud-ink) !important; background:white !important; border:1px solid var(--hud-line) !important; border-radius:18px !important; box-shadow:0 12px 40px #15394c33 !important; z-index:5 !important; } .hud-context header { display:flex !important; justify-content:space-between !important; align-items:center !important; gap:12px !important; } .hud-context header button { width:32px !important; height:32px !important; border:0 !important; border-radius:9px !important; background:#eff5f8 !important; color:#57738a !important; } .hud-context p { font:400 13px/1.6 'Segoe UI',sans-serif !important; margin:10px 0 0 !important; color:#597383 !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapShell.is-collapsed .world-minimap-map-surface { display:none !important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget { display:block !important; position:absolute !important; top:var(--world-goal-top,260px) !important; right:20px !important; left:auto !important; bottom:auto !important; width:270px !important; max-width:none !important; max-height:var(--world-goal-max-height) !important; padding:0 !important; margin:0 !important; min-height:0 !important; border:1px solid white !important; border-radius:18px !important; background:#fffffff2 !important; color:var(--hud-ink) !important; box-shadow:var(--hud-shadow) !important; overflow:hidden !important; z-index:40 !important; } #gameScreen[data-hud-design="v2680"] #questWidget::before,#gameScreen[data-hud-design="v2680"] #questWidget::after { display:none !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-head { display:flex !important; align-items:center !important; gap:0 !important; padding:0 !important; margin:0 !important; min-height:60px !important; height:auto !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle { display:flex !important; align-items:center !important; gap:9px !important; flex:1 !important; min-width:0 !important; min-height:60px !important; height:auto !important; padding:11px 4px 11px 12px !important; border:0 !important; background:none !important; color:var(--hud-ink) !important; text-align:left !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle>img { width:29px !important; height:29px !important; flex:0 0 29px !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle>span { display:grid !important; gap:3px !important; flex:1 !important; min-width:0 !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle small { font:700 8px/1.2 'Segoe UI',sans-serif !important; letter-spacing:.09em !important; color:#8a9da8 !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle b { font:650 12px/1.3 'Segoe UI',sans-serif !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle>.hud-icon { width:15px !important; height:15px !important; flex:0 0 15px !important; color:#7691a2 !important; transform:rotate(180deg) !important; } #gameScreen[data-hud-design="v2680"] .is-collapsed .exp-goal-toggle>.hud-icon { transform:none !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-journal { width:40px !important; min-width:40px !important; height:44px !important; padding:10px !important; background:none !important; border:0 !important; color:#4c839f !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-body { display:block !important; padding:0 14px 12px !important; border-top:1px solid #edf2f5 !important; } #gameScreen[data-hud-design="v2680"] .is-collapsed .exp-goal-body { display:none !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-next { display:block !important; font:500 13px/1.5 'Segoe UI',sans-serif !important; color:#3d5c6f !important; margin:11px 0 !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-foot { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; padding:0 !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-foot small { font-size:11px !important; color:#7c929e !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-route { display:flex !important; gap:5px !important; align-items:center !important; min-height:36px !important; padding:5px 10px !important; border:0 !important; border-radius:10px !important; color:#26799f !important; background:#edf6fa !important; font-size:12px !important; } #gameScreen[data-hud-design="v2680"] #mobileQuestLauncher { display:none !important; } #gameScreen[data-hud-design="v2680"] #notificationCenter { top:calc(80px + env(safe-area-inset-top)) !important; right:310px !important; width:420px !important; max-width:calc(100vw - 24px) !important; max-height:calc(100dvh - 104px) !important; border:1px solid #e1edf3 !important; border-radius:24px !important; box-shadow:0 15px 60px #17394d33 !important; } #gameScreen[data-hud-design="v2680"] #notificationCenter>header { padding:20px !important; } #gameScreen[data-hud-design="v2680"] #notificationCenter h2 { font-size:22px !important; } #gameScreen[data-hud-design="v2680"] .notice-tabs { display:flex !important; overflow-x:auto !important; scrollbar-width:none !important; padding:0 12px 12px !important; gap:5px !important; } #gameScreen[data-hud-design="v2680"] .notice-tabs button { min-width:74px !important; padding:8px !important; border:0 !important; border-radius:12px !important; font-size:11px !important; } #gameScreen[data-hud-design="v2680"] .notice-tabs img { width:23px !important; height:23px !important; } #gameScreen[data-hud-design="v2680"] .notice-entry { grid-template-columns:34px minmax(0,1fr) !important; padding:14px !important; margin:0 0 8px !important; border:1px solid #e1edf3 !important; border-radius:15px !important; box-shadow:none !important; } #gameScreen[data-hud-design="v2680"] .notice-entry.is-unread { border-color:#b9dced !important; background:#f2faff !important; } #gameScreen[data-hud-design="v2680"] .notice-entry-icon { width:32px !important; height:32px !important; } #gameScreen[data-hud-design="v2680"] .notice-entry h3 { font-size:14px !important; line-height:1.4 !important; } #gameScreen[data-hud-design="v2680"] .notice-entry p { font-size:12px !important; line-height:1.5 !important; } #gameScreen[data-hud-design="v2680"] :is(button,[role="button"],select):focus-visible { outline:3px solid #54afe2 !important; outline-offset:3px !important; } .notification-center-list,.notice-detail-body,.qj-list,.qj-scroll,.lo-layout { scrollbar-width:thin !important; scrollbar-color:#becfda transparent !important; } /* Journal: one status row, a readable list, and one current step. */ #gameScreen #sidePanel:has(.quest-journal-new) { width:min(1100px,calc(100vw - 48px)) !important; max-width:none !important; height:min(760px,calc(100dvh - 48px)) !important; max-height:calc(100dvh - 48px) !important; padding:0 !important; border-radius:26px !important; background:#fbfdff !important; overflow:hidden !important; } #gameScreen #sidePanel:has(.quest-journal-new) #sidePanelContent { height:100% !important; padding:0 !important; overflow:hidden !important; } #gameScreen #sidePanel:has(.quest-journal-new)>.panel-close { top:19px !important; right:18px !important; width:40px !important; height:40px !important; border-radius:12px !important; background:#edf4f8 !important; color:#426681 !important; z-index:4 !important; } .quest-journal-new { height:100% !important; display:flex !important; flex-direction:column !important; color:#1b394e !important; font:400 14px/1.5 'Segoe UI',sans-serif !important; } .qj-header { display:flex !important; justify-content:space-between !important; align-items:center !important; gap:12px !important; padding:20px 76px 18px 26px !important; border-bottom:1px solid #e6eef3 !important; } .qj-header>span { display:flex !important; gap:12px !important; align-items:center !important; } .qj-header>span>.hud-icon { width:34px !important; height:34px !important; color:#2387bc !important; } .qj-header small { font-size:9px !important; font-weight:750 !important; letter-spacing:.15em !important; color:#8299a8 !important; } .qj-header h2 { font-size:25px !important; line-height:1.2 !important; margin:3px 0 0 !important; color:#17374c !important; } .qj-header>button { display:flex !important; align-items:center !important; gap:7px !important; border:0 !important; border-radius:11px !important; background:#edf5f9 !important; color:#47728a !important; padding:9px 12px !important; font:600 12px/1.2 'Segoe UI',sans-serif !important; } .qj-toolbar { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; padding:12px 24px !important; border-bottom:1px solid #e6eef3 !important; } .qj-toolbar nav { display:flex !important; gap:5px !important; } .qj-toolbar nav button { display:flex !important; align-items:center !important; gap:7px !important; padding:9px 13px !important; min-height:40px !important; border:0 !important; border-radius:11px !important; color:#6e8594 !important; background:transparent !important; font:650 12px/1 'Segoe UI',sans-serif !important; } .qj-toolbar nav button[aria-pressed="true"] { background:#e6f4fd !important; color:#147eb8 !important; } .qj-toolbar nav span { background:#ffffffaa !important; border-radius:6px !important; padding:3px 5px !important; font-size:10px !important; } .qj-toolbar select { max-width:180px !important; min-height:40px !important; padding:7px 25px 7px 10px !important; border:1px solid #dce8ef !important; border-radius:10px !important; background:#fff !important; color:#5a7689 !important; font:500 12px/1 'Segoe UI',sans-serif !important; } .qj-layout { display:grid !important; grid-template-columns:320px minmax(0,1fr) !important; flex:1 !important; min-height:0 !important; } .qj-list { overflow:auto !important; padding:14px !important; border-right:1px solid #e5edf3 !important; background:#f4f8fb !important; } .qj-row { display:flex !important; align-items:flex-start !important; gap:10px !important; width:100% !important; padding:14px 12px !important; margin:0 0 8px !important; border:1px solid transparent !important; border-radius:15px !important; background:#fff !important; box-shadow:none !important; text-align:left !important; color:#26495e !important; } .qj-row.is-selected { border-color:#80c6eb !important; background:#eef9ff !important; box-shadow:inset 3px 0 #3ba6dd !important; } .qj-row-art { width:29px !important; height:29px !important; flex:0 0 29px !important; margin-top:2px !important; } .qj-row-art img,.qj-row-art svg { width:29px !important; height:29px !important; object-fit:contain !important; } .qj-row>.hud-icon { width:13px !important; height:13px !important; flex:0 0 13px !important; margin:auto 0 !important; color:#9ab0be !important; } .qj-row-copy { display:flex !important; flex-direction:column !important; gap:5px !important; flex:1 !important; min-width:0 !important; } .qj-row-copy>small { font:600 9px/1.3 'Segoe UI',sans-serif !important; color:#8ba0ae !important; } .qj-row-copy>b { font:650 13px/1.45 'Segoe UI',sans-serif !important; color:#20455d !important; } .qj-row-copy>em { font:400 10px/1.4 'Segoe UI',sans-serif !important; color:#7e94a1 !important; } .qj-state { display:inline-flex !important; align-items:center !important; align-self:flex-start !important; gap:4px !important; color:#4486ac !important; background:#edf6fc !important; border-radius:7px !important; padding:4px 6px !important; font:650 10px/1.2 'Segoe UI',sans-serif !important; white-space:nowrap !important; } .qj-state .hud-icon { width:13px !important; height:13px !important; flex:0 0 13px !important; } .qj-state.is-ready { color:#aa7626 !important; background:#fff5d9 !important; } .qj-state.is-completed { color:#378371 !important; background:#e7f6ee !important; } .qj-state:is(.is-failed,.is-expired) { color:#927072 !important; background:#f7eeee !important; } .qj-pane { display:flex !important; flex-direction:column !important; min-width:0 !important; min-height:0 !important; background:white !important; } .qj-scroll { overflow:auto !important; min-height:0 !important; flex:1 !important; padding:26px 30px !important; } .qj-detail-meta { display:flex !important; align-items:center !important; gap:12px !important; justify-content:space-between !important; color:#8299a8 !important; font-size:11px !important; } .qj-detail h2 { font-size:25px !important; line-height:1.25 !important; font-weight:750 !important; margin:16px 0 6px !important; color:#173a50 !important; max-width:600px !important; text-shadow:none !important; } .qj-branch { color:#8a9eaa !important; font-size:11px !important; margin:0 0 22px !important; } .qj-next { display:flex !important; align-items:flex-start !important; gap:12px !important; padding:17px !important; border-radius:16px !important; border:1px solid #c6e8f7 !important; background:#f0faff !important; margin-bottom:23px !important; } .qj-next>.hud-icon { color:#31a1d3 !important; margin-top:2px !important; } .qj-next>div { display:grid !important; gap:5px !important; } .qj-next small { font-size:8px !important; letter-spacing:.09em !important; font-weight:750 !important; color:#4ba0c3 !important; } .qj-next b { font:650 14px/1.5 'Segoe UI',sans-serif !important; color:#24546e !important; } .qj-next span { display:flex !important; align-items:center !important; gap:4px !important; font-size:11px !important; color:#7494a6 !important; } .qj-next span .hud-icon { width:14px !important; height:14px !important; flex:0 0 14px !important; } .qj-next.is-ready { background:#fffbec !important; border-color:#f0dfaa !important; } .qj-next.is-completed { background:#effaf4 !important; border-color:#cbe7d6 !important; } .qj-objectives header { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; } .qj-detail h3 { font:700 13px/1.4 'Segoe UI',sans-serif !important; color:#31556c !important; margin:0 !important; } .qj-objectives header>span { font-size:11px !important; color:#8ca2af !important; } .qj-objectives ol { list-style:none !important; margin:12px 0 20px !important; padding:0 !important; } .qj-objectives li { display:flex !important; align-items:flex-start !important; gap:12px !important; padding:13px 0 !important; border-bottom:1px solid #eff3f6 !important; } .qj-objectives li>i { display:grid !important; place-items:center !important; width:26px !important; height:26px !important; flex:0 0 26px !important; border:1px solid #dde8ef !important; border-radius:50% !important; font:600 10px/1 'Segoe UI',sans-serif !important; color:#96a9b7 !important; } .qj-objectives li>i .hud-icon { width:15px !important; height:15px !important; } .qj-objectives li>div { display:grid !important; gap:3px !important; } .qj-objectives li b { font:500 13px/1.4 'Segoe UI',sans-serif !important; color:#8499a7 !important; } .qj-objectives li span { font-size:10px !important; color:#98acb8 !important; } .qj-objectives .is-current>i { border-color:#8acde8 !important; background:#e7f7ff !important; color:#218bbd !important; } .qj-objectives .is-current b { font-weight:650 !important; color:#2e5369 !important; } .qj-objectives .is-current span { color:#3298c0 !important; } .qj-objectives .is-done>i { background:#eaf7ef !important; border-color:#d0e9dc !important; color:#46947b !important; } .qj-objectives .is-done b { color:#6b8b80 !important; } .qj-story { border-top:1px solid #edf2f5 !important; padding:12px 0 !important; } .qj-story summary { display:flex !important; align-items:center !important; justify-content:space-between !important; cursor:pointer !important; color:#648091 !important; font-size:12px !important; } .qj-story p { font:400 13px/1.65 'Segoe UI',sans-serif !important; color:#758c9b !important; } .qj-rewards { margin:12px 0 !important; } .qj-rewards>div { display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin-top:10px !important; } .qj-rewards>div>div { display:flex !important; align-items:center !important; gap:7px !important; border:1px solid #e6eef2 !important; padding:8px 10px !important; border-radius:11px !important; font-size:12px !important; color:#547182 !important; } .qj-rewards img,.qj-rewards svg { width:24px !important; height:24px !important; object-fit:contain !important; } .qj-actions { display:flex !important; gap:8px !important; padding:16px 28px !important; border-top:1px solid #e7eef3 !important; background:#fff !important; flex-wrap:wrap !important; } .qj-actions button,.lo-actions button { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; min-height:44px !important; padding:10px 15px !important; border:1px solid #dce8ef !important; border-radius:12px !important; background:#fff !important; color:#507187 !important; font:650 12px/1.3 'Segoe UI',sans-serif !important; } .qj-actions .qj-primary,.lo-actions .qj-primary { background:#1c91cb !important; color:white !important; border-color:#1c91cb !important; box-shadow:0 3px 10px #198ac32b !important; } .qj-actions .qj-abandon { color:#a18283 !important; border-color:transparent !important; font-weight:500 !important; } .qj-back { display:none !important; } .qj-empty { height:100% !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; padding:30px !important; color:#8ca1ae !important; } .qj-empty>.hud-icon { width:46px !important; height:46px !important; color:#83b3cc !important; } .qj-empty h2 { font-size:20px !important; color:#47677a !important; } .qj-empty p { max-width:340px !important; line-height:1.7 !important; font-size:13px !important; } .qj-list-empty { color:#92a7b3 !important; text-align:center !important; padding:30px 8px !important; font-size:12px !important; } .qj-world { overflow:auto !important; padding:20px !important; } .qj-expiry { color:#9f8355 !important; font-size:11px !important; } /* Location details are the first destination of the minimap. */ #gameScreen #sidePanel:has(.location-overview) { width:min(1080px,calc(100vw - 48px)) !important; height:min(710px,calc(100dvh - 48px)) !important; padding:0 !important; border-radius:26px !important; overflow:hidden !important; } #gameScreen #sidePanel:has(.location-overview)>.panel-close { display:none !important; } #gameScreen #sidePanel:has(.location-overview) #sidePanelContent { height:100% !important; overflow:hidden !important; padding:0 !important; } .location-overview { height:100% !important; display:flex !important; flex-direction:column !important; color:#21455c !important; background:#fff !important; } .lo-header { display:flex !important; justify-content:space-between !important; align-items:center !important; gap:16px !important; padding:22px 26px !important; border-bottom:1px solid #e5eef3 !important; } .lo-header>div { display:flex !important; align-items:center !important; gap:12px !important; } .lo-header .hud-icon { color:#3692bf !important; } .lo-header small { font:700 9px/1.3 'Segoe UI',sans-serif !important; letter-spacing:.1em !important; color:#8ba0ad !important; } .lo-header h2 { font:750 22px/1.3 'Segoe UI',sans-serif !important; margin:3px 0 0 !important; } .lo-header>button { width:40px !important; height:40px !important; border:0 !important; border-radius:12px !important; background:#f0f6f9 !important; } .lo-layout { display:grid !important; grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr) !important; gap:24px !important; padding:24px !important; flex:1 !important; min-height:0 !important; overflow:auto !important; } .lo-map { position:relative !important; align-self:start !important; width:100% !important; overflow:hidden !important; border-radius:18px !important; background:#e9f2f6 !important; } .lo-map canvas { display:block !important; width:100% !important; height:auto !important; } .lo-you { position:absolute !important; display:flex !important; flex-direction:column !important; align-items:center !important; transform:translate(-50%,-50%) !important; color:#fff !important; text-shadow:0 1px 5px #173747 !important; } .lo-you>.hud-icon { width:30px !important; height:30px !important; color:#fff !important; fill:#289bd8 !important; } .lo-you b { background:#173e59dc !important; font-size:10px !important; padding:3px 7px !important; border-radius:6px !important; white-space:nowrap !important; } .lo-status { display:flex !important; align-items:center !important; gap:5px !important; color:#51a190 !important; font-size:11px !important; } .lo-info h3 { font-size:23px !important; margin:12px 0 !important; color:#244c64 !important; } .lo-info>p { font-size:13px !important; line-height:1.7 !important; color:#6d8797 !important; } .lo-info dl { display:flex !important; flex-wrap:wrap !important; gap:16px !important; margin:18px 0 !important; padding:14px 0 !important; border-top:1px solid #edf3f6 !important; border-bottom:1px solid #edf3f6 !important; } .lo-info dl>div { display:grid !important; gap:4px !important; } .lo-info dt { font-size:10px !important; color:#91a4af !important; } .lo-info dd { margin:0 !important; font-size:12px !important; font-weight:650 !important; color:#4a7187 !important; } .lo-info h4 { font-size:12px !important; margin:18px 0 10px !important; } .lo-exits { display:grid !important; gap:7px !important; } .lo-exits button { display:flex !important; align-items:center !important; justify-content:space-between !important; text-align:left !important; gap:12px !important; border:1px solid #e0edf4 !important; background:#f5fbff !important; padding:11px 12px !important; border-radius:12px !important; color:#4581a0 !important; } .lo-exits button>span { display:grid !important; gap:4px !important; } .lo-exits button b { font-size:12px !important; } .lo-exits button small { font-size:10px !important; color:#8199a7 !important; } .lo-exits button:disabled { background:#f7f9fb !important; color:#8a9faa !important; } .lo-exits>p { font-size:12px !important; color:#90a3af !important; } .lo-actions { display:flex !important; gap:9px !important; flex-wrap:wrap !important; border-top:1px solid #e5eef3 !important; padding:15px 24px !important; } .lo-map-error { position:absolute !important; inset:0 !important; display:grid !important; place-content:center !important; text-align:center !important; background:#f0f6fa !important; } .lo-map-error button { border:1px solid #bedced !important; padding:10px !important; border-radius:12px !important; } #gameScreen .ra-sidebar { min-width:290px !important; } #gameScreen .ra-location-detail h2 { font-size:24px !important; line-height:1.3 !important; margin:12px 0 !important; } #gameScreen .ra-location-detail>p { font-size:14px !important; line-height:1.7 !important; color:#688596 !important; } @media (max-width:1100px) and (min-width:761px) { #gameScreen[data-hud-design="v2680"] .world-wallet { left:326px !important; transform:none !important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton { left:326px !important; right:auto !important; top:68px !important; width:40px !important; height:40px !important; } #gameScreen[data-hud-design="v2680"] .world-wallet-currency { padding:0 5px !important; gap:4px !important; font-size:12px !important; } #gameScreen[data-hud-design="v2680"] .world-wallet-currency button { width:22px !important; min-width:22px !important; } .qj-layout { grid-template-columns:290px minmax(0,1fr) !important; } } @media (min-width:761px) and (max-width:960px) { #gameScreen[data-hud-design="v2680"] .world-wallet { left:0 !important; top:106px !important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton { left:258px !important; top:106px !important; } } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { body:not(.is-battling) #gameScreen[data-hud-design="v2680"] .world-topbar { top:calc(10px + env(safe-area-inset-top)) !important; left:10px !important; right:10px !important; height:126px !important; } #gameScreen[data-hud-design="v2680"] .player-chip { width:calc(100vw - 140px) !important; max-width:250px !important; height:72px !important; padding:9px !important; gap:8px !important; border-radius:19px !important; grid-template-columns:44px minmax(0,1fr) !important; } #gameScreen[data-hud-design="v2680"] .player-chip-avatar { width:44px !important; height:44px !important; border-width:1px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-copy { grid-template-rows:17px 12px 12px !important; gap:3px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-identity { gap:5px !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerName { font-size:10px !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerLevel { font-size:9px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress { grid-template-columns:10px minmax(0,1fr) 44px !important; gap:3px !important; height:12px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>small,#gameScreen[data-hud-design="v2680"] .player-chip-progress img { width:10px !important; height:10px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>i { height:4px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>em { font-size:8px !important; } #gameScreen[data-hud-design="v2680"] .world-wallet { display:flex !important; left:0 !important; top:80px !important; transform:none !important; min-height:38px !important; height:38px !important; padding:2px 4px !important; border-radius:13px !important; } #gameScreen[data-hud-design="v2680"] .world-wallet-currency { height:30px !important; gap:4px !important; padding:0 5px !important; font-size:11px !important; } #gameScreen[data-hud-design="v2680"] .world-wallet-currency-icon,#gameScreen[data-hud-design="v2680"] .world-wallet-currency-icon img { width:20px !important; height:20px !important; } #gameScreen[data-hud-design="v2680"] .world-wallet-currency button { display:none !important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton { top:78px !important; left:calc(min(250px,100vw - 140px) - 44px) !important; right:auto !important; width:44px !important; height:44px !important; border-radius:13px !important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton .hud-icon { width:23px !important; height:23px !important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #worldMinimapShell { top:calc(10px + env(safe-area-inset-top)) !important; right:10px !important; width:112px !important; height:126px !important; min-height:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; display:block !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-topbar { position:absolute !important; top:0 !important; right:0 !important; left:0 !important; width:112px !important; height:100px !important; min-height:0 !important; padding:0 !important; display:block !important; pointer-events:none !important; z-index:2 !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-place { display:none !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-server-meta { display:block !important; position:absolute !important; right:-2px !important; top:-2px !important; pointer-events:auto !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapWeatherIcon { width:44px !important; min-width:44px !important; height:44px !important; padding:9px !important; background:white !important; border:2px solid #edf6fb !important; box-shadow:0 3px 9px #173e5930 !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapWeatherIcon svg { width:23px !important; height:23px !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapCollapse { display:none !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-map-surface,#gameScreen[data-hud-design="v2680"] #worldMinimapShell.is-collapsed .world-minimap-map-surface { display:block !important; position:absolute !important; top:0 !important; left:5px !important; width:102px !important; height:102px !important; margin:0 !important; border:3px solid white !important; border-radius:50% !important; box-shadow:0 4px 16px #173e5933 !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-frame { border-radius:0 !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-bottombar { display:block !important; position:absolute !important; top:108px !important; left:0 !important; width:112px !important; height:44px !important; min-height:0 !important; padding:0 !important; border:0 !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelButton { display:flex !important; justify-content:center !important; width:112px !important; height:44px !important; min-height:44px !important; gap:4px !important; padding:2px 3px !important; border-radius:12px !important; background:#fffffff2 !important; box-shadow:0 2px 8px #173e591a !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-channel-icon { width:14px !important; height:14px !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannel { font-size:10px !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelPopulation { display:none !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPing { position:absolute !important; left:20px !important; top:-44px !important; min-width:72px !important; height:44px !important; padding:10px 5px !important; border:0 !important; border-radius:12px !important; background:transparent !important; color:white !important; z-index:3 !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPingValue { font-size:10px !important; padding:4px 10px !important; border:2px solid white !important; border-radius:12px !important; background:#264e67 !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-ping-bars { display:none !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelMenu,#gameScreen[data-hud-design="v2680"] .hud-context { top:162px !important; width:min(320px,calc(100vw - 20px)) !important; right:0 !important; z-index:20 !important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget { top:calc(150px + env(safe-area-inset-top)) !important; left:10px !important; right:auto !important; width:calc(100vw - 140px) !important; max-width:250px !important; max-height:calc(100dvh - 240px) !important; border-radius:15px !important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget:not(.is-collapsed) { width:min(340px,calc(100vw - 20px)) !important; max-width:none !important; overflow:auto !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-head,#gameScreen[data-hud-design="v2680"] .exp-goal-toggle { min-height:52px !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle { gap:6px !important; padding:8px 2px 8px 9px !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle>img { width:25px !important; height:25px !important; flex-basis:25px !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle b { font-size:12px !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle small { font-size:8px !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-journal { width:44px !important; min-width:44px !important; padding:11px !important; } #gameScreen[data-hud-design="v2680"] #notificationCenter { top:calc(10px + env(safe-area-inset-top)) !important; left:10px !important; right:10px !important; bottom:calc(84px + env(safe-area-inset-bottom)) !important; width:auto !important; height:auto !important; min-height:0 !important; max-width:none !important; max-height:none !important; border-radius:21px !important; } #gameScreen #sidePanel:has(.quest-journal-new),#gameScreen #sidePanel:has(.location-overview) { inset:calc(10px + env(safe-area-inset-top)) 10px calc(84px + env(safe-area-inset-bottom)) !important; transform:none !important; width:auto !important; max-width:none !important; height:auto !important; max-height:none !important; border-radius:22px !important; } #gameScreen #sidePanel:has(.quest-journal-new)>.panel-close { top:13px !important; right:12px !important; width:36px !important; height:36px !important; } .qj-header { padding:16px 58px 14px 16px !important; } .qj-header>span { gap:8px !important; } .qj-header>span>.hud-icon { width:26px !important; height:26px !important; } .qj-header small { font-size:7px !important; } .qj-header h2 { font-size:21px !important; } .qj-header>button { padding:9px !important; font-size:0 !important; gap:0 !important; } .qj-toolbar { padding:10px 12px !important; flex-wrap:wrap !important; gap:7px !important; } .qj-toolbar nav { width:100% !important; justify-content:space-between !important; gap:3px !important; } .qj-toolbar nav button { padding:8px 6px !important; font-size:10px !important; min-height:40px !important; gap:4px !important; } .qj-toolbar select { width:100% !important; max-width:none !important; min-height:36px !important; background:#f7fafc !important; } .qj-toolbar>label { width:100% !important; } .qj-layout { display:block !important; overflow:hidden !important; } .qj-list { height:100% !important; border:0 !important; padding:10px !important; } .qj-row { padding:14px !important; margin-bottom:8px !important; } .qj-row-copy>b { font-size:14px !important; } .qj-row-copy>em { font-size:11px !important; } .qj-pane { display:none !important; height:100% !important; } .quest-journal-new.is-detail .qj-list,.quest-journal-new.is-detail .qj-toolbar { display:none !important; } .quest-journal-new.is-detail .qj-pane { display:flex !important; } .qj-scroll { padding:16px 18px !important; } .qj-back { display:flex !important; align-items:center !important; gap:5px !important; border:0 !important; background:none !important; color:#6a8ca1 !important; font-size:12px !important; padding:5px 0 14px !important; } .qj-back .hud-icon { transform:rotate(180deg) !important; width:16px !important; height:16px !important; } .qj-detail h2 { font-size:22px !important; margin-top:14px !important; } .qj-next { padding:14px !important; gap:9px !important; } .qj-next b { font-size:13px !important; } .qj-actions { padding:12px 16px !important; gap:7px !important; } .qj-actions button { flex:1 !important; font-size:11px !important; padding:9px 10px !important; } .qj-actions .qj-abandon { flex:none !important; width:100% !important; min-height:30px !important; padding:5px !important; } .lo-header { padding:16px !important; } .lo-header h2 { font-size:18px !important; } .lo-header small { font-size:8px !important; } .lo-layout { display:block !important; padding:16px !important; } .lo-info { margin-top:18px !important; } .lo-info h3 { font-size:21px !important; } .lo-actions { padding:12px 16px !important; } .lo-actions button { flex:1 !important; font-size:11px !important; padding:9px !important; } #gameScreen .ra-sidebar { min-width:0 !important; } } @media (max-width:360px) { #gameScreen[data-hud-design="v2680"] #worldPlayerName { display:none !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress { grid-template-columns:9px minmax(0,1fr) !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>em { display:none !important; } #gameScreen[data-hud-design="v2680"] .world-wallet-currency { padding:0 3px !important; font-size:10px !important; } #gameScreen[data-hud-design="v2680"] .world-wallet-currency-icon,#gameScreen[data-hud-design="v2680"] .world-wallet-currency-icon img { width:16px !important; height:16px !important; } } @media (max-height:560px) and (orientation:landscape) and (pointer:coarse), (max-height:560px) and (orientation:landscape) and (max-width:760px) { body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget { top:90px !important; left:10px !important; width:230px !important; } #gameScreen[data-hud-design="v2680"] .world-wallet { left:268px !important; top:3px !important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton { left:268px !important; top:48px !important; } #gameScreen[data-hud-design="v2680"] #notificationCenter { top:10px !important; left:auto !important; right:140px !important; bottom:10px !important; width:360px !important; } } @media (max-height:560px) and (min-width:761px) and (pointer:fine) { #gameScreen[data-hud-design="v2680"] .world-minimap-map-surface { height:86px !important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget { left:20px !important; right:auto !important; top:185px !important; width:302px !important; max-height:130px !important; overflow:auto !important; } } @media (prefers-reduced-motion:reduce) { #gameScreen[data-hud-design="v2680"] :is(.player-chip,.world-minimap,.quest-widget,.qj-row) { transition:none !important; animation:none !important; } } /* 2.70: light trainer HUD, illustrated journal and a map-first atlas. */ #gameScreen[data-hud-design="v2680"] .player-chip { width:338px !important; height:92px !important; padding:3px !important; grid-template-columns:72px minmax(0,1fr) !important; gap:13px !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; color:white !important; text-shadow:0 1px 4px #19384d80 !important; } #gameScreen[data-hud-design="v2680"] .player-chip-avatar { width:72px !important; height:72px !important; border:2px solid white !important; box-shadow:0 2px 7px #17394b33 !important; } #gameScreen[data-hud-design="v2680"] .player-chip-copy { grid-template-rows:24px 20px 20px !important; gap:3px !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerName { font-size:18px !important; color:white !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerLevel { font-size:12px !important; color:white !important; font-weight:650 !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerLevel::before { content:'' !important; display:inline-block !important; vertical-align:middle !important; width:14px !important; height:14px !important; margin-right:3px !important; background:url('/assets/quest-v2700/xp.webp') center/contain no-repeat !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress { height:20px !important; grid-template-columns:16px minmax(0,1fr) 63px !important; gap:6px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>small,#gameScreen[data-hud-design="v2680"] .player-chip-progress img { width:16px !important; height:16px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>i { height:10px !important; background:#163a4c66 !important; box-shadow:0 1px 4px #12334526 !important; outline:1px solid #ffffff4d !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>em { color:white !important; font-size:10px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>i>b { background:#50e1cb !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress.is-energy>i>b { background:#ffcf47 !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-frame::after,#gameScreen[data-hud-design="v2680"] .world-minimap-preview::before,#gameScreen[data-hud-design="v2680"] .world-minimap-preview::after { display:none !important; background:none !important; box-shadow:none !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-frame,#gameScreen[data-hud-design="v2680"] .world-minimap-map-surface { box-shadow:none !important; filter:none !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-preview { filter:none !important; opacity:1 !important; border-radius:0 !important; } #gameScreen[data-hud-design="v2680"] .hud-context { padding:18px !important; width:308px !important; border-radius:20px !important; box-shadow:0 8px 26px #163e5126 !important; } .hud-weather-scene { display:flex !important; align-items:center !important; gap:16px !important; padding:20px 0 !important; } #gameScreen[data-hud-design="v2680"] .hud-weather-scene>svg,#gameScreen[data-hud-design="v2680"] .hud-weather-scene>img { display:block !important; width:66px !important; height:66px !important; flex:0 0 66px !important; padding:10px !important; border-radius:20px !important; background:#edf8fc !important; } .hud-weather-scene>div { display:grid !important; gap:6px !important; min-width:0 !important; } .hud-weather-scene small { color:#7693a3 !important; font-size:11px !important; } .hud-weather-scene b { font-size:19px !important; color:#244a61 !important; } #gameScreen[data-hud-design="v2680"] .hud-weather-scene p { margin:0 !important; font-size:11px !important; color:#78909e !important; } .hud-world-clock { display:flex !important; align-items:center !important; justify-content:space-between !important; border-top:1px solid #e5eff3 !important; padding:14px 0 0 !important; } .hud-world-clock time { font-size:27px !important; font-weight:650 !important; font-variant-numeric:tabular-nums !important; letter-spacing:0 !important; color:#274d63 !important; } .hud-world-clock span { font-size:11px !important; color:#78909e !important; } .hud-ping-value { display:block !important; font-size:28px !important; color:#2c8b8a !important; margin-top:16px !important; } .qj-categories { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; padding:16px 24px 4px !important; } .qj-categories button { display:flex !important; align-items:center !important; text-align:left !important; gap:12px !important; min-height:80px !important; padding:12px 15px !important; background:#f6f9fb !important; border:1px solid #e4edf2 !important; border-radius:15px !important; color:#32556a !important; box-shadow:none !important; } .qj-categories button[aria-pressed="true"] { background:#edf8fc !important; border-color:#88c9e1 !important; box-shadow:inset 0 -3px #36a4cf !important; } .qj-categories img { width:48px !important; height:48px !important; object-fit:contain !important; } .qj-categories button>span { display:grid !important; gap:4px !important; min-width:0 !important; flex:1 !important; } .qj-categories b { font-size:15px !important; } .qj-categories small { font-size:10px !important; color:#7b919f !important; } .qj-categories em { font-size:12px !important; font-weight:700 !important; font-style:normal !important; color:#588397 !important; } .qj-toolbar { padding:10px 24px !important; } .qj-toolbar>small { color:#91a4af !important; font-size:11px !important; } .qj-layout { grid-template-columns:300px minmax(0,1fr) !important; } .qj-row-art,.qj-row-art img { width:36px !important; height:36px !important; flex-basis:36px !important; } .qj-illustration { position:relative !important; margin:16px 0 8px !important; height:150px !important; border-radius:16px !important; overflow:hidden !important; background:#e6f2ed !important; } .qj-illustration>img { display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; } .qj-illustration>span { position:absolute !important; bottom:10px !important; left:12px !important; display:grid !important; place-items:center !important; width:52px !important; height:52px !important; border-radius:15px !important; background:#fffffff0 !important; box-shadow:0 2px 8px #24465533 !important; } .qj-illustration>span img { width:43px !important; height:43px !important; object-fit:contain !important; } .qj-detail h2 { font-size:24px !important; margin-top:12px !important; } .qj-next { margin:16px 0 !important; } .qj-rewards>div>div { gap:10px !important; min-height:60px !important; padding:10px 14px !important; background:#f6fafc !important; border-color:#e2edf3 !important; } .qj-rewards .quest-reward-icon-v61 { display:inline-flex !important; flex:0 0 38px !important; width:38px !important; height:38px !important; object-fit:contain !important; } .qj-rewards .quest-reward-icon-v61 img { width:100% !important; height:100% !important; object-fit:contain !important; } .qj-rewards>div>div>span { display:grid !important; gap:3px !important; } .qj-rewards b { font-size:13px !important; color:#365a70 !important; } .qj-rewards small { font-size:10px !important; color:#8b9fab !important; } .qj-progress { padding:22px 26px !important; } .qj-progress header>small { color:#7d9aa9 !important; letter-spacing:.12em !important; font-size:10px !important; } .qj-progress h2 { margin:4px 0 8px !important; font-size:27px !important; } .qj-progress header p { margin:0 !important; color:#7c93a0 !important; } .qj-progress-totals { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:12px !important; margin:22px 0 !important; } .qj-progress-totals article { display:grid !important; grid-template-columns:28px 1fr !important; align-items:center !important; gap:5px 10px !important; padding:16px !important; border-radius:15px !important; background:#f1f8fb !important; } .qj-progress-totals svg { color:#479eb8 !important; } .qj-progress-totals b { font-size:26px !important; } .qj-progress-totals span { grid-column:1/-1 !important; font-size:11px !important; color:#7b929e !important; } .qj-progress-categories { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:12px !important; } .qj-progress-categories button { display:flex !important; align-items:center !important; gap:10px !important; padding:15px 12px !important; background:white !important; border:1px solid #dfeaf0 !important; border-radius:14px !important; text-align:left !important; color:#365b70 !important; } .qj-progress-categories img { width:42px !important; height:42px !important; object-fit:contain !important; } .qj-progress-categories button>span { flex:1 !important; display:grid !important; gap:6px !important; } .qj-progress-categories small { font-size:10px !important; color:#8299a6 !important; } .qj-progress-categories i { display:block !important; height:4px !important; background:#edf2f5 !important; border-radius:4px !important; overflow:hidden !important; } .qj-progress-categories u { display:block !important; height:100% !important; background:#50b9ac !important; } .qj-progress h3 { margin:28px 0 14px !important; font-size:16px !important; } .qj-progress h3>span { color:#91a5b1 !important; margin-left:6px !important; } .qj-completed-grid { display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; } .qj-completed-grid article { display:flex !important; gap:12px !important; padding:14px !important; border:1px solid #e5edf1 !important; border-radius:12px !important; } .qj-completed-grid article>img { width:34px !important; height:34px !important; object-fit:contain !important; } .qj-completed-grid article>div { display:grid !important; gap:5px !important; } .qj-completed-grid small { font-size:10px !important; color:#8da0ad !important; } .qj-completed-grid b { font-size:13px !important; } .qj-completed-grid span { color:#359a82 !important; font-size:10px !important; } .qj-completed-grid .hud-icon { width:15px !important; height:15px !important; } .qj-visited { margin-top:20px !important; border-top:1px solid #e4edf2 !important; padding-top:16px !important; } .qj-visited summary { display:flex !important; gap:10px !important; align-items:center !important; cursor:pointer !important; } .qj-visited summary svg { margin-left:auto !important; } .qj-visited>div { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:12px !important; margin-top:20px !important; color:#718e9c !important; font-size:12px !important; } .qj-visited .hud-icon { color:#4db394 !important; width:17px !important; height:17px !important; } #gameScreen .side-panel.is-regions-panel.has-region-atlas { width:min(1640px,calc(100vw - 32px)) !important; height:calc(100dvh - 32px) !important; max-height:none !important; border-radius:22px !important; } .ra-trainer { display:flex !important; align-items:center !important; gap:10px !important; flex-shrink:0 !important; } .ra-trainer>.trainer-avatar { display:block !important; width:42px !important; height:42px !important; border:2px solid white !important; border-radius:50% !important; background-color:#ebf6fa !important; box-shadow:0 1px 5px #22465a26 !important; } .ra-trainer>div { display:grid !important; gap:2px !important; } .ra-trainer b { font-size:13px !important; color:#294d63 !important; } .ra-trainer small { color:#7b98a7 !important; font-size:10px !important; } .ra-header { gap:22px !important; padding:12px 18px !important; } .ra-title { color:#7c98a7 !important; font-size:13px !important; margin-left:auto !important; } .ra-title h2 { font-size:13px !important; line-height:1.2 !important; margin:0 !important; } .ra-header-actions { margin-left:0 !important; } #gameScreen .has-region-atlas #sidePanelContent { scrollbar-gutter:auto !important; } .ra-header nav { order:1 !important; } .ra-header-actions { order:2 !important; } .ra-layout { position:relative !important; grid-template-columns:minmax(0,1fr) 300px !important; } .ra-map-section { padding:0 !important; gap:0 !important; position:relative !important; display:block !important; min-height:0 !important; } .ra-viewport { height:100% !important; border:0 !important; border-radius:0 !important; min-height:0 !important; background:#97d8df !important; } .ra-toolbar { position:absolute !important; top:16px !important; left:16px !important; right:16px !important; z-index:5 !important; gap:10px !important; pointer-events:none !important; } .ra-toolbar>* { pointer-events:auto !important; box-shadow:0 2px 10px #244d651c !important; border-radius:12px !important; } .ra-map-footer { position:absolute !important; bottom:14px !important; left:16px !important; right:16px !important; background:transparent !important; pointer-events:none !important; border:0 !important; padding:0 !important; } .ra-current-location { padding:10px 14px !important; border-radius:13px !important; background:#fffffff2 !important; box-shadow:0 2px 9px #244d6526 !important; } .ra-legend { padding:9px 12px !important; background:#fffffff0 !important; border-radius:12px !important; } .ra-map-controls { right:16px !important; bottom:86px !important; left:auto !important; flex-direction:column !important; padding:5px !important; border:1px solid #dfedf4 !important; border-radius:14px !important; box-shadow:0 3px 12px #20445126 !important; } .ra-map-controls .ra-button { width:42px !important; height:42px !important; min-height:42px !important; padding:9px !important; border:0 !important; } .ra-map-controls [data-ra-zoom="reset"] { font-size:9px !important; } @media (min-width:761px) and (max-height:500px) { .ra-map-controls { flex-direction:row !important; bottom:66px !important; right:12px !important; } .ra-map-controls [data-ra-zoom="reset"] { display:none !important; } .ra-map-controls [data-ra-scale] { font-size:10px !important; } } .ra-player>span { font-size:11px !important; white-space:nowrap !important; } .ra-player>span small { display:block !important; font-size:9px !important; font-weight:400 !important; } .ra-details-toggle,.ra-details-close { display:none !important; } .qj-empty-actions { display:flex !important; justify-content:center !important; flex-wrap:wrap !important; gap:8px !important; margin-top:12px !important; } .qj-empty-actions button { border:1px solid #d6e9f2 !important; border-radius:12px !important; padding:12px !important; background:white !important; color:#357b9b !important; font-size:12px !important; } .ra-sidebar { background:white !important; } .ra-side-content { padding:20px !important; } .ra-pane-tabs .ra-button { min-height:44px !important; } @media (max-width:1100px) and (min-width:761px) { #gameScreen[data-hud-design="v2680"] .player-chip { width:304px !important; grid-template-columns:64px minmax(0,1fr) !important; } #gameScreen[data-hud-design="v2680"] .player-chip-avatar { width:64px !important; height:64px !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerName { font-size:16px !important; } .qj-categories small { display:none !important; } .qj-categories img { width:38px !important; height:38px !important; } .qj-progress-categories { grid-template-columns:1fr !important; } } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { #gameScreen[data-hud-design="v2680"] .player-chip { width:calc(100vw - 140px) !important; max-width:260px !important; height:70px !important; padding:0 !important; gap:9px !important; grid-template-columns:52px minmax(0,1fr) !important; } #gameScreen[data-hud-design="v2680"] .player-chip-avatar { width:52px !important; height:52px !important; border-width:2px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-copy { grid-template-rows:18px 15px 15px !important; gap:2px !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerName { display:block !important; font-size:11px !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerLevel { font-size:9px !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerLevel::before { width:10px !important; height:10px !important; margin-right:2px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-identity { gap:5px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress { grid-template-columns:12px minmax(0,1fr) !important; height:15px !important; gap:4px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>small,#gameScreen[data-hud-design="v2680"] .player-chip-progress img { width:12px !important; height:12px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>i { height:7px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>em { display:none !important; } .qj-categories { gap:6px !important; padding:10px 12px 0 !important; } .qj-categories button { flex-direction:column !important; gap:4px !important; min-height:76px !important; padding:6px 3px !important; position:relative !important; text-align:center !important; } .qj-categories button>span { flex:0 !important; } .qj-categories img { width:33px !important; height:33px !important; } .qj-categories b { font-size:10px !important; } .qj-categories small,.qj-toolbar>small { display:none !important; } .qj-categories em { position:absolute !important; top:6px !important; right:7px !important; font-size:9px !important; } .qj-toolbar { padding:8px 10px !important; } .qj-toolbar nav { width:100% !important; justify-content:space-between !important; gap:0 !important; } .qj-toolbar nav button { padding:8px 6px !important; gap:4px !important; font-size:11px !important; min-height:44px !important; } .qj-toolbar nav span { font-size:9px !important; } .quest-journal-new.is-detail .qj-categories,.quest-journal-new.is-detail .qj-toolbar { display:none !important; } .qj-layout { display:block !important; } .qj-illustration { height:126px !important; border-radius:12px !important; } .qj-detail h2 { font-size:21px !important; } .qj-rewards>div { display:grid !important; grid-template-columns:1fr !important; } .qj-rewards>div>div { padding:10px 12px !important; min-height:60px !important; } .qj-progress { padding:18px 14px !important; } .qj-progress h2 { font-size:24px !important; } .qj-progress header p { font-size:12px !important; } .qj-progress-totals { grid-template-columns:1fr 1fr !important; gap:8px !important; margin:16px 0 !important; } .qj-progress-totals article { padding:12px !important; } .qj-progress-categories,.qj-completed-grid,.qj-visited>div { grid-template-columns:1fr !important; } #gameScreen .side-panel.is-regions-panel.has-region-atlas { inset:0 !important; left:0 !important; top:0 !important; transform:none !important; width:100vw !important; height:100dvh !important; max-width:none !important; max-height:none !important; border:0 !important; border-radius:0 !important; } #gameScreen .side-panel.is-regions-panel.has-region-atlas>.panel-close { display:none !important; } .region-atlas { position:relative !important; display:grid !important; grid-template-rows:auto minmax(0,1fr) !important; background:#98d8e0 !important; } .ra-header { gap:8px !important; padding:calc(8px + env(safe-area-inset-top)) 10px 8px !important; flex-wrap:nowrap !important; } .ra-header .ra-title { display:none !important; } .ra-trainer { gap:6px !important; margin-right:auto !important; } .ra-trainer>.trainer-avatar { width:38px !important; height:38px !important; } .ra-trainer b { font-size:11px !important; max-width:90px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } .ra-header nav { gap:2px !important; } .ra-header nav .ra-button { font-size:10px !important; padding:7px !important; min-height:44px !important; border:0 !important; } .ra-header .ra-icon { width:42px !important; min-height:44px !important; } .ra-header .ra-test { display:none !important; } .ra-layout { display:block !important; overflow:hidden !important; } .ra-map-section { display:block !important; padding:0 !important; height:100% !important; } .ra-viewport { min-height:0 !important; height:100% !important; border-radius:0 !important; } .ra-toolbar { top:10px !important; left:10px !important; right:10px !important; gap:8px !important; } .ra-region-button { min-width:92px !important; font-size:14px !important; min-height:44px !important; padding:8px 10px !important; } .ra-search-wrap { width:auto !important; flex:1 !important; } .ra-search { min-height:44px !important; padding:0 10px !important; } .ra-search input { font-size:11px !important; } .ra-map-footer { left:10px !important; right:10px !important; bottom:calc(70px + env(safe-area-inset-bottom)) !important; } .ra-current-location { padding:9px 12px !important; max-width:calc(100% - 65px) !important; } .ra-current-location small { font-size:8px !important; } .ra-current-location b { font-size:12px !important; } .ra-map-footer .ra-legend { display:none !important; } .ra-map-controls { right:10px !important; bottom:calc(130px + env(safe-area-inset-bottom)) !important; padding:3px !important; } .ra-map-controls .ra-button { min-height:44px !important; height:44px !important; width:44px !important; } .ra-map-controls [data-ra-scale] { font-size:10px !important; padding:3px !important; } .ra-map-controls [data-ra-zoom="reset"] { display:none !important; } .ra-details-toggle { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:9px !important; position:absolute !important; bottom:calc(12px + env(safe-area-inset-bottom)) !important; left:10px !important; right:10px !important; min-height:48px !important; padding:10px 14px !important; background:#fffffff2 !important; color:#365a70 !important; border:1px solid #fff !important; border-radius:14px !important; box-shadow:0 3px 12px #1c49652b !important; z-index:5 !important; } .ra-details-toggle>span { flex:1 !important; text-align:left !important; font-size:13px !important; } #gameScreen .ra-sidebar { display:none !important; position:absolute !important; z-index:6 !important; bottom:0 !important; left:0 !important; right:0 !important; border-radius:22px 22px 0 0 !important; border:1px solid #d6e6ed !important; box-shadow:0 -4px 25px #183d592b !important; max-height:66% !important; overflow:auto !important; min-width:0 !important; padding-bottom:env(safe-area-inset-bottom) !important; } #gameScreen .is-details-open .ra-sidebar { display:block !important; } .is-details-open .ra-details-toggle { display:none !important; } .ra-details-close { display:flex !important; align-items:center !important; justify-content:center !important; background:white !important; color:#7295a9 !important; width:100% !important; height:32px !important; border:0 !important; } .ra-pane-tabs { padding:0 14px 10px !important; } .ra-side-content { padding:16px !important; overflow:visible !important; } .ra-player>span { max-width:180px !important; font-size:10px !important; } .region-atlas .ra-canvas>.ra-marker { width:36px !important; height:36px !important; } .region-atlas .ra-marker>i { width:12px !important; height:12px !important; border-width:2px !important; } .region-atlas .ra-marker.is-city>i { width:16px !important; height:16px !important; } } @media (max-width:360px) { #gameScreen[data-hud-design="v2680"] .player-chip { grid-template-columns:44px minmax(0,1fr) !important; gap:7px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-avatar { width:44px !important; height:44px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-identity { flex-wrap:wrap !important; gap:1px 4px !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerName { font-size:9px !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerLevel { font-size:8px !important; } .qj-toolbar nav button { font-size:10px !important; padding:8px 4px !important; } .qj-categories b { font-size:9px !important; } .ra-trainer b { max-width:60px !important; font-size:10px !important; } .ra-header nav .ra-button { font-size:9px !important; padding:6px !important; } } @media (prefers-reduced-motion:no-preference) { .qj-row,.qj-categories button { transition:background-color .15s,border-color .15s !important; } } /* Mobile 2.71.1: short trainer meters, one map dock and optional controls. */ #gameScreen[data-hud-design="v2680"] .exp-goal-mobile-icon { display:none !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle .exp-goal-compact-label { display:none !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-full-title { display:none !important; } #gameScreen[data-hud-design="v2680"] .club-view-toggle { display:none !important; } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { #gameScreen[data-hud-design="v2680"] { --mobile-map-size:120px !important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] .world-topbar { height:80px !important; } #gameScreen[data-hud-design="v2680"] .world-wallet { display:none !important; } #gameScreen[data-hud-design="v2680"] .player-chip { width:calc(100vw - 168px) !important; max-width:212px !important; height:76px !important; grid-template-columns:48px minmax(0,1fr) !important; gap:7px !important; padding:0 !important; } #gameScreen[data-hud-design="v2680"] .player-chip-avatar { width:48px !important; height:48px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-copy { grid-template-rows:20px 21px 21px !important; gap:1px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-identity { gap:5px !important; flex-wrap:nowrap !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerName { display:block !important; font-size:13px !important; letter-spacing:.01em !important; text-shadow:0 1px 3px #16364bd9 !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerLevel { font-size:10px !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerLevel::before { display:none !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress { grid-template-columns:26px minmax(0,1fr) !important; height:21px !important; gap:3px !important; max-width:132px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>small,#gameScreen[data-hud-design="v2680"] .player-chip-progress img { width:26px !important; height:26px !important; max-width:26px !important; max-height:26px !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>i { height:6px !important; max-width:106px !important; background:#193d5a80 !important; outline:1px solid #ffffff40 !important; box-shadow:0 1px 4px #183a5240 !important; } #gameScreen[data-hud-design="v2680"] .player-chip-progress>em { display:none !important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton { top:86px !important; left:calc(100vw - 210px) !important; right:auto !important; width:44px !important; height:44px !important; border-radius:50% !important; background:#fffffff0 !important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #worldMinimapShell { width:var(--mobile-map-size) !important; height:136px !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-topbar { width:100% !important; height:120px !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-map-surface,#gameScreen[data-hud-design="v2680"] #worldMinimapShell.is-collapsed .world-minimap-map-surface { left:0 !important; width:var(--mobile-map-size) !important; height:var(--mobile-map-size) !important; border-width:2px !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-server-meta { right:-2px !important; top:-2px !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapWeatherIcon { padding:8px !important; background:#fffffff5 !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapWeatherIcon svg { width:27px !important; height:27px !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-bottombar { top:92px !important; left:0 !important; width:var(--mobile-map-size) !important; height:44px !important; min-height:44px !important; border-radius:22px !important; background:#1d435eea !important; box-shadow:0 2px 6px #14354a30 !important; display:flex !important; padding:0 !important; align-items:center !important; z-index:3 !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelButton { position:static !important; width:64px !important; flex:0 0 64px !important; height:44px !important; min-height:44px !important; gap:3px !important; padding:0 3px 0 6px !important; color:white !important; background:transparent !important; border-radius:22px 0 0 22px !important; box-shadow:none !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-channel-icon { display:none !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannel { font-size:11px !important; max-width:none !important; width:auto !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-channel-copy { flex:0 0 auto !important; } #gameScreen[data-hud-design="v2680"] .world-minimap-channel-chevron { display:block !important; font-size:12px !important; color:#c5dfec !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPing { position:static !important; width:56px !important; min-width:56px !important; flex:0 0 56px !important; height:44px !important; padding:0 3px !important; border-radius:0 22px 22px 0 !important; color:#e2f6f5 !important; background:transparent !important; border-left:1px solid #ffffff26 !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPingValue { font-size:10px !important; border:0 !important; padding:0 !important; background:none !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPing.is-bad { color:#ffb5a7 !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPing.is-medium { color:#ffe2a0 !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPing.is-unknown { color:#c5dfec !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPing:is(.is-unknown,.is-medium,.is-bad) { background:transparent !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelMenu,#gameScreen[data-hud-design="v2680"] .hud-context { top:144px !important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget { top:calc(96px + env(safe-area-inset-top)) !important; left:10px !important; width:calc(100vw - 224px) !important; max-width:190px !important; border:0 !important; border-radius:16px !important; background:#fffffff0 !important; overflow:visible !important; contain:layout !important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget:not(.is-collapsed) { width:calc(100vw - 224px) !important; max-width:190px !important; overflow:visible !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-head,#gameScreen[data-hud-design="v2680"] .exp-goal-toggle { min-height:44px !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle { padding:5px 7px 5px 11px !important; gap:7px !important; width:100% !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle>img,#gameScreen[data-hud-design="v2680"] .exp-goal-toggle>.hud-icon { display:none !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle small { font-size:7px !important; letter-spacing:.03em !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle b { font-size:10px !important; -webkit-line-clamp:1 !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-mobile-icon { display:grid !important; position:relative !important; flex:0 0 30px !important; width:30px !important; height:32px !important; place-items:center !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-mobile-icon img { width:27px !important; height:27px !important; object-fit:contain !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-mobile-icon svg { position:absolute !important; width:12px !important; height:12px !important; bottom:-3px !important; right:-3px !important; background:#e5f3f9 !important; border-radius:50% !important; padding:1px !important; color:#337794 !important; transform:rotate(180deg) !important; } #gameScreen[data-hud-design="v2680"] .is-collapsed .exp-goal-mobile-icon svg { transform:rotate(0deg) !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-head>.exp-goal-journal { display:none !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-body { position:absolute !important; top:62px !important; left:0 !important; width:min(320px,calc(100vw - 20px)) !important; max-height:calc(100dvh - 270px) !important; overflow:auto !important; padding:15px !important; border:1px solid #dcecf3 !important; border-radius:19px !important; background:#fffffff7 !important; box-shadow:0 6px 20px #1b3a532b !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-full-title { display:block !important; font-size:15px !important; line-height:1.4 !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-body .exp-goal-journal { display:flex !important; width:100% !important; align-items:center !important; justify-content:center !important; gap:8px !important; border-top:1px solid #e0ebf2 !important; margin-top:12px !important; font-size:12px !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-route { min-height:44px !important; } #gameScreen[data-hud-design="v2680"] .hud-context header button { width:44px !important; height:44px !important; } #gameScreen[data-hud-design="v2680"] .club-radio { width:222px !important; height:52px !important; min-height:0 !important; padding:4px !important; left:10px !important; bottom:calc(94px + env(safe-area-inset-bottom)) !important; flex-wrap:nowrap !important; align-items:center !important; gap:0 !important; border-radius:17px !important; overflow:visible !important; } #gameScreen[data-hud-design="v2680"] .club-radio .club-radio-open { min-width:0 !important; flex:1 !important; padding:0 3px !important; height:44px !important; gap:5px !important; } #gameScreen[data-hud-design="v2680"] .club-radio .club-radio-open>span { min-width:0 !important; } #gameScreen[data-hud-design="v2680"] .club-radio .club-radio-open small { display:none !important; } #gameScreen[data-hud-design="v2680"] .club-radio .club-radio-open strong { width:100% !important; max-width:85px !important; font-size:10px !important; } #gameScreen[data-hud-design="v2680"] .club-radio .club-avatar { width:28px !important; height:28px !important; } #gameScreen[data-hud-design="v2680"] .club-radio .club-sound,#gameScreen[data-hud-design="v2680"] .club-view-toggle { display:grid !important; place-items:center !important; width:44px !important; height:44px !important; min-width:44px !important; padding:9px !important; border-radius:12px !important; } #gameScreen[data-hud-design="v2680"] .club-view-toggle[aria-expanded="true"] { background:#ffffff26 !important; } #gameScreen[data-hud-design="v2680"] .club-radio .club-view { display:none !important; position:absolute !important; right:0 !important; bottom:calc(100% + 8px) !important; width:222px !important; margin:0 !important; padding:6px !important; gap:2px !important; border:1px solid #d9e9f4 !important; border-radius:16px !important; background:#f6fbff !important; color:#385d75 !important; box-shadow:0 4px 14px #153b5426 !important; } #gameScreen[data-hud-design="v2680"] .club-radio.is-view-open .club-view { display:flex !important; } #gameScreen[data-hud-design="v2680"] .club-view button { min-width:44px !important; height:44px !important; min-height:44px !important; padding:4px 6px !important; } #gameScreen[data-hud-design="v2680"] .club-view button[data-zoom="overview"] { flex:1 !important; font-size:11px !important; } #gameScreen[data-hud-design="v2680"]:has(#contextAction.is-ready) .club-radio { bottom:calc(220px + env(safe-area-inset-bottom)) !important; } } @media (max-width:360px) { #gameScreen[data-hud-design="v2680"] .player-chip-identity { flex-wrap:wrap !important; gap:1px 5px !important; align-content:center !important; } #gameScreen[data-hud-design="v2680"] .player-chip-copy { grid-template-rows:30px 21px 21px !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerName { font-size:11px !important; } #gameScreen[data-hud-design="v2680"] #worldPlayerLevel { font-size:9px !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle small { display:none !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle { padding:5px 6px !important; gap:4px !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle .exp-goal-summary { display:none !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle .exp-goal-compact-label { display:block !important; font-size:10px !important; } } @media (max-height:560px) and (orientation:landscape) and (pointer:coarse), (max-height:560px) and (orientation:landscape) and (max-width:760px) { #gameScreen[data-hud-design="v2680"] #notificationCenterButton { left:224px !important; top:8px !important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget { top:calc(96px + env(safe-area-inset-top)) !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-body { top:0 !important; left:202px !important; max-height:calc(100dvh - 180px) !important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelMenu,#gameScreen[data-hud-design="v2680"] .hud-context { position:fixed !important; top:10px !important; right:10px !important; max-height:calc(100dvh - 20px) !important; overflow:auto !important; } #gameScreen[data-hud-design="v2680"] .club-radio { left:auto !important; right:10px !important; bottom:calc(78px + env(safe-area-inset-bottom)) !important; } #gameScreen[data-hud-design="v2680"]:has(#contextAction.is-ready) .club-radio { bottom:calc(78px + env(safe-area-inset-bottom)) !important; } } @media (prefers-reduced-motion:no-preference) { #gameScreen[data-hud-design="v2680"] .exp-goal-mobile-icon svg { transition:transform .18s ease !important; } } /* A quiet mobile HUD: two small shortcuts and camera controls on the map. */ #gameScreen[data-hud-design="v2680"] .hud-camera-toggle { display:none !important; } #gameScreen[data-hud-design="v2680"] .hud-camera-stepper { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin:2px 0 12px !important; } #gameScreen[data-hud-design="v2680"] .hud-camera-stepper button { width:48px !important; height:48px !important; padding:0 !important; border:1px solid #dce9f0 !important; border-radius:15px !important; background:#edf6fb !important; color:#245772 !important; font-size:24px !important; } #gameScreen[data-hud-design="v2680"] .hud-camera-stepper button:disabled { opacity:.4 !important; } #gameScreen[data-hud-design="v2680"] .hud-camera-stepper output { font-size:23px !important; font-weight:750 !important; color:#24495f !important; font-variant-numeric:tabular-nums !important; } #gameScreen[data-hud-design="v2680"] .hud-camera-reset,#gameScreen[data-hud-design="v2680"] .hud-camera-overview { width:100% !important; min-height:44px !important; border:0 !important; border-radius:13px !important; font-size:13px !important; font-weight:650 !important; } #gameScreen[data-hud-design="v2680"] .hud-camera-reset { background:#eaf5fa !important; color:#28627d !important; } #gameScreen[data-hud-design="v2680"] .hud-camera-overview { margin-top:6px !important; background:#fff !important; color:#28627d !important; } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { #gameScreen[data-hud-design="v2680"] .hud-camera-toggle { display:grid !important; place-items:center !important; position:absolute !important; top:-2px !important; left:-2px !important; width:44px !important; height:44px !important; padding:11px !important; border:1px solid #dceaf1 !important; border-radius:50% !important; background:#fffffff5 !important; color:#367896 !important; box-shadow:0 2px 7px #163f5820 !important; z-index:4 !important; } #gameScreen[data-hud-design="v2680"] .hud-camera-toggle svg { width:22px !important; height:22px !important; } #gameScreen[data-hud-design="v2680"] .hud-camera-toggle[aria-expanded="true"] { color:#fff !important; background:#278eb7 !important; border-color:#278eb7 !important; } #gameScreen[data-hud-design="v2680"] .hud-camera-toggle[aria-expanded="true"] .hud-icon { color:#fff !important; stroke:currentColor !important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] .hud-camera-toggle:not([aria-expanded="true"]) { background:#173448 !important; border-color:#456479 !important; color:#eff8fc !important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] .hud-camera-toggle:not([aria-expanded="true"]) .hud-icon { color:#eff8fc !important; stroke:currentColor !important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget,body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget:not(.is-collapsed) { top:calc(96px + env(safe-area-inset-top)) !important; left:10px !important; width:108px !important; max-width:108px !important; height:44px !important; min-height:44px !important; border-radius:16px !important; background:#fffffff0 !important; box-shadow:0 2px 8px #183d5520 !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle { height:44px !important; padding:5px 9px !important; gap:5px !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle small,#gameScreen[data-hud-design="v2680"] .exp-goal-toggle .exp-goal-summary { display:none !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-toggle .exp-goal-compact-label { display:block !important; font-size:12px !important; line-height:1 !important; font-weight:700 !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-mobile-icon { flex:0 0 30px !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-body { top:52px !important; max-height:calc(100dvh - 258px) !important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton { top:86px !important; left:116px !important; right:auto !important; width:44px !important; height:44px !important; padding:11px !important; border:0 !important; border-radius:16px !important; background:#fffffff0 !important; box-shadow:0 2px 8px #183d5520 !important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton>svg { width:22px !important; height:22px !important; } #gameScreen[data-hud-design="v2680"] #notificationCenterBadge { top:-4px !important; right:-3px !important; min-width:17px !important; height:17px !important; padding:0 4px !important; font-size:10px !important; line-height:17px !important; border:2px solid #fff !important; } #gameScreen[data-hud-design="v2680"] .club-radio { width:182px !important; } #gameScreen[data-hud-design="v2680"] .club-radio .club-radio-open strong { max-width:96px !important; } #gameScreen[data-hud-design="v2680"] .club-radio .club-view-toggle,#gameScreen[data-hud-design="v2680"] .club-radio .club-view,#gameScreen[data-hud-design="v2680"] .club-radio.is-view-open .club-view { display:none !important; } #gameScreen[data-hud-design="v2680"] .hud-context[data-kind="camera"] { width:254px !important; padding:14px !important; } #gameScreen[data-hud-design="v2680"] .hud-context[data-kind="camera"] header { margin-bottom:12px !important; } } @media (max-height:560px) and (orientation:landscape) and (pointer:coarse), (max-height:560px) and (orientation:landscape) and (max-width:760px) { #gameScreen[data-hud-design="v2680"] .exp-goal-body { top:0 !important; left:166px !important; padding:12px !important; max-height:calc(100dvh - 174px) !important; width:min(310px,calc(100vw - 332px)) !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-full-title { font-size:13px !important; line-height:1.3 !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-next { font-size:12px !important; line-height:1.35 !important; margin:8px 0 !important; } #gameScreen[data-hud-design="v2680"] .exp-goal-body .exp-goal-journal { margin-top:6px !important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton { top:86px !important; left:116px !important; } } } /* Quest journal and three independent HUD trackers. */ @layer hud-v2680 { .qj-v2770 .qj-header { padding:14px 76px 14px 20px!important; } .qj-v2770 .qj-header h2 { font-size:23px!important; } .qj-v2770 .qj-header>span>.hud-icon { width:27px!important;height:27px!important; } .qj-v2770 .qj-categories { padding:8px 16px 0!important;gap:8px!important; } .qj-v2770 .qj-categories button { min-height:48px!important;padding:6px 10px!important;gap:8px!important; } .qj-v2770 .qj-categories img { width:30px!important;height:30px!important; } .qj-v2770 .qj-categories b { font-size:13px!important; } .qj-v2770 .qj-toolbar { padding:6px 16px!important; } .qj-v2770 .qj-toolbar nav button { min-height:40px!important; } .qj-v2770 .qj-layout { grid-template-columns:300px minmax(0,1fr)!important; } .qj-v2770 .qj-scroll { padding:16px 22px!important;overscroll-behavior:contain!important; } .qj-v2770 .qj-list { overscroll-behavior:contain!important; } .qj-v2770 .qj-row { padding:12px 10px!important; } .qj-v2770 .qj-row-art,.qj-v2770 .qj-row-art img { width:44px!important;height:44px!important;flex-basis:44px!important; } .qj-v2770 .qj-row-copy { gap:4px!important; } .qj-v2770 .qj-detail-title { display:flex!important;align-items:center!important;gap:14px!important; } .qj-v2770 .qj-detail-title>img { width:72px!important;height:72px!important;object-fit:contain!important;flex:0 0 72px!important; } .qj-v2770 .qj-detail-title>div { min-width:0!important; } .qj-v2770 .qj-detail-title small { font-size:10px!important;color:#7192a3!important; } .qj-v2770 .qj-detail h2 { margin:3px 0 5px!important;font-size:22px!important;line-height:1.3!important; } .qj-v2770 .qj-branch { margin:0!important;font-size:11px!important; } .qj-v2770 .qj-rewards-compact { display:flex!important;align-items:center!important;gap:8px 12px!important;flex-wrap:wrap!important;margin:12px 0!important;padding:10px 0!important;border-block:1px solid #e7eff3!important; } .qj-v2770 .qj-rewards-compact h3 { font-size:11px!important;color:#658393!important; } .qj-v2770 .qj-rewards-compact>div { display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:0!important; } .qj-v2770 .qj-rewards-compact>div>div { gap:5px!important;min-height:32px!important;padding:4px 8px!important;border-radius:8px!important; } .qj-v2770 .qj-rewards-compact b { font-size:11px!important; } .qj-v2770 .qj-rewards-compact .quest-reward-icon-v61,.qj-v2770 .qj-rewards-compact img,.qj-v2770 .qj-rewards-compact svg { width:24px!important;height:24px!important;flex:0 0 24px!important; } .qj-v2770 .qj-rewards-compact .quest-reward-icon-v61 img { width:100%!important;height:100%!important; } .qj-v2770 .qj-next { margin:10px 0 14px!important;padding:11px 13px!important;gap:9px!important; } .qj-v2770 .qj-next b { font-size:13px!important; } .qj-v2770 .qj-objectives ol { margin:7px 0 12px!important; } .qj-v2770 .qj-objectives li { padding:9px 0!important;gap:9px!important; } .qj-v2770 .qj-objectives li>div { min-width:0!important; } .qj-v2770 .qj-objectives li b { font-size:12px!important; } .qj-v2770 .qj-objectives .is-locked>i { background:#f3f6f8!important;color:#8ca0ae!important; } .qj-v2770 .qj-objectives .is-locked b { color:#8298a6!important; } .qj-v2770 .qj-actions { padding:10px 20px!important;gap:8px!important; } .qj-v2770 .qj-tracking { padding:8px 16px 2px!important; } .qj-v2770 .qj-tracking>header { display:flex!important;justify-content:space-between!important;gap:8px!important;margin-bottom:6px!important; } .qj-v2770 .qj-tracking>header>b { display:flex!important;align-items:center!important;gap:5px!important;font-size:11px!important;color:#456e84!important; } .qj-v2770 .qj-tracking>header .hud-icon { width:14px!important;height:14px!important;flex-basis:14px!important; } .qj-v2770 .qj-tracking>header span { color:#2497bd!important; } .qj-v2770 .qj-tracking>header>small { font-size:10px!important;color:#8298a5!important; } .qj-v2770 .qj-tracking>div { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important; } .qj-v2770 .qj-tracking article { display:flex!important;align-items:center!important;min-width:0!important;border:1px solid #cfe6ee!important;background:#eff9fc!important;border-radius:10px!important; } .qj-v2770 .qj-tracking button { display:flex!important;align-items:center!important;gap:6px!important;border:0!important;background:transparent!important;min-width:0!important;min-height:44px!important;padding:5px!important;color:#31576c!important;text-align:left!important; } .qj-v2770 .qj-tracking article>button:first-child { flex:1!important; } .qj-v2770 .qj-tracking article>button:last-child:not(:first-child) { flex:0 0 32px!important;justify-content:center!important; } .qj-v2770 .qj-tracking img { width:32px!important;height:32px!important;object-fit:contain!important; } .qj-v2770 .qj-tracking button>span { display:grid!important;gap:2px!important;min-width:0!important; } .qj-v2770 .qj-tracking b { font-size:11px!important;font-weight:650!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important; } .qj-v2770 .qj-tracking small { font-size:9px!important;color:#7394a5!important; } .qj-v2770 .qj-tracking .is-vacant { justify-content:center!important;gap:6px!important;border-style:dashed!important;color:#99adba!important;background:transparent!important;min-height:46px!important;font-size:10px!important; } .qj-v2770 .qj-mini-steps { display:flex!important;align-items:center!important;gap:4px!important;margin:2px 0!important; } .qj-v2770 .qj-mini-steps i { display:grid!important;place-items:center!important;width:22px!important;height:20px!important;border-radius:5px!important;background:#edf2f5!important;color:#93a5b0!important; } .qj-v2770 .qj-mini-steps .is-done { background:#e5f5ed!important;color:#329271!important; } .qj-v2770 .qj-mini-steps .is-current { background:#def3ff!important;color:#258db9!important;outline:1px solid #addbed!important; } .qj-v2770 .qj-mini-steps .hud-icon { width:12px!important;height:12px!important; } .qj-sr { position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important; } .qj-v2770 .qj-replace-shade { position:absolute!important;inset:0!important;background:#173e5966!important;z-index:20!important;display:grid!important;place-items:center!important;padding:18px!important; } .qj-v2770 .qj-replace-dialog { width:min(440px,100%)!important;max-height:100%!important;overflow:auto!important;padding:22px!important;border-radius:20px!important;background:#fff!important;box-shadow:0 12px 45px #18384e40!important; } .qj-v2770 .qj-replace-dialog h3 { margin:0 0 9px!important;font-size:20px!important; } .qj-v2770 .qj-replace-dialog p { font-size:12px!important;line-height:1.6!important;color:#6c8999!important; } .qj-v2770 .qj-replace-dialog>div { display:grid!important;gap:7px!important; } .qj-v2770 .qj-replace-dialog button { display:flex!important;align-items:center!important;gap:10px!important;min-height:48px!important;width:100%!important;border:1px solid #d9e9f1!important;background:#f3fafc!important;color:#375e75!important;border-radius:11px!important;padding:9px!important;text-align:left!important; } .qj-v2770 .qj-replace-dialog img { width:38px!important;height:38px!important;object-fit:contain!important; } .qj-v2770 .qj-replace-dialog button>span { display:grid!important;gap:3px!important;flex:1!important; } .qj-v2770 .qj-replace-dialog b { font-size:12px!important; } .qj-v2770 .qj-replace-dialog small { font-size:10px!important; } .qj-v2770 .qj-replace-dialog>button { margin-top:12px!important;justify-content:center!important;background:#fff!important; } .qj-v2770 .qj-world { padding:0!important;overscroll-behavior:contain!important; } .qj-v2770 .qj-world-hero { display:flex!important;align-items:center!important;gap:20px!important;padding:20px!important;border-radius:18px!important;background:linear-gradient(115deg,#e8f7f9,#f0f7f3)!important; } .qj-v2770 .qj-world-hero>img { width:90px!important;height:90px!important;object-fit:contain!important; } .qj-v2770 .qj-world-hero>div:not(.qj-world-ring) { flex:1!important; } .qj-v2770 .qj-world-hero p { font-size:12px!important;color:#7390a0!important; } .qj-v2770 .qj-world-ring { width:108px!important;height:108px!important;flex:0 0 108px!important;border:7px solid transparent!important;border-radius:50%!important;background:linear-gradient(#f0f8f7,#f0f8f7) padding-box,conic-gradient(#44ac9d var(--qj-ratio),#d7e9e7 0) border-box!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important; } .qj-v2770 .qj-world-ring b { font-size:26px!important;color:#338a7c!important; } .qj-v2770 .qj-world-ring small { font-size:9px!important;color:#739b92!important; } .qj-v2770 .qj-progress-totals b>small { font-size:13px!important;color:#91a9b5!important; } .qj-v2770 .qj-completed-grid>button { display:flex!important;align-items:center!important;gap:10px!important;padding:12px!important;border:1px solid #e0ecef!important;border-radius:13px!important;background:white!important;text-align:left!important;color:#31576c!important; } .qj-v2770 .qj-completed-grid .qj-quest-art { width:46px!important;height:46px!important;object-fit:contain!important; } .qj-v2770 .qj-completed-grid button>span { display:grid!important;gap:4px!important;flex:1!important; } .qj-v2770 .qj-completed-grid em { display:flex!important;align-items:center!important;gap:4px!important;font-size:10px!important;font-style:normal!important;color:#63a087!important; } .qj-v2770 .qj-completed-grid em .hud-icon { width:14px!important;height:14px!important; } #gameScreen[data-hud-design="v2680"] #questWidget.quest-tracked-v2770 .exp-tracked-list { padding:4px 0!important;overflow:auto!important;max-height:min(420px,calc(100dvh - var(--world-goal-top,180px) - 150px))!important;overscroll-behavior:contain!important;scrollbar-width:thin!important; } #gameScreen[data-hud-design="v2680"] .exp-tracked-card { border-top:1px solid #dcebef!important;padding:8px 10px!important; } #gameScreen[data-hud-design="v2680"] .exp-tracked-card>header { display:flex!important;align-items:center!important;gap:5px!important; } #gameScreen[data-hud-design="v2680"] .exp-tracked-card>header button { border:0!important;background:transparent!important;display:flex!important;align-items:center!important;padding:0!important;color:#3b6178!important; } #gameScreen[data-hud-design="v2680"] .exp-tracked-card>header button:first-child { text-align:left!important;gap:8px!important;flex:1!important;min-width:0!important; } #gameScreen[data-hud-design="v2680"] .exp-tracked-card>header button:last-child { width:30px!important;height:32px!important;justify-content:center!important;flex:0 0 30px!important; } #gameScreen[data-hud-design="v2680"] .exp-tracked-card>header img { width:32px!important;height:32px!important;object-fit:contain!important; } #gameScreen[data-hud-design="v2680"] .exp-tracked-card>header span { display:grid!important;gap:2px!important;min-width:0!important; } #gameScreen[data-hud-design="v2680"] .exp-tracked-card>header b { font-size:11px!important;line-height:1.35!important; } #gameScreen[data-hud-design="v2680"] .exp-tracked-card>header small { font-size:8px!important;color:#7d9aa9!important; } #gameScreen[data-hud-design="v2680"] .exp-mini-objectives { list-style:none!important;margin:7px 0 5px!important;padding:0!important;display:grid!important;gap:5px!important; } #gameScreen[data-hud-design="v2680"] .exp-mini-objectives li { display:flex!important;gap:6px!important;align-items:flex-start!important;font-size:10px!important;line-height:1.35!important;color:#8ca1ad!important; } #gameScreen[data-hud-design="v2680"] .exp-mini-objectives li>.hud-icon { width:13px!important;height:13px!important;flex:0 0 13px!important;margin-top:1px!important; } #gameScreen[data-hud-design="v2680"] .exp-mini-objectives li>span { min-width:0!important; } #gameScreen[data-hud-design="v2680"] .exp-mini-objectives small { display:block!important;font-size:8px!important;line-height:1.4!important;color:inherit!important;opacity:.85!important; } #gameScreen[data-hud-design="v2680"] .exp-mini-objectives .is-current { color:#327c9d!important;font-weight:600!important; } #gameScreen[data-hud-design="v2680"] .exp-mini-objectives .is-done { color:#64a18a!important; } #gameScreen[data-hud-design="v2680"] .exp-tracked-card .exp-goal-foot { margin-top:4px!important; } #gameScreen[data-hud-design="v2680"] .exp-tracked-card .exp-goal-route { min-height:30px!important; } @media(max-width:760px),(pointer:coarse) and (max-height:560px) { .qj-v2770 .qj-header { padding:12px 58px 10px 14px!important;gap:6px!important; } .qj-v2770 .qj-header h2 { font-size:19px!important; } .qj-v2770 .qj-header small { font-size:7px!important; } .qj-v2770 .qj-header>span { gap:7px!important; } .qj-v2770 .qj-header>span>.hud-icon { width:22px!important;height:22px!important;flex-basis:22px!important; } .qj-v2770 .qj-header>button { padding:7px!important;font-size:10px!important;min-height:40px!important; } .qj-v2770 .qj-header>button .hud-icon { width:16px!important;height:16px!important;flex-basis:16px!important; } .qj-v2770 .qj-tracking { padding:7px 10px 0!important; } .qj-v2770 .qj-tracking>header>small { display:none!important; } .qj-v2770 .qj-tracking>div { gap:4px!important; } .qj-v2770 .qj-tracking article>button:first-child { flex-direction:column!important;align-items:center!important;gap:2px!important; } .qj-v2770 .qj-tracking article>button:last-child:not(:first-child) { display:none!important; } .qj-v2770 .qj-tracking img { width:25px!important;height:25px!important; } .qj-v2770 .qj-tracking button b { font-size:9px!important;max-width:calc((100vw - 70px)/3)!important; } .qj-v2770 .qj-tracking button>span>small { display:none!important; } .qj-v2770 .qj-tracking .is-vacant { font-size:9px!important;flex-direction:column!important;gap:3px!important; } .qj-v2770 .qj-tracking .is-vacant>.hud-icon { width:16px!important;height:16px!important; } .qj-v2770 .qj-categories { padding:8px 10px 0!important;gap:4px!important; } .qj-v2770 .qj-categories button { flex-direction:row!important;min-height:44px!important;padding:4px!important;gap:4px!important;justify-content:center!important; } .qj-v2770 .qj-categories img { width:22px!important;height:22px!important; } .qj-v2770 .qj-categories b { font-size:9px!important; } .qj-v2770 .qj-categories em { display:none!important; } .qj-v2770 .qj-toolbar { padding:6px 8px!important; } .qj-v2770 .qj-toolbar nav button { font-size:10px!important;min-height:44px!important;padding:7px 5px!important; } .qj-v2770.is-detail .qj-tracking { display:none!important; } .qj-v2770 .qj-scroll { padding:12px 14px!important; } .qj-v2770 .qj-detail-title { gap:10px!important; } .qj-v2770 .qj-detail-title>img { width:55px!important;height:55px!important;flex-basis:55px!important; } .qj-v2770 .qj-detail h2 { font-size:18px!important; } .qj-v2770 .qj-detail-title small { font-size:9px!important; } .qj-v2770 .qj-branch { font-size:10px!important; } .qj-v2770 .qj-rewards-compact { gap:6px!important;padding:8px 0!important;margin:10px 0!important; } .qj-v2770 .qj-next { padding:10px!important; } .qj-v2770 .qj-actions { padding:9px 12px calc(9px + env(safe-area-inset-bottom))!important; } .qj-v2770 .qj-actions button { flex:1!important;font-size:11px!important;padding:8px 7px!important; } .qj-v2770 .qj-actions .qj-abandon { flex-basis:100%!important;min-height:30px!important;padding:2px!important; } .qj-v2770 .qj-replace-shade { padding:12px!important; } .qj-v2770 .qj-replace-dialog { padding:16px!important; } .qj-v2770 .qj-world-hero { padding:14px!important;gap:10px!important;flex-wrap:wrap!important; } .qj-v2770 .qj-world-hero>img { width:52px!important;height:52px!important; } .qj-v2770 .qj-world-hero h2 { font-size:20px!important; } .qj-v2770 .qj-world-hero p { font-size:11px!important; } .qj-v2770 .qj-world-ring { margin:auto!important;width:82px!important;height:82px!important;flex-basis:82px!important;border-width:5px!important; } .qj-v2770 .qj-world-ring b { font-size:22px!important; } #gameScreen[data-hud-design="v2680"] #questWidget.quest-tracked-v2770 .exp-tracked-list { max-height:calc(100dvh - 280px)!important; } #gameScreen[data-hud-design="v2680"] .exp-tracked-card>header button:last-child { width:44px!important;height:44px!important;flex-basis:44px!important; } #gameScreen[data-hud-design="v2680"] .exp-tracked-card .exp-goal-route { min-height:44px!important; } } @media(max-width:360px) { .qj-v2770 .qj-categories button { flex-direction:column!important;gap:1px!important; } .qj-v2770 .qj-categories img { width:18px!important;height:18px!important; } } } /* pk-style-source:140 */ /* /chat-polish-v2962.css */ html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-head { gap: 5px !important; padding-left: 10px !important; padding-right: 18px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs { justify-content: flex-start !important; gap: 3px !important; overflow: hidden !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs > button { flex: 0 0 auto !important; width: max-content !important; min-width: max-content !important; padding: 7px 6px !important; gap: 4px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions { flex-shrink: 0 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] [data-chat-unread]:not([hidden]), html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-recent-dialogs em, html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-group-card em { display: inline-grid !important; place-items: center !important; min-width: 20px !important; height: 20px !important; padding: 0 5px !important; border-radius: 999px !important; font-size: 10px !important; font-style: normal !important; line-height: 1 !important; white-space: nowrap !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-recent-dialogs > article { margin-bottom: 5px !important; border: 1px solid var(--ui-line,#dce7ed) !important; background: var(--ui-card,#fff) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-recent-dialogs > article.is-pinned { border-color: color-mix(in srgb, var(--ui-accent,#087bb2) 34%, var(--ui-line,#dce7ed)) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-dialog-pin, html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head [data-chat-private-pin] { width: 40px !important; min-width: 40px !important; height: 40px !important; margin: 0 8px 0 0 !important; padding: 9px !important; border: 1px solid var(--ui-line,#dce7ed) !important; border-radius: 10px !important; background: var(--ui-card,#fff) !important; color: var(--ui-muted,#61849a) !important; transform: none !important; box-shadow: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-dialog-pin,.chat-private-head [data-chat-private-pin])[aria-pressed="true"] { background: var(--ui-soft,#e0f0fa) !important; color: var(--ui-accent,#087bb2) !important; border-color: color-mix(in srgb, var(--ui-accent,#087bb2) 35%, var(--ui-line,#dce7ed)) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-dialog-pin,.chat-private-head [data-chat-private-pin]) svg { display: block !important; width: 20px !important; height: 20px !important; transform: none !important; } html .game-screen #chatPanel .chat-group-directory { gap: 10px !important; padding: 18px !important; } html .game-screen #chatPanel .chat-group-directory > header { align-items: center !important; } html .game-screen #chatPanel .chat-group-directory > header > span { gap: 2px !important; } html .game-screen #chatPanel .chat-group-directory > header b { font-size: 18px !important; } html .game-screen #chatPanel .chat-group-directory > header small { font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0 !important; } html .game-screen #chatPanel .chat-group-directory .chat-directory-empty { margin: 8px 0 !important; padding: 20px 14px !important; border: 1px dashed var(--ui-line,#dce7ed) !important; border-radius: 12px !important; text-align: center !important; } html .game-screen #chatPanel .chat-group-card { min-height: 64px !important; } html .game-screen #chatPanel .chat-jump-latest:not([hidden]) { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 8px 12px !important; border-radius: 999px !important; font-weight: 750 !important; box-shadow: 0 3px 10px #123d5930 !important; } html .game-screen #chatPanel .chat-channel-visibility input:disabled + span { opacity: .75 !important; } html .game-screen #chatPanel > .chat-config .chat-history-option { display: grid !important; gap: 6px !important; grid-column: 1 / -1 !important; } html .game-screen #chatPanel > .chat-config #chatHistoryHours { width: 100% !important; min-height: 42px !important; padding: 8px 10px !important; border: 1px solid var(--ui-line,#dce7ed) !important; border-radius: 10px !important; background: var(--ui-card,#fff) !important; color: var(--ui-ink,#24485b) !important; font: inherit !important; } html .game-screen #chatPanel > .chat-config [data-chat-clear-local] { min-height: 44px !important; border: 1px solid var(--ui-line,#dce7ed) !important; border-radius: 10px !important; background: var(--ui-card,#fff) !important; color: var(--ui-ink,#24485b) !important; font-size: 12px !important; } html .game-screen #chatPanel > .chat-config [data-chat-clear-local]:disabled { opacity: .55 !important; cursor: default !important; } html .game-screen #chatPanel > .chat-config .chat-local-note { grid-column: 1 / -1 !important; color: var(--ui-muted,#61849a) !important; font-size: 11px !important; line-height: 1.35 !important; } @container trainer-chat (max-width: 790px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs .chat-tab-icon { display: none !important; } } @container trainer-chat (max-width: 600px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatChannelPicker { display: flex !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-channel-menu-open .chat-head .chat-tabs { display: grid !important; grid-template-columns: 1fr !important; position: absolute !important; top: 50px !important; left: 8px !important; width: 215px !important; height: auto !important; padding: 6px !important; gap: 3px !important; border: 1px solid var(--ui-line,#dce7ed) !important; border-radius: 13px !important; background: var(--ui-card,#fff) !important; overflow-y: auto !important; z-index: 35 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-channel-menu-open .chat-head .chat-tabs > button { width: 100% !important; min-height: 44px !important; justify-content: flex-start !important; } } @media (max-width: 760px), (pointer: coarse) and (max-height: 560px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-head { padding: calc(8px + env(safe-area-inset-top,0px)) 10px 8px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head [data-chat-private-pin] { margin: 0 !important; min-height: 44px !important; height: 44px !important; width: 44px !important; min-width: 44px !important; } html .game-screen #chatPanel .chat-group-directory { padding: 12px !important; } } @layer chat-trainers { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs { justify-content: flex-start !important; gap: 3px !important; overflow: hidden !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs > button { flex: 0 0 auto !important; width: max-content !important; min-width: max-content !important; padding: 7px 6px !important; gap: 4px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-dialog-pin, html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head [data-chat-private-pin] { width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 9px !important; margin: 0 8px 0 0 !important; border: 1px solid var(--ui-line,#dce7ed) !important; border-radius: 10px !important; background: var(--ui-card,#fff) !important; transform: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-recent-dialogs .chat-dialog-pin { width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 9px !important; margin: 0 8px 0 0 !important; border: 1px solid var(--ui-line,#dce7ed) !important; border-radius: 10px !important; background: var(--ui-card,#fff) !important; } @container trainer-chat (max-width: 790px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs .chat-tab-icon { display: none !important; } } @container trainer-chat (max-width: 600px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatChannelPicker { display: flex !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-channel-menu-open .chat-head .chat-tabs { display: grid !important; overflow-y: auto !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-channel-menu-open .chat-head .chat-tabs > button { width: 100% !important; min-width: 0 !important; } } @media (max-width: 760px), (pointer: coarse) and (max-height: 560px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-recent-dialogs .chat-dialog-pin { width: 44px !important; min-width: 44px !important; height: 44px !important; margin: 0 6px 0 0 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head [data-chat-private-pin] { width: 44px !important; min-width: 44px !important; height: 44px !important; margin: 0 !important; } } } @layer chat-trainers { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-head { gap: 7px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs { justify-content: space-between !important; gap: 5px !important; overflow: visible !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs > button { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; padding: 7px 8px !important; gap: 6px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs .chat-tab-icon { display: inline-flex !important; flex: 0 0 17px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > [data-chat-clear-local][hidden] { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > [data-chat-clear-local] { color: var(--ui-muted,#55788b) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > [data-chat-clear-local]:hover { color: var(--ui-accent,#087bb2) !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs > button.channel-players:not(.is-active):not(:hover) { background: transparent !important; } @container trainer-chat (max-width: 780px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatChannelPicker { display: flex !important; width: 132px !important; min-width: 132px !important; flex: 0 0 132px !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs { display: none !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-channel-menu-open .chat-head .chat-tabs { display: grid !important; grid-template-columns: 1fr !important; position: absolute !important; top: 50px !important; left: 8px !important; width: 215px !important; height: auto !important; max-height: min(330px,calc(100dvh - 72px)) !important; padding: 6px !important; gap: 3px !important; overflow-y: auto !important; border: 1px solid var(--ui-line,#dce7ed) !important; border-radius: 13px !important; background: var(--ui-card,#fff) !important; z-index: 35 !important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-channel-menu-open .chat-head .chat-tabs > button { width: 100% !important; min-width: 0 !important; flex: none !important; justify-content: flex-start !important; min-height: 44px !important; } } @media (max-width: 760px), (pointer: coarse) and (max-height: 560px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head-actions > [data-chat-clear-local] { width: 44px !important; min-width: 44px !important; height: 44px !important; padding: 11px !important; } } @media (max-width: 380px) { html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatChannelPicker { width: 94px !important; min-width: 94px !important; max-width: 94px !important; flex: 0 0 94px !important; overflow: hidden !important; } } } @layer ui-theme{ #chatPanel #chatForm{display:grid;grid-template-columns:40px minmax(0,1fr) 44px;align-items:center;gap:4px 6px;padding:8px 10px;border-top:1px solid var(--ui-line);background:var(--ui-card)!important} #chatPanel #chatInput{box-sizing:border-box;min-height:44px;max-height:100px;margin:0;padding:12px 10px;border:1px solid transparent!important;border-radius:12px!important;outline:none!important;box-shadow:none!important;background:var(--ui-soft)!important;color:var(--ui-ink)!important;font:inherit;font-size:13px;line-height:18px;resize:none} #chatPanel #chatInput:focus-visible{outline:none!important;border-color:var(--ui-accent)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-accent) 16%,transparent)!important} #chatPanel #chatForm .chat-send-button{width:44px;height:44px;min-height:44px;border-radius:12px;box-shadow:none}#chatPanel #chatForm .chat-send-button:disabled{opacity:.4;cursor:default} .chat-cooldown{grid-column:2/-1;line-height:1.3;font-size:11px;color:var(--ui-muted);padding:0 2px;min-height:13px}.chat-cooldown[hidden]{display:none} } @layer chat-trainers { /* The wide header and the conversation share the same Online column. */ @container trainer-chat (width > 780px) { html .game-screen:not(.is-chat-fullscreen) #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-messenger-layout { grid-template-columns: minmax(0, 1fr) var(--chat-online-column) !important; } html .game-screen:not(.is-chat-fullscreen) #chatPanel.chat-panel.chat-messenger[data-chat-revision]:not(.is-searching) .chat-head .chat-tabs { max-inline-size: calc(100cqw - var(--chat-online-column) - var(--chat-header-start)) !important; margin-inline-end: auto !important; } html .game-screen:not(.is-chat-fullscreen) #chatPanel.chat-panel.chat-messenger[data-chat-revision] > .chat-head { padding-inline-start: var(--chat-header-start) !important; } } @container trainer-chat (780px < width <= 900px) { html .game-screen:not(.is-chat-fullscreen) #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs > button { padding-inline: 6px !important; gap: 4px !important; } html .game-screen:not(.is-chat-fullscreen) #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-head .chat-tabs .chat-tab-icon { display: none !important; } } @media (max-width: 380px) { html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatChannelPicker { gap: 4px !important; padding-inline: 6px !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatChannelPicker svg:first-child { display: none !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatChannelPicker svg:last-child { flex: 0 0 14px; } } #chatPanel.chat-panel.chat-messenger[data-chat-revision] { --chat-online-column: 202px; --chat-header-start: 10px; --chat-rules-ink: #813a0b; --chat-rules-bg: #fff0d9; --chat-rules-hover: #ffe4bd; --chat-rules-line: #e5a364; } html[data-game-theme="dark"] #chatPanel.chat-panel.chat-messenger[data-chat-revision] { --chat-rules-ink: #ffcd9a; --chat-rules-bg: #422b1d; --chat-rules-hover: #503324; --chat-rules-line: #a4653b; } #chatPanel #chatConfig .chat-settings-note > a[href="/chat-rules.html"]:any-link { display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-block-size: 38px; padding: 7px 10px; border: 1px solid var(--chat-rules-line); border-radius: 9px; background: var(--chat-rules-bg); color: var(--chat-rules-ink) !important; font-weight: 700; line-height: 1.35; text-decoration: none; } #chatPanel #chatConfig .chat-settings-note > a[href="/chat-rules.html"]::before { content: ""; flex: 0 0 16px; block-size: 16px; background-color: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.1a2 2 0 0 1 3.4 0l8 13.7A2 2 0 0 1 20 21H4a2 2 0 0 1-1.7-3.2zM12 9v4m0 4h.01'/%3E%3C/svg%3E") center / contain no-repeat; } #chatPanel #chatConfig .chat-settings-note > a[href="/chat-rules.html"]:hover { background: var(--chat-rules-hover); } #chatPanel #chatConfig .chat-settings-note > a[href="/chat-rules.html"]:focus-visible { outline: 2px solid currentColor !important; outline-offset: 2px; } } /* pk-style-source:141 */ /* /hud-notifications-v2871.css */ /* One crisp, compact exploration HUD in its established important layer. */ @layer hud-v2680 { /* Visibility must switch immediately; legacy all-property transitions broke focus. */ #gameScreen[data-hud-design="v2680"] .world-topbar, #gameScreen[data-hud-design="v2680"] #notificationCenter>header, #gameScreen[data-hud-design="v2680"] #notificationCenterButton { transition-property:background-color,border-color,box-shadow!important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #worldMinimapShell { background:#fbfdff!important; border-color:#e1edf2!important; border-radius:18px!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; filter:none!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapShell::before,#gameScreen[data-hud-design="v2680"] #worldMinimapShell::after { content:none!important; display:none!important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton { width:44px!important; height:44px!important; padding:5px!important; background:#fbfdff!important; border:1px solid #e1edf2!important; border-radius:14px!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; touch-action:manipulation!important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton .hud-notification-art { display:block!important; width:32px!important; height:32px!important; object-fit:contain!important; } #gameScreen[data-hud-design="v2680"] #notificationCenterBadge { display:grid!important; place-items:center!important; top:-4px!important; right:-4px!important; min-width:20px!important; height:20px!important; padding:0 4px!important; font:750 10px/1 'Segoe UI',sans-serif!important; border:2px solid #fbfdff!important; background:#da485b!important; box-sizing:border-box!important; font-style:normal!important; } #gameScreen[data-hud-design="v2680"] #notificationCenterBadge[hidden] { display:none!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelButton { min-width:0!important; gap:5px!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-channel-icon img { display:block!important; width:20px!important; height:20px!important; object-fit:contain!important; } #gameScreen[data-hud-design="v2680"] .minimap-status-short { display:none!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-private-location="true"] #worldMinimapChannelButton { opacity:1!important; cursor:default!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-private-location="true"] #worldMinimapChannel { overflow:visible!important; text-overflow:clip!important; max-width:none!important; font-size:11px!important; color:#355d73!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-private-location="true"] .world-minimap-channel-chevron { display:none!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-private-location="true"] #worldMinimapChannelPopulation { display:none!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter { background:#fbfdff!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; overflow:hidden!important; border-radius:18px!important; z-index:1600!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter>header { padding:14px 16px!important; gap:12px!important; flex:none!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter>header>div { min-width:0!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter h2 { font-size:20px!important; line-height:1.25!important; overflow-wrap:anywhere!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter [data-notification-close] { width:44px!important; height:44px!important; min-width:44px!important; flex:none!important; } #gameScreen[data-hud-design="v2680"] .notice-tabs { display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; flex:none!important; padding:0 12px 10px!important; gap:4px!important; overflow:visible!important; } #gameScreen[data-hud-design="v2680"] .notice-tabs button { display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:0!important; min-height:64px!important; padding:6px 1px!important; gap:4px!important; font:650 10px/1.2 'Segoe UI',sans-serif!important; border:1px solid transparent!important; } #gameScreen[data-hud-design="v2680"] .notice-tabs button>span { max-width:100%!important; white-space:nowrap!important; } #gameScreen[data-hud-design="v2680"] .notice-tabs img { width:28px!important; height:28px!important; object-fit:contain!important; } #gameScreen[data-hud-design="v2680"] .notice-tabs i { right:1px!important; top:0!important; min-width:17px!important; height:17px!important; padding:0 3px!important; box-sizing:border-box!important; font:700 9px/17px 'Segoe UI',sans-serif!important; border:1px solid #fbfdff!important; } #gameScreen[data-hud-design="v2680"] .notice-tools { flex:none!important; padding:0 12px 10px!important; gap:6px!important; } #gameScreen[data-hud-design="v2680"] .notice-tools button { flex:1!important; min-width:0!important; min-height:44px!important; padding:7px!important; font-size:11px!important; } #gameScreen[data-hud-design="v2680"] .notification-center-list { min-height:0!important; padding:10px 12px!important; overflow:auto!important; overflow-anchor:none!important; } #gameScreen[data-hud-design="v2680"] .notice-entry { grid-template-columns:36px minmax(0,1fr)!important; gap:10px!important; padding:12px!important; border-radius:13px!important; } #gameScreen[data-hud-design="v2680"] .notice-entry-icon { width:36px!important; height:36px!important; padding:3px!important; flex:none!important; } #gameScreen[data-hud-design="v2680"] .notice-entry-icon img { width:30px!important; height:30px!important; object-fit:contain!important; } #gameScreen[data-hud-design="v2680"] .notice-entry-copy { min-width:0!important; overflow-wrap:anywhere!important; } #gameScreen[data-hud-design="v2680"] .notice-entry-meta { gap:4px 8px!important; font-size:10px!important; line-height:1.4!important; } #gameScreen[data-hud-design="v2680"] .notice-entry-meta time { margin-left:0!important; white-space:nowrap!important; } #gameScreen[data-hud-design="v2680"] .notice-entry-actions { gap:6px!important; } #gameScreen[data-hud-design="v2680"] .notice-entry-actions button,#gameScreen[data-hud-design="v2680"] .notice-entry-actions a { min-height:44px!important; padding:8px 10px!important; display:inline-flex!important; align-items:center!important; font-size:11px!important; } #gameScreen[data-hud-design="v2680"] .notice-entry-actions [data-notice-read] { color:#4e6c7e!important; } #gameScreen[data-hud-design="v2680"] .notice-detail { min-height:0!important; } #gameScreen[data-hud-design="v2680"] [data-notice-back] { min-height:44px!important; flex:none!important; } #gameScreen[data-hud-design="v2680"] .notice-detail-body { padding:14px 16px!important; overflow-wrap:anywhere!important; } #gameScreen[data-hud-design="v2680"] .notice-connection { margin:0!important; padding:8px 14px!important; flex:none!important; font-size:11px!important; } @media (min-width:761px) and (pointer:fine), (min-width:761px) and (min-height:561px) { body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #worldMinimapShell { width:240px!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-topbar { height:44px!important; min-height:44px!important; padding:0 5px 0 11px!important; gap:2px!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapWeatherIcon { width:36px!important; min-width:36px!important; height:36px!important; padding:6px!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapWeatherIcon svg { width:24px!important; height:24px!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-map-surface { height:108px!important; border-radius:11px!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-bottombar { height:40px!important; min-height:40px!important; padding:0 6px!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelButton { height:36px!important; padding:0 3px!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannel { font-size:12px!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPing { min-width:65px!important; width:65px!important; padding:0 3px!important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton { right:252px!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter { right:272px!important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget { width:var(--world-goal-width,240px)!important; right:var(--world-goal-right,20px)!important; box-sizing:border-box!important; } } @media (max-width:1100px) and (min-width:761px) { #gameScreen[data-hud-design="v2680"] #notificationCenter { right:20px!important; top:calc(120px + env(safe-area-inset-top))!important; max-height:calc(100dvh - 140px)!important; } } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #worldMinimapShell { background:transparent!important; border:0!important; } #gameScreen[data-hud-design="v2680"] .minimap-status-full { display:none!important; } #gameScreen[data-hud-design="v2680"] .minimap-status-short { display:inline!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-private-location="true"] #worldMinimapChannel { color:#e2f6f5!important; } #gameScreen[data-hud-design="v2680"] .notice-tabs button { min-height:60px!important; font-size:9px!important; } #gameScreen[data-hud-design="v2680"] .notice-tabs { padding:0 8px 8px!important; gap:2px!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter>header { padding:10px 12px!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter { top:calc(10px + env(safe-area-inset-top))!important; bottom:calc(84px + env(safe-area-inset-bottom))!important; max-height:none!important; } } @media (max-height:560px) and (orientation:landscape) and (pointer:coarse), (max-height:560px) and (orientation:landscape) and (max-width:760px) { #gameScreen[data-hud-design="v2680"] #notificationCenter { inset:10px 140px 10px auto!important; width:min(420px,calc(100vw - 160px))!important; max-height:none!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter>header { padding:6px 12px!important; } #gameScreen[data-hud-design="v2680"] .notice-tabs button { flex-direction:row!important; min-height:44px!important; gap:2px!important; } #gameScreen[data-hud-design="v2680"] .notice-tabs img { width:20px!important; height:20px!important; } #gameScreen[data-hud-design="v2680"] .notice-tabs button>span { white-space:normal!important; } } @media (min-width:761px) and (max-height:560px) and (pointer:fine) { #gameScreen[data-hud-design="v2680"] .world-minimap-map-surface { height:86px!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter { top:10px!important; max-height:calc(100dvh - 20px)!important; } } } /* pk-style-source:142 */ /* /team-refinement.css */ @layer ui-theme { #app .pt-member{position:relative!important;transition:border-color .15s,box-shadow .15s,opacity .15s!important} #app .pt-member.is-lead{border-color:color-mix(in srgb,var(--ui-accent) 50%,var(--ui-line))!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--ui-accent) 12%,transparent)!important} #app .pt-member.is-drag-source{opacity:.35!important} #app .pt-member.is-drop-target{border-color:var(--ui-accent)!important;box-shadow:0 0 0 3px var(--ui-tint)!important} #app .pt-member.is-drop-target::before{content:'Сюда';position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--ui-primary);color:var(--ui-on-accent,#fff);border-radius:8px;padding:3px 12px;z-index:2;font:700 12px system-ui} #app .pt-member.is-reorder-selected{outline:3px solid var(--ui-accent)!important;outline-offset:2px!important} #app .pt-selecting-order .pt-member:not(.is-reorder-selected){border-style:dashed!important;cursor:pointer!important} #app .pt-selecting-order .pt-help{color:var(--ui-accent)!important;font-weight:700!important} #app .pt-set-lead{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-height:42px!important;padding:7px 12px!important;border-radius:11px!important;font-size:12px!important} #app .pt-set-lead:not(:disabled){background:var(--ui-primary)!important;color:var(--ui-on-accent,#fff)!important;border-color:var(--ui-accent)!important;box-shadow:0 3px 9px color-mix(in srgb,var(--ui-accent) 20%,transparent)!important} #app .pt-set-lead:disabled{opacity:1!important;background:var(--ui-tint)!important;color:var(--ui-accent)!important} #app .pt-set-lead svg{width:16px!important;height:16px!important;flex:none!important} #app .pt-grip{width:38px!important;min-height:42px!important;touch-action:none!important;cursor:grab!important} #app .pt-grip svg{width:20px!important;height:20px!important} #app .pt-open{user-select:none!important;-webkit-touch-callout:none!important} #app .pt-dragging{cursor:grabbing!important;user-select:none!important} .pt-drag-preview{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;width:230px;padding:12px;border:2px solid var(--ui-accent,#329d87);border-radius:16px;background:var(--ui-card,#fff);color:var(--ui-ink,#243746);box-shadow:0 16px 40px #10253f35;font:13px system-ui} .pt-drag-preview .pt-identity{display:flex;align-items:center;gap:10px}.pt-drag-preview .pt-portrait{width:50px;height:50px;display:grid;place-items:center;flex:none}.pt-drag-preview img{width:50px;height:50px;object-fit:contain}.pt-drag-preview .pt-name{display:grid;gap:3px}.pt-drag-preview .pt-name>b{font-size:15px}.pt-drag-preview .pt-moves{display:flex;gap:4px}.pt-drag-preview .pt-moves img{width:24px;height:24px}.pt-drag-label{display:block;padding-top:8px;color:var(--ui-accent,#329d87)} @media(max-width:760px){#app .pt-set-lead{min-height:44px!important;flex:1!important}#app .pt-member footer{gap:6px!important}#app .pt-order-controls{flex:none!important}} @media(prefers-reduced-motion:reduce){#app .pt-member{transition:none!important}} } /* /factions-v1.css: deferred, original cascade position */ @layer ui-theme;@media all{:root[data-pk-style-slot="owner-143"]{}} /* /factions-v2.css: deferred, original cascade position */ @layer ui-theme;@media all{:root[data-pk-style-slot="owner-144"]{}} /* pk-style-source:145 */ /* /development-centered.css */ /* Development and factions are full game windows, independent of saved bottom docking. */ @layer ui-theme { #app .game-screen #sidePanel.side-panel:is(.is-progression-panel,.is-factions-panel).is-open{position:fixed!important;left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;margin:0!important;width:min(1180px,calc(100vw - 32px))!important;height:min(850px,calc(100dvh - 32px))!important;max-height:calc(100dvh - 32px)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important} #app #sidePanel:is(.is-progression-panel,.is-factions-panel)>.panel-title{flex:0 0 auto!important} #app #sidePanel:is(.is-progression-panel,.is-factions-panel)>#sidePanelContent{height:auto!important;min-height:0!important;max-height:none!important;flex:1 1 0!important;overflow:auto!important;overscroll-behavior:contain;scrollbar-gutter:stable;padding:20px!important} @media(max-width:760px){#app .game-screen #sidePanel.side-panel:is(.is-progression-panel,.is-factions-panel).is-open{width:calc(100vw - 16px)!important;height:calc(100dvh - 100px - env(safe-area-inset-bottom,0px))!important;max-height:calc(100dvh - 100px - env(safe-area-inset-bottom,0px))!important;top:calc((100dvh - 76px - env(safe-area-inset-bottom,0px))/2)!important;border-radius:20px!important}#app #sidePanel:is(.is-progression-panel,.is-factions-panel)>#sidePanelContent{padding:12px!important}} @media(max-height:480px){#app .game-screen #sidePanel.side-panel:is(.is-progression-panel,.is-factions-panel).is-open{top:50%!important;height:calc(100dvh - 16px)!important;max-height:calc(100dvh - 16px)!important}} @media(max-width:760px){#app #sidePanel.is-factions-panel>#sidePanelContent{padding-top:48px!important}} } /* /inventory-polish-v1.css: deferred, original cascade position */ @media all{:root[data-pk-style-slot="owner-146"]{}} /* pk-style-source:147 */ /* /minimap-clean-v29620.css */ /* The map itself is the HUD. Details and world switching live behind the home button. */ @layer hud-v2680 { body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #worldMinimapShell { --clean-map-size: 172px; position:absolute!important; top:calc(12px + env(safe-area-inset-top))!important; right:calc(14px + env(safe-area-inset-right))!important; left:auto!important; width:var(--clean-map-size)!important; height:var(--clean-map-size)!important; min-height:0!important; display:block!important; padding:0!important; margin:0!important; border:0!important; border-radius:50%!important; background:transparent!important; box-shadow:none!important; overflow:visible!important; backdrop-filter:none!important; z-index:43!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-topbar { display:none!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-map-surface, #gameScreen[data-hud-design="v2680"] #worldMinimapShell.is-collapsed .world-minimap-map-surface { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-height:0!important; margin:0!important; padding:0!important; border:3px solid #f9fcfd!important; border-radius:50%!important; background:#dce9dd!important; box-shadow:0 0 0 1px #244b6470,0 5px 16px #102d4238!important; overflow:hidden!important; display:block!important; cursor:pointer!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-frame { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; border-radius:50%!important; overflow:hidden!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-preview { width:100%!important; height:100%!important; object-fit:fill!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-bottombar { display:contents!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapPing, #gameScreen[data-hud-design="v2680"] .world-minimap-channel-copy, #gameScreen[data-hud-design="v2680"] #worldMinimapChannelPopulation, #gameScreen[data-hud-design="v2680"] .world-minimap-channel-chevron, #gameScreen[data-hud-design="v2680"] .mobile-world-globe, #gameScreen[data-hud-design="v2680"] .mobile-world-number { display:none!important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #worldMinimapZoom { display:none!important; } #gameScreen[data-hud-design="v2680"] :is(#worldCameraButton,#worldMinimapChannelButton) { position:absolute!important; top:-4px!important; display:grid!important; place-items:center!important; flex:none!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; padding:10px!important; margin:0!important; border:1px solid #bcd2e0!important; border-radius:50%!important; background:#fbfdff!important; color:#246589!important; box-shadow:0 3px 9px #123e5a2c!important; cursor:pointer!important; z-index:4!important; } #gameScreen[data-hud-design="v2680"] #worldCameraButton { left:-4px!important; right:auto!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelButton { right:-4px!important; left:auto!important; } #gameScreen[data-hud-design="v2680"] :is(#worldCameraButton,#worldMinimapChannelButton):is(:hover,[aria-expanded="true"]) { background:#e6f4fb!important; color:#117bad!important; border-color:#82c4e4!important; } #gameScreen[data-hud-design="v2680"] :is(#worldCameraButton,#worldMinimapChannelButton):focus-visible, #gameScreen[data-hud-design="v2680"] .world-minimap-map-surface:focus-visible { outline:3px solid #157fb7!important; outline-offset:3px!important; } #gameScreen[data-hud-design="v2680"] :is(#worldCameraButton,#worldMinimapChannelButton) svg, #gameScreen[data-hud-design="v2680"] .world-minimap-channel-icon { display:block!important; width:23px!important; height:23px!important; color:inherit!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-channel-icon svg { width:23px!important; height:23px!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelMenu, #gameScreen[data-hud-design="v2680"] .hud-context { position:absolute!important; top:calc(100% + 12px)!important; right:0!important; left:auto!important; width:min(304px,calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)))!important; max-width:none!important; max-height:min(440px,calc(100dvh - var(--clean-map-size) - 90px - env(safe-area-inset-top)))!important; padding:16px!important; border:1px solid #d8e8f1!important; border-radius:18px!important; background:#fcfeff!important; color:#183c55!important; box-shadow:0 12px 36px #102e4650!important; overflow:auto!important; z-index:140!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelMenu[hidden], #gameScreen[data-hud-design="v2680"] .hud-context[hidden], #gameScreen[data-hud-design="v2680"] #worldMinimapWorlds[hidden] { display:none!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelMenu>header { display:grid!important; gap:2px!important; margin:0 0 12px!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelMenu>header b { font-size:17px!important; line-height:1.25!important; color:#183c55!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelMenu>header small { display:none!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-summary { display:grid!important; gap:3px!important; padding:10px 12px!important; border-radius:12px!important; background:#eaf5fb!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapMenuLocation { font-size:14px!important; line-height:1.3!important; color:#193e59!important; overflow-wrap:anywhere!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapMenuWorld { font-size:12px!important; color:#37748e!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-details { display:grid!important; gap:0!important; margin:10px 0 2px!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-details>div { display:flex!important; align-items:baseline!important; justify-content:space-between!important; gap:12px!important; min-height:34px!important; padding:7px 2px!important; border-bottom:1px solid #e8f0f5!important; font-size:12px!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-details span { color:#718a99!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-details b { color:#254d66!important; text-align:right!important; font-size:12px!important; font-variant-numeric:tabular-nums!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-worlds { margin-top:12px!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-worlds>b { display:block!important; margin-bottom:8px!important; font-size:12px!important; color:#416d86!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelList { max-height:176px!important; overflow:auto!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelList button { min-height:44px!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapCollapse { position:static!important; display:block!important; width:100%!important; min-height:44px!important; height:44px!important; margin-top:12px!important; padding:0 12px!important; border:1px solid #d9e8f0!important; border-radius:11px!important; background:#f4f9fc!important; color:#386d89!important; font:650 12px/1.2 'Segoe UI',sans-serif!important; text-align:center!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapCollapse svg { display:none!important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #worldMinimapShell.is-collapsed { width:52px!important; height:52px!important; padding:0!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapShell.is-collapsed .world-minimap-map-surface, #gameScreen[data-hud-design="v2680"] #worldMinimapShell.is-collapsed #worldCameraButton { display:none!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapShell.is-collapsed #worldMinimapChannelButton { top:0!important; right:0!important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] :is(#worldCameraButton,#worldMinimapChannelButton) { background:#17384c!important; border-color:#5a7a8d!important; color:#f3fbff!important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] :is(#worldMinimapChannelMenu,.hud-context) { background:#153346!important; border-color:#507087!important; color:#eaf7ff!important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] #worldMinimapChannelMenu>header b, html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] #worldMinimapMenuLocation, html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] .world-minimap-details b { color:#f0fbff!important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] :is(#worldMinimapChannelMenu>header small,#worldMinimapMenuWorld,.world-minimap-details span,.world-minimap-worlds>b) { color:#b5d2e2!important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] .world-minimap-summary { background:#214b62!important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] .world-minimap-details>div { border-color:#426578!important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] #worldMinimapChannelList button { background:#23495e!important; border-color:#50778b!important; color:#eaf7ff!important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] #worldMinimapChannelList button.is-current { background:#295b66!important; border-color:#76b5a5!important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] #worldMinimapChannelList button :is(b,small,em) { color:#eaf7ff!important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] #worldMinimapCollapse { background:#21475c!important; border-color:#52758a!important; color:#e8f6ff!important; } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #worldMinimapShell { --clean-map-size:clamp(120px,36vw,144px); top:calc(8px + env(safe-area-inset-top))!important; right:calc(8px + env(safe-area-inset-right))!important; } } @media (max-height:560px) and (orientation:landscape) { body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #worldMinimapShell { --clean-map-size:108px; } #gameScreen[data-hud-design="v2680"] :is(#worldMinimapChannelMenu,.hud-context) { position:fixed!important; top:8px!important; right:calc(346px + env(safe-area-inset-right))!important; width:min(280px,calc(100vw - 366px))!important; max-height:calc(100dvh - 16px)!important; } } } /* pk-style-source:148 */ /* /pokemon-eggs-v1.css */ .pokemon-egg-art{display:block;max-width:100%;max-height:100%;object-fit:contain} .inventory-eggs{width:100%;min-width:0;color:inherit} .inventory-eggs-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:4px 4px 12px} .inventory-eggs-controls [role=group]{display:flex;gap:6px;flex-wrap:wrap} .inventory-eggs-controls button,.inventory-eggs-controls select,.inventory-eggs-pages button,.inventory-egg-card button,.inventory-eggs-empty button{min-height:44px;border:1px solid var(--ui-line,#b7cedb);border-radius:12px;padding:8px 14px;background:var(--ui-card,#f6fafc);color:inherit;font:inherit;cursor:pointer} .inventory-eggs-controls button[aria-pressed=true]{background:var(--ui-tint,#dceef9);border-color:var(--ui-accent,#438bbc);color:var(--ui-accent,#0074b8)} .inventory-eggs-controls label{display:flex;align-items:center;gap:8px;font-size:13px} .inventory-eggs-note{margin:0 4px 16px;color:var(--ui-muted,#527183);font-size:13px} .inventory-egg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;padding:4px} .inventory-egg-card{display:flex;flex-direction:column;align-items:center;min-width:0;padding:12px;border:1px solid var(--ui-line,#b7cedb);border-radius:18px;background:var(--ui-card,#fff);text-align:center;gap:7px} .inventory-egg-number{align-self:flex-end;font-size:11px;color:var(--ui-muted,#527183)} .inventory-egg-portrait{display:grid;place-items:center;width:100%;height:128px;padding:4px;box-sizing:border-box} .inventory-egg-portrait img{width:120px;height:120px;max-width:100%;max-height:120px;object-fit:contain} .inventory-egg-card b{font-size:14px;overflow-wrap:anywhere;line-height:1.35} .inventory-egg-card small{font-size:12px;color:var(--ui-muted,#527183);overflow-wrap:anywhere} .inventory-egg-card button{margin-top:auto;width:100%;font-size:13px} .inventory-eggs-pages{display:flex;justify-content:center;align-items:center;gap:18px;padding:20px 4px 4px} .inventory-eggs-pages button{min-width:44px} .inventory-eggs-pages button:disabled{opacity:.4;cursor:default} .inventory-eggs-empty{grid-column:1/-1;padding:24px 8px;font-size:14px} .inventory-egg-grid.is-list{grid-template-columns:1fr} .inventory-egg-grid.is-list .inventory-egg-card{display:grid;grid-template-columns:72px minmax(0,1fr);text-align:left;align-items:center;justify-items:start;column-gap:16px} .inventory-egg-grid.is-list .inventory-egg-portrait{grid-column:1;grid-row:1/5;width:72px;height:88px;padding:0} .inventory-egg-grid.is-list .inventory-egg-portrait img{width:72px;height:88px} .inventory-egg-grid.is-list .inventory-egg-number,.inventory-egg-grid.is-list b,.inventory-egg-grid.is-list small,.inventory-egg-grid.is-list button{grid-column:2;align-self:auto} .lab-egg-visual .pokemon-egg-art{width:80px;height:96px;max-height:none} .lab-compatibility .pokemon-egg-art{width:48px;height:56px} .home-egg .pokemon-egg-art{width:80px;height:96px;flex:0 0 80px} @media(max-width:600px){.inventory-egg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.inventory-egg-card{padding:10px 8px}.inventory-egg-number{font-size:10px}.inventory-egg-card b{font-size:13px}.inventory-egg-portrait{height:108px}.inventory-egg-portrait img{width:98px;height:100px}.inventory-eggs-controls{align-items:stretch}.inventory-eggs-controls label{justify-content:space-between;width:100%}.inventory-eggs-controls [role=group]{width:100%}.inventory-eggs-controls [role=group] button{flex:1;padding:8px;font-size:12px}.inventory-egg-grid.is-list{grid-template-columns:1fr}} @media(max-width:600px){.inventory-eggs-note{display:none}} /* pk-style-source:149 */ /* /field-expeditions.css */ .field-expedition{margin-top:6px;pointer-events:auto;color:#203e41;background:rgba(247,255,248,.96);border:1px solid #b6d2bc;border-radius:12px;overflow:hidden;box-shadow:0 3px 14px #153a2514} .field-expedition[hidden],.field-expedition [hidden]{display:none!important} .field-expedition>button{display:block;width:100%;min-height:44px;border:0;background:transparent;color:inherit;font:700 12px/1.3 system-ui;text-align:left;padding:10px 12px;cursor:pointer} .field-expedition>button:focus-visible{outline:2px solid #31895e;outline-offset:-3px} .field-expedition>div{padding:0 12px 12px;max-height:min(300px,40dvh);overflow:auto;overscroll-behavior:contain;font:12px/1.45 system-ui} .field-expedition strong{font-size:13px}.field-expedition p{margin:7px 0;color:#4b6861}.field-expedition ol{padding:0;list-style:none;margin:8px 0}.field-expedition li{margin:8px 0}.field-expedition .is-done{color:#29804b}.field-expedition small{display:block;font-size:11px;color:#4b6861} [data-game-theme="dark"] .field-expedition{background:rgba(24,45,43,.97);color:#e0f4e9;border-color:#48695a}[data-game-theme="dark"] .field-expedition p,[data-game-theme="dark"] .field-expedition small{color:#abc7b9} @media(max-width:700px),(max-height:500px){.field-expedition{margin-top:3px;border-radius:9px}.field-expedition>button{font-size:11px}.field-expedition>div{max-height:28dvh;font-size:11px}} .field-expedition-body{font:12px/1.45 system-ui}.field-expedition-close{float:right;min-width:44px;min-height:44px;border:0;border-radius:8px;background:transparent;color:inherit;font:24px system-ui;cursor:pointer} .field-expedition-body>strong{display:block;padding-top:8px}.field-expedition-body>p{clear:both} .field-expedition-body.is-mobile{position:absolute;z-index:100;right:12px;top:210px;width:min(330px,calc(100% - 24px));max-height:calc(100dvh - 310px);padding:12px 16px;overflow:auto;overscroll-behavior:contain;pointer-events:auto;background:#f7fff8;color:#203e41;border:1px solid #b6d2bc;border-radius:14px;box-shadow:0 5px 28px #102b3540} .field-expedition-body[hidden]{display:none!important}.field-expedition-body.is-mobile p{margin:8px 0;color:#4b6861}.field-expedition-body.is-mobile ol{padding:0;list-style:none;margin:8px 0}.field-expedition-body.is-mobile li{margin:10px 0}.field-expedition-body.is-mobile small{display:block;font-size:11px;color:#4b6861}.field-expedition-body.is-mobile .is-done{color:#29804b} html[data-game-theme="dark"] .field-expedition-body.is-mobile{background:#182d2b;color:#e0f4e9;border-color:#48695a}html[data-game-theme="dark"] .field-expedition-body.is-mobile p,html[data-game-theme="dark"] .field-expedition-body.is-mobile small{color:#abc7b9} @media(max-width:700px),(max-height:500px){#gameScreen #questWidget>.field-expedition{width:44px;min-width:44px;max-width:44px;margin:3px 0 0;border-radius:8px}#gameScreen #questWidget>.field-expedition>button{width:44px;min-height:44px;font-size:0;padding:2px;text-align:center}#gameScreen #questWidget>.field-expedition>button::before{content:'🍃';display:block;font-size:18px;line-height:22px}#gameScreen #questWidget>.field-expedition>button::after{content:attr(data-count);display:block;font:700 9px/14px system-ui}} @media(max-height:500px){.field-expedition-body.is-mobile{top:12px;right:64px;width:min(340px,calc(100% - 120px));max-height:calc(100dvh - 92px)}} #gameScreen>.field-expedition.is-mobile{position:absolute;z-index:89;top:208px;right:12px;width:44px;height:46px;margin:0;border-radius:9px} #gameScreen>.field-expedition.is-mobile>button{width:44px;min-height:44px;font-size:0;padding:2px;text-align:center} #gameScreen>.field-expedition.is-mobile>button::before{content:'🍃';display:block;font-size:18px;line-height:22px} #gameScreen>.field-expedition.is-mobile>button::after{content:attr(data-count);display:block;font:700 9px/14px system-ui} .is-battling #gameScreen>.field-expedition,.is-battling .field-expedition-body{display:none!important} #gameScreen #questWidget>.field-expedition:not([hidden]){display:block!important}#gameScreen #questWidget .field-expedition p{color:inherit;font:12px/1.45 system-ui;margin:7px 0}#gameScreen #questWidget .field-expedition small{font:11px/1.45 system-ui;letter-spacing:0;color:inherit} #gameScreen#gameScreen #questWidget .field-expedition p,#gameScreen#gameScreen #questWidget .field-expedition small{color:#4b6861!important} html[data-game-theme="dark"] #gameScreen#gameScreen #questWidget .field-expedition p,html[data-game-theme="dark"] #gameScreen#gameScreen #questWidget .field-expedition small{color:#abc7b9!important} /* Keep the open desktop goals clear of the native team and action panels. */ .field-expedition-body:not(.is-mobile){position:absolute;z-index:100;top:min(260px,25dvh);right:320px;width:min(310px,calc(100% - 300px));max-height:min(420px,calc(75dvh - 200px));box-sizing:border-box;padding:12px 16px;overflow:auto;overscroll-behavior:contain;pointer-events:auto;background:#f7fff8;color:#203e41;border:1px solid #b6d2bc;border-radius:14px;box-shadow:0 5px 28px #102b3540} .field-expedition-body:not(.is-mobile) p{margin:8px 0;color:#4b6861}.field-expedition-body:not(.is-mobile) ol{padding:0;list-style:none;margin:8px 0}.field-expedition-body:not(.is-mobile) li{margin:10px 0}.field-expedition-body:not(.is-mobile) small{display:block;font-size:11px;color:#4b6861}.field-expedition-body:not(.is-mobile) .is-done{color:#29804b} html[data-game-theme="dark"] .field-expedition-body:not(.is-mobile){background:#182d2b;color:#e0f4e9;border-color:#48695a}html[data-game-theme="dark"] .field-expedition-body:not(.is-mobile) p,html[data-game-theme="dark"] .field-expedition-body:not(.is-mobile) small{color:#abc7b9} #gameScreen>.field-expedition:not(.is-mobile){position:absolute;z-index:89;top:248px;right:264px;width:44px;height:46px;margin:0;border-radius:9px} #gameScreen>.field-expedition:not(.is-mobile)>button{width:44px;min-height:44px;font-size:0;padding:2px;text-align:center} #gameScreen>.field-expedition:not(.is-mobile)>button::before{content:'🍃';display:block;font-size:18px;line-height:22px} #gameScreen>.field-expedition:not(.is-mobile)>button::after{content:attr(data-count);display:block;font:700 9px/14px system-ui} /* pk-style-source:150 */ /* /hud-usability-v29624.css */ /* Game chrome is not a document. Form fields and deliberate copy areas are. */ #gameScreen,#gameScreen * { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; } #gameScreen :is(input,textarea,select,[contenteditable]:not([contenteditable="false"]),[data-selectable],.chat-message-text), #gameScreen :is([contenteditable]:not([contenteditable="false"]),[data-selectable],.chat-message-text) * { user-select:text; -webkit-user-select:text; -webkit-touch-callout:default; } #gameScreen img { -webkit-user-drag:none; } #mobileChatFeed { display:none!important; } .chat-settings-note { font-size:12px; line-height:1.5; color:var(--hud-muted,#698494); margin:6px 0; } @layer hud-v2680 { #gameScreen[data-hud-design="v2680"] :is(#worldCameraButton,#worldMinimapChannelButton) { padding:10px!important; border:1px solid #c6dfe9!important; background:#f8fdff!important; color:#267391!important; box-shadow:0 2px 8px #173b5024!important; } #gameScreen[data-hud-design="v2680"] :is(#worldCameraButton,#worldMinimapChannelButton)[aria-expanded="true"] { background:#dff3f8!important; border-color:#5bb8c6!important; color:#166f7e!important; } #gameScreen[data-hud-design="v2680"] :is(#worldMinimapChannelMenu,.hud-context) { padding:14px!important; border-radius:16px!important; box-shadow:0 8px 24px #183f4e30!important; overscroll-behavior:contain!important; scrollbar-width:thin!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapShell:has(#worldMinimapChannelMenu:not([hidden]),.hud-context:not([hidden])) { z-index:1450!important; } #gameScreen[data-hud-design="v2680"] #worldMinimapChannelMenu>header, #gameScreen[data-hud-design="v2680"] .hud-context>header { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; margin:0 0 8px!important; } #gameScreen[data-hud-design="v2680"] :is(#worldMinimapChannelMenu,.hud-context)>header b { font:700 15px/1.3 'Segoe UI',sans-serif!important; color:inherit!important; } #gameScreen[data-hud-design="v2680"] :is([data-location-close],.hud-context>header button) { display:grid!important; place-items:center!important; width:44px!important; height:44px!important; min-width:44px!important; padding:11px!important; border:0!important; border-radius:12px!important; color:#45758b!important; background:#edf5f8!important; flex:none!important; } #gameScreen[data-hud-design="v2680"] .hud-context>div { display:grid!important; gap:10px!important; } #gameScreen[data-hud-design="v2680"] .hud-camera-stepper { display:grid!important; grid-template-columns:48px minmax(0,1fr) 48px!important; gap:8px!important; align-items:center!important; padding:10px!important; border-radius:12px!important; background:#edf7fb!important; } #gameScreen[data-hud-design="v2680"] .hud-camera-stepper button, #gameScreen[data-hud-design="v2680"] .hud-context :is(.hud-camera-reset,.hud-camera-overview) { min-height:44px!important; border-radius:10px!important; border:1px solid #cce2ec!important; background:#fcfeff!important; color:#246e8c!important; font-weight:650!important; } #gameScreen[data-hud-design="v2680"] .hud-camera-stepper output { text-align:center!important; font:750 24px/1.2 'Segoe UI',sans-serif!important; font-variant-numeric:tabular-nums!important; } #gameScreen[data-hud-design="v2680"] .hud-context p { margin:0!important; font:400 12px/1.5 'Segoe UI',sans-serif!important; } #gameScreen[data-hud-design="v2680"] .world-minimap-details>div { min-height:32px!important; } /* Three chosen goals stay in the journal; the HUD shows the next action only. */ body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget { right:calc(14px + env(safe-area-inset-right))!important; left:auto!important; top:var(--world-goal-top,196px)!important; width:240px!important; max-height:var(--world-goal-max-height,calc(100dvh - 290px))!important; border:1px solid #d8e9eb!important; border-radius:15px!important; background:#faffff!important; box-shadow:0 4px 16px #153f4a20!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-goal-head { min-height:44px!important; height:auto!important; margin:0!important; gap:4px!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-goal-toggle { min-height:44px!important; padding:0!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-goal-toggle>img { width:24px!important; height:24px!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-goal-toggle small { font:600 10px/1.3 'Segoe UI',sans-serif!important; letter-spacing:0!important; } #gameScreen[data-hud-design="v2680"] #questWidget:not(.is-collapsed) .exp-goal-toggle small { font:700 12px/1.3 'Segoe UI',sans-serif!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-goal-summary { font:650 12px/1.35 'Segoe UI',sans-serif!important; } #gameScreen[data-hud-design="v2680"] #questWidget:not(.is-collapsed) .exp-goal-summary { display:none!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-goal-journal { width:44px!important; height:44px!important; min-width:44px!important; padding:11px!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-tracked-list { max-height:calc(var(--world-goal-max-height,380px) - 64px)!important; padding-top:6px!important; overscroll-behavior:contain!important; scrollbar-width:thin!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-tracked-card { padding:8px!important; margin-top:6px!important; border-radius:11px!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-tracked-card>header { display:flex!important; gap:4px!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-tracked-card>header>button:first-child { flex:1!important; min-width:0!important; padding:0!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-tracked-card>header>button:last-child { width:44px!important; height:44px!important; min-width:44px!important; padding:10px!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-tracked-card header>button:first-child { min-height:44px!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-tracked-card header>button:first-child img { width:24px!important; height:24px!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-tracked-card header b { font-size:12px!important; line-height:1.35!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-mini-objectives { margin:4px 0!important; padding:0!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-mini-objectives li:not(.is-current) { display:none!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-mini-objectives .is-current { padding:4px 0!important; gap:6px!important; font-size:12px!important; line-height:1.4!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-mini-objectives .is-current .hud-icon { width:16px!important; height:16px!important; flex-basis:16px!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-goal-foot { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; margin-top:6px!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-goal-foot>small { display:block!important; max-width:140px!important; font:400 10px/1.3 'Segoe UI',sans-serif!important; color:#698594!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-goal-route { min-height:44px!important; padding:6px 10px!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter { position:absolute!important; right:calc(14px + env(safe-area-inset-right))!important; left:auto!important; top:calc(64px + env(safe-area-inset-top))!important; width:min(360px,calc(100% - 28px))!important; max-height:calc(100dvh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important; box-shadow:0 8px 26px #163d4d30!important; } #gameScreen[data-hud-design="v2680"] .notice-tabs button { min-height:56px!important; } #gameScreen[data-hud-design="v2680"] .notice-tabs img { width:24px!important; height:24px!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter>header>div>small { display:none!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter h2 { font-size:17px!important; } #gameScreen #homeWorkshopTools.home-world-tools { right:16px!important; left:auto!important; bottom:224px!important; padding:0!important; background:transparent!important; } #gameScreen #homeWorkshopTools .home-workshop-launch { display:flex!important; flex-direction:row!important; align-items:center!important; gap:8px!important; width:auto!important; height:52px!important; min-height:44px!important; padding:8px 13px!important; border:1px solid #bfe2d6!important; border-radius:15px!important; background:linear-gradient(140deg,#fcfffc,#e8f6ee)!important; color:#256b56!important; box-shadow:0 3px 12px #193e3326!important; font-family:'Segoe UI',sans-serif!important; } #gameScreen #homeWorkshopTools .home-workshop-launch svg { width:26px!important; height:26px!important; flex:none!important; } #gameScreen #homeWorkshopTools .home-launch-copy { display:grid!important; text-align:left!important; gap:2px!important; } #gameScreen #homeWorkshopTools .home-launch-copy b { font:700 12px/1.3 'Segoe UI',sans-serif!important; white-space:nowrap!important; } #gameScreen #homeWorkshopTools .home-launch-copy small { font:400 10px/1.2 'Segoe UI',sans-serif!important; color:#5c8a79!important; } #gameScreen #homeWorkshopTools .home-workshop-launch:focus-visible { outline:3px solid #298967!important; outline-offset:3px!important; } @media (min-width:761px) and (min-height:561px) { #gameScreen[data-hud-design="v2680"] #notificationCenterButton { position:fixed!important; top:calc(12px + env(safe-area-inset-top))!important; right:200px!important; left:auto!important; border-radius:13px!important; } #app[data-screen="game"] #toast { position:fixed!important; top:auto!important; left:auto!important; right:20px!important; bottom:126px!important; transform:none!important; width:max-content!important; max-width:min(320px,calc(100vw - 40px))!important; padding:12px 16px!important; font-size:13px!important; border-radius:14px!important; } } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget { top:var(--world-goal-top,160px)!important; right:calc(8px + env(safe-area-inset-right))!important; width:min(288px,calc(100% - 16px))!important; max-height:calc(100dvh - var(--world-goal-top,160px) - 96px)!important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget:not(.is-collapsed) { top:var(--world-goal-top,160px)!important; right:calc(8px + env(safe-area-inset-right))!important; left:auto!important; width:min(288px,calc(100% - 16px))!important; max-width:none!important; height:auto!important; min-height:44px!important; overflow:hidden!important; contain:none!important; } body:not(.is-battling) #gameScreen[data-hud-design="v2680"] #questWidget.is-collapsed { width:44px!important; height:44px!important; padding:0!important; border-radius:13px!important; } #gameScreen[data-hud-design="v2680"] #questWidget.is-collapsed .exp-goal-toggle { width:44px!important; height:44px!important; padding:0!important; display:grid!important; place-items:center!important; } #gameScreen[data-hud-design="v2680"] #questWidget.is-collapsed :is(.exp-goal-toggle>span,.exp-goal-toggle>.hud-icon,.exp-goal-toggle>img,.exp-goal-journal) { display:none!important; } #gameScreen[data-hud-design="v2680"] #questWidget.is-collapsed .exp-goal-mobile-icon { display:grid!important; place-items:center!important; width:44px!important; height:44px!important; } #gameScreen[data-hud-design="v2680"] #questWidget.is-collapsed .exp-goal-mobile-icon>img { width:28px!important; height:28px!important; } #gameScreen[data-hud-design="v2680"] #questWidget.is-collapsed .exp-goal-mobile-icon>.hud-icon { display:none!important; } #gameScreen[data-hud-design="v2680"] #questWidget:not(.is-collapsed) { padding:8px!important; } #gameScreen[data-hud-design="v2680"] #questWidget:not(.is-collapsed) .exp-goal-mobile-icon { display:grid!important; place-items:center!important; width:24px!important; height:24px!important; flex:0 0 24px!important; } #gameScreen[data-hud-design="v2680"] #questWidget:not(.is-collapsed) .exp-goal-mobile-icon>img { display:none!important; } #gameScreen[data-hud-design="v2680"] #questWidget:not(.is-collapsed) .exp-goal-mobile-icon>.hud-icon { display:block!important; position:static!important; width:20px!important; height:20px!important; background:none!important; transform:rotate(180deg)!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-tracked-list { max-height:calc(100dvh - var(--world-goal-top,160px) - 164px)!important; } #gameScreen[data-hud-design="v2680"] #questWidget .exp-goal-body { position:static!important; top:auto!important; left:auto!important; width:auto!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; } #gameScreen[data-hud-design="v2680"] #questWidget:not(.is-collapsed) .exp-goal-toggle>span { display:block!important; } #gameScreen[data-hud-design="v2680"] #questWidget:not(.is-collapsed) .exp-goal-toggle>.hud-icon { display:block!important; transform:rotate(180deg)!important; } #gameScreen[data-hud-design="v2680"] #questWidget:not(.is-collapsed) .exp-goal-head>.exp-goal-journal { display:grid!important; } #gameScreen[data-hud-design="v2680"] #notificationCenterButton { position:fixed!important; top:var(--world-goal-top,160px)!important; right:calc(60px + env(safe-area-inset-right))!important; left:auto!important; border-radius:13px!important; } #gameScreen[data-hud-design="v2680"]:has(#questWidget:not(.is-collapsed)) #notificationCenterButton { visibility:hidden!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter { top:calc(8px + env(safe-area-inset-top))!important; right:8px!important; left:8px!important; bottom:calc(88px + env(safe-area-inset-bottom))!important; width:auto!important; max-height:none!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter .notice-entry { padding:10px!important; gap:8px!important; grid-template-columns:28px minmax(0,1fr)!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter .notice-entry-icon { width:28px!important; height:28px!important; padding:0!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter .notice-entry-icon img { width:28px!important; height:28px!important; } #gameScreen #homeWorkshopTools.home-world-tools { right:8px!important; bottom:calc(98px + env(safe-area-inset-bottom))!important; } #gameScreen #homeWorkshopTools .home-workshop-launch { height:44px!important; padding:6px 10px!important; border-radius:13px!important; } #gameScreen #homeWorkshopTools .home-launch-copy small { display:none!important; } #gameScreen[data-hud-design="v2680"] :is(#worldMinimapChannelMenu,.hud-context) { max-height:min(500px,calc(100dvh - var(--world-goal-top,160px) - 100px))!important; } } @media (max-height:560px) and (orientation:landscape) { #gameScreen[data-hud-design="v2680"] :is(#worldMinimapChannelMenu,.hud-context) { position:fixed!important; top:8px!important; right:132px!important; width:min(300px,calc(100vw - 148px))!important; max-height:calc(100dvh - 96px - env(safe-area-inset-bottom))!important; } #gameScreen[data-hud-design="v2680"] #notificationCenter { inset:8px 132px calc(88px + env(safe-area-inset-bottom)) 8px!important; width:auto!important; max-height:none!important; } #gameScreen #homeWorkshopTools.home-world-tools { bottom:calc(98px + env(safe-area-inset-bottom))!important; right:8px!important; } } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] :is(.hud-camera-stepper,[data-location-close],.hud-context>header button,.hud-camera-reset,.hud-camera-overview,#questWidget) { background:#173e4e!important; border-color:#436b7b!important; color:#e2f6f7!important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] .hud-camera-stepper output { color:#f0fbff!important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] #worldCameraButton circle, html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] #worldMinimapChannelButton [fill] { fill:#254d60!important; } html[data-game-theme="dark"] #gameScreen[data-hud-design="v2680"] #questWidget :is(.exp-tracked-card>header>button:last-child,.exp-tracked-card>header>button:last-child .hud-icon,.exp-goal-toggle .hud-icon) { color:#bddfe9!important; } html[data-game-theme="dark"] #gameScreen #homeWorkshopTools .home-workshop-launch { background:#1c493b!important; border-color:#477d66!important; color:#e2faea!important; } html[data-game-theme="dark"] #gameScreen #homeWorkshopTools .home-launch-copy small { color:#b9dccc!important; } } /* Home positions were defined by the earlier theme layer with !important. Keep this correction in that same layer, rather than escalating every HUD rule. */ @layer ui-theme { #gameScreen[data-world-hud="v2340"] #homeWorkshopTools.home-world-tools { width:max-content!important; max-width:calc(100% - 16px)!important; } @media (min-width:761px) and (min-height:561px) { #gameScreen[data-world-hud="v2340"] #homeWorkshopTools.home-world-tools { left:16px!important; right:auto!important; bottom:112px!important; } } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { #gameScreen[data-world-hud="v2340"] #homeWorkshopTools.home-world-tools { left:auto!important; right:8px!important; bottom:calc(98px + env(safe-area-inset-bottom))!important; } } } /* pk-style-source:151 */ /* /player-presence.css */ .player-presence{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;font-size:inherit;line-height:1.2;vertical-align:middle;color:#258a70} .player-presence-icon{display:block;width:16px;height:16px;flex:0 0 16px;overflow:visible} .player-presence.is-away{color:#a9670b}.player-presence.is-offline{color:#667786} .tc-status-line .player-presence{font-weight:700}.tc-friend-list .player-presence{grid-row:auto} .tc-friend-list button{grid-template-columns:16px minmax(0,1fr) auto} .party-hud-status .player-presence{flex:0 0 16px}.party-hud-status .player-presence-icon{width:14px;height:14px;flex-basis:14px} .fn-avatar>.player-presence{position:absolute;right:-3px;bottom:-3px;background:#fff;border-radius:8px;padding:1px;box-shadow:0 0 0 2px #fff} .fn-avatar>.player-presence .player-presence-icon{width:14px;height:14px;flex-basis:14px} .social-friend-list .player-presence{margin-inline-start:4px} [data-theme="dark"] .player-presence,.theme-dark .player-presence{color:#6cd8b3} [data-theme="dark"] .player-presence.is-away,.theme-dark .player-presence.is-away{color:#f2c476} [data-theme="dark"] .player-presence.is-offline,.theme-dark .player-presence.is-offline{color:#a2afba} /* Trainer cards deliberately retain their light illustrated surface in both themes. */ [data-theme="dark"] .tc .player-presence,.theme-dark .tc .player-presence{color:#258a70} [data-theme="dark"] .tc .player-presence.is-away,.theme-dark .tc .player-presence.is-away{color:#a9670b} [data-theme="dark"] .tc .player-presence.is-offline,.theme-dark .tc .player-presence.is-offline{color:#667786} @media(max-width:600px){.player-presence{gap:4px}.player-presence-icon{width:15px;height:15px;flex-basis:15px}} /* pk-style-source:152 */ /* /trainer-clothing.css */ /* Clothing uses inventory illustrations and world-only attributes. */ @layer ui-theme { #app #gameScreen #sidePanel.is-trainer-clothing-panel.is-open{position:fixed!important;inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important;translate:none!important;scale:none!important;zoom:1!important;width:min(880px,calc(100% - 32px))!important;height:min(820px,calc(100dvh - 40px))!important;min-height:0!important;max-height:none!important;max-width:none!important;padding:0!important;border:1px solid #c8dce2!important;border-radius:24px!important;overflow:hidden!important;background:var(--cl-card,#fff)!important;box-shadow:0 20px 70px #18364b40!important} #sidePanel.is-trainer-clothing-panel #sidePanelContent{height:100%!important;padding:0!important;overflow:hidden!important;scrollbar-gutter:auto!important;display:block!important} #sidePanel.is-trainer-clothing-panel>.panel-window-grip,#sidePanel.is-trainer-clothing-panel>.panel-close{display:none!important} .trainer-clothing,.tc-clothing-scroll,.inventory-item-dialog-v2740{--cl-card:#fff;--cl-soft:#f0f5f6;--cl-line:#d4e2e5;--cl-ink:#284b59;--cl-muted:#6b818b} .trainer-clothing{width:100%!important;max-width:none!important;margin:0!important;box-sizing:border-box;height:100%;position:relative;display:flex;flex-direction:column;color:var(--cl-ink);font-size:14px;line-height:1.4;background:var(--cl-card)} .trainer-clothing button,.trainer-clothing input,.trainer-clothing select{font:inherit;color:inherit;cursor:pointer}.trainer-clothing button:disabled{opacity:.45;cursor:default}.trainer-clothing :is(button,input,select):focus-visible{outline:3px solid #6bb4aa;outline-offset:2px} .clothing-header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;background:linear-gradient(120deg,#edf6ee,#edf3ff);border-bottom:1px solid var(--cl-line);flex-shrink:0} .clothing-header>span{display:flex;gap:12px;align-items:center}.clothing-header img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 3px 3px #35525a22)}.clothing-header small{font-size:10px;letter-spacing:1.2px;color:var(--cl-muted)}.clothing-header h2{font-size:23px;margin:2px 0 0} .clothing-header>button{width:40px;height:40px;border:1px solid var(--cl-line);border-radius:12px;background:var(--cl-card);font-size:23px} .clothing-tabs{display:flex;padding:10px 20px;gap:8px;border-bottom:1px solid var(--cl-line);flex-shrink:0}.clothing-tabs button{flex:1;padding:10px;border:1px solid var(--cl-line);border-radius:12px;background:var(--cl-card);font-weight:700}.clothing-tabs button[aria-pressed=true]{background:#e4f2eb;border-color:#99c5b3;color:#305e4d}.clothing-tabs small{font-size:11px;font-weight:500;white-space:nowrap} .clothing-scroll{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:16px 22px 24px}.clothing-overview{border:1px solid var(--cl-line);border-radius:18px;padding:14px;background:var(--cl-card)} .clothing-intro{display:flex;gap:8px;justify-content:space-between;align-items:center;flex-wrap:wrap}.clothing-intro>b{font-size:16px}.clothing-intro small{color:var(--cl-muted);font-size:11px;font-weight:500}.clothing-intro>span{font-size:11px;color:var(--cl-muted)}.clothing-climate{display:flex;align-items:center;gap:5px;border-radius:20px;padding:5px 9px;background:#e8f4eb;color:#356849!important;font-size:11px}.clothing-climate img{width:20px;height:20px}.clothing-climate.is-warning{background:#fff1d9;color:#855a22!important} .clothing-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}.clothing-meter{--meter-a:#72b9d6;--meter-b:#a8dcea;min-width:0;background:var(--cl-soft);border-radius:12px;padding:9px 12px;color:var(--cl-ink)}.clothing-meter.is-heat{--meter-a:#ea9861;--meter-b:#f1c487}.clothing-meter.is-movement{--meter-a:#8792cf;--meter-b:#b3bbe9}.clothing-meter.is-stamina{--meter-a:#68a887;--meter-b:#a2ceb0}.clothing-meter>span{display:flex;gap:7px;align-items:center}.clothing-meter img{width:24px;height:24px}.clothing-meter b{font-size:11px;flex:1}.clothing-meter strong{font-size:13px;white-space:nowrap}.clothing-meter>i{display:block;height:7px;border-radius:10px;background:#50718216;overflow:hidden;margin-top:6px}.clothing-meter>i>em{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,var(--meter-a),var(--meter-b));transition:width .18s}.clothing-meter>small{display:block;margin-top:5px;font-size:10px;color:var(--cl-muted)} .clothing-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.clothing-slot{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 5px;border:1px solid var(--cl-line);border-radius:12px;min-width:0;background:var(--cl-card);color:var(--cl-ink);text-align:center}.clothing-slot small{font-size:9px;color:var(--cl-muted)}.clothing-slot-art{display:grid;place-items:center;width:62px;height:58px}.clothing-slot-art>img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 2px 2px #203e5120)}.clothing-slot:not(.is-filled) .clothing-slot-art img{width:30px;height:30px;opacity:.45}.clothing-slot>b{font-size:10px;line-height:1.25;min-height:25px;font-weight:600;overflow-wrap:anywhere}.clothing-slot:hover:enabled{border-color:#83b5a6;background:#edf5f1} .clothing-explainer,.clothing-detail-note{font-size:11px;line-height:1.55;margin:14px 0 0;color:var(--cl-muted)} .clothing-catalog>header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:18px 0 12px}.clothing-catalog h3{margin:0;font-size:16px;white-space:nowrap}.clothing-catalog h3 small{color:var(--cl-muted);font-size:11px}.clothing-catalog>header>div{display:flex;gap:6px}.clothing-catalog input,.clothing-catalog select{border:1px solid var(--cl-line);border-radius:10px;padding:9px;background:var(--cl-card);min-width:0;max-width:175px;font-size:11px}.clothing-catalog input{width:155px} .clothing-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.clothing-item,.clothing-detail-art{position:relative;min-width:0;--rarity:#a0adb6;--rarity-bg:#f0f4f6}.rarity-uncommon{--rarity:#85b296;--rarity-bg:#eff6f1}.rarity-rare{--rarity:#88afd1;--rarity-bg:#eef4fb}.rarity-epic{--rarity:#b29bcc;--rarity-bg:#f3eef9}.clothing-item>button{display:flex;flex-direction:column;align-items:stretch;width:100%;height:100%;padding:7px;border:1px solid var(--cl-line);border-radius:14px;background:var(--cl-card);text-align:left;transition:border-color .15s,box-shadow .15s}.clothing-item>button:hover{border-color:var(--rarity);box-shadow:0 4px 12px #294e5b15}.clothing-item-art{position:relative;display:grid;place-items:center;height:102px;border-radius:10px;background:linear-gradient(135deg,var(--rarity-bg),var(--cl-soft));overflow:hidden}.clothing-item-art img{width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 3px 3px #274c571f)}.clothing-item-art small{position:absolute;left:4px;bottom:4px;font-size:8px;padding:2px 5px;border-radius:5px;color:var(--cl-muted);background:var(--cl-card)}.clothing-item>button>b{font-size:11px;line-height:1.3;margin:7px 0 4px;min-height:28px;overflow-wrap:anywhere}.clothing-item>button>em{font-size:10px;font-style:normal;color:var(--cl-muted);margin-top:auto} .clothing-hover-tip{display:none}.clothing-tip-portal{position:absolute;z-index:8;width:245px;max-width:calc(100% - 24px);padding:13px 15px;border:1px solid var(--cl-line);border-radius:14px;background:var(--cl-card);box-shadow:0 8px 30px #17333e2b;pointer-events:none;font-size:11px;color:var(--cl-ink)}.clothing-tip-portal[hidden]{display:none}.clothing-tip-portal>b{font-size:12px}.clothing-tip-portal p{margin:6px 0}.clothing-tip-portal small{color:var(--cl-muted);font-size:10px} .clothing-comparison{margin-top:14px;border:1px dashed var(--cl-line);border-radius:12px;padding:10px 12px;color:var(--cl-ink)}.clothing-comparison>b{font-size:11px;display:block;color:var(--cl-muted)}.clothing-comparison>div{display:flex;gap:6px;flex-wrap:wrap;font-size:11px;margin-top:6px}.clothing-comparison>div span{background:var(--cl-soft);padding:4px 7px;border-radius:6px}.clothing-comparison p{font-size:11px;margin:7px 0 0}.clothing-empty{grid-column:1/-1;text-align:center;padding:22px}.clothing-empty p{font-size:12px;color:var(--cl-muted)} .clothing-detail-main{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:start}.clothing-detail-art{display:flex;align-items:center;justify-content:center;min-height:235px;border:1px solid var(--rarity);border-radius:20px;background:radial-gradient(circle at 50% 42%,var(--rarity-bg),var(--cl-soft))}.clothing-detail-art>img{width:210px;height:210px;object-fit:contain;filter:drop-shadow(0 8px 6px #29455122)}.clothing-detail-art>span{position:absolute;bottom:10px;font-size:10px;background:var(--cl-card);padding:5px 10px;border-radius:15px}.clothing-back{border:0!important;background:transparent!important;padding:8px 0 14px!important;font-size:12px!important;color:var(--cl-muted)!important;text-align:left}.clothing-detail-info h3{font-size:22px;line-height:1.25;margin:7px 0 0}.clothing-rarity{font-size:10px;color:var(--cl-muted)}.clothing-detail-info .clothing-stats{gap:7px;margin:12px 0}.clothing-detail-info .clothing-meter{padding:8px}.clothing-detail-info .clothing-meter>span{flex-wrap:wrap;gap:4px}.clothing-detail-info .clothing-meter b{font-size:10px}.clothing-detail-info .clothing-meter strong{font-size:12px}.clothing-perks{padding:0;list-style:none;margin:9px 0;color:var(--cl-ink);font-size:11px}.clothing-perks li{padding:4px 0}.clothing-perks li::before{content:'•';color:#6ba384;font-weight:800;margin-right:7px}.clothing-item-description,.clothing-condition{font-size:11px;color:var(--cl-muted);line-height:1.5;margin:7px 0}.clothing-condition{font-size:10px} .clothing-detail-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}.clothing-detail-actions>button,.clothing-primary,.clothing-empty button,.clothing-confirm button{padding:11px 8px;border:1px solid var(--cl-line);border-radius:11px;background:var(--cl-card);color:var(--cl-ink);font-size:12px;font-weight:700;min-height:44px}.clothing-detail-actions small{display:block;margin-top:2px;font-size:9px;font-weight:500;color:var(--cl-muted)}.clothing-primary,.clothing-detail-actions>.clothing-primary{background:#e5f3eb;border-color:#9fc9b7;color:#315f4c}.clothing-detail-actions>.is-danger{color:#a36359}.clothing-confirm{margin-top:15px;border:1px solid #d8b990;border-radius:14px;padding:14px;background:var(--cl-soft)}.clothing-confirm>b{font-size:13px}.clothing-confirm p{font-size:12px;color:var(--cl-muted)}.clothing-confirm>div{display:flex;gap:8px}.clothing-confirm button{flex:1}.clothing-confirm [data-clothing-confirm-submit]{background:#edf3ec;border-color:#8eaf9b} .clothing-status{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 20px;min-height:40px;border-top:1px solid var(--cl-line);font-size:11px;background:var(--cl-soft);color:var(--cl-muted)}.clothing-status button{border:1px solid var(--cl-line);background:var(--cl-card);border-radius:8px;padding:6px;color:var(--cl-ink)} .inventory-clothing-summary{display:flex;align-items:center;gap:9px;margin:0 14px 8px;padding:9px 12px;border:1px solid #d4e2e5;border-radius:12px;background:var(--ui-soft,#eef5f1);color:var(--ui-ink,#244452);text-align:left;flex-shrink:0}.inventory-clothing-summary>span{flex:1}.inventory-clothing-summary b,.inventory-clothing-summary em{display:block}.inventory-clothing-summary b{font-size:12px}.inventory-clothing-summary b small{color:var(--ui-muted,#63818b)}.inventory-clothing-summary em{font-size:10px;font-style:normal;color:var(--ui-muted,#63818b)}.inventory-clothing-summary>strong{font-size:11px} .tc .tc-name-row{flex-wrap:wrap}.tc .tc-name-row h2{flex:1;min-width:70px}.tc .tc-name-row .tc-clothing-entry{display:flex;align-items:center;gap:5px;width:auto;min-height:38px;flex-shrink:0;border:1px solid #d1e4de;border-radius:10px;background:#edf5f1;color:#345e50;padding:4px 7px;font-size:10px}.tc-clothing-entry img{width:22px;height:22px}.tc-clothing-entry span{display:flex;flex-direction:column;text-align:left;gap:1px}.tc-clothing-entry small{font-size:9px;font-weight:500;color:#6d8b7f}.tc-sheet--clothing .tc-clothing-scroll{overflow:auto;min-height:0;padding:14px;overscroll-behavior:contain;flex:1;color:var(--cl-ink);background:var(--cl-card)}.tc-clothing-scroll .clothing-slots{grid-template-columns:repeat(3,minmax(0,1fr))}.tc-clothing-scroll .clothing-primary{margin-top:12px;width:100%} #app #gameScreen .world-movement-button{display:flex!important;align-items:center;gap:3px;border:1px solid #c9dfd7;border-radius:8px;background:#edf5f1;color:#315f50;min-height:28px;padding:3px 6px;font-size:10px;white-space:nowrap;cursor:pointer;flex-shrink:0}.world-movement-button img{width:21px;height:21px}#app #gameScreen .player-chip-progress.is-stamina>i>b{background:linear-gradient(90deg,#52a37c,#7bc49b)!important}#app #gameScreen .world-movement-button.is-run-active{background:#cce8d8!important;border-color:#6daa88!important;color:#234f39!important} #app #gameScreen #playerProfileButton{height:auto!important;min-height:56px!important;overflow:visible!important}#app #gameScreen #worldMovementButton{position:absolute!important;left:0!important;top:calc(100% + 6px)!important;margin:0!important;transform:none!important}#app #gameScreen #playerStaminaHud[data-clothing-run]{display:none!important}#app #gameScreen .player-chip-progress[hidden],#app #gameScreen #playerStaminaHud[hidden],#app #gameScreen #worldMovementButton[hidden]{display:none!important}.joystick.is-walk-only .joystick-run-status-v69{background:#e8eff5;color:#526b7e}.joystick.is-walk-only::before{opacity:.3} :is([data-theme=dark],[data-game-theme=dark]) :is(.trainer-clothing,.tc-clothing-scroll,.inventory-item-dialog-v2740){--cl-card:#213442;--cl-soft:#293e4a;--cl-line:#425966;--cl-ink:#dbe8ee;--cl-muted:#afc2cd} :is([data-theme=dark],[data-game-theme=dark]) #app #gameScreen #sidePanel.is-trainer-clothing-panel.is-open{background:#213442!important}:is([data-theme=dark],[data-game-theme=dark]) .clothing-header{background:linear-gradient(120deg,#243e36,#283b4d)}:is([data-theme=dark],[data-game-theme=dark]) .clothing-tabs button[aria-pressed=true],:is([data-theme=dark],[data-game-theme=dark]) .clothing-primary{background:#305041;color:#d5efdf;border-color:#557e69}:is([data-theme=dark],[data-game-theme=dark]) :is(.clothing-item,.clothing-detail-art){--rarity-bg:#324954}:is([data-theme=dark],[data-game-theme=dark]) .rarity-epic{--rarity-bg:#473c5b}:is([data-theme=dark],[data-game-theme=dark]) .tc-clothing-entry{background:#2c4a40!important;color:#d3e9dd!important;border-color:#517a69!important} @media(max-width:650px){#app #gameScreen #sidePanel.is-trainer-clothing-panel.is-open{width:calc(100% - 16px)!important;height:calc(100dvh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom)))!important;border-radius:18px!important}.clothing-header{padding:10px 13px}.clothing-header h2{font-size:20px}.clothing-header img{width:42px;height:42px}.clothing-header>button{width:44px;height:44px}.clothing-tabs{padding:8px 12px}.clothing-tabs button{min-height:44px;font-size:12px}.clothing-scroll{padding:12px;scrollbar-gutter:auto}.clothing-overview{padding:10px}.clothing-stats{gap:7px}.clothing-meter{padding:7px 8px}.clothing-meter img{width:20px;height:20px}.clothing-meter>span{gap:4px;flex-wrap:wrap}.clothing-meter b{font-size:9px}.clothing-meter strong{font-size:11px}.clothing-meter>small{font-size:9px}.clothing-slots{grid-template-columns:repeat(3,minmax(0,1fr))}.clothing-slot{padding:6px}.clothing-slot-art,.clothing-slot-art>img{width:54px;height:54px}.clothing-catalog>header{align-items:stretch;flex-direction:column;gap:9px}.clothing-catalog>header>div{display:grid;grid-template-columns:1fr 1fr}.clothing-catalog input,.clothing-catalog select{max-width:none;width:100%;min-height:44px;font-size:11px;box-sizing:border-box}.clothing-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.clothing-item>button{padding:5px;border-radius:12px}.clothing-item-art{height:82px}.clothing-item-art img{width:70px;height:70px}.clothing-item>button>b{font-size:10px;min-height:26px}.clothing-item>button>em{font-size:9px}.clothing-item-art small{font-size:7px}.clothing-detail-main{grid-template-columns:1fr;gap:14px}.clothing-detail-art{min-height:175px}.clothing-detail-art>img{width:160px;height:160px}.clothing-detail-info h3{font-size:20px}.clothing-detail-actions{grid-template-columns:1fr 1fr}.clothing-back{min-height:44px;padding-top:0!important}.clothing-status{padding:9px 12px;font-size:10px}.clothing-tip-portal{display:none!important}.inventory-clothing-summary{margin:0 8px 6px}.inventory-clothing-summary>strong{font-size:0}.inventory-clothing-summary>strong::after{content:'›';font-size:20px}.tc .tc-name-row .tc-clothing-entry{min-height:44px;padding:4px 6px;font-size:9px}#app #gameScreen .world-movement-button{min-height:44px;min-width:44px}} .inventory-clothing-tools{display:flex;align-items:center;gap:8px;padding:4px 12px 10px;flex-wrap:wrap;color:var(--ui-text,#284b59)}.inventory-clothing-tools nav{display:flex;gap:5px;flex-wrap:wrap;flex:1}.inventory-clothing-tools button{display:flex;align-items:center;gap:4px;border:1px solid var(--ui-border,#d4e2e5);border-radius:9px;background:var(--ui-surface,#fff);color:inherit;padding:5px 8px;min-height:36px;font-size:10px;cursor:pointer}.inventory-clothing-tools img{width:19px;height:19px}.inventory-clothing-tools [aria-pressed=true]{background:#e2f0e9;color:#325f4a;border-color:#94b7a2}.inventory-clothing-tools [data-clothing-shop]{font-weight:700;background:#edf3fa} .inventory-clothing-tools>[data-clothing-inventory-select]{display:none!important} @media(max-width:650px){#sidePanel.is-inventory-panel .inventory-clothing-tools{flex-wrap:nowrap;gap:6px;padding-bottom:8px}#sidePanel.is-inventory-panel .inventory-clothing-tools>nav{display:none!important}#sidePanel.is-inventory-panel .inventory-clothing-tools>[data-clothing-inventory-select]{display:block!important;flex:1;min-width:0;min-height:44px;padding:7px;border:1px solid var(--ui-border,#d4e2e5);border-radius:9px;background:var(--ui-surface,#fff);color:var(--ui-text,#284b59);font-size:11px}} /* v5: compact trainer kit; item details retain vertical scrolling. */ #app #gameScreen #sidePanel.is-trainer-clothing-panel.is-open:has(.is-outfit-v6){width:min(420px,calc(100% - 24px))!important;height:min(620px,calc(100dvh - 24px))!important;border-radius:20px!important} .is-outfit-v6 .clothing-detail-main{grid-template-columns:1fr;gap:10px}.is-outfit-v6 .clothing-detail-art{min-height:140px}.is-outfit-v6 .clothing-detail-art>img{width:130px;height:130px}.is-outfit-v6 .clothing-detail-info h3{font-size:19px}.is-outfit-v6 .clothing-detail-actions{grid-template-columns:1fr 1fr}.is-outfit-v6.is-detail .clothing-scroll{padding:12px;overflow-y:auto;overflow-x:hidden}.is-outfit-v6 .clothing-header{padding:8px 12px;min-height:54px;box-sizing:border-box}.is-outfit-v6 .clothing-header h2{font-size:21px}.is-outfit-v6 .clothing-header img{width:34px;height:34px}.is-outfit-v6 .clothing-header>button{width:40px;height:40px}.is-outfit-v6 .clothing-header small{font-size:8px} .is-outfit-v6:not(.is-detail) .clothing-scroll{flex:1;min-height:0;overflow:hidden;scrollbar-gutter:auto;padding:9px;box-sizing:border-box} .is-outfit-v6 .clothing-outfit{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px;max-width:none} .clothing-intro{display:flex;align-items:center;justify-content:space-between;gap:6px}.clothing-intro>b{font-size:12px}.clothing-intro small{font-size:9px;font-weight:500;color:var(--cl-muted)}.clothing-climate{font-size:9px}.clothing-climate img{width:20px;height:20px} .clothing-hero-layout{display:grid;grid-template-columns:78px minmax(0,1fr) 78px;grid-template-rows:repeat(3,minmax(0,1fr));gap:7px;padding:7px;min-height:0;position:relative;box-sizing:border-box;border:1px solid #b8d4df;border-radius:16px;background:linear-gradient(#f5fcff18,#eff8ff12),url('/assets/wardrobe-v5/wardrobe-room.webp') center/cover no-repeat} .clothing-hero-stage{grid-column:2;grid-row:1/4;position:relative;min-width:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}.clothing-hero-halo{display:none} .clothing-hero-canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);width:210px!important;height:210px!important;max-width:none!important;pointer-events:none}.clothing-hero-status{position:absolute;top:42%;left:0;right:0;text-align:center;font-size:9px;color:var(--cl-muted)} .clothing-hero-name{position:relative;z-index:1;max-width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.25;border:1px solid #b9d0dc;border-radius:8px;background:#f9fcfff2;padding:4px 6px;margin-bottom:1px}.clothing-hero-name b{font-size:11px;overflow-wrap:anywhere}.clothing-hero-name small{font-size:8px;color:var(--cl-muted)} .clothing-hero-slot{min-width:0;position:relative;border:1px dashed #acc6d1;border-radius:11px;background:#ffffffee;overflow:hidden}.clothing-hero-slot.is-filled{border-style:solid;border-color:#7eaca4;background:#f7fcf8f2}.clothing-hero-slot.is-head{grid-column:1;grid-row:1}.clothing-hero-slot.is-body{grid-column:1;grid-row:2}.clothing-hero-slot.is-accessory{grid-column:1;grid-row:3}.clothing-hero-slot.is-legs{grid-column:3;grid-row:2}.clothing-hero-slot.is-feet{grid-column:3;grid-row:3} .clothing-slot-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:100%;min-height:44px;padding:4px 3px;box-sizing:border-box;border:0;border-radius:inherit;background:transparent;color:var(--cl-ink);text-align:center}.clothing-slot-choice:hover:enabled{background:#bdddeb33}.clothing-slot-choice>small{font-size:8px;color:var(--cl-muted);flex-shrink:0}.clothing-slot-choice>b{font-size:8px;line-height:1.2;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex-shrink:0}.clothing-slot-choice>em{font-size:7px;line-height:1.2;font-style:normal;color:var(--cl-muted);white-space:nowrap;flex-shrink:0}.clothing-slot-choice .clothing-slot-art{display:grid;place-items:center;width:40px;height:32px;flex-shrink:0}.clothing-slot-choice .clothing-slot-art img{width:38px;height:38px;object-fit:contain}.clothing-hero-slot.is-empty .clothing-slot-art img{opacity:1} .clothing-outfit-attributes{margin:0}.clothing-outfit-attributes>header{display:flex;justify-content:space-between;gap:5px;align-items:center}.clothing-outfit-attributes>header b{font-size:11px}.clothing-outfit-attributes>header small{display:none}.is-outfit-v6 .clothing-stats{margin:5px 0 0;gap:6px}.is-outfit-v6 .clothing-meter{padding:6px 7px}.is-outfit-v6 .clothing-meter>span{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:4px;align-items:center}.is-outfit-v6 .clothing-meter img{width:24px;height:24px}.is-outfit-v6 .clothing-meter b{font-size:9px;line-height:1.2}.is-outfit-v6 .clothing-meter strong{font-size:10px;white-space:nowrap}.is-outfit-v6 .clothing-meter>i{height:6px;margin-top:4px}.is-outfit-v6 .clothing-meter>small{display:none} .clothing-outfit-inventory{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:5px 7px;border:1px solid var(--cl-line);border-radius:11px;background:var(--cl-soft)}.clothing-outfit-inventory>span{display:flex;align-items:center;gap:5px;min-width:0}.clothing-outfit-inventory>span>img{width:28px;height:28px}.clothing-outfit-inventory>span>span{display:flex;flex-direction:column;gap:2px}.clothing-outfit-inventory b{font-size:10px}.clothing-outfit-inventory small{font-size:9px;color:var(--cl-muted)}.clothing-outfit-inventory button{min-height:44px;font-size:10px;padding:6px 9px;white-space:nowrap}.is-outfit-v6 .clothing-status{min-height:28px;padding:5px 10px;font-size:9px;box-sizing:border-box} .tc-sheet--clothing .tc-clothing-scroll{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px;overflow:hidden;padding:10px}.tc-clothing-scroll>.clothing-explainer{display:none}.tc-clothing-scroll>.clothing-stats{margin:0;gap:6px}.tc-clothing-scroll>.clothing-primary{margin:0;min-height:44px}.tc-clothing-scroll .clothing-hero-layout{height:100%}.tc-clothing-scroll .clothing-meter>span{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:3px;align-items:center}.tc-clothing-scroll .clothing-meter img{width:22px;height:22px}.tc-clothing-scroll .clothing-meter b{font-size:8px;line-height:1.2}.tc-clothing-scroll .clothing-meter strong{font-size:9px}.tc-clothing-scroll .clothing-meter>small{display:none} :is([data-theme=dark],[data-game-theme=dark]) .clothing-hero-layout{background-image:linear-gradient(#142d475b,#13334677),url('/assets/wardrobe-v5/wardrobe-room.webp');border-color:#5b8597}:is([data-theme=dark],[data-game-theme=dark]) .clothing-hero-slot{background:#203e50f2;border-color:#7397a4}:is([data-theme=dark],[data-game-theme=dark]) .clothing-hero-slot.is-filled{background:#264d47ef;border-color:#89b5a6}:is([data-theme=dark],[data-game-theme=dark]) .clothing-hero-name{background:#203d50f2;border-color:#6d91a3} @media(max-width:650px){#app #gameScreen #sidePanel.is-trainer-clothing-panel.is-open:has(.is-outfit-v6){width:min(360px,calc(100% - 16px))!important;height:min(620px,calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom))))!important}.is-outfit-v6 .clothing-header>button{width:44px;height:44px}.is-outfit-v6 .clothing-hero-layout,.tc-clothing-scroll .clothing-hero-layout{grid-template-columns:70px minmax(0,1fr) 70px;gap:5px;padding:5px}.clothing-hero-canvas{width:190px!important;height:190px!important}.is-outfit-v6 .clothing-meter b{font-size:8px}.is-outfit-v6 .clothing-meter strong{font-size:9px}.is-outfit-v6 .clothing-meter>span{grid-template-columns:22px minmax(0,1fr) auto;gap:3px}.is-outfit-v6 .clothing-meter img{width:22px;height:22px}.inventory-clothing-tools>[data-clothing-inventory-select]{width:100%}} @media(max-width:350px){.is-outfit-v6 .clothing-hero-layout,.tc-clothing-scroll .clothing-hero-layout{grid-template-columns:62px minmax(0,1fr) 62px}.clothing-hero-canvas{width:172px!important;height:172px!important}.clothing-slot-choice .clothing-slot-art{height:29px}.clothing-slot-choice .clothing-slot-art img{width:33px;height:33px}.clothing-hero-name b{font-size:9px}.clothing-hero-name small{display:none}.is-outfit-v6 .clothing-meter{padding:6px}.is-outfit-v6 .clothing-climate{font-size:8px}.is-outfit-v6 .clothing-intro>b{font-size:11px}.clothing-outfit-inventory>span>img{width:24px;height:24px}.clothing-outfit-inventory button{padding:6px;font-size:9px}} @media(max-height:560px){.is-outfit-v6:not(.is-detail) .clothing-scroll{overflow-y:auto}.is-outfit-v6 .clothing-outfit{height:auto;grid-template-rows:auto 245px auto auto}.tc-sheet--clothing .tc-clothing-scroll{overflow-y:auto;grid-template-rows:auto 245px auto auto}} @media(prefers-reduced-motion:reduce){.trainer-clothing *{scroll-behavior:auto!important;animation:none!important;transition:none!important}} /* v6: clear labels and actions that stay visible while the item body scrolls. */ .is-outfit-v6 .clothing-slot-choice>small,.tc-clothing-scroll .clothing-slot-choice>small{font-size:9px;line-height:1.2} .is-outfit-v6 .clothing-slot-choice>b,.tc-clothing-scroll .clothing-slot-choice>b{font-size:10px;line-height:1.15} .is-outfit-v6 .clothing-slot-choice>em,.tc-clothing-scroll .clothing-slot-choice>em{font-size:9px;line-height:1.2} .is-outfit-v6 .clothing-slot-choice .clothing-slot-art{height:30px} .is-outfit-v6 .clothing-meter b{font-size:9px}.is-outfit-v6 .clothing-meter strong{font-size:10px} .is-outfit-v6.is-detail .clothing-scroll{overflow:hidden;display:flex;flex-direction:column;padding:10px} .is-outfit-v6 .clothing-detail{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;gap:0} .is-outfit-v6 .clothing-back{flex-shrink:0;min-height:44px;padding:6px 0!important;font-size:12px!important} .is-outfit-v6 .clothing-detail-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:3px;scrollbar-gutter:stable} .is-outfit-v6 .clothing-detail-actions{flex-shrink:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0 0;padding-top:8px;border-top:1px solid var(--cl-line);background:var(--cl-card)} .is-outfit-v6 .clothing-detail-actions[hidden]{display:none!important} .is-outfit-v6 .clothing-detail-actions>button{min-height:44px;padding:7px;font-size:12px} .is-outfit-v6 .clothing-detail-actions small{font-size:10px} .is-outfit-v6 .clothing-confirm{flex-shrink:0;margin-top:8px;padding:9px}.is-outfit-v6 .clothing-confirm p{font-size:11px;margin:6px 0}.is-outfit-v6 .clothing-confirm button{min-height:44px} .is-outfit-v6 .clothing-detail-note{margin:9px 0;font-size:11px} @media(max-width:350px){.is-outfit-v6 .clothing-slot-choice>b{font-size:9px}.is-outfit-v6 .clothing-slot-choice>em{font-size:8px}.is-outfit-v6 .clothing-meter b{font-size:8px}} } /* Outfit v6: one clothing context, five orderly equipment rows. */ @layer ui-theme { #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-catalog-v52.has-clothing-controls{grid-template-rows:auto auto minmax(0,1fr)!important} #app #gameScreen #sidePanel .inventory-clothing-context{padding:0 12px 10px;display:grid;gap:8px;min-width:0;border-bottom:1px solid var(--theme-border)} #app #gameScreen #sidePanel .inventory-kit-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0} #app #gameScreen #sidePanel .inventory-kit-count{display:flex;align-items:center;gap:12px;min-width:0;color:var(--theme-text)} #app #gameScreen #sidePanel .inventory-kit-count>b{font-size:12px;white-space:nowrap;font-weight:650} #app #gameScreen #sidePanel .inventory-kit-slots{display:flex;gap:4px;align-items:center} #app #gameScreen #sidePanel .inventory-kit-slot{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--theme-border);border-radius:8px;background:var(--theme-soft)} #app #gameScreen #sidePanel .inventory-kit-slot img{width:23px;height:23px;object-fit:contain} #app #gameScreen #sidePanel .inventory-kit-slot.is-empty img{opacity:.4} #app #gameScreen #sidePanel .inventory-kit-slot.is-filled{background:color-mix(in srgb,var(--theme-accent) 8%,var(--theme-card));border-color:color-mix(in srgb,var(--theme-accent) 30%,var(--theme-border))} #app #gameScreen #sidePanel .inventory-clothing-summary{display:flex;align-items:center;gap:7px;margin:0;padding:6px 10px;min-height:44px;border:1px solid var(--theme-border);border-radius:10px;background:var(--theme-card);color:var(--theme-text);flex-shrink:0} #app #gameScreen #sidePanel .inventory-clothing-summary img{width:25px;height:25px} #app #gameScreen #sidePanel .inventory-clothing-summary>strong{font-size:12px;white-space:nowrap} #app #gameScreen #sidePanel .inventory-clothing-summary>strong::after{content:none} #app #gameScreen #sidePanel .inventory-clothing-summary>span{flex:none;font-size:19px;color:var(--theme-muted)} #app #gameScreen #sidePanel .inventory-clothing-tools{padding:0;gap:0} #app #gameScreen #sidePanel .inventory-clothing-tools nav{gap:5px;flex-wrap:wrap} #app #gameScreen #sidePanel .inventory-clothing-tools button{min-height:44px;padding:6px 10px;font-size:11px;border-radius:9px} #app #gameScreen #sidePanel .inventory-clothing-tools img{width:21px;height:21px} #app #gameScreen #sidePanel.is-trainer-clothing-panel.is-open:has(.is-outfit-v6){width:min(600px,calc(100% - 24px))!important;height:min(620px,calc(100dvh - 24px))!important;border-radius:18px!important} .is-outfit-v6 .clothing-header{padding:10px 14px;min-height:62px} .is-outfit-v6 .clothing-header h2{font-size:22px} .is-outfit-v6 .clothing-header small{font-size:9px;letter-spacing:.09em} .is-outfit-v6 .clothing-header>button{width:44px;height:44px;border-radius:12px} .is-outfit-v6:not(.is-detail) .clothing-scroll{padding:12px} .is-outfit-v6 .clothing-outfit{gap:10px;grid-template-rows:auto minmax(310px,1fr) auto auto} .is-outfit-v6 .clothing-intro>b{display:flex;align-items:center;gap:8px;font-size:13px} .is-outfit-v6 .clothing-intro small{font-size:11px;padding:4px 7px;border-radius:7px;background:var(--cl-soft);color:var(--cl-muted);white-space:nowrap} .is-outfit-v6 .clothing-climate{font-size:11px;padding:6px 9px} .clothing-hero-layout.is-kit-v6{display:grid;grid-template-columns:minmax(0,1fr) minmax(205px,1.08fr);grid-template-rows:minmax(0,1fr);gap:12px;padding:0;border:0;background:none!important;border-radius:0;overflow:visible} .is-kit-v6 .clothing-hero-stage{grid-column:1;grid-row:1;min-height:0;border:1px solid var(--cl-line);border-radius:14px;background:var(--cl-soft);position:relative;overflow:hidden} .is-kit-v6 .clothing-hero-canvas{width:260px!important;height:260px!important;top:46%;transform:translate(-50%,-50%)} .is-kit-v6 .clothing-hero-name{border:0;background:var(--cl-card);padding:8px 10px;margin:0 8px 8px;width:calc(100% - 16px);box-sizing:border-box;border-radius:9px;gap:3px} .is-kit-v6 .clothing-hero-name b{font-size:12px} .is-kit-v6 .clothing-hero-name small{font-size:9px;display:block} .is-kit-v6 .clothing-hero-equipment{display:grid;grid-template-rows:repeat(5,minmax(54px,1fr));gap:6px;min-width:0;min-height:0} .is-kit-v6 .clothing-hero-slot{display:flex;align-items:center;grid-area:auto;min-width:0;border:1px solid var(--cl-line);border-radius:11px;background:var(--cl-card)!important} .is-kit-v6 .clothing-hero-slot.is-filled{border-color:color-mix(in srgb,#70ac96 65%,var(--cl-line));background:color-mix(in srgb,#7ba98d 6%,var(--cl-card))!important} .is-kit-v6 .clothing-slot-choice{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:8px;text-align:left;padding:6px 9px;min-height:54px;flex:1;min-width:0} .is-kit-v6 .clothing-slot-choice .clothing-slot-art{width:42px;height:42px} .is-kit-v6 .clothing-slot-choice .clothing-slot-art img{width:40px;height:40px;filter:none} .is-kit-v6 .is-empty .clothing-slot-art img{width:30px;height:30px;opacity:.5} .is-kit-v6 .clothing-slot-copy{display:flex;flex-direction:column;gap:3px;min-width:0} .is-kit-v6 .clothing-slot-copy small{font-size:10px;color:var(--cl-muted)} .is-kit-v6 .clothing-slot-copy b{font-size:11px;font-weight:650;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .is-kit-v6 .clothing-slot-copy em{font-size:9px;line-height:1.2;font-style:normal;color:var(--cl-muted)} .is-kit-v6 .clothing-slot-arrow{font-size:20px;color:var(--cl-muted)} .is-kit-v6 .clothing-slot-info{display:grid;place-items:center;width:44px;height:44px;margin-right:4px;flex-shrink:0;border:0;background:var(--cl-soft);border-radius:8px;color:var(--cl-ink);font-size:17px} .is-outfit-v6 .clothing-outfit-attributes>header{display:none} .is-outfit-v6 .clothing-stats{margin:0;gap:7px} .is-outfit-v6 .clothing-meter{padding:8px 9px} .is-outfit-v6 .clothing-meter b{font-size:10px} .is-outfit-v6 .clothing-meter strong{font-size:11px} .is-outfit-v6 .clothing-meter>i{height:4px;margin-top:6px} .is-outfit-v6 .clothing-outfit-inventory{padding:7px 9px;background:var(--cl-card)} .is-outfit-v6 .clothing-outfit-inventory b{font-size:11px} .is-outfit-v6 .clothing-outfit-inventory small{font-size:10px} .is-outfit-v6 .clothing-outfit-inventory button{font-size:11px} .is-outfit-v6 .clothing-status{min-height:32px;font-size:10px;padding:7px 12px} .tc-clothing-scroll .is-kit-v6{grid-template-columns:minmax(0,1fr) minmax(165px,1fr);gap:8px} .tc-clothing-scroll .is-kit-v6 .clothing-slot-choice{grid-template-columns:32px minmax(0,1fr) auto;padding:5px;gap:5px} .tc-clothing-scroll .is-kit-v6 .clothing-slot-art,.tc-clothing-scroll .is-kit-v6 .clothing-slot-art img{width:30px;height:30px} @media(max-width:650px){ #app #gameScreen #sidePanel .inventory-clothing-context{padding:0 8px 8px;gap:7px} #app #gameScreen #sidePanel .inventory-kit-count{gap:6px;flex-wrap:wrap} #app #gameScreen #sidePanel .inventory-kit-slots{gap:3px} #app #gameScreen #sidePanel .inventory-kit-slot{width:24px;height:24px;border-radius:6px} #app #gameScreen #sidePanel .inventory-kit-slot img{width:19px;height:19px} #app #gameScreen #sidePanel .inventory-clothing-summary{padding:6px 8px;gap:5px} #app #gameScreen #sidePanel .inventory-clothing-summary img{width:22px;height:22px} #app #gameScreen #sidePanel .inventory-clothing-summary>strong{font-size:11px} #app #gameScreen #sidePanel.is-trainer-clothing-panel.is-open:has(.is-outfit-v6){width:min(420px,calc(100% - 16px))!important;height:min(680px,calc(100dvh - 16px))!important} .is-outfit-v6 .clothing-hero-layout.is-kit-v6{grid-template-columns:minmax(0,1fr) minmax(175px,1.25fr);gap:8px} .is-outfit-v6 .clothing-hero-canvas{width:210px!important;height:210px!important} .is-outfit-v6 .clothing-slot-choice{grid-template-columns:32px minmax(0,1fr) auto;gap:5px;padding:6px} .is-outfit-v6 .clothing-slot-choice .clothing-slot-art,.is-outfit-v6 .clothing-slot-choice .clothing-slot-art img{width:30px;height:30px} .is-outfit-v6 .clothing-hero-name small{font-size:8px} .is-outfit-v6 .clothing-intro>b{font-size:12px} .is-outfit-v6 .clothing-meter b{font-size:9px} .is-outfit-v6 .clothing-meter strong{font-size:10px} } @media(max-width:350px){ .is-outfit-v6 .clothing-hero-layout.is-kit-v6{grid-template-columns:minmax(0,1fr) minmax(170px,1.6fr)} .is-outfit-v6 .clothing-slot-copy b{font-size:10px} .is-outfit-v6 .clothing-slot-copy em{font-size:8px} .is-outfit-v6 .clothing-hero-canvas{width:170px!important;height:170px!important} .is-outfit-v6 .clothing-climate{font-size:9px;padding:5px} .is-outfit-v6 .clothing-intro>b{font-size:11px;gap:5px} } @media(max-height:640px){ .is-outfit-v6:not(.is-detail) .clothing-scroll{overflow-y:auto} .is-outfit-v6 .clothing-outfit{height:auto;grid-template-rows:auto 310px auto auto} .tc-sheet--clothing .tc-clothing-scroll{overflow-y:auto;grid-template-rows:auto 310px auto auto} } } @layer ui-theme{ .is-outfit-v6 .clothing-outfit{grid-template-rows:auto minmax(284px,1fr) auto auto;gap:8px} .is-kit-v6 .clothing-hero-equipment{grid-template-rows:repeat(5,minmax(52px,1fr))} .is-kit-v6 .clothing-slot-choice{min-height:52px} .is-kit-v6 .clothing-slot-choice .clothing-slot-art{width:40px;height:40px} .is-kit-v6 .clothing-slot-choice .clothing-slot-art img{width:38px;height:38px} .is-outfit-v6 .clothing-outfit-inventory{border:0;background:none;padding:0;min-height:44px} .is-outfit-v6 .clothing-outfit-inventory button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px} .is-outfit-v6 .clothing-outfit-inventory button small{color:var(--cl-muted);font-size:10px;font-weight:500} @media(max-height:640px){.is-outfit-v6 .clothing-outfit{height:auto;grid-template-rows:auto 284px auto auto}} } @layer ui-theme{.is-kit-v6 .clothing-hero-canvas{width:230px!important;height:230px!important;top:43%}.is-outfit-v6 .clothing-hero-canvas{width:230px!important;height:230px!important}@media(max-width:650px){.is-outfit-v6 .clothing-hero-canvas{width:195px!important;height:195px!important}}@media(max-width:350px){.is-outfit-v6 .clothing-hero-canvas{width:155px!important;height:155px!important}}} @layer ui-theme{ @media(max-width:650px),(max-height:640px) and (orientation:landscape){ #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-head-v54{display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px!important;padding:0 0 8px!important;flex:0 0 auto!important;min-height:0!important} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-title-v49{min-height:44px!important;padding-right:50px!important} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-wallet-v49{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px 44px!important;width:100%!important;gap:5px!important;margin:0!important} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-wallet-v49>span{width:auto!important;min-width:0!important;min-height:44px!important;padding:4px!important;gap:3px!important;grid-template-columns:18px minmax(0,1fr)!important} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-wallet-v49>span b{font-size:11px!important;white-space:nowrap} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-wallet-v49>span .item-icon,#app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-wallet-v49>span img{width:18px!important;height:18px!important} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-wallet-v49>button{width:44px!important;height:44px!important;min-height:44px!important;min-width:44px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:0!important} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-topup::after{content:'+';font-size:22px;font-weight:600} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-vip-shop img{width:24px!important;height:24px!important;margin:0!important} } @media(max-height:640px) and (min-width:651px){ #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-clothing-context{display:flex;align-items:center;gap:10px;padding:0 8px 6px} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-kit-summary{flex:1;gap:8px} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-kit-count{gap:7px} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-kit-slots{gap:2px} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-kit-slot{width:22px;height:22px} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-kit-slot img{width:18px;height:18px} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-clothing-tools{width:160px;flex-shrink:0} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-clothing-tools nav{display:none!important} #app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-clothing-tools>[data-clothing-inventory-select]{display:block!important;width:100%;min-height:44px;border:1px solid var(--theme-border);border-radius:9px;background:var(--theme-card);color:var(--theme-text);font-size:11px;padding:6px} } } @layer ui-theme{@media(max-height:640px) and (min-width:651px){#app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-catalog-head-v54{min-height:50px!important;padding:0 6px!important}#app #gameScreen #sidePanel .inventory-wardrobe-v6 .inventory-capacity-v53{height:44px!important;min-height:44px!important;padding:2px 5px!important}}} @layer ui-theme{.is-kit-v6 .clothing-hero-name b,.is-kit-v6 .clothing-hero-name small{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}} @layer ui-theme{.tc-clothing-scroll .is-kit-v6 .clothing-hero-canvas{width:min(230px,calc(100% + 56px))!important;height:auto!important;aspect-ratio:1}} /* pk-style-source:153 */ /* /home-sims-v1.css */ /* Side catalogue and room share the screen; stock stays below the scene. */ .pp-home.is-workshop{width:98dvw;max-width:1920px;height:96dvh;max-height:96dvh} .pp-home.is-workshop .workshop-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,24vw,380px);grid-template-rows:minmax(0,1fr) auto} .pp-home.is-workshop .workshop-stage{grid-column:1;grid-row:1;min-height:0;padding:8px 8px 0} .pp-home.is-workshop .workshop-browser{position:static;grid-column:2;grid-row:1/3;inset:auto;width:auto;height:auto;max-height:none;margin:0;border:0;border-left:1px solid var(--ui-line);border-radius:0;box-shadow:none;min-width:0} .pp-home.is-workshop .workshop-browser>header{padding:10px 12px}.pp-home.is-workshop .workshop-browser h3{font-size:18px}.pp-home.is-workshop .workshop-browser>header p{font-size:11px;line-height:1.4}.pp-home.is-workshop [data-home-catalog-close]{display:none} .pp-home.is-workshop .workshop-categories{padding:8px 10px;flex-wrap:wrap;gap:5px} .pp-home.is-workshop .workshop-categories button{flex:1 0 28%;min-height:44px;padding:6px;font-size:11px;justify-content:center} .pp-home.is-workshop .workshop-search{margin:0 12px 8px} .pp-home.is-workshop .workshop-panel-content{padding:0 12px 12px;scrollbar-gutter:stable} .pp-home.is-workshop .workshop-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .pp-home.is-workshop .workshop-catalog article{padding:8px;gap:6px} .pp-home.is-workshop .workshop-catalog-art{height:100px} .pp-home.is-workshop .workshop-catalog p{font-size:11px;line-height:1.4} .pp-home.is-workshop .workshop-style .home-scene-options{grid-template-columns:1fr} .pp-home.is-workshop .workshop-dock{grid-column:1;grid-row:2;min-height:104px;max-height:120px;overflow:hidden;background:var(--ui-card)} .pp-home.is-workshop .workshop-catalog-launch{display:none} .pp-home.is-workshop .workshop-owned{width:100%;min-width:0} .pp-home.is-workshop .workshop-owned>button{flex-basis:132px;min-height:92px;cursor:grab} .pp-home.is-workshop .workshop-scene-toolbar{height:auto;min-height:48px;flex-wrap:wrap;padding:0 4px;} .pp-home.is-workshop .workshop-scene-toolbar button{min-height:44px} .pp-home.is-workshop .workshop-room-zoom{display:flex;gap:3px;border:1px solid #456073;border-radius:24px;padding:3px;background:#172630} .pp-home.is-workshop .workshop-room-zoom button{border:0;border-radius:50%;min-width:44px;min-height:44px;color:#eaf5f7;background:transparent;padding:4px} .pp-home.is-workshop .workshop-room-zoom button:nth-child(2){border-radius:12px;min-width:56px;font-variant-numeric:tabular-nums} .pp-home.is-workshop .workshop-scene-toolbar label{gap:6px} .pp-home.is-workshop .home-furniture.is-selected{outline:0;box-shadow:none} .pp-home.is-workshop .home-furniture.is-selected .home-paint{filter:drop-shadow(0 0 2px #ffc86d) drop-shadow(0 0 5px #ffcd6260)} .pp-home.is-workshop .home-ghost{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important} .pp-home.is-workshop .home-ghost .home-paint{filter:drop-shadow(0 0 2px #7cdec0) drop-shadow(0 0 4px #7cdec070)} .pp-home.is-workshop .home-ghost.is-invalid .home-paint{filter:drop-shadow(0 0 2px #ff726c) drop-shadow(0 0 4px #ff726c90)} .pp-home.is-workshop .home-furniture:focus-visible .home-paint{filter:drop-shadow(0 0 3px #ffc86d)} @layer ui-theme { html[data-game-theme] .pp-home.is-workshop :is(.home-furniture,.home-ghost){background:transparent!important;border:0!important;box-shadow:none!important} html[data-game-theme] .pp-home.is-workshop button.home-ghost:not(.home-furniture):not(.home-plot):not(.home-primary){background:transparent!important;border:0!important;box-shadow:none!important} html[data-game-theme] .pp-home.is-workshop .home-furniture.is-selected{outline:0!important} } @media(max-width:760px),(pointer:coarse) and (max-height:560px){ .pp-home.is-workshop{width:100dvw;height:100dvh;max-height:100dvh} .pp-home.is-workshop .workshop-layout{display:flex;flex-direction:column} .pp-home.is-workshop .workshop-stage{flex:1;min-height:0;padding:4px} .pp-home.is-workshop .workshop-dock{min-height:96px;max-height:96px} .pp-home.is-workshop .workshop-catalog-launch{display:flex;width:70px;min-height:80px} .pp-home.is-workshop .workshop-browser{position:absolute;inset:auto 0 0;max-height:66%;width:100%;border:1px solid var(--ui-line);border-radius:18px 18px 0 0;box-shadow:0 -8px 30px #0005} .pp-home.is-workshop .workshop-browser[data-catalog-open=false]{display:none} .pp-home.is-workshop [data-home-catalog-close]{display:grid} .pp-home.is-workshop .workshop-categories{flex-wrap:nowrap;overflow-x:auto} .pp-home.is-workshop .workshop-categories button{flex:0 0 auto;padding:6px 10px} .pp-home.is-workshop .workshop-style .home-scene-options{grid-template-columns:repeat(2,minmax(0,1fr))} .pp-home.is-workshop .workshop-owned>button{min-height:82px;flex-basis:110px} .pp-home.is-workshop .workshop-scene-toolbar{min-height:50px;gap:4px;font-size:10px;flex-wrap:nowrap} .pp-home.is-workshop .workshop-scene-toolbar>button{display:none} .pp-home.is-workshop .workshop-room-zoom button{min-width:44px;min-height:44px} .pp-home.is-workshop .workshop-room-zoom button:nth-child(2){min-width:48px} } @media(min-width:761px) and (max-height:560px) and (pointer:fine){ .pp-home.is-workshop .workshop-dock{min-height:72px;max-height:72px} .pp-home.is-workshop .workshop-owned>button{min-height:62px} .pp-home.is-workshop .workshop-owned-art{height:28px} } .pp-home.is-workshop .workshop-owned-group{flex:0 0 142px;display:flex;flex-direction:column;gap:2px;min-width:0;overflow:auto} .pp-home.is-workshop .workshop-owned-group>button{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:88px;padding:4px;gap:2px;cursor:grab;font-size:11px;flex-shrink:0} .pp-home.is-workshop .workshop-owned-group>button[data-h-action]{cursor:pointer;min-height:44px} .pp-home.is-workshop .workshop-owned-group small{font-size:10px}.pp-home.is-workshop .workshop-owned-group select{min-height:44px;max-width:100%;font-size:11px;padding:4px} .pp-home.is-workshop .home-partition-paint{position:absolute;inset:0;pointer-events:none;display:block}.home-partition-paint img{width:100%;height:100%;object-fit:fill} .pp-home.is-workshop .is-garden .workshop-stage{display:flex;flex-direction:column}.pp-home.is-workshop .is-garden .workshop-scene-frame{flex:1;min-height:0;background:#05070b} .pp-home.is-workshop .garden-scene-viewport{width:100%;height:100%;display:grid;place-items:center}.pp-home.is-workshop .garden-scene-viewport .home-garden{width:100%;max-height:100%;margin:auto} .pp-home.is-workshop .home-garden-summary{padding:4px;margin:0}.pp-home.is-workshop .home-garden-summary nav{display:flex;gap:4px;overflow:auto}.pp-home.is-workshop .home-garden-summary button{min-height:44px;font-size:11px;white-space:nowrap;padding:4px 8px} .pp-home.is-workshop .home-garden-summary p{font-size:11px;margin:3px} .pp-home.is-workshop .garden-seed-stock{display:flex;gap:6px;overflow:auto;min-width:0;width:100%}.pp-home.is-workshop .garden-seed-stock>button{flex:0 0 120px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:82px;padding:4px;font-size:11px}.garden-seed-stock img{width:32px;height:32px;object-fit:contain} .pp-home.is-workshop .garden-door{position:absolute;transform:translate(-50%,-50%);min-height:44px;padding:4px 12px;font-size:11px}.pp-home.is-workshop .garden-pump{position:absolute;transform:translate(-50%,-50%);display:flex;gap:4px;align-items:center;min-height:44px;font-size:11px}.garden-pump img{width:24px;height:24px} .pp-home.is-workshop .garden-care{display:flex;flex-direction:column;gap:8px}.garden-care p{font-size:12px;line-height:1.5}.garden-care .garden-selected-art{height:90px;object-fit:contain}.garden-care summary{min-height:44px;padding:10px}.garden-care details>button{width:100%;margin:3px 0} .is-garden .workshop-catalog>article>img{width:100%;height:90px;object-fit:contain}.is-garden .workshop-panel-content label{display:flex;flex-direction:column;gap:5px} .pp-home.is-workshop .home-plot{width:5.5%;min-width:44px;height:12%;min-height:44px;background:transparent;border:0;box-shadow:none}.pp-home.is-workshop .home-plot img{width:100%;height:100%;object-fit:contain}.pp-home.is-workshop .home-plot small{font-size:10px;white-space:nowrap}.pp-home.is-workshop .home-plot-number{font-size:10px} @media(max-width:760px),(pointer:coarse) and (max-height:560px){.pp-home.is-workshop .workshop-owned-group{flex-basis:120px}.pp-home.is-workshop .garden-scene-viewport{width:175%;max-width:none;height:auto;min-height:100%;display:flex}.pp-home.is-workshop .garden-scene-viewport .home-garden{max-height:none;flex:none}.pp-home.is-workshop .is-garden .workshop-scene-frame{overflow:auto;touch-action:pan-x pan-y}.pp-home.is-workshop .garden-seed-stock>button{flex-basis:105px}.pp-home.is-workshop .workshop-owned-group>button{min-height:80px}} .pp-home.is-workshop .home-floor{isolation:isolate}.pp-home.is-workshop .workshop-context{z-index:2000}.pp-home.is-workshop .workshop-owned-group{overflow:hidden}.pp-home.is-workshop .workshop-owned-group>button{height:100%;width:100%}.pp-home.is-workshop .workshop-context>select{max-width:100%;min-height:44px;margin:4px 0} .pp-home.is-workshop .workshop-browser{transform:none} /* The former centred popup used important theme rules. Replace those only for this editor. */ @layer ui-theme { html[data-game-theme] .pp-home.is-workshop .workshop-layout>.workshop-browser { position:static!important;inset:auto!important;left:auto!important;top:auto!important;transform:none!important; width:auto!important;height:auto!important;max-height:none!important;margin:0!important; } html[data-game-theme] .pp-home.is-workshop .workshop-layout>.workshop-browser .workshop-panel-content { flex:1 1 auto!important;max-height:none!important;min-height:0!important;overflow:auto!important; } html[data-game-theme] .pp-home.is-workshop .workshop-style .home-scene-options {grid-template-columns:1fr!important} @media(max-width:760px),(pointer:coarse) and (max-height:560px) { html[data-game-theme] .pp-home.is-workshop .workshop-layout>.workshop-browser { position:absolute!important;inset:auto 0 0!important;width:100%!important;height:66%!important;max-height:66%!important; } html[data-game-theme] .pp-home.is-workshop .workshop-style .home-scene-options {grid-template-columns:repeat(2,minmax(0,1fr))!important} } } .pp-home.is-workshop .garden-scene-viewport{container-type:size} .pp-home.is-workshop .garden-scene-viewport .home-garden{width:min(100cqw,calc(100cqh * 16 / 9));height:auto;max-height:none;min-width:0;aspect-ratio:16/9} @media(max-width:760px),(pointer:coarse) and (max-height:560px){ .pp-home.is-workshop .garden-scene-viewport{container-type:normal} .pp-home.is-workshop .garden-scene-viewport .home-garden{width:100%;height:auto;max-height:none;min-width:0} } @media(max-width:760px),(pointer:coarse) and (max-height:560px){ .pp-home.is-workshop .is-garden .workshop-scene-frame{display:block} .pp-home.is-workshop .garden-scene-viewport{width:175%;min-width:175%;max-width:none;flex-shrink:0;height:auto;min-height:100%;display:grid;align-items:center;justify-items:start} .pp-home.is-workshop .garden-scene-viewport .home-garden{width:100%;max-width:none;height:auto;aspect-ratio:16/9;margin:0} } .pp-home.is-workshop .garden-scene-viewport .home-garden{position:relative;inset:auto} /* Keep the room size fixed while the furniture controls change. */ .pp-home.is-workshop .workshop-room-viewport{ width:max(100%,calc(var(--room-base-width,100cqw) * var(--room-zoom))); height:max(100%,calc(var(--room-base-width,100cqw) * 9 / 16 * var(--room-zoom))); } .pp-home.is-workshop .workshop-scene-frame .home-room{width:calc(var(--room-base-width,100cqw) * var(--room-zoom))} .pp-home.is-workshop .workshop-stage,.pp-home.is-workshop .workshop-scene-frame{ background:color-mix(in srgb,var(--ui-paper,#e5eef2) 72%,#38566b)!important; } .pp-home.is-workshop .home-room{ background:repeating-linear-gradient(0deg,#62402e 0 22px,#735039 23px 25px,#62402e 26px 47px); } .pp-home.is-workshop .workshop-drag-help{display:none} .pp-home.is-workshop .workshop-scene-toolbar{padding:4px 8px;gap:8px;min-height:52px} .pp-home.is-workshop .workshop-owned{scrollbar-width:thin} .pp-home.is-workshop .workshop-owned-group{flex-basis:128px} .pp-home.is-workshop .workshop-owned-group>button{border-radius:12px} .pp-home.is-workshop .workshop-context{max-height:min(62dvh,420px);overflow:auto} .pp-home.is-workshop .workshop-more>summary{display:grid;place-items:center;min-width:54px;min-height:54px;padding:7px;border:1px solid var(--ui-line);border-radius:12px;list-style:none;background:var(--ui-paper);font-size:10px;cursor:pointer} .pp-home.is-workshop .workshop-more[open]{flex-basis:100%} .pp-home.is-workshop .workshop-more>div{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:7px 0 0} .pp-home.is-workshop .workshop-more>div>button{min-height:44px;padding:6px 9px;font-size:11px} .pp-home.is-workshop .workshop-more .workshop-fine>summary{min-height:44px;padding:6px 9px;font-size:11px} @media(max-width:760px),(pointer:coarse) and (max-height:560px){ .pp-home.is-workshop .workshop-scene-frame{--room-zoom:1.25} .pp-home.is-workshop .workshop-more>summary{min-width:44px;min-height:50px;padding:5px;font-size:9px} } @layer ui-theme { html[data-game-theme] .pp-home.is-workshop .workshop-stage, html[data-game-theme] .pp-home.is-workshop .workshop-scene-frame{ background:color-mix(in srgb,var(--ui-paper,#e5eef2) 72%,#38566b)!important; } } @layer ui-theme { @media(min-width:761px) and (min-height:561px){ html[data-game-theme] #gameScreen[data-world-hud="v2340"] #homeWorkshopTools.home-world-tools{ position:absolute!important;left:auto!important;right:464px!important;bottom:20px!important;z-index:97!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch{ display:flex!important;flex-direction:column!important;justify-content:center!important;gap:2px!important; width:68px!important;height:74px!important;padding:5px!important;border-radius:17px!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch svg{width:27px!important;height:27px!important} html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch img{display:block;width:44px!important;height:44px!important;object-fit:contain} html[data-game-theme] #gameScreen #homeWorkshopTools .home-launch-copy{display:none!important} } @media(max-width:760px),(pointer:coarse) and (max-height:560px){ html[data-game-theme] #gameScreen[data-world-hud="v2340"] #homeWorkshopTools.home-world-tools{ position:absolute!important;left:auto!important;right:66px!important;bottom:calc(80px + env(safe-area-inset-bottom))!important;z-index:97!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch{ width:46px!important;height:46px!important;min-height:46px!important;padding:8px!important;border-radius:14px!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch svg{width:26px!important;height:26px!important} html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch img{display:block;width:38px!important;height:38px!important;object-fit:contain} html[data-game-theme] #gameScreen #homeWorkshopTools .home-launch-copy{display:none!important} } } @layer hud-v2680 { @media(min-width:761px) and (min-height:561px){ #app[data-screen="game"] #toast{ left:50%!important;right:auto!important;top:86px!important;bottom:auto!important; width:max-content!important;max-width:min(380px,calc(100vw - 540px))!important; transform:translateX(-50%) translateY(-8px)!important; } #app[data-screen="game"] #toast.is-open{transform:translateX(-50%) translateY(0)!important} } @media(max-width:760px),(pointer:coarse) and (max-height:560px){ #app[data-screen="game"] #toast{ top:auto!important;left:10px!important;right:auto!important; bottom:calc(142px + env(safe-area-inset-bottom))!important; width:max-content!important;max-width:min(280px,calc(100vw - 104px))!important; transform:translateY(8px)!important;padding:9px 12px!important;font-size:11px!important; } #app[data-screen="game"] #toast.is-open{transform:translateY(0)!important} } } /* pk-style-source:154 */ /* /home-editor-v1.css */ /* The room owns a stable frame. Drawers and furniture actions overlay it. */ .pp-home.is-workshop.is-home-editor{width:min(1160px,96dvw);max-width:1160px;height:fit-content!important;min-height:0!important;border-radius:22px;display:none;flex-direction:column;} .pp-home.is-workshop.is-home-editor[open]{display:flex} .pp-home.is-home-editor .workshop-header{min-height:62px;padding:8px 16px;gap:10px;flex-shrink:0} .pp-home.is-home-editor .workshop-header small{font-size:9px;letter-spacing:.13em;color:var(--ui-muted)} .pp-home.is-home-editor .workshop-header h2{font-size:20px;line-height:1.2} .pp-home.is-home-editor .workshop-header button{height:44px;} .pp-home.is-home-editor .workshop-wallet{margin-left:auto} .pp-home.is-home-editor .workshop-layout{flex:none;height:min(620px,calc(94dvh - 204px),calc(96dvw * .5625));min-height:130px;background:#080d13} .pp-home.is-home-editor .workshop-stage{min-height:0;background:#080d13!important;container-type:size} .pp-home.is-home-editor .workshop-scene-frame{display:block;overscroll-behavior:contain;scroll-behavior:auto;container-type:size;background:#080d13!important} .pp-home.is-home-editor .workshop-scene-frame .home-room{width:calc(var(--room-base-width,min(100cqw,100cqh * 16 / 9)) * var(--room-zoom,1));min-height:0;flex:none;} .pp-home.is-home-editor .home-floor{touch-action:pan-x pan-y} .pp-home.is-home-editor :is(.home-furniture,.home-ghost,.home-furniture .home-paint,.home-ghost .home-paint){touch-action:none;user-select:none;-webkit-user-select:none} .pp-home.is-home-editor :is(.home-furniture,.home-ghost){min-width:0;min-height:0;padding:0} .pp-home.is-home-editor.is-dragging .workshop-scene-frame{touch-action:none;overflow:hidden} .pp-home.is-home-editor .workshop-scene-toolbar{min-height:44px;height:auto;padding:3px 12px;gap:9px;flex-wrap:nowrap;flex:none;background:var(--ui-card);color:var(--ui-muted)} .pp-home.is-home-editor .workshop-scene-toolbar>button{display:inline-flex;align-items:center;min-height:38px;padding:5px 8px;} .pp-home.is-home-editor .workshop-room-zoom{padding:0;border:0;background:none;gap:1px} .pp-home.is-home-editor .workshop-room-zoom button{border-radius:10px;color:var(--ui-ink);background:var(--ui-tint)} .pp-home.is-home-editor .workshop-room-zoom button:nth-child(2){min-width:50px} .pp-home.is-home-editor .workshop-dock{min-height:64px;max-height:none;height:auto;flex:none;padding:5px 12px;} .pp-home.is-home-editor .workshop-dock>button{flex-direction:column;gap:4px;flex:0 1 110px;min-height:54px;font-size:11px;padding:4px 10px;border:1px solid transparent;border-radius:13px} .pp-home.is-home-editor .workshop-dock svg{width:25px;height:25px} .pp-home.is-home-editor .editor-warehouse-icon{width:34px;height:29px;object-fit:contain} .pp-home.is-home-editor .workshop-dock>button[aria-pressed=true]{border-color:var(--ui-line);} .pp-home.is-home-editor .workshop-footer{min-height:26px;padding:4px 14px;flex-shrink:0;border-top:0} .pp-home.is-home-editor .workshop-footer p{line-height:1.5} .pp-home.is-home-editor .workshop-browser{display:flex;flex-direction:column;position:absolute;inset:10px 10px 10px auto;width:340px;max-width:calc(100% - 20px);height:auto;max-height:none;z-index:30;border:1px solid var(--ui-line);border-radius:18px;overflow:hidden;background:var(--ui-card);box-shadow:0 8px 28px #0007} .pp-home.is-home-editor .workshop-browser[data-catalog-open=false]{display:none!important} .pp-home.is-home-editor .workshop-browser>header{justify-content:space-between;padding:8px 12px;min-height:50px} .pp-home.is-home-editor .workshop-browser h3{font-size:17px;} .pp-home.is-home-editor [data-home-catalog-close]{display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px} .pp-home.is-home-editor .workshop-categories{gap:4px;padding:2px 10px 8px;} .pp-home.is-home-editor .workshop-categories button{min-height:38px;font-size:11px} .pp-home.is-home-editor .workshop-search{margin:0 12px 8px} .pp-home.is-home-editor .workshop-search input{min-height:42px;} .pp-home.is-home-editor .workshop-panel-content{flex:1;overflow:auto;padding:0 12px 12px;} .pp-home.is-home-editor .workshop-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .pp-home.is-home-editor .workshop-catalog article{display:flex;flex-direction:column;padding:8px;gap:6px;min-width:0;border-radius:13px;background:var(--ui-bg)} .pp-home.is-home-editor .workshop-catalog-art{height:76px;overflow:hidden;flex:none} .pp-home.is-home-editor .workshop-catalog small{font-size:10px;line-height:1.4;color:var(--ui-muted)} .pp-home.is-home-editor .workshop-catalog article>button{min-height:44px;padding:5px;margin-top:auto;white-space:normal} .pp-home.is-home-editor .workshop-catalog article>details{color:var(--ui-muted)} .pp-home.is-home-editor .home-recipe-cost{display:flex;flex-direction:column;gap:3px} .pp-home.is-home-editor .home-recipe-cost>span{border:0;padding:0;background:none;font-size:10px} .pp-home.is-home-editor .home-recipe-cost img{width:22px;height:22px} .pp-home.is-home-editor .editor-pane-hint{color:var(--ui-muted);margin:0 0 10px} .pp-home.is-home-editor .editor-room-filters{gap:5px;margin:0 0 10px} .pp-home.is-home-editor .editor-room-filters button{min-height:44px;padding:5px;font-size:11px} .pp-home.is-home-editor .editor-room-preview{padding:8px;border:1px solid var(--ui-line);border-radius:13px;margin-bottom:12px;background:var(--ui-bg)} .pp-home.is-home-editor .editor-room-preview>img{border-radius:8px;background:#080d13} .pp-home.is-home-editor .editor-room-preview h4{margin:8px 0 4px;font-size:14px} .pp-home.is-home-editor .editor-room-preview p{line-height:1.45;color:var(--ui-muted);margin:0 0 7px} .pp-home.is-home-editor .editor-room-preview>button{display:block;width:100%;margin-top:8px} .pp-home.is-home-editor .editor-room-list{grid-template-columns:1fr 1fr;gap:7px} .pp-home.is-home-editor .editor-room-list>button{display:flex;flex-direction:column;align-items:stretch;gap:5px;min-height:90px;padding:6px;text-align:left;border-radius:11px} .pp-home.is-home-editor .editor-room-list img{object-fit:contain;background:#080d13} .pp-home.is-home-editor .editor-room-list b{font-size:11px;line-height:1.25} .pp-home.is-home-editor .editor-room-list small{font-size:10px;color:var(--ui-muted)} .pp-home.is-home-editor .editor-music{text-align:center} .pp-home.is-home-editor .editor-music-art svg{width:48px;height:48px;color:var(--ui-accent)} .pp-home.is-home-editor .editor-music h4{margin:10px 0} .pp-home.is-home-editor .editor-music p{font-size:12px;line-height:1.4} .pp-home.is-home-editor .editor-music label{display:flex;flex-direction:column;gap:8px;text-align:left;margin:18px 0;font-size:12px} .pp-home.is-home-editor .editor-music small{line-height:1.6;color:var(--ui-muted)} .pp-home.is-home-editor .workshop-context{position:absolute;z-index:20;width:180px;max-width:calc(100% - 12px);padding:0;border:0;border-radius:0;background:transparent;color:#fff;box-shadow:none;max-height:none;overflow:visible;pointer-events:none} .pp-home.is-home-editor .editor-orbit{position:relative;width:180px;height:168px;pointer-events:none} .pp-home.is-home-editor .editor-orbit button{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;min-width:48px;min-height:48px;width:48px;height:48px;padding:5px;border-radius:50%;font-size:8px;line-height:1;border:1px solid #c3d6df88;box-shadow:0 2px 12px #0006;pointer-events:auto;background:var(--ui-card);color:var(--ui-ink)} .pp-home.is-home-editor .editor-orbit-action svg{width:21px;height:21px} .pp-home.is-home-editor .orbit-move{left:66px;top:0}.pp-home.is-home-editor .orbit-turn{left:126px;top:57px}.pp-home.is-home-editor .orbit-flip{left:66px;top:114px}.pp-home.is-home-editor .orbit-size{left:6px;top:57px} .pp-home.is-home-editor .editor-orbit .editor-orbit-center{left:61px;top:52px;width:58px;height:58px;padding:5px;background:var(--ui-bg)} .pp-home.is-home-editor .editor-orbit-center .home-thumbnail{width:42px;height:42px} .pp-home.is-home-editor .editor-orbit-center>svg{position:absolute;width:20px;height:12px;bottom:2px;background:var(--ui-card);border-radius:8px} .pp-home.is-home-editor .editor-orbit .editor-orbit-close{left:136px;top:0;width:44px;height:44px;min-width:44px;min-height:44px;background:#152630d9;color:#eefaff;border-color:#668b9b66} .pp-home.is-home-editor .editor-item-name{display:block;margin:2px -12px 0;font-size:11px;line-height:1.35;text-align:center;white-space:normal;text-shadow:0 1px 4px #000,0 0 6px #000} .pp-home.is-home-editor .workshop-context-draft{justify-content:center;gap:4px;margin-top:6px;pointer-events:auto} .pp-home.is-home-editor .workshop-context-draft span{display:none} .pp-home.is-home-editor .workshop-context-draft button{min-height:44px;padding:6px;font-size:10px;background:var(--ui-card);color:var(--ui-ink);box-shadow:0 2px 10px #0004} .pp-home.is-home-editor .editor-popover{position:absolute;inset:0 auto auto -25px;width:230px;max-height:min(340px,calc(94dvh - 210px));padding:12px;display:flex;flex-direction:column;gap:8px;pointer-events:auto;overflow:auto;background:var(--ui-card);color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:16px;box-shadow:0 8px 24px #0007} .pp-home.is-home-editor .workshop-context:has(.editor-popover:not([hidden])){width:230px} .pp-home.is-home-editor .workshop-context:has(.editor-popover:not([hidden])) :is(.editor-orbit,.editor-item-name,.workshop-context-draft){display:none} .pp-home.is-home-editor .workshop-context .editor-popover:not([hidden]){position:relative;inset:auto;width:100%;max-height:min(340px,calc(var(--editor-frame-height,352px) - 12px))} .pp-home.is-home-editor .editor-popover button{min-height:44px;padding:6px;font-size:11px} .pp-home.is-home-editor .editor-popover p{font-size:11px;margin:0;color:var(--ui-muted)} .pp-home.is-home-editor .editor-sizing>div{gap:5px} .pp-home.is-home-editor .editor-sizing>div button{min-width:44px;font-size:20px} .pp-home.is-home-editor .editor-fine{gap:5px;}.pp-home.is-home-editor .editor-fine>div{gap:3px}.pp-home.is-home-editor .editor-fine button{min-width:0} .pp-home.is-home-editor .home-confirmation{position:absolute;inset:auto 12px 12px;z-index:50;padding:14px;border-radius:16px;box-shadow:0 8px 35px #0009;max-height:calc(100% - 30px);overflow:auto;background:var(--ui-card);color:var(--ui-ink)} .pp-home.is-home-editor .home-confirmation p{font-size:13px;line-height:1.5} @layer ui-theme{ html[data-game-theme] .pp-home.is-home-editor .workshop-context{background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important} html[data-game-theme] .pp-home.is-home-editor .editor-orbit button{background:var(--ui-card)!important;color:var(--ui-ink)!important} html[data-game-theme] .pp-home.is-home-editor .editor-orbit .editor-orbit-close{background:#152630d9!important;color:#eefaff!important} html[data-game-theme] .pp-home.is-home-editor .workshop-dock>button[aria-pressed=true]{background:var(--ui-tint)!important;color:var(--ui-accent)!important} } @media(max-width:760px){ .pp-home.is-workshop.is-home-editor{width:100dvw;height:fit-content;max-height:100dvh;max-width:none;border-radius:18px;margin:auto 0} .pp-home.is-home-editor .workshop-header{min-height:58px;padding:7px 10px;gap:5px}.pp-home.is-home-editor .workshop-header h2{font-size:18px}.pp-home.is-home-editor .workshop-header small{font-size:8px} .pp-home.is-home-editor .workshop-layout{height:min(calc(100dvw * .5625),calc(100dvh - 204px));min-height:180px} .pp-home.is-home-editor .workshop-scene-toolbar{padding:3px 7px;gap:4px;font-size:10px}.pp-home.is-home-editor .workshop-scene-toolbar>button{max-width:100px;font-size:9px;padding:4px} .pp-home.is-home-editor .workshop-room-zoom button{min-width:36px;min-height:44px}.pp-home.is-home-editor .workshop-room-zoom button:nth-child(2){min-width:44px} .pp-home.is-home-editor .workshop-dock{gap:1px;padding:4px 6px;min-height:62px}.pp-home.is-home-editor .workshop-dock>button{flex:1;padding:4px 2px;font-size:9px;min-width:0} .pp-home.is-home-editor .workshop-browser{inset:6px;max-width:none;width:auto;border-radius:15px} .pp-home.is-home-editor .workshop-footer{min-height:26px;padding:4px 10px} .pp-home.is-home-editor .editor-item-name{font-size:10px} } @container (max-height:260px){ .pp-home.is-home-editor .workshop-context{width:290px} .pp-home.is-home-editor .editor-orbit{width:290px;height:48px;display:flex;gap:4px} .pp-home.is-home-editor .editor-orbit button{position:static;flex:none;width:44px;height:44px;min-width:44px;min-height:44px} .pp-home.is-home-editor .editor-orbit .editor-orbit-center{display:flex;width:44px;height:44px;min-width:44px;min-height:44px} .pp-home.is-home-editor .editor-orbit-center .home-thumbnail{width:32px;height:32px} .pp-home.is-home-editor .editor-item-name{margin:2px 0 0} .pp-home.is-home-editor .editor-popover{left:0;width:230px} } @media(max-height:520px){ .pp-home.is-workshop.is-home-editor{max-height:100dvh;border-radius:12px} .pp-home.is-home-editor .workshop-header{min-height:48px;height:48px;padding:2px 10px}.pp-home.is-home-editor .workshop-header small{display:none} .pp-home.is-home-editor .workshop-layout{height:calc(100dvh - 164px);min-height:120px} .pp-home.is-home-editor .workshop-dock{min-height:48px;height:48px;padding:2px 10px}.pp-home.is-home-editor .workshop-dock>button{flex-direction:row;min-height:44px;font-size:10px} .pp-home.is-home-editor .workshop-footer{min-height:18px;padding:2px 10px}.pp-home.is-home-editor .workshop-footer p{font-size:9px} .pp-home.is-home-editor .editor-popover{max-height:calc(100dvh - 178px)} } /* pk-style-source:155 */ /* /home-editor-polish.css */ /* Room first: drawers and selection never change the scene projection. */ .pp-home.is-home-editor>:is(.workshop-browser,.workshop-context,.workshop-scene-toolbar){grid-area:auto;grid-column:auto;grid-row:auto} .pp-home.is-home-editor [data-home-catalog-close]{display:flex;align-items:center;justify-content:center} .pp-home.is-workshop.is-home-editor{width:min(1180px,96dvw);max-width:1180px;height:min(94dvh,calc(min(1180px,96dvw) * .5625 + 138px))!important;max-height:94dvh;grid-template-columns:minmax(0,1fr);grid-template-rows:52px minmax(0,1fr) 56px 30px;grid-template-areas:"header" "scene" "dock" "footer";gap:0;overflow:hidden;border-radius:16px;padding:0} .pp-home.is-workshop.is-home-editor[open]{display:grid} .pp-home.is-home-editor .workshop-header{grid-area:header;min-height:0;height:52px;padding:4px 12px;gap:8px;border-bottom:1px solid var(--ui-line)} .pp-home.is-home-editor .workshop-header h2{font-size:17px;margin:0}.pp-home.is-home-editor .workshop-header>div:first-child{flex:1} .pp-home.is-home-editor .workshop-header button{border:0;background:transparent;min-width:44px;min-height:44px;padding:9px}.pp-home.is-home-editor .workshop-wallet{font-size:12px} .pp-home.is-home-editor .workshop-layout{grid-area:scene;display:block;position:relative;height:100%;min-height:0;overflow:hidden} .pp-home.is-home-editor .workshop-stage{padding:0;height:100%;max-height:none;display:block;overflow:hidden} .pp-home.is-home-editor .workshop-scene-frame{height:100%;width:100%;border-radius:0;box-shadow:none;overflow:auto;scrollbar-width:thin;overflow-anchor:none;touch-action:pan-x pan-y} .pp-home.is-home-editor .workshop-room-viewport{background:#080d13;display:grid;place-items:center;width:max(100%,calc(var(--room-base-width,100cqw) * var(--room-zoom,1)));height:max(100%,calc(var(--room-base-width,100cqw) * .5625 * var(--room-zoom,1)))} .pp-home.is-home-editor .workshop-scene-frame .home-room{position:relative;inset:auto;margin:0;width:calc(var(--room-base-width,100cqw) * var(--room-zoom,1));height:auto;aspect-ratio:16/9;box-shadow:none;border-radius:0;max-width:none;container-type:inline-size} .pp-home.is-home-editor .home-floor{cursor:grab}.pp-home.is-home-editor.is-panning .home-floor{cursor:grabbing} .pp-home.is-home-editor.is-panning .workshop-context{visibility:hidden} .pp-home.is-home-editor .home-furniture.is-selected .home-paint{filter:drop-shadow(0 0 3px #6fddc9) drop-shadow(0 0 1px #fff)} .pp-home.is-home-editor .editor-scene-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);margin:0;padding:7px 12px;border-radius:7px;background:#0e1b24bd;color:#e2edef;font-size:11px;line-height:1.3;white-space:nowrap;pointer-events:none} .pp-home.is-home-editor.has-selection .editor-scene-hint,.pp-home.is-home-editor.is-browser-open .editor-scene-hint{display:none} .pp-home.is-home-editor .workshop-scene-toolbar{position:absolute;z-index:5;top:62px;left:12px;right:12px;min-height:40px;height:40px;display:flex;align-items:center;gap:5px;padding:0;border:0;background:transparent;font-size:11px;color:#e4edf0;pointer-events:none} .pp-home.is-home-editor .workshop-scene-toolbar>*{pointer-events:auto;background:#10202de8;border:1px solid #91abb342;border-radius:8px;color:#edf5f8} .pp-home.is-home-editor [data-home-placed-count]{padding:9px;white-space:nowrap}.pp-home.is-home-editor .workshop-scene-toolbar>button{min-height:40px;font-size:10px;padding:7px} .pp-home.is-home-editor .workshop-room-zoom{margin-left:auto;display:flex;align-items:center;gap:0;overflow:hidden;border-radius:8px} .pp-home.is-home-editor .workshop-room-zoom button{min-width:40px;min-height:40px;border:0;background:transparent;color:inherit;border-radius:0;font-size:12px;padding:4px} .pp-home.is-home-editor .workshop-room-zoom button:nth-child(2){min-width:54px;font-size:11px;border-inline:1px solid #91abb32b} .pp-home.is-home-editor .workshop-scene-toolbar label{display:flex;align-items:center;gap:4px;min-height:40px;padding:5px 8px;font-size:10px;white-space:nowrap}.pp-home.is-home-editor .workshop-scene-toolbar input{accent-color:var(--ui-accent);margin:0} .pp-home.is-home-editor .workshop-dock{grid-area:dock;display:flex;min-height:0;height:56px;align-items:center;justify-content:center;gap:6px;padding:4px 10px;border-top:1px solid var(--ui-line);background:var(--ui-card)} .pp-home.is-home-editor .workshop-dock>button{display:flex;flex-direction:row;gap:6px;align-items:center;justify-content:center;flex:0 1 140px;min-height:44px;min-width:0;padding:7px 12px;font-size:12px;border:0;border-radius:8px;background:transparent;color:var(--ui-ink)} .pp-home.is-home-editor .workshop-dock svg{width:21px;height:21px}.pp-home.is-home-editor .workshop-dock>button[aria-pressed=true]{background:var(--ui-tint);color:var(--ui-accent)} .pp-home.is-home-editor .workshop-footer{grid-area:footer;min-height:0;max-height:none;height:30px;display:flex;align-items:center;gap:6px;padding:3px 12px;border-top:1px solid var(--ui-line);background:var(--ui-card);overflow:hidden} .pp-home.is-home-editor .workshop-footer p{margin:0;font-size:10px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pp-home.is-home-editor .workshop-footer button{min-height:24px;font-size:10px;padding:2px 6px} .pp-home.is-home-editor>.workshop-context{position:absolute;inset:auto;left:var(--editor-left,8px);top:var(--editor-top,100px);z-index:20;transform:none;width:310px;max-width:calc(100% - 16px);padding:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-card);color:var(--ui-ink);box-shadow:0 4px 14px #0004;pointer-events:auto} .pp-home.is-home-editor .editor-selection-summary{justify-content:space-between;gap:8px;padding:0 4px 0 10px;height:38px;border-bottom:1px solid var(--ui-line)} .pp-home.is-home-editor .editor-selection-summary b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pp-home.is-home-editor .editor-selection-summary button{min-height:36px;min-width:40px;border:0;background:transparent;padding:6px}.pp-home.is-home-editor .editor-selection-summary svg{width:18px;height:18px} .pp-home.is-home-editor .editor-action-grid{gap:1px;padding:3px;flex-wrap:nowrap} .pp-home.is-home-editor .editor-action-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:6px;color:var(--ui-ink);white-space:nowrap}.pp-home.is-home-editor .editor-action-grid svg{width:21px;height:21px} .pp-home.is-home-editor .editor-action-grid button:hover,.pp-home.is-home-editor .editor-action-grid button[aria-expanded=true]{background:var(--ui-tint);color:var(--ui-accent)} .pp-home.is-home-editor .editor-inspector-body{position:relative;inset:auto;height:auto;overflow:visible;display:block;padding:10px;border-top:1px solid var(--ui-line);background:transparent} .pp-home.is-home-editor .editor-sizing{display:block;padding:0;border:0;box-shadow:none;border-radius:0}.pp-home.is-home-editor .editor-sizing>label{display:flex;justify-content:space-between;align-items:center;font-size:12px} .pp-home.is-home-editor .editor-sizing>div{display:flex;align-items:center;gap:9px;margin-top:6px}.pp-home.is-home-editor .editor-sizing input{width:100%;min-width:0;accent-color:var(--ui-accent)} .pp-home.is-home-editor .editor-sizing button{min-width:44px;min-height:44px;font-size:16px;padding:4px}.pp-home.is-home-editor .editor-sizing small{display:flex;align-items:center;justify-content:space-between;color:var(--ui-muted);font-size:10px;margin-top:4px}.pp-home.is-home-editor .editor-sizing small button{min-height:32px;font-size:11px;background:transparent;border:0} .pp-home.is-home-editor .workshop-context-draft{display:flex;flex-direction:column;gap:5px;margin:0;padding:8px 10px;border-top:1px solid var(--ui-line)} .pp-home.is-home-editor .workshop-context-draft>span{display:block;font-size:10px;line-height:1.3;color:var(--ui-muted)}.pp-home.is-home-editor .workshop-context-draft>div{display:flex;gap:6px} .pp-home.is-home-editor .workshop-context-draft button{flex:1;min-height:40px;font-size:12px;padding:5px 10px;box-shadow:none}.pp-home.is-home-editor .workshop-context-draft [data-h-action=place]{background:var(--ui-accent);border-color:var(--ui-accent);color:#fff} .pp-home.is-home-editor .editor-fine{display:flex;flex-direction:column;gap:6px;font-size:11px}.pp-home.is-home-editor .editor-fine>div{display:flex;align-items:center;gap:4px}.pp-home.is-home-editor .editor-fine button{min-width:40px;min-height:40px;flex:1;padding:5px;font-size:11px} .pp-home.is-home-editor .editor-item-services{display:flex;flex-direction:column;gap:6px;margin-top:10px}.pp-home.is-home-editor .editor-item-services button{min-height:44px;font-size:11px}.pp-home.is-home-editor .editor-dismantle{margin-top:8px;font-size:10px}.pp-home.is-home-editor .editor-dismantle summary{min-height:36px;display:flex;align-items:center;color:var(--ui-muted);cursor:pointer} /* A single vertical drawer, independent of the room. */ .pp-home.is-home-editor>.workshop-browser{position:absolute;inset:60px 8px 94px auto;transform:none;z-index:25;width:320px;max-width:calc(100% - 16px);height:auto;max-height:none;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px auto auto minmax(0,1fr);gap:0;margin:0;padding:0;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-card);box-shadow:0 4px 16px #0004;overflow:hidden} .pp-home.is-home-editor .workshop-browser>header{grid-column:1;grid-row:1;display:flex;align-items:center;gap:8px;padding:0 8px 0 12px;border-bottom:1px solid var(--ui-line)}.pp-home.is-home-editor .workshop-browser h3{font-size:14px;margin:0;flex:1}.pp-home.is-home-editor .workshop-browser>header button{min-width:40px;min-height:40px;padding:7px;border:0;background:transparent} .pp-home.is-home-editor .workshop-categories{grid-column:1;grid-row:2;display:flex;flex-wrap:nowrap;gap:2px;padding:5px 8px;border:0;overflow:visible}.pp-home.is-home-editor .workshop-categories button{flex:1;min-width:0;min-height:36px;padding:5px;border:0;background:transparent;border-radius:6px}.pp-home.is-home-editor .workshop-categories button[aria-pressed=true]{background:var(--ui-tint);color:var(--ui-accent)} .pp-home.is-home-editor .workshop-search{grid-column:1;grid-row:3;position:relative;width:auto;justify-self:stretch;margin:0;padding:2px 8px 7px;z-index:auto}.pp-home.is-home-editor .workshop-search input{width:100%;min-height:38px;border-radius:7px;padding:7px 10px} .pp-home.is-home-editor .workshop-panel-content{grid-column:1;grid-row:4;min-height:0;max-height:none;padding:4px 10px 10px;overflow-y:auto;overflow-x:hidden;} .pp-home.is-home-editor .workshop-browser:not(:has(.workshop-categories)){grid-template-rows:44px auto minmax(0,1fr)}.pp-home.is-home-editor .workshop-browser:not(:has(.workshop-categories)) .workshop-search{grid-row:2}.pp-home.is-home-editor .workshop-browser:not(:has(.workshop-categories)) .workshop-panel-content{grid-row:3} .pp-home.is-home-editor .workshop-browser:not(:has(.workshop-search,.workshop-categories)){grid-template-rows:44px minmax(0,1fr)}.pp-home.is-home-editor .workshop-browser:not(:has(.workshop-search,.workshop-categories)) .workshop-panel-content{grid-row:2} .pp-home.is-home-editor .workshop-catalog{display:flex;flex-direction:column;gap:7px;grid-template-columns:none;grid-auto-flow:row;width:100%;min-width:0;padding:0} .pp-home.is-home-editor .workshop-catalog article{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto auto;gap:2px 9px;min-height:88px;height:auto;padding:9px;border:1px solid var(--ui-line);border-radius:8px;background:transparent;overflow:visible} .pp-home.is-home-editor .workshop-catalog-art{grid-column:1;grid-row:1/4;height:70px;width:56px;container-type:size;display:grid;place-items:center}.pp-home.is-home-editor .workshop-catalog b{grid-column:2;grid-row:1;font-size:12px;line-height:1.25;align-self:center} .pp-home.is-home-editor .workshop-catalog article>small:not(.home-action-hint){grid-column:2;grid-row:2;font-size:10px;color:var(--ui-muted)}.pp-home.is-home-editor .workshop-catalog article>button{grid-column:2;grid-row:3;min-height:36px;font-size:11px;margin:3px 0 0;padding:6px} .pp-home.is-home-editor .workshop-catalog article>details{grid-column:1/-1;grid-row:4;font-size:10px;margin:2px 0 0}.pp-home.is-home-editor .workshop-catalog summary{display:flex;align-items:center;min-height:28px;color:var(--ui-muted);cursor:pointer} .pp-home.is-home-editor .workshop-catalog details[open]{padding-top:4px}.pp-home.is-home-editor .workshop-catalog details p{font-size:11px;line-height:1.4}.pp-home.is-home-editor .workshop-catalog details button{display:block;width:100%;min-height:40px;margin:5px 0;font-size:11px} .pp-home.is-home-editor .workshop-catalog .home-action-hint{grid-column:1/-1;grid-row:5;font-size:10px;line-height:1.3;margin:0;color:var(--ui-muted)}.pp-home.is-home-editor .workshop-catalog .home-action-hint:empty{display:none} .pp-home.is-home-editor .editor-stock-installed{grid-column:1/-1!important;grid-row:auto!important;background:transparent;border:0;font-size:10px!important;min-height:30px!important}.pp-home.is-home-editor .editor-pane-hint{font-size:11px;margin:4px 0 10px;line-height:1.4} .pp-home.is-home-editor .editor-room-preview{display:flex;flex-direction:column;gap:6px;margin:10px 0;padding:0;border:0}.pp-home.is-home-editor .editor-room-preview>img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:7px}.pp-home.is-home-editor .editor-room-preview h4{margin:0;}.pp-home.is-home-editor .editor-room-preview p{margin:0;font-size:11px;line-height:1.4}.pp-home.is-home-editor .editor-room-preview>button{min-height:44px;font-size:12px;margin:2px 0} .pp-home.is-home-editor .editor-room-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;gap:6px;width:100%;padding:8px 0}.pp-home.is-home-editor .editor-room-list button{padding:5px;min-width:0;font-size:10px}.pp-home.is-home-editor .editor-room-list img{width:100%;aspect-ratio:16/9}.pp-home.is-home-editor .editor-room-filters{display:flex;gap:4px}.pp-home.is-home-editor .editor-room-filters button{flex:1;min-height:40px;font-size:10px;padding:4px} .pp-home.is-home-editor .editor-material-stock{display:flex;flex-wrap:wrap;margin:8px 0}.pp-home.is-home-editor .editor-material-stock>span{display:flex;align-items:center;gap:6px;width:100%;font-size:12px;padding:8px;background:var(--ui-bg);border-radius:7px}.pp-home.is-home-editor .editor-material-stock img{width:26px;height:26px;object-fit:contain} .pp-home.is-home-editor .editor-music{display:flex;flex-direction:column;align-items:stretch;padding:12px 2px;gap:10px;text-align:left}.pp-home.is-home-editor .editor-music-art svg{width:30px;height:30px}.pp-home.is-home-editor .editor-music h4,.pp-home.is-home-editor .editor-music p{margin:0}.pp-home.is-home-editor .editor-music p,.pp-home.is-home-editor .editor-music label{font-size:12px;line-height:1.5}.pp-home.is-home-editor .editor-music small{font-size:10px;line-height:1.5}.pp-home.is-home-editor .editor-music input{width:100%} .pp-home.is-home-editor [hidden]{display:none!important} @layer ui-theme{ html[data-game-theme] .pp-home.is-workshop.is-home-editor[open]{display:grid!important} html[data-game-theme] .pp-home.is-workshop.is-home-editor>.workshop-context{position:absolute!important;inset:auto!important;left:var(--editor-left,8px)!important;top:var(--editor-top,100px)!important;transform:none!important;width:310px!important;max-width:calc(100% - 16px)!important;padding:0!important;overflow:auto!important;border:1px solid var(--ui-line)!important;border-radius:10px!important;background:var(--ui-card)!important;color:var(--ui-ink)!important;box-shadow:0 4px 14px #0004!important} html[data-game-theme] .pp-home.is-workshop.is-home-editor>.workshop-browser{position:absolute!important;inset:60px 8px 94px auto!important;transform:none!important;left:auto!important;top:60px!important;width:320px!important;height:auto!important;max-height:none!important;max-width:calc(100% - 16px)!important;margin:0!important;background:var(--ui-card)!important} html[data-game-theme] .pp-home.is-workshop.is-home-editor>.workshop-browser .workshop-panel-content{min-height:0!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important} } @media(max-width:760px){ .pp-home.is-workshop.is-home-editor{width:100dvw;max-width:none;height:min(100dvh,calc(100dvw * 1.15 + 136px))!important;max-height:100dvh;border-radius:14px;grid-template-rows:48px minmax(0,1fr) 58px 30px} .pp-home.is-home-editor .workshop-header{height:48px;padding:2px 8px;gap:2px}.pp-home.is-home-editor .workshop-header h2{font-size:15px}.pp-home.is-home-editor .workshop-wallet{font-size:10px}.pp-home.is-home-editor .workshop-header button{min-width:40px} .pp-home.is-home-editor .workshop-dock{height:58px;padding:3px 4px;gap:0}.pp-home.is-home-editor .workshop-dock>button{flex:1;flex-direction:column;font-size:9px;gap:3px;padding:4px 1px;min-height:50px}.pp-home.is-home-editor .workshop-dock svg{width:20px;height:20px} .pp-home.is-home-editor .workshop-scene-toolbar{top:56px;left:8px;right:8px;gap:4px}.pp-home.is-home-editor .workshop-scene-toolbar>*{min-height:44px}.pp-home.is-home-editor .workshop-room-zoom button{min-height:44px;min-width:36px}.pp-home.is-home-editor .workshop-room-zoom button:nth-child(2){min-width:46px}.pp-home.is-home-editor .workshop-scene-toolbar label{min-height:44px;padding:4px} .pp-home.is-home-editor .workshop-scene-toolbar>button{font-size:0;width:44px;padding:4px}.pp-home.is-home-editor .workshop-scene-toolbar>button img{width:18px}.pp-home.is-home-editor .workshop-scene-toolbar>button b{font-size:9px} .pp-home.is-home-editor .editor-scene-hint{white-space:normal;text-align:center;width:max-content;max-width:calc(100% - 20px);font-size:10px}.pp-home.is-home-editor .workshop-footer{padding:3px 8px}.pp-home.is-home-editor .workshop-footer p{font-size:9px} .pp-home.is-home-editor>.workshop-browser{inset:auto 8px 96px;height:min(58dvh,490px);width:calc(100% - 16px);max-height:calc(100% - 158px)} .pp-home.is-home-editor .workshop-catalog article>button,.pp-home.is-home-editor .workshop-context-draft button{min-height:44px} @layer ui-theme{html[data-game-theme] .pp-home.is-workshop.is-home-editor>.workshop-browser{inset:auto 8px 96px!important;top:auto!important;left:8px!important;width:calc(100% - 16px)!important;height:min(58dvh,490px)!important;max-height:calc(100% - 158px)!important}} } @media(max-height:520px) and (orientation:landscape){ .pp-home.is-workshop.is-home-editor{width:100dvw;max-width:none;height:100dvh!important;max-height:100dvh;border-radius:0;grid-template-rows:44px minmax(0,1fr) 48px 22px} .pp-home.is-home-editor .workshop-header{height:44px;padding:0 10px}.pp-home.is-home-editor .workshop-scene-toolbar{top:50px;right:8px;left:8px} .pp-home.is-home-editor .workshop-dock{height:48px;min-height:0;padding:2px 6px}.pp-home.is-home-editor .workshop-dock>button{flex-direction:row;min-height:44px;font-size:10px;padding:4px}.pp-home.is-home-editor .workshop-footer{height:22px;font-size:9px} .pp-home.is-home-editor>.workshop-browser{inset:50px 8px 78px auto;width:300px;height:auto} @layer ui-theme{html[data-game-theme] .pp-home.is-workshop.is-home-editor>.workshop-browser{inset:50px 8px 78px auto!important;top:50px!important;width:300px!important;height:auto!important}} } @layer ui-theme{html[data-game-theme] .pp-home.is-workshop.is-home-editor :is(.workshop-header,.workshop-dock,.editor-action-grid,.editor-selection-summary)>button{background:transparent!important;border-color:transparent!important;color:var(--ui-ink)!important}html[data-game-theme] .pp-home.is-workshop.is-home-editor :is(.workshop-dock,.editor-action-grid)>button:is(:hover,[aria-pressed=true],[aria-expanded=true]){background:var(--ui-tint)!important;color:var(--ui-accent)!important}html[data-game-theme] .pp-home.is-home-editor .editor-scene-hint{color:#e2edef!important}html[data-game-theme] .pp-home.is-home-editor .workshop-scene-toolbar button{background:transparent!important;color:#edf5f8!important}html[data-game-theme] .pp-home.is-home-editor .workshop-search input:focus{outline:1px solid var(--ui-muted)!important;box-shadow:none!important}} @media(pointer:coarse){.pp-home.is-home-editor .editor-selection-summary{height:44px}.pp-home.is-home-editor .editor-selection-summary button{min-height:44px}.pp-home.is-home-editor .workshop-categories button,.pp-home.is-home-editor .workshop-catalog summary{min-height:44px}} /* Quotes stay inside the selected offer; native transactions own the charge. */ .pp-home.is-home-editor .workshop-catalog .editor-recipe{grid-template-rows:auto auto auto auto auto;gap:4px 9px} .pp-home.is-home-editor .editor-recipe .workshop-catalog-art{grid-row:1/3} .pp-home.is-home-editor .editor-purchase-options{grid-column:1/-1;grid-row:3;gap:7px;margin-top:5px} .pp-home.is-home-editor .editor-purchase-options[hidden]{display:none} .pp-home.is-home-editor .editor-offer{display:flex;flex-direction:column;gap:4px} .pp-home.is-home-editor .editor-offer-button{flex-direction:column;gap:6px;min-height:64px;padding:8px 4px;border-radius:8px;} .pp-home.is-home-editor .editor-offer-button>span:first-child{font-weight:700} .pp-home.is-home-editor .editor-offer-cost{justify-content:center;gap:7px;font-size:11px;line-height:1.3;font-variant-numeric:tabular-nums} .pp-home.is-home-editor .editor-offer-cost>span{display:inline-flex;align-items:center;gap:3px} .pp-home.is-home-editor .editor-offer-cost img{width:19px;height:19px;object-fit:contain;flex-shrink:0} .pp-home.is-home-editor .editor-offer-cost .home-diamond{display:inline-flex;gap:4px} .pp-home.is-home-editor .editor-offer-cost b{font-size:11px} .pp-home.is-home-editor [data-editor-offer-reason]{font-size:10px;line-height:1.3;color:var(--ui-muted);overflow-wrap:anywhere} .pp-home.is-home-editor [data-editor-offer-reason]:empty{display:none} .pp-home.is-home-editor .editor-recipe>details{grid-row:5} .pp-home.is-home-editor .editor-recipe>button{grid-column:1/-1;grid-row:4} .pp-home.is-home-editor .editor-owned{font-size:11px;margin:6px 0;color:var(--ui-muted)} .pp-home.is-home-editor .editor-confirmation{grid-column:1/-1;grid-row:3;display:flex;flex-direction:column;gap:7px;position:relative;inset:auto;width:auto;margin:5px 0 0;padding:10px;background:var(--ui-tint);border:1px solid var(--ui-line);border-radius:8px;box-shadow:none;overflow-wrap:anywhere} .pp-home.is-home-editor .editor-confirmation>div:first-child{display:flex;flex-direction:column;gap:6px;align-items:flex-start} .pp-home.is-home-editor .editor-confirmation b{font-size:12px;line-height:1.3} .pp-home.is-home-editor .editor-confirmation p{font-size:11px;line-height:1.35;margin:0;color:var(--ui-muted)} .pp-home.is-home-editor .editor-confirmation [data-editor-confirm-status]:empty{display:none} .pp-home.is-home-editor .editor-confirm-buttons{display:flex;gap:6px} .pp-home.is-home-editor .editor-confirm-buttons button{flex:1;min-height:44px;font-size:12px;padding:7px 9px} .pp-home.is-home-editor>.editor-confirmation-popup{position:absolute;z-index:40;inset:auto auto 96px 50%;transform:translateX(-50%);width:330px;max-width:calc(100% - 16px);max-height:calc(100% - 156px);overflow:auto;margin:0;background:var(--ui-card);box-shadow:0 5px 18px #0004} .pp-home.is-home-editor .editor-room-preview{padding:8px 0;margin:0 0 8px;gap:7px} .pp-home.is-home-editor .editor-room-preview h4{font-size:13px} .pp-home.is-home-editor .editor-room-preview .editor-confirmation{margin:0} .pp-home.is-home-editor .editor-preview-label{position:absolute;inset:auto auto 32px 50%;transform:translateX(-50%);max-width:calc(100% - 24px);font-size:11px;line-height:1.3;background:#0b1b24e6;color:#f3fbff;border:1px solid #e1f6ff40;border-radius:6px;padding:6px 10px;margin:0;pointer-events:none;text-align:center} .pp-home.is-home-editor .editor-preview-label[hidden]{display:none} .pp-home.is-home-editor .editor-grid-toggle{position:relative;cursor:pointer;gap:6px;display:flex;align-items:center;justify-content:center;border-radius:7px} .pp-home.is-home-editor .editor-grid-toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} .pp-home.is-home-editor .editor-grid-toggle svg{width:18px;height:18px;flex-shrink:0} .pp-home.is-home-editor .editor-grid-toggle:focus-within{outline:2px solid #fff;outline-offset:2px} @layer ui-theme{ html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-workshop.is-home-editor .editor-primary{background:var(--ui-primary)!important;border-color:var(--ui-primary)!important;color:var(--ui-on-accent)!important;box-shadow:none!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-workshop.is-home-editor .editor-offer-button:not(.editor-primary){background:var(--ui-card)!important;border-color:var(--ui-line)!important;color:var(--ui-ink)!important;box-shadow:none!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-workshop.is-home-editor .editor-offer-button:disabled{background:var(--ui-soft)!important;color:var(--ui-muted)!important;border-color:var(--ui-line)!important;opacity:1!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-workshop.is-home-editor .workshop-scene-toolbar .workshop-room-zoom{border:1px solid #edf5f833!important;background:#0b1b24da!important;border-radius:8px!important;gap:0!important;box-shadow:none!important;overflow:hidden!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-workshop.is-home-editor .workshop-scene-toolbar .workshop-room-zoom button{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#edf5f8!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-workshop.is-home-editor .workshop-scene-toolbar .workshop-room-zoom button:hover{background:#edf5f820!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-workshop.is-home-editor .workshop-scene-toolbar .editor-grid-toggle{background:#0b1b24da!important;color:#edf5f8!important;border:1px solid #edf5f833!important;font-size:11px!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-workshop.is-home-editor .workshop-scene-toolbar .editor-grid-toggle:has(:checked){background:#126e79ed!important;border-color:#9ef3db!important} } @media(max-width:760px){.pp-home.is-home-editor .editor-offer-button{min-height:64px}.pp-home.is-home-editor>.editor-confirmation-popup{bottom:96px}.pp-home.is-home-editor .editor-preview-label{bottom:8px;font-size:10px}} @media(max-height:520px) and (orientation:landscape){.pp-home.is-home-editor>.editor-confirmation-popup{bottom:78px;left:8px;transform:none;width:280px;max-height:calc(100% - 136px)}.pp-home.is-home-editor .editor-preview-label{left:8px;transform:none;bottom:8px;max-width:calc(100% - 320px)}} @layer ui-theme{html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-workshop.is-home-editor .editor-preview-label{color:#edf5f8!important}} /* A selected room keeps the scene visible above its phone confirmation. */ @media(max-width:760px) and (orientation:portrait){ .pp-home.is-home-editor .workshop-browser:has(.editor-room-preview .editor-confirmation) .editor-room-filters, .pp-home.is-home-editor .workshop-browser:has(.editor-room-preview .editor-confirmation) .editor-room-list, .pp-home.is-home-editor .workshop-browser:has(.editor-room-preview .editor-confirmation) .editor-room-preview>p{display:none} .pp-home.is-home-editor .workshop-browser:has(.editor-room-preview .editor-confirmation) .editor-room-preview{margin:0;padding:4px 0;gap:6px} @layer ui-theme{html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-workshop.is-home-editor>.workshop-browser:has(.editor-room-preview .editor-confirmation){height:auto!important;max-height:calc(100% - 220px)!important;top:auto!important}} } /* A card has one vertical flow: requirements, purchase, reserve, details. */ .pp-home.is-home-editor>.workshop-browser[data-editor-pane="catalog"]{grid-template-rows:44px auto auto auto minmax(0,1fr)} .pp-home.is-home-editor .workshop-browser[data-editor-pane="catalog"]>.workshop-subcategories{grid-column:1;grid-row:3;min-width:0} .pp-home.is-home-editor .workshop-browser[data-editor-pane="catalog"]>.workshop-search{grid-row:4} .pp-home.is-home-editor .workshop-browser[data-editor-pane="catalog"]>.workshop-panel-content{grid-row:5} .pp-home.is-home-editor .workshop-catalog .editor-recipe{display:flex;flex-direction:column;gap:10px;min-width:0;overflow:hidden;padding:12px} .pp-home.is-home-editor .editor-recipe-heading{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;align-items:center} .pp-home.is-home-editor .editor-recipe-heading .workshop-catalog-art{width:62px;height:66px;grid-area:auto;min-width:0;max-width:none} .pp-home.is-home-editor .editor-recipe-heading b{display:block;font-size:13px;line-height:1.35;overflow-wrap:anywhere} .pp-home.is-home-editor .editor-recipe-heading small{display:block;font-size:11px;line-height:1.4;margin-top:4px;color:var(--ui-muted)} .pp-home.is-home-editor .editor-purchase-options{margin:0;gap:8px;flex:0 0 auto;grid-area:auto;width:100%;min-width:0} .pp-home.is-home-editor .editor-reserve{display:block;min-width:0;width:100%} .pp-home.is-home-editor .editor-reserve button{position:static;width:100%;grid-area:auto;line-height:1.3;padding:8px;font-size:12px} .pp-home.is-home-editor .editor-recipe>details{grid-area:auto;margin:0} .pp-home.is-home-editor .editor-recipe summary{font-size:11px;min-height:36px} .workshop-requirements{display:flex;flex-direction:column;gap:5px;width:100%;min-width:0} .workshop-resource{display:flex;align-items:center;gap:8px;min-height:36px;padding:5px 7px;border-radius:6px;background:var(--ui-tint);font-size:11px;line-height:1.3;min-width:0} .workshop-resource>img{width:28px;height:28px;object-fit:contain;flex-shrink:0} .workshop-resource>span{flex:1;min-width:0;overflow-wrap:anywhere}.workshop-resource small{display:block;font-size:10px;color:var(--ui-muted);margin-top:2px} .workshop-resource>b{font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums} .workshop-resource.is-short>b,.workshop-resource.is-short small{color:var(--ui-danger,#ad3d3d)} .workshop-resource.is-ready>b{color:var(--ui-success,#287961)} .workshop-sources{margin:0;font-size:11px;color:var(--ui-muted)}.workshop-sources>div{padding:8px 0;border-top:1px solid var(--ui-line)}.workshop-sources p{line-height:1.4;margin:3px 0 5px}.workshop-sources button{min-height:44px;font-size:11px} .workshop-station{font-size:10px;line-height:1.4;color:var(--ui-muted);display:flex;gap:5px;align-items:center;flex-wrap:wrap}.workshop-station>span{flex:1;min-width:110px}.workshop-station>button{font-size:10px;min-height:44px;padding:7px 9px} .pp-home.is-home-editor .workshop-subcategories{display:flex;gap:4px;overflow:auto;flex-shrink:0;padding:5px 10px;scrollbar-width:thin;max-width:100%} .pp-home.is-home-editor .workshop-subcategories button{white-space:nowrap;flex:0 0 auto;padding:6px 9px;border:0;border-radius:6px;background:transparent;color:var(--ui-muted)} .pp-home.is-home-editor .workshop-subcategories button[aria-pressed=true]{background:var(--ui-tint);color:var(--ui-accent)} .workshop-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 0;font-size:11px;color:var(--ui-muted)}.workshop-pagination>button{min-height:44px;min-width:44px} .home-workshop-recipes{display:flex;flex-direction:column;gap:12px;margin-top:14px;min-width:0}.home-workshop-recipes h3{margin:0;font-size:14px}.workshop-material-recipe{display:flex;flex-direction:column;gap:9px;padding:12px;border:1px solid var(--ui-line);border-radius:9px;min-width:0} .workshop-material-recipe>header{display:flex;gap:9px;align-items:center}.workshop-material-recipe>header img{width:44px;height:44px;object-fit:contain}.workshop-material-recipe header b{font-size:13px}.workshop-material-recipe header small{display:block;font-size:10px;line-height:1.4;color:var(--ui-muted);margin-top:4px}.workshop-material-recipe>button{min-height:44px;font-size:12px}.workshop-recipe-reason{font-size:11px;line-height:1.4;color:var(--ui-muted)}.workshop-recipe-reason:empty{display:none} .workshop-fruit-picker{display:flex;flex-direction:column;gap:5px;font-size:11px}.workshop-fruit-picker select{min-height:44px;width:100%;font-size:12px;border:1px solid var(--ui-line);border-radius:6px;padding:6px;background:var(--ui-card);color:var(--ui-ink)} .pp-home .editor-storage-protection{margin:8px;padding:8px;border:1px solid var(--ui-line);border-radius:6px;font-size:11px;line-height:1.4;background:var(--ui-tint)}.editor-storage-protection p{font-size:11px;margin:4px 0}.editor-storage-protection button{min-height:44px;width:100%;font-size:11px} .pp-home .home-world-interaction .home-workshop-recipes{max-width:440px}.pp-home .home-world-interaction{overflow:auto} @layer ui-theme{ html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor>.workshop-browser[data-editor-pane="catalog"]{grid-template-rows:44px auto auto auto minmax(0,1fr)!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .workshop-browser[data-editor-pane="catalog"]>.workshop-search{grid-row:4!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .workshop-browser[data-editor-pane="catalog"]>.workshop-panel-content{grid-row:5!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .workshop-catalog .editor-recipe{display:flex!important;flex-direction:column!important;gap:10px!important;padding:12px!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-recipe-heading{display:grid!important;grid-template-columns:62px minmax(0,1fr)!important;gap:12px!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-reserve button{position:static!important;width:100%!important;grid-area:auto!important;min-height:44px!important;float:none!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-recipe .editor-purchase-options{display:flex!important;width:100%!important;grid-area:auto!important;gap:8px!important;margin:0!important;flex-shrink:0!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-recipe .editor-purchase-options[hidden]{display:none!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home .workshop-resource{background:var(--ui-tint)!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home .editor-recipe-heading b{font-size:13px!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home .workshop-resource.is-short :is(b,small){color:var(--ui-danger,#ad3d3d)!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home .workshop-resource.is-ready>b{color:var(--ui-success,#287961)!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home .workshop-subcategories button[aria-pressed=true]{background:var(--ui-tint)!important;color:var(--ui-accent)!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home .workshop-subcategories{display:flex!important;gap:4px!important;overflow:auto!important;flex-shrink:0!important} } @media(max-width:760px){.pp-home.is-home-editor .workshop-subcategories{padding:4px 10px}.pp-home.is-home-editor .editor-recipe-heading{grid-template-columns:56px minmax(0,1fr)}} .pp-home.is-home-editor .workshop-compact-filters{display:none} @media(max-height:480px) and (min-width:600px){ .pp-home.is-home-editor .workshop-browser[data-editor-pane="catalog"]{grid-template-rows:44px 44px 44px minmax(0,1fr)} .pp-home.is-home-editor .workshop-browser[data-editor-pane="catalog"]>:is(.workshop-categories,.workshop-subcategories){display:none} .pp-home.is-home-editor .workshop-compact-filters{display:flex;gap:6px;padding:0 8px;grid-row:2;min-width:0} .pp-home.is-home-editor .workshop-compact-filters select{width:50%;min-width:0;height:44px;border:1px solid var(--ui-line);border-radius:6px;background:var(--ui-card);color:var(--ui-ink);font-size:11px;padding:4px} .pp-home.is-home-editor .workshop-browser[data-editor-pane="catalog"]>.workshop-search{grid-row:3} .pp-home.is-home-editor .workshop-browser[data-editor-pane="catalog"]>.workshop-panel-content{grid-row:4} @layer ui-theme{ html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor>.workshop-browser[data-editor-pane="catalog"]{grid-template-rows:44px 44px 44px minmax(0,1fr)!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .workshop-browser[data-editor-pane="catalog"]>:is(.workshop-categories,.workshop-subcategories){display:none!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .workshop-browser[data-editor-pane="catalog"]>.workshop-search{grid-row:3!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .workshop-browser[data-editor-pane="catalog"]>.workshop-panel-content{grid-row:4!important} } } .pp-home .home-world-interaction .home-feature-art{flex:0 0 110px;height:110px;overflow:hidden} .pp-home .home-world-interaction .home-feature-art .home-thumbnail{position:relative;display:block;overflow:hidden;flex:0 0 auto;width:min(240px,calc(110px * var(--thumb-ratio)));height:min(110px,calc(240px / var(--thumb-ratio)));max-width:100%} .pp-home .home-world-interaction .home-feature-art .home-thumbnail img{position:absolute;max-width:none!important;max-height:none!important;object-fit:fill;transform:none!important;pointer-events:none} /* Refined home editor: compact controls, one scroll axis, native44px targets. */ .pp-home.is-home-editor .editor-type-picker{position:relative;grid-row:3;margin:0 10px;min-width:0;z-index:3} .pp-home.is-home-editor .editor-type-picker>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 9px;list-style:none;cursor:pointer;border:1px solid var(--ui-line);border-radius:8px;font-size:12px;background:var(--ui-card)} .editor-type-picker summary::-webkit-details-marker{display:none}.editor-type-picker summary>span{flex:1}.editor-type-picker svg{width:17px;height:17px;flex-shrink:0} .pp-home.is-home-editor .editor-type-picker .workshop-subcategories{position:absolute;left:0;right:0;top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:290px;overflow-y:auto;overflow-x:hidden;padding:6px;background:var(--ui-card);border:1px solid var(--ui-line);border-radius:10px;box-shadow:0 8px 24px #0003;gap:2px} .pp-home.is-home-editor .workshop-subcategories button{display:flex;align-items:center;gap:7px;text-align:left;white-space:normal;min-width:0;min-height:44px;padding:6px 8px;font-size:11px} .pp-home.is-home-editor .workshop-subcategories svg{width:18px;height:18px;flex-shrink:0} .pp-home.is-home-editor .workshop-categories button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;font-size:10px;padding:4px} .pp-home.is-home-editor .workshop-categories svg{width:18px;height:18px;flex-shrink:0} .pp-home.is-home-editor .workshop-search{display:flex;align-items:center;padding:0 10px;margin:8px 0;min-width:0;height:44px} .pp-home.is-home-editor .workshop-search>svg{position:absolute;left:21px;width:17px;height:17px;color:var(--ui-muted);pointer-events:none} .pp-home.is-home-editor .workshop-search input{height:44px;min-height:44px;padding:8px 42px 8px 34px;font-size:12px;border:1px solid var(--ui-line);background:var(--ui-bg)} .workshop-search input::-webkit-search-cancel-button{display:none} .pp-home.is-home-editor .workshop-search button{position:absolute;right:10px;top:0;width:44px;height:44px;min-height:44px;border:0;background:transparent;padding:13px;color:var(--ui-muted)} .pp-home.is-home-editor .workshop-search button svg{width:17px;height:17px} .pp-home.is-home-editor .workshop-panel-content{scrollbar-width:thin;scrollbar-color:var(--ui-line) transparent;scrollbar-gutter:stable;overscroll-behavior:contain} .workshop-panel-content::-webkit-scrollbar{width:5px}.workshop-panel-content::-webkit-scrollbar-thumb{background:var(--ui-line);border-radius:8px}.workshop-panel-content::-webkit-scrollbar-track{background:transparent} .pp-home.is-home-editor .editor-recipe{gap:7px;padding:10px} .pp-home.is-home-editor .editor-recipe-heading{grid-template-columns:52px minmax(0,1fr);gap:9px} .pp-home.is-home-editor .editor-recipe-heading .workshop-catalog-art{width:52px;height:56px} .pp-home.is-home-editor .editor-recipe-heading b{font-size:12px}.pp-home.is-home-editor .editor-recipe-heading small{margin-top:3px;font-size:10px} .pp-home.is-home-editor .editor-purchase-options{display:flex;gap:6px;align-items:start} .pp-home.is-home-editor .editor-offer{min-width:0;flex:1} .pp-home.is-home-editor .editor-offer-button{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;width:100%;min-height:44px;height:auto;padding:7px 8px;font-size:12px;line-height:1.2} .pp-home.is-home-editor .editor-offer-cost{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:10px} .pp-home.is-home-editor .editor-offer-cost img{width:17px;height:17px}.pp-home.is-home-editor .editor-offer-cost .home-diamond img{width:18px;height:18px} .pp-home.is-home-editor .editor-reserve button{min-height:44px;padding:6px 8px;font-size:11px} .pp-home.is-home-editor .workshop-requirements{gap:3px} .pp-home.is-home-editor .workshop-resource{min-height:30px;padding:4px 6px;gap:7px;background:var(--ui-bg);border:0;border-radius:6px} .pp-home.is-home-editor .workshop-resource>img{width:22px;height:22px}.pp-home.is-home-editor .workshop-resource small{display:none}.pp-home.is-home-editor .workshop-resource>b{font-size:10px} .pp-home.is-home-editor .editor-recipe summary{min-height:32px;font-size:10px} .pp-home.is-home-editor .editor-offer>small:empty{display:none} .pp-home.is-home-editor .workshop-context{width:296px;border-radius:12px} .pp-home.is-home-editor .editor-selection-summary{display:flex;align-items:center;gap:7px;padding:0 4px 0 9px;min-height:42px} .pp-home.is-home-editor .editor-selection-summary>b{flex:1;font-size:11px;line-height:1.3} .pp-home.is-home-editor .editor-selected-art{display:flex;align-items:center;justify-content:center;width:28px;height:28px;overflow:hidden;flex-shrink:0} .editor-selected-art .home-thumbnail{position:relative;width:28px;height:28px;overflow:hidden}.editor-selected-art img{position:absolute;max-width:none} .pp-home.is-home-editor .editor-selection-summary>button{width:44px;min-height:44px;padding:12px} .pp-home.is-home-editor .editor-action-grid{display:flex;align-items:stretch;gap:2px;padding:4px 5px} .pp-home.is-home-editor .editor-action-grid button{flex:1;min-width:44px;min-height:46px;padding:4px 1px;font-size:9px;gap:4px;line-height:1.15;border:0;background:transparent;border-radius:7px} .pp-home.is-home-editor .editor-action-grid button>svg{width:19px;height:19px} .editor-action-grid button:hover{background:var(--ui-tint)} .pp-home.is-home-editor .editor-storage-protection{font-size:10px;margin:5px 8px;padding:7px}.editor-storage-protection p{font-size:10px;line-height:1.3} .editor-stacking{display:flex;flex-direction:column;gap:5px;margin:0 0 10px;font-size:11px}.editor-stacking>b{display:flex;gap:7px;align-items:center}.editor-stacking svg{width:18px;height:18px}.editor-stacking p{margin:0;color:var(--ui-muted);font-size:10px;line-height:1.4}.editor-stacking button{min-height:44px;font-size:11px} .pp-home.is-home-editor .workshop-dock{gap:4px}.pp-home.is-home-editor .workshop-dock button{min-height:44px;font-size:11px} .editor-view-settings{position:relative;display:block;flex:0 0 auto;z-index:4} .editor-view-settings>summary{list-style:none;width:44px;height:44px;display:grid;place-items:center;border-radius:9px;background:#10212dd9;color:#eef7fb;cursor:pointer} .editor-view-settings summary::-webkit-details-marker{display:none}.editor-view-settings summary svg{width:21px;height:21px} .editor-view-settings>div{position:absolute;right:0;top:50px;display:flex;flex-direction:column;gap:9px;width:192px;padding:12px;border-radius:10px;border:1px solid var(--ui-line);background:var(--ui-card);box-shadow:0 8px 24px #0004;color:var(--ui-ink);font-size:12px} .pp-home.is-home-editor .editor-material-stock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 0 10px} .pp-home.is-home-editor .editor-material-tile{display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 7px;min-width:0;min-height:64px;padding:8px;text-align:left;border:1px solid var(--ui-line);border-radius:9px;background:var(--ui-bg);font-size:10px;line-height:1.35} .editor-material-tile>img{grid-row:1/3;width:30px;height:30px;object-fit:contain;align-self:center}.editor-material-tile>b{font-variant-numeric:tabular-nums;color:var(--ui-accent);font-size:11px}.editor-material-tile.is-empty>b{color:var(--ui-muted)} .editor-section-caption{margin:7px 0 9px;font-size:11px;color:var(--ui-muted)}.editor-material-info{padding:10px;border:1px solid var(--ui-line);border-radius:9px;font-size:11px;line-height:1.45}.editor-material-info p{font-size:11px;margin:4px 0} .editor-recipes-disclosure>summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:12px;border-top:1px solid var(--ui-line)}.editor-recipes-disclosure>summary svg{width:18px;height:18px} .pp-home.is-home-editor .editor-room-list button{position:relative;border-radius:9px;padding:6px;text-align:left;overflow:hidden;border:1px solid var(--ui-line)}.pp-home.is-home-editor .editor-room-list button[aria-pressed=true]{border-color:var(--ui-accent);background:var(--ui-tint)}.pp-home.is-home-editor .editor-room-list img{border-radius:5px;object-fit:cover}.editor-room-list b,.editor-room-list small{display:block;margin-top:4px} @layer ui-theme{ html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .workshop-catalog .editor-recipe{gap:7px!important;padding:10px!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-recipe-heading{grid-template-columns:52px minmax(0,1fr)!important;gap:9px!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-recipe-heading b{font-size:12px!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .workshop-resource{background:var(--ui-bg)!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-type-picker .workshop-subcategories{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow-x:hidden!important;overflow-y:auto!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor>.workshop-context{width:296px!important;border-radius:12px!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-action-grid button{min-height:46px!important;padding:4px 1px!important;font-size:9px!important;min-width:44px!important;border:0!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-action-grid button>svg{width:19px!important;height:19px!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-offer-button{min-height:44px!important;flex-direction:row!important;padding:7px 8px!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .workshop-search input{min-height:44px!important;padding:8px 42px 8px 34px!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-selected-art .home-thumbnail{display:block!important;width:28px!important;height:28px!important;position:relative!important;overflow:hidden!important} html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-selected-art img{position:absolute!important;max-width:none!important} } @media(max-height:480px) and (min-width:600px){ .pp-home.is-home-editor .editor-type-picker{display:none} .pp-home.is-home-editor .workshop-compact-filters{display:flex} .pp-home.is-home-editor .editor-view-settings>div{top:0;right:48px} } @media(max-width:360px){.pp-home.is-home-editor .editor-material-stock{gap:4px}.pp-home.is-home-editor .editor-material-tile{padding:6px;font-size:9px;gap:2px 5px}} @layer ui-theme{html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .workshop-search input:focus{outline:2px solid var(--ui-accent)!important;outline-offset:1px!important;box-shadow:none!important}html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-item-details .workshop-sources summary{min-height:44px!important;display:flex!important;align-items:center!important}.pp-home.is-home-editor .editor-item-details p{line-height:1.45}.pp-home.is-home-editor .editor-item-details .workshop-resource small{display:block!important}} .pp-home.is-home-editor .editor-stock-card{display:flex;flex-direction:column;gap:7px;padding:10px;border:1px solid var(--ui-line);border-radius:10px}.pp-home.is-home-editor .editor-stock-heading{display:grid;grid-template-columns:52px minmax(0,1fr);gap:9px;align-items:center}.pp-home.is-home-editor .editor-stock-heading .workshop-catalog-art{width:52px;height:56px}.pp-home.is-home-editor .editor-stock-heading b{font-size:12px}.pp-home.is-home-editor .editor-stock-heading small{display:block;color:var(--ui-muted);font-size:10px;margin-top:4px}.pp-home.is-home-editor .editor-stock-card button{min-height:44px;padding:7px;font-size:11px}.pp-home.is-home-editor .editor-stock-copies>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:11px;color:var(--ui-accent)}.pp-home.is-home-editor .editor-stock-copies button{width:100%;margin-top:3px}.pp-home.is-home-editor .editor-stock-card .editor-stock-installed{min-height:44px!important}.pp-home.is-home-editor .editor-stock-heading .workshop-catalog-art .home-thumbnail{width:52px;height:52px} @layer ui-theme{html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .workshop-catalog>.editor-stock-card{display:flex!important;flex-direction:column!important;gap:7px!important;padding:10px!important}html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .workshop-catalog>.editor-stock-card>.editor-stock-heading{display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;grid-column:auto!important;grid-row:auto!important;gap:9px!important}html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-stock-heading>div{grid-column:auto!important;grid-row:auto!important;min-width:0!important;display:block!important}html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-stock-heading>.workshop-catalog-art{position:relative!important;width:52px!important;height:56px!important}html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-stock-heading .home-thumbnail{position:relative!important;display:block!important;width:52px!important;height:52px!important;overflow:hidden!important}html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-stock-heading img{position:absolute!important;max-width:none!important}html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-stock-heading b{font-size:12px!important}html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-stock-heading small{font-size:10px!important;display:block!important}html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-stock-card>button{min-height:44px!important;grid-row:auto!important;grid-column:auto!important;align-self:stretch!important}html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-stock-card .editor-stock-installed{min-height:44px!important}} @layer ui-theme{html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-stock-heading>.workshop-catalog-art{display:grid!important;place-items:center!important}html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-stock-heading .home-thumbnail{width:min(52px,calc(52px * var(--thumb-ratio)))!important;height:min(52px,calc(52px / var(--thumb-ratio)))!important}html[data-game-theme] :is(#gameScreen,dialog).pp-home.is-home-editor .editor-selected-art .home-thumbnail{width:min(28px,calc(28px * var(--thumb-ratio)))!important;height:min(28px,calc(28px / var(--thumb-ratio)))!important}} /* pk-style-source:156 */ /* /desktop-minimap-restore-v1.css */ /* Restore the 2.96.18 desktop hierarchy using the current map and native controls. HudLayout owns the shared phone breakpoint. Every rule requires desktop format. */ @layer ui-theme { html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] { --clean-map-size:264px;height:264px!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-topbar { padding:0 50px 0 12px!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-server-meta { position:absolute!important;inset:0 4px auto auto!important;display:flex!important; width:44px!important;height:44px!important;padding:0!important;margin:0!important; border:0!important;background:none!important;box-shadow:none!important;pointer-events:auto!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapWeatherIcon { display:grid!important;place-items:center!important;width:44px!important;height:44px!important; min-width:44px!important;padding:9px!important;border:0!important;border-radius:10px!important; background:transparent!important;box-shadow:none!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapWeatherIcon svg {width:26px!important;height:26px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapZoom { inset:168px 5px auto!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-bottombar { position:absolute!important;inset:auto 5px 3px!important;display:flex!important; align-items:center!important;justify-content:space-between!important;gap:4px!important; width:auto!important;height:44px!important;min-height:44px!important; padding:0!important;margin:0!important;border:0!important;background:transparent!important; box-shadow:none!important;border-radius:0!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapChannelButton { position:static!important;inset:auto!important;display:flex!important;align-items:center!important; justify-content:flex-start!important;gap:4px!important;flex:1 1 0!important;min-width:0!important; width:auto!important;height:44px!important;min-height:44px!important;padding:0 3px!important; border:0!important;border-radius:9px!important;background:transparent!important;box-shadow:none!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-channel-icon {flex:0 0 27px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-channel-copy { display:block!important;flex:1 1 auto!important;min-width:0!important;overflow:hidden!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapChannel { display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important; font:650 11px/1.35 'Segoe UI',sans-serif!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapChannelPopulation:not([hidden]) { display:block!important;flex:0 0 auto!important;padding:3px!important;border-radius:5px!important; background:var(--ui-soft)!important;color:var(--ui-muted)!important;font:600 10px/1 'Segoe UI',sans-serif!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-channel-chevron {display:block!important;flex:none!important;font-size:11px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"][data-private-location="true"] .world-minimap-channel-chevron {display:none!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapPing { position:static!important;inset:auto!important;display:flex!important;align-items:center!important; justify-content:center!important;gap:5px!important;flex:0 0 80px!important; width:80px!important;min-width:80px!important;height:44px!important;min-height:44px!important; margin:0!important;padding:0 6px!important;border:0!important;border-radius:9px!important;box-shadow:none!important; background:var(--ui-positive-bg)!important;color:var(--ui-positive)!important; cursor:pointer!important;white-space:nowrap!important;font-variant-numeric:tabular-nums!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapPing.is-medium {background:var(--ui-warning-bg)!important;color:var(--ui-warning)!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapPing.is-bad {background:var(--ui-danger-bg)!important;color:var(--ui-danger)!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapPing.is-unknown {background:var(--ui-soft)!important;color:var(--ui-muted)!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapPingValue {font:650 11px/1 'Segoe UI',sans-serif!important;color:inherit!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"].is-collapsed :is(.world-minimap-server-meta,#worldMinimapPing) {display:none!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"].is-collapsed .world-minimap-bottombar {inset:0!important;height:52px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"].is-collapsed #worldMinimapChannelButton { display:grid!important;place-items:center!important;flex:none!important;width:44px!important;padding:0!important; background:var(--ui-paper)!important;border:1px solid var(--ui-line)!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"].is-collapsed :is(.world-minimap-channel-copy,#worldMinimapChannelPopulation,.world-minimap-channel-chevron) {display:none!important} @media(max-height:560px) { html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] {--clean-map-size:236px;height:236px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapZoom {top:140px!important} } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"].is-collapsed {height:52px!important} } /* Desktop only: use HudLayout's native rectangular flag, including coarse-pointer landscape. */ @layer ui-theme { html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] {--clean-map-size:220px;height:220px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-topbar {padding:0 83px 0 11px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapLocation { display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important; white-space:normal!important;overflow-wrap:anywhere!important;overflow:hidden!important; max-height:34px!important;font:650 13px/17px 'Segoe UI',sans-serif!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-server-meta {width:76px!important;gap:2px!important;align-items:center!important;justify-content:flex-end!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapWeatherIcon {width:32px!important;min-width:32px!important;padding:6px!important;flex:none!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapWeatherIcon svg {width:22px!important;height:22px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapWeatherIcon >svg[data-weather-icon] {width:24px!important;height:24px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapClock { display:block!important;width:40px!important;flex:0 0 40px!important;margin:0!important;padding:0!important; color:var(--ui-muted)!important;font:650 12px/1 'Segoe UI',sans-serif!important;font-variant-numeric:tabular-nums!important; white-space:nowrap!important;background:none!important;border:0!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-bottombar {inset:172px 5px auto!important;gap:0!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapChannelButton {width:62px!important;flex:0 0 62px!important;padding:3px 0!important;gap:1px!important;flex-direction:column!important;justify-content:center!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-channel-icon {flex:0 0 20px!important;width:20px!important;height:20px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-channel-icon svg {width:20px!important;height:20px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-channel-copy {flex:none!important;max-width:62px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapChannel {font:650 10px/13px 'Segoe UI',sans-serif!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] :is(#worldMinimapChannelPopulation:not([hidden]),.world-minimap-channel-chevron,.minimap-status-full) {display:none!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .minimap-status-short {display:inline!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapPing {width:64px!important;min-width:64px!important;flex:0 0 64px!important;padding:0 2px!important;gap:3px!important;background:transparent!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapPingValue {font-size:10px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapZoom { inset:172px auto auto 71px!important;width:96px!important;height:44px!important;gap:0!important; border-radius:9px!important;background:var(--ui-soft)!important; } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapZoom button {width:28px!important;min-width:28px!important;min-height:44px!important;flex:0 0 28px!important;background:transparent!important;font-size:18px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] #worldMinimapZoom .hud-world-zoom-reset {width:40px!important;min-width:40px!important;flex:0 0 40px!important;font-size:11px!important;font-variant-numeric:tabular-nums!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] :is(#worldMinimapZoom button,#worldMinimapChannelButton,#worldMinimapWeatherIcon):hover {background:var(--ui-soft)!important;color:var(--ui-accent)!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] :is(#worldMinimapZoom button,#worldMinimapChannelButton,#worldMinimapPing,#worldMinimapWeatherIcon):focus-visible {outline:2px solid var(--ui-focus)!important;outline-offset:-2px!important} @media(max-height:560px) { html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] {--clean-map-size:192px;height:192px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] :is(#worldMinimapZoom,.world-minimap-bottombar) {top:144px!important} } html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"].is-collapsed {height:52px!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"].is-collapsed .world-minimap-bottombar {top:0!important} html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"].is-collapsed #worldMinimapChannelButton {width:44px!important;flex:none!important} } @layer ui-theme {html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-bottombar {pointer-events:none!important}html[data-game-theme] #gameScreen[data-hud-design="v2680"] #worldMinimapShell[data-minimap-format="rectangular"] .world-minimap-bottombar>button {pointer-events:auto!important}} /* pk-style-source:157 */ /* /hud-conversation-polish-v1.css */ /* A quieter exploration HUD. Keep the map canvas and its touch targets unchanged. */ @layer player-hud-readability { @media (max-width:760px), (pointer:coarse) and (max-height:560px) { body:not(.is-battling) #gameScreen #worldPlayerExpFill { background:#18bcae!important; background-image:none!important; } body:not(.is-battling) #gameScreen #worldPlayerEnergyFill { background:#eeb12d!important; background-image:none!important; } } } @layer hud-v2680 { body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress.is-exp > i > b { background:#36b9d0!important; background-image:none!important; box-shadow:none!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress.is-energy > i > b { background:#f4c33f!important; background-image:none!important; box-shadow:none!important; } #gameScreen[data-hud-design="v2680"] :is(#worldCameraButton,#worldMinimapChannelButton) { padding:6px!important; } #gameScreen[data-hud-design="v2680"] :is(#worldCameraButton,#worldMinimapChannelButton) svg, #gameScreen[data-hud-design="v2680"] .world-minimap-channel-icon, #gameScreen[data-hud-design="v2680"] .world-minimap-channel-icon svg { width:27px!important; height:27px!important; } #gameScreen[data-hud-design="v2680"] :is(#worldCameraButton,#worldMinimapChannelButton) svg { stroke-width:2!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action { width:min(342px,calc(100% - 32px))!important; min-width:0!important; max-width:none!important; min-height:60px!important; height:60px!important; padding:7px 8px!important; gap:9px!important; flex-wrap:nowrap!important; border:1px solid #cfdee7!important; border-radius:16px!important; background:#fbfdff!important; box-shadow:0 5px 16px #102a3a30!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action #actionVisual, body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action #actionVisual img { width:40px!important; height:40px!important; flex-basis:40px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action .interaction-card__copy { min-width:0!important; flex:1 1 auto!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action #actionTarget { overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; color:#193d53!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action #actionMeta, body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action :is(#actionIcon,#actionKey) { display:none!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action .interaction-card__cta { width:auto!important; min-width:100px!important; height:40px!important; min-height:40px!important; flex:0 0 auto!important; justify-content:center!important; padding:0 10px!important; border-radius:10px!important; background:#1788ce!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action #actionLabel { font-size:12px!important; } html[data-game-theme="dark"] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action { border-color:#496b7e!important; background:#173446!important; color:#effaff!important; } html[data-game-theme="dark"] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action #actionTarget { color:#effaff!important; } #app[data-screen="game"] #toast { border:1px solid #c9dce6!important; border-radius:12px!important; background:#fbfdff!important; color:#1b4056!important; box-shadow:0 5px 16px #102a3a2a!important; background-image:none!important; } html[data-game-theme="dark"] #app[data-screen="game"] #toast { border-color:#46677a!important; background:#193748!important; color:#effaff!important; } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action { left:8px!important; right:auto!important; bottom:calc(90px + env(safe-area-inset-bottom))!important; width:min(240px,calc(100% - 92px))!important; max-width:none!important; height:56px!important; min-height:56px!important; padding:6px!important; gap:6px!important; border-radius:14px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action #actionVisual, body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action #actionVisual img { width:36px!important; height:36px!important; flex-basis:36px!important; } body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action .interaction-card__cta { min-width:94px!important; height:40px!important; padding:0 7px!important; } #app[data-screen="game"] #toast { left:50%!important; right:auto!important; bottom:calc(168px + env(safe-area-inset-bottom))!important; width:max-content!important; max-width:calc(100vw - 24px)!important; padding:9px 12px!important; font-size:12px!important; line-height:1.3!important; text-align:center!important; transform:translateX(-50%) translateY(8px)!important; } #app[data-screen="game"] #toast.is-open { transform:translateX(-50%) translateY(0)!important; } #gameScreen:has(#homeWorkshopTools:not([hidden])) #contextAction.is-talk-action { bottom:calc(144px + env(safe-area-inset-bottom))!important; } #app[data-screen="game"]:has(#homeWorkshopTools:not([hidden])) #toast { bottom:calc(218px + env(safe-area-inset-bottom))!important; } } @media (max-height:560px) and (orientation:landscape) { body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction.is-talk-action { width:min(280px,calc(100% - 380px))!important; bottom:calc(88px + env(safe-area-inset-bottom))!important; } #app[data-screen="game"] #toast { left:8px!important; right:auto!important; bottom:calc(16px + env(safe-area-inset-bottom))!important; max-width:min(260px,calc(100vw - 352px))!important; transform:translateY(8px)!important; } #app[data-screen="game"] #toast.is-open { transform:translateY(0)!important; } } } @layer ui-theme { html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch { border-color:#bbd6e4!important; background:#fbfdff!important; background-image:none!important; color:#166488!important; box-shadow:0 3px 10px #102a3a25!important; } html[data-game-theme="dark"] #gameScreen #homeWorkshopTools .home-workshop-launch { border-color:#52748a!important; background:#183a4e!important; color:#e6f6ff!important; } @media (min-width:761px) and (min-height:561px) { html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch { width:62px!important; height:62px!important; padding:6px!important; border-radius:16px!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch img { width:40px!important; height:40px!important; } } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch { width:46px!important; height:46px!important; padding:4px!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch img { width:34px!important; height:34px!important; } } } /* pk-style-source:158 */ /* /world-entry-hints-v1.css */ @layer mobile-window-polish{#app #controlsTutorial{position:absolute!important;inset:auto!important;left:50%!important;top:50%!important;width:min(420px,calc(100% - 32px))!important;height:auto!important;padding:0!important;transform:translate(-50%,-50%)!important;display:none!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;overflow:visible!important;pointer-events:none!important;z-index:320!important}#app #controlsTutorial.is-open{display:block!important}#controlsTutorial .controls-tutorial-card{box-sizing:border-box!important;width:100%!important;max-height:calc(var(--pk-mobile-vv-height,100dvh) - 180px)!important;padding:18px!important;background:var(--ui-paper,#fbfdff)!important;color:var(--ui-ink,#193b50)!important;border-radius:20px!important;backdrop-filter:none!important;overflow:auto!important;pointer-events:auto!important;box-shadow:0 10px 32px #061d3438!important}#controlsTutorial .controls-tutorial-extra span{flex-direction:column!important;gap:5px!important;font-size:11px!important}#controlsTutorial footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}#app #controlsTutorial .controls-tutorial-dismiss{margin:0!important;color:var(--ui-muted,#496577)!important;font-size:11px!important;line-height:1.35!important;text-align:left!important}#app #controlsTutorial #controlsTutorialDone{min-height:44px!important;background:var(--ui-primary,#096caa)!important;color:#fff!important}#app #gameScreen:has(#controlsTutorial.is-open) #testerLauncher{display:none!important}@media(max-width:760px),(pointer:coarse) and (max-height:560px){#app #controlsTutorial{top:calc(var(--pk-mobile-vv-offset-top,0px) + max(160px,26vh))!important;transform:translateX(-50%)!important;width:min(360px,calc(100% - 24px))!important}#controlsTutorial .controls-tutorial-card{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;padding:14px!important;max-height:calc(var(--pk-mobile-vv-height,100dvh) - 344px)!important}#app #controlsTutorial .controls-tutorial-desktop{display:none!important}#controlsTutorial .controls-tutorial-mobile{display:grid!important;gap:8px!important;overflow:auto!important;margin-top:12px!important}#controlsTutorial .controls-tutorial-mobile article{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;padding:8px;border-radius:12px;background:var(--ui-soft,#edf4f8)}#controlsTutorial .controls-tutorial-mobile article img{width:36px!important;height:40px!important;object-fit:contain}#controlsTutorial .controls-tutorial-mobile b{font-size:13px!important;color:var(--ui-ink,#193b50)!important}#controlsTutorial .controls-tutorial-mobile small{display:block!important;font-size:12px!important;line-height:1.4!important;color:var(--ui-muted,#496577)!important;-webkit-line-clamp:unset!important;overflow:visible!important}#controlsTutorial footer{margin-top:10px}}@media(max-height:560px) and (orientation:landscape){#app #controlsTutorial{top:50%!important;transform:translate(-50%,-50%)!important;width:min(420px,calc(100% - 200px))!important}#controlsTutorial .controls-tutorial-card{padding:12px!important;max-height:calc(var(--pk-mobile-vv-height,100dvh) - 120px)!important}#controlsTutorial .controls-tutorial-mobile{margin-top:8px!important}#controlsTutorial footer{margin-top:8px}html[data-mobile-viewport="active"] #gameScreen #movementZone{position:absolute;z-index:8;left:0;bottom:calc(74px + env(safe-area-inset-bottom));display:block!important;width:58%;height:62%;touch-action:none}}@media(max-height:650px) and (orientation:portrait){#controlsTutorial .controls-tutorial-card{position:relative!important}#controlsTutorial .controls-tutorial-mobile{margin-right:100px!important}#controlsTutorial .controls-tutorial-mobile article{display:block;padding:0;background:none}#controlsTutorial .controls-tutorial-mobile :is(img,b),#controlsTutorial .controls-tutorial-mobile article+article,#controlsTutorial .controls-tutorial-dismiss{display:none!important}#controlsTutorial footer{position:absolute;right:14px;bottom:14px;margin:0}}} /* pk-style-source:159 */ /* /home-tester-ui-v1.css */ /* Local home/garden actions remain separate from navigation. */ @layer ui-theme { html[data-game-theme] #gameScreen[data-world-hud="v2340"] #homeWorkshopTools.home-world-tools, html[data-game-theme] #gameScreen[data-world-hud="v2340"]:has(#questWidget:not(.is-collapsed)) #homeWorkshopTools.home-world-tools { position:fixed!important;top:auto!important;transform:none!important;translate:none!important;margin:0!important; left:auto!important;right:16px!important;bottom:220px!important; width:max-content!important;max-width:calc(100% - 24px)!important; padding:0!important;background:transparent!important;box-shadow:none!important; } #gameScreen #homeWorkshopTools[hidden] { display:none!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch { display:flex!important;flex-direction:row!important;align-items:center!important; justify-content:flex-start!important;gap:10px!important;width:auto!important; height:56px!important;min-height:44px!important;padding:8px 14px!important; border:1px solid #bad6e3!important;border-radius:16px!important; background:#fbfdff!important;background-image:none!important;color:#24576c!important; box-shadow:0 3px 10px #102a3a25!important;text-align:left!important; } html[data-game-theme] #gameScreen #homeWorkshopTools[data-area="garden"] .home-workshop-launch { color:#24654a!important;border-color:#add3b9!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch svg { width:30px!important;height:30px!important;flex:none!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-launch-copy { display:grid!important;gap:2px!important;text-align:left!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-launch-copy b { font:700 13px/1.25 'Segoe UI',sans-serif!important;white-space:nowrap!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-launch-copy small { display:block!important;font:400 11px/1.25 'Segoe UI',sans-serif!important;color:#637e8d!important; } html[data-game-theme="dark"] #gameScreen #homeWorkshopTools .home-workshop-launch { background:#183a4e!important;border-color:#52748a!important;color:#e6f6ff!important; } html[data-game-theme="dark"] #gameScreen #homeWorkshopTools[data-area="garden"] .home-workshop-launch { background:#1c4234!important;border-color:#527f65!important;color:#e4f9ec!important; } html[data-game-theme="dark"] #gameScreen #homeWorkshopTools .home-launch-copy small { color:#b7cbd5!important; } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { html[data-game-theme] #gameScreen[data-world-hud="v2340"] #homeWorkshopTools.home-world-tools, html[data-game-theme] #gameScreen[data-world-hud="v2340"]:has(#questWidget:not(.is-collapsed)) #homeWorkshopTools.home-world-tools { right:72px!important;bottom:calc(222px + env(safe-area-inset-bottom))!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch { height:48px!important;padding:7px 10px!important;gap:7px!important;border-radius:14px!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-workshop-launch svg { width:24px!important;height:24px!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-launch-copy b { font-size:11px!important; } html[data-game-theme] #gameScreen #homeWorkshopTools .home-launch-copy small { display:none!important; } } @media (max-height:560px) and (orientation:landscape) { html[data-game-theme] #gameScreen[data-world-hud="v2340"] #homeWorkshopTools.home-world-tools, html[data-game-theme] #gameScreen[data-world-hud="v2340"]:has(#questWidget:not(.is-collapsed)) #homeWorkshopTools.home-world-tools { right:172px!important; } } @media (min-width:801px) and (min-height:701px) and (max-height:820px) { html[data-game-theme] #gameScreen[data-world-hud="v2340"] #homeWorkshopTools.home-world-tools, html[data-game-theme] #gameScreen[data-world-hud="v2340"]:has(#questWidget:not(.is-collapsed)) #homeWorkshopTools.home-world-tools { left:16px!important;right:auto!important;bottom:108px!important; } } @media (min-width:801px) and (min-height:561px) and (max-height:700px) { html[data-game-theme] #gameScreen[data-world-hud="v2340"] #homeWorkshopTools.home-world-tools, html[data-game-theme] #gameScreen[data-world-hud="v2340"]:has(#questWidget:not(.is-collapsed)) #homeWorkshopTools.home-world-tools { left:16px!important;right:auto!important;bottom:108px!important; } } } @layer hud-v2680 { @media (max-width:760px), (pointer:coarse) and (max-height:560px) { #app[data-screen="game"]:has(#homeWorkshopTools:not([hidden])) #toast { bottom:calc(286px + env(safe-area-inset-bottom))!important; } } } /* Pager stays reachable before the cards, including on short screens. */ .animation-lab-pager { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:12px 0;padding:10px 12px;border:1px solid var(--ui-line,#bedbe4);border-radius:14px;background:var(--ui-card,#fff);color:var(--ui-text,#294858); } .animation-lab-pager > span { font-size:12px; } .animation-lab-pager > div { display:flex;align-items:center;flex-wrap:wrap;gap:6px; } .animation-lab-pager button,.animation-lab-load-status button { min-width:44px;min-height:44px;border:1px solid var(--ui-line,#bedbe4);border-radius:10px;background:var(--ui-card,#fff);color:var(--ui-text,#294858);font-weight:700;cursor:pointer; } .animation-lab-pager button:disabled { opacity:.4;cursor:default; } .animation-lab-pager label { display:flex;align-items:center;gap:6px;font-size:12px; } .animation-lab-pager select { max-width:96px;min-height:44px;border:1px solid var(--ui-line,#bedbe4);border-radius:10px;padding:5px;color:inherit;background:var(--ui-card,#fff); } .animation-lab-load-status { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;color:var(--ui-text-muted,#617988);font-size:12px; } .animation-lab-load-status button { padding:5px 12px; } html[data-game-theme="dark"] .animation-lab-pager, html[data-game-theme="dark"] .animation-lab-pager :is(button,select,label,span) { color:#e3f2f7; } html[data-game-theme="dark"] .animation-lab-load-status { color:#b7cdd8; } #gameScreen:has(#sidePanel.is-open) #testerLauncher { display:none!important; } .animation-lab :is(.animation-lab-grid,.animation-lab-card,.animation-lab-card-copy,.animation-lab-search) { min-width:0; } .animation-lab { max-width:100%;overflow-wrap:anywhere; } .animation-lab .animation-lab-hero { margin:0 0 12px!important;border-radius:16px; } .animation-lab-search input { min-width:0; } @media (min-width:801px) { .tester-header[data-panel-drag] { cursor:grab; } .tester-header.is-dragging { cursor:grabbing; } @layer world-hud-compact { body #gameScreen#gameScreen[data-world-hud="v2340"] #sidePanel.is-tester-panel.is-open { width:min(960px,calc(100vw - 48px))!important;max-width:960px!important;height:min(680px,calc(100dvh - 64px))!important; } body #gameScreen#gameScreen[data-world-hud="v2340"] #sidePanel.is-tester-panel.is-open.is-user-positioned { inset:var(--panel-user-top,8px) auto auto var(--panel-user-left,8px)!important; transform:none!important;translate:none!important;margin:0!important; max-width:var(--panel-safe-width,calc(100vw - 16px))!important; max-height:var(--panel-safe-height,calc(100dvh - 16px))!important; transition:none!important; } } } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { .animation-lab-pager { padding:8px; } .animation-lab-pager > div { width:100%;justify-content:space-between; } .animation-lab-pager > span { width:100%; } } /* pk-style-source:160 */ /* /pokedex-polish-v1.css */ /* Calm type studies and a compact partner action, scoped to Pokemon windows. */ #app #sidePanel :is(.ph-hub,.pd-dossier) .pk-type-scene { position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none; background:linear-gradient(135deg,color-mix(in srgb,var(--scene-a) 24%,var(--ui-card,#fff)),color-mix(in srgb,var(--scene-b) 30%,var(--ui-card,#fff))); } #app #sidePanel .pk-type-scene:after {display:none} #app #sidePanel .pk-type-scene .pk-scene-halo {position:absolute;inset:14% 16% 4%;border-radius:50%;background:color-mix(in srgb,var(--ui-card,#fff) 46%,transparent)} #app #sidePanel .pk-type-scene .pk-scene-ring {position:absolute;left:50%;top:51%;width:66%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--scene-a) 38%,transparent);border-radius:50%;transform:translate(-50%,-50%)} #app #sidePanel .pk-type-scene .pk-scene-ring:after {content:"";position:absolute;inset:10px;border:1px dashed color-mix(in srgb,var(--scene-b) 38%,transparent);border-radius:50%;animation:pk-scene-turn 48s linear infinite;animation-play-state:paused} #app #sidePanel .pk-type-scene .pk-scene-motif {position:absolute;width:72px;height:72px;max-width:26%;fill:color-mix(in srgb,currentColor 8%,transparent);opacity:.62;animation:pk-scene-float 9s ease-in-out infinite alternate;animation-play-state:paused} #app #sidePanel .pk-type-scene .pk-scene-motif--primary {left:5%;top:10%;color:color-mix(in srgb,var(--scene-a) 84%,var(--ui-ink,#173650))} #app #sidePanel .pk-type-scene .pk-scene-motif--secondary {right:5%;bottom:10%;color:color-mix(in srgb,var(--scene-b) 84%,var(--ui-ink,#173650));animation-delay:-4s} #app #sidePanel .pk-type-scene .pk-scene-dot {position:absolute;width:6px;height:6px;border-radius:50%;background:var(--scene-a);opacity:.6} #app #sidePanel .pk-type-scene .pk-scene-dot--one {left:17%;bottom:22%} #app #sidePanel .pk-type-scene .pk-scene-dot--two {right:20%;top:18%;background:var(--scene-b);width:4px;height:4px} #app #sidePanel .pk-type-scene .pk-scene-ground {position:absolute;left:24%;right:24%;bottom:10%;height:9%;border-radius:50%;background:color-mix(in srgb,var(--scene-a) 18%,transparent);border:1px solid color-mix(in srgb,var(--scene-b) 18%,transparent)} #app #sidePanel [data-dd-motion=running] .pk-type-scene .pk-scene-motif,#app #sidePanel [data-dd-motion=running] .pk-type-scene .pk-scene-ring:after {animation-play-state:running} @keyframes pk-scene-float {to{transform:translateY(-5px) rotate(4deg)}} @keyframes pk-scene-turn {to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){#app #sidePanel .pk-type-scene .pk-scene-motif,#app #sidePanel .pk-type-scene .pk-scene-ring:after{animation:none!important}} #app #sidePanel .ph-hub .ph-exhibit {margin-top:10px;border-radius:18px;background:var(--ui-soft)!important;box-shadow:none!important} #app #sidePanel .ph-hub .ph-stage {position:relative;z-index:1} #app #sidePanel .ph-hub .ph-stage-platform {display:none} #app #sidePanel .dd-dossier .dd-stage .dd-platform {z-index:1;opacity:.45} #app #sidePanel .dd-dossier .dd-stage .dd-horizon {display:none} #app #sidePanel .dd-dossier .dd-showcase {background:var(--ui-card)!important} #app #sidePanel .dd-dossier :is(.dd-physical,.dd-appearance>div) {background:var(--ui-card)!important;color:var(--ui-ink)!important} #app #sidePanel .ph-hub .ph-partner-actions {justify-content:space-between;gap:8px!important;min-height:50px!important;padding:3px 0!important;border-bottom:1px solid var(--ui-line);margin-bottom:8px!important} #app #sidePanel .ph-hub .ph-partner-actions .ph-button {flex:0 1 auto!important;width:auto!important;min-width:44px;min-height:44px!important;padding:6px 12px!important;font-size:13px!important;font-weight:700;border-radius:10px!important;box-shadow:none!important;background:var(--ui-card)!important;color:var(--ui-accent)!important;white-space:normal;text-align:left;line-height:1.25} #app #sidePanel .ph-hub .ph-partner-actions .ph-button:hover:not(:disabled) {background:var(--ui-hover)!important} #app #sidePanel .ph-hub .ph-partner-actions .ph-button .ph-icon {width:18px;height:18px;flex:0 0 18px} #app #sidePanel .ph-hub .ph-partner-note {font-size:11px;line-height:1.35;color:var(--ui-muted);text-align:right;max-width:125px} #app #sidePanel .ph-hub .ph-lead-state {font-size:13px!important;font-weight:700;min-height:44px;outline-offset:3px} #app #sidePanel .ph-hub .ph-identity-heading h1 {font-size:28px!important;letter-spacing:-.025em!important;font-weight:800;color:var(--ui-ink)!important;line-height:1.2!important} #app #sidePanel :is(.ph-hub,.dd-dossier) :is(.ph-stat-number,.dd-stat-value,.ph-level strong) {font-variant-numeric:tabular-nums;letter-spacing:-.025em} #app #sidePanel .ph-hub .ph-stat-label {font-weight:650;font-size:13px;line-height:1.25} #app #sidePanel .ph-hub .ph-stat-meta {font-size:11px;line-height:1.3} #app #sidePanel .ph-hub .ph-stat-row>strong {font-size:26px;font-weight:800} #app #sidePanel .ph-hub .ph-stat-icon .ph-line {width:26px;height:26px} #app #sidePanel :is(.ph-hub,.dd-dossier) .pokemon-line-icon {color:var(--stat-ink,currentColor)} html[data-game-theme=dark] #app #sidePanel :is(.ph-hub,.dd-dossier) .pokemon-line-icon {color:var(--stat-color,currentColor)} #app #sidePanel .ph-hub .ph-training-toolbar {border-radius:12px!important} #app #sidePanel .ph-hub .ph-train:focus-visible,#app #sidePanel .ph-hub .ph-partner-actions :focus-visible {outline:2px solid var(--ui-focus)!important;outline-offset:2px} @media(max-width:900px),(max-height:650px){ #app #sidePanel .ph-hub .ph-identity-heading h1 {font-size:25px!important} #app #sidePanel .ph-hub .ph-exhibit {margin-top:8px} #app #sidePanel .ph-hub .ph-partner-actions {min-height:50px!important;margin-bottom:6px!important} #app #sidePanel .ph-hub .ph-stat-meta {font-size:11px} #app #sidePanel .ph-hub .ph-stat-row>strong {font-size:24px} } @media(max-width:380px){#app #sidePanel .ph-hub .ph-partner-note{display:none}} /* pk-style-source:161 */ /* /chat-hud-presence-v1.css */ /* One bounded conversation region for messages, directories and their search. */ @layer chat-trainers { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision]:not(.is-minimized) > .chat-messenger-layout { align-self:stretch!important; min-height:0!important; max-height:100%!important; overflow:hidden!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-conversation { grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto minmax(0,1fr) auto auto!important; min-height:0!important; max-height:100%!important; overflow:hidden!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-log-wrap { grid-column:1!important; grid-row:2!important; min-height:0!important; height:auto!important; overflow:hidden!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatLog { box-sizing:border-box!important; min-height:0!important; height:100%!important; max-height:100%!important; overflow-x:hidden!important; overflow-y:auto!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-private-head,.chat-group-head) { grid-column:1!important; grid-row:1!important; min-width:0!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head { grid-template-columns:30px 38px minmax(0,1fr) auto 30px 30px!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head [data-chat-group-create-from-private] {width:auto!important;} @container trainer-chat (max-width:440px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head {grid-template-columns:30px 38px minmax(0,1fr) 30px!important;} } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-private-head,.chat-group-head,#chatForm,.chat-reply-preview)[hidden] {display:none!important;} html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatForm {grid-column:1!important;grid-row:4!important;} html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-reply-preview {grid-column:1!important;grid-row:3!important;} html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-recent-dialogs > article { grid-template-columns:minmax(0,1fr) 36px 36px!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-dialog-clear { display:grid!important;place-items:center!important;width:36px!important;height:36px!important; min-width:0!important;padding:7px!important;margin:0!important; border:0!important;border-radius:9px!important;box-shadow:none!important; background:transparent!important;color:var(--ui-muted,#607c8d)!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-dialog-clear svg {width:20px!important;height:20px!important;} html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-dialog-clear:hover {background:var(--ui-paper,#edf4f7)!important;color:var(--ui-ink,#254655)!important;} html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatHeadSearch { box-sizing:border-box!important;flex:1 1 0!important;min-width:0!important; max-width:100%!important;overflow:hidden!important;border-color:var(--ui-line,#cadbe5)!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatSearchInput { box-sizing:border-box!important;flex:1 1 0!important;width:0!important;min-width:0!important; max-width:100%!important;outline:none!important;outline-offset:0!important;box-shadow:none!important; } /* The caret and field border mark editing; keyboard focus gets a quiet inner line. */ html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatHeadSearch:has(input:focus-visible) {box-shadow:inset 0 -1px var(--ui-muted,#607c8d)!important;} @media(max-width:760px),(pointer:coarse) and (max-height:560px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-recent-dialogs > article {grid-template-columns:minmax(0,1fr) 44px 44px!important;} html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-dialog-clear {width:44px!important;height:44px!important;} html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-searching.is-open:not(.is-minimized) { grid-template-rows:calc(104px + env(safe-area-inset-top,0px)) minmax(0,1fr)!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-searching > .chat-head { display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:44px 44px!important; height:calc(104px + env(safe-area-inset-top,0px))!important;gap:4px!important; padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-searching #chatHeadSearch {grid-row:2!important;grid-column:1!important;min-height:44px!important;} html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-searching .chat-head-actions {grid-row:1!important;grid-column:1!important;justify-self:end!important;margin:0!important;} html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-searching [data-chat-search-toggle] {display:none!important;} } } /* Theme focus rules have earlier important-layer priority than chat styling. */ @layer ui-theme { html[data-game-theme] #gameScreen #chatPanel #chatSearchInput:is(:focus,:focus-visible) {outline:none!important;outline-offset:0!important;box-shadow:none!important;} } /* Desktop uses its own scale. The phone resource artwork/layout stays exact. */ @layer player-hud-readability { @media(min-width:761px) and (pointer:fine),(min-width:761px) and (min-height:561px) { body:not(.is-battling) #gameScreen { --compact-profile-width:clamp(348px,28vw,420px)!important; --player-hud-height:104px; } body:not(.is-battling) #gameScreen:has(#worldPlayerStaminaMiniRow:not([hidden])) {--player-hud-height:130px;} body:not(.is-battling) #gameScreen #playerProfileButton { width:var(--compact-profile-width)!important;height:var(--player-hud-height)!important; min-height:var(--player-hud-height)!important; grid-template-columns:clamp(76px,6vw,90px) minmax(0,1fr)!important;gap:12px!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-avatar {width:clamp(76px,6vw,90px)!important;height:clamp(76px,6vw,90px)!important;} body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-copy {grid-template-rows:28px 26px 26px!important;gap:3px!important;} body:not(.is-battling) #gameScreen #playerProfileButton:has(#worldPlayerStaminaMiniRow:not([hidden])) .player-chip-copy {grid-template-rows:28px repeat(3,26px)!important;} body:not(.is-battling) #gameScreen #worldPlayerName {font-size:clamp(22px,1.75vw,26px)!important;} body:not(.is-battling) #gameScreen #worldPlayerLevel {font-size:14px!important;font-weight:750!important;display:inline-flex!important;align-items:center!important;gap:4px!important;} body:not(.is-battling) #gameScreen #worldPlayerLevel::before { content:''!important;display:block!important;width:18px!important;height:20px!important; margin:0!important;flex:none!important; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20 6.5v9L12 22l-8-6.5v-9Z' fill='%23142f40' stroke='%23a6dfeb' stroke-width='1.5'/%3E%3Cpath d='m8 12 4-4 4 4m-8 4 4-4 4 4' stroke='%23f5fcff' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat!important; } body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress {height:26px!important;min-height:26px!important;grid-template-columns:24px minmax(32px,1fr) auto!important;gap:7px!important;} body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress>em {font-size:14px!important;} body:not(.is-battling) #gameScreen #playerProfileButton #worldPlayerExpRow>small {position:relative!important;} body:not(.is-battling) #gameScreen #worldPlayerExpRow>small img {visibility:hidden!important;} body:not(.is-battling) #gameScreen #worldPlayerExpRow>small::before { content:'';position:absolute;inset:0;width:24px;height:24px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linejoin='round'%3E%3Cpath d='m12 2.5 3.1 6.4 6.4 3.1-6.4 3.1-3.1 6.4-3.1-6.4-6.4-3.1 6.4-3.1Z' fill='%23142f40' stroke='%235ee6d2' stroke-width='1.6'/%3E%3Cpath d='m12 7 1.7 3.3L17 12l-3.3 1.7L12 17l-1.7-3.3L7 12l3.3-1.7Z' fill='%23ecfff9'/%3E%3C/svg%3E") center/contain no-repeat; } } @media(min-width:761px) and (max-width:1150px) and (pointer:fine),(min-width:761px) and (max-width:1150px) and (min-height:561px) { body:not(.is-battling) #gameScreen {--compact-profile-width:320px!important;} body:not(.is-battling) #gameScreen #playerProfileButton {grid-template-columns:72px minmax(0,1fr)!important;gap:9px!important;} body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-avatar {width:72px!important;height:72px!important;} body:not(.is-battling) #gameScreen #worldPlayerName {font-size:20px!important;} body:not(.is-battling) #gameScreen #worldPlayerLevel {font-size:13px!important;} body:not(.is-battling) #gameScreen #playerProfileButton .player-chip-progress>em {font-size:13px!important;} } } @layer chat-trainers { @media (max-width: 760px), (pointer: coarse) and (max-height: 560px) { html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(.chat-messenger-layout, .chat-conversation, .chat-log-wrap) { overflow: clip !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head { grid-template-columns: 58px 36px minmax(0, 1fr) auto 44px 44px !important; align-items: center !important; gap: 4px !important; min-height: 54px !important; padding: 4px 8px !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is([data-chat-private-back], [data-chat-group-back]) { min-width: 58px !important; min-height: 44px !important; padding: 0 6px !important; border: 1px solid var(--ui-line, #d3dee8) !important; border-radius: 9px !important; background: var(--ui-soft, #edf3f8) !important; color: var(--ui-ink, #23384a) !important; font-size: 0 !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] [data-chat-private-back] svg { display: none; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is([data-chat-private-back], [data-chat-group-back])::after { content: 'Назад'; font: 650 12px/1.25 system-ui, sans-serif; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head :is([data-chat-private-pin], [data-chat-private-profile], [data-chat-group-create-from-private]) { min-width: 44px !important; min-height: 44px !important; border-radius: 9px !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head > span:has(#chatPrivateName) { overflow: hidden; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] :is(#chatPrivateName, #chatPrivateStatus) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatPrivateAvatar { width: 36px !important; height: 36px !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-group-head { flex-wrap: nowrap !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-people-open .chat-conversation { visibility: hidden; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision].is-people-open .chat-online-sidebar { display: grid !important; grid-template-rows: auto minmax(0, 1fr); inset: 0 !important; width: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-online-sidebar > header { border-block-end: 1px solid var(--ui-line, #d3dee8); } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-message-reply-ref { border: 1px solid var(--ui-line, #d3dee8); border-inline-start: 3px solid var(--ui-accent, #1768c5); border-radius: 8px; text-align: start; } } @media (max-width: 440px) { html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head { grid-template-columns: 58px 44px minmax(0, 1fr) !important; } html .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] [data-chat-group-create-from-private] { justify-self: start; padding-inline: 12px !important; } html[data-mobile-keyboard="open"] .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head { grid-template-columns: 58px minmax(0, 1fr) auto 44px 44px !important; } html[data-mobile-keyboard="open"] .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] #chatPrivateAvatar { display: none !important; } html[data-mobile-keyboard="open"] .game-screen.is-chat-fullscreen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-private-head :is([data-chat-group-create-from-private], [data-chat-private-pin], [data-chat-private-profile]) { grid-area: auto !important; padding-inline: 6px !important; } } } @layer ui-theme { html[data-game-theme="dark"] #gameScreen.is-chat-fullscreen #chatPanel > .chat-messenger-layout { --ui-paper: var(--pp-dark-surface-0, #1b1b1d); --ui-card: var(--pp-dark-surface-1, #242426); --ui-soft: var(--pp-dark-surface-2, #303033); --ui-hover: var(--ui-soft); --ui-ink: var(--pp-dark-text, #f2f1f3); --ui-muted: var(--pp-dark-text-muted, #c1c0c6); --ui-line: var(--pp-dark-border, #4b4b50); --ui-accent: var(--pp-dark-accent, #c7b8ff); --ui-focus: var(--pp-dark-focus, #c7b8ff); --ui-primary: var(--pp-dark-action, #d8ccff); --ui-on-accent: var(--pp-dark-on-action, #272230); --ui-positive: var(--pp-dark-success, #a9d9b3); --chat75-ink: var(--ui-ink); --chat75-copy: var(--ui-ink); --chat75-muted: var(--ui-muted); --chat75-line: var(--ui-line); --chat75-card: var(--ui-card); --chat75-soft: var(--ui-soft); --chat75-hover: var(--ui-hover); --chat75-panel: var(--ui-paper); color: var(--ui-ink); background: var(--ui-paper) !important; } html[data-game-theme="dark"] #gameScreen.is-chat-fullscreen #chatPanel :is(.chat-log-wrap, #chatLog, .chat-private-head, .chat-group-head, .chat-online-sidebar) { background: var(--ui-paper) !important; border-color: var(--ui-line) !important; } html[data-game-theme="dark"] #gameScreen.is-chat-fullscreen #chatPanel .chat-message:not(.is-notice) { background: var(--ui-card) !important; border-color: var(--ui-line) !important; } html[data-game-theme="dark"] #gameScreen.is-chat-fullscreen #chatPanel .chat-message.is-self:not(.is-notice) { background: var(--ui-soft) !important; } html[data-game-theme="dark"] #gameScreen.is-chat-fullscreen #chatPanel #chatForm .chat-send-button { background: var(--ui-primary) !important; color: var(--ui-on-accent) !important; } html[data-game-theme="dark"] #gameScreen.is-chat-fullscreen #chatPanel .chat-group-head :is([data-chat-group-invite], [data-chat-group-leave]) { color: var(--ui-accent) !important; } html[data-game-theme="dark"] #gameScreen.is-chat-fullscreen #chatPanel .chat-online-sidebar > header small { color: var(--ui-positive) !important; } } @layer ui-theme { html[data-game-theme="light"] #gameScreen.is-chat-fullscreen #chatPanel > .chat-messenger-layout { --ui-paper: #edf4f7; --ui-card: #fff; --ui-soft: #dceefb; --ui-line: #bfd3df; --ui-ink: #193348; --ui-muted: #4b6376; --ui-accent: #15598a; --chat75-ink: var(--ui-ink); --chat75-copy: var(--ui-ink); --chat75-muted: var(--ui-muted); --chat75-line: var(--ui-line); --chat75-panel: var(--ui-paper); } html[data-game-theme="light"] #gameScreen.is-chat-fullscreen #chatPanel :is(#chatLog, .chat-log-wrap, .chat-private-head, .chat-group-head, .chat-online-sidebar) { background: var(--ui-paper) !important; border-color: var(--ui-line) !important; } html[data-game-theme="light"] #gameScreen.is-chat-fullscreen #chatPanel #chatForm .chat-send-button { background: #1b638e !important; color: #fff !important; } html[data-game-theme] #gameScreen.is-chat-fullscreen #chatPanel .chat-conversation:has(:is(#chatPrivateHead, #chatGroupHead):not([hidden])) .chat-message:not(.is-notice) { --chat-bubble-inset: clamp(24px, 8vw, 32px); box-sizing: border-box; display: grid !important; grid-template-columns: 36px minmax(0, 1fr) 44px !important; inline-size: min(calc(100% - var(--chat-bubble-inset)), 620px) !important; max-inline-size: 100% !important; margin-inline: 0 auto !important; padding: 8px !important; gap: 0 8px !important; border: 1px solid var(--ui-line, #bfd3df) !important; border-radius: 15px 15px 15px 5px !important; background: var(--ui-card, #fff) !important; } html[data-game-theme] #gameScreen.is-chat-fullscreen #chatPanel .chat-conversation:has(:is(#chatPrivateHead, #chatGroupHead):not([hidden])) .chat-message.is-self:not(.is-notice) { margin-inline: auto 0 !important; border-radius: 15px 15px 5px 15px !important; background: var(--ui-soft, #dceefb) !important; } html[data-game-theme] #gameScreen.is-chat-fullscreen #chatPanel .chat-conversation:has(:is(#chatPrivateHead, #chatGroupHead):not([hidden])) .chat-message:not(.is-notice) .chat-message-more { position: static !important; grid-area: 1 / 3 !important; align-self: start; min-width: 44px !important; min-height: 44px !important; margin: 0 !important; } } @layer ui-theme { @media (min-width: 561px) and (max-height: 560px) and (orientation: landscape) and (pointer: coarse) { html[data-mobile-keyboard="open"] #gameScreen.is-chat-fullscreen #chatPanel.is-open:not(.is-minimized, .is-searching) { container-type:size !important; grid-template-rows:auto minmax(0, 1fr) !important; } @container trainer-chat (max-height: 220px) { html[data-mobile-keyboard="open"] #gameScreen.is-chat-fullscreen #chatPanel:not(.is-searching) > .chat-head { height:auto !important; min-height:calc(44px + env(safe-area-inset-top, 0px)) !important; padding-block:env(safe-area-inset-top, 0px) 0 !important; } html[data-mobile-keyboard="open"] #gameScreen.is-chat-fullscreen #chatPanel:not(.is-searching) :is(.chat-private-head, .chat-group-head) { min-height:44px !important; padding-block:0 !important; } html[data-mobile-keyboard="open"] #gameScreen.is-chat-fullscreen #chatPanel:not(.is-searching) #chatForm { grid-template-columns:44px minmax(0, 1fr) auto 44px !important; grid-template-rows:44px !important; align-items:center !important; gap:0 6px !important; margin:0 !important; padding-block:0 !important; min-height:0 !important; } html[data-mobile-keyboard="open"] #gameScreen.is-chat-fullscreen #chatPanel:not(.is-searching) #chatInput { min-height:44px !important; max-height:44px !important; padding-block:8px !important; } html[data-mobile-keyboard="open"] #gameScreen.is-chat-fullscreen #chatPanel:not(.is-searching) #chatForm .chat-send-button { grid-area:1 / 4 !important; } html[data-mobile-keyboard="open"] #gameScreen.is-chat-fullscreen #chatPanel:not(.is-searching) #chatCooldown { grid-area:1 / 3 !important; max-inline-size:min(220px, 27cqw); min-inline-size:0; margin:0; white-space:normal; overflow-wrap:anywhere; } html[data-mobile-keyboard="open"] #gameScreen.is-chat-fullscreen #chatPanel:not(.is-searching) #chatLog { padding-block:2px !important; } } } } @layer ui-theme{ .is-chat-fullscreen #chatPokemonSuggest{grid-area:2/1/3/2;inset:0 7px!important;max-height:none!important} @container trainer-chat (height<221px){ #chatPokemonSuggest{grid-template-rows:1fr!important; &>header{display:none!important} & [role]{padding-block:0!important} & [role=option]{min-height:44px!important} }}} @layer mobile-phone-patch{ @container trainer-chat (height<221px){ #chatPanel.is-open:has(#chatPokemonSuggest:not([hidden])) { &>.chat-head{min-height:44px!important;padding-block:env(safe-area-inset-top,0px) 0!important} & #chatForm{padding-block:0!important} } } } /* pk-style-source:162 */ /* /garden-polish-v1.css */ /* Garden artwork has one floor anchor in the world and overview. */ @layer ui-theme {html[data-game-theme] .pp-home.is-workshop.is-garden-appearance{width:min(400px,calc(100dvw - 24px))!important;max-height:min(620px,calc(100dvh - 110px))!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .garden-appearance-preview{aspect-ratio:2.7/1!important}html[data-game-theme] .pp-home.is-garden-context .garden-water-art{height:82px!important}.pp-home.is-garden-context .garden-pump-upgrades{font-size:12px}.pp-home.is-garden-context .garden-pump-upgrades summary{min-height:30px;cursor:pointer}} @layer ui-theme {html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-scene-choices .home-scene-options>button{height:auto!important;max-height:none!important;overflow:hidden!important;grid-template-columns:1fr!important;grid-template-rows:50px auto!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-scene-choices .home-skin-preview{position:relative!important;display:block!important;height:50px!important;max-height:50px!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-scene-choices .home-skin-preview img{position:static!important;inset:auto!important;width:100%!important;height:50px!important;display:block!important;transform:none!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-scene-choices .home-skin-copy{position:static!important;z-index:1!important;display:grid!important;min-height:30px!important}} .garden-growth-card{border:1px solid var(--ui-line);border-radius:16px;padding:12px;background:var(--ui-card);color:var(--ui-text);display:grid;gap:10px} .garden-growth-head{display:flex;align-items:center;gap:12px}.garden-growth-head>div{display:grid;gap:3px;min-width:0}.garden-growth-head small,.garden-growth-head [data-growth]{font-size:12px;line-height:1.45} .garden-growth-ring,.pp-home .garden-plot-v1 .garden-plot-ring{--growth:0;display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;background:conic-gradient(#43a67b calc(var(--growth)*1turn),var(--ui-line,#dbe7df) 0);position:relative} .garden-growth-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--ui-card,#fffdf5)}.garden-growth-ring>b{position:relative;font-size:15px;color:var(--ui-text)} .garden-growth-stages{display:flex;gap:5px;list-style:none;margin:0;padding:0}.garden-growth-stages>li{flex:1;min-width:0;display:grid;place-items:center;border-bottom:3px solid var(--ui-line);opacity:.5;padding-bottom:4px}.garden-growth-stages>li.is-grown{border-color:#43a67b;opacity:1}.garden-growth-stages img{width:100%;height:48px;object-fit:contain}.garden-growth-stages span{font-size:10px}.garden-growth-card [data-garden-moisture]{margin:0;font-size:11px;line-height:1.5} .pp-home .garden-water-card{display:grid;gap:8px;text-align:center}.garden-water-art{height:108px}.garden-water-art>img{height:100%;width:100%;object-fit:contain}.garden-water-card p{margin:0;font-size:12px}.garden-water-card small{font-size:11px;color:var(--ui-muted)} .garden-water-summary{display:flex;gap:8px;align-items:center;padding:10px;border:1px solid var(--ui-line);border-radius:12px}.garden-water-summary>img{width:40px;height:40px;object-fit:contain}.garden-water-summary>span{display:grid;gap:3px;min-width:0}.garden-water-summary small{font-size:10px;line-height:1.4}.garden-water-summary>button{margin-left:auto;flex:none} .garden-seed-preview{display:flex;align-items:center;gap:10px;font-size:12px}.garden-seed-preview>img{width:72px;height:72px;object-fit:contain} .pp-home.is-workshop .garden-plot-v1{width:9.6875%;height:10.278%;min-width:0;min-height:0;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible} .pp-home.is-workshop .garden-plot-v1 .garden-bed-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:1} .pp-home.is-workshop .garden-plot-v1 .garden-bed-layout{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:auto;aspect-ratio:124/74;background:transparent;border:0;border-radius:0;box-shadow:none;pointer-events:none} .pp-home.is-workshop .garden-plot-v1 .garden-plant-art{position:absolute;left:11.3%;top:-61.5%;width:77.4%;height:129.73%;object-fit:contain;max-width:none;max-height:none} .pp-home.is-workshop .garden-plot-v1.is-locked .garden-bed-art{opacity:.45}.pp-home.is-workshop .garden-plot-v1.is-selected{outline:2px solid #f4d36a;outline-offset:1px;border-radius:5px} .pp-home.is-workshop .garden-plot-v1 .home-plot-number{left:2px;top:2px;right:auto;width:17px;height:17px;border-radius:50%;font-size:9px;z-index:2;background:var(--ui-card);color:var(--ui-text)} .pp-home.is-workshop .garden-plot-v1 small{position:absolute;left:50%;top:calc(100% + 2px);transform:translateX(-50%);font-size:9px;line-height:1.1;padding:3px 5px;border-radius:5px;background:var(--ui-card);color:var(--ui-text);z-index:3;white-space:nowrap} .pp-home .garden-plot-v1 .garden-plot-ring{position:absolute;right:1px;bottom:1px;width:15px;height:15px;z-index:2}.pp-home .garden-plot-v1 .garden-plot-ring::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ui-card,#fff)}.pp-home .garden-plot-v1 .garden-plot-ring[data-paused=true]{background:conic-gradient(#dba657 calc(var(--growth)*1turn),#dce1db 0)} .garden-care-process{display:grid;gap:8px;justify-items:stretch;padding:12px;border:1px solid #6cbab4;border-radius:14px;background:var(--ui-card);color:var(--ui-text);text-align:center;position:relative}.garden-care-art{width:120px;height:88px;object-fit:contain;justify-self:center;animation:garden-water-tilt 700ms ease-in-out 6 alternate}.garden-care-gauge{height:10px;overflow:hidden;border-radius:8px;background:var(--ui-line)}.garden-care-fill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#55c3d0,#4a9fd1);transform-origin:left;animation:garden-care-fill var(--care-duration) linear var(--care-delay) both}.garden-care-process small{font-size:12px}.garden-care-process button{min-height:44px} .pp-home.is-garden-caring .home-world-interaction>:not(.garden-care-process),.pp-home.is-garden-caring .garden-care>:not(.garden-care-process){display:none!important} .pp-home.is-workshop .is-garden .workshop-scene-frame{background:#152c20 url('/assets/garden-polish-v1/grass.webp') center/420px}.pp-home.is-workshop .garden-scene-viewport .home-garden{box-shadow:0 0 32px 12px #08190f} @keyframes garden-care-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes garden-water-tilt{from{transform:rotate(-3deg) translateY(0)}to{transform:rotate(3deg) translateY(-2px)}} @media(prefers-reduced-motion:reduce){.garden-care-art{animation:none}.garden-care-fill{background:#55b8c8}} @layer ui-theme { html[data-game-theme] .pp-home.is-workshop .home-plot.garden-plot-v1{background:transparent!important;border:0!important;box-shadow:none!important} html[data-game-theme] .pp-home.is-workshop .garden-plot-v1 .garden-bed-layout{background:transparent!important;border:0!important;box-shadow:none!important} html[data-game-theme] .pp-home.is-workshop .garden-plot-v1 .garden-plot-ring{background:conic-gradient(#43a67b calc(var(--growth)*1turn),var(--ui-line,#dbe7df) 0)!important;border:0!important;box-shadow:none!important} html[data-game-theme] .pp-home.is-workshop .garden-plot-v1 .garden-plot-ring[data-paused=true]{background:conic-gradient(#dba657 calc(var(--growth)*1turn),var(--ui-line,#dbe7df) 0)!important} html[data-game-theme] .pp-home.is-world-interaction.is-garden-context{width:min(340px,calc(100dvw - 24px))!important;max-width:340px!important;height:max-content!important;min-height:0!important;max-height:calc(100dvh - 24px)!important;padding:0!important;overflow:auto!important;border-radius:20px!important;background:var(--ui-card)!important;color:var(--ui-text)!important;inset:var(--garden-context-top,12px) auto auto var(--garden-context-left,12px)!important;margin:0!important} html[data-game-theme] .pp-home.is-world-interaction.is-garden-context::backdrop{background:#041b0c30!important;backdrop-filter:none!important} .pp-home.is-garden-context .home-header{padding:12px 14px!important;min-height:52px}.pp-home.is-garden-context .home-header h2{font-size:17px!important}.pp-home.is-garden-context .home-header>button{min-height:44px!important;min-width:44px!important} .pp-home.is-garden-context .home-world-interaction{padding:12px 14px!important;display:grid!important;gap:9px!important;max-height:none!important}.pp-home.is-garden-context .home-feature-art{height:82px!important;max-height:82px!important;width:100%!important;object-fit:contain!important} .pp-home.is-garden-context .home-footer{padding:8px 14px!important;font-size:11px!important;min-height:0!important}.pp-home.is-garden-context .home-world-interaction>button{min-height:44px!important;margin:0!important}.pp-home.is-garden-context .home-world-interaction>label{display:grid;gap:5px;font-size:12px}.pp-home.is-garden-context select{width:100%!important;min-height:44px!important} } @layer ui-theme { html[data-game-theme] .pp-home.is-workshop.is-garden-appearance{width:min(440px,calc(100dvw - 24px))!important;max-width:440px!important;height:auto!important;max-height:calc(100dvh - 110px)!important;min-height:0!important;inset:auto 18px 88px auto!important;margin:0!important;padding:0!important;border-radius:22px!important;background:var(--ui-card)!important;color:var(--ui-text)!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;overflow:hidden!important;box-shadow:0 18px 65px #09271840!important} html[data-game-theme] .pp-home.is-workshop.is-garden-appearance::backdrop{background:#08271526!important;backdrop-filter:none!important} html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-header{padding:12px 14px!important;min-height:60px!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-header small{font-size:9px;letter-spacing:.13em;color:var(--ui-muted)}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance h2{font-size:19px!important;margin:3px 0 0!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-header>button{width:44px!important;height:44px!important;padding:10px!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-header svg{width:22px;height:22px} .garden-appearance-content{padding:12px 14px;overflow:auto;overscroll-behavior:contain;min-height:0;display:grid;gap:12px}.garden-appearance-preview{margin:0;position:relative;aspect-ratio:2/1;overflow:hidden;border-radius:14px;background:#365c41}.garden-appearance-preview .home-background{position:static!important;inset:auto!important;display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}.garden-appearance-preview figcaption{position:absolute;left:10px;bottom:10px;background:#113124d9;color:#fff;padding:5px 9px;border-radius:8px;font-size:12px} html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-scene-choices{margin:0!important;padding:0!important;border:0!important;background:transparent!important;display:grid!important;gap:10px!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-scene-choices>b,html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-scene-choices>p{display:none!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-scene-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;max-height:none!important;overflow:visible!important} html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-scene-options>button{min-width:0!important;width:auto!important;padding:5px!important;display:grid!important;gap:4px!important;background:var(--ui-soft)!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;text-align:left!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-scene-options>button[aria-pressed=true]{border-color:#46a384!important;box-shadow:0 0 0 1px #46a384!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-skin-preview{width:100%!important;height:50px!important;aspect-ratio:auto!important;border-radius:8px;overflow:hidden}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-skin-preview img{width:100%!important;height:100%!important;object-fit:cover!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-skin-copy{min-width:0!important;display:grid!important;gap:3px!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-skin-copy b{font-size:10px!important;white-space:normal!important;line-height:1.25!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-skin-copy small{font-size:9px!important;line-height:1.3!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-skin-copy img{width:12px;height:12px;object-fit:contain} html[data-game-theme] .pp-home.is-workshop.is-garden-appearance [data-garden-skin]{display:none!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance [data-home-scene-action]{width:100%!important;min-height:44px!important;background:#328567!important;color:white!important;border:0!important;border-radius:12px!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance [data-home-scene-action]:disabled{opacity:.55!important}.garden-appearance-hint{font-size:11px;line-height:1.5;color:var(--ui-muted);margin:0}.garden-expansion{font-size:12px;padding-top:8px;border-top:1px solid var(--ui-line)}.garden-expansion summary{min-height:32px;cursor:pointer}.garden-expansion button{min-height:44px}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-footer{padding:8px 14px!important;min-height:0!important;font-size:11px!important} .garden-crop-portrait{display:flex;align-items:center;gap:12px;min-height:76px}.garden-crop-portrait img{width:84px;height:76px;object-fit:contain}.garden-crop-portrait>div{display:grid;gap:5px}.garden-crop-portrait small{font-size:11px;color:var(--ui-muted)}.garden-harvest-card{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;padding:12px;border:1px solid #55a68a;border-radius:14px;background:var(--ui-soft)}.garden-harvest-card>img{width:48px;height:48px;object-fit:contain}.garden-harvest-card>span{display:grid;gap:4px}.garden-harvest-card small{font-size:11px;color:var(--ui-muted)}.garden-harvest-card button{grid-column:1/-1;min-height:48px!important;background:#328567!important;color:#fff!important;border:0!important;font-weight:700}.garden-harvest-card .home-action-hint{grid-column:1/-1}.garden-plot-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.garden-plot-actions button{min-height:44px;font-size:12px}.garden-plot-actions .home-action-hint{display:none}.pp-home.is-garden-context .garden-growth-stages{display:none!important}.pp-home.is-garden-context .garden-growth-ring{width:42px;height:42px}.pp-home.is-garden-context .garden-growth-card{padding:10px!important;gap:6px!important}.pp-home.is-garden-context .garden-growth-ring b{font-size:12px} @media(max-width:759px){html[data-game-theme] .pp-home.is-workshop.is-garden-appearance{inset:auto 12px 12px auto!important;max-height:calc(100dvh - 24px)!important}} @media(max-height:520px){html[data-game-theme] .pp-home.is-workshop.is-garden-appearance{inset:12px 12px auto auto!important;max-height:calc(100dvh - 24px)!important}.garden-appearance-preview{display:none}.garden-appearance-content{gap:8px}} } @layer ui-theme {html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-scene-choices{position:static!important;inset:auto!important;transform:none!important;width:auto!important;height:auto!important;max-height:none!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-header{display:grid!important;grid-template-columns:1fr 44px!important;gap:10px!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-skin-preview{position:static!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .home-skin-copy small{display:flex!important;flex-wrap:wrap;align-items:center;gap:3px}} @layer ui-theme {html[data-game-theme] .pp-home.is-workshop.is-garden-appearance{width:min(400px,calc(100dvw - 24px))!important;max-height:min(620px,calc(100dvh - 110px))!important}html[data-game-theme] .pp-home.is-workshop.is-garden-appearance .garden-appearance-preview{aspect-ratio:2.7/1!important}html[data-game-theme] .pp-home.is-garden-context .garden-water-art{height:82px!important}@media(max-width:759px){html[data-game-theme] .pp-home.is-workshop.is-garden-appearance{max-height:min(620px,calc(100dvh - 24px))!important}}@media(max-height:520px){html[data-game-theme] .pp-home.is-workshop.is-garden-appearance{max-height:calc(100dvh - 24px)!important}}} @layer ui-theme {html[data-game-theme] .pp-home.is-workshop.is-garden-appearance:not([open]){display:none!important}@media(max-width:759px){html[data-game-theme] #gameScreen #homeWorkshopTools[data-area="garden"] .home-workshop-launch{min-width:44px!important;width:44px!important;height:44px!important;min-height:44px!important;padding:10px!important;border-radius:14px!important}html[data-game-theme] #gameScreen #homeWorkshopTools[data-area="garden"] .home-launch-copy{display:none!important}}} /* Farm v3: compact native garden actions, scoped to this location. */ @layer ui-theme {html[data-game-theme] #contextAction.is-farm-action #actionVisual,html[data-game-theme] #contextAction.is-farm-action #actionMeta,html[data-game-theme] #contextAction.is-farm-action #actionTarget{display:none!important}html[data-game-theme] #contextAction.is-farm-action{width:auto!important;min-width:0!important;padding:7px!important;gap:0!important}html[data-game-theme] #contextAction.is-farm-action .interaction-card__copy{display:none!important}html[data-game-theme] #contextAction.is-farm-action .interaction-card__cta{min-height:44px!important;border-radius:12px!important}html[data-game-theme] .pp-home.is-garden-context .home-header{padding:12px 16px!important}html[data-game-theme] .pp-home.is-garden-context .home-header h2{font-size:18px!important}html[data-game-theme] .pp-home.is-garden-context [data-home-close]{width:44px!important;height:44px!important;min-height:44px!important;border-radius:50%!important}html[data-game-theme] .pp-home.is-garden-context .home-footer:not(:has([data-home-status]:not(:empty))){display:none!important}.garden-expansion-card{display:grid;gap:12px;text-align:center;padding:10px 0}.garden-expansion-card>svg{width:56px;height:56px;color:#6c9469;justify-self:center}.garden-expansion-card>b{font-size:19px;color:var(--ui-text)}.garden-expansion-card>p{margin:0;color:var(--ui-muted);font-size:12px;line-height:1.5}.garden-expansion-steps{display:flex;justify-content:center;gap:6px}.garden-expansion-steps span{border:1px solid var(--ui-line);border-radius:20px;padding:4px 8px;color:var(--ui-muted);font-size:11px}.garden-expansion-steps [aria-current=step]{background:#328567;color:white;border-color:#328567}.garden-expansion-card button{min-height:46px;background:#328567!important;color:white!important;font-weight:700!important} } @layer ui-theme {html[data-game-theme] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction.is-farm-action #actionVisual{display:grid!important;width:24px!important;height:24px!important;min-width:24px!important;margin-inline:4px 8px!important;background:none!important;border:0!important}} /* One shared farm: a compact practical panel, scoped to the garden. */ @layer ui-theme { .garden-one-overview{display:grid;gap:12px}.garden-one-overview>img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px}.garden-one-summary{display:flex;justify-content:space-between;gap:12px;color:var(--ui-muted);font-size:12px}.garden-one-summary b{font-size:16px;color:var(--ui-text)}.garden-one-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.garden-one-actions button{min-height:44px!important;background:var(--ui-soft)!important;color:var(--ui-text)!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;font-weight:650!important}.garden-one-actions [data-garden-next-approach]{grid-column:1/-1;background:#328567!important;color:#fff!important;border:0!important}@media(max-height:520px){.garden-one-overview>img{display:none}} } /* Garden actions use the ordinary bottom dock; a home window owns its actions. */ @layer ui-theme { html[data-game-theme] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"]:has(.pp-home[open]) #contextAction#contextAction{display:none!important;visibility:hidden!important;pointer-events:none!important} html[data-game-theme] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction.is-simple-garden{left:50%!important;top:auto!important;right:auto!important;transform:translateX(-50%)!important;transition:none!important;width:max-content!important;min-width:0!important;max-width:calc(100dvw - 24px)!important;height:auto!important;min-height:52px!important;padding:9px 12px!important;gap:10px!important;border:1px solid var(--ui-line)!important;background:var(--ui-card)!important;color:var(--ui-text)!important;box-shadow:0 4px 14px #173a2426!important;border-radius:16px!important;visibility:visible!important;pointer-events:auto!important} html[data-game-theme] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction.is-simple-garden #actionVisual{display:grid!important;place-items:center!important;width:26px!important;height:26px!important;min-width:26px!important;margin:0!important;background:none!important;border:0!important;color:#278368!important} html[data-game-theme] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction.is-simple-garden #actionVisual svg{width:26px!important;height:26px!important} html[data-game-theme] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction.is-simple-garden .interaction-card__copy{display:none!important} html[data-game-theme] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction.is-simple-garden .interaction-card__cta{display:flex!important;align-items:center!important;gap:9px!important;width:auto!important;height:auto!important;min-height:30px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:inherit!important;box-shadow:none!important} html[data-game-theme] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction.is-simple-garden #actionKey{display:grid!important;place-items:center!important;width:28px!important;min-width:28px!important;height:30px!important;margin:0!important;padding:0!important;border:1px solid var(--ui-line)!important;border-radius:8px!important;background:var(--ui-soft)!important;color:var(--ui-text)!important;font:700 12px/1 system-ui!important;box-shadow:none!important} html[data-game-theme] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction.is-simple-garden #actionLabel{display:block!important;margin:0!important;font-size:14px!important;font-weight:650!important;line-height:1.3!important;color:var(--ui-text)!important;white-space:nowrap!important} html[data-game-theme] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #contextAction#contextAction.is-simple-garden.is-garden-busy{border-color:#5fac95!important} .garden-seed-heading{margin:0;font-size:12px;color:var(--ui-muted)} .pp-home.is-garden-context .garden-seed-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:210px;overflow:auto;overscroll-behavior:contain;padding:2px} .pp-home.is-garden-context .garden-seed-choices>button{display:grid!important;grid-template-columns:1fr auto!important;gap:3px!important;align-items:center!important;min-width:0!important;min-height:82px!important;padding:7px!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;background:var(--ui-soft)!important;color:var(--ui-text)!important;text-align:left!important;position:relative!important} .pp-home.is-garden-context .garden-seed-choices>button[aria-pressed=true]{border-color:#328567!important;box-shadow:0 0 0 1px #328567!important} .pp-home.is-garden-context .garden-seed-choices>button:disabled{opacity:.45!important} .garden-seed-choices img{width:42px;height:42px;object-fit:contain;grid-column:1/-1;justify-self:center}.garden-seed-choices span{grid-column:1/-1;text-align:center;font-size:10px;line-height:1.25;overflow-wrap:anywhere}.garden-seed-choices small{position:absolute;right:5px;top:5px;padding:2px 4px;border-radius:6px;background:var(--ui-card);font-size:10px;font-weight:700}.garden-seed-summary{display:grid;gap:4px;font-size:13px}.garden-seed-summary span,.garden-seed-empty{font-size:11px;color:var(--ui-muted)} @media(max-height:520px){.pp-home.is-garden-context .garden-seed-choices{max-height:110px}} } /* Plant from owned stock; one clear action and a centered drawn close glyph. */ @layer ui-theme { html[data-game-theme] .pp-home.is-garden-context .home-header [data-home-close]{display:grid!important;place-items:center!important;flex:0 0 44px!important;padding:0!important;line-height:1!important;border-radius:12px!important;box-shadow:none!important} html[data-game-theme] .pp-home.is-garden-context .home-header [data-home-close]>svg{display:block!important;width:20px!important;height:20px!important;pointer-events:none} html[data-game-theme] .pp-home.pp-home button.garden-plant-button.garden-plant-button{display:flex!important;align-items:center!important;gap:12px!important;padding:12px 14px!important;min-height:64px!important;min-width:0!important;border:1px solid #27795c!important;border-radius:14px!important;background:linear-gradient(135deg,#368b68,#237657)!important;color:#fff!important;text-align:left!important;box-shadow:0 3px 0 #195a43!important;font-family:inherit!important} html[data-game-theme] .pp-home.pp-home button.garden-plant-button.garden-plant-button>svg{width:28px;height:28px;flex:0 0 28px;color:#dbf5d8} .garden-plant-copy{display:grid;gap:4px;flex:1;min-width:0}.garden-plant-copy b{font-size:15px;line-height:1.2}.garden-plant-copy small{font-size:10px;line-height:1.2;color:#e0f0e6} .garden-plant-cost{display:grid;grid-template-columns:14px auto;gap:2px 4px;align-items:center;padding-left:12px;border-left:1px solid #ffffff40;flex:0 0 auto}.garden-plant-cost svg{width:14px;height:16px;color:#ffe5a1}.garden-plant-cost b{font-size:17px;line-height:1}.garden-plant-cost small{grid-column:1/-1;font-size:9px;color:#e0f0e6} html[data-game-theme] .pp-home.pp-home button.garden-plant-button.garden-plant-button:enabled:hover{background:linear-gradient(135deg,#3c9772,#298364)!important} html[data-game-theme] .pp-home.pp-home button.garden-plant-button.garden-plant-button:enabled:active{box-shadow:0 1px 0 #195a43!important;transform:translateY(2px)} html[data-game-theme] .pp-home.pp-home button.garden-plant-button.garden-plant-button:disabled{background:var(--ui-soft)!important;border-color:var(--ui-line)!important;color:var(--ui-muted)!important;box-shadow:none!important;opacity:1!important;cursor:default!important} html[data-game-theme] .pp-home.pp-home button.garden-plant-button.garden-plant-button:disabled :is(svg,small){color:var(--ui-muted)!important}.garden-plant-button:disabled .garden-plant-cost{border-left-color:var(--ui-line)} .garden-seed-empty{margin:0;line-height:1.5}.garden-plant-button+.home-action-hint:empty{display:none} html[data-game-theme] .pp-home.is-garden-context .home-header [data-home-close]:focus-visible,html[data-game-theme] .pp-home.pp-home button.garden-plant-button.garden-plant-button:focus-visible{outline:2px solid var(--ui-accent)!important;outline-offset:3px!important} } @layer ui-theme {html[data-game-theme] .pp-home.pp-home button.garden-plant-button.garden-plant-button:enabled .garden-plant-copy small,html[data-game-theme] .pp-home.pp-home button.garden-plant-button.garden-plant-button:enabled .garden-plant-cost small{color:#e0f0e6!important}} /* Thirty garden themes, scoped entirely to the garden panel. */ @layer ui-theme { html[data-game-theme] .pp-home.is-workshop.is-garden-appearance{width:min(540px,calc(100dvw - 24px))!important;max-width:540px!important;max-height:min(780px,calc(100dvh - 110px))!important;grid-template-rows:auto auto minmax(0,1fr) auto!important} .garden-panel-tabs{display:flex;gap:6px;padding:0 14px 10px;border-bottom:1px solid var(--ui-line)} html[data-game-theme] .pp-home .garden-panel-tabs button{min-height:40px!important;flex:1!important;padding:8px 12px!important;border-radius:10px!important;background:var(--ui-soft)!important;color:var(--ui-muted)!important;border:1px solid transparent!important;font-family:inherit!important;font-size:13px!important;font-weight:650!important;line-height:1.3!important} html[data-game-theme] .pp-home .garden-panel-tabs button[aria-pressed=true]{background:#32856718!important;color:var(--ui-text)!important;border-color:#32856780!important} .garden-theme-shop{display:grid;gap:12px;min-width:0}.garden-theme-intro{display:grid;gap:4px}.garden-theme-intro>b{font-size:15px;color:var(--ui-text)}.garden-theme-intro p{font-size:11px;line-height:1.45;color:var(--ui-muted);margin:0} .garden-theme-preview{margin:0;overflow:hidden;border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-soft)} html[data-game-theme] .pp-home .garden-theme-preview>img.home-background{position:static!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;aspect-ratio:4160/3081!important;object-fit:cover!important;transform:none!important} .garden-theme-preview figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;background:var(--ui-card)}.garden-theme-preview figcaption>span:first-child{display:grid;gap:3px;min-width:0}.garden-theme-preview b{font-size:13px;line-height:1.3;color:var(--ui-text)}.garden-theme-preview small{font-size:10px;color:var(--ui-muted)}.garden-theme-preview-price{font-size:11px;font-weight:650;flex-shrink:0;color:var(--ui-muted)} .garden-theme-purchase{display:grid;gap:5px}.garden-theme-purchase [data-home-scene-action]{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:10px 12px!important;min-height:48px!important;font-weight:700!important}.garden-theme-purchase [data-home-scene-action]>svg{width:22px;height:22px;flex-shrink:0}.garden-theme-purchase .home-action-hint{font-size:11px;margin:0;line-height:1.4;color:var(--ui-muted)} .garden-theme-filters{display:flex;flex-wrap:wrap;gap:5px}.garden-theme-filters button{min-height:36px!important;padding:6px 10px!important;background:var(--ui-soft)!important;color:var(--ui-muted)!important;border:1px solid var(--ui-line)!important;border-radius:20px!important;font-size:11px!important}.garden-theme-filters [aria-pressed=true]{background:#328567!important;border-color:#328567!important;color:white!important} .garden-theme-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0} html[data-game-theme] .pp-home .garden-theme-cards>button{min-width:0!important;min-height:100px!important;display:grid!important;grid-template-columns:1fr!important;gap:0!important;padding:0!important;overflow:hidden!important;background:var(--ui-soft)!important;color:var(--ui-text)!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;text-align:left!important;box-shadow:none!important} html[data-game-theme] .pp-home .garden-theme-cards>button[aria-pressed=true]{border-color:#328567!important;box-shadow:0 0 0 1px #328567!important}.garden-theme-cards>button>img{width:100%;aspect-ratio:4160/3081;object-fit:cover;display:block}.garden-theme-cards>button>span{display:grid;gap:4px;align-content:start;padding:7px;min-width:0;min-height:44px}.garden-theme-cards b{font-size:10px;line-height:1.3;overflow-wrap:anywhere}.garden-theme-cards small{font-size:9px;color:var(--ui-muted);min-height:14px}.garden-theme-cards .home-diamond{display:flex;align-items:center;gap:3px}.garden-theme-cards .home-diamond img,.garden-theme-preview-price .home-diamond img,.garden-theme-purchase .home-diamond img{position:static!important;width:15px!important;height:15px!important;object-fit:contain!important}.garden-theme-purchase .home-diamond b{font-size:13px} html[data-game-theme] .pp-home.is-garden-appearance .home-header [data-home-close]{display:grid!important;place-items:center!important;padding:0!important;border-radius:12px!important;line-height:1!important}.pp-home.is-garden-appearance .home-header [data-home-close]>svg{pointer-events:none!important} html[data-game-theme] .pp-home :is(.garden-panel-tabs,.garden-theme-filters,.garden-theme-cards) button:focus-visible{outline:2px solid var(--ui-accent)!important;outline-offset:2px!important} @media(max-width:759px){html[data-game-theme] .pp-home.is-workshop.is-garden-appearance{max-height:calc(100dvh - 24px)!important}} @media(max-width:359px){.garden-theme-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.garden-theme-preview figcaption{padding:8px}.garden-theme-preview b{font-size:12px}} @media(max-height:520px){html[data-game-theme] .pp-home.is-workshop.is-garden-appearance{max-height:calc(100dvh - 24px)!important}.garden-theme-preview>img{max-height:135px!important;object-fit:contain!important}.garden-theme-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.garden-theme-intro{display:none}} } /* pk-style-source:163 */ /* /pokemon-card-platform-v1.css */ /* Compact shared card: continuous type background, stable geometry, flat moving ring. */ @layer ui-theme { :is(#app #sidePanel,#app .pp-nursery) .pk-platform-scene {position:absolute!important;inset:0!important;z-index:0!important;overflow:hidden!important;pointer-events:none!important;isolation:isolate!important;background:linear-gradient(155deg,color-mix(in srgb,var(--platform-light-a) 84%,var(--ui-card,#fff)),color-mix(in srgb,var(--platform-a) 34%,var(--ui-card,#fff)) 68%,color-mix(in srgb,var(--platform-b) 24%,var(--ui-card,#fff)))!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-scene::before {display:none!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-scene::after {display:none!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-light {position:absolute!important;inset:10% 7% 3%!important;background:radial-gradient(ellipse at 45% 46%,#fff9,transparent 68%)!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-traces {display:none!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-traces i {position:absolute!important;top:0!important;bottom:0!important;width:1px!important;background:linear-gradient(transparent,#fffa 26%,#fff4 70%,transparent)!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-traces i:first-child {left:0!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-traces i:last-child {right:0!important;top:14%!important;bottom:6%!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-traces i::before,:is(#app #sidePanel,#app .pp-nursery) .pk-platform-traces i::after {content:""!important;position:absolute!important;left:-2px!important;width:5px!important;height:5px!important;border:1px solid #fffe!important;border-radius:50%!important;background:var(--platform-a)!important;opacity:.55!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-traces i::before {top:14%!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-traces i::after {bottom:10%!important;left:-1px!important;width:3px!important;height:3px!important;background:var(--platform-b)!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-ground {position:absolute!important;left:16%!important;right:16%!important;top:76%!important;height:16%!important;border-radius:50%!important;background:radial-gradient(ellipse,color-mix(in srgb,var(--platform-a) 28%,transparent),transparent 70%)!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-orbit {position:absolute!important;left:6%!important;width:88%!important;aspect-ratio:1!important;top:82%!important;transform:translateY(-50%) rotateX(70deg)!important;border-radius:50%!important;border:1px solid #fffc!important;background:linear-gradient(100deg,color-mix(in srgb,var(--platform-a) 12%,transparent),color-mix(in srgb,var(--platform-b) 14%,transparent))!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-spin {position:absolute!important;inset:3%!important;border-radius:50%!important;background:conic-gradient(from 8deg,#ffff 0deg 37deg,transparent 37deg 43deg,#ffff 43deg 83deg,transparent 83deg 89deg,#ffff 89deg 129deg,transparent 129deg 135deg,#ffff 135deg 175deg,transparent 175deg 181deg,#ffff 181deg 221deg,transparent 221deg 227deg,#ffff 227deg 267deg,transparent 267deg 273deg,#ffff 273deg 313deg,transparent 313deg 319deg,#ffff 319deg 354deg,transparent 354deg)!important;mask-image:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10px) calc(100% - 3px),transparent calc(100% - 2px))!important;animation:pokemon-platform-turn 28s linear infinite!important;animation-play-state:paused!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-core {position:absolute!important;inset:13%!important;border-radius:50%!important;border:1px solid #fff9!important;} :is(#app #sidePanel,#app .pp-nursery) .pk-platform-core::after {display:none!important;} :is(#app #sidePanel,#app .pp-nursery) [data-dd-motion=running] .pk-platform-spin {animation-play-state:running!important;} @keyframes pokemon-platform-turn {to {transform:rotate(360deg)}} /* Full-size cards share the same frame, stage and bottom control rhythm. */ :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-showcase,:is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-specimen {border:1px solid var(--ui-line,#cbdde9)!important;border-radius:18px!important;overflow:hidden!important;background:var(--ui-card,#fff)!important;box-shadow:0 6px 20px #19445c06!important;} :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-identity {display:grid!important;grid-template-rows:16px 36px 30px!important;gap:5px!important;padding:12px 16px 10px!important;height:114px!important;min-height:0!important;box-sizing:border-box!important;background:transparent!important;} :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-identity h2 {font-size:28px!important;line-height:36px!important;margin:0!important;letter-spacing:-.035em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important;} :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-stage {height:var(--pk-model-height)!important;min-height:0!important;background:none!important;} :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-stage .dd-portrait {inset:0 3% 12px!important;width:94%!important;height:calc(100% - 12px)!important;filter:drop-shadow(0 7px 6px #23577720)!important;} :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-appearance {display:flex!important;align-items:center!important;flex-wrap:nowrap!important;padding:5px 10px!important;gap:5px!important;height:54px!important;min-height:54px!important;box-sizing:border-box!important;background:var(--ui-card,#fff)!important;} :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-appearance button {min-height:38px!important;} :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-physical {height:46px!important;box-sizing:border-box!important;align-items:center!important;padding:8px 12px!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-specimen {display:flex!important;flex-direction:column!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-identity-intro {position:relative!important;z-index:2!important;height:114px!important;box-sizing:border-box!important;padding:12px 14px 10px!important;order:0!important;background:transparent!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-identity-heading h1 {font-size:26px!important;line-height:36px!important;letter-spacing:-.035em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important;margin:0!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-dex-number {display:inline-block!important;height:16px!important;margin:0 8px 0 0!important;font-size:11px!important;letter-spacing:.08em!important;color:var(--ui-muted)!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-level {border:1px solid var(--ui-line)!important;border-radius:10px!important;background:var(--ui-card)!important;box-shadow:none!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-types {height:30px!important;margin-top:5px!important;gap:6px!important;flex-wrap:nowrap!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-exhibit {height:var(--pk-model-height)!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;order:1!important;background:none!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-stage {height:100%!important;padding:0!important;position:relative!important;z-index:1!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-portrait {inset:0 3% 12px!important;width:94%!important;height:calc(100% - 12px)!important;filter:drop-shadow(0 7px 6px #23577720)!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-portrait img {position:static!important;inset:auto!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;filter:none!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-partner-actions {order:2!important;display:flex!important;flex-wrap:wrap!important;padding:10px 12px!important;margin:0!important;gap:8px!important;min-height:64px!important;border:0!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-partner-actions .ph-button {flex:1 1 100%!important;min-height:44px!important;justify-content:center!important;text-align:center!important;border:1px solid var(--ui-line)!important;border-radius:10px!important;padding:9px 12px!important;font-size:14px!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-partner-actions .ph-lead-state {flex:1 1 100%!important;min-height:40px!important;justify-content:center!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-partner-note {max-width:none!important;width:100%!important;text-align:center!important;font-size:11px!important;line-height:1.3!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-partner-note br {display:none!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-field-notes {order:3!important;margin:0 14px!important;padding:11px 0!important;border-top:1px solid var(--ui-line)!important;gap:10px!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-equipment {order:4!important;padding:12px 14px!important;margin:0!important;border-top:1px solid var(--ui-line)!important;background:transparent!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-record {order:5!important;padding:8px 14px 12px!important;margin:0!important;font-size:10px!important;} /* Identity and model are one fixed-size display; the scene starts at its top. */ :is(#app #sidePanel,#app .pp-nursery) :is(.dd-display,.ph-display) {--pk-model-height:210px;position:relative!important;isolation:isolate!important;display:grid!important;grid-template-rows:114px var(--pk-model-height)!important;height:calc(114px + var(--pk-model-height))!important;min-width:0!important;overflow:hidden!important;flex:none!important;} :is(#app #sidePanel,#app .pp-nursery) :is(.dd-display,.ph-display)>.pk-platform-scene {inset:0!important;} :is(#app #sidePanel,#app .pp-nursery) :is(.dd-display,.ph-display) .pk-platform-orbit {top:auto!important;bottom:52px!important;transform:translateY(50%) rotateX(70deg)!important;} :is(#app #sidePanel,#app .pp-nursery) :is(.dd-display,.ph-display) .pk-platform-ground {top:auto!important;bottom:0!important;height:62px!important;} :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-types {min-width:0!important;height:30px!important;gap:6px!important;} :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-types .pokemon-type-list {flex-wrap:nowrap!important;} :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-dexline {font-size:10px!important;letter-spacing:.5px!important;} :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-appearance>div {flex:0 0 auto!important;} :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-appearance>.pc-info-button {margin-left:auto!important;flex:none!important;} :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-appearance>.pf-open {min-width:0!important;flex:0 1 auto!important;padding-inline:5px!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-identity-heading {height:36px!important;min-width:0!important;gap:8px!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-identity-heading h1 {flex:1!important;} :is(#app #sidePanel,#app .pp-nursery) .ph-hub .ph-level {flex:none!important;height:36px!important;min-height:0!important;padding:2px 8px!important;} /* Legacy guide cards also use the same shared scene without upright halos. */ :is(#app #sidePanel,#app .pp-nursery) .pd-scene .pk-platform-scene {border-radius:inherit!important;} :is(#app .pp-nursery) .nr-mon-art {position:relative!important;isolation:isolate!important;overflow:hidden!important;border-radius:10px!important;} :is(#app .pp-nursery) .nr-mon-art>img {position:relative!important;z-index:1!important;} /* Catalog and team cards share the palette, with static compact previews. */ :is(#app #sidePanel,#app .pp-nursery) :is(.dc-card-art,.pt-portrait,.nr-mon-art) {position:relative!important;isolation:isolate!important;overflow:hidden!important;border-radius:12px!important;} :is(#app #sidePanel,#app .pp-nursery) .dc-card-art {width:100%!important;margin:0!important;height:100px!important;align-self:center!important;} :is(#app #sidePanel,#app .pp-nursery) .dc-card-art>img {position:relative!important;z-index:1!important;width:88%!important;height:88%!important;object-fit:contain!important;object-position:center bottom!important;} :is(#app #sidePanel,#app .pp-nursery) .pt-portrait .pt-image {position:relative!important;z-index:1!important;} :is(#app #sidePanel,#app .pp-nursery) :is(.dc-card-art,.pt-portrait,.nr-mon-art) .pk-platform-traces {display:none!important;} :is(#app #sidePanel,#app .pp-nursery) :is(.dc-card-art,.pt-portrait,.nr-mon-art) .pk-platform-orbit {top:85%!important;} :is(#app #sidePanel,#app .pp-nursery) :is(.dc-card-art,.pt-portrait,.nr-mon-art) .pk-platform-spin {mask-image:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px) calc(100% - 1px),transparent)!important;} html[data-game-theme=dark] :is(#app #sidePanel,#app .pp-nursery) .pk-platform-scene {background:linear-gradient(155deg,color-mix(in srgb,var(--platform-a) 16%,var(--ui-card,#152a38)),color-mix(in srgb,var(--platform-a) 34%,var(--ui-card,#152a38)) 65%,color-mix(in srgb,var(--platform-b) 25%,var(--ui-card,#152a38)))!important;} html[data-game-theme=dark] :is(#app #sidePanel,#app .pp-nursery) .pk-platform-light {opacity:.12!important;} html[data-game-theme=dark] :is(#app #sidePanel,#app .pp-nursery) .pk-platform-scene::before {opacity:.5!important;} html[data-game-theme=dark] :is(#app #sidePanel,#app .pp-nursery) .pk-platform-orbit {opacity:.6!important;} @media(pointer:coarse) { :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-appearance button {min-height:44px!important;} } @media(max-width:700px) { :is(#app #sidePanel,#app .pp-nursery) .dc-card-art {height:82px!important;} :is(#app #sidePanel,#app .pp-nursery) :is(.dd-display,.ph-display) {--pk-model-height:200px;} } @media(max-height:560px) and (min-width:701px) { :is(#app #sidePanel,#app .pp-nursery) .dc-card-art {height:62px!important;} :is(#app #sidePanel,#app .pp-nursery) :is(.dd-display,.ph-display) {--pk-model-height:170px;} } /* The native shell depends only on the viewport, never on species content. */ #app #sidePanel.side-panel.is-open.is-pokedex-detail:has(.dd-dossier) {width:min(1280px,calc(100dvw - 32px))!important;height:min(760px,calc(100dvh - 32px))!important;min-height:0!important;max-height:calc(100dvh - 16px)!important;overflow:hidden!important;} #app #sidePanel.side-panel.is-open.is-pokedex-detail:has(.dd-dossier)>#sidePanelContent {flex:1 1 0!important;height:100%!important;max-height:none!important;min-height:0!important;overflow:hidden!important;} #app #sidePanel .dd-dossier {display:flex!important;flex-direction:column!important;height:100%!important;max-height:none!important;min-height:0!important;overflow:hidden!important;scrollbar-gutter:auto!important;} #app #sidePanel .dd-dossier .dd-header {position:relative!important;flex:none!important;height:60px!important;min-height:60px!important;box-sizing:border-box!important;} #app #sidePanel .dd-dossier .dd-layout {flex:1 1 0!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain!important;scrollbar-gutter:stable!important;grid-template-columns:300px minmax(0,1fr)!important;gap:20px!important;padding:16px!important;align-items:start!important;} #app .public-game-dialog {width:min(1280px,calc(100dvw - 32px))!important;height:min(760px,calc(100dvh - 32px))!important;max-height:calc(100dvh - 16px)!important;overflow:hidden!important;box-sizing:border-box!important;} #app .public-game-dialog :is(#sidePanel,#dexDialogContent) {height:100%!important;min-height:0!important;overflow:hidden!important;} #app .public-game-dialog .public-dex-note {padding:12px 0 0!important;} @media(max-width:1100px) and (min-width:761px) {#app #sidePanel .dd-dossier .dd-layout {grid-template-columns:260px minmax(0,1fr)!important;gap:14px!important;padding:12px!important;} :is(#app #sidePanel,#app .pp-nursery) .dd-dossier .dd-identity h2 {font-size:25px!important;}} @media(max-width:760px) { #app #sidePanel.side-panel.is-open.is-pokedex-detail:has(.dd-dossier),#app .public-game-dialog {width:calc(100dvw - 12px)!important;height:calc(100dvh - 12px)!important;max-height:calc(100dvh - 12px)!important;} #app #sidePanel .dd-dossier .dd-layout {grid-template-columns:minmax(0,1fr)!important;padding:10px!important;gap:20px!important;} #app #sidePanel .dd-dossier .dd-appearance {display:flex!important;} #app #sidePanel .dd-dossier .dd-header {height:54px!important;min-height:54px!important;} } @media(prefers-reduced-motion:reduce) {:is(#app #sidePanel,#app .pp-nursery) .pk-platform-spin {animation:none!important;}} } /* Public game catalog is outside #app; its previews use the same stage CSS. */ body[data-pokedex-mode=game] .dex-card-visual {position:relative;isolation:isolate;overflow:hidden;border-radius:13px;background:linear-gradient(145deg,#fff,var(--platform-light-a,#e4f4f9));} body[data-pokedex-mode=game] .dex-card-visual>.pk-platform-scene {position:absolute;inset:0;background:linear-gradient(145deg,var(--platform-light-a),var(--platform-light-b));pointer-events:none;} body[data-pokedex-mode=game] .dex-card-visual>.pk-platform-scene .pk-platform-orbit {position:absolute;left:12%;right:12%;bottom:8%;height:15%;border:2px solid #fffc;border-radius:50%;box-shadow:inset 0 0 0 5px #ffffff40;} body[data-pokedex-mode=game] .dex-card-visual>img {position:relative;z-index:1;} /* Reuse the permanent native mobile close inside the dossier navigation row. */ @layer mobile-window-accessibility { @media(max-width:760px),(pointer:coarse) and (max-height:560px) { body:not(.is-battling) #gameScreen #sidePanel[data-mobile-sheet="v1"].is-pokedex-detail:has(.dd-dossier)>.mobile-window-head:not([hidden]) {position:absolute!important;inset:0 0 auto auto!important;left:auto!important;right:0!important;width:56px!important;height:54px!important;min-height:0!important;padding:5px 6px!important;margin:0!important;z-index:85!important;justify-content:center!important;gap:0!important;background:transparent!important;border:0!important;box-sizing:border-box!important;} body:not(.is-battling) #gameScreen #sidePanel[data-mobile-sheet="v1"].is-pokedex-detail:has(.dd-dossier)>.mobile-window-head h2 {display:none!important;} } } /* pk-style-source:164 */ /* /pokedex-library-v1.css */ /* Native reference surfaces: fixed cards, scrollable overlays, no new animation clock. */ @layer ui-theme { body .dex-library {display:grid!important;gap:8px!important;margin-top:14px!important;} body .dex-library .pt-entry {margin:0!important;} body .dex-library-action {display:flex!important;align-items:center!important;gap:10px!important;min-height:62px!important;width:100%!important;max-width:none!important;padding:10px 12px!important;border:1px solid var(--ui-line,#bdd2e1)!important;border-radius:13px!important;background:var(--ui-card,#f6fafc)!important;color:var(--ui-ink,#193e56)!important;text-align:left!important;font:inherit!important;box-shadow:none!important;cursor:pointer;} body .dex-library-action>svg {width:26px!important;height:26px!important;flex:none!important;color:var(--ui-accent,#087bbb)!important;} body .dex-library-action>svg:last-child {width:17px!important;height:17px!important;} body .dex-library-action>span {display:grid!important;gap:3px!important;min-width:0!important;flex:1!important;} body .dex-library-action b {font-size:14px!important;line-height:1.25!important;} body .dex-library-action small {display:block!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;font-size:10px!important;font-weight:400!important;color:var(--ui-muted,#526e82)!important;background:none!important;margin:0!important;padding:0!important;border-radius:0!important;} body .dex-library-action em {font-size:12px!important;font-weight:700!important;font-style:normal!important;color:var(--ui-accent,#087bbb)!important;flex:none!important;} body .dex-library-action:hover {border-color:var(--ui-accent,#087bbb)!important;background:var(--ui-paper,#edf7fc)!important;} body :is(.dex-library-action,.dex-library-dialog button,.dex-search-dialog button,.pt-dialog button):focus-visible {outline:3px solid #178ed1!important;outline-offset:2px!important;} body #app #sidePanel :is(.dex-library-dialog,.dex-search-dialog) {box-sizing:border-box!important;position:fixed!important;border:1px solid var(--ui-line,#bdd2e1)!important;border-radius:20px!important;background:var(--ui-card,#fff)!important;color:var(--ui-ink,#193e56)!important;padding:18px!important;box-shadow:0 24px 80px #102c4938!important;overflow:auto!important;} body #app #sidePanel .dex-library-dialog {width:860px!important;height:560px!important;} body #app #sidePanel :is(.dex-library-dialog,.dex-search-dialog)::backdrop {background:#112d497a!important;backdrop-filter:none!important;} body #app #sidePanel :is(.dex-library-dialog,.dex-search-dialog)>header {display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;padding:0 0 14px!important;margin:0!important;border:0!important;background:transparent!important;} body #app #sidePanel :is(.dex-library-dialog,.dex-search-dialog)>header small {font-size:10px!important;letter-spacing:1.4px!important;color:var(--ui-muted,#526e82)!important;} body #app #sidePanel :is(.dex-library-dialog,.dex-search-dialog)>header {position:sticky!important;top:0!important;z-index:5!important;background:var(--ui-card,#fff)!important;} body #app #sidePanel :is(.dex-library-dialog,.dex-search-dialog)>header h3 {margin:3px 0 0!important;font-size:23px!important;line-height:1.2!important;} body #app #sidePanel :is(.dex-library-dialog,.dex-search-dialog) [data-pc-close] {display:grid!important;place-items:center!important;min-width:44px!important;width:44px!important;height:44px!important;min-height:44px!important;padding:10px!important;border:1px solid var(--ui-line,#bdd2e1)!important;border-radius:12px!important;background:var(--ui-paper,#edf5fa)!important;color:var(--ui-ink,#193e56)!important;} body #app #sidePanel .dex-library-dialog .pf-tabs {display:flex!important;gap:6px!important;flex-wrap:nowrap!important;overflow-x:auto!important;overscroll-behavior:contain!important;padding:2px 2px 10px!important;margin:0 0 10px!important;} body #app #sidePanel .dex-library-dialog .pf-tabs button {display:flex!important;align-items:center!important;gap:7px!important;flex:none!important;min-height:48px!important;max-width:210px!important;padding:6px 10px!important;border:1px solid var(--ui-line,#bdd2e1)!important;border-radius:11px!important;background:var(--ui-card,#fff)!important;color:var(--ui-ink,#193e56)!important;box-shadow:none!important;font:600 12px/1.25 system-ui!important;} body #app #sidePanel .dex-library-dialog .pf-tabs button[aria-pressed=true] {border-color:var(--ui-accent,#087bbb)!important;background:var(--ui-paper,#edf7fc)!important;color:var(--ui-accent,#087bbb)!important;} body #app #sidePanel .dex-library-dialog .pf-tabs :is(img,svg) {width:32px!important;height:32px!important;flex:none!important;object-fit:contain!important;} body #app #sidePanel .dex-library-dialog .pf-body {display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;gap:22px!important;align-items:start!important;} body #app #sidePanel .dex-library-dialog .pf-art {display:block!important;position:relative!important;isolation:isolate!important;height:330px!important;min-width:0!important;overflow:hidden!important;border:1px solid var(--ui-line,#d3e2eb)!important;border-radius:16px!important;background:var(--ui-paper,#edf5fa)!important;padding:0!important;} body #app #sidePanel .dex-library-dialog .pf-art>.pk-platform-scene {position:absolute!important;inset:0!important;} body #app #sidePanel .dex-library-dialog .pf-art>img {position:absolute!important;inset:12px 5% auto!important;z-index:1!important;display:block!important;width:90%!important;height:calc(100% - 62px)!important;max-height:none!important;object-fit:contain!important;margin:0!important;filter:drop-shadow(0 8px 8px #17364c25)!important;} body #app #sidePanel .dex-library-dialog .pf-art>span:not(.pk-platform-scene) {position:absolute!important;bottom:12px!important;left:12px!important;right:12px!important;z-index:2!important;text-align:center!important;font-size:11px!important;padding:6px!important;border-radius:8px!important;background:var(--ui-card,#fff)!important;color:var(--ui-muted,#526e82)!important;} body #app #sidePanel .dex-library-dialog .pf-copy {min-width:0!important;} body #app #sidePanel .dex-library-dialog .pf-kind {font-size:11px!important;color:var(--ui-accent,#087bbb)!important;} body #app #sidePanel .dex-library-dialog h3 {font-size:23px!important;margin:4px 0 10px!important;} body #app #sidePanel .dex-library-dialog p {font-size:12px!important;line-height:1.55!important;margin:12px 0!important;} body #app #sidePanel .dex-library-dialog .pf-types {margin-bottom:12px!important;} body #app #sidePanel .dex-library-dialog .pf-base-stats {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin:0!important;} body #app #sidePanel .dex-library-dialog .pf-base-stats>div {padding:9px!important;background:var(--ui-paper,#f0f6fa)!important;border-radius:9px!important;} body #app #sidePanel .dex-library-dialog .pf-base-stats dt {display:flex!important;align-items:center!important;gap:4px!important;font-size:10px!important;color:var(--ui-muted,#526e82)!important;white-space:nowrap!important;} body #app #sidePanel .dex-library-dialog .pf-base-stats dt svg {width:16px!important;height:16px!important;} body #app #sidePanel .dex-library-dialog .pf-base-stats dd {margin:5px 0 0!important;font-size:20px!important;font-weight:800!important;} body #app #sidePanel .dex-library-dialog .pf-measures {display:flex!important;gap:18px!important;margin-top:12px!important;font-size:12px!important;} body #app #sidePanel .dex-library-dialog .pf-measures>span {display:flex!important;align-items:center!important;gap:5px!important;} body #app #sidePanel .dex-library-dialog .pf-measures svg {width:18px!important;height:18px!important;} body #app #sidePanel .dex-library-dialog .pf-requirements {display:grid!important;gap:7px!important;} body #app #sidePanel .dex-library-dialog .pf-note {border-top:1px solid var(--ui-line,#bdd2e1)!important;padding-top:10px!important;color:var(--ui-muted,#526e82)!important;} body #app #sidePanel .dex-library-dialog .pf-tera-types {display:flex!important;flex-wrap:wrap!important;gap:5px!important;} body #app #sidePanel .dex-library-dialog .pf-tera-types>span {border:1px solid color-mix(in srgb,var(--tera-color,#9675db) 45%,transparent)!important;background:color-mix(in srgb,var(--tera-color,#9675db) 12%,var(--ui-card,#fff))!important;border-radius:7px!important;font-size:11px!important;padding:5px 7px!important;} body #app #sidePanel .dex-search-dialog {width:500px!important;height:640px!important;} body #app #sidePanel .dex-search-field {display:flex!important;align-items:center!important;gap:9px!important;border:1px solid var(--ui-line,#bdd2e1)!important;border-radius:12px!important;padding:0 10px!important;margin:0 0 12px!important;} body #app #sidePanel .dex-search-field svg {width:20px!important;height:20px!important;flex:none!important;color:var(--ui-accent,#087bbb)!important;} body #app #sidePanel .dex-search-field input {width:100%!important;min-width:0!important;height:46px!important;margin:0!important;padding:6px 0!important;border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;color:var(--ui-ink,#193e56)!important;font:14px system-ui!important;} body #app #sidePanel .dex-search-results {display:grid!important;gap:5px!important;} body #app #sidePanel .dex-search-results>button {display:flex!important;align-items:center!important;gap:10px!important;min-height:50px!important;width:100%!important;padding:4px 10px!important;border:1px solid transparent!important;border-radius:10px!important;background:var(--ui-paper,#f2f7fb)!important;color:var(--ui-ink,#193e56)!important;text-align:left!important;box-shadow:none!important;} body #app #sidePanel .dex-search-results>button:hover {border-color:var(--ui-accent,#087bbb)!important;} body #app #sidePanel .dex-search-results img {width:42px!important;height:42px!important;object-fit:contain!important;} body #app #sidePanel .dex-search-results span {display:grid!important;gap:3px!important;flex:1!important;min-width:0!important;} body #app #sidePanel .dex-search-results b {font:700 13px system-ui!important;} body #app #sidePanel .dex-search-results small {font:11px system-ui!important;color:var(--ui-muted,#526e82)!important;} body #app #sidePanel .dex-search-results svg {width:18px!important;height:18px!important;} body #app #sidePanel :is(.dex-search-hint,.dex-search-empty) {font:12px/1.5 system-ui!important;color:var(--ui-muted,#526e82)!important;margin:12px 0 0!important;} body .pt-dialog {box-sizing:border-box!important;width:min(780px,calc(100dvw - 24px))!important;height:520px!important;max-height:calc(100dvh - 24px)!important;padding:18px!important;border:1px solid var(--ui-line,#bdd2e1)!important;border-radius:20px!important;background:var(--ui-card,#fff)!important;color:var(--ui-ink,#193e56)!important;overflow:auto!important;box-shadow:0 24px 80px #102c4938!important;} body .pt-dialog[open] {display:block!important;} body .pt-dialog::backdrop {background:#112d497a!important;backdrop-filter:none!important;} body .pt-dialog>header {display:flex!important;justify-content:space-between!important;align-items:center!important;gap:12px!important;margin-bottom:16px!important;} body .pt-dialog>header {position:sticky!important;top:0!important;z-index:5!important;background:var(--ui-card,#fff)!important;} body .pt-dialog header small {font-size:11px!important;color:var(--ui-muted,#526e82)!important;} body .pt-dialog h2 {display:flex!important;gap:8px!important;align-items:center!important;font-size:24px!important;line-height:1.2!important;margin:4px 0 0!important;} body .pt-dialog h2 svg {width:25px!important;height:25px!important;color:var(--ui-accent,#087bbb)!important;} body .pt-dialog button {min-height:44px!important;border:1px solid var(--ui-line,#bdd2e1)!important;border-radius:11px!important;background:var(--ui-paper,#edf5fa)!important;color:var(--ui-ink,#193e56)!important;font:600 13px/1.3 system-ui!important;padding:10px!important;box-shadow:none!important;cursor:pointer;} body .pt-dialog button:disabled {opacity:.5!important;cursor:default!important;} body .pt-dialog [data-pt-close] {display:grid!important;place-items:center!important;width:44px!important;height:44px!important;padding:11px!important;} body .pt-dialog [data-pt-close] svg {width:20px!important;height:20px!important;} body .pt-workspace {display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)!important;gap:18px!important;} body .pt-dialog .pt-preview {grid-area:auto!important;position:relative!important;isolation:isolate!important;height:380px!important;margin:0!important;overflow:hidden!important;border:1px solid var(--ui-line,#bdd2e1)!important;border-radius:16px!important;background:var(--ui-paper,#edf5fa)!important;} body .pt-preview>.pk-platform-scene {position:absolute!important;inset:0!important;} body .pt-preview>.pk-platform-scene {background:linear-gradient(145deg,color-mix(in srgb,var(--platform-a) 20%,var(--ui-card,#fff)),color-mix(in srgb,var(--platform-b) 34%,var(--ui-card,#fff)))!important;} body .pt-preview :is(.pk-platform-traces,.pk-platform-orbit,.pk-platform-light) {display:none!important;} body .pt-preview canvas {position:relative!important;z-index:1!important;display:block!important;width:100%!important;height:calc(100% - 46px)!important;object-fit:contain!important;} body .pt-caption {position:absolute!important;z-index:2!important;bottom:14px!important;left:12px!important;right:12px!important;display:flex!important;justify-content:space-between!important;align-items:center!important;gap:8px!important;font-size:12px!important;background:var(--ui-card,#fff)!important;border-radius:9px!important;padding:9px!important;} body .pt-caption small {white-space:nowrap!important;color:var(--ui-muted,#526e82)!important;} body .pt-controls {min-width:0!important;} body .pt-list-label {display:flex!important;justify-content:space-between!important;font-size:11px!important;color:var(--ui-muted,#526e82)!important;margin:0 0 10px!important;} body .pt-dialog .pt-options {display:grid!important;grid-template-columns:1fr!important;gap:7px!important;max-height:240px!important;overflow:auto!important;padding:2px!important;} body .pt-dialog .pt-options button {display:flex!important;align-items:center!important;gap:10px!important;text-align:left!important;min-height:65px!important;background:var(--ui-card,#fff)!important;} body .pt-options i {font-style:normal!important;font-size:11px!important;color:var(--ui-muted,#526e82)!important;} body .pt-options span {display:grid!important;gap:5px!important;flex:1!important;min-width:0!important;} body .pt-options small {font-size:10px!important;color:var(--ui-muted,#526e82)!important;font-weight:400!important;} body .pt-options svg {width:17px!important;height:17px!important;flex:none!important;} body .pt-dialog .pt-options button[aria-pressed=true] {border-color:var(--ui-accent,#087bbb)!important;background:var(--ui-paper,#edf7fc)!important;color:var(--ui-accent,#087bbb)!important;} body .pt-dialog footer {display:grid!important;gap:7px!important;margin-top:12px!important;} body .pt-dialog footer button {display:flex!important;justify-content:center!important;align-items:center!important;gap:8px!important;} body .pt-dialog footer svg {width:18px!important;height:18px!important;} body .pt-dialog [data-pt-world] {background:var(--ui-accent,#087bbb)!important;color:#fff!important;} body .pt-dialog .pt-note {font-size:11px!important;line-height:1.55!important;color:var(--ui-muted,#526e82)!important;margin:12px 0 0!important;} body .pt-dialog .pt-status {font-size:12px!important;color:var(--ui-muted,#526e82)!important;margin:8px 0!important;} body .pt-dialog .pt-status:empty {display:none!important;} @media(max-width:600px) { body #app #sidePanel .dd-header nav {gap:4px!important;} body #app #sidePanel .dd-header :is(.dd-search-open,[data-pc-open=habitat]) {width:42px!important;min-width:42px!important;padding:9px!important;} body #app #sidePanel .dd-header :is(.dd-search-open,[data-pc-open=habitat]) span {display:none!important;} body #app #sidePanel .dex-library-dialog .pf-body {grid-template-columns:1fr!important;gap:14px!important;} body #app #sidePanel .dex-library-dialog {height:calc(100dvh - 24px)!important;padding:12px!important;} body #app #sidePanel .dex-library-dialog .pf-art {height:220px!important;} body .pt-dialog {height:calc(100dvh - 24px)!important;padding:12px!important;} body .pt-workspace {grid-template-columns:1fr!important;gap:14px!important;} body .pt-dialog .pt-preview {height:240px!important;} body .pt-dialog .pt-options {max-height:220px!important;} body .pt-dialog .pt-options button {min-height:56px!important;} } @media(max-height:560px) and (min-width:601px) { body .pt-dialog {height:calc(100dvh - 24px)!important;padding:12px!important;} body .pt-dialog>header {margin-bottom:10px!important;} body .pt-dialog .pt-preview {height:250px!important;} body .pt-dialog .pt-options {max-height:165px!important;} body .pt-dialog .pt-options button {min-height:49px!important;padding:7px!important;} body .pt-dialog .pt-note {margin-top:8px!important;} body #app #sidePanel .dex-library-dialog .pf-art {height:230px!important;} } } @layer mobile-window-accessibility { @media(max-width:760px),(pointer:coarse) and (max-height:560px) { body .pt-dialog[open] .pt-preview canvas {height:calc(100% - 46px)!important;} body .pt-dialog[open]>header {top:0!important;} } } /* The library actions fit into the existing biology column. */ @layer ui-theme { body #app #sidePanel .dex-library:has(.pt-entry[hidden]) {grid-template-columns:minmax(0,1fr)!important;} body #app #sidePanel .dex-library {grid-template-columns:repeat(2,minmax(0,1fr))!important;min-width:0!important;margin-top:4px!important;gap:6px!important;} body #app #sidePanel .dex-library .pt-entry {min-width:0!important;} body #app #sidePanel .dex-library-action {box-sizing:border-box!important;min-width:0!important;max-width:100%!important;min-height:54px!important;padding:7px 8px!important;gap:6px!important;overflow:hidden!important;} body #app #sidePanel .dex-library-action>svg {width:20px!important;height:20px!important;} body #app #sidePanel .dex-library-action>svg:last-child {display:none!important;} body #app #sidePanel .dex-library-action b {font-size:12px!important;overflow-wrap:anywhere!important;} body #app #sidePanel .dex-library-action small {font-size:9px!important;} body #app #sidePanel .dex-library-dialog {height:auto!important;max-width:calc(100dvw - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow-x:hidden!important;overscroll-behavior:contain!important;} body #app #sidePanel .dex-library-dialog .pf-tabs {flex-wrap:wrap!important;max-height:132px!important;overflow-x:hidden!important;overflow-y:auto!important;} body #app #sidePanel .dex-library-dialog .pf-tabs button {flex:0 1 auto!important;min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important;} body #app #sidePanel .dex-library-dialog .pf-art {align-self:start!important;} body #app #sidePanel .dex-library-dialog .pf-copy {overflow-wrap:anywhere!important;} body #app #sidePanel .dex-library-dialog .pf-base-stats dt {white-space:normal!important;} body #app #sidePanel .dex-library-dialog .pf-measures {flex-wrap:wrap!important;} body #app #sidePanel .dex-library-dialog .pf-requirements>div {display:flex!important;gap:8px!important;align-items:center!important;min-width:0!important;border:1px solid var(--ui-line)!important;border-radius:9px!important;padding:8px!important;} body #app #sidePanel .dex-library-dialog .pf-requirements img {width:32px!important;height:32px!important;flex:none!important;} body #app #sidePanel .dex-library-dialog .pf-requirements small {display:block!important;margin-top:3px!important;color:var(--ui-muted)!important;} body #app #sidePanel .dex-library-dialog .pf-tera-portraits {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;} body #app #sidePanel .dex-library-dialog .pf-tera-portraits figure {margin:0!important;text-align:center!important;background:var(--ui-paper)!important;border-radius:10px!important;padding:8px!important;min-width:0!important;} body #app #sidePanel .dex-library-dialog .pf-tera-portraits img {display:block!important;width:100%!important;height:130px!important;object-fit:contain!important;} body #app #sidePanel .dex-library-dialog .pf-tera-portraits figcaption {font:600 11px/1.4 system-ui!important;} @media(min-width:961px) and (max-height:800px) { body #app #sidePanel .dd-dossier .dd-stage {height:clamp(140px,calc(100dvh - 500px),220px)!important;} } @media(max-width:600px) { body #app #sidePanel .dex-library-dialog {height:auto!important;} body #app #sidePanel .dex-library-dialog .pf-art {height:200px!important;} } } /* pk-style-source:165 */ /* /story-scenes-v1.css */ #app #dialogueDialog.is-story-scene{position:fixed;inset:0!important;width:auto!important;height:100dvh!important;z-index:2000!important;display:none!important;align-items:center!important;justify-content:center!important;background:transparent!important;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))!important;color:#f4efe2} #app #dialogueDialog.is-story-scene.is-open{display:flex!important} #app #dialogueDialog.is-story-scene .dialogue-shade{position:absolute;inset:0;background:rgba(8,17,26,.56)!important;backdrop-filter:blur(9px)!important;animation:story-shade .45s ease-out both} #app #dialogueDialog.is-story-scene .dialogue-card{position:relative;display:grid!important;grid-template-columns:minmax(240px,36%) minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:22px;width:min(1040px,100%)!important;max-width:1040px!important;min-height:480px;max-height:calc(100dvh - 40px)!important;padding:28px;border:1px solid #819995!important;border-radius:26px!important;background:linear-gradient(135deg,#132d35,#17242f 65%,#23343b)!important;box-shadow:0 24px 90px #0009!important;overflow:auto!important;animation:story-arrive .5s cubic-bezier(.2,.7,.2,1) both!important;isolation:isolate} #app #dialogueDialog.is-story-scene .story-caption{grid-column:1/-1;margin:0;color:#b3c5c2;font:600 12px/1.5 system-ui;letter-spacing:.08em;padding-bottom:12px;border-bottom:1px solid #66857b66;z-index:2} #app #dialogueDialog.is-story-scene .dialogue-portrait{position:relative!important;inset:auto!important;grid-column:1;grid-row:2/4;width:100%!important;height:100%!important;min-height:320px;max-height:430px;align-self:end;margin:0!important;border:0!important;background:transparent!important;border-radius:20px;overflow:hidden;z-index:2;filter:none!important;box-shadow:none!important} #app #dialogueDialog.is-story-scene .dialogue-portrait>i{position:absolute;inset:0;width:100%!important;height:auto!important;aspect-ratio:1;top:auto;bottom:0;border-radius:18px;image-rendering:auto;transform-origin:50% 90%;animation:story-breathe 4s ease-in-out infinite} #app #dialogueDialog.is-story-scene[data-story-portrait=figure] .dialogue-portrait>i{aspect-ratio:3/5} #app #dialogueDialog.is-story-scene .dialogue-portrait>span,#app #dialogueDialog.is-story-scene .dialogue-listener{display:none!important} #app #dialogueDialog.is-story-scene .dialogue-copy{position:relative;grid-column:2;grid-row:2;min-width:0;padding:0!important;z-index:3;align-self:center;overflow:auto} #app #dialogueDialog.is-story-scene .dialogue-copy header{display:flex;gap:16px;justify-content:space-between;align-items:flex-start} #app #dialogueDialog.is-story-scene #dialogueProgress{display:block;font:500 12px/1.4 system-ui;color:#d3b879;letter-spacing:.04em} #app #dialogueDialog.is-story-scene #dialogueSpeaker{font:700 clamp(22px,2.4vw,32px)/1.25 system-ui;color:#fff4dc;margin:5px 0 16px} #app #dialogueDialog.is-story-scene #dialogueText{font:400 clamp(16px,1.5vw,20px)/1.65 system-ui;color:#f2f0e8;min-height:90px;max-height:none;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;text-shadow:none} #app #dialogueDialog.is-story-scene #dialogueHint{display:block;color:#aabfbe;font:400 11px/1.5 system-ui;margin-top:12px} #app #dialogueDialog.is-story-scene #dialogueSound{border:1px solid #688479;background:#162c32;color:#c8d9d3;flex-shrink:0;border-radius:10px;min-height:44px;min-width:44px;padding:8px;font-size:10px} #app #dialogueDialog.is-story-scene .story-choices{display:grid;gap:9px;margin-top:20px} #app #dialogueDialog.is-story-scene .story-choices:empty{display:none} #app #dialogueDialog.is-story-scene .story-choices button{display:flex;align-items:center;gap:12px;text-align:left;min-height:52px;width:100%;padding:12px 16px;border:1px solid #74958b;border-radius:12px;color:#f7f1de;background:#284039;font:500 15px/1.4 system-ui;white-space:normal;cursor:pointer;transition:background .15s,transform .15s} #app #dialogueDialog.is-story-scene .story-choices button:hover{background:#3a5143;transform:translateX(3px)} #app #dialogueDialog.is-story-scene button:focus-visible{outline:3px solid #f4d48c;outline-offset:3px} #app #dialogueDialog.is-story-scene button:disabled{opacity:.55;cursor:wait} #app #dialogueDialog.is-story-scene .story-key{display:grid;place-items:center;flex:0 0 26px;height:26px;border:1px solid #9aaf97;border-radius:7px;font-size:12px;color:#e8d7a5} #app #dialogueDialog.is-story-scene .dialogue-actions{grid-column:2;grid-row:3;display:flex!important;gap:12px;justify-content:space-between;align-self:end;padding:0!important;margin:0!important;z-index:4} #app #dialogueDialog.is-story-scene .dialogue-actions button{min-height:48px;white-space:normal;border-radius:11px;padding:10px 17px;font:600 12px/1.4 system-ui;border:1px solid #82988b!important;color:#d7e0d6!important;background:#213839!important} #app #dialogueDialog.is-story-scene #dialogueNext{background:#d4b66f!important;color:#182b2b!important;border-color:#f7dc9b!important;flex:1} #app #dialogueDialog.is-story-scene #dialogueNext[hidden]{display:none!important} #app #dialogueDialog.is-story-scene .story-stage{position:absolute;left:2%;bottom:24px;width:34%;height:78%;z-index:3;pointer-events:none} #app #dialogueDialog.is-story-scene .story-halo{position:absolute;inset:8% -5% 0;border-radius:50%;background:radial-gradient(ellipse,#507c6e44,transparent 68%);z-index:-1} #app #dialogueDialog.is-story-scene .story-expression{position:absolute;right:4%;top:8%;color:#ffe2a1;font:700 46px/1 system-ui;filter:drop-shadow(0 2px 2px #0008);animation:story-pop .3s ease-out both} #app #dialogueDialog.is-story-scene .story-prop{position:absolute;width:72px;height:72px;object-fit:contain;right:0;bottom:8%;animation:story-pop .35s ease-out both;filter:drop-shadow(0 4px 8px #0008)} #app #dialogueDialog.is-story-scene .story-prop[hidden]{display:none} #app #dialogueDialog.is-story-scene .story-log{margin-top:14px;color:#a9bfba;font:400 12px/1.5 system-ui} #app #dialogueDialog.is-story-scene .story-log summary{cursor:pointer;min-height:30px} #app #dialogueDialog.is-story-scene .story-log ol{max-height:150px;overflow:auto;padding-left:20px;margin:8px 0} #app #dialogueDialog.is-story-scene .story-log li{margin-bottom:8px} #app #dialogueDialog.is-story-scene .story-log .is-player{color:#e8cc8c} .story-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .story-campaign-progress{padding:16px;border:1px solid #7b9e8d;border-radius:12px;background:#e7eee2;color:#29413b;margin:12px 0;font-size:14px} .story-campaign-progress b{display:block;font-size:17px;margin-bottom:5px} [data-game-theme=dark] .story-campaign-progress{background:#233c38;color:#e0e7d9} @keyframes story-shade{from{opacity:0}to{opacity:1}} @keyframes story-arrive{from{opacity:0;filter:blur(8px);transform:translateY(20px) scale(.97)}to{opacity:1;filter:blur(0);transform:none}} @keyframes story-pop{from{opacity:0;transform:translateY(10px) scale(.85)}to{opacity:1;transform:none}} @keyframes story-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} @media(max-width:640px){ #app #dialogueDialog.is-story-scene{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important} #app #dialogueDialog.is-story-scene .dialogue-card{display:flex!important;flex-direction:column;gap:10px;padding:16px;min-height:0;max-height:calc(100dvh - 24px)!important;border-radius:20px;width:min(460px,100%)!important} #app #dialogueDialog.is-story-scene .story-caption{font-size:10px;padding-bottom:8px;flex-shrink:0} #app #dialogueDialog.is-story-scene .dialogue-portrait{height:clamp(130px,25dvh,240px)!important;min-height:0;max-height:none;width:100%!important;flex-shrink:0;align-self:center} #app #dialogueDialog.is-story-scene .dialogue-portrait>i{width:clamp(160px,28dvh,260px)!important;height:clamp(160px,28dvh,260px)!important;left:50%;bottom:0;top:auto;transform:translateX(-50%);animation:none} #app #dialogueDialog.is-story-scene[data-story-portrait=figure] .dialogue-portrait>i{width:140px!important;height:225px!important} #app #dialogueDialog.is-story-scene .dialogue-copy{overflow:visible;flex-shrink:0;width:100%} #app #dialogueDialog.is-story-scene #dialogueSpeaker{font-size:22px;margin:3px 0 10px} #app #dialogueDialog.is-story-scene #dialogueText{font-size:15px;line-height:1.5;min-height:50px} #app #dialogueDialog.is-story-scene .story-choices{margin-top:12px;gap:8px} #app #dialogueDialog.is-story-scene .story-choices button{font-size:14px;min-height:48px;padding:11px 12px} #app #dialogueDialog.is-story-scene .story-key{display:none} #app #dialogueDialog.is-story-scene .dialogue-actions{width:100%;flex-shrink:0;gap:8px;margin-top:4px!important} #app #dialogueDialog.is-story-scene .dialogue-actions button{min-height:44px;padding:10px 12px;font-size:11px} #app #dialogueDialog.is-story-scene .story-stage{top:58px;left:20%;width:60%;height:22dvh;bottom:auto} #app #dialogueDialog.is-story-scene .story-expression{font-size:30px;right:5%;top:5%} #app #dialogueDialog.is-story-scene .story-prop{width:52px;height:52px;bottom:0} #app #dialogueDialog.is-story-scene .story-log{margin-top:8px} } @media(min-width:641px) and (max-height:540px){ #app #dialogueDialog.is-story-scene .dialogue-card{min-height:0;max-height:calc(100dvh - 24px)!important;padding:18px;gap:12px;grid-template-columns:230px minmax(0,1fr)} #app #dialogueDialog.is-story-scene .dialogue-portrait{min-height:230px;max-height:270px} #app #dialogueDialog.is-story-scene .dialogue-copy{align-self:start;min-height:0} #app #dialogueDialog.is-story-scene #dialogueSpeaker{font-size:22px;margin-bottom:8px} #app #dialogueDialog.is-story-scene #dialogueText{font-size:15px;min-height:40px} #app #dialogueDialog.is-story-scene .story-choices{margin-top:10px;gap:6px} #app #dialogueDialog.is-story-scene .story-choices button{min-height:44px;padding:8px 12px;font-size:13px} } @media(min-width:641px){ #app #dialogueDialog.is-story-scene .dialogue-card{grid-template-rows:auto minmax(0,1fr) auto!important} #app #dialogueDialog.is-story-scene .dialogue-copy{min-height:0;max-height:100%} } @media(min-width:641px) and (max-height:540px){ #app #dialogueDialog.is-story-scene .dialogue-card{grid-template-columns:230px minmax(0,1fr)!important} } @media(prefers-reduced-motion:reduce){ #app #dialogueDialog.is-story-scene *,#app #dialogueDialog.is-story-scene *::before{animation:none!important;transition:none!important} #app #dialogueDialog.is-story-scene .dialogue-shade{backdrop-filter:none!important} } @layer ui-theme { html[data-game-theme] #app #dialogueDialog.is-story-scene{background:transparent!important;box-shadow:none!important} html[data-game-theme] #app #dialogueDialog.is-story-scene .dialogue-shade{background:rgba(8,17,26,.56)!important} } /* pk-style-source:166 */ /* /dialogue-theatre-v1.css */ #app #dialogueDialog.is-story-scene.is-dialogue-theatre{color:#233f50;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-card{--paper:#fffdf5;--ink:#233f50;--muted:#557b86;--accent:#078aab;grid-template-columns:44% minmax(0,1fr)!important;grid-template-rows:auto auto minmax(0,1fr)!important;gap:16px;width:min(1180px,100%)!important;max-width:1180px!important;height:min(780px,calc(100dvh - 28px))!important;padding:22px!important;border:2px solid #e3f3ef!important;background:radial-gradient(ellipse at 16% 76%,#b9e4cd88,transparent 44%),linear-gradient(145deg,#e4f4f4,#faf5de 72%)!important;color:var(--ink);box-shadow:0 24px 90px #13283299!important;animation:theatre-enter .48s cubic-bezier(.2,.7,.2,1) both!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-caption{grid-row:1;grid-column:1/-1;color:var(--muted);border-color:#83aca355;font-size:11px;letter-spacing:.055em} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;padding:10px;border:1px solid #8abebc88;border-radius:18px;background:var(--paper);box-shadow:0 5px 20px #28575213} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices{display:flex;flex:1 1 460px;gap:10px;margin:0;min-width:0} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices:empty{display:none} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button{min-height:48px;border:1px solid #85b7b2;border-radius:12px;background:#e4f4ed;color:var(--ink);padding:10px 13px;line-height:1.35;} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button:hover{background:#cdece1;} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-key{border-color:#8cb8b7} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions{display:flex!important;gap:8px;flex:1 0 180px;justify-content:flex-end;align-self:stretch;padding:0!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions button{min-height:48px;border:1px solid #78aaa4!important;color:var(--ink)!important;background:#f8faf1!important;line-height:1.35;max-width:100%;padding:9px 15px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueNext{background:#067f9c!important;border-color:#a8e3e5!important;color:#fff!important;max-width:460px;flex:1} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueClose{flex:0 0 auto;font-size:13px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait{grid-column:1;grid-row:3;display:flex;align-self:stretch;min-height:0;overflow:visible;border-radius:0;z-index:2;padding-bottom:22px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait>i{inset:auto!important;bottom:auto!important;max-width:100%;animation:none!important;transform:none;transform-origin:50% 96%;filter:drop-shadow(0 12px 8px #27493b2b);border-radius:0} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy{grid-column:2;grid-row:3;align-self:end;max-height:100%;overflow:auto;padding:22px!important;border:1px solid #9bc2bb66;border-radius:22px;background:var(--paper);box-shadow:0 6px 28px #3757460f;scrollbar-width:thin} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSpeaker{color:var(--ink);font-size:clamp(23px,2.5vw,32px);margin:4px 0 14px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueProgress{color:var(--accent);font-size:12px;line-height:1.5} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueText{color:var(--ink);font:500 clamp(16px,1.4vw,19px)/1.65 system-ui;min-height:100px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueHint{color:var(--muted);font-size:11px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSound{color:var(--muted);background:#dfefeb;border-color:#a4c5be;min-width:44px;min-height:44px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-face{flex:0 0 66px;width:66px;height:66px;border-radius:16px;background-repeat:no-repeat;background-color:#dfeee0;overflow:hidden} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-face[hidden]{display:none} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-stage{position:absolute;left:2%;bottom:20px;width:40%;height:calc(100% - 145px);z-index:3} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-halo{inset:auto 12% 4%;height:24px;background:radial-gradient(ellipse,#397a6055,transparent 68%);border-radius:50%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-expression{right:10%;top:7%;color:#c4781c;filter:drop-shadow(0 2px 1px #fff);animation:none} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-prop{right:2%;width:112px;height:112px;animation:none;filter:drop-shadow(0 7px 8px #234d4944)} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cards{position:absolute;right:0;bottom:7%;display:flex;flex-direction:column;gap:7px;width:145px;max-width:40%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item{display:flex;align-items:center;gap:7px;padding:8px;border:1px solid #8bc3b4;border-radius:13px;color:var(--ink);box-shadow:0 5px 12px #254b3522} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item img{width:32px;height:32px;object-fit:contain} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item b{font:600 11px/1.35 system-ui;overflow-wrap:anywhere} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item>span{font:700 27px/1 system-ui;color:#cc9c24} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-partners{position:absolute;bottom:4%;left:0;width:100%;display:flex;justify-content:center;gap:8px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-partners[hidden]{display:none} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-partners img{width:25%;max-width:95px;filter:drop-shadow(0 4px 6px #25483933)} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-objective{padding:12px;margin:14px 0 0;border-left:3px solid #129caa;border-radius:6px;background:#d9f2ec;font:600 12px/1.6 system-ui;color:var(--ink)} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-board,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-log{color:var(--muted);font:400 12px/1.55 system-ui;margin-top:8px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-board summary,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-log summary{display:flex;align-items:center;cursor:pointer} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-board article{background:#dbefea;padding:10px;border-radius:10px;margin:8px 0} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-board article p{margin:4px 0} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-board article p:nth-child(2){font-weight:700;color:var(--ink)} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-board article p:first-child{font-size:10px;letter-spacing:.08em} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-log ol{max-height:160px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-log .is-player{color:var(--accent)} #app #dialogueDialog.is-story-scene.is-dialogue-theatre button:focus-visible,#app #dialogueDialog.is-story-scene.is-dialogue-theatre summary:focus-visible{outline:3px solid #d49b2d;outline-offset:2px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre [hidden]{display:none!important} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-card{--paper:#162f3e;--ink:#f3f5e9;--muted:#a5c8cb;--accent:#7fdae1;background:radial-gradient(ellipse at 16% 76%,#315b4d99,transparent 44%),linear-gradient(145deg,#143647,#243d37)!important;border-color:#568787!important} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button{background:#234841;color:var(--ink);border-color:#5a9791} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button:hover{background:#315c50} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions button{background:#1c3944!important} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .story-key{background:#2a4a48} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-objective,#app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-board article,#app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSound{background:#274c49;color:var(--ink)} @media(max-width:640px){ #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-card{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto minmax(125px,1fr) auto!important;gap:8px;padding:12px!important;height:calc(100dvh - 20px)!important;width:100%!important;border-radius:20px;overflow:auto!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-caption{font-size:9px;line-height:1.4;padding-bottom:5px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar{grid-row:2;padding:7px;gap:6px;border-radius:13px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices{flex:1 1 100%;gap:6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button{font-size:11px;min-height:48px;padding:8px;gap:6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-key{flex-basis:21px;height:24px;font-size:10px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions{flex:1 1 100%;gap:6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions button{font-size:10px;min-height:44px;padding:7px 10px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait{grid-column:1;grid-row:3;min-height:125px;height:100%!important;padding:0;align-self:stretch} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait>i{height:100%!important;width:auto!important;left:auto!important;aspect-ratio:8/15!important;transform:none!important;top:auto!important;bottom:auto!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy{grid-column:1;grid-row:4;padding:12px!important;max-height:35dvh;flex:none;border-radius:15px;overflow:auto} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy header{gap:8px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-face{width:44px;height:44px;flex-basis:44px;border-radius:10px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSpeaker{font-size:19px;margin:2px 0 8px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueProgress{font-size:10px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueText{font-size:14px;line-height:1.55;min-height:55px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueHint{font-size:10px;margin-top:7px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSound{max-width:78px;font-size:9px;padding:6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-stage{left:4%;width:92%;height:28%;bottom:37%;pointer-events:none} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-expression{right:16%;top:0;font-size:30px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-prop{right:6%;bottom:10%;width:68px;height:68px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cards{right:0;bottom:8%;width:100px;max-width:32%;gap:4px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item{padding:5px;gap:4px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item img{width:24px;height:24px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item b{font-size:9px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-partners{left:0;bottom:1%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-partners img{max-width:60px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-objective{font-size:10px;padding:8px;margin-top:8px} } @media(max-height:480px) and (min-width:641px){ #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-card{grid-template-columns:32% minmax(0,1fr)!important;padding:10px!important;gap:6px;height:calc(100dvh - 18px)!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-caption{font-size:9px;padding:0} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar{padding:6px;gap:6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices{flex-basis:380px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button{min-height:44px;font-size:11px;padding:6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions{flex:0 1 190px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions button{min-height:44px;font-size:10px;padding:6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy{padding:10px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSpeaker{font-size:19px;margin:2px 0 6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueText{font-size:14px;min-height:50px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-stage{width:28%;height:64%;bottom:10px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-face{width:44px;height:44px;flex-basis:44px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-prop{width:62px;height:62px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cards{max-width:45%;width:96px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item{padding:4px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item img{width:24px;height:24px} } @keyframes theatre-enter{from{opacity:0;filter:blur(7px);clip-path:inset(42% 12% round 36px);transform:translateY(12px)}to{opacity:1;filter:blur(0);clip-path:inset(0 round 26px);transform:none}} @media(prefers-reduced-motion:reduce){#app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-card,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-shade,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait>i{animation:none!important;transition:none!important}} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices{align-self:start} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button{height:auto;align-self:start} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar{align-content:start;align-items:center} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-objective{min-height:0!important;height:auto!important;line-height:1.6!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar{height:auto!important;min-height:0!important;align-self:start!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSpeaker,#app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueText,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-objective{color:var(--ink)!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueProgress{color:var(--accent)!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueHint,#app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSound{color:var(--muted)!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-stage{left:0!important;bottom:0!important;width:100%!important;height:100%!important} @media(max-width:640px){#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar[data-has-choices=true]{flex-wrap:nowrap}#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar[data-has-choices=true] .story-choices{flex:1 1 auto}#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar[data-has-choices=true] .dialogue-actions{flex:0 0 44px}#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar[data-has-choices=true] #dialogueClose{min-width:44px;padding:6px;font-size:10px}#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar[data-has-choices=true] .story-key{display:none}} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSound b{display:block!important;color:var(--muted)!important;font:600 9px/1.3 system-ui!important} /* pk-style-source:167 */ /* /dialogue-theatre-v2.css */ /* Fullscreen dialogue: the upper stage and lower reply dock share one viewport. */ #app #dialogueDialog.is-story-scene.is-dialogue-theatre{padding:0!important;inset:0!important;width:100%!important;height:100dvh!important;overflow:hidden!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-card{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto auto!important;gap:0!important;width:100%!important;max-width:none!important;height:100dvh!important;min-height:0!important;max-height:none!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:radial-gradient(ellipse at 50% 55%,#ecf5e876,transparent 65%),linear-gradient(180deg,#b9dcd6e8,#e5f3e9ed)!important;box-shadow:none!important;animation:theatre-fullscreen-enter .4s ease-out both!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-caption{position:absolute;top:max(20px,env(safe-area-inset-top));left:max(28px,env(safe-area-inset-left));max-width:80%;grid-row:auto;grid-column:auto;z-index:4;padding:0 0 8px;margin:0;border-bottom:2px solid #4b939766;font:600 12px/1.5 system-ui;letter-spacing:.12em;pointer-events:none} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait{grid-row:1!important;grid-column:1!important;position:relative!important;align-self:stretch!important;display:flex!important;justify-content:center;align-items:end;min-height:0!important;max-height:none!important;width:100%!important;height:100%!important;padding:36px 20px 0!important;border-radius:0!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait>i{height:100%!important;max-width:100%!important;aspect-ratio:8/15!important;width:auto!important;animation:theatre-actor-enter .55s cubic-bezier(.16,.8,.24,1) both!important;filter:drop-shadow(0 16px 12px #27493b36)} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy{grid-row:2!important;grid-column:1!important;max-height:29dvh!important;align-self:stretch!important;padding:18px max(32px,calc((100vw - 1100px)/2)) 8px!important;border-top:3px solid #48a0a5!important;border-radius:0!important;background:var(--paper)!important;box-shadow:0 -10px 30px #224f4215!important;overflow:auto!important;animation:theatre-dock-enter .55s cubic-bezier(.16,.8,.24,1) both!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy header{gap:12px;margin-bottom:5px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-face{display:none!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSpeaker{font-size:clamp(22px,2vw,30px);margin:0!important;line-height:1.2} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueProgress{line-height:1.3} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueText{min-height:38px!important;max-height:none!important;font-size:clamp(15px,1.4vw,19px);line-height:1.55!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueHint{margin:5px 0 0} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-objective{margin:7px 0 0;padding:6px 10px;line-height:1.5!important;border-radius:0} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-board,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-log{display:inline-block;vertical-align:top;margin:0 20px 0 0;font-size:11px;max-width:100%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-board[open],#app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-log[open]{display:block} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar{grid-row:3!important;grid-column:1!important;align-self:stretch!important;display:flex!important;flex-wrap:nowrap!important;gap:12px;padding:10px max(32px,calc((100vw - 1100px)/2)) max(18px,env(safe-area-inset-bottom))!important;border:0!important;border-radius:0!important;background:var(--paper)!important;box-shadow:none;animation:theatre-dock-enter .55s cubic-bezier(.16,.8,.24,1) both!important;z-index:5} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices{flex:1 1 auto!important;gap:12px;align-self:stretch!important;margin:0!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button{height:auto!important;min-height:52px!important;align-self:stretch!important;min-width:0;width:auto;flex:1;padding:10px 16px;font-size:14px;border-radius:0!important;border-left:3px solid var(--accent)} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions{flex:1 1 auto!important;align-self:stretch!important;gap:12px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar[data-has-choices=true] .dialogue-actions{flex:0 0 72px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions button{min-height:52px!important;border-radius:0!important;font-size:13px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueNext{max-width:none!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueClose{order:2;min-width:72px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSound{border-radius:0!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-expression{right:calc(50% - 210px);font-size:48px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-prop{right:calc(50% - 310px);bottom:12%;width:150px;height:150px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cards{right:max(8%,calc((100vw - 1080px)/2));bottom:12%;max-width:25%;width:185px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item{border-radius:0!important;} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item b{font-size:13px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item img{width:40px;height:40px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-partners{bottom:5%;gap:20px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-partners img{max-width:125px;width:20%} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-card{background:radial-gradient(ellipse at 50% 55%,#5d96804d,transparent 65%),linear-gradient(180deg,#183a4ced,#244b43ee)!important} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .story-caption{color:#a5c8cb;border-color:#5da8a8} @media(max-width:640px){ #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-caption{top:max(12px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));font-size:9px;max-width:88%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait{padding:38px 8px 0!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy{max-height:30dvh!important;padding:12px max(16px,env(safe-area-inset-left)) 4px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSpeaker{font-size:21px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueText{font-size:14px;line-height:1.5!important;min-height:32px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueHint{display:none!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar{gap:6px;padding:8px max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom))!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices{gap:6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button{font-size:12px;padding:8px 10px;min-height:48px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-key{display:none} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions{gap:6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions button{font-size:11px;min-height:48px!important;padding:8px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar[data-has-choices=true] .dialogue-actions{flex:0 0 48px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueClose{min-width:48px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-expression{right:12%;top:10%;font-size:34px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-prop{right:5%;width:80px;height:80px;bottom:12%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cards{right:2%;max-width:29%;width:108px;bottom:9%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item{padding:5px;gap:4px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item b{font-size:10px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item img{width:24px;height:24px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-partners{gap:8px;bottom:2%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-partners img{max-width:80px} } @media(max-height:480px) and (min-width:641px){ #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait{padding:16px 10px 0!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-caption{font-size:9px;top:10px;left:16px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy{max-height:33dvh!important;padding:8px 24px 0!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSpeaker{font-size:19px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueText{font-size:14px;min-height:26px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueHint{display:none!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar{padding:6px 24px 10px!important;gap:8px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions button{min-height:44px!important;font-size:11px;padding:6px 10px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-expression{font-size:28px;top:18%;right:35%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-prop{width:75px;height:75px;right:30%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cards{width:150px;right:14%;bottom:5%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item{padding:5px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item img{width:24px;height:24px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item b{font-size:10px} } @keyframes theatre-fullscreen-enter{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}} @keyframes theatre-dock-enter{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}} @keyframes theatre-actor-enter{from{opacity:0;transform:translateX(-35px)}to{opacity:1;transform:translateX(0)}} @media(prefers-reduced-motion:reduce){#app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-card,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait>i{animation:none!important;transition:none!important}} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-backdrop{position:absolute;inset:-6px;background-size:cover;opacity:.62;pointer-events:none;} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-backdrop{opacity:.32} /* pk-style-source:168 */ /* /dialogue-theatre-v3.css */ /* Cinematic R3: one full-screen scene, floating readable conversation dock. */ #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-card{display:block!important;background:linear-gradient(90deg,#d5ede322,#f5f2e75c)!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait{position:absolute!important;inset:0!important;padding:35px 0 20px!important;justify-content:flex-start!important;overflow:hidden!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait>i{height:calc(100dvh - 60px)!important;margin-left:calc(31vw - (100dvh - 60px)*.26667)!important;max-width:none!important;flex:none;filter:drop-shadow(0 15px 14px #162b3b55);animation:theatre-actor-enter .6s cubic-bezier(.16,.8,.24,1) both!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-backdrop{opacity:.87!important;filter:blur(2px);background-position:center;z-index:-1} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-dock{position:absolute;right:max(28px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));width:min(700px,49vw);max-height:calc(100dvh - 105px);display:flex;flex-direction:column;z-index:6;border:1px solid #ffffffa8;border-top:2px solid #76b7b9;background:linear-gradient(130deg,#fffdf5ed,#fffdf5cb);box-shadow:0 20px 65px #102d3a36;backdrop-filter:blur(5px) saturate(1.1);animation:theatre-glass-arrive .65s cubic-bezier(.16,.8,.24,1) both;overflow:hidden;color:var(--ink)} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-dock:before{content:"";position:absolute;top:0;left:0;width:32%;height:2px;background:var(--accent);pointer-events:none} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy{position:relative!important;padding:22px 24px 6px!important;max-height:52dvh!important;background:transparent!important;border:0!important;box-shadow:none!important;animation:none!important;flex:1 1 auto;min-height:0!important;width:100%!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy header{margin-bottom:12px;align-items:center} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSpeaker{font-size:clamp(23px,2.4vw,34px);letter-spacing:-.025em} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueProgress{font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:1.6} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueText{font-size:17px;line-height:1.65!important;min-height:56px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueHint{font-size:10px;opacity:.8;margin-top:8px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar{position:relative!important;padding:12px 24px 22px!important;width:100%;gap:8px;background:transparent!important;animation:none!important;flex:0 0 auto;align-items:stretch!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices{gap:8px;align-items:stretch} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button{position:relative;display:grid!important;grid-template-columns:26px minmax(0,1fr) 12px;grid-template-rows:auto auto;align-content:center;align-items:center;gap:2px 9px;min-height:72px!important;padding:12px!important;border:1px solid #669da588;border-left:2px solid #2e929f;background:linear-gradient(135deg,#f9fffcd9,#dceee7ad);box-shadow:0 3px 10px #204d4810;transition:background .18s,border-color .18s,box-shadow .18s,translate .18s;line-height:1.4;text-align:left;overflow:hidden} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button:hover{background:#e6f9f0;border-color:#168ea0;box-shadow:0 5px 20px #147c8a22;transform:none;translate:0 -2px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button:active{translate:0 1px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-key{grid-column:1;grid-row:1/3;display:flex!important;align-items:center;justify-content:center;min-width:26px;height:28px;flex:none;border:1px solid #689ca488;border-radius:0;background:#fff9;font:600 11px/1 system-ui;color:var(--accent)} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-choice-label{grid-column:2;grid-row:1;font:600 13px/1.4 system-ui;overflow-wrap:anywhere} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-choice-note{grid-column:2;grid-row:2;font:400 10px/1.4 system-ui;color:var(--muted)} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-choice-arrow{grid-column:3;grid-row:1/3;color:var(--accent);font-size:18px;line-height:1} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions button{min-height:60px!important;font-size:11px;letter-spacing:.02em} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueNext{background:linear-gradient(115deg,#087e99,#11677f)!important;border:1px solid #14798b!important;color:white!important;box-shadow:0 4px 12px #135f8020} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueClose{background:transparent!important;border-color:#84a8ab77!important;min-width:52px;flex:0 0 52px;max-width:70px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar[data-has-choices=true] .dialogue-actions{flex:0 0 52px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSound{border-color:#99b5b955;background:transparent!important;box-shadow:none} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cue{margin:0 0 10px;font:600 10px/1.4 system-ui;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cue:before{content:"";width:6px;height:6px;background:var(--accent);box-shadow:0 0 0 3px #1497a015} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-last-reply{margin:0 0 12px;padding:8px 11px;border-left:2px solid var(--accent);background:#42969d12;color:var(--muted);font:500 12px/1.5 system-ui} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-reaction{position:absolute;top:max(24px,env(safe-area-inset-top));right:max(28px,env(safe-area-inset-right));z-index:5;padding:9px 14px;border:1px solid #ffffff8a;background:#fffdf5b8;backdrop-filter:blur(5px);color:#233f50;font:600 11px/1.5 system-ui;letter-spacing:.03em;max-width:40%;pointer-events:none} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-caption{background:#fffdf5bd;border:1px solid #ffffff8a;color:#285962;padding:9px 14px!important;max-width:45%;font-size:10px;letter-spacing:.08em;line-height:1.5} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-board,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-log{margin:4px 18px 0 0;font-size:10px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-board summary,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-log summary{min-height:44px;gap:6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-objective{background:#35a4a016;border-color:#429ea4;font-size:11px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-expression{top:12%;right:auto;left:43%;font-size:42px;color:#fff4cf;filter:drop-shadow(0 2px 3px #2a364aaa)} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cards{right:auto;left:41%;bottom:auto;top:23%;width:150px;max-width:17%;gap:8px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item{background:var(--paper);border:1px solid #ffffffe0;box-shadow:0 6px 25px #17374644;padding:10px;gap:8px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item b{font-size:11px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-prop{right:auto;left:38%;bottom:40%;width:140px;height:140px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-partners{left:7%;width:42%;bottom:13%;gap:14px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-partners img{max-width:140px;width:27%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre button:focus-visible{outline:2px solid var(--accent)!important;outline-offset:3px;box-shadow:0 0 0 5px #1591a312!important} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-card{background:linear-gradient(90deg,#172f4220,#1526369e)!important} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-backdrop{opacity:.6!important} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-dock{background:linear-gradient(130deg,#132f40e8,#122c3fd4);border-color:#8caeb566;box-shadow:0 20px 65px #0005} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button{background:linear-gradient(135deg,#27505bd9,#20404bad);border-color:#699ca777} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button:hover{background:#325d64;border-color:#7fdae1} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .story-key{background:#162f4066} #app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-reaction,#app[data-game-theme=dark] #dialogueDialog.is-story-scene.is-dialogue-theatre .story-caption{background:#183849c2;color:#e7f3ef;border-color:#ffffff55} @media(max-width:760px){ #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait{padding:42px 0 0!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait>i{height:calc(100dvh - 95px)!important;margin-left:calc(50vw - (100dvh - 95px)*.26667)!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-dock{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:calc(100% - max(24px,env(safe-area-inset-right) + env(safe-area-inset-left)));max-height:48dvh;background:linear-gradient(130deg,#fffdf5d9,#fffdf5c2);backdrop-filter:blur(3px)} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy{padding:14px 16px 4px!important;max-height:34dvh!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy header{margin-bottom:8px;gap:6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSpeaker{font-size:22px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueText{font-size:14px;line-height:1.5!important;min-height:40px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueProgress{font-size:9px;letter-spacing:.04em} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cue{font-size:9px;margin-bottom:6px;letter-spacing:.06em} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-last-reply{font-size:11px;padding:6px 9px;margin-bottom:8px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar{padding:8px 12px 12px!important;gap:6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices{gap:6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button{grid-template-columns:minmax(0,1fr) 10px;min-height:64px!important;gap:3px 4px;padding:8px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-key{display:none!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-choice-label,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-choice-note{grid-column:1} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-choice-label{font-size:11px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-choice-note{font-size:9px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-choice-arrow{grid-column:2;font-size:15px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions button{font-size:10px;min-height:52px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueClose{min-width:44px;flex-basis:44px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar[data-has-choices=true] .dialogue-actions{flex:0 0 44px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-reaction{top:max(12px,env(safe-area-inset-top));right:12px;padding:7px 9px;font-size:9px;max-width:35%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-caption{left:12px;top:max(12px,env(safe-area-inset-top));max-width:55%;font-size:8px;padding:7px 9px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-expression{left:auto;right:12%;top:18%;font-size:32px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cards{top:25%;left:auto;right:4%;width:100px;max-width:27%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item{padding:6px;gap:5px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-item b{font-size:9px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-prop{left:auto;right:5%;bottom:auto;top:34%;width:85px;height:85px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-partners{left:4%;width:92%;bottom:auto;top:37%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-partners img{max-width:85px} } @media(max-height:480px) and (min-width:641px){ #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait{padding:16px 0 0!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait>i{height:calc(100dvh - 35px)!important;margin-left:calc(25vw - (100dvh - 35px)*.26667)!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-dock{right:14px;bottom:14px;width:52vw;max-height:calc(100dvh - 65px)} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-copy{max-height:55dvh!important;padding:12px 16px 0!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueText{font-size:14px;line-height:1.5!important;min-height:34px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre #dialogueSpeaker{font-size:21px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cue{margin-bottom:5px;font-size:9px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-topbar{padding:8px 12px 12px!important;gap:6px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-choices button{min-height:60px!important;padding:8px!important;grid-template-columns:minmax(0,1fr) 10px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-key{display:none!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-choice-label,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-choice-note{grid-column:1;font-size:10px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-choice-note{font-size:9px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-choice-arrow{grid-column:2} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-actions button{min-height:48px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cards{top:18%;left:34%;max-width:13%;width:110px} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-prop{left:33%;width:85px;height:85px;bottom:20%} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .story-expression{left:34%;font-size:28px} } #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cue{font:600 10px/1.4 system-ui!important;color:var(--muted)!important;min-height:0!important;height:auto!important;margin:0 0 10px!important;padding:0!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-last-reply{font:500 12px/1.5 system-ui!important;color:var(--muted)!important;min-height:0!important;height:auto!important;margin:0 0 12px!important;padding:8px 11px!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-reaction{font:600 11px/1.5 system-ui!important;min-height:0!important;height:auto!important;margin:0!important} @media(max-width:760px){#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-cue{font-size:9px!important;margin-bottom:6px!important}#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-last-reply{font-size:11px!important;padding:6px 9px!important;margin-bottom:8px!important}#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-reaction{font-size:9px!important}} @keyframes theatre-glass-arrive{from{opacity:0;transform:translateY(65px) translateX(16px)}to{opacity:1;transform:translateY(0) translateX(0)}} @media(prefers-reduced-motion:reduce){#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-dock,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait>i,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-card,#app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-shade{animation:none!important;transition:none!important}#app #dialogueDialog.is-story-scene.is-dialogue-theatre button{transition:none!important}} /* Align painted heads, rather than transparent atlas padding, above the dialogue. */ #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait{align-items:flex-start!important} #app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait>i{position:relative!important;height:calc((100dvh - 60px)*var(--theatre-zoom,1))!important;top:calc(-1*(100dvh - 60px)*var(--theatre-zoom,1)*var(--theatre-inset,0))!important;margin-left:calc(31vw - (100dvh - 60px)*var(--theatre-zoom,1)*.26667)!important} @media(max-width:760px){#app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait>i{height:calc((100dvh - 95px)*var(--theatre-zoom,1))!important;top:calc(-1*(100dvh - 95px)*var(--theatre-zoom,1)*var(--theatre-inset,0))!important;margin-left:calc(50vw - (100dvh - 95px)*var(--theatre-zoom,1)*.26667)!important}} @media(max-height:480px) and (min-width:641px){#app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait{padding:50px 0 0!important}#app #dialogueDialog.is-story-scene.is-dialogue-theatre .dialogue-portrait>i{height:calc((100dvh - 50px)*var(--theatre-zoom,1))!important;top:calc(-1*(100dvh - 50px)*var(--theatre-zoom,1)*var(--theatre-inset,0))!important;margin-left:calc(25vw - (100dvh - 50px)*var(--theatre-zoom,1)*.26667)!important}} #app #dialogueDialog.is-dialogue-theatre .theatre-propshelf:empty{display:none} @media(max-width:760px){#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-propshelf{margin:6px 0 0}#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-propshelf .theatre-cards{position:static!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap;width:100%!important;max-width:none!important;gap:5px!important}#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-propshelf .theatre-item{padding:4px 7px;min-height:32px;box-shadow:none}#app #dialogueDialog.is-story-scene.is-dialogue-theatre .theatre-propshelf .theatre-item img{width:24px;height:24px;object-fit:contain}} /* pk-style-source:169 */ /* /garden-companion-v1.css */ .gc-dashboard,.gc-picker{--gc-accent:#287b61;min-width:0;color:var(--ui-text);font-size:13px;line-height:1.45}.gc-dashboard *,.gc-picker *{box-sizing:border-box}.gc-heading{display:flex;align-items:center;gap:12px}.gc-heading>img{width:76px;height:56px;object-fit:cover;border-radius:10px}.gc-heading>div{display:grid;gap:4px}.gc-heading b{font-size:16px}.gc-heading span{color:var(--ui-muted);font-size:12px}.gc-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.gc-dashboard button,.gc-picker button{min-height:44px!important;min-width:0;border:1px solid var(--ui-line)!important;border-radius:10px!important;background:var(--ui-soft)!important;color:var(--ui-text)!important;padding:8px!important;font-size:12px!important;font-weight:600!important;line-height:1.35!important}.gc-dashboard button:focus-visible,.gc-picker button:focus-visible,.gc-dashboard input:focus-visible,.gc-picker input:focus-visible,.gc-dashboard select:focus-visible,.gc-picker select:focus-visible{outline:3px solid #329bcc;outline-offset:2px}.gc-dashboard button[aria-pressed=true],.gc-picker button[aria-pressed=true]{border-color:var(--gc-accent)!important;background:color-mix(in srgb,var(--gc-accent) 14%,var(--ui-card))!important}.gc-dashboard button:disabled,.gc-picker button:disabled{opacity:.5;cursor:default}.gc-stats button{display:grid;justify-items:center;gap:2px;padding:7px 2px!important}.gc-stats b{font-size:19px}.gc-stats span{font-size:10px;white-space:normal;overflow-wrap:anywhere}.gc-water{display:grid;grid-template-columns:auto minmax(32px,1fr) auto;align-items:center;gap:8px}.gc-water span{display:grid;font-size:12px}.gc-water button{white-space:nowrap}.gc-dashboard progress,.gc-picker progress{appearance:auto;accent-color:var(--gc-accent);width:100%;height:7px;border:0;border-radius:8px;overflow:hidden}.gc-next>button{width:100%;background:var(--gc-accent)!important;color:#fff!important;border-color:var(--gc-accent)!important}.gc-section{border-top:1px solid var(--ui-line);padding-top:8px;min-width:0}.gc-section>summary,.gc-picker summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:flex-start;gap:8px;font-weight:700;list-style-position:inside}.gc-section>summary::before{content:'›';font-size:20px;color:var(--ui-muted);margin-right:2px}.gc-section[open]>summary::before{transform:rotate(90deg)}.gc-section>summary>span{margin-left:auto;font-weight:400;color:var(--ui-muted);font-size:11px}.gc-search{display:grid;gap:4px;margin:6px 0 8px}.gc-search>span,.gc-controls label{font-size:11px;color:var(--ui-muted)}.gc-dashboard input[type=search],.gc-picker input[type=search],.gc-dashboard input[type=number],.gc-dashboard select,.gc-picker select{width:100%;min-width:0;min-height:44px;background:var(--ui-soft);color:var(--ui-text);border:1px solid var(--ui-line);border-radius:10px;padding:8px 10px;font:inherit}.gc-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.gc-controls label{display:grid;gap:4px;min-width:0}.gc-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gc-plot{border:1px solid var(--ui-line);border-radius:12px;padding:10px;display:grid;gap:7px;align-content:start;min-width:0;background:var(--ui-card)}.gc-plot-title{display:grid;gap:3px}.gc-plot-title b{font-size:12px}.gc-plot-title>span{font-size:11px;color:var(--ui-muted)}.gc-plant{display:flex;align-items:center;gap:5px;min-width:0}.gc-plant img{width:42px;height:42px;object-fit:contain;flex-shrink:0}.gc-plant>span{display:grid;font-size:11px;overflow-wrap:anywhere}.gc-plant b{font-size:13px}.gc-plot small{color:var(--ui-muted);font-size:11px}.gc-plot p{margin:0;color:var(--ui-muted);font-size:12px;min-height:42px}.gc-plot[data-state=ready]{border-color:#348369}.gc-plot[data-state=dry]{border-color:#ba7a2e}.gc-plot[data-state=locked]{opacity:.75}.gc-plot>button{margin-top:auto}.gc-timeline{padding:0;margin:0;list-style:none;display:grid;gap:6px}.gc-timeline button{display:flex;gap:8px;width:100%;align-items:center;text-align:left}.gc-timeline span{flex:1;font-size:11px}.gc-metrics{margin:8px 0;display:grid;gap:6px}.gc-metrics>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--ui-line)}.gc-metrics dt{color:var(--ui-muted);font-size:12px}.gc-metrics dd{margin:0;text-align:right;font-size:12px;font-weight:650}.gc-warning{color:#99620e!important;font-size:12px}.gc-muted{font-size:12px;color:var(--ui-muted)}.gc-seeds{display:grid;gap:8px;max-height:310px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ui-line) transparent;padding:2px}.gc-seed{border:1px solid var(--ui-line);border-radius:12px;padding:10px;min-width:0}.gc-seed-title{display:flex;gap:8px;align-items:center}.gc-seed-title>img{width:40px;height:40px;object-fit:contain}.gc-seed-title>span{flex:1;min-width:0;display:grid;gap:2px}.gc-seed-title b{font-size:12px}.gc-seed-title small{font-size:11px;color:var(--ui-muted)}.gc-seed-title>button{width:44px;flex-shrink:0;font-size:21px!important}.gc-seed>p{font-size:11px;color:var(--ui-muted);margin:7px 0}.gc-seed-actions{display:flex;gap:6px}.gc-seed-actions button{flex:1}.gc-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gc-compare>section{border:1px solid var(--ui-line);border-radius:12px;padding:8px;min-width:0}.gc-compare img{display:block;width:48px;height:48px;object-fit:contain;margin:0 auto 6px}.gc-compare>section>b{font-size:12px;overflow-wrap:anywhere}.gc-compare .gc-metrics>div{display:grid;gap:2px}.gc-compare dd{text-align:left}.gc-compare button{width:100%}.gc-stock-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ui-line);padding:8px 0}.gc-stock-row img{width:40px;height:40px;object-fit:contain}.gc-stock-row>span{flex:1;font-size:12px}.gc-stock-row small{display:block;font-size:11px;font-weight:400;color:var(--ui-muted)}.gc-help{padding-left:20px;font-size:12px;color:var(--ui-muted);display:grid;gap:9px}.gc-check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}.gc-check input{width:18px;height:18px;accent-color:var(--gc-accent)}.gc-compost-preview{font-size:12px;color:var(--ui-muted);padding:8px 10px;border:1px solid var(--ui-line);border-radius:10px}.gc-empty{grid-column:1/-1;padding:8px;color:var(--ui-muted);font-size:12px}.gc-dashboard[data-compact=true] .gc-plot{padding:7px;gap:4px}.gc-dashboard[data-compact=true] .gc-plant img{width:28px;height:28px}.gc-dashboard[data-compact=true] .gc-heading>img{display:none}.gc-dashboard[data-contrast=true] .gc-plot-title>span{font-weight:750;color:var(--ui-text);text-decoration:underline;text-underline-offset:3px}.gc-dashboard[data-contrast=true] .gc-plot{border-width:2px}.gc-dashboard[data-contrast=true] .gc-warning{font-weight:750;color:var(--ui-text)!important}.gc-picker .gc-seeds{max-height:240px}.gc-picker details{margin-top:8px}.gc-dashboard h3{font-size:13px;margin:12px 0 4px}html[data-game-theme=dark] .gc-warning{color:#f3bc67!important}@media(max-width:360px){.gc-controls{grid-template-columns:1fr}.gc-stats span{font-size:9px}.gc-compare{grid-template-columns:1fr}.gc-plot{padding:7px}}@media(prefers-reduced-motion:reduce){.gc-dashboard *,.gc-picker *{scroll-behavior:auto!important}} /* pk-style-source:170 */ /* /pokemon-stickers-v60.css */ /* Source stylesheet; scripts/build-client.mjs includes it in game.css. */ /* Important theme declarations are layered; keep hidden options in that layer. */ @layer ui-theme { body .pt-dialog .pt-season-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px} body .pt-dialog .pt-season-filters button{min-height:38px;border:1px solid var(--line,#d7e1e9);border-radius:12px;padding:8px 12px;background:var(--panel,#fff);color:var(--ink,#24445d);font:inherit;cursor:pointer} body .pt-dialog .pt-season-filters button[aria-pressed="true"]{background:var(--ui-accent,#087bbb)!important;border-color:var(--ui-accent,#087bbb)!important;color:#fff!important} body .pt-dialog .pt-options button[hidden]{display:none!important} } /* pk-style-source:171 */ /* /mobile-interface-settings-v1.css */ /* Settings and handedness; all existing game controls retain their native IDs. */ @layer ui-theme { html[data-game-theme] #app #sidePanel .settings-workbench { --set-paper:var(--win-card,#fff);--set-ink:var(--win-ink,#21445a);--set-muted:var(--win-muted,#5c7483);--set-line:var(--win-line,#bed3df);--set-accent:var(--ui-accent,#087ec0);--set-soft:var(--ui-soft,#edf6fc);display:grid;gap:12px;color:var(--set-ink);min-width:0;font-family:'Segoe UI',sans-serif; } html[data-game-theme="dark"] #app #sidePanel .settings-workbench { --set-accent:var(--ui-accent,#79caff);--set-soft:var(--ui-soft,#203f53); } #app #sidePanel .settings-workbench * { box-sizing:border-box;min-width:0; } #app #sidePanel .settings-header { display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:0; } #app #sidePanel .settings-header small { font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--set-accent); } #app #sidePanel .settings-header h2 { font-size:25px;line-height:1.25;margin:3px 0 0;color:var(--set-ink); } #app #sidePanel .settings-save-badge { display:flex;align-items:center;gap:6px;flex:none;padding:7px 9px;border:1px solid var(--set-line);border-radius:9px;font-size:11px;background:var(--set-paper); } #app #sidePanel .settings-workbench svg { width:22px;height:22px;flex:none; } #app #sidePanel .settings-save-badge svg { width:17px;height:17px; } #app #sidePanel .settings-save-note { font-size:12px;line-height:1.5;color:var(--set-muted);margin:0; } #app #sidePanel .settings-layout { display:grid;grid-template-columns:128px minmax(0,1fr);gap:18px;align-items:start; } #app #sidePanel .settings-navigation { display:grid;gap:6px;position:sticky;top:0; } #app #sidePanel .settings-navigation button { display:flex!important;align-items:center;justify-content:flex-start;gap:9px;padding:10px!important;min-height:46px!important;border:1px solid transparent!important;border-radius:10px;background:transparent!important;color:var(--set-muted)!important;font:600 12px/1.3 'Segoe UI',sans-serif!important;box-shadow:none!important;text-transform:none;letter-spacing:0; } #app #sidePanel .settings-navigation button[aria-pressed="true"] { background:var(--set-soft)!important;border-color:var(--set-line)!important;color:var(--set-accent)!important; } #app #sidePanel .settings-content { display:grid;grid-template-columns:minmax(0,1fr);gap:12px; } #app #sidePanel .settings-section-title h2 { margin:0 0 4px;font-size:19px;color:var(--set-ink); } #app #sidePanel .settings-section-title p { color:var(--set-muted);font-size:12px;line-height:1.5;margin:0; } #app #sidePanel .setting-card { padding:16px;border:1px solid var(--set-line);background:var(--set-paper);border-radius:13px;display:grid;gap:12px;box-shadow:none; } #app #sidePanel .setting-heading { display:grid;grid-template-columns:36px minmax(0,1fr) 44px;gap:10px;align-items:start; } #app #sidePanel .setting-icon { display:grid;place-items:center;width:36px;height:36px;background:var(--set-soft);border-radius:10px;color:var(--set-accent); } #app #sidePanel .setting-heading h3 { color:var(--set-ink);font-size:14px;line-height:1.4;margin:0 0 3px; } #app #sidePanel .setting-heading p { color:var(--set-muted);font-size:12px;line-height:1.5;margin:0; } #app #sidePanel .setting-help { display:grid!important;place-items:center;width:44px;min-height:44px!important;padding:10px!important;background:transparent!important;color:var(--set-muted)!important;box-shadow:none!important;border:1px solid transparent!important;border-radius:10px; } #app #sidePanel .setting-help:hover,#app #sidePanel .setting-help[aria-expanded="true"] { color:var(--set-accent)!important;background:var(--set-soft)!important; } #app #sidePanel .setting-side-options,#app #sidePanel .setting-themes { margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; } #app #sidePanel :is(.setting-side-choice,.setting-theme) { position:relative;display:grid;gap:10px;padding:10px;border:1px solid var(--set-line);border-radius:11px;cursor:pointer;overflow:hidden; } #app #sidePanel :is(.setting-side-choice,.setting-theme):has(input:checked) { border-color:var(--set-accent);box-shadow:inset 0 0 0 1px var(--set-accent);background:var(--set-soft); } #app #sidePanel :is(.setting-side-choice,.setting-theme)>input { position:absolute!important;width:1px!important;height:1px!important;min-height:1px!important;min-width:1px!important;margin:0!important;padding:0!important;opacity:0!important; } #app #sidePanel :is(.setting-side-choice,.setting-theme)>span { display:grid;gap:3px; } #app #sidePanel :is(.setting-side-choice,.setting-theme) b { font-size:13px;color:var(--set-ink); } #app #sidePanel :is(.setting-side-choice,.setting-theme) small { font-size:11px;line-height:1.4;color:var(--set-muted);padding-right:12px; } #app #sidePanel .choice-check { position:absolute;bottom:8px;right:6px;display:none;color:var(--set-accent);width:20px;height:20px; } #app #sidePanel :is(.setting-side-choice,.setting-theme):has(input:checked) .choice-check { display:block; } #app #sidePanel .setting-side-preview { position:relative;height:68px!important;background:#e1edf2;border:1px solid #bfd2dc;border-radius:6px;overflow:hidden; } #app #sidePanel .setting-side-preview .preview-dock { position:absolute;bottom:5px;left:5px;right:5px;height:12px;border-radius:3px;background:#b3cbd8; } #app #sidePanel .setting-side-preview .preview-actions { position:absolute;bottom:23px;right:6px;width:25px;height:25px;border-radius:7px;background:#087ec0;color:white;display:grid;place-items:center;font:700 18px/1 sans-serif; } #app #sidePanel .setting-side-preview .preview-tester { position:absolute;bottom:23px;left:6px;width:25px;height:25px;border-radius:7px;background:#e7ddf7;color:#7252aa;display:grid;place-items:center; } #app #sidePanel .setting-side-preview .preview-tester svg { width:16px;height:16px; } #app #sidePanel .setting-side-preview.is-left .preview-actions { left:6px;right:auto; } #app #sidePanel .setting-side-preview.is-left .preview-tester { right:6px;left:auto; } #app #sidePanel .setting-theme>i:first-of-type { display:block;position:relative;height:52px;border:1px solid #becdda;border-radius:6px;background:#f3f7fb; } #app #sidePanel .setting-theme.is-dark>i:first-of-type { background:#122d40;border-color:#4b677a; } #app #sidePanel .setting-theme>i:first-of-type span { position:absolute;inset:7px auto 7px 7px;width:20%;border-radius:3px;background:#8cbdda; } #app #sidePanel .setting-theme>i:first-of-type em { position:absolute;inset:7px 7px 7px 33%;border-radius:3px;background:#c9dfec; } #app #sidePanel .setting-theme.is-dark>i:first-of-type em { background:#315568; } #app #sidePanel .setting-note { margin:0;font-size:11px;line-height:1.5;color:var(--set-muted); } #app #sidePanel .setting-toggle { display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;min-height:44px;cursor:pointer;padding-left:46px; } #app #sidePanel .setting-toggle>span { color:var(--set-muted);font-size:11px; } #app #sidePanel .setting-toggle input { position:absolute!important;right:0;width:48px!important;height:44px!important;margin:0!important;opacity:0!important;cursor:pointer; } #app #sidePanel .setting-toggle>i { width:44px;height:26px;border-radius:20px;background:#8195a3;border:1px solid transparent;pointer-events:none;position:relative; } #app #sidePanel .setting-toggle>i::after { content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:white; } #app #sidePanel .setting-toggle input:checked+i { background:#087ec0; } #app #sidePanel .setting-toggle input:checked+i::after { left:21px; } #app #sidePanel .setting-recommendation { display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--set-line);background:var(--set-soft);padding:12px;border-radius:11px;color:var(--set-accent); } #app #sidePanel .setting-recommendation b { color:var(--set-ink);font-size:12px; } #app #sidePanel .setting-recommendation p { color:var(--set-muted);font-size:11px;line-height:1.4;margin:3px 0 0; } #app #sidePanel .setting-recommendation button { min-height:44px!important;padding:9px!important;background:#087ec0!important;color:white!important;border:0!important;border-radius:9px;font-size:12px; } #app #sidePanel .settings-workbench .audio-settings { display:grid;gap:12px;margin:0;padding:0; } #app #sidePanel .setting-volume { display:flex;align-items:center;gap:12px;min-height:44px; } #app #sidePanel .setting-volume input { width:100%;min-width:0;height:44px;accent-color:#087ec0;margin:0;cursor:pointer; } #app #sidePanel .setting-volume output { min-width:43px;font:700 13px/1.3 'Segoe UI',sans-serif;color:var(--set-accent);text-align:right; } #app #sidePanel .setting-select { display:grid;gap:8px; } #app #sidePanel .setting-select>span { font-size:12px;color:var(--set-muted); } #app #sidePanel .setting-select select { min-height:44px;width:100%;padding:10px;border:1px solid var(--set-line);border-radius:9px;background:var(--set-paper);color:var(--set-ink);font:600 13px 'Segoe UI',sans-serif; } #app #sidePanel .settings-workbench :is(button,input,select):focus-visible { outline:3px solid var(--set-accent)!important;outline-offset:3px; } #app #sidePanel :is(.setting-side-choice,.setting-theme):has(input:focus-visible),#app #sidePanel .setting-toggle:has(input:focus-visible) { outline:3px solid var(--set-accent);outline-offset:3px; } #app #sidePanel .settings-bindings { padding:12px; } #app #sidePanel .settings-bindings .settings-controls-nav { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px; } #app #sidePanel .settings-bindings .settings-controls-nav button { min-height:44px!important; } #app #sidePanel .settings-workbench .binding-row { gap:8px; } #app #sidePanel .settings-workbench .binding-row>div { flex:none; } #app #sidePanel .settings-workbench .binding-row button { min-height:44px!important;min-width:44px!important;max-width:90px;white-space:normal; } #app #sidePanel .settings-workbench .settings-reset { display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px!important;width:100%;padding:9px!important;border-radius:9px;border:1px solid var(--set-line)!important;color:var(--set-ink)!important;background:var(--set-soft)!important;font-size:12px; } #app #sidePanel .settings-footer { border-top:1px solid var(--set-line);padding-top:12px;display:flex;gap:7px;align-items:center;font-size:11px;line-height:1.4;color:var(--set-muted); } #app #sidePanel .settings-footer svg { width:16px;height:16px; } .settings-sr-only { position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap; } html[data-game-theme] .settings-help-tooltip { position:fixed;z-index:20000;max-width:min(320px,calc(100vw - 16px));padding:14px 16px;background:#15364c;color:#f3faff;border:1px solid #53768b;border-radius:12px;box-shadow:0 8px 25px #00152540;pointer-events:none;font:12px/1.55 'Segoe UI',sans-serif; } .settings-help-tooltip b { display:block;font-size:13px;margin-bottom:5px; } .settings-help-tooltip p { margin:0; } #app #sidePanel .settings-header h2:focus { outline:none!important; } @media(min-width:761px) and (min-height:561px) { #app #sidePanel .settings-header { padding-right:48px; } } @media(max-width:760px), (pointer:coarse) and (max-height:560px) { #app #sidePanel .settings-layout { grid-template-columns:minmax(0,1fr);gap:14px; } #app #sidePanel .settings-header h2 { display:none; } #app #sidePanel .settings-navigation { position:static;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px; } #app #sidePanel .settings-navigation button { flex-direction:column;justify-content:center;gap:5px;padding:8px 2px!important;min-height:60px!important;font-size:10px!important; } #app #sidePanel .settings-navigation svg { width:21px;height:21px; } #app #sidePanel .setting-card { padding:12px; } #app #sidePanel .setting-heading { grid-template-columns:30px minmax(0,1fr) 44px;gap:8px; } #app #sidePanel .setting-icon { width:30px;height:34px; } #app #sidePanel .setting-heading h3 { font-size:13px; } #app #sidePanel .setting-recommendation { grid-template-columns:24px minmax(0,1fr); } #app #sidePanel .setting-recommendation button { grid-column:1/-1; } #app #sidePanel .settings-workbench .binding-row { flex-wrap:wrap; } #app #sidePanel .settings-workbench .binding-row>span { flex:1 1 120px; } html[data-game-theme][data-control-side] #gameScreen #testerLauncher { left:max(12px,env(safe-area-inset-left,0px))!important;right:auto!important; } html[data-game-theme][data-control-side="left"] #gameScreen #testerLauncher { left:auto!important;right:max(12px,env(safe-area-inset-right,0px))!important; } html[data-game-theme][data-control-side="right"] #gameScreen #contextAction { left:auto!important;right:max(16px,env(safe-area-inset-right,0px))!important; } html[data-game-theme][data-control-side="left"] #gameScreen #contextAction { right:auto!important;left:max(16px,env(safe-area-inset-left,0px))!important; } html[data-game-theme][data-control-side="left"] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] #desktopMoreMenu.world-rail { left:8px!important;right:auto!important; } html[data-game-theme][data-control-side="left"] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock { left:8px!important;right:auto!important;width:calc(100% - 16px)!important; } html[data-game-theme][data-control-side="left"] #gameScreen #contextAction { transform:none!important; } html[data-game-theme][data-control-side="right"] #gameScreen #contextAction { transform:none!important; } } @media (min-width:761px) and (pointer:coarse) and (max-height:560px) { html[data-game-theme][data-control-side="left"] body:not(.is-battling) #gameScreen#gameScreen[data-world-hud="v2340"] .mobile-dock { width:330px!important; } } @media(max-width:360px) { #app #sidePanel .settings-header h2 { font-size:22px; } #app #sidePanel .settings-save-badge { font-size:10px;padding:6px; } #app #sidePanel .setting-side-options,#app #sidePanel .setting-themes { gap:7px; } #app #sidePanel :is(.setting-side-choice,.setting-theme) { padding:8px; } } } /* pk-style-source:172 */ /* /world-weather-v1.css */ @layer world-weather { #gameScreen #worldThermalHud{position:absolute;top:calc(var(--player-hud-height,110px) + 6px);left:90px;width:168px;pointer-events:auto;z-index:2} #worldThermalHud[hidden],body.is-battling #worldThermalHud{display:none!important} #gameScreen .world-thermal-button{display:flex;align-items:center;gap:5px;width:100%;min-height:28px;padding:3px 5px;border:1px solid transparent;border-radius:7px;background:#f8fcffed;color:#21475b;cursor:pointer} #gameScreen .world-thermal-button>svg{flex:none;width:11px;height:17px;fill:none;stroke:#648794;stroke-width:1.6;stroke-linecap:round} .world-thermal-copy{display:grid;gap:3px;min-width:0;flex:1} .world-thermal-copy>span{display:flex;gap:4px;justify-content:space-between;white-space:nowrap} .world-thermal-copy :is(b,em){font:600 9px/1.1 system-ui} .world-thermal-track{display:block;position:relative;height:4px;border-radius:4px;background:#8298a94d} .world-thermal-track>b{display:block;width:var(--thermal-position,50%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#6bace5,#9dc8c9 40%,#a4cb8b 65%,#e0b45b 85%,#df8267);transition:width .3s} .world-thermal-track>i{position:absolute;left:clamp(3px,var(--thermal-position,50%),calc(100% - 3px));top:50%;width:4px;height:8px;transform:translate(-50%,-50%);background:#325769;border:1px solid white;border-radius:3px} #worldThermalHud[data-kind=cold] svg{stroke:#468fc4}#worldThermalHud[data-kind=hot] svg{stroke:#ca7845} #worldThermalHud[data-kind=paralyzed] button{border-color:#ae89ce;color:#79539a} #gameScreen .world-thermal-button:is(:hover,:focus-visible){background:#edf7fc;border-color:#a2cbdc} .world-thermal-details{box-sizing:border-box;width:min(320px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;padding:20px;border:1px solid #b8d3dd;border-radius:14px;background:#f9fdff;color:#23495c;font:14px/1.5 system-ui} .world-thermal-details p{margin:10px 0}.world-thermal-details small{display:block;font-size:12px} .world-thermal-details button{display:block;min-height:44px;margin:14px 0 0 auto;padding:7px 14px;border:1px solid currentColor;border-radius:8px;color:inherit;background:inherit;cursor:pointer} html[data-game-theme=dark] #gameScreen .world-thermal-button{background:#183946ed;color:#e8f3f5}html[data-game-theme=dark] #gameScreen .world-thermal-button:is(:hover,:focus-visible),html[data-game-theme=dark] .world-thermal-details{background:#183946;color:#edf6f7;border-color:#4c7180} @media(pointer:coarse){#worldThermalHud>button{min-height:44px}} @media(prefers-reduced-motion:reduce){.world-thermal-track>b{transition:none}} } @layer ui-theme { html[data-game-theme] #app #gameScreen #worldMinimapShell #worldHudContext[data-kind=weather] { --ui-paper: #f8fbfd; --ui-ink: #203749; --ui-muted: #4d6474; --ui-line: #c4d3dc; --ui-soft: #e9f0f4; & :is(header b, .hud-weather-scene b, .hud-world-clock time, header button) { color: var(--ui-ink) !important; } & :is(.hud-weather-scene small, .hud-weather-scene p, .hud-world-clock span) { color: var(--ui-muted) !important; } & .hud-world-clock, & > header { border-color: var(--ui-line) !important; } } html[data-game-theme=dark] #app #gameScreen #worldMinimapShell #worldHudContext[data-kind=weather] { --ui-paper: var(--pp-dark-surface-0, #1b1b1d); --ui-ink: var(--pp-dark-text, #f2f1f3); --ui-muted: var(--pp-dark-text-muted, #c1c0c6); --ui-line: var(--pp-dark-border, #4b4b50); --ui-soft: var(--pp-dark-surface-2, #303033); } .hud-weather-back-slot[hidden] { display: none !important; } @media (max-width:760px), (pointer:coarse) and (max-height:560px) { /* Keep the dialog clear of the dock and the minimap's weather trigger. */ html[data-game-theme] #app#app #gameScreen#gameScreen.is-mobile-explore #worldMinimapShell#worldMinimapShell #worldHudContext[data-kind=weather] { --weather-left: calc(12px + env(safe-area-inset-left)); --weather-right: calc(12px + env(safe-area-inset-right)); inset: auto var(--weather-right) calc(88px + env(safe-area-inset-bottom)) var(--weather-left) !important; width: var(--weather-width, auto) !important; max-width: none !important; max-height: calc(100dvh - 108px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; padding: 10px !important; overflow: auto !important; border-radius: 18px !important; & > header { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px !important; padding: 0 !important; border: 0 !important; } & header button { padding: 10px !important; } & .hud-weather-back-slot svg { rotate: 180deg; } & > div { display: grid !important; grid-template-columns: var(--weather-columns, minmax(0, 1fr)); gap: 6px !important; } & :is(.hud-weather-scene, .hud-world-clock) { min-width: 0; padding: 8px !important; gap: 9px !important; border: 1px solid var(--ui-line) !important; border-radius: 12px; } & .hud-weather-scene { background: var(--ui-soft); } & .hud-weather-scene > :is(svg, img) { box-sizing: border-box !important; width: 56px !important; height: 56px !important; flex: 0 0 56px !important; padding: 8px !important; } & .hud-weather-scene > div { gap: 2px !important; overflow-wrap: anywhere; } & .hud-world-clock { flex-direction: row-reverse; } & .hud-world-clock time { white-space: nowrap; } @media (pointer:coarse) and (max-height:560px) and (orientation:landscape) { --weather-right: auto; --weather-width: min(565px, calc(100vw - 184px - env(safe-area-inset-left) - env(safe-area-inset-right))); --weather-columns: minmax(0, 1.35fr) minmax(0, 1fr); } } } } /* pk-style-source:173 */ /* /dialogue-theatre-v4.css */ @layer mobile-window-accessibility{#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open{--dialogue-vh:var(--pk-mobile-vv-height,100dvh);--talk-paper:#fffdf8;--talk-ink:#233f50;--talk-muted:#617781;--talk-edge:#d5e2e2;--talk-accent:#147d90;--talk-soft:#edf5f4;position:fixed!important;inset:0!important;width:var(--pk-mobile-vv-width,100vw)!important;height:var(--dialogue-vh)!important;max-width:none!important;max-height:none!important;padding:24px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;overflow:hidden!important;isolation:isolate}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-shade{position:absolute!important;inset:0!important;background:#102b3d9c!important;backdrop-filter:none!important;animation:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-card{position:relative!important;inset:auto!important;margin:0!important;transform:none!important;width:min(960px,100%)!important;height:min(480px,calc(var(--dialogue-vh) - 48px))!important;min-height:0!important;max-width:960px!important;max-height:calc(var(--dialogue-vh) - 48px)!important;display:grid!important;grid-template-columns:var(--portrait-col,300px) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;gap:0!important;padding:0!important;border:1px solid var(--talk-edge)!important;border-radius:24px!important;background:var(--talk-paper)!important;color:var(--talk-ink)!important;box-shadow:0 24px 80px #061e3c55!important;overflow:hidden!important;animation:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-caption{position:absolute!important;top:24px!important;left:24px!important;right:auto!important;z-index:4!important;width:252px!important;max-width:252px!important;margin:0!important;padding:0!important;border:0!important;background:none!important;color:#315661!important;font-size:10px!important;font-weight:800!important;line-height:1.5!important;letter-spacing:1.2px!important;box-shadow:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-portrait{position:relative!important;inset:auto!important;grid-column:1!important;grid-row:1!important;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#dbeae6!important;border:0!important;border-right:1px solid var(--talk-edge)!important;border-radius:0!important;overflow:hidden!important;isolation:isolate}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-backdrop{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;background-size:cover!important;background-position:48% center!important;filter:none!important;opacity:.5!important;transform:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-portrait:after{content:"";position:absolute!important;inset:0!important;background:linear-gradient(180deg,#edf6e8bb,transparent 40%,#dbeae6 100%)!important;pointer-events:none;z-index:1!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-portrait > i{--actor-height:min(330px,var(--theatre-pixel-height,330px),calc(260px / var(--theatre-crop-ratio,.8)));position:relative!important;inset:auto!important;top:auto!important;left:auto!important;bottom:auto!important;right:auto!important;display:block!important;flex:none!important;margin:22px 0 0!important;height:var(--actor-height)!important;width:calc(var(--actor-height)*var(--theatre-crop-ratio,.8))!important;max-width:calc(100% - 24px)!important;max-height:calc(100% - 120px)!important;aspect-ratio:var(--theatre-crop-aspect,.8)!important;transform:none!important;filter:none!important;image-rendering:auto!important;border:0!important;border-radius:0!important;background-color:transparent!important;opacity:1!important;z-index:2!important;mask-image:none!important;animation:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueRole,#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-listener,#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-face,#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-halo,#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-expression,#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-reaction,#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-cue{display:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-stage{position:absolute!important;inset:auto 12px 12px!important;display:block!important;height:76px!important;z-index:3!important;pointer-events:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-prop{position:relative!important;inset:auto!important;display:block;width:72px!important;height:72px!important;margin:auto!important;object-fit:contain!important;transform:none!important;filter:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-partners{position:relative!important;inset:auto!important;display:flex;justify-content:center!important;gap:4px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-partners img{width:64px!important;height:64px!important;object-fit:contain!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-dock{position:relative!important;inset:auto!important;grid-column:2!important;grid-row:1!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;display:flex!important;flex-direction:column!important;padding:0!important;margin:0!important;background:var(--talk-paper)!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;overflow:hidden!important;animation:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-dock:before{display:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-copy{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;flex:1 1 auto!important;padding:28px 28px 12px!important;margin:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-width:thin;background:transparent!important;color:var(--talk-ink)!important;border:0!important;box-shadow:none!important;animation:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-copy header{position:relative!important;display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;margin:0 0 20px!important;padding:0 0 18px!important;border-bottom:1px solid var(--talk-edge)!important;background:transparent!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-copy header > span{display:block!important;min-width:0!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueProgress{display:block!important;max-width:100%!important;margin:0 0 6px!important;color:var(--talk-accent)!important;font-size:10px!important;line-height:1.5!important;font-weight:800!important;letter-spacing:1.1px!important;white-space:normal!important;overflow-wrap:anywhere}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueSpeaker{margin:0!important;color:var(--talk-ink)!important;font-size:26px!important;font-weight:850!important;line-height:1.2!important;letter-spacing:-.5px!important;overflow-wrap:anywhere!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueSound{position:relative!important;inset:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;flex:none!important;min-width:80px!important;width:auto!important;max-width:112px!important;min-height:44px!important;height:44px!important;padding:8px!important;border:1px solid var(--talk-edge)!important;border-radius:12px!important;background:var(--talk-soft)!important;color:var(--talk-muted)!important;box-shadow:none!important;font-size:10px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueSound b{display:block!important;max-width:none!important;font:inherit!important;white-space:normal!important;line-height:1.25!important;color:inherit!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueSound i{display:block!important;width:16px!important;height:16px!important;flex:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueText{width:auto!important;max-width:56ch!important;min-height:0!important;margin:0 0 16px!important;padding:0!important;color:var(--talk-ink)!important;font-size:18px!important;font-weight:500!important;line-height:1.6!important;overflow-wrap:anywhere!important;text-shadow:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueHint{display:block!important;margin:0 0 12px!important;padding:0!important;color:var(--talk-muted)!important;font-size:11px!important;line-height:1.5!important;font-weight:500!important;letter-spacing:0!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-objective{margin:12px 0!important;padding:10px 12px!important;color:var(--talk-ink)!important;background:var(--talk-soft)!important;border:1px solid var(--talk-edge)!important;border-radius:10px!important;font-size:12px!important;line-height:1.5!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-last-reply{margin:0 0 12px!important;color:var(--talk-muted)!important;font-size:12px!important;line-height:1.5!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-propshelf{display:block!important;margin:0!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-cards{position:relative!important;inset:auto!important;display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:8px 0!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-item{display:flex!important;align-items:center!important;gap:6px!important;max-width:100%!important;min-width:0!important;padding:6px 8px!important;border:1px solid var(--talk-edge)!important;border-radius:9px!important;background:var(--talk-soft)!important;color:var(--talk-ink)!important;box-shadow:none!important;font-size:11px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-item img{width:28px!important;height:28px!important;object-fit:contain!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-board,#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-log{display:block;width:100%!important;margin:0!important;padding:0!important;border:0!important;color:var(--talk-muted)!important;background:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-board summary,#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-log summary{display:flex!important;align-items:center!important;min-height:44px!important;padding:8px 0!important;margin:0!important;color:var(--talk-muted)!important;font-size:11px!important;line-height:1.4!important;cursor:pointer}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-board article,#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-log ol{padding:8px 12px!important;border:1px solid var(--talk-edge)!important;border-radius:10px!important;background:var(--talk-soft)!important;font-size:12px!important;line-height:1.55!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-topbar{position:relative!important;inset:auto!important;flex:0 0 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;gap:12px!important;width:100%!important;max-height:60%!important;margin:0!important;padding:16px 28px 22px!important;background:var(--talk-paper)!important;border:0!important;border-top:1px solid var(--talk-edge)!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-choices{position:relative!important;inset:auto!important;flex:1 1 auto!important;min-height:0!important;width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin:0!important;padding:0!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:thin}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-choices:empty{display:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-choices button{position:relative!important;display:grid!important;grid-template-columns:24px minmax(0,1fr) 12px!important;grid-template-rows:auto!important;align-items:center!important;gap:10px!important;width:100%!important;min-width:0!important;min-height:52px!important;height:auto!important;margin:0!important;padding:12px 14px!important;color:var(--talk-ink)!important;background:var(--talk-soft)!important;border:1px solid var(--talk-edge)!important;border-radius:12px!important;text-align:left!important;font-size:14px!important;line-height:1.4!important;box-shadow:none!important;transform:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-key{grid-column:1!important;grid-row:1!important;display:grid!important;place-items:center!important;width:24px!important;height:24px!important;min-width:24px!important;border:1px solid var(--talk-edge)!important;border-radius:7px!important;background:var(--talk-paper)!important;color:var(--talk-accent)!important;font-size:11px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-choice-label{font-size:inherit!important;line-height:inherit!important;grid-column:2!important;grid-row:1!important;font-weight:650!important;overflow-wrap:anywhere!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-choice-note{display:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-choice-arrow{grid-column:3!important;grid-row:1!important;color:var(--talk-accent)!important;font-size:22px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-actions{position:relative!important;inset:auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;flex:none!important;width:100%!important;gap:12px!important;margin:0!important;padding:0!important;border:0!important;background:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueNext{order:2!important;flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:100%!important;min-height:48px!important;height:auto!important;margin:0!important;padding:12px 16px!important;border:1px solid var(--talk-accent)!important;border-radius:12px!important;background:var(--talk-accent)!important;color:white!important;font-size:12px!important;font-weight:800!important;line-height:1.4!important;white-space:normal!important;box-shadow:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueClose{position:relative!important;inset:auto!important;order:1!important;flex:none!important;width:auto!important;min-width:76px!important;max-width:120px!important;min-height:44px!important;height:44px!important;margin:0!important;padding:10px 14px!important;border:1px solid var(--talk-edge)!important;border-radius:12px!important;color:var(--talk-muted)!important;background:transparent!important;box-shadow:none!important;font-size:12px!important;line-height:1.4!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open button:focus-visible,#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open summary:focus-visible{outline:3px solid var(--talk-accent)!important;outline-offset:-3px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-choices button:hover,#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueClose:hover{border-color:var(--talk-accent)!important;background:var(--talk-paper)!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open [hidden],#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open button[hidden],#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-prop[hidden],#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-partners[hidden]{display:none!important}#app[data-game-theme="dark"] #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open{--talk-paper:#17313e;--talk-ink:#f1f5ef;--talk-muted:#b1c6cc;--talk-edge:#385460;--talk-accent:#2394a6;--talk-soft:#203e4b}#app[data-game-theme="dark"] #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-portrait{background:#203e4b!important}#app[data-game-theme="dark"] #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-portrait:after{background:linear-gradient(180deg,#203e4baa,transparent 45%,#203e4b)!important}#app[data-game-theme="dark"] #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-caption{color:#e1eee8!important}@media(max-width:700px) and (min-height:481px){#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open{padding:max(72px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-card{width:min(460px,100%)!important;height:auto!important;max-height:calc(var(--dialogue-vh) - 88px)!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:144px minmax(0,1fr)!important;border-radius:20px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-portrait{grid-column:1!important;grid-row:1!important;border:0!important;border-bottom:1px solid var(--talk-edge)!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-portrait > i{--actor-height:142px;margin:12px 0 0!important;max-height:none!important;max-width:65%!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-caption{display:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-dock{grid-column:1!important;grid-row:2!important;height:auto!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-copy{padding:18px 18px 8px!important;flex:1 1 auto!important;max-height:calc(var(--dialogue-vh) - 410px)!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-copy header{padding-bottom:12px!important;margin-bottom:14px!important;gap:8px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueSpeaker{font-size:22px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueSound{min-width:72px!important;max-width:88px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueSound i{display:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueText{min-height:0!important;font-size:16px!important;line-height:1.55!important;margin-bottom:12px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-topbar{padding:12px 18px 16px!important;gap:10px!important;max-height:min(260px,42dvh)!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-choices button{min-height:48px!important;padding:10px 12px!important;font-size:13px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-stage{display:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-board summary,#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-log summary{min-height:44px!important}}@media(max-height:650px) and (max-width:700px) and (min-height:481px){#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-card{grid-template-rows:112px minmax(0,1fr)!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-portrait > i{--actor-height:108px;margin:0!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-copy{padding:12px 14px 6px!important;max-height:calc(var(--dialogue-vh) - 375px)!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-copy header{margin-bottom:10px!important;padding-bottom:10px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueSpeaker{font-size:20px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-topbar{padding:10px 14px 12px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueHint{display:none!important}}@media(max-height:480px){#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open{padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-card{width:min(820px,100%)!important;height:calc(var(--dialogue-vh) - 16px)!important;max-height:calc(var(--dialogue-vh) - 16px)!important;grid-template-columns:180px minmax(0,1fr)!important;border-radius:18px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-portrait > i{--actor-height:min(230px,var(--theatre-pixel-height,230px),calc(144px / var(--theatre-crop-ratio,.8)));max-height:calc(100% - 65px)!important;margin:24px 0 0!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-caption{top:14px!important;left:14px!important;max-width:152px!important;width:152px!important;font-size:9px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-copy{padding:14px 18px 6px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .dialogue-copy header{padding-bottom:10px!important;margin-bottom:12px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueSpeaker{font-size:22px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueText{font-size:15px!important;min-height:0!important;margin-bottom:8px!important;line-height:1.5!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open #dialogueHint{display:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .theatre-topbar{padding:10px 18px 12px!important;gap:8px!important;max-height:65%!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-choices button{min-height:44px!important;padding:8px 12px!important;font-size:13px!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open .story-stage{display:none!important}}}@layer mobile-window-accessibility{#app[data-screen=game]:has(#dialogueDialog.r9.is-open) #toast#toast{top:max(8px,env(safe-area-inset-top))!important;bottom:auto!important;left:50%!important;right:auto!important;max-width:min(380px,calc(100vw - 24px))!important;transform:translateX(-50%)!important}@media(max-height:480px){#app[data-screen=game]:has(#dialogueDialog.r9.is-open) #toast#toast{top:auto!important;bottom:18px!important;left:max(26px,env(safe-area-inset-left))!important;max-width:148px!important;transform:none!important;font-size:10px!important;padding:6px 8px!important}}}@layer mobile-window-accessibility{#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-theatre-identity=npc-professor-oak]{--portrait-col:380px}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-theatre-identity=npc-professor-oak] .story-caption{display:none!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-theatre-identity=npc-professor-oak] .dialogue-portrait>i{--actor-height:680px;position:absolute!important;left:50%!important;bottom:-215px!important;margin:0!important;max-height:none!important;max-width:none!important;transform:translateX(-50%)!important}#app:has(#dialogueDialog.r9.is-open) #testerLauncher{visibility:hidden!important}@media(max-width:700px) and (min-height:481px){#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-theatre-identity=npc-professor-oak] .dialogue-card{grid-template-rows:190px minmax(0,1fr)!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-theatre-identity=npc-professor-oak] .dialogue-portrait>i{--actor-height:300px;bottom:-118px!important}}@media(max-width:700px) and (min-height:481px) and (max-height:650px){#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-theatre-identity=npc-professor-oak] .dialogue-card{grid-template-rows:128px minmax(0,1fr)!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-theatre-identity=npc-professor-oak] .dialogue-portrait>i{--actor-height:240px;bottom:-112px!important}}@media(max-height:480px){#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-theatre-identity=npc-professor-oak] .dialogue-card{grid-template-columns:280px minmax(0,1fr)!important}#app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-theatre-identity=npc-professor-oak] .dialogue-portrait>i{--actor-height:500px;bottom:-140px!important}}} /* pk-style-source:174 */ /* /dialogue-cutscene-prototype.css */ .cutscene-workshop{position:fixed;inset:0;z-index:14000;isolation:isolate;display:grid;grid-template-rows:70px minmax(0,1fr) auto;background:#112636;color:#f7f4e9;font:500 16px/1.45 system-ui;overflow:hidden;color-scheme:dark}.cutscene-workshop *{box-sizing:border-box}.cutscene-workshop [hidden]{display:none!important}.cutscene-workshop button{min-height:44px;border:1px solid #7e9ba780;border-radius:4px;background:#183b4a;color:#f8f4e8;font:600 14px/1.25 system-ui;padding:10px 16px;cursor:pointer;touch-action:manipulation}.cutscene-workshop button:hover{background:#245265;border-color:#e4b36b}.cutscene-workshop button:focus-visible{outline:3px solid #efbc73;outline-offset:3px}.cutscene-workshop button:disabled{opacity:.5;cursor:default}.cut-camera,.cut-vignette{position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover}.cut-camera{filter:blur(2px) saturate(.8);opacity:.62;transform:scale(1.04)}.cut-vignette{z-index:-1;background:linear-gradient(180deg,#081a30a3,transparent 30%,#081a3066 68%,#081a30)}.cut-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;background:#0a2231b3;border-bottom:1px solid #b6d7d222;z-index:8}.cut-header>span{font-size:12px;letter-spacing:.14em}.cut-header b{margin-left:16px;color:#e5ba7b;font-size:10px}.cut-header nav{display:flex;gap:8px}.cut-header button{min-width:48px;font-size:12px;padding:8px 12px}.cut-stage{position:relative;min-height:0;overflow:hidden}.cut-actors{position:absolute;inset:0}.cut-person{position:absolute;bottom:0;left:0;width:58%;height:100%;overflow:hidden;filter:drop-shadow(0 12px 18px #07202b55);mask-image:linear-gradient(#000 90%,transparent)}.cut-person:nth-child(2){left:42%}.cut-person:nth-child(3){left:55%}.cut-person>i{display:block;position:absolute;top:8%;left:50%;transform:translateX(-50%);height:100%;width:auto;aspect-ratio:var(--cut-ratio,1);background-repeat:no-repeat}.cut-actors[data-count="1"] .cut-person{left:4%;width:48%}.cut-actors[data-count="3"] .cut-person{width:43%;left:0}.cut-actors[data-count="3"] .cut-person:nth-child(2){left:29%}.cut-actors[data-count="3"] .cut-person:nth-child(3){left:57%}.cutscene-workshop[data-beat="3"] .cut-person{border-right:1px solid #f2d59e66;background:linear-gradient(90deg,#133e4b66,transparent);width:33.34%;left:0}.cutscene-workshop[data-beat="3"] .cut-person:nth-child(2){left:33.33%}.cutscene-workshop[data-beat="3"] .cut-person:nth-child(3){left:66.66%}.cutscene-workshop[data-beat="4"] .cut-person{opacity:.3;width:34%;left:0}.cutscene-workshop[data-variant="comic"] .cut-person{border:3px solid #fff7;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);background:#112f4655}.cut-theft{display:none;position:absolute;left:43%;top:49%;z-index:2;padding:12px 18px;border-bottom:8px solid #94b5c1;border-radius:50%;gap:7px;background:#cad9df}.cutscene-workshop[data-beat="1"] .cut-theft{display:flex}.cut-theft i{width:35px;height:35px;display:block;border:3px solid #233e4d;border-radius:50%;background:linear-gradient(#e54754 46%,#243943 46%,#243943 56%,#f7f3df 56%);box-shadow:inset -5px -4px 0 #132b3c20}.cut-impact{position:absolute;top:14%;left:48%;font-size:90px;font-weight:900;font-style:italic;color:#ffe2a3;text-shadow:4px 5px #82363a;display:none;pointer-events:none}.cutscene-workshop[data-beat="3"] .cut-impact{display:block}.cut-panel{position:relative;margin:0 24px 20px;padding:18px 24px 20px;border:1px solid #a8c2c349;border-top:3px solid #d6ad71;background:#102b3df5;box-shadow:0 -15px 65px #08243733;z-index:7}.cut-timeline{display:flex;gap:5px;margin-bottom:15px}.cut-timeline>span{height:3px;flex:1;background:#49616a}.cut-timeline .past{background:#85b8a8}.cut-timeline .current{background:#e9b768}.cut-heading{display:flex;justify-content:space-between;color:#e2ba7d;letter-spacing:.09em;font-size:10px}.cut-speaker{font-size:11px}.cut-panel h2{font-size:clamp(22px,2.4vw,32px);line-height:1.2;margin:7px 0}.cut-text{margin:8px 0;font-size:17px;line-height:1.5;min-height:26px;max-width:1000px}.cut-help{font-size:11px;color:#afc7ce;margin:10px 0}.cut-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.cut-actions button:first-child{border-color:#d8ae72;background:#28545d}.cut-hotspots{position:absolute;inset:0;z-index:5}.cut-hotspots button{position:absolute;left:var(--clue-x);top:var(--clue-y);transform:translate(-50%,-50%);display:flex;gap:10px;align-items:center;background:#102e41eb;border:1px solid #e3bc7d;box-shadow:0 0 0 5px #edc48622;min-width:130px}.cut-hotspots b{display:grid;place-items:center;width:34px;height:34px;background:#d8b47b;color:#173242;border-radius:50%;font-size:22px}.cut-hotspots span{font-size:12px}.cut-evidence{position:absolute;bottom:10px;left:12px;right:12px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:14px}.cut-evidence-card{position:relative;touch-action:none!important;max-width:58%;box-shadow:0 8px 20px #061c3466;z-index:2}.cut-drop{padding:14px;min-width:130px;border:2px dashed #b5cbbf;border-radius:7px;background:#1a424ad9;font-size:12px}.cut-drop.is-dragging{border-color:#ffe0a3;background:#467761}.cutscene-workshop[data-input="desktop"] .cut-evidence{display:none}@media(max-width:760px){.cutscene-workshop{grid-template-rows:62px minmax(0,1fr) auto}.cut-header{padding:8px 10px}.cut-header>span{font-size:9px;letter-spacing:.03em}.cut-header b{display:block;margin:3px 0 0;font-size:8px}.cut-header nav{gap:4px}.cut-header button{min-width:44px;padding:6px;font-size:10px}.cut-panel{margin:0 9px 10px;padding:12px 13px;max-height:50dvh;overflow:auto}.cut-panel h2{font-size:23px}.cut-text{font-size:14px;line-height:1.5}.cut-help{font-size:10px}.cut-timeline{margin-bottom:10px}.cut-actions{gap:7px;justify-content:stretch}.cut-actions button{flex:1;min-width:110px;font-size:12px;padding:9px}.cut-person{width:65%}.cut-person:nth-child(2){left:35%}.cut-person>i{height:100%;width:auto;aspect-ratio:var(--cut-ratio,1);top:4%}.cut-actors[data-count="1"] .cut-person{width:60%;left:0}.cut-hotspots button{min-width:0;padding:7px;gap:5px}.cut-hotspots span{max-width:90px;font-size:10px}.cut-hotspots b{width:28px;height:28px;font-size:19px}.cut-theft{left:45%;padding:8px 10px;top:55%;gap:4px}.cut-theft i{width:23px;height:23px}.cut-impact{font-size:60px;left:46%}.cut-evidence{bottom:5px;gap:7px}.cut-drop{min-width:110px;padding:10px;font-size:10px}.cut-evidence-card{font-size:11px!important;max-width:54%}.cutscene-workshop[data-beat="4"] .cut-person{opacity:.2}.cutscene-workshop[data-beat="4"] .cut-hotspots button[data-clue="tray"]{left:42%;top:35%}.cutscene-workshop[data-beat="4"] .cut-hotspots button[data-clue="thread"]{left:77%;top:12%}.cutscene-workshop[data-beat="4"] .cut-hotspots button[data-clue="track"]{left:31%;top:61%}}@media(max-height:480px) and (min-width:641px){.cutscene-workshop{grid-template-columns:54% 46%;grid-template-rows:60px minmax(0,1fr)}.cut-header{grid-column:1/3;padding:7px 13px}.cut-stage{grid-column:1;grid-row:2}.cut-panel{grid-column:2;grid-row:2;margin:8px 12px 12px 0;padding:12px;overflow:auto}.cut-panel h2{font-size:22px}.cut-text{font-size:13px}.cut-help{font-size:9px}.cut-person>i{width:auto;aspect-ratio:var(--cut-ratio,1)}.cut-actions button{font-size:11px;padding:8px}.cut-hotspots button{min-width:0;padding:7px;gap:5px}.cut-hotspots span{font-size:10px}.cut-evidence{bottom:6px}.cut-drop{min-width:110px;padding:8px}.cut-evidence-card{font-size:10px!important;max-width:50%}}@media(prefers-reduced-motion:reduce){.cutscene-workshop *{animation:none!important;transition:none!important}.cut-impact{display:none!important}}.cutscene-workshop[data-beat="1"] .cut-person:nth-child(1){left:52%;width:46%;height:87%;z-index:1;filter:brightness(.65)}.cutscene-workshop[data-beat="1"] .cut-person:nth-child(2){left:1%;width:70%;height:100%;z-index:3;filter:drop-shadow(0 12px 18px #07202b55)}.cutscene-workshop[data-beat="2"] .cut-actors[data-count="1"] .cut-person{left:25%;width:50%}@media(max-width:760px){.cutscene-workshop[data-beat="2"] .cut-actors[data-count="1"] .cut-person{left:10%;width:80%}}.cut-loader{position:absolute;inset:0;z-index:15;display:grid;place-content:center;justify-items:center;gap:16px;background:#143344f5;padding:28px;text-align:center;font-size:14px}.cut-loader>i{width:56px;height:56px;border:3px solid #d8c292;border-radius:50%;background:linear-gradient(#c95365 46%,#d8c292 46%,#d8c292 55%,#f4ede0 55%);animation:cut-load 1.4s ease-in-out infinite}.cutscene-workshop[data-loading="false"] .cut-loader{display:none}.cutscene-workshop[data-loading="true"] .cut-actors,.cutscene-workshop[data-loading="error"] .cut-actors{opacity:0}@keyframes cut-load{50%{transform:rotate(30deg) scale(.93)}}@media(max-width:760px){.cut-panel{display:flex;flex-direction:column}.cut-panel>*{flex-shrink:0}.cut-panel .cut-text{flex:1 1 auto;min-height:42px;max-height:84px;overflow:auto}.cut-panel .cut-help{max-height:29px;overflow:auto}.cutscene-workshop[data-beat="7"] .cut-actions button{min-width:76px;font-size:10px}} /* Keep native notifications readable above the dialogue, without covering replies. */ @layer ui-theme{ #app[data-screen=game]:has(#dialogueDialog.r8.is-open) #toast{top:max(74px,calc(env(safe-area-inset-top) + 74px))!important;bottom:auto!important;left:50%!important;right:auto!important;max-width:min(380px,calc(100vw - 24px))!important;transform:translateX(-50%) translateY(-8px)!important} #app[data-screen=game]:has(#dialogueDialog.r8.is-open) #toast.is-open{transform:translateX(-50%) translateY(0)!important} @media(max-height:480px) and (min-width:641px){#app[data-screen=game]:has(#dialogueDialog.r8.is-open) #toast{left:23vw!important;max-width:calc(46vw - 24px)!important}} } /* pk-style-source:175 */ /* /story-dialogue-cutscenes-v1.css */ /* Quest moments stay inside the normal, keyboard-accessible dialogue window. */ @layer mobile-window-accessibility { #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-theatre-art="original-story-cast-chibi-v1"] .dialogue-portrait > i { -webkit-mask-image: linear-gradient(#000 0 89%, transparent 100%) !important; mask-image: linear-gradient(#000 0 89%, transparent 100%) !important; } @media (max-width: 700px) and (min-height: 700px) { #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-theatre-identity="npc-professor-oak"] .dialogue-card { grid-template-rows: 220px minmax(0, 1fr) !important; } #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-theatre-identity="npc-professor-oak"] .dialogue-portrait > i { --actor-height: 320px; bottom: -105px !important; } #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-theatre-art="original-story-cast-chibi-v1"] .dialogue-card { grid-template-rows: 190px minmax(0, 1fr) !important; } #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-theatre-art="original-story-cast-chibi-v1"] .dialogue-portrait > i { --actor-height: 186px; } } #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-cinematic^="story-"] .dialogue-portrait::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 52% 70%, rgba(255, 246, 186, .34), transparent 64%); } #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-cinematic="pikachu-entrance"] .story-prop, #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-cinematic="pikachu-join"] .story-prop { filter: drop-shadow(0 0 13px rgba(255, 202, 58, .82)) !important; } #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-cinematic="pikachu-shock"] .story-stage::before, #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-cinematic="pikachu-shock"] .story-stage::after { content: "⚡"; position: absolute; top: -36px; left: 12%; z-index: 5; color: #ffe16b; font-size: clamp(30px, 4vw, 58px); line-height: 1; text-shadow: 0 2px 0 #7b4e18, 0 0 18px #fff4af; pointer-events: none; } #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-cinematic="pikachu-shock"] .story-stage::after { left: auto; right: 10%; top: -12px; font-size: clamp(22px, 3vw, 42px); transform: rotate(24deg); } @media (min-width: 701px) and (min-height: 481px) { #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-cinematic="pikachu-shock"] .story-stage { inset: auto 10px 8px auto !important; width: 110px !important; height: 110px !important; } #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-cinematic="pikachu-shock"] .story-prop { width: 108px !important; height: 108px !important; } } @media (max-width: 760px) { #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-cinematic="pikachu-shock"] .story-stage::before { top: -22px; left: 4%; } #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-cinematic="pikachu-shock"] .story-stage::after { top: -4px; right: 4%; } } @media (max-width: 700px) and (min-height: 481px) { #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-cinematic^="pikachu-"] .story-stage { display: block !important; inset: auto 8px 4px auto !important; width: 78px !important; height: 78px !important; z-index: 4 !important; } #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-cinematic^="pikachu-"] .story-prop { width: 76px !important; height: 76px !important; } } @media (max-height: 480px) { #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-cinematic^="pikachu-"] .story-stage { display: block !important; inset: auto 8px 3px auto !important; width: 58px !important; height: 58px !important; z-index: 4 !important; } #app #dialogueDialog#dialogueDialog#dialogueDialog.r9.is-open[data-cinematic^="pikachu-"] .story-prop { width: 56px !important; height: 56px !important; } } } /* /inventory-refinement.css: deferred, original cascade position */ @layer inventory-refinement;@media all{:root[data-pk-style-slot="owner-176"]{}} /* pk-style-source:177 */ /* /chat-refresh-v5.css */ @layer chat-trainers{html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision]{&{font-family:var(--ui-font,inherit) !important;--chat75-panel:#f5f8fc;}& :is(button,input,textarea,select){font-family:inherit !important;}& .chat-message:not(.is-notice) .chat-message-body > p{font-size:var(--chat-font-size,14px) !important;font-weight:450 !important;line-height:1.5 !important;overflow-wrap:anywhere;}& :is(.chat-author-button,.chat-online-copy b,.chat-trainer-name){font-size:13px !important;font-weight:650 !important;letter-spacing:0 !important;text-transform:none !important;}& .chat-trainer-name.is-premium{color:var(--chat75-ink) !important;}& .chat-premium-badge{flex:none;color:#ad7d30 !important;}& .chat-message-meta time{font-size:11px !important;font-weight:450 !important;}& :is(.chat-message-avatar,.chat-player-avatar,#chatPrivateAvatar).is-hero-portrait{background:#263244 !important;background-image:none !important;border:1px solid #43546b !important;overflow:hidden !important;border-radius:12px !important;}& :is(.chat-message-avatar,.chat-player-avatar,#chatPrivateAvatar).is-hero-portrait > img{display:block !important;width:100% !important;height:100% !important;object-fit:contain !important;object-position:center !important;padding:0 !important;}& .chat-emoji-art{display:inline-block !important;width:1.45em !important;height:1.45em !important;max-width:none !important;margin:0 1px !important;vertical-align:-.3em !important;object-fit:contain !important;}& #chatEmojiGrid > button{min-width:40px !important;min-height:44px !important;display:grid !important;place-items:center !important;}& #chatEmojiGrid .chat-emoji-art{width:28px !important;height:28px !important;margin:0 !important;}}} /* pk-style-source:178 */ /* /chat-refresh-v6.css */ @layer chat-trainers{html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision]{--chat6-wall:#eaf0f6;--chat6-card:#fff;--chat6-edge:#d6e0eb;--chat6-rail:#f5f8fc;& .chat-log{background:var(--chat6-wall) url('/assets/chat-v6/chat-wallpaper.svg') repeat!important;background-size:180px 180px!important;padding:10px!important;}& .chat-message:not(.is-notice){background:var(--chat6-card)!important;border:1px solid var(--chat6-edge)!important;border-radius:14px!important;padding:10px!important;margin:0 0 8px!important;box-shadow:0 1px 2px #14283c06!important;}& .chat-online-panel{background:var(--chat6-card)!important;}& :is(.chat-message-avatar,.chat-player-avatar,#chatPrivateAvatar).is-hero-portrait{background:linear-gradient(150deg,#344c66,#1c2b40)!important;border-color:#46617b!important;}& .chat-front-portrait{position:relative!important;display:block!important;width:100%!important;height:100%!important;overflow:hidden!important;}& .chat-front-portrait > img{position:absolute!important;display:block!important;width:1350%!important;height:1800%!important;max-width:none!important;max-height:none!important;left:-25%!important;top:-6.25%!important;object-fit:fill!important;}& .is-hero-portrait > img.chat-head-portrait{object-fit:cover!important;object-position:50% 18%!important;transform:scale(1.75);transform-origin:50% 18%;}& #chatEmojiPanel{display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto!important;height:360px!important;max-height:calc(100dvh - 118px)!important;min-height:0!important;padding:0!important;overflow:hidden!important;background:var(--chat6-card)!important;border:1px solid var(--chat6-edge)!important;border-radius:16px!important;box-shadow:0 12px 36px #12273f26!important;}& #chatEmojiPanel[hidden]{display:none!important;}& .chat-media-head{min-height:44px!important;padding:6px 10px!important;border-bottom:0!important;}& #chatEmojiGroupLabel{font-size:12px!important;line-height:16px!important;}& #chatEmojiPackMeta{display:block!important;font-size:10px!important;line-height:14px!important;color:var(--chat75-copy)!important;}& .chat-media-search{display:flex!important;align-items:center!important;gap:6px!important;min-height:34px!important;margin:0 10px 6px!important;padding:0 10px!important;border:1px solid var(--chat6-edge)!important;border-radius:9px!important;background:var(--chat6-rail)!important;color:var(--chat75-copy)!important;}& #chatMediaSearch{width:100%!important;min-width:0!important;height:32px!important;min-height:0!important;padding:0!important;border:0!important;outline-offset:3px;background:transparent!important;color:var(--chat75-ink)!important;font-size:13px!important;box-shadow:none!important;}& #chatEmojiGrid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(38px,1fr))!important;grid-auto-rows:42px!important;align-content:start!important;align-items:center!important;justify-content:start!important;gap:3px!important;min-height:0!important;margin:0!important;padding:6px 10px!important;overflow:auto!important;overscroll-behavior:contain;scrollbar-width:thin;}& #chatEmojiGrid > button{width:100%!important;height:40px!important;min-width:0!important;min-height:0!important;padding:4px!important;border:0!important;border-radius:8px!important;background:transparent!important;}& #chatEmojiGrid > button:hover{background:var(--chat6-rail)!important;}& #chatEmojiGrid .chat-emoji-art{width:28px!important;height:28px!important;}& .chat-emoji-category-rail{margin:0!important;padding:4px 5px!important;min-height:48px!important;border-top:1px solid var(--chat6-edge)!important;border-bottom:0!important;background:var(--chat6-rail)!important;}& #chatEmojiCategories{display:flex!important;align-items:center!important;gap:4px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;touch-action:pan-x;}& #chatEmojiCategories > button{flex:0 0 40px!important;width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;padding:3px!important;border-radius:9px!important;}& #chatEmojiCategories > button.is-active{background:#278adb1c!important;box-shadow:inset 0 -3px #278adb!important;}& #chatEmojiCategories > button > span{width:34px!important;height:34px!important;display:grid!important;place-items:center!important;}& #chatEmojiCategories :is(img,.chat-emoji-art){width:32px!important;height:32px!important;object-fit:contain!important;}& .chat-emoji-rail-button{width:24px!important;min-width:24px!important;}& .chat-media-empty{grid-column:1/-1;font-size:13px;line-height:1.5;color:var(--chat75-copy);text-align:center;margin:28px 6px;}}html[data-game-theme="dark"] .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision]{--chat6-wall:#1d2b3a;--chat6-card:#253648;--chat6-edge:#344a60;--chat6-rail:#203043;}} @layer ui-theme{html[data-game-theme] .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision]{& .chat-log{background:var(--chat6-wall) url('/assets/chat-v6/chat-wallpaper.svg') repeat!important;background-size:180px 180px!important;}& .chat-message:not(.is-notice){background:var(--chat6-card)!important;border-color:var(--chat6-edge)!important;}& .chat-online-sidebar{background:var(--chat6-card)!important;}}} @layer mobile-window-accessibility{@media(max-height:480px){html[data-game-theme] .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision]{& #chatEmojiPanel{position:fixed!important;inset:8px 8px 66px!important;width:auto!important;height:auto!important;max-height:none!important;max-width:none!important;min-height:0!important;}& #chatEmojiGroupLabel{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:36vw!important;}& #chatEmojiPackMeta{display:none!important;}}}} /* pk-style-source:179 */ /* /chat-png-stickers-v12.css */ @layer chat-trainers { /* R1: bounded picker for standard emoji and the current PNG sticker catalogue. */ html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] { & > #chatEmojiPanel.chat-emoji-panel { position:absolute!important;inset:auto auto 72px 12px!important; display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:46px 44px 28px minmax(0,1fr) 50px auto!important; width:min(364px,calc(100% - 24px))!important;height:min(416px,calc(100% - 76px),calc(100dvh - 146px))!important; min-width:0!important;min-height:0!important;max-height:calc(100dvh - 96px)!important; padding:0!important;overflow:hidden!important;border:1px solid var(--chat6-edge)!important;border-radius:16px!important; background:var(--chat6-card)!important;color:var(--chat75-ink)!important;box-shadow:0 12px 40px #071b3433!important;isolation:isolate; & [hidden] {display:none!important;} & > * {min-width:0!important;box-sizing:border-box!important;} & .chat-media-head {display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:0!important;gap:8px!important;padding:4px 8px 0 10px!important;background:transparent!important;border:0!important;} & .chat-png-tabs {display:flex!important;align-items:center!important;gap:4px!important;min-width:0!important;width:auto!important;max-width:none!important;flex:0 0 auto!important;} & .chat-png-tabs>button {flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:none!important;height:36px!important;min-height:36px!important;padding:6px 10px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--chat75-copy)!important;font-family:inherit!important;font-size:13px!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap!important;cursor:pointer;box-shadow:none!important;} & .chat-png-tabs>button[aria-pressed="true"] {color:#278adb!important;background:var(--chat6-rail)!important;box-shadow:inset 0 -2px #278adb!important;} & .chat-png-tabs>.chat-png-catalog {width:32px!important;min-width:32px!important;padding:0!important;font-size:22px!important;font-weight:400!important;} & .chat-media-close {position:static!important;display:grid!important;place-items:center!important;width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--chat75-copy)!important;font-size:24px!important;line-height:1!important;box-shadow:none!important;} & .chat-media-search {display:flex!important;align-items:center!important;gap:8px!important;width:auto!important;min-height:0!important;margin:5px 12px!important;padding:0 9px!important;border:1px solid transparent!important;border-radius:9px!important;background:var(--chat6-rail)!important;color:var(--chat75-muted)!important;} & .chat-media-search:focus-within {border-color:#278adb!important;} & .chat-media-search>svg {flex:0 0 18px!important;width:18px!important;height:18px!important;} & #chatMediaSearch {display:block!important;flex:1 1 0!important;width:0!important;min-width:0!important;max-width:none!important;height:32px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;outline:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;color:var(--chat75-ink)!important;font:inherit!important;font-size:13px!important;line-height:1.4!important;} & #chatMediaSearch::placeholder {color:var(--chat75-muted)!important;opacity:1!important;} & #chatMediaSearch::-webkit-search-cancel-button {display:none;} & [data-chat-media-clear] {display:grid;place-items:center;flex:0 0 24px;width:24px;min-width:24px;height:26px;min-height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--chat75-copy);font-size:20px;box-shadow:none;} & .chat-media-summary {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px;color:var(--chat75-copy);} & #chatEmojiGroupLabel {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600;line-height:1.4;} & #chatEmojiPackMeta {flex:0 0 auto;font-size:10px;line-height:1.4;color:var(--chat75-muted);} & #chatEmojiGrid {display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;grid-auto-rows:38px!important;align-content:start!important;gap:2px!important;width:100%!important;min-height:0!important;padding:2px 10px 10px!important;margin:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9ca9b6 transparent;} & #chatEmojiGrid>button {display:grid!important;place-items:center!important;width:100%!important;min-width:0!important;height:38px!important;min-height:0!important;margin:0!important;padding:5px!important;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;touch-action:manipulation;cursor:pointer;} & #chatEmojiGrid>button>.chat-emoji-art {display:block!important;width:28px!important;height:28px!important;max-width:100%!important;object-fit:contain!important;} & button:focus-visible {outline:2px solid #278adb!important;outline-offset:-2px!important;} & #chatEmojiGrid>button:hover,& #chatEmojiCategories>button:hover,& .chat-media-close:hover {background:var(--chat6-rail)!important;} & .chat-media-empty {grid-column:1/-1!important;max-width:260px!important;margin:28px auto!important;padding:0 12px!important;color:var(--chat75-copy)!important;text-align:center!important;font-size:13px!important;line-height:1.6!important;} & .chat-emoji-category-rail {display:flex!important;align-items:center!important;gap:0!important;min-width:0!important;min-height:0!important;margin:0!important;padding:2px 4px!important;border-top:1px solid var(--chat6-edge)!important;background:var(--chat6-rail)!important;} & #chatEmojiCategories {display:flex!important;align-items:center!important;flex:1 1 0!important;gap:2px!important;min-width:0!important;min-height:0!important;height:44px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;overscroll-behavior:contain;} & #chatEmojiCategories>button {position:relative!important;display:grid!important;place-items:center!important;flex:0 0 38px!important;width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;gap:0!important;padding:3px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--chat75-muted)!important;box-shadow:none!important;cursor:pointer;} & #chatEmojiCategories>button.is-active {background:var(--chat6-card)!important;color:#278adb!important;box-shadow:inset 0 -2px #278adb!important;} & #chatEmojiCategories>button>img {display:block!important;width:32px!important;height:32px!important;max-width:none!important;object-fit:contain!important;} & .chat-picker-icon {display:block!important;flex-shrink:0;width:22px!important;height:22px!important;pointer-events:none;} & .chat-emoji-rail-button {display:grid!important;place-items:center!important;flex:0 0 22px!important;width:22px!important;min-width:22px!important;height:38px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:6px!important;background:transparent!important;color:var(--chat75-copy)!important;font-size:24px!important;box-shadow:none!important;} & .chat-emoji-rail-button:disabled {opacity:.3!important;} & .chat-pack-lock {position:absolute;right:0;bottom:0;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--chat6-card);color:var(--chat75-muted);} & .chat-pack-lock>.chat-picker-icon {width:11px!important;height:11px!important;} & .chat-png-note {margin:0!important;padding:5px 12px 7px!important;border-top:1px solid var(--chat6-edge);color:var(--chat75-muted)!important;font-size:10px!important;line-height:1.4!important;} &[data-chat-media="stickers"] #chatEmojiGrid {grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:80px!important;gap:4px!important;} &[data-chat-media="stickers"] #chatEmojiGrid>button {height:80px!important;padding:2px!important;} &[data-chat-media="stickers"] #chatEmojiGrid>button>img {display:block!important;width:100%!important;height:100%!important;max-height:76px!important;object-fit:contain!important;} } & > #chatEmojiPanel[hidden] {display:none!important;} & .chat-png-art {display:inline-block;vertical-align:top;line-height:0;max-width:100%;} & button.chat-png-art {border:0;padding:0;background:transparent;border-radius:12px;cursor:zoom-in;} & .chat-png-art>img {display:block;width:176px;height:176px;max-width:100%;object-fit:contain;} } } /* Theme inputs and category buttons also have global important rules in this earlier layer. Keep the correction here, scoped to the picker only. */ @layer ui-theme { html[data-game-theme] #gameScreen #chatPanel > #chatEmojiPanel.chat-emoji-panel { & .chat-media-search {background:var(--ui-soft)!important;} & #chatMediaSearch {background:transparent!important;} & #chatMediaSearch:focus-visible {outline:0!important;} & .chat-emoji-category-rail {background:var(--ui-soft)!important;} & :is(.chat-emoji-rail-button,#chatEmojiCategories>button) {background:transparent!important;color:var(--ui-muted)!important;} & #chatEmojiCategories>button.is-active {background:var(--ui-tint)!important;color:var(--ui-accent)!important;} & :is(.chat-png-tabs>button[aria-pressed="true"],#chatEmojiCategories>button.is-active) {color:var(--ui-accent)!important;} & #chatEmojiGrid {scrollbar-color:#9ca9b6 transparent!important;} & #chatEmojiGrid::-webkit-scrollbar-thumb {background:#9ca9b6!important;border-radius:8px!important;} } } @layer mobile-window-accessibility { @media(max-height:480px) and (orientation:landscape) { html[data-game-theme] .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > #chatEmojiPanel.chat-emoji-panel { inset:8px auto 66px 12px!important;width:min(364px,calc(100vw - 40px))!important; } } } @layer chat-trainers { @media(max-width:760px) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > #chatEmojiPanel.chat-emoji-panel { position:fixed!important;inset:auto 8px calc(66px + env(safe-area-inset-bottom,0px)) 8px!important; width:auto!important;height:min(416px,calc(100dvh - 150px))!important;max-height:calc(100dvh - 96px)!important;border-radius:18px!important; } html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] .chat-png-art>img {width:152px;height:152px;} } @media(max-height:480px) and (orientation:landscape) { html .game-screen #chatPanel.chat-panel.chat-messenger[data-chat-revision] > #chatEmojiPanel.chat-emoji-panel { position:fixed!important;inset:8px auto 66px 12px!important;width:min(364px,calc(100vw - 24px))!important;height:auto!important;max-height:none!important; grid-template-rows:40px 40px 24px minmax(0,1fr) 44px auto!important; & .chat-png-note {display:none!important;} } } } /* pk-style-source:180 */ /* /context-action-solid-v1.css */ /* Compact bounded action controls and native settings previews. No per-frame layout reads. */ @layer selected-mobile-hud{ html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction, html[data-game-theme] #app .settings-workbench .action-button-sample{--ab-height:48px;--ab-font:14px;--ab-icon:24px;--ab-key:28px;--ab-keyFont:13px;--ab-padX:12px;--ab-padY:6px;--ab-gap:8px;--ab-radius:12px;--solid-color:#536d89;--solid-top:#536d89;--solid-base:#34485f;box-sizing:border-box!important;width:max-content!important;min-width:0!important;height:var(--ab-height)!important;min-height:var(--ab-height)!important;max-height:var(--ab-height)!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:nowrap!important;gap:var(--ab-gap)!important;padding:var(--ab-padY) var(--ab-padX)!important;border:1px solid #ffffff38!important;border-radius:var(--ab-radius)!important;background:linear-gradient(180deg,var(--solid-top),var(--solid-color))!important;color:#fff!important;box-shadow:0 3px 0 var(--solid-base),0 5px 12px #10294130!important;animation:none!important;text-shadow:none!important;filter:none!important;backdrop-filter:none!important;transition:box-shadow .12s ease,border-color .12s ease!important;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{--ab-anchor:26px;max-width:min(300px,calc(100dvw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))!important;bottom:clamp(calc(12px + env(safe-area-inset-bottom)),var(--ab-anchor),calc(100dvh - var(--ab-height) - 12px - env(safe-area-inset-top)))!important;} html[data-game-theme] #app .settings-workbench .action-button-sample{display:inline-flex!important;position:relative!important;flex:0 1 auto!important;max-width:100%!important;pointer-events:none!important;user-select:none!important;} html[data-game-theme][data-action-button-size="small"] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{--ab-height:40px;--ab-font:13px;--ab-icon:20px;--ab-key:24px;--ab-keyFont:12px;--ab-padX:10px;--ab-padY:4px;--ab-gap:7px;--ab-radius:10px;} html[data-game-theme] #app .settings-workbench .action-button-sample[data-preview-size="small"][data-preview-device="desktop"]{--ab-height:40px;--ab-font:13px;--ab-icon:20px;--ab-key:24px;--ab-keyFont:12px;--ab-padX:10px;--ab-padY:4px;--ab-gap:7px;--ab-radius:10px;} html[data-game-theme] #app .settings-workbench .action-button-sample[data-preview-size="small"][data-preview-device="mobile"]{--ab-height:44px;--ab-font:13px;--ab-icon:22px;--ab-key:0px;--ab-keyFont:12px;--ab-padX:10px;--ab-padY:6px;--ab-gap:7px;--ab-radius:11px;} html[data-game-theme][data-action-button-size="normal"] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{--ab-height:48px;--ab-font:14px;--ab-icon:24px;--ab-key:28px;--ab-keyFont:13px;--ab-padX:12px;--ab-padY:6px;--ab-gap:8px;--ab-radius:12px;} html[data-game-theme] #app .settings-workbench .action-button-sample[data-preview-size="normal"][data-preview-device="desktop"]{--ab-height:48px;--ab-font:14px;--ab-icon:24px;--ab-key:28px;--ab-keyFont:13px;--ab-padX:12px;--ab-padY:6px;--ab-gap:8px;--ab-radius:12px;} html[data-game-theme] #app .settings-workbench .action-button-sample[data-preview-size="normal"][data-preview-device="mobile"]{--ab-height:48px;--ab-font:14px;--ab-icon:24px;--ab-key:0px;--ab-keyFont:13px;--ab-padX:12px;--ab-padY:6px;--ab-gap:8px;--ab-radius:12px;} html[data-game-theme][data-action-button-size="large"] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{--ab-height:52px;--ab-font:15px;--ab-icon:26px;--ab-key:30px;--ab-keyFont:14px;--ab-padX:12px;--ab-padY:6px;--ab-gap:9px;--ab-radius:13px;} html[data-game-theme] #app .settings-workbench .action-button-sample[data-preview-size="large"][data-preview-device="desktop"]{--ab-height:52px;--ab-font:15px;--ab-icon:26px;--ab-key:30px;--ab-keyFont:14px;--ab-padX:12px;--ab-padY:6px;--ab-gap:9px;--ab-radius:13px;} html[data-game-theme] #app .settings-workbench .action-button-sample[data-preview-size="large"][data-preview-device="mobile"]{--ab-height:52px;--ab-font:15px;--ab-icon:26px;--ab-key:0px;--ab-keyFont:14px;--ab-padX:12px;--ab-padY:6px;--ab-gap:9px;--ab-radius:13px;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction[data-action-tone="battle"], html[data-game-theme] #app .settings-workbench .action-button-sample[data-action-tone="battle"]{--solid-color:#d92432;--solid-top:#d92432;--solid-base:#9b1724;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction[data-action-tone="talk"], html[data-game-theme] #app .settings-workbench .action-button-sample[data-action-tone="talk"]{--solid-color:#0668d3;--solid-top:#086bd9;--solid-base:#034b9e;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction[data-action-tone="collect"], html[data-game-theme] #app .settings-workbench .action-button-sample[data-action-tone="collect"]{--solid-color:#0b8530;--solid-top:#0b8530;--solid-base:#065d20;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction[data-action-tone="chop"], html[data-game-theme] #app .settings-workbench .action-button-sample[data-action-tone="chop"]{--solid-color:#c44e00;--solid-top:#c44e00;--solid-base:#8f3500;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction[data-action-tone="storage"], html[data-game-theme] #app .settings-workbench .action-button-sample[data-action-tone="storage"]{--solid-color:#a06a00;--solid-top:#a06a00;--solid-base:#704900;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction[data-action-tone="craft"], html[data-game-theme] #app .settings-workbench .action-button-sample[data-action-tone="craft"]{--solid-color:#ad540c;--solid-top:#ad540c;--solid-base:#783703;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction[data-action-tone="fishing"], html[data-game-theme] #app .settings-workbench .action-button-sample[data-action-tone="fishing"]{--solid-color:#007892;--solid-top:#007d97;--solid-base:#00556a;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction[data-action-tone="travel"], html[data-game-theme] #app .settings-workbench .action-button-sample[data-action-tone="travel"]{--solid-color:#6a32cc;--solid-top:#7340d3;--solid-base:#472087;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction[data-action-tone="rest"], html[data-game-theme] #app .settings-workbench .action-button-sample[data-action-tone="rest"]{--solid-color:#6042af;--solid-top:#6042af;--solid-base:#402a7c;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction[data-action-tone="music"], html[data-game-theme] #app .settings-workbench .action-button-sample[data-action-tone="music"]{--solid-color:#6042af;--solid-top:#6042af;--solid-base:#402a7c;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction[data-action-tone="dress"], html[data-game-theme] #app .settings-workbench .action-button-sample[data-action-tone="dress"]{--solid-color:#9d3c80;--solid-top:#9d3c80;--solid-base:#6d2557;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction[data-action-tone="incubate"], html[data-game-theme] #app .settings-workbench .action-button-sample[data-action-tone="incubate"]{--solid-color:#16816a;--solid-top:#16816a;--solid-base:#0d5948;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction[data-action-tone="light"], html[data-game-theme] #app .settings-workbench .action-button-sample[data-action-tone="light"]{--solid-color:#966400;--solid-top:#966400;--solid-base:#674400;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction[data-action-tone="awards"], html[data-game-theme] #app .settings-workbench .action-button-sample[data-action-tone="awards"]{--solid-color:#966400;--solid-top:#966400;--solid-base:#674400;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction:has([data-solid-action-icon="mine"]){--solid-color:#a36b00;--solid-top:#a36b00;--solid-base:#734a00;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction:has([data-solid-action-icon="seed"]){--solid-color:#0b8530;--solid-top:#0b8530;--solid-base:#065d20;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction:has([data-solid-action-icon="collect"]){--solid-color:#0b8530;--solid-top:#0b8530;--solid-base:#065d20;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction:has([data-solid-action-icon="water"]){--solid-color:#007892;--solid-top:#007d97;--solid-base:#00556a;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction:has([data-solid-action-icon="refill"]){--solid-color:#007892;--solid-top:#007d97;--solid-base:#00556a;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction:has([data-solid-action-icon="open"]){--solid-color:#a06a00;--solid-top:#a06a00;--solid-base:#704900;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction:has([data-solid-action-icon="cancel"]){--solid-color:#536d89;--solid-top:#536d89;--solid-base:#34485f;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction #actionVisual, html[data-game-theme] #app .settings-workbench .action-button-sample .ab-sample-icon{display:grid!important;place-items:center!important;flex:0 0 var(--ab-icon)!important;width:var(--ab-icon)!important;min-width:var(--ab-icon)!important;height:var(--ab-icon)!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:inherit!important;overflow:visible!important;clip-path:none!important;mask:none!important;transform:none!important;filter:none!important;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction #actionVisual svg, html[data-game-theme] #app .settings-workbench .action-button-sample .ab-sample-icon svg{display:block!important;width:var(--ab-icon)!important;height:var(--ab-icon)!important;max-width:none!important;max-height:none!important;padding:0!important;margin:0!important;overflow:visible!important;clip-path:none!important;mask:none!important;transform:none!important;filter:none!important;color:inherit!important;} /* Target badges share the bounded icon slot; inherited portrait sizes must not overflow it. */ html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction #actionVisual .context-pokemon-emoji{display:grid!important;place-items:center!important;box-sizing:border-box!important;width:var(--ab-icon)!important;min-width:var(--ab-icon)!important;max-width:var(--ab-icon)!important;height:var(--ab-icon)!important;min-height:var(--ab-icon)!important;max-height:var(--ab-icon)!important;margin:0!important;padding:0!important;border:0!important;line-height:0!important;position:static!important;inset:auto!important;transform:none!important;align-self:center!important;justify-self:center!important;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction #actionVisual .context-pokemon-emoji>img{display:block!important;box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;margin:0!important;padding:0!important;border:0!important;object-fit:contain!important;object-position:center!important;position:static!important;inset:auto!important;transform:none!important;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction .interaction-card__copy, html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction #actionIcon{display:none!important;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction .interaction-card__cta, html[data-game-theme] #app .settings-workbench .action-button-sample .ab-sample-copy{display:flex!important;align-items:center!important;flex:1 1 auto!important;gap:var(--ab-gap)!important;min-width:0!important;width:auto!important;max-width:none!important;height:auto!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:inherit!important;animation:none!important;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction #actionKey, html[data-game-theme] #app .settings-workbench .action-button-sample .ab-sample-key{display:grid!important;place-items:center!important;flex:0 0 auto!important;box-sizing:border-box!important;min-width:var(--ab-key)!important;width:auto!important;max-width:72px!important;height:var(--ab-key)!important;margin:0!important;padding:0 6px!important;border:1px solid #fffdf5!important;border-bottom:2px solid #d7cbbb!important;border-radius:6px!important;background:#fff8eb!important;color:#182b3c!important;box-shadow:0 1px 1px #15253520!important;font:800 var(--ab-keyFont)/1 system-ui,sans-serif!important;white-space:nowrap!important;text-shadow:none!important;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction #actionLabel, html[data-game-theme] #app .settings-workbench .action-button-sample .ab-sample-label{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;flex:1 1 auto!important;min-width:0!important;width:auto!important;max-width:none!important;max-height:calc(var(--ab-height) - var(--ab-padY) - var(--ab-padY) - 2px)!important;margin:0!important;padding:0!important;font:700 var(--ab-font)/1.15 Onest,system-ui,sans-serif!important;color:#fff!important;white-space:normal!important;overflow:hidden!important;overflow-wrap:anywhere!important;text-align:left!important;text-shadow:none!important;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction:hover:not(:disabled):not([aria-disabled="true"]){border-color:#ffffffa6!important;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction:active:not(:disabled):not([aria-disabled="true"]){box-shadow:0 1px 0 var(--solid-base),0 2px 6px #10294130!important;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction:is(:disabled,[aria-disabled="true"]){opacity:.6!important;} @media(min-width:761px) and (max-width:1100px){html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{--ab-anchor:198px;}} @media(max-width:760px),(pointer:coarse) and (max-height:560px){html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{--ab-height:48px;--ab-font:14px;--ab-icon:24px;--ab-key:0px;--ab-keyFont:13px;--ab-padX:12px;--ab-padY:6px;--ab-gap:8px;--ab-radius:12px;} html[data-game-theme][data-action-button-size="small"] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{--ab-height:44px;--ab-font:13px;--ab-icon:22px;--ab-key:0px;--ab-keyFont:12px;--ab-padX:10px;--ab-padY:6px;--ab-gap:7px;--ab-radius:11px;} html[data-game-theme][data-action-button-size="normal"] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{--ab-height:48px;--ab-font:14px;--ab-icon:24px;--ab-key:0px;--ab-keyFont:13px;--ab-padX:12px;--ab-padY:6px;--ab-gap:8px;--ab-radius:12px;} html[data-game-theme][data-action-button-size="large"] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{--ab-height:52px;--ab-font:15px;--ab-icon:26px;--ab-key:0px;--ab-keyFont:14px;--ab-padX:12px;--ab-padY:6px;--ab-gap:9px;--ab-radius:13px;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction #actionKey{display:none!important;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{--ab-anchor:calc(126px + env(safe-area-inset-bottom));--ab-vv-bottom:var(--pk-mobile-vv-offset-bottom,0px);max-width:min(240px,max(0px,calc(var(--pk-mobile-vv-width,100dvw) - min(104px,calc(var(--pk-mobile-vv-width,100dvw) * .3)) - env(safe-area-inset-left) - env(safe-area-inset-right))))!important;left:auto!important;right:calc(12px + env(safe-area-inset-right) + var(--pk-mobile-vv-offset-right,0px))!important;top:auto!important;transform:none!important;bottom:calc(var(--ab-vv-bottom) + clamp(0px,var(--ab-anchor),max(0px,calc(var(--pk-mobile-vv-height,100dvh) - var(--ab-height) - 12px - env(safe-area-inset-top)))))!important;} html[data-game-theme][data-control-side="left"] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{left:calc(12px + env(safe-area-inset-left) + var(--pk-mobile-vv-offset-left,0px))!important;right:auto!important;} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud]:has(#worldTeamQuick:not([hidden])) #contextAction#contextAction#contextAction{--ab-anchor:calc(162px + env(safe-area-inset-bottom));}} html[data-game-theme][data-action-button-device="mobile"][data-action-button-size="small"] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{--ab-height:44px;--ab-font:13px;--ab-icon:22px;--ab-key:0px;--ab-keyFont:12px;--ab-padX:10px;--ab-padY:6px;--ab-gap:7px;--ab-radius:11px;} html[data-game-theme][data-action-button-device="mobile"][data-action-button-size="normal"] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{--ab-height:48px;--ab-font:14px;--ab-icon:24px;--ab-key:0px;--ab-keyFont:13px;--ab-padX:12px;--ab-padY:6px;--ab-gap:8px;--ab-radius:12px;} html[data-game-theme][data-action-button-device="mobile"][data-action-button-size="large"] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{--ab-height:52px;--ab-font:15px;--ab-icon:26px;--ab-key:0px;--ab-keyFont:14px;--ab-padX:12px;--ab-padY:6px;--ab-gap:9px;--ab-radius:13px;} html[data-game-theme][data-action-button-device="mobile"] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction #actionKey{display:none!important;} @media(min-width:500px) and (max-height:480px){html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{--ab-anchor:calc(98px + env(safe-area-inset-bottom));} html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud]:has(#worldTeamQuick:not([hidden])) #contextAction#contextAction#contextAction{--ab-anchor:calc(116px + env(safe-area-inset-bottom));}} html[data-game-theme][data-mobile-keyboard="open"] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{visibility:hidden!important;pointer-events:none!important;} @media(prefers-reduced-motion:reduce){html[data-game-theme] body:not(.is-battling) #app #gameScreen[data-world-hud] #contextAction#contextAction#contextAction{transition:none!important;}} html[data-game-theme] #app .settings-workbench .action-button-size-card{min-width:0!important;overflow:visible!important}html[data-game-theme] #app .settings-workbench .action-button-size-options{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))!important;gap:8px!important;width:100%!important;min-width:0!important;margin:10px 0!important;padding:0!important;border:0!important}html[data-game-theme] #app .settings-workbench .action-button-size-choice{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:space-between!important;gap:9px!important;min-width:0!important;max-width:100%!important;padding:10px!important;border:1px solid var(--ui-line,#cbd5e1)!important;border-radius:12px!important;background:var(--ui-soft,#edf4f8)!important;cursor:pointer!important}html[data-game-theme] #app .settings-workbench .action-button-size-choice:has(input:checked){border-color:var(--ui-accent,#1769aa)!important;box-shadow:inset 0 0 0 1px var(--ui-accent,#1769aa)!important}html[data-game-theme] #app .settings-workbench .action-button-size-choice:focus-within{outline:2px solid var(--ui-accent,#1769aa)!important;outline-offset:2px!important}html[data-game-theme] #app .settings-workbench .action-button-size-name{display:flex!important;align-items:center!important;gap:7px!important;width:100%!important;min-width:0!important;color:var(--ui-ink,#193b50)!important;font:600 13px/1.3 system-ui,sans-serif!important}html[data-game-theme] #app .settings-workbench .action-button-size-name input{appearance:auto!important;position:static!important;opacity:1!important;display:inline-block!important;flex:none!important;width:16px!important;height:16px!important;margin:0!important}html[data-game-theme] #app .settings-workbench .action-button-size-choice:has(input:disabled){cursor:default!important;opacity:.7!important} } /* Leave the right-hand quest and tester buttons their own column. */ @layer selected-mobile-hud { @media (max-width:760px), (pointer:coarse) and (max-height:560px) { @media (min-width:640px) and (max-height:382px) and (orientation:landscape) { html[data-game-theme][data-control-side="left"] body:not(.is-battling) #app #gameScreen[data-world-hud][data-selected-mobile-hud] #contextAction#contextAction#contextAction { max-width: clamp(0px, calc(153px - env(safe-area-inset-left) - var(--pk-mobile-vv-offset-left,0px)), 144px) !important; } html[data-game-theme]:not([data-control-side="left"]) body:not(.is-battling) #app #gameScreen[data-world-hud][data-selected-mobile-hud] #contextAction#contextAction#contextAction { /* Dock inset 14px, half dock 190px, half PokéPass 31px and gap 8px. */ right: calc(243px + env(safe-area-inset-right) + var(--pk-mobile-vv-offset-right,0px)) !important; max-width: 144px !important; } } } } /* pk-style-source:181 */ /* /hero-colors-v4.css */ .tc-builder .cb-hero-card{min-width:0;min-height:0;display:flex;flex-direction:column;position:relative} .tc-builder .cb-hero-card>.cb-tile{width:100%;flex:1} .tc-builder .cb-library[data-category=heroes] .cb-catalogue{grid-template-rows:repeat(2,minmax(210px,1fr));overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable} .tc-builder .cb-hero-card .cb-tile-art{min-height:64px;overflow:hidden} .tc-builder .cb-hero-card .cb-tile-art canvas{position:absolute;inset:0;width:100%;height:100%;max-height:100%;object-fit:contain} .tc-builder .cb-hero-card>.cb-tile>:is(b,small,.cb-weight){flex-shrink:0} .tc-builder .cb-hero-colors{display:flex;justify-content:center;gap:2px;padding:3px 0 0;flex:none} .tc-builder .cb-hero-colors button{display:grid;place-items:center;width:34px;height:34px;min-height:34px;padding:5px;border:2px solid transparent;border-radius:50%;background:transparent;box-shadow:none} .tc-builder .cb-hero-colors button span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--hero-color);color:white;font-size:14px;font-weight:800;box-shadow:inset 0 0 0 1px #0002} .tc-builder .cb-hero-colors button[aria-pressed=true]{border-color:var(--ui-accent,#1677dc)} .tc-builder .cb-hero-colors button:focus-visible{outline:2px solid var(--ui-ink,#214458);outline-offset:1px} @media(pointer:coarse){.tc-builder .cb-hero-colors button{width:36px;height:42px;min-height:42px;padding:6px}} @media(max-width:480px){ .tc-builder .cb-library[data-category=heroes] .cb-catalogue{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(156px,1fr))} .tc-builder .cb-hero-card{display:block} .tc-builder .cb-hero-card>.cb-tile{height:100%;display:grid;grid-template-columns:100px minmax(0,1fr);grid-template-rows:18px minmax(26px,1fr) 18px 44px;gap:3px 10px;padding:8px 10px;text-align:left;align-items:center} .tc-builder .cb-hero-card .cb-tile-art{grid-column:1;grid-row:1/-1;min-height:120px;height:100%;max-height:none} .tc-builder .cb-hero-card>.cb-tile>b{grid-column:2;grid-row:1} .tc-builder .cb-hero-card>.cb-tile>small{grid-column:2;grid-row:2} .tc-builder .cb-hero-card>.cb-tile>.cb-weight{grid-column:2;grid-row:3;justify-self:start} .tc-builder .cb-hero-colors{position:absolute;right:10px;bottom:8px;width:calc(100% - 130px);padding:0} } /* pk-style-source:182 */ /* /leaderboards-v2650.css */ /* Hall of fame. Native UI tokens, original enamel vectors, finite reveal only. */ /* Share the native geometry layer so generic marketplace phone insets cannot shrink this sheet. */ @layer mobile-window-accessibility{@media(max-width:600px){html[data-mobile-viewport="active"] #app #leaderboardModal[aria-hidden="false"]>article.leaderboard-shell{width:100%!important;max-width:none!important;height:100%!important;max-height:none!important}}} .leaderboard-modal{--lb-ink:var(--ui-ink,#193b50);--lb-muted:var(--ui-muted,#496577);--lb-paper:var(--ui-paper,#fbfdff);--lb-card:var(--ui-card,#fff);--lb-soft:var(--ui-soft,#edf4f8);--lb-line:var(--ui-line,#bcced9);--lb-blue:var(--ui-accent,#096caa);--lb-tint:var(--ui-tint,#deedf8);--lb-hover:var(--ui-hover,#e2edf4);--lb-gold:#a27523;--lb-gold-bg:#fffaeb;--lb-gold-line:#e7cc8c;display:none;position:fixed;inset:0;z-index:1600;align-items:center;justify-content:center;padding:24px;color:var(--lb-ink);font-family:inherit} html[data-game-theme=dark] .leaderboard-modal{--lb-gold:#eed18c;--lb-gold-bg:#343329;--lb-gold-line:#76663f} .leaderboard-modal.is-open{display:flex}.leaderboard-modal *{box-sizing:border-box} .leaderboard-modal__backdrop{position:absolute;inset:0;background:#193b504d;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .leaderboard-shell{position:relative;display:flex;flex-direction:column;width:min(960px,100%);height:min(780px,calc(100dvh - 48px));min-height:0;overflow:hidden;border:1px solid var(--lb-line);border-radius:24px;background:var(--lb-paper);box-shadow:var(--ui-shadow,0 16px 48px #17384f29)} .leaderboard-modal button,.leaderboard-modal input{font:inherit}.leaderboard-modal button{cursor:pointer;touch-action:manipulation}.leaderboard-modal button:disabled{cursor:default;opacity:.5} .leaderboard-modal :is(button,input,select):focus-visible{outline:3px solid var(--ui-focus,#087db8);outline-offset:3px} .leaderboard-modal .lb-art{display:inline-block;flex:none;width:24px;height:24px;fill:none;stroke:none;vertical-align:middle;overflow:visible;pointer-events:none} .leaderboard-head{position:relative;display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 22px;background:var(--lb-card);border-bottom:1px solid var(--lb-line);flex:none} .leaderboard-head__emblem{display:grid;place-items:center;width:42px;height:44px;flex:none}.leaderboard-head__emblem .lb-art{width:40px;height:40px} .leaderboard-head__title{flex:1;min-width:0}.leaderboard-head small{display:block;color:var(--lb-muted);font-size:10px;font-weight:700;letter-spacing:1.7px;margin-bottom:4px}.leaderboard-head h2{font-size:25px;line-height:1.15;letter-spacing:-.6px;margin:0;color:var(--lb-ink);font-weight:750} .leaderboard-head>button{display:grid;place-items:center;width:44px;height:44px;flex:none;background:var(--lb-soft);color:var(--lb-muted);border:1px solid transparent;border-radius:12px}.leaderboard-head>button:hover{background:var(--lb-hover);color:var(--lb-ink)} .leaderboard-modes{display:flex;gap:4px;background:var(--lb-soft);padding:4px;border-radius:12px;margin-right:8px}.leaderboard-modes button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 13px;background:transparent;border:1px solid transparent;border-radius:9px;color:var(--lb-muted);font-size:12px;font-weight:650;white-space:nowrap}.leaderboard-modes .lb-art{width:21px;height:21px}.leaderboard-modes button.is-active{background:var(--lb-card);color:var(--lb-blue);border-color:var(--lb-line);box-shadow:0 2px 3px #17384f06} .leaderboard-tabs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;flex:none;background:var(--lb-card);padding:7px 18px;border-bottom:1px solid var(--lb-line)}.leaderboard-tabs[hidden]{display:none} .leaderboard-tabs button{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:5px;min-height:58px;padding:5px 2px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--lb-muted);font-size:11px;font-weight:650;white-space:nowrap;transition:background .16s,border-color .16s,color .16s} .leaderboard-tabs button:hover{background:var(--lb-soft);color:var(--lb-ink)}.leaderboard-tabs button.is-active{background:var(--lb-tint);border-color:var(--lb-line);color:var(--lb-blue)}.leaderboard-tab-art{display:grid;place-items:center;width:29px;height:29px}.leaderboard-tab-art .lb-art{width:30px;height:30px} .leaderboard-body{position:relative;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:15px 22px 0;scrollbar-width:thin;scrollbar-color:var(--lb-line) transparent} .leaderboard-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.leaderboard-eyebrow{display:none}.leaderboard-intro h3{font-size:23px;line-height:1.2;margin:0 0 5px;letter-spacing:-.3px}.leaderboard-intro p{font-size:12px;line-height:1.5;color:var(--lb-muted);margin:0} .leaderboard-intro>button,.leaderboard-empty>button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:44px;padding:9px 13px;border:1px solid var(--lb-line);border-radius:10px;background:var(--lb-card);color:var(--lb-blue);font-size:12px;font-weight:650}.leaderboard-intro>button:hover,.leaderboard-empty>button:hover{background:var(--lb-tint)}.leaderboard-intro>button .lb-art{width:18px;height:18px} .leaderboard-live{display:flex;align-items:center;gap:6px;margin-bottom:12px;min-height:18px;font-size:11px;color:var(--lb-muted)}.leaderboard-live>i,.directory-filters button>i{width:6px;height:6px;border-radius:50%;background:var(--ui-positive,#176d54);flex:none}.leaderboard-live>span:last-child{margin-left:auto;white-space:nowrap}.leaderboard-live>span:first-of-type{line-height:1.5} .leaderboard-name{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;max-width:100%;font-size:16px;line-height:1.4}.leaderboard-name>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:750}.leaderboard-name .presence-badge{flex:none}.leaderboard-you{font-size:9px;font-weight:650;color:var(--lb-blue);background:var(--lb-tint);padding:1px 5px;border-radius:5px;flex:none}.is-place-1 .leaderboard-name{font-size:18px} .is-empty>b{font-size:12px;font-weight:550;margin-bottom:15px} .leaderboard-standings{margin-bottom:18px;border:1px solid var(--lb-line);border-radius:14px;background:var(--lb-card);overflow:hidden;scroll-margin-top:8px}.leaderboard-standings>header{display:flex;align-items:center;gap:12px;padding:14px 17px;border-bottom:1px solid var(--lb-line)}.leaderboard-standings>header b{font-size:14px;font-weight:700}.leaderboard-standings>header small{font-size:11px;color:var(--lb-muted);margin-left:2px}.leaderboard-standings>header>button{display:flex;align-items:center;gap:5px;border:0;border-radius:7px;background:none;color:var(--lb-blue);padding:7px;font-size:11px;font-weight:600;margin-left:auto}.leaderboard-standings>header>button:hover{background:var(--lb-tint)}.leaderboard-standings>header>button .lb-art{width:17px;height:17px}.leaderboard-standings>header>button .lb-art:last-child{width:12px;height:12px} .leaderboard-list{list-style:none;padding:0;margin:0}.leaderboard-list li+li{border-top:1px solid color-mix(in srgb,var(--lb-line) 55%,transparent)}.leaderboard-list li>button{display:grid;grid-template-columns:33px 46px minmax(0,1fr) 105px 95px 16px;align-items:center;width:100%;gap:12px;min-height:72px;padding:10px 17px;background:none;border:0;color:var(--lb-ink);text-align:left}.leaderboard-list li>button:hover{background:var(--lb-soft)}.leaderboard-list .is-self>button{background:var(--lb-tint)}.leaderboard-list__rank{font-size:13px;font-weight:650;color:var(--lb-muted);font-variant-numeric:tabular-nums}.leaderboard-list__avatar{display:block;width:43px;height:46px;overflow:hidden;border:1px solid var(--lb-line);background:var(--lb-soft);border-radius:12px}.leaderboard-list__avatar img{width:100%;height:100%;object-fit:contain}.leaderboard-row-arrow{color:var(--lb-muted)}.leaderboard-row-arrow .lb-art{width:13px;height:13px} .leaderboard-pages,.directory-pages{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;padding:14px 12px;border-top:1px solid var(--lb-line)}.leaderboard-pages button,.directory-pages button{display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px;background:var(--lb-card);border:1px solid var(--lb-line);border-radius:9px;color:var(--lb-muted);font-size:12px;font-weight:600}.leaderboard-pages button:hover:not(:disabled),.directory-pages button:hover:not(:disabled){background:var(--lb-soft);color:var(--lb-blue)}.leaderboard-pages [aria-current],.directory-pages [aria-current]{background:var(--lb-tint);color:var(--lb-blue);border-color:var(--lb-blue)}.leaderboard-pages .lb-art,.directory-pages .lb-art{width:15px;height:15px}.leaderboard-pages__prev .lb-art,.directory-pages__prev .lb-art{transform:rotate(180deg)}.leaderboard-pages>span,.directory-pages>span{font-size:11px;color:var(--lb-muted);margin-left:8px} .leaderboard-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;min-height:260px;padding:30px 16px;text-align:center}.leaderboard-empty>.lb-art{width:66px;height:66px}.leaderboard-empty>b{font-size:20px;line-height:1.3}.leaderboard-empty p{max-width:340px;color:var(--lb-muted);font-size:12px;line-height:1.6;margin:0}.leaderboard-empty [role=status]{font-size:11px;color:var(--lb-muted)} .directory-intro{margin-bottom:22px}.directory-search{display:flex;align-items:end;gap:10px}.directory-search>label{flex:1;min-width:0;font-size:11px;color:var(--lb-muted);font-weight:600}.directory-search__field{display:flex;align-items:center;min-height:48px;margin-top:7px;padding-left:11px;border:1px solid var(--lb-line);border-radius:11px;background:var(--lb-card);color:var(--lb-muted)}.directory-search__field>.lb-art{width:18px;height:18px;flex:none}.directory-search__field input{width:100%;min-width:0;height:46px;padding:10px;border:0;border-radius:10px;background:none;color:var(--lb-ink);font-size:13px;outline-offset:0}.directory-search__field button{display:grid;place-items:center;border:0;background:none;color:var(--lb-muted);padding:10px;width:44px;height:44px;flex:none}.directory-search__field button .lb-art{width:17px;height:17px} .directory-search__submit{display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 20px;border:1px solid var(--ui-primary,#096caa);border-radius:11px;color:var(--ui-on-accent,#fff);background:var(--ui-primary,#096caa);font-size:13px;font-weight:650}.directory-search__submit .lb-art{width:15px;height:15px}.directory-search__submit:hover{filter:brightness(1.08)} .directory-filters{display:flex;gap:7px;padding:13px 0 20px}.directory-filters button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:1px solid transparent;border-radius:9px;padding:8px 12px;background:none;color:var(--lb-muted);font-size:12px;font-weight:600}.directory-filters button .lb-art{width:19px;height:19px}.directory-filters .is-active{background:var(--lb-tint);border-color:var(--lb-line);color:var(--lb-blue)} .directory-results{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px;font-size:13px;font-weight:650}.directory-results>small{font-size:11px;font-weight:500;color:var(--lb-muted);white-space:nowrap}.directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}.directory-card{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:15px 12px;border:1px solid var(--lb-line);border-radius:14px;background:var(--lb-card);color:var(--lb-ink);text-align:left}.directory-card:hover{background:var(--lb-soft);border-color:var(--lb-blue)}.directory-card.is-self{border-color:var(--lb-blue);background:var(--lb-tint)}.directory-card__portrait{display:block;width:72px;height:88px;border:1px solid var(--lb-line);border-radius:12px;overflow:hidden;background:var(--lb-soft);flex:none}.directory-card__portrait img{width:100%;height:100%;object-fit:contain}.directory-card__info{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}.directory-card .leaderboard-name{justify-content:flex-start;font-size:14px}.directory-card__code{font-size:10px;color:var(--lb-muted);letter-spacing:.3px}.directory-card__stats{display:flex;flex-wrap:wrap;gap:7px;font-size:10px;color:var(--lb-muted);line-height:1.4}.directory-card__stats>span{display:flex;align-items:center;gap:3px}.directory-card__stats b{font-weight:650;color:var(--lb-ink)}.directory-card__stats .lb-art{width:13px;height:13px}.directory-card__link{display:flex;align-items:center;gap:4px;color:var(--lb-blue);font-size:10px;font-weight:600;margin-top:2px}.directory-card__link .lb-art{width:11px;height:11px}.directory-pages{border-top:0;margin-bottom:20px} .is-card-loading .leaderboard-list button,.is-card-loading .directory-card{pointer-events:none;opacity:.65} .leaderboard-modal.is-page-hidden *,.leaderboard-modal.is-page-hidden *:after{animation-play-state:paused!important} /* Champion comes first in DOM and keyboard order; desktop uses the classic podium. */ .leaderboard-award-short{display:none} .leaderboard-head__emblem{border-radius:16px;background:var(--lb-gold-bg)}.leaderboard-head__emblem .lb-art{width:43px;height:43px}.leaderboard-tabs button.is-active{box-shadow:inset 0 -2px var(--lb-blue)} .leaderboard-page-picker{display:none}.leaderboard-page-picker select{min-width:80px;min-height:44px;border:1px solid var(--lb-line);border-radius:10px;padding:8px 27px 8px 10px;background:var(--lb-card);color:var(--lb-ink);font-weight:650} .directory-search__field:focus-within{border-color:var(--lb-blue);box-shadow:0 0 0 2px var(--lb-tint)}.directory-search__field input::-webkit-search-cancel-button{display:none}.directory-results{overflow-wrap:anywhere} @media(hover:hover) and (pointer:fine){.directory-card{transition:border-color .16s,box-shadow .16s,transform .16s}} @media(max-width:900px){.leaderboard-head{padding:16px 20px;gap:10px}.leaderboard-head h2{font-size:25px}.leaderboard-modes{margin-right:0}.leaderboard-modes button{padding:8px 10px;font-size:11px}.leaderboard-body{padding:18px 20px 0}.leaderboard-tabs{padding:9px 14px;gap:3px}.leaderboard-tabs button{font-size:10px} .directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.leaderboard-list li>button{grid-template-columns:26px 44px minmax(0,1fr) 88px 72px 12px;gap:9px}} @media(max-width:600px){ .leaderboard-modal{padding:0;inset:auto 0;top:var(--lb-vtop,0px);height:var(--lb-vh,100dvh)}.leaderboard-shell{width:100%;height:100%;max-height:none;border:0;border-radius:0;padding-top:env(safe-area-inset-top)} .leaderboard-head{flex-wrap:wrap;gap:8px;min-height:0;padding:12px 14px 9px}.leaderboard-head__emblem{width:40px;height:40px;border-radius:12px}.leaderboard-head__emblem .lb-art{width:34px;height:34px}.leaderboard-head__title{flex:1}.leaderboard-head small{font-size:8px;letter-spacing:1.1px;margin-bottom:3px}.leaderboard-head h2{font-size:23px;letter-spacing:-.5px}.leaderboard-head>button{order:1}.leaderboard-modes{order:2;width:100%;margin:3px 0 0;padding:3px;gap:3px}.leaderboard-modes button{flex:1;min-height:44px;font-size:12px}.leaderboard-modes .lb-art{width:23px;height:23px} .leaderboard-tabs{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;gap:4px;padding:7px 12px;scroll-padding-inline:12px}.leaderboard-tabs::-webkit-scrollbar{display:none}.leaderboard-tabs button{flex:0 0 auto;min-width:65px;min-height:62px;gap:4px;padding:5px 8px;border-radius:11px;font-size:10px}.leaderboard-tab-art,.leaderboard-tab-art .lb-art{width:30px;height:30px} .leaderboard-body{padding:13px 14px 0;scrollbar-gutter:auto;flex:1}.leaderboard-intro{gap:8px;margin-bottom:5px}.leaderboard-intro h3{font-size:20px;margin-bottom:3px}.leaderboard-intro p{font-size:11px;line-height:1.4;max-width:265px}.leaderboard-intro>button{padding:10px}.leaderboard-intro>button>span{display:none}.leaderboard-live{font-size:9px;gap:4px;margin-bottom:12px}.leaderboard-live>span:first-of-type{max-width:205px}.leaderboard-live>span:last-child{font-size:9px} .is-place-1 .leaderboard-name{font-size:18px;gap:5px}.is-place-1 .player-presence{display:inline-flex}.leaderboard-you{font-size:8px;padding:1px 3px} .leaderboard-award-label{display:none}.leaderboard-award-short{display:inline} .is-empty>b{grid-area:identity;font-size:11px;margin:0} .leaderboard-standings{border-radius:14px;margin-bottom:12px}.leaderboard-standings>header{padding:7px 10px;gap:5px}.leaderboard-standings>header>span{display:flex;flex-direction:column;gap:3px}.leaderboard-standings>header b{font-size:12px}.leaderboard-standings>header small{font-size:9px}.leaderboard-standings>header>button{font-size:10px;min-height:44px;padding:7px;gap:3px}.leaderboard-standings>header>button>.lb-art:first-child{display:none} .leaderboard-list li>button{grid-template-columns:22px 40px minmax(0,1fr) 54px 10px;gap:7px;min-height:70px;padding:10px}.leaderboard-list__avatar{width:40px;height:44px;border-radius:10px}.leaderboard-list__rank{font-size:11px}.leaderboard-row-arrow .lb-art{width:11px;height:11px} .leaderboard-pages,.directory-pages{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;padding:12px}.leaderboard-pages>button,.directory-pages>button{display:none}.leaderboard-pages>button:first-child,.leaderboard-pages>button:last-of-type,.directory-pages>button:first-child,.directory-pages>button:last-of-type{display:grid}.leaderboard-page-picker{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:var(--lb-muted);grid-column:2;grid-row:1}.leaderboard-page-picker select{width:100%;max-width:120px;font-size:12px}.leaderboard-pages>span,.directory-pages>span{grid-column:1/-1;text-align:center;margin:0;font-size:10px} .directory-intro{margin-bottom:13px}.directory-search{gap:8px}.directory-search__field{padding-left:10px}.directory-search__field input{font-size:16px;padding:10px 6px}.directory-search__submit{padding:10px 13px;font-size:12px}.directory-search__submit .lb-art{display:none}.directory-filters{padding:8px 0 10px}.directory-filters button{font-size:11px;min-height:44px}.directory-results{font-size:12px;gap:8px}.directory-results>small{font-size:10px}.directory-grid{grid-template-columns:1fr;gap:8px;margin-bottom:14px}.directory-card{padding:12px;gap:12px;border-radius:13px;min-height:90px}.directory-card__portrait{width:54px;height:62px}.directory-card__info{gap:4px;padding-right:18px}.directory-card .leaderboard-name{font-size:14px}.directory-card__stats{font-size:11px;gap:11px}.directory-card__stats .lb-art{width:14px;height:14px}.directory-card__link{position:absolute;right:12px;top:calc(50% - 9px);font-size:0}.directory-card__link .lb-art{width:15px;height:18px}.directory-card__code{font-size:10px}.leaderboard-empty{min-height:230px}.leaderboard-empty>b{font-size:18px} } @media(max-width:350px){.leaderboard-head{padding-inline:10px}.leaderboard-head h2{font-size:21px}.leaderboard-tabs{padding-inline:8px}.leaderboard-body{padding-inline:10px}.leaderboard-intro p{font-size:10px;max-width:225px}.leaderboard-live>span:first-of-type{max-width:180px}.is-place-1 .leaderboard-name{font-size:16px}.leaderboard-list li>button{grid-template-columns:18px 34px minmax(0,1fr) 48px 9px;gap:6px;padding:9px 8px}.leaderboard-list__avatar{width:34px;height:40px}.leaderboard-page-picker{font-size:10px;gap:5px}.directory-search__submit{padding-inline:11px}.directory-card__stats{font-size:10px;gap:7px}} /* Short landscape / software keyboard: compact header, scrollable results. */ @media(max-height:500px){.leaderboard-head small{display:none}.leaderboard-head{min-height:0;padding-top:6px;padding-bottom:6px}.leaderboard-head__emblem{width:36px;height:36px}.leaderboard-head__emblem .lb-art{width:30px;height:30px}.leaderboard-head h2{font-size:21px}.leaderboard-tabs{padding-block:5px}.leaderboard-tabs button{flex-direction:row;min-height:44px;font-size:10px;gap:4px}.leaderboard-tab-art,.leaderboard-tab-art .lb-art{width:26px;height:26px}.leaderboard-body{padding-top:10px}.leaderboard-intro p{display:none}.leaderboard-live{margin-bottom:8px}.leaderboard-intro h3{font-size:19px}.leaderboard-empty{min-height:160px}} @media(max-height:500px) and (min-width:601px){.leaderboard-modal{padding:8px}.leaderboard-shell{height:calc(100dvh - 16px);border-radius:16px}} @media(prefers-reduced-motion:reduce){.leaderboard-modal *,.leaderboard-modal *:after{animation:none!important;transition:none!important}} .leaderboard-standings>header>span{display:flex;flex-direction:column;gap:3px}.leaderboard-standings>header small{margin:0} @media(max-width:600px) and (max-height:680px){.leaderboard-head{padding-top:7px;padding-bottom:7px}.leaderboard-head__emblem{width:36px;height:36px}.leaderboard-head h2{font-size:21px}.leaderboard-head small{font-size:7px}.leaderboard-tabs{padding-block:5px}.leaderboard-tabs button{min-height:50px;gap:2px;font-size:9px}.leaderboard-tab-art,.leaderboard-tab-art .lb-art{width:25px;height:25px}.leaderboard-body{padding-top:10px}.leaderboard-intro p{font-size:10px}.leaderboard-live{min-height:16px;margin-bottom:9px}} @media(max-width:600px) and (max-height:680px){.is-place-1 .leaderboard-name{font-size:16px;line-height:1.25}} /* Revision 4: a coherent podium and a useful, optional personal comparison. */ .leaderboard-head__emblem{background:radial-gradient(circle,var(--lb-gold-bg),transparent 73%)} .leaderboard-list li.is-self{position:relative;background:var(--lb-tint)} .leaderboard-list li.is-self:before{content:"";position:absolute;inset:9px auto 9px 0;width:3px;background:var(--lb-blue);border-radius:0 4px 4px 0;pointer-events:none} .leaderboard-list li.is-self .leaderboard-list__rank{color:var(--lb-blue);font-weight:800} .lb-goal{margin:0 0 18px;border:1px solid var(--lb-line);border-radius:16px;background:var(--lb-card);overflow:hidden} .lb-goal__bar{display:flex;align-items:stretch;gap:6px;padding:8px;background:linear-gradient(100deg,var(--lb-soft),var(--lb-card))} .lb-goal__bar button{display:flex;align-items:center;gap:10px;min-width:0;min-height:48px;border:0;border-radius:10px;background:none;color:var(--lb-ink);text-align:left;padding:6px 9px} .lb-goal__bar button:first-child{flex:1}.lb-goal__bar button:hover{background:var(--lb-tint)} .lb-goal__bar button>span:nth-child(2){min-width:0;flex:1}.lb-goal__bar small{display:block;color:var(--lb-muted);font-size:10px;margin-bottom:4px;line-height:1.3} .lb-goal__bar b{display:block;font-size:13px;line-height:1.4;overflow-wrap:anywhere;font-variant-numeric:tabular-nums} .lb-goal__icon{display:grid;place-items:center;width:42px;height:42px;flex:none;background:var(--lb-card);border:1px solid var(--lb-line);border-radius:12px}.lb-goal__icon .lb-art{width:34px;height:34px} .lb-goal__chevron{margin-left:auto;display:grid;place-items:center;flex:none}.lb-goal__chevron .lb-art{width:14px;height:14px;transform:rotate(90deg)}.lb-goal.is-expanded .lb-goal__chevron .lb-art{transform:rotate(-90deg)} .lb-goal__bar [data-self-jump]{font-size:12px;font-weight:650;color:var(--lb-blue);border-left:1px solid var(--lb-line);border-radius:0 10px 10px 0;flex:none}.lb-goal__bar [data-self-jump] .lb-art{width:28px;height:28px} .lb-goal__details{padding:16px;border-top:1px solid var(--lb-line)}.lb-goal [hidden]{display:none!important} .lb-goal__comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px} .lb-goal__metric{display:flex;align-items:center;gap:10px;min-width:0;padding:12px;background:var(--lb-soft);border:1px solid var(--lb-line);border-radius:12px}.lb-goal__metric:first-child{background:var(--lb-tint)} .lb-goal__portrait{display:grid;place-items:center;width:48px;height:56px;flex:none}.lb-goal__portrait img{width:100%;height:100%;object-fit:contain}.lb-goal__portrait .lb-art{width:38px;height:38px} .lb-goal__metric>div{min-width:0}.lb-goal__metric small{display:block;font-size:10px;color:var(--lb-muted);margin-bottom:3px}.lb-goal__metric b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-goal__metric strong{display:block;font-size:23px;color:var(--lb-blue);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.35;margin-top:4px}.lb-goal__metric em{font-size:11px;color:var(--lb-muted);font-style:normal;font-weight:500} .lb-goal__meter{height:8px;border-radius:20px;background:var(--lb-soft);border:1px solid var(--lb-line);overflow:hidden;margin-top:14px}.lb-goal__meter>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--lb-blue),color-mix(in srgb,var(--lb-blue) 60%,var(--lb-card)))} .lb-goal__note{margin:10px 0 14px;font-size:11px;line-height:1.55;color:var(--lb-muted);max-width:700px} .lb-goal__controls{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.lb-goal__controls>label{flex:1;min-width:160px;font-size:10px;font-weight:600;color:var(--lb-muted)} .lb-goal__controls select{display:block;width:100%;min-height:44px;margin-top:6px;padding:8px 28px 8px 10px;color:var(--lb-ink);border:1px solid var(--lb-line);border-radius:9px;background:var(--lb-card);font:inherit;font-size:12px;text-overflow:ellipsis} .lb-goal__controls button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:8px 10px;font-size:11px;font-weight:600;border:1px solid var(--lb-line);border-radius:9px;background:var(--lb-card);color:var(--lb-blue)}.lb-goal__controls .lb-art{width:20px;height:20px}.lb-goal__controls button:hover{background:var(--lb-tint)} .lb-goal__guide-toggle{display:flex;align-items:center;gap:7px;min-height:44px;padding:10px 0 0;border:0;background:none;color:var(--lb-blue);font-size:12px;font-weight:600}.lb-goal__guide-toggle .lb-art{width:18px;height:18px}.lb-goal__guide-toggle .lb-art:last-child{width:12px;height:12px;transform:rotate(90deg)}.lb-goal__guide-toggle[aria-expanded=true] .lb-art:last-child{transform:rotate(-90deg)} .lb-goal__guide{margin-top:8px;padding:14px;background:var(--lb-soft);border:1px solid var(--lb-line);border-radius:10px}.lb-goal__guide dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}.lb-goal__guide dt{font-size:10px;color:var(--lb-muted);margin-bottom:4px}.lb-goal__guide dd{margin:0;font-size:12px;font-weight:650;line-height:1.45}.lb-goal__guide p{font-size:12px;line-height:1.55;margin:12px 0 8px}.lb-goal__guide>small{display:block;font-size:10px;line-height:1.5;color:var(--lb-muted)} @media(max-width:600px){.lb-goal{border-radius:14px;margin-bottom:12px}.lb-goal__bar{padding:5px;gap:2px}.lb-goal__bar button{padding:5px;gap:7px;min-height:48px}.lb-goal__icon{width:34px;height:38px;border-radius:10px}.lb-goal__icon .lb-art{width:29px;height:29px}.lb-goal__bar small{font-size:9px;margin-bottom:2px}.lb-goal__bar b{font-size:11px}.lb-goal__bar [data-self-jump]{width:44px;justify-content:center;padding:5px}.lb-goal__bar [data-self-jump]>span{display:none}.lb-goal__bar [data-self-jump] .lb-art{width:26px;height:26px}.lb-goal__chevron .lb-art{width:11px;height:11px}.lb-goal__details{padding:10px}.lb-goal__comparison{gap:7px}.lb-goal__metric{padding:9px 7px;gap:6px;flex-direction:column;align-items:flex-start}.lb-goal__portrait{width:38px;height:43px}.lb-goal__metric>div{width:100%}.lb-goal__metric b{font-size:12px}.lb-goal__metric strong{font-size:23px;line-height:1.4}.lb-goal__metric small{font-size:9px}.lb-goal__metric em{font-size:10px}.lb-goal__note{font-size:10px;margin-block:9px 11px}.lb-goal__controls{gap:6px}.lb-goal__controls>label{flex-basis:100%;min-width:0}.lb-goal__controls select{font-size:16px;max-width:100%}.lb-goal__controls button{flex:1;font-size:11px}.lb-goal__guide dl{grid-template-columns:1fr;gap:10px}.lb-goal__guide{padding:11px}.lb-goal__guide-toggle{font-size:11px}} @media(max-width:350px){.lb-goal__bar button{gap:5px}.lb-goal__bar b{font-size:10px}.lb-goal__icon{width:30px}.lb-goal__metric strong{font-size:20px}} /* Compact polish: predictable portrait sizes and restrained static scenery. */ .leaderboard-body{flex:1;scroll-padding-block:12px 64px} .leaderboard-modes button,.leaderboard-intro>button,.directory-card{transition:background .15s,border-color .15s} .leaderboard-list li>button{min-height:60px} .leaderboard-standings>header>button{min-height:44px;min-width:44px}.leaderboard-standings>header{padding-block:10px} .lb-goal{margin-bottom:12px;border-radius:13px} .lb-goal__bar{padding:5px}.lb-goal__bar button{min-height:44px;padding-block:3px} .lb-goal__icon{width:34px;height:36px}.lb-goal__icon .lb-art{width:28px;height:28px} .directory-card__portrait{width:56px;height:64px}.directory-card{padding:12px;gap:10px} @media(min-width:601px){ .is-place-1 .leaderboard-name{font-size:16px} } @media(min-width:601px) and (max-height:760px){ .leaderboard-shell{height:calc(100dvh - 32px)}.leaderboard-modal{padding:16px} } @media(max-width:600px){ .leaderboard-head{flex-wrap:nowrap;padding:9px 12px 7px}.leaderboard-head h2{font-size:21px} .leaderboard-head__emblem{width:36px;height:36px}.leaderboard-head__emblem .lb-art{width:32px;height:32px} .leaderboard-head small{font-size:7px}.leaderboard-modes{order:0;width:auto;margin:0;padding:0;flex:none} .leaderboard-modes button{width:44px;padding:0}.leaderboard-modes button.is-active{display:none}.leaderboard-modes button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .leaderboard-tabs{padding:5px 10px;gap:3px}.leaderboard-tabs button{flex-direction:row;gap:5px;min-width:0;min-height:46px;padding:5px 9px;font-size:11px} .leaderboard-tab-art,.leaderboard-tab-art .lb-art{width:25px;height:25px} .leaderboard-body{padding-top:11px}.leaderboard-live{margin-bottom:9px} .is-place-1 .leaderboard-name{font-size:17px} .leaderboard-list li>button{min-height:58px} .lb-goal__bar b{font-size:11px}.lb-goal__bar small{font-size:9px} .directory-card{min-height:82px}.directory-card__portrait{width:50px;height:56px} } @media(max-width:350px){.leaderboard-head{gap:6px}.leaderboard-head h2{font-size:18px}.leaderboard-head__emblem{width:28px;height:32px}.leaderboard-head__emblem .lb-art{width:28px;height:28px}.leaderboard-tabs button{padding-inline:8px;font-size:10px}.is-place-1 .leaderboard-name{font-size:16px}} @media(prefers-reduced-motion:reduce){.leaderboard-modal *,.leaderboard-modal *:after{animation:none!important;transition:none!important}} /* R6: compact ranking and roster views. */ .leaderboard-intro__title{display:flex;align-items:center;gap:11px;min-width:0;flex:1}.leaderboard-intro__title>div{min-width:0}.leaderboard-intro__icon{display:grid;place-items:center;flex:none;width:42px;height:44px;border:1px solid var(--lb-line);border-radius:12px;background:var(--lb-card)}.leaderboard-intro__icon .lb-art{width:34px;height:34px}.leaderboard-intro__actions{display:flex;align-items:center;gap:6px;flex:none}.leaderboard-intro__actions>button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:9px 11px;border:1px solid var(--lb-line);border-radius:10px;background:var(--lb-card);color:var(--lb-blue);font:inherit;font-size:12px;font-weight:650;cursor:pointer}.leaderboard-intro__actions>button:hover{background:var(--lb-tint)}.leaderboard-intro__actions>button .lb-art{width:18px;height:18px}.leaderboard-intro__actions .lb-podium-toggle{font-size:11px;color:var(--lb-muted)}.lb-podium-toggle .lb-art{transform:rotate(-90deg)}.lb-podium-toggle.is-collapsed{background:var(--lb-tint);color:var(--lb-blue)}.lb-podium-toggle.is-collapsed .lb-art{transform:rotate(90deg)}.leaderboard-list li:nth-child(even):not(.is-self){background:color-mix(in srgb,var(--lb-soft) 32%,var(--lb-card))}.directory-filters{align-items:center;flex-wrap:wrap}.directory-layouts{display:flex;align-items:center;flex:none;gap:2px;padding:2px;margin-left:auto;border:1px solid var(--lb-line);border-radius:11px;background:var(--lb-card)}.directory-filters .directory-layouts>button{display:grid;place-items:center;min-width:44px;width:44px;min-height:44px;padding:6px;border:1px solid transparent;border-radius:8px;background:none;color:var(--lb-muted)}.directory-filters .directory-layouts>button[aria-pressed=true]{border-color:var(--lb-line);background:var(--lb-tint);color:var(--lb-blue)}.directory-filters .directory-layouts>button:not([aria-pressed=true]):hover{background:var(--lb-soft)}.directory-layouts .lb-art{width:25px;height:25px}.directory-grid.is-list{grid-template-columns:1fr;gap:0;border:1px solid var(--lb-line);border-radius:14px;overflow:hidden}.directory-grid.is-list .directory-card{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;min-height:62px;padding:9px 14px;border:0;border-bottom:1px solid var(--lb-line);border-radius:0}.directory-grid.is-list .directory-card:last-child{border-bottom:0}.directory-grid.is-list .directory-card:nth-child(even):not(.is-self){background:color-mix(in srgb,var(--lb-soft) 32%,var(--lb-card))}.directory-grid.is-list .directory-card:hover{background:var(--lb-soft)}.directory-grid.is-list .directory-card.is-self{box-shadow:inset 3px 0 var(--lb-blue)}.directory-grid.is-list .directory-card__portrait{width:40px;height:44px;border-radius:10px}.directory-grid.is-list .directory-card__info{display:grid;grid-template-columns:minmax(120px,1fr) minmax(100px,140px) minmax(150px,210px) 20px;align-items:center;gap:7px}.directory-grid.is-list .directory-card__stats{font-size:11px;gap:9px}.directory-grid.is-list .directory-card__stats b{min-width:0;overflow-wrap:anywhere}.directory-grid.is-list .directory-card__link{position:static;justify-content:flex-end;margin:0;font-size:0}.directory-grid.is-list .directory-card__link .lb-art{width:14px;height:18px}@media(max-width:600px){.leaderboard-intro{gap:7px}.leaderboard-intro__title{gap:0}.leaderboard-intro__icon{display:none}.leaderboard-intro h3{font-size:19px}.leaderboard-intro p{font-size:10px;line-height:1.4}.leaderboard-intro__actions{gap:5px}.leaderboard-intro__actions>button{padding:8px;font-size:11px}.leaderboard-intro__actions>[data-leaderboard-refresh]>span{display:none}.leaderboard-intro__actions .lb-podium-toggle{font-size:10px;gap:4px}.leaderboard-intro__actions .lb-podium-toggle .lb-art{width:12px;height:12px}.directory-filters{gap:5px}.directory-filters>button{padding-inline:9px;font-size:10px}.directory-layouts{gap:1px;padding:1px;border-radius:10px}.directory-filters .directory-layouts>button{width:44px;min-width:44px;padding:5px}.directory-layouts .lb-art{width:24px;height:24px}.directory-grid.is-list .directory-card{grid-template-columns:36px minmax(0,1fr);gap:9px;min-height:62px;padding:8px 10px}.directory-grid.is-list .directory-card__portrait{width:36px;height:42px}.directory-grid.is-list .directory-card__info{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name link" "details code";gap:3px 5px}.directory-grid.is-list .leaderboard-name{grid-area:name;font-size:13px}.directory-grid.is-list .directory-card__code{grid-area:code;text-align:right;font-size:9px;max-width:95px;overflow-wrap:anywhere}.directory-grid.is-list .directory-card__stats{grid-area:details;font-size:10px;gap:4px 9px}.directory-grid.is-list .directory-card__link{grid-area:link}}@media(max-width:350px){.leaderboard-intro h3{font-size:18px}.directory-filters>button{padding-inline:7px;font-size:10px}.directory-layouts .lb-art{width:22px;height:22px}} /* Trainer hall: keep the shared modal geometry and directory; own the ranking surfaces. */ #leaderboardModal { --hall-surface: #f5f5f4; --hall-focus: var(--ui-focus, #087db8); --hall-gold: #775416; --hall-silver: #495563; --hall-bronze: #78472e; --hall-gold-line: #c29c59; --hall-silver-line: #9ca9b6; --hall-bronze-line: #bf947e; } html[data-game-theme=dark] #leaderboardModal { --lb-paper: var(--pp-dark-surface-0, #1b1b1d); --lb-card: var(--pp-dark-surface-1, #242426); --lb-soft: var(--pp-dark-surface-2, #303033); --lb-hover: var(--lb-soft); --lb-tint: var(--lb-soft); --lb-ink: var(--pp-dark-text, #f2f1f3); --lb-muted: var(--pp-dark-text-muted, #c1c0c6); --lb-line: var(--pp-dark-border, #4b4b50); --lb-blue: var(--pp-dark-accent, #c7b8ff); --lb-gold-bg: var(--lb-soft); --hall-surface: var(--lb-paper); --hall-focus: var(--pp-dark-focus, #c7b8ff); --hall-gold: #efcd8b; --hall-silver: #cad3df; --hall-bronze: #e8b9a1; --hall-gold-line: #a88752; --hall-silver-line: #858f9d; --hall-bronze-line: #9c7160; } #leaderboardModal :is(button,input,select):focus-visible { outline-color: var(--hall-focus); } #leaderboardModal .leaderboard-tabs:not([hidden]) { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 5px; overflow: visible; } #leaderboardModal .leaderboard-tabs button { min-width: 0; min-height: 49px; gap: 3px; padding: 4px 2px; border-radius: 9px; font-size: 11px; line-height: 1.15; white-space: normal; } #leaderboardModal .leaderboard-tabs button > span:last-child { overflow-wrap: anywhere; } #leaderboardModal .leaderboard-tab-art, #leaderboardModal .leaderboard-tab-art .lb-art { width: 23px; height: 23px; } #leaderboardModal .leaderboard-tabs button.is-active { border-color: var(--lb-blue); } #leaderboardModal .lb-hall { min-width: 0; padding-bottom: 12px; } .lb-hall .lb-hall-intro { gap: 8px; margin-bottom: 4px; } .lb-hall .lb-hall-intro h3 { margin: 0 0 3px; } .lb-hall .lb-hall-intro p { margin: 0; } .lb-hall .leaderboard-live { margin-bottom: 10px; gap: 8px; } .lb-hall .leaderboard-live > span:first-child { min-width: 0; max-width: none; overflow-wrap: anywhere; } .lb-hall-stage { margin-bottom: 12px; padding: 10px; border: 1px solid var(--lb-line); border-radius: 16px; background: var(--hall-surface); } .lb-hall-podium { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr); grid-template-areas: "silver gold bronze"; align-items: end; gap: 8px; } .lb-hall-winner { --hall-medal: var(--hall-silver); --hall-medal-line: var(--hall-silver-line); display: grid; grid-template-rows: 96px minmax(75px,auto) auto; align-items: end; justify-items: stretch; min-width: 0; padding: 0; border: 1px solid var(--lb-line); border-radius: 12px; color: var(--lb-ink); background: var(--lb-card); text-align: center; } .lb-hall-winner.is-place-1 { --hall-medal: var(--hall-gold); --hall-medal-line: var(--hall-gold-line); grid-area: gold; grid-template-rows: 126px minmax(62px,auto) auto; border-color: var(--hall-medal-line); } .lb-hall-winner.is-place-2 { grid-area: silver; } .lb-hall-winner.is-place-3 { grid-area: bronze; --hall-medal: var(--hall-bronze); --hall-medal-line: var(--hall-bronze-line); } .lb-hall-winner:disabled:not(.is-empty) { opacity: 1; } .lb-hall-winner.is-self { box-shadow: inset 0 0 0 1px var(--lb-blue); } .lb-hall-winner:hover:not(:disabled):is(button) { border-color: var(--lb-blue); } .lb-hall-portrait { display: grid; place-items: end center; align-self: stretch; margin: 0 8px; min-width: 0; min-height: 0; background: radial-gradient(ellipse at 50% 82%, color-mix(in srgb,var(--hall-medal-line) 23%,transparent),transparent 67%); } .lb-hall-portrait img { display: block; width: 94px; height: 94px; max-width: 100%; max-height: 100%; object-fit: contain; } .is-place-1 .lb-hall-portrait img { width: 124px; height: 124px; } .lb-hall-winner-info { display: grid; align-self: center; min-width: 0; padding: 3px 8px 8px; gap: 3px; } .lb-hall-winner-id { display: grid; justify-items: center; gap: 2px; min-width: 0; } .lb-hall-winner .leaderboard-name { font-size: 14px; } .lb-hall-winner.is-place-1 .leaderboard-name { font-size: 17px; } .lb-hall-winner .leaderboard-name > b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; } .lb-hall-winner .player-presence-icon, .lb-hall-row-identity .player-presence-icon { width: 12px; height: 12px; display: block; } .lb-hall-level, .lb-hall-my-label { display: block; color: var(--lb-muted); font-size: 10px; line-height: 1.3; } .lb-hall-my-label { color: var(--lb-blue); font-weight: 750; } .lb-hall-score { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 1px 4px; min-width: 0; max-width: 100%; font-size: 19px; line-height: 1.16; font-variant-numeric: tabular-nums; } .lb-hall-score > span { min-width: 0; overflow-wrap: anywhere; } .lb-hall-score > small { color: var(--lb-muted); font-size: 10px; font-weight: 550; line-height: 1.25; overflow-wrap: anywhere; } .lb-hall-winner.is-place-1 .lb-hall-score { font-size: 25px; } .lb-hall .lb-hall-score.is-wide { font-size: 14px; } .lb-hall-award { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 4px; min-height: 32px; border-top: 1px solid var(--lb-line); border-radius: 0 0 11px 11px; background: var(--hall-surface); color: var(--hall-medal); font-size: 11px; line-height: 1.2; font-weight: 750; } .lb-hall-award .lb-art { width: 21px; height: 24px; } .lb-hall-winner.is-place-1 .lb-hall-award { min-height: 38px; } .lb-hall-winner.is-place-1 .lb-hall-award .lb-art { width: 25px; height: 29px; } .lb-hall-winner.is-empty { grid-template-rows: minmax(100px,1fr) auto; color: var(--lb-muted); background: transparent; border-style: dashed; font-size: 12px; } .lb-hall-winner.is-empty .lb-hall-award { grid-row: 2; } .lb-hall-podium.is-compact { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-areas: "gold silver bronze"; align-items: stretch; } .lb-hall-podium.is-compact .lb-hall-winner { grid-template-rows: auto 1fr; } .lb-hall-podium.is-compact .lb-hall-portrait { display: none; } .lb-hall-podium.is-compact .lb-hall-award { grid-row: 1; min-height: 29px; border: 0; border-radius: 11px 11px 0 0; } .lb-hall-personal { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 7px; margin-bottom: 12px; min-height: 48px; padding: 5px 9px; border: 1px solid var(--lb-line); border-radius: 10px; background: var(--lb-card); } .lb-hall-personal > span { min-width: 0; } .lb-hall button.lb-hall-personal { width: 100%; color: var(--lb-ink); text-align: left; } .lb-hall button.lb-hall-personal:hover { border-color: var(--lb-blue); } .lb-hall-personal > span > small { display: block; color: var(--lb-muted); font-size: 11px; overflow-wrap: anywhere; } .lb-hall-personal > button, #leaderboardModal .lb-hall-state > button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 4px 8px; border: 1px solid var(--lb-line); border-radius: 8px; background: var(--lb-soft); color: var(--lb-blue); font-size: 11px; font-weight: 700; } .lb-hall-personal > button > .lb-art { width: 13px; height: 13px; } .lb-hall .lb-hall-standings { --hall-cols: 32px 39px minmax(0,1fr) minmax(74px,auto) 13px; margin-bottom: 12px; } .lb-hall-standings > header { justify-content: space-between; padding: 10px 12px; } .lb-hall-standings > header > h4 { margin: 0; font-size: 14px; } .lb-hall-columns, .lb-hall .lb-hall-standings .leaderboard-list button { display: grid; grid-template-columns: var(--hall-cols); align-items: center; gap: 8px; padding: 7px 12px; } .lb-hall-columns { background: var(--lb-soft); color: var(--lb-muted); font-size: 11px; } .lb-hall-columns > :nth-child(2) { grid-column: 3; } .lb-hall-columns > :last-child { grid-column: 4; text-align: right; } .lb-hall .lb-hall-standings .leaderboard-list button { min-height: 52px; } .lb-hall .lb-hall-standings .leaderboard-list button:focus-visible { outline-offset: -3px; } .lb-hall-standings .leaderboard-list__avatar { width: 38px; height: 38px; } .lb-hall-standings .lb-hall-row-identity { min-width: 0; } .lb-hall-standings .leaderboard-name { justify-content: flex-start; font-size: 13px; } .lb-hall-standings .lb-hall-score { justify-content: flex-end; text-align: right; } .lb-hall .lb-goal { margin-bottom: 0; } .lb-hall .lb-goal__bar > [data-goal-toggle] { max-width: none; } #leaderboardModal .lb-hall-state { min-height: 160px; gap: 8px; border: 1px solid var(--lb-line); border-radius: 12px; background: var(--lb-card); } #leaderboardModal .lb-hall-state > .lb-art { width: 37px; height: 37px; } @media (max-width: 600px) { #leaderboardModal .leaderboard-tabs:not([hidden]) { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; padding: 5px 9px; } #leaderboardModal .leaderboard-tabs button { flex-direction: column; min-height: 44px; font-size: 10px; gap: 2px; } #leaderboardModal .leaderboard-tab-art, #leaderboardModal .leaderboard-tab-art .lb-art { width: 19px; height: 19px; } .lb-hall-stage { padding: 0; border: 0; background: transparent; } .lb-hall-podium { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-areas: "gold gold" "silver bronze"; align-items: stretch; gap: 6px; } .lb-hall-winner { grid-template-rows: 62px minmax(44px,auto) auto; } .lb-hall-winner.is-place-1 { grid-template-columns: 88px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; text-align: left; min-height: 90px; } .lb-hall-winner.is-place-1 .lb-hall-portrait { grid-row: 1 / 3; grid-column: 1; align-items: center; margin: 0; } .lb-hall-winner.is-place-1 .lb-hall-portrait img { width: 86px; height: 86px; } .lb-hall-winner.is-place-1 .lb-hall-winner-info { grid-row: 2; grid-column: 2; padding: 0 8px 7px 0; } .lb-hall-winner.is-place-1 .lb-hall-winner-id { justify-items: start; } .lb-hall-winner.is-place-1 .leaderboard-name, .lb-hall-winner.is-place-1 .lb-hall-score { justify-content: flex-start; } .lb-hall-winner.is-place-1 .lb-hall-award { grid-row: 1; grid-column: 2; justify-content: flex-start; min-height: 25px; padding: 3px 4px 1px 0; border: 0; border-radius: 0 11px 0 0; background: none; } .lb-hall-winner.is-place-1 .lb-hall-award .lb-art { width: 19px; height: 22px; } .lb-hall-winner .lb-hall-portrait img { width: 60px; height: 60px; } .lb-hall-winner .leaderboard-name { font-size: 12px; } .lb-hall-winner.is-place-1 .leaderboard-name { font-size: 15px; } .lb-hall-winner.is-empty { grid-template-rows: minmax(48px,1fr) auto; } .lb-hall-podium.is-compact .lb-hall-winner { grid-template-columns: minmax(0,1fr); grid-template-rows: auto 1fr; min-height: 75px; text-align: center; } .lb-hall-podium.is-compact .lb-hall-winner-info, .lb-hall-podium.is-compact .lb-hall-award { grid-column: 1; justify-content: center; } .lb-hall-podium.is-compact .lb-hall-winner-info { grid-row: 2; padding: 2px 4px 6px; } .lb-hall-podium.is-compact .lb-hall-winner-id { justify-items: center; } .lb-hall-podium.is-compact .lb-hall-score { font-size: 16px; justify-content: center; } .lb-hall .lb-hall-standings { --hall-cols: 20px 32px minmax(0,1fr) minmax(54px,25%) 9px; } .lb-hall-standings .lb-hall-columns, .lb-hall .lb-hall-standings .leaderboard-list button { gap: 5px; padding: 6px 8px; } .lb-hall-standings .leaderboard-list__avatar { width: 31px; height: 33px; } .lb-hall-standings .lb-hall-score { display: grid; justify-items: end; font-size: 16px; } } @media (max-height: 500px) { #leaderboardModal .leaderboard-tabs button { min-height: 44px; } .lb-hall-winner { grid-template-rows: 65px minmax(46px,auto) auto; } .lb-hall-winner.is-place-1 { grid-template-rows: 82px minmax(46px,auto) auto; } } @media (max-height: 500px) and (max-width: 600px) { .lb-hall-winner.is-place-1 { grid-template-rows: auto auto; } } /* Mobile ranking: variant 02. Scoped to the ranking mode of this dialog. */ #leaderboardModal :is([data-lb-mobile-back],.lb-mobile-controls,.lb-mobile-rankbar)[hidden]{display:none} #leaderboardModal.is-mobile-ranking{padding:0} #leaderboardModal.is-mobile-ranking>.leaderboard-shell{ --lb-mobile-rank-space:calc(58px + env(safe-area-inset-bottom,0px)); display:grid;grid-template:"head" auto "controls" auto "body" minmax(0,1fr)/minmax(0,1fr); width:100%;max-width:none;height:var(--lb-vh,100dvh);max-height:none; border:0;border-radius:0;isolation:isolate; } .is-mobile-ranking .leaderboard-head{ grid-area:head;flex-wrap:nowrap;min-width:0;gap:8px;padding:6px 14px; padding-top:max(6px,env(safe-area-inset-top,0px));border:0;background:var(--lb-paper); } .is-mobile-ranking .leaderboard-head__emblem{display:none} .is-mobile-ranking .leaderboard-head small{display:block;margin-bottom:1px;font-size:8px;letter-spacing:1px} .is-mobile-ranking .leaderboard-head h2{font-size:20px;line-height:1.12;letter-spacing:-.45px} .is-mobile-ranking .leaderboard-head>[data-lb-mobile-back]{order:0} .is-mobile-ranking .leaderboard-head>[data-lb-mobile-back] svg{transform:rotate(180deg)} .is-mobile-ranking .leaderboard-modes{order:0;width:auto;margin:0;padding:0;flex:none;background:none} .is-mobile-ranking .leaderboard-modes button.is-active{display:none} .is-mobile-ranking .leaderboard-modes button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #leaderboardModal.is-mobile-ranking :is(.leaderboard-head>button,.leaderboard-modes button,.lb-mobile-controls>button){ min-width:44px;min-height:44px;padding:0;border:1px solid var(--lb-line);border-radius:12px; background:var(--lb-card);color:var(--lb-ink); } #leaderboardModal.is-mobile-ranking .leaderboard-modes button{width:44px} #leaderboardModal.is-mobile-ranking .lb-mobile-controls{ grid-area:controls;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;padding:2px 14px 4px;min-width:0; } #leaderboardModal.is-mobile-ranking .lb-mobile-controls>button{display:grid;place-items:center} #leaderboardModal.is-mobile-ranking .lb-mobile-controls>.lb-mobile-picker{ grid-template-columns:23px minmax(0,1fr) 17px;gap:8px;padding:0 11px;text-align:left;font-size:14px;font-weight:750; } #leaderboardModal.is-mobile-ranking .lb-mobile-picker>span{justify-self:start;min-width:0;overflow:hidden;text-overflow:ellipsis} #leaderboardModal.is-mobile-ranking .lb-mobile-controls .lb-art{width:21px;height:21px} #leaderboardModal.is-mobile-ranking .lb-mobile-picker>.lb-art:last-child{width:17px;height:17px;transform:rotate(90deg)} #leaderboardModal.is-mobile-ranking .lb-mobile-picker[aria-expanded=true]{border-color:var(--lb-blue)} @layer ui-theme{#leaderboardModal.is-mobile-ranking button.lb-mobile-picker:focus-visible{outline-offset:-4px!important}} #leaderboardModal.is-mobile-ranking .lb-mobile-picker[aria-expanded=true]>.lb-art:last-child{transform:rotate(-90deg)} #leaderboardModal.is-mobile-ranking .leaderboard-tabs:not([hidden]){ grid-area:body;align-self:start;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px; margin:0 14px;padding:7px;min-width:0;max-height:100%;overflow:auto;overscroll-behavior:contain;z-index:6; border:1px solid var(--lb-line);border-radius:13px;background:var(--lb-card);box-shadow:0 8px 18px #0002; } #leaderboardModal.is-mobile-ranking .leaderboard-tabs button{ flex-direction:row;justify-content:flex-start;gap:5px;padding:4px 6px;min-height:44px;font-size:12px;text-align:left; } #leaderboardModal.is-mobile-ranking .leaderboard-tabs button.is-active::after{content:'✓';margin-left:auto;color:var(--lb-blue);font-weight:750} #leaderboardModal.is-mobile-ranking .leaderboard-body{ grid-area:body;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain; padding:0 14px 9px;scrollbar-gutter:auto;scroll-padding-top:8px; } #leaderboardModal.is-mobile-ranking.has-mobile-rankbar .leaderboard-body{ padding-bottom:calc(var(--lb-mobile-rank-space) + 9px);scroll-padding-bottom:var(--lb-mobile-rank-space); } #leaderboardModal.is-mobile-ranking.is-choosing-category .leaderboard-body{opacity:.68} #leaderboardModal .lb-mobile-summary{ min-height:24px;display:flex;align-items:center;justify-content:space-between;gap:9px;color:var(--lb-muted);font-size:11px;line-height:1.25; } #leaderboardModal .lb-mobile-summary>span:first-child{min-width:0;display:flex;align-items:baseline;gap:5px} #leaderboardModal .lb-mobile-summary>span:first-child:before{content:'';width:6px;height:6px;flex:none;border-radius:50%;background:var(--lb-blue)} #leaderboardModal .lb-mobile-summary>span:last-child{flex:none} #leaderboardModal .lb-mobile-champion{ display:grid;grid-template-columns:minmax(0,1.5fr) minmax(90px,1fr);align-items:stretch;min-height:120px;width:100%;overflow:hidden; padding:0;color:var(--lb-ink);text-align:left; border:1px solid var(--lb-line);border-radius:15px; background:linear-gradient(115deg,color-mix(in srgb,var(--lb-blue) 12%,var(--lb-card)) 55%,color-mix(in srgb,var(--hall-gold-line) 16%,var(--lb-card))); } #leaderboardModal .lb-mobile-champion:focus-visible{outline-offset:-3px} #leaderboardModal .lb-mobile-champion-copy{ display:grid;justify-items:start;align-content:center;min-width:0;gap:3px;padding:7px 0 7px 14px; } #leaderboardModal .lb-mobile-medal{ display:flex;align-items:center;gap:4px;padding:3px 7px;min-height:21px;border-radius:20px; background:var(--lb-gold-bg);color:var(--hall-gold);font-size:10px;font-weight:750; } #leaderboardModal .lb-mobile-medal .lb-art{width:13px;height:13px} #leaderboardModal .lb-mobile-champion .leaderboard-name{justify-content:flex-start;font-size:22px;line-height:1.15;max-width:100%} #leaderboardModal .lb-mobile-body :is(.lb-mobile-champion,.lb-mobile-row) .player-presence-icon{width:11px;height:11px;display:block} #leaderboardModal .lb-mobile-champion .lb-hall-score{justify-content:flex-start;font-size:27px;font-weight:800} #leaderboardModal .lb-mobile-champion .lb-hall-score.is-wide{font-size:19px} #leaderboardModal .lb-mobile-champion-art{min-width:0;display:grid;align-items:end;justify-items:center;overflow:hidden} #leaderboardModal .lb-mobile-champion-art img{display:block;width:116px;height:116px;max-width:100%;object-fit:contain;object-position:center bottom} #leaderboardModal .lb-mobile-heading{display:flex;justify-content:space-between;align-items:center;gap:6px;padding-inline:2px} #leaderboardModal .lb-mobile-heading h3{margin:0;font-size:16px;line-height:1.2} #leaderboardModal .lb-mobile-heading small{color:var(--lb-muted);font-size:11px;padding-block:8px} #leaderboardModal .lb-mobile-heading button{ min-height:44px;padding:4px 5px;border:0;background:none;color:var(--lb-blue);font-size:11px;font-weight:750; } #leaderboardModal .lb-mobile-rows{ padding:0;margin:0;list-style:none;border:1px solid var(--lb-line);border-radius:13px;overflow:hidden;background:var(--lb-card); } #leaderboardModal .lb-mobile-rows li+li{border-top:1px solid var(--lb-line)} #leaderboardModal .lb-mobile-row{ display:grid;grid-template-columns:23px 31px minmax(0,1fr) minmax(50px,24%) 12px;align-items:center;gap:6px; width:100%;min-height:50px;padding:4px 8px;border:0;background:none;color:var(--lb-ink);text-align:left; } #leaderboardModal .lb-mobile-rows .is-self .lb-mobile-row{background:var(--lb-tint);box-shadow:inset 3px 0 var(--lb-blue)} #leaderboardModal .lb-mobile-row:focus-visible{outline-offset:-3px} #leaderboardModal .lb-mobile-number{color:var(--lb-muted);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums} #leaderboardModal .lb-mobile-avatar{ display:grid;place-items:center;width:31px;height:33px;overflow:hidden;border-radius:8px;background:var(--lb-soft); } #leaderboardModal .lb-mobile-avatar img{width:100%;height:100%;object-fit:contain} #leaderboardModal .lb-mobile-row-name{min-width:0} #leaderboardModal .lb-mobile-row-name .leaderboard-name{justify-content:flex-start;font-size:13px;line-height:1.2} #leaderboardModal .lb-mobile-row .lb-hall-score{display:grid;justify-content:end;justify-items:end;text-align:right;font-size:15px} #leaderboardModal .lb-mobile-row .lb-hall-score.is-wide{font-size:11px} #leaderboardModal .lb-mobile-row .lb-hall-score small{font-size:9px} #leaderboardModal .lb-mobile-row>.lb-art{width:12px;height:12px;color:var(--lb-muted)} #leaderboardModal :is(.lb-mobile-champion,.lb-mobile-row):disabled{opacity:1} #leaderboardModal.is-card-loading :is(.lb-mobile-champion,.lb-mobile-row){pointer-events:none;opacity:.65} #leaderboardModal .lb-mobile-pages{border:0;padding:8px 0} #leaderboardModal .lb-mobile-pages .leaderboard-page-picker{display:flex;margin:0 4px} #leaderboardModal .lb-mobile-body>.lb-goal{margin:6px 0 3px} #leaderboardModal.is-mobile-ranking .lb-mobile-rankbar:not([hidden]){ display:block;position:absolute;inset:auto 0 0;z-index:4;padding:6px 14px max(6px,env(safe-area-inset-bottom,0px)); border-top:1px solid var(--lb-line);background:var(--lb-paper); } #leaderboardModal .lb-mobile-rankbar button{ display:flex;align-items:center;gap:7px;min-width:0;width:100%;min-height:44px; padding:5px 12px;border:1px solid var(--lb-blue);border-radius:11px; background:var(--lb-blue);color:var(--ui-on-accent,#fff);font-size:13px;font-weight:750;text-align:left; } html[data-game-theme=dark] #leaderboardModal .lb-mobile-rankbar button{color:var(--pp-dark-on-action,#272230)} #leaderboardModal .lb-mobile-rankbar button>span{min-width:0;flex:1} #leaderboardModal .lb-mobile-rankbar button>b{font-size:11px;text-align:right} #leaderboardModal .lb-mobile-rankbar button .lb-art{width:17px;height:17px} @media (orientation:landscape) and (max-height:500px){ #leaderboardModal.is-mobile-ranking>.leaderboard-shell{ grid-template:"head head" auto "controls body" minmax(0,1fr)/minmax(168px,24%) minmax(0,1fr); } #leaderboardModal.is-mobile-ranking .leaderboard-head{padding-block:4px} #leaderboardModal.is-mobile-ranking .lb-mobile-controls{grid-template-columns:minmax(0,1fr);align-content:start;padding-right:5px} #leaderboardModal.is-mobile-ranking .lb-mobile-controls>button:last-child{width:44px} #leaderboardModal.is-mobile-ranking .leaderboard-tabs:not([hidden]){ grid-area:controls;margin:48px 4px 0 14px;max-height:calc(100% - 54px); } #leaderboardModal.is-mobile-ranking .leaderboard-tabs button{font-size:10px;padding-inline:3px;gap:2px} #leaderboardModal.is-mobile-ranking .leaderboard-tabs button :is(.leaderboard-tab-art,.lb-art){width:17px;height:17px} #leaderboardModal.is-mobile-ranking .leaderboard-tabs button.is-active::after{position:absolute;top:2px;right:3px;margin:0} #leaderboardModal.is-mobile-ranking .leaderboard-body{padding-left:8px} #leaderboardModal .lb-mobile-champion{min-height:104px} #leaderboardModal .lb-mobile-champion-art img{width:101px;height:101px} } @media (orientation:landscape) and (max-height:500px) and (max-width:719px){ #leaderboardModal.is-mobile-ranking .leaderboard-tabs:not([hidden]){grid-template-columns:minmax(0,1fr)} } /* The shared phone window layer otherwise caps landscape modal shells at 480px. */ @layer mobile-window-accessibility{ @media (orientation:landscape) and (max-height:500px) and (pointer:coarse){ html[data-mobile-viewport="active"] #app #leaderboardModal.is-mobile-ranking[aria-hidden="false"]>article.leaderboard-shell{ width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;border-radius:0!important; } } }