:root{
  --parchment:#fdfaf4; --card:#FAF4E6; --ink:#2a1a0a; --rust:#8C3A0E; --gold:#ca9b52; --line:#c9b384;
  --good:#4a7c59; --fd:'Cormorant Garamond',Georgia,serif; --fb:'Libre Baskerville',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden}
body{background:#9fc1e0;font-family:var(--fb);color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none}
#game{width:100%;height:100%;display:block;outline:none}
.hidden{display:none!important}
button{font-family:inherit}
#haze{position:fixed;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at center,rgba(220,228,240,0) 40%,rgba(210,222,238,.9) 100%);opacity:0;transition:opacity .4s}

/* ---- panels ---- */
.panel{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;
  width:min(580px,calc(100vw - 32px));padding:28px 30px 26px;text-align:center;
  background:rgba(253,250,244,.96);border:1px solid var(--gold);border-radius:14px;
  box-shadow:0 18px 60px rgba(42,26,10,.28);
}
.panel .eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--rust);opacity:.6;font-weight:700}
.panel h1{font-family:var(--fd);font-size:clamp(34px,6vw,52px);color:var(--rust);line-height:1;margin:8px 0 12px;font-weight:600}
.panel p{font-size:15px;line-height:1.7;color:#4a3524;margin:0 auto 18px;max-width:48ch}
.panel p b{color:var(--rust)}
.panel .big{
  font-family:var(--fd);font-size:22px;font-weight:700;letter-spacing:.03em;padding:12px 40px;border-radius:999px;
  border:2px solid var(--rust);background:var(--rust);color:#fff8ee;cursor:pointer;transition:background .15s,border-color .15s
}
.panel .big:hover{background:var(--gold);border-color:var(--gold)}
.bar{height:6px;width:100%;background:rgba(140,58,14,.12);border-radius:999px;overflow:hidden;margin-top:14px}
#barFill{width:4%;height:100%;background:var(--gold);transition:width .3s ease}
.small{font-size:12px;color:#7a5c3c;margin-top:14px}
.small a{color:var(--rust)}

/* ---- hud ---- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
.card{
  position:absolute;padding:10px 14px;border-radius:12px;background:rgba(253,250,244,.86);
  border:1px solid rgba(202,155,82,.6);backdrop-filter:blur(6px);box-shadow:0 4px 18px rgba(42,26,10,.12)
}
#placeCard{top:16px;left:16px;min-width:230px;max-width:min(420px,calc(100vw - 32px))}
#placeCard .eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);opacity:.6;font-weight:700}
#placeName{font-family:var(--fd);font-size:26px;font-weight:700;color:var(--rust);line-height:1.1;margin-top:2px;min-height:1em}
#status{font-size:12px;color:#5a3d22;margin-top:5px}
#altitude{font-size:12px;color:#7a5c3c;font-variant-numeric:tabular-nums}
#found{top:16px;right:16px;font-size:12px;font-weight:700;color:var(--rust);border-radius:999px;padding:8px 14px}
#compass{top:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 14px;white-space:nowrap}
#compassArrow{width:34px;height:34px;flex:none;transition:transform .12s linear}
#compassArrow svg{width:100%;height:100%;display:block}
#compassName{font-family:var(--fd);font-size:17px;font-weight:700;color:var(--rust);line-height:1.1;max-width:220px}
#compassDist{font-size:11px;color:#7a5c3c}
#miniMapWrap{right:16px;bottom:16px;padding:6px;border-radius:12px}
#miniMap{display:block;width:210px;height:210px;border-radius:8px;background:#1c3452}
.mapLabel{text-align:center;font-size:10px;color:#7a5c3c;padding-top:4px;letter-spacing:.06em}
#toast{
  left:50%;bottom:34px;transform:translate(-50%,20px);width:min(560px,calc(100vw - 32px));padding:16px 20px;
  border:1.5px solid var(--gold);opacity:0;transition:opacity .35s,transform .35s;pointer-events:none
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast .eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
#toastTitle{font-family:var(--fd);font-size:26px;font-weight:700;color:var(--rust);line-height:1.1;margin:3px 0 6px}
#toastText{font-size:13.5px;line-height:1.6;color:#3a2a1c;max-height:7.5em;overflow:hidden}
#toastText img{float:right;width:150px;height:100px;object-fit:cover;border-radius:8px;margin:0 0 6px 12px;border:1px solid rgba(202,155,82,.5)}
#zoneHint{left:50%;top:72px;transform:translateX(-50%);font-family:var(--fd);font-size:19px;font-weight:700;color:var(--rust);padding:7px 16px;white-space:nowrap}
#zoneHint.dive{color:#fff8ee;background:rgba(140,58,14,.9);border-color:var(--rust)}
#places{top:120px;right:16px;width:260px;max-height:calc(100vh - 380px);overflow:auto;pointer-events:auto}
#places h3{font-family:var(--fd);font-size:20px;color:var(--rust);margin-bottom:6px}
#placesList{list-style:none}
#placesList li{font-size:12.5px;padding:4px 0;border-bottom:1px solid rgba(202,155,82,.3);color:#5a3d22;display:flex;gap:8px}
#placesList li.done{color:var(--good);font-weight:700}
#placesList .tick{width:14px;display:inline-block;text-align:center;color:var(--good)}
#placesList .st{margin-left:auto;opacity:.6;font-size:11px}
.iconrow{position:absolute;left:16px;bottom:16px;display:flex;gap:8px;pointer-events:auto}
.iconrow button{
  width:44px;height:44px;border-radius:999px;border:1px solid rgba(202,155,82,.7);background:rgba(253,250,244,.9);
  font-size:18px;cursor:pointer;color:var(--rust);box-shadow:0 3px 12px rgba(42,26,10,.12)
}
.iconrow button:hover{background:#f3e6cf}

/* ---- big map ---- */
#bigMap{position:fixed;inset:0;z-index:25;background:rgba(20,26,40,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
#bigMapCanvas{max-width:calc(100vw - 40px);max-height:calc(100vh - 70px);width:auto;height:auto;border-radius:12px;border:1px solid var(--gold);box-shadow:0 20px 60px rgba(0,0,0,.5);cursor:crosshair}
.bigMapLabel{font-size:12px;color:#f3e6cf;letter-spacing:.06em}

/* ---- help overlay ---- */
#help{z-index:40}
#help table{margin:6px auto 12px;border-collapse:collapse;font-size:14px}
#help td{padding:5px 12px;text-align:left;color:#3a2a1c}
#help td:first-child{font-weight:700;color:var(--rust);white-space:nowrap}
#help kbd{font-family:inherit;background:#f3e6cf;border:1px solid var(--line);border-radius:5px;padding:1px 7px;font-size:12px}

/* ---- touch controls ---- */
#touch{position:fixed;inset:0;z-index:14;pointer-events:none}
#touch .dpad{position:absolute;left:18px;bottom:74px;width:170px;height:170px;pointer-events:auto}
#touch .dpad button{position:absolute;width:56px;height:56px;padding:0;border-radius:14px;font-size:20px;border:1px solid rgba(202,155,82,.8);background:rgba(253,250,244,.8);color:var(--rust)}
#touch .dpad button.on{background:var(--gold);color:#fff}
#touch .up{left:57px;top:0}.left{left:0;top:57px}.down{left:57px;top:114px}.right{left:114px;top:57px}
#touch .flybtns{position:absolute;right:18px;bottom:240px;display:flex;flex-direction:column;gap:10px;pointer-events:auto}
#touch .flybtns button{width:96px;height:64px;border-radius:16px;font-family:var(--fd);font-size:20px;font-weight:700;border:1px solid rgba(202,155,82,.8);background:rgba(253,250,244,.85);color:var(--rust)}
#touch .flybtns button.on{background:var(--rust);color:#fff8ee}

#attribution{position:fixed;right:10px;bottom:2px;z-index:12;font-size:9px;color:#5a3d22;opacity:.65;pointer-events:auto}
#attribution a{color:inherit}

@media (max-width:720px){
  #placeCard{min-width:0;max-width:56vw}
  #placeName{font-size:19px}
  #compass{top:64px;left:50%}
  #compassName{font-size:14px;max-width:130px}
  #miniMap{width:140px;height:140px}
  #miniMapWrap{bottom:150px}
  #places{width:200px}
  .iconrow{bottom:12px}
  #toast{bottom:150px}
  .panel{padding:20px 18px}
}