/* Pixel-art identity. Presentation only; state and actions remain in the application scripts. */
:root {
  --ink: #171b25;
  --paper: #efe4c4;
  --orange: #ed9b45;
  --mint: #a7d979;
  --muted: #697287;
  --ui-page-background: #161b28;
  --ui-page-grid-color: #273147;
  --ui-page-grid-size: 32px;
  --ui-panel-background: #e9ddbc;
  --ui-shop-card-background: #f9efd2;
  --ui-type-card-background: #f9efd2;
  --ui-wallet-background: #242c3c;
  --ui-shop-tabs-background: #252e3e;
  --ui-shop-active-tab-background: #a7d979;
  --ui-menu-background: #e9ddbc;
  --ui-menu-tabs-background: #242c3c;
  --ui-card-background: #f9efd2;
  --ui-card-border-color: #7c755e;
  --ui-dock-background: #141925f2;
  --ui-dock-button-background: #30394b;
  --ui-dock-button-hover: #43516a;
  --ui-dock-active-background: #a7d979;
  --ui-notice-background: #f9efd2;
  --ui-field-background: #fff8e5;
  --ui-field-radius: 0;
  --ui-button-radius: 0;
  --ui-dialog-radius: 0;
  --player-speech-border-radius: 0;
  --ui-panel-help-color: #47536a;
  --ui-shop-width: 1050px;
  --ui-shop-columns: repeat(3, minmax(0, 1fr));
  --ui-shop-gap: 12px;
  --ui-menu-shop-columns: repeat(2, minmax(0, 1fr));
  --ui-shop-tabs-columns: repeat(5, minmax(0, 1fr));
  --ui-shop-tabs-columns-mobile: repeat(2, minmax(0, 1fr));
  --ui-shop-preview-size: 84px;
  --ui-basic-preview-width: 84px;
  --ui-basic-preview-height: 84px;
  --ui-icon-dock-size: 32px;
  --ui-icon-panel-size: 30px;
  --ui-panel-shadow: 8px 8px 0 #0c1019;
  --ui-menu-shadow: 7px 7px 0 #0c1019;
}

/* Square borders on all controls, including HUD and touch controls. */
*, *::before, *::after { border-radius: 0 !important; }
html { scrollbar-color: #69758b #202737; }
body {
  background-color: var(--ui-page-background);
  background-image: linear-gradient(#2c374f80 1px, transparent 1px), linear-gradient(90deg, #2c374f80 1px, transparent 1px);
  background-size: 32px 32px;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(135deg, #22324a99, transparent 46%), linear-gradient(315deg, #202b3b99, transparent 48%);
}
.shell { max-width: 1380px; }
header {
  padding: 12px 16px;
  border: 3px solid #657189;
  background: #202838;
  box-shadow: 5px 5px 0 #0d121d;
}
.brand { color: #fff0ca; text-shadow: 3px 3px 0 #0d121d; }
.brand span { color: var(--mint); }
.account-badge { color: var(--mint); }
.panel, .menu-content .menu-section, .sidebar-card {
  border-color: #1a202c;
  box-shadow: 5px 5px 0 #0d121d;
}
.menu-content .panel, .menu-content .sidebar { box-shadow: none; }
.panel { position: relative; }
.panel::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid #a49779;
  pointer-events: none;
}
.menu-content .panel::before { display: none; }
h1, .brand, .eyebrow { text-transform: uppercase; }
h1 { color: #252b39; text-shadow: 2px 2px 0 #d3c6a6; }
.eyebrow { color: #a34c27; letter-spacing: .1em; }
p, small { line-height: 1.45; }
button, input, select { border-width: 2px; }
button { box-shadow: 3px 3px 0 #151b26; transition: translate .12s, box-shadow .12s, background-color .12s; }
button:not(:disabled):hover { translate: 0 -2px; filter: brightness(1.06); }
button:not(:disabled):active { translate: 2px 2px; box-shadow: 1px 1px 0 #151b26; }
button:disabled { opacity: .7; cursor: default; box-shadow: none; }
button:focus-visible, input:focus-visible, select:focus-visible, .type-card:focus-within {
  outline: 3px solid #e58d42;
  outline-offset: 2px;
}
.primary { color: #20232b; }
.secondary { background: #d5c9a8; }
.leave { background: #e3b59e; }
input, select { min-height: 42px; color: #1d2532; }
.muted, .type-card small { color: #566174; }

/* Character equipment and class selection use inventory-style presentation. */
.wallet {
  flex-wrap: wrap;
  border: 3px solid #111722;
  color: #f8edcb;
  box-shadow: 4px 4px 0 #0d121d;
}
.wallet b { color: #ffd26d; }
.wallet .small { background: #edbd66; }
.skin-loadout {
  margin: 22px 0;
  padding: 14px;
  border: 3px solid #232a37;
  background: #d8cba9;
  box-shadow: 5px 5px 0 #aaa080;
}
.skin-loadout h2, .skin-loadout-picker h3 { color: #252c3a; text-transform: uppercase; }
.shop-categories button {
  min-height: 42px;
  background: #394357;
  color: #fff0c9;
  border-color: #161c28;
  box-shadow: inset 0 -3px #1e2636;
}
.shop-categories button.active {
  background: var(--mint);
  color: #1b2630;
  box-shadow: inset 0 -4px #65864b;
}
.skin-loadout-slots { gap: 8px; padding: 5px 3px 9px; scrollbar-color: #69758b #ded2b1; }
.loadout-slot {
  gap: 6px;
  min-height: 139px;
  padding: 8px 5px;
  border: 2px solid #535e68;
  background: #f4e9cb;
  box-shadow: 3px 3px 0 #979477;
}
.loadout-slot.selected {
  border-color: #1c2832;
  background: #fff3cc;
  box-shadow: 4px 4px 0 #d28a3b;
}
.loadout-slot.selected .skill-shop-preview, .loadout-slot.selected .skin-preview { outline: none; }
.loadout-slot-category { width: 100%; color: #293448; font-size: 18px; text-transform: uppercase; overflow-wrap: anywhere; }
.loadout-slot small { color: #293448; font-weight: 700; }
.skin-loadout-picker { margin-top: 15px; padding: 12px; border-width: 3px; }
#skinLoadoutSelection { color: #364863; font-weight: 700; }
.skin-loadout-carousel { scrollbar-color: #69758b #ded2b1; }
.skin-loadout-carousel > .muted { margin: 4px 0; }
.loadout-skin-card {
  border: 2px solid #59616b;
  background: #f4e9cb;
  color: #293448;
  box-shadow: 3px 3px 0 #a9a080;
}
.loadout-skin-card:hover, .loadout-skin-card:focus-visible { border-color: #19222c; background: #fff3cc; }
.loadout-skin-card.equipped { border-color: #283821; background: var(--mint); box-shadow: 3px 3px 0 #70964f; }
.loadout-skin-card:disabled { cursor: wait; opacity: .75; }
.loadout-skin-card-name { font-weight: 700; text-transform: uppercase; }
.loadout-skin-card-status { padding: 3px 5px; border: 1px solid #33462c; background: #d6efb3; color: #233621; text-transform: uppercase; }
.type-card {
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 5px 12px;
  border-width: 3px;
  border-color: #69717b;
  box-shadow: 3px 3px 0 #a59b80;
  text-align: left;
}
.type-card:hover { border-color: #273244; background: #fff4d8; }
.type-card.selected { border-color: #1c2634; background: #fff1c6; box-shadow: 5px 5px 0 #d4863e; }
.type-card .avatar { grid-column: 1; grid-row: 1 / 3; }
.type-card > b { grid-column: 2; align-self: end; color: #263043; font-size: 18px; }
.type-card > small { grid-column: 2; align-self: start; font-size: 18px; line-height: 1.25; }
.menu-content .types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Show all class skill slots (up to eight) in one row. */
.class-skill-icons { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 9px; }
/* Special class passives show an icon and name; the full rule appears in the tooltip. */
.class-passives { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.class-passive { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 7px; border: 2px solid #6b5aa8; background: #ece6ff; color: #2c2450; font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.class-passive i { font-style: normal; }
/* Class skill icons use battle slot colors from the Skill creator; clicking opens their description. */
.class-skill-icon { position: relative; display: grid; place-items: center; min-width: 0; height: 44px; border: 2px solid var(--ink); background: var(--slot-background, #33404e); color: var(--slot-icon-color, #fff3c6); box-shadow: 2px 2px 0 #101419; cursor: pointer; }
.class-skill-icon.has-border-color { border-color: var(--slot-border-color); }
.class-skill-icon:hover, .class-skill-icon:focus-visible { outline: 2px solid #f2c14e; }
.class-skill-icon .ability-icon { font-size: calc(25px * var(--slot-icon-scale, 1)); line-height: 1; }
.class-skill-icon .icon-image { width: 1em; height: 1em; }
.class-skill-icon b { position: absolute; right: 2px; bottom: 1px; font-size: 18px; line-height: 1; color: #fff3c6; text-shadow: 1px 1px #101419; }
/* Below class selection, renderClassSkillInfo in game/01-core.js shows skills and passives one at a time. */
.class-info { margin-top: 12px; padding: 10px 12px; border: 2px solid var(--z-wood); background: var(--z-parchment-light); color: var(--z-ink); box-shadow: 3px 3px 0 var(--z-parchment-dark); }
.class-info[hidden] { display: none; }
.class-info-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.class-info-top > b { font-size: 18px; }
.class-info-tabs { display: flex; gap: 4px; }
.class-info-tabs button { min-height: 34px; padding: 4px 12px; font-size: 16px; }
#classSkillInfo .class-info-tabs button[aria-selected="false"] { opacity: .6; }
#classSkillInfo .class-info-tabs button[aria-selected="true"] { background: #f2c14e; color: #182029; box-shadow: 2px 2px 0 #101419; }
.class-info-icons { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.class-info-icon { position: relative; display: grid; place-items: center; width: 48px; height: 48px; min-height: 0; padding: 0; border: 2px solid var(--ink); background: var(--slot-background, #33404e); color: var(--slot-icon-color, #fff3c6); box-shadow: 2px 2px 0 #101419; }
.class-info-icon.has-border-color { border-color: var(--slot-border-color); }
.class-info-icon.selected { outline: 3px solid #f2c14e; outline-offset: 1px; }
.class-info-icon.empty { opacity: .5; }
.class-info-icon.is-passive, .skill-info-icon.is-passive { background: #3b3170; }
.class-info-icon .ability-icon { font-size: calc(26px * var(--slot-icon-scale, 1)); line-height: 1; }
.class-info-icon b { position: absolute; right: 2px; bottom: 0; font-size: 14px; line-height: 1; color: #fff3c6; text-shadow: 1px 1px #101419; }
:is(.class-info-icon, .skill-info-icon) .icon-image { width: 1em; height: 1em; }
/* Skill information panel shared by character selection and battle. */
.skill-info-head { display: flex; align-items: center; gap: 10px; }
.skill-info-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); background: var(--slot-background, #33404e); color: var(--slot-icon-color, #fff3c6); }
.skill-info-icon.has-border-color { border-color: var(--slot-border-color); }
.skill-info-icon .ability-icon { font-size: calc(24px * var(--slot-icon-scale, 1)); line-height: 1; }
.skill-info-title { display: grid; gap: 2px; min-width: 0; }
.skill-info-title b { font-size: 18px; }
.skill-info-title small { font-size: 16px; opacity: .8; }
.skill-info-text { margin: 8px 0 0; font-size: 18px; line-height: 1.35; }
.skill-info-text.is-empty { opacity: .65; }
.class-skill-icon.empty { opacity: .55; font-size: 18px; }
.class-equipped { display: none; grid-column: 1 / -1; padding: 6px 8px; border: 2px solid #344d2d; background: #a7d979; color: #203626; font-size: 18px; font-weight: 700; text-align: center; }
.type-card.selected .class-equipped { display: block; }
.class-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 9px;
  padding-top: 12px;
  border-top: 2px solid #c6b998;
}
.class-stat { min-width: 0; --stat-color: #6baace; }
.class-stat[data-stat="attack"] { --stat-color: #dc824a; }
.class-stat[data-stat="health"] { --stat-color: #78ae62; }
.class-stat[data-stat="defense"] { --stat-color: #9775bd; }
.class-stat[data-stat="attack-speed"] { --stat-color: #e0b03a; }
.class-stat-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.class-stats .class-stat-heading span { display: inline; color: #334052; font-size: 18px; font-weight: 700; }
.class-stats .class-stat-heading b { color: #243044; font-size: 18px; }
.class-stat-bar {
  display: block;
  width: 100%;
  height: 11px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #273244;
  background: #b5b4a5;
}
.class-stat-bar::-webkit-progress-bar { background: #b5b4a5; }
.class-stat-bar::-webkit-progress-value { background: var(--stat-color); }
.class-stat-bar::-moz-progress-bar { background: var(--stat-color); }

/* Shop cards emphasize the sprite and purchase action. */
.shop-panel { max-width: var(--ui-shop-width); }
.shop-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 16px 0;
  padding: 11px 14px;
  border: 3px solid #151a25;
  background: #242c3c;
  color: #f7eccc;
  box-shadow: 4px 4px 0 #121824;
}
.shop-balance b { color: #ffd36e; }
.shop-categories {
  gap: 5px;
  margin: 18px 0 12px;
  padding: 6px;
  border: 3px solid #161c28;
}
.shop-categories button { padding: 10px 6px; font-size: 18px; }
.shop-section-help { color: #46536a; }
.shop-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 8px;
  padding: 12px;
  border: 3px solid #1c2533;
  background: #d8cba9;
}
.shop-filters label { display: grid; min-width: 0; gap: 6px; color: #283448; font-weight: 700; }
.shop-filters select { width: 100%; min-width: 0; background: #fff6dc; }
.shop-result-count { margin: 8px 0 0; color: #42516a; font-size: 18px; font-weight: 700; }
.shop-empty { grid-column: 1 / -1; padding: 22px; border: 2px dashed #5d6675; background: #f9efd2; color: #42516a; text-align: center; }
.shop-items { align-items: stretch; }
.shop-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: 10px;
  border-width: 3px;
  border-color: #313849;
  background: #f9efd2;
  box-shadow: 4px 4px 0 #b2a689;
}
.shop-item:hover { background: #fff5d9; border-color: #ba743c; }
.shop-item > .skill-shop-preview, .shop-item > .skin-preview {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 12px;
  border: 3px solid #1c2533;
  background: #d9dee5;
}
.skin-preview.rarity-common, .skill-shop-preview.rarity-common { background: var(--ui-rarity-common); }
.skin-preview.rarity-uncommon, .skill-shop-preview.rarity-uncommon { background: var(--ui-rarity-uncommon); }
.skin-preview.rarity-rare, .skill-shop-preview.rarity-rare { background: var(--ui-rarity-rare); }
.skin-preview.rarity-epic, .skill-shop-preview.rarity-epic { background: var(--ui-rarity-epic); }
.skin-preview.rarity-legendary, .skill-shop-preview.rarity-legendary { background: var(--ui-rarity-legendary); }
.skin-preview.rarity-mythic, .skill-shop-preview.rarity-mythic { background: var(--ui-rarity-mythic); }
.shop-item .skin-preview-frame { transform: translate(-50%, -50%) scale(3); }
.shop-item .skill-shop-sheet, .shop-item .skill-shop-preview > img { transform: scale(2); }
.shop-item canvas.character-shop-sheet,
#gameScreen .world-wrap .shop-item canvas.character-shop-sheet {
  width: 128px;
  height: 128px;
  aspect-ratio: 1;
  background: transparent;
  image-rendering: pixelated;
}
.shop-item > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.shop-item h2 { margin: 0 0 7px; color: #242c3b; font-size: 18px; line-height: 1.2; }
.shop-item p { flex: 1; margin-bottom: 12px; color: #566174; }
.shop-item .price {
  margin: 0 0 10px;
  padding: 7px 8px;
  border: 2px solid #d5bb83;
  background: #fff6db;
  color: #85451f;
  font-size: 18px;
}
.shop-item button { width: 100%; min-height: 38px; }
.shop-item button:disabled { background: #b9d2a4; color: #314c31; border-color: #5b7652; }
.shop-price-note { margin: 0 0 10px; }
#shopBack { margin-top: 4px; }

/* Menus and HUD share square-framed panels. */
.game-dock, .menu-overlay, .confirm-dialog-card, .ready-check-card { border-width: 3px; box-shadow: 5px 5px 0 #0a0f18; }
.game-dock { gap: 5px; padding: 5px; }
.dock-button { min-width: 70px; border-color: #59647a; box-shadow: none; }
.dock-button.active { border-color: #dff7a1; transform: none; box-shadow: inset 0 -4px #719552; }
.dock-label { font-weight: 700; text-transform: uppercase; }
.menu-overlay:has(#shopScreen:not([hidden])) { width: min(840px, calc(100% - 3%)); }
.menu-overlay:has(#characterScreen:not([hidden])) { width: min(900px, calc(100% - 3%)); }
.menu-overlay:has(#tournamentMenu:not([hidden])) { width: min(900px, calc(100% - 3%)); }
.menu-content { scrollbar-color: #85916f #ddd0aa; }
.menu-content .shop-items { grid-template-columns: var(--ui-menu-shop-columns); }
.menu-content .shop-item { display: flex; flex-direction: column; }
.menu-content .shop-item > .skill-shop-preview, .menu-content .shop-item > .skin-preview { width: 100%; height: auto; aspect-ratio: 1; }
.menu-content .shop-item p { margin: 0 0 10px; }
.menu-content .skin-loadout { margin-top: 14px; }
.menu-content .menu-section { box-shadow: 3px 3px 0 #b9ab8a; }
.dock-button[data-menu-tab="friends"] { position: relative; }
.friends-icon { position: relative; display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.friends-icon::before, .friends-icon::after { content: ''; position: absolute; top: 4px; width: 10px; height: 10px; border: 2px solid #17222f; background: #e7ac68; }
.friends-icon::before { left: 3px; box-shadow: 0 11px 0 #64a8db, -3px 16px 0 #64a8db, 3px 16px 0 #64a8db; }
.friends-icon::after { right: 3px; background: #f2d18e; box-shadow: 0 11px 0 #9bd575, -3px 16px 0 #9bd575, 3px 16px 0 #9bd575; }
.friends-badge { position: absolute; top: 2px; right: 2px; min-width: 17px; padding: 2px; border: 2px solid #171b25; background: #e99648; color: #171b25; font: 18px var(--ui-heading-font); }
.friend-add-form { display: flex; align-items: end; gap: 8px; margin-bottom: 16px; }
.friend-add-form label { flex: 1; min-width: 0; }
.friend-add-form button { min-height: 42px; }
.social-list { display: grid; gap: 7px; margin-bottom: 18px; }
#friendsList { gap: 3px; }
.private-conversation { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 8px; border: 2px solid #657083; background: #f8edcf; color: #252c3a; text-align: left; box-shadow: 2px 2px 0 #a9a080; }
.private-conversation.unread { border-color: #243e2d; background: #d6efb3; }
.private-conversation > span:first-child { display: grid; flex: 0 0 34%; min-width: 0; overflow-wrap: anywhere; }
.private-conversation small { color: #335337; font-size: 18px; }
.private-conversation-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.private-message-toast { position: absolute; z-index: 13; top: 7%; right: 2%; display: flex; align-items: center; gap: 10px; width: min(300px, 92%); padding: 9px; border: 3px solid #111722; background: #f8edcf; color: #252c3a; box-shadow: 4px 4px 0 #0a0f18; }
.private-message-toast > div { display: grid; flex: 1; min-width: 0; gap: 3px; }
.private-message-toast b, .private-message-toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.private-message-toast b { font-size: 18px; }
.private-message-toast span { font-size: 18px; }
.social-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 8px; border: 2px solid #657083; background: #f8edcf; }
.social-row b { overflow-wrap: anywhere; }
.social-row small { margin-right: auto; color: #48536a; }
.social-row button { padding: 5px 7px; font-size: 18px; }
.friend-row { flex-wrap: nowrap; min-height: 36px; padding: 3px 6px; gap: 7px; }
.friend-photo { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid #657083; background: #e9ddbc; font-size: 16px; overflow: hidden; }
.friend-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.friend-row .friend-name { flex: 1; min-width: 0; padding: 2px 3px; border: 0; background: transparent; box-shadow: none; color: inherit; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row .friend-name:hover, .friend-row .friend-name:focus-visible { color: #7b501b; text-decoration: underline; }
.friend-row .social-presence { margin-left: auto; }
.social-presence { display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; border: 1px solid #26303b; background: #89909a; }
.social-presence.online { background: #a7d979; }
.private-chat { padding: 10px; border: 3px solid #252e3e; background: #e9ddbc; }
.private-messages { display: grid; align-content: start; gap: 5px; min-height: 110px; max-height: 230px; overflow-y: auto; padding: 8px; border: 2px solid #657083; background: #f8edcf; }
.private-message { display: grid; justify-self: start; gap: 2px; max-width: 92%; margin: 0; padding: 6px 8px; border: 2px solid #647084; background: #e9e4d6; overflow-wrap: anywhere; }
.private-message.own { justify-self: end; border-color: #4c733c; background: #d6efb3; }
.private-message b { font-size: 18px; }
.private-chat-form { display: flex; gap: 6px; margin-top: 8px; }
.private-chat-form input { flex: 1; min-width: 0; }
.party-hud { position: absolute; z-index: 11; top: 43px; left: 8px; display: grid; gap: 8px; width: min(214px, 48%); color: #f8edcb; font-size: 18px; pointer-events: auto; cursor: pointer; }
.party-hud[hidden] { display: none; }
.party-hud:hover, .party-hud:focus-visible { outline: 2px solid #a7d979; outline-offset: 3px; }
.party-panel { position: absolute; z-index: 14; top: 42px; left: 8px; box-sizing: border-box; width: min(310px, calc(100% - 16px)); max-height: calc(100% - 52px); overflow-y: auto; padding: 10px; border: 3px solid #111722; background: #f8edcf; color: #252c3a; box-shadow: 4px 4px 0 #0a0f18; }
.party-panel[hidden] { display: none; }
.party-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.party-panel-header h2 { margin: 0 0 9px; font-size: 18px; }
.party-panel-header button { width: 26px; min-height: 26px; padding: 0; }
.party-panel .social-list { margin-bottom: 10px; }
.party-panel-row { display: flex; align-items: center; gap: 4px; }
.party-panel-row .party-member { flex: 1; }
.party-remove { flex: 0 0 24px; width: 24px; min-height: 24px; padding: 0; font-size: 18px; }
#gameScreen .party-hud:not([hidden]) ~ .practice-controls { left: auto; right: var(--ui-ping-left); max-width: calc(100% - min(214px, 48%) - 24px); justify-content: flex-end; }
.party-member { display: grid; gap: 3px; min-width: 0; padding: 5px; border: 2px solid #657083; background: #f8edcf; color: #252c3a; }
.party-member-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.party-member-name b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-member > small { font-size: 18px; line-height: 1; }
.party-health { position: relative; display: block; box-sizing: border-box; width: 100%; height: 16px; border: 1px solid #18222c; background: #813a38; overflow: hidden; }
.party-health-fill { position: absolute; inset: 0 auto 0 0; background: #a7d979; }
.party-health-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 700; line-height: 1; text-shadow: 1px 1px 0 #18222c, -1px -1px 0 #18222c; }
.party-hud .party-member { gap: 2px; padding: 0; border: 0; background: transparent; color: #f8edcb; }
.party-hud .party-member-name { text-shadow: 1px 1px 2px #101419, -1px -1px 2px #101419; }
.party-hud .party-member-name b { color: #f8edcb; font-size: 18px; text-transform: none; }
.party-hud .party-member > small { color: #f8edcb; text-shadow: 1px 1px 2px #101419; }
.party-hud .party-health { border-color: #101419b3; background: #182029b3; }
.player-list-name.player-social-trigger { padding: 2px 4px; border: 0; background: transparent; color: inherit; box-shadow: none; text-align: left; }
.player-list-name.player-social-trigger:hover, .player-list-name.player-social-trigger:focus-visible { color: #a7d979; outline: 2px solid #a7d979; }
.player-social-menu { position: fixed; z-index: 120; display: grid; gap: 4px; min-width: 170px; max-width: 240px; max-height: min(75vh, 500px); overflow-y: auto; padding: 8px; border: 3px solid #111722; background: #f8edcf; box-shadow: 4px 4px 0 #0a0f18; }
.player-social-menu b { overflow-wrap: anywhere; }
.player-social-menu button { width: 100%; text-align: left; }
.party-invite-dialog { max-width: min(380px, calc(100vw - 24px)); padding: 16px; border: 4px solid #111722; background: #f8edcf; color: #252c3a; box-shadow: 6px 6px 0 #0a0f18; }
.party-invite-dialog::backdrop { background: #0a0f18aa; }
.party-invite-dialog h2 { margin-top: 0; font-size: 18px; }
.party-invite-dialog .actions { display: flex; justify-content: flex-end; gap: 7px; }
.float-panel-header { border-bottom: 4px solid #e5a04f; }
.float-panel-close { border-color: #a8b3c4; background: #3a4558; }
.queue-spinner { border-style: dashed; }
.joystick { box-shadow: inset 0 0 0 3px #f7efd84d, 3px 3px 0 #10141999; }

@media (min-width: 721px) {
  .shop-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-content .shop-items { grid-template-columns: 1fr; }
  .shop-item, .menu-content .shop-item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }
  .shop-item > .skill-shop-preview, .shop-item > .skin-preview,
  .menu-content .shop-item > .skill-shop-preview, .menu-content .shop-item > .skin-preview {
    width: 112px;
    height: 112px;
    aspect-ratio: 1;
    margin: 0;
  }
  .shop-item .skin-preview-frame { transform: translate(-50%, -50%) scale(2.4); }
  .shop-item .skill-shop-sheet, .shop-item .skill-shop-preview > img { transform: scale(1.5); }
  .shop-item canvas.character-shop-sheet,
  #gameScreen .world-wrap .shop-item canvas.character-shop-sheet { width: 96px; height: 96px; }
}

@media (max-width: 900px) {
  .shop-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .shell { padding: 12px; }
  header { flex-wrap: wrap; gap: 10px; padding: 10px; }
  .header-actions { flex-wrap: wrap; }
  .panel { padding: 22px 14px; }
  .menu-overlay:has(#shopScreen:not([hidden])) { width: auto; }
  .menu-overlay:has(#characterScreen:not([hidden])) { width: auto; }
  .menu-content .types { grid-template-columns: 1fr; }
  #gameScreen .menu-overlay {
    position: fixed;
    top: min(var(--mobile-sheet-top, 45vh), 48dvh);
    right: 0;
    bottom: 0;
    left: 0;
    max-height: none;
    width: auto;
    box-shadow: none;
  }
  #gameScreen .menu-content { min-height: 0; overscroll-behavior: contain; }
  .menu-content .shop-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-dock { box-shadow: 3px 3px 0 #0a0f18; }
  .dock-button { min-width: 42px; }
}
@media (max-width: 560px) {
  .game-dock { gap: 3px; padding: 3px; }
  .dock-button { min-width: 38px; padding: 5px; }
  .dock-icon { font-size: 28px; }
  .friend-add-form { flex-wrap: wrap; }
  .friend-add-form label, .friend-add-form button { width: 100%; }
  .party-hud { top: 38px; left: 4px; width: min(194px, 52%); font-size: 18px; }
  #gameScreen .party-hud:not([hidden]) ~ .practice-controls { max-width: calc(48% - 16px); }
  .shop-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 9px; }
  .shop-filters label:last-child { grid-column: 1 / -1; }
  .shop-items, .menu-content .shop-items { grid-template-columns: 1fr; }
  .shop-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-item { display: grid; grid-template-columns: clamp(112px, 30vw, 148px) minmax(0, 1fr); gap: 10px; }
  .menu-content .shop-item { display: grid; grid-template-columns: clamp(112px, 30vw, 148px) minmax(0, 1fr); }
  .shop-item > .skill-shop-preview, .shop-item > .skin-preview,
  .menu-content .shop-item > .skill-shop-preview, .menu-content .shop-item > .skin-preview { width: 100%; height: auto; aspect-ratio: 1; margin: 0; }
  .shop-item .skin-preview-frame { transform: translate(-50%, -50%) scale(2.4); }
  .shop-item .skill-shop-sheet, .shop-item .skill-shop-preview > img { transform: scale(1.5); }
  .shop-item canvas.character-shop-sheet,
  #gameScreen .world-wrap .shop-item canvas.character-shop-sheet { width: 96px; height: 96px; }
  .shop-item h2 { font-size: 18px; }
  .shop-item p { font-size: 18px; }
  .skin-loadout { padding: 9px; }
  .skin-loadout-slots { grid-template-columns: repeat(5, minmax(100px, 1fr)); }
}

/* ===================================================================
   CLASS SKINS (game/02-account-shop.js)
   Show owned skins below the selected class with a preview. Shop cards show rarity and supported changes.
   =================================================================== */
.class-skin-picker { margin-top: 12px; padding: 10px 12px; border: 2px solid var(--z-wood); background: var(--z-parchment-light); color: var(--z-ink); box-shadow: 3px 3px 0 var(--z-parchment-dark); }
.class-skin-picker h3 { margin: 0 0 8px; font-size: 18px; }
.class-skin-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.class-skin-slot { position: relative; display: grid; justify-items: center; gap: 2px; width: 92px; min-height: 0; padding: 4px; border: 2px solid var(--ink); background: #33404e; color: #fff3c6; box-shadow: 2px 2px 0 #101419; }
.class-skin-slot small { max-width: 100%; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.class-skin-slot.selected { outline: 3px solid #f2c14e; outline-offset: 1px; }
.class-skin-slot.empty { place-items: center; width: 100%; min-height: 72px; border-style: dashed; background: transparent; color: var(--z-ink); box-shadow: none; text-align: center; }
.class-skin-slot.empty span { font-size: 26px; opacity: .5; }
.class-skin-slot.empty small { white-space: normal; }
.class-skin-worn { position: absolute; top: -8px; right: -6px; padding: 1px 5px; border: 2px solid var(--ink); background: #96e072; color: #182029; font-size: 12px; }
.class-skin-preview { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 2px dashed #18202933; }
.class-skin-preview[hidden] { display: none; }
.class-skin-stage { display: grid; place-items: center; height: 140px; border: 2px solid var(--ink); background: #536c32; }
.class-skin-info { display: grid; align-content: start; gap: 6px; }
.class-skin-info .muted { margin: 0; }
.class-skin-info button { justify-self: start; }
.class-skin-head { display: flex; align-items: center; gap: 8px; }
.class-skin-head b { display: block; font-size: 18px; }
.skin-portrait { width: 48px; height: 48px; border: 2px solid var(--ink); object-fit: cover; image-rendering: pixelated; }
.skin-portrait.small { width: 28px; height: 28px; margin-right: 6px; vertical-align: middle; }
.skin-rarity { display: inline-block; padding: 0 6px; border: 2px solid var(--ink); font-size: 13px; }
.skin-rarity.rarity-common { background: var(--ui-rarity-common); }
.skin-rarity.rarity-uncommon { background: var(--ui-rarity-uncommon); }
.skin-rarity.rarity-rare { background: var(--ui-rarity-rare); }
.skin-rarity.rarity-epic { background: var(--ui-rarity-epic); }
.skin-rarity.rarity-legendary { background: var(--ui-rarity-legendary); }
.skin-rarity.rarity-mythic { background: var(--ui-rarity-mythic); }
.skin-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.skin-part-sprite { display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border: 2px solid var(--ink); background: #33404e; }
.skin-part-sprite .skill-shop-sheet { overflow: hidden; }
.skin-part-sprite img { image-rendering: pixelated; }
.shop-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.class-skin-picker .error:empty { display: none; }
.shop-class-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border: 2px solid var(--ink); background: #33404e; color: #fff3c6; font-size: 13px; }
.class-skin-card h2 { display: flex; align-items: center; }