/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Cinzel","arguments":[{"subsets":["latin"],"variable":"--font-display","display":"swap","weight":["600","700","800"]}],"variableName":"display"} ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/b497598118275079-s.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;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/a273567b21a7c318-s.p.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;
}
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b497598118275079-s.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;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/a273567b21a7c318-s.p.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;
}
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/b497598118275079-s.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;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/a273567b21a7c318-s.p.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-face {font-family: 'Cinzel Fallback';src: local("Times New Roman");ascent-override: 71.31%;descent-override: 27.18%;line-gap-override: 0.00%;size-adjust: 136.86%
}.__className_e6c2d0 {font-family: 'Cinzel', 'Cinzel Fallback';font-style: normal
}.__variable_e6c2d0 {--font-display: 'Cinzel', 'Cinzel Fallback'
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Sofia_Sans","arguments":[{"subsets":["latin"],"variable":"--font-ui","display":"swap","weight":["400","500","600","700"]}],"variableName":"ui"} ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/c60bf3388410fe0f-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/860045e55157a73d-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/377915621367f354-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/94cb896b59173475-s.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;
}
/* latin */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/825394e9faec38fd-s.p.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/c60bf3388410fe0f-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/860045e55157a73d-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/377915621367f354-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/94cb896b59173475-s.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;
}
/* latin */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/825394e9faec38fd-s.p.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/c60bf3388410fe0f-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/860045e55157a73d-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/377915621367f354-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/94cb896b59173475-s.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;
}
/* latin */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/825394e9faec38fd-s.p.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/c60bf3388410fe0f-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/860045e55157a73d-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/377915621367f354-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/94cb896b59173475-s.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;
}
/* latin */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/825394e9faec38fd-s.p.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-face {font-family: 'Sofia Sans Fallback';src: local("Arial");ascent-override: 93.31%;descent-override: 31.10%;line-gap-override: 0.00%;size-adjust: 96.46%
}.__className_c190fe {font-family: 'Sofia Sans', 'Sofia Sans Fallback';font-style: normal
}.__variable_c190fe {--font-ui: 'Sofia Sans', 'Sofia Sans Fallback'
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"IBM_Plex_Mono","arguments":[{"subsets":["latin"],"weight":["400","500"],"variable":"--font-data","display":"swap"}],"variableName":"data"} ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/58f386aa6b1a2a92-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/011e180705008d6f-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/7ba5fb2a8c88521c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/92eeb95d069020cc-s.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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/d3ebbfd689654d3a-s.p.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ef4d5661765d0e49-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/d29838c109ef09b4-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e40af3453d7c920a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/99dcf268bda04fe5-s.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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/98e207f02528a563-s.p.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-face {font-family: 'IBM Plex Mono Fallback';src: local("Arial");ascent-override: 76.16%;descent-override: 20.43%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_46fe82 {font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback';font-style: normal
}.__variable_46fe82 {--font-data: 'IBM Plex Mono', 'IBM Plex Mono Fallback'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-rose-100: oklch(94.1% 0.03 12.58);
    --color-rose-200: oklch(89.2% 0.058 10.001);
    --color-rose-700: oklch(51.4% 0.222 16.935);
    --color-rose-800: oklch(45.5% 0.188 13.697);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --blur-sm: 8px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-ui);
    --default-mono-font-family: var(--font-data);
    --font-heading: var(--font-display);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .inset-0 {
    inset: 0px;
  }
  .inset-x-0 {
    inset-inline: 0px;
  }
  .inset-y-0 {
    inset-block: 0px;
  }
  .-top-3 {
    top: calc(var(--spacing) * -3);
  }
  .top-0 {
    top: 0px;
  }
  .top-1 {
    top: var(--spacing);
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .top-24 {
    top: calc(var(--spacing) * 24);
  }
  .top-28 {
    top: calc(var(--spacing) * 28);
  }
  .top-36 {
    top: calc(var(--spacing) * 36);
  }
  .top-44 {
    top: calc(var(--spacing) * 44);
  }
  .top-\[5\.5rem\] {
    top: 5.5rem;
  }
  .top-full {
    top: 100%;
  }
  .right-1 {
    right: var(--spacing);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-5 {
    right: calc(var(--spacing) * 5);
  }
  .right-28 {
    right: calc(var(--spacing) * 28);
  }
  .bottom-0 {
    bottom: 0px;
  }
  .bottom-1 {
    bottom: var(--spacing);
  }
  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }
  .bottom-24 {
    bottom: calc(var(--spacing) * 24);
  }
  .left-0 {
    left: 0px;
  }
  .left-1 {
    left: var(--spacing);
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .left-2 {
    left: calc(var(--spacing) * 2);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .left-5 {
    left: calc(var(--spacing) * 5);
  }
  .\!z-30 {
    z-index: 30 !important;
  }
  .z-0 {
    z-index: 0;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[1\] {
    z-index: 1;
  }
  .z-\[45\] {
    z-index: 45;
  }
  .z-\[60\] {
    z-index: 60;
  }
  .z-\[70\] {
    z-index: 70;
  }
  .z-\[80\] {
    z-index: 80;
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-auto {
    margin-top: auto;
  }
  .-mr-2 {
    margin-right: calc(var(--spacing) * -2);
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .ml-1 {
    margin-left: var(--spacing);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .aspect-\[16\/10\] {
    aspect-ratio: 16/10;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .h-52 {
    height: calc(var(--spacing) * 52);
  }
  .h-\[4\.5rem\] {
    height: 4.5rem;
  }
  .h-\[82\%\] {
    height: 82%;
  }
  .h-\[86\%\] {
    height: 86%;
  }
  .h-\[min\(38rem\,calc\(100dvh-8rem\)\)\] {
    height: min(38rem, calc(100dvh - 8rem));
  }
  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }
  .max-h-36 {
    max-height: calc(var(--spacing) * 36);
  }
  .max-h-\[38rem\] {
    max-height: 38rem;
  }
  .max-h-\[calc\(100\%-8rem\)\] {
    max-height: calc(100% - 8rem);
  }
  .max-h-\[calc\(100dvh-1rem\)\] {
    max-height: calc(100dvh - 1rem);
  }
  .max-h-\[min\(40rem\,calc\(100dvh-3rem\)\)\] {
    max-height: min(40rem, calc(100dvh - 3rem));
  }
  .min-h-0 {
    min-height: 0px;
  }
  .min-h-5 {
    min-height: calc(var(--spacing) * 5);
  }
  .min-h-9 {
    min-height: calc(var(--spacing) * 9);
  }
  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }
  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }
  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }
  .min-h-20 {
    min-height: calc(var(--spacing) * 20);
  }
  .min-h-24 {
    min-height: calc(var(--spacing) * 24);
  }
  .min-h-32 {
    min-height: calc(var(--spacing) * 32);
  }
  .min-h-\[48dvh\] {
    min-height: 48dvh;
  }
  .min-h-dvh {
    min-height: 100dvh;
  }
  .min-h-full {
    min-height: 100%;
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-52 {
    width: calc(var(--spacing) * 52);
  }
  .w-72 {
    width: calc(var(--spacing) * 72);
  }
  .w-\[4\.5rem\] {
    width: 4.5rem;
  }
  .w-\[82\%\] {
    width: 82%;
  }
  .w-\[86\%\] {
    width: 86%;
  }
  .w-\[min\(18rem\,calc\(100\%-1\.5rem\)\)\] {
    width: min(18rem, calc(100% - 1.5rem));
  }
  .w-\[min\(21\.75rem\,calc\(100vw-2\.5rem\)\)\] {
    width: min(21.75rem, calc(100vw - 2.5rem));
  }
  .w-\[min\(21rem\,92vw\)\] {
    width: min(21rem, 92vw);
  }
  .w-\[min\(24rem\,calc\(100\%-2rem\)\)\] {
    width: min(24rem, calc(100% - 2rem));
  }
  .w-\[min\(24rem\,calc\(100vw-1rem\)\)\] {
    width: min(24rem, calc(100vw - 1rem));
  }
  .w-\[min\(34rem\,calc\(100vw-2rem\)\)\] {
    width: min(34rem, calc(100vw - 2rem));
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-px {
    width: 1px;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-16 {
    max-width: calc(var(--spacing) * 16);
  }
  .max-w-\[4\.5rem\] {
    max-width: 4.5rem;
  }
  .max-w-\[76rem\] {
    max-width: 76rem;
  }
  .max-w-\[calc\(100\%-2rem\)\] {
    max-width: calc(100% - 2rem);
  }
  .max-w-\[calc\(100\%-13rem\)\] {
    max-width: calc(100% - 13rem);
  }
  .max-w-\[min\(22rem\,calc\(100\%-2rem\)\)\] {
    max-width: min(22rem, calc(100% - 2rem));
  }
  .max-w-\[min\(34rem\,calc\(100\%-2rem\)\)\] {
    max-width: min(34rem, calc(100% - 2rem));
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .min-w-0 {
    min-width: 0px;
  }
  .min-w-9 {
    min-width: calc(var(--spacing) * 9);
  }
  .min-w-11 {
    min-width: calc(var(--spacing) * 11);
  }
  .min-w-16 {
    min-width: calc(var(--spacing) * 16);
  }
  .min-w-40 {
    min-width: calc(var(--spacing) * 40);
  }
  .min-w-44 {
    min-width: calc(var(--spacing) * 44);
  }
  .min-w-64 {
    min-width: calc(var(--spacing) * 64);
  }
  .min-w-\[40rem\] {
    min-width: 40rem;
  }
  .min-w-\[42rem\] {
    min-width: 42rem;
  }
  .min-w-\[44rem\] {
    min-width: 44rem;
  }
  .min-w-\[48rem\] {
    min-width: 48rem;
  }
  .min-w-\[52rem\] {
    min-width: 52rem;
  }
  .min-w-\[56rem\] {
    min-width: 56rem;
  }
  .min-w-max {
    min-width: max-content;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .rotate-45 {
    rotate: 45deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .touch-none {
    touch-action: none;
  }
  .resize {
    resize: both;
  }
  .list-disc {
    list-style-type: disc;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-around {
    justify-content: space-around;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-items-center {
    justify-items: center;
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }
  .gap-y-1 {
    row-gap: var(--spacing);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .self-center {
    align-self: center;
  }
  .self-end {
    align-self: flex-end;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overscroll-contain {
    overscroll-behavior: contain;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-\[2px\] {
    border-radius: 2px;
  }
  .rounded-\[4px\] {
    border-radius: 4px;
  }
  .rounded-\[6px\] {
    border-radius: 6px;
  }
  .rounded-\[8px\] {
    border-radius: 8px;
  }
  .rounded-\[14px\] {
    border-radius: 14px;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-\[\#8e9f8f\] {
    border-color: #8e9f8f;
  }
  .border-\[\#b49a66\] {
    border-color: #b49a66;
  }
  .border-\[\#b79a60\] {
    border-color: #b79a60;
  }
  .border-\[\#b99a5a44\] {
    border-color: #b99a5a44;
  }
  .border-\[\#b99a5a77\] {
    border-color: #b99a5a77;
  }
  .border-\[\#b99a5a\] {
    border-color: #b99a5a;
  }
  .border-\[\#b9614f\] {
    border-color: #b9614f;
  }
  .border-\[\#c4a15a99\] {
    border-color: #c4a15a99;
  }
  .border-\[\#c4a15a\] {
    border-color: #c4a15a;
  }
  .border-\[\#c4a15a\]\/20 {
    border-color: color-mix(in oklab, #c4a15a 20%, transparent);
  }
  .border-\[\#c4a15a\]\/50 {
    border-color: color-mix(in oklab, #c4a15a 50%, transparent);
  }
  .border-\[\#c4a15a\]\/70 {
    border-color: color-mix(in oklab, #c4a15a 70%, transparent);
  }
  .border-\[\#c4a060\] {
    border-color: #c4a060;
  }
  .border-\[\#d2a354\] {
    border-color: #d2a354;
  }
  .border-\[\#d2b45d\] {
    border-color: #d2b45d;
  }
  .border-\[\#d9bd7a66\] {
    border-color: #d9bd7a66;
  }
  .border-\[\#d9bd7a\] {
    border-color: #d9bd7a;
  }
  .border-\[\#ead4a0\] {
    border-color: #ead4a0;
  }
  .border-\[\#ead49a99\] {
    border-color: #ead49a99;
  }
  .border-\[\#ffdb79\] {
    border-color: #ffdb79;
  }
  .border-\[\#ffe1a3\] {
    border-color: #ffe1a3;
  }
  .border-\[color\:var\(--line\)\] {
    border-color: var(--line);
  }
  .border-\[var\(--accent\)\] {
    border-color: var(--accent);
  }
  .border-\[var\(--border\)\] {
    border-color: var(--border);
  }
  .border-\[var\(--border-gold\)\] {
    border-color: var(--border-gold);
  }
  .border-\[var\(--border-strong\)\] {
    border-color: var(--border-strong);
  }
  .border-\[var\(--danger\)\] {
    border-color: var(--danger);
  }
  .border-\[var\(--gold\)\] {
    border-color: var(--gold);
  }
  .border-\[var\(--text-primary\)\] {
    border-color: var(--text-primary);
  }
  .border-amber-500\/40 {
    border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-500) 40%, transparent);
    }
  }
  .border-rose-700 {
    border-color: var(--color-rose-700);
  }
  .border-rose-800 {
    border-color: var(--color-rose-800);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-white\/15 {
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .border-t-\[\#d9bd7a\] {
    border-top-color: #d9bd7a;
  }
  .\!bg-\[\#586338\] {
    background-color: #586338 !important;
  }
  .bg-\[\#2a1818ee\] {
    background-color: #2a1818ee;
  }
  .bg-\[\#2a2218e8\] {
    background-color: #2a2218e8;
  }
  .bg-\[\#2a2218ee\] {
    background-color: #2a2218ee;
  }
  .bg-\[\#2a2218f2\] {
    background-color: #2a2218f2;
  }
  .bg-\[\#2b2118e8\] {
    background-color: #2b2118e8;
  }
  .bg-\[\#3a483b\] {
    background-color: #3a483b;
  }
  .bg-\[\#4a3822\] {
    background-color: #4a3822;
  }
  .bg-\[\#6a422344\] {
    background-color: #6a422344;
  }
  .bg-\[\#101f1b\] {
    background-color: #101f1b;
  }
  .bg-\[\#182b24\] {
    background-color: #182b24;
  }
  .bg-\[\#201c17f2\] {
    background-color: #201c17f2;
  }
  .bg-\[\#211b13f2\] {
    background-color: #211b13f2;
  }
  .bg-\[\#251c11a8\] {
    background-color: #251c11a8;
  }
  .bg-\[\#735a242e\] {
    background-color: #735a242e;
  }
  .bg-\[\#24190ee8\] {
    background-color: #24190ee8;
  }
  .bg-\[\#26382f\] {
    background-color: #26382f;
  }
  .bg-\[\#27382f\] {
    background-color: #27382f;
  }
  .bg-\[\#050608\] {
    background-color: #050608;
  }
  .bg-\[\#121318\] {
    background-color: #121318;
  }
  .bg-\[\#332719\] {
    background-color: #332719;
  }
  .bg-\[\#443522\] {
    background-color: #443522;
  }
  .bg-\[\#503819\] {
    background-color: #503819;
  }
  .bg-\[\#c4a15a\]\/10 {
    background-color: color-mix(in oklab, #c4a15a 10%, transparent);
  }
  .bg-\[\#e4b04bdd\] {
    background-color: #e4b04bdd;
  }
  .bg-\[color-mix\(in_srgb\,var\(--bg-parchment\)_88\%\,\#fff\)\] {
    background-color: var(--bg-parchment);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--bg-parchment) 88%,#fff);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--bg-parchment\)_90\%\,\#fff\)\] {
    background-color: var(--bg-parchment);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--bg-parchment) 90%,#fff);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--bg-wood\)_88\%\,\#000\)\] {
    background-color: var(--bg-wood);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--bg-wood) 88%,#000);
    }
  }
  .bg-\[color\:var\(--bg-parchment-deep\)\]\/55 {
    background-color: var(--bg-parchment-deep);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-parchment-deep) 55%, transparent);
    }
  }
  .bg-\[var\(--accent\)\] {
    background-color: var(--accent);
  }
  .bg-\[var\(--bg-app\)\] {
    background-color: var(--bg-app);
  }
  .bg-\[var\(--bg-panel\)\] {
    background-color: var(--bg-panel);
  }
  .bg-\[var\(--bg-panel-raised\)\] {
    background-color: var(--bg-panel-raised);
  }
  .bg-\[var\(--bg-parchment\)\] {
    background-color: var(--bg-parchment);
  }
  .bg-\[var\(--bg-wood\)\] {
    background-color: var(--bg-wood);
  }
  .bg-\[var\(--bg-wood-dark\)\] {
    background-color: var(--bg-wood-dark);
  }
  .bg-\[var\(--danger\)\] {
    background-color: var(--danger);
  }
  .bg-\[var\(--dp\)\] {
    background-color: var(--dp);
  }
  .bg-\[var\(--gold\)\] {
    background-color: var(--gold);
  }
  .bg-amber-500\/10 {
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }
  .bg-black\/5 {
    background-color: color-mix(in srgb, #000 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }
  .bg-black\/40 {
    background-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .bg-black\/45 {
    background-color: color-mix(in srgb, #000 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 45%, transparent);
    }
  }
  .bg-black\/60 {
    background-color: color-mix(in srgb, #000 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }
  .bg-black\/65 {
    background-color: color-mix(in srgb, #000 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 65%, transparent);
    }
  }
  .bg-black\/70 {
    background-color: color-mix(in srgb, #000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white\/15 {
    background-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-\[radial-gradient\(circle_at_center\,transparent_48\%\,\#15241ccc_100\%\)\] {
    background-image: radial-gradient(circle at center,transparent 48%,#15241ccc 100%);
  }
  .bg-\[radial-gradient\(ellipse_at_center\,\#31483a_0\%\,transparent_65\%\)\] {
    background-image: radial-gradient(ellipse at center,#31483a 0%,transparent 65%);
  }
  .from-\[var\(--bg-panel\)\] {
    --tw-gradient-from: var(--bg-panel);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-\[center_18\%\] {
    object-position: center 18%;
  }
  .object-top {
    object-position: top;
  }
  .p-0 {
    padding: 0px;
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .\!px-1 {
    padding-inline: var(--spacing) !important;
  }
  .px-1 {
    padding-inline: var(--spacing);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: var(--spacing);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-px {
    padding-block: 1px;
  }
  .pt-1 {
    padding-top: var(--spacing);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }
  .pr-20 {
    padding-right: calc(var(--spacing) * 20);
  }
  .pb-1 {
    padding-bottom: var(--spacing);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .align-top {
    vertical-align: top;
  }
  .font-heading {
    font-family: var(--font-display);
  }
  .font-mono {
    font-family: var(--font-data);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[13\.5px\] {
    font-size: 13.5px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[14px\] {
    font-size: 14px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .text-\[16px\] {
    font-size: 16px;
  }
  .text-\[17px\] {
    font-size: 17px;
  }
  .text-\[18px\] {
    font-size: 18px;
  }
  .text-\[20px\] {
    font-size: 20px;
  }
  .text-\[22px\] {
    font-size: 22px;
  }
  .text-\[24px\] {
    font-size: 24px;
  }
  .text-\[28px\] {
    font-size: 28px;
  }
  .text-\[32px\] {
    font-size: 32px;
  }
  .text-\[48px\] {
    font-size: 48px;
  }
  .text-\[56px\] {
    font-size: 56px;
  }
  .text-\[clamp\(3\.5rem\,12vw\,8rem\)\] {
    font-size: clamp(3.5rem, 12vw, 8rem);
  }
  .leading-\[0\.82\] {
    --tw-leading: 0.82;
    line-height: 0.82;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[0\.1em\] {
    --tw-tracking: 0.1em;
    letter-spacing: 0.1em;
  }
  .tracking-\[0\.08em\] {
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
  }
  .tracking-\[0\.12em\] {
    --tw-tracking: 0.12em;
    letter-spacing: 0.12em;
  }
  .tracking-\[0\.14em\] {
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
  }
  .tracking-\[0\.16em\] {
    --tw-tracking: 0.16em;
    letter-spacing: 0.16em;
  }
  .tracking-\[0\.18em\] {
    --tw-tracking: 0.18em;
    letter-spacing: 0.18em;
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .break-all {
    word-break: break-all;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-\[\#2a1b0d\] {
    color: #2a1b0d;
  }
  .text-\[\#5a351c\] {
    color: #5a351c;
  }
  .text-\[\#bfae8f\] {
    color: #bfae8f;
  }
  .text-\[\#c5cdbd\] {
    color: #c5cdbd;
  }
  .text-\[\#c8b487\] {
    color: #c8b487;
  }
  .text-\[\#cab995\] {
    color: #cab995;
  }
  .text-\[\#f3e0b8\] {
    color: #f3e0b8;
  }
  .text-\[\#f3e6c4\] {
    color: #f3e6c4;
  }
  .text-\[\#f8e8c3\] {
    color: #f8e8c3;
  }
  .text-\[\#ffd6c9\] {
    color: #ffd6c9;
  }
  .text-\[\#ffd391\] {
    color: #ffd391;
  }
  .text-\[\#ffeac0\] {
    color: #ffeac0;
  }
  .text-\[\#fff0c8\] {
    color: #fff0c8;
  }
  .text-\[\#fff0d0\] {
    color: #fff0d0;
  }
  .text-\[\#fff4f6\] {
    color: #fff4f6;
  }
  .text-\[var\(--accent\)\] {
    color: var(--accent);
  }
  .text-\[var\(--accent-fury\)\] {
    color: var(--accent-fury);
  }
  .text-\[var\(--accent-lights\)\] {
    color: var(--accent-lights);
  }
  .text-\[var\(--danger\)\] {
    color: var(--danger);
  }
  .text-\[var\(--dp\)\] {
    color: var(--dp);
  }
  .text-\[var\(--exp\)\] {
    color: var(--exp);
  }
  .text-\[var\(--gold\)\] {
    color: var(--gold);
  }
  .text-\[var\(--ink-parchment\)\] {
    color: var(--ink-parchment);
  }
  .text-\[var\(--on-accent\)\] {
    color: var(--on-accent);
  }
  .text-\[var\(--success\)\] {
    color: var(--success);
  }
  .text-\[var\(--text-disabled\)\] {
    color: var(--text-disabled);
  }
  .text-\[var\(--text-primary\)\] {
    color: var(--text-primary);
  }
  .text-\[var\(--text-secondary\)\] {
    color: var(--text-secondary);
  }
  .text-\[var\(--wood-text\)\] {
    color: var(--wood-text);
  }
  .text-amber-100 {
    color: var(--color-amber-100);
  }
  .text-amber-300 {
    color: var(--color-amber-300);
  }
  .text-black {
    color: var(--color-black);
  }
  .text-emerald-300 {
    color: var(--color-emerald-300);
  }
  .text-rose-100 {
    color: var(--color-rose-100);
  }
  .text-rose-200 {
    color: var(--color-rose-200);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/70 {
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .uppercase {
    text-transform: uppercase;
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .underline {
    text-decoration-line: underline;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-90 {
    opacity: 90%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_24px_\#c4a15a33\] {
    --tw-shadow: 0 0 24px var(--tw-shadow-color, #c4a15a33);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_10px_24px_rgba\(8\,12\,8\,0\.4\)\] {
    --tw-shadow: 0 10px 24px var(--tw-shadow-color, rgba(8,12,8,0.4));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.7\)\] {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgba(0,0,0,0.7)));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-\[0_2px_8px_rgba\(0\,0\,0\,0\.78\)\] {
    --tw-drop-shadow-size: drop-shadow(0 2px 8px var(--tw-drop-shadow-color, rgba(0,0,0,0.78)));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-\[0_4px_24px_rgba\(0\,0\,0\,0\.85\)\] {
    --tw-drop-shadow-size: drop-shadow(0 4px 24px var(--tw-drop-shadow-color, rgba(0,0,0,0.85)));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[background-color\,color\] {
    transition-property: background-color,color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[transform\,filter\,background-color\] {
    transition-property: transform,filter,background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[transform\,filter\] {
    transition-property: transform,filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-160 {
    --tw-duration: 160ms;
    transition-duration: 160ms;
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .group-focus-within\:block:is(:where(.group):focus-within *) {
    display: block;
  }
  @media (hover: hover) {
    .group-hover\:block:is(:where(.group):hover *) {
      display: block;
    }
    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 100%;
    }
  }
  .group-focus-visible\:block:is(:where(.group):focus-visible *) {
    display: block;
  }
  .group-focus-visible\:opacity-100:is(:where(.group):focus-visible *) {
    opacity: 100%;
  }
  .file\:mr-3::file-selector-button {
    margin-right: calc(var(--spacing) * 3);
  }
  .file\:rounded-md::file-selector-button {
    border-radius: var(--radius-md);
  }
  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .file\:bg-\[var\(--gold\)\]::file-selector-button {
    background-color: var(--gold);
  }
  .file\:px-3::file-selector-button {
    padding-inline: calc(var(--spacing) * 3);
  }
  .file\:py-1::file-selector-button {
    padding-block: var(--spacing);
  }
  .file\:font-semibold::file-selector-button {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .file\:text-black::file-selector-button {
    color: var(--color-black);
  }
  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  @media (hover: hover) {
    .hover\:border-\[var\(--accent\)\]:hover {
      border-color: var(--accent);
    }
    .hover\:border-\[var\(--border-strong\)\]:hover {
      border-color: var(--border-strong);
    }
    .hover\:border-\[var\(--gold\)\]:hover {
      border-color: var(--gold);
    }
    .hover\:bg-\[\#5a452a\]:hover {
      background-color: #5a452a;
    }
    .hover\:bg-\[\#8a5c3222\]:hover {
      background-color: #8a5c3222;
    }
    .hover\:bg-\[\#31463a\]:hover {
      background-color: #31463a;
    }
    .hover\:bg-\[\#60492a\]:hover {
      background-color: #60492a;
    }
    .hover\:bg-\[color-mix\(in_srgb\,\#000_22\%\,transparent\)\]:hover {
      background-color: color-mix(in srgb,#000 22%,transparent);
    }
    .hover\:bg-\[var\(--bg-app\)\]:hover {
      background-color: var(--bg-app);
    }
    .hover\:bg-\[var\(--bg-panel-raised\)\]:hover {
      background-color: var(--bg-panel-raised);
    }
    .hover\:bg-white\/10:hover {
      background-color: color-mix(in srgb, #fff 10%, transparent);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/10:hover {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    .hover\:text-white:hover {
      color: var(--color-white);
    }
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
    .hover\:brightness-110:hover {
      --tw-brightness: brightness(110%);
      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
  }
  .focus\:border-\[var\(--gold\)\]:focus {
    border-color: var(--gold);
  }
  .focus-visible\:text-white:focus-visible {
    color: var(--color-white);
  }
  .focus-visible\:outline:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }
  .focus-visible\:outline-offset-\[-3px\]:focus-visible {
    outline-offset: -3px;
  }
  .focus-visible\:outline-\[\#8a5c32\]:focus-visible {
    outline-color: #8a5c32;
  }
  .focus-visible\:outline-\[\#f8e6b0\]:focus-visible {
    outline-color: #f8e6b0;
  }
  .focus-visible\:outline-\[\#ffdc87\]:focus-visible {
    outline-color: #ffdc87;
  }
  .focus-visible\:outline-\[\#fff0b8\]:focus-visible {
    outline-color: #fff0b8;
  }
  .focus-visible\:outline-\[var\(--gold\)\]:focus-visible {
    outline-color: var(--gold);
  }
  .active\:scale-\[0\.97\]:active {
    scale: 0.97;
  }
  .active\:scale-\[0\.99\]:active {
    scale: 0.99;
  }
  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }
  .disabled\:opacity-40:disabled {
    opacity: 40%;
  }
  .disabled\:opacity-50:disabled {
    opacity: 50%;
  }
  .disabled\:opacity-60:disabled {
    opacity: 60%;
  }
  @media (hover: hover) {
    .disabled\:hover\:brightness-100:disabled:hover {
      --tw-brightness: brightness(100%);
      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-safe\:animate-spin {
      animation: var(--animate-spin);
    }
  }
  @media (width < 40rem) {
    .max-sm\:top-28 {
      top: calc(var(--spacing) * 28);
    }
    .max-sm\:top-\[15rem\] {
      top: 15rem;
    }
    .max-sm\:top-auto {
      top: auto;
    }
    .max-sm\:right-2 {
      right: calc(var(--spacing) * 2);
    }
    .max-sm\:bottom-2 {
      bottom: calc(var(--spacing) * 2);
    }
    .max-sm\:bottom-28 {
      bottom: calc(var(--spacing) * 28);
    }
    .max-sm\:left-2 {
      left: calc(var(--spacing) * 2);
    }
    .max-sm\:max-h-\[43vh\] {
      max-height: 43vh;
    }
    .max-sm\:w-auto {
      width: auto;
    }
    .max-sm\:max-w-\[calc\(100\%-1rem\)\] {
      max-width: calc(100% - 1rem);
    }
    .max-sm\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .max-sm\:px-2 {
      padding-inline: calc(var(--spacing) * 2);
    }
    .max-sm\:text-\[11px\] {
      font-size: 11px;
    }
  }
  @media (width >= 380px) {
    .min-\[380px\]\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (width >= 420px) {
    .min-\[420px\]\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (width >= 40rem) {
    .sm\:top-5 {
      top: calc(var(--spacing) * 5);
    }
    .sm\:right-4 {
      right: calc(var(--spacing) * 4);
    }
    .sm\:right-8 {
      right: calc(var(--spacing) * 8);
    }
    .sm\:left-auto {
      left: auto;
    }
    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }
    .sm\:inline {
      display: inline;
    }
    .sm\:h-32 {
      height: calc(var(--spacing) * 32);
    }
    .sm\:h-52 {
      height: calc(var(--spacing) * 52);
    }
    .sm\:max-h-\[calc\(100dvh-2rem\)\] {
      max-height: calc(100dvh - 2rem);
    }
    .sm\:w-\[min\(24rem\,calc\(100vw-2rem\)\)\] {
      width: min(24rem, calc(100vw - 2rem));
    }
    .sm\:w-\[min\(38rem\,47vw\)\] {
      width: min(38rem, 47vw);
    }
    .sm\:w-auto {
      width: auto;
    }
    .sm\:min-w-40 {
      min-width: calc(var(--spacing) * 40);
    }
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .sm\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    .sm\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
      grid-template-columns: minmax(0,1fr) auto;
    }
    .sm\:flex-row {
      flex-direction: row;
    }
    .sm\:items-center {
      align-items: center;
    }
    .sm\:items-end {
      align-items: flex-end;
    }
    .sm\:justify-between {
      justify-content: space-between;
    }
    .sm\:p-4 {
      padding: calc(var(--spacing) * 4);
    }
    .sm\:p-5 {
      padding: calc(var(--spacing) * 5);
    }
    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
    .sm\:px-3 {
      padding-inline: calc(var(--spacing) * 3);
    }
    .sm\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
    .sm\:py-5 {
      padding-block: calc(var(--spacing) * 5);
    }
    .sm\:pr-24 {
      padding-right: calc(var(--spacing) * 24);
    }
    .sm\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
    .sm\:text-\[30px\] {
      font-size: 30px;
    }
  }
  @media (width >= 48rem) {
    .md\:right-8 {
      right: calc(var(--spacing) * 8);
    }
    .md\:bottom-8 {
      bottom: calc(var(--spacing) * 8);
    }
    .md\:left-8 {
      left: calc(var(--spacing) * 8);
    }
    .md\:block {
      display: block;
    }
    .md\:max-h-none {
      max-height: none;
    }
    .md\:min-h-0 {
      min-height: 0px;
    }
    .md\:min-h-dvh {
      min-height: 100dvh;
    }
    .md\:w-48 {
      width: calc(var(--spacing) * 48);
    }
    .md\:w-\[min\(46rem\,calc\(100vw-2rem\)\)\] {
      width: min(46rem, calc(100vw - 2rem));
    }
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-\[minmax\(12rem\,1fr\)_12rem_auto\] {
      grid-template-columns: minmax(12rem,1fr) 12rem auto;
    }
    .md\:flex-row {
      flex-direction: row;
    }
    .md\:items-end {
      align-items: flex-end;
    }
    .md\:border-r {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
    .md\:border-b-0 {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
    .md\:text-\[18px\] {
      font-size: 18px;
    }
  }
  @media (width >= 64rem) {
    .lg\:h-56 {
      height: calc(var(--spacing) * 56);
    }
    .lg\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-\[16rem_minmax\(0\,1fr\)\] {
      grid-template-columns: 16rem minmax(0,1fr);
    }
  }
  @media (width >= 80rem) {
    .xl\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .xl\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
}
:root {
  --bg-app: #5a3820;
  --bg-panel: #f3e4c4;
  --bg-panel-raised: #f8edd4;
  --bg-wood: #5c3a22;
  --bg-wood-dark: #3d2614;
  --bg-parchment: #f4e6c8;
  --ink-parchment: #4a3218;
  --wood-text: #f3e4c4;
  --border: #c4a060;
  --border-strong: #a07838;
  --border-gold: #d4ae62;
  --text-primary: #3d2a16;
  --text-secondary: #6a4e2c;
  --text-disabled: #8a7050;
  --accent-fury: #e07028;
  --accent-lights: #3d8aaa;
  --accent: var(--accent-fury);
  --on-accent: #fff8e8;
  --gold: #b8862e;
  --crystal: #4a6aaa;
  --piranha: #c2642e;
  --dp: #b8445c;
  --hp: #b42820;
  --energy: #2d6a2c;
  --exp: #8a5a22;
  --success: #3d8a48;
  --danger: #c0392b;
  --rarity-common: #8a7050;
  --rarity-fine: #3d8a48;
  --rarity-rare: #3d6aaa;
  --rarity-epic: #8a3aaa;
  --rarity-legendary: #d18a24;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --wood-grain: url("/ui/chrome/wood-board.jpg");
  --parchment-paper: url("/ui/chrome/parchment.jpg");
  --vale-art: url("/ui/backdrops/vale.jpg");
  --keep-stone: url("/ui/chrome/keep-stone.jpg");
  --bg-stone: #e2d3b8;
}
html {
  color-scheme: light;
  background: var(--bg-app);
}
body {
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-ui), ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  caret-color: var(--gold);
}
::selection {
  background: var(--gold);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--gold) 42%, #3a2410);
  }
  color: var(--text-primary);
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-wood);
}
::-webkit-scrollbar-thumb {
  background: #5a3c20;
  border: 1px solid var(--border-gold);
  border-radius: 4px;
}
h1 {
  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
  text-wrap: balance;
}
[data-faction="FURY"] {
  --accent: var(--accent-fury);
}
[data-faction="LIGHTS"] {
  --accent: var(--accent-lights);
}
.font-data {
  font-family: var(--font-data), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
@keyframes forge-flash-success {
  0% {
    box-shadow: inset 0 0 4.5rem rgba(255, 226, 170, 0.22);
  }
  100% {
    box-shadow: none;
  }
}
@keyframes forge-flash-fail {
  0% {
    box-shadow: inset 0 0 4.5rem rgba(176, 48, 32, 0.22);
  }
  100% {
    box-shadow: none;
  }
}
@keyframes forge-slot-success {
  0% {
    transform: scale(0.78) rotate(-5deg);
    filter: brightness(2);
  }
  32% {
    transform: translateY(-7px) scale(1.12) rotate(2deg);
    filter: brightness(1.45) drop-shadow(0 0 12px #ffd780);
  }
  65% {
    transform: translateY(-4px) scale(1.04);
    filter: brightness(1.12) drop-shadow(0 0 7px #ffd780);
  }
  100% {
    transform: scale(1);
    filter: none;
  }
}
@keyframes forge-ring-success {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 226, 170, 0.95),
      0 0 28px rgba(243, 226, 176, 0.55),
      inset 0 0 1.8rem rgba(255, 214, 120, 0.42);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(232, 206, 130, 0.92),
      0 0 18px rgba(243, 226, 176, 0.28),
      0 10px 22px rgba(8, 4, 2, 0.48),
      inset 0 1px 0 rgba(255, 226, 170, 0.34),
      inset 0 0 0 1px rgba(62, 36, 12, 0.55);
  }
}
@keyframes forge-spark {
  0% {
    opacity: 0.95;
    transform: scale(0.35);
  }
  55% {
    opacity: 0.7;
    transform: scale(1.18);
  }
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}
@keyframes forge-mark-pop {
  0% {
    transform: scale(0.7);
    color: #fff4c8;
  }
  50% {
    transform: scale(1.28);
    color: #ffe7a0;
  }
  100% {
    transform: scale(1);
    color: #fff;
  }
}
@keyframes amulet-altar-pulse {
  0%,
  100% {
    filter: brightness(1);
    box-shadow: inset 0 0 0 2px #f2e3bc,
      inset 0 0 0 3px #b3905c,
      inset 0 2px 4px rgba(90, 60, 20, 0.18),
      0 1px 0 rgba(255, 250, 230, 0.5),
      0 6px 14px rgba(8, 12, 8, 0.35);
  }
  50% {
    filter: brightness(1.1);
    box-shadow: inset 0 0 0 2px #f7ecd0,
      inset 0 0 0 3px #c4a56a,
      inset 0 0 1rem rgba(255, 214, 120, 0.22),
      0 0 0 1px rgba(232, 206, 130, 0.55),
      0 0 18px rgba(243, 226, 176, 0.28);
  }
}
@keyframes amulet-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes forge-slot-shake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  18% {
    transform: translateX(-6px) rotate(-2.2deg);
  }
  36% {
    transform: translateX(6px) rotate(2deg);
  }
  54% {
    transform: translateX(-4px) rotate(-1.2deg);
  }
  72% {
    transform: translateX(3px) rotate(0.8deg);
  }
}
@keyframes forge-bot-fail {
  0% {
    filter: grayscale(0) brightness(1.2);
    opacity: 1;
    transform: scale(1.04);
  }
  40% {
    filter: grayscale(0.45) brightness(0.92);
    opacity: 0.82;
    transform: scale(0.97) rotate(-1.4deg);
  }
  100% {
    filter: grayscale(1);
    opacity: 0.55;
    transform: none;
  }
}
@keyframes forge-crack {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  28% {
    opacity: 0.95;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0.18;
    stroke-dashoffset: 0;
  }
}
@keyframes forge-channel-break {
  0%, 24% {
    opacity: 1;
  }
  16%, 42% {
    opacity: 0.12;
  }
  32%, 56% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.38;
  }
}
@keyframes forge-cost-result {
  0% {
    filter: brightness(1.35);
  }
  100% {
    filter: none;
  }
}
.forge-flash-success {
  animation: forge-flash-success 720ms var(--ease-out);
}
.forge-flash-fail {
  animation: forge-flash-fail 720ms var(--ease-out);
}
.forge-flash-success .forge-anvil-bot .forge-anvil-frame {
  border-color: rgba(255, 226, 170, 0.95);
  box-shadow: 0 0 0 1px rgba(232, 206, 130, 0.92),
    0 0 18px rgba(243, 226, 176, 0.28),
    0 10px 22px rgba(8, 4, 2, 0.48),
    inset 0 1px 0 rgba(255, 226, 170, 0.34),
    inset 0 0 0 1px rgba(62, 36, 12, 0.55);
  animation: forge-ring-success 900ms var(--ease-out);
}
.forge-flash-success .forge-anvil-bot .forge-anvil-item {
  animation: forge-slot-success 1200ms var(--ease-out);
}
.forge-flash-success .forge-anvil-bot .item-upgrade-mark {
  animation: forge-mark-pop 700ms var(--ease-out);
}
.forge-flash-success .forge-anvil-bot .forge-anvil-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
      circle at 50% 48%,
      rgba(255, 226, 170, 0.55) 0%,
      rgba(232, 186, 92, 0.18) 38%,
      transparent 68%
    );
  animation: forge-spark 820ms var(--ease-out) forwards;
}
.forge-flash-success .amulet-scheme-jewel {
  animation: forge-ring-success 900ms var(--ease-out);
}
.forge-flash-success .amulet-scheme-item {
  animation: forge-slot-success 1200ms var(--ease-out);
}
.forge-flash-success .amulet-scheme-level-n,
.forge-flash-success .amulet-scheme-well .item-amulet-level {
  animation: forge-mark-pop 700ms var(--ease-out);
}
.forge-flash-success .amulet-scheme-well::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
      circle at 50% 48%,
      rgba(255, 226, 170, 0.55) 0%,
      rgba(232, 186, 92, 0.18) 38%,
      transparent 68%
    );
  animation: forge-spark 820ms var(--ease-out) forwards;
}
.forge-flash-success .amulet-scheme-progress {
  filter: drop-shadow(0 0 8px #ffd780);
}
.forge-flash-success .amulet-scheme-hearth {
  opacity: 1;
  transform: scale(1.28);
}
.forge-flash-fail .forge-anvil-top .forge-anvil-frame {
  border-color: rgba(224, 110, 84, 0.88);
  animation: forge-slot-shake 560ms var(--ease-out);
}
.forge-anvil.is-flow-break.forge-flash-fail .forge-anvil-bot .forge-anvil-frame {
  animation: forge-bot-fail 760ms var(--ease-out) forwards;
}
.forge-flash-success .forge-anvil-cost,
.forge-flash-fail .forge-anvil-cost {
  animation: forge-cost-result 640ms var(--ease-out);
}
.forge-anvil-chance[data-kind="success"] {
  color: #d7e8b0;
}
.forge-anvil-chance[data-kind="fail"] {
  color: #efb4a4;
}
.forge-smith {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.forge-upgrade {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  padding: 0.35rem 0 0;
}
.forge-upgrade-gear {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.55rem;
  max-width: 11rem;
}
.forge-gear-tile {
  display: flex;
  width: 4.5rem;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0.2rem 0.12rem 0.18rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.forge-gear-tile:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.forge-gear-tile:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 2px;
}
.forge-gear-tile[data-selected="true"] {
  background: rgba(225, 158, 55, 0.16);
  box-shadow: inset 0 0 0 2px rgba(243, 226, 176, 0.88),
    0 0 12px rgba(212, 174, 98, 0.28);
}
.forge-mode-tabs {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  align-items: stretch;
  gap: 0.2rem;
  width: max-content;
  max-width: 100%;
  margin: 0.15rem auto 0.75rem;
  padding: 0.2rem;
  border: 1px solid rgba(232, 206, 130, 0.55);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(62, 36, 16, 0.94), rgba(16, 9, 5, 0.96));
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.35),
    inset 0 1px 0 rgba(255, 226, 170, 0.2),
    inset 0 0 0 1px rgba(74, 48, 16, 0.55);
}
.forge-mode-tab {
  position: relative;
  display: inline-flex;
  min-height: 2.45rem;
  min-width: 7.35rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.4rem 1.1rem 0.42rem;
  border: 1px solid rgba(212, 174, 98, 0.3);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(42, 24, 12, 0.4), rgba(10, 6, 4, 0.22));
  color: #cbb48a;
  cursor: pointer;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.forge-mode-tab:hover:not(:disabled) {
  color: #fff1c4;
  border-color: rgba(243, 226, 176, 0.58);
}
.forge-mode-tab:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.forge-mode-tab:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 2px;
}
.forge-mode-tab[data-selected="true"] {
  color: #fff6d4;
  background: linear-gradient(180deg, rgba(232, 190, 96, 0.44), rgba(138, 86, 28, 0.52));
  border-color: rgba(243, 226, 176, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.38),
    0 0 14px rgba(212, 174, 98, 0.32);
}
.forge-mode-tab[data-selected="true"]::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: 0.28rem;
  left: 0.75rem;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #ffe7a8, transparent);
  box-shadow: 0 0 6px rgba(255, 226, 170, 0.55);
}
.forge-gear-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 100%;
  min-height: 2.4em;
  margin-top: 0.28rem;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: break-word;
}
.forge-upgrade-identity {
  display: none;
}
.forge-anvil {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 1;
  display: grid;
  overflow: visible;
  width: min(50rem, 88%);
  grid-template-columns: 8.5rem minmax(13rem, 1fr) 8.5rem;
  grid-template-rows: auto auto auto auto;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 0.85rem 1.35rem;
  padding: 0.35rem;
  transform: translate(-50%, -50%);
}
.forge-anvil-channels {
  position: absolute;
  top: 0;
  left: 50%;
  pointer-events: none;
  z-index: 0;
  width: 26rem;
  height: 100%;
  overflow: visible;
  transform: translateX(-50%);
}
.forge-anvil-channels * {
  transition-property: none;
}
.forge-channel-trim,
.forge-channel-well {
  fill: none;
  stroke-linecap: round;
}
.forge-channel-trim {
  stroke: #a58342;
  stroke-width: 5.8;
  opacity: 0.18;
}
.forge-channel-well {
  stroke: #130e0a;
  stroke-width: 4.8;
  opacity: 0.95;
}
.forge-channel-energy {
  opacity: 0;
}
.forge-channel-mask,
.forge-channel-aura,
.forge-channel-fill,
.forge-channel-core {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.forge-channel-mask {
  stroke: #fff;
  stroke-width: 7;
}
.forge-channel-aura {
  stroke: var(--channel-color);
  stroke-width: 8;
  opacity: 0.3;
  filter: blur(2px);
}
.forge-channel-fill {
  stroke-width: 3.1;
  filter: drop-shadow(0 0 2px var(--channel-color));
}
.forge-channel-core {
  stroke: var(--channel-light);
  stroke-width: 0.75;
  opacity: 0.75;
}
.forge-anvil-channels:is(.is-flowing, .is-flow-ok) .forge-channel-energy {
  opacity: 1;
}
.forge-channel-current {
  fill: none;
  stroke: #f5fff3;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-dasharray: 0.018 0.055 0.004 0.103;
  opacity: 0;
}
.forge-anvil[data-forging="true"] .forge-channel-current {
  opacity: 0.9;
  animation: forge-channel-current 1150ms linear infinite;
}
.forge-anvil[data-forging="true"] .forge-channel-current-echo {
  stroke: var(--channel-light);
  stroke-width: 3.8;
  stroke-dasharray: 0.002 0.178;
  animation-duration: 1700ms;
  animation-delay: -650ms;
}
.forge-channel-head-halo {
  fill: var(--channel-color);
  opacity: 0.55;
  filter: blur(2px);
}
.forge-channel-head-flare {
  fill: var(--channel-light);
  filter: drop-shadow(0 0 2px var(--channel-color));
}
.forge-channel-head-heart {
  fill: #fffef0;
}
.forge-anvil[data-forging="true"] .forge-channel-head-flare {
  animation: forge-channel-flare 480ms ease-in-out infinite alternate;
}
.forge-channel-mote {
  fill: var(--channel-light);
  opacity: 0;
}
.forge-anvil[data-forging="true"] .forge-channel-mote {
  animation: forge-channel-mote 750ms ease-out var(--mote-delay) infinite;
}
.forge-channel-discharge,
.forge-channel-fracture {
  fill: none;
  stroke: var(--channel-light);
  stroke-width: 0.8;
  opacity: 0;
}
.forge-anvil-channels.is-flow-ok .forge-channel-energy {
  animation: forge-channel-delivery 850ms ease-out;
}
.forge-anvil-channels:is(.is-flow-ok, .is-flow-break) .forge-channel-beacon {
  opacity: 0;
  animation: forge-channel-extinguish 450ms ease-out;
}
.forge-anvil-channels.is-flow-ok .forge-channel-discharge {
  animation: forge-channel-discharge 650ms ease-out;
}
.forge-anvil-channels.is-flow-break .forge-channel-energy {
  opacity: 0.38;
  animation: forge-channel-break 700ms ease-out;
}
.forge-anvil-channels.is-flow-break .forge-channel-fracture {
  stroke: #ffd1a0;
  animation: forge-channel-extinguish 600ms ease-out;
}
@keyframes forge-channel-current {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -0.36;
  }
}
@keyframes forge-channel-flare {
  from {
    opacity: 0.75;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1.15);
  }
}
@keyframes forge-channel-mote {
  0% {
    opacity: 0;
    transform: translate(-2px, 0) scale(0.3);
  }
  18% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(var(--mote-x), var(--mote-y)) scale(0.15);
  }
}
@keyframes forge-channel-delivery {
  0%, 25% {
    filter: brightness(1.8) drop-shadow(0 0 3px #fff2b1);
  }
  100% {
    filter: brightness(1);
  }
}
@keyframes forge-channel-extinguish {
  0%, 15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes forge-channel-discharge {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(4);
  }
}
html[data-motion="reduce"] .forge-anvil-channels * {
  animation: none !important;
}
html[data-motion="reduce"] .forge-anvil-channels :is(.forge-channel-current, .forge-channel-mote, .forge-channel-head) {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .forge-anvil-channels * {
    animation: none !important;
  }
  html:not([data-motion="full"]) .forge-anvil-channels :is(.forge-channel-current, .forge-channel-mote, .forge-channel-head) {
    display: none;
  }
}
.forge-anvil.is-flow-break .forge-anvil-bot .forge-anvil-frame {
  filter: grayscale(1);
  opacity: 0.55;
}
.forge-anvil-top {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
}
.forge-anvil-bot {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 4;
}
.forge-anvil-piranha {
  z-index: 1;
  grid-column: 1;
  grid-row: 2;
  transform: translateX(-0.65rem);
}
.forge-anvil-action {
  z-index: 4;
  display: flex;
  grid-column: 2;
  grid-row: 2;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  overflow: visible;
}
.forge-anvil-tools-row {
  z-index: 5;
  display: flex;
  grid-column: 1 / -1;
  grid-row: 3;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.forge-anvil-action .forge-anvil-chance {
  display: grid;
  min-height: 1.55em;
  margin: 0;
  align-items: center;
  line-height: 1.35;
  text-align: center;
}
.forge-upgrade-button {
  width: 9rem;
  height: 2.75rem;
}
.forge-anvil-sledges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 0.85rem;
  width: 100%;
  min-width: 0;
}
.forge-anvil-tools {
  flex-wrap: nowrap;
  gap: 0.35rem 0.55rem;
}
.forge-anvil-tools .forge-anvil-sledge {
  flex: 0 0 auto;
  min-width: 4.1rem;
}
.forge-anvil-sledge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  padding: 0.18rem 0.42rem 0.28rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #f3e2b0;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.forge-anvil-sledge-row {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.forge-anvil-sledge.is-selected {
  border-color: color-mix(in srgb, #f3e2b0 55%, transparent);
  background: color-mix(in srgb, #f3e2b0 12%, transparent);
}
.forge-anvil-sledge:has(input:disabled) {
  cursor: default;
}
.forge-anvil-sledge-label {
  color: #c9b38e;
  font-family: var(--font-ui), ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.forge-anvil-sledge.is-missing {
  color: var(--danger);
}
.forge-anvil-sledge-icon {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
}
.forge-anvil-sledge-check {
  position: relative;
  display: grid;
  place-items: center;
  width: 0.92rem;
  height: 0.92rem;
}
.forge-anvil-sledge-check input {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.forge-anvil-sledge-check input:disabled {
  cursor: default;
}
.forge-anvil-sledge-check > span {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(232, 206, 130, 0.72);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(62, 36, 16, 0.94), rgba(16, 9, 5, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 226, 170, 0.22),
    0 1px 2px rgba(8, 4, 2, 0.45);
  pointer-events: none;
}
.forge-anvil-sledge-check input:checked + span {
  background: linear-gradient(180deg, #f6e4b0, #c79a4a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 230, 0.55),
    0 0 6px rgba(232, 206, 130, 0.28);
}
.forge-anvil-sledge-check input:checked + span::after {
  content: "";
  display: block;
  width: 0.22rem;
  height: 0.4rem;
  margin: 0.04rem auto 0;
  border-right: 2px solid #3a220c;
  border-bottom: 2px solid #3a220c;
  transform: rotate(42deg);
}
.forge-anvil-sledge-check input:focus-visible + span {
  outline: 2px solid #f3e2b0;
  outline-offset: 1px;
}
.forge-anvil-sledge.is-missing .forge-anvil-sledge-check > span {
  border-color: var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--danger) 55%, #6a3018);
  }
}
.forge-anvil-sledge-check input:disabled + span {
  opacity: 0.45;
}
.forge-result-caption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: #ffdf91;
  text-shadow: 0 0 16px #c47b3480, 0 2px 4px #100904;
  animation: forge-caption-reveal 480ms var(--ease-out) both;
}
.forge-result-caption strong {
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.forge-result-caption span {
  color: #f5e9cb;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.forge-anvil-chance[data-kind="fail"] .forge-result-caption {
  color: #f7ad8a;
  text-shadow: 0 0 14px #b5352960, 0 2px 4px #100904;
}
.forge-result-effect {
  --forge-result-color: #ffda83;
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  font-size: 1rem;
  color: var(--forge-result-color);
}
.forge-result-effect[data-kind="fail"] {
  --forge-result-color: #f18a51;
}
.forge-result-glow {
  position: absolute;
  inset: -65%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8dfe0, #fbbb4e65 30%, transparent 65%);
  opacity: 0;
  mix-blend-mode: screen;
  animation: forge-result-bloom 1600ms ease-out both;
}
.forge-result-effect[data-kind="fail"] .forge-result-glow {
  background: radial-gradient(circle, #ffa57180, #b3382240 32%, transparent 65%);
  animation-duration: 650ms;
}
.forge-result-wave {
  position: absolute;
  inset: -4%;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor, inset 0 0 8px currentColor;
  opacity: 0;
  animation: forge-result-wave 1300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.forge-result-wave-echo {
  border-width: 1px;
  animation-delay: 240ms;
}
.forge-result-halo {
  position: absolute;
  inset: -18%;
  width: 136%;
  height: 136%;
  stroke: currentColor;
  stroke-width: 0.8;
  filter: drop-shadow(0 0 4px #ffbd63);
  animation: forge-halo-reveal 2300ms ease-out both;
}
.forge-result-halo path {
  fill: #fff2b8;
}
.forge-result-halo .forge-result-sigil {
  fill: none;
  stroke-width: 0.45;
  opacity: 0.5;
}
.forge-result-impact {
  position: absolute;
  inset: 41% -85%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fffef7 0 5%, #ffeaba 12%, #ffbc4a75 30%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: forge-impact-flare 680ms ease-out both;
}
.forge-result-effect[data-kind="fail"] .forge-result-impact {
  background: radial-gradient(ellipse, #ffecd1 0 4%, #ff9b5870 20%, #ed49234d 35%, transparent 65%);
  animation-duration: 420ms;
}
.forge-result-rays {
  position: absolute;
  inset: -85%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 4deg, transparent 0deg 15deg, #ffdb805e 17deg, #fff4beaa 19deg, transparent 22deg 30deg);
  mask-image: radial-gradient(circle, transparent 23%, #000 32%, #0008 48%, transparent 69%);
  mix-blend-mode: screen;
  animation: forge-rays-unfold 2200ms ease-out both;
}
.forge-result-pillar {
  position: absolute;
  top: -135%;
  right: 12%;
  bottom: 18%;
  left: 12%;
  background: linear-gradient(90deg, transparent, #edb94422 18%, #ffe6a085 44%, #fff8d9cc 50%, #ffe6a085 56%, #edb94422 82%, transparent);
  mask-image: linear-gradient(transparent, #000 65%, transparent);
  transform-origin: center bottom;
  mix-blend-mode: screen;
  animation: forge-pillar-rise 1400ms ease-out both;
}
.forge-result-sweep {
  position: absolute;
  inset: 9%;
  overflow: hidden;
  border-radius: 18%;
  mix-blend-mode: screen;
}
.forge-result-sweep::after {
  content: "";
  position: absolute;
  inset: -40% -80%;
  background: linear-gradient(110deg, transparent 40%, #fff8d940 47%, #fff8d9c9 50%, transparent 58%);
  animation: forge-steel-sweep 1000ms 160ms ease-out both;
}
.forge-result-orbit {
  position: absolute;
  inset: -36%;
  width: 172%;
  height: 172%;
  stroke: #ffdc96;
  stroke-width: 1.2;
  filter: drop-shadow(0 0 5px #e58b3a);
  animation: forge-orbit-turn 2100ms 90ms ease-out both;
}
.forge-result-cinders {
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  border: 3px dashed #e9935970;
  box-shadow: inset 0 0 18px #c93b2260, 0 0 20px #c93b2230;
  animation: forge-cinder-collapse 950ms ease-out both;
}
.forge-result-smoke {
  position: absolute;
  left: calc(50% - 1.5em);
  top: 30%;
  width: 3em;
  height: 4em;
  border-radius: 50%;
  background: radial-gradient(ellipse, #856d6390, #3e292bcc 35%, #24191c60 55%, transparent 72%);
  filter: blur(4px);
  opacity: 0;
  animation: forge-smoke-rise 1900ms var(--smoke-delay) ease-out both;
}
.forge-result-shard {
  position: absolute;
  top: 46%;
  left: 46%;
  width: 0.7em;
  height: 1.35em;
  clip-path: polygon(12% 0, 100% 23%, 68% 100%, 0 65%);
  background: linear-gradient(125deg, #ffe2a0, #d66b3a 26%, #493331 55%, #af6851 80%);
  opacity: 0;
  animation: forge-shard-scatter 1300ms ease-out both;
}
.forge-anvil[data-forging="true"] .forge-anvil-top .forge-anvil-frame::before {
  content: "";
  position: absolute;
  inset: -8%;
  border: 1px solid #e9b96b25;
  border-top: 2px solid #ffe5a7;
  border-bottom: 2px solid #e5a246;
  border-radius: 50%;
  box-shadow: 0 0 15px #f9bf5940, inset 0 0 15px #f9bf5920;
  pointer-events: none;
  animation: forge-charge-orbit 1200ms linear infinite;
}
.forge-anvil[data-forging="true"] .forge-anvil-top .forge-anvil-item {
  animation: forge-charge-breathe 1100ms ease-in-out infinite alternate;
}
.forge-result-fracture {
  position: absolute;
  inset: 9%;
  width: 82%;
  height: 82%;
  stroke: #ffbb88;
  stroke-width: 1.1;
  stroke-linejoin: bevel;
  stroke-dasharray: 1;
  filter: drop-shadow(0 0 4px #ed5e32);
  animation: forge-crack 1200ms ease-out both;
}
.forge-result-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 7px;
  margin: -3px 0 0 -1px;
  border-radius: 60%;
  background: #fff3c0;
  box-shadow: 0 0 5px 1px var(--forge-result-color);
  opacity: 0;
  animation: forge-particle-rise 1850ms var(--spark-delay) cubic-bezier(0.12, 0.65, 0.3, 1) both;
}
.forge-result-particle:nth-of-type(3n) {
  width: 5px;
  height: 5px;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.forge-result-effect[data-kind="fail"] .forge-result-particle {
  background: #ec9b69;
  border-radius: 1px;
  animation-name: forge-particle-fall;
  animation-duration: 1400ms;
}
@keyframes forge-result-bloom {
  0% {
    opacity: 0;
    transform: scale(0.45);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}
@keyframes forge-result-wave {
  0% {
    opacity: 0;
    transform: scale(0.65);
  }
  12% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: scale(1.65);
  }
}
@keyframes forge-halo-reveal {
  0% {
    opacity: 0;
    transform: scale(0.82) rotate(-24deg);
  }
  15%, 55% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: scale(1.18) rotate(40deg);
  }
}
@keyframes forge-impact-flare {
  0% {
    opacity: 0;
    transform: scaleX(0.1) scaleY(1.8);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scaleX(1.25) scaleY(0.2);
  }
}
@keyframes forge-rays-unfold {
  0% {
    opacity: 0;
    transform: scale(0.35) rotate(-18deg);
  }
  18% {
    opacity: 0.9;
  }
  55% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: scale(1.1) rotate(35deg);
  }
}
@keyframes forge-pillar-rise {
  0% {
    opacity: 0;
    transform: scaleY(0.05) scaleX(0.4);
  }
  25% {
    opacity: 0.85;
    transform: scaleY(1) scaleX(0.75);
  }
  100% {
    opacity: 0;
    transform: scaleY(1.15) scaleX(1.3);
  }
}
@keyframes forge-steel-sweep {
  0% {
    opacity: 0;
    transform: translateX(-45%);
  }
  15%, 55% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateX(45%);
  }
}
@keyframes forge-orbit-turn {
  0% {
    opacity: 0;
    transform: scale(0.65) rotate(60deg);
  }
  20%, 50% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: scale(1.14) rotate(-45deg);
  }
}
@keyframes forge-cinder-collapse {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  18% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.35) rotate(28deg);
  }
}
@keyframes forge-smoke-rise {
  0% {
    opacity: 0;
    transform: translate(0, 1em) scale(0.4);
  }
  25% {
    opacity: 0.65;
  }
  100% {
    opacity: 0;
    transform: translate(var(--smoke-x), -4em) scale(2) rotate(var(--smoke-turn));
  }
}
@keyframes forge-shard-scatter {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  12% {
    opacity: 1;
  }
  45% {
    opacity: 0.9;
    transform: translate(var(--shard-x), var(--shard-y)) rotate(var(--shard-turn));
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--shard-x) * 1.25), calc(var(--shard-y) + 3em)) rotate(calc(var(--shard-turn) * 1.8)) scale(0.3);
  }
}
@keyframes forge-charge-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes forge-charge-breathe {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.25) drop-shadow(0 0 8px #f5ba56);
  }
}
@keyframes forge-particle-rise {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.4);
  }
  10% {
    opacity: 1;
  }
  55% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(var(--spark-x), calc(var(--spark-y) - 1.5em)) rotate(var(--spark-turn)) scale(0.2);
  }
}
@keyframes forge-particle-fall {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1.3);
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 0.75;
    transform: translate(calc(var(--spark-x) * 0.65), calc(var(--spark-y) * 0.4)) rotate(var(--spark-turn));
  }
  100% {
    opacity: 0;
    transform: translate(var(--spark-x), calc(var(--spark-y) * 0.3 + 4em)) rotate(var(--spark-turn)) scale(0.3);
  }
}
@keyframes forge-caption-reveal {
  from {
    opacity: 0;
    filter: brightness(1.6);
  }
  to {
    opacity: 1;
    filter: none;
  }
}
html[data-motion="reduce"] .forge-result-effect,
html[data-motion="reduce"] .amulet-scheme-orbit {
  display: none;
}
html[data-motion="reduce"] .forge-anvil[data-forging="true"] .forge-anvil-top .forge-anvil-frame::before,
html[data-motion="reduce"] .forge-anvil[data-forging="true"] .forge-anvil-top .forge-anvil-item {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .forge-result-effect,
  html:not([data-motion="full"]) .amulet-scheme-orbit {
    display: none;
  }
  html:not([data-motion="full"]) .forge-anvil[data-forging="true"] .forge-anvil-top .forge-anvil-frame::before,
  html:not([data-motion="full"]) .forge-anvil[data-forging="true"] .forge-anvil-top .forge-anvil-item {
    animation: none;
  }
}
@media (max-width: 767px) {
  .forge-result-effect {
    font-size: 0.7rem;
  }
  .forge-result-caption strong {
    font-size: 0.68rem;
  }
  .forge-result-caption span {
    font-size: 0.75rem;
  }
  .forge-upgrade-button {
    width: 7.25rem;
  }
}
.forge-anvil-crystal {
  z-index: 1;
  grid-column: 3;
  grid-row: 2;
  transform: translateX(0.65rem);
}
.forge-anvil .forge-anvil-frame {
  position: relative;
  isolation: isolate;
  display: flex;
  box-sizing: border-box;
  height: 12.4rem;
  width: 12.4rem;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0.55rem;
  border: 1px solid rgba(232, 206, 130, 0.78);
  border-radius: 50%;
  background: radial-gradient(
      circle at 50% 34%,
      rgba(58, 38, 20, 0.42) 0%,
      rgba(14, 8, 4, 0.86) 72%
    );
  border-image: none;
  box-shadow: 0 10px 22px rgba(8, 4, 2, 0.48),
    0 0 0 1px rgba(74, 48, 16, 0.65),
    inset 0 1px 0 rgba(255, 226, 170, 0.28),
    inset 0 0 0 1px rgba(62, 36, 12, 0.55),
    inset 0 0 1.35rem rgba(8, 4, 2, 0.4);
  filter: none;
  color: #f3e2b0;
}
.forge-anvil .forge-anvil-item {
  width: 82% !important;
  height: 82% !important;
  max-width: 82%;
  max-height: 82%;
  aspect-ratio: 1;
  border-radius: 18%;
  box-shadow: 0 0 0 1px rgba(225, 193, 132, 0.42),
    inset 0 0 0.7rem rgba(24, 13, 8, 0.26);
}
.forge-anvil .forge-anvil-frame > .group,
.forge-anvil .forge-anvil-frame > .inline-flex,
.forge-anvil .forge-anvil-frame > .inline-flex > .group {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.forge-anvil .forge-anvil-frame > span:not(.inline-flex) {
  position: relative;
  z-index: 1;
}
.forge-anvil .forge-anvil-item > img {
  max-width: 86%;
  max-height: 86%;
  object-fit: contain;
}
.forge-anvil-cost {
  position: relative;
  isolation: isolate;
  display: flex;
  box-sizing: border-box;
  width: 8.6rem;
  height: 8.6rem;
  min-width: 8.6rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.04rem;
  padding: 0.7rem 0.75rem 0.65rem;
  border: 1px solid rgba(232, 206, 130, 0.78);
  border-radius: 50%;
  background: radial-gradient(
      circle at 50% 34%,
      rgba(58, 38, 20, 0.42) 0%,
      rgba(14, 8, 4, 0.86) 72%
    );
  border-image: none;
  box-shadow: 0 10px 22px rgba(8, 4, 2, 0.48),
    0 0 0 1px rgba(74, 48, 16, 0.65),
    inset 0 1px 0 rgba(255, 226, 170, 0.28),
    inset 0 0 0 1px rgba(62, 36, 12, 0.55),
    inset 0 0 1.35rem rgba(8, 4, 2, 0.4);
  filter: none;
  color: #f3e2b0;
}
.forge-anvil .forge-anvil-frame::before,
.forge-anvil-cost::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0.38rem;
  border-radius: 50%;
  background: radial-gradient(
      circle at 48% 36%,
      rgba(42, 26, 14, 0.28) 0%,
      rgba(10, 6, 4, 0.72) 100%
    );
  box-shadow: inset 0 2px 8px rgba(8, 4, 2, 0.42);
  clip-path: none;
  filter: none;
  transform: none;
}
.forge-anvil-cost > * {
  position: relative;
  z-index: 1;
}
.forge-anvil-coin {
  height: 2.7rem;
  width: 2.7rem;
  object-fit: contain;
}
.forge-anvil-cost.forge-anvil-curse {
  justify-content: flex-end;
  gap: 0.02rem;
  padding-bottom: 0.78rem;
}
.forge-anvil-cost > .forge-anvil-curse-art {
  position: absolute;
  z-index: 1;
  top: 9%;
  left: 50%;
  width: 82%;
  height: 68%;
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(8, 4, 2, 0.62));
}
.forge-anvil-cost-n {
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
}
.forge-anvil-cost-label {
  color: #c9b38e;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.75);
}
.forge-anvil-chance {
  margin: 0;
  font-size: 18px;
  color: var(--ink-parchment);
}
.forge-anvil-warn {
  z-index: 2;
  display: flex;
  width: min(100%, 13.75rem);
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  margin: 0.1rem 0 0.05rem;
  padding: 0.48rem 0.65rem 0.5rem 0.55rem;
  border: 1px solid #e0a04a;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(92, 40, 8, 0.94), rgba(42, 16, 6, 0.96));
  box-shadow: 0 0 0 1px rgba(72, 28, 6, 0.7),
    inset 0 1px 0 rgba(255, 214, 140, 0.28),
    0 8px 16px rgba(28, 8, 4, 0.35);
  color: #ffd89a;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  text-shadow: 0 1px 2px rgba(20, 8, 4, 0.85);
}
.forge-anvil-warn-mark {
  display: grid;
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  padding-top: 0.28rem;
  clip-path: polygon(50% 4%, 100% 96%, 0 96%);
  background: #f0b44a;
  color: #2a1208;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}
.forge-anvil-warn-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.12rem;
}
.forge-anvil-warn-copy strong {
  color: #ffe7b0;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.forge-smith .parchment {
  max-width: calc(100% - 11rem);
}
@keyframes currency-float {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-18px);
  }
}
.currency-float {
  animation: currency-float 900ms ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .forge-flash-success,
  html:not([data-motion="full"]) .forge-flash-fail,
  html:not([data-motion="full"]) .amulet-scheme-place .amulet-scheme-well,
  html:not([data-motion="full"]) .amulet-scheme-orbit,
  html:not([data-motion="full"]) .currency-float,
  html:not([data-motion="full"]) .port-haul,
  html:not([data-motion="full"]) .port-haul-card,
  html:not([data-motion="full"]) .port-haul-card::before,
  html:not([data-motion="full"]) .port-haul-card::after,
  html:not([data-motion="full"]) .port-haul-seal {
    animation: none;
  }
  html:not([data-motion="full"]) *,
  html:not([data-motion="full"]) *::before,
  html:not([data-motion="full"]) *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
html[data-motion="reduce"] .forge-flash-success,
html[data-motion="reduce"] .forge-flash-fail,
html[data-motion="reduce"] .amulet-scheme-place .amulet-scheme-well,
html[data-motion="reduce"] .amulet-scheme-orbit,
html[data-motion="reduce"] .currency-float,
html[data-motion="reduce"] .port-haul,
html[data-motion="reduce"] .port-haul-card,
html[data-motion="reduce"] .port-haul-card::before,
html[data-motion="reduce"] .port-haul-card::after,
html[data-motion="reduce"] .port-haul-seal {
  animation: none;
}
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}
.slot-well {
  background: linear-gradient(180deg, #c4a070 0%, #8a6238 100%);
  border-color: #8a6234;
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.35),
    inset 0 -2px 0 rgba(60, 32, 12, 0.25);
}
.resource-rail {
  border-color: var(--border-gold) !important;
  background: var(--bg-parchment) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-parchment) 88%, #fff) !important;
  }
  color: var(--ink-parchment) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.wood-rail {
  background-color: #2a180c;
  background-image: linear-gradient(180deg, rgba(255, 190, 90, 0.14) 0%, transparent 22%, rgba(10, 4, 0, 0.28) 100%),
    var(--wood-grain);
  background-size: 100% 100%, 180% auto;
  background-position: center, center 42%;
  color: var(--wood-text);
  border-color: #2a180c;
}
.gold-trim {
  border: 1px solid var(--border-gold);
  box-shadow: 0 0 0 1px #6a4820,
    inset 0 1px 0 rgba(255, 244, 214, 0.35);
}
.portrait-jewel {
  position: relative;
  z-index: 1;
  width: 20.5rem;
  aspect-ratio: 670 / 1009;
  height: auto;
  flex-shrink: 0;
}
.portrait-jewel-face {
  position: absolute;
  inset: 3.07% 4.63%;
  overflow: hidden;
  border-radius: 2px;
}
.portrait-jewel-face > * {
  height: 100% !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.portrait-jewel-full .portrait-jewel-face > * > span[aria-hidden] {
  display: none;
}
.portrait-jewel-full .portrait-jewel-face img {
  object-fit: contain !important;
  object-position: center center;
}
.portrait-jewel-ring {
  pointer-events: none;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}
.portrait-jewel-ring-gold {
  filter: sepia(0.45) saturate(1.85) hue-rotate(-12deg) brightness(1.12);
}
.portrait-ring {
  display: inline-flex;
  border-radius: 8px;
  padding: 3px;
  box-shadow: 0 0 0 2px var(--border-strong);
}
.portrait-ring[data-frame="carved"] {
  box-shadow: 0 0 0 2px #8a6234;
}
.portrait-ring[data-frame="champion"] {
  box-shadow: 0 0 0 2px var(--gold);
}
.frame-pick {
  position: relative;
  width: 4.4rem;
  aspect-ratio: 670 / 1009;
  overflow: hidden;
  border-radius: 4px;
}
.frame-pick-face {
  position: absolute;
  inset: 11% 13% 10%;
  overflow: hidden;
}
.frame-pick-face > * {
  height: 100% !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.frame-pick-ring {
  pointer-events: none;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: fill;
}
.parchment {
  color: var(--ink-parchment);
  background-color: color-mix(in srgb, #f7ebcc 92%, transparent);
  background-image: var(--parchment-paper);
  background-size: 420px;
  border: 1px solid #c4a060;
  box-shadow: 0 10px 28px rgba(8, 12, 8, 0.28),
    0 4px 14px rgba(80, 48, 16, 0.12),
    inset 0 0 0 6px #ead4a0;
}
.keep-slot {
  display: flex;
  height: 4.25rem;
  width: 4.25rem;
  align-items: center;
  justify-content: center;
  border: 2px solid #9a7846;
  border-radius: 10px;
  background: linear-gradient(
      180deg,
      rgba(110, 74, 28, 0.1) 0%,
      rgba(255, 250, 230, 0.32) 30%,
      rgba(110, 74, 28, 0.08) 100%
    ),
    #ecd9ac;
  color: #8a6a3c;
  box-shadow: inset 0 0 0 2px #f2e3bc,
    inset 0 0 0 3px #b3905c,
    inset 0 2px 4px rgba(90, 60, 20, 0.18),
    0 1px 0 rgba(255, 250, 230, 0.5),
    0 6px 14px rgba(8, 12, 8, 0.35);
}
.keep-slot svg {
  height: 1.45rem;
  width: 1.45rem;
  opacity: 0.9;
}
.leather-pouch {
  display: flex;
  height: 4.25rem;
  width: 4.25rem;
  align-items: center;
  justify-content: center;
  border: 2px solid #9a7846;
  border-radius: 10px;
  background: linear-gradient(
      180deg,
      rgba(110, 74, 28, 0.1) 0%,
      rgba(255, 250, 230, 0.32) 30%,
      rgba(110, 74, 28, 0.08) 100%
    ),
    #ecd9ac;
  box-shadow: inset 0 0 0 2px #f2e3bc,
    inset 0 0 0 3px #b3905c,
    inset 0 2px 4px rgba(90, 60, 20, 0.18),
    0 1px 0 rgba(255, 250, 230, 0.5);
}
.leather-pouch > span,
.leather-pouch > div {
  transform: scale(0.86);
}
.nav-emblem {
  display: grid;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  place-items: center;
}
.nav-emblem img {
  height: 2.6rem;
  width: 2.6rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.ornate-tab {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid #8a6234;
  border-radius: 999px;
  background: linear-gradient(180deg, #7a5230, #4a3018);
  padding: 0.3rem 1rem;
  color: var(--wood-text);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.18);
}
.ornate-tab:hover,
.ornate-tab[aria-current="page"] {
  color: #fff4d8;
}
.game-keep {
  position: relative;
  display: flex;
  height: 100dvh;
  min-height: 360px;
  min-width: 360px;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-stone);
  background-image: var(--keep-stone);
  background-size: cover;
  background-position: center;
  padding: 0;
}
.settings-veil {
  position: absolute;
  z-index: 70;
  inset: 20px 18px 22px;
}
.settings-veil[data-open="false"],
.sheet-hold[data-open="false"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.talk-hold[data-open="false"] {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  margin: 0;
  border-width: 0;
  padding: 0;
}
.settings-veil.feeder-veil {
  inset: 0;
  overflow: hidden;
  padding: 1.5rem;
}
.feeder-veil > button {
  background: #2633298c;
  backdrop-filter: blur(3px);
}
.feeder-sheet-wrap {
  position: relative;
  z-index: 10;
  width: min(65rem, 100%);
  max-height: 100%;
  transform: scale(1);
  opacity: 1;
  transition: transform 220ms var(--ease-out),
    opacity 220ms var(--ease-out);
  @starting-style {
    transform: scale(0.97);
    opacity: 0;
  }
}
.feeder-sheet {
  --ink-parchment: #51383e;
  --text-primary: #51383e;
  --text-secondary: #72545b;
  --feeder-heading: #673b48;
  --feeder-label: #7b4956;
  --dp: #85516e;
  --gold: #88662e;
  --danger: #ac413b;
  position: relative;
  display: flex;
  height: min(58rem, calc(100dvh - 3rem));
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink-parchment);
  border: 2px solid #b99a62;
  border-radius: 1.4rem;
  background: linear-gradient(#fbf2dfed, #f1e7d2eb),
    url("/ui/chrome/parchment.jpg") center / 36rem;
  box-shadow: 0 0 0 3px #4d654e, 0 0 0 5px #d6c399, 0 22px 70px #15251b66;
}
.feeder-sheet::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 4px;
  border: 1px solid #fff4d76b;
  border-radius: 1rem;
  pointer-events: none;
}
.feeder-sheet-close {
  pointer-events: auto;
  position: absolute;
  z-index: 5;
  top: 0.85rem;
  right: 0.85rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  padding: 0.65rem;
  border: 1px solid #d5b782;
  border-radius: 50%;
  background: linear-gradient(#fffaed, #ecdcbb);
  box-shadow: inset 0 0 0 3px #fff7e6b3, 0 3px 12px #26332933;
  color: #53604a;
  cursor: pointer;
  transition: transform 160ms var(--ease-out),
    filter 160ms var(--ease-out);
}
.feeder-sheet-close:focus-visible {
  outline: 3px solid #365c51;
  outline-offset: 3px;
}
.feeder-sheet-close:active {
  transform: scale(0.97);
}
.feeder-sheet-close svg {
  width: 100%;
  height: 100%;
}
.feeder-sheet-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0;
  border-radius: inherit;
  scrollbar-width: thin;
  scrollbar-color: #8d9a77 #ece2ca;
}
.feeder-fair-header {
  position: relative;
}
.feeder-fair-art {
  width: 100%;
  aspect-ratio: 12 / 5;
  max-height: 23rem;
  background: url("/ui/feeder/festival-background-v2.webp") center top / cover;
  mask-image: linear-gradient(#000 75%, transparent);
}
.feeder-fair-heading {
  position: relative;
  margin-top: -2.6rem;
  padding: 0 1rem 1.15rem;
  text-align: center;
}
.feeder-fair-eyebrow {
  color: var(--feeder-label);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.feeder-fair-heading h1 {
  margin: 0.15rem 0 0.2rem;
  color: var(--feeder-heading);
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: clamp(2.3rem, 5vw, 3.2rem);
  line-height: 1.15;
  text-shadow: 0 2px #fffaf0;
}
.feeder-fair-heading > p:last-child {
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.feeder-shop-content {
  padding: 0 clamp(1rem, 3vw, 2rem) 2rem;
}
.feeder-empty {
  padding: 1rem 2rem 2rem;
  text-align: center;
}
.feeder-shop-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem 0;
  border-block: 1px solid #a8996d40;
}
.feeder-shop-intro > p {
  color: var(--feeder-heading);
  font-size: 0.9rem;
  font-weight: 600;
}
.feeder-shop-intro > p > span {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-secondary);
  font-size: 0.73rem;
  font-weight: 400;
}
.feeder-wallet {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid #b396ad66;
  border-radius: 0.8rem;
  background: #f6edf3;
  color: #795369;
  font-size: 0.65rem;
}
.feeder-wallet img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}
.feeder-wallet strong {
  display: block;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.feeder-card.parchment {
  position: relative;
  border: 1px solid #b59b6394;
  border-radius: 1rem;
  padding: 1.2rem;
  background: linear-gradient(135deg, #fffdf7e8, #f9f3e8e8), url("/ui/chrome/parchment.jpg") center / 30rem;
  box-shadow: inset 0 0 0 3px #fffdf7b3, inset 0 0 0 4px #c5ae762e, 0 5px 0 #b99b5b12, 0 8px 18px #68533414;
}
.feeder-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid #bda16830;
  border-radius: 0.6rem;
  pointer-events: none;
}
.feeder-card > h2 {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--feeder-heading);
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  text-shadow: 0 1px #fff;
}
.feeder-card > h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #b99a6659, transparent);
}
.feeder-champion-card.parchment {
  border-color: #c5a665a6;
  background: radial-gradient(ellipse at 0 0, #efd48f80, transparent 60%), linear-gradient(135deg, #fffaf0e8, #fbf5e9e8), url("/ui/chrome/parchment.jpg") center / 30rem;
}
.feeder-champion-layout {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}
.feeder-champion-seal {
  position: relative;
  display: flex;
  width: 7.5rem;
  height: 8.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 1px solid #c7a467;
  border-radius: 3.7rem 3.7rem 1rem 1rem;
  background: radial-gradient(circle at 40% 20%, #fffdf0, #f4e1a9);
  box-shadow: inset 0 0 0 4px #fff6db, inset 0 0 0 5px #d9be7e, 0 5px 10px #ac823b21;
  color: #977130;
}
.feeder-champion-seal::after {
  content: "◆";
  position: absolute;
  bottom: -0.55rem;
  padding: 0 0.35rem;
  background: #fcf3da;
  color: #be9651;
  font-size: 0.7rem;
}
.feeder-champion-icon {
  width: 5.5rem;
  height: 6.5rem;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px #8f60252e);
}
.feeder-champion-status {
  color: var(--feeder-label);
  font-size: 0.88rem;
  font-weight: 600;
}
.feeder-champion-prices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1rem;
}
.feeder-sheet .feeder-buy {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid #396858;
  border-radius: 0.6rem;
  background: linear-gradient(#628774, #456b5a);
  box-shadow: inset 0 1px #ffffff4d, inset 0 0 0 3px #ffffff12, 0 2px 0 #35584226;
  color: #fffdf6;
  font-size: 0.88rem;
}
.feeder-sheet .feeder-buy:disabled {
  border-color: #c1b79e;
  background: #e9e3d5;
  color: #7a705e;
  box-shadow: none;
  opacity: 1;
}
.feeder-sheet .feeder-buy:focus-visible {
  outline: 3px solid #976c38;
  outline-offset: 3px;
}
.feeder-sheet .feeder-duration {
  position: relative;
  display: flex;
  min-height: 5.5rem;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border: 1px solid #ab91579e;
  border-radius: 0.7rem;
  background: radial-gradient(ellipse at 50% 0, #fffef2, transparent 75%), linear-gradient(#faf2d9, #ecdeb8);
  box-shadow: inset 0 0 0 3px #fff9e5c4, inset 0 0 0 4px #b69a612e, 0 3px 0 #a8894933, 0 5px 10px #80653f12;
  color: var(--text-primary);
}
.feeder-pass-days {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  line-height: 1;
}
.feeder-pass-days > strong {
  color: var(--feeder-heading);
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.9rem;
}
.feeder-pass-days > span {
  font-size: 0.75rem;
}
.feeder-sheet .feeder-price-button {
  display: inline-flex;
  width: auto;
  min-width: 7rem;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border-color: #b99bab;
  background: linear-gradient(#fcf3f9, #ead7e6);
  box-shadow: inset 0 1px #ffffffcc, inset 0 0 0 3px #ffffff30, 0 2px 0 #98698133;
  color: var(--dp);
}
.feeder-price-button:disabled .feeder-dp-price {
  color: inherit;
}
.feeder-dp-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: #795373;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.feeder-dp-price img {
  width: 1.65rem;
  height: 1.65rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px #744d6d33);
}
.feeder-dp-price > strong {
  font-size: 1.05rem;
  line-height: 1;
}
.feeder-dp-price > span {
  font-size: 0.63rem;
  font-weight: 600;
}
.feeder-champion-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1rem;
  margin-top: 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid #bba47640;
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.feeder-champion-benefits li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
.feeder-champion-benefits li::before {
  content: "✧";
  color: #8a9d65;
}
.feeder-section-heading {
  margin-top: 1.7rem;
}
.feeder-section-heading > p:first-child {
  color: var(--feeder-heading);
  font-size: 1.35rem;
}
.feeder-chest-card.parchment {
  background: radial-gradient(ellipse at 0 0, #dfecefaa, transparent 75%), #fffbf2;
}
.feeder-chest-gold.parchment {
  background: radial-gradient(ellipse at 0 0, #f6dfaaaa, transparent 75%), #fffbf2;
}
.feeder-chest-summary {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.2rem;
}
.feeder-chest-emblem {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 6.2rem;
  width: 6.2rem;
  height: 6.2rem;
  border: 1px solid #8daba687;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 20%, #fff, #d6e2dd);
  box-shadow: inset 0 0 0 4px #fffaf2b3, inset 0 0 0 5px #91aaa34d, 0 4px 10px #62837321;
}
.feeder-chest-emblem::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid #a3b6a957;
  border-radius: 50%;
  pointer-events: none;
}
.feeder-chest-gold .feeder-chest-emblem {
  border-color: #c8a768;
  background: radial-gradient(circle at 35% 20%, #fff9df, #eed09a);
  box-shadow: inset 0 0 0 4px #fffaf2b3, inset 0 0 0 5px #b599604d, 0 4px 10px #95733121;
}
.feeder-chest-gold .feeder-chest-emblem::before {
  border-color: #c8a76870;
}
.feeder-chest-art {
  width: 5.1rem;
  height: 5.1rem;
  object-fit: contain;
  transform: rotate(-5deg);
  filter: drop-shadow(0 7px 4px #6e634340);
}
.feeder-stock {
  margin-bottom: 0.45rem;
  color: var(--feeder-label);
  font-size: 0.75rem;
  font-weight: 600;
}
.feeder-chest-hint {
  margin-top: 0.35rem;
  color: var(--text-secondary);
  font-size: 0.68rem;
}
.feeder-card-action {
  display: block;
  margin-top: 1rem;
}
.feeder-chest-card .feeder-card-action {
  padding-top: 0.8rem;
  border-top: 1px solid #bba47640;
  text-align: right;
}
.feeder-feedback {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #d5a89a;
  border-radius: 0.6rem;
  background: #fff0e9;
  color: #a04638;
  font-size: 0.9rem;
}
@media (max-width: 640px) {
  .feeder-fair-heading {
    margin-top: -0.7rem;
  }
  .feeder-fair-heading > p:last-child {
    font-size: 0.75rem;
  }
  .feeder-fair-eyebrow {
    font-size: 0.55rem;
  }
  .feeder-shop-intro {
    gap: 0.6rem;
  }
  .feeder-shop-intro > p {
    font-size: 0.78rem;
  }
  .feeder-wallet {
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
  }
  .feeder-wallet img {
    width: 1.6rem;
    height: 1.6rem;
  }
  .feeder-champion-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }
  .feeder-champion-seal {
    width: 100%;
    height: auto;
    flex-direction: row;
    gap: 0.8rem;
    padding: 0.5rem;
    border-radius: 0.65rem;
  }
  .feeder-champion-icon {
    width: 2.75rem;
    height: 3.25rem;
  }
  .feeder-sheet .feeder-duration {
    min-height: 4.6rem;
    gap: 0.5rem;
    padding: 0.75rem;
  }
  .feeder-pass-days > strong {
    font-size: 1.55rem;
  }
  .feeder-dp-price {
    gap: 0.1rem;
  }
  .feeder-dp-price img {
    width: 1.3rem;
    height: 1.3rem;
  }
  .feeder-dp-price > strong {
    font-size: 0.9rem;
  }
  .feeder-champion-benefits {
    gap: 0.45rem 0.7rem;
    font-size: 0.68rem;
  }
  .feeder-card.parchment {
    padding: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .feeder-sheet-wrap, .feeder-sheet-close {
    transition: none;
  }
}
.farm-window {
  --ink-parchment: #51383e;
  --text-primary: #51383e;
  --text-secondary: #72545b;
  --farm-heading: #673b48;
  --farm-label: #7b4956;
  --gold: #88662e;
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--ink-parchment);
  scrollbar-width: thin;
  scrollbar-color: #8d9a77 #ece2ca;
}
.farm-fair-header {
  position: relative;
  flex-shrink: 0;
}
.farm-fair-art {
  width: 100%;
  aspect-ratio: 12 / 5;
  max-height: 23rem;
  background: url("/ui/farm/harvest-background-v3.webp") center top / cover,
    linear-gradient(#d9c48a, #cbb57a);
  mask-image: linear-gradient(#000 75%, transparent);
}
.farm-fair-heading {
  position: relative;
  margin-top: -2.6rem;
  padding: 0 1rem 1.15rem;
  text-align: center;
}
.farm-fair-eyebrow {
  color: var(--farm-label);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.farm-fair-heading h1 {
  margin: 0.15rem 0 0.2rem;
  color: var(--farm-heading);
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: clamp(2.3rem, 5vw, 3.2rem);
  line-height: 1.15;
  text-shadow: 0 2px #fffaf0;
}
.farm-fair-heading > p:last-child {
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.farm-shop-content {
  padding: 0 clamp(1rem, 3vw, 2rem) 2rem;
}
.farm-shop-cards {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 860px) {
  .farm-shop-cards {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.farm-shop-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem 0;
  border-block: 1px solid #a8996d40;
}
.farm-shop-intro > p {
  color: var(--farm-heading);
  font-size: 0.9rem;
  font-weight: 600;
}
.farm-shop-intro > p > span {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-secondary);
  font-size: 0.73rem;
  font-weight: 400;
}
.farm-wallet {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid #c4a66566;
  border-radius: 0.8rem;
  background: #f8f1de;
  color: #7a5a2e;
  font-size: 0.65rem;
}
.farm-wallet-currencies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}
.farm-wallet-currency {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.farm-wallet img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}
.farm-wallet strong {
  display: block;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.farm-card.parchment {
  position: relative;
  border: 1px solid #b59b6394;
  border-radius: 1rem;
  padding: 1.2rem;
  background: linear-gradient(135deg, #fffdf7e8, #f9f3e8e8), url("/ui/chrome/parchment.jpg") center / 30rem;
  box-shadow: inset 0 0 0 3px #fffdf7b3, inset 0 0 0 4px #c5ae762e, 0 5px 0 #b99b5b12, 0 8px 18px #68533414;
}
.farm-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid #bda16830;
  border-radius: 0.6rem;
  pointer-events: none;
}
.farm-card > h2 {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--farm-heading);
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  text-shadow: 0 1px #fff;
}
.farm-card > h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #b99a6659, transparent);
}
.farm-collect-card.parchment {
  border-color: #c5a665a6;
  background: radial-gradient(ellipse at 0 0, #efd48f80, transparent 60%), linear-gradient(135deg, #fffaf0e8, #fbf5e9e8), url("/ui/chrome/parchment.jpg") center / 30rem;
}
.farm-collect-layout {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}
.farm-collect-seal {
  position: relative;
  display: flex;
  width: 7.5rem;
  height: 8.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 1px solid #c7a467;
  border-radius: 3.7rem 3.7rem 1rem 1rem;
  background: radial-gradient(circle at 40% 20%, #fffdf0, #f4e1a9);
  box-shadow: inset 0 0 0 4px #fff6db, inset 0 0 0 5px #d9be7e, 0 5px 10px #ac823b21;
}
.farm-collect-seal::after {
  content: "◆";
  position: absolute;
  bottom: -0.55rem;
  padding: 0 0.35rem;
  background: #fcf3da;
  color: #be9651;
  font-size: 0.7rem;
}
.farm-collect-icon {
  width: 5.5rem;
  height: 5.5rem;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px #8f60252e);
}
.farm-collect-icon.farm-manager-icon {
  object-fit: cover;
  border-radius: 0.45rem;
}
.farm-collect-status {
  color: var(--farm-label);
  font-size: 0.88rem;
  font-weight: 600;
}
.farm-window .farm-buy {
  display: inline-flex;
  width: auto;
  min-width: 8rem;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border: 1px solid #396858;
  border-radius: 0.6rem;
  background: linear-gradient(#628774, #456b5a);
  box-shadow: inset 0 1px #ffffff4d, inset 0 0 0 3px #ffffff12, 0 2px 0 #35584226;
  color: #fffdf6;
  font-size: 0.88rem;
}
.farm-window .farm-buy:disabled {
  border-color: #c1b79e;
  background: #e9e3d5;
  color: #7a705e;
  box-shadow: none;
  opacity: 1;
}
.farm-window .farm-buy:focus-visible {
  outline: 3px solid #976c38;
  outline-offset: 3px;
}
.farm-window .farm-price-button {
  border-color: #c4a665;
  background: linear-gradient(#fbf3d8, #ead7a2);
  box-shadow: inset 0 1px #ffffffcc, inset 0 0 0 3px #ffffff30, 0 2px 0 #98681d33;
  color: var(--gold);
}
.farm-window .farm-cancel-button {
  width: auto;
  border-color: #b59b6394;
  background: linear-gradient(#f7f0de, #eadfc6);
  box-shadow: inset 0 1px #ffffffcc, 0 2px 0 #98681d22;
  color: var(--farm-heading);
}
.farm-gold-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.farm-gold-price img {
  width: 1.65rem;
  height: 1.65rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px #744d2d33);
}
.farm-gold-price > strong {
  font-size: 1.05rem;
  line-height: 1;
}
.farm-gold-price > span {
  font-size: 0.63rem;
  font-weight: 600;
}
.farm-duration-picker {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.85rem;
}
.farm-duration-value {
  color: var(--farm-heading);
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px #fffaf0;
}
.farm-duration-slider-row {
  display: grid;
  grid-template-columns: auto minmax(7.5rem, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}
.farm-duration-slider-end {
  color: var(--farm-label);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.farm-duration-slider {
  --farm-rail: linear-gradient(
      to right,
      #ead7a2 0%,
      #c4a665 var(--farm-fill, 0%),
      #efe6d2 var(--farm-fill, 0%)
    );
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 7.5rem;
  height: 1.55rem;
  margin: 0;
  padding: 0;
  border: 1px solid #c4a66599;
  border-radius: 999px;
  background: var(--farm-rail);
  accent-color: #c4a665;
  cursor: pointer;
}
.farm-duration-slider::-webkit-slider-runnable-track {
  height: 1.55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.farm-duration-slider::-moz-range-track {
  height: 1.55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.farm-duration-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  border: 1px solid #a88949;
  border-radius: 999px;
  background: linear-gradient(#fff8e3, #ead7a2);
  box-shadow: 0 1px 2px #744d2d33;
}
.farm-duration-slider::-moz-range-thumb {
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid #a88949;
  border-radius: 999px;
  background: linear-gradient(#fff8e3, #ead7a2);
  box-shadow: 0 1px 2px #744d2d33;
}
.farm-duration-slider:focus-visible {
  outline: 3px solid #976c38;
  outline-offset: 3px;
}
.farm-duration-slider:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
.farm-card-action {
  display: block;
  margin-top: 1rem;
}
.farm-feedback {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #d5a89a;
  border-radius: 0.6rem;
  background: #fff0e9;
  color: #a04638;
  font-size: 0.9rem;
}
@media (max-width: 640px) {
  .farm-fair-heading {
    margin-top: -0.7rem;
  }
  .farm-fair-heading > p:last-child {
    font-size: 0.75rem;
  }
  .farm-fair-eyebrow {
    font-size: 0.55rem;
  }
  .farm-shop-intro {
    gap: 0.6rem;
  }
  .farm-shop-intro > p {
    font-size: 0.78rem;
  }
  .farm-wallet {
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
  }
  .farm-wallet img {
    width: 1.6rem;
    height: 1.6rem;
  }
  .farm-collect-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }
  .farm-collect-seal {
    width: 100%;
    height: auto;
    flex-direction: row;
    gap: 0.8rem;
    padding: 0.5rem;
    border-radius: 0.65rem;
  }
  .farm-collect-icon {
    width: 2.75rem;
    height: 2.75rem;
  }
  .farm-gold-price img {
    width: 1.3rem;
    height: 1.3rem;
  }
  .farm-gold-price > strong {
    font-size: 0.9rem;
  }
  .farm-card.parchment {
    padding: 1rem;
  }
}
.amulet-scheme-panel {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
}
.amulet-scheme {
  display: flex;
  width: min(100%, 38rem);
  flex-direction: column;
  align-items: center;
  gap: 1.05rem;
}
.amulet-scheme-altar {
  position: relative;
  display: grid;
  width: 22.5rem;
  height: 22.5rem;
  place-items: center;
}
.amulet-scheme-hearth {
  position: absolute;
  z-index: 0;
  bottom: 6%;
  left: 16%;
  right: 16%;
  height: 32%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(255, 176, 72, 0.42) 0%,
    rgba(232, 140, 48, 0.16) 42%,
    transparent 72%
  );
  filter: blur(10px);
  opacity: 0.85;
  pointer-events: none;
  transition: transform 700ms var(--ease-out), opacity 700ms var(--ease-out);
}
.amulet-scheme-pedestal {
  position: absolute;
  z-index: 0;
  bottom: 3%;
  width: 72%;
  height: 24%;
  border-radius: 50%;
  border: 1px solid rgba(232, 206, 130, 0.42);
  background: radial-gradient(
      ellipse at 50% 28%,
      rgba(72, 46, 22, 0.55) 0%,
      rgba(14, 8, 4, 0.88) 74%
    );
  box-shadow: 0 12px 24px rgba(8, 4, 2, 0.5),
    inset 0 1px 0 rgba(255, 226, 170, 0.22),
    inset 0 0 1.2rem rgba(8, 4, 2, 0.45);
  pointer-events: none;
}
.amulet-scheme-rings {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.amulet-scheme-ring-outer,
.amulet-scheme-ring-mid,
.amulet-scheme-ring-inner,
.amulet-scheme-orbit,
.amulet-scheme-track,
.amulet-scheme-progress {
  fill: none;
}
.amulet-scheme-ring-outer {
  stroke: rgba(232, 206, 130, 0.58);
  stroke-width: 1.5;
}
.amulet-scheme-ring-mid {
  stroke: rgba(243, 226, 176, 0.28);
  stroke-width: 1;
}
.amulet-scheme-ring-inner {
  stroke: rgba(232, 206, 130, 0.78);
  stroke-width: 1.7;
}
.amulet-scheme-orbit {
  stroke: rgba(255, 226, 170, 0.4);
  stroke-width: 1.15;
  transform-box: fill-box;
  transform-origin: center;
  animation: amulet-orbit-spin 22s linear infinite;
}
.amulet-scheme-track {
  stroke: rgba(42, 24, 10, 0.88);
  stroke-width: 5.5;
}
.amulet-scheme-progress {
  stroke: #e8ce82;
  stroke-width: 5.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(255, 214, 120, 0.55));
  transition: stroke-dashoffset 700ms var(--ease-out);
}
.amulet-scheme-tick {
  fill: #f3e2b0;
  stroke: none;
  filter: drop-shadow(0 0 3px rgba(255, 214, 120, 0.55));
}
.amulet-scheme-jewel {
  position: relative;
  z-index: 2;
  display: grid;
  width: 11.75rem;
  height: 11.75rem;
  place-items: center;
  overflow: visible;
}
.amulet-scheme-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  color: #f8e6b0;
}
.amulet-scheme-place {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.amulet-scheme-place:hover .amulet-scheme-well {
  filter: brightness(1.08);
}
.amulet-scheme-place:focus-visible {
  outline: 2px solid #f8e6b0;
  outline-offset: 3px;
}
.amulet-scheme-place:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.amulet-scheme-place .amulet-scheme-well {
  animation: amulet-altar-pulse 2.6s ease-in-out infinite;
}
.amulet-scheme-well.keep-slot {
  position: relative;
  overflow: visible;
  height: 10rem;
  width: 10rem;
}
.amulet-scheme-well.keep-slot svg {
  height: 3.1rem;
  width: 3.1rem;
}
.amulet-scheme-name {
  color: #f8e6b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.15;
  text-shadow: 0 1px 0 #3b2518,
    0 2px 6px rgba(8, 3, 2, 0.85);
}
.amulet-scheme-level {
  color: #f0dfb7;
  font-size: 1.2rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(8, 3, 2, 0.8);
}
.amulet-scheme-level-n {
  display: inline-block;
  color: #fff1c4;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-variant-numeric: tabular-nums;
}
.amulet-scheme-effect,
.amulet-scheme-next {
  max-width: 28rem;
  margin: 0;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(8, 3, 2, 0.8);
}
.amulet-scheme-effect {
  color: #f3e2b0;
  font-size: 1.05rem;
  font-weight: 600;
}
.amulet-scheme-next {
  color: #c9b38e;
  font-size: 0.92rem;
  font-weight: 500;
}
.amulet-scheme-inventory {
  display: inline-flex;
  min-width: 12.5rem;
  height: 3.15rem;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  border: 1px solid rgba(243, 226, 176, 0.5);
  border-radius: 6px;
  background: rgba(18, 10, 6, 0.58);
  color: #e8d6a0;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(74, 48, 16, 0.55),
    inset 0 1px 0 rgba(255, 226, 170, 0.22);
}
.amulet-scheme-inventory:hover {
  color: #fff1c4;
  border-color: rgba(243, 226, 176, 0.72);
}
.amulet-scheme-inventory:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 2px;
}
.amulet-scheme-inventory:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.amulet-scheme-steps-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: min(100%, 22rem);
}
.amulet-scheme-steps-kicker {
  margin: 0;
  color: #c9b38e;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.amulet-scheme-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.28rem;
  width: 100%;
  padding: 0.2rem;
  border: 1px solid rgba(232, 206, 130, 0.55);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(62, 36, 16, 0.94), rgba(16, 9, 5, 0.96));
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.35),
    inset 0 1px 0 rgba(255, 226, 170, 0.2),
    inset 0 0 0 1px rgba(74, 48, 16, 0.55);
}
.amulet-scheme-step {
  display: inline-flex;
  min-height: 2.75rem;
  min-width: 3.35rem;
  flex: 1 1 3.35rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(212, 174, 98, 0.3);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(42, 24, 12, 0.4), rgba(10, 6, 4, 0.22));
  color: #cbb48a;
  cursor: pointer;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.amulet-scheme-step:hover:not(:disabled) {
  color: #fff1c4;
  border-color: rgba(243, 226, 176, 0.58);
}
.amulet-scheme-step:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.amulet-scheme-step:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 2px;
}
.amulet-scheme-step[data-selected="true"] {
  color: #fff6d4;
  background: linear-gradient(180deg, rgba(232, 190, 96, 0.44), rgba(138, 86, 28, 0.52));
  border-color: rgba(243, 226, 176, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.38),
    0 0 14px rgba(212, 174, 98, 0.32);
}
.amulet-scheme .forge-upgrade-button {
  width: auto;
  min-width: 12.75rem;
  height: 3.15rem;
  padding-inline: 1.15rem;
}
.amulet-scheme-cost {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  color: #f8e6b0;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 0 #3b2518,
    0 2px 6px rgba(8, 3, 2, 0.85);
}
.amulet-scheme-price {
  display: flex;
  align-items: center;
  justify-content: center;
}
.amulet-scheme-cost:has(> .amulet-scheme-choice) {
  display: grid;
  width: min(100%, 30rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.85rem 1.6rem;
}
.amulet-scheme-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.amulet-scheme-cost .currency-amount {
  font-variant-numeric: tabular-nums;
}
.amulet-scheme-cost .currency-amount-icon {
  height: 1.4em;
  width: 1.4em;
}
.amulet-scheme-message {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 1rem);
  margin: 0;
  padding: 0.5rem 0.85rem;
  transform: translateX(-50%);
  border: 1px solid #bca06580;
  border-radius: 6px;
  background: #171c27f5;
  box-shadow: 0 4px 16px #0005;
  color: #f3e2b0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(8, 3, 2, 0.8);
}
.amulet-scheme-message:empty {
  visibility: hidden;
}
.forge-item-picker {
  position: absolute;
  z-index: 12;
  inset: -0.75rem;
  display: grid;
  place-items: center;
  padding: 1rem;
  border-radius: 1.4rem;
  background: rgba(17, 9, 5, 0.72);
  backdrop-filter: blur(3px);
}
.forge-item-picker-panel {
  display: flex;
  width: min(27rem, 100%);
  max-height: 100%;
  min-height: 10rem;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(229, 186, 103, 0.58);
  border-radius: 0.8rem;
  background: linear-gradient(rgba(36, 22, 13, 0.92), rgba(22, 13, 8, 0.97)),
    url("/ui/forge/hearth.jpg?v=1") center / cover;
  box-shadow: inset 0 0 0 2px rgba(65, 40, 20, 0.82),
    0 0.8rem 2rem rgba(8, 3, 2, 0.7);
}
.forge-item-picker-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(229, 186, 103, 0.28);
}
.forge-item-picker-heading h2 {
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.forge-item-picker-heading p {
  margin-top: 0.2rem;
  color: #c9ad79;
  font-size: 0.78rem;
  line-height: 1.25;
}
.forge-item-picker-close {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(229, 186, 103, 0.35);
  border-radius: 50%;
  background: rgba(15, 8, 5, 0.55);
  color: #f3e2b0;
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
  line-height: 1;
}
.forge-item-picker-close:hover {
  background: rgba(92, 50, 23, 0.72);
}
.forge-item-picker-close:focus-visible {
  outline: 2px solid #f8e6b0;
  outline-offset: 2px;
}
.forge-item-picker-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
  gap: 0.8rem 0.55rem;
  overflow-y: auto;
  padding: 0.9rem 1rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: #a67b38 transparent;
}
.forge-item-picker-item {
  position: relative;
  display: flex;
  min-width: 0;
  justify-content: center;
  border-radius: 0.55rem;
  padding: 0.3rem 0.2rem 1.05rem;
}
.forge-item-picker-item[data-selected="true"] {
  background: rgba(225, 158, 55, 0.14);
  box-shadow: inset 0 0 0 1px rgba(244, 192, 102, 0.7);
}
.forge-item-picker-equipped {
  position: absolute;
  bottom: 0.18rem;
  left: 50%;
  color: #d8bd85;
  font-size: 0.63rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.forge-item-picker-empty {
  margin: auto;
  max-width: 20rem;
  padding: 1.5rem;
  color: #d8bd85;
  text-align: center;
}
.forge-upgrade-empty {
  margin: 0;
  color: #d8bd85;
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: center;
}
.forge-smith-upgrade .forge-anvil-chance,
.forge-smith-upgrade .forge-anvil-action p:not(.forge-anvil-warn) {
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 4px rgba(18, 8, 4, 0.75);
}
.forge-smith-upgrade .forge-anvil-chance[data-kind="success"] {
  color: #d7e8b0;
}
.forge-smith-upgrade .forge-anvil-chance[data-kind="fail"] {
  color: #efb4a4;
}
.game-keep-inner {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  margin: 20px 18px 22px;
  border: 1px solid #6a5340;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(62, 42, 24, 0.35),
    0 8px 18px rgba(40, 24, 10, 0.28);
}
.keep-frame {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  border-style: solid;
  border-color: transparent;
  border-width: 20px 18px 22px;
  border-image-source: url("/ui/chrome/keep-frame.png");
  border-image-slice: 60 54 66 54;
  border-image-width: 20px 18px 22px;
  border-image-repeat: round;
}
.keep-parchment {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #1a2838;
  background-image: var(--vale-art);
  background-position: center 46%;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 2px rgba(196, 150, 62, 0.5),
    inset 0 0 0 5px rgba(196, 150, 62, 0.18);
}
.keep-parchment::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
      180deg,
      rgba(18, 28, 40, 0.28) 0%,
      transparent 18%,
      transparent 68%,
      rgba(12, 18, 28, 0.36) 100%
    ),
    radial-gradient(
      ellipse 88% 72% at 50% 46%,
      transparent 42%,
      rgba(10, 16, 26, 0.26) 100%
    );
}
.keep-parchment > * {
  position: relative;
  z-index: 1;
}
.keep-parchment main h1 {
  color: #f6ecd4;
  text-shadow: 0 1px 2px rgba(8, 10, 6, 0.82),
    0 0 18px rgba(8, 10, 6, 0.42);
}
.keep-parchment main h1 + p {
  color: #e8d9b4;
  text-shadow: 0 1px 2px rgba(8, 10, 6, 0.72);
}
.keep-parchment footer span,
.keep-parchment footer button {
  color: #efe4c8;
  text-shadow: 0 1px 2px rgba(8, 10, 6, 0.7);
}
.keep-parchment footer button:hover {
  color: #fff4d8;
}
.game-nav {
  pointer-events: auto;
  position: relative;
  z-index: 6;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-start;
  align-self: center;
  gap: 0.38rem;
  padding: 0 0.35rem 0 1.25rem;
}
.keep-parchment[data-location="character"] .game-nav {
  align-self: flex-start;
  margin-top: 12.6rem;
}
@media (max-width: 1023px) {
  .keep-parchment[data-location="character"] .game-nav {
    align-self: center;
    margin-top: 0;
  }
}
.game-nav-tab {
  flex-shrink: 0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
  transition: transform 160ms var(--ease-out),
    filter 160ms var(--ease-out),
    color 160ms var(--ease-out);
}
.game-nav-tab:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .game-nav-tab:hover {
    color: #fff4d8;
    filter: drop-shadow(0 2px 4px rgba(40, 24, 8, 0.32)) brightness(1.08);
  }
  .settings-cog:hover {
    filter: drop-shadow(0 2px 4px rgba(8, 10, 6, 0.45)) brightness(1.08);
  }
  .island-utility-link:hover,
  .island-build-btn:hover,
  .island-settings-btn:hover {
    filter: none;
    border-color: rgba(243, 226, 176, 0.85);
    box-shadow: inset 0 1px 1px rgba(243, 226, 176, 0.35),
      0 0 0 1px rgba(74, 48, 16, 0.65),
      0 4px 12px rgba(8, 4, 2, 0.5);
  }
  .island-utility-link:hover .island-utility-art,
  .island-build-btn:hover .island-build-art,
  .island-settings-btn:hover .settings-cog-art {
    filter: drop-shadow(0 1px 2px rgba(8, 4, 2, 0.55)) brightness(1.1)
      saturate(1.08);
  }
  .feeder-sheet-close:hover {
    filter: drop-shadow(0 3px 7px rgba(8, 10, 6, 0.55)) brightness(1.08);
  }
  .island-build-btn[aria-expanded="true"]:hover,
  .island-utility-link[aria-current="page"]:hover {
    box-shadow: inset 0 1px 1px rgba(243, 226, 176, 0.35),
      0 0 0 1px rgba(74, 48, 16, 0.65),
      0 4px 12px rgba(8, 4, 2, 0.5),
      0 0 12px rgba(238, 196, 102, 0.8);
  }
  .island-build-card:hover:not(:disabled):not(.island-build-card-grey) {
    color: #fff8dc;
    filter: brightness(1.08);
  }
}
.game-nav-tab[aria-current="page"] {
  color: #fff8dc;
  filter: drop-shadow(0 2px 4px rgba(40, 24, 8, 0.32))
    drop-shadow(0 0 10px rgba(212, 174, 98, 0.4));
}
.keep-sidebar-crest {
  position: relative;
  z-index: 6;
  margin: 0.12rem 0 -0.35rem;
  flex-shrink: 0;
  width: 100%;
  padding: 0;
  text-align: center;
  pointer-events: none;
}
.keep-sidebar-crest img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1008 / 570;
  object-fit: contain;
  object-position: center top;
  filter: drop-shadow(0 6px 12px rgba(70, 42, 16, 0.38));
}
.keep-rail {
  position: relative;
  z-index: 2;
  container-type: size;
  container-name: keep-rail;
  padding-top: 0;
  background-color: var(--bg-stone);
  background-image: var(--keep-stone);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset -12px 0 20px rgba(72, 48, 20, 0.14);
}
.keep-nav {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.7rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.35rem 0.42rem clamp(1.15rem, 4.8cqh, 2.2rem) 0.42rem;
}
.keep-nav .nav-plank {
  flex: 0 0 auto;
  height: 3.15rem;
  min-height: 3.15rem;
  max-height: 3.15rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: clamp(15px, 2.9cqh, 18px);
}
.keep-nav .nav-emblem {
  height: clamp(1.7rem, 5cqh, 2.7rem);
  width: clamp(1.7rem, 5cqh, 2.7rem);
}
.keep-nav .nav-emblem img {
  height: 100%;
  width: 100%;
}
@container keep-rail (max-height: 560px) {
  .keep-sidebar-crest {
    margin: 0.06rem 0 -0.22rem;
    width: 100%;
  }
  .keep-nav .nav-plank {
    height: 2.55rem;
    min-height: 2.55rem;
    max-height: 2.55rem;
    font-size: 14px;
  }
  .keep-nav {
    gap: 0.48rem;
    padding-bottom: 1.4rem;
  }
}
.bag-keep {
  position: relative;
  width: fit-content;
  max-width: 100%;
  border-style: solid;
  border-color: transparent;
  border-width: 1.05rem 1.85rem 1.12rem;
  border-image-source: url("/ui/chrome/name-panel.png");
  border-image-slice: 120 220 120 220;
  border-image-width: 1.05rem 1.85rem 1.12rem;
  border-image-repeat: stretch;
  background-color: rgba(16, 18, 12, 0.28);
  background-clip: padding-box;
  filter: drop-shadow(0 6px 12px rgba(40, 24, 8, 0.38));
}
.bag-keep-grid {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  justify-items: center;
  gap: 0.28rem;
}
.bag-keep-hero,
.stats-keep-hero {
  box-sizing: border-box;
  display: flex;
  width: 18.5rem;
  min-height: 0;
  flex-shrink: 0;
  flex-direction: column;
  height: auto;
}
.hero-bag-column .bag-keep-hero {
  width: 100%;
}
.item-upgrade-mark,
.item-amulet-level {
  position: absolute;
  top: 0.08rem;
  right: 0.1rem;
  z-index: 1;
  border: 0;
  border-radius: 4px;
  background: rgba(6, 8, 10, 0.62);
  box-shadow: none;
  padding: 0.14rem 0.2rem 0.1rem;
  font-family: var(--font-ui), ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  -webkit-text-stroke: 2px #0b0b0b;
  paint-order: stroke fill;
}
.item-curse-mark {
  position: absolute;
  left: 0.1rem;
  bottom: 0.08rem;
  z-index: 1;
  border-radius: 4px;
  background: rgba(6, 8, 10, 0.72);
  padding: 0.12rem 0.2rem 0.08rem;
  font-family: var(--font-ui), ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: #f8e6b0;
  -webkit-text-stroke: 2px #0b0b0b;
  paint-order: stroke fill;
}
.item-stack-mark {
  position: absolute;
  right: 0.1rem;
  bottom: 0.08rem;
  z-index: 1;
  border-radius: 4px;
  background: rgba(6, 8, 10, 0.72);
  padding: 0.12rem 0.2rem 0.08rem;
  font-family: var(--font-ui), ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #f8e6b0;
  -webkit-text-stroke: 2px #0b0b0b;
  paint-order: stroke fill;
}
.item-tooltip-shell {
  width: min(22rem, calc(100vw - 1rem));
  max-height: calc(100vh - 1rem);
  overflow-x: hidden;
  overflow-y: auto;
  border-color: var(--border-gold) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border-gold) 78%, #5a3518) !important;
  }
  border-radius: 8px !important;
  background: var(--bg-panel-raised) !important;
  padding: 0 !important;
  box-shadow: 0 16px 38px rgba(33, 18, 7, 0.52),
    0 0 0 2px var(--border-gold) !important;
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 16px 38px rgba(33, 18, 7, 0.52),
    0 0 0 2px color-mix(in srgb, var(--border-gold) 20%, transparent) !important;
  }
}
.item-tooltip-card {
  position: relative;
  color: var(--text-primary);
  background: linear-gradient(
      180deg,
      var(--bg-panel-raised) 0%,
      var(--bg-panel) 100%
    );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-panel-raised) 97%, white) 0%,
      var(--bg-panel) 100%
    );
  }
}
.item-tooltip-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: var(--parchment-paper);
  background-size: 280px;
  mix-blend-mode: multiply;
}
.item-tooltip-card > * {
  position: relative;
}
.item-tooltip-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  }
  background: linear-gradient(
      100deg,
      var(--bg-wood-dark),
      var(--bg-wood)
    );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
      100deg,
      color-mix(in srgb, var(--bg-wood-dark) 96%, transparent),
      color-mix(in srgb, var(--bg-wood) 88%, #8f672f)
    );
  }
  padding: 0.72rem 0.8rem;
}
.item-tooltip-art {
  display: grid;
  width: 3.7rem;
  height: 3.7rem;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--border-gold);
  border-radius: 7px;
  background: radial-gradient(circle at 45% 34%, rgba(255, 244, 207, 0.2), transparent 55%),
    rgba(18, 10, 4, 0.6);
  padding: 0.2rem;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5),
    0 2px 7px rgba(0, 0, 0, 0.35);
}
.item-tooltip-art > span {
  color: #f2dfb7;
  font-size: 1.55rem;
}
.item-tooltip-kicker {
  display: block;
  color: #cbb58d;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}
.item-tooltip-name {
  display: block;
  overflow: hidden;
  margin-top: 0.18rem;
  color: #f3e2b0;
  font-family: var(--font-heading), Georgia, serif;
  font-size: 1.04rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}
.item-tooltip-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.42rem;
}
.item-tooltip-badges > span {
  border: 1px solid #8b7048;
  border-radius: 999px;
  background: rgba(12, 7, 3, 0.34);
  padding: 0.12rem 0.38rem;
  color: #ead8b2;
  font-size: 0.62rem;
  line-height: 1.2;
}
.item-tooltip-description {
  margin: 0;
  padding: 0.68rem 0.8rem 0.62rem;
  color: var(--text-secondary);
  font-size: 0.76rem;
  line-height: 1.42;
}
.item-tooltip-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0.8rem;
  border-block: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-block: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
}
.item-tooltip-card > .item-tooltip-facts:last-child {
  margin-bottom: 0.65rem;
}
.item-tooltip-facts > div {
  min-width: 0;
  padding: 0.52rem 0.4rem;
  text-align: center;
}
.item-tooltip-facts > div + div {
  border-left: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
  }
}
.item-tooltip-facts.item-tooltip-facts-2x2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.item-tooltip-facts.item-tooltip-facts-2x2 > div + div {
  border-left: none;
}
.item-tooltip-facts.item-tooltip-facts-2x2 > div:nth-child(even) {
  border-left: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
  }
}
.item-tooltip-facts.item-tooltip-facts-2x2 > div:nth-child(n + 3) {
  border-top: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
  }
}
.item-tooltip-facts dt,
.item-tooltip-value small {
  color: var(--text-disabled);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.item-tooltip-facts dd {
  overflow: hidden;
  margin-top: 0.12rem;
  color: var(--text-primary);
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-tooltip-section {
  margin: 0.68rem 0.8rem 0;
}
.item-tooltip-section h3 {
  margin: 0 0 0.38rem;
  color: var(--text-secondary);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.item-tooltip-stat-list,
.item-tooltip-property-list {
  display: grid;
  gap: 0.3rem;
}
.item-tooltip-stat-list li {
  display: grid;
  gap: 0.13rem;
  border: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
  }
  border-radius: 5px;
  background: var(--bg-panel-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel-raised) 68%, transparent);
  }
  padding: 0.38rem 0.48rem;
}
.item-tooltip-stat-list li > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.item-tooltip-stat-value {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.38rem;
}
.item-tooltip-stat-icon,
.item-tooltip-stat-fallback {
  height: 1.7rem;
  width: 1.7rem;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(70, 40, 10, 0.22));
}
.item-tooltip-stat-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-family: var(--font-heading), Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
}
.item-tooltip-stat-list strong {
  color: var(--text-primary);
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.item-tooltip-stat-list em {
  color: var(--gold);
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.65rem;
  font-style: normal;
  white-space: nowrap;
}
.item-tooltip-stat-list small {
  color: var(--text-secondary);
  font-size: 0.66rem;
  line-height: 1.3;
}
.item-tooltip-stat-list small + small {
  color: var(--text-disabled);
}
.item-tooltip-section + .item-tooltip-facts {
  margin-top: 0.7rem;
}
.item-tooltip-amulet {
  border: 1px solid var(--gold);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--border));
  }
  border-radius: 6px;
  background: linear-gradient(
      135deg,
      var(--gold),
      var(--bg-panel)
    );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--gold) 10%, var(--bg-panel-raised)),
      color-mix(in srgb, var(--bg-panel) 94%, transparent)
    );
  }
  padding: 0.52rem 0.58rem;
}
.item-tooltip-current-effect {
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.32;
}
.item-tooltip-level-track {
  height: 0.35rem;
  overflow: hidden;
  margin-top: 0.45rem;
  border: 1px solid var(--border-strong);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border-strong) 75%, transparent);
  }
  border-radius: 999px;
  background: var(--bg-app);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-app) 16%, var(--bg-panel));
  }
}
.item-tooltip-level-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5d22, var(--gold), #e7c875);
}
.item-tooltip-level-caption {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.22rem;
  color: var(--text-secondary);
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}
.item-tooltip-level-caption strong {
  color: var(--gold);
  font-weight: 700;
}
.item-tooltip-milestone {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 0.45rem;
  margin-top: 0.4rem;
  border-top: 1px dashed var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px dashed color-mix(in srgb, var(--border) 72%, transparent);
  }
  padding-top: 0.4rem;
  font-size: 0.66rem;
  line-height: 1.3;
}
.item-tooltip-milestone span {
  color: var(--text-disabled);
}
.item-tooltip-milestone strong {
  color: var(--text-primary);
  font-weight: 700;
}
.item-tooltip-note {
  margin-top: 0.42rem;
  border-radius: 4px;
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
  padding: 0.32rem 0.4rem;
  color: var(--text-secondary);
  font-size: 0.64rem;
  line-height: 1.3;
}
.item-tooltip-property-list li {
  position: relative;
  padding-left: 0.7rem;
  color: var(--text-primary);
  font-size: 0.72rem;
  line-height: 1.35;
}
.item-tooltip-property-list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: var(--gold);
  font-size: 0.45rem;
}
.item-tooltip-value {
  display: flex;
  justify-content: flex-end;
  gap: 1.2rem;
  margin-top: 0.7rem;
  border-top: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  }
  background: var(--bg-wood);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-wood) 6%, var(--bg-panel));
  }
  padding: 0.58rem 0.8rem 0.66rem;
}
.item-tooltip-value > span {
  display: grid;
  gap: 0.1rem;
  text-align: right;
}
.item-tooltip-value strong {
  color: var(--gold);
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) {
  .item-tooltip-shell {
    width: calc(100vw - 0.75rem);
  }
  .item-tooltip-header {
    padding: 0.62rem 0.68rem;
  }
  .item-tooltip-description,
  .item-tooltip-section {
    margin-inline: 0.68rem;
  }
  .item-tooltip-description {
    padding-inline: 0;
  }
  .item-tooltip-facts {
    margin-inline: 0.68rem;
  }
}
.chest-loot-veil {
  position: fixed;
  inset: 0;
  z-index: 260;
}
.chest-loot-sheet {
  position: relative;
  z-index: 10;
  display: flex;
  width: min(40rem, calc(100vw - 2rem));
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.1rem 1.1rem;
  color: var(--ink-parchment);
  border-style: solid;
  border-color: transparent;
  border-width: 1.15rem 1.35rem 1.25rem;
  border-image-source: url("/ui/chrome/name-stone.webp?v=2");
  border-image-slice: 108 250 112 250 fill;
  border-image-width: 1.15rem 1.35rem 1.25rem;
  border-image-repeat: stretch;
  filter: drop-shadow(0 10px 18px rgba(40, 24, 8, 0.45));
}
.chest-loot-title {
  margin: 0;
  font-family: var(--font-heading), ui-serif, serif;
  font-size: 24px;
  color: var(--gold);
  text-align: center;
}
.chest-loot-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}
.chest-loot-entry {
  display: flex;
  min-width: 4.5rem;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.chest-loot-icon {
  position: relative;
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(18, 8, 2, 0.35);
  border: 1px solid var(--border-gold);
}
.chest-loot-icon img,
.chest-loot-icon .asset-img {
  height: 86%;
  width: 86%;
  object-fit: contain;
}
.chest-loot-amount {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--ink-parchment);
}
.chest-loot-actions {
  display: flex;
  justify-content: center;
}
.chest-loot-close {
  position: absolute;
  top: -0.85rem;
  left: -0.85rem;
  z-index: 5;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 3px 7px rgba(8, 10, 6, 0.55));
}
.chest-loot-close-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bag-keep .keep-slot,
.hero-slot {
  box-sizing: border-box;
  border: 1px solid var(--border-gold);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border-gold) 72%, #6a4e2c);
  }
  border-radius: 4px;
  background: rgba(28, 18, 8, 0.22);
  color: #e8d090;
  box-shadow: inset 0 1px 2px rgba(20, 12, 4, 0.28);
  filter: none;
}
.bag-keep-item,
.slot-fill-item {
  height: 100% !important;
  width: 100% !important;
  min-height: 0;
  min-width: 0;
  border-radius: 3px !important;
  border-width: 1px;
}
.bag-keep-item img,
.slot-fill-item img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.bag-keep h2 {
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
}
.bag-keep p {
  color: #f0e4c4;
  text-shadow: 0 1px 2px rgba(8, 10, 6, 0.75);
}
.bag-keep .keep-slot {
  height: 3.3rem;
  width: 3.3rem;
}
.bag-keep .keep-slot,
.slot-fill {
  align-items: stretch;
  justify-content: flex-start;
}
.bag-keep .keep-slot > span,
.bag-keep .keep-slot > span > button,
.slot-fill > span,
.slot-fill > span > button {
  display: flex;
  min-height: 0;
  min-width: 0;
  height: 100%;
  width: 100%;
}
.bag-keep .keep-slot > span > button,
.slot-fill > span > button {
  align-items: stretch;
}
.slot-fill > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.hero-slot.slot-fill > span {
  position: absolute;
  inset: 0;
  display: flex !important;
  height: auto !important;
  width: auto !important;
}
.hero-slot.slot-fill > span > button {
  display: flex !important;
  height: 100% !important;
  width: 100% !important;
}
.hero-slot.slot-fill .slot-fill-item {
  position: absolute;
  inset: 0;
  height: auto !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
}
.bag-keep-hero .bag-keep-grid {
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 0.32rem;
}
.bag-keep-hero .keep-slot {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
}
.bag-keep-pages {
  display: flex;
  align-items: center;
  gap: 0.22rem;
}
.bag-keep-page {
  display: inline-flex;
  min-width: 1.7rem;
  min-height: 1.7rem;
  margin: 0;
  padding: 0 0.28rem;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 1px solid #c4a060;
  border-radius: 4px;
  background: rgba(18, 14, 8, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.12);
  color: #f3e2b0;
  font-family: var(--font-heading), Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .bag-keep-page:hover {
    color: #fff4d8;
    border-color: #e4c57a;
  }
}
.bag-keep-page:focus-visible {
  color: #fff4d8;
  border-color: #e4c57a;
  outline: 2px solid #e4c57a;
  outline-offset: 1px;
}
.bag-keep-page-active {
  background: rgba(212, 174, 98, 0.38);
  border-color: #e4c57a;
  color: #fff8e0;
}
.bag-keep-hero .bag-keep-page-pad {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  visibility: hidden;
  pointer-events: none;
}
.energy-keep {
  position: relative;
  width: min(17.5rem, 52vw);
  flex-shrink: 0;
  height: 2.55rem;
  aspect-ratio: auto;
  background: none;
  filter: none;
}
.energy-keep::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 0;
  top: 0.22rem;
  right: 0;
  bottom: 0.22rem;
  left: 1.05rem;
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-radius: 999px;
  background-color: rgba(14, 8, 4, 0.42);
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
}
.energy-keep-bolt {
  position: absolute;
  z-index: 2;
  top: 50%;
  bottom: auto;
  left: 0;
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(212, 174, 98, 0.7);
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, rgba(243, 226, 176, 0.28), transparent 58%),
    rgba(18, 10, 5, 0.88);
  box-shadow: inset 0 1px 1px rgba(243, 226, 176, 0.28),
    0 0 0 1px rgba(74, 48, 16, 0.65),
    0 3px 8px rgba(8, 4, 2, 0.4);
}
.energy-keep-bolt::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0.22rem;
  border: 1px solid rgba(243, 226, 176, 0.22);
  border-radius: 999px;
}
.energy-keep-bolt svg {
  width: 58%;
  height: 68%;
  overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(18, 8, 4, 0.75));
}
.energy-keep-trough {
  position: absolute;
  z-index: 1;
  top: 0.48rem;
  right: 0.5rem;
  bottom: 0.48rem;
  left: 2.72rem;
  overflow: hidden;
  border: 1px solid rgba(212, 174, 98, 0.22);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(243, 226, 176, 0.08), transparent 42%),
    rgba(8, 4, 2, 0.48);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.energy-keep [role="meter"] {
  height: 100%;
  background: transparent !important;
  border: 0;
  box-shadow: none;
}
.energy-keep .meter-fill {
  background: linear-gradient(180deg, #c5e08a, #6aa246 55%, #3f6a28) !important;
  opacity: 1;
}
.energy-keep .meter-label {
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f3e2b0;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 2px rgba(18, 8, 4, 0.85);
}
.energy-meter {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.energy-meter > .energy-keep {
  min-width: 0;
  flex: 1 1 auto;
}
.energy-shop-open {
  position: relative;
  display: grid;
  flex: 0 0 1.65rem;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 1px solid #b38b48;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 20%, #705128, #291b0d 75%);
  box-shadow: inset 0 1px 2px #f3e2b044, 0 2px 5px #08040280;
  color: #f3e2b0;
  font: 700 1.2rem/1 ui-serif, Georgia, serif;
  cursor: pointer;
}
.energy-shop-open::before {
  content: "";
  position: absolute;
  inset: -0.5rem -0.15rem;
}
.energy-shop-open:hover {
  filter: brightness(1.2);
}
.energy-shop-open:focus-visible,
.energy-shop-close:focus-visible,
.energy-shop-buy:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 3px;
}
.energy-meter:has(.energy-shop-open:hover) .energy-meter-tooltip,
.energy-meter:has(.energy-shop-open:focus-visible) .energy-meter-tooltip {
  display: none;
}
.energy-shop-dialog {
  position: fixed;
  inset: 0;
  isolation: isolate;
  width: min(28.5rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 1.65rem 1.5rem 1.3rem;
  overflow: auto;
  border: 1px solid #bea06b;
  border-radius: 1.3rem;
  background: radial-gradient(ellipse at 50% 0%, #fffdf4b3, transparent 60%),
    linear-gradient(165deg, #fff9ebbd, #f6ecd6a6),
    url("/ui/chrome/parchment.jpg") center / 32rem;
  box-shadow: inset 0 0 0 3px #fffaf0c7, inset 0 0 0 4px #b5955c52, 0 0 0 1px #fff4dca6, 0 3px 0 #a28b65, 0 20px 65px #20170866;
  color: #433524;
  text-align: left;
}
.energy-shop-dialog[open] {
  animation: energy-shop-enter 180ms ease-out both;
}
.energy-shop-dialog::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 5px 5px auto;
  aspect-ratio: 3 / 2;
  border-radius: 1rem 1rem 0 0;
  background: linear-gradient(180deg, transparent 58%, #f8efdc80 82%, #f8efdc),
    url("/ui/energy-shop/duel-background-v2.webp") center top / cover;
  mask-image: linear-gradient(#000 78%, transparent);
  pointer-events: none;
}
.energy-shop-dialog::backdrop {
  background: #29271d66;
  backdrop-filter: blur(4px);
}
.energy-shop-trim {
  position: absolute;
  z-index: -1;
  inset: 7px;
  border: 1px solid #b6986033;
  border-radius: 0.95rem;
  pointer-events: none;
}
.energy-shop-trim svg {
  position: absolute;
  width: 3rem;
  height: 3rem;
  color: #b18b4e;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.8;
  filter: drop-shadow(0 1px #fff9ea);
}
.energy-shop-trim [data-corner="top-left"] {
  top: 0;
  left: 0;
}
.energy-shop-trim [data-corner="bottom-left"] {
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
}
.energy-shop-trim [data-corner="bottom-right"] {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
.energy-shop-close {
  position: absolute;
  z-index: 1;
  top: 0.65rem;
  right: 0.65rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid #b8a582a6;
  border-radius: 50%;
  background: linear-gradient(#fffdf4, #edddbe);
  box-shadow: inset 0 0 0 2px #fff8e8, 0 1px 3px #8d734b24;
  color: #756246;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.energy-shop-close::before {
  content: "";
  position: absolute;
  inset: -0.375rem;
}
.energy-shop-close:hover {
  background: #fffdf8;
  color: #403021;
}
.energy-shop-dialog .energy-shop-close:focus-visible,
.energy-shop-dialog .energy-shop-buy:focus-visible {
  outline: 2px solid #6d5636;
  outline-offset: 3px;
}
.energy-shop-heading {
  display: flex;
  min-height: 12.4rem;
  flex-direction: column;
  align-items: center;
  padding-top: 0.5rem;
  margin-bottom: 0.85rem;
  text-align: center;
}
.energy-shop-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid #91ac768c;
  border-radius: 0.3rem;
  background: linear-gradient(#f1f5df, #dce7bb);
  box-shadow: inset 0 0 0 2px #f6f9e78c, 0 2px 4px #7f944d14;
  color: #4e713b;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.energy-shop-kicker::before,
.energy-shop-kicker::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.3rem;
  height: 0.35rem;
  border-top: 1px solid #b8995b80;
  border-bottom: 1px solid #b8995b40;
  transform: translateY(-50%);
}
.energy-shop-kicker::before {
  right: calc(100% + 0.65rem);
  border-radius: 0 0 0 100%;
}
.energy-shop-kicker::after {
  left: calc(100% + 0.65rem);
  border-radius: 0 0 100% 0;
}
.energy-shop-kicker svg {
  width: 0.7rem;
  height: 0.85rem;
}
.energy-shop-heading h2 {
  max-width: 10rem;
  margin-top: 0.65rem;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: clamp(1.75rem, 6vw, 2rem);
  font-weight: 700;
  line-height: 1.12;
  color: #443320;
  text-shadow: 0 1px #fffdf6, 0 0 14px #fff8e8;
}
.energy-shop-heading p {
  max-width: 11rem;
  margin-top: 0.65rem;
  color: #655138;
  font-size: 0.75rem;
  line-height: 1.5;
  text-shadow: 0 1px 5px #fff8e8;
}
.energy-shop-offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.85rem;
}
.energy-shop-offer {
  --energy-offer-rgb: 59 122 164;
  --energy-offer-accent: #3578a6;
  --energy-offer-tint: #e6f3fb;
  --energy-offer-button: #28638c;
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.9rem 0.85rem;
  border: 1px solid rgb(var(--energy-offer-rgb) / 0.42);
  border-radius: 0.95rem;
  background: radial-gradient(ellipse at 50% 0%, #ffffffc7, transparent 55%),
    linear-gradient(180deg, var(--energy-offer-tint), #fffdf8 62%);
  box-shadow: inset 0 0 0 3px #ffffffbf, inset 0 0 0 4px rgb(var(--energy-offer-rgb) / 0.12), 0 5px 12px #6c573012;
  text-align: center;
}
.energy-shop-offer::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgb(var(--energy-offer-rgb) / 0.13);
  border-radius: 0.55rem;
  pointer-events: none;
}
.energy-shop-offer::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border: 1px solid rgb(var(--energy-offer-rgb) / 0.55);
  background: var(--energy-offer-tint);
  transform: rotate(45deg);
  pointer-events: none;
}
.energy-shop-offer[data-currency="DP"] {
  --energy-offer-rgb: 138 100 168;
  --energy-offer-accent: #8860a7;
  --energy-offer-tint: #f0e8fa;
  --energy-offer-button: #714692;
}
.energy-shop-currency-emblem {
  position: relative;
  display: grid;
  width: 4.2rem;
  height: 4.2rem;
  place-items: center;
  border: 1px solid rgb(var(--energy-offer-rgb) / 0.38);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 24%, #fff, #ffffff66 52%, transparent 75%),
    var(--energy-offer-tint);
  box-shadow: inset 0 0 0 3px #fffdf4b3, inset 0 0 0 4px rgb(var(--energy-offer-rgb) / 0.18), 0 4px 8px rgb(var(--energy-offer-rgb) / 0.12);
}
.energy-shop-currency-emblem::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgb(var(--energy-offer-rgb) / 0.26);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fffdf466;
}
.energy-shop-currency-emblem::after {
  content: "";
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle at 50% 3px, var(--energy-offer-accent) 1.5px, transparent 2px),
    radial-gradient(circle at 3px 50%, var(--energy-offer-accent) 1.5px, transparent 2px),
    radial-gradient(circle at calc(100% - 3px) 50%, var(--energy-offer-accent) 1.5px, transparent 2px),
    radial-gradient(circle at 50% calc(100% - 3px), var(--energy-offer-accent) 1.5px, transparent 2px);
  opacity: 0.6;
  pointer-events: none;
}
.energy-shop-currency-emblem img {
  width: 3.85rem;
  height: 3.85rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgb(var(--energy-offer-rgb) / 0.25));
}
.energy-shop-currency-label {
  width: calc(100% - 0.6rem);
  margin-top: 0.7rem;
  padding: 0.22rem 0.5rem;
  background: linear-gradient(90deg, transparent, rgb(var(--energy-offer-rgb) / 0.13) 18% 82%, transparent);
  border-block: 1px solid rgb(var(--energy-offer-rgb) / 0.18);
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%, 5px 50%);
  color: var(--energy-offer-accent);
  font-size: 0.8rem;
  font-weight: 700;
}
.energy-shop-amount {
  display: flex;
  flex-direction: column;
  margin-top: 0.45rem;
  color: #384d32;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 2.1rem;
  line-height: 1.15;
  text-shadow: 0 1px #fff, 0 2px 2px #5b71431a;
}
.energy-shop-amount > span {
  margin-top: 0.1rem;
  color: #74654f;
  font-family: var(--font-ui), ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
}
.energy-shop-availability {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 0.7rem 0;
}
.energy-shop-charges {
  display: flex;
  gap: 0.4rem;
}
.energy-shop-charges > span {
  width: 0.45rem;
  height: 0.45rem;
  border: 1px solid rgb(var(--energy-offer-rgb) / 0.32);
  border-radius: 2px;
  background: linear-gradient(#f4efe5, #dfd6c6);
  box-shadow: inset 0 1px #fffdf2;
  transform: rotate(45deg);
}
.energy-shop-charges > span[data-available="true"] {
  border-color: var(--energy-offer-accent);
  background: var(--energy-offer-accent);
  box-shadow: inset 0 1px #ffffff66, 0 1px 2px rgb(var(--energy-offer-rgb) / 0.2);
}
.energy-shop-remaining {
  color: #75664f;
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
}
.energy-shop-buy {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 3rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.6rem 0.35rem;
  border: 1px solid var(--energy-offer-button, #566d36);
  border-radius: 0.55rem;
  background: linear-gradient(#ffffff26, transparent 24%, #0000000d 50%), linear-gradient(var(--energy-offer-accent, #647d42), var(--energy-offer-button, #566d36));
  box-shadow: inset 0 1px #ffffff73, inset 0 0 0 3px #ffffff1c, 0 3px 0 rgb(var(--energy-offer-rgb, 82 106 48) / 0.23), 0 4px 7px #66543814;
  color: #fff;
  cursor: pointer;
  transition: filter 150ms, transform 150ms;
}
.energy-shop-buy::before,
.energy-shop-buy::after {
  content: "";
  position: absolute;
  top: calc(50% - 1.5px);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
.energy-shop-buy::before {
  left: 0.4rem;
}
.energy-shop-buy::after {
  right: 0.4rem;
}
.energy-shop-price {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.energy-shop-price > span {
  font-size: 0.75rem;
}
.energy-shop-buy-label {
  font-size: 0.63rem;
  line-height: 1.2;
}
.energy-shop-buy:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.energy-shop-buy:active:not(:disabled) {
  transform: translateY(1px);
}
.energy-shop-buy:disabled {
  border-color: rgb(var(--energy-offer-rgb, 115 103 82) / 0.25);
  background: linear-gradient(#ffffffad, #ffffff1a 48%, rgb(var(--energy-offer-rgb, 115 103 82) / 0.08) 51%, #ffffff45), var(--energy-offer-tint, #e9e1cf);
  box-shadow: inset 0 1px #ffffffd9, inset 0 0 0 3px #ffffff59, 0 2px 0 rgb(var(--energy-offer-rgb, 115 103 82) / 0.16);
  color: var(--energy-offer-button, #685b44);
  cursor: not-allowed;
}
.energy-shop-balance {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  width: 100%;
  margin-top: 0.75rem;
  color: #79674f;
  font-size: 0.6rem;
}
.energy-shop-balance::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  align-self: center;
  margin-bottom: 0.3rem;
  background: linear-gradient(90deg, transparent, rgb(var(--energy-offer-rgb) / 0.25), transparent);
}
.energy-shop-balance strong {
  color: #5f4f3b;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.energy-shop-feedback,
.energy-shop-insufficient {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
}
.energy-shop-feedback {
  color: #466b3f;
}
.energy-shop-feedback[data-error="true"],
.energy-shop-insufficient {
  color: #a13d38;
}
.energy-shop-insufficient {
  font-size: 0.65rem;
}
.energy-shop-loading {
  padding: 1rem 0;
  font-size: 0.85rem;
  color: #6c583b;
}
@keyframes energy-shop-enter {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 380px) {
  .energy-shop-dialog {
    padding: 1.5rem 1rem 1.15rem;
  }
  .energy-shop-heading {
    min-height: 10.5rem;
    padding-top: 0;
  }
  .energy-shop-heading h2 {
    max-width: 8.5rem;
    font-size: 1.4rem;
  }
  .energy-shop-heading p {
    max-width: 9rem;
    font-size: 0.7rem;
  }
  .energy-shop-offers {
    gap: 0.6rem;
  }
  .energy-shop-offer {
    padding: 0.85rem 0.55rem 0.75rem;
  }
  .energy-shop-amount {
    font-size: 1.8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .energy-shop-dialog[open] {
    animation: none;
  }
  .energy-shop-buy {
    transition: none;
  }
}
.hero-keep {
  position: relative;
  display: grid;
  width: fit-content;
  max-width: 100%;
  justify-items: stretch;
  justify-content: center;
}
.hero-keep-vitals {
  display: flex;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}
.hero-keep-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 1023px) {
  .hero-keep-stage > :nth-child(2) {
    order: -1;
  }
}
@media (min-width: 1024px) {
  .hero-keep-stage {
    flex-direction: row;
    align-items: stretch;
    gap: 1.5rem;
  }
  .hero-keep-stage > :nth-child(2) {
    flex: 0 0 auto;
  }
  .stats-keep-hero,
  .hero-bag-column {
    height: auto;
    min-height: 0;
    flex: 0 0 18.5rem;
    align-self: stretch;
  }
  .stats-keep-hero {
    overflow: hidden;
  }
  .hero-bag-column .bag-keep-hero {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }
}
.hero-keep-vitals .purse-rail {
  box-sizing: border-box;
  width: 100%;
  height: 4.55rem;
  padding: 0 0.65rem 0.08rem;
  border-style: solid;
  border-color: transparent;
  border-width: 1.08rem 2.5rem 1.12rem;
  background: none;
  border-image-source: url("/ui/chrome/name-stone.webp?v=2");
  border-image-slice: 108 250 112 250 fill;
  border-image-width: 1.08rem 2.5rem 1.12rem;
  border-image-repeat: stretch;
}
.hero-keep-vitals .purse-coin {
  gap: 0.42rem;
  font-size: 1.45rem;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
}
.hero-keep-vitals .purse-coin-icon {
  height: 2.15rem;
  width: 2.15rem;
}
.hero-keep-vitals .energy-meter {
  width: 19.15rem;
  display: flex;
  justify-content: center;
}
.hero-keep-named {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: -1.35rem;
}
.hero-keep-name {
  position: relative;
  z-index: 3;
  width: 19.3rem;
  height: 2.65rem;
}
.hero-keep-marks {
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: -0.28rem;
}
.hero-keep-might,
.hero-keep-glory {
  z-index: 4;
  color: #f3e2b0;
}
.hero-keep-might .might-mark-star,
.hero-keep-glory .glory-mark-wreath {
  width: 0.95rem;
  height: 0.95rem;
}
.hero-keep-might .might-mark-value,
.hero-keep-glory .glory-mark-value {
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 600;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
}
.hero-keep-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}
.hero-keep-slots {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.32rem;
}
.hero-slot {
  position: relative;
  height: 5.5rem;
  width: 5.5rem;
}
a.hero-slot {
  color: #e8d090;
  text-decoration: none;
}
.hero-slot svg {
  height: 1.85rem;
  width: 1.85rem;
  opacity: 0.88;
}
.hero-slot-filled svg {
  opacity: 1;
}
.hero-slot-art-fill {
  overflow: hidden;
  padding: 0;
}
.hero-slot-art {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.hero-slot-tag {
  position: absolute;
  z-index: 1;
  right: 0.22rem;
  bottom: 0.18rem;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #f0d494;
  text-shadow: 0 1px 2px rgba(30, 16, 6, 0.85);
}
.hero-keep-exp {
  position: relative;
  z-index: 4;
  width: 21.2rem;
  margin-top: -1.85rem;
}
.exp-keep-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.exp-keep-gate {
  margin-top: 0.35rem;
  max-width: 18rem;
  text-align: center;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #e8d2a0;
  text-shadow: 0 1px 2px rgba(30, 16, 6, 0.75);
}
.exp-keep {
  position: relative;
  width: min(17.5rem, 52vw);
  height: 2.55rem;
  aspect-ratio: auto;
  background: none;
  filter: none;
}
.exp-keep::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 0;
  top: 0.22rem;
  right: 0;
  bottom: 0.22rem;
  left: 1.05rem;
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-radius: 999px;
  background-color: rgba(14, 8, 4, 0.42);
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
}
.exp-keep-level-cluster {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(212, 174, 98, 0.7);
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, rgba(243, 226, 176, 0.28), transparent 58%),
    rgba(18, 10, 5, 0.88);
  box-shadow: inset 0 1px 1px rgba(243, 226, 176, 0.28),
    0 0 0 1px rgba(74, 48, 16, 0.65),
    0 3px 8px rgba(8, 4, 2, 0.4);
}
.exp-keep-level-cluster::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0.22rem;
  border: 1px solid rgba(243, 226, 176, 0.22);
  border-radius: 999px;
}
.exp-keep-level {
  position: static;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-family: var(--font-heading), Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1;
  color: #f3e2b0;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
}
.exp-keep-level-addon {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0.22rem;
  display: grid;
  place-items: center;
  transform: translateY(-32%);
}
.exp-keep-level-addon .hidden-level-badge {
  --hidden-level-compact-size: clamp(1.45rem, 5.4vw, 2rem);
}
.exp-keep-level-addon .game-hud-hidden-level {
  --hidden-level-compact-size: clamp(1.2rem, 4.6vw, 1.6rem);
}
.hero-portrait {
  position: relative;
  flex-shrink: 0;
}
.hero-portrait .hero-hidden-level {
  position: absolute;
  z-index: 5;
  top: calc(3.07% + 0.38rem);
  right: calc(4.63% + 0.38rem);
  --hidden-level-compact-size: clamp(1.85rem, 6.4vw, 2.55rem);
}
.exp-keep-trough {
  position: absolute;
  z-index: 1;
  top: 0.48rem;
  right: 0.5rem;
  bottom: 0.48rem;
  left: 2.72rem;
  overflow: hidden;
  border: 1px solid rgba(212, 174, 98, 0.22);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(243, 226, 176, 0.08), transparent 42%),
    rgba(8, 4, 2, 0.48);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.exp-keep [role="meter"] {
  height: 100%;
  background: transparent !important;
  border: 0;
  box-shadow: none;
}
.exp-keep .meter-fill {
  background: linear-gradient(180deg, #f3e2b0, #d4ae62 55%, #8a5e22) !important;
  opacity: 1;
}
.exp-keep .meter-label {
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f3e2b0;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 2px rgba(18, 8, 4, 0.85);
}
.purse-rail {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  gap: 0.35rem 0.7rem;
  width: min(22.25rem, 100%);
  height: 2.55rem;
  padding: 0.28rem 0.85rem;
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-radius: 999px;
  background-color: rgba(14, 8, 4, 0.42);
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  filter: none;
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
}
.purse-coin {
  gap: 0.4rem;
  color: #f3e2b0;
  font-family: var(--font-heading), Georgia, serif;
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
}
.purse-coin-icon {
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(70, 40, 10, 0.28));
}
.essential-pill {
  display: inline-flex;
  min-height: 2.1rem;
  min-width: 5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid #caa050;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 220, 160, 0.16), transparent 42%),
    linear-gradient(180deg, #7a3c22, #542412);
  padding: 0.22rem 0.85rem;
  color: #f0d494;
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.28),
    0 2px 3px rgba(50, 24, 8, 0.4);
}
.name-scroll {
  display: inline-flex;
  height: 2.85rem;
  min-width: 9.5rem;
  width: 12.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 1.8rem 0.3rem;
  text-align: center;
  background: url("/ui/chrome/name-stone.webp?v=2") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 4px rgba(40, 24, 8, 0.32));
}
.name-scroll-line {
  display: flex;
  min-width: 0;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: var(--font-heading), Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
}
.name-scroll-clan-mark {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.32rem;
}
.name-scroll-clan-mark > svg {
  width: 1rem;
  height: auto;
}
.name-scroll-tag {
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #e8d6a0;
}
.name-scroll-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-keep {
  position: relative;
  display: flex;
  width: min(15.5rem, 100%);
  aspect-ratio: 692 / 1057;
  margin-inline: auto;
  flex-direction: column;
  padding: 14% 23% 18% 20%;
  color: var(--ink-parchment);
  background: url("/ui/chrome/stats-stone.png") center / contain no-repeat;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 8px 14px rgba(40, 18, 6, 0.32));
}
.stats-keep-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.35rem;
}
.stats-keep-train {
  display: inline-flex;
  min-height: 2.25rem;
  min-width: 2.75rem;
  margin: 0;
  align-items: center;
  justify-content: flex-end;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 600;
  color: var(--ink-parchment);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #c4a060;
  transition: color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .stats-keep-train:hover {
    color: #2e1c0c;
  }
}
.stats-keep-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}
.stats-keep-row {
  display: flex;
  min-height: 1.55rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  cursor: help;
  outline: none;
}
.stats-keep-row:focus-visible {
  box-shadow: 0 0 0 1px rgba(226, 182, 92, 0.7);
}
.stats-keep-icon {
  height: 1.7rem;
  width: 1.7rem;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(70, 40, 10, 0.25));
}
.stats-keep-value {
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #3a2610;
  text-shadow: 0 1px 0 rgba(255, 244, 214, 0.35);
}
.stats-keep-bonus {
  margin-left: 0.2rem;
  font-size: 0.78em;
  font-style: italic;
  color: var(--success);
}
.stats-keep-hero-title {
  margin: 0;
  width: 100%;
  padding-inline: 0.25rem;
  font-family: var(--font-heading), Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.035em;
  text-align: center;
  color: var(--ink-parchment);
}
.stats-keep-hero .stats-keep-list {
  margin-top: 0.4rem;
  padding: 0.2rem 0.35rem 0.4rem;
}
.stats-keep-hero .stats-keep-row {
  min-height: 3.15rem;
}
.stats-keep-hero .stats-keep-icon {
  height: 2.9rem;
  width: 2.9rem;
}
.stats-keep-hero .stats-keep-value {
  font-family: var(--font-heading), Georgia, serif;
  font-style: normal;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
}
.stats-keep-hero .stats-keep-bonus {
  font-style: normal;
}
.stats-keep-tip {
  min-width: 13rem;
  padding: 0.7rem 0.85rem 0.8rem;
}
.stats-keep-tip h3 {
  margin: 0;
  font-family: var(--font-heading), Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}
.stats-keep-tip-copy {
  margin: 0.28rem 0 0.7rem;
  color: var(--text-secondary);
  font-size: 0.72rem;
  line-height: 1.35;
}
.stats-keep-tip-list {
  display: grid;
  gap: 0.28rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stats-keep-tip-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.85rem;
  font-size: 0.82rem;
  color: var(--text-primary);
}
.stats-keep-tip-amount {
  font-family: var(--font-data), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.stats-keep-tip-amount[data-bonus="true"] {
  color: var(--success);
}
.stats-keep-tip-total {
  margin-top: 0.18rem;
  padding-top: 0.38rem;
  border-top: 1px solid var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
  font-weight: 700;
}
.stats-keep-hero .stats-keep-train {
  display: flex;
  width: 100%;
  min-height: 3rem;
  flex-shrink: 0;
  margin-top: 0.35rem;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading), Georgia, serif;
  font-size: 1.35rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.035em;
  color: #f3e2b0;
  text-decoration: none;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
  border: 1px solid rgba(226, 182, 92, 0.7);
  background: rgba(62, 38, 16, 0.62);
  box-shadow: 0 2px 8px rgba(8, 4, 2, 0.28),
    inset 0 0 0 1px rgba(243, 226, 176, 0.16);
}
.stats-keep-hero .stats-keep-train:hover {
  color: #fff4d8;
  border-color: #f0d494;
  background: rgba(78, 48, 18, 0.72);
}
.might-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
  color: #f0d494;
  font-family: var(--font-data), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.might-mark-star {
  display: inline-flex;
  width: 0.92rem;
  height: 0.92rem;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(40, 20, 6, 0.45));
}
.might-mark-star svg {
  width: 100%;
  height: 100%;
}
.might-mark-value {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.glory-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
  color: #f0d494;
  font-family: var(--font-data), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.glory-mark-wreath {
  display: inline-flex;
  width: 0.98rem;
  height: 0.98rem;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(40, 20, 6, 0.45));
}
.glory-mark-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.glory-mark-fallback {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.85em;
  line-height: 1;
}
.glory-mark-value {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.stats-keep-hero .stats-keep-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding-inline: 0.25rem;
}
.vine-edge {
  pointer-events: none;
  position: absolute;
  z-index: 28;
  background-repeat: repeat-x;
  background-image: url("/ui/chrome/vine-strip.png");
  background-size: auto 100%;
}
.vine-edge-top {
  top: 6px;
  right: 90px;
  left: 90px;
  height: 42px;
}
.vine-edge-bottom {
  right: 90px;
  bottom: 6px;
  left: 90px;
  height: 42px;
  transform: scaleY(-1);
}
.nav-plank {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7),
    0 -1px 0 rgba(255, 220, 150, 0.12);
  border-top: 1px solid rgba(255, 214, 150, 0.16);
  border-bottom: 2px solid rgba(12, 6, 0, 0.58);
  background: linear-gradient(
    180deg,
    rgba(255, 220, 150, 0.03),
    rgba(0, 0, 0, 0.16)
  );
}
.nav-plank:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 220, 150, 0.06),
    rgba(0, 0, 0, 0.3)
  );
}
.nav-plank[aria-current="page"] {
  background: linear-gradient(
    90deg,
    var(--accent),
    var(--accent)
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    90deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 48%, #2c1004)
  );
  }
  color: #fff6de;
  box-shadow: inset 0 0 22px rgba(255, 190, 90, 0.4);
}
.nav-signboard {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.95rem 0 0.4rem;
  border: 0;
  background: transparent;
  color: #4a3824;
  font-variant: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  text-shadow: 0 1px 0 rgba(255, 244, 220, 0.35);
  box-shadow: none;
}
.nav-signboard::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.22rem -0.08rem -0.28rem;
  background: url("/ui/chrome/nav-stone-character.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(12, 4, 0, 0.4));
  transition: filter 160ms var(--ease-out);
}
.nav-signboard[data-loc="character"]::before {
  background-image: url("/ui/chrome/nav-stone-character.png");
}
.nav-signboard[data-loc="battlefield"]::before {
  background-image: url("/ui/chrome/nav-stone-battlefield.png");
}
.nav-signboard[data-loc="dungeon"]::before {
  background-image: url("/ui/chrome/nav-stone-dungeon.png");
}
.nav-signboard[data-loc="village"]::before {
  background-image: url("/ui/chrome/nav-stone-village.png");
}
.nav-signboard[data-loc="mine"]::before {
  background-image: url("/ui/chrome/nav-stone-mine.png");
}
.nav-signboard[data-loc="patrol"]::before {
  background-image: url("/ui/chrome/nav-stone-patrol.png");
}
.nav-signboard[data-loc="port"]::before {
  background-image: url("/ui/chrome/nav-stone-port.png");
}
.nav-signboard[data-loc="trade-route"]::before {
  background-image: url("/ui/chrome/nav-stone-trade-route.png");
}
.nav-signboard[data-loc="hall"]::before {
  background-image: url("/ui/chrome/nav-stone-hall.png");
}
.nav-signboard[data-loc="feeder"]::before {
  background-image: url("/ui/chrome/nav-stone-feeder.png");
}
.keep-nav .nav-signboard,
.keep-nav .nav-signboard-label {
  font-variant: normal;
  text-transform: none;
}
.nav-signboard-label {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-variant: normal;
  text-align: center;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-signboard-meta {
  align-self: flex-start;
  margin-top: 0.28rem;
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: right;
  text-transform: none;
  text-shadow: inherit;
}
.nav-signboard[aria-current="page"] {
  background: transparent;
  color: #3a2814;
  box-shadow: none;
  text-shadow: 0 1px 0 rgba(255, 236, 200, 0.45);
}
.nav-signboard[aria-current="page"]::before {
  filter: brightness(1.1) saturate(1.18) drop-shadow(0 2px 3px rgba(12, 4, 0, 0.4));
}
.nav-signboard:focus-visible {
  outline: none;
}
.nav-signboard:focus-visible::before {
  filter: drop-shadow(0 0 3px #d4ae62) drop-shadow(0 2px 2px rgba(12, 4, 0, 0.45));
}
.nav-signboard:active {
  transform: scale(0.985);
}
.nav-signboard:active::before {
  filter: brightness(0.94) drop-shadow(0 1px 1px rgba(12, 4, 0, 0.5));
}
@media (hover: hover) and (pointer: fine) {
  .nav-signboard:hover {
    background: transparent;
    color: #2a1408;
  }
  .nav-signboard:hover::before {
    filter: brightness(1.07) drop-shadow(0 2px 2px rgba(12, 4, 0, 0.45));
  }
  .nav-signboard[aria-current="page"]:hover {
    color: #2a1408;
  }
  .nav-signboard[aria-current="page"]:hover::before {
    filter: brightness(1.14) saturate(1.18) drop-shadow(0 2px 3px rgba(12, 4, 0, 0.4));
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-signboard:active {
    transform: none;
  }
}
.word-plaque {
  min-height: 2.7rem;
  border: 0;
  background: url("/ui/chrome/word-plaque.webp?v=2") center / 100% 100% no-repeat;
  padding: 0.35rem 1.5rem 0.4rem;
  color: #f3e0b8;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  box-shadow: none;
}
.parchment-frame {
  box-shadow: inset 0 0 0 2px #d4ae62,
    inset 0 0 0 8px rgba(196, 160, 90, 0.18);
}
@media (max-width: 767px) {
  .game-nav {
    gap: 0.28rem;
    padding: 0.1rem 0.2rem 0.7rem 0.55rem;
  }
  .game-nav-tab {
    height: 2.5rem;
    width: 9.5rem;
    min-width: 9.5rem;
    padding: 0.1rem 1.15rem 0.22rem;
    font-size: 13px;
  }
  .ornate-tab {
    min-height: 2rem;
    padding: 0.2rem 0.55rem;
    font-size: 12px;
  }
  .game-keep-inner {
    margin: 16px 12px 18px;
  }
  .settings-veil {
    inset: 16px 12px 18px;
  }
  .settings-veil.feeder-veil {
    padding: 0.75rem;
  }
  .feeder-sheet {
    height: min(58rem, calc(100dvh - 1.5rem));
  }
  .feeder-sheet-close {
    top: 0.6rem;
    right: 0.6rem;
  }
  .island-route-panel[data-panel="farm"] {
    max-height: min(58rem, calc(100dvh - 1.5rem));
  }
  .island-route-panel[data-panel="farm"] .island-route-panel-bar {
    top: 0.6rem;
    right: 0.6rem;
  }
  .forge-upgrade {
    padding: 0;
  }
  .amulet-scheme-altar {
    width: 12.6rem;
    height: 12.6rem;
  }
  .amulet-scheme-jewel {
    width: 6.4rem;
    height: 6.4rem;
  }
  .amulet-scheme-well.keep-slot {
    height: 5.35rem;
    width: 5.35rem;
  }
  .forge-item-picker {
    inset: -0.5rem -1.2rem;
    padding: 0.45rem;
  }
  .forge-item-picker-heading {
    padding: 0.7rem 0.75rem 0.6rem;
  }
  .forge-item-picker-heading h2 {
    font-size: 1rem;
  }
  .forge-item-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
    gap: 0.55rem 0.35rem;
    padding: 0.65rem 0.6rem 0.75rem;
  }
  .forge-upgrade-gear {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 5.25rem;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .forge-anvil {
    width: min(24rem, 96%);
    grid-template-columns: 4.85rem minmax(7.25rem, 1fr) 4.85rem;
    gap: 0.45rem 0.4rem;
  }
  .forge-anvil-channels {
    width: 12.25rem;
  }
  .forge-anvil .forge-anvil-frame {
    height: 7.35rem;
    width: 7.35rem;
  }
  .forge-anvil .forge-anvil-item {
    width: 82% !important;
    height: 82% !important;
  }
  .forge-anvil-cost {
    width: 6.1rem;
    height: 6.1rem;
    min-width: 6.1rem;
    padding: 0.55rem 0.58rem 0.5rem;
  }
  .forge-anvil-coin {
    height: 2.15rem;
    width: 2.15rem;
  }
  .forge-anvil-cost-n {
    font-size: 16px;
  }
  .forge-anvil-chance {
    font-size: 14px;
  }
  .keep-frame {
    border-width: 16px 12px 18px;
    border-image-width: 16px 12px 18px;
  }
  .portrait-jewel {
    width: 16.35rem;
  }
  .bag-keep-hero,
  .stats-keep-hero,
  .hero-bag-column {
    width: min(18.5rem, 100%);
    aspect-ratio: auto;
    height: auto;
    align-self: center;
  }
  .bag-keep-hero .bag-keep-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
  }
  .bag-keep-hero .keep-slot {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .hero-keep-named {
    margin-bottom: -1.1rem;
  }
  .hero-keep-name {
    width: 15.4rem;
    height: 2.25rem;
  }
  .hero-keep-exp,
  .hero-keep-vitals .energy-meter {
    width: 16.9rem;
  }
  .hero-keep-exp {
    margin-top: -1.45rem;
  }
  .keep-slot,
  .leather-pouch {
    height: 3.6rem;
    width: 3.6rem;
  }
  .hero-slot {
    height: 4.7rem;
    width: 4.7rem;
  }
  .purse-rail {
    width: min(18.5rem, 100%);
    height: 2.3rem;
    padding: 0.18rem 0.7rem;
    gap: 0.2rem 0.4rem;
  }
  .purse-coin {
    font-size: 0.92rem;
  }
  .purse-coin-icon {
    height: 1.35rem;
    width: 1.35rem;
  }
  .hero-keep-vitals {
    gap: 0.35rem;
    margin-bottom: 0.4rem;
  }
  .hero-keep-vitals .purse-rail {
    width: 100%;
    height: 3.85rem;
    padding: 0 0.45rem 0.06rem;
    border-width: 0.9rem 2.1rem 0.94rem;
    border-image-width: 0.9rem 2.1rem 0.94rem;
  }
  .hero-keep-vitals .purse-coin {
    font-size: 1.2rem;
  }
  .hero-keep-vitals .purse-coin-icon {
    height: 1.75rem;
    width: 1.75rem;
  }
  .stats-keep {
    width: min(20rem, 100%);
    aspect-ratio: auto;
    height: auto;
    padding: 1.85rem 2.15rem 2rem;
    background-size: 100% 100%;
  }
  .stats-keep-list {
    gap: 0.55rem;
    justify-content: flex-start;
  }
}
@media (max-height: 820px) {
  .portrait-jewel {
    width: 18rem;
  }
  .hero-keep-named {
    margin-bottom: -1.2rem;
  }
  .hero-keep-name {
    width: 16.95rem;
    height: 2.4rem;
  }
  .hero-keep-exp,
  .hero-keep-vitals .energy-meter {
    width: 18.6rem;
  }
  .hero-keep-exp {
    margin-top: -1.6rem;
  }
  .keep-slot {
    height: 3.8rem;
    width: 3.8rem;
  }
  .hero-slot {
    height: 5.05rem;
    width: 5.05rem;
  }
  .purse-rail {
    height: 2.4rem;
  }
  .hero-keep-vitals .purse-rail {
    height: 4.15rem;
    border-width: 0.98rem 2.28rem 1.02rem;
    border-image-width: 0.98rem 2.28rem 1.02rem;
  }
  .bag-keep .keep-slot {
    height: 3.15rem;
    width: 3.15rem;
  }
  .bag-keep-hero .keep-slot {
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
  }
  .bag-keep {
    border-width: 0.92rem 1.55rem 0.98rem;
    border-image-width: 0.92rem 1.55rem 0.98rem;
  }
  .stats-keep {
    width: min(14.25rem, 100%);
  }
}
@keyframes arena-hp-flash {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--hp) 70%, transparent);
  }
  100% {
    box-shadow: 0 0 0 8px transparent;
  }
}
.arena-hp-flash {
  animation: arena-hp-flash 360ms var(--ease-out, ease-out);
}
.fight-root {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 26rem;
  flex-direction: column;
}
.fight-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 15rem;
  overflow: hidden;
}
.fight-scene-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 15rem;
  overflow: hidden;
  background: #090a0d;
}
.fight-stage-3d {
  position: absolute;
  inset: 0;
  min-height: 0;
}
.fight-stage-3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.fight-3d-status {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: flex;
  max-width: calc(100% - 2rem);
  transform: translate(-50%, -50%);
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: rgba(7, 8, 11, 0.9);
  padding: 0.65rem 0.85rem;
  color: var(--text-primary);
  font-family: var(--font-data), monospace;
  font-size: 13px;
  text-align: center;
}
.fight-3d-status button {
  pointer-events: auto;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.3rem 0.55rem;
  color: var(--accent);
}
.fight-overlay {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
}
.fight-hud {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  align-items: center;
  gap: 8px;
}
.fight-hud[data-side="foe"] {
  flex-direction: row-reverse;
}
.fight-medallion {
  position: relative;
  display: flex;
  height: 4rem;
  width: 4rem;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: #0a0c10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}
.fight-portrait-frame {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  padding: 3px;
}
.fight-portrait-frame > * {
  height: 100% !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 50% !important;
}
.fight-hud-meter {
  min-width: 0;
  flex: 1 1 auto;
}
.fight-hud-name {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 3px;
  font-size: 14px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}
.fight-hud[data-side="foe"] .fight-hud-name {
  justify-content: flex-end;
}
.fight-hud-bar {
  height: 1.15rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.fight-hud[data-side="foe"] .fight-hud-bar {
  display: flex;
  justify-content: flex-end;
}
.fight-tally {
  flex: none;
  align-self: center;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 8px;
  font-size: 13px;
  color: var(--text-primary);
}
.fight-equipment-reveal {
  pointer-events: none;
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  max-width: calc(100% - 24px);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(212, 174, 98, 0.58);
  border-radius: 5px;
  background: rgba(8, 9, 12, 0.82);
  padding: 5px 7px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.48);
}
.fight-equipment-label,
.fight-equipment-none {
  color: #ead8b0;
  font-size: 11px;
  white-space: nowrap;
}
.fight-equipment-reveal ul {
  display: flex;
  gap: 4px;
}
.fight-equipment-reveal li {
  position: relative;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--rarity-common);
  border-radius: 4px;
  background: rgba(20, 17, 13, 0.88);
}
.fight-equipment-reveal li[data-rarity="FINE"] {
  border-color: var(--rarity-fine);
}
.fight-equipment-reveal li[data-rarity="RARE"] {
  border-color: var(--rarity-rare);
}
.fight-equipment-reveal li[data-rarity="EPIC"] {
  border-color: var(--rarity-epic);
}
.fight-equipment-reveal li[data-rarity="LEGENDARY"] {
  border-color: var(--rarity-legendary);
}
.fight-equipment-icon {
  width: 88%;
  height: 88%;
  object-fit: contain;
}
.fight-equipment-reveal li strong {
  position: absolute;
  right: 1px;
  bottom: 0;
  color: #fff2cd;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 9px;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}
.fight-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 90%, transparent);
  }
  padding: 10px 14px;
}
.fight-line {
  text-align: center;
  font-size: 15px;
  color: var(--text-primary);
}
.fight-rewards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
  font-size: 15px;
}
.fight-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
@media (max-width: 640px) {
  .battlefield-window.is-fight {
    min-height: 0;
  }
  .fight-root {
    height: auto;
    min-height: 0;
  }
  .fight-scene-shell {
    flex: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .fight-overlay {
    gap: 6px;
    padding: 8px;
  }
  .fight-medallion {
    height: 2.9rem;
    width: 2.9rem;
  }
  .fight-hud-name {
    font-size: 13px;
  }
  .fight-hud-bar {
    height: 0.95rem;
  }
  .fight-tally {
    display: none;
  }
  .fight-equipment-reveal {
    right: 8px;
    bottom: 7px;
    max-width: calc(100% - 16px);
    gap: 5px;
    padding: 4px 5px;
  }
  .fight-equipment-label {
    display: none;
  }
  .fight-equipment-reveal li {
    width: 1.75rem;
    height: 1.75rem;
  }
}
.keep-parchment[data-location="island"] {
  background-image: none;
  background-color: #0b1020;
  overscroll-behavior: none;
}
.keep-parchment[data-location="island"]::before {
  content: none;
}
.keep-parchment > .island-hold {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.keep-parchment > .island-hold[data-idle="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.keep-parchment[data-location="island"] > .vale-stage,
.keep-parchment[data-location="island"] > .island-stage,
.keep-parchment > .island-hold > .vale-stage,
.keep-parchment > .island-hold > .island-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.keep-parchment[data-location="island"] > header,
.keep-parchment[data-location="island"] > footer {
  z-index: 2;
}
.keep-parchment[data-location="island"] main {
  z-index: 1;
}
.island-stage {
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  background-color: transparent;
}
.island-stage:active {
  cursor: grabbing;
}
.island-stage:not([data-ready="true"]) {
  cursor: default;
}
.island-world-shift,
.island-chrome,
.island-build-dock,
.island-site-card {
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.island-stage[data-ready="true"] .island-world-shift,
.island-stage[data-ready="true"] .island-chrome,
.island-stage[data-ready="true"] .island-build-dock,
.island-stage[data-ready="true"] .island-site-card {
  opacity: 1;
  visibility: visible;
}
.island-reduced .island-world-shift,
.island-reduced .island-chrome,
.island-reduced .island-build-dock,
.island-reduced .island-site-card {
  transition: none;
}
.island-stage-fit,
.island-stage-fit:active {
  cursor: default;
}
.island-world-shift {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.island-world {
  --island-zoom: 1;
  position: relative;
  overflow: visible;
  background-color: #071018;
}
.island-map {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.island-field {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-repeat: repeat;
}
.island-build-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.island-build-mask path {
  fill: rgba(4, 10, 16, 0.45);
}
.island-iso-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.island-iso-grid line {
  stroke: rgba(243, 224, 184, 0.72);
  stroke-width: calc(1.6px / var(--island-zoom, 1));
}
.island-iso-foots {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.island-iso-foots polygon {
  fill: rgba(61, 138, 72, 0.14);
  stroke: rgba(243, 224, 184, 0.9);
  stroke-width: calc(2px / var(--island-zoom, 1));
}
.island-ghost-map {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}
.island-ghost-poly-ok {
  fill: rgba(61, 138, 72, 0.42);
  stroke: #5db86a;
  stroke-width: calc(2.6px / var(--island-zoom, 1));
}
.island-ghost-poly-bad {
  fill: rgba(192, 57, 43, 0.42);
  stroke: #e07060;
  stroke-width: calc(2.6px / var(--island-zoom, 1));
}
.island-ghost-art {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: 0.92;
}
.island-plot {
  position: absolute;
  z-index: 2;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  touch-action: none;
  pointer-events: none;
}
.island-plot-hit {
  position: absolute;
  min-width: 44px;
  min-height: 44px;
  pointer-events: auto;
}
.island-plot-shadow {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transform-origin: 0 0;
  pointer-events: none;
  filter: brightness(0) blur(9px);
  opacity: 0.38;
}
.island-roads {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
}
.island-roads polygon,
.island-roads ellipse {
  fill: #9a7f4e;
  fill-opacity: 0.5;
}
.island-prop {
  position: absolute;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(-6px 3px 5px rgba(20, 32, 14, 0.4));
}
.island-landmark {
  position: absolute;
  z-index: 3;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  touch-action: none;
}
.island-landmark-highlight {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  opacity: 0;
  filter: brightness(1) saturate(1);
  transition: opacity 140ms var(--ease-out),
    filter 140ms var(--ease-out);
}
.island-landmark:focus-visible {
  outline: 3px solid #f3e0b8;
  outline-offset: -4px;
}
.island-landmark:focus-visible .island-landmark-highlight {
  opacity: 1;
  filter: brightness(1.14) saturate(1.06);
}
@media (hover: hover) and (pointer: fine) {
  .island-landmark:hover .island-landmark-highlight {
    opacity: 1;
    filter: brightness(1.14) saturate(1.06);
  }
}
.island-plot:focus-visible {
  outline: 2px solid #f3e0b8;
  outline-offset: 2px;
}
.island-plot:hover,
.island-plot:focus-visible {
  z-index: 200 !important;
}
.island-plot:focus-visible .island-plot-art {
  filter: drop-shadow(0 4px 5px rgba(20, 32, 14, 0.35))
    drop-shadow(0 0 16px rgba(248, 230, 176, 0.9))
    brightness(1.14);
}
@media (hover: hover) and (pointer: fine) {
  .island-plot:hover .island-plot-art {
    filter: drop-shadow(0 4px 5px rgba(20, 32, 14, 0.35))
      drop-shadow(0 0 16px rgba(248, 230, 176, 0.9))
      brightness(1.14);
  }
}
.island-plot-lifted:hover .island-plot-art,
.island-plot-lifted:focus-visible .island-plot-art {
  filter: drop-shadow(0 4px 5px rgba(20, 32, 14, 0.35));
}
.island-plot-plate {
  position: absolute;
  inset: 6px;
  border: 1px solid #c4a15a;
  border-radius: 4px;
  background: #3d2a16cc;
  pointer-events: none;
}
.island-plot-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.island-plot-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(20, 32, 14, 0.35));
}
.island-smoke {
  position: absolute;
  z-index: 3;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  margin-top: -26px;
  pointer-events: none;
  transform: scale(calc(1 / max(var(--island-zoom), 0.12)));
  transform-origin: 50% 85%;
}
.island-smoke-heavy {
  width: 44px;
  height: 44px;
  margin-left: -22px;
  margin-top: -34px;
}
.island-smoke-puff {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(244, 228, 214, 0.95) 0%,
    rgba(210, 188, 186, 0.55) 48%,
    transparent 70%
  );
  filter: blur(0.8px);
  animation: island-smoke 3.2s var(--ease-out) infinite;
}
.island-smoke-puff:nth-child(1) {
  animation-delay: 0s;
}
.island-smoke-puff:nth-child(2) {
  width: 18px;
  height: 18px;
  animation-delay: 0.8s;
}
.island-smoke-puff:nth-child(3) {
  width: 24px;
  height: 24px;
  animation-delay: 1.6s;
}
.island-smoke-puff:nth-child(4) {
  width: 16px;
  height: 16px;
  animation-delay: 2.4s;
}
.island-smoke-violet .island-smoke-puff {
  background: radial-gradient(
    circle,
    rgba(226, 186, 220, 0.95) 0%,
    rgba(176, 132, 190, 0.5) 48%,
    transparent 70%
  );
}
.island-reduced .island-smoke-puff {
  animation: none;
  opacity: 0;
}
@keyframes island-smoke {
  0% {
    transform: translate(-50%, 0) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 0.92;
  }
  62% {
    opacity: 0.6;
  }
  100% {
    transform: translate(calc(-50% + 10px), -44px) scale(1.5);
    opacity: 0;
  }
}
.island-plot-name,
.island-plot-tip {
  pointer-events: none;
  background: #2a2218ee;
  border: 1px solid #c4a15a;
  color: #f3e0b8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.island-plot-name {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translate(-50%, 4px) scale(0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms var(--ease-out),
    transform 140ms var(--ease-out),
    visibility 0s linear 140ms,
    border-color 140ms var(--ease-out),
    color 140ms var(--ease-out),
    box-shadow 140ms var(--ease-out);
}
.island-plot:focus-visible:not(:hover) .island-plot-name {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
  border-color: #f8e6b0;
  color: #fff8dc;
  box-shadow: 0 0 12px rgba(212, 174, 98, 0.75);
}
.island-reduced .island-plot-name {
  transform: translate(-50%, 0) scale(1);
  transition: none;
}
.island-plot-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-9999px, -9999px, 0);
  border-color: #f8e6b0;
  color: #fff8dc;
  box-shadow: 0 0 12px rgba(212, 174, 98, 0.75);
  transition: opacity 120ms var(--ease-out),
    visibility 0s linear 120ms;
}
.island-plot-tip[data-show="true"] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.island-reduced .island-plot-tip {
  transition: none;
}
.island-plot-time {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #f3e0b8;
  font-size: 13px;
  text-shadow: 0 1px 2px #000;
}
.island-plot-site .island-plot-plate {
  opacity: 0.7;
}
.island-plot-lifted {
  opacity: 0.35;
}
.island-pulse {
  animation: island-pulse 1.4s ease-in-out infinite;
}
.island-reduced .island-pulse {
  animation: none;
}
@keyframes island-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
.island-chrome {
  pointer-events: auto;
  position: absolute;
  top: 7.5rem;
  right: 0.75rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.island-hint {
  pointer-events: none;
  position: absolute;
  left: 50%;
  bottom: 6.75rem;
  z-index: 3;
  transform: translateX(-50%);
  margin: 0;
  max-width: 28rem;
  padding: 6px 12px;
  border: 1px solid #c4a15a;
  border-radius: 4px;
  background: #2a2218ee;
  color: #f3e0b8;
  font-size: 13px;
  text-align: center;
}
.island-builders {
  margin: 0;
  padding: 6px 10px;
  border: 1px solid #c4a15a;
  border-radius: 4px;
  background: #2a2218ee;
  color: #f3e0b8;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 15px;
}
.island-message {
  margin: 0;
  max-width: 16rem;
  padding: 6px 10px;
  border: 1px solid #c4a15a;
  border-radius: 4px;
  background: #f4e6c8ee;
  color: #3d2a16;
  font-size: 13px;
}
.island-site-card {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: 7.5rem;
  z-index: 3;
  transform: translateX(-50%);
  min-width: 12rem;
  padding: 0.85rem 1rem;
}
.island-build-dock {
  pointer-events: none;
  position: absolute;
  right: 0.55rem;
  bottom: 2.55rem;
  z-index: 4;
  display: flex;
  width: min(46rem, calc(100% - 16.5rem));
  height: 5.9rem;
  align-items: center;
  justify-content: flex-end;
  gap: 0.28rem;
}
.island-corner-btns {
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  align-items: center;
  gap: 0.28rem;
}
.settings-cog {
  flex-shrink: 0;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(8, 10, 6, 0.45));
  transition: transform 160ms var(--ease-out),
    filter 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out),
    border-color 160ms var(--ease-out);
}
.settings-cog .island-dock-face {
  display: block;
  width: 100%;
  height: 100%;
}
.settings-cog:focus-visible {
  outline: 2px solid #f8e6b0;
  outline-offset: 2px;
}
.settings-cog:active {
  transform: scale(0.97);
}
.settings-cog-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.island-build-btn {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 5.9rem;
  height: 5.9rem;
  padding: 0;
  cursor: pointer;
  transition: transform 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out),
    border-color 160ms var(--ease-out);
}
.island-settings-btn {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 5.9rem;
  height: 5.9rem;
  filter: none;
  transition: transform 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out),
    border-color 160ms var(--ease-out);
}
.island-build-btn:focus-visible,
.island-settings-btn:focus-visible {
  outline: 2px solid #f8e6b0;
  outline-offset: 2px;
}
.island-build-btn:active {
  transform: scale(0.97);
}
.island-build-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.island-build-btn[aria-expanded="true"] {
  box-shadow: inset 0 1px 1px rgba(243, 226, 176, 0.28),
    0 0 0 1px rgba(74, 48, 16, 0.65),
    0 3px 8px rgba(8, 4, 2, 0.4),
    0 0 12px rgba(238, 196, 102, 0.75);
}
.island-utility-link,
.island-build-btn,
.island-settings-btn {
  overflow: visible;
  border: 1px solid rgba(212, 174, 98, 0.7);
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, rgba(243, 226, 176, 0.28), transparent 58%),
    rgba(18, 10, 5, 0.88);
  box-shadow: inset 0 1px 1px rgba(243, 226, 176, 0.28),
    0 0 0 1px rgba(74, 48, 16, 0.65),
    0 3px 8px rgba(8, 4, 2, 0.4);
  filter: none;
}
.island-utility-link::before,
.island-build-btn::before,
.island-settings-btn::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 2;
  inset: 0.28rem;
  border: 1px solid rgba(243, 226, 176, 0.22);
  border-radius: 999px;
}
.island-utility-link .island-dock-face,
.island-build-btn .island-dock-face,
.island-settings-btn .island-dock-face {
  position: absolute;
  z-index: 0;
  inset: 0.32rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(18, 10, 5, 0.88);
}
.island-utility-link .island-dock-face::after,
.island-build-btn .island-dock-face::after,
.island-settings-btn .island-dock-face::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(
    circle at 50% 42%,
    transparent 48%,
    rgba(18, 10, 5, 0.28) 100%
  );
}
.island-utility-link .island-utility-art,
.island-build-btn .island-build-art,
.island-settings-btn .settings-cog-art {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 74%;
  height: 74%;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(8, 4, 2, 0.55));
}
.island-build-strip {
  pointer-events: none;
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: stretch;
  height: 5.25rem;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  border-width: 0.68rem 1.45rem 0.72rem;
  background: none;
  border-image-source: url("/ui/chrome/name-stone.webp?v=2");
  border-image-slice: 108 250 112 250 fill;
  border-image-width: 0.68rem 1.45rem 0.72rem;
  border-image-repeat: stretch;
  clip-path: inset(0 0 0 100%);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8%);
  transform-origin: right center;
  transition: clip-path 240ms var(--ease-out),
    opacity 220ms var(--ease-out),
    transform 240ms var(--ease-out),
    visibility 0s linear 240ms;
}
.island-build-dock[data-open="true"] .island-build-strip {
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}
.island-build-strip-track {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 0.15rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c4a15a transparent;
}
.island-build-card {
  display: flex;
  min-height: 44px;
  min-width: 5.5rem;
  max-width: 7.4rem;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0.08rem 0.35rem 0.12rem;
  border: 0;
  background: transparent;
  color: #f3e2b0;
  text-align: center;
  cursor: pointer;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
  transition: filter 160ms var(--ease-out), color 160ms var(--ease-out);
}
.island-build-card:focus-visible {
  outline: 2px solid #f8e6b0;
  outline-offset: -2px;
}
.island-build-card:disabled {
  cursor: not-allowed;
}
.island-build-card-grey {
  filter: grayscale(1);
  opacity: 0.55;
}
.island-build-card-active {
  color: #fff8dc;
  filter: drop-shadow(0 0 6px rgba(212, 174, 98, 0.7));
}
.island-build-card-art {
  height: 2.15rem;
  width: 2.15rem;
  object-fit: contain;
}
.island-build-card-name {
  max-width: 100%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.1;
}
.island-build-card-meta {
  max-width: 100%;
  font-size: 11px;
  line-height: 1.15;
  color: #e8d6a0;
}
.island-reduced .island-build-strip {
  transition: none;
  transform: none;
}
@media (max-width: 1023px) {
  .island-build-dock {
    width: min(40rem, calc(100% - 1.2rem));
  }
}
@media (max-width: 767px) {
  .island-build-dock {
    right: 0.35rem;
    bottom: 2.3rem;
    width: min(100%, calc(100% - 0.7rem));
    height: 4.85rem;
  }
  .island-build-btn,
  .island-settings-btn {
    width: 4.85rem;
    height: 4.85rem;
  }
  .island-build-strip {
    height: 4.5rem;
    border-width: 0.55rem 1.1rem 0.58rem;
    border-image-width: 0.55rem 1.1rem 0.58rem;
  }
  .island-build-card {
    min-width: 4.6rem;
    max-width: 6.4rem;
  }
  .island-build-card-art {
    height: 1.7rem;
    width: 1.7rem;
  }
  .island-build-card-name {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .island-pulse {
    animation: none;
  }
  .island-smoke-puff {
    animation: none;
    opacity: 0;
  }
  .island-build-strip {
    transition: none;
    transform: none;
  }
}
.vale-stage {
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
.vale-stage:active {
  cursor: grabbing;
}
.vale-stage-fit,
.vale-stage-fit:active {
  cursor: default;
}
.vale-bleed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  filter: blur(18px) saturate(0.9) brightness(0.72);
  transform: scale(1.08);
}
.vale-world {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  backface-visibility: hidden;
}
.vale-land {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.vale-nav {
  position: absolute;
  inset: 0;
  touch-action: none;
}
.vale-mark {
  position: absolute;
  display: block;
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
  touch-action: none;
}
.vale-mark:focus-visible {
  outline: none;
}
.vale-mark-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 0 transparent);
  transition: filter 160ms ease-out;
}
.vale-mark:hover .vale-mark-art,
.vale-mark:focus-visible .vale-mark-art {
  filter: brightness(1.28) saturate(1.12)
    drop-shadow(0 0 10px rgba(243, 224, 184, 0.85));
}
.vale-mark-name {
  pointer-events: none;
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -4px);
  background: #2a2218ee;
  border: 1px solid #c4a15a;
  color: #f3e0b8;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: border-color 160ms ease-out,
    background-color 160ms ease-out,
    box-shadow 160ms ease-out,
    color 160ms ease-out;
}
.vale-mark:hover .vale-mark-name,
.vale-mark:focus-visible .vale-mark-name {
  background: #4a3414;
  border-color: #f8e6b0;
  color: #fff6d4;
  box-shadow: 0 0 14px rgba(212, 174, 98, 0.6);
}
.vale-mark-locked {
  cursor: default;
}
.vale-mark-locked .vale-mark-art {
  filter: grayscale(0.35) brightness(0.92);
}
.vale-mark-locked:hover .vale-mark-art {
  filter: grayscale(0.2) brightness(1.05);
}
.vale-mark-locked .vale-mark-name,
.vale-mark-locked:hover .vale-mark-name {
  border-color: #5c646e;
  color: #8a929c;
  background: #16181cee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.vale-mark-ready .vale-mark-art {
  filter: brightness(1.12) drop-shadow(0 0 8px rgba(196, 161, 90, 0.55));
}
.vale-mark-ready .vale-mark-name {
  box-shadow: 0 0 10px rgba(196, 161, 90, 0.8);
}
@media (max-width: 767px) {
  .vale-mark-name {
    font-size: 15px;
    padding: 7px 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vale-mark-ready .vale-mark-pin,
  .vale-mark-ready {
    animation: none;
  }
  .vale-mark-name {
    transition: none;
  }
}
@keyframes vale-smoke {
  0% {
    transform: translate(-50%, 0) scale(0.8);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -18px) scale(1.3);
    opacity: 0;
  }
}
@keyframes vale-glow {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.85;
  }
}
.battlefield-search {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: linear-gradient(
      105deg,
      var(--bg-panel-raised),
      var(--bg-panel)
    );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
      105deg,
      color-mix(in srgb, var(--bg-panel-raised) 96%, transparent),
      color-mix(in srgb, var(--bg-panel) 88%, var(--gold))
    );
  }
  padding: 14px 16px;
  box-shadow: 0 5px 14px rgba(55, 34, 16, 0.12);
}
.battlefield-search-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}
.battlefield-level-field {
  display: grid;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 12px;
}
.battlefield-level-field input {
  width: 6.5rem;
  min-height: 2.45rem;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg-panel-raised);
  padding: 6px 9px;
  color: var(--text-primary);
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.battlefield-level-separator {
  padding-bottom: 9px;
  color: var(--text-secondary);
}
.battlefield-search-button {
  display: inline-flex;
  min-height: 2.45rem;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}
.battlefield-opponent-card {
  display: grid;
  width: min(56rem, calc(100% - 32px));
  grid-template-columns: 13rem minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin: auto;
  border: 1px solid var(--border-gold);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border-gold) 78%, #563515);
  }
  border-radius: 8px;
  background: var(--bg-panel-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel-raised) 94%, transparent);
  }
  padding: 18px;
  box-shadow: 0 18px 44px rgba(30, 17, 7, 0.5),
    inset 0 0 0 2px var(--border-gold);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 18px 44px rgba(30, 17, 7, 0.5),
    inset 0 0 0 2px color-mix(in srgb, var(--border-gold) 16%, transparent);
  }
}
.battlefield-opponent-portrait {
  display: grid;
  place-items: center;
}
.battlefield-opponent-portrait-fallback {
  width: 13rem;
  height: 13rem;
  border: 2px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-app);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-app) 40%, var(--bg-panel));
  }
}
.battlefield-opponent-sheet {
  min-width: 0;
}
.battlefield-opponent-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.battlefield-opponent-tag {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--gold);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--gold) 14%, var(--bg-panel));
  }
  padding: 3px 8px;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
}
.battlefield-opponent-tag-danger {
  border-color: var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--danger) 60%, var(--border));
  }
  color: var(--danger);
}
.battlefield-base-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 16px;
}
.battlefield-base-stat {
  display: grid;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 78%, transparent);
  }
  padding: 7px 8px;
}
.battlefield-base-stat span {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
}
.battlefield-base-stat strong {
  color: var(--text-primary);
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.battlefield-equipment-hidden {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 5px;
  background: var(--bg-app);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-app) 7%, var(--bg-panel));
  }
  padding: 9px 11px;
  color: var(--text-secondary);
}
.battlefield-equipment-hidden > span:first-child {
  font-size: 24px;
  line-height: 1;
}
.battlefield-equipment-hidden > span:last-child {
  display: grid;
  gap: 1px;
}
.battlefield-equipment-hidden strong {
  color: var(--text-primary);
  font-size: 13px;
}
.battlefield-equipment-hidden small {
  font-size: 11px;
}
.battlefield-opponent-meta,
.battlefield-opponent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 12px;
}
.battlefield-opponent-meta {
  color: var(--text-secondary);
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.battlefield-opponent-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.battlefield-search-empty {
  align-self: center;
  width: min(30rem, calc(100% - 32px));
  margin: auto;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-panel-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel-raised) 92%, transparent);
  }
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 14px 36px rgba(30, 17, 7, 0.4);
}
.battlefield-search-empty-mark {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  margin: 0 auto 10px;
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  background: var(--gold);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--gold) 14%, var(--bg-panel));
  }
  color: var(--gold);
  font-family: var(--font-display), serif;
  font-size: 24px;
}
.battlefield-window.is-fight .fight-scene-shell {
  min-height: 18rem;
}
.field-token {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.field-token:disabled {
  cursor: not-allowed;
}
.field-token-live:hover {
  z-index: 8;
  filter: brightness(1.12);
}
.field-token-locked {
  filter: grayscale(0.55) brightness(0.72);
}
.field-plate {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-app);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-app) 78%, transparent);
  }
  padding: 1px 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-primary);
}
.field-plate-mute {
  color: var(--text-secondary);
}
.field-side-label {
  z-index: 2;
  margin: 0;
  border-radius: 4px;
  background: var(--bg-app);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-app) 62%, transparent);
  }
  padding: 2px 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field-bank {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(
    90deg,
    var(--bg-app) 0%,
    var(--bg-app) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bg-app) 78%, transparent) 0%,
    color-mix(in srgb, var(--bg-app) 42%, transparent) 100%
  );
  }
  overflow: auto;
}
.field-fighter {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-app);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-app) 62%, transparent);
  }
  padding: 6px;
  color: inherit;
  text-align: left;
}
.field-fighter-you {
  border-color: var(--accent);
}
.field-banner {
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-app);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-app) 82%, transparent);
  }
  padding: 8px 14px;
  color: var(--text-primary);
}
@media (max-width: 640px) {
  .battlefield-search-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .battlefield-level-field input {
    width: 100%;
  }
  .battlefield-search-button,
  .battlefield-search-controls > span:last-child {
    width: 100%;
    grid-column: 1 / -1;
    margin-left: 0;
  }
  .battlefield-opponent-card {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-block: 16px;
  }
  .battlefield-opponent-card .battlefield-opponent-portrait .relative.flex {
    width: 10rem;
    height: 10rem;
  }
  .battlefield-opponent-heading {
    align-items: center;
  }
  .battlefield-base-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .battlefield-opponent-actions,
  .battlefield-opponent-actions > span,
  .battlefield-opponent-actions button {
    width: 100%;
  }
}
@media (max-height: 480px) {
  .battlefield-window.is-fight .fight-root {
    height: 100%;
    min-height: 0;
  }
  .battlefield-window.is-fight .fight-scene-shell {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
  }
  .battlefield-window.is-fight .fight-controls button {
    min-height: 2.75rem;
    min-width: 2.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .arena-hp-flash {
    animation: none;
  }
}
.dungeon-screen {
  --dungeon-ink: #f3e2b0;
  --dungeon-paper: #f4e6c8;
  --dungeon-gold: #d4ae62;
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: min(82vh, 46rem);
  height: 100%;
  overflow: hidden;
  color: var(--dungeon-ink);
}
.dungeon-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.dungeon-screen::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 7, 12, 0.26) 0%, transparent 18%),
    radial-gradient(
      ellipse 82% 74% at 50% 55%,
      rgba(6, 5, 10, 0) 0%,
      rgba(6, 5, 10, 0.2) 100%
    );
}
.dungeon-window-body {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  min-height: inherit;
  flex-direction: column;
  overflow: auto;
  padding: 2.85rem 1rem 1.15rem;
}
.dungeon-screen-lobby .dungeon-window-body {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.dungeon-screen-active .dungeon-window-body,
.dungeon-screen-log .dungeon-window-body {
  padding: 0.55rem;
}
.dungeon-screen-log .dungeon-window-body {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.dungeon-window-panel {
  flex: 0 1 auto;
  width: min(84rem, 100%);
  min-height: 0;
  margin-inline: auto;
  overflow: auto;
  padding: 0.45rem 0.9rem 0.8rem;
  border-radius: 8px;
}
.dungeon-screen-lobby .dungeon-window-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(232, 206, 130, 0.55) transparent;
}
.dungeon-screen-lobby .dungeon-window-panel::-webkit-scrollbar {
  width: 0.45rem;
}
.dungeon-screen-lobby .dungeon-window-panel::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(232, 206, 130, 0.55);
}
.dungeon-screen-lobby:has(.dungeon-expedition-windows) .dungeon-window-panel {
  flex: 0 0 auto;
  overflow: visible;
}
.dungeon-screen-lobby:has(.dungeon-expedition-windows) .dungeon-window-body {
  overflow-y: auto;
}
.dungeon-window-panel.parchment,
.dungeon-expedition-window {
  color: #f3e2b0;
  background-color: rgba(10, 8, 14, 0.22);
  background-image: none;
  border: 1px solid rgba(232, 206, 130, 0.78);
  box-shadow: 0 8px 18px rgba(4, 2, 8, 0.28),
    inset 0 0 0 1px rgba(243, 226, 176, 0.18);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
  --dungeon-ink: #f3e2b0;
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --text-disabled: #b89a70;
  --ink-parchment: #f3e2b0;
  --bg-app: rgba(10, 6, 4, 0.28);
  --bg-panel: rgba(22, 12, 7, 0.18);
  --bg-panel-raised: rgba(28, 16, 8, 0.28);
  --bg-wood: rgba(28, 16, 8, 0.72);
  --wood-text: #f3e2b0;
  --border: rgba(212, 174, 98, 0.4);
  --border-strong: rgba(212, 174, 98, 0.55);
  --border-gold: #d4ae62;
}
.dungeon-rules-info {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  left: 0.4rem;
}
.dungeon-rules-info-button {
  appearance: none;
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  padding: 0 0 0.12rem;
  border: 2px solid #e8d6a0;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  color: #e8d6a0;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(18, 8, 4, 0.7));
  cursor: pointer;
  user-select: none;
}
.dungeon-rules-info-button:hover,
.dungeon-rules-info-button[aria-expanded="true"] {
  color: #fff1c4;
  border-color: #fff1c4;
}
.dungeon-rules-info-button:active {
  transform: scale(0.96);
}
.dungeon-rules-info-panel {
  position: absolute;
  top: calc(100% - 0.15rem);
  left: 0;
  width: min(24rem, calc(100vw - 1.2rem));
  max-height: min(70vh, 28rem);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.35rem 0.85rem 0.45rem;
  border: 1px solid rgba(212, 174, 98, 0.4);
  border-radius: 8px;
  background-color: rgba(14, 8, 4, 0.86);
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.42),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  color: #f3e2b0;
  -webkit-backdrop-filter: blur(6px) saturate(0.92);
  backdrop-filter: blur(6px) saturate(0.92);
}
.dungeon-rules-info-panel article {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.72rem 0.1rem;
  border-bottom: 1px solid color-mix(in srgb, rgba(212, 174, 98, 0.4) 72%, transparent);
}
.dungeon-rules-info-panel article:last-child {
  border-bottom: 0;
}
.dungeon-rules-info-panel article > span {
  padding-top: 0.1rem;
  color: #d4ae62;
}
.dungeon-rules-info-panel h3 {
  font-family: var(--font-display), Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
}
.dungeon-rules-info-panel p {
  margin-top: 0.25rem;
  color: #dcc8a0;
}
.dungeon-screen-heading {
  flex: 0 0 auto;
  padding: 0 0.25rem 0.7rem;
  border-bottom: none;
  text-align: center;
}
.dungeon-screen-heading h1,
.dungeon-ledger-heading h2,
.dungeon-expedition-intro h2,
.dungeon-stage-heading h2,
.dungeon-current-encounter h2,
.dungeon-floor-complete h2 {
  font-family: var(--font-display), Georgia, serif;
}
.dungeon-screen-heading h1 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.45rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.keep-parchment .island-route-panel[data-panel="dungeon"] .dungeon-screen-heading h1 {
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.dungeon-kicker {
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.dungeon-ledger-tabs {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  gap: 0.35rem;
  width: min(84rem, 100%);
  margin: 0 auto 0.7rem;
  padding: 0;
  border-bottom: none;
}
.dungeon-ledger-tabs button {
  min-width: 8.25rem;
  min-height: 44px;
  padding: 0.62rem 1rem 0.55rem;
  border: 1px solid rgba(232, 206, 130, 0.62);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(20, 24, 40, 0.58) 0%, rgba(8, 10, 20, 0.82) 100%);
  color: #fff6dc;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(4, 6, 14, 0.88);
  box-shadow: 0 2px 8px rgba(4, 6, 14, 0.35),
    inset 0 1px 0 rgba(243, 226, 176, 0.18);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
  backdrop-filter: blur(6px) saturate(1.08);
  transition: background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out);
}
.dungeon-ledger-tabs button:hover {
  color: #fffbeb;
  border-color: rgba(243, 226, 176, 0.92);
  background: linear-gradient(180deg, rgba(42, 32, 68, 0.55) 0%, rgba(10, 14, 28, 0.86) 100%);
}
.dungeon-ledger-tabs button:focus-visible {
  outline: 2px solid #fff6dc;
  outline-offset: 2px;
}
.dungeon-ledger-tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(96, 52, 140, 0.42) 0%, rgba(10, 16, 32, 0.86) 100%);
  color: #fffbeb;
  border-color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(4, 6, 14, 0.9);
  box-shadow: 0 2px 10px rgba(4, 6, 14, 0.4),
    inset 0 0 0 1px rgba(243, 226, 176, 0.35),
    inset 0 1px 0 rgba(255, 248, 220, 0.28);
}
.dungeon-ledger-page {
  padding: 0.2rem 0.15rem 0.25rem;
}
.dungeon-ledger-heading,
.dungeon-expedition-intro,
.dungeon-stage-heading,
.dungeon-stage-bar,
.dungeon-action-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.dungeon-ledger-heading h2 {
  margin-top: 0.12rem;
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f3e2b0;
}
.dungeon-entry-seal,
.dungeon-teeth-balance {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  padding: 0.4rem 0.72rem;
  border: 1px solid rgba(232, 206, 130, 0.7);
  border-radius: 999px;
  background: rgba(8, 10, 20, 0.62);
  color: #fff6dc;
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.16),
    0 1px 4px rgba(4, 6, 14, 0.28);
  text-shadow: 0 1px 2px rgba(4, 6, 14, 0.75);
}
.dungeon-shop-wallet {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.62rem;
  border: 1px solid rgba(232, 206, 130, 0.7);
  border-radius: 999px;
  background: rgba(8, 10, 20, 0.62);
  color: #fff6dc;
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.16),
    0 1px 4px rgba(4, 6, 14, 0.28);
  font-family: var(--font-data), ui-monospace, monospace;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(4, 6, 14, 0.75);
}
.dungeon-shop-wallet .currency-amount-icon {
  height: 1.2em;
  width: 1.2em;
}
.dungeon-shop-sections {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0.95rem 1.1rem;
  align-items: start;
}
.dungeon-shop-section h3 {
  margin: 0;
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dungeon-shop-goods {
  margin-top: 0.5rem;
  display: grid;
  justify-content: center;
  justify-items: center;
  gap: 0.45rem;
}
.dungeon-shop-goods[data-shop-goods="artifacts"] {
  grid-template-columns: repeat(2, minmax(0, 7.85rem));
}
.dungeon-shop-goods[data-shop-goods="armor"] {
  grid-template-columns: repeat(3, minmax(0, 7.85rem));
}
.dungeon-shop-item {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  justify-items: center;
  gap: 0.32rem;
  width: 100%;
  max-width: 7.85rem;
  min-width: 0;
  margin-inline: auto;
  padding: 0.4rem 0.34rem 0.34rem;
  border: 1px solid rgba(232, 206, 130, 0.42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 20, 34, 0.58) 0%, rgba(8, 10, 20, 0.78) 100%);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.1),
    0 3px 10px rgba(4, 6, 14, 0.28);
  text-align: center;
  cursor: help;
}
.dungeon-shop-item:hover,
.dungeon-shop-item:focus-within {
  border-color: rgba(243, 226, 176, 0.78);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.18),
    0 6px 14px rgba(4, 6, 14, 0.38);
}
.dungeon-shop-item-art {
  position: relative;
  display: grid;
  width: 3.75rem;
  max-width: 100%;
  aspect-ratio: 1;
  margin-inline: auto;
  justify-self: center;
  place-items: center;
  overflow: hidden;
  border: 2px solid;
  border-radius: 6px;
}
.dungeon-shop-item-art-image {
  width: 82%;
  height: 82%;
  object-fit: contain;
}
.dungeon-shop-item-name {
  min-width: 0;
  width: 100%;
  margin: 0;
  color: #fff6dc;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(4, 6, 14, 0.85);
  overflow-wrap: anywhere;
}
.dungeon-shop-item .dungeon-shop-buy {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.32rem 0.22rem;
  font-size: 0.78rem;
  cursor: pointer;
}
.dungeon-ledger-copy {
  margin-top: 0.45rem;
  color: var(--text-secondary);
}
.dungeon-expedition-intro {
  margin-top: 0;
  align-items: center;
  padding: clamp(0.85rem, 2.4vw, 1.15rem);
  border: 1px solid rgba(232, 206, 130, 0.78);
  border-left: 0.32rem solid var(--dungeon-gold);
  border-radius: 8px;
  background: rgba(10, 8, 14, 0.28);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.16);
}
.dungeon-expedition-intro > div:first-child {
  min-width: 0;
  max-width: 43rem;
}
.dungeon-expedition-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
}
.dungeon-expedition-intro h2 {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dungeon-skill-name h3 {
  font-family: var(--font-display), Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
}
.dungeon-expedition-intro p,
.dungeon-skill-name p {
  margin-top: 0.25rem;
  color: var(--text-secondary);
}
.dungeon-expedition-windows {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(min-content, 1fr) auto;
  gap: clamp(0.55rem, 1.8vw, 0.85rem);
  align-items: stretch;
  width: min(84rem, 100%);
  min-height: min-content;
  margin: 0.85rem auto 0;
  padding-bottom: 0.35rem;
}
.dungeon-expedition-window {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
}
.dungeon-expedition-window-well {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: transparent;
}
.dungeon-expedition-window-well:has(.dungeon-mile) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
}
.dungeon-expedition-window:has(.dungeon-hunt-roster) {
  height: auto;
  min-height: min-content;
  overflow: visible;
}
.dungeon-expedition-window-well:has(.dungeon-hunt-roster) {
  display: flex;
  align-items: stretch;
  height: auto;
  min-height: min-content;
  padding: 0.15rem;
}
.dungeon-hunt-roster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  justify-items: stretch;
  gap: 0.45rem 0.55rem;
  width: 100%;
  height: auto;
  min-height: min-content;
  padding: 0.35rem 0.45rem 0.55rem;
}
.dungeon-hunt-heading {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.2rem 0.9rem;
  min-width: 0;
  padding: 0.05rem 0.15rem 0.1rem;
}
.dungeon-hunt-heading-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}
.dungeon-hunt-heading .dungeon-kicker {
  margin: 0;
  color: #f3e2b0;
}
.dungeon-hunt-lead,
.dungeon-hunt-reset {
  margin: 0;
  color: #dcc8a0;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(4, 6, 14, 0.75);
}
.dungeon-hunt-reset {
  color: #f3e2b0;
  text-align: right;
}
.dungeon-hunt-slot {
  display: flex;
  min-width: 0;
  min-height: min-content;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.32rem;
  padding: 0.4rem 0.35rem 0.45rem;
  border: 1px solid rgba(212, 174, 98, 0.28);
  border-radius: 10px;
  background: rgba(14, 8, 4, 0.34);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.06);
}
.dungeon-hunt-portrait {
  position: relative;
  display: block;
  width: min(5rem, 100%);
  flex: 0 0 auto;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(232, 206, 130, 0.88);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(243, 226, 176, 0.18), transparent 58%),
    rgba(8, 6, 14, 0.55);
  box-shadow: 0 4px 12px rgba(4, 6, 14, 0.42),
    inset 0 0 0 1px rgba(243, 226, 176, 0.22);
  cursor: pointer;
}
.dungeon-hunt-portrait:hover,
.dungeon-hunt-portrait:focus-visible {
  border-color: #f3e2b0;
  box-shadow: 0 0 0 2px rgba(232, 206, 130, 0.35),
    0 6px 16px rgba(4, 6, 14, 0.5),
    inset 0 0 0 1px rgba(243, 226, 176, 0.3);
}
.dungeon-hunt-portrait:disabled {
  cursor: not-allowed;
}
.dungeon-hunt-portrait:disabled .dungeon-hunt-art {
  filter: grayscale(0.42) brightness(0.72);
}
.dungeon-hunt-portrait[data-outcome="won"] {
  border-color: rgba(143, 191, 122, 0.92);
  box-shadow: 0 4px 12px rgba(4, 6, 14, 0.42),
    inset 0 0 0 1px rgba(143, 191, 122, 0.28);
}
.dungeon-hunt-portrait[data-outcome="lost"] {
  border-color: rgba(196, 108, 96, 0.92);
  box-shadow: 0 4px 12px rgba(4, 6, 14, 0.42),
    inset 0 0 0 1px rgba(196, 108, 96, 0.28);
}
.dungeon-hunt-portrait[data-outcome="won"] .dungeon-hunt-art,
.dungeon-hunt-portrait[data-outcome="lost"] .dungeon-hunt-art {
  filter: grayscale(0.5) brightness(0.62);
}
.dungeon-hunt-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
.dungeon-hunt-result {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.dungeon-hunt-result[data-outcome="won"] {
  background: radial-gradient(circle at 50% 42%, rgba(98, 158, 96, 0.22), transparent 58%),
    rgba(8, 28, 14, 0.46);
}
.dungeon-hunt-result[data-outcome="lost"] {
  background: radial-gradient(circle at 50% 42%, rgba(168, 72, 58, 0.24), transparent 58%),
    rgba(32, 10, 10, 0.5);
}
.dungeon-hunt-mark-seal {
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(8, 6, 14, 0.78);
  box-shadow: 0 2px 8px rgba(4, 6, 14, 0.55);
}
.dungeon-hunt-result[data-outcome="won"] .dungeon-hunt-mark-seal {
  border: 1.5px solid #8fbf7a;
  color: #c6e8b4;
  box-shadow: 0 0 0 1px rgba(80, 140, 70, 0.4),
    0 2px 8px rgba(4, 6, 14, 0.55);
}
.dungeon-hunt-result[data-outcome="lost"] .dungeon-hunt-mark-seal {
  border: 1.5px solid #d48a7a;
  color: #f0b4a4;
  box-shadow: 0 0 0 1px rgba(160, 70, 58, 0.4),
    0 2px 8px rgba(4, 6, 14, 0.55);
}
.dungeon-hunt-mark {
  width: 64%;
  height: 64%;
}
.dungeon-hunt-attack {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(8, 6, 14, 0.58);
  color: #f8ecbf;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(4, 6, 14, 0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.dungeon-hunt-slot:hover .dungeon-hunt-attack,
.dungeon-hunt-portrait:focus-visible .dungeon-hunt-attack {
  opacity: 1;
}
.dungeon-hunt-copy {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  min-width: 0;
  justify-items: center;
  text-align: center;
  color: #f8ecbf;
}
.dungeon-hunt-copy h3 {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(0.82rem, 1.35vw, 0.98rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.15;
  color: #fff6dc;
  text-wrap: balance;
}
.dungeon-hunt-scale {
  margin: 0;
  color: #dcc8a0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.dungeon-hunt-scale strong {
  color: #f8ecbf;
  font-size: 0.84rem;
}
.dungeon-hunt-rewards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dungeon-hunt-rewards li {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.1rem 0.36rem 0.1rem 0.26rem;
  border: 1px solid rgba(232, 206, 130, 0.42);
  border-radius: 99px;
  background: rgba(14, 8, 4, 0.42);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  color: #f8ecbf;
  font-size: 0.72rem;
  font-weight: 700;
}
.dungeon-hunt-reward-icon {
  width: 0.95rem;
  height: 0.95rem;
  object-fit: contain;
}
.dungeon-hunt-status {
  margin: 0;
  color: #f3e2b0;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dungeon-hunt-slot[data-outcome="won"] .dungeon-hunt-status {
  color: #b7e0a4;
}
.dungeon-hunt-slot[data-outcome="lost"] .dungeon-hunt-status {
  color: #e0b4a0;
}
.dungeon-mile {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr) auto;
  grid-template-areas: "portrait copy fight";
  align-items: center;
  gap: 0.35rem 0.75rem;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0.3rem 0.55rem 0.35rem;
  overflow: hidden;
  color: #f8ecbf;
}
.dungeon-mile:not(:has(.dungeon-mile-portrait)) {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy fight";
}
.dungeon-mile-portrait {
  grid-area: portrait;
  width: 5.4rem;
  height: 5.4rem;
  justify-self: center;
  overflow: hidden;
  border: 2px solid rgba(232, 206, 130, 0.88);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(243, 226, 176, 0.18), transparent 58%),
    rgba(8, 6, 14, 0.55);
  box-shadow: 0 4px 12px rgba(4, 6, 14, 0.42),
    inset 0 0 0 1px rgba(243, 226, 176, 0.22);
}
.dungeon-mile-art {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
.dungeon-mile-copy {
  display: grid;
  grid-area: copy;
  align-content: center;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.38rem 0.7rem 0.42rem;
  overflow: visible;
  overflow-wrap: normal;
  word-break: normal;
  border: 1px solid rgba(232, 206, 130, 0.48);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(42, 28, 14, 0.62) 0%, rgba(10, 8, 16, 0.72) 100%);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.1),
    inset 0 1px 0 rgba(243, 226, 176, 0.16),
    0 8px 18px rgba(4, 6, 14, 0.32);
  text-shadow: 0 1px 2px rgba(4, 6, 14, 0.85);
}
.dungeon-mile-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}
.dungeon-mile-copy .dungeon-kicker {
  margin: 0;
  color: #f3e2b0;
}
.dungeon-mile-copy h3 {
  margin: 0;
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff6dc;
}
.dungeon-mile-level {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 0.28rem;
  margin: 0;
  padding: 0.12rem 0.5rem 0.14rem;
  border: 1px solid rgba(232, 206, 130, 0.5);
  border-radius: 99px;
  background: rgba(14, 8, 4, 0.48);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  color: #c9b58c;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dungeon-mile-level strong {
  color: #f8ecbf;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}
.dungeon-mile-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(212, 174, 98, 0.32);
  border-radius: 8px;
  background: rgba(14, 8, 4, 0.38);
}
.dungeon-mile-stats div {
  min-width: 0;
  padding: 0.28rem 0.2rem 0.32rem;
  text-align: center;
}
.dungeon-mile-stats div + div {
  border-left: 1px solid rgba(212, 174, 98, 0.22);
}
.dungeon-mile-stats dt {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  color: #c9b58c;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}
.dungeon-mile-stats dt img {
  width: 0.95rem;
  height: 0.95rem;
  object-fit: contain;
}
.dungeon-mile-stats dd {
  margin: 0.16rem 0 0;
  color: #f3dfb7;
  font-size: 0.86rem;
  font-weight: 800;
}
.dungeon-mile-stats dd small {
  display: block;
  margin-top: 0.08rem;
  color: rgba(243, 226, 176, 0.72);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.dungeon-mile-loot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
}
.dungeon-mile-titan {
  margin: 0;
  padding: 0.12rem 0.45rem;
  border: 1px solid rgba(146, 196, 220, 0.48);
  border-radius: 99px;
  background: rgba(18, 36, 48, 0.55);
  color: #c6e7f5;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dungeon-mile-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dungeon-mile-rewards li {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.14rem 0.42rem 0.14rem 0.32rem;
  border: 1px solid rgba(232, 206, 130, 0.42);
  border-radius: 99px;
  background: rgba(14, 8, 4, 0.42);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  color: #f8ecbf;
  font-weight: 700;
}
.dungeon-mile-reward-icon {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
}
.dungeon-mile-fight {
  grid-area: fight;
  justify-self: end;
  width: auto;
  min-height: 44px;
  white-space: nowrap;
}
.dungeon-action {
  min-height: 44px;
  min-width: 44px;
  border: 1px solid rgba(243, 226, 176, 0.78);
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 8px rgba(4, 6, 14, 0.35),
    inset 0 1px 0 rgba(243, 226, 176, 0.22);
}
.dungeon-screen .dungeon-action:disabled {
  opacity: 1;
  filter: none;
}
.dungeon-ledger-primary,
.dungeon-action-primary {
  background: linear-gradient(180deg, #f6e7b4 0%, #d4ae62 52%, #b8893a 100%);
  color: #1a140c;
  border-color: #f8edd0;
  text-shadow: none;
}
.dungeon-ledger-primary:disabled,
.dungeon-action-primary:disabled {
  background: linear-gradient(180deg, rgba(22, 26, 42, 0.7) 0%, rgba(8, 10, 20, 0.86) 100%);
  color: #fff6dc;
  border-color: rgba(232, 206, 130, 0.55);
  text-shadow: 0 1px 2px rgba(4, 6, 14, 0.85);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.14);
}
.dungeon-skill-buy,
.dungeon-shop-buy,
.dungeon-action-footer .dungeon-action:not(.dungeon-action-primary) {
  background: linear-gradient(180deg, rgba(20, 24, 40, 0.58) 0%, rgba(8, 10, 20, 0.84) 100%);
  color: #fff6dc;
  border-color: rgba(232, 206, 130, 0.7);
  text-shadow: 0 1px 2px rgba(4, 6, 14, 0.85);
}
.dungeon-skill-buy:disabled,
.dungeon-shop-buy:disabled {
  color: #f0e0b4;
  border-color: rgba(232, 206, 130, 0.45);
}
.dungeon-ledger-primary {
  flex: 0 0 auto;
}
.dungeon-blocking-reason,
.dungeon-cooldown {
  margin-top: 0.72rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--danger) 52%, rgba(212, 174, 98, 0.4));
  }
  border-radius: 8px;
  background: var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--danger) 18%, rgba(14, 8, 4, 0.42));
  }
  color: #f3e2b0;
}
.dungeon-cooldown time {
  white-space: nowrap;
}
.dungeon-skill-ledger {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}
.dungeon-skill-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(2.45rem, auto) auto;
  align-content: start;
  justify-items: center;
  gap: 0.52rem;
  min-width: 0;
  padding: 0.7rem;
  overflow: hidden;
  border: 1px solid rgba(212, 174, 98, 0.34);
  border-radius: 9px;
  background: radial-gradient(circle at 50% 27%, rgba(73, 103, 139, 0.18), transparent 50%),
    linear-gradient(180deg, rgba(38, 24, 15, 0.78), rgba(14, 8, 4, 0.58));
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.055),
    0 3px 9px rgba(8, 4, 2, 0.16);
  cursor: help;
  transition: background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out);
}
.dungeon-skill-card:hover,
.dungeon-skill-card:focus-visible,
.dungeon-skill-card:focus-within {
  border-color: rgba(232, 214, 160, 0.72);
  background-color: rgba(44, 28, 17, 0.84);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.12),
    0 6px 16px rgba(8, 4, 2, 0.3);
}
.dungeon-skill-card:focus-visible {
  outline: 2px solid rgba(243, 226, 176, 0.86);
  outline-offset: 2px;
}
.dungeon-skill-art {
  position: relative;
  width: min(8rem, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(243, 226, 176, 0.62);
  border-radius: 9px;
  background: #17100b;
  box-shadow: 0 5px 13px rgba(8, 4, 2, 0.48),
    0 0 0 1px rgba(43, 78, 118, 0.42),
    inset 0 0 0 1px rgba(17, 30, 57, 0.68);
}
.dungeon-skill-art::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(201, 231, 240, 0.16), transparent 36%),
    linear-gradient(0deg, rgba(8, 4, 2, 0.3), transparent 38%);
  box-shadow: inset 0 0 0.75rem rgba(7, 10, 20, 0.2);
}
.dungeon-skill-art-image {
  object-fit: cover;
  transition: filter 180ms var(--ease-out),
    transform 220ms var(--ease-out);
}
.dungeon-skill-card:hover .dungeon-skill-art-image,
.dungeon-skill-card:focus-visible .dungeon-skill-art-image,
.dungeon-skill-card:focus-within .dungeon-skill-art-image {
  filter: brightness(1.06) saturate(1.04);
  transform: scale(1.025);
}
.dungeon-skill-name {
  display: grid;
  min-height: 2.45rem;
  min-width: 0;
  place-items: center;
  text-align: center;
}
.dungeon-skill-name h3 {
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.dungeon-skill-buy {
  width: min(100%, 8.5rem);
  min-width: 0;
  padding-inline: 0.55rem;
  cursor: pointer;
}
.dungeon-teeth-amount {
  justify-content: center;
  gap: 0.3em;
  font-variant-numeric: tabular-nums;
}
.currency-amount-icon.dungeon-teeth-icon {
  width: 2.4em;
  height: 2.4em;
  margin-block: -0.65em;
  filter: drop-shadow(0 1px 1px rgba(20, 10, 4, 0.5));
}
.dungeon-teeth-balance .dungeon-teeth-icon {
  width: 2.6em;
  height: 2.6em;
}
.dungeon-skill-buy:disabled {
  cursor: not-allowed;
}
.dungeon-skill-tooltip-shell {
  width: min(22rem, calc(100vw - 1rem));
  --bg-panel-raised: #2c1a10;
  --bg-panel: #1a0e08;
  --bg-wood-dark: #160b06;
  --bg-wood: #4a2b15;
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --text-disabled: #b89a70;
  --border: rgba(212, 174, 98, 0.4);
  --border-strong: rgba(212, 174, 98, 0.55);
  --border-gold: #d4ae62;
  --gold: #d4ae62;
}
.dungeon-skill-tooltip .item-tooltip-name {
  overflow: visible;
  white-space: normal;
}
.dungeon-skill-tooltip-copy {
  color: #dcc8a0;
}
.dungeon-skill-tooltip-detail {
  margin: 0;
  padding: 0 0.8rem 0.72rem;
  color: #cbb58d;
  font-size: 0.72rem;
  line-height: 1.5;
}
.dungeon-skill-tooltip-detail strong {
  display: block;
  margin-bottom: 0.2rem;
  color: #d4ae62;
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.dungeon-cavern-stage {
  position: relative;
  width: min(52rem, 100%);
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  padding: clamp(0.75rem, 2vw, 1.2rem);
  border: 1px solid rgba(212, 174, 98, 0.4);
  border-radius: 8px;
  background-color: rgba(14, 8, 4, 0.42);
  background-image: none;
  color: #f3e2b0;
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --wood-text: #f3e2b0;
  --border: rgba(212, 174, 98, 0.4);
  --border-strong: rgba(212, 174, 98, 0.55);
  --border-gold: #d4ae62;
}
.dungeon-back-action {
  min-height: 44px;
  padding: 0.35rem 0.15rem;
  border: 0;
  background: none;
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
}
.dungeon-back-action:hover {
  color: #fff4d8;
}
.dungeon-back-action::before {
  content: "‹ ";
}
.dungeon-status-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.42rem;
}
.dungeon-status-plaque {
  display: grid;
  min-width: 4.6rem;
  min-height: 2.45rem;
  place-content: center;
  padding: 0.22rem 0.55rem;
  border: 1px solid rgba(212, 174, 98, 0.4);
  border-radius: 8px;
  background: rgba(22, 12, 7, 0.42);
  color: #f3e2b0;
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  text-align: center;
}
.dungeon-status-plaque span {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bfae90;
}
.dungeon-status-plaque strong {
  font-size: 0.88rem;
}
.dungeon-status-plaque[data-tone="energy"] strong {
  color: #78bd6d;
}
.dungeon-status-plaque[data-tone="teeth"] strong {
  color: #f1d9a0;
}
.dungeon-stage-heading {
  margin-top: 0.55rem;
  align-items: flex-end;
  padding: 0 0.15rem 0.55rem;
  border-bottom: 1px solid rgba(212, 174, 98, 0.35);
}
.dungeon-stage-heading h2 {
  margin-top: 0.08rem;
  color: #fff1c8;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dungeon-run-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem 0.8rem;
  color: #d4ae62;
  font-size: 0.78rem;
}
.dungeon-encounter-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  margin-top: 0.65rem;
  padding: 0.12rem 0.08rem 0.5rem;
  scrollbar-color: #80673f #201a14;
}
.dungeon-encounter-rail {
  display: flex;
  width: max-content;
  min-width: 100%;
  align-items: stretch;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dungeon-encounter-rail li {
  position: relative;
  display: grid;
  width: 9.15rem;
  min-height: 0;
  flex: 0 0 auto;
  grid-template-columns: 2.7rem minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 0.06rem 0.4rem;
  padding: 0.38rem 0.45rem;
  border: 1px solid rgba(212, 174, 98, 0.34);
  border-radius: 8px;
  background: rgba(20, 14, 10, 0.42);
}
.dungeon-encounter-rail li:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 100%;
  width: 0.62rem;
  height: 2px;
  background: #766247;
}
.dungeon-encounter-rail li + li {
  margin-left: 0.62rem;
}
.dungeon-encounter-rail li[data-state="CURRENT"] {
  border-color: rgba(243, 226, 176, 0.72);
  background: rgba(51, 40, 23, 0.62);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.12);
}
.dungeon-encounter-rail li[data-state="COMPLETED"] {
  border-color: rgba(73, 110, 71, 0.7);
  background: rgba(29, 43, 29, 0.5);
}
.dungeon-encounter-rail li[data-state="UPCOMING"] {
  color: #b1a58f;
}
.dungeon-rail-thumb {
  position: relative;
  grid-row: 1 / 4;
  width: 2.7rem;
  height: 2.7rem;
  overflow: hidden;
  border-radius: 0.32rem;
  background: #120e0a;
}
.dungeon-encounter-rail li[data-state="CURRENT"] .dungeon-rail-thumb {
  box-shadow: 0 0 0 1px rgba(243, 226, 176, 0.72);
}
.dungeon-encounter-rail li[data-state="COMPLETED"] .dungeon-rail-thumb {
  opacity: 0.58;
}
.dungeon-rail-mark {
  position: absolute;
  z-index: 1;
  right: 0.08rem;
  bottom: 0.08rem;
  display: grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(14, 8, 4, 0.82);
  color: #d4ae62;
  font-size: 0.68rem;
  line-height: 1;
  text-align: center;
}
.dungeon-encounter-rail li[data-state="COMPLETED"] .dungeon-rail-mark {
  color: #76a872;
}
.dungeon-rail-order,
.dungeon-rail-state {
  font-size: 0.6rem;
  color: #a99777;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.dungeon-rail-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.78rem;
  line-height: 1.12;
}
.dungeon-current-encounter {
  display: grid;
  grid-template-columns: minmax(12.5rem, 17rem) minmax(0, 1fr);
  align-items: start;
  gap: 0.85rem 1.1rem;
  margin-top: 0.55rem;
  padding: 0.7rem;
  border: 1px solid var(--dungeon-floor-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--dungeon-floor-accent) 72%, rgba(212, 174, 98, 0.4));
  }
  border-radius: 8px;
  background: linear-gradient(
      165deg,
      var(--dungeon-floor-bg) 0%,
      rgba(14, 8, 4, 0.38) 62%
    );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
      165deg,
      color-mix(in srgb, var(--dungeon-floor-bg) 38%, rgba(14, 8, 4, 0.55)) 0%,
      rgba(14, 8, 4, 0.38) 62%
    );
  }
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
}
.dungeon-encounter-art {
  display: grid;
  min-width: 0;
  gap: 0.42rem;
}
.dungeon-portrait-frame {
  position: relative;
  display: grid;
  grid-template: 1fr / 1fr;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 0.45rem;
  background: #120e0a;
}
.dungeon-portrait-face {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.dungeon-enemy-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.dungeon-boss-mark {
  position: absolute;
  z-index: 2;
  top: 0.45rem;
  left: 0.45rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid #ffcf79;
  background: #6d1e18;
  color: #fff1c8;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dungeon-enemy-sheet {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.dungeon-enemy-sheet h2 {
  margin-top: 0.12rem;
  color: var(--dungeon-floor-highlight);
  font-size: clamp(1.25rem, 2.8vw, 1.85rem);
  line-height: 1.08;
}
.dungeon-enemy-scale {
  margin-top: 0.28rem;
  color: var(--dungeon-floor-accent);
}
.dungeon-enemy-vital {
  display: grid;
  gap: 0.28rem;
}
.dungeon-enemy-hp-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  color: #e8dbc1;
}
.dungeon-enemy-hp-copy span {
  color: #bfae90;
}
.dungeon-enemy-hp {
  height: 0.72rem;
  margin-top: 0.34rem;
  overflow: hidden;
  border: 1px solid #120b08;
  border-radius: 999px;
  background: #2a1714;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.75);
}
.dungeon-enemy-hp span {
  display: block;
  height: 100%;
  background: #b42820;
  transition: width 240ms var(--ease-out);
}
.dungeon-enemy-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 0.75rem;
  border-top: 1px solid var(--dungeon-floor-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--dungeon-floor-accent) 58%, transparent);
  }
  border-bottom: 1px solid var(--dungeon-floor-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--dungeon-floor-accent) 58%, transparent);
  }
}
.dungeon-enemy-stats > div {
  min-width: 0;
  padding: 0.5rem 0.28rem;
  text-align: center;
}
.dungeon-enemy-stats > div + div {
  border-left: 1px solid var(--dungeon-floor-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-left: 1px solid color-mix(in srgb, var(--dungeon-floor-accent) 38%, transparent);
  }
}
.dungeon-enemy-stats dt {
  overflow: hidden;
  font-size: 0.62rem;
  color: #bfae90;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: capitalize;
}
.dungeon-enemy-stats dd {
  color: #fff1c8;
}
.dungeon-floor-complete {
  margin-top: 0.55rem;
  padding: clamp(0.9rem, 2.4vw, 1.4rem);
  border: 1px solid rgba(113, 157, 98, 0.55);
  border-radius: 8px;
  background: rgba(18, 32, 18, 0.42);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  text-align: center;
}
.dungeon-floor-complete h2 {
  margin-top: 0.25rem;
  color: #dce7c5;
  font-size: 1.65rem;
}
.dungeon-floor-complete p:last-child {
  margin-top: 0.45rem;
  color: #b8c5a5;
}
.dungeon-live-region:empty {
  display: none;
}
.dungeon-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  margin-top: 0.85rem;
  padding: 0.68rem 0.8rem;
  border: 1px solid rgba(212, 174, 98, 0.4);
  border-radius: 8px;
  background: rgba(22, 12, 7, 0.42);
  color: #f3e2b0;
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.08);
}
.dungeon-screen-lobby .dungeon-notice {
  border-color: rgba(212, 174, 98, 0.4);
  background: rgba(22, 12, 7, 0.42);
  color: #f3e2b0;
}
.dungeon-notice strong {
  flex-basis: 100%;
  font-family: var(--font-display), Georgia, serif;
}
.dungeon-notice-victory,
.dungeon-notice-summary {
  border-color: #617d51;
}
.dungeon-notice-loss,
.dungeon-notice-error {
  border-color: #8f4039;
}
.dungeon-action-spacer {
  height: 5.15rem;
}
.dungeon-action-footer {
  position: sticky;
  z-index: 5;
  bottom: calc(-1 * clamp(0.75rem, 2vw, 1.2rem));
  justify-content: flex-end;
  margin: 0 calc(-1 * clamp(0.75rem, 2vw, 1.2rem)) calc(-1 * clamp(0.75rem, 2vw, 1.2rem));
  padding: 0.65rem
    max(0.8rem, env(safe-area-inset-right))
    max(0.65rem, env(safe-area-inset-bottom))
    max(0.8rem, env(safe-area-inset-left));
  border-top: 1px solid rgba(212, 174, 98, 0.42);
  background: rgba(14, 8, 4, 0.62);
  -webkit-backdrop-filter: blur(6px) saturate(0.92);
  backdrop-filter: blur(6px) saturate(0.92);
}
.dungeon-action-primary {
  min-width: 10.5rem;
}
.dungeon-load-panel p {
  margin-top: 0.65rem;
}
.dungeon-battle-log {
  --dungeon-log-paper: rgba(14, 8, 4, 0.42);
  --dungeon-log-ink: #f3e2b0;
  --dungeon-log-line: rgba(212, 174, 98, 0.42);
  position: relative;
  display: flex;
  width: min(52rem, 100%);
  min-width: 0;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(212, 174, 98, 0.4);
  border-radius: 8px;
  background-color: rgba(14, 8, 4, 0.42);
  background-image: none;
  color: #f3e2b0;
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
}
.dungeon-battle-log-content {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: clamp(0.75rem, 2vw, 1.2rem);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.dungeon-battle-combatants {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.25rem minmax(0, 1fr);
  align-items: stretch;
  gap: 0.55rem 0.7rem;
}
.dungeon-battle-combatant {
  display: grid;
  min-width: 0;
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header"
    "art"
    "stats";
  gap: 0.45rem;
  padding: 0.6rem;
  border: 1px solid rgba(212, 174, 98, 0.4);
  border-radius: 8px;
  background: rgba(20, 14, 10, 0.42);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.08);
}
.dungeon-battle-combatant[data-side="hero"] {
  border-top: 3px solid #6f9256;
}
.dungeon-battle-combatant[data-side="enemy"] {
  border-top: 3px solid #a44738;
}
.dungeon-battle-combatant header {
  grid-area: header;
  min-width: 0;
  text-align: center;
}
.dungeon-battle-combatant h2 {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0.12rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(1rem, 2.2vw, 1.22rem);
  line-height: 1.15;
}
.dungeon-battle-art {
  display: grid;
  grid-area: art;
  gap: 0.4rem;
  min-width: 0;
}
.dungeon-battle-hero-frame,
.dungeon-battle-portrait {
  width: 100%;
}
.dungeon-battle-hero-frame {
  display: flex;
  min-width: 0;
  aspect-ratio: 1;
  background: #24170f;
}
.dungeon-battle-hero-frame .dungeon-battle-portrait {
  flex: 1;
  width: 100%;
  aspect-ratio: auto;
}
.dungeon-battle-portrait {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(232, 202, 139, 0.42);
  border-radius: 0.25rem;
  background: #0f0c09;
}
.dungeon-battle-portrait img,
.dungeon-battle-portrait .dungeon-enemy-portrait {
  object-fit: contain;
  object-position: center;
}
.dungeon-portrait-frame.dungeon-battle-portrait {
  overflow: hidden;
  aspect-ratio: 1;
  border: 0;
  box-shadow: none;
}
.dungeon-battle-vs {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  align-self: center;
  place-items: center;
  border: 1px solid #a97b36;
  border-radius: 50%;
  background: #3a2415;
  color: #f5c05a;
  box-shadow: inset 0 0 0 3px #1a100a,
    0 0 1.2rem rgba(183, 92, 39, 0.28);
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.05rem;
  font-weight: 900;
  transform: rotate(-4deg);
}
.dungeon-battle-health {
  min-width: 0;
}
.dungeon-battle-health > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.72rem;
}
.dungeon-battle-health-track {
  height: 0.7rem;
  margin-top: 0.25rem;
  overflow: hidden;
  border: 1px solid #18110c;
  border-radius: 999px;
  background: #38251b;
}
.dungeon-battle-health-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7f241d, #c34a35);
  transition: width 220ms var(--ease-out);
}
.dungeon-battle-health small {
  display: block;
  margin-top: 0.22rem;
  color: #b9a47e;
  font-size: 0.64rem;
}
.dungeon-battle-stats {
  display: grid;
  grid-area: stats;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid rgba(212, 174, 98, 0.28);
  border-radius: 8px;
  background: rgba(14, 8, 4, 0.28);
}
.dungeon-battle-stats > div {
  min-width: 0;
  padding: 0.38rem 0.18rem;
  text-align: center;
}
.dungeon-battle-stats > div + div {
  border-left: 1px solid rgba(212, 174, 98, 0.22);
}
.dungeon-battle-stats dt {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  color: #c9b58c;
  font-size: 0.58rem;
  line-height: 1;
}
.dungeon-battle-stats dt img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}
.dungeon-battle-stats dd {
  margin-top: 0.3rem;
  overflow: hidden;
  color: #f3dfb7;
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
}
.dungeon-battle-result {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  grid-template-areas: "outcome rewards"
    "damage damage";
  align-items: start;
  gap: 0.55rem 1rem;
  margin-top: 0.7rem;
  padding: 0.65rem 0.75rem 0.7rem;
  border: 1px solid #617d51;
  border-radius: 8px;
  background: rgba(14, 8, 4, 0.28);
}
.dungeon-battle-result[data-outcome="loss"] {
  border-color: #8f4039;
}
.dungeon-battle-outcome {
  display: flex;
  grid-area: outcome;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.35rem 0.85rem;
  text-align: left;
}
.dungeon-battle-outcome[data-outcome="win"] strong {
  color: #dce7c5;
}
.dungeon-battle-outcome[data-outcome="loss"] strong {
  color: #f0c4bc;
}
.dungeon-battle-outcome span {
  color: #d1bd95;
  font-size: 0.72rem;
}
.dungeon-battle-rewards {
  grid-area: rewards;
  min-width: 0;
}
.dungeon-battle-rewards > h2 {
  color: #e3c278;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
}
.dungeon-battle-rewards > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.45rem;
  margin-top: 0.4rem;
}
.dungeon-battle-rewards article {
  display: grid;
  min-width: 7.2rem;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.06rem 0.4rem;
  padding: 0.32rem;
  border: 1px solid rgba(212, 174, 98, 0.34);
  border-radius: 8px;
  background: rgba(20, 14, 10, 0.42);
}
.dungeon-battle-reward-icon {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  grid-row: 1 / 3;
  overflow: hidden;
  border: 1px solid #8f6632;
  border-radius: 0.22rem;
  background: #130e0a;
}
.dungeon-battle-reward-icon img {
  object-fit: cover;
}
.dungeon-battle-rewards article > span:nth-child(2) {
  color: #bda983;
  font-size: 0.62rem;
  text-transform: uppercase;
}
.dungeon-battle-rewards article > strong {
  font-size: 0.82rem;
}
.dungeon-battle-rewards > p {
  margin-top: 0.45rem;
  color: #c9b58c;
  font-size: 0.68rem;
}
.dungeon-battle-damage {
  display: grid;
  grid-area: damage;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(212, 174, 98, 0.28);
}
.dungeon-battle-damage > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.55rem;
  border-left: 3px solid #6f9256;
  border-radius: 8px;
  background: rgba(14, 8, 4, 0.22);
}
.dungeon-battle-damage > div + div {
  border-left-color: #a44738;
}
.dungeon-battle-damage dt {
  color: #cbb88f;
  font-size: 0.72rem;
}
.dungeon-battle-damage dd {
  font-size: 0.88rem;
  font-weight: 800;
}
.dungeon-battle-turns {
  margin-top: 0.7rem;
  border: 1px solid var(--dungeon-log-line);
  border-radius: 8px;
  background: rgba(14, 8, 4, 0.42);
}
.dungeon-battle-turns summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.8rem;
  color: #e3c278;
  cursor: pointer;
  font-family: var(--font-display), Georgia, serif;
  font-weight: 800;
  list-style-position: inside;
}
.dungeon-battle-turns summary span {
  color: #bca77f;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.65rem;
  font-weight: 500;
}
.dungeon-battle-turns ol {
  padding: 0 0.55rem 0.6rem;
}
.dungeon-battle-turns li {
  display: grid;
  grid-template-columns: 4.5rem minmax(9rem, 1fr) auto auto;
  align-items: center;
  gap: 0.45rem 0.75rem;
  min-height: 3.3rem;
  padding: 0.45rem 0.55rem;
  border-left: 3px solid #6f9256;
  border-bottom: 1px solid rgba(212, 174, 98, 0.16);
  background: rgba(111, 146, 86, 0.07);
}
.dungeon-battle-turns li[data-side="enemy"] {
  border-left-color: #a44738;
  background: rgba(164, 71, 56, 0.07);
}
.dungeon-battle-turn-round,
.dungeon-battle-turns li small {
  color: #a99572;
  font-size: 0.62rem;
}
.dungeon-battle-turns li > div {
  display: grid;
  gap: 0.08rem;
}
.dungeon-battle-turns li > div span {
  color: #c5b18a;
  font-size: 0.66rem;
}
.dungeon-battle-turn-damage {
  color: #efc77d;
  font-size: 0.72rem;
  white-space: nowrap;
}
.dungeon-battle-log-footer {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 0.65rem
    max(0.8rem, env(safe-area-inset-right))
    max(0.65rem, env(safe-area-inset-bottom))
    max(0.8rem, env(safe-area-inset-left));
  border-top: 1px solid var(--dungeon-log-line);
  background: rgba(14, 8, 4, 0.62);
  -webkit-backdrop-filter: blur(6px) saturate(0.92);
  backdrop-filter: blur(6px) saturate(0.92);
}
.dungeon-battle-log-back {
  min-width: min(16rem, 100%);
  min-height: 44px;
  border: 1px solid rgba(212, 174, 98, 0.55);
  box-shadow: 0 2px 6px rgba(8, 4, 2, 0.28),
    inset 0 0 0 1px rgba(243, 226, 176, 0.1);
}
@media (min-width: 1000px) {
  .dungeon-skill-ledger {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .dungeon-skill-card {
    grid-template-rows: auto minmax(1.9rem, auto) auto;
    gap: 0.4rem;
    padding: 0.6rem;
  }
  .dungeon-skill-art {
    width: min(7rem, 10dvh, 100%);
  }
}
@media (max-width: 899px) {
  .dungeon-skill-ledger {
    gap: 0.65rem;
  }
  .dungeon-skill-card {
    padding: 0.62rem;
  }
  .dungeon-skill-art {
    width: min(7rem, 100%);
  }
  .dungeon-current-encounter {
    grid-template-columns: minmax(12rem, 15.5rem) minmax(0, 1fr);
  }
  .dungeon-stage-bar {
    align-items: flex-start;
  }
}
@media (max-width: 639px) {
  .island-route-panel[data-panel="dungeon"] .island-route-panel-body {
    padding: 0;
  }
  .dungeon-window-body {
    padding: 2.85rem 0.7rem 0.85rem;
  }
  .dungeon-screen-active .dungeon-window-body,
  .dungeon-screen-log .dungeon-window-body {
    padding: 0.45rem;
  }
  .dungeon-window-panel {
    width: 100%;
    padding: 0.1rem 0.45rem 0.7rem;
  }
  .dungeon-screen-heading {
    padding-inline: 0.1rem;
  }
  .dungeon-ledger-tabs {
    padding-inline: 0.1rem;
  }
  .dungeon-ledger-tabs button {
    min-width: 0;
    flex: 1 1 0;
  }
  .dungeon-ledger-heading,
  .dungeon-expedition-intro,
  .dungeon-stage-heading,
  .dungeon-stage-bar {
    align-items: stretch;
    flex-direction: column;
  }
  .dungeon-expedition-intro {
    gap: 0.8rem;
  }
  .dungeon-expedition-actions {
    width: 100%;
    align-items: center;
  }
  .dungeon-expedition-actions .dungeon-entry-seal {
    flex: 0 0 auto;
  }
  .dungeon-ledger-primary {
    flex: 1 1 auto;
    min-width: 0;
  }
  .dungeon-expedition-windows {
    gap: 0.55rem;
    margin-top: 0.65rem;
  }
  .dungeon-hunt-roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    padding: 0.28rem 0.28rem 0.35rem;
  }
  .dungeon-hunt-heading {
    align-items: flex-start;
  }
  .dungeon-hunt-reset {
    text-align: left;
  }
  .dungeon-hunt-portrait {
    width: min(4.6rem, 46%);
  }
  .dungeon-hunt-attack {
    font-size: 0.68rem;
  }
  .dungeon-hunt-copy h3 {
    font-size: 0.88rem;
  }
  .dungeon-mile {
    grid-template-columns: 4.6rem minmax(0, 1fr);
    grid-template-areas: "portrait copy"
      "fight fight";
    gap: 0.25rem 0.5rem;
    padding: 0.22rem 0.4rem 0.28rem;
  }
  .dungeon-mile:not(:has(.dungeon-mile-portrait)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "fight";
  }
  .dungeon-mile-portrait {
    width: 4.6rem;
    height: 4.6rem;
  }
  .dungeon-mile-copy {
    padding: 0.28rem 0.45rem 0.32rem;
    gap: 0.2rem;
  }
  .dungeon-mile-copy h3 {
    font-size: 0.98rem;
  }
  .dungeon-mile-stats dt span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .dungeon-entry-seal,
  .dungeon-teeth-balance {
    align-self: flex-start;
  }
  .dungeon-shop-wallet {
    align-self: flex-end;
  }
  .dungeon-skill-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }
  .dungeon-skill-card {
    gap: 0.45rem;
    padding: 0.55rem;
  }
  .dungeon-skill-art {
    width: min(6rem, 100%);
  }
  .dungeon-skill-buy {
    width: 100%;
  }
  .dungeon-shop-sections {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .dungeon-shop-goods[data-shop-goods="artifacts"],
  .dungeon-shop-goods[data-shop-goods="armor"] {
    grid-template-columns: repeat(2, minmax(0, 7.85rem));
  }
  .dungeon-shop-buy {
    min-height: 44px;
  }
  .dungeon-cavern-stage {
    padding: 0.62rem;
  }
  .dungeon-status-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dungeon-status-plaque {
    min-width: 0;
  }
  .dungeon-stage-heading {
    margin-top: 0.55rem;
  }
  .dungeon-run-summary {
    justify-content: flex-start;
  }
  .dungeon-encounter-scroll {
    padding-bottom: 0.35rem;
  }
  .dungeon-current-encounter {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.65rem;
  }
  .dungeon-encounter-art {
    width: min(100%, 18rem);
    justify-self: center;
  }
  .dungeon-enemy-hp-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }
  .dungeon-enemy-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dungeon-enemy-stats > div:nth-child(4) {
    border-left: 0;
  }
  .dungeon-enemy-stats > div:nth-child(n + 4) {
    border-top: 1px solid var(--dungeon-floor-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in srgb, var(--dungeon-floor-accent) 38%, transparent);
    }
  }
  .dungeon-action-spacer {
    height: 11rem;
  }
  .dungeon-action-footer {
    bottom: -0.62rem;
    flex-direction: column;
    margin: 0 -0.62rem -0.62rem;
    padding-bottom: max(0.72rem, env(safe-area-inset-bottom));
  }
  .dungeon-action-footer .dungeon-action {
    width: 100%;
  }
  .dungeon-battle-log-content {
    padding: 0.62rem;
  }
  .dungeon-battle-combatants {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }
  .dungeon-battle-vs {
    width: 3rem;
    height: 3rem;
    justify-self: center;
    font-size: 1rem;
  }
  .dungeon-battle-combatant {
    padding: 0.65rem;
  }
  .dungeon-battle-art {
    width: min(100%, 22rem);
    justify-self: center;
  }
  .dungeon-battle-hero-frame,
  .dungeon-battle-portrait {
    width: 100%;
  }
  .dungeon-battle-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dungeon-battle-stats > div {
    display: block;
    padding: 0.38rem 0.18rem;
    text-align: center;
  }
  .dungeon-battle-stats > div + div {
    border-top: 0;
    border-left: 1px solid rgba(212, 174, 98, 0.22);
  }
  .dungeon-battle-stats > div:nth-child(4) {
    border-left: 0;
  }
  .dungeon-battle-stats > div:nth-child(n + 4) {
    border-top: 1px solid rgba(212, 174, 98, 0.22);
  }
  .dungeon-battle-stats dt {
    justify-content: center;
  }
  .dungeon-battle-stats dd {
    margin-top: 0.3rem;
  }
  .dungeon-battle-result {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "outcome"
      "rewards"
      "damage";
    padding: 0.55rem 0.6rem 0.6rem;
  }
  .dungeon-battle-outcome {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }
  .dungeon-battle-rewards article {
    flex: 1 1 7.2rem;
  }
  .dungeon-battle-damage {
    grid-template-columns: minmax(0, 1fr);
  }
  .dungeon-battle-turns li {
    grid-template-columns: 3.9rem minmax(0, 1fr) auto;
    gap: 0.35rem 0.5rem;
  }
  .dungeon-battle-turns li small {
    grid-column: 2 / -1;
  }
  .dungeon-battle-log-footer {
    padding-bottom: max(0.72rem, env(safe-area-inset-bottom));
  }
  .dungeon-battle-log-back {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dungeon-ledger-tabs button,
  .dungeon-enemy-hp span,
  .dungeon-battle-health-track > span {
    transition: none;
  }
}
.game-keep {
  min-width: 320px;
}
.game-hud {
  pointer-events: none;
  position: relative;
  z-index: 5;
  display: grid;
  flex-shrink: 0;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 1.05fr) auto;
  align-items: start;
  gap: 0.28rem 0.4rem;
  padding: max(0.35rem, env(safe-area-inset-top))
    max(0.5rem, env(safe-area-inset-right))
    0.25rem
    max(0.5rem, env(safe-area-inset-left));
}
.game-hud[data-keep="true"] {
  display: flex;
  min-height: 3rem;
  justify-content: flex-end;
}
.game-hud-identity,
.game-hud-vitals {
  display: contents;
}
.game-hud-identity,
.game-hud-identity-main,
.game-hud-name,
.game-hud-exp,
.game-hud-purse,
.game-hud-energy,
.game-hud-settings {
  pointer-events: auto;
}
.game-hud-name {
  --hud-avatar-size: 5rem;
  --hud-name-height: 3.05rem;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  color: #f3e2b0;
  text-decoration: none;
}
.game-hud-name:hover .game-hud-name-copy {
  border-color: rgba(212, 174, 98, 0.55);
  background-color: rgba(22, 12, 7, 0.5);
}
.game-hud-name:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 2px;
}
.game-hud-name-copy {
  display: flex;
  min-width: 0;
  max-width: 100%;
  min-height: var(--hud-name-height);
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 0.08rem;
  margin-left: calc(var(--hud-avatar-size) * -0.42);
  padding: 0.18rem 0.9rem 0.2rem calc(var(--hud-avatar-size) * 0.42 + 0.32rem);
  overflow: hidden;
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-radius: 999px;
  background-color: rgba(14, 8, 4, 0.42);
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
}
.game-hud-name .name-scroll {
  width: auto;
  min-width: 0;
  max-width: 100%;
  height: auto;
  flex: 0 0 auto;
  padding: 0;
  background: none;
  filter: none;
}
.game-hud-name .name-scroll-line {
  justify-content: flex-start;
  gap: 0.28rem;
  font-size: clamp(0.76rem, 3.6vw, 0.92rem);
  text-align: left;
}
.game-hud-name .faction-banner {
  width: 0.7rem;
  height: 1.22rem;
}
.game-hud-marks {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.42rem;
  min-width: 0;
}
.game-hud-might,
.game-hud-glory {
  padding-left: 0;
  color: #f0d494;
}
.game-hud-might .might-mark-star,
.game-hud-glory .glory-mark-wreath {
  width: 0.78rem;
  height: 0.78rem;
}
.game-hud-might .might-mark-value,
.game-hud-glory .glory-mark-value {
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
}
.game-hud-avatar-shell {
  position: relative;
  z-index: 2;
  display: block;
  width: var(--hud-avatar-size);
  height: var(--hud-avatar-size);
  flex: 0 0 auto;
  filter: drop-shadow(0 3px 8px rgba(8, 4, 2, 0.4));
}
.game-hud-avatar.portrait-ring {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 0.3rem;
  overflow: hidden;
  border: 2px solid rgba(212, 174, 98, 0.72);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 24%, rgba(243, 226, 176, 0.42), transparent 52%),
    linear-gradient(160deg, #e8c878 0%, #b88840 38%, #6a4218 68%, #d4ae62 100%);
  box-shadow: 0 0 0 1px rgba(74, 48, 16, 0.78),
    0 4px 10px rgba(8, 4, 2, 0.35);
}
.game-hud-avatar.portrait-ring[data-frame="carved"] {
  border-color: rgba(232, 196, 110, 0.88);
  box-shadow: 0 0 0 1px rgba(74, 48, 16, 0.7),
    0 4px 10px rgba(8, 4, 2, 0.35);
}
.game-hud-avatar.portrait-ring[data-frame="champion"] {
  border-color: rgba(225, 187, 88, 0.95);
  background: radial-gradient(circle at 30% 24%, rgba(255, 224, 140, 0.55), transparent 52%),
    linear-gradient(160deg, #f0d494 0%, #d4ae62 38%, #8a5a18 68%, #e8c878 100%);
  box-shadow: 0 0 0 1px rgba(111, 73, 28, 0.85),
    0 0 10px rgba(229, 185, 70, 0.62),
    0 4px 10px rgba(8, 4, 2, 0.35);
}
.game-hud-avatar-face {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: #2a1810;
  box-shadow: inset 0 0 0 1px rgba(42, 24, 16, 0.55);
}
.game-hud-avatar-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.game-hud-avatar-fallback {
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1rem;
  line-height: 1;
}
.game-hud-exp {
  grid-column: 1 / -1;
  grid-row: 2;
  width: min(14rem, 100%);
  min-width: 0;
  justify-self: center;
  align-items: stretch;
}
.game-hud-exp .exp-keep,
.game-hud-energy .energy-keep {
  width: 100%;
}
.game-hud-exp .exp-keep-level {
  font-size: clamp(0.95rem, 4.4vw, 1.2rem);
}
.game-hud-exp .meter-label,
.game-hud-energy .meter-label {
  font-size: clamp(0.68rem, 3vw, 0.86rem);
}
.game-hud-exp .exp-keep-gate {
  display: none;
}
.game-hud-purse {
  grid-column: 1 / -1;
  grid-row: 3;
  min-width: 0;
}
.game-hud .purse-rail {
  width: 100%;
  height: 2.55rem;
  padding: 0.22rem 0.7rem;
  gap: 0.2rem 0.38rem;
}
.game-hud .purse-coin {
  min-width: 0;
  gap: 0.2rem;
  font-size: clamp(0.75rem, 3.2vw, 0.95rem);
  font-variant-numeric: tabular-nums;
}
.game-hud .purse-coin-icon {
  width: clamp(1.35rem, 6vw, 1.65rem);
  height: clamp(1.35rem, 6vw, 1.65rem);
}
.game-hud-energy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  align-self: center;
}
.game-hud-energy .energy-meter {
  width: 100%;
}
.game-hud-energy .energy-keep {
  height: 2.55rem;
  aspect-ratio: auto;
}
.game-hud-settings {
  grid-column: 3;
  grid-row: 1;
  width: 2.75rem;
  height: 2.75rem;
}
.island-utility-nav {
  pointer-events: auto;
  position: relative;
  z-index: 5;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.28rem;
}
.island-utility-link {
  position: relative;
  display: grid;
  width: 4.85rem;
  height: 4.85rem;
  flex: 0 0 auto;
  place-items: center;
  transition: transform 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out),
    border-color 160ms var(--ease-out);
}
.island-utility-link:active {
  transform: scale(0.97);
}
.island-utility-link:focus-visible {
  outline: 2px solid #f8e6b0;
  outline-offset: 1px;
}
.island-utility-link[aria-current="page"] {
  box-shadow: inset 0 1px 1px rgba(243, 226, 176, 0.28),
    0 0 0 1px rgba(74, 48, 16, 0.65),
    0 3px 8px rgba(8, 4, 2, 0.4),
    0 0 12px rgba(238, 196, 102, 0.8);
}
.island-utility-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.island-utility-fallback {
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.5rem;
}
.island-utility-link::after {
  content: attr(data-label);
  pointer-events: none;
  position: absolute;
  right: 50%;
  bottom: calc(100% - 0.15rem);
  z-index: 6;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(212, 174, 98, 0.7);
  border-radius: 0.3rem;
  background: rgba(43, 28, 13, 0.94);
  color: #f3e2b0;
  font-family: var(--font-ui), sans-serif;
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translate(50%, 0.25rem);
  transition: opacity 140ms var(--ease-out),
    transform 140ms var(--ease-out);
}
.island-utility-link:hover::after,
.island-utility-link:focus-visible::after {
  opacity: 1;
  transform: translate(50%, 0);
}
.island-hold[data-blocked="true"] {
  pointer-events: none;
}
.island-route-main {
  position: relative;
  z-index: 4 !important;
}
.island-route-overlay {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: grid;
  min-width: 0;
  place-items: center;
  padding: 0.35rem 1rem 0.8rem;
}
.island-route-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(6px) saturate(0.82);
  backdrop-filter: blur(6px) saturate(0.82);
}
.island-route-panel {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(92vw, 58rem);
  max-width: calc(100% - 1rem);
  max-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.8rem;
  animation: island-route-panel-in 180ms var(--ease-out) both;
}
.island-route-panel[data-size="compact"] {
  width: min(88vw, 42rem);
}
.island-route-panel[data-panel="patrol"] {
  width: min(94vw, 68rem);
  max-height: 100%;
  aspect-ratio: 1920 / 1072;
  overflow: hidden;
  background-color: #1a120c;
  background-image: none;
}
.island-route-panel[data-panel="patrol"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="patrol"] .island-route-panel-body {
  padding: 0;
  overflow: hidden;
}
.island-route-panel[data-panel="mine"] {
  width: min(94vw, 68rem);
  max-height: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #120c14;
  background-image: none;
}
.island-route-panel[data-panel="mine"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="mine"] .island-route-panel-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.island-route-panel[data-panel="mine"] .island-route-panel-body > .mine-window {
  min-height: 0;
  flex: 1 1 auto;
}
.island-route-panel[data-panel="trade-route"] {
  width: min(94vw, 68rem);
  max-height: 100%;
  aspect-ratio: 1920 / 1072;
  overflow: hidden;
  background-color: #1a120c;
  background-image: none;
}
.island-route-panel[data-panel="trade-route"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="trade-route"] .island-route-close {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #e8d6a0;
  font-size: 2.15rem;
  font-weight: 500;
  filter: drop-shadow(0 1px 2px rgba(18, 8, 4, 0.7));
}
.island-route-panel[data-panel="trade-route"] .island-route-close:hover {
  color: #fff1c4;
}
.island-route-panel[data-panel="trade-route"] .island-route-panel-body {
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.patrol-window {
  position: relative;
  min-height: 22rem;
  height: 100%;
  overflow: hidden;
  color: #f3e2b0;
}
.patrol-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
.patrol-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 10, 6, 0.34) 0%, transparent 26%),
    linear-gradient(to top left, rgba(16, 9, 4, 0.55) 0%, transparent 46%);
}
.patrol-window-title {
  position: absolute;
  z-index: 3;
  top: 0.85rem;
  left: 50%;
  display: block;
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.keep-parchment .island-route-panel[data-panel="patrol"] .patrol-window-title {
  display: block;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.patrol-window-lead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.patrol-window-running {
  position: absolute;
  z-index: 2;
  inset: 0 0 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.patrol-window-ring {
  width: 14rem;
  height: 14rem;
  filter: drop-shadow(0 2px 6px rgba(10, 6, 3, 0.72));
}
.patrol-window-running-note {
  margin-top: 0.35rem;
  color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.patrol-window-hud {
  position: absolute;
  z-index: 3;
  right: 0.85rem;
  bottom: 0.85rem;
  display: flex;
  max-width: min(100% - 1.4rem, 28rem);
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.72rem 0.82rem 0.78rem;
  color: #f3e2b0;
  border: 1px solid #c4a060;
  border-radius: 0.7rem;
  background: linear-gradient(
      180deg,
      rgba(92, 54, 22, 0.52) 0%,
      rgba(42, 24, 10, 0.78) 55%,
      rgba(22, 12, 6, 0.84) 100%
    );
  box-shadow: 0 10px 22px rgba(12, 6, 3, 0.48),
    inset 0 1px 0 rgba(255, 226, 170, 0.28),
    inset 0 0 0 1px rgba(62, 36, 12, 0.55);
  font-family: var(--font-display), ui-serif, Georgia, serif;
}
.patrol-window-result,
.patrol-window-rewards {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.16rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.patrol-window-result {
  max-width: 22rem;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.7);
}
.patrol-window-gold {
  color: #efcc72;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 1px rgba(16, 8, 4, 0.7);
}
.patrol-window-exp {
  color: #f0d08a;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 1px rgba(16, 8, 4, 0.7);
}
.patrol-window-note {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e6d3a4;
  text-shadow: 0 1px 1px rgba(16, 8, 4, 0.7);
}
.patrol-window-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.18rem;
}
.patrol-window-cost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: #efcc72;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 1px rgba(16, 8, 4, 0.7);
}
.patrol-window-cost-label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e6d3a4;
  font-size: 0.72rem;
}
.patrol-window-cost .currency-amount {
  color: #efcc72;
}
.patrol-window-cost[data-short="true"] {
  color: #f0a8a0;
}
.patrol-window-cost[data-short="true"] .currency-amount {
  color: #f0a8a0;
}
.patrol-window-minutes {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: #efcc72;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 1px rgba(16, 8, 4, 0.7);
}
.patrol-window-minutes[data-short="true"] {
  color: #f0a8a0;
}
.patrol-window-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  gap: 0.55rem;
  min-width: min(18rem, 100%);
}
.patrol-window-picker {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
}
.patrol-window-duration-value {
  min-width: 0;
  padding: 0;
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
}
.patrol-window-slider-row {
  display: grid;
  grid-template-columns: auto minmax(7.5rem, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
}
.patrol-window-slider-end {
  color: #e6d3a4;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(16, 8, 4, 0.7);
}
.patrol-window-slider {
  --patrol-rail: linear-gradient(
      to right,
      #edc56a 0%,
      #c4963a var(--patrol-fill, 0%),
      rgb(0 0 0 / 0) var(--patrol-fill, 0%)
    ),
    linear-gradient(180deg, #5a3a1c 0%, #2a180c 52%, #1a0e08 100%);
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 7.5rem;
  height: 1.7rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(232, 198, 112, 0.7);
  border-radius: 999px;
  background: var(--patrol-rail);
  accent-color: #c4963a;
  cursor: pointer;
}
.patrol-window-slider::-webkit-slider-runnable-track {
  height: 1.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--patrol-rail);
}
.patrol-window-slider::-moz-range-track {
  height: 1.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--patrol-rail);
}
.patrol-window-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: calc((1.7rem - 1.4rem) / 2);
  border: 1.5px solid #f3e2b0;
  border-radius: 50%;
  background: radial-gradient(
      circle at 32% 28%,
      #fff6d6 0%,
      #e4bc5c 36%,
      #8d5720 78%,
      #3f240e 100%
    );
  box-shadow: 0 1px 3px rgba(12, 6, 3, 0.55),
    inset 0 0 0 2px rgba(90, 50, 16, 0.28),
    inset 0 1px 0 rgba(255, 244, 208, 0.75);
}
.patrol-window-slider::-moz-range-thumb {
  box-sizing: border-box;
  width: 1.4rem;
  height: 1.4rem;
  border: 1.5px solid #f3e2b0;
  border-radius: 50%;
  background: radial-gradient(
      circle at 32% 28%,
      #fff6d6 0%,
      #e4bc5c 36%,
      #8d5720 78%,
      #3f240e 100%
    );
  box-shadow: 0 1px 3px rgba(12, 6, 3, 0.55),
    inset 0 0 0 2px rgba(90, 50, 16, 0.28),
    inset 0 1px 0 rgba(255, 244, 208, 0.75);
}
.patrol-window-slider::-moz-focus-outer {
  border: 0;
}
.patrol-window-slider:hover::-webkit-slider-thumb {
  filter: brightness(1.08);
}
.patrol-window-slider:hover::-moz-range-thumb {
  filter: brightness(1.08);
}
.patrol-window-slider:focus-visible {
  outline: none;
}
.patrol-window-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px rgba(243, 226, 176, 0.75),
    0 1px 3px rgba(12, 6, 3, 0.55),
    inset 0 0 0 2px rgba(90, 50, 16, 0.28),
    inset 0 1px 0 rgba(255, 244, 208, 0.75);
}
.patrol-window-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px rgba(243, 226, 176, 0.75),
    0 1px 3px rgba(12, 6, 3, 0.55),
    inset 0 0 0 2px rgba(90, 50, 16, 0.28),
    inset 0 1px 0 rgba(255, 244, 208, 0.75);
}
.patrol-window-slider:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.patrol-window-actions > span {
  align-self: flex-end;
}
.patrol-window-hud .patrol-window-start {
  border: 1px solid #7b552c;
  background: linear-gradient(180deg, #d5b679, #9d7137);
  color: #3b2210;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 236, 196, 0.38);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(245, 222, 167, 0.55),
    inset 0 -1px 0 rgba(80, 48, 16, 0.28),
    0 2px 6px rgba(20, 10, 4, 0.4);
}
.patrol-window-hud .patrol-window-start:hover:not(:disabled) {
  filter: brightness(1.08);
}
.patrol-window-message {
  margin: 0;
  color: #f0a8a0;
  font-size: 15px;
  text-align: right;
}
.mine-window {
  position: relative;
  min-height: 22rem;
  height: 100%;
  overflow: hidden;
  color: #e8f0ff;
}
.mine-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.mine-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 8, 16, 0.46) 0%, transparent 28%),
    radial-gradient(
      ellipse 70% 58% at 50% 62%,
      rgba(18, 12, 28, 0) 0%,
      rgba(8, 6, 14, 0.42) 100%
    );
}
.mine-window[data-phase="striking"] .mine-window-art {
  animation: mine-swing 420ms var(--ease-out);
}
.mine-window[data-phase="digging"] .mine-window-art {
  animation: mine-cave-breathe 3s ease-in-out infinite alternate;
}
@keyframes mine-swing {
  0%,
  100% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.018) translate(-0.35%, 0.2%);
  }
  70% {
    transform: scale(1.01) translate(0.25%, -0.1%);
  }
}
.mine-window-title {
  position: absolute;
  z-index: 3;
  top: 0.85rem;
  left: 50%;
  display: block;
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.keep-parchment .island-route-panel[data-panel="mine"] .mine-window-title {
  display: block;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.mine-window-lead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mine-window-hud {
  position: absolute;
  z-index: 3;
  top: 56%;
  left: 50%;
  display: flex;
  width: min(calc(100% - 1.6rem), 22.5rem);
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 0.95rem 0.9rem;
  color: #e8f0ff;
  border: 1px solid rgba(196, 160, 96, 0.82);
  border-radius: 0.7rem;
  background: radial-gradient(
      ellipse 80% 70% at 50% 0%,
      rgba(120, 150, 220, 0.18) 0%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(42, 28, 58, 0.55) 0%,
      rgba(18, 12, 28, 0.82) 58%,
      rgba(10, 8, 16, 0.88) 100%
    );
  box-shadow: 0 14px 28px rgba(6, 4, 12, 0.55),
    inset 0 1px 0 rgba(210, 230, 255, 0.22),
    inset 0 0 0 1px rgba(40, 24, 16, 0.45);
}
.mine-window-chance {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  outline: none;
}
.mine-window-status {
  height: 1.1rem;
  line-height: 1.1rem;
  margin: 0.4rem 0 0;
  color: #c4b8a0;
  font-size: 0.75rem;
}
.mine-window-gem-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  flex: none;
}
.mine-window-gem {
  position: relative;
  z-index: 1;
  width: 3.4rem;
  height: 3.4rem;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(120, 170, 255, 0.45));
}
.mine-window[data-result="hit"] .mine-window-gem,
.mine-window[data-result="pocket"] .mine-window-gem {
  filter: drop-shadow(0 0 14px rgba(160, 200, 255, 0.7));
}
.mine-window-kicker {
  margin: 0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d7c49a;
  text-shadow: 0 1px 2px rgba(8, 6, 14, 0.8);
}
.mine-window-percent {
  margin: 0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: clamp(2.4rem, 8vw, 3.15rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: #c8dcff;
  text-shadow: 0 1px 0 #1a2448,
    0 0 18px rgba(110, 150, 255, 0.55),
    0 2px 8px rgba(8, 6, 16, 0.8);
}
.mine-window-dig-wrap {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  margin-top: 0.15rem;
}
.mine-window-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  height: 1.1rem;
  color: #e9cf92;
  font-size: 0.75rem;
  line-height: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.mine-window-cost svg {
  width: 0.9rem;
  height: 0.9rem;
}
.mine-window-dig {
  display: inline-flex;
  height: 2.75rem;
  width: 10.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid #7b552c;
  background: linear-gradient(180deg, #d5b679, #9d7137);
  color: #3b2210;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 236, 196, 0.38);
  box-shadow: inset 0 1px 0 rgba(245, 222, 167, 0.55),
    inset 0 -1px 0 rgba(80, 48, 16, 0.28),
    0 2px 6px rgba(20, 10, 4, 0.4);
}
.mine-window-dig:hover:not(:disabled) {
  filter: brightness(1.08);
}
.mine-window-dig:active {
  scale: 1;
  transform: none;
}
.mine-window-loot {
  position: relative;
  z-index: 2;
  display: flex;
  height: 5.2rem;
  flex: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mine-window-loot-inner {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 4.25rem;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  padding: 0.4rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
}
.mine-window-loot[data-kind="hit"] .mine-window-loot-inner,
.mine-window-loot[data-kind="pocket"] .mine-window-loot-inner {
  border-color: rgba(147, 200, 255, 0.35);
  background: radial-gradient(ellipse at 50% 0%, rgba(96, 167, 255, 0.22), rgba(37, 47, 79, 0.1) 85%);
  box-shadow: inset 0 1px 0 rgba(198, 224, 255, 0.1), 0 0 22px rgba(70, 131, 215, 0.1);
}
.mine-window-prize {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}
.mine-window-prize-amount {
  display: inline-flex;
  align-items: center;
  color: #d4eaff;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(123, 190, 255, 0.6);
}
.mine-window-prize-title {
  color: #e9d49f;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.mine-window-loot-inner p {
  margin: 0;
  max-width: 18rem;
  color: #f3e2b0;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(8, 6, 14, 0.8);
}
.mine-window-loot[data-kind="miss"] .mine-window-loot-inner p {
  color: #c4b8a0;
}
.mine-window-loot .currency-amount {
  color: #c8dcff;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
}
.mine-window-loot .currency-amount-icon {
  width: 1.35em;
  height: 1.35em;
}
.mine-window-miss-title {
  color: #e2b796;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.mine-window-loot[data-kind="miss"] .mine-window-loot-inner {
  border-color: #ba866b40;
  background: radial-gradient(ellipse at 50% 0%, #9765502e, #34232a14 85%);
}
.mine-window[data-phase="digging"] .mine-window-hud {
  animation: mine-hud-breathe 1800ms ease-in-out infinite alternate;
}
.mine-window[data-phase="digging"] .mine-window-gem,
.mine-window[data-phase="ready"] .mine-window-gem {
  animation: mine-vein-breathe 1400ms ease-in-out infinite alternate;
}
.mine-window[data-phase="ready"] .mine-window-percent {
  animation: mine-chance-reveal 650ms var(--ease-out) both;
}
.mine-window[data-phase="ready"] .mine-window-dig {
  box-shadow: inset 0 1px 0 #ffe9b1, 0 0 16px #d9ac5c60, 0 0 30px #759ff52e;
}
.mine-window[data-phase="failure"] .mine-window-gem {
  filter: saturate(0.25) drop-shadow(0 0 6px #927480);
  opacity: 0.6;
}
.mine-window[data-impact="miss"] .mine-window-gem {
  animation: mine-vein-collapse 850ms var(--ease-out) both;
}
.mine-window[data-impact="miss"] .mine-window-loot-inner {
  animation: mine-loot-in 600ms var(--ease-out) both;
}
.mine-window[data-impact="hit"] .mine-window-hud,
.mine-window[data-impact="pocket"] .mine-window-hud {
  animation: mine-hud-reward 1800ms ease-out both;
}
.mine-dig-progress {
  position: absolute;
  inset: -0.65rem;
  width: calc(100% + 1.3rem);
  height: calc(100% + 1.3rem);
  fill: none;
  transform: rotate(-90deg);
  pointer-events: none;
}
.mine-dig-progress-track {
  stroke: #86aedc26;
  stroke-width: 1.5;
}
.mine-dig-progress-fill {
  stroke: #a8e7ff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  filter: drop-shadow(0 0 4px #66b6ff);
  transition: stroke-dashoffset 300ms linear;
}
.mine-dig-progress-orbit {
  stroke: #e9f7ff;
  stroke-width: 1;
  stroke-dasharray: 0.04 0.46;
  transform-origin: center;
  animation: mine-survey-orbit 2400ms linear infinite;
}
.mine-dig-scene {
  position: relative;
  flex: none;
  width: 10rem;
  height: 5rem;
  pointer-events: none;
}
.mine-dig-ground {
  position: absolute;
  bottom: 0.1rem;
  left: 15%;
  width: 70%;
  height: 0.7rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, #619fcb60, transparent 70%);
  filter: blur(3px);
}
.mine-dig-stone,
.mine-dig-strike {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mine-dig-vein {
  filter: drop-shadow(0 0 3px #64bfff);
}
.mine-dig-strike {
  opacity: 0;
  filter: drop-shadow(0 0 5px #b1eaff);
}
.mine-dig-scene i {
  position: absolute;
  top: 55%;
  left: 57%;
  width: 4px;
  height: 5px;
  background: #9da6b5;
  clip-path: polygon(0 15%, 85% 0, 100% 65%, 20% 100%);
  opacity: 0;
}
.mine-dig-scene i:nth-of-type(3n) {
  background: #b3e8ff;
  box-shadow: 0 0 5px #65b8ff;
}
.mine-window:is([data-phase="digging"], [data-phase="striking"]) .mine-dig-stone {
  transform-origin: 50% 85%;
  animation: mine-stone-impact 1200ms ease-out infinite;
}
.mine-window:is([data-phase="digging"], [data-phase="striking"]) .mine-dig-strike {
  animation: mine-strike-streak 1200ms ease-out infinite;
}
.mine-window:is([data-phase="digging"], [data-phase="striking"]) .mine-dig-scene i {
  animation: mine-working-debris 1200ms var(--debris-delay) ease-out infinite;
}
.mine-window[data-phase="digging"] .mine-dig-vein {
  animation: mine-vein-breathe 1200ms ease-in-out infinite alternate;
}
.mine-window[data-phase="ready"] .mine-dig-vein {
  stroke: #dbf6ff;
  filter: drop-shadow(0 0 5px #89dfff);
}
.mine-window[data-celebrate="true"] .mine-window-gem {
  animation: mine-gem-reveal 1500ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.mine-window[data-celebrate="true"] .mine-window-loot-inner {
  animation: mine-loot-in 600ms var(--ease-out) both;
}
.mine-window[data-celebrate="true"][data-result="pocket"] .mine-window-loot-inner {
  animation: mine-pocket-in 700ms var(--ease-out) both;
}
.mine-window-burst {
  --mine-fx-color: #a1daff;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mine-window-burst[data-kind="pocket"] {
  --mine-fx-color: #ffe0a2;
}
.mine-window-burst[data-kind="miss"] {
  --mine-fx-color: #c3a38c;
}
.mine-window-ring {
  position: absolute;
  inset: -0.5rem;
  border: 1px solid var(--mine-fx-color);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 207, 255, 0.34), transparent 70%);
  box-shadow: 0 0 24px rgba(89, 171, 255, 0.45), inset 0 0 18px rgba(125, 191, 255, 0.35);
  animation: mine-ring-out 1400ms ease-out both;
}
.mine-result-ring-echo {
  animation-delay: 160ms;
  background: none;
}
.mine-result-glow {
  position: absolute;
  inset: -95%;
  border-radius: 50%;
  background: radial-gradient(circle, #d6f1ffd0, #77b7ff45 30%, transparent 65%);
  mix-blend-mode: screen;
  animation: mine-light-bloom 1800ms ease-out both;
}
.mine-result-flare {
  position: absolute;
  inset: 39% -125%;
  background: radial-gradient(ellipse, #f8fdff 0 5%, #c6e8ff9c 16%, transparent 68%);
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: mine-light-flare 750ms ease-out both;
}
.mine-result-rays {
  position: absolute;
  inset: -85%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 12deg, transparent 0deg 18deg, #a7d5ff85 21deg, transparent 26deg 45deg);
  mask-image: radial-gradient(circle, transparent 22%, #000 35%, transparent 68%);
  animation: mine-prism-rays 2300ms ease-out both;
}
.mine-result-crown {
  position: absolute;
  inset: -45%;
  width: 190%;
  height: 190%;
  stroke: var(--mine-fx-color);
  stroke-width: 0.8;
  filter: drop-shadow(0 0 4px #69bbff);
  animation: mine-prism-crown 2100ms ease-out both;
}
.mine-result-crown path {
  fill: #b4e2ff42;
}
.mine-window-burst[data-kind="pocket"] .mine-result-glow {
  background: radial-gradient(circle, #fff4d7d0, #bf94ff55 30%, transparent 65%);
}
.mine-window-burst[data-kind="miss"] .mine-result-glow {
  background: radial-gradient(circle, #c0a08c65, #634b4740 30%, transparent 65%);
  animation-duration: 900ms;
}
.mine-window-burst[data-kind="miss"] .mine-window-ring {
  background: none;
  border-style: dashed;
  box-shadow: 0 0 12px #a7897050;
  animation-name: mine-ring-collapse;
  animation-duration: 950ms;
}
.mine-result-fracture {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  stroke: #e0c0a1;
  stroke-width: 1.1;
  stroke-dasharray: 1;
  filter: drop-shadow(0 0 3px #cba788);
  animation: mine-fracture-draw 1100ms ease-out both;
}
.mine-result-dust {
  position: absolute;
  top: 20%;
  left: 15%;
  width: 70%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #a08d7c90, #53465490 42%, transparent 70%);
  filter: blur(4px);
  animation: mine-dust-rise 1800ms var(--dust-delay) ease-out both;
}
.mine-window-burst i {
  position: absolute;
  top: calc(50% - 2px);
  left: calc(50% - 2px);
  width: 4px;
  height: 7px;
  background: #d2f0ff;
  box-shadow: 0 0 9px #82caff;
  clip-path: polygon(50% 0, 100% 35%, 70% 100%, 0 65%);
  animation: mine-spark-out 1900ms var(--spark-delay) ease-out both;
}
.mine-window-burst i:nth-of-type(4n) {
  width: 7px;
  height: 11px;
  background: linear-gradient(140deg, #f3fbff, #7ac7fa 45%, #8266df);
}
.mine-window-burst[data-kind="pocket"] i:nth-of-type(3n) {
  background: #ffe5b4;
  box-shadow: 0 0 9px #e6ba78;
}
.mine-window-burst[data-kind="miss"] i {
  background: linear-gradient(140deg, #d2bca6, #65505b 60%, #a49183);
  box-shadow: none;
  animation-name: mine-stone-scatter;
  animation-duration: 1350ms;
}
@keyframes mine-gem-reveal {
  0% {
    transform: scale(0.5) rotate(-18deg);
    opacity: 0.25;
  }
  30% {
    transform: translateY(-8px) scale(1.4) rotate(8deg);
    opacity: 1;
    filter: drop-shadow(0 0 24px #83ccff) brightness(1.6);
  }
  65% {
    transform: translateY(-4px) scale(1.12) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
@keyframes mine-ring-out {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}
@keyframes mine-spark-out {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(45deg) scale(0.2);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--spark-x), calc(var(--spark-y) - 18px)) rotate(var(--spark-turn)) scale(0.1);
  }
}
@keyframes mine-cave-breathe {
  from {
    transform: scale(1.005);
    filter: brightness(1);
  }
  to {
    transform: scale(1.018);
    filter: brightness(1.09);
  }
}
@keyframes mine-hud-breathe {
  from {
    box-shadow: 0 14px 28px #06040c8c, inset 0 0 20px #7eb3ff08;
  }
  to {
    box-shadow: 0 14px 28px #06040c8c, 0 0 22px #609fe825, inset 0 0 30px #7eb3ff20;
  }
}
@keyframes mine-hud-reward {
  0% {
    box-shadow: 0 0 8px #a9deff18;
  }
  20% {
    box-shadow: 0 0 42px #92ccff66, inset 0 0 36px #a1d5ff28;
  }
  100% {
    box-shadow: 0 14px 28px #06040c8c, inset 0 1px 0 #d2e6ff38;
  }
}
@keyframes mine-vein-breathe {
  from {
    opacity: 0.6;
    filter: drop-shadow(0 0 4px #7cc8ff);
  }
  to {
    opacity: 1;
    filter: drop-shadow(0 0 12px #9bdcff) brightness(1.2);
  }
}
@keyframes mine-survey-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes mine-stone-impact {
  0%, 14%, 45%, 100% {
    transform: none;
  }
  20% {
    transform: translate(3px, 2px) rotate(2deg);
  }
  27% {
    transform: translate(-2px, 0) rotate(-1deg);
  }
  34% {
    transform: translate(1px, 1px);
  }
}
@keyframes mine-strike-streak {
  0%, 10% {
    opacity: 0;
    transform: translate(10px, -14px);
  }
  19% {
    opacity: 1;
    transform: none;
  }
  36%, 100% {
    opacity: 0;
    transform: translate(-3px, 3px);
  }
}
@keyframes mine-working-debris {
  0%, 18% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  28% {
    opacity: 1;
  }
  65%, 100% {
    opacity: 0;
    transform: translate(var(--debris-x), var(--debris-y)) rotate(140deg) scale(0.2);
  }
}
@keyframes mine-chance-reveal {
  from {
    filter: brightness(1.8);
    text-shadow: 0 0 28px #97ccff;
  }
  to {
    filter: none;
  }
}
@keyframes mine-light-bloom {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}
@keyframes mine-light-flare {
  0% {
    opacity: 0;
    transform: scaleX(0.2);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scaleX(1.25) scaleY(0.2);
  }
}
@keyframes mine-prism-rays {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-16deg);
  }
  22% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: scale(1.1) rotate(28deg);
  }
}
@keyframes mine-prism-crown {
  0% {
    opacity: 0;
    transform: scale(0.55) rotate(-20deg);
  }
  20%, 45% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: scale(1.25) rotate(25deg);
  }
}
@keyframes mine-vein-collapse {
  0% {
    transform: scale(1.15);
    filter: brightness(1.4);
    opacity: 1;
  }
  22% {
    transform: translateX(-5px) rotate(-7deg);
  }
  38% {
    transform: translateX(4px) rotate(5deg);
  }
  100% {
    transform: none;
    filter: saturate(0.25);
    opacity: 0.6;
  }
}
@keyframes mine-ring-collapse {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  22% {
    opacity: 0.8;
    transform: scale(1.4);
  }
  100% {
    opacity: 0;
    transform: scale(0.7) rotate(20deg);
  }
}
@keyframes mine-fracture-draw {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  25% {
    opacity: 0.9;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes mine-dust-rise {
  0% {
    opacity: 0;
    transform: translate(0, 10px) scale(0.3);
  }
  25% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dust-x), -48px) scale(1.8);
  }
}
@keyframes mine-stone-scatter {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1.3);
  }
  15% {
    opacity: 1;
  }
  45% {
    opacity: 0.9;
    transform: translate(calc(var(--spark-x) * 0.6), calc(var(--spark-y) * 0.4)) rotate(var(--spark-turn));
  }
  100% {
    opacity: 0;
    transform: translate(var(--spark-x), calc(var(--spark-y) * 0.3 + 50px)) rotate(var(--spark-turn)) scale(0.2);
  }
}
html[data-motion="reduce"] .mine-window :is(.mine-window-art, .mine-window-hud, .mine-window-gem, .mine-dig-stone, .mine-dig-vein, .mine-dig-strike, .mine-dig-scene i, .mine-dig-progress-orbit) {
  animation: none;
}
html[data-motion="reduce"] .mine-window-burst {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .mine-window :is(.mine-window-art, .mine-window-hud, .mine-window-gem, .mine-dig-stone, .mine-dig-vein, .mine-dig-strike, .mine-dig-scene i, .mine-dig-progress-orbit) {
    animation: none;
  }
  html:not([data-motion="full"]) .mine-window-burst {
    display: none;
  }
}
@keyframes mine-loot-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.82);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes mine-pocket-in {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.7);
  }
  55% {
    transform: translateY(-4px) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.trade-route-window {
  position: relative;
  height: 100%;
  overflow: hidden;
  color: #f3e2b0;
}
.trade-route-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
.trade-route-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 10, 6, 0.42) 0%, transparent 24%),
    radial-gradient(
      ellipse 48% 62% at 50% 58%,
      rgba(16, 9, 4, 0.12),
      transparent 74%
    );
}
.trade-route-window-body {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: 0.55rem;
  overflow: hidden;
  padding: 2.6rem 1rem 1rem;
}
.trade-route-window-title {
  margin: 0;
  text-align: center;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 2.45rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.keep-parchment .island-route-panel[data-panel="trade-route"] .trade-route-window-title,
.keep-parchment .island-route-panel[data-panel="trade-route"] .trade-route-window-lead {
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.trade-route-window-lead {
  margin: 0 auto;
  max-width: 32rem;
  text-align: center;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.35;
  color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.trade-route-window-message {
  margin: 0;
  color: #f3e2b0;
  font-size: 15px;
  text-align: center;
}
.trade-route-window-panel {
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.85rem 0.95rem 1rem;
}
.trade-route-window-panel.parchment {
  color: #f3e2b0;
  background-color: rgba(14, 8, 4, 0.28);
  background-image: none;
  border: 1px solid rgba(212, 174, 98, 0.38);
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --text-disabled: #b89a70;
  --ink-parchment: #f3e2b0;
  --bg-app: rgba(10, 6, 4, 0.28);
  --bg-panel: rgba(22, 12, 7, 0.18);
  --bg-panel-raised: rgba(28, 16, 8, 0.28);
  --border: rgba(212, 174, 98, 0.38);
  --border-strong: rgba(212, 174, 98, 0.55);
}
.trade-route-window-shop {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  gap: 0.85rem 1rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "supplies"
    "totems";
  align-items: stretch;
}
.trade-route-section[data-section="supplies"] {
  grid-area: supplies;
}
.trade-route-section[data-section="totems"] {
  grid-area: totems;
}
.trade-route-section {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 0.45rem;
}
.trade-route-section h2 {
  margin: 0;
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.trade-route-supplies,
.trade-route-totems {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.trade-route-totems {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.trade-route-card {
  display: grid;
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(5.25rem, 1fr) auto auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-panel-raised);
  padding: 0.6rem 0.65rem 0.65rem;
  cursor: help;
}
.trade-route-card:has(.trade-route-card-caption) {
  grid-template-rows: minmax(5.25rem, 1fr) auto auto auto;
}
.trade-route-card-art {
  display: flex;
  min-height: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.trade-route-card-img,
.trade-route-card-fallback {
  width: auto;
  height: min(100%, 10.25rem);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-wood-dark);
}
.trade-route-card-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 42px;
}
.trade-route-card-title {
  margin: 0.4rem 0 0;
  min-height: 2.3em;
  color: var(--text-primary);
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}
.trade-route-card:has(.trade-route-card-caption) .trade-route-card-title {
  min-height: 0;
}
.trade-route-card-caption {
  margin: 0.15rem 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
}
.trade-route-card-buy {
  display: grid;
  min-width: 0;
  margin-top: 0.45rem;
  gap: 0.4rem;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  align-self: stretch;
}
.trade-route-window-shop .trade-route-card-buy button {
  min-width: 0;
  padding: 0.38rem 0.28rem;
  font-size: 12px;
}
@media (min-width: 900px) {
  .trade-route-window-shop {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-areas: "supplies totems";
  }
  .trade-route-supplies {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
}
.island-route-panel[data-size="medium"] {
  width: min(92vw, 58rem);
}
.island-route-panel[data-size="wide"] {
  width: min(94vw, 74rem);
}
.island-route-panel[data-size="arena"] {
  width: min(96vw, 88rem);
}
.island-route-panel-bar {
  display: flex;
  min-height: 3rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.38rem 0.55rem 0.25rem 1.15rem;
  border-bottom: 1px solid rgba(116, 76, 32, 0.38);
  background: rgba(115, 75, 31, 0.08);
}
.island-route-panel-title {
  color: #5a3517;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.island-route-panel[data-panel="hall"] {
  width: min(94vw, 68rem);
  height: min(82vh, 46rem);
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  background-color: #1a120c;
  background-image: none;
}
.island-route-panel[data-panel="hall"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="hall"] .island-route-close {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #e8d6a0;
  font-size: 2.15rem;
  font-weight: 500;
  filter: drop-shadow(0 1px 2px rgba(18, 8, 4, 0.7));
}
.island-route-panel[data-panel="hall"] .island-route-close:hover {
  color: #fff1c4;
}
.island-route-panel[data-panel="hall"] .island-route-panel-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.island-route-panel[data-panel="hall"] .island-route-panel-body > .hall-window {
  min-height: 0;
  flex: 1 1 auto;
}
.island-route-panel[data-panel="post"] {
  width: min(94vw, 68rem);
  height: min(82vh, 46rem);
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  background-color: #3a2414;
  background-image: none;
}
.island-route-panel[data-panel="post"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="post"] .island-route-close {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #e8d6a0;
  font-size: 2.15rem;
  font-weight: 500;
  filter: drop-shadow(0 1px 2px rgba(18, 8, 4, 0.7));
}
.island-route-panel[data-panel="post"] .island-route-close:hover {
  color: #fff1c4;
}
.island-route-panel[data-panel="post"] .island-route-panel-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.island-route-panel[data-panel="post"] .island-route-panel-body > .post-window {
  min-height: 0;
  flex: 1 1 auto;
}
.island-route-panel[data-panel="port"] {
  width: min(96vw, 80rem);
  height: min(94vh, 64rem);
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  background-color: #0c1418;
  background-image: none;
}
.island-route-panel[data-panel="port"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="port"] .island-route-close {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #e8d6a0;
  font-size: 2.15rem;
  font-weight: 500;
  filter: drop-shadow(0 1px 2px rgba(18, 8, 4, 0.7));
}
.island-route-panel[data-panel="port"] .island-route-close:hover {
  color: #fff1c4;
}
.island-route-panel[data-panel="port"] .island-route-panel-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.island-route-panel[data-panel="port"] .island-route-panel-body > .port-window {
  min-height: 0;
  flex: 1 1 auto;
}
.island-route-panel[data-panel="store"] {
  width: min(94vw, 68rem);
  height: min(86vh, 50rem);
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  background-color: #1a120c;
  background-image: none;
}
.island-route-panel[data-panel="store"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="store"] .island-route-close {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #e8d6a0;
  font-size: 2.15rem;
  font-weight: 500;
  filter: drop-shadow(0 1px 2px rgba(18, 8, 4, 0.7));
}
.island-route-panel[data-panel="store"] .island-route-close:hover {
  color: #fff1c4;
}
.island-route-panel[data-panel="store"] .island-route-panel-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.island-route-panel[data-panel="store"] .island-route-panel-body > .store-window {
  min-height: 0;
  flex: 1 1 auto;
}
.island-route-panel[data-panel="forge"] {
  width: min(96vw, 80rem);
  height: min(90vh, 58rem);
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  background-color: #1a120c;
  background-image: none;
}
.island-route-panel[data-panel="forge"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="forge"] .island-route-close {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #e8d6a0;
  font-size: 2.15rem;
  font-weight: 500;
  filter: drop-shadow(0 1px 2px rgba(18, 8, 4, 0.7));
}
.island-route-panel[data-panel="forge"] .island-route-close:hover {
  color: #fff1c4;
}
.island-route-panel[data-panel="forge"] .island-route-panel-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.island-route-panel[data-panel="forge"] .island-route-panel-body > .forge-window {
  min-height: 0;
  flex: 1 1 auto;
}
.island-route-panel[data-panel="farm"] {
  width: min(65rem, calc(100% - 1rem));
  max-height: min(58rem, calc(100dvh - 3rem));
  min-height: 0;
  overflow: hidden;
  border: 2px solid #b99a62;
  border-radius: 1.4rem;
  background: linear-gradient(#fbf2dfed, #f1e7d2eb),
    url("/ui/chrome/parchment.jpg") center / 36rem;
  box-shadow: 0 0 0 3px #4d654e, 0 0 0 5px #d6c399, 0 22px 70px #15251b66;
}
.island-route-panel[data-panel="farm"]::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 4px;
  border: 1px solid #fff4d76b;
  border-radius: 1rem;
  pointer-events: none;
}
.island-route-panel[data-panel="farm"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.85rem;
  right: 0.85rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="farm"] .island-route-close {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid #d5b782;
  border-radius: 50%;
  background: linear-gradient(#fffaed, #ecdcbb);
  box-shadow: inset 0 0 0 3px #fff7e6b3, 0 3px 12px #26332933;
  color: #53604a;
  font-size: 1.55rem;
  font-weight: 500;
}
.island-route-panel[data-panel="farm"] .island-route-close:hover {
  filter: brightness(1.06);
}
.island-route-panel[data-panel="farm"] .island-route-panel-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.island-route-panel[data-panel="farm"] .island-route-panel-body > .farm-window {
  min-height: 0;
  flex: 1 1 auto;
}
.island-route-panel[data-panel="leaderboard"] {
  width: min(94vw, 68rem);
  height: min(82vh, 46rem);
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  background-color: #1a120c;
  background-image: none;
}
.island-route-panel[data-panel="leaderboard"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="leaderboard"] .island-route-close {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #e8d6a0;
  font-size: 2.15rem;
  font-weight: 500;
  filter: drop-shadow(0 1px 2px rgba(18, 8, 4, 0.7));
}
.island-route-panel[data-panel="leaderboard"] .island-route-close:hover {
  color: #fff1c4;
}
.island-route-panel[data-panel="leaderboard"] .island-route-panel-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.island-route-panel[data-panel="leaderboard"] .island-route-panel-body > * {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.island-route-overlay:has(> .island-route-panel[data-panel="dungeon"]) {
  padding: 0.35rem;
}
.island-route-panel[data-panel="dungeon"] {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  background-color: #0e1016;
  background-image: none;
}
.island-route-panel[data-panel="dungeon"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="dungeon"] .island-route-close {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #e8d6a0;
  font-size: 2.15rem;
  font-weight: 500;
  filter: drop-shadow(0 1px 2px rgba(18, 8, 4, 0.7));
}
.island-route-panel[data-panel="dungeon"] .island-route-close:hover {
  color: #fff1c4;
}
.island-route-panel[data-panel="dungeon"] .island-route-panel-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.island-route-panel[data-panel="dungeon"] .island-route-panel-body > .dungeon-screen {
  min-height: 0;
  flex: 1 1 auto;
}
.hall-window {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: #f3e2b0;
}
.post-window {
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --text-disabled: #b89a70;
  --ink-parchment: #f3e2b0;
  --wood-text: #f3e2b0;
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: #f3e2b0;
}
.post-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  filter: saturate(1.12) brightness(1.16) contrast(1.04);
}
.post-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(ellipse 70% 42% at 50% 8%, rgba(255, 214, 140, 0.28), transparent 62%),
    linear-gradient(180deg, rgba(48, 28, 12, 0.18) 0%, transparent 26%),
    radial-gradient(
      ellipse 90% 80% at 50% 70%,
      rgba(42, 24, 10, 0) 0%,
      rgba(28, 14, 6, 0.16) 100%
    );
}
.post-window-body {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 0.55rem;
  overflow: hidden;
  padding: 3.35rem 1rem 1.15rem;
}
.post-header {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.25rem 0.15rem;
  border-bottom: none;
  background: none;
  color: #f3e2b0;
  text-align: center;
}
.post-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: 0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.45rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #6a4818,
    0 2px 4px rgba(30, 16, 6, 0.55),
    0 0 18px rgba(255, 214, 140, 0.42);
}
.post-title::before,
.post-title::after {
  content: "";
  flex: 0 1 5.4rem;
  width: min(5.4rem, 14vw);
  height: 0.85rem;
  pointer-events: none;
  background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(226, 196, 119, 0.18) 10%,
        #d4ae62 48%,
        #fff1c4 74%,
        #e8c878 90%,
        transparent 100%
      )
      left center / 100% 1.5px no-repeat,
    radial-gradient(circle at 88% 50%, #fff8dc 0 1.55px, #d4ae62 1.65px 3.1px, transparent 3.3px);
  opacity: 0.94;
}
.post-title::after {
  transform: scaleX(-1);
}
.post-filters {
  display: flex;
  min-width: 0;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.post-filter {
  position: relative;
  display: inline-flex;
  min-width: 5.2rem;
  min-height: 2.75rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.62rem 1.05rem 0.55rem;
  border: 1px solid rgba(243, 226, 176, 0.82);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(168, 108, 42, 0.62) 0%, rgba(72, 40, 14, 0.7) 100%);
  color: #fff6dc;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(12, 6, 2, 0.72);
  box-shadow: 0 3px 10px rgba(28, 14, 6, 0.28),
    inset 0 1px 0 rgba(255, 244, 210, 0.42),
    inset 0 -1px 0 rgba(48, 24, 8, 0.28);
  -webkit-backdrop-filter: blur(8px) saturate(1.18);
  backdrop-filter: blur(8px) saturate(1.18);
  cursor: pointer;
  transition: background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out);
}
.post-filter::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border-radius: 3px;
  background: linear-gradient(#fff1c4, #e1c48b) left top / 9px 1px no-repeat,
    linear-gradient(#fff1c4, #e1c48b) left top / 1px 9px no-repeat,
    linear-gradient(#e1c48b, #fff1c4) right bottom / 9px 1px no-repeat,
    linear-gradient(#e1c48b, #fff1c4) right bottom / 1px 9px no-repeat;
  opacity: 0.72;
}
.post-filter svg {
  width: 1.05rem;
  height: 1.05rem;
  filter: drop-shadow(0 1px 1px rgba(8, 4, 2, 0.7));
}
.post-filter:hover,
.post-filter:focus-visible {
  color: #fffbeb;
  border-color: #fff4d8;
  background: linear-gradient(180deg, rgba(196, 132, 52, 0.7) 0%, rgba(86, 48, 16, 0.72) 100%);
}
.post-filter:focus-visible {
  outline: 2px solid #fff6dc;
  outline-offset: 2px;
}
.post-filter.is-active {
  background: linear-gradient(180deg, rgba(232, 176, 82, 0.78) 0%, rgba(140, 82, 24, 0.82) 100%);
  color: #fffbeb;
  border-color: #fff4d8;
  text-shadow: 0 1px 2px rgba(12, 6, 2, 0.7);
  box-shadow: 0 4px 14px rgba(120, 64, 16, 0.28),
    inset 0 0 0 1px rgba(255, 244, 210, 0.55),
    inset 0 1px 0 rgba(255, 252, 230, 0.55);
}
.post-filter.is-active::before {
  opacity: 0.95;
}
.post-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
}
.post-window .post-action {
  min-width: 7.2rem;
  border-color: rgba(243, 226, 176, 0.82);
  background: linear-gradient(180deg, rgba(168, 108, 42, 0.62) 0%, rgba(72, 40, 14, 0.7) 100%);
  color: #fff8e8;
  font-family: var(--font-display), Georgia, serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.post-window .post-action:hover:not(:disabled),
.post-window .post-action:focus-visible:not(:disabled) {
  border-color: #fff4d8;
  background: linear-gradient(180deg, rgba(196, 132, 52, 0.7) 0%, rgba(86, 48, 16, 0.72) 100%);
}
.post-window .post-action-danger {
  border-color: rgba(240, 180, 168, 0.82);
  background: linear-gradient(180deg, #a84838, #6e241c);
}
.post-window .post-action-danger:hover:not(:disabled),
.post-window .post-action-danger:focus-visible:not(:disabled) {
  border-color: #ffd4c8;
  background: linear-gradient(180deg, #c05644, #7a2c22);
}
.post-window .post-action:disabled {
  border-color: rgba(232, 206, 130, 0.42);
  background: rgba(22, 12, 6, 0.55);
  color: #dcc8a0;
}
.post-ledger {
  position: relative;
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
}
.post-ledger.parchment {
  color: #f3e2b0;
  background-color: rgba(62, 38, 16, 0.38);
  background-image: radial-gradient(ellipse 90% 55% at 50% -8%, rgba(255, 220, 150, 0.34), transparent 58%),
    radial-gradient(ellipse at 0 0, rgba(232, 176, 82, 0.2), transparent 46%),
    linear-gradient(180deg, rgba(92, 56, 24, 0.36) 0%, rgba(42, 24, 12, 0.46) 100%);
  border: 1px solid #ba985f;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(20, 10, 4, 0.28),
    0 0 0 3px rgba(42, 24, 12, 0.28),
    0 0 0 4px rgba(232, 200, 120, 0.48),
    inset 0 0 0 4px rgba(255, 232, 170, 0.1),
    inset 0 1px 0 rgba(255, 244, 210, 0.5);
  -webkit-backdrop-filter: blur(8px) saturate(1.18);
  backdrop-filter: blur(8px) saturate(1.18);
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --text-disabled: #b89a70;
  --ink-parchment: #f3e2b0;
  --bg-app: rgba(10, 6, 4, 0.28);
  --bg-panel: rgba(22, 12, 7, 0.18);
  --bg-panel-raised: rgba(28, 16, 8, 0.28);
  --bg-wood: rgba(28, 16, 8, 0.72);
  --wood-text: #f3e2b0;
  --border: rgba(212, 174, 98, 0.4);
  --border-strong: rgba(212, 174, 98, 0.55);
  --border-gold: #d4ae62;
}
.post-ledger.parchment::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 6px;
  border: 1px solid rgba(243, 226, 176, 0.28);
  border-radius: 8px;
  pointer-events: none;
  background: linear-gradient(#fff1c4, #e1c48b) left top / 24px 2px,
    linear-gradient(#fff1c4, #e1c48b) left top / 2px 24px,
    linear-gradient(#e1c48b, #fff1c4) right bottom / 24px 2px,
    linear-gradient(#e1c48b, #fff1c4) right bottom / 2px 24px;
  background-repeat: no-repeat;
}
.post-list {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.4rem 0 0.5rem;
  border-right: 1px solid rgba(243, 226, 176, 0.28);
  background: linear-gradient(180deg, rgba(255, 214, 140, 0.08), rgba(42, 24, 12, 0.06));
  scrollbar-color: rgba(232, 206, 130, 0.55) transparent;
}
.post-list::-webkit-scrollbar,
.post-detail-body::-webkit-scrollbar {
  width: 0.45rem;
}
.post-list::-webkit-scrollbar-thumb,
.post-detail-body::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(232, 206, 130, 0.55);
}
.post-entry {
  display: flex;
  width: 100%;
  min-height: 2.75rem;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.78rem 1rem;
  border: 0;
  border-bottom: 1px solid rgba(232, 206, 130, 0.16);
  background: transparent;
  color: #f3e2b0;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out);
}
.post-entry:hover,
.post-entry:focus-visible {
  background: rgba(232, 176, 82, 0.22);
}
.post-entry:focus-visible {
  outline: 2px solid rgba(243, 226, 176, 0.82);
  outline-offset: -2px;
}
.post-entry.is-active {
  background: linear-gradient(180deg, rgba(255, 206, 110, 0.48) 0%, rgba(168, 96, 32, 0.32) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 210, 0.55),
    inset 0 1px 0 rgba(255, 252, 230, 0.45);
}
.post-entry.is-unread {
  background: rgba(232, 176, 82, 0.16);
  box-shadow: inset 0 2px 0 #d4ae62;
}
.post-entry.is-unread.is-active {
  background: linear-gradient(180deg, rgba(212, 148, 56, 0.46) 0%, rgba(120, 68, 22, 0.3) 100%);
  box-shadow: inset 0 2px 0 #d4ae62,
    inset 0 0 0 1px rgba(255, 236, 180, 0.42);
}
.post-entry-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}
.post-entry-kind {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
  color: #dcc8a0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(20, 8, 2, 0.78);
}
.post-entry.is-unread .post-entry-kind::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c4, #d4ae62 58%, #8a5a22);
  box-shadow: 0 0 0 1px rgba(243, 226, 176, 0.35);
}
.post-entry-kind svg {
  width: 0.9rem;
  height: 0.9rem;
}
.post-entry-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(20, 8, 2, 0.82);
}
.post-entry time {
  color: #dcc8a0;
  font-size: 0.72rem;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(20, 8, 2, 0.78);
}
.post-entry-flag {
  color: #f0d48a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.post-empty,
.post-detail-empty {
  padding: 2.1rem 1.1rem;
  color: #dcc8a0;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.45;
  text-align: center;
}
.post-empty::before,
.post-detail-empty::before {
  content: "";
  display: block;
  width: 4.6rem;
  height: 1px;
  margin: 0 auto 0.85rem;
  background: linear-gradient(90deg, transparent, #d4ae62, transparent);
}
.post-detail {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: radial-gradient(ellipse at 18% 0%, rgba(255, 220, 150, 0.22), transparent 52%),
    rgba(62, 36, 14, 0.12);
}
.post-detail-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.9rem 0.35rem;
  border-bottom: 1px solid rgba(232, 206, 130, 0.22);
}
.post-back {
  min-height: 2.75rem;
  padding: 0.3rem 0.2rem;
  border: 0;
  background: none;
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
  cursor: pointer;
}
.post-back::before {
  content: "‹ ";
}
.post-back:hover,
.post-back:focus-visible {
  color: #fff4d8;
}
.post-back:focus-visible {
  outline: 2px solid rgba(243, 226, 176, 0.82);
  outline-offset: 2px;
}
.post-detail-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.7rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.9rem 1.05rem 1.15rem;
  scrollbar-color: rgba(232, 206, 130, 0.55) transparent;
}
.post-detail-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f3e2b0;
}
.post-detail-copy {
  margin: 0 0 0.7rem;
  color: #f3e2b0;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.post-dispatch-kicker {
  margin: 0 0 0.28rem;
  color: #e1c48b;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.post-dispatch,
.post-dungeon {
  position: relative;
  display: grid;
  align-content: start;
  align-self: start;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  padding: 0.95rem 1rem 1.05rem;
  overflow: hidden;
  border: 1px solid rgba(243, 226, 176, 0.72);
  border-radius: 10px;
  background: radial-gradient(ellipse at 12% 0%, rgba(255, 220, 150, 0.38), transparent 52%),
    linear-gradient(180deg, rgba(120, 76, 28, 0.52) 0%, rgba(62, 36, 16, 0.58) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 180, 0.22),
    inset 0 1px 0 rgba(255, 248, 220, 0.42),
    0 10px 22px rgba(28, 14, 6, 0.22);
  color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(28, 14, 6, 0.55);
}
.post-dispatch::before,
.post-dungeon::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 6px;
  pointer-events: none;
  border: 1px solid rgba(243, 226, 176, 0.28);
  border-radius: 7px;
  background: linear-gradient(#fff1c4, #e1c48b) left top / 18px 2px,
    linear-gradient(#fff1c4, #e1c48b) left top / 2px 18px,
    linear-gradient(#e1c48b, #fff1c4) right bottom / 18px 2px,
    linear-gradient(#e1c48b, #fff1c4) right bottom / 2px 18px;
  background-repeat: no-repeat;
  opacity: 0.9;
}
.post-dispatch > *,
.post-dungeon > * {
  position: relative;
  z-index: 2;
}
.post-dispatch[data-outcome="WIN"],
.post-dungeon[data-outcome="WIN"] {
  border-top: 3px solid #6f9256;
}
.post-dispatch[data-outcome="LOSS"],
.post-dungeon[data-outcome="LOSS"] {
  border-top: 3px solid #a44738;
}
.post-dungeon-heading {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.post-dungeon-portrait {
  width: 5.2rem;
  height: 5.2rem;
  overflow: hidden;
  border: 2px solid rgba(232, 206, 130, 0.88);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(243, 226, 176, 0.18), transparent 58%),
    rgba(8, 6, 14, 0.55);
  box-shadow: 0 0 0 3px rgba(8, 6, 14, 0.72),
    0 0 0 5px rgba(225, 196, 139, 0.55),
    0 8px 18px rgba(4, 6, 14, 0.5),
    inset 0 0 0 1px rgba(243, 226, 176, 0.22);
}
.post-dungeon-art {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
.post-dungeon-copy {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}
.post-dungeon-kicker {
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
  color: #f3e2b0;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.post-dungeon .post-detail-title {
  margin: 0.12rem 0 0.08rem;
  font-size: 1.18rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.post-dungeon-outcome {
  margin: 0;
  color: #c9b58c;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.post-dungeon[data-outcome="WIN"] .post-dungeon-outcome {
  color: #9dce8a;
}
.post-dungeon[data-outcome="LOSS"] .post-dungeon-outcome {
  color: #e39a8a;
}
.post-dungeon-combat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(243, 226, 176, 0.42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(92, 56, 22, 0.42), rgba(48, 28, 12, 0.46));
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, 0.22);
}
.post-dungeon-combat > div {
  min-width: 0;
  padding: 0.45rem 0.55rem 0.5rem;
}
.post-dungeon-combat > div + div {
  border-left: 1px solid rgba(212, 174, 98, 0.22);
}
.post-dungeon-combat dt {
  color: #c9b58c;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-dungeon-combat dd {
  margin: 0.18rem 0 0;
  color: #f8ecbf;
  font-size: 0.88rem;
  font-weight: 800;
}
.post-dungeon-combat small {
  display: block;
  margin-top: 0.22rem;
  color: rgba(243, 226, 176, 0.72);
  font-size: 0.72rem;
}
.post-dungeon-health-track {
  overflow: hidden;
  height: 0.55rem;
  margin-top: 0.38rem;
  border-radius: 99px;
  background: rgba(28, 16, 8, 0.45);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.16),
    inset 0 1px 2px rgba(0, 0, 0, 0.22);
}
.post-dungeon-health-track > span {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, #b6e08a 0%, #5d8a42 52%, #355828 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 220, 0.35);
}
.post-dungeon-combat > div[data-side="enemy"] .post-dungeon-health-track > span {
  background: linear-gradient(180deg, #e39a8a 0%, #a44738 52%, #6a2a24 100%);
}
.post-dungeon-spoils {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0.32rem 0.38rem;
  list-style: none;
  border: 1px solid rgba(243, 226, 176, 0.5);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(140, 88, 32, 0.55), rgba(72, 42, 16, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, 0.28),
    0 6px 14px rgba(28, 14, 6, 0.18);
}
.post-dungeon-spoils li {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.22rem 0.55rem 0.2rem 0.38rem;
  border: 1px solid rgba(255, 236, 180, 0.55);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(196, 140, 56, 0.55), rgba(92, 52, 18, 0.62));
  box-shadow: inset 0 1px 0 rgba(255, 248, 220, 0.32);
  color: #fff6dc;
  font-weight: 700;
}
.post-dungeon-spoil-icon {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
}
.post-dungeon-empty,
.post-dungeon-summary {
  margin: 0;
  color: rgba(243, 226, 176, 0.82);
  font-size: 0.82rem;
}
.post-battle {
  --post-battle-you: #2a9e6a;
  --post-battle-them: #c2642e;
  min-width: 0;
  gap: 0.85rem;
}
.post-battle-banner {
  margin: 0;
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(243, 226, 176, 0.28);
  border-radius: 6px;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}
.post-battle-banner[data-outcome="WIN"] {
  border-color: rgba(42, 158, 106, 0.55);
  background: linear-gradient(
    180deg,
    rgba(42, 158, 106, 0.32),
    rgba(18, 72, 48, 0.28)
  );
  color: #d4f0c8;
}
.post-battle-banner[data-outcome="LOSS"] {
  border-color: rgba(194, 100, 46, 0.55);
  background: linear-gradient(
    180deg,
    rgba(194, 100, 46, 0.32),
    rgba(72, 28, 16, 0.28)
  );
  color: #f3c4a8;
}
.post-battle-combatants {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.8rem minmax(0, 1fr);
  align-items: start;
  gap: 0.45rem 0.4rem;
  min-width: 0;
}
.post-battle-fighter {
  display: grid;
  min-width: 0;
  gap: 0.4rem;
  padding: 0.45rem 0.4rem 0.5rem;
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-radius: 8px;
  background: rgba(14, 8, 4, 0.28);
}
.post-battle-fighter[data-outcome="WIN"] {
  box-shadow: inset 0 2px 0 rgba(42, 158, 106, 0.7);
}
.post-battle-fighter[data-outcome="LOSS"] {
  box-shadow: inset 0 2px 0 rgba(194, 100, 46, 0.7);
}
.post-battle-fighter header {
  min-width: 0;
  text-align: center;
}
.post-battle-kicker {
  margin: 0;
  color: #e1c48b;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-battle-fighter h3 {
  margin: 0.12rem 0 0;
  overflow: hidden;
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(0.92rem, 2vw, 1.12rem);
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-battle-fighter h3 button {
  color: inherit;
}
.post-battle-art {
  display: grid;
  grid-template-columns: 2.05rem minmax(0, 1fr) 2.05rem;
  align-items: center;
  gap: 0.28rem;
}
.post-battle-equip-col {
  display: grid;
  gap: 0.28rem;
  justify-items: center;
}
.post-battle-equip {
  position: relative;
  display: grid;
  width: 2.05rem;
  height: 2.05rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--rarity-common);
  border-radius: 4px;
  background: rgba(20, 17, 13, 0.88);
}
.post-battle-equip.is-empty {
  border-style: dashed;
  border-color: rgba(212, 174, 98, 0.28);
  background: rgba(12, 8, 5, 0.45);
}
.post-battle-equip[data-rarity="FINE"] {
  border-color: var(--rarity-fine);
}
.post-battle-equip[data-rarity="RARE"] {
  border-color: var(--rarity-rare);
}
.post-battle-equip[data-rarity="EPIC"] {
  border-color: var(--rarity-epic);
}
.post-battle-equip[data-rarity="LEGENDARY"] {
  border-color: #d4ae62;
}
.post-battle-equip-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.post-battle-equip strong,
.post-battle-amulet-level {
  position: absolute;
  right: 1px;
  bottom: 0;
  color: #fff6dc;
  font-size: 0.58rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.post-battle-amulet-level {
  right: auto;
  left: 1px;
}
.post-battle-portrait {
  position: relative;
  min-width: 0;
  aspect-ratio: 670 / 1009;
  overflow: hidden;
  border-radius: 6px;
}
.post-battle-frame {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 3px;
}
.post-battle-face {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(#89c5e8 0%, #cfe6a6 55%, #423a22 100%);
}
.post-battle-face-img,
.post-battle-face-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
.post-battle-face-fallback {
  display: grid;
  place-items: center;
  color: #e1c48b;
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.8rem;
}
.post-battle-portrait[data-outcome="LOSS"] .post-battle-face-img {
  filter: grayscale(0.48) brightness(0.72);
}
.post-battle-shatter {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(
      122deg,
      transparent 41%,
      rgba(255, 244, 220, 0.62) 41.7%,
      transparent 42.5%
    ),
    linear-gradient(
      28deg,
      transparent 50%,
      rgba(20, 8, 4, 0.78) 51%,
      transparent 52.4%
    ),
    linear-gradient(
      78deg,
      transparent 35%,
      rgba(255, 244, 220, 0.4) 35.7%,
      transparent 36.8%
    ),
    linear-gradient(
      165deg,
      transparent 61%,
      rgba(20, 8, 4, 0.72) 62.2%,
      transparent 63.6%
    );
}
.post-battle-portrait[data-outcome="WIN"] {
  box-shadow: 0 0 0 1px rgba(212, 174, 98, 0.7), 0 0 14px rgba(212, 174, 98, 0.28);
}
.post-battle-vs {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  align-self: center;
  place-items: center;
  border: 1px solid #a97b36;
  border-radius: 50%;
  background: #3a2415;
  color: #f5c05a;
  box-shadow: inset 0 0 0 3px #1a100a,
    0 0 1.2rem rgba(183, 92, 39, 0.28);
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.92rem;
  font-weight: 900;
  transform: rotate(-4deg);
}
.post-battle-health {
  display: grid;
  gap: 0.2rem;
}
.post-battle-health > .font-data {
  font-size: 0.72rem;
  text-align: center;
}
.post-battle-health-track {
  display: block;
  height: 0.55rem;
  overflow: hidden;
  border: 1px solid #18110c;
  border-radius: 4px;
  background: #38251b;
}
.post-battle-health-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7f241d, #c34a35);
}
.post-battle-essentials {
  display: grid;
  gap: 0.28rem;
  justify-items: center;
}
.post-battle-essential {
  position: relative;
  display: grid;
  width: 2.05rem;
  height: 2.05rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(212, 174, 98, 0.4);
  border-radius: 4px;
  background: rgba(20, 17, 13, 0.88);
  color: #e1c48b;
}
.post-battle-essential.is-empty {
  border-style: dashed;
  border-color: rgba(212, 174, 98, 0.28);
  background: rgba(12, 8, 5, 0.45);
  opacity: 0.78;
}
.post-battle-essential-icon,
.post-battle-essential svg,
.post-battle-equip svg {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
}
.post-battle-essential.is-art .post-battle-essential-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-battle-essential strong {
  position: absolute;
  right: 1px;
  bottom: 0;
  color: #fff6dc;
  font-size: 0.52rem;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.post-battle-compare-block {
  min-width: 0;
}
.post-battle-legend {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.35rem;
  color: #f3e2b0;
  font-size: 0.72rem;
  font-weight: 700;
}
.post-battle-legend span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.32rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-battle-legend i {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  flex: 0 0 auto;
  border-radius: 2px;
}
.post-battle-legend i[data-side="you"] {
  background: var(--post-battle-you);
}
.post-battle-legend i[data-side="them"] {
  background: var(--post-battle-them);
}
.post-battle-compare {
  display: grid;
  gap: 0.32rem;
  margin: 0;
  padding: 0.45rem 0.4rem;
  overflow-x: auto;
  list-style: none;
  border: 1px solid rgba(212, 174, 98, 0.28);
  border-radius: 8px;
  background: rgba(14, 8, 4, 0.28);
}
.post-battle-compare-row {
  display: grid;
  grid-template-columns: minmax(2.6rem, 3.4rem)
    minmax(0, 1fr)
    minmax(4.4rem, 5.6rem)
    minmax(0, 1fr)
    minmax(2.6rem, 3.4rem);
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
}
.post-battle-compare-value {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.post-battle-compare-value[data-side="you"] {
  text-align: right;
}
.post-battle-compare-value[data-side="them"] {
  text-align: left;
}
.post-battle-bar {
  display: flex;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(18, 12, 8, 0.72);
}
.post-battle-bar[data-side="you"] {
  justify-content: flex-end;
}
.post-battle-bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
}
.post-battle-bar[data-side="you"] > span {
  background: var(--post-battle-you);
}
.post-battle-bar[data-side="them"] > span {
  background: var(--post-battle-them);
}
.post-battle-compare-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  overflow: hidden;
  color: #f3e2b0;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-battle-stat-icon {
  width: 0.9rem;
  height: 0.9rem;
  object-fit: contain;
}
.post-battle-result {
  display: grid;
  gap: 0.4rem;
  padding: 0.6rem 0.7rem 0.65rem;
  border: 1px solid rgba(97, 125, 81, 0.7);
  border-radius: 8px;
  background: rgba(14, 8, 4, 0.28);
  text-align: center;
}
.post-battle-result[data-outcome="loss"] {
  border-color: rgba(164, 71, 56, 0.7);
}
.post-battle-matchup {
  margin: 0;
  color: #f3e2b0;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.post-battle-awarded {
  margin: 0;
  color: #e1c48b;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.post-battle-spoils {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-battle-spoils li {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.28rem;
  padding: 0.22rem 0.55rem 0.2rem 0.38rem;
  border: 1px solid rgba(255, 236, 180, 0.55);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(196, 140, 56, 0.55), rgba(92, 52, 18, 0.62));
  color: #fff6dc;
  font-weight: 700;
}
.post-battle-spoil-icon {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
}
.post-battle-spoils .exp-amount {
  gap: 0.28rem;
}
.post-battle-flavor {
  margin: 0;
  overflow-wrap: anywhere;
  color: rgba(243, 226, 176, 0.9);
  font-size: 0.88rem;
  line-height: 1.45;
}
.post-battle-turns {
  min-width: 0;
  border-top: 1px solid rgba(212, 174, 98, 0.28);
  padding-top: 0.35rem;
}
.post-battle-turns summary {
  cursor: pointer;
  color: #f3e2b0;
  font-weight: 700;
}
.post-battle-turns summary span {
  margin-left: 0.4rem;
  color: #e1c48b;
  font-weight: 600;
}
.post-battle-turns ol {
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
}
.post-battle-turns li {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) auto;
  grid-template-areas: "round copy damage"
    ". hp hp";
  gap: 0.2rem 0.55rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(212, 174, 98, 0.16);
}
.post-battle-turns li[data-side="them"] {
  background: rgba(194, 100, 46, 0.08);
}
.post-battle-turn-round,
.post-battle-turns li small {
  color: #c9b58c;
  font-size: 0.68rem;
}
.post-battle-turn-round {
  grid-area: round;
}
.post-battle-turns li > div {
  display: grid;
  grid-area: copy;
  gap: 0.08rem;
}
.post-battle-turns li > div span {
  color: #dcc8a0;
  font-size: 0.78rem;
}
.post-battle-turn-damage {
  grid-area: damage;
  font-size: 0.78rem;
}
.post-battle-turns li small {
  grid-area: hp;
}
.post-detail-body > .post-battle {
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) {
  .post-battle-vs {
    transform: none;
  }
}
.post-window .post-claim {
  justify-self: start;
  min-width: 8.5rem;
  border-color: #f3e2b0;
  background: linear-gradient(180deg, #c48932, #8a5418);
  color: #fff8e8;
  font-family: var(--font-display), Georgia, serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.post-window .post-claim:disabled {
  border-color: rgba(232, 206, 130, 0.42);
  background: rgba(22, 12, 6, 0.55);
  color: #dcc8a0;
}
.post-compose {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
  padding: 0.15rem 0 0;
}
.post-compose textarea {
  min-height: 4.4rem;
  flex: 1 1 auto;
  resize: vertical;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(243, 226, 176, 0.5);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(120, 76, 28, 0.42), rgba(62, 36, 16, 0.5));
  color: #f3e2b0;
  font-family: var(--font-ui), ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(243, 226, 176, 0.08);
}
.post-compose textarea:focus-visible {
  outline: 2px solid rgba(243, 226, 176, 0.82);
  outline-offset: 1px;
}
.post-letters {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.post-letter {
  padding: 0.55rem 0.65rem 0.6rem;
  border: 1px solid rgba(243, 226, 176, 0.32);
  border-radius: 8px;
  background: rgba(92, 56, 22, 0.28);
}
.post-letter p:first-child {
  margin: 0 0 0.28rem;
  color: #e1c48b;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.post-letter .post-detail-copy {
  margin: 0;
}
@media (max-width: 720px) {
  .post-title::before,
  .post-title::after {
    width: 2.4rem;
    flex-basis: 2.4rem;
  }
  .post-ledger {
    grid-template-columns: minmax(0, 1fr);
  }
  .post-list.is-covered {
    display: none;
  }
  .post-detail.is-closed {
    display: none;
  }
  .post-dungeon-heading {
    grid-template-columns: 4.6rem minmax(0, 1fr);
  }
  .post-dungeon-portrait {
    width: 4.6rem;
    height: 4.6rem;
  }
  .post-dungeon-combat {
    grid-template-columns: minmax(0, 1fr);
  }
  .post-dungeon-combat > div + div {
    border-left: 0;
    border-top: 1px solid rgba(212, 174, 98, 0.22);
  }
  .post-battle-combatants {
    grid-template-columns: minmax(0, 1fr) 2.2rem minmax(0, 1fr);
  }
  .post-battle-art {
    grid-template-columns: 1.7rem minmax(0, 1fr) 1.7rem;
  }
  .post-battle-equip,
  .post-battle-essential {
    width: 1.7rem;
    height: 1.7rem;
  }
  .post-battle-compare-row {
    grid-template-columns: minmax(2.2rem, 2.8rem)
      minmax(0, 1fr)
      minmax(3.6rem, 4.6rem)
      minmax(0, 1fr)
      minmax(2.2rem, 2.8rem);
  }
  .post-battle-turns li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "round damage"
      "copy copy"
      "hp hp";
  }
}
.port-window {
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --text-disabled: #b89a70;
  --ink-parchment: #f3e2b0;
  --wood-text: #f3e2b0;
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: #f3e2b0;
}
.port-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
.port-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 16, 24, 0.62) 0%, rgba(10, 16, 24, 0.24) 18%, transparent 36%),
    radial-gradient(
      ellipse 80% 72% at 50% 58%,
      rgba(8, 16, 20, 0) 0%,
      rgba(8, 14, 18, 0.46) 100%
    );
}
.port-window-body {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 0.55rem;
  overflow: hidden;
  padding: 3.35rem 1rem 1.15rem;
}
.port-window-title {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.45rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #1a1208,
    0 2px 10px rgba(6, 10, 16, 0.92),
    0 0 22px rgba(6, 10, 16, 0.72);
}
.keep-parchment .island-route-panel[data-panel="port"] .port-window-title,
.keep-parchment .island-route-panel[data-panel="port"] .port-window-lead {
  color: #f3e2b0;
  text-shadow: 0 1px 0 #1a1208,
    0 2px 10px rgba(6, 10, 16, 0.92),
    0 0 22px rgba(6, 10, 16, 0.72);
}
.port-window-lead {
  max-width: 32rem;
  flex: 0 0 auto;
  margin: 0 auto;
  text-align: center;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.35;
  color: #f3e2b0;
  text-shadow: 0 1px 8px rgba(6, 10, 16, 0.9), 0 0 12px rgba(6, 10, 16, 0.55);
}
.port-tabs {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  gap: 0.35rem;
  width: min(72rem, 100%);
  margin: 0 auto;
  padding: 0;
  border-bottom: none;
  flex-wrap: wrap;
}
.port-tabs button {
  min-width: 8.25rem;
  min-height: 44px;
  padding: 0.62rem 1rem 0.55rem;
  border: 1px solid rgba(232, 206, 130, 0.78);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(10, 28, 36, 0.86) 0%, rgba(4, 10, 16, 0.94) 100%);
  color: #fff6dc;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(4, 10, 14, 0.88);
  box-shadow: 0 2px 8px rgba(4, 10, 14, 0.35),
    inset 0 1px 0 rgba(243, 226, 176, 0.18);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
  backdrop-filter: blur(6px) saturate(1.08);
  cursor: pointer;
  transition: background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out);
}
.port-tabs button:hover {
  color: #fffbeb;
  border-color: rgba(243, 226, 176, 0.92);
  background: linear-gradient(180deg, rgba(20, 78, 90, 0.78) 0%, rgba(6, 16, 24, 0.94) 100%);
}
.port-tabs button:focus-visible {
  outline: 2px solid #fff6dc;
  outline-offset: 2px;
}
.port-tabs button[aria-selected="true"],
.port-tabs button.is-active {
  background: linear-gradient(180deg, rgba(28, 108, 118, 0.72) 0%, rgba(6, 16, 24, 0.94) 100%);
  color: #fffbeb;
  border-color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(4, 10, 14, 0.9);
  box-shadow: 0 2px 10px rgba(4, 10, 14, 0.4),
    inset 0 0 0 1px rgba(243, 226, 176, 0.35),
    inset 0 1px 0 rgba(255, 248, 220, 0.28);
}
.port-window-panel {
  display: flex;
  width: min(72rem, 100%);
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  margin-inline: auto;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.7rem 0.95rem 0.95rem;
  border-radius: 8px;
  scrollbar-color: rgba(232, 206, 130, 0.55) transparent;
}
.port-window-panel::-webkit-scrollbar {
  width: 0.45rem;
}
.port-window-panel::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(232, 206, 130, 0.55);
}
.port-window-panel.parchment {
  color: #f3e2b0;
  background-color: rgba(8, 12, 16, 0.62);
  background-image: none;
  border: 1px solid rgba(232, 206, 130, 0.86);
  box-shadow: 0 10px 22px rgba(4, 8, 12, 0.42),
    inset 0 0 0 1px rgba(243, 226, 176, 0.2);
  -webkit-backdrop-filter: blur(10px) saturate(0.95);
  backdrop-filter: blur(10px) saturate(0.95);
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --text-disabled: #b89a70;
  --ink-parchment: #f3e2b0;
  --bg-app: rgba(8, 14, 18, 0.42);
  --bg-panel: rgba(10, 18, 24, 0.22);
  --bg-panel-raised: rgba(12, 22, 28, 0.32);
  --bg-wood: rgba(12, 22, 28, 0.72);
  --wood-text: #f3e2b0;
  --border: rgba(212, 174, 98, 0.4);
  --border-strong: rgba(212, 174, 98, 0.55);
  --border-gold: #d4ae62;
}
.port-section-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f3e2b0;
}
.port-copy {
  margin: 0 0 0.55rem;
  color: #f3e2b0;
  font-size: 0.95rem;
  line-height: 1.45;
}
.port-kicker {
  margin: 0 0 0.7rem;
  color: #dcc8a0;
  font-size: 0.82rem;
  line-height: 1.45;
}
.port-fishing {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0.35rem 0 0.15rem;
  text-align: left;
}
.port-fishing .port-copy,
.port-fishing .port-kicker {
  max-width: 22.5rem;
}
.port-vessels {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(100%, 22.5rem);
}
.port-vessel {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: 0.45rem 0.75rem;
  align-items: start;
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  background: rgba(8, 22, 32, 0.55);
  border: 1px solid rgba(243, 226, 176, 0.18);
}
.port-vessel-art {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  width: 5.75rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(243, 226, 176, 0.62);
  border-radius: 9px;
  background: #0c181e;
  box-shadow: 0 5px 13px rgba(8, 4, 2, 0.48),
    inset 0 0 0 1px rgba(17, 30, 57, 0.68);
}
.port-vessel-art-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.port-vessel-body {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
}
.port-vessel-name {
  margin: 0;
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f3e2b0;
}
.port-vessel .port-copy,
.port-vessel .port-kicker {
  margin-bottom: 0;
}
.port-vessel-yield {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: #f3e2b0;
}
.port-vessel-sail {
  grid-column: 1 / -1;
  display: block;
}
.port-vessel-sail > button,
.port-vessel-buy button {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.port-vessel-buy {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.05rem;
}
.port-vessel-buy > span {
  flex: 1 1 0;
  min-width: 6.5rem;
}
.port-vessel-yield .currency-amount-icon,
.port-vessel-sail .currency-amount-icon,
.port-vessel-buy .currency-amount-icon {
  height: 1.25em;
  width: 1.25em;
}
.port-amulets {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.port-amulet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.port-exchange {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.port-exchange-grid {
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 640px) {
  .port-exchange-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.port-exchange-grid > section {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.port-exchange-grid > section .port-exchange-offer {
  flex: 1 1 auto;
}
.port-exchange-offer {
  --port-offer-accent: #e8c878;
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.05rem 0.95rem 0.9rem;
  border: 1px solid rgba(243, 226, 176, 0.28);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18, 44, 54, 0.58) 0%, rgba(8, 16, 22, 0.84) 100%);
  box-shadow: 0 8px 18px rgba(4, 8, 12, 0.4),
    inset 0 0 0 1px rgba(243, 226, 176, 0.1),
    inset 0 1px 0 rgba(255, 248, 220, 0.14);
  text-align: center;
}
.port-exchange-offer::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(243, 226, 176, 0.12);
  border-radius: 8px;
  pointer-events: none;
}
.port-exchange-offer[data-currency="PIRANHAS"] {
  --port-offer-accent: #e08a58;
  border-color: rgba(196, 100, 46, 0.45);
  background: linear-gradient(180deg, rgba(72, 32, 16, 0.62) 0%, rgba(8, 16, 22, 0.86) 100%);
}
.port-exchange-offer[data-currency="GOLD"] {
  --port-offer-accent: #efd08a;
  border-color: rgba(232, 200, 120, 0.46);
  background: linear-gradient(180deg, rgba(58, 42, 16, 0.6) 0%, rgba(8, 16, 22, 0.86) 100%);
}
.port-exchange-offer[data-currency="MAP"] {
  --port-offer-accent: #d07058;
  border-color: rgba(176, 72, 56, 0.46);
  background: linear-gradient(180deg, rgba(72, 24, 20, 0.62) 0%, rgba(8, 16, 22, 0.86) 100%);
}
.port-exchange-offer[data-currency="SLEDGE"] {
  --port-offer-accent: #4a93d4;
  border-color: rgba(49, 147, 212, 0.46);
  background: linear-gradient(180deg, rgba(20, 48, 72, 0.62) 0%, rgba(8, 16, 22, 0.86) 100%);
}
.port-exchange-offer[data-currency="MAP"] .port-exchange-rate,
.port-exchange-offer[data-currency="SLEDGE"] .port-exchange-rate {
  flex-wrap: wrap;
  border-radius: 12px;
}
.port-exchange-item-icon {
  width: 1.55rem;
  height: 1.55rem;
  object-fit: contain;
}
.port-exchange-item-qty {
  font-variant-numeric: tabular-nums;
}
.port-exchange-offer[data-currency="MAP"] .port-exchange-receive .item-card {
  margin-top: 0.2rem;
}
.port-exchange-emblem {
  position: relative;
  z-index: 1;
  display: grid;
  width: 5.25rem;
  height: 5.25rem;
  place-items: center;
  border: 1px solid var(--port-offer-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--port-offer-accent) 58%, transparent);
  }
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 248, 220, 0.16) 0%, rgba(8, 18, 24, 0.55) 100%);
  box-shadow: 0 6px 14px rgba(4, 8, 12, 0.42),
    inset 0 0 0 3px rgba(8, 16, 22, 0.32),
    inset 0 1px 0 rgba(255, 248, 220, 0.3);
}
.port-exchange-emblem::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--port-offer-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--port-offer-accent) 34%, transparent);
  }
  border-radius: 50%;
  pointer-events: none;
}
.port-exchange-emblem img {
  width: 3.55rem;
  height: 3.55rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(4, 8, 12, 0.48));
}
.port-exchange-title {
  position: relative;
  z-index: 1;
  margin: 0.1rem 0 0;
  color: #f3e2b0;
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.port-exchange-rate {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.28rem 0.75rem;
  border: 1px solid rgba(243, 226, 176, 0.22);
  border-radius: 999px;
  background: rgba(8, 14, 18, 0.38);
  color: #f3e2b0;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.port-exchange-rate-arrow {
  color: #dcc8a0;
  font-size: 0.85rem;
}
.port-exchange-receive {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  margin: 0.05rem 0 0.1rem;
  color: var(--port-offer-accent);
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(4, 10, 14, 0.75);
}
.port-exchange-receive-kicker {
  color: #dcc8a0;
  font-family: var(--font-ui), ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.port-exchange-rate .currency-amount-icon,
.port-exchange-buy .currency-amount-icon {
  height: 1.25em;
  width: 1.25em;
}
.port-exchange-receive .currency-amount-icon {
  height: 1.4em;
  width: 1.4em;
}
.port-exchange-qty {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: left;
}
.port-exchange-qty-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.port-exchange-qty-row input {
  margin-top: 0;
  text-align: center;
  appearance: textfield;
}
.port-exchange-qty-row input::-webkit-outer-spin-button,
.port-exchange-qty-row input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}
.port-exchange-step {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(212, 174, 98, 0.48);
  border-radius: 6px;
  background: rgba(8, 14, 18, 0.42);
  color: #f3e2b0;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.port-exchange-step:hover:not(:disabled) {
  border-color: rgba(243, 226, 176, 0.82);
  background: rgba(20, 48, 56, 0.55);
}
.port-exchange-step:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.port-exchange-step:focus-visible {
  outline: 2px solid rgba(243, 226, 176, 0.82);
  outline-offset: 1px;
}
.port-exchange-buy {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  margin-top: 0.1rem;
}
.port-exchange-buy > button {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.port-card,
.port-shop-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid rgba(212, 174, 98, 0.5);
  border-radius: 8px;
  background: rgba(6, 12, 18, 0.55);
}
.port-shop-card {
  align-items: center;
  text-align: center;
}
.port-field {
  display: block;
  color: #dcc8a0;
  font-size: 0.82rem;
}
.port-field input {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(212, 174, 98, 0.48);
  border-radius: 6px;
  background: rgba(8, 14, 18, 0.42);
  color: #f3e2b0;
  font-family: var(--font-ui), ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.port-field input:focus-visible {
  outline: 2px solid rgba(243, 226, 176, 0.82);
  outline-offset: 1px;
}
.port-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .port-shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.port-shop-price {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--piranha);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
@keyframes port-haul-veil {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes port-haul-veil-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes port-haul-card {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.82);
  }
  62% {
    opacity: 1;
    transform: translateY(-4px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes port-haul-card-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
}
@keyframes port-haul-coin {
  0% {
    transform: scale(0.55) rotate(-10deg);
    filter: drop-shadow(0 0 0 transparent);
  }
  58% {
    transform: scale(1.18) rotate(6deg);
    filter: drop-shadow(0 0 18px rgba(194, 100, 46, 0.8));
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 12px rgba(194, 100, 46, 0.5));
  }
}
@keyframes port-haul-glint {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.35);
  }
  42% {
    opacity: 1;
    transform: scale(1);
  }
}
.port-haul {
  position: fixed;
  inset: 0;
  z-index: 280;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: radial-gradient(
      ellipse 62% 54% at 50% 46%,
      rgba(10, 22, 30, 0.28) 0%,
      rgba(6, 10, 16, 0.72) 100%
    );
  animation: port-haul-veil 320ms var(--ease-out) both;
  cursor: pointer;
}
.port-haul.is-leaving {
  animation: port-haul-veil-out 600ms var(--ease-out) both;
}
.port-haul-card {
  position: relative;
  display: flex;
  min-width: min(22.5rem, 100%);
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 1.9rem 2.45rem 1.7rem;
  overflow: hidden;
  border: 1px solid rgba(232, 206, 130, 0.86);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 52, 62, 0.94) 0%, rgba(4, 12, 18, 0.97) 100%);
  box-shadow: 0 18px 42px rgba(4, 8, 12, 0.55),
    0 0 36px rgba(194, 100, 46, 0.22),
    inset 0 1px 0 rgba(255, 248, 220, 0.28),
    inset 0 0 0 1px rgba(243, 226, 176, 0.16);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  backdrop-filter: blur(10px) saturate(1.12);
  animation: port-haul-card 720ms var(--ease-out) both;
  pointer-events: none;
}
.port-haul.is-leaving .port-haul-card {
  animation: port-haul-card-out 600ms var(--ease-out) both;
}
.port-haul-card::before,
.port-haul-card::after {
  content: "";
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #ffe7a8;
  box-shadow: 0 0 10px 3px rgba(255, 220, 140, 0.8);
  animation: port-haul-glint 1400ms var(--ease-out) 220ms both;
}
.port-haul-card::before {
  top: 1.05rem;
  right: 1.45rem;
}
.port-haul-card::after {
  bottom: 1.15rem;
  left: 1.5rem;
  animation-delay: 480ms;
}
.port-haul-seal {
  width: 6.6rem;
  height: 6.6rem;
  object-fit: contain;
  animation: port-haul-coin 800ms var(--ease-out) both;
  filter: drop-shadow(0 0 18px rgba(194, 100, 46, 0.72));
}
.port-haul-kicker {
  color: #f3e2b0;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(6, 10, 16, 0.9);
}
.port-haul-amount {
  color: #f4c08a;
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(2.05rem, 5vw, 2.85rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(194, 100, 46, 0.45),
    0 2px 0 #1a1208;
}
.hall-clan-profile-link {
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}
.hall-clan-profile-link:hover,
.hall-clan-profile-link:focus-visible {
  color: #fff1c4;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.hall-clan-profile-link:focus-visible {
  outline: 2px solid rgba(243, 226, 176, 0.82);
  outline-offset: 3px;
}
.hall-settings-cog {
  position: absolute;
  z-index: 5;
  top: 3.2rem;
  right: 0.4rem;
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e8d6a0;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(18, 8, 4, 0.7));
}
.hall-settings-cog:hover {
  color: #fff1c4;
}
.hall-settings-cog:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 2px;
}
.hall-settings-cog-art {
  width: 1.7rem;
  height: 1.7rem;
}
.hall-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
.hall-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 10, 6, 0.42) 0%, transparent 24%),
    radial-gradient(
      ellipse 48% 62% at 50% 58%,
      rgba(16, 9, 4, 0.12),
      transparent 74%
    );
}
.hall-window-body {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 0.85rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 3.35rem 1rem 1.15rem;
}
.hall-window-title {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 2.45rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.keep-parchment .island-route-panel[data-panel="hall"] .hall-window-title,
.keep-parchment .island-route-panel[data-panel="hall"] .hall-window-lead {
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.hall-window-lead {
  max-width: 26rem;
  flex: 0 0 auto;
  margin: 0 auto;
  text-align: center;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.35;
  color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.hall-window-panel.parchment {
  display: flex;
  width: min(28rem, 100%);
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  margin-inline: auto;
  overflow: hidden;
  color: #f3e2b0;
  background-color: rgba(14, 8, 4, 0.22);
  background-image: none;
  border: 1px solid rgba(212, 174, 98, 0.4);
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --ink-parchment: #f3e2b0;
  --bg-app: rgba(10, 6, 4, 0.28);
  --bg-panel: rgba(22, 12, 7, 0.22);
  --bg-panel-raised: rgba(28, 16, 8, 0.22);
  --border: rgba(212, 174, 98, 0.4);
  --border-strong: rgba(212, 174, 98, 0.55);
}
.forge-window {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: #f3e2b0;
}
.forge-window[data-open="true"] .forge-window-body {
  visibility: hidden;
  pointer-events: none;
}
.forge-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.forge-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 10, 6, 0.42) 0%, transparent 24%),
    radial-gradient(
      ellipse 48% 62% at 50% 58%,
      rgba(16, 9, 4, 0.12),
      transparent 74%
    );
}
.forge-window-body {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 0.85rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 3.35rem 1rem 1.15rem;
}
.forge-window-title {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 2.45rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.keep-parchment .island-route-panel[data-panel="forge"] .forge-window-title,
.keep-parchment .island-route-panel[data-panel="forge"] .forge-window-lead {
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.forge-window-lead {
  max-width: 26rem;
  flex: 0 0 auto;
  margin: 0 auto;
  text-align: center;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.35;
  color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.forge-window-panel.parchment {
  display: flex;
  width: min(36rem, 100%);
  min-width: 0;
  flex: 0 0 auto;
  flex-direction: column;
  margin-inline: auto;
  overflow: visible;
  color: #f3e2b0;
  padding: 0;
  background-color: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --ink-parchment: #f3e2b0;
  --bg-app: rgba(10, 6, 4, 0.28);
  --bg-panel: rgba(22, 12, 7, 0.22);
  --bg-panel-raised: rgba(28, 16, 8, 0.22);
  --border: rgba(212, 174, 98, 0.4);
  --border-strong: rgba(212, 174, 98, 0.55);
}
.forge-window-actions {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.forge-window-actions .forge-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 19rem;
  padding: 1.2rem 1.2rem 1rem;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #ad8548;
  border-radius: 9px;
  background: radial-gradient(ellipse at 50% 20%, rgba(173, 100, 35, 0.24), transparent 65%),
    linear-gradient(155deg, rgba(48, 31, 20, 0.95), rgba(20, 14, 11, 0.96));
  box-shadow: 0 8px 24px #150b0640, inset 0 0 0 4px #150e0980, inset 0 0 0 5px #c89a4b26;
  color: #f3e2b0;
  text-align: center;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.forge-window-actions .forge-entry--amulet {
  background: radial-gradient(ellipse at 50% 20%, rgba(65, 103, 168, 0.3), transparent 65%),
    linear-gradient(155deg, rgba(29, 32, 44, 0.96), rgba(18, 16, 23, 0.96));
}
.forge-entry-art {
  position: relative;
  display: block;
  width: 10rem;
  height: 9rem;
  margin-bottom: 0.35rem;
  background: radial-gradient(ellipse, #d9aa5130, transparent 68%);
}
.forge-entry--amulet .forge-entry-art {
  background: radial-gradient(ellipse, #719de94d, transparent 68%);
}
.forge-entry-art img {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px #0009);
}
.forge-entry-top {
  width: 8.25rem;
  height: 8.25rem;
  inset: 0;
  margin: auto;
}
.forge-entry-amulet {
  width: 8rem;
  height: 9rem;
  inset: 0;
  margin: auto;
}
.forge-entry-title {
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.forge-entry-description {
  max-width: 14rem;
  margin: 0.55rem 0 1rem;
  color: #d4c4a7;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.45;
}
.forge-entry-action {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid #c69a4b45;
  color: #eed39b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.forge-entry-action > span {
  font-size: 1.1rem;
  line-height: 1;
}
.forge-window-actions .forge-entry:hover {
  transform: translateY(-3px);
  border-color: #f3d999;
  box-shadow: 0 12px 28px #150b0670, inset 0 0 0 4px #150e0980, inset 0 0 0 5px #c89a4b70;
}
.forge-window-actions .forge-entry:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .forge-window-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
  .forge-window-actions .forge-entry {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    column-gap: 0.75rem;
    min-height: 10rem;
    padding: 1rem;
    text-align: left;
  }
  .forge-entry-art {
    grid-row: span 3;
    width: 6rem;
    height: 7rem;
    margin: 0;
  }
  .forge-entry-art img {
    width: 5rem;
    height: 6.5rem;
  }
  .forge-entry-title {
    font-size: 1.2rem;
  }
  .forge-entry-description {
    margin: 0.35rem 0 0.6rem;
    font-size: 0.8rem;
  }
  .forge-entry-action {
    justify-content: space-between;
    padding-top: 0.55rem;
    font-size: 0.65rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .forge-window-actions .forge-entry {
    transition: none;
  }
  .forge-window-actions .forge-entry:hover {
    transform: none;
  }
}
.forge-room-backdrop {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: stretch;
  padding: 2.9rem 0.5rem 0.5rem;
  background: radial-gradient(ellipse 70% 80% at 50% 58%, rgba(18, 8, 4, 0.28), rgba(8, 4, 2, 0.62));
}
.forge-room {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(232, 206, 130, 0.55);
  border-radius: 10px;
  color: #f3e2b0;
  background-color: rgba(16, 9, 5, 0.9);
  box-shadow: 0 18px 40px rgba(8, 4, 2, 0.55),
    0 0 0 1px rgba(74, 48, 16, 0.65),
    inset 0 1px 0 rgba(255, 226, 170, 0.18),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --ink-parchment: #f3e2b0;
  --bg-app: rgba(10, 6, 4, 0.42);
  --bg-panel: rgba(22, 12, 7, 0.28);
  --bg-panel-raised: rgba(28, 16, 8, 0.28);
  --border: rgba(212, 174, 98, 0.4);
  --border-strong: rgba(212, 174, 98, 0.55);
}
.forge-room::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 8px;
  border: 1px solid rgba(212, 174, 98, 0.22);
  border-radius: 6px;
}
.forge-room::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 8px;
  border-radius: 6px;
  box-shadow: 0.42rem 0.42rem 0 -0.34rem rgba(212, 174, 98, 0.55),
    -0.42rem 0.42rem 0 -0.34rem rgba(212, 174, 98, 0.55),
    0.42rem -0.42rem 0 -0.34rem rgba(212, 174, 98, 0.55),
    -0.42rem -0.42rem 0 -0.34rem rgba(212, 174, 98, 0.55);
}
.forge-room-heading {
  position: relative;
  z-index: 2;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr) minmax(6.5rem, auto);
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.7rem 1rem 0.65rem;
  background: linear-gradient(180deg, rgba(58, 34, 16, 0.42), transparent);
  border-bottom: 1px solid rgba(212, 174, 98, 0.32);
}
.forge-room-heading-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
}
.forge-room-heading h2 {
  margin: 0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 6px rgba(18, 8, 4, 0.7);
}
.forge-room-lead {
  margin: 0;
  max-width: 24rem;
  color: #dcc8a0;
  font-size: 0.84rem;
  font-style: italic;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.forge-room-close {
  display: inline-flex;
  width: auto;
  min-width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0 0.75rem 0 0.5rem;
  border: 1px solid rgba(212, 174, 98, 0.4);
  border-radius: 6px;
  background: rgba(18, 10, 6, 0.5);
  color: #e8d6a0;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  filter: none;
}
.forge-room-close span {
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
}
.forge-room-close:hover {
  color: #fff1c4;
  border-color: rgba(243, 226, 176, 0.7);
}
.forge-room-close:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 2px;
}
.forge-room-heading-spacer {
  display: block;
  min-width: 2.75rem;
  min-height: 2.75rem;
}
.forge-room-body {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  padding: 0.85rem 1.15rem 1.1rem;
}
.forge-window .forge-smith {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}
.forge-window .forge-mode-tabs {
  margin-top: 0.05rem;
  margin-bottom: 0.7rem;
}
.forge-window .forge-upgrade {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0;
}
.forge-window .forge-upgrade-gear {
  position: relative;
  z-index: 2;
  left: auto;
  top: auto;
  display: flex;
  width: max-content;
  max-width: 100%;
  max-height: none;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.4rem;
  margin-inline: auto;
  overflow-x: auto;
  overflow-y: auto;
  padding: 0.5rem 0.5rem 0.55rem;
  border: 1px solid rgba(212, 174, 98, 0.32);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(42, 24, 12, 0.38), rgba(10, 6, 4, 0.46));
  box-shadow: inset 0 1px 0 rgba(243, 226, 176, 0.08);
  scrollbar-width: thin;
  scrollbar-color: #a67b38 transparent;
}
.forge-window .forge-gear-tile {
  width: 6.1rem;
  flex: 0 0 auto;
}
.forge-window .forge-gear-name {
  font-size: 12px;
}
.forge-window .forge-upgrade-identity {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.1rem 0.5rem 0.05rem;
}
.forge-window .forge-upgrade-identity-name {
  margin: 0;
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 4px rgba(18, 8, 4, 0.75);
}
.forge-window .forge-upgrade-identity-level {
  margin: 0;
  color: #ffdf91;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.forge-window .forge-anvil {
  position: relative;
  left: auto;
  top: auto;
  flex: 0 0 auto;
  width: min(34rem, 100%);
  margin: 0 auto;
  transform: none;
  gap: 0.45rem 0.85rem;
  grid-template-columns: 7.1rem minmax(10rem, 1fr) 7.1rem;
}
.forge-window .forge-anvil .forge-anvil-frame {
  height: 8.35rem;
  width: 8.35rem;
}
.forge-window .forge-anvil-cost {
  width: 7.75rem;
  height: 7.75rem;
  min-width: 7.75rem;
  padding: 0.55rem 0.6rem 0.5rem;
}
.forge-window .forge-anvil-piranha {
  transform: translateX(-0.45rem);
}
.forge-window .forge-anvil-crystal {
  transform: translateX(0.45rem);
}
.forge-window .forge-anvil-coin {
  width: 2.2rem;
  height: 2.2rem;
}
.forge-window .forge-anvil-cost-n {
  font-size: 18px;
}
.forge-window .forge-anvil-channels {
  width: 21rem;
}
.forge-window .forge-anvil-chance {
  font-size: 1.05rem;
}
.forge-window .forge-upgrade-button {
  width: 10.5rem;
  height: 2.85rem;
  border: 1px solid rgba(243, 226, 176, 0.55);
  box-shadow: 0 0 0 1px rgba(74, 48, 16, 0.55),
    inset 0 1px 0 rgba(255, 226, 170, 0.28);
  font-family: var(--font-display), Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.forge-window .forge-anvil-warn {
  width: min(100%, 14.5rem);
  padding: 0.48rem 0.7rem 0.5rem 0.58rem;
  font-size: 0.9rem;
}
.forge-room[data-room="amulet"] {
  background: radial-gradient(ellipse at 50% 42%, rgba(40, 69, 97, 0.5), transparent 55%),
    linear-gradient(145deg, rgba(13, 15, 25, 0.92), rgba(27, 17, 12, 0.84));
}
.forge-room[data-room="amulet"] .forge-room-heading {
  background: linear-gradient(90deg, #15121c80, #bda06312, #15121c80);
  border-bottom-color: #c5a76c55;
}
.forge-window .amulet-scheme-panel {
  justify-content: center;
  height: auto;
  min-height: 0;
  flex: 1 0 auto;
  padding: 0.5rem 0;
}
.amulet-scheme--enchanted {
  position: relative;
  gap: 0.7rem;
  isolation: isolate;
}
.amulet-scheme--enchanted::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5% -15% 12%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, #539bc028, transparent 65%);
}
.amulet-scheme-kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 0.4rem;
  color: #c9b782;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.amulet-scheme-kicker span {
  color: #efd599;
  font-size: 0.5rem;
}
.forge-window .amulet-scheme--enchanted .amulet-scheme-altar {
  width: clamp(15rem, 32vh, 23rem);
  height: clamp(15rem, 32vh, 23rem);
  flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle, #4f9cbd20 15%, #1b2d4540 38%, transparent 64%),
    radial-gradient(circle, transparent 61%, #c7a86512 62%, transparent 68%);
  box-shadow: 0 0 65px #478ac414;
}
.amulet-scheme--enchanted .amulet-scheme-ring-outer {
  stroke: #ccb276;
  stroke-width: 0.8;
}
.amulet-scheme--enchanted .amulet-scheme-ring-mid {
  stroke: #c8b78c66;
  stroke-width: 0.5;
}
.amulet-scheme--enchanted .amulet-scheme-ring-inner {
  stroke: #a6d9e999;
  stroke-width: 0.6;
  filter: drop-shadow(0 0 4px #68c1ea80);
}
.amulet-scheme--enchanted .amulet-scheme-track {
  stroke: #92b8ce1c;
  stroke-width: 1.5;
}
.amulet-scheme--enchanted .amulet-scheme-progress {
  stroke: #a5e3f0;
  stroke-width: 2;
  filter: drop-shadow(0 0 5px #78c8eea0);
}
.amulet-scheme-runes {
  fill: none;
  stroke: #dfc78c;
  stroke-width: 0.75;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px #d9af5366);
}
.amulet-scheme-starlight {
  fill: #d6f4ff;
  stroke: #d6f4ff;
  stroke-width: 0.65;
  filter: drop-shadow(0 0 3px #70c5ff);
}
.amulet-scheme--enchanted .amulet-scheme-hearth {
  inset: 12%;
  height: auto;
  background: radial-gradient(ellipse, #78cbf15c, #35669920 50%, transparent 72%);
}
.amulet-scheme--enchanted .amulet-scheme-pedestal {
  bottom: 0;
  height: 15%;
  border-color: #d1b37466;
  background: radial-gradient(ellipse at 50% 25%, #6e8b9a55, #0f1824 75%);
  box-shadow: 0 10px 20px #0006, inset 0 1px 0 #edd79b99, 0 -10px 28px #63b9f033;
}
.amulet-scheme-empty-jewel {
  display: grid;
  width: 9rem;
  height: 10rem;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(ellipse, #7bb9d52b, transparent 68%);
  transition: filter 180ms ease, transform 180ms ease;
}
.amulet-scheme-empty-jewel svg {
  width: 7rem;
  height: 8.4rem;
  overflow: visible;
  filter: drop-shadow(0 0 12px #70c7f05c);
}
.amulet-scheme-pendant-chain,
.amulet-scheme-pendant-setting {
  stroke: #efd39a;
  stroke-width: 2;
  stroke-linejoin: round;
}
.amulet-scheme-pendant-chain {
  stroke-dasharray: 3 2;
}
.amulet-scheme-pendant-setting {
  fill: #1d3449;
}
.amulet-scheme-pendant-stone {
  fill: #79c6dc;
  stroke: #c7f3ff;
  stroke-width: 1;
}
.amulet-scheme-pendant-facets {
  stroke: #e0f7ff9c;
  stroke-width: 0.8;
}
.amulet-scheme-pendant-glint {
  stroke: #fff;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 4px #fff);
}
.amulet-scheme-place:hover:not(:disabled) .amulet-scheme-empty-jewel {
  filter: brightness(1.2);
  transform: translateY(-3px);
}
.amulet-scheme-empty-copy h3 {
  margin: 0 0 0.6rem;
  color: #f5e3b6;
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.035em;
}
.amulet-scheme-empty-copy p {
  margin: 0 0 0.8rem;
  color: #c3c6cd;
  font-size: 0.9rem;
  line-height: 1.65;
}
.amulet-scheme--enchanted .amulet-scheme-inventory {
  gap: 1.5rem;
  min-width: 15rem;
  height: 3.35rem;
  cursor: pointer;
  border-color: #d1b06b;
  background: linear-gradient(135deg, #93713a, #d2b67a 48%, #92703c);
  color: #22190f;
  text-shadow: 0 1px 0 #fff5;
  box-shadow: inset 0 0 0 3px #1b120e40, inset 0 0 0 4px #f6e7bc66, 0 4px 20px #c8a56020;
  transition: filter 160ms ease, box-shadow 160ms ease;
}
.amulet-scheme--enchanted .amulet-scheme-inventory:hover:not(:disabled) {
  filter: brightness(1.12);
  box-shadow: inset 0 0 0 3px #1b120e40, inset 0 0 0 4px #f6e7bc66, 0 4px 28px #c8a56055;
}
.amulet-scheme-guide {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.3rem;
  margin: 1rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid #c9b4772b;
  list-style: none;
  color: #b7b4ae;
  font-size: 0.72rem;
}
.amulet-scheme-guide li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.amulet-scheme-guide li > span {
  display: grid;
  width: 1.3rem;
  height: 1.3rem;
  place-items: center;
  border: 1px solid #bba06a55;
  border-radius: 50%;
  color: #dfc58e;
  font-size: 0.65rem;
}
.amulet-scheme--enchanted[data-occupied="true"] .amulet-scheme-slot {
  width: min(100%, 30rem);
  padding: 1rem 1.25rem;
  border: 1px solid #a9c9db30;
  border-radius: 12px;
  background: linear-gradient(140deg, #20344880, #131720b3);
  box-shadow: inset 0 1px 0 #d4e9ff0d;
}
.amulet-scheme--enchanted .amulet-scheme-next {
  color: #a7d8dc;
}
.amulet-scheme--enchanted[data-occupied="true"] .amulet-scheme-inventory {
  margin-top: 0.5rem;
  color: #e8d6a0;
  background: #0e172c66;
  box-shadow: inset 0 1px 0 #f6e7bc22;
  text-shadow: none;
}
.forge-window .amulet-scheme--enchanted .forge-upgrade-button {
  background: linear-gradient(135deg, #94703b, #d2b67a 48%, #94703b);
  color: #22190f;
  border-color: #dbc18b;
  text-shadow: 0 1px 0 #fff5;
  box-shadow: inset 0 0 0 3px #1b120e30, 0 4px 20px #c8a56020;
}
@media (max-width: 480px), (max-height: 600px) {
  .forge-window .amulet-scheme--enchanted .amulet-scheme-altar {
    width: 11rem;
    height: 11rem;
  }
  .amulet-scheme--enchanted {
    gap: 0.5rem;
  }
  .amulet-scheme-guide {
    gap: 0.7rem;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    font-size: 0.65rem;
  }
  .amulet-scheme-kicker {
    font-size: 0.58rem;
    gap: 0.7rem;
  }
  .amulet-scheme-empty-copy p {
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .amulet-scheme-empty-jewel,
  .amulet-scheme--enchanted .amulet-scheme-inventory {
    transition: none;
  }
  .amulet-scheme-place:hover:not(:disabled) .amulet-scheme-empty-jewel {
    transform: none;
  }
}
.forge-window .amulet-scheme .forge-upgrade-button {
  width: auto;
  min-width: 12.75rem;
  height: 3.15rem;
  padding-inline: 1.15rem;
}
.forge-room[data-room="amulet"] .forge-room-body {
  container-type: size;
}
.amulet-scheme--enchanted[data-occupied="true"] {
  gap: 0.45rem;
}
.amulet-scheme--enchanted[data-occupied="true"]::before {
  inset-inline: 0;
}
.amulet-scheme--enchanted[data-occupied="true"] .amulet-scheme-kicker {
  margin: 0;
}
.forge-window .amulet-scheme--enchanted[data-occupied="true"] .amulet-scheme-altar {
  width: clamp(5rem, calc(100cqh - 25rem), 12rem);
  height: clamp(5rem, calc(100cqh - 25rem), 12rem);
}
.forge-window .amulet-scheme--enchanted[data-occupied="true"] .amulet-scheme-jewel {
  width: 48%;
  height: 48%;
}
.forge-window .amulet-scheme--enchanted[data-occupied="true"] .amulet-scheme-well.keep-slot {
  width: 100%;
  height: 100%;
}
.amulet-scheme--enchanted[data-occupied="true"] .amulet-scheme-slot {
  gap: 0.25rem;
  padding: 0.65rem 1rem;
}
.amulet-scheme--enchanted[data-occupied="true"] .amulet-scheme-name {
  font-size: 1.4rem;
}
.amulet-scheme--enchanted[data-occupied="true"] .amulet-scheme-level {
  font-size: 1rem;
}
.amulet-scheme--enchanted[data-occupied="true"] .amulet-scheme-effect {
  font-size: 0.9rem;
}
.amulet-scheme--enchanted[data-occupied="true"] .amulet-scheme-next {
  font-size: 0.8rem;
}
.amulet-scheme--enchanted[data-occupied="true"] .amulet-scheme-inventory {
  height: 2.75rem;
  margin-top: 0.3rem;
}
.amulet-scheme--enchanted[data-occupied="true"] .amulet-scheme-steps-block {
  margin-top: 0.2rem;
  gap: 0.2rem;
}
.amulet-scheme--enchanted .amulet-scheme-cost {
  gap: 0.4rem;
  font-size: 1.3rem;
}
.amulet-scheme--enchanted .amulet-scheme-cost:has(> .amulet-scheme-choice) {
  width: min(100%, 30rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.forge-window .amulet-scheme--enchanted .amulet-scheme-cost .forge-upgrade-button {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  height: auto;
  padding: 0.6rem 0.75rem;
  font-size: 0.72rem;
  line-height: 1.3;
  scale: 1;
  transform: none;
  transition-property: filter, background-color;
}
@media (max-width: 767px) {
  .island-route-panel[data-panel="forge"]:has(.amulet-scheme[data-occupied="true"]) {
    height: min(94dvh, 58rem);
  }
  .amulet-scheme--enchanted[data-occupied="true"] .amulet-scheme-kicker {
    display: none;
  }
}
@media (min-width: 768px) and (max-height: 800px) {
  .forge-window .forge-anvil .forge-anvil-frame {
    width: 6.35rem;
    height: 6.35rem;
  }
  .forge-window .forge-anvil-cost {
    width: 6.35rem;
    height: 6.35rem;
    min-width: 6.35rem;
  }
  .forge-window .forge-upgrade-identity-name {
    font-size: 0.95rem;
  }
  .forge-window .forge-gear-name {
    font-size: 10px;
  }
  .forge-window .amulet-scheme-altar {
    width: 18.5rem;
    height: 18.5rem;
  }
  .forge-window .amulet-scheme-jewel {
    width: 9.75rem;
    height: 9.75rem;
  }
  .forge-window .amulet-scheme-well.keep-slot {
    height: 8.25rem;
    width: 8.25rem;
  }
}
@media (max-width: 767px) {
  .forge-window-title {
    font-size: 1.85rem;
  }
  .forge-window-body {
    padding: 2.85rem 0.7rem 0.85rem;
    gap: 0.55rem;
  }
  .forge-room-backdrop {
    padding: 3.05rem 0.45rem 0.55rem;
  }
  .forge-room {
    width: 100%;
    height: 100%;
  }
  .forge-room-heading {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.45rem 0.55rem 0.4rem;
  }
  .forge-room-heading h2 {
    font-size: 1.15rem;
    letter-spacing: 0.1em;
  }
  .forge-room-lead {
    font-size: 0.72rem;
  }
  .forge-room-close {
    padding: 0 0.5rem 0 0.35rem;
    font-size: 0.7rem;
  }
  .forge-room-body {
    padding: 0.7rem 0.55rem 0.8rem;
  }
  .forge-mode-tab {
    min-height: 2.2rem;
    min-width: 6.15rem;
    padding: 0.32rem 0.75rem 0.34rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }
  .forge-window .forge-mode-tabs {
    margin-bottom: 0.55rem;
  }
  .forge-window .forge-anvil {
    width: min(20.5rem, 100%);
    gap: 0.25rem 0.28rem;
    grid-template-columns: 3.8rem minmax(5.8rem, 1fr) 3.8rem;
  }
  .forge-window .forge-upgrade-gear {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0.4rem 0.35rem 0.5rem;
    scroll-snap-type: x proximity;
  }
  .forge-window .forge-gear-tile {
    width: 5.1rem;
    scroll-snap-align: start;
  }
  .forge-window .forge-upgrade-identity-name {
    font-size: 0.92rem;
  }
  .forge-window .forge-anvil-channels {
    width: 10.5rem;
  }
  .forge-window .forge-anvil .forge-anvil-frame {
    height: 5.4rem;
    width: 5.4rem;
  }
  .forge-window .forge-anvil-cost {
    width: 5.25rem;
    height: 5.25rem;
    min-width: 5.25rem;
    padding: 0.5rem 0.45rem 0.42rem;
  }
  .forge-window .forge-anvil-piranha {
    transform: translateX(-0.32rem);
  }
  .forge-window .forge-anvil-crystal {
    transform: translateX(0.32rem);
  }
  .forge-window .forge-anvil-coin {
    width: 1.6rem;
    height: 1.6rem;
  }
  .forge-window .forge-anvil-cost-n {
    font-size: 14px;
  }
  .forge-window .forge-anvil-cost-label {
    font-size: 0.5rem;
  }
  .forge-window .forge-upgrade-button {
    width: 8.25rem;
    height: 2.75rem;
  }
  .forge-window .amulet-scheme .forge-upgrade-button {
    width: auto;
    min-width: 10.5rem;
    height: 2.85rem;
  }
  .amulet-scheme-cost:has(> .amulet-scheme-choice) {
    width: min(100%, 16rem);
    grid-template-columns: minmax(0, 1fr);
  }
  .amulet-scheme-inventory {
    min-width: 10.5rem;
    height: 2.85rem;
  }
  .amulet-scheme-steps-block {
    width: min(100%, 18rem);
  }
  .amulet-scheme-step {
    min-height: 2.75rem;
    min-width: 2.85rem;
    padding: 0.3rem 0.45rem;
    font-size: 0.7rem;
  }
  .amulet-scheme-name {
    font-size: 1.35rem;
  }
  .forge-window .forge-anvil-warn {
    width: min(100%, 12.5rem);
    padding: 0.4rem 0.5rem 0.42rem 0.45rem;
    font-size: 0.78rem;
  }
  .forge-window .forge-anvil-warn-mark {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.68rem;
  }
}
@media (max-width: 360px) {
  .forge-window .forge-anvil {
    width: min(18.5rem, 100%);
    gap: 0.18rem;
    grid-template-columns: 3.35rem minmax(4.8rem, 1fr) 3.35rem;
  }
  .forge-window .forge-anvil .forge-anvil-frame {
    width: 4.7rem;
    height: 4.7rem;
  }
  .forge-window .forge-anvil-channels {
    width: 9rem;
  }
  .forge-window .forge-anvil-cost {
    width: 4.6rem;
    height: 4.6rem;
    min-width: 4.6rem;
    padding: 0.45rem 0.4rem 0.38rem;
  }
  .forge-window .forge-anvil-piranha {
    transform: translateX(-0.24rem);
  }
  .forge-window .forge-anvil-crystal {
    transform: translateX(0.24rem);
  }
  .forge-window .forge-anvil-coin {
    width: 1.45rem;
    height: 1.45rem;
  }
  .forge-window .forge-anvil-cost-n {
    font-size: 13px;
  }
  .forge-window .forge-anvil-cost-label {
    display: none;
  }
  .forge-window .forge-anvil-tools-row .min-w-36 {
    min-width: 6.75rem;
  }
  .forge-anvil-tools {
    flex-wrap: wrap;
  }
  .forge-window .forge-anvil-chance {
    font-size: 12px;
  }
  .forge-window .forge-anvil-warn {
    width: min(100%, 11rem);
    padding: 0.32rem 0.4rem 0.34rem 0.38rem;
    font-size: 0.72rem;
  }
  .forge-window .forge-gear-tile {
    width: 4.75rem;
  }
}
.hall-window-panel.parchment > h2 {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f3e2b0;
}
.hall-clan-tabs {
  display: grid;
  min-width: 0;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 0.75rem;
}
.hall-clan-tabs button {
  min-width: 0;
  min-height: 44px;
  padding: 0.55rem 0.45rem;
  border: 1px solid rgba(212, 174, 98, 0.48);
  border-radius: 6px;
  background: color-mix(in srgb, rgba(28, 16, 8, 0.72) 88%, #000);
  color: #dcc8a0;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hall-clan-tabs button:hover {
  color: #f3e2b0;
  border-color: rgba(243, 226, 176, 0.7);
}
.hall-clan-tabs button:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 2px;
}
.hall-clan-tabs button[aria-selected="true"] {
  background: rgba(212, 174, 98, 0.22);
  color: #f3e2b0;
  border-color: rgba(243, 226, 176, 0.72);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.12);
}
.hall-clan-message {
  flex: 0 0 auto;
  margin: 0.7rem 0 0;
  text-align: center;
  font-size: 15px;
  color: #fff1c4;
}
.hall-clan-tab-panel:not([hidden]) {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.hall-clan-tab-panel[hidden] {
  display: none;
}
.hall-clan-leaderboard {
  min-width: 0;
  margin-top: 0.8rem;
}
.hall-clan-leaderboard-lead,
.hall-clan-leaderboard-note,
.hall-clan-leaderboard-loading {
  margin: 0;
  text-align: center;
}
.hall-clan-leaderboard-lead {
  font-size: 15px;
  color: #f3e2b0;
}
.hall-clan-leaderboard-note,
.hall-clan-leaderboard-loading {
  margin-top: 0.35rem;
  font-size: 13px;
  line-height: 1.4;
  color: #dcc8a0;
}
.hall-clan-leaderboard-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.7rem;
  color: var(--danger);
  font-size: 13px;
}
.hall-clan-leaderboard-retry,
.hall-clan-leaderboard-action {
  min-height: 2.75rem;
  padding: 0.35rem 0.7rem;
  font-size: 13px;
}
.hall-clan-leaderboard-list {
  max-height: min(44vh, 25rem);
  margin-top: 0.75rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}
.hall-clan-leaderboard .clan-leaderboard-row {
  grid-template-columns: 1.8rem minmax(0, 1fr) auto;
  gap: 0.45rem;
  padding-block: 0.6rem;
}
.hall-clan-leaderboard .clan-leaderboard-row.has-trailing {
  grid-template-rows: auto auto;
}
.hall-clan-leaderboard .clan-leaderboard-trailing {
  grid-column: 2 / 4;
  justify-self: end;
}
.hall-clan-leaderboard-status {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  text-align: right;
  font-size: 12px;
  line-height: 1.25;
  color: #dcc8a0;
}
.hall-clan-current-pin {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(212, 174, 98, 0.42);
}
.hall-clan-current-pin > p {
  margin: 0 0 0.25rem;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: #fff1c4;
}
.hall-clan-leaderboard-pages {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
}
.hall-clan-leaderboard-pages button {
  min-width: 0;
  min-height: 2.75rem;
  padding-inline: 0.55rem;
  font-size: 12px;
}
.hall-clan-leaderboard-pages button:last-child {
  justify-self: stretch;
}
.hall-clan-leaderboard-pages > span {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #dcc8a0;
}
.hall-window-panel input,
.hall-window-panel select {
  color: #f3e2b0;
  background: rgba(10, 6, 4, 0.32);
  border-color: rgba(212, 174, 98, 0.48);
}
.clan-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border-strong);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent);
  }
  border-radius: 50%;
  background: var(--bg-panel-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel-raised) 88%, transparent);
  }
  box-shadow: inset 0 0 0 2px var(--bg-app);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bg-app) 54%, transparent);
  }
}
.clan-mark.is-sm {
  width: 2.15rem;
  height: 2.15rem;
}
.clan-mark.is-md {
  width: 4rem;
  height: 4rem;
}
.clan-mark[data-clan-faction="FURY"] {
  border-color: #d56a31;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, #d56a31 68%, var(--border-strong));
  }
}
.clan-mark[data-clan-faction="LIGHTS"] {
  border-color: #6fa9bd;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, #6fa9bd 68%, var(--border-strong));
  }
}
.hall-clan-cloth-picker {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid rgba(212, 174, 98, 0.32);
  border-radius: 8px;
  background: rgba(10, 6, 4, 0.2);
}
.hall-clan-cloth-picker button {
  min-width: 2.75rem;
  min-height: 2.75rem;
}
.hall-window-panel .faction-banner-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hall-window-panel .faction-banner-pick {
  justify-content: center;
  flex-wrap: nowrap;
  gap: 1.4rem;
  margin-top: 0.2rem;
}
.hall-window-panel .faction-banner-pick button {
  min-width: 6.6rem;
  min-height: 10.6rem;
  padding: 0.35rem 0.4rem;
  background: transparent;
  border-color: transparent;
}
.hall-window-panel .faction-banner-pick button[aria-pressed="true"] {
  border-color: #f3e2b0;
}
.hall-window-panel .faction-banner-pick button:disabled:not([aria-pressed="true"]) {
  opacity: 0.9;
}
.hall-window-cost {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}
.hall-window-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}
.hall-settings-backdrop {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(8, 4, 2, 0.38);
}
.hall-settings-dialog {
  width: min(100%, 22rem);
  max-height: min(90vh, 36rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  overflow: auto;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid rgba(212, 174, 98, 0.4);
  border-radius: 8px;
  color: #f3e2b0;
  background-color: rgba(14, 8, 4, 0.72);
  box-shadow: 0 10px 24px rgba(8, 4, 2, 0.45);
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --bg-app: rgba(10, 6, 4, 0.42);
  --border-strong: rgba(212, 174, 98, 0.55);
}
.hall-settings-dialog h2 {
  margin: 0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hall-settings-dialog input,
.hall-settings-dialog select {
  color: #f3e2b0;
  background: rgba(10, 6, 4, 0.42);
  border-color: rgba(212, 174, 98, 0.48);
}
.hall-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.hall-settings-leader {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(212, 174, 98, 0.28);
}
.hall-settings-disband {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.hall-roster {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1rem;
}
.hall-member {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.95rem;
}
.hall-member-token {
  position: relative;
  width: 5.4rem;
  height: 5.4rem;
}
.hall-member-art,
.hall-member-fallback {
  display: block;
  width: 5.4rem;
  height: 5.4rem;
  border-radius: 999px;
  border: 2px solid rgba(212, 174, 98, 0.72);
  box-shadow: 0 4px 10px rgba(8, 4, 2, 0.35);
}
.hall-member-art {
  object-fit: cover;
  object-position: top center;
  background: #2a1810;
}
.hall-member-fallback {
  display: grid;
  place-items: center;
  background: rgba(22, 12, 7, 0.72);
  font-size: 1.55rem;
  color: #f3e2b0;
}
.hall-member-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.08rem;
}
.hall-member-name-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
}
.hall-member-presence {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid rgba(196, 150, 62, 0.55);
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, rgba(243, 226, 176, 0.22), transparent 58%),
    #2a1810;
  box-shadow: inset 0 1px 1px rgba(243, 226, 176, 0.14),
    0 1px 2px rgba(8, 4, 2, 0.45);
}
.hall-member-presence.is-online {
  border-color: rgba(212, 174, 98, 0.9);
  background: radial-gradient(circle at 32% 28%, #e6d48a 0%, #7a9a3a 46%, #355a22 100%);
  box-shadow: inset 0 1px 1px rgba(255, 236, 190, 0.4),
    0 0 5px rgba(196, 150, 62, 0.35),
    0 0 7px rgba(90, 130, 40, 0.4);
}
.hall-member-level {
  position: absolute;
  z-index: 1;
  bottom: -0.2rem;
  left: 50%;
  min-width: 1.7rem;
  padding: 0.08rem 0.4rem;
  transform: translateX(-50%);
  border: 1px solid rgba(212, 174, 98, 0.7);
  border-radius: 999px;
  background: rgba(18, 10, 5, 0.88);
  color: #f3e2b0;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}
.hall-member-name,
.hall-member-rank {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hall-member-name {
  min-width: 0;
  font-size: 1.22rem;
  color: #f3e2b0;
}
.hall-member-rank {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #dcc8a0;
}
.hall-member-might {
  margin-top: 0.02rem;
  color: #f0d494;
}
.hall-application-actions,
.hall-member-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}
.hall-application-actions {
  margin-left: auto;
}
.hall-member-actions {
  flex: 0 1 auto;
}
.hall-member-rank-control {
  display: flex;
  min-width: 0;
}
.hall-member-rank-select {
  min-width: 0;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(212, 174, 98, 0.48);
  border-radius: 6px;
  background: rgba(10, 6, 4, 0.32);
  color: #f3e2b0;
  font-size: 12px;
}
.hall-member-rank-select:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 2px;
}
.hall-member-kick {
  flex: 0 0 auto;
}
.hall-window-panel.is-member {
  width: min(42rem, 100%);
}
.hall-clan-tabs.is-member {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hall-clan-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}
.hall-clan-overview-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.8rem;
  border: 1px solid rgba(212, 174, 98, 0.34);
  border-radius: 8px;
  background: rgba(10, 6, 4, 0.24);
}
.hall-clan-overview-card.is-wide {
  grid-column: 1 / -1;
}
.hall-clan-overview-card h3,
.hall-clan-overview-card p,
.hall-clan-overview-card strong,
.hall-clan-overview-card span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.hall-clan-overview-card h3,
.hall-section-heading h3,
.hall-settings-section h3 {
  margin: 0;
  color: #f3e2b0;
  font-family: var(--font-display), Georgia, serif;
  font-size: 1rem;
  line-height: 1.2;
}
.hall-clan-overview-card p,
.hall-clan-overview-card span {
  color: #dcc8a0;
  font-size: 0.82rem;
  line-height: 1.45;
}
.hall-section-kicker {
  margin: 0;
  color: #c7a968;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hall-overview-members-link,
.hall-section-heading,
.hall-members-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.hall-overview-members-link {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(212, 174, 98, 0.3);
  color: #dcc8a0;
  font-size: 0.82rem;
}
.hall-section-heading {
  min-width: 0;
}
.hall-section-heading > div {
  min-width: 0;
}
.hall-section-stack,
.hall-members-panel,
.hall-activity-grid {
  min-width: 0;
}
.hall-members-panel,
.hall-activity-grid {
  margin-top: 0.9rem;
}
.hall-section-stack {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.85rem;
  border: 1px solid rgba(212, 174, 98, 0.32);
  border-radius: 8px;
  background: rgba(10, 6, 4, 0.2);
}
.hall-members-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.hall-count-badge {
  display: inline-grid;
  min-width: 2rem;
  min-height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  padding-inline: 0.45rem;
  border: 1px solid rgba(212, 174, 98, 0.46);
  border-radius: 999px;
  background: rgba(212, 174, 98, 0.12);
  color: #fff1c4;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.hall-application-list,
.hall-invitation-list,
.hall-activity-list,
.hall-notification-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hall-application-card,
.hall-invitation-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem;
  border: 1px solid rgba(212, 174, 98, 0.26);
  border-radius: 8px;
  background: rgba(28, 16, 8, 0.24);
}
.hall-invitation-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.18rem;
  color: #f3e2b0;
}
.hall-invitation-copy > a {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border-radius: 4px;
  color: #fff1c4;
  font-weight: 700;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
}
.hall-invitation-copy > a:hover,
.hall-invitation-copy > a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.hall-invitation-copy > span,
.hall-invitation-target-meta {
  color: #dcc8a0;
  font-size: 0.75rem;
  line-height: 1.4;
}
.hall-invitation-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}
.hall-invitation-actions button,
.hall-application-actions button {
  min-height: 2.75rem;
}
.hall-invite-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 0.55rem;
}
.hall-invite-form label {
  grid-column: 1 / -1;
  color: #dcc8a0;
  font-size: 0.75rem;
}
.hall-invite-form input {
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(212, 174, 98, 0.48);
  border-radius: 8px;
}
.hall-subtle-copy,
.hall-inline-error {
  margin: 0;
  color: #dcc8a0;
  font-size: 0.8rem;
  line-height: 1.45;
}
.hall-inline-error {
  color: #f0b6aa;
}
.hall-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.85rem;
}
.hall-activity-entry,
.hall-notification-list li {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(212, 174, 98, 0.2);
}
.hall-activity-entry:last-child,
.hall-notification-list li:last-child {
  border-bottom: 0;
}
.hall-activity-mark {
  width: 0.62rem;
  height: 0.62rem;
  flex: 0 0 auto;
  margin-top: 0.28rem;
  border: 1px solid rgba(243, 226, 176, 0.55);
  border-radius: 999px;
  background: #6f9256;
}
.hall-activity-mark.is-officers {
  background: #a96d36;
}
.hall-activity-copy,
.hall-notification-list li {
  color: #f3e2b0;
  font-size: 0.78rem;
  line-height: 1.4;
}
.hall-activity-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
}
.hall-activity-copy time,
.hall-notification-list time {
  color: #bca77f;
  font-size: 0.68rem;
}
.hall-notification-list li {
  flex-direction: column;
  gap: 0.12rem;
}
.hall-notification-list li.is-unread {
  padding-inline: 0.45rem;
  border-left: 3px solid #d4ae62;
  background: rgba(212, 174, 98, 0.08);
}
.hall-notification-list li.is-read {
  opacity: 0.72;
}
.hall-members-footer {
  justify-content: flex-end;
  padding-top: 0.15rem;
}
.hall-settings-dialog {
  width: min(100%, 32rem);
  max-height: min(92vh, 46rem);
}
.hall-settings-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.hall-settings-section {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.8rem;
  border: 1px solid rgba(212, 174, 98, 0.28);
  border-radius: 8px;
  background: rgba(10, 6, 4, 0.2);
}
.hall-settings-dialog textarea {
  resize: vertical;
  color: #f3e2b0;
  background: rgba(10, 6, 4, 0.42);
  border-color: rgba(212, 174, 98, 0.48);
}
.hall-settings-cloth {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: #dcc8a0;
  font-size: 0.8rem;
}
.hall-settings-cloth button {
  min-width: 2.75rem;
  min-height: 2.75rem;
}
.clan-profile-page {
  width: min(72rem, 100%);
  min-height: 100%;
  margin-inline: auto;
  padding: clamp(0.8rem, 2vw, 1.5rem);
  color: #f3e2b0;
}
.clan-profile-hero,
.clan-profile-card,
.clan-profile-alert {
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-radius: 10px;
  background: rgba(14, 8, 4, 0.68);
  box-shadow: 0 10px 24px rgba(8, 4, 2, 0.25),
    inset 0 0 0 1px rgba(243, 226, 176, 0.06);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.clan-profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
}
.clan-profile-identity {
  min-width: 0;
}
.clan-profile-eyebrow,
.clan-profile-kicker {
  margin: 0;
  color: #c7a968;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.clan-profile-identity h1,
.clan-profile-card h2 {
  margin: 0;
  color: #fff1c4;
  font-family: var(--font-display), Georgia, serif;
}
.clan-profile-identity h1 {
  margin-top: 0.15rem;
  overflow-wrap: anywhere;
  font-size: clamp(1.45rem, 4vw, 2.3rem);
  line-height: 1.05;
}
.clan-profile-motto,
.clan-profile-description {
  margin: 0.45rem 0 0;
  color: #dcc8a0;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.clan-profile-status {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(111, 146, 86, 0.72);
  border-radius: 999px;
  color: #dce7c5;
  background: rgba(111, 146, 86, 0.14);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}
.clan-profile-status.is-disband_pending {
  border-color: rgba(196, 126, 61, 0.72);
  color: #f1cf9e;
  background: rgba(196, 126, 61, 0.14);
}
.clan-profile-status.is-archived {
  border-color: rgba(156, 145, 127, 0.62);
  color: #c9bca4;
  background: rgba(96, 87, 75, 0.18);
}
.clan-profile-alert {
  margin-top: 0.8rem;
  padding: 0.75rem 1rem;
  color: #f1cf9e;
  line-height: 1.45;
}
.clan-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(16rem, 0.75fr);
  align-items: start;
  gap: 1rem;
  margin-top: 1rem;
}
.clan-profile-main,
.clan-profile-side {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1rem;
}
.clan-profile-card {
  min-width: 0;
  padding: clamp(0.9rem, 2vw, 1.2rem);
}
.clan-profile-card h2 {
  margin-top: 0.2rem;
  font-size: 1.15rem;
}
.clan-profile-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.clan-profile-section-heading > span {
  color: #dcc8a0;
  font-size: 0.78rem;
}
.clan-profile-roster,
.clan-profile-events {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.clan-profile-roster li,
.clan-profile-events li {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(212, 174, 98, 0.2);
}
.clan-profile-roster li:last-child,
.clan-profile-events li:last-child {
  border-bottom: 0;
}
.clan-profile-member-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
}
.clan-profile-member-copy strong {
  overflow: hidden;
  color: #f3e2b0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clan-profile-member-copy span,
.clan-profile-events time {
  color: #bca77f;
  font-size: 0.72rem;
}
.clan-profile-events li {
  align-items: flex-start;
}
.clan-profile-events li > span {
  color: #f3e2b0;
  font-size: 0.82rem;
  line-height: 1.4;
}
.clan-profile-events time {
  flex: 0 0 auto;
  white-space: nowrap;
}
.clan-profile-recruitment > p:not(.clan-profile-kicker),
.clan-profile-action-note {
  color: #dcc8a0;
  font-size: 0.82rem;
  line-height: 1.5;
}
.clan-profile-recruitment dl {
  display: grid;
  gap: 0.45rem;
  margin: 0.9rem 0;
}
.clan-profile-recruitment dl > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(212, 174, 98, 0.18);
}
.clan-profile-recruitment dt {
  color: #bca77f;
  font-size: 0.72rem;
}
.clan-profile-recruitment dd {
  color: #f3e2b0;
  font-size: 0.78rem;
  text-align: right;
}
.clan-profile-hall-link,
.clan-profile-back {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(212, 174, 98, 0.48);
  border-radius: 8px;
  color: #fff1c4;
  background: rgba(28, 16, 8, 0.44);
  text-decoration: none;
}
.clan-profile-hall-link:hover,
.clan-profile-hall-link:focus-visible,
.clan-profile-back:hover,
.clan-profile-back:focus-visible {
  border-color: rgba(243, 226, 176, 0.75);
  background: rgba(212, 174, 98, 0.16);
}
.clan-profile-message {
  margin: 0.7rem 0 0;
  color: #fff1c4;
  font-size: 0.8rem;
}
@media (max-width: 720px) {
  .hall-clan-tabs.is-member {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hall-activity-grid,
  .clan-profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .clan-profile-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .clan-profile-status {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
@media (max-width: 520px) {
  .hall-clan-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hall-clan-overview-card.is-wide {
    grid-column: auto;
  }
  .hall-overview-members-link,
  .hall-application-card,
  .hall-invitation-card,
  .hall-section-heading,
  .hall-settings-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .hall-invitation-actions,
  .hall-application-actions {
    width: 100%;
    justify-content: stretch;
  }
  .hall-invitation-actions button,
  .hall-application-actions button {
    flex: 1 1 8rem;
  }
  .hall-invite-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .hall-invite-form label {
    grid-column: auto;
  }
  .clan-profile-hero {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }
  .clan-profile-hero .clan-mark,
  .clan-profile-status {
    justify-self: center;
  }
  .clan-profile-roster li,
  .clan-profile-events li {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 360px) {
  .hall-window-body,
  .post-window-body,
  .port-window-body,
  .store-window-body {
    padding-inline: 0.65rem;
  }
  .hall-member {
    align-items: flex-start;
    gap: 0.65rem;
  }
  .hall-member-token,
  .hall-member-art,
  .hall-member-fallback {
    width: 4.5rem;
    height: 4.5rem;
  }
  .hall-member-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-left: 5.15rem;
  }
  .hall-application-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}
.leaderboard-window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: #f3e2b0;
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.78),
    inset 0 0 0 3px rgba(18, 10, 6, 0.42),
    inset 0 0 36px rgba(212, 174, 98, 0.16);
}
.leaderboard-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}
.leaderboard-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 10, 6, 0.58) 0%, rgba(18, 10, 6, 0.18) 22%, transparent 38%),
    radial-gradient(
      ellipse 46% 56% at 50% 58%,
      rgba(16, 9, 4, 0.28),
      transparent 74%
    );
}
.leaderboard-window-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: 0.7rem;
  overflow: hidden;
  padding: 3.35rem 1rem 1.15rem;
}
.leaderboard-window-title {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 2.45rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 4px rgba(30, 16, 6, 0.88),
    0 0 18px rgba(243, 226, 176, 0.55),
    0 0 34px rgba(232, 190, 90, 0.42);
}
.keep-parchment .island-route-panel[data-panel="leaderboard"] .leaderboard-window-title,
.keep-parchment .island-route-panel[data-panel="leaderboard"] .leaderboard-window-lead {
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 4px rgba(30, 16, 6, 0.88),
    0 0 18px rgba(243, 226, 176, 0.55),
    0 0 34px rgba(232, 190, 90, 0.42);
}
.leaderboard-window-lead {
  flex: 0 0 auto;
  margin: 0 auto;
  max-width: 32rem;
  text-align: center;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.35;
  color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.leaderboard-tabs {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  gap: 0.35rem;
  width: min(40rem, 100%);
  margin: 0 auto;
  padding: 0;
}
.leaderboard-tabs button {
  min-width: 8.25rem;
  min-height: 44px;
  padding: 0.62rem 1rem 0.55rem;
  border: 1px solid rgba(212, 174, 98, 0.48);
  border-radius: 6px;
  background: color-mix(in srgb, rgba(28, 16, 8, 0.72) 88%, #000);
  color: #dcc8a0;
  font-family: var(--font-display), Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    color 180ms var(--ease-out);
}
.leaderboard-tabs button:hover {
  color: #f3e2b0;
  border-color: rgba(243, 226, 176, 0.7);
}
.leaderboard-tabs button:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 2px;
}
.leaderboard-tabs button[aria-selected="true"] {
  background: rgba(212, 174, 98, 0.22);
  color: #f3e2b0;
  border-color: rgba(243, 226, 176, 0.72);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.12);
}
.leaderboard-window-panel.parchment {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: min(40rem, 100%);
  min-height: 0;
  margin-inline: auto;
  overflow: hidden;
  padding: 0.85rem 1rem 1.05rem;
  color: #f3e2b0;
  background-color: rgba(14, 8, 4, 0.58);
  background-image: none;
  border: 1px solid rgba(232, 206, 130, 0.72);
  box-shadow: 0 12px 28px rgba(8, 4, 2, 0.42),
    inset 0 0 0 1px rgba(243, 226, 176, 0.18);
  -webkit-backdrop-filter: blur(8px) saturate(0.95);
  backdrop-filter: blur(8px) saturate(0.95);
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --ink-parchment: #f3e2b0;
  --bg-app: rgba(10, 6, 4, 0.42);
  --bg-panel: rgba(22, 12, 7, 0.38);
  --bg-panel-raised: rgba(28, 16, 8, 0.42);
  --border: rgba(232, 206, 130, 0.55);
  --border-strong: rgba(232, 206, 130, 0.72);
}
.leaderboard-board {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.leaderboard-window-panel.parchment > h2 {
  flex: 0 0 auto;
  margin: 0 0 0.55rem;
  text-align: center;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f3e2b0;
}
.leaderboard-status {
  flex: 0 0 auto;
  margin: 0.35rem 0 0.55rem;
  text-align: center;
  font-size: 15px;
  color: var(--text-secondary);
}
.leaderboard-status-error {
  color: var(--danger);
}
.leaderboard-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid rgba(212, 174, 98, 0.28);
}
.leaderboard-row:last-child {
  border-bottom: 0;
}
.leaderboard-row.is-you {
  margin-inline: -0.45rem;
  padding-inline: 0.65rem;
  border-radius: 6px;
  background: rgba(212, 174, 98, 0.12);
  border-bottom-color: transparent;
}
.leaderboard-rank {
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: right;
  color: #dcc8a0;
  font-variant-numeric: tabular-nums;
}
.leaderboard-row[data-rank="1"] .leaderboard-rank,
.leaderboard-row[data-rank="2"] .leaderboard-rank,
.leaderboard-row[data-rank="3"] .leaderboard-rank {
  color: #f3e2b0;
  font-size: 1.35rem;
}
.leaderboard-who {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
}
.clan-leaderboard-profile-link {
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.clan-leaderboard-profile-link:hover .clan-leaderboard-name,
.clan-leaderboard-profile-link:focus-visible .clan-leaderboard-name {
  color: #fff1c4;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.clan-leaderboard-profile-link:focus-visible {
  outline: 2px solid rgba(243, 226, 176, 0.82);
  outline-offset: 4px;
}
.leaderboard-who-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.12rem;
}
.leaderboard-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  color: #f3e2b0;
}
.leaderboard-name button {
  color: inherit;
}
.leaderboard-row.is-you .leaderboard-name {
  color: #fff1c4;
}
.leaderboard-tag {
  margin-right: 0.35rem;
  font-size: 13px;
  color: #dcc8a0;
}
.clan-leaderboard-row .leaderboard-name {
  display: flex;
  align-items: center;
}
.clan-leaderboard-row .leaderboard-tag,
.clan-leaderboard-current {
  flex: 0 0 auto;
}
.clan-leaderboard-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clan-leaderboard-current {
  margin-left: 0.45rem;
  padding: 0.08rem 0.35rem;
  border: 1px solid rgba(243, 226, 176, 0.5);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
  color: #fff1c4;
}
.clan-leaderboard-trailing {
  min-width: 0;
}
.leaderboard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
  font-size: 13px;
  color: #dcc8a0;
}
.leaderboard-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.08rem;
  font-variant-numeric: tabular-nums;
}
.leaderboard-score-main {
  font-size: 15px;
  color: #f3e2b0;
}
.leaderboard-score-main .glory-mark-wreath {
  width: 1.05rem;
  height: 1.05rem;
}
.leaderboard-score-sub {
  font-size: 13px;
  color: #dcc8a0;
}
.leaderboard-pages {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  margin: 0.85rem 0 0;
}
.leaderboard-pages button {
  min-width: 2.6rem;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(212, 174, 98, 0.48);
  border-radius: 6px;
  background: color-mix(in srgb, rgba(28, 16, 8, 0.72) 88%, #000);
  color: #dcc8a0;
  font-family: var(--font-display), Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.leaderboard-pages button:hover:not(:disabled) {
  color: #f3e2b0;
  border-color: rgba(243, 226, 176, 0.7);
}
.leaderboard-pages button:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 2px;
}
.leaderboard-pages button[aria-current="page"] {
  background: rgba(212, 174, 98, 0.22);
  color: #f3e2b0;
  border-color: rgba(243, 226, 176, 0.72);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.12);
}
.leaderboard-pages button:disabled {
  opacity: 0.42;
}
.leaderboard-you {
  flex: 0 0 auto;
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: #fff1c4;
}
.faction-banner {
  object-fit: contain;
  object-position: center top;
  filter: drop-shadow(0 0.12rem 0.14rem rgba(24, 10, 4, 0.45));
}
.faction-banner-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.faction-banner-pick button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  min-height: 4.6rem;
  padding: 0.35rem 0.45rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel-raised);
}
.faction-banner-pick button[aria-pressed="true"] {
  border-color: var(--text-primary);
}
.faction-banner-pick button:disabled:not([aria-pressed="true"]) {
  opacity: 0.42;
}
.store-window {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: #f3e2b0;
}
.store-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.store-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 10, 6, 0.42) 0%, transparent 24%),
    linear-gradient(180deg, transparent 42%, rgba(18, 10, 6, 0.58) 100%),
    radial-gradient(
      ellipse 58% 70% at 50% 38%,
      rgba(16, 9, 4, 0.08),
      rgba(16, 9, 4, 0.42) 78%
    );
}
.store-window-body {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 0.85rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 3.35rem 1rem 1.15rem;
}
.store-window-title {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 2.45rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.keep-parchment .island-route-panel[data-panel="store"] .store-window-title,
.keep-parchment .island-route-panel[data-panel="store"] .store-window-lead {
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.store-window-lead {
  max-width: 26rem;
  flex: 0 0 auto;
  margin: 0 auto;
  text-align: center;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.35;
  color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.store-window-panel {
  display: flex;
  width: min(62rem, 100%);
  min-width: 0;
  min-height: 0;
  flex: 0 1 auto;
  flex-direction: column;
  margin-inline: auto;
  margin-top: auto;
  overflow: hidden;
}
.store-window-panel.parchment {
  color: #f3e2b0;
  background-color: rgba(14, 8, 4, 0.38);
  background-image: none;
  border: 1px solid rgba(212, 174, 98, 0.4);
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --ink-parchment: #f3e2b0;
  --bg-app: rgba(10, 6, 4, 0.28);
  --bg-panel: rgba(22, 12, 7, 0.22);
  --bg-panel-raised: rgba(28, 16, 8, 0.22);
  --border: rgba(212, 174, 98, 0.4);
  --border-strong: rgba(212, 174, 98, 0.55);
}
.store-window-message {
  flex: 0 0 auto;
  margin: 0 0 0.7rem;
  text-align: center;
  font-size: 15px;
  color: #fff1c4;
}
.store-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  gap: 0.35rem;
  overflow: visible;
  padding: 0;
}
.store-tabs::-webkit-scrollbar {
  display: none;
}
.store-tab {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  height: auto;
  padding: 0.55rem 0.45rem;
  border: 1px solid rgba(212, 174, 98, 0.48);
  border-radius: 6px;
  background: color-mix(in srgb, rgba(28, 16, 8, 0.72) 88%, #000);
  color: #dcc8a0;
  box-shadow: none;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.store-tab:hover {
  color: #f3e2b0;
  border-color: rgba(243, 226, 176, 0.7);
}
.store-tab[aria-selected="true"] {
  background: rgba(212, 174, 98, 0.22);
  background-image: none;
  color: #f3e2b0;
  border-color: rgba(243, 226, 176, 0.72);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.12);
  text-shadow: none;
  transform: none;
}
.store-tab:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 2px;
}
.store-window-items {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 23rem;
  flex: 1 1 auto;
  align-items: center;
  margin-top: 0.75rem;
}
.store-window-items .store-slide {
  width: 100%;
  min-width: 0;
  height: 100%;
}
.store-window-items > p {
  width: 100%;
  text-align: center;
}
.store-slide {
  --store-slide-page: 4;
  --store-slide-rows: 2;
  --store-slide-gap: 0.7rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  outline: none;
}
.store-slide-arrow {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(212, 174, 98, 0.55);
  border-radius: 999px;
  background: color-mix(in srgb, rgba(28, 16, 8, 0.82) 88%, #000);
  color: #f3e2b0;
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.08);
}
.store-slide-arrow svg {
  width: 1.35rem;
  height: 1.35rem;
}
.store-slide-arrow:hover:not(:disabled) {
  filter: brightness(1.08);
}
.store-slide-arrow:active:not(:disabled) {
  transform: scale(0.96);
}
.store-slide-arrow:disabled {
  opacity: 0.38;
}
.store-slide-stage {
  position: relative;
  min-width: 0;
}
.store-slide-viewport {
  overflow: hidden;
  min-width: 0;
  width: 100%;
  container-type: inline-size;
}
.store-slide-track {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 240ms var(--ease-out);
  will-change: transform;
}
.store-slide-page {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: 100cqi;
  flex: 0 0 100cqi;
  grid-template-columns: repeat(var(--store-slide-page), minmax(0, 1fr));
  grid-template-rows: repeat(var(--store-slide-rows), minmax(0, auto));
  column-gap: var(--store-slide-gap);
  row-gap: 1.05rem;
  align-content: center;
}
.store-slide-page[data-split-rows="true"]::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 174, 98, 0.28) 10%,
    rgba(243, 226, 176, 0.82) 50%,
    rgba(212, 174, 98, 0.28) 90%,
    transparent
  );
  box-shadow: 0 1px 0 rgba(20, 10, 4, 0.42);
}
.store-slide-track[data-sparse="true"] {
  justify-content: center;
}
.store-slide-tile {
  display: flex;
  min-width: 0;
  justify-content: center;
}
.store-slide-card {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  text-align: center;
}
.store-slide-pet-mark {
  display: grid;
  width: 4.6rem;
  height: 4.6rem;
  place-items: center;
  border: 1px solid rgba(212, 174, 98, 0.4);
  border-radius: 0.5rem;
  background: rgba(22, 12, 7, 0.45);
  color: #f3e2b0;
  font-family: var(--font-heading), Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
}
.store-slide-name {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-slide-meta {
  min-height: 1.15em;
  color: #e8d6a0;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.2;
}
.exp-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  white-space: nowrap;
}
.exp-amount-icon {
  height: 1.25em;
  width: 1.25em;
  flex: 0 0 auto;
  transform: translateY(0.5px);
}
.currency-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  white-space: nowrap;
}
.currency-amount-icon {
  height: 1.05em;
  width: 1.05em;
  flex: 0 0 auto;
  object-fit: contain;
  transform: translateY(0.5px);
}
.store-slide-price {
  color: var(--gold);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.2;
}
.store-slide-price .currency-amount-icon {
  height: 1.2em;
  width: 1.2em;
}
.island-route-close {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid #7b552c;
  border-radius: 999px;
  background: linear-gradient(180deg, #d5b679, #9d7137);
  color: #3b2210;
  font-family: Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 0 0 2px rgba(245, 222, 167, 0.55),
    0 2px 5px rgba(43, 25, 8, 0.35);
}
.island-route-close:active {
  transform: scale(0.96);
}
.island-route-panel:has(.dungeon-battle-log) .island-route-close {
  display: none;
}
.island-route-panel-body {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(0.85rem, 2vw, 1.35rem);
}
.island-route-panel-body > * {
  min-width: 0;
}
.keep-parchment .island-route-panel h1,
.keep-parchment .island-route-panel h1 + p {
  color: var(--text-primary);
  text-shadow: none;
}
.keep-parchment .island-route-panel[data-panel="post"] .post-title {
  color: #f3e2b0;
  text-shadow: 0 1px 0 #6a4818,
    0 2px 4px rgba(30, 16, 6, 0.55),
    0 0 18px rgba(255, 214, 140, 0.42);
}
.keep-parchment .island-route-panel[data-panel="post"] .post-detail-title,
.keep-parchment .island-route-panel[data-panel="post"] .post-entry-title,
.keep-parchment .island-route-panel[data-panel="post"] .post-detail-copy,
.keep-parchment .island-route-panel[data-panel="post"] .post-dispatch,
.keep-parchment .island-route-panel[data-panel="post"] .post-dungeon,
.keep-parchment .island-route-panel[data-panel="post"] .post-battle,
.keep-parchment .island-route-panel[data-panel="post"] .post-dispatch-kicker,
.keep-parchment .island-route-panel[data-panel="post"] .post-dungeon-kicker,
.keep-parchment .island-route-panel[data-panel="post"] .post-dungeon-empty,
.keep-parchment .island-route-panel[data-panel="post"] .post-dungeon-summary,
.keep-parchment .island-route-panel[data-panel="post"] .post-battle-flavor {
  color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(28, 14, 6, 0.55);
}
.keep-parchment .island-route-panel[data-panel="post"] .post-entry-kind,
.keep-parchment .island-route-panel[data-panel="post"] .post-entry time,
.keep-parchment .island-route-panel[data-panel="post"] .post-empty,
.keep-parchment .island-route-panel[data-panel="post"] .post-detail-empty {
  color: #dcc8a0;
  text-shadow: 0 1px 2px rgba(20, 8, 2, 0.78);
}
.island-route-panel[data-panel="character"] {
  min-height: min(82vh, 46rem);
  max-height: 100%;
  overflow: hidden;
  background-color: #1a120c;
  background-image: none;
}
.island-route-panel[data-panel="character"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="character"] .island-route-close {
  border: 0;
  border-radius: 6px;
  background: linear-gradient(145deg, #283440, #0b121c 72%);
  box-shadow: inset 0 0 0 1px #a88b55,
    inset 0 0 0 3px rgba(5, 9, 14, 0.72),
    inset 0 1px 0 #f0d598,
    0 3px 8px rgba(0, 0, 0, 0.45);
  color: #e8d6a0;
  font-size: 2.15rem;
  font-weight: 500;
  filter: drop-shadow(0 1px 2px rgba(18, 8, 4, 0.7));
}
.island-route-panel[data-panel="character"] .island-route-close:hover {
  color: #fff1c4;
  background: linear-gradient(145deg, #4b4635, #172330 72%);
}
.island-route-panel-body > div > h1:first-child,
.island-route-panel[data-panel="character"] .hero-keep-vitals,
.island-route-panel[data-panel="character"] .hero-keep-named {
  display: none;
}
.island-route-panel[data-panel="character"] .hero-keep {
  position: static;
}
.island-route-panel[data-panel="character"] .island-route-panel-body {
  padding: 0;
  overflow: hidden;
}
.character-window {
  position: relative;
  min-height: min(82vh, 46rem);
  height: 100%;
  overflow: hidden;
  background-color: #101923;
}
.character-window::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(220, 184, 115, 0.5),
    inset 0 0 0 4px rgba(5, 10, 16, 0.45),
    inset 0 0 32px rgba(4, 9, 16, 0.35);
}
.character-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
.character-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 11, 20, 0.18) 0%, transparent 24%),
    radial-gradient(
      ellipse 72% 64% at 50% 52%,
      transparent 42%,
      rgba(4, 10, 18, 0.24) 100%
    );
}
.character-window-body {
  position: relative;
  z-index: 2;
  height: 100%;
  overflow: auto;
  padding: 4.15rem 0.7rem 1.15rem;
}
.character-window .bag-keep {
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-image: none;
  border-image-source: none;
  border-image-slice: 0 fill;
  border-image-width: 0;
  border-image-repeat: stretch;
  background: linear-gradient(145deg, rgba(210, 177, 113, 0.075), transparent 38%),
    linear-gradient(180deg, rgba(16, 25, 35, 0.76), rgba(8, 14, 23, 0.82));
  background-clip: padding-box;
  box-shadow: 0 10px 24px rgba(2, 6, 12, 0.36),
    inset 0 1px 0 rgba(245, 218, 163, 0.16),
    inset 0 0 0 1px rgba(243, 226, 176, 0.06);
  filter: none;
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
  padding: 0.45rem 0.6rem 0.55rem;
}
.character-window .bag-keep .keep-slot,
.character-window .hero-slot {
  background: rgba(8, 15, 23, 0.46);
  border-color: rgba(212, 174, 98, 0.55);
}
.character-window .bag-keep-page {
  border-color: #a88b55 #715b35 #5a472b;
  background: linear-gradient(160deg, #34404a, #17212d 48%, #0a111a);
  box-shadow: inset 0 1px 0 rgba(255, 227, 173, 0.2),
    inset 0 0 0 2px rgba(3, 7, 12, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.4);
  text-shadow: 0 2px 2px #000;
}
.character-window .bag-keep-page-active {
  background: linear-gradient(160deg, #eed39a, #b58a43 48%, #755022);
  border-color: #ffe4aa #b68b46 #805722;
  box-shadow: inset 0 1px 0 #ffedc1,
    inset 0 0 0 2px rgba(96, 61, 19, 0.36),
    0 0 8px rgba(220, 177, 91, 0.24);
  color: #211507;
  text-shadow: 0 1px 0 rgba(255, 239, 193, 0.55);
}
.character-window .hero-record-cell {
  background: linear-gradient(180deg, rgba(207, 175, 112, 0.1), transparent 48%),
    rgba(8, 15, 24, 0.8);
  box-shadow: 0 8px 20px rgba(2, 6, 12, 0.35),
    inset 0 1px 0 rgba(245, 218, 163, 0.16),
    inset 0 0 0 1px rgba(243, 226, 176, 0.06);
}
.character-window .stats-keep-hero .stats-keep-train,
.character-window .hero-professions-entry {
  border-color: #d8b46d #8d6b35 #715127;
  border-radius: 5px;
  background: linear-gradient(90deg, transparent, rgba(255, 223, 157, 0.52), transparent) center 3px / 76% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(190, 145, 69, 0.42), transparent) center calc(100% - 4px) / 76% 1px no-repeat,
    radial-gradient(ellipse at 50% 0%, rgba(206, 164, 88, 0.2), transparent 68%),
    linear-gradient(180deg, #39404a 0%, #222b36 46%, #121a24 50%, #1d2631 100%);
  box-shadow: inset 0 1px 0 rgba(255, 228, 173, 0.44),
    inset 0 0 0 3px rgba(5, 10, 17, 0.7),
    inset 0 -2px 3px rgba(0, 0, 0, 0.6),
    0 3px 0 #070d15,
    0 5px 12px rgba(0, 0, 0, 0.4);
  color: #ffe5ad;
  text-shadow: 0 2px 2px #000, 0 0 10px rgba(222, 178, 96, 0.2);
}
.character-window a.hero-slot {
  background: radial-gradient(ellipse at 50% 0%, rgba(189, 149, 78, 0.16), transparent 72%),
    linear-gradient(145deg, #26323e, #0c1520);
  border-color: #b79960 #796039 #5b462a;
  box-shadow: inset 0 1px 0 rgba(255, 227, 173, 0.24),
    inset 0 0 0 3px rgba(3, 8, 14, 0.5),
    0 3px 7px rgba(0, 0, 0, 0.4);
}
.character-window :is(.stats-keep-train, .hero-professions-entry, .bag-keep-page, a.hero-slot),
.island-route-panel[data-panel="character"] .island-route-close {
  transition: filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .character-window :is(.stats-keep-train, .hero-professions-entry, .bag-keep-page, a.hero-slot):hover {
    border-color: #f5d99c;
    filter: brightness(1.18) drop-shadow(0 0 4px rgba(223, 179, 92, 0.24));
  }
}
.character-window :is(.stats-keep-train, .hero-professions-entry, .bag-keep-page, a.hero-slot):focus-visible,
.island-route-panel[data-panel="character"] .island-route-close:focus-visible {
  outline: 2px solid #ffe1a0;
  outline-offset: 2px;
}
.character-window :is(.stats-keep-train, .hero-professions-entry, .bag-keep-page, a.hero-slot):active,
.island-route-panel[data-panel="character"] .island-route-close:active {
  filter: brightness(0.94);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7),
    inset 0 0 0 2px rgba(201, 160, 87, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  .character-window :is(.stats-keep-train, .hero-professions-entry, .bag-keep-page, a.hero-slot),
  .island-route-panel[data-panel="character"] .island-route-close {
    transition: none;
  }
}
.island-route-panel[data-panel="character"] .hero-portrait {
  z-index: 3;
}
.character-window .hero-keep-exp,
.island-route-panel[data-panel="character"] .hero-keep-exp {
  pointer-events: auto;
  position: absolute;
  z-index: 5;
  top: 0.7rem;
  left: 50%;
  display: flex;
  width: min(20.5rem, calc(100% - 5.75rem));
  margin-top: 0;
  transform: translateX(-50%);
}
.character-window .hero-keep-exp .exp-keep,
.island-route-panel[data-panel="character"] .hero-keep-exp .exp-keep {
  width: 100%;
}
.character-window .exp-keep {
  aspect-ratio: auto;
  height: 2.55rem;
  background: none;
  filter: none;
}
.character-window .exp-keep::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 0;
  top: 0.22rem;
  right: 0;
  bottom: 0.22rem;
  left: 1.05rem;
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-radius: 999px;
  background-color: rgba(14, 8, 4, 0.42);
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
}
.character-window .exp-keep-level-cluster {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  width: 2.55rem;
  height: 2.55rem;
  transform: translateY(-50%);
  border: 1px solid rgba(212, 174, 98, 0.7);
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, rgba(243, 226, 176, 0.28), transparent 58%),
    rgba(18, 10, 5, 0.88);
  box-shadow: inset 0 1px 1px rgba(243, 226, 176, 0.28),
    0 0 0 1px rgba(74, 48, 16, 0.65),
    0 3px 8px rgba(8, 4, 2, 0.4);
}
.character-window .exp-keep-level-cluster::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0.22rem;
  border: 1px solid rgba(243, 226, 176, 0.22);
  border-radius: 999px;
}
.character-window .exp-keep-level {
  font-family: var(--font-heading), Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  color: #f3e2b0;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
}
.character-window .exp-keep-trough {
  z-index: 1;
  top: 0.48rem;
  right: 0.5rem;
  bottom: 0.48rem;
  left: 2.72rem;
  border: 1px solid rgba(212, 174, 98, 0.22);
  background: linear-gradient(180deg, rgba(243, 226, 176, 0.08), transparent 42%),
    rgba(8, 4, 2, 0.48);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.character-window .exp-keep .meter-fill {
  background: linear-gradient(180deg, #f3e2b0, #d4ae62 55%, #8a5e22) !important;
  opacity: 1;
}
.character-window .exp-keep .meter-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f3e2b0;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 2px rgba(18, 8, 4, 0.85);
}
.character-window .exp-keep-gate,
.island-route-panel[data-panel="character"] .exp-keep-gate {
  display: none;
}
.island-route-panel-body > div > h1:first-child + p {
  margin-top: 0;
}
@keyframes island-route-panel-in {
  from {
    opacity: 0;
    transform: translateY(0.65rem) scale(0.985);
  }
}
.island-build-dock {
  right: max(0.35rem, env(safe-area-inset-right));
  bottom: max(2.3rem, calc(env(safe-area-inset-bottom) + 1.2rem));
  width: min(100%, calc(100% - 0.7rem));
  height: 4.85rem;
}
.island-build-strip {
  position: absolute;
  right: 0;
  bottom: 5rem;
  width: 100%;
  flex: none;
}
.island-build-btn,
.island-settings-btn {
  width: 4.85rem;
  height: 4.85rem;
}
.island-chrome {
  top: 10.4rem;
}
@media (max-width: 420px) {
  .game-hud-name .faction-banner,
  .game-hud-name .name-scroll-tag {
    display: none;
  }
}
.hidden-level-badge {
  --hidden-level-compact-size: 2.75rem;
  --hidden-level-size: var(--hidden-level-compact-size);
  position: relative;
  display: inline-grid;
  width: var(--hidden-level-size);
  height: var(--hidden-level-size);
  flex: 0 0 auto;
  place-items: center;
  filter: drop-shadow(0 0.16rem 0.2rem rgba(38, 20, 48, 0.35));
}
.hidden-level-badge[data-density="wide"] {
  --hidden-level-size: max(
    var(--hidden-level-compact-size),
    var(--hidden-level-readable-size)
  );
}
.hidden-level-badge-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hidden-level-badge-number {
  position: absolute;
  z-index: 1;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff4c4;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: var(--hidden-level-font-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 2px #1a0c04,
    0 1px 0 #1a0c04,
    1px 0 0 #1a0c04,
    -1px 0 0 #1a0c04,
    0 -1px 0 #1a0c04,
    0 2px 3px rgba(16, 8, 2, 0.85);
}
.hidden-level-badge-number::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 1.55em;
  height: 1.2em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(22, 10, 4, 0.62) 0%,
    rgba(22, 10, 4, 0.28) 58%,
    transparent 78%
  );
}
.absorbed-port-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
  gap: 0.5rem 0.65rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}
.absorbed-amulet-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
}
.absorbed-amulet-text {
  min-width: 0;
}
.absorbed-amulet-name,
.absorbed-amulet-effect {
  margin: 0;
}
.absorbed-amulet-name {
  color: #f3e2b0;
  font-family: var(--font-heading), Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.absorbed-amulet-effect {
  margin-top: 0.18rem;
  color: #f0e4c4;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.absorbed-port .absorbed-amulet-name {
  color: var(--text-primary);
}
.absorbed-port .absorbed-amulet-effect {
  color: var(--text-secondary);
}
.hero-bag-column {
  display: flex;
  box-sizing: border-box;
  width: 18.5rem;
  max-width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}
.hero-record {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  margin: 0.85rem 0 0;
  padding: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
  list-style: none;
}
.hero-record-cell {
  display: flex;
  min-width: 0;
  min-height: 5.45rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.48rem 0.32rem 0.46rem;
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-radius: 0.45rem;
  background-color: rgba(14, 8, 4, 0.28);
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  color: #f3e2b0;
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
}
.hero-record-icon {
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
}
.hero-record-art,
.hero-record-glyph {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero-record-fallback {
  display: block;
  font-size: 1.15rem;
  line-height: 1;
}
.hero-record-value {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 1.18rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
  white-space: nowrap;
}
.hero-record-label {
  max-width: 100%;
  overflow: hidden;
  color: #f0e4c4;
  font-family: var(--font-heading), Georgia, serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 639px) {
  .hero-record {
    gap: 0.28rem;
    margin-top: 0.65rem;
  }
  .hero-record-cell {
    min-height: 3.85rem;
    padding: 0.28rem 0.1rem 0.3rem;
  }
  .hero-record-icon {
    width: 1.22rem;
    height: 1.22rem;
  }
  .hero-record-value {
    font-size: 0.88rem;
  }
  .hero-record-label {
    font-size: 0.5rem;
    letter-spacing: 0.04em;
  }
}
.hero-professions-entry {
  position: relative;
  z-index: 5;
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0.08rem 0.4rem 0.18rem;
  text-decoration: none;
}
.hero-professions-link {
  display: block;
  width: 100%;
  padding: 0.12rem 0.2rem;
  color: #f3e2b0;
  font-family: var(--font-heading), Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75);
}
.hero-professions-entry:hover .hero-professions-link {
  color: #fff4d8;
}
.island-route-panel[data-panel="professions"] {
  width: min(94vw, 68rem);
  height: min(82vh, 46rem);
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  background-color: #1a120c;
  background-image: none;
}
.island-route-panel[data-panel="professions"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="professions"] .island-route-close {
  border: 0;
  border-radius: 6px;
  background: linear-gradient(145deg, #39414a, #131a23 72%);
  box-shadow: inset 0 0 0 1px #b5965b,
    inset 0 0 0 3px rgba(5, 9, 14, 0.72),
    0 3px 8px rgba(0, 0, 0, 0.45);
  color: #e8d6a0;
  font-size: 2.15rem;
  font-weight: 500;
  filter: drop-shadow(0 1px 2px rgba(18, 8, 4, 0.7));
}
.island-route-panel[data-panel="professions"] .island-route-close:hover {
  color: #fff1c4;
  background: linear-gradient(145deg, #645138, #222933 72%);
}
.island-route-panel[data-panel="professions"] .island-route-close:focus-visible {
  outline: 2px solid #ffe1a0;
  outline-offset: 2px;
}
.island-route-panel[data-panel="professions"] .island-route-panel-body {
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.island-route-panel[data-panel="professions"] .island-route-panel-body > * {
  min-height: 0;
  flex: 1 1 auto;
}
.island-route-panel[data-panel="training"] {
  width: min(94vw, 68rem);
  min-height: min(82vh, 46rem);
  max-height: 100%;
  overflow: hidden;
  background-color: #1a120c;
  background-image: none;
}
.island-route-panel[data-panel="training"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="training"] .island-route-close {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #e8d6a0;
  font-size: 2.15rem;
  font-weight: 500;
  filter: drop-shadow(0 1px 2px rgba(18, 8, 4, 0.7));
}
.island-route-panel[data-panel="training"] .island-route-close:hover {
  color: #fff1c4;
}
.island-route-panel[data-panel="training"] .island-route-panel-body {
  padding: 0;
  overflow: hidden;
}
.island-route-panel[data-panel="battlefield"] {
  width: min(94vw, 68rem);
  height: min(90vh, 46rem);
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  background-color: #1a120c;
  background-image: none;
}
.island-route-panel[data-panel="battlefield"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="battlefield"] .island-route-close {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #e8d6a0;
  font-size: 2.15rem;
  font-weight: 500;
  filter: drop-shadow(0 1px 2px rgba(18, 8, 4, 0.7));
}
.island-route-panel[data-panel="battlefield"] .island-route-close:hover {
  color: #fff1c4;
}
.island-route-panel[data-panel="battlefield"] .island-route-panel-body {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.island-route-panel[data-panel="battlefield"] .island-route-panel-body > * {
  min-height: 0;
  height: 100%;
}
.island-route-overlay:has(> .island-route-panel[data-panel="territory"]) {
  padding: 0.55rem;
}
.island-route-panel[data-panel="territory"] {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(236, 208, 132, 0.82);
  border-radius: 0.78rem;
  background-color: #1a120c;
  background-image: none;
  box-shadow: 0 0 0 1px rgba(62, 36, 12, 0.92),
    0 0 0 3px rgba(196, 150, 62, 0.52),
    0 0 0 6px rgba(28, 16, 8, 0.88),
    0 14px 32px rgba(8, 4, 2, 0.45),
    inset 0 0 0 1px rgba(255, 232, 176, 0.16);
}
.island-route-panel[data-panel="territory"]::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0.52rem;
  z-index: 5;
  border: 1px solid rgba(232, 198, 118, 0.34);
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 1px rgba(24, 12, 6, 0.28);
  background: linear-gradient(#e8c878, #e8c878) top left / 1.15rem 2px no-repeat,
    linear-gradient(#e8c878, #e8c878) top left / 2px 1.15rem no-repeat,
    linear-gradient(#e8c878, #e8c878) top right / 1.15rem 2px no-repeat,
    linear-gradient(#e8c878, #e8c878) top right / 2px 1.15rem no-repeat,
    linear-gradient(#e8c878, #e8c878) bottom left / 1.15rem 2px no-repeat,
    linear-gradient(#e8c878, #e8c878) bottom left / 2px 1.15rem no-repeat,
    linear-gradient(#e8c878, #e8c878) bottom right / 1.15rem 2px no-repeat,
    linear-gradient(#e8c878, #e8c878) bottom right / 2px 1.15rem no-repeat;
}
.island-route-panel[data-panel="territory"] .island-route-panel-bar {
  position: absolute;
  z-index: 6;
  top: 0.62rem;
  right: 0.62rem;
  left: auto;
  min-height: 0;
  justify-content: flex-end;
  border-bottom: none;
  background: transparent;
  padding: 0;
}
.island-route-panel[data-panel="territory"] .island-route-close {
  border: 1px solid rgba(242, 214, 140, 0.88);
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, rgba(255, 244, 210, 0.38), transparent 54%),
    linear-gradient(180deg, #6a4520 0%, #2c170a 100%);
  box-shadow: 0 0 0 2px rgba(24, 12, 6, 0.82),
    0 0 0 3px rgba(212, 174, 98, 0.55),
    inset 0 1px 0 rgba(255, 236, 190, 0.42),
    0 4px 10px rgba(8, 4, 2, 0.45);
  color: #f3e2b0;
  font-size: 1.7rem;
  font-weight: 600;
  filter: none;
}
.island-route-panel[data-panel="territory"] .island-route-close:hover {
  color: #fff8dc;
  filter: brightness(1.12);
}
.island-route-panel[data-panel="territory"] .island-route-close:focus-visible {
  outline: 2px solid #ffe09a;
  outline-offset: 2px;
}
.island-route-panel[data-panel="territory"] .island-route-panel-body {
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.island-route-panel[data-panel="territory"] .island-route-panel-body > * {
  min-height: 0;
  height: 100%;
  flex: 1 1 auto;
}
.training-window {
  position: relative;
  min-height: min(82vh, 46rem);
  height: 100%;
  overflow: hidden;
}
.training-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 42%;
}
.training-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 10, 6, 0.22) 0%, transparent 48%),
    linear-gradient(180deg, rgba(18, 10, 6, 0.28) 0%, transparent 22%);
}
.training-window-body {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  min-height: inherit;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  overflow: auto;
  padding: 3.1rem 1rem 1.1rem;
}
.training-window-heading {
  display: flex;
  align-items: baseline;
  gap: 0.22rem;
}
.training-window-back {
  display: grid;
  width: 0.72em;
  height: 1em;
  flex: 0 0 auto;
  place-items: center;
  margin-left: -0.08rem;
  border: 0;
  background: none;
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.training-window-back:hover {
  color: #fff4d8;
}
.training-window-title {
  margin: 0;
  padding-left: 0.12rem;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.keep-parchment .island-route-panel[data-panel="training"] .training-window-title {
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.training-window-panel {
  width: min(32.5rem, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 0.9rem 1rem 1.05rem;
}
.training-window-panel.parchment {
  color: #f3e2b0;
  background-color: rgba(14, 8, 4, 0.28);
  background-image: none;
  border: 1px solid rgba(212, 174, 98, 0.38);
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
  font-family: var(--font-display), ui-serif, Georgia, serif;
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --text-disabled: #b89a70;
  --ink-parchment: #f3e2b0;
  --bg-app: rgba(10, 6, 4, 0.28);
  --bg-panel: rgba(22, 12, 7, 0.18);
  --bg-panel-raised: rgba(28, 16, 8, 0.28);
  --border: rgba(212, 174, 98, 0.38);
  --border-strong: rgba(212, 174, 98, 0.55);
}
.training-window-panel .training-purse,
.training-window-panel .training-plan-row {
  background: rgba(22, 12, 7, 0.28);
}
.training-window-panel .training-alloc-input {
  background: rgba(12, 7, 4, 0.42);
  border-color: rgba(212, 174, 98, 0.42);
  color: #f3e2b0;
}
.training-window-panel .training-text-btn:hover:not(:disabled) {
  background: rgba(243, 226, 176, 0.1);
}
.training-yard {
  max-width: none;
}
@media (max-width: 50rem) {
  .training-window-art {
    object-position: 84% 14%;
  }
  .training-window-panel {
    width: 100%;
  }
}
.professions-window {
  position: relative;
  min-height: min(82vh, 46rem);
  height: 100%;
  overflow: hidden;
  color: #f3e2b0;
}
.island-route-panel[data-panel="professions"] .professions-window {
  min-height: 0;
}
.professions-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
.professions-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 10, 6, 0.42) 0%, transparent 24%),
    radial-gradient(
      ellipse 48% 62% at 50% 58%,
      rgba(16, 9, 4, 0.12),
      transparent 74%
    );
}
.professions-window-body {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  overflow: hidden;
  padding: 3.1rem 1rem 1.1rem;
}
.professions-window-heading {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 0.22rem;
}
.professions-window-back {
  display: grid;
  width: 0.72em;
  height: 1em;
  flex: 0 0 auto;
  place-items: center;
  margin-left: -0.08rem;
  border: 0;
  background: none;
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.professions-window-back:hover {
  color: #fff4d8;
}
.professions-window-title {
  margin: 0;
  padding-left: 0.12rem;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.keep-parchment .island-route-panel[data-panel="professions"] .professions-window-title {
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.professions-window-panel {
  flex: 1 1 auto;
  width: min(62rem, 100%);
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.9rem 1rem 1.05rem;
}
.professions-window-panel.parchment {
  color: #f3e2b0;
  background-color: rgba(10, 15, 23, 0.48);
  background-image: linear-gradient(135deg, rgba(214, 175, 104, 0.09), transparent 32%);
  border: 1px solid #a88b55;
  border-radius: 7px;
  box-shadow: 0 12px 28px rgba(3, 7, 12, 0.46),
    inset 0 0 0 3px rgba(4, 8, 14, 0.72),
    inset 0 0 0 4px rgba(212, 174, 98, 0.18),
    inset 0 1px 0 rgba(255, 227, 173, 0.35);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --text-disabled: #b89a70;
  --ink-parchment: #f3e2b0;
  --bg-app: rgba(10, 6, 4, 0.28);
  --bg-panel: rgba(22, 12, 7, 0.18);
  --bg-panel-raised: rgba(28, 16, 8, 0.28);
  --border: rgba(212, 174, 98, 0.38);
  --border-strong: rgba(212, 174, 98, 0.55);
}
@media (max-width: 50rem) {
  .professions-window-panel {
    width: 100%;
  }
}
.battlefield-window {
  position: relative;
  min-height: min(82vh, 46rem);
  height: 100%;
  overflow: hidden;
  color: #f3e2b0;
}
.battlefield-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
.battlefield-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 10, 6, 0.42) 0%, transparent 24%),
    radial-gradient(
      ellipse 48% 62% at 50% 58%,
      rgba(16, 9, 4, 0.12),
      transparent 74%
    );
}
.battlefield-window-body {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  min-height: inherit;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  overflow: auto;
  padding: 3.35rem 1rem 1.15rem;
}
.battlefield-window-title {
  margin: 0;
  text-align: center;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 2.45rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.keep-parchment .island-route-panel[data-panel="battlefield"] .battlefield-window-title,
.keep-parchment .island-route-panel[data-panel="battlefield"] .battlefield-window-lead {
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.battlefield-window-lead {
  margin: 0 auto;
  max-width: 36rem;
  text-align: center;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.battlefield-window-board {
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.battlefield-window-board:hover,
.battlefield-window-board:focus-visible {
  color: #fff1c4;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.battlefield-window-panel {
  width: min(56rem, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 0.95rem 1.05rem 1.1rem;
}
.battlefield-window-panel.parchment {
  color: #f3e2b0;
  background-color: rgba(14, 8, 4, 0.28);
  background-image: none;
  border: 1px solid rgba(212, 174, 98, 0.4);
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --text-disabled: #b89a70;
  --ink-parchment: #f3e2b0;
  --bg-app: rgba(10, 6, 4, 0.28);
  --bg-panel: rgba(22, 12, 7, 0.22);
  --bg-panel-raised: rgba(28, 16, 8, 0.28);
  --border: rgba(212, 174, 98, 0.4);
  --border-strong: rgba(212, 174, 98, 0.55);
  --border-gold: #d4ae62;
}
.battlefield-search-title {
  margin: 0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f3e2b0;
}
.battlefield-window-panel .battlefield-search {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
.battlefield-window-panel .battlefield-level-field input {
  background: rgba(12, 7, 4, 0.42);
  border-color: rgba(212, 174, 98, 0.42);
  color: #f3e2b0;
}
.battlefield-window-panel .battlefield-opponent-card,
.battlefield-window-panel .battlefield-search-empty {
  width: 100%;
  margin: 1rem 0 0;
  background: rgba(22, 12, 7, 0.28);
  box-shadow: none;
}
.battlefield-window.is-fight .battlefield-window-body {
  padding: 0.55rem;
  overflow: hidden;
}
.battlefield-window.is-fight .fight-root {
  width: 100%;
  height: 100%;
  min-height: 0;
}
@media (max-width: 50rem) {
  .battlefield-window-panel {
    width: 100%;
  }
}
.training-layout-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.65rem;
}
.training-layout-switch {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.training-layout-switch:hover {
  color: var(--text-primary);
}
.training-purse {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem 0.9rem;
  align-items: center;
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel-raised) 88%, #fff);
  }
}
.training-purse-copy {
  display: grid;
  gap: 0.1rem;
  color: var(--text-primary);
  font-size: 15px;
}
.training-purse-hint {
  color: var(--text-secondary);
  font-size: 12px;
}
.training-purse-track {
  min-width: 0;
  overflow: visible;
}
.training-purse-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.training-purse-of {
  font-size: 13px;
}
.training-plan-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  grid-template-areas: "icon identity cost"
    "icon track cost";
  column-gap: 0.75rem;
  row-gap: 0.28rem;
  align-items: center;
  padding: 0.65rem 0.8rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel-raised);
}
.training-plan-icon {
  grid-area: icon;
  height: 2rem;
  width: 2rem;
  object-fit: contain;
}
.training-plan-identity {
  grid-area: identity;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
  min-width: 0;
}
.training-plan-name {
  color: var(--text-secondary);
  font-size: 15px;
}
.training-plan-values {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28rem;
  color: var(--text-primary);
  font-size: 15px;
}
.training-stat-arrow {
  color: var(--gold);
}
.training-stat-next {
  color: var(--gold);
}
.training-plan-cost {
  grid-area: cost;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: end;
  align-self: start;
  padding-top: 0.15rem;
}
.training-next-label {
  color: var(--text-disabled);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.training-plan-track {
  grid-area: track;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.4rem auto;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
  overflow: visible;
}
.training-plan-actions {
  display: inline-flex;
  gap: 0.15rem;
}
.training-text-btn {
  margin: 0;
  padding: 0.15rem 0.35rem;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}
.training-text-btn:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-wood);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-wood) 10%, transparent);
  }
}
.training-text-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.training-alloc-input {
  width: 4.4rem;
  min-height: 1.85rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--bg-panel) 70%, #fff);
  }
  padding: 0.15rem 0.35rem;
  color: var(--text-primary);
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.training-alloc-input:focus {
  outline: 2px solid var(--border-gold);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 2px solid color-mix(in srgb, var(--border-gold) 70%, transparent);
  }
  outline-offset: 1px;
}
.training-slider {
  --training-rail: linear-gradient(
      to right,
      #edc56a 0%,
      #c4963a var(--training-fill, 0%),
      rgb(0 0 0 / 0) var(--training-fill, 0%)
    ),
    linear-gradient(180deg, #5a3a1c 0%, #2a180c 52%, #1a0e08 100%);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.45rem;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  accent-color: #c4963a;
  cursor: pointer;
}
.training-slider::-webkit-slider-runnable-track {
  height: 0.62rem;
  border: 1px solid rgba(232, 198, 112, 0.7);
  border-radius: 999px;
  background: var(--training-rail);
  box-shadow: inset 0 1px 2px rgba(8, 4, 2, 0.72),
    0 0 0 1px rgba(243, 226, 176, 0.12);
}
.training-slider::-moz-range-track {
  height: 0.62rem;
  border: 1px solid rgba(232, 198, 112, 0.7);
  border-radius: 999px;
  background: var(--training-rail);
  box-shadow: inset 0 1px 2px rgba(8, 4, 2, 0.72),
    0 0 0 1px rgba(243, 226, 176, 0.12);
}
.training-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 1.28rem;
  height: 1.28rem;
  margin-top: calc((0.62rem - 1.28rem) / 2 - 1px);
  border: 1.5px solid #f3e2b0;
  border-radius: 50%;
  background: radial-gradient(
      circle at 32% 28%,
      #fff6d6 0%,
      #e4bc5c 36%,
      #8d5720 78%,
      #3f240e 100%
    );
  box-shadow: 0 1px 3px rgba(12, 6, 3, 0.55),
    inset 0 0 0 2px rgba(90, 50, 16, 0.28),
    inset 0 1px 0 rgba(255, 244, 208, 0.75);
}
.training-slider::-moz-range-thumb {
  box-sizing: border-box;
  width: 1.28rem;
  height: 1.28rem;
  border: 1.5px solid #f3e2b0;
  border-radius: 50%;
  background: radial-gradient(
      circle at 32% 28%,
      #fff6d6 0%,
      #e4bc5c 36%,
      #8d5720 78%,
      #3f240e 100%
    );
  box-shadow: 0 1px 3px rgba(12, 6, 3, 0.55),
    inset 0 0 0 2px rgba(90, 50, 16, 0.28),
    inset 0 1px 0 rgba(255, 244, 208, 0.75);
}
.training-slider::-moz-focus-outer {
  border: 0;
}
.training-slider:hover::-webkit-slider-thumb {
  filter: brightness(1.08);
}
.training-slider:hover::-moz-range-thumb {
  filter: brightness(1.08);
}
.training-slider:focus-visible {
  outline: none;
}
.training-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px rgba(243, 226, 176, 0.75),
    0 1px 3px rgba(12, 6, 3, 0.55),
    inset 0 0 0 2px rgba(90, 50, 16, 0.28),
    inset 0 1px 0 rgba(255, 244, 208, 0.75);
}
.training-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px rgba(243, 226, 176, 0.75),
    0 1px 3px rgba(12, 6, 3, 0.55),
    inset 0 0 0 2px rgba(90, 50, 16, 0.28),
    inset 0 1px 0 rgba(255, 244, 208, 0.75);
}
.training-slider:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
@media (max-width: 40rem) {
  .training-purse {
    grid-template-columns: 1fr auto;
  }
  .training-purse-track {
    grid-column: 1 / -1;
  }
  .training-plan-row {
    grid-template-columns: 2rem minmax(0, 1fr);
    grid-template-areas: "icon identity"
      "track track"
      "cost cost";
  }
  .training-plan-cost {
    justify-self: start;
  }
  .training-plan-track {
    grid-template-columns: minmax(0, 1fr) 3.8rem;
  }
  .training-plan-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}
.training-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}
.training-alloc {
  min-width: 1.7rem;
  text-align: center;
  font-family: var(--font-data), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--text-primary);
}
.training-footer {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.training-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 15px;
  color: var(--text-secondary);
}
.training-save {
  color: var(--success);
}
.training-lock-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}
.training-lock-dismiss {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  cursor: pointer;
  background: rgba(35, 20, 10, 0.7);
}
.training-lock-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 26rem);
  padding: 1.25rem 1.35rem 1.15rem;
  border: 2px solid #8f6632;
  border-radius: 0.4rem;
  box-shadow: 0 1rem 3rem rgba(26, 13, 5, 0.55);
}
.training-lock-dialog h2 {
  color: #3d2614;
  font-size: 1.45rem;
}
.training-lock-dialog p {
  margin-top: 0.55rem;
  color: #5e4329;
  font-size: 15px;
  line-height: 1.45;
}
.training-lock-action {
  display: flex;
  margin: 1rem 0 0.55rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.training-lock-action:hover {
  filter: brightness(1.1);
}
.professions-charter {
  position: relative;
  min-height: 0;
  padding: 0 0 0.35rem;
  color: #f3e2b0;
}
.professions-heading {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.25rem);
}
.professions-heading .professions-seal {
  width: clamp(4.2rem, 8vw, 5.6rem);
  height: clamp(4.2rem, 8vw, 5.6rem);
}
.professions-heading > div > p:last-child,
.professions-locked > p:last-child {
  max-width: 42rem;
  margin-top: 0.35rem;
  color: #dcc8a0;
  line-height: 1.45;
}
.profession-kicker {
  margin: 0;
  color: #e8d6a0;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.profession-ledger {
  display: grid;
  grid-template-columns: minmax(14rem, 1.35fr) minmax(19rem, 1fr);
  align-items: stretch;
  margin: 0.95rem 0 0;
  border: 1px solid rgba(212, 174, 98, 0.38);
  background: rgba(22, 12, 7, 0.28);
}
.profession-hidden-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 1rem;
  align-content: center;
  min-height: 4.75rem;
  padding: 0.75rem 1rem;
  border-right: 1px solid rgba(212, 174, 98, 0.28);
  color: #dcc8a0;
  font-size: 0.78rem;
}
.profession-hidden-progress strong {
  color: #f3e2b0;
  font-size: 0.82rem;
}
.profession-progress-track {
  grid-column: 1 / -1;
  height: 0.35rem;
  overflow: hidden;
  border: 1px solid rgba(212, 174, 98, 0.42);
  border-radius: 999px;
  background: rgba(12, 7, 4, 0.55);
}
.profession-progress-track > span {
  display: block;
  height: 100%;
  background: #765080;
  box-shadow: 0 0 0.4rem rgba(86, 174, 184, 0.7);
  transition: width 220ms var(--ease-out);
}
.profession-point-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
}
.profession-point-totals > div {
  display: grid;
  min-width: 0;
  place-items: center;
  align-content: center;
  padding: 0.55rem;
  border-right: 1px solid rgba(212, 174, 98, 0.22);
}
.profession-point-totals > div:last-child {
  border-right: 0;
}
.profession-point-totals dt {
  color: #dcc8a0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.profession-point-totals dd {
  margin: 0.2rem 0 0;
  color: #f3e2b0;
  font-size: 1.15rem;
  font-weight: 700;
}
.profession-point-totals [data-available="true"] dd {
  color: #9ee0ff;
}
.profession-load-state {
  margin: 0;
  padding: 0.65rem 0.2rem;
  color: #dcc8a0;
}
.profession-message {
  margin: 0.8rem 0 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--danger) 55%, #d4ae62);
  }
  background: var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--danger) 16%, rgba(14, 8, 4, 0.42));
  }
  color: #f3c2b4;
}
.profession-shots {
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.9rem;
  border-left: 0.2rem solid #c4a0d4;
  background: rgba(83, 49, 91, 0.22);
}
.profession-shots h2 {
  color: #e8d6a0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.92rem;
}
.profession-shots ul {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.profession-shots li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  color: #dcc8a0;
  font-size: 0.76rem;
}
.profession-registers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0.85rem minmax(0, 1fr);
  gap: clamp(0.65rem, 1.6vw, 1.2rem);
  align-items: start;
  margin: 1.1rem 0 0;
}
.profession-braid {
  width: 0.85rem;
  height: 100%;
  min-height: 14rem;
  background: linear-gradient(45deg, transparent 38%, rgba(212, 174, 98, 0.42) 39% 47%, transparent 48%) 0 0 / 0.85rem 0.85rem,
    linear-gradient(-45deg, transparent 38%, rgba(243, 226, 176, 0.55) 39% 47%, transparent 48%) 0 0.42rem / 0.85rem 0.85rem;
  opacity: 0.8;
}
.profession-register-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
}
.profession-register-heading span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 174, 98, 0.7));
}
.profession-register-heading span:last-child {
  background: linear-gradient(90deg, rgba(212, 174, 98, 0.7), transparent);
}
.profession-register-heading h2 {
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: clamp(1rem, 2vw, 1.15rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.profession-register-entries {
  display: grid;
  margin-top: 0.55rem;
}
.profession-portraits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.7rem;
}
.profession-portrait {
  display: grid;
  gap: 0.45rem;
  padding: 0.4rem 0.35rem 0.55rem;
  border: 1px solid #a88b55;
  border-color: #c0a16a #806640 #645033;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent, rgba(243, 215, 160, 0.48), transparent) center 3px / 70% 1px no-repeat,
    radial-gradient(ellipse at 50% 0%, rgba(192, 148, 77, 0.13), transparent 65%),
    linear-gradient(160deg, rgba(36, 43, 51, 0.9), rgba(13, 20, 29, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 229, 179, 0.22),
    inset 0 0 0 3px rgba(4, 9, 16, 0.58),
    0 4px 10px rgba(0, 0, 0, 0.32);
}
.profession-portrait-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid #d5b77c;
  border-radius: 6px;
  background: rgba(12, 7, 4, 0.45);
  cursor: help;
  box-shadow: 0 0 0 1px #554024, 0 3px 7px rgba(0, 0, 0, 0.4);
}
.profession-portrait-frame::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #f4d897, #9a7137 48%, transparent 51%) top left / 12px 12px no-repeat,
    linear-gradient(225deg, #f4d897, #9a7137 48%, transparent 51%) top right / 12px 12px no-repeat,
    linear-gradient(45deg, #d6af68, #725024 48%, transparent 51%) bottom left / 12px 12px no-repeat,
    linear-gradient(315deg, #d6af68, #725024 48%, transparent 51%) bottom right / 12px 12px no-repeat;
  box-shadow: inset 0 0 0 2px rgba(64, 42, 18, 0.62),
    inset 0 0 0 3px rgba(248, 219, 162, 0.42);
}
.profession-portrait:focus-within {
  border-color: #efd194;
}
.professions-window .profession-ledger {
  border-color: #a88b55;
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(47, 48, 44, 0.78), rgba(10, 17, 27, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 228, 173, 0.22),
    inset 0 0 0 3px rgba(4, 9, 16, 0.42),
    0 4px 12px rgba(0, 0, 0, 0.3);
}
.professions-window .profession-point-totals [data-available="true"] {
  background: radial-gradient(ellipse at 50% 100%, rgba(57, 137, 174, 0.2), transparent 80%);
}
.professions-window .profession-progress-track > span {
  background: linear-gradient(180deg, #ccb3dd, #90669f 50%, #654773);
}
.professions-window .profession-register-heading span {
  box-shadow: 0 1px 0 rgba(5, 9, 15, 0.8), 0 0 5px rgba(213, 175, 99, 0.18);
}
.profession-portrait-frame:hover .profession-portrait-art,
.profession-portrait-frame:focus-visible .profession-portrait-art {
  filter: brightness(1.07);
}
.profession-portrait-frame:focus-visible {
  outline: 2px solid rgba(243, 226, 176, 0.75);
  outline-offset: 2px;
}
.profession-portrait-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  transition: filter 180ms var(--ease-out);
}
.profession-portrait-meta {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}
.profession-portrait-meta h3 {
  min-width: 0;
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}
.profession-portrait-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.profession-portrait-meta p {
  margin: 0;
  color: #dcc8a0;
  font-size: 0.68rem;
  white-space: nowrap;
}
.profession-portrait-tip-ledger {
  margin: 0.55rem 0.85rem 0.9rem;
}
.profession-entry {
  padding: 0.85rem 0.35rem 0.9rem;
  border-bottom: 1px solid rgba(212, 174, 98, 0.28);
}
.profession-entry-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
}
.profession-entry-heading h3 {
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
}
.profession-entry-heading p {
  margin-top: 0.2rem;
  color: #dcc8a0;
  font-size: 0.7rem;
}
.profession-entry-copy {
  margin: 0.45rem 0 0;
  color: #dcc8a0;
  font-size: 0.74rem;
  line-height: 1.45;
}
.profession-portrait-tip-shell {
  width: min(28rem, calc(100vw - 1rem));
}
.profession-portrait-tip .item-tooltip-name {
  overflow: visible;
  white-space: normal;
}
.profession-portrait-tip-copy {
  color: #2a1a0c;
  padding-bottom: 0.2rem;
}
.profession-entry-heading button,
.profession-portrait-meta button,
.profession-reset-zone > button,
.profession-reset-dialog button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid #b3945b;
  border-color: #e1c080 #a58146 #755327;
  border-radius: 6px;
  background: radial-gradient(ellipse at 50% 0%, rgba(249, 208, 129, 0.18), transparent 70%),
    linear-gradient(180deg, #5c503c, #39372f 46%, #20242a 50%, #2c3035);
  box-shadow: inset 0 1px 0 rgba(255, 232, 184, 0.52),
    inset 0 0 0 2px rgba(13, 15, 19, 0.65),
    inset 0 -2px 2px rgba(0, 0, 0, 0.4),
    0 2px 0 #080d14,
    0 4px 7px rgba(0, 0, 0, 0.35);
  color: #ffe6b3;
  text-shadow: 0 2px 2px #080b10;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: filter 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}
.profession-entry-heading button,
.profession-portrait-meta button {
  padding-inline: 0.7rem;
  white-space: nowrap;
}
.profession-entry-heading button:hover:not(:disabled),
.profession-portrait-meta button:hover:not(:disabled),
.profession-reset-zone > button:hover:not(:disabled),
.profession-reset-dialog button:hover:not(:disabled) {
  border-color: #f3d496;
  filter: brightness(1.17) drop-shadow(0 0 3px rgba(224, 178, 89, 0.24));
  color: #fff1c4;
}
.profession-entry-heading button:focus-visible,
.profession-portrait-meta button:focus-visible,
.profession-reset-zone > button:focus-visible,
.profession-reset-dialog button:focus-visible {
  outline: 2px solid #ffe1a0;
  outline-offset: 2px;
}
.profession-entry-heading button:active:not(:disabled),
.profession-portrait-meta button:active:not(:disabled),
.profession-reset-zone > button:active:not(:disabled),
.profession-reset-dialog button:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.94);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.68), inset 0 0 0 2px rgba(207, 165, 91, 0.2);
}
.profession-entry-heading button:disabled,
.profession-portrait-meta button:disabled,
.profession-reset-zone > button:disabled,
.profession-reset-dialog button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  filter: saturate(0.4);
  box-shadow: inset 0 0 0 2px rgba(3, 7, 12, 0.45);
}
.profession-effect-ledger {
  display: grid;
  gap: 0.35rem;
  margin: 0.65rem 0 0;
}
.profession-effect-ledger > div {
  display: grid;
  grid-template-columns: 4.7rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: baseline;
}
.profession-effect-ledger dt {
  color: #e8d6a0;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.profession-effect-ledger dd {
  margin: 0;
  color: #dcc8a0;
  font-size: 0.75rem;
  line-height: 1.45;
}
.profession-effect-ledger.profession-portrait-tip-ledger dt {
  color: #8b5a1e;
}
.profession-effect-ledger.profession-portrait-tip-ledger dd {
  color: #2a1a0c;
}
.profession-reset-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 1rem;
  border: 1px solid rgba(224, 82, 82, 0.42);
  background: rgba(112, 32, 24, 0.22);
}
.profession-reset-zone h2 {
  margin-top: 0.15rem;
  color: #f3c2b4;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.05rem;
}
.profession-reset-zone > div > p:last-child {
  margin-top: 0.2rem;
  color: #dcc8a0;
  font-size: 0.76rem;
}
.profession-reset-zone > button {
  flex: 0 0 auto;
  padding-inline: 1rem;
}
.profession-reset-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: rgba(18, 10, 6, 0.72);
}
.profession-reset-dialog {
  width: min(100%, 31rem);
  max-height: min(90vh, 38rem);
  overflow: auto;
  padding: clamp(1rem, 4vw, 1.5rem);
  border: 1px solid rgba(212, 174, 98, 0.48);
  border-radius: 0.4rem;
  background-color: rgba(14, 8, 4, 0.92);
  background-image: none;
  box-shadow: 0 1rem 3rem rgba(8, 4, 2, 0.55),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  color: #f3e2b0;
}
.profession-reset-dialog.parchment {
  background-image: none;
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --ink-parchment: #f3e2b0;
}
.profession-reset-dialog h2 {
  margin-top: 0.25rem;
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: clamp(1.2rem, 5vw, 1.6rem);
}
.profession-reset-dialog > p:nth-of-type(2) {
  margin-top: 0.7rem;
  color: #dcc8a0;
  line-height: 1.5;
}
.profession-reset-pending {
  margin-top: 0.65rem;
  color: #f3c2b4;
  font-family: var(--font-data), ui-monospace, monospace;
  font-size: 0.74rem;
  font-weight: 700;
}
.profession-reset-payments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}
.profession-reset-payments button {
  padding: 0.65rem 0.8rem;
}
.profession-reset-dialog .profession-reset-cancel {
  width: 100%;
  margin-top: 0.65rem;
  background: transparent;
  color: #dcc8a0;
}
.professions-locked {
  display: grid;
  min-height: 12rem;
  place-content: center;
  text-align: center;
}
@media (max-width: 760px) {
  .profession-ledger {
    grid-template-columns: 1fr;
  }
  .profession-hidden-progress {
    border-right: 0;
    border-bottom: 1px solid rgba(212, 174, 98, 0.28);
  }
  .profession-registers {
    grid-template-columns: minmax(0, 1fr);
  }
  .profession-portraits {
    gap: 0.45rem;
  }
  .profession-braid {
    width: 100%;
    height: 0.85rem;
    min-height: 0.85rem;
    transform: rotate(90deg) scaleY(5);
  }
}
@media (max-width: 520px) {
  .exp-keep-level-addon .game-hud-hidden-level {
    --hidden-level-compact-size: 1.2rem;
  }
  .professions-heading {
    align-items: flex-start;
  }
  .professions-heading .professions-seal {
    width: 4.4rem;
    height: 4.4rem;
  }
  .profession-point-totals dt {
    font-size: 0.6rem;
  }
  .profession-effect-ledger > div {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .profession-reset-zone {
    align-items: stretch;
    flex-direction: column;
  }
  .profession-reset-zone > button,
  .profession-reset-payments button {
    width: 100%;
  }
  .profession-reset-payments {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .profession-progress-track > span,
  .profession-entry-heading button,
  .profession-portrait-meta button,
  .profession-portrait-art,
  .profession-reset-zone > button,
  .profession-reset-dialog button {
    transition: none;
  }
}
@media (min-width: 640px) {
  .game-hud {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.5rem 0.75rem;
    padding: 0.45rem 0.85rem 0.3rem;
  }
  .game-hud-identity,
  .game-hud-vitals {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.28rem;
  }
  .game-hud-identity {
    grid-column: 1;
    grid-row: 1;
    align-items: flex-start;
  }
  .game-hud-vitals {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-end;
  }
  .game-hud-name,
  .game-hud-exp,
  .game-hud-purse,
  .game-hud-energy {
    grid-column: auto;
    grid-row: auto;
  }
  .game-hud-name {
    --hud-avatar-size: 5.35rem;
    --hud-name-height: 3.15rem;
    width: max-content;
    max-width: 100%;
  }
  .game-hud-name .name-scroll {
    width: auto;
  }
  .game-hud-exp {
    width: min(17.5rem, 100%);
    justify-self: auto;
  }
  .game-hud-exp .exp-keep-gate {
    display: block;
    margin-top: 0.1rem;
    max-width: 17.5rem;
    font-size: 0.68rem;
  }
  .game-hud-purse {
    width: min(20rem, 100%);
  }
  .game-hud .purse-rail {
    height: 2.55rem;
    padding: 0.22rem 0.8rem;
  }
  .game-hud .purse-coin {
    font-size: 1rem;
  }
  .game-hud .purse-coin-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
  .game-hud-energy,
  .game-hud-energy .energy-meter {
    width: min(17.5rem, 100%);
  }
  .game-hud-energy .energy-keep {
    height: 2.55rem;
    aspect-ratio: auto;
  }
  .game-hud-settings {
    align-self: start;
  }
  .island-chrome {
    top: 8.6rem;
  }
}
@media (min-width: 768px) {
  .island-build-dock {
    right: max(0.55rem, env(safe-area-inset-right));
    bottom: max(2.55rem, calc(env(safe-area-inset-bottom) + 1.4rem));
    width: min(54rem, calc(100% - 1.1rem));
    height: 5.9rem;
  }
  .island-build-strip {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    flex: 1 1 auto;
  }
  .island-utility-link,
  .island-build-btn,
  .island-settings-btn {
    width: 5.9rem;
    height: 5.9rem;
  }
}
@media (min-width: 1024px) {
  .game-hud-name {
    --hud-avatar-size: 5.65rem;
    --hud-name-height: 3.2rem;
    width: max-content;
    max-width: 100%;
  }
}
@media (min-width: 1440px) {
  .game-hud {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.3rem 1rem 0.2rem;
  }
  .game-hud-identity,
  .game-hud-vitals {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
  }
  .game-hud-vitals {
    justify-self: end;
  }
  .game-hud-name {
    --hud-avatar-size: 6rem;
    --hud-name-height: 3.3rem;
    width: max-content;
    max-width: 100%;
  }
  .game-hud-name .name-scroll {
    width: auto;
  }
  .game-hud-exp {
    width: 17.5rem;
  }
  .game-hud-purse {
    width: clamp(19rem, 23vw, 22.25rem);
  }
  .game-hud .purse-rail {
    height: 2.7rem;
    padding: 0.24rem 0.9rem;
  }
  .game-hud-energy,
  .game-hud-energy .energy-meter {
    width: 17.5rem;
  }
  .island-chrome {
    top: 5.9rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .island-utility-link,
  .island-route-panel,
  .store-slide-track {
    animation: none;
    transition: none;
  }
}
@media (max-width: 639px) {
  .store-window-art {
    object-position: center 18%;
  }
  .store-window-body {
    padding: 2.85rem 0.7rem 0.85rem;
  }
  .store-window-title {
    font-size: 1.85rem;
  }
  .store-window-panel {
    width: 100%;
  }
  .store-window-items {
    min-height: 8.5rem;
  }
  .store-tabs {
    gap: 0.25rem;
    overflow: visible;
    padding: 0;
  }
  .store-tab {
    min-width: 0;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.35rem;
    font-size: 0.68rem;
  }
  .store-slide {
    --store-slide-page: 1;
    --store-slide-rows: 2;
  }
  .store-slide-arrow {
    width: 2.2rem;
    height: 2.2rem;
  }
  .store-slide-card {
    display: grid;
    height: 100%;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    grid-template-rows: repeat(3, auto);
    align-content: center;
    align-items: center;
    gap: 0 0.35rem;
    text-align: left;
  }
  .store-slide-item-card,
  .store-slide-pet-mark {
    width: 3rem;
    height: 3rem;
    grid-column: 1;
    grid-row: 1 / 4;
  }
  .store-slide-pet-mark {
    font-size: 1.15rem;
  }
  .store-slide-name {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.74rem;
  }
  .store-slide-meta {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.82rem;
  }
  .store-slide-price {
    grid-column: 2;
    grid-row: 3;
    font-size: 0.88rem;
  }
  .store-slide-card > span:last-child {
    grid-column: 3;
    grid-row: 1 / 4;
  }
  .store-slide-buy {
    padding: 0.34rem 0.58rem;
    font-size: 0.72rem;
  }
  .island-route-overlay {
    padding: 0.15rem 0.35rem 0.45rem;
  }
  .island-route-panel,
  .island-route-panel[data-size="compact"],
  .island-route-panel[data-size="medium"],
  .island-route-panel[data-size="wide"],
  .island-route-panel[data-size="arena"] {
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 0.65rem;
  }
  .island-route-panel-bar {
    min-height: 2.75rem;
    padding-left: 0.85rem;
  }
  .island-route-panel-body {
    padding: 0.75rem;
  }
  .island-route-panel[data-panel="character"] .island-route-panel-body {
    padding: 0;
  }
  .character-window {
    min-height: min(88vh, 36rem);
  }
  .character-window-body {
    padding: 3.45rem 0.45rem 0.9rem;
  }
  .character-window .hero-keep-exp,
  .island-route-panel[data-panel="character"] .hero-keep-exp {
    top: 0.55rem;
    width: min(18.5rem, calc(100% - 4.4rem));
    transform: translateX(-50%);
  }
  .character-window .exp-keep {
    height: 2.3rem;
  }
  .character-window .exp-keep-level-cluster {
    width: 2.3rem;
    height: 2.3rem;
  }
  .character-window .exp-keep-level {
    font-size: 1.05rem;
  }
  .character-window .exp-keep-trough {
    top: 0.42rem;
    bottom: 0.42rem;
    left: 2.45rem;
  }
  .island-route-panel[data-panel="patrol"] {
    aspect-ratio: auto;
  }
  .island-route-panel[data-panel="mine"] {
    aspect-ratio: auto;
  }
  .mine-window-hud {
    top: auto;
    bottom: 0.85rem;
    transform: translateX(-50%);
    width: min(calc(100% - 1.2rem), 22.5rem);
    padding: 0.7rem 0.75rem 0.78rem;
  }
  .mine-window-title {
    font-size: 1.35rem;
  }
  .mine-window-percent {
    font-size: 2.35rem;
  }
  .mine-window-gem {
    width: 2.8rem;
    height: 2.8rem;
  }
  .island-route-panel[data-panel="trade-route"] {
    aspect-ratio: auto;
  }
  .island-route-panel[data-panel="trade-route"] .island-route-panel-body {
    padding: 0;
  }
  .trade-route-window-body {
    padding: 2.85rem 0.7rem 0.85rem;
  }
  .trade-route-window-title {
    font-size: 1.85rem;
  }
  .island-route-panel[data-panel="territory"] {
    width: 100%;
    height: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    min-height: 0;
  }
  .island-route-panel[data-panel="territory"] .island-route-panel-body {
    padding: 0;
  }
  .territory-window {
    min-height: 0;
  }
  .territory-window-body {
    padding: 2.85rem 0.7rem 0.85rem;
  }
  .territory-window-title {
    font-size: 1.85rem;
  }
  .territory-window-title::before,
  .territory-window-title::after,
  .territory-workshop-title::before,
  .territory-workshop-title::after,
  .post-title::before,
  .post-title::after {
    width: 2.6rem;
    flex-basis: 2.6rem;
  }
  .trade-route-window-shop {
    gap: 0.7rem;
  }
  .trade-route-card {
    padding: 0.5rem 0.5rem 0.55rem;
  }
  .trade-route-card-img,
  .trade-route-card-fallback {
    height: min(100%, 7.5rem);
  }
  .trade-route-card-title {
    font-size: 14px;
  }
  .island-route-panel[data-panel="hall"],
  .island-route-panel[data-panel="post"],
  .island-route-panel[data-panel="forge"],
  .island-route-panel[data-panel="store"] {
    height: min(88vh, 36rem);
    min-height: 0;
  }
  .island-route-panel[data-panel="port"] {
    height: 100%;
    min-height: 0;
  }
  .island-route-panel[data-panel="hall"] .island-route-panel-body,
  .island-route-panel[data-panel="post"] .island-route-panel-body,
  .island-route-panel[data-panel="port"] .island-route-panel-body,
  .island-route-panel[data-panel="forge"] .island-route-panel-body,
  .island-route-panel[data-panel="store"] .island-route-panel-body {
    padding: 0;
  }
  .hall-window,
  .post-window,
  .port-window,
  .forge-window,
  .store-window {
    height: 100%;
    min-height: 0;
  }
  .island-route-panel[data-panel="battlefield"] .island-route-panel-body {
    padding: 0;
  }
  .battlefield-window {
    min-height: min(88vh, 36rem);
  }
  .battlefield-window-body {
    padding: 2.85rem 0.7rem 0.85rem;
  }
  .battlefield-window-title {
    font-size: 1.85rem;
  }
  .battlefield-window.is-fight .battlefield-window-body {
    padding: 0.45rem;
  }
  .island-route-panel[data-panel="leaderboard"] {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .island-route-panel[data-panel="leaderboard"] .island-route-panel-body {
    padding: 0;
  }
  .leaderboard-window {
    height: 100%;
    min-height: 0;
  }
  .leaderboard-window-body {
    padding: 2.85rem 0.7rem 0.85rem;
  }
  .leaderboard-window-title {
    font-size: 1.85rem;
  }
  .leaderboard-tabs {
    width: 100%;
  }
  .leaderboard-tabs button {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 0.35rem;
    font-size: 0.72rem;
  }
  .leaderboard-pages button {
    min-width: 2.2rem;
    padding-inline: 0.45rem;
    font-size: 0.72rem;
  }
  .leaderboard-window-panel {
    width: 100%;
  }
  .island-route-panel[data-panel="dungeon"] {
    min-height: min(88vh, 36rem);
  }
  .island-route-panel[data-panel="dungeon"] .island-route-panel-body {
    padding: 0;
  }
  .dungeon-screen {
    min-height: min(88vh, 36rem);
  }
  .hall-window-body,
  .post-window-body,
  .port-window-body,
  .store-window-body {
    padding: 2.85rem 0.7rem 0.85rem;
  }
  .hall-window-title,
  .port-window-title,
  .store-window-title {
    font-size: 1.85rem;
  }
  .hall-clan-tabs button {
    padding-inline: 0.25rem;
    font-size: 0.7rem;
  }
  .hall-clan-leaderboard-list {
    max-height: min(48vh, 22rem);
    scrollbar-gutter: auto;
  }
  .hall-clan-leaderboard .clan-leaderboard-row {
    grid-template-columns: 1.55rem minmax(0, 1fr) auto;
    gap: 0.35rem;
  }
  .hall-clan-leaderboard .leaderboard-who {
    gap: 0.4rem;
  }
  .hall-clan-leaderboard .leaderboard-rank {
    font-size: 1rem;
  }
  .hall-clan-leaderboard .leaderboard-score-main {
    font-size: 13px;
  }
  .hall-clan-leaderboard .leaderboard-score-sub,
  .hall-clan-leaderboard .leaderboard-meta {
    font-size: 11px;
  }
  .clan-leaderboard-current {
    margin-left: 0.25rem;
    padding-inline: 0.25rem;
    font-size: 9px;
  }
  .hall-clan-leaderboard-pages {
    gap: 0.3rem;
  }
  .hall-clan-leaderboard-pages button {
    padding-inline: 0.35rem;
    font-size: 11px;
  }
  .patrol-window-title {
    top: 0.7rem;
    font-size: 1.2rem;
  }
  .patrol-window-hud {
    right: 0.55rem;
    bottom: 0.55rem;
    max-width: calc(100% - 1rem);
    padding: 0.55rem 0.6rem;
  }
  .patrol-window-rewards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.15rem 0.75rem;
  }
  .patrol-window-ring {
    height: 10rem;
    width: 10rem;
  }
}
@media (max-width: 479px) {
  .keep-parchment[data-location="character"] .game-body {
    flex-direction: column;
  }
  .keep-parchment[data-location="character"] .game-nav {
    width: 100%;
    flex-direction: row;
    align-self: stretch;
    gap: 0.25rem;
    overflow-x: auto;
    padding: 0.05rem 0.5rem 0.25rem;
  }
  .keep-parchment[data-location="character"] .game-nav-tab {
    width: auto;
    min-width: 6.5rem;
    height: 2.1rem;
    padding: 0.05rem 0.65rem 0.15rem;
    font-size: 11px;
  }
  .keep-parchment[data-location="character"] main {
    padding-inline: 0.5rem;
  }
  .portrait-jewel {
    width: 11.5rem;
  }
  .hero-keep-row {
    gap: 0.2rem;
  }
  .hero-keep-slots {
    gap: 0.25rem;
  }
  .hero-slot {
    height: 3.2rem;
    width: 3.2rem;
  }
  .island-corner-btns,
  .island-utility-nav {
    gap: 0;
  }
  .island-utility-link,
  .island-build-btn,
  .island-settings-btn {
    width: clamp(3rem, 18vw, 3.55rem);
    height: clamp(3rem, 18vw, 3.55rem);
  }
  .game-hud-name {
    width: max-content;
    max-width: 100%;
  }
}
@media (max-width: 359px) {
  .game-hud-name {
    --hud-avatar-size: 4rem;
    --hud-name-height: 2.6rem;
    width: max-content;
    max-width: 100%;
  }
}
[data-island-3d-controls] .island-chrome,
[data-island-3d-controls] .island-build-dock,
[data-island-3d-controls] .island-site-card {
  opacity: 1;
  visibility: visible;
  transition: none;
}
@media (max-height: 520px) and (orientation: landscape) {
  [data-island-camera-controls="true"] {
    top: 10.5rem !important;
  }
  [data-island-3d-controls][data-placement="true"]
    [data-island-camera-controls="true"] {
    display: none;
  }
  [data-island-placement-prompt="true"] {
    top: 10.5rem !important;
  }
  [data-island-recovery-plate="true"] {
    top: 14rem !important;
  }
  [data-island-3d-controls] .island-chrome {
    top: 4.6rem;
    right: max(0.35rem, env(safe-area-inset-right));
  }
  [data-island-3d-controls] .island-hint,
  [data-island-hotspot="true"] > span:last-child {
    display: none;
  }
  [data-island-3d-controls] .island-site-card {
    bottom: 4.35rem;
    max-height: calc(100% - 8.8rem);
    overflow: auto;
  }
  [data-island-3d-controls] .island-build-dock {
    bottom: max(0.35rem, env(safe-area-inset-bottom));
    height: 3.8rem;
  }
  [data-island-3d-controls] .island-utility-link,
  [data-island-3d-controls] .island-build-btn,
  [data-island-3d-controls] .island-settings-btn {
    width: 3.8rem;
    height: 3.8rem;
  }
  [data-island-3d-controls] .island-build-strip {
    height: 3.8rem;
    border-width: 0.42rem 0.9rem 0.45rem;
    border-image-width: 0.42rem 0.9rem 0.45rem;
  }
  [data-island-3d-controls] .island-build-card {
    min-width: 4.35rem;
    padding-block: 0;
  }
  [data-island-3d-controls] .island-build-card-art {
    width: 1.25rem;
    height: 1.25rem;
  }
  [data-island-3d-controls] .island-build-card-name {
    font-size: 11px;
  }
  [data-island-3d-controls] .island-build-card-meta {
    font-size: 9px;
  }
}
.territory-window {
  --territory-gold: #e2c477;
  container-type: inline-size;
  container-name: territory-window;
  position: relative;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  color: #f3e2b0;
}
.territory-window-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.territory-window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 7, 16, 0.28) 0%, transparent 22%),
    radial-gradient(
      ellipse 82% 74% at 50% 58%,
      rgba(6, 5, 12, 0) 0%,
      rgba(6, 5, 12, 0.22) 100%
    );
}
.territory-window-body {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: 0.45rem;
  overflow: hidden;
  padding: 2.85rem 0.85rem 0.7rem;
}
.territory-window-heading {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
}
.territory-window-heading:not(:has(.territory-window-lead))::after {
  content: "";
  width: min(16.5rem, 48%);
  height: 0.7rem;
  background: linear-gradient(90deg, transparent, #d4ae62 18%, #fff1c4 50%, #d4ae62 82%, transparent)
      center / 100% 1px no-repeat,
    radial-gradient(circle, #fff6d0 0 1.5px, #d4ae62 1.6px 2.8px, transparent 3px)
      center / 0.7rem 0.7rem no-repeat;
}
.territory-window-title {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: clamp(1.55rem, 4.4cqi, 2.15rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.territory-window-title,
.territory-workshop-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}
.territory-window-title::before,
.territory-window-title::after,
.territory-workshop-title::before,
.territory-workshop-title::after {
  content: "";
  flex: 0 1 6.2rem;
  width: min(6.2rem, 16cqi);
  height: 0.85rem;
  pointer-events: none;
  background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(226, 196, 119, 0.18) 10%,
        #d4ae62 48%,
        #fff1c4 74%,
        #e8c878 90%,
        transparent 100%
      )
      left center / 100% 1.5px no-repeat,
    radial-gradient(circle at 88% 50%, #fff8dc 0 1.55px, #d4ae62 1.65px 3.1px, transparent 3.3px);
  opacity: 0.94;
}
.territory-window-title::after,
.territory-workshop-title::after {
  transform: scaleX(-1);
}
.keep-parchment .island-route-panel[data-panel="territory"] .territory-window-title,
.keep-parchment .island-route-panel[data-panel="territory"] .territory-window-lead {
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.territory-window-lead {
  flex: 0 0 auto;
  margin: 0 auto;
  max-width: 32rem;
  text-align: center;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.35;
  color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.territory-window-panel {
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: minmax(14rem, 16.75rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0.4rem 0.7rem;
  overflow: hidden;
  padding: 0.45rem 0.55rem 0.5rem;
  container-type: size;
}
.territory-window-panel.parchment {
  color: #f3e2b0;
  background-color: rgba(14, 8, 4, 0.28);
  background-image: none;
  border: 1px solid rgba(232, 206, 130, 0.78);
  border-radius: 0.62rem;
  box-shadow: 0 10px 22px rgba(8, 4, 2, 0.28),
    inset 0 0 0 1px rgba(243, 226, 176, 0.18);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --text-disabled: #b89a70;
  --ink-parchment: #f3e2b0;
  --bg-app: rgba(10, 6, 4, 0.28);
  --bg-panel: rgba(22, 12, 7, 0.18);
  --bg-panel-raised: rgba(28, 16, 8, 0.28);
  --bg-wood: rgba(20, 24, 40, 0.72);
  --wood-text: #fff6dc;
  --border: rgba(212, 174, 98, 0.38);
  --border-strong: rgba(212, 174, 98, 0.55);
}
.territory-window-rail {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 0.45rem;
  overflow: auto;
  border-right: 1px solid rgba(212, 174, 98, 0.28);
  padding-right: 0.55rem;
}
.territory-window-rail .territory-window-header-marks,
.territory-window-rail .territory-standing {
  width: 100%;
  flex: 0 0 auto;
}
.territory-window-rail .territory-standing-stat {
  width: 100%;
  min-width: 0;
}
.territory-window-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 0.4rem;
}
.territory-window-toolbar {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem 0.75rem;
}
.territory-window-header-marks {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.territory-window-toolbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.65rem;
}
.territory-window-toolbar .territory-enter-battle {
  margin-top: 0;
}
.territory-standing {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}
.territory-standing-stat {
  display: grid;
  min-width: 7.2rem;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(232, 198, 118, 0.62);
  border-radius: 0.5rem;
  background: linear-gradient(180deg, rgba(78, 48, 18, 0.55) 0%, rgba(22, 12, 7, 0.52) 100%);
  padding: 0.42rem 0.6rem;
  box-shadow: inset 0 1px 0 rgba(255, 232, 176, 0.22),
    0 4px 10px rgba(8, 4, 2, 0.28);
}
.territory-standing-stat dt {
  display: inline-flex;
  max-width: 5.4rem;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
}
.territory-standing-stat dt::before {
  content: "";
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  flex-shrink: 0;
  transform: rotate(45deg);
  background: linear-gradient(180deg, #fff1c4, #d4ae62);
  box-shadow: 0 0 5px rgba(232, 198, 118, 0.55);
  vertical-align: 0.05em;
}
.territory-standing-stat[data-territory-standing="valor"] dt {
  max-width: none;
}
.territory-standing-stat[data-territory-standing="valor"] dt::before {
  content: none;
  display: none;
}
.territory-valor-icon {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(40, 20, 6, 0.45));
}
.territory-recipe-card__owned .territory-valor-icon,
.territory-battle-contribution-stat .territory-valor-icon {
  width: 0.9rem;
  height: 0.9rem;
}
.territory-shop-card__buy .territory-valor-icon {
  width: 1.05rem;
  height: 1.05rem;
}
.territory-standing-stat dd {
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1;
  color: #ffe9b0;
  text-shadow: 0 0 10px rgba(232, 198, 118, 0.42);
}
.territory-workshop-trigger,
.territory-roles-trigger {
  display: inline-flex;
  min-width: 8.25rem;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232, 206, 130, 0.62);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(20, 24, 40, 0.58) 0%, rgba(8, 10, 20, 0.82) 100%);
  padding: 0.62rem 1rem 0.55rem;
  box-shadow: 0 2px 8px rgba(4, 6, 14, 0.35),
    inset 0 1px 0 rgba(243, 226, 176, 0.18);
  color: #fff6dc;
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(4, 6, 14, 0.88);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
  backdrop-filter: blur(6px) saturate(1.08);
  cursor: pointer;
  transition: background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out);
}
.territory-workshop-trigger:hover,
.territory-roles-trigger:hover {
  color: #fffbeb;
  border-color: rgba(243, 226, 176, 0.92);
  background: linear-gradient(180deg, rgba(42, 32, 68, 0.55) 0%, rgba(10, 14, 28, 0.86) 100%);
  filter: none;
}
.territory-workshop-trigger:active,
.territory-roles-trigger:active {
  transform: translateY(1px);
}
.territory-workshop-trigger:focus-visible,
.territory-roles-trigger:focus-visible,
.territory-workshop-sheet :where(button, select, input):focus-visible {
  outline: 2px solid #ffe09a;
  outline-offset: 2px;
}
.territory-workshop-trigger__label,
.territory-roles-trigger__label {
  font-size: inherit;
  letter-spacing: inherit;
  line-height: 1;
  text-transform: inherit;
}
.territory-workshop-backdrop {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(18, 10, 6, 0.72);
  padding: 0.55rem;
  backdrop-filter: blur(5px);
}
.territory-workshop-sheet {
  container-type: inline-size;
  container-name: territory-workshop;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(236, 208, 132, 0.82);
  border-radius: 0.78rem;
  background-color: #1a120c;
  background-image: none;
  color: #f3e2b0;
  box-shadow: 0 0 0 1px rgba(62, 36, 12, 0.92),
    0 0 0 3px rgba(196, 150, 62, 0.48),
    0 0 0 6px rgba(28, 16, 8, 0.88),
    0 1.2rem 3.5rem rgba(8, 4, 2, 0.62),
    inset 0 0 0 1px rgba(255, 232, 176, 0.14);
}
.territory-workshop-sheet::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0.52rem;
  z-index: 5;
  border: 1px solid rgba(232, 198, 118, 0.34);
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 1px rgba(24, 12, 6, 0.28);
  background: linear-gradient(#e8c878, #e8c878) top left / 1.15rem 2px no-repeat,
    linear-gradient(#e8c878, #e8c878) top left / 2px 1.15rem no-repeat,
    linear-gradient(#e8c878, #e8c878) top right / 1.15rem 2px no-repeat,
    linear-gradient(#e8c878, #e8c878) top right / 2px 1.15rem no-repeat,
    linear-gradient(#e8c878, #e8c878) bottom left / 1.15rem 2px no-repeat,
    linear-gradient(#e8c878, #e8c878) bottom left / 2px 1.15rem no-repeat,
    linear-gradient(#e8c878, #e8c878) bottom right / 1.15rem 2px no-repeat,
    linear-gradient(#e8c878, #e8c878) bottom right / 2px 1.15rem no-repeat;
}
.territory-workshop-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.territory-workshop-sheet::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 7, 16, 0.28) 0%, transparent 22%),
    radial-gradient(
      ellipse 82% 74% at 50% 58%,
      rgba(6, 5, 12, 0) 0%,
      rgba(6, 5, 12, 0.22) 100%
    );
}
.territory-workshop-header {
  display: flex;
  flex: 0 0 auto;
  min-height: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(212, 174, 98, 0.38);
  padding: 0 0 0.45rem;
  background: none;
}
.territory-workshop-title {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: clamp(1.45rem, 4.2cqi, 2.05rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e2b0;
  text-shadow: 0 1px 0 #4a3010,
    0 2px 3px rgba(30, 16, 6, 0.75),
    0 0 18px rgba(20, 12, 6, 0.45);
}
.territory-workshop-lead {
  flex: 0 0 auto;
  margin: 0 auto;
  max-width: 36rem;
  text-align: center;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.35;
  color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.territory-workshop-eyebrow,
.territory-workshop-kicker {
  color: #e2c477 !important;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}
.territory-workshop-close {
  position: absolute;
  z-index: 6;
  top: 0.62rem;
  right: 0.62rem;
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  border: 1px solid rgba(242, 214, 140, 0.88);
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, rgba(255, 244, 210, 0.38), transparent 54%),
    linear-gradient(180deg, #6a4520 0%, #2c170a 100%);
  box-shadow: 0 0 0 2px rgba(24, 12, 6, 0.82),
    0 0 0 3px rgba(212, 174, 98, 0.55),
    inset 0 1px 0 rgba(255, 236, 190, 0.42),
    0 4px 10px rgba(8, 4, 2, 0.45);
  padding: 0;
  color: #f3e2b0;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  filter: none;
}
.territory-workshop-close:hover {
  color: #fff8dc;
  filter: brightness(1.12);
}
.territory-workshop-close:focus-visible {
  outline: 2px solid #ffe09a;
  outline-offset: 2px;
}
.territory-workshop-close:active {
  transform: none;
}
.territory-workshop-close:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.territory-wallet {
  margin: 0.85rem 1rem 0;
  border: 1px solid rgba(237, 210, 150, 0.42);
  border-radius: 0.55rem;
  background: rgba(4, 8, 10, 0.3);
  padding: 0.82rem;
}
.territory-workshop-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}
.territory-workshop-section-heading h3 {
  margin-top: 0.16rem;
  color: #fff1ce;
  font-size: 1.06rem;
  line-height: 1.1;
}
.territory-wallet__reset,
.territory-recipes-panel__season {
  color: #cfbea0 !important;
  font-size: 0.7rem;
  line-height: 1.2;
  text-align: right;
}
.territory-wallet__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.68rem;
}
.territory-wallet__material {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.42rem;
  min-width: 0;
  border: 1px solid rgba(233, 206, 147, 0.27);
  border-radius: 0.38rem;
  background: rgba(7, 9, 10, 0.46);
  padding: 0.48rem 0.58rem;
}
.territory-wallet__material dt {
  overflow: hidden;
  color: #dfd0b3 !important;
  font-size: 0.72rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.territory-wallet__material dd {
  color: #ffe09a !important;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1;
}
.territory-workshop-body {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: 0.4rem;
  overflow: hidden;
  padding: 2.15rem 0.85rem 0.65rem;
}
.territory-workshop-panel {
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.45rem;
  overflow: hidden;
  padding: 0.5rem 0.7rem 0.55rem;
}
.territory-workshop-panel.parchment {
  color: #f3e2b0;
  background-color: rgba(14, 8, 4, 0.28);
  background-image: none;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
  --text-disabled: #b89a70;
  --ink-parchment: #f3e2b0;
  --bg-app: rgba(10, 6, 4, 0.28);
  --bg-panel: rgba(22, 12, 7, 0.18);
  --bg-panel-raised: rgba(28, 16, 8, 0.28);
  --bg-wood: rgba(20, 24, 40, 0.72);
  --wood-text: #fff6dc;
  --border: rgba(212, 174, 98, 0.38);
  --border-strong: rgba(212, 174, 98, 0.55);
}
.territory-harvest-panel,
.territory-recipes-panel {
  min-width: 0;
  border: 1px solid rgba(237, 210, 150, 0.36);
  border-radius: 0.55rem;
  background: rgba(4, 8, 10, 0.3);
  padding: 0.82rem;
}
.territory-harvest-panel__charges {
  flex: 0 0 auto;
  border: 1px solid rgba(231, 196, 116, 0.46);
  border-radius: 2rem;
  background: rgba(104, 67, 25, 0.38);
  padding: 0.28rem 0.52rem;
  color: #ffe2a0 !important;
  font-size: 0.66rem;
  line-height: 1;
}
.territory-harvest-panel__note,
.territory-workshop-empty {
  margin-top: 0.45rem;
  color: #cdbb9a !important;
  font-size: 0.7rem;
  line-height: 1.35;
}
.territory-harvest-all {
  width: 100%;
  margin-top: 0.65rem;
}
.territory-harvest-list {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.65rem;
}
.territory-harvest-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.52rem;
  border: 1px solid rgba(234, 209, 158, 0.26);
  border-radius: 0.4rem;
  background: rgba(7, 10, 12, 0.48);
  padding: 0.48rem;
}
.territory-harvest-card__copy {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 0.12rem;
}
.territory-harvest-card__copy strong {
  overflow: hidden;
  font-size: 0.75rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.territory-harvest-card__copy small {
  color: #cdbb9b !important;
  font-size: 0.66rem;
  line-height: 1;
}
.territory-harvest-card__action {
  min-height: 2.25rem;
  flex: 0 0 auto;
  padding: 0.34rem 0.56rem;
  font-size: 0.68rem;
}
.territory-recipe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
  margin-top: 0.65rem;
}
.territory-recipe-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid rgba(236, 210, 156, 0.3);
  border-radius: 0.44rem;
  background: rgba(7, 10, 12, 0.48);
  padding: 0.68rem;
}
.territory-recipe-card__heading {
  display: flex;
  min-height: 1.3rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
}
.territory-recipe-card__heading h4 {
  color: #fff0ca;
  font-size: 0.92rem;
  line-height: 1.1;
}
.territory-recipe-card__owned {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid rgba(130, 201, 145, 0.52);
  border-radius: 2rem;
  background: rgba(42, 100, 58, 0.36);
  padding: 0.18rem 0.42rem;
  color: #c9f2ce !important;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}
.territory-recipe-costs {
  display: flex;
  min-height: 2.05rem;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.25rem;
  margin-top: 0.45rem;
}
.territory-recipe-costs li {
  border: 1px solid rgba(236, 207, 143, 0.24);
  border-radius: 0.26rem;
  background: rgba(109, 73, 30, 0.22);
  padding: 0.2rem 0.34rem;
  color: #e6d5b5;
  font-size: 0.62rem;
  line-height: 1;
}
.territory-recipe-card__variant {
  display: grid;
  gap: 0.22rem;
  margin-top: 0.48rem;
}
.territory-recipe-card__variant > span {
  color: #cdbb9a !important;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.territory-recipe-card__variant select {
  width: 100%;
  min-height: 2.25rem;
  border: 1px solid rgba(233, 207, 151, 0.5);
  border-radius: 0.34rem;
  background: #1c1a16;
  padding: 0.39rem 0.45rem;
  color: #f8edcf;
  font-size: 0.72rem;
}
.territory-doctrine-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}
.territory-doctrine-progress span {
  color: #d8c7a7 !important;
  font-size: 0.62rem;
}
.territory-recipe-card__action {
  width: 100%;
  min-height: 2.25rem;
  margin-top: auto;
  padding: 0.42rem 0.55rem;
  font-size: 0.72rem;
}
.territory-workshop-feedback {
  min-height: 2.2rem;
  padding: 0.3rem 1rem 0.8rem;
}
.territory-workshop-error,
.territory-workshop-success,
.territory-workshop-busy {
  border-radius: 0.36rem;
  padding: 0.42rem 0.58rem;
  font-size: 0.72rem;
  line-height: 1.3;
}
.territory-workshop-error {
  border: 1px solid rgba(241, 112, 93, 0.55);
  background: rgba(105, 24, 19, 0.5);
  color: #ffd0c8 !important;
}
.territory-workshop-success {
  border: 1px solid rgba(126, 205, 144, 0.48);
  background: rgba(31, 90, 47, 0.44);
  color: #d8f6dd !important;
}
.territory-workshop-busy {
  color: #ead8b4 !important;
}
.territory-craft-confirmation-backdrop {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(2, 4, 5, 0.76);
  padding: 1rem;
  backdrop-filter: blur(4px);
}
.territory-craft-confirmation {
  width: min(28rem, 100%);
  border: 1px solid rgba(244, 217, 159, 0.86);
  border-radius: 0.6rem;
  background: rgba(24, 20, 15, 0.97);
  padding: 1rem;
  box-shadow: inset 0 0 0 2px rgba(91, 58, 26, 0.62),
    0 1rem 3rem rgba(0, 0, 0, 0.62);
}
.territory-craft-confirmation h3 {
  margin-top: 0.24rem;
  color: #fff1cf;
  font-size: 1.22rem;
  line-height: 1.15;
}
.territory-craft-confirmation__copy {
  margin-top: 0.62rem;
  color: #d5c4a5 !important;
  font-size: 0.74rem;
  line-height: 1.4;
}
.territory-craft-confirmation__costs {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.7rem;
}
.territory-craft-confirmation__costs li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(234, 208, 153, 0.22);
  padding: 0.28rem 0.12rem 0.38rem;
  color: #eadabe;
  font-size: 0.78rem;
}
.territory-craft-confirmation__costs strong {
  color: #ffbd9f !important;
}
.territory-craft-confirmation__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.95rem;
}
.territory-section-heading {
  margin: 0;
  border-bottom: 1px solid rgba(212, 174, 98, 0.28);
  padding-bottom: 0.32rem;
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.territory-map-section {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}
.territory-map-section .territory-section-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.territory-world-map-scroll {
  display: grid;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  place-items: center;
  container-type: size;
  container-name: territory-map-frame;
}
.territory-world-map {
  container-type: inline-size;
  container-name: territory-map;
  width: min(100cqw, calc(100cqh * 43 / 24));
  height: min(100cqh, calc(100cqw * 24 / 43));
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 43 / 24;
  isolation: isolate;
  border: 1px solid rgba(240, 211, 145, 0.78);
  border-radius: 0.72rem;
  background: #182027;
  box-shadow: 0 0.8rem 2rem rgba(16, 9, 4, 0.34),
    0 0 0 1px rgba(240, 211, 145, 0.28),
    0 0 22px rgba(212, 174, 98, 0.16),
    inset 0 0 0 1px rgba(28, 17, 7, 0.42);
}
.territory-world-map__art {
  z-index: 0;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.territory-world-map__zones {
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.territory-zone-card {
  position: absolute;
  display: flex;
  align-items: center;
  width: clamp(5.6rem, 17.5cqi, 9.25rem);
  min-height: clamp(2.55rem, 8.4cqi, 3.7rem);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(239, 220, 176, 0.75);
  border-radius: 0.48rem;
  background: rgba(8, 12, 15, 0.64);
  padding: 0.28rem clamp(1.35rem, 4.2cqi, 2.55rem) 0.28rem 0.38rem;
  box-shadow: 0 0.28rem 0.8rem rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2.5px) saturate(0.86);
  text-align: left;
}
.territory-zone-card[data-owner="FURY"] {
  border-color: rgba(255, 132, 92, 0.84);
  box-shadow: 0 0.28rem 0.8rem rgba(65, 13, 4, 0.5);
}
.territory-zone-card[data-owner="LIGHTS"] {
  border-color: rgba(244, 225, 157, 0.88);
  box-shadow: 0 0.28rem 0.8rem rgba(53, 45, 13, 0.46);
}
.territory-zone-card--capital {
  width: clamp(6.1rem, 19cqi, 10.25rem);
  min-height: clamp(2.8rem, 9.2cqi, 4.4rem);
  border-width: 2px;
  background: rgba(6, 10, 13, 0.66);
  padding-right: clamp(1.55rem, 4.6cqi, 2.85rem);
}
.territory-zone-card__copy {
  min-width: 0;
  flex: 1;
}
.territory-zone-card__flag {
  position: absolute;
  top: 50%;
  right: 0.12rem;
  width: clamp(1.15rem, 3.6cqi, 1.95rem);
  height: clamp(2rem, 6.2cqi, 3.42rem);
  transform: translateY(-50%);
  object-fit: contain;
  filter: drop-shadow(0 0.15rem 0.22rem rgba(0, 0, 0, 0.68));
}
.territory-zone-card--capital .territory-zone-card__flag {
  right: 0.14rem;
  width: clamp(1.3rem, 4cqi, 2.2rem);
  height: clamp(2.25rem, 7cqi, 3.85rem);
}
.territory-zone-card__title {
  overflow: hidden;
  font-size: clamp(0.52rem, 1.65cqi, 0.76rem);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.territory-zone-card--capital .territory-zone-card__title {
  font-size: clamp(0.56rem, 1.8cqi, 0.83rem);
}
.territory-zone-card__detail,
.territory-zone-card__uncollected,
.territory-zone-card__protection,
.territory-zone-card__bonus {
  margin-top: 0.1rem;
  font-size: clamp(0.46rem, 1.35cqi, 0.62rem);
  line-height: 1.15;
}
.territory-zone-card__uncollected {
  color: #f3e2b0;
}
.territory-zone-card .territory-siege-action {
  display: block;
  margin-top: 0.16rem;
}
.territory-zone-card .territory-enter-battle {
  width: 100%;
  min-height: clamp(1.55rem, 5.6cqi, 2.1rem);
  margin-top: 0;
  padding: 0.12rem 0.32rem;
  font-size: clamp(0.55rem, 1.9cqi, 0.78rem);
}
.territory-zone-card__protection {
  color: #ffe0a6;
}
.territory-command-surface {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  padding: 0;
}
.territory-command-section {
  min-width: 0;
  padding: 0.35rem 0.15rem 0.55rem;
}
.territory-command-section--fronts {
  border-top: 0;
  border-left: 0;
  margin-top: 0;
  padding-top: 0.35rem;
}
.territory-loadout-fieldset {
  margin: 0.55rem 0 0;
  min-width: 0;
  border: 0;
  padding: 0;
}
.territory-loadout-legend,
.territory-loadout-count {
  color: #f3e2b0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.territory-loadout-count {
  margin: 0.28rem 0 0;
  color: rgba(243, 226, 176, 0.78);
  text-transform: none;
  letter-spacing: 0;
}
.territory-loadout-roles,
.territory-loadout-skills {
  display: grid;
  gap: 0.32rem;
  margin-top: 0.42rem;
}
.territory-loadout-roles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.territory-loadout-option {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-radius: 0.46rem;
  padding: 0;
  color: #f8edd0;
  cursor: pointer;
  background: rgba(10, 6, 4, 0.42);
}
.territory-loadout-option:hover {
  border-color: rgba(237, 201, 111, 0.72);
}
.territory-loadout-option:has(input:checked) {
  border-color: #edc96f;
  box-shadow: 0 0 0 1px rgba(237, 201, 111, 0.85),
    0 0.35rem 1.4rem rgba(212, 174, 98, 0.28);
}
.territory-loadout-option:has(input:focus-visible) {
  outline: 2px solid #ffe09a;
  outline-offset: 2px;
}
.territory-loadout-role {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}
.territory-loadout-role__art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.territory-loadout-role__copy {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.65rem 0.55rem 0.55rem;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(10, 6, 4, 0.78) 58%,
    rgba(10, 6, 4, 0.92) 100%
  );
}
.territory-loadout-option strong,
.territory-loadout-option small {
  display: block;
}
.territory-loadout-option strong {
  color: #fff4d6;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(8, 4, 2, 0.9);
}
.territory-loadout-option small {
  margin-top: 0.18rem;
  color: rgba(243, 226, 176, 0.82);
  font-size: 0.66rem;
  text-shadow: 0 1px 2px rgba(8, 4, 2, 0.85);
}
.territory-command-heading {
  position: relative;
  margin: 0;
  padding-bottom: 0.38rem;
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.territory-command-heading::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(226, 196, 119, 0.88), transparent 92%);
}
.territory-window-list,
.territory-front-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.48rem;
  margin-top: 0.62rem;
}
.territory-window-chip,
.territory-front-card {
  border-color: rgba(212, 174, 98, 0.38);
  background: rgba(22, 12, 7, 0.28);
  box-shadow: none;
}
.territory-window-chip {
  border-radius: 0.36rem;
  padding: 0.42rem 0.58rem;
  font-size: 0.78rem;
}
.territory-front-card {
  position: relative;
  border-radius: 0.55rem;
  padding: 0.56rem 0.62rem 0.56rem 0.7rem;
  background: linear-gradient(180deg, rgba(42, 24, 12, 0.5) 0%, rgba(22, 12, 7, 0.4) 100%);
  box-shadow: inset 3px 0 0 rgba(226, 196, 119, 0.72),
    inset 0 1px 0 rgba(243, 226, 176, 0.1);
}
.territory-front-card:has([data-siege-status="LIVE"]) {
  box-shadow: inset 3px 0 0 #e8c878,
    inset 0 1px 0 rgba(243, 226, 176, 0.12),
    0 0 14px rgba(226, 196, 119, 0.16);
}
.territory-front-card [data-siege-status="LIVE"] {
  color: #ffe9b0;
  letter-spacing: 0.04em;
}
.territory-window-rail .territory-front-card h3 {
  font-size: 0.86rem;
  line-height: 1.15;
}
.territory-window-rail .territory-front-card p {
  font-size: 0.7rem;
  line-height: 1.3;
}
.territory-front-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-top: 0.42rem;
}
.territory-command-empty {
  margin-top: 0.62rem;
  font-size: 0.8rem;
}
.territory-glass-card,
.territory-registration-panel {
  border: 1px solid rgba(212, 174, 98, 0.4);
  background: rgba(28, 16, 8, 0.28);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  backdrop-filter: blur(2px);
}
.territory-map-light-text {
  --text-primary: #f3e2b0;
  --text-secondary: #dcc8a0;
}
.territory-map-light-text,
.territory-map-light-text :where(h1, h2, h3, h4, h5, h6, p, dt, dd, label, legend, small, span, strong, time) {
  color: #f3e2b0;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.territory-registration-panel :where(fieldset label, [role="status"], [data-faction], [data-roster-line], [data-locked-loadout]) {
  border-color: rgba(212, 174, 98, 0.38);
  background: rgba(22, 12, 7, 0.22);
}
.territory-registration-panel [data-faction-slot] {
  background: rgba(10, 6, 4, 0.32);
}
.territory-registration-panel input {
  accent-color: #edc96f;
}
.territory-registration-panel [role="alert"] {
  color: #ffb5a8;
}
.territory-registration-backdrop {
  position: fixed;
  z-index: 130;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(2, 4, 5, 0.72);
  padding: 1rem;
  backdrop-filter: blur(5px);
}
.territory-registration-sheet {
  display: flex;
  width: min(64rem, 100%);
  max-height: calc(100dvh - 2rem);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(244, 217, 159, 0.86);
  border-radius: 0.75rem;
  background: rgba(20, 17, 13, 0.94);
  box-shadow: inset 0 0 0 3px rgba(80, 51, 23, 0.65),
    inset 0 0 2.4rem rgba(194, 148, 70, 0.1),
    0 1.2rem 4rem rgba(0, 0, 0, 0.7);
}
.territory-registration-sheet__header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(238, 216, 167, 0.36);
  padding: 1rem 1.15rem 0.9rem 1.35rem;
}
.territory-registration-sheet__title {
  margin: 0.16rem 0 0;
  color: #fff4d6;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  letter-spacing: 0.025em;
  line-height: 1.1;
}
.territory-registration-sheet__close {
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 2.4rem;
  border: 0;
  background: transparent;
  padding: 0;
  color: #e8d6a0;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.territory-registration-sheet__close:hover {
  color: #fff1c4;
}
.territory-registration-sheet__body {
  display: grid;
  gap: 1rem;
  overflow: auto;
  padding: 1rem 1.2rem 1.25rem;
  scrollbar-color: rgba(231, 203, 139, 0.78) rgba(17, 15, 12, 0.48);
  scrollbar-width: thin;
}
.territory-roles-panel {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}
.territory-roles-panel .territory-command-section--loadout {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 0.1rem 0.1rem 0.2rem;
}
.territory-roles-panel .territory-loadout-fieldset {
  display: flex;
  min-width: 0;
  min-height: 0;
  min-inline-size: 0;
  flex: 1 1 auto;
  flex-direction: column;
  margin-top: 0;
  width: 100%;
}
.territory-roles-panel .territory-loadout-roles {
  min-height: 0;
  flex: 1 1 auto;
  gap: 0.62rem;
  margin-top: 0.48rem;
}
.territory-roles-panel .territory-loadout-option {
  min-height: 0;
  height: 100%;
}
@container territory-workshop (max-width: 44rem) {
  .territory-loadout-roles {
    grid-template-columns: 1fr 1fr;
  }
  .territory-workshop-supply {
    grid-template-columns: minmax(0, 1fr);
  }
  .territory-wallet__grid,
  .territory-harvest-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .territory-recipe-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@container territory-window (max-width: 44rem) {
  .territory-window-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .territory-window-rail {
    max-height: 16rem;
    border-right: 0;
    border-bottom: 1px solid rgba(212, 174, 98, 0.28);
    padding-right: 0;
    padding-bottom: 0.4rem;
  }
}
@media (max-width: 639px) {
  .territory-window-title::before,
  .territory-window-title::after,
  .territory-workshop-title::before,
  .territory-workshop-title::after,
  .post-title::before,
  .post-title::after {
    width: 2.2rem;
    flex-basis: 2.2rem;
  }
  .territory-window-heading:not(:has(.territory-window-lead))::after {
    width: min(11rem, 70%);
  }
  .territory-window-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .territory-window-rail {
    max-height: 14rem;
    border-right: 0;
    border-bottom: 1px solid rgba(212, 174, 98, 0.28);
    padding-right: 0;
    padding-bottom: 0.4rem;
  }
  .territory-roles-panel .territory-loadout-roles {
    grid-template-columns: 1fr 1fr;
  }
  .territory-window-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .territory-window-toolbar-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .territory-window-toolbar .territory-enter-battle {
    width: 100%;
  }
  .territory-standing,
  .territory-window-header-marks {
    width: 100%;
  }
  .territory-workshop-trigger,
  .territory-roles-trigger {
    width: 100%;
  }
  .territory-workshop-backdrop {
    padding: 0.35rem;
  }
  .territory-workshop-sheet {
    width: 100%;
    height: 100%;
    max-height: 100%;
    aspect-ratio: auto;
  }
  .territory-workshop-body {
    padding: 2.15rem 0.7rem 0.55rem;
  }
  .territory-workshop-lead {
    display: none;
  }
  .territory-wallet {
    margin: 0.62rem 0.62rem 0;
    padding: 0.65rem;
  }
  .territory-wallet__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .territory-wallet__material:last-child {
    grid-column: 1 / -1;
  }
  .territory-harvest-panel,
  .territory-recipes-panel {
    padding: 0.65rem;
  }
  .territory-recipe-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .territory-workshop-feedback {
    padding-inline: 0.62rem;
  }
}
.territory-workshop-worktop {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  gap: 0.7rem;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.15rem 0 0;
  background: none;
  scrollbar-color: rgba(231, 203, 139, 0.78) rgba(17, 15, 12, 0.48);
  scrollbar-width: thin;
}
.territory-forge-panel {
  position: relative;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: none;
  padding-top: 0.35rem;
  box-shadow: none;
}
.territory-forge-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem 1.85rem;
  padding: 0.85rem 0.7rem 0.2rem;
  color: #dcc8a0;
  font-size: 0.92rem;
}
.territory-forge-stats p {
  margin: 0;
}
.territory-forge-stats strong {
  color: #f3e2b0;
  font-size: 1.12rem;
}
.territory-forge-formula {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  overflow-x: auto;
  padding: 0.55rem 0.64rem 0.45rem;
  scrollbar-color: rgba(231, 203, 139, 0.78) rgba(17, 15, 12, 0.48);
  scrollbar-width: thin;
}
.territory-forge-formula__ingredients,
.territory-forge-formula__part {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.42rem;
}
.territory-forge-operator {
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(16, 8, 4, 0.8);
}
.territory-forge-operator--equals {
  margin-inline: 0.05rem;
  font-size: 1.85rem;
}
.territory-forge-slot {
  display: grid;
  width: 5.15rem;
  flex: 0 0 5.15rem;
  justify-items: center;
  gap: 0.22rem;
  margin: 0;
  border: 1px solid rgba(212, 174, 98, 0.42);
  border-radius: 0.42rem;
  background: rgba(12, 7, 4, 0.42);
  padding: 0.28rem 0.25rem 0.32rem;
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.08);
}
.territory-forge-slot__image {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
}
.territory-forge-slot__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.14rem 0.12rem rgba(9, 8, 6, 0.56));
}
.territory-forge-slot figcaption {
  display: grid;
  width: 100%;
  gap: 0.08rem;
  text-align: center;
}
.territory-forge-slot figcaption strong {
  color: #f3e2b0;
  font-size: 0.72rem;
  line-height: 1;
}
.territory-forge-slot figcaption strong small {
  color: #dcc8a0;
  font-size: 0.56rem;
}
.territory-forge-slot figcaption span {
  overflow: hidden;
  color: #dcc8a0;
  font-size: 0.54rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.territory-forge-slot--reward {
  width: 6.25rem;
  flex-basis: 6.25rem;
  border-color: rgba(212, 174, 98, 0.62);
}
.territory-forge-slot--reward .territory-forge-slot__image {
  width: 4.65rem;
  height: 4.65rem;
}
.territory-forge-slot--reward figcaption strong {
  white-space: normal;
}
.territory-forge-slot--reward.territory-forge-slot--item {
  width: 4.65rem;
  flex-basis: 4.65rem;
  height: 4.65rem;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.territory-forge-panel__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0.55rem;
  border: none;
  padding: 0.55rem 0.15rem 0.2rem;
  background: none;
}
.territory-forge-panel__controls label {
  min-width: 10rem;
}
.territory-forge-panel__controls label,
.territory-recipe-card__variant {
  display: grid;
  gap: 0.16rem;
}
.territory-forge-panel__controls label > span,
.territory-recipe-card__variant > span {
  color: #dcc8a0 !important;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.territory-forge-panel__controls select,
.territory-recipe-card__variant select {
  width: 100%;
  min-height: 2rem;
  border: 1px solid rgba(212, 174, 98, 0.42);
  border-radius: 0.36rem;
  background: rgba(12, 7, 4, 0.42);
  padding: 0.28rem 0.38rem;
  color: #f3e2b0;
  font-size: 0.68rem;
}
.territory-forge-panel__action {
  min-width: 8.5rem;
  min-height: 2.15rem;
  align-self: end;
}
.territory-workshop-section-heading {
  align-items: center;
}
.territory-workshop-section-heading h3 {
  margin-top: 0.12rem;
  color: #f3e2b0;
  font-size: 0.96rem;
  letter-spacing: 0.1em;
  line-height: 1.05;
  text-transform: uppercase;
}
.territory-workshop-supply {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(11.5rem, 0.7fr) minmax(15rem, 1fr);
  gap: 0.65rem;
}
.territory-recipes-panel,
.territory-wallet,
.territory-harvest-panel,
.territory-shop-panel {
  min-width: 0;
  margin: 0;
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-radius: 0.48rem;
  background: rgba(22, 12, 7, 0.22);
  padding: 0.56rem;
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.08);
}
.territory-recipes-panel__banner {
  margin: 0 0 0.55rem;
  color: #f3e2b0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}
.territory-recipes-panel__season,
.territory-wallet__reset {
  color: #dcc8a0 !important;
  font-size: 0.58rem;
  line-height: 1.15;
  text-align: right;
}
.territory-recipe-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.38rem;
  margin-top: 0;
}
.territory-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  gap: 0.38rem;
  margin-top: 0.46rem;
}
.territory-shop-card {
  display: grid;
  min-width: 0;
  gap: 0.28rem;
}
.territory-shop-card__buy {
  display: inline-flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.28rem 0.36rem;
}
.territory-recipe-card {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  justify-items: center;
  gap: 0.14rem;
  appearance: none;
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-radius: 0.42rem;
  background: rgba(12, 7, 4, 0.42);
  padding: 0.34rem 0.22rem 0.28rem;
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.territory-recipe-card[data-selected="true"] {
  border-color: rgba(232, 184, 90, 0.92);
  box-shadow: inset 0 0 0 1px rgba(243, 226, 176, 0.28),
    0 0 0.45rem rgba(212, 174, 98, 0.35);
}
.territory-recipe-card[data-locked="true"] {
  filter: saturate(0.62);
}
.territory-recipe-card__image {
  display: grid;
  width: 3.55rem;
  height: 3.55rem;
  place-items: center;
}
.territory-recipe-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.12rem 0.13rem rgba(32, 18, 7, 0.52));
}
.territory-recipe-card__heading {
  display: grid;
  min-height: 1.7rem;
  justify-items: center;
  text-align: center;
}
.territory-recipe-card__heading .font-heading {
  overflow: hidden;
  color: #f3e2b0;
  font-size: 0.58rem;
  line-height: 1.1;
  text-overflow: ellipsis;
}
.territory-recipe-card__owned {
  position: absolute;
  top: 0.12rem;
  right: 0.12rem;
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  border: 1px solid rgba(130, 201, 145, 0.52);
  border-radius: 2rem;
  background: rgba(42, 100, 58, 0.36);
  padding: 0.12rem 0.18rem;
  color: #c9f2ce !important;
  font-size: 0.42rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}
.territory-wallet__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.36rem;
  margin-top: 0.46rem;
}
.territory-wallet__material {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 0.12rem;
  border: 1px solid rgba(212, 174, 98, 0.32);
  border-radius: 0.42rem;
  background: rgba(12, 7, 4, 0.42);
  padding: 0.28rem 0.18rem 0.22rem;
  text-align: center;
}
.territory-wallet__material dt {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 0.12rem;
  color: #dcc8a0 !important;
  font-size: 0.5rem;
  line-height: 1.05;
}
.territory-wallet__material dt img {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  object-fit: contain;
  filter: drop-shadow(0 0.1rem 0.09rem rgba(31, 18, 7, 0.48));
}
.territory-wallet__material dt span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.territory-wallet__material dd {
  color: #ffe09a !important;
  font-size: 0.9rem;
  line-height: 1;
}
.territory-harvest-panel__charges {
  border: 1px solid rgba(212, 174, 98, 0.42);
  border-radius: 2rem;
  background: rgba(22, 12, 7, 0.42);
  padding: 0.22rem 0.36rem;
  color: #ffe2a0 !important;
  font-size: 0.56rem;
}
.territory-harvest-panel__note,
.territory-workshop-empty {
  margin-top: 0.28rem;
  color: #dcc8a0 !important;
  font-size: 0.57rem;
  line-height: 1.25;
}
.territory-harvest-all {
  width: 100%;
  min-height: 2.05rem;
  margin-top: 0.42rem;
  font-size: 0.68rem !important;
}
.territory-harvest-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.34rem;
  margin-top: 0.42rem;
}
.territory-harvest-card {
  min-width: 0;
  gap: 0.3rem;
  border: 1px solid rgba(212, 174, 98, 0.32);
  border-radius: 0.42rem;
  background: rgba(12, 7, 4, 0.42);
  padding: 0.28rem;
}
.territory-harvest-card__material {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 2.65rem;
  place-items: center;
}
.territory-harvest-card__material img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.territory-harvest-card__copy strong {
  overflow: hidden;
  color: #f3e2b0;
  font-size: 0.63rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.territory-harvest-card__copy small {
  color: #dcc8a0 !important;
  font-size: 0.54rem;
}
.territory-harvest-card__action {
  min-width: 4.9rem;
  min-height: 1.85rem;
  padding: 0.22rem 0.34rem !important;
  font-size: 0.58rem !important;
}
.territory-workshop-feedback {
  min-height: 0;
  border-top: 1px solid rgba(212, 174, 98, 0.28);
  padding: 0.35rem 0 0;
  background: none;
}
.territory-workshop-feedback:empty {
  display: none;
}
.territory-workshop-error,
.territory-workshop-success,
.territory-workshop-busy {
  border-radius: 0.36rem;
  padding: 0.32rem 0.42rem;
  font-size: 0.62rem;
}
.territory-workshop-error {
  border-color: rgba(241, 112, 93, 0.55);
  background: rgba(105, 24, 19, 0.5);
  color: #ffd0c8 !important;
}
.territory-workshop-success {
  border-color: rgba(126, 205, 144, 0.48);
  background: rgba(31, 90, 47, 0.44);
  color: #d8f6dd !important;
}
.territory-workshop-busy {
  color: #ead8b4 !important;
}
.territory-craft-confirmation-backdrop {
  border-radius: 0;
  background: rgba(18, 10, 6, 0.72);
  backdrop-filter: blur(4px);
}
.territory-craft-confirmation {
  border: 1px solid rgba(212, 174, 98, 0.45);
  border-radius: 0.48rem;
  background-color: rgba(14, 8, 4, 0.92);
  background-image: none;
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  color: #f3e2b0;
}
.territory-craft-confirmation h3 {
  color: #f3e2b0;
}
.territory-craft-confirmation__copy,
.territory-craft-confirmation__costs li {
  color: #dcc8a0 !important;
}
.territory-craft-confirmation__costs li {
  border-bottom-color: rgba(212, 174, 98, 0.28);
}
.territory-craft-confirmation__costs strong {
  color: #ffbd9f !important;
}
.territory-workshop-sheet :where(button, select):focus-visible {
  outline-color: #ffe09a;
}
@media (max-width: 767px) {
  .territory-workshop-supply {
    grid-template-columns: minmax(0, 1fr);
  }
  .territory-harvest-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .territory-recipe-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .territory-wallet__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .territory-wallet__material:last-child {
    grid-column: auto;
  }
}
@media (max-width: 639px) {
  .territory-workshop-worktop {
    gap: 0.7rem;
    padding: 0.15rem 0 0;
  }
  .territory-forge-formula {
    justify-content: flex-start;
  }
  .territory-forge-panel__controls {
    padding-inline: 0.42rem;
  }
  .territory-forge-panel__controls label {
    min-width: 0;
    width: 100%;
    margin-right: 0;
  }
  .territory-recipe-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .territory-wallet__grid,
  .territory-harvest-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .territory-wallet__material:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 420px) {
  .territory-recipes-panel__season,
  .territory-wallet__reset {
    display: none;
  }
  .territory-recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .territory-wallet__grid,
  .territory-harvest-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .territory-wallet__material:last-child {
    grid-column: auto;
  }
}
.game-hud {
  display: block;
  padding: max(0.3rem, env(safe-area-inset-top))
    max(0.4rem, env(safe-area-inset-right))
    0.2rem
    max(0.4rem, env(safe-area-inset-left));
}
.game-hud-frame {
  --game-hud-status-width: 16rem;
  pointer-events: none;
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-areas: "name energy settings"
    "exp purse purse";
  grid-template-columns: repeat(2, minmax(6.75rem, 1fr)) 2.15rem;
  align-items: start;
  gap: 0.28rem 0.4rem;
}
.game-hud-identity,
.game-hud-vitals {
  display: contents;
}
.game-hud-exp,
.game-hud-energy {
  width: min(var(--game-hud-status-width), 100%);
  max-width: var(--game-hud-status-width);
  justify-self: stretch;
}
.game-hud-identity-main {
  --hud-avatar-size: 5rem;
  --hud-effects-size: 1.75rem;
  --hud-name-height: 3.05rem;
  position: relative;
  grid-area: name;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  padding-bottom: 4.2rem;
  pointer-events: auto;
}
.game-hud-post {
  position: absolute;
  z-index: 5;
  top: calc(
    var(--hud-avatar-size) - 0.55rem + var(--hud-effects-size) + 0.16rem
  );
  left: 0;
  display: inline-flex;
  width: auto;
  min-width: var(--hud-avatar-size);
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(212, 174, 98, 0.5);
  border-radius: 0.45rem;
  background-color: rgba(14, 8, 4, 0.72);
  color: #f3e2b0;
  text-decoration: none;
  box-shadow: 0 6px 12px rgba(8, 4, 2, 0.28),
    inset 0 0 0 1px rgba(243, 226, 176, 0.1);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
  pointer-events: auto;
}
.game-hud-post:hover {
  border-color: rgba(232, 196, 110, 0.85);
  background-color: rgba(22, 12, 7, 0.82);
}
.game-hud-post:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 2px;
}
.game-hud-post-label {
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.game-hud-post-badge {
  min-width: 1.15rem;
  padding: 0.06rem 0.28rem;
  border: 1px solid rgba(42, 24, 16, 0.55);
  border-radius: 999px;
  background: #d4ae62;
  color: #1a120c;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-align: center;
}
.game-hud-name {
  width: 100%;
  max-width: none;
}
.game-hud-effects {
  position: absolute;
  z-index: 6;
  top: calc(var(--hud-avatar-size) - 0.55rem);
  left: 0;
  pointer-events: auto;
}
.game-hud-effects-button {
  appearance: none;
  position: relative;
  display: grid;
  width: var(--hud-effects-size);
  height: var(--hud-effects-size);
  margin-left: calc(
    var(--hud-avatar-size) / 2 - var(--hud-effects-size) / 2
  );
  place-items: center;
  border: 1px solid rgba(212, 174, 98, 0.55);
  border-radius: 999px;
  background-color: rgba(14, 8, 4, 0.72);
  color: #f3e2b0;
  box-shadow: 0 6px 12px rgba(8, 4, 2, 0.28),
    inset 0 0 0 1px rgba(243, 226, 176, 0.1);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
  cursor: pointer;
}
.game-hud-effects-button:hover,
.game-hud-effects-button:focus-visible {
  border-color: rgba(232, 196, 110, 0.85);
  background-color: rgba(22, 12, 7, 0.82);
}
.game-hud-effects-button:focus-visible {
  outline: 2px solid #f3e2b0;
  outline-offset: 2px;
}
.game-hud-effects-glyph {
  width: 1.05rem;
  height: 1.05rem;
}
.game-hud-effects-count {
  position: absolute;
  right: -0.32rem;
  top: -0.36rem;
  min-width: 1.05rem;
  padding: 0.06rem 0.22rem;
  border: 1px solid rgba(212, 174, 98, 0.55);
  border-radius: 999px;
  background: #2a1810;
  color: #f3e2b0;
  font-family: var(--font-ui), sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
}
.game-hud-effects-panel {
  position: absolute;
  top: calc(100% + 0.32rem);
  left: 0;
  z-index: 7;
  width: min(18.75rem, calc(100vw - 1.1rem));
  max-height: min(22rem, 70vh);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(212, 174, 98, 0.42);
  border-radius: 0.55rem;
  background-color: rgba(14, 8, 4, 0.94);
  box-shadow: 0 14px 28px rgba(8, 4, 2, 0.42),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  -webkit-backdrop-filter: blur(8px) saturate(0.92);
  backdrop-filter: blur(8px) saturate(0.92);
}
.game-hud-effects-empty {
  margin: 0;
  padding: 0.7rem 0.8rem;
  color: #d8c49a;
  font-family: var(--font-ui), sans-serif;
  font-size: 0.78rem;
}
.game-hud-effects-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0.28rem;
  list-style: none;
}
.game-hud-effects-item {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr) auto;
  gap: 0.42rem 0.5rem;
  align-items: start;
  padding: 0.38rem 0.42rem;
  border-radius: 0.38rem;
}
.game-hud-effects-item + .game-hud-effects-item {
  border-top: 1px solid rgba(212, 174, 98, 0.16);
}
.game-hud-effects-icon {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-radius: 0.32rem;
  background: #2a1810;
}
.game-hud-effects-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-hud-effects-fallback {
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
}
.game-hud-effects-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.12rem;
}
.game-hud-effects-name {
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
}
.game-hud-effects-detail {
  color: #d8c49a;
  font-family: var(--font-ui), sans-serif;
  font-size: 0.68rem;
  line-height: 1.25;
}
.game-hud-effects-timer {
  color: #e8c46e;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}
.game-hud-effects-timer[data-kind="forever"],
.game-hud-effects-timer[data-kind="until-used"] {
  color: #f3e2b0;
}
.game-hud-exp {
  grid-area: exp;
}
.game-hud-energy {
  grid-area: energy;
}
.game-hud-purse {
  grid-area: purse;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-self: stretch;
}
.game-hud-settings {
  grid-area: settings;
  width: 2.15rem;
  height: 2.15rem;
  align-self: center;
}
.game-hud-exp .exp-keep,
.game-hud-energy .energy-keep {
  width: 100%;
  height: 2.55rem;
  aspect-ratio: auto;
}
.game-hud-exp .exp-keep-level {
  font-size: clamp(0.95rem, 4.4vw, 1.2rem);
}
.game-hud-exp .meter-label,
.game-hud-energy .meter-label {
  overflow: hidden;
  font-size: clamp(0.58rem, 2.7vw, 0.8rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-hud-exp .exp-keep-gate {
  display: none;
}
.game-hud .purse-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: stretch;
  gap: 0.28rem;
  width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-color: transparent;
  box-shadow: none;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.game-hud .purse-coin {
  appearance: none;
  display: inline-flex;
  flex: 1 1 calc(50% - 0.14rem);
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 2.15rem;
  gap: 0.28rem;
  overflow: visible;
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-radius: 999px;
  background-color: rgba(14, 8, 4, 0.42);
  padding: 0.16rem 0.5rem 0.16rem 0.22rem;
  color: #f3e2b0;
  box-shadow: 0 8px 18px rgba(8, 4, 2, 0.22),
    inset 0 0 0 1px rgba(243, 226, 176, 0.08);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
  cursor: help;
  font-size: clamp(0.62rem, 2.55vw, 0.82rem);
}
.game-hud .purse-coin:hover,
.game-hud .purse-coin:focus-visible {
  border-color: rgba(212, 174, 98, 0.55);
  border-radius: 999px;
  background-color: rgba(22, 12, 7, 0.5);
}
.game-hud .purse-coin-icon {
  width: clamp(1.05rem, 4.2vw, 1.35rem);
  height: clamp(1.05rem, 4.2vw, 1.35rem);
}
.purse-coin-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.purse-coin-exact {
  pointer-events: none;
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.28rem);
  left: 50%;
  display: none;
  min-width: max-content;
  transform: translateX(-50%);
  border: 1px solid #ad8a4f;
  border-radius: 0.3rem;
  background: #2f2114;
  padding: 0.24rem 0.45rem;
  color: #f3e2b0;
  box-shadow: 0 3px 8px rgba(24, 13, 5, 0.45);
  font-family: var(--font-ui), sans-serif;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: none;
  white-space: nowrap;
}
.purse-coin:hover .purse-coin-exact,
.purse-coin:focus .purse-coin-exact {
  display: block;
}
.purse-coin:focus-visible {
  border-radius: 0.25rem;
  outline: 2px solid #f0d494;
  outline-offset: 1px;
}
.island-chrome {
  top: 12.6rem;
}
@media (min-width: 640px) {
  .game-hud {
    padding: 0.35rem 0.75rem 0.25rem;
  }
  .game-hud-frame {
    grid-template-areas: "name exp settings"
      "energy purse purse";
    grid-template-columns: repeat(2, minmax(13rem, 1fr)) 2.5rem;
    gap: 0.38rem 0.65rem;
  }
  .game-hud-identity-main,
  .game-hud-name {
    --hud-avatar-size: 5.25rem;
    --hud-name-height: 3.1rem;
  }
  .game-hud-energy,
  .game-hud-energy .energy-meter,
  .game-hud-energy .energy-keep {
    width: 100%;
    max-width: none;
  }
  .game-hud-settings {
    width: 2.5rem;
    height: 2.5rem;
  }
  .game-hud .purse-coin {
    max-width: 8.75rem;
    min-height: 2.35rem;
    padding: 0.18rem 0.58rem 0.18rem 0.24rem;
    font-size: clamp(0.78rem, 1.8vw, 0.94rem);
  }
  .game-hud .purse-coin-icon {
    width: clamp(1.25rem, 3.2vw, 1.5rem);
    height: clamp(1.25rem, 3.2vw, 1.5rem);
  }
  .island-chrome {
    top: 13.7rem;
  }
}
@media (min-width: 900px) {
  .game-hud .purse-coin {
    flex: 1 1 5.4rem;
    min-height: 2.45rem;
  }
  .island-chrome {
    top: 12.5rem;
  }
}
@media (min-width: 1200px) {
  .game-hud {
    padding: 0.3rem 0.9rem 0.2rem;
  }
  .game-hud-frame {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    grid-template-areas: none;
    grid-template-columns: none;
  }
  .game-hud-identity,
  .game-hud-vitals {
    display: flex;
    min-width: 0;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.55rem;
  }
  .game-hud-vitals {
    align-items: center;
  }
  .game-hud-identity {
    margin-right: auto;
  }
  .game-hud-identity-main,
  .game-hud-name,
  .game-hud-exp,
  .game-hud-energy,
  .game-hud-purse {
    grid-area: auto;
    justify-self: auto;
  }
  .game-hud-identity-main {
    --hud-avatar-size: 5.85rem;
    --hud-name-height: 3.25rem;
    flex: 0 1 auto;
    width: max-content;
    min-width: 0;
    max-width: 26rem;
    overflow: visible;
    padding-bottom: 4.2rem;
  }
  .game-hud-name {
    --hud-avatar-size: 5.85rem;
    --hud-name-height: 3.25rem;
    width: max-content;
    max-width: 100%;
  }
  .game-hud-exp {
    position: relative;
    width: 16.5rem;
    max-width: 16.5rem;
  }
  .game-hud-exp .exp-keep-gate {
    position: absolute;
    top: calc(100% + 0.04rem);
    left: 0.15rem;
    right: 0.15rem;
    display: block;
    max-width: none;
    margin-top: 0;
    font-size: 0.65rem;
  }
  .game-hud-energy,
  .game-hud-energy .energy-meter {
    width: 14.5rem;
    max-width: 14.5rem;
  }
  .game-hud-purse {
    width: auto;
    max-width: none;
  }
  .game-hud .purse-rail {
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .game-hud .purse-coin {
    flex: 0 0 auto;
    min-width: 6.35rem;
    max-width: none;
    min-height: 2.7rem;
    padding: 0.2rem 0.7rem 0.2rem 0.28rem;
    font-size: 0.92rem;
  }
  .game-hud .purse-coin-icon {
    width: 1.55rem;
    height: 1.55rem;
  }
  .game-hud-settings {
    width: 2.6rem;
    height: 2.6rem;
  }
  .island-chrome {
    top: 11.4rem;
  }
}
@media (max-width: 359px) {
  .game-hud-frame {
    grid-template-columns: repeat(2, minmax(6.4rem, 1fr)) 2rem;
    gap: 0.18rem 0.22rem;
  }
  .game-hud-identity-main,
  .game-hud-name {
    --hud-avatar-size: 4rem;
    --hud-name-height: 2.6rem;
  }
  .game-hud-identity-main {
    padding-bottom: 4.2rem;
  }
  .game-hud-settings {
    width: 2rem;
    height: 2rem;
  }
  .game-hud .purse-coin {
    min-height: 1.95rem;
    gap: 0.16rem;
    padding: 0.12rem 0.38rem 0.12rem 0.16rem;
    font-size: 0.62rem;
  }
  .game-hud .purse-coin-icon {
    width: 0.95rem;
    height: 0.95rem;
  }
}
.territory-enter-battle {
  display: inline-flex;
  margin-top: 0.75rem;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid rgba(232, 206, 130, 0.62);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(20, 24, 40, 0.58) 0%, rgba(8, 10, 20, 0.82) 100%);
  padding: 0.45rem 0.9rem;
  box-shadow: 0 2px 8px rgba(4, 6, 14, 0.35),
    inset 0 1px 0 rgba(243, 226, 176, 0.18);
  color: #fff6dc;
  font-family: var(--font-display), Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(4, 6, 14, 0.88);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
  backdrop-filter: blur(6px) saturate(1.08);
}
.territory-enter-battle:hover {
  color: #fffbeb;
  border-color: rgba(243, 226, 176, 0.92);
  background: linear-gradient(180deg, rgba(42, 32, 68, 0.55) 0%, rgba(10, 14, 28, 0.86) 100%);
  filter: none;
}
.territory-enter-battle:focus-visible {
  outline: 2px solid #fff6dc;
  outline-offset: 2px;
}
.territory-enter-battle:disabled {
  color: #fff6dc;
  border-color: rgba(232, 206, 130, 0.45);
  opacity: 1;
  filter: none;
}
.territory-window-toolbar .territory-enter-battle {
  min-height: 44px;
  padding: 0.62rem 1rem 0.55rem;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.territory-battle-window .territory-window-body {
  overflow: hidden;
}
.territory-battle-window .territory-window-title,
.territory-battle-window .territory-window-lead {
  flex: 0 0 auto;
}
.territory-battle-panel {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.85rem;
  overflow: hidden;
}
.territory-battle-toolbar {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.territory-battle-back {
  color: #f3e2b0;
  text-decoration: underline;
  text-underline-offset: 0.18rem;
}
.territory-battle-leave {
  margin-left: auto;
}
.territory-battle-resurrect {
  justify-self: start;
  margin-top: 0.45rem;
}
.territory-battle-rooms {
  display: flex;
  flex: 0 0 auto;
  gap: 0.45rem;
  overflow-x: auto;
  margin: 0;
  padding: 0 0 0.35rem;
  list-style: none;
}
.territory-battle-room {
  display: grid;
  min-width: 8.6rem;
  gap: 0.15rem;
  border: 1px solid rgba(212, 174, 98, 0.38);
  border-radius: 0.4rem;
  background: rgba(14, 8, 4, 0.42);
  padding: 0.45rem 0.5rem;
  color: #f3e2b0;
  text-align: left;
}
.territory-battle-room.is-active {
  border-color: #e2c477;
  box-shadow: inset 0 0 0 1px rgba(226, 196, 119, 0.45);
}
.territory-battle-room strong,
.territory-battle-side h2,
.territory-battle-commands h2,
.territory-battle-log h2 {
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}
.territory-battle-room span,
.territory-battle-room small,
.territory-battle-you,
.territory-battle-log li {
  color: #dcc8a0;
  font-size: 0.72rem;
}
.territory-battle-field {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.8fr) minmax(0, 1fr);
  gap: 0.55rem;
  overflow: auto;
}
@container territory-window (max-width: 44rem) {
  .territory-battle-field {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }
  .territory-battle-side {
    max-height: 14rem;
  }
}
.territory-battle-side,
.territory-battle-commands,
.territory-battle-log {
  display: grid;
  min-height: 0;
  gap: 0.4rem;
  align-content: start;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(212, 174, 98, 0.28);
  border-radius: 0.45rem;
  background: rgba(14, 8, 4, 0.28);
  padding: 0.55rem;
}
.territory-battle-log {
  flex: 0 0 auto;
  max-height: 9.5rem;
}
.territory-battle-command-grid {
  display: grid;
  gap: 0.35rem;
}
.territory-battle-command,
.territory-battle-join,
.territory-battle-leave,
.territory-harvest-card__action,
.territory-craft-confirmation__actions button {
  min-height: 44px;
  border: 1px solid rgba(232, 206, 130, 0.62);
  background: linear-gradient(180deg, rgba(20, 24, 40, 0.58) 0%, rgba(8, 10, 20, 0.82) 100%);
  color: #fff6dc;
  font-family: var(--font-display), Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(4, 6, 14, 0.88);
  box-shadow: 0 2px 8px rgba(4, 6, 14, 0.35),
    inset 0 1px 0 rgba(243, 226, 176, 0.18);
}
.territory-battle-join,
.territory-battle-resurrect,
.territory-harvest-all,
.territory-recipe-card__action,
.territory-shop-card__buy {
  min-height: 44px;
  background: linear-gradient(180deg, #f6e7b4 0%, #d4ae62 52%, #b8893a 100%);
  color: #1a140c;
  border-color: #f8edd0;
  text-shadow: none;
  font-family: var(--font-display), Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(4, 6, 14, 0.35),
    inset 0 1px 0 rgba(243, 226, 176, 0.22);
}
.territory-battle-unit {
  display: grid;
  grid-template-columns: 2.55rem minmax(0, 1fr);
  gap: 0.4rem;
  align-items: center;
  border: 1px solid rgba(212, 174, 98, 0.28);
  border-radius: 0.35rem;
  background: rgba(8, 5, 3, 0.35);
  padding: 0.35rem 0.45rem;
  color: #f3e2b0;
  text-align: left;
}
.territory-battle-unit-copy,
.territory-battle-you-copy {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}
.territory-battle-portrait.portrait-ring {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(212, 174, 98, 0.72);
  border-radius: 999px;
  background: #2a1810;
  box-shadow: 0 2px 6px rgba(8, 4, 2, 0.35);
}
.territory-battle-you .territory-battle-portrait.portrait-ring {
  width: 3rem;
  height: 3rem;
}
.territory-battle-portrait-face {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: #2a1810;
}
.territory-battle-portrait-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.territory-battle-portrait-fallback {
  color: #f3e2b0;
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: 0.95rem;
  line-height: 1;
}
.territory-battle-you {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
}
.territory-battle-you.is-watching {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.territory-battle-you.is-watching p {
  margin: 0;
}
.territory-battle-contribution {
  display: grid;
  gap: 0.08rem;
  margin: 0.12rem 0 0;
}
.territory-battle-contribution-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem;
  align-items: baseline;
}
.territory-battle-contribution-stat dt {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: #cbb892;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.territory-battle-contribution-stat dd {
  margin: 0;
  color: #f3e2b0;
  font-size: 0.72rem;
  font-weight: 700;
}
.territory-battle-you-copy strong,
.territory-battle-unit-copy strong {
  overflow: hidden;
  color: #f3e2b0;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.territory-battle-unit.is-focused {
  border-color: #e2c477;
}
.territory-battle-unit.is-dead {
  opacity: 0.55;
}
.territory-battle-unit[data-faction="FURY"] {
  box-shadow: inset 3px 0 0 rgba(255, 132, 92, 0.8);
}
.territory-battle-unit[data-faction="LIGHTS"] {
  box-shadow: inset 3px 0 0 rgba(244, 225, 157, 0.8);
}
.territory-battle-hp {
  position: relative;
  display: block;
  height: 0.9rem;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
}
.territory-battle-hp > span {
  display: block;
  height: 100%;
  background: #d4a24a;
}
.territory-battle-hp > em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff6d8;
  text-shadow: 0 1px 1px rgba(8, 4, 2, 0.85);
}
.territory-battle-log ol {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  max-height: 8rem;
  overflow: auto;
  padding: 0;
  list-style: none;
}
@media (max-width: 767px) {
  .territory-battle-field {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }
  .territory-battle-side {
    max-height: 14rem;
  }
}
@media (max-width: 639px) {
  .game-hud-frame {
    grid-template-columns: repeat(2, minmax(6.4rem, 1fr)) 2.75rem;
  }
  .game-hud-settings,
  .game-hud .purse-coin,
  .island-route-close {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
  .game-hud-settings,
  .island-route-close {
    width: 2.75rem;
    height: 2.75rem;
  }
  .store-window {
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }
  .store-tabs {
    gap: 0.25rem;
    overflow: visible;
    padding: 0;
  }
  .store-tab {
    min-width: 0;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.35rem;
    font-size: 0.68rem;
  }
  .store-slide {
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    gap: 0.25rem;
  }
  .store-slide-arrow {
    width: 2.75rem;
    height: 2.75rem;
  }
  .store-slide-buy {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.75rem;
  }
  .patrol-window-hud {
    right: 0.7rem;
    bottom: 0.7rem;
    left: 0.7rem;
    max-width: none;
    max-height: calc(100% - 4.5rem);
    align-items: stretch;
    overflow: auto;
  }
  .patrol-window-result,
  .patrol-window-rewards,
  .patrol-window-meta {
    align-items: flex-start;
    text-align: left;
  }
  .patrol-window-actions {
    align-self: stretch;
  }
  .patrol-window-slider-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .patrol-window-slider {
    min-height: 2.75rem;
    height: 2.75rem;
  }
  .patrol-window-slider::-webkit-slider-runnable-track,
  .patrol-window-slider::-moz-range-track {
    height: 2.75rem;
  }
  .patrol-window-slider::-webkit-slider-thumb {
    width: 1.6rem;
    height: 1.6rem;
    margin-top: calc((2.75rem - 1.6rem) / 2);
  }
  .patrol-window-slider::-moz-range-thumb {
    width: 1.6rem;
    height: 1.6rem;
  }
  .patrol-window-hud .patrol-window-start,
  .patrol-window-hud button {
    min-height: 2.75rem;
  }
  .patrol-window-hud .patrol-window-start {
    flex: 1 1 8rem;
  }
  .trade-route-card-buy {
    grid-template-columns: minmax(0, 1fr);
  }
  .trade-route-window-shop .trade-route-card-buy button {
    min-height: 2.75rem;
    padding: 0.5rem 0.4rem;
  }
}
@media (max-height: 520px) {
  .island-route-panel[data-panel="character"] {
    height: 100%;
    min-height: 0;
  }
  .island-route-panel[data-panel="character"] .island-route-panel-body,
  .character-window {
    height: 100%;
    min-height: 0;
  }
  .character-window-body {
    position: absolute;
    inset: 0;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .island-route-panel[data-panel="training"],
  .island-route-panel[data-panel="dungeon"],
  .island-route-panel[data-panel="battlefield"],
  .island-route-panel[data-panel="professions"],
  .island-route-panel[data-panel="forge"],
  .island-route-panel[data-panel="port"],
  .island-route-panel[data-panel="store"] {
    height: 100%;
    min-height: 0;
  }
  .island-route-panel[data-panel="training"] .island-route-panel-body,
  .island-route-panel[data-panel="dungeon"] .island-route-panel-body,
  .island-route-panel[data-panel="battlefield"] .island-route-panel-body,
  .island-route-panel[data-panel="professions"] .island-route-panel-body,
  .island-route-panel[data-panel="forge"] .island-route-panel-body,
  .island-route-panel[data-panel="port"] .island-route-panel-body,
  .island-route-panel[data-panel="store"] .island-route-panel-body,
  .training-window,
  .dungeon-screen,
  .battlefield-window,
  .professions-window,
  .forge-window,
  .port-window,
  .store-window {
    height: 100%;
    min-height: 0;
  }
  .training-window-body,
  .dungeon-window-body,
  .battlefield-window-body,
  .professions-window-body,
  .forge-window-body,
  .port-window-body,
  .store-window-body {
    position: absolute;
    inset: 0;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .training-window-panel,
  .dungeon-window-panel,
  .battlefield-window-panel,
  .professions-window-panel,
  .port-window-panel,
  .store-window-panel {
    min-height: 0;
    flex: 1 1 auto;
  }
  .dungeon-screen-lobby:has(.dungeon-expedition-windows) .dungeon-window-panel {
    flex: 0 0 auto;
  }
  .store-window-items {
    min-height: 0;
  }
  .store-tab,
  .store-slide-arrow,
  .store-slide-buy {
    min-height: 2.75rem;
  }
  .store-slide-arrow {
    width: 2.75rem;
    height: 2.75rem;
  }
  .patrol-window-slider,
  .patrol-window-hud .patrol-window-start,
  .patrol-window-hud button,
  .trade-route-window-shop .trade-route-card-buy button {
    min-height: 2.75rem;
  }
  .trade-route-window-body {
    gap: 0.35rem;
    padding: 2.1rem 0.7rem 0.65rem;
  }
  .trade-route-window-title {
    font-size: 1.65rem;
  }
  .trade-route-window-lead {
    font-size: 0.88rem;
    line-height: 1.2;
  }
  .trade-route-window-panel {
    padding: 0.55rem 0.65rem 0.7rem;
  }
}
@media (max-width: 767px), (pointer: coarse), (max-height: 520px) and (orientation: landscape) {
  .game-keep button.rounded-\[6px\],
  .battlefield-level-field input,
  .battlefield-search-button,
  .training-window-back,
  .professions-window-back,
  .training-layout-switch,
  .training-stepper button,
  .training-text-btn,
  .training-alloc-input,
  .training-slider,
  .hall-window-panel button,
  .store-window-panel button,
  .forge-window-panel button,
  .port-window-panel button,
  .port-tabs button,
  .forge-room button,
  .hall-member-kick,
  .settings-veil input:not([type]),
  .settings-veil input[type="text"],
  .settings-veil input[type="email"],
  .settings-veil input[type="password"],
  .settings-veil input[type="range"],
  .territory-enter-battle,
  .territory-forge-panel__action,
  .territory-harvest-card__action,
  .territory-forge-panel__controls select,
  .territory-recipe-card__variant select,
  .territory-battle-command-grid > button {
    min-height: 2.75rem;
  }
  .training-window-back,
  .professions-window-back,
  .training-layout-switch,
  .training-stepper button,
  .training-text-btn,
  .training-alloc-input,
  .training-slider {
    min-width: 2.75rem;
  }
  .training-layout-switch {
    width: auto;
    padding-inline: 0.5rem;
  }
  .island-route-close,
  .dungeon-rules-info-button,
  .hall-settings-cog,
  .territory-workshop-close {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }
  .territory-workshop-close {
    flex-basis: 2.75rem;
  }
  .settings-veil label:has(input[type="checkbox"]) {
    min-height: 2.75rem;
  }
  .settings-veil input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
  }
  .leaderboard-window-panel button.cursor-pointer {
    min-height: 2.75rem;
  }
  .leaderboard-pages button {
    min-width: 2.75rem;
  }
  .talk-toggle,
  .talk-hold button.cursor-pointer,
  .talk-hold nav button {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
  .location-locked-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding-inline: 0.75rem;
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  .leaderboard-window-body {
    gap: 0.35rem;
    padding: 0.65rem 0.7rem;
  }
  .leaderboard-window-title {
    font-size: 1.65rem;
  }
  .leaderboard-window-lead {
    display: none;
  }
  .leaderboard-window-panel.parchment {
    padding: 0.5rem 0.65rem 0.65rem;
  }
  .talk-hold {
    height: min(38rem, calc(100dvh - 4rem)) !important;
  }
}
@media (max-width: 767px) and (max-height: 520px) and (orientation: landscape) {
  .talk-hold nav {
    max-height: 5.75rem;
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}