@charset "UTF-8";
/* Artarian's browser shell: oak, worn brass and parchment. */
:root {
  color-scheme: dark;
  --ink: #171c13; --panel: #263323; --panel-raised: #34462d;
  --border: #827044; --text: #eee5cc; --muted: #b6b396;
  --copper: #dfc17b; --copper-dark: #8f7545; --blue: #9eb6a2;
  --hp: #9b3e32; --mana: #597a8b; --xp: #b79547; --radius: 0px;
  font: 13px/1.6 Verdana, Arial, sans-serif;
  background: var(--ink); color: var(--text);
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh;
  background: repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 4px), #1b2218;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button, a, input, select { touch-action: manipulation; }
button {
  cursor: pointer; border: 1px solid #9b8354; border-radius: 1px;
  min-height: 34px; padding: 6px 13px; color: #efdfb8;
  background: linear-gradient(#48523a, #2b3626);
  box-shadow: inset 0 1px #d9c58f25, inset 0 -2px #0d130f50;
  text-shadow: 0 1px #0008;
}
button:hover:not(:disabled) { border-color: #d9bf7f; background: #455638; }
button:active:not(:disabled) { box-shadow: inset 0 2px 4px #0007; }
button:disabled { cursor: not-allowed; opacity: .48; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #cfac62; outline-offset: 3px;
}
button.primary {
  background: linear-gradient(#854734, #5d2924); border-color: #c5a463;
  box-shadow: inset 0 1px #e5b98e45, inset 0 -2px #381e15;
  color: #ffe6a4; font: bold 15px/1.3 Georgia, 'Times New Roman', serif;
}
button.primary:hover:not(:disabled) { background: #864c37; border-color: #ecd49a; }
button.secondary { background: linear-gradient(#514938, #373326); }
button.quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
button.quiet:hover:not(:disabled) { color: #ffedb8; background: #ffffff08; border-color: #9b835455; }
.wide { width: 100%; }
.muted { color: var(--muted); }
.panel {
  background: repeating-linear-gradient(0deg, #00000004 0 1px, transparent 1px 3px), var(--panel);
  border: 1px solid var(--border); border-radius: 0;
  box-shadow: inset 0 0 0 2px #10170e, inset 0 0 0 3px #82704445;
}
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: normal; }
h1 { font-size: 32px; line-height: 1.25; }
h2 { font-size: 24px; line-height: 1.3; }
h3 { font-size: 18px; }
a { color: var(--copper); }
.eyebrow { color: var(--copper); font-size: 10px; letter-spacing: .07em; margin-bottom: 3px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h2 { font-size: 16px; }
.count-pill { border: 1px solid #82704488; padding: 0 6px; font: 11px/1.7 Verdana, sans-serif; color: var(--muted); }
.field-help { font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 7px; }
.form-error { margin-top: 12px; padding: 8px 10px; border: 1px solid #b0664d; background: #5d2924; color: #ffe0bc; font-size: 12px; }
label, legend { display: block; margin-bottom: 5px; font-size: 12px; }
input, select {
  width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid #9b8555; border-radius: 0;
  color: #2e3022; background: #ece4cc; color-scheme: light; box-shadow: inset 1px 2px 3px #30231540;
}
input::placeholder { color: #777365; font-size: 11px; }
input:focus, select:focus { border-color: #d8be80; }
fieldset { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
legend { padding: 0; color: var(--muted); }
canvas, img { image-rendering: pixelated; }
kbd { font: 10px Verdana, sans-serif; border: 1px solid currentColor; padding: 1px 3px; border-radius: 1px; opacity: .85; }
.wordmark { display: flex; align-items: center; gap: 9px; color: #e0bc6c; text-decoration: none; font: bold 28px Georgia, serif; text-shadow: 1px 2px #111; letter-spacing: .025em; }
.wordmark small { font: 9px Verdana, sans-serif; letter-spacing: .16em; margin-top: 6px; }
.brand-mark { display: grid; place-items: center; border: 1px solid #b69b61; width: 27px; height: 33px; background: #2e3425; font: bold 23px Georgia, serif; box-shadow: inset 0 0 0 2px #10150e; }
.status-dot { display: inline-block; width: 6px; height: 6px; flex: none; background: #b2bd78; box-shadow: 0 0 0 1px #121a10; }
.small-diamond, .legend-exit { display: inline-block; width: 5px; height: 5px; background: var(--copper); transform: rotate(45deg); vertical-align: middle; }
.notice-stack { position: fixed; right: 15px; top: 15px; z-index: 1000; display: flex; flex-direction: column; gap: 6px; max-width: min(420px, calc(100vw - 30px)); pointer-events: none; }
.notice { padding: 10px 14px; color: #f4e6c3; font-size: 12px; border: 1px solid #c4a970; background: #303b25; box-shadow: 0 4px 20px #0007, inset 0 0 0 2px #151c13; }
.notice.error { border-color: #b76950; background: #593329; }
/* The start page is one framed portal, with a narrow account column. */
.auth-screen {
  display: grid; grid-template-columns: 158px minmax(0, 1fr) 280px;
  grid-template-areas: 'banner banner banner' 'bar bar bar' 'menu journal auth' 'footer footer footer';
  max-width: 1180px; margin: 28px auto; border: 3px solid #6c603c;
  outline: 1px solid #b49860; outline-offset: 2px; background: #273321;
  box-shadow: 0 10px 50px #0006; position: relative;
}
.realm-banner {
  grid-area: banner; height: 188px; position: relative; display: flex;
  align-items: center; justify-content: center; flex-direction: column; overflow: hidden;
  background: linear-gradient(90deg, #1422184d, #131d1855, #14221833), url('ui/artarian-panorama.png') center 49%/cover, #354830;
  border: 1px solid #c9ad6b; box-shadow: inset 0 0 0 3px #1b2015, inset 0 0 0 4px #bda36a77;
}
.realm-banner:before, .realm-banner:after { content: ''; position: absolute; inset: 9px; border: 1px solid #e3c77b66; pointer-events: none; }
.realm-banner:after { inset: 13px; border-color: #171d1455; }
.banner-title { display: flex; align-items: center; gap: 23px; margin-top: -14px; }
.banner-title h1 {
  color: #f1d293; font: bold 78px/.95 Georgia, 'Times New Roman', serif; letter-spacing: .035em;
  text-shadow: 0 2px #4c3920, 2px 3px #1b2116, -1px -1px #ffe6b9, 0 4px 12px #0009;
  font-variant: small-caps;
}
.banner-ornament { width: 42px; height: 1px; background: #d5b678; position: relative; box-shadow: 0 1px #111; }
.banner-ornament:after { content: ''; position: absolute; width: 9px; height: 9px; border: 1px solid #d5b678; transform: rotate(45deg); top: -4px; left: 17px; background: #3d452e; }
.banner-subtitle { margin-top: 13px; padding-left: .5em; font: 10px Verdana, sans-serif; letter-spacing: .5em; color: #f4e3b2; text-shadow: 0 1px 3px #000; }
.banner-caption { position: absolute; bottom: 21px; color: #f0e2c0; font: italic 13px Georgia, serif; text-shadow: 0 2px 3px #000; }
.portal-bar { grid-area: bar; display: flex; justify-content: space-between; padding: 6px 15px; background: repeating-linear-gradient(0deg, #0002 0 1px, transparent 1px 4px), #443b2a; border-block: 1px solid #ba9f61; font: 10px Verdana, sans-serif; color: #d5c394; }
.portal-menu { grid-area: menu; padding: 12px 10px; border-right: 3px double #a9925e; background: #243821; }
.wood-title { font: normal 18px Georgia, serif; color: #f4d795; text-align: center; background: repeating-linear-gradient(0deg, #00000015 0 1px, transparent 1px 3px), linear-gradient(#584432, #382b20); padding: 7px 6px; border: 1px solid #ad8b50; box-shadow: inset 0 0 0 2px #271e16; text-shadow: 0 1px #000; }
.portal-menu nav { display: grid; gap: 1px; margin: 10px 0 17px; }
.portal-menu nav a { font: 12px/1.6 Georgia, serif; text-decoration: none; padding: 7px 5px 7px 13px; color: #d9c18a; border-bottom: 1px solid #a18c5230; position: relative; }
.portal-menu nav a:before { content: ''; position: absolute; width: 3px; height: 3px; background: #a89153; top: 15px; left: 3px; }
.portal-menu nav a:hover, .portal-menu nav a.selected { background: #ffffff08; color: #ffe3a1; }
.realm-summary { text-align: center; font: 14px/1.8 Georgia, serif; color: #c9c5a4; }
.menu-divider { display: block; margin: 10px auto 18px; width: 75px; height: 1px; background: #a18c5280; }
.menu-beast { display: grid; place-items: center; margin: 12px 0 2px; min-height: 136px; }
.start-creature { display: block; image-rendering: pixelated; background-repeat: no-repeat; flex: none; }
.start-creature.moss { width: 80px; height: 96px; background-image: url('world/creatures/ancient_forest_v13_moss_guardian.png'); animation: moss-idle .96s steps(4) infinite; }
.start-creature.wolf { width: 72px; height: 56px; background-image: url('world/creatures/ancient_forest_v13_shadow_wolf.png'); animation: wolf-idle .96s steps(4) infinite; }
.start-creature.imp { width: 48px; height: 72px; background-image: url('world/creatures/ancient_forest_v13_root_imp.png'); animation: imp-idle .96s steps(4) infinite; }
@keyframes moss-idle { to { background-position-x: -320px; } }
@keyframes wolf-idle { to { background-position-x: -288px; } }
@keyframes imp-idle { to { background-position-x: -192px; } }
.menu-caption { text-align: center; color: #a9b392; font: italic 10px/1.5 Georgia, serif; }
.realm-journal {
  grid-area: journal; padding: 23px 26px 16px; color: #38392b;
  background: repeating-linear-gradient(0deg, #86693704 0 1px, transparent 1px 3px), #e7dfc1;
  box-shadow: inset 6px 0 16px #78602c22, inset -6px 0 16px #78602c22;
}
.welcome-letter { padding: 0 0 16px; border-bottom: 1px solid #a18c5270; margin-bottom: 17px; }
.journal-kicker { font: italic 12px Georgia, serif; color: #79683c; margin-bottom: 5px; }
.welcome-letter h2 { color: #384326; font-size: 26px; }
.welcome-letter>p:last-child { font: 14px/1.65 Georgia, serif; margin-top: 9px; }
.world-preview { position: relative; border: 1px solid #897643; padding: 4px; background: #393c26; box-shadow: 0 1px 4px #49371f33; }
.world-preview-window { overflow: hidden; height: clamp(140px, 18vw, 205px); }
.world-preview img { display: block; width: 140.625%; height: auto; max-width: none; margin-left: -18.57%; margin-top: -13.39%; }
.world-preview figcaption { background: #272e20; padding: 5px 4px 2px; text-align: center; font: italic 12px/1.4 Georgia, serif; color: #e0d4aa; }
.world-primer { margin-top: 17px; font: 13px/1.6 Georgia, serif; }
.world-primer h3 { font-size: 19px; color: #3f492a; margin-bottom: 5px; }
.world-primer p+p { margin-top: 4px; color: #6c654c; font-size: 12px; }
.journal-bottom { display: flex; justify-content: space-between; gap: 10px; font: 10px Verdana, sans-serif; border-top: 1px solid #a18c5270; color: #7a663b; margin-top: 17px; padding-top: 10px; }
.auth-card {
  grid-area: auth; align-self: stretch; padding: 12px 14px 18px; border: 0; border-left: 3px double #a9925e;
  background: #273722; box-shadow: none;
}
.segmented { display: flex; gap: 0; margin: 14px 0 0; }
.segmented button { flex: 1; min-height: 31px; padding: 5px 4px; font: 12px Georgia, serif; background: #433b2b; border-color: #96814f; color: #c8b994; }
.segmented button+button { border-left: 0; }
.segmented button.active { color: #ffe3a1; background: #692f26; border-bottom-color: #692f26; }
.auth-card form { padding: 16px 14px; background: repeating-linear-gradient(0deg, #00000006 0 1px, transparent 1px 4px), #692f26; border: 1px solid #ad8c51; border-top: 0; }
.auth-card label { font: 12px Georgia, serif; color: #ecd9af; margin-bottom: 5px; }
.auth-card input { min-height: 33px; padding: 6px 8px; font-size: 12px; }
.auth-card form>input, .password-field { margin-bottom: 14px; }
.password-field { position: relative; display: flex; }
.password-field input { padding-right: 50px; }
.password-field button { position: absolute; right: 3px; top: 3px; min-height: 27px; padding: 3px 5px; color: #645838; text-shadow: none; font-size: 9px; }
.password-field button:hover:not(:disabled) { color: #251e10; background: #65552815; }
.auth-card form>.primary { margin-top: 10px; min-height: 37px; font-size: 17px; }
.auth-card .field-help { color: #e0c49d; font: 11px/1.5 Georgia, serif; }
.auth-note { margin: 17px 9px 0; color: #d1ccac; text-align: center; font: 12px/1.6 Georgia, serif; }
.auth-creatures { display: flex; justify-content: center; align-items: end; margin-top: 20px; height: 90px; }
.auth-creatures { gap: 13px; }
.auth-creature-caption { margin-top: 5px; color: #a9b392; text-align: center; font: italic 10px Georgia, serif; }
.portal-footer { grid-area: footer; display: flex; justify-content: space-between; gap: 12px; padding: 10px 15px; border-top: 1px solid #a9925e; background: #28271c; color: #bdb18f; font: 10px Verdana, sans-serif; }
/* Account roster and character creation belong to the same framed world. */
.character-screen { max-width: 1180px; margin: 28px auto; border: 3px solid #6c603c; outline: 1px solid #b49860; outline-offset: 2px; background: #243420; padding: 0 24px 26px; box-shadow: 0 10px 50px #0006; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 130px; margin: 0 -24px; padding: 22px 27px; background: linear-gradient(90deg, #182519b3, #15201880), url('ui/artarian-panorama.png') center 50%/cover, #34482c; border-bottom: 3px double #b49860; }
.page-heading .wordmark { font-size: 37px; font-variant: small-caps; }
.page-heading .wordmark small { color: #e2cc8d; }
.account-line { display: flex; gap: 12px; align-items: center; padding: 6px 9px; border: 1px solid #96814f; background: #182316e6; color: #ded4b2; font-size: 11px; }
.account-line button { font-size: 11px; }
.character-heading { margin: 22px 0 20px; border-bottom: 1px solid #82704488; padding-bottom: 15px; }
.character-heading h1 { color: #e4c885; font-size: 29px; }
.character-heading .muted { font: 13px Georgia, serif; margin-top: 5px; }
.character-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.character-roster { padding: 17px; }
.character-roster>h2 { display: flex; align-items: center; justify-content: space-between; font-size: 19px; color: var(--copper); border-bottom: 1px solid #82704466; padding-bottom: 9px; }
.character-list { display: grid; gap: 8px; margin: 17px 0; }
.character-entry { display: flex; align-items: center; width: 100%; min-height: 73px; gap: 12px; padding: 8px 10px; text-align: left; background: #1c2b1a; }
.character-entry strong { display: block; font: bold 15px Georgia, serif; color: #eed797; }
.character-entry small { display: block; color: #b8b799; font-size: 10px; margin-top: 3px; }
.character-entry .character-level { margin-left: auto; font: 12px Georgia, serif; color: #d7bd79; }
.character-mini { width: 32px; height: 48px; object-fit: cover; object-position: 0 0; flex: none; }
.empty-state { padding: 20px 0; text-align: center; font: 13px/1.8 Georgia, serif; color: #c6c0a0; }
.creation-panel { padding: 21px 23px; color: #373c29; background: repeating-linear-gradient(0deg, #86693704 0 1px, transparent 1px 3px), #e7dfc1; border-color: #a38e58; box-shadow: inset 0 0 0 3px #baab7855; }
.creation-panel>.section-heading { margin-bottom: 20px; border-bottom: 1px solid #a18c5280; padding-bottom: 13px; }
.creation-panel .eyebrow, .creation-panel .count-pill, .creation-panel legend { color: #746138; }
.creation-panel .section-heading h2 { font-size: 25px; color: #37452a; }
.class-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.class-choice { padding: 10px 9px; min-height: 60px; text-align: left; background: #d3c9a6; color: #49412b; border-color: #a08c56; text-shadow: none; box-shadow: inset 0 1px #fff7, inset 0 -2px #82704430; }
.class-choice strong { display: block; font: bold 14px Georgia, serif; }
.class-choice small { display: block; font-size: 9px; color: #796a47; margin-top: 5px; }
.class-choice:hover:not(:disabled) { background: #e1d4ac; color: #2c3825; }
.class-choice.selected { background: #354a2d; color: #f4dda0; border-color: #6b713c; box-shadow: inset 0 0 0 2px #bba26755; }
.class-choice.selected:hover:not(:disabled) { background: #354a2d; color: #f4dda0; }
.class-choice.selected small { color: #c4c89d; }
.appearance-grid { display: grid; grid-template-columns: minmax(0, 1fr) 155px; gap: 22px; align-items: start; }
.choice-row { display: flex; gap: 6px; flex-wrap: wrap; }
.choice-button { font-size: 10px; padding: 5px 9px; min-height: 30px; background: #d3c9a6; color: #49412b; text-shadow: none; }
.choice-button:hover:not(:disabled), .choice-button.selected { background: #354a2d; color: #f4dda0; }
.color-choices { display: flex; gap: 9px; flex-wrap: wrap; }
.color-choice { padding: 0; width: 25px; height: 25px; min-height: 25px; border: 2px solid #e7dfc1; outline: 1px solid #867446; box-shadow: none; }
.color-choice.selected { outline: 2px solid #465736; outline-offset: 2px; }
.color-choice:hover:not(:disabled) { background: var(--swatch); border-color: #e7dfc1; }
.avatar-preview-wrap { margin-top: 18px; text-align: center; font-size: 10px; }
.avatar-stage { display: grid; place-items: center; height: 184px; padding: 10px; background: #34442b; border: 3px double #9d8b55; box-shadow: inset 0 -16px #1c2a1b35; margin-bottom: 7px; }
.avatar-stage canvas { width: 96px; height: 144px; }
.creation-panel .muted { color: #736345; }
.creation-panel .field-help { color: #746b4d; }
.class-detail { border-top: 1px solid #a18c5260; padding-top: 12px; margin-top: 18px; color: #635a3e; font: 13px/1.6 Georgia, serif; }
.creation-panel form>.primary { margin-top: 20px; }
.noscript-warning { position: fixed; inset: 0; display: grid; place-items: center; background: var(--ink); font-size: 18px; }
@media (max-width: 1230px) {
  .auth-screen, .character-screen { margin: 22px; }
}
@media (max-width: 1000px) {
  .auth-screen { grid-template-columns: 130px minmax(0, 1fr) 256px; }
  .realm-journal { padding: 20px 18px 15px; }
  .welcome-letter h2 { font-size: 23px; }
  .welcome-letter>p:last-child { font-size: 13px; }
  .auth-card { padding: 12px 10px; }
  .portal-menu { padding: 12px 8px; }
  .journal-bottom { font-size: 9px; }
  .character-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 14px; }
  .class-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .auth-screen { grid-template-columns: minmax(0, 1fr) 250px; grid-template-areas: 'banner banner' 'bar bar' 'journal auth' 'menu menu' 'footer footer'; margin: 17px; }
  .realm-banner { height: 178px; }
  .banner-title h1 { font-size: 63px; }
  .banner-caption { bottom: 19px; font-size: 12px; }
  .banner-ornament { width: 27px; }
  .banner-ornament:after { left: 10px; }
  .portal-menu { display: flex; align-items: center; padding: 8px 12px; gap: 13px; border: 0; border-top: 3px double #a9925e; }
  .portal-menu h2 { font-size: 15px; padding: 5px 11px; }
  .portal-menu nav { display: flex; margin: 0; flex-wrap: wrap; }
  .portal-menu nav a { padding: 5px 8px; font-size: 11px; }
  .portal-menu nav a:before, .realm-summary, .menu-beast, .menu-caption { display: none; }
  .realm-journal { padding: 18px 17px; }
  .world-preview-window { height: 155px; }
  .journal-bottom { flex-wrap: wrap; gap: 6px; }
  .character-screen { margin: 17px; padding: 0 18px 20px; }
  .page-heading { margin-inline: -18px; padding: 18px; min-height: 112px; }
  .page-heading .wordmark { font-size: 29px; }
  .character-layout { grid-template-columns: 1fr; }
  .character-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-roster { padding: 17px; }
  .creation-panel { padding: 20px; }
}
@media (max-width: 560px) {
  .auth-screen { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'banner' 'bar' 'auth' 'journal' 'menu' 'footer'; margin: 10px; }
  .realm-banner { height: 157px; }
  .banner-title { gap: 15px; }
  .banner-title h1 { font-size: 55px; }
  .banner-subtitle { font-size: 9px; margin-top: 10px; }
  .banner-caption { bottom: 14px; font-size: 11px; }
  .banner-ornament { display: none; }
  .portal-bar { padding: 6px 10px; font-size: 8px; }
  .auth-card { border: 0; padding: 12px 20px 16px; }
  .auth-card>.wood-title { font-size: 18px; }
  .auth-card form { padding: 13px 15px; }
  .auth-card input { min-height: 37px; font-size: 13px; }
  .auth-card form>.primary { min-height: 39px; }
  .auth-note { margin-top: 12px; font-size: 11px; }
  .auth-creatures, .auth-creature-caption { display: none; }
  .realm-journal { border-top: 3px double #a9925e; padding: 19px; }
  .welcome-letter h2 { font-size: 23px; }
  .world-preview-window { height: 145px; }
  .portal-menu { flex-direction: column; gap: 3px; }
  .portal-menu h2 { display: none; }
  .portal-footer { font-size: 8px; padding: 9px 10px; }
  .character-screen { margin: 10px; padding: 0 14px 18px; }
  .page-heading { margin-inline: -14px; padding: 14px; min-height: 100px; flex-wrap: wrap; gap: 8px; }
  .page-heading .wordmark { font-size: 26px; }
  .page-heading .wordmark small { display: none; }
  .account-line { font-size: 10px; padding: 2px 7px; }
  .account-line button { min-height: 27px; padding: 3px 5px; }
  .character-heading { margin-top: 19px; }
  .character-heading h1 { font-size: 26px; }
  .character-list { grid-template-columns: 1fr; }
  .creation-panel { padding: 17px; }
  .class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appearance-grid { grid-template-columns: minmax(0, 1fr) 103px; gap: 12px; }
  .avatar-stage { height: 159px; padding: 4px; }
  .avatar-stage canvas { width: 96px; height: 144px; }
  .choice-button { padding: 5px 7px; }
  .color-choices { gap: 8px; }
  .color-choice { width: 23px; height: 23px; min-height: 23px; }
  .class-detail { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; } }

.character-mini, .class-choice-sprite { width: 48px; height: 72px; flex: none; }