/* ============================================================
   08 · THE WORK — DRAGON QUEST
   A side-scrolling flight through the portfolio. Scrolling the
   page flies the dragon along an ember line; every project is a
   treasure on that line, and a game-style window pops open with
   the real site inside it (a full-length screenshot you can
   scroll), what it was built with, and why.
   ------------------------------------------------------------
   Two modes, one set of content:
   · .q-log      the plain list — no JS, reduced motion, list view
   · .q-stage    the flight — built by quest.js around the list
   ------------------------------------------------------------
   Index:  section shell · intro · track + stage · sky + layers
           ember line + nodes + signs · HUD · window · quest item
           (shared) · list view · mobile · reduced motion
   ============================================================ */

.quest{
  --q-gold:#ffcf4a;
  --q-gold-2:#ffb020;
  --q-line:#ff7a2a;
  --q-panel:#121018;
  --q-panel-2:#1b1824;
  --q-edge:#ffb020;
  --q-ink:#f6f3ed;
  --q-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  background:var(--ink);
  color:var(--paper);
  position:relative;
}

/* ---------------- intro ---------------- */
.quest-intro{padding-top:100px;padding-bottom:40px;}
.quest-intro .lead{color:#bcbab4;}
.quest-start{margin-top:26px;}
.quest .btn-ghost{border-color:rgba(246,243,237,.32);color:var(--paper);}
.quest button.btn{background-color:transparent;font-family:inherit;cursor:pointer;}
.quest button.btn-primary{background-color:var(--flame);}
.quest:not(.is-flying) .quest-start [data-quest="list"]{display:none;}

/* ---------------- track + sticky stage ---------------- */
.q-track{position:relative;display:none;}             /* JS turns it on */
.quest.is-flying .q-track{display:block;}
.q-stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  isolation:isolate;
  --sky-a:#0b2420;--sky-b:#1d4a3b;--far:#173d33;--mid:#0f2c25;--near:#0a1f1a;
  background:linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 78%);
}
.q-stage > *{position:absolute;}

/* ---------------- sky + parallax ---------------- */
.q-stars{inset:0;opacity:.7;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent 60%),
    radial-gradient(1px 1px at 120px 80px,#ffe9b0,transparent 60%),
    radial-gradient(1.2px 1.2px at 240px 20px,#fff,transparent 60%),
    radial-gradient(1px 1px at 330px 130px,#fff,transparent 60%),
    radial-gradient(1.6px 1.6px at 410px 60px,#ffd27a,transparent 60%),
    radial-gradient(1px 1px at 520px 160px,#fff,transparent 60%);
  background-size:560px 220px;background-repeat:repeat-x;height:46%;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent);}
.q-moon{width:110px;height:110px;border-radius:50%;top:15%;right:9%;
  background:radial-gradient(circle at 38% 36%,#fff6dc,#ffd98a 55%,#f0a640 100%);
  box-shadow:0 0 60px 18px rgba(255,190,90,.25);opacity:.85;}
.q-layer{top:0;left:0;height:100%;will-change:transform;}
.q-layer svg{display:block;height:100%;}
.q-far   path{fill:var(--far);}
.q-mid   .lm, .q-mid path{fill:var(--mid);}
.q-near  path{fill:var(--near);}
.q-mid .smoke{fill:rgba(255,255,255,.08);animation:q-smoke 6s ease-in-out infinite;}
.q-mid .win-glow{fill:#ffcf4a;opacity:.75;}
.q-mid .flag{fill:var(--flame);}
.q-mid .roof{fill:var(--mid);}
.q-mid .mast{stroke:rgba(236,240,250,.62);stroke-linecap:round;}
.q-mid .mast--back{stroke:rgba(236,240,250,.3);}
.q-mid .cable{stroke:rgba(236,240,250,.28);}
.q-mid .rib{stroke:rgba(236,240,250,.16);}
.q-mid .win-glow.dim{opacity:.4;}
.q-mid .stadium{fill:var(--mid);filter:brightness(1.25);}
.q-mid .rim{fill:none;stroke:rgba(255,214,120,.55);}
.q-mid .bloom{fill:rgba(255,236,190,.07);}
@keyframes q-smoke{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-14px);opacity:1}}

.q-embers{inset:0;pointer-events:none;}
.q-embers i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;
  background:#ffb648;box-shadow:0 0 8px 2px rgba(255,140,40,.6);opacity:0;
  animation:q-ember 9s linear infinite;}
@keyframes q-ember{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}100%{transform:translate(40px,-105vh);opacity:0}}

/* ---------------- world: ember line, nodes, signs ---------------- */
.q-world{top:0;left:0;height:100%;will-change:transform;}
.q-path{position:absolute;top:0;left:0;overflow:visible;}
.q-path .rail{fill:none;stroke:rgba(255,176,32,.28);stroke-width:3;stroke-dasharray:2 12;stroke-linecap:round;}
.q-path .lit{fill:none;stroke:var(--q-line);stroke-width:4;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(255,110,30,.9));}

