:root {
  --bg: #0d1410;
  --panel: #16211a;
  --line: #2c3d31;
  --text: #e8f0e4;
  --dim: #93a693;
  --gold: #e8c45a;
  --party: #7fd3ff;
  --whisper: #e59bff;
  --sys: #a8c49a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.4 system-ui, sans-serif; }
[hidden] { display: none !important; }

.panel { max-width: 420px; margin: 8vh auto; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
h1 { margin: 0; color: var(--gold); letter-spacing: .02em; }
.sub { color: var(--dim); margin-top: 4px; }
input { width: 100%; padding: 10px; margin: 6px 0; background: #0b100c; color: var(--text); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.row { display: flex; gap: 8px; margin-top: 6px; }
button, .file { flex: 1; padding: 10px; border-radius: 6px; border: 1px solid var(--gold); background: var(--gold); color: #1a1405; font: inherit; font-weight: 600; cursor: pointer; text-align: center; display: inline-block; }
button.ghost { background: transparent; color: var(--gold); }
.file input { display: none; }
#status { color: var(--dim); min-height: 1.4em; }
#status.err { color: #ff8a7a; }

#play { display: flex; height: 100%; }
#screenwrap { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background: #000; min-width: 0; }
#screen, #tags { image-rendering: pixelated; image-rendering: crisp-edges; }
#tags { position: absolute; pointer-events: none; }
#clicktostart { position: absolute; padding: 12px 18px; background: rgba(0,0,0,.75); border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; cursor: pointer; }

#rompick .or { color: var(--dim); margin: 18px 0 6px; }
#rompick #watchonly, #guestbtn { width: 100%; }
#guestwatch .or { color: var(--dim); margin: 18px 0 6px; }
#guestlogin, #playgame { align-self: flex-start; flex: none; padding: 3px 10px; font-size: 13px; }
#justwatch { position: absolute; flex: none; transform: translateY(58px); background: rgba(0,0,0,.75); }
#getrom { align-self: flex-start; flex: none; padding: 3px 10px; font-size: 13px; }

/* watching without a ROM: a grid of every live game, or one big */
#watchgrid { position: absolute; inset: 0; overflow: auto; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); gap: 12px; align-content: start; background: #050806; }
#watchgrid .tile { position: relative; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; cursor: pointer; background: #000; aspect-ratio: 256 / 224; }
#watchgrid .tile:hover { border-color: var(--gold); }
#watchgrid .tile img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
#watchgrid .tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; background: rgba(0,0,0,.7); font-size: 13px; display: flex; justify-content: space-between; gap: 6px; }
#watchgrid .tile .cap .place { color: var(--dim); }
#watchgrid .empty { grid-column: 1 / -1; color: var(--dim); text-align: center; margin-top: 20vh; }
#watchbig { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
#watchhead { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; }
#watchhead span { background: rgba(0,0,0,.7); padding: 4px 10px; border-radius: 6px; color: var(--gold); }
#watchhead button { pointer-events: auto; background: rgba(0,0,0,.7); }

#side { width: 300px; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--panel); padding: 10px; gap: 6px; }
#side .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#side .about { margin-left: auto; font-size: 12px; color: var(--gold); text-decoration: none; border-bottom: 1px dotted var(--gold); }
#me { color: var(--gold); font-weight: 600; }
button.small { flex: none; padding: 3px 10px; font-size: 13px; }
#actions { display: flex; gap: 6px; align-items: center; }
#actions:not(:has(button:not([hidden]))) { display: none; }   /* (no gap left behind when neither button shows) */
#divebtn:disabled { background: transparent; color: var(--dim); border-color: var(--line); cursor: default; }
#divehint { color: var(--gold); font-size: 12px; }
#leadbtn { align-self: flex-start; }
#leadbtn.on { background: var(--party); border-color: var(--party); color: #06202c; }
#followbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--party); border-radius: 6px; color: var(--party); font-size: 14px; }
#side h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin: 6px 0 0; }
#roster { list-style: none; margin: 0; padding: 0; max-height: 30%; overflow: auto; font-size: 14px; }
#roster li { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; }
#roster li .place { color: var(--dim); font-size: 12px; }
#roster li.party .who { color: var(--party); }
#roster li .who { cursor: pointer; }
#log { flex: 1; overflow: auto; font-size: 14px; border-top: 1px solid var(--line); padding-top: 6px; overflow-wrap: anywhere; }
#log .from { color: var(--gold); font-weight: 600; }
#log .party .from, #log .party { color: var(--party); }
#log .whisper, #log .whisper .from { color: var(--whisper); }
#log .sys { color: var(--sys); font-style: italic; }
#log .bossnews { color: #ffb347; font-style: normal; font-weight: 600; }
#log .bossnews::before { content: '⚔ '; }
#log .invite button { padding: 2px 8px; margin-left: 6px; flex: none; }
#keys { color: var(--dim); font-size: 13px; }
#look { font-size: 13px; }
#look summary, #keys summary { cursor: pointer; }
#look .swatches { display: flex; gap: 10px; margin: 6px 0; }
#look .swatches label { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--dim); }
#look input[type=color] { width: 44px; height: 28px; padding: 0; margin: 0; border: 1px solid var(--line); background: none; }
#look .row { align-items: center; }
#look .file.small { flex: none; padding: 3px 10px; font-size: 13px; }
#look a { color: var(--gold); }
#look .hint, #zsprname { color: var(--dim); margin: 4px 0; }
#charpick { margin: 4px 0 6px; }

#chars { width: min(720px, calc(100vw - 32px)); max-height: 80vh; padding: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; }
#chars::backdrop { background: rgba(0, 0, 0, .6); }
#chars[open] { display: flex; flex-direction: column; gap: 8px; }
.charhead { display: flex; gap: 8px; align-items: center; }
.charhead input { margin: 0; }
#chargrid { overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
#chargrid button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: #0b100c; border: 1px solid var(--line); color: var(--text); font-weight: 400; font-size: 12px; }
#chargrid button:hover, #chargrid button:focus-visible { border-color: var(--gold); }
#chargrid button.current { border-color: var(--party); }
#chargrid img { height: 48px; image-rendering: pixelated; }
#chargrid .by { color: var(--dim); font-size: 11px; }
#chars .hint { color: var(--dim); font-size: 12px; margin: 0; }
#chars a { color: var(--gold); }

/* streamer view (play.html?stream, the Stream button, F9): no side panel, the
   game as big as the window allows, and overlays in the bars beside it
   (--bar is the width of each bar, set by layout()) */
#streamhud, #toasts, #streamchat, #streamexit { display: none; }
body.stream #side { display: none; }
body.stream #streambtn { display: none; }
body.stream #streamhud { display: flex; flex-direction: column; gap: 4px; position: absolute; left: 14px; top: var(--top, 14px); z-index: 7;
  width: max(calc(var(--bar, 0px) - 28px), 200px); padding: 10px 14px; border-radius: 12px; background: #000a; border: 1px solid #ffffff22;
  color: #fff; font: 600 16px/1.35 system-ui, sans-serif; text-shadow: 0 1px 2px #000; pointer-events: none; }
#streamhud .where { font-size: 19px; color: var(--gold); }
#streamhud .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#streamhud .row svg { width: 18px; height: 18px; }
#streamhud .site { margin-top: 4px; font-size: 13px; color: var(--dim); font-weight: 500; }
body.stream #toasts { display: flex; flex-direction: column; gap: 8px; position: absolute; right: 14px; top: var(--top, 14px); z-index: 7;
  width: max(calc(var(--bar, 0px) - 28px), 200px); pointer-events: none; }
#toasts .toast { padding: 10px 14px; border-radius: 12px; background: #101418ee; border: 2px solid var(--gold); color: #fff;
  font: 600 15px/1.35 system-ui, sans-serif; font-style: normal; box-shadow: 0 6px 18px #000a; animation: toastin .35s ease-out; transition: opacity .6s, transform .6s; }
#toasts .toast.boss { border-color: #ffb347; background: #2a1606ee; }
#toasts .toast.gone, #streamchat .gone { opacity: 0; transform: translateX(20px); }
@keyframes toastin { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
body.stream #streamchat { display: flex; flex-direction: column; gap: 3px; position: absolute; left: 14px; bottom: 14px; z-index: 7;
  width: max(calc(var(--bar, 0px) - 28px), 200px); font: 500 15px/1.35 system-ui, sans-serif; pointer-events: none; }
#streamchat > div { padding: 4px 10px; border-radius: 8px; background: #000a; color: #fff; text-shadow: 0 1px 2px #000; transition: opacity .8s, transform .8s; }
#streamchat .from { color: var(--gold); font-weight: 700; }
#streamchat .party .from { color: var(--party); }
body.stream #streamexit { display: block; position: absolute; right: 10px; bottom: 10px; z-index: 8; opacity: 0.15; }
body.stream #streamexit:hover { opacity: 1; }
body.stream #screenwrap > #say { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(520px, 70%); z-index: 9; opacity: 0; transition: opacity .2s; }
body.stream #screenwrap > #say:focus-within { opacity: 1; }
body.stream #screenwrap > #say input { font-size: 16px; background: #000c; }

/* touch gamepad: upright it's a strip between the game and the panel; turned
   sideways (#screenwrap.tp-over) it lies over the edges of the game */
#touchpad { position: relative; flex: none; height: 210px; background: #070a08; border-top: 1px solid var(--line);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#touchpad > * { position: absolute; }
.tp-dpad { left: 16px; bottom: 18px; width: 136px; height: 136px; border-radius: 50%; background: #ffffff10; border: 2px solid #ffffff22; }
.tp-dpad i { position: absolute; background: #2b332e; border: 2px solid #4b5a50; }
.tp-dpad .up, .tp-dpad .down { left: 46px; width: 40px; height: 46px; }
.tp-dpad .left, .tp-dpad .right { top: 46px; width: 46px; height: 40px; }
.tp-dpad .up { top: 6px; border-radius: 8px 8px 2px 2px; } .tp-dpad .down { bottom: 6px; border-radius: 2px 2px 8px 8px; }
.tp-dpad .left { left: 6px; border-radius: 8px 2px 2px 8px; } .tp-dpad .right { right: 6px; border-radius: 2px 8px 8px 2px; }
.tp-dpad b { position: absolute; left: 46px; top: 46px; width: 40px; height: 40px; background: #2b332e; }
.tp-dpad i.on { background: var(--gold); border-color: #fff8; }
.tp-face { right: 14px; bottom: 10px; width: 150px; height: 150px; }
.tp-btn { position: absolute; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 800 18px system-ui, sans-serif;
  color: #fff; text-shadow: 0 1px 0 #0008; box-shadow: 0 4px 0 #0007, inset 0 0 0 2px #ffffff30; }
.tp-x { left: 47px; top: 0; background: #3d7fe0; } .tp-y { left: 0; top: 47px; background: #3fae5a; }
.tp-a { right: 0; top: 47px; background: #e0443e; } .tp-b { left: 47px; bottom: 0; background: #f2c230; color: #3a2a00; text-shadow: none; }
.tp-btn.on { transform: translateY(3px); box-shadow: 0 1px 0 #0007, inset 0 0 0 3px #fff; }
.tp-mid { left: 50%; top: 14px; transform: translateX(-50%); display: flex; gap: 8px; }
.tp-pill.tp-chat { background: #13324a; border-color: #2f6f99; color: var(--party); }
#screenwrap.tp-over .tp-mid { top: auto; bottom: 10px; }
@media (orientation: landscape) and (max-height: 520px) { body.touch #side { width: 230px; } }
.tp-pill { padding: 6px 12px; border-radius: 999px; background: #2b332e; border: 1px solid #4b5a50; color: var(--dim); font: 700 12px system-ui, sans-serif; }
.tp-pill.on, .tp-shoulder.on { background: var(--gold); color: #1a1405; }
.tp-shoulder { top: 10px; width: 76px; height: 34px; display: grid; place-items: center; background: #2b332e; border: 1px solid #4b5a50;
  color: var(--dim); font: 800 14px system-ui, sans-serif; }
.tp-l { left: 16px; border-radius: 14px 6px 6px 6px; } .tp-r { right: 16px; border-radius: 6px 14px 6px 6px; }
#screenwrap.tp-over #touchpad { position: absolute; inset: 0; height: auto; background: none; border: 0; pointer-events: none; z-index: 6; }
#screenwrap.tp-over #touchpad > * { pointer-events: auto; opacity: 0.55; }
#screenwrap.tp-over #touchpad > *:active { opacity: 0.85; }

@media (max-width: 760px) {
  #play { flex-direction: column; }
  #side { width: 100%; height: 42%; border-left: 0; border-top: 1px solid var(--line); }
  body.touch #side { height: 30%; }
}

/* Dive gear */
#bag { font-size: 13px; }
#bag summary { cursor: pointer; }
#bag .hint { color: var(--dim); margin: 4px 0; }
.geargrid { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 5px; margin-top: 6px; }
.gearhead { margin-top: 8px; color: var(--dim); font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; }
.gearhead span { text-transform: none; font-weight: normal; letter-spacing: 0; }
#worn { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
#baglist { max-height: 30vh; overflow-y: auto; padding: 2px; }
.geartile { position: relative; width: 40px; height: 40px; padding: 5px; margin: 0; border: 2px solid; border-radius: 7px;
  background: #0c0f12; cursor: pointer; box-shadow: none; }
.geartile svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 0 #000a); }
.geartile:hover, .geartile.picked { background: #1c232b; box-shadow: 0 0 0 2px #fff4; }
.geartile.empty { border: 2px dashed var(--line); color: #ffffff22; cursor: default; }
.geartile.empty:hover { background: #0c0f12; box-shadow: none; }
/* a Hardcore dive's find: carried, banked only on climbing out */
.geartile.carried::after { content: '☠'; position: absolute; right: -5px; top: -7px; font-size: 11px; line-height: 1; color: #ff4a5a;
  text-shadow: 0 0 3px #000, 0 0 3px #000; }
#gearinfo { margin-top: 8px; padding: 6px 8px; border: 2px solid; border-radius: 7px; }
#gearinfo .row { margin-top: 6px; }
#geartip { position: fixed; z-index: 30; pointer-events: none; min-width: 200px; max-width: 280px; padding: 8px 12px;
  background: #101418f2; border: 2px solid; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 24px #000a; }
#shop { font-size: 13px; }
#shop summary { cursor: pointer; }
#shop .hint { color: var(--dim); margin: 4px 0; }
.deep { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; color: #b47cff; }
.deep svg, .perk button svg { width: 14px; height: 14px; vertical-align: -2px; }
#perklist { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.perk { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 6px; }
.perkname { font-weight: bold; }
.perk .pips { margin-left: 6px; color: #b47cff; letter-spacing: 1px; font-size: 11px; }
.perk button { flex: none; display: inline-flex; align-items: center; gap: 4px; min-width: 64px; justify-content: center; }
.perk button:disabled { opacity: 0.5; cursor: default; }
.itemchip { display: inline-flex; align-items: center; gap: 3px; font-weight: bold; cursor: help; white-space: nowrap; }
.itemchip .gearicon { width: 15px; height: 15px; display: inline-block; vertical-align: -3px; }
.itemchip .gearicon svg { width: 100%; height: 100%; display: block; }
.gearname { display: flex; align-items: center; gap: 6px; font-weight: bold; }
.gearname .gearicon { width: 18px; height: 18px; flex: none; }
.gearname .gearicon svg { width: 100%; height: 100%; display: block; }
.gearsub { color: var(--dim); font-size: 12px; margin: 1px 0 2px; }
.gearcard ul { margin: 2px 0 0; padding-left: 18px; }
/* Relics */
#relicbar { position: absolute; left: 8px; bottom: 8px; z-index: 4; display: flex; flex-wrap: wrap; gap: 4px; max-width: 60%; }
.relicbadge { position: relative; width: 26px; height: 26px; display: grid; place-items: center; font-size: 15px;
  color: var(--rc); background: #0c0f12dd; border: 2px solid var(--rc); border-radius: 50%; cursor: help;
  text-shadow: 0 0 6px var(--rc); }
.relicbadge sub { position: absolute; right: -4px; bottom: -4px; font-size: 10px; color: #fff; background: #000;
  border-radius: 6px; padding: 0 3px; }
#relicpick, #modepick { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; background: #05070acc; padding: 16px; }
.relichead { font-size: 20px; font-weight: bold; color: #fff; text-align: center; }
.relichead span { display: block; font-size: 12px; font-weight: normal; color: var(--dim); }
#reliccards, #modecards { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.reliccard { position: relative; width: 168px; padding: 14px 12px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; background: #101418f2; color: #ddd; border: 2px solid var(--rc); border-radius: 10px; cursor: pointer;
  box-shadow: 0 0 18px #0008; font: inherit; text-align: center; transition: transform 0.12s; }
.reliccard:hover, .reliccard:focus-visible { transform: translateY(-4px); box-shadow: 0 0 22px var(--rc); }
.relicglyph { width: 54px; height: 54px; display: grid; place-items: center; font-size: 30px; color: var(--rc);
  border: 2px solid var(--rc); border-radius: 50%; text-shadow: 0 0 10px var(--rc); }
.relicname { font-weight: bold; color: var(--rc); font-size: 15px; }
.relictext { font-size: 12px; line-height: 1.35; }
.relickey { position: absolute; left: 8px; top: 6px; font-size: 11px; color: var(--dim); }
#modecancel { font: inherit; font-size: 14px; color: #ddd; background: #101418f2; border: 1px solid #555; border-radius: 8px;
  padding: 8px 22px; cursor: pointer; }
#modecancel:hover, #modecancel:focus-visible { border-color: #aaa; color: #fff; }
@media (max-width: 600px) { #reliccards, #modecards { gap: 6px; } .reliccard { width: 31%; padding: 8px 4px; }
  .relicglyph { width: 36px; height: 36px; font-size: 20px; } .relicname { font-size: 12px; } .relictext { font-size: 10px; } }
#lootcard { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); z-index: 5;
  min-width: 220px; max-width: 80%; padding: 10px 14px; background: #101418ee; border: 2px solid; border-radius: 8px;
  font-size: 13px; box-shadow: 0 6px 24px #000a; }
#lootcard .row { margin-top: 8px; }