/* =====================================================================
   PiratePixel — interfaccia in stile "legno e pergamena"
   --u è l'unità dell'HUD: scala con l'altezza dello schermo (vedi resize()).
   Il gioco ha un solo tema (scuro, notte di mare), scelto apposta.
   ===================================================================== */
:root {
  --u: 2px;
  --wood-d: #4a230d;
  --wood: #9c5420;
  --wood-l: #dc8f3f;
  --panel: #e9a24c;
  --cream: #f7dca4;
  --paper: #f4e2b8;
  --ink: #3a1f10;
  --red: #c8363b;
  --gold: #f5c542;
  --green: #6fbf4a;
  --night: #0b1a26;
  --font: 'Pixelify Sans', ui-monospace, 'Courier New', monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--night); color: var(--cream);
  font-family: var(--font);
  overscroll-behavior: none; touch-action: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font-family: var(--font); cursor: pointer; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
img { image-rendering: pixelated; }

#stage { position: fixed; inset: 0; overflow: hidden; }
#game { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
@media (pointer: fine) { #game { cursor: none; } }

/* ---------- HUD ---------- */
#hud {
  position: absolute; inset: 0; pointer-events: none;
  --pad: calc(var(--u) * 4);
}
#stage[data-scene="title"] #hud,
#stage[data-scene="end"] #hud,
#stage[data-scene="port"] #hud,
#stage[data-scene="port"] #controls,
#stage[data-scene="title"] #controls,
#stage[data-scene="end"] #controls { display: none; }

.panel {
  border: calc(var(--u) * 1.2) solid var(--wood-d);
  border-radius: calc(var(--u) * 2);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.8) var(--wood-l), 0 calc(var(--u) * 1) 0 rgba(0, 0, 0, 0.35);
  color: var(--ink);
}
.panel.wood { background: var(--panel); }
.panel.paper { background: var(--paper); }
.ico { width: calc(var(--u) * 6); height: auto; flex: none; }

#topLeft {
  position: absolute; top: var(--pad); left: max(var(--pad), env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: calc(var(--u) * 2);
  width: calc(var(--u) * 96);
}
#bars { padding: calc(var(--u) * 2) calc(var(--u) * 3); display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); }
.bar { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.bar .track {
  flex: 1; height: calc(var(--u) * 3.6);
  background: #3a1f10; border-radius: calc(var(--u) * 1); overflow: hidden;
  box-shadow: inset 0 calc(var(--u) * 0.6) 0 rgba(0, 0, 0, 0.4);
}
.bar i { display: block; height: 100%; width: 100%; transition: width 0.25s; }
.bar.hp i { background: linear-gradient(#ff6d63, var(--red)); }
.bar.hull i { background: linear-gradient(#e8a060, #a8602a); }
.bar.morale i { background: linear-gradient(#ffe27a, #d9a21b); }

#quest {
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3);
  font-size: max(calc(var(--u) * 5), 10px); line-height: 1.3;
  display: flex; flex-direction: column; gap: calc(var(--u) * 0.8);
}
#quest:empty { display: none; }
#quest .qh { font-weight: 700; color: var(--wood-d); }
#quest .qp { height: calc(var(--u) * 2.4); background: #c9a878; border-radius: calc(var(--u) * 1); overflow: hidden; }
#quest .qp i { display: block; height: 100%; background: var(--wood); }
#quest .qe { font-weight: 700; color: var(--red); }
#quest .qw { color: #a02a20; }
#quest b { display: inline-block; width: 1.1em; }
#quest b.ok { color: #3f8a2a; }

#topRight {
  position: absolute; top: var(--pad); right: max(var(--pad), env(safe-area-inset-right));
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 2);
}
#topRight .row { display: flex; gap: calc(var(--u) * 2); align-items: stretch; }
#btnPause {
  pointer-events: auto;
  width: max(calc(var(--u) * 14), 34px);
  border: calc(var(--u) * 1.2) solid var(--wood-d); border-radius: calc(var(--u) * 2);
  background: var(--cream); color: var(--ink); font-weight: 700;
  font-size: max(calc(var(--u) * 5), 12px);
}
#clock { padding: calc(var(--u) * 1.4) calc(var(--u) * 4); text-align: center; min-width: calc(var(--u) * 40); }
#clockDay { font-size: max(calc(var(--u) * 4.2), 9px); }
#clockTime { font-size: calc(var(--u) * 8); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
#gold {
  display: flex; align-items: center; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1) calc(var(--u) * 3);
  font-size: calc(var(--u) * 6.5); font-weight: 700; font-variant-numeric: tabular-nums;
}
#voyage { width: calc(var(--u) * 64); padding: calc(var(--u) * 2) calc(var(--u) * 3); }
#voyage .route {
  position: relative; height: calc(var(--u) * 6);
  background: repeating-linear-gradient(90deg, var(--wood-d) 0 calc(var(--u) * 2), transparent calc(var(--u) * 2) calc(var(--u) * 4)) center / 100% calc(var(--u) * 0.8) no-repeat;
}
#voyShip {
  position: absolute; top: 0; left: 0; width: calc(var(--u) * 6); height: calc(var(--u) * 6);
  transform: translateX(-50%);
  background:
    linear-gradient(#f4ead2, #f4ead2) 50% 0 / 55% 55% no-repeat,
    linear-gradient(var(--wood-d), var(--wood-d)) 50% 100% / 100% 40% no-repeat;
}
#voyage .isle {
  position: absolute; right: calc(var(--u) * -1.5); top: calc(var(--u) * 0.5);
  width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 calc(var(--u) * 0.8) #e2c27a;
}

