/* Account UI using the approved, separately replaceable coastal artwork. */
@font-face{font-family:'Nexus Inter';src:url('/design-v2/art/ui/fonts/InterVariable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Nexus Lora';src:url('/design-v2/art/ui/fonts/Lora-Variable.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
:root,body,body.theme-light,body.theme-premium{--bg:#e9ece3;--panel:#fffbf0;--panel2:#f1e8d0;--ink:#3f4734;--muted:#6e624c;--line:#d5c8a8;--purple:#285d4e;--action:#24594b;--teal:#285d4e;--gold:#8a612d;--error:#9b3e2b;--radius:9px;--shadow:0 12px 30px #4b513715;color-scheme:light;color:var(--ink);background:#e9ece3;font-family:'Nexus Inter','Segoe UI',Arial,sans-serif}
html{background:#e9ece3}body{background:radial-gradient(ellipse at 0 0,#d4e2d9 0,transparent 58%),linear-gradient(125deg,#edf0e7,#e8ece1);min-width:320px}
h1,h2,h3,.brand{font-family:'Nexus Lora',Georgia,serif;font-weight:500;letter-spacing:-.035em;color:#354735}h1{line-height:1.17}p,small{color:var(--muted)}a{color:inherit}button,input,select,textarea{font-family:'Nexus Inter','Segoe UI',Arial,sans-serif}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #bd903f;outline-offset:4px}
::selection{background:#e7d39b;color:#214b3e}
.app-shell{grid-template-columns:214px minmax(0,1fr);background:#fafbf5}
.sidebar{padding:30px 15px;background:linear-gradient(105deg,#f4eedc,#fbf8ef);border-right:1px solid #d5d8c9;box-shadow:2px 0 16px #384a3410}
.brand{white-space:nowrap;font-size:23px;letter-spacing:-.045em;color:#1f4d40;font-weight:600;gap:10px}.brand img{filter:sepia(.55) saturate(.65)}
.sidebar .brand{margin:0 5px 36px;font-size:22px;gap:8px}.sidebar-bottom{display:none}.nav a{font-size:13px;font-weight:500;color:#59634d;border:1px solid transparent;border-radius:6px;gap:11px;padding:12px}
.nav a:hover{background:#e9eddc;border-color:#d2d9c3}.nav a.active,.theme-light .nav a.active{background:#e0e9d5;color:#245340;border-color:#c4d1b5;box-shadow:inset 3px 0 #5c7c54}
.nav-label{color:#8a7957;letter-spacing:.1em;margin:25px 12px 8px}.topbar{height:81px;padding:0 32px;background:#fffdf5;border-bottom:1px solid #dce0d2}
.breadcrumbs{color:#758069}.top-actions{gap:15px}.level-pill{color:#896532}.profile-button{color:#42533f}.profile-button img{background:#e7eddc;border-color:#d7dfc8}.page{padding:30px 32px 42px;max-width:1530px}
.heading{margin-bottom:26px}.heading h1{font-size:34px;color:#324d3d;font-weight:500}.heading p{font-size:14px;color:#768066}.eyebrow{font-family:'Nexus Inter','Segoe UI',sans-serif;font-size:10px;letter-spacing:.13em;color:#8b7650;font-weight:650}
.btn{background:#f4edda;color:#37553e;border:1px solid #cbbc96;border-radius:6px;box-shadow:0 1px 0 #fffaf0 inset;min-height:44px;font-weight:550}
.btn:hover{background:#e8e3cb;color:#284a37;transform:translateY(-1px)}.btn.primary,.theme-light .hero .btn.primary{background:#24594b;color:#fff9e8;border:1px solid #24594b;box-shadow:0 3px 0 #163f3526,0 6px 13px #33583b12}
.btn.primary:hover{background:#1c493e;color:#fff9e8}.btn.secondary,.theme-light .hero .btn.secondary{background:#fff8e6;color:#3f6249;border-color:#c8b78d}
.btn.secondary:hover{background:#ece9d2}.btn.danger{color:#913e2e;background:#fff4e8;border-color:#d3a894}.subtle-link{color:#2f6552;font-weight:550}.text-muted,.small-copy{color:#756b55}
.card,details,.table-wrap,.duel-player,.duel-tracks,.notice,.error-panel,.profile-summary,.onboarding{background:linear-gradient(115deg,#f6ecd1,#fffaea 35%,#faf4df);border-color:#d4c4a0;border-radius:8px;box-shadow:0 6px 17px #5152350c}
.card{padding:25px}.card.hover:hover{border-color:#81986c;box-shadow:0 9px 21px #47573a13}.card h2,.card h3{color:#42523a}.card p{color:#73634c;line-height:1.75}.card .eyebrow{color:#8c754b}
.chip{color:#675a42;background:#f1e8cf;border-color:#d5c49a;border-radius:5px}.chip.teal{color:#365c40;background:#e5edd9;border-color:#bccaab}.chip.gold{color:#85602c;background:#f4e5bd;border-color:#dac48f}
.progress{background:#dfe2c8;border:1px solid #cdd1b4;border-radius:2px;height:8px;box-shadow:inset 0 1px 2px #59674810}.progress i{background:linear-gradient(90deg,#a8b380,#5d815c);border-radius:1px}
.stat-line,.benefit-item,.track-label{color:#655d47}.benefit-item{border-color:#d9cba9}.benefit-item span{color:#73674f}.metric-card strong{font-family:'Nexus Lora',Georgia,serif;color:#315a44;font-weight:500}.metric-card span{color:#796c51}
.field{color:#695c44;font-size:12px}.field input,.field select,.field textarea,.form input,.form select,.form textarea{background:#fffbee;color:#344f3c;border:1px solid #cbbc94;box-shadow:inset 0 1px 3px #8166310c;border-radius:5px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#739269}.field input::placeholder,.field textarea::placeholder{color:#8e836d}.form-message{color:#963e2c}.inline-check{color:#645d47}input[type=checkbox],input[type=radio]{accent-color:#386548}
.notice{color:#5d6247;border-color:#c8d0ae;background:#f1f1dd}.notice a{color:#285e49}.error-panel h2{color:#913e2e}.empty{color:#766a50}.danger-zone{border-color:#c59b78}
table{color:#526044}th{color:#806c45;background:#eee8d3;border-color:#d8cbab}td{border-color:#e2d7ba}tbody tr:hover{background:#eaeedb}.role{color:#486d4b}.admin-row{border-color:#d9cdad}.admin-json{color:#605b46}
.site-footer{border-color:#d9dccb;color:#859078}.site-footer a{color:#4f7054}.duration-tabs button,.avatar-option{color:#627051;background:#f3edd9;border-color:#d1c7a7}.duration-tabs .selected,.avatar-option.selected{background:#dfe8d1;border-color:#7f9b6a;color:#31583e}.chart>div{background:linear-gradient(#9dad7b,#52774f)}
.badge{background:#fff9e9;border-color:#d5c7a4}.badge.locked{background:#f3efdf}.badge h3{color:#4d5d40}.badge p{color:#786b52}.cosmetic{background:#f7f2df;border-color:#d5c6a3}.role-badge{font-family:'Nexus Inter','Segoe UI',sans-serif}
.result-banner{background:radial-gradient(ellipse at 50% 0,#e2e9d1,transparent 70%),#fff8e5;border:9px solid #947046;border-image:url('/design-v2/art/ui/frames/oak-frame-v1.png') 13% / 9px stretch;border-radius:6px;box-shadow:0 9px 22px #62533416}
.result-banner h1{color:#355b41}.result-banner .reward{color:#89602b}.result-banner p{color:#756247}.result-banner>img[src*='/assets/guide-']{display:none}.result-actions{position:relative}
.hero{background:#214d40;border:1px solid #54725a;border-radius:10px;box-shadow:0 10px 25px #3e5a3c12}.hero:after{background:linear-gradient(90deg,#193e34 5%,#244d3ee6 39%,#244d3e15 86%)}.hero-copy h1,.theme-light .hero-copy h1{color:#fff6dc}.hero-copy p,.hero-foot,.theme-light .hero-foot{color:#e6e9cf}.hero-copy .eyebrow,.theme-light .hero-copy .eyebrow{color:#e4cd8f}.hero-badge,.theme-light .hero-badge{background:#f9f1d6e8;color:#3e5d43;border-color:#b5bc95;backdrop-filter:blur(7px)}
.chapter-card{padding:0;overflow:hidden}.chapter-card .chapter-copy{padding:19px}.map-scene{background:#e3e8d6;border-color:#b6c6ac}.map-scene .map-label{background:#fff8e5ed;color:#3e563f;text-shadow:none;border-color:#b9c6a8}.map-scene .map-label .eyebrow{color:#8c744c}.theme-light .play-scene .world-label{color:#f4edce}
.auth-layout{grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr);min-height:100dvh;background:#eef0e5;padding:18px;gap:18px}
.auth-scene,.theme-light .auth-scene{isolation:isolate;min-height:calc(100dvh - 36px);border-radius:14px;padding:30px 32px;background:#54877a;color:#fff8df;border:1px solid #94ad91;box-shadow:0 15px 35px #355a3b20}
.auth-scene img.scene{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;opacity:1;filter:none}
.auth-scene:after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#163e3420 0,#183d3400 31%,#193f35d9 72%,#173e35fa 100%);pointer-events:none}
.auth-scene .brand{color:#fff8dc;background:#1d4a3ebf;padding:10px 14px;border:1px solid #e8e7c23d;border-radius:7px;align-self:flex-start;letter-spacing:-.045em}
.auth-scene .intro{max-width:510px;margin:0;z-index:1}.auth-scene .intro h1{color:#fff9df;font-size:clamp(35px,3.4vw,51px);font-weight:500;line-height:1.14;max-width:480px;margin-bottom:20px}
.auth-scene .intro p,.theme-light .auth-scene p{color:#e7e9cf;font-size:15px;line-height:1.8;max-width:420px}.auth-scene .intro .eyebrow,.theme-light .auth-scene .eyebrow{color:#e1c98c;font-size:10px;letter-spacing:.15em}
.auth-form{padding:32px 30px;background:linear-gradient(110deg,#f2ecd9,#fbf9ee);border:1px solid #d4dbc7;border-radius:14px}
.auth-inner{max-width:420px;padding:32px 28px;border:9px solid #927047;border-image:url('/design-v2/art/ui/frames/oak-frame-v1.png') 13% / 9px stretch;background:linear-gradient(105deg,#f7ebcf,#fff8e7 30%,#faf0d7);box-shadow:0 10px 26px #5a553619;border-radius:5px}
.auth-inner h1{font-weight:500;font-size:32px;line-height:1.2;color:#3d543c;letter-spacing:-.04em}.auth-inner>p{color:#7c6b4f;font-size:14px;line-height:1.7}.auth-inner .eyebrow{color:#8c754e}.auth-inner .form{gap:17px}.auth-inner .field{gap:7px}.auth-inner .field input{min-height:45px}.auth-inner .form .btn{margin-top:4px}.auth-switch{color:#7a6d53}.auth-switch a{color:#2f654d}.auth-inner:before{font-family:'Nexus Lora',Georgia,serif;color:#245442}
.onboarding{padding:30px}.onboarding .guide{display:none}.profile-summary{padding:24px;border:1px solid #d6caa9;margin-bottom:24px}.profile-summary h1{color:#31533d}
dialog{background:#fff8e5;border:1px solid #c7b990;border-radius:9px;color:#405239}dialog::backdrop{background:#29483c9c;backdrop-filter:blur(5px)}#toast{background:#fff7e3;color:#35563d;border-color:#baad80;border-radius:7px;box-shadow:0 8px 22px #364e3222}
.initial{color:#345740;background:#f0f1e5;font-family:'Nexus Lora',Georgia,serif;letter-spacing:-.035em}.initial span,.loader{color:#7a8268}.spinner{border-color:#c8d0b7;border-top-color:#537654}.locked-note{color:#8a7d61}
/* Course overview uses actual island artwork and real account balances. */
.coastal-course-intro{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);padding:0;border:1px solid #c6d2b8;background:#fffaf0;border-radius:11px;box-shadow:0 10px 25px #4a5b3a12;margin-bottom:26px}
.coastal-course-copy{padding:32px;position:relative;z-index:1}.coastal-course-copy h2{font-size:36px;line-height:1.2;color:#35543e;max-width:520px;margin:12px 0 18px}.coastal-course-copy>p{font-size:13px;max-width:580px;line-height:1.8;color:#73664d}.coastal-course-copy .actions{margin-top:23px;gap:9px}
.coastal-course-art{position:relative;background:#d9e5d6;min-height:300px;overflow:hidden}.coastal-course-art>img{width:100%;height:100%;min-height:300px;object-fit:cover;object-position:50% 40%;display:block}.coastal-course-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fffaf020,transparent 40%)}.coastal-course-art figcaption{position:absolute;bottom:15px;right:16px;left:16px;padding:8px 12px;background:#fff8e5ed;border:1px solid #e7e0bd;border-radius:5px;color:#50643f;font-size:11px;z-index:1}
.coastal-wallet{display:flex;flex-wrap:wrap;align-items:center;gap:11px 22px;margin:19px 0 17px}.coastal-resource{display:inline-flex;align-items:center;gap:9px;color:#574a32;font-size:13px}.coastal-resource img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 1px #8865331c)}.coastal-resource strong{color:#3a5940;font-weight:650;font-size:17px}
.coastal-island-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px}.coastal-island-card{border:1px solid #cdd5bd;border-radius:9px;overflow:hidden;background:#fff9e9;box-shadow:0 8px 18px #4c5a3710;min-width:0}
.coastal-island-picture{height:190px;position:relative;background:#dce7d8;overflow:hidden}.coastal-island-picture>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 250ms ease}.coastal-island-card:hover .coastal-island-picture>img{transform:scale(1.025)}.coastal-island-card.is-locked .coastal-island-picture>img{filter:saturate(.42);opacity:.66}.coastal-island-card.is-locked .coastal-island-picture:after{content:'';position:absolute;inset:0;background:linear-gradient(#edf0e16b,#dfe7d395)}
.coastal-island-state{position:absolute;left:13px;top:13px;padding:6px 9px;background:#fff7dfef;border:1px solid #f6edd0;border-radius:4px;font-size:9px;letter-spacing:.08em;color:#5f6748;z-index:1}.coastal-island-copy{padding:22px}.coastal-island-copy h3{font-size:24px;line-height:1.2;margin-bottom:12px}.coastal-island-copy p{font-size:12px;line-height:1.75;color:#7d6c4d}.coastal-island-copy .course-count{font-size:13px;font-weight:600;color:#5e724f;margin:0 0 10px}.coastal-island-copy .progress{margin-bottom:16px}.coastal-island-copy .btn{width:100%;font-size:12px;margin-top:5px}.coastal-course-rule{margin:23px 0 0;padding:17px 20px;background:#e9eddb;border:1px solid #cdd7b6;border-radius:6px;color:#657451;font-size:12px;line-height:1.8}
@media(min-width:1700px){.auth-layout{padding:26px;gap:26px}.auth-scene{min-height:calc(100dvh - 52px)}.auth-form{padding:50px}.auth-inner{max-width:460px;padding:42px 35px}}
@media(max-width:1150px){.app-shell{grid-template-columns:190px minmax(0,1fr)}.sidebar{padding:26px 10px}.sidebar .brand{font-size:21px;margin-left:8px}.topbar{padding:0 24px}.page{padding:27px 24px}.coastal-island-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.coastal-course-intro{grid-template-columns:minmax(0,1.1fr) minmax(230px,.9fr)}.coastal-course-copy{padding:26px}.coastal-course-copy h2{font-size:31px}.auth-inner{padding:27px 23px}.auth-form{padding:24px 15px}.auth-layout{grid-template-columns:1fr 1fr}.auth-scene{padding:27px}.auth-scene .intro h1{font-size:39px}}
@media(max-width:900px){.coastal-course-intro{grid-template-columns:1fr}.coastal-course-art{min-height:220px;max-height:260px;grid-row:1}.coastal-course-art>img{min-height:220px;max-height:260px;object-position:50% 44%}.coastal-course-copy{padding:25px}.auth-scene{padding:22px}.auth-scene .intro h1{font-size:35px}.auth-inner h1{font-size:29px}.auth-layout{gap:12px;padding:12px}.auth-scene{min-height:calc(100dvh - 24px)}}
@media(max-width:760px){.app-shell{display:block;background:#f9faf3;padding-bottom:calc(80px + env(safe-area-inset-bottom))}.sidebar{height:calc(67px + env(safe-area-inset-bottom));padding:5px 8px calc(5px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid #c8d1b8;background:#fff9e9f5;box-shadow:0 -5px 18px #41533210;backdrop-filter:blur(8px)}.nav a{border:0;padding:7px 4px;font-size:9px;border-radius:5px;min-width:42px}.nav a.active,.theme-light .nav a.active{box-shadow:inset 0 -2px #6f8c58;background:#e5ebd7}.nav a .icon{width:19px;height:19px}.topbar{height:calc(69px + env(safe-area-inset-top));padding-left:16px;padding-right:16px;background:#fffdf5}.mobile-brand{font-size:19px;letter-spacing:-.05em}.profile-button{font-size:11px}.top-actions{gap:9px}.top-actions>.btn{color:#47613f;background:#f5eed9;max-width:105px;font-size:10px}.page{padding:24px 16px 32px}.heading h1{font-size:30px}.heading p{font-size:13px}.card{padding:21px}.result-banner{padding:25px 15px;border-width:8px;border-image-width:8px}.result-banner h1{font-size:29px}.metric-card strong{font-size:25px}.auth-layout{display:block;padding:0;background:#e6ecdf}.auth-scene,.theme-light .auth-scene{display:flex;min-height:0;height:180px;border:0;border-radius:0;padding:22px 24px;justify-content:flex-start;box-shadow:none}.auth-scene .brand{font-size:22px;padding:7px 11px}.auth-scene img.scene{object-position:50% 43%}.auth-scene:after{background:linear-gradient(90deg,#214d3d20,#214d3d00),linear-gradient(180deg,transparent 42%,#e9eddf 100%)}.auth-scene .intro{display:none}.auth-form{min-height:calc(100dvh - 180px);padding:0 17px 30px;border:0;border-radius:0;align-items:flex-start;background:linear-gradient(#e9eddf,#f1efdf)}.auth-inner{max-width:460px;padding:28px 22px 30px;border-width:8px;border-image-width:8px;position:relative;z-index:1;margin-top:-15px}.auth-inner:before{display:none}.auth-inner h1{font-size:30px}.auth-inner>p{font-size:13px}.auth-inner .field input{font-size:16px;min-height:46px}.auth-inner .form{gap:16px}.coastal-island-grid{gap:15px;grid-template-columns:repeat(2,minmax(0,1fr))}.coastal-island-picture{height:150px}.coastal-island-copy{padding:17px 15px}.coastal-island-copy h3{font-size:22px}.coastal-island-copy p{font-size:12px}.coastal-island-copy .btn{padding-left:9px;padding-right:9px}.coastal-course-copy h2{font-size:31px}.coastal-course-copy{padding:24px 21px}.coastal-course-copy .actions{gap:8px}.coastal-course-copy .actions .btn{flex:1 1 150px}.coastal-course-art{max-height:230px}.coastal-resource img{width:34px;height:34px}.coastal-resource strong{font-size:16px}.coastal-wallet{gap:9px 18px}.coastal-course-rule{padding:16px}.profile-summary{padding:20px}.keyboard-open .sidebar{display:none}}
@media(max-width:480px){.coastal-island-grid{grid-template-columns:1fr;gap:19px}.coastal-island-picture{height:185px}.coastal-island-copy{padding:20px}.coastal-island-copy h3{font-size:25px}.coastal-island-copy .btn{width:auto;min-width:150px}.auth-scene{height:156px;padding:20px}.auth-form{min-height:calc(100dvh - 156px);padding-left:13px;padding-right:13px}.auth-inner{padding:26px 18px}.auth-inner h1{font-size:28px}.coastal-course-copy h2{font-size:29px}.coastal-course-art{max-height:210px}.coastal-course-art>img{min-height:210px}.heading h1{font-size:28px}}
@media(prefers-reduced-motion:reduce){.coastal-island-picture>img,.btn,.card{transition:none!important}.coastal-island-card:hover .coastal-island-picture>img,.btn:hover{transform:none}}

.brand-mark{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:8px;background:#214e42;border:1px solid #214e42;color:#f4d99d;font:500 24px "Nexus Lora",Georgia,serif;box-shadow:inset 0 0 0 3px #ffffff12}.brand-mark::before{content:"N"}.app-shell:has(.coastal-typing) .mobile-brand{display:flex}.app-shell:has(.coastal-typing) .breadcrumbs{display:none}

/* The application frame follows the monitor; reading controls keep their own measure. */
html,body,#app{width:100%;min-height:100%;margin:0}
.app-shell{width:100%;min-height:100vh;min-height:100dvh}
.main{display:flex;flex-direction:column;min-width:0;min-height:100vh;min-height:100dvh}
.main>.topbar{flex:0 0 auto}
.main>.page{display:flex;flex-direction:column;flex:1 0 auto;width:100%;min-width:0;max-width:none;margin:0;padding-inline:clamp(16px,2vw,38px);padding-bottom:20px}
.main>.page>*{flex-shrink:0;min-width:0}
.main>.page>.site-footer{margin-top:auto;padding-top:20px}
.heading>div,.profile-summary>div{min-width:0}
.profile-summary,.heading{flex-wrap:wrap}
.auth-layout{width:100%;padding:0;gap:0;grid-template-columns:minmax(0,1fr) clamp(380px,36vw,620px)}
.auth-scene,.theme-light .auth-scene{min-height:100vh;min-height:100dvh;border:0;border-radius:0;box-shadow:none;padding:clamp(24px,3vw,70px)}
.auth-form{min-height:100vh;min-height:100dvh;border:0;border-radius:0;padding:clamp(24px,3vw,55px)}
.auth-inner{width:100%;max-width:460px}
@media(min-width:1800px){
 .coastal-island-grid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
 .coastal-island-picture{height:clamp(190px,14vw,290px)}
 .coastal-course-art,.coastal-course-art>img{min-height:clamp(300px,30dvh,460px)}
}
@media(max-width:760px){
 .main{min-height:calc(100vh - 80px - env(safe-area-inset-bottom));min-height:calc(100dvh - 80px - env(safe-area-inset-bottom))}
 .main>.page{padding-inline:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
 .keyboard-open .main{min-height:calc(100dvh - 8px)}
 .auth-layout{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
 .auth-scene,.theme-light .auth-scene{height:clamp(150px,24dvh,220px);min-height:0;flex:0 0 auto;padding:22px 24px}
 .auth-form{min-height:0;flex:1;padding:0 max(14px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom));align-items:flex-start}
 .auth-inner{margin-top:-15px}
}
@media(max-width:420px){
 .main>.topbar .mobile-brand{font-size:0;gap:0;flex:0 0 34px;max-width:34px;overflow:hidden}
 .main>.topbar .top-actions{min-width:0;margin-left:auto;gap:6px}
}