* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #070914; color: #f3ead2; font-family: 'Press Start 2P', monospace; font-size: 10px; user-select: none; }
canvas#game { position: fixed; inset: 0; display: block; image-rendering: pixelated; cursor: crosshair; }
.hidden { display: none !important; }
.small { font-size: 8px; line-height: 1.6; }
.muted { color: #a99f86; }
b { color: #ffd46b; font-weight: normal; }

.panel {
  background: rgba(18, 14, 22, 0.82);
  border: 3px solid #0b0910;
  box-shadow: inset 0 0 0 2px #5b4a3a, 4px 4px 0 rgba(0,0,0,0.35);
  padding: 10px;
}

#hud { position: fixed; inset: 0; pointer-events: none; }
#hud .panel, #hud input, #hud button { pointer-events: auto; }

#topleft { position: absolute; left: 10px; top: 10px; width: 190px; }
#dayline { font-size: 12px; margin-bottom: 6px; }
#sunmoon { color: #ffd46b; }
.clock { height: 6px; background: linear-gradient(90deg, #6fb7e8 0 56%, #e88a3a 56% 63%, #1a2350 63% 95%, #e8a07a 95%); border: 2px solid #0b0910; position: relative; margin-bottom: 8px; }
.clock i { position: absolute; top: -4px; width: 3px; height: 10px; background: #fff; left: 0; }
.lbl { font-size: 8px; margin: 4px 0; color: #e9c58a; }
.bar { height: 9px; border: 2px solid #0b0910; background: #2a2028; margin-bottom: 4px; }
.bar i { display: block; height: 100%; width: 50%; transition: width .2s; }
.bar.fuel i { background: repeating-linear-gradient(90deg, #ffb030 0 6px, #ff8a20 6px 8px); }
.bar.firehp i { background: repeating-linear-gradient(90deg, #e8303f 0 6px, #b81f2c 6px 8px); }
#topleft.alarm { box-shadow: inset 0 0 0 2px #e8303f, 4px 4px 0 rgba(0,0,0,0.35); animation: blink .6s steps(2) infinite; }
@keyframes blink { 50% { background: rgba(90, 10, 20, 0.85); } }

#plist { position: absolute; right: 10px; top: 178px; min-width: 150px; font-size: 8px; line-height: 1.9; padding: 6px 10px; }
#plist span.dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: 1px solid #000; vertical-align: -1px; }

#bottom { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
#stats { display: flex; gap: 22px; margin-bottom: 4px; }
#stats img { width: 18px; height: 18px; image-rendering: pixelated; margin-right: 1px; }
#food { direction: rtl; }
#hotbar { display: flex; gap: 2px; background: rgba(10,8,14,0.8); border: 3px solid #0b0910; padding: 2px; }
#helditem { margin-top: 4px; font-size: 8px; height: 10px; text-shadow: 1px 1px 0 #000; }
.slot { width: 44px; height: 44px; background: #3a3040; border: 2px solid #1a1420; box-shadow: inset 2px 2px 0 #241c2a, inset -2px -2px 0 #54485c; position: relative; pointer-events: auto; }
.slot img { position: absolute; left: 4px; top: 4px; width: 32px; height: 32px; image-rendering: pixelated; }
.slot .n { position: absolute; right: 3px; bottom: 2px; font-size: 8px; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.slot .k { position: absolute; left: 2px; top: 2px; font-size: 6px; color: #8a7f96; }
.slot .dur { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: #111; }
.slot .dur i { display: block; height: 100%; }
.slot.sel { border-color: #ffd46b; box-shadow: 0 0 0 2px #ffd46b, inset 2px 2px 0 #241c2a; z-index: 1; }
.slot.pick { border-color: #6be0ff; box-shadow: 0 0 0 2px #6be0ff; }
.slot.hb { background: #403448; }
/* sensación: casillero que rebota al recibir un item, corazones que tiemblan, barras que brillan */
.slot.bump { animation: bump .3s ease-out; z-index: 2; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.25) rotate(-4deg); filter: brightness(1.6); } 100% { transform: scale(1); } }
#hearts.shake { animation: shake .35s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
#hearts.pulse, #food.pulse { animation: pulse .45s ease-out; }
@keyframes pulse { 40% { transform: scale(1.15); filter: brightness(1.6); } }
.bar.flash { animation: flash .6s ease-out; }
@keyframes flash { 25% { filter: brightness(2.2); box-shadow: 0 0 10px #ffb030; } }

#chatlog { position: absolute; left: 10px; bottom: 60px; width: 420px; font-size: 8px; line-height: 1.8; }
#chatlog div { background: rgba(0,0,0,0.45); padding: 2px 6px; margin-top: 2px; text-shadow: 1px 1px 0 #000; transition: opacity 1s; overflow-wrap: anywhere; }
#chatlog div.old { opacity: 0; }
#chatlog .sys { color: #ffd46b; }
#chatin { position: absolute; left: 10px; bottom: 30px; width: 420px; font: inherit; font-size: 9px; padding: 6px; background: rgba(0,0,0,0.75); color: #fff; border: 2px solid #5b4a3a; outline: none; }

#center { position: absolute; top: 22%; width: 100%; text-align: center; font-size: 18px; color: #ffe2a0; text-shadow: 3px 3px 0 #000; opacity: 0; transition: opacity .6s; padding: 0 20px; line-height: 1.5; }
#center.show { opacity: 1; }
#hint { position: absolute; left: 10px; bottom: 10px; font-size: 7px; color: #a99f86; text-shadow: 1px 1px 0 #000; }

#invpanel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); max-height: 86vh; overflow: auto; }
#invpanel .cols { display: flex; gap: 22px; }
#invpanel h3, #help h3 { margin: 0 0 10px; font-size: 11px; color: #ffd46b; }
#invgrid { display: grid; grid-template-columns: repeat(5, 44px); gap: 3px; width: max-content; }
#invgrid p { width: 230px; }
#invpanel p { max-width: 240px; }
#craftlist { display: flex; flex-direction: column; gap: 3px; width: 330px; }
.recipe { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: #2c2432; border: 2px solid #1a1420; cursor: pointer; font-size: 8px; }
.recipe:hover { background: #3c3044; }
.recipe.no { opacity: 0.45; cursor: not-allowed; }
.recipe img { width: 24px; height: 24px; image-rendering: pixelated; }
.recipe .nm { flex: 1; line-height: 1.5; }
.recipe .cost { display: flex; gap: 6px; align-items: center; }
.recipe .cost span { display: inline-flex; align-items: center; gap: 1px; }
.recipe .cost img { width: 16px; height: 16px; }
.recipe .cost .lack { color: #ff6b6b; }
.recipe .st { font-size: 6px; color: #8fc7ff; display: block; margin-top: 2px; }
.recipe .st.lack { color: #ff6b6b; }


#help { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 94vw); font-size: 8px; line-height: 1.9; }
#help ul { padding-left: 16px; margin: 0 0 10px; }

.overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#death, #over { background: rgba(80, 0, 10, 0.45); }
#over { background: rgba(10, 5, 20, 0.7); }
.overlay h1 { font-size: 26px; color: #ff4a4a; text-shadow: 4px 4px 0 #000; margin: 0 0 16px; }
.overlay p { font-size: 10px; text-shadow: 2px 2px 0 #000; line-height: 1.8; }

#join { background: radial-gradient(ellipse at 50% 120%, #4a1e0a 0%, #120b18 45%, #05060f 100%); }
#join::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1px 1px at 40% 70%, #ccc, transparent), radial-gradient(2px 2px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 10% 80%, #aaa, transparent), radial-gradient(1px 1px at 55% 45%, #fff, transparent); opacity: .6; }
.joinbox { position: relative; width: min(960px, 96vw); max-height: 96vh; overflow: auto; text-align: center; padding: 18px 20px; }
.title { font-size: 26px; line-height: 1.25; color: #ffd46b; text-shadow: 4px 4px 0 #8a2a0a, 7px 7px 0 #000; margin: 0 0 8px; }
.title span { color: #ff8a30; }
#name, #code { width: min(320px, 100%); font: inherit; font-size: 11px; padding: 9px; background: #0b0910; color: #fff; border: 2px solid #5b4a3a; outline: none; margin: 8px 0 4px; text-align: center; }
h3.pick { font-size: 11px; color: #ffd46b; margin: 12px 0 10px; }
#chars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; text-align: left; }
.card { display: flex; gap: 10px; align-items: center; padding: 8px; background: #241c2a; border: 3px solid #0b0910; box-shadow: inset 0 0 0 2px #3a2e44; cursor: pointer; transition: transform .1s; }
.card:hover { background: #2e2436; transform: translateY(-2px); }
.card.on { box-shadow: inset 0 0 0 2px var(--c), 0 0 0 3px var(--c); background: #33283d; }
.card canvas { width: 96px; height: 120px; image-rendering: pixelated; flex: none; background: radial-gradient(ellipse at 50% 85%, rgba(0,0,0,0.35) 0 22%, transparent 23%), linear-gradient(#3f6e34, #4f8c35); border: 2px solid #0b0910; }
.card h4 { margin: 0 0 6px; font-size: 12px; color: var(--c); text-shadow: 2px 2px 0 #000; font-weight: normal; }
.card p { margin: 0 0 5px; font-size: 7px; line-height: 1.6; }
.card .up { color: #8ef58e; }
.card .down { color: #ff8a8a; }
.card .ab { color: #8fc7ff; }
@media (max-width: 860px) { #chars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #chars { grid-template-columns: 1fr; } }

#barrow { display: flex; gap: 8px; align-items: center; }
#ability { width: 50px; height: 50px; border: 3px solid #0b0910; background: #2c2440; overflow: hidden; }
#ability canvas { position: absolute; left: 7px; top: 7px; width: 32px; height: 32px; image-rendering: pixelated; }
#ability .k { font-size: 8px; color: #ffd46b; left: 3px; top: 3px; z-index: 2; }
#ability i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0,0,0,0.65); }
#ability.ready { box-shadow: 0 0 0 2px #8fc7ff, inset 2px 2px 0 #241c2a; }
button { font: inherit; font-size: 12px; padding: 12px 26px; background: #e8762a; color: #fff; border: 3px solid #0b0910; box-shadow: inset -3px -3px 0 #a84a10, inset 3px 3px 0 #ffaa60; cursor: pointer; text-shadow: 2px 2px 0 #6a2a00; }
button:hover { background: #f58a3a; }
#joinerr { color: #ff6b6b; }

@media (max-width: 700px) {
  .slot { width: 34px; height: 34px; }
  .slot img { width: 24px; height: 24px; left: 3px; top: 3px; }
  #chatlog, #chatin { width: 70vw; }
  #invpanel .cols { flex-direction: column; }
}

/* ============================================================ ECONOMÍA */
#econbar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: stretch; pointer-events: auto; transition: opacity .5s; }
#econbar > div { background: rgba(18, 14, 22, 0.85); border: 3px solid #0b0910; box-shadow: inset 0 0 0 2px #5b4a3a, 3px 3px 0 rgba(0,0,0,.35); padding: 6px 10px; display: flex; align-items: center; gap: 8px; }
#wallet { font-size: 14px; color: #ffe070; text-shadow: 2px 2px 0 #6a4a10; min-width: 96px; }
#wallet img { width: 22px; height: 22px; image-rendering: pixelated; }
#wallet.gain { animation: wgain .25s ease-out; }
#wallet.spent { animation: wspent .4s; }
@keyframes wgain { 50% { transform: scale(1.18); box-shadow: inset 0 0 0 2px #ffd24a, 0 0 16px #ffd24a; } }
@keyframes wspent { 30% { transform: translateX(-4px); box-shadow: inset 0 0 0 2px #e8303f; } 60% { transform: translateX(4px); } }
#rolebadge { font-size: 8px; color: var(--c); }
#rolebadge img { width: 18px; height: 18px; image-rendering: pixelated; }
#vlbox { flex-direction: column; align-items: stretch !important; gap: 4px !important; min-width: 190px; font-size: 7px; color: #e9c58a; }
.bar.lvl { height: 7px; margin: 0; }
.bar.lvl i { background: linear-gradient(90deg, #c8a040, #ffe070); box-shadow: 0 0 6px #ffd24a; }
.hudfloat { position: absolute; right: -10px; top: 6px; font-size: 12px; text-shadow: 2px 2px 0 #000; animation: hudfloat 1.2s ease-out forwards; pointer-events: none; background: none !important; border: 0 !important; box-shadow: none !important; }
@keyframes hudfloat { to { transform: translateY(-26px); opacity: 0; } }
#topleft.secondary { transform: scale(.82); transform-origin: top left; opacity: .8; }

button.gold { background: linear-gradient(#ffd96a, #e8a830); color: #4a2a08; text-shadow: 1px 1px 0 #fff3c0; box-shadow: inset -3px -3px 0 #b87a18, inset 3px 3px 0 #fff3b0; position: relative; overflow: hidden; }
button.gold:hover:not(:disabled) { background: linear-gradient(#ffe48a, #f0b840); box-shadow: inset -3px -3px 0 #b87a18, inset 3px 3px 0 #fff3b0, 0 0 12px #ffd24a; }
button.gold::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); animation: shine 2.6s infinite; }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
button.red { background: #b8322a; box-shadow: inset -3px -3px 0 #7a1a14, inset 3px 3px 0 #e86a5a; }
button:disabled { filter: grayscale(.8) brightness(.7); cursor: not-allowed; }
button.x { padding: 6px 10px; font-size: 10px; background: #3a2e44; box-shadow: inset -2px -2px 0 #1a1420, inset 2px 2px 0 #5a4a64; }
.appear { animation: appear .28s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes appear { from { transform: translate(-50%, -46%) scale(.85); opacity: 0; } }
.mcard.bump, button.bump { animation: bump .3s ease-out; }
.slidein { animation: slidein .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes slidein { from { transform: translateX(120%); } }
img.coinimg { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: -3px; }

/* --- diálogo con retrato */
#dialog { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); width: min(620px, 94vw); display: flex; gap: 14px; align-items: flex-start; }
#dialog.appear { animation: dlgin .3s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes dlgin { from { transform: translate(-50%, 30px); opacity: 0; } }
#dlgface { width: 64px; height: 96px; image-rendering: pixelated; background: linear-gradient(#4a6a8a, #2a3a4a); border: 3px solid #0b0910; box-shadow: inset 0 0 0 2px #8a7a5a; flex: none; }
.dlgbody { flex: 1; }
.dlghead { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.dlghead b { font-size: 11px; color: #ffd46b; }
.dlghead span { font-size: 7px; color: #8fc7ff; }
#dlgtext { font-size: 9px; line-height: 1.8; min-height: 48px; margin: 0 0 10px; }
#dlgbtns { display: flex; flex-wrap: wrap; gap: 6px; }
#dlgbtns button, .wpbtns button, #tinvite button { font-size: 9px; padding: 9px 12px; }

/* --- mercado */
#market, #wppanel, #ptrade { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, 96vw); max-height: 88vh; overflow: auto; }
.mhead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.mhead h3 { flex: 1; margin: 0; font-size: 12px; color: #ffd46b; }
.mwallet { font-size: 13px; color: #ffe070; display: flex; gap: 6px; align-items: center; }
.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tabs button { flex: 1; font-size: 9px; padding: 8px; background: #2c2432; box-shadow: inset -2px -2px 0 #1a1420; color: #a99f86; }
.tabs button.on { background: #e8762a; color: #fff; box-shadow: inset -3px -3px 0 #a84a10, inset 3px 3px 0 #ffaa60; }
#mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; margin-bottom: 8px; }
.mcard { background: linear-gradient(#3a2e44, #2a2232); border: 3px solid #0b0910; box-shadow: inset 0 0 0 2px #4a3e54; padding: 8px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .1s; }
.mcard:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #8a7a5a; }
.mcard > img { width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.4)); }
.mcard.none { opacity: .45; }
.mname { font-size: 7px; min-height: 18px; line-height: 1.4; }
.mhave { font-size: 6px; color: #a99f86; }
.mprice { font-size: 11px; color: #ffe070; display: flex; align-items: center; gap: 4px; }
.mprice img { width: 14px; height: 14px; image-rendering: pixelated; }
.trend { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.trend.up { border-bottom: 6px solid #4ade80; }
.trend.down { border-top: 6px solid #ef4444; }
.mbtns { display: flex; gap: 3px; }
.mbtns button { font-size: 7px; padding: 5px 6px; }

/* --- taller */
#wpart { width: 132px; height: 96px; image-rendering: pixelated; background: radial-gradient(ellipse at 50% 100%, #4f8c35 0 40%, #2a3a24 41%); border: 3px solid #0b0910; flex: none; }
.wphead { flex: 1; }
.wphead h3 { margin: 0 0 6px; font-size: 13px; color: #ffd46b; }
#wpstars { display: flex; gap: 4px; margin-bottom: 6px; }
#wpstars i { width: 14px; height: 14px; background: #3a3040; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
#wpstars i.on { background: #ffd24a; filter: drop-shadow(0 0 3px #ffd24a); }
#wppanel h4, #ptrade h4 { font-size: 9px; color: #e9c58a; margin: 10px 0 6px; }
#wpworkers { display: flex; flex-wrap: wrap; gap: 6px; }
.wslot { width: 104px; height: 74px; background: #2c2432; border: 3px solid #0b0910; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 7px; position: relative; text-align: center; gap: 2px; }
.wslot canvas { width: 32px; height: 48px; image-rendering: pixelated; }
.wslot button { position: absolute; top: 2px; right: 2px; font-size: 7px; padding: 2px 5px; background: #6a2a2a; box-shadow: none; }
.wslot.empty { border-style: dashed; border-color: #5b4a3a; color: #8a7f96; padding: 4px; }
.wslot.empty b { font-size: 18px; color: #5b4a3a; }
.bar.store { height: 10px; }
.bar.store i { background: repeating-linear-gradient(90deg, #8ef58e 0 6px, #5ac05a 6px 8px); }
#wpstore { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; min-height: 24px; }
.sitem { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; background: #2c2432; padding: 3px 6px; border: 2px solid #0b0910; }
.sitem img { width: 18px; height: 18px; image-rendering: pixelated; }
.sitem.coins { color: #ffe070; }
.inrow { display: flex; align-items: center; gap: 8px; font-size: 8px; margin: 4px 0; }
.inrow img { width: 20px; height: 20px; image-rendering: pixelated; }
.inrow span { flex: 1; }
.inrow button { font-size: 7px; padding: 4px 8px; }
.wpbtns { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.wpbtns img { width: 14px; height: 14px; image-rendering: pixelated; vertical-align: -2px; }
#wpcollect { flex: 1; font-size: 11px; }

/* --- comercio entre jugadores */
#ptrade .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.offer { min-height: 54px; background: #1a1420; border: 3px solid #0b0910; padding: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; transition: box-shadow .2s; }
.offer.ok { box-shadow: 0 0 0 3px #4ade80, inset 0 0 12px rgba(74,222,128,.3); }
.coinrow { display: flex; align-items: center; gap: 4px; margin: 6px 0; font-size: 10px; color: #ffe070; }
.coinrow button { font-size: 7px; padding: 4px 6px; }
#ptinv { display: flex; flex-wrap: wrap; gap: 3px; }
#ptinv .slot { cursor: pointer; }
#ptaccept.pressed { filter: brightness(.8); }
#tinvite { position: absolute; right: 12px; top: 230px; width: 250px; font-size: 9px; line-height: 1.7; }
#report { position: absolute; right: 12px; top: 300px; width: 270px; font-size: 8px; line-height: 2; }
#report h3 { margin: 0 0 4px; font-size: 10px; color: #ffd46b; }
.rrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: space-between; }
.rrow.total { border-top: 2px solid #5b4a3a; margin-top: 4px; padding-top: 4px; font-size: 10px; }
.gain { color: #4ade80; } .loss { color: #ff7a7a; }

/* --- carta del oficio */
#rolecard { background: radial-gradient(circle, rgba(40,20,50,.55), rgba(0,0,0,.85)); perspective: 900px; pointer-events: auto; }
.card3d { width: 340px; padding: 6px; background: linear-gradient(135deg, var(--c), #1a1018 70%); border: 4px solid #0b0910; box-shadow: 0 0 0 3px var(--c), 0 0 40px var(--c); }
.card3d.flip { animation: flip .9s cubic-bezier(.2, 1.2, .3, 1); }
@keyframes flip { 0% { transform: rotateY(180deg) scale(.4); filter: brightness(3); } 60% { transform: rotateY(-12deg) scale(1.05); } }
.rcinner { background: #1e1626; padding: 18px; text-align: center; border: 2px solid #5b4a3a; }
.rcinner small { font-size: 7px; color: #a99f86; }
#rcicon { display: block; width: 64px; height: 64px; margin: 14px auto 6px; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 #000); animation: float 2s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }
#rcname { margin: 4px 0 8px; font-size: 22px; color: var(--c); text-shadow: 3px 3px 0 #000; letter-spacing: 2px; }
#rcdesc { font-size: 9px; line-height: 1.8; }
#rcwhy { color: #ffd46b; }

/* --- cinemática */
#cine { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.cbar { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .9s cubic-bezier(.6, 0, .2, 1); }
.cbar.top { top: 0; } .cbar.bot { bottom: 0; }
#cine.on .cbar { height: 13vh; }
#cine.out .cbar { height: 0; }
.ctitle { position: absolute; left: 0; right: 0; bottom: 17vh; text-align: center; opacity: 0; transform: translateY(20px); transition: all 1s 1.4s; }
#cine.on .ctitle { opacity: 1; transform: none; }
#cine.out .ctitle { opacity: 0; transition: all .4s; }
.ctitle small { font-size: 11px; color: #e9c58a; letter-spacing: 4px; text-shadow: 2px 2px 0 #000; }
.ctitle h1 { margin: 10px 0; font-size: clamp(22px, 5vw, 48px); color: #ffe070; text-shadow: 4px 4px 0 #8a4a10, 8px 8px 0 #000; letter-spacing: 6px; animation: tracking 3s ease-out; }
@keyframes tracking { from { letter-spacing: 22px; opacity: 0; } }
.ctitle p { font-size: 11px; text-shadow: 2px 2px 0 #000; }
#hud.cinehide > :not(#chatlog) { opacity: 0; pointer-events: none; transition: opacity .6s; }
body.goldflash::after { content: ""; position: fixed; inset: 0; background: radial-gradient(circle, rgba(255,230,140,.9), rgba(255,200,60,0)); animation: gflash 1.6s ease-out forwards; pointer-events: none; z-index: 6; }
@keyframes gflash { to { opacity: 0; } }
@media (max-width: 700px) { #ptrade .cols { grid-template-columns: 1fr; } #econbar { top: auto; bottom: 120px; } }
#market, #wppanel, #ptrade, #dialog, #report, #tinvite { background: rgba(22, 16, 28, 0.96); }

/* ============================================================ EMPRESA (cadena de producción) */
.lvrow { display: flex; align-items: center; gap: 8px; font-size: 8px; color: #8fc7ff; margin-bottom: 4px; }
#wpcap { margin: 2px 0 8px; }
#chain { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 6px 0 10px; }
.step { background: #241c2a; border: 3px solid #0b0910; padding: 8px 6px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; position: relative; min-height: 150px; }
.step + .step { margin-left: 14px; }
.step + .step::before { content: ""; position: absolute; left: -16px; top: 50%; width: 14px; height: 4px; background: repeating-linear-gradient(90deg, #ffd24a 0 4px, transparent 4px 7px); background-size: 7px 4px; animation: flow 0.6s linear infinite; }
.step.off + .step::before { background: repeating-linear-gradient(90deg, #5b4a3a 0 4px, transparent 4px 7px); animation: none; }
@keyframes flow { to { background-position: 7px 0; } }
.step h5 { margin: 0; font-size: 7px; color: #e9c58a; letter-spacing: 1px; }
.step .who { font-size: 6px; line-height: 1.6; color: #a99f86; }
.step .who.auto { color: #8ef58e; }
.step .chips { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; min-height: 22px; }
.step .chips .sitem { font-size: 8px; padding: 2px 4px; }
.step .chips .sitem img { width: 14px; height: 14px; }
.step button { font-size: 7px; padding: 5px 7px; }
.slots { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.wk { width: 26px; height: 34px; background: #3a2e44; border: 2px solid #0b0910; position: relative; cursor: pointer; }
.wk canvas { width: 22px; height: 30px; image-rendering: pixelated; }
.wk.stuck { box-shadow: 0 0 0 2px #ff8a8a; }
.wk.add { border-style: dashed; border-color: #8a7a5a; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #ffd24a; background: #2c2432; }
.wk.add:hover { background: #3c3044; }
.wk.lock { opacity: .3; cursor: default; border-style: dotted; }
.wk .xx { display: none; position: absolute; top: -6px; right: -6px; font-size: 6px; background: #b8322a; padding: 1px 3px; border: 1px solid #000; }
.wk:hover .xx { display: block; }
.recipe-line { font-size: 6px; color: #c8c0b0; line-height: 1.6; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.recipe-line > div { display: flex; align-items: center; gap: 2px; }
.recipe-line .ri { display: inline-flex; align-items: center; gap: 1px; font-size: 7px; color: #f3ead2; }
.recipe-line .ri img { width: 16px; height: 16px; image-rendering: pixelated; }
.recipe-line b { color: #8a7a6a; font-size: 7px; }
.recipe-line b.to { width: 0; height: 0; border: 4px solid transparent; border-left: 6px solid #ffd24a; margin: 0 1px 0 4px; }
.wk.lock::before { content: ""; display: block; width: 8px; height: 6px; border: 2px solid #8a7a6a; border-bottom: 0; border-radius: 4px 4px 0 0; margin: 3px auto 0; }
.wk.lock::after { content: ""; display: block; width: 12px; height: 8px; background: #8a7a6a; margin: 0 auto; }
#wporders h4 { font-size: 9px; color: #e9c58a; margin: 4px 0; }
.orow { display: flex; align-items: center; gap: 6px; font-size: 8px; margin: 4px 0; flex-wrap: wrap; }
.orow img { width: 20px; height: 20px; image-rendering: pixelated; }
.orow .nm { min-width: 110px; }
.orow button { font-size: 7px; padding: 4px 6px; }
.orow .val { color: #ffe070; min-width: 30px; text-align: center; }
.orow .ref { font-size: 6px; color: #a99f86; }
#craftbar { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font-size: 8px; padding: 8px 12px; }
.bar.cb { width: 160px; height: 9px; margin: 0; }
.bar.cb i { background: linear-gradient(90deg, #8ef58e, #e8ffb0); transition: none; }
#cbstop { font-size: 7px; padding: 4px 6px; }
#feed { position: absolute; right: 12px; top: 200px; width: 290px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
#feed div { background: rgba(18, 14, 22, 0.88); border-left: 3px solid #8ef58e; padding: 5px 8px; font-size: 7px; line-height: 1.6; animation: feedin .35s ease-out, feedout .6s 6s forwards; }
#feed div.out { border-left-color: #ff8a8a; }
@keyframes feedin { from { transform: translateX(40px); opacity: 0; } }
@keyframes feedout { to { opacity: 0; transform: translateX(20px); } }
.orders-market { margin-bottom: 8px; grid-column: 1 / -1; }
.orders-market h4 { font-size: 9px; color: #8ef58e; margin: 4px 0; }
.ocard { display: flex; align-items: center; gap: 8px; background: #1e2a1e; border: 2px solid #0b0910; padding: 5px 8px; font-size: 8px; margin: 3px 0; }
.ocard img { width: 22px; height: 22px; image-rendering: pixelated; }
.ocard .nm { flex: 1; }
.ocard button { font-size: 7px; padding: 5px 8px; }
@media (max-width: 760px) { #chain { grid-template-columns: 1fr 1fr; } .step + .step { margin-left: 0; } .step + .step::before { display: none; } }
.mempty { grid-column: 1 / -1; padding: 28px 12px; text-align: center; font-size: 8px; color: #a99f86; line-height: 1.8; }
#homepanel, #storepanel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, 94vw); max-height: 88vh; overflow: auto; z-index: 30; }
#homepanel.hidden, #storepanel.hidden { display: none; }
.hcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.hcard { background: #2c2432; border: 2px solid #0b0910; padding: 6px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.hcard.cur { border-color: #ffd24a; }
.hcard canvas { width: 100%; image-rendering: pixelated; background: #3a5a3a; }
.hcard .hn { font-size: 10px; color: #ffd24a; }
.hcard .hd { font-size: 7px; line-height: 1.6; }
.hcard .hp, .hcard button, #hpbody button { font-size: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.hcard img, #hpbody button img { width: 12px; height: 12px; image-rendering: pixelated; }
#hpbody button.big { width: 100%; padding: 10px; font-size: 10px; }
.hpal { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.hpal .sw { width: 26px; height: 22px; border: 2px solid #0b0910; border-top: 6px solid; padding: 0; cursor: pointer; }
.hpal .sw.on { outline: 2px solid #ffd24a; }
.hrow { display: flex; gap: 8px; }
.stcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stcols h4 { font-size: 9px; color: #ffd24a; margin: 6px 0; }
.stgrid { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 4px; }
.stgrid .slot { cursor: pointer; }
#ptinv .slot { position: relative; }
#ptinv .minus { position: absolute; top: -6px; left: -6px; background: #b8322a; color: #fff; font-size: 10px; width: 14px; height: 14px; line-height: 14px; text-align: center; border: 1px solid #000; cursor: pointer; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 60; }
#fade.go { animation: fadeio .7s ease-out; }
@keyframes fadeio { 0% { opacity: 1; } 100% { opacity: 0; } }
#invite { display: block; width: 100%; margin-top: 6px; font-size: 7px; padding: 5px 4px; cursor: pointer; }
#code { font-size: 9px; margin-top: 2px; border-color: #3a6a9a; }

/* ---- clanes ---- */
#clancards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.clancard { --c: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; background: #1c1622; border: 3px solid var(--c); color: #f3ead2; font: inherit; cursor: pointer; box-shadow: inset 0 0 0 2px #0b0910; }
.clancard:hover { background: #2a2232; transform: translateY(-2px); }
.clancard.on { background: var(--c); color: #0b0910; }
.clancard:disabled { cursor: default; }
.clancard .flag { width: 34px; height: 22px; background: var(--c); border: 2px solid #0b0910; clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%); }
.clancard b { font-size: 11px; color: var(--c); }
.clancard.on b { color: #0b0910; }
.clancard .where, .clancard .cnt { font-size: 7px; opacity: .8; }
.clancard .who { font-size: 7px; line-height: 1.6; min-height: 22px; opacity: .9; }
.clancard em { font-size: 7px; font-style: normal; color: #8ef58e; }
#firestate { margin-top: 3px; }

/* ---- fogata por niveles, armadura ---- */
#fireneed { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; font-size: 7px; align-items: center; max-width: 230px; }
#fireneed .nx { color: #c8c0b0; width: 100%; }
#fireneed .nd { display: inline-flex; align-items: center; gap: 2px; color: #f3ead2; }
#fireneed .nd.ok { color: #8ef58e; }
#fireneed .nd img { width: 12px; height: 12px; image-rendering: pixelated; }
#fireneed .done { color: #ffd24a; }
#armorslot { cursor: pointer; margin-left: 6px; position: relative; }
#armorslot .ph { font-size: 5px; color: #6a6070; display: flex; height: 100%; align-items: center; justify-content: center; text-align: center; }
#armorslot.on { box-shadow: 0 0 0 2px #c8a040 inset; }

/* ================================================================ Celulares y tablets (touch.js)
   Celular acostado, cada cosa en su lugar:
   arriba-izq: fogata · arriba-centro: monedas/pueblo y avisos · arriba-der: chat/mapa/pantalla + minimapa e invitar
   izquierda: chat · abajo-izq: vida, hambre y barra · abajo-der: acción, habilidad, soltar, mochila (y el cartel de la acción) */
#touchui, #rotate { display: none; }
body.touch { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
body.touch #game { touch-action: none; }
body.touch #touchui { display: block; }
#joyzone { position: fixed; left: 0; top: 30%; width: 36%; bottom: 84px; pointer-events: auto; touch-action: none; }
#joybase { position: fixed; width: 104px; height: 104px; border-radius: 50%; border: 3px solid rgba(243,234,210,0.35); background: rgba(10,8,14,0.3); opacity: 0; transition: opacity .15s; pointer-events: none; }
#joybase.on { opacity: 1; }
#joyknob { position: absolute; left: 30px; top: 30px; width: 44px; height: 44px; border-radius: 50%; background: #ffd46b; border: 3px solid #0b0910; box-shadow: inset 0 -4px 0 #c8961e; }
/* botones con el mismo estilo de los casilleros del juego */
.tbtn { position: fixed; pointer-events: auto; touch-action: none; width: 50px; height: 50px; padding: 0; border: 3px solid #0b0910; background: #3a3040; box-shadow: inset 2px 2px 0 #54485c, inset -2px -2px 0 #241c2a, 0 3px 0 rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; }
.tbtn img, .tbtn canvas { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.tbtn.down { transform: translateY(2px); box-shadow: inset 2px 2px 0 #241c2a, inset -2px -2px 0 #54485c; background: #4a3e54; }
.tbtn.big { width: 82px; height: 82px; background: #c8502c; box-shadow: inset 3px 3px 0 #f07a4a, inset -3px -3px 0 #8a2e18, 0 4px 0 rgba(0,0,0,0.4); }
.tbtn.big img { width: 48px; height: 48px; }
.tbtn.big.down { background: #e8662e; box-shadow: inset 3px 3px 0 #8a2e18, inset -3px -3px 0 #f07a4a; }
.tbtn.small { width: 36px; height: 36px; }
.tbtn.small img { width: 22px; height: 22px; }
#tutil { position: fixed; top: 6px; right: calc(108px + env(safe-area-inset-right)); display: flex; gap: 4px; }
#tutil .tbtn { position: static; }
#tact { right: calc(12px + env(safe-area-inset-right)); bottom: 12px; }
#tsp { right: calc(104px + env(safe-area-inset-right)); bottom: 10px; overflow: hidden; }
#tsp i { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); }
#tdrop { right: calc(104px + env(safe-area-inset-right)); bottom: 68px; }
#tinv { right: calc(28px + env(safe-area-inset-right)); bottom: 104px; }
#actlabel { position: fixed; right: calc(160px + env(safe-area-inset-right)); bottom: 72px; max-width: 34vw; padding: 4px 7px; font-size: 7px; line-height: 1.5; background: rgba(20,14,22,0.88); border: 2px solid #0b0910; color: #ffd24a; text-align: right; opacity: 0; transition: opacity .15s; pointer-events: none; }
#actlabel.on { opacity: 1; }
/* arriba a la izquierda: la fogata, compacta */
body.touch #topleft { left: calc(6px + env(safe-area-inset-left)); top: 6px; width: 168px; padding: 5px 7px; font-size: 7px; }
body.touch #topleft .lbl { font-size: 7px; }
body.touch #kills { display: none; }
body.touch #fireneed { max-width: 154px; font-size: 6px; }
/* arriba al centro: monedas, oficio (solo el ícono) y pueblo; abajo de eso, los avisos */
body.touch #econbar { left: calc(182px + env(safe-area-inset-left)); top: 6px; bottom: auto; transform: none; gap: 4px; }
body.touch #econbar > div { padding: 3px 6px; }
body.touch #wallet { font-size: 10px; min-width: 0; gap: 4px; }
body.touch #wallet img { width: 14px; height: 14px; }
body.touch #rolebadge { font-size: 0; gap: 0; }
body.touch #rolebadge img { width: 16px; height: 16px; }
body.touch #vlbox { min-width: 96px; max-width: 120px; font-size: 6px; }
body.touch #feed { left: calc(182px + env(safe-area-inset-left)); right: auto; top: 44px; width: 210px; }
body.touch #feed div:nth-child(n+3) { display: none; }
/* arriba a la derecha: minimapa (lo dibuja el juego, 96px) y debajo solo el botón de invitar */
body.touch #plist { top: 110px; right: calc(6px + env(safe-area-inset-right)); min-width: 0; width: 96px; padding: 3px; transform: none; }
body.touch #plist > div { display: none; }
body.touch #plist:not(:has(#invite)) { display: none; }
body.touch #invite { margin: 0; font-size: 5px; padding: 4px 2px; }
/* izquierda: el chat, con pocas líneas */
body.touch #chatlog { left: calc(6px + env(safe-area-inset-left)); top: 100px; bottom: auto; width: 30vw; font-size: 6px; line-height: 1.6; }
body.touch #chatlog div:nth-last-child(n+5) { display: none; }
body.touch #chatin { top: 50px; bottom: auto; left: 50%; transform: translateX(-50%); width: 60vw; }
/* abajo a la izquierda: vida, hambre y la barra */
body.touch #bottom { left: calc(8px + env(safe-area-inset-left)); bottom: 6px; transform: none; align-items: flex-start; }
body.touch #stats { gap: 10px; margin-bottom: 3px; }
body.touch #stats img { width: 13px; height: 13px; margin-right: 0; }
body.touch #helditem, body.touch #ability, body.touch #hint { display: none; }
body.touch #barrow { gap: 4px; }
body.touch .slot { width: 36px; height: 36px; }
body.touch .slot img { left: 3px; top: 3px; width: 26px; height: 26px; }
body.touch #center { top: 34%; font-size: 12px; }
/* menús: con scroll y sin los controles encima */
body.touch .overlay, body.touch .joinbox, body.touch #market, body.touch #wppanel, body.touch #invpanel, body.touch #homepanel, body.touch #storepanel, body.touch #ptrade, body.touch #dialog, body.touch #help { max-height: 94vh; overflow-y: auto; touch-action: pan-y; }
body.touch .joinbox { max-width: 96vw; }
body.touch button { min-height: 30px; }
body.touch.uiopen #joyzone, body.touch.uiopen #actlabel, body.touch.uiopen .tbtn:not(#tinv) { display: none; }
/* celular parado: pedir que lo giren */
@media (orientation: portrait) {
  body.touch #rotate { display: flex; position: fixed; inset: 0; z-index: 100; background: #120c16; color: #f3ead2; flex-direction: column; align-items: center; justify-content: center; gap: 22px; font-size: 11px; text-align: center; padding: 20px; }
  #rotate .phone { width: 46px; height: 80px; border: 4px solid #ffd24a; border-radius: 8px; animation: rotphone 2s ease-in-out infinite; }
}
@keyframes rotphone { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
/* menú de entrada compacto en celular acostado */
@media (max-height: 520px) {
  body.touch .joinbox { padding: 10px 14px; }
  body.touch .joinbox h1.title { font-size: 22px; margin: 0 0 4px; }
  body.touch .joinbox > p.muted { display: none; }
  body.touch #name, body.touch #code { padding: 6px; margin: 4px 0 2px; font-size: 10px; }
  body.touch h3.pick { margin: 6px 0; font-size: 9px; }
  body.touch #chars { grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 8px; }
  body.touch .card { flex-direction: column; gap: 4px; padding: 5px 3px; text-align: center; }
  body.touch .card canvas { width: 44px; height: 55px; }
  body.touch .card h4 { font-size: 8px; margin: 0; }
  body.touch .card p { display: none; }
  body.touch .card.on .ab { display: block; font-size: 6px; margin: 2px 0 0; }
  body.touch #clancards { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
  body.touch .clancard { padding: 8px 4px; }
}
@media (max-width: 620px) { body.touch #vlbox { display: none; } }

/* ---- clan y personaje ---- */
.clancard.soon { opacity: .45; cursor: default; }
.clancard .chars { font-size: 6px; line-height: 1.7; color: #e8dcc0; }
.charbtns { display: flex; gap: 10px; justify-content: center; }
.charbtns button { padding: 10px 22px; font-size: 11px; }
.cineskip { font-size: 7px; color: #a99f86; margin-top: 10px; animation: blink 1.2s steps(2) infinite; }

/* ---- cuenta de Google ---- */
#gbox { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 2px; }
#gbox.hidden { display: none; }
#gsignin { min-height: 32px; }
#gwho { font-size: 7px; margin: 0; }
#gwho a { color: #ffd46b; }
body.touch #gwho { font-size: 6px; }