:root{font-family:system-ui,-apple-system,sans-serif;color:#293b36;background:#f5f3ec}*{box-sizing:border-box}body{margin:0 auto;max-width:780px;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,select,input{font:inherit}button{cursor:pointer;border:0;color:inherit;background:#e9ece4;border-radius:12px;padding:10px 13px;touch-action:manipulation}button:focus-visible{outline:3px solid #257665;outline-offset:2px}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;flex-shrink:0}header small{display:none}h1{font-size:21px;margin:3px 0;font-weight:800;letter-spacing:-1px}h1 span{font-size:10px;color:#e99d62;margin-left:7px}header button{font-size:12px;background:transparent;border:1px solid #d7ded3}main{padding:0 12px;flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.conversation{display:contents}.message{order:0;background:#fff;border:1px solid #e1e5db;border-radius:15px;padding:10px 12px;flex-shrink:0}.message-head{display:flex;justify-content:space-between;align-items:center}.label{font-size:12px;font-weight:700;color:#53685c}.label span{font-weight:400;color:#899489;margin-left:7px;font-size:11px}.message-head #clear{font-size:12px;padding:6px 11px;background:#edf0e7}.sentence-row{display:flex;align-items:stretch;gap:8px}#sentence{flex:1;min-width:0;min-height:80px;max-height:92px;display:flex;align-items:center;gap:8px;overflow-x:auto;padding:6px 0}.placeholder{color:#909e89;font-size:14px}.sentence-item{position:relative;flex-shrink:0;min-width:70px;padding:14px 20px 7px 9px;border-radius:12px;background:#e8f0e5;text-align:center;font-size:15px}.symbol{display:flex;justify-content:center;align-items:center;font-size:30px;height:34px;line-height:1.1}.symbol img{height:100%;max-width:65px;object-fit:contain;pointer-events:none}.sentence-item .symbol{height:29px;font-size:26px}.remove-word{position:absolute;right:0;top:0;padding:0;width:28px;height:28px;line-height:28px;font-size:22px;color:#596c58;background:#d9e3d2;border-radius:0 10px 0 9px}.sentence-row #speak{flex:0 0 56px;background:#466950;color:white;font-size:27px;border-radius:13px;margin:7px 0}.vocabulary{order:1;flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}#categories{display:flex;gap:6px;overflow-x:auto;flex-shrink:0;min-height:46px;padding:2px 0 5px;scrollbar-width:none;touch-action:pan-x}.category{flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-size:13px;border:1px solid #dce2d3;background:#eeeee4;white-space:nowrap}.category.active{background:#dce9d2;border-color:#88a573}.board-heading{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-shrink:0;margin:4px 0 8px}.board-title{display:flex;align-items:center;gap:9px;min-width:0}h2{font-size:16px;margin:0 0 3px}.board-title #backall{padding:5px 12px;font-size:27px;line-height:1.1;background:#dde9d4;border:1px solid #b9cfad}.board-title small{display:block;font-size:10px;color:#788773;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-heading>div:last-child{flex-shrink:0}.board-heading button{padding:7px 10px;background:#e9eade}.board-heading #page{font-size:11px;padding:0 7px;color:#77867b}#board{display:flex;flex:1;min-height:0;min-width:0;overflow-x:auto;gap:14px;scrollbar-width:none;touch-action:pan-x pan-y;scroll-snap-type:none}#board::-webkit-scrollbar{display:none}.panel{flex:0 0 100%;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));grid-template-rows:repeat(var(--rows,4),minmax(0,1fr));gap:8px;min-width:0;height:100%}.tile{background:#fff;border:1px solid #e1e3d9;border-radius:14px;min-width:0;min-height:0;padding:5px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;user-select:none;-webkit-user-select:none}.tile:active{background:#dce9d6;border-color:#84aa74}.tile[data-tone="0"]{background:#f0f3e5}.tile[data-tone="1"]{background:#f4eee6}.tile[data-tone="2"]{background:#eaf1f2}.word{font-size:14px;font-weight:650;word-break:keep-all}#dots{display:flex;gap:5px;justify-content:center;padding:7px 0 0;flex-wrap:wrap;flex-shrink:0}#dots button{padding:0;width:7px;height:7px;border-radius:10px;background:#d3d8cc}#dots button.active{width:22px;background:#637d5e}.empty-related{grid-column:1/-1;grid-row:1/-1;align-self:start;font-size:14px;color:#6c7f63;background:#eaf0e3;padding:18px;line-height:1.7;border-radius:14px}.answers{order:2;flex-shrink:0;min-width:0;border-top:1px solid #d7ddcf;padding-top:6px}.answers .label{margin-bottom:4px}#answers{display:grid;grid-template-columns:1fr 1fr;gap:8px}#answers .tile{min-height:46px;height:46px;flex-direction:row;padding:4px 8px;gap:8px}#answers .word{font-size:21px}#answers .symbol{font-size:25px;height:28px}#answers [data-polarity=positive]{background:#e1efdc}#answers [data-polarity=negative]{background:#f5e1dc}#answers [data-polarity=request]{background:#eee8ce}#answerstrip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:27.272727%;margin-top:6px;touch-action:pan-x;overscroll-behavior-x:contain;gap:0}#answerstrip::-webkit-scrollbar{display:none}.answer-pair{display:flex;flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:normal;padding:2px 0;border-radius:11px;outline:2px solid transparent;outline-offset:-2px}.answer-pair.chosen{background:#d7e5cc;outline-color:#527649}.answer-option{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#ffffffb8;border:1px solid #dce2d4;margin:2px;border-radius:9px;padding:4px 1px;font-size:11px;white-space:nowrap}.chosen .answer-option{background:#e0edda;border-color:#87a47a}.answer-option .symbol{font-size:20px;height:23px}.answer-option .word{font-size:11px}.answer-option img{max-width:30px}#speechstatus{font-size:10px;color:#64745d}#speechstatus:empty{display:none}footer{order:3;display:flex;justify-content:space-between;flex-shrink:0;color:#8d978b;font-size:9px;padding:0 0 max(6px,env(safe-area-inset-bottom))}dialog{border:1px solid #d8dfd0;border-radius:20px;max-width:550px;width:94%;max-height:90vh;max-height:90dvh;overflow:auto;padding:24px}dialog::backdrop{background:#23372d66}dialog h2{font-size:19px}dialog p{font-size:13px;color:#70806e;line-height:1.6}dialog label{display:block;font-size:13px;margin:15px 0}dialog input,dialog select{display:block;width:100%;padding:10px;border:1px solid #ccd5c5;border-radius:8px;margin-top:6px;background:white}dialog input[type=checkbox]{display:inline;width:auto;margin-right:8px}dialog button{margin:4px 5px 4px 0}dialog .note{background:#f0f3e9;padding:10px;border-radius:8px}details{margin:18px 0;border-block:1px solid #dde4d5;padding:14px 0}summary{cursor:pointer;font-weight:700;font-size:14px}#csvstatus{font-size:13px;line-height:1.6;color:#48664d;padding:8px 0}#csvpreview{max-height:230px;overflow:auto}#csvpreview table{border-collapse:collapse;font-size:12px;width:100%}#csvpreview td{padding:7px;border:1px solid #d9dfd1;word-break:break-word}#csvpreview tr:first-child{font-weight:700;background:#edf2e8}
@media(max-height:700px) and (orientation:portrait){header{padding:6px 14px}main{gap:6px}#sentence{min-height:65px;max-height:72px}.sentence-item{padding-top:10px}.sentence-item .symbol{font-size:23px;height:25px}#categories{min-height:39px}.category{padding:5px 10px}:is(#board,#relatedboard) .symbol{font-size:25px;height:28px}#answers .tile{height:42px;min-height:42px}}
@media(orientation:landscape) and (min-width:600px){body{max-width:1280px}header{padding:5px 14px}header h1{font-size:18px}header button{padding:6px 10px}main{display:grid;grid-template-columns:minmax(230px,37%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:8px 14px}.conversation{display:flex;flex-direction:column;min-height:0;min-width:0;gap:8px;grid-column:1;grid-row:1}.message{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 10px}.sentence-row{flex:1;min-height:0;align-items:center}#sentence{min-height:0;max-height:none;height:100%;align-items:center}.sentence-row #speak{min-height:54px;flex-basis:46px;align-self:stretch}.answers{margin-top:auto}.vocabulary{grid-column:2;grid-row:1;min-height:0}#categories{min-height:40px}.category{padding:6px 10px;font-size:12px}.board-heading{margin:3px 0 6px}.board-title small{max-width:190px}.board-heading h2{font-size:14px}:is(#board,#relatedboard) .symbol{font-size:27px;height:30px}#board .word{font-size:13px}.panel{gap:7px}footer{grid-column:1/-1;grid-row:2;padding-bottom:max(3px,env(safe-area-inset-bottom))}#answers .tile{height:44px;min-height:44px}#answers .word{font-size:20px}.answer-option{padding:3px 1px}}
@media(orientation:landscape) and (max-height:380px){header{padding:2px 12px}main{gap:5px 10px}.message-head .label{font-size:10px}.message-head #clear{padding:4px 8px}.answers .label{font-size:10px}#answers .tile{height:38px;min-height:38px}#categories{min-height:33px}.category{padding:4px 8px}.board-title small{display:none}:is(#board,#relatedboard) .symbol{font-size:23px;height:25px}#board .word{font-size:12px}.sentence-item{padding-top:10px}.sentence-item .symbol{height:24px;font-size:23px}.answer-option .symbol{font-size:18px;height:20px}#dots{padding-top:4px}}

@media(orientation:landscape) and (min-width:600px){.conversation{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:8px}.conversation .message,.conversation .answers{min-height:0;height:auto;margin:0;overflow:hidden}.conversation .answers{display:flex;flex-direction:column}.conversation .answers .label{flex-shrink:0}.conversation #answers{flex:1;min-height:0}.conversation #answers .tile{height:100%;min-height:0}.conversation #answerstrip{flex-shrink:0}.conversation #speechstatus{flex-shrink:0}.conversation #sentence{min-height:0;overflow-y:auto}.conversation .sentence-item{max-height:100%}}
/* Picture-first word cards and larger category targets. */
:is(#board,#relatedboard) .tile{container-type:size;position:relative;display:block;padding:0;overflow:hidden}:is(#board,#relatedboard) .tile>.symbol{position:absolute;inset:4px 4px 23px;height:auto;font-size:min(70cqw,calc(100cqh - 28px));line-height:1;max-width:none;display:flex;align-items:center;justify-content:center}:is(#board,#relatedboard) .tile>.symbol img{width:100%;height:100%;max-width:none;object-fit:contain}:is(#board,#relatedboard) .tile>.word{position:absolute;bottom:3px;left:3px;right:3px;min-height:17px;font-size:12px;line-height:1.2;text-align:center;overflow-wrap:anywhere}#categories{height:92px;min-height:92px;padding-top:2px;padding-bottom:6px}.category{font-size:16px;padding-inline:15px;min-width:85px}.category>span:first-child{font-size:28px}.sentence-item{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-width:76px;min-height:68px;padding:6px 10px;background:#e8f0e5}.sentence-item .symbol{height:38px;font-size:35px}.sentence-item:active{background:#d7e6cf}.message-head #clear{min-height:42px;min-width:100px;padding:8px 10px;background:#eee7da;font-size:14px;border:1px solid #d7cdbb}.message-head{gap:10px}
@media(orientation:landscape) and (min-width:600px){#categories{height:80px;min-height:80px}.category{font-size:15px;min-width:85px}.category>span:first-child{font-size:27px}.message-head #clear{min-height:40px;min-width:92px;font-size:12px}.message-head .label{font-size:10px}.conversation .sentence-item{min-height:52px;max-height:none}.conversation .sentence-item .symbol{height:32px;font-size:30px}}
@media(orientation:landscape) and (max-height:380px){#categories{height:66px;min-height:66px}.category{font-size:14px;min-width:80px}.category>span:first-child{font-size:25px}.message-head #clear{min-height:36px}.conversation .sentence-item{min-height:46px}.conversation .sentence-item .symbol{height:26px;font-size:25px}}
@media(max-height:700px) and (orientation:portrait){#categories{height:78px;min-height:78px}.category{font-size:15px}.message-head #clear{min-height:38px}.sentence-item{min-height:54px}.sentence-item .symbol{height:30px;font-size:29px}}
:is(#board,#relatedboard) .tile>.symbol{inset:1px 2px 16px;font-size:min(80cqw,calc(100cqh - 17px))}:is(#board,#relatedboard) .tile>.word{bottom:1px;min-height:13px;font-size:11px;line-height:1.1}

/* Whole sentence cards wrap within the existing fixed-height area. */
#sentence{flex-wrap:wrap;align-content:flex-start;align-items:flex-start;overflow-x:hidden;overflow-y:auto;height:92px;min-height:0;max-height:92px;scrollbar-width:thin}.sentence-item{max-width:100%;overflow-wrap:anywhere;flex:0 0 auto}#sentence>.placeholder{align-self:center;margin:auto 0}
@media(max-height:700px) and (orientation:portrait){#sentence{height:72px;max-height:72px}}
@media(orientation:landscape) and (min-width:600px){.conversation #sentence{height:100%;max-height:none;align-items:flex-start}.conversation .sentence-row{align-items:stretch}}

:is(#board,#relatedboard) .tile>.symbol{inset:2px 3px 19px}:is(#board,#relatedboard) .tile>.word{font-size:12px;min-height:15px;bottom:2px;font-weight:700}.symbol img{width:100%;height:100%;max-width:none;object-fit:contain}.sentence-item .symbol{width:48px}#answers .symbol{width:36px;flex-shrink:0}.answer-option .symbol{width:28px}#picturepreview{height:150px;background:#f5f5ef;border-radius:12px;display:flex;justify-content:center;align-items:center}#picturepreview .symbol{height:140px;width:140px;font-size:110px}dialog .picture-toggle input{display:inline;width:auto;margin-right:8px}#categories .category{min-width:85px}

/* Distinguish immediate replies from sentence building and vocabulary. */
.answers{background:#91b8d0;border-top-color:#6c98b4;border-radius:12px;box-shadow:0 0 0 5px #91b8d0}.answers>.label{color:#173e55}

/* Photos fill their cards; illustrations keep their complete outline. */
:is(#board,#relatedboard) .tile.has-photo>.symbol{inset:1px;height:auto;overflow:hidden;border-radius:12px}
:is(#board,#relatedboard) .tile.has-photo>.symbol img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
:is(#board,#relatedboard) .tile.has-photo>.word{left:1px;right:1px;bottom:1px;min-height:18px;padding:2px;background:#fffffff0;border-radius:0 0 11px 11px;z-index:1}
:is(#board,#relatedboard)[data-size="4"] .tile>.word{font-size:clamp(16px,2.5vw,22px);line-height:1.15;min-height:25px}
:is(#board,#relatedboard)[data-size="4"] .tile:not(.has-photo)>.symbol{inset:3px 3px 30px;font-size:min(80cqw,calc(100cqh - 32px))}
.symbol.photo{overflow:hidden;border-radius:8px}.symbol.photo img{object-fit:cover;object-position:center}
.stepper{display:flex;align-items:center;gap:8px;margin:6px 0 12px}.stepper button{flex:0 0 48px;height:46px;margin:0;font-size:25px;padding:4px}.stepper input{flex:1;min-width:0;width:auto;margin:0;text-align:center;font-size:18px;height:46px}

.header-actions{display:flex;align-items:center;gap:6px}#installshortcut{background:#deedf5;color:#244f62;border-color:#b2c9d6}#installstatus{font-size:13px;line-height:1.6;color:#466950}#installhelp p{margin:6px 0}

:is(#board,#relatedboard) .tile.is-phrase::after{content:'💬';position:absolute;top:4px;right:5px;font-size:13px;line-height:1.2;background:#ffffffe8;border-radius:5px;padding:1px;pointer-events:none}:is(#board,#relatedboard) .tile.is-phrase>.word{max-height:30px;overflow:hidden;line-height:1.15}:is(#board,#relatedboard) .tile.is-phrase:not(.has-photo)>.symbol{bottom:31px}:is(#board,#relatedboard)[data-size="4"] .tile.is-phrase>.word{max-height:52px}:is(#board,#relatedboard)[data-size="4"] .tile.is-phrase:not(.has-photo)>.symbol{bottom:52px}

:is(#board,#relatedboard) .symbol.composite{gap:4px}:is(#board,#relatedboard) .symbol.composite>.symbol{flex:1;min-width:0;height:100%;font-size:min(38cqw,calc(100cqh - 34px));display:flex;align-items:center;justify-content:center}:is(#board,#relatedboard) .symbol.composite .photo img{object-fit:cover}

/* Direct speech mode. Sentence-composition styles above remain available. */
body.direct-mode .message,body.direct-mode #answers{display:none}
.direct-mode .conversation{display:contents}
.direct-mode .answers{display:flex;flex-direction:column;padding:6px 0 0;min-height:0}
.direct-mode #answerstrip{height:112px;min-height:112px;margin-top:0;flex-shrink:0}
.direct-mode .answer-pair.chosen{background:transparent;outline-color:transparent}
.direct-mode .answer-option{gap:4px;padding:7px 3px;background:#f5f8f4;border-color:#c1d0ce;white-space:normal}
.direct-mode .answer-option[data-polarity=positive]{background:#e1efdc}
.direct-mode .answer-option[data-polarity=negative]{background:#f5e1dc}
.direct-mode .answer-option[data-polarity=request]{background:#eee8ce}
.direct-mode .answer-option .symbol{width:100%;height:60px;font-size:45px;min-height:0}
.direct-mode .answer-option .symbol img{max-width:100%;height:100%;object-fit:contain}
.direct-mode .answer-option .word{font-size:15px;line-height:1.15;text-align:center}
@media(orientation:landscape) and (min-width:600px){
 body.direct-mode main{display:flex;flex-direction:column;gap:8px}
 .direct-mode .vocabulary{flex:1;min-height:0}
 .direct-mode .answers{height:auto;overflow:visible;margin:0}
 .direct-mode #answerstrip{height:110px;min-height:110px}
}
@media(orientation:landscape) and (max-height:500px){
 .direct-mode #answerstrip{height:72px;min-height:72px}
 .direct-mode .answer-option{flex-direction:row;gap:6px;padding:5px}
 .direct-mode .answer-option .symbol{height:48px;width:48px;flex-shrink:0;font-size:38px}
 .direct-mode .answer-option .word{font-size:15px}
 .direct-mode #categories{height:62px;min-height:62px}
}

/* Nonmodal related words overlay: the underlying board never rerenders. */
.board-stage{position:relative;flex:1;min-height:0;min-width:0;display:flex}
.board-stage>#board{height:100%}
#relatedpanel{position:absolute;z-index:3;left:13px;right:3px;bottom:5px;height:48%;display:flex;flex-direction:column;min-height:0;padding:8px 9px 10px;background:#f7e5b9;border:2px solid #ad8741;border-radius:19px;box-shadow:0 -5px 18px #343e3940}
.related-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;margin-bottom:6px}
.related-head h2{font-size:13px;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.related-head button{min-height:40px;padding:5px 12px;background:#fff5da;border:1px solid #bda16b;font-size:14px;flex-shrink:0}
#relatedboard{display:flex;overflow-x:auto;scrollbar-width:thin;flex:1;min-height:0;gap:11px;touch-action:pan-x;overscroll-behavior-x:contain;scroll-snap-type:none}
.related-page{flex:0 0 94%;height:100%;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:6px 9px;min-width:0}
#relatedboard .tile>.word{font-size:11px}
@media(orientation:landscape) and (max-height:500px){#relatedpanel{padding-top:4px}.related-head{margin-bottom:3px}.related-head button{min-height:30px;font-size:12px}#relatedpanel{height:49%}}

#board.controlled-inertia,#relatedboard.controlled-inertia,#answerstrip.controlled-inertia,#categories.controlled-inertia{touch-action:pan-y pinch-zoom}

.content-settings{margin:18px 0;border-block:1px solid #ccd5c5;padding:16px 0}.content-settings h2{font-size:17px}#contentprogress{width:100%}#contentstatus{overflow-wrap:anywhere}

/* Definite flex sizes also work before dynamic viewport/container units. */
main,.vocabulary,.board-stage{flex-basis:0px}
.board-stage>#board{position:absolute;top:0;right:0;bottom:0;left:0;height:auto}
/* Keep emoji visible when container-relative font sizing is unavailable. */
@supports not (font-size:1cqw){
 #board .tile>.symbol,#relatedboard .tile>.symbol{font-size:48px}
 #board[data-size="4"] .tile>.symbol,#relatedboard[data-size="4"] .tile>.symbol{font-size:80px}
 #board .symbol.composite>.symbol,#relatedboard .symbol.composite>.symbol{font-size:36px}
}
/* Reclaim card space on older small phones held sideways. */
@media(orientation:landscape) and (max-height:380px){
 .direct-mode #categories{height:42px;min-height:42px}
 .direct-mode .category{padding:3px 8px;font-size:12px}
 .direct-mode .category>span:first-child{font-size:22px}
 .direct-mode #answerstrip{height:54px;min-height:54px}
 .direct-mode .answer-option{padding:3px}
 .direct-mode .answer-option .symbol{height:32px;width:32px;font-size:28px}
 .direct-mode .answer-option .word{font-size:13px}
 .direct-mode .board-heading{margin:2px 0 4px}
 .direct-mode .board-heading button{padding:4px 8px}
}