/* layout: full-bleed raymarched canvas; HUD pinned to the four corners; map, tuning and settings are sheets over the world.
   motif: the hexagon. Round controls are pointy-top hexagons, text buttons are stretched ones, panels have two cut corners. */
:root{
  color-scheme:dark;
  --void:#06070c; --ink:#eef0f7; --dim:#9aa2b8; --faint:#5d6479;
  --fill:rgba(10,13,24,.22); --fill-strong:rgba(9,11,20,.93); --fill-on:rgba(34,86,104,.9);
  --edge:rgba(214,224,255,.5); --line:rgba(196,210,255,.16);
  --rift:#8fe6ff; --shard:#ffd98a; --warn:#ff9a84;
  --hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  --lozenge:polygon(11px 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,11px 100%,0 50%);
  --cut:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  --display:"Josefin Sans","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --body:system-ui,-apple-system,"PingFang SC","Hiragino Sans","Hiragino Sans GB","Yu Gothic","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --track:.22em;
}
:root:lang(ja){--display:"Josefin Sans","Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;--track:.14em}
:root:lang(en){--display:"Josefin Sans","Century Gothic","Avenir Next",system-ui,sans-serif;--track:.12em}

/* base: safe-area padding for phones with notches, no default margin, and [hidden] always wins */
:root{padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
[hidden]{display:none!important}
img{max-width:100%}
html,body{height:100%}
body{margin:0;font-size:14px;background:var(--void);color:var(--ink);font-family:var(--body);overflow:hidden;font-variant-numeric:lining-nums;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;background:var(--void)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input:focus-visible{outline:2px solid var(--rift);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* hexagon button: an edge-coloured hexagon with a slightly smaller dark one on top */
.hexb{position:relative;isolation:isolate;width:38px;height:43px;flex:none;display:grid;place-items:center;
  clip-path:var(--hex);background:var(--edge);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);touch-action:none}
.hexb::before{content:"";position:absolute;inset:1px;z-index:-1;clip-path:var(--hex);background:var(--fill)}
.hexb{background:var(--edge);-webkit-backdrop-filter:none;backdrop-filter:none}
.hexb::after{content:"";position:absolute;inset:1px;z-index:-2;clip-path:var(--hex);background:rgba(120,130,160,.55);mix-blend-mode:multiply}
.hexb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2;filter:drop-shadow(0 0 2px rgba(0,0,0,.7));stroke-linecap:round;stroke-linejoin:round}
.hexb:active::before,.hexb.on::before{background:var(--fill-on)}
.hexb:active,.hexb.on,.hexb:focus-visible{background:var(--rift);outline:none}
.hexb.lg{width:54px;height:62px}
.hexb.lg svg{width:24px;height:24px}
.hexb.sm{width:32px;height:37px}
.hexb.sm svg{width:16px;height:16px}

/* stretched-hexagon text button */
.btn{position:relative;isolation:isolate;padding:10px 20px;font-size:13px;letter-spacing:var(--track);line-height:1.3;
  clip-path:var(--lozenge);background:var(--edge);text-align:center}
.btn::before{content:"";position:absolute;inset:1px;z-index:-1;clip-path:var(--lozenge);background:var(--fill-strong)}
.btn:active::before,.btn.sel::before{background:var(--fill-on)}
.btn.sel,.btn:focus-visible{background:var(--rift);outline:none}
.btn.pri{background:var(--rift);color:var(--rift)}
.btn.warn{color:var(--warn)}
.btn.warn.armed{background:var(--warn)}
.btn:disabled{opacity:.35;cursor:default}

#hud{position:fixed;inset:0;pointer-events:none;
  padding-top:calc(env(safe-area-inset-top,0px) + 12px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;flex-direction:column;justify-content:space-between}
#top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
#info{min-width:0;text-shadow:0 0 8px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.9)}
#wname{font-family:var(--display);font-weight:300;font-size:13px;letter-spacing:var(--track)}
#wsub{font-family:var(--display);font-weight:300;font-size:10px;letter-spacing:.12em;color:var(--ink);opacity:.82;margin-top:4px;display:flex;flex-wrap:wrap;gap:2px 12px;font-variant-numeric:tabular-nums}
#wsub .sh{color:var(--shard)}
#btns{display:flex;gap:6px;pointer-events:auto}
#bottom{display:flex;justify-content:space-between;align-items:flex-end}
#stick{width:96px;height:111px;position:relative;clip-path:var(--hex);background:var(--edge);opacity:.5}
#stick::before{content:"";position:absolute;inset:1px;clip-path:var(--hex);background:rgba(90,100,130,.5);mix-blend-mode:multiply}
#knob{position:absolute;left:50%;top:50%;width:42px;height:48px;margin:-24px 0 0 -21px;clip-path:var(--hex);background:rgba(230,236,255,.4)}
#pad{display:flex;gap:8px;align-items:flex-end;pointer-events:auto}
#pad .col{display:flex;flex-direction:column;gap:6px}
#pad .hexb:not(.lg){width:44px;height:50px}
body.desk #stick{visibility:hidden}
body.desk #pad{display:none}   /* jump and size buttons are for touch screens; keys do this on a computer */
body.pre #hud{visibility:hidden}
/* photo mode: nothing on screen but the world. Touch screens keep a faint strip of four controls. */
body.photo #hud,body.photo #markers,body.photo #ring,body.photo #tune{display:none}
#photoBar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 14px);display:none;gap:8px;align-items:center;opacity:.55}
body.photo:not(.desk) #photoBar{display:flex}
#shot{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 14px);width:min(34vw,220px);
  border:1px solid var(--edge);box-shadow:0 4px 24px rgba(0,0,0,.5);transition:opacity .6s}

#markers{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.mk{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--display);font-weight:300;font-size:9px;letter-spacing:.1em;text-shadow:0 1px 4px #000,0 0 2px #000;white-space:nowrap;will-change:transform;
  filter:drop-shadow(0 0 5px currentColor)}
