/* Atherion interface. Component sections are followed by their responsive rules. */

/* Design tokens and shared elements */
:root {
  color-scheme:dark;
  --ink:#07131e;
  --navy:#0c2333;
  --navy-raised:#102d40;
  --navy-light:#17435c;
  --gold:#c49a50;
  --gold-light:#f1d597;
  --gold-dark:#6e532d;
  --text:#e8e3d7;
  --muted:#8fa4ad;
  --line:rgba(190,149,77,.33);
  --blue:#58b8dc;
  --red:#d99382;
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",Arial,sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  min-width:320px;
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:var(--ink);
  color:var(--text);
  font:14px/1.5 var(--sans);
  background-image:radial-gradient(ellipse at 60% 0,rgba(31,68,88,.42),transparent 65%);
}

a {
  color:var(--gold-light);
  text-decoration:none;
}

button,input,select,textarea {
  font:inherit;
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:not-allowed;
}

img {
  max-width:100%;
  display:block;
}

svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}

h1,h2,h3,p {
  margin-top:0;
}

h1,h2,h3 {
  font-family:var(--serif);
  font-weight:600;
}

h1 {
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.5px;
  margin-bottom:0;
}

h2 {
  font-size:21px;
  line-height:1.2;
}

h3 {
  font-size:19px;
}

p {
  margin-bottom:14px;
}

a,button {
  touch-action:manipulation;
}

:focus-visible {
  outline:2px solid #8cd5eb;
  outline-offset:4px;
}

::selection {
  background:#7b6038;
  color:#fff;
}

button:disabled {
  opacity:.35;
}

main:focus {
  outline:none;
}

.skip-link {
  position:fixed;
  top:-70px;
  left:20px;
  z-index:200;
  background:var(--gold-light);
  color:var(--ink);
  padding:12px 20px;
}

.skip-link:focus {
  top:12px;
}

.eyebrow {
  font:10px/1.4 var(--sans);
  font-weight:600;
  letter-spacing:2.1px;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
}

.muted {
  color:var(--muted);
}

.tiny {
  font-size:11px;
}

.centered {
  text-align:center;
}

.small-tag {
  font:9px/1.4 var(--sans);
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:#b6bdba;
  border:1px solid rgba(143,164,173,.25);
  padding:4px 6px;
  white-space:nowrap;
}

.quiet-link {
  font-size:12px;
  color:#c8c6ba;
  display:flex;
  gap:15px;
  align-items:center;
}

.quiet-link:hover {
  color:var(--gold-light);
}

.text-link {
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:4px;
}

.required-mark {
  color:var(--gold);
  margin-left:5px;
}

.no-script-notice {
  padding:12px;
  background:var(--navy);
  border:1px solid var(--gold);
  position:fixed;
  bottom:10px;
  right:10px;
  z-index:100;
}

.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  background:#0c2537;
  border:1px solid var(--line);
  color:var(--gold);
  position:relative;
  border-radius:3px;
  font-size:25px;
  line-height:1;
}

.icon-button:hover {
  background:#1a4057;
  color:var(--gold-light);
  border-color:var(--gold);
}

.icon-button svg {
  width:21px;
  height:21px;
}

.status-light {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#6eb89e;
  margin:0 7px 1px 0;
  box-shadow:0 0 7px #6eb89e50;
}

.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-height:58px;
  margin-bottom:18px;
}

.page-heading .eyebrow {
  margin-bottom:7px;
}

