@font-face{font-family:Barlow;src:url(../fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(../fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Barlow;src:url(../fonts/barlow-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Cinzel;src:url(../fonts/cinzel-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--ink:#193f45;--deep:#0e3137;--sea:#55c5bf;--foam:#eafbf2;--sun:#ffba66;--coral:#ef7764;--sand:#f3cf94;--paper:#fff8e8;--glass:rgba(255,249,229,.88);--line:rgba(26,67,71,.16);--shadow:0 18px 60px rgba(7,45,53,.22)}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#63c9c4;color:var(--ink);font-family:Barlow,system-ui,sans-serif}
button,input,a{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit}
#app,#world,.screen{position:absolute;inset:0}
#world{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.sunwash{position:absolute;inset:0;pointer-events:none;opacity:.32;background:radial-gradient(circle at 78% 7%,rgba(255,240,188,.22),transparent 24%);mix-blend-mode:screen}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:multiply}
#boot{position:fixed;inset:0;z-index:1000;background:#f9e3ad;display:grid;place-content:center;justify-items:center;transition:opacity .7s,visibility .7s}
#boot.hidden{opacity:0;visibility:hidden}
#boot img{position:relative;filter:drop-shadow(0 14px 22px rgba(49,102,95,.18));animation:float 2.2s ease-in-out infinite}
#boot p{margin:12px 0 0;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.boot-sun{position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(255,190,91,.45);filter:blur(20px)}
@keyframes float{50%{transform:translateY(-8px) rotate(2deg)}}
.glass{background:var(--glass);border:1px solid rgba(255,255,255,.68);box-shadow:var(--shadow),inset 0 0 0 1px rgba(25,65,69,.06);backdrop-filter:blur(18px) saturate(1.16)}
.screen{z-index:50;visibility:hidden;opacity:0;transition:opacity .55s,visibility .55s;background:#0e3d43}
.screen.active{visibility:visible;opacity:1}
.title-art{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(8,43,47,.93) 0%,rgba(11,51,54,.72) 38%,rgba(5,32,36,.08) 72%),linear-gradient(0deg,rgba(6,29,32,.48),transparent 45%),url(../assets/shoreloom-hero.png);background-size:cover;background-position:center}
.title-art:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 15%,rgba(255,203,111,.34),transparent 22%)}
.title-nav{position:absolute;left:clamp(24px,4vw,74px);right:clamp(24px,4vw,74px);top:clamp(20px,4vh,48px);display:flex;justify-content:space-between;align-items:center;z-index:2}
.hub-link,.quiet-btn{border:0;background:none;color:#fff;text-decoration:none;font-weight:800;font-size:12px;letter-spacing:.18em}
.quiet-btn{border:1px solid rgba(255,255,255,.28);border-radius:99px;padding:11px 16px;cursor:pointer}
.title-copy{position:absolute;z-index:2;left:clamp(28px,7vw,126px);top:50%;transform:translateY(-48%);color:#fff;max-width:720px}
.title-logo-row{display:flex;align-items:center;gap:16px}
.title-logo-row img{filter:drop-shadow(0 20px 28px rgba(0,28,30,.36))}
.kicker{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.24em;color:#9ef3e4}
h1{font-family:Cinzel,serif;font-size:clamp(52px,6.5vw,110px);line-height:.85;letter-spacing:-.065em;margin:0;text-shadow:0 12px 40px rgba(3,32,34,.28)}
h1 span{color:#ffc574}
.title-lede{font-family:Cinzel,serif;font-size:clamp(16px,1.5vw,25px);line-height:1.55;color:#eefdf4;margin:26px 0 28px}
.title-actions{display:flex;gap:12px;align-items:center}
.sun-btn,.glass-btn{border:0;border-radius:14px;padding:16px 21px;font-weight:800;letter-spacing:.035em;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.sun-btn{display:inline-flex;gap:34px;align-items:center;justify-content:center;background:linear-gradient(135deg,#ffbd68,#ef7663);color:#123c40;box-shadow:0 14px 34px rgba(239,119,99,.27)}
.sun-btn:hover,.glass-btn:hover{transform:translateY(-2px)}
.glass-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);color:#fff}
.title-features{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:28px;font-size:12px;font-weight:600;color:rgba(238,253,244,.8)}
.title-features i{font-style:normal;color:#ffc574;margin-right:5px}
.title-note{position:absolute;z-index:2;left:clamp(28px,7vw,126px);bottom:36px;display:flex;align-items:center;gap:13px;color:rgba(255,255,255,.62);font-size:9px;font-weight:800;letter-spacing:.18em}
.title-note b{width:30px;height:1px;background:rgba(255,255,255,.36)}
#hud{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
#hud.active{opacity:1;visibility:visible}
.topbar{pointer-events:auto;position:absolute;top:18px;left:50%;transform:translateX(-50%);width:min(94vw,1220px);height:72px;border-radius:21px;display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;padding:8px 10px 8px 13px}
.mini-brand{display:flex;align-items:center;gap:8px}.mini-brand img{object-fit:contain}.mini-brand div{display:grid}.mini-brand strong{font-family:Cinzel;font-size:15px;letter-spacing:.03em}.mini-brand small{font-size:10px;color:#5e7473;margin-top:2px}
.tide-readout{text-align:center;display:grid;justify-items:center}.tide-readout span{font-size:9px;font-weight:800;letter-spacing:.14em;color:#55706e}.tide-readout strong{font-family:Cinzel;font-size:18px;margin:1px 0}.tide-readout>i{display:block;width:148px;height:4px;background:#d8dfd3;border-radius:5px;overflow:hidden}.tide-readout>i b{display:block;width:0;height:100%;background:linear-gradient(90deg,#53beb8,#ef8c6e);border-radius:inherit;transition:width .2s}
.top-actions{display:flex;justify-content:flex-end;gap:5px;align-items:center}.top-actions button,.renderer-badge{height:37px;min-width:37px;border:1px solid var(--line);background:#fffaf0;border-radius:11px;font-size:12px;font-weight:800;cursor:pointer}.top-actions button:hover{background:#ffe6b8}.renderer-badge{display:grid;place-items:center;height:23px;min-width:auto;padding:0 8px;border-radius:20px;font-size:8px;letter-spacing:.13em;background:#daf4e9;color:#24776f}
.toolbox{pointer-events:auto;position:absolute;left:18px;top:108px;width:220px;border-radius:22px;padding:16px 10px 12px}
.panel-label{margin:0 7px 9px;font-size:9px;font-weight:800;letter-spacing:.2em;color:#67817f}
.tool{position:relative;width:100%;height:56px;border:0;border-radius:13px;background:transparent;display:grid;grid-template-columns:22px 35px 1fr;align-items:center;text-align:left;cursor:pointer;padding:5px 7px;transition:.18s}.tool:hover{background:rgba(84,193,184,.11)}.tool.active{background:linear-gradient(90deg,rgba(255,190,101,.43),rgba(239,119,100,.13));box-shadow:inset 3px 0 #ef7764}.tool kbd{align-self:start;margin-top:4px;border:1px solid var(--line);border-radius:5px;text-align:center;font-size:8px;line-height:17px;background:rgba(255,255,255,.5)}.tool-icon{font-family:serif;font-size:23px;color:#287d79}.tool>span:last-child{display:grid}.tool b{text-transform:uppercase;font-size:11px;letter-spacing:.04em}.tool small{font-size:9px;color:#69807e;margin-top:2px}.camera-tip{display:flex;align-items:center;gap:5px;margin:11px 7px 2px;color:#70827e;font-size:8px}.camera-tip b{font-size:8px;color:#2a5a5b}.camera-tip i{flex:1;height:1px;background:var(--line)}
.journal{pointer-events:auto;position:absolute;right:18px;top:108px;width:276px;border-radius:22px;padding:17px}
.journal-head{display:flex;justify-content:space-between;align-items:start}.journal-head .panel-label{margin-left:0}.journal h2{font-family:Cinzel;margin:0 0 13px;font-size:18px}.journal-head>span{font-size:10px;font-weight:800;padding:6px 9px;border-radius:20px;background:#d7f1e7}.goals{display:grid;gap:4px}.goals article{display:grid;grid-template-columns:23px 1fr 19px;gap:5px;align-items:center;padding:9px 7px;border-radius:10px;transition:.25s}.goals article.done{background:rgba(83,195,184,.13)}.goals i{font-style:normal;font-size:8px;font-weight:800;color:#8c9b94}.goals span{display:grid}.goals b{text-transform:uppercase;font-size:10px}.goals small{font-size:8px;color:#71817e;margin-top:2px}.goals em{font-style:normal;font-size:15px;color:#9ca9a1}.goals article.done em{color:#318f86}.shore-health{margin-top:15px;padding-top:13px;border-top:1px solid var(--line)}.shore-health>span{display:flex;justify-content:space-between;font-size:9px}.shore-health em{font-style:normal;font-weight:800}.shore-health>i{height:6px;display:block;margin:7px 0;background:#d9dfd3;border-radius:6px;overflow:hidden}.shore-health>i b{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ef7764,#ffbf69,#55c3b9);transition:width .3s}.shore-health small{font-size:8px;color:#6b7e7a}.finds{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.finds>span{background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:11px;padding:8px;display:flex;align-items:center;gap:7px}.finds b{font-family:Cinzel;font-size:17px}.finds small{font-size:8px;line-height:1.1;color:#667c78}
.brushbar{pointer-events:auto;position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:min(670px,calc(100vw - 44px));min-height:74px;border-radius:22px;padding:10px 15px;display:grid;grid-template-columns:150px 1fr 1fr 155px;gap:15px;align-items:center}.active-tool{display:flex;gap:10px;align-items:center}.active-tool>span{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,#ffcf7f,#ef7764);display:grid;place-items:center;font-size:24px}.active-tool div,.material-state span{display:grid}.active-tool small,.material-state small,.brushbar label>span{font-size:8px;letter-spacing:.11em;font-weight:800;color:#71807a}.active-tool strong{font-family:Cinzel;font-size:13px}.brushbar label{display:grid;gap:7px}.brushbar label>span{display:flex;justify-content:space-between}.brushbar label b{color:#2e5f5d}.brushbar input{accent-color:#ef7764;width:100%}.material-state{display:flex;gap:8px;align-items:center}.material-state>i{width:11px;height:11px;border-radius:50%;background:#f0bd76;box-shadow:0 0 0 5px rgba(240,189,118,.2)}.material-state b{font-size:8px;margin-top:3px}
#cursor-label{position:absolute;left:0;top:0;padding:7px 10px;border-radius:9px;background:rgba(17,58,61,.84);color:#fff;display:grid;pointer-events:none;opacity:0;transform:translate(17px,17px);transition:opacity .15s;box-shadow:0 8px 22px rgba(8,43,45,.2)}#cursor-label.show{opacity:1}#cursor-label b{font-size:9px;letter-spacing:.1em}#cursor-label small{font-size:8px;opacity:.7}
#toasts{position:absolute;left:50%;top:106px;transform:translateX(-50%);display:grid;gap:8px;justify-items:center}.toast{background:rgba(17,61,63,.9);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:40px;padding:10px 17px;font-size:11px;font-weight:600;box-shadow:0 12px 32px rgba(5,37,39,.2);animation:toast-in .3s ease,toast-out .4s 3.4s forwards}.toast b{color:#ffc271}@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}}@keyframes toast-out{to{opacity:0;transform:translateY(-8px)}}
#tide-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);text-align:center;color:#fff;background:rgba(12,63,68,.82);border:1px solid rgba(255,255,255,.3);box-shadow:0 20px 70px rgba(4,43,47,.33);border-radius:25px;padding:25px 46px;opacity:0;visibility:hidden;transition:.5s;backdrop-filter:blur(14px)}#tide-banner.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}#tide-banner small{font-size:9px;letter-spacing:.22em;color:#b9f6e9}#tide-banner strong{font-family:Cinzel;font-size:34px;display:block;margin:4px 0}#tide-banner span{font-size:11px}
.modal{position:absolute;inset:0;z-index:100;background:rgba(9,50,53,.48);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.3s;pointer-events:auto;backdrop-filter:blur(6px)}.modal.open{opacity:1;visibility:visible}.modal-card{position:relative;width:min(860px,calc(100vw - 32px));border-radius:27px;padding:34px}.modal-close{position:absolute;right:18px;top:18px;width:36px;height:36px;border:0;border-radius:10px;background:rgba(33,77,78,.08);cursor:pointer;font-size:23px}.modal .kicker{color:#388e86}.modal h2{font-family:Cinzel;font-size:32px;margin:0}.modal-lede{font-size:13px;color:#5e7672}.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:25px 0}.guide-grid article{border:1px solid var(--line);border-radius:16px;padding:17px;background:rgba(255,255,255,.36)}.guide-grid span{font-size:9px;color:#ef7764;font-weight:800}.guide-grid b{display:block;font-family:Cinzel;margin:15px 0 7px}.guide-grid p{font-size:10px;line-height:1.55;color:#617975;margin:0}.key-strip{display:flex;gap:8px;align-items:center;justify-content:center;font-size:9px;background:rgba(36,93,92,.06);padding:11px;border-radius:12px}.key-strip kbd{border:1px solid var(--line);border-radius:5px;padding:3px 6px;background:#fff}.modal-ready{margin:20px auto 0;display:flex}.pause-card{text-align:center;width:min(390px,calc(100vw - 32px));border-radius:27px;padding:30px;display:grid;justify-items:stretch;gap:9px}.pause-card img{justify-self:center}.pause-card h2{font-family:Cinzel;font-size:26px;margin:0 0 12px}.pause-card .kicker{color:#388e86}.pause-card .glass-btn{color:var(--ink);border-color:var(--line);background:rgba(255,255,255,.55)}.text-btn{border:0;background:transparent;color:#5d7773;text-decoration:none;font-size:11px;font-weight:600;padding:8px;cursor:pointer}
body.paused #world{filter:saturate(.75)}
@media(max-width:1050px){.journal{width:235px}.toolbox{width:195px}.brushbar{grid-template-columns:130px 1fr 1fr}.material-state{display:none}.topbar{grid-template-columns:1fr 1fr 1fr}.top-actions #save-btn{display:none}}
@media(max-width:760px){#world{cursor:crosshair}.title-copy{left:24px;right:24px}.title-logo-row img{width:92px;height:92px}.title-features{max-width:400px}.title-note{display:none}.topbar{top:8px;width:calc(100vw - 16px);height:64px;grid-template-columns:1fr auto}.tide-readout{display:none}.mini-brand img{width:40px;height:40px}.toolbox{left:8px;right:8px;top:auto;bottom:90px;width:auto;height:70px;border-radius:18px;display:flex;overflow-x:auto;padding:8px}.toolbox .panel-label,.camera-tip{display:none}.tool{min-width:58px;width:58px;height:53px;display:grid;grid-template-columns:1fr;padding:4px;text-align:center}.tool kbd,.tool>span:last-child small{display:none}.tool-icon{font-size:21px}.tool b{font-size:8px}.journal{right:8px;top:82px;width:210px;padding:12px}.goals small,.shore-health small,.finds{display:none}.journal h2{font-size:15px}.brushbar{bottom:8px;width:calc(100vw - 16px);min-height:70px;grid-template-columns:120px 1fr;padding:8px 11px}.brushbar label:nth-of-type(2){display:none}.guide-grid{grid-template-columns:1fr 1fr}.modal-card{max-height:92vh;overflow:auto}}
.toolbox{scrollbar-width:none}.toolbox::-webkit-scrollbar{display:none}
@media(max-width:520px){.journal{display:none}.title-copy{top:47%}.title-logo-row{display:block}.title-logo-row img{margin-left:-10px}.title-lede br{display:none}.title-actions{align-items:stretch;flex-direction:column}.title-actions button{width:100%}.title-features{gap:8px 12px}.top-actions .renderer-badge,.top-actions #undo-btn,.top-actions #redo-btn{display:none}.guide-grid{grid-template-columns:1fr}.key-strip{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* High-legibility game HUD: Shoreloom is meant to be read at a glance. */
.panel-label{font-size:11px;letter-spacing:.17em}
.tool b{font-size:13px;letter-spacing:.025em}
.tool small{font-size:11px;line-height:1.25;margin-top:3px}
.camera-tip,.camera-tip b{font-size:10px}
.journal-head>span{font-size:12px}
.goals b{font-size:12px}
.goals small{font-size:10px;line-height:1.3}
.goals i{font-size:10px}
.shore-health>span{font-size:11px}
.shore-health small{font-size:10px;line-height:1.35}
.finds small{font-size:10px}
.active-tool small,.material-state small,.brushbar label>span{font-size:10px}
.active-tool strong{font-size:15px}
.material-state b{font-size:10px;line-height:1.25}
#cursor-label{padding:9px 12px;border:1px solid rgba(255,255,255,.3)}
#cursor-label b{font-size:11px}#cursor-label small{font-size:10px}
.guide-grid p{font-size:12px}.guide-grid b{font-size:15px}.key-strip{font-size:11px}

@media(min-width:1100px){
  .topbar{height:78px;top:16px;padding-left:16px;padding-right:12px}
  .mini-brand strong{font-size:17px}.mini-brand small{font-size:12px}
  .tide-readout span{font-size:10px}.tide-readout strong{font-size:21px}
  .toolbox{top:110px;width:260px;padding:18px 11px 14px}
  .tool{height:63px;grid-template-columns:25px 41px 1fr;padding:6px 8px}
  .tool-icon{font-size:25px}
  .journal{top:110px;width:320px;padding:20px}
  .journal h2{font-size:22px;margin-bottom:16px}
  .goals{gap:6px}.goals article{padding:11px 8px;grid-template-columns:28px 1fr 21px}
  .shore-health{margin-top:18px;padding-top:16px}
  .finds>span{padding:10px}.finds b{font-size:20px}
  .brushbar{width:760px;min-height:84px;grid-template-columns:165px 1fr 1fr 172px;gap:18px;padding:12px 17px}
  .active-tool>span{width:48px;height:48px;font-size:27px}
}