:root {
  --ui-bg: rgba(21, 36, 67, 0.84);
  --ui-border: rgba(255,255,255,0.14);
  --ui-text: rgba(245,245,250,0.96);
  --ui-subtext: rgba(205,214,231,0.82);
  --gold: #f2c84b;
  --green: #1ea85b;
  --blue: #3b5aa8;
  --red: #b43b3b;
}
html, body {
  margin: 0;
  height: 100%;
  background: #0a1c36;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--ui-text);
  overflow: hidden;
}
.hidden { display: none !important; }
#gameShell, #ui { height: 100%; }
#ui {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  position: relative;
}
.topbar, .bottombar {
  display: flex;
  gap: 10px;
  padding: 12px;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(8px);
}
.topRight, .actions, .wideActions, .repTop, .invHeader, .gate-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.badge, .panel, .inventoryWidget, .repWidget, .adminDrawer, .card, .gate-card {
  background: linear-gradient(180deg, #233e79 0%, #162b57 100%);
  border: 1px solid var(--ui-border);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  border-radius: 14px;
}
.badge {
  padding: 8px 14px;
  font-weight: 800;
  white-space: nowrap;
}
.panel {
  padding: 12px 14px;
  min-width: 210px;
}
.miniPanel { min-width: 170px; }
.panelTitle {
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 12px;
}
.panelSub, .repSub, .adminText {
  color: var(--ui-subtext);
  font-size: 12px;
  margin-top: 4px;
}
.bar, .repBar, .fishingMeter {
  height: 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.bar { margin-top: 8px; }
.barFill, .repFill {
  height: 100%;
  width: 0;
  background: var(--gold);
}
.repFill { background: #67c0ff; }
#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
  background: #0b1630;
  touch-action: none;
}
.bottombar {
  padding-top: 0;
}
.inventoryWidget, .repWidget {
  padding: 12px;
}
.bottombar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 220px 190px;
  grid-template-areas:
    "inventory rep deposit"
    "inventory rep character";
  align-items: stretch;
  gap: 10px;
}
.inventoryWidget { grid-area: inventory; min-width: 220px; }
.repWidget { grid-area: rep; width: auto; min-width: 220px; max-width: 240px; }
.depositRow { grid-area: deposit; display: flex; align-items: stretch; min-height: 0; min-width: 0; }
.characterRow { grid-area: character; display: flex; align-items: stretch; min-height: 0; min-width: 0; }
.depositRow .depositBtn, .characterRow button { width: 100%; min-width: 0; }
.inventoryGrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 10px;
}
.invSlot {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
}
.invSlot.selected { outline: 2px solid var(--gold); }
.invSlot.empty { opacity: .5; }
.invSlot img { width: 28px; height: 28px; object-fit: contain; }
.invToggle, button, .btn {
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 800;
  color: #fff;
  background: var(--green);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
button.secondary, .btn { background: var(--blue); }
button.danger { background: var(--red); }
button.small, .invToggle { padding: 8px 10px; font-size: 12px; }
button:disabled { opacity: .55; background: #355; cursor: default; }
.depositBtn { min-width: 150px; }
.banner, .tutorialBubble, .tileHint, .toast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.banner {
  top: 64px;
  background: rgba(242,200,75,.96);
  color: #1b1403;
  padding: 10px 14px;
  font-weight: 900;
}
.tutorialBubble {
  top: 108px;
  background: rgba(27,45,87,.96);
  color: #fff;
  padding: 12px 14px;
  max-width: min(500px, 92vw);
  text-align: center;
  border: 1px solid rgba(255,255,255,.12);
}
.tileHint {
  bottom: 178px;
  background: rgba(15,25,48,.95);
  padding: 8px 12px;
  color: var(--ui-subtext);
  font-size: 12px;
}
.toast {
  bottom: 18px;
  background: rgba(15,25,48,.95);
  padding: 10px 14px;
}
.adminDrawer {
  margin: 0 12px 12px;
  padding: 12px;
}
.adminTitle { font-weight: 800; }
#resetSqlOutput {
  width: 100%;
  min-height: 130px;
  margin-top: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: #fff;
  padding: 10px;
  resize: vertical;
  font: 12px/1.35 ui-monospace, monospace;
}
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
}
.card {
  width: min(360px, 88vw);
  padding: 18px;
  text-align: center;
}
.title { font-size: 22px; font-weight: 900; }
.subtitle { margin-top: 8px; color: var(--ui-subtext); font-size: 14px; }