.q-node{
  position:absolute;width:64px;height:64px;margin:-58px 0 0 -32px;padding:0;border:0;background:none;
  cursor:pointer;color:var(--q-ink);font:inherit;
}
.q-node .chest{display:block;width:64px;height:56px;transition:transform .3s cubic-bezier(.3,1.6,.5,1);}
.q-node:hover .chest,.q-node:focus-visible .chest{transform:translateY(-4px) scale(1.06);}
.q-node .lid{transform-origin:8px 22px;transition:transform .45s cubic-bezier(.3,1.6,.5,1);}
.q-node.is-open .lid{transform:rotate(-38deg) translate(-2px,-4px);}
.q-node .glow{opacity:0;transition:opacity .4s;}
.q-node.is-open .glow{opacity:1;}
.q-node.is-found .gem{fill:var(--q-gold);}
.q-node .lbl{
  position:absolute;top:66px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font:700 11px/1.2 var(--q-mono);letter-spacing:.08em;text-transform:uppercase;
  padding:4px 7px;background:rgba(10,10,12,.72);border:1px solid rgba(255,176,32,.35);color:#ffe2a6;
}
.q-node:focus-visible{outline:none;}
.q-node:focus-visible .lbl{outline:2px solid var(--q-gold);outline-offset:2px;}
.q-node--locked .chest{filter:saturate(.4) brightness(.8);}
.q-node--castle{width:120px;height:120px;margin:-112px 0 0 -60px;}
.q-node--castle .chest{width:120px;height:110px;}

