/* A readable working surface for account services and player trading. */
.fantasyTheme .brand__wordmark strong { font-size: 21px; line-height: 1.1; text-transform: uppercase; letter-spacing: .025em; }
.fantasyTheme .brand__wordmark { max-width: 198px; }
.fantasyTheme .brand__markImg { object-fit: contain; }
.fantasyTheme .hero:not(.pageHero) .hero__logoImg { width: 226px; height: 238px; object-fit: contain; }
.fantasyTheme .pageShell__frame--wide { max-width: 1240px; width: 100%; }
.fantasyTheme .pageShell__frame--workspace .pageShell__body { padding: 0; }
.fantasyTheme .pageShell__frame--workspace { background: #100c0bea; border-color: #77532e; }
.fantasyTheme--workspace .pageHero .hero__logo { display: none; }
.fantasyTheme--workspace .pageHero .hero__inner { padding-top: 30px; }
.fantasyTheme--workspace .pageShell__head { margin-bottom: 24px; }
.fantasyTheme--workspace .pageShell__title { font-size: clamp(28px,4vw,42px); }
.fantasyTheme--workspace .pageShell__subtitle { font-size: 15px; max-width: 720px; }
.accountPanel, .marketPage--clean { --panel-muted: #b8aaa0; --panel-gold: #e6bd79; color: #f2e9df; font-size: 15px; line-height: 1.6; }
.accountPanel button, .marketPage--clean button, .accountPanel input, .marketPage--clean input, .accountPanel select, .marketPage--clean select { font: inherit; }
.accountPanel *, .marketPage--clean * { box-sizing: border-box; min-width: 0; }
.accountPanel button:not(:disabled), .marketPage--clean button:not(:disabled) { cursor: pointer; }
.accountPanel :focus-visible, .marketPage--clean :focus-visible { outline: 2px solid #ffce7d; outline-offset: 4px; }
.accountPanel .btn, .marketPage--clean .btn { min-height: 44px; font-size: 14px; padding: 10px 18px; white-space: normal; }
.accountPanel .formInput, .marketPage--clean .formInput, .marketPage--clean .marketSelect { min-height: 46px; width: 100%; color: #f8eee3; background: #100d0c; border: 1px solid #6b4c34; border-radius: 6px; padding: 10px 12px; font-size: 15px; }
.accountPanel .formInput:focus, .marketPage--clean .formInput:focus, .marketPage--clean .marketSelect:focus { border-color: #dba85c; }
.accountPanel button:disabled, .marketPage--clean button:disabled { opacity: .5; cursor: not-allowed; }
.panelEyebrow { font-size: 11px; letter-spacing: .16em; color: #bd9563; }
.panelLead { color: var(--panel-muted); margin: 8px 0 28px; font-size: 15px; }
.panelMessage { border: 1px solid #896438; background: #342415; color: #f3dab4; padding: 13px 16px; border-radius: 6px; margin-bottom: 16px; }
.panelMessage[hidden] { display: none; }
.panelMessage.is-error { background: #381719; border-color: #af5454; color: #ffc2c2; }
.panelMessage.is-success { background: #15291e; border-color: #47835d; color: #b4e6c7; }
.panelMessage button { color: inherit; background: none; border: 0; text-decoration: underline; }
.accountPanel { display: grid; grid-template-columns: 260px minmax(0,1fr); }
.accountSidebar { padding: 27px 20px; background: linear-gradient(140deg,#2b1b16bb,#100d0c); border-right: 1px solid #61452d; border-radius: 8px 0 0 8px; }
.accountIdentity { display: flex; gap: 12px; align-items: center; }
.accountIdentity small { display: block; font-size: 9px; letter-spacing: .1em; color: #c6a788; }
.accountIdentity strong { font-size: 19px; overflow-wrap: anywhere; }
.accountCrest { display: grid; place-items: center; flex: 0 0 43px; height: 49px; font: 25px Georgia,serif; border: 1px solid #c48b4f; color: #ffdda7; background: linear-gradient(145deg,#713b20,#1c100e); clip-path: polygon(0 0,100% 0,100% 75%,50% 100%,0 75%); }
.accountWallet { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; margin: 23px 0; padding: 16px 0; border-block: 1px solid #62442b99; }
.accountWallet > span { color: #c9b8a8; font-size: 13px; }
.accountWallet > strong { color: #ffe0a0; font-size: 23px; }
.accountWallet > small { grid-column: 1/-1; color: #a58d7a; font-size: 11px; overflow-wrap: anywhere; }
.accountNav { display: grid; gap: 4px; }
.accountNav button { text-align: left; padding: 11px 10px; border: 1px solid transparent; color: #cbbfb3; background: none; display: flex; gap: 11px; line-height: 1.4; border-radius: 5px; font-size: 13px; }
.accountNav button > span { color: #c59359; width: 19px; font-size: 19px; flex: 0 0 19px; text-align: center; }
.accountNav button:hover { color: #ffdfb5; background: #37261b; }
.accountNav button.is-active { color: #ffe5b7; border-color: #ad7b3d; background: linear-gradient(90deg,#69421f80,#281a10); box-shadow: inset 3px 0 #e3b56d; }
.accountNavGroup { color: #96775b; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; margin: 18px 10px 5px; }
.accountWorkspace { padding: 34px; min-height: 590px; }
.accountSectionHead h2, .marketSectionHeading h2 { font: 29px Georgia,serif; color: #efd1a4; margin: 7px 0; }
.accountSectionLabel { display: flex; justify-content: space-between; align-items: center; margin: 30px 0 14px; gap: 10px; }
.accountSectionLabel h3 { margin: 0; font-size: 17px; font-weight: 500; }
.accountSectionLabel > span { color: #9e8774; font-size: 12px; }
.accountCharacterGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.accountCharacter { position: relative; text-align: left; display: flex; flex-direction: column; gap: 3px; border: 1px solid #59432f; border-radius: 7px; padding: 20px 16px; color: #e8d6c2; background: linear-gradient(140deg,#32221b,#15100e); min-height: 177px; overflow-wrap: anywhere; }
.accountCharacter.is-selected { border-color: #d49b52; box-shadow: inset 0 0 22px #bb763016; }
.accountCharacter.is-selected::after { content: '✓'; position: absolute; top: 10px; right: 12px; color: #e4b77d; }
.accountCharacter__symbol { color: #c39055; font-size: 29px; }
.accountCharacter > strong { font-size: 16px; color: #faedda; }
.accountCharacter > span:not(:first-child) { color: #c69862; font-size: 12px; }
.accountCharacter small { color: #b7a492; font-size: 12px; }
.accountCharacter b { margin-inline: 5px; }
.accountQuickActions { display: flex; gap: 10px; margin-top: 25px; flex-wrap: wrap; }
.accountQuickActions button { background: #211a13; color: #dfbb87; border: 1px solid #68492d; border-radius: 5px; padding: 11px 13px; font-size: 12px; }
.accountForm { display: grid; max-width: 490px; gap: 18px; margin-top: 28px; }
.accountForm label, .accountCharacterSelect { display: grid; gap: 7px; color: #d8c4ac; font-size: 13px; }
.accountForm small { color: #a58d76; font-size: 12px; margin-top: -10px; }
.accountForm .btn { justify-self: start; margin-top: 5px; }
.accountCharacterSelect { max-width: 490px; }
.accountCharacterForm { max-width: 640px; }
.accountRequirements { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -5px; }
.accountRequirements span { padding: 7px 10px; border: 1px solid #626772; background: linear-gradient(180deg,#252830,#111318); color: #dcc49e; font-size: 12px; clip-path: polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px); }
.accountRequirements span:first-child { border-color: #a6434e; box-shadow: inset 3px 0 #b91b31; }
.accountRequirements span:last-child { border-color: #3d6292; box-shadow: inset -3px 0 #2674cf; }
.accountConfirmNotice { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid #66594a; background: radial-gradient(circle at 0 50%,#c51b3033,transparent 28%),radial-gradient(circle at 100% 50%,#2478d638,transparent 28%),#151416; color: #bcae9e; font-size: 12px; }
.accountConfirmNotice strong { color: #f0cd98; font-weight: 600; }
.accountAvailability, .accountShop { padding: 38px 25px; margin-top: 25px; border: 1px solid #65452b; background: radial-gradient(ellipse at top,#7e502319,transparent 80%); border-radius: 8px; text-align: center; }
.accountAvailability > span, .accountShop__icon { display: block; font-size: 45px; color: #d4a567; }
.accountAvailability h3, .accountShop h3 { font: 25px Georgia,serif; margin: 10px 0; color: #e4c290; }
.accountAvailability p, .accountShop p { max-width: 440px; margin: 12px auto 24px; color: #b9a68f; }
.serviceUnavailable { display: inline-block; border: 1px solid #705336; padding: 7px 18px; border-radius: 99px; color: #d3af7f; font-size: 12px; }
.marketPage--clean { padding: 26px 30px; display: grid; gap: 20px; }
.marketPage--clean .marketTopline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marketTopline p { margin: 0; color: #c9b6a1; }
.marketPage--clean .marketTabs { display: flex; justify-content: flex-start; border-bottom: 1px solid #62472e; padding: 0; gap: 24px; }
.marketPage--clean .marketTabBtn { padding: 13px 3px; min-height: 48px; background: none; box-shadow: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-size: 15px; color: #b9a795; }
.marketPage--clean .marketTabBtn.is-active { border-color: #e5b46c; color: #ffdda4; }
.marketPage--clean .marketViewPanel { display: none; }
.marketPage--clean .marketViewPanel.is-active { display: grid; gap: 23px; }
.marketSearchPanel { display: grid; gap: 16px; padding: 21px; background: #241a1366; border: 1px solid #5b422d; border-radius: 7px; }
.marketSearchRow { display: grid; grid-template-columns: minmax(0,1fr) 215px auto; align-items: end; gap: 14px; }
.marketSearchRow label { display: grid; gap: 6px; color: #c4aa8e; font-size: 12px; }
.marketSearchMeta { display: flex; gap: 18px; align-items: start; flex-wrap: wrap; }
.marketAdvanced { flex: 1 1 190px; }
.marketAdvanced summary { cursor: pointer; font-size: 13px; color: #d7b384; padding: 10px 0; }
.marketAdvanced[open] { flex-basis: 100%; order: 2; }
.marketAdvancedGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding: 12px 0; }
.marketAdvancedGrid > label { display: grid; gap: 6px; color: #bea58b; font-size: 12px; }
.marketChecks { display: flex; gap: 20px; grid-column: 1/-1; flex-wrap: wrap; }
.marketPage--clean .marketCheck { font-size: 13px; }
.marketSort { display: flex; gap: 9px; align-items: center; color: #b7a18a; font-size: 12px; }
.marketPage--clean .marketSort select { min-height: 39px; padding: 7px 10px; font-size: 13px; width: 166px; }
.marketTextButton { border: 0; padding: 10px 0; background: none; color: #bda58b; text-decoration: underline; font-size: 12px !important; }
.marketResultsBar { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; color: #ad947c; font-size: 13px; }
.marketResultsBar strong { color: #f3d8ac; }
.marketRecipient { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.marketPage--clean .marketRecipient select { width: 245px; font-size: 13px; min-height: 40px; }
.marketProductGrid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 17px; align-items: start; }
.marketProduct { border: 1px solid #61452b; border-radius: 7px; overflow: hidden; background: #17110e; transition: border-color .2s,transform .2s; }
.marketProduct:hover { border-color: #bb8745; transform: translateY(-3px); }
.marketProduct__art { height: 168px; position: relative; display: grid; place-items: center; background: radial-gradient(ellipse at center,#8550243d,#080706); border-bottom: 1px solid #4a3221; }
.marketProduct__art img { max-width: 77%; max-height: 122px; object-fit: contain; filter: drop-shadow(0 8px 16px #000); }
.marketProduct__placeholder { font-size: 67px; color: #aa743655; }
.marketProduct__channel { position: absolute; top: 12px; left: 12px; border: 1px solid #6a5640; background: #211a12e6; color: #dcc397; border-radius: 4px; padding: 3px 7px; font-size: 10px; }
.marketProduct__channel.is-web { color: #bce3cb; border-color: #41634d; background: #17241b; }
.marketProduct__level { position: absolute; bottom: 9px; right: 12px; color: #ffdca0; font-size: 17px; font-weight: 700; }
.marketProduct__body { padding: 15px; }
.marketProduct__body h3 { font-size: 16px; margin: 0 0 7px; line-height: 1.4; color: #f0dac0; overflow-wrap: anywhere; }
.marketProduct__seller, .marketProduct__store { font-size: 11px; color: #a58d76; margin: 4px 0; overflow-wrap: anywhere; }
.marketProduct__seller strong { color: #c4a381; font-weight: 400; }
.marketProduct__details { margin: 12px 0; font-size: 11px; color: #ccaa7e; }
.marketProduct__details summary { cursor: pointer; }
.marketProduct__details > div { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.marketPage--clean .marketBadge { font-size: 10px; padding: 3px 6px; }
.marketProduct__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin-top: 18px; color: #f3c477; }
.marketProduct__price strong { font-size: 25px; }
.marketProduct__price span { color: #a78a68; font-size: 11px; }
.marketProduct__action { margin-top: 13px; min-height: 44px; display: grid; align-items: center; }
.marketProduct__action > span { color: #ab957b; font-size: 11px; line-height: 1.5; }
.marketPage--clean .marketProduct__action .btn { font-size: 12px; width: 100%; }
.marketEmpty { grid-column: 1/-1; text-align: center; min-height: 230px; padding: 38px 20px; border: 1px dashed #715233; border-radius: 7px; background: radial-gradient(ellipse at top,#63381b22,transparent); }
.marketEmpty > span { color: #bd8d52; font-size: 40px; }
.marketEmpty h3 { font: 25px Georgia,serif; color: #dfc096; margin: 9px 0; }
.marketEmpty p { color: #ab967e; font-size: 14px; }
.marketProductGrid > .loadingRow, .marketProductGrid > .emptyState { grid-column: 1/-1; }
.marketDisclosure { border-block: 1px solid #503921; padding: 14px 0; color: #b9a58f; font-size: 14px; }
.marketDisclosure > summary { cursor: pointer; color: #d6b38a; padding: 5px 0; }
.marketDisclosure > div { padding-top: 20px; }
.marketHowTo { border-bottom: 0; font-size: 13px; }
.marketHowTo li { padding: 5px; }
.marketSectionHeading { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.marketSectionHeading p { color: #ab957e; margin: 6px 0; }
.marketPage--clean .marketAccountSummary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.marketPage--clean .marketStat { background: #251a13; padding: 14px; border: 1px solid #61442b; border-radius: 6px; }
.marketPage--clean .marketStat > span { font-size: 11px; }
.marketPage--clean .marketStat > strong { font-size: 20px; }
.marketPage--clean .marketBalanceGrid { grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); }
.marketWarehouseSection, .marketActivitySection { padding: 20px; border: 1px solid #61452c; border-radius: 7px; }
.marketWarehouseSection h3, .marketActivitySection h3 { color: #e8c699; margin-top: 0; font-size: 19px; }
.marketPage--clean .emptyState { font-size: 14px; padding: 24px; }
.marketPage--clean .marketNote { font-size: 13px; }
.marketPurchaseDialog { width: min(490px,calc(100% - 28px)); padding: 28px; border: 1px solid #c49150; border-radius: 9px; background: #17100dfc; color: #eddbc6; box-shadow: 0 20px 90px #000; }
.marketPurchaseDialog::backdrop { background: #000b; backdrop-filter: blur(5px); }
.marketPurchaseDialog h2 { color: #e9c793; font: 28px Georgia,serif; }
.marketPurchaseDialog h3 { font-size: 18px; }
.marketDialogClose { position: absolute; right: 14px; top: 10px; background: none; color: #dfc2a0; border: 0; font-size: 25px !important; }
.marketConfirmPrice { font-size: 28px; color: #facb82; }
.marketConfirmPrice > span { font-size: 14px; }
.marketConfirmActions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
@media(max-width:1100px) {
  .accountPanel { grid-template-columns: 225px minmax(0,1fr); }
  .accountWorkspace { padding: 25px; }
  .accountCharacterGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .marketProductGrid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .fantasyTheme .brand__wordmark strong { font-size: 16px; }
  .fantasyTheme .brand__wordmark { max-width: 145px; }
  .fantasyTheme .hero:not(.pageHero) .hero__logoImg { width: 190px; height: 200px; }
  .accountPanel { grid-template-columns: 1fr; }
  .accountSidebar { border-right: 0; border-bottom: 1px solid #61452d; padding: 20px; }
  .accountWallet { margin: 14px 0; }
  .accountNav { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 8px; }
  .accountNavGroup { display: none; }
  .accountNav button { flex: 0 0 auto; max-width: 200px; align-items: center; font-size: 12px; }
  .accountNav button.is-active { box-shadow: inset 0 -2px #e3b56d; }
  .accountWorkspace { padding: 23px 18px; min-height: 400px; }
  .marketPage--clean { padding: 20px 16px; }
  .marketPage--clean .marketTabs { gap: 20px; }
  .marketPage--clean .marketTabBtn { font-size: 12px; }
  .marketSearchRow { grid-template-columns: 1fr auto; }
  .marketSearchField { grid-column: 1/-1; }
  .marketSearchPanel { padding: 15px; }
  .marketProductGrid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .marketAdvancedGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .marketPage--clean .marketAccountSummary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .marketSectionHeading { align-items: start; flex-direction: column; }
  .marketRecipient { width: 100%; justify-content: space-between; }
  .marketTopline p { font-size: 13px; }
}
@media(max-width:420px) {
  .marketProductGrid { grid-template-columns: 1fr; }
  .marketProduct__art { height: 180px; }
  .marketSearchRow { grid-template-columns: 1fr; }
  .marketPage--clean .marketTabs { gap: 14px; }
  .accountCharacter { padding: 15px 12px; }
  .accountCharacter > strong { font-size: 13px; }
  .accountQuickActions button { width: 100%; }
}