.fishingCard { width: min(560px, 92vw); background: linear-gradient(180deg, rgba(45,77,155,.98), rgba(23,39,95,.98)); box-shadow: 0 24px 48px rgba(4,10,30,.42); }
.fishingCard .title { font-size: 34px; letter-spacing: .02em; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.28); }
.fishingCard .subtitle { text-align:center; color:#d7e7ff; max-width: 430px; margin: 0 auto; }
.fishingSceneWrap { display:flex; gap:16px; align-items:stretch; margin:18px 0 12px; }
.fishingScene {
  position:relative; flex:1; min-height:232px; border-radius:18px;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(180deg, #78b9e8 0%, #2e6da5 42%, #15395f 78%, #0b213c 100%);
  border:1px solid rgba(255,255,255,.14); overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -12px 24px rgba(0,0,0,.18);
}
.depthLabel { position:absolute; left:10px; font-size:11px; color:rgba(255,255,255,.78); text-shadow: 0 1px 2px rgba(0,0,0,.24); }
.depthTop { top:8px; }
.depthBottom { bottom:8px; }
.depthLine { position:absolute; left:8px; right:8px; height:1px; background:rgba(255,255,255,.14); top:20%; }
.depthLine.line2 { top:40%; }
.depthLine.line3 { top:60%; }
.depthLine.line4 { top:80%; }
.verticalMeter {
  width:36px; min-height:232px; height:232px; margin:0; border-radius:18px; position:relative;
  background: linear-gradient(180deg, #122462 0%, #0a163f 100%);
  border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 0 0 2px rgba(255,255,255,.03), inset 0 8px 16px rgba(255,255,255,.03);
  overflow: visible;
}
.catchZone { position:absolute; left:2px; right:2px; top:auto; border-radius:999px; box-shadow: 0 0 10px rgba(255,255,255,.16); }
.fishMarker {
  position:absolute; left:-9px; width:52px; height:14px; top:auto;
  background: radial-gradient(circle at 30% 30%, #fff5c7 0%, #ffd85f 32%, #ffbf2a 62%, #f5a400 100%);
  border-radius:999px; box-shadow: 0 0 12px rgba(255,210,83,.42);
}
.fishingTargetFish {
  position:absolute; left:50%; width:48px; height:30px; margin-left:-24px;
  background-image:url('assets/fish.png'); background-repeat:no-repeat; background-position:center; background-size:contain;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.45)); transition: bottom .12s ease;
}
.fishingHook {
  position:absolute; left:calc(50% - 10px); width:2px; margin-left:-1px; top:0;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(225,236,248,.42));
  border-radius:999px; box-shadow: 0 0 4px rgba(255,255,255,.22);
}
.fishingHook::after {
  content:''; position:absolute; left:50%; bottom:-7px; width:16px; height:22px; margin-left:-1px;
  background-repeat:no-repeat; background-size:contain; background-position:center;
  transform: translateX(-5px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23b8c7d6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 1v9.5c0 4.1 2.4 6.7 5.5 6.7 1 0 1.7-.2 2-.5' fill='none' stroke='url(%23g)' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M13.5 16.7c-1.5.8-2.4 2-2.8 4' fill='none' stroke='url(%23g)' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}
.fishingCard .buttonRow { justify-content: flex-end; }
.fishingCard .btn.good { box-shadow: 0 10px 20px rgba(45,208,114,.22); }
.fishingCard .btn.small { box-shadow: 0 10px 20px rgba(86,124,221,.22); }
.rareFishBadge {
  margin: 0 auto 12px; width:max-content; padding:6px 10px; border-radius:999px;
  background:rgba(136,85,221,.18); border:1px solid rgba(136,85,221,.48); color:#d8c7ff; font-weight:800; font-size:12px;
}

.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.gate-card {
  width: min(540px, 94vw);
  padding: 24px;
}
.gate-kicker {
  color: var(--ui-subtext);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gate-card input {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #fff;
}
.gate-error { color: #ffb8b8; margin-top: 8px; }
@media (max-width: 900px) {
  #ui { grid-template-rows: auto 1fr auto auto; }
  .topbar, .bottombar, .topRight, .hudStack, .actions { flex-wrap: wrap; }
  .repWidget, .inventoryWidget, .panel { width: 100%; min-width: 0; }
  .inventoryGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tileHint { bottom: 220px; }
  html, body { overflow: auto; }
  #ui { height: auto; min-height: 100%; }
  #gameCanvas { min-height: 58vh; }
}


.hiddenReset{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

#ui{
  grid-template-rows:auto 1fr auto;
  min-height:100vh;
}

.adminDrawer{display:none;}

.bottombar{
  position:relative;
  z-index:8;
  pointer-events:auto;
  touch-action:pan-y;
}

.actions{
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:stretch;
}

#gameCanvas{
  min-height:0;
}

@media (min-width: 980px) and (orientation: landscape){
  #ui{
    grid-template-rows:auto 1fr;
  }
  .bottombar{
    position:absolute;
    left:12px;
    right:12px;
    bottom:12px;
    border-radius:16px;
    background:linear-gradient(180deg, rgba(35,62,121,.86), rgba(22,43,87,.90));
    border:1px solid var(--ui-border);
    box-shadow:0 10px 24px rgba(0,0,0,.28);
    backdrop-filter:blur(8px);
    padding:12px;
    grid-template-columns:minmax(260px, 1fr) minmax(220px, 240px) minmax(160px, 200px);
    grid-template-areas:
      "inventory rep deposit"
      "inventory rep character";
    align-items:stretch;
    column-gap:10px;
    row-gap:10px;
  }
  .tileHint{
    bottom:126px;
  }
}

@media (max-width: 979px){
  html, body{
    overflow:hidden;
  }
  #ui{
    grid-template-rows:auto 1fr auto;
  }
  .bottombar{
    padding:10px 12px 12px;
  }
}

@media (max-width: 760px){
  .topbar{
    flex-wrap:wrap;
  }
  .topRight{
    width:100%;
    flex-wrap:wrap;
  }
  .panel{
    min-width:0;
    flex:1 1 220px;
  }
  .inventoryWidget, .repWidget{
    width:100%;
    min-width:0;
  }
  .depositRow, .characterRow{
    width:100%;
  }
}


.forgePrompt {
  position: absolute;
  right: 18px;
  bottom: 236px;
  width: min(360px, calc(100vw - 36px));
  background: linear-gradient(180deg, rgba(62,40,18,.96), rgba(27,18,9,.96));
  border: 1px solid rgba(255,196,109,.22);
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(0,0,0,.34);
  padding: 14px;
  z-index: 24;
}
.forgeTitle { font-weight: 900; color: #ffd794; letter-spacing: .02em; }
.forgeSub, .forgeCost { color: rgba(255,232,205,.82); font-size: 12px; margin-top: 6px; }
.forgeActions { display:flex; gap:10px; margin-top:12px; }
.forgeActions button { flex:1; }
@media (max-width: 780px) {
  .forgePrompt {
    left: 12px;
    right: 12px;
    top: calc(env(safe-area-inset-top, 0px) + 84px);
    bottom: auto;
    width: auto;
    max-height: min(42vh, 320px);
    overflow: auto;
  }
  .forgeActions {
    flex-direction: column;
  }
}


.forgeRecipeRow{display:flex;gap:10px;align-items:center;margin-top:10px;}
.forgeCost{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;flex:1;}
.forgeCostLabel{font-size:12px;color:rgba(255,232,205,.92);font-weight:700;min-width:72px;}
.forgeMats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.forgeMat{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);position:relative;box-shadow: inset 0 1px 0 rgba(255,255,255,.06);}
.forgeMat img{width:22px;height:22px;object-fit:contain;pointer-events:none;}
.forgeMatQty{position:absolute;right:3px;bottom:1px;font-size:10px;line-height:1;color:#fff;font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.8);}
.forgeRecipeRow button{flex:0 0 122px;}

@media (max-width: 760px){
  #ui{grid-template-rows:auto 1fr auto auto;}
  .topbar,.bottombar{padding:8px;gap:8px;}
  .badge{padding:6px 10px;font-size:12px;border-radius:11px;}
  .topRight{gap:8px;}
  .panel{padding:8px 10px;border-radius:12px;}
  .miniPanel{min-width:0;}
  .panelTitle{font-size:10px;letter-spacing:.06em;}
  .panelSub,.repSub,.adminText{font-size:10px;line-height:1.25;margin-top:3px;}
  .bar,.repBar{height:8px;}
  .banner{top:56px;padding:8px 10px;font-size:12px;max-width:min(92vw,420px);}
  .tutorialBubble{top:92px;max-width:min(88vw,430px);font-size:12px;padding:10px 12px;z-index:30;}
  .tileHint{bottom:calc(env(safe-area-inset-bottom, 0px) + 224px);font-size:11px;max-width:90vw;text-align:center;}
  .bottombar{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:"deposit" "rep" "inventory" "character";
    align-items:flex-start;
    gap:8px;
    max-height:58svh;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:8px 8px calc(92px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
    touch-action:pan-y;
    scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .bottombar::after{
    content:"";
    display:block;
    height:calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .inventoryWidget,.repWidget{width:100%;min-width:0;max-width:100%;padding:10px;box-sizing:border-box;}
  .inventoryWidget,.repWidget,.depositRow,.characterRow{pointer-events:auto;touch-action:pan-y;}
  .inventoryWidget{overflow-x:hidden;overflow-y:visible;}
  .depositRow,.characterRow{width:100%;}
  .depositRow .depositBtn,.characterRow button{min-width:0;width:100%;display:block;min-height:46px;}
  .inventoryGrid{grid-template-columns:repeat(auto-fit,minmax(66px,1fr));gap:8px;}
  .invSlot{min-height:76px;padding:7px;}
  .invSlot img{width:24px;height:24px;}
  .repTop{gap:6px;}
  .repTitle{font-size:12px;}
  .repLvl{font-size:11px;}
  .invHeader span{font-size:12px;}
  .forgePrompt{top:calc(env(safe-area-inset-top, 0px) + 70px);max-height:min(38vh,300px);padding:12px;z-index:28;}
  .forgeTitle{font-size:14px;}
  .forgeSub{font-size:11px;}
  .forgeRecipeRow{align-items:stretch;}
  .forgeRecipeRow button{flex:0 0 110px;}
  .characterRow{padding-bottom:18px;}
  .inventoryWidget{margin-bottom:0;}
}