@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap');
.private-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#073b43;color:#f3d48b;padding:8px max(16px,calc((100vw - 1064px)/2));font-size:13px}.private-bar form{margin:0}.private-bar button{padding:7px 12px;border-radius:20px;background:#ffffff18;color:white;font-size:12px}
:root{--ink:#143e44;--muted:#60767a;--sea:#087b80;--navy:#073b43;--gold:#f3d48b;--bg:#f5f7f3;--line:#dde7e2;--radius:22px;color-scheme:light;font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button,a{touch-action:manipulation}a{color:var(--sea);text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #d69b37;outline-offset:3px}button{border:0}h1,h2,h3,p{margin-top:0}p{line-height:1.85}h2{font-size:21px;letter-spacing:.025em}h3{font-size:20px}small{font-size:12px}button span{pointer-events:none}.topbar{max-width:1120px;margin:auto;padding:22px 28px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800;color:var(--ink);text-decoration:none}.brand small{display:block;font-size:9px;letter-spacing:.2em;margin-top:3px}.brand-mark{display:grid;place-items:center;background:var(--navy);border-radius:50%;color:var(--gold);width:44px;height:44px;font-size:23px;border:3px double var(--gold)}.sos-short{border:1px solid #e2bfb8;background:#fff7f3;color:#a33b32;padding:10px 16px;border-radius:30px;font-weight:700}main{max-width:1064px;margin:auto;padding:0 0 110px}.page{display:none}.page.active{display:block;animation:enter .25s ease}@keyframes enter{from{opacity:.4;transform:translateY(5px)}}.hero{min-height:420px;background:var(--navy);border-radius:28px;position:relative;overflow:hidden;padding:45px 48px;color:#fff}.hero:before{content:'';position:absolute;width:350px;height:350px;border:1px solid #ffffff17;border-radius:50%;right:26px;top:38px;box-shadow:0 0 0 35px #ffffff04,0 0 0 70px #ffffff03}.eyebrow{font-size:11px;letter-spacing:.17em;font-weight:700;display:block;margin-bottom:10px}.hero .eyebrow{color:#b9ded7}.hero h1{font-size:47px;letter-spacing:.06em;line-height:1.4;margin-bottom:18px;font-weight:800}.hero h1 em{font-style:normal;color:var(--gold)}.hero p{font-size:13px;color:#d0e7e1;margin-bottom:22px}.hero-copy{position:relative;z-index:2}.gold{background:var(--gold);color:#344638;padding:14px 23px;border-radius:12px;font-weight:800}.gold span{padding-left:35px}.ebisu{position:absolute;right:45px;bottom:0;width:355px;height:406px;overflow:hidden;z-index:1;filter:drop-shadow(0 15px 20px #001c2080);clip-path:polygon(17% 0,100% 0,100% 100%,0 100%,0 32%,16% 30%)}.ebisu img{height:410px;max-width:none;position:absolute;right:0;bottom:0}.hero-seal{position:absolute;right:28px;top:30px;border:1px solid #f3d48b88;border-radius:4px;color:var(--gold);padding:8px 6px;line-height:1.3;font-size:12px;z-index:2}.sea-lines{position:absolute;bottom:-100px;left:-70px;width:800px;height:160px;border:1px solid #60aaab45;border-radius:50%;box-shadow:0 -12px 0 -11px #60aaab55,0 -25px 0 -24px #60aaab55,0 -38px 0 -37px #60aaab55}.datebar{display:flex;justify-content:space-between;align-items:center;padding:18px 4px;font-size:12px;color:var(--muted)}.pill{border:1px solid #cadbd2;border-radius:30px;font-size:10px;letter-spacing:.05em;padding:5px 10px;display:inline-block;white-space:normal}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 15px}.section-heading h2{margin:0}.section-heading .eyebrow{color:var(--sea);margin-bottom:7px}.small-muted{font-size:12px;color:var(--muted)}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.tool{border:1px solid #dce7df;display:flex;align-items:center;gap:18px;padding:25px 22px;text-align:left;border-radius:18px;color:var(--ink);transition:transform .15s}.tool:hover{transform:translateY(-3px)}.tool b{font-size:18px;display:block;margin-bottom:7px}.tool small{color:var(--muted)}.tool-icon{font-size:30px;display:grid;place-items:center;width:52px;height:52px;border:1px solid #ffffffaa;border-radius:15px;background:#ffffff60;flex-shrink:0}.tool i{font-style:normal;margin-left:auto;color:var(--sea)}.teal{background:#e0efea}.sand{background:#f5efdf}.blue{background:#e4eef3}.mint{background:#e9efdf}.home-bottom{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}.camera-card,.return-card{position:relative;text-align:left;padding:27px;border-radius:18px;color:var(--ink)}.camera-card{background:linear-gradient(120deg,#cee3e2,#e7f1eb);overflow:hidden}.camera-card:after{content:'';position:absolute;width:150px;height:150px;border:1px solid #73aeaa55;border-radius:50%;right:-60px;bottom:-70px;box-shadow:0 0 0 12px #ffffff33,0 0 0 24px #ffffff22}.return-card{background:#fff;border:1px solid var(--line)}.home-bottom h3{margin-bottom:10px}.home-bottom p{font-size:12px;margin-bottom:18px}.return-card>span:last-child{font-size:12px;color:var(--sea);font-weight:700}.round-arrow{font-size:23px}.page-heading{padding:26px 4px 16px}.page-heading .eyebrow{color:var(--sea)}.page-heading h1{font-size:34px;margin-bottom:10px}.page-heading p{color:var(--muted);font-size:14px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin:0 0 20px}.card>p{font-size:14px}.card>.section-heading:first-child{margin-top:0}.primary,.secondary,.danger,.button{display:inline-flex;justify-content:center;align-items:center;min-height:46px;border-radius:12px;padding:12px 18px;text-decoration:none;font-size:14px;font-weight:700;margin:4px 0}.primary{background:var(--sea);color:#fff}.secondary{background:#eef4ef;color:var(--ink);border:1px solid #d8e5dc}.danger{background:#a43f36;color:#fff}.text-button{background:none;color:var(--sea);font-size:13px;min-height:44px;font-weight:700;padding:6px}.form-row,.button-row{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.form-row>label{flex:1;min-width:140px}.form-row>button{margin-bottom:15px}.button-row{align-items:center}.button-row>button{flex:1}label{display:block;font-size:13px;font-weight:600;margin-bottom:14px;line-height:1.7}input,select,textarea{display:block;width:100%;border:1px solid #cdded6;border-radius:10px;background:#fafcf9;color:var(--ink);padding:12px;margin-top:7px;font-size:16px;min-height:46px}textarea{resize:vertical}.check{display:flex;align-items:center;gap:10px}.check input{width:20px;min-height:20px;margin:0}.note{font-size:12px!important;color:var(--muted);line-height:1.8;margin-top:15px;margin-bottom:8px}.warning{background:#fbf3e2;padding:14px;border-radius:10px;color:#725a32}.empty{padding:28px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed #cddbd2;border-radius:16px;background:#ffffff70}.upload{display:grid;place-items:center;background:#edf5f1;border:1px dashed #7fa49b;border-radius:16px;padding:24px;color:var(--sea);font-size:16px;cursor:pointer}.upload input{margin:12px 0 0;max-width:360px;font-size:12px}.photo-preview{max-width:100%;max-height:400px;display:block;margin:auto;border-radius:14px}canvas{max-width:100%;display:block;border-radius:14px;touch-action:manipulation}#measureCanvas{width:100%;background:#102f36}.step-hint{color:var(--sea);font-weight:700;font-size:13px;margin-top:12px}.result{font-size:22px;font-weight:800;color:var(--sea)}.catch-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.catch-list>.empty{grid-column:1/-1}.catch{border:1px solid var(--line);background:white;border-radius:16px;overflow:hidden}.catch img{width:100%;height:165px;object-fit:cover}.catch>div{padding:16px}.catch h3{font-size:17px;margin-bottom:7px}.catch p{font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.catch small{color:var(--muted)}.catch button{display:block}.spot{padding:20px;border:1px solid var(--line);border-radius:15px;margin-bottom:12px;background:white;overflow-wrap:anywhere}.spot h3{margin-bottom:8px}.spot p{white-space:pre-wrap;font-size:13px}.spot a{margin-right:18px}.messages{max-height:420px;overflow:auto;padding:10px 0}.message{padding:12px 15px;background:#edf5f0;border-radius:14px;margin-bottom:12px;max-width:90%;overflow-wrap:anywhere}.message.self{margin-left:auto;background:#e0efec}.message small{font-size:10px;color:var(--muted)}.message p{white-space:pre-wrap;margin:6px 0 0;font-size:14px}.message.alert{background:#fff0e6;border:1px solid #eabf9d}.message.board{border-left:3px solid #c69944}.trip{padding:16px;border-radius:12px;background:#edf4f0;margin-top:12px;font-size:13px;overflow-wrap:anywhere}.trip.overdue{background:#fff0e6}.trip strong{display:block;margin-bottom:8px}.emergency{border-color:#e2b7a8;background:#fffaf7}.emergency .button,.emergency button{margin-right:8px}#waterVideo{width:100%;max-height:450px;background:#0c2931;border-radius:15px;min-height:180px}#toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#123940;color:white;border-radius:14px;padding:16px 22px;box-shadow:0 6px 30px #0003;max-width:90vw;width:max-content;font-size:13px;z-index:20;white-space:pre-wrap}.bottom-nav{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;background:#fffefa;border:1px solid #dce4dc;box-shadow:0 5px 30px #143e4418;border-radius:20px;padding:8px 12px;z-index:10;gap:8px}.bottom-nav button{background:transparent;color:var(--muted);width:94px;padding:5px;border-radius:13px;font-size:11px;min-height:49px;white-space:nowrap}.bottom-nav span{display:block;font-size:22px;line-height:26px}.bottom-nav .selected{background:#e5f0e8;color:var(--sea);font-weight:800}footer{text-align:center;color:var(--muted);font-size:11px;padding:35px 10px 0}footer span{font-size:9px;letter-spacing:.15em;margin-left:12px}footer p{font-size:10px;margin-top:12px}hr{border:0;border-top:1px solid var(--line);margin:25px 0}.tide-chart{width:100%;height:auto;margin-top:15px}.tide-events{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;padding:14px;background:#eef5f1;border-radius:12px}.tide-events b{margin-right:7px;color:var(--sea)}#arOverlay{position:fixed;inset:0;z-index:100;background:transparent;text-align:center;pointer-events:none;color:white;padding-top:40px}#arOverlay p{background:#073b43cc;padding:15px}#arOverlay button{pointer-events:auto;position:absolute;bottom:60px;left:20px}#arOverlay #arExit{left:auto;right:20px}.reticle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:38px;text-shadow:0 0 3px black;color:#f9dd82}[hidden]{display:none!important}
@media(min-width:900px){.page:not(#home){max-width:830px;margin:auto}}
@media(max-width:1100px){main{padding-left:22px;padding-right:22px}}
@media(max-width:620px){.topbar{padding:16px}.brand{font-size:16px;gap:8px}.brand small{font-size:8px}.brand-mark{width:36px;height:36px;font-size:20px}.sos-short{font-size:12px;padding:9px 12px}main{padding:0 16px 110px}.hero{min-height:360px;padding:27px 23px;border-radius:22px}.hero h1{font-size:33px;line-height:1.45;position:relative;z-index:2}.hero p{font-size:11px;max-width:215px}.hero .eyebrow{font-size:10px}.hero .gold{padding:12px 15px;font-size:12px}.gold span{padding-left:14px}.ebisu{right:-16px;width:205px;height:272px;bottom:24px;opacity:.94}.ebisu img{height:272px;right:-5px}.hero-seal{right:16px;top:20px;font-size:10px;padding:7px 5px}.hero:before{width:210px;height:210px;right:-40px;top:80px}.section-heading h2{font-size:19px}.small-muted{font-size:10px}.tool-grid{gap:10px}.tool{padding:17px 13px;flex-wrap:wrap;gap:10px;min-height:151px;position:relative}.tool-icon{width:38px;height:38px;font-size:25px;border-radius:11px}.tool>span:nth-child(2){width:100%}.tool b{font-size:14px;margin-bottom:4px}.tool small{font-size:10px;line-height:1.8;display:block}.tool i{position:absolute;top:18px;right:14px}.home-bottom{grid-template-columns:1fr;gap:12px}.camera-card,.return-card{padding:21px}.home-bottom h3{font-size:18px}.camera-card .round-arrow{position:absolute;right:24px;top:50px}.home-bottom p{margin-bottom:7px}.bottom-nav{bottom:0;left:0;transform:none;width:100%;border-radius:18px 18px 0 0;padding:7px 4px max(7px,env(safe-area-inset-bottom));gap:0;justify-content:space-around}.bottom-nav button{width:20%;font-size:10px}.card{padding:20px 17px}.page-heading h1{font-size:28px}.page-heading p{font-size:12px}.form-row{gap:7px}.form-row>label{min-width:120px}.form-row>button{width:100%}.catch-list{grid-template-columns:1fr 1fr}.catch img{height:125px}.catch>div{padding:12px}.catch h3{font-size:15px}.datebar{font-size:10px}.tide-events{font-size:12px;gap:10px}#toast{bottom:90px}footer span{display:block;margin:8px 0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:400px){.hero h1{font-size:27px}.hero p{max-width:166px;font-size:10px}.hero .ebisu{width:166px;height:228px;right:-20px;bottom:26px}.hero .ebisu img{height:228px}.hero .gold{font-size:11px;padding:12px}.hero{min-height:340px}.hero .eyebrow{font-size:9px}}
.desktop-nav{display:none}.device-help{margin:12px 0 20px;padding:14px 18px;background:#e8f0e9;border-radius:14px;font-size:12px;line-height:1.8}.device-help summary{cursor:pointer;font-weight:700;min-height:30px}.device-help p{margin:10px 0 0}.transfer{margin:12px 0 20px}.transfer input{max-width:420px;font-size:12px}#waterPhoto{width:100%;max-height:480px;object-fit:contain;border-radius:14px}#measureCanvas:focus-visible{outline:4px solid #bd8d27;outline-offset:4px}
@media(min-width:900px){.desktop-nav{max-width:1064px;margin:0 auto 24px;display:flex;gap:5px;border-bottom:1px solid var(--line);padding-bottom:12px}.desktop-nav button{flex:1;background:transparent;border-radius:10px;min-height:45px;font-size:13px;color:var(--muted);padding:10px 5px}.desktop-nav button.selected{background:var(--navy);color:white}.bottom-nav{display:none}main{padding-bottom:35px}.hero{min-height:465px}.hero h1{font-size:49px}.ebisu{height:435px;width:380px}.ebisu img{height:435px}.page:not(#home){max-width:100%;}.page:not(#home)>.card{max-width:930px;margin-left:auto;margin-right:auto}.page-heading{padding:28px 0}.catch-list{grid-template-columns:repeat(4,1fr)}.messages{max-height:520px}#toast{bottom:28px}}
/* Ocean photograph: keep controls on readable pale surfaces. */
html:root{background:#bce2f1 url('./assets/ocean-background.png') center center/cover fixed no-repeat}
body{min-height:100vh;background:linear-gradient(180deg,rgba(235,248,252,.83),rgba(225,244,250,.57))}
.hero{background:linear-gradient(90deg,rgba(4,42,57,.91),rgba(4,50,67,.42)),url('./assets/rocky-coast-background.png') center 55%/cover no-repeat;box-shadow:0 14px 40px #073b4326}
.card,.tool,.spot,.catch{background:rgba(255,255,255,.95)}
.datebar,.section-heading,.page-heading,footer{color:#123b49}
.desktop-nav{background:rgba(243,251,253,.92);border-radius:14px;padding:8px}

.brand .brand-owner{margin-top:5px;font-size:11px;letter-spacing:.06em;color:#87691f;font-weight:700}@media(max-width:620px){.brand .brand-owner{font-size:10px}}

/* Prominent app title and publisher, responsive on small screens. */
.brand{font-size:28px;font-weight:900;line-height:1.3}.brand .brand-owner{font-size:18px;font-weight:900;letter-spacing:.02em;color:#76530c;margin-top:6px}.brand-mark{width:52px;height:52px;flex-shrink:0}@media(max-width:620px){.brand{font-size:21px;gap:8px}.brand .brand-owner{font-size:14px}.brand-mark{width:38px;height:38px}.topbar{gap:8px}.sos-short{flex-shrink:0}}@media(max-width:370px){.brand{font-size:18px}.brand .brand-owner{font-size:12px}.topbar{padding-left:12px;padding-right:12px}.sos-short{padding:9px 8px}}

/* Stronger ocean color on mobile, keeping card surfaces readable. */
html[data-view='mobile'] body{background:linear-gradient(180deg,rgba(235,248,252,.48),rgba(225,244,250,.25))}@media(max-width:620px){html:not([data-view='pc']) body{background:linear-gradient(180deg,rgba(235,248,252,.48),rgba(225,244,250,.25))}}

html[data-view='mobile'] .brand{font-size:21px;font-weight:900}html[data-view='mobile'] .brand .brand-owner{font-size:14px;font-weight:900}html[data-view='pc'] .brand{font-size:28px;font-weight:900}@media(max-width:370px){html[data-view='mobile'] .brand{font-size:18px}html[data-view='mobile'] .brand .brand-owner{font-size:12px}}

/* Standalone Ebisu fits without the former two-character crop. */
html .hero .ebisu img{width:100%;height:100%;object-fit:contain;object-position:right bottom;right:0}

/* Keep the complete mirrored Ebisu inside the hero. */
html .hero .ebisu{right:35px;bottom:12px}html .hero .ebisu img{object-position:center bottom}@media(max-width:620px){html:not([data-view='pc']) .hero .ebisu{right:12px;bottom:22px;width:166px;height:238px}}html[data-view='mobile'] .hero .ebisu{right:12px;bottom:22px;width:166px;height:238px}@media(max-width:370px){html:not([data-view='pc']) .hero .ebisu{right:8px;width:148px;height:218px}}

#home .hero .ebisu{right:35px;bottom:12px}#home .hero .ebisu img{width:100%;height:100%;object-fit:contain;object-position:center bottom;right:0}@media(max-width:620px){html:not([data-view='pc']) #home .hero .ebisu{right:18px;bottom:22px;width:166px;height:238px}}html[data-view='mobile'] #home .hero .ebisu{right:18px;bottom:22px;width:166px;height:238px}@media(max-width:370px){html:not([data-view='pc']) #home .hero .ebisu{right:12px;width:148px;height:218px}}

.today-tide{display:grid;gap:3px;text-align:center;background:#e6f6fc;color:#073b43;border:1px solid #7cb5cc;border-radius:16px;padding:10px 16px;flex-shrink:0}.today-tide time{font-size:14px;font-weight:700}.today-tide strong{font-size:20px}.today-tide small{font-size:10px}@media(max-width:620px){.topbar{flex-wrap:wrap}.today-tide{margin-left:auto;padding:8px 12px}.today-tide time{font-size:12px}.today-tide strong{font-size:17px}}html[data-view='mobile'] .topbar{flex-wrap:wrap}

#tideCountdown{font-size:12px;font-weight:700;white-space:pre-line;line-height:1.6}.today-tide{max-width:50%;margin-left:auto}@media(max-width:620px){.today-tide{width:50%;margin-top:8px}}html[data-view='mobile'] .today-tide{width:50%;margin-top:8px}

/* Keep title and tide panel side by side, including mobile mode. */
html .topbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center}html .topbar .brand{min-width:0;overflow-wrap:anywhere}html .topbar .today-tide{width:100%;max-width:100%;margin:0;padding:8px}html .topbar .brand-mark{width:30px;height:30px;font-size:17px}@media(max-width:620px){html .topbar .brand{font-size:18px}html .topbar .brand .brand-owner{font-size:12px}}html[data-view='mobile'] .topbar .brand{font-size:18px}html[data-view='mobile'] .topbar .brand .brand-owner{font-size:12px}


.brand-title{display:block}.brand-title>span{display:inline-block;white-space:nowrap}@media(max-width:620px){html:not([data-view='pc']) .brand-title>span{display:block}}html[data-view='mobile'] .brand-title>span{display:block}


/* Emphasize publisher on mobile independently of desktop sizing. */
@media(max-width:620px){html:not([data-view='pc']) .topbar .brand .brand-owner{font-size:16px;font-weight:900;line-height:1.45;letter-spacing:0;color:#684400;margin-top:8px;overflow-wrap:normal;word-break:normal}}html[data-view='mobile'] .topbar .brand .brand-owner{font-size:16px;font-weight:900;line-height:1.45;letter-spacing:0;color:#684400;margin-top:8px;overflow-wrap:normal;word-break:normal}


.today-tide>button{border-radius:8px;background:#087b80;color:white;font-size:12px;font-weight:700;padding:8px 4px;min-height:36px}.today-tide>button+button{background:#d5eaf0;color:#143e44}#tideLocationStatus{line-height:1.5}


.tide-heading{display:flex;align-items:center;justify-content:center;gap:8px}.tide-heading b{font-size:16px;font-weight:900;line-height:1.3;overflow-wrap:anywhere}.tide-heading time{flex-shrink:0}


.return-nav{position:sticky;top:8px;z-index:15;margin:8px 0 12px;width:max-content;max-width:100%}.return-nav button{min-height:48px;padding:12px 22px;border-radius:14px;background:#073b43;color:#fff;font-weight:800;font-size:16px;box-shadow:0 3px 12px #0003;border:2px solid #f3d48b}


.map-dialog{width:min(720px,96vw);max-height:92dvh;border:0;border-radius:18px;padding:16px;color:#143e44;overflow:auto}.map-dialog::backdrop{background:#001d28aa}.map-dialog-head{position:sticky;top:-16px;background:white;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0}.map-dialog-head h2{font-size:18px;margin:0}.map-dialog-head button{background:#073b43;color:white;border-radius:10px;padding:12px;min-height:48px;font-weight:800}.map-dialog iframe{width:100%;height:40dvh;border:1px solid #ccdede;border-radius:12px}.map-dialog iframe:not([src]){display:none}.map-results{display:grid;gap:6px;margin-top:12px}.map-results button{min-height:44px;background:#e0efea;color:#143e44;padding:10px;text-align:left;border-radius:8px}.map-status{font-size:13px}.map-external{display:block;padding:12px 0}


/* Match the mobile title card to the adjacent tide panel. */
@media(max-width:620px){html:not([data-view='pc']) .topbar .brand{align-self:stretch;flex-direction:column;justify-content:center;gap:8px;padding:12px 8px;border:1px solid #7cb5cc;border-radius:16px;background:rgba(255,255,255,.82);text-align:center}html:not([data-view='pc']) .topbar .brand>span:last-child{min-width:0;width:100%}html:not([data-view='pc']) .topbar .brand .brand-title{font-size:clamp(27px,8vw,38px);font-weight:900;line-height:1.35;letter-spacing:0}html:not([data-view='pc']) .topbar .brand .brand-title>span{display:block}html:not([data-view='pc']) .topbar .today-tide{align-self:stretch}}
html[data-view='mobile'] .topbar .brand{align-self:stretch;flex-direction:column;justify-content:center;gap:8px;padding:12px 8px;border:1px solid #7cb5cc;border-radius:16px;background:rgba(255,255,255,.82);text-align:center}html[data-view='mobile'] .topbar .brand>span:last-child{min-width:0;width:100%}html[data-view='mobile'] .topbar .brand .brand-title{font-size:clamp(27px,8vw,38px);font-weight:900;line-height:1.35;letter-spacing:0}html[data-view='mobile'] .topbar .brand .brand-title>span{display:block}html[data-view='mobile'] .topbar .today-tide{align-self:stretch}

/* Enlarge the mobile title to the card width and reduce vertical space. */
@media(max-width:620px){html:not([data-view='pc']) .topbar .brand{gap:4px;padding:6px 4px}html:not([data-view='pc']) .topbar .brand>span:last-child{container-type:inline-size}html:not([data-view='pc']) .topbar .brand .brand-title{font-size:min(25cqi,52px);line-height:1.3}}
html[data-view='mobile'] .topbar .brand{gap:4px;padding:6px 4px}html[data-view='mobile'] .topbar .brand>span:last-child{container-type:inline-size}html[data-view='mobile'] .topbar .brand .brand-title{font-size:min(25cqi,52px);line-height:1.3}

/* Remove the mobile title enclosure while retaining its large lettering. */
@media(max-width:620px){html:not([data-view='pc']) .topbar .brand{border:0;border-radius:0;background:transparent;padding:7px 5px}}
html[data-view='mobile'] .topbar .brand{border:0;border-radius:0;background:transparent;padding:7px 5px}

/* Google Maps opens separately while this app retains its place. */
.google-map-dialog{width:min(480px,94vw);padding:18px}.google-map-dialog .map-dialog-head{top:-18px;gap:10px}.google-map-dialog .map-dialog-head h2{font-size:18px}.google-map-dialog .map-dialog-head button{white-space:nowrap;flex-shrink:0}.google-map-dialog .map-location{padding:12px;border-radius:10px;background:#e6f6fc;font-size:15px;font-weight:700;overflow-wrap:anywhere}.google-map-dialog .google-map-open{display:flex;width:100%;min-height:64px;text-align:center;line-height:1.5;font-size:17px;padding:14px 10px}.google-map-dialog .map-return-note{font-size:14px;line-height:1.85;margin:16px 0 10px}.google-map-dialog .map-return,.google-map-dialog .map-retry{width:100%;min-height:48px}.google-map-dialog .map-status{font-size:14px;line-height:1.8}

.google-map-dialog .map-place-form{margin:14px 0 0;padding-top:14px;border-top:1px solid #d8e5dc}.google-map-dialog .map-place-form label{margin-bottom:8px}.google-map-dialog .map-place-form button{width:100%;min-height:48px;margin:0}

.nearby-current .button-row,.nearby-spot .button-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.nearby-current [data-search="釣り場"]{grid-column:1/-1}.nearby-current .button-row .secondary,.nearby-spot .button-row .secondary{margin:0;min-height:56px;padding:12px 8px;font-size:15px}


/* Coastal photographs on every feature panel; tide tables keep their design. */
.page:not(#tides) :is(.card,.spot,.catch,.empty,.device-help,.upload,.trip,.message,.tool,.camera-card,.return-card){
 --panel-photo:url('./assets/rocky-coast-background.png');
 background-color:#e9f4f5;
 background-image:linear-gradient(110deg,rgba(247,253,253,.78),rgba(243,251,251,.65) 52%,rgba(237,249,252,.58)),var(--panel-photo);
 background-position:center,center 58%;
 background-size:cover;
 background-repeat:no-repeat;
 border-color:#a9c9cf;
 color:#143e44;
}
.page:not(#tides) :is(.card,.spot,.catch,.empty,.device-help,.upload,.trip,.message,.tool,.camera-card,.return-card):nth-of-type(even){
 --panel-photo:url('./assets/ocean-background.png');
 background-position:center,center 68%;
}
.page:not(#tides) :is(.card,.spot,.catch,.empty,.device-help,.upload,.trip,.message,.tool,.camera-card,.return-card) :is(.note,small){color:#365963}
.page:not(#tides) .empty{color:#365963}
.page:not(#tides) :is(input,select,textarea){background:rgba(255,255,255,.96)}
.page:not(#tides) .warning{background:#fff4dd;color:#694f27}
.page:not(#tides) :is(.message.alert,.trip.overdue){border:2px solid #b56337}
#safety .emergency{border:2px solid #bb7561}
.google-map-dialog{
 background-color:#e9f4f5;
 background-image:linear-gradient(110deg,rgba(247,253,253,.82),rgba(243,251,251,.70) 52%,rgba(237,249,252,.62)),url('./assets/rocky-coast-background.png');
 background-position:center,center 58%;
 background-size:cover;
 background-repeat:no-repeat;
}
.google-map-dialog .map-dialog-head{background:rgba(245,252,253,.96)}


/* More visible sea colors across all pages, including the home feature panels. */
body{background:linear-gradient(180deg,rgba(235,248,252,.52),rgba(225,244,250,.28))}
html[data-view='mobile'] body{background:linear-gradient(180deg,rgba(235,248,252,.28),rgba(225,244,250,.12))}
@media(max-width:620px){html:not([data-view='pc']) body{background:linear-gradient(180deg,rgba(235,248,252,.28),rgba(225,244,250,.12))}}
#home .hero{background:linear-gradient(90deg,rgba(4,42,57,.80),rgba(4,50,67,.30)),url('./assets/rocky-coast-background.png') center 55%/cover no-repeat}
.page:not(#tides) :is(.card,.spot,.catch,.empty,.device-help,.upload,.trip,.message,.tool,.camera-card,.return-card){color:#082e3b}
.page:not(#tides) :is(.card,.spot,.catch,.empty,.device-help,.upload,.trip,.message,.tool,.camera-card,.return-card) :is(.note,small){color:#10343f}
.page:not(#tides) .empty{color:#10343f}
.page-heading :is(h1,p,.eyebrow),#home>.section-heading,#home>.datebar{ text-shadow:0 1px 3px rgba(255,255,255,.85)}



/* Larger centered labels for the six home feature cards. */
#home .tool{
 flex-direction:column;
 flex-wrap:nowrap;
 align-items:center;
 justify-content:center;
 position:relative;
 gap:12px;
 min-height:235px;
 padding:24px 18px;
 text-align:center;
}
#home .tool>span:nth-child(2){width:100%;min-width:0}
#home .tool b{font-size:28px;font-weight:900;line-height:1.45;margin:0 0 9px;overflow-wrap:anywhere}
#home .tool small{display:block;font-size:16px;font-weight:700;line-height:1.7;color:#10343f}
#home .tool .tool-icon{width:48px;height:48px;font-size:30px;margin:0}
#home .tool i{position:absolute;top:14px;right:14px;font-size:20px;margin:0}
#home .home-bottom :is(.camera-card,.return-card){
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 text-align:center;
 min-height:230px;
 padding:26px 20px;
}
#home .home-bottom h3{font-size:27px;font-weight:900;line-height:1.5;margin:0 0 12px}
#home .home-bottom p{font-size:16px;font-weight:700;line-height:1.8;margin-bottom:12px}
#home .home-bottom .eyebrow{font-size:13px;font-weight:800;text-align:center}
#home .camera-card .round-arrow{position:static;display:block;font-size:26px}
#home .return-card>span:last-child{font-size:16px;font-weight:800}
@media(max-width:620px){
 html:not([data-view='pc']) #home .tool{min-height:225px;padding:20px 10px}
 html:not([data-view='pc']) #home .tool b{font-size:21px}
 html:not([data-view='pc']) #home .tool small{font-size:14px}
 html:not([data-view='pc']) #home .home-bottom h3{font-size:24px}
 html:not([data-view='pc']) #home .home-bottom p{font-size:15px}
}
html[data-view='mobile'] #home .tool{min-height:225px;padding:20px 10px}
html[data-view='mobile'] #home .tool b{font-size:21px}
html[data-view='mobile'] #home .tool small{font-size:14px}
html[data-view='mobile'] #home .home-bottom h3{font-size:24px}
html[data-view='mobile'] #home .home-bottom p{font-size:15px}
@media(max-width:350px){html:not([data-view='pc']) #home .tool-grid{grid-template-columns:1fr}html:not([data-view='pc']) #home .tool{min-height:205px}}

/* Consistent readable, centered typography throughout the feature pages. */
main .page .page-heading{text-align:center}
main .page .page-heading h1{font-weight:900}
main .page .page-heading p{font-size:17px;font-weight:700}
main .page :is(.card,.spot,.catch,.empty,.device-help,.upload,.trip,.message){
 text-align:center;
 font-size:17px;
 font-weight:600;
 line-height:1.8;
}
main .page :is(.card,.spot,.catch,.trip) :is(h2,h3){font-size:28px;font-weight:900;line-height:1.5;text-align:center}
main .page .card>.section-heading{justify-content:center;flex-wrap:wrap;text-align:center}
main .page :is(.card,.spot,.catch,.message,.trip) p{font-size:17px;font-weight:600;line-height:1.85;text-align:center}
main .page :is(.card,.spot,.catch,.trip,.message) :is(.note,small){font-size:15px!important;font-weight:600;line-height:1.85}
main .page .note{font-size:15px!important;font-weight:600;text-align:center}
main .page :is(.card,.spot,.catch) label{font-size:17px;font-weight:800;text-align:center}
main .page :is(.card,.spot,.catch) :is(input,select,textarea){font-size:18px;font-weight:600;line-height:1.6}
main .page :is(.primary,.secondary,.danger,.button){font-size:18px;font-weight:800;line-height:1.6;min-height:50px;text-align:center;white-space:normal}
main .page .text-button{font-size:16px;font-weight:800;text-align:center}
main .page .upload{font-size:19px;font-weight:800}
main .page .empty{font-size:17px;font-weight:700}
main .page .pill{font-size:13px;font-weight:700}
main .page .tide-events{font-size:17px;font-weight:700;justify-content:center}
main .page .check{justify-content:center}
.google-map-dialog :is(.map-status,.map-return-note){font-size:17px;font-weight:600;text-align:center}
.google-map-dialog :is(h2,.map-dialog-head h2){font-size:25px;font-weight:900;text-align:center}
.google-map-dialog :is(label,.map-location){font-size:17px;font-weight:700;text-align:center}
.google-map-dialog :is(button,.google-map-open){font-size:17px;font-weight:800}
@media(max-width:620px){
 html:not([data-view='pc']) main .page :is(.card,.spot,.catch,.trip) :is(h2,h3){font-size:24px}
 html:not([data-view='pc']) main .page :is(.card,.spot,.catch,.message,.trip) p{font-size:16px}
 html:not([data-view='pc']) main .page :is(.card,.spot,.catch) label{font-size:16px}
 html:not([data-view='pc']) main .page :is(.primary,.secondary,.danger,.button){font-size:17px}
}
html[data-view='mobile'] main .page :is(.card,.spot,.catch,.trip) :is(h2,h3){font-size:24px}
html[data-view='mobile'] main .page :is(.card,.spot,.catch,.message,.trip) p{font-size:16px}
html[data-view='mobile'] main .page :is(.card,.spot,.catch) label{font-size:16px}
html[data-view='mobile'] main .page :is(.primary,.secondary,.danger,.button){font-size:17px}


/* Balance wrapped Japanese labels instead of leaving a short final line. */
#home .tool :is(b,small),#home .home-bottom :is(h3,p),main .page .page-heading :is(h1,p),main .page :is(.card,.spot,.catch,.trip) :is(h2,h3,p){text-wrap:balance}

/* Shared ocean button treatment across every feature page. */
body :is(button,a.primary,a.secondary,a.button,a[role="button"],label.upload){border:4px solid #071d49!important;background:#07536d!important;color:#fff!important;box-shadow:none!important;}
body :is(button,a.primary,a.secondary,a.button,a[role="button"],label.upload) :is(span,b,small,i,svg){color:#fff!important;}
body :is(button,a.primary,a.secondary,a.button,a[role="button"],label.upload):hover:not(:disabled){background:#08647e!important;}
body :is(button,a.primary,a.secondary,a.button,a[role="button"],label.upload):focus-visible{outline:3px solid #53d3ed!important;outline-offset:3px;}
body button[aria-pressed="true"],body button.selected{background:#03374d!important;outline:2px solid #53d3ed;outline-offset:-7px;}
body button:disabled{opacity:.55;}
#home .tool .tool-icon{background:#03374d!important;border:2px solid #071d49;color:#fff!important;}

/* Keep the existing sea photograph inside the navy frames. */
body :is(button,a.primary,a.secondary,a.button,a[role="button"],label.upload),body :is(button,a.primary,a.secondary,a.button,a[role="button"],label.upload):hover:not(:disabled),body button[aria-pressed="true"],body button.selected{background-image:linear-gradient(110deg,rgba(0,10,18,.55),rgba(0,10,18,.45)),url('./assets/ocean-background.png')!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;}

/* Enhance the original photograph itself, preserving its hue. */
body :is(button,a.primary,a.secondary,a.button,a[role="button"],label.upload),body :is(button,a.primary,a.secondary,a.button,a[role="button"],label.upload):hover:not(:disabled),body button[aria-pressed="true"],body button.selected{position:relative;isolation:isolate;background:#05344c!important;background-image:none!important;}
body :is(button,a.primary,a.secondary,a.button,a[role="button"],label.upload)::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url('./assets/ocean-background.png') center/cover no-repeat;filter:contrast(1.35) brightness(.72);pointer-events:none;}

/* Text colors selected for light panels and dark photographic controls. */
body{color:#102b41;}
main .page :is(.page-heading,.section-heading,.datebar),main .page .eyebrow,footer,footer :is(p,small,span,a){color:#102b41;text-shadow:none;}
main .page .page-heading p,main .page :is(.card,.spot,.catch,.empty,.trip,.message,.device-help) :is(p,label,.note,small){color:#173548;}
main .page :is(input,select,textarea){color:#102b41;}
main .page :is(input,textarea)::placeholder{color:#526373;opacity:1;}
main .page a:not(.primary):not(.secondary):not(.button):not([role="button"]){color:#064e79;text-decoration:underline;}
#home .hero :is(p,small,.eyebrow){color:#fff;text-shadow:0 1px 3px #001b2b;}
#home .hero h1{color:#fff;}
#home .hero h1 span{color:#ffe19b;}
.brand-owner{color:#775010!important;}
body :is(button,a.primary,a.secondary,a.button,a[role="button"],label.upload),body :is(button,a.primary,a.secondary,a.button,a[role="button"],label.upload) :is(span,b,small,i,p){color:#fff!important;text-shadow:0 1px 3px rgba(0,15,30,.9);}

/* Crisp, coordinated vector symbols for the feature entrances. */
#home :is(.tool,.camera-card,.return-card) .tool-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;flex:0 0 56px;margin:0 0 16px;border-radius:15px;background:rgba(3,29,49,.86)!important;border:2px solid rgba(255,255,255,.55);}
#home .tool-icon svg{display:block;width:36px;height:36px;}
.bottom-nav button>span svg{display:block;width:24px;height:24px;margin:auto;}
@media(max-width:620px){#home :is(.tool,.camera-card,.return-card) .tool-icon{width:48px;height:48px;flex-basis:48px;margin-bottom:12px;}#home .tool-icon svg{width:30px;height:30px;}}

.language-switch{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:10px 18px;background:#fff;color:#123b43;flex-wrap:wrap}.language-switch select{width:auto;min-height:44px;max-width:100%;font:inherit;padding:8px}html:not([lang="ja"]) .brand-title{font-size:clamp(19px,3vw,36px);line-height:1.25}html:not([lang="ja"]) .today-tide{font-size:12px;overflow-wrap:anywhere}html:not([lang="ja"]) .bottom-nav button{font-size:11px;line-height:1.3}html[lang="hi"]{line-height:1.65}html[lang="hi"] button,html[lang="hi"] input,html[lang="hi"] select{font-family:system-ui,"Nirmala UI","Noto Sans Devanagari",sans-serif}@media(max-width:600px){html:not([lang="ja"]) .brand-owner{font-size:13px}html:not([lang="ja"]) .today-tide button{white-space:normal;min-height:44px}html:not([lang="ja"]) .desktop-nav button{white-space:normal}}
/* Translated labels must wrap inside the same compact header and navigation. */
html:not([lang="ja"]) .topbar .brand .brand-title{font-size:clamp(22px,6vw,32px);line-height:1.35;letter-spacing:0}
html:not([lang="ja"]) .topbar .brand .brand-title>span{white-space:normal;overflow-wrap:normal;word-break:normal}
html:not([lang="ja"]) .topbar .brand-mark{font-size:10px;white-space:nowrap}
html:not([lang="ja"]) .bottom-nav button{white-space:normal;overflow-wrap:anywhere}

#regionSettings{max-width:1064px;margin:12px auto;padding:18px}#regionSettings label{display:inline-grid;min-width:180px;margin:8px 12px 8px 0}#regionalFishSearch{margin:14px 0}html.foreign-region #tides>.card:not(.international-tides):not(#regionSettings),html.foreign-region footer>p:first-child{display:none!important}#regionSettings[open] summary{margin-bottom:12px}
html .topbar .today-tide{min-width:0;overflow-wrap:anywhere}html .topbar .today-tide>*{min-width:0;max-width:100%}html .topbar .today-tide .button{white-space:normal;line-height:1.4;font-size:12px;padding:8px 4px}
.jpeg-save-preview{width:min(94vw,760px);max-height:92vh;overflow:auto;border:3px solid #071d49;border-radius:18px;padding:18px;color:#102b41;background:#fff}.jpeg-save-preview::backdrop{background:#073b43c0}.jpeg-save-preview img{display:block;max-width:100%;max-height:55vh;object-fit:contain;margin:12px auto}.jpeg-save-preview button{margin:6px}.jpeg-save-preview p{line-height:1.7}

#home .tool[data-go="gyotaku"] .gyotaku-photo-icon{width:132px;height:88px;flex-basis:88px;overflow:hidden;background:#f6efdf!important;}
#home .gyotaku-photo-icon img{display:block;width:100%;height:100%;object-fit:contain;}