* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, "Segoe UI", Tahoma, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1a2e1a;
}

.hidden {
  display: none !important;
}

/* ---------- Login Screen ---------- */
#login-screen {
  width: 100%;
  height: 100%;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #10150f;
  color: #f3f7d7;
}

.login-backdrop,
.login-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.login-backdrop { z-index: -2; background: radial-gradient(circle at 50% 42%, #425a31 0%, #1c2c20 38%, #090d0b 100%); }
.forest-layer { position: absolute; inset: 0; opacity: .68; }
.forest-back {
  background:
    radial-gradient(ellipse at 12% 20%, #182a1c 0 13%, transparent 14%),
    radial-gradient(ellipse at 88% 26%, #182a1c 0 16%, transparent 17%),
    linear-gradient(158deg, transparent 0 35%, rgba(6,14,9,.7) 36% 40%, transparent 41%),
    linear-gradient(22deg, transparent 0 58%, rgba(7,14,9,.75) 59% 66%, transparent 67%);
  filter: blur(1px);
}
.forest-front {
  inset: auto 0 0;
  height: 34%;
  opacity: .9;
  background:
    radial-gradient(ellipse at 8% 80%, #0a160d 0 18%, transparent 19%),
    radial-gradient(ellipse at 28% 96%, #0a160d 0 22%, transparent 23%),
    radial-gradient(ellipse at 72% 94%, #0a160d 0 24%, transparent 25%),
    radial-gradient(ellipse at 94% 76%, #0a160d 0 20%, transparent 21%),
    linear-gradient(180deg, transparent, #081009);
}
.glow-plant { position: absolute; color: #b9ff82; font-size: clamp(40px, 7vw, 90px); text-shadow: 0 0 10px #7eea62, 0 0 34px rgba(87, 220, 98, .7); animation: glow-breathe 2.8s ease-in-out infinite; }
.glow-left { left: 7%; bottom: 18%; }
.glow-right { right: 8%; bottom: 23%; animation-delay: -1.2s; }
.login-scanlines { opacity: .13; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.14) 4px 5px); mix-blend-mode: overlay; }

.login-box {
  width: min(620px, calc(100vw - 32px));
  min-height: 430px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 58px clamp(24px, 7vw, 84px) 32px;
  text-align: center;
  background: linear-gradient(145deg, rgba(45, 58, 36, .97), rgba(18, 25, 17, .98));
  border: 4px solid #8a7546;
  border-radius: 18px;
  box-shadow: 0 0 0 7px rgba(18, 25, 15, .8), 0 24px 80px rgba(0,0,0,.62), inset 0 0 0 2px rgba(194, 168, 91, .22);
}
.login-box::before, .login-box::after { content: ""; position: absolute; width: 38px; height: 38px; border: 5px solid #a4894b; opacity: .8; }
.login-box::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0; }
.login-box::after { right: 14px; bottom: 14px; border-left: 0; border-top: 0; border-radius: 0 0 10px; }
.login-top-sprout { position: absolute; top: -36px; font-size: 45px; color: #d5ff86; text-shadow: 0 0 14px #83ec64; animation: glow-breathe 2.4s ease-in-out infinite; }
.brand-mark { line-height: .82; letter-spacing: .1em; text-shadow: 3px 3px 0 #142015, 0 0 18px rgba(135, 240, 100, .25); }
.brand-mark span { display: block; font-size: clamp(32px, 6vw, 58px); font-weight: 1000; color: #c8ef75; }
.brand-mark strong { display: block; margin-top: 8px; font-size: clamp(24px, 4.5vw, 44px); font-weight: 1000; color: #79cb66; }
.login-subtitle { margin: 18px 0 28px; color: #c8b878; font: 700 11px/1.2 monospace; letter-spacing: .16em; }
#login-form { width: min(360px, 100%); display: flex; flex-direction: column; align-items: stretch; }
#login-form label { margin-bottom: 8px; color: #f0db91; font: 700 12px monospace; letter-spacing: .13em; text-align: left; }
.input-shell { display: flex; align-items: center; min-height: 54px; padding: 0 16px; background: #0b100b; border: 3px solid #715b38; border-radius: 9px; box-shadow: inset 0 3px 0 rgba(0,0,0,.4), 0 0 0 2px rgba(195, 168, 92, .1); }
.cursor-block { width: 8px; height: 25px; flex: 0 0 auto; margin-right: 10px; background: #f4cf61; animation: cursor-blink 1s steps(1) infinite; }
#name-input { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #eff6cf; font: 700 15px monospace; letter-spacing: .05em; user-select: text; -webkit-user-select: text; }
#name-input::placeholder { color: #728066; opacity: .9; }
#join-btn { min-height: 56px; margin-top: 16px; padding: 12px 20px; display: flex; align-items: center; justify-content: center; gap: 18px; border: 2px solid #a9e96d; border-radius: 999px; background: linear-gradient(180deg, #9bea70, #4a9f59); color: #102012; font: 1000 18px sans-serif; cursor: pointer; box-shadow: inset 0 3px 0 rgba(255,255,255,.32), 0 7px 0 #245d3b, 0 12px 22px rgba(0,0,0,.28); transition: transform .14s ease, filter .14s ease; }
#join-btn:hover { filter: brightness(1.12); transform: translateY(-2px); }
#join-btn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 3px 0 #245d3b; }
#join-btn:disabled { opacity: .65; cursor: wait; }
#status-text { min-height: 18px; margin-top: 16px; color: #ffd276; font: 700 12px monospace; }
.login-hint { margin-top: 16px; color: #81917a; font: 10px monospace; letter-spacing: .08em; }
.login-decoration { position: absolute; z-index: -1; display: flex; flex-direction: column; gap: 30px; color: #c9df83; font-size: 42px; text-shadow: 0 0 18px rgba(130, 239, 99, .5); opacity: .88; }
.login-decoration-left { left: clamp(8px, 12vw, 16%); bottom: 16%; transform: rotate(-12deg); }
.login-decoration-right { right: clamp(8px, 12vw, 16%); bottom: 18%; transform: rotate(12deg); }
.pixel-tool { color: #d7b66f; }
.pixel-mutant { color: #f49caf; }
@keyframes cursor-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes glow-breathe { 0%, 100% { transform: scale(.96); filter: brightness(.9); } 50% { transform: scale(1.05); filter: brightness(1.25); } }

/* ---------- Game Screen ---------- */
#game-screen {
  width: 100%;
  height: 100%;
  position: relative;
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #3a6b34;
  touch-action: none;
  image-rendering: pixelated;
  contain: strict;
}

/* M1 is a real scene transition. Keep only the mine HUD over its fullscreen world canvas. */
.mine-fullscreen-hud { position:fixed; z-index:80; top:max(12px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); width:min(560px,calc(100vw - 24px)); padding:12px 14px; color:#f4f1d7; background:linear-gradient(145deg,rgba(17,28,35,.96),rgba(24,38,42,.91)); border:2px solid #c5a76a; box-shadow:0 5px 0 #101517,0 12px 34px #0009,inset 0 0 0 2px #57655a; image-rendering:pixelated; }
.mine-fullscreen-hud.hidden { display:none!important; }
.mine-fullscreen-hud header { display:flex; align-items:center; gap:10px; }
.mine-hud-icon { display:grid; place-items:center; width:38px; height:38px; flex:none; color:#ffe39b; font-size:22px; background:#293b3b; border:1px solid #819077; }
.mine-fullscreen-hud header>span:nth-child(2) { display:flex; flex:1; flex-direction:column; gap:3px; }
.mine-fullscreen-hud header b { font-size:15px; color:#fff0bd; }
.mine-fullscreen-hud header small { font-size:11px; color:#b5c5bc; }
.mine-fullscreen-hud button { min-height:38px; padding:7px 11px; color:#fff2c2; font-weight:900; background:linear-gradient(#725c36,#453823); border:2px solid #dfc27e; box-shadow:0 3px 0 #181b18; cursor:pointer; }
.mine-hud-stats { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:10px; padding-top:9px; border-top:1px solid #75816b66; font-size:11px; }
.mine-hud-stats span { display:flex; align-items:center; gap:5px; }
.mine-hud-stats b { color:#f6d779; }
.mine-energy { display:inline-block; width:70px; height:7px; overflow:hidden; background:#1c2527; border:1px solid #95a18a; }
.mine-energy u { display:block; width:100%; height:100%; background:linear-gradient(90deg,#75c785,#d9d36c); text-decoration:none; transition:width .18s ease; }
.mine-fullscreen-hud p { margin:9px 0 3px; font-size:12px; color:#fff0bd; }
.mine-status { color:#b4c7be; font-size:10px; }
.mine-return-toast { position:fixed; z-index:120; left:50%; top:48%; transform:translate(-50%,-50%); width:max-content; max-width:min(760px,calc(100vw - 24px)); max-height:55vh; overflow:auto; padding:15px 18px; color:#f4f4d5; font-weight:900; text-align:center; background:linear-gradient(145deg,rgba(25,59,46,.98),rgba(10,27,24,.98)); border:3px solid #e2c66d; box-shadow:0 5px 0 #08100c,0 16px 48px #000b,inset 0 0 0 2px #55714a; pointer-events:none; animation:mine-return-center-pop .28s cubic-bezier(.2,1.4,.4,1) both; }
.mine-return-toast.hidden { display:none!important; }
.mine-return-metrics{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 auto 10px;max-width:680px}.mine-return-metrics span{padding:6px 9px;color:#e8f1d7;background:linear-gradient(145deg,#253c32,#17271f);border:1px solid #687d50;box-shadow:0 2px 0 #0c1511;font-size:clamp(10px,1.4vw,12px);white-space:nowrap}.mine-return-metrics span:last-child{color:#fff0a9;border-color:#c5a652}
@keyframes mine-toast-in { from { opacity:0; transform:translate(-50%,8px) scale(.96); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
.mine-return-heading{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 auto 11px;color:#fff0b0;font-size:clamp(14px,2.3vw,19px);text-shadow:2px 2px 0 #162319,0 0 12px #e5c76088}.mine-return-check{display:grid;place-items:center;width:30px;height:30px;border:2px solid #b3e18b;background:linear-gradient(#568b52,#234932);color:#efffc9;font:bold 20px monospace;box-shadow:0 3px 0 #101a13}.mine-return-items{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.mine-return-item{display:flex;align-items:center;gap:7px;min-height:48px;padding:5px 10px;border:2px solid #60784d;background:linear-gradient(135deg,#263d30,#14241f);box-shadow:0 3px 0 #09120e;color:#fff1c4;font-size:clamp(11px,1.6vw,14px);white-space:nowrap}.mine-return-item-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid #b69e5a;background:#0f1d18}.mine-return-item-icon img{display:block;width:32px;height:32px;image-rendering:pixelated}.mine-return-empty{padding:8px 14px;color:#c2d2b8;font-size:12px}.mine-return-toast::after{content:"";position:absolute;inset:4px;border:1px solid #c6d49244;pointer-events:none}@keyframes mine-return-center-pop{0%{opacity:0;transform:translate(-50%,-44%) scale(.78)}65%{opacity:1;transform:translate(-50%,-52%) scale(1.035)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.mine-action-card { position:fixed;z-index:85;left:50%;bottom:calc(116px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(430px,calc(100vw - 28px));padding:13px 16px;color:#f9f1d2;background:linear-gradient(155deg,#172c2bfa,#101b20f5);border:2px solid #c49e58;box-shadow:0 4px 0 #111516,0 14px 38px #0009,inset 0 0 0 2px #526451;image-rendering:pixelated;animation:mine-toast-in .18s ease-out both}
.mine-action-card.hidden{display:none!important}.mine-action-heading{display:flex;align-items:center;gap:10px}.mine-action-heading>span{display:grid;place-items:center;width:38px;height:38px;font-size:23px;background:#304536;border:1px solid #b6985e}.mine-action-heading>div{display:flex;flex:1;flex-direction:column;gap:3px}.mine-action-heading b{color:#ffe29b;font-size:14px}.mine-action-heading small{color:#c0d0c5;font-size:10px}.mine-action-heading kbd{padding:4px 6px;color:#fff0bb;background:#1d2925;border:1px solid #826d43;font:900 10px monospace}.mine-timing-track{position:relative;height:17px;margin:12px 2px 10px;background:linear-gradient(#21272b,#11181b);border:2px solid #7a7866;box-shadow:inset 0 2px 4px #000a}.mine-timing-track i{position:absolute;left:73%;top:0;width:8%;height:100%;background:linear-gradient(90deg,#78974d,#ffe078,#9bb25d);box-shadow:0 0 11px #f4d86b99;animation:mine-gold-pulse .36s steps(2,end) infinite alternate}.mine-timing-track u{display:block;width:0;height:100%;background:linear-gradient(90deg,#63c5ae,#d0f7ab);text-decoration:none;transition:width .045s linear}.mine-timing-track b{position:absolute;top:-6px;left:0;width:6px;height:23px;background:#fff3cb;border:1px solid #523e24;box-shadow:0 0 8px #fff0a5;transform:translateX(-50%)}@keyframes mine-gold-pulse{to{filter:brightness(1.55);box-shadow:0 0 17px #f4d86bcc}}.mine-action-card button{width:100%;min-height:34px;color:#29301e;font-size:12px;font-weight:1000;background:linear-gradient(#f2db8c,#b88b3c);border:2px solid #ffedb5;box-shadow:0 3px 0 #604524;cursor:pointer}.mine-action-card button:disabled{filter:saturate(.45);opacity:.65;cursor:wait}.mine-action-card.is-perfect{border-color:#9ae4a4;box-shadow:0 4px 0 #111516,0 0 30px #6cf6b777,inset 0 0 0 2px #96cc8b}.mine-action-card.is-miss{border-color:#c88861}
body.mine-active #game-canvas { cursor:crosshair; }
@media(max-width:600px){.mine-fullscreen-hud{padding:9px 10px}.mine-fullscreen-hud header b{font-size:13px}.mine-fullscreen-hud button{font-size:11px;min-height:34px}.mine-hud-stats{gap:6px 10px}.mine-fullscreen-hud p{font-size:11px}}
@media(max-width:600px){.mine-action-card{bottom:calc(12px + env(safe-area-inset-bottom));padding:10px 12px}.mine-action-heading small{font-size:9px}.mine-timing-track{margin:8px 2px}}

/* Mine room selection and persistent game HUD */
.mine-fullscreen-hud{left:auto;right:max(12px,env(safe-area-inset-right));width:min(520px,calc(100vw - 24px))}
.mine-room-picker{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:18px;background:rgba(4,10,8,.68);backdrop-filter:blur(5px)}
.mine-room-picker.hidden{display:none!important}
.mine-room-card{position:relative;width:min(680px,100%);padding:25px;color:#f1f2d8;background:linear-gradient(145deg,#172d27f5,#0d1b19fa);border:2px solid #c7a95f;box-shadow:0 8px 0 #09110e,0 22px 70px #000b,inset 0 0 0 2px #63745a;image-rendering:pixelated}
.mine-room-kicker{color:#f0cf73;font:900 10px monospace;letter-spacing:.14em}.mine-room-card h2{margin:7px 0 2px;color:#ffe9a7;font-size:26px}.mine-room-card>p{margin:0 28px 17px 0;color:#b9c8b8;font-size:12px}.mine-room-close{position:absolute;top:13px;right:13px;width:38px;height:38px;color:#ffe8b2;background:#24352a;border:2px solid #b79a5b;font-size:25px;cursor:pointer}
.mine-room-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mine-room-option{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;padding:13px;background:linear-gradient(135deg,#20392b,#14251f);border:1px solid #60764a;box-shadow:inset 0 0 0 1px #ffffff0b}.mine-room-option.is-full{filter:saturate(.6);border-color:#7f6351;background:linear-gradient(135deg,#382921,#241c19)}.mine-room-info{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 8px}.mine-room-info>b{color:#ffedb1;font-size:16px}.mine-room-info>span{color:#e0d39c;font-size:11px}.mine-room-info>i{grid-column:1/-1;height:7px;overflow:hidden;background:#101816;border:1px solid #5c6955}.mine-room-info>i>u{display:block;height:100%;background:linear-gradient(90deg,#69bd70,#e4cf72);text-decoration:none;transition:width .25s}.mine-room-status{grid-column:1;color:#a9c8a0;font-size:10px}.is-full .mine-room-status{color:#ffab83}.mine-room-enter{grid-column:2;grid-row:1/3;min-width:94px;min-height:38px;padding:7px;color:#152119;background:linear-gradient(#e5ce80,#a9803d);border:2px solid #f1dc9a;box-shadow:0 3px 0 #342919;font-weight:900;cursor:pointer}.mine-room-enter:disabled{color:#c3afa2;background:linear-gradient(#5d5147,#403831);border-color:#89756a;box-shadow:0 3px 0 #211d1b;cursor:not-allowed}.mine-room-card>small{display:block;margin-top:13px;color:#a9b9a7;font-size:10px}
body.mine-active #plot-controls #plot-btn{display:none!important}body.mine-active #plot-controls #plot-hint{display:none!important}body.mine-active #plot-controls{pointer-events:none}
body.mine-active .world-chat{z-index:82;width:min(400px,calc(100vw - 24px))}body.mine-active .chat-window{height:min(34vh,360px);min-height:200px;max-height:calc(100vh - 180px)}body.mine-active .chat-messages{height:auto;min-height:80px;flex:1}
body.mine-active .mine-action-card{bottom:calc(108px + env(safe-area-inset-bottom))}
@media(max-width:600px){.mine-fullscreen-hud{left:8px;right:8px;top:8px;width:auto}.mine-room-card{padding:20px 14px}.mine-room-card h2{font-size:21px}.mine-room-list{grid-template-columns:1fr;gap:7px}.mine-room-option{padding:9px}.mine-room-info>b{font-size:14px}body.mine-active #hud-top{transform:scale(.82);transform-origin:top left}body.mine-active #world-chat{left:8px;bottom:8px;width:min(330px,calc(100vw - 16px))}body.mine-active .chat-window{height:min(32vh,260px);min-height:170px}body.mine-active .mine-action-card{bottom:calc(98px + env(safe-area-inset-bottom))}}

.hud-stack .sprint-hud{position:static;z-index:auto;transform:none;width:min(100%,260px);box-sizing:border-box;display:grid;grid-template-columns:16px auto minmax(48px,1fr) 32px auto;align-items:center;gap:5px;margin-top:3px;padding:3px 5px;color:#e9f2d7;background:linear-gradient(145deg,#12251edb,#0a1513db);border:1px solid #9d89507a;box-shadow:inset 0 1px #ffffff12;border-radius:5px;font-size:9px;line-height:1;pointer-events:none}.sprint-icon{color:#ffdb72;font-size:13px;text-shadow:0 0 8px #ffc84e88}.sprint-label{font-weight:900;white-space:nowrap;color:#dce8cd}.sprint-track{height:7px;min-width:0;overflow:hidden;background:#111817;border:1px solid #64725b;box-shadow:inset 0 1px 3px #000}.sprint-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#5abf72,#b8d96b);box-shadow:0 0 9px #7ee78b66;transition:width .12s linear}.sprint-hud output{color:#d7e7bb;font:900 9px monospace;text-align:right}.sprint-hud kbd{padding:2px 3px;color:#ffe9a3;background:#29382a;border:1px solid #8e7946;border-radius:3px;font:900 8px monospace}.sprint-hud.is-running{border-color:#8ce099;box-shadow:0 0 10px #65f08b35,inset 0 1px #ffffff12}.sprint-hud.is-running .sprint-icon{animation:sprint-flash .35s steps(2,end) infinite}.sprint-hud.is-low .sprint-track i{background:linear-gradient(90deg,#dc7954,#f3b15b);box-shadow:0 0 9px #f0785566}.sprint-hud.is-low output{color:#ffb08c}@keyframes sprint-flash{50%{filter:brightness(1.8);transform:scale(1.16)}}
#sprint-touch{position:fixed;z-index:45;left:27px;bottom:164px;display:none;align-items:center;gap:6px;min-width:88px;min-height:42px;padding:7px 12px;color:#ffe6a0;background:linear-gradient(#293d2e,#13231d);border:2px solid #a99156;box-shadow:0 3px 0 #09100d,0 5px 13px #0008;font-weight:900;touch-action:none;user-select:none;-webkit-user-select:none}#sprint-touch.is-held{color:#122016;background:linear-gradient(#c7ed8e,#6cbf76);border-color:#eff2b0;box-shadow:0 2px 0 #163b25,0 0 18px #88f09899;transform:translateY(2px)}
@media(hover:hover) and (pointer:fine){#sprint-touch{display:none!important}}
@media(max-width:760px){.hud-stack .sprint-hud{width:100%;grid-template-columns:14px auto minmax(34px,1fr) 29px;gap:4px;padding:3px 4px;font-size:9px}.hud-stack .sprint-hud kbd{display:none}#sprint-touch{display:flex}}
@media(max-width:600px){.hud-stack .sprint-hud{grid-template-columns:12px minmax(10px,1fr) 25px;gap:3px;padding:2px 3px}.hud-stack .sprint-label{display:none}.hud-stack .sprint-hud output{font-size:8px}}

#hud-top {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(16, 25, 13, 0.75);
  color: #eafbe0;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid #6ecb63;
}

/* ---------- Virtual Joystick ---------- */
#joystick-zone {
  position: absolute;
  touch-action: none;
  left: 24px;
  bottom: 24px;
  width: 130px;
  height: 130px;
}

#joystick-base {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.35);
  position: relative;
}

#joystick-knob {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  position: absolute;
  left: 38px;
  top: 38px;
  pointer-events: none;
}

@media (min-width: 900px) {
  #joystick-zone {
    display: none; /* Desktop ใช้ WASD แทน */
  }
}

/* ---------- Plot Controls (Sprint 3: Session Plot) ---------- */
#plot-controls {
  position: absolute;
  right: 16px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

#plot-btn {
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid #6ecb63;
  background: #24371f;
  color: #eafbe0;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

#plot-btn:active {
  transform: scale(0.97);
}

#plot-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

#plot-hint {
  max-width: 220px;
  text-align: right;
  font-size: 12px;
  color: #ffcf6e;
  background: rgba(16, 25, 13, 0.75);
  padding: 4px 10px;
  border-radius: 6px;
  min-height: 14px;
}

/* บนมือถือขยับปุ่มขึ้นเล็กน้อยกันชนกับ joystick ฝั่งซ้าย ไม่ทับกันอยู่แล้วแต่กันขอบจอ */
@media (max-width: 480px) {
  #plot-controls {
    right: 12px;
    bottom: 160px; /* ให้พ้นแนว joystick ด้านล่างซ้าย เผื่อจอเล็ก */
  }
}

/* ---------- Mutation Reveal ---------- */
#mutation-reveal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 244, 160, 0.16), transparent 42%);
  animation: reveal-in 180ms ease-out both;
}

#mutation-reveal.hidden { display: none !important; }
.mutation-card {
  min-width: 240px;
  padding: 22px 28px;
  text-align: center;
  color: #fff8d2;
  background: rgba(16, 25, 13, 0.94);
  border: 2px solid #ffcf6e;
  border-radius: 16px;
  box-shadow: 0 0 0 4px rgba(255, 207, 110, 0.12), 0 16px 50px rgba(0, 0, 0, 0.4);
}
.mutation-kicker { font-size: 10px; letter-spacing: 0.18em; opacity: 0.72; }
.mutation-rarity { margin-top: 6px; font-size: 28px; font-weight: 900; color: #ffcf6e; }
.mutation-species { margin-top: 4px; font-size: 18px; font-weight: 700; }
.mutation-value { margin-top: 12px; font-size: 14px; color: #bfe9ff; }
.mutation-pity { margin-top: 8px; font-size: 11px; opacity: 0.72; }
.rarity-uncommon .mutation-rarity { color: #6ecb63; }
.rarity-rare .mutation-rarity { color: #bfe9ff; }
.rarity-legendary .mutation-rarity { color: #c6a0ff; text-shadow: 0 0 18px rgba(198,160,255,.7); }
.rarity-rainbow .mutation-rarity { color: #fff; text-shadow: 0 0 8px #ff6ec7, 0 0 18px #6ecbff; }
@keyframes reveal-in { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 480px) { .mutation-card { min-width: 210px; padding: 18px 22px; } }

@media (max-width: 640px) {
  .login-box { min-height: 390px; padding-top: 48px; }
  .login-decoration { display: none; }
  .login-subtitle { margin-bottom: 22px; font-size: 9px; }
  .login-hint { font-size: 8px; }
}


/* ---------- Seed Vault ---------- */
.seed-vault { position: absolute; left: 16px; bottom: 24px; width: min(390px, calc(100vw - 176px)); padding: 10px; color: #eafbe0; background: rgba(16, 25, 13, .84); border: 1px solid #8dbd5c; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.seed-vault-title { display: flex; justify-content: space-between; margin-bottom: 7px; color: #ffcf6e; font: 800 10px monospace; letter-spacing: .12em; }
.seed-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.seed-chip { min-width: 68px; min-height: 48px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 8px; border: 1px solid #526a43; border-radius: 8px; background: #24371f; color: #eafbe0; cursor: pointer; font: 700 10px monospace; }
.seed-chip span { white-space: nowrap; }
.seed-chip b { color: #ffcf6e; font-size: 12px; }
.seed-chip.selected { border-color: #ffcf6e; background: #405b32; box-shadow: 0 0 0 2px rgba(255,207,110,.18); }
.seed-chip:disabled { opacity: .38; cursor: not-allowed; }
@media (max-width: 640px) { .seed-vault { left: 12px; right: 12px; bottom: 158px; width: auto; } .seed-list { max-width: 100%; } }


.daily-seed-btn { width: 100%; margin-bottom: 6px; padding: 7px 10px; border: 1px solid #d6bd66; border-radius: 8px; background: linear-gradient(180deg, #5a713d, #304a2b); color: #fff1a6; font: 800 11px monospace; cursor: pointer; }
.daily-seed-btn:hover { filter: brightness(1.15); }
.daily-seed-btn:disabled { opacity: .55; cursor: not-allowed; }
.daily-seed-status { min-height: 14px; margin-bottom: 5px; color: #bfe9ff; font: 10px monospace; }


/* ---------- Global Mutation Announcement ---------- */
#global-announcement { position: absolute; top: 18px; left: 50%; z-index: 20; width: min(620px, calc(100vw - 28px)); transform: translateX(-50%); pointer-events: none; animation: announcement-drop 260ms cubic-bezier(.2,.9,.25,1.2) both; }
#global-announcement.hidden { display: none !important; }
.announcement-ribbon { position: relative; overflow: hidden; padding: 14px 22px 16px; text-align: center; color: #fffbe1; background: linear-gradient(110deg, rgba(24, 16, 45, .98), rgba(69, 38, 87, .98), rgba(24, 16, 45, .98)); border: 2px solid #d8b3ff; border-radius: 12px; box-shadow: 0 0 0 3px rgba(190, 127, 255, .2), 0 12px 34px rgba(0,0,0,.45), 0 0 34px rgba(188, 101, 255, .42); }
.announcement-ribbon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.28) 48%, transparent 58%); transform: translateX(-120%); animation: announcement-shine 1.6s ease-out .25s both; }
.announcement-kicker { position: relative; z-index: 1; color: #efd9ff; font: 800 10px monospace; letter-spacing: .18em; }
.announcement-text { position: relative; z-index: 1; margin-top: 5px; color: #fff; font: 1000 clamp(17px, 3vw, 25px) sans-serif; text-shadow: 0 2px 0 #412055, 0 0 18px rgba(255, 222, 255, .45); }
.announcement-detail { position: relative; z-index: 1; margin-top: 5px; color: #e5c9ff; font: 700 12px monospace; }
.announcement-epic .announcement-ribbon { background: linear-gradient(105deg, rgba(19, 38, 62, .98), rgba(72, 47, 111, .98), rgba(22, 55, 77, .98)); border-color: #b5c9ff; box-shadow: 0 0 0 3px rgba(147, 171, 255, .2), 0 12px 34px rgba(0,0,0,.45), 0 0 38px rgba(115, 153, 255, .5); }
.announcement-legendary .announcement-ribbon { background: linear-gradient(105deg, rgba(65, 43, 14, .98), rgba(132, 87, 24, .98), rgba(54, 43, 20, .98)); border-color: #ffe7a0; box-shadow: 0 0 0 3px rgba(255, 218, 118, .22), 0 12px 34px rgba(0,0,0,.45), 0 0 42px rgba(255, 192, 66, .56); }
.announcement-rainbow .announcement-ribbon { background: linear-gradient(105deg, rgba(35, 18, 48, .98), rgba(104, 48, 83, .98), rgba(25, 49, 72, .98)); border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .2), 0 12px 34px rgba(0,0,0,.45), 0 0 42px rgba(255, 126, 211, .6); }
.announcement-rainbow .announcement-text { background: linear-gradient(90deg, #fff, #ffb4e3, #b9e8ff, #fff); background-clip: text; -webkit-background-clip: text; color: transparent; }
@keyframes announcement-drop { from { opacity: 0; transform: translate(-50%, -26px) scale(.92); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes announcement-shine { to { transform: translateX(120%); } }
@media (max-width: 480px) { #global-announcement { top: 10px; } .announcement-ribbon { padding: 11px 12px 13px; } .announcement-kicker { font-size: 8px; } .announcement-detail { font-size: 10px; } }


.seed-shop-title { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(141,189,92,.35); color: #bfe9ff; font: 800 10px monospace; letter-spacing: .1em; }
.seed-shop-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 6px; }
.shop-item { min-height: 34px; padding: 5px 7px; display: flex; align-items: center; justify-content: space-between; gap: 6px; border: 1px solid #526a43; border-radius: 7px; background: #1d301c; color: #eafbe0; text-align: left; cursor: pointer; font: 700 9px monospace; }
.shop-item:hover { border-color: #ffcf6e; background: #304b2a; }
.shop-item:disabled { opacity: .58; cursor: wait; }
.shop-item b { color: #ffcf6e; white-space: nowrap; font-size: 8px; }
.seed-shop-status { min-height: 14px; margin-top: 5px; color: #ffcf6e; font: 10px monospace; }
.seed-fusion-controls{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end;margin:10px 0}.seed-fusion-controls label{display:grid;gap:5px;color:#b8d9b6;font-size:11px}.seed-fusion-controls select{min-width:0;padding:9px;background:#10261d;color:#f3e9c7;border:1px solid #708b59;border-radius:4px}.seed-fusion-controls>span{padding-bottom:9px;color:#e6c96b}.seed-fusion-result{display:grid;gap:6px;margin:8px 0;padding:10px;background:linear-gradient(135deg,#16372c,#12231e);border:1px solid #6b9b63;border-radius:6px;color:#f3e9c7}.seed-fusion-result>small{color:#bdd3ae}.fusion-gene-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.fusion-gene-grid span,.breeding-entry{padding:5px;background:#0d1c18;border:1px solid #354d3a;font-size:10px}.fusion-gene-grid small,.breeding-entry small{display:block;color:#a8c4a2}.breeding-journal{display:grid;gap:4px;max-height:180px;overflow:auto;margin-top:8px}
.fusion-preview{margin:4px 0 8px;padding:8px;border-left:2px solid #8fc67a;background:rgba(20,45,32,.7);color:#d2e5bd;font-size:10px;line-height:1.5}
.recycle-controls{grid-template-columns:1fr auto}.recycle-controls .upgrade-plot-btn{min-height:39px;padding:8px 12px;white-space:nowrap}
@media (max-width: 640px) { .seed-shop-list { grid-template-columns: 1fr; max-height: 135px; overflow-y: auto; } }


.npc-sell-title { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(141,189,92,.35); color: #ffcf6e; font: 800 10px monospace; letter-spacing: .1em; }
.harvest-list { display: grid; gap: 5px; max-height: 110px; overflow-y: auto; margin-top: 6px; color: #899c82; font: 10px monospace; }
.harvest-item { min-height: 34px; padding: 5px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #715b38; border-radius: 7px; background: #2d3820; color: #eafbe0; text-align: left; cursor: pointer; font: 700 9px monospace; }
.harvest-item:hover { border-color: #ffcf6e; background: #485a2d; }
.harvest-item:disabled { opacity: .55; cursor: wait; }
.harvest-item b { color: #ffcf6e; white-space: nowrap; }


.progression-title { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(141,189,92,.35); color: #bfe9ff; font: 800 10px monospace; letter-spacing: .1em; }
.upgrade-plot-btn { width: 100%; margin-top: 6px; padding: 7px 10px; border: 1px solid #c6a0ff; border-radius: 8px; background: linear-gradient(180deg, #61477c, #382b52); color: #f2dcff; font: 800 10px monospace; cursor: pointer; }
.upgrade-plot-btn:disabled { opacity: .48; cursor: not-allowed; }
.quest-list { display: grid; gap: 4px; margin-top: 6px; }
.quest-item { min-height: 30px; padding: 5px 7px; display: flex; justify-content: space-between; border: 1px solid #526a43; border-radius: 7px; background: #1d301c; color: #eafbe0; font: 700 9px monospace; cursor: pointer; }
.quest-item b { color: #ffcf6e; }
.quest-item:disabled { opacity: .45; cursor: not-allowed; }
.collection-list { display: grid; gap: 3px; max-height: 80px; overflow-y: auto; margin-top: 6px; color: #b7c9a6; font: 700 9px monospace; }
.collection-item { padding: 5px 7px; border-left: 3px solid #6ecb63; background: rgba(38, 60, 31, .65); }
.collection-item.rarity-rare { border-color: #bfe9ff; }
.collection-item.rarity-legendary { border-color: #c6a0ff; }
.collection-item.rarity-rainbow { border-color: #ff8bd4; }


.world-status { position: absolute; top: 14px; right: 16px; z-index: 5; padding: 7px 11px; border: 1px solid #b7c875; border-radius: 8px; background: rgba(16,25,13,.78); color: #fff0aa; font: 800 11px monospace; letter-spacing: .08em; }
.performance-toggle { position: absolute; top: 54px; right: 16px; z-index: 5; width: 34px; height: 34px; border: 1px solid #8dbd5c; border-radius: 50%; background: rgba(16,25,13,.8); color: #fff0aa; cursor: pointer; }
.settings-toggle { position: absolute; top: 96px; right: 16px; z-index: 5; width: 34px; height: 34px; border: 1px solid #8dbd5c; border-radius: 50%; background: rgba(16,25,13,.8); color: #fff0aa; font: 900 19px monospace; cursor: pointer; }
.tutorial-card { position: absolute; left: 50%; bottom: 24px; z-index: 15; width: min(380px, calc(100vw - 32px)); transform: translateX(-50%); padding: 18px 20px; border: 2px solid #d6bd66; border-radius: 14px; background: rgba(24,35,19,.96); color: #eff6cf; box-shadow: 0 14px 38px rgba(0,0,0,.45); text-align: center; }
.tutorial-card h2 { margin: 6px 0; font-size: 20px; color: #d5ff86; }
.tutorial-card p { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #d1dfbd; }
.tutorial-kicker { color: #ffcf6e; font: 800 10px monospace; letter-spacing: .15em; }
#tutorial-next { padding: 9px 22px; border: 0; border-radius: 999px; background: #8fdc73; color: #172818; font-weight: 900; cursor: pointer; }
#tutorial-skip { margin-left: 8px; padding: 8px 12px; border: 1px solid #66765b; border-radius: 999px; background: transparent; color: #aebba1; cursor: pointer; }
@media (max-width: 640px) { .world-status { top: 10px; right: 10px; font-size: 9px; } .performance-toggle { top: 46px; right: 10px; } .settings-toggle { top: 88px; right: 10px; } .tutorial-card { bottom: 12px; } }


/* Wave 2 social progression */
.collection-item.rarity-rainbow { color: #fff0ff; text-shadow: 0 0 8px rgba(255,140,225,.5); }


.market-list { display:grid; gap:5px; max-height:130px; overflow-y:auto; margin-top:6px; color:#899c82; font:10px monospace; }
.market-item,.harvest-market-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:5px; padding:5px 7px; border:1px solid #526a43; border-radius:7px; background:#182b1b; color:#eafbe0; font:700 9px monospace; }
.market-item { grid-template-columns:1fr auto; }
.market-item small { display:block; margin-top:2px; color:#8fa286; font-size:8px; }
.market-item button,.harvest-market-row button { padding:5px 7px; border:1px solid #d6bd66; border-radius:6px; background:#40522d; color:#ffed9a; font:700 8px monospace; cursor:pointer; }
.market-item button:disabled,.harvest-market-row button:disabled { opacity:.5; cursor:wait; }


/* ---------- Custom Market Price ---------- */
.harvest-market-card { display:grid; grid-template-columns:minmax(105px,1fr) auto; gap:7px 10px; align-items:center; padding:8px; border:1px solid #526a43; border-radius:9px; background:#182b1b; color:#eafbe0; }
.harvest-market-info { min-width:0; display:flex; flex-direction:column; gap:3px; font:700 9px monospace; }
.harvest-market-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#eff6cf; }
.harvest-market-info small { color:#91a686; font-size:8px; }
.market-price-controls { display:grid; grid-template-columns:minmax(40px,58px) 28px minmax(70px,96px) 28px; gap:4px; }
.market-quantity-input { min-width:0; width:100%; }
.market-price-controls button { min-height:32px; border:1px solid #806b40; border-radius:6px; background:#36472a; color:#ffed9a; font-weight:900; cursor:pointer; }
.market-price-input { width:100%; min-height:32px; padding:4px 6px; border:1px solid #d6bd66; border-radius:6px; outline:none; background:#0e190f; color:#fff4bd; text-align:center; font:800 11px monospace; user-select:text; -webkit-user-select:text; }
.market-price-input:focus { box-shadow:0 0 0 2px rgba(214,189,102,.22); }
.market-net-preview { grid-column:1/-1; color:#bfe9ff; font:8px monospace; text-align:right; }
.harvest-market-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.harvest-market-actions button { min-height:32px; padding:5px 7px; border:1px solid #715b38; border-radius:6px; background:#40522d; color:#ffed9a; font:700 9px monospace; cursor:pointer; }
.harvest-market-actions .market-list-button { border-color:#8fc9df; background:#294751; color:#d9f5ff; }
.harvest-market-actions button:disabled,.market-price-input:disabled { opacity:.5; cursor:wait; }
@media (max-width:640px) { .harvest-market-card { grid-template-columns:1fr; } .market-price-controls,.market-net-preview,.harvest-market-actions { grid-column:1; } .market-price-controls { grid-template-columns:54px 40px minmax(90px,1fr) 40px; } }


/* ---------- Market Sale Toast ---------- */
.sale-toast-stack { position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:500; width:min(380px,calc(100vw - 28px)); display:grid; gap:8px; pointer-events:none; }
.sale-toast { display:grid; grid-template-columns:38px 1fr; align-items:center; gap:10px; padding:10px 12px; overflow:hidden; border:1px solid #d6bd66; border-radius:10px; background:rgba(20,34,19,.96); color:#eff6cf; box-shadow:0 10px 28px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,237,154,.08); animation:sale-toast-in 240ms cubic-bezier(.2,.9,.25,1.15) both; }
.sale-toast-icon { width:34px; height:34px; display:grid; place-items:center; border:1px solid #ffcf6e; border-radius:50%; background:#40522d; color:#ffdf75; font:1000 18px monospace; box-shadow:0 0 14px rgba(255,207,110,.22); }
.sale-toast>div:last-child { min-width:0; display:grid; gap:2px; font-family:monospace; }
.sale-toast strong { color:#fff4bd; font-size:11px; }
.sale-toast span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#aebfa2; font-size:9px; }
.sale-toast b { color:#8fe987; font-size:13px; animation:sale-money-pop 420ms ease-out both; }
.sale-toast-out { animation:sale-toast-out 320ms ease-in both; }
@keyframes sale-toast-in { from { opacity:0; transform:translateY(-18px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes sale-toast-out { to { opacity:0; transform:translateY(-14px) scale(.96); } }
@keyframes sale-money-pop { 0% { transform:scale(.7); } 65% { transform:scale(1.16); } 100% { transform:scale(1); } }
@media (max-width:640px) { .sale-toast-stack { top:10px; width:calc(100vw - 20px); } .sale-toast { padding:8px 10px; } }
.plot-alert-toast {
  border-color: #f39c12;
  background: rgba(32, 22, 12, 0.97);
  box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(243,156,18,.25);
}
.plot-alert-toast .sale-toast-icon {
  border-color: #f39c12;
  background: #4a2c0c;
  color: #f1c40f;
  box-shadow: 0 0 14px rgba(243,156,18,.35);
}
.plot-alert-toast strong { color: #ffeaa7; font-size: 11px; }
.plot-alert-toast span { color: #f8c291; white-space: normal; line-height: 1.35; font-size: 10px; word-break: break-word; }
.plot-alert-toast b { color: #f39c12; font-size: 10px; white-space: normal; line-height: 1.3; font-weight: 700; }
.plot-success-toast {
  border-color: #2ecc71;
  background: rgba(14, 34, 20, 0.97);
  box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(46,204,113,.25);
}
.plot-success-toast .sale-toast-icon {
  border-color: #2ecc71;
  background: #134224;
  color: #7bed9f;
  box-shadow: 0 0 14px rgba(46,204,113,.35);
}
.plot-success-toast strong { color: #eafaf1; font-size: 11px; }
.plot-success-toast span { color: #a9dfbf; white-space: normal; line-height: 1.35; font-size: 10px; word-break: break-word; }
.plot-success-toast b { color: #2ecc71; font-size: 10px; white-space: normal; line-height: 1.3; font-weight: 700; }


.quest-item span { display:flex; align-items:center; gap:7px; }
.quest-item small { color:#8fa286; font-size:8px; }
.quest-item.quest-complete { border-color:#d6bd66; background:#35482a; }
.quest-item.quest-complete b { animation:sale-money-pop 420ms ease-out both; }


/* ==================================================================
   Phase 3 World Services + 16-bit Farm UI
   ================================================================== */
.pixel-window,.service-panel,.service-interaction { image-rendering:pixelated; border-radius:0; }
.pixel-window { box-shadow:4px 4px 0 rgba(9,16,8,.55),inset 0 0 0 2px rgba(205,238,134,.10); }
.seed-vault { width:min(420px,calc(100vw - 190px)); padding:9px 11px; border:3px solid #8dbd5c; background:rgba(15,28,15,.94); }
.seed-vault::before { content:""; position:absolute; inset:3px; border:1px solid #354b2d; pointer-events:none; }

.service-interaction { position:absolute; left:50%; bottom:88px; z-index:18; transform:translateX(-50%); display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; width:min(390px,calc(100vw - 28px)); padding:9px 10px; border:3px solid #e2c66e; background:#172619; color:#eff6cf; box-shadow:5px 5px 0 rgba(7,12,7,.6); }
.service-interaction.hidden { display:none!important; }
.service-interaction>span { width:34px;height:34px;display:grid;place-items:center;background:#405b32;color:#fff1a6;font:900 20px monospace; }
.service-interaction div { min-width:0;display:grid;gap:2px; }
.service-interaction b { color:#fff1a6;font:900 11px monospace;letter-spacing:.08em; }
.service-interaction small { color:#9caf92;font:9px monospace; }
.service-interaction button { padding:8px 10px;border:2px solid #8dbd5c;border-radius:0;background:#304a2b;color:#eaffcf;font:900 10px monospace;cursor:pointer; }
.tram-panel{position:absolute;z-index:32;right:24px;bottom:calc(var(--hud-bottom-reserve,120px) + 18px);width:min(360px,calc(100vw - 36px));padding:16px;border:3px solid #d8bd70;background:linear-gradient(145deg,rgba(25,46,39,.98),rgba(13,25,23,.98));color:#f5efcf;box-shadow:5px 5px 0 rgba(5,12,10,.65),inset 0 0 0 1px #718a68;border-radius:8px}.tram-panel.hidden{display:none!important}.tram-kicker{font:900 10px monospace;letter-spacing:.1em;color:#8de0d2}.tram-panel h2{margin:6px 36px 4px 0;color:#ffdfa0;font:900 20px monospace}.tram-panel p{margin:0 0 10px;color:#bfd0be;font:12px/1.5 sans-serif}.tram-status{min-height:44px;padding:9px 10px;background:rgba(5,13,12,.62);border:1px solid #566e5b;color:#e3eed5;font:12px/1.45 sans-serif}.tram-actions{display:flex;gap:8px;margin-top:10px}.tram-actions button{flex:1;min-height:42px;border:2px solid #a8c17b;border-radius:6px;background:linear-gradient(#ffe2a0,#b37d3a);color:#2a2115;font:900 13px sans-serif;cursor:pointer}.tram-actions button:disabled{filter:grayscale(.75);opacity:.55;cursor:default}.tram-close{position:absolute;right:8px;top:8px;width:30px;height:30px;border:1px solid #a78d57;border-radius:5px;background:#422f26;color:#ffe8bb;font-size:22px;cursor:pointer}

.service-panel { position:absolute; z-index:30; left:50%; top:50%; transform:translate(-50%,-50%); width:min(460px,calc(100vw - 30px)); max-height:min(620px,calc(100vh - 50px)); overflow:hidden; padding:18px; border:4px solid #d6bd66; background:linear-gradient(180deg,#20341f,#111d13); color:#eafbe0; box-shadow:8px 8px 0 rgba(5,10,6,.72),inset 0 0 0 2px #4f6338; }
.service-panel.hidden { display:none!important; }
.service-panel-wide { width:min(820px,calc(100vw - 30px)); }
#collection-panel.service-panel { width:min(1100px,calc(100vw - 32px)); max-height:min(88vh,900px); overflow-y:auto; }
#collection-library { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; align-items:start; }
#collection-library .progression-title { grid-column:1/-1; margin-top:8px; }
.seedlines-access-card { margin:12px 0 16px; padding:16px 18px; border:1px solid #bd9953; background:linear-gradient(120deg,rgba(196,160,83,.17),rgba(26,61,43,.82) 54%,rgba(11,31,23,.95)); box-shadow:inset 0 0 0 1px rgba(248,221,149,.08),0 5px 16px rgba(0,0,0,.25); }
#seedlines-locked,#seedlines-unlocked { display:flex; align-items:center; gap:14px; }
.seedlines-access-icon { flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; border:1px solid #8e7845; background:rgba(9,23,17,.72); color:#f1d681; font-size:26px; text-shadow:0 0 14px rgba(255,220,130,.5); }
#seedlines-locked>div,#seedlines-unlocked>div { flex:1; min-width:0; }
#seedlines-locked b,#seedlines-unlocked b { color:#f7e4a7; font:900 15px monospace; }
#seedlines-locked p,#seedlines-unlocked p { margin:5px 0 0; color:#c0d3bd; font:12px/1.55 monospace; }
#seedlines-locked>small { padding:5px 9px; border:1px solid #65785d; color:#c4c9b1; white-space:nowrap; }
#seedlines-unlocked button { padding:11px 18px; border:1px solid #d7b968; background:linear-gradient(#745b2e,#4b3b21); color:#fff0bd; font-weight:900; cursor:pointer; white-space:nowrap; }
#seedlines-unlocked button:hover { filter:brightness(1.16); }
#seedlines-lab-section iframe { display:block; width:100%; height:min(74vh,780px); min-height:540px; border:1px solid #9b814a; border-radius:4px; background:#0d1b14; }
.seedlines-moved-note { padding:20px; border:1px solid #586b4b; background:#10261c; color:#d7e3c6; text-align:center; }
@media(max-width:720px) { #collection-library { grid-template-columns:1fr; } #seedlines-locked,#seedlines-unlocked { align-items:flex-start; flex-wrap:wrap; } #seedlines-locked>div,#seedlines-unlocked>div { flex:1 1 calc(100% - 70px); } #seedlines-locked>small,#seedlines-unlocked button { margin-left:62px; } #seedlines-lab-section iframe { min-height:65vh; } }
.service-panel::before,.service-panel::after { content:"";position:absolute;width:10px;height:10px;background:#fff1a6; }
.service-panel::before { left:5px;top:5px; }.service-panel::after { right:5px;bottom:5px; }
.service-panel h2 { margin:3px 0 5px;color:#fff1a6;font:1000 22px monospace;letter-spacing:.07em;text-shadow:3px 3px 0 #334126; }
.service-panel h3 { margin:4px 0 8px;color:#bfe9ff;font:900 11px monospace;letter-spacing:.06em; }
.service-panel>p { margin:0 0 12px;color:#a9bba0;font:10px/1.5 monospace; }
.service-kicker { color:#8fdc73;font:900 9px monospace;letter-spacing:.16em; }
.service-close { position:absolute;right:9px;top:8px;width:30px;height:30px;border:2px solid #785b3d;border-radius:0;background:#3b281f;color:#ffcf9e;font:900 20px/20px monospace;cursor:pointer; }
.service-scroll { max-height:360px;overflow:auto;scrollbar-color:#8dbd5c #172619; }
.service-empty { padding:24px 12px;border:2px dashed #526a43;color:#84967e;text-align:center;font:10px monospace; }
.market-columns { display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:260px; }
.market-columns>div { min-width:0;padding:10px;border:2px solid #405839;background:#122016; }
.harvest-item span { display:grid;gap:2px;text-align:left; }.harvest-item small { color:#9caf92;font-size:8px; }.harvest-item strong { color:#eff6cf; }
.harvest-market-card>.market-list-button { min-height:32px;padding:6px;border:2px solid #8fc9df;border-radius:0;background:#294751;color:#d9f5ff;font:900 9px monospace;cursor:pointer; }

@media(max-width:700px){
  .seed-vault{left:12px;right:12px;bottom:158px;width:auto;padding:8px;}
  .service-interaction{bottom:105px;grid-template-columns:32px 1fr auto;}
  .service-panel{top:48%;padding:14px;max-height:78vh;}
  .service-panel h2{font-size:18px;}
  .market-columns{grid-template-columns:1fr;max-height:58vh;overflow-y:auto;}
  .service-scroll{max-height:190px;}
}


/* ==================================================================
   16-bit RPG HUD + smart game mouse
   ================================================================== */
@media (pointer:fine){#game-canvas{cursor:none;}}
.rpg-hud{position:absolute!important;top:12px!important;left:12px!important;display:grid;grid-template-columns:42px minmax(105px,auto) auto auto;align-items:center;gap:8px;padding:7px 9px!important;border:3px solid #d2ad58!important;border-radius:0!important;background:#1a2c1b!important;box-shadow:5px 5px 0 rgba(8,14,8,.58),inset 0 0 0 2px #405839;color:#eff6cf;}
.hud-portrait{width:40px;height:40px;display:grid;place-items:center;border:3px solid #705137;background:repeating-linear-gradient(135deg,#6f934c 0 5px,#58783d 5px 10px);box-shadow:inset 0 0 0 2px #a8c86c;}
.hud-portrait span{color:#fff0a6;font:1000 22px monospace;text-shadow:2px 2px 0 #274326;}
.hud-stack{display:grid;gap:2px}.hud-stack b{color:#fff1a6;font:900 11px monospace;letter-spacing:.08em}.hud-stack small{color:#91aa83;font:8px monospace;}
.hud-chip{min-height:32px;display:flex;align-items:center;gap:6px;padding:5px 8px;border:2px solid #50643a;background:#111f14;color:#eff6cf;font:900 11px monospace;}
.pixel-icon{width:18px;height:18px;display:grid;place-items:center;font-style:normal}.coin-icon{color:#ffd75e;text-shadow:2px 2px 0 #7d5a22}.online-icon{color:#7bea73;text-shadow:0 0 7px #62db68;}

.seed-chip{position:relative;display:grid!important;grid-template-columns:24px 1fr auto!important;align-items:center!important;min-width:112px!important;min-height:44px!important;border-radius:0!important;border-width:2px!important;box-shadow:3px 3px 0 rgba(7,13,7,.45);}
.seed-pixel-icon{width:23px;height:23px;display:grid;place-items:center;border:2px solid #5f7449;background:#162719;color:#d8f88c;font:900 14px monospace;font-style:normal;}
.seed-chip.selected .seed-pixel-icon{border-color:#ffe078;background:#405b32;animation:rpg-icon-pulse 900ms steps(2) infinite;}
@keyframes rpg-icon-pulse{50%{transform:translateY(-2px)}}

.game-cursor{position:fixed;left:0;top:0;z-index:80;pointer-events:none;display:grid;grid-template-columns:30px auto;align-items:center;gap:8px;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.72));will-change:transform;}
.game-cursor.hidden{display:none!important}.game-cursor>span{position:relative;width:30px;height:30px;display:grid;place-items:center;border:2px solid #fff0a6;background:linear-gradient(145deg,#345b38,#17291d);color:#fff3ad;font:1000 17px monospace;box-shadow:inset 0 0 0 2px #101910,0 0 0 1px #09120b;}
.game-cursor>span::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);border:1px solid #fff9d0;background:#ffd75e;box-shadow:0 0 4px #ffe77c;}
.game-cursor small{padding:4px 6px;border:2px solid #5f7449;background:#111d13;color:#eff6cf;white-space:nowrap;font:900 9px monospace;}
.game-cursor[data-state="place"]>span,.game-cursor[data-state="plant"]>span{color:#cfff8d;border-color:#9bea70}.game-cursor[data-state="blocked"]>span{color:#ff9b91;border-color:#ff665d;background:#41201f}.game-cursor[data-state="harvest"]>span{color:#ffe078;border-color:#ffc85a}.game-cursor[data-state="tend"]>span{color:#fff;border-color:#d798ff;background:#4c315d;animation:cursor-alert 400ms steps(2) infinite}.game-cursor[data-state="action"]>span{color:#bfe9ff;border-color:#79cdeb;}
@keyframes cursor-alert{50%{transform:scale(1.14)}}
.context-card{position:fixed;z-index:79;max-width:220px;padding:7px 9px;border:2px solid #d6bd66;background:#111d13;color:#eff6cf;box-shadow:4px 4px 0 rgba(0,0,0,.55);font:9px/1.45 monospace;pointer-events:none;}
.mouse-help{position:absolute;right:14px;bottom:12px;z-index:6;padding:5px 7px;border:2px solid #50643a;background:rgba(15,28,15,.88);color:#90a286;font:8px monospace;}.mouse-help span{color:#fff0a6;font-weight:900;}

/* เปลี่ยนปุ่ม/หน้าต่างระบบให้เป็นภาษาภาพ RPG 16-bit */
.service-panel button,.daily-seed-btn,.upgrade-plot-btn,.shop-item,.market-item button,.harvest-item{border-radius:0!important;box-shadow:2px 2px 0 rgba(4,9,5,.55);}
.service-panel button:active,.seed-chip:active{transform:translate(2px,2px);box-shadow:none;}
.service-kicker::before{content:"✦ ";color:#ffe078}.progression-title{border-top:2px dashed rgba(141,189,92,.35);}

@media(max-width:760px){
  .rpg-hud{grid-template-columns:34px 1fr auto!important;right:10px;gap:5px}.hud-portrait{width:32px;height:32px}.hud-stack{min-width:0}.hud-chip:last-child{display:none}.hud-chip{padding:4px 6px}.mouse-help,.game-cursor{display:none!important}.seed-chip{min-width:100px!important}.context-card{display:none!important;}
}


/* ==================================================================
   Harvest-RPG Hotbar + weighted backpack
   ================================================================== */
.rpg-hotbar{position:absolute;left:50%;bottom:18px;z-index:12;transform:translateX(-50%);display:grid;grid-template-columns:auto 58px;gap:7px;align-items:end;padding:7px;border:3px solid #493424;background:#1a291a;box-shadow:0 0 0 2px #bd9851,6px 7px 0 rgba(5,10,5,.6);}
.rpg-hotbar .seed-list{display:grid;grid-template-columns:repeat(5,64px);gap:4px;overflow:visible;}
.rpg-hotbar .hotbar-slot{position:relative;min-width:64px!important;width:64px;height:58px;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:29px 12px!important;place-items:center;padding:4px!important;border:3px solid #4f3c2e!important;background:#253523!important;box-shadow:inset 3px 3px 0 #101a11,inset -3px -3px 0 #63754a!important;}
.rpg-hotbar .hotbar-slot.selected{transform:translateY(-7px);border-color:#ffe17b!important;background:#405a33!important;box-shadow:inset 3px 3px 0 #172217,inset -3px -3px 0 #91a65f,0 5px 0 #7c5c2d!important;}
.rpg-hotbar .hotbar-slot kbd{position:absolute;left:2px;top:1px;color:#e8d49a;font:900 8px monospace;background:transparent;}
.rpg-hotbar .hotbar-slot .seed-pixel-icon{grid-row:1;width:26px;height:26px;border:0;background:transparent;font-size:18px;}
.rpg-hotbar .hotbar-slot span{grid-row:2;max-width:56px;overflow:hidden;text-overflow:ellipsis;color:#d8e4c6;font:700 7px monospace;}
.rpg-hotbar .hotbar-slot b{position:absolute;right:3px;bottom:2px;padding:1px 3px;background:#101810;color:#fff0a6;font:900 9px monospace;}
.bag-toggle{position:relative;width:58px;height:58px;border:3px solid #775b38;background:#3a2b22;color:#efd487;box-shadow:inset 3px 3px 0 #211811,inset -3px -3px 0 #8f7045;cursor:pointer;}
.bag-toggle>span{display:block;font:1000 24px monospace}.bag-toggle small{position:absolute;left:3px;top:2px;color:#fff0a6;font:900 8px monospace}.bag-toggle b{position:absolute;left:3px;right:3px;bottom:2px;padding:1px;background:#17120e;color:#cde9b5;font:700 7px monospace;}
.selected-item-label{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);color:#fff0a6;text-shadow:2px 2px #172118;font:900 8px monospace;white-space:nowrap;}

.inventory-window{position:absolute;z-index:35;left:50%;top:50%;transform:translate(-50%,-50%);width:min(650px,calc(100vw - 28px));max-height:min(700px,calc(100vh - 42px));overflow:auto;padding:18px;border:4px solid #76573a;background:#1b2b1b;color:#edf4d4;box-shadow:0 0 0 3px #c19a54,9px 10px 0 rgba(4,8,4,.65),inset 0 0 0 2px #40513a;}
.inventory-window.hidden{display:none!important}.inventory-window h2{margin:3px 0;color:#fff0a6;font:1000 25px monospace;text-shadow:3px 3px #4b3725;}.bag-title-row,.bag-weight-row{display:flex;align-items:center;justify-content:space-between}.bag-title-row>b{padding:5px 8px;border:2px solid #bea052;background:#372c20;color:#ffe581;font:900 11px monospace;}.bag-weight-row{margin-top:10px;color:#b9c9a5;font:900 10px monospace}.bag-weight-row strong{color:#fff0a6;}
.bag-weight-track{height:13px;margin:5px 0 14px;padding:2px;border:2px solid #4d3a2c;background:#0d160f;}.bag-weight-track i{display:block;width:0;height:100%;background:#78c45f;transition:width .25s steps(5);}.bag-weight-track i[data-state="heavy"]{background:#e2b64d}.bag-weight-track i[data-state="critical"]{background:#e86a52;animation:bag-critical 650ms steps(2) infinite}@keyframes bag-critical{50%{filter:brightness(1.45)}}
.bag-grid{display:grid;grid-template-columns:repeat(6,minmax(74px,1fr));gap:6px;max-height:340px;overflow:auto;padding:8px;border:3px solid #3f3025;background:#101a12;box-shadow:inset 4px 4px 0 #080e09,inset -3px -3px 0 #32422e;}
.bag-slot{position:relative;min-height:82px;display:grid;grid-template-rows:28px auto auto;place-items:center;padding:6px 4px;border:3px solid #4e5d42;background:#293729;color:#e9f0d6;box-shadow:inset 3px 3px 0 #111a12,inset -3px -3px 0 #71805b;font-family:monospace;overflow:hidden;}
button.bag-slot{cursor:pointer}.bag-slot.selected{border-color:#ffe079;background:#405437}.bag-slot>kbd{position:absolute;left:3px;top:2px;color:#d9c58d;font:800 8px monospace;background:transparent}.bag-slot>i{font:1000 21px monospace;font-style:normal;color:#d7ee8e}.bag-slot>strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;font:900 8px monospace;white-space:nowrap}.bag-slot>b{color:#fff0a6;font:800 8px monospace}.bag-slot>small{position:absolute;right:3px;bottom:2px;color:#92aa87;font:7px monospace}.mutant-slot>i{color:#bfe9ff}.mutant-slot.rarity-legendary,.mutant-slot.rarity-rainbow{border-color:#d69fe9;}
.bag-quest-card{margin-top:12px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px;border:3px solid #5f4a32;background:#2a3823;box-shadow:inset 2px 2px #61764c;}.bag-quest-card>div{display:grid;gap:3px}.bag-quest-card small{color:#8fdc73;font:900 8px monospace;letter-spacing:.12em}.bag-quest-card strong{color:#fff0a6;font:900 11px monospace}.bag-quest-card span{color:#c4d5b1;font:9px monospace}.bag-quest-card button{min-height:38px;padding:7px 11px;border:3px solid #9b7944;background:#4d6136;color:#fff0a6;font:900 9px monospace;cursor:pointer}.bag-quest-card button:disabled{opacity:.45;cursor:not-allowed}.bag-status{min-height:15px;margin-top:7px;color:#9eb690;font:9px monospace;}

@media(max-width:720px){
 .rpg-hotbar{bottom:12px;padding:5px;grid-template-columns:auto 48px}.rpg-hotbar .seed-list{grid-template-columns:repeat(5,minmax(45px,1fr));gap:2px}.rpg-hotbar .hotbar-slot{min-width:45px!important;width:clamp(45px,12vw,58px);height:50px}.bag-toggle{width:48px;height:50px}.selected-item-label{display:none}.inventory-window{top:47%;padding:13px;max-height:78vh}.bag-grid{grid-template-columns:repeat(4,1fr);max-height:280px}.bag-slot{min-height:72px}.seed-vault{display:none!important}
}

.escrow-slot{border-color:#8fc9df;background:#233d43}.escrow-slot>i{color:#bfe9ff}.escrow-slot>strong{white-space:normal;text-align:center}


/* Persistent drag-and-stack inventory */
.bag-grid{grid-template-columns:repeat(6,minmax(66px,1fr));align-items:start;}
.bag-cell{position:relative;min-width:0;aspect-ratio:1;border:3px solid #4b5840;background:#202d21;box-shadow:inset 4px 4px 0 #0d150f,inset -3px -3px 0 #627054;transition:border-color .08s steps(1),filter .08s steps(1);}
.bag-cell:hover{border-color:#d7bd68;filter:brightness(1.1)}
.empty-slot-number{position:absolute;right:3px;bottom:2px;color:#586451;font:7px monospace;}
.bag-stack{position:absolute;inset:3px;display:grid;grid-template-rows:1fr auto;place-items:center;padding:4px;border:2px solid #637153;background:#2e3d2d;color:#edf4d4;box-shadow:inset 2px 2px 0 #435540;cursor:grab;touch-action:none;overflow:hidden;}
.bag-stack:active{cursor:grabbing}.bag-stack>i{font:1000 22px monospace;font-style:normal;color:#d9ee92}.bag-stack>strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 7px monospace}.bag-stack>small{position:absolute;left:3px;bottom:2px;color:#a5b99a;font:6px monospace}.bag-stack .stack-count{position:absolute;right:2px;bottom:2px;min-width:17px;padding:2px 3px;border:2px solid #c9ac5a;background:#131b12;color:#fff0a6;text-align:center;font:1000 9px monospace;box-shadow:1px 1px 0 #000;}
.bag-stack.mutant-stack>i{color:#bfe9ff}.bag-stack.rarity-rare{border-color:#91cae0}.bag-stack.rarity-legendary{border-color:#c89be2}.bag-stack.rarity-rainbow{border-color:#fff;animation:stack-rainbow 1.2s steps(3) infinite}@keyframes stack-rainbow{50%{filter:hue-rotate(120deg) brightness(1.25)}}
.drag-source{opacity:.28}.bag-drag-ghost{position:fixed;left:0;top:0;z-index:120;width:68px;height:68px;inset:auto;pointer-events:none;opacity:.9;transform:translate(-999px,-999px);filter:drop-shadow(5px 6px 0 rgba(0,0,0,.5));}
.bag-overflow-warning{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:54px;padding:7px;border:3px solid #b55646;background:#412420;color:#ffc1aa;font:900 8px monospace}.bag-overflow-warning .bag-stack{position:relative;inset:auto;width:62px;height:62px;}
.bag-escrow-summary{grid-column:1/-1;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:7px;padding:7px;border:2px solid #75aabd;background:#233d43;color:#d7f5ff;font:900 8px monospace}.bag-escrow-summary i{font-style:normal;font-size:17px}.bag-escrow-summary b{color:#fff0a6;}
@media(max-width:720px){.bag-grid{grid-template-columns:repeat(4,1fr)}.bag-cell{min-height:60px}.bag-drag-ghost{display:grid!important}.bag-stack>strong{font-size:6px}}

.bag-tools{display:flex;gap:5px;margin-bottom:8px}.bag-tools button{padding:5px 8px;border:2px solid #4f5e43;background:#243224;color:#aebfa2;font:800 8px monospace;cursor:pointer}.bag-tools button.active{border-color:#e0be63;background:#46583a;color:#fff0a6}.bag-tools #bag-auto-sort{margin-left:auto;border-color:#79afc1;color:#d7f5ff;background:#243f46}.bag-stack.filtered-out{opacity:.1;filter:grayscale(1);pointer-events:none}


/* ==================================================================
   Backpack V2 — crisp 16-bit rendering + zero-layout drag layer
   ================================================================== */
.inventory-window{isolation:isolate;border:0!important;padding:24px 20px 18px;background:
  linear-gradient(90deg,rgba(255,255,255,.025) 50%,transparent 50%) 0 0/8px 8px,
  linear-gradient(180deg,#3d2b1e 0 46px,#21311f 46px 100%);box-shadow:0 0 0 4px #17100d,0 0 0 8px #916d3d,10px 12px 0 rgba(3,7,3,.68),inset 0 0 0 3px #b99350;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);}
.inventory-window::before{content:"";position:absolute;z-index:-1;inset:50px 8px 8px;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 2px,transparent 2px 5px);}
.inventory-window::after{content:"◆";position:absolute;right:12px;top:11px;color:#d4ad5d;text-shadow:-590px 0 #d4ad5d;font:12px monospace;pointer-events:none;}
.inventory-window .service-kicker{color:#d8bd73}.inventory-window h2{font-size:23px;letter-spacing:.08em;color:#ffe49a;text-shadow:3px 3px 0 #17100d;}
.bag-title-row{min-height:36px;margin-bottom:4px}.bag-title-row>b{border:2px solid #e0bd68;background:#182318;box-shadow:2px 2px 0 #0b100b;}
.bag-weight-track{height:14px;border:3px solid #17110d;background:#090e0a;box-shadow:inset 2px 2px 0 #000}.bag-weight-track i{transition:none;image-rendering:pixelated;}
.bag-tools{padding:6px;border:2px solid #55402b;background:#182319;box-shadow:inset 2px 2px 0 #0a100b}.bag-tools button{box-shadow:2px 2px 0 #090d09!important;}
.mutant-companion-card,.mutant-expedition-panel{grid-column:1/-1;padding:12px;border:1px solid #6a906f;background:linear-gradient(120deg,rgba(37,74,54,.96),rgba(17,31,25,.96));box-shadow:inset 0 0 18px rgba(126,238,178,.08),0 4px 12px #050b08;border-radius:8px;color:#e3f2cf}.mutant-expedition-panel{display:grid;gap:8px;border-color:#d5b962;background:linear-gradient(130deg,rgba(52,49,30,.96),rgba(19,34,27,.98))}.mutant-expedition-panel>strong{color:#ffdfa0;font-size:13px}.mutant-expedition-panel p,.mutant-expedition-panel small{margin:0;color:#d0dfc0;font-size:11px;line-height:1.5}.mutant-expedition-panel select,.mutant-expedition-panel button{min-width:0;padding:8px;border:1px solid #7da98a;border-radius:5px;background:#12251b;color:#e7f0d9;font:700 11px var(--pixel-font,monospace)}.mutant-expedition-panel button{cursor:pointer;border-color:#dfc46e;background:#59482a;color:#fff0bd}.mutant-expedition-panel button:disabled{opacity:.5;cursor:not-allowed}.mutant-expedition-event{padding:9px;border:1px solid #b78f42;border-radius:5px;background:#241f16}.mutant-expedition-actions{display:flex;gap:8px;margin-top:8px}.mutant-expedition-actions button{flex:1}.mutant-expedition-actions button:last-child{border-color:#82bf9c;background:#1d4936;color:#d5ffe2}.mutant-companion-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.mutant-companion-head strong{font:800 13px var(--pixel-font,monospace)}.mutant-companion-head b{padding:4px 7px;border:1px solid #91d9a6;background:#1e3d2b;color:#efffd0;border-radius:10px;font-size:10px}.mutant-companion-card p{margin:8px 0 5px;color:#c9dbb7;font-size:11px}.mutant-companion-card small{color:#91ad98;font-size:10px}.mutant-companion-card.rarity-rare{border-color:#72ccdc}.mutant-companion-card.rarity-epic{border-color:#bf94f0}.mutant-companion-card.rarity-legendary{border-color:#edc96a;box-shadow:inset 0 0 22px rgba(249,206,86,.12),0 0 10px rgba(249,206,86,.16)}.mutant-roster-empty{grid-column:1/-1;padding:20px 12px;text-align:center;color:#a6b8a7;border:1px dashed #55735b;background:rgba(19,34,27,.8);font-size:12px;line-height:1.6}
.mutant-companion-card{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:10px}.mutant-companion-art{display:grid;place-items:center;width:58px;height:58px;border:1px solid #6c9d7b;border-radius:10px;background:radial-gradient(circle,#3a805844,#10231be8 72%);box-shadow:inset 0 0 10px #72eeb51c,0 2px 6px #0008}.mutant-companion-art .mutant-follower-icon{width:52px;height:52px}.mutant-companion-copy{display:grid;gap:4px;min-width:0}.mutant-companion-copy p{margin:2px 0;color:#c9dbb7;font-size:11px}.mutant-follower-icon{display:block;image-rendering:pixelated;filter:drop-shadow(0 2px 3px #0009);pointer-events:none}
@media(max-width:460px){.mutant-companion-card{grid-template-columns:50px minmax(0,1fr);gap:8px;padding:9px}.mutant-companion-art{width:50px;height:50px}.mutant-companion-art .mutant-follower-icon{width:46px;height:46px}}
.mutant-companion-window{position:fixed;z-index:140;top:50%;right:calc(min(280px,25vw) + 14px);transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;width:min(430px,calc(100vw - 320px));max-height:min(760px,calc(100dvh - 32px));overflow:hidden;padding:18px;border:1px solid #7dc5a0;border-radius:14px;background:linear-gradient(155deg,rgba(17,47,35,.97),rgba(8,23,18,.98) 78%);color:#edf6e8;box-shadow:0 18px 55px #000b,inset 0 0 0 1px #d9f4d31c;backdrop-filter:blur(12px)}
.mutant-companion-window.hidden{display:none!important}.mutant-companion-window .service-close{position:absolute;right:10px;top:10px}.mutant-companion-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:34px}.mutant-companion-title-row h2{margin:0;color:#fff0bf;font:900 21px/1.25 "Segoe UI",Tahoma,sans-serif;text-shadow:0 2px #111}.mutant-companion-title-row p{margin:4px 0 0;color:#adc7b3;font:600 11px/1.45 "Segoe UI",Tahoma,sans-serif}.mutant-companion-title-row>b{flex:none;padding:6px 9px;border:1px solid #8fd2a4;border-radius:999px;background:#193d2c;color:#d6ffd5;font:900 11px "Segoe UI",Tahoma,sans-serif}.mutant-companion-status{margin:0;padding:7px 9px;border:1px solid #385a46;border-radius:7px;background:#0b2019aa;color:#c7e3cf;font:700 10px/1.45 "Segoe UI",Tahoma,sans-serif}.mutant-companion-content{display:grid;gap:8px;min-height:120px;overflow:auto;padding:2px 3px 2px 0;overscroll-behavior:contain}.mutant-companion-content .mutant-expedition-panel{grid-column:auto}.mutant-companion-content .mutant-companion-card{grid-column:auto}.mutant-companion-content .mutant-roster-empty{grid-column:auto}
.mutant-bag-recruit{display:grid;gap:7px;padding:10px;border:1px solid #5d8d6c;border-radius:8px;background:linear-gradient(140deg,#183729,#10251d)}.mutant-bag-recruit-heading{display:grid;gap:3px}.mutant-bag-recruit-heading strong{color:#d8efc3;font:900 12px "Segoe UI",Tahoma,sans-serif}.mutant-bag-recruit-heading small{color:#a9c5ad;font:600 9px/1.45 "Segoe UI",Tahoma,sans-serif}.mutant-bag-recruit-list{display:grid;gap:5px}.mutant-bag-recruit-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px;border:1px solid #365a45;border-radius:6px;background:#0d2119}.mutant-bag-recruit-row>i{display:grid;place-items:center;width:36px;height:36px;border:1px solid #527b5d;border-radius:6px;background:#142c21}.mutant-bag-recruit-copy{display:grid;min-width:0;gap:2px}.mutant-bag-recruit-copy>b{overflow:hidden;color:#edf4d9;font:800 10px "Segoe UI",Tahoma,sans-serif;text-overflow:ellipsis;white-space:nowrap}.mutant-bag-recruit-copy>small{color:#a8c4ab;font:600 9px "Segoe UI",Tahoma,sans-serif}.mutant-bag-recruit-row>button{padding:6px 8px;border:1px solid #a7c878;border-radius:5px;background:linear-gradient(135deg,#6e9147,#3c683e);color:#f1ffd9;font:800 9px "Segoe UI",Tahoma,sans-serif;cursor:pointer}.mutant-bag-recruit-row>button:disabled{opacity:.5;cursor:wait}
@media(max-width:720px){.mutant-companion-window{top:auto;right:8px;bottom:calc(76px + env(safe-area-inset-bottom));left:8px;transform:none;width:auto;max-height:min(66dvh,620px);padding:13px}.mutant-companion-title-row h2{font-size:18px}.mutant-companion-title-row p{font-size:10px}}
@media(min-width:721px) and (max-width:1000px){.mutant-companion-window{right:auto;left:16px;width:min(430px,calc(100vw - 32px))}}
.bag-grid{contain:layout paint style;position:relative;gap:5px;padding:10px;border:4px solid #2a1d16;background:
  linear-gradient(45deg,rgba(255,255,255,.018) 25%,transparent 25% 75%,rgba(255,255,255,.018) 75%) 0 0/8px 8px,#111a12;box-shadow:inset 5px 5px 0 #070b08,inset -4px -4px 0 #46533d;scroll-behavior:auto;}
.bag-cell{contain:layout paint style;transition:none!important;image-rendering:pixelated;}
.bag-cell::before{content:"";position:absolute;inset:2px;border-top:1px solid rgba(255,255,255,.08);border-left:1px solid rgba(255,255,255,.06);pointer-events:none}.bag-cell:hover,.bag-cell.drag-target{border-color:#ffe17b;filter:none;background:#35472f;box-shadow:inset 3px 3px 0 #121c13,inset -3px -3px 0 #8fa163,0 0 0 2px rgba(255,225,123,.2)}
.bag-stack{contain:layout paint style;transition:none!important;transform:none;backface-visibility:hidden;-webkit-user-drag:none;}
.bag-stack>i{text-shadow:2px 2px 0 #152015}.bag-stack .stack-count{border-radius:0;line-height:11px;}
.drag-source{opacity:.16!important;filter:grayscale(1)}
.bag-drag-preview{position:fixed!important;left:0!important;top:0!important;right:auto!important;bottom:auto!important;z-index:9999!important;width:66px!important;height:66px!important;pointer-events:none!important;opacity:.96!important;cursor:grabbing!important;will-change:transform;transform:translate3d(-200px,-200px,0);contain:strict;box-shadow:6px 7px 0 rgba(0,0,0,.55),0 0 0 2px #ffe17b!important;}
.inventory-dragging,.inventory-dragging *{cursor:grabbing!important}.inventory-dragging{touch-action:none;overscroll-behavior:none;}
.bag-quest-card{border:3px solid #6e522f;background:linear-gradient(90deg,#2a3923,#344329);box-shadow:inset 3px 3px 0 #43553a,3px 3px 0 #101610;}
@media(max-width:720px){.inventory-window{padding:18px 12px 12px}.inventory-window::after{display:none}.bag-grid{padding:7px;gap:4px}.bag-drag-preview{width:58px!important;height:58px!important}}


/* ==================================================================
   Thai readability + world-space harvest text + animated pixel grass
   ================================================================== */
*{font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;}
button,input{font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;}
.floating-text-layer{position:absolute;inset:0;z-index:19;overflow:hidden;pointer-events:none;contain:strict;}
.world-loot-anchor{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;pointer-events:none;}
.harvest-float{position:absolute;left:0;top:0;min-width:150px;display:grid;justify-items:center;gap:1px;padding:5px 8px;border:3px solid #263321;background:rgba(18,29,17,.94);box-shadow:3px 3px 0 rgba(0,0,0,.55);transform:translate(-50%,-24px);animation:harvest-float-up 1.9s steps(12,end) both;}
.harvest-float::before{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #263321;}
.harvest-float b{font:1000 15px "Noto Sans Thai",Tahoma,sans-serif;color:#eafbe0;text-shadow:2px 2px 0 #172118;white-space:nowrap;}
.harvest-float strong{font:900 12px "Noto Sans Thai",Tahoma,sans-serif;color:#fff0a6;white-space:nowrap;}
.harvest-float span{font:800 10px "Noto Sans Thai",Tahoma,sans-serif;color:#bdd1ad;white-space:nowrap;}
.harvest-float.rarity-uncommon{border-color:#7ed66b}.harvest-float.rarity-rare{border-color:#8fd8f2;box-shadow:3px 3px 0 #17313b}.harvest-float.rarity-legendary{border-color:#d69af2;box-shadow:3px 3px 0 #392344,0 0 0 2px rgba(214,154,242,.18)}.harvest-float.rarity-rainbow{border-color:#fff;box-shadow:3px 3px 0 #34263a,0 0 0 3px rgba(255,255,255,.16);animation:harvest-float-up 1.9s steps(12,end) both,stack-rainbow .55s steps(3) 3;}
@keyframes harvest-float-up{0%{opacity:0;transform:translate(-50%,-12px) scale(.7)}12%{opacity:1;transform:translate(-50%,-30px) scale(1.12)}24%{transform:translate(-50%,-35px) scale(1)}72%{opacity:1;transform:translate(-50%,-62px)}100%{opacity:0;transform:translate(-50%,-88px)}}

/* เพิ่มขนาดตัวอักษรที่เดิมเล็กเกินไปสำหรับภาษาไทย */
.service-panel{font-size:13px}.service-panel h2{font-size:25px}.service-panel h3{font-size:13px}.service-panel>p{font-size:12px;line-height:1.6}.service-kicker{font-size:11px;letter-spacing:.08em}.service-interaction b{font-size:13px}.service-interaction small{font-size:11px}.service-interaction button{font-size:12px;}
.rpg-hud .hud-stack b{font-size:13px}.rpg-hud .hud-stack small{font-size:10px}.hud-chip{font-size:13px}.world-status{font-size:13px}.plot-hint,#plot-hint{font-size:13px;line-height:1.45}.mouse-help{font-size:10px}.context-card{font-size:11px;line-height:1.55}.game-cursor small{font-size:10px;}
.shop-item,.harvest-item,.quest-item,.market-item,.harvest-market-row{font-size:11px;line-height:1.45}.shop-item b,.market-item button,.harvest-market-row button,.harvest-market-info small,.market-net-preview{font-size:10px}.collection-list{font-size:11px}.quest-item small,.harvest-item small,.market-item small{font-size:10px}.seed-shop-status,.daily-seed-status,.bag-status{font-size:11px;line-height:1.45}.progression-title{font-size:11px;}
.rpg-hotbar .hotbar-slot span{font-size:9px}.rpg-hotbar .hotbar-slot b{font-size:11px}.rpg-hotbar .hotbar-slot kbd{font-size:10px}.selected-item-label{font-size:10px}.bag-toggle small{font-size:10px}.bag-toggle b{font-size:9px}.bag-title-row>b{font-size:12px}.bag-weight-row{font-size:12px}.bag-tools button{font-size:10px}.bag-stack>strong{font-size:9px}.bag-stack>small{font-size:8px}.bag-stack .stack-count{font-size:11px}.bag-quest-card small{font-size:10px}.bag-quest-card strong{font-size:13px}.bag-quest-card span,.bag-quest-card button{font-size:11px}.empty-slot-number{font-size:9px;}
.announcement-kicker{font-size:11px}.announcement-detail{font-size:13px}.tutorial-card p{font-size:15px}.tutorial-kicker{font-size:11px;}
@media(max-width:640px){.service-panel h2{font-size:21px}.world-status{font-size:11px}.harvest-float{min-width:132px;padding:4px 6px}.harvest-float b{font-size:14px}.harvest-float strong{font-size:11px}.harvest-float span{font-size:9px}.rpg-hud .hud-stack b{font-size:11px}.rpg-hud .hud-stack small{font-size:9px}}

/* ตัวอักษรไทยใหญ่ขึ้นจึงให้หน้าต่างบริการเลื่อนได้แทนการตัดเนื้อหา */
.service-panel{overflow:auto;overscroll-behavior:contain}.service-panel-wide{overflow:auto}

/* Shared desktop-style window stacking for the game UI. */
.ui-window-managed{z-index:300!important}
.ui-window-managed.ui-window-active{z-index:302!important}
.ui-window-surface{translate:var(--ui-window-offset-x,0px) var(--ui-window-offset-y,0px);transition:translate 140ms ease-out}
.ui-window-surface.ui-window-dragging{transition:none;cursor:grabbing}
.ui-window-surface>header,.ui-window-surface>.explorer-header,.ui-window-surface>.townsfolk-header{cursor:grab;touch-action:none;user-select:none}
.ui-window-surface.ui-window-dragging>header,.ui-window-surface.ui-window-dragging>.explorer-header,.ui-window-surface.ui-window-dragging>.townsfolk-header{cursor:grabbing}
.ui-window-active.ui-window-managed{outline:1px solid rgba(242,215,132,.55);outline-offset:2px}
@media(max-width:760px){.ui-window-surface{translate:0 0}}

/* Farm Desk hub and MMO-style Gene Forge */
#farm-desk-panel{width:min(1000px,calc(100vw - 48px))!important;max-height:min(820px,calc(100dvh - var(--hud-bottom-reserve) - 24px))!important;padding:22px 22px 20px!important;background:radial-gradient(ellipse at 50% -10%,rgba(119,189,93,.2),transparent 48%),linear-gradient(155deg,#233d2a 0%,#12231b 62%,#0d1915 100%);}
#farm-desk-panel .farm-view{animation:farm-view-in .2s steps(5,end) both;}
@keyframes farm-view-in{from{opacity:.35;transform:translateX(9px)}to{opacity:1;transform:translateX(0)}}
.farm-hub-intro{margin:5px 0 11px;color:#b5c9ae;font:11px/1.5 monospace}
#farm-desk-panel .daily-seed-btn{display:flex;align-items:center;gap:10px;min-height:54px;margin:0;padding:8px 12px;text-align:left;border:2px solid #edcc70;background:linear-gradient(110deg,#4d6333,#293e27 56%,#193327);box-shadow:inset 0 0 0 1px rgba(255,234,151,.16),0 0 18px rgba(237,204,112,.12)}
.daily-seed-btn>span:first-child{display:grid;place-items:center;width:34px;height:34px;background:radial-gradient(circle,#ffe989,#d38d39 60%,#684327 64%);color:#fff8bb;font-size:19px;text-shadow:0 0 10px #fff1a6}
.daily-seed-btn>span:nth-child(2){display:grid;gap:3px;flex:1}.daily-seed-btn b{font:900 12px monospace}.daily-seed-btn small{color:#c7d8b6;font:9px monospace}.daily-seed-btn i{color:#ffdf80;font:italic 900 9px monospace}
.daily-seed-status{min-height:15px;margin:3px 0 7px;color:#ffe181;font:10px monospace}
.farm-hub-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:5px}
.farm-menu-card{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) 14px;align-items:center;gap:8px;min-height:72px;padding:9px 8px;border:2px solid #526e50;background:linear-gradient(145deg,#203a2c,#14251f);color:#edf6d8;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(190,224,157,.07),3px 3px 0 rgba(3,9,6,.5);transition:transform .12s steps(2,end),filter .12s,border-color .12s}
.farm-menu-card:hover,.farm-menu-card:focus-visible{transform:translateY(-2px);filter:brightness(1.18);border-color:#e8cf7a;outline:none}
.farm-menu-card>span:nth-child(2){display:grid;gap:4px;min-width:0}.farm-menu-card b{color:#ffedab;font:900 11px/1.2 monospace}.farm-menu-card small{color:#acc29e;font:9px/1.35 monospace}.farm-menu-card>i{color:#ffe177;font:900 18px monospace;font-style:normal}
.farm-menu-icon{display:grid;place-items:center;width:36px;height:36px;border:2px solid #8ca96c;background:#10211b;box-shadow:inset 0 0 0 2px #263e2b,0 0 12px rgba(132,220,110,.13);color:#e8f19a;font-size:19px;image-rendering:pixelated}
.farm-menu-breed{border-color:#68a8aa;background:linear-gradient(145deg,#1c4140,#172720)}.farm-menu-breed .farm-menu-icon{border-color:#82e2df;color:#a8fff0;box-shadow:0 0 14px rgba(89,240,221,.2)}
.farm-menu-recycle{border-color:#9b8b57;background:linear-gradient(145deg,#40371d,#20271d)}.farm-menu-recycle .farm-menu-icon{border-color:#e1c66d;color:#ffe17e}
.farm-menu-axe{border-color:#b78343;background:linear-gradient(145deg,#49351e,#20291d)}.farm-menu-axe .farm-menu-icon{border-color:#efc56e;color:#ffe4a1;box-shadow:0 0 14px rgba(255,194,92,.2)}
.farm-menu-pickaxe{border-color:#587fa0;background:linear-gradient(145deg,#1d3c49,#172722)}.farm-menu-pickaxe .farm-menu-icon{border-color:#86c8e7;color:#b4edff;box-shadow:0 0 14px rgba(111,205,255,.19)}
.farm-menu-expand{border-color:#699651;background:linear-gradient(145deg,#294525,#18291e)}.farm-menu-expand .farm-menu-icon{border-color:#a0d77a;color:#c7f69a}
.farm-menu-quests{grid-column:1/-1;min-height:60px}
.farm-back-btn{display:block;width:100%;margin:2px 0 12px;padding:8px 10px;border:2px solid #62774f;background:#17271d;color:#d9e8c9;text-align:left;font:800 10px monospace;cursor:pointer;box-shadow:2px 2px 0 #080e0a}
.farm-back-btn:hover{border-color:#edcf77;color:#fff0a9}
.farm-subhead{display:flex;align-items:center;gap:11px;margin:0 0 9px;padding:9px 10px;border:2px solid #667b51;background:linear-gradient(100deg,rgba(87,120,63,.26),rgba(13,29,24,.7));box-shadow:inset 0 0 0 1px rgba(255,239,172,.07)}
.farm-subhead>span{display:grid;place-items:center;width:42px;height:42px;border:2px solid #d0b768;background:#26372a;color:#ffea91;font-size:22px;text-shadow:0 0 12px rgba(255,226,125,.55)}
.farm-subhead h2{margin:0!important;font-size:16px!important}.farm-subhead p{margin-top:4px;color:#abc5a0;font:9px monospace}.farm-subhead p span{color:#fff1a6;font-weight:900}
.farm-view .workshop-intro{margin:6px 0 10px;color:#b7c8ae;font:10px/1.5 monospace}
.serum-recipe,.gel-recipe{margin-top:12px;border-color:#8e8052;background:linear-gradient(145deg,#2d2c20,#18251e)}
.fusion-preview{padding:9px 10px;border:1px solid #5b8c75;border-left:4px solid #81e3c3;background:linear-gradient(90deg,rgba(40,96,78,.35),rgba(12,27,24,.8));color:#d7f5df;font:10px/1.6 monospace;box-shadow:inset 0 0 14px rgba(95,227,193,.05)}
.fusion-forge{position:relative;isolation:isolate;overflow:hidden;margin:10px 0 8px;padding:10px 12px 11px;border:3px solid #82936a;background:radial-gradient(ellipse at 50% 46%,rgba(43,125,123,.17),transparent 54%),linear-gradient(180deg,#142722,#091613);box-shadow:inset 0 0 0 2px #263e33,0 4px 0 #070e0b}
.fusion-forge::before{content:"";position:absolute;z-index:-1;inset:16% 32%;border-radius:50%;background:radial-gradient(circle,rgba(117,255,232,.16),rgba(96,196,179,.06) 44%,transparent 72%);opacity:.42}
.fusion-forge-header,.fusion-meter-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font:800 9px monospace}.fusion-forge-header{color:#a8c0a9}.fusion-forge-header span{letter-spacing:.16em}.fusion-forge-header b{color:#ffdb83}
.fusion-forge-stage{display:flex;align-items:center;justify-content:center;gap:clamp(18px,8vw,58px);height:88px;margin:2px 0 4px}
.forge-seed{display:grid;place-items:center;width:64px;height:48px;border:2px solid #91c7b0;background:radial-gradient(ellipse at 50% 85%,rgba(91,242,196,.18),transparent 65%),linear-gradient(145deg,#263d35,#10231f);color:#aef8d7;font-size:24px;text-shadow:0 0 9px #74f7d6;box-shadow:0 0 18px rgba(102,255,221,.15);image-rendering:pixelated}
.forge-seed-a{transform:rotate(-18deg);color:#a9eeff;border-color:#74dbe2}.forge-seed-b{transform:rotate(18deg);color:#ffe193;border-color:#dfbb68}
.forge-link{color:#859c81;font:900 18px monospace}.forge-core{position:relative;display:grid;place-items:center;width:62px;height:62px;border:3px solid #e6cc77;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff7c8 0 8%,#d4ffbb 9% 19%,#64bea5 35%,#1b514b 70%);color:white;font-size:26px;text-shadow:0 0 12px #fff;box-shadow:0 0 0 6px rgba(227,194,94,.08),0 0 22px rgba(103,255,218,.27),inset 0 0 12px rgba(255,255,255,.6)}
.fusion-forge[data-state="forging"] .forge-core{animation:forge-core-pulse .32s steps(2,end) infinite alternate}.fusion-forge[data-state="forging"] .forge-seed{animation:forge-seed-drift .8s steps(4,end) infinite alternate}.fusion-forge[data-state="forging"]::before{opacity:1;animation:forge-aura .6s steps(3,end) infinite alternate}
@keyframes forge-core-pulse{from{transform:scale(.9) rotate(-8deg);filter:hue-rotate(0)}to{transform:scale(1.11) rotate(8deg);filter:hue-rotate(38deg);box-shadow:0 0 32px rgba(103,255,218,.76)}}
@keyframes forge-seed-drift{to{transform:translateY(-5px) rotate(0);box-shadow:0 0 20px rgba(102,255,221,.58)}}
@keyframes forge-aura{to{transform:scale(1.5);opacity:.8}}
.fusion-meter-label{margin-bottom:4px;color:#b7cbb6}.fusion-meter-label b{color:#fff0a0;font-variant-numeric:tabular-nums}
.fusion-meter{position:relative;overflow:hidden;height:13px;border:2px solid #788863;background:repeating-linear-gradient(90deg,#07110e 0 11px,#15251a 11px 13px);box-shadow:inset 0 0 4px #000}
.fusion-meter>span{display:block;width:0;height:100%;background:repeating-linear-gradient(90deg,#43a890 0 9px,#92f3be 9px 13px,#d8e776 13px 16px);box-shadow:0 0 12px #8effce;transition:width .07s linear}
.fusion-meter>i{position:absolute;top:-2px;bottom:-2px;left:0;width:3px;background:#fff9be;box-shadow:0 0 8px 2px #fff4a3;opacity:0}
.fusion-forge[data-state="forging"] .fusion-meter>i{opacity:1;animation:forge-scan .45s steps(4,end) infinite alternate}
@keyframes forge-scan{to{transform:translateX(4px);filter:brightness(1.8)}}
.fusion-forge-note{margin-top:6px;color:#789989;text-align:center;font:8px monospace}
.fusion-submit-btn{min-height:42px;padding:10px;border-color:#8de6bd!important;background:linear-gradient(180deg,#4bba7c,#1b6952)!important;color:#f2ffe0!important;font-size:12px!important;text-shadow:0 1px #244c32;box-shadow:0 0 16px rgba(111,232,162,.18),3px 3px 0 #07100b!important}
.fusion-submit-btn:not(:disabled):hover{filter:brightness(1.18);box-shadow:0 0 23px rgba(111,232,162,.36),3px 3px 0 #07100b!important}.fusion-submit-btn:disabled{opacity:.6;cursor:wait}
.seed-fusion-result{animation:farm-view-in .25s steps(5,end) both;border-color:#e4cc75;box-shadow:0 0 18px rgba(238,213,106,.17),inset 0 0 20px rgba(135,255,195,.07)}
.fusion-parent-showcase{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:center;gap:7px;margin:8px 0;padding:8px;border:1px solid #446657;background:linear-gradient(135deg,rgba(23,52,43,.9),rgba(9,22,20,.95));box-shadow:inset 0 0 16px rgba(100,222,176,.06)}
.fusion-parent-card{display:grid;justify-items:center;min-width:0;padding:5px 4px;border:1px solid #426755;background:radial-gradient(ellipse at 50% 75%,rgba(94,194,154,.16),transparent 65%),#0b1b17;text-align:center}
.fusion-parent-card canvas{width:104px;max-width:100%;height:60px;image-rendering:pixelated;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.fusion-parent-card>b{max-width:100%;overflow:hidden;color:#f0dfad;text-overflow:ellipsis;white-space:nowrap;font:700 10px monospace}
.fusion-parent-card>small{max-width:100%;overflow:hidden;color:#9abca8;text-overflow:ellipsis;white-space:nowrap;font:8px/1.4 monospace}
.fusion-parent-cross{color:#ffd66e;text-align:center;font:900 18px monospace;text-shadow:0 0 10px #f7b84d}
.hybrid-result-hero{display:flex;align-items:center;gap:10px;padding:8px;background:radial-gradient(ellipse at 12% 50%,rgba(130,225,181,.2),transparent 42%),linear-gradient(100deg,#193d30,#0c201b);border:1px solid #c4b461;box-shadow:inset 0 0 0 2px rgba(199,185,104,.1),0 0 16px rgba(232,210,105,.12)}
.hybrid-result-hero>i{display:grid;place-items:center;flex:0 0 66px;width:66px;height:66px;background:#07120f;border:1px solid #63876b;box-shadow:inset 0 0 14px rgba(101,242,199,.12)}
.hybrid-result-hero .item-icon{width:60px;height:60px;image-rendering:pixelated;filter:drop-shadow(0 0 7px rgba(123,229,198,.38))}
.hybrid-result-hero>div{display:grid;gap:3px;min-width:0}.hybrid-result-hero>div>span{color:#8ee3c4;font:800 8px monospace;letter-spacing:.18em}.hybrid-result-hero>div>strong{color:#ffe8a2;font-size:12px;line-height:1.35}.hybrid-result-hero>div>small{color:#9abca8;font:8px monospace;overflow-wrap:anywhere}
.seed-fusion-result>.hybrid-result-hero+small{display:block;margin-top:7px}
@media(max-width:460px){.fusion-parent-showcase{gap:4px;padding:5px}.fusion-parent-card canvas{height:48px}.fusion-parent-card>b{font-size:8px}.fusion-parent-card>small{font-size:7px}.hybrid-result-hero>i{flex-basis:54px;width:54px;height:54px}.hybrid-result-hero .item-icon{width:50px;height:50px}}
.recycle-station{display:grid;grid-template-columns:34px 1fr 24px 34px 1fr;align-items:center;gap:5px;margin:12px 0;padding:12px 8px;border:2px solid #62734e;background:linear-gradient(90deg,#1d3225,#12221c);color:#e1f0cb;font:900 9px monospace;text-align:center}.recycle-station>span{font-size:21px}.recycle-station>i{color:#ffdf7c;font:900 16px monospace;font-style:normal}
@media(max-width:460px){#farm-desk-panel{padding:17px 13px 13px}.farm-hub-menu{gap:6px}.farm-menu-card{grid-template-columns:32px minmax(0,1fr) 10px;gap:6px;min-height:70px;padding:7px 5px}.farm-menu-icon{width:31px;height:31px;font-size:16px}.farm-menu-card b{font-size:10px}.farm-menu-card small{font-size:8px}.fusion-forge-stage{height:76px}.recycle-station{font-size:8px;grid-template-columns:26px 1fr 16px 26px 1fr}.recycle-station>span{font-size:17px}}
@media(prefers-reduced-motion:reduce){#farm-desk-panel .farm-view{animation:none}.farm-menu-card{transition:none}.fusion-forge[data-state="forging"] .forge-core,.fusion-forge[data-state="forging"] .forge-seed,.fusion-forge[data-state="forging"]::before,.fusion-forge[data-state="forging"] .fusion-meter>i{animation:none}}


/* Tool forging: recipe rail, central item preview, and clear material costs. */
.forge-layout{display:grid;grid-template-columns:205px minmax(0,1fr);gap:18px;align-items:start;margin-top:9px}
.forge-sidebar{position:sticky;top:8px;display:grid;gap:8px;padding:9px;border:1px solid #526b53;background:linear-gradient(180deg,#172b22,#0c1915);box-shadow:inset 0 0 0 1px #ffffff08,3px 3px 0 #07100c}
.forge-sidebar .farm-back-btn{width:100%;margin:0;text-align:left}.forge-sidebar-title{padding:7px 5px 2px;color:#92b99f;font:900 9px monospace;letter-spacing:.12em;text-transform:uppercase}
.forge-sidebar-caption{padding:6px 5px 0;border-top:1px solid #3c5143;color:#a7c477;font:900 8px "Noto Sans Thai",Tahoma,sans-serif}.forge-field-tool-nav{display:grid;gap:5px;max-height:42vh;overflow:auto;padding-right:2px;scrollbar-color:#667a52 #101b16;scrollbar-width:thin}.forge-field-tool-nav .forge-nav-card{grid-template-columns:27px minmax(0,1fr) 8px;gap:2px 5px;min-height:49px;padding:5px}.forge-field-tool-nav .forge-nav-card>b{font-size:10px}.forge-field-tool-nav .forge-nav-card>small{font-size:7px}.forge-field-tool-nav .forge-nav-icon img.field-pixel-icon{width:24px;height:24px;object-fit:contain}
.forge-nav-card{position:relative;display:grid;grid-template-columns:32px 1fr 10px;grid-template-rows:auto auto;align-items:center;gap:2px 7px;min-height:59px;padding:8px;border:1px solid #40594a;background:linear-gradient(135deg,#14231d,#101916);color:#d8e7ca;text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.forge-nav-card>span{grid-row:1/3;display:grid;place-items:center;width:31px;height:31px;border:1px solid #647653;background:#263326;font-size:19px}.forge-nav-card>b{align-self:end;color:#f4e6b8;font:900 12px "Noto Sans Thai",Tahoma,sans-serif}.forge-nav-card>small{align-self:start;color:#8fa997;font:8px monospace}.forge-nav-card>i{grid-column:3;grid-row:1/3;color:#93a68a;font:900 18px monospace;font-style:normal}
.forge-nav-card:hover{transform:translateX(2px);border-color:#a9c77f}.forge-nav-card.selected{border-color:#e2c772;background:linear-gradient(120deg,#43371f,#1e2b20);box-shadow:inset 3px 0 #f1cb69,0 0 12px #e9c96b18}.forge-pickaxe .forge-nav-card.selected{border-color:#8ed7e9;box-shadow:inset 3px 0 #7dd8ed,0 0 12px #7dd8ed18}
.forge-sidebar-stock{display:grid;gap:5px;margin-top:4px;padding:9px;border-top:1px solid #486250;color:#94ad9b}.forge-sidebar-stock small{font:8px monospace;letter-spacing:.08em}.forge-sidebar-stock>b{color:#f6e6ad;font:900 11px "Noto Sans Thai",Tahoma,sans-serif}.forge-sidebar-stock>span{color:#93d6b4;font:900 9px monospace}
.forge-main{min-width:0}.forge-titlebar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 10px;padding:12px 14px;border-bottom:1px solid #8e7845;background:linear-gradient(90deg,#263326,#13211b)}.forge-titlebar>div{min-width:0}.forge-titlebar small{color:#93bc9e;font:800 9px monospace;letter-spacing:.17em}.forge-titlebar h2{margin:4px 0 0!important;color:#f6e9bf;font-size:21px!important;line-height:1.35!important}.forge-level-badge{flex:none;padding:7px 10px;border:1px solid #a88e52;background:#39331e;color:#ffe4a0;font:900 10px monospace}
.forge-stage-card{position:relative;display:grid;grid-template-columns:minmax(135px,1fr) minmax(115px,.72fr);gap:4px 14px;overflow:hidden;padding:10px 13px 9px;border:2px solid #7c825b;background:radial-gradient(ellipse at 28% 43%,#987f3521,transparent 34%),linear-gradient(140deg,#172a21,#0a1714 68%);box-shadow:inset 0 0 0 2px #ffffff09,0 3px 0 #07100c}
.forge-stage-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 4px);opacity:.35}.forge-stage-top{position:relative;grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;color:#a9c4a8;font:800 9px "Noto Sans Thai",Tahoma,sans-serif}.forge-tier{padding:3px 6px;border:1px solid #5f6f4d;background:#111d17;color:#f0d27d;font:800 8px monospace}
.forge-item-preview{position:relative;display:grid;justify-items:center;align-content:center;min-height:137px;overflow:hidden;border:1px solid #455d49;background:radial-gradient(ellipse at 50% 55%,#ba9d4428,transparent 52%),linear-gradient(180deg,#111f19,#0c1713);text-align:center}.forge-item-glow{position:absolute;width:130px;height:105px;border-radius:50%;background:radial-gradient(ellipse,#edd47923,transparent 68%);filter:blur(4px)}.forge-item-icon{position:relative;display:grid;place-items:center;width:83px;height:78px;color:#e4d389;font-size:52px;filter:drop-shadow(0 5px 0 #050b08) drop-shadow(0 0 10px #f0cf7133);image-rendering:pixelated}.forge-item-icon img{width:70px;height:70px;object-fit:contain;image-rendering:pixelated}.forge-item-preview>b{position:relative;margin-top:1px;color:#f6e8bd;font:900 13px "Noto Sans Thai",Tahoma,sans-serif;text-shadow:0 2px #07100b}.forge-item-preview>small{position:relative;margin-top:2px;color:#b2c4a8;font:900 9px monospace;letter-spacing:.08em}
.forge-chance-row{display:grid;align-content:end;gap:10px;padding:5px 0 3px}.forge-chance-row>div{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:6px 8px;border:1px solid #376347;background:#14261d}.forge-chance-row small{color:#a7bea5;font:800 9px "Noto Sans Thai",Tahoma,sans-serif}.forge-chance-row b{color:#a6f0ba;font:900 17px monospace;text-shadow:0 0 9px #7cf4a533}.forge-chance-row .forge-failure{border-color:#71463c;background:#2b1b18}.forge-chance-row .forge-failure b{color:#ff9b80;text-shadow:0 0 9px #ff816533}
.forge-chance-track{position:relative;grid-column:1/-1;display:flex;overflow:hidden;height:9px;border:1px solid #869070;background:#101815}.forge-chance-track>i{width:var(--forge-success,60%);background:repeating-linear-gradient(90deg,#55c68c 0 9px,#a3e67a 9px 12px);box-shadow:0 0 8px #8df0ae77}.forge-chance-track>b{flex:1;background:repeating-linear-gradient(90deg,#b45742 0 8px,#d77c52 8px 11px)}
.forge-chance-track.guaranteed>i{width:100%}.forge-chance-track.guaranteed>b{display:none}
.forge-risk-note{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;border:1px solid #854c3d;background:linear-gradient(90deg,#3a201c,#251a17);color:#ffc4a2;font:900 9px "Noto Sans Thai",Tahoma,sans-serif}.forge-risk-note small{color:#d4a798;font:700 8px "Noto Sans Thai",Tahoma,sans-serif;text-align:right}
.forge-protection{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:3px;padding:6px 8px;border:1px dashed #958452;background:#24251a}.forge-protection-slot{display:grid;place-items:center;flex:none;width:29px;height:29px;border:2px dashed #b39c5b;background:#161d15;color:#d8bf71;font:900 19px monospace}.forge-protection>span:nth-child(2){display:grid;gap:2px;min-width:0}.forge-protection b{color:#f0dfa3;font:900 10px "Noto Sans Thai",Tahoma,sans-serif}.forge-protection small{color:#afa784;font:8px "Noto Sans Thai",Tahoma,sans-serif}.forge-protection em{margin-left:auto;color:#897b4e;font:800 8px monospace;font-style:normal;white-space:nowrap}
.forge-progress{grid-column:1/-1;display:grid;gap:4px;margin-top:3px}.forge-progress>div{display:flex;justify-content:space-between;gap:8px;color:#839e8c;font:8px "Noto Sans Thai",Tahoma,sans-serif}.forge-progress>div b{color:#d5c17e;font-size:8px}.forge-progress>i{display:block;overflow:hidden;height:7px;border:1px solid #56664a;background:#09110e}.forge-progress>i span{display:block;width:0;height:100%;background:repeating-linear-gradient(90deg,#68bf7a 0 9px,#d7dc79 9px 12px);box-shadow:0 0 8px #a4ef9566}.forge-stage-card.is-forging .forge-item-icon{animation:forge-item-bob .35s steps(3,end) infinite alternate}.forge-stage-card.is-forging .forge-item-glow{animation:forge-glow-pulse .6s ease-in-out infinite alternate}.forge-stage-card.is-forging .forge-progress>div b{color:#ffe391}.forge-stage-card.is-forge-complete .forge-progress>div b{color:#9cf0b2}.forge-stage-card.is-max-level .forge-item-icon{color:#ffe29a}.forge-stage-card.is-max-level .forge-chance-row,.forge-stage-card.is-max-level .forge-chance-track,.forge-stage-card.is-max-level .forge-protection{opacity:.38}
.forge-stage-card.is-forging{animation:forge-anvil-rumble .14s steps(2,end) infinite alternate;box-shadow:inset 0 0 35px #f0cb4a24,0 0 22px #f0cb4a26,0 3px 0 #07100c}.forge-stage-card.is-forging .forge-progress>i span{box-shadow:0 0 12px #e5d56a}.forge-stage-card.is-forge-failed,.forge-stage-card.is-forge-downgraded{animation:forge-fail-jolt .48s steps(3,end) 1;border-color:#d8795a;box-shadow:inset 0 0 30px #d14f3b2e,0 0 18px #d14f3b3a}.forge-stage-card.is-forge-downgraded .forge-progress>div b{color:#ff987d}.forge-stage-card.is-forge-complete{border-color:#e2cc78;box-shadow:inset 0 0 32px #ffd66a2d,0 0 22px #ffd66a45}
@keyframes forge-anvil-rumble{from{transform:translate(0,0) rotate(0)}to{transform:translate(1px,-1px) rotate(.18deg)}}@keyframes forge-fail-jolt{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
@keyframes forge-item-bob{to{transform:translateY(-3px) rotate(-3deg);filter:drop-shadow(0 0 15px #ffe47b88)}}@keyframes forge-glow-pulse{to{opacity:.7;transform:scale(1.16)}}
.forge-materials-panel{margin-top:8px;padding:8px;border:1px solid #425d4d;background:linear-gradient(140deg,#13251d,#0b1713)}.forge-section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px;color:#dbe6c9;font:900 10px "Noto Sans Thai",Tahoma,sans-serif}.forge-section-heading small{color:#829b89;font:8px monospace}.forge-materials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:6px}.forge-materials-grid .material-chip{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:1fr auto;align-items:center;gap:1px 6px;min-width:0;min-height:45px;padding:5px 7px;border:1px solid #526851;background:linear-gradient(135deg,#213629,#15231b);box-shadow:inset 0 0 0 1px #ffffff06}.forge-materials-grid .material-chip img{grid-row:1/3;width:30px;height:30px;object-fit:contain;image-rendering:pixelated}.forge-materials-grid .material-chip b{overflow:hidden;color:#e4e8ce;font:900 9px "Noto Sans Thai",Tahoma,sans-serif;text-overflow:ellipsis;white-space:nowrap}.forge-materials-grid .material-chip small{color:#a8d18c;font:900 9px monospace}.forge-materials-grid .material-chip.short{border-color:#9d6252;background:linear-gradient(135deg,#3b2720,#221a17)}.forge-materials-grid .material-chip.short small{color:#ff9d83}.forge-max-level{grid-column:1/-1;padding:10px;color:#e8d18a;text-align:center;font:900 11px "Noto Sans Thai",Tahoma,sans-serif}
.forge-submit{width:100%;margin-top:8px!important}.forge-main>.serum-recipe,.forge-main>.gel-recipe{margin-top:10px}.forge-main>.serum-craft-btn,.forge-main>#craft-gel-btn{width:100%;margin-top:6px!important}
.farm-menu-extras{border-color:#8f7650;background:linear-gradient(145deg,#3c3025,#20291f)}.farm-menu-extras .farm-menu-icon{border-color:#d2a866;color:#ffdda0;box-shadow:0 0 14px #e1ae5725}.forge-extras-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.forge-extras-grid>.workshop-recipe{min-width:0;margin:0;padding:10px}.forge-extras-grid .recipe-heading{gap:6px;font-size:10px}.forge-extras-grid .workshop-intro{min-height:34px}.forge-extras-grid .upgrade-plot-btn{width:100%;margin-top:8px}
.farm-menu-tools{border-color:#9b8753;background:linear-gradient(145deg,#3b3822,#1b2a21)}.farm-menu-tools .farm-menu-icon{border-color:#e2c76b;color:#ffe9a4;box-shadow:0 0 15px #e8ca6d30}
.forge-protection.unavailable{opacity:.58;filter:saturate(.55)}
.forge-result-popup{position:fixed;z-index:12000;left:50%;top:47%;display:grid;justify-items:center;gap:6px;width:min(420px,calc(100vw - 28px));padding:22px 24px 19px;border:3px solid #d6bd68;background:radial-gradient(ellipse at 50% 0,#547447a8,transparent 68%),linear-gradient(145deg,#182c21f7,#0a1714f7);color:#fff2c5;text-align:center;box-shadow:inset 0 0 0 2px #fff1b51c,0 0 0 1px #080d0c,0 12px 55px #000b;opacity:0;visibility:hidden;transform:translate(-50%,-42%) scale(.78);pointer-events:none;backdrop-filter:blur(6px)}.forge-result-popup.show{visibility:visible;animation:forge-result-entrance .42s cubic-bezier(.18,.82,.22,1.18) forwards}.forge-result-popup::before,.forge-result-popup::after{content:"✦　·　✧";position:absolute;color:#ffec93;font:900 16px monospace;text-shadow:0 0 14px #ffe47a;animation:forge-spark-rise 1.2s ease-out infinite alternate}.forge-result-popup::before{left:12px;top:9px}.forge-result-popup::after{right:12px;bottom:8px;animation-delay:.4s}.forge-result-spark{display:grid;place-items:center;width:54px;height:54px;border:2px solid #e5cb70;background:radial-gradient(circle,#fff5a8 0 8%,#ffc8594d 15%,#1d392b 72%);border-radius:50%;color:#fff0a2;font-size:29px;text-shadow:0 0 17px #ffe68a;box-shadow:0 0 0 6px #ead27617,0 0 30px #ffe38d55;animation:forge-sigil-spin 3s linear infinite}.forge-result-popup>b{color:#fff0b2;font:1000 22px "Noto Sans Thai",Tahoma,sans-serif;text-shadow:0 2px #1a2317,0 0 16px #ffdc7377}.forge-result-popup>small{color:#c1dbb7;font:900 11px/1.6 "Noto Sans Thai",Tahoma,sans-serif}.forge-result-popup.fail{border-color:#bf7154;background:radial-gradient(ellipse at 50% 0,#8e403a9c,transparent 70%),linear-gradient(145deg,#301d1af7,#130f10f7)}.forge-result-popup.fail .forge-result-spark{border-color:#d58667;background:radial-gradient(circle,#ffb386 0 7%,#d85c4b55 18%,#3b211d 72%);color:#ffd1ad;box-shadow:0 0 0 6px #d8795218,0 0 25px #f37b5a66}.forge-result-popup.fail>b{color:#ffd0b1;text-shadow:0 2px #271411,0 0 16px #f2785c77}.forge-result-popup.fail>small{color:#e2b8a9}
@keyframes forge-result-entrance{0%{opacity:0;transform:translate(-50%,-34%) scale(.72)}65%{opacity:1;transform:translate(-50%,-51%) scale(1.04)}100%{opacity:1;transform:translate(-50%,-47%) scale(1)}}@keyframes forge-spark-rise{to{translate:0 -8px;opacity:.45}}@keyframes forge-sigil-spin{to{rotate:1turn}}
@media(max-width:650px){.forge-layout{grid-template-columns:112px minmax(0,1fr);gap:7px}.forge-sidebar{padding:6px;gap:6px}.forge-nav-card{grid-template-columns:27px 1fr 8px;gap:2px 5px;min-height:54px;padding:6px 4px}.forge-nav-card>span{width:25px;height:25px;font-size:16px}.forge-nav-card>b{font-size:10px}.forge-nav-card>small{font-size:7px}.forge-titlebar h2{font-size:12px!important}.forge-stage-card{grid-template-columns:minmax(105px,1fr) minmax(90px,.7fr);gap:4px 7px;padding:8px}.forge-item-preview{min-height:124px}.forge-item-icon{font-size:42px}.forge-chance-row>div{padding:5px}.forge-chance-row small{font-size:8px}.forge-chance-row b{font-size:14px}.forge-protection em{display:none}.forge-materials-grid{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}}
@media(max-width:760px){#farm-desk-panel{width:calc(100vw - 20px)!important;max-height:calc(100dvh - var(--hud-bottom-reserve) - 20px)!important;padding:16px 14px!important}}
@media(max-width:480px){#farm-desk-panel{padding:14px 12px!important}}
@media(max-width:430px){.forge-layout{grid-template-columns:1fr}.forge-sidebar{position:static;grid-template-columns:1fr 1fr;align-items:stretch}.forge-sidebar .farm-back-btn,.forge-sidebar-title,.forge-sidebar-stock{grid-column:1/-1}.forge-sidebar-title{padding-bottom:0}.forge-nav-card{min-height:48px}.forge-sidebar-stock{grid-template-columns:1fr auto;align-items:center}.forge-sidebar-stock>small{grid-column:1/-1}.forge-titlebar{margin-top:3px}.forge-stage-card{grid-template-columns:minmax(130px,1fr) minmax(110px,.72fr)}}
@media(max-width:560px){.forge-extras-grid{grid-template-columns:1fr}.forge-extras-grid .workshop-intro{min-height:0}}
@media(prefers-reduced-motion:reduce){.forge-nav-card{transition:none}.forge-stage-card.is-forging,.forge-stage-card.is-forging .forge-item-icon,.forge-stage-card.is-forging .forge-item-glow,.forge-result-popup.show,.forge-result-spark{animation:none}}

/* Hotbar <-> Backpack unified drag targets */
body.inventory-dragging .rpg-hotbar{z-index:100}
.rpg-hotbar .hotbar-slot.drag-target{border-color:#fff19a!important;background:#587244!important;box-shadow:inset 3px 3px 0 #172217,inset -3px -3px 0 #adc878,0 0 0 3px rgba(255,241,154,.3)!important}
.rpg-hotbar .hotbar-slot.hotbar-empty .seed-pixel-icon{color:#71836a;opacity:.72}.rpg-hotbar .hotbar-slot.hotbar-empty span{color:#899681}

/* Seed shop exact quantity purchase */
.seed-shop-list{grid-template-columns:1fr!important;max-height:min(390px,48vh);overflow:auto}
.shop-item-quantity{display:grid!important;grid-template-columns:minmax(105px,1fr) auto minmax(108px,auto);align-items:center;gap:8px;cursor:default!important;padding:8px!important}
.shop-seed-name{display:grid;gap:2px;font:900 12px "Noto Sans Thai",Tahoma,sans-serif}.shop-seed-name small{color:#aebfa2;font-size:10px;font-weight:700}
.shop-qty{display:grid;grid-template-columns:auto 28px 46px 28px;align-items:center;gap:3px;color:#d8e4c6;font:800 10px "Noto Sans Thai",Tahoma,sans-serif}
.shop-qty button,.shop-buy{min-height:30px;border:2px solid #6f8256;background:#2d4429;color:#fff0a6;font:900 12px "Noto Sans Thai",Tahoma,sans-serif;cursor:pointer}
.shop-qty input{width:46px;height:30px;border:2px solid #9a7c45;outline:0;background:#101a11;color:#fff5ba;text-align:center;font:900 13px monospace;user-select:text;-webkit-user-select:text}
.shop-buy{padding:5px 9px;border-color:#c49d50;background:#4d3b22;white-space:nowrap}.shop-buy b{color:#fff2a8;font-size:11px}.shop-buy:hover,.shop-qty button:hover{filter:brightness(1.18)}.shop-buy:disabled{opacity:.55;cursor:wait}
@media(max-width:560px){.shop-item-quantity{grid-template-columns:1fr auto}.shop-qty{grid-column:1/-1;justify-content:start}.shop-buy{grid-column:2;grid-row:1}}


/* ==================================================================
   Roadmap: Responsive HUD Safe-Zone System
   Final cascade layer intentionally owns screen-space geometry.
   ================================================================== */
#game-screen{
  --hud-edge:max(14px,env(safe-area-inset-top,0px));
  --hud-side:max(16px,env(safe-area-inset-right,0px));
  --hud-bottom:max(18px,env(safe-area-inset-bottom,0px));
  --hotbar-measured-height:78px;
  --hud-stack-gap:18px;
  --hud-bottom-reserve:calc(var(--hud-bottom) + var(--hotbar-measured-height) + var(--hud-stack-gap));
}
.rpg-hud{top:var(--hud-edge)!important;left:max(16px,env(safe-area-inset-left,0px))!important;max-width:calc(100vw - 210px)}
.world-status{top:var(--hud-edge)!important;right:var(--hud-side)!important}
.performance-toggle{top:calc(var(--hud-edge) + 46px)!important;right:var(--hud-side)!important}
.settings-toggle{top:calc(var(--hud-edge) + 88px)!important;right:var(--hud-side)!important}
.rpg-hotbar{bottom:var(--hud-bottom)!important}
.service-interaction{bottom:calc(var(--hud-bottom-reserve) + var(--collision-lift,0px))!important;max-width:calc(100vw - var(--hud-side) - var(--hud-side));}
#plot-controls{right:var(--hud-side)!important;bottom:var(--hud-bottom)!important;max-width:min(280px,calc(100vw - var(--hud-side) - var(--hud-side)));gap:7px;}
#plot-controls .mouse-help{position:static;right:auto;bottom:auto;width:100%;padding:6px 8px;text-align:right;line-height:1.45;white-space:normal;}
.inventory-window,.service-panel{top:calc(50% - 44px)!important;max-height:calc(100dvh - var(--hud-bottom-reserve) - var(--hud-edge) - var(--hud-edge))!important;}
body.backpack-open .service-interaction,body.service-open .service-interaction{display:none!important}

/* เมื่อพื้นที่แนวนอนไม่พอ Right Rail ย้ายขึ้นเหนือ Hotbar โดยอัตโนมัติ */
@media(max-width:1100px){
  #plot-controls{bottom:var(--hud-bottom-reserve)!important;max-width:min(250px,42vw)}
  .mouse-help{display:none!important}
}
@media(max-width:760px){
  #game-screen{--hud-edge:max(10px,env(safe-area-inset-top,0px));--hud-side:max(10px,env(safe-area-inset-right,0px));--hud-bottom:max(12px,env(safe-area-inset-bottom,0px));--hud-stack-gap:14px}
  .rpg-hud{right:10px!important;max-width:calc(100vw - 20px)}
  .world-status{top:calc(var(--hud-edge) + 62px)!important}
  .performance-toggle{top:calc(var(--hud-edge) + 100px)!important}
  .settings-toggle{top:calc(var(--hud-edge) + 142px)!important}
  #plot-controls{bottom:var(--hud-bottom-reserve)!important;max-width:min(210px,52vw)}
  #plot-hint{max-width:210px}
  .service-interaction{width:calc(100vw - 20px);grid-template-columns:32px minmax(0,1fr) auto;padding:7px 8px;gap:7px}
  .service-interaction small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .inventory-window,.service-panel{width:calc(100vw - 20px)!important;max-height:calc(100dvh - var(--hud-bottom-reserve) - 20px)!important;padding:14px 12px!important}
}
@media(max-width:480px){
  .rpg-hud{grid-template-columns:32px minmax(0,1fr) auto!important}.hud-chip:last-child{display:none}.hud-stack b,.hud-stack small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .service-interaction>span{display:none}.service-interaction{grid-template-columns:minmax(0,1fr) auto}
  #plot-controls{bottom:calc(var(--hud-bottom-reserve) + 58px)!important;max-width:46vw}
  #plot-btn{padding:9px 11px;font-size:12px}#plot-hint{font-size:10px!important;max-width:46vw}
}
@media(max-height:680px){
  #game-screen{--hud-bottom:10px;--hud-stack-gap:10px}
  .selected-item-label{display:none}
  .inventory-window,.service-panel{max-height:calc(100dvh - var(--hud-bottom-reserve) - 12px)!important}
}


/* Bulk Sell Terminal */
.bulk-sell-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;min-height:58px;padding:7px 8px!important;cursor:default!important}
.bulk-sell-info{min-width:0;display:grid;gap:3px}.bulk-sell-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.bulk-sell-info small{color:#aebfa2;font-size:9px;line-height:1.35}
.bulk-sell-controls{display:grid;grid-template-columns:28px 48px 28px auto;align-items:center;gap:3px}.sell-step,.sell-submit{min-height:30px;border:2px solid #806b40;background:#36472a;color:#ffed9a;font:900 12px "Noto Sans Thai",Tahoma,sans-serif;cursor:pointer}.sell-quantity{width:48px;height:30px;border:2px solid #d6bd66;background:#0e190f;color:#fff4bd;text-align:center;font:900 13px monospace;user-select:text;-webkit-user-select:text}.sell-submit{padding:4px 8px;border-color:#8fc9df;background:#294751;color:#d9f5ff;white-space:nowrap;font-size:10px}.sell-submit b{color:#fff0a6;font-size:11px}.sell-step:hover,.sell-submit:hover{filter:brightness(1.18)}.sell-step:disabled,.sell-submit:disabled,.sell-quantity:disabled{opacity:.5;cursor:wait}
@media(max-width:560px){.bulk-sell-row{grid-template-columns:1fr;gap:6px}.bulk-sell-controls{grid-template-columns:36px minmax(48px,64px) 36px 1fr}.sell-quantity{width:100%}.sell-submit{min-height:34px}}

.bulk-sell-info small{white-space:normal}.bulk-sell-row{contain:layout paint style}


/* Harvest result: text-only world feedback, no card / panel / speech bubble */
.harvest-float{min-width:0!important;width:max-content;display:grid;justify-items:center;gap:0;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;transform:translate(-50%,-24px);}
.harvest-float::before{display:none!important}
.harvest-float b,.harvest-float strong,.harvest-float span{display:block;background:transparent!important;border:0!important;box-shadow:none!important;text-align:center;}
.harvest-float b{font-size:16px;text-shadow:2px 2px 0 #172118,0 0 7px rgba(0,0,0,.8);}
.harvest-float strong{font-size:13px;text-shadow:2px 2px 0 #172118,0 0 6px rgba(0,0,0,.8);}
.harvest-float span{font-size:10px;text-shadow:1px 1px 0 #172118,0 0 5px rgba(0,0,0,.8);}
.harvest-float.rarity-uncommon b{color:#7ed66b}.harvest-float.rarity-rare b{color:#8fd8f2}.harvest-float.rarity-legendary b{color:#d69af2;text-shadow:2px 2px 0 #392344,0 0 9px rgba(214,154,242,.75)}.harvest-float.rarity-rainbow b{color:#fff;text-shadow:2px 2px 0 #34263a,0 0 9px rgba(255,255,255,.85)}
@media(max-width:640px){.harvest-float b{font-size:14px}.harvest-float strong{font-size:11px}.harvest-float span{font-size:9px}}

.nearby-player-list{display:grid;gap:6px;max-height:300px;overflow:auto}.nearby-player-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:8px;border:2px solid #526a43;background:#182b1b}.nearby-player-row span{display:grid;gap:3px;min-width:0}.nearby-player-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff0a6;font:900 12px "Noto Sans Thai",Tahoma,sans-serif}.nearby-player-row small{color:#aebfa2;font:10px "Noto Sans Thai",Tahoma,sans-serif}.nearby-player-row button{min-height:32px;padding:6px 9px;border:2px solid #8dbd5c;background:#304a2b;color:#efffca;font:900 10px "Noto Sans Thai",Tahoma,sans-serif}.nearby-player-row button:disabled{opacity:.5;cursor:not-allowed}

.context-card{display:grid;gap:4px;min-width:190px}.context-card strong{color:#fff0a6;font:900 11px "Noto Sans Thai",Tahoma,sans-serif}.context-card small{color:#aebfa2;font:9px "Noto Sans Thai",Tahoma,sans-serif}.context-card.interactive{pointer-events:auto}.context-card.interactive .context-trade-button{pointer-events:auto}.context-trade-button{min-height:28px;padding:5px 8px;border:2px solid #8dbd5c;background:#304a2b;color:#efffca;font:900 10px "Noto Sans Thai",Tahoma,sans-serif;cursor:pointer}.context-trade-button:disabled{opacity:.5;cursor:not-allowed}

.trade-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px}.trade-side{min-width:0}.trade-side h3{margin:4px 0 6px}.trade-offer-zone{min-height:96px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:5px;padding:7px;border:2px dashed #8dbd5c;background:#122218;color:#84967e;font:9px monospace}.trade-offer-card{display:grid;gap:2px;min-width:72px;padding:6px;border:2px solid #d6bd66;background:#304a2b;color:#efffca;font:900 10px "Noto Sans Thai",Tahoma,sans-serif;cursor:pointer}.trade-offer-card span{color:#fff0a6}.trade-offer-card small{color:#aebfa2;font-size:8px}.trade-inventory-title{margin-top:10px;color:#bfe9ff;font:900 10px monospace}.trade-inventory-strip{display:flex;gap:5px;overflow:auto;padding:6px 0}.trade-source-stack{flex:0 0 64px;display:grid;justify-items:center;gap:2px;padding:5px;border:2px solid #526a43;background:#182b1b;color:#efffca;font:900 9px monospace;cursor:grab}.trade-source-stack i{font-size:18px}.trade-source-stack b{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trade-source-stack span{color:#fff0a6}.trade-action{width:100%;min-height:34px;margin-top:6px;border:2px solid #8dbd5c;background:#304a2b;color:#efffca;font:900 11px "Noto Sans Thai",Tahoma,sans-serif;cursor:pointer}.trade-confirm{border-color:#d6bd66;background:#4b3b25;color:#fff0a6}.trade-action:disabled{opacity:.5;cursor:not-allowed}.trade-state-label{padding:8px 0;color:#aebfa2;font:10px monospace;text-align:center}@media(max-width:640px){.trade-columns{grid-template-columns:1fr}.trade-offer-zone{min-height:72px}.trade-source-stack{flex-basis:58px}}


/* Trade Reliability UI — 16-bit two-party settlement */
#trade-panel{border:4px solid #d6bd66;background:linear-gradient(180deg,#263f25 0%,#101b12 100%);box-shadow:8px 8px 0 #070d08,0 0 0 4px rgba(141,189,92,.16)}
#trade-panel .trade-side{border:2px solid #526a43;padding:8px;background:rgba(13,27,16,.72)}
#trade-panel .trade-side:first-child{border-color:#8dbd5c}#trade-panel .trade-side:nth-child(2){border-color:#8fc9df}
#trade-panel .trade-offer-zone{box-shadow:inset 3px 3px 0 rgba(0,0,0,.3),inset -2px -2px 0 rgba(141,189,92,.16)}
#trade-panel .trade-source-stack:focus,#trade-panel .trade-source-stack:hover{border-color:#fff0a6;background:#304b2a;transform:translateY(-2px)}
#trade-panel .trade-source-stack{transition:transform 80ms steps(2)}

/* ---------------------------------------------------------------- *
 * Rare Auction (หอประมูล) - ภาคผนวก 6.2 ของ GDD
 * ---------------------------------------------------------------- */
.auction-columns { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 10px; }
@media (max-width: 640px) { .auction-columns { grid-template-columns: 1fr; } }
.auction-empty { padding: 20px 12px; border: 2px dashed #526a43; color: #84967e; text-align: center; font: 10px monospace; border-radius: 8px; }
.auction-lot-card { display: grid; gap: 8px; padding: 12px; border: 2px solid #715b38; border-radius: 10px; background: #182b1b; box-shadow: 3px 3px 0 rgba(4,9,5,.45); }
.auction-lot-card.rarity-rare { border-color: #8fd8f2; box-shadow: 3px 3px 0 #17313b; }
.auction-lot-card.rarity-legendary { border-color: #d69af2; box-shadow: 3px 3px 0 #392344, 0 0 0 2px rgba(214,154,242,.18); }
.auction-lot-card.rarity-rainbow { border-color: #fff; box-shadow: 3px 3px 0 #34263a, 0 0 0 3px rgba(255,255,255,.16); animation: stack-rainbow 1.4s steps(3) infinite; }
.auction-lot-card.auction-urgent { border-color: #ff6e6e; animation: auction-urgent-pulse .8s ease-in-out infinite; }
@keyframes auction-urgent-pulse { 0%,100% { box-shadow: 0 0 0 rgba(255,110,110,0); } 50% { box-shadow: 0 0 16px rgba(255,110,110,.55); } }
.auction-lot-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 900 13px monospace; color: #eff6cf; }
.rarity-badge { padding: 2px 7px; border: 1px solid #806b40; border-radius: 5px; font: 800 9px monospace; color: #ffed9a; background: #36472a; white-space: nowrap; }
.rarity-rare .rarity-badge { color: #bfe9ff; border-color: #8fd8f2; }
.rarity-legendary .rarity-badge { color: #c6a0ff; border-color: #d69af2; }
.rarity-rainbow .rarity-badge { color: #fff; border-color: #fff; text-shadow: 0 0 6px #ff6ec7; }
.auction-lot-meta { color: #9caf92; font: 9px monospace; }
.auction-timer { font: 900 26px monospace; color: #ffcf6e; text-align: center; letter-spacing: 1px; text-shadow: 2px 2px 0 rgba(4,9,5,.55); }
.auction-urgent .auction-timer { color: #ff8f8f; }
.auction-bid-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 0; border-top: 1px dashed #526a43; border-bottom: 1px dashed #526a43; }
.auction-bid-row small { display: block; color: #8fa286; font-size: 8px; }
.auction-bid-row b { color: #ffed9a; font-size: 13px; }
.auction-bid-controls { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; }
.auction-bid-controls input { min-height: 32px; border: 1px solid #806b40; border-radius: 6px; background: #0f1c10; color: #eafbe0; font: 700 11px monospace; padding: 0 8px; }
.auction-bid-controls button { min-height: 32px; padding: 5px 9px; border: 1px solid #d6bd66; border-radius: 6px; background: #40522d; color: #ffed9a; font: 700 9px monospace; cursor: pointer; box-shadow: 2px 2px 0 rgba(4,9,5,.55); }
.auction-bid-controls button:hover { background: #4d6236; }
#auction-bid-submit-btn { background: #5a3d20; border-color: #ffcf6e; color: #ffdf9a; }
@media (max-width: 640px) { .auction-bid-controls { grid-template-columns: 1fr; } }
.auction-history { display: grid; gap: 6px; }
.auction-history-row { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid #526a43; border-radius: 7px; background: #182b1b; font: 700 9px monospace; color: #eafbe0; }
.auction-history-row.rarity-rare { border-color: #8fd8f2; }
.auction-history-row.rarity-legendary { border-color: #d69af2; }
.auction-history-row.rarity-rainbow { border-color: #fff; }
.auction-history-row small { color: #9caf92; font-size: 8px; }
.auction-submit-btn { white-space: nowrap; }
.auction-submit-controls { display: flex; align-items: center; }
/* Breeding laboratory: large portraits, readable inheritance, keyboard accessible controls. */
[data-farm-view="fusion"]{--parent-a:#83e7ee;--parent-b:#e9bfed}
.breeding-advisor{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0;padding:12px;background:#101f23;border:1px solid #52706d}
.breeding-advisor label{color:#cfdfcc;font-size:12px}.breeding-advisor select{flex:1;min-width:150px;padding:9px;background:#122d29;color:#fff0c5;border:1px solid #758965}.breeding-advisor button{padding:10px;border:1px solid #d4bd75;background:linear-gradient(#4f6950,#203d32);color:#fff1bf;box-shadow:0 3px #07110e;cursor:pointer}
.breeding-advisor button:disabled{opacity:.45;cursor:default}
.breeding-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.breeding-metrics>div{display:grid;gap:4px;padding:12px 8px;background:#0a1c1d;border:1px solid #36595a;text-align:center}
.breeding-metrics span{font-size:11px;color:#c0d8cd}.breeding-metrics strong{font-size:23px;color:#eafac7}.breeding-metrics meter{width:100%;height:8px;accent-color:#80dfbe}
.breeding-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.breeding-tags span{padding:3px 9px;border:1px solid #577e7d;background:#183d38;color:#c1f5e0;border-radius:4px}
.breeding-odds{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.breeding-odds article{display:grid;gap:4px;padding:10px;background:#101d24;border:1px solid #3f5663}.breeding-odds b{color:#f6df9c}.breeding-odds span{display:flex;justify-content:space-between;gap:10px}.breeding-odds .from-a{color:var(--parent-a)}.breeding-odds .from-b{color:var(--parent-b)}.breeding-odds small{color:#ecc67f}
.breeding-explainer{font-size:12px;line-height:1.75;color:#bdd3c8}.breeding-consent{display:flex;gap:10px;align-items:flex-start;margin:14px 0;padding:12px;border:1px solid #9b8959;background:#302c1d;color:#ffebbc;font-size:13px;line-height:1.7;cursor:pointer}.breeding-consent input{flex:0 0 20px;width:20px;height:20px;accent-color:#93dca7}
[data-farm-view="fusion"] .fusion-parent-card{padding:12px 8px;background:radial-gradient(ellipse at 50% 65%,#254b43,transparent 70%),#0b191d;border:2px solid #678b82;box-shadow:inset 0 2px #a8bda966,0 5px #06120f}
[data-farm-view="fusion"] .fusion-parent-card:last-child{border-color:#927fa2;background:radial-gradient(ellipse at 50% 65%,#3c304c,transparent 70%),#14151e}
[data-farm-view="fusion"] .fusion-parent-card canvas{width:156px;height:90px;object-fit:contain;filter:drop-shadow(0 4px 0 #030a09) drop-shadow(0 0 12px #6ae7c544)}
[data-farm-view="fusion"] .fusion-parent-card>b{font-size:15px;white-space:normal;overflow-wrap:break-word}[data-farm-view="fusion"] .fusion-parent-card>small{font-size:11px;white-space:normal;line-height:1.6}
[data-farm-view="fusion"] .fusion-preview{font-family:inherit;font-size:12px;line-height:1.7}.fusion-preview summary{cursor:pointer;color:#ffe2a4;padding:6px 0}
[data-farm-view="fusion"] .fusion-gene-grid span{font-size:12px;padding:10px;line-height:1.6}.hybrid-result-hero>div>strong{font-size:17px;line-height:1.6}.seed-fusion-result:empty{display:none}
.offspring-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}.offspring-stages figure{margin:0;text-align:center;border:1px solid #587c6e;background:radial-gradient(ellipse at 50% 70%,#305d47,#10231f 70%);padding:6px}.offspring-stages canvas{max-width:100%;width:120px;height:auto;image-rendering:pixelated}.offspring-stages figcaption{font-size:12px;color:#e9e8b2}
@media(max-width:480px){.breeding-metrics{gap:3px}.breeding-metrics span{font-size:10px}.breeding-metrics strong{font-size:18px}.breeding-odds{grid-template-columns:1fr}.breeding-advisor button{width:100%}.fusion-forge-stage{gap:10px}.seed-fusion-controls{grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.fusion-forge *,.fusion-forge::before{animation:none!important;transition:none!important}}

/* World Map overlay — Advanced Interactive Cartography HUD */
.world-map-panel{position:fixed;inset:0;z-index:75;display:grid;place-items:center;padding:clamp(8px,2.5vw,28px);background:rgba(4,12,10,.86);backdrop-filter:blur(6px)}
.world-map-panel.hidden{display:none}
.world-map-card{width:min(1140px,97vw);max-height:95vh;display:flex;flex-direction:column;border:2px solid #bfa05d;border-radius:12px;background:linear-gradient(160deg,#132b21 0%,#0d1e18 55%,#081410 100%);box-shadow:inset 0 0 0 1px #385542,inset 0 2px 24px rgba(0,0,0,.65),0 22px 75px rgba(0,0,0,.85);color:#e9edcf;padding:12px 14px 10px;overflow:hidden}
.world-map-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid #334d3b;padding-bottom:10px}
.world-map-header-main{flex:1;min-width:0}
.world-map-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin:3px 0 2px}
.world-map-title-row h2{margin:0;color:#ffe39a;font-size:clamp(20px,3.2vw,30px);letter-spacing:.5px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.world-map-jump-select{min-height:32px;padding:4px 10px;border:1px solid #7a683e;border-radius:6px;background:#102219;color:#f5ebc9;font-size:12px;cursor:pointer;outline:none;transition:border-color .15s}
.world-map-jump-select:hover,.world-map-jump-select:focus{border-color:#e4c768;background:#152c20}
.world-map-header p{margin:0;color:#a2bba0;font-size:11.5px}
.world-map-header button#world-map-close{width:36px;height:36px;border:2px solid #8e7548;border-radius:8px;background:#172a20;color:#ffe6a0;font-size:26px;line-height:1;cursor:pointer;transition:all .15s}
.world-map-header button#world-map-close:hover{border-color:#f8d672;background:#244231;transform:scale(1.05)}

.world-map-filter-bar{display:flex;flex-wrap:wrap;gap:6px 8px;padding:8px 0 7px;border-bottom:1px solid #233b2c}
.map-filter-btn{padding:5px 12px;border:1px solid #44604a;border-radius:18px;background:#13261d;color:#bed1ba;font-size:11.5px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.map-filter-btn:hover{border-color:#d4b35e;color:#fff0b0;background:#1b3629}
.map-filter-btn.active{border-color:#f6d97c;background:linear-gradient(180deg,#2b563d,#1a3b2b);color:#fff6cf;box-shadow:0 0 10px rgba(246,217,124,.35)}

.world-map-stage{position:relative;flex:1;min-height:360px;margin-top:8px;border:2px solid #4a6749;border-radius:8px;background:#1b3326;overflow:hidden;user-select:none}
.world-map-stage canvas#world-map-canvas{display:block;width:100%;height:100%;max-height:min(74vh,680px);margin:0 auto;image-rendering:pixelated;cursor:grab}
.world-map-stage canvas#world-map-canvas.is-dragging{cursor:grabbing}

.world-map-hud-controls{position:absolute;top:12px;left:12px;z-index:15;display:flex;flex-direction:column;background:rgba(12,27,21,.88);border:1px solid #638363;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.6);backdrop-filter:blur(5px);overflow:hidden}
.world-map-hud-controls button{min-width:34px;height:34px;padding:0 8px;border:none;border-bottom:1px solid #244131;background:transparent;color:#ffe6a0;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.world-map-hud-controls button:last-child{border-bottom:none}
.world-map-hud-controls button:hover{background:rgba(52,99,73,.85);color:#ffffff}

.world-map-waypoint-hud{position:absolute;top:12px;right:12px;z-index:15;display:flex;align-items:center;gap:10px;padding:6px 12px;border:1.5px solid #e5c36c;border-radius:8px;background:linear-gradient(135deg,rgba(30,55,42,.96),rgba(15,32,24,.96));box-shadow:0 6px 20px rgba(0,0,0,.65);backdrop-filter:blur(6px);animation:waypoint-beacon-fade .2s ease-out}
.world-map-waypoint-hud.hidden{display:none}
.waypoint-hud-beacon{font-size:18px;animation:waypoint-beacon-bounce .9s infinite alternate ease-in-out}
.waypoint-hud-info{display:flex;flex-direction:column;gap:1px}
.waypoint-hud-info strong{font-size:12px;color:#fff1b5}
.waypoint-hud-info small{font-size:10px;color:#9cd6ad;font-family:monospace}
.world-map-waypoint-hud button{padding:4px 8px;border:1px solid #8e5858;border-radius:5px;background:#351a1a;color:#ffb8b8;font-size:10px;font-weight:700;cursor:pointer}
.world-map-waypoint-hud button:hover{background:#542525;color:#ffffff}

.world-map-tooltip{position:absolute;z-index:60;width:max-content;max-width:270px;padding:10px 12px;border:1.5px solid #d4b265;border-radius:10px;background:rgba(11,25,19,.96);box-shadow:0 8px 30px rgba(0,0,0,.75),0 0 16px rgba(212,178,101,.25);backdrop-filter:blur(8px);pointer-events:auto!important;color:#edf3e4;transform:translate(-50%,-100%);margin-top:-14px;transition:opacity .15s,transform .15s}
.world-map-tooltip.hidden{display:none}
.tooltip-header{display:flex;align-items:center;gap:8px}
.tooltip-icon{font-size:20px;flex:none}
.tooltip-title-box{display:flex;flex-direction:column;min-width:0}
.tooltip-title-box h4{margin:0;font-size:13px;color:#fff0b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tooltip-badge{display:inline-block;padding:1px 6px;border-radius:10px;background:#204332;border:1px solid #4a7559;color:#9de5b9;font-size:9.5px;font-weight:700;margin-top:2px;width:max-content}
.tooltip-desc{margin:6px 0 5px;color:#b6cbb3;font-size:10.5px;line-height:1.4}
.tooltip-meta{display:flex;justify-content:space-between;gap:8px;padding-top:4px;border-top:1px solid #233e2e;color:#8eb397;font:700 9.5px monospace}
.tooltip-actions{display:flex;gap:6px;margin-top:8px}
.tooltip-actions button{flex:1;padding:5px 8px;border-radius:5px;font-size:10px;font-weight:700;cursor:pointer;border:1px solid}
#map-tooltip-nav-btn{background:linear-gradient(180deg,#3b6748,#254530);border-color:#659772;color:#ebf8ec}
#map-tooltip-nav-btn:hover{background:#4b815b;color:#ffffff}
#map-tooltip-warp-btn{background:linear-gradient(180deg,#4a447c,#2d2757);border-color:#8377c8;color:#f1eeff}
#map-tooltip-warp-btn:hover{background:#5c5499;color:#ffffff}
#map-tooltip-warp-btn.hidden{display:none}

.world-map-legend{display:flex;flex-wrap:wrap;gap:8px 14px;padding:7px 8px 3px;color:#c0d2b6;font-size:11px;background:rgba(9,20,15,.7);border-top:1px solid #2d4534}
.world-map-legend span{display:inline-flex;align-items:center;gap:5px}
.map-dot{display:inline-block;width:9px;height:9px;border:1.5px solid #0e1e16;border-radius:50%}
.map-dot.player{background:#fff4a0;box-shadow:0 0 8px #fff1a0}
.map-dot.town{background:#e5865d}
.map-dot.service{background:#6fd6de}
.map-dot.travel{background:#b19bf5}
.map-dot.water{background:#4ebfe4}
.map-dot.plot{background:#8bc36b}
.map-dot.waypoint{background:#ff4d4d;box-shadow:0 0 6px #ff4d4d}

.world-map-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 4px 2px;color:#8ba88b;font:700 11px monospace}
.map-footer-left{display:flex;align-items:center;gap:12px}
#world-map-zoom-level{color:#f5dc8c;background:#152b20;padding:2px 6px;border-radius:4px;border:1px solid #3d5843}
.map-footer-center{color:#a9cba9}
.map-footer-right b{color:#ffe49a}

/* In-game floating Waypoint Banner HUD */
.game-waypoint-hud{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:10px;padding:7px 16px;border:1.5px solid #f3d179;border-radius:24px;background:linear-gradient(135deg,rgba(16,34,26,.94),rgba(10,21,16,.94));box-shadow:0 6px 24px rgba(0,0,0,.65),0 0 16px rgba(243,209,121,.25);backdrop-filter:blur(6px);color:#fcf5d8;animation:waypoint-hud-appear .25s ease-out}
.game-waypoint-hud.hidden{display:none}
.waypoint-hud-pin{font-size:16px;animation:waypoint-beacon-bounce .9s infinite alternate ease-in-out}
.waypoint-hud-label{font-size:12px;font-weight:700;color:#fff2b6}
.waypoint-hud-dist{font:700 11px monospace;color:#8ae0a7;background:#0d261a;padding:2px 7px;border-radius:12px;border:1px solid #2d6244}
.game-waypoint-hud button#game-waypoint-cancel{width:20px;height:20px;padding:0;border:none;border-radius:50%;background:#3c1f1f;color:#ff9e9e;font-size:11px;font-weight:900;cursor:pointer;display:grid;place-items:center}
.game-waypoint-hud button#game-waypoint-cancel:hover{background:#632c2c;color:#ffffff}

@keyframes waypoint-beacon-bounce{0%{transform:translateY(0)}100%{transform:translateY(-3px)}}
@keyframes waypoint-beacon-fade{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes waypoint-hud-appear{0%{opacity:0;transform:translate(-50%,-12px)}100%{opacity:1;transform:translate(-50%,0)}}

@media(max-width:768px){
  .world-map-card{padding:8px 10px 8px}
  .world-map-filter-bar{gap:4px 6px}
  .map-filter-btn{font-size:10px;padding:4px 8px}
  .world-map-hud-controls{top:8px;left:8px}
  .world-map-footer{flex-direction:column;align-items:flex-start;gap:4px}
  .map-footer-right{display:none}
}
.chat-moderation{display:flex;gap:4px;padding:4px 6px;border-top:1px solid #344a38}.chat-moderation button{flex:1;padding:5px 3px;border:1px solid #56694b;background:#17281d;color:#c9d8bc;font-size:9px;cursor:pointer}.chat-moderation button:hover{border-color:#e4c768;color:#ffe69a}
.chat-emotes{display:flex;align-items:center;gap:5px;padding:5px 7px;border-top:1px solid #344a38;color:#d9c783;font-size:10px}.chat-emotes span{margin-right:auto}.chat-emotes button{width:28px;height:24px;padding:0;border:1px solid #56694b;background:#17281d;color:#fff1b0;cursor:pointer}.chat-emotes button:hover{border-color:#e4c768;transform:translateY(-1px)}

/* Cave HUD stays in the clear lower-right corner; lift it only while the dig prompt is open. */
.mine-fullscreen-hud{top:auto!important;left:auto!important;right:max(14px,env(safe-area-inset-right))!important;bottom:max(14px,env(safe-area-inset-bottom))!important;width:min(410px,calc(100vw - 28px))!important;padding:9px 11px!important;border-width:2px!important;border-radius:8px;background:linear-gradient(145deg,#172923f5,#0b1718f4)!important;box-shadow:inset 0 0 0 2px #81957940,0 4px #080e0d,0 10px 26px #0009!important}
.mine-fullscreen-hud header{gap:8px!important}.mine-hud-icon{width:32px!important;height:32px!important;font-size:19px!important;border-radius:5px}.mine-fullscreen-hud header b{font-size:13px!important}.mine-fullscreen-hud header small{font-size:10px!important}.mine-fullscreen-hud button{min-height:34px!important;padding:5px 8px!important;border-radius:5px;font-size:10px!important;white-space:nowrap}
.mine-hud-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px!important;margin-top:7px!important;padding-top:7px!important;font-size:10px!important}.mine-hud-stats span{min-width:0}.mine-hud-stats span:first-child{grid-column:1/-1}.mine-hud-stats b{white-space:nowrap}.mine-energy{width:64px!important;height:6px!important}.mine-fullscreen-hud p{margin:6px 0 2px!important;font-size:10px!important;line-height:1.35}.mine-status{font-size:9px!important;line-height:1.35}
@media(max-width:1240px){body.mine-active.mine-mining-active .mine-fullscreen-hud{top:calc(194px + env(safe-area-inset-top))!important;right:54px!important;bottom:auto!important;width:min(340px,calc(100vw - 70px))!important}}
.loot-pixel-item{display:grid;place-items:center;width:38px;height:38px;border:1px solid #e4cb7f;background:radial-gradient(circle,#4c6a42,#18251e 75%);box-shadow:0 2px 0 #111}.loot-pixel-item img.item-icon{width:36px!important;height:36px!important;image-rendering:pixelated}
@media(max-width:600px){.mine-fullscreen-hud{right:8px!important;bottom:calc(min(42vh,350px) + 16px + env(safe-area-inset-bottom))!important;width:min(360px,calc(100vw - 16px))!important;padding:8px 9px!important}.mine-fullscreen-hud header b{font-size:12px!important}.mine-hud-icon{width:28px!important;height:28px!important}.mine-fullscreen-hud button{font-size:9px!important;padding:4px 6px!important}.mine-hud-stats{font-size:9px!important;gap:4px 8px!important}.mine-fullscreen-hud p{font-size:9px!important}.mine-status{display:none!important}body.mine-active.mine-mining-active .mine-fullscreen-hud{top:calc(190px + env(safe-area-inset-top))!important;right:48px!important;bottom:auto!important;width:min(300px,calc(100vw - 62px))!important}}
.resource-action-card{position:fixed;z-index:86;left:50%;bottom:calc(118px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(430px,calc(100vw - 24px));padding:13px 15px 12px;border:3px solid #dcb975;background:linear-gradient(145deg,#213d2bf7,#10251df7);color:#fff4d5;box-shadow:0 5px 0 #112017,0 15px 34px #0009,inset 0 0 0 2px #4b6848;image-rendering:pixelated;animation:mine-toast-in .18s ease-out both}
.resource-action-card.hidden{display:none!important}
.resource-action-card.is-mine{border-color:#8ac8d5;background:linear-gradient(145deg,#1a3842f7,#10252cf7);box-shadow:0 5px 0 #102028,0 15px 34px #0009,inset 0 0 0 2px #477987}
.resource-action-card.is-perfect{border-color:#fff0a7;box-shadow:0 5px 0 #112017,0 0 27px #ffdb6899,inset 0 0 0 2px #a8bf6c}
.resource-action-heading{display:flex;align-items:center;gap:10px}.resource-action-heading>span{display:grid;place-items:center;width:36px;height:36px;background:#456044;border:1px solid #c5aa69;font-size:20px}.resource-action-heading>div{display:grid;flex:1;gap:3px;min-width:0}.resource-action-heading b{font-size:14px;color:#ffe398}.resource-action-heading small{font-size:10px;color:#c9ddbc}.resource-action-heading kbd{font:900 10px monospace;border:1px solid #8c8053;padding:4px 5px;background:#17291e;color:#ffecb2}
.resource-action-track{position:relative;height:18px;margin:12px 2px 10px;border:2px solid #8c8568;background:#101b17;box-shadow:inset 0 2px 4px #0009}.resource-action-track i{position:absolute;top:0;height:100%;background:repeating-linear-gradient(90deg,#85b957 0 8px,#e8df72 8px 13px);box-shadow:0 0 12px #f1db68b0;animation:mine-gold-pulse .5s steps(2,end) infinite alternate}.resource-action-track u{display:block;height:100%;width:0;background:linear-gradient(90deg,#4d8c62,#91d1a6);text-decoration:none}.resource-action-track b{position:absolute;top:-6px;left:0;width:6px;height:24px;background:#fff6cf;border:1px solid #704a27;box-shadow:0 0 7px #fff2aa;transform:translateX(-50%)}.resource-action-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.resource-action-footer span{font:900 11px monospace;color:#ddcb9e;white-space:nowrap}.resource-action-footer button{padding:6px 14px;border:2px solid #ffe6a0;background:linear-gradient(#eacb79,#a97c37);color:#253025;font:900 11px monospace;cursor:pointer}.resource-action-footer button:disabled{opacity:.55;cursor:default}.resource-action-card.is-mine .resource-action-heading>span{background:#29536a}.resource-action-card.is-mine .resource-action-track i,.resource-action-card.is-mine .resource-action-footer button{display:none}.resource-action-card.is-mine .resource-action-track u{background:linear-gradient(90deg,#357b9c,#a7e6ed)}
@media(max-width:600px){.resource-action-card{bottom:calc(105px + env(safe-area-inset-bottom));padding:10px 11px}.resource-action-heading small{font-size:9px}.resource-action-heading kbd{font-size:9px}}
.resource-harvest-float{grid-template-columns:38px auto;justify-items:start;column-gap:7px;text-align:left;min-width:178px}.resource-harvest-float>b{grid-column:2;grid-row:1;justify-self:start;color:#f4e8b5}.resource-harvest-float>.loot-pixel-item{grid-column:1;grid-row:1/4;align-self:center}.resource-harvest-float>strong{grid-column:2;grid-row:2;justify-self:start}.resource-harvest-float>span{grid-column:2;grid-row:3;justify-self:start}.resource-harvest-float.resource-harvest-perfect{border-color:#ffe27b;box-shadow:3px 3px 0 #352916,0 0 14px #ffdf6999}

/* Forging resolves with a clear success/failure impact, glow and brief shake. */
.forge-stage-card.is-forge-complete{animation:forge-success-jolt .54s steps(4,end) 1;border-color:#ffeb9d;box-shadow:inset 0 0 36px #fff0a34d,0 0 32px #ffe06c86,0 3px 0 #07100c}
.forge-stage-card.is-forge-complete .forge-item-glow{animation:forge-glow-pulse .38s ease-in-out 4 alternate}
.forge-result-popup.success.show{animation:forge-result-entrance .42s cubic-bezier(.18,.82,.22,1.18) forwards,forge-result-shake .5s .18s steps(4,end) 1,forge-result-gold-flash 1.1s .35s ease-in-out 2}
.forge-result-popup.fail.show{animation:forge-result-entrance .42s cubic-bezier(.18,.82,.22,1.18) forwards,forge-result-shake .48s .18s steps(4,end) 1,forge-result-red-flash 1s .35s ease-in-out 2}
@keyframes forge-success-jolt{0%,100%{transform:translate(0,0)}20%{transform:translate(-4px,-2px) rotate(-.35deg)}45%{transform:translate(4px,1px) rotate(.35deg)}70%{transform:translate(-2px,0)}}
@keyframes forge-result-shake{0%,100%{translate:0 0}25%{translate:-5px 0}50%{translate:5px 0}75%{translate:-2px 0}}
@keyframes forge-result-gold-flash{50%{box-shadow:inset 0 0 25px #fff4b466,0 0 44px #ffd85bcc,0 0 80px #fff0a344}}
@keyframes forge-result-red-flash{50%{box-shadow:inset 0 0 28px #ffb29b55,0 0 38px #f1664eaa,0 0 70px #ed634a55}}
@media(prefers-reduced-motion:reduce){.forge-stage-card.is-forge-complete,.forge-result-popup.success.show,.forge-result-popup.fail.show{animation:none}}

.duplexa-target-label{display:block;margin:12px 0 5px;color:#e5d9a6;font-size:11px;font-weight:750}.duplexa-recipe select{width:100%;min-height:38px;padding:8px;border:1px solid #637951;border-radius:6px;background:#102018;color:#f3edcf}.duplexa-recipe #apply-duplexa-btn{border-color:#8ca87b;background:linear-gradient(180deg,#386046,#23402e)}

.seedline-naming{margin-top:14px;padding:12px;border:1px solid #60754f;border-radius:8px;background:#12251b}.seedline-naming h3{margin:0 0 4px;color:#efdc9e;font-size:13px}.seedline-naming>p{margin:0 0 10px;color:#b7c8ad;font-size:11px}.seedline-naming input{width:100%;min-height:38px;margin-top:4px;padding:8px;border:1px solid #637951;border-radius:6px;background:#102018;color:#f3edcf}.seedline-naming>.upgrade-plot-btn{width:100%;margin-top:8px}
.seedline-reagents{margin:14px 0;padding:14px;border:1px solid #526e54;border-radius:12px;background:linear-gradient(145deg,#172c21,#102119)}.seedline-reagents h3{margin:0 0 4px;color:#f2dfa1;font-size:15px}.seedline-reagents>p,.seedline-reagents>small{color:#b5c9ad;font-size:12px}.seedline-reagent-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}.seedline-reagent-card{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border:1px solid #314d3c;border-radius:8px;background:#0b1b14}.seedline-reagent-card label{display:flex;align-items:center;gap:7px;min-width:0;cursor:pointer}.seedline-reagent-card label span{display:grid;gap:2px}.seedline-reagent-card b{color:#f1e8c7;font-size:12px}.seedline-reagent-card small{color:#9caf9e;font-size:10px}.seedline-reagent-card button{flex:none;border:1px solid #827947;border-radius:6px;padding:5px 7px;background:#243b2b;color:#f3df99;font-size:10px;cursor:pointer}.seedline-reagent-card button:disabled{opacity:.45;cursor:not-allowed}.seedline-reagent-card button i{display:block;font-style:normal;color:#b6c9ae}.seedline-reagent-card input{accent-color:#e5c66e}@media(max-width:700px){.seedline-reagent-list{grid-template-columns:1fr}.seedline-reagent-card{padding:7px}}

/* Mining timing cue: make the exact hit window unmistakable above the moving cursor. */
.mine-timing-track{height:20px;margin:25px 2px 12px;overflow:visible}
.mine-timing-track i{z-index:2;box-sizing:border-box;min-width:13px;border-left:3px solid #fff5b5;border-right:3px solid #fff5b5;background:repeating-linear-gradient(135deg,#ffe979 0 5px,#d99a31 5px 10px);box-shadow:0 0 0 2px #513d1e,0 0 16px 5px #ffd84b;animation:mine-gold-pulse .32s steps(2,end) infinite alternate}
.mine-timing-track i::after{content:"กด E ตรงนี้";position:absolute;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);padding:3px 6px;border:1px solid #fff0a1;border-radius:3px;background:#59431c;color:#fff6c9;font:900 10px/1.2 sans-serif;white-space:nowrap;text-shadow:0 1px #392a12;box-shadow:0 2px 6px #0009}
.mine-timing-track u{position:relative;z-index:1}
.mine-timing-track b{z-index:3}
.mine-action-card.is-ready{border-color:#fff09a;box-shadow:0 4px 0 #111516,0 0 24px #ffde68bb,inset 0 0 0 2px #ffe795}
.mine-action-card.is-ready .mine-action-heading small{color:#fff3b2;font-weight:900}
/* The legacy shared resource card also handles mine actions on some interactions. */
.resource-action-card.is-mine .resource-action-track i{display:block;min-width:13px;border-left:3px solid #fff5b5;border-right:3px solid #fff5b5;background:repeating-linear-gradient(135deg,#ffe979 0 5px,#d99a31 5px 10px);box-shadow:0 0 0 2px #513d1e,0 0 16px 5px #ffd84b}
.resource-action-card.is-mine .resource-action-track i::after{content:"กด E / Space";position:absolute;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);padding:3px 6px;border:1px solid #fff0a1;border-radius:3px;background:#59431c;color:#fff6c9;font:900 10px/1.2 sans-serif;white-space:nowrap}
.resource-action-card.is-mine .resource-action-footer button{display:block;min-width:118px}
.resource-action-card.is-mine .resource-action-track i::after{top:calc(100% + 4px);bottom:auto}
.resource-action-card.is-ready .resource-action-heading small{color:#fff1a8;font-weight:900}

.breeding-forecast-row{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:5px 0;font-size:13px}.breeding-forecast-row meter{width:100%;height:16px;accent-color:#8bce8c}.seedline-altar{display:grid;gap:8px;margin:12px 0;padding:14px;border:1px solid #718157;border-radius:9px;background:#10251b}.seedline-altar small{color:#c1d2a9}

/* Field journal: exploration, tools, fishing collection and monthly hall of fame. */
.explorer-open{right:94px!important}.explorer-panel{position:fixed;z-index:125;inset:0;display:grid;place-items:center;padding:18px;background:#06110dd9;backdrop-filter:blur(5px)}.explorer-panel.hidden{display:none!important}.explorer-card{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:min(1080px,calc(100vw - 30px));height:min(790px,calc(100vh - 32px));overflow:hidden;border:3px solid #d8bd71;border-radius:12px;background:linear-gradient(145deg,#183526,#0a1b16 65%);color:#f6efd5;box-shadow:0 8px 0 #06110c,0 28px 70px #000c,inset 0 0 0 2px #456348}.explorer-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid #61704b;background:linear-gradient(90deg,#284c35,#162d23)}.explorer-header span{color:#d9bd70;font:900 10px monospace;letter-spacing:.15em}.explorer-header h2{margin:4px 0 2px;color:#fff0bb;font-size:22px}.explorer-header p{margin:0;color:#bad0b3;font-size:11px}.explorer-header button{width:38px;height:38px;border:1px solid #8f8355;background:#10241a;color:#ffe9a3;font-size:24px;cursor:pointer}.explorer-tabs{display:flex;gap:5px;padding:9px 12px;overflow-x:auto;border-bottom:1px solid #435b42;background:#0d2118}.explorer-tabs button{flex:none;padding:8px 12px;border:1px solid #465c43;border-radius:5px;background:#132b20;color:#b9c9ae;font-size:11px;font-weight:800;cursor:pointer}.explorer-tabs button.active{border-color:#e0c36e;background:#3c5737;color:#fff0aa;box-shadow:0 0 14px #efd46c2b}.explorer-content{min-height:0;padding:16px 18px;overflow:auto}.explorer-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.explorer-section-head h3{margin:0;color:#ffe59b;font-size:17px}.explorer-section-head p{margin:3px 0 0;color:#aebfab;font-size:11px}.explorer-section-head button,.explorer-card footer button{padding:7px 10px;border:1px solid #917f4d;background:#233d2b;color:#ffe49b;cursor:pointer}.explorer-card footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid #4b6247;background:#0c1e16;color:#b8c8af;font-size:10px}.travel-point-list,.field-tool-list,.field-recipe-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.travel-card,.field-tool-card,.field-recipe-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:12px;border:1px solid #415b42;border-radius:8px;background:linear-gradient(145deg,#173024,#10241b);box-shadow:inset 0 0 0 1px #263f31}.travel-card.is-locked{filter:saturate(.55);opacity:.78}.travel-icon,.tool-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid #8b7c4e;border-radius:6px;background:#223e2a;color:#ffeb9a;font-size:22px}.travel-card b,.field-tool-card b,.field-recipe-card b{display:block;color:#f4e9bd;font-size:12px}.travel-card small,.field-tool-card small,.field-recipe-card small{display:block;margin-top:3px;color:#aabda6;font-size:10px;line-height:1.45}.travel-card button,.field-tool-card button,.field-recipe-card button,.fish-card button{padding:7px 9px;border:1px solid #8c7948;border-radius:4px;background:linear-gradient(#405c3c,#273d2d);color:#ffe59b;font-size:10px;font-weight:800;cursor:pointer}.travel-card button:disabled,.field-tool-card button:disabled,.field-recipe-card button:disabled{opacity:.45;cursor:default}.tool-level{color:#79d7a0!important}.recipe-cost{color:#dfc677!important}.fish-journal-summary{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}.fish-journal-summary span{padding:6px 9px;border:1px solid #455c45;border-radius:5px;background:#10251b;color:#c6d7bd;font-size:10px}.fish-catch-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.fish-card{display:grid;grid-template-columns:50px 1fr;gap:10px;padding:11px;border:1px solid #425746;border-radius:8px;background:#10241b}.fish-card.is-displayed{border-color:#efd171;box-shadow:0 0 18px #e4c75e38}.fish-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid #667c61;background:radial-gradient(circle,#315b48,#102019);color:#a8e8e0;font-size:24px}.fish-card h4{margin:0;color:#f3e7bd;font-size:12px}.fish-meta{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}.fish-meta span{padding:2px 5px;border-radius:3px;background:#24392d;color:#bfd0b8;font-size:9px}.fish-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}.fish-actions button{padding:5px 7px}.rarity-Rare{color:#6cc0ff!important}.rarity-Epic{color:#c397ff!important}.rarity-Legendary{color:#ffd66e!important;text-shadow:0 0 8px #ffb13c}.fishing-leaderboards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.fishing-board{padding:10px;border:1px solid #4d644b;border-radius:8px;background:#10241b}.fishing-board h4{margin:0 0 8px;color:#f0d987}.fishing-rank{display:grid;grid-template-columns:34px 1fr auto;gap:6px;padding:6px 4px;border-top:1px solid #2c4133;font-size:10px}.fishing-rank:first-of-type{border-top:0}.fishing-rank strong{color:#ffe8a7}.season-reward-note{display:grid;gap:4px;margin-top:12px;padding:11px;border:1px solid #75663c;background:#2b2a1b;color:#d7ca9b;font-size:10px}.fishing-archive{display:grid;gap:12px}.archive-season{padding:10px;border:1px solid #435944;border-radius:7px;background:#10231a}.archive-season h4{margin:0 0 6px;color:#ecd17c}.archive-awards{display:flex;flex-wrap:wrap;gap:5px}.archive-awards span{padding:5px 7px;border:1px solid #4f644b;background:#182d21;color:#ced9bd;font-size:9px}.fishing-action-card{position:fixed;z-index:130;left:50%;bottom:120px;transform:translateX(-50%);width:min(460px,calc(100vw - 24px));padding:14px;border:3px solid #7fd1dc;border-radius:8px;background:linear-gradient(145deg,#123542f6,#0b2027f6);color:#effffd;box-shadow:0 6px 0 #07151a,0 18px 40px #000a}.fishing-action-card.hidden,.fish-catch-popup.hidden{display:none!important}.fishing-action-head{display:flex;align-items:center;gap:9px}.fishing-action-head>span{font-size:25px}.fishing-action-head>div{display:grid;flex:1;gap:2px}.fishing-action-head b{color:#bff7f3}.fishing-action-head small{color:#b8d5d5;font-size:10px}.fishing-action-head kbd{padding:4px;border:1px solid #a9d7cf;background:#102429;font:900 9px monospace}.fishing-timing-track{position:relative;height:18px;margin:15px 2px 11px;border:2px solid #617b78;background:#08181c}.fishing-timing-track i{position:absolute;top:0;height:100%;background:repeating-linear-gradient(90deg,#8fdc75 0 7px,#f2dc76 7px 13px);box-shadow:0 0 13px #ffe264}.fishing-timing-track u{display:block;width:0;height:100%;background:#2e8da2;text-decoration:none}.fishing-timing-track b{position:absolute;top:-5px;width:6px;height:24px;transform:translateX(-50%);background:#fff7c7;box-shadow:0 0 8px #fff}.fishing-action-card>button{width:100%;padding:8px;border:1px solid #cbdeaa;background:linear-gradient(#438a70,#265d58);color:#efffca;font-weight:900;cursor:pointer}.fish-catch-popup{position:fixed;z-index:135;left:50%;top:18%;display:flex;align-items:center;gap:14px;transform:translateX(-50%);min-width:290px;padding:14px 18px;border:3px solid #f2d477;border-radius:8px;background:#132d25f5;color:#fff1bc;box-shadow:0 5px 0 #0a1612,0 0 35px #ffe07066;animation:mine-toast-in .25s ease-out}.fish-catch-popup>span{font-size:42px;color:#9ee9df}.fish-catch-popup div{display:grid;gap:2px}.fish-catch-popup small{color:#9fc7b7}.fish-catch-popup b{font-size:18px}.fish-catch-popup strong{color:#ffe685}.fish-catch-popup em{font-style:normal;font-size:10px}.profile-fishing-honors{margin-top:9px;padding:9px;border:1px solid #6c6039;background:#242718;color:#ead48b;font-size:10px}.profile-display-fish{display:flex;align-items:center;gap:8px;margin-top:7px;padding:7px;border:1px solid #3f5948;background:#11241c}.profile-display-fish span{font-size:24px}.profile-display-fish b{display:block;color:#d9eee0}.profile-display-fish small{color:#adc0b0}
@media(max-width:760px){.explorer-panel{padding:6px}.explorer-card{width:100%;height:calc(100vh - 12px)}.explorer-header{padding:12px}.explorer-header h2{font-size:17px}.explorer-tabs{padding:7px}.explorer-content{padding:11px}.travel-point-list,.field-tool-list,.field-recipe-list,.fish-catch-list,.fishing-leaderboards{grid-template-columns:1fr}.explorer-card footer{align-items:flex-start;flex-direction:column}.fishing-action-card{bottom:105px}.explorer-open{right:88px!important}}
/* ภาคสนาม: pixel art, สมุดสะสม และของพร้อมใช้ */
.field-pixel-icon{width:58px;height:58px;object-fit:contain;image-rendering:pixelated;flex:none}
.fish-card{grid-template-columns:88px minmax(0,1fr)}
#fishing-target{z-index:2;opacity:.9}#fishing-cursor{z-index:3}#fishing-fill{z-index:1;position:relative}
.field-fish-art{width:88px;height:72px;object-fit:contain;image-rendering:pixelated;flex:none;animation:field-fish-drift 2.8s steps(2,end) infinite}
@keyframes field-fish-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.fish-species-card:nth-child(3n + 2) .field-fish-art{animation-delay:-.9s}.fish-species-card:nth-child(3n) .field-fish-art{animation-delay:-1.8s}
#explorer-level{display:inline-block;color:#86e4c8;font-size:13px;margin-top:5px}
.field-consumables{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.field-consumables button{display:flex;align-items:center;gap:7px;background:#21382f;border:1px solid #71805c;border-radius:8px;color:#f5e7b4;padding:8px}
.field-consumables button:disabled{opacity:.4}
.field-tool-card .material-chip,.field-recipe-card .material-chip{font-size:11px;gap:3px;padding:3px;margin:3px 3px 3px 0}
.farm-craft-section{margin:14px 0;padding:14px;border:1px solid #52674a;border-radius:9px;background:linear-gradient(145deg,#122b20,#0c1d16);box-shadow:inset 0 0 0 1px #263e2d}.farm-craft-heading{display:flex;align-items:center;gap:10px;margin-bottom:12px}.farm-craft-heading>span{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid #b39b58;border-radius:6px;background:#273d2a;color:#f7db88;font:900 11px monospace}.farm-craft-heading h3{margin:0;color:#f3dfa0;font-size:15px}.farm-craft-heading p{margin:3px 0 0;color:#aebfa9;font-size:11px}.farm-craft-section .field-tool-list,.farm-craft-section .field-recipe-list{grid-template-columns:repeat(2,minmax(0,1fr))}.farm-craft-section .field-tool-card,.farm-craft-section .field-recipe-card{min-width:0;background:#193126}.farm-craft-section .field-tool-card>div,.farm-craft-section .field-recipe-card>div{min-width:0}.farm-craft-section .recipe-cost{line-height:1.65}
.forge-field-tools{margin-top:14px;padding:12px;border:1px solid #4b6144;border-radius:8px;background:linear-gradient(145deg,#142d22,#102319)}.forge-field-tools>p{margin:5px 0 10px;color:#b6c5ae;font-size:11px}.forge-field-tools .field-tool-list,.forge-field-tools .field-recipe-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.forge-field-tools .field-tool-card,.forge-field-tools .field-recipe-card{min-width:0;padding:9px;background:#1a3326}.field-craft-status{margin-top:9px;padding:8px 10px;border:1px solid #4f6447;border-radius:5px;background:#101f18;color:#d6c985;font-size:11px}
@media(max-width:760px){.farm-craft-section{padding:10px}.farm-craft-section .field-tool-list,.farm-craft-section .field-recipe-list{grid-template-columns:1fr}.farm-craft-section .field-tool-card,.farm-craft-section .field-recipe-card{grid-template-columns:42px minmax(0,1fr) auto;gap:8px;padding:9px}.farm-craft-section .field-tool-card button,.farm-craft-section .field-recipe-card button{padding:6px}}
@media(max-width:760px){.forge-field-tools{padding:9px}.forge-field-tools .field-tool-list,.forge-field-tools .field-recipe-list{grid-template-columns:1fr}.forge-field-tools .field-tool-card,.forge-field-tools .field-recipe-card{grid-template-columns:38px minmax(0,1fr) auto;gap:7px;padding:8px}}
.forge-field-tool-nav .forge-nav-card{min-height:49px;padding:5px;grid-template-columns:27px minmax(0,1fr) 8px;gap:2px 5px}.forge-field-tool-nav .forge-nav-card>b{font-size:10px}.forge-field-tool-nav .forge-nav-card>small{font-size:7px}.forge-field-tool-nav .forge-nav-icon img.field-pixel-icon{width:24px;height:24px;object-fit:contain}.forge-sidebar-caption{padding:6px 5px 0;border-top:1px solid #3c5143;color:#a7c477;font:900 8px "Noto Sans Thai",Tahoma,sans-serif}.forge-field-tool-nav{display:grid;gap:5px;max-height:42vh;overflow:auto;padding-right:2px;scrollbar-color:#667a52 #101b16;scrollbar-width:thin}.field-forge-guarantee{border-color:#577b55;background:linear-gradient(90deg,#1c3b2a,#172a1e)}.field-forge-guarantee .forge-protection-slot{border-style:solid;border-color:#72ad75;color:#9eecaa}.field-forge-guarantee em{color:#9ee9a6}
@media(max-width:650px){.forge-field-tool-nav{max-height:38vh}.forge-field-tool-nav .forge-nav-card{min-height:46px}}
@media(max-width:430px){.forge-sidebar-caption,.forge-field-tool-nav{grid-column:1/-1}.forge-field-tool-nav{grid-template-columns:repeat(2,minmax(0,1fr));max-height:35vh}.forge-field-tool-nav .forge-nav-card{min-height:48px}}
.fish-species-records{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;margin-top:12px}
.fish-species-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px;background:linear-gradient(145deg,#243d3b,#112824);border:1px solid #6b8067;border-radius:10px;gap:5px}
.fish-species-card small{color:#bbd2c1}
#fishing-cancel{background:transparent;border:0;color:#c3d3d1;font-size:12px;margin-left:12px}
#fish-catch-icon .field-fish-art{width:110px;height:88px}
@media(max-width:600px){.field-pixel-icon{width:44px;height:44px}.field-fish-art{width:64px;height:58px}.field-tool-card,.field-recipe-card{grid-template-columns:44px minmax(0,1fr) auto}.fish-card{gap:7px}.recipe-cost{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.field-fish-art{animation:none}}
.online-reward-launcher{position:fixed;z-index:38;left:16px;top:48%;display:grid;place-items:center;gap:1px;width:58px;height:62px;padding:5px;border:1px solid #d6bd66;border-radius:14px;background:linear-gradient(155deg,#284c3af2,#10231df2);color:#f8e5a4;box-shadow:0 4px 0 #07130f,0 10px 24px #0008,inset 0 0 0 1px #6ea889;cursor:pointer;backdrop-filter:blur(7px)}
.online-reward-launcher>span{font-size:25px;line-height:1;filter:drop-shadow(0 2px 2px #0008)}.online-reward-launcher>small{font:800 9px "Segoe UI",Tahoma,sans-serif;letter-spacing:.04em}.online-reward-launcher>i{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border:2px solid #10251d;border-radius:12px;background:#eaaa50;color:#17251a;font:900 10px "Segoe UI",Tahoma,sans-serif;font-style:normal}.online-reward-launcher>i.hidden{display:none!important}.online-reward-launcher:hover{transform:translateY(-2px);box-shadow:0 6px 0 #07130f,0 14px 28px #0009,inset 0 0 0 1px #98dbb9}
.online-rewards-panel{position:fixed;z-index:138;left:84px;top:50%;transform:translateY(-50%);width:min(370px,calc(100vw - 100px));max-height:min(740px,calc(100dvh - 32px));overflow:auto;padding:20px;border:1px solid #78b99b;border-radius:16px;background:linear-gradient(155deg,#102c22ed,#0a1915f2 76%);color:#edf6e8;box-shadow:0 18px 55px #000a,inset 0 0 0 1px #d9f4d31c;backdrop-filter:blur(12px)}
.online-rewards-panel.hidden{display:none!important}.online-rewards-panel h2{margin:2px 34px 4px 0;color:#fff0bf;font:900 21px/1.25 "Segoe UI",Tahoma,sans-serif;text-shadow:0 2px #111}.online-rewards-panel .service-kicker{color:#f3cc79;font:800 10px "Segoe UI",Tahoma,sans-serif;letter-spacing:.12em}.online-rewards-intro{margin:0 0 14px;color:#b6cbbd;font:500 11px/1.5 "Segoe UI",Tahoma,sans-serif}.online-rewards-progress{margin:0 0 12px;padding:11px 12px;border:1px solid #4e735d;border-radius:10px;background:#0b211b9c}.online-rewards-progress>div{display:flex;justify-content:space-between;gap:8px;color:#bdd2c2;font:700 10px "Segoe UI",Tahoma,sans-serif}.online-rewards-progress b{color:#f6e29d;font-size:11px}.online-rewards-progress>i{display:block;height:7px;margin-top:9px;overflow:hidden;border-radius:9px;background:#07140f}.online-rewards-progress>i>u{display:block;width:0;height:100%;border-radius:9px;background:linear-gradient(90deg,#4ea77d,#a8dc8c);box-shadow:0 0 12px #8de2aa;transition:width .35s ease}.online-rewards-list{display:grid;gap:6px}.online-reward-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px;border:1px solid #395648;border-radius:9px;background:linear-gradient(100deg,#152b22d9,#10231dd9)}.online-reward-row.is-ready{border-color:#c7ae5e;background:linear-gradient(100deg,#3b3522cc,#182b20e8);box-shadow:inset 0 0 18px #f1d06b0c}.online-reward-row.is-claimed{opacity:.68}.online-reward-icon{display:grid;place-items:center;width:30px;height:30px;border:1px solid #617566;border-radius:8px;background:#102019;color:#d8c77b;font:900 10px "Segoe UI",Tahoma,sans-serif}.is-ready .online-reward-icon{border-color:#d7bb63;color:#ffe69a}.is-claimed .online-reward-icon{border-color:#65a987;color:#97dfb2}.online-reward-copy{display:grid;min-width:0;gap:2px}.online-reward-copy b{overflow:hidden;color:#f2f3df;font:800 11px "Segoe UI",Tahoma,sans-serif;text-overflow:ellipsis;white-space:nowrap}.online-reward-copy small{overflow:hidden;color:#b5c9b8;font:600 9px "Segoe UI",Tahoma,sans-serif;text-overflow:ellipsis;white-space:nowrap}.online-reward-claim{min-width:71px;padding:6px 8px;border:1px solid #57846b;border-radius:7px;background:#1a4735;color:#c8f1d8;font:800 9px "Segoe UI",Tahoma,sans-serif;cursor:pointer}.online-reward-row.is-ready .online-reward-claim{border-color:#e1c06a;background:linear-gradient(140deg,#f0d681,#c99b42);color:#312513}.online-reward-claim:disabled{border-color:#43594a;background:#18271f;color:#889c8c;cursor:default}.online-rewards-reset{display:block;margin-top:11px;color:#9eb4a4;font:600 9px/1.5 "Segoe UI",Tahoma,sans-serif;text-align:center}.online-rewards-empty{padding:20px 10px;color:#afc4b5;text-align:center;font:600 11px "Segoe UI",Tahoma,sans-serif}
@media(max-width:600px){.online-reward-launcher{left:8px;width:49px;height:55px}.online-rewards-panel{left:66px;width:min(350px,calc(100vw - 76px));padding:14px;max-height:calc(100dvh - 24px)}.online-reward-row{grid-template-columns:30px minmax(0,1fr) auto;gap:6px;padding:6px}.online-reward-icon{width:27px;height:27px}.online-reward-claim{min-width:64px;padding:6px 5px}}
/* Separate map, explorer and settings controls on the HUD rail. */
#world-map-open{right:calc(var(--hud-side,16px) + 42px)!important}
#explorer-open{right:calc(var(--hud-side,16px) + 84px)!important}
.hunt-action-card{position:fixed;z-index:131;left:50%;bottom:120px;transform:translateX(-50%);width:min(510px,calc(100vw - 24px));padding:15px;border:3px solid #9dbd77;border-radius:9px;background:linear-gradient(145deg,#233c29f7,#101e16f7 72%);color:#f5f0d4;box-shadow:0 6px 0 #08120c,0 20px 44px #000b,inset 0 0 0 1px #4b6542}.hunt-action-card.hidden{display:none!important}.hunt-action-head{display:flex;align-items:center;gap:10px}.hunt-action-head>span{display:grid;place-items:center;width:39px;height:39px;border:1px solid #aa9655;border-radius:7px;background:radial-gradient(circle,#53663c,#1c2c20);font-size:23px}.hunt-action-head>div{display:grid;flex:1;gap:3px}.hunt-action-head b{color:#ffe79a;font-size:14px}.hunt-action-head small{color:#b8c8ae;font-size:10px}.hunt-action-head kbd{padding:5px 7px;border:1px solid #97854f;border-radius:4px;background:#17251a;color:#fff0a8;font:900 10px monospace}.hunt-beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:13px 0 10px}.hunt-beats>span{display:flex;align-items:center;gap:7px;min-height:33px;padding:5px 8px;border:1px solid #394e37;border-radius:5px;background:#101d15;color:#82937d;transition:background .12s,border-color .12s,color .12s,transform .12s}.hunt-beats>span i{display:grid;place-items:center;width:20px;height:20px;border:1px solid #56634b;border-radius:50%;font:900 10px monospace;font-style:normal}.hunt-beats>span b{font-size:10px}.hunt-beats>span.is-current{transform:translateY(-1px);border-color:#f1d36c;background:linear-gradient(90deg,#504626,#26361f);color:#fff1a2;box-shadow:0 0 13px #f0cf5630}.hunt-beats>span.is-current i{border-color:#f1d36c;color:#ffe18b}.hunt-beats>span.is-done{border-color:#557c53;background:#183125;color:#9ee0a3}.hunt-beats>span.is-done i{border-color:#79cb83;background:#254a34;color:#b9ffb2}.hunt-track-wrap{padding:9px 10px 10px;border:1px solid #3e5941;border-radius:6px;background:#0b1811}.hunt-track-label{display:flex;justify-content:space-between;gap:8px;margin-bottom:7px;color:#d8e0c2;font-size:10px}.hunt-track-label small{color:#9cad91}.hunt-timing-track{position:relative;height:22px;overflow:visible;border:2px solid #53674a;background:repeating-linear-gradient(90deg,#0d1711 0 12px,#14231a 12px 24px);box-shadow:inset 0 0 0 1px #080e0a}.hunt-timing-track i{position:absolute;top:0;height:100%;background:repeating-linear-gradient(90deg,#c7d975 0 7px,#ffe47a 7px 13px);box-shadow:0 0 16px #e7d563aa;opacity:.72}.hunt-timing-track u{display:block;width:0;height:100%;background:linear-gradient(90deg,#487454aa,#99cb6b88);text-decoration:none}.hunt-timing-track b{position:absolute;top:-6px;width:6px;height:30px;transform:translateX(-50%);border-radius:2px;background:#fff3c4;box-shadow:0 0 9px #fff2a0}.hunt-action-card.is-ready .hunt-timing-track i{opacity:1;filter:brightness(1.3);animation:hunt-signal .42s ease-in-out infinite alternate}.hunt-action-card.is-ready .hunt-beats>span.is-current{box-shadow:0 0 20px #f6d85c70}.hunt-action-card>#hunt-shoot{width:100%;margin-top:9px;padding:9px 12px;border:1px solid #b0d28b;border-radius:5px;background:linear-gradient(#517943,#314d31);color:#fff0b4;font-weight:900;letter-spacing:.02em;cursor:pointer}.hunt-action-card>#hunt-shoot:hover:not(:disabled){filter:brightness(1.16)}.hunt-action-card>#hunt-shoot:disabled{opacity:.72;cursor:wait}.hunt-risk-note{margin:7px 0 2px;color:#e6b898;font-size:9px;text-align:center}.hunt-action-card>#hunt-cancel{display:block;margin:2px auto 0;border:0;background:transparent;color:#a8b6a1;font-size:9px;cursor:pointer}.hunt-action-card>#hunt-cancel:hover{color:#f2e5bc}@keyframes hunt-signal{from{filter:brightness(1);box-shadow:0 0 9px #e7d56388}to{filter:brightness(1.5);box-shadow:0 0 19px #fff17dcc}}@media(max-width:760px){.hunt-action-card{bottom:105px;padding:11px}.hunt-beats{gap:4px}.hunt-beats>span{gap:4px;padding:4px}.hunt-beats>span b{font-size:9px}.hunt-track-label{font-size:9px}}
.hunt-skill-strip{display:grid;grid-template-columns:1fr auto;gap:3px 8px;margin-top:11px;padding:7px 9px;border:1px solid #425b3d;border-radius:5px;background:linear-gradient(90deg,#17291d,#203622)}.hunt-skill-strip b{color:#b5ee9b;font-size:10px}.hunt-skill-strip span{color:#ffe69c;font-size:10px;font-weight:800}.hunt-skill-strip small{grid-column:1/-1;color:#93aa88;font-size:9px}.hunt-action-card{width:min(560px,calc(100vw - 24px))}.hunt-beats>span b{white-space:nowrap}.hunt-action-card.is-ready #hunt-shoot{background:linear-gradient(#8a7834,#615022);border-color:#ffe68b;box-shadow:0 0 18px #f4d35d55}
.hunt-health-panel{display:flex;align-items:center;gap:12px;margin-top:8px;padding:7px 9px;border:1px solid #594846;border-radius:5px;background:linear-gradient(90deg,#241b18,#1c241a)}.hunt-health-panel>span{display:grid;min-width:138px;gap:2px}.hunt-health-panel b{color:#ffc1a3;font-size:10px}.hunt-health-panel small{color:#aebc9e;font-size:9px}.hunt-health-track{height:9px;flex:1;overflow:hidden;border:1px solid #7d6655;border-radius:99px;background:#120e0d}.hunt-health-track i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d35d49,#ffbd73);box-shadow:0 0 10px #ff684e77;transition:width .35s ease}.hunt-action-card.is-wounded .hunt-health-track i{background:linear-gradient(90deg,#c84239,#ff8759)}
.hunt-action-card{width:min(600px,calc(100vw - 24px));max-height:min(82vh,660px);overflow:auto}.hunt-scope-wrap{position:relative;margin-top:10px;padding:6px;border:1px solid #778b58;border-radius:7px;background:#08130e;box-shadow:inset 0 0 16px #0009}.hunt-scope-wrap canvas{display:block;width:100%;height:auto;max-height:29vh;object-fit:contain;border-radius:4px;image-rendering:pixelated;cursor:crosshair;touch-action:none}.hunt-scope-label{display:flex;justify-content:space-between;gap:8px;padding:6px 3px 0;color:#d7e5bd;font:700 10px monospace}.hunt-scope-label span:last-child{color:#f2d477}.hunt-charge-track{position:relative;height:23px;margin-top:8px;overflow:hidden;border:1px solid #617348;border-radius:4px;background:#0b160f}.hunt-charge-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#83b75a,#f0d469,#e9934c);box-shadow:0 0 13px #d3da6b88;transition:width .06s linear}.hunt-charge-track b{position:absolute;inset:0;display:grid;place-items:center;color:#f4edc9;font-size:9px;text-shadow:0 1px 3px #000}.hunt-action-card.is-drawing #hunt-shoot{background:linear-gradient(#f0d775,#a77b32);color:#1d2516;box-shadow:0 0 18px #f4d35d66}.hunt-action-card>#hunt-shoot{touch-action:none;user-select:none;-webkit-user-select:none}.hunt-action-card .hunt-track-label{margin:8px 0 0}.hunt-risk-note{line-height:1.5}
.archery-mastery-card{display:grid;grid-template-columns:1fr;gap:7px;margin:12px 0;padding:12px 14px;border:1px solid #668452;border-radius:8px;background:linear-gradient(110deg,#173728,#12251c 68%,#243923);box-shadow:inset 0 0 20px #9bd47b0d}.archery-mastery-card>div{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}.archery-mastery-card small{color:#aabf9b;font-size:10px}.archery-mastery-card b{color:#d8f2a8;font-size:14px}.archery-mastery-card b span{margin-left:8px;color:#ffdfa0;font-size:10px}.archery-mastery-card i{height:6px;overflow:hidden;border-radius:5px;background:#0b1711}.archery-mastery-card i:after{display:block;width:var(--mastery-progress);height:100%;border-radius:inherit;background:linear-gradient(90deg,#75bd67,#e5d878);content:"";box-shadow:0 0 10px #96d78188}
.resume-preview-btn{width:100%;margin-top:10px;padding:12px 16px;border:1px solid #9cd69b;border-radius:8px;background:linear-gradient(135deg,#285539,#163b2a);color:#fff0bd;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer}.resume-preview-btn:hover{filter:brightness(1.15)}
.forage-scratch-panel{position:fixed;z-index:145;inset:0;display:grid;place-items:center;padding:16px;background:#06120dd9;backdrop-filter:blur(5px)}.forage-scratch-panel.hidden{display:none!important}.forage-scratch-card{width:min(520px,calc(100vw - 26px));max-height:calc(100dvh - 28px);overflow:auto;padding:17px;border:2px solid #8eac65;border-radius:9px;background:radial-gradient(ellipse at 50% 0,#294634,#12281c 62%,#0b1a13);color:#edf1d0;box-shadow:0 7px 0 #07100b,0 22px 64px #000c,inset 0 0 0 1px #496044}.forage-scratch-header{display:flex;align-items:center;gap:11px}.forage-mystery-seed{display:grid;place-items:center;width:43px;height:43px;border:1px solid #c7ae5f;background:linear-gradient(145deg,#3d5a35,#192c20);color:#ffe58e;font-size:25px;text-shadow:0 0 12px #eaca6188}.forage-scratch-header>div{min-width:0;flex:1}.forage-scratch-header small{color:#9fc78d;font:900 9px monospace;letter-spacing:.1em}.forage-scratch-header h2{margin:3px 0 0;color:#ffebaf;font-size:20px}.forage-scratch-header>button{width:34px;height:34px;border:1px solid #788b58;border-radius:4px;background:#15271c;color:#ffdf91;font-size:22px;cursor:pointer}.forage-scratch-copy{margin:10px 0;color:#b5c9a7;font-size:11px;line-height:1.55}.forage-odds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:9px 0 11px}.forage-odds>div{display:grid;gap:3px;padding:6px 7px;border:1px solid #3c5440;border-radius:4px;background:#0d1c14}.forage-odds small{color:#aabd9e;font-size:8px}.forage-odds b{font:900 12px monospace;color:#e4d292}.forage-odds .is-uncommon b{color:#78dba6}.forage-odds .is-rare b{color:#77c8ff}.forage-odds .is-epic b{color:#dca5ff}.forage-soil-frame{position:relative;overflow:hidden;border:2px solid #a28a4d;border-radius:5px;background:#17271b;box-shadow:0 3px 0 #08120c}.forage-soil-frame canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.forage-soil-frame canvas:first-child{position:relative}.forage-soil-frame canvas:nth-child(2){position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}.forage-scratch-tip{position:absolute;right:8px;bottom:7px;padding:4px 7px;border:1px solid #e4d18b66;border-radius:3px;background:#0a160dcc;color:#ffecb0;font-size:9px;pointer-events:none}.forage-scratch-progress{margin-top:10px}.forage-scratch-progress>div{display:flex;justify-content:space-between;color:#b7caa9;font-size:10px}.forage-scratch-progress b{color:#ffe49a;font-family:monospace}.forage-scratch-progress>i{display:block;height:9px;margin-top:5px;overflow:hidden;border:1px solid #536846;border-radius:9px;background:#08130d}.forage-scratch-progress u{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#70b86a,#d5cf6b,#f0d184);box-shadow:0 0 12px #c8dc7388;transition:width .15s;text-decoration:none}.forage-scratch-status{min-height:16px;margin:7px 0;color:#aabe9b;font-size:10px;text-align:center}.forage-reveal-button{width:100%;padding:9px;border:1px solid #c2a75a;border-radius:4px;background:linear-gradient(#617c42,#354d30);color:#fff0b5;font-weight:900;cursor:pointer}.forage-reveal-button:disabled{border-color:#39493a;background:#202c23;color:#758373;cursor:default}.forage-result-card{display:grid;grid-template-columns:66px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid #d4b962;border-radius:5px;background:linear-gradient(110deg,#30432d,#18291f);box-shadow:0 0 19px #e4c66e26}.forage-result-card.hidden{display:none!important}.forage-result-icon{display:grid;place-items:center;width:62px;height:62px;border:1px solid #8c9e61;background:#0c1c14}.forage-result-icon .field-pixel-icon{width:48px;height:48px}.forage-result-card>div:nth-child(2){display:grid;gap:4px}.forage-result-card small{color:#d2bc71;font-size:9px;font-weight:900}.forage-result-card b{color:#f5e8b4;font-size:15px}.forage-result-card span{color:#a9c89c;font-size:10px}.forage-result-card button{padding:8px;border:1px solid #9bb46b;border-radius:4px;background:#3e6038;color:#fff0b5;font-size:10px;font-weight:800;cursor:pointer}.forage-scratch-panel.is-result .forage-odds,.forage-scratch-panel.is-result .forage-soil-frame,.forage-scratch-panel.is-result .forage-scratch-progress,.forage-scratch-panel.is-result .forage-scratch-status,.forage-scratch-panel.is-result .forage-reveal-button,.forage-scratch-panel.is-result .forage-scratch-copy{display:none}.forage-scratch-panel.is-result .forage-result-card{display:grid}.forage-scratch-panel.is-result .forage-scratch-card{width:min(420px,calc(100vw - 26px))}@media(max-width:480px){.forage-scratch-card{padding:12px}.forage-scratch-header h2{font-size:17px}.forage-odds>div{padding:5px 4px}.forage-odds small{font-size:7px}.forage-result-card{grid-template-columns:52px minmax(0,1fr);gap:8px}.forage-result-icon{width:50px;height:50px}.forage-result-card button{grid-column:1/-1}.forage-result-icon .field-pixel-icon{width:40px;height:40px}}
.online-rewards-feedback{display:block;min-height:14px;margin-top:8px;color:#f1d78f;font:700 10px/1.5 "Segoe UI",Tahoma,sans-serif;text-align:center}.online-rewards-reset{margin-top:4px}
.mutant-follow-toggle{margin-top:8px;min-height:30px;border:1px solid #80d8ac;border-radius:5px;background:linear-gradient(135deg,#174b38,#28684a);color:#ddffe9;font:700 11px var(--pixel-font,monospace);cursor:pointer}.mutant-follow-toggle:disabled{opacity:.48;cursor:not-allowed}

/* Dock action minigames above the real, responsive hotbar instead of guessing its height. */
.resource-action-card:not(.hidden),.hunt-action-card:not(.hidden){bottom:calc(var(--hud-bottom,18px) + var(--hotbar-measured-height,78px) + var(--hud-stack-gap,18px))!important;max-height:calc(100dvh - var(--hud-edge,14px) - var(--hud-bottom,18px) - var(--hotbar-measured-height,78px) - var(--hud-stack-gap,18px) - 12px);overflow-y:auto;overscroll-behavior:contain}
/* The hunting minigame is a modal: center it in the viewport, independent of the hotbar dock. */
.hunt-action-card:not(.hidden){left:50%;right:auto;top:50%;bottom:auto!important;transform:translate(-50%,-50%);max-height:min(82dvh,660px);overflow-y:auto;overscroll-behavior:contain}