:root {
  --paper:#f4f2e9; --white:#fdfcf7; --ink:#304a3a; --muted:#71806c;
  --line:#dce3d0; --green:#41634c; --pale:#e9eedf; --orange:#c98057;
  font-family:ui-rounded,'Avenir Next',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); background:#acd0cc; font-synthesis:none;
}
* { box-sizing:border-box }
body { margin:0; overflow:hidden; overscroll-behavior:none }
button,input { font:inherit }
button,a,input { -webkit-tap-highlight-color:transparent }
button { cursor:pointer; border:0; background:none; color:inherit }
button:disabled { cursor:default; opacity:.45 }
button:hover:not(:disabled) { filter:brightness(.96) }
a { color:inherit }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #b77e52; outline-offset:3px }
[hidden] { display:none!important }
h1,h2,h3,p { margin:0 }
h1,h2,h3 { font-family:Georgia,'Times New Roman',serif; font-weight:normal }
h2 { font-size:25px; letter-spacing:-.6px }
h3 { font-size:21px }
p { line-height:1.65 }
.game-screen { position:relative; width:100%; height:100svh; height:100dvh; min-height:320px; isolation:isolate; overflow:hidden }
.map-panel { position:absolute; inset:0; overflow:hidden; background:linear-gradient(#b9d9d2,#88b8b8) }
.map { position:absolute; width:min(108vw,calc((100dvh - 50px)*1.5625)); aspect-ratio:1000/640; left:46%; top:47%; transform:translate(-50%,-50%); transition:opacity .3s,transform .4s; }
.island-art { display:block; width:100%; height:100%; overflow:visible }
.game-header { position:absolute; top:max(17px,env(safe-area-inset-top)); left:24px; right:24px; display:flex; align-items:flex-start; justify-content:center; pointer-events:none; z-index:2 }
.game-title { text-align:center; text-shadow:0 2px 14px #e4f2daaa }
.game-title h1 { font-weight:bold; font-size:clamp(38px,4.7vw,60px); line-height:1; letter-spacing:-3px }
.game-title h1 span { color:var(--orange) }
.game-title>span { display:block; font-size:10px; letter-spacing:2px; margin-top:8px; color:#476854 }
.settings-button { position:absolute; right:0; top:0; display:grid; place-items:center; width:45px; height:45px; background:#f6f8eacb; border:1px solid #f9ffedb3; border-radius:50%; box-shadow:0 4px 12px #395e4912; pointer-events:auto }
.settings-button svg { width:23px; height:23px; fill:none; stroke:var(--green); stroke-width:1.7; stroke-linejoin:round }
.settings-button i { position:absolute; bottom:1px; right:0; width:9px; height:9px; border:2px solid #e8eed9; background:#6f9a5c; border-radius:50% }
.settings-button i[data-status=offline] { background:#c47952 }
.settings-button i[data-status=demo] { background:#c9a951 }
.sea-hud { position:absolute; top:28px; left:30px; z-index:2 }
.resources { display:flex; gap:23px; align-items:center }
.resource { display:flex; gap:6px; align-items:center; text-shadow:0 1px 10px #e9f5da }
.resource>span { font-size:24px }
.resource b { font-size:19px; font-weight:650; font-variant-numeric:tabular-nums }
.weather-label { display:block; margin-top:11px; font-size:11px; color:#517663 }
.place-pin { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:5px; padding:5px; z-index:1; min-width:44px; min-height:44px }
.place-pin>span { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#fffdf3e8; border:2px solid #fff; box-shadow:0 3px 8px #32533820; font-size:19px; transition:transform .2s }
.place-pin b { background:#fdfcf0eb; box-shadow:0 2px 4px #32533810; padding:4px 8px; border-radius:6px; font-size:10px; font-weight:550; white-space:nowrap }
.place-pin.selected>span { outline:2px solid var(--green); outline-offset:3px; transform:translateY(-3px) }
.place-pin.selected b { color:#fff; background:var(--green) }
.place-pin.locked>span { font-size:14px; background:#eef0d8c9; border-color:#e5e8d3 }
.place-pin.locked b { color:#7b8976 }
.play-controls { position:absolute; bottom:max(18px,env(safe-area-inset-bottom)); left:24px; right:24px; display:grid; grid-template-columns:minmax(250px,410px) minmax(310px,365px); justify-content:space-between; gap:18px; align-items:end; pointer-events:none; z-index:2 }
.play-controls>* { pointer-events:auto }
.village-controls { display:grid; gap:8px; align-content:end }
.place-detail { display:flex; align-items:center; justify-content:space-between; gap:7px; padding:5px 10px; min-height:42px; border-radius:13px; background:#f5f8e2c9; backdrop-filter:blur(10px); border:1px solid #fcfff099 }
.day-panel { border:1px solid #f9ffeda6; border-radius:17px; background:#f9faeddc; box-shadow:0 8px 25px #39553a12; backdrop-filter:blur(12px); overflow:hidden }
.day-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; background:#edf2dfa3; border-bottom:1px solid #d9e3ca77 }
.day-head h2 { font-size:21px; letter-spacing:-.6px; line-height:1.2 }
.day-chip { flex-shrink:0; font-size:9px; background:#fffff19e; padding:6px 7px; border-radius:7px }
.day-body { padding:10px 14px 12px }
.primary-button { display:block; text-align:center; width:100%; background:var(--green); color:#fffdf6; border-radius:10px; font-size:12px; font-weight:600; padding:12px 14px; margin-top:10px; box-shadow:0 2px 0 #304d3b }
.secondary-button { display:block; width:100%; border:1px solid var(--line); border-radius:10px; padding:10px; text-align:center; font-size:12px; margin-top:10px; background:#f7f7ee }
.day-start .primary-button { margin-top:8px }
.day-start .last-day-reward { font-size:10px; color:#748468 }
.day-start:not(:has(.last-day-reward)) .primary-button { margin:0 }
.hand-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; font-size:9px; color:#7e8c72; letter-spacing:1px }
.action-dots { display:flex; align-items:center; gap:4px; letter-spacing:0 }
.action-dots i { width:7px; height:7px; background:#81a35d; border-radius:50% }
.action-dots i.used { background:#d7decb }
.action-dots b { font-size:9px; font-weight:500; margin-left:4px }
.hand { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.hand-card { display:grid; align-content:center; justify-items:center; gap:3px; min-width:0; padding:6px 4px; border:1px solid #dce4ce; border-radius:10px; background:#fffdf3e8; box-shadow:0 2px 0 #d7dfc7; transition:transform .15s }
.hand-card:hover:not(:disabled) { transform:translateY(-3px) }
.hand-card>span { font-size:27px; line-height:1.2 }
.hand-card b { font-size:9px; font-weight:550; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hand-card small { font-size:10px; color:#647953 }
.used-card { border:1px dashed #cbd8bd; border-radius:10px; min-height:73px; display:grid; place-items:center; color:#9daf8e; font-size:20px }
.day-tools { display:flex; justify-content:space-between; gap:5px; align-items:center; margin-top:10px; font-size:9px; color:#718566 }
.day-tools button { padding:0; font-size:9px }
.morning-preview { font-size:12px; margin:2px 0 4px }
.day-report-button { display:flex; justify-content:space-between; font-size:11px; gap:10px; width:100%; padding:2px 0 }
.day-report-button>span { font-size:10px; color:#748468 }
.save-retry { display:block; width:100%; padding:8px; font-size:11px; background:#f0d4ae }
.text-button { font-size:11px; color:#63745f }
.map-atmosphere { position:absolute; inset:0; pointer-events:none }
.weather-rain .map-atmosphere { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='100'%3E%3Cpath d='M12 0l-5 24M52 44l-5 24M76 12l-5 24M32 70l-5 24' stroke='%23e4f0df' opacity='.3' stroke-width='2'/%3E%3C/svg%3E"); animation:rainfall 1.1s linear infinite }
.weather-fog .map { filter:saturate(.75) }
.weather-fog .map-atmosphere { background:linear-gradient(130deg,#e6eed750,transparent 60%,#e6eed733); animation:fog-drift 12s ease-in-out infinite alternate }
.phase-evening { background:linear-gradient(#c5d7c9,#a0bcba) }
.chimney-smoke { animation:smoke-rise 5s ease-out infinite; transform-box:fill-box; transform-origin:center }
.tree-leaves { animation:leaf-sway 6s ease-in-out infinite alternate; transform-origin:0 18px }
.tree-leaves:nth-of-type(2n) { animation-delay:-2s }
.water-lines { animation:water-shimmer 4s ease-in-out infinite alternate }
.map-cloud { animation:cloud-drift 20s ease-in-out infinite alternate }
.bird-flight { animation:bird-flight 24s ease-in-out infinite alternate }
.bird-wings { animation:bird-flap 1s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center }
.resident-walk { animation:resident-stroll 16s ease-in-out infinite alternate }
.resident-bob { animation:footsteps .8s ease-in-out infinite alternate }
.ambient-boat { animation:boat-bob 3s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center }
.player-aura { animation:player-glow 2s ease-in-out infinite alternate }
.action-feedback { position:absolute; z-index:3; bottom:240px; left:50%; transform:translateX(-50%); pointer-events:none; color:#365937; font-size:21px; font-weight:650; text-shadow:0 2px 10px #f7f9dc }
.action-feedback.show { animation:reward-rise 2s ease-out both }
.toast { position:fixed; top:94px; left:50%; transform:translateX(-50%); background:#304f3def; color:#fffdf1; padding:10px 18px; border-radius:20px; font-size:11px; box-shadow:0 6px 25px #23432d20; max-width:calc(100vw - 30px); width:max-content; z-index:5; line-height:1.5; pointer-events:none }
.connection { margin-top:18px; font-size:11px; line-height:1.8; color:#74816d }
.connection.error,.connection.demo { color:#a46443 }
.connection button { text-decoration:underline; display:inline-block; padding:5px; margin-left:5px }
.settings-menu { display:grid; margin-top:18px }
.settings-menu>button,.settings-menu>a { display:flex; align-items:center; gap:9px; justify-content:space-between; text-align:left; padding:16px 1px; border-bottom:1px solid var(--line); font-size:13px; text-decoration:none }
.settings-menu span { color:#91a082; font-size:11px }
.scene-reading .map { opacity:.12; transform:translate(-50%,-50%) scale(.95) }
.mini-map { position:fixed; bottom:24px; left:24px; width:min(32vw,310px); padding:8px; border-radius:17px; background:#eff4dec9; box-shadow:0 7px 28px #253d2d30; border:1px solid #f5fbe5; color:var(--ink) }
.mini-map-plane { position:relative; aspect-ratio:1000/640; border-radius:12px }
.mini-map>span { display:block; font-size:11px; text-align:center; padding-top:5px }
.mini-map .place-pin { gap:0; padding:0; min-width:24px; min-height:24px }
.mini-map .place-pin>span { width:23px; height:23px; font-size:12px; border-width:1px }
.mini-map .place-pin b { display:none }
.mini-map .place-pin.selected>span { transform:none; outline-offset:1px }
.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.project-card { border:1px solid var(--line); background:var(--white); padding:17px; border-radius:13px; text-align:left }
.project-top { display:flex; align-items:center; gap:10px; margin-bottom:9px }
.project-top>span { font-size:22px; width:36px; height:36px; display:grid; place-items:center; background:#eff0e2; border-radius:10px }
.project-top h3 { font-family:inherit; font-size:12px; font-weight:600 }
.project-top small { font-size:9px; color:var(--muted); display:block; margin-top:4px }
.project-card p { font-size:11px; line-height:1.5; color:var(--muted) }
.progress { height:5px; background:#e8ecdd; border-radius:10px; overflow:hidden; margin-top:14px }
.progress>span { height:100%; display:block; background:#94aa80; border-radius:10px }
.project-meta { display:flex; justify-content:space-between; margin-top:7px; color:var(--muted); font-size:9px }
.project-card.done { background:#edf1e3 }
.journal-entry { display:flex; gap:12px; padding:14px 2px; border-bottom:1px solid var(--line); align-items:flex-start }
.journal-entry>span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#e8ecdf; font-size:13px; flex-shrink:0 }
.journal-entry p { font-size:12px; line-height:1.7 }
.journal-entry small { font-size:9px; color:var(--muted); display:block; margin-top:4px }
.journal-entry.milestone p { font-weight:600; color:var(--green) }
.round-log { display:flex; gap:8px; margin:15px 0 }
.round-log>span { font-size:20px }
.round-log p { font-size:12px; line-height:1.7 }
.gain-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:17px 0 }
.gain-grid>span { border-radius:9px; background:#edf0e3; padding:10px; font-size:11px }
.small-notice { font-size:10px!important; margin-top:15px!important; text-align:center; color:var(--muted) }
 dialog{border:1px solid #dce1cf;border-radius:22px;box-shadow:0 24px 100px #1c322540;color:var(--ink);background:var(--white);padding:25px 30px 30px;width:min(650px,calc(100vw - 32px));max-height:calc(100svh - 40px);overflow-y:auto}dialog::backdrop{background:#263b2f70;backdrop-filter:blur(4px)}.modal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.modal-top .eyebrow{margin:0}.close-button{font-size:25px;width:32px;height:32px;background:#f0f1e6;border-radius:50%;line-height:1}#modalContent h2{font-size:32px;margin-bottom:13px}#modalContent>p,.modal-copy{color:var(--muted);font-size:13px;line-height:1.8}.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:17px 0}.role-option{border:1px solid var(--line);border-radius:12px;padding:13px 6px;text-align:center;background:#f6f6ec}.role-option[aria-pressed=true]{background:#e2ead6;border:2px solid #769066;padding:12px 5px}.role-option>span{font-size:26px;display:block;margin-bottom:8px}.role-option b{font-size:10px;font-weight:500}.role-description{background:#f0f2e7;border-radius:11px;padding:13px;font-size:12px;margin:12px 0;line-height:1.7}.input-label{font-size:11px;display:block;margin-top:18px}.name-input{display:block;width:100%;border:1px solid #d4dbc8;background:#fffef9;border-radius:10px;padding:13px;margin-top:8px;color:var(--ink)}.form-error{font-size:12px;color:#a35940;margin-top:12px}.card-hero{display:grid;place-items:center;height:130px;border-radius:15px;background:var(--pale);font-size:67px;margin-bottom:20px}.choice-button{display:block;border:1px solid var(--line);border-radius:12px;background:#f5f6ec;padding:15px 18px;width:100%;text-align:left;margin-top:12px}.choice-button b{font-size:13px;font-weight:600;display:block}.choice-button small{font-size:11px;color:var(--muted);display:block;margin-top:5px;line-height:1.7}.combination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;background:#eef1e4;padding:16px;border-radius:12px;font-size:11px;margin:18px 0}.combination b{font-size:13px}.collection-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}.collection-tabs button{font-size:11px;border:1px solid var(--line);border-radius:20px;padding:7px 10px}.collection-tabs button.active{background:var(--green);color:#fff}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.collection-card{border:1px solid var(--line);border-radius:12px;padding:15px 10px;text-align:center}.collection-card>span{font-size:32px;display:block;margin-bottom:10px}.collection-card b{font-size:11px;font-weight:500;display:block}.collection-card small{font-size:9px;color:var(--muted);display:block;margin-top:6px}.collection-card.unseen{opacity:.55;background:#f1f1e8}.resident{display:flex;align-items:center;gap:13px;padding:16px 0;border-bottom:1px solid var(--line)}.resident>span{font-size:29px;background:var(--pale);border-radius:12px;width:49px;height:49px;display:grid;place-items:center}.resident b{display:block;font-size:13px}.resident small{color:var(--muted);display:block;font-size:11px;margin-top:5px}.guide-step{display:flex;gap:17px;margin:22px 0}.guide-step>span{font:22px Georgia,serif;color:#91a180;background:var(--pale);border-radius:50%;width:39px;height:39px;display:grid;place-items:center;flex-shrink:0}.guide-step h3{font-size:19px;margin-bottom:5px}.guide-step p{font-size:12px;color:var(--muted);line-height:1.8}.weather-rain .map:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(110deg,transparent 0 40px,#f0f4e128 41px 42px,transparent 43px 85px);pointer-events:none}.weather-fog .island-art{opacity:.75}.weather-wind .map-cloud{animation:drift 10s ease-in-out infinite alternate}.day-quote{font-family:Georgia,serif;font-size:17px!important;line-height:1.7!important;color:var(--ink)!important;margin:17px 0}.badge{font-size:10px;padding:6px 9px;background:#e9eedb;border-radius:20px;display:inline-block;margin:4px}.modal-projects{margin-top:20px}.profile-level{font-size:12px;margin:12px 0;color:var(--muted)}.empty-message{font-size:12px;color:var(--muted);padding:20px 0}.busy{pointer-events:none;opacity:.7}.project-modal-progress{font-size:12px;color:var(--muted);margin-top:10px}.status-box{font-size:12px;background:var(--pale);padding:14px;border-radius:12px;margin:16px 0}.resident.you b:after{content:' · þú';font-weight:400;color:var(--muted)}
dialog.interaction { position:fixed; margin:0; left:auto; right:max(24px,5vw); top:50%; transform:translateY(-50%); width:min(470px,calc(100vw - 350px)); max-height:calc(100dvh - 50px); overflow-y:auto }
dialog.interaction::backdrop { background:#48695266; backdrop-filter:blur(2px) }
#modalContent .card-hero { height:95px; font-size:52px }
#modalContent .combination { gap:8px; font-size:10px; padding:12px }
@keyframes rainfall { to { background-position:-30px 100px } }
@keyframes fog-drift { to { opacity:.4 } }
@keyframes smoke-rise { 0% { opacity:0; transform:translateY(4px) scale(.8) } 30% { opacity:.6 } 100% { opacity:0; transform:translateY(-22px) scale(1.5) } }
@keyframes leaf-sway { to { transform:rotate(3deg) } }
@keyframes water-shimmer { to { opacity:.3; transform:translateX(8px) } }
@keyframes cloud-drift { to { transform:translateX(35px) } }
@keyframes bird-flight { to { transform:translate(70px,-12px) } }
@keyframes bird-flap { to { transform:scaleY(.5) } }
@keyframes resident-stroll { 0%,15% { transform:translate(0,0) } 50% { transform:translate(var(--walk-x,35px),var(--walk-y,-10px)) } 85%,100% { transform:translate(6px,3px) } }
@keyframes footsteps { to { transform:translateY(-1.5px) } }
@keyframes boat-bob { to { transform:translateY(-3px) rotate(2deg) } }
@keyframes player-glow { to { opacity:.4 } }
@keyframes reward-rise { 0% { opacity:0; transform:translate(-50%,20px) } 20% { opacity:1 } 75% { opacity:1 } 100% { opacity:0; transform:translate(-50%,-35px) } }
@media (max-width:900px) and (min-width:641px) {
  .sea-hud { top:85px; left:20px }
  .map { left:50%; top:43%; width:min(115vw,calc((100dvh - 140px)*1.5625)) }
  .play-controls { left:16px; right:16px; grid-template-columns:minmax(240px,1fr) minmax(290px,340px); gap:15px }
}
@media (max-width:640px) {
  .game-header { top:max(13px,env(safe-area-inset-top)); left:14px; right:14px }
  .game-title h1 { font-size:41px; letter-spacing:-2.5px }
  .game-title>span { font-size:9px; margin-top:5px; letter-spacing:1.5px }
  .settings-button { width:40px; height:40px }
  .settings-button svg { width:21px; height:21px }
  .sea-hud { top:82px; left:17px; right:17px; display:flex; align-items:center; justify-content:space-between; gap:5px }
  .resources { gap:15px }
  .resource { gap:3px }
  .resource>span { font-size:20px }
  .resource b { font-size:16px }
  .weather-label { margin:0; font-size:9px }
  .map { left:50%; top:41%; width:min(124vw,calc((100dvh - 215px)*1.5625)); }
  .place-pin { padding:4px; gap:3px; min-width:40px; min-height:40px }
  .place-pin>span { width:29px; height:29px; font-size:16px }
  .place-pin b { font-size:8px; padding:3px 5px }
  .place-pin.locked>span { font-size:12px }
  .play-controls { bottom:max(10px,env(safe-area-inset-bottom)); left:12px; right:12px; grid-template-columns:1fr; gap:8px }
  .village-controls { gap:7px }
  .place-detail { min-height:36px; padding:3px 10px; border-radius:10px }
  .day-panel { border-radius:13px }
  .day-head { padding:9px 12px }
  .day-head h2 { font-size:20px }
  .day-body { padding:8px 12px 10px }
  .primary-button { padding:11px; font-size:11px; margin-top:8px }
  .hand { gap:8px }
  .hand-card { padding:4px; gap:2px }
  .hand-card>span { font-size:26px }
  .hand-card b { font-size:9px }
  .hand-card small { font-size:9px }
  .used-card { min-height:64px }
  .hand-top { margin-bottom:6px; font-size:8px }
  .day-tools { margin-top:6px; font-size:8px }
  .day-tools button { font-size:8px }
  .toast { top:119px; font-size:10px; padding:9px 13px }
  .action-feedback { bottom:310px; font-size:19px }
  dialog { padding:18px; max-height:calc(100dvh - 36px) }
  #modalContent h2 { font-size:28px }
  .project-grid { gap:8px }
  .project-card { padding:12px }
  .project-top { gap:6px }
  .project-top h3 { font-size:11px }
  .project-top>span { width:30px; height:30px; font-size:20px }
  .project-meta { font-size:8px }
  dialog.interaction { left:12px; right:12px; top:74px; transform:none; width:calc(100vw - 24px); max-height:calc(100dvh - 220px); }
  .mini-map { left:14px; bottom:max(12px,env(safe-area-inset-bottom)); width:175px; padding:5px; border-radius:12px }
  .mini-map>span { font-size:9px; padding-top:3px }
  .mini-map .place-pin>span { width:20px; height:20px; font-size:10px }
  .mini-map .place-pin { min-width:23px; min-height:23px }
}
@media (max-height:670px) and (max-width:640px) {
  .game-header { top:10px }
  .game-title h1 { font-size:33px }
  .game-title>span { margin-top:4px }
  .sea-hud { top:64px }
  .map { top:38%; width:min(122vw,calc((100dvh - 140px)*1.5625)) }
  .place-pin b { display:none }
  .place-pin.selected b { display:block }
  .day-head { padding:7px 10px }
  .day-head h2 { font-size:18px }
  .day-body { padding:6px 10px 8px }
  .primary-button { padding:9px }
  .play-controls { gap:6px; bottom:8px; left:10px; right:10px }
  .village-controls { gap:5px }
  .hand-card>span { font-size:23px }
  .day-tools { display:none }
  dialog.interaction { top:55px; max-height:calc(100dvh - 185px) }
  .mini-map { width:150px }
}
@media (max-height:550px) and (min-width:641px) {
  .game-header { top:12px }
  .game-title h1 { font-size:35px }
  .game-title>span { margin-top:4px; font-size:8px }
  .sea-hud { top:20px; left:20px }
  .resources { gap:14px }
  .resource>span { font-size:20px }
  .resource b { font-size:16px }
  .weather-label { font-size:9px }
  .map { width:calc((100dvh - 20px)*1.5625); left:45%; top:45% }
  .play-controls { left:12px; right:12px; bottom:10px; grid-template-columns:240px 290px }
  .day-head { padding:8px 10px }
  .day-head h2 { font-size:17px }
  .day-body { padding:7px 10px }
  .primary-button { padding:9px }
  .hand-card>span { font-size:23px }
  .day-tools { display:none }
  .place-pin b { font-size:8px }
  dialog.interaction { right:12px; max-height:calc(100dvh - 20px); width:min(420px,calc(100vw - 230px)) }
  .mini-map { width:190px; bottom:12px; left:12px }
}
@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important }
}
.still-world *, .still-world *:before, .still-world *:after { animation:none!important }
/* Keep the mini map anchored to the viewport, outside the decision panel. */
dialog.interaction { top:max(24px,8dvh); transform:none }
@media(max-width:640px) { dialog.interaction { top:74px } }
@media(max-height:670px) and (max-width:640px) { dialog.interaction { top:55px } }
@media(max-width:420px) {
  .role-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .role-option { display:flex; align-items:center; gap:7px; padding:10px 7px; text-align:left }
  .role-option[aria-pressed=true] { padding:9px 6px }
  .role-option>span { margin:0; font-size:23px }
  .role-option b { font-size:9px }
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
.eyebrow { font-size:10px; letter-spacing:1.5px; color:#7c8c71; font-weight:600 }
.action-feedback { opacity:0 }
/* Story lives at the selected map location. */
.role-corner { position:absolute; right:59px; top:0; pointer-events:auto; display:flex; align-items:center; gap:9px; text-align:left; padding:7px 12px 7px 8px; border-radius:14px; background:#f7f9e9cf; border:1px solid #fcfff099; max-width:220px }
.role-corner>span:first-child { font-size:26px; display:grid; place-items:center; width:32px }
.role-corner b,.role-corner small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px }
.role-corner b { font-size:12px; font-weight:600 }
.role-corner small { font-size:9px; color:#6b8061; margin-top:3px }
.place-detail { display:block; padding:17px 20px; border-radius:18px; background:#f9faeddc; box-shadow:0 8px 25px #39553a12; min-height:140px }
.narrative-heading { display:flex; align-items:center; gap:10px }
.narrative-heading>span:first-child { font-size:29px; flex-shrink:0 }
.narrative-heading>div { flex:1; min-width:0 }
.narrative-heading small { display:block; font-size:9px; color:#718465; margin-bottom:4px }
.narrative-heading h2 { font-size:23px; line-height:1.15 }
.narrative-step { font-size:12px; font-variant-numeric:tabular-nums; color:#6b8657 }
.narrative-copy { font-size:12px; line-height:1.7; margin-top:10px }
.narrative-context { font-size:10px; line-height:1.5; color:#718465; margin-top:7px }
.place-detail .progress { margin-top:10px; height:5px }
.narrative-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; font-size:10px; color:#6b8061 }
.narrative-actions:empty { display:none }
.narrative-button { font-size:11px; padding:7px 0; text-align:left; color:#41634c }
.contribute-button { padding:9px 11px; background:#41634c; color:#fffdf6; border-radius:8px }
.player-position { transition:transform .8s ease-in-out }
.player-aura { animation:player-halo 3s ease-in-out infinite }
@keyframes player-halo { 0%,100% { opacity:.2; r:18px } 50% { opacity:.4; r:23px } }
.project-pin { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:3px; padding:3px; z-index:1; min-width:44px; min-height:44px }
.project-pin.selected { z-index:2 }
@media (max-width:900px) and (min-width:641px) {
 .game-title { transform:translateX(-30px) }
 .role-corner { max-width:170px }
 .role-corner b,.role-corner small { max-width:105px }
}
@media (max-width:640px) {
 .game-header { justify-content:flex-start; left:16px; right:16px; top:16px }
 .game-title { text-align:left }
 .game-title h1 { font-size:38px }
 .game-title>span { font-size:8px; letter-spacing:.9px; margin-top:5px }
 .settings-button { width:38px; height:38px }
 .role-corner { right:47px; padding:5px 8px; gap:5px; max-width:180px; border-radius:12px }
 .role-corner>span:first-child { font-size:23px; width:25px }
 .role-corner b { font-size:10px }
 .role-corner small { font-size:8px }
 .role-corner b,.role-corner small { max-width:120px }
 .sea-hud { top:82px; left:19px; right:19px; display:flex; justify-content:space-between; align-items:center }
 .resources { gap:15px }
 .resource>span { font-size:19px }
 .resource b { font-size:15px }
 .weather-label { margin:0; font-size:9px }
 .play-controls { gap:8px }
 .place-detail { padding:12px 14px; min-height:110px }
 .narrative-heading { gap:8px }
 .narrative-heading>span:first-child { font-size:25px }
 .narrative-heading h2 { font-size:21px }
 .narrative-heading small { font-size:8px; margin-bottom:3px }
 .narrative-copy { font-size:11px; line-height:1.6; margin-top:7px }
 .narrative-context { font-size:9px; margin-top:5px }
 .narrative-actions { margin-top:5px; gap:6px }
 .narrative-button { font-size:10px; padding:6px 0 }
 .contribute-button { padding:8px 10px }
 .place-detail .progress { margin-top:7px }
}
@media (max-height:670px) and (max-width:640px) {
 .game-header { top:10px; left:12px; right:12px }
 .game-title h1 { font-size:31px }
 .game-title>span { font-size:7px }
 .role-corner { max-width:150px }
 .role-corner b,.role-corner small { max-width:95px }
 .sea-hud { top:65px; left:12px; right:12px }
 .resources { gap:10px }
 .resource>span { font-size:17px }
 .resource b { font-size:13px }
 .place-detail { padding:9px 11px; min-height:90px }
 .narrative-heading h2 { font-size:18px }
 .narrative-heading>span:first-child { font-size:22px }
 .narrative-copy { font-size:10px; line-height:1.45; margin-top:5px }
 .narrative-context { font-size:8px; line-height:1.4 }
 .narrative-actions { margin-top:3px }
 .project-pin { min-width:32px; min-height:32px; padding:2px }
 .place-pin { min-width:32px; min-height:32px; padding:2px }
 .place-pin>span { width:27px; height:27px; font-size:15px }
}
@media (max-height:550px) and (min-width:641px) {
 .game-title { transform:translateX(-35px) }
 .role-corner { max-width:170px; padding:5px 7px; gap:5px }
 .role-corner>span:first-child { font-size:23px; width:25px }
 .role-corner b { font-size:10px }
 .role-corner small { font-size:8px }
 .place-detail { padding:10px 12px; min-height:100px }
 .narrative-heading h2 { font-size:18px }
 .narrative-heading>span:first-child { font-size:22px }
 .narrative-copy { font-size:10px; line-height:1.45; margin-top:6px }
 .narrative-context { font-size:8px; line-height:1.4 }
 .narrative-actions { margin-top:4px }
 .narrative-button { font-size:9px; padding:5px 0 }
 .contribute-button { padding:7px 9px }
}
/* Labels float outside the hit area so nearby locations stay clickable. */
.project-pin,.place-pin { width:44px; height:44px; justify-content:center; gap:0 }
@media(max-height:670px) and (max-width:640px) {
 .project-pin,.place-pin { width:32px; height:32px }
}
/* The journey has its own visual rhythm; tools and local choices stay light. */
.day-panel { background:#f9faedde; border-radius:17px }
.day-body { padding:12px 13px 13px }
.hand-top { letter-spacing:.8px; margin-bottom:7px }
.hand-top>span:last-child { letter-spacing:0 }
.journey-footer { padding:13px 15px 12px; background:#304e4b; color:#f5efd8; border-radius:0 0 15px 15px }
.journey-footer:first-child { border-radius:15px }
.chapter-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; width:100%; padding:0; font-size:12px }
.chapter-heading>span { font-family:Georgia,serif; font-size:16px }
.chapter-heading small { font-size:10px; color:#c6cdb5 }
.chapter-track { display:flex; gap:5px; margin-top:8px }
.chapter-track i { position:relative; flex:1; height:3px; border-radius:3px; background:#58706a; overflow:hidden }
.chapter-track i:after { content:''; position:absolute; inset:0 auto 0 0; width:var(--chapter-progress); background:#d9b978; transition:width .4s }
.chapter-track .current { background:#819082 }
.day-route { display:flex; align-items:center; gap:9px; margin-top:10px; color:#c7d0bb }
.day-route>span { font-size:9px }
.day-route>div { display:flex; justify-content:space-between; align-items:center; flex:1; position:relative }
.day-route>div:before { content:''; position:absolute; left:9px; right:9px; top:50%; height:1px; background:#748778 }
.day-route i { position:relative; display:grid; place-items:center; width:21px; height:21px; background:#304e4b; border:1px solid #6e8376; border-radius:50%; font-size:10px; font-style:normal; color:#a8baaa }
.day-route i.done { background:#668476; border-color:#8fa58b; color:#f5efd8 }
.day-route i.current { background:#dfc48b; color:#304e4b; border-color:#f4dfa9; box-shadow:0 0 0 3px #d9c28a20 }
.journey-button { display:flex; width:100%; justify-content:space-between; align-items:center; gap:10px; text-align:left; padding:10px 0 0; margin-top:7px; border-top:1px solid #7e90754d; color:#f8edd0 }
.journey-button b,.journey-button small { display:block }
.journey-button b { font-size:13px; font-weight:550 }
.journey-button small { font-size:9px; color:#c7d0b9; line-height:1.4; margin-top:3px }
.journey-arrow { display:grid; place-items:center; width:33px; height:33px; flex-shrink:0; border-radius:50%; background:#ddc28b; color:#304e4b; font-size:22px; transition:transform .2s }
.journey-button:hover .journey-arrow { transform:translateX(3px) }
.story-chapters { margin-top:23px }
.story-chapter { position:relative; display:flex; gap:14px; padding-bottom:23px }
.story-chapter:not(:last-child):before { content:''; position:absolute; left:16px; width:1px; top:33px; bottom:0; background:#d4dec9 }
.chapter-number { display:grid; place-items:center; width:33px; height:33px; border-radius:50%; background:#e7eddc; flex-shrink:0; font-size:12px }
.story-chapter.current .chapter-number { background:#304e4b; color:#f5e3b7 }
.story-chapter.done .chapter-number { background:#87a26a; color:#fff }
.story-chapter>div { flex:1; min-width:0 }
.story-chapter small { font-size:9px; letter-spacing:1px; color:#7e9075 }
.story-chapter h3 { margin-top:4px }
.story-chapter p { font-size:12px; margin-top:6px; color:#6c7c63 }
.chapter-projects { display:grid; gap:4px; margin-top:9px }
.chapter-projects button { text-align:left; padding:8px; border-radius:7px; background:#ecf0e1; font-size:11px }
.chapter-projects button>span { float:right; color:#7f936d; font-size:10px }
/* The drawings are the controls; information lives below the map. */
.project-pin.suggested:after { content:'✦'; position:absolute; right:-3px; top:-5px; font-size:14px; color:#aa8141; text-shadow:0 1px 3px #fff5d1 }
.npc-pin { position:absolute; transform:translate(-50%,-50%); z-index:2; width:43px; height:57px; padding:0; filter:drop-shadow(0 2px 2px #36583920) }
.npc-figure { display:block; height:100%; width:100%; overflow:visible }
.npc-idle { animation:npc-breathe 3.5s ease-in-out infinite alternate; transform-origin:32px 68px }
@keyframes npc-breathe { from { transform:translateY(0) } to { transform:translateY(-1.4px) } }
.island-art [data-art="house"] [data-stage="0"] .chimney-smoke,
.island-art [data-art="house"] [data-stage="1"] .chimney-smoke { display:none }
.conversation-detail { background:#fcf8e7e6 }
.conversation-portrait { width:36px; height:45px; display:block }
.friendship { color:#b28f62; font-size:12px }
.npc-quote { font-family:Georgia,serif; font-size:13px; line-height:1.5; margin-top:9px; color:#6a7960 }
.conversation-question { font-size:12px; margin-top:8px; line-height:1.55 }
.conversation-choices { display:grid; gap:5px; margin-top:9px }
.conversation-choices button { display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid #d8dfc7; border-radius:8px; background:#f8f9ec; text-align:left; font-size:11px }
.conversation-choices button>span:first-child { font-size:9px; color:#7c926b }
.conversation-choices button>span:last-child { margin-left:auto; color:#8ca17a }
.conversation-cost { display:block; margin-top:7px; color:#7a8b6e; font-size:9px; line-height:1.4 }
.conversation-answer { font-family:Georgia,serif; font-size:15px; line-height:1.6; margin-top:9px }
.still-world .player-position { transition:none }
@media(max-width:640px) {
 .day-body { padding:8px 11px 9px }
 .hand-card>span { font-size:23px }
 .hand-card { gap:1px; padding:3px }
 .used-card { min-height:55px }
 .journey-footer { padding:10px 12px }
 .chapter-heading>span { font-size:14px }
 .chapter-track { margin-top:5px }
 .day-route { margin-top:7px }
 .day-route i { width:18px; height:18px; font-size:9px }
 .journey-button { padding-top:7px; margin-top:6px }
 .journey-button b { font-size:12px }
 .journey-button small { font-size:8px }
 .journey-arrow { width:28px; height:28px; font-size:20px }
 .npc-pin { width:32px; height:40px }
 .conversation-portrait { width:28px; height:35px }
 .npc-quote { font-size:12px; margin-top:6px }
 .conversation-question { font-size:11px; margin-top:6px; line-height:1.45 }
 .conversation-choices { margin-top:7px; gap:4px }
 .conversation-choices button { padding:7px 9px; font-size:10px }
 .conversation-answer { font-size:13px; margin-top:6px }
}
@media(max-height:670px) and (max-width:640px) {
 .day-body { padding:6px 10px 7px }
 .hand-card>span { font-size:20px }
 .hand-card small,.hand-card b { font-size:8px }
 .hand-top { margin-bottom:4px; font-size:7px }
 .used-card { min-height:49px }
 .journey-footer { padding:8px 10px }
 .chapter-heading>span { font-size:12px }
 .chapter-heading small { font-size:8px }
 .day-route { margin-top:5px; gap:6px }
 .day-route>span { font-size:8px }
 .day-route i { width:16px; height:16px; font-size:8px }
 .journey-button { padding-top:6px; margin-top:5px }
 .journey-button b { font-size:11px }
 .journey-arrow { width:25px; height:25px; font-size:18px }
 .npc-pin { width:23px; height:29px }
 .npc-quote { font-size:10px; line-height:1.4; margin-top:4px }
 .conversation-question { font-size:10px; margin-top:5px; line-height:1.4 }
 .conversation-choices { margin-top:5px }
 .conversation-choices button { font-size:9px; padding:6px 8px }
 .conversation-cost { font-size:8px; margin-top:5px }
 .conversation-answer { font-size:12px; line-height:1.45 }
}
@media(max-height:550px) and (min-width:641px) {
 .day-body { padding:7px 10px }
 .hand-card>span { font-size:21px }
 .used-card { min-height:57px }
 .journey-footer { padding:9px 11px }
 .chapter-heading>span { font-size:13px }
 .chapter-track { margin-top:5px }
 .day-route { margin-top:6px }
 .day-route i { width:17px; height:17px }
 .journey-button { padding-top:6px; margin-top:5px }
 .journey-button b { font-size:11px }
 .journey-arrow { width:26px; height:26px; font-size:19px }
 .npc-pin { width:31px; height:40px }
 .npc-quote,.conversation-question { font-size:10px; line-height:1.4; margin-top:5px }
 .conversation-choices { margin-top:6px }
 .conversation-choices button { font-size:9px; padding:6px }
}
@media(max-height:670px) and (max-width:640px) {
 .project-pin,.place-pin { width:28px; height:28px; min-width:28px; min-height:28px }
 .place-pin>span { width:25px; height:25px }
}
.journey-confirm { display:block; width:100%; text-align:center; margin-top:18px; padding:13px 16px; border-radius:10px; background:#304e4b; color:#f6e5be; font-size:12px }
@media(max-width:640px) {
 .talking .hand-card { display:flex; justify-content:center; gap:6px; height:34px; padding:4px }
 .talking .hand-card b { display:none }
 .talking .hand-card>span { font-size:20px }
 .talking .used-card { min-height:34px }
}
@media(max-height:670px) and (max-width:640px) {
 .talking .npc-quote { font-size:11px }
 .talking .conversation-question { font-size:11px }
 .talking .conversation-choices button { font-size:10px }
}
@media(max-height:550px) and (min-width:641px) {
 .play-controls { grid-template-columns:minmax(175px,28vw) minmax(225px,32vw) }
 .project-pin,.place-pin { width:32px; height:32px; min-width:32px; min-height:32px; padding:2px }
 .place-pin>span { width:28px; height:28px; font-size:15px }
}
/* Quiet scenery and vivid interactive objects form two readable visual layers. */
#map .map-scenery { filter:saturate(.55); opacity:.64; pointer-events:none }
#map [data-npc-scenery] { opacity:.55 }
#map [data-map-project],#map [data-area] { cursor:pointer; filter:saturate(1.35) contrast(1.06) drop-shadow(0 1px 1px #fff2c4); transition:filter .2s }
#map [data-area].area-locked { filter:saturate(.7); opacity:.8 }
#map .project-illustration { transform-box:fill-box; transform-origin:50% 85%; transform:scale(.92); transition:transform .24s cubic-bezier(.2,.8,.2,1) }
#map [data-area] { transform-box:fill-box; transform-origin:50% 80%; transition:scale .24s,filter .2s }
#map [data-art].inspecting .project-illustration { transform:scale(1.12); animation:object-greeting .65s ease-out }
#map [data-area].inspecting { scale:1.07; filter:saturate(1.5) brightness(1.05) drop-shadow(0 2px 2px #fff2c4) }
#map [data-art].inspecting { filter:saturate(1.5) brightness(1.04) drop-shadow(0 2px 2px #fff2c4) }
#map .npc-pin { filter:saturate(1.35) contrast(1.06) drop-shadow(0 2px 2px #36583920) }
#map .npc-figure { transform:scale(1.05); transform-origin:50% 85%; transition:transform .24s }
#map .npc-pin.inspecting .npc-figure { transform:scale(1.25); animation:npc-greeting .65s ease-out }
#map .project-pin,#map .place-pin { background:none; border:0; box-shadow:none; outline:none }
#map .project-pin.suggested:after { display:none }
#map .project-pin:focus-visible,#map .place-pin:focus-visible,#map .npc-pin:focus-visible { outline:2px solid #e9bf70; outline-offset:5px; border-radius:50% }
.detail-progress { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; margin-top:9px; height:5px }
.detail-progress i { background:#dbe3ca; border-radius:3px }
.detail-progress i.done { background:#6e944f }
@keyframes object-greeting {
  0% { transform:scale(.92) rotate(0) }
  40% { transform:scale(1.15) rotate(-1.5deg) }
  70% { transform:scale(1.11) rotate(1deg) }
  100% { transform:scale(1.12) rotate(0) }
}
@keyframes npc-greeting {
  0% { transform:scale(1.05) rotate(0) }
  40% { transform:scale(1.28) rotate(-4deg) }
  70% { transform:scale(1.23) rotate(3deg) }
  100% { transform:scale(1.25) rotate(0) }
}
@media(hover:none) {
 #map [data-art].chosen .project-illustration { transform:scale(1.08) }
 #map [data-area].chosen { scale:1.05 }
 #map .npc-pin.selected .npc-figure { transform:scale(1.2) }
}
.narrative-actions { flex-wrap:wrap; justify-content:flex-start }
.area-option { flex-shrink:0; border:1px solid #d9e1c9; padding:7px 8px; border-radius:8px; background:#f8f9ec; font-size:10px }
@media(max-width:640px) {
 .area-option { font-size:9px; padding:6px 7px }
}
@media(max-height:670px) and (max-width:640px) {
 .area-option { font-size:8px; padding:5px 6px }
 .narrative-actions { gap:5px }
}
@media(max-height:550px) and (min-width:641px) {
 .area-option { font-size:9px; padding:5px 6px }
}

.npc-figure,.place-pin>span { pointer-events:none }

/* A day opens and closes as one scene; the map carries the moments between. */
.day-moment { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; padding:108px 24px 22px; background:linear-gradient(160deg,#e4ecd7ef,#e9e5c7e8); backdrop-filter:blur(4px) }
.day-moment[data-phase=evening] { color:#f4ead1; background:linear-gradient(160deg,#304a5cf2,#3e6055f0) }
.day-paused .game-header { z-index:4 }
.day-paused .sea-hud { opacity:0; pointer-events:none }
.day-paused #map { opacity:.45 }
.moment-content { width:min(820px,100%); max-height:100%; overflow:auto; display:flex; flex-direction:column; align-items:center; text-align:center; padding:4px 8px; scrollbar-width:thin }
.moment-eyebrow { font-size:10px; letter-spacing:2px; color:#738665 }
[data-phase=evening] .moment-eyebrow { color:#b8c7ae }
.moment-art { width:min(560px,100%); height:190px; flex-shrink:0; margin:8px 0 }
.moment-content h2 { font-size:clamp(30px,3.4vw,46px); line-height:1.12; letter-spacing:-1px }
.moment-intro { max-width:540px; margin-top:12px; font-size:14px; line-height:1.6; color:#6d8061 }
[data-phase=evening] .moment-intro { color:#c2cebb }
.moment-controls { width:min(410px,100%); display:grid; justify-items:center; gap:12px; margin-top:24px; flex-shrink:0 }
.moment-cta { width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px 28px; background:#35584b; color:#fff2cd; border-radius:18px; font-size:20px; font-weight:600; box-shadow:0 5px 0 #274638,0 12px 25px #3b553222; transition:transform .2s,box-shadow .2s }
.moment-cta span { font-size:30px; line-height:1 }
.moment-cta:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 8px 0 #274638,0 15px 28px #3b553222 }
[data-phase=evening] .moment-cta { background:#edce8e; color:#314e4c; box-shadow:0 5px 0 #b99f6d,0 12px 25px #1c343322 }
[data-phase=evening] .moment-cta:hover:not(:disabled) { box-shadow:0 8px 0 #b99f6d,0 15px 28px #1c343322 }
.moment-read,.moment-chapter { font-size:11px; color:inherit; opacity:.8; padding:5px 8px }
.moment-chapter { margin-top:18px; font-size:10px; color:#748567 }
[data-phase=evening] .moment-chapter { color:#bbcaad }
.moment-choices { width:min(510px,100%); display:grid; gap:10px; margin-top:20px }
.moment-choice { display:flex; justify-content:space-between; gap:20px; align-items:center; text-align:left; border:1px solid #cbd7b6; padding:18px 22px; border-radius:14px; background:#fff9e5d9; transition:transform .2s,background .2s }
.moment-choice:hover:not(:disabled) { transform:translateY(-2px); background:#fffbee }
.moment-choice b { display:block; font-size:15px }
.moment-choice small { display:block; font-size:12px; margin-top:5px; color:#7d8d6d; line-height:1.4 }
.moment-choice-gain { white-space:nowrap; font-size:17px }
.moment-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:12px; margin-top:22px }
.moment-action { min-width:0; background:#ffffff0d; border:1px solid #d9e5c922; border-radius:16px; padding:17px 14px }
.moment-action>span { display:block; font-size:35px; margin-bottom:10px }
.moment-action h3 { font-size:18px; line-height:1.25 }
.moment-action p { font-size:11px; line-height:1.4; color:#beceb5; margin-top:5px }
.moment-morning { font-size:11px; color:#bdc9b4; margin-top:14px }
.moment-rewards { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:17px; font-size:13px; margin-top:12px; color:#ead7a8 }
.day-sky { position:absolute; left:29px; top:109px; width:180px; padding:0; z-index:2; text-align:center; color:#54765b }
.day-sky svg { width:100%; display:block }
.day-sky>span { display:block; margin-top:1px; font-size:10px }
.next-hint { font-size:10px; padding:2px 0; color:#587957; letter-spacing:0 }
@media(max-width:640px) {
 .day-moment { padding:86px 15px 14px }
 .moment-art { height:155px; margin:7px 0 }
 .moment-content h2 { font-size:32px }
 .moment-intro { font-size:12px; margin-top:10px }
 .moment-controls { margin-top:22px; gap:9px }
 .moment-cta { padding:21px 22px; font-size:17px; border-radius:15px }
 .moment-cta span { font-size:27px }
 .moment-eyebrow { font-size:9px; letter-spacing:1.5px }
 .moment-chapter { margin-top:13px }
 .moment-choices { gap:8px; margin-top:16px }
 .moment-choice { padding:16px 15px; gap:12px }
 .moment-choice b { font-size:13px }
 .moment-choice small { font-size:11px }
 .moment-actions { gap:7px; margin-top:17px }
 .moment-action { padding:13px 7px; border-radius:11px }
 .moment-action>span { font-size:29px; margin-bottom:8px }
 .moment-action h3 { font-size:13px }
 .moment-action p { font-size:10px }
 .moment-rewards { gap:10px; font-size:11px }
 .moment-morning { font-size:10px; margin-top:10px }
 .day-sky { left:16px; top:119px; width:126px }
 .day-sky>span { font-size:8px; margin-top:0 }
}
@media(max-height:670px) and (max-width:640px) {
 .day-moment { padding:74px 12px 10px }
 .moment-art { height:115px; margin:4px 0 }
 [data-phase=morning] .moment-art,[data-phase=evening] .moment-art { height:62px }
 .moment-content h2 { font-size:26px; letter-spacing:-.5px }
 .moment-intro { font-size:11px; line-height:1.45; margin-top:7px }
 .moment-eyebrow { font-size:8px }
 .moment-controls { margin-top:14px; gap:7px }
 .moment-cta { padding:17px 18px; font-size:15px; border-radius:13px }
 .moment-cta span { font-size:24px }
 .moment-chapter { font-size:9px; margin-top:7px }
 .moment-read { font-size:10px; padding:3px }
 .moment-actions { margin-top:13px; gap:5px }
 .moment-action { padding:10px 5px }
 .moment-action>span { font-size:26px; margin-bottom:6px }
 .moment-action h3 { font-size:12px }
 .moment-action p { font-size:9px }
 .moment-morning { font-size:9px; margin-top:8px }
 .moment-rewards { font-size:10px; gap:8px; margin-top:7px }
 .moment-choices { gap:6px; margin-top:12px }
 .moment-choice { padding:13px 12px }
 .moment-choice b { font-size:12px }
 .moment-choice small { font-size:10px; margin-top:3px }
 .day-sky { top:102px; width:105px }
 .next-hint { font-size:8px }
}
@media(max-height:550px) and (min-width:641px) {
 .day-moment { padding:84px 18px 12px }
 .moment-content { display:grid; grid-template-columns:minmax(210px,.85fr) minmax(300px,1.15fr); gap:5px 20px; text-align:left }
 .moment-eyebrow { grid-column:1; grid-row:1; font-size:8px; text-align:center }
 .moment-art { grid-column:1; grid-row:2 / 6; height:125px; margin:0 }
 .moment-content h2 { grid-column:2; grid-row:1; font-size:28px }
 .moment-intro { grid-column:2; grid-row:2; font-size:11px; margin:0; line-height:1.45 }
 .moment-choices,.moment-actions { grid-column:2; grid-row:3; margin-top:5px }
 .moment-choice { padding:10px 12px }
 .moment-choice b { font-size:12px }
 .moment-choice small { font-size:10px; margin-top:3px }
 .moment-choices { gap:5px }
 .moment-actions { gap:6px }
 .moment-action { padding:8px 6px; text-align:center }
 .moment-action>span { font-size:24px; margin-bottom:4px }
 .moment-action h3 { font-size:12px }
 .moment-action p { font-size:9px; margin-top:3px }
 .moment-morning { grid-column:2; grid-row:4; font-size:9px; margin:0 }
 .moment-rewards { grid-column:1; grid-row:6; font-size:11px; gap:9px; margin:0 }
 .moment-controls { grid-column:2; grid-row:5 / 7; margin:4px 0 0; gap:5px }
 .moment-cta { padding:13px 18px; font-size:15px; border-radius:12px }
 .moment-cta span { font-size:24px }
 .moment-read { font-size:10px; padding:3px }
 .moment-chapter { grid-column:1; grid-row:7; margin:0; font-size:9px }
 .day-sky { top:92px; width:132px; left:20px }
}
.moment-bonus { display:block; margin-top:3px; color:#617b54; font-size:10px }
@media(max-height:670px) and (max-width:640px) {
 [data-phase=morning] .moment-art { height:44px }
 [data-phase=morning] .moment-chapter { display:none }
 .moment-choice { padding:10px 12px }
 .moment-bonus { font-size:9px; margin-top:2px }
}
/* Personal practice and friendship each have their own visual language. */
.activity-grid,.role-practice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
.activity-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:#f3f1e5;border-radius:16px;padding:15px;gap:7px;border:1px solid #dddcc9;transition:transform .2s,background .2s}.activity-card:hover:not(:disabled){transform:translateY(-3px);background:#e8eedb}.activity-card b{font-size:14px}.activity-card small{font-size:10px;color:var(--muted);line-height:1.5}.activity-illustration{font-size:39px;display:grid;place-items:center;width:100%;height:78px;border-radius:12px;background:#e2e9d0}.activity-illustration.fishing{background:#d0e5e4}.activity-illustration.knitting{background:#efdecd}.activity-illustration.spices{background:#f0e6c3}.activity-illustration.story{background:#e5dee9}.activity-card:disabled{opacity:.7}
.role-practice{display:flex;gap:10px;border:1px solid var(--line);border-radius:13px;padding:13px}.role-practice>span{font-size:25px}.role-practice>div{flex:1;min-width:0}.role-practice b{display:block;font-size:12px}.role-practice small{display:block;font-size:10px;color:var(--muted);margin:6px 0}.role-games{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.role-games button{font-size:10px;padding:7px;border-radius:8px;background:#edf0e0}.keepsake{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:12px 0}.keepsake>span{font-size:26px}.keepsake>div{flex:1;min-width:0}.keepsake b,.keepsake small{display:block;font-size:12px}.keepsake small{font-size:10px;margin-top:5px;color:var(--muted)}
.friend-detail-link{font-size:10px;color:#756184;padding:0 0 7px;text-align:left}.friend-card{border:1px solid #e0d9e4;border-radius:14px;margin:12px 0;background:#fbf7f6}.friend-card summary{list-style:none;display:flex;align-items:center;gap:13px;cursor:pointer;padding:13px}.friend-card summary:after{content:'+';margin-left:auto;color:#997c9b}.friend-card[open] summary:after{content:'−'}.friend-card summary b,.friend-card summary small{display:block;font-size:12px}.friend-card summary small{font-size:10px;color:var(--muted);margin-top:6px}.friend-portrait{width:35px;flex-shrink:0}.friend-portrait svg{width:100%;height:46px}.friend-body{padding:0 16px 16px}.friend-body p{font-size:12px;line-height:1.7;color:var(--muted);margin:10px 0}.friend-body h3{font-size:18px;margin:20px 0 10px}.community-links{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}.community-links span{border-radius:12px;padding:10px;background:#eee6ee;font-size:11px}.community-links b{color:#8c6d89}.festival-stars{color:#c49a53;font-size:28px;letter-spacing:5px}
.practice-modal{width:min(620px,calc(100vw - 24px));padding:20px;max-height:calc(100dvh - 24px)}.practice-heading{display:flex;gap:15px;align-items:center}.practice-heading>span{font-size:36px}.practice-heading h2{margin:0!important;font-size:26px!important}.practice-heading small{font-size:11px;color:var(--muted)}#modalContent .practice-intro{font-size:12px;line-height:1.6;margin:10px 0}.practice-board{background:#edf0df;border-radius:16px;padding:18px;margin:12px 0}.practice-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.practice-controls.one-choice{grid-template-columns:1fr}.practice-choice{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;background:#fffdf4;border:1px solid #d6d9c4;border-radius:11px;min-height:44px;padding:9px;font-size:12px}.practice-choice:hover:not(:disabled){background:#dce9d0}.practice-choice:disabled{opacity:.55}.practice-choice small{display:block;width:100%;font-size:10px;color:var(--muted)}.practice-label{font-size:9px;color:var(--muted);letter-spacing:1px;margin:5px 0 8px}.stitch-row{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-bottom:15px}.wool-stitch{display:inline-block;width:24px;height:30px;border-radius:48% 48% 38% 38%;box-shadow:inset 0 0 0 2px #ffffff60,inset -3px -3px 0 #00000012;flex-shrink:0}.empty-stitch{background:#d6ddc7;text-align:center;color:#a9b398}.practice-meters{display:flex;gap:14px}.practice-meters>div{flex:1;min-width:0}.practice-meters span,.practice-meters b{display:block;font-size:10px;margin:5px 0}.practice-meter{position:relative;background:#d2dbc1;height:7px;border-radius:5px}.practice-meter i{display:block;height:100%;background:#a1b288;border-radius:5px}.practice-meter em{position:absolute;top:-3px;width:3px;height:13px;background:#446448}.plant-art{font-size:64px;text-align:center;height:100px;display:grid;place-items:center;transform:scale(var(--plant-size));transition:transform .3s}.spice-bowl{font-size:33px;text-align:center;min-height:70px}.fishing-scene{height:130px;border-radius:12px;background:linear-gradient(#b7d5cf,#86b5bd);position:relative;overflow:hidden}.fish-art{position:absolute;font-size:38px;left:50%;top:37px;animation:fish-drift 3s ease-in-out infinite alternate}.fishing-line{font-size:55px;position:absolute;right:10%;top:0}.fishing-track{position:absolute;bottom:20px;left:8%;width:84%;height:15px;background:#ffffff70;border-radius:10px}.fishing-target{position:absolute;top:0;height:100%;background:#66885c;border-radius:8px}.fishing-track i{position:absolute;top:-7px;height:29px;width:5px;border-radius:5px;background:#fff7d8;box-shadow:0 0 0 1px #5c7e7c}.explore-board{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:285px;margin:auto}.explore-cell{font-size:25px;aspect-ratio:1;border-radius:10px;background:#c5d6ac;border:2px solid #92ad79}.explore-cell:disabled{opacity:1;border-color:transparent}.explore-cell.rock{background:#d3d6c9}.explore-cell.visited{background:#f0e4c6}.explore-cell:not(:disabled):hover{background:#e4edcd}.story-sequence{display:flex;flex-wrap:wrap;gap:10px;min-height:50px;align-items:center;justify-content:center}.story-sequence span{font-size:25px}.story-piece{justify-content:flex-start;text-align:left}.story-piece>span{font-size:24px}.story-piece b{font-size:12px}.practice-help{font-size:11px;color:var(--muted);margin:12px 0;min-height:16px}.practice-footer{display:flex;gap:10px;align-items:center}.practice-footer button{flex:1;margin:0}.practice-footer .primary-button{padding:13px;font-size:12px}.practice-footer .secondary-button{padding:10px;font-size:11px}.personal-pin{position:absolute;left:36%;top:79%;width:34px;height:34px;background:transparent;border-radius:50%;transform:translate(-50%,-50%)}.personal-pin:hover,.personal-pin:focus-visible{box-shadow:0 0 0 3px #fbf3c688}.personal-art{transform-box:fill-box;transform-origin:center;transition:scale .2s}.personal-art.inspecting{scale:1.12}.personal-pin:focus-visible{outline:2px solid #527259}
@keyframes fish-drift{to{transform:translateX(-65px) rotate(-6deg)}}
@media(max-width:640px){.activity-grid,.role-practice-grid{gap:8px}.activity-card{padding:11px}.activity-card b{font-size:12px}.activity-card small{font-size:9px}.role-practice{padding:10px;gap:6px}.role-practice>span{font-size:20px}.practice-heading h2{font-size:22px!important}.practice-modal .modal-top{margin-bottom:8px}.practice-board{padding:12px;margin:9px 0}.practice-choice{padding:7px;min-height:40px;font-size:11px}.practice-controls{gap:6px}.practice-meters{gap:9px}.plant-art{font-size:48px;height:75px}.practice-help{margin:9px 0;font-size:10px}.practice-footer{gap:6px}.practice-footer .primary-button{font-size:11px;padding:11px 7px}.friend-card summary{padding:10px;gap:9px}.friend-card summary b{font-size:11px}.keepsake{flex-wrap:wrap}.personal-pin{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){.fish-art{animation:none}.personal-art,.plant-art,.activity-card{transition:none}}
.still-world .fish-art{animation:none}
@media(min-width:641px) and (max-height:550px){
 .practice-modal{padding:12px 18px}.practice-modal .modal-top{margin-bottom:7px}.practice-modal #modalContent{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}.practice-heading,.practice-intro,.practice-footer{grid-column:1/-1}.practice-modal #modalContent .practice-intro{margin:0;font-size:11px}.practice-board{grid-column:1;grid-row:3/5;margin:0;padding:10px}.practice-controls{grid-column:2;grid-row:3;align-content:start}.practice-help{grid-column:2;grid-row:4;margin:0}.practice-heading h2{font-size:23px!important}.practice-heading>span{font-size:28px}.practice-controls .practice-choice{min-height:35px;padding:6px;font-size:10px}.practice-choice small{font-size:9px}.practice-controls .story-piece small{font-size:9px}.explore-board{max-width:175px;gap:4px}.explore-cell{font-size:20px}.plant-art{height:85px;font-size:50px}.spice-bowl{min-height:60px;font-size:28px}.practice-label{margin:3px 0}.stitch-row{margin-bottom:8px}.wool-stitch{width:19px;height:24px}
}
@media(max-width:640px) and (max-height:670px){
 .practice-modal{padding:12px}.practice-modal .modal-top{margin-bottom:6px}.practice-modal .modal-top .close-button{width:27px;height:27px}.practice-heading h2{font-size:20px!important}.practice-heading>span{font-size:28px}.practice-heading small{font-size:9px}.practice-modal #modalContent .practice-intro{font-size:10px;line-height:1.4;margin:6px 0}.practice-board{padding:8px;margin:8px 0}.plant-art{font-size:36px;height:44px}.practice-meters span,.practice-meters b{font-size:9px;margin:3px 0}.practice-controls .practice-choice{min-height:34px;padding:5px;font-size:10px;gap:4px}.practice-choice small{font-size:8px}.practice-help{font-size:9px;margin:7px 0;min-height:12px}.practice-footer .primary-button,.practice-footer .secondary-button{font-size:10px;padding:10px 5px}.explore-board{max-width:210px}.spice-bowl{font-size:26px;min-height:50px}.story-piece>span{font-size:20px}.story-piece b{font-size:11px}.stitch-row{margin-bottom:9px}.wool-stitch{height:25px;width:20px}
}
.practice-footer{position:sticky;bottom:0;background:#fffef8;padding-top:8px;z-index:2;box-shadow:0 -7px 10px #fffef8}
@media(min-width:641px) and (max-height:550px){.practice-modal .plant-art{height:56px;font-size:40px}.practice-modal .practice-meters span,.practice-modal .practice-meters b{margin:3px 0}.practice-modal .practice-help{font-size:10px}.practice-footer{padding-top:3px}}