/* Generated by scripts/build-styles.js. Edit files in styles/ instead. */
/* Source: styles/common.css */
:root {
  color-scheme: light;
  --ink: #24160f;
  --muted: #735946;
  --paper: #ead7aa;
  --paper-dark: #c89f66;
  --leather: #603821;
  --leather-hi: #9a6844;
  --bamboo: #3d6f3f;
  --bamboo-light: #8da56c;
  --tile: #1d2425;
  --wall: #f0ead8;
  --jade: #2f7a62;
  --cinnabar: #a33e2f;
  --line: rgba(61, 37, 21, 0.22);
  --tex-paper: url("./assets/texture-xuan-paper-lossless.webp");
  --tex-bamboo: url("./assets/texture-bamboo-wood-lossless.webp");
  --tex-jade: url("./assets/texture-jade-cinnabar.png");
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(18, 23, 20, 0.1), rgba(24, 18, 13, 0.38)),
    url("./assets/chinese-courtyard-ui-bg.png") center / cover no-repeat fixed,
    radial-gradient(circle at 58% 10%, rgba(255, 247, 213, 0.62), transparent 18rem),
    linear-gradient(180deg, rgba(240, 234, 216, 0.96) 0 25%, rgba(178, 150, 104, 0.9) 25% 26%, transparent 26%),
    linear-gradient(135deg, #263d33 0%, #1c2824 42%, #4a3325 100%);
  color: var(--ink);
  font-family: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(29, 36, 37, 0.2), transparent 14%, transparent 86%, rgba(29, 36, 37, 0.24)),
    radial-gradient(ellipse at 48% 88%, rgba(30, 21, 14, 0.32), transparent 42%);
  z-index: 0;
}

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


small {
  color: var(--muted);
  font-size: 12px;
}

.panel-title {
  position: relative;
  margin-bottom: 10px;
  padding-left: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.panel-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 5px;
  height: 17px;
  background: var(--cinnabar);
  box-shadow: 4px 3px 0 rgba(47, 122, 98, 0.7);
}

label {
  display: block;
  margin: 10px 0 6px;
  color: #4a3323;
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 248, 224, 0.76);
  color: var(--ink);
  outline: 0;
}

input,
select {
  height: 38px;
  padding: 0 10px;
}

textarea {
  min-height: 88px;
  resize: vertical;
  padding: 10px;
  line-height: 1.55;
}

