/* styles.css: how the HUD, windows and title screen look. The game world is drawn on the canvas. */

:root {
  --ink: #f4ecd8;
  --dim: #a9b4c2;
  --panel: #10263d;
  --panel2: #173653;
  --edge: #e8c56a;
  --edge-dark: #6b4f1d;
  --good: #7aff9a;
  --bad: #ff7a6a;
  --hi: #ffd84a;
  --btn: #2a557d;
  --btn-hi: #3a6f9f;
  --font: "Pixelify Sans", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1b2b; color: var(--ink); font-family: var(--font); -webkit-user-select: none; user-select: none; touch-action: none; }
canvas#game { position: fixed; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
.hidden { display: none !important; }
button { font-family: var(--font); font-size: 15px; color: var(--ink); background: var(--btn); border: 2px solid var(--edge-dark); border-bottom-width: 4px; padding: 6px 12px; cursor: pointer; border-radius: 0; touch-action: manipulation; }
button:hover:not(:disabled) { background: var(--btn-hi); }
button:active:not(:disabled) { transform: translateY(1px); border-bottom-width: 3px; }
button:disabled { opacity: 0.45; cursor: default; }
button.go { background: #2f7a3a; border-color: #1c4a22; }
button.go:hover:not(:disabled) { background: #3a9a48; }
button.danger { background: #8a2f2a; border-color: #4a1a16; }
button.on { background: #b8892a; border-color: #6b4f1d; color: #1a1206; }
button.small, .small { font-size: 13px; }
.dim { color: var(--dim); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.hi { color: var(--hi); }
.row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.ico { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; }
.ico.big { width: 36px; height: 36px; }
.ico.coin { width: 16px; height: 16px; }
.r-common { color: #e6e6e6; } .r-uncommon { color: #6ee36e; } .r-rare { color: #5aa9ff; } .r-epic { color: #c77dff; } .r-legendary { color: #ffc93c; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button, #hud canvas, #hud #prompt { pointer-events: auto; }
#hud-top { position: absolute; left: 8px; top: 8px; display: flex; gap: 8px; align-items: flex-start; }
#lvl { width: 44px; height: 44px; background: var(--panel); border: 3px solid var(--edge); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: var(--hi); }
.bars { width: 220px; display: flex; flex-direction: column; gap: 3px; }
.bar { position: relative; height: 15px; background: #0a1420; border: 2px solid #000; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; transition: width 0.15s; }
.bar span { position: absolute; inset: 0; font-size: 11px; line-height: 11px; text-align: center; text-shadow: 1px 1px 0 #000; }
#hp i { background: linear-gradient(#ff6a5a, #c8302a); }
#en i { background: linear-gradient(#5ac8ff, #2a7ac8); }
#xp { height: 11px; } #xp span { font-size: 9px; line-height: 7px; }
#xp i { background: linear-gradient(#ffe066, #c8a02a); }
#boathp i { background: linear-gradient(#d8a068, #8b5a2b); }
#fruitline { font-size: 12px; text-shadow: 1px 1px 0 #000; display: flex; align-items: center; gap: 4px; }
#fruitline .ico { width: 16px; height: 16px; }
.mbar { display: inline-block; width: 50px; height: 5px; background: #000; border: 1px solid #000; position: relative; }
.mbar i { position: absolute; left: 0; top: 0; bottom: 0; background: #9fe8ff; }
#money { background: var(--panel); border: 2px solid var(--edge-dark); padding: 4px 8px; font-size: 15px; color: var(--hi); text-shadow: 1px 1px 0 #000; }
#money #score { font-size: 11px; color: var(--dim); }
.coin-dot { display: inline-block; width: 10px; height: 10px; background: #ffd84a; border: 2px solid #b8892a; border-radius: 50%; margin-right: 4px; }
#tracker { position: absolute; left: 8px; top: 104px; width: 230px; font-size: 13px; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }
#tracker div { background: rgba(10, 25, 40, 0.55); padding: 3px 6px; margin-bottom: 3px; border-left: 3px solid var(--hi); }
#tracker div.ready { border-left-color: var(--good); }
#minimap { position: absolute; right: 8px; top: 8px; width: 128px; height: 128px; border: 3px solid var(--edge); background: #1f5fa8; image-rendering: pixelated; cursor: pointer; }
#menu-buttons { position: absolute; right: 8px; top: 144px; display: flex; flex-direction: column; gap: 4px; width: 128px; }
#menu-buttons button { font-size: 13px; padding: 4px; position: relative; }
.dot { position: absolute; right: 4px; top: 4px; width: 8px; height: 8px; background: var(--hi); border-radius: 50%; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
#hotbar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
#skillbar, #weaponbar { display: flex; gap: 6px; }
#skillbar .hb { width: 76px; height: 44px; }
#skillbar .hb .lbl { display: block; font-size: 11px; line-height: 1.1; padding: 13px 3px 0; white-space: normal; }
.hb.sel { border-color: var(--hi); }
.hb.gone { display: none; }
.hb { position: relative; width: 52px; height: 52px; padding: 0; background: rgba(16, 38, 61, 0.9); border: 3px solid var(--edge-dark); overflow: hidden; }
.hb img { width: 32px; height: 32px; image-rendering: pixelated; }
.hb small { position: absolute; left: 3px; top: 1px; font-size: 11px; color: var(--hi); text-shadow: 1px 1px 0 #000; }
.hb .lbl { font-size: 13px; }
.hb .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0, 0, 0, 0.65); }
.hb.locked { opacity: 0.4; }
.hb.on { border-color: var(--hi); box-shadow: 0 0 8px var(--hi); }
.hb.noen { border-color: #2a4a7a; }
#boatbar { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); width: 260px; }
#bossbar { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: min(420px, 50vw); text-align: center; font-size: 15px; text-shadow: 1px 1px 0 #000; color: #ffb0b0; }
#bossbar div { height: 12px; background: #200; border: 2px solid #000; position: relative; margin-top: 2px; }
#bossbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ff4a6a, #a0102a); transition: width 0.2s; }
#prompt { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); background: rgba(10, 25, 40, 0.85); border: 2px solid var(--edge); padding: 5px 12px; font-size: 15px; cursor: pointer; white-space: nowrap; }
#prompt b { color: var(--hi); margin-right: 4px; }
#raidbar { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); background: rgba(60, 10, 20, 0.88); border: 2px solid #ff8a6a; padding: 5px 14px; font-size: 15px; white-space: nowrap; }
#toasts { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); width: min(560px, 90vw); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.toast { background: rgba(10, 25, 40, 0.85); padding: 4px 10px; font-size: 14px; text-align: center; text-shadow: 1px 1px 0 #000; transition: opacity 0.6s; }
.toast.fade { opacity: 0; }
#area-name { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-size: 30px; text-align: center; text-shadow: 2px 2px 0 #000; opacity: 0; color: #fff4d0; }
#area-name small { display: block; font-size: 15px; color: var(--dim); }
#area-name.show { animation: area 3.2s ease-out; }
@keyframes area { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Touch controls ---------- */
#touch { display: none; }
body.touch #touch:not(.hidden) { display: block; }
#stick-zone { position: fixed; left: 0; top: 30vh; width: 50vw; bottom: 0; touch-action: none; }
#stick { position: fixed; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 2px solid rgba(255, 255, 255, 0.3); display: none; pointer-events: none; }
#stick.on { display: block; }
#stick-knob { position: absolute; left: 30px; top: 30px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
#tbuttons { position: fixed; right: 10px; bottom: 74px; display: grid; grid-template-columns: repeat(3, 58px); gap: 6px; }
.tb { width: 58px; height: 58px; border-radius: 50%; padding: 0; font-size: 13px; background: rgba(42, 85, 125, 0.75); }
.tb.big { grid-column: 3; grid-row: 2 / span 2; height: 122px; border-radius: 30px; background: rgba(160, 50, 40, 0.8); }
.tb.small { font-size: 11px; }
#tb-interact.ready { background: rgba(60, 150, 70, 0.9); border-color: var(--edge); }
body.touch #hotbar { bottom: 10px; }
body.touch .hb { width: 48px; height: 48px; }
body.touch #skillbar .hb { width: 62px; height: 44px; }
body.touch #prompt { bottom: 220px; left: 50%; }
@media (max-width: 600px) { body.touch #tbuttons { bottom: 124px; } body.touch #skillbar .hb { width: 54px; } }
body.touch #tracker { display: none; }

/* ---------- Windows ---------- */
#window, #confirm { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 10; }
#confirm { z-index: 20; }
.win, #confirm .box { background: var(--panel); border: 4px solid var(--edge); box-shadow: 0 0 0 4px #000, 6px 6px 0 4px rgba(0, 0, 0, 0.5); width: min(860px, 96vw); max-height: 92vh; display: flex; flex-direction: column; }
#confirm .box { width: min(420px, 92vw); padding: 16px; font-size: 16px; }
.win header { display: flex; justify-content: space-between; align-items: center; background: var(--panel2); padding: 6px 10px; border-bottom: 3px solid var(--edge-dark); }
.win h2 { margin: 0; font-size: 22px; color: var(--hi); }
.win .body { padding: 10px 14px; overflow-y: auto; -webkit-user-select: text; user-select: text; touch-action: pan-y; }
.win h3 { margin: 10px 0 4px; color: #ffe9a8; font-size: 17px; }
.win p { margin: 4px 0; line-height: 1.35; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .cols { grid-template-columns: 1fr; } .bars { width: 150px; } #tracker { width: 170px; } #minimap { width: 96px; height: 96px; } #menu-buttons { top: 110px; width: 96px; } #area-name { font-size: 22px; } }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; }
.slot { position: relative; height: 46px; padding: 0; background: #0a1a2a; border: 2px solid #2a4a6a; }
.slot.empty { display: block; border-style: dashed; opacity: 0.4; }
.slot.sel { border-color: var(--hi); background: #1f3a55; }
.slot.eq { box-shadow: inset 0 0 0 2px #3a9a48; }
.slot img { width: 30px; height: 30px; image-rendering: pixelated; }
.slot b { position: absolute; right: 2px; bottom: 0; font-size: 12px; text-shadow: 1px 1px 0 #000; color: #fff; }
.slot i { position: absolute; left: 2px; top: 0; font-size: 11px; font-style: normal; color: var(--good); }
.slot.r-uncommon { border-color: #2f7a3a; } .slot.r-rare { border-color: #2a5a9a; } .slot.r-epic { border-color: #6a3a9a; } .slot.r-legendary { border-color: #b8892a; }
.iteminfo { background: #0a1a2a; padding: 8px; border: 2px solid #2a4a6a; }
.iteminfo h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; }
.stats { color: #bfe6ff; font-size: 14px; }
.equipped { margin-top: 10px; }
.eqslot { padding: 3px 0; border-bottom: 1px solid #1f3a55; }
.statrow { border-bottom: 1px solid #1f3a55; padding: 6px 0; }
.statrow b { display: inline-block; min-width: 110px; }
.statrow .num { display: inline-block; min-width: 40px; color: var(--hi); font-size: 18px; }
.pip { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--edge-dark); margin-right: 2px; vertical-align: middle; }
.pip.on { background: var(--hi); }
table.nums { border-collapse: collapse; width: 100%; font-size: 14px; }
table.nums td { padding: 3px 4px; border-bottom: 1px solid #1f3a55; }
table.nums td:last-child { text-align: right; color: var(--hi); }
.quest { background: #0a1a2a; border-left: 4px solid var(--hi); padding: 6px 10px; margin: 6px 0; }
.quest.ready { border-left-color: var(--good); }
.quest h3 { margin: 0 0 3px; font-size: 16px; }
.shoprow { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #1f3a55; }
.shoprow.boat { grid-template-columns: 70px 1fr minmax(160px, auto); }
@media (max-width: 700px) { .shoprow, .shoprow.boat { grid-template-columns: 44px 1fr; } .shoprow .price, .shoprow > .row, .shoprow > div:last-child { grid-column: 1 / -1; } }
.boatimg { width: 64px; image-rendering: pixelated; }
.price { color: var(--hi); white-space: nowrap; }
.tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.talk { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.portrait { width: 64px; height: 64px; image-rendering: pixelated; background: #0a1a2a; border: 2px solid var(--edge-dark); }
.say { font-size: 17px; }
.menu { display: flex; flex-direction: column; gap: 8px; max-width: 320px; margin: 10px auto; }
.menu button { font-size: 18px; padding: 10px; }
.set { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.set input[type=range] { flex: 1; }
.set select { font-family: var(--font); font-size: 15px; }
.keyrow { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; border-bottom: 1px solid #1f3a55; }
.keyrow button { min-width: 110px; font-size: 13px; padding: 3px 8px; }
.mapwrap canvas { width: 100%; image-rendering: pixelated; border: 2px solid var(--edge-dark); background: #1f5fa8; }
.cols.mapcols { grid-template-columns: 2fr 1fr; }
ul.islands { padding-left: 18px; margin: 0; } ul.islands li { margin-bottom: 6px; }

/* ---------- Title ---------- */
#title { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(10, 30, 50, 0.35), rgba(5, 15, 30, 0.8)); z-index: 5; overflow-y: auto; }
.titlebox { background: rgba(16, 38, 61, 0.92); border: 4px solid var(--edge); box-shadow: 0 0 0 4px #000; padding: 18px 24px; width: min(480px, 94vw); text-align: center; max-height: 96vh; overflow-y: auto; }
.titlebox h1 { font-size: 54px; line-height: 0.95; margin: 6px 0; color: var(--hi); text-shadow: 4px 4px 0 #6b2a1a, 6px 6px 0 #000; letter-spacing: 2px; }
.titlebox .sub { color: #bfe6ff; margin: 6px 0 12px; }
.titlebox .links a { color: #9fd0ff; }
.titlebox.create { width: min(640px, 96vw); text-align: left; }
.titlebox label { display: block; margin: 8px 0; }
.titlebox input { display: block; width: 100%; font-family: var(--font); font-size: 18px; padding: 6px; margin-top: 4px; background: #0a1a2a; color: var(--ink); border: 2px solid var(--edge-dark); -webkit-user-select: text; user-select: text; }
.factions { display: grid; grid-template-columns: 1fr 1fr; }
.fac { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.fac span { font-size: 13px; color: var(--dim); }
.fac.on span { color: #2a1a06; }
.looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.look { display: flex; flex-direction: column; align-items: center; padding: 6px; font-size: 13px; }
.look img { width: 48px; height: 48px; image-rendering: pixelated; }

/* Online play: the emote button by the minimap (it opens a column of emotes), the room code, and who's in the room. */
#emotes { position: absolute; top: 8px; right: 144px; display: flex; flex-direction: row-reverse; gap: 4px; }
#emotes button { font-size: 18px; padding: 2px 6px; line-height: 1.2; }
#emotes:not(.open) button.emo { display: none; }
.roomcode { font-size: 28px; letter-spacing: 4px; color: #ffd84a; }
ul.crew { list-style: none; padding: 0; margin: 6px 0; }
ul.crew li { padding: 2px 0; }
@media (max-width: 700px) { #emotes { right: 110px; } #emotes button { font-size: 16px; } }
.roominput { text-transform: uppercase; width: 90px; }
.seat0 { color: #ff6a5a; } .seat1 { color: #6ab0ff; } .seat2 { color: #7ad06a; } .seat3 { color: #ffd23a; }