/* Panels and shared controls */
.game-panel {
  background:linear-gradient(135deg,#0d2535,#071721 85%);
  border:1px solid var(--gold-dark);
  border-radius:2px;
  box-shadow:inset 0 0 0 2px #07131e,0 3px 6px #0002;
  min-width:0;
}

.panel-heading {
  min-height:45px;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,#17324655,transparent);
  position:relative;
}

.panel-heading h2 {
  font-size:17px;
  line-height:1.2;
  color:#e4cf9f;
  margin:0;
  flex:1;
}

.panel-heading>svg {
  width:20px;
  height:20px;
  color:var(--gold);
}

.panel-heading .small-tag {
  font-size:8px;
  padding:3px 4px;
  letter-spacing:.2px;
}

.panel-heading:after {
  position:absolute;
  content:"";
  left:15px;
  bottom:-2px;
  width:4px;
  height:4px;
  background:var(--gold-dark);
  transform:rotate(45deg);
}

.panel-more {
  font-size:18px;
  line-height:1;
}

.panel-body {
  padding:22px;
}

.panel-footnote {
  padding:0 18px 15px;
  font-size:11px;
  color:var(--muted);
  margin:0;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:39px;
  padding:9px 17px;
  border:1px solid #a1824c;
  background:linear-gradient(#16405b,#0b263a);
  color:#eedcb7;
  font:14px/1.3 var(--serif);
  border-radius:2px;
  box-shadow:inset 0 0 0 2px #061826,0 2px 3px #0005;
  transition:background .15s,border-color .15s,transform .15s;
}

.button:hover {
  border-color:#e6c275;
  background:linear-gradient(#235d7e,#123b54);
  color:#fff1d1;
}

.button:active {
  transform:translateY(1px);
}

.button-gold {
  background:linear-gradient(#ddbd74,#b58c42);
  color:#17202a;
  border-color:#ebd397;
  box-shadow:inset 0 0 0 2px #997435,0 2px 5px #0004;
  text-shadow:0 1px #f7e1a470;
  font-weight:700;
}

.button-gold:hover {
  background:linear-gradient(#ecd095,#c8a45d);
  color:#0a1a26;
  border-color:#ffe9ba;
}

.button-wide {
  width:100%;
}

.button-small {
  font-size:12px;
  min-height:32px;
  padding:6px 12px;
}

.button svg {
  width:18px;
  height:18px;
}

.flash-messages {
  margin-bottom:12px;
}

.flash-message {
  padding:11px 15px;
  background:#143d3c;
  border:1px solid #39776b;
  margin-bottom:8px;
  color:#cae2d6;
  font-size:12px;
}

.flash-message.error {
  border-color:#a66b5a;
  background:#3e2526;
  color:#f4cbbf;
}

.flash-message.warning {
  border-color:#8e7546;
  background:#383322;
  color:#e5d7b6;
}

/* Forms and validation */
.stacked-form {
  display:flex;
  flex-direction:column;
  gap:14px;
}

.form-field {
  min-width:0;
}

.form-field label {
  display:block;
  font-size:12px;
  font-weight:600;
  color:#d6d4c8;
  margin-bottom:6px;
}

.form-field input:not([type=checkbox]),.form-field select,.form-field textarea,.invite-result input {
  width:100%;
  max-width:100%;
  background:#06141f;
  color:#e6e3d8;
  border:1px solid #526271;
  border-radius:2px;
  padding:10px 12px;
  box-shadow:inset 0 2px 4px #0004;
  outline-offset:2px;
}

.form-field select {
  min-height:43px;
  padding-right:30px;
}

.form-field textarea {
  resize:vertical;
  min-height:100px;
  line-height:1.5;
}

.form-field input:focus,.form-field select:focus,.form-field textarea:focus {
  border-color:#c9ab6c;
  outline:2px solid #d9b16d20;
}

.form-field.has-error input,.form-field.has-error textarea {
  border-color:#c48572;
}

.field-help {
  font-size:10px;
  line-height:1.5;
  color:#8299a6;
  margin-top:6px;
}

.field-help ul {
  padding-left:17px;
  margin:4px 0 0;
}

.field-help li {
  margin:2px 0;
}

.field-errors,.form-errors {
  color:#edb8a7;
  font-size:11px;
}

.field-errors ul,.form-errors ul {
  list-style:none;
  padding:0;
  margin:7px 0 0;
}

.form-errors {
  background:#5a29293d;
  padding:11px 13px;
  border:1px solid #a06959;
  margin-bottom:3px;
}

.form-errors ul {
  margin:0;
}

.stacked-form>.button {
  align-self:flex-start;
}

.stacked-form>.button-wide {
  align-self:stretch;
}

.stacked-form .form-field:has(textarea) label {
  font-family:var(--sans);
}

.form-field input::placeholder,.form-field textarea::placeholder {
  color:#57717f;
}

.flash-message a {
  text-decoration:underline;
}

.invite-result {
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:17px;
}

.invite-result label {
  display:block;
  color:#d3bc87;
  font-size:12px;
  margin-bottom:7px;
}

.invite-result input {
  font:11px/1.5 var(--sans);
}

.invite-result p {
  color:var(--muted);
  font-size:10px;
  margin:7px 0 0;
}

/* Development pages, news, account and reports */
.unbuilt-scene {
  min-height:540px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
}

.unbuilt-landscape {
  position:absolute;
  inset:0;
  background:linear-gradient(#071828b8,#06141ef5),url("../art/city.6f83aa088814.png") center/cover;
  z-index:-1;
  filter:saturate(.55);
}

.unbuilt-content {
  max-width:510px;
  text-align:center;
  padding:40px 30px;
}

.large-seal {
  width:92px;
  height:92px;
  border:1px solid var(--gold-dark);
  background:radial-gradient(#1e4155,#0c2335);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 27px;
  transform:rotate(45deg);
  box-shadow:inset 0 0 0 5px #071722,inset 0 0 0 6px #8c70484d,0 0 50px #62a0b81a;
}

.large-seal svg {
  width:43px;
  height:43px;
  color:#d9b773;
  transform:rotate(-45deg);
}

.unbuilt-content h2 {
  font-size:33px;
  color:#e5d5b4;
  margin:11px 0 19px;
}

.unbuilt-content>p {
  color:#a3b5bd;
  line-height:1.8;
  font-size:13px;
}

.construction-note {
  font-size:10px;
  letter-spacing:.4px;
  color:#928d75;
  margin:22px 0;
}

.construction-note>span {
  color:var(--gold);
  margin-right:7px;
}

.news-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 245px;
  gap:17px;
}

.release-article {
  padding:26px 27px;
  border-bottom:1px solid var(--line);
}

.release-article h2 {
  margin:13px 0 14px;
  font-size:26px;
  color:#ead9b6;
}

.release-meta {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  font-size:10px;
  color:#8aa1ac;
}

.release-meta>span {
  color:#bea575;
  letter-spacing:.5px;
}

.prose {
  font-size:13px;
  color:#bfc9ca;
  line-height:1.8;
  overflow-wrap:anywhere;
}

.prose p:last-child {
  margin-bottom:0;
}

.chronicle-note {
  text-align:center;
  padding:30px 22px;
  align-self:start;
}

.chronicle-tree {
  width:78px;
  height:100px;
  color:#8c805e;
  margin-bottom:15px;
  stroke-width:1.1;
}

.chronicle-note h2 {
  font-size:23px;
  color:#d7c398;
}

.chronicle-note p {
  font-size:12px;
  color:#8ca3af;
  line-height:1.8;
}

.chronicle-note .small-tag {
  font-size:8px;
  display:inline-block;
  margin-top:6px;
}

.release-ack {
  padding:20px 25px;
}

.settings-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px;
}

.account-email {
  font:22px var(--serif);
  color:#e7d3a4;
  margin:8px 0 23px;
  overflow-wrap:anywhere;
}

.setting-facts {
  margin:0 0 22px;
}

.setting-facts>div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:10px 0;
  border-bottom:1px solid #8b764c30;
  font-size:12px;
}

.setting-facts dt {
  color:#8198a5;
}

.setting-facts dd {
  margin:0;
  color:#d2c9b4;
  overflow-wrap:anywhere;
}

.panel-body>.muted {
  font-size:12px;
  line-height:1.8;
}

.settings-coming {
  grid-column:1/-1;
}

.settings-coming p {
  font-size:13px;
}

.settings-coming p:last-child {
  margin-bottom:0;
}

.reports-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px;
}

.report-list article {
  padding:20px;
  border-bottom:1px solid var(--line);
}

.report-list h3 {
  margin:12px 0 10px;
  color:#dac69e;
}

.report-list p {
  font-size:12px;
  color:#a6bbc5;
  line-height:1.7;
  overflow-wrap:anywhere;
}

.empty-page {
  text-align:center;
  padding:35px 25px;
  color:#839da9;
}

.empty-page>svg {
  width:40px;
  height:40px;
  color:#a48b5b;
  margin-bottom:15px;
}

.empty-page p {
  font:17px var(--serif);
  margin-bottom:8px;
}

.empty-page small {
  font-size:11px;
}

.empty-page h2 {
  color:#c4b490;
  font-size:22px;
}

/* Patch notes dialog */
.patch-dialog {
  background:linear-gradient(140deg,#14334a,#081b29);
  color:var(--text);
  width:min(590px,calc(100vw - 30px));
  max-height:calc(100dvh - 48px);
  padding:0;
  border:1px solid var(--gold);
  border-radius:3px;
  box-shadow:0 0 0 4px #08131e,0 0 0 5px #9b7c404f,0 22px 90px #000c;
  overflow:hidden;
}

.patch-dialog::backdrop {
  background:#000b;
  backdrop-filter:blur(3px);
}

.patch-form {
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 50px);
}

.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:24px 25px 20px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,#29465b55,transparent);
}

.dialog-heading h2 {
  font-size:29px;
  margin:7px 0 0;
  color:#ecd4a4;
}

.dialog-heading .icon-button {
  width:32px;
  height:32px;
  font:24px var(--sans);
  align-self:flex-start;
}

.patch-scroll {
  padding:0 25px;
  overflow:auto;
  min-height:0;
}

.patch-entry {
  padding:22px 0;
  border-bottom:1px solid var(--line);
}

.patch-entry:last-child {
  border:0;
}

.patch-entry h3 {
  font-size:22px;
  margin:13px 0;
  color:#e4d8bd;
}

.patch-entry .prose {
  font-size:12px;
  line-height:1.75;
}

.dialog-footer {
  border-top:1px solid var(--line);
  padding:17px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  background:#06162299;
}

.dialog-footer>span {
  font-size:10px;
  color:#829ba8;
  max-width:150px;
}

.dialog-footer .button {
  font-size:12px;
}

/* Sign-in and initial account setup */
.auth-body {
  min-height:100dvh;
  background:#06121b;
}

.auth-stage {
  position:relative;
  isolation:isolate;
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(280px,1fr) 420px;
  align-items:center;
  gap:7vw;
  padding:60px max(6vw,30px) 70px;
  max-width:1800px;
  margin:auto;
  overflow:hidden;
}

.auth-scenery {
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,#03101d36 0%,#07182455 40%,#06131ee8 67%,#05121cef),linear-gradient(0deg,#05131fdd,transparent 50%,#06141d55),url("../art/city.6f83aa088814.png") 35% center/cover;
  filter:saturate(.75);
}

.auth-stage:after {
  content:"";
  position:absolute;
  inset:13px;
  z-index:-1;
  border:1px solid #ba965d40;
  pointer-events:none;
}

.auth-introduction {
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  padding:10px 0;
}

.brand-large {
  border:0;
  width:auto;
  font-size:48px;
  padding:0;
  max-width:310px;
}

.brand-large small {
  font-size:9px;
  letter-spacing:4px;
  margin-top:12px;
}

.auth-story {
  margin:65px 0 50px;
  text-shadow:0 2px 8px #03101ce0;
}

.auth-story .eyebrow {
  color:#e2bc77;
  letter-spacing:3px;
  font-size:10px;
}

.auth-story h1 {
  font-size:clamp(37px,4.6vw,68px);
  line-height:1.08;
  letter-spacing:-1.8px;
  color:#fff0ca;
  margin:20px 0 25px;
}

.auth-story p {
  font:18px/1.6 var(--serif);
  color:#ccd4d1;
  margin-bottom:28px;
}

.ornamental-rule {
  display:block;
  width:130px;
  font-size:9px;
  color:#c3a269;
  text-align:center;
  position:relative;
}

.ornamental-rule:before,.ornamental-rule:after {
  content:"";
  position:absolute;
  top:50%;
  height:1px;
  background:#d2b27388;
  width:50px;
}

.ornamental-rule:before {
  left:0;
}

.ornamental-rule:after {
  right:0;
}

.auth-world-note {
  font-size:10px;
  color:#a4b6b9;
  letter-spacing:.7px;
  margin:0;
}

.auth-panel {
  background:linear-gradient(140deg,#123045f5,#071b2af8);
  padding:32px;
  align-self:center;
  box-shadow:0 0 0 3px #06131e,0 0 0 4px #52606b45,0 20px 50px #0008;
}

.auth-panel-heading {
  padding-bottom:25px;
  border-bottom:1px solid var(--line);
  margin-bottom:24px;
}

.auth-panel-heading h2 {
  font-size:31px;
  letter-spacing:-.6px;
  color:#f1dbab;
  margin:12px 0;
}

.auth-panel-heading p {
  font-size:12px;
  color:#a4b9c4;
  margin:0;
  line-height:1.7;
}

.auth-panel .form-field label {
  font-size:11px;
}

.auth-panel .form-field input {
  min-height:42px;
}

.auth-panel .button {
  margin-top:5px;
  min-height:43px;
}

.auth-footnote {
  display:flex;
  align-items:flex-start;
  gap:10px;
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:18px;
}

.auth-footnote p {
  font-size:10px;
  line-height:1.7;
  color:#819ca9;
  margin:0;
}

.tiny-diamond {
  font-size:9px;
  color:#b09560;
  margin-top:3px;
}

.auth-footer {
  position:absolute;
  left:0;
  bottom:25px;
  width:100%;
  text-align:center;
  font-size:8px;
  letter-spacing:2px;
  color:#718590;
}

.auth-footer span {
  color:#a48c57;
  margin:0 15px;
}

/* Existing page adaptations: wide desktop */
@media(min-width:1600px) {
}

/* Existing page adaptations: compact desktop */
@media(max-width:1190px) {
  .page-heading h1 {
    font-size:26px;
  }

  .panel-heading h2 {
    font-size:16px;
  }

  .panel-heading {
    padding:10px 11px;
    gap:7px;
  }

  .panel-heading>.small-tag {
    font-size:7px;
    letter-spacing:0;
  }

  .news-layout {
    grid-template-columns:minmax(0,1fr) 210px;
  }

  .auth-stage {
    grid-template-columns:minmax(200px,1fr) 390px;
    gap:5vw;
    padding:45px 5vw 60px;
  }

  .auth-panel {
    padding:28px;
  }

  .auth-story h1 {
    font-size:48px;
  }

  .brand-large {
    font-size:40px;
    width:auto;
    max-width:280px;
  }

  .brand-large small {
    font-size:8px;
    letter-spacing:3px;
  }
}

/* Existing page adaptations: tablet */
@media(max-width:950px) {
  .page-heading {
    align-items:flex-start;
    min-height:50px;
    margin-bottom:14px;
  }

  .page-heading .eyebrow {
    font-size:8px;
    letter-spacing:1.6px;
  }

  .page-heading h1 {
    font-size:23px;
  }

  .news-layout {
    grid-template-columns:1fr;
  }

  .chronicle-note {
    display:none;
  }

  .reports-grid {
    grid-template-columns:1fr;
  }

  .settings-grid {
    grid-template-columns:1fr;
  }

  .panel-body {
    padding:18px;
  }

  .auth-stage {
    grid-template-columns:minmax(180px,1fr) 360px;
    gap:4vw;
    padding:38px 4vw 60px;
  }

  .auth-panel {
    padding:24px;
  }

  .auth-story h1 {
    font-size:40px;
    letter-spacing:-1px;
  }

  .auth-story p {
    font-size:16px;
  }

  .brand-large {
    font-size:34px;
    width:auto;
    max-width:250px;
  }

  .brand-large small {
    font-size:7px;
    letter-spacing:2.6px;
  }

  .auth-panel-heading h2 {
    font-size:28px;
  }

  .auth-panel-heading .eyebrow {
    font-size:8px;
    letter-spacing:1.7px;
  }
}

/* Existing page adaptations: compact tablet */
@media(max-width:700px) {
  .page-heading {
    min-height:50px;
    gap:10px;
    margin-bottom:14px;
    align-items:center;
  }

  .page-heading h1 {
    font-size:25px;
  }

  .page-heading .eyebrow {
    font-size:8px;
    letter-spacing:1.2px;
  }

  .page-heading>.small-tag {
    font-size:7px;
    max-width:115px;
    white-space:normal;
    text-align:center;
  }

  .auth-stage {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:25px;
    padding:34px 24px 65px;
    min-height:100dvh;
  }

  .auth-scenery {
    background:linear-gradient(#051521bb,#05121ef2 55%),url("../art/city.6f83aa088814.png") 35% top/auto 100vh;
  }

  .auth-introduction {
    align-self:auto;
    align-items:center;
    padding:0;
  }

  .brand-large {
    font-size:37px;
    max-width:290px;
    justify-content:center;
  }

  .brand-large small {
    font-size:7px;
    letter-spacing:3px;
    margin-top:10px;
    text-align:center;
  }

  .auth-story {
    display:none;
  }

  .auth-world-note {
    display:none;
  }

  .auth-panel {
    width:100%;
    max-width:410px;
    padding:27px;
  }

  .auth-panel-heading {
    padding-bottom:22px;
    margin-bottom:21px;
  }

  .auth-panel-heading h2 {
    font-size:30px;
  }

  .auth-footer {
    bottom:23px;
  }

  .auth-stage:after {
    inset:10px;
  }

  .unbuilt-scene {
    min-height:470px;
  }

  .unbuilt-content {
    padding:35px 23px;
  }

  .unbuilt-content h2 {
    font-size:29px;
  }

  .large-seal {
    width:76px;
    height:76px;
    margin-bottom:25px;
  }

  .large-seal svg {
    width:35px;
    height:35px;
  }

  .release-article {
    padding:22px 19px;
  }

  .release-article h2 {
    font-size:24px;
  }

  .panel-body {
    padding:18px;
  }

  .settings-grid {
    gap:12px;
  }

  .dialog-heading {
    padding:20px;
  }

  .dialog-heading h2 {
    font-size:26px;
  }

  .patch-scroll {
    padding:0 20px;
  }

  .dialog-footer {
    padding:15px 20px;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .dialog-footer>span {
    max-width:none;
    text-align:center;
    order:2;
  }

  .dialog-footer .button {
    width:100%;
  }

  .patch-entry .prose {
    font-size:12px;
  }
}

/* Existing page adaptations: phone */
@media(max-width:480px) {
  .page-heading h1 {
    font-size:24px;
  }

  .form-field input:not([type=checkbox]),.form-field select,.form-field textarea {
    font-size:16px;
  }

  .field-help {
    font-size:10px;
  }

  .auth-stage {
    padding:30px 20px 60px;
    gap:26px;
  }

  .auth-panel {
    padding:25px 22px;
  }

  .auth-panel-heading h2 {
    font-size:29px;
  }

  .brand-large {
    font-size:35px;
  }

  .release-meta {
    font-size:9px;
  }

  .panel-heading .small-tag {
    font-size:7px;
  }

  .reports-grid .panel-heading h2 {
    font-size:16px;
  }
}

[hidden] {
  display:none!important;
}

.account-email,
.report-list h3,
.release-article h2 {
  overflow-wrap:anywhere;
}

.form-field select {
  min-width:0;
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

  *,*:before,*:after {
    transition:none!important;
    animation:none!important;
  }
}

/* Compact fantasy game frame */
.game-body {
  display: flow-root;
  min-height: 100dvh;
  background: radial-gradient(ellipse at 50% 10%, #171b1f 0, #090c10 62%, #06080b 100%);
}
.game-shell {
  --rail-width: 160px;
  display: flex;
  flex-direction: column;
  width: calc(100% - 12px);
  min-height: calc(100dvh - 12px);
  margin: 6px auto;
  border: 1px solid #4d4537;
  background: #081722;
  box-shadow: 0 0 0 3px #060b10, 0 0 0 4px #423b2d66, 0 18px 60px #0009;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ornate-frame,
.game-shell .game-panel {
  position: relative;
  border: 1px solid #ad8542;
  border-image: url("../icons/frame-border.ac894f9aa472.svg") 32 / 17px / 3px stretch;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px #07131d, 0 2px 6px #0008;
}
.game-shell .game-panel {
  border-image-width: 14px;
  border-image-outset: 2px;
}

/* Shared logotype; larger authentication logotypes keep their own sizing. */
:where(.brand) {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 0 4px;
  color: #eac478;
  font: bold 28px/1 var(--serif);
  text-shadow: 0 2px 1px #000, 0 0 18px #b2823120;
}
:where(.brand) small {
  display: block;
  width: 100%;
  margin-top: 7px;
  color: #af8d50;
  text-align: center;
  font: 6px/1 var(--sans);
  letter-spacing: 2px;
}
:where(.brand-mark) {
  font-size: 15px;
  color: var(--gold);
}

/* Twelve primary destinations in one desktop row; less frequent targets stay in the dropdown. */
.masthead {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  height: 62px;
  padding-right: 7px;
  position: relative;
  z-index: 30;
  border-bottom: 2px solid #98753d;
  background: linear-gradient(180deg, #143044 0, #091c2b 42%, #05131d 100%);
  box-shadow: inset 0 1px #b9a27324, 0 3px 5px #0008;
}
.masthead .brand {
  position: relative;
  width: var(--rail-width);
  flex-shrink: 0;
  border-right: 1px solid #7c633847;
  padding: 5px 4px 8px;
  font-size: 26px;
}
.masthead .brand-mark {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
}
.masthead .brand > span:not(.brand-mark) {
  margin-top: 8px;
}
.top-navigation {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.top-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 5px 2px;
  position: relative;
  border-right: 1px solid #b4944c18;
  color: #e3c98e;
  font: 10px/1.1 var(--serif);
  white-space: nowrap;
}
.top-tab svg {
  width: 22px;
  height: 22px;
  color: #caa052;
  filter: drop-shadow(0 1px 1px #000);
}
.top-tab:hover {
  background: #234a6355;
  color: #fff0c4;
}
.top-tab.is-active {
  color: #fff4d4;
  background: linear-gradient(#234a62, #0c3851);
  box-shadow: inset 0 0 12px #66c0e51c;
}
.top-tab.is-active::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 4px;
  right: 4px;
  height: 2px;
  background: #e2c071;
  box-shadow: 0 -1px 6px #e2c07145;
}
.header-utilities {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 7px;
}
.header-utilities .icon-button {
  width: 27px;
  height: 29px;
  border-color: #94733d88;
  background: #0a2234;
}
.header-utilities .icon-button svg {
  width: 17px;
  height: 17px;
}
.notification-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e6b260;
  box-shadow: 0 0 5px #efb65c88;
}
.utility-menu {
  position: relative;
}
.utility-menu > summary {
  list-style: none;
  cursor: pointer;
}
.utility-menu > summary::-webkit-details-marker {
  display: none;
}
.utility-popover {
  position: absolute;
  top: 38px;
  right: 0;
  z-index: 50;
  width: 228px;
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  padding: 6px;
  background: #0a2030;
  border: 1px solid #a7864c;
  box-shadow: 0 8px 30px #000a, inset 0 0 0 2px #06121c;
}
.utility-popover > a,
.utility-popover button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  color: #d9c8a2;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 12px;
}
.utility-popover svg {
  width: 19px;
  height: 19px;
  color: #c19a54;
}
.utility-popover a:hover,
.utility-popover button:hover {
  background: #1d4158;
}
.utility-popover form {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 4px;
}
.menu-toggle,
.mobile-close,
.mobile-player-strip {
  display: none;
}

/* Narrow character rail and painted stone/banner decoration */
.game-layout {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  align-items: stretch;
}
.sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 10px 7px 0;
  background: #0b1b28;
  border-right: 1px solid #6d594146;
}
.sidebar-character {
  z-index: 2;
  padding: 17px 13px 18px;
  background: linear-gradient(135deg, #0b2639, #041521 80%);
}
.mini-profile {
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: #c7cdbf;
}
.mini-avatar {
  width: calc(100% - 9px);
  aspect-ratio: 4 / 5;
  position: relative;
  background: #15334c;
  border: 1px solid #ba8b42;
  box-shadow: 0 0 0 2px #05121b;
}
.mini-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.mini-banner {
  position: absolute;
  top: -2px;
  right: -20px;
  width: 23px;
  height: 64px;
  padding: 12px 2px 15px;
  background: linear-gradient(90deg, #1a4768, #1e5c7b);
  border: 1px solid #a98b50;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
.mini-banner svg {
  width: 18px;
  height: 27px;
  color: #cfddcf;
  stroke-width: 1.2;
}
.mini-profile > div:last-child {
  min-width: 0;
}
.mini-profile strong {
  display: block;
  color: #edcc85;
  font: bold 20px/1.05 var(--serif);
  overflow-wrap: anywhere;
}
.mini-profile > div > span:last-child {
  display: block;
  margin-top: 5px;
  color: #9fb3ba;
  font-size: 9px;
  line-height: 1.4;
}
.mini-experience {
  margin-top: 11px;
}
.experience-track {
  height: 7px;
  border: 1px solid #426174;
  background: #04101b;
  box-shadow: inset 0 1px 4px #0009;
}
.mini-experience > span {
  display: block;
  margin-top: 4px;
  color: #6d8c9b;
  font-size: 7px;
  text-align: center;
}
.resource-strip {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 13px;
}
.resource-strip > span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.resource-strip svg {
  width: 19px;
  height: 19px;
  color: #deb052;
}
.resource-strip .rune-icon {
  color: #61c1dd;
}
.resource-strip small {
  color: #b6c4c4;
  font: 11px var(--serif);
}
.resource-strip strong {
  margin-left: auto;
  color: #e3d4ab;
  font: bold 14px var(--serif);
}
.sidebar-motto {
  position: relative;
  margin: 17px 0 0;
  padding-top: 13px;
  border-top: 1px solid #92704480;
  color: #b89a60;
  text-align: center;
  font: italic 12px/1.4 var(--serif);
}
.sidebar-motto::before {
  content: '◇';
  position: absolute;
  left: 50%;
  top: -9px;
  padding: 0 5px;
  transform: translateX(-50%);
  color: #d2ac63;
  background: #061824;
  font-style: normal;
}
.sidebar-decoration {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: -10px -7px 0;
  overflow: hidden;
  background: #0b1b28;
}
.sidebar-decoration img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.main-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 17px 16px 0;
}
.city-page .main-content {
  padding: 9px 9px 0 5px;
}
.page-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 9px 0;
  border-top: 1px solid #50647533;
  color: #607b88;
  font-size: 8px;
}
.page-footer a {
  color: #8a9eaa;
}
.city-page .page-footer {
  margin-top: 6px;
  padding: 6px 3px;
  border: 0;
  font-size: 7px;
}
.status-light {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 5px 1px 0;
  border-radius: 50%;
  background: #73aa94;
}

/* Complete navigation is retained in a separate small-screen drawer. */
.world-drawer {
  display: none;
}
.nav-backdrop {
  display: none;
}
.side-navigation {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 39px;
  padding: 6px 9px;
  border: 1px solid transparent;
  color: #c7c8bc;
  font-size: 13px;
  line-height: 1.2;
}
.side-link svg {
  width: 21px;
  height: 21px;
  color: #bd9651;
}
.side-link:hover,
.side-link.is-active {
  color: #f2dbaa;
  background: linear-gradient(90deg, #16435e, #102d42);
  border-color: #a785454f;
}
.nav-development {
  margin-left: auto;
  color: #6e8290;
  font-size: 10px;
}

/* Town illustration with real HTML hotspots; desktop cover sizing follows below. */
.city-scene {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 2.4 / 1;
  isolation: isolate;
  background: #19364b;
  overflow: visible;
}
.city-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.scene-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(#04172513, transparent 30%, transparent 70%, #05121c26);
  box-shadow: inset 0 0 12px #0004;
}
.city-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 33px;
  padding: 4px 10px 5px 8px;
  border: 1px solid #d6ab5b;
  border-radius: 2px;
  background: linear-gradient(#16354aee, #041523f5);
  box-shadow: inset 0 0 0 2px #07121c, 0 0 0 1px #604626, 0 3px 5px #0009;
  color: #ffe3a8;
  font: bold 13px/1 var(--serif);
  white-space: nowrap;
  transition: background .15s, filter .15s;
}
.city-hotspot svg {
  width: 21px;
  height: 23px;
  color: #e3ba6d;
  filter: drop-shadow(0 1px 1px #000);
}
.city-hotspot:hover {
  z-index: 10;
  background: linear-gradient(#265a79, #10344b);
  filter: brightness(1.15);
}
.hotspot-arrow {
  margin-left: 1px;
  color: #caa25c;
  font: 18px/1 var(--serif);
}
.city-hotspot { left: calc(var(--spot-x) * 1%); top: calc(var(--spot-y) * 1%); }
.hotspot-fortress { --spot-x: 40; --spot-y: 18; }
.hotspot-hall { --spot-x: 78; --spot-y: 18; }
.hotspot-tavern { --spot-x: 19; --spot-y: 45; }
.hotspot-arena { --spot-x: 43; --spot-y: 42; }
.hotspot-guild { --spot-x: 64; --spot-y: 49; }
.hotspot-dungeon { --spot-x: 84; --spot-y: 61; }
.hotspot-weapon_shop { --spot-x: 12; --spot-y: 82; }
.hotspot-magic_shop { --spot-x: 31; --spot-y: 83; }
.hotspot-stable { --spot-x: 56; --spot-y: 84; }
.hotspot-watch { --spot-x: 76; --spot-y: 84; }

/* Three compact boards below the city */
.city-lower-grid {
  display: grid;
  grid-template-columns: 1fr 1.02fr 1fr;
  gap: 10px;
  margin-top: 11px;
}
.city-lower-grid > .game-panel {
  height: 177px;
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #0a2639, #041724 80%);
}
.city-lower-grid .panel-heading {
  min-height: 36px;
  padding: 9px 11px;
  gap: 7px;
  background: linear-gradient(#19384b55, transparent);
}
.city-lower-grid .panel-heading h2 {
  font-size: 14px;
  line-height: 1.1;
}
.city-lower-grid .panel-heading > svg {
  width: 20px;
  height: 20px;
}
.city-lower-grid .panel-heading .small-tag {
  font-size: 6px;
  padding: 3px 4px;
  letter-spacing: .1px;
}
.daily-list {
  list-style: none;
  margin: 0;
  padding: 4px 10px 8px;
}
.daily-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 4px 1px;
  border-bottom: 1px solid #7497aa22;
}
.daily-list li:last-child {
  border: 0;
}
.daily-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 29px;
  flex-shrink: 0;
  border: 1px solid #886e3f;
  background: #122a3b;
  color: #dec68a;
  font: 14px var(--serif);
  box-shadow: inset 0 0 0 2px #081521;
}
.daily-list strong {
  display: block;
  color: #d1d2c6;
  font: 12px/1.2 var(--serif);
}
.daily-list small {
  display: block;
  margin-top: 3px;
  color: #7593a4;
  font: 8px/1.2 var(--sans);
}
.empty-progress {
  margin-left: auto;
  color: #a2864e;
  font-size: 13px;
}
.city-news-panel {
  position: relative;
  isolation: isolate;
}
.city-news {
  padding: 8px 11px 0;
}
.city-news > a {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.city-news time {
  color: #7393a4;
  font-size: 8px;
  padding-top: 2px;
}
.city-news strong {
  display: block;
  color: #e0c794;
  font: bold 11px/1.3 var(--serif);
}
.city-news a:hover strong {
  color: #ffe7b8;
}
.city-news small {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 5px;
  color: #91a9b5;
  font: 10px/1.35 var(--serif);
}
.news-glimpse {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 43px;
  z-index: -1;
  background: linear-gradient(#061a29, transparent 35%), url("../art/city-wide.40ba38b68a3a.png") center 45% / cover;
  opacity: .6;
}
.empty-copy {
  color: #8ba5b2;
  font-size: 11px;
  line-height: 1.6;
}
.empty-contacts {
  text-align: center;
  padding: 10px 8px 8px;
}
.empty-contacts > svg {
  width: 29px;
  height: 29px;
  color: #557783;
  opacity: .8;
}
.empty-contacts p {
  margin: 4px 0 3px;
  color: #c8d0cb;
  font: 12px/1.25 var(--serif);
}
.empty-contacts small {
  display: block;
  margin-bottom: 8px;
  color: #7694a4;
  font-size: 8px;
}
.empty-contacts .button {
  min-height: 27px;
  padding: 4px 13px;
  font-size: 10px;
}

/* Compact desktop: keep the complete city inside a common laptop viewport. */
@media (min-width: 1024px) and (max-height: 820px) {
  .masthead .brand {
    font-size: 24px;
  }
  .top-tab {
    font-size: 9px;
  }
  .top-tab svg {
    width: 21px;
    height: 21px;
  }
  .city-lower-grid > .game-panel {
    height: 166px;
  }
  .city-lower-grid .panel-heading h2 {
    font-size: 13px;
  }
  .city-lower-grid .panel-heading {
    min-height: 34px;
    padding: 8px 10px;
  }
  .daily-list li {
    height: 39px;
  }
  .daily-list strong {
    font-size: 11px;
  }
  .daily-list small {
    font-size: 7.5px;
  }
  .empty-contacts {
    padding-top: 8px;
  }
  .empty-contacts > svg {
    height: 25px;
  }
  .city-hotspot {
    min-height: 30px;
    padding: 3px 8px 4px;
    font-size: 12px;
    gap: 6px;
  }
  .city-hotspot svg {
    width: 19px;
    height: 21px;
  }
}

/* One full-window shell; city and development scenes fit the desktop viewport. */
.main-content > .unbuilt-scene { flex: 1; }
@media (min-width: 1024px) and (min-height: 600px) {
  .section-page .game-shell { height: calc(100dvh - 12px); }
  .section-page .main-content, .section-page .unbuilt-scene { min-height: 0; }
  .section-page .page-heading, .section-page .page-footer { flex: 0 0 auto; }
  .city-page .game-shell { height: calc(100dvh - 12px); }
  .city-page .main-content { min-height: 0; }
  .city-page .city-scene { flex: 1; min-height: 200px; aspect-ratio: auto; container-type: size; overflow: hidden; }
  .city-page .city-art { object-fit: cover; }
  /* Map anchors follow the same centered cover scale as the image. Edge labels stay reachable. */
  .city-page .city-hotspot {
    left: clamp(76px, calc(50cqw + (var(--spot-x) - 50) * max(1cqw, 2.400494cqh)), calc(100cqw - 76px));
    top: clamp(22px, calc(50cqh + (var(--spot-y) - 50) * max(1cqh, .416581cqw)), calc(100cqh - 22px));
  }
  .city-page .city-lower-grid { flex: 0 0 auto; }
  .city-page .page-footer, .city-page .flash-messages { flex: 0 0 auto; }
  .city-page .flash-message { padding: 5px 10px; font-size: 11px; }
}
@media (min-width: 1024px) and (min-height: 600px) and (max-height: 820px) {
  .section-page .unbuilt-content { max-width: 620px; padding: 16px 30px; }
  .section-page .large-seal { width: 58px; height: 58px; margin-bottom: 19px; }
  .section-page .large-seal svg { width: 32px; height: 32px; }
  .section-page .unbuilt-content h2 { margin: 8px 0 12px; font-size: 27px; }
  .section-page .construction-note { margin: 14px 0; }
}

/* Tablet: the map stays wide and the navigation becomes a complete drawer. */
@media (max-width: 1023px) {
  .masthead {
    height: 62px;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
  }
  .masthead .brand {
    width: 175px;
    height: 60px;
    border: 0;
    font-size: 27px;
  }
  .top-navigation {
    display: none;
  }
  .menu-toggle,
  .mobile-close {
    display: inline-flex;
  }
  .menu-toggle {
    width: 33px;
    height: 35px;
    flex-shrink: 0;
  }
  .header-utilities {
    margin-left: auto;
    gap: 6px;
    padding-left: 0;
  }
  .header-utilities .icon-button {
    width: 31px;
    height: 33px;
  }
  .game-layout {
    display: flex;
  }
  .game-layout > .main-content { flex: 1; }
  .sidebar {
    display: none;
  }
  .mobile-player-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 30px;
    padding: 6px 13px;
    background: #051724;
    border-bottom: 1px solid #63543966;
    font-size: 10px;
  }
  .mobile-player-strip > a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    overflow-wrap: anywhere;
    color: #dcca9c;
  }
  .mobile-player-strip > a > span {
    font-size: 8px;
    color: #8199a6;
    flex-shrink: 0;
  }
  .mobile-player-strip > span {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    color: #adc6cf;
    font-size: 9px;
  }
  .mobile-player-strip svg {
    width: 14px;
    height: 14px;
    color: #68bdd5;
  }
  .main-content {
    padding: 15px 14px 0;
  }
  .city-page .main-content {
    padding: 8px 8px 0;
  }
  .world-drawer {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 270px;
    z-index: 80;
    padding: 13px 12px 20px;
    overflow-y: auto;
    background: linear-gradient(135deg, #102c3e, #071722);
    border-right: 1px solid #b18a46;
    box-shadow: 10px 0 40px #0009;
    transform: translateX(-110%);
    visibility: hidden;
    transition: transform .2s, visibility .2s;
  }
  .sidebar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    color: #e6ce9c;
    font: 21px var(--serif);
  }
  .mobile-close {
    width: 31px;
    height: 31px;
  }
  .nav-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    border: 0;
    background: #020812bf;
    backdrop-filter: blur(2px);
  }
  .nav-open .world-drawer {
    transform: translateX(0);
    visibility: visible;
  }
  body.nav-open {
    overflow: hidden;
  }
  .city-hotspot {
    font-size: 10px;
    min-height: 28px;
    gap: 5px;
    padding: 3px 6px;
  }
  .city-hotspot svg {
    width: 17px;
    height: 19px;
  }
  .hotspot-arrow {
    font-size: 15px;
  }
  .city-lower-grid {
    gap: 8px;
    margin-top: 10px;
  }
  .city-lower-grid > .game-panel {
    height: 179px;
  }
  .city-lower-grid .panel-heading {
    gap: 5px;
    padding: 8px;
  }
  .city-lower-grid .panel-heading h2 {
    font-size: 12px;
  }
  .city-lower-grid .panel-heading > svg {
    width: 17px;
  }
  .daily-panel .small-tag {
    display: none;
  }
  .daily-list {
    padding: 4px 8px;
  }
  .daily-list li {
    height: 43px;
    gap: 7px;
  }
  .daily-list strong {
    font-size: 10px;
  }
  .daily-list small {
    font-size: 7px;
  }
  .daily-seal {
    width: 20px;
    height: 27px;
    font-size: 12px;
  }
  .empty-progress {
    display: none;
  }
  .city-news {
    padding: 8px;
  }
  .city-news > a {
    gap: 7px;
  }
  .city-news time {
    font-size: 7px;
  }
  .city-news strong {
    font-size: 10px;
  }
  .city-news small {
    font-size: 9px;
  }
  .empty-contacts p {
    font-size: 11px;
  }
  .empty-contacts small {
    font-size: 7px;
  }
}

/* Portrait tablets use their remaining height for readable, stacked town boards. */
@media (min-width: 601px) and (max-width: 1023px) and (orientation: portrait) {
  .city-page .city-lower-grid { flex: 1; grid-template-columns: minmax(0, 1fr); }
  .city-page .city-lower-grid > .game-panel { height: auto; min-height: 165px; }
  .city-page .city-lower-grid .panel-heading h2 { font-size: 15px; }
  .city-page .daily-list strong, .city-page .empty-contacts p { font-size: 12px; }
  .city-page .daily-list small, .city-page .empty-contacts small { font-size: 9px; }
}

/* Phone: retain the scene as a real map and give its links readable labels. */
@media (max-width: 600px) {
  .game-shell {
    width: calc(100% - 12px);
    margin: 6px auto;
  }
  .masthead {
    height: 60px;
    padding: 0 8px;
    gap: 7px;
  }
  .masthead .brand {
    width: clamp(132px, 39vw, 153px);
    height: 58px;
    font-size: 25px;
  }
  .masthead .brand small {
    font-size: 5px;
    letter-spacing: 1.9px;
  }
  .header-utilities {
    gap: 4px;
  }
  .header-utilities .icon-button {
    width: 28px;
    height: 31px;
  }
  .main-content {
    padding: 15px 10px 0;
  }
  .city-page .main-content {
    padding: 7px 6px 0;
  }
  .city-scene {
    aspect-ratio: auto;
    padding-top: 41.6667%;
    background: #071c2b;
  }
  .city-art {
    height: auto;
    aspect-ratio: 2.4 / 1;
    object-fit: fill;
  }
  .scene-vignette {
    height: 0;
    padding-top: 41.6667%;
  }
  .city-hotspots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 9px;
    border-top: 1px solid #9b783d;
    background: linear-gradient(#0d2b40, #061927);
  }
  .city-hotspot {
    position: static;
    transform: none;
    min-height: 34px;
    justify-content: flex-start;
    padding: 5px 8px;
    font-size: 12px;
    gap: 8px;
  }
  .city-hotspot .hotspot-arrow {
    margin-left: auto;
  }
  .city-hotspot svg {
    width: 19px;
    height: 20px;
  }
  .city-lower-grid {
    grid-template-columns: 1fr;
    margin-top: 11px;
    gap: 10px;
  }
  .city-lower-grid > .game-panel {
    height: auto;
    min-height: 165px;
  }
  .city-lower-grid .panel-heading {
    min-height: 39px;
    padding: 9px 12px;
    gap: 8px;
  }
  .city-lower-grid .panel-heading h2 {
    font-size: 16px;
  }
  .city-lower-grid .panel-heading > svg {
    width: 20px;
    height: 20px;
  }
  .daily-panel .small-tag {
    display: inline-block;
  }
  .daily-list {
    padding: 4px 12px 7px;
  }
  .daily-list li {
    height: 43px;
    gap: 10px;
  }
  .daily-list strong {
    font-size: 12px;
  }
  .daily-list small {
    font-size: 8px;
  }
  .daily-seal {
    width: 24px;
    height: 29px;
    font-size: 14px;
  }
  .empty-progress {
    display: block;
  }
  .city-news-panel {
    padding-bottom: 45px;
  }
  .city-news {
    padding: 12px;
  }
  .city-news > a {
    gap: 10px;
  }
  .city-news time {
    font-size: 9px;
  }
  .city-news strong {
    font-size: 13px;
  }
  .city-news small {
    font-size: 11px;
  }
  .empty-contacts {
    padding: 14px 10px;
  }
  .empty-contacts p {
    font-size: 13px;
  }
  .empty-contacts small {
    font-size: 9px;
    margin-bottom: 11px;
  }
  .empty-contacts .button {
    min-height: 30px;
    font-size: 12px;
  }
}
/* Painted navigation atlas: measured square crops from the approved 2073 x 758 source. */
.painted-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 33px;
  height: 33px;
  background-image: url("../art/navigation-icons.21650fdf6950.png");
  background-repeat: no-repeat;
  background-size: auto;
  filter: drop-shadow(0 2px 1px #0009);
}
.nav-art-city {
  background-size: 702.711864% 256.949153%;
  background-position: 0.562430% 17.710583%;
}
.nav-art-character {
  background-size: 737.722420% 269.750890%;
  background-position: 17.299107% 20.545073%;
}
.nav-art-tavern {
  background-size: 839.271255% 306.882591%;
  background-position: 34.392114% 22.700587%;
}
.nav-art-arena {
  background-size: 835.887097% 305.645161%;
  background-position: 49.972603% 22.745098%;
}
.nav-art-hall {
  background-size: 860.165975% 314.522822%;
  background-position: 65.393013% 23.984526%;
}
.nav-art-guild {
  background-size: 825.896414% 301.992032%;
  background-position: 81.009879% 21.696252%;
}
.nav-art-dungeon {
  background-size: 719.791667% 263.194444%;
  background-position: 98.487395% 19.574468%;
}
.nav-art-weapon_shop {
  background-size: 797.307692% 291.538462%;
  background-position: 1.434087% 77.108434%;
}
.nav-art-magic_shop {
  background-size: 788.212928% 288.212928%;
  background-position: 17.348066% 77.777778%;
}
.nav-art-stable {
  background-size: 732.508834% 267.844523%;
  background-position: 33.184358% 77.894737%;
}
.nav-art-watch {
  background-size: 729.929577% 266.901408%;
  background-position: 49.692566% 78.059072%;
}
.nav-art-fortress {
  background-size: 714.827586% 261.379310%;
  background-position: 65.844083% 78.632479%;
}
.nav-art-album {
  background-size: 691.000000% 252.666667%;
  background-position: 82.515510% 82.751092%;
}
.nav-art-medals {
  background-size: 770.631970% 281.784387%;
  background-position: 98.115299% 78.118609%;
}
.top-tab:has(.painted-icon), .top-tab:has(.nav-rune-icon) {
  gap: 1px;
  padding-top: 3px;
}
.top-tab .nav-rune-icon {
  width: 33px;
  height: 33px;
  color: #70d9f2;
  fill: #123c59;
  filter: drop-shadow(0 2px 1px #0009) drop-shadow(0 0 4px #42b8db66);
}

/* Character reference layout; city, navigation and fitting room remain separate. */
.character-page .game-layout { grid-template-columns: minmax(0, 1fr); }
.character-page .main-content { padding: 7px 10px 0; }
.character-page .page-footer { margin-top: 7px; padding: 5px 2px; font-size: 7px; }
.character-page .flash-messages { margin-bottom: 6px; }
.character-page .flash-message { margin-bottom: 0; padding: 5px 10px; font-size: 10px; }
.character-status { display: flex; align-items: center; justify-content: flex-end; min-height: 26px; padding: 0 3px 4px; }
.character-resources, .character-resources > div, .character-resources dt { display: flex; align-items: center; gap: 6px; }
.character-resources { margin: 0; gap: 16px; }
.character-resources > div + div { padding-left: 16px; border-left: 1px solid #66839844; }
.character-resources dt { color: #a3b7bf; font-size: 10px; }
.character-resources dd { margin: 0; color: #e8d29c; font: bold 15px var(--serif); overflow-wrap: anywhere; }
.character-resources svg { width: 15px; height: 17px; color: #d8ad58; }
.character-resources .rune-icon { color: #66c0d9; }
.character-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); align-items: stretch; gap: 12px; width: 100%; }
.character-left, .character-right { min-width: 0; }
.character-sheet { display: grid; grid-template-rows: auto auto; gap: 9px; padding: 10px; background: radial-gradient(ellipse at 30% 0, #173d55aa, transparent 60%), #091c29; }
.character-information { display: grid; grid-template-rows: repeat(5, auto); align-content: start; gap: 9px; padding: 0; border: 0; background: none; box-shadow: none; }
.attributes-panel, .profile-overview, .mount-panel, .potions-panel, .medals-panel, .inventory-panel { min-width: 0; padding: 8px; background: linear-gradient(130deg, #122e40, #091c2b 70%); }

/* Four square side slots flank the portrait and the two lower weapon fields. */
.portrait-equipment { container-type: size; display: grid; grid-template-columns: auto 1fr 1fr auto; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 6px; height: 360px; width: min(100%, 425px); margin-inline: auto; }
.equipment-column { display: grid; grid-row: 1 / 5; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 6px; width: min(calc((100cqh - 18px) / 4), 22cqw); min-width: 0; }
.equipment-left { grid-column: 1; }
.equipment-right { grid-column: 4; }
.equipment-bottom { display: grid; grid-column: 2 / 4; grid-row: 4; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.equipment-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 0; border: 1px solid #9f7f45; border-radius: 2px; box-shadow: inset 0 0 0 2px #04121e, inset 0 0 15px #0007; background: linear-gradient(135deg, #0d2639, #04111c); }
.equipment-slot svg { width: 29px; height: 29px; min-height: 0; flex-shrink: 1; color: #6d8b9b; opacity: .78; stroke-width: 1.25; }
.equipment-slot span { color: #91a7af; font-size: 9px; }
.equipment-slot small { color: #9ca8ad; font-size: 8px; line-height: 1; }
.equipment-slot.is-unavailable { border-color: #617079; background: repeating-linear-gradient(135deg, #142531, #142531 5px, #0b1b27 5px, #0b1b27 10px); }
.equipment-slot.is-unavailable svg { opacity: .35; }
.avatar-center { display: flex; flex-direction: column; grid-column: 2 / 4; grid-row: 1 / 4; min-width: 0; min-height: 0; border: 1px solid #ac8746; border-image-width: 14px; background: #0d2a40; }
.avatar-image { position: relative; flex: 1; min-height: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #345b70, #14364c 65%, #081e2d); isolation: isolate; }
.avatar-image img { position: absolute; left: 50%; top: -15%; width: auto; max-width: none; height: 185%; transform: translateX(-50%); }
.avatar-image .avatar-preview-open { top: 4px; left: 4px; bottom: auto; min-height: 18px; max-width: calc(100% - 8px); padding: 2px 5px; border-color: #8299a455; background: #071d2ba8; box-shadow: none; font-size: 9px; line-height: 1.1; white-space: normal; }
.character-identity { flex: 0 0 auto; padding: 3px 5px 1px; border-top: 1px solid #a4864655; text-align: center; }
.character-identity h2 { margin: 0; color: #f0d792; font: bold 24px/1.05 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 2px #000; }
.character-class { display: flex; flex: 0 0 20px; align-items: center; justify-content: center; gap: 4px; min-width: 0; color: #ddc99a; font-size: 11px; white-space: nowrap; }
.character-class-icon { width: 15px; height: 17px; color: #c5ad73; }
.character-level-bar { display: flex; flex: 0 0 21px; align-items: center; justify-content: center; border-top: 1px solid #9b8547; background: linear-gradient(#315a20, #17380f 55%, #244619); box-shadow: inset 0 1px 0 #a4cd6a33, inset 0 -1px 3px #0008; color: #f5f0d8; font: bold 12px/1 var(--serif); text-shadow: 0 1px 2px #000; }
.character-level-bar:focus-visible { outline: 2px solid #efd390; outline-offset: -2px; }
.character-guild { display: flex; flex: 0 0 18px; align-items: center; justify-content: center; color: #a9c0c9; font-size: 10px; line-height: 1.1; }
.character-guild:hover { color: #f0d792; }
.character-page .panel-heading { min-height: 29px; padding: 3px 2px 5px; background: none; }
.character-page .panel-heading h2 { display: flex; align-items: center; gap: 6px; margin: 0; color: #dfc690; font-size: 18px; }
.character-page .panel-heading h2 svg { width: 21px; height: 22px; color: #bda477; }
.attributes-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.attribute-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 3px 2px; }
.attribute-list, .derived-stats { margin: 0; padding: 0; }
.attribute-list > div, .derived-stats > div { display: flex; align-items: center; gap: 7px; min-height: 28px; border-bottom: 1px solid #6783942b; }
.attribute-list > div:last-child, .derived-stats > div:last-child { border-bottom: 0; }
.attribute-list dt, .derived-stats dt { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; color: #c3cfcf; font-size: 12px; }
.attribute-list svg, .derived-stats svg { width: 20px; height: 20px; color: #b19a6a; flex-shrink: 0; }
.attribute-list > div:nth-child(2) svg, .derived-stats [data-attribute-effect='dexterity'] svg { color: #a4b978; }
.attribute-list > div:nth-child(3) svg, .derived-stats [data-attribute-effect='intelligence'] svg { color: #8baed3; }
.attribute-list > div:nth-child(4) svg, .derived-stats [data-attribute-effect='endurance'] svg { color: #c37468; }
.attribute-list > div:nth-child(5) svg, .derived-stats [data-attribute-effect='luck'] svg { color: #91b26e; }
.attribute-list dd, .derived-stats dd { margin: 0; color: #c7b88d; font: 14px var(--serif); }
.attribute-list button { flex-shrink: 0; width: 22px; height: 22px; padding: 0; border: 1px solid #ba914b; border-radius: 2px; box-shadow: inset 0 0 0 2px #051524; background: #17445f; color: #e4b960; font: 22px/1 var(--serif); }
.derived-stats { padding-left: 10px; border-left: 1px solid #748ba02e; }
.armor-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 23px; margin: 0; padding: 1px 2px; border-top: 1px solid #7891a12d; }
.armor-summary dt { display: flex; align-items: center; gap: 5px; color: #c4b68d; font-size: 10px; }
.armor-summary svg { width: 16px; height: 17px; color: #acbcca; }
.armor-summary dd { margin: 0; color: #dfd3b8; font: 14px var(--serif); }
.armor-summary dd.tiny { color: #829ba8; font: 8px var(--sans); }

.attribute-row {
  position: relative;
}
.attribute-row:focus-visible {
  outline-offset: 1px;
  background: #1b425755;
}
.attribute-list .attribute-hint {
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  z-index: 25;
  width: min(235px, calc(100vw - 48px));
  padding: 10px 12px;
  border: 1px solid #b6914c;
  border-radius: 2px;
  background: #0a2233;
  box-shadow: 0 4px 15px #0009;
  color: #bbced5;
  font: 11px/1.5 var(--sans);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.attribute-hint strong,
.attribute-hint span {
  display: block;
}
.attribute-hint strong {
  margin-bottom: 4px;
  color: #e1c38a;
  font: bold 14px var(--serif);
}
.attribute-row:hover .attribute-hint,
.attribute-row:focus .attribute-hint,
.attribute-row:focus-within .attribute-hint {
  opacity: 1;
  visibility: visible;
}
/* Separate information, parchment, empty extras, medals and inventory frames. */
.profile-overview { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(85px, .75fr) minmax(85px, .75fr); grid-template-rows: auto auto auto; gap: 3px 10px; }
.profile-overview > header { grid-column: 1; grid-row: 1; }
.profile-facts { display: contents; }
.profile-facts > div { min-width: 0; }
.profile-rank, .profile-honor { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; grid-column: 1; }
.profile-rank { grid-row: 2; }
.profile-honor { grid-row: 3; }
.profile-facts dt { color: #a5bac5; font-size: 11px; }
.profile-facts dt svg { width: 20px; height: 21px; margin-right: 4px; color: #b4a17a; vertical-align: middle; }
.profile-facts dd { min-width: 0; margin: 0; color: #ddcda9; font-size: 12px; overflow-wrap: anywhere; }
.profile-rank dd, .profile-honor dd { text-align: right; }
.profile-facts small { display: block; margin-top: 1px; color: #8da4b0; font-size: 8px; }
.profile-facts a { color: inherit; }
.profile-facts a:hover { color: #f1d597; }
.profile-album, .profile-title { display: flex; flex-direction: column; justify-content: center; grid-row: 1 / 4; padding: 5px; border: 1px solid #997b453e; background: #06182588; text-align: center; }
.profile-album { grid-column: 2; }
.profile-title { grid-column: 3; }
.profile-album dt, .profile-title dt { font-size: 10px; }
.profile-album dt svg, .profile-title dt svg { display: block; width: 28px; height: 29px; margin: 0 auto 3px; }
.profile-album dd, .profile-title dd { margin-top: 3px; font-size: 10px; }
.description-card.parchment { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(18px, 1fr) auto; gap: 5px 10px; min-width: 0; min-height: 95px; padding: 9px 12px; color: #2a2a20; background: linear-gradient(120deg, #e6c78c, #d3ae70); box-shadow: inset 0 0 10px #94612c40; }
.description-card h2 { align-self: center; margin: 0; color: #2b281c; font: bold 19px/1.1 var(--serif); }
.description-card .button { grid-row: 1; grid-column: 2; align-self: center; min-height: 25px; padding: 3px 8px; font-size: 10px; }
.description-text { grid-row: 2; grid-column: 1 / -1; min-height: 18px; margin: 0; padding-right: 5px; overflow-y: auto; overflow-wrap: anywhere; font-size: 12px; line-height: 1.4; scrollbar-color: #917044 #d1ae70; scrollbar-width: thin; }
.profile-interactions { grid-row: 3; grid-column: 1 / -1; min-height: 16px; max-height: 82px; overflow-y: auto; border-top: 1px solid #84603950; }
.profile-interactions summary { color: #59452e; cursor: pointer; font-size: 10px; }
.profile-interactions summary span { float: right; padding-right: 3px; color: #755d3f; font-size: 9px; }
.profile-interactions p { margin: 6px 0 4px; color: #59452e; font-size: 10px; }
.profile-action-preview { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 4px; padding: 0; list-style: none; color: #59452e; font-size: 10px; }
.character-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; min-height: 0; }
.mount-panel, .potions-panel { display: flex; flex-direction: column; min-height: 0; }
.compact-empty { display: flex; flex: 1; align-items: center; gap: 10px; padding-top: 5px; }
.mount-empty-slot { flex-shrink: 0; width: 70px; height: 56px; border: 1px solid #9a7b4677; border-radius: 2px; box-shadow: inset 0 0 8px #0009; background: #061623; }
.compact-empty p { margin: 0 0 5px; color: #a3b8c0; font-size: 11px; }
.compact-empty .button { min-height: 25px; padding: 3px 9px; font-size: 10px; }
.potion-slots { display: grid; flex: 1; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding-top: 5px; }
.potion-slots > span { display: grid; place-items: center; min-height: 47px; max-height: 88px; border: 1px solid #9a7b4677; border-radius: 2px; box-shadow: inset 0 0 8px #0009; background: #061623; }
.potion-slots svg { width: 23px; height: 26px; color: #5f7d8c; opacity: .6; }
.potions-panel > p { margin: 5px 0 0; font-size: 9px; }
.medals-panel { display: flex; flex-direction: column; min-height: 0; }
.medals-heading { display: flex; align-items: center; gap: 7px; min-height: 27px; padding: 1px 2px 4px; border-bottom: 1px solid #7891a12d; color: #e2cca0; font: 18px var(--serif); }
.medals-heading > svg { width: 21px; height: 23px; color: #bda477; }
.medals-heading h2 { margin: 0; font: inherit; color: inherit; }
.medals-heading small { margin-left: auto; color: #8097a3; font: 8px var(--sans); }
.medal-row { display: flex; flex: 1; align-items: center; justify-content: center; gap: 18px; padding: 6px 2px 2px; }
.medal-slot { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid #637681; border-radius: 50%; background: radial-gradient(#183346, #071722); box-shadow: inset 0 0 0 2px #07131e; color: #637d8c; }
.medal-slot svg { width: 25px; height: 27px; opacity: .7; }
.medal-lock { position: absolute; right: -1px; bottom: 0; width: 9px; height: 7px; border: 1px solid #a2acaa; border-radius: 1px; background: #132b3b; }
.medal-lock::before { position: absolute; content: ''; left: 1px; top: -5px; width: 5px; height: 5px; border: 1px solid #a2acaa; border-bottom: 0; border-radius: 4px 4px 0 0; }
.inventory-panel { --inventory-slot-size: clamp(56px, 10dvh, 96px); display: flex; flex-direction: column; min-height: 0; }
.inventory-panel .small-tag { font-size: 7px; letter-spacing: 0; }
.inventory-slots { display: grid; grid-template-columns: repeat(5, minmax(0, var(--inventory-slot-size))); justify-content: center; flex: 0 0 auto; gap: 6px; min-height: 0; padding-top: 5px; }
.inventory-slots > span { aspect-ratio: 1; min-height: 0; border: 1px solid #aa864477; border-radius: 2px; background: linear-gradient(135deg, #0a2539, #04131e); box-shadow: inset 0 0 10px #0007; }

/* Description editing is a real server form inside a dismissible dialog. */
.character-form-panel .panel-heading h2 {
  font-size: 17px;
}
.compact-form {
  padding: 16px 18px;
}
.creation-panel .form-field label {
  font-size: 11px;
}
.creation-panel .form-field input,
.creation-panel .form-field select {
  padding: 8px 10px;
  min-height: 36px;
}
.creation-panel .form-field textarea {
  min-height: 70px;
}
.creation-panel .stacked-form {
  gap: 10px;
}
.creation-panel .panel-footnote {
  font-size: 10px;
}
.description-dialog {
  width: min(540px, calc(100vw - 28px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  overflow-y: auto;
  color: var(--text);
  background: linear-gradient(140deg, #14334a, #071a28);
  border: 1px solid #caa15b;
  border-radius: 3px;
  box-shadow: 0 0 0 4px #07131f, 0 0 0 5px #9b7c4055, 0 20px 80px #000b;
}
.description-dialog::backdrop {
  background: #020910bd;
  backdrop-filter: blur(3px);
}
.description-dialog .dialog-heading {
  padding: 22px 23px 18px;
}
.description-dialog .dialog-heading h2 {
  font-size: 26px;
}
.description-dialog .compact-form {
  padding: 21px 23px 23px;
}
.description-dialog textarea {
  min-height: 180px;
  max-height: 45dvh;
}
.editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* The completed desktop sheet uses the window; creation and small screens scroll. */
@media (min-width: 1024px) and (min-height: 600px) {
  .character-page:not(.character-creation) { display: flow-root; min-height: 100dvh; }
  .character-page:not(.character-creation) .game-shell { height: calc(100dvh - 12px); }
  .character-page:not(.character-creation) .masthead { flex: 0 0 62px; }
  .character-page:not(.character-creation) .game-layout { flex: 1; min-height: 0; }
  .character-page:not(.character-creation) .main-content { display: flex; flex-direction: column; min-height: 0; padding-top: 3px; }
  .character-page:not(.character-creation) .flash-messages, .character-page:not(.character-creation) .character-status, .character-page:not(.character-creation) .page-footer { flex: 0 0 auto; }
  .character-page:not(.character-creation) .character-status { min-height: 22px; padding-bottom: 2px; }
  .character-page:not(.character-creation) .page-footer { margin-top: 4px; padding-top: 3px; padding-bottom: 3px; }
  .character-page:not(.character-creation) .character-grid { flex: 1; min-height: 0; }
  .character-page:not(.character-creation) .character-sheet { container-type: inline-size; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding: 8px; gap: 8px; }
  .character-page:not(.character-creation) .portrait-equipment { justify-self: center; align-self: center; width: auto; height: 100%; max-height: calc(100cqw / 1.18); max-width: 100%; aspect-ratio: 1.18; }
  .character-page:not(.character-creation) .character-information { min-height: 0; align-content: stretch; grid-template-rows: auto minmax(95px, 165px) minmax(112px, 1fr) minmax(96px, .65fr) max-content; gap: 8px; }
  .character-page:not(.character-creation) .character-extras { container-type: size; }
  .character-page:not(.character-creation) .mount-empty-slot { width: clamp(58px, 50cqh, 110px); height: clamp(58px, 50cqh, 110px); }
  .character-page:not(.character-creation) .medal-slot { width: clamp(40px, 6dvh, 64px); height: clamp(40px, 6dvh, 64px); }
  .character-page:not(.character-creation) .medal-slot svg { width: 65%; height: 65%; }
  .character-page:not(.character-creation) .attributes-panel { padding: 5px; }
  .character-page:not(.character-creation) .attribute-list > div, .character-page:not(.character-creation) .derived-stats > div { min-height: 26px; }
}
@media (min-width: 1024px) and (min-height: 600px) and (max-height: 700px) {
  .character-page:not(.character-creation) .main-content { padding-top: 2px; }
  .character-page:not(.character-creation) .character-status { min-height: 20px; padding-bottom: 0; }
  .character-page:not(.character-creation) .page-footer { margin-top: 3px; padding-block: 2px; }
  .character-page:not(.character-creation) .character-sheet { padding: 5px; gap: 5px; }
  .character-page:not(.character-creation) .attributes-panel { padding: 3px; }
  .character-page:not(.character-creation) .panel-heading { min-height: 24px; padding-top: 1px; padding-bottom: 2px; }
  .character-page:not(.character-creation) .panel-heading h2 { font-size: 17px; }
  .character-page:not(.character-creation) .attribute-columns { padding-block: 2px; }
  .character-page:not(.character-creation) .armor-summary { min-height: 20px; padding-block: 0; }
  .character-page:not(.character-creation) .character-information { gap: 5px; grid-template-rows: auto minmax(78px, 1fr) minmax(108px, 1fr) minmax(78px, .7fr) max-content; }
  .character-page:not(.character-creation) .profile-overview, .character-page:not(.character-creation) .mount-panel, .character-page:not(.character-creation) .potions-panel, .character-page:not(.character-creation) .medals-panel, .character-page:not(.character-creation) .inventory-panel { padding: 5px; }
  .character-page:not(.character-creation) .profile-overview { gap: 1px 8px; }
  .character-page:not(.character-creation) .profile-album, .character-page:not(.character-creation) .profile-title { padding: 3px; }
  .character-page:not(.character-creation) .profile-album dt svg, .character-page:not(.character-creation) .profile-title dt svg { width: 23px; height: 24px; margin-bottom: 1px; }
  .character-page:not(.character-creation) .description-card { min-height: 78px; padding: 6px 9px; gap: 3px 8px; }
  .character-page:not(.character-creation) .description-card h2 { font-size: 18px; }
  .character-page:not(.character-creation) .description-text { font-size: 11px; }
  .character-page:not(.character-creation) .potion-slots > span { min-height: 34px; }
  .character-page:not(.character-creation) .potions-panel > p { margin-top: 3px; }
  .character-page:not(.character-creation) .medals-heading { min-height: 24px; padding-bottom: 2px; font-size: 17px; }
  .character-page:not(.character-creation) .medal-row { padding-top: 3px; gap: 15px; }
  .character-page:not(.character-creation) .medal-slot { width: 40px; height: 40px; }
  .character-page:not(.character-creation) .medal-slot svg { width: 25px; height: 27px; }
  .character-page:not(.character-creation) .equipment-slot { gap: 1px; }
  .character-page:not(.character-creation) .equipment-slot svg { width: 25px; height: 25px; }
  .character-page:not(.character-creation) .equipment-slot span { font-size: 8px; }
  .character-page:not(.character-creation) .character-identity { padding-top: 2px; padding-bottom: 0; }
  .character-page:not(.character-creation) .character-identity h2 { font-size: 20px; }
  .character-page:not(.character-creation) .character-class { flex-basis: 16px; font-size: 10px; }
  .character-page:not(.character-creation) .character-level-bar { flex-basis: 19px; }
  .character-page:not(.character-creation) .character-guild { flex-basis: 15px; }
}
@media (min-width: 1024px) and (min-height: 600px) and (max-height: 620px) {
  .character-page:not(.character-creation) .character-information { gap: 4px; grid-template-rows: auto minmax(78px, 1fr) minmax(90px, 1fr) minmax(78px, .7fr) max-content; }
  .character-page:not(.character-creation) .profile-overview { padding-block: 3px; }
  .character-page:not(.character-creation) .inventory-panel { --inventory-slot-size: 56px; padding-block: 4px; }
  .character-page:not(.character-creation) .mount-empty-slot { width: 48px; height: 48px; }
}
@media (max-width: 1023px) {
  .character-page .main-content { padding: 6px 8px 0; }
  .character-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .character-sheet { padding: 6px; gap: 8px; }
  .portrait-equipment { width: 100%; height: 315px; }
  .character-identity h2 { font-size: 22px; }
  .attributes-panel { padding: 5px; }
  .character-page .panel-heading h2 { font-size: 16px; }
  .character-page .panel-heading h2 svg { width: 18px; height: 20px; }
  .attribute-columns, .attributes-heading { gap: 6px; }
  .attribute-list > div, .derived-stats > div { gap: 4px; }
  .attribute-list dt, .derived-stats dt { gap: 4px; font-size: 10px; }
  .attribute-list svg, .derived-stats svg { width: 15px; height: 17px; }
  .attribute-list button { width: 19px; height: 21px; }
  .derived-stats { padding-left: 6px; }
  .profile-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; }
  .profile-overview > header { grid-column: 1 / -1; grid-row: 1; }
  .profile-rank { grid-column: 1 / -1; grid-row: 2; }
  .profile-honor { grid-column: 1 / -1; grid-row: 3; }
  .profile-album { grid-column: 1; grid-row: 4; }
  .profile-title { grid-column: 2; grid-row: 4; }
  .description-card.parchment { grid-template-columns: minmax(0, 1fr); min-height: 160px; padding: 8px; }
  .description-card .button { grid-column: 1; grid-row: 3; }
  .description-text { max-height: 100px; font-size: 11px; }
  .profile-interactions { grid-row: 4; }
  .character-extras { gap: 8px; }
  .mount-panel, .potions-panel, .medals-panel, .inventory-panel { padding: 6px; }
  .compact-empty { flex-wrap: wrap; gap: 6px; }
  .mount-empty-slot { width: 58px; height: 45px; }
  .potion-slots { gap: 4px; }
  .potion-slots > span { height: 40px; }
  .medal-row { gap: 7px; }
  .medal-slot { width: 34px; height: 34px; }
  .medals-heading { font-size: 16px; }
  .medals-heading small { font-size: 7px; }
  .inventory-panel { --inventory-slot-size: 56px; }
  .compact-form { padding: 13px; }
}
@media (max-width: 600px) {
  .character-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .portrait-equipment { height: 310px; }
  .character-information { gap: 10px; }
  .description-card.parchment { grid-template-columns: minmax(0, 1fr) auto; min-height: 115px; }
  .description-card .button { grid-column: 2; grid-row: 1; }
  .profile-interactions { grid-row: 3; }
  .character-extras { gap: 9px; }
  .compact-empty { flex-wrap: nowrap; }
  .medal-row { gap: 16px; padding-top: 8px; padding-bottom: 4px; }
  .editor-actions { flex-wrap: wrap; gap: 8px; }
  .editor-actions .button { font-size: 12px; }
  .description-dialog .dialog-heading { padding: 18px; }
  .description-dialog .dialog-heading h2 { font-size: 23px; }
  .description-dialog .compact-form { padding: 17px; }
  .description-dialog textarea { font-size: 16px; }
  .character-creation .character-left { order: 2; }
  .character-creation .character-right { order: 1; }
}
/* Isolated paper-doll graphics test; fixed 1024 x 1536 coordinate system. */
.avatar-preview-open { position: absolute; left: 8px; bottom: 8px; z-index: 1; }
.avatar-preview-dialog {
  width: min(780px, calc(100vw - 28px)); max-width: none;
  max-height: calc(100dvh - 28px); overflow: auto;
  padding: 20px; color: #e6dfce; border: 2px solid #b58a42;
  background: linear-gradient(145deg, #102f43, #061721 80%);
  box-shadow: 0 15px 80px #000c;
}
.avatar-preview-dialog::backdrop { background: #02090ee8; }
.avatar-preview-dialog .dialog-heading { margin-bottom: 14px; }
.avatar-preview-dialog h2 { color: #efd390; }
.avatar-preview-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(220px, 1fr); gap: 24px; align-items: start; }
.avatar-paperdoll {
  position: relative; isolation: isolate; overflow: hidden;
  width: min(100%, 350px, calc((100dvh - 240px) * .6667)); aspect-ratio: 2 / 3; margin: 0 auto;
  background: radial-gradient(ellipse at 50% 36%, #32627c, #102f46 65%, #071927);
}
.avatar-paperdoll > img {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; transform-origin: 0 0;
  transform: translate(var(--layer-x, 0%), var(--layer-y, 0%)) scale(var(--layer-scale, 1));
  pointer-events: none;
}
.avatar-paperdoll > img[hidden] { display: none; }
.avatar-paperdoll [data-avatar-layer='base'] { z-index: 0; }
.avatar-paperdoll [data-avatar-layer='chest'] { z-index: 1; }
.avatar-paperdoll [data-avatar-layer='helmet'] { z-index: 2; }
.avatar-preview-controls { display: grid; gap: 10px; min-width: 0; }
.avatar-preview-controls p { margin: 0 0 6px; line-height: 1.5; }
.avatar-preview-controls label { color: #efcf8a; margin-top: 6px; font-weight: bold; }
.avatar-preview-controls select { width: 100%; min-height: 42px; color: #f2e3c0; background: #092030; border: 1px solid #9d7b44; padding: 9px; }
.avatar-preview-controls .small-tag { justify-self: start; }
.avatar-preview-selection { padding-top: 6px; font-size: 12px; color: #a8cadd; }
.avatar-preview-error { color: #ffc7a1; }
@media (max-width: 600px) {
  .avatar-preview-dialog { padding: 14px; }
  .avatar-preview-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .avatar-paperdoll { width: min(100%, 225px); }
  .avatar-preview-dialog .dialog-heading h2 { font-size: 20px; }
  .avatar-preview-controls { gap: 6px; }
  .avatar-preview-controls p { font-size: 12px; }
}