button {
  min-height: 38px;
  border-radius: 6px;
  border: 1px solid rgba(42, 27, 17, 0.28);
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

button:hover {
  filter: brightness(1.04);
}

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

.primary {
  width: 100%;
  color: #fff9e8;
  background:
    linear-gradient(90deg, rgba(255, 226, 144, 0.2), transparent 18%, transparent 82%, rgba(255, 226, 144, 0.18)),
    linear-gradient(180deg, #b34c38, #7f2d24);
  font-weight: 900;
}

.secondary {
  color: #2e2118;
  background:
    linear-gradient(90deg, rgba(47, 95, 115, 0.08), transparent 35%),
    linear-gradient(180deg, #fff1c8, #d5aa6b);
}

.empty-inbox {
  padding: 14px 10px;
  border: 1px dashed rgba(77, 48, 29, 0.34);
  border-radius: 6px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.danger {
  border-color: rgba(132, 45, 34, 0.42);
  color: #842d22;
}

@keyframes pigeonWingbeat {
  0% { transform: translateY(-2px) rotate(-2deg) scale(var(--pigeon-size)); }
  48% { transform: translateY(2px) rotate(2deg) scale(calc(var(--pigeon-size) * 1.02)); }
  100% { transform: translateY(-2px) rotate(-2deg) scale(var(--pigeon-size)); }
}

@keyframes pigeonAura {
  0% { opacity: 0.28; transform: scale(0.9); }
  100% { opacity: 0.86; transform: scale(1.12); }
}

@keyframes inkWake {
  0% { transform: translateX(20px) scaleX(0.35); opacity: 0; }
  35% { opacity: 0.84; }
  100% { transform: translateX(-18px) scaleX(1); opacity: 0; }
}

@keyframes featherSweep {
  0%, 100% { opacity: 0.14; transform: rotate(-8deg) translateY(3px); }
  50% { opacity: 0.86; transform: rotate(10deg) translateY(-3px); }
}

@keyframes pigeonSpark {
  0% { transform: translate(16px, 0) scale(0.4); opacity: 0; }
  45% { opacity: 0.88; }
  100% { transform: translate(-10px, 5px) scale(1); opacity: 0; }
}

@keyframes pigeonRest {
  0% { transform: translateY(-1px) rotate(-1deg) scale(var(--pigeon-size)); }
  100% { transform: translateY(4px) rotate(1deg) scale(var(--pigeon-size)); }
}

@keyframes supplyBreath {
  0% { transform: scale(0.9); opacity: 0.2; }
  100% { transform: scale(1.1); opacity: 0.65; }
}

dialog {
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
}

dialog::backdrop {
  background: rgba(22, 15, 12, 0.58);
}

@keyframes pigeonArrive {
  0% { transform: translate(-20px, -16px) rotate(-7deg); opacity: 0; }
  18% { opacity: 1; }
  74% { transform: translate(208px, 12px) rotate(4deg); }
  100% { transform: translate(248px, 28px) rotate(0deg); opacity: 0; }
}

@keyframes pigeonArriveRoyal {
  0% { transform: translate(-34px, -26px) rotate(-10deg) scale(1.04); opacity: 0; }
  16% { opacity: 1; }
  44% { transform: translate(118px, -12px) rotate(2deg) scale(1.1); }
  78% { transform: translate(226px, 18px) rotate(7deg) scale(1.08); }
  100% { transform: translate(270px, 24px) rotate(0deg) scale(1.04); opacity: 0; }
}

@keyframes pigeonArriveLegend {
  0% { transform: translate(-48px, -34px) rotate(-12deg) scale(1.12); opacity: 0; }
  12% { opacity: 1; }
  38% { transform: translate(92px, -30px) rotate(8deg) scale(1.18); }
  62% { transform: translate(174px, 26px) rotate(-4deg) scale(1.18); }
  86% { transform: translate(246px, 2px) rotate(6deg) scale(1.12); opacity: 0.95; }
  100% { transform: translate(292px, 22px) rotate(0deg) scale(1.1); opacity: 0; }
}

@keyframes pigeonLost {
  0% { transform: translate(-20px, -16px) rotate(-7deg); opacity: 0; }
  24% { opacity: 1; }
  68% { transform: translate(148px, 4px) rotate(-10deg); opacity: 0.75; }
  100% { transform: translate(178px, -46px) rotate(-24deg); opacity: 0; }
}

@keyframes traceReveal {
  0% { opacity: 0; transform: translateX(-28px); }
  24% { opacity: 1; }
  100% { opacity: 0.86; transform: translateX(12px); }
}

@keyframes markDrop {
  0% { opacity: 0; transform: translateY(-14px) scale(1.28) rotate(-8deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(-2deg); }
}

@keyframes scrollDrop {
  0% { opacity: 0; transform: translate(-50%, -84px) scaleX(0.12) rotate(-10deg); }
  45% { opacity: 1; transform: translate(-50%, -18px) scaleX(0.12) rotate(3deg); }
  100% { opacity: 1; transform: translateX(-50%) scaleX(5.2) rotate(0deg); }
}

@keyframes sealStamp {
  0% { opacity: 0; transform: scale(1.8) rotate(-16deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}

@keyframes bellRing {
  0% { opacity: 0; transform: translateX(-50%) translateY(-16px) rotate(-16deg) scale(0.72); }
  22% { opacity: 1; transform: translateX(-50%) translateY(0) rotate(12deg) scale(1.08); }
  42% { transform: translateX(-50%) translateY(0) rotate(-9deg) scale(1); }
  62% { transform: translateX(-50%) translateY(0) rotate(6deg) scale(1); }
  100% { opacity: 0.82; transform: translateX(-50%) translateY(0) rotate(0deg) scale(1); }
}

@keyframes auraReveal {
  0% { opacity: 0; transform: scale(0.88) translateY(8px); }
  24% { opacity: 0.92; }
  100% { opacity: 0.74; transform: scale(1) translateY(0); }
}

@keyframes weatherSweep {
  0% { background-position: 0 0; }
  100% { background-position: 0 48px; }
}

@keyframes mistDrift {
  0% { transform: translateX(-16px); opacity: 0.48; }
  100% { transform: translateX(18px); opacity: 0.78; }
}

@keyframes snowFall {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 8px 42px, -6px 54px, 4px 46px; }
}

/* Integrated Chinese courtyard UI skin */

.panel-title {
  padding: 7px 10px 7px 34px;
  margin: -4px 0 12px -2px;
  width: fit-content;
  min-width: 104px;
  border: 1px solid rgba(69, 42, 23, 0.32);
  border-radius: 5px;
  background:
    linear-gradient(90deg, #7c4b28 0 18px, #c79551 18px 22px, #a66d3a 22px),
    linear-gradient(180deg, #d8ae68, #a66d3a);
  color: #2b1a11;
  box-shadow: inset 0 1px 0 rgba(255, 238, 188, 0.42), 0 5px 10px rgba(67, 38, 20, 0.18);
}

.panel-title::before {
  left: 11px;
  top: 8px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3c56b, #7f2d24 70%);
  box-shadow: none;
}

input,
select,
textarea {
  border-color: rgba(69, 42, 23, 0.34);
  background:
    linear-gradient(90deg, rgba(47, 95, 115, 0.06), transparent 20%, transparent 80%, rgba(182, 56, 47, 0.06)),
    rgba(255, 249, 226, 0.86);
  box-shadow: inset 0 1px 3px rgba(72, 43, 25, 0.08);
}


.empty-inbox {
  border-radius: 4px;
}

.primary {
  min-height: 46px;
  border: 2px solid rgba(91, 27, 21, 0.55);
  border-radius: 50px;
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 231, 159, 0.35), transparent 22px),
    radial-gradient(circle at 82% 50%, rgba(255, 231, 159, 0.24), transparent 22px),
    linear-gradient(180deg, #c34d39, #7f2d24);
  box-shadow: inset 0 2px 0 rgba(255, 226, 169, 0.22), 0 8px 16px rgba(90, 36, 24, 0.24);
}

/* Visual correction: calmer integrated Chinese study style */

body {
  background:
    linear-gradient(90deg, rgba(19, 18, 14, 0.62), rgba(19, 18, 14, 0.1) 28%, rgba(19, 18, 14, 0.1) 72%, rgba(19, 18, 14, 0.54)),
    linear-gradient(180deg, rgba(255, 247, 219, 0.2), rgba(22, 18, 13, 0.42)),
    url("./assets/chinese-courtyard-ui-bg.png") center / cover no-repeat fixed,
    #2f2a20;
}

body::before {
  background:
    linear-gradient(180deg, rgba(255, 247, 219, 0.06), rgba(22, 18, 13, 0.24)),
    radial-gradient(ellipse at 50% 95%, rgba(25, 18, 12, 0.34), transparent 45%);
}

.panel-title {
  min-width: auto;
  margin: -2px 0 9px -2px;
  padding: 5px 9px 5px 24px;
  border-color: rgba(93, 61, 35, 0.24);
  background:
    linear-gradient(90deg, rgba(127, 45, 36, 0.82) 0 5px, transparent 6px),
    linear-gradient(180deg, rgba(237, 199, 132, 0.9), rgba(199, 151, 86, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 239, 196, 0.4);
}

.panel-title::before {
  left: 8px;
  top: 8px;
  width: 9px;
  height: 9px;
}

input,
select,
textarea {
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(47, 95, 115, 0.04), transparent 22%, transparent 78%, rgba(182, 56, 47, 0.04)),
    rgba(255, 249, 226, 0.9);
}

.primary {
  min-height: 42px;
  border-width: 1px;
  border-radius: 6px;
}


.panel-title {
  background-image:
    linear-gradient(180deg, rgba(255, 232, 174, 0.26), rgba(46, 27, 15, 0.24)),
    var(--tex-bamboo);
  background-size: auto, cover;
  background-position: center;
}

input,
select,
textarea,
.empty-inbox {
  background-image:
    linear-gradient(90deg, rgba(47, 95, 115, 0.045), rgba(255, 249, 226, 0.68) 24%, rgba(255, 249, 226, 0.68) 76%, rgba(182, 56, 47, 0.045)),
    var(--tex-paper);
  background-size: auto, cover;
  background-position: center;
}

.primary {
  background-image:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.45), transparent 20%),
    var(--tex-jade);
  background-size: auto, 240% auto;
  background-position: center;
}

.primary {
  background-position: center, 85% 18%;
  color: #fff9e8;
}

.panel-title {
  color: #2b1a11;
}

/* Portrait app layout */
body {
  overflow: auto;
}

@media (max-width: 520px) {

  /* The footer keeps the full map compliance message; avoid covering the route legend on narrow screens. */
}

/* Auxiliary modules stay available without competing with the transmission flow. */

/* Source: styles/common-responsive.css */
@media (max-width: 920px) {
  body {
    overflow: auto;
  }
}