:root{
  --ink:#f9f3e7;
  --deep:#081d24;
  --deep2:#0d2b34;
  --paper:#f5efe5;
  --coral:#d97962;
  --muted:rgba(249,243,231,.72);
  --glass:rgba(7,27,34,.56);
  --glass2:rgba(7,27,34,.78);
  --line:rgba(255,255,255,.22);
  --shadow:0 18px 50px rgba(0,0,0,.28);
  --safe-top:max(18px,env(safe-area-inset-top));
  --safe-bottom:max(18px,env(safe-area-inset-bottom));
}
*{box-sizing:border-box}
html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#06181e;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.scene{position:relative;width:100%;height:100%;overflow:hidden;background:#06181e;isolation:isolate}
.world{position:absolute;inset:0;overflow:hidden;z-index:-3;background:#102f38}
.world picture,.world img{display:block;width:100%;height:100%}
.world img{object-fit:cover;transform:scale(1.002)}
.scene::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,rgba(2,12,16,.22),transparent 26%,transparent 62%,rgba(2,12,16,.68) 100%)}
.scene[data-tone="night"]::after{background:linear-gradient(180deg,rgba(2,9,16,.46),rgba(2,9,16,.08) 42%,rgba(2,9,16,.72))}
.topbar{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:var(--safe-top) clamp(16px,3vw,38px) 12px;z-index:20;background:linear-gradient(180deg,rgba(3,14,18,.66),transparent)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}.brandmark{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#f3eadc;color:#21363c;font-family:Georgia,serif;font-size:11px;letter-spacing:.1em;box-shadow:0 4px 24px rgba(0,0,0,.2)}.brandname{font-family:Georgia,serif;font-size:clamp(14px,1.8vw,22px);font-weight:700;letter-spacing:.12em;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.meta{text-align:center;min-width:0;text-shadow:0 2px 10px rgba(0,0,0,.45)}.meta strong{font-family:Georgia,serif;font-size:clamp(20px,3vw,31px)}.meta span{margin-left:8px;font-size:13px;color:var(--muted);font-weight:700}.utils{display:flex;gap:8px}.iconbtn{width:40px;height:40px;border:1px solid var(--line);border-radius:999px;color:#fff;background:rgba(5,24,30,.44);backdrop-filter:blur(12px);display:grid;place-items:center;font-weight:800}.iconbtn:hover{background:rgba(5,24,30,.68)}
.story{position:absolute;left:clamp(18px,4vw,54px);bottom:calc(var(--safe-bottom) + 30px);width:min(670px,62vw);z-index:5;text-shadow:0 2px 16px rgba(0,0,0,.56)}.story .eyebrow{display:block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#f0aa96;font-weight:900;margin-bottom:8px}.story h1,.story h2{font-family:Georgia,serif;margin:0 0 10px;line-height:1.01;font-weight:500}.story h1{font-size:clamp(48px,8vw,105px)}.story h2{font-size:clamp(29px,4.8vw,58px)}.story p{margin:0;max-width:58ch;font-size:clamp(16px,1.5vw,21px);line-height:1.48;color:#fff}
.action-zone{position:absolute;right:clamp(18px,4vw,54px);bottom:calc(var(--safe-bottom) + 30px);z-index:12;width:min(430px,34vw);display:flex;flex-direction:column;gap:10px;align-items:stretch}.panel{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:var(--shadow);border-radius:24px;padding:18px 18px 16px}.panel.light{background:rgba(247,240,228,.94);color:#142d34;border-color:rgba(255,255,255,.6)}.panel p{margin:0 0 12px;line-height:1.45}.panel h3{font-family:Georgia,serif;font-size:24px;margin:0 0 10px}.hint{font-size:12px;color:var(--muted);line-height:1.4}.light .hint{color:#5b6c70}
.primary,.choice,.quiet{border:0;border-radius:999px;min-height:50px;padding:12px 18px;font-weight:850;transition:.2s ease}.primary{background:#153844;color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:0 8px 24px rgba(0,0,0,.17)}.primary:hover{transform:translateY(-1px);background:#1b4653}.quiet{align-self:flex-end;background:rgba(8,31,38,.52);border:1px solid var(--line);color:white}.choices{display:grid;gap:9px}.choice{background:rgba(245,239,229,.96);color:#17333b;text-align:left;border:1px solid rgba(255,255,255,.75);padding:14px 16px}.choice b{display:block;font-size:15px}.choice small{display:block;font-size:12px;color:#627074;margin-top:3px;line-height:1.35}.choice:hover{transform:translateY(-1px);background:#fff}
.phone{position:absolute;right:clamp(18px,4vw,56px);bottom:calc(var(--safe-bottom) + 28px);z-index:14;width:min(390px,34vw);border-radius:28px;background:rgba(7,24,30,.9);border:1px solid rgba(255,255,255,.2);box-shadow:var(--shadow);padding:14px;backdrop-filter:blur(18px)}.phone::before{content:"";display:block;width:46px;height:4px;border-radius:4px;background:rgba(255,255,255,.2);margin:0 auto 12px}.phone-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#f3baa9;font-weight:900;letter-spacing:.08em}.phone-msg{background:rgba(255,255,255,.08);border-radius:16px 16px 16px 5px;padding:12px 13px;margin:9px 0 0;line-height:1.45}.phone .choices{margin-top:10px}.phone .choice{min-height:44px}
.modal-backdrop{position:absolute;inset:0;z-index:50;background:rgba(2,10,13,.48);display:grid;place-items:center;padding:20px}.modal{width:min(620px,100%);max-height:min(78vh,760px);overflow:auto;border-radius:28px;background:rgba(246,239,228,.97);color:#163039;padding:22px;box-shadow:0 28px 90px rgba(0,0,0,.45)}.modal header{display:flex;justify-content:space-between;gap:12px;align-items:center}.modal h2{font-family:Georgia,serif;margin:0;font-size:29px}.close{border:0;border-radius:999px;background:#e6ddd0;color:#18333a;width:38px;height:38px}.wallet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}.wallet-card{border-radius:18px;background:#fff;padding:14px}.wallet-card small{display:block;color:#6f7778}.wallet-card strong{display:block;font-size:24px;margin-top:4px}.tiplist{display:grid;gap:10px;margin-top:16px}.tip{border-radius:18px;background:#fff;padding:13px 14px}.tip b{display:block}.tip span{font-size:13px;color:#647174;line-height:1.4}
.day-card{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:linear-gradient(135deg,#092d38,#0e4856);padding:30px}.day-card .inner{text-align:center;max-width:680px}.day-card small{letter-spacing:.24em;color:#efab97;font-weight:900}.day-card h2{font-family:Georgia,serif;font-size:clamp(56px,11vw,122px);margin:10px 0}.day-card p{font-size:18px;line-height:1.5;color:rgba(255,255,255,.82)}
.booking{display:grid;gap:12px}.ticket{background:#f5efe4;color:#15333b;border-radius:22px;padding:18px;box-shadow:var(--shadow)}.ticket .route{font-family:Georgia,serif;font-size:28px;display:flex;justify-content:space-between;align-items:center;gap:12px}.ticket .route i{font-style:normal;color:#cf765f}.ticket dl{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px;margin:14px 0 0}.ticket dt{font-size:11px;color:#7d8585;text-transform:uppercase;letter-spacing:.12em}.ticket dd{margin:2px 0 0;font-weight:800}
.pack-stage{position:absolute;left:50%;bottom:calc(var(--safe-bottom) + 26px);transform:translateX(-50%);z-index:9;width:min(900px,88vw);display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:end}.suitcase-card{position:relative;border-radius:26px;background:rgba(7,28,34,.42);border:1px solid var(--line);backdrop-filter:blur(14px);padding:12px}.suitcase-card img{display:block;width:100%;height:min(46vh,460px);object-fit:contain}.pack-items{display:grid;gap:9px}.pack-item{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:10px;padding:10px;border-radius:16px;background:rgba(247,240,230,.95);border:0;color:#16313a;text-align:left}.pack-item img{width:58px;height:58px;object-fit:cover;border-radius:12px}.pack-item.done{opacity:.55}.pack-item span:last-child{font-weight:900}
.camera-scene .world img{width:112%;height:112%;max-width:none;max-height:none;transform:translate3d(var(--pan-x,0),var(--pan-y,0),0) scale(1.03);transition:transform .08s linear}.camera-reticle{position:absolute;left:50%;top:50%;width:62px;height:62px;border:1px solid rgba(255,255,255,.72);border-radius:50%;transform:translate(-50%,-50%);z-index:7;box-shadow:0 0 0 999px rgba(4,18,23,.08)}.camera-help{position:absolute;left:50%;bottom:calc(var(--safe-bottom) + 32px);transform:translateX(-50%);z-index:11;background:rgba(6,25,31,.68);border:1px solid var(--line);border-radius:999px;padding:11px 16px;font-size:13px;backdrop-filter:blur(15px)}.found-tag{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);z-index:9;background:#f5eee2;color:#143039;border-radius:999px;padding:10px 14px;font-weight:900;box-shadow:var(--shadow)}
.route-progress{height:4px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden;margin-top:12px}.route-progress i{display:block;height:100%;background:#efaa96;animation:travel 6s linear forwards}@keyframes travel{from{width:8%}to{width:100%}}
.payment-terminal{position:absolute;right:clamp(18px,4vw,54px);bottom:calc(var(--safe-bottom) + 30px);z-index:12;width:min(430px,36vw);background:rgba(7,26,32,.88);border:1px solid var(--line);border-radius:26px;padding:18px;backdrop-filter:blur(18px);box-shadow:var(--shadow)}.amount{font-family:Georgia,serif;font-size:42px}.pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.pay-method{border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;border-radius:16px;padding:12px 8px;min-height:78px;font-weight:800}.pay-method small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.fade-in{animation:fade .45s ease both}@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.notice{position:absolute;top:88px;left:50%;transform:translateX(-50%);z-index:24;background:rgba(245,239,229,.95);color:#133139;border-radius:999px;padding:9px 14px;font-size:12px;font-weight:800;box-shadow:var(--shadow)}
@media (pointer:coarse), (max-width:840px){
  .topbar{grid-template-columns:1fr auto;padding:var(--safe-top) 14px 10px}.brandname{font-size:14px}.brandmark{width:38px;height:38px}.meta{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--safe-top) + 62px);width:70%;}.meta strong{font-size:23px}.meta span{font-size:11px}.utils{gap:6px}.iconbtn{width:36px;height:36px}.topbar .brand{max-width:150px}
  .story{left:16px;right:16px;bottom:calc(var(--safe-bottom) + 94px);width:auto}.story h1{font-size:54px}.story h2{font-size:34px}.story p{font-size:16px;max-width:36ch}.story .eyebrow{font-size:10px}
  .action-zone{left:14px;right:14px;bottom:var(--safe-bottom);width:auto}.panel{border-radius:22px;padding:14px}.primary,.quiet,.choice{min-height:48px}.quiet{width:100%}
  .phone{left:14px;right:14px;bottom:var(--safe-bottom);width:auto;border-radius:24px;padding:13px}.phone .choice{padding:12px 13px}
  .pack-stage{left:14px;right:14px;bottom:var(--safe-bottom);transform:none;width:auto;grid-template-columns:1fr;gap:10px}.suitcase-card img{height:32vh}.pack-items{grid-template-columns:1fr}.pack-item{grid-template-columns:48px 1fr auto;padding:8px}.pack-item img{width:48px;height:48px}
  .wallet-grid{grid-template-columns:1fr 1fr}.modal{padding:18px;border-radius:24px;max-height:82vh}
  .camera-help{bottom:calc(var(--safe-bottom) + 16px);max-width:84%;text-align:center}.camera-reticle{top:48%}
  .payment-terminal{left:14px;right:14px;bottom:var(--safe-bottom);width:auto;border-radius:24px;padding:15px}.pay-methods{grid-template-columns:repeat(3,1fr)}.pay-method{font-size:12px;padding:10px 6px}
  .scene.mobile-crop-left .world img{object-position:35% center}.scene.mobile-crop-right .world img{object-position:68% center}.scene.mobile-crop-center .world img{object-position:50% center}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}