/* Sentence Structure's first thirty lessons: an unhurried coastal walk. */
.sentence-map-actions { display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0 14px; }
.sentence-map-actions p { margin:0 0 5px;color:#8bd4d8;font-size:10px;font-weight:800;letter-spacing:.19em; }
.sentence-map-actions h2 { margin:0;color:#f6f2df;font-size:21px; }
.sentence-map-action-buttons { display:flex;flex-wrap:wrap;gap:8px; }
.sentence-map-action-buttons .small-button { border-radius:12px;padding:11px 15px;min-height:44px; }
.sentence-map-action-buttons .expression-map-toggle { background:#e9e3c9;color:#224f59;border-color:#e9e3c9; }
.sentence-remaining-lessons { margin:30px 0; }
.sentence-remaining-lessons [data-remaining-count] { color:#b5c9db;font-size:13px; }
[data-sentence-map] { margin-bottom:20px; }
[data-theme="sentence-shore"] { --forest:#224e56;--cream:#fff9e8;border-color:#a6c4c0; }
[data-theme="sentence-shore"] .expression-map-header { background:linear-gradient(115deg,#fff9e8,#edf4ec); }
[data-theme="sentence-shore"] .expression-map-heading p { color:#66888b; }
[data-theme="sentence-shore"] .expression-map-tools { background:#faf8ec; }
[data-theme="sentence-shore"] .expression-map-character[aria-pressed=true] { background:#e3efdf;border-color:#52797c;box-shadow:inset 0 0 0 1px #52797c; }
[data-theme="sentence-shore"] .expression-map-viewport { background:#9fb75d;scrollbar-color:#6b9998 #dddabe; }
.shore-scenery,.shore-background,.shore-route,.shore-water { position:absolute;inset:0;width:100%;height:100%;pointer-events:none; }
.shore-scenery { overflow:hidden; }
.shore-background { object-fit:fill; }
.shore-extension { position:absolute;left:-800px;top:0;width:3200px;height:1950px;max-width:none;pointer-events:none; }
.shore-background { mask-image:linear-gradient(to right,transparent,#000 95px,#000 calc(100% - 95px),transparent); }
.shore-art { display:block;width:100%;height:100%;overflow:hidden;pointer-events:none; }
.shore-cloud { position:absolute;opacity:.85;animation:shore-cloud-drift var(--duration) linear var(--delay) infinite var(--direction); }
.shore-boat { position:absolute;animation:shore-sail 68s linear -16s infinite alternate; }
.shore-boat .shore-art { transform-origin:50% 89%;animation:shore-boat-rock 9s ease-in-out -2s infinite alternate; }
.shore-wake { position:absolute;left:9%;bottom:0;width:89%;height:7%;border-bottom:2px solid #e4fbff80;border-radius:50%;animation:shore-wake 5s ease-in-out infinite alternate; }
.shore-ocean-surface { opacity:.34;animation:shore-ocean 10s ease-in-out -3s infinite alternate; }
.shore-stream-surface { opacity:.36;animation:shore-stream 13s ease-in-out -5s infinite alternate; }
.shore-wave { fill:none;stroke:#efffff;stroke-width:1.4;stroke-linecap:round;opacity:0;animation:shore-wave var(--duration) ease-in-out var(--delay) infinite; }
.shore-current { fill:none;stroke:#ecfcf6;stroke-width:1.5;stroke-dasharray:24 95 8 126;opacity:.23;animation:shore-current 24s linear var(--delay) infinite; }
.shore-foam { fill:none;stroke:#f7ffff;stroke-width:3.5;stroke-dasharray:17 6 8 5;stroke-linecap:round;opacity:0;animation:shore-foam var(--duration) ease-in-out var(--delay) infinite; }
.shore-bridge { position:absolute;left:44px;top:820px;width:112px;height:236px; }
.shore-plant { position:absolute;transform:translate(-50%,-100%);pointer-events:none; }
.shore-foliage { display:block;width:100%;height:100%;transform-origin:50% 100%;animation:shore-breeze var(--duration) ease-in-out var(--delay) infinite var(--direction); }
.shore-milestone { position:absolute;width:66px;height:94px;transform:translate(-50%,-65%); }
.shore-perched-gull { position:absolute;left:1425px;top:955px;width:180px;height:170px; }
.shore-crab { position:absolute;left:1222px;top:1188px;width:90px;height:55px; }
.shore-flying-gull { position:absolute;left:0;top:0;width:160px;height:130px; }
[data-theme="sentence-shore"] .expression-map-stone::before { display:none; }
.shore-stone-art { position:absolute;left:17px;top:-17px;width:146px;height:100px;pointer-events:none;overflow:hidden;filter:drop-shadow(0 5px 3px #3c645143); }
[data-theme="sentence-shore"] .expression-map-stone[aria-pressed=true] .shore-stone-art { filter:drop-shadow(0 0 3px #fffbe5) drop-shadow(0 0 5px #fff9d7); }
[data-theme="sentence-shore"] .expression-map-stone:hover .shore-stone-art { filter:brightness(1.07) drop-shadow(0 5px 3px #3c645143); }
[data-theme="sentence-shore"] .expression-map-stone[data-arrived=true] .shore-stone-art { animation:expression-stone-land 380ms ease-out; }
[data-theme="sentence-shore"] .expression-map-stone-number { top:3px;color:#285867;font-size:29px; }
[data-theme="sentence-shore"] .expression-map-stone-status { top:46px;right:10px;color:#285867;background:#fff9e4;border:1px solid #c5ccb2; }
[data-theme="sentence-shore"] .expression-map-stone[data-complete=true] .expression-map-stone-status { background:#477b66;color:white;border-color:#d9ebc1; }
[data-theme="sentence-shore"] .expression-map-stone-caption { top:86px;background:linear-gradient(130deg,#fffbeaef,#f7eacfef);border-color:#d9ccac;color:#234f5a;font-size:18px;box-shadow:0 3px 7px #385d4d1c; }
[data-theme="sentence-shore"] .expression-map-lesson-card { border-color:#a7c4bd;background:linear-gradient(125deg,#fffbed,#f1f3e9); }
[data-theme="sentence-shore"] .expression-map-lesson-card::before { background:#fffbed;border-color:#a7c4bd; }
[data-theme="sentence-shore"] .expression-map-selected h3 { font-size:16px; }
[data-theme="sentence-shore"] .expression-map-open { background:#2b616b;border-color:#254d58;box-shadow:0 4px 0 #234852; }
[data-theme="sentence-shore"] .expression-map-selected-number { background:#2b616b; }
[data-theme="sentence-shore"] .expression-map-flag-cloth { animation:none; }
.shore-pennant { transform-origin:9px 28px;animation:shore-pennant 5s ease-in-out infinite alternate; }
@keyframes shore-cloud-drift { from { transform:translate(-65px,0); } to { transform:translate(65px,4px); } }
@keyframes shore-sail { from { transform:translate(-85px,0); } to { transform:translate(85px,3px); } }
@keyframes shore-boat-rock { from { transform:rotate(-.9deg); } to { transform:rotate(.9deg) translateY(1.5px); } }
@keyframes shore-wake { from { opacity:.3;transform:scaleX(.88); } to { opacity:.7;transform:scaleX(1.07); } }
@keyframes shore-ocean { from { transform:translate(-3px,-1px); } to { transform:translate(3px,1.8px); } }
@keyframes shore-stream { from { transform:translate(-4px,-.5px); } to { transform:translate(4px,1.4px); } }
@keyframes shore-wave { 0% { opacity:0;transform:translate(0,-2px); } 45% { opacity:.24; } 100% { opacity:0;transform:translate(var(--drift),4px); } }
@keyframes shore-current { from { stroke-dashoffset:0; } to { stroke-dashoffset:-253; } }
@keyframes shore-foam { 0%,100% { opacity:0;transform:translate(0,-1px) scaleX(.996); } 38% { opacity:.5; } 70% { opacity:.24;transform:translate(1.5px,2px) scaleX(1.002); } }
@keyframes shore-breeze { 0%,100% { transform:rotate(var(--a)); } 34% { transform:rotate(var(--b)); } 71% { transform:rotate(calc(var(--a) * .27)); } }
@keyframes shore-pennant { from { transform:skewY(-1.6deg) scaleX(.98); } to { transform:skewY(1.6deg); } }
@media(max-width:650px) {
  .sentence-map-actions { align-items:flex-start;flex-direction:column;gap:12px; }
  .sentence-map-actions h2 { font-size:19px; }
  .sentence-map-action-buttons { width:100%; }
  .sentence-map-action-buttons .small-button { flex:1; }
}
