@charset "utf-8";

/*
 * v78 interface remaster
 * The supplied blue / purple / gold concepts define the component language,
 * while the game's established cream, green and sunlit palette keeps every
 * screen bright. Gameplay geometry, data and all character / equipment art
 * remain owned by index.html and game.js.
 */

:root {
  --ui-cream: #fff8e6;
  --ui-paper: #fffdf7;
  --ui-paper-2: #f3ecd8;
  --ui-sand: #e9d9b5;
  --ui-ink: #3c342a;
  --ui-muted: #746b5d;
  --ui-teal: #2f866f;
  --ui-teal-deep: #24634f;
  --ui-sky: #70c9d3;
  --ui-blue: #347ca0;
  --ui-blue-deep: #285b77;
  --ui-purple: #765ea8;
  --ui-purple-soft: #eee8fb;
  --ui-gold: #f0bd50;
  --ui-gold-light: #ffe28a;
  --ui-gold-deep: #a96d24;
  --ui-red: #c85a4d;
  --ui-line: rgba(91, 68, 38, 0.22);
  --ui-shadow: 0 18px 46px rgba(63, 48, 27, 0.24);
  --ui-soft-shadow: 0 6px 18px rgba(72, 52, 25, 0.14);

  --forest-950: #3c3227;
  --forest-900: #4d4031;
  --forest-800: #5d503d;
  --forest-700: #6f604a;
  --forest-600: #87765b;
  --cream: var(--ui-cream);
  --cream-2: #f2dfb4;
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --yellow: var(--ui-gold);
  --yellow-2: #d99b34;
  --sky: var(--ui-sky);
  --line: var(--ui-line);
  --shadow: var(--ui-shadow);
  --soft-shadow: var(--ui-soft-shadow);
}

html,
body {
  background: #cbb98e;
}

body {
  color: var(--ui-ink);
}

button,
input,
summary {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline-color: #2f8db5;
}

* {
  scrollbar-color: #4e9aaa #eadbb9;
}

/* Shared sunlit game frame ------------------------------------------------ */

.page-shell {
  background:
    radial-gradient(circle at 12% 13%, rgba(255, 226, 138, 0.48), transparent 24%),
    radial-gradient(circle at 87% 84%, rgba(96, 190, 150, 0.26), transparent 25%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.13) 25%, transparent 25%) 0 0 / 26px 26px,
    linear-gradient(160deg, #8bb888 0%, #668f72 46%, #947d55 100%);
}

.page-shell::before,
.page-shell::after {
  border-color: rgba(255, 246, 213, 0.22);
}

.game-frame {
  border: 3px solid var(--ui-gold-deep);
  background: var(--ui-paper);
  box-shadow:
    0 0 0 3px rgba(255, 229, 150, 0.76),
    0 0 0 7px rgba(39, 99, 83, 0.42),
    0 24px 56px rgba(45, 38, 24, 0.34);
}

.battlefield {
  border-left-color: var(--ui-gold-deep);
  background: #78bb69;
  box-shadow: inset 13px 0 24px rgba(78, 53, 19, 0.13);
}

.battlefield::after {
  border-color: rgba(255, 241, 194, 0.22);
  border-left-color: rgba(77, 55, 26, 0.2);
  box-shadow: inset 0 0 0 2px rgba(47, 132, 111, 0.22), inset 0 -16px 28px rgba(61, 45, 20, 0.1);
}

.control-panel {
  scrollbar-color: #4c9aa1 #efe0bb;
  background:
    linear-gradient(90deg, rgba(54, 126, 105, 0.13), transparent 9%),
    radial-gradient(circle at 100% 0%, rgba(112, 201, 211, 0.24), transparent 29%),
    radial-gradient(circle at 0 100%, rgba(240, 189, 80, 0.23), transparent 34%),
    linear-gradient(155deg, #fffdf5 0%, #f8edcf 100%);
  border-right: 2px solid var(--ui-gold-deep);
  box-shadow: inset -6px 0 0 rgba(47, 134, 111, 0.11);
}

.control-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7px;
  border: 1px solid rgba(46, 117, 96, 0.16);
  border-radius: 15px;
  pointer-events: none;
}

