/* v0.7 game shell: the map is the whole window; everything else is HUD. */
body.game-mode{margin:0;overflow:hidden;background:#16261d}
body.game-mode .topbar,body.game-mode .world-topline,body.game-mode .map-instructions,body.game-mode .field-note,body.game-mode .below-map,body.game-mode footer,body.game-mode .map-caption,body.game-mode .hotbar{display:none}
body.game-mode main{max-width:none;padding:0;margin:0}
body.game-mode .play-layout{gap:0}
body.game-mode .world-card{border:0;box-shadow:none;border-radius:0;background:#16261d}
body.game-mode .world-stage{aspect-ratio:auto;height:100vh;height:100dvh;min-height:0;width:100%}
body.game-mode .world-card:fullscreen .world-stage{height:100vh}
body.game-mode .hud{top:14px;left:14px;transform:scale(1.12);transform-origin:top left}
body.game-mode .map-tools{top:14px;right:14px}
body.game-mode .zoom-controls{left:14px;bottom:14px}
body.game-mode .dpad{right:14px;bottom:14px}
body.game-mode .toast{bottom:104px}
body.game-mode .key-prompt{top:64px;right:14px}
.sound-toggle{font:700 17px/1 ui-monospace,monospace;color:#79542b}.sound-toggle.off{opacity:.55}

.game-clock{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:11px;padding:8px 16px 8px 10px;background:#f7dea6f2;border:2px solid #79512d;border-radius:4px;box-shadow:inset 0 0 0 2px #fff0bf,3px 3px #3a502e55;color:#563c25;pointer-events:none;z-index:3;white-space:nowrap}
.clock-sun{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px solid #8a6131;background:#ffe9a3;color:#c9861d}
.clock-sun.dawn{background:linear-gradient(#ffd28a,#ffb37a);color:#b4581c}.clock-sun.night{background:linear-gradient(#34427f,#1f2a55);color:#f4e7a8;border-color:#1c2446}
.clock-sun svg{width:21px;height:21px}
.clock-text strong{display:block;font-size:15px;letter-spacing:.5px}
.clock-sub{display:flex;align-items:center;gap:5px;font-size:11.5px;color:#8c6944;margin-top:2px}.clock-sub svg{width:12px;height:12px}
.clock-pips{display:flex;gap:3px;margin-top:5px}.clock-pips i{width:17px;height:4px;border-radius:2px;background:#dcc089}.clock-pips i.done{background:#a9813f}.clock-pips i.now{background:#5d7837;box-shadow:0 0 0 1px #fff0bf}
.clock-pips i:nth-child(2),.clock-pips i:nth-child(4){margin-right:5px}

.game-items{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:7px;background:linear-gradient(#b88a49,#a57638);border:3px solid #6d4825;border-radius:6px;box-shadow:inset 0 2px #d9ad64,0 4px #14241c66;z-index:3;max-width:calc(100% - 330px)}
.item-slot{position:relative;display:grid;place-items:center;width:50px;height:50px;padding:0;border:2px solid #81552d;border-radius:4px;background:#f1d9a2;box-shadow:inset 2px 2px #fff3c8,inset -2px -3px #cfa560;color:#7a5c31;cursor:pointer;flex-shrink:0}
.item-slot.empty{background:#c79c5c;box-shadow:inset 2px 3px #a67b40;border-color:#7e5329;cursor:default}
.item-slot svg{width:26px;height:26px;filter:drop-shadow(1px 2px #0000002a)}
.item-slot:hover:not(.empty){background:#fff0bd;transform:translateY(-3px);border-color:#5d7837}
.item-slot sup{position:absolute;right:2px;bottom:1px;font:700 11px ui-monospace,monospace;color:#fff;background:#5b3f1f;border-radius:3px;padding:0 3px;line-height:14px}
.item-slot .item-name{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);padding:4px 8px;background:#2c4030f2;color:#f6ecc8;font-size:11.5px;border-radius:3px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s}
.item-slot:hover .item-name{opacity:1}
.icon-gem{color:#2f9fb8}.icon-egg{color:#b98a3a}.icon-flame{color:#d9622b}.icon-droplet{color:#2f7fc0}.icon-sprout{color:#4f8a35}.icon-milk{color:#6c7f95}.icon-sword{color:#7b7f8c}.icon-pickaxe,.icon-shovel{color:#7a5a36}.icon-flask-conical{color:#8a55b0}.icon-package{color:#9a6f37}
.item-more{font:700 12px ui-monospace,monospace;color:#fff0bf;padding:0 4px}
.item-hint{display:flex;align-items:center;gap:5px;color:#fff0bf;font-size:11.5px;padding:0 6px 0 4px}.item-hint .keycap{height:20px;min-width:20px;font-size:10.5px;border-bottom-width:2px}

.game-feed{position:absolute;left:14px;bottom:62px;display:flex;flex-direction:column;gap:5px;width:min(370px,42%);pointer-events:none;z-index:3}
.feed-line{align-self:flex-start;max-width:100%;padding:6px 11px;background:#22352ad9;border-left:3px solid #9aaf60;color:#f3e8bf;font-size:12.5px;line-height:1.5;border-radius:2px;animation:feedIn .28s ease-out;transition:opacity .5s,transform .5s}
.feed-line.mine{border-left-color:#e6cf7a}.feed-line.weather{border-left-color:#7fc4d8}.feed-line.danger{border-left-color:#e0694f;background:#4a2420d9}
.feed-line.leaving{opacity:0;transform:translateX(-12px)}
@keyframes feedIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.game-floats{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.float-text{position:absolute;transform:translate(-50%,-100%);font:800 17px/1.1 -apple-system,'PingFang SC',sans-serif;color:#fff;white-space:nowrap;text-shadow:-2px 0 #2b1d10,2px 0 #2b1d10,0 -2px #2b1d10,0 2px #2b1d10,-1px -1px #2b1d10,1px 1px #2b1d10,1px -1px #2b1d10,-1px 1px #2b1d10,0 4px #0005;animation:floatUp 1.5s cubic-bezier(.2,.7,.3,1) forwards}
.float-text.hurt{color:#ff7b63;font-size:21px}.float-text.heal{color:#9be37a}.float-text.coin{color:#ffd95a;font-size:19px}.float-text.gain{color:#fff3c4}.float-text.lose{color:#d9c9a3;font-size:15px}.float-text.energy{color:#ffe07a}.float-text.tired{color:#e8c56a;font-size:15px}
@keyframes floatUp{0%{opacity:0;margin-top:10px;scale:.7}12%{opacity:1;scale:1.15}22%{scale:1}75%{opacity:1}100%{opacity:0;margin-top:-58px}}

.game-banner{position:absolute;left:0;right:0;top:24%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 0;background:linear-gradient(90deg,#14241c00,#14241cc4 28%,#14241cc4 72%,#14241c00);color:#fff3c9;pointer-events:none;z-index:4}
.game-banner[hidden]{display:none}
.game-banner strong{font-size:34px;letter-spacing:10px;text-indent:10px;text-shadow:0 3px #0007}.game-banner span{font-size:13.5px;letter-spacing:3px;color:#d9d6a8}
.game-banner.show{animation:bannerShow 2.6s ease both}
@keyframes bannerShow{0%{opacity:0;transform:scaleY(.6)}12%{opacity:1;transform:none}78%{opacity:1}100%{opacity:0}}

.game-journal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,92%);max-height:80%;display:flex;flex-direction:column;gap:10px;padding:14px;background:#f7dea6;border:3px solid #704725;border-radius:4px;box-shadow:0 0 0 2px #b58544,inset 0 0 0 2px #fff0bf,6px 9px #14241c88;color:#563c25;z-index:6}
.game-journal[hidden]{display:none}
.world-stage.journal-open::after{content:'';position:absolute;inset:0;background:#14241c8c;z-index:5;pointer-events:none}
.journal-body{overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.journal-line{display:flex;gap:9px;align-items:flex-start;padding:7px 6px;border-bottom:1px dashed #d3ae72;font-size:13px;line-height:1.55}
.journal-line p{margin:0}.journal-line svg{width:15px;height:15px;margin-top:3px;flex-shrink:0;color:#8c6944}.journal-line.mine svg{color:#5d7837}.journal-line.weather svg{color:#c9861d}

.world-stage.hit canvas{animation:shake .4s}
.world-stage.hit::before,.world-stage.low-health::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;box-shadow:inset 0 0 130px 30px #c8281e88}
.world-stage.low-health::before{animation:pulse 1.6s ease-in-out infinite;box-shadow:inset 0 0 120px 18px #c8281e66}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-7px,3px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(3px,2px)}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

.title-screen{position:fixed;inset:0;z-index:40;display:grid;place-items:center;overflow-y:auto;background:radial-gradient(ellipse at center,#14241c66 0,#0d1a14e0 100%);backdrop-filter:blur(3px) saturate(1.1);-webkit-backdrop-filter:blur(3px) saturate(1.1);transition:opacity .7s,transform .7s}
.title-screen.leaving{opacity:0;transform:scale(1.06);pointer-events:none}
.title-card{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff3c9;padding:20px}
.title-leaf{width:64px;height:64px;margin-bottom:14px;background:radial-gradient(circle at 32% 30%,#b9e07a 0 22%,#6fae3f 23% 60%,#3e7a2c 61%);border-radius:0 62% 0 62%;transform:rotate(-8deg);box-shadow:0 5px #0005;animation:leaf 3.4s ease-in-out infinite}
@keyframes leaf{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(3deg) translateY(-7px)}}
.title-card h1{margin:0;font-size:clamp(64px,11vw,128px);font-weight:900;letter-spacing:.18em;text-indent:.18em;color:#ffe9a8;text-shadow:0 4px #8a5a22,0 8px #4f351f,0 14px 18px #000a}
.title-sub{margin:14px 0 0;font:700 15px ui-monospace,monospace;letter-spacing:.55em;text-indent:.55em;color:#d9d6a8}
.title-tag{margin:8px 0 0;font-size:17px;letter-spacing:.5em;text-indent:.5em;color:#f3dfa6}
.title-description{max-width:36em;margin-top:14px;color:#eee3bc;font-size:14px;line-height:1.75}
.title-start{margin-top:27px;padding:14px 44px;font-size:18px;font-weight:700;color:#563c25;background:#f4d48b;border:3px solid #6d4825;border-radius:6px;box-shadow:inset 2px 2px #fff3c8,inset -2px -4px #c79a52,0 6px #1b302799;cursor:pointer;animation:startPulse 1.8s ease-in-out infinite}
.title-start:hover{background:#ffe7a8}
@keyframes startPulse{0%,100%{transform:none}50%{transform:translateY(-4px)}}
.title-keys{margin-top:30px;font-size:13px;color:#e8dcb4;display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:center}
.title-keys .keycap{height:22px}
.title-credit{margin-top:16px;font-size:11px;color:#b9c3a0;letter-spacing:.5px}
@media (max-height:540px){
  .title-leaf{display:none}
  .title-card h1{font-size:clamp(38px,13vh,68px)}
  .title-sub,.title-tag,.title-description{margin-top:8px}
  .title-start{margin-top:17px;padding:10px 28px}
  .title-keys{margin-top:16px}
}

@media (max-width:899px){
  body.game-mode .hud{transform:none;top:8px;left:8px}
  .game-clock{top:8px;left:auto;right:8px;transform:none;padding:5px 9px 5px 6px;gap:7px}.clock-sun{width:28px;height:28px}.clock-text strong{font-size:12px}.clock-sub,.clock-pips{display:none}
  body.game-mode .map-tools{top:58px;right:8px}
  body.game-mode .key-prompt{top:auto;bottom:128px;right:8px}
  .game-items{max-width:calc(100% - 16px);bottom:8px;padding:4px;gap:3px;overflow-x:auto;scrollbar-width:thin}.item-slot{width:38px;height:38px}.item-slot svg{width:20px;height:20px}.item-hint{display:none}
  body.game-mode .zoom-controls{display:none}body.game-mode .dpad{bottom:62px;right:8px}
  .game-feed{bottom:62px;left:8px;width:52%}.feed-line{font-size:11px;padding:4px 8px}
  .game-banner strong{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.float-text,.game-banner.show,.title-start,.title-leaf,.world-stage.hit canvas{animation-duration:.01s}}

.game-pause{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(330px,88%);display:flex;flex-direction:column;gap:9px;padding:20px;background:#f7dea6;border:3px solid #704725;border-radius:6px;box-shadow:0 0 0 2px #b58544,inset 0 0 0 2px #fff0bf,6px 9px #14241c88;color:#563c25;z-index:6}
.game-pause[hidden]{display:none}
.pause-toggle{font-weight:800;font-size:18px}
.pause-title{font-size:22px;letter-spacing:8px;text-indent:8px;text-align:center;margin-bottom:6px}
.pause-button{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;font:600 14.5px inherit;font-family:inherit;color:#563c25;background:#fbeac0;border:2px solid #81552d;border-radius:4px;box-shadow:inset 2px 2px #fff6d6,inset -2px -3px #dcb878;cursor:pointer}
.pause-button:hover{background:#fff3c9;border-color:#5d7837}
.pause-button:last-child{margin-top:8px;background:#efd3a0;color:#8a4a2a}
.end-restart{margin-top:16px;pointer-events:auto}
.end-restart{width:auto;padding:12px 34px}

/* v0.8: the day runs in real time */
.clock-bar{position:relative;height:5px;margin-top:5px;border-radius:3px;background:rgba(40,32,20,.28);overflow:hidden}
.clock-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#f6c453,#ffe9a8);border-radius:3px;transition:width 1s linear}
.clock-bar b{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55)}
.clock-sub-icon{display:inline-flex}.clock-sub-icon svg{width:12px;height:12px}