:root {
  --ink: #0b141a; --ink2: #111d24; --ink3: #17262f; --line: rgba(210, 200, 170, .14);
  --paper: #ece3cf; --paper2: #e2d6bc; --text: #d8d2c2; --dim: #8e9a98; --brass: #c9a45c; --brass2: #e6c47a;
  --red: #c4553f; --good: #8fbf7a; --mono: "Courier New", "Courier Prime", ui-monospace, Menlo, monospace;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--text); font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
#app { height: 100%; display: grid; grid-template-rows: 46px minmax(220px, 44vh) 1fr; }
#app.off { visibility: hidden; }

/* 顶栏 */
#bar { display: flex; align-items: center; gap: 18px; padding: 0 14px; background: linear-gradient(#0e1a21, #0b141a); border-bottom: 1px solid var(--line); }
.brand b { font-family: var(--serif); font-size: 18px; letter-spacing: .12em; color: var(--paper); }
.brand span { margin-left: 10px; color: var(--dim); font-size: 13px; }
.clock { margin-left: auto; font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--brass2); letter-spacing: .05em; text-shadow: 0 0 12px rgba(230, 196, 122, .25); }
.clock.ff::after { content: ' »'; font-size: 14px; color: var(--dim); }
.coins { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 17px; color: var(--paper); }
.coins i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f0c987, #a8743a); box-shadow: 0 0 0 1px #6b4a22 inset; }
.coins small { font-family: var(--sans); font-size: 12px; color: var(--dim); }
.coins.low span { color: var(--red); }
.ctrl { display: flex; gap: 4px; }
.ctrl button { width: 34px; height: 30px; border-radius: 6px; border: 1px solid var(--line); color: var(--dim); font-size: 13px; }
.ctrl button:hover { color: var(--paper); border-color: rgba(230, 196, 122, .4); }
.ctrl button.on { color: var(--brass2); }

/* 地图 */
#mapwrap { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: #08141c; }
#map { width: 100%; height: 100%; display: block; }
#ticker { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 7px 16px; border-radius: 20px; background: rgba(8, 16, 22, .72); color: var(--paper); font-size: 14px; opacity: 0; transition: opacity .6s; pointer-events: none; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
#ticker.show { opacity: 1; }
#maphint { position: absolute; right: 12px; bottom: 10px; font-size: 12px; color: rgba(200, 195, 180, .45); pointer-events: none; }

