/* 猫田小日子 — UI: paper, wooden plaques, ink lines, muted green accents (GDD 12.5) */ :root { color-scheme: only light; --paper: #efe7d4; --paper2: #e4dac2; --ink: #3a3436; --ink2: #6a605a; --line: #8a7a66; --green: #7d9a6c; --green-d: #5b7654; --wood: #8f6e4e; --wood-d: #6a503a; --red: #a8584c; --blue: #6c8a94; --items-w: 384px; --icons-w: 224px; --serif: "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; overflow: hidden; background: #22282a; color: var(--ink); font-family: var(--serif); user-select: none; -webkit-user-select: none; touch-action: none; } #game { position: fixed; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; display: block; } button { font-family: var(--serif); cursor: pointer; } .paper { background: var(--paper); border: 2px solid var(--line); border-radius: 6px; box-shadow: 0 2px 0 rgba(40, 34, 30, .35), inset 0 0 0 2px rgba(255, 255, 255, .35); } .ico { --s: 48px; display: inline-block; width: var(--s); height: var(--s); background-image: url(../assets/ui/items.webp); background-size: calc(var(--s) * 8) auto; background-position: calc(var(--x, 0) * var(--s) * -1) calc(var(--y, 0) * var(--s) * -1); image-rendering: pixelated; vertical-align: middle; } .uico { --s: 32px; display: inline-block; width: var(--s); height: var(--s); background-image: url(../assets/ui/icons.webp); background-size: calc(var(--s) * 7) auto; background-position: calc(var(--i, 0) * var(--s) * -1) 0; image-rendering: pixelated; vertical-align: middle; } .coin-ico { --i: 4; } .energy-ico { --i: 5; } /* ---------- HUD ---------- */ #hud { position: fixed; top:0;right:0;bottom:0;left:0; pointer-events: none; display: none; z-index: 7; } #minimap-wrap { pointer-events: auto; padding: 4px; cursor: pointer; } #minimap { display: block; width: 150px; height: 108px; image-rendering: auto; border-radius: 3px; } .bagact { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .bagact button { font-size: 14px; padding: 6px 14px; background: #f7f1e2; border: 2px solid var(--line); border-radius: 5px; color: var(--ink); } .bagact button.pri { background: var(--green-d); color: #f4efe2; border-color: #445a40; } .islot.cur { box-shadow: inset 0 0 0 2px var(--green); } body.playing #hud { display: block; } #hud-tl { position: absolute; left: 12px; top: 12px; padding: 6px 12px 6px; min-width: 188px; } #hud-tl .row1 { display: flex; align-items: baseline; gap: 10px; font-size: 20px; } #hud-tl .row1 span { font-size: 13px; color: var(--ink2); } #hud-tl .row2 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-top: 2px; } #hud-tl .row2 #hud-time { font-variant-numeric: tabular-nums; font-weight: bold; } #hud-tl .row2 .uico { --s: 24px; margin-right: 2px; } #hud-wx .uico { transform: translateY(-1px); } #hud-tl .row3 { font-size: 12px; color: var(--ink2); border-top: 1px dashed var(--line); margin-top: 3px; padding-top: 2px; } #hud-tr { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } #hud-tr .coin { display: flex; align-items: center; gap: 4px; padding: 2px 12px 2px 6px; font-size: 20px; } #hud-tr .stat { display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; } #hud-tr .stat.small { font-size: 12px; padding: 2px 8px; color: var(--ink2); } #hud-energy { width: 110px; height: 10px; border: 1px solid var(--ink2); border-radius: 5px; background: #d8cfb9; overflow: hidden; } #hud-energy i { display: block; height: 100%; background: var(--green); transition: width .3s; } #hud-energy.low i { background: var(--red); } #btn-menu { pointer-events: auto; font-size: 15px; padding: 4px 14px; color: var(--ink); } #hotbar-wrap { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; } #hotbar-name { font-size: 13px; color: #f4efe2; text-shadow: 0 1px 2px #000, 0 0 4px #000; min-height: 18px; } #hotbar { position: relative; z-index: 9; display: flex; gap: 4px; padding: 5px; background: rgba(106, 80, 58, .92); border: 2px solid #4a382a; border-radius: 8px; pointer-events: auto; } .slot { position: relative; width: 56px; height: 56px; background: var(--paper); border: 2px solid var(--line); border-radius: 5px; display: flex; align-items: center; justify-content: center; } .slot.sel { border-color: var(--green-d); box-shadow: 0 0 0 2px var(--green), inset 0 0 0 2px #fff8; background: #f6f0de; } .slot b { position: absolute; left: 3px; top: 0; font-size: 10px; color: var(--ink2); } .slot em, .islot em { position: absolute; right: 3px; bottom: 0; font-style: normal; font-size: 13px; font-weight: bold; color: var(--ink); text-shadow: 0 0 2px #fff; } /* ---------- touch ---------- */ #stick-zone, #stick-base, #touch-btns { display: none; } body.touch.playing #stick-zone { display: block; position: fixed; left: 0; top: 12%; width: 52%; bottom: 84px; z-index: 5; } #stick-base { position: fixed; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; background: rgba(239, 231, 212, .18); border: 2px solid rgba(239, 231, 212, .45); z-index: 6; pointer-events: none; } #stick-base.on { display: block; } #stick-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border-radius: 50%; background: rgba(239, 231, 212, .8); border: 2px solid var(--line); transform: translate(-50%, -50%); } body.touch.playing #touch-btns { display: block; position: fixed; right: 18px; bottom: 90px; width: 190px; height: 170px; z-index: 6; } .tbtn { position: absolute; border-radius: 50%; border: 3px solid var(--line); background: rgba(239, 231, 212, .88); color: var(--ink); font-size: 16px; font-weight: bold; touch-action: none; } .tbtn.big { width: 92px; height: 92px; right: 4px; bottom: 26px; font-size: 18px; } #act-ring { position: fixed; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 2px dashed rgba(239,231,212,.6); pointer-events: none; display: none; z-index: 6; } #act-ring.on { display: block; } #act-ring i { position: absolute; left: 50%; top: 50%; width: 60px; height: 6px; margin-top: -3px; background: rgba(239,231,212,.85); border-radius: 3px; transform-origin: 0 50%; transform: rotate(var(--a, 0deg)); } .slot .dur { position: absolute; left: 5px; right: 5px; bottom: 3px; height: 4px; background: rgba(40,34,30,.35); border-radius: 2px; overflow: hidden; } .slot .dur i { display: block; height: 100%; background: var(--green); } .slot .dur i.mid { background: #c8a850; } .slot .dur i.low { background: var(--red); } .slot em.water { color: #3a6a80; } .islot .dur { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: rgba(40,34,30,.3); } .islot .dur i { display: block; height: 100%; background: var(--green); } #btn-use { width: 72px; height: 72px; right: 96px; bottom: 0; background: rgba(206, 222, 196, .9); } .tbtn.small { width: 54px; height: 54px; right: 112px; bottom: 30px; font-size: 14px; } .tbtn.down { transform: scale(.92); filter: brightness(.9); } body.touch #hotbar-wrap { left: 50%; bottom: 6px; } body.touch .slot { width: 48px; height: 48px; } body.touch .slot .ico { --s: 40px; } /* ---------- interaction prompt ---------- */ #hint { position: fixed; transform: translate(-50%, -100%); padding: 2px 10px 2px 4px; background: rgba(239, 231, 212, .94); border: 2px solid var(--line); border-radius: 12px; font-size: 14px; color: var(--ink); pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity .15s; z-index: 4; display: flex; align-items: center; gap: 5px; } #hint.on { opacity: 1; } #hint.bad { background: rgba(240,214,204,.95); border-color: #a8584c; color: #7a3a30; } #hint.bad b { background: #a8584c; } #hint b { display: inline-block; min-width: 20px; height: 20px; line-height: 18px; text-align: center; font-size: 12px; background: var(--green-d); color: #f4efe2; border-radius: 4px; } body.touch #hint { padding: 2px 10px; } /* ---------- floating texts, toasts, date card ---------- */ #floats { position: fixed; top:0;right:0;bottom:0;left:0; pointer-events: none; } .float { position: absolute; transform: translate(-50%, -100%); color: #f8f3e6; font-size: 15px; font-weight: bold; text-shadow: 0 1px 0 #3a3436, 1px 0 0 #3a3436, -1px 0 0 #3a3436, 0 -1px 0 #3a3436; white-space: nowrap; } #toasts { position: fixed; left: 50%; top: 76px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 20; } .toast { background: rgba(58, 52, 54, .86); color: #f4efe2; padding: 6px 16px; border-radius: 16px; font-size: 15px; transition: opacity .5s, transform .5s; } .toast.out { opacity: 0; transform: translateY(-8px); } #datecard { position: fixed; left: 50%; top: 32%; transform: translate(-50%, -50%); text-align: center; color: #f4efe2; pointer-events: none; opacity: 0; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); z-index: 15; } #datecard b { display: block; font-size: 40px; letter-spacing: 6px; } #datecard span { font-size: 16px; letter-spacing: 2px; } #datecard.on { animation: card 3.2s ease forwards; } @keyframes card { 0% { opacity: 0; transform: translate(-50%, -40%); } 15%, 70% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -55%); } } /* ---------- fishing minigame ---------- */ #fishgame { position: fixed; right: 22%; top: 50%; transform: translateY(-50%); display: none; align-items: flex-end; gap: 6px; padding: 10px; background: var(--paper); border: 3px solid var(--wood-d); border-radius: 8px; z-index: 12; } #fishgame.on { display: flex; } #fishgame .track { position: relative; width: 44px; height: 240px; background: linear-gradient(#9cc0c4, #6c9aa2); border: 2px solid var(--ink2); border-radius: 4px; overflow: hidden; } #fishgame .bar { position: absolute; left: 2px; right: 2px; bottom: 0; background: rgba(170, 206, 140, .55); border: 2px solid var(--green-d); border-radius: 3px; } #fishgame .bar.hit { background: rgba(190, 226, 150, .8); } #fishgame .fishicon { position: absolute; left: -2px; width: 48px; height: 48px; transform: scale(.8); } #fishgame .prog { width: 10px; height: 240px; background: #d8cfb9; border: 1px solid var(--ink2); border-radius: 3px; display: flex; align-items: flex-end; } #fishgame .prog i { display: block; width: 100%; background: var(--green); } #fishgame p { position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%); margin: 0; width: 160px; text-align: center; font-size: 12px; color: #f4efe2; text-shadow: 0 1px 2px #000; } /* ---------- dialog (cat meows + inner subtitle, GDD 10.4) ---------- */ #dialog { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(720px, 92vw); min-height: 110px; padding: 18px 24px 16px; background: var(--paper); border: 3px solid var(--wood-d); border-radius: 8px; box-shadow: 0 4px 0 rgba(40, 34, 30, .4), inset 0 0 0 3px #fff6; display: none; z-index: 14; cursor: pointer; } #dialog.on { display: block; } #dlg-name { position: absolute; left: 18px; top: -16px; padding: 2px 14px; background: var(--wood); color: #f4efe2; border: 2px solid var(--wood-d); border-radius: 4px; font-size: 15px; } #dialog.cat #dlg-name { background: var(--green-d); border-color: #445a40; } #dlg-text { font-size: 19px; line-height: 1.6; min-height: 30px; } #dialog.cat #dlg-text { font-size: 24px; } #dlg-sub { font-size: 15px; color: var(--ink2); margin-top: 4px; } #dialog.cat #dlg-sub { color: var(--green-d); } .dlg-next { position: absolute; right: 14px; bottom: 6px; font-size: 12px; color: var(--ink2); animation: blink 1s infinite; } @keyframes blink { 50% { opacity: .2; } } #choice { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 300px; padding: 14px; background: var(--paper); border: 3px solid var(--wood-d); border-radius: 8px; display: none; flex-direction: column; gap: 8px; z-index: 16; box-shadow: 0 6px 0 rgba(40, 34, 30, .4); } #choice.on { display: flex; } #choice .ctitle { font-size: 17px; margin-bottom: 4px; text-align: center; } #choice button { font-size: 16px; padding: 8px 12px; text-align: left; background: #f7f1e2; border: 2px solid var(--line); border-radius: 5px; color: var(--ink); } #choice button:hover { background: #e6efd9; border-color: var(--green-d); } #choice button b { display: inline-block; width: 22px; color: var(--ink2); font-size: 12px; } /* ---------- panels ---------- */ #panel { position: fixed; top:0;right:0;bottom:0;left:0; display: none; align-items: center; justify-content: center; background: rgba(30, 28, 30, .35); z-index: 13; } #panel.on { display: flex; } #panel.over { z-index: 40; background: rgba(20, 18, 20, .6); } .pbox { position: relative; width: min(620px, 94vw); max-height: 88vh; overflow: auto; padding: 16px 18px; background: var(--paper); border: 3px solid var(--wood-d); border-radius: 8px; box-shadow: 0 6px 0 rgba(40, 34, 30, .45), inset 0 0 0 3px #fff6; } .pbox h3 { margin: 0 0 8px; font-size: 20px; display: flex; justify-content: space-between; align-items: center; } .pclose { position: absolute; right: 8px; top: 6px; width: 32px; height: 32px; border: 2px solid var(--line); border-radius: 50%; background: #f7f1e2; font-size: 20px; line-height: 24px; color: var(--ink2); } .tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 2px solid var(--line); } .tabs button { padding: 6px 16px; font-size: 15px; border: 2px solid var(--line); border-bottom: none; border-radius: 6px 6px 0 0; background: var(--paper2); color: var(--ink2); margin-bottom: -2px; } .tabs button.on { background: var(--paper); color: var(--ink); font-weight: bold; } .grid.inv { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; } .islot { position: relative; aspect-ratio: 1; background: #f7f1e2; border: 2px solid var(--line); border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .islot.empty { background: var(--paper2); cursor: default; } .islot.picked { border-color: var(--green-d); box-shadow: 0 0 0 2px var(--green); } .islot:not(.empty):hover { background: #e9f0dc; } .islot .hk { position: absolute; left: 3px; top: 0; font-size: 10px; color: var(--ink2); } .tipline { margin-top: 10px; padding: 8px 10px; min-height: 40px; background: #f7f1e2; border: 1px dashed var(--line); border-radius: 5px; font-size: 14px; line-height: 1.5; } .dim { color: var(--ink2); font-size: 13px; } .warn { color: var(--red); } .stats { margin-top: 8px; font-size: 13px; color: var(--ink2); } .quest, .notice { padding: 8px 10px; margin-bottom: 8px; background: #f7f1e2; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 4px; font-size: 14px; line-height: 1.5; } .quest.done, .notice.done { opacity: .6; border-left-color: var(--ink2); } .quest.ready { border-left-color: var(--red); } .quest p { margin: 2px 0; } .quest .dim { margin-left: 8px; } .qp { font-size: 13px; color: var(--green-d); } .rel { padding: 10px; background: #f7f1e2; border: 1px solid var(--line); border-radius: 5px; } .hearts { font-size: 22px; color: var(--red); letter-spacing: 2px; } .hearts span { color: #b8ab98; } #mapcv { width: 100%; border: 2px solid var(--line); border-radius: 4px; image-rendering: auto; } label { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 15px; } input[type=range] { flex: 1; accent-color: var(--green-d); } .keys { margin-top: 12px; padding: 10px; background: #f7f1e2; border: 1px dashed var(--line); border-radius: 5px; font-size: 13px; line-height: 1.7; } .row { display: flex; gap: 10px; justify-content: center; margin-top: 12px; } .row button, #sum-ok { font-size: 15px; padding: 8px 18px; background: var(--green-d); color: #f4efe2; border: 2px solid #445a40; border-radius: 6px; } .shop { display: flex; flex-direction: column; gap: 6px; } .shoprow { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; background: #f7f1e2; border: 2px solid var(--line); border-radius: 6px; cursor: pointer; } .shoprow:hover { background: #e9f0dc; } .shoprow.no { opacity: .45; } .shoprow div { flex: 1; display: flex; flex-direction: column; } .shoprow .price, .purse { font-weight: bold; font-size: 16px; display: flex; align-items: center; } .shoprow .price::after { content: " 铜钱"; font-size: 12px; font-weight: normal; margin-left: 2px; } .purse .uico { --s: 24px; } .pbox h3 { padding-right: 40px; } .sum div { display: flex; justify-content: space-between; padding: 4px 6px; border-bottom: 1px dashed var(--line); } .sumtotal { margin-top: 10px; font-size: 18px; text-align: right; } .sumtotal b { font-size: 24px; color: var(--green-d); } .saving { text-align: center; } /* ---------- fade (ink), title, loading ---------- */ #fade { position: fixed; top:0;right:0;bottom:0;left:0; background: #1e1c1d; opacity: 0; pointer-events: none; z-index: 30; } #title { position: fixed; top:0;right:0;bottom:0;left:0; z-index: 25; display: flex; align-items: center; justify-content: center; transition: opacity .8s; background: radial-gradient(ellipse at 50% 40%, rgba(239, 231, 212, .15), rgba(30, 36, 34, .55) 80%); } #title.off { opacity: 0; pointer-events: none; } #title .mountains { position: absolute; left: 0; right: 0; top: 0; height: 46%; opacity: .55; background: radial-gradient(ellipse 30% 55% at 18% 100%, rgba(70, 86, 84, .9), transparent 70%), radial-gradient(ellipse 26% 70% at 44% 100%, rgba(58, 72, 72, .85), transparent 70%), radial-gradient(ellipse 34% 60% at 78% 100%, rgba(80, 96, 92, .8), transparent 70%), linear-gradient(rgba(226, 228, 220, .5), transparent); filter: blur(2px); } .tbox { position: relative; text-align: center; padding: 26px 40px 20px; background: rgba(239, 231, 212, .92); border: 3px solid var(--wood-d); border-radius: 10px; box-shadow: 0 8px 0 rgba(30, 26, 24, .45); } .tbox h1 { margin: 0; font-size: 46px; letter-spacing: 10px; color: var(--ink); } .tbox .sub { margin: 6px 0 18px; color: var(--ink2); letter-spacing: 3px; } .tbox button { display: block; width: 240px; margin: 10px auto; padding: 10px; font-size: 18px; background: var(--green-d); color: #f4efe2; border: 2px solid #445a40; border-radius: 6px; } .tbox button:disabled { background: #b8ae9a; border-color: #9a907c; cursor: default; } .tbox button span { display: block; font-size: 12px; opacity: .8; } .tbox .ver { font-size: 12px; color: var(--ink2); margin: 12px 0 0; } #loading { position: fixed; top:0;right:0;bottom:0;left:0; z-index: 50; background: #22282a; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #efe7d4; letter-spacing: 6px; transition: opacity .5s; } #loading.off { opacity: 0; pointer-events: none; } #loading .lb { width: 200px; height: 6px; border: 1px solid #efe7d4; border-radius: 3px; } #loading .lb i { display: block; height: 100%; width: 0; background: #efe7d4; } @media (max-height: 480px) { #minimap { width: 104px; height: 75px; } #hud-water { display: none !important; } body.touch.playing #touch-btns { bottom: 70px; } #hud-tl { transform: scale(.82); transform-origin: left top; } #hud-tr { transform: scale(.82); transform-origin: right top; } #dialog { bottom: 70px; } .tbox { transform: scale(.8); } #fishgame .track, #fishgame .prog { height: 180px; } } /* v1.0 — 纸本水墨界面。所有纹理由 CSS 生成，不引入模糊位图。 */ :root { --paper:#eee9d9; --paper2:#e0dccb; --ink:#292f30; --ink2:#555d59; --line:#777d70; --green:#79917e; --green-d:#435f54; --wood:#8a7258; --wood-d:#404944; --red:#9d4738; --blue:#718889; } body { color:var(--ink); } .paper,.pbox,#dialog,.tbox { background-color:rgba(238,233,217,.95); background-image:repeating-linear-gradient(112deg,transparent 0 6px,rgba(58,65,56,.018) 7px 8px,transparent 9px 16px), radial-gradient(circle at 8% 12%,rgba(255,255,247,.58),transparent 42%), linear-gradient(155deg,rgba(255,254,242,.4),rgba(191,191,169,.14)); border:2px solid #48554c; border-radius:3px; box-shadow:0 3px 0 rgba(23,35,30,.35),0 8px 22px rgba(15,25,22,.22),inset 0 0 0 3px rgba(255,255,245,.55),inset 0 0 0 5px rgba(70,82,69,.13); } #hud-tl { padding:8px 16px 9px 17px; min-width:205px; border-left:5px solid #62796b; } #hud-tl .row1 { letter-spacing:2px; } #hud-tl .row3 { border-top:1px solid rgba(64,75,66,.4); } #hud-tr .coin { border-left:4px solid #a24b39; } #btn-menu { padding:5px 17px; letter-spacing:3px; } #minimap-wrap { border-color:#687a6b; } #minimap { border:1px solid rgba(53,70,58,.3); border-radius:0; } #hotbar { background:linear-gradient(180deg,rgba(48,65,58,.94),rgba(28,48,42,.96)); border:2px solid #a6a38b; border-radius:3px; padding:6px; box-shadow:0 4px 0 rgba(25,35,30,.55),0 0 18px rgba(255,230,172,.13),inset 0 0 0 2px rgba(212,208,171,.19); } #hotbar-name { color:#f8efd5; letter-spacing:3px; font-weight:bold; text-shadow:0 2px 3px #15251d; } .slot,.islot { border:1px solid #8b9485; border-radius:2px; background:linear-gradient(145deg,#f5f0df,#dfdfce); box-shadow:inset 0 0 0 2px rgba(255,255,248,.55),0 1px 2px rgba(12,25,20,.27); } .slot.sel,.islot.picked { background:#f7f2e3; border-color:#b06d4b; box-shadow:0 0 0 2px #c6985b,inset 0 0 0 2px rgba(143,58,39,.22),0 0 12px rgba(242,181,99,.42); } .slot b { color:#546455; } #hint { background:#f2eddd; border-color:#556f60; border-radius:3px; box-shadow:0 3px 6px #14282088; } #hint b { background:#944b39; border-radius:2px; } #panel { background:rgba(15,26,23,.58); } .pbox { border-left:6px solid #50685a; padding:20px 22px; } .pbox h3 { color:#243b34; border-bottom:1px solid #98a498; padding-bottom:8px; letter-spacing:3px; } .pbox h3::before { content:'印'; display:inline-flex; align-items:center; justify-content:center; margin-right:9px; flex:0 0 23px; height:23px; font-size:13px; color:#f8f0df; background:#a64d3d; border:1px solid #6f342d; } .pclose { border-radius:2px; background:#e8e4d5; } .tabs { border-color:#586e5e; } .tabs button { border-radius:2px 2px 0 0; background:#dddccd; border-color:#829484; letter-spacing:2px; } .tabs button.on { color:#274435; border-bottom-color:#eee9d9; box-shadow:inset 0 3px 0 #a64d3d; } .notice,.quest,.rel,.tipline,.keys,.shoprow { background:linear-gradient(165deg,rgba(252,249,234,.92),rgba(225,230,213,.76)); border:1px solid #aab4a2; border-radius:1px; } .notice,.quest { border-left:4px solid #5f8070; padding:10px 12px; } .notice b,.quest b { color:#304b3f; } .notice p,.forge-row p { margin:5px 0; } .notice button,.bagact button,.row button,#sum-ok { background:linear-gradient(#5d7868,#304b40); border:1px solid #263c33; color:#fff8e6; border-radius:2px; padding:7px 14px; font-family:var(--serif); font-size:14px; box-shadow:0 2px 0 rgba(32,48,39,.38); cursor:pointer; } .notice button:disabled { background:#aab5a8; border-color:#8b9a8b; color:#e9ebe3; box-shadow:none; cursor:default; } .forge-row .ico { --s:34px; } #dialog { border-left:6px solid #617a67; border-top:2px solid #586b59; border-radius:2px; } #dlg-name { border-radius:2px; background:#9b4c3b; border-color:#74372e; letter-spacing:2px; } #dialog.cat #dlg-name { background:#496c5b; border-color:#334d41; } #choice { border-color:#61796a; } #choice button { font-family:var(--serif); } .tbtn,#stick-base,#stick-knob { border-radius:50%; border-color:#58705e; } .tbtn { background:rgba(235,229,210,.93); color:#244434; box-shadow:inset 0 0 0 3px #f5f0e5,0 5px 10px #20352d77; } .tbtn.big { border-width:4px; } #stick-base { background:rgba(235,231,213,.26); } #stick-knob { background:rgba(239,231,211,.88); box-shadow:inset 0 0 0 3px #e8dfc8; } .toast { background:rgba(40,62,51,.93); border:1px solid #b9c2a5; border-radius:2px; letter-spacing:1px; } .tbox { border:3px solid #476052; border-left:7px solid #8d4434; border-radius:2px; } .tbox h1 { color:#263a34; text-shadow:2px 2px 0 #c5c4ad; } .tbox button { border-radius:2px; background:linear-gradient(#698675,#38584a); border-color:#304c40; letter-spacing:4px; } #loading { background:#253a32; } #loading .lb i { background:#c4b38a; } @media(max-height:480px) { #hud-tl { padding:6px 10px; } .pbox { padding:10px 13px; } } :root { --serif:"Noto Serif SC","Songti SC","STSong",serif; } /* ====================================================================== v1.1 — 东方水墨界面：宣纸底 + 干笔墨框 + 墨条按钮 + 朱砂印章 纹理由 tools/gen_ink_ui.py 生成（assets/ui/ink/） ====================================================================== */ :root { --xuan: url(../assets/ui/ink/paper.webp); --ink: #23292a; --ink2: #5a5f5a; --zhu: #a8392b; --zhu-d: #7c2a20; --dai: #3f5a52; } .paper, .pbox, #dialog, .tbox, #choice, #fishgame { background: var(--xuan) repeat, #ede7d5; border: 12px solid transparent; border-radius: 0; border-image: url(../assets/ui/ink/frame_thin.webp) 30 / 12px / 0 stretch; box-shadow: 0 6px 16px rgba(18, 26, 22, .30), 0 1px 0 rgba(18, 26, 22, .18); } .pbox, #dialog, .tbox, #choice { border-width: 16px; border-image: url(../assets/ui/ink/frame.webp) 30 / 16px / 0 stretch; } /* HUD */ #hud-tl { padding: 2px 8px 3px; min-width: 190px; border-left: 12px solid transparent; } #hud-tl .row1 b { font-size: 21px; letter-spacing: 3px; } #hud-tl .row3 { border-top: 1px solid rgba(35, 41, 42, .25); } #hud-tr { gap: 5px; } #hud-tr .coin { border-left: 12px solid transparent; padding: 0 8px 0 2px; } #hud-tr .coin b { font-size: 20px; } #hud-tr .stat { padding: 0 6px 0 0; } #hud-energy { height: 9px; border: none; border-radius: 0; background: url(../assets/ui/ink/stroke.webp) center / 100% 100%; opacity: .9; padding: 2px 3px; } #hud-energy i { background: linear-gradient(90deg, #6f8f76, #9cb58e); border-radius: 0; height: 5px; } #hud-energy.low i { background: linear-gradient(90deg, var(--zhu-d), var(--zhu)); } #btn-menu { padding: 0 14px; letter-spacing: 6px; font-size: 16px; } #btn-menu:active { transform: translateY(1px); } #minimap-wrap { padding: 0; } #minimap { border: none; filter: sepia(.18) saturate(.85); } /* hotbar: one long ink stroke carrying paper slots */ #hotbar { background: url(../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; border: none; border-radius: 0; box-shadow: none; padding: 12px 22px 12px 18px; gap: 5px; filter: drop-shadow(0 4px 6px rgba(15, 22, 20, .35)); } #hotbar-name { color: #f5efdc; letter-spacing: 4px; text-shadow: 0 0 3px #1c2422, 0 1px 2px #1c2422; } .slot, .islot { background: var(--xuan) repeat, #efe9d8; border: 1.5px solid #2c3331; border-radius: 1px; box-shadow: inset 0 0 0 2px rgba(255, 253, 244, .5), inset 0 -6px 10px rgba(80, 76, 60, .09); } .islot.empty { background: var(--xuan) repeat, #e3ddcb; opacity: .75; } .slot.sel, .islot.picked { background: var(--xuan) repeat, #f7f1df; border-color: var(--zhu); box-shadow: 0 0 0 2px rgba(168, 57, 43, .55), inset 0 0 0 2px rgba(255, 253, 244, .6), 0 0 10px rgba(240, 214, 160, .45); } .slot.sel::after, .islot.picked::after { content: ""; position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; background: var(--zhu); border: 1px solid var(--zhu-d); transform: rotate(8deg); } .slot b { color: #6a6a5e; font-size: 10px; } .slot .dur, .islot .dur { background: rgba(35, 41, 42, .25); border-radius: 0; } .slot .dur i { background: #5f8570; } .slot .dur i.mid { background: #b88f45; } .slot .dur i.low { background: var(--zhu); } /* touch: ensō rings on washed discs */ .tbtn { border: none; border-radius: 50%; box-shadow: none; color: var(--ink); background: url(../assets/ui/ink/enso.webp) center / 100% 100% no-repeat, url(../assets/ui/ink/disc.webp) center / 86% 86% no-repeat; font-size: 18px; letter-spacing: 1px; text-shadow: 0 0 4px #f4eedc; filter: drop-shadow(0 3px 5px rgba(15, 22, 20, .35)); } .tbtn.big { font-size: 22px; border-width: 0; } .tbtn.down { transform: scale(.93); filter: drop-shadow(0 1px 2px rgba(15, 22, 20, .4)) brightness(.95); } #stick-base { background: url(../assets/ui/ink/enso.webp) center / 100% 100% no-repeat; border: none; opacity: .75; } #stick-knob { border: none; background: radial-gradient(circle at 40% 38%, #4c5753, #1f2625 70%); box-shadow: 0 2px 5px rgba(0, 0, 0, .35); opacity: .85; } #act-ring { border: 2px dashed rgba(35, 41, 42, .45); } #act-ring i { background: rgba(35, 41, 42, .75); } /* prompts / toasts */ #hint { background: var(--xuan), #efe9d8; border: 1.5px solid #2c3331; border-radius: 1px; box-shadow: 0 3px 8px rgba(15, 22, 20, .35); padding: 2px 10px 2px 3px; } #hint b { background: var(--zhu); color: #f8efdc; border-radius: 1px; font-weight: normal; } #hint.bad { background: var(--xuan), #f1ddd4; border-color: var(--zhu-d); color: var(--zhu-d); } .toast { background: url(../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; border: none; border-radius: 0; padding: 9px 28px 9px 24px; color: #f5efdc; letter-spacing: 2px; } .float { font-family: var(--serif); } #datecard b { font-size: 48px; letter-spacing: 12px; color: #f6f0dd; text-shadow: 0 0 12px rgba(20, 26, 24, .8), 0 2px 0 #1e2524; } #datecard b::after { content: "田"; display: inline-block; margin-left: 10px; font-size: 18px; width: 30px; height: 30px; line-height: 30px; letter-spacing: 0; vertical-align: middle; color: #f6ecd8; background: var(--zhu); text-shadow: none; transform: rotate(-5deg) translateY(-6px); } /* dialog */ #dialog { padding: 14px 22px 12px; } #dlg-name { top: -30px; left: 10px; background: var(--zhu); border: none; border-radius: 0; color: #f8efdc; padding: 3px 14px; letter-spacing: 3px; box-shadow: 2px 2px 0 rgba(30, 20, 18, .35); transform: rotate(-1.5deg); } #dialog.cat #dlg-name { background: var(--dai); } #dlg-sub { color: #6a5a4c; } #dialog.cat #dlg-sub { color: var(--dai); } .dlg-next { color: var(--zhu); } #choice button { background: transparent; border: none; border-bottom: 1px solid rgba(35, 41, 42, .25); border-radius: 0; padding: 8px 10px; font-size: 16px; } #choice button:hover, #choice button:focus { background: linear-gradient(90deg, rgba(63, 90, 82, .16), transparent); border-bottom-color: var(--zhu); } /* panels */ #panel { background: radial-gradient(ellipse at center, rgba(28, 34, 32, .35), rgba(12, 16, 15, .7)); } .pbox { padding: 14px 18px 16px; border-left-width: 16px; } .pbox h3 { color: var(--ink); border-bottom: none; padding-bottom: 10px; margin-bottom: 10px; letter-spacing: 5px; font-size: 22px; background: linear-gradient(90deg, rgba(35, 41, 42, .55), rgba(35, 41, 42, .08) 70%, transparent) bottom / 100% 2px no-repeat; } .pbox h3::before { content: "印"; flex: 0 0 26px; height: 26px; font-size: 14px; background: var(--zhu); border: none; color: #f8efdc; transform: rotate(-4deg); box-shadow: inset 0 0 0 2px rgba(248, 239, 220, .5); } .pclose { border: none; background: none; font-size: 26px; color: var(--ink); right: 6px; top: 2px; } .pclose:hover { color: var(--zhu); } .tabs { border-bottom: 1px solid rgba(35, 41, 42, .35); gap: 2px; } .tabs button { background: transparent; border: none; color: var(--ink2); letter-spacing: 3px; padding: 6px 14px 8px; } .tabs button.on { background: url(../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; color: #f5efdc; box-shadow: none; } .notice, .quest, .rel, .tipline, .keys, .shoprow { background: rgba(255, 252, 240, .45); border: 1px solid rgba(35, 41, 42, .25); border-radius: 0; } .notice, .quest { border-left: 3px solid var(--dai); } .quest.ready { border-left-color: var(--zhu); } .shoprow:hover, .islot:not(.empty):hover { background: var(--xuan), #e6eadb; } .notice button, .bagact button, .row button, #sum-ok, .tbox button { background: url(../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; border: none; border-radius: 0; box-shadow: none; color: #f6f0dd; letter-spacing: 3px; padding: 9px 22px; } .notice button:disabled, .tbox button:disabled { background: url(../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; opacity: .38; } .bagact button.pri { background: url(../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; color: #fff4dc; } .bagact button.pri::before { content: "◆ "; color: #e78a6c; font-size: 10px; } .notice button:hover, .bagact button:hover, .row button:hover, #sum-ok:hover, .tbox button:not(:disabled):hover { filter: brightness(1.25); } .hearts { color: var(--zhu); } input[type=range] { accent-color: var(--dai); } #mapcv { border: 1.5px solid #2c3331; border-radius: 0; filter: sepia(.15); } .sumtotal b { color: var(--zhu); } /* fishing */ #fishgame .track { border: 1.5px solid #2c3331; border-radius: 0; background: linear-gradient(#b4cbc6, #7b9c9b); } #fishgame .bar { border-color: var(--dai); border-radius: 0; } #fishgame .prog { border: 1px solid #2c3331; border-radius: 0; background: #ddd5c0; } #fishgame .prog i { background: var(--dai); } /* title & loading */ #title { background: linear-gradient(180deg, rgba(238, 232, 214, .55), rgba(238, 232, 214, .12) 55%, rgba(30, 36, 34, .45)); } #title .mountains { height: 64%; opacity: .72; filter: none; background: url(../assets/ui/ink/mountains.webp) center bottom / cover no-repeat; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); } #title::before { content: ""; position: absolute; right: 12%; top: 9%; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, rgba(196, 70, 52, .85), rgba(196, 70, 52, .55) 60%, rgba(196, 70, 52, 0) 72%); } .tbox { background: var(--xuan) repeat, #ede7d5; padding: 18px 38px 14px; border-left-width: 16px; } .tbox h1 { font-size: 54px; letter-spacing: 14px; color: var(--ink); text-shadow: 0 0 1px rgba(35, 41, 42, .6); position: relative; } .tbox h1::after { content: "猫田"; position: absolute; right: -30px; bottom: -4px; writing-mode: vertical-rl; font-size: 12px; letter-spacing: 1px; line-height: 1; padding: 4px 2px; color: #f8efdc; background: var(--zhu); transform: rotate(4deg); text-shadow: none; } .tbox .sub { color: var(--ink2); letter-spacing: 6px; } .tbox button { width: 250px; font-size: 19px; } .tbox .ver { color: #7a7a6c; } #loading { background: var(--xuan) repeat, #ede7d5; color: var(--ink); } #loading p { font-size: 26px; letter-spacing: 12px; } #loading .lb { border: none; height: 10px; background: rgba(35, 41, 42, .12); } #loading .lb i { background: url(../assets/ui/ink/stroke.webp) center / 100% 100%; } #fade { background: #151a19; } @media (max-height: 480px) { .pbox { padding: 8px 12px 10px; } #hotbar { padding: 9px 18px 9px 14px; } } /* ====================================================================== v1.2 — HUD 布局：左上 日期/时间/天气/体力 · 右上 小地图 + 铜钱 + 背包 · 底部中 快捷栏 · 右下 动作键 每个模块 .ui-blk 可在「设置 → 自由摆放界面」里拖动；缩放 / 透明度由 G.layout 写入 CSS 变量 ====================================================================== */ :root { --hud-scale: 1; --btn-scale: 1; --hud-alpha: 1; } .ui-blk { opacity: var(--hud-alpha); } #hud-tl { left: 10px; top: 10px; min-width: 176px; transform: none !important; scale: var(--hud-scale); transform-origin: left top; } #hud-tl .row4 { display: flex; align-items: center; gap: 4px; margin-top: 2px; } #hud-tl .row4 .uico { --s: 20px; } #hud-tl .row4 #hud-energy { flex: 1; width: auto; } #hud-tr { right: 10px; top: 10px; gap: 4px; transform: none !important; scale: var(--hud-scale); transform-origin: right top; align-items: stretch; } #hud-tr .tr-row { display: flex; gap: 4px; align-items: stretch; } #hud-tr .coin { flex: 1; justify-content: flex-end; padding: 0 6px 0 2px; border-left-width: 12px; } #hud-tr .coin b { font-size: 18px; font-variant-numeric: tabular-nums; } #hud-tr .coin .uico { --s: 22px; } #btn-menu { padding: 0 10px; letter-spacing: 4px; font-size: 15px; white-space: nowrap; } #minimap { width: 150px; height: 108px; } #hotbar-wrap { scale: var(--hud-scale); transform-origin: center bottom; } body.touch.playing #touch-btns { right: 14px; bottom: 16px; width: 176px; height: 150px; scale: var(--btn-scale); transform-origin: right bottom; opacity: calc(var(--hud-alpha) * .96); } .tbtn.big { right: 0; bottom: 0; width: 100px; height: 100px; } .tbtn.small { right: 104px; bottom: 58px; width: 60px; height: 60px; } body.lefty.touch.playing #touch-btns { right: auto; left: 14px; transform-origin: left bottom; } body.lefty .tbtn.big { right: auto; left: 0; } body.lefty .tbtn.small { right: auto; left: 104px; } body.lefty.touch.playing #stick-zone { left: auto; right: 0; } @media (max-height: 480px) { #minimap { width: 118px; height: 85px; } #hud-tl { min-width: 150px; } #hud-tl .row1 b { font-size: 17px; } #hud-tl .row2 { font-size: 13px; } #hud-tl .row3 { display: none; } #hud-tr .coin b { font-size: 15px; } #btn-menu { font-size: 13px; padding: 0 7px; } body.touch.playing #touch-btns { bottom: 10px; } .tbtn.big { width: 88px; height: 88px; font-size: 19px; } .tbtn.small { width: 54px; height: 54px; right: 92px; bottom: 50px; } body.lefty .tbtn.small { left: 92px; } } @media (max-width: 900px) { body.touch.playing #touch-btns { bottom: 74px; } } /* layout editor */ #ui-edit { display: none; position: fixed; top:0;right:0;bottom:0;left:0; z-index: 60; background: rgba(12, 16, 15, .28); touch-action: none; } body.ui-edit #ui-edit { display: block; } body.ui-edit #hud { display: block; } body.ui-edit #touch-btns { display: block !important; position: fixed; right: 14px; bottom: 16px; width: 176px; height: 150px; scale: var(--btn-scale); transform-origin: right bottom; } #ui-edit .bar { position: absolute; z-index: 2; left: 50%; top: 38%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--xuan) repeat, #ede7d5; border: 1.5px solid #2c3331; box-shadow: 0 6px 16px rgba(18, 26, 22, .35); white-space: nowrap; } #ui-edit .bar span { font-size: 13px; color: var(--ink2); } #ui-edit .bar button { background: url(../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; border: none; color: #f6f0dd; padding: 7px 16px; letter-spacing: 2px; } #ui-edit .h { position: absolute; border: 2px dashed #f2e7c8; background: rgba(168, 57, 43, .16); cursor: move; touch-action: none; } #ui-edit .h.on { background: rgba(168, 57, 43, .32); border-style: solid; } #ui-edit .h i { position: absolute; left: 0; top: 0; padding: 1px 8px; font-style: normal; font-size: 12px; color: #f8efdc; background: var(--zhu); white-space: nowrap; } .setgrp { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(35, 41, 42, .2); } .setgrp > b { display: block; letter-spacing: 3px; margin-bottom: 2px; } .setgrp .row { justify-content: flex-start; } /* ====================================================================== v1.5 — 右上角改为横排：[铜钱 / 背包 / 收起地图] + 小地图，整体高度 ≈ 小地图高度，不再压到右下动作键 快捷栏整体缩小 10%；小地图可收起 ====================================================================== */ #hud-tr { flex-direction: row; align-items: flex-start; gap: 4px; } #hud-tr .tr-col { display: flex; flex-direction: column; gap: 4px; align-items: stretch; } #hud-tr .tr-col .coin { justify-content: flex-start; padding: 0 8px 0 2px; } #btn-menu, #btn-mm { pointer-events: auto; } #btn-mm { font-size: 12px; letter-spacing: 2px; padding: 0 6px; color: var(--ink2); white-space: nowrap; } body.mm-off #minimap-wrap { display: none; } body.mm-off #btn-mm { color: var(--zhu); } #minimap { width: 144px; height: 104px; } body.hud-tight #minimap { width: 100px; height: 72px; } body.hud-tight #hud-tr .coin b { font-size: 14px; } .slot { width: 50px; height: 50px; } .slot .ico { --s: 42px; } #hotbar { padding: 11px 20px 11px 16px; gap: 4px; } #hotbar-name { font-size: 12px; min-height: 16px; } body.touch .slot { width: 43px; height: 43px; } body.touch .slot .ico { --s: 36px; } @media (max-height: 480px) { #minimap { width: 108px; height: 78px; } #hotbar { padding: 8px 16px 8px 13px; } #btn-mm { font-size: 12px; } } body.hud-tight2 #minimap { width: 76px; height: 55px; } body.hud-tight2 #hud-tr { scale: calc(var(--hud-scale) * .86); } /* v1.7.2 — 节气时历，沿用现有水墨纸张与朱印色。 */ #hud-tl .row-term { pointer-events: auto; width: fit-content; cursor: pointer; color: #8b483b; font-size: 12px; line-height: 1.3; border-bottom: 1px solid #8b483b66; margin-top: 1px; } #hud-tl .row-term:hover { color: #4c6755; } .pbox .tabs { flex-wrap: wrap; } .cal-head { border-left: 4px solid #a24b39; padding: 6px 12px; background: #ece6d7; } .cal-head b { font-size: 17px; } .cal-head p { margin: 5px 0; } .cal-head span { color: #655e50; font-size: 13px; } .cal-seasons { display: grid; gap: 7px; margin: 10px 0; } .cal-season { display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 8px; border-bottom: 1px solid #aaab9c; padding: 3px 0 7px; opacity: .7; } .cal-season.active { opacity: 1; } .cal-season > b { color: #516857; font-size: 19px; } .cal-season > div { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; } .cal-term { display: flex; flex-direction: column; text-align: center; background: #e7e2d4; padding: 3px 0; font-size: 13px; white-space: nowrap; } .cal-term small { color: #777363; font-size: 12px; } .cal-term.current { background: #526c5d; color: #fff4e4; } .cal-term.current small { color: #e3d9c1; } .cal-term.today { outline: 2px solid #a24b39; outline-offset: -2px; } .cal-farm { border: 1px solid #9ba898; background: #f6f1e5; padding: 9px 12px; } .cal-farm p { margin: 5px 0 0; line-height: 1.5; } .cal-note { font-size: 12px; margin-bottom: 0; } @media (max-width: 540px) { .cal-term { font-size: 12px; } .cal-term small { font-size: 12px; } .tabs button { padding-left: 8px; padding-right: 8px; } } /* v1.8.0: separate panels and the new four-season painted calendar. */ #hud-tr .tr-actions { display:flex; gap:3px; } #hud-tr .tr-actions button { flex:1; pointer-events:auto; min-height:30px; padding:2px 6px; white-space:nowrap; font-size:13px; } #hud-tr .tr-actions #btn-set { flex:0 0 34px; font-size:20px; line-height:1; } .pbox:has(.cal-art) { width:min(730px,94vw); } .cal-art { height:clamp(52px,15vh,118px); margin:-5px -5px 8px; background:url(../assets/ui/solar_scroll.webp) center 72% / cover no-repeat; border-bottom:3px solid #6c7969; } .cal-head { padding:5px 10px; } .cal-head p { font-size:14px; } .cal-pick { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:8px 0 5px; } .cal-pick button { min-height:32px; background:#e5e0d2; border:1px solid #8a9486; color:#4c5e51; font-size:14px; } .cal-pick button.on { background:#4b6658; color:#fff6df; } .cal-focus { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; } .cal-entry { display:flex; align-items:baseline; flex-wrap:wrap; gap:3px 7px; padding:4px 7px; background:#eee9dc; border-left:3px solid #adb7a9; font-size:12px; } .cal-entry small { color:#8d5b46; } .cal-entry b { font-size:15px; } .cal-entry span { display:block; width:100%; color:#655e53; line-height:1.25; } .cal-entry.current { border-left-color:#ac493c; background:#e3e9dc; } .cal-farm { margin-top:7px; padding:6px 9px; font-size:13px; } .cal-farm p { margin-top:2px; line-height:1.3; } .cal-note { margin-top:6px; line-height:1.3; } .test-tools label { display:flex; align-items:center; gap:9px; margin:6px 0; } .test-tools select, .test-tools input { flex:1; min-width:0; min-height:30px; } .test-tools .row { display:flex; flex-wrap:wrap; gap:5px; } .test-tools p { margin:5px 0; } /* v1.11: letter, deed and construction share one paper vocabulary. */ body, button, input, select { font-family:var(--serif); font-synthesis:none; } #btn-deed { display:none; pointer-events:auto; align-self:stretch; padding:4px 8px; color:#452d25; font-size:15px; letter-spacing:3px; background:#e7dbc3; } #btn-deed.shown { display:block; } .deed-item { display:inline-grid; place-items:center; flex:none; width:31px; height:34px; font:400 19px var(--serif); color:#714332; font-style:normal; background:#e9d6a8; border:1px solid #785c44; box-shadow:2px 2px 0 #9d8464; transform:rotate(-5deg); } .deed-in-bag { display:flex; align-items:center; gap:12px; width:100%; margin:9px 0 13px; padding:7px 12px; border:1px solid #8b6b4e; color:#4d3c32; background:#eee3c9; text-align:left; } .pbox.letter-paper { width:min(600px,91vw); max-height:90vh; overflow:auto; padding:clamp(16px,3vw,28px) clamp(18px,4vw,42px); border:0; border-radius:3px; box-shadow:0 12px 36px #101a15b3; background:#dfccb0 url(../assets/ui/ink/deed_paper.webp) center / 100% 100% no-repeat; } .letter-body { position:relative; z-index:1; padding:10px 2%; color:#362d28; line-height:1.65; font-size:clamp(13px,1.3vw,16px); } .letter-body h2 { font-size:clamp(22px,2.3vw,30px); text-align:center; letter-spacing:5px; font-weight:400; margin:4px 0 16px; } .letter-kicker { text-align:center; font-size:12px; letter-spacing:4px; color:#916c57; } .letter-body p { margin:9px 0; text-indent:2em; } .letter-body .letter-sign { margin:15px 0 12px; text-align:right; text-indent:0; } .letter-body button { margin:6px auto 0; display:block; min-height:34px; padding:5px 20px; background:#38554a; color:#f5ebd3; border:1px solid #283e35; font-size:14px; } .letter-paper .pclose { position:sticky; float:right; top:0; z-index:4; } .deed-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; } .letter-body .deed-building { display:flex; flex-direction:column; gap:3px; width:100%; min-height:58px; padding:7px; margin:0; text-align:center; color:#374537; background:#d8dccd99; border:1px solid #8f9c8d; } .deed-building.locked { filter:grayscale(1); opacity:.53; } .deed-building.selected { outline:2px solid #a44b37; outline-offset:-3px; } .building-name { font-size:14px; letter-spacing:1px; } .building-status { font-size:12px; } .deed-detail { min-height:58px; padding:7px 2px; font-size:13px; } .letter-body button:disabled { opacity:.45; } .signature { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; } .signature button { margin:0; } .paw-print { display:inline-grid; place-items:center; color:#b13d32; font-size:40px; opacity:0; transform:scale(2) rotate(-18deg); filter:sepia(.45); } .paw-print i { width:36px; height:36px; display:block; background:url(../assets/ui/icons.webp) no-repeat right top / 252px auto; filter:sepia(1) saturate(3) hue-rotate(315deg); } .paw-print.stamped { animation:pawStamp .8s cubic-bezier(.2,1.5,.4,1) forwards; } @keyframes pawStamp { 0% { opacity:0; transform:scale(2) rotate(-18deg); } 40% { opacity:1; transform:scale(.92) rotate(-8deg); } 70% { transform:scale(1.1) rotate(-8deg); } 100% { opacity:.85; transform:scale(1) rotate(-8deg); } } #trail-marker { position:fixed; z-index:8; display:none; transform:translate(-50%,-100%); pointer-events:none; width:36px; height:45px; text-align:center; filter:drop-shadow(0 2px 3px #1b241ba9); animation:guideBob 1.6s ease-in-out infinite; } #trail-marker.on { display:block; } #trail-marker span { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#f1e7cb; color:#8e4933; border:2px solid #6c7969; font-size:21px; } #trail-marker small { color:#f7e9c9; font-size:12px; line-height:10px; text-shadow:0 1px 2px #223; } @keyframes guideBob { 50% { translate:0 -6px; } } #datecard { width:min(580px,72vw); top:36%; text-shadow:none; } #datecard .dc-inner { padding:clamp(14px,3vw,25px); background:#263931da; border:1px solid #ad9b74; box-shadow:0 8px 22px #111b18a8; } #datecard .dc-year { color:#d3bd8d; font-size:clamp(11px,1.2vw,15px); letter-spacing:3px; } #datecard .dc-row { display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:clamp(10px,3vw,36px); white-space:nowrap; margin:7px auto; } #datecard .dc-row b { display:inline; font-size:clamp(21px,4.8vw,42px); line-height:1.12; letter-spacing:1px; font-weight:400; color:#f2e9d4; text-shadow:0 2px 3px #111; } #datecard .dc-row b::after { display:none; } #datecard .dc-row i { width:1px; height:1.4em; flex:none; background:#b3966a; } #datecard .dc-note { color:#efe6d1; font-size:clamp(11px,1.2vw,15px); letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.placing #hud, body.placing #touch-btns, body.placing #stick-zone, body.placing #hotbar-wrap, body.placing #hint, body.placing #trail-marker { display:none!important; } #deed-placement { display:none; position:fixed; top:0;right:0;bottom:0;left:0; z-index:30; touch-action:none; cursor:crosshair; } #deed-placement.on { display:block; } .deed-cloud { position:absolute; pointer-events:none; opacity:.8; background:url(../assets/ui/ink/mountains.webp) center / cover no-repeat; } .deed-cloud.top, .deed-cloud.bottom { width:100%; height:11vh; left:0; } .deed-cloud.top { top:-3vh; transform:rotate(180deg); } .deed-cloud.bottom { bottom:-3vh; } .deed-cloud.left, .deed-cloud.right { height:100vh; width:7vw; top:0; background-size:auto 100%; } .deed-cloud.left { left:-2vw; transform:rotate(90deg); } .deed-cloud.right { right:-2vw; transform:rotate(-90deg); } .place-bar { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:10px; align-items:center; max-width:95vw; padding:7px 12px; background:#efe5d1e8; border:1px solid #7f7c65; color:#334b3d; font-size:12px; pointer-events:none; white-space:nowrap; } .place-bar button { pointer-events:auto; background:#38554a; color:#fff3d4; border:0; padding:6px 9px; } @media(max-width:700px) { .deed-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .letter-body { line-height:1.45; } .letter-body p { margin:6px 0; } #datecard { width:min(480px,86vw); } .place-bar { bottom:4px; gap:5px; font-size:12px; } } body.playing #hud-term { pointer-events:auto; } @media(max-height:480px) { .cal-art { height:48px; } .cal-head p { margin:2px 0; } .cal-entry span { display:none; } .cal-farm { margin-top:4px; } .pbox:has(.cal-art) { max-height:90vh; } } /* 帧率显示 */ #fps { display: none; position: fixed; left: 50%; top: 4px; transform: translateX(-50%); z-index: 70; pointer-events: none; font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace; padding: 1px 8px; border-radius: 2px; background: rgba(20,26,24,.62); color: #cfe6c6; white-space: nowrap; } #fps.mid { color: #f0d890; } #fps.bad { color: #ff9c8a; } /* ====================================================================== v1.10 — 手卷水墨面板（粮囤、赶集、收粮单、工作台、手艺、集市） 旧宣纸底 + 毛笔标题（马善政楷书子集）+ 一角淡墨画；按统一网格排版 ====================================================================== */ /* 猫田楷分两个文件按需加载：常用标题字（小，先到）+ 游戏里其余出现过的汉字（较大，只有用到时才下载）。 */ @font-face { font-family:"猫田楷"; src:url("../assets/fonts/kai-sub.woff") format("woff"); font-display:swap; unicode-range:U+0-33FF,U+4E00,U+4E03,U+4E09-4E0B,U+4E0D-4E0E,U+4E1B-4E1C,U+4E24,U+4E2A,U+4E30,U+4E3B,U+4E5D,U+4E61,U+4E66,U+4E70,U+4E73,U+4E86,U+4E8C,U+4E8E,U+4E91,U+4E94-4E95,U+4EA4,U+4EB2,U+4EBA,U+4ECA,U+4ED8,U+4EF6-4EF7,U+4EFD,U+4F11,U+4F1A,U+4F1E,U+4F2F,U+4F4D,U+4F53,U+4F5C,U+4F60,U+4F7F,U+4FE1,U+4FEE,U+505A,U+505C,U+50CF,U+513F,U+5148,U+5165,U+516B,U+516D,U+5176,U+518C,U+51AC,U+51BB,U+51C9,U+51F3,U+51FA,U+5200,U+5206,U+521D,U+5228,U+5230,U+524D,U+5288,U+529B,U+529E,U+5300,U+5305,U+5317,U+5320,U+5341,U+5345,U+5348,U+534A,U+5355-5357,U+535C,U+5377,U+5386,U+538B,U+53BB,U+53BF,U+53D4,U+53D6-53D7,U+53E3,U+53E6,U+53EA,U+53EF-53F0,U+53F6,U+540E,U+5411,U+5468,U+548C,U+54C1,U+54E8,U+559D,U+56CA,U+56DB,U+56DE,U+56E2,U+56E4,U+56ED,U+56F4,U+5706,U+5708,U+5728,U+5730,U+573A,U+5750-5751,U+5761,U+57CE,U+587E,U+58F6,U+5904,U+5907,U+590D,U+590F,U+5916,U+591A,U+591F,U+5927,U+5929,U+5934,U+5951,U+5979,U+597D,U+59CB,U+59D1,U+59D4,U+5A18,U+5A46,U+5A76,U+5B50,U+5B58,U+5B66,U+5B69,U+5B88,U+5B9C,U+5BA2,U+5BB6,U+5BC4,U+5BD2,U+5C0F,U+5C31,U+5C4B,U+5C71,U+5C81,U+5CB3,U+5DE5,U+5DF1-5DF2,U+5E02-5E03,U+5E18,U+5E2E,U+5E72,U+5E74,U+5E94,U+5EAD,U+5EFA,U+5EFF-5F00,U+5F0F,U+5F53,U+5F92,U+5F97,U+5FAE,U+5FC3,U+5FCC,U+5FEB,U+6062,U+606F,U+60CA,U+60F3,U+6162,U+61C2,U+6210,U+6234,U+6237,U+624B,U+624D,U+6253,U+6258,U+627E,U+628A,U+62B1,U+62C9,U+62FF,U+6309,U+6311,U+6346,U+6377,U+637B,U+638C,U+63C9,U+642C,U+644A,U+6536,U+653E,U+6548,U+6563,U+6587,U+6597,U+6599,U+659B,U+65B0,U+65B9,U+65E0,U+65E5,U+65E7,U+65F6,U+660E,U+6625,U+662F,U+664C,U+6652,U+666F,U+6682,U+6691,U+66AE,U+6700,U+6708-6709,U+671F,U+6728,U+672A,U+6740,U+6742,U+6750-6751,U+6756,U+6761,U+6765,U+677E-677F,U+6797,U+67DC,U+67F3-67F4,U+680F,U+6817,U+6837,U+6839,U+683C,U+6842,U+6863,U+6865,U+6869,U+68DA,U+6942,U+6A21,U+6B21,U+6B47,U+6BCF,U+6BD2,U+6BD4,U+6C14,U+6C34,U+6C49,U+6C64,U+6C88,U+6CA1,U+6CA4,U+6CB3,U+6CB9,U+6CD5,U+6CE5,U+6D4B,U+6D63,U+6E05,U+6E20,U+6E7F,U+6EAA,U+6EE1,U+6F6E,U+7011,U+704C,U+706B,U+706F-7070,U+7089,U+7092,U+70B9,U+70D8,U+70E4,U+70ED,U+719F,U+7247,U+725B,U+730E,U+732A-732B,U+74DC,U+751F,U+7528,U+7530,U+754C,U+767D,U+7684,U+76CF,U+770B,U+7740,U+77F3,U+77FF,U+788E,U+7891,U+78E8,U+7965,U+798F,U+79CB,U+79CD,U+79E6,U+7A0E,U+7A7F,U+7ACB,U+7AE5,U+7AF9,U+7AFF,U+7B06,U+7B0B,U+7B20,U+7B2C,U+7B49,U+7B51,U+7B54,U+7B7E,U+7B97,U+7BB1,U+7BD3,U+7BF1,U+7BFE,U+7C73,U+7C7D,U+7C89,U+7C97,U+7C9F,U+7CAA,U+7CAE,U+7CBE,U+7D20,U+7EA2,U+7EA6,U+7EC7,U+7EE7,U+7EED,U+7EF3,U+7F16,U+8001,U+8054,U+80A5,U+80CC,U+80FD,U+8102,U+811A,U+8170,U+817F,U+818F,U+81EA,U+81F3,U+8272,U+827A,U+8282,U+828B,U+8292,U+82B1,U+8304,U+8336,U+8349,U+8352,U+835E,U+836F,U+8377,U+8393,U+83C7,U+83CC,U+83DC,U+83E0,U+841D,U+8425,U+843D,U+8471,U+84D1,U+86CB,U+86F0,U+8702,U+8713,U+871C,U+873B,U+884C,U+8863,U+8865,U+88C5,U+88D5,U+897F,U+8981,U+89D2,U+89E3,U+8BAB,U+8BB8,U+8BBA,U+8BC4,U+8BC6,U+8BD5,U+8BEF,U+8C37,U+8C46-8C47,U+8D27,U+8D34,U+8D70,U+8D76-8D77,U+8D9F,U+8DD1,U+8DDF,U+8DEF,U+8E0F,U+8EAB,U+8F66,U+8F6E,U+8FB0,U+8FB9,U+8FC7,U+8FD0,U+8FD4,U+8FD8-8FD9,U+8FDB,U+9001,U+9009,U+9020,U+9022,U+9053,U+90A3,U+90BB,U+90CE,U+9152,U+916C,U+91C7,U+91CC,U+91CE,U+91D1,U+9489,U+9493,U+94B1,U+94C1,U+94DC,U+94F6,U+94FA,U+9504-9505,U+9519,U+9523-9524,U+952D,U+9538,U+953B,U+95E8,U+95F8,U+963F,U+9648,U+964D,U+9662,U+9669,U+968F,U+96C6,U+96E8,U+96EA,U+971C,U+9732,U+9752,U+9762,U+97E6,U+987B,U+9897,U+98CE,U+98DF,U+996D,U+9999,U+9AD8,U+9C7C,U+9CA4,U+9CAB,U+9CB6,U+9CC5,U+9CDC,U+9E45,U+9EA6,U+9EC4,U+9F50; } @font-face { font-family:"猫田楷"; src:url("../assets/fonts/kai-more.woff") format("woff"); font-display:swap; unicode-range:U+4E07-4E08,U+4E11,U+4E13,U+4E16,U+4E1A,U+4E1D,U+4E22,U+4E25,U+4E27,U+4E2B,U+4E2D,U+4E32,U+4E34,U+4E3A,U+4E3E,U+4E45,U+4E48,U+4E4B-4E4C,U+4E4E-4E50,U+4E58,U+4E5F-4E60,U+4E71,U+4E89,U+4E8B,U+4E8F,U+4E92,U+4E9B,U+4EA7,U+4EA9,U+4EAD-4EAE,U+4EC0,U+4EC5,U+4ECB,U+4ECD-4ECE,U+4ED3-4ED4,U+4ED6-4ED7,U+4EE3-4EE5,U+4EEC,U+4EFB,U+4EFF,U+4F0F-4F10,U+4F18-4F19,U+4F20,U+4F24,U+4F30,U+4F36,U+4F38,U+4F3C,U+4F46,U+4F4E-4F4F,U+4F51,U+4F55,U+4F59,U+4F84,U+4F9B,U+4F9D,U+4FA7,U+4FBF,U+4FC3,U+4FCF-4FD0,U+4FD7,U+4FDD,U+4FE9,U+500D,U+5012,U+5014,U+5019,U+501F,U+5026,U+503C,U+503E,U+5047,U+504F,U+5076-5077,U+508D,U+50A8,U+50AC,U+50F5,U+5144,U+5149,U+514D,U+5154,U+515C,U+5168,U+516C,U+5170-5171,U+5173-5175,U+5177,U+517B-517D,U+5185,U+518D,U+5192,U+5199,U+519C,U+51A0,U+51A4,U+51B0,U+51B2-51B3,U+51B5,U+51B7,U+51C0,U+51C6,U+51CC,U+51CF,U+51D1,U+51E0-51E1,U+51ED,U+51F6,U+51FB,U+51FD,U+51FF,U+5203,U+5207,U+5212,U+5217,U+5219-521A,U+5229,U+522B,U+522E,U+5236-5237,U+523A-523B,U+524A,U+5269-526A,U+526F,U+5272,U+529D,U+529F-52A1,U+52A8,U+52B1-52B3,U+52BF,U+52D2,U+52E4,U+52FA,U+52FF,U+5306,U+5316,U+5323,U+5339,U+533B,U+5343,U+5347,U+5353,U+5360-5361,U+5364,U+5367,U+536F-5371,U+5373-5374,U+5378,U+5385,U+5389,U+538C,U+539A,U+539F,U+53A2,U+53C2,U+53C8,U+53CA-53CD,U+53D1,U+53D8,U+53DF-53E0,U+53E4-53E5,U+53E8,U+53EB,U+53EE,U+53F2-53F3,U+53F7,U+53FC-53FD,U+5403-5404,U+5408-540A,U+540C-540D,U+540F,U+5413,U+5417,U+5426-5427,U+542B-542D,U+542F,U+5431,U+5435,U+5438-5439,U+5440,U+544A,U+5450,U+5457,U+5462,U+5466,U+5473,U+547C-547D,U+548B,U+5490,U+5494,U+549A,U+54A3,U+54A6,U+54AA,U+54AC,U+54AF,U+54B1,U+54B3,U+54B8,U+54BD,U+54C4,U+54C8,U+54CD-54CE,U+54D7,U+54DF,U+54E5-54E7,U+54EA,U+54FC,U+5509,U+5520,U+5524,U+552C,U+552E,U+5543-5544,U+5546,U+554A,U+5565-5566,U+556A,U+5582,U+5584,U+558A,U+558F,U+5598,U+559C,U+55B3,U+55B5,U+55BD,U+55D2-55D3,U+55E1,U+55EF,U+55F7,U+5600,U+560E,U+5618,U+561B,U+561E,U+5631,U+5634,U+5636,U+563F,U+564E,U+5668,U+566A,U+5693,U+56B7,U+56BC,U+56E0,U+56F0,U+56FA,U+56FE,U+5703,U+571F,U+5740,U+5747,U+574A,U+574F,U+5757,U+575B,U+5766,U+5782,U+57A6,U+57AB,U+57C2,U+57CB,U+57FA,U+5802,U+5806,U+5835,U+584C,U+585E,U+586B,U+5883,U+5893,U+5899,U+589E,U+58A8-58A9,U+58C1,U+58F0,U+58F3,U+591C,U+592A-592B,U+592E,U+5931,U+5938-5939,U+5947,U+5954,U+5956-5957,U+5973-5974,U+5982,U+5987,U+59A5,U+59A8,U+59B9,U+59BB,U+59D0,U+59D3,U+59DC,U+5A01,U+5A03,U+5AB3,U+5AC1-5AC2,U+5ACC,U+5AE9,U+5B54,U+5B57,U+5B59,U+5B63-5B64,U+5B6A,U+5B81,U+5B83,U+5B85,U+5B89,U+5B8C,U+5B97,U+5B9A,U+5B9D-5B9E,U+5BA3-5BA4,U+5BAB,U+5BB3,U+5BB9,U+5BBD,U+5BBF,U+5BC6,U+5BCC,U+5BDF,U+5BF8-5BF9,U+5BFB,U+5C01,U+5C06,U+5C0A,U+5C11,U+5C14,U+5C16,U+5C18,U+5C1A,U+5C1D,U+5C3A,U+5C3D-5C3E,U+5C40-5C42,U+5C45,U+5C49,U+5C4F,U+5C51,U+5C55,U+5C5E,U+5C94,U+5C9B,U+5CA9,U+5CB8,U+5CF0,U+5D16,U+5D29,U+5DE1,U+5DE6-5DE7,U+5DEE,U+5DF4,U+5DF7,U+5E01,U+5E08,U+5E16,U+5E26-5E27,U+5E38,U+5E3D,U+5E55,U+5E73,U+5E76,U+5E78,U+5E7C,U+5E84,U+5E86,U+5E8A,U+5E8F,U+5E93,U+5E95,U+5E97,U+5E99,U+5E9F,U+5EA6-5EA7,U+5ECA,U+5F02-5F04,U+5F15,U+5F1F-5F20,U+5F26-5F27,U+5F2F,U+5F39-5F3A,U+5F52,U+5F62,U+5F64,U+5F69,U+5F71,U+5F80,U+5F84-5F85,U+5F88,U+5F8B,U+5FAA,U+5FB5,U+5FC5,U+5FCD,U+5FD8-5FD9,U+5FF5,U+5FFD,U+6001,U+600E,U+6015,U+601D,U+6025,U+6027-6028,U+602A,U+6035,U+603B,U+604B,U+6068,U+6076,U+6084,U+6089,U+60A0,U+60AC,U+60C5,U+60DC,U+60E6,U+60EF,U+60F9,U+6101,U+610F,U+611F,U+6123,U+613F,U+614C,U+614E,U+618B,U+61D2,U+620F,U+6211,U+6216,U+622A,U+6233,U+623F-6241,U+6247,U+624E,U+6251-6252,U+6254,U+625B,U+6267,U+6269,U+626B-626D,U+626F-6270,U+6276,U+6279,U+627F,U+6284,U+6293,U+6295-6296,U+6298,U+629B,U+62A0-62A2,U+62A4-62A5,U+62AB-62AC,U+62B5,U+62B9,U+62BD,U+62C5-62C6,U+62CC-62CD,U+62D0,U+62D2-62D4,U+62D6,U+62DB-62DC,U+62E2-62E3,U+62E9,U+62F1,U+62FC-62FE,U+6301-6302,U+6307,U+6316,U+6321,U+6323-6325,U+6328,U+632A,U+633A,U+6342,U+6345,U+634E-634F,U+635E-635F,U+6361-6363,U+6367,U+636E,U+6380,U+6382,U+6387,U+6389,U+638F-6390,U+6392,U+6396,U+63A2,U+63A5,U+63A7-63A9,U+63B0,U+63BA,U+63CF-63D0,U+63D2,U+63E1,U+63E3,U+63EA,U+63ED,U+6401-6402,U+6413,U+642D,U+6446-6447,U+6454,U+6458,U+645E,U+6478,U+6482,U+6491-6492,U+6495,U+649E,U+64AC-64AE,U+64CD-64CE,U+64E6,U+6512,U+6525,U+652F,U+6539,U+653F,U+6545,U+6551,U+6559,U+655E,U+6562,U+656C,U+6570,U+6572,U+6574,U+6577,U+6591,U+659C,U+65A4,U+65A7,U+65AD,U+65BD,U+65C1,U+65CB,U+65E9,U+65F1,U+65FA,U+660F,U+6613,U+661F,U+6628,U+663C,U+663E,U+6643,U+6655,U+665A,U+6668,U+666E,U+6674,U+6676,U+667A,U+667E,U+6696-6697,U+66F2,U+66F4,U+66FE-66FF,U+670B,U+670D,U+671B,U+671D,U+672B-672C,U+672F,U+6731,U+6735,U+673A,U+6743,U+6746,U+674F,U+675F,U+676F,U+6789,U+679A,U+679C-679D,U+67AF,U+67B6,U+67C4,U+67D3-67D4,U+67E5,U+6807,U+6811,U+6821,U+682A,U+6838,U+6843,U+6846,U+6848,U+684C,U+6854,U+6876,U+6881,U+6885-6886,U+68A2,U+68A6,U+68AF,U+68C0,U+68C9,U+68D5,U+68D8,U+68F1,U+68F5,U+690D,U+692D,U+695A,U+6960,U+6977,U+697C,U+6982,U+6986,U+6995,U+69A8,U+69AB,U+69D4,U+69DB,U+69FD,U+6A2A,U+6A31,U+6A58-6A59,U+6A90,U+6B20,U+6B22,U+6B3A,U+6B3E,U+6B62-6B65,U+6B6A,U+6B7B,U+6B8A-6B8B,U+6BB5,U+6BCD,U+6BDB,U+6BE1,U+6BEB,U+6C11,U+6C38,U+6C41-6C42,U+6C57,U+6C5B,U+6C5F-6C60,U+6C6A,U+6C7D,U+6C89,U+6C8F,U+6C99,U+6CB8,U+6CBE-6CBF,U+6CC4,U+6CC9,U+6CDB,U+6CDE,U+6CE1-6CE2,U+6CE8,U+6CFC,U+6D07,U+6D12,U+6D17,U+6D1E,U+6D2A,U+6D3B-6D3C,U+6D3E,U+6D41,U+6D45,U+6D47,U+6D51,U+6D53,U+6D6A,U+6D6E,U+6D78,U+6D82,U+6D88-6D89,U+6DA6,U+6DA8,U+6DCB-6DCC,U+6DD8,U+6DE1,U+6DE4,U+6DEC,U+6DF1,U+6DF7,U+6DFB,U+6E10,U+6E17,U+6E21,U+6E23,U+6E29,U+6E34,U+6E38,U+6E85,U+6E90,U+6E9C,U+6EA2,U+6ECB,U+6ED1,U+6EDA,U+6EDE,U+6EE9,U+6EF4,U+6F02,U+6F06,U+6F0F,U+6F2B,U+6F5C,U+6F6D,U+706D,U+7075-7076,U+707E-707F,U+708E,U+7096,U+70AD,U+70BC,U+70C1-70C2,U+70CA,U+70D9,U+70DF,U+70E6-70E7,U+70EB,U+7110,U+7119,U+7126,U+7136,U+7145,U+7164,U+7167-7168,U+716E,U+718F,U+7194,U+71AC,U+71CE,U+71D5,U+71E5,U+722A,U+722C,U+7231,U+7236-7237,U+7239,U+723D,U+7248,U+724C,U+7262,U+7269,U+7272,U+7279,U+7281,U+72AF,U+72B6,U+72D7,U+72E1,U+72EC,U+72FC,U+731B-731C,U+733E,U+7387,U+7389,U+73A9,U+73AF-73B0,U+73BB,U+73E0,U+73ED,U+7403,U+7406,U+7483,U+74E2-74E3,U+74E6,U+74EE,U+74F6-74F7,U+751C,U+7529,U+752D,U+7531,U+7535,U+7538,U+753B,U+7545,U+754F,U+7559,U+7565-7566,U+7591,U+75A4,U+75AF,U+75BC,U+75C5,U+75D5,U+7626,U+762A,U+7634,U+767B,U+767E,U+76AE,U+76B1,U+76C5-76C6,U+76D0,U+76D2,U+76D6,U+76D8,U+76DB,U+76EE-76EF,U+76F4,U+76F8,U+76FC,U+7701,U+771F-7720,U+772F,U+7737,U+773C,U+7741,U+775B,U+7761,U+7784-7785,U+778E,U+7792,U+77A7,U+77AA,U+77AC,U+77E5,U+77E9,U+77ED-77EE,U+7801-7802,U+780D,U+7816,U+781A,U+7823,U+7834,U+7838,U+7840,U+784C,U+786C,U+786E,U+788D,U+7897,U+789F,U+78B0,U+78BE,U+78D5,U+793A,U+793C,U+795E,U+7960,U+79BB,U+79BE,U+79C1,U+79C3,U+79D2,U+79D8,U+79DF,U+79E4,U+79E7,U+79EF-79F0,U+79FB,U+7A00,U+7A0B,U+7A0D,U+7A20,U+7A33,U+7A3B-7A3C,U+7A3F,U+7A57,U+7A76,U+7A7A,U+7A81,U+7A84,U+7A96-7A97,U+7A9C-7A9D,U+7AD6,U+7AD9,U+7AE0,U+7AEF,U+7B11,U+7B14,U+7B28,U+7B3C,U+7B4F-7B50,U+7B52,U+7B5B,U+7B5D,U+7B80,U+7BA1,U+7BC7,U+7BEE,U+7BF7,U+7C38,U+7C3F,U+7C7B,U+7C92,U+7C98,U+7CA5,U+7CCA,U+7CD5-7CD6,U+7CDF,U+7CEF,U+7CFB,U+7D22,U+7D27,U+7D2B,U+7D2F,U+7E41,U+7EA0,U+7EA7,U+7EAA,U+7EAC,U+7EAF,U+7EB5,U+7EB8-7EB9,U+7EBF,U+7EC3-7EC4,U+7EC6,U+7EC8,U+7ECD,U+7ECF,U+7ED3,U+7ED5,U+7ED8-7ED9,U+7EDC-7EDF,U+7EF4,U+7EFF,U+7F13,U+7F18,U+7F1D,U+7F20,U+7F29,U+7F2E,U+7F3A,U+7F50-7F51,U+7F57,U+7F5A,U+7F62,U+7F69-7F6A,U+7F6E,U+7F8E,U+7FBD,U+7FD8,U+7FE0,U+7FFB,U+8003,U+8005,U+800C-800D,U+8010,U+8015,U+8017,U+8033,U+803D,U+804A,U+805A,U+806A,U+8089,U+809A,U+80A1,U+80A9,U+80AF,U+80B2,U+80BF-80C0,U+80C3,U+80D6,U+80E1,U+80F3,U+80F6,U+80F8,U+8106,U+8109-810A,U+810F,U+8111,U+8116,U+8131,U+8138,U+813E,U+814A,U+814C,U+8165,U+817B,U+817E,U+8180,U+818A,U+819B,U+819D,U+81ED,U+820C-820D,U+8212,U+8214,U+822C,U+8239,U+827E,U+829D,U+82AF,U+82BD,U+82D4,U+82D7,U+82E5-82E6,U+82F1,U+8302,U+8305,U+830E,U+8327,U+832C,U+8338,U+8346,U+8350,U+835A,U+8361,U+836B,U+83AB,U+83B7,U+83BD,U+83CA,U+840E,U+8424,U+8499,U+84B2,U+84B8,U+84C4,U+84DD,U+852B-852C,U+853D,U+8584-8585,U+8587,U+85CF,U+8611,U+8638,U+864E,U+8651,U+865A,U+866B,U+8681-8682,U+86A3,U+86B1,U+86C0,U+86C7,U+86DB,U+86EE,U+8708,U+8712,U+8717-8718,U+873F,U+874E,U+8759,U+8760,U+87BA,U+87F9,U+8840,U+8857,U+8868,U+886C,U+8870,U+888B,U+8896,U+88AB,U+88B1,U+88C1-88C2,U+88D9,U+88E2,U+88E4,U+88F3,U+88F9,U+8902,U+8910,U+8921,U+892A,U+8986,U+89C1-89C2,U+89C4,U+89C6,U+89C8-89C9,U+89E6,U+8A00,U+8A8A,U+8B66,U+8BA1-8BA2,U+8BA4,U+8BA8-8BA9,U+8BAD-8BAE,U+8BB0,U+8BB2,U+8BBE-8BBF,U+8BC1,U+8BC9,U+8BCD,U+8BD7,U+8BDA,U+8BDD,U+8BE5-8BE6,U+8BF1,U+8BF4,U+8BF6-8BF7,U+8BFB,U+8BFE,U+8C01,U+8C03,U+8C08,U+8C22,U+8C31,U+8C41,U+8C8C,U+8D1D,U+8D1F,U+8D22,U+8D25-8D26,U+8D28-8D2B,U+8D2D,U+8D2F,U+8D31,U+8D35,U+8D39,U+8D4A,U+8D4F,U+8D54,U+8D56,U+8D5A,U+8D62,U+8D64,U+8D81,U+8D85,U+8D8A,U+8DA3,U+8DB3-8DB4,U+8DDD,U+8DE4,U+8DE8,U+8DF3,U+8DF5,U+8DFA,U+8E29,U+8E4B,U+8E66,U+8E6D,U+8E72,U+8E7F,U+8E81,U+8EB2,U+8EBA,U+8F6C,U+8F6F-8F71,U+8F73-8F74,U+8F7B,U+8F7D,U+8F83,U+8F88,U+8F90-8F91,U+8F93,U+8F98-8F99,U+8F9B,U+8FA8,U+8FBE,U+8FC5,U+8FC8,U+8FCE,U+8FD1,U+8FDC,U+8FDE-8FDF,U+8FF0,U+8FF7,U+8FF9,U+8FFD,U+9000,U+9002,U+9006,U+900F-9010,U+9012,U+9014,U+9017,U+901A,U+901E-901F,U+902E,U+903B-903C,U+904D,U+9057,U+905B,U+906D-906E,U+9075,U+907F,U+90AA,U+90E8,U+90FD,U+914D,U+9175,U+9178,U+917F,U+9192,U+91C9-91CA,U+91CD,U+91CF,U+9488,U+949D,U+949F,U+94A2,U+94A9,U+94AE,U+94B3,U+94BB,U+94C3,U+94DB,U+94F2,U+9501,U+9508,U+950B,U+951A,U+952E-952F,U+9547,U+9550,U+955C,U+9570,U+957F,U+95EA,U+95ED-95EF,U+95F2,U+95F4,U+95F7,U+95F9,U+95FB,U+9608,U+961F,U+9632-9636,U+9644-9647,U+9650,U+9664,U+966A,U+9676-9677,U+9690,U+9694,U+9699,U+969C,U+96BE,U+96C0,U+96D5,U+96F6-96F7,U+96FE,U+9700,U+9707,U+9709,U+972D,U+9759,U+975B,U+975E,U+9760,U+9774,U+978B,U+97E7,U+97F3,U+9875-9876,U+9879-987A,U+987E-987F,U+9884,U+9886,U+9891,U+9898,U+989C-989D,U+98A0,U+98A4,U+98D5,U+98D8,U+98DE,U+996E,U+9970-9971,U+9976,U+997A,U+997C,U+997F,U+9985,U+9988,U+998A,U+9996,U+9A6C,U+9A71,U+9A73,U+9A7B,U+9A82,U+9A8C,U+9A97,U+9AA8,U+9C9C,U+9E1F,U+9E21,U+9E2D,U+9EBB,U+9ECF,U+9ED1,U+9ED8,U+9EE2,U+9F13,U+9F20,U+9F3B,U+9F7F,U+9F9F; } /* the house font draws 回 as a solid block at small sizes — borrow that one glyph from the brush font */ /* Keep one face for ordinary Chinese UI text, including 回. Brush face is title-only. */ .brush { font-family:"猫田楷", var(--serif); font-weight:400 !important; letter-spacing:2px; } .pbox.inkbox { background:url(../assets/ui/ink/oldpaper.jpg) center / cover, #e7d5ae; width:min(680px, 95vw); padding:18px 22px 16px; } .pbox.inkbox .ink-art { position:absolute; right:-10px; bottom:-14px; width:220px; height:220px; background:no-repeat right bottom / contain; opacity:.34; pointer-events:none; mix-blend-mode:multiply; } .pbox.inkbox .ink-art.wide { width:430px; height:150px; opacity:.28; } .ink-head { display:flex; align-items:baseline; gap:14px; border-bottom:1px solid rgba(40,34,22,.42); padding:0 44px 8px 0; margin-bottom:10px; position:relative; } .ink-head h3.brush { margin:0; padding:0; border:0; font-size:30px; line-height:1; color:#1d1f1b; letter-spacing:6px; } .ink-head h3.brush::before { display:none; } .ink-head span { font-size:12px; letter-spacing:2px; color:#86795f; } .pbox.inkbox .pbody { position:relative; } .pbox.inkbox .tabs { border-bottom:1px solid rgba(40,34,22,.3); } .pbox.inkbox .tabs button { background:transparent; border:0; border-bottom:2px solid transparent; font-size:14px; padding:4px 12px; } .pbox.inkbox .tabs button.on { background:transparent; box-shadow:none; border-bottom:2px solid #a8392b; color:#1d1f1b; } .irow { display:grid; grid-template-columns:36px 1fr auto; align-items:center; column-gap:12px; padding:6px 2px; border-top:1px dashed rgba(40,34,22,.16); } .irow:first-of-type { border-top:0; } .irow .ico { --s:34px; } .irow-t b { display:block; font-size:16px; letter-spacing:2px; color:#1d1f1b; } .irow-t span { font-size:12px; color:#4a4538; letter-spacing:1px; } .irow-r { display:flex; gap:6px; } .irow-r button, .pbox.inkbox button:not(.pclose):not([data-t]) { font-family:var(--serif); font-size:13px; letter-spacing:2px; color:#f5efdc; padding:5px 12px; border:0; border-radius:0; cursor:pointer; background:url(../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); } .irow-r button:disabled, .pbox.inkbox button:disabled { opacity:.35; cursor:default; } .irow.locked { opacity:.55; } .irow em.up { color:#a8392b; font-style:normal; } .irow em.dn { color:#3f5a52; font-style:normal; } .carry-line { font-size:12px; letter-spacing:1px; color:#4a4538; margin:2px 0 8px; display:flex; align-items:center; gap:6px; } .carry-line .ico { --s:22px; } .ico.q { position:relative; } .ico.q::after { content:"上"; position:absolute; right:-1px; top:-1px; width:12px; height:12px; font-size:9px; line-height:12px; text-align:center; color:#f6e9d6; background:#a8392b; border-radius:1px; font-family:var(--serif); } .slot .ico.q::after { width:14px; height:14px; font-size:10px; line-height:14px; } .enso { display:inline-grid; place-items:center; width:34px; height:34px; background:url(../assets/ui/ink/enso.webp) center / 100% no-repeat; font-family:"猫田楷", var(--serif); font-style:normal; font-size:19px; color:#1d1f1b; flex:none; } .enso.big { width:58px; height:58px; font-size:30px; } .seal-s { display:inline-grid; place-items:center; width:16px; height:16px; font-size:10px; color:#f6e9d6; background:#a8392b; border-radius:2px; vertical-align:2px; } .seal-s.big { width:34px; height:34px; font-size:18px; transform:rotate(-6deg); margin-left:10px; font-family:"猫田楷", var(--serif); } .mer-grid { display:grid; grid-template-columns:132px 1fr; column-gap:18px; } .mer-who { display:flex; flex-direction:column; align-items:flex-start; gap:4px; border-right:1px solid rgba(40,34,22,.16); padding-right:14px; } .mer-who b { font-size:26px; letter-spacing:4px; } .mer-who span { font-size:12px; color:#86795f; letter-spacing:2px; } .mer-who .vq { display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:0; margin:6px 0; } .mer-who .vq span { writing-mode:vertical-rl; font-size:13px; color:#2b2a22; letter-spacing:4px; padding:2px 3px; border-left:1px solid rgba(176,58,43,.24); line-height:1.2; } .mer-who .vq span:first-child { border-right:1px solid rgba(176,58,43,.24); } .mer-who small { font-size:12px; color:#4a4538; } .order { margin-bottom:8px; } .order-row { display:grid; grid-template-columns:36px 1fr auto; grid-template-rows:auto 8px; align-items:center; column-gap:12px; row-gap:6px; } .order-row .enso { grid-row:1/3; } .order-row b { font-size:19px; } .order-row small { display:block; font-size:12px; color:#4a4538; } .order-row .num { font-size:18px; } .order-row .num small { display:inline; color:#86795f; } .order .bar { grid-column:2/4; position:relative; height:8px; } .order .bar::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(40,34,22,.18); } .order .bar i { position:absolute; top:0; bottom:0; left:0; background:url(../assets/ui/ink/stroke.webp) left center / 100% 100%; } .order .bar i.hi { filter:sepia(1) saturate(5) hue-rotate(-28deg) brightness(.78); } .order-foot { display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(40,34,22,.42); margin-top:8px; padding-top:6px; font-size:12px; letter-spacing:2px; color:#4a4538; } .order-foot b { color:#a8392b; font-size:17px; letter-spacing:1px; } .craftbook { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-bottom:8px; } .recipe { display:grid; grid-template-columns:36px 1fr; column-gap:10px; align-items:start; padding:6px 4px; border-bottom:1px dashed rgba(40,34,22,.16); opacity:.6; } .recipe.got { opacity:1; } .recipe b { font-size:19px; display:block; } .recipe span { font-size:12px; color:#2b2a22; display:block; } .recipe small { font-size:12px; color:#86795f; } .recipe.got .enso { color:#a8392b; } .notice.ink-n { background:rgba(255,250,236,.35); border-left-color:#a8392b; } .notice.ink-n b.brush { font-size:18px; } .notice.tax { border-left-color:#a8392b; } .notice.tax button { margin:6px 8px 0 0; } .need { font-size:13px; letter-spacing:1px; color:#4a4538; margin:6px 0 10px; } @media (max-height: 430px) { .pbox.inkbox { padding:12px 16px 10px; } .ink-head h3.brush { font-size:24px; } .craftbook { grid-template-columns:1fr 1fr; } .mer-grid { grid-template-columns:110px 1fr; } } #hud-carry { position:absolute; right:14px; top:-2px; font-size:12px; letter-spacing:2px; color:#f5efdc; text-shadow:0 0 3px #1c2422, 0 1px 2px #1c2422; pointer-events:none; } #hud-carry.full { color:#f0b39f; } #hud-carry:empty { display:none; } /* ====================================================================== v1.12 — 紧凑时间栏 · 水墨指引 · 水墨转场 · 营造预览 · 按爪印 · 全屏地图 · 圈地 · 测试台 ====================================================================== */ /* ---- compact date bar: a vermilion season seal + two short lines + a thin brush energy stroke */ #hud #hud-tl { display:flex; align-items:center; gap:7px; min-width:0; width:auto; padding:3px 9px 4px 5px; border-width:9px; border-image-width:9px; } #hud-tl > .row1, #hud-tl > .row2, #hud-tl > .row3, #hud-tl > .row4, #hud-tl > .row-term { display:none; } #hud-tl .tl-seal { flex:none; width:30px; height:30px; display:grid; place-items:center; font-size:21px; line-height:1; color:#f6ead2; background:#a8392b; border-radius:3px; box-shadow:inset 0 0 0 2px rgba(246,234,210,.55); transform:rotate(-3deg); letter-spacing:0; } #hud-tl .tl-main { display:flex; flex-direction:column; gap:1px; min-width:108px; } #hud-tl .tl-r1, #hud-tl .tl-r2 { display:flex; align-items:baseline; gap:6px; white-space:nowrap; line-height:1.2; } #hud-tl .tl-r1 b { font-size:15px; letter-spacing:1px; color:#23292a; font-weight:600; } #hud-tl #hud-term { font-size:12px; color:#a8392b; letter-spacing:1px; cursor:pointer; border-bottom:1px dotted rgba(168,57,43,.5); pointer-events:auto; } #hud-tl #hud-week { font-size:12px; color:#86795f; margin-left:auto; } #hud-tl .tl-r2 { font-size:12px; color:#3b4240; } #hud-tl #hud-time { font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:.5px; } #hud-tl #hud-phase { color:#6a6258; font-size:12px; } #hud-tl #hud-wx { display:inline-flex; align-items:center; gap:1px; font-size:12px; } #hud-tl #hud-wx .uico { --s:15px; } #hud-tl #hud-energy { height:5px; margin-top:2px; padding:0; width:100%; background:rgba(35,41,42,.14); border-radius:0; } #hud-tl #hud-energy i { height:5px; display:block; background:url(../assets/ui/ink/stroke.webp) left center / 100% 100% no-repeat, #58705f; } #hud-tl #hud-energy.low i { background:#a8392b; } body.touch #hud-tl .tl-main { min-width:100px; } /* ---- guide: a small hanging paper tag with a brush icon, a bobbing brush chevron, ground ripples drawn in-world */ #guide { position:fixed; z-index:9; left:0; top:0; display:none; pointer-events:auto; cursor:pointer; transform:translate(-50%,-100%); } #guide.on { display:block; } #guide .gd-mark { display:flex; align-items:center; gap:4px; padding:3px 8px 3px 4px; background:url(../assets/ui/ink/oldpaper.jpg) center / cover, #ead8b2; border:1px solid rgba(42,38,32,.55); border-left:3px solid #a8392b; box-shadow:0 3px 8px rgba(20,24,20,.35); animation:gdBob 1.8s ease-in-out infinite; } #guide .gd-ic, #guide .ge-ic { width:22px; height:22px; display:block; flex:none; } #guide .gd-ic svg, #guide .ge-ic svg { width:100%; height:100%; } #guide .gd-t { font-size:12px; letter-spacing:2px; color:#2a2620; white-space:nowrap; font-weight:500; } #guide .gd-arrow { display:block; width:22px; height:13px; margin:1px auto 0; opacity:.85; animation:gdBob 1.8s ease-in-out infinite; animation-delay:.08s; } #guide .gd-edge { display:none; } #guide.edge { transform:translate(-50%,-50%); } #guide.edge .gd-mark, #guide.edge .gd-arrow { display:none; } #guide.edge .gd-edge { display:flex; flex-direction:column; align-items:center; gap:1px; padding:4px 6px; background:rgba(234,216,178,.92); border:1px solid rgba(42,38,32,.5); border-radius:18px 18px 18px 18px; box-shadow:0 3px 8px rgba(20,24,20,.3); } #guide.edge .ge-arrow { width:26px; height:26px; transform:rotate(var(--ang)); animation:gdNudge 1.1s ease-in-out infinite; } #guide.edge .ge-t { font-size:12px; color:#4a4538; white-space:nowrap; letter-spacing:1px; } #guide.ui { transform:translate(-50%,0); } #guide.ui .gd-arrow { transform:rotate(180deg); order:-1; margin:0 auto 1px; } #guide.ui { display:flex; flex-direction:column; align-items:center; } @keyframes gdBob { 50% { translate:0 -5px; } } @keyframes gdNudge { 50% { translate:3px 0; } } #guide-say { position:fixed; left:50%; top:62px; z-index:9; transform:translate(-50%,-6px); max-width:min(560px,80vw); padding:7px 26px 8px; color:#f5efdc; font-size:14px; letter-spacing:2px; line-height:1.4; text-align:center; background:url(../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; filter:drop-shadow(0 3px 5px rgba(0,0,0,.35)); opacity:0; pointer-events:none; transition:opacity .6s, transform .6s; } #guide-say.on { opacity:1; transform:translate(-50%,0); } body.placing #guide, body.placing #guide-say { display:none!important; } /* ---- ink wipe transition (deed preview in / out) */ #ink-wipe { position:fixed; top:0;right:0;bottom:0;left:0; z-index:45; pointer-events:none; display:none; overflow:hidden; } #ink-wipe.on { display:block; } #ink-wipe i { position:absolute; left:var(--ox); top:var(--oy); width:180px; height:180px; margin:-90px 0 0 -90px; background:no-repeat center / contain; transform:scale(0); opacity:0; } #ink-wipe i:nth-child(1) { background-image:url(../assets/ui/ink/blot3.webp); } #ink-wipe i:nth-child(2) { background-image:url(../assets/ui/ink/blot2.webp); --dx:-22vw; --dy:12vh; --r:40deg; } #ink-wipe i:nth-child(3) { background-image:url(../assets/ui/ink/blot1.webp); --dx:24vw; --dy:-14vh; --r:-30deg; } #ink-wipe i:nth-child(4) { background-image:url(../assets/ui/ink/blot2.webp); --dx:18vw; --dy:20vh; --r:110deg; } #ink-wipe i:nth-child(5) { background-image:url(../assets/ui/ink/blot3.webp); --dx:-26vw; --dy:-18vh; --r:200deg; } #ink-wipe.in i { animation:inkIn .52s cubic-bezier(.3,.7,.3,1) forwards; } #ink-wipe.in i:nth-child(n+2) { animation-delay:.06s; } #ink-wipe.out i { animation:inkOut .85s ease-in forwards; } @keyframes inkIn { 0% { transform:translate(0,0) scale(.1) rotate(0); opacity:.2; } 100% { transform:translate(var(--dx,0),var(--dy,0)) scale(14) rotate(var(--r,15deg)); opacity:1; } } @keyframes inkOut { 0% { transform:translate(var(--dx,0),var(--dy,0)) scale(14) rotate(var(--r,15deg)); opacity:1; filter:blur(0); } 100% { transform:translate(var(--dx,0),var(--dy,0)) scale(22) rotate(var(--r,15deg)); opacity:0; filter:blur(8px); } } /* ---- deed placement overlay */ #deed-placement { cursor:grab; } #deed-placement .deed-cloud { opacity:.55; } #deed-placement .place-top { position:absolute; left:50%; top:8px; transform:translateX(-50%); display:flex; align-items:baseline; gap:12px; padding:6px 16px 7px; background:url(../assets/ui/ink/oldpaper.jpg) center / cover; border:1px solid rgba(42,38,32,.45); box-shadow:0 4px 10px rgba(0,0,0,.25); pointer-events:none; white-space:nowrap; } #deed-placement .place-top b { font-size:22px; letter-spacing:4px; color:#1d1f1b; } #place-valid { font-size:12px; letter-spacing:1px; } #place-valid.ok { color:#3f6a4c; } #place-valid.bad { color:#a8392b; } #deed-placement .place-help { position:absolute; left:50%; top:52px; transform:translateX(-50%); font-size:12px; color:#f4ecd6; letter-spacing:1px; text-shadow:0 1px 2px #000, 0 0 4px #000; pointer-events:none; white-space:nowrap; } #deed-placement .place-tools { position:absolute; right:10px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:6px; } #deed-placement .place-tools button { width:38px; height:38px; font-size:18px; color:#1d1f1b; background:url(../assets/ui/ink/oldpaper.jpg) center / cover; border:1px solid rgba(42,38,32,.55); border-radius:50%; box-shadow:0 2px 5px rgba(0,0,0,.3); cursor:pointer; } #deed-placement .place-bar { bottom:10px; padding:0; gap:12px; background:none; border:0; pointer-events:auto; } #deed-placement .place-bar button { font-size:15px; letter-spacing:4px; padding:9px 22px; color:#f5efdc; border:0; background:url(../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); cursor:pointer; } #deed-placement .place-bar #place-go { background:url(../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; filter:sepia(1) saturate(4) hue-rotate(-28deg) brightness(.8) drop-shadow(0 2px 3px rgba(0,0,0,.35)); } #deed-placement .place-bar button:disabled { opacity:.4; } /* ---- paw stamp on the deed */ .paw-stage { position:relative; display:flex; align-items:center; justify-content:center; gap:16px; margin:14px 0 4px; } .paw-stage .sig-name { font-size:15px; letter-spacing:3px; color:#3b3527; } .paw-slot { position:relative; width:70px; height:70px; border:1px dashed rgba(168,57,43,.45); } .paw-slot .paw-mark { position:absolute; top:5px;right:5px;bottom:5px;left:5px; width:60px; height:60px; opacity:0; transform:scale(1.4) rotate(-12deg); filter:url(#none); } .paw-slot .paw-splat { position:absolute; top:-8px;right:-8px;bottom:-8px;left:-8px; width:86px; height:86px; opacity:0; } .paw-slot .paw-real { position:absolute; left:50%; bottom:6px; width:60px; margin-left:-30px; transform:translateY(-190px); opacity:0; } .paw-slot .paw-real svg { width:60px; height:82px; display:block; } .paw-stage.go .paw-real { animation:pawDown 1.5s cubic-bezier(.3,.8,.3,1) forwards; } .paw-stage.go .paw-mark { animation:pawMark 1.5s ease-out forwards; } .paw-stage.go .paw-splat { animation:pawSplat 1.5s ease-out forwards; } @keyframes pawDown { 0% { transform:translateY(-190px); opacity:0; } 15% { opacity:1; } 34% { transform:translateY(-6px) scaleY(1.02); } 42% { transform:translateY(2px) scaleY(.9); } 60% { transform:translateY(2px) scaleY(.9); opacity:1; } 88% { transform:translateY(-170px); opacity:1; } 100% { transform:translateY(-200px); opacity:0; } } @keyframes pawMark { 0%, 40% { opacity:0; transform:scale(1.25) rotate(-12deg); } 46% { opacity:1; transform:scale(.96) rotate(-10deg); } 60%, 100% { opacity:.92; transform:scale(1) rotate(-10deg); } } @keyframes pawSplat { 0%, 40% { opacity:0; transform:scale(.6); } 48% { opacity:.9; transform:scale(1); } 100% { opacity:.75; transform:scale(1.05); } } .pbox.thud { animation:pbThud .28s ease-out; } @keyframes pbThud { 30% { transform:translateY(3px) scale(.995); } } /* ---- full-screen map */ #bigmap { position:fixed; top:0;right:0;bottom:0;left:0; z-index:35; display:none; background:rgba(18,26,23,.62); } #bigmap.on { display:flex; align-items:center; justify-content:center; } #bigmap .bm-frame { position:relative; width:min(1180px,96vw); height:min(780px,94vh); display:flex; flex-direction:column; background:url(../assets/ui/ink/oldpaper.jpg) center / cover, #e7d5ae; border:16px solid transparent; border-image:url(../assets/ui/ink/frame.webp) 30 / 16px / 0 stretch; box-shadow:0 10px 30px rgba(0,0,0,.45); } #bigmap .bm-head { display:flex; align-items:baseline; gap:14px; padding:2px 6px 6px; border-bottom:1px solid rgba(40,34,22,.42); } #bigmap .bm-head b { font-size:28px; letter-spacing:6px; color:#1d1f1b; } #bigmap .bm-head span { font-size:12px; color:#86795f; letter-spacing:1px; } #bigmap #bm-close { margin-left:auto; font-size:24px; background:none; border:0; color:#3b3527; cursor:pointer; } #bigmap #bm-cv { flex:1; width:100%; min-height:0; margin:6px 0; touch-action:none; cursor:grab; box-shadow:inset 0 0 0 1px rgba(40,34,22,.35); } #bigmap .bm-tools { position:absolute; right:12px; top:56px; display:flex; flex-direction:column; gap:6px; } #bigmap .bm-tools button { min-width:38px; padding:6px 10px; font-size:13px; letter-spacing:1px; color:#f5efdc; border:0; background:url(../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; cursor:pointer; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); } #bigmap .bm-legend { display:flex; gap:16px; align-items:center; font-size:12px; color:#3b3527; padding:0 6px; flex-wrap:wrap; } #bigmap .bm-legend i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:-1px; } .lg-cat { background:#a8392b; box-shadow:0 0 0 2px #f6ecd4; } .lg-npc { background:#c07a2e; } .lg-veh { background:#2f8f86; transform:rotate(45deg) scale(.8); } .lg-goal { border:2px solid #a8392b; } @media (max-height:480px) { #bigmap .bm-frame { width:100vw; height:100vh; border-width:10px; } #bigmap .bm-head b { font-size:20px; } #bigmap .bm-legend { font-size:12px; } #bigmap .bm-tools { top:44px; } } /* ---- enclosure stake panel & fishing button */ .stake-intro { font-size:14px; letter-spacing:1px; } .stake-steps { display:flex; flex-direction:column; gap:6px; margin:8px 0; } .stake-steps > div { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; padding:6px 8px; border:1px dashed rgba(40,34,22,.3); } .stake-steps > div.done { border-style:solid; border-color:rgba(63,106,76,.55); background:rgba(88,150,96,.08); } .stake-steps .st-ic { width:26px; height:26px; display:block; } .stake-steps .st-ic svg { width:100%; height:100%; } .stake-steps b { font-size:13px; color:#a8392b; } .stake-steps .done b { color:#3f6a4c; } body.fishing #btn-pounce { color:#a8392b; font-size:15px; } .deed-note b { color:#a8392b; font-weight:600; } /* ---- test console */ .test-tools .tt-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:6px 0 10px; } .test-tools .tt-grid button, .test-tools .tt-list button, #tt-give { padding:6px 8px; font-size:12px; } .test-tools .tt-list { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; } .test-tools .tt-list > div { display:grid; grid-template-columns:1fr auto auto auto; gap:6px; align-items:center; padding:3px 0; border-bottom:1px dashed rgba(40,34,22,.18); } .test-tools .tt-list span { font-size:12px; color:#3f6a4c; } .test-tools label { display:flex; gap:6px; align-items:center; flex-wrap:wrap; } #guide-say { top:auto; bottom:118px; } body.touch #guide-say { bottom:104px; } .paw-slot .paw-real svg { transform:scaleY(-1); } #guide.below { transform:translate(-50%,0); display:flex; flex-direction:column; align-items:center; } #guide.below .gd-arrow { transform:rotate(180deg); order:-1; margin:0 auto 1px; } #deed-placement .place-top { top:30px; } #deed-placement .place-help { top:74px; } /* ====================================================================== v1.13 — 行囊（快捷栏末格 · 仿《我的世界》）· 委托 · 工作台网格 · 双栏储物 · 高清物品图标 · 水墨祥云 ====================================================================== */ /* ---- item icons: 72px sheet (tools/make_items_hd.py), scaled smoothly */ .ico { background-image:url(../assets/ui/items_hd.webp); image-rendering:auto; } .ico.big { --s:84px; } .ico.wet { position:relative; filter:saturate(.55) brightness(.78) hue-rotate(165deg); } .ico.wet::after { content:"湿"; position:absolute; right:-1px; top:-1px; width:13px; height:13px; font:10px/13px var(--serif); text-align:center; color:#eef4f6; background:#3f6f86; border-radius:1px; filter:hue-rotate(-165deg); } .ico.big.wet::after, .ico.big.q::after { width:20px; height:20px; font-size:14px; line-height:20px; } /* ---- the bag is the last slot of the hotbar */ #hotbar .bagslot { margin-left:8px; flex-direction:column; gap:0; cursor:pointer; background:url(../assets/ui/ink/oldpaper.jpg) center / cover, #e9d9b6; border-color:#2c3331; } #hotbar .bagslot::before { content:""; position:absolute; left:-7px; top:6px; bottom:6px; width:1px; background:rgba(245,239,220,.55); } #hotbar .bagslot .bag-ic { width:30px; height:30px; display:block; margin-top:1px; } #hotbar .bagslot .bag-ic svg { width:100%; height:100%; } #hotbar .bagslot span { font-size:12px; letter-spacing:2px; color:#3b3527; line-height:1; margin-top:-1px; } body.touch #hotbar .bagslot .bag-ic { width:25px; height:25px; } #hotbar .bagslot:active { transform:translateY(1px); } #btn-menu-old { display:none !important; } /* ---- top-right: 委托 · 地图 · ⚙ in one row, 地契 below */ #hud-tr .tr-actions button { font-size:13px; letter-spacing:2px; } #hud-tr .tr-actions #btn-mm { flex:1; font-size:13px; letter-spacing:2px; color:var(--ink); padding:2px 6px; min-height:30px; } body.mm-off #hud-tr .tr-actions #btn-mm { color:var(--ink); } #btn-act.cast { color:#a8392b; } /* ---- toasts: small ink strip, never more than two */ #toasts { top:64px; gap:4px; } .toast { font-size:13px; letter-spacing:1px; padding:5px 18px; border-radius:2px; background:rgba(36,40,38,.84); box-shadow:0 2px 6px rgba(0,0,0,.25); max-width:min(560px,86vw); text-align:center; line-height:1.45; } /* ---- the 行囊 menu */ .pbox.mnbox { width:min(900px,97vw); max-height:94vh; padding:10px 16px 12px; } .mn-tabs { display:flex; gap:4px; padding-right:40px; border-bottom:1px solid rgba(40,34,22,.35); margin-bottom:8px; } .mn-tabs button { font-family:"猫田楷", var(--serif); font-size:19px; letter-spacing:5px; padding:3px 16px 5px; border:0; background:none; color:#6a6258; cursor:pointer; } .mn-tabs button.on { color:#f5efdc; background:url(../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; } .mn-body { max-height:calc(94vh - 90px); overflow:auto; } .inv-wrap { display:grid; grid-template-columns:minmax(0,1fr) 248px; gap:14px; align-items:start; } .inv-left { touch-action:none; } .inv-cap { display:flex; align-items:baseline; gap:10px; margin:2px 0 5px; } .inv-cap span { font-size:16px; letter-spacing:3px; color:#1d1f1b; } .inv-cap small { font-size:12px; color:#7a6e58; letter-spacing:1px; } .inv-cap.hot { margin-top:10px; padding-top:7px; border-top:1px dashed rgba(40,34,22,.3); } .mnbox .grid.inv { gap:5px; } .mnbox .islot { min-width:0; } .mnbox .islot .ico { --s:44px; pointer-events:none; } .mnbox .islot em { font-size:14px; pointer-events:none; } .islot.cur { box-shadow:inset 0 0 0 2px rgba(168,57,43,.35); } .islot.cur::before { content:""; position:absolute; left:-3px; top:-3px; width:0; height:0; border-left:9px solid var(--zhu); border-bottom:9px solid transparent; } .islot.lifting > .ico, .islot.lifting > em { opacity:.25; } .islot.drop { outline:2px dashed var(--zhu); outline-offset:-4px; background:#f7efd8; } .islot.glow { animation:slotGlow 1.4s ease-in-out infinite; } @keyframes slotGlow { 50% { box-shadow:0 0 0 3px rgba(168,57,43,.55), 0 0 12px rgba(240,200,140,.8); } } .islot.off { opacity:.35; cursor:default; } .inv-right { position:sticky; top:0; min-height:230px; padding:10px 12px; background:rgba(255,250,236,.45); border:1px solid rgba(40,34,22,.22); } .inv-empty { text-align:center; color:#3b3527; font-size:13px; } .inv-empty .inv-hand { display:block; width:54px; height:54px; margin:6px auto 4px; opacity:.7; } .inv-empty .inv-hand svg { width:100%; height:100%; } .inv-empty p { margin:6px 0; line-height:1.5; } .inv-empty .dim { font-size:12px; } .inv-card .ic-top, .bn-card .ic-top { display:flex; align-items:center; gap:10px; } .ic-big { flex:none; width:92px; height:92px; display:grid; place-items:center; background:rgba(255,253,244,.6); border:1px solid rgba(40,34,22,.3); box-shadow:inset 0 -8px 14px rgba(80,76,60,.08); } .ic-name { display:block; font-size:24px; letter-spacing:3px; color:#1d1f1b; line-height:1.15; } .ic-tag { display:block; font-size:12px; color:#86795f; letter-spacing:1px; margin-top:3px; } .ic-desc { font-size:13px; line-height:1.55; color:#2b2a22; margin:8px 0 6px; } .ic-stats { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0 0 8px; font-size:12px; } .ic-stats dt { color:#86795f; } .ic-stats dd { margin:0; color:#1d1f1b; } .ic-acts { display:flex; flex-wrap:wrap; gap:6px; } .ic-acts button, .bn-go button, .tf-bar button, .tf-tools button, .tea-card button { font-family:var(--serif); font-size:13px; letter-spacing:2px; padding:6px 12px; color:#2b2a22; background:rgba(255,253,244,.7); border:1px solid rgba(40,34,22,.45); cursor:pointer; } .ic-acts button.pri, .bn-go button.pri, .tf-bar button.pri, .tea-card button { color:#f5efdc; border:0; background:url(../assets/ui/ink/stroke.webp) center / 100% 100% no-repeat; padding:7px 16px; } .ic-acts button:disabled, .bn-go button:disabled, .tea-card button:disabled { opacity:.38; cursor:default; } .inv-card.holding .ic-big { animation:slotGlow 1.2s ease-in-out infinite; } #inv-ghost { position:fixed; z-index:60; left:0; top:0; width:58px; height:58px; margin:-29px 0 0 -29px; display:none; place-items:center; pointer-events:none; background:rgba(255,250,236,.85); border:1.5px solid #2c3331; box-shadow:0 6px 14px rgba(0,0,0,.35); transform:scale(1.08) rotate(-4deg); } #inv-ghost.on { display:grid; } #inv-ghost .ico { --s:46px; } #inv-ghost em { position:absolute; right:3px; bottom:0; font-style:normal; font-weight:bold; font-size:14px; text-shadow:0 0 2px #fff; } #inv-ghost.fly { transition:left .12s ease-out, top .12s ease-out, transform .12s; transform:scale(.9); } #inv-ghost.hover { animation:ghostBob 1.1s ease-in-out infinite; } @keyframes ghostBob { 50% { translate:0 -5px; } } .mn-sub { font-size:13px; color:#4a4538; margin:2px 0 8px; } .mn-sub b { color:#a8392b; } .mn-recs { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px 14px; } .mn-rec { display:grid; grid-template-columns:36px 1fr; gap:10px; align-items:start; padding:6px 4px; border-bottom:1px dashed rgba(40,34,22,.18); opacity:.5; } .mn-rec.got { opacity:1; } .mn-rec.got .enso { color:#a8392b; } .mn-rec b { display:block; font-size:19px; } .mn-rec span { display:block; font-size:12px; color:#2b2a22; } .mn-rec small { font-size:12px; color:#86795f; } .mn-rels { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px 16px; } .mn-rel { display:grid; grid-template-columns:auto 1fr; gap:0 10px; align-items:baseline; padding:6px 4px; border-bottom:1px dashed rgba(40,34,22,.18); } .mn-rel b { font-size:20px; letter-spacing:2px; } .mn-rel span { font-size:12px; color:#86795f; } .mn-rel .hearts { grid-column:1/3; color:#a8392b; letter-spacing:1px; font-size:14px; } .mn-rel .hearts i { font-style:normal; color:rgba(40,34,22,.3); } .mn-empty { padding:20px 0; text-align:center; } /* ---- 委托 journal */ .jr-q { display:grid; grid-template-columns:36px 1fr; gap:10px; padding:8px 2px; border-bottom:1px dashed rgba(40,34,22,.2); } .jr-q b { font-size:20px; letter-spacing:3px; } .jr-q small { margin-left:10px; font-size:12px; color:#86795f; } .jr-q p { margin:3px 0; font-size:13px; line-height:1.5; } .jr-p { font-size:12px; color:#a8392b; letter-spacing:1px; } .jr-none { padding:14px 0; } .jr-done { margin-top:10px; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:#6a6258; } .jr-done b { width:100%; font-size:12px; letter-spacing:3px; color:#86795f; font-weight:normal; } .jr-done span { text-decoration:line-through; text-decoration-color:rgba(168,57,43,.5); } /* ---- workbenches, shop: recipe / goods grid + detail card */ .pbox.benchbox { width:min(860px,97vw); max-height:94vh; } .bn-wrap { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:14px; align-items:start; } .bn-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:6px; align-content:start; } .pbox.inkbox .bn-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px 5px; min-height:88px; border:1.5px solid rgba(40,34,22,.5); background:var(--xuan) repeat, #efe9d8; color:#1d1f1b; filter:none; letter-spacing:0; cursor:pointer; box-shadow:inset 0 0 0 2px rgba(255,253,244,.5); } .bn-tile .ico { --s:52px; } .bn-tile span { font-size:12px; letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .bn-tile em { position:absolute; right:4px; top:3px; font-style:normal; font-size:12px; color:#86795f; } .bn-tile em.pr { color:#8b5a1e; } .bn-tile em.pr::after { content:" 文"; font-size:9px; } .pbox.inkbox .bn-tile.lack { opacity:.72; } .bn-tile.lack .ico { filter:saturate(.4); } .pbox.inkbox .bn-tile.locked { opacity:.45; } .bn-tile.locked .ico { filter:grayscale(1) brightness(.5) contrast(.8); } .pbox.inkbox .bn-tile.on { border-color:var(--zhu); box-shadow:0 0 0 2px rgba(168,57,43,.45), inset 0 0 0 2px rgba(255,253,244,.6); } .pbox.inkbox .bn-tile.on::after { content:""; position:absolute; right:-4px; top:-4px; width:9px; height:9px; background:var(--zhu); transform:rotate(8deg); } .bn-detail { padding:10px 12px; background:rgba(255,250,236,.45); border:1px solid rgba(40,34,22,.22); position:sticky; top:0; } .bn-card.locked .ic-big .ico { filter:grayscale(1) brightness(.5); } .bn-mats { display:flex; flex-direction:column; gap:3px; margin:4px 0 10px; } .bn-mat { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:8px; padding:2px 4px; border-bottom:1px dashed rgba(40,34,22,.14); font-size:13px; } .bn-mat .ico { --s:28px; } .bn-mat b { font-size:15px; color:#3f6a4c; } .bn-mat b small { font-size:12px; color:#86795f; } .bn-mat.no b { color:#a8392b; } .bn-go { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; } .bn-qty { display:flex; align-items:center; gap:4px; } .pbox.inkbox .bn-qty button { min-width:30px; padding:4px 8px; color:#2b2a22; background:rgba(255,253,244,.7); border:1px solid rgba(40,34,22,.45); filter:none; letter-spacing:0; } .bn-qty b { min-width:26px; text-align:center; font-size:17px; } .bn-note { font-size:12px; color:#86795f; margin:8px 0 0; } .bn-why { font-size:12px; color:#a8392b; margin:0 0 8px; } .benchbox .pbody { max-height:calc(94vh - 110px); overflow:auto; } /* ---- two-pane storage (木料棚 / 粮囤) */ .tf-intro { font-size:12.5px; color:#3b3527; margin:0 0 6px; line-height:1.5; } .tf-tools { display:flex; gap:8px; margin:0 0 8px; } .tf-wrap { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .tfbox .grid.inv { grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; } .tfbox .tf-store { grid-template-columns:repeat(4,minmax(0,1fr)); } .tfbox .islot .ico { --s:38px; } .tf-bar { display:flex; align-items:center; gap:10px; min-height:44px; margin-top:10px; padding:6px 10px; background:rgba(255,250,236,.5); border:1px solid rgba(40,34,22,.22); font-size:13px; } .tf-bar .ico { --s:32px; } .tf-bar b { font-size:16px; letter-spacing:2px; } .tf-bar span { color:#86795f; font-size:12px; flex:1; } .tea-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .tea-card { padding:10px 12px; background:rgba(255,250,236,.45); border:1px solid rgba(40,34,22,.22); } .tea-card b { font-size:20px; letter-spacing:3px; } .tea-card p { font-size:13px; line-height:1.5; margin:6px 0 10px; } .deed-detail .bi { margin:0 0 6px; text-indent:0; font-size:12.5px; color:#3f5a52; line-height:1.5; } /* ---- deed preview: the canvas paints the clouds now */ #deed-placement .deed-cloud { display:none; } @media (max-height:430px), (max-width:760px) { .pbox.mnbox, .pbox.benchbox { padding:6px 10px 8px; } .inv-wrap { grid-template-columns:minmax(0,1fr) 210px; gap:10px; } .mnbox .islot .ico { --s:36px; } .ic-big { width:66px; height:66px; } .ico.big { --s:60px; } .ic-name { font-size:19px; } .ic-desc { font-size:12px; line-height:1.4; margin:5px 0 4px; } .inv-right, .bn-detail { padding:7px 9px; min-height:0; } .mn-tabs button { font-size:16px; padding:2px 12px 4px; } .inv-cap { margin:0 0 3px; } .inv-cap.hot { margin-top:5px; padding-top:4px; } .bn-wrap { grid-template-columns:minmax(0,1fr) 230px; } .bn-grid { grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); } .pbox.inkbox .bn-tile { min-height:72px; } .bn-tile .ico { --s:40px; } .tfbox .islot .ico { --s:30px; } .inv-empty .dim { display:none; } } #datecard { z-index:12; } .mnbox .islot .ico { --s:54px; } .mnbox .islot.picked, .tfbox .islot.picked { border-color:#1d1f1b; box-shadow:0 0 0 2px rgba(29,31,27,.55), inset 0 0 0 2px rgba(255,253,244,.6); background:var(--xuan) repeat, #fbf6e8; } .mnbox .islot.picked::after, .tfbox .islot.picked::after { display:none; } @media (max-height:430px), (max-width:760px) { .mnbox .islot .ico { --s:44px; } } #hud #hud-tr #btn-deed.shown { min-height:0; padding:1px 8px 2px; font-size:13px; letter-spacing:4px; line-height:1.6; } .pbox.inkbox .bn-qty button, .pbox.inkbox .ic-acts button:not(.pri), .pbox.inkbox .tf-bar button:not(.pri) { color:#2b2a22 !important; background:rgba(255,253,244,.72) !important; border:1px solid rgba(40,34,22,.45) !important; filter:none !important; } .benchbox .ink-art { opacity:.1 !important; } .pbox.inkbox .bn-tile { user-select:none; } .tf-top { display:flex; align-items:center; gap:12px; margin:0 0 8px; } .tf-top .tf-intro { flex:1; margin:0; } .tf-wrap { grid-template-columns:minmax(0,5fr) minmax(0,8fr); gap:14px; } .tfbox .tf-store { grid-template-columns:repeat(5,minmax(0,1fr)); } .tf-bar { min-height:38px; margin-top:8px; padding:4px 10px; } /* compact detail cards and storage grids so nothing needs scrolling on a phone in landscape */ .benchbox .ic-big { width:66px; height:66px; } .benchbox .ico.big { --s:56px; } .benchbox .ic-name { font-size:21px; } .benchbox .ic-desc { font-size:12.5px; line-height:1.45; margin:6px 0 6px; } .bn-mats { flex-direction:row; flex-wrap:wrap; gap:5px; margin:2px 0 8px; } .bn-mat { grid-template-columns:24px auto auto; gap:4px; padding:2px 7px 2px 3px; border:1px solid rgba(40,34,22,.22); border-bottom:1px solid rgba(40,34,22,.22); background:rgba(255,253,244,.5); font-size:12px; } .bn-mat .ico { --s:24px; } .bn-mat b { font-size:13px; } .bn-mat.no { border-color:rgba(168,57,43,.45); } .tfbox .grid.inv.tf-bag { grid-template-columns:repeat(12,minmax(0,1fr)); gap:3px; } .tfbox .grid.inv.tf-store { grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; } .tfbox .islot .ico { --s:30px; } .tfbox .islot em { font-size:12px; } .tf-wrap { grid-template-columns:minmax(0,1fr) minmax(0,2fr); } .bd-grid { grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); } .pbox.inkbox .bd-tile { min-height:96px; padding-top:4px; } .bd-pic { display:block; width:64px; height:52px; background:no-repeat center bottom / contain; image-rendering:pixelated; } .bd-big .bd-pic { width:60px; height:56px; } .bd-tile .bd-st { position:static; font-size:12px; color:#86795f; } .pbox.inkbox .bd-tile.ok .bd-st { color:#3f6a4c; } .pbox.inkbox .bd-tile.done { opacity:.62; } .pbox.inkbox .bd-tile.locked .bd-pic { filter:grayscale(1) brightness(.6); } .bd-note { font-size:12.5px; color:#3b3527; margin:0 0 8px; } .bd-note b { color:#a8392b; } @media (max-height:430px), (max-width:760px) { .bd-pic { width:52px; height:40px; } .pbox.inkbox .bd-tile { min-height:78px; } } .ico.wet { filter:brightness(.66) saturate(.5) contrast(1.05); } .ico.wet::after { filter:none; } /* ===================================================================================================== v1.14 — 节气历（点时间栏 / C）· 预售种子 · 炒茶 · 冬月订单 · 测试台「节令」 ===================================================================================================== */ .pbox.calbox { width:min(860px, 98vw); max-height:97vh; overflow:hidden; border-width:10px; padding:6px 12px 8px; } .pbox.calbox::before { display:none; } .cal4 { display:flex; flex-direction:column; gap:5px; } .c4-top { display:flex; align-items:center; gap:12px; padding-right:34px; } .c4-top h3.brush { margin:0; padding:0; border:0; background:none; font-size:24px; letter-spacing:6px; color:#1d1f1b; line-height:1; } .c4-top h3.brush::before { display:none; } .c4-sub { font-size:12px; color:#6b604c; } .c4-seasons { display:flex; gap:3px; } .pbox.calbox .c4-seasons button { width:34px; height:30px; padding:0; border:1px solid rgba(40,34,22,.4); background:rgba(255,253,244,.55); color:#3b3527; filter:none; letter-spacing:0; position:relative; } .c4-seasons button b { font-size:19px; } .pbox.calbox .c4-seasons button.on { background:#a8392b; color:#f8efdc; border-color:#7e2a20; } .c4-seasons button.cur::after { content:""; position:absolute; right:2px; top:2px; width:5px; height:5px; border-radius:50%; background:#3f6a4c; } .c4-seasons button.on.cur::after { background:#f8efdc; } .c4-band { display:grid; grid-template-columns:repeat(6, 1fr); gap:3px; } .pbox.calbox .c4-term { display:flex; align-items:baseline; justify-content:center; gap:5px; padding:2px 4px; border:0; border-bottom:2px solid rgba(40,34,22,.18); background:transparent; color:#3b3527; filter:none; letter-spacing:0; } .c4-term b { font-size:17px; } .c4-term small { font-size:12px; color:#86795f; } .pbox.calbox .c4-term.on { border-bottom-color:#a8392b; color:#1d1f1b; } .c4-term.now b { color:#3f6a4c; } .c4-main { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:10px; align-items:stretch; } .c4-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); grid-template-rows:14px repeat(4, 1fr); gap:3px; } .c4-wd { font-size:10px; color:#86795f; text-align:center; line-height:14px; } .c4-day { position:relative; min-height:50px; padding:2px 4px; border:1px solid rgba(40,34,22,.22); background:rgba(255,253,244,.42); cursor:pointer; overflow:hidden; } .c4-day i { font-style:normal; font-size:12px; color:#5a5140; } .c4-day b { display:block; font-size:15px; line-height:1.05; color:#2f5b45; } .c4-day.term { background:rgba(236,226,196,.6); } .c4-day.past { opacity:.55; } .c4-day.today { border-color:#3f6a4c; box-shadow:inset 0 0 0 1px #3f6a4c; } .c4-day.today i::after { content:" 今"; color:#3f6a4c; font-weight:bold; } .c4-day.sel { border-color:#a8392b; box-shadow:0 0 0 1px rgba(168,57,43,.5), inset 0 0 0 1px rgba(168,57,43,.5); opacity:1; } .c4-seals { position:absolute; right:2px; bottom:2px; display:flex; gap:1px; } .c4-seals em, .c4-ev em { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; font-style:normal; font-size:10px; line-height:1; color:#f8efdc; border-radius:2px; font-family:"猫田楷", var(--serif); } .sl-ji { background:#a8392b; } .sl-liang { background:#8b5a1e; } .sl-shui { background:#3b3527; } .sl-shu { background:#3f6a4c; } .sl-shi { background:#b8862a; } .c4-side { display:flex; flex-direction:column; gap:4px; padding:6px 8px; background:rgba(255,250,236,.5); border:1px solid rgba(40,34,22,.22); min-width:0; overflow:hidden; } .c4-head { display:flex; gap:8px; } .c4-pic { flex:0 0 116px; height:73px; background:url(../assets/ui/solar_terms.webp) no-repeat; background-size:600% 400%; border:1px solid rgba(40,34,22,.35); box-shadow:0 1px 0 rgba(255,253,244,.6); } .c4-hd { display:flex; flex-direction:column; min-width:0; font-size:12px; color:#4b4333; line-height:1.35; } .c4-hd b.brush { font-size:20px; color:#1d1f1b; line-height:1.1; } .c4-sun { color:#8b5a1e; font-variant-numeric:tabular-nums; } .c4-wx { color:#6b604c; } .c4-yj p, .c4-ev p { margin:0; font-size:11.5px; line-height:1.45; color:#3b3527; display:flex; align-items:center; gap:4px; } .c4-yj b { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; font-size:11px; color:#f8efdc; border-radius:50%; flex:0 0 16px; } .c4-yj b.yi { background:#3f6a4c; } .c4-yj b.ji { background:#a8392b; } .c4-ev { border-top:1px dashed rgba(40,34,22,.2); padding-top:3px; } .c4-ev em { flex:0 0 15px; } .c4-sow { border-top:1px dashed rgba(40,34,22,.2); padding-top:3px; display:flex; flex-wrap:wrap; gap:3px; align-items:center; font-size:12px; } .c4-sow > b { font-size:12px; color:#3f6a4c; margin-right:2px; } .c4-sow span { padding:0 4px; border:1px solid rgba(40,34,22,.22); background:rgba(255,253,244,.5); color:#3b3527; white-space:nowrap; } .c4-sow span.win { border-color:#3f6a4c; color:#23452f; background:rgba(214,232,200,.55); } .c4-sow span small { font-size:12px; color:#86795f; margin-left:2px; } .c4-sow span.none { border:0; background:none; color:#86795f; white-space:normal; } .c4-fc { display:flex; align-items:center; gap:12px; font-size:12px; color:#3b3527; padding:3px 6px; background:rgba(255,250,236,.4); border:1px solid rgba(40,34,22,.18); } .c4-fc > b { color:#6b604c; font-size:12px; } .c4-fc span { display:flex; align-items:center; gap:2px; } .c4-fc .uico { --s:20px; } .c4-fc small { margin-left:auto; color:#86795f; font-size:12px; } .pbox.calbox #c4-today { padding:2px 10px; font-size:12px; letter-spacing:1px; color:#2b2a22; background:rgba(255,253,244,.7); border:1px solid rgba(40,34,22,.45); filter:none; } .wx-snow { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; font-style:normal; font-size:12px; color:#5d7f93; border:1px solid #9fb6c4; border-radius:50%; background:#f4f8fb; } @media (max-height:430px), (max-width:760px) { .c4-main { grid-template-columns:minmax(0, 1fr) 272px; gap:8px; } .c4-day { min-height:44px; padding:1px 3px; } .c4-day b { font-size:13px; } .c4-pic { flex-basis:100px; height:62px; } .c4-hd b.brush { font-size:18px; } .c4-top h3.brush { font-size:21px; } .c4-term b { font-size:15px; } } @media (max-height:360px) { .c4-day { min-height:38px; } .c4-grid { grid-template-rows:12px repeat(4, 1fr); } } /* shop: pre-sold seeds */ .bn-tile .presale { position:absolute; left:3px; top:3px; font-style:normal; font-size:9px; padding:0 3px; color:#f8efdc; background:#3f6a4c; } .sw-pre { color:#3f6a4c !important; } /* tea hut with the roasting card */ .tea-cards.three { grid-template-columns:1fr 1fr 1fr; } /* winter orders in the mailbox */ .w-orders { margin:10px 0; display:flex; flex-direction:column; gap:8px; } .w-order { padding:8px 10px; background:rgba(255,250,236,.45); border:1px solid rgba(60,44,22,.3); } .w-order b.brush { font-size:19px; } .w-order p { margin:4px 0; font-size:13px; line-height:1.5; } .w-need { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; } .w-need .ico { --s:24px; } .w-need b { color:#a8392b; } .w-need b.ok { color:#3f6a4c; } .w-need span { color:#86795f; font-size:12px; } .w-need em { font-style:normal; color:#3f6a4c; margin-left:auto; } .w-order.late em { color:#a8392b; } .w-order.done { opacity:.7; } .w-need button { margin-left:auto; } /* test console: 节令 */ .tt-terms { display:grid; grid-template-columns:repeat(6, 1fr); gap:3px; margin:4px 0 8px; } .tt-term { display:flex; flex-direction:column; align-items:center; gap:1px; padding:2px; border:1px solid rgba(40,34,22,.2); font-size:12px; } .tt-term.on { border-color:#a8392b; } .tt-term button { font-size:12px; padding:1px 4px; } .tt-row { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:6px 0; font-size:12px; } .tt-row span { color:#6b604c; margin-left:6px; } .tt-row button { font-size:12px; padding:2px 8px; } .pbox.calbox .c4-term, .pbox.calbox .c4-seasons button, .pbox.calbox #c4-today { background-image:none !important; } .pbox.calbox .c4-term { background-color:transparent !important; color:#3b3527 !important; padding:2px 4px !important; } .pbox.calbox .c4-term.on { color:#1d1f1b !important; background-color:rgba(168,57,43,.08) !important; } .pbox.calbox .c4-term.now b { color:#3f6a4c; } .pbox.calbox .c4-seasons button { background-color:rgba(255,253,244,.55) !important; color:#3b3527 !important; padding:0 !important; } .pbox.calbox .c4-seasons button.on { background-color:#a8392b !important; color:#f8efdc !important; } body.playing #hud-tl { pointer-events:auto; cursor:pointer; } /* v1.14.1 — 行囊里的“装备”栏 */ .eq-box { margin:0 0 8px; padding-bottom:7px; border-bottom:1px dashed rgba(40,34,22,.3); } .eq-row { display:flex; gap:12px; } .eq-slot { display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; } .eq-slot .islot { width:58px; height:58px; min-width:0; pointer-events:none; } .eq-slot span { font-size:12px; letter-spacing:1px; color:#7a6e58; } .eq-slot.picked .islot { outline:2px solid var(--zhu); outline-offset:-3px; background:#f7efd8; } .eq-slot.empty span { opacity:.7; } @media (max-height:430px), (max-width:760px) { .eq-box { margin-bottom:5px; padding-bottom:4px; } .eq-slot .islot { width:42px; height:42px; } .eq-slot .islot .ico { --s:32px; } .eq-box .inv-cap { margin-bottom:2px; } .inv-right .ic-big { width:52px; height:52px; } .inv-right .ico.big { --s:44px; } .inv-right .ic-name { font-size:17px; } .inv-right .ic-stats { display:none; } .inv-right .ic-desc { font-size:12px; line-height:1.35; margin:4px 0; } .inv-right .ic-acts button { padding:4px 9px; font-size:12px; letter-spacing:1px; } .inv-right .ic-acts button.pri { padding:5px 12px; } .eq-slot span { font-size:12px; } } /* v1.14.2 — 乡邻页里的小传 */ .mn-rel .mn-bio { grid-column:1/3; margin-top:3px; } .mn-rel .mn-bio p { margin:1px 0; font-size:12px; line-height:1.45; color:#4a4436; } .mn-rel .mn-bio i { font-style:normal; color:#a8392b; margin-right:6px; letter-spacing:1px; } /* ---------- v1.15 风险与人情 ---------- */ .c4-seals em.sl-xian, .c4-ev em.sl-xian, .c4-fc em.sl-xian { background:#b23a2b; } .c4-seals em.sl-jie, .c4-ev em.sl-jie { background:#3f6f5a; } .c4-seals em.sl-yue, .c4-ev em.sl-yue { background:#8a5a2b; } .c4-fc em.sl-xian { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:3px; font-style:normal; font-size:10px; color:#f8efdc; border-radius:2px; font-family:"猫田楷", var(--serif); } #hud-term.hot { color:#c2412d !important; text-shadow:0 0 6px rgba(255,150,90,.55); } .dc-sky { margin-top:4px; font-size:12px; letter-spacing:2px; color:#f3d7b5; opacity:.95; } .ico.damp { position:relative; } .ico.damp::after { content:""; position:absolute; right:-3px; bottom:-3px; width:45%; height:45%; background:url(../assets/v115/badge_damp.webp) center/contain no-repeat; image-rendering:pixelated; } .bn-tile .stock { position:absolute; left:3px; top:2px; font-style:normal; font-size:10px; color:#5a5140; } .bn-tile .stock.out { color:#b23a2b; font-weight:700; } .w-order.yl p { margin:3px 0; font-size:13px; } .tt-ppl { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:#5a5140; margin-top:6px; max-height:90px; overflow:auto; }