/* HYPERFARM walkable world: fullscreen game page. No backdrop-filter, solid dark panels. */
body.world { overflow: hidden; background: #02100e; height: 100vh; height: 100dvh; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
body.world #stage { position: fixed; inset: 0; z-index: 0; }
body.world #stage canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
body.world kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 24px; padding: 0 7px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 7px; background: var(--panel2); font: 600 12px/1 var(--num); color: var(--ink); }

/* loading */
#loading { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #0a3d34 0%, #02100e 70%); transition: opacity .6s ease; }
#loading.done { opacity: 0; pointer-events: none; }
.ld-in { display: grid; justify-items: center; gap: 16px; width: min(320px, 80vw); }
.ld-in img { width: 92px; height: 92px; border-radius: 24px; box-shadow: 0 0 60px rgba(125, 255, 180, .25); }
.ld-t { font: 800 30px/1 var(--display); letter-spacing: -.01em; } .ld-t b { color: var(--mint); }
.ld-bar { width: 100%; height: 6px; border-radius: 99px; background: var(--panel3); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--mint), var(--yellow)); transition: width .25s ease; }
.ld-s { font: 500 13px/1 var(--num); color: var(--muted); letter-spacing: .06em; }

/* top bar */
.w-top { position: fixed; z-index: 30; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; pointer-events: none; }
.w-top > * { pointer-events: auto; }
.w-back { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px 0 8px; border: 1px solid var(--line2); border-radius: 14px; background: rgba(4, 28, 24, .92); font: 800 17px/1 var(--display); white-space: nowrap; }
.w-back img { width: 30px; height: 30px; border-radius: 9px; } .w-back b { color: var(--mint); }
.w-right { display: flex; gap: 8px; align-items: center; }
.w-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 14px; background: rgba(4, 28, 24, .92); color: var(--ink); font: 700 14px/1 var(--num); letter-spacing: .05em; cursor: pointer; white-space: nowrap; transition: border-color .2s, background .2s; }
.w-btn:hover { border-color: var(--teal); background: var(--panel3); }
.w-chip { cursor: default; color: var(--mint); } .w-chip:hover { border-color: var(--line2); background: rgba(4, 28, 24, .92); } a.w-btn { text-decoration: none; }
.w-right { flex-wrap: nowrap; min-width: 0; } .w-top { max-width: 100vw; }
@media (max-width: 760px) { .hide-s { display: none; } }
.w-btn.primary { background: var(--teal); border-color: var(--teal); color: #03211c; } .w-btn.primary:hover { background: var(--mint); }
.w-btn[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); color: #03211c; }
.w-btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 11px; } .w-btn.wide { width: 100%; }