#banner {
  position: absolute; top: calc(var(--u) * 6); left: 50%; transform: translateX(-50%);
  width: min(58%, calc(var(--u) * 190)); text-align: center;
}
#banner.show { animation: pop 0.45s ease-out; }
#bannerTitle {
  font-size: calc(var(--u) * 11); font-weight: 700; color: var(--gold); letter-spacing: 0.02em;
  text-shadow: 0 calc(var(--u) * 0.8) 0 var(--wood-d), calc(var(--u) * 0.8) 0 0 var(--wood-d), calc(var(--u) * -0.8) 0 0 var(--wood-d), 0 calc(var(--u) * -0.8) 0 var(--wood-d);
  text-wrap: balance;
}
#bannerHint {
  display: inline-block; margin-top: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  font-size: max(calc(var(--u) * 5), 11px); line-height: 1.3;
  background: rgba(20, 12, 24, 0.78); border-radius: calc(var(--u) * 2); color: var(--cream);
}
#bannerHint:empty { display: none; }
@keyframes pop { from { transform: translateX(-50%) scale(0.7); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

#log {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--u) * 32); width: min(60%, calc(var(--u) * 200));
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1);
}
.msg {
  padding: calc(var(--u) * 1) calc(var(--u) * 3); border-radius: calc(var(--u) * 1.5);
  background: rgba(20, 12, 24, 0.75); color: var(--cream);
  font-size: max(calc(var(--u) * 4.8), 11px); text-align: center;
  transition: opacity 0.8s;
}
.msg.good { color: #b8f08a; }
.msg.bad { color: #ff9a8a; }
.msg.warn { color: #ffd27a; }
.msg.fade { opacity: 0; }

#hotbar {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(calc(var(--u) * 3), env(safe-area-inset-bottom));
  display: flex; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 1.5);
  background: var(--panel); border: calc(var(--u) * 1.2) solid var(--wood-d); border-radius: calc(var(--u) * 2);
  box-shadow: 0 calc(var(--u) * 1) 0 rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}
.slot {
  position: relative; width: max(calc(var(--u) * 20), 38px); aspect-ratio: 1;
  display: grid; place-items: center; padding: 0;
  background: var(--cream); border: calc(var(--u) * 0.8) solid var(--wood); border-radius: calc(var(--u) * 1.2);
  touch-action: none;
}
.slot img { width: 70%; height: auto; }
.slot .num { position: absolute; top: 1px; left: 3px; font-size: max(calc(var(--u) * 3.8), 9px); color: var(--wood); }
.slot .sub { position: absolute; bottom: 1px; right: 3px; font-size: max(calc(var(--u) * 3.8), 9px); color: var(--ink); font-weight: 700; }
.slot.sel { background: #fff4d2; border-color: var(--red); box-shadow: 0 0 0 calc(var(--u) * 0.8) var(--red); }

/* ---------- Controlli touch ---------- */
#controls { position: absolute; inset: 0; pointer-events: none; }
#stickBase {
  position: absolute; left: calc(92px + env(safe-area-inset-left)); top: calc(100% - 92px);
  width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
  background: rgba(255, 240, 210, 0.12); border: 2px solid rgba(255, 240, 210, 0.35);
  opacity: 0.55; transition: opacity 0.15s;
}
#stickBase.on { opacity: 1; }
#stickKnob {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: rgba(247, 220, 164, 0.9); border: 3px solid var(--wood-d);
}
.cbtn {
  position: absolute; pointer-events: auto; touch-action: none;
  display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 3px solid var(--wood-d);
  background: rgba(247, 220, 164, 0.88); color: var(--ink);
  font-weight: 700; font-size: 18px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
}
.cbtn.on { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); background: #fff4d2; }
#btnUse { right: calc(22px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); width: 78px; height: 78px; }
#btnUse img { width: 40px; height: 40px; }
#btnAct { right: calc(112px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); width: 58px; height: 58px; font-size: 22px; }
#btnAct.ready { background: #ffe07a; animation: pulse 1s infinite; }
#btnActLbl {
  position: absolute; bottom: calc(100% + 6px); right: -10px;
  white-space: nowrap; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px; background: rgba(20, 12, 24, 0.82); color: var(--cream);
}
#btnActLbl:empty { display: none; }
#btnReload { right: calc(38px + env(safe-area-inset-right)); bottom: calc(112px + env(safe-area-inset-bottom)); width: 46px; height: 46px; font-size: 16px; }
@keyframes pulse { 50% { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 224, 122, 0.35); } }