.mk i{position:relative;width:14px;height:16px;clip-path:var(--hex);background:currentColor;display:block}
.mk i::before{content:"";position:absolute;inset:2px;clip-path:var(--hex);background:rgba(6,7,12,.8)}
.mk.edge i{width:9px;height:10px}
.mk.edge i::before{display:none}
.mk.far{opacity:.55}
.mk.sh i{width:7px;height:8px}
.mk.sh i::before{display:none}
.mk span{color:var(--ink);filter:none}

/* orientation ring: sits at the right edge, clear of the view, while a surface within reach is tilted away from your body */
#ring{position:fixed;right:max(14px,env(safe-area-inset-right,0px));top:42%;width:clamp(104px,27vmin,140px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;overflow:visible;touch-action:none;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.6))}
#ring .track{fill:none;stroke:var(--edge);stroke-width:1;stroke-dasharray:2 5}
#ring .arc{fill:none;stroke:var(--rift);stroke-width:2.5;stroke-linecap:round}
#ring .top{fill:var(--rift)}
#ring .hexm{fill:var(--fill-strong);stroke:var(--rift);stroke-width:2.5;stroke-linejoin:round}
#ring.drag .hexm{fill:var(--rift)}
#ring text{fill:var(--ink);font:17px var(--mono);font-variant-numeric:tabular-nums}
#ring .hit{fill:none;stroke:transparent;stroke-width:30;pointer-events:stroke;cursor:grab}
#ring .grab{fill:transparent;pointer-events:all;cursor:grab}

#toast{position:fixed;left:50%;top:14%;transform:translateX(-50%);width:min(88vw,480px);text-align:center;pointer-events:none;
  font-family:var(--display);font-weight:300;font-size:14px;letter-spacing:var(--track);line-height:1.7;text-shadow:0 0 12px #000,0 1px 3px #000,0 0 3px #000;opacity:0;transition:opacity .6s}
#toast.show{opacity:1}
#toast small{display:block;font-family:var(--body);font-weight:300;font-size:11px;color:var(--ink);letter-spacing:.04em;margin-top:2px}
#fade{position:fixed;inset:0;background:var(--ink);opacity:0;pointer-events:none;transition:opacity .45s}

