* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #f3efe6; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: #333; overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.screen { max-width: 480px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; padding: 6px; gap: 6px; }
.screen.hidden { display: none; }

#res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.res { background: #fff; border-radius: 8px; padding: 4px 6px; font-size: 14px; text-align: center; }
.res b { display: block; font-size: 16px; }
.res small { color: #888; font-size: 11px; }

#topbar { display: flex; gap: 6px; align-items: stretch; }
#goal { flex: 1; background: #fff7d6; border: 1px solid #e8d48a; border-radius: 8px; padding: 6px 8px; font-size: 14px; min-height: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#goal .prog { margin-left: auto; font-weight: bold; color: #a06a00; }
#goal.hover { outline: 3px solid #e2862a; }
#goal .gt { width: 100%; display: flex; font-weight: bold; }
#side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; min-width: 52px; }
#side button { padding: 4px 10px; }
.slots { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.slot { min-width: 52px; padding: 2px 5px; background: #fff; border: 2px dashed #c9b78a; color: #8a7a5a; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: "Kaiti SC", "STKaiti", "KaiTi", serif; font-size: 15px; font-weight: bold; border-radius: 6px; }
.slot small { font-family: sans-serif; font-weight: normal; font-size: 10px; color: #999; }
.slot.filled { color: #fff; background: #6aa85a; border: 2px solid #4a8a3a; }
#timer.urgent { color: #d03030; font-weight: bold; animation: shake .5s infinite; }
.slot.hover { outline: 3px solid #e2862a; }

#map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tile { aspect-ratio: 5 / 4; border-radius: 8px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; overflow: hidden; border: 2px solid transparent; }
.tile .icon { font-size: 22px; line-height: 1; }
.tile .name { color: #555; }
.tile .worker { margin-top: 2px; background: #fff; border-radius: 6px; padding: 1px 4px; font-size: 12px; font-weight: bold; }
.tile .rate { font-size: 10px; color: #2a6a2a; }
.tile.forest { background: #cfe8c4; }
.tile.farm { background: #f1e2b8; }
.tile.river { background: #c4def0; }
.tile.mine { background: #d8d3cc; }
.tile.empty { background: #ece6da; border: 2px dashed #c9bfa9; }
.tile.building { background: #f4d9c6; }
.tile.locked { background: #bdb8ae; color: #666; }
.tile.locked .icon { opacity: .6; }
.tile.hover { border-color: #e2862a; }
.float { position: absolute; top: 4px; right: 4px; font-size: 11px; color: #2a8a2a; font-weight: bold; animation: up 0.9s ease-out forwards; pointer-events: none; }
@keyframes up { from { opacity: 1; transform: translateY(6px); } to { opacity: 0; transform: translateY(-10px); } }

#actions { display: grid; grid-template-columns: 1.6fr 1.4fr .5fr; gap: 4px; }
button { border: none; border-radius: 8px; padding: 8px 4px; font-size: 13px; background: #fff; color: #333; }
button:active { transform: scale(.96); }
button.ad { background: #ffe1a8; }
button.ad::before { content: "▶ "; color: #d06a00; }
button.primary { background: #e2862a; color: #fff; }
button:disabled { opacity: .5; }

#hand-wrap { flex: 1; background: #fff; border-radius: 10px; padding: 6px; position: relative; min-height: 150px; }
#hand-title { font-size: 12px; color: #888; display: flex; justify-content: space-between; margin-bottom: 4px; }
#hand { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 48px; }
.card { min-width: 44px; height: 52px; padding: 0 6px; border-radius: 8px; background: #fffdf6; border: 2px solid #c9b78a; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; font-weight: bold; font-family: "Kaiti SC", "STKaiti", "KaiTi", serif; touch-action: none; }
.card small { font-size: 10px; font-weight: normal; color: #888; font-family: sans-serif; }
.card.partial { border-style: dashed; background: #f5f5f5; }
.card.job { background: #e6f4e0; border-color: #6aa85a; font-size: 18px; }
.card.building { background: #f8e2d0; border-color: #c97a45; font-size: 18px; }
.card.mod { background: #fff0c2; border-color: #d4a017; color: #a06a00; }
.card.hidden-word { background: #f0e0ff; border-color: #9a5ad0; font-size: 18px; }
.card.hover { outline: 3px solid #e2862a; }
.card.new { animation: pop .3s ease-out; }
@keyframes pop { from { transform: scale(.5); } to { transform: scale(1); } }
.card.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.ghost { position: fixed; pointer-events: none; z-index: 50; opacity: .85; transform: translate(-50%, -60%) scale(1.1); }

#toast { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); background: rgba(0,0,0,.78); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 80; max-width: 85%; text-align: center; }
#toast.show { opacity: 1; }

#modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 90; }
#modal.hidden { display: none; }
#modal-box { background: #fff; border-radius: 12px; padding: 16px; width: 88%; max-width: 420px; max-height: 80%; overflow: auto; font-size: 14px; }
#modal-box h3 { margin: 0 0 10px; }
#modal-box .row { display: flex; gap: 8px; margin-top: 12px; }
#modal-box .row button { flex: 1; }
.book-sec { margin: 10px 0 4px; font-weight: bold; color: #8a6a2a; }
.book-item { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #f0ece2; }
.book-item .w { font-family: "Kaiti SC", "STKaiti", "KaiTi", serif; font-size: 18px; font-weight: bold; letter-spacing: 2px; }
.book-item .d { color: #888; font-size: 12px; text-align: right; }
.adbox { text-align: center; padding: 30px 0; font-size: 16px; }
#modal-box { touch-action: pan-y; }
#res, #topbar, #map, #actions { flex-shrink: 0; }
#hand-wrap { overflow-y: auto; }
#hand { padding-right: 0; }
#hand-wrap.hover { outline: 3px solid #e2862a; }
.tile.glow { box-shadow: 0 0 0 3px #ffcf3f inset, 0 0 12px #ffcf3f; }
.tile.bad { animation: shake .3s; }
.float.bonus { color: #d06a00; font-size: 13px; top: auto; bottom: 4px; right: auto; left: 4px; }
.tile .worker.hw { background: #f0e0ff; }
.tile .rate.need { color: #a05a2a; }
.parked { font-family: "Kaiti SC", "STKaiti", "KaiTi", serif; font-weight: bold; font-size: 18px; background: #fffdf6; border: 2px dashed #c9b78a; border-radius: 6px; padding: 2px 6px; }
.parked.job { border-color: #6aa85a; font-size: 14px; }
.parked.building { border-color: #c97a45; font-size: 14px; }
.stars { font-size: 32px; color: #e2a12a; margin: 4px 0; text-align: center; }
/* 首页 */
#home { gap: 10px; overflow-y: auto; touch-action: pan-y; }
#home h1 { font-size: 22px; text-align: center; margin: 10px 0 0; }
#day { text-align: center; font-size: 13px; color: #666; }
#orders { display: flex; flex-direction: column; gap: 8px; }
button.order { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px; border: 2px solid #e2d6b8; }
button.order.t1 { border-color: #e2a12a; }
button.order.t2 { border-color: #d04a4a; background: #fff3f0; }
button.order.locked { opacity: .55; }
.order .oi { font-size: 36px; }
.order .ot { display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.order small { font-size: 11px; color: #888; }
.order .os { color: #a06a00; font-size: 12px; }
#collect { text-align: center; font-size: 13px; color: #6a4aa0; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.big-icon { font-size: 56px; text-align: center; margin: 4px 0; }
.share { background: #fff7d6; padding: 8px; border-radius: 8px; }
.album { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.album-item { background: #f6f1e4; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.album-item.no { opacity: .5; }
.album-item .ai { font-size: 32px; }
.album-item small { color: #888; font-size: 11px; }