/* ---------- Dialoghi ---------- */
#dialog {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(calc(var(--u) * 6), env(safe-area-inset-bottom));
  width: min(calc(100% - 32px), calc(var(--u) * 240));
  display: flex; gap: calc(var(--u) * 4); align-items: flex-start;
  padding: calc(var(--u) * 3.5); z-index: 5;
}
#dlgPortrait {
  width: calc(var(--u) * 28); flex: none;
  background: var(--cream); border: calc(var(--u) * 1) solid var(--wood); border-radius: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.5);
}
.dlgBody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
#dlgName { font-weight: 700; color: var(--wood); font-size: max(calc(var(--u) * 6), 13px); }
#dlgText { font-size: max(calc(var(--u) * 5.4), 13px); line-height: 1.35; max-width: 65ch; }
#dlgOpts { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5); }
#dlgOpts button {
  flex: 1 1 auto; min-height: 36px; text-align: left;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  font-size: max(calc(var(--u) * 5), 13px); color: var(--ink);
  background: #fff4d2; border: calc(var(--u) * 0.8) solid var(--wood); border-radius: calc(var(--u) * 1.5);
}
#dlgOpts button b { color: var(--red); margin-right: 0.3em; }
#dlgOpts button:active { background: var(--gold); }

/* ---------- Schermate (titolo, pausa, fine) ---------- */
#screen {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at center, rgba(8, 10, 20, 0.35), rgba(8, 10, 20, 0.8));
}
.card {
  width: min(100%, 560px); max-height: 100%; overflow: auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 22px; text-align: center;
  background: var(--paper); color: var(--ink);
  border: 4px solid var(--wood-d); border-radius: 12px;
  box-shadow: inset 0 0 0 3px var(--wood-l), 0 6px 0 rgba(0, 0, 0, 0.45);
}
.logo {
  font-size: clamp(36px, 9vh, 64px); font-weight: 700; line-height: 1; color: var(--gold);
  text-shadow: 0 3px 0 var(--wood-d), 3px 0 0 var(--wood-d), -3px 0 0 var(--wood-d), 0 -3px 0 var(--wood-d), 0 6px 0 rgba(0, 0, 0, 0.3);
}
.logo span { color: var(--red); }
.card .h { font-size: 30px; font-weight: 700; color: var(--wood-d); text-wrap: balance; }
.card.win .h { color: #3f7a1f; }
.card.lose .h { color: var(--red); }
.card .tag { font-size: 15px; line-height: 1.35; max-width: 46ch; text-wrap: balance; }
.card button {
  font-size: 16px; padding: 8px 20px; color: var(--ink);
  background: var(--cream); border: 3px solid var(--wood-d); border-radius: 8px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
.card button.big { font-size: 22px; font-weight: 700; padding: 8px 34px; background: var(--red); color: var(--cream); }
.card button:active { transform: translateY(2px); box-shadow: none; }
.keys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 13px; text-align: left; }
.keys b { color: var(--wood); }
@media (max-width: 520px) { .keys { grid-template-columns: 1fr; } }
.tip { font-size: 12px; color: var(--wood); }
.rank { font-size: 18px; font-weight: 700; color: var(--cream); background: var(--wood); padding: 4px 14px; border-radius: 6px; }
.stats { display: grid; grid-template-columns: auto auto; gap: 2px 18px; margin: 0; font-size: 15px; }
.stats dt { text-align: right; color: var(--wood); }
.stats dd { margin: 0; text-align: left; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Telefono in verticale ---------- */
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate {
    position: fixed; inset: 0; z-index: 50;
    display: grid; place-content: center; justify-items: center; gap: 18px;
    padding: 24px; text-align: center; background: var(--night); color: var(--cream); font-size: 20px;
  }
  #rotate .phone {
    width: 46px; height: 78px; border: 4px solid var(--cream); border-radius: 8px;
    animation: turn 1.8s ease-in-out infinite;
  }
}
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) {
  #banner.show, #btnAct.ready, #rotate .phone { animation: none; }
}