/* sheets */
.sheet{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(4,5,10,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding-top:calc(env(safe-area-inset-top,0px) + 12px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.card{width:min(100%,520px);max-height:100%;display:flex;padding:1px;clip-path:var(--cut);background:var(--edge)}
.card>.in{flex:1;min-width:0;overflow:auto;clip-path:var(--cut);background:var(--fill-strong);padding:18px;display:flex;flex-direction:column;gap:14px}
.card h2{font-family:var(--display);font-weight:300;font-size:17px;letter-spacing:calc(var(--track)*1.4);text-transform:uppercase;margin:0;display:flex;justify-content:space-between;align-items:center;padding-left:6px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.hint{font-size:12px;color:var(--dim);line-height:1.7}
.field{display:flex;flex-direction:column;gap:8px}
.field>.lbl,.field>label{font-size:12px;color:var(--dim);letter-spacing:var(--track)}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg .btn{flex:1;padding-left:14px;padding-right:14px;white-space:nowrap}
input[type=range]{width:100%;accent-color:var(--shard);height:28px;touch-action:pan-y}

/* The world selector: a hexagonal column with a picture of one world on each face. */
#carousel{display:flex;flex-direction:column;align-items:center;gap:10px}
#prismView{position:relative;width:min(40vw,160px);aspect-ratio:3/4;perspective:900px;touch-action:pan-y;cursor:grab;margin:6px 0 2px;user-select:none}
#prismView:active{cursor:grabbing}
#prism{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.25,.8,.25,1)}
#prism.snap{transition:none}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#05060a;cursor:pointer;
  border-left:1px solid rgba(143,230,255,.6);border-right:1px solid rgba(143,230,255,.6);transition:filter .5s}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
/* the portal's rim: light leaking in from the edges, and a slow shimmer across the surface */
.face::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 22px rgba(143,230,255,.55),inset 0 0 3px rgba(220,245,255,.9);
  background:linear-gradient(115deg,transparent 35%,rgba(200,240,255,.14) 50%,transparent 65%) 0 0/300% 100%;animation:sheen 5s linear infinite}
@keyframes sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.face:not(.front){filter:brightness(.55) saturate(.6) blur(.6px)}
.face.front{cursor:default}
#famNav{display:flex;align-items:center;gap:14px}
#famIdx{font-family:var(--display);font-weight:300;font-size:12px;letter-spacing:.14em;color:var(--dim);min-width:4.5em;text-align:center;font-variant-numeric:tabular-nums}
#famInfo{text-align:center;display:flex;flex-direction:column;gap:3px;max-width:34em}
#famName{font-family:var(--display);font-weight:300;font-size:18px;letter-spacing:var(--track)}
#famDesc{font-size:12px;line-height:1.6;color:var(--dim)}
#famVisited{font-family:var(--display);font-weight:300;font-size:11px;letter-spacing:.1em;color:var(--shard)}
@media (prefers-reduced-motion:reduce){#prism,.face{transition:none}.face::after{animation:none}}

/* the map sheet: on a wide screen the world column on the left and the lattice on the right, all on one screen */
#map .card{width:min(100%,1060px)}
.mapcols{display:flex;flex-direction:column;gap:14px;min-height:0}
.mapL,.mapR{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (min-width:760px){
  .mapcols{display:grid;grid-template-columns:minmax(230px,300px) 1fr;align-items:start;gap:22px}
  .mapL{position:sticky;top:0}
  #prismView{width:min(16vw,190px)}
  #map3d{width:100%;height:min(50vh,440px);aspect-ratio:auto}
}

/* the map: a lattice of 7×7×7 worlds that turns under the finger */
#mapwrap{display:flex;flex-direction:column;gap:10px}
#map3d{width:min(100%,400px);aspect-ratio:10/9;align-self:center;touch-action:none;cursor:grab;display:block}
.layers{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.layers .lbl{font-size:12px;color:var(--dim);letter-spacing:var(--track)}
.layers .seg{flex:1;gap:3px}
.layers .btn{padding:6px 4px;font-size:11px;min-width:2.4em}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:11px;color:var(--dim)}
.lg{display:inline-flex;align-items:center;gap:6px}
.lg::before{content:"";width:10px;height:11px;clip-path:var(--hex);flex:none}
.lg.v::before{background:var(--shard)}
.lg.o::before{background:var(--rift);box-shadow:0 0 6px var(--rift)}
.lg.k::before{background:var(--dim);opacity:.6}

/* a picture just taken */
#shotView{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(4,5,10,.5);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#shotView .print{background:#f4f2ec;padding:10px 10px 12px;box-shadow:0 18px 60px rgba(0,0,0,.6);transform:rotate(-1.6deg);
  display:flex;flex-direction:column;gap:10px;max-width:min(86vw,760px);animation:printIn .45s cubic-bezier(.2,.8,.25,1)}
#shotView img{display:block;max-width:100%;max-height:64vh;object-fit:contain}
#shotView .row{justify-content:center}
#shotView .btn{color:#1a1d28}
#shotView .btn::before{background:#f4f2ec}
#shotView .btn.pri{background:#1a1d28;color:#1a1d28}
@keyframes printIn{from{opacity:0;transform:translateY(24px) rotate(2deg) scale(.92)}to{opacity:1;transform:rotate(-1.6deg)}}
@media (prefers-reduced-motion:reduce){#shotView .print{animation:none}}

/* map */
.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.tab{padding:6px 2px;font-family:var(--display);font-weight:300;font-size:12px;flex-wrap:wrap;color:var(--dim);text-align:center;border-bottom:1px solid var(--line);
  display:flex;justify-content:center;align-items:baseline;gap:8px}
.tab small{font-family:var(--mono);font-size:10px;color:var(--faint)}
.tab.sel{color:var(--ink);border-bottom-color:var(--rift)}
.tab.none{color:var(--faint)}
.tab:focus-visible{outline:1px solid var(--rift)}
#gridwrap{width:min(100%,340px);align-self:center;display:flex;flex-direction:column;gap:6px}
#grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);aspect-ratio:1;position:relative}
#grid svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#grid line{stroke:var(--rift);stroke-opacity:.55;stroke-width:1.5}
.cell{display:grid;place-items:center;position:relative}
.cell b{position:relative;isolation:isolate;width:6px;height:7px;clip-path:var(--hex);background:var(--faint);opacity:.5;display:grid;place-items:center;
  font:400 10px var(--mono);color:var(--ink);text-shadow:0 0 3px #000}
.cell.free b{width:12px;height:14px;opacity:.75}   /* drone mode: any world can be picked, so give the dots a size worth aiming at */
.cell.known b{width:18px;height:21px;background:var(--dim);opacity:.8}
.cell.known b::before{content:"";position:absolute;inset:1.5px;z-index:-1;clip-path:var(--hex);background:var(--fill-strong)}
.cell.vis b{width:28px;height:32px;opacity:1;background:var(--edge)}
.cell.vis b::before{content:"";position:absolute;inset:1.5px;z-index:-1;clip-path:var(--hex);background:var(--c)}
.cell.cur{filter:drop-shadow(0 0 7px var(--rift))}
.cell.cur b{background:var(--rift)}
.cell.cur b::before{inset:2.5px}
.cell.sel b{background:var(--ink)}
.cell:focus-visible{outline:1px solid var(--rift)}
.axis{font-family:var(--mono);font-size:10px;color:var(--dim);display:flex;justify-content:space-between;gap:8px}
#detail{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:10px;-webkit-user-select:text;user-select:text}
#dname{font-family:var(--display);font-weight:300;font-size:14px;letter-spacing:var(--track)}
#dmeta{font-size:12px;color:var(--dim);line-height:1.7;font-variant-numeric:tabular-nums}
#code{flex:1;min-width:0;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:0;color:var(--ink);padding:9px 10px;font:12px var(--mono);
  -webkit-user-select:text;user-select:text}

/* tuning: a low panel so the world stays visible while it bends */
#tune{position:fixed;left:0;right:0;bottom:0;pointer-events:none;display:flex;justify-content:center;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#tune .card{pointer-events:auto}
#tune .card>.in{gap:8px;padding:14px 16px}
.sl{display:grid;grid-template-columns:minmax(5em,auto) 1fr 3.6em;gap:10px;align-items:center;font-size:13px}
.sl output{font-family:var(--mono);font-size:11px;color:var(--shard);text-align:right;font-variant-numeric:tabular-nums}

/* title */
#title{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(180deg,rgba(6,7,12,.3) 0%,rgba(6,7,12,.3) 40%,rgba(6,7,12,.92) 100%);
  padding-top:calc(env(safe-area-inset-top,0px) + 16px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px);
  padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));transition:opacity .9s}
#title .langs{align-self:flex-end;display:flex;gap:4px}
#title .langs .btn{padding:7px 16px;font-size:12px}
#title .in{max-width:540px;display:flex;flex-direction:column;gap:16px}
#mark{width:44px;height:50px;fill:none;stroke:var(--rift);stroke-width:1.2;stroke-linejoin:round}
#title h1{font-family:var(--display);font-weight:200;font-size:clamp(34px,9.5vw,62px);letter-spacing:.3em;margin:0;line-height:1.1;text-shadow:0 2px 30px rgba(0,0,0,.6)}
:root:lang(ja) #title h1{font-size:clamp(24px,6.6vw,46px);letter-spacing:.18em}
:root:lang(en) #title h1{font-size:clamp(30px,8.6vw,60px);letter-spacing:.22em;text-transform:uppercase;font-weight:200}
#title p{margin:0;font-family:var(--display);font-weight:300;font-size:14px;letter-spacing:calc(var(--track)*.7);line-height:1.9}
#keys{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12px;color:var(--dim);line-height:1.5;margin:0}
#keys dt{color:var(--ink);opacity:.88}
#keys dd{margin:0}
#go{align-self:flex-start;padding:12px 40px;font-family:var(--display);font-weight:300;font-size:15px;letter-spacing:.4em;text-indent:.4em;color:var(--rift);background:var(--rift)}
#err{color:var(--warn);font-size:13px;line-height:1.6}
@media (max-height:520px){#tune .hint{display:none}#gridwrap{width:min(100%,250px)}#title h1{font-size:32px}#keys,#mark{display:none}#stick{width:86px;height:99px}.hexb.lg{width:54px;height:62px}}
@media (prefers-reduced-motion:reduce){#toast,#fade,#title{transition:none}}