:root {
  color-scheme: dark;
  font: 16px/1.5 system-ui, sans-serif;
  color: #efe7d3;
  background: #152219;
  --gold: #ead6a0;
  --ink: #192119;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .64; }
button:focus-visible, input:focus-visible { outline: 2px solid #f5dc9e; outline-offset: 3px; }
.welcome { isolation: isolate; position: relative; min-height: 100svh; display: grid; align-content: center; justify-items: center; padding: clamp(30px, 7vw, 106px); }
.desktop-only {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background-color: #152219;
  background-image: linear-gradient(180deg, #13201735, #13201712 45%, #13201765), url('/art/fairfield-mobile.jpg');
  background-position: center, center 47%;
  background-size: cover;
  background-repeat: no-repeat;
}
.desktop-only-message { max-width: 30rem; padding: clamp(20px, 6vw, 36px); text-align: center; }
.desktop-only-message h1 { font-size: clamp(2.3rem, 9vw, 3.5rem); line-height: 1; }
.desktop-only-message p { margin: 1rem 0 0; }
.desktop-only-message p + p { margin-top: .35rem; }
.hero-art { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #112017 0%, #152318f5 22%, #18261bb8 42%, #17221821 76%), linear-gradient(0deg,#132015a6,transparent 50%), url('/art/fairfield-farm.jpg') 62% center / cover no-repeat; }
.entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem); gap: clamp(24px, 7vw, 100px); align-items: center; width: min(100%, 1080px); }
.overline { font-size: .72rem; font-weight: 650; letter-spacing: .19em; text-transform: uppercase; color: var(--gold); margin: 0 0 .65rem; }
h1 { font: 500 clamp(64px, 8vw, 124px)/.82 Georgia, serif; letter-spacing: -.068em; margin: .28em 0 .3em; color: #fff4dc; text-shadow: 0 4px 30px #10150e65; }
.room-form { padding: clamp(15px, 3vw, 26px); background: #18251df2; border: 1px solid #c3a46599; border-radius: 8px; box-shadow: 0 16px 70px #08110bd1; }
label { display: block; font-size: .82rem; font-weight: 650; color: #efe1bd; margin-bottom: 5px; }
input { display: block; width: 100%; padding: 10px 12px; background: #101c14; color: #fff4dc; border: 1px solid #7c8468; border-radius: 4px; }
input::placeholder { color: #b1b6a0; }
.gold, .quiet { border: 1px solid #bf9c5e; border-radius: 4px; padding: 9px 14px; font-size: .86rem; font-weight: 700; }
.gold { background: #e1c488; color: var(--ink); }
.gold:hover { background: #f0d49b; }
.quiet { background: #19261d; color: #f0e8ce; }
.quiet:hover { background: #2b3b2e; }
.character-header { display: flex; gap: 12px; align-items: end; justify-content: space-between; margin-bottom: 14px; }
.character-header h2, .menu-dialog h2 { font: 500 clamp(1.4rem, 3vw, 1.95rem)/1.1 Georgia, serif; margin: 0; color: #fff0cc; }
.character-header .overline, .menu-dialog .overline { margin-bottom: .32rem; }
.save-slots { display: grid; gap: 5px; border: 0; padding: 0; margin: 0; min-width: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.save-slot { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 41px; margin: 0; padding: 6px 9px; color: #bdbda5; border: 1px solid #bda06f37; border-radius: 4px; background: #111c15a8; cursor: pointer; }
.save-slot:hover, .save-slot:has(:checked) { color: #ffedc6; border-color: #d5b372; background: #34432d; }
.save-slot:has(:focus-visible) { outline: 2px solid #f5dc9e; outline-offset: 2px; }
.save-slot.occupied strong { color: #fff0ca; }
.save-slot strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-slot small { color: #d7c8a7; font-size: .69rem; white-space: nowrap; }
.slot-number { display: grid; place-items: center; align-self: stretch; font: 650 .72rem Georgia, serif; color: #dec17f; border-right: 1px solid #bda06f59; padding-right: 6px; }
.new-character { margin-top: 13px; }
.class-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
.class-picker legend { margin-bottom: 4px; color: #efe1bd; font-size: .82rem; font-weight: 650; }
.class-choice { display: grid; align-content: center; min-height: 44px; margin: 0; padding: 5px 8px; color: #bdbda5; border: 1px solid #bda06f37; border-radius: 4px; background: #111c15a8; cursor: pointer; }
.class-choice:has(:checked) { color: #ffedc6; border-color: #d5b372; background: #34432d; }
.class-choice:has(:focus-visible) { outline: 2px solid #f5dc9e; outline-offset: 2px; }
.class-choice small { color: #d7c8a7; font-size: .7rem; font-weight: 450; }
.slot-actions, .dialog-actions { display: flex; gap: 8px; margin-top: 13px; }
.slot-actions .gold, .dialog-actions > button { flex: 1; }
.remove-save { color: #ffd3c0; border-color: #b87d68; }
.remove-save:hover { background: #432a23; }
.storage-notice { margin: 9px 0 0; color: #d0c5aa; font-size: .73rem; }
.title-audio { margin-top: 8px; }
.game-version { margin-bottom: .9rem; }
.patch-notes-desktop {
  width: min(100%, 27rem);
  padding: .8rem 1rem;
  border: 1px solid #bf9c5e59;
  border-radius: 6px;
  background: #18251de8;
}
.patch-notes-desktop h2 { margin: 0; font: 500 1.22rem Georgia, serif; color: #fff0cc; }
.title-patch-notes { display: none; margin-top: 8px; }
.patch-notes-content { font-size: .85rem; }
.patch-version { margin: .2rem 0 .6rem; font-size: .75rem; color: var(--gold); }
.patch-notes-content h3 { margin: .55rem 0 .1rem; font-size: .83rem; color: var(--gold); }
.patch-notes-content ul { margin: 0; padding-inline-start: 1.15rem; }
.patch-notes-content li + li { margin-top: .15rem; }
.patch-notes-dialog { max-height: calc(100dvh - 24px); overflow: auto; }
@media (max-width: 760px), (pointer: coarse) {
  .patch-notes-desktop { display: none; }
  .title-patch-notes { display: inline-block; min-height: 44px; }
}
.entry-message { color: #ffccb6; margin: 0; font-size: .8rem; }
.entry-message:not(:empty) { margin-top: 8px; }
.play { position: fixed; inset: 0; background: #9ba68d; -webkit-user-select: none; user-select: none; }
#world { display: block; width: 100%; height: 100%; outline: none; touch-action: none; user-select: none; -webkit-touch-callout: none; }
.game-hud, .play-bottom { position: absolute; inset-inline: 18px; pointer-events: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.game-hud { top: 18px; }
.play-bottom { bottom: 14px; align-items: flex-end; }
.plate { border: 1px solid #d4b97c91; background: #19241ded; border-radius: 6px; box-shadow: 0 4px 18px #09150c42; padding: 11px 14px; }
.desktop-only-message { background-color: #19241dc7; }
.vital { min-width: min(180px, 40vw); }
.vital .overline { margin-bottom: 0; }
.vital strong { font: 600 1.25rem Georgia, serif; }
.hero-class { margin: .12rem 0 0; color: #e3d5b0; font-size: .74rem; }
.health { height: 7px; background: #090f0b; overflow: hidden; border-radius: 3px; margin: 7px 0 3px; }
#health-fill { width: 100%; height: 100%; background: linear-gradient(90deg,#893632,#cf6e5b); transition: width .2s; }
.stats, .party-title { display: flex; gap: 13px; justify-content: space-between; color: #e7dbc2; font-size: .74rem; }
.xp-stats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: space-between; margin-top: 2px; color: #c6d6a5; font-size: .72rem; font-variant-numeric: tabular-nums; }
#xp-pickup { color: #dfedab; font-weight: 700; }
.gear { display: flex; flex-wrap: wrap; gap: 3px 9px; font-size: .72rem; color: var(--gold); margin-top: 4px; }
.party { pointer-events: auto; min-width: min(182px, 45vw); margin-top: calc(var(--hud-minimap-size, 128px) + 26px); }
.party-title { color: var(--gold); font-weight: 700; }
.party-players { margin: .35rem 0; }
.party-players summary { cursor: pointer; color: #d9d1b7; font-size: .78rem; }
.party ul { list-style: none; margin: 5px 0 9px; padding: 0 6px 0 0; max-height: min(30svh, 15rem); overflow-y: auto; font-size: .81rem; }
.party li { margin-bottom: 2px; overflow-wrap: anywhere; }
.party li::before { content: '◆'; font-size: .57em; margin-right: .65em; color: #b9c497; }
.game-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.game-actions button { padding: 5px 8px; }
.play-bottom p { margin: 0; font-size: .81rem; }
.quest-area { position: absolute; inset-inline: 18px; bottom: 71px; display: grid; grid-template-columns: minmax(0, 285px) minmax(0, 1fr) minmax(0, 285px); gap: 10px; align-items: end; pointer-events: none; }
.quest-tracker { justify-self: start; width: min(100%, 285px); }
.quest-tracker .overline { margin-bottom: 3px; }
#objective { margin: 0; font-size: .84rem; line-height: 1.32; }
.quest-progress { display: block; width: 100%; height: 6px; margin-top: 8px; accent-color: #d1ac63; }
#interact { justify-self: center; pointer-events: auto; min-height: 38px; background: #263426; color: #fff0c7; box-shadow: 0 4px 20px #09150c66; white-space: nowrap; }
#interact:hover { background: #334635; }
#interact kbd { display: inline-block; line-height: 1.45; min-width: 1.45em; padding: 0 .2em; margin-right: .5rem; border: 1px solid #d9bd7e; border-radius: 3px; }
.controls span { color: #b59e71; margin: 0 4px; }
.controls #look-control { color: inherit; margin: 0; }
kbd { font: 700 .78rem system-ui, sans-serif; color: #ffe6a8; }
.notification { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(90%, 480px); background: #18251eeb; color: #ffe7ae; border: 1px solid #d2af71; text-align: center; border-radius: 4px; padding: 8px 16px; pointer-events: none; }
.touch-controls { display: none; }
@media (max-width: 680px) {
  .welcome { align-content: end; padding: 30px 20px 48px; }
  .entry { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 430px; }
  .masthead h1 { font-size: clamp(54px, 12vw, 76px); margin-bottom: .22em; }
  .hero-art { background-image: linear-gradient(0deg,#101c14 0%,#17241bda 48%,#18251a12 85%),url('/art/fairfield-farm.jpg'); background-position: 65% center; }
  .game-hud, .play-bottom, .quest-area { inset-inline: 8px; }
  .game-hud { top: 8px; }
  .party { margin-top: calc(var(--hud-minimap-size, 90px) + 22px); }
  .play-bottom { bottom: 8px; flex-wrap: wrap; }
  .plate { padding: 7px 9px; }
  .quest-area { display: block; bottom: 72px; }
  .quest-tracker { width: min(100%, 265px); }
  .play-bottom .controls { font-size: .7rem; }
  .controls kbd { font-size: .68rem; }
  #interact { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); }
}
.pouch { margin-top: .45rem; padding: .28rem .56rem; pointer-events: auto; }
.food-dialog { width: min(30rem, calc(100% - 24px)); padding: clamp(14px, 4vw, 23px); color: #efe7d3; }
.food-dialog::backdrop { background: #09130db9; }
.menu-dialog { width: min(25rem, calc(100% - 24px)); }
.menu-dialog h2 + p { margin: 8px 0 14px; color: #d7cbb1; font-size: .89rem; }
.pause-actions { display: grid; gap: 7px; }
.food-header { display: flex; justify-content: space-between; align-items: start; gap: .7rem; }
.food-header h2 { font: 500 1.8rem Georgia, serif; margin: 0; }
.food-header .overline { margin-bottom: .25rem; }
.food-coins { color: var(--gold); font-size: .86rem; margin: .55rem 0; }
.food-item { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .5rem 0; border-top: 1px solid #b89b644d; }
.food-item p { margin: 0; }
.food-item small { display: block; color: #d8d1bc; }
.food-buttons { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: end; }
.food-buttons button { padding: .4rem .55rem; white-space: nowrap; }
.food-status { min-height: 1.2rem; margin: .65rem 0 0; color: var(--gold); font-size: .82rem; }
.skills-dialog { max-height: calc(100dvh - 24px); overflow: auto; }
.skill-shortcuts { margin: 0 0 .45rem; color: #d8d1bc; font-size: .8rem; }
.skill-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .35rem .65rem; padding: .65rem 0; border-top: 1px solid #b89b644d; }
.skill-row h3, .skill-row p { margin: 0; }
.skill-row h3 { font-size: .96rem; color: #fff0cc; }
.skill-row .skill-description { grid-column: 1 / -1; color: #e4dac3; font-size: .84rem; }
.skill-row small { display: block; color: #c7c5a4; font-size: .75rem; }
.skill-row button { min-height: 44px; padding: .25rem .55rem; }
.skill-row .skill-upgrade { grid-column: 2; grid-row: 1; }
#skill-status:empty { display: none; }
.inventory-dialog { width: min(45rem, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.inventory-status { margin: 0 0 .65rem; }
.inventory-bag { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr); gap: clamp(.7rem, 3vw, 1.3rem); }
.inventory-bag[hidden], .inventory-dialog .food-item[hidden] { display: none; }
.inventory-bag h3 { margin: 0 0 .5rem; color: var(--gold); font: 600 1.1rem Georgia, serif; }
.inventory-bag h4 { margin: .6rem 0 .3rem; font-size: .86rem; }
.inventory-loadout { border-right: 1px solid #b89b644d; padding-right: .7rem; }
.inventory-slots { margin: 0; }
.inventory-slots > div { border-top: 1px solid #b89b644d; padding: .35rem 0; }
.inventory-slots dt, .inventory-empty { color: #d8d1bc; font-size: .8rem; }
.inventory-slots dd { margin: 0; }
.inventory-empty { margin: .3rem 0 .6rem; }
.inventory-dialog .food-item button { flex-shrink: 0; padding: .4rem .55rem; font-size: .84rem; }
@media (max-width: 480px) {
  .inventory-bag { grid-template-columns: 1fr; }
  .inventory-loadout { border-right: 0; }
  #inventory-equipped { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .7rem; }
}
@media (pointer: coarse) {
  .play {
    --touch-top: max(8px, env(safe-area-inset-top));
    --touch-left: max(12px, env(safe-area-inset-left));
    --touch-right: max(12px, env(safe-area-inset-right));
    --touch-bottom: max(12px, env(safe-area-inset-bottom));
    --stick-size: clamp(94px, 23vmin, 126px);
    height: 100dvh;
    bottom: auto;
    touch-action: pan-y;
    overscroll-behavior: none;
    -webkit-touch-callout: none;
  }
  .welcome {
    padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
    padding-top: max(30px, env(safe-area-inset-top));
    padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 28px));
  }
  .save-slot, .room-form button, .food-dialog button, .atlas-dialog button { min-height: 44px; }
  .play-bottom { display: none; }
  .game-hud, .quest-area, .touch-controls { left: var(--touch-left); right: var(--touch-right); }
  .game-hud { top: var(--touch-top); z-index: 2; }
  .vital { min-width: 0; width: clamp(136px, 41vw, 180px); padding: 7px 9px; }
  .vital strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.08rem; }
  .vital .stats { gap: 5px; }
  .vital .overline { font-size: .66rem; letter-spacing: .13em; }
  .vital .health { margin-top: 5px; }
  .pouch { min-height: 44px; margin-top: .3rem; }
  .party {
    position: relative; min-width: 0; margin-top: calc(var(--hud-minimap-size) + 21px);
    display: grid; grid-template-columns: auto auto; gap: 0 4px; padding: 2px 4px;
  }
  .party-title { grid-column: 1 / -1; justify-content: center; font-size: .68rem; }
  #room-label { display: none; }
  .party-players { margin: 0; }
  .party-players summary { min-height: 44px; padding-inline: 5px; align-content: center; }
  .party ul {
    position: absolute; right: 0; top: 100%; width: min(12rem, 58vw); margin-top: 4px;
    padding: 7px 9px; background: #19241df7; border: 1px solid #d4b97c91; border-radius: 5px;
  }
  .game-actions button { min-height: 44px; min-width: 44px; }
  .quest-area { display: block; bottom: var(--touch-bottom); height: var(--stick-size); }
  .quest-tracker { position: absolute; bottom: calc(100% + 24px); width: min(100%, 17rem); padding: 7px 9px; }
  .quest-tracker .overline { font-size: .66rem; }
  #objective { font-size: .8rem; }
  #interact {
    position: absolute; right: 0; left: auto; bottom: 68px; transform: none;
    min-height: 44px; min-width: 68px; max-width: min(11rem, calc(100% - var(--stick-size) - 12px));
    white-space: normal; line-height: 1.2; padding: 4px 9px;
  }
  #interact kbd { display: none; }
  .touch-controls {
    position: absolute; display: flex; align-items: end; justify-content: space-between;
    bottom: var(--touch-bottom); pointer-events: none;
  }
  .touch-actions { display: flex; align-items: end; gap: 5px; }
  .touch-controls:has(.touch-skill:not([hidden])) .touch-look-hint { display: none; }
  .touch-stick, #touch-attack, .touch-skill {
    touch-action: none; -webkit-touch-callout: none; user-select: none; pointer-events: auto;
    border: 1px solid #ceb983; background: #19241ddb; color: #ffedbd;
    box-shadow: 0 2px 12px #09150c70;
  }
  .touch-stick {
    display: grid; place-items: center; width: var(--stick-size); height: var(--stick-size);
    border-radius: 50%; background: radial-gradient(circle, #66764d83, #18291bde 75%);
  }
  .touch-stick-thumb {
    pointer-events: none; width: 44%; aspect-ratio: 1; border: 1px solid #d6bb83;
    border-radius: 50%; background: radial-gradient(circle at 36% 32%, #d4ba83, #8b7248);
    transform: translate(var(--stick-x, 0px), var(--stick-y, 0px));
  }
  .touch-stick.is-active { border-color: #ffe3a0; }
  .touch-look-hint {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: max-content; max-width: calc(100% - var(--stick-size) - 100px); margin: 0;
    color: #fff0cb; font-size: .69rem; text-shadow: 0 1px 5px #152217, 0 1px 2px #000;
  }
  #touch-attack { width: 68px; height: 60px; border-radius: 50%; font-weight: 750; }
  .touch-skill { width: clamp(44px, 14vw, 58px); min-height: 44px; padding: 3px; border-radius: 9px; font-size: .69rem; line-height: 1.08; overflow-wrap: anywhere; }
  .skill-shortcuts { display: none; }
  #touch-attack:active, #touch-attack.is-held { background: #495535; }
  .notification { z-index: 3; }
  .food-dialog, .atlas-dialog { overscroll-behavior: contain; }
  .inventory-dialog .food-header { position: sticky; top: -1px; z-index: 1; background: #19241d; }
  .food-item { flex-wrap: wrap; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .party { margin-top: 0; margin-right: calc(var(--hud-minimap-size) + 9px); }
  .quest-tracker { left: calc(var(--stick-size) + 12px); bottom: 0; width: min(16rem, calc(100% - var(--stick-size) - 155px)); }
  .play:has(.touch-skill:not([hidden])) .quest-tracker { width: min(16rem, calc(100% - var(--stick-size) - 210px)); }
  .touch-look-hint { display: none; }
}