#newcomer-intro{position:absolute;z-index:35;color:#f1e7cb;background:linear-gradient(135deg,rgba(23,43,35,.98),rgba(11,24,21,.98));border:1px solid #9d8d60;border-radius:12px;box-shadow:0 14px 60px #0009;padding:22px;box-sizing:border-box;font:15px/1.45 Georgia,serif}
#newcomer-intro[hidden],#newcomer-toggle[hidden]{display:none}
#newcomer-intro h2{margin:8px 0 10px;font-size:27px;line-height:1.14;color:#f4d994}
#newcomer-intro p{margin:10px 0 16px;max-width:57ch}
.newcomer-eyebrow{font:600 10px/1.5 system-ui,sans-serif;letter-spacing:.14em;color:#bea975}
.newcomer-chooser{top:8%;left:50%;transform:translateX(-50%);width:min(680px,calc(100% - 30px));max-height:80%;overflow:auto}
.newcomer-paths{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0 14px}
body:not(.compact-ui) .newcomer-paths{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
#newcomer-intro .newcomer-path{padding:14px;text-align:left;background:#223b31;border:1px solid #60715c;border-radius:7px;white-space:normal;color:#eee5cc;min-height:100px;cursor:pointer}
#newcomer-intro .newcomer-path:hover,#newcomer-intro .newcomer-path:focus-visible{background:#314c3c;border-color:#e7ce86;outline:2px solid #e7ce86;outline-offset:2px}
.newcomer-path strong,.newcomer-path span,.newcomer-path small{display:block}.newcomer-path strong{font:600 20px Georgia,serif;color:#f3d994;margin-bottom:7px}.newcomer-path span{font:13px/1.45 system-ui,sans-serif}.newcomer-path small{margin-top:8px;color:#edcc72}
#newcomer-intro .newcomer-path.recommended{border-color:#edcc72;background:#2d4634}
.newcomer-card{top:90px;left:50%;right:auto;transform:translateX(-50%);width:350px;max-width:calc(100% - 36px);max-height:calc(100% - 150px);overflow:auto}
/* Center the guide in the world, leaving the survival panel's side lane clear. */
body:not(.compact-ui) #newcomer-intro{max-width:calc(100% - 88px - 352px * var(--interface-vitals,1))}
.newcomer-count{color:#d6c085;font:11px system-ui,sans-serif;letter-spacing:.1em}
#newcomer-intro .newcomer-primary{display:block;width:100%;min-height:44px;padding:12px 14px;background:#d8c185;color:#17261e;border:1px solid #eddaaa;border-radius:5px;font:bold 15px Georgia,serif;cursor:pointer}
#newcomer-intro button:disabled{opacity:.6;cursor:wait}
#newcomer-intro .newcomer-secondary{background:transparent;border:1px solid #71826c;color:#e4dcc4;min-height:38px;padding:8px 12px;margin-top:9px;border-radius:5px;cursor:pointer}
.newcomer-help{display:block;margin-top:12px;color:#b8c3b4;font:12px/1.5 system-ui,sans-serif}
.newcomer-footer{display:flex;justify-content:space-between;gap:12px;margin-top:16px;border-top:1px solid #54614b;padding-top:10px}.newcomer-footer button{background:transparent;border:0;color:#d1c5a4;text-decoration:underline;padding:5px 0;font:12px system-ui,sans-serif;cursor:pointer}
.newcomer-save-note{border-left:2px solid #bdac76;padding-left:10px}
.newcomer-card{display:flex;flex-direction:column;overflow:hidden}
.newcomer-heading{display:flex;align-items:flex-start;gap:10px;flex-shrink:0}
#newcomer-intro .newcomer-heading h2{flex:1;min-width:0}
#newcomer-intro .newcomer-hide{min-width:44px;min-height:44px;flex-shrink:0;padding:8px;background:transparent;border:1px solid #71826c;border-radius:5px;color:#e4dcc4;cursor:pointer}
.newcomer-copy{min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:4px}
.newcomer-actions{flex-shrink:0;padding-top:12px}
.newcomer-heading+.newcomer-copy .newcomer-footer{margin:10px 0 4px;padding-top:6px}
#newcomer-intro .newcomer-footer button{min-height:44px}
#newcomer-toggle{position:absolute;top:90px;left:50%;right:auto;transform:translateX(-50%);z-index:32;background:#20372c;color:#efdcab;border:1px solid #9d8d60;border-radius:5px;padding:9px 13px;cursor:pointer}
@media(max-width:700px){.newcomer-chooser{top:12px;max-height:calc(100% - 24px)}#newcomer-intro{padding:16px}.newcomer-paths{gap:7px}#newcomer-intro .newcomer-path{padding:10px;min-height:105px}.newcomer-path strong{font-size:17px}.newcomer-path span{font-size:12px}.newcomer-card{top:65px;width:310px;max-width:calc(100% - 20px);max-height:calc(100% - 125px)}#newcomer-intro h2{font-size:23px}#newcomer-toggle{top:65px}}
/* Keep health, the primary lesson action and the close control visible on phones. */
.compact-ui #newcomer-intro.newcomer-card{top:112px;max-height:calc(100% - var(--bottom-hud-height,52px) - 132px);padding:12px}
.compact-ui #newcomer-intro.newcomer-chooser{top:112px;max-height:calc(100% - var(--bottom-hud-height,52px) - 132px)}
.compact-ui .newcomer-card>.newcomer-eyebrow{display:none}
.compact-ui #newcomer-intro .newcomer-heading h2{font-size:20px;margin:2px 0 10px}
.compact-ui .newcomer-actions{padding-top:8px}
.compact-ui #newcomer-intro .newcomer-secondary{min-height:44px}
.compact-ui #newcomer-toggle{top:112px;min-height:44px}
@media(max-height:500px){.compact-ui #newcomer-intro.newcomer-card{top:8px;width:310px;max-height:calc(100% - var(--bottom-hud-height,52px) - 24px)}.compact-ui #newcomer-intro.newcomer-chooser{top:82px;max-height:calc(100% - var(--bottom-hud-height,52px) - 98px)}.compact-ui #newcomer-toggle{top:82px}.compact-ui .newcomer-copy{font-size:13px}.compact-ui #newcomer-intro p{margin:6px 0}.compact-ui #newcomer-intro .newcomer-primary{padding:8px}}
/* A short objective note leaves the world visible. The player uses the same
   world and inventory controls they will use after these optional lessons. */
#newcomer-intro.newcomer-card{width:390px;padding:12px 14px;max-height:260px;box-shadow:0 5px 20px #0006}
#newcomer-intro.newcomer-card h2{font-size:19px;margin:4px 0 5px}
#newcomer-intro.newcomer-card p{font:13px/1.5 system-ui,sans-serif;margin:5px 0}
#newcomer-intro.newcomer-card .newcomer-footer{margin-top:8px;padding-top:3px;gap:12px;flex-shrink:0}
#newcomer-intro .newcomer-hide{font:24px/1 system-ui,sans-serif}
.newcomer-journal{padding:12px;margin:0 0 14px;border:1px solid #61775c;background:#172b23;color:#e8dfc5}
.newcomer-journal[hidden]{display:none}.newcomer-journal p{margin:7px 0;font-size:13px}.newcomer-journal button{min-height:44px;padding:8px 12px;background:#294333;color:#f0ddb0;border:1px solid #8a9369;cursor:pointer}.newcomer-journal small{display:block;margin-top:7px;color:#bec8b7}
.compact-ui #newcomer-intro.newcomer-card{max-height:min(230px,calc(100% - var(--bottom-hud-height,52px) - 132px));width:350px;padding:10px 12px}
.compact-ui #newcomer-intro.newcomer-card .newcomer-heading h2{font-size:17px;margin:4px 0}
.compact-ui #newcomer-intro.newcomer-card .newcomer-footer{margin-top:4px}
@media(max-height:500px){.compact-ui #newcomer-intro.newcomer-card{top:8px;max-height:min(190px,calc(100% - var(--bottom-hud-height,52px) - 24px))}}
/* The ordinary quest tracker is also optional, compact and fully closeable. */
.quest-tracker .quest-tracker-steps details summary{cursor:pointer;min-height:34px;display:flex;align-items:center;color:#d6c49b}
.quest-tracker .quest-tracker-steps details p{margin:6px 0}.quest-tracker header>button:last-child{min-width:44px;min-height:44px;font-size:20px}
/* A temporary close stays easy to undo; opting out is a separate named action. */
#newcomer-toggle{min-height:44px;padding:10px 19px;border-radius:24px;font:600 13px/1.3 system-ui,sans-serif;box-shadow:0 3px 15px #0007}
#newcomer-toggle:focus-visible,#newcomer-intro button:focus-visible,.newcomer-journal button:focus-visible{outline:2px solid #eddaaa;outline-offset:3px}
.newcomer-journal-actions{display:flex;flex-wrap:wrap;gap:7px}
.newcomer-done{display:flex;align-items:center;gap:10px;flex-shrink:0;border-top:1px solid #54614b;padding-top:5px;margin-top:3px}
#newcomer-intro .newcomer-done-button{flex-shrink:0;min-height:44px;padding:7px 0;text-align:left;background:none;border:0;color:#d5c9aa;text-decoration:underline;font:12px/1.3 system-ui,sans-serif;cursor:pointer}
.newcomer-done small{color:#aebdab;font:10px/1.4 system-ui,sans-serif}
#newcomer-intro.newcomer-card{max-height:310px}
#newcomer-intro.newcomer-card .newcomer-footer{flex-wrap:wrap;gap:3px 13px}
.compact-ui #newcomer-intro.newcomer-card{max-height:min(290px,calc(100% - var(--bottom-hud-height,52px) - 132px))}
@media(max-height:500px){.compact-ui #newcomer-intro.newcomer-card{max-height:min(240px,calc(100% - var(--bottom-hud-height,52px) - 24px))}.compact-ui .newcomer-done{gap:8px}.compact-ui .newcomer-done small{font-size:9px}}