/* 桌面 */
#desk { min-height: 0; display: grid; grid-template-columns: 230px minmax(260px, 1fr) minmax(380px, 1.35fr); background: radial-gradient(ellipse at 50% 0, #1a2a33, #0e171d 70%); }
#desk > * { min-height: 0; overflow: auto; }
#inbox { border-right: 1px solid var(--line); padding: 10px 8px; }
#inbox h3, .sec { margin: 2px 6px 8px; font-size: 12px; font-weight: 500; color: var(--dim); letter-spacing: .1em; }
.slip { position: relative; display: block; width: 100%; text-align: left; margin: 0 0 6px; padding: 8px 10px 8px 12px; border-radius: 6px; background: rgba(236, 227, 207, .06); border-left: 3px solid rgba(201, 164, 92, .35); transition: background .2s; }
.slip:hover { background: rgba(236, 227, 207, .11); }
.slip.sel { background: rgba(236, 227, 207, .16); border-left-color: var(--brass2); }
.slip.call { border-left-color: #c9a45c; }
.slip.story { border-left-color: #f4e27a; }
.slip.reply { border-left-color: rgba(143, 179, 200, .5); background: rgba(143, 179, 200, .05); }
.slip.note { border-left-color: rgba(200, 200, 200, .3); }
.slip b { display: block; font-size: 13px; font-weight: 600; color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slip small { display: block; margin-top: 2px; font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slip time { position: absolute; right: 8px; top: 8px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.slip.unread::after { content: ''; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px; background: var(--brass2); animation: blink 1s infinite; }
.slip.ambient { background: none; border-left-color: transparent; font-style: italic; }
.slip.ambient b { color: var(--dim); font-weight: 400; font-size: 12px; white-space: normal; }
@keyframes blink { 50% { opacity: .2; } }

#reader { padding: 14px 18px; border-right: 1px solid var(--line); }
#readhead { font-size: 13px; color: var(--dim); margin-bottom: 10px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
#readhead b { font-size: 16px; color: var(--paper); font-weight: 600; }
#readbody { font-size: 16px; line-height: 1.95; color: #e6dfcd; }
#readbody.tape { background: var(--paper); color: #2a2620; padding: 16px 18px; border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-family: var(--serif); position: relative; }
#readbody.tape::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: repeating-linear-gradient(90deg, var(--paper) 0 8px, transparent 8px 12px); }
#readbody.note { white-space: pre-line; font-family: var(--serif); color: #e9e1cc; }
#readbody .clip { position: relative; border-bottom: 2px solid #b8873c; cursor: pointer; padding: 0 1px; border-radius: 2px; transition: background .15s; }
#readbody .clip:hover { background: rgba(184, 135, 60, .22); }
#readbody .clip.used { border-bottom-style: dotted; color: #6b5a40; }
#readbody .clip .en { position: absolute; left: 50%; top: -1.25em; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; line-height: 1; white-space: nowrap; color: #8a6a34; background: var(--paper); padding: 1px 3px; border-radius: 2px; opacity: 0; transition: opacity .15s; pointer-events: none; }
#readbody .clip:hover .en { opacity: 1; }
.empty { color: var(--dim); font-style: italic; }
.reply-body { font-family: var(--sans); }

#compose { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
#tolist { display: flex; flex-wrap: wrap; gap: 6px; }
.who { padding: 5px 10px 5px 8px; border-radius: 16px; border: 1px solid var(--line); font-size: 13px; display: flex; align-items: center; gap: 6px; color: var(--text); background: rgba(255, 255, 255, .02); }
.who i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.who small { color: var(--dim); font-size: 11px; }
.who.sel { border-color: var(--brass2); background: rgba(230, 196, 122, .12); color: var(--paper); }
.who.new { animation: pulse 1.2s 3; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(244, 226, 122, .35); } }
#totrait { font-size: 13px; color: var(--dim); min-height: 20px; }
#totrait b { color: var(--paper); font-weight: 500; }
#totrait .mood { margin-left: 6px; padding: 1px 7px; border-radius: 9px; font-size: 11px; background: rgba(255, 255, 255, .06); }

#paper { background: linear-gradient(#efe6d2, #e4d8bd); color: #2a2620; border-radius: 4px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); position: relative; transition: transform .5s, opacity .5s; }
#paper.fly { transform: translateY(-30px) scale(.96); opacity: 0; }
#paper .ph { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px dashed rgba(60, 50, 30, .35); padding-bottom: 6px; font-size: 13px; }
#paper .lbl { font-family: var(--mono); font-size: 11px; color: #7a6a4a; letter-spacing: .1em; }
#paper .ph b { font-size: 15px; }
#meter { margin-left: auto; font-family: var(--mono); font-size: 12px; color: #6b5a40; }
#tiles { min-height: 74px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 10px 0; touch-action: none; }
#tiles .hint { margin: 6px 0; color: #8a7a5a; font-size: 13px; }
.tg { font-family: var(--mono); font-weight: 700; font-size: 15px; padding: 4px 8px; border-radius: 3px; background: rgba(60, 45, 20, .08); border: 1px solid rgba(60, 45, 20, .28); cursor: grab; user-select: none; position: relative; color: #231d14; }
.tg:hover { background: rgba(196, 85, 63, .12); }
.tg.static { color: rgba(35, 29, 20, .35); border-style: dashed; text-decoration: line-through wavy rgba(196, 85, 63, .5); }
.tg.drag { opacity: .5; }
.tg.fancy { background: rgba(160, 110, 160, .1); }
.cutline { flex-basis: 100%; height: 0; border-top: 1px dashed rgba(196, 85, 63, .6); margin: 2px 0; position: relative; }
.cutline span { position: absolute; right: 0; top: -9px; background: #e8ddc4; padding: 0 6px; font-size: 11px; color: var(--red); }
#paper .pf { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px dashed rgba(60, 50, 30, .35); padding-top: 8px; }
#clear { font-size: 13px; color: #7a6a4a; padding: 6px 10px; }
.key { padding: 8px 22px; border-radius: 22px; background: radial-gradient(circle at 40% 30%, #e9c983, #a77a37); color: #2a1d0c; font-weight: 700; letter-spacing: .1em; box-shadow: 0 3px 0 #6b4a22, 0 6px 14px rgba(0, 0, 0, .35); }
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 #6b4a22; }
.key:disabled { filter: grayscale(.8) brightness(.8); cursor: not-allowed; }

#book { border: 1px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, .15); }
#tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); }
#tabs button { padding: 7px 12px; font-size: 13px; color: var(--dim); white-space: nowrap; border-bottom: 2px solid transparent; }
#tabs button.sel { color: var(--paper); border-bottom-color: var(--brass2); }
#bank { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px; }
.cb { display: flex; flex-direction: column; align-items: center; padding: 4px 8px 3px; border-radius: 4px; background: rgba(236, 227, 207, .08); border: 1px solid rgba(236, 227, 207, .12); transition: background .15s, transform .1s; }
.cb:hover { background: rgba(236, 227, 207, .16); }
.cb:active { transform: scale(.95); }
.cb b { font-family: var(--mono); font-size: 13px; color: var(--paper); letter-spacing: .02em; }
.cb small { font-size: 10px; color: var(--dim); }
.cb.fancy b { color: #d8b8e0; }
.cb.flash { background: rgba(230, 196, 122, .35); }

/* 浮层 */
#overlay { position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; background: rgba(5, 10, 14, .82); backdrop-filter: blur(3px); overflow: auto; padding: 24px 12px; }
#overlay.show { display: flex; }
.card { max-width: 560px; width: 100%; padding: 34px 34px 28px; border-radius: 6px; background: linear-gradient(#13212a, #0e1820); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); animation: rise .6s ease; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
.card h1 { font-family: var(--serif); font-size: 44px; letter-spacing: .25em; margin: 0 0 4px; color: var(--paper); }
.card h2 { font-family: var(--serif); font-size: 26px; letter-spacing: .15em; margin: 0 0 12px; color: var(--paper); }
.card .en { font-family: var(--mono); letter-spacing: .4em; font-size: 12px; color: var(--brass); }
.card p { line-height: 1.9; color: #cfc8b6; }
.card .bul { font-family: var(--serif); font-size: 14px; padding: 12px 14px; background: rgba(236, 227, 207, .05); border-left: 3px solid #9c7aa8; color: #bdb3c3; }
.card .bul b { display: block; font-family: var(--sans); font-size: 12px; color: var(--dim); margin-bottom: 4px; font-weight: 500; }
.card .row { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.btn2 { padding: 8px 18px; border-radius: 20px; border: 1px solid var(--line); color: var(--dim); }
.btn2:hover { color: var(--paper); }
.foot { margin-top: 18px; font-size: 12px; color: #5e6b6a; }
.typed span { opacity: 0; transition: opacity .8s; display: block; }
.typed span.in { opacity: 1; }

/* 报纸 */
.news { max-width: 760px; width: 100%; background: linear-gradient(#efe7d4, #e0d4b8); color: #231e16; padding: 26px 30px 24px; border-radius: 2px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); font-family: var(--serif); animation: rise .7s ease; }
.news .mast { text-align: center; border-bottom: 3px double #3a3226; padding-bottom: 8px; }
.news .mast h1 { margin: 0; font-size: 40px; letter-spacing: .35em; }
.news .mast .sub { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: #5c5040; margin-top: 6px; }
.news .lead { border-bottom: 1px solid #8a7a60; padding: 12px 0 10px; }
.news .lead h2 { font-size: 28px; margin: 0 0 6px; line-height: 1.3; }
.news .cols { columns: 2 260px; column-gap: 26px; column-rule: 1px solid rgba(60, 50, 30, .25); padding-top: 10px; }
.news .it { break-inside: avoid; margin-bottom: 14px; }
.news .it h3 { font-size: 17px; margin: 0 0 4px; line-height: 1.35; }
.news .it p, .news .lead p { margin: 0; font-size: 14px; line-height: 1.75; text-align: justify; }
.news .it.bad h3::before, .news .lead.bad h2::before { content: '■ '; color: #8a2f22; font-size: .7em; vertical-align: middle; }
.news .it.good h3::before, .news .lead.good h2::before { content: '■ '; color: #4c6b3a; font-size: .7em; vertical-align: middle; }
.news .ad { border: 1px solid #5c5040; padding: 8px 10px; font-size: 13px; text-align: center; margin-bottom: 12px; break-inside: avoid; }
.news .ad b { display: block; font-size: 15px; }
.news .q { font-family: var(--mono); font-size: 13px; background: rgba(60, 45, 20, .08); padding: 0 3px; }
.news .tail { display: flex; justify-content: flex-end; margin-top: 10px; border-top: 1px solid #8a7a60; padding-top: 12px; }
.news .key { font-family: var(--sans); }

#toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: #2a1d14; color: #f1d8b8; padding: 9px 18px; border-radius: 20px; font-size: 14px; opacity: 0; transition: all .3s; z-index: 30; pointer-events: none; max-width: 90%; }
#toast.show { opacity: 1; transform: translateX(-50%); }

/* 手机 */
@media (max-width: 860px) {
  #app { height: auto; min-height: 100%; grid-template-rows: auto 36vh auto; }
  #bar { gap: 10px; padding: 6px 10px; flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
  .brand b { font-size: 16px; }
  .clock { font-size: 18px; }
  .coins { font-size: 15px; }
  #maphint { display: none; }
  #desk { display: block; }
  #desk > * { overflow: visible; }
  #inbox { border: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  #slips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .slip { flex: 0 0 168px; margin: 0; }
  .slip.ambient { flex-basis: 220px; }
  #reader { border: 0; padding: 12px; }
  #readbody { font-size: 15px; }
  .card { padding: 26px 20px 22px; }
  .card h1 { font-size: 36px; }
  .news { padding: 18px 16px; }
  .news .mast h1 { font-size: 30px; }
}