/* intro */
#intro { position: fixed; z-index: 20; inset: 0; display: grid; place-items: end start; padding: 0 0 9vh 6vw; pointer-events: none; background: linear-gradient(90deg, rgba(2, 16, 14, .72), rgba(2, 16, 14, 0) 60%); }
#intro[hidden], #prompt[hidden], #hint[hidden], #cross[hidden], #panel[hidden], #maplist[hidden], #devpanel[hidden], #touch[hidden], #fallback[hidden] { display: none; }
.intro-card { pointer-events: auto; max-width: min(94vw, 980px); }
.intro-k { font: 600 13px/1 var(--num); letter-spacing: .14em; color: var(--teal); }
.intro-card h1 { font: 800 clamp(40px, 8vw, 96px)/1 var(--display); margin: 12px 0 10px; letter-spacing: -.035em; background: linear-gradient(90deg, var(--cyan), var(--mint) 55%, var(--yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .12em .08em 0; display: inline-block; max-width: 100%; }
.intro-card p { font: 600 clamp(20px, 2.6vw, 28px)/1.2 var(--display); color: #dffbf5; margin: 0 0 26px; }
.intro-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.intro-keys { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 24px; color: var(--muted); font-size: 13px; } .intro-keys span { display: inline-flex; align-items: center; gap: 8px; }

/* hint, prompt, crosshair */
#hint { position: fixed; z-index: 15; left: 16px; bottom: 14px; max-width: min(560px, calc(100vw - 32px)); padding: 9px 13px; border-radius: 12px; background: rgba(4, 28, 24, .85); border: 1px solid var(--line); color: var(--muted); font: 500 12.5px/1.35 var(--num); }
#cross { position: fixed; z-index: 14; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(125, 255, 180, .8); box-shadow: 0 0 10px rgba(125, 255, 180, .9); pointer-events: none; }
#prompt { position: fixed; z-index: 25; left: 50%; bottom: 14vh; transform: translateX(-50%); }
#promptBtn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px 0 14px; border: 1px solid var(--mint); border-radius: 16px; background: rgba(3, 33, 28, .94); color: var(--ink); font: 700 15px/1 var(--num); letter-spacing: .05em; cursor: pointer; box-shadow: 0 0 36px rgba(125, 255, 180, .25); animation: hfpulse 1.8s ease-in-out infinite; white-space: nowrap; }
#promptBtn kbd { border-color: var(--mint); color: var(--mint); }
@keyframes hfpulse { 50% { box-shadow: 0 0 56px rgba(125, 255, 180, .45); } }

/* farm panel (right drawer on desktop, bottom sheet on phones) */
#panel { position: fixed; z-index: 40; top: 70px; right: 12px; bottom: 12px; width: min(400px, calc(100vw - 24px)); overflow: auto; padding: 20px 20px 22px; border: 1px solid var(--line2); border-radius: 20px; background: rgba(4, 27, 23, .97); box-shadow: 0 20px 70px rgba(0, 0, 0, .55); -webkit-user-select: text; user-select: text; animation: slidein .3s ease-out; }
@keyframes slidein { from { transform: translateX(24px); opacity: 0; } }
.p-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel2); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 0 3px; }
.p-x:hover { border-color: var(--teal); }
.p-head { display: flex; align-items: center; gap: 14px; padding-right: 48px; }
.p-av { flex: none; width: 54px; height: 54px; border-radius: 16px; background: var(--panel3) center/cover; border: 1px solid var(--line2); display: grid; place-items: center; font: 800 14px/1 var(--display); color: var(--mint); }
.p-head h2 { font-size: 24px; letter-spacing: -.02em; overflow-wrap: anywhere; } .p-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.p-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.stage-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(125, 255, 180, .14); border: 1px solid rgba(125, 255, 180, .45); color: var(--mint); font: 700 12px/1 var(--num); letter-spacing: .05em; }
.p-ca { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font: 500 13px/1 var(--num); } .p-ca .k { color: var(--muted); } .p-ca code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mint); }
.p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.p-grid > div { padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); min-width: 0; }
.p-grid dt { color: var(--muted); font: 600 10.5px/1.25 var(--num); letter-spacing: .06em; text-transform: uppercase; }
.p-grid dd { margin: 7px 0 0; font: 700 17px/1.15 var(--num); color: var(--ink); overflow-wrap: anywhere; }
.p-grid > div:nth-child(3) dd, .p-grid > div:nth-child(4) dd { color: var(--mint); }
.p-share { margin: 0 0 14px; padding: 13px 14px; border: 1px dashed var(--line2); border-radius: 13px; background: rgba(14, 50, 45, .5); font-size: 14px; color: #cfe9e3; min-height: 48px; }
.p-share b { color: var(--mint); font-family: var(--num); } .p-share .btn { margin-top: 10px; }
.p-actions { display: flex; flex-wrap: wrap; gap: 10px; } .p-actions .btn { flex: 1 1 140px; }
.p-actions .btn[hidden] { display: none; }

/* map */
#maplist { position: fixed; z-index: 35; top: 70px; right: 12px; bottom: 12px; width: min(320px, calc(100vw - 24px)); display: flex; flex-direction: column; border: 1px solid var(--line2); border-radius: 20px; background: rgba(4, 27, 23, .95); box-shadow: 0 20px 70px rgba(0, 0, 0, .5); overflow: hidden; }
.m-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 12px; font: 700 14px/1 var(--num); letter-spacing: .1em; color: var(--mint); } .m-head span { color: var(--muted); font-weight: 500; }
.m-body { flex: 1; overflow: auto; padding: 0 10px 10px; display: grid; gap: 8px; align-content: start; }
.m-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; }
.m-row:hover { border-color: var(--mint); background: var(--panel2); }
.m-row b { font: 800 16px/1.1 var(--display); } .m-row small { display: block; color: var(--muted); font: 500 12px/1.2 var(--num); margin-top: 4px; }
.m-row .num { color: var(--mint); font-size: 14px; text-align: right; white-space: nowrap; }
.m-foot { padding: 10px 16px 14px; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line); }

