/* ====== 像素中文字 ======
SDV 那种"小方块字"的中文实现。**Cubic 11** 是首选——专门为复古游戏 UI 设计的
CJK 像素字，11×11 grid，比 Zpix 更窄更"梗"，跟 Press Start 2P 同源。
- 之前路径写错（仓库下面没有 fonts/Cubic_11_1.013_R.ttf 这文件），所以静默回退到 Noto Sans SC，
看起来"不够像素"，根因在此修复
- woff2 优先（400KB）→ woff（650KB）→ ttf（2.7MB）
- 弃用 Zpix：7MB ttf 太大首屏抢资源
- font-display: swap 不阻塞首屏 */
@font-face {
font-family: 'Cubic 11';
src: url('../fonts/Cubic_11.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
unicode-range: U+0020-007E, U+3000-9FFF, U+FF00-FFEF, U+2000-206F;
}
@font-face {
font-family: 'DotGothic16';
src: url('../fonts/DotGothic16.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Press Start 2P';
src: url('../fonts/PressStart2P.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Pixelify Sans';
src: url('../fonts/PixelifySans-400.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Pixelify Sans';
src: url('../fonts/PixelifySans-500.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Pixelify Sans';
src: url('../fonts/PixelifySans-700.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* 像素中文字工具类：渲染时关 anti-alias 保住像素方块感 */
.pixel-zh {
font-family: 'Cubic 11', 'Press Start 2P', 'Noto Sans SC', 'PingFang SC', sans-serif;
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: grayscale;
font-smooth: never;
text-rendering: geometricPrecision;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
height: 100%;
width: 100%;
max-width: 100vw;
font-family: 'Noto Sans SC', sans-serif;
overflow: hidden;
}
/* ===== M-B1 SDV 像素鼠标 =====
7×11 像素的方头箭头，2x 渲染成 21×33 像素的 SVG 数据 URI。
hot spot 在 (0,0) 因为箭头尖在左上角。
hover 状态用同形状但内部填金黄，传递"可点击"语义（SDV 集市风）。
!important 是为了一次性覆盖全站散落的 cursor: pointer 声明 */
html, body {
cursor: url("data:image/svg+xml;utf8,") 0 0, default;
}
a, button, [role="button"], label, summary,
input[type='button'], input[type='submit'], select,
.lang-toggle, .audio-toggle-btn, .upload-zone, .upload-zone *,
.demo-link, .tutorial-link, .photo-ach-link, .photo-ach-btn, .photo-ach-preset,
.nav-arrow, .pagination-dot,
.share-tool-btn, .ach-row, .ach-modal-close {
cursor: url("data:image/svg+xml;utf8,") 0 0, pointer !important;
}
/* ---------- Stardew Palette ---------- */
:root {
--wood-dark: #3e2415;
--wood-mid: #6b4423;
--wood-light: #8b6f47;
--cream: #fff5e0;
--cream-shadow: #f0d9a0;
--paper: #f9e5b8;
--gold: #f5c93f;
--gold-dark: #c79024;
--grass: #5a7f3a;
--grass-dark: #3a5224;
--heart: #d63f3f;
--heart-dark: #8b1a1a;
--sky-night: #1d2745;
--sky-deep: #0d1530;
--ink: #2c1810;
}
body {
background:
/* 银河带：右上对角线方向的紫色雾带，模拟夜空里的星云 */
radial-gradient(ellipse 60% 30% at 70% 18%, rgba(140, 120, 200, 0.18) 0%, transparent 70%),
radial-gradient(ellipse 50% 22% at 30% 26%, rgba(110, 140, 200, 0.14) 0%, transparent 75%),
radial-gradient(ellipse at top, #2a3759 0%, #1d2745 40%, #0d1530 100%);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
user-select: none;
position: relative;
transition: background 1.2s ease;
font-family: 'DotGothic16', 'Noto Sans SC', sans-serif;
}
/* Landing mode: 1:1 还原星露谷标题画面（panorama 全屏 + 飘云 + 前景树/鸟） */
body.landing-mode {
background-color: #87cdf2;
}
body.landing-mode .pixel-cloud,
body.landing-mode .pixel-sun,
body.landing-mode .pixel-moon,
body.landing-mode .pixel-star,
body.landing-mode .farm-foreground { display: none !important; }
body.landing-mode::before {
/* Panorama 当作整个标题画面背景，横向无缝循环。视口比 panorama 高时 letterbox 让上方蓝天扩展 */
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(to bottom, #87cdf2 0%, #87cdf2 22vh, transparent 22vh),
url('../stardew/sky/stardewPanorama.png');
background-repeat: no-repeat, repeat-x;
background-size: 100% auto, auto calc(100vh - 22vh);
background-position: 0 0, 50% 100%;
image-rendering: pixelated;
pointer-events: none;
z-index: 0;
animation: panorama-pan 320s linear infinite;
transition: opacity 1.2s ease;
}
@keyframes panorama-pan {
from { background-position: 0 0, 0 100%; }
to { background-position: 0 0, 1280px 100%; }
}
body.landing-mode::after {
/* 云海条带：在 panorama 之上叠 Cloudy_Ocean_BG，做出云层飘动 */
content: '';
position: fixed;
left: -8vw; right: -8vw; top: 4vh;
height: 22vh;
background-image: url('../stardew/sky/Cloudy_Ocean_BG.png');
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center 30%;
image-rendering: pixelated;
opacity: 0.55;
pointer-events: none;
z-index: 0;
mix-blend-mode: screen;
animation: cloud-pan 180s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes cloud-pan {
from { transform: translateX(-3vw); }
to { transform: translateX(3vw); }
}
.title-scene {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
display: none;
}
body.landing-mode .title-scene { display: block; }
.title-scene .title-tree {
/* tree1_spring.png 是 144x160 的成长阶段图，左半 80x104 是成树（冠+干），右半镜像 */
position: absolute;
/* 提到草坪带内部，让树干扎根在草里而不是悬空 */
bottom: clamp(48px, 8vh, 90px);
width: 80px;
height: 104px;
background-image: url('../stardew/trees/tree1_spring.png');
background-repeat: no-repeat;
background-position: 0 0;
background-size: 144px 160px;
image-rendering: pixelated;
transform: scale(2.2);
transform-origin: bottom center;
filter: drop-shadow(4px 8px 0 rgba(0,0,0,0.22));
animation: tree-sway 5.2s ease-in-out infinite;
z-index: 3;
}
.title-scene .title-tree.t-left { left: 3%; }
.title-scene .title-tree.t-right { right: 4%; transform: scale(2.2) scaleX(-1); animation: tree-sway-right 5.2s ease-in-out infinite; animation-delay: -2.6s; }
.title-scene .title-tree-root {
position: absolute;
bottom: clamp(44px, 7.45vh, 84px);
width: 34px;
height: 18px;
background: transparent;
image-rendering: pixelated;
transform: scale(2.2);
transform-origin: bottom center;
z-index: 4;
filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.22));
}
.title-scene .title-tree-root::before {
content: '';
position: absolute;
left: 5px;
right: 5px;
bottom: 3px;
height: 9px;
background:
linear-gradient(90deg, transparent 0 5px, #6d3f1f 5px 10px, transparent 10px 14px, #7b4924 14px 19px, transparent 19px),
linear-gradient(90deg, #5a341b 0 8px, transparent 8px 13px, #5a341b 13px 21px, transparent 21px);
clip-path: polygon(0 60%, 24% 28%, 44% 54%, 58% 18%, 100% 63%, 100% 100%, 0 100%);
}
.title-scene .title-tree-root::after {
content: '';
position: absolute;
left: -9px;
right: -9px;
bottom: -2px;
height: 12px;
background:
radial-gradient(ellipse at 18% 100%, rgba(46, 100, 31, 0.94) 0 42%, transparent 45%),
radial-gradient(ellipse at 46% 100%, rgba(73, 134, 39, 0.96) 0 46%, transparent 49%),
radial-gradient(ellipse at 77% 100%, rgba(42, 93, 30, 0.9) 0 39%, transparent 42%);
image-rendering: pixelated;
}
.title-scene .title-tree-root.root-left { left: calc(3% + 23px); }
.title-scene .title-tree-root.root-right { right: calc(4% + 23px); transform: scale(2.2) scaleX(-1); }
@keyframes tree-sway {
0%, 100% { transform: scale(2.2) rotate(0deg); }
50% { transform: scale(2.2) rotate(0.6deg); }
}
@keyframes tree-sway-right {
0%, 100% { transform: scale(2.2) scaleX(-1) rotate(0deg); }
50% { transform: scale(2.2) scaleX(-1) rotate(-0.6deg); }
}
.title-scene .title-bush {
position: absolute;
bottom: clamp(20px, 4vh, 50px);
width: 64px;
height: 32px;
background-image: url('../stardew/loose/bushes.png');
background-repeat: no-repeat;
background-position: 0 0;
background-size: 128px auto;
image-rendering: pixelated;
transform: scale(1.4);
transform-origin: bottom center;
filter: drop-shadow(2px 4px 0 rgba(0,0,0,0.18));
z-index: 2;
}
.title-scene .title-bush.b1 { left: 22%; }
.title-scene .title-bush.b2 { right: 28%; transform: scale(1.2) scaleX(-1); }
.title-scene .title-bush.b3 { left: 60%; transform: scale(1.1); }
.title-scene .title-sun {
position: absolute;
top: 6vh;
right: 14vw;
width: 76px;
height: 76px;
background: #fff5b8;
border-radius: 50%;
box-shadow:
0 0 0 8px rgba(255, 240, 160, 0.42),
0 0 0 16px rgba(255, 226, 130, 0.18),
4px 4px 0 #c79024;
clip-path: polygon(
30% 0%, 70% 0%,
85% 15%, 100% 30%,
100% 70%, 85% 85%,
70% 100%, 30% 100%,
15% 85%, 0% 70%,
0% 30%, 15% 15%);
image-rendering: pixelated;
animation: sun-pulse 5s ease-in-out infinite;
}
/* 远景飞鸟剪影：原版星露谷标题画面里的小鸟是"M"形深色剪影，
之前用 critters.png(0,0) 是站立的鸭/海鸥所以看起来像鹅。
现在用内联 SVG 画 3 帧"翅膀上 / 平展 / 翅膀下"循环 */
.title-scene .title-bird {
position: absolute;
top: var(--bird-top, 22vh);
left: -32px;
width: 16px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 48px 14px;
background-position: 0 0;
image-rendering: pixelated;
animation:
bird-flap 0.5s step-end infinite,
bird-glide var(--bird-dur, 38s) linear infinite;
animation-delay: 0s, var(--bird-delay, 0s);
opacity: 0.78;
will-change: transform, background-position;
backface-visibility: hidden;
}
@keyframes bird-flap {
0% { background-position: 0 0; }
33% { background-position: -16px 0; }
66% { background-position: -32px 0; }
100% { background-position: 0 0; }
}
@keyframes bird-glide {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(110vw, -4vh, 0); }
}
/* ===== 地面草坪：让树有"扎根"的地方，告别悬空 ===== */
.title-scene .title-ground {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: clamp(120px, 19vh, 190px);
/* 底色只做轻微地面阴影，小草由独立 sprite 铺出来，避免整块贴图硬切。 */
background:
linear-gradient(180deg,
rgba(116, 170, 75, 0) 0,
rgba(111, 166, 74, 0.08) 34%,
rgba(83, 139, 58, 0.28) 70%,
rgba(42, 92, 37, 0.56) 100%),
linear-gradient(90deg,
rgba(132, 184, 83, 0.08),
rgba(65, 123, 47, 0.05) 36%,
rgba(128, 178, 82, 0.08) 74%,
rgba(45, 98, 39, 0.10));
background-repeat: no-repeat;
background-size: 100% 100%, 100% 100%;
background-color: transparent;
image-rendering: pixelated;
pointer-events: none;
z-index: 1;
-webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.06) 18px, rgba(0,0,0,0.42) 68px, #000 110px);
mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.06) 18px, rgba(0,0,0,0.42) 68px, #000 110px);
}
/* 草坪顶端：羽化淡入，柔和过渡到 panorama 山脚而不是硬切边 */
.title-scene .title-ground::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -28px;
height: 42px;
background: linear-gradient(180deg, transparent 0, rgba(94, 143, 58, 0.14) 68%, rgba(92, 143, 58, 0.34) 100%);
pointer-events: none;
}
/* 草坪底部暗化：远处的近景压暗，让地面更有"地"的感觉 */
.title-scene .title-ground::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 34%;
background:
radial-gradient(ellipse at 12% 100%, rgba(34, 76, 24, 0.22) 0 18%, transparent 21%),
radial-gradient(ellipse at 52% 100%, rgba(44, 94, 29, 0.16) 0 16%, transparent 19%),
radial-gradient(ellipse at 84% 100%, rgba(29, 66, 22, 0.20) 0 20%, transparent 23%),
linear-gradient(180deg, transparent, rgba(20, 36, 14, 0.26));
pointer-events: none;
}
.title-scene .title-grass-field {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 92px;
pointer-events: none;
z-index: 2;
overflow: hidden;
}
/* Stardew 原版草丛：直接用 grass.png 抠图（66×240 的 3列×12行 sprite，每格 22×20） */
.title-scene .title-grass-tuft {
position: absolute;
left: var(--gt-x, 50%);
bottom: var(--gt-y, clamp(8px, 1.6vh, 22px));
width: 22px;
height: 20px;
transform: translateX(-50%) scale(var(--gt-scale, 1.8));
transform-origin: bottom center;
image-rendering: pixelated;
pointer-events: none;
background-image: url('../stardew/loose/grass.png');
background-repeat: no-repeat;
background-position: var(--gt-bgx, 0) var(--gt-bgy, 0);
background-size: 66px 240px;
animation: tuft-sway 4s ease-in-out infinite;
animation-delay: var(--gt-delay, 0s);
filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.18));
opacity: var(--gt-opacity, 0.92);
}
@keyframes tuft-sway {
0%, 100% { transform: translateX(-50%) scale(var(--gt-scale, 1.8)) rotate(-1.5deg); }
50% { transform: translateX(-50%) scale(var(--gt-scale, 1.8)) rotate(1.5deg); }
}
/* 草丛里点缀的小花 */
.title-scene .title-flower {
position: absolute;
left: var(--gt-x, 50%);
bottom: clamp(22px, 4vh, 38px);
width: 7px;
height: 7px;
transform: translateX(-50%);
border-radius: 50%;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.42),
0 5px 0 -1px #2a4a18,
0 6px 0 -1px #2a4a18;
pointer-events: none;
image-rendering: pixelated;
z-index: 1;
}
.title-scene .title-flower::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 2px;
background: #f4d442;
transform: translate(-50%, -50%);
}
.title-flower--white { background: #fdf6e7; }
.title-flower--yellow { background: #f7c948; }
.title-flower--yellow::after { background: #b06a18; }
.title-flower--pink { background: #f59cb8; }
.title-flower--pink::after { background: #c0395b; }
/* ===== M-A1 节庆灯笼挂条 =====
横跨首页顶部的彩灯，营造"过节"感。一根麻绳 + 7 个小灯笼摇摆，
灯笼颜色按 SDV 集市风：红/黄/橙/粉/绿。注意 transform-origin 必须在顶部
才能像挂着的一样左右摇，而不是在中心旋转 */
.title-scene .title-lantern-string {
position: absolute;
left: 0; right: 0;
top: clamp(4vh, 6vh, 9vh);
height: 38px;
pointer-events: none;
z-index: 5;
}
.title-scene .title-lantern-string::before {
/* 麻绳：极细虚线代替单色直线，更像编绳；微微下垂感用 box-shadow 模拟 */
content: '';
position: absolute;
top: 4px;
left: 3%; right: 3%;
height: 0;
border-top: 2px dotted rgba(58, 30, 10, 0.55);
border-radius: 50%;
/* 让绳两端有"绑住"的感觉 */
box-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.title-scene .title-lantern {
position: absolute;
top: 6px;
left: var(--lx, 50%);
width: 18px;
height: 22px;
transform: translateX(-50%);
/* 灯笼本体：径向渐变让中心透出黄光，外层是节庆主色 */
background: radial-gradient(ellipse at 50% 38%, #fff2a0 0%, #ffe070 28%, var(--hue, #d23a3a) 72%, var(--hue-deep, #8a1f1f) 100%);
border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%;
box-shadow:
inset -3px 0 0 rgba(0,0,0,0.22),
inset 3px 0 0 rgba(255,255,255,0.18),
0 0 10px rgba(255, 210, 110, 0.55),
0 4px 0 rgba(0,0,0,0.18);
image-rendering: pixelated;
transform-origin: 50% -8px;
animation: lantern-sway 3.6s ease-in-out infinite;
animation-delay: var(--ldelay, 0s);
}
.title-scene .title-lantern::before {
/* 顶部金属盖 */
content: '';
position: absolute;
top: -4px; left: 50%;
width: 10px; height: 3px;
background: linear-gradient(180deg, #d4a04a 0%, #6b3a18 100%);
transform: translateX(-50%);
border-radius: 1px 1px 0 0;
}
.title-scene .title-lantern::after {
/* 底部金黄流苏 */
content: '';
position: absolute;
bottom: -7px; left: 50%;
width: 3px; height: 6px;
background: linear-gradient(180deg, #f4c93a 0%, #b07a18 100%);
transform: translateX(-50%);
border-radius: 0 0 2px 2px;
box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
@keyframes lantern-sway {
0%, 100% { transform: translateX(-50%) rotate(-7deg); }
50% { transform: translateX(-50%) rotate(7deg); }
}
/* ===== M-A2 Junimo 小精灵 =====
首页直接使用原版 Junimo sprite，再用轻微滤镜做色相变体。 */
.title-scene .title-junimo {
position: absolute;
bottom: var(--jy, clamp(36px, 6vh, 70px));
left: var(--jx, 50%);
width: 32px;
height: 32px;
transform: translateX(-50%);
background-image: url('../stardew/characters/Junimo.png');
background-repeat: no-repeat;
background-size: 256px 256px;
background-position: 0 0;
image-rendering: pixelated;
transform-origin: 50% 100%;
animation: junimo-bounce 1.7s cubic-bezier(0.5, 0, 0.5, 1) infinite;
animation-delay: var(--jdelay, 0s);
z-index: 4;
pointer-events: none;
will-change: transform;
filter: var(--title-junimo-filter, sepia(1) saturate(2.4) hue-rotate(55deg) brightness(1.08)) drop-shadow(0 2px 0 rgba(0,0,0,0.25));
}
.title-scene .title-junimo.j-purple { --title-junimo-filter: sepia(1) saturate(2.2) hue-rotate(255deg) brightness(1.1); }
.title-scene .title-junimo.j-yellow { --title-junimo-filter: sepia(1) saturate(2.5) hue-rotate(75deg) brightness(1.12); }
.title-scene .title-junimo.j-red { --title-junimo-filter: sepia(1) saturate(2.4) hue-rotate(335deg) brightness(1.08); }
.title-scene .title-junimo.j-green { --title-junimo-filter: sepia(1) saturate(2.4) hue-rotate(55deg) brightness(1.08); }
.title-scene .title-junimo.j-blue { --title-junimo-filter: sepia(1) saturate(2.2) hue-rotate(180deg) brightness(1.1); }
@keyframes junimo-bounce {
0%, 100% { transform: translateX(-50%) translateY(0) scaleY(1); }
40% { transform: translateX(-50%) translateY(-9px) scaleY(1.06) scaleX(0.94); }
60% { transform: translateX(-50%) translateY(-9px) scaleY(1.06) scaleX(0.94); }
85% { transform: translateX(-50%) translateY(0) scaleY(0.88) scaleX(1.1); }
}
/* ===== M-A3 农场小鸡 =====
2 帧 sprite：抬腿 / 落地，循环走路。横向匀速穿越屏幕。
SVG 里两帧并排，display 区只显示一帧，靠 background-position 切换。
legs（黄色脚）位置在两帧间错开 1px 制造迈步感 */
.title-scene .title-chicken {
position: absolute;
display: none;
bottom: clamp(38px, 6vh, 72px);
left: -40px;
width: 30px;
height: 24px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 60px 24px;
background-position: 0 0;
image-rendering: pixelated;
animation:
chicken-walk 0.42s steps(1) infinite,
chicken-saunter var(--chk-dur, 32s) linear infinite;
animation-delay: 0s, var(--chk-delay, 0s);
z-index: 4;
pointer-events: none;
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.22));
will-change: transform, background-position;
}
/* 反向走的鸡（右→左）：sprite 水平翻转 */
.title-scene .title-chicken.flip { transform: scaleX(-1); }
@keyframes chicken-walk {
0% { background-position: 0 0; }
50% { background-position: -30px 0; }
100% { background-position: 0 0; }
}
@keyframes chicken-saunter {
from { transform: translateX(0); }
to { transform: translateX(108vw); }
}
body.day-mode {
background:
linear-gradient(to bottom,
#7ec0ee 0%,
#b3deff 30%,
#ffe9b0 55%,
#c4e4a3 75%,
#6fa86f 100%);
}
/* Cards mode 用现成的 farm-foreground 做近景；远景留给 sky gradient，不再叠 panorama，
之前 mix-blend-mode: multiply 会让卡片背后变暗一大片，影响阅读 */
body.dusk-mode {
background:
linear-gradient(to bottom,
#5d3a7a 0%,
#ce6e5b 40%,
#f0a868 65%,
#6a4e3a 85%,
#2a1e10 100%);
}
body.dawn-mode {
background:
linear-gradient(to bottom,
#4a5d8f 0%,
#f4a8a1 35%,
#ffd8a8 60%,
#b3deba 85%,
#5a7a4a 100%);
}
body.day-mode[data-season="spring"] {
background: linear-gradient(to bottom, #79b9ef 0%, #b6ddff 32%, #ffe6aa 58%, #a8cf73 78%, #588f45 100%);
}
body.day-mode[data-season="summer"] {
background: linear-gradient(to bottom, #67b7f3 0%, #a8dcff 28%, #ffd06a 56%, #8bc75f 78%, #3f8a48 100%);
}
body.day-mode[data-season="fall"] {
background: linear-gradient(to bottom, #7fb4dd 0%, #f2c174 34%, #e88f4d 58%, #b96b35 80%, #6d5b2d 100%);
}
body.day-mode[data-season="winter"] {
background: linear-gradient(to bottom, #9dc4e2 0%, #d8e8f3 46%, #f5f8fb 72%, #c7dbe6 100%);
}
/* ========== Pixel-art sky elements ========== */
.sky-element {
position: fixed;
pointer-events: none;
z-index: 0;
image-rendering: pixelated;
transition: opacity 1.2s ease;
}
/* Pixel cloud — chunky stepped shape */
.pixel-cloud {
width: 60px;
height: 30px;
background:
linear-gradient(to right, transparent 10px, #fff 10px, #fff 50px, transparent 50px) 0 0/100% 6px no-repeat,
linear-gradient(to right, transparent 5px, #fff 5px, #fff 55px, transparent 55px) 0 6px/100% 6px no-repeat,
linear-gradient(to right, #fff 0, #fff 100%) 0 12px/100% 6px no-repeat,
linear-gradient(to right, transparent 5px, #fff 5px, #fff 55px, transparent 55px) 0 18px/100% 6px no-repeat,
linear-gradient(to right, transparent 15px, #fff 15px, #fff 45px, transparent 45px) 0 24px/100% 6px no-repeat;
filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.08));
opacity: 0;
}
/* Cloud base positions are now driven entirely by the animation;
these legacy declarations were superseded by the .cloud-N rules
in the Ambient animations block below. */
/* Sun — pixel circle */
.pixel-sun {
top: 9%;
right: 8%;
width: 80px;
height: 80px;
background: #ffd84d;
border-radius: 50%;
clip-path: polygon(
30% 0%, 70% 0%,
85% 15%, 100% 30%,
100% 70%, 85% 85%,
70% 100%, 30% 100%,
15% 85%, 0% 70%,
0% 30%, 15% 15%);
box-shadow:
0 0 0 6px #ffec80,
0 0 0 12px rgba(255, 236, 128, 0.4),
4px 4px 0 #c79024;
opacity: 0;
}
/* Moon — Stardew-ish chunky full moon */
.pixel-moon {
top: 8%;
right: 10%;
width: 68px;
height: 68px;
background: #f3dfac;
clip-path: polygon(
24% 0%, 76% 0%,
88% 10%, 100% 24%,
100% 76%, 88% 90%,
76% 100%, 24% 100%,
10% 90%, 0% 76%,
0% 24%, 10% 10%);
box-shadow:
inset -7px -8px 0 #c9aa68,
inset 5px 5px 0 #fff2c7,
4px 4px 0 rgba(0,0,0,0.36),
0 0 30px rgba(245, 230, 180, 0.42);
opacity: 0;
}
.pixel-moon::before,
.pixel-moon::after {
content: '';
position: absolute;
image-rendering: pixelated;
}
.pixel-moon::before {
width: 10px;
height: 10px;
left: 17px;
top: 18px;
background: #d4ba76;
box-shadow:
24px 8px 0 #dec78a,
12px 28px 0 #caa965;
}
.pixel-moon::after {
width: 6px;
height: 6px;
left: 43px;
top: 42px;
background: #b99558;
box-shadow: -24px 2px 0 #ead09a;
}
/* Stars - decorative */
.pixel-star {
width: 8px;
height: 8px;
background: #fff;
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
opacity: 0;
}
.star-1 { top: 12%; left: 20%; transform: scale(1.4); }
.star-2 { top: 22%; right: 25%; }
.star-3 { top: 35%; left: 10%; transform: scale(1.2); }
.star-4 { top: 18%; left: 60%; transform: scale(0.8); }
.star-5 { top: 8%; left: 38%; }
/* M-C2 大星：六颗显眼的"特写星"，自带光晕，夜晚有层次 */
.pixel-star.big-star {
width: 5px;
height: 5px;
background: #fffce4;
clip-path: polygon(50% 0%, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0% 50%, 40% 38%);
box-shadow:
0 0 6px rgba(255, 250, 200, 0.95),
0 0 14px rgba(180, 200, 255, 0.55),
0 0 22px rgba(160, 180, 240, 0.32);
}
/* Visibility by time mode */
body.day-mode .pixel-cloud,
body.day-mode .pixel-sun { opacity: 1; }
body.day-mode .pixel-star,
body.dawn-mode .pixel-star { opacity: 0 !important; animation-play-state: paused; }
body.dawn-mode .pixel-cloud { opacity: 0.6; }
body.dawn-mode .pixel-sun { opacity: 0.7; }
body.dusk-mode .pixel-cloud { opacity: 0.3; }
body.dusk-mode .pixel-sun { opacity: 0; }
body:not(.day-mode):not(.dawn-mode):not(.dusk-mode) .pixel-moon { opacity: 1; }
body:not(.day-mode):not(.dawn-mode):not(.dusk-mode) .pixel-star { opacity: 0.85; }
body.dusk-mode .pixel-moon { opacity: 0.85; }
body.dusk-mode .pixel-star { opacity: 0.4; }
/* 草地（白天底部） */
body.day-mode::before,
body.dawn-mode::before {
content: '';
position: fixed;
left: 0; right: 0; bottom: 0;
height: 100px;
background:
repeating-linear-gradient(to right,
#5a8f4a 0, #5a8f4a 8px,
#4a7f3a 8px, #4a7f3a 16px);
opacity: 0.3;
pointer-events: none;
z-index: 0;
background-image: none;
background-size: auto;
}
/* Stars in the sky - only at night */
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
radial-gradient(1px 1px at 22% 32%, #fff5d0, transparent),
radial-gradient(1px 1px at 52% 22%, #fff, transparent),
radial-gradient(1px 1px at 78% 42%, #fff5d0, transparent),
radial-gradient(1px 1px at 28% 62%, #fff, transparent),
radial-gradient(1px 1px at 68% 72%, #fff5d0, transparent),
radial-gradient(1px 1px at 88% 18%, #fff5d0, transparent),
radial-gradient(1px 1px at 42% 52%, #fff, transparent),
radial-gradient(1px 1px at 12% 78%, #fff, transparent);
background-size: 200% 200%;
opacity: 0.5;
pointer-events: none;
z-index: 0;
transition: opacity 1.2s ease;
}
body.day-mode::before { opacity: 0; }
body.dusk-mode::before { opacity: 0.2; }
body.dawn-mode::before { opacity: 0.1; }
/* ---------- Stardew Frame ---------- */
.sd-frame {
background: var(--cream);
border: 4px solid var(--wood-dark);
box-shadow:
inset 0 0 0 4px var(--cream),
inset 0 0 0 8px var(--wood-light),
inset 0 0 0 10px var(--wood-dark),
0 6px 0 rgba(0, 0, 0, 0.4),
0 12px 32px rgba(0, 0, 0, 0.5);
padding: 28px 24px;
position: relative;
}
/* ---------- Landing ---------- */
#landing {
text-align: center;
width: 100%;
max-width: min(720px, calc(100vw - 32px));
min-height: 100vh;
padding: clamp(70px, 10vh, 92px) 18px clamp(42px, 8vh, 74px);
z-index: 6;
animation: fadeIn 0.6s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
position: relative;
max-height: 100vh;
overflow-y: auto;
scrollbar-width: none;
}
#landing::-webkit-scrollbar { display: none; }
.title-banner {
/* 自绘木牌：星露谷风格但非原版 logo —— 三段拼板 + 四角铆钉 + 顶部叶饰 */
position: relative;
width: min(468px, calc(100vw - 44px));
padding: 26px 26px 24px;
margin: 0 auto 14px;
background:
/* 四角铆钉（深色钉头 + 浅色环） */
radial-gradient(circle at 14px 14px, #2a1606 3.2px, #6b3a18 4.6px, transparent 5.2px),
radial-gradient(circle at calc(100% - 14px) 14px, #2a1606 3.2px, #6b3a18 4.6px, transparent 5.2px),
radial-gradient(circle at 14px calc(100% - 14px), #2a1606 3.2px, #6b3a18 4.6px, transparent 5.2px),
radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #2a1606 3.2px, #6b3a18 4.6px, transparent 5.2px),
/* 木纹（横向拼板：上、中、下三段，深色拼缝） */
linear-gradient(180deg,
#c98a48 0%, #c98a48 30%,
#6b3a18 30%, #6b3a18 33%,
#b07a3c 33%, #b07a3c 67%,
#6b3a18 67%, #6b3a18 70%,
#c98a48 70%, #c98a48 100%);
background-repeat: no-repeat;
border: 4px solid #3b1f0a;
box-shadow:
inset 0 0 0 3px #d4a368,
inset 0 0 0 5px #6b3a18,
6px 8px 0 rgba(0, 0, 0, 0.28),
0 16px 32px rgba(49, 73, 36, 0.18);
image-rendering: pixelated;
text-align: center;
filter: none;
}
/* 顶部叶饰：左右两簇小叶，像挂在牌子两角 */
.title-banner::before,
.title-banner::after {
content: '';
position: absolute;
top: -18px;
width: 56px;
height: 28px;
background:
radial-gradient(ellipse 14px 10px at 30% 60%, #6fa14a 60%, transparent 62%),
radial-gradient(ellipse 12px 9px at 65% 45%, #4f7d34 60%, transparent 62%),
radial-gradient(ellipse 10px 8px at 50% 75%, #8bbf5c 60%, transparent 62%);
background-repeat: no-repeat;
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.28));
pointer-events: none;
}
.title-banner::before { left: -8px; transform: rotate(-12deg); }
.title-banner::after { right: -8px; transform: scaleX(-1) rotate(-12deg); }
.title-banner h1 {
display: block;
margin: 0;
/* 默认按英文像素字处理；中文模式下被下方 [lang="zh-CN"] 规则覆盖 */
font-family: 'Press Start 2P', 'Cubic 11', 'Noto Sans SC', monospace;
font-size: 30px;
line-height: 1.18;
color: #fff7df;
letter-spacing: 3px;
text-shadow:
2px 2px 0 #3b1f0a,
-1px 0 0 #3b1f0a,
0 -1px 0 #3b1f0a,
0 3px 0 #6b3a18;
/* 像素字必须关 anti-alias，不然 Press Start 2P 的方块边缘会被磨成糊 */
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: grayscale;
font-smooth: never;
}
.title-banner .zh {
display: none;
}
/* 中文牌：换成像素方块字（Zpix / Cubic 11），跟 STARDEW WRAPPED 的 Press Start 2P
视觉同源——都是"小方块字"，但中文走 CJK 像素字，更有梗、更像 SDV UI。
关掉 anti-alias + 用 0.5px 字距保住像素颗粒，44px 是 11×4，正好对齐 grid */
html[lang="zh-CN"] .title-banner h1 {
font-family: 'Cubic 11', 'Press Start 2P', 'Noto Sans SC', 'PingFang SC', sans-serif;
font-size: 44px;
font-weight: 400;
letter-spacing: 6px;
line-height: 1.15;
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: grayscale;
font-smooth: never;
text-rendering: geometricPrecision;
image-rendering: pixelated;
}
html[lang="zh-CN"] .title-banner {
background:
/* 右上角朱印小方块 */
linear-gradient(#c0392b, #c0392b) calc(100% - 12px) 12px / 16px 16px no-repeat,
/* 四角铆钉 */
radial-gradient(circle at 14px 14px, #1a0d04 3.2px, #5a2f12 4.6px, transparent 5.2px),
radial-gradient(circle at calc(100% - 14px) 14px, #1a0d04 3.2px, #5a2f12 4.6px, transparent 5.2px),
radial-gradient(circle at 14px calc(100% - 14px), #1a0d04 3.2px, #5a2f12 4.6px, transparent 5.2px),
radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #1a0d04 3.2px, #5a2f12 4.6px, transparent 5.2px),
/* 酱红木纹（三段拼板） */
linear-gradient(180deg,
#a85a32 0%, #a85a32 30%,
#4a2410 30%, #4a2410 33%,
#944826 33%, #944826 67%,
#4a2410 67%, #4a2410 70%,
#a85a32 70%, #a85a32 100%);
background-repeat: no-repeat;
border-color: #2a1606;
box-shadow:
inset 0 0 0 3px #d4a368,
inset 0 0 0 5px #5a2f12,
6px 8px 0 rgba(0, 0, 0, 0.36);
}
html[lang="zh-CN"] .title-banner h1 {
color: #fff3d0;
text-shadow:
2px 2px 0 #2a1606,
-1px 0 0 #2a1606,
0 -1px 0 #2a1606,
0 3px 0 #5a2f12;
}
/* 英文牌：稍小字号，留多一点边距匹配 STARDEW WRAPPED 长度 */
html[lang="en"] .title-banner h1 {
font-family: 'Press Start 2P', monospace;
font-size: 26px;
letter-spacing: 2px;
}
.title-subtitle {
margin: -2px 0 14px;
padding: 5px 12px 6px;
color: #ffe9a0;
background: rgba(51, 33, 12, 0.42);
border: 1px solid rgba(255, 233, 160, 0.28);
border-radius: 4px;
text-shadow:
2px 2px 0 #5a3a1a,
-1px 0 0 #5a3a1a,
0 -1px 0 #5a3a1a;
/* 默认英文像素字；中文模式被下方规则覆盖为 Noto Sans SC，避免 Press Start 2P 不支持中文导致回退乱 */
font-family: 'Press Start 2P', 'Noto Sans SC', monospace;
font-size: 14px;
letter-spacing: 6px;
text-align: center;
-webkit-font-smoothing: antialiased;
}
.landing-menu {
width: min(474px, calc(100vw - 34px));
position: relative;
display: grid;
gap: 12px;
padding: 14px;
background:
linear-gradient(180deg, rgba(255, 235, 188, 0.9), rgba(223, 158, 82, 0.92)),
repeating-linear-gradient(90deg, rgba(93, 48, 18, 0.08) 0 2px, transparent 2px 38px);
border: 3px solid #3b1f0a;
box-shadow:
inset 0 0 0 2px #f6cb84,
inset 0 0 0 5px #8a481d,
5px 7px 0 rgba(38, 29, 12, 0.24),
0 18px 34px rgba(54, 80, 34, 0.18);
image-rendering: pixelated;
}
.landing-menu::before {
content: '';
position: absolute;
inset: 8px;
border: 1px solid rgba(80, 37, 12, 0.12);
pointer-events: none;
}
.landing-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items: stretch;
}
.landing-actions p {
margin: 0;
min-width: 0;
}
.landing-info {
width: min(474px, calc(100vw - 34px));
margin-top: 12px;
padding: 9px 12px 8px;
background:
linear-gradient(180deg, rgba(255, 249, 220, 0.88), rgba(241, 224, 168, 0.88));
border: 2px solid rgba(62, 36, 16, 0.62);
box-shadow:
inset 0 0 0 2px rgba(255, 255, 240, 0.55),
0 4px 0 rgba(0, 0, 0, 0.16);
}
html[lang="zh-CN"] .title-subtitle {
font-family: 'Cubic 11', 'Press Start 2P', 'Noto Serif SC', 'Noto Sans SC', 'PingFang SC', serif;
font-weight: 400;
/* 11px 是 Cubic 11 的原生 grid，clean 像素无插值 */
font-size: 11px;
letter-spacing: 4px;
-webkit-font-smoothing: none;
font-smooth: never;
}
/* ===== 中文模式统一字体：避开 Press Start 2P / Pixelify Sans 不支持汉字
而产生的逐字回退混乱（半像素半 sans，行高不齐）。
首页用 Zpix 像素字，正文/小字仍走 Noto Sans SC 保证可读性 ===== */
html[lang="zh-CN"] .upload-zone p,
html[lang="zh-CN"] .demo-link,
html[lang="zh-CN"] .tutorial-link {
font-family: 'Cubic 11', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-weight: 400;
letter-spacing: 1px;
-webkit-font-smoothing: none;
font-smooth: never;
}
html[lang="zh-CN"] .upload-zone .hint,
html[lang="zh-CN"] .privacy-note,
html[lang="zh-CN"] .landing-legal-note {
/* 小字（11-12px）走 Zpix 像素字最有 SDV 味，再小就回 Noto 保护可读性 */
font-family: 'Cubic 11', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-webkit-font-smoothing: none;
font-smooth: never;
}
.upload-zone {
/* SDV NEW/LOAD/Co-op 木质菜单按钮风格：四色木板 + 深色双层描边 + 投影 */
position: relative;
min-height: 118px;
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
align-items: center;
gap: 16px;
text-align: left;
background:
linear-gradient(180deg,
#f6cb84 0, #f6cb84 4px,
#e89a52 4px, #e89a52 14px,
#d27d3a 14px, #d27d3a 56%,
#e89a52 56%, #e89a52 calc(100% - 14px),
#f6cb84 calc(100% - 14px), #f6cb84 100%);
border: 3px solid #3f1808;
box-shadow:
inset 0 0 0 2px #6b2e10,
inset 0 0 0 5px #d27d3a,
0 4px 0 rgba(0, 0, 0, 0.28);
padding: 18px 19px;
cursor: pointer;
transition: transform 0.12s, filter 0.12s, box-shadow 0.12s;
margin-bottom: 0;
color: #4a1f0a;
image-rendering: pixelated;
}
.upload-zone:hover {
transform: translate(-2px, -2px);
filter: brightness(1.08);
box-shadow:
inset 0 0 0 2px #6b2e10,
inset 0 0 0 5px #ffb86a,
6px 6px 0 rgba(0, 0, 0, 0.28);
}
.upload-zone:active {
transform: translate(2px, 2px);
box-shadow:
inset 0 0 0 2px #6b2e10,
inset 0 0 0 5px #d27d3a,
0 2px 0 rgba(0, 0, 0, 0.28);
}
.upload-zone .icon { display: none; }
.upload-pixel-icon {
position: relative;
display: block;
width: 44px;
height: 50px;
margin-left: 2px;
background: #fff7df;
border: 4px solid var(--wood-dark);
box-shadow:
inset 0 0 0 3px #e2bf76,
4px 4px 0 rgba(0,0,0,0.18);
}
.upload-pixel-icon::before {
content: '';
position: absolute;
right: -4px;
top: -4px;
width: 14px;
height: 14px;
background: #d8b065;
border-left: 4px solid var(--wood-dark);
border-bottom: 4px solid var(--wood-dark);
}
.upload-pixel-icon::after {
content: '';
position: absolute;
left: 9px;
right: 9px;
top: 23px;
height: 4px;
background: var(--wood-mid);
box-shadow: 0 9px 0 var(--wood-mid);
}
.upload-zone p {
font-family: 'Pixelify Sans', monospace;
font-size: 21px;
font-weight: 700;
margin: 0 0 6px;
color: #3f1808;
text-shadow: 1px 1px 0 #ffd789;
}
.upload-zone .hint {
font-size: 12px;
color: #5a2a10;
line-height: 1.6;
font-family: 'Noto Sans SC', sans-serif;
font-weight: 400;
}
#file-input { display: none; }
.upload-options {
display: block;
margin: 0;
width: 100%;
}
.upload-options .upload-zone { margin-bottom: 0; }
.upload-options p { font-size: 20px; }
.upload-options .hint { font-size: 12px; }
.demo-link,
.tutorial-link,
.photo-ach-link {
display: flex;
min-height: 46px;
align-items: center;
justify-content: center;
color: #fff4cf;
text-decoration: none;
cursor: pointer;
font-size: 12px;
font-family: 'Pixelify Sans', monospace;
font-weight: 600;
line-height: 1.25;
padding: 9px 10px;
border: 2px solid #3b1f0a;
background:
linear-gradient(180deg, #8e5a2e 0%, #6b3a18 100%);
box-shadow:
inset 0 0 0 2px #d4a368,
0 3px 0 rgba(0, 0, 0, 0.24);
text-shadow: 1px 1px 0 #2a1606;
}
.demo-link:hover,
.tutorial-link:hover,
.photo-ach-link:hover {
transform: translateY(-1px);
filter: brightness(1.1);
}
.tutorial-link {
background: linear-gradient(180deg, #5f7b42 0%, #3f5e2c 100%);
box-shadow:
inset 0 0 0 2px #a9cf73,
0 3px 0 rgba(0, 0, 0, 0.24);
}
.photo-ach-link {
background: linear-gradient(180deg, #b85f36 0%, #7e351c 100%);
box-shadow:
inset 0 0 0 2px #f1b067,
0 3px 0 rgba(0, 0, 0, 0.24);
}
.privacy-note {
margin: 0;
padding: 0;
font-size: 12px;
color: rgba(59, 31, 10, 0.8);
line-height: 1.65;
background: transparent;
border: 0;
box-shadow: none;
}
.landing-legal-note {
max-width: none;
margin: 6px auto 0;
padding: 0 2px;
font-size: 10px;
line-height: 1.55;
color: rgba(59, 31, 10, 0.52);
background: transparent;
border: 0;
text-shadow: none;
}
.err {
color: #ff9485;
margin-top: 12px;
font-size: 13px;
background: rgba(212, 64, 64, 0.15);
border: 1px solid rgba(212, 64, 64, 0.4);
padding: 10px 14px;
border-radius: 4px;
display: none;
}
/* ROADMAP 1.1.A：err-box 是结构化错误页（标题+正文+两个按钮）。
默认仍 display:none，handleFiles 出错时切到 grid 显示 */
.err.err-box { padding: 14px 16px; text-align: left; max-width: 460px; }
.err.err-box.show { display: block; }
.err .err-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: #ffb8a8; }
.err .err-body { font-size: 13px; line-height: 1.55; color: #ffd6cd; }
.err .err-body code { background: rgba(0,0,0,0.25); padding: 1px 4px; border-radius: 3px; }
.err .err-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.err .err-btn {
font-family: inherit;
font-size: 12px;
padding: 8px 14px;
border-radius: 4px;
border: 1px solid rgba(255, 180, 168, 0.5);
background: transparent;
color: #ffd6cd;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.err .err-btn:hover { background: rgba(255, 180, 168, 0.18); color: #fff; }
.err .err-btn-primary { background: rgba(255, 180, 168, 0.22); color: #fff; border-color: rgba(255, 180, 168, 0.75); }
.err .err-btn-primary:hover { background: rgba(255, 180, 168, 0.4); }
/* ---------- Cards ---------- */
#cards { display: none; width: 100vw; max-width: 100vw; height: 100%; position: relative; z-index: 1; overflow: hidden; }
/* ---------- In-game HUD / field layer ---------- */
.farm-foreground {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: clamp(112px, 16vh, 154px);
pointer-events: none;
z-index: 0;
opacity: 0.9;
overflow: visible;
transition: opacity 0.8s ease, filter 0.8s ease;
image-rendering: pixelated;
}
.farm-foreground::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 40px;
background: linear-gradient(to bottom, transparent, rgba(18, 22, 14, 0.24));
z-index: 3;
}
.farm-tile-grid {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100%;
overflow: hidden;
z-index: 1;
background:
linear-gradient(180deg,
rgba(104, 155, 68, 0) 0,
rgba(93, 148, 62, 0.22) 28%,
rgba(70, 128, 48, 0.72) 70%,
rgba(23, 63, 26, 0.95) 100%),
linear-gradient(90deg,
rgba(118, 174, 76, 0.22),
rgba(55, 112, 41, 0.12) 42%,
rgba(125, 178, 80, 0.18));
background-color: transparent;
image-rendering: pixelated;
-webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.08) 18px, rgba(0,0,0,0.58) 48px, #000 86px);
mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.08) 18px, rgba(0,0,0,0.58) 48px, #000 86px);
}
.farm-tile-grid::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 8% 100%, rgba(98, 156, 66, 0.22) 0 20%, transparent 22%),
radial-gradient(ellipse at 34% 100%, rgba(53, 112, 45, 0.16) 0 18%, transparent 20%),
radial-gradient(ellipse at 61% 100%, rgba(114, 169, 72, 0.18) 0 23%, transparent 25%),
radial-gradient(ellipse at 91% 100%, rgba(41, 96, 39, 0.18) 0 20%, transparent 22%);
opacity: 0.72;
pointer-events: none;
}
.farm-tile-grid::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 44px;
background:
radial-gradient(ellipse at 10% 100%, rgba(22, 62, 24, 0.38) 0 22%, transparent 24%),
radial-gradient(ellipse at 44% 100%, rgba(34, 80, 29, 0.32) 0 19%, transparent 21%),
radial-gradient(ellipse at 79% 100%, rgba(20, 58, 22, 0.36) 0 24%, transparent 26%),
linear-gradient(180deg, transparent, rgba(14, 34, 16, 0.42));
pointer-events: none;
}
body[data-season="summer"] .farm-tile-grid { filter: hue-rotate(-10deg) saturate(1.15) brightness(1.04); }
body[data-season="fall"] .farm-tile-grid { filter: hue-rotate(-55deg) saturate(1.05) brightness(0.95); }
body[data-season="winter"] .farm-tile-grid { filter: grayscale(0.82) brightness(1.32) sepia(0.05); }
.farm-tile,
.farm-prop {
position: absolute;
display: block;
background-repeat: no-repeat;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
}
.farm-prop {
z-index: 0;
opacity: 0.96;
filter: drop-shadow(3px 5px 0 rgba(0,0,0,0.22));
}
.farm-prop.back { opacity: 0.9; filter: saturate(0.9) drop-shadow(2px 4px 0 rgba(0,0,0,0.18)); }
.farm-prop.tree {
z-index: 2;
opacity: 0.96;
}
.farm-prop.tree-root {
z-index: 2;
opacity: 0.98;
filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.22));
}
.farm-prop.tree::after {
content: '';
position: absolute;
left: 18%;
right: 18%;
bottom: 0;
height: 10px;
background: rgba(28, 56, 24, 0.22);
border-radius: 50%;
z-index: -1;
}
.farm-prop.front,
.farm-tile.front { z-index: 2; }
.farm-tile.grass-base {
opacity: 0.72;
}
.farm-tile.grass-base-soft {
opacity: 0.45;
}
.farm-tile.grass-accent {
opacity: 0.86;
filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.2));
}
.farm-tile.grass-accent.soft {
opacity: 0.62;
filter: saturate(0.9) drop-shadow(1px 1px 0 rgba(0,0,0,0.14));
}
.farm-loose-grass {
position: absolute;
width: 22px;
height: 20px;
background-image: url('../stardew/loose/grass.png');
background-repeat: no-repeat;
background-size: 66px 240px;
background-position: var(--fg-bgx, 0) var(--fg-bgy, 0);
image-rendering: pixelated;
z-index: 2;
opacity: var(--fg-opacity, 0.86);
transform: translateX(-50%) scale(var(--fg-scale, 1.35));
transform-origin: bottom center;
filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.20));
}
.farm-loose-grass.soft {
opacity: var(--fg-opacity, 0.62);
filter: saturate(0.9) drop-shadow(1px 1px 0 rgba(0,0,0,0.14));
}
.farm-prop.sway,
.farm-tile.sway { animation: prop-sway 4.5s steps(3, end) infinite; transform-origin: 50% 100%; }
.farm-loose-grass.sway { animation: loose-grass-sway 4.5s steps(3, end) infinite; }
@keyframes prop-sway {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-2px) rotate(1deg); }
}
@keyframes loose-grass-sway {
0%, 100% { transform: translateX(-50%) translateY(0) scale(var(--fg-scale, 1.35)) rotate(0deg); }
50% { transform: translateX(-50%) translateY(-2px) scale(var(--fg-scale, 1.35)) rotate(1deg); }
}
body:not(.day-mode):not(.dawn-mode) .farm-foreground {
opacity: 0.42;
filter: saturate(0.7) brightness(0.72);
}
body.rain-mode .farm-foreground { opacity: 0.58; filter: saturate(0.7) brightness(0.78); }
body.snow-mode .farm-foreground {
opacity: 0.78;
filter: saturate(0.8) brightness(1.08);
}
body.share-mode .game-hud,
body.share-mode .world-switch,
body.share-mode .inventory-bar,
body.share-mode .progress-dots,
body.share-mode .reset-btn,
body.share-mode .nav-arrows,
body.share-mode .lang-toggle,
body.share-mode .debug-toggle {
opacity: 0 !important;
pointer-events: none !important;
}
body.share-mode #cards {
background:
linear-gradient(to bottom, rgba(255,255,255,0.03), rgba(62,36,21,0.08));
}
body.share-mode .card {
padding: 28px 18px 108px;
}
body.share-mode .card:not(.active) {
display: none !important;
}
body.share-mode .card.active .card-inner,
body.share-mode .card.active .poster {
width: min(438px, calc(100vw - 32px)) !important;
max-width: min(438px, calc(100vw - 32px)) !important;
max-height: none !important;
}
body.share-mode .card.active .poster {
animation: none !important;
transform: scale(0.86) !important;
transform-origin: center center;
}
body.share-mode .farm-foreground {
opacity: 0.96;
}
body.share-mode .poster-actions {
display: none !important;
}
body.share-exporting .share-toolbar {
display: none !important;
}
.game-hud {
position: fixed;
top: 18px;
left: 20px;
display: flex;
align-items: stretch;
gap: 8px;
z-index: 10;
pointer-events: none;
image-rendering: pixelated;
}
.hud-box {
min-height: 42px;
background: rgba(255, 245, 224, 0.96);
border: 3px solid var(--wood-dark);
box-shadow:
inset 0 0 0 2px var(--wood-light),
3px 3px 0 rgba(0,0,0,0.34);
color: var(--wood-dark);
}
.hud-date {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px 6px 8px;
}
.hud-season-icon {
width: 30px;
height: 30px;
display: grid;
place-items: center;
background: var(--gold);
border: 2px solid var(--wood-dark);
font-size: 18px;
}
.hud-date-main {
font-family: 'Pixelify Sans', monospace;
font-size: 17px;
line-height: 1;
font-weight: 700;
}
.hud-date-sub {
font-size: 10px;
color: var(--wood-mid);
margin-top: 4px;
}
.hud-money {
display: flex;
align-items: center;
gap: 6px;
padding: 0 12px;
font-family: 'Press Start 2P', monospace;
font-size: 11px;
color: var(--gold-dark);
white-space: nowrap;
}
.sdv-coin-icon {
display: inline-block;
width: 18px;
height: 18px;
background-image: url('../stardew/ui/cursors.png');
background-repeat: no-repeat;
background-size: 1408px 4512px;
background-position: -386px -746px;
image-rendering: pixelated;
flex: 0 0 auto;
}
.hud-season-sprite {
width: 26px;
height: 26px;
background-image: url('../stardew/maps/springobjects.png');
background-repeat: no-repeat;
background-size: 624px 1014px;
image-rendering: pixelated;
}
.hud-season-sprite[data-season="spring"] { background-position: -416px -416px; }
.hud-season-sprite[data-season="summer"] { background-position: -338px -442px; }
.hud-season-sprite[data-season="fall"] { background-position: -312px -286px; }
.hud-season-sprite[data-season="winter"] { background-position: -156px -442px; }
.hud-progress {
width: 118px;
padding: 6px 8px;
}
.hud-progress-top {
display: flex;
justify-content: space-between;
font-family: 'Press Start 2P', monospace;
font-size: 7px;
color: var(--wood-mid);
margin-bottom: 5px;
}
.hud-year-bar {
height: 10px;
background: var(--cream-shadow);
border: 2px solid var(--wood-dark);
position: relative;
overflow: hidden;
}
.hud-year-bar span {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background:
repeating-linear-gradient(90deg,
var(--gold) 0 8px,
var(--gold-dark) 8px 16px);
transition: width 0.8s ease;
}
.world-switch {
position: fixed;
top: 76px;
left: 20px;
display: flex;
flex-direction: column;
gap: 5px;
padding: 5px;
background: rgba(62, 36, 21, 0.82);
border: 3px solid var(--wood-dark);
box-shadow: inset 0 0 0 2px var(--wood-light), 3px 3px 0 rgba(0,0,0,0.25);
z-index: 10;
image-rendering: pixelated;
}
.switch-row {
display: flex;
gap: 4px;
}
.season-btn,
.weather-btn {
width: 30px;
height: 28px;
display: grid;
place-items: center;
background: var(--cream);
color: var(--wood-dark);
border: 2px solid var(--wood-dark);
box-shadow: inset 0 0 0 1px var(--paper);
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
}
.season-btn {
font-family: 'Press Start 2P', 'DotGothic16', monospace;
font-size: 9px;
color: var(--wood-mid);
}
.season-btn[data-season="spring"].active { background: #b8df7a; }
.season-btn[data-season="summer"].active { background: #ffd35f; }
.season-btn[data-season="fall"].active { background: #e59a45; }
.season-btn[data-season="winter"].active { background: #d6edf7; }
.weather-btn {
font-size: 16px;
}
.season-btn:hover,
.season-btn.active,
.weather-btn:hover,
.weather-btn.active {
transform: translateY(1px);
box-shadow: inset 0 0 0 1px #fff0a8;
}
.season-btn:hover { filter: brightness(1.08); }
.weather-btn:hover,
.weather-btn.active { background: var(--gold); }
.share-toolbar {
position: fixed;
left: 50%;
bottom: 18px;
z-index: 30;
display: none;
align-items: center;
gap: 8px;
transform: translateX(-50%);
padding: 7px;
background: rgba(62, 36, 21, 0.9);
border: 3px solid var(--wood-dark);
box-shadow: inset 0 0 0 2px var(--wood-light), 0 4px 0 rgba(0,0,0,0.3);
}
body.share-mode .share-toolbar {
display: flex;
}
.share-tool-btn {
min-height: 34px;
padding: 0 12px;
border: 2px solid var(--wood-dark);
background: var(--paper);
color: var(--wood-dark);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.38);
font-family: 'Pixelify Sans', 'Noto Sans SC', sans-serif;
font-size: 13px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.share-tool-btn.primary {
background: var(--gold);
}
.share-tool-btn:hover {
transform: translateY(1px);
filter: brightness(1.05);
}
.inventory-bar {
position: fixed;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
display: flex;
gap: 5px;
max-width: calc(100vw - 28px);
padding: 6px;
background: rgba(62, 36, 21, 0.9);
border: 4px solid var(--wood-dark);
box-shadow:
inset 0 0 0 2px var(--wood-light),
0 5px 0 rgba(0,0,0,0.42);
z-index: 9;
image-rendering: pixelated;
}
body.summary-active .inventory-bar {
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(80px);
}
body.summary-active .progress-dots {
opacity: 0;
pointer-events: none;
}
.inv-slot {
position: relative;
width: 42px;
height: 42px;
display: grid;
place-items: center;
background: var(--paper);
border: 3px solid var(--wood-dark);
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.32);
font-size: 24px;
}
.inv-slot.is-prime {
background: #ffe29a;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,0.36),
0 0 0 2px var(--gold-dark);
}
.inv-slot .qty {
position: absolute;
right: 2px;
bottom: 1px;
min-width: 16px;
padding: 1px 2px;
background: rgba(62, 36, 21, 0.92);
color: var(--cream);
font-family: 'Pixelify Sans', monospace;
font-size: 10px;
line-height: 1;
text-align: right;
}
.stardew-object-icon {
display: inline-block;
background-image: url('../stardew/maps/springobjects.png');
background-repeat: no-repeat;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
flex: 0 0 auto;
}
.card-emoji.stardew-object-icon,
.cell-emoji.stardew-object-icon {
font-size: 0 !important;
line-height: 0;
filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.18));
}
.card-emoji.stardew-object-icon {
margin: 10px auto;
}
.adv-stat-icon.stardew-object-icon,
.cc-room-icon.stardew-object-icon,
.cc-route-emoji.stardew-object-icon,
.poster-numbers .ico.stardew-object-icon,
.poster-cell .cell-emoji.stardew-object-icon {
font-size: 0 !important;
line-height: 0;
}
.adv-stat-icon.stardew-object-icon,
.cc-room-icon.stardew-object-icon {
justify-self: center;
align-self: center;
}
.inv-slot .stardew-object-icon {
width: 32px;
height: 32px;
}
.poster-numbers .ico.stardew-object-icon {
margin-top: 1px;
}
.inv-slot .inventory-npc-sprite {
width: 20px;
height: 40px;
display: block;
background-repeat: no-repeat;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.22));
}
.card {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px 96px;
opacity: 0;
pointer-events: none;
transform: translateY(24px) scale(0.96);
transition:
opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.card.active {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.card.exit-left {
opacity: 0;
transform: translateX(-40px) scale(0.96);
}
.card.exit-right {
opacity: 0;
transform: translateX(40px) scale(0.96);
}
.card.exit-up {
opacity: 0;
transform: translateY(-48px) scale(0.94) rotate(-1deg);
}
.card.exit-down {
opacity: 0;
transform: translateY(48px) scale(0.94) rotate(1deg);
}
.card.exit-spin {
opacity: 0;
transform: translateX(-28px) translateY(14px) rotate(-4deg) scale(0.92);
}
.card.exit-flip {
opacity: 0;
transform: perspective(700px) rotateY(18deg) translateX(28px) scale(0.94);
}
.card.active.enter-pop .card-inner,
.card.active.enter-pop .poster {
animation: card-enter-pop 0.58s cubic-bezier(0.22, 1, 0.36, 1) both, card-glow 5.5s ease-in-out 0.6s infinite;
}
.card.active.enter-tilt .card-inner,
.card.active.enter-tilt .poster {
animation: card-enter-tilt 0.62s cubic-bezier(0.22, 1, 0.36, 1) both, card-glow 5.5s ease-in-out 0.65s infinite;
}
.card.active.enter-drop .card-inner,
.card.active.enter-drop .poster {
animation: card-enter-drop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both, card-glow 5.5s ease-in-out 0.6s infinite;
}
body.snap-mode .card {
transition: none !important;
}
body.snap-mode .card.exit-left,
body.snap-mode .card.exit-right,
body.snap-mode .card.exit-up,
body.snap-mode .card.exit-down,
body.snap-mode .card.exit-spin,
body.snap-mode .card.exit-flip {
opacity: 0 !important;
display: none !important;
}
.card-inner {
transition: box-shadow 0.6s ease;
}
.card-inner {
width: 100%;
max-width: 440px;
/* M-B3 SDV 信封/羊皮纸：保留双层木框 (box-shadow inset)，
内部 cream 平铺色换成"老羊皮纸"——
渐变打底 + 8 个随机墨点 radial-gradient 模拟纸面老化斑点 +
四角 vignette 加深陈旧感。读取依然清晰，但有了实物质感 */
background:
radial-gradient(circle at 12% 18%, rgba(120, 80, 30, 0.07) 1px, transparent 2.5px),
radial-gradient(circle at 42% 8%, rgba(120, 80, 30, 0.06) 1.5px, transparent 3px),
radial-gradient(circle at 75% 25%, rgba(120, 80, 30, 0.08) 1px, transparent 2.5px),
radial-gradient(circle at 92% 60%, rgba(120, 80, 30, 0.05) 1.5px, transparent 3px),
radial-gradient(circle at 24% 48%, rgba(120, 80, 30, 0.07) 1px, transparent 2.5px),
radial-gradient(circle at 58% 78%, rgba(120, 80, 30, 0.08) 1.5px, transparent 3px),
radial-gradient(circle at 86% 92%, rgba(120, 80, 30, 0.06) 1px, transparent 2.5px),
radial-gradient(circle at 8% 88%, rgba(120, 80, 30, 0.07) 1.5px, transparent 3px),
radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(140, 90, 30, 0.18) 100%),
linear-gradient(135deg, #fbedcf 0%, #f4dba6 60%, #ecd08a 100%);
border: 4px solid var(--wood-dark);
box-shadow:
inset 0 0 0 4px #fbedcf,
inset 0 0 0 8px var(--wood-light),
inset 0 0 0 10px var(--wood-dark),
0 8px 0 rgba(0, 0, 0, 0.4),
0 16px 40px rgba(0, 0, 0, 0.5);
padding: 36px 30px 30px;
text-align: center;
color: var(--ink);
position: relative;
max-height: 88vh;
overflow: hidden;
}
.card-inner.has-cameo {
overflow: visible;
}
/* 信封蜡封：左上小红印（覆盖率小，不影响内容；只在常规卡片显示） */
.card-inner::before {
content: '';
position: absolute;
top: 14px;
left: 14px;
width: 14px;
height: 14px;
background:
radial-gradient(circle at 35% 35%, #e85858 0%, #8a1f1f 70%, #5a0e0e 100%);
border-radius: 50%;
box-shadow:
inset -1.5px -1.5px 0 rgba(0,0,0,0.32),
inset 1.5px 1.5px 0 rgba(255,255,255,0.25),
0 1px 0 rgba(0,0,0,0.35);
pointer-events: none;
z-index: 2;
/* SDV 木牌钉子般的微微突起感 */
}
/* The poster also wants positioned children (scanlines, sparkles) */
.poster { position: relative; }
.card-tag {
font-family: 'Press Start 2P', 'DotGothic16', 'Noto Sans SC', monospace;
font-size: 9px;
letter-spacing: 2px;
color: var(--wood-mid);
padding: 6px 14px;
background: var(--paper);
border: 2px solid var(--wood-dark);
display: inline-block;
margin-bottom: 18px;
}
.card-sub {
font-size: 14px;
color: var(--wood-mid);
margin-bottom: 8px;
font-family: 'Noto Sans SC', sans-serif;
}
.card-headline {
font-family: 'Pixelify Sans', monospace;
font-size: 38px;
font-weight: 700;
line-height: 1.2;
color: var(--wood-dark);
margin: 8px 0 14px;
text-shadow: 2px 2px 0 var(--cream-shadow);
}
.card-bignum {
font-family: 'Press Start 2P', monospace;
font-size: 52px;
line-height: 1.1;
font-weight: 400;
letter-spacing: 1px;
color: var(--gold-dark);
text-shadow: 4px 4px 0 var(--cream-shadow);
margin: 6px 0;
}
.card-emoji {
font-size: 64px;
margin: 10px 0;
display: block;
filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.15));
}
.card-body {
font-size: 14px;
line-height: 1.8;
color: var(--wood-mid);
margin-top: 12px;
}
.card-quote {
font-size: 13px;
line-height: 1.7;
color: var(--wood-mid);
margin-top: 18px;
padding: 12px 16px;
border-top: 2px dashed var(--wood-light);
font-style: italic;
overflow-wrap: anywhere;
}
.highlight {
color: var(--gold-dark);
font-family: 'Pixelify Sans', monospace;
font-weight: 700;
font-size: 1.15em;
}
/* ========== M-D1 NPC 客串头像 ==========
每张卡角落随机出现一个 SDV NPC 的像素小头像，hover 弹出 SDV 风格的点评。
用原版角色 spritesheet 的左上 16×16 cell（idle-down 第一帧的头部），
image-rendering: pixelated + scale(2.5) 放大保持像素颗粒 */
.npc-cameo {
position: absolute;
top: -4px;
right: 12px;
/* 44 = 4×11，对齐 Cubic 11 grid；比 40 略大让头像可读性更好 */
width: 44px;
height: 44px;
z-index: 4;
cursor: help;
pointer-events: auto;
/* 木牌底座：羊皮纸色背景 + 双层描边 + 木纹竖线，跟 .card-tag / 徽章视觉同源 */
background:
repeating-linear-gradient(180deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 11px),
linear-gradient(180deg, #fbedcf 0%, #f4dba6 100%);
border: 2px solid var(--wood-dark);
box-shadow:
inset 0 0 0 1px var(--wood-light),
2px 3px 0 rgba(0, 0, 0, 0.32);
transition: transform 0.18s ease, box-shadow 0.18s ease;
/* 静态旋转放进 keyframes，避免 transform 被 animation 覆盖；
两个变体对应左右两侧——视觉上像 SDV 木牌挂在不同墙上 */
animation: npc-cameo-bob-right 3.6s ease-in-out infinite;
}
.npc-cameo.cameo-left {
animation: npc-cameo-bob-left 3.6s ease-in-out infinite;
}
.npc-cameo:hover {
/* hover 时 animation paused + transform 接管，回正 + 弹起 + 放大 */
transform: rotate(0) translateY(-3px) scale(1.1);
box-shadow:
inset 0 0 0 1px var(--gold),
4px 6px 0 rgba(0, 0, 0, 0.36);
}
.npc-cameo .npc-cameo-sprite {
/* 显示原图 top-left 16×20 头部区域，避免只裁 16×16 时发型/脸被压掉。
原图 64px 宽 × 2.2 = 140.8px；16px 帧宽显示为约 35px，再居中放进 44px 木牌。
background-image 由 JS 注入（每个 cameo 对应不同 NPC） */
position: absolute;
left: 50%;
top: -2px;
width: 38px;
height: 44px;
transform: translateX(-50%);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 154px auto;
image-rendering: pixelated;
image-rendering: crisp-edges;
pointer-events: none;
}
@keyframes npc-cameo-bob-right {
0%, 100% { transform: rotate(-1.5deg) translateY(0); }
50% { transform: rotate(-1.5deg) translateY(-2px); }
}
@keyframes npc-cameo-bob-left {
0%, 100% { transform: rotate(1.5deg) translateY(0); }
50% { transform: rotate(1.5deg) translateY(-2px); }
}
.npc-cameo:hover { animation-play-state: paused; }
/* 角落小心电图气泡：hover 时浮现，自带尾巴指向头像
——做成 cameo 的子元素，定位相对 cameo 自己，规避 .card-inner overflow:hidden 的剪切 */
.npc-cameo .npc-cameo-tip {
position: absolute;
top: calc(100% + 8px);
right: -6px;
width: max-content;
max-width: 200px;
padding: 8px 12px;
background:
linear-gradient(180deg, #fff7d8 0%, #f4dba6 100%);
border: 2px solid var(--wood-dark);
box-shadow:
inset 0 0 0 1px #fbedcf,
0 4px 0 rgba(0, 0, 0, 0.32);
color: var(--wood-dark);
font-family: 'Cubic 11', 'Noto Sans SC', 'PingFang SC', sans-serif;
-webkit-font-smoothing: none;
font-smooth: never;
/* 11px = Cubic 11 native grid，line-height 11×1.45=≈16 防字符顶到一起 */
font-size: 11px;
line-height: 1.55;
letter-spacing: 0.5px;
text-align: left;
opacity: 0;
pointer-events: none;
transform: translateY(-4px) scale(0.94);
transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 5;
}
html[lang="en"] .npc-cameo .npc-cameo-tip {
font-family: 'Press Start 2P', 'Pixelify Sans', monospace;
/* 8px = Press Start 2P native */
font-size: 8px;
line-height: 1.75;
letter-spacing: 0.5px;
}
.npc-cameo .npc-cameo-tip::before {
/* 尾巴：朝头像方向的小三角，深色外圈 */
content: '';
position: absolute;
top: -8px;
right: 14px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 8px solid var(--wood-dark);
}
.npc-cameo .npc-cameo-tip::after {
content: '';
position: absolute;
top: -5px;
right: 16px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid #fff7d8;
}
.npc-cameo .npc-cameo-tip .npc-cameo-name {
display: block;
font-weight: 400;
color: var(--gold-dark);
font-size: 11px;
letter-spacing: 1px;
margin-bottom: 2px;
}
html[lang="en"] .npc-cameo .npc-cameo-tip .npc-cameo-name {
font-size: 8px;
letter-spacing: 1.5px;
}
.npc-cameo:hover .npc-cameo-tip,
.npc-cameo:focus .npc-cameo-tip,
.npc-cameo.cameo-pinned .npc-cameo-tip {
opacity: 1;
transform: translateY(0) scale(1);
}
/* 卡片有左上蜡封，所以默认把 cameo 放右上不冲突；个别卡片可改 left 类 */
.npc-cameo.cameo-left {
left: 12px;
right: auto;
}
.npc-cameo.cameo-left .npc-cameo-tip {
left: -6px;
right: auto;
}
.npc-cameo.cameo-left .npc-cameo-tip::before,
.npc-cameo.cameo-left .npc-cameo-tip::after {
right: auto;
}
.npc-cameo.cameo-left .npc-cameo-tip::before { left: 14px; }
.npc-cameo.cameo-left .npc-cameo-tip::after { left: 16px; }
/* 截图导出/分享模式藏起来，避免污染海报 */
body.share-mode .npc-cameo,
body.share-mode .npc-cameo-tip { display: none; }
@media (prefers-reduced-motion: reduce) {
.npc-cameo { animation: none; }
}
/* NPC Portrait */
.npc-portrait-wrap {
position: relative;
width: 140px;
height: 140px;
margin: 12px auto 6px;
}
.npc-portrait-frame {
width: 100%;
height: 100%;
border: 4px solid var(--wood-dark);
box-shadow:
inset 0 0 0 3px rgba(255, 255, 255, 0.4),
inset 0 0 0 4px var(--wood-dark),
4px 4px 0 rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
background-color: var(--paper);
background-image:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25) 0%, transparent 50%),
repeating-linear-gradient(45deg,
transparent 0, transparent 6px,
rgba(0,0,0,0.08) 6px, rgba(0,0,0,0.08) 12px);
}
.npc-portrait-frame img {
position: absolute;
left: 0;
top: 0;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 1;
}
.npc-portrait-frame img.loaded { opacity: 1; }
.npc-portrait-frame .fallback-emoji {
font-size: 78px;
line-height: 1;
filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.2));
z-index: 0;
transition: opacity 0.2s ease;
}
.npc-portrait-frame.has-portrait .fallback-emoji {
opacity: 0;
}
.npc-portrait-frame .corner-tl,
.npc-portrait-frame .corner-br {
position: absolute;
width: 10px;
height: 10px;
background: var(--gold);
z-index: 2;
}
.npc-portrait-frame .corner-tl { top: 4px; left: 4px; }
.npc-portrait-frame .corner-br { bottom: 4px; right: 4px; }
.npc-badge {
position: absolute;
right: -10px;
bottom: -8px;
width: 36px;
height: 36px;
background:
linear-gradient(135deg, rgba(255,255,255,0.16), transparent 42%),
linear-gradient(180deg, var(--npc-color-soft, rgba(245,201,63,0.32)), rgba(62,36,21,0.08));
border: 3px solid var(--wood-dark);
box-shadow:
inset 0 0 0 2px var(--npc-color, var(--gold)),
inset -3px -4px 0 rgba(62,36,21,0.18),
3px 3px 0 rgba(0,0,0,0.34),
0 0 0 2px rgba(255,245,224,0.35);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
border-radius: 8px;
z-index: 3;
transform: rotate(5deg);
}
/* ========== Couple scene (farmer × NPC holding hands) ========== */
.couple-figures {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 14px;
--skin: #f4caa8;
--hair: #6b4423;
--eye: #2c1810;
--shirt: #6b8acb;
--pants: #46406b;
--shoe: #3a2a1a;
}
.figure {
position: relative;
width: 40px;
height: 76px;
--hair: #6b4423;
--skin: #f4caa8;
--eye: #2c1810;
--shirt: #6b8acb;
--pants: #46406b;
--shoe: #3a2a1a;
}
.figure.has-npc-head > .fig-hair,
.figure.has-npc-head > .fig-face {
display: none;
}
/* Pixel hair: chunky stepped block */
.fig-hair {
position: absolute;
top: 0; left: 4px;
width: 32px; height: 14px;
background: var(--hair);
box-shadow:
inset 0 -2px 0 rgba(0,0,0,0.25),
2px 0 0 var(--hair),
-2px 0 0 var(--hair);
clip-path: polygon(
6% 100%, 6% 30%, 18% 30%, 18% 12%,
82% 12%, 82% 30%, 94% 30%, 94% 100%);
}
.fig-face {
position: absolute;
top: 12px; left: 8px;
width: 24px; height: 14px;
background: var(--skin);
box-shadow:
inset -2px -1px 0 rgba(0,0,0,0.12),
inset 0 1px 0 rgba(255,255,255,0.2);
}
.fig-eye {
position: absolute;
top: 5px;
width: 3px;
height: 3px;
background: var(--eye);
}
.fig-eye.left { left: 4px; }
.fig-eye.right { right: 4px; }
.fig-shirt {
position: absolute;
top: 26px; left: 4px;
width: 32px; height: 26px;
background: var(--shirt);
box-shadow:
inset -2px -2px 0 rgba(0,0,0,0.18),
inset 0 2px 0 rgba(255,255,255,0.18);
}
/* V-neck collar — show skin underneath */
.fig-shirt::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid var(--skin);
}
.fig-pants {
position: absolute;
top: 52px; left: 4px;
width: 32px; height: 18px;
display: flex;
gap: 2px;
justify-content: space-between;
}
.fig-pants .leg {
flex: 1;
background: var(--pants);
box-shadow: inset -1px -2px 0 rgba(0,0,0,0.25);
position: relative;
}
.fig-pants .leg::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 4px;
background: var(--shoe);
}
/* Outstretched arm — the one that does the holding hands */
.fig-arm-right,
.fig-arm-left {
position: absolute;
top: 30px;
width: 12px;
height: 8px;
background: var(--shirt);
box-shadow: inset -1px -1px 0 rgba(0,0,0,0.18);
}
.fig-arm-right { right: -8px; }
.fig-arm-left { left: -8px; }
.fig-arm-right::after,
.fig-arm-left::after {
content: '';
position: absolute;
width: 5px; height: 5px;
background: var(--skin);
top: 50%;
transform: translateY(-50%);
}
.fig-arm-right::after { right: -4px; }
.fig-arm-left::after { left: -4px; }
/* The link between hands (a tiny gold sparkle line) */
.couple-hand-link {
position: absolute;
bottom: 38px;
left: 50%;
transform: translateX(-50%);
width: 22px;
height: 4px;
background:
linear-gradient(90deg,
transparent 0%, var(--gold) 40%, var(--gold) 60%, transparent 100%);
z-index: 1;
pointer-events: none;
filter: drop-shadow(0 0 2px rgba(245,201,63,0.6));
}
/* NPC head replaces the face/hair stack with the actual portrait first cell */
.figure-npc .npc-mini-head {
position: absolute;
top: -2px; left: 4px;
width: 32px; height: 30px;
border: 1px solid rgba(0,0,0,0.4);
background: var(--paper);
overflow: hidden;
}
.figure-npc .npc-mini-head .couple-npc-emoji {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
z-index: 0;
}
.figure-npc .npc-mini-head img {
position: absolute;
left: 0; top: 0;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 1;
}
.figure-npc .npc-mini-head img.loaded { opacity: 1; }
.figure-npc .npc-mini-head.has-portrait .couple-npc-emoji { opacity: 0; }
/* Walking bounce — alternate up/down to feel alive */
@keyframes fig-bounce-a {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
@keyframes fig-bounce-b {
0%, 100% { transform: translateY(-2px); }
50% { transform: translateY(0); }
}
.figure-farmer { animation: fig-bounce-a 1.4s steps(2, end) infinite; }
.figure-npc { animation: fig-bounce-b 1.4s steps(2, end) infinite; }
.figure.stardew-actor {
width: 48px;
height: 96px;
background: transparent;
overflow: visible;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.24));
}
.figure.stardew-actor > .fig-hair,
.figure.stardew-actor > .fig-face,
.figure.stardew-actor > .fig-shirt,
.figure.stardew-actor > .fig-pants,
.figure.stardew-actor > .fig-arm-right,
.figure.stardew-actor > .fig-arm-left,
.figure.stardew-actor > .npc-mini-head {
display: none !important;
}
.stardew-character-sprite,
.farmer-sprite-canvas {
position: absolute;
left: 0;
bottom: 0;
width: 48px;
height: 96px;
display: block;
background-repeat: no-repeat;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
}
.stardew-character-sprite {
background-position: 0 0;
}
/* Hearts bubble: 4 hearts float up with stagger */
.couple-hearts {
position: absolute;
left: 50%;
bottom: 60px;
transform: translateX(-50%);
width: 80px;
height: 50px;
pointer-events: none;
}
@keyframes heart-float {
0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
15% { opacity: 1; }
100% { transform: translate(var(--hdx, 0), -50px) scale(1.1); opacity: 0; }
}
.float-heart {
position: absolute;
bottom: 0;
width: 12px;
height: 11px;
background: var(--heart);
clip-path: polygon(
50% 100%, 0% 50%, 0% 25%, 15% 10%, 30% 10%,
50% 30%, 70% 10%, 85% 10%, 100% 25%, 100% 50%);
box-shadow:
inset -1px -1px 0 var(--heart-dark),
0 0 4px rgba(214, 63, 63, 0.6);
opacity: 0;
animation: heart-float 2.6s ease-in infinite;
}
.float-heart.h1 { left: 18px; --hdx: -8px; animation-delay: 0s; }
.float-heart.h2 { left: 36px; --hdx: 6px; animation-delay: 0.65s; }
.float-heart.h3 { left: 50px; --hdx: -10px; animation-delay: 1.3s; }
.float-heart.h4 { left: 26px; --hdx: 12px; animation-delay: 1.95s; }
.couple-heart-bubble {
position: absolute;
left: 244px;
top: 6px;
transform: none;
width: 44px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
background: var(--cream);
border: 3px solid var(--wood-dark);
box-shadow:
inset 0 0 0 2px var(--paper),
3px 3px 0 rgba(0,0,0,0.22);
z-index: 6;
}
.couple-heart-bubble::after {
content: '';
position: absolute;
left: 16px;
bottom: -9px;
width: 12px;
height: 12px;
background: var(--cream);
border-left: 3px solid var(--wood-dark);
border-bottom: 3px solid var(--wood-dark);
transform: rotate(-45deg);
}
.bubble-heart {
position: relative;
width: 17px;
height: 16px;
background: var(--heart);
clip-path: polygon(50% 100%, 0% 50%, 0% 22%, 16% 6%, 34% 6%, 50% 24%, 66% 6%, 84% 6%, 100% 22%, 100% 50%);
box-shadow: inset -2px -2px 0 var(--heart-dark);
animation: heartBeat 1.2s ease-in-out infinite;
z-index: 1;
}
/* Mobile tweaks for the couple scene */
@media (max-width: 540px) {
.couple-scene { width: 200px; height: 100px; }
}
/* ========== Weather overlays (manual visual setting, no network calls) ========== */
/* Rainy mode: dim the sky, soften the sun, add diagonal pixel rain */
body.rain-mode {
background:
linear-gradient(to bottom, #2d354d 0%, #39455f 38%, #526176 68%, #61716f 100%) !important;
transition: background 1.2s ease;
}
body.rain-mode .pixel-sun,
body.rain-mode .pixel-moon { opacity: 0 !important; }
body.rain-mode .pixel-cloud { opacity: 0.85 !important; }
body.rain-mode .pixel-star { opacity: 0.06 !important; }
body.rain-mode .leaf,
body.rain-mode .season-leaf,
body.rain-mode .firefly,
body.rain-mode .butterfly { display: none !important; }
/* ===== M-D2 SDV 道具掉落氛围层 =====
卡片页背景慢动作飘落星之果实/钻石/胡萝卜/铱锭，强化"农场年度结算"主题。
z-index 0 在 sky 之上、卡片之下；landing/share/snap 模式下隐藏避免抢戏 */
.farm-item-layer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
body.landing-mode .farm-item-layer,
body.share-mode .farm-item-layer,
body.snap-mode .farm-item-layer { display: none; }
.farm-item {
position: absolute;
top: -8vh;
background-repeat: no-repeat;
background-size: 100% 100%;
image-rendering: pixelated;
opacity: 0;
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.22));
animation: farm-item-drift var(--item-dur, 32s) linear infinite;
animation-delay: var(--item-delay, 0s);
will-change: transform, opacity;
}
@keyframes farm-item-drift {
0% { transform: translateY(0) rotate(0deg) scale(var(--item-scale, 1)); opacity: 0; }
8% { opacity: 0.7; }
92% { opacity: 0.7; }
100% { transform: translateY(125vh) rotate(var(--item-spin, 360deg)) scale(var(--item-scale, 1)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.farm-item { animation: none !important; opacity: 0; }
}
/* Snowy mode */
body.snow-mode {
background:
linear-gradient(to bottom, #b5c2d6 0%, #c8d3e0 60%, #dde4eb 100%) !important;
}
body.snow-mode .pixel-sun { opacity: 0.25 !important; }
body.snow-mode .leaf,
body.snow-mode .season-leaf { opacity: 0 !important; }
/* ===== M-E 农夫职业测试 =====
一张独立结果卡：6 维（采集/牧场/矿工/渔夫/烹饪/社交）打分→ 选最高那一型，
徽章用 SDV 题字木牌 + 大头像，下面 6 行 mini-bar 显示原始分布，
一句吐槽 + 二维码可分享。 */
/* ROADMAP 1.1.C：学习手册卡列表 */
.guide-list {
margin: 14px 0 6px;
display: flex;
flex-direction: column;
gap: 8px;
max-height: 360px;
overflow-y: auto;
padding-right: 4px;
text-align: left;
}
.guide-row {
background: var(--paper);
border: 2px solid var(--wood-dark);
padding: 10px 12px;
display: flex;
gap: 10px;
align-items: flex-start;
}
.guide-row .guide-icon {
font-size: 20px;
line-height: 1;
flex-shrink: 0;
margin-top: 2px;
}
.guide-row .guide-text { flex: 1; line-height: 1.5; }
.guide-row .guide-name {
font-family: 'Pixelify Sans', 'Press Start 2P', monospace;
font-size: 14px;
color: var(--wood-dark);
font-weight: 700;
margin-bottom: 3px;
}
.guide-row .guide-hint { font-size: 11px; color: var(--wood-mid); }
.guide-empty {
text-align: center;
padding: 22px 12px;
font-size: 13px;
color: var(--wood-mid);
line-height: 1.7;
}
.guide-empty .guide-empty-emoji { font-size: 32px; display: block; margin-bottom: 6px; }
.profession-card .card-inner {
/* 给徽章留呼吸空间，把内容稍微往上推 */
padding-top: 26px;
padding-bottom: 22px;
}
.prof-badge-wrap {
position: relative;
margin: 6px auto 12px;
width: 168px;
height: 168px;
/* SDV 木牌印章风：四角钉子高光 + 11px 步长竖向木纹 + 主色衬底 + 左上斜角光泽
木纹用 repeating-linear-gradient 做成 11px grid 节奏，跟 Cubic 11 字号同源 */
background:
radial-gradient(circle at 14px 14px, rgba(255, 247, 223, 0.55) 0%, transparent 5px),
radial-gradient(circle at calc(100% - 14px) 14px, rgba(255, 247, 223, 0.55) 0%, transparent 5px),
radial-gradient(circle at 14px calc(100% - 14px), rgba(255, 247, 223, 0.55) 0%, transparent 5px),
radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), rgba(255, 247, 223, 0.55) 0%, transparent 5px),
radial-gradient(circle at 22% 18%, rgba(255, 247, 215, 0.42) 0%, transparent 55%),
repeating-linear-gradient(180deg, rgba(0,0,0,0.07) 0 1px, transparent 1px 11px),
linear-gradient(135deg, var(--prof-color, #c98a3a) 0%, var(--prof-color-dark, #7a4c1a) 100%);
border: 4px solid var(--wood-dark);
box-shadow:
inset 0 0 0 3px #fbedcf,
inset 0 0 0 6px var(--wood-dark),
6px 8px 0 rgba(0, 0, 0, 0.36),
0 16px 32px rgba(0, 0, 0, 0.34);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
transform: rotate(-2deg);
image-rendering: pixelated;
/* 进卡时的小弹跳，再加一个非常缓慢的旋转晃，让徽章像挂在风里 */
animation: prof-badge-sway 5.8s ease-in-out infinite;
}
@keyframes prof-badge-sway {
0%, 100% { transform: rotate(-2deg) translateY(0); }
50% { transform: rotate(2deg) translateY(-3px); }
}
.prof-badge-icon {
/* 用单个汉字"印"当 badge 图标——88px = 11×8，Cubic 11 native grid，纯方块像素
比系统 emoji（彩色 + anti-alias）更贴合 SDV 整体调性。
英文模式下同样显示这枚"汉字印章"，反而更有 Stardew 那种东方田园感 */
font-family: 'Cubic 11', 'Press Start 2P', 'Noto Sans SC', sans-serif;
-webkit-font-smoothing: none;
font-smooth: never;
font-size: 88px;
line-height: 1;
color: #fff7df;
margin-bottom: 4px;
letter-spacing: 0;
text-shadow:
3px 3px 0 #2a1606,
-1px 0 0 #2a1606,
0 -1px 0 #2a1606,
0 4px 0 #5a2f12;
}
.prof-badge-label {
font-family: 'Cubic 11', 'Press Start 2P', 'Noto Sans SC', sans-serif;
-webkit-font-smoothing: none;
font-smooth: never;
color: #fff7df;
font-size: 22px;
letter-spacing: 4px;
text-shadow:
2px 2px 0 #2a1606,
-1px 0 0 #2a1606,
0 -1px 0 #2a1606,
0 3px 0 #5a2f12;
}
html[lang="en"] .prof-badge-label {
font-family: 'Press Start 2P', 'Pixelify Sans', monospace;
/* Press Start 2P native 8px grid，16px = 2× 倍数刚好对齐 */
font-size: 16px;
letter-spacing: 2px;
}
.prof-badge-sub {
font-family: 'Press Start 2P', 'Pixelify Sans', monospace;
/* 8px = Press Start 2P native */
font-size: 8px;
letter-spacing: 2px;
color: rgba(255, 247, 223, 0.86);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}
/* 徽章四角的小钉子（跟木牌呼应） */
.prof-badge-wrap::before,
.prof-badge-wrap::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 35%, #f9d27a 0%, #6e3f15 70%, #2a1606 100%);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.prof-badge-wrap::before { top: 8px; left: 8px; }
.prof-badge-wrap::after { bottom: 8px; right: 8px; }
/* 6 维 mini bar */
.prof-bars {
display: grid;
grid-template-columns: minmax(54px, auto) 1fr 28px;
column-gap: 8px;
row-gap: 6px;
margin: 8px 6px 12px;
padding: 10px 12px;
/* 跟徽章同款 11px 木纹 + 羊皮纸底，让 6 条 bar 像贴在木板上 */
background:
repeating-linear-gradient(180deg, rgba(80,45,15,0.05) 0 1px, transparent 1px 11px),
linear-gradient(180deg, rgba(255, 247, 215, 0.78) 0%, rgba(244, 219, 166, 0.62) 100%);
border: 2px solid var(--wood-dark);
box-shadow:
inset 0 0 0 1px #fbedcf,
0 2px 0 rgba(0, 0, 0, 0.18);
}
.prof-bar-label {
font-family: 'Cubic 11', 'Noto Sans SC', sans-serif;
-webkit-font-smoothing: none;
font-smooth: never;
/* 11px = Cubic 11 native grid */
font-size: 11px;
color: var(--wood-dark);
text-align: left;
align-self: center;
letter-spacing: 1px;
}
html[lang="en"] .prof-bar-label {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
letter-spacing: 1px;
}
.prof-bar-track {
position: relative;
height: 10px;
background: #e6d2a4;
border: 1.5px solid var(--wood-dark);
align-self: center;
overflow: hidden;
}
.prof-bar-fill {
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: linear-gradient(180deg, var(--prof-bar-color, var(--gold)) 0%, var(--prof-bar-color-dark, var(--gold-dark)) 100%);
transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.prof-bar-fill.is-top {
box-shadow:
inset 0 -2px 0 rgba(0, 0, 0, 0.18),
inset 0 0 0 1px rgba(255, 247, 215, 0.55);
background: linear-gradient(180deg, #ffcc4d 0%, #c98a3a 100%);
animation: prof-bar-glow 2.2s ease-in-out infinite;
}
@keyframes prof-bar-glow {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.18); }
}
.prof-bar-num {
font-family: 'Cubic 11', 'Press Start 2P', monospace;
-webkit-font-smoothing: none;
font-smooth: never;
/* 11px Cubic 11 数字，跟 label 同步 */
font-size: 11px;
color: var(--wood-dark);
text-align: right;
align-self: center;
}
.prof-quote {
font-family: 'Cubic 11', 'Noto Sans SC', sans-serif;
-webkit-font-smoothing: none;
font-smooth: never;
/* 11px Cubic 11 native；line-height 拉到 1.7 给中文字字间距留口气 */
font-size: 11px;
line-height: 1.7;
color: var(--wood-dark);
margin: 8px 4px 12px;
padding: 8px 10px;
background: var(--paper);
border-left: 4px solid var(--prof-color, var(--gold-dark));
text-align: left;
letter-spacing: 0.5px;
}
html[lang="en"] .prof-quote {
font-family: 'Pixelify Sans', monospace;
font-size: 11px;
line-height: 1.5;
}
/* 分享行：QR code + 复制链接按钮 */
.prof-share {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
/* 跟 .prof-bars 同款木板纹，整张卡视觉同源 */
background:
repeating-linear-gradient(180deg, rgba(80,45,15,0.05) 0 1px, transparent 1px 11px),
linear-gradient(180deg, rgba(255, 247, 215, 0.78) 0%, rgba(244, 219, 166, 0.62) 100%);
border: 2px solid var(--wood-dark);
box-shadow:
inset 0 0 0 1px #fbedcf,
0 2px 0 rgba(0, 0, 0, 0.18);
}
.prof-share-qr {
flex: 0 0 auto;
width: 64px;
height: 64px;
background: #fff;
border: 1.5px solid var(--wood-dark);
display: flex;
align-items: center;
justify-content: center;
image-rendering: pixelated;
}
.prof-share-qr img,
.prof-share-qr canvas {
width: 100%;
height: 100%;
image-rendering: pixelated;
image-rendering: crisp-edges;
display: block;
}
.prof-share-info {
flex: 1 1 auto;
text-align: left;
font-family: 'Cubic 11', 'Noto Sans SC', sans-serif;
-webkit-font-smoothing: none;
font-smooth: never;
font-size: 11px;
color: var(--wood-dark);
line-height: 1.5;
min-width: 0;
}
html[lang="en"] .prof-share-info {
font-family: 'Pixelify Sans', monospace;
font-size: 10px;
}
.prof-share-info .prof-share-hint {
display: block;
color: var(--wood-mid);
/* 11px = Cubic 11 native */
font-size: 11px;
margin-bottom: 4px;
letter-spacing: 0.5px;
}
html[lang="en"] .prof-share-info .prof-share-hint { font-size: 8px; }
.prof-share-copy {
display: inline-block;
margin-top: 2px;
padding: 4px 10px;
background: var(--wood-dark);
color: #fff7df;
/* 中文按钮用 Cubic 11 才不会跟 hint 字体打架；英文模式下面再覆写成 Press Start 2P */
font-family: 'Cubic 11', 'Press Start 2P', 'Noto Sans SC', sans-serif;
-webkit-font-smoothing: none;
font-smooth: never;
/* 11px Cubic 11 native */
font-size: 11px;
letter-spacing: 1px;
border: 0;
box-shadow:
inset 0 0 0 1px #fbedcf,
0 2px 0 rgba(0, 0, 0, 0.32);
cursor: pointer;
transition: transform 0.12s ease;
}
html[lang="en"] .prof-share-copy {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
letter-spacing: 1px;
}
.prof-share-copy:hover { transform: translateY(-1px); }
.prof-share-copy:active { transform: translateY(1px); box-shadow: inset 0 0 0 1px #fbedcf, 0 0 0 rgba(0, 0, 0, 0.32); }
.prof-share-copy.copied { background: #4f7c2a; }
@media (prefers-reduced-motion: reduce) {
.prof-badge-wrap, .prof-bar-fill { animation: none; }
}
/* 小屏：徽章缩到 132×132，icon 字号同步从 88 → 66（11×6），让卡片别撑爆 88vh */
@media (max-width: 540px) {
.prof-badge-wrap { width: 132px; height: 132px; }
.prof-badge-icon { font-size: 66px; }
html[lang="zh-CN"] .prof-badge-label { font-size: 22px; letter-spacing: 3px; }
.prof-bars { padding: 8px 10px; }
.prof-share-qr { width: 56px; height: 56px; }
}
/* ===== Phase 2.1.c — 冒险者档案 RPG sheet =====
星露谷"冒险者协会"风格的羊皮纸名牌：双层木边 + 黄铜铆钉 +
深棕墨水印章。每行 stat 是一条"羊皮纸条带"，左 icon 右值，
下方斜体小字是 NPC 吐槽。整张卡视觉同源于 .card-tag/.prof-bars 木板纹 */
.card-inner.adv-sheet-card {
/* 内边收紧给 scroll 留位置 */
padding: 20px 20px 16px;
}
.adv-sheet-scroll {
position: relative;
margin: 8px auto 10px;
padding: 12px 12px 50px; /* 底部留 50px 给印章 */
background:
/* 老羊皮纸：四角阴影 + 中部高光 + 细密噪点 */
radial-gradient(circle at 22% 14%, rgba(120, 80, 30, 0.10) 1px, transparent 2.6px),
radial-gradient(circle at 78% 36%, rgba(120, 80, 30, 0.08) 1.5px, transparent 3.2px),
radial-gradient(circle at 36% 68%, rgba(120, 80, 30, 0.07) 1px, transparent 2.6px),
radial-gradient(circle at 84% 84%, rgba(120, 80, 30, 0.09) 1.5px, transparent 3.2px),
radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(110, 70, 20, 0.22) 100%),
linear-gradient(160deg, #f7e2b1 0%, #efd494 55%, #e6c478 100%);
border: 3px solid var(--wood-dark);
box-shadow:
inset 0 0 0 2px rgba(255, 240, 200, 0.55),
inset 0 0 0 4px var(--wood-mid),
3px 5px 0 rgba(0,0,0,0.35);
image-rendering: pixelated;
}
.adv-sheet-rivet {
position: absolute;
width: 10px;
height: 10px;
background:
radial-gradient(circle at 35% 35%, #f3c95a 0%, #a06b1f 70%, #4a2a0a 100%);
border-radius: 50%;
box-shadow:
inset -1px -1px 0 rgba(0,0,0,0.35),
inset 1px 1px 0 rgba(255, 230, 160, 0.4),
0 1px 0 rgba(0,0,0,0.4);
z-index: 3;
}
.adv-sheet-rivet-tl { top: 6px; left: 6px; }
.adv-sheet-rivet-tr { top: 6px; right: 6px; }
.adv-sheet-rivet-bl { bottom: 6px; left: 6px; }
.adv-sheet-rivet-br { bottom: 6px; right: 6px; }
.adv-sheet-title {
text-align: center;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 2px dashed rgba(110, 70, 20, 0.45);
}
.adv-sheet-title-text {
display: block;
font-family: 'Cubic 11', 'Press Start 2P', 'Noto Sans SC', monospace;
font-size: 16px;
font-weight: 700;
color: #4a2a0a;
letter-spacing: 4px;
-webkit-font-smoothing: none;
font-smooth: never;
text-shadow: 1px 1px 0 rgba(255, 240, 200, 0.7);
}
html[lang="en"] .adv-sheet-title-text {
font-family: 'Press Start 2P', 'Cubic 11', monospace;
font-size: 12px;
letter-spacing: 3px;
}
.adv-sheet-title-sub {
display: block;
font-family: 'Press Start 2P', monospace;
font-size: 7px;
color: rgba(110, 70, 20, 0.7);
letter-spacing: 2px;
margin-top: 4px;
}
.adv-sheet-rows {
display: grid;
grid-template-columns: 1fr;
gap: 5px;
}
.adv-stat-row {
display: grid;
grid-template-columns: 26px 1fr auto;
align-items: center;
column-gap: 8px;
padding: 5px 8px;
background: rgba(255, 250, 220, 0.55);
border: 1.5px solid rgba(110, 70, 20, 0.4);
border-left: 4px solid var(--gold-dark);
box-shadow: 1px 2px 0 rgba(0,0,0,0.12);
position: relative;
}
.adv-stat-row.tier-low { border-left-color: #a08868; }
.adv-stat-row.tier-mid { border-left-color: var(--gold-dark); }
.adv-stat-row.tier-high { border-left-color: #c4622d; }
.adv-stat-row.tier-legend { border-left-color: #8a3fc0; box-shadow: 1px 2px 0 rgba(0,0,0,0.12), 0 0 6px rgba(170, 80, 220, 0.4); }
.adv-stat-icon {
font-size: 18px;
line-height: 1;
text-align: center;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.18));
}
.adv-stat-mid {
display: flex;
flex-direction: column;
text-align: left;
min-width: 0;
}
.adv-stat-label {
font-family: 'Cubic 11', 'Noto Sans SC', sans-serif;
font-size: 12px;
font-weight: 700;
color: var(--wood-dark);
-webkit-font-smoothing: none;
font-smooth: never;
letter-spacing: 1px;
}
html[lang="en"] .adv-stat-label {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
letter-spacing: 1px;
}
.adv-stat-quote {
font-family: 'Noto Sans SC', sans-serif;
font-size: 10px;
color: var(--wood-mid);
font-style: italic;
margin-top: 1px;
line-height: 1.35;
}
.adv-stat-value {
font-family: 'Press Start 2P', monospace;
font-size: 15px;
color: var(--gold-dark);
text-shadow: 2px 2px 0 rgba(255, 240, 200, 0.7);
min-width: 50px;
text-align: right;
letter-spacing: 1px;
}
.adv-sheet-stamp {
position: absolute;
bottom: 8px;
right: 12px;
width: 46px;
height: 46px;
border: 3px solid #8a1f1f;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, rgba(255, 220, 200, 0.18) 0%, transparent 40%),
rgba(212, 64, 64, 0.18);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: rotate(-12deg);
box-shadow: inset 0 0 0 2px rgba(212, 64, 64, 0.35);
opacity: 0.88;
pointer-events: none;
z-index: 4;
}
.adv-sheet-stamp-rank {
font-family: 'Press Start 2P', monospace;
font-size: 17px;
color: #8a1f1f;
text-shadow: 1px 1px 0 rgba(255, 240, 200, 0.6);
line-height: 1;
margin-top: -1px;
}
.adv-sheet-stamp-tier {
font-family: 'Press Start 2P', monospace;
font-size: 6px;
color: #8a1f1f;
letter-spacing: 1px;
margin-top: 3px;
}
@media (max-width: 540px) {
.card-inner.adv-sheet-card { padding: 18px 14px 12px; }
.adv-sheet-scroll { padding: 10px 8px 44px; }
.adv-stat-value { font-size: 13px; min-width: 44px; }
.adv-stat-quote { font-size: 9px; }
.adv-sheet-stamp { width: 40px; height: 40px; }
.adv-sheet-stamp-rank { font-size: 14px; }
}
/* ===== Phase 2.1.f — 技能雷达图 =====
六边形雷达。中心同心六边形 = 等级 2/4/6/8/10 圈，
金色填充多边形 = 玩家本档数值。外圈是 SDV 工具图标 + 等级数字徽章 */
.card-inner.skill-radar-card { padding: 26px 22px 22px; }
.radar-wrap {
position: relative;
margin: 8px auto 12px;
width: 100%;
max-width: 340px;
aspect-ratio: 1 / 1;
}
.radar-svg {
width: 100%;
height: 100%;
overflow: visible;
}
.radar-rings polygon {
fill: rgba(255, 250, 220, 0.18);
stroke: rgba(110, 70, 20, 0.32);
stroke-width: 1;
}
.radar-rings polygon.outer {
stroke: var(--wood-dark);
stroke-width: 1.6;
fill: rgba(255, 250, 220, 0.28);
}
.radar-axes line {
stroke: rgba(110, 70, 20, 0.28);
stroke-width: 1;
stroke-dasharray: 2 2;
}
.radar-points circle {
fill: var(--gold);
stroke: #4a2a0a;
stroke-width: 1.5;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.25));
}
.radar-label-plate {
fill: var(--paper);
stroke: var(--wood-dark);
stroke-width: 1.8;
filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.25));
}
.radar-label-plate.maxed { fill: #fff4cf; stroke: var(--gold-dark); }
.radar-label-icon {
font-size: 18px;
text-anchor: middle;
dominant-baseline: middle;
paint-order: stroke;
pointer-events: none;
}
.radar-label-level {
font-family: 'Press Start 2P', monospace;
font-size: 9px;
fill: var(--wood-dark);
text-anchor: middle;
dominant-baseline: middle;
pointer-events: none;
}
.radar-label-name {
font-family: 'Cubic 11', 'Noto Sans SC', sans-serif;
font-size: 11px;
fill: var(--wood-mid);
text-anchor: middle;
dominant-baseline: middle;
font-weight: 700;
-webkit-font-smoothing: none;
font-smooth: never;
letter-spacing: 1px;
}
html[lang="en"] .radar-label-name {
font-family: 'Press Start 2P', monospace;
font-size: 7px;
letter-spacing: 0.5px;
}
.radar-summary {
margin-top: 8px;
padding: 8px 14px;
background: var(--paper);
border: 2px solid var(--wood-dark);
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
box-shadow: 2px 3px 0 rgba(0,0,0,0.22);
}
.radar-total {
font-family: 'Cubic 11', 'Noto Sans SC', sans-serif;
font-size: 13px;
color: var(--wood-dark);
-webkit-font-smoothing: none;
font-smooth: never;
}
html[lang="en"] .radar-total {
font-family: 'Press Start 2P', monospace;
font-size: 9px;
letter-spacing: 0.5px;
}
.radar-total-num {
font-family: 'Press Start 2P', monospace;
font-size: 15px;
color: var(--gold-dark);
text-shadow: 1px 1px 0 rgba(255,240,200,0.7);
margin: 0 2px;
}
.radar-mastery {
font-size: 11px;
color: var(--wood-mid);
font-family: 'Noto Sans SC', sans-serif;
}
html[lang="en"] .radar-mastery { font-family: 'Pixelify Sans', monospace; font-size: 12px; }
@media (max-width: 540px) {
.card-inner.skill-radar-card { padding: 22px 16px 18px; }
.radar-wrap { max-width: 280px; }
.radar-label-name { font-size: 9px; }
}
/* ===== Phase 2.1.e — 社区中心 / Joja 路线进度 =====
CC 路线主色 = Junimo 绿 + 暖羊皮纸；Joja 路线主色 = Joja 蓝灰冷调
六房间格栏：完成态 = 金边 + Junimo icon，未完成态 = 沉灰半透 */
.card-inner.cc-card { padding: 22px 22px 20px; }
.cc-route-banner {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 18px;
margin: 6px auto 12px;
background: linear-gradient(180deg, #6bbf3b 0%, #4a8a26 100%);
border: 2.5px solid var(--wood-dark);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 2px 3px 0 rgba(0,0,0,0.3);
font-family: 'Cubic 11', 'Noto Sans SC', sans-serif;
color: #fff;
text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
-webkit-font-smoothing: none;
font-smooth: never;
}
html[lang="en"] .cc-route-banner {
font-family: 'Press Start 2P', monospace;
font-size: 10px;
letter-spacing: 1px;
}
.cc-route-banner.joja {
background: linear-gradient(180deg, #4878c8 0%, #2c4d8a 100%);
}
.cc-route-banner.complete {
background: linear-gradient(180deg, #f0b840 0%, #b87826 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 2px 3px 0 rgba(0,0,0,0.3), 0 0 8px rgba(245, 201, 63, 0.5);
}
.cc-route-emoji { font-size: 18px; line-height: 1; }
.cc-route-text {
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
}
html[lang="en"] .cc-route-text { font-size: 10px; }
/* 房间格栏：3×2 网格，每格一个房间 */
.cc-rooms-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 4px auto 14px;
max-width: 360px;
}
.cc-room-tile {
position: relative;
padding: 10px 6px 8px;
background: linear-gradient(180deg, var(--paper) 0%, #e6c478 100%);
border: 2px solid var(--wood-dark);
box-shadow: 2px 2px 0 rgba(0,0,0,0.22);
text-align: center;
image-rendering: pixelated;
aspect-ratio: 1 / 1.1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3px;
}
.cc-room-tile.done {
background: linear-gradient(180deg, #fff4cf 0%, #f5c93f 100%);
border-color: var(--gold-dark);
box-shadow: 2px 2px 0 rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.6);
}
.cc-room-tile.done.joja {
background: linear-gradient(180deg, #d8e0ec 0%, #7c95bc 100%);
border-color: #2c4d8a;
}
.cc-room-tile.pending {
opacity: 0.55;
background: linear-gradient(180deg, #d6cca8 0%, #b5a276 100%);
filter: grayscale(0.4);
}
.cc-room-icon {
font-size: 28px;
line-height: 1;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.25));
}
.cc-room-tile.pending .cc-room-icon { filter: grayscale(1) drop-shadow(1px 1px 0 rgba(0,0,0,0.2)); }
.cc-room-name {
font-family: 'Cubic 11', 'Noto Sans SC', sans-serif;
font-size: 11px;
font-weight: 700;
color: var(--wood-dark);
-webkit-font-smoothing: none;
font-smooth: never;
letter-spacing: 1px;
line-height: 1.15;
}
html[lang="en"] .cc-room-name {
font-family: 'Press Start 2P', monospace;
font-size: 7px;
letter-spacing: 0.5px;
}
.cc-room-status {
position: absolute;
top: 3px;
right: 4px;
font-family: 'Press Start 2P', monospace;
font-size: 8px;
color: var(--gold-dark);
background: var(--wood-dark);
color: #fff4cf;
padding: 1px 4px;
line-height: 1;
letter-spacing: 1px;
}
.cc-room-tile.pending .cc-room-status { background: rgba(74, 42, 10, 0.4); color: #d6cca8; }
.cc-room-tile.done.joja .cc-room-status { background: #1c3868; color: #d8e0ec; }
/* 进度条 */
.cc-meter-wrap {
margin: 8px auto 10px;
max-width: 360px;
}
.cc-meter-track {
height: 18px;
background: var(--wood-dark);
border: 2px solid #2a1606;
position: relative;
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.cc-meter-fill {
height: 100%;
background: linear-gradient(180deg, #f5c93f 0%, #c79024 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
transition: width 0.6s ease-out;
}
.cc-meter-fill.joja {
background: linear-gradient(180deg, #6c8cc4 0%, #2c4d8a 100%);
}
.cc-meter-fill.complete {
background: linear-gradient(90deg, #f5c93f 0%, #84e074 50%, #f5c93f 100%);
background-size: 200% 100%;
animation: ccMeterShimmer 2.4s linear infinite;
}
@keyframes ccMeterShimmer {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.cc-meter-label {
margin-top: 6px;
font-family: 'Cubic 11', 'Noto Sans SC', sans-serif;
font-size: 12px;
color: var(--wood-dark);
-webkit-font-smoothing: none;
font-smooth: never;
}
.cc-meter-num {
font-family: 'Press Start 2P', monospace;
font-size: 14px;
color: var(--gold-dark);
margin: 0 4px;
}
.cc-meter-total {
font-family: 'Press Start 2P', monospace;
font-size: 12px;
color: var(--wood-mid);
margin-left: 2px;
}
@media (max-width: 540px) {
.card-inner.cc-card { padding: 18px 16px 16px; }
.cc-rooms-grid { gap: 6px; max-width: 280px; }
.cc-room-icon { font-size: 22px; }
.cc-room-name { font-size: 10px; }
.cc-route-text { font-size: 12px; }
}
/* ===== M-C1 季节切换强过渡动画 =====
切季节时全屏撒 60 个对应粒子（樱/光斑/枫叶/雪花），随机轨迹下落+自转。
2.2s 后整层移除，避免堆积内存。pointer-events:none 不挡交互 */
.season-transition-layer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 7500;
overflow: hidden;
}
.season-particle {
position: absolute;
background-repeat: no-repeat;
background-size: 100% 100%;
image-rendering: pixelated;
opacity: 0;
animation: season-particle-fall var(--sp-dur, 1.6s) cubic-bezier(0.4, 0, 0.6, 1) forwards;
animation-delay: var(--sp-delay, 0s);
will-change: transform, opacity;
}
@keyframes season-particle-fall {
0% { opacity: 0; transform: translate3d(0, -10vh, 0) rotate(0deg); }
18% { opacity: 1; }
100% { opacity: 0; transform: translate3d(var(--sp-dx, 0), 120vh, 0) rotate(var(--sp-rot, 360deg)); }
}
@media (prefers-reduced-motion: reduce) {
.season-particle { animation: none !important; opacity: 0; }
}
/* Cloudy mode: keep base sky but darken slightly + dim sun */
body.cloud-mode .pixel-sun { opacity: 0.45 !important; }
body.cloud-mode .pixel-cloud { opacity: 0.95 !important; }
/* Foggy mode: hazy overlay */
body.fog-mode::after {
content: '';
position: fixed;
inset: 0;
background: rgba(200, 210, 220, 0.32);
pointer-events: none;
z-index: 0;
}
/* ========== Extra ambient: fireflies (dusk) + butterflies (day) ========== */
@keyframes firefly-drift {
0% { transform: translate(0, 0); }
25% { transform: translate(var(--fx, 50px), var(--fy, -40px)); }
50% { transform: translate(calc(var(--fx, 50px) * -0.6), calc(var(--fy, -40px) * 1.6)); }
75% { transform: translate(calc(var(--fx, 50px) * 1.4), var(--fy, -40px)); }
100% { transform: translate(0, 0); }
}
@keyframes firefly-blink {
0%, 100% { opacity: 0; box-shadow: 0 0 4px rgba(245, 230, 130, 0); }
50% { opacity: 1; box-shadow: 0 0 10px rgba(245, 230, 130, 0.95), 0 0 16px rgba(245, 200, 100, 0.6); }
}
.firefly {
position: fixed;
width: 4px;
height: 4px;
background: #fff5b8;
border-radius: 50%;
pointer-events: none;
z-index: 0;
opacity: 0;
animation:
firefly-drift var(--ddur, 12s) ease-in-out infinite,
firefly-blink var(--bdur, 2.4s) ease-in-out infinite;
animation-delay: var(--ddelay, 0s), var(--bdelay, 0s);
}
body.day-mode .firefly,
body.dawn-mode .firefly { opacity: 0 !important; animation-play-state: paused; }
@keyframes butterfly-path {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(40vw, -10vh) rotate(15deg); }
50% { transform: translate(70vw, 5vh) rotate(-10deg); }
75% { transform: translate(30vw, 15vh) rotate(20deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes butterfly-flap {
0%, 100% { transform: scaleX(1); }
50% { transform: scaleX(0.3); }
}
.butterfly {
position: fixed;
width: 14px;
height: 10px;
pointer-events: none;
z-index: 0;
animation: butterfly-path var(--bdur, 38s) linear infinite;
animation-delay: var(--bdelay, 0s);
opacity: 0;
}
.butterfly .wing {
position: absolute;
inset: 0;
background: var(--bcolor, #ff8fbb);
clip-path: polygon(
50% 50%,
0% 30%,
20% 0%,
40% 20%,
60% 20%,
80% 0%,
100% 30%);
box-shadow:
inset -1px -1px 0 rgba(0,0,0,0.2),
inset 1px 1px 0 rgba(255,255,255,0.2);
animation: butterfly-flap 0.18s ease-in-out infinite;
}
body.day-mode .butterfly,
body.dawn-mode .butterfly { opacity: 0.9; }
@keyframes leaf-wander {
0%, 100% { transform: translate(0, 0) rotate(-8deg); }
50% { transform: translate(var(--leaf-dx, 28px), -5px) rotate(10deg); }
}
.season-leaf {
position: fixed;
left: var(--leaf-left, 20vw);
bottom: var(--leaf-bottom, 12vh);
width: 12px;
height: 8px;
background:
linear-gradient(135deg, transparent 0 22%, #d97b38 23% 78%, transparent 79%),
linear-gradient(45deg, transparent 0 35%, #8a3d22 36% 42%, transparent 43%);
border-radius: 70% 20% 70% 20%;
image-rendering: pixelated;
pointer-events: none;
z-index: 0;
opacity: 0;
animation: leaf-wander var(--leaf-dur, 6.5s) steps(5, end) infinite;
animation-delay: var(--leaf-delay, 0s);
}
body[data-season="fall"]:not(.rain-mode):not(.snow-mode) .season-leaf { opacity: 0.74; }
/* Pixel grass tufts along the bottom (day only) */
.grass-tuft {
position: fixed;
bottom: 0;
width: 12px;
height: 16px;
background:
radial-gradient(circle at 50% 100%, #4a7f3a 0%, #4a7f3a 35%, transparent 38%);
pointer-events: none;
z-index: 0;
image-rendering: pixelated;
opacity: 0;
transform-origin: bottom center;
animation: grass-sway 3.6s ease-in-out infinite;
}
body.day-mode .grass-tuft,
body.dawn-mode .grass-tuft { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
.firefly, .butterfly, .grass-tuft, .season-leaf { animation: none !important; }
}
/* Rain particles */
.rain-layer, .snow-layer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.rain-drop {
position: absolute;
width: 16px;
height: 16px;
background-image: url('../stardew/weather/rain.png');
background-size: 64px 32px;
background-position: 0 0;
background-repeat: no-repeat;
image-rendering: pixelated;
transform: rotate(0deg);
animation:
rain-fall var(--rain-dur, 0.55s) linear infinite,
rain-flick 0.18s steps(4, end) infinite;
will-change: transform;
filter: drop-shadow(1px 1px 0 rgba(70, 96, 132, 0.35));
}
.rain-layer.heavy .rain-drop {
background-position-y: -16px;
}
@keyframes rain-flick {
0% { background-position-x: 0; }
25% { background-position-x: -16px; }
50% { background-position-x: -32px; }
75% { background-position-x: -48px; }
100% { background-position-x: 0; }
}
.rain-splash {
position: absolute;
bottom: var(--splash-bottom, 7vh);
left: var(--splash-left, 50vw);
width: 12px;
height: 3px;
border-top: 2px solid rgba(180, 214, 244, 0.58);
opacity: 0;
animation: rain-splash 0.72s steps(3, end) infinite;
animation-delay: var(--splash-delay, 0s);
}
@keyframes rain-fall {
from { transform: translate(0, -16vh); }
to { transform: translate(6vw, 120vh); }
}
@keyframes rain-splash {
0%, 72%, 100% { opacity: 0; transform: scaleX(0.35); }
76% { opacity: 0.72; transform: scaleX(1); }
88% { opacity: 0.24; transform: scaleX(1.45); }
}
/* 闪电视觉已移除：雷暴统一按大雨处理 */
.snow-flake {
position: absolute;
width: 4px;
height: 4px;
background: #ffffff;
box-shadow: 0 0 2px rgba(255,255,255,0.7);
animation: snow-fall linear infinite;
will-change: transform;
}
@keyframes snow-fall {
0% { transform: translate(0, -10vh); }
50% { transform: translate(4vw, 55vh); }
100% { transform: translate(-2vw, 120vh); }
}
@media (prefers-reduced-motion: reduce) {
.rain-drop, .rain-splash, .snow-flake { animation: none !important; }
}
/* ========== Achievements modal (Stardew-style todolist) ========== */
.ach-modal-box {
max-width: 560px;
}
.ach-summary {
padding: 14px 22px;
background: var(--paper);
border-bottom: 3px solid var(--wood-dark);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-family: 'Pixelify Sans', monospace;
}
.ach-summary .count {
font-size: 22px;
color: var(--wood-dark);
font-weight: 700;
letter-spacing: 1px;
}
.ach-summary .count .done {
color: var(--grass-dark);
}
.ach-summary .tracker-note {
width: 100%;
font-size: 12px;
color: var(--wood-mid);
}
.ach-summary .pct-bar {
flex: 1;
min-width: 140px;
height: 14px;
background: var(--cream-shadow);
border: 2px solid var(--wood-dark);
position: relative;
overflow: hidden;
}
.ach-summary .pct-bar-fill {
position: absolute;
inset: 0;
width: 0;
background:
repeating-linear-gradient(45deg,
var(--gold) 0 8px,
var(--gold-dark) 8px 16px);
transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ach-list {
flex: 1;
overflow-y: auto;
padding: 12px 18px;
background: var(--cream);
}
.ach-item {
display: flex;
gap: 12px;
align-items: center;
padding: 10px 12px;
margin-bottom: 8px;
background: var(--paper);
border: 2px solid var(--wood-dark);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 2px 2px 0 rgba(0,0,0,0.15);
transition: opacity 0.3s, background 0.3s;
}
.ach-item.done {
background: rgba(184, 211, 143, 0.5);
}
.ach-item.unknown {
background: #efe0bd;
border-style: dashed;
}
.ach-item .ach-icon {
flex: 0 0 36px;
width: 36px;
height: 36px;
background: var(--cream);
border: 2px solid var(--wood-dark);
box-shadow: inset 0 0 0 1px var(--wood-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
position: relative;
overflow: hidden;
}
.ach-item .ach-icon .stardew-object-icon {
flex: 0 0 auto;
}
.ach-item .ach-checkmark {
position: absolute;
right: -2px;
bottom: -2px;
width: 17px;
height: 17px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gold);
border: 2px solid var(--wood-dark);
color: var(--wood-dark);
font-family: 'Press Start 2P', monospace;
font-size: 9px;
}
.ach-item .ach-text {
flex: 1;
text-align: left;
min-width: 0;
}
.ach-item .ach-title {
font-family: 'Pixelify Sans', monospace;
font-size: 15px;
font-weight: 700;
color: var(--wood-dark);
line-height: 1.2;
}
.ach-item .ach-desc {
font-size: 11px;
color: var(--wood-mid);
margin-top: 2px;
line-height: 1.4;
}
.ach-item .ach-weight {
display: inline-block;
margin-top: 4px;
padding: 2px 5px;
background: #fff3c7;
border: 1px solid var(--wood-light);
color: var(--wood-dark);
font-family: 'Pixelify Sans', monospace;
font-size: 11px;
font-weight: 700;
}
.ach-item .ach-progress {
flex: 0 0 88px;
text-align: right;
}
.ach-item .ach-progress .num {
font-family: 'Press Start 2P', monospace;
font-size: 11px;
color: var(--wood-dark);
}
.ach-item .ach-progress .bar {
width: 88px;
height: 5px;
background: var(--cream-shadow);
border: 1px solid var(--wood-dark);
margin-top: 4px;
position: relative;
overflow: hidden;
}
.ach-item .ach-progress .bar-fill {
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--gold-dark), var(--gold));
width: 0;
transition: width 0.8s ease;
}
.ach-section-head {
font-family: 'Press Start 2P', monospace;
font-size: 10px;
letter-spacing: 2px;
color: var(--wood-mid);
margin: 6px 0 10px;
text-transform: uppercase;
border-bottom: 2px dashed var(--wood-light);
padding-bottom: 4px;
}
/* Scrollbar tweak (cosmetic) */
.ach-list::-webkit-scrollbar { width: 8px; }
.ach-list::-webkit-scrollbar-track { background: var(--cream-shadow); }
.ach-list::-webkit-scrollbar-thumb { background: var(--wood-mid); border: 1px solid var(--wood-dark); }
/* ========== Photo achievement maker ========== */
.photo-ach-modal-box {
max-width: 620px;
}
.photo-ach-body {
padding: 16px 18px 18px;
background: linear-gradient(180deg, rgba(255, 246, 211, 0.98), rgba(231, 196, 126, 0.98));
overflow-y: auto;
}
.photo-ach-card {
position: relative;
width: min(100%, 520px);
margin: 0 auto;
padding: 14px;
background:
linear-gradient(180deg,
#f6cb84 0, #f6cb84 5px,
#d7833e 5px, #d7833e calc(100% - 5px),
#8a481d calc(100% - 5px), #8a481d 100%);
border: 4px solid #3f1808;
box-shadow:
inset 0 0 0 3px #6b2e10,
inset 0 0 0 7px #eaa45c,
0 6px 0 rgba(0, 0, 0, 0.32);
image-rendering: pixelated;
}
.photo-ach-card::before,
.photo-ach-card::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
background: #6b2e10;
border: 3px solid #3f1808;
top: 9px;
box-shadow: inset 0 0 0 3px #d7833e;
}
.photo-ach-card::before { left: 9px; }
.photo-ach-card::after { right: 9px; }
.photo-ach-toast {
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 12px 16px 12px 14px;
margin-bottom: 12px;
background: #f8e8b8;
border: 3px solid #5c2b11;
box-shadow: inset 0 0 0 2px #fff6d7;
}
.photo-ach-star {
width: 54px;
height: 54px;
display: grid;
place-items: center;
background: #693110;
border: 3px solid #331407;
box-shadow: inset 0 0 0 3px #a75a24;
}
.photo-ach-star::before {
content: '';
width: 30px;
height: 30px;
background: #ffd55c;
clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 56%, 79% 91%, 50% 70%, 21% 91%, 31% 56%, 2% 35%, 38% 34%);
filter: drop-shadow(2px 2px 0 #9d5b18);
}
.photo-ach-kicker {
margin-bottom: 7px;
font-family: 'Press Start 2P', monospace;
font-size: 11px;
color: #7c3513;
}
.photo-ach-title {
font-family: 'Pixelify Sans', 'Noto Sans SC', sans-serif;
font-size: 24px;
font-weight: 700;
color: #3f1808;
text-shadow: 1px 1px 0 #ffd98e;
line-height: 1.05;
word-break: break-word;
}
html[lang="zh-CN"] .photo-ach-title,
html[lang="zh-CN"] .photo-ach-kicker,
html[lang="zh-CN"] .photo-ach-caption,
html[lang="zh-CN"] .photo-ach-control label,
html[lang="zh-CN"] .photo-ach-preset,
html[lang="zh-CN"] .photo-ach-btn {
font-family: 'Cubic 11', 'Noto Sans SC', 'PingFang SC', sans-serif;
font-weight: 400;
letter-spacing: 1px;
-webkit-font-smoothing: none;
font-smooth: never;
}
.photo-ach-frame {
position: relative;
aspect-ratio: 4 / 3;
background:
linear-gradient(135deg, #9cc96f 0 25%, #79a553 25% 50%, #cda35c 50% 75%, #8f6b3b 75% 100%);
border: 4px solid #3f1808;
box-shadow:
inset 0 0 0 3px rgba(255, 246, 211, 0.45),
0 4px 0 rgba(0, 0, 0, 0.22);
overflow: hidden;
cursor: pointer;
}
.photo-ach-frame.has-photo {
background: #2e1b11;
}
.photo-ach-preview {
width: 100%;
height: 100%;
object-fit: cover;
display: none;
image-rendering: auto;
}
.photo-ach-frame.has-photo .photo-ach-preview {
display: block;
}
.photo-ach-empty {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
color: #3f1808;
font-family: 'Pixelify Sans', 'Noto Sans SC', sans-serif;
font-size: 21px;
font-weight: 700;
text-shadow: 1px 1px 0 #ffe6a8;
background:
repeating-linear-gradient(0deg, rgba(255,255,255,0.1) 0 8px, rgba(0,0,0,0.04) 8px 16px);
}
.photo-ach-frame.has-photo .photo-ach-empty {
display: none;
}
.photo-ach-caption {
min-height: 38px;
margin-top: 10px;
padding: 9px 12px;
background: #f8e8b8;
border: 3px solid #5c2b11;
color: #4a1f0a;
font-family: 'Pixelify Sans', 'Noto Sans SC', sans-serif;
font-size: 15px;
line-height: 1.35;
text-align: center;
box-shadow: inset 0 0 0 2px #fff6d7;
}
.photo-ach-controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 14px auto 0;
width: min(100%, 520px);
}
.photo-ach-control {
display: grid;
gap: 5px;
}
.photo-ach-control label {
font-family: 'Pixelify Sans', 'Noto Sans SC', sans-serif;
font-size: 13px;
color: #5a2a10;
font-weight: 700;
}
.photo-ach-control input {
min-height: 36px;
padding: 7px 9px;
border: 3px solid #5c2b11;
background: #fff6d7;
color: #3f1808;
font: 14px 'Noto Sans SC', sans-serif;
box-shadow: inset 0 0 0 2px #e0b36c;
border-radius: 0;
}
.photo-ach-actions {
display: flex;
justify-content: center;
gap: 10px;
margin: 14px auto 0;
width: min(100%, 520px);
}
.photo-ach-presets {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 7px;
margin: 10px auto 0;
width: min(100%, 520px);
}
.photo-ach-preset {
min-height: 32px;
padding: 6px 5px;
border: 2px solid #5c2b11;
background: #e4b767;
color: #3f1808;
font-family: 'Pixelify Sans', 'Noto Sans SC', sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1.15;
box-shadow:
inset 0 0 0 2px #f8e8b8,
0 2px 0 rgba(0, 0, 0, 0.18);
cursor: pointer;
}
.photo-ach-preset:hover {
transform: translateY(-1px);
filter: brightness(1.06);
}
.photo-ach-preset:active {
transform: translateY(1px);
}
.photo-ach-btn {
min-height: 40px;
padding: 9px 14px;
border: 3px solid #3f1808;
background: linear-gradient(180deg, #8e5a2e 0%, #6b3a18 100%);
color: #fff4cf;
font-family: 'Pixelify Sans', 'Noto Sans SC', sans-serif;
font-size: 14px;
font-weight: 700;
text-shadow: 1px 1px 0 #2a1606;
box-shadow:
inset 0 0 0 2px #d4a368,
0 3px 0 rgba(0, 0, 0, 0.24);
cursor: pointer;
}
.photo-ach-btn.primary {
background: linear-gradient(180deg, #4f7c2a 0%, #31551d 100%);
box-shadow:
inset 0 0 0 2px #a9cf73,
0 3px 0 rgba(0, 0, 0, 0.24);
}
.photo-ach-btn:hover:not(:disabled) {
transform: translateY(-1px);
filter: brightness(1.08);
}
.photo-ach-btn:disabled {
opacity: 0.58;
cursor: not-allowed;
}
#photo-ach-file {
display: none;
}
/* Inline mini-portrait (used in spouse/family cell) */
.mini-portrait {
flex: 0 0 56px;
width: 56px;
height: 56px;
border: 3px solid var(--wood-dark);
background: var(--paper);
overflow: hidden;
position: relative;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 2px 2px 0 rgba(0,0,0,0.25);
}
.mini-portrait .mini-emoji {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
line-height: 1;
}
.mini-portrait img {
position: absolute;
left: 0; top: 0;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.mini-portrait img.loaded { opacity: 1; }
.mini-portrait img.loaded ~ .mini-emoji { opacity: 0; }
/* ========== NPC Showcase (portrait + original NPC sprite) ========== */
.npc-showcase {
position: relative;
display: block;
width: 346px;
height: 164px;
margin: 10px auto 4px;
image-rendering: pixelated;
}
.npc-showcase::before {
content: '';
position: absolute;
left: 204px;
right: 42px;
bottom: 3px;
height: 21px;
background:
repeating-linear-gradient(90deg,
#7da257 0 10px,
#6f934b 10px 20px);
border: 3px solid var(--wood-dark);
box-shadow:
inset 0 0 0 2px rgba(255,255,255,0.18),
3px 3px 0 rgba(0,0,0,0.2);
z-index: 1;
}
.npc-showcase::after {
content: '';
position: absolute;
left: 218px;
bottom: 25px;
width: 76px;
height: 9px;
background: rgba(62, 36, 21, 0.28);
z-index: 2;
}
.npc-showcase .npc-portrait-wrap {
position: absolute;
left: 26px;
top: 10px;
width: 126px;
height: 126px;
margin: 0;
transform: none;
z-index: 2;
}
.npc-showcase .figure {
position: absolute;
bottom: 0;
z-index: 5;
}
.npc-showcase .figure-farmer {
display: none !important;
}
.npc-showcase .figure-npc {
left: 226px;
}
.npc-showcase .couple-hand-link {
display: none;
}
.hearts-row {
display: flex;
justify-content: center;
gap: 3px;
flex-wrap: wrap;
margin: 14px 0 4px;
font-family: 'Press Start 2P', monospace;
font-size: 18px;
letter-spacing: 2px;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.heart { color: var(--heart); text-shadow: 2px 2px 0 var(--heart-dark); }
.heart.empty { color: rgba(212, 64, 64, 0.2); text-shadow: none; }
/* Stats grid */
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 18px;
}
.stat-cell {
background: var(--paper);
border: 3px solid var(--wood-dark);
box-shadow: inset 0 0 0 2px var(--wood-light), inset 0 0 0 3px var(--paper);
padding: 14px 8px;
text-align: center;
}
.stat-cell .num {
font-family: 'Press Start 2P', monospace;
font-size: 18px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0;
color: var(--wood-dark);
}
.stat-cell .label {
font-size: 11px;
color: var(--wood-mid);
margin-top: 4px;
font-weight: 500;
}
/* Town bulletin card */
.town-card .card-sub {
margin-bottom: 12px;
}
.town-card .card-quote {
margin-top: 12px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.45;
}
.town-ticket {
position: relative;
text-align: left;
background:
linear-gradient(rgba(255,255,255,0.18), rgba(255,255,255,0)),
var(--paper);
border: 3px solid var(--wood-dark);
box-shadow:
inset 0 0 0 2px rgba(255,255,255,0.34),
4px 4px 0 rgba(0,0,0,0.18);
padding: 16px 14px 14px;
overflow: hidden;
}
.town-ticket::before {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(to bottom,
transparent 0,
transparent 9px,
rgba(62,36,21,0.055) 9px,
rgba(62,36,21,0.055) 10px);
pointer-events: none;
}
.town-paper-name {
position: relative;
display: inline-block;
margin-bottom: 10px;
padding: 4px 8px;
background: var(--wood-dark);
color: var(--gold);
font-family: 'Press Start 2P', monospace;
font-size: 8px;
letter-spacing: 1px;
}
.town-headline {
position: relative;
max-width: 290px;
font-family: 'Pixelify Sans', monospace;
font-size: 25px;
line-height: 1.15;
font-weight: 700;
color: var(--wood-dark);
text-shadow: 1px 1px 0 var(--cream);
}
.town-kicker {
position: relative;
margin-top: 8px;
color: var(--wood-mid);
font-size: 12px;
line-height: 1.5;
}
.verdict-stamp {
position: absolute;
top: 14px;
right: 12px;
z-index: 1;
transform: rotate(7deg);
padding: 8px 9px;
min-width: 58px;
text-align: center;
border: 3px solid var(--heart);
color: var(--heart);
background: rgba(255,245,224,0.72);
font-family: 'Press Start 2P', monospace;
font-size: 10px;
line-height: 1.35;
box-shadow: 3px 3px 0 rgba(0,0,0,0.14);
}
.town-gossip-list {
position: relative;
display: grid;
gap: 8px;
margin-top: 14px;
}
.gossip-item {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 8px 10px;
background: rgba(255,245,224,0.52);
border: 2px solid rgba(62,36,21,0.65);
}
.gossip-icon {
flex: 0 0 26px;
width: 26px;
height: 26px;
display: grid;
place-items: center;
background: var(--cream);
border: 2px solid var(--wood-dark);
font-size: 15px;
line-height: 1;
}
.gossip-label {
font-family: 'Pixelify Sans', monospace;
font-size: 14px;
font-weight: 700;
color: var(--wood-dark);
line-height: 1.15;
}
.gossip-text {
margin-top: 2px;
font-size: 11px;
line-height: 1.45;
color: var(--wood-mid);
}
/* Summary card (final, screenshot) */
.card-summary .card-inner {
padding: 24px 22px 22px;
}
@media (max-height: 700px) {
body.summary-active .game-hud,
body.summary-active .world-switch {
opacity: 0;
pointer-events: none;
}
.card.card-summary {
align-items: flex-start;
justify-content: center;
padding-top: 12px;
padding-bottom: 116px;
}
.card-summary .poster {
animation: none !important;
max-height: none;
transform: scale(0.64) !important;
transform-origin: center top !important;
}
}
/* ========== POSTER (final share card) ========== */
.poster {
width: 100%;
max-width: 392px;
background: var(--cream);
border: 4px solid var(--wood-dark);
box-shadow:
inset 0 0 0 4px var(--cream),
inset 0 0 0 8px var(--wood-light),
inset 0 0 0 10px var(--wood-dark),
0 8px 0 rgba(0, 0, 0, 0.4),
0 16px 40px rgba(0, 0, 0, 0.5);
padding: 16px 14px 12px;
color: var(--ink);
text-align: center;
max-height: 88vh;
overflow: hidden;
}
.poster .num-px {
font-family: 'Press Start 2P', monospace;
color: var(--gold-dark);
margin: 0 2px;
}
/* Poster banner */
.poster-banner {
background: var(--wood-dark);
border: 3px solid var(--wood-dark);
box-shadow: inset 0 0 0 2px var(--gold-dark);
padding: 8px 6px;
margin: -2px -4px 8px;
transform: rotate(-1deg);
}
.poster-banner-stars {
color: var(--gold);
font-size: 10px;
letter-spacing: 4px;
margin-bottom: 4px;
}
.poster-title {
font-family: 'Press Start 2P', monospace;
font-size: 14px;
color: var(--gold);
letter-spacing: 2px;
line-height: 1.2;
text-shadow: 2px 2px 0 #5a3a1a;
}
.poster-zh {
font-size: 10px;
color: var(--cream);
letter-spacing: 3px;
margin-top: 6px;
}
.poster-sticker {
display: inline-block;
max-width: 92%;
margin: -1px auto 8px;
padding: 5px 8px;
background: #ffe29a;
border: 2px solid var(--wood-dark);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.45),
3px 3px 0 rgba(0,0,0,0.14);
color: var(--wood-dark);
font-family: 'Pixelify Sans', monospace;
font-size: 12px;
font-weight: 700;
line-height: 1.25;
transform: rotate(1deg);
}
.poster-share-tags {
display: flex;
justify-content: center;
gap: 5px;
flex-wrap: wrap;
margin: -2px auto 8px;
max-width: 94%;
}
.poster-share-tags span {
background: var(--paper);
border: 2px solid var(--wood-mid);
color: var(--wood-dark);
box-shadow: 2px 2px 0 rgba(0,0,0,0.12);
font-family: 'Pixelify Sans', monospace;
font-size: 9px;
font-weight: 700;
line-height: 1.2;
padding: 3px 5px;
}
/* Farm name section */
.poster-farm {
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 2px dashed var(--wood-light);
}
.farm-name {
font-family: 'Pixelify Sans', monospace;
font-size: 20px;
font-weight: 700;
color: var(--wood-dark);
letter-spacing: 1px;
}
.farm-meta {
font-size: 11px;
color: var(--wood-mid);
margin-top: 4px;
}
/* Hero personality */
.poster-hero {
background: var(--paper);
border: 3px solid var(--wood-dark);
padding: 8px 8px;
margin-bottom: 8px;
position: relative;
}
.poster-hero .hero-emoji {
font-size: 34px;
line-height: 1;
display: block;
margin-bottom: 4px;
}
.poster-hero .hero-emoji.stardew-object-icon {
font-size: 0 !important;
line-height: 0;
margin: 0 auto 4px;
filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.18));
}
.poster-hero .hero-name {
font-family: 'Pixelify Sans', monospace;
font-size: 17px;
font-weight: 700;
color: var(--wood-dark);
}
.poster-hero .hero-desc {
font-size: 11px;
color: var(--wood-mid);
margin-top: 3px;
line-height: 1.4;
}
/* 2-col rows */
.poster-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: 6px;
}
.poster-cell {
background: var(--paper);
border: 2px solid var(--wood-dark);
padding: 6px 5px;
text-align: center;
}
.poster-cell .cell-label {
font-size: 9px;
color: var(--wood-mid);
margin-bottom: 4px;
letter-spacing: 1px;
}
.poster-cell .cell-emoji {
font-size: 24px;
line-height: 1;
margin-bottom: 2px;
position: relative;
}
.poster-cell .poster-duo-icons {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 32px;
}
.poster-npc-cell-portrait {
width: 42px;
height: 42px;
margin: 0 auto 2px;
border: 2px solid var(--wood-dark);
overflow: hidden;
position: relative;
background: var(--paper);
image-rendering: pixelated;
}
.poster-npc-cell-portrait img {
position: absolute;
left: 0; top: 0;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
opacity: 0;
transition: opacity 0.3s ease;
}
.poster-npc-cell-portrait img.loaded { opacity: 1; }
.poster-npc-cell-portrait.has-portrait .poster-npc-emoji-fb { opacity: 0; }
.poster-npc-cell-portrait .poster-npc-emoji-fb {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 24px;
}
.poster-cell .cell-name {
font-family: 'Pixelify Sans', monospace;
font-size: 14px;
color: var(--wood-dark);
font-weight: 700;
line-height: 1.2;
}
.poster-cell .cell-meta {
font-size: 10px;
color: var(--wood-mid);
margin-top: 2px;
}
/* Number strip */
.poster-numbers {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 4px;
background: var(--wood-dark);
padding: 6px 4px;
margin: 8px 0;
}
.poster-numbers > div {
color: var(--gold);
font-family: 'Press Start 2P', monospace;
font-size: 11px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.poster-numbers .ico {
font-size: 13px;
font-family: 'Noto Sans SC', sans-serif;
}
/* Footer */
.poster-footer {
padding-top: 6px;
border-top: 2px dashed var(--wood-light);
}
.footer-quote {
font-size: 10px;
color: var(--wood-mid);
font-style: italic;
line-height: 1.5;
margin-bottom: 6px;
}
.footer-brand {
font-family: 'Press Start 2P', monospace;
font-size: 9px;
color: var(--gold-dark);
letter-spacing: 2px;
}
.footer-credit {
font-size: 9px;
color: var(--wood-mid);
margin-top: 3px;
letter-spacing: 1px;
}
.poster-export-sandbox {
position: fixed;
left: -20000px;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
pointer-events: none;
}
.poster-export-frame {
position: relative;
box-sizing: border-box;
overflow: hidden;
color: var(--ink);
background:
linear-gradient(180deg, #7fc7f2 0%, #d6f0ff 47%, #c9e28a 47%, #7db65d 100%);
font-family: 'Noto Sans SC', sans-serif;
}
.poster-export-frame::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(62,36,21,0.08) 1px, transparent 1px),
linear-gradient(0deg, rgba(62,36,21,0.06) 1px, transparent 1px);
background-size: 24px 24px;
opacity: 0.55;
}
.poster-export-inner {
position: relative;
z-index: 1;
width: 392px;
flex: 0 0 auto;
}
.poster-export-frame .poster {
width: 392px;
max-width: none;
max-height: none;
transform: none !important;
animation: none !important;
}
.poster-export-story {
display: grid;
place-items: center;
padding: 120px 82px;
}
.poster-export-story .poster-export-inner {
transform: scale(2.24);
transform-origin: center center;
}
.poster-export-social {
display: flex;
align-items: center;
justify-content: center;
gap: 48px;
padding: 54px 64px;
}
.poster-export-social .poster-export-inner {
transform: scale(0.86);
transform-origin: center center;
}
.poster-export-social-copy {
position: relative;
z-index: 1;
flex: 0 0 440px;
color: var(--wood-dark);
text-shadow: 2px 2px 0 rgba(255,245,224,0.55);
}
.poster-export-social-copy .export-kicker {
font-family: 'Press Start 2P', monospace;
font-size: 15px;
color: #7a4b1a;
margin-bottom: 24px;
}
.poster-export-social-copy .export-title {
font-family: 'Pixelify Sans', 'Noto Sans SC', sans-serif;
font-size: 60px;
font-weight: 700;
line-height: 0.95;
margin-bottom: 20px;
}
.poster-export-social-copy .export-farm {
font-size: 25px;
font-weight: 900;
line-height: 1.25;
}
.poster-export-social-copy .export-meta {
margin-top: 18px;
font-size: 18px;
line-height: 1.5;
color: var(--wood-mid);
}
/* Old summary classes (legacy, keep for compat) */
.summary-title-row {
text-align: center;
border-bottom: 3px solid var(--wood-dark);
padding-bottom: 12px;
margin-bottom: 14px;
}
.summary-title-row .yr {
font-family: 'Press Start 2P', monospace;
font-size: 10px;
color: var(--gold-dark);
letter-spacing: 2px;
margin-bottom: 6px;
}
.summary-title-row .name {
font-family: 'Pixelify Sans', monospace;
font-size: 26px;
font-weight: 700;
color: var(--wood-dark);
}
.summary-quad {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
}
.quad-cell {
background: var(--paper);
border: 2px solid var(--wood-dark);
padding: 10px 8px;
text-align: center;
}
.quad-cell .qlabel {
font-size: 10px;
color: var(--wood-mid);
margin-bottom: 4px;
}
.quad-cell .qval {
font-family: 'Pixelify Sans', monospace;
font-size: 15px;
font-weight: 700;
color: var(--wood-dark);
line-height: 1.3;
}
.quad-cell .qsub {
font-size: 10px;
color: var(--wood-mid);
margin-top: 2px;
}
.summary-personality {
background: var(--paper);
border: 3px solid var(--wood-dark);
padding: 12px 10px;
margin-bottom: 12px;
text-align: center;
}
.summary-personality .pemoji { font-size: 36px; display: block; line-height: 1; margin-bottom: 4px; }
.summary-personality .pemoji.stardew-object-icon {
font-size: 0 !important;
line-height: 0;
margin: 0 auto 4px;
filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.18));
}
.summary-personality .pname {
font-family: 'Pixelify Sans', monospace;
font-size: 20px;
font-weight: 700;
color: var(--wood-dark);
}
.summary-personality .pdesc { font-size: 12px; color: var(--wood-mid); margin-top: 3px; }
.summary-footer {
text-align: center;
font-family: 'Press Start 2P', monospace;
font-size: 8px;
color: var(--wood-mid);
letter-spacing: 2px;
border-top: 2px dashed var(--wood-light);
padding-top: 10px;
}
.summary-footer .brand { color: var(--gold-dark); }
/* Navigation */
.nav-arrows {
position: fixed;
top: 50%;
bottom: auto;
left: 50%;
width: min(640px, calc(100vw - 40px));
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
gap: 14px;
z-index: 10;
pointer-events: none;
}
.nav-btn {
background: var(--wood-dark);
color: var(--gold);
width: 56px;
height: 44px;
border: 4px solid var(--wood-dark);
box-shadow:
inset 0 0 0 2px var(--gold-dark),
inset 0 0 0 3px var(--wood-dark),
0 4px 0 #1a0e05;
cursor: pointer;
font-family: 'Press Start 2P', monospace;
font-size: 14px;
transition: transform 0.1s;
pointer-events: auto;
}
.nav-btn:hover:not(:disabled) {
transform: translateY(2px);
box-shadow:
inset 0 0 0 2px var(--gold-dark),
inset 0 0 0 3px var(--wood-dark),
0 2px 0 #1a0e05;
}
.nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.save-btn {
background: var(--grass);
color: var(--cream);
border: 3px solid var(--wood-dark);
box-shadow:
inset 0 0 0 2px var(--grass-dark),
inset 0 0 0 3px var(--grass),
0 4px 0 #1a0e05;
padding: 10px 22px;
font-family: 'Pixelify Sans', monospace;
font-weight: 700;
font-size: 14px;
cursor: pointer;
margin-top: 14px;
letter-spacing: 1px;
transition: transform 0.1s;
}
.save-btn:hover {
transform: translateY(2px);
box-shadow:
inset 0 0 0 2px var(--grass-dark),
inset 0 0 0 3px var(--grass),
0 2px 0 #1a0e05;
}
.save-btn:active { transform: translateY(3px); }
.poster-actions {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
width: min(520px, calc(100vw - 36px));
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 12;
pointer-events: none;
}
.export-privacy {
align-self: flex-end;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 30px;
padding: 5px 9px;
margin-right: clamp(4px, 3vw, 34px);
background: rgba(62, 36, 21, 0.9);
color: var(--cream);
border: 3px solid var(--wood-dark);
box-shadow:
inset 0 0 0 2px var(--wood-light),
0 3px 0 rgba(0,0,0,0.28);
font-family: 'Pixelify Sans', 'Noto Sans SC', sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
pointer-events: auto;
}
.export-privacy input {
width: 14px;
height: 14px;
accent-color: var(--gold);
}
.poster-action-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
pointer-events: auto;
}
.poster-action-buttons .save-btn {
margin-top: 0;
}
.progress-dots {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 10;
background: rgba(62, 36, 21, 0.7);
padding: 8px 14px;
border: 3px solid var(--wood-dark);
box-shadow: inset 0 0 0 2px var(--wood-light);
}
.pdot {
width: 26px;
height: 6px;
background: rgba(255, 245, 224, 0.2);
transition: background 0.3s;
}
.pdot.done { background: rgba(245, 201, 63, 0.5); }
.pdot.active { background: var(--gold); }
.reset-btn {
position: fixed;
top: 20px;
right: 20px;
background: rgba(62, 36, 21, 0.7);
color: var(--gold);
border: 3px solid var(--wood-dark);
box-shadow: inset 0 0 0 2px var(--wood-light);
padding: 7px 14px;
font-family: 'Pixelify Sans', monospace;
font-weight: 600;
font-size: 13px;
cursor: pointer;
z-index: 10;
}
.reset-btn:hover { color: var(--cream); }
/* Debug panel */
.debug-toggle {
position: fixed;
bottom: 20px;
left: 20px;
background: rgba(62, 36, 21, 0.7);
color: var(--cream);
border: 2px solid var(--wood-light);
padding: 4px 10px;
font-size: 11px;
cursor: pointer;
font-family: monospace;
z-index: 10;
opacity: 0.6;
}
.debug-toggle:hover { opacity: 1; }
.debug-panel {
position: fixed;
bottom: 50px;
left: 20px;
width: 280px;
max-height: 60vh;
background: rgba(0, 0, 0, 0.9);
color: #b0e060;
padding: 14px;
border: 2px solid var(--wood-light);
font-family: monospace;
font-size: 11px;
overflow-y: auto;
z-index: 10;
display: none;
line-height: 1.5;
}
.debug-panel.open { display: block; }
.debug-panel b { color: var(--gold); }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes heartBeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
/* ========== Ambient animations ========== */
@keyframes cloud-drift {
from { transform: translateX(-22vw) scale(var(--s, 1.2)); }
to { transform: translateX(122vw) scale(var(--s, 1.2)); }
}
@keyframes twinkle {
0%, 100% { opacity: var(--alpha, 0.85); transform: scale(1); }
50% { opacity: 0.18; transform: scale(0.55); }
}
@keyframes sun-pulse {
0%, 100% { box-shadow:
0 0 0 6px #ffec80,
0 0 0 12px rgba(255, 236, 128, 0.40),
4px 4px 0 #c79024; }
50% { box-shadow:
0 0 0 9px #ffec80,
0 0 0 22px rgba(255, 236, 128, 0.32),
4px 4px 0 #c79024; }
}
@keyframes moon-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes portrait-breath {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.018); }
}
@keyframes badge-spin {
0%, 100% { transform: rotate(-6deg) scale(1); }
50% { transform: rotate(6deg) scale(1.08); }
}
@keyframes spark-up {
0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
15% { opacity: 1; }
100% { transform: translate(var(--dx, 0), -180px) scale(1.2); opacity: 0; }
}
@keyframes card-glow {
0%, 100% { filter: drop-shadow(0 0 0 transparent); }
50% { filter: drop-shadow(0 0 28px rgba(245, 201, 63, 0.18)); }
}
@keyframes card-enter-pop {
0% { transform: translateY(16px) scale(0.94); }
70% { transform: translateY(-3px) scale(1.018); }
100% { transform: translateY(0) scale(1); }
}
@keyframes card-enter-tilt {
0% { transform: translateX(22px) rotate(2.5deg) scale(0.96); }
68% { transform: translateX(-3px) rotate(-0.6deg) scale(1.01); }
100% { transform: translateX(0) rotate(0) scale(1); }
}
@keyframes card-enter-drop {
0% { transform: translateY(-26px) scale(0.97); }
70% { transform: translateY(4px) scale(1.01); }
100% { transform: translateY(0) scale(1); }
}
@keyframes bignum-pop {
0% { transform: scale(0.7); opacity: 0; letter-spacing: 6px; }
60% { transform: scale(1.08); opacity: 1; letter-spacing: 0; }
100% { transform: scale(1); opacity: 1; letter-spacing: 1px; }
}
@keyframes shimmer {
0% { background-position: -120% 0; }
100% { background-position: 220% 0; }
}
@keyframes grass-sway {
0%, 100% { transform: skewX(0deg); }
50% { transform: skewX(2deg); }
}
@keyframes leaf-fall {
0% { transform: translate(0, -40px) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
100% { transform: translate(var(--lx, 30px), 110vh) rotate(540deg); opacity: 0; }
}
/* Apply ambient animations */
.pixel-cloud {
left: 0; right: auto;
animation: cloud-drift var(--dur, 110s) linear infinite;
animation-delay: var(--delay, 0s);
}
.cloud-1 { top: 10%; --s: 1.6; --dur: 120s; --delay: -10s; }
.cloud-2 { top: 18%; --s: 2; --dur: 160s; --delay: -65s; }
.cloud-3 { top: 32%; --s: 1.2; --dur: 95s; --delay: -40s; }
.cloud-4 { top: 8%; --s: 1; --dur: 130s; --delay: -90s; }
.pixel-star { animation: twinkle 4.5s ease-in-out infinite; }
.star-1 { animation-delay: 0s; --alpha: 0.95; }
.star-2 { animation-delay: 1.1s; --alpha: 0.80; }
.star-3 { animation-delay: 2.3s; --alpha: 0.90; }
.star-4 { animation-delay: 0.6s; --alpha: 0.70; }
.star-5 { animation-delay: 1.7s; --alpha: 0.85; }
.pixel-sun { animation: sun-pulse 5s ease-in-out infinite; }
.pixel-moon { animation: moon-bob 6s ease-in-out infinite; }
.npc-portrait-frame { animation: portrait-breath 4.2s ease-in-out infinite; }
.npc-badge { animation: badge-spin 3s ease-in-out infinite; }
.card.active .card-inner,
.card.active .poster { animation: card-glow 5.5s ease-in-out infinite; }
.card.active .card-bignum { animation: bignum-pop 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
/* Sparkle particles overlay */
.sparkle-layer {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 2;
}
.sparkle {
position: absolute;
width: 6px;
height: 6px;
background: var(--gold);
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
box-shadow: 0 0 6px rgba(245, 201, 63, 0.65);
animation: spark-up var(--life, 3.4s) ease-out forwards;
animation-delay: var(--delay, 0s);
opacity: 0;
}
.card-inner.has-junimos,
.poster.has-junimos {
overflow: visible;
}
.junimo-ring {
position: absolute;
pointer-events: none;
z-index: 8;
}
.junimo-ring.variant-squad {
right: -12px;
bottom: -18px;
display: flex;
align-items: flex-end;
gap: 3px;
padding: 4px 5px 3px;
background: rgba(62, 36, 21, 0.14);
border: 2px solid rgba(62, 36, 21, 0.32);
box-shadow: 2px 2px 0 rgba(0,0,0,0.16);
}
.junimo-ring.variant-trio {
left: 10px;
bottom: -18px;
display: flex;
align-items: flex-end;
gap: 4px;
padding: 3px 4px;
background: rgba(62, 36, 21, 0.12);
border: 2px solid rgba(62, 36, 21, 0.28);
box-shadow: 2px 2px 0 rgba(0,0,0,0.14);
}
.junimo-ring.variant-corners,
.junimo-ring.variant-orbit,
.junimo-ring.variant-parade,
.junimo-ring.variant-peek,
.junimo-ring.variant-turn-corners,
.junimo-ring.variant-corner-party {
inset: -28px;
display: block;
}
.junimo {
position: relative;
width: 32px;
height: 32px;
background-image: url('../stardew/characters/Junimo.png');
background-repeat: no-repeat;
background-size: 256px 256px;
background-position: 0 0;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
filter:
var(--junimo-filter, sepia(1) saturate(2.4) hue-rotate(54deg) brightness(1.08))
drop-shadow(2px 3px 0 rgba(0,0,0,0.24));
animation:
junimo-steps 0.72s steps(4, end) infinite,
junimo-hop 0.92s steps(2, end) infinite;
animation-delay: var(--step-delay, 0s), var(--hop-delay, 0s);
}
.junimo.j1 { --junimo-filter: sepia(1) saturate(2.6) hue-rotate(55deg) brightness(1.08); --step-delay: 0s; --hop-delay: 0s; }
.junimo.j2 { --junimo-filter: sepia(1) saturate(2.3) hue-rotate(330deg) brightness(1.12); --step-delay: -0.18s; --hop-delay: -0.22s; }
.junimo.j3 { --junimo-filter: sepia(1) saturate(2.2) hue-rotate(150deg) brightness(1.08); --step-delay: -0.32s; --hop-delay: -0.44s; }
.junimo.j4 { --junimo-filter: sepia(1) saturate(2.5) hue-rotate(255deg) brightness(1.12); --step-delay: -0.46s; --hop-delay: -0.66s; }
.junimo.j5 { --junimo-filter: sepia(1) saturate(2.6) hue-rotate(85deg) brightness(1.08); --step-delay: -0.12s; --hop-delay: -0.12s; }
.junimo.j6 { --junimo-filter: sepia(1) saturate(2.2) hue-rotate(205deg) brightness(1.1); --step-delay: -0.28s; --hop-delay: -0.28s; }
.junimo.j7 { --junimo-filter: sepia(1) saturate(2.5) hue-rotate(20deg) brightness(1.12); --step-delay: -0.42s; --hop-delay: -0.42s; }
.junimo.j8 { --junimo-filter: sepia(1) saturate(2.2) hue-rotate(285deg) brightness(1.1); --step-delay: -0.56s; --hop-delay: -0.56s; }
.junimo.j9 { --junimo-filter: sepia(1) saturate(2.4) hue-rotate(130deg) brightness(1.08); --step-delay: -0.7s; --hop-delay: -0.7s; }
.junimo.j10 { --junimo-filter: sepia(1) saturate(2.3) hue-rotate(350deg) brightness(1.08); --step-delay: -0.84s; --hop-delay: -0.84s; }
.junimo.j11 { --junimo-filter: sepia(1) saturate(2.5) hue-rotate(240deg) brightness(1.12); --step-delay: -0.98s; --hop-delay: -0.98s; }
.junimo.j12 { --junimo-filter: sepia(1) saturate(2.2) hue-rotate(65deg) brightness(1.1); --step-delay: -1.12s; --hop-delay: -1.12s; }
.junimo-ring.variant-corners .junimo,
.junimo-ring.variant-orbit .junimo,
.junimo-ring.variant-parade .junimo,
.junimo-ring.variant-peek .junimo,
.junimo-ring.variant-turn-corners .junimo,
.junimo-ring.variant-corner-party .junimo {
position: absolute;
}
.junimo-ring.variant-trio .junimo {
animation:
junimo-steps 0.72s steps(4, end) infinite,
junimo-hop 0.82s steps(2, end) infinite,
junimo-wiggle 2.4s steps(4, end) infinite;
animation-delay: var(--step-delay, 0s), var(--hop-delay, 0s), var(--hop-delay, 0s);
}
.junimo-ring.variant-corners .junimo {
animation:
junimo-steps 0.72s steps(4, end) infinite,
junimo-corner-bob 1.1s steps(2, end) infinite;
animation-delay: var(--step-delay, 0s), var(--hop-delay, 0s);
}
.junimo-ring.variant-corners .j1 { left: -4px; top: -4px; }
.junimo-ring.variant-corners .j2 { right: -4px; top: -4px; }
.junimo-ring.variant-corners .j3 { left: -4px; bottom: -4px; }
.junimo-ring.variant-corners .j4 { right: -4px; bottom: -4px; }
.junimo-ring.variant-orbit .junimo {
animation:
junimo-steps 0.72s steps(4, end) infinite,
junimo-orbit 13s linear infinite;
animation-delay: var(--step-delay, 0s), var(--orbit-delay, 0s);
}
.junimo-ring.variant-orbit .j1 { --orbit-delay: 0s; }
.junimo-ring.variant-orbit .j2 { --orbit-delay: -3.25s; }
.junimo-ring.variant-orbit .j3 { --orbit-delay: -6.5s; }
.junimo-ring.variant-orbit .j4 { --orbit-delay: -9.75s; }
.junimo-ring.variant-parade .junimo {
top: calc(100% - 18px);
animation:
junimo-steps 0.72s steps(4, end) infinite,
junimo-parade 4.8s steps(8, end) infinite;
animation-delay: var(--step-delay, 0s), var(--parade-delay, 0s);
}
.junimo-ring.variant-parade .j1 { --parade-start: -20px; --parade-lift: -5px; --parade-delay: 0s; }
.junimo-ring.variant-parade .j2 { --parade-start: 22px; --parade-lift: -11px; --parade-delay: -0.7s; }
.junimo-ring.variant-parade .j3 { --parade-start: 64px; --parade-lift: -7px; --parade-delay: -1.4s; }
.junimo-ring.variant-parade .j4 { --parade-start: 106px; --parade-lift: -13px; --parade-delay: -2.1s; }
.junimo-ring.variant-peek .junimo {
animation:
junimo-steps 0.72s steps(4, end) infinite,
junimo-peek 2.6s steps(4, end) infinite;
animation-delay: var(--step-delay, 0s), var(--peek-delay, 0s);
}
.junimo-ring.variant-peek .j1 { left: 8%; top: -15px; --peek-x: 0px; --peek-y: 10px; --peek-delay: 0s; }
.junimo-ring.variant-peek .j2 { right: 10%; top: -15px; --peek-x: 0px; --peek-y: 10px; --peek-delay: -0.55s; }
.junimo-ring.variant-peek .j3 { left: -16px; bottom: 18%; --peek-x: 11px; --peek-y: 0px; --peek-delay: -1.1s; }
.junimo-ring.variant-peek .j4 { right: -16px; bottom: 18%; --peek-x: -11px; --peek-y: 0px; --peek-delay: -1.65s; }
.junimo-ring.variant-turn-corners .junimo {
background-image: none;
animation:
junimo-corner-bob 0.95s steps(2, end) infinite;
animation-delay: var(--hop-delay, 0s);
}
.junimo-ring.variant-turn-corners .junimo::before {
content: '';
position: absolute;
inset: 0;
background-image: url('../stardew/characters/Junimo.png');
background-repeat: no-repeat;
background-size: 256px 256px;
background-position: -128px 0;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
transform-origin: 50% 50%;
animation: junimo-turn-dir 2.4s steps(1, end) infinite;
animation-delay: var(--turn-delay, 0s);
}
.junimo-ring.variant-turn-corners .j1 { left: -4px; top: -4px; --turn-delay: 0s; }
.junimo-ring.variant-turn-corners .j2 { right: -4px; top: -4px; --turn-delay: -0.6s; }
.junimo-ring.variant-turn-corners .j3 { left: -4px; bottom: -4px; --turn-delay: -1.2s; }
.junimo-ring.variant-turn-corners .j4 { right: -4px; bottom: -4px; --turn-delay: -1.8s; }
.junimo-ring.variant-corner-party .junimo {
animation:
junimo-steps 0.72s steps(4, end) infinite,
junimo-party-hop 0.78s steps(2, end) infinite;
animation-delay: var(--step-delay, 0s), var(--party-delay, 0s);
}
.junimo-ring.variant-corner-party .j1 { left: -8px; top: -8px; --party-delay: 0s; }
.junimo-ring.variant-corner-party .j2 { left: 20px; top: -12px; --party-delay: -0.16s; }
.junimo-ring.variant-corner-party .j3 { left: 48px; top: -8px; --party-delay: -0.32s; }
.junimo-ring.variant-corner-party .j4 { right: 48px; top: -8px; --party-delay: -0.08s; }
.junimo-ring.variant-corner-party .j5 { right: 20px; top: -12px; --party-delay: -0.24s; }
.junimo-ring.variant-corner-party .j6 { right: -8px; top: -8px; --party-delay: -0.4s; }
.junimo-ring.variant-corner-party .j7 { left: -8px; bottom: -8px; --party-delay: -0.12s; }
.junimo-ring.variant-corner-party .j8 { left: 20px; bottom: -12px; --party-delay: -0.28s; }
.junimo-ring.variant-corner-party .j9 { left: 48px; bottom: -8px; --party-delay: -0.44s; }
.junimo-ring.variant-corner-party .j10 { right: 48px; bottom: -8px; --party-delay: -0.2s; }
.junimo-ring.variant-corner-party .j11 { right: 20px; bottom: -12px; --party-delay: -0.36s; }
.junimo-ring.variant-corner-party .j12 { right: -8px; bottom: -8px; --party-delay: -0.52s; }
@keyframes junimo-steps {
from { background-position: 0 0; }
to { background-position: -128px 0; }
}
@keyframes junimo-hop {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-7px) rotate(2deg); }
}
@keyframes junimo-corner-bob {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-5px) rotate(2deg); }
}
@keyframes junimo-wiggle {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(3px); }
}
@keyframes junimo-orbit {
0% { left: 10%; top: -10px; }
24% { left: calc(100% - 34px); top: -10px; }
25% { left: calc(100% - 18px); top: 12%; }
49% { left: calc(100% - 18px); top: calc(100% - 34px); }
50% { left: 76%; top: calc(100% - 18px); }
74% { left: 6%; top: calc(100% - 18px); }
75% { left: -10px; top: 72%; }
99% { left: -10px; top: 10%; }
100% { left: 10%; top: -10px; }
}
@keyframes junimo-parade {
0%, 100% { left: var(--parade-start, 0); transform: translateY(0) rotate(-2deg); }
25% { transform: translateY(var(--parade-lift, -8px)) rotate(2deg); }
50% { left: calc(var(--parade-start, 0) + 54px); transform: translateY(0) rotate(-2deg); }
75% { transform: translateY(var(--parade-lift, -8px)) rotate(2deg); }
}
@keyframes junimo-peek {
0%, 100% { transform: translate(0, 0); }
40%, 70% { transform: translate(var(--peek-x, 0), var(--peek-y, 0)); }
}
@keyframes junimo-turn-dir {
0%, 24.99% { background-position: -128px 0; transform: scaleX(1); }
25%, 49.99% { background-position: 0 -64px; transform: scaleX(1); }
50%, 74.99% { background-position: 0 -128px; transform: scaleX(1); }
75%, 99.99% { background-position: 0 -64px; transform: scaleX(-1); }
100% { background-position: -128px 0; transform: scaleX(1); }
}
@keyframes junimo-party-hop {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Highlighted number shimmer when card is active */
.card.active .stat-cell .num {
background: linear-gradient(90deg,
var(--wood-dark) 0%,
var(--wood-dark) 40%,
var(--gold-dark) 50%,
var(--wood-dark) 60%,
var(--wood-dark) 100%);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: shimmer 3.6s linear infinite;
}
/* Legacy ambient leaves are disabled; weather now owns falling particles. */
.leaf {
display: none !important;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.pixel-cloud, .pixel-star, .pixel-sun, .pixel-moon,
.npc-portrait-frame, .npc-badge,
.card.active .card-inner, .card.active .poster,
.card.active .card-bignum,
.card.active .stat-cell .num,
.leaf, .season-leaf, .sparkle, .junimo-ring, .junimo, .junimo::before { animation: none !important; }
}
/* Very subtle CRT scanlines on the active card for retro depth */
.card.active .card-inner::after,
.card.active .poster::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 3px,
rgba(60, 36, 16, 0.04) 3px,
rgba(60, 36, 16, 0.04) 4px);
z-index: 1;
mix-blend-mode: multiply;
}
/* Card-tag breathes when its card is active */
@keyframes tag-breath {
0%, 100% { transform: translateY(0); background: var(--paper); }
50% { transform: translateY(-1px); background: #fff0c8; }
}
.card.active .card-tag { animation: tag-breath 3s ease-in-out infinite; }
/* Progress dots — active dot gets a soft pulsing glow */
@keyframes pdot-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 201, 63, 0); }
50% { box-shadow: 0 0 0 4px rgba(245, 201, 63, 0.25); }
}
.pdot.active { animation: pdot-pulse 2s ease-in-out infinite; }
/* Save button — gentle gold shine sweep on hover */
.save-btn {
position: relative;
overflow: hidden;
}
.save-btn::after {
content: '';
position: absolute;
top: 0; left: -120%;
width: 60%; height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.35) 50%,
transparent 100%);
transform: skewX(-20deg);
transition: left 0.7s ease;
pointer-events: none;
}
.save-btn:hover::after { left: 130%; }
/* ========== Tutorial Modal ========== */
.tutorial-link {
cursor: pointer;
}
.modal-mask {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 100;
padding: 20px;
}
.modal-mask.open { display: flex; }
/* ROADMAP 1.1.A：farmhand 选择器列表 */
.farmhand-modal-box { max-width: 420px; }
.farmhand-desc {
padding: 14px 22px 6px;
font-size: 13px;
color: var(--ink);
line-height: 1.55;
}
.farmhand-list {
padding: 8px 18px 18px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
}
.farmhand-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border: 2px solid var(--wood-dark);
background: #fff;
cursor: pointer;
font-family: inherit;
color: var(--ink);
transition: background 0.12s, transform 0.05s;
}
.farmhand-row:hover { background: var(--cream); }
.farmhand-row:active { transform: translateY(1px); }
.farmhand-row .farmhand-name { font-weight: 700; font-size: 14px; }
.farmhand-row .farmhand-tag {
font-size: 10px;
padding: 3px 7px;
border: 1px solid var(--wood-dark);
border-radius: 3px;
background: var(--cream);
color: var(--wood-dark);
letter-spacing: 0.5px;
}
.modal-box {
background: var(--cream);
border: 4px solid var(--wood-dark);
box-shadow:
inset 0 0 0 4px var(--cream),
inset 0 0 0 8px var(--wood-light),
inset 0 0 0 10px var(--wood-dark),
0 12px 0 rgba(0, 0, 0, 0.5);
max-width: 540px;
width: 100%;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
color: var(--ink);
}
.modal-head {
padding: 18px 22px 12px;
border-bottom: 3px solid var(--wood-dark);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-head h2 {
font-family: 'Press Start 2P', monospace;
font-size: 13px;
color: var(--wood-dark);
letter-spacing: 1px;
}
.modal-close {
background: var(--wood-dark);
color: var(--gold);
border: 2px solid var(--wood-dark);
box-shadow: inset 0 0 0 1px var(--gold-dark);
width: 30px;
height: 30px;
font-family: 'Press Start 2P', monospace;
font-size: 14px;
cursor: pointer;
}
.tab-bar {
display: flex;
background: var(--paper);
border-bottom: 3px solid var(--wood-dark);
}
.tab-btn {
flex: 1;
background: var(--paper);
border: none;
border-right: 3px solid var(--wood-dark);
padding: 12px 0;
font-family: 'Pixelify Sans', monospace;
font-size: 15px;
font-weight: 700;
color: var(--wood-mid);
cursor: pointer;
transition: background 0.2s;
}
.tab-btn:last-child { border-right: none; }
.tab-btn.active {
background: var(--cream);
color: var(--wood-dark);
box-shadow: inset 0 4px 0 var(--gold);
}
.tab-content {
padding: 22px;
overflow-y: auto;
flex: 1;
user-select: text;
-webkit-user-select: text;
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.tab-pane h3 {
font-family: 'Pixelify Sans', monospace;
font-size: 17px;
color: var(--wood-dark);
margin: 12px 0 8px;
padding: 4px 10px;
background: var(--gold);
display: inline-block;
}
.tab-pane h3:first-child { margin-top: 0; }
.tab-pane ol, .tab-pane ul {
padding-left: 20px;
color: var(--wood-dark);
font-size: 13px;
line-height: 1.85;
}
.tab-pane li { margin-bottom: 6px; }
.tab-pane code {
background: var(--paper);
padding: 2px 6px;
font-family: monospace;
font-size: 12px;
color: var(--wood-dark);
border: 1px solid var(--wood-light);
word-break: break-all;
user-select: text;
-webkit-user-select: text;
cursor: text;
}
.tutorial-copyable,
.tutorial-copyable * {
user-select: text;
-webkit-user-select: text;
}
.tab-pane .tip {
background: rgba(245, 201, 63, 0.18);
border-left: 4px solid var(--gold-dark);
padding: 8px 12px;
font-size: 12px;
color: var(--wood-dark);
margin: 10px 0;
line-height: 1.6;
}
.heart-beat { animation: heartBeat 1.6s ease-in-out infinite; display: inline-block; }
/* ========== 语言切换按钮 ========== */
.lang-toggle {
position: fixed;
top: 70px;
right: 20px;
/* 固定尺寸：避免 "English"（拉丁像素字宽）与 "中文"（CJK 回退字窄）切换时按钮一大一小 */
min-width: 92px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--wood-dark);
color: var(--gold);
border: 3px solid var(--wood-dark);
box-shadow: inset 0 0 0 2px var(--gold-dark), 0 3px 0 #1a0e05;
padding: 0 12px;
font-family: 'Press Start 2P', 'DotGothic16', 'Noto Sans SC', monospace;
font-size: 11px;
line-height: 1;
cursor: pointer;
z-index: 10;
letter-spacing: 1px;
box-sizing: border-box;
}
.lang-toggle:hover { color: var(--cream); }
/* 按钮文字始终是"对面"那种语言：zh 页面时按钮显示 English（像素字），
en 页面时显示中文（用 Noto Sans SC 才不会糊） */
html[lang="zh-CN"] .lang-toggle {
font-family: 'Press Start 2P', monospace;
font-size: 11px;
}
html[lang="en"] .lang-toggle {
/* 英文页面下按钮显示"中文"——也走像素字保持品牌一致；11px = Cubic 11 native grid */
font-family: 'Cubic 11', 'Noto Sans SC', 'PingFang SC', sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 2px;
-webkit-font-smoothing: none;
font-smooth: never;
}
/* 音频切换按钮（与语言按钮风格一致） */
.audio-toggle-btn {
position: fixed;
top: 70px;
right: 122px;
width: 38px;
height: 32px;
background: var(--wood-dark);
color: var(--gold);
border: 3px solid var(--wood-dark);
box-shadow: inset 0 0 0 2px var(--gold-dark), 0 3px 0 #1a0e05;
font-size: 16px;
line-height: 1;
cursor: pointer;
z-index: 10;
box-sizing: border-box;
}
.audio-toggle-btn:hover { color: var(--cream); }
/* ROADMAP 1.1.B 隐私 toggle：跟 audio 按钮同款木牌外观，放在 audio 左边
开启后 body.privacy-mode → 渲染层会把玩家/农场/NPC/宠物名替换成占位串。
图标 🔓→🔒 切换给视觉反馈；title 同步语言 */
.privacy-toggle-btn {
position: fixed;
top: 70px;
right: 170px;
width: 38px;
height: 32px;
background: var(--wood-dark);
color: var(--gold);
border: 3px solid var(--wood-dark);
box-shadow: inset 0 0 0 2px var(--gold-dark), 0 3px 0 #1a0e05;
font-size: 16px;
line-height: 1;
cursor: pointer;
z-index: 10;
box-sizing: border-box;
}
.privacy-toggle-btn:hover { color: var(--cream); }
body.privacy-mode .privacy-toggle-btn {
/* 开启时按钮文字更亮 + 背景偏酒红，强提示当前在"隐身模式" */
background: #6b2424;
color: #ffe1a8;
box-shadow: inset 0 0 0 2px #d4a368, 0 3px 0 #2a0a0a;
}
body.landing-mode .lang-toggle {
top: 14px;
right: 20px;
opacity: 0.82;
}
body.landing-mode .audio-toggle-btn {
top: 14px;
right: 122px;
opacity: 0.82;
}
body.landing-mode .privacy-toggle-btn {
top: 14px;
right: 170px;
opacity: 0.82;
}
body.landing-mode .lang-toggle:hover,
body.landing-mode .audio-toggle-btn:hover,
body.landing-mode .privacy-toggle-btn:hover {
opacity: 1;
}
/* ========== Mobile responsive ========== */
@media (max-width: 540px) {
#landing {
max-width: 100%;
padding: 72px 12px 28px;
justify-content: flex-start;
min-height: 100svh;
}
.title-banner {
width: min(356px, calc(100vw - 28px));
padding: 20px 16px 18px;
margin: 6px auto 10px;
}
.title-banner h1 { font-size: 22px; line-height: 1.2; letter-spacing: 2px; }
html[lang="zh-CN"] .title-banner h1 { font-size: 31px; letter-spacing: 4px; }
html[lang="en"] .title-banner h1 { font-size: 19px; letter-spacing: 1px; }
.title-banner::before, .title-banner::after { width: 44px; height: 22px; top: -14px; }
.title-subtitle {
max-width: calc(100vw - 44px);
margin-bottom: 10px;
font-size: 10px;
letter-spacing: 3px;
}
.landing-menu {
width: min(356px, calc(100vw - 24px));
padding: 12px;
gap: 10px;
box-shadow:
inset 0 0 0 3px #f6cb84,
inset 0 0 0 6px #8a481d,
4px 6px 0 rgba(38, 29, 12, 0.25);
}
.landing-actions {
grid-template-columns: 1fr;
gap: 8px;
}
.demo-link,
.tutorial-link,
.photo-ach-link {
min-height: 42px;
font-size: 11px;
}
.landing-info {
width: min(356px, calc(100vw - 24px));
margin-top: 10px;
padding: 7px 10px 7px;
}
.privacy-note {
font-size: 10.5px;
line-height: 1.45;
}
.landing-legal-note {
margin-top: 4px;
font-size: 8.5px;
line-height: 1.35;
}
.upload-options { flex-direction: column; }
.upload-options .upload-zone {
min-height: 108px;
grid-template-columns: 48px minmax(0, 1fr);
padding: 16px 14px;
gap: 10px;
}
.upload-pixel-icon {
width: 36px;
height: 42px;
border-width: 3px;
}
.upload-zone .hint {
font-size: 11px;
line-height: 1.5;
}
.upload-options p { font-size: 17px; }
.photo-ach-modal-box {
max-height: 94svh;
}
.photo-ach-body {
padding: 12px;
}
.photo-ach-card {
padding: 10px;
}
.photo-ach-toast {
grid-template-columns: 48px minmax(0, 1fr);
gap: 9px;
padding: 10px;
}
.photo-ach-star {
width: 44px;
height: 44px;
}
.photo-ach-star::before {
width: 25px;
height: 25px;
}
.photo-ach-kicker {
font-size: 8px;
margin-bottom: 5px;
}
.photo-ach-title {
font-size: 20px;
}
.photo-ach-empty {
font-size: 17px;
}
.photo-ach-caption {
font-size: 13px;
}
.photo-ach-controls {
grid-template-columns: 1fr;
gap: 8px;
}
.photo-ach-presets {
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.photo-ach-preset {
font-size: 11px;
}
.photo-ach-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.photo-ach-btn {
min-width: 0;
padding-left: 8px;
padding-right: 8px;
font-size: 12px;
}
.card {
padding: 50px 8px 86px;
justify-content: flex-start;
}
.card-inner {
width: min(340px, calc(100vw - 24px));
max-width: calc(100vw - 24px);
padding: 24px 14px 22px;
max-height: 92vh;
margin-left: 12px;
margin-right: 12px;
}
.poster {
width: min(350px, calc(100vw - 40px)) !important;
max-width: min(350px, calc(100vw - 40px)) !important;
}
.card-headline { font-size: 28px; }
.card-bignum { font-size: 70px; letter-spacing: 2px; }
.card-emoji { font-size: 52px; }
.npc-portrait-wrap { width: 110px; height: 110px; }
.npc-showcase { width: 292px; height: 144px; }
.npc-showcase::before { left: 188px; right: 24px; height: 18px; }
.npc-showcase::after { left: 202px; bottom: 22px; width: 62px; }
.npc-showcase .npc-portrait-wrap { left: 12px; top: 9px; width: 112px; height: 112px; }
.npc-showcase .figure-farmer { display: none !important; }
.npc-showcase .figure-npc { left: 202px; }
.couple-heart-bubble { left: 218px; top: 8px; transform: scale(0.9); transform-origin: center; }
.npc-portrait-frame #npc-portrait-emoji { font-size: 48px; }
.npc-badge { width: 36px; height: 36px; font-size: 21px; right: -6px; bottom: -4px; }
.stat-cell { padding: 10px 6px; }
.stat-cell .num { font-size: 26px; }
.stat-cell .label { font-size: 10px; }
.nav-btn { width: 48px; height: 38px; font-size: 12px; }
.nav-arrows {
top: auto;
bottom: 50px;
width: auto;
justify-content: center;
transform: translateX(-50%);
gap: 10px;
pointer-events: auto;
}
.progress-dots {
top: 16px;
left: 132px;
right: 10px;
transform: none;
justify-content: center;
gap: 4px;
padding: 6px 8px;
overflow: hidden;
}
.pdot {
flex: 1 1 0;
max-width: 18px;
min-width: 10px;
height: 4px;
}
.reset-btn { padding: 5px 10px; font-size: 11px; top: 16px; right: 12px; }
body.landing-mode .title-scene .title-lantern-string {
top: 46px;
}
.lang-toggle,
body.landing-mode .lang-toggle { top: 10px; right: 10px; min-width: 72px; height: 24px; padding: 0 7px; font-size: 9px; opacity: 0.84; }
.audio-toggle-btn,
body.landing-mode .audio-toggle-btn { top: 10px; right: 88px; width: 28px; height: 24px; font-size: 12px; opacity: 0.84; }
.privacy-toggle-btn,
body.landing-mode .privacy-toggle-btn { top: 10px; right: 122px; width: 28px; height: 24px; font-size: 12px; opacity: 0.84; }
.game-hud {
top: 12px;
left: 10px;
gap: 5px;
transform: scale(0.82);
transform-origin: top left;
}
.world-switch {
top: 62px;
left: 10px;
transform: scale(0.82);
transform-origin: top left;
gap: 3px;
padding: 4px;
}
.switch-row { gap: 3px; }
.season-btn,
.weather-btn { width: 28px; height: 26px; font-size: 14px; }
.season-btn { font-size: 8px; }
.hud-money,
.hud-progress { display: none; }
.inventory-bar {
bottom: 8px;
gap: 3px;
padding: 4px;
}
.inv-slot {
width: 34px;
height: 34px;
font-size: 20px;
}
.inv-slot .qty { font-size: 9px; }
.town-headline {
max-width: 230px;
font-size: 21px;
}
.verdict-stamp {
min-width: 48px;
padding: 7px 6px;
font-size: 8px;
}
.summary-quad { grid-template-columns: 1fr 1fr; gap: 6px; }
.quad-cell { padding: 8px 6px; }
.quad-cell .qval { font-size: 13px; }
.summary-personality .pemoji { font-size: 30px; }
.summary-personality .pname { font-size: 17px; }
.debug-toggle { font-size: 10px; padding: 3px 8px; bottom: 12px; left: 12px; }
.save-btn { padding: 8px 16px; font-size: 13px; }
.poster-actions {
bottom: 14px;
width: min(360px, calc(100vw - 20px));
gap: 7px;
}
.export-privacy {
align-self: center;
margin-right: 0;
min-height: 28px;
padding: 4px 8px;
font-size: 11px;
}
.poster-action-buttons {
width: 100%;
gap: 6px;
}
.poster-action-buttons .save-btn {
flex: 1 1 0;
min-width: 0;
padding-left: 6px;
padding-right: 6px;
font-size: 12px;
line-height: 1.15;
}
.share-toolbar {
bottom: 10px;
max-width: calc(100vw - 20px);
gap: 6px;
padding: 6px;
}
.share-tool-btn {
min-height: 32px;
padding: 0 9px;
font-size: 12px;
}
body.share-mode .card {
padding: 18px 10px 82px 20px;
justify-content: flex-start;
}
body.share-mode .card.active .poster {
width: min(350px, calc(100vw - 40px)) !important;
max-width: min(350px, calc(100vw - 40px)) !important;
max-height: none !important;
}
body.share-mode .poster-numbers {
gap: 2px;
padding: 6px 3px;
}
body.share-mode .poster-numbers > div {
min-width: 0;
overflow: hidden;
font-size: 9px;
}
body.share-mode .poster-numbers .num-px {
font-size: 9px;
margin: 0;
}
body.share-mode .poster-numbers .ico {
font-size: 12px;
}
}
/* Public-safe release mode: no copied Stardew Valley image/audio assets. */
body.public-safe.landing-mode::before {
background-image:
linear-gradient(to bottom, #87cdf2 0%, #87cdf2 42%, transparent 42%),
linear-gradient(to bottom, #7fc9ee 0%, #6eb25a 62%, #4b8a39 100%) !important;
background-repeat: no-repeat !important;
background-size: 100% 100% !important;
animation: none !important;
}
body.public-safe.landing-mode::after,
body.public-safe .title-scene .title-tree,
body.public-safe .title-scene .title-bush {
background-image: none !important;
}
body.public-safe .title-scene .title-tree {
background:
linear-gradient(#79502b, #5d3a22) 34px 54px / 12px 50px no-repeat,
radial-gradient(circle at 50% 42%, #4f9b43 0 38px, transparent 39px) !important;
border-radius: 50% 50% 38% 38%;
}
body.public-safe .title-scene .title-bush {
background: radial-gradient(circle at 50% 70%, #4d913d 0 30px, transparent 31px) !important;
border-radius: 50%;
}
body.public-safe .title-scene .title-ground,
body.public-safe .farm-tile-grid {
background-image:
linear-gradient(180deg, rgba(0,0,0,0) 0 58%, rgba(30,60,20,0.26) 100%),
repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 32px),
repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 32px) !important;
}
body.public-safe .title-scene .title-grass-tuft,
body.public-safe .sdv-coin-icon,
body.public-safe .hud-season-sprite,
body.public-safe .stardew-object-icon,
body.public-safe .junimo,
body.public-safe .junimo::before,
body.public-safe .rain-drop {
background-image: none !important;
}
body.public-safe .title-scene .title-grass-tuft {
background: linear-gradient(90deg, #2f6d30 0 5px, #4f963f 5px 15px, #2f6d30 15px 22px) !important;
border-radius: 9px 9px 2px 2px;
}
body.public-safe .sdv-coin-icon {
border-radius: 50%;
background: radial-gradient(circle at 35% 32%, #ffe59a 0 22%, #d8a63a 23% 70%, #8e6422 71% 100%) !important;
}
body.public-safe .hud-season-sprite {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
body.public-safe .hud-season-sprite[data-season="spring"]::before { content: '🌱'; }
body.public-safe .hud-season-sprite[data-season="summer"]::before { content: '☀️'; }
body.public-safe .hud-season-sprite[data-season="fall"]::before { content: '🍂'; }
body.public-safe .hud-season-sprite[data-season="winter"]::before { content: '❄️'; }
body.public-safe .public-safe-npc-sprite {
background-image: none !important;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 24px;
line-height: 1;
text-align: center;
}
body.public-safe .inventory-npc-sprite.public-safe-npc-sprite {
font-size: 18px;
}
body.public-safe .npc-cameo .public-safe-npc-sprite {
font-size: 25px;
background: #f4dfaa !important;
}
body.public-safe .junimo {
border-radius: 48% 48% 42% 42%;
background: var(--junimo-safe-color, #74b84f) !important;
}
body.public-safe .junimo::after {
content: '';
position: absolute;
left: 8px;
top: 11px;
width: 4px;
height: 4px;
background: #20130f;
box-shadow: 12px 0 0 #20130f;
}
body.public-safe .junimo.j2 { --junimo-safe-color: #df6f8e; }
body.public-safe .junimo.j3 { --junimo-safe-color: #70a6d9; }
body.public-safe .junimo.j4 { --junimo-safe-color: #d9c14f; }
body.public-safe .rain-drop {
width: 3px;
height: 16px;
background: #92c9ff !important;
}