/* Auxiliary controls only: no game or learning-image geometry changes. */
.library-ocean-screen .library-view-row{display:flex!important;align-items:center;gap:8px;flex-wrap:nowrap}
.library-ocean-screen .library-view-switch{width:auto!important;flex:0 1 auto;padding:2px;border-radius:16px}
.library-ocean-screen .library-view-switch>button{min-height:44px;padding:5px 12px;font-size:12px}
.library-ocean-screen .library-view-row>.vocabulary-entry{margin-left:auto;min-width:44px;min-height:44px;grid-column:auto;grid-row:auto}
.library-ocean-screen .library-course-selectors{margin-top:4px;gap:6px;flex-wrap:wrap}
.library-ocean-screen .library-unit-tabs{max-width:none;flex:1 1 200px}
.library-ocean-screen .library-unit-tabs button,.library-ocean-screen #libraryBook{min-height:44px}
.library-ocean-screen .library-map-heading{padding:4px 0;gap:6px}
.library-ocean-screen .library-map-heading h1{font-size:12px;font-weight:500}
.library-ocean-screen .library-map-heading label{display:flex;align-items:center;gap:4px}
.library-ocean-screen .library-map-heading select{min-height:44px}
.library-practice-bar,.play-practice-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0;flex-shrink:0}
.library-practice-bar .practice-quantity-inline,.play-practice-bar .practice-quantity-inline{font-size:12px}
.library-practice-bar button{min-height:44px;padding:6px 10px;font-size:12px}
.practice-selected-count{font-size:12px;color:#386a86}
.play-recommendation{position:relative;flex-wrap:wrap}
.play-practice-bar{padding:0;margin-left:auto}
.library-ocean-screen .gallery-instruction{margin:0;padding:2px 0;font-size:11px}
@media(max-width:600px){.library-practice-bar{gap:4px}.library-practice-bar .practice-selected-count{display:none}.library-practice-bar button{padding-inline:7px}.library-ocean-screen .library-course-selectors{gap:4px}.library-ocean-screen .library-unit-tabs{flex-basis:180px}.library-ocean-screen .library-unit-row{width:100%}.library-ocean-screen .library-view-switch>button{padding-inline:8px}}

.library-control-top{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;flex-shrink:0}.library-control-top .library-view-row{flex:0 0 auto}.library-control-top .library-course-selectors{flex:1 1 430px;margin:0}.library-control-top .library-view-row>.vocabulary-entry{margin-left:6px}.library-inline-summary{font-size:11px;color:#386a86;margin-left:auto}.library-practice-bar>label{display:flex;align-items:center;gap:4px;font-size:11px}.library-practice-bar>label select{min-height:44px;max-width:120px;border:1px solid #cde8f3;border-radius:10px;font:inherit;background:#fff}.library-practice-bar .practice-selected-count{display:none}@media(max-width:600px){.library-control-top{gap:3px}.library-control-top .library-view-row{flex:1 1 100%}.library-control-top .library-view-row>.vocabulary-entry{margin-left:auto}.library-inline-summary{order:5;margin-left:0}.library-practice-bar>label:not(.practice-quantity-inline){order:6;margin-left:auto}.library-control-top .library-course-selectors{flex-basis:100%}}

/* Restore the original switch sizing; the earlier 234→100px change concerned height. */
.library-control-top .library-view-row{flex:1 1 100%;align-items:stretch}
.library-ocean-screen .library-view-switch{flex:1;min-width:0;width:auto!important;padding:4px;gap:0;border-radius:30px}
.library-ocean-screen .library-view-switch>button{flex:1;min-height:44px;padding:7px 12px;font-size:13px;font-weight:650}
.practice-quantity-controls{display:flex;align-items:center;flex-wrap:wrap;gap:4px;max-width:100%}
.practice-custom{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0}
.practice-custom[hidden]{display:none}
.practice-custom label{display:flex;align-items:center;gap:4px;font-size:12px}
.practice-custom input{width:72px;min-height:44px;box-sizing:border-box;border:1px solid #cde8f3;border-radius:10px;padding:4px;font:inherit}
.practice-custom button{min-height:44px;padding:4px 10px;font-size:12px}
.practice-custom small{font-size:11px;flex-basis:100%;color:#386a86}
.library-practice-bar>.practice-quantity-controls{flex:0 1 auto}
[data-page="library"] .ocean::after{content:'按所选词量分组'}

/* Home owns book selection; unit and quantity share a compact row. */
.home-book-selector{display:flex;align-items:center;gap:8px;min-width:0;flex:1;font-size:12px;color:#386a86}
.home-book-selector select{min-width:0;max-width:100%;width:auto;flex:1;min-height:44px;padding:6px 8px;border:1px solid #cde8f3;border-radius:12px;background:#f5fcff;color:#205777;font:inherit}
.home-book-selector>span{flex-shrink:0}
.library-session-selectors{display:flex;align-items:flex-start;gap:8px;flex-wrap:nowrap;max-width:100%;min-width:0}
.library-unit-select{display:flex;align-items:center;gap:5px;min-width:0;font-size:12px;color:#386a86;flex:0 1 auto;white-space:nowrap}
.library-unit-select select{min-height:44px;width:110px;max-width:100%;min-width:0;padding:4px 6px;border:1px solid #cde8f3;border-radius:10px;background:#f5fcff;color:#205777;font:inherit}
.library-session-selectors>.practice-quantity-controls{min-width:0;flex:1;align-items:flex-start}
.library-session-selectors .practice-quantity-inline{white-space:nowrap;display:flex;align-items:center;gap:4px}
.library-session-selectors [data-practice-count]{max-width:115px;min-width:0;min-height:44px}
@media(max-width:400px){.library-session-selectors{width:100%;gap:6px}.library-unit-select select{width:96px}.library-session-selectors [data-practice-count]{max-width:110px}.home-card-heading{flex-wrap:wrap}.home-book-selector{flex-basis:100%}}

/* Home book/unit selection, minimal island numerals and one resume marker. */
.home-card-heading{flex-wrap:wrap}
.home-book-selector{flex-basis:100%}
.home-unit-selector{display:flex;align-items:center;gap:8px;font-size:12px;color:#386a86;margin-right:auto;min-width:0}
.home-unit-selector select{min-height:44px;max-width:180px;padding:6px 8px;border:1px solid #cde8f3;border-radius:12px;background:#f5fcff;color:#205777;font:inherit}
body[data-page="library"]:has(.unit-ocean-map) .nav{display:none}
.unit-island-number{position:absolute;left:57%;top:61%;transform:translate(-50%,-50%);font-size:clamp(22px,4vw,30px);font-weight:750;color:#684a2b;text-shadow:0 1px 1px #fff8d9;line-height:1;pointer-events:none}
.unit-progress-starfish{position:absolute;width:30px;height:30px;left:38%;top:61%;transform:translate(-50%,-50%) rotate(-12deg);pointer-events:none}
.unit-progress-starfish svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 1px #73502a55)}
.unit-island.selected{box-shadow:none;background:transparent}
.unit-island:focus-visible{outline:2px solid #1e8be8;outline-offset:-4px}
body[data-page="library"]:has(.unit-ocean-map) .shell{padding-bottom:env(safe-area-inset-bottom)}

.unit-island[data-island="5"] .unit-island-number{left:62%;top:78%}
.unit-island[data-island="5"] .unit-progress-starfish{left:43%;top:78%}

/* Map has two compact control rows; islands are the only learning entry. */
.library-ocean-screen:has(.unit-ocean-map) .library-practice-bar{flex-wrap:nowrap;align-items:flex-start;gap:6px}
.library-ocean-screen:has(.unit-ocean-map) .library-map-back{width:44px;min-width:44px;min-height:44px;padding:4px;flex:0 0 44px}
.library-ocean-screen:has(.unit-ocean-map) .library-session-selectors{flex:1;min-width:0;width:auto;gap:6px}
@media(max-width:400px){.library-ocean-screen:has(.unit-ocean-map) .library-unit-select>span:not(.unit-select-shell){display:none}.library-ocean-screen:has(.unit-ocean-map) .library-unit-select select{width:96px}.library-ocean-screen:has(.unit-ocean-map) [data-practice-count]{max-width:104px}.library-ocean-screen:has(.unit-ocean-map) .practice-quantity-inline{gap:3px}}

@media(max-width:400px){.library-ocean-screen:has(.unit-ocean-map) .library-unit-select select{width:120px}.library-ocean-screen:has(.unit-ocean-map) [data-practice-count]{max-width:76px}}

/* Native select interaction, with a two-column selected label and no extra row. */
.unit-select-shell{position:relative;display:inline-block;width:120px;min-width:0;height:44px;flex-shrink:1}
.home-unit-selector .unit-select-shell{width:170px}
.unit-select-shell>select{position:absolute;inset:0;width:100%!important;height:100%;margin:0;opacity:0;z-index:2;cursor:pointer}
.unit-select-display{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:10px;padding:0 7px;border:1px solid #cde8f3;border-radius:10px;background:#f5fcff;color:#205777;pointer-events:none;text-align:left;white-space:nowrap}
.unit-select-display>span{overflow:hidden;text-overflow:ellipsis;font-size:12px}
.unit-select-display>small{font-size:11px;color:#5d7b8b;font-weight:400}
.unit-select-display>b{font-size:12px;font-weight:400}
.unit-select-shell:focus-within .unit-select-display{outline:2px solid #80c7f4;outline-offset:2px}

/* Hide scroll chrome only; native wheel/touch/keyboard scrolling stays available. */
.library-ocean-screen .unit-map-scroll,.library-ocean-screen .library-workspace.gallery-mode{scrollbar-width:none;-ms-overflow-style:none}
.library-ocean-screen .unit-map-scroll::-webkit-scrollbar,.library-ocean-screen .library-workspace.gallery-mode::-webkit-scrollbar{display:none;width:0;height:0}
body:has(.library-ocean-screen .unit-ocean-map) .nav{display:none!important}
body:has(.library-ocean-screen .unit-ocean-map) .shell{padding-bottom:env(safe-area-inset-bottom)}

/* Home selectors reuse the former continue footer, in one row at every width. */
.home-current .home-selection-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,.65fr);align-items:start;gap:4px;margin-top:8px;padding-top:8px;font-size:12px}
.home-selection-row .home-book-selector,.home-selection-row .home-unit-selector{display:block;min-width:0;max-width:100%;margin:0;flex-basis:auto}
.home-selection-row .home-book-selector>span,.home-selection-row .home-unit-selector>span:not(.unit-select-shell){display:none}
.home-selection-row .home-book-selector select{display:block;width:100%;min-width:0;height:44px;font-size:13px;padding:4px}
.home-selection-row .unit-select-shell{display:block;width:100%;max-width:100%}
.home-selection-row .practice-quantity-controls{position:relative;display:block;min-width:0;width:100%;max-width:100%}
.home-selection-row .practice-quantity-inline{display:block;font-size:0}
.home-selection-row .practice-quantity-inline select{width:100%;min-width:0;max-width:100%;height:44px;font-size:13px;padding:4px}
.home-selection-row .practice-custom{position:absolute;bottom:calc(100% + 8px);right:0;width:240px;max-width:calc(100vw - 40px);padding:8px;border:1px solid #cde8f3;border-radius:10px;background:#fff;box-shadow:0 3px 12px #27688525;z-index:5}
.home-selection-row .practice-custom[hidden]{display:none}
.home-current.home-unselected .home-selection-row{margin:0;padding:0;border:0}
@media(max-width:400px){.home-ocean .home-current{padding:12px}.home-selection-row .unit-select-display{column-gap:8px;padding-inline:5px}.home-selection-row .unit-select-display>span{font-size:12px}}

.library-ocean-screen:has(.unit-ocean-map) .library-practice-bar{gap:4px}
.library-ocean-screen:has(.unit-ocean-map) .library-session-selectors{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,.6fr);gap:4px;align-items:start}
.library-book-select{display:block;margin:0;min-width:0}
.library-book-select select{display:block;width:100%;min-width:0;height:44px;font-size:13px;padding:4px;border:1px solid #cde8f3;border-radius:10px;background:#f5fcff;color:#205777}
.library-ocean-screen:has(.unit-ocean-map) .library-unit-select{display:block;min-width:0}
.library-ocean-screen:has(.unit-ocean-map) .library-unit-select>span:not(.unit-select-shell){display:none}
.library-ocean-screen:has(.unit-ocean-map) .unit-select-shell{width:100%}
.library-ocean-screen:has(.unit-ocean-map) .unit-select-display{column-gap:8px;padding-inline:5px}
.library-ocean-screen:has(.unit-ocean-map) .practice-quantity-controls{position:relative;display:block;width:100%;min-width:0}
.library-ocean-screen:has(.unit-ocean-map) .practice-quantity-inline{display:block;font-size:0}
.library-ocean-screen:has(.unit-ocean-map) [data-practice-count]{display:block;width:100%;max-width:100%;min-width:0;height:44px;padding:4px;font-size:13px}
.library-ocean-screen:has(.unit-ocean-map) .practice-custom{position:absolute;right:0;top:calc(100% + 6px);width:230px;max-width:calc(100vw - 40px);padding:8px;border:1px solid #cde8f3;border-radius:10px;background:#fff;z-index:5;box-shadow:0 3px 12px #27688525}
.library-ocean-screen:has(.unit-ocean-map) .practice-custom[hidden]{display:none}

/* Overview keeps its two existing rows; book/unit/quantity share the second. */
.library-ocean-screen:has(.gallery-mode) .library-practice-bar{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:4px}
.library-ocean-screen:has(.gallery-mode) .library-session-selectors{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(46px,.65fr);flex:1;min-width:0;gap:4px;width:auto}
.library-ocean-screen:has(.gallery-mode) .library-unit-select{display:block;min-width:0}
.library-ocean-screen:has(.gallery-mode) .library-unit-select>span:not(.unit-select-shell){display:none}
.library-ocean-screen:has(.gallery-mode) .unit-select-shell{width:100%}
.library-ocean-screen:has(.gallery-mode) .unit-select-display{padding-inline:5px;column-gap:6px}
.library-ocean-screen:has(.gallery-mode) .practice-quantity-controls{position:relative;display:block;min-width:0;width:100%}
.library-ocean-screen:has(.gallery-mode) .practice-quantity-inline{display:block;font-size:0}
.library-ocean-screen:has(.gallery-mode) [data-practice-count]{display:block;width:100%;max-width:100%;min-width:0;height:44px;padding:4px;font-size:12px}
.library-ocean-screen:has(.gallery-mode) .practice-custom{position:absolute;right:0;top:calc(100% + 6px);width:230px;max-width:calc(100vw - 40px);padding:8px;background:#fff;border:1px solid #cde8f3;border-radius:10px;z-index:5}
.library-ocean-screen:has(.gallery-mode) .practice-custom[hidden]{display:none}
@media(max-width:760px){
 .library-ocean-screen:has(.gallery-mode) .gallery-inline-controls{gap:4px;flex:0 0 92px}
 .library-ocean-screen:has(.gallery-mode) .gallery-inline-controls .playback-settings-trigger{width:44px;min-width:44px;padding:4px}
 .library-ocean-screen:has(.gallery-mode) .gallery-inline-controls .playback-settings-trigger>span{display:none}
 .library-ocean-screen:has(.gallery-mode) .library-book-select select{font-size:12px;padding-inline:3px}
}
@media(max-width:420px){
 .library-ocean-screen:has(.gallery-mode) .library-session-selectors{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 46px}
 .library-ocean-screen:has(.gallery-mode) [data-gallery-unit-label]{font-size:0}
 .library-ocean-screen:has(.gallery-mode) [data-gallery-unit-label]::before{content:attr(data-short-label);font-size:12px}
 .library-ocean-screen:has(.gallery-mode) .unit-select-display{column-gap:4px;padding-inline:4px}
 .library-ocean-screen:has(.gallery-mode) .unit-select-display>b{font-size:10px}
 .library-ocean-screen:has(.gallery-mode) [data-practice-count]{appearance:none;padding:4px 12px 4px 3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='m1 1 3 3 3-3' fill='none' stroke='%23205777'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 3px center}
}
