/* Public UI foundation. Scene composition remains in its owning stylesheet. */
:root {
  --brand-gradient: linear-gradient(115deg,#fff9df 15%,#e7eee2 38%,#b9ddd3 57%,#fff0c7 80%);
  --ui-font: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', system-ui, sans-serif;
  --ui-story-font: 'Songti SC', 'Noto Serif CJK SC', 'STSong', serif;
  --ui-display: Baskerville, Georgia, serif;
  --ui-ink: #354e50;
  --ui-muted: #607477;
  --ui-white: #fffbed;
  --ui-paper: #f1f2eb;
  --ui-glass: #f5f6ee75;
  --ui-line: #718c8659;
  --ui-scrim: #253d3b66;
  --ui-focus: #567d79;
  --ui-title: 24px;
  --ui-quote: 19px;
  --ui-body: 15px;
  --ui-command: 14px;
  --ui-small: 13px;
  --ui-space: 8px;
  --ui-card-radius: 28px;
  --cue-name-size:14px;
  --cue-action-size:13px;
  --cue-color:#fff8dd;
  --notebook-serif: var(--ui-font);
  --notebook-ink: var(--ui-ink);
  --notebook-muted: var(--ui-muted);
  --notebook-line: var(--ui-line);
  --notebook-paper: var(--ui-paper);
}
#world #loading[hidden]{display:none}
#world #loading:not([hidden]){animation:coastal-loading-in .4s ease-out both}
#world #loading::after{content:'';position:absolute;inset:0;z-index:5;background:#080d0e;opacity:0;pointer-events:none;transition:opacity .65s ease-in-out}
#world #loading.departing::after{opacity:1}
@keyframes coastal-loading-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#world #loading:not([hidden]){animation:none}#world #loading::after{transition:none}}

#world #opening #game-title {margin-bottom:14px;font-size:116px}
#opening .brand-chinese {display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 62px;text-shadow:none}
#opening .brand-chinese span {display:block;font:500 36px/1.6 var(--ui-font);letter-spacing:0;background:var(--brand-gradient);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:wandermew-tint 14s ease-in-out infinite}
#opening .brand-chinese svg {width:24px;height:24px;stroke-width:1;color:#d6e7d9;opacity:.85}
@media(max-width:1000px){#world #opening #game-title{font-size:90px}}
@media(max-width:600px){#world #opening #game-title{font-size:54px}#opening .brand-chinese{margin-bottom:48px;gap:10px}#opening .brand-chinese span{font-size:28px}#opening .brand-chinese svg{width:20px;height:20px}}
@media(max-width:360px){#world #opening #game-title{font-size:46px}#opening .brand-chinese span{font-size:26px}}
@media(max-height:540px){#world #opening #game-title{font-size:60px}#opening .brand-chinese{margin-bottom:26px}#opening .brand-chinese span{font-size:26px}}
@media(prefers-reduced-motion:reduce){#opening .brand-chinese span{animation:none}}

/* Sparse peripheral stars move independently; the reading area stays clear. */
#opening .title-stars{position:absolute;top:-28px;left:8%;width:84%;height:218px;pointer-events:none}
#opening .title-stars i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#fffce8;box-shadow:0 0 5px #fff5c9,0 0 10px #eadcb178;animation:title-star-drift var(--duration,13s) ease-in-out var(--delay,0s) infinite alternate}
#opening .title-stars i:nth-child(3n)::after{content:'';position:absolute;inset:-3px;background:#fffce8;clip-path:polygon(50% 0,60% 39%,100% 50%,60% 61%,50% 100%,40% 61%,0 50%,40% 39%)}
#opening .title-stars i:nth-child(1){--x:9%;--y:31%;--delay:-4s}
#opening .title-stars i:nth-child(2){--x:22%;--y:9%;--delay:-9s;--duration:17s}
#opening .title-stars i:nth-child(3){--x:41%;--y:2%;--delay:-3s;--duration:19s}
#opening .title-stars i:nth-child(4){--x:68%;--y:8%;--delay:-12s;--duration:15s}
#opening .title-stars i:nth-child(5){--x:88%;--y:21%;--delay:-7s}
#opening .title-stars i:nth-child(6){--x:98%;--y:47%;--delay:-2s;--duration:18s}
#opening .title-stars i:nth-child(7){--x:92%;--y:77%;--delay:-11s;--duration:16s}
#opening .title-stars i:nth-child(8){--x:76%;--y:94%;--delay:-5s;--duration:21s}
#opening .title-stars i:nth-child(9){--x:27%;--y:95%;--delay:-8s;--duration:18s}
#opening .title-stars i:nth-child(10){--x:11%;--y:81%;--delay:-1s;--duration:15s}
#opening .title-stars i:nth-child(11){--x:0%;--y:60%;--delay:-6s;--duration:20s}
#opening .title-stars i:nth-child(12){--x:54%;--y:0%;--delay:-14s;--duration:23s}
@keyframes title-star-drift{0%{transform:translate(-7px,4px) scale(.7);opacity:.25}35%{transform:translate(4px,-9px) scale(1);opacity:.85}70%{transform:translate(12px,-3px) scale(.8);opacity:.4}100%{transform:translate(5px,10px) scale(1);opacity:.75}}
@media(max-width:1000px){#opening .title-stars{height:185px;left:5%;width:90%}}
@media(max-width:600px){#opening .title-stars{height:148px;top:-24px;left:4%;width:92%}}
@media(max-height:540px){#opening .title-stars{height:146px}}
@media(prefers-reduced-motion:reduce){#opening .title-stars i{animation:none;opacity:.4}}

/* Light follows the lettering, without placing a decorative orb over the coast. */
#world #opening :is(#game-title>span,.brand-chinese span) {
  display:inline-block;
  background-image:linear-gradient(110deg,transparent 32%,#fffdeb35 43%,#fffef2 50%,#fff5ce40 57%,transparent 68%),var(--brand-gradient);
  background-size:300% 100%,220% 100%;
  background-clip:text;-webkit-background-clip:text;color:transparent;
  animation:coastal-word-light 10s ease-in-out infinite;
}
@keyframes coastal-word-light {
  0%,100%{background-position:110% 50%,0% 50%;filter:drop-shadow(0 0 4px #f9edc680)}
  45%{background-position:0% 50%,100% 50%;filter:drop-shadow(0 0 10px #fff4cec0) drop-shadow(0 0 20px #fff4ce55)}
  75%{background-position:-35% 50%,60% 50%;filter:drop-shadow(0 0 7px #d2f1e490)}
}
#world #opening #begin {
  position:relative;isolation:isolate;width:120px;min-width:120px;height:44px;min-height:44px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  font:300 13px/1 var(--ui-font);letter-spacing:0;color:var(--ui-ink);text-shadow:none;
  background:none;border:0;border-radius:14px;
  box-shadow:none;backdrop-filter:none;
  transition:background .3s,box-shadow .3s;
}
#world #opening #begin::before{content:'';position:absolute;inset:4px 0;z-index:-1;border:1px solid #f5f6ee99;border-radius:14px;background:var(--ui-glass);box-shadow:0 2px 8px #294b4512,inset 0 1px #ffffff55;backdrop-filter:blur(5px);pointer-events:none;transition:background .3s,box-shadow .3s}
#world #opening #begin:hover::before{background:#f5f6eeb5;box-shadow:0 3px 12px #294b4520,inset 0 1px #ffffff80}
#world #opening #begin:focus-visible {outline:2px solid var(--ui-focus);outline-offset:4px}
#world #opening #begin:disabled {opacity:.55;cursor:wait}
@media(prefers-reduced-motion:reduce){#world #opening :is(#game-title>span,.brand-chinese span){animation:none;background-position:50% 50%,50% 50%;filter:none}#world #opening #begin{transition:none}}

/* One type hierarchy across paper, postcard and unframed encounters. */
#world dialog {font-family:var(--ui-font);letter-spacing:0;scrollbar-width:thin;scrollbar-color:#8ba39b transparent;overscroll-behavior:contain;scroll-padding:48px 16px;max-height:calc(100dvh - 32px)}
#world #fish-dialog{width:560px;max-width:calc(100% - 24px);padding:32px;border:1px solid var(--ui-line);border-radius:var(--ui-card-radius);background:var(--ui-paper);color:var(--ui-ink);box-shadow:0 16px 48px #233e3826;text-align:center;filter:none}
#world #fish-dialog::before,#world #fish-dialog::after{display:none}
#world #fish-art{display:block;width:100%;height:auto;max-height:28dvh;object-fit:contain;margin:12px auto}
#world #fish-copy{font:400 16px/1.85 var(--ui-story-font);min-height:60px;margin:12px 0;color:var(--ui-ink)}
#world #fish-note{font:400 13px/1.7 var(--ui-font);color:var(--ui-muted);margin:8px 0}
#world #fish-dialog form:last-of-type{display:flex;justify-content:center;margin:8px 0 0}
#world :is(#confirm-restart,#key-remove){color:#88554b;border-bottom-color:#88554b66}
@media(max-height:600px){#world #fish-dialog{padding:20px 28px}#world #fish-art{max-height:24dvh}#world #fish-copy{font-size:14px;min-height:0;margin:8px 0}}
#world dialog h2 {font:400 var(--ui-title)/1.4 var(--ui-font);letter-spacing:0;text-wrap:balance}
#world #about-title {font-family:var(--ui-display);font-style:italic;font-size:32px}
#world dialog .eyebrow {font:400 var(--ui-small)/1.65 var(--ui-font);letter-spacing:0}
#world :is(#about-dialog,#pause-dialog,#restart-dialog,#key-dialog) p:not(.eyebrow) {
  font:400 var(--ui-body)/1.85 var(--ui-font);margin-block:0 16px;text-wrap:pretty;
}
#world :is(#inspect-copy,#journal-dialog #pages p) {
  font:400 var(--ui-body)/1.85 var(--ui-font);color:var(--ui-ink);text-wrap:pretty;
}
#world :is(#find-quote,#mirror-dialog .mirror-quote,#key-words) {
  font:400 var(--ui-quote)/1.75 var(--ui-font);text-wrap:pretty;
}
#world :is(#find-source,#find-guidance,#key-privacy,#key-count,.journal-foot,#pages small,#pages .journal-place,#sea-photos-dialog small) {
  font:400 var(--ui-small)/1.75 var(--ui-font);color:var(--ui-muted);opacity:1;
}
#world #pages .journal-read {font:400 var(--ui-quote)/1.6 var(--ui-font);color:var(--ui-ink)}

/* Literal commands share targets and rhythm; no layout-shifting icon travel. */
#world dialog :is(.text-button,.quiet-button),#world #pier-scene .text-button {
  font:400 var(--ui-command)/1.6 var(--ui-font);letter-spacing:0;
  min-height:44px;gap:10px;padding:8px 2px;white-space:normal;text-wrap:balance;
  border-radius:0;background:transparent;opacity:1;
}
#world dialog .text-button {color:var(--ui-ink);border-bottom:1px solid var(--ui-line)}
#world dialog .quiet-button {color:var(--ui-muted);border:0}
#world .text-button svg {width:18px;height:18px;flex:0 0 18px;stroke-width:1.5;transform:none}
#world dialog button:disabled {opacity:.4;cursor:default}
#world dialog .close {
  z-index:3;
  width:44px;height:44px;min-width:44px;min-height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;top:10px;right:10px;
  border:0;border-radius:50%;background:transparent;box-shadow:none;filter:none;
}
#world dialog .close svg {width:15px;height:15px;stroke-width:1.5}
#world :is(button,a,textarea,input):focus-visible {
  outline:2px solid var(--ui-focus);outline-offset:4px;box-shadow:none;
}
#world #pier-scene button:focus-visible,#world #mirror-dialog button:focus-visible {outline-color:var(--ui-white)}
/* Card emphasis uses coastal ink, not a browser-blue block or a boxed command. */
#world dialog ::selection {background:#cbd9cf;color:#29453e}
#world dialog :is(button,a,textarea,input) {-webkit-tap-highlight-color:#718c8626}
#world dialog :is(.text-button,.quiet-button):focus-visible {
  outline:none;box-shadow:0 2px 0 #526e63;border-radius:0;
  text-decoration:underline;text-decoration-color:#526e63;text-underline-offset:5px;
}
#world dialog .close:focus-visible {outline:1px solid #526e63;outline-offset:2px;background:#718c861a}
#world #key-feeling:focus-visible {outline:1px solid #526e63;outline-offset:3px;background:#f5f6eecf}
#world #mirror-dialog .text-button:focus-visible {box-shadow:0 2px 0 var(--ui-white);text-decoration-color:var(--ui-white)}
@media(hover:hover) {
  #world dialog button:not(:disabled):hover {text-decoration-color:currentColor}
  #world dialog .close:hover {background:#718c861a}
  #world dialog .text-button:not(:disabled):hover {border-bottom-color:currentColor}
}

/* System sheets retain painted edges; their heading bands use one spacing. */
#world :is(#map-dialog,#journal-dialog,#pause-dialog,#about-dialog,#restart-dialog) {
  padding:24px 28px;box-shadow:0 16px 56px #162f3233;
}
#world :is(#map-dialog,#journal-dialog,#pause-dialog,#about-dialog,#restart-dialog)::before {height:154px}
#world :is(#map-dialog,#journal-dialog,#pause-dialog,#about-dialog,#restart-dialog) h2 {
  margin:0 32px 48px 0;color:var(--ui-white);
}
#world :is(#map-dialog,#journal-dialog,#pause-dialog,#about-dialog,#restart-dialog)::backdrop,
#world :is(#inspect-dialog,#key-dialog,#sea-photos-dialog)::backdrop {
  background:var(--ui-scrim);backdrop-filter:blur(3px);
}
#world :is(#key-dialog,#sea-photos-dialog) {padding:28px;background:var(--ui-paper);color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:4px}
#world :is(#key-dialog,#sea-photos-dialog) h2 {margin:12px 24px 24px}
#world #about-dialog .about-manifesto {font-size:var(--ui-quote);padding:16px 0;border-color:var(--ui-line)}
#world #pause-dialog .mixing label {font:var(--ui-body)/1.6 var(--ui-font);margin:16px 0}
#world #pause-dialog #audio-status {font-size:var(--ui-small);color:var(--ui-muted);opacity:1}
#world :is(#pause-dialog,#restart-dialog) .quiet-button {margin:8px auto 0}
#world .notebook-nav {gap:24px;margin-bottom:24px;border-color:var(--ui-line)}
#world .notebook-nav :is(button,span) {font:var(--ui-command)/1.6 var(--ui-font);min-height:44px}
#world #journal-dialog #pages li {gap:24px;padding:24px 0;border-bottom:1px solid var(--ui-line)}
#world #journal-dialog #pages .journal-empty {font:var(--ui-body)/1.85 var(--ui-font);color:var(--ui-muted)}
#world #journal-dialog #pages .quiet-button {font-size:var(--ui-small);margin-top:8px}

/* Keep the illustrated collectible and water mirror distinct from system sheets. */
#world #journal-dialog {width:780px;background-blend-mode:soft-light;background-color:var(--ui-paper)}
#world #journal-dialog h2 {margin-bottom:32px}
#world #journal-dialog .notebook-nav {margin-bottom:12px}
#world #journal-dialog #pages li {grid-template-columns:180px minmax(0,1fr);gap:28px;padding:24px 0}
#world #journal-dialog #pages li:last-child {border-bottom:0}
#world #inspect-dialog .find-masthead {padding-right:32px;pointer-events:none}
#world #journal-dialog .journal-art {width:180px;height:180px;align-self:center;filter:drop-shadow(0 8px 8px #354e5014)}
#world #journal-dialog .journal-place {display:block;margin:0 0 8px}
#world #journal-dialog .journal-entry h3 {font:400 22px/1.5 var(--ui-font);color:var(--ui-ink);margin:0 0 12px;text-wrap:balance}
#world #journal-dialog #pages p {margin:0 0 12px;max-width:30em}
#world #journal-dialog .journal-entry>small:not(.journal-place) {display:block}
#world #journal-dialog .journal-actions {display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:20px}
#world #journal-dialog #pages .journal-read {font:var(--ui-command)/1.6 var(--ui-font);border-bottom:1px solid var(--ui-line);padding:8px 0}
#world #journal-dialog #pages .quiet-button {margin:0;padding:8px 0}
#world #journal-dialog #pages .journal-empty {display:block;padding:48px 24px;max-width:22em;margin:auto;text-wrap:balance;line-height:2}
#world #journal-dialog .collection-footer {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--ui-line);margin-top:8px}
#world #journal-dialog .journal-foot {padding:0;border:0;margin:0;font-size:12px;flex:0 1 auto;width:auto}
#world #journal-dialog #discoveries {margin:0;padding:0;border:0;flex:0 1 auto;width:auto}
#world #journal-dialog #discoveries .text-button {font-size:14px;margin:0;gap:8px}
#world #inspect-dialog {min-height:0;padding:28px 36px}
#world #inspect-dialog #inspect-title {margin:8px auto 0}
#world #inspect-dialog #inspect-art {height:184px;width:280px;max-width:100%;margin:16px auto}
#world #inspect-dialog #inspect-copy {margin:0 0 16px}
#world #inspect-dialog #find-words {margin:16px 0 0;padding:0}
#world #inspect-dialog #find-quote {margin:0 0 12px}
#world #inspect-dialog #find-decisions {gap:16px;margin-top:24px;padding-top:16px;border-color:var(--ui-line);flex-wrap:wrap}
#world #inspect-dialog #leave-find {margin:0}
#world #mirror-dialog .text-button {color:var(--ui-white);border-color:#fffbed66}
#world #key-feeling {font:var(--ui-body)/1.85 var(--ui-font);padding:12px;border-bottom-color:var(--ui-line);color:var(--ui-ink)}
#world #key-feeling::placeholder {color:var(--ui-muted);opacity:1}
#world .key-actions,#world .sea-photo-actions {gap:16px;flex-wrap:wrap}
#world #sea-photos-dialog small {display:block;margin:16px 0}

/* Live controls share translucency. Their positioning stays scene-owned. */
#world :is(.hud .icon,.world-actions .icon,#touch-pad button) {
  background:var(--ui-glass);color:var(--ui-ink);border:1px solid #f5f6ee80;
  min-width:44px;min-height:44px;box-shadow:none;
}
#world .world-actions .icon[aria-pressed="true"] {background:#f5f6eecf;border-color:var(--ui-focus)}
#world #live-map {background:var(--ui-glass);width:108px;height:108px;padding:12px 8px}
#world #guide {font-family:var(--ui-font);color:var(--ui-white);top:28%;bottom:auto;left:50%;transform:translateX(-50%);width:min(540px,calc(100% - 48px));padding:0;border-radius:0;background:none;border:0;box-shadow:none;backdrop-filter:none;text-align:center;pointer-events:none;text-shadow:0 1px 3px #233e35,0 2px 8px #233e35}
#world #guide .guide-feather {display:none}
#world #guide-line {font:400 20px/1.7 var(--ui-font);margin:0 0 10px}
#world #guide-control {font:400 14px/1.8 var(--ui-font);color:var(--ui-white)}
#world .movement-keys{display:flex;align-items:center;justify-content:center;gap:12px}
#world #guide:has(.keyboard-guide){top:25%}
@media(max-width:600px) and (min-height:551px){#world #guide,#world #guide:has(.keyboard-guide){top:17%}}
#world .key-cluster{display:grid;grid-template-columns:repeat(3,26px);grid-template-rows:repeat(2,26px);gap:4px}
#world .key-cluster kbd{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid #fffbed99;border-radius:6px;background:#f5f6ee14;color:inherit;font:400 12px/1 var(--ui-font);box-shadow:0 1px 3px #25423b26}
#world .key-cluster kbd:first-child{grid-column:2}
#world .key-cluster kbd:nth-child(2){grid-row:2;grid-column:1}
#world .key-cluster kbd:nth-child(3){grid-row:2;grid-column:2}
#world .key-cluster kbd:nth-child(4){grid-row:2;grid-column:3}
#world .key-cluster svg{width:14px;height:14px;stroke-width:1.5;filter:drop-shadow(0 1px 2px #25423b)}
#world .keys-or{font-size:12px}
#world .flight-keys-note{display:block;margin-top:12px;font-size:13px}
#world #compass {display:inline-flex;align-items:center;justify-content:center;width:auto;height:44px;gap:4px;padding:0 8px;border-radius:22px}
#world #compass svg {width:18px;height:18px;flex-shrink:0}
#world #compass span {font:400 12px/1 var(--ui-font);white-space:nowrap}
#world #object-cue button {font:400 var(--ui-command)/1.6 var(--ui-font)}
#world #object-cue kbd {font:400 var(--ui-small)/1 var(--ui-font);white-space:nowrap;flex-shrink:0}
#world #object-name {font:400 15px/1.5 var(--ui-font);margin-bottom:10px;text-wrap:balance}
#world #object-cue #object-name {display:flex;align-items:center;justify-content:center;gap:6px}
#world #object-cue #object-name svg {width:1em;height:1em;flex:0 0 1em;stroke:currentColor;stroke-width:1.25;fill:none;filter:drop-shadow(0 1px 2px #25423b88)}
#world #object-cue #object-name>span {min-width:0}
#world #object-cue:not(.wind-cue) #inspect {min-height:44px;padding:8px 12px;gap:12px;border:1px solid #f5f6ee80;border-radius:22px;background:var(--ui-glass);backdrop-filter:blur(2px);color:var(--ui-ink);text-shadow:none}
#world #object-cue:not(.wind-cue) #inspect kbd {font-size:14px;min-width:30px;height:28px;border-color:var(--ui-line);color:var(--ui-ink)}
#world #object-cue.wind-cue {width:1px;height:1px;padding:0;display:block;transform:none;background:none;border:0;box-shadow:none;backdrop-filter:none}
#world #object-cue.wind-cue[hidden]{display:none}
#world #object-cue.wind-cue #object-name{position:absolute;left:0;bottom:64px;transform:translateX(-50%);width:140px;margin:0;text-align:center;font:400 15px/1.5 var(--ui-font);color:var(--ui-white);text-shadow:0 1px 3px #25423b,0 2px 7px #25423b}
#world #object-cue.wind-cue::after {display:none}
#world #object-cue.wind-cue #inspect {position:absolute;top:-42px;left:42px;width:max-content;min-width:76px;min-height:44px;padding:8px 12px;justify-content:center;border:0;border-radius:14px;background:var(--ui-glass);backdrop-filter:blur(3px);color:var(--ui-ink);font:400 14px/1.5 var(--ui-font);text-shadow:none;box-shadow:inset 0 1px #ffffff55;white-space:nowrap}
#world #object-cue.wind-cue.cue-left #inspect{left:auto;right:42px}
#world #object-cue.wind-cue #inspect>span{width:auto;white-space:nowrap;text-wrap:nowrap;flex-shrink:0}
#world #object-cue.wind-cue #inspect:hover{color:#182f2b;background:#f5f6eeb5}
#world #object-cue.wind-cue #inspect:focus-visible{outline:1px solid var(--ui-focus);outline-offset:1px;border-radius:5px}
#world #wind-shortcut {display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:0;font:300 12px/1.5 var(--ui-font);color:var(--ui-muted)}
#world #wind-shortcut[hidden] {display:none}
#world #wind-shortcut kbd {display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:22px;padding:0 4px;border:0;background:#ffffff40;border-radius:5px;font:300 12px/1 var(--ui-font);color:var(--ui-ink)}
#world #object-cue.prop-cue {width:1px;height:1px;transform:none}
#world #object-cue.prop-cue::after {display:none}
#world #object-cue.prop-cue #object-name {position:absolute;left:0;bottom:calc(-1 * var(--prop-title-offset));transform:translateX(-50%);width:184px;margin:0;font:400 13px/1.5 var(--ui-font);color:var(--ui-white);text-shadow:0 1px 3px #25423b,0 2px 6px #25423b88}
#world #object-cue.prop-cue #inspect {position:absolute;top:-42px;left:38px;max-width:150px;width:max-content;min-width:44px;min-height:44px;padding:7px 10px;font-size:13px}
#world #object-cue.prop-cue.cue-left #inspect {left:auto;right:38px}
#world #object-cue.prop-cue.cue-key #inspect {width:auto;min-width:82px;height:44px;padding:0 12px;gap:0;border-radius:14px}
#world #object-cue.prop-cue.cue-key #inspect>span {position:absolute;top:48px;left:50%;transform:translateX(-50%);width:126px;font:400 12px/1.5 var(--ui-font);color:var(--ui-white);text-shadow:0 1px 3px #25423b;opacity:0;pointer-events:none}
#world #object-cue.prop-cue.cue-key #inspect:is(:hover,:focus-visible)>span {opacity:1}
#world #object-cue.prop-cue #inspect kbd {border:0;background:none;font-size:14px;white-space:nowrap}
#world #object-cue.plain-cue #inspect{width:max-content;max-width:none;min-height:44px;padding:8px 0;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;color:var(--ui-white);font:400 13px/1.5 var(--ui-font);text-shadow:0 1px 3px #25423b,0 2px 6px #25423b;white-space:nowrap}
#world #object-cue.plain-cue #inspect:hover{background:none;color:var(--ui-white);text-decoration:underline;text-underline-offset:4px}
/* Every encounter uses the same under-object luminous action, without key badges. */
#world #object-cue:is(.prop-cue,.wind-cue) #inspect{
  position:absolute;top:20px;left:0;right:auto;transform:translateX(-50%);
  width:max-content;max-width:180px;min-width:44px;min-height:44px;height:auto;
  padding:8px 4px;gap:0;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;
  color:#fff8dd;font:400 13px/1.6 var(--ui-font);text-align:center;
  text-shadow:0 1px 3px #24493c,0 0 7px #ffe6a399;white-space:normal;
}
#world #object-cue:is(.prop-cue,.wind-cue) #inspect>span{position:static;transform:none;width:auto;opacity:1;color:inherit;font:inherit;text-shadow:inherit;white-space:normal;text-wrap:balance}
#world #object-cue:is(.prop-cue,.wind-cue) #inspect:hover{background:none;color:#fffbed;text-decoration:underline;text-underline-offset:4px}
#world #object-cue:is(.prop-cue,.wind-cue) #inspect:focus-visible{outline:1px solid #fff8dd;outline-offset:2px}
#world #object-cue:is(.prop-cue,.wind-cue) #object-name{font:400 var(--cue-name-size)/1.5 var(--ui-font);color:var(--cue-color);gap:6px;width:184px;overflow-wrap:anywhere}
#world #object-cue.wind-cue #object-name{bottom:72px}
#world #object-cue:is(.prop-cue,.wind-cue) #inspect{font-size:var(--cue-action-size);color:var(--cue-color)}
#world #inspect-dialog :is(#inspect-copy,#find-quote){white-space:pre-line;overflow-wrap:anywhere;text-wrap:pretty}
#world #journal-dialog .journal-entry{min-width:0;overflow-wrap:anywhere}
#world :is(#key-feeling,#key-words){overflow-wrap:anywhere}

/* Soft water-edge light replaces the focused oval's hard outline. */
#world #mirror-touch::after{content:'';position:absolute;left:10%;right:10%;top:12%;bottom:20%;border-radius:50%;pointer-events:none;box-shadow:0 0 12px 3px #fff3bf40,inset 0 0 12px 3px #d9f2e645;opacity:.7;animation:mirror-edge-light 6s ease-in-out infinite alternate}
#world #mirror-touch:focus-visible{outline:0;box-shadow:none}
#world #mirror-touch:focus-visible::after{box-shadow:0 0 15px 4px #fff3bf70,inset 0 0 14px 3px #eff9dc60}
@keyframes mirror-edge-light{from{opacity:.5}to{opacity:.9}}
#world #mirror-dialog{text-align:center;text-shadow:none;padding:24px 28px}
#world #mirror-dialog h2{font:400 24px/1.5 var(--ui-font);color:#fffbed;margin:6px 0 10px;text-shadow:none}
#world #mirror-dialog #mirror-invitation{font:400 14px/1.7 var(--ui-font);color:#e6ede3;margin:0 0 12px;text-shadow:none}
#world #mirror-message{height:120px;gap:10px;max-width:460px;margin:0 auto}
#world #mirror-dialog .mirror-quote{font:400 18px/1.85 var(--ui-font);color:#fffbed;margin:0;text-shadow:none}
#world #mirror-dialog .mirror-reassurance{font:400 13px/1.8 var(--ui-font);color:#e0e8dd;margin:0;text-shadow:none}
#world #mirror-touch-label{font:400 13px/1.7 var(--ui-font);color:#fffbed;text-shadow:0 1px 3px #29483d}
#world #mirror-dialog #mirror-leave{margin:14px auto 0;font:400 14px/1.6 var(--ui-font);text-shadow:none}
@media(max-width:600px){#world #mirror-dialog{padding:20px 16px}#world #mirror-dialog .mirror-quote{font-size:16px}#world #mirror-message{height:130px}}
@media(prefers-reduced-motion:reduce){#world #mirror-touch::after{animation:none}}

/* Rounded reading surfaces; the unframed mirror and pier remain scene-led. */
#world :is(#map-dialog,#journal-dialog,#pause-dialog,#about-dialog,#restart-dialog,#inspect-dialog,#key-dialog,#sea-photos-dialog) {
  border:1px solid #718c862e;border-image:none;border-radius:var(--ui-card-radius);
  background-clip:padding-box;overflow:auto;box-shadow:0 18px 64px #162f3229;
}
#world :is(#map-dialog,#journal-dialog,#pause-dialog,#about-dialog,#restart-dialog) {padding:28px 32px}
#world :is(#map-dialog,#journal-dialog,#pause-dialog,#about-dialog,#restart-dialog)::before {border-radius:calc(var(--ui-card-radius) - 1px) calc(var(--ui-card-radius) - 1px) 0 0}
#world :is(#map-dialog,#journal-dialog,#pause-dialog,#about-dialog,#restart-dialog,#inspect-dialog,#key-dialog,#sea-photos-dialog) .close {top:14px;right:14px}
#world dialog h2 {font-weight:300}
#world dialog :is(.text-button,.quiet-button),#world .notebook-nav :is(button,span),#world #guide-line {font-weight:300}
#world #about-dialog p:not(.eyebrow) {font-size:13px;line-height:1.95;font-weight:300;margin-bottom:18px}
#world #about-dialog .about-manifesto {font-size:15px;font-family:var(--ui-story-font);font-weight:400;border:0;padding:4px 0}
#world #about-dialog[open] p:not(.eyebrow):not(.save-notice) {animation:about-paragraph-in .7s ease-out both;animation-delay:var(--paragraph-delay,0s)}
#world #about-dialog p:nth-of-type(2) {--paragraph-delay:.08s}
#world #about-dialog p:nth-of-type(3) {--paragraph-delay:.24s}
#world #about-dialog p:nth-of-type(4) {--paragraph-delay:.4s}
#world #about-dialog p:nth-of-type(5) {--paragraph-delay:.56s}
#world #about-dialog p:nth-of-type(6) {--paragraph-delay:.72s}
@keyframes about-paragraph-in {from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#world #about-dialog[open] p:not(.eyebrow):not(.save-notice){animation:none}}
#world #inspect-dialog #inspect-title,#world #journal-dialog .journal-entry h3 {font-family:var(--ui-story-font);font-weight:400}
#world #journal-dialog .journal-entry h3 {font-size:20px}
#world #inspect-dialog #inspect-copy,#world #inspect-dialog #find-quote,#world #journal-dialog #pages p,#world #key-words {font-family:var(--ui-story-font);font-weight:400}
#world #pier-scene #pier-line {font-family:var(--ui-story-font);font-weight:400;text-shadow:0 1px 4px #17332e}
#world #pier-scene:not([data-mode="watch"]) .pier-dialogue{left:var(--pier-bubble-x,20px);top:var(--pier-bubble-y,35%);bottom:auto;transform:translateY(-100%);width:var(--pier-bubble-width,280px);box-sizing:border-box;padding:14px 18px;border:1px solid #71867580;border-radius:18px;background:#f6f4e8ed;box-shadow:0 3px 12px #233e3815;text-align:left;min-height:0}
#world #pier-scene:not([data-mode="watch"]) .pier-dialogue::after{display:block;content:'';position:absolute;bottom:-6px;left:auto;right:22px;width:10px;height:10px;transform:rotate(45deg);background:#f6f4e8;border:0;border-bottom:1px solid #71867580;border-right:1px solid #71867580}
#world #pier-scene[data-speaker-side="right"] .pier-dialogue::after{left:22px;right:auto}
#world #pier-scene #pier-line,#world #pier-scene[data-beat="2"] #pier-line{font:400 16px/1.75 var(--ui-font);color:#30483e;text-shadow:none;filter:none;opacity:1;letter-spacing:0;white-space:pre-line;word-break:normal;overflow-wrap:normal;line-break:strict;text-wrap:pretty;margin:6px 0}
#world #pier-speaker{font:400 12px/1.5 var(--ui-font);color:#607166;margin-bottom:6px;text-shadow:none;filter:none;opacity:1;letter-spacing:0}
#world #inspect-dialog #find-quote{color:#354e50;opacity:1;text-shadow:none}
#world #inspect-dialog #find-source{color:#607477;opacity:1;text-shadow:none}
@media(max-width:600px){#world #pier-scene:not([data-mode="watch"]) .pier-dialogue{padding:10px 12px}#world #pier-scene #pier-line,#world #pier-scene[data-beat="2"] #pier-line{font-size:15px}}
#world #pier-scene[data-mode="watch"] #pier-choices{top:var(--pier-actions-top,57%);bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 40px);justify-content:center}
#world :is(#current-place,#loading-text,.arrival,#verse) {font-family:var(--ui-font);font-weight:300}

@media(max-width:650px) {
  :root {--ui-title:22px;--ui-quote:18px;--ui-body:14px;--ui-command:14px}
  #world :is(#map-dialog,#journal-dialog,#pause-dialog,#about-dialog,#restart-dialog) {padding:28px 24px}
  #world :is(#key-dialog,#sea-photos-dialog) {padding:24px 20px}
  #world #inspect-dialog {padding:24px 28px}
  #world #inspect-dialog #inspect-art {height:155px;width:240px;margin:12px auto}
  #world #journal-dialog #pages li {grid-template-columns:92px minmax(0,1fr);gap:16px;padding:20px 0}
  #world #journal-dialog .journal-art {width:92px;height:112px;align-self:start}
  #world #journal-dialog .journal-entry h3 {font-size:18px}
  #world #journal-dialog .journal-actions {gap:20px;margin-top:16px}
  #world .hud .tools {gap:0}
  #world #live-map {width:88px;height:88px;padding:10px 6px}
}
@media(max-height:650px) {
  #world :is(#map-dialog,#journal-dialog,#pause-dialog,#about-dialog,#restart-dialog) h2 {margin-bottom:28px}
  #world :is(#map-dialog,#journal-dialog,#pause-dialog,#about-dialog,#restart-dialog)::before {height:128px}
  #world #inspect-dialog #inspect-art {height:110px;width:170px;margin:8px auto}
}
@media(max-height:550px){#world #live-map{width:80px;height:80px;padding:9px 5px}#world #guide{top:22%;width:min(440px,calc(100% - 100px))}}
@media(min-width:901px) and (min-height:551px) and (pointer:fine){
  #world #live-map{bottom:50px}
  #world .world-actions{bottom:80px}
}