: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)}
.panel .link{margin-top:12px;background:none;border:none;color:var(--rust);text-decoration:underline;font-size:13px;cursor:pointer;opacity:.8}
.panel .link:hover{opacity:1}
.settings{margin:14px auto 6px;max-width:430px;text-align:left;font-size:14px;color:#4a3524}
.settings .eyebrow{text-align:center;margin-bottom:4px}
.settings label{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid rgba(140,58,14,.12)}
.settings label b{color:var(--rust);font-weight:600;margin-left:6px}
.settings input[type=range]{width:150px;accent-color:var(--rust)}
.settings input[type=checkbox]{width:18px;height:18px;accent-color:var(--rust)}
.settings select{font:inherit;font-size:13px;padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:#fff;color:#4a3524}
.settings .small{text-align:center;margin-top:8px}
.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)}
#flash{left:50%;top:40%;transform:translate(-50%,-50%) scale(.9);font-family:var(--fd);font-size:30px;font-weight:700;color:#fff8ee;background:rgba(42,26,10,.72);border-color:var(--gold);padding:10px 26px;white-space:nowrap;opacity:0;transition:opacity .25s,transform .25s}
#flash.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#combo{position:absolute;left:50%;top:60%;transform:translateX(-50%);font-family:var(--fd);font-weight:700;color:#ffd36a;text-shadow:0 0 12px rgba(255,120,20,.9),0 2px 4px rgba(0,0,0,.5);letter-spacing:.04em;pointer-events:none;transition:font-size .15s}
#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}

#speed{font-size:12px;color:#7a5c3c;font-variant-numeric:tabular-nums}
#quizSlot{position:absolute;top:16px;right:16px;pointer-events:none}

/* ---- THE PICKER: the two-button world chooser (phoenix-flight vibe: parchment, Cormorant, big warm cards) ---- */
#picker{position:fixed;inset:0;z-index:60;overflow:auto;background:
  radial-gradient(ellipse at 50% -10%, #fff6e2 0%, rgba(255,246,226,0) 60%), var(--parchment);
  display:flex;align-items:center;justify-content:center;padding:36px 18px}
.pickerInner{max-width:940px;width:100%;text-align:center}
#picker .eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--rust);opacity:.6;font-weight:700}
#picker h1{font-family:var(--fd);font-size:clamp(46px,8vw,78px);color:var(--rust);font-weight:600;line-height:1;margin:10px 0 8px}
#picker .sub{font-style:italic;color:#7a5c3c;font-size:16px;margin-bottom:30px}
.worldCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}
button.worldCard{display:block;width:100%;text-align:left;padding:0;cursor:pointer;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 10px 34px rgba(140,58,14,.12);transition:transform .16s,box-shadow .16s}
button.worldCard:hover{transform:translateY(-4px);box-shadow:0 18px 46px rgba(140,58,14,.22);border-color:var(--gold)}
button.worldCard .img{height:210px;background-size:cover;background-position:center;
  background-color:#2a4460;border-bottom:1px solid var(--line);position:relative}
button.worldCard .img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,240,210,.18) 0%,rgba(140,58,14,.10) 100%)}
button.worldCard .body{padding:18px 22px 22px}
button.worldCard h2{font-family:var(--fd);font-size:32px;color:var(--rust);font-weight:700;line-height:1.05;margin-bottom:6px}
button.worldCard p{font-size:14px;line-height:1.6;color:#4a3524;margin:0}
button.worldCard .go{display:inline-block;margin-top:12px;font-weight:700;color:var(--rust);font-size:14px}
button.worldCard[disabled]{opacity:.5;cursor:default;transform:none;box-shadow:none}
#picker .keys{margin:32px auto 0;max-width:660px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px 20px;font-size:13.5px;line-height:1.9;color:#4a3524;text-align:left}
#picker .keys b{color:var(--rust)}
#picker kbd{font-family:inherit;background:#f3e6cf;border:1px solid var(--line);border-radius:5px;padding:1px 7px;font-size:12px}
#pickerNote{margin-top:18px;font-size:12.5px;color:#a06a3a}

/* ---- 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}
}