/* Otherworld Express — static styles only (all animation is done in JS). */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; background:#0d1420;
  font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif; font-size:18px; color:#fff;
  touch-action:none; user-select:none; -webkit-user-select:none; }
#app { position:fixed; inset:0; overflow:hidden; }
#gl { position:absolute; inset:0; width:100%; height:100%; display:block; }

.hidden { display:none !important; }
.screen { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; z-index:30; background:linear-gradient(180deg,#15203a 0%,#1d3050 55%,#2a4a6e 100%); padding:16px; }
.screen.overlay { background:rgba(10,14,24,.72); z-index:60; }

/* ---------- typography ---------- */
.logo { font-size:44px; line-height:1.02; text-align:center; letter-spacing:2px; color:#ffd45e;
  text-shadow:0 3px 0 #7a4a12, 0 6px 14px rgba(0,0,0,.5); font-weight:900; }
.logo span { color:#7ee0ff; text-shadow:0 3px 0 #1a5a7a, 0 6px 14px rgba(0,0,0,.5); }
.logo.big { font-size:52px; }
.logo-mini { font-size:56px; text-align:center; }
h2 { font-size:26px; letter-spacing:1px; color:#ffe9b0; text-shadow:0 2px 0 rgba(0,0,0,.45); text-align:center; }
.tagline { font-size:19px; color:#dceaff; margin:14px 0 30px; text-align:center; }
.credits { margin-top:26px; font-size:15px; color:#9fb7d4; text-align:center; }
.sub { font-size:16px; color:#b8cbe4; text-align:center; margin-top:4px; }

/* ---------- buttons (Kenney UI pack) ---------- */
.btn { display:inline-block; border:0; cursor:pointer; color:#fff; font-weight:800; font-size:20px;
  font-family:inherit; letter-spacing:.5px; text-shadow:0 2px 2px rgba(0,0,0,.35);
  padding:14px 26px; min-height:56px; min-width:64px;
  border-image-source:url("../assets/ui/btn_grey.png"); border-image-slice:12 12 20 12 fill; border-image-width:12px 12px 20px 12px;
  background:transparent; }
.btn:active { filter:brightness(.82); }
.btn-blue   { border-image-source:url("../assets/ui/btn_blue.png"); }
.btn-green  { border-image-source:url("../assets/ui/btn_green.png"); }
.btn-red    { border-image-source:url("../assets/ui/btn_red.png"); color:#fff; }
.btn-yellow { border-image-source:url("../assets/ui/btn_yellow.png"); color:#5a3c00; text-shadow:0 1px 0 rgba(255,255,255,.35); }
.btn-grey   { color:#44536b; text-shadow:0 1px 0 rgba(255,255,255,.4); }
.btn-huge { font-size:24px; padding:18px 40px; min-height:64px; }
.btn-round { min-width:60px; min-height:60px; padding:10px; font-size:24px; }
.btn-round.small { min-width:52px; min-height:52px; font-size:20px; }

/* ---------- boot / gen ---------- */
.boot-inner { display:flex; flex-direction:column; align-items:center; gap:18px; width:min(440px,92%); }
.loadbar { width:100%; height:26px; border-radius:13px; background:#0b1526; border:2px solid #3a5a86; overflow:hidden; }
#loadfill,#genfill { height:100%; width:0%; background:linear-gradient(90deg,#39b4ff,#7ee0ff); border-radius:11px; }
.loadmsg { font-size:17px; color:#a9c4e4; text-align:center; min-height:24px; }
.seedbadge { font-size:18px; font-weight:800; color:#ffd45e; background:#0b1526; border:2px solid #6a5a2a;
  border-radius:10px; padding:8px 16px; letter-spacing:1px; }

/* ---------- title ---------- */
.title-inner { display:flex; flex-direction:column; align-items:center; }
#scr-title { background:transparent; pointer-events:none; }
#scr-title .btn { pointer-events:auto; margin-top:10px; }
#scr-title .title-inner { background:rgba(10,16,28,.35); border-radius:24px; padding:30px 26px; }

/* ---------- character select ---------- */
#scr-char { background:transparent; justify-content:space-between; padding:18px 12px 26px; }
.panel-top { background:rgba(10,16,28,.68); border-radius:16px; padding:12px 22px; }
.char-nav { display:flex; align-items:center; gap:10px; width:100%; max-width:520px; justify-content:space-between; }
.char-info { flex:1; text-align:center; background:rgba(10,16,28,.68); border-radius:16px; padding:10px 14px; min-height:86px; }
.char-name { font-size:28px; font-weight:900; color:#ffd45e; }
.char-blurb { font-size:17px; color:#cfe0f4; margin-top:4px; }
.char-confirm { display:flex; justify-content:center; }

/* ---------- level select ---------- */
#scr-level { justify-content:flex-start; gap:12px; padding:18px 14px; overflow:hidden; }
.level-list { flex:1; width:100%; max-width:560px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px; touch-action:pan-y; }
.level-card { display:flex; align-items:center; gap:12px; background:rgba(12,20,36,.85); border:2px solid #35507c;
  border-radius:14px; padding:10px 12px; cursor:pointer; }
.level-card:active { background:#22334f; }
.level-card canvas { width:74px; height:74px; border-radius:10px; border:2px solid #2a4166; flex:0 0 auto; }
.lc-mid { flex:1; min-width:0; }
.lc-name { font-size:20px; font-weight:800; color:#ffe9b0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lc-seed { font-size:15px; color:#8fd0ff; font-weight:700; letter-spacing:.5px; }
.lc-biomes { font-size:14px; color:#aabdd8; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lc-best { font-size:15px; color:#ffd45e; font-weight:800; white-space:nowrap; }
.seed-row { display:flex; gap:8px; width:100%; max-width:560px; }
.seed-row input { flex:1; min-height:56px; font-size:19px; padding:8px 14px; border-radius:12px; border:2px solid #35507c;
  background:#0b1526; color:#fff; font-family:inherit; outline:none; }
.level-foot { display:flex; width:100%; max-width:560px; justify-content:space-between; align-items:center; }
.wallet { font-size:22px; font-weight:900; color:#ffd45e; }

/* ---------- HUD ---------- */
#hud { position:absolute; inset:0; z-index:20; pointer-events:none; }
.hud-top { position:absolute; top:calc(8px + env(safe-area-inset-top)); left:8px; right:8px; display:flex; gap:8px; align-items:center; }
.hud-chip { background:rgba(10,16,28,.72); border:2px solid rgba(120,160,210,.35); border-radius:12px;
  padding:8px 12px; font-size:18px; font-weight:800; color:#fff; }
.hud-chip.seed { color:#8fd0ff; font-size:15px; letter-spacing:.5px; flex:1; text-align:center; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#hud-wallet { color:#ffd45e; }
#bt-menu { pointer-events:auto; }
.quest-tracker { position:absolute; top:calc(64px + env(safe-area-inset-top)); left:8px; display:flex; gap:8px; align-items:center;
  background:rgba(10,16,28,.72); border:2px solid rgba(255,212,94,.5); border-radius:12px; padding:6px 10px; max-width:70%; }
.qt-text { min-width:0; }
#qt-title { font-size:16px; font-weight:800; color:#ffe9b0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#qt-dist { font-size:14px; color:#bdd2ea; }
.qt-arrow { font-size:26px; color:#ffd45e; }
#minimap { position:absolute; right:8px; top:calc(64px + env(safe-area-inset-top)); border-radius:12px;
  border:2px solid rgba(120,160,210,.4); background:#0b1526; pointer-events:auto; }
#toasts { position:absolute; top:31%; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.toast { background:rgba(16,26,44,.92); border:2px solid #ffd45e; color:#ffe9b0; font-size:18px; font-weight:800;
  border-radius:14px; padding:10px 18px; }

/* joystick */
.joy { position:absolute; left:18px; bottom:calc(20px + env(safe-area-inset-bottom)); width:150px; height:150px;
  background-image:url("../assets/ui/joy_pad.png"); background-size:100% 100%; pointer-events:auto; opacity:.9; }
.joy-nub { position:absolute; left:45px; top:45px; width:60px; height:60px;
  background-image:url("../assets/ui/joy_nub.png"); background-size:100% 100%; }
.act-btn { position:absolute; right:22px; bottom:calc(34px + env(safe-area-inset-bottom)); width:110px; height:110px;
  border:0; background:transparent url("../assets/ui/btn_circle.png") center/100% 100% no-repeat;
  color:#fff; font-family:inherit; font-size:20px; font-weight:900; letter-spacing:.5px; text-shadow:0 2px 3px rgba(0,0,0,.55);
  pointer-events:auto; cursor:pointer; }
.act-btn:active { filter:brightness(.8); }

/* speech bubbles */
#bubbles { position:absolute; inset:0; overflow:hidden; }
.bubble { position:absolute; transform:translate(-50%,-100%); background:rgba(255,255,255,.96); color:#1c2636;
  font-size:16px; font-weight:700; border-radius:14px; padding:7px 12px; max-width:230px; text-align:center;
  box-shadow:0 3px 8px rgba(0,0,0,.35); }
.bubble:after { content:""; position:absolute; left:50%; bottom:-8px; margin-left:-8px; border:8px solid transparent;
  border-top-color:rgba(255,255,255,.96); border-bottom:0; }
.bubble.fantasy { background:#f7ecd0; border:2px solid #b08d4a; }
.bubble.fantasy:after { border-top-color:#f7ecd0; }
.bubble .em { width:26px; height:26px; vertical-align:-6px; margin-right:4px; }

/* ---------- dialog ---------- */
.dialog { position:absolute; left:10px; right:10px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:40;
  background:rgba(14,22,38,.96); border:3px solid #4a6ea6; border-radius:18px; padding:14px; }
.dialog.fantasy { border-image-source:url("../assets/ui/panel_fantasy.png"); border-image-slice:24 fill; border-image-width:24px;
  border-style:solid; border-width:12px; border-radius:0; background:transparent; color:#3a2c14; }
.dialog.fantasy .dlg-head span:first-child { color:#7a4a12; }
.dialog.fantasy .dlg-body { color:#4a3820; }
.dialog.fantasy .dlg-head #dlg-zone { color:#8a6a3a; }
.dlg-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
#dlg-name { font-size:21px; font-weight:900; color:#ffd45e; }
#dlg-zone { font-size:15px; color:#9fb7d4; }
.dlg-body { font-size:18px; line-height:1.35; min-height:48px; }
.dlg-item { display:flex; align-items:center; gap:10px; margin-top:8px; background:rgba(255,255,255,.10); border-radius:12px; padding:6px 10px; }
.dialog.fantasy .dlg-item { background:rgba(122,74,18,.12); }
#dlg-itemtext { font-size:17px; font-weight:700; }
.dlg-buttons { display:flex; gap:10px; margin-top:12px; justify-content:flex-end; flex-wrap:wrap; }

/* ---------- pause / help / map ---------- */
.pause-box, .map-box { display:flex; flex-direction:column; gap:12px; align-items:stretch; width:min(420px,94%);
  background:rgba(14,22,38,.96); border:3px solid #4a6ea6; border-radius:20px; padding:22px; max-height:92%; overflow-y:auto; }
.pause-box h2, .map-box h2 { margin-bottom:6px; }
.pause-stats { font-size:17px; color:#bdd2ea; text-align:center; line-height:1.5; }
.help-text p { font-size:18px; line-height:1.45; margin:8px 0; color:#dce8f8; }
.map-box { align-items:center; }
#bigmap { width:min(78vw,360px); height:min(78vw,360px); border-radius:14px; border:2px solid #35507c; image-rendering:pixelated; }
.map-legend { display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center; font-size:14px; color:#bdd2ea; }
.map-legend .sw { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:4px; vertical-align:-1px; }