/* ---------- Borsa ---------- */
.slot.empty img { visibility: hidden; }
.slot.bagbtn { background: #f0c98a; margin-left: calc(var(--u) * 2); }
#bars.ghost { background: #9fd8cc; }
#bars.ghost .bar.hp i { background: linear-gradient(#bff7ec, #3fb7a2); }
#bag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12;
  width: min(calc(100% - 32px), 420px); max-height: calc(100% - 16px); overflow: auto;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.bagHead { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--wood-d); }
.bagHead b { flex: 1; }
.bagHead button { font-size: 14px; padding: 5px 12px; border: 2px solid var(--wood-d); border-radius: 6px; background: var(--cream); color: var(--ink); }
#bagDrop { background: #f3b1a4; }
.bagLbl { font-size: 12px; color: var(--wood); text-transform: uppercase; letter-spacing: 0.06em; }
#bag .grid { display: flex; flex-wrap: wrap; gap: 6px; }
#bag .slot { width: 48px; }
#bag .slot.pick { background: var(--gold); border-color: var(--red); box-shadow: 0 0 0 2px var(--red); }
#bagInfo { font-size: 13px; line-height: 1.35; color: var(--ink); }

/* ---------- Negozi ---------- */
.card .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.card.shop { width: min(100%, 640px); gap: 8px; }
.purse { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; }
.purse img { width: 18px; }
.offers { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.offer {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 6px 8px; background: #fff4d2; border: 2px solid var(--wood-l); border-radius: 8px;
}
.offer > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.offer b { font-size: 14px; }
.offer span { font-size: 12px; color: var(--wood); }
.offer.done { opacity: 0.55; }
.card .offer button { font-size: 13px; padding: 5px 10px; white-space: nowrap; background: var(--gold); }
.card .offer button:disabled { background: #ddd0b4; color: #8a7a60; box-shadow: none; }
#voyage.back .isle { background: var(--red); }

.ver { font-size: 11px; color: var(--wood); opacity: 0.7; font-variant-numeric: tabular-nums; }