.mini-brand__mark {
  border-color: #7d5627;
  background: linear-gradient(145deg, #ffe58b, #efad37);
  box-shadow: 0 4px 0 #a76d26, inset 0 2px 0 rgba(255, 255, 255, 0.65), 0 0 0 2px rgba(46, 121, 102, 0.16);
}

.mini-brand > div:last-child strong,
.section-heading h2,
.selected-panel h2 {
  color: #44382a;
}

.mini-brand > div:last-child span,
.section-kicker,
.keyboard-tip,
.upgrade-section__tip {
  color: var(--ui-teal-deep);
}

.icon-button,
.speed-button {
  border-color: #8f682e;
  background: linear-gradient(145deg, #f8efd6, #e1ca9b);
  color: #4b4031;
  box-shadow: 0 3px 0 rgba(120, 78, 27, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.sound-setting {
  border-color: rgba(52, 124, 160, 0.32);
  background: rgba(255, 252, 241, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.sound-volume-control input,
.intro-music-control input {
  accent-color: var(--ui-blue);
}

.wave-action-card .primary-button--wave {
  border: 2px solid #9d6520;
  background: linear-gradient(155deg, #ffe27c 0%, #f3bd48 50%, #d98e2b 100%);
  color: #493019;
  text-shadow: 0 1px 0 rgba(255, 249, 218, 0.72);
  box-shadow:
    0 4px 0 #9d6422,
    0 8px 20px rgba(111, 72, 25, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 0 0 2px rgba(255, 244, 205, 0.75);
}

.wave-action-card .speed-button {
  border-color: #67508f;
  background: linear-gradient(145deg, #9a85ca, #6f58a2);
  color: #fff;
  box-shadow: 0 4px 0 #4e3b79, inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.status-card,
.wave-card,
.shop,
.selection-card {
  border-color: rgba(48, 113, 93, 0.3);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 239, 214, 0.96));
  box-shadow: var(--ui-soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.status-card {
  border-bottom: 3px solid rgba(47, 124, 102, 0.32);
}

.status-card--lives .status-card__icon { color: #d95962; }
.status-card--money .status-card__icon { color: #9d671d; background: #f7c951; }
.status-card--wave .status-card__icon { color: var(--ui-purple); }

.status-card strong,
.wave-number {
  color: #4e3c27;
}

.wave-card {
  border-left: 4px solid var(--ui-purple);
}

.shop {
  border-top: 4px solid var(--ui-teal);
}

.tower-card {
  border-color: rgba(48, 116, 97, 0.27);
  background: linear-gradient(150deg, #fffef8 0%, #edf7ee 100%);
  box-shadow: 0 3px 0 rgba(53, 106, 73, 0.18), inset 0 1px 0 #fff;
}

.tower-card:hover,
.tower-card.is-expanded,
.tower-card[aria-expanded="true"] {
  border-color: var(--ui-blue);
  background: linear-gradient(145deg, #ffffff, #e3f5f3);
}

.tower-card.is-selected,
.tower-card[aria-pressed="true"] {
  border-color: var(--ui-gold-deep);
  background: linear-gradient(145deg, #fff9dc, #eaf5dd);
  box-shadow: 0 0 0 2px rgba(240, 189, 80, 0.36), 0 4px 0 rgba(151, 98, 29, 0.2);
}

.tower-portrait,
.empty-selection > span,
.selected-stats span {
  background-color: #f3f9ec;
  border-color: rgba(48, 126, 103, 0.22);
}

.price-tag {
  border-color: #a36d24;
  background: linear-gradient(145deg, #ffe077, #e8a93a);
  color: #4c3117;
}

.upgrade-button {
  border-color: rgba(52, 124, 160, 0.28);
  background: linear-gradient(145deg, #fffdf6, #e8f3ef);
  box-shadow: 0 3px 0 rgba(47, 107, 91, 0.13);
}

.upgrade-button--final {
  border-color: rgba(118, 94, 168, 0.44);
  background: linear-gradient(145deg, #fff8de, #eee5fa);
}

.sell-button {
  border-color: rgba(184, 81, 66, 0.32);
  background: linear-gradient(145deg, #fff5e7, #f3ddd3);
  color: #9d463d;
}

.restart-menu,
.character-info-card {
  border: 2px solid var(--ui-gold-deep);
  background: linear-gradient(145deg, #fffdf5, #eee9d7);
  box-shadow: var(--ui-shadow), 0 0 0 3px rgba(52, 124, 160, 0.2);
}

.restart-menu__option,
.character-info-card__stats span {
  border-color: rgba(47, 116, 96, 0.22);
  background: rgba(255, 255, 255, 0.75);
}

/* Shared overlay and fantasy-toy card language --------------------------- */

.overlay,
.progress-confirm-overlay,
.character-gallery-overlay {
  background:
    radial-gradient(circle at 50% 17%, rgba(255, 220, 119, 0.2), transparent 30%),
    rgba(31, 84, 70, 0.6);
  backdrop-filter: blur(10px) saturate(1.05);
}

.intro-card--home,
.progress-confirm-card,
.result-card,
.character-gallery {
  border: 3px solid var(--ui-gold-deep);
  background:
    radial-gradient(circle at 100% 0%, rgba(112, 201, 211, 0.2), transparent 29%),
    radial-gradient(circle at 0 100%, rgba(240, 189, 80, 0.16), transparent 34%),
    linear-gradient(155deg, #fffdf6 0%, #f4ead0 100%);
  color: var(--ui-ink);
  box-shadow:
    0 0 0 3px rgba(255, 229, 145, 0.72),
    0 0 0 7px rgba(42, 112, 95, 0.48),
    0 30px 72px rgba(40, 49, 29, 0.38);
}

.intro-card--home {
  isolation: isolate;
}

.home-panel {
  color: var(--ui-ink);
}

.home-panel h1 {
  color: #4a3926;
  letter-spacing: -0.06em;
  text-shadow: 0 2px 0 #fff5c9;
}

.home-panel h1 span {
  color: var(--ui-teal);
}

.home-panel h2,
.home-panel h3,
.progress-confirm-card h2,
.result-card h2 {
  color: #493a2a;
}

.home-panel--main > p:not(.eyebrow),
.progress-confirm-card > p:not(.eyebrow),
.result-card > p:not(.eyebrow) {
  color: var(--ui-muted);
}

.home-build-meta {
  top: -8px;
  padding: 5px 8px;
  border: 1px solid rgba(49, 116, 97, 0.18);
  border-radius: 9px;
  background: rgba(255, 252, 240, 0.72);
  color: #786c58;
}

.home-build-meta span:first-child {
  color: var(--ui-teal-deep);
}

.eyebrow {
  color: #8c632b;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.eyebrow > span {
  background: linear-gradient(90deg, transparent, var(--ui-gold-deep));
}

.eyebrow > span:last-child {
  background: linear-gradient(90deg, var(--ui-gold-deep), transparent);
}

.home-main-actions {
  gap: 11px;
}

.home-menu-button,
.home-panel-back,
.pre-game-shortcut,
.difficulty-button,
.special-mode-card,
.save-manager-action,
.progress-confirm-card__actions button,
.result-actions button {
  transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}

.home-menu-button {
  min-height: 57px;
  border: 2px solid rgba(53, 106, 87, 0.28);
  background: linear-gradient(145deg, #ffffff, #e9f2e3);
  color: #493d2e;
  box-shadow: 0 4px 0 rgba(68, 104, 70, 0.2), inset 0 1px 0 #fff;
}

.home-menu-button--play {
  min-height: 68px;
  border-color: #9d6521;
  background: linear-gradient(155deg, #ffe586, #f2bd49 52%, #dc942e);
  color: #493018;
  font-size: 23px;
  box-shadow: 0 6px 0 #9f6726, 0 10px 22px rgba(127, 81, 24, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.72);
}

.home-menu-button--continue {
  border-color: #66508f;
  background: linear-gradient(145deg, #f1ebff, #cfc3ed);
  color: #4d3a78;
  box-shadow: 0 4px 0 rgba(84, 63, 126, 0.28), inset 0 1px 0 #fff;
}

.home-menu-button--save {
  border-color: #347c9f;
  background: linear-gradient(145deg, #eefcff, #c8e9e8);
  color: #285f74;
  box-shadow: 0 4px 0 rgba(43, 108, 125, 0.24), inset 0 1px 0 #fff;
}

.home-menu-button:hover,
.home-menu-button:focus-visible,
.home-panel-back:hover,
.home-panel-back:focus-visible,
.pre-game-shortcut:hover,
.pre-game-shortcut:focus-visible,
.save-manager-action:hover,
.save-manager-action:focus-visible {
  filter: brightness(1.035) saturate(1.03);
  transform: translateY(-2px);
}

.home-menu-button:active,
.home-panel-back:active,
.pre-game-shortcut:active,
.save-manager-action:active {
  transform: translateY(2px);
}

.home-panel-back {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #9b6d2f;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff7dc, #e8d5a7);
  color: #704d22;
  box-shadow: 0 3px 0 rgba(121, 81, 31, 0.2);
}

.pre-game-topbar {
  align-items: center;
}

.pre-game-shortcut {
  border: 2px solid rgba(51, 119, 100, 0.28);
  background: linear-gradient(145deg, #fffef8, #e9f4e8);
  color: var(--ui-teal-deep);
  box-shadow: 0 4px 0 rgba(53, 101, 71, 0.18), inset 0 1px 0 #fff;
}

.pre-game-shortcut--profile {
  border-color: rgba(52, 124, 160, 0.42);
  background: linear-gradient(145deg, #f6fdff, #d7edf0);
  color: var(--ui-blue-deep);
}

.pre-game-shortcut--talent-path,
.pre-game-shortcut--talents {
  border-color: rgba(118, 94, 168, 0.44);
  background: linear-gradient(145deg, #fffaff, #e5dcf6);
  color: #574184;
}

.pre-game-shortcut--achievements {
  border-color: rgba(169, 109, 36, 0.44);
  background: linear-gradient(145deg, #fff9da, #f0dda8);
  color: #74501e;
}

/* Map and mode selection ------------------------------------------------- */

.map-select-grid {
  gap: 14px;
}

.map-select-card {
  min-height: 154px;
  border: 3px solid #c58a34;
  border-radius: 18px;
  color: #fffdf4;
  box-shadow: 0 5px 0 #76502a, 0 8px 18px rgba(62, 48, 25, 0.18), inset 0 0 0 2px rgba(255, 236, 162, 0.52);
}

.map-select-card::before {
  background: linear-gradient(180deg, rgba(25, 78, 64, 0.03) 0%, rgba(35, 62, 49, 0.24) 48%, rgba(46, 43, 31, 0.72) 100%);
}

.map-select-card strong {
  font-size: clamp(20px, 3vw, 25px);
  text-shadow: 0 2px 5px rgba(34, 29, 19, 0.9), 0 0 12px rgba(0, 0, 0, 0.34);
}

.map-select-card small {
  justify-self: center;
  padding: 3px 10px;
  border: 1px solid rgba(255, 226, 132, 0.72);
  border-radius: 999px;
  background: rgba(69, 50, 27, 0.74);
  color: #fff2bd;
}

.map-select-card:hover,
.map-select-card:focus-visible {
  filter: brightness(1.08) saturate(1.04);
  transform: translateY(-2px);
}

.selected-map-label {
  width: fit-content;
  margin-top: -6px;
  padding: 5px 12px;
  border: 1px solid rgba(52, 124, 160, 0.26);
  border-radius: 999px;
  background: #e4f3f1;
  color: var(--ui-blue-deep);
}

.game-mode-section {
  padding: 13px;
  border: 1px solid rgba(54, 118, 99, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.58);
}

.game-mode-section--normal {
  border-bottom: 3px solid rgba(54, 127, 104, 0.34);
}

.game-mode-section--special {
  border-color: rgba(118, 94, 168, 0.24);
  border-bottom: 3px solid rgba(118, 94, 168, 0.34);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(238, 232, 251, 0.66));
}

.game-mode-section__heading h3 {
  color: #4c3c2d;
}

.difficulty-button {
  min-height: 70px;
  border-width: 2px;
  color: #fffdf4;
  box-shadow: 0 5px 0 rgba(73, 51, 27, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.difficulty-button--easy {
  border-color: #28735a;
  background: linear-gradient(145deg, #4ca675, #2a7557);
}

.difficulty-button--hard {
  border-color: #934339;
  background: linear-gradient(145deg, #d66855, #ad443d);
}

.special-mode-grid {
  gap: 12px;
}

.special-mode-card {
  min-height: 100px;
  border: 2px solid rgba(102, 78, 146, 0.38);
  background: linear-gradient(145deg, #fffefb, #eee8f8);
  color: #4b3d32;
  box-shadow: 0 4px 0 rgba(84, 65, 124, 0.2), inset 0 1px 0 #fff;
}

.special-mode-cover {
  border-right: 2px solid rgba(255, 214, 117, 0.64);
  background: #dce9e5;
}

.special-mode-copy small {
  color: #70685d;
}

/* Save, settings, profile, achievements and about ------------------------ */

.save-manager-heading,
.profile-heading,
.achievement-heading,
.equipment-heading,
.benefits-heading,
.bloodline-heading {
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(169, 109, 36, 0.2);
}

.save-manager-heading__mark,
.profile-heading__mark,
.achievement-heading__mark,
.talent-heading__mark,
.benefits-heading__mark,
.bloodline-heading__mark {
  border: 2px solid rgba(122, 83, 34, 0.42);
  box-shadow: 0 4px 0 rgba(92, 59, 26, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.save-manager-heading__mark {
  background: linear-gradient(145deg, #94d8df, #4e9fb4);
  color: #fff;
}

.profile-heading__mark {
  background: linear-gradient(145deg, #66b993, #31765e);
}

.achievement-heading__mark {
  background: linear-gradient(145deg, #ffe077, #e1a93c);
}

.save-manager-includes span,
.profile-stat-card,
.profile-completion-card,
.profile-special-card,
.profile-bonus-card,
.profile-economy-card,
.achievement-card,
.achievement-group__toggle {
  border-color: rgba(53, 117, 96, 0.22);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(244, 238, 216, 0.9));
  box-shadow: inset 0 1px 0 #fff;
}

.profile-stat-card {
  border-bottom: 3px solid rgba(47, 134, 111, 0.28);
}

.profile-stat-card b,
.profile-completion-card b,
.profile-special-card b,
.profile-section h3 {
  color: var(--ui-teal-deep);
}

.achievement-progress,
.achievement-card__progress {
  background: #e6dbc1;
}

.achievement-progress span,
.achievement-card__progress > span {
  background: linear-gradient(90deg, var(--ui-sky), var(--ui-teal), var(--ui-gold));
}

.achievement-card.is-unlocked {
  border-color: rgba(169, 109, 36, 0.44);
  background: linear-gradient(145deg, #fffef2, #f4e4b8);
}

.save-manager-actions {
  gap: 12px;
}

.save-manager-action {
  min-height: 96px;
  border: 2px solid rgba(52, 124, 160, 0.34);
  box-shadow: 0 5px 0 rgba(50, 103, 114, 0.2), inset 0 1px 0 #fff;
}

.save-manager-action--export {
  background: linear-gradient(145deg, #ecfff1, #c6ead0);
  color: #275f47;
}

.save-manager-action--import {
  border-color: rgba(118, 94, 168, 0.38);
  background: linear-gradient(145deg, #f8f4ff, #ddd2f3);
  color: #55407f;
}

.save-manager-warning {
  border: 1px solid rgba(190, 120, 30, 0.3);
  background: linear-gradient(145deg, #fff8df, #f3dfb6);
  color: #76501e;
}

.intro-music-control {
  min-height: 64px;
  border: 2px solid rgba(52, 124, 160, 0.25);
  background: linear-gradient(145deg, #fffef8, #dfeeee);
  color: #4f473c;
  box-shadow: 0 3px 0 rgba(57, 108, 113, 0.15), inset 0 1px 0 #fff;
}

.intro-music-control output {
  padding: 4px 6px;
  border-radius: 8px;
  background: #fff6d8;
  color: #6f4a1f;
}

.about-author,
.about-open-hint,
.about-play-summary {
  border-color: rgba(54, 119, 99, 0.22);
  background: rgba(255, 255, 255, 0.7);
}

.about-open-hint,
.about-play-summary {
  padding: 10px 12px;
  border: 1px solid rgba(54, 119, 99, 0.2);
  border-radius: 12px;
}

.home-panel--about .about-character-image {
  border: 2px solid rgba(52, 124, 160, 0.26);
  background:
    radial-gradient(ellipse at 50% 74%, rgba(114, 201, 211, 0.24), transparent 46%),
    linear-gradient(145deg, #ffffff, #e6f2ed);
  box-shadow: 0 4px 0 rgba(53, 103, 102, 0.16), inset 0 1px 0 #fff;
}

.home-panel--about .about-character-image::after {
  border: 1px solid rgba(169, 109, 36, 0.25);
  background: linear-gradient(145deg, #fff8db, #ead6a6);
  color: #57432c;
}

.home-panel--about .about-character-image:hover,
.home-panel--about .about-character-image:focus-visible {
  border-color: var(--ui-gold-deep);
  background: linear-gradient(145deg, #fffdf2, #dff2eb);
}

.character-gallery {
  background: linear-gradient(155deg, #fffdf8, #e8f0e4);
}

.character-gallery__viewport,
.character-gallery__stage {
  background:
    radial-gradient(circle at 50% 65%, rgba(112, 201, 211, 0.22), transparent 36%),
    #f8f3e5;
}

.character-gallery__controls button,
.character-gallery__close {
  border-color: rgba(52, 124, 160, 0.32);
  background: linear-gradient(145deg, #ffffff, #dcebe9);
  color: var(--ui-blue-deep);
}

/* Equipment, Path, Benefits and Bloodline ------------------------------- */

.home-panel--talents,
.home-panel--equipment,
.home-panel--benefits,
.home-panel--bloodline,
.home-panel--benefit-tuning {
  background: transparent;
}

.talent-resource-grid article,
.equipment-resource-grid article,
.bloodline-resource-grid article,
.benefits-exchange-grid article,
.benefits-resource-card {
  border-color: rgba(58, 119, 102, 0.22);
  background: linear-gradient(145deg, #ffffff, #eee8d7);
  box-shadow: inset 0 1px 0 #fff;
}

.talent-resource-grid strong,
.equipment-resource-grid strong,
.benefits-resource-card strong {
  color: var(--ui-blue-deep);
}

.talent-resource-grid__available,
.equipment-resource-grid__available,
.bloodline-resource-grid__available {
  border-color: rgba(47, 134, 111, 0.38) !important;
  background: linear-gradient(145deg, #f8fff2, #dcefd2) !important;
}

.talent-exchange-card,
.benefits-exchange-card {
  border-color: rgba(169, 109, 36, 0.34);
  background: linear-gradient(145deg, #fffdf3, #f1dfb5);
  box-shadow: 0 3px 0 rgba(124, 83, 31, 0.14), inset 0 1px 0 #fff;
}

.talent-exchange-card button,
.benefits-exchange-button {
  border-color: #93601f;
  background: linear-gradient(145deg, #e4af49, #a96f24);
  box-shadow: 0 3px 0 rgba(105, 65, 20, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.talent-total-effects,
.benefits-summary-card,
.benefit-tuning-summary-card,
.benefit-card,
.bloodline-node,
.equipment-detail,
.talent-equipment-category,
.equipment-stone-card {
  border-width: 2px;
  box-shadow: 0 4px 0 rgba(77, 65, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.talent-total-effects {
  border-color: rgba(47, 134, 111, 0.28);
  background: linear-gradient(145deg, #ffffff, #e8f2df);
}

.talent-reset-row {
  border-color: rgba(118, 94, 168, 0.24);
  background: linear-gradient(145deg, #ffffff, #eee8f8);
}

.talent-reset,
.benefit-tuning-open,
.benefit-tuning-apply,
.equipment-detail__action,
.bloodline-node__action {
  box-shadow: 0 3px 0 rgba(67, 47, 108, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.talent-equipment-category {
  border-color: color-mix(in srgb, var(--equipment-main) 38%, #d6b86c);
  background: linear-gradient(145deg, #fffef8, color-mix(in srgb, var(--equipment-soft) 70%, #fff8e5));
}

.talent-path-list .talent-equipment-card,
.equipment-slot {
  border-width: 2px;
  background: linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--equipment-main) 9%, #fff8e5));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--equipment-main) 18%, #d9c69c), inset 0 1px 0 #fff;
}

.talent-path-list .talent-equipment-card.is-owned,
.equipment-slot.is-owned {
  background: linear-gradient(145deg, #fffef2, color-mix(in srgb, var(--equipment-soft) 76%, #f4e5bc));
}

.talent-equipment-card__art-box,
.equipment-slot__icon,
.equipment-detail__hero-icon,
.equipment-level__art-trigger {
  background-color: color-mix(in srgb, var(--equipment-main) 12%, #fff7df);
}

.benefits-summary-card,
.benefit-tuning-summary-card {
  border-color: rgba(118, 94, 168, 0.3);
  background: linear-gradient(145deg, #fffefb, #eee8f8);
}

.benefit-card {
  background: linear-gradient(145deg, #fffef9, color-mix(in srgb, var(--benefit-soft) 78%, #fff4d8));
}

.bloodline-node {
  background: linear-gradient(145deg, #fffef8, color-mix(in srgb, var(--bloodline-main) 9%, #fff2dd));
}

.bloodline-node.is-filled {
  background: linear-gradient(145deg, #fff7e1, color-mix(in srgb, var(--bloodline-main) 14%, #fff0d3));
}

.benefit-tuning-system,
.benefit-tuning-group,
.benefit-tuning-field {
  background: rgba(255, 255, 255, 0.78);
}

.benefit-tuning-actions {
  border-color: rgba(118, 94, 168, 0.28);
  background: rgba(255, 250, 235, 0.94);
}

/* Confirmation and result screens --------------------------------------- */

.progress-confirm-card {
  width: min(500px, 100%);
  gap: 16px;
}

.progress-confirm-card__actions button {
  min-height: 58px;
  border: 2px solid rgba(87, 60, 28, 0.38);
  box-shadow: 0 4px 0 rgba(83, 55, 28, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.progress-confirm-card__continue {
  background: linear-gradient(145deg, #489f71, #267354);
}

.progress-confirm-card__start {
  background: linear-gradient(145deg, #d56855, #ad423b);
}

.result-badge {
  border-color: #8f6027;
  background: linear-gradient(145deg, #ffe783, #e8ad3e);
  color: #65431c;
  box-shadow: 0 5px 0 #a46b27, 0 0 0 3px rgba(52, 124, 160, 0.2);
}

.result-stat {
  border-color: rgba(54, 117, 98, 0.2);
  background: rgba(255, 255, 255, 0.76);
}

.result-stat--waves {
  border-color: rgba(47, 134, 111, 0.35);
  background: linear-gradient(145deg, #f8fff1, #dcecc9);
}

.result-actions .primary-button {
  border-color: #9c6522;
  background: linear-gradient(145deg, #f7ca58, #d9932d);
  color: #4a3018;
  box-shadow: 0 4px 0 #966020;
}

.result-actions .secondary-button {
  border-color: rgba(52, 124, 160, 0.34);
  background: linear-gradient(145deg, #ffffff, #dcecea);
  color: var(--ui-blue-deep);
  box-shadow: 0 4px 0 rgba(50, 104, 112, 0.18);
}

.message-toast,
.tutorial-hint {
  border-color: rgba(169, 109, 36, 0.45);
  background: rgba(255, 248, 221, 0.94);
  color: #5a4021;
  box-shadow: 0 5px 18px rgba(63, 47, 23, 0.2);
}

/* Responsive tuning ------------------------------------------------------ */

@media (max-width: 1100px), (max-height: 620px), (max-aspect-ratio: 11 / 7.1) {
  .game-frame {
    box-shadow: none;
  }

  .battlefield {
    border-bottom-color: var(--ui-gold-deep);
  }

  .control-panel {
    border-top: 3px solid var(--ui-gold-deep);
    border-right: 0;
  }
}

@media (max-width: 620px) {
  .intro-card--home,
  .progress-confirm-card,
  .result-card,
  .character-gallery {
    border-width: 2px;
    box-shadow:
      0 0 0 2px rgba(255, 229, 145, 0.72),
      0 0 0 4px rgba(42, 112, 95, 0.44),
      0 18px 40px rgba(40, 49, 29, 0.32);
  }

  .intro-card.intro-card--home {
    padding: 20px 14px 16px;
  }

  .intro-card--home::before {
    top: 6px;
    width: 14px;
    height: 14px;
    border-width: 2px;
  }

  .home-panel--main {
    padding-top: 23px;
  }

  .home-build-meta {
    position: static;
    justify-self: center;
    margin-bottom: 2px;
    text-align: center;
  }

  .home-panel h1 {
    font-size: clamp(44px, 15vw, 62px);
  }

  .pre-game-topbar {
    align-items: flex-start;
  }

  .pre-game-shortcut--profile,
  .pre-game-shortcut--talent-path {
    width: 82px;
  }

  .map-select-grid {
    gap: 10px;
  }

  .map-select-card {
    min-height: 132px;
    border-width: 2px;
  }

  .game-mode-section {
    padding: 10px;
  }

  .special-mode-card {
    border-width: 2px;
  }

  .home-panel-back {
    min-height: 40px;
    padding: 7px 10px;
    font-size: 13px;
  }

  .about-open-hint,
  .about-play-summary {
    padding: 9px 10px;
  }

  .control-panel::before {
    inset: 3px;
    border-radius: 10px;
  }
}

@media (max-width: 390px) {
  .map-select-grid {
    grid-template-columns: 1fr;
  }

  .map-select-card {
    min-height: 145px;
  }

  .progress-confirm-card__actions,
  .result-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-card--home::before {
    animation: none;
  }
}

/* 2026-08-02 Remake：所有前置介面共用同一戰場背景。 */
.overlay--intro {
  overflow: hidden;
  background:
    linear-gradient(rgba(15, 35, 58, 0.1), rgba(15, 35, 58, 0.18)),
    url("assets/ui/remake/battle-arena-background.png") center / cover no-repeat fixed !important;
}

.overlay--intro::before,
.overlay--intro::after {
  content: none !important;
}

.home-battle-cast {
  position: fixed;
  z-index: 1;
  bottom: 1.5vh;
  display: flex;
  width: min(39vw, 660px);
  height: min(96vh, 1040px);
  align-items: flex-end;
  pointer-events: none;
}

.home-battle-cast--xiaoda { left: 0; justify-content: flex-start; }
.home-battle-cast--wensheng { right: 0; justify-content: flex-end; }
.overlay--intro:has(#homeMenuPanel[hidden]) .home-battle-cast { opacity: 0; visibility: hidden; }

.home-battle-cast img {
  width: 29%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 16px 16px rgba(13, 25, 37, 0.38));
}

.home-battle-cast img:nth-child(2) { width: 32%; margin-inline: -7%; }
.home-battle-cast img:nth-child(3) { width: 35%; margin-inline-end: -7%; }
.home-battle-cast img:nth-child(4) { width: 27%; }
.home-battle-cast img:nth-child(5) { width: 30%; margin-inline-start: -6%; }
.home-battle-cast--xiaoda img { transform-origin: left bottom; }
.home-battle-cast--xiaoda img:nth-child(3) { scale: -1 1; }
.home-battle-cast--wensheng img { transform-origin: right bottom; }

.overlay--intro.is-visible .home-battle-cast--xiaoda img {
  animation-name: battle-cast-enter-left, battle-cast-idle;
  animation-duration: 620ms, 3.2s;
  animation-delay: calc(var(--cast-index, 0) * 90ms), 700ms;
  animation-fill-mode: both, both;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
}

.overlay--intro.is-visible .home-battle-cast--wensheng img {
  animation-name: battle-cast-enter-right, battle-cast-idle;
  animation-duration: 620ms, 3.2s;
  animation-delay: calc(var(--cast-index, 0) * 90ms), 700ms;
  animation-fill-mode: both, both;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
}

.home-battle-cast img:nth-child(1) { --cast-index: 0; }
.home-battle-cast img:nth-child(2) { --cast-index: 1; }
.home-battle-cast img:nth-child(3) { --cast-index: 2; }
.home-battle-cast img:nth-child(4) { --cast-index: 3; }
.home-battle-cast img:nth-child(5) { --cast-index: 4; }

@keyframes battle-cast-enter-left {
  from { opacity: 0; transform: translateX(-130%) scale(.82); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes battle-cast-enter-right {
  from { opacity: 0; transform: translateX(130%) scale(.82); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes battle-cast-idle {
  from { translate: 0 0; rotate: -0.6deg; }
  to { translate: 8px -11px; rotate: 0.6deg; }
}

.intro-card--home {
  z-index: 2;
}

/* 主頁沿用合成框，互動按鈕仍是原生 button，保留鍵盤與觸控功能。 */
.intro-card--home:has(#homeMenuPanel:not([hidden])) {
  width: min(455px, calc(100vw - 24px), 60dvh);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.intro-card--home:has(#homeMenuPanel:not([hidden]))::before {
  content: none !important;
}

.home-panel--main {
  position: relative;
  width: 100%;
  aspect-ratio: 985 / 1597;
  min-height: 0;
  padding: 0;
  background: url("assets/ui/remake/main-menu-frame.png") center / 100% 100% no-repeat;
}

.home-panel--main > .eyebrow,
.home-panel--main > h1,
.home-panel--main > p:not(.home-build-meta) {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
}

.home-panel--main .home-build-meta {
  top: 6.35%;
  right: 13.2%;
  left: auto;
  width: 29%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f3df9d;
  font-family: "Noto Serif TC", "Microsoft JhengHei", serif;
  font-size: clamp(7px, .75vw, 10px);
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
}

.home-panel--main .home-build-meta span:last-child { display: none; }
.home-panel--main .home-build-meta span:first-child {
  color: #f7e5a4;
  font-size: clamp(11px, 1vw, 15px);
  text-shadow: 0 1px 0 #1a3540, 0 0 5px rgba(255, 226, 126, .7);
}

.home-panel--main .home-main-actions {
  position: absolute;
  inset: 0;
  width: auto;
  margin: 0;
  display: block;
}

.home-panel--main .home-menu-button {
  position: absolute;
  left: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: transparent;
  box-shadow: none;
  transition: transform 150ms ease, filter 150ms ease;
}

.home-panel--main #enterGameBtn { left: 14.72%; top: 38.45%; width: 69.54%; height: 14.9%; background-image: url("assets/ui/remake/main-enter.png"); }
.home-panel--main #continueGameBtn {
  left: 12.39%; top: 50.6%; width: 72.39%; height: 16.16%;
  background-image: url("assets/ui/remake/main-continue.png");
  color: transparent;
  font-family: "Noto Serif TC", "Microsoft JhengHei", serif;
  font-weight: 900;
  text-shadow: none;
}
.home-panel--main #continueGameBtn small { display: none; }
.home-panel--main #saveManagerBtn { left: 14.42%; top: 65.81%; width: 70.25%; height: 11.46%; background-image: url("assets/ui/remake/main-save.png"); }
.home-panel--main #aboutGameBtn { left: 15.84%; top: 75.7%; width: 67.01%; height: 10.02%; background-image: url("assets/ui/remake/main-about.png"); }
.home-panel--main #settingsBtn { left: 15.74%; top: 83.97%; width: 67.21%; height: 9.77%; background-image: url("assets/ui/remake/main-settings.png"); }

.home-panel--main .home-menu-button:hover,
.home-panel--main .home-menu-button:focus-visible {
  z-index: 2;
  transform: scale(1.025);
  filter: brightness(1.12) drop-shadow(0 0 8px #fff3a4) drop-shadow(0 0 16px #4fcfff);
}

.home-panel--main .home-menu-button:active { transform: scale(.985); }

/* 地圖選擇改成五欄橫置、三列，卡片比舊版更緊湊。 */
.intro-card--home:has(#mapSelectionPanel:not([hidden])) {
  width: min(1450px, calc(100vw - 24px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

#mapSelectionPanel {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  min-height: 0;
  padding: 0;
}

#mapSelectionPanel::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: url("assets/ui/remake/map-selection-frame.png") center / 100% 100% no-repeat;
}

#mapSelectionPanel > .eyebrow,
#mapSelectionPanel > h2 { position: absolute; overflow: hidden; width: 1px; height: 1px; clip-path: inset(50%); }

#mapSelectionPanel .pre-game-topbar { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
#mapSelectionPanel .pre-game-topbar button {
  position: absolute;
  pointer-events: auto;
  color: transparent;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 150ms ease, filter 150ms ease;
}
#mapSelectionPanel .home-panel-back { left: 1.2%; top: 2.1%; width: 21.8%; height: 15.9%; background-image: url("assets/ui/remake/map-back.png"); }
#mapSelectionPanel .pre-game-shortcuts { position: static; }
#mapSelectionPanel .pre-game-shortcut--profile { left: 66.7%; top: 2.5%; width: 17.5%; height: 15.4%; background-image: url("assets/ui/remake/map-profile.png"); }
#mapSelectionPanel .pre-game-shortcut--talent-path { left: 83%; top: 2.5%; width: 16.6%; height: 15.4%; background-image: url("assets/ui/remake/map-talent.png"); }
#mapSelectionPanel .pre-game-topbar button:hover,
#mapSelectionPanel .pre-game-topbar button:focus-visible {
  z-index: 6;
  transform: scale(1.045);
  filter: brightness(1.12) drop-shadow(0 0 8px #fff3a4) drop-shadow(0 0 14px #4fcfff);
}
#mapSelectionPanel .pre-game-topbar button:active { transform: scale(.985); }

#mapSelectionPanel .map-select-grid {
  position: absolute;
  z-index: 2;
  left: 1.65%;
  top: 34%;
  width: 96.1%;
  height: 60.5%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 1.4%;
  row-gap: 3.5%;
  margin: 0;
}

#mapSelectionPanel .map-select-card {
  min-height: 0;
  padding: 8%;
  border: 0;
  border-radius: 8%;
  box-shadow: none;
  margin: 5.5% 4.5%;
  background-clip: padding-box;
  transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}

#mapSelectionPanel .map-select-card:hover,
#mapSelectionPanel .map-select-card:focus-visible {
  z-index: 2;
  transform: scale(1.025);
  filter: brightness(1.12) saturate(1.05) drop-shadow(0 0 8px #fff3a4) drop-shadow(0 0 14px #4fcfff);
  box-shadow: inset 0 0 0 3px rgba(255, 244, 175, .75);
}

#mapSelectionPanel .map-select-card strong,
#mapSelectionPanel .map-select-card small { position: absolute; overflow: hidden; width: 1px; height: 1px; clip-path: inset(50%); }

#mapSelectionPanel .map-select-card:active { transform: scale(.985); }

#mapSelectionPanel .map-select-card[hidden] { display: none !important; }

#mapSelectionPanel .map-select-pagination {
  position: absolute;
  z-index: 5;
  top: 20%;
  left: 37%;
  display: flex;
  width: 26%;
  align-items: center;
  justify-content: space-between;
  gap: 8%;
  color: #fff;
  font-size: clamp(11px, 1.2vw, 18px);
  font-weight: 900;
}

#mapSelectionPanel .map-select-pagination[hidden] { display: none !important; }
#mapSelectionPanel .map-select-pagination button {
  padding: 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
#mapSelectionPanel .map-select-pagination button:disabled { cursor: default; opacity: .35; }

/* 第16–27張仍屬玩法實測：保留正式縮圖及必要文字，不自行重畫重製框。 */
#mapSelectionPanel[data-map-page="2"]::after { background-image: none; }
#mapSelectionPanel[data-map-page="2"] .map-select-grid {
  left: 4%;
  top: 25%;
  width: 92%;
  height: 70%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 2%;
  row-gap: 4%;
}
#mapSelectionPanel[data-map-page="2"] .map-select-card {
  margin: 0;
  padding: 0 0 40px;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto calc(100% - 40px);
  color: #fff;
  text-shadow: none;
}
#mapSelectionPanel[data-map-page="2"] .map-select-card strong,
#mapSelectionPanel[data-map-page="2"] .map-select-card small {
  position: absolute;
  right: 0;
  left: 0;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  color: inherit;
  line-height: 1.1;
}
#mapSelectionPanel[data-map-page="2"] .map-select-card strong { bottom: 18px; font-size: clamp(13px, 1.55vw, 22px); }
#mapSelectionPanel[data-map-page="2"] .map-select-card small { bottom: 1px; font-size: clamp(9px, .92vw, 13px); }

@media (max-width: 760px) {
  .home-battle-cast { width: 44vw; height: 62vh; opacity: .9; }
  .intro-card--home:has(#mapSelectionPanel:not([hidden])) { width: calc(100vw - 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-battle-cast img { animation: none !important; }
  .home-panel--main .home-menu-button,
  #mapSelectionPanel .map-select-card { transition: none; }
}

/* 2026-08-03 Remake：重製介面只使用正式 PNG，不再疊加舊 CSS 美術。 */
.intro-card--home::before {
  content: none !important;
}

.home-panel--main .home-no-run-notice {
  position: absolute;
  left: 28.45%;
  top: 55.45%;
  display: grid;
  width: 43.1%;
  height: auto;
  aspect-ratio: 1152 / 359;
  place-items: center;
  padding: 0;
  border: 0;
  clip-path: none;
  background: url("assets/ui/remake/main-no-run.png?v=20260803155000") center / 100% 100% no-repeat;
  box-shadow: none;
  color: transparent;
  text-shadow: none;
}

.home-panel--main .home-no-run-notice[hidden] { display: none; }

.home-panel--main .home-no-run-notice strong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.home-panel--main .home-no-run-notice::before,
.home-panel--main .home-no-run-notice::after {
  content: none !important;
}

#mapSelectionPanel .map-select-card {
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none;
  transform: none;
}

#mapSelectionPanel .map-select-card:hover,
#mapSelectionPanel .map-select-card:focus-visible {
  z-index: 2;
  box-shadow: none !important;
  filter: brightness(1.16) saturate(1.08);
  transform: scale(1.035);
}

#mapSelectionPanel .map-select-card:active {
  box-shadow: none !important;
  filter: brightness(.93);
  transform: scale(.98);
}

#mapSelectionPanel .map-select-card::before,
#mapSelectionPanel .map-select-card::after {
  content: none !important;
}

/* 個人檔案：正式重製框作唯一視覺底層，DOM 只保留數值與點擊區。 */
.intro-card--home:has(#profilePanel:not([hidden])) {
  width: min(1450px, calc(100vw - 24px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

#profilePanel {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1658 / 949;
  container-type: inline-size;
  min-height: 0;
  padding: 0;
  background: url("assets/ui/remake/profile-frame.png") center / 100% 100% no-repeat;
}

#profilePanel[hidden] {
  display: none;
}

#profilePanel > .eyebrow,
#profilePanel > .profile-heading,
#profilePanel > .profile-tracking-note,
#profilePanel .profile-section > h3,
#profilePanel .pre-game-topbar > .home-panel-back {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

#profilePanel .pre-game-topbar,
#profilePanel .pre-game-shortcuts,
#profilePanel .profile-section,
#profilePanel #profileNormalCompletion,
#profilePanel #profileSpecialCompletion,
#profilePanel .panel-bottom-actions {
  display: contents;
}

#profilePanel #profileSummary {
  position: absolute;
  z-index: 2;
  left: 12.75%;
  top: 37%;
  display: grid;
  width: 75%;
  height: 10%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35%;
}

#profilePanel .profile-stat-card {
  display: grid;
  min-height: 0;
  padding: 0 3%;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

#profilePanel .profile-stat-card strong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

#profilePanel .profile-stat-card b {
  color: #704711;
  max-width: 100%;
  font-size: 2.05cqw;
  font-weight: 950;
  line-height: 1;
  text-shadow: none;
  white-space: nowrap;
}

#profilePanel .profile-completion-card,
#profilePanel .profile-special-card,
#profilePanel #achievementsBtn {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 15.92%;
  height: 8.64%;
  min-height: 0;
  padding: .25cqw .55cqw;
  place-content: center;
  place-items: center;
  gap: .18cqw;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #704711;
  font: inherit;
  overflow: hidden;
  text-align: center;
}

#profilePanel .profile-completion-card strong,
#profilePanel .profile-special-card strong,
#profilePanel #achievementsBtn .pre-game-shortcut__label {
  color: #704711;
  font-size: 1.42cqw;
  font-weight: 950;
  line-height: 1.04;
  text-shadow: none;
  white-space: nowrap;
}

#profilePanel .profile-completion-card b,
#profilePanel .profile-special-card b {
  color: #335f65;
  font-size: 1.18cqw;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

#profilePanel .profile-completion-card small,
#profilePanel #achievementsBtn .pre-game-shortcut__icon,
#profilePanel #achievementsBtn small {
  display: none;
}

#profilePanel #profileNormalCompletion .profile-completion-card:nth-child(1) { left: 14.72%; top: 54.69%; }
#profilePanel #profileNormalCompletion .profile-completion-card:nth-child(2) { left: 31.78%; top: 54.69%; }
#profilePanel #profileSpecialCompletion .profile-special-card:nth-child(1) { left: 14.72%; top: 64.17%; }
#profilePanel #profileSpecialCompletion .profile-special-card:nth-child(2) { left: 31.78%; top: 64.17%; }
#profilePanel #profileSpecialCompletion .profile-special-card:nth-child(3) { left: 14.72%; top: 74.29%; }
#profilePanel #profileSpecialCompletion .profile-special-card:nth-child(4) { left: 31.78%; top: 74.29%; }
#profilePanel #profileSpecialCompletion .profile-special-card:nth-child(5) { left: 53.02%; top: 54.69%; }
#profilePanel #profileSpecialCompletion .profile-special-card:nth-child(6) { left: 70.08%; top: 54.69%; }
#profilePanel #profileSpecialCompletion .profile-special-card:nth-child(7) { left: 53.02%; top: 64.17%; }
#profilePanel #profileSpecialCompletion .profile-special-card:nth-child(8) { left: 70.08%; top: 64.17%; }

#profilePanel #achievementsBtn {
  left: 53.02%;
  top: 74.29%;
  cursor: pointer;
}

#profilePanel .panel-bottom-actions .home-panel-back {
  position: absolute;
  z-index: 3;
  top: 84.8%;
  width: 8%;
  height: 11.2%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
}

#profilePanel .panel-bottom-actions .home-panel-back:first-child { left: 11.5%; }
#profilePanel .panel-bottom-actions .home-panel-back:last-child { left: 81.1%; }

#profilePanel #achievementsBtn:hover,
#profilePanel #achievementsBtn:focus-visible,
#profilePanel .panel-bottom-actions .home-panel-back:hover,
#profilePanel .panel-bottom-actions .home-panel-back:focus-visible {
  outline: 3px solid rgba(255, 229, 132, .88);
  outline-offset: -3px;
  filter: brightness(1.08);
  transform: none;
}

@media (max-width: 760px) {
  .intro-card--home:has(#profilePanel:not([hidden])) {
    width: calc(100vw - 8px);
  }
}