.world-one{--world-panel:#13282a;--world-rule:#557775;--world-gold:#f0ca78;--world-ink:#eef5e6}
.world-one [hidden]{display:none!important}
.world-layout{grid-template-columns:minmax(0,1fr) minmax(300px,350px)}
.world-layout:has(.world-sidebar[hidden]){grid-template-columns:minmax(0,1fr)}
.world-one .stage{min-width:0;isolation:isolate}
.world-one .world-title h1{font-size:clamp(3.5rem,8vw,7rem);margin-bottom:.55rem}
.world-title>p{max-width:37ch}
.world-title{max-width:min(570px,95%);width:100%}
.world-cover{background:linear-gradient(90deg,#071a20ef 0%,#0e282bdc 24%,#0e282b3b 71%,#0e282b0a 100%)}
.join-form{display:grid;gap:.35rem;width:min(100%,300px);margin-top:.75rem}
.join-form label{font-size:.78rem;color:#e4e6d2;font-weight:700}
.join-form label small{font-size:.66rem;color:#adcbc1;font-weight:500;padding-left:.22rem}
.world-one input{min-width:0;padding:.58rem .7rem;font:inherit;border:1px solid #628c81;border-radius:.45rem;background:#0d2427;color:#fff8e9}
.world-one input::placeholder{color:#afc2b8}
.join-form input{margin-bottom:.2rem}
.join-form .button{justify-self:start}
.join-form .load-status{margin:.13rem 0 0;max-width:48ch;font-size:.74rem}
.world-sidebar{max-height:unset;min-width:0;overflow:hidden}
.world-status{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}
.world-status strong{display:block;color:#f8e7bf;font-size:1.03rem;letter-spacing:.05em;margin-top:.2rem}
.world-status .eyebrow{margin:0}
.world-sidebar .button.small{min-height:34px;padding:.28rem .52rem;font-size:.75rem}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.38rem;margin-bottom:.65rem}
.stats div{display:grid;gap:.15rem;border:1px solid #52716b73;border-radius:.48rem;background:#152c2e;padding:.4rem .52rem}
.stats span{font-size:.66rem;color:#c0d2c8}.stats strong{font-size:.88rem;color:#f7e3ac}
.world-tabs{display:grid;grid-template-columns:1fr 1.15fr 1.1fr;gap:.28rem;border-bottom:1px solid #59796f;padding-bottom:.45rem}
.world-tabs button{min-height:42px;background:#182e30;color:#c5d4c7;border:1px solid #53756e;border-radius:.45rem;font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;padding:.35rem .2rem}
.world-tabs button[aria-pressed=true]{background:#efd084;border-color:#ffdf96;color:#112326;font-weight:800}
.tab-content{display:grid;gap:.5rem;margin-top:.55rem}
.tab-content h2,.tab-content h3{margin:0}
.tab-content h2{font-size:1.08rem}
.tab-content h3{font-size:.92rem;color:#ead4aa}
.progress-list{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.progress-list li{display:flex;align-items:center;gap:.42rem;color:#c3cfc3;font-size:.75rem;min-height:23px}
.progress-list li::before{content:"○";color:#c5c9ac;min-width:15px;text-align:center}
.progress-list li.done::before{content:"✓";color:#a5dbb4}
.progress-list li.current{color:#ffdc91;font-weight:750}
.progress-list li.current::before{content:"◆";font-size:.61rem;color:#ffdc91}
.world-one .chart-block{margin:0;min-width:0}
.world-one .chart-block canvas{width:100%;aspect-ratio:31 / 25;object-fit:contain;border-radius:.35rem}
.world-chart-key{display:flex;flex-wrap:wrap;gap:.2rem .8rem}
.world-chart-key span:last-child{color:#ade3de}
.world-hint,.hint{color:#c1d2c8;font-size:.72rem;line-height:1.35;margin:0}
.world-hint kbd{margin-left:.14rem}
.connection{margin-top:.55rem;padding-top:.48rem;border-top:1px solid #4e746d66}
.inventory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.34rem}
.inventory div{display:grid;gap:.12rem;padding:.35rem .42rem;border-radius:.35rem;border:1px solid #56726d9c;background:#172d30}
.inventory span{font-size:.66rem;color:#c8dbcd}.inventory b{font-size:.88rem;color:#ffdf95}
.catalog-title{display:flex;justify-content:space-between;align-items:baseline;gap:.35rem}
.catalog-title span{font-size:.68rem;color:#c4d0c3}
.blueprints{display:grid;gap:.38rem}
.blueprint{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.14rem .4rem;padding:.46rem .51rem;border:1px solid #557875;border-radius:.42rem;background:#122729}
.blueprint h3{font-size:.78rem;color:#f0dbaa}
.blueprint p{font-size:.69rem;line-height:1.3;margin:0;color:#c7d7ca;grid-column:1}
.blueprint button{grid-column:2;grid-row:1 / span 3}
.blueprint button:disabled{opacity:.65;cursor:default}
.blueprint .requirements{color:#f2ce84}
.residents{margin:0;padding:0;list-style:none;display:grid;gap:.2rem;max-height:125px;overflow:auto}
.residents li{display:flex;align-items:center;justify-content:space-between;gap:.25rem;font-size:.74rem}
.chat-log{display:grid;align-content:start;gap:.35rem;min-height:112px;max-height:185px;overflow:auto;padding:.42rem .5rem;border:1px solid #54746d;border-radius:.4rem;background:#102326;overscroll-behavior:contain}
.chat-log p{font-size:.74rem;line-height:1.42;margin:0;overflow-wrap:anywhere}
.chat-log strong{color:#f4ce89}.chat-log .chat-empty{color:#bfcec4}
.chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem}
.chat-form input{font-size:.75rem}
.world-voice{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;border-top:1px solid #56726d;padding-top:.44rem}
.world-voice p{width:100%;font-size:.7rem;color:#c7d8ce;margin:0}
.world-one .notice.problem{border-color:#e6a183;color:#ffd9b4}
.world-one .notice{bottom:72px;max-width:min(90%,500px);white-space:normal}
.world-guide{max-width:min(320px,66%)}
.world-guide h2{font-size:clamp(1.14rem,1.9vw,1.65rem)}
.world-chips{justify-content:flex-end;flex-wrap:wrap;max-width:45%;align-items:flex-start}
.player-labels{position:absolute;inset:0;pointer-events:none}
.player-labels span{position:absolute;transform:translate(-50%,-50%);padding:.14rem .36rem;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:6px;color:#e7fcf2;background:#122c2ce3;border:1px solid #6ab1a4;font-size:.65rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:820px){
 .world-layout{grid-template-columns:minmax(0,1fr)}
 .world-one .stage{min-height:480px}
 .world-cover .world-title{width:min(95%,490px)}
 .world-sidebar{display:block}
 .world-one .world-chips{right:.55rem}
 .world-one .chart-block canvas{width:min(100%,350px);margin-inline:auto}
 .world-one .notice{bottom:104px}
}
@media(max-width:480px){
 .world-one .main{padding:.48rem}
 .world-one .mast{padding:0 .55rem;gap:.4rem}
 .world-one .mast-tag{display:none}
 .world-one .stage{min-height:470px;max-height:74svh}
 .world-one .world-cover{align-items:center;padding:.85rem}
 .world-one .world-title{margin:0}
 .world-one .chapter-stamp{display:none}
 .world-title>p{font-size:.83rem}
 .world-one .world-title h1{font-size:clamp(2.7rem,13vw,3.8rem)}
 .world-one .world-guide{max-width:none;right:.52rem;min-height:68px}
 .world-one .world-chips{bottom:55px;max-width:52%}
 .world-one .world-chips #mode-chip{display:none}
 .world-one .world-actions{max-width:52%;justify-content:flex-end}
 .world-one .world-actions button{min-height:43px;max-width:100%;white-space:normal}
 .world-one .notice{bottom:109px}
}
@media(prefers-reduced-motion:reduce){.world-one *, .world-one *::before{scroll-behavior:auto!important;animation:none!important}}

/* Layer 1 keeps the survival journal compact while building and surveying. */
.world-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.world-tabs button{font-size:.67rem}
.quick-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.34rem;list-style:none;padding:0;margin:0}
.quick-start li{display:grid;justify-items:center;gap:.22rem;padding:.42rem .22rem;color:#f7dc9f;background:#1d3737;border:1px solid #607b6c;border-radius:.4rem;text-align:center}
.quick-start li span{font-size:1.1rem}.quick-start li b{font-size:.65rem}
.world-milestones{border-top:1px solid #537269;padding-top:.45rem}
.world-milestones summary{color:#e8d9ae;font-size:.78rem;font-weight:750;cursor:pointer;padding:.2rem}
.world-milestones .progress-list{margin-top:.25rem}
.world-chart-key .fog-key{color:#cbd4d8}.world-chart-key .fog-key::before{content:"";display:inline-block;width:.58em;height:.58em;margin-right:.3em;border:1px solid #718889;border-radius:2px;background:#05090b;vertical-align:.03em}
#survey-progress{padding:.24rem 0 0}
.world-one .blueprint{grid-template-columns:minmax(0,1fr) auto;gap:.25rem .45rem;border-color:#658781;padding:.55rem .55rem}
.world-one .blueprint.selected{border-color:#ecc97d;background:#203636}
.world-one .blueprint h3{display:flex;align-items:center;gap:.35rem}
.world-one .blueprint button{grid-column:2;grid-row:1/3;min-height:38px}
.world-one .blueprint .recipe-status{grid-column:1/-1;font-weight:700}
.world-one .blueprint .recipe-ready{color:#b4e5b6}
.world-one .blueprint .recipe-short{color:#ffe1a2}
.item-icon{display:inline-block;margin-right:.18rem;font-size:1.02rem;line-height:1}
.cost-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.25rem;list-style:none;margin:0;padding:0}
.cost-chips li{white-space:nowrap;padding:.18rem .36rem;border:1px solid #628c79;border-radius:999px;background:#1a3d35;color:#d9f6db;font-size:.68rem;font-weight:730}
.cost-chips li.short{border-color:#b09058;background:#3b3124;color:#ffe0a5}
.land-summary{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35rem;padding:.5rem .52rem;border:1px solid #64887f;border-radius:.42rem;background:#1a3938;color:#d2eee0;font-size:.76rem}
.land-summary span{color:#ffdc91}
.build-tools{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.remove-pieces{display:grid;gap:.25rem}
.remove-row{display:flex;align-items:center;justify-content:space-between;gap:.35rem;color:#d7e8df;font-size:.72rem}
.world-one .action-bar #rotate-placement{white-space:nowrap}
@media(min-width:821px){.world-one .world-sidebar{max-height:calc(100svh - 86px);overflow-y:auto;overscroll-behavior-y:contain}}
@media(max-width:480px){
 .world-one .world-tabs button{min-height:42px;font-size:.64rem}
 .world-one .world-actions:has(#rotate-placement:not([hidden])){display:grid;grid-template-columns:auto auto;gap:.23rem;max-width:56%}
 .world-one .world-actions:has(#rotate-placement:not([hidden])) #action{grid-column:1/-1;justify-self:end}
 .world-one .world-actions #rotate-placement,.world-one .world-actions #cancel-placement{min-height:40px}
 .world-one .world-actions:has(#rotate-placement:not([hidden])) #cancel-placement{grid-column:2}
 .world-one .notice{bottom:126px}
}

/* Milestone 1: The First Storm. Storm bar in the task card, storm report, storm watch, journal, tester tools. */
.storm-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.3rem .45rem;margin-top:.42rem;padding-top:.4rem;border-top:1px solid #6f8f8566}
.storm-icon{font-size:1.05rem;line-height:1}
.storm-text{display:grid;min-width:0}
.storm-text strong{font-size:.72rem;letter-spacing:.05em;color:#f6e2b0;text-transform:uppercase}
.storm-text span{font-size:.7rem;color:#d3e2d8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.storm-text span:empty{display:none}
.shelter-badge{font-size:.64rem;font-weight:800;letter-spacing:.03em;padding:.2rem .45rem;border-radius:999px;border:1px solid #6d8b84;background:#17302f;color:#d5e6dc;white-space:nowrap}
.shelter-badge[data-level=cover]{border-color:#d7b468;background:#3a3222;color:#ffe2a1}
.shelter-badge[data-level=snug],.shelter-badge[data-level=pass]{border-color:#7fd3a4;background:#173a2d;color:#c9f6d9}
.shelter-badge[data-alarm=true]{border-color:#ff9c84;background:#4a221d;color:#ffd6c9;animation:storm-pulse 1.1s ease-in-out infinite}
.storm-meter{grid-column:1/-1;height:4px;border-radius:999px;background:#0c1e2099;overflow:hidden}
.storm-bar[data-phase=calm] .storm-meter{display:none}
.storm-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e8c574,#ff9d6f);transition:width .9s linear}
.storm-bar[data-phase=cleared] .storm-meter i{background:#8fd9b0}
@keyframes storm-pulse{50%{opacity:.6}}
.storm-report{position:absolute;left:50%;top:24%;transform:translateX(-50%);z-index:6;width:min(92%,360px);padding:.75rem .85rem;border:1px solid #e6c57a;border-radius:.6rem;background:#0f2427f2;color:#eef5e6;box-shadow:0 14px 40px #0009;pointer-events:auto}
.storm-report h3{margin:0 0 .35rem;font-size:1.02rem;color:#ffe2a1}
.storm-report ul{margin:0 0 .55rem;padding-left:1.05rem;display:grid;gap:.18rem;font-size:.78rem;line-height:1.35}
.world-one .chip-button{cursor:pointer;font-family:inherit;pointer-events:auto}
.storm-watch{display:grid;gap:.22rem;padding:.5rem .55rem;border:1px solid #64887f;border-radius:.42rem;background:#17302f}
.storm-watch strong{color:#f6e2b0;font-size:.78rem}
.storm-watch p{margin:0;font-size:.72rem;line-height:1.35;color:#cfe0d6}
.storm-watch p:empty{display:none}
.journal-page{border-top:1px solid #53726966;padding:.3rem 0}
.journal-page summary{cursor:pointer;color:#f0dbaa;font-size:.76rem;font-weight:700}
.journal-page p{margin:.3rem 0 0;font-size:.74rem;line-height:1.45;color:#dbe8df;font-style:italic}
.tester{display:grid;gap:.3rem;padding:.45rem .5rem;border:1px dashed #c9a25c;border-radius:.42rem;background:#2a2417}
.tester strong{font-size:.66rem;color:#ffd98f;letter-spacing:.05em;text-transform:uppercase}
.tester div{display:flex;flex-wrap:wrap;gap:.3rem}
.comms-off .residents button{display:none}
@media(max-width:480px){
 .storm-text span{white-space:normal}
 .storm-report{top:29%}
 .world-one .world-chips #sound-toggle{order:-1}
}