.q-sign{position:absolute;transform:translate(-50%,-100%);text-align:center;pointer-events:none;}
.q-sign .board{
  display:block;padding:12px 18px 13px;background:#3a2414;color:#ffe9c4;
  border:3px solid #1d1209;box-shadow:inset 0 0 0 2px #6b4223,0 8px 24px rgba(0,0,0,.45);
  font:800 clamp(15px,1.6vw,21px)/1.15 var(--sans);letter-spacing:-.01em;max-width:260px;
}
.q-sign .board small{display:block;font:700 11px/1 var(--q-mono);letter-spacing:.16em;color:var(--q-gold);margin-bottom:7px;}
.q-sign .post{display:block;width:10px;height:70px;margin:0 auto;background:#2a190d;border:2px solid #1d1209;border-top:0;}

/* coins */
.q-coin{position:absolute;width:14px;height:14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 35%,#fff3b8,#ffcf4a 45%,#c98a12);
  box-shadow:0 0 10px rgba(255,200,60,.7);animation:q-coin 1.1s cubic-bezier(.2,.8,.3,1) forwards;}
@keyframes q-coin{0%{transform:translate(0,0) scale(.4);opacity:1}
  70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}
.q-plus{position:absolute;pointer-events:none;font:800 13px/1 var(--q-mono);color:var(--q-gold);
  letter-spacing:.08em;text-shadow:0 2px 0 #000;animation:q-plus 1.3s ease-out forwards;white-space:nowrap;}
@keyframes q-plus{0%{transform:translate(-50%,0);opacity:0}15%{opacity:1}100%{transform:translate(-50%,-56px);opacity:0}}

/* dragon canvases fill the stage, under the HUD and window */
.q-dragon-3d,.q-fire{inset:0;width:100%;height:100%;pointer-events:none;}
.q-fire{z-index:2;}
.q-dragon-3d{z-index:3;filter:drop-shadow(0 0 22px rgba(255,120,40,.35));}

/* ---------------- HUD ---------------- */
.q-hud{
  z-index:6;left:0;right:0;top:74px;padding:0 3vw;display:flex;align-items:center;gap:18px;
  font:700 12px/1 var(--q-mono);letter-spacing:.12em;text-transform:uppercase;color:#ffe2a6;pointer-events:none;
}
.q-hud > *{pointer-events:auto;}
.q-hud .world{
  padding:9px 12px;background:rgba(10,10,12,.62);border:2px solid rgba(255,176,32,.55);
  box-shadow:0 0 0 2px rgba(10,10,12,.62);white-space:nowrap;
}
.q-hud .world b{color:#fff;}
.q-xp{flex:1;height:14px;max-width:420px;background:rgba(10,10,12,.62);border:2px solid rgba(255,176,32,.55);position:relative;}
.q-xp i{position:absolute;inset:2px auto 2px 2px;width:0;background:linear-gradient(90deg,var(--flame),var(--q-gold));
  box-shadow:0 0 10px rgba(255,120,40,.7);}
.q-hud .loot{margin-left:auto;padding:9px 12px;background:rgba(10,10,12,.62);border:2px solid rgba(255,176,32,.55);white-space:nowrap;}
.q-hud .loot b{color:var(--q-gold);}
.q-hud button{
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:#ffe2a6;cursor:pointer;
  padding:9px 12px;background:rgba(10,10,12,.62);border:2px solid rgba(255,176,32,.55);
}
.q-hud button:hover,.q-hud button:focus-visible{background:var(--q-gold-2);color:#1a1000;outline:none;}
/* left-hand rail: go back up / go down */
.q-rail{z-index:6;left:3vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;}
.q-rail button{
  display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;
  font:800 12px/1 var(--q-mono);letter-spacing:.12em;text-transform:uppercase;
  padding:11px 13px;color:#ffe2a6;background:rgba(10,10,12,.72);border:2px solid rgba(255,176,32,.6);
  box-shadow:3px 3px 0 #000;transition:transform .15s,background .15s;
}
.q-rail button span{color:var(--flame);font-size:11px;}
.q-rail button:hover,.q-rail button:focus-visible{background:var(--q-gold-2);color:#1a1000;outline:none;transform:translate(-1px,-1px);}
.q-rail button:hover span,.q-rail button:focus-visible span{color:#1a1000;}

.q-help{
  z-index:6;left:50%;bottom:20px;transform:translateX(-50%);white-space:nowrap;
  font:800 13px/1.3 var(--q-mono);letter-spacing:.16em;text-transform:uppercase;
  padding:9px 14px;background:rgba(10,10,12,.62);border:2px solid rgba(255,176,32,.45);
  color:#ffe2a6;animation:q-blink 1.6s steps(2) infinite;
}
@keyframes q-blink{50%{opacity:.35}}
.q-stage.has-moved .q-help{animation:none;opacity:0;transition:opacity .4s;}

.q-map{z-index:6;right:3vw;bottom:18px;display:flex;gap:6px;}
.q-map button{
  width:auto;padding:7px 9px;cursor:pointer;font:700 11px/1 var(--q-mono);letter-spacing:.1em;
  color:#ffe2a6;background:rgba(10,10,12,.62);border:2px solid rgba(255,176,32,.4);
}
.q-map button[aria-current="true"]{background:var(--q-gold-2);color:#1a1000;border-color:var(--q-gold);}
.q-map button:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* ---------------- the pop-up window ---------------- */
.q-win{
  z-index:5;top:126px;bottom:27%;left:37%;right:3vw;
  display:flex;flex-direction:column;
  background:var(--q-panel);color:var(--q-ink);
  border:3px solid var(--q-edge);
  box-shadow:0 0 0 3px #000,0 0 0 6px rgba(255,176,32,.35),0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(255,120,30,.18);
  opacity:0;visibility:hidden;transform:scale(.08);
  transition:transform .45s cubic-bezier(.2,1.3,.4,1),opacity .2s,visibility 0s .45s;
}
.q-win.is-open{opacity:1;visibility:visible;transform:none;transition:transform .5s cubic-bezier(.2,1.3,.4,1),opacity .15s,visibility 0s;}
.q-win-bar{
  flex:none;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;
  background:repeating-linear-gradient(90deg,#2a1d0a 0 6px,#33230c 6px 12px);
  border-bottom:3px solid var(--q-edge);
  font:800 12px/1 var(--q-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--q-gold);
}
.q-win-bar .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.q-win-bar button{
  flex:none;width:30px;height:28px;cursor:pointer;font:800 14px/1 var(--q-mono);
  color:#1a1000;background:var(--q-gold);border:2px solid #000;box-shadow:inset -2px -2px 0 rgba(0,0,0,.25);
}
.q-win-bar button:hover,.q-win-bar button:focus-visible{background:#fff;outline:none;}
.q-win-in{flex:1;min-height:0;display:flex;}
.q-win-in .qi{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,1fr);margin:0;border:0;background:none;}
.q-win-in .qi-screens{min-height:0;height:100%;padding:16px 0 16px 16px;}
.q-win-in .qi-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 20px 18px 22px;}
.q-win-in .qi-browser{height:100%;}
.q-win-in .qi-phone{display:block;}
.q-win.is-open .qi-title{animation:q-type .5s steps(18) both .25s;}
@keyframes q-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.q-win .qi-loot li{animation:q-pop .35s cubic-bezier(.3,1.7,.5,1) both;}
.q-win .qi-loot li:nth-child(1){animation-delay:.35s}.q-win .qi-loot li:nth-child(2){animation-delay:.42s}
.q-win .qi-loot li:nth-child(3){animation-delay:.49s}.q-win .qi-loot li:nth-child(4){animation-delay:.56s}
.q-win .qi-loot li:nth-child(5){animation-delay:.63s}.q-win .qi-loot li:nth-child(6){animation-delay:.7s}
@keyframes q-pop{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
.q-scrollhint{
  position:absolute;left:28px;bottom:26px;z-index:2;pointer-events:none;
  font:800 11px/1 var(--q-mono);letter-spacing:.12em;text-transform:uppercase;
  padding:7px 9px;background:var(--q-gold);color:#1a1000;border:2px solid #000;
  animation:q-bob 1.2s ease-in-out infinite;transition:opacity .3s;
}
.q-scrollhint.gone{opacity:0;}
@keyframes q-bob{50%{transform:translateY(-4px)}}

/* ---------------- a quest item (shared by list + window) ---------------- */
.qi{position:relative;}
.qi-screens{position:relative;}
.qi-browser{
  display:flex;flex-direction:column;background:#fff;border:2px solid #000;
  box-shadow:0 0 0 2px rgba(255,176,32,.45);overflow:hidden;
}
.qi-bar{flex:none;display:flex;align-items:center;gap:6px;padding:8px 10px;background:#e9e6df;border-bottom:1px solid #cfcac0;}
.qi-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57;}
.qi-bar i:nth-child(2){background:#febc2e;}.qi-bar i:nth-child(3){background:#28c840;}
.qi-bar span{
  flex:1;margin-left:8px;padding:4px 10px;border-radius:6px;background:#fff;color:#56534d;
  font:500 12px/1.2 var(--q-mono);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.qi-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:#f4f2ee;
  scrollbar-width:thin;scrollbar-color:var(--q-gold-2) #e9e6df;}
.qi-scroll img{display:block;width:100%;height:auto;}
.qi-scroll:focus-visible{outline:3px solid var(--q-gold);outline-offset:-3px;}
.qi-phone{
  display:none;position:absolute;right:-14px;bottom:4px;width:21%;min-width:110px;aspect-ratio:9/19;
  padding:7px;background:#0c0c0e;border:2px solid #333;border-radius:22px;
  box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 2px rgba(255,176,32,.45);
}
.qi-phone .qi-scroll{height:100%;border-radius:15px;}

.qi-kicker{font:700 11px/1.4 var(--q-mono);letter-spacing:.14em;text-transform:uppercase;color:#d8c9a4;margin:0 0 10px;}
.qi-num{display:inline-block;padding:3px 6px;margin-right:6px;background:var(--q-gold);color:#1a1000;}
.qi-title{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0 0 12px;color:#fff;}
.qi-status{display:inline-block;vertical-align:5px;margin-left:8px;padding:3px 7px;border:2px solid var(--q-gold);
  font:800 10px/1 var(--q-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--q-gold);}
.qi-quest{font-size:15.5px;line-height:1.5;color:#e9e5dc;margin:0 0 12px;}
.qi-quest b{display:block;font:800 11px/1 var(--q-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--q-gold);margin-bottom:6px;}
.qi-why{margin:0 0 14px;}
.qi-why summary{cursor:pointer;list-style:none;font:800 11px/1 var(--q-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--q-gold);margin-bottom:6px;}
.qi-why summary::-webkit-details-marker{display:none;}
.qi-why summary::before{content:"\25B8  ";}
.qi-why[open] summary::before{content:"\25BE  ";}
.qi-why p{font-size:14.5px;line-height:1.55;color:#bcbab4;margin:0;}
.qi-loot{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:6px;}
.qi-loot li{
  font:700 11px/1 var(--q-mono);letter-spacing:.06em;padding:6px 8px;color:#ffe2a6;
  background:#241c10;border:1px solid rgba(255,176,32,.5);box-shadow:inset 0 -2px 0 rgba(0,0,0,.35);
}
.qi-loot li::before{content:"\25C6 ";color:var(--flame);}
.qi-links{display:flex;flex-wrap:wrap;gap:8px;margin:0;}
.qi-btn{
  display:inline-block;text-decoration:none;font:800 12px/1 var(--q-mono);letter-spacing:.1em;text-transform:uppercase;
  padding:11px 13px;color:var(--q-ink);border:2px solid rgba(246,243,237,.4);background:transparent;
}
.qi-btn:hover,.qi-btn:focus-visible{border-color:#fff;background:rgba(255,255,255,.06);outline:none;}
.qi-btn--go{background:var(--flame);color:var(--ink);border-color:#000;box-shadow:3px 3px 0 #000;}
.qi-btn--go:hover,.qi-btn--go:focus-visible{background:#ff5537;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000;}

/* locked: the egg */
.qi-egg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:240px;
  background:radial-gradient(circle at 50% 55%,rgba(255,120,30,.28),transparent 60%),#0d0b12;border:2px dashed rgba(255,176,32,.45);}
.q-win-in .qi-egg{margin:16px 0 16px 16px;padding:0;height:auto;}
.egg{position:relative;width:96px;height:124px;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;
  background:radial-gradient(circle at 35% 30%,#ffe6a8,#e9862a 50%,#7a2e0f 100%);
  box-shadow:0 0 40px rgba(255,140,40,.55);animation:q-wobble 2.4s ease-in-out infinite;}
.egg i{position:absolute;width:16px;height:10px;border-radius:50%;background:rgba(122,46,15,.55);}
.egg i:nth-child(1){top:30%;left:22%;}.egg i:nth-child(2){top:52%;left:58%;width:20px;}.egg i:nth-child(3){top:72%;left:30%;}
@keyframes q-wobble{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-7deg)}82%{transform:rotate(6deg)}88%{transform:rotate(-3deg)}}
.egg-note{font:800 12px/1 var(--q-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--q-gold);margin:0;}

/* finale: the castle */
.qi-castle{min-height:240px;display:flex;align-items:flex-end;justify-content:center;
  background:
    linear-gradient(transparent 70%,#0a0a0c 70%),
    radial-gradient(circle at 50% 100%,rgba(255,120,30,.55),transparent 65%),
    #1a0f12;border:2px solid rgba(255,176,32,.45);}
.q-win-in .qi-castle{margin:16px 0 16px 16px;height:auto;}
.castle-flag{margin-bottom:30%;padding:12px 22px;font:800 clamp(28px,4vw,52px)/1 var(--q-mono);letter-spacing:.1em;
  color:#1a1000;background:var(--q-gold);border:3px solid #000;box-shadow:6px 6px 0 #000;transform:rotate(-3deg);}

/* ---------------- list view (no JS, reduced motion, "skip it") ---------------- */
.q-log{padding-bottom:110px;}
.quest.is-flying .q-log{display:none;}
.q-lvl{margin-top:46px;}
.q-lvl-h{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;margin:0 0 18px;padding-bottom:12px;
  border-bottom:3px solid rgba(255,176,32,.45);}
.q-lvl-h span{display:block;font:700 11px/1 var(--q-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--q-gold);margin-bottom:9px;}
.q-log .qi{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:26px;align-items:start;
  padding:22px;margin-bottom:22px;background:var(--q-panel);border:2px solid rgba(255,176,32,.35);
}
.q-log .qi-browser{height:min(62vh,520px);}
.q-log .qi-phone{display:block;}
.q-log-flight{margin-top:30px;}
.quest:not(.can-fly) .q-log-flight,.quest:not(.can-fly) [data-quest="list"],.quest:not(.can-fly) [data-quest="start"]{display:none;}

/* ---------------- mobile ---------------- */
@media (max-width:760px){
  .q-hud{top:66px;gap:8px;font-size:10px;letter-spacing:.08em;flex-wrap:wrap;}
  .q-hud .world{padding:7px 8px;}
  .q-hud .loot,.q-hud button{padding:7px 8px;}
  .q-xp{order:5;flex-basis:100%;max-width:none;height:10px;}
  .q-moon{width:46px;height:46px;top:19%;right:5%;}
  .q-hud .lt{display:none;}
  .q-win{top:41%;bottom:12px;left:10px;right:10px;}
  .q-win-in .qi{grid-template-columns:auto minmax(0,1fr);}
  .q-win-in .qi-screens{padding:10px 0 10px 10px;}
  .q-win-in .qi-browser{display:none;}
  .q-win-in .qi-phone{display:block;position:relative;right:auto;bottom:auto;height:100%;width:auto;min-width:0;max-width:44vw;aspect-ratio:480/1060;border-radius:16px;padding:5px;}
  .q-win-in .qi-phone .qi-scroll{border-radius:11px;}
  .q-win-in .qi-body{padding:12px 12px 14px;}
  .q-win-in .qi-why{display:none;}
  .q-win-in .qi-title{font-size:20px;margin-bottom:8px;}
  .q-win-in .qi-quest{font-size:13.5px;}
  .q-win-in .qi-loot li{font-size:10px;padding:5px 6px;}
  .q-win-in .qi-btn{padding:9px 10px;font-size:11px;}
  .q-win-in .qi-egg,.q-win-in .qi-castle{margin:10px 0 10px 10px;min-height:0;}
  .q-win-in .egg{width:60px;height:78px;}
  .q-scrollhint{left:16px;bottom:16px;font-size:9px;}
  .q-map{display:none;}
  .q-help{bottom:auto;top:calc(41% - 82px);font-size:10px;padding:7px 10px;}
  .q-rail{top:calc(41% - 44px);left:10px;transform:none;flex-direction:row;gap:8px;}
  .q-rail button{font-size:10px;padding:8px 9px;box-shadow:2px 2px 0 #000;}
  .q-node .lbl{font-size:9px;}
  .q-sign .board{max-width:180px;padding:9px 12px;}
  .q-sign .post{height:40px;}

  .q-log .qi{grid-template-columns:minmax(0,1fr);padding:14px;}
  .q-log .qi-browser{height:58vh;}
  .q-log .qi-phone{width:30%;right:-6px;}
}
@media (max-width:760px) and (max-height:640px){ .q-win{top:38%;} }
@media (min-width:761px) and (max-height:700px){ .q-win{top:118px;bottom:24%;} .q-hud{top:68px;} }

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  .q-embers,.q-help{display:none;}
  .egg,.q-scrollhint{animation:none;}
}