:root {
  color-scheme: light;
  --ink: #22312b;
  --ink-soft: #6b766e;
  --muted: #939b91;
  --paper: #f4f1e8;
  --paper-hi: #fbfaf5;
  --paper-line: #e7e4d9;
  --forest: #182823;
  --forest-light: #233630;
  --jade: #647f6e;
  --jade-dark: #416150;
  --gold: #bd9c5b;
  --red: #a24e3e;
  --serif: "Songti SC", "SimSun", "STSong", "Noto Serif CJK SC", serif;
  --sans: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --mono: "Cascadia Mono", "Consolas", "Courier New", monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.detail-panel { padding: 24px; min-height: 370px; }
.detail-panel h2 { margin: 0 0 16px; font: 22px var(--serif); }
.detail-panel h3 { margin: 22px 0 10px; font: 16px var(--serif); }
.detail-panel p { color: #69756c; }
.detail-panel .detail-note { padding: 12px; border-left: 2px solid #b99a5b; background: #f2eee1; font-size: 12px; }
.attribute-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.attribute-item { padding: 12px; border: 1px solid var(--paper-line); }
.attribute-item span { display: block; color: #879082; font-size: 11px; }
.attribute-item strong { display: block; margin-top: 4px; font: 16px var(--serif); overflow-wrap: anywhere; }
.skill-table-wrap { overflow-x: auto; }
.skill-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.skill-table th { padding: 9px 7px; background: #edeade; color: #6d796a; font-weight: 500; white-space: nowrap; }
.skill-table td { padding: 10px 7px; border-bottom: 1px solid var(--paper-line); }
.skill-table td small { display: block; color: #8d9588; font: 10px var(--mono); }
.detail-panel button { margin: 2px 4px 2px 0; padding: 5px 10px; border: 1px solid #d4d7c6; background: #f8f7ee; color: #43624c; cursor: pointer; font-size: 12px; }
.detail-panel button:hover { border-color: #a89260; background: #eeead9; }
.detail-panel button:disabled { opacity: .45; cursor: default; }
.detail-panel select, .detail-panel input { max-width: 100%; margin: 4px 8px 4px 0; padding: 7px; border: 1px solid #d8d7c7; background: #fdfbf4; color: #435749; }
.detail-panel .slot-line { display:flex; flex-wrap:wrap; align-items:center; padding:7px 0; border-bottom:1px solid var(--paper-line); gap:6px; }
.slot-line label { min-width: 80px; }
.busy-status { padding-top: 10px; font-size: 11px; color: #9a7044; }
.login-content select { width:100%; margin: 0 0 10px; padding: 7px; border: 1px solid #e5e1d5; background: #fdfcf8; color: #3f4d42; font-size:11px; }
@media (max-width:600px) { .attribute-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .detail-panel { padding:14px; } }
html { min-width: 360px; min-height: 100%; background: var(--paper); }
body { margin: 0; color: var(--ink); font: 13px/1.65 var(--sans); background: var(--paper); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.app-shell { display: grid; grid-template-columns: 238px minmax(0, 1fr) 65px; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 5; display: flex; width: 238px; flex-direction: column; padding: 30px 20px 20px; color: #eef0e7; background: var(--forest); }
.brand { display: flex; align-items: center; gap: 12px; padding: 3px 5px 24px; color: inherit; text-decoration: none; }
.brand-mark { position: relative; display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(217,193,137,.61); color: #dcc692; }
.brand-mark:before, .brand-mark:after { position: absolute; width: 5px; height: 5px; border-color: #dcc692; border-style: solid; content: ""; }
.brand-mark:before { top: -3px; left: -3px; border-width: 1px 0 0 1px; }.brand-mark:after { right: -3px; bottom: -3px; border-width: 0 1px 1px 0; }
.brand-mark-glyph { font: 19px var(--serif); }.brand-mark i { position: absolute; top: 50%; left: -5px; width: 48px; border-top: 1px solid rgba(217,193,137,.33); }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }.brand-title { font: 18px var(--serif); letter-spacing: 2px; }.brand-subtitle { color: #94a196; font: 9px var(--mono); letter-spacing: .55px; }
.sidebar-divider { height: 1px; background: rgba(222,225,213,.13); }.nav-label { margin: 26px 10px 11px; color: #8a9a8d; font-size: 10px; letter-spacing: 2px; }
.main-nav { display: flex; flex-direction: column; gap: 5px; }.nav-item { position: relative; display: flex; height: 43px; align-items: center; gap: 12px; padding: 0 12px; border: 0; border-radius: 2px; color: #abb6ac; text-align: left; background: transparent; cursor: pointer; transition: background .2s,color .2s; }
.nav-item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }.nav-item span:nth-of-type(1) { font-size: 12px; letter-spacing: .7px; }.nav-item:hover { color: #f4f0e3; background: rgba(255,255,255,.055); }.nav-item.active { color: #e5d4a5; background: rgba(220,200,151,.105); }.nav-current { position: absolute; top: 10px; bottom: 10px; left: 0; width: 2px; background: #cfb77c; }.nav-count { display: inline-flex; min-width: 24px; height: 20px; align-items: center; justify-content: center; margin-left: auto; color: #a9b5a9; font: 10px var(--mono); background: rgba(255,255,255,.07); }.online-pill { gap: 5px; }.online-pill i { width: 5px; height: 5px; border-radius: 50%; background: #84bd8c; }
.lower-divider { margin-top: 22px; }.sidebar-note { margin-top: auto; padding: 0 12px 26px; color: #b7c0b2; }.note-mark { color: #c5aa6b; font: 36px/1 var(--serif); }.sidebar-note p { margin: -2px 0 10px 15px; font: 15px/1.9 var(--serif); letter-spacing: 1px; }.note-caption { margin-left: 15px; color: #839187; font: 9px var(--mono); letter-spacing: .5px; }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; padding: 13px 3px 0; border-top: 1px solid rgba(222,225,213,.13); color: #9aa69b; font-size: 10px; }.server-status { display: flex; align-items: center; gap: 7px; }.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #d3ae65; box-shadow: 0 0 8px rgba(211,174,101,.5); }.status-dot.connected { background: #75b181; box-shadow: 0 0 8px rgba(117,177,129,.5); }.status-dot.disconnected { background: #b65e4e; }.version-label { color: #64766b; font: 9px var(--mono); }
.main-area { grid-column: 2; min-width: 0; }.topbar { position: sticky; top: 0; z-index: 4; display: flex; height: 67px; align-items: center; justify-content: space-between; padding: 0 42px; border-bottom: 1px solid var(--paper-line); background: rgba(248,246,239,.94); backdrop-filter: blur(14px); }
.breadcrumb { display: flex; align-items: center; gap: 11px; color: #879087; font-size: 11px; letter-spacing: .5px; }.breadcrumb span:last-child { color: var(--ink); }.breadcrumb-slash { color: #c3bba8; font: 11px var(--mono); }
.topbar-right { display: flex; height: 100%; align-items: center; gap: 17px; }.server-time { display: flex; align-items: center; gap: 7px; color: #737f75; font: 10px var(--mono); }.time-sun { color: #b69b65; font-size: 14px; }.time-weather { margin-left: 2px; color: #94988e; font-family: var(--sans); font-size: 10px; }.topbar-divider { height: 20px; border-left: 1px solid #e3dfd4; }.icon-button { display: grid; width: 29px; height: 29px; place-items: center; border: 0; border-radius: 50%; color: #78847b; background: transparent; cursor: pointer; }.icon-button:hover { color: var(--ink); background: #ece9de; }.icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }.profile-chip { display: flex; align-items: center; gap: 9px; padding: 0; border: 0; color: #46554a; background: transparent; cursor: pointer; font-size: 11px; }.profile-avatar { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #ded5c1; border-radius: 50%; color: #856f45; font: 14px var(--serif); background: #eee8d9; }.chevron { margin-left: 1px; color: #a1a396; font-size: 13px; }
.game-content { width: min(1120px, 100%); margin: 0 auto; padding: 29px 43px 17px; }.welcome-line { display: flex; align-items: center; gap: 12px; }.welcome-kicker { color: var(--jade-dark); font: 9px var(--mono); letter-spacing: 1.3px; }.welcome-rule { width: 27px; border-top: 1px solid #c9b583; }.welcome-season { color: #96998d; font-size: 10px; letter-spacing: .7px; }.headline-row { display: flex; align-items: flex-end; justify-content: space-between; margin: 9px 0 22px; }.headline-row h1 { margin: 0; color: #28382f; font: 29px/1.45 var(--serif); font-weight: 600; letter-spacing: 2px; }.headline-sub { margin: 0; color: #818a80; font-size: 11px; letter-spacing: .7px; }.location-coords { display: flex; align-items: center; gap: 7px; padding-bottom: 4px; color: #858b7f; font-size: 10px; letter-spacing: .3px; }.location-pin { color: #a75c43; font-size: 17px; }.coord-divider { height: 12px; margin: 0 2px; border-left: 1px solid #d5d1c6; }.coord-id { color: #aa9b7a; font: 9px var(--mono); }
.scene-card { display: grid; min-height: 172px; grid-template-columns: 1.18fr .82fr; overflow: hidden; border: 1px solid #dedccf; background: var(--paper-hi); box-shadow: 0 5px 20px rgba(52,61,47,.035); }.scene-art { position: relative; min-height: 171px; overflow: hidden; background: linear-gradient(168deg,#d9ded1 0%,#e8e5d5 48%,#d6d7c9 100%); }.art-sun { position: absolute; top: 19px; left: 63%; width: 47px; height: 47px; border: 1px solid rgba(161,119,77,.42); border-radius: 50%; background: rgba(204,169,111,.44); box-shadow: 0 0 0 7px rgba(202,170,122,.11),0 0 35px rgba(207,174,121,.24); }.art-mountain { position: absolute; right: -2%; bottom: 31px; left: -2%; height: 111px; clip-path: polygon(0 72%,12% 40%,20% 59%,35% 13%,44% 50%,54% 25%,65% 57%,78% 18%,90% 58%,100% 37%,100% 100%,0 100%); }.art-mountain-back { bottom: 41px; background: #b4bdb0; opacity: .74; transform: scale(1.07); }.art-mountain-mid { bottom: 22px; background: #82988a; clip-path: polygon(0 60%,14% 27%,25% 60%,39% 33%,51% 65%,67% 12%,78% 58%,89% 28%,100% 54%,100% 100%,0 100%); opacity: .79; }.art-mountain-front { bottom: -9px; height: 87px; background: #465f51; clip-path: polygon(0 52%,12% 30%,23% 63%,34% 32%,43% 46%,55% 6%,68% 48%,80% 19%,90% 51%,100% 31%,100% 100%,0 100%); opacity: .8; }.art-haze { position: absolute; right: 0; bottom: 23px; left: 0; z-index: 1; height: 34px; background: rgba(238,235,218,.37); filter: blur(8px); }.art-trees { position: absolute; right: 16%; bottom: 31px; z-index: 2; display: flex; height: 48px; align-items: flex-end; gap: 10px; }.art-trees i { position: relative; width: 2px; height: 28px; background: #4e5f4c; }.art-trees i:before { position: absolute; top: -16px; left: -7px; width: 0; height: 0; border-right: 8px solid transparent; border-bottom: 22px solid #50664f; border-left: 8px solid transparent; content: ""; }.art-trees i:nth-child(2) { height: 39px; }.art-trees i:nth-child(2):before { top: -22px; border-right-width: 10px; border-bottom-width: 29px; border-left-width: 10px; }.art-trees i:nth-child(4) { height: 35px; }.art-roof { position: absolute; right: 9%; bottom: 25px; z-index: 3; width: 43px; height: 25px; border-top: 2px solid #465247; }.art-roof:before { position: absolute; top: -10px; left: -6px; width: 50px; height: 13px; border-top: 2px solid #465247; border-bottom: 1px solid rgba(70,82,71,.6); transform: perspective(20px) rotateX(17deg); content: ""; }.art-roof span { position: absolute; top: 0; left: 6px; height: 19px; border-left: 1px solid #596354; }.scene-caption { position: absolute; bottom: 13px; left: 19px; z-index: 4; display: flex; align-items: center; gap: 7px; color: #f2f0e4; font-size: 9px; letter-spacing: 1px; text-shadow: 0 1px 3px rgba(20,34,24,.7); }.caption-line { width: 13px; border-top: 1px solid #d4bc85; }.scene-stamp { position: absolute; top: 14px; right: 15px; z-index: 4; display: grid; width: 29px; height: 38px; place-content: center; border: 1px solid rgba(154,79,59,.65); color: rgba(148,77,59,.8); font: 9px/1.2 var(--serif); text-align: center; transform: rotate(4deg); }
.scene-details { display: flex; flex-direction: column; justify-content: center; padding: 19px 23px; }.scene-section-title { display: flex; align-items: center; gap: 10px; }.section-index { white-space: nowrap; color: #5e715f; font: 10px var(--serif); letter-spacing: 1px; }.title-rule { flex: 1; border-top: 1px solid #e5e2d6; }.scene-weather { white-space: nowrap; color: #979c90; font: 9px var(--mono); }.scene-weather:first-letter { color: #c19c54; }.scene-details>p { min-height: 40px; margin: 12px 0 7px; color: #59675b; font: 12px/1.9 var(--serif); letter-spacing: .45px; }.scene-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid #eae7dd; }.scene-subtitle { color: #a1a293; font-size: 9px; }.text-button { padding: 0; border: 0; color: #596f5c; background: none; cursor: pointer; font-size: 10px; letter-spacing: .35px; }.text-button:hover { color: #a3533d; }.text-button span { margin-left: 5px; color: #af9665; font-size: 13px; }
.world-grid,.lower-grid { display: grid; gap: 14px; grid-template-columns: 1.02fr .98fr; margin-top: 14px; }.panel { min-width: 0; border: 1px solid var(--paper-line); background: rgba(251,250,245,.76); }.travel-panel,.people-panel { min-height: 178px; padding: 16px 18px 12px; }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; }.panel-eyebrow { color: #91998c; font: 9px var(--mono); letter-spacing: 1px; }.panel-heading h2 { margin: 2px 0 0; color: #35443a; font: 15px var(--serif); font-weight: 600; letter-spacing: .8px; }.panel-index { margin-top: 4px; color: #a1a091; font: 9px var(--mono); }.panel-index i { color: #c2a976; font-style: normal; }
.travel-body { display: flex; min-height: 112px; align-items: center; gap: 20px; }.compass-wrap { display: grid; width: 123px; height: 111px; flex: 0 0 123px; place-items: center; }.compass-ring { position: relative; width: 92px; height: 92px; border: 1px solid #e2ddcd; border-radius: 50%; background: radial-gradient(circle,rgba(235,231,215,.41) 0,rgba(250,249,243,.22) 60%); }.compass-ring:before,.compass-ring:after { position: absolute; background: #e5e0d1; content: ""; }.compass-ring:before { top: 45px; left: 16px; width: 58px; height: 1px; }.compass-ring:after { top: 16px; left: 45px; width: 1px; height: 58px; }.compass-n { position: absolute; top: -14px; left: 42px; color: #a18b62; font: 8px var(--mono); }.direction { position: absolute; z-index: 1; display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; color: #647665; background: #f7f5ed; cursor: pointer; font-size: 15px; line-height: 1; transition: border-color .18s,background .18s,color .18s,transform .18s; }.direction:hover { border-color: #c8b982; color: #9c573e; background: #f4efe1; transform: scale(1.08); }.direction:disabled { color: #d8d6ca; background: transparent; cursor: default; }.direction:disabled:hover { border-color: transparent; transform: none; }.direction-n { top: 3px; left: 32px; }.direction-e { top: 32px; right: 3px; }.direction-s { bottom: 3px; left: 32px; }.direction-w { top: 32px; left: 3px; }.compass-center { position: absolute; top: 33px; left: 33px; display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #d8d1bd; border-radius: 50%; color: #a78e5f; background: #f4f0e4; font: 10px var(--serif); }.exit-list-wrap { min-width: 0; flex: 1; }.exit-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px solid #e9e6db; color: #657265; font: 10px var(--serif); }.exit-heading span { color: #a2a294; font: 9px var(--mono); }.exit-list { display: flex; min-height: 33px; flex-wrap: wrap; gap: 5px; align-items: center; padding-top: 7px; }.exit-chip { padding: 3px 8px; border: 1px solid #e4e1d5; color: #728072; background: #f8f7f1; cursor: pointer; font-size: 9px; }.exit-chip:hover { border-color: #cbb986; color: #785e39; }.empty-hint { color: #9da195; font-size: 10px; }.travel-hint { margin: 4px 0 0; color: #adb0a3; font-size: 9px; }
.people-list { min-height: 82px; padding-top: 6px; }.person-row { display: flex; min-height: 34px; align-items: center; gap: 9px; border-bottom: 1px solid #eeece4; }.person-row:last-child { border-bottom: 0; }.person-seal { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border: 1px solid #e1dbc8; color: #947e50; font: 10px var(--serif); }.npc-seal { border-color: #e2e5db; color: #748578; background: #f0f2eb; }.person-name { overflow: hidden; color: #4f5e51; font: 10px var(--serif); text-overflow: ellipsis; white-space: nowrap; }.player-row .person-name { color: #a4513e; }.person-meta { overflow: hidden; margin-left: auto; color: #a3a494; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.inspect-button { margin-left: 4px; padding: 2px 5px; border: 0; color: #839082; background: none; cursor: pointer; font-size: 9px; }.people-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 7px; border-top: 1px solid #eae7dd; color: #a5a494; font-size: 9px; }
.lower-grid { grid-template-columns: .97fr 1.03fr; margin-top: 14px; }.status-panel,.log-panel { min-height: 196px; padding: 15px 17px 12px; }.compact-heading { align-items: center; }.sect-tag { padding: 2px 7px; border: 1px solid #e4dfcf; color: #857953; font-size: 9px; background: #f7f4e9; }.character-card { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-bottom: 11px; border-bottom: 1px solid #ebe8dd; }.character-seal { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 1px solid #ded2b3; color: #a18953; font: 17px var(--serif); background: #f6f1e3; }.character-info { min-width: 0; flex: 1; }.character-name-line { display: flex; align-items: center; gap: 7px; }.character-name-line strong { overflow: hidden; color: #39483d; font: 13px var(--serif); text-overflow: ellipsis; white-space: nowrap; }.level-tag { padding: 0 4px; border: 1px solid #e8e2d2; color: #ab8d54; font: 8px var(--mono); }.character-title { display: block; margin-top: 1px; color: #98998c; font-size: 9px; }.exp-track { height: 2px; margin: 7px 0 3px; background: #eae7dd; }.exp-track span { display: block; width: 0; height: 100%; background: #bc9c5d; transition: width .3s; }.exp-label { color: #a5a394; font-size: 8px; }.exp-label b { color: #827e69; font: 8px var(--mono); font-weight: 400; }.coin-box { display: grid; min-width: 39px; grid-template-columns: 17px 1fr; align-items: center; column-gap: 3px; color: #87734c; font: 10px var(--mono); }.coin-icon { display: grid; width: 17px; height: 17px; place-items: center; border: 1px solid #d3bf91; border-radius: 50%; color: #9e8250; font: 9px var(--serif); }.coin-caption { grid-column: 2; color: #aaa492; font: 8px var(--sans); }
.stat-bars { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }.stat-row { display: flex; align-items: center; gap: 7px; }.stat-icon { display: grid; width: 17px; height: 17px; flex: 0 0 17px; place-items: center; border: 1px solid #e8ddd3; color: #9b6454; font: 9px var(--serif); }.mp-icon { border-color: #dce3dc; color: #668473; }.stat-name { width: 26px; color: #81877b; font-size: 9px; }.bar-track { height: 4px; flex: 1; overflow: hidden; background: #e9e6dc; }.bar-fill { display: block; width: 100%; height: 100%; transition: width .35s; }.hp-fill { background: linear-gradient(90deg,#9c6959,#bd8368); }.mp-fill { background: linear-gradient(90deg,#668975,#91a98a); }.stat-value { min-width: 59px; color: #898b7e; font: 9px var(--mono); text-align: right; }.status-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }.subtle-button { padding: 5px 5px; border: 1px solid #e8e5da; color: #69756a; background: #f9f8f2; cursor: pointer; font-size: 9px; transition: border-color .18s,color .18s; }.subtle-button:hover { border-color: #cbb986; color: #926c3a; }.subtle-button:disabled { opacity: .55; cursor: wait; }
.log-heading { align-items: center; }.live-indicator { display: flex; align-items: center; gap: 5px; color: #828c7f; font-size: 9px; }.live-indicator span { width: 5px; height: 5px; border-radius: 50%; background: #79a57c; box-shadow: 0 0 6px rgba(100,150,108,.4); }.log-list { height: 102px; overflow: auto; padding: 9px 1px 5px; scrollbar-color: #ddd8c9 transparent; scrollbar-width: thin; }.log-entry { display: grid; grid-template-columns: 39px 14px minmax(0,1fr); gap: 6px; align-items: start; margin-bottom: 5px; color: #687366; font-size: 9px; line-height: 1.6; }.log-time { color: #a9a796; font: 8px var(--mono); }.log-mark { color: #a9935e; text-align: center; }.log-chat .log-mark { color: #a75a45; }.log-combat .log-mark { color: #bc7157; }.log-text { overflow-wrap: anywhere; }.command-bar { display: flex; height: 28px; align-items: center; gap: 7px; padding: 0 7px; border: 1px solid #e8e4d9; background: #fdfcf8; }.command-prompt { color: #9b8656; font: 10px var(--mono); }.command-bar input { width: 100%; min-width: 0; border: 0; outline: none; color: #526056; background: transparent; font: 9px var(--sans); }.command-bar input::placeholder { color: #aaa99d; }.command-bar button { padding: 0 2px; border: 0; color: #8c7951; background: none; cursor: pointer; font-size: 15px; }
.content-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; color: #a3a293; font: 8px var(--mono); letter-spacing: .4px; }.footer-verse { color: #aaa28f; font: 9px var(--serif); }.footer-build { color: #b0ad9e; }
.right-rail { position: fixed; inset: 0 0 0 auto; display: flex; width: 65px; flex-direction: column; align-items: center; border-left: 1px solid #e6e2d6; background: #efede4; }.rail-top { display: flex; align-items: center; gap: 12px; padding-top: 29px; }.rail-vertical { color: #93978a; font: 8px/1.8 var(--serif); writing-mode: vertical-rl; }.rail-dot { color: #ac9563; font-size: 12px; }.rail-index { margin-top: auto; margin-bottom: auto; color: #708073; font: 12px/1.8 var(--serif); text-align: center; letter-spacing: 2px; }.rail-index i { color: #b29158; font-style: normal; }.rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 9px; padding-bottom: 22px; color: #9a9b8e; font: 8px var(--serif); writing-mode: vertical-rl; }.rail-line { height: 30px; border-left: 1px solid #c6b890; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 22px; background: rgba(15,26,22,.67); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .22s,visibility .22s; }.modal-backdrop.open { opacity: 1; visibility: visible; }.login-card { position: relative; display: grid; width: min(680px,100%); min-height: 420px; grid-template-columns: .86fr 1.14fr; overflow: hidden; border: 1px solid rgba(196,173,122,.55); background: #fbfaf5; box-shadow: 0 22px 90px rgba(0,0,0,.26); transform: translateY(12px); transition: transform .25s; }.modal-backdrop.open .login-card { transform: translateY(0); }.modal-close { position: absolute; top: 9px; right: 12px; z-index: 3; width: 27px; height: 27px; border: 0; color: #8b9084; background: transparent; cursor: pointer; font-size: 21px; }.login-art { position: relative; overflow: hidden; background: linear-gradient(160deg,#e1e2d5,#bbc8b9 53%,#849b8b); }.login-moon { position: absolute; top: 62px; left: 58px; width: 84px; height: 84px; border: 1px solid rgba(158,119,73,.4); border-radius: 50%; background: rgba(215,185,131,.54); box-shadow: 0 0 0 9px rgba(215,185,131,.11),0 0 42px rgba(215,185,131,.22); }.login-ridge { position: absolute; right: -12%; bottom: 0; left: -12%; height: 230px; }.login-ridge.one { background: #879d8d; clip-path: polygon(0 47%,17% 22%,28% 45%,49% 9%,66% 44%,80% 23%,100% 52%,100% 100%,0 100%); }.login-ridge.two { background: #485e50; clip-path: polygon(0 58%,15% 37%,34% 63%,53% 18%,72% 54%,88% 28%,100% 50%,100% 100%,0 100%); }.login-pines { position: absolute; right: 17%; bottom: 58px; z-index: 2; display: flex; gap: 18px; }.login-pines i { width: 2px; height: 38px; background: #314a3c; }.login-pines i:before { display: block; width: 0; height: 0; margin: -16px 0 0 -10px; border-right: 11px solid transparent; border-bottom: 31px solid #405944; border-left: 11px solid transparent; content: ""; }.login-pines i:nth-child(2) { height: 54px; }.login-pines i:nth-child(2):before { margin-top: -20px; border-right-width: 14px; border-bottom-width: 40px; border-left-width: 14px; }.login-art-word { position: absolute; bottom: 18px; left: 24px; z-index: 3; color: rgba(244,242,226,.84); font: 13px var(--serif); letter-spacing: 8px; writing-mode: vertical-rl; }.login-content { display: flex; flex-direction: column; justify-content: center; padding: 46px 43px 37px; }.login-kicker { color: #8a987e; font: 9px var(--mono); letter-spacing: 1px; }.login-content h2 { margin: 8px 0 2px; color: #35473a; font: 25px var(--serif); letter-spacing: 2px; }.login-desc { margin: 0 0 21px; color: #93958a; font: 11px var(--serif); }.login-content form { display: flex; flex-direction: column; }.login-content label { margin-bottom: 5px; color: #6c786b; font-size: 10px; }.login-content input { height: 36px; margin-bottom: 14px; padding: 0 10px; border: 1px solid #e5e1d5; color: #3f4d42; background: #fdfcf8; font-size: 11px; }.login-content input::placeholder { color: #b5b4a7; }.enter-button { display: flex; height: 39px; align-items: center; justify-content: space-between; margin-top: 2px; padding: 0 13px; border: 1px solid #314a3a; color: #f6f2e7; background: #263d30; cursor: pointer; font-size: 11px; letter-spacing: 1px; transition: background .18s; }.enter-button:hover { background: #354f3c; }.enter-button span:last-child { color: #cfb881; font: 17px var(--mono); }.login-feedback { min-height: 18px; padding-top: 5px; color: #a24e3e; font-size: 10px; }.login-footnote { margin-top: auto; padding-top: 11px; border-top: 1px solid #eeece3; color: #a4a395; font-size: 9px; }.toast { position: fixed; right: 84px; bottom: 22px; z-index: 30; max-width: min(360px,calc(100vw - 36px)); padding: 9px 14px; border: 1px solid #dbd4c2; color: #596a5c; background: #fbfaf5; box-shadow: 0 8px 28px rgba(28,39,30,.11); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s,transform .2s; font-size: 11px; }.toast.show { opacity: 1; transform: translateY(0); }.toast.warn { border-color: #decac1; color: #9b513e; }.toast.success { border-color: #cbd9c9; color: #52745b; }
.nav-item:disabled { opacity: .7; }.log-list::-webkit-scrollbar { width: 4px; }.log-list::-webkit-scrollbar-thumb { background: #ddd8c9; }
@media (min-width: 1500px) { .game-content { padding-top: 38px; }.scene-card,.scene-art { min-height: 188px; }.travel-panel,.people-panel { min-height: 190px; }.lower-grid { margin-top: 16px; }.status-panel,.log-panel { min-height: 210px; } }
@media (max-width: 1150px) { .app-shell { grid-template-columns: 211px minmax(0,1fr); }.sidebar { width: 211px; padding-right: 16px; padding-left: 16px; }.right-rail { display: none; }.game-content { padding-right: 30px; padding-left: 30px; }.topbar { padding-right: 30px; padding-left: 30px; } }
@media (max-width: 800px) { .app-shell { display: block; padding-bottom: 53px; }.sidebar { position: fixed; inset: auto 0 0; display: flex; width: 100%; height: 54px; flex-direction: row; align-items: center; justify-content: center; padding: 4px max(10px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); border-top: 1px solid rgba(225,222,207,.16); }.brand,.sidebar-divider,.nav-label,.sidebar-note,.sidebar-footer { display: none; }.main-nav { width: 100%; flex-direction: row; justify-content: space-around; gap: 0; }.nav-item { height: 43px; flex: 1; flex-direction: column; justify-content: center; gap: 2px; padding: 3px 4px; }.nav-item svg { width: 16px; height: 16px; }.nav-item span:nth-of-type(1) { font-size: 9px; }.nav-count { position: absolute; top: 0; left: calc(50% + 9px); min-width: 17px; height: 15px; padding: 0 3px; font-size: 8px; }.online-pill i { display: none; }.nav-current { top: auto; right: 21px; bottom: -5px; left: 21px; width: auto; height: 2px; }.topbar { height: 57px; padding-right: 20px; padding-left: 20px; }.game-content { padding: 22px 20px 15px; }.headline-row h1 { font-size: 25px; }.scene-card { grid-template-columns: 1fr; }.scene-art { min-height: 177px; }.scene-details { min-height: 136px; padding: 16px 18px; }.world-grid,.lower-grid { gap: 11px; grid-template-columns: 1fr; }.travel-panel,.people-panel { min-height: 168px; }.people-panel { min-height: 150px; }.people-list { min-height: 77px; }.status-panel,.log-panel { min-height: 190px; }.status-panel { order: 1; }.log-panel { order: 2; }.log-list { height: 94px; }.footer-build { display: none; }.toast { right: 15px; bottom: 68px; } }
@media (max-width: 480px) { .topbar { padding-right: 14px; padding-left: 14px; }.topbar-right { gap: 10px; }.time-weather,.topbar-divider,.icon-button { display: none; }.game-content { padding-right: 14px; padding-left: 14px; }.location-coords { font-size: 9px; }.headline-row { gap: 6px; }.headline-row h1 { font-size: 23px; }.headline-sub { font-size: 10px; }.scene-art { min-height: 152px; }.travel-body { gap: 5px; }.compass-wrap { width: 113px; flex-basis: 113px; }.travel-panel,.people-panel { padding-right: 13px; padding-left: 13px; }.status-panel,.log-panel { padding-right: 13px; padding-left: 13px; }.login-card { grid-template-columns: 1fr; max-width: 370px; }.login-art { min-height: 120px; }.login-moon { top: 14px; left: 35%; width: 70px; height: 70px; }.login-ridge { height: 113px; }.login-pines { bottom: 35px; }.login-art-word { bottom: 8px; left: 13px; }.login-content { padding: 22px 25px 20px; }.login-content h2 { font-size: 22px; }.login-desc { margin-bottom: 15px; }.login-content input { height: 34px; margin-bottom: 9px; }.login-content label { margin-bottom: 3px; }.login-footnote { margin-top: 5px; } }