/* dev panel */
#devpanel { position: fixed; z-index: 33; left: 12px; bottom: 56px; width: 250px; padding: 12px; border: 1px dashed var(--yellow); border-radius: 16px; background: rgba(4, 27, 23, .95); display: grid; gap: 9px; }
.d-head { display: flex; justify-content: space-between; gap: 8px; font: 700 12px/1.2 var(--num); color: var(--yellow); letter-spacing: .08em; } .d-head span { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .d-row .w-btn { padding: 0 4px; }
.d-note { color: var(--muted); font-size: 11.5px; }

/* touch controls */
#touch { position: fixed; z-index: 22; inset: 0; pointer-events: none; }
#joy { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); width: 128px; height: 128px; border-radius: 50%; border: 2px solid rgba(125, 255, 180, .45); background: rgba(4, 28, 24, .55); pointer-events: auto; touch-action: none; }
#joy i { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(125, 255, 180, .55); border: 2px solid var(--mint); }
#touchBtns { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); display: grid; gap: 12px; pointer-events: auto; }
#touchBtns button { width: 70px; height: 70px; border-radius: 50%; border: 2px solid var(--line2); background: rgba(4, 28, 24, .7); color: var(--ink); font: 700 12px/1 var(--num); letter-spacing: .05em; touch-action: none; }
#touchBtns button.on { background: var(--mint); color: #03211c; border-color: var(--mint); }

#fallback { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: radial-gradient(ellipse at 50% 30%, #0a3d34 0%, #02100e 70%); overflow: auto; -webkit-user-select: text; user-select: text; }
.fb-card { width: min(560px, 100%); display: grid; gap: 14px; justify-items: start; } .fb-card img { width: 64px; height: 64px; border-radius: 18px; } .fb-card h2 { font-size: 28px; } .fb-card p { color: #c4dcd7; }
#fbList { width: 100%; display: grid; gap: 8px; }
.fb-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); } .fb-row b { font-family: var(--display); } .fb-row span { font: 500 13px/1.2 var(--num); color: var(--mint); text-align: right; }

@media (max-width: 760px) {
  .intro-card h1 { font-size: clamp(34px, 10.4vw, 60px); }
  .w-top { top: 8px; left: 8px; right: 8px; } .w-back span { display: none; } .w-back { padding: 0 8px; }
  .w-btn { padding: 0 12px; } #motionBtn { display: none; }
  #intro { place-items: end center; padding: 0 16px 6vh; background: linear-gradient(0deg, rgba(2, 16, 14, .85), rgba(2, 16, 14, 0) 80%); text-align: center; } .intro-cta { justify-content: center; } .intro-keys { display: none; }
  #panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 76vh; max-height: 76dvh; border-radius: 20px; animation: slideup .3s ease-out; padding: 16px 14px 18px; }
  @keyframes slideup { from { transform: translateY(30px); opacity: 0; } }
  #maplist { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 46vh; }
  #prompt { bottom: 24vh; } #hint { display: none; }
  #devpanel { left: 8px; bottom: auto; top: 62px; width: 220px; }
  .p-grid dd { font-size: 15px; }
}
@media (max-height: 520px) { #intro { padding-bottom: 3vh; } .intro-card h1 { font-size: 44px; margin: 6px 0; } .intro-card p { margin-bottom: 12px; } }
body.world [hidden] { display: none !important; }
#maplabels { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.m-tag { position: absolute; left: 0; top: 0; pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--mint); border-radius: 10px; background: rgba(3, 33, 28, .92); color: var(--mint); font: 800 14px/1 var(--display); cursor: pointer; white-space: nowrap; }
.m-tag:hover { background: var(--mint); color: #03211c; }
.p-free { margin: 18px 0 20px; font-size: 17px; line-height: 1.45; color: #dffbf5; }
.m-row.free { border-style: dashed; } .m-row.free b { color: var(--yellow); }
.m-tag.free { border-style: dashed; border-color: var(--yellow); color: var(--yellow); } .m-tag.free:hover { background: var(--yellow); color: #03211c; }