/* ===================== REEL — warm paper & deep water ===================== */
:root{
  --paper:#FFF6E3;
  --cream:#FFF3DC;
  --ink:#2C2420;
  --ink2:#6B5D50;
  --coral:#E8734A;
  --gold:#E9B44C;
  --teal:#2E8C96;
  --deep:#123B57;
  --card:#FFF9EC;
  --line:rgba(44,36,32,.14);
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html,body{ height:100%; overflow:hidden; background:var(--deep); }
body{
  font-family:'Nunito',system-ui,sans-serif; color:var(--ink);
  position:fixed; inset:0; touch-action:none; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none; -webkit-font-smoothing:antialiased;
}
.hand{ font-family:'Gochi Hand',cursive; }
a{ color:var(--teal); text-decoration:none; }
#gl{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }

#nogl{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--cream); z-index:50; text-align:center; padding:24px; }
#nogl p{ color:var(--ink2); line-height:1.6; margin-top:12px; }
.wordmark-mini{ font-family:'Caprasimo',serif; font-size:30px; color:var(--ink); }
.fine{ font-size:12px; }

/* ==================== HUD ==================== */
#hud{ position:fixed; inset:0; z-index:20; pointer-events:none; }
#hud button{ pointer-events:auto; }
.chip{
  position:absolute; display:flex; align-items:baseline; gap:4px;
  background:rgba(255,246,227,.92); border:2px solid var(--ink); border-radius:14px;
  padding:6px 12px; box-shadow:0 3px 0 rgba(44,36,32,.25);
  font-weight:800;
}
.chip .ic{ font-size:14px; }
#depthChip{ top:calc(env(safe-area-inset-top,0px) + 12px); left:12px; }
#depthChip b{ font-size:20px; } #depthChip span{ font-size:12px; color:var(--ink2); }
#coinChip{ top:calc(env(safe-area-inset-top,0px) + 12px); left:50%; transform:translateX(-50%); }
#coinChip b{ font-size:17px; }
#bandName{
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 84px); right:14px;
  font-size:18px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.45); opacity:.95;
  transition:opacity .5s; text-align:right;
}
#topRight{ position:absolute; top:calc(env(safe-area-inset-top,0px) + 12px); right:12px; display:flex; gap:8px; }
#topRight button{
  width:44px; height:44px; border-radius:14px; border:2px solid var(--ink);
  background:rgba(255,246,227,.92); font-size:19px; cursor:pointer;
  box-shadow:0 3px 0 rgba(44,36,32,.25); position:relative;
  display:flex; align-items:center; justify-content:center;
}
#topRight button:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(44,36,32,.25); }
#muteBtn.off{ opacity:.5; }
.dot{ position:absolute; top:-3px; right:-3px; width:12px; height:12px; border-radius:50%; background:var(--coral); border:2px solid #fff; }

#hint{
  position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 26px); left:50%; transform:translateX(-50%);
  font-size:20px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.5); white-space:nowrap;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(-6px);} }
@keyframes bitePulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.18);} }

/* AIR — the clock. Pinned top edge so a thumb never covers it. */
#airWrap{
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 64px); left:12px; right:12px; height:14px;
  background:rgba(10,30,40,.35); border:2px solid rgba(255,246,227,.8); border-radius:9px; overflow:hidden;
}
#airFill{ position:absolute; inset:0; width:100%; background:linear-gradient(90deg,#9FE7DC,#4EC9B0); transition:none; }
#airLbl{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  font-size:9px; font-weight:800; letter-spacing:2px; color:#0B3A3A;
}
#airWrap.low{ border-color:#FF8A6B; animation:bitePulse .5s infinite; }
#airWrap.low #airFill{ background:linear-gradient(90deg,#E8734A,#C33); }

/* the bag — what you stand to lose */
#bagRow{
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 86px); left:12px;
  display:flex; gap:5px;
}
.bagPip{
  width:22px; height:22px; border-radius:7px; border:2px solid rgba(255,246,227,.55);
  background:rgba(10,30,40,.3);
}
.bagPip.full{ background:var(--gold); border-color:#fff; box-shadow:0 0 8px rgba(233,180,76,.8); }
.bagPip.pop{ animation:bitePulse .35s; }

#streakChip{ top:calc(env(safe-area-inset-top,0px) + 12px); left:50%; transform:translateX(-50%) translateY(46px); font-size:14px; }
#streakChip b{ margin-left:3px; }

#toastLayer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.toast{
  position:absolute; left:50%; transform:translateX(-50%);
  font-family:'Gochi Hand',cursive; font-size:21px; color:#fff; text-shadow:0 2px 5px rgba(0,0,0,.5);
  white-space:nowrap; animation:toastRise 1.6s ease-out forwards;
}
@keyframes toastRise{ 0%{ opacity:0; transform:translateX(-50%) translateY(8px);} 12%{opacity:1;} 80%{opacity:1;} 100%{ opacity:0; transform:translateX(-50%) translateY(-30px);} }

/* ==================== intro ==================== */
#intro{
  position:fixed; inset:0; z-index:40; display:flex; align-items:flex-start; justify-content:center;
  padding-top:12vh; pointer-events:none;
}
#intro .wm{ text-align:center; pointer-events:auto; }
.wm-word{
  font-family:'Caprasimo',serif; font-size:min(30vw,150px); line-height:.95; color:var(--paper);
  text-shadow:0 5px 0 rgba(44,36,32,.35), 0 12px 32px rgba(0,0,0,.25);
  letter-spacing:2px;
}
.wm-tag{ font-size:min(5.4vw,24px); color:var(--paper); text-shadow:0 2px 8px rgba(0,0,0,.35); margin:6px 0 26px; }
.intro-hint{ margin-top:16px; font-size:13px; font-weight:600; color:rgba(255,255,255,.85); text-shadow:0 1px 4px rgba(0,0,0,.4); }

/* ==================== buttons ==================== */
.big-btn{
  font-family:'Caprasimo',serif; font-size:23px; letter-spacing:1px; color:var(--paper);
  background:var(--coral); border:3px solid var(--ink); border-radius:18px;
  padding:14px 44px; cursor:pointer; box-shadow:0 5px 0 var(--ink);
  transition:transform .05s, box-shadow .05s;
}
.big-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--ink); }
.big-btn.ghost{ background:var(--card); color:var(--ink); }

/* ==================== panels / cards ==================== */
.panel{
  position:fixed; inset:0; z-index:45; display:flex; align-items:center; justify-content:center;
  background:rgba(18,29,43,.55); backdrop-filter:blur(3px); padding:16px; overflow-y:auto;
}
.card{
  width:min(92vw,400px); background:var(--card); border:3px solid var(--ink); border-radius:22px;
  padding:20px 18px; text-align:center; box-shadow:0 8px 0 rgba(44,36,32,.3), 0 24px 60px rgba(0,0,0,.35);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:cardIn .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes cardIn{ 0%{ transform:translateY(30px) scale(.85) rotate(-2deg); opacity:0;} 100%{ transform:none; opacity:1;} }
.card h2{ font-family:'Caprasimo',serif; font-size:29px; }
.card canvas{ width:100%; height:auto; }
.stars{ color:var(--gold); font-size:19px; letter-spacing:3px; }
.r-new{
  font-family:'Caprasimo',serif; color:#fff; background:var(--coral); border:2.5px solid var(--ink);
  padding:3px 14px; border-radius:12px; transform:rotate(-4deg); font-size:16px;
  box-shadow:0 3px 0 var(--ink); margin-bottom:-4px;
}
.r-size{ font-weight:800; color:var(--ink2); font-size:14px; }
.r-size b{ color:var(--coral); }
#rFlavor,#dFlavor{ font-size:19px; line-height:1.35; color:var(--ink); padding:2px 6px; }
.r-coins{ font-weight:800; font-size:17px; }
#rHaul{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.haulChip{
  display:flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:var(--ink2);
  background:#F3E9D2; border:2px solid var(--line); border-radius:11px; padding:3px 9px;
}
.haulChip .st{ color:var(--gold); }
#lostTitle{ color:var(--coral); }
#lostBody{ font-size:19px; line-height:1.35; }

/* sheet (journal/shop) */
.sheet{
  width:min(94vw,440px); background:var(--card); border:3px solid var(--ink); border-radius:22px;
  padding:18px 16px calc(env(safe-area-inset-bottom,0px) + 16px);
  box-shadow:0 8px 0 rgba(44,36,32,.3), 0 24px 60px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:12px; max-height:94vh;
}
.sh-head{ display:flex; align-items:baseline; justify-content:space-between; }
.sh-head h2{ font-family:'Caprasimo',serif; font-size:24px; }
.sh-head .hand{ font-size:18px; color:var(--ink2); }
#jGrid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  overflow-y:auto; padding:2px; -webkit-overflow-scrolling:touch;
}
.jCell{
  aspect-ratio:1; border:2px solid var(--line); border-radius:14px; background:#F3E9D2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  cursor:pointer; overflow:hidden; position:relative;
}
.jCell canvas{ width:86%; height:60%; }
.jCell .n{ font-size:9px; font-weight:800; color:var(--ink2); text-align:center; line-height:1.1; padding:0 2px; }
.jCell.unseen{ opacity:.65; }
.jCell.unseen .n{ color:#B4A68F; }
.jCell .cnt{ position:absolute; top:3px; right:5px; font-size:9px; font-weight:800; color:var(--teal); }
.jCell.golden{ border-color:var(--gold); background:#FBF0D2; }

#shopRows{ display:flex; flex-direction:column; gap:10px; }
.shopRow{
  display:flex; align-items:center; gap:10px; border:2px solid var(--line); border-radius:16px;
  padding:10px 12px; background:#FBF4E4;
}
.shopRow .ic{ font-size:26px; }
.shopRow .info{ flex:1; text-align:left; }
.shopRow .info b{ display:block; font-size:14px; }
.shopRow .info span{ font-size:11.5px; color:var(--ink2); font-weight:600; }
.shopRow button{
  font-family:'Caprasimo',serif; font-size:14px; color:var(--paper); background:var(--teal);
  border:2.5px solid var(--ink); border-radius:12px; padding:8px 12px; cursor:pointer;
  box-shadow:0 3px 0 var(--ink); white-space:nowrap;
}
.shopRow button:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }
.shopRow button:disabled{ opacity:.45; }
.shopRow.max button{ background:#9CB89C; }

.setRow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tog{
  font-weight:800; font-size:13px; letter-spacing:1px; padding:10px; border-radius:12px;
  border:2px solid var(--line); background:#F3E9D2; color:var(--ink2); cursor:pointer;
}
.tog.on{ background:var(--teal); border-color:var(--ink); color:#fff; }
.foot{ text-align:center; font-size:11.5px; font-weight:700; color:var(--ink2); }
.foot a{ color:var(--ink2); }

@media (min-width:760px){
  #jGrid{ grid-template-columns:repeat(5,1fr); }
}