/* 00-variables.css: fonts and visual tokens.
   Most shared colors, sizes, and positions are defined here and consumed with var(--name).
   Sections: 1 colors/fonts; 2 page/buttons; 3 character/shop; 4 arena/dock/chat;
   5 skills/results/mobile; 6 name/health/speech; 7 icons; 8 cards/notices/states. */
/* Pixeloid Sans: pixel font for text, buttons, and chat (OFL license in assets/fonts/Pixeloid).
   Use multiples of 9 px for crisp text; the game uses 18 px. DotGothic16 supplies missing symbols. */
@font-face {
  font-family: 'Pixeloid Sans';
  src: url('../../assets/fonts/Pixeloid/PixeloidSans.ttf') format('truetype');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pixeloid Sans';
  src: url('../../assets/fonts/Pixeloid/PixeloidSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-display: swap;
}
@font-face {
  font-family: 'DotGothic16';
  src: url('../../assets/fonts/DotGothic16/DotGothic16-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}
@font-face {
  font-family: 'DotGothic16';
  src: url('../../assets/fonts/DotGothic16/DotGothic16-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-display: swap;
}

@font-face {
  font-family: 'Arcana'; /* Font family name. */
  src: url('../../assets/fonts/Arcana-Font/font%20files/WOFF2/Arcana-Regular.woff2') format('woff2'),
       url('../../assets/fonts/Arcana-Font/font%20files/WOFF/Arcana-Regular.woff') format('woff'),
       url('../../assets/fonts/Arcana-Font/font%20files/TTF/Arcana-Regular.ttf') format('truetype'); /* Relative font file path. */
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

:root {
  /* 1. GENERAL COLORS AND TYPOGRAPHY */
  --ink: #182029;
  --paper: #f7efd8;
  --orange: #f16c3f;
  --mint: #a9e878;
  --line: #29323c;
  --muted: #acb6c0;
  --ui-page-background: #222b35;
  --ui-page-grid-color: #3b4652;
  --ui-page-grid-size: 20px;
  --ui-game-font: 'Pixeloid Sans', 'DotGothic16', monospace; /* Text, buttons, fields, and chat (18 px). */
  --ui-title-font: 'Arcana', 'Pixeloid Sans', monospace; /* ARCANA: titles only. */
  --ui-base-font-size: 18px;
  --ui-body-font: var(--ui-game-font);
  --ui-heading-font: var(--ui-title-font);
  --ui-heading-size: 26px;
  --ui-eyebrow-size: 18px;
  --ui-error-color: #bd2f2f;
  --ui-brand-size: 18px;
  --ui-brand-subtitle-size: 18px;
  --ui-account-size: 18px;
  --ui-language-size: 18px;
  --ui-header-gap: 12px;

  /* 2. PAGE, PANELS, FIELDS, AND BUTTONS */
  --ui-shell-width: 1180px;
  --ui-shell-padding: 30px 20px;
  --ui-game-shell-width: 1320px;
  --ui-game-shell-padding: 12px;
  --ui-panel-width: 760px;
  --ui-panel-margin: 9vh auto;
  --ui-panel-padding: 38px;
  --ui-panel-border-width: 4px;
  --ui-panel-background: var(--paper);
  --ui-panel-shadow: 8px 8px 0 #101419;
  --ui-auth-width: 480px;
  --ui-room-browser-divider: #d5ccb7;
  --ui-field-padding: 11px;
  --ui-field-border: 2px solid var(--line);
  --ui-field-radius: 4px;
  --ui-field-background: #fcfcfcd8;
  --ui-button-padding: 11px 16px;
  --ui-button-border: 2px solid var(--ink);
  --ui-button-radius: 3px;
  --ui-primary-background: var(--orange);
  --ui-primary-shadow: 3px 3px 0 var(--ink);
  --ui-secondary-background: #b8b7b6;
  --ui-leave-color: #9e3425;
  --ui-small-background: var(--mint);

  /* 3. CHARACTER, SHOP, AND LISTS */
  --ui-wallet-background: #fffdf5;
  --ui-wallet-padding: 10px 12px;
  --ui-shop-width: 900px;
  --ui-shop-columns: repeat(2, minmax(0, 1fr));
  --ui-shop-columns-compact: 1fr;
  --ui-shop-gap: 14px;
  --ui-shop-tabs-columns: repeat(4, minmax(0, 1fr));
  --ui-shop-tabs-columns-mobile: repeat(2, minmax(0, 1fr));
  --ui-shop-tabs-background: var(--paper);
  --ui-shop-active-tab-background: var(--mint);
  --ui-shop-card-background: #fffdf5;
  --ui-shop-card-padding: 14px;
  --ui-shop-card-border: 3px solid var(--ink);
  --ui-shop-card-title-size: 18px;
  --ui-shop-card-description-size: 18px;
  --ui-shop-note-color: #355c25;
  --ui-shop-price-note-color: #b54b2e;
  --ui-shop-category-gap: 5px;
  --ui-shop-category-button-size: 18px;
  --ui-shop-preview-size: 72px;
  --ui-shop-preview-background: #29323d;
  --ui-basic-preview-width: 80px;
  --ui-basic-preview-height: 60px;
  --ui-rarity-common: #f2f2ef;
  --ui-rarity-uncommon: #a8df80;
  --ui-rarity-rare: #91c8f6;
  --ui-rarity-epic: #c09be6;
  --ui-rarity-legendary: #f5d864;
  --ui-rarity-mythic: #ed8a80;
  --ui-type-card-background: #fffdf5;
  --ui-type-card-border: 2px solid #a0a8a5;
  --ui-type-card-selected-shadow: 4px 4px 0 var(--orange);
  --ui-type-columns: repeat(auto-fit, minmax(140px, 1fr));
  --ui-type-gap: 12px;
  --ui-type-card-padding: 14px;
  --ui-class-stat-size: 18px;
  --ui-list-divider: #d5ccb7;

  /* 4. ARENA, MENU, LOBBY, AND CHAT */
  --ui-world-border: 4px solid var(--ink);
  --ui-room-sidebar-width: 286px;
  --ui-game-layout-gap: 16px;
  --ui-world-max-width: 960px;
  --ui-world-background: #182029;
  --ui-world-shadow: 7px 7px 0 #101419;
  --ui-canvas-background: #87c667;
  --ui-canvas-aspect-ratio: 16 / 9;
  --ui-ping-background: #182029e8;
  --ui-ping-color: var(--paper);
  --ui-ping-top: 1.5%;
  --ui-ping-left: 1.5%;
  --ui-ping-size: 18px;
  --ui-ping-border: 2px solid var(--ink);
  --ui-elimination-background: #182029e8;
  --ui-elimination-color: var(--paper);
  --ui-elimination-size: 18px;
  --ui-lobby-top: 45%;
  --ui-lobby-right: 72%;
  --ui-lobby-width: 320px;
  --ui-lobby-margin: 8px;
  --ui-lobby-padding: 20px;
  --ui-lobby-gap: 8px;
  --ui-lobby-background: var(--paper);
  --ui-lobby-border: 3px solid var(--ink);
  --ui-lobby-shadow: 3px 3px 0 #101419;
  --ui-lobby-count-size: 18px;
  --ui-lobby-button-size: 18px;
  /* Floating dock and the option panels it opens. */
  --ui-dock-right: 1.5%;
  --ui-dock-bottom: 1.5%;
  --ui-dock-height: 62px;
  --ui-dock-background: #10161de6;
  --ui-dock-button-width: 74px;
  --ui-dock-button-background: #26313d;
  --ui-dock-button-hover: #334150;
  --ui-dock-button-color: #f4ecd6;
  --ui-dock-active-background: var(--mint);
  --ui-float-panel-top: 16%;
  --ui-float-panel-width: 520px;
  --ui-panel-help-color: #5b6673;
  /* Confirmation dialogs replace the browser's default prompt. */
  --ui-dialog-width: 400px;
  --ui-dialog-backdrop: #0b0f14a6;
  --ui-dialog-radius: 14px;
  --ui-dialog-message-color: var(--ink);
  --ui-dialog-message-size: 18px;
  --ui-dialog-confirm-background: var(--orange);
  --ui-dialog-danger-background: #e0584f;
  --ui-dialog-danger-color: #fff;
  --ui-dialog-cancel-background: var(--ui-secondary-background);
  --ui-menu-background: var(--paper);
  --ui-menu-border: 3px solid var(--ink);
  --ui-menu-shadow: 0 5px 0 #101419, 0 18px 40px #0007;
  --ui-menu-tabs-background: #1d2630;
  --ui-menu-content-padding: 16px;
  --ui-menu-shop-columns: 1fr;
  --ui-chat-toggle-left: 1.5%;
  --ui-chat-toggle-bottom: 28%;
  --ui-chat-left: 1.5%;
  --ui-chat-bottom: 1.5%;
  --ui-chat-width: 31%;
  --ui-chat-height: 25%;
  --ui-chat-min-height: 145px;
  --ui-chat-background: #10161dd0;
  --ui-chat-border: 2px solid #0b0f14;
  --ui-chat-padding: 10px;
  --ui-chat-message-size: 18px;
  --ui-chat-notice-size: 18px;
  --ui-chat-text-color: #f4ecd6;
  --ui-chat-title-color: #cfd8e3;
  --ui-chat-name-color: #ffc94d;
  --ui-chat-own-name-color: var(--mint);
  --ui-chat-system-color: #9fb4c8;
  --ui-chat-kill-color: #ff8f70;
  --ui-chat-input-padding: 5px;
  --ui-sidebar-gap: 12px;
  --ui-sidebar-card-padding: 14px;
  --ui-sidebar-card-border: 3px solid var(--ink);
  --ui-sidebar-card-background: var(--paper);
  --ui-player-list-size: 18px;
  --ui-room-code-size: 18px;

  /* 5. SKILLS, RESULTS, AND MOBILE CONTROLS */
  --ui-ability-bottom: 8px;
  --ui-ability-gap: 10px;
  --ui-ability-slot-size: 58px;
  --ui-ability-slot-background: #33404eb4;
  --ui-ability-slot-color: #fff3c6;
  --ui-ability-slot-border: 3px solid var(--ink);
  --ui-ability-selected-background: #53318af2;
  --ui-ability-selected-border: #00ebfc;
  /* On mobile, the arena skill bar sits between the world and joysticks. */
  --ui-mobile-ability-padding: 8px 12px;
  --ui-mobile-ability-slot-size: 46px;
  /* SPECIAL button between the joysticks when no skill is selected. */
  --ui-mobile-ability-inactive-opacity: .35;
  --ui-winner-background: #182029e8;
  --ui-winner-color: #fff6dc;
  --ui-winner-title-size: 28px;
  --ui-podium-gap: 14px;
  --ui-podium-card-background: #0f151bcc;
  --ui-podium-card-border: 2px solid #6d7985;
  --ui-podium-first-border: #f4c95d;
  --ui-podium-third-border: #c98362;
  /* Team results: winners above, defeated players below. */
  --ui-team-result-won-title: #a9e878;
  --ui-team-result-lost-title: #ff7a6b;
  --ui-team-result-won-border: #f4c95d;
  --ui-team-result-lost-border: #8f2f2a;
  --ui-team-result-won-square: #3d7a44;
  --ui-team-result-lost-square: #c0392b;
  --ui-team-result-square-size: 72px;
  --ui-team-result-skin-zoom: 1.7;
  --ui-team-result-card-width: 150px;
  --ui-team-result-mvp-background: #f4c95d;
  --ui-team-result-mvp-color: #182029;
  --ui-mobile-team-result-card-width: 130px;
  --ui-mobile-team-result-square-size: 40px;
  --ui-joystick-size: 104px;
  --ui-joystick-background: #182029b8;
  --ui-aim-joystick-background: #7b3315c9;
  --ui-joystick-knob-size: 42px;
  --ui-mobile-controls-background: #202b35;
  --ui-mobile-shell-padding: 0;
  --ui-mobile-chat-height: 170px;
  --ui-mobile-chat-background: var(--paper);
  --ui-mobile-chat-color: var(--ink);
  --ui-mobile-chat-system-color: #536171;
  /* Mobile chat has a light background, so names use darker colors. */
  --ui-mobile-chat-name-color: #b4541f;
  --ui-mobile-chat-own-name-color: #3d7d39;
  --ui-mobile-chat-kill-color: #b8321c;
  --ui-mobile-chat-history-min-height: 90px;
  --ui-mobile-chat-border: 1px solid #fff;
  --ui-mobile-controls-height: 145px;
  --ui-mobile-lobby-top: 8px;
  --ui-mobile-lobby-right: 8px;
  --ui-mobile-lobby-padding: 4px;
  --ui-mobile-lobby-gap: 5px;
  --ui-mobile-lobby-count-size: 30px;
  --ui-mobile-lobby-button-size: 18px;
  --ui-mobile-menu-content-padding: 10px;
  --ui-mobile-joystick-size-narrow: 88px;
  --ui-mobile-joystick-knob-background: #f7efd8;
  --ui-mobile-aim-knob-background: #ff9a52;

  /* 6. PLAYER NAME, HEALTH, AND SPEECH (WORLD UNITS) */
  --player-name-offset: 30;
  /* Hall: no health bar, so the name sits closer to the head. */
  --player-name-offset-hall: 20;
  --player-name-offset-x: 0;
  --player-name-font-size: 10;
  --player-name-font-family: var(--ui-game-font);
  --player-name-font-weight: 400;
  --player-name-color: #f7f9fc88;
  --player-name-background: transparent;
  --player-name-border: 0;
  --player-name-radius: 0;
  --player-name-padding: 0;
  --player-name-shadow: none;
  --player-health-offset: 12;
  --player-health-offset-x: 0;
  --player-health-width: 59;
  --player-health-height: 18;
  --player-health-border-width: 1.5;
  --player-health-border-color: #182029;
  --player-health-radius: 0;
  --player-health-background: #37253d;
  --player-health-self: #ca3030;
  --player-health-ally: #328fe8;
  --player-health-other: #9c00cc;
  --player-speech-offset: 50;
  --player-speech-offset-x: 0;
  --player-speech-min-width: 42;
  --player-speech-max-width: 154;
  --player-speech-font-size: 10;
  --player-speech-font-family: var(--ui-game-font);
  --player-speech-color: #182029;
  --player-speech-background: #fffdf54d;
  --player-speech-border-width: 1.5;
  --player-speech-border-color: #182029;
  --player-speech-radius: 0;
  --player-speech-border-radius: 10px;
  --player-speech-padding-x: 7;
  --player-speech-padding-y: 5;
  --player-speech-tail-display: block;

  /* 7. ICONS (emoji and image definitions: js/icons.js) */
  --ui-icon-dock-size: 40px;          /* Floating dock. */
  --ui-icon-panel-size: 40px;         /* Panel and confirmation titles. */
  --ui-icon-ready-check-size: 40px;   /* Match found dialog. */
  --ui-icon-ability-size: 29px;       /* Battle skill slots. */
  --ui-icon-image-size: 1em;          /* Image icons: 1em equals the group size above.
   Pixel art stays crisp at integer multiples of its original size (20 px artwork: 20, 40, 60 px). */

  /* 8. CARDS, NOTICES, AND SPECIAL STATES */
  --ui-card-background: #fffdf5;      /* Cards inside menu and room panels. */
  --ui-card-border-color: #d9ccae;
  --ui-notice-background: #fff8e3;    /* Top notices, queue status, and match found. */
  --ui-edge-color: #0b0f14;           /* Dark outline around the dock, notices, and dialogs. */
  --ui-frozen-background: #cfeaff;    /* Match frozen notice. */
  --ui-admin-bar-background: #fff3c4; /* ADMIN MODE bar. */
}

/* Chinese and Hindi use system fonts for Chinese and Devanagari glyphs.
   Latin text and numbers retain the pixel font. */
:root:lang(zh-CN) {
  --ui-game-font: 'Pixeloid Sans', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
  --ui-title-font: 'Arcana', 'Pixeloid Sans', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
}
:root:lang(hi) {
  --ui-game-font: 'Pixeloid Sans', 'Nirmala UI', 'Noto Sans Devanagari', 'Mangal', 'Kohinoor Devanagari', sans-serif;
  --ui-title-font: 'Arcana', 'Pixeloid Sans', 'Nirmala UI', 'Noto Sans Devanagari', 'Mangal', 'Kohinoor Devanagari', sans-serif;
}