:root{--game-bg:#071019;--game-panel:#0b1924;--game-panel-2:#102431;--game-line:#2a4350;--game-text:#e7edf0;--game-muted:#8fa4ad;--game-gold:#d5b76b;--game-teal:#45b5ad}
html,body.game-client{width:100%;height:100%;height:100dvh;overflow:hidden;background:var(--game-bg)}
body.game-client{display:grid;grid-template-rows:44px minmax(0,1fr);color:var(--game-text);font-size:12px}
body.game-client [hidden]{display:none!important}
body.game-client button:focus-visible,body.game-client canvas:focus-visible{outline:2px solid #f1ce71;outline-offset:-2px}
/* r61: focus rings follow Tab navigation, not a pointer click; the board and panels do not select text, fields still do. */
body.game-client[data-focus-source="pointer"] :focus-visible{outline:none}
body.game-client .game-topbar,body.game-client .game-shell{-webkit-user-select:none;user-select:none}
body.game-client .game-shell :is(input,textarea,select,[contenteditable]){-webkit-user-select:text;user-select:text}
body.game-client .game-topbar{height:44px;min-width:0;padding:0 14px;gap:18px;border-bottom:1px solid #29414c;background:linear-gradient(180deg,#102431,#091923);box-shadow:0 4px 18px #0008;z-index:50}
body.game-client .brand{appearance:none;padding:0;background:transparent;border:0;font-size:18px;letter-spacing:1.8px}
body.game-client .brand-icon{width:29px;height:29px;font-size:25px;border-color:#d9bd7566}
body.game-client .brand small{font-size:7px;letter-spacing:1.25px;color:#8fa5ac}
body.game-client .top-actions{align-self:stretch;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
body.game-client .top-actions::-webkit-scrollbar{display:none}
body.game-client .online-count{margin-left:auto;display:flex;align-items:center;white-space:nowrap;font-size:11px;color:#b9cac5;cursor:default}
body.game-client .online-count b{font-weight:600;color:#dfe9e4}
body.game-client .online-count+.session-tools{margin-left:14px}
body.game-client .nav-button{padding:0 9px;color:#9eb0b7;font-size:11px}
body.game-client .nav-button.active{color:#f0cf7c}
body.game-client .session-tools{margin-left:auto;gap:9px;white-space:nowrap}
body.game-client .session-tools>span{max-width:150px;overflow:hidden;text-overflow:ellipsis;color:#81959d;font-size:9px}
body.game-client .session-tools .icon-button{width:28px;height:28px;border-color:#405865;color:#d9e5e7}
body.game-client .session-tools .text-button{padding:6px 9px;border:1px solid #3a515d;border-radius:3px;color:#d9e2e5;font-size:10px}
body.game-client #settings-dialog{width:min(560px,calc(100vw - 24px))}
body.game-client .sound-settings{display:grid;gap:12px}
body.game-client .sound-row{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;align-items:center;gap:12px}
body.game-client .sound-row-label{display:grid;gap:2px;min-width:0}
body.game-client .sound-row-label strong{font-size:13px;color:#eef3f3}
body.game-client .sound-row-label small{color:#81959d;font-size:10px;line-height:1.35}
body.game-client .sound-row input[type=range]{width:100%;accent-color:#e9b949}
body.game-client .sound-row input[type=range]:disabled{opacity:.4}
body.game-client .sound-mute{display:flex;align-items:center;gap:4px;font-size:11px;color:#c7d3d6;white-space:nowrap}
body.game-client .sound-row[data-sound-category=master]{padding-bottom:10px;border-bottom:1px solid #2b4250}
body.game-client .sound-row.toggle-row{grid-template-columns:minmax(0,1fr) auto}
body.game-client .sound-settings-note{margin:4px 0 0;color:#81959d;font-size:10px}
body.game-client .auto-target-settings,body.game-client .display-settings{margin-top:14px;padding-top:12px;border-top:1px solid #2b4250}
body.game-client .display-settings{margin-bottom:14px}
body.game-client .version{margin-left:0;color:#7f969e;font-size:9px}
body.game-client .version b{margin-left:5px;padding:3px 5px}

body.game-client .game-shell{position:relative;display:grid;grid-template-rows:42px minmax(0,1fr) 184px;width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:0;background:radial-gradient(circle at 50% 20%,#183642 0,#08131c 68%)}
body.game-client .resource-bar{height:42px;min-width:0;margin:0;border:0;border-bottom:1px solid #263d48;border-radius:0;background:#091822e8;box-shadow:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;z-index:12}
body.game-client .resource-bar::-webkit-scrollbar{display:none}
body.game-client .resource-bar>div{flex:1 0 112px;height:100%;gap:8px;padding:0 16px;border-color:#253b46}
body.game-client .resource-bar>div:first-child{flex:1.35 0 180px}
body.game-client .resource-bar .stat-symbol{font-size:17px;color:#7eaaa6}
body.game-client .resource-bar .stat-symbol.gold{color:#dbbb66}
body.game-client .resource-bar .stat-symbol.wood{color:#bd8e66}
body.game-client .resource-bar .stat-symbol.wisp{color:#7bc4da}
body.game-client .resource-bar .stat-label{margin:0 0 1px;color:#71878f;font-size:8px;text-transform:uppercase}
body.game-client .resource-bar strong{color:#e7eef0;font-size:19px}
body.game-client .resource-bar strong small{color:#788d95;font-size:11px}
body.game-client .resource-bar .sea-label{margin-left:8px;padding:3px 5px;background:#163239;color:#70c2b2;font-size:8px}
body.game-client .danger-meter{background:#1d323a}

body.game-client .game-stage{position:relative;min-width:0;min-height:0;padding:7px 9px 5px}
body.game-client .board-frame{display:flex;height:100%;min-height:0;flex-direction:column;border:1px solid #314a57;border-radius:3px;background:#081720;box-shadow:0 8px 30px #0008;overflow:hidden}
body.game-client .board-heading{height:38px;min-height:38px;padding:0 10px;background:linear-gradient(180deg,#162d39,#0c202b);border-bottom:1px solid #34505b;gap:12px}
body.game-client .battle-status{display:flex;align-items:center;min-width:max-content}
body.game-client .board-heading strong{color:#eef2e9;font-size:11px}
body.game-client .board-heading #phase-label{color:#88a4ab;font-size:9px}
body.game-client .round-clock{display:inline-flex;align-items:baseline;gap:5px;margin-left:10px;padding:3px 8px;border:1px solid #c9a95a99;border-radius:3px;background:#2b2a1aeb;line-height:1;white-space:nowrap}
body.game-client .round-clock small{color:#d6c08a;font-size:9px}
body.game-client .board-heading .round-clock strong{min-width:30px;color:#fff1c2;font:700 15px 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.4px}
body.game-client .round-clock:is([data-state="paused"],[data-state="ended"],[data-state="ready"]){border-color:#55707a;background:#132a33}
body.game-client .round-clock:is([data-state="paused"],[data-state="ended"],[data-state="ready"]) small{color:#93a9ae}
body.game-client .board-heading .round-clock:is([data-state="paused"],[data-state="ended"],[data-state="ready"]) strong{color:#c3d1d4}
body.game-client .round-clock[data-state="waiting"]{border-color:#6fb3a5;background:#173a37}
body.game-client .board-heading .round-clock[data-state="waiting"] strong{font:700 12px system-ui,sans-serif;color:#d9f4ec}
body.game-client .wisp-reminder{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:3px 7px;border:1px solid #4f93a3;border-radius:10px;background:#123540;color:#bfe9f2;font-size:10px;line-height:1;white-space:nowrap;cursor:pointer}
body.game-client .wisp-reminder b{color:#effcff;font-size:11px}
body.game-client .wisp-reminder small{color:#8fc2cd;font-size:9px}
body.game-client .wisp-reminder:hover{border-color:#7cc8d8;background:#184753}
body.game-client .round-notice{position:absolute;z-index:6;top:30%;left:50%;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:4px 10px;width:max-content;max-width:calc(100% - 24px);padding:9px 14px;transform:translate(-50%,-50%);border:1px solid #d5b76bcc;border-radius:4px;background:#0a1d24f0;box-shadow:0 6px 24px #000b;color:#f3ecd2;text-align:center}
body.game-client .round-notice strong{color:#fff0bf;font-size:14px;white-space:nowrap}
body.game-client .round-notice span{color:#bfe3ea;font-size:11px;white-space:nowrap}
body.game-client .round-notice button{padding:5px 10px;border:1px solid #4e958d;border-radius:3px;background:#1e756e;color:#f3f5df;font-size:10px;white-space:nowrap}
body.game-client .attention{animation:wisp-attention .6s ease-in-out 3}
@keyframes wisp-attention{50%{box-shadow:0 0 0 2px #f1ce71,0 0 14px #f1ce71aa}}
body.game-client .panel-tabs{display:flex;align-self:auto;justify-content:center;min-width:0;flex:1;gap:3px;overflow-x:auto;scrollbar-width:none}
body.game-client .panel-tabs::-webkit-scrollbar{display:none}
body.game-client .panel-tabs button{position:relative;min-width:0;min-height:27px;padding:4px 9px;overflow:hidden;text-overflow:ellipsis;border:1px solid #314a57;border-radius:3px;background:#112832;color:#a8bac0;font-size:10px;white-space:nowrap}
body.game-client .panel-tabs button:hover{border-color:#4c807f;color:#e4cf8a;background:#17343e}
body.game-client .panel-tabs button>span{display:inline-flex;min-width:14px;height:14px;margin-left:3px;padding:0 4px;align-items:center;justify-content:center;border-radius:8px;background:#263f49;color:#e0c575;font-size:8px;line-height:1}
body.game-client .board-controls{flex:0 0 auto}
body.game-client .board-controls button{height:27px;background:#172f3a;border-color:#3b5360;color:#dce6e8}
body.game-client .support-aim-bar{flex:0 0 auto;padding:6px 11px;border-bottom:1px solid #7a6d3c;background:#173536;color:#fff0bb}
body.game-client .canvas-wrap{position:relative;flex:1 1 auto;min-height:0;height:auto;aspect-ratio:auto;background:#102733}
body.game-client .canvas-wrap canvas{width:100%;height:100%;object-fit:fill}
body.game-client .renderer-status{position:absolute;top:10px;right:10px;z-index:3;max-width:min(280px,70%);padding:6px 9px;border:1px solid #6c879188;border-radius:3px;background:#07161dcc;color:#c7d5d9;font-size:9px;line-height:1.45;pointer-events:none;backdrop-filter:blur(3px)}
body.game-client .ready-overlay{background:linear-gradient(90deg,#07141a9e,#123b3a54,#07141a9e)}
body.game-client .ready-overlay h2{margin:6px 0;font-size:clamp(20px,3vw,34px);text-shadow:0 3px 18px #000}
body.game-client .ready-overlay p{margin:2px 0 12px;font-size:11px}
body.game-client .ready-overlay .primary-button{min-width:170px;padding:10px 16px;border:1px solid #f6dd9d88;border-radius:3px;background:#d6b75f;color:#17282a;box-shadow:0 4px 16px #0007}
body.game-client .ready-overlay>small{margin-top:8px;font-size:8px}
body.game-client .ready-difficulty{display:grid;grid-template-columns:auto minmax(0,auto);align-items:center;justify-content:center;gap:4px 8px;max-width:min(360px,calc(100% - 24px));margin:0 0 12px;color:#e7eddb;font-size:10px}
body.game-client .ready-difficulty select{min-width:0;max-width:100%;padding:5px 8px;border:1px solid #f6dd9d88;border-radius:3px;background:#0b1f27e6;color:#f6efd8;font-size:11px}
body.game-client .ready-difficulty select:disabled{border-color:#5d6f6f;color:#c9d2cc;opacity:1;cursor:default}
body.game-client .ready-difficulty small{grid-column:1/-1;color:#d9c79a;font-size:9px}
body.game-client .pause-overlay{inset:10px auto auto 50%;width:max-content;max-width:calc(100% - 20px);padding:7px 9px;flex-direction:row;gap:10px;transform:translateX(-50%);border:1px solid #58717b;border-radius:4px;background:#071821df;box-shadow:0 4px 16px #0008;backdrop-filter:none;pointer-events:none;z-index:6}
body.game-client .pause-overlay strong{max-width:min(420px,calc(100vw - 120px));font-size:12px;white-space:normal}
body.game-client .pause-overlay .primary-button{min-width:0;padding:6px 10px;gap:7px;border:1px solid #4e958d;border-radius:3px;background:#1e756e;font-size:10px;box-shadow:none;pointer-events:auto}
body.game-client .board-footer{bottom:7px;font-size:8px}
/* Status toasts sit over the battlefield; clicks and drags pass through them. r61: a long toast (type multipliers on
   a phone) wraps instead of ending in an ellipsis. */
body.game-client .board-toast{pointer-events:none;white-space:normal;width:max-content;text-align:center}
body.game-client .wave-track{height:3px;background:#142832}
body.game-client .wave-track>span{background:linear-gradient(90deg,#43a69f,#d4b763)}
body.game-client .support-quick-hud{display:flex;flex:0 0 54px;min-width:0;border-top:1px solid #263f49;border-bottom:1px solid #263f49;background:linear-gradient(180deg,#102630,#0a1b24);overflow:hidden}
body.game-client .support-quick-overview{display:grid;grid-template-columns:auto minmax(72px,1fr) auto;grid-template-rows:28px 16px;width:270px;flex:0 0 270px;gap:0 7px;padding:5px 9px;border-right:1px solid #314b55;box-sizing:border-box}
body.game-client .support-quick-open{display:flex;align-items:center;gap:5px;padding:0;border:0;background:transparent;color:#e8d48f;font-size:10px;white-space:nowrap}
body.game-client .support-quick-open small{color:#829aa1;font-size:7px}
body.game-client .support-quick-mana{display:grid;align-content:center;gap:3px;min-width:0}
body.game-client .support-quick-mana strong{color:#dcebed;font-size:11px;line-height:1;white-space:nowrap}
body.game-client .support-quick-mana strong small{color:#789197;font-size:8px}
body.game-client #support-quick-mana-track{height:3px;border-radius:2px;background:#243b43;overflow:hidden}
body.game-client #support-quick-mana-fill{display:block;height:100%;background:linear-gradient(90deg,#438f99,#8bd2c8)}
body.game-client .support-quick-feed{display:grid;align-content:center;min-width:72px;height:28px;padding:2px 7px;border:1px solid #45756e;border-radius:3px;background:#1f5c55;color:#e7f1e9;text-align:left;white-space:nowrap}
body.game-client .support-quick-feed span{font-size:8px;line-height:11px}body.game-client .support-quick-feed small{max-width:88px;color:#b9d3ca;font-size:7px;line-height:10px;overflow:hidden;text-overflow:ellipsis}
body.game-client .support-quick-feed:disabled{border-color:#344c53;background:#16282e;color:#7e9398}body.game-client .support-quick-feed:disabled small{color:#6f858b}
body.game-client #support-quick-status{grid-column:1/-1;min-width:0;color:#8ea4aa;font-size:8px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-client .support-quick-spells{display:flex;flex:1;min-width:0;gap:4px;padding:5px 7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#41606a transparent}
body.game-client .support-quick-spell{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:17px 16px;width:94px;min-width:94px;height:42px;padding:4px 6px;border:1px solid #38545e;border-radius:3px;background:#102731;color:#b8c9cd;text-align:left}
body.game-client .support-quick-spell strong{min-width:0;color:#dfe8e8;font-size:9px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-client .support-quick-spell>span{color:#7fa6a8;font-size:7px;line-height:14px;white-space:nowrap}
body.game-client .support-quick-spell>small{grid-column:1/-1;color:#91a6ab;font-size:7px;line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-client .support-quick-spell:hover:not(:disabled),body.game-client .support-quick-spell.armed{border-color:#78b8aa;background:#214c4a;color:#f5e7b8}
body.game-client .support-quick-spell:disabled{border-color:#2d424a;background:#0b1d25;color:#647a80;opacity:.8}
body.game-client .support-quick-spell:disabled strong{color:#84979b}
body.game-client .support-quick-spell.item-enhanced{border-color:#8a5364;box-shadow:inset 0 0 12px #c65f7c18}
body.game-client .battle-toolbar{min-height:28px;height:28px;padding:4px 10px;border-top:1px solid #233944;background:#0b1b25;color:#738991;font-size:8px}
body.game-client .battle-toolbar .text-button{color:#d8c078}
body.game-client .view-controls{display:flex;align-self:stretch;align-items:center;gap:4px;margin-right:10px;min-width:0}
body.game-client .view-controls button{height:23px;padding:2px 9px;border:1px solid #36515d;border-radius:3px;background:#102731;color:#9eb4ba;font-size:10px;white-space:nowrap}
body.game-client .view-controls button[aria-pressed="true"]{background:#28514f;border-color:#5b9e92;color:#efe5bd}
body.game-client .view-controls kbd{padding-left:4px;color:#9eb7b6;font-size:8px}
body.game-client .battle-shortcuts{margin-right:auto;white-space:nowrap}
body.game-client .camera-controls{display:flex;align-items:center;align-self:stretch;gap:3px;margin-right:12px}
body.game-client .camera-controls button{height:22px;min-width:24px;padding:1px 5px;border:1px solid #36515d;border-radius:3px;background:#102731;color:#aec4c7;font-size:11px;line-height:1}
body.game-client .camera-controls button[aria-pressed="true"]{background:#28514f;border-color:#5b9e92;color:#efe5bd}
body.game-client #battlefield{touch-action:none}
body.game-client #battlefield.order-targeting{cursor:crosshair}
body.game-client #battlefield.camera-pan{cursor:grab}
body.game-client #battlefield.camera-dragging{cursor:grabbing}
body.game-client .selection-box{position:absolute;z-index:3;border:1px solid #a8eab1;background:#9de7a624;box-shadow:0 0 0 1px #071a1680;pointer-events:none}

body.game-client .story-view-hud{position:absolute;top:12px;left:12px;z-index:3;width:250px;max-width:calc(100% - 24px);padding:11px 12px;border:1px solid #6c846f88;border-radius:4px;background:#0a1d22e8;box-shadow:0 4px 18px #0005;backdrop-filter:blur(4px)}
body.game-client .story-view-title{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#aec3ba;font-size:10px}
body.game-client .story-view-title button{padding:3px 5px;border:1px solid #36535c;border-radius:3px;background:#183139;color:#b2c5c8;font-size:8px;white-space:nowrap}
body.game-client #story-view-target{display:block;margin:5px 0 8px;color:#ece7d4;font-size:19px}
body.game-client .story-view-hp{height:5px;border-radius:2px;background:#314440;overflow:hidden}
body.game-client .story-view-hp>span{display:block;height:100%;background:linear-gradient(90deg,#a05b4e,#dca278)}
body.game-client .story-view-meta{display:flex;justify-content:space-between;margin-top:4px;color:#c8c6ac;font-size:9px}
body.game-client #story-view-status{margin:8px 0;color:#8fa9ab;font-size:9px;line-height:1.5}
body.game-client .cooperation-view-hud{border-color:#796e9b99;background:#151927ed}
body.game-client .cooperation-view-hud #cooperation-view-state{color:#d4c8f0;font-size:9px}
body.game-client .cooperation-target-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:6px 0 2px}
body.game-client .cooperation-target-tabs button{min-width:0;padding:3px 2px;border:1px solid #4d4a65;border-radius:3px;background:#24283a;color:#aaa7bf;font-size:8px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-client .cooperation-target-tabs button[aria-pressed="true"]{border-color:#a18ab0;background:#594b6d;color:#fff3d4}
body.game-client .cooperation-target-tabs button.completed{border-color:#4b6265;background:#233639;color:#a9c2bf}
body.game-client .cooperation-target-tabs button.reward-error{border-color:#d67a62;background:#512b31;color:#ffd5c5}
body.game-client .cooperation-target-tabs button[aria-pressed="true"]{box-shadow:inset 0 -2px #fff3d4}
body.game-client #cooperation-view-target{display:block;margin:5px 0 8px;color:#f0e9dc;font-size:19px}
body.game-client .cooperation-view-hud .story-view-hp{background:#3b384c}
body.game-client .cooperation-view-hud .story-view-hp>span{background:linear-gradient(90deg,#755583,#c18691)}
body.game-client #cooperation-view-status{margin:8px 0 5px;color:#a9a5bd;font-size:9px;line-height:1.5}
body.game-client .cooperation-view-reward{display:block;margin-bottom:7px;color:#c8b979;font-size:8px;line-height:1.45}
body.game-client .cooperation-view-hud.reward-error{border-color:#cf6f55;background:#351d23ed}
body.game-client .cooperation-view-hud.reward-error #cooperation-view-status{color:#ffd0bd}
body.game-client .line-watch{width:100%;padding:5px 8px;border:1px solid #41616a;border-radius:3px;background:#152e37;color:#acc3c8;text-align:left;font-size:10px}
body.game-client .line-watch.danger{border-color:#b46b50;background:#502d2a;color:#ffd2b0}
body.game-client .canvas-wrap:is([data-view="story"],[data-view="cooperation"]) .pause-overlay{top:auto;bottom:30px}

body.game-client .keyboard-hint{border-color:#3b515a;color:#91a4aa}

body.game-client .command-dock{display:grid;grid-template-columns:clamp(190px,18vw,250px) minmax(280px,1fr) clamp(250px,24vw,340px);gap:1px;min-width:0;min-height:0;border-top:1px solid #3a515d;background:#263b45;box-shadow:0 -5px 20px #0008;z-index:15}
body.game-client .command-dock>section{min-width:0;min-height:0;margin:0;padding:10px 12px;border:0;border-radius:0;background:linear-gradient(180deg,#102531,#091923);color:#dce6e8;overflow:auto;scrollbar-color:#405965 transparent;scrollbar-width:thin}
body.game-client .command-dock>section+section{border-left:1px solid #304752}
body.game-client .command-dock>.summon-panel{grid-column:1;grid-row:1}
body.game-client .command-dock>.crew-section{grid-column:2;grid-row:1}
body.game-client .command-dock>.selection-panel{grid-column:3;grid-row:1}
body.game-client .command-dock .section-heading{height:24px;margin:0 0 6px}
body.game-client .command-dock .section-heading h2{color:#dce6e8;font-size:11px}
body.game-client .command-dock .section-heading h2>span{background:#203943;color:#8fc4b6}
body.game-client .command-dock .tiny-label{color:#799099;font-size:8px}
body.game-client .summon-panel{background:linear-gradient(160deg,#172b35,#0a1b24)!important}
body.game-client .summon-panel .summon-art,body.game-client .summon-panel>p{display:none}
body.game-client .summon-panel .summon-button{min-height:46px;margin:0;padding:7px 10px;border:1px solid #8e793f;border-radius:3px;background:linear-gradient(180deg,#b29445,#725e2c);color:#fff4ca}
body.game-client .summon-panel .summon-button span{font-size:11px}
body.game-client .summon-panel .summon-button small{font-size:8px;color:#e8ddb9}
body.game-client .summon-panel .batch-button{min-height:29px;margin-top:5px;border:1px solid #34545b;background:#17323b;color:#a9c2c6;font-size:10px}
body.game-client .summon-panel .wisp-actions{gap:4px;margin-top:5px}
body.game-client .summon-panel .wisp-actions button{min-height:25px;padding:4px;border:1px solid #304b56;background:#112b35;color:#9fb6bd;font-size:10px}
body.game-client .common-hero-group{display:grid;width:100%;min-height:32px;margin-top:5px;padding:4px 7px;border:1px solid #3c665f;border-radius:3px;background:#163a38;color:#c7dfd7;text-align:left}
body.game-client .common-hero-group span{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:9px;font-weight:700}
body.game-client .common-hero-group b{color:#e1cb84;font-size:8px;white-space:nowrap}
body.game-client .common-hero-group small{margin-top:2px;color:#86aaa3;font-size:7px;line-height:1.35}
body.game-client .common-hero-group:disabled{border-color:#2c444b;background:#10252e;color:#71868b}
body.game-client .common-hero-group:disabled b,body.game-client .common-hero-group:disabled small{color:#647b80}
body.game-client .crew-section{display:flex;flex-direction:column}
body.game-client .crew-filters{padding:2px;border-color:#314955;background:#0a1922}
body.game-client .crew-filters button{padding:2px 8px;color:#7f959c;font-size:8px}
body.game-client .crew-filters .active{background:#25434c;color:#e6d392;box-shadow:none}
body.game-client .crew-tools{display:flex;align-items:center;gap:8px;min-height:22px;margin-bottom:4px}
body.game-client .crew-tools input{min-width:0;width:140px;height:22px;padding:3px 6px;border:1px solid #314955;border-radius:3px;background:#081a23;color:#dce6e8;font-size:10px}
body.game-client .crew-tools input::placeholder{color:#8fa4ad}
body.game-client .crew-tools span{color:#8fa4ad;font-size:9px;white-space:nowrap}
body.game-client .crew-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-columns:64px;flex:1;min-height:0;max-height:none;gap:4px;padding:1px 4px 4px 1px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity}
body.game-client .crew-card{width:auto;height:100%;min-height:0;padding:2px;border-color:#2e4752;border-radius:4px;background:#0e202a;color:#d7e2e5;box-shadow:inset 0 0 18px #0002;scroll-snap-align:start}
body.game-client .crew-card.selected{border-color:#57b5a6;background:#16343c;box-shadow:0 0 0 1px #57b5a6,inset 0 0 16px #2a8a7d22}
body.game-client .crew-card img{width:32px;height:32px;min-height:0;object-fit:contain;margin:0 auto 2px;border-radius:3px}
body.game-client .crew-card .crew-name{display:block;flex-shrink:0;margin-top:0;color:#dce4e7;font-size:8px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-client .crew-card .story-badge{top:2px;left:2px;right:auto;bottom:auto;padding:1px 2px;background:#25586d;font-size:7px}
body.game-client .crew-card .cooperation-badge{background:#66547f}
body.game-client .crew-card .lifetime-badge{background:#7d3f4b;color:#ffe7dc}
body.game-client .crew-stack{position:absolute;top:1px;right:1px;padding:1px 3px;border-radius:3px;background:#071820e8;color:#f9df97;font-size:10px;font-weight:800;line-height:1.2}
body.game-client .crew-trait{position:absolute;bottom:13px;right:3px;color:#ffd57a;font-size:10px;text-shadow:0 1px 3px #000}
body.game-client .empty-crew{grid-row:1/-1;display:grid;place-items:center;min-width:140px;height:100%;padding:8px;border-color:#344b55;color:#7e9299;background:#0b1b24}
body.game-client .crew-member-nav{display:flex;align-items:center;justify-content:space-between;height:19px;margin-bottom:3px;color:#afc2c8;font-size:9px}
body.game-client .crew-member-nav button{width:23px;height:19px;padding:0;border:1px solid #36545e;border-radius:3px;background:#132c36;color:#dbe8e9;line-height:1}
body.game-client .selection-panel{padding:8px 11px!important;font-size:10px;overflow:hidden!important}
body.game-client .selection-panel .selected-hero{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:9px;height:52px;margin:0 0 4px;padding:2px 0;border-bottom:1px solid #314954;background:transparent;color:#e6edf0;text-align:left}
body.game-client .selection-panel .selected-hero img{width:46px;height:46px;border:1px solid #49616b;border-radius:5px;background:#dce7df}
body.game-client .selection-panel .selected-hero>div{min-width:0}
body.game-client .selection-panel .rarity-label{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-client .selection-panel .selected-hero h3{margin:1px 0;color:#f0f4f5;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-client .selection-panel .selected-hero p{margin:0;color:#9caeb4;font-size:10px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-client .selection-panel .unit-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:35px;margin:0 0 5px;padding:0;border:1px solid #2b4650;gap:0;background:#0d2029}
body.game-client .selection-panel .unit-stats>div{min-width:0;padding:3px 6px;border:0;border-left:1px solid #2b4650;background:transparent;color:#91a5ab;font-size:10px;line-height:1.15;overflow:hidden}
body.game-client .selection-panel .unit-stats>div:first-child{border-left:0}
body.game-client .selection-panel .unit-stats strong{display:block;margin:2px 0 0;color:#e6edef;font-size:13px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-client .selection-panel .unit-stats strong small{color:#d8e3e5;font-size:10px}
body.game-client .selection-panel .selected-subactions{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(68px,.8fr) minmax(46px,.55fr);align-items:stretch;gap:4px;height:31px;margin:0;color:#aabac0;font-size:10px}
body.game-client .zone-assignment-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;min-width:0}
body.game-client .selection-panel .selected-subactions .assignment-button,body.game-client .selection-panel .selected-subactions .text-button{width:auto;min-width:0;min-height:31px;height:31px;margin:0;padding:4px 6px;border:1px solid #36545e;border-radius:3px;font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-client .selection-panel .selected-subactions .assignment-button{padding-inline:2px;background:#21766e;color:#eff9ed;font-size:8px}
body.game-client .selection-panel .selected-subactions .assignment-button[data-assign-zone="cooperation"]{font-size:7px}
body.game-client .zombie-lifetime-status{margin:8px 0;padding:8px 10px;border:1px solid #64737a;border-left:3px solid #809199;border-radius:4px;background:#edf2f1;color:#42545a;font-size:12px;line-height:1.5}
body.game-client .zombie-lifetime-status.timed{border-color:#a66961;border-left-color:#a94d42;background:#fff0e8;color:#6d3b33}
body.game-client .zombie-lifetime-status strong,body.game-client .zombie-lifetime-status span{display:block}
body.game-client .zone-assignment-actions .assignment-button.current{border-color:#68777d;background:#26353c;color:#a4b2b6;opacity:1}
body.game-client .selection-details>.zone-assignment-actions{margin:9px 0}
body.game-client .selection-details>.zone-assignment-actions .assignment-button{padding:7px 4px}
/* 유닛 상세 keeps its zone orders in view: the row sticks to the bottom of the
   scrolling drawer (its 12px padding included) while the ability text scrolls beneath. */
body.game-client .game-drawer .selection-details .zone-assignment-actions{position:sticky;bottom:-12px;z-index:2;margin:9px 0 0;padding:8px 0 12px;background:#10222c;box-shadow:0 -12px 12px -10px #000}
body.game-client .drawer-body:has(>[data-panel-content="unit"]:not([hidden])){scroll-padding-bottom:64px}
body.game-client .selection-panel .selected-subactions .text-button{background:#132c36;color:#b8c8cd}
body.game-client .selection-panel .selected-subactions .command-cancel{border-color:#875b4e;background:#3b2928;color:#ffd7c7}
.kizaru-summary,.kizaru-techniques,.kizaru-mana-meter{padding:10px 12px;border:1px solid #8e79464d;border-left:3px solid #d5b567;border-radius:4px;background:#fff8df;color:#65572d;font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.kizaru-summary>strong,.kizaru-summary>span,.kizaru-summary>small{display:block}
.kizaru-summary>small,.kizaru-techniques small,.kizaru-mana-meter small{font-size:11px;line-height:1.65}
.kizaru-techniques{margin:8px 0}.kizaru-techniques>summary{cursor:pointer;font-weight:600}.kizaru-techniques p{margin:10px 0}.kizaru-mana-meter{margin:10px 0}.kizaru-mana-meter>div:first-child{display:flex;justify-content:space-between;gap:8px}.kizaru-mana-track{height:5px;margin:7px 0;background:#5c512d44;border-radius:4px;overflow:hidden}.kizaru-mana-track>span{display:block;height:100%;background:linear-gradient(90deg,#bd9033,#ffe39a)}.kizaru-mana-meter.ready{border-color:#ceaa57}
body.game-client .game-drawer :is(.kizaru-summary,.kizaru-techniques,.kizaru-mana-meter){background:#2c2a1e;color:#e5d6af;border-color:#77643e}
@media(max-width:480px){.kizaru-summary>small,.kizaru-techniques small,.kizaru-mana-meter small{font-size:12px}}
.shiki-summary,.shiki-techniques,.shiki-mana-meter{padding:10px 12px;border:1px solid #66717d;border-left:3px solid #9aa5b3;border-radius:4px;background:#edf1f3;color:#3f4a54;font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.shiki-summary>strong,.shiki-summary>span,.shiki-summary>small{display:block}.shiki-techniques{margin:8px 0}.shiki-techniques>summary{cursor:pointer;font-weight:600}.shiki-techniques p{margin:10px 0}.shiki-techniques small,.shiki-mana-meter small{font-size:11px;line-height:1.65}.shiki-mana-meter{margin:10px 0}.shiki-mana-meter>div:first-child{display:flex;justify-content:space-between;gap:8px}.shiki-mana-track{height:5px;margin:7px 0;border-radius:4px;background:#5f697244;overflow:hidden}.shiki-mana-track>span{display:block;height:100%;background:linear-gradient(90deg,#647786,#c9d5dc)}.shiki-mana-meter.ready{border-color:#b69b50;border-left-color:#e0bb59}.shiki-trait-summary span,.shiki-trait-summary small{display:block}
body.game-client .game-drawer :is(.shiki-summary,.shiki-techniques,.shiki-mana-meter){background:#1d2930;color:#d5dee2;border-color:#60717a}
body.game-client .game-drawer .shiki-mana-meter.ready{border-color:#a58c50}
@media(max-width:480px){.shiki-summary>small,.shiki-techniques small,.shiki-mana-meter small{font-size:12px}}
.whitebeard-summary,.whitebeard-techniques{padding:10px 12px;border:1px solid #79878d;border-left:3px solid #d7e4e8;border-radius:4px;background:#eef4f5;color:#3f5057;font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.whitebeard-summary>strong,.whitebeard-summary>span,.whitebeard-summary>small{display:block}.whitebeard-techniques{margin:8px 0}.whitebeard-techniques>summary{cursor:pointer;font-weight:600}.whitebeard-techniques p{margin:10px 0}.whitebeard-techniques small{font-size:11px;line-height:1.65}
body.game-client .game-drawer :is(.whitebeard-summary,.whitebeard-techniques){background:#1c2c33;color:#dce8ea;border-color:#71828a}
@media(max-width:480px){.whitebeard-summary>small,.whitebeard-techniques small{font-size:12px}}
.nami-summary,.nami-cloud-status{padding:10px 12px;border:1px solid #62818a;border-left:3px solid #78c3d1;border-radius:4px;background:#edf7f8;color:#36565f;font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.nami-summary>strong,.nami-summary>span,.nami-summary>small,.nami-cloud-status>strong,.nami-cloud-status>span{display:block}.nami-summary>small{font-size:11px;line-height:1.65}.nami-cloud-status{margin:8px 0;border-left-color:#8b9ca1;background:#f1f5f5}.nami-cloud-status.equipped{border-color:#4b9bae;border-left-color:#70d1e4;background:#e7f8fb}.nami-cloud-status>span{font-size:11px}
body.game-client .game-drawer :is(.nami-summary,.nami-cloud-status){background:#172d35;color:#d8e9ec;border-color:#527d88}
body.game-client .game-drawer .nami-cloud-status.equipped{background:#18343d;border-color:#559bad}
@media(max-width:480px){.nami-summary>small,.nami-cloud-status>span{font-size:12px}}

body.game-client .game-drawer{position:absolute;z-index:40;top:88px;right:0;bottom:184px;width:min(470px,100vw);border-left:1px solid #49616c;background:#091822f2;color:#dfe8ea;box-shadow:-14px 0 36px #000a;backdrop-filter:blur(12px)}
body.game-client .game-drawer>header{display:flex;align-items:center;justify-content:space-between;height:48px;padding:8px 12px;border-bottom:1px solid #304852;background:#102630}
body.game-client .game-drawer>header small{display:block;color:#718891;font:600 8px 'Barlow Condensed',sans-serif;letter-spacing:1.4px}
body.game-client .game-drawer>header h2{margin:1px 0 0;color:#e6ecee;font-size:14px}
body.game-client .game-drawer>header button{width:34px;height:34px;border:1px solid #405965;border-radius:3px;background:#162f39;color:#e5ecee;font-size:20px}
body.game-client .drawer-body{height:calc(100% - 48px);padding:12px;overflow:auto;overscroll-behavior:contain;scrollbar-color:#48616b #0a1a23}
body.game-client .drawer-body>[data-panel-content]{min-height:100%}
body.game-client .game-drawer :is(.navigation-panel,.support-panel,.unit-gamble-panel,.shop-panel,.inventory-panel,.combine-panel,.story-section,.pika-quest,.upgrade-panel,.selection-details){margin:0 0 12px;border:1px solid #304954;border-radius:4px;background:#10222c;color:#dbe5e7;box-shadow:none}
body.game-client .optional-quest-list{display:grid;gap:10px;margin-top:12px}
body.game-client .optional-quest-list .pika-quest{margin:0}
body.game-client .garp-quest .pika-quest-mark{background:radial-gradient(circle at 35% 25%,#ad9551,#4d4938)}
body.game-client .wapol-quest .pika-quest-mark{background:radial-gradient(circle at 35% 25%,#9b6874,#493a46)}
body.game-client .game-drawer :is(.navigation-panel,.unit-gamble-panel,.shop-panel) details{padding:11px}
body.game-client .game-drawer :is(.navigation-panel,.unit-gamble-panel,.shop-panel) summary strong,body.game-client .game-drawer :is(.navigation-selected,.support-heading) strong{color:#e8eef0}
body.game-client .game-drawer :is(.navigation-panel,.unit-gamble-panel,.shop-panel) summary em,body.game-client .game-drawer :is(.navigation-note,.unit-gamble-note,.shop-note,.support-scope,.support-spell-note){color:#8da1a7}
body.game-client .game-drawer :is(.navigation-option,.unit-gamble-option,.shop-offer,.support-spell-button,.support-actions article,.quick-recipe,.upgrade-row){border-color:#304b56;background:#0d2029;color:#aebfc4}
body.game-client .game-drawer :is(.navigation-option,.unit-gamble-option,.shop-offer,.support-spell-button,.quick-recipe) strong{color:#dfe8e8}
body.game-client .game-drawer :is(.navigation-option,.unit-gamble-option,.shop-offer,.support-spell-button,.quick-recipe) :is(span,small,em){color:#8fa5ab}
body.game-client .game-drawer .support-panel{display:grid;grid-template-columns:minmax(0,1fr);padding:12px}
body.game-client .game-drawer .support-actions{grid-template-columns:minmax(0,1fr)}
body.game-client .game-drawer .support-actions button,body.game-client .game-drawer .support-story-action button{background:#286d69;color:#f3f5df}
body.game-client .game-drawer .support-spell-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body.game-client .support-spell-button [data-support-item]{margin:4px 0 0;padding:2px 5px;border:1px solid #a55d72;border-radius:2px;background:#3a202a;color:#ffc8d6;font-size:8px;font-weight:700;line-height:1.3}
body.game-client .support-spell-button [data-support-item]:empty{display:none}
body.game-client .support-spell-button.item-enhanced{border-color:#8a5364;box-shadow:inset 0 0 18px #c65f7c18}
body.game-client .game-drawer .inventory-panel{padding:14px}
body.game-client .inventory-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:11px;border-bottom:1px solid #304954}
body.game-client .inventory-heading>div{display:flex;align-items:center;gap:9px}
body.game-client .inventory-heading .inventory-mark{display:grid;width:34px;height:34px;place-items:center;border:1px solid #725f3b;border-radius:50%;background:#2f2a1d;color:#efce79;font-size:20px}
body.game-client .inventory-heading small{display:block;color:#728991;font:600 8px 'Barlow Condensed',sans-serif;letter-spacing:1.3px}
body.game-client .inventory-heading h2{margin:1px 0 0;color:#e7edef;font-size:14px}
body.game-client .inventory-heading>strong{color:#e8d59a;font-size:22px}
body.game-client .inventory-heading>strong small{margin-left:3px;color:#82979d;font-size:9px}
body.game-client .inventory-scope{margin:10px 0;color:#899fa6;font-size:10px;line-height:1.55}
body.game-client .item-shop-panel{margin:10px 0;padding:10px;border:1px solid #4b675b;border-radius:4px;background:linear-gradient(145deg,#142e2c,#10232b)}
body.game-client .item-shop-panel>header{display:flex;align-items:center;justify-content:space-between;gap:10px}
body.game-client .item-shop-panel>header small{display:block;color:#77958b;font:600 8px 'Barlow Condensed',sans-serif;letter-spacing:1.2px}
body.game-client .item-shop-panel h3,.item-catalog-heading h3{margin:2px 0 0;color:#dfe9e4;font-size:13px}
body.game-client .item-shop-panel>header>strong{padding:4px 6px;border:1px solid #4d7467;border-radius:3px;color:#b8dacb;font-size:9px;white-space:nowrap}
body.game-client .item-shop-stats{display:grid;grid-template-columns:1.2fr .7fr .7fr;gap:1px;margin:9px 0;background:#304b45}
body.game-client .item-shop-stats>span{padding:6px 7px;background:#10242a;color:#829c96;font-size:8px}
body.game-client .item-shop-stats strong{display:block;margin-top:2px;color:#c9ddd5;font-size:10px}
body.game-client .item-purchase-button{width:100%;min-height:34px;border:1px solid #568d79;border-radius:3px;background:#276b58;color:#eff7ed;font-size:11px}
body.game-client .item-purchase-button:disabled{border-color:#40575a;background:#203137;color:#829599}
body.game-client .item-shop-reason{display:block;margin-top:6px;color:#8fa59f;font-size:9px;line-height:1.5}
body.game-client .item-catalog-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:13px 0 7px}
body.game-client .item-catalog-heading small{color:#80969d;font-size:9px}.item-catalog-heading>strong{color:#dac887;font-size:10px;white-space:nowrap}
body.game-client .item-list{display:grid;gap:5px}
body.game-client .item-list-empty{margin:0;padding:12px;border:1px dashed #40565e;color:#80969d;text-align:center;font-size:10px}
body.game-client .item-entry{border:1px solid #344e58;border-radius:4px;background:#0d2029;color:#a8bbc0;overflow:hidden}
body.game-client .item-entry[data-state="owned"]{border-color:#6b673f;background:#17272a}.item-entry[data-state="active"]{border-color:#4f7d70;background:#142b2d}
body.game-client .item-entry>summary{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px;cursor:pointer;list-style:none}
body.game-client .item-entry>summary::-webkit-details-marker{display:none}.item-entry>summary:focus-visible{outline:2px solid #e5cf8f;outline-offset:-2px}
body.game-client .item-entry-icon{display:grid;width:26px;height:26px;place-items:center;border:1px solid #51656b;border-radius:50%;background:#1b3037;color:#d9c77f;font-size:13px}
body.game-client .item-entry-title{min-width:0}.item-entry-title strong,.item-entry-title small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-entry-title strong{color:#dce6e6;font-size:11px}.item-entry-title small{color:#849aa1;font-size:9px}
body.game-client .item-entry-state{padding:3px 5px;border:1px solid #465d64;border-radius:3px;color:#94a8ad;font-size:8px;white-space:nowrap}.item-entry[data-state="owned"] .item-entry-state,.item-entry[data-state="active"] .item-entry-state{border-color:#6a6c45;color:#e0cb83}
body.game-client .item-entry-body{padding:0 8px 8px;border-top:1px solid #2e4650}.item-entry-effect{margin:8px 0;padding:7px 8px;border-left:2px solid #ad914a;background:#17292e;color:#c7c3a9;font-size:10px;line-height:1.5}
body.game-client .item-copy-list{display:grid;gap:3px;margin:6px 0}.item-copy-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 6px;border:1px solid #304a53;border-radius:3px;background:#10252e;font-size:9px}.item-copy-row strong{color:#afc4c8}.item-copy-row span{color:#80979d;text-align:right}
body.game-client .item-entry-note{display:block;margin:7px 0;color:#8da2a8;font-size:9px;line-height:1.5}
body.game-client .item-instance-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;margin-top:5px}.item-instance-actions select{min-width:0;border:1px solid #405d66;border-radius:3px;background:#0c1f27;color:#c8d5d7;padding:5px;font-size:9px}.item-instance-actions button,.item-entry-recipe{min-height:30px;border:1px solid #4b8276;border-radius:3px;background:#205c54;color:#e1eee9;padding:4px 9px;font-size:9px}.item-instance-actions button:disabled{border-color:#40545a;background:#203138;color:#7d9095}.item-instance-actions>.item-entry-note{grid-column:1/-1;margin:0}.item-entry-recipe{width:100%;margin-top:6px}
body.game-client .treasure-panel{padding:14px;border:1px solid #304954;border-radius:4px;background:#10222c;color:#dbe5e7}
body.game-client .treasure-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:11px;border-bottom:1px solid #304954}.treasure-heading>div{display:flex;align-items:center;gap:9px}.treasure-mark{display:grid;width:34px;height:34px;place-items:center;border:1px solid #486c75;border-radius:50%;background:#18313a;color:#8cd0d9;font-size:19px}.treasure-heading small{display:block;color:#728991;font:600 8px 'Barlow Condensed',sans-serif;letter-spacing:1.3px}.treasure-heading h2{margin:1px 0 0;color:#e7edef;font-size:14px}.treasure-heading>strong{padding:4px 6px;border:1px solid #4e737a;border-radius:3px;color:#add9df;font-size:9px}
body.game-client .treasure-scope,.treasure-map-help{color:#899fa6;font-size:10px;line-height:1.55}.treasure-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:9px 0;background:#304b55}.treasure-stats>span{padding:7px;background:#0d2029;color:#82979d;font-size:8px}.treasure-stats strong{display:block;margin-top:2px;color:#c9d9dc;font-size:10px}
body.game-client .treasure-cooldown{margin:9px 0}.treasure-cooldown>div:first-child{display:flex;justify-content:space-between;color:#8fa5ab;font-size:9px}.treasure-cooldown>div:first-child strong{color:#d4e0e1}.treasure-cooldown-track{height:5px;margin-top:5px;border:1px solid #38545e;border-radius:4px;background:#091920;overflow:hidden}.treasure-cooldown-track>span{display:block;height:100%;background:linear-gradient(90deg,#438d88,#93d1c5)}
body.game-client .treasure-search-map{position:relative;display:block;width:min(100%,310px);aspect-ratio:8320/8480;margin-inline:auto;overflow:hidden;border:1px solid #416772;border-radius:5px;background:linear-gradient(145deg,#153d4b,#0c2732);color:#d9ecee;cursor:crosshair}.treasure-search-map[aria-disabled="true"]{border-color:#3b5058;color:#8ca1a7;cursor:not-allowed}.treasure-search-map:focus-visible{outline:2px solid #e5cf8f;outline-offset:2px}.treasure-sea{position:absolute;inset:0;background:radial-gradient(circle at 28% 24%,#5d879044 0 2%,transparent 3%),radial-gradient(circle at 70% 63%,#658b7540 0 3%,transparent 4%),repeating-linear-gradient(145deg,transparent 0 17px,#89c5cf0b 18px 19px)}.treasure-search-map>strong{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);padding:4px 7px;border:1px solid #638993;border-radius:3px;background:#0b2028d9;font-size:9px;white-space:nowrap}.treasure-search-area{position:absolute;left:var(--search-x,50%);top:var(--search-y,50%);width:var(--search-rx,9%);height:var(--search-ry,9%);transform:translate(-50%,-50%);border:1px solid #87d5d0;border-radius:50%;background:#6ac0bd20;pointer-events:none}.treasure-search-area.previous{border-style:dashed;border-color:#8ba4a9;background:transparent}.treasure-target-marker{position:absolute;left:var(--search-x,50%);top:var(--search-y,50%);transform:translate(-50%,-50%);color:#f4dd85;font-size:17px;text-shadow:0 1px 4px #000;pointer-events:none}.treasure-map-help{margin:7px 0}.treasure-last-result{padding:8px;border-left:2px solid #5a858d;background:#132a32}.treasure-last-result strong,.treasure-last-result span{display:block}.treasure-last-result strong{color:#d8e6e8;font-size:10px}.treasure-last-result span{margin-top:2px;color:#91a6ac;font-size:9px;line-height:1.5}
body.game-client .item-card{padding:12px;border:1px solid #735f38;border-radius:4px;background:linear-gradient(145deg,#282719,#14252a);box-shadow:inset 0 0 24px #c69b3220}
body.game-client .item-card+.item-card{margin-top:10px}
body.game-client .item-card[data-state="empty"]{border-color:#3c5158;background:#0d2029;box-shadow:none;opacity:.78}
body.game-client .item-card[data-state="consumed-unlocked"]{border-color:#46645d;background:linear-gradient(145deg,#15302b,#10242b);box-shadow:inset 0 0 20px #4b9c7820}
body.game-client .item-card[data-state="sold"]{border-color:#4d5b5f;background:linear-gradient(145deg,#1c292c,#102129);box-shadow:none}
body.game-client .fleet-item-card[data-state="acquired"]{border-color:#6f7050;background:linear-gradient(145deg,#29291c,#14262c)}
body.game-client .snail-item-card[data-state="acquired"]{border-color:#9a7d38;background:linear-gradient(145deg,#332b17,#14262c);box-shadow:inset 0 0 24px #d5a83d24}
body.game-client .wine-item-card[data-state="acquired"]{border-color:#806252;background:linear-gradient(145deg,#32221f,#14242b);box-shadow:inset 0 0 24px #b7785524}
body.game-client .buster-item-card[data-state="acquired"]{border-color:#8a5364;background:linear-gradient(145deg,#351f2a,#14242b);box-shadow:inset 0 0 24px #c65f7c24}
body.game-client .cloud-item-card[data-state="acquired"]{border-color:#4e7382;background:linear-gradient(145deg,#17313b,#14242b);box-shadow:inset 0 0 24px #65b7ce20}
body.game-client .cloud-item-card[data-state="equipped"]{border-color:#62a8b7;background:linear-gradient(145deg,#163943,#14252b);box-shadow:inset 0 0 26px #71d1e82b}
body.game-client .cloud-item-card[data-state="equipped"] .item-card-title>strong{border-color:#5997a5;color:#bce8ef}
body.game-client .cloud-item-card .item-card-title>strong{max-width:160px;overflow:hidden;text-overflow:ellipsis}
body.game-client .compact-item-card{padding:10px}
body.game-client .compact-item-card .item-icon{background:radial-gradient(circle,#91d9e050,#20313a);color:#bfeaf0}
body.game-client .cloud-item-copies{display:grid;gap:4px;margin:9px 0}
body.game-client .cloud-item-copies>span{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 7px;border:1px solid #334f59;border-radius:3px;background:#10242d;color:#91aab2;font-size:9px}
body.game-client .cloud-item-copies>span.latest{border-color:#4f8794;background:#15303a;color:#c2e1e6}
body.game-client .cloud-item-copies b{color:#b8d4da;font-weight:700}body.game-client .cloud-item-copies em{font-style:normal;text-align:right}body.game-client .cloud-item-copies>small{color:#82979d;font-size:9px}
body.game-client .item-card-title{display:flex;align-items:center;gap:10px}
body.game-client .item-icon{display:grid;width:42px;height:42px;flex:none;place-items:center;border:1px solid #927844;border-radius:3px;background:radial-gradient(circle,#d7bc7244,#25291f);color:#f1d386;font-size:25px}
body.game-client .item-card-title>div{min-width:0;flex:1}
body.game-client .item-card-title small{display:block;color:#b69a59;font-size:8px;letter-spacing:.7px}
body.game-client .item-card-title h3{margin:2px 0 0;color:#f1e4bd;font-size:14px}
body.game-client .item-card-title>strong{padding:4px 6px;border:1px solid #6f5e3b;border-radius:3px;color:#e8cd84;font-size:9px;white-space:nowrap}
body.game-client .item-card[data-state="empty"] .item-card-title>strong{border-color:#41555b;color:#8fa1a6}
body.game-client .item-card[data-state="consumed-unlocked"] .item-card-title>strong{border-color:#4b7669;color:#a9d5c3}
body.game-client .item-card[data-state="sold"] .item-card-title>strong{border-color:#56676d;color:#aebcc0}
body.game-client .item-card>p{margin:10px 0;color:#a9bbc0;font-size:11px;line-height:1.6}
body.game-client .item-card dl{display:grid;gap:1px;margin:0;background:#314750}
body.game-client .item-card dl>div{display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;padding:7px 8px;background:#10242d}
body.game-client .item-card dt{color:#d7bd77;font-size:9px}
body.game-client .item-card dd{margin:0;color:#a8bbc0;font-size:10px;line-height:1.5}
body.game-client .item-card .item-consumption{padding:8px;border-left:2px solid #b59049;background:#1c2b2c;color:#c7c5ad}
body.game-client :is(.item-recipe-button,.item-action-button){width:100%;min-height:34px;border:1px solid #4b8b7f;border-radius:3px;background:#1e615a;color:#e4f1e9;font-size:11px}
body.game-client .item-support-button{border-color:#8a5364;background:#6a3547;color:#ffe4ec}
body.game-client .item-action-button{border-color:#897444;background:#69562d;color:#fff0bc}
body.game-client .item-action-button:disabled{border-color:#44565b;background:#203038;color:#81949a}
body.game-client .item-recipe-note{padding:7px 8px;border-left:2px solid #bd9347;background:#1c2d2d;color:#cfccb0!important}
body.game-client .game-drawer .unit-gamble-grid,body.game-client .game-drawer .navigation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body.game-client .game-drawer .shop-grid{grid-template-columns:1fr 1fr}
body.game-client .game-drawer .combine-panel,body.game-client .game-drawer .upgrade-panel,body.game-client .selection-details{padding:14px}
body.game-client .game-drawer .combine-panel .section-heading{height:auto;gap:8px;align-items:center}
body.game-client .game-drawer .combine-panel .section-heading h2{min-width:0;color:#e1e9ea;font-size:14px}
body.game-client .game-drawer .combine-panel .text-button{color:#b5d6d2;font-size:10px}
body.game-client .recipe-consumption-note{margin:8px 0 12px;color:#9bafb6;font-size:11px;line-height:1.6}
body.game-client .focused-recipe{margin:10px 0;border:1px solid #304b56;border-radius:4px;background:#0d2029;overflow:hidden}
body.game-client .focused-recipe>header{display:flex;align-items:center;gap:9px;padding:9px}
body.game-client .focused-recipe>header img{width:38px;height:38px;object-fit:contain;border:1px solid #46616b;border-radius:3px}
body.game-client .focused-recipe>header strong{display:block;color:#e1e9ea;font-size:13px}
body.game-client .focused-recipe>header small{display:block;color:#a7bec3;font-size:10px}
body.game-client .game-drawer .recipe-variant{margin:0;padding:10px;border:0;border-top:1px solid #304b56;border-radius:0;background:#102731;color:#b0c3c8}
body.game-client .game-drawer .recipe-variant :is(.recipe-price,.recipe-conditions,.recipe-source-note){color:#acbec4;font-size:11px}
body.game-client .game-drawer .recipe-variant .ingredient{border-color:#35535f;background:#10212b;color:#9fb4bc}
body.game-client .game-drawer .recipe-variant .ingredient.owned{border-color:#4d8c7a;background:#163c37;color:#c7e7d9}
body.game-client .game-drawer .recipe-variant .craft-button{width:100%;min-height:32px;margin-top:7px;border:1px solid #428d80;border-radius:3px;background:#216c62;color:#e3f7ee;font-size:11px}
body.game-client .game-drawer .story-section{display:flex;overflow:hidden}
body.game-client .game-drawer .story-content{padding:14px}
body.game-client .game-drawer .story-content h3{color:#e7edef}
body.game-client .game-drawer .story-content p{color:#94a6ab}
body.game-client .selection-details>p{margin:0;color:#8fa2a8}

body.game-client dialog{max-height:min(780px,88dvh);border:1px solid #405965;background:#0d202a;color:#dfe8ea;box-shadow:0 18px 60px #000c}
body.game-client dialog::backdrop{background:#02080dc7;backdrop-filter:blur(5px)}
body.game-client dialog :is(.codex-card,.recipe-variant){border-color:#304954;background:#132832;color:#dbe5e7}
body.game-client dialog input,body.game-client dialog select{border-color:#405965;background:#0a1a23;color:#e2eaec}
body.game-client dialog .secondary-button,body.game-client #party-dialog .party-code-row button{border:1px solid #4a6670;background:#18323b;color:#e4ecdf}
body.game-client #info-body .navigation-confirm-actions{display:flex;align-items:center;gap:20px;margin-top:18px}
body.game-client #info-body .navigation-confirm-actions .text-button{font-size:12px;color:#c5d2d4}
/* 한 번에 조합 (r64): card controls and the preview dialog. */
body.game-client .chain-actions,body.game-client .chain-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
body.game-client .chain-control{display:flex;flex-direction:column;gap:3px;min-width:0}
body.game-client .chain-control>small{color:#8ea3a9;font-size:10px;line-height:1.4}
body.game-client :is(.chain-button,.chain-wisp-toggle){min-height:30px;border:1px solid #405965;border-radius:3px;background:#16303a;color:#dbe7e9;font-size:11px;padding:4px 6px}
body.game-client .chain-button{border-color:#8f7b46;background:#3a3422;color:#ffecb3}
body.game-client .chain-wisp-toggle[aria-pressed="true"]{border-color:#5b9e92;background:#28514f;color:#efe5bd}
body.game-client .chain-wisp-toggle[aria-pressed="true"]::before{content:'✓ '}
body.game-client #chain-dialog{max-width:520px}
body.game-client .chain-preview{display:flex;flex-direction:column;gap:10px;font-size:12px}
body.game-client .chain-target{display:flex;align-items:center;gap:6px;color:#c5d2d4}
body.game-client .chain-preview h3{margin:0 0 5px;font-size:11px;font-weight:600;color:#9fb4bc}
body.game-client .chain-chips{display:flex;flex-wrap:wrap;gap:5px}
body.game-client .chain-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border:1px solid #35535f;border-left:3px solid var(--rarity);border-radius:3px;background:#10212b;color:#dfe8ea;font-size:11px}
body.game-client .chain-chip>small{color:var(--rarity);font-size:10px;font-weight:700}
body.game-client .chain-cost{margin:0;color:#e9d39a}
body.game-client .chain-failure{margin:0;padding:8px 10px;border:1px solid #8a4b4b;border-radius:3px;background:#2a1618;color:#ffd4cf}
body.game-client .chain-confirm{width:100%;min-height:32px;border:1px solid #428d80;border-radius:3px;background:#216c62;color:#e3f7ee;font-size:12px}

@media(max-width:1100px){
  body.game-client .game-topbar{gap:9px;padding:0 9px}
  body.game-client .brand small,body.game-client .version{display:none}
  body.game-client .session-tools>span{max-width:90px}
  body.game-client .panel-tabs{justify-content:flex-start}
  body.game-client .command-dock{grid-template-columns:180px minmax(260px,1fr) 260px}
  body.game-client .panel-tabs button{padding-inline:7px}
  body.game-client .battle-status #phase-label{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Below the story card and wisp rows, which reach the board's middle on narrower boards. */
  body.game-client .round-notice{top:62%}
}
@media(max-width:760px){
  body.game-client{grid-template-rows:42px minmax(0,1fr)}
  body.game-client .game-topbar{height:42px}
  body.game-client .brand{font-size:15px}
  body.game-client .brand-icon{display:none}
  body.game-client .top-actions .nav-button[data-action="game"],body.game-client .version,body.game-client .session-tools>span{display:none}
  body.game-client .top-actions{gap:0}
  body.game-client .nav-button{padding:0 6px;font-size:9px}
  body.game-client .session-tools{gap:4px}
  body.game-client .session-tools .text-button{padding:5px 6px;font-size:9px}
  body.game-client .game-shell{grid-template-rows:40px minmax(0,1fr) 166px}
  body.game-client .resource-bar{height:40px}
  body.game-client .resource-bar>div{flex-basis:92px;padding:0 9px}
  body.game-client .resource-bar>div:first-child{flex-basis:145px}
  body.game-client .resource-bar .stat-symbol{font-size:14px}
  body.game-client .resource-bar strong{font-size:17px}
  body.game-client .game-stage{padding:4px}
  body.game-client .board-heading{height:34px;min-height:34px;padding:0 6px}
  body.game-client .battle-status #death-counter{display:none}
  body.game-client .panel-tabs button{padding:3px 7px;font-size:8px}
  body.game-client .board-controls button{min-width:28px;height:25px}
  body.game-client .battle-toolbar{height:25px;min-height:25px;padding:3px 6px}
  body.game-client .battle-toolbar>div,body.game-client .battle-shortcuts{display:none}
  body.game-client .support-quick-hud{flex-basis:48px}
  body.game-client .support-quick-overview{grid-template-columns:auto minmax(48px,1fr) auto;grid-template-rows:22px 14px;width:165px;flex-basis:165px;gap:0 3px;padding:4px 6px}
  body.game-client .support-quick-open{font-size:8px}
  body.game-client .support-quick-open span{font-size:0}
  body.game-client .support-quick-open span:before{content:'✦';font-size:10px}
  body.game-client .support-quick-open small{display:none}
  body.game-client .support-quick-feed{min-width:55px;height:22px;padding:1px 4px}
  body.game-client .support-quick-feed span{font-size:7px}body.game-client .support-quick-feed small{max-width:50px;font-size:6px}
  body.game-client .support-quick-spell{width:80px;min-width:80px;height:38px;padding:3px 5px}
  body.game-client #support-quick-status{font-size:7px}
  body.game-client .view-controls{margin-right:3px;gap:3px}
  body.game-client .camera-controls{margin-right:auto;gap:2px}
  body.game-client .camera-controls button{height:20px;min-width:19px;padding:1px 3px;font-size:10px}
  body.game-client .view-controls button{height:20px;padding:2px 6px;font-size:9px}
  body.game-client .story-view-hud{top:8px;left:8px;width:220px;padding:8px}
  body.game-client .command-dock{grid-template-columns:145px minmax(190px,1fr) 210px;overflow-x:auto;overflow-y:hidden}
  body.game-client .command-dock>section{padding:8px}
  body.game-client .crew-grid{grid-auto-columns:58px}
  body.game-client .crew-card img{width:28px;height:28px}
  body.game-client .crew-tools span{display:none}
  body.game-client .crew-tools input{width:100%;font-size:9px}
  body.game-client .selection-panel .selected-hero{height:46px}
  body.game-client .selection-panel .selected-hero img{width:40px;height:40px}
  body.game-client .game-drawer{top:79px;bottom:166px;width:min(430px,100vw)}
}
@media(max-width:480px){
  body.game-client .brand>span:last-child{font-size:13px;letter-spacing:1px}
  body.game-client .top-actions .nav-button[data-action="about"],body.game-client .top-actions .nav-button[data-action="guide"]{display:none}
  body.game-client .game-shell{grid-template-rows:40px minmax(0,1fr) 164px}
  body.game-client .resource-bar{overflow:hidden}
  body.game-client .resource-bar>div{flex:0 0 63px;width:63px;gap:0;padding:0 4px}
  body.game-client .resource-bar>div:first-child{flex:0 0 72px;width:72px}
  body.game-client .resource-bar>div>div{min-width:0;width:100%}
  body.game-client .resource-bar .stat-symbol,body.game-client .resource-bar .sea-label,body.game-client .resource-bar .danger-meter{display:none}
  body.game-client .resource-bar .stat-label{font-size:8px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.game-client .resource-bar strong{display:block;max-width:100%;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.game-client .resource-bar strong small{font-size:9px}
  body.game-client .battle-status #phase-label{display:none}
  body.game-client .round-clock{margin-left:6px;padding:3px 5px}
  body.game-client .wisp-reminder{margin-left:4px;padding:3px 5px}
  body.game-client .round-notice{padding:8px 10px}
  body.game-client .command-dock{grid-template-columns:82px minmax(78px,1fr) minmax(198px,220px)}
  body.game-client .support-quick-overview{width:150px;flex-basis:150px}
  body.game-client .support-quick-mana strong{font-size:10px}
  body.game-client .command-dock .section-heading{height:20px}
  body.game-client .summon-panel .batch-button,body.game-client .summon-panel .wisp-actions button{font-size:8px;line-height:1.25}
  body.game-client .summon-panel .summon-button{min-height:40px;padding:5px}
  body.game-client .summon-panel .summon-button span,body.game-client .summon-panel .summon-button small{font-size:8px}
  body.game-client .crew-filters{display:none}
  body.game-client .crew-grid{grid-auto-columns:54px}
  body.game-client .selection-panel{font-size:10px}
  body.game-client .selection-panel .selected-subactions{grid-template-columns:1.3fr .9fr .6fr}
  body.game-client .game-drawer{top:79px;bottom:164px;width:100%}
  body.game-client .drawer-body{padding:8px}
  body.game-client .game-drawer .unit-gamble-grid,body.game-client .game-drawer .navigation-grid,body.game-client .game-drawer .shop-grid,body.game-client .game-drawer .support-spell-grid{grid-template-columns:1fr}
  body.game-client .game-drawer,body.game-client .game-drawer button,body.game-client .game-drawer p,body.game-client .game-drawer small,body.game-client .game-drawer span,body.game-client .game-drawer strong{font-size:12px;line-height:1.55}
}
/* Icon tabs where the nine text labels cannot fit: portrait phones and short narrow screens. */
@media(max-width:480px),(max-width:760px) and (max-height:500px){
  body.game-client .panel-tabs button{font-size:0;width:28px;padding:0}
  body.game-client .panel-tabs button:before{font-size:13px}
  body.game-client .panel-tabs button[data-panel="voyage"]:before{content:'⚓'}
  body.game-client .panel-tabs button[data-panel="navigation"]:before{content:'⌁'}
  body.game-client .panel-tabs button[data-panel="support"]:before{content:'✦'}
  body.game-client .panel-tabs button[data-panel="shop"]:before{content:'◈'}
  body.game-client .panel-tabs button[data-panel="inventory"]:before{content:'⌇'}
  body.game-client .panel-tabs button[data-panel="treasure"]:before{content:'⌖'}
  body.game-client .panel-tabs button[data-panel="combine"]:before{content:'＋'}
  body.game-client .panel-tabs button[data-panel="upgrades"]:before{content:'↑'}
  body.game-client .panel-tabs button[data-panel="unit"]:before{content:'♟'}
  body.game-client .panel-tabs button>span{position:absolute;top:1px;right:1px;width:12px;min-width:12px;height:12px;margin:0;padding:0;font-size:7px}
}
@media(max-height:500px){
  body.game-client{grid-template-rows:30px minmax(0,1fr)}
  body.game-client .game-topbar{height:30px}
  body.game-client .game-shell{grid-template-rows:26px minmax(0,1fr) 116px}
  body.game-client .resource-bar{height:26px}
  body.game-client .resource-bar>div{padding-block:0}
  body.game-client .resource-bar .stat-symbol{font-size:13px}
  body.game-client .resource-bar strong{font-size:15px}
  body.game-client .resource-bar .stat-label{display:none}
  body.game-client .board-heading{height:26px;min-height:26px}
  body.game-client .round-clock{padding:2px 6px}
  body.game-client .board-heading .round-clock strong{font-size:13px}
  body.game-client .wisp-reminder{padding:2px 6px}
  body.game-client .round-notice{padding:6px 10px}
  body.game-client .panel-tabs button{min-height:22px;padding-block:2px}
  body.game-client .board-controls button{height:23px}
  body.game-client .battle-toolbar{display:flex;height:18px;min-height:18px;padding:0 6px;font-size:9px}
  body.game-client .battle-toolbar>div,body.game-client .battle-shortcuts{display:none}
  body.game-client .battle-toolbar label{font-size:9px;white-space:nowrap}
  body.game-client .battle-toolbar .text-button{font-size:9px;white-space:nowrap}
  body.game-client .support-quick-hud{flex-basis:37px}
  body.game-client .support-quick-overview{grid-template-columns:auto minmax(72px,1fr) auto;grid-template-rows:1fr;width:240px;flex-basis:240px;padding:3px 7px}
  body.game-client #support-quick-status{display:none}
  body.game-client .support-quick-feed{height:29px}
  body.game-client .support-quick-spell{grid-template-rows:14px 12px;width:76px;min-width:76px;height:30px;padding:2px 5px}
  body.game-client .support-quick-spell>span{display:none}
  body.game-client .support-quick-spell>small{font-size:7px;line-height:11px}
  body.game-client .camera-controls{margin-right:auto;gap:2px}
  body.game-client .camera-controls button{height:16px;min-width:19px;padding:0 3px;font-size:9px}
  body.game-client .view-controls button{height:16px;padding:0 6px;font-size:9px}
  body.game-client .story-view-hud{top:5px;left:6px;width:205px;padding:5px 8px}
  body.game-client .cooperation-target-tabs{margin:3px 0 1px;gap:2px}
  body.game-client .cooperation-target-tabs button{padding:2px 1px;font-size:7px}
  body.game-client #story-view-target{margin:2px 0 4px;font-size:14px}
  body.game-client #story-view-status{margin:3px 0;font-size:8px}
  body.game-client .story-view-meta{margin-top:2px;font-size:8px}
  body.game-client .line-watch{padding:2px 5px;font-size:9px}
  body.game-client .command-dock{grid-template-columns:145px minmax(260px,1fr) 210px}
  body.game-client .command-dock>section{padding:5px 7px}
  body.game-client .command-dock .section-heading{height:18px;margin-bottom:3px}
  body.game-client .summon-panel .summon-button{min-height:34px;padding:4px 7px}
  body.game-client .summon-panel .batch-button{min-height:22px;margin-top:2px;padding-top:2px}
  body.game-client .summon-panel .wisp-actions{margin-top:2px}
  body.game-client .summon-panel .wisp-actions button{min-height:22px;padding:2px 3px;font-size:10px}
  body.game-client .crew-grid{grid-template-rows:minmax(0,1fr);grid-auto-columns:54px}
  body.game-client .crew-tools{min-height:18px;margin-bottom:2px}
  body.game-client .crew-tools input{height:18px}
  body.game-client .crew-card img{width:34px;height:34px;margin:0 auto 2px}
  body.game-client .crew-card .crew-name{font-size:8px}
  body.game-client .selection-panel{padding:4px 6px!important}
  body.game-client .selection-panel .selected-hero{grid-template-columns:34px minmax(0,1fr);gap:6px;height:34px;margin-bottom:2px;padding:0}
  body.game-client .selection-panel .selected-hero img{width:32px;height:32px}
  body.game-client .selection-panel .rarity-label{font-size:8px}
  body.game-client .selection-panel .selected-hero h3{font-size:10px}
  body.game-client .selection-panel .selected-hero p{display:none}
  body.game-client .selection-panel .unit-stats{height:27px;margin-bottom:2px}
  body.game-client .selection-panel .unit-stats>div{padding:2px 4px;font-size:9px}
  body.game-client .selection-panel .unit-stats strong{margin-top:1px;font-size:11px}
  body.game-client .selection-panel .unit-stats strong small{font-size:9px}
  body.game-client .selection-panel .selected-subactions{height:28px}
  body.game-client .selection-panel .selected-subactions .assignment-button,body.game-client .selection-panel .selected-subactions .text-button{height:28px;min-height:28px;padding:3px 4px;font-size:10px}
  body.game-client .selection-panel:has(.crew-member-nav) .selected-hero{height:29px}
  body.game-client .selection-panel:has(.crew-member-nav) .selected-hero img{width:28px;height:28px}
  body.game-client .selection-panel:has(.crew-member-nav) .unit-stats{height:24px}
  body.game-client .selection-panel:has(.crew-member-nav) .selected-subactions,body.game-client .selection-panel:has(.crew-member-nav) .selected-subactions button{min-height:24px;height:24px}
  body.game-client .crew-member-nav{height:16px;margin-bottom:2px;font-size:8px}
  body.game-client .crew-member-nav button{height:16px}
  body.game-client .game-drawer{top:60px;bottom:116px}
}

/* Party controls stay within the battlefield viewport; the lobby scrolls internally. */
.party-open{color:#e5cf8f!important}.party-pill{font-size:10px!important;color:#e3d4a5!important;white-space:nowrap;padding:5px 8px!important;border:1px solid #6f7554!important;border-radius:5px!important;background:#1a302d!important}
#party-dialog{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;box-sizing:border-box}#party-dialog [hidden]{display:none!important}#party-status{color:#c9dcbd;font-size:12px;min-height:18px}#party-entry>label{display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:center;margin:14px 0;font-size:13px}#party-dialog input,#party-dialog select{min-width:0;background:#0e2027;color:#e4e9df;border:1px solid #405651;border-radius:5px;padding:10px;font:inherit}#party-dialog .primary-button,#party-dialog .secondary-button{width:100%;margin-top:8px}.party-intro,.party-footnote,#party-room-note{font-size:12px;line-height:1.7;color:#b5c3bb}.party-footnote{border-top:1px solid #334640;padding-top:14px;margin-bottom:0}.party-join{display:flex;gap:10px;align-items:end;margin-top:20px;padding-top:16px;border-top:1px solid #334640}.party-join label{display:grid;gap:8px;flex:1;font-size:12px;min-width:0}.party-join .secondary-button{width:80px!important;flex:none;padding:10px}.party-join input{text-transform:uppercase}.party-code-row{display:flex;justify-content:space-between;align-items:center;font-size:12px}.party-code-row strong{font-size:22px;letter-spacing:3px;color:#e5cf8f;margin-left:8px}.party-code-row button{padding:8px}.party-roster{padding:0;list-style:none;display:grid;gap:8px;margin:18px 0}.party-roster li{display:flex;justify-content:space-between;gap:8px;padding:13px;border:1px solid #34483f;border-radius:7px;background:#10232a;font-size:12px}.party-roster li strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.party-roster li span{color:#96a79e;font-size:11px;white-space:nowrap}.party-roster li.connected{border-color:#5c7864}.party-roster li.connected span{color:#b5d4b9}#party-room>.text-button{display:block;margin:16px auto 0;font-size:12px}
@media(max-width:1100px){.party-pill{max-width:160px;overflow:hidden;text-overflow:ellipsis}.game-topbar .party-open{display:inline-flex!important}}@media(max-width:700px){.party-pill{max-width:105px;font-size:9px!important}.game-topbar .top-actions{display:flex!important}.game-topbar .top-actions>:not(.party-open):not([data-action="settings"]){display:none!important}#party-dialog{padding:18px}}

.party-roster li button{flex:none;align-self:center;font-size:10px;padding:4px 7px;color:#e0b6a1;border:1px solid #69534b;border-radius:4px;background:#2a2424}.party-roster li:has(button){flex-wrap:wrap}.party-roster li button:focus-visible{outline:2px solid #e5cf8f;outline-offset:2px}

/* Source-backed unit progression shown in the selected-unit drawer. */
.unit-progression-action{margin:10px 0 12px;padding:10px;border:1px solid #cfded9;border-radius:6px;background:#f1f8f4;color:#526d66;overflow-wrap:anywhere}
.unit-progression-action>div:first-child span,.unit-progression-action>div:first-child strong,.unit-progression-action>p,.unit-progression-action>small{display:block}
.unit-progression-action>div:first-child span{font-size:8px;color:#7e9690}
.unit-progression-action>div:first-child strong{margin-top:2px;font-size:10px;color:#315f58}
.unit-progression-action>p,.unit-progression-action>small{margin:7px 0 0;font-size:8px;line-height:1.65;color:#71877f}
.unit-progression-action>button{width:100%;min-height:34px;margin-top:8px;padding:7px 9px;border-radius:4px;background:#26766d;color:#fffef0;font-size:9px;line-height:1.45;white-space:normal}
.unit-progression-action>button:disabled{background:#8c9e98}
.movement-capability{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 0;padding:7px 9px;border:1px solid #cfdbd6;border-radius:5px;background:#f1f6f3;color:#547069}
.movement-capability strong{font-size:9px;white-space:nowrap}
.movement-capability small{font-size:8px;line-height:1.5;color:#74877f;text-align:right}
.movement-capability[data-movement=fly]{border-color:#cad8e5;background:#f1f6fa;color:#4f687d}
.movement-capability[data-movement=amph]{border-color:#bedcda;background:#eef8f7;color:#346b68}
.unit-progression-track{height:5px;margin-top:8px;border-radius:5px;background:#d5e5de;overflow:hidden}
.unit-progression-track>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3a8b7d,#dcc36e)}
.transform-unit-action{border-color:#d7d2e3;background:#f8f5fb;color:#6d637a}
.transform-unit-action>div:first-child strong{color:#614f75}
.transform-unit-action>button{background:#72598a}
.upgrade-row{gap:12px}
.upgrade-row>div{min-width:0}
.upgrade-row strong span{margin-left:4px;color:#87978b;font-weight:500}
.upgrade-row small{display:block;margin-top:2px;line-height:1.5;overflow-wrap:anywhere}
.upgrade-row button{flex:none;min-width:76px}
@media(max-width:480px){
  .unit-progression-action,.unit-progression-action>div:first-child span,.unit-progression-action>div:first-child strong,.unit-progression-action>p,.unit-progression-action>small,.unit-progression-action>button,.movement-capability strong,.movement-capability small{font-size:12px;line-height:1.65}
  .unit-progression-action>button{min-height:40px}
  .movement-capability{align-items:flex-start;flex-direction:column;gap:2px}
  .movement-capability small{text-align:left}
}
@media(max-height:500px){body.game-client .common-hero-group{min-height:22px;margin-top:2px;padding:2px 5px}body.game-client .common-hero-group small{display:none}body.game-client .common-hero-group span{font-size:8px}}

/* Twelve visible command positions own their physical keyboard keys. */
body.game-client .command-dock{grid-template-columns:clamp(260px,24vw,330px) minmax(220px,1fr) clamp(250px,24vw,340px)}
body.game-client .command-dock>.command-card-panel{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:4px;padding:7px 9px;overflow:hidden}
body.game-client .command-pages{display:flex;gap:3px;min-height:23px}
body.game-client .command-pages button{flex:1 1 auto;min-width:0;padding:3px 2px;border:1px solid #354e58;border-radius:3px;background:#102630;color:#9bb2b9;font-size:10px;white-space:nowrap}
body.game-client .command-pages button[aria-pressed="true"]{border-color:#c0a35f;background:#4b432c;color:#ffecac}
body.game-client .command-card{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:3px;flex:1;min-height:0}
body.game-client .command-card>button{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;padding:4px 3px 3px;border:1px solid #42636c;border-radius:3px;background:linear-gradient(#203a43,#11262f);color:#e2ebdf;text-align:center;overflow:hidden}
body.game-client .command-card kbd{position:absolute;left:3px;top:1px;color:#e9cd83;font:700 8px sans-serif;line-height:10px}
body.game-client .command-card>button:not([data-command-hotkey]):not(.empty) kbd{font-size:7px;letter-spacing:-.2px}
body.game-client .command-card strong{display:block;width:100%;padding:0 3px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:15px}
body.game-client .command-card small{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a7bfc2;font-size:8px;line-height:12px}
body.game-client .command-card>button:disabled{border-color:#2c4149;background:#10212a;color:#82969c}
body.game-client .command-card>button:disabled small{color:#71868e}
body.game-client .command-card>button.empty{background:#091a22;color:#29444e}
body.game-client .command-card>button.empty kbd{color:#5b737c}
body.game-client .command-card>button.armed{border-color:#e0bd65;background:#4b573b;color:#fff0bd}
body.game-client .command-card-note{min-height:11px;margin:0;color:#a6b7bc;font-size:8px;line-height:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The story card and the reward-wisp panel share the battlefield's left column. */
body.game-client .board-left-stack{position:absolute;z-index:4;left:10px;top:10px;display:flex;flex-direction:column;gap:6px;width:316px;max-width:calc(100% - 20px);max-height:calc(100% - 42px);pointer-events:none}
body.game-client .board-left-stack>*{pointer-events:auto}
body.game-client .story-brief{position:relative;flex:none;padding:7px 9px;box-sizing:border-box;border:1px solid #58756c99;border-radius:4px;background:#071c24e8;box-shadow:0 3px 12px #0005}
body.game-client .story-brief-title{display:flex;align-items:center;gap:6px;justify-content:space-between}
body.game-client .story-brief-title button{min-width:0;max-width:100%;padding:0;border:0;background:none;color:#eadbb0;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
body.game-client .story-brief-title span{flex:none;color:#91ada9;font-size:9px}
body.game-client .story-brief p{margin:3px 0 5px;color:#d4e2d8;font-size:10px;line-height:1.4}
body.game-client .story-brief .story-hp{height:3px;margin:0;background:#2e4448}
body.game-client .story-brief .story-hp>span{display:block;height:100%;background:#77afa0}
body.game-client .story-brief .story-bottom{display:flex;justify-content:space-between;margin-top:3px;color:#9eb7b8;font-size:8px}
body.game-client .story-brief .support-story-action{margin-top:5px}
body.game-client .story-brief .support-story-action button{min-height:24px;font-size:10px}
body.game-client .story-brief .support-story-action small{display:none}
body.game-client .reward-wisp-panel{display:grid;align-content:start;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#48616b #0a1a23;gap:4px;padding:6px 7px;box-sizing:border-box;border:1px solid #5d7f8a99;border-radius:4px;background:#071c24e8;box-shadow:0 3px 12px #0005}
body.game-client .wisp-row{display:flex;flex-wrap:wrap;align-items:center;gap:3px 2px}
body.game-client .wisp-row-label{flex:none;margin-right:3px;color:#cdb979;font-size:9px;font-weight:700;white-space:nowrap}
body.game-client :is(.wisp-row-label,.wisp-claim) b{color:#fff0bf}
body.game-client .wisp-claim{flex:none;min-width:0;min-height:22px;padding:2px 4px;border:1px solid #3f6a72;border-radius:3px;background:#102d36;color:#d8ecee;font-size:9px;line-height:1.2;white-space:nowrap}
body.game-client .wisp-claim:hover:not(:disabled){border-color:#7cc8d8;background:#184753;color:#fff}
body.game-client .wisp-claim:disabled{opacity:.55}
body.game-client .wisp-row[data-wisp-row="common"] .wisp-claim{flex:1 1 0;min-width:24px;padding-inline:1px}
body.game-client .wisp-row[data-wisp-row="tier"] .wisp-claim{flex:1 1 auto}
body.game-client .story-view-hud{left:auto;right:10px}
body.game-client .resource-bar .trait-resource .stat-label{white-space:nowrap}
@media(max-width:1000px){
  body.game-client .command-dock{grid-template-columns:245px minmax(160px,1fr) 235px}
  body.game-client .command-card strong{font-size:9px}
}
@media(max-width:760px){
  body.game-client .command-dock{grid-template-columns:220px minmax(150px,1fr) 220px}
  body.game-client .command-card-panel{min-width:220px}
  body.game-client .board-left-stack{left:7px;top:7px;width:235px;gap:4px}
  body.game-client .story-brief{padding:5px 7px}
  body.game-client .reward-wisp-panel{padding:5px 6px}
  body.game-client .story-brief-title button{font-size:10px}
  body.game-client .story-brief p{font-size:9px}
  body.game-client #story-view-hud{display:none!important}
  body.game-client .cooperation-view-hud{top:88px;right:7px;max-height:calc(100% - 115px);overflow:auto}
  body.game-client .command-pages{gap:2px}
  body.game-client .command-pages button{padding:3px 1px}
  /* A narrow crew column puts the filters on their own line instead of wrapping each letter. */
  body.game-client .crew-section .section-heading{flex-wrap:wrap;height:auto;min-height:24px;row-gap:3px}
  body.game-client .crew-section .section-heading h2,body.game-client .crew-filters button{white-space:nowrap}
  body.game-client .crew-filters button{padding:2px 5px}
}
/* Up to 1000px the nine panel tabs get their own header row, so the status, clock
   and wisp reminder never push a tab out of view. Short screens keep one compact row. */
@media(max-width:1000px) and (min-height:501px){
  body.game-client .board-heading{flex-wrap:wrap;height:auto;min-height:0;padding:3px 6px;row-gap:3px}
  body.game-client .board-heading>:is(.battle-status,.board-controls){height:26px}
  body.game-client .panel-tabs{order:3;flex:1 0 100%}
  body.game-client .panel-tabs button{flex:1 1 auto}
  body.game-client .game-drawer{top:113px}
}
@media(max-width:760px) and (min-height:501px){
  body.game-client .game-drawer{top:108px}
}
@media(max-width:700px){
  body.game-client .round-clock small,body.game-client .wisp-reminder small{display:none}
}
@media(max-width:700px) and (min-height:501px){
  body.game-client .round-clock:is([data-state="paused"],[data-state="ended"]) small{display:inline}
  /* The start card sits low so the story card and wisp rows keep the top-left. */
  body.game-client .ready-overlay{justify-content:flex-end;padding-bottom:40px}
}
@media(max-width:480px) and (min-height:501px){
  body.game-client .game-shell{grid-template-rows:40px minmax(0,1fr) 246px}
  body.game-client .command-dock{grid-template-columns:minmax(180px,1fr) minmax(180px,1fr);grid-template-rows:164px 81px;overflow:hidden}
  body.game-client .command-dock>.command-card-panel{min-width:0;padding:5px;gap:3px}
  body.game-client .command-dock>.selection-panel{grid-column:2;grid-row:1;padding:6px}
  body.game-client .command-dock>.crew-section{grid-column:1/-1;grid-row:2;padding:4px 6px;display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-rows:20px minmax(0,1fr);gap:3px 5px}
  body.game-client .command-dock>.crew-section .section-heading{grid-column:1;grid-row:1;margin:0}
  body.game-client .command-dock>.crew-section .crew-tools{grid-column:1;grid-row:2;align-self:start}
  body.game-client .command-dock>.crew-section .crew-grid{grid-column:2;grid-row:1/-1;grid-template-rows:minmax(0,1fr);grid-auto-columns:40px;padding:1px 2px}
  body.game-client .command-dock>.crew-section .crew-grid img{width:20px;height:20px;margin:0 auto}
  body.game-client .command-dock>.crew-section .crew-grid .crew-name{font-size:7px;line-height:9px}
  body.game-client .command-pages button{font-size:8px;padding:2px 1px}
  body.game-client .command-card strong{font-size:8px;line-height:13px;padding:0}
  body.game-client .command-card small{font-size:7px;line-height:11px}
  body.game-client .command-card kbd{font-size:7px;top:0;left:2px}
  body.game-client .game-drawer{bottom:246px}
  body.game-client .board-left-stack{width:222px}
}
@media(max-height:500px){
  body.game-client .command-dock{grid-template-columns:280px minmax(180px,1fr) 210px}
  body.game-client .command-dock>.command-card-panel{padding:3px 5px;gap:2px}
  body.game-client .command-pages{min-height:17px;height:17px}
  body.game-client .command-pages button{font-size:8px;padding:0 3px}
  body.game-client .command-card{gap:2px}
  body.game-client .command-card>button{padding:0 2px}
  body.game-client .command-card strong{font-size:8px;line-height:11px}
  body.game-client .command-card small{font-size:7px;line-height:9px}
  body.game-client .command-card-note{font-size:7px;line-height:9px;min-height:9px}
  body.game-client .board-left-stack{left:5px;top:4px;width:250px;max-height:calc(100% - 28px);gap:3px}
  body.game-client .story-brief{padding:3px 6px}
  body.game-client .reward-wisp-panel{gap:2px;padding:3px 5px}
  body.game-client .wisp-claim{min-height:17px;padding:1px 3px;font-size:8px}
  body.game-client .wisp-row-label{font-size:8px}
  body.game-client .story-brief p{margin:1px 0 2px;font-size:8px;line-height:1.2}
  body.game-client .story-brief .story-bottom{font-size:7px;margin-top:1px}
  body.game-client #story-view-hud{display:none!important}
  body.game-client .cooperation-view-hud{top:4px;right:5px;max-height:calc(100% - 15px);overflow:auto}
  body.game-client .round-notice{top:auto;bottom:24px;left:auto;right:8px;max-width:calc(100% - 290px);padding:4px 8px;transform:none}
  /* One compact header row: captions stay in the clock's title and aria label. */
  body.game-client .round-clock small,body.game-client .wisp-reminder small{display:none}
  body.game-client .battle-status #phase-label{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.game-client .board-heading{gap:8px}
  body.game-client .board-heading .round-clock[data-state="waiting"] strong{font-size:11px}
  body.game-client .panel-tabs{gap:2px}
  body.game-client .panel-tabs button{padding-inline:4px}
}
body.game-client .resource-bundle-actions{display:grid;gap:7px;padding:10px;border:1px solid #58715b;border-radius:4px;background:#142d2f}
body.game-client .resource-bundle-actions h3,body.game-client .resource-bundle-actions p{margin:0}
body.game-client .resource-bundle-actions select{min-width:0;width:100%;padding:7px;border:1px solid #45646c;background:#0c2029;color:#dbe8e7;font:inherit}
body.game-client .resource-bundle-actions button{padding:8px;border:1px solid #608274;border-radius:3px;background:#244c43;color:#e7efdb;font:inherit}
body.game-client .resource-bundle-actions button:disabled{background:#1d3034;border-color:#3a5156;color:#8b9fa4}
body.game-client .resource-bundle-actions small{color:#abc1bd;line-height:1.6}
body.game-client .command-pages{width:100%;margin:0;justify-content:stretch}
body.game-client .codex-role-filters{display:flex;flex-wrap:wrap;gap:4px 10px;margin:8px 0;padding:7px 9px;border:1px solid #354f59;border-radius:4px;color:#aac0c6}
body.game-client .codex-role-filters legend{padding:0 5px;color:#cfdbc6;font-size:10px}
body.game-client .codex-role-filters label{display:flex;align-items:center;gap:3px;font-size:10px;white-space:nowrap}
body.game-client .codex-role-filters input{margin:0;accent-color:#4cb4a5}
@media(max-height:500px){
  body.game-client .ready-overlay{gap:5px;padding-bottom:20px}
  body.game-client .ready-overlay>.small-label,body.game-client .ready-overlay>p,body.game-client .ready-overlay>small{display:none}
  body.game-client .ready-overlay h2{margin:0;font-size:18px}
  body.game-client .ready-overlay .primary-button{min-width:150px;padding:6px 12px;min-height:30px;font-size:11px}
  body.game-client .ready-difficulty{margin:0;font-size:9px}
  body.game-client .ready-difficulty select{padding:3px 6px;font-size:10px}
  body.game-client .ready-difficulty small{font-size:8px}
}
body.game-client .common-storage-caption{position:absolute;z-index:2;transform:translate(-50%,-50%);padding:3px 7px;border:1px solid #6b756666;border-radius:3px;background:#0b242bbd;color:#ced4a5;font-size:9px;line-height:1.3;white-space:nowrap;pointer-events:none}
@media(max-height:500px){body.game-client .common-storage-caption{font-size:7px;padding:1px 4px}}
body.game-client .auto-store-lever{position:absolute;z-index:2;transform:translate(-50%,-100%);display:flex;align-items:flex-end;justify-content:center;min-width:44px;padding:0;border:0;background:none;cursor:pointer}
body.game-client .auto-store-lever>span{padding:2px 6px;border:1px solid #6b756699;border-radius:3px;background:#0b242bd9;color:#e3b9ad;font-size:9px;line-height:1.3;white-space:nowrap}
body.game-client .auto-store-lever[aria-pressed=true]>span{border-color:#6fd38a99;color:#bff3c8}
body.game-client .auto-store-lever:hover>span,body.game-client .auto-store-lever:focus-visible>span{border-color:#f5db82;outline:none}
@media(max-height:500px){body.game-client .auto-store-lever>span{font-size:7px;padding:1px 4px}}
body.game-client .cooperation-target-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
body.game-client .cooperation-target-tabs button{font-size:8px;padding:4px 2px}
body.game-client #cooperation-view-target{font-size:16px}
body.game-client #cooperation-view-scope{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.game-client .command-research-pages,body.game-client .research-tabs{display:flex;gap:3px;min-width:0;width:100%;margin-left:0;margin-right:0;justify-content:stretch}
body.game-client .command-research-pages[hidden]{display:none}
body.game-client .command-research-pages button,body.game-client .research-tabs button{flex:1;min-width:0;border:1px solid #35535b;border-radius:3px;background:#102a34;color:#9bb2b8;white-space:nowrap;font:inherit}
body.game-client .command-research-pages button{padding:2px 0;font-size:8px;line-height:12px}
body.game-client .research-tabs{margin-bottom:12px}
body.game-client .research-tabs button{padding:7px 3px;font-size:10px}
body.game-client .command-research-pages button[aria-pressed="true"],body.game-client .research-tabs button[aria-pressed="true"]{border-color:#b7a468;background:#443f2d;color:#fff0bc}
body.game-client .research-description{margin:0 0 12px;color:#a9bec2;font-size:11px;line-height:1.6}
body.game-client .upgrade-row>div{min-width:0}
body.game-client .upgrade-row .research-status{display:block;color:#c6b57d;margin-top:3px}
body.game-client .upgrade-row>button{max-width:150px;white-space:normal;line-height:1.4}
@media(max-height:500px){
  body.game-client .command-research-pages{gap:2px}
  body.game-client .command-research-pages button{font-size:7px;line-height:10px;padding:0}
}
@media(max-height:500px){
  body.game-client .game-drawer[data-panel="upgrades"]{top:30px}
  body.game-client .game-drawer[data-panel="upgrades"]>header{height:32px;padding:3px 8px}
  body.game-client .game-drawer[data-panel="upgrades"]>header small{display:none}
  body.game-client .game-drawer[data-panel="upgrades"]>header button{height:26px;width:28px}
  body.game-client .game-drawer[data-panel="upgrades"] .drawer-body{height:calc(100% - 32px);padding:6px}
  body.game-client .game-drawer[data-panel="upgrades"] .upgrade-panel{padding:8px}
  body.game-client .game-drawer[data-panel="upgrades"] .section-heading{margin-bottom:5px}
  body.game-client .research-tabs{margin-bottom:6px}
  body.game-client .research-tabs button{padding:3px 2px;font-size:9px}
  body.game-client .research-description{font-size:9px;line-height:1.4;margin-bottom:6px}
}
body.game-client .hero-stat-purchases{display:flex;flex-wrap:wrap;gap:5px 10px;padding:7px 9px;margin:7px 0;border:1px solid #695f40;border-radius:3px;background:#302e23;color:#d6c899;font-size:10px}

/* r51 해적단 panel (user, 2026-10-22): one portrait is one cell. Left, the selection's twelve cells; right,
   the owned units by grade; above, the held commons in storage order. The cell edge follows the body height
   (two rows), and shrinks so the twelve cells keep at most 60% of a narrow column.
   r58 (user, 2026-10-24): the commons strip is one row of portraits with each count directly below; the grid
   reads row by row (wrapping, vertical scroll) so the grade order runs left to right, top to bottom. */
body.game-client .command-dock>.crew-section{display:flex;flex-direction:column;gap:4px}
body.game-client .crew-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:38px}
body.game-client .crew-top h2{margin:0;color:#dce6e8;font-size:11px;white-space:nowrap}
body.game-client .crew-title{display:flex;flex-direction:column;gap:1px;min-width:0}
body.game-client #auto-store-state{color:#93a39c;font-size:9px;white-space:nowrap}
body.game-client #auto-store-state.on{color:#9fe0b0}
body.game-client .crew-top h2>span{padding:1px 5px;border-radius:3px;background:#203943;color:#8fc4b6}
body.game-client .crew-commons{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:3px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
body.game-client .crew-common{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:1px 1px 0;border:1px solid #2e4752;border-radius:3px;background:#0e202a;color:#f3dd94;font-size:10px;font-weight:700;line-height:1}
body.game-client .crew-common img{width:18px;height:18px;border-radius:2px;background:#dce7df;object-fit:contain}
body.game-client .crew-common b{display:block;line-height:11px;text-align:center}
body.game-client .crew-common:hover:not(:disabled){border-color:#57b5a6}
body.game-client .crew-common.empty{opacity:.42}
body.game-client .crew-controls{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0}
body.game-client .crew-controls .crew-tools{min-height:0;margin:0}
body.game-client .crew-controls .crew-tools input{width:120px;height:18px}
body.game-client .crew-body{--cell:min(calc((100cqh - 3px)/2),calc((60cqw - 15px)/6));container-type:size;display:flex;flex:1;gap:6px;min-height:0;min-width:0}
body.game-client .crew-selection{display:grid;flex:none;grid-template-columns:repeat(6,var(--cell));grid-template-rows:repeat(2,var(--cell));gap:3px;align-content:start;padding-right:6px;border-right:1px solid #314954}
body.game-client .crew-cell{position:relative;width:var(--cell);height:var(--cell);padding:0;border:1px solid var(--rarity,#49616b);border-radius:3px;background:#dce7df;overflow:hidden}
body.game-client .crew-cell img{display:block;width:100%;height:100%;object-fit:contain}
body.game-client .crew-cell.empty{border:1px dashed #2c444f;background:#0b1c25}
body.game-client .crew-cell.active{box-shadow:0 0 0 2px #f5db82;z-index:1}
body.game-client .crew-body .crew-grid{flex:1;grid-auto-flow:row;grid-template-columns:repeat(auto-fill,var(--cell));grid-template-rows:none;grid-auto-rows:var(--cell);gap:3px;padding:0 2px 0 0;align-content:start;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y proximity}
body.game-client .crew-body .crew-card{position:relative;width:var(--cell);height:var(--cell);padding:0;overflow:hidden}
body.game-client .crew-body .crew-card img{width:100%;height:100%;margin:0;object-fit:contain;background:#dce7df}
body.game-client .crew-body .crew-card .crew-name{position:absolute;left:0;right:0;bottom:0;padding:0 2px;background:#071820d9;font-size:7px;line-height:10px}
body.game-client .crew-body .crew-card .rarity-dot{z-index:1}
body.game-client .crew-body .crew-card.in-selection{box-shadow:0 0 0 1px #f5db82}
/* The hero level bar beside the selected unit's name. */
body.game-client .hero-name-row{display:flex;align-items:center;gap:6px;min-width:0}
body.game-client .hero-name-row h3{flex:0 1 auto;min-width:0}
body.game-client .hero-xp{display:flex;flex:1 1 64px;align-items:center;gap:3px;min-width:44px;max-width:130px}
body.game-client .hero-xp-track{flex:1;height:6px;border:1px solid #36545e;border-radius:3px;background:#0b1c25;overflow:hidden}
body.game-client .hero-xp-track>span{display:block;height:100%;background:linear-gradient(90deg,#3f9b8c,#8fd0bd)}
body.game-client .hero-xp.max .hero-xp-track>span{background:linear-gradient(90deg,#c99535,#f5db82)}
body.game-client .hero-xp small{flex:none;color:#b9cdd2;font-size:8px;line-height:1;white-space:nowrap}
body.game-client .hero-xp.max small{color:#f5db82;font-weight:700}
/* The 2-second sale and reroll warning. */
body.game-client .timed-command-overlay{position:absolute;top:22%;left:50%;z-index:9;display:grid;justify-items:center;gap:4px;min-width:230px;max-width:calc(100% - 24px);padding:10px 18px;border:1px solid #d9774f;border-radius:6px;background:#2a1110e8;box-shadow:0 8px 28px #000a;color:#ffe6dc;transform:translateX(-50%);pointer-events:none;text-align:center}
body.game-client .timed-command-overlay strong{font-size:12px}
body.game-client .timed-command-seconds{color:#ffd28a;font-size:12px}
body.game-client .timed-command-seconds b{font-size:26px;font-variant-numeric:tabular-nums;line-height:1}
body.game-client .timed-command-track{width:100%;height:5px;border-radius:3px;background:#4a2622;overflow:hidden}
body.game-client .timed-command-track>span{display:block;height:100%;background:#f08a5d}
body.game-client .timed-command-overlay small{color:#ffd9c9;font-size:11px;font-weight:700}
body.game-client .timed-command-overlay[data-paused="true"] .timed-command-seconds:after{content:' · 일시 정지';font-size:10px}
/* Treasure gate and unit charges. */
body.game-client #treasure-tab[data-locked="true"]{color:#7f959c}
body.game-client #treasure-tab span{margin-left:3px;color:#f3dd94;font-size:9px}
body.game-client #treasure-tab[data-locked="true"] span{color:#9aa9ad}
body.game-client .treasure-lock{margin:0 0 8px;padding:8px 10px;border:1px solid #875b4e;border-radius:4px;background:#3b2928;color:#ffd7c7;font-size:11px}
body.game-client .treasure-charges{display:grid;gap:5px;margin:0 0 8px;padding:8px 10px;border:1px solid #314955;border-radius:4px;background:#0b1c25;color:#c5d3d6;font-size:10px}
body.game-client .treasure-charges>div:first-child{display:flex;justify-content:space-between;align-items:baseline}
body.game-client .treasure-charges strong{color:#f3dd94}
body.game-client .treasure-charge-list{display:flex;flex-wrap:wrap;gap:5px}
body.game-client .treasure-charge{display:grid;justify-items:center;gap:1px;width:36px}
body.game-client .treasure-charge img{width:30px;height:30px;border:1px solid #57b5a6;border-radius:3px;background:#dce7df;object-fit:contain}
body.game-client .treasure-charge.cooling img{border-color:#3a515c;filter:grayscale(.8) brightness(.7)}
body.game-client .treasure-charge small{font-size:8px;color:#b9cdd2}
body.game-client .treasure-charges>small{color:#8fa4ad;font-size:9px}
@media(max-width:760px){
  body.game-client .crew-top{grid-template-columns:auto minmax(0,1fr);row-gap:2px}
  body.game-client .crew-controls{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  body.game-client .crew-controls .crew-tools input{width:96px}
}
@media(max-width:700px) and (min-width:481px) and (min-height:501px){
  body.game-client .crew-top{grid-template-columns:minmax(0,1fr)}
  body.game-client .crew-commons{gap:2px}
  body.game-client .crew-common{font-size:9px}
  body.game-client .crew-common img{width:16px;height:16px}
  body.game-client .crew-common b{line-height:10px}
  body.game-client .crew-controls .crew-filters{display:none}
  body.game-client .crew-controls .crew-tools input{width:100%}
  body.game-client .crew-controls,body.game-client .crew-controls .crew-tools{width:100%}
}
@media(max-width:480px) and (min-height:501px){
  body.game-client .command-dock>.crew-section{display:flex;flex-direction:column;gap:2px}
  body.game-client .crew-top{grid-template-columns:auto minmax(0,1fr);min-height:0}
  body.game-client .crew-commons{gap:2px}
  body.game-client .crew-common{font-size:9px}
  body.game-client .crew-common img{width:15px;height:15px}
  body.game-client .crew-common b{line-height:10px}
  body.game-client .crew-controls{display:none}
  body.game-client .command-dock>.crew-section .crew-body .crew-grid{grid-row:auto;grid-template-rows:none;grid-auto-rows:var(--cell);padding:0}
  body.game-client .command-dock>.crew-section .crew-body .crew-grid img{width:100%;height:100%}
  body.game-client .command-dock>.crew-section .crew-body .crew-card .crew-name{display:none}
}
@media(max-height:500px){
  body.game-client .crew-top{min-height:0;grid-template-columns:auto minmax(0,1fr) auto}
  body.game-client .crew-commons{gap:2px}
  body.game-client .crew-common{font-size:9px}
  body.game-client .crew-common img{width:14px;height:14px}
  body.game-client .crew-common b{line-height:9px}
  body.game-client .crew-controls .crew-filters{display:none}
  body.game-client .crew-body .crew-card .crew-name{display:none}
  body.game-client .hero-xp small{display:none}
}
/* Grade display (user, 2026-10-23): a 2px border and a short badge in the grade's color on every crew portrait,
   because several grades share one portrait. 초월강화 (src/grade-presentation.js) gets a red-gold badge. */
body.game-client .grade-badge{position:absolute;top:1px;right:1px;z-index:2;max-width:calc(100% - 2px);padding:0 2px;border-radius:2px;background:var(--rarity,#a1a1aa);color:#0b1a20;font-size:7px;font-weight:800;line-height:9px;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;pointer-events:none;box-shadow:0 0 0 1px #0b1a2080}
body.game-client .grade-badge.upgrade{background:linear-gradient(90deg,#ff4d6d,#ffb703);color:#2a0710}
body.game-client .crew-cell:not(.empty),body.game-client .crew-body .crew-card,body.game-client .crew-body .crew-card.selected{border:2px solid var(--rarity,#49616b)}
body.game-client .crew-body .crew-card.selected{box-shadow:0 0 0 2px #f5db82}
/* Common-hero evolve notices (user, 2026-10-24): top right of the line view, below the renderer status. */
body.game-client .evolve-notices{position:absolute;top:10px;right:10px;z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:min(260px,45%);pointer-events:none}
body.game-client .renderer-status:not([hidden])~.evolve-notices{top:44px}
body.game-client .evolve-notice{display:flex;align-items:center;gap:6px;max-width:100%;padding:3px 3px 3px 4px;border:1px solid #d5b76bcc;border-radius:4px;background:#0a1d24f0;box-shadow:0 3px 12px #0008;color:#f3ecd2;pointer-events:auto}
body.game-client .evolve-notice img{flex:none;width:22px;height:22px;border-radius:2px;background:#dce7df;object-fit:contain}
body.game-client .evolve-notice strong{min-width:0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.game-client .evolve-notice button{flex:none;padding:3px 10px;border-radius:3px;background:#f3d187;color:#263c31;font-size:11px;font-weight:700}
body.game-client .evolve-notices>small{padding:1px 6px;border-radius:3px;background:#0a1d24d9;color:#d6c899;font-size:9px}
@media(max-width:760px),(max-height:500px){
  body.game-client .evolve-notices{top:6px;right:6px;gap:3px}
  body.game-client .renderer-status:not([hidden])~.evolve-notices{top:52px}
  body.game-client .evolve-notice{gap:4px;padding:2px 2px 2px 3px}
  body.game-client .evolve-notice img{width:16px;height:16px}
  body.game-client .evolve-notice strong{font-size:9px}
  body.game-client .evolve-notice button{padding:2px 7px;font-size:9px}
}
/* r60: attack- and armor-type icons (src/attack-type-presentation.js); the tooltip carries the multipliers. */
.type-icon{display:inline-flex;flex:none;width:16px;height:16px;margin:0 3px;vertical-align:-3px;cursor:help}
.type-icon svg{width:100%;height:100%}
/* r61: a pressed look on tap; it also marks the icon as a tap target, so Chromium's touch adjustment no longer moves a tap
   on it to a nearby button (the line armor icon sat beside 새 항해). */
.type-icon[title]:active{opacity:.7}
.type-icon[data-attack-type=normal]{color:#e3b45a}
.type-icon[data-attack-type=pierce]{color:#73d08a}
.type-icon[data-attack-type=siege]{color:#ee6a4f}
.type-icon[data-attack-type=hero]{color:#b993ff}
.type-icon[data-attack-type=magic]{color:#5fb8ff}
.type-icon[data-attack-type=chaos]{color:#ff7ab8}
.type-icon[data-attack-type=spells]{color:#8fd0e8}
.type-icon[data-attack-type=none],.type-icon[data-armor-type]{color:#8b979c}
.type-icon[data-armor-type=normal]{color:#b9c6ca}
.type-icon[data-armor-type=large]{color:#d49a5b}
.type-icon[data-armor-type=fort]{color:#a9b4bd}
.type-icon[data-armor-type=hero]{color:#f0cf62}
body.game-client .selection-panel .unit-stats>div .type-icon{width:13px;height:13px;margin:0 0 0 3px;vertical-align:-2px}
body.game-client .command-card .command-icon{position:absolute;right:2px;top:2px;display:flex}
body.game-client .command-card .command-icon .type-icon{width:14px;height:14px;margin:0}
.hud-armor{display:inline-flex}
.hud-armor .type-icon{width:14px;height:14px;margin:0 3px 0 0}
body.game-client .story-view-meta .hud-armor+span{margin-right:auto}
.upgrade-row strong .type-icon{margin-left:0}
/* r61: on a phone or a short screen the crew search and filters hide behind 찾기, which opens them over the bottom of
   the crew panel and leaves 찾기 itself free to close them. */
body.game-client .settings-help{display:flex;gap:8px}body.game-client .settings-help .secondary-button{flex:1;margin:0}
body.game-client .crew-tools-toggle{display:none;margin-left:6px;padding:1px 6px;border:1px solid #416772;border-radius:3px;background:#102a33;color:#d9e6e8;font-size:9px;line-height:14px}
body.game-client .crew-tools-toggle[aria-expanded="true"]{background:#25434c;color:#e6d392}
@media(max-width:700px),(max-height:500px){
  body.game-client .crew-tools-toggle{display:inline-block}
  body.game-client .crew-section{position:relative}
  body.game-client .crew-section[data-tools-open="true"] .crew-controls{display:flex!important;position:absolute;z-index:6;left:4px;right:4px;bottom:2px;flex-direction:row;align-items:center;gap:6px;padding:4px;border:1px solid #416772;border-radius:4px;background:#0b1c24f2}
  body.game-client .crew-section[data-tools-open="true"] .crew-controls .crew-filters{display:flex!important}
  body.game-client .crew-section[data-tools-open="true"] .crew-controls .crew-tools{flex:1;width:auto}
  body.game-client .crew-section[data-tools-open="true"] .crew-controls .crew-tools input{width:100%;height:22px;font-size:12px}
}
/* r61: a skill block shows one short line per skill; the full texts and notes open under 자세히. */
.skill-block>strong,.skill-block>.skill-charge{display:block}.skill-block .skill-charge{margin:2px 0;color:inherit;opacity:.85}
.skill-lines{list-style:none;margin:4px 0;padding:0;display:grid;gap:2px}.skill-lines li{line-height:1.5;overflow-wrap:anywhere}.skill-lines b{font-weight:700}
.skill-block>details,.ability-note{margin:4px 0 0}.skill-block>details>summary,.ability-note>summary{cursor:pointer;font-size:.92em;opacity:.8}
.skill-block>details>p{margin:6px 0}.skill-block>details>small,.ability-note>small{display:block;margin-top:4px;opacity:.85}

/* Larger bottom controls on roomy desktop screens (user, 2026-10-25: the dock, the 도움소 strip and the view row were
   too small to read). The whole block is zoomed so its layout keeps its proportions; the dock row grows to match. */
@media(min-width:1101px) and (min-height:820px){
  body.game-client{--dock-zoom:1.2}
  body.game-client .game-shell{grid-template-rows:42px minmax(0,1fr) calc(184px*var(--dock-zoom))}
  body.game-client .command-dock,body.game-client .support-quick-hud,body.game-client .battle-toolbar{zoom:var(--dock-zoom)}
}
@media(min-width:1500px) and (min-height:960px){
  body.game-client{--dock-zoom:1.32}
}