html.px-scroll-scene{height:auto!important;min-height:100%;overflow-y:auto!important;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch}
body.px-scene-v2{height:auto!important;min-height:100vh!important;max-height:none!important;overflow:visible!important;padding-bottom:110px!important;padding-bottom:calc(110px + env(safe-area-inset-bottom))!important;background-color:#14252d!important;background-image:none!important;background-attachment:scroll!important}
.px-scene-v2 .pixel-content{height:auto!important;max-height:none!important;overflow:visible!important;touch-action:pan-y}
.px-scene-v2 .pixel-dock{position:relative!important;left:auto!important;bottom:auto!important;transform:none!important;clear:both;margin-top:12px;padding:8px 5px!important;background:#111b23!important}
.px-scene-v2 .pixel-scene-stage{background-color:#24343a!important;background-repeat:no-repeat!important;background-size:cover!important;background-position:center!important;touch-action:pan-y}
.px-scene-v2 .px-environment-town{background-image:url('/static/pixel/town-compat.jpg')!important}
.px-scene-v2 .px-environment-courtyard{background-image:url('/static/pixel/courtyard-compat.jpg')!important}
.px-scene-v2 .px-environment-battle{background-image:url('/static/pixel/battle-compat.jpg')!important}
.pixel-content .px-scene-refresh{position:absolute;top:12px;right:10px;z-index:10;display:block;margin:0;padding:8px 9px;min-height:38px;border:1px solid #c1a06a;border-radius:6px;background:#192e36;color:#ffe3ad;font-size:12px;line-height:20px}
.px-scene-v2 .px-scene-population{-webkit-overflow-scrolling:touch;touch-action:pan-y}
.px-scene-v2 .scene-directions.px-compass{width:300px;max-width:94%;background-color:rgba(13,32,40,.85)}
.px-scene-v2 .scene-location-banner{background-color:rgba(19,35,43,.8)}
.px-scene-players{margin:5px 3px;padding:3px;border-top:1px solid #73837777}
.px-scene-v2 .pixel-scene-stage.px-has-players{min-height:560px!important}
.px-has-players .px-scene-population{bottom:135px}
.px-scene-players summary{font-size:11px;line-height:1.8;color:#c8e2da;cursor:pointer}
.px-scene-player-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.pixel-content .px-scene-player{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;margin:0;min-width:0;background:#152f36d9;border:1px solid #728f8477;border-radius:5px;font-size:10px;line-height:1.4;box-shadow:none;text-align:center}
.px-scene-player .pixel-avatar{width:32px!important;height:35px!important;min-width:32px;margin:0;border-width:1px!important;box-shadow:none!important}
.px-scene-player>span:last-child{max-width:100%;overflow-wrap:anywhere}

/* Shared operation feedback: compact, semantic, and readable on a narrow WAP page. */
#pixel-content .pixel-flash-stack{display:grid;gap:7px;margin:8px 0 13px}
#pixel-content .pixel-flash{display:grid;grid-template-columns:27px minmax(0,1fr);gap:8px;align-items:center;min-height:54px;padding:8px 9px;border:1px solid #4e6969;border-left:3px solid #789b8c;border-radius:6px;background:#1d343a;color:#e3ebe5;box-shadow:0 2px 6px #0004;overflow-wrap:anywhere}
#pixel-content .pixel-flash__mark{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border:1px solid #70938a;border-radius:50%;background:#284a46;color:#d9f0d6;font-size:15px;font-style:normal;line-height:1}
#pixel-content .pixel-flash__copy{min-width:0}
#pixel-content .pixel-flash__label{display:block;margin:0 0 1px;color:#b8d6cc;font-size:11px;letter-spacing:.04em;line-height:1.35}
#pixel-content .pixel-flash__text{margin:0;color:#f2ebd3;font-size:15px;font-weight:600;line-height:1.5;white-space:pre-line}
#pixel-content .pixel-flash__text{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px}
#pixel-content .pixel-flash__word{white-space:pre-line}
#pixel-content .pixel-flash-item{display:inline-flex;align-items:center;gap:1px;min-height:26px;padding:1px 4px 1px 1px;border:1px solid #6b7b66;border-radius:4px;background:#162b31;vertical-align:middle}
#pixel-content .pixel-flash-item .px-art{width:24px;height:24px;min-width:24px;margin:0;border:0;border-radius:3px;box-shadow:none}
#pixel-content .pixel-flash-item b{color:#ffe2a0;font-size:11px;line-height:1;white-space:nowrap}
#pixel-content .pixel-flash-item small{padding:1px 2px;border:1px solid rgba(230,196,117,.62);border-radius:3px;color:#d9c486;font-size:8px;line-height:1}
#pixel-content .pixel-flash--success{border-left-color:#b99a56;background:linear-gradient(90deg,#293f3d,#1b3238)}
#pixel-content .pixel-flash--success .pixel-flash__mark{border-color:#c8a557;background:#4a3e29;color:#ffe2a1}
#pixel-content .pixel-flash--success .pixel-flash__label{color:#e0c889}
#pixel-content .pixel-flash--notice{border-left-color:#56889e}
#pixel-content .pixel-flash--notice .pixel-flash__mark{border-color:#6897a6;background:#274654;color:#cae4ee}
#pixel-content .pixel-flash--warning{border-left-color:#b9814b;background:#3b3027}
#pixel-content .pixel-flash--warning .pixel-flash__mark{border-color:#ca995d;background:#503721;color:#ffe0a7}
#pixel-content .pixel-flash--error{border-left-color:#bd6060;background:#3b292c}
#pixel-content .pixel-flash--error .pixel-flash__mark{border-color:#cf7771;background:#512b30;color:#ffd3ca}
#pixel-content .pixel-flash.is-leaving{opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease}
@media (prefers-reduced-motion:reduce){#pixel-content .pixel-flash.is-leaving{transition:none}}

/* Equip diff inside flash messages: name + stat tags */
#pixel-content .pixel-flash-equip__body{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%}
#pixel-content .pixel-flash-equip__visual{display:flex;align-items:center;gap:6px;min-width:0}
#pixel-content .pixel-flash-equip__stats-col{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
#pixel-content .pixel-flash-equip__name{display:block;color:#f5dfa4;font-size:16px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
#pixel-content .pixel-flash-equip__bound{display:inline-block;padding:1px 5px;border:1px solid #8a7a4a;border-radius:4px;color:#d9c486;font-size:10px;line-height:1.3;background:#2a2619}
#pixel-content .pixel-flash-equip__stats{display:flex;flex-wrap:wrap;gap:4px}
#pixel-content .pixel-flash-stat{display:inline-flex;align-items:center;padding:2px 6px;border:1px solid #3a5a5a;border-radius:4px;background:#142a2e;color:#b8d6cc;font-size:12px;font-weight:600;line-height:1.4}
#pixel-content .pixel-flash-stat.is-up{border-color:#4a7a4a;background:#1a2e1d;color:#8ee08e}
#pixel-content .pixel-flash-stat.is-down{border-color:#7a4a4a;background:#2e1a1a;color:#e08e8e}
#pixel-content .pixel-flash-equip__side{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
#pixel-content .pixel-flash-equip__side small{color:#a8bfb8;font-size:10px;letter-spacing:.04em}
#pixel-content .pixel-flash-equip__side .px-equipment,#pixel-content .pixel-flash-equip__side .px-equipment.compact{width:52px;margin:0;padding:1px}
#pixel-content .pixel-flash-equip__side .px-equipment-art,#pixel-content .pixel-flash-equip__side .px-equipment.compact .px-equipment-art{width:46px;height:46px}
#pixel-content .pixel-flash-equip__side .px-equipment-name{display:block;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#b8bfb8;text-align:center;line-height:1.2}
#pixel-content .pixel-flash-equip__side .px-level,#pixel-content .pixel-flash-equip__side .px-stars,#pixel-content .pixel-flash-equip__side .px-bound{display:none}
#pixel-content .pixel-flash-arrow{color:#c8a85a;font-size:20px;font-weight:700}
@media(max-width:350px){#pixel-content .pixel-flash-equip__body{flex-direction:column;align-items:flex-start;gap:6px}}
#pixel-content .pixel-flash-stat .px-icon{width:14px;height:14px;flex-shrink:0;margin-right:3px;vertical-align:middle}
#pixel-content .pixel-flash-levelup__body{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%}
#pixel-content .pixel-flash-levelup__badge{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;border:2px solid #c8a85a;border-radius:50%;background:#3a2d1e;color:#ffe3a5;font-size:15px;font-weight:700}

/* Skill atlas: fixed ID-to-cell mappings keep the same skill recognisable in every screen. */
.pixel-skill-icon{display:inline-block;flex:none;width:34px;height:34px;background-image:url('/static/pixel/skill-icons-atlas-v1.png');background-repeat:no-repeat;background-size:400% 400%;image-rendering:auto}
.skill-icon-0{background-position:0 0}.skill-icon-1{background-position:33.3333% 0}.skill-icon-2{background-position:66.6667% 0}.skill-icon-3{background-position:100% 0}
.skill-icon-4{background-position:0 33.3333%}.skill-icon-5{background-position:33.3333% 33.3333%}.skill-icon-6{background-position:66.6667% 33.3333%}.skill-icon-7{background-position:100% 33.3333%}
.skill-icon-8{background-position:0 66.6667%}.skill-icon-9{background-position:33.3333% 66.6667%}.skill-icon-10{background-position:66.6667% 66.6667%}.skill-icon-11{background-position:100% 66.6667%}
.skill-icon-12{background-position:0 100%}.skill-icon-13{background-position:33.3333% 100%}.skill-icon-14{background-position:66.6667% 100%}.skill-icon-15{background-position:100% 100%}
body[data-pixel-page^="skill-"] .pixel-skill-icon{width:38px;height:38px;border:1px solid #88734a;border-radius:6px;background-color:#10242e;box-shadow:inset 0 0 0 1px #0008}
body[data-pixel-page="battle"] .battle-skill-tray .pixel-skill-icon{width:28px;height:28px;border:1px solid #967b48;border-radius:4px}
body[data-pixel-page^="skill-"] .skill-card-list{display:grid;gap:7px}
body[data-pixel-page^="skill-"] .skill-card{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:57px;margin:0;padding:8px 3px;border-bottom:1px solid #40565a}
body[data-pixel-page^="skill-"] .skill-card>div{min-width:0}
body[data-pixel-page^="skill-"] .skill-card .skill-name{display:block;color:#f5dfa4;font-size:16px;font-weight:bold;line-height:1.3}
body[data-pixel-page^="skill-"] .skill-card small{display:block;overflow:hidden;color:#aac0bd;font-size:11px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
body[data-pixel-page^="skill-"] .skill-card .skill-action{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:11px;white-space:nowrap}
body[data-pixel-page^="skill-"] .skill-card .skill-action span{color:#d8c483}
body[data-pixel-page^="skill-"] .skill-detail-hero{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center;margin:11px 0 8px;padding:11px;border:1px solid #8d754b;border-radius:7px;background:linear-gradient(100deg,#28413f,#1b3038)}
body[data-pixel-page^="skill-"] .skill-detail-hero .pixel-skill-icon{width:42px;height:42px}
body[data-pixel-page^="skill-"] .skill-detail-hero small{display:block;color:#c5b47a;font-size:11px;line-height:1.3}
body[data-pixel-page^="skill-"] .skill-detail-hero h1{margin:1px 0;color:#ffe4a8;font-size:21px;line-height:1.25}
body[data-pixel-page^="skill-"] .skill-detail-hero p{margin:2px 0 0;color:#c3d0cd;font-size:12px;line-height:1.45}
body[data-pixel-page^="skill-"] .skill-detail-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}
body[data-pixel-page^="skill-"] .skill-detail-stats>div{min-width:0;padding:8px;border:1px solid #405a5d;border-radius:5px;background:#1d3439}
body[data-pixel-page^="skill-"] .skill-detail-stats small,body[data-pixel-page^="skill-"] .skill-shortcut-section small{display:block;color:#a9bfbb;font-size:11px}
body[data-pixel-page^="skill-"] .skill-detail-stats strong,body[data-pixel-page^="skill-"] .skill-shortcut-section strong{display:block;color:#ffe3a5;font-size:15px}
body[data-pixel-page^="skill-"] .skill-detail-stats .skill-effect{grid-column:1/-1}
body[data-pixel-page^="skill-"] .skill-shortcut-section{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0;padding:9px;border-top:1px solid #526b68;border-bottom:1px solid #526b68}
body[data-pixel-page="shortcut-pick-skill"] .shortcut-skill-list{display:grid;gap:6px;margin:8px 0}
body[data-pixel-page="shortcut-pick-skill"] .shortcut-skill-list article{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px;border:1px solid #405a5d;border-radius:6px;background:#1b3238}
body[data-pixel-page="shortcut-pick-skill"] .shortcut-skill-list strong{min-width:0;color:#f4e0a7;font-size:15px}
body[data-pixel-page="shortcut-pick-skill"] .shortcut-skill-list span{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
body[data-pixel-page="shortcut-pick-skill"] .shortcut-skill-list a{font-size:12px;white-space:nowrap}
@media(max-width:390px){body[data-pixel-page^="skill-"] .skill-card{grid-template-columns:34px minmax(0,1fr) auto;gap:6px}body[data-pixel-page^="skill-"] .skill-card .skill-name{font-size:15px}body[data-pixel-page="shortcut-pick-skill"] .shortcut-skill-list article{grid-template-columns:32px minmax(0,1fr)}body[data-pixel-page="shortcut-pick-skill"] .shortcut-skill-list span{grid-column:2;justify-content:flex-start}}
.pixel-content .px-more-players{font-size:10px;padding:3px 0;margin:0;border:0;background:none;box-shadow:none}

/* Monster portrait coverage and threat-level presentation. */
.pixel-monster.monster-12,.pixel-monster.monster-13,.pixel-monster.monster-14,.pixel-monster.monster-15,.pixel-monster.monster-16,.pixel-monster.monster-17,.pixel-monster.monster-18{background-color:#10262b;background-repeat:no-repeat;background-position:center;background-size:contain}
.pixel-monster.monster-12{background-image:url('/static/pixel/visual/monster-flora-v1.png')}
.pixel-monster.monster-13{background-image:url('/static/pixel/visual/monster-insect-v1.png')}
.pixel-monster.monster-14{background-image:url('/static/pixel/visual/monster-water-v1.png')}
.pixel-monster.monster-15{background-image:url('/static/pixel/visual/monster-ape-v1.png')}
.pixel-monster.monster-16{background-image:url('/static/pixel/visual/monster-raven-v1.png')}
.pixel-monster.monster-17{background-image:url('/static/pixel/visual/monster-spirit-v1.png')}
.pixel-monster.monster-18{background-image:url('/static/pixel/visual/monster-golem-v1.png')}
.px-art.px-monster--elite{border:1px solid #c58c4d;border-radius:6px;background-color:#15282d;box-shadow:inset 0 0 0 1px #4b2e2d,0 0 8px rgba(218,116,55,.55);animation:px-elite-pulse 2.35s ease-in-out infinite}
.px-art.px-monster--divine{border:1px solid #ffe19a;border-radius:7px;background-color:#142b30;box-shadow:inset 0 0 0 1px #e49535,0 0 7px #f4bc4d,0 0 16px rgba(81,212,203,.72);animation:px-divine-shimmer 1.7s ease-in-out infinite}
.pixel-fighter .px-enemy-face{width:92px;height:104px;margin:0 auto;display:block}
.battle-action-event .battle-action-face.px-art{width:34px;height:38px;min-width:34px;margin:0}
@keyframes px-elite-pulse{0%,100%{filter:brightness(1);box-shadow:inset 0 0 0 1px #4b2e2d,0 0 7px rgba(218,116,55,.45)}50%{filter:brightness(1.12);box-shadow:inset 0 0 0 1px #6e3b2f,0 0 12px rgba(255,159,58,.78)}}
@keyframes px-divine-shimmer{0%,100%{filter:brightness(1) saturate(1.08);box-shadow:inset 0 0 0 1px #e49535,0 0 7px #f4bc4d,0 0 16px rgba(81,212,203,.62)}50%{filter:brightness(1.23) saturate(1.28);box-shadow:inset 0 0 0 1px #fff2b0,0 0 13px #ffe06f,0 0 23px rgba(71,234,211,.9)}}
@media (prefers-reduced-motion:reduce){.px-art.px-monster--elite,.px-art.px-monster--divine{animation:none}}

/* Scene compass: make direction controls read like a luminous tactical navigator. */
.px-scene-v2 .scene-directions.px-compass{isolation:isolate;height:118px;padding:7px!important;border:1px solid rgba(225,185,104,.72);border-radius:14px;background:radial-gradient(circle at 50% 50%,rgba(193,129,58,.22),transparent 24%),linear-gradient(135deg,rgba(11,35,43,.94),rgba(19,53,55,.9));box-shadow:inset 0 0 0 1px rgba(101,183,166,.16),inset 0 0 25px rgba(0,0,0,.56),0 8px 22px rgba(0,0,0,.54)}
.px-scene-v2 .scene-directions.px-compass:before{content:'';position:absolute;z-index:-1;inset:15px 46px;border:1px dashed rgba(232,195,113,.35);border-radius:50%;box-shadow:0 0 15px rgba(229,174,85,.16);pointer-events:none}.px-scene-v2 .scene-directions.px-compass:after{content:'DIRECTION';position:absolute;z-index:-1;left:50%;top:5px;transform:translateX(-50%);color:rgba(232,207,150,.48);font-size:8px;letter-spacing:.28em;white-space:nowrap;pointer-events:none}
.pixel-content .px-compass a{position:relative;overflow:hidden;border-color:rgba(193,166,105,.7);background:linear-gradient(145deg,rgba(52,84,82,.95),rgba(22,48,53,.97));box-shadow:inset 0 1px rgba(221,246,224,.1),0 2px 4px rgba(0,0,0,.48);text-shadow:0 1px 2px #071319;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}.pixel-content .px-compass a:before{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:4px;border:1px solid rgba(234,201,126,.72);border-radius:50%;background:rgba(19,44,49,.88);color:#ffe1a0;font-size:12px;line-height:1;text-shadow:none}.pixel-content .px-compass a:hover{transform:translateY(-1px);filter:brightness(1.16);box-shadow:inset 0 1px rgba(255,242,198,.22),0 0 12px rgba(225,177,83,.45)}.pixel-content .px-compass #scene-move-north:before{content:'↑';margin-right:4px}.pixel-content .px-compass #scene-move-south:before{content:'↓';margin-right:4px}.pixel-content .px-compass #scene-move-west:before{content:'←';margin-right:4px}.pixel-content .px-compass #scene-move-east:before{content:'→';margin-right:4px}.px-compass #scene-move-north:before,.px-compass #scene-move-south:before,.px-compass #scene-move-west:before,.px-compass #scene-move-east:after{content:normal}
.px-scene-v2 .px-map-origin{position:relative;overflow:hidden;border:1px solid #efbe63;border-radius:50%;background:radial-gradient(circle at 36% 30%,#b8753c,#603421 66%,#2d1c1d);color:#fff0c1;font-size:10px;font-weight:bold;letter-spacing:.04em;text-shadow:0 1px 2px #231510;box-shadow:inset 0 0 0 2px rgba(255,227,151,.22),0 0 0 3px rgba(25,67,67,.72),0 0 14px rgba(242,176,74,.65);animation:px-compass-origin 2.7s ease-in-out infinite}.px-scene-v2 .px-map-origin:before,.px-scene-v2 .px-map-origin:after{content:'';position:absolute;inset:-8px;border:1px solid rgba(243,191,92,.5);border-radius:50%;animation:px-compass-ring 2.7s ease-out infinite}.px-scene-v2 .px-map-origin:after{animation-delay:1.35s}
@keyframes px-compass-origin{0%,100%{filter:brightness(1);box-shadow:inset 0 0 0 2px rgba(255,227,151,.22),0 0 0 3px rgba(25,67,67,.72),0 0 10px rgba(242,176,74,.44)}50%{filter:brightness(1.18);box-shadow:inset 0 0 0 2px rgba(255,239,184,.45),0 0 0 3px rgba(25,67,67,.72),0 0 18px rgba(242,176,74,.84)}}@keyframes px-compass-ring{0%{opacity:.7;transform:scale(.62)}100%{opacity:0;transform:scale(1.42)}}@media(prefers-reduced-motion:reduce){.px-scene-v2 .px-map-origin,.px-scene-v2 .px-map-origin:before,.px-scene-v2 .px-map-origin:after{animation:none}.pixel-content .px-compass a{transition:none}}
.px-scene-v2 .scene-directions.px-compass:before,.px-scene-v2 .scene-directions.px-compass:after{z-index:0}.px-scene-v2 .scene-directions.px-compass>a,.px-scene-v2 .scene-directions.px-compass>.px-map-origin{z-index:1}
