.teens-board-dialog{box-sizing:border-box;width:min(1600px,96vw);max-width:96vw;height:94dvh;max-height:94dvh;padding:0;border:1px solid #ded6ef;border-radius:22px;background:#f8f6ff;color:#28164f;font:16px/1.5 Arial,sans-serif;overflow:hidden}
.teens-board-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}.teens-board-dialog::backdrop{background:#201335c9}.teens-board-dialog *{box-sizing:border-box}.teens-board-dialog [hidden]{display:none!important}
.tb-header{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#48209e;color:#fff;padding:18px 24px}.tb-header span{font-size:11px;letter-spacing:1.4px}.tb-header h2{font-size:20px;line-height:1.3;margin:3px 0;color:#fff}.teens-board-dialog button,.teens-board-dialog select{font:600 14px/1.3 Arial,sans-serif;min-height:44px;border:1px solid #987ebe;border-radius:10px;background:#fff;color:#28164f;padding:10px 12px;cursor:pointer;touch-action:manipulation}.teens-board-dialog button:disabled{opacity:.4;cursor:default}.tb-header>button{background:#a5f46e;border-color:#a5f46e;flex-shrink:0}
.teens-board-dialog :focus-visible{outline:3px solid #582bc7;outline-offset:3px}.tb-header :focus-visible{outline-color:#fff}
.tb-workspace{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:0}.tb-workspace.tb-projected{grid-template-columns:minmax(0,1fr)}
.tb-tools{background:#fff;border-right:1px solid #ded6ef;overflow:auto;padding:20px;min-width:0}.tb-tools label{display:block;font-size:13px;font-weight:700}.tb-tools input[type=search]{width:100%;font:17px/1.5 Arial,sans-serif;padding:12px;border:1px solid #987ebe;border-radius:10px;background:#f8f6ff;color:#28164f;margin:7px 0 12px;resize:vertical}.tb-tools select{width:100%;margin-top:6px}.tb-tools input[type=color]{width:50px;height:44px;display:block;margin-top:6px;padding:4px;background:#fff;border:1px solid #987ebe;border-radius:8px}.tb-line{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}.tb-line>label:first-child{flex:1}.tb-tool-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.tb-tool-buttons button[aria-pressed=true]{color:#fff;background:#582bc7;border-color:#582bc7}.tb-tip{font-size:12px;line-height:1.6;color:#635776;margin:10px 0 16px}.tb-search-toggle{width:100%;background:#e2f8f4!important}.tb-clear{margin-top:18px;width:100%}.tb-tools a,.tb-image-credit a{color:#48209e;font-size:12px}.tb-tools form button{margin-top:12px;width:100%}
.tb-view{min-width:0;overflow:auto;padding:28px;display:flex;flex-direction:column;justify-content:safe center}.tb-stage{position:relative;container-type:inline-size;aspect-ratio:2/1;width:100%;flex-shrink:0;border:1px solid #ded6ef;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 14px 40px #48209e0d;min-height:280px}
.tb-text{position:absolute;inset:7%;font-size:calc(clamp(18px,calc(var(--tb-font,56)*.1cqw),72px)*var(--tb-fit,1));line-height:1.55;white-space:pre-wrap;overflow:auto;overflow-wrap:anywhere;z-index:1}.tb-text button,.tb-text span{font:inherit;line-height:inherit;color:inherit;background:transparent;border:0;border-radius:5px;padding:0;min-height:0;box-shadow:none;text-align:left;vertical-align:baseline}.tb-text button.is-marked,.tb-text span.is-marked{background:#e5fa8f;box-shadow:0 3px #a1bc36}.tb-empty{display:block!important;color:#635776!important;font-size:clamp(19px,3cqw,32px)!important}.tb-empty small{display:block;font-size:.7em;font-weight:400;margin-top:10px}
.tb-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.tb-stage[data-tool=draw] .tb-ink,.tb-stage[data-tool=erase] .tb-ink{pointer-events:auto;touch-action:none;cursor:crosshair}.tb-stage[data-tool=erase] path{pointer-events:stroke;stroke-width:14px;stroke-opacity:.7}
.tb-image{position:absolute;left:4%;top:6%;bottom:6%;width:39%;display:flex;align-items:center;justify-content:center}.tb-image img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;border-radius:12px}.tb-stage.has-image .tb-text{left:48%;right:5%}.tb-image-credit{margin:8px 0 0}.tb-student-tip{text-align:center;font-size:13px;color:#635776}.tb-student-tip span{display:block;font-size:12px}
.tb-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 0}.teens-board-dialog .tb-results button{padding:3px;min-width:0;min-height:0;display:block;border-radius:8px}.tb-results img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px}.teens-board-dialog .tb-results button[aria-pressed=true]{border-color:#582bc7;box-shadow:0 0 0 3px #582bc7}.tb-search-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tb-tools [data-board-preview] img{display:block;max-width:100%;max-height:240px;object-fit:contain;margin:12px 0}.tb-tools [data-board-preview] button{background:#a5f46e;width:100%}
@media(max-width:800px){.teens-board-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0}.tb-header{padding:12px;gap:10px}.tb-header h2{font-size:15px}.tb-header span{font-size:10px}.tb-header>button{max-width:132px;font-size:12px;padding:9px}.tb-workspace{display:flex;flex-direction:column;overflow:auto}.tb-tools{overflow:visible;padding:14px;border-right:0;border-bottom:1px solid #ded6ef;flex-shrink:0}.tb-view{overflow:visible;padding:14px;flex-shrink:0}.tb-stage{min-height:300px}.tb-workspace.tb-projected .tb-view{margin:auto 0}.tb-results{grid-template-columns:repeat(3,minmax(0,1fr))}.tb-tool-buttons{margin-top:10px}.tb-tools>.tb-tip:last-child{margin-bottom:0}}
.tb-header>div{flex:1;min-width:0}.tb-header>[data-board-focus]{background:transparent;color:#fff;border-color:#b39bdd}.tb-focus .tb-tools{display:none}.tb-focus .tb-workspace{grid-template-columns:1fr}.tb-focus .tb-view{margin:auto 0}
@media(max-width:800px){.tb-header{flex-wrap:wrap}.tb-header>div{flex-basis:100%}.tb-header h2{display:none}.tb-header>button{max-width:none;flex:1}.tb-focus .tb-view{width:100%;margin:auto 0}}

/* The writing surface lives on the board itself, without a separate input box. */
.teens-board-dialog .tb-editor{display:block;width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;outline:none;box-shadow:none;background:transparent;resize:none;font-family:inherit;cursor:text;caret-color:currentColor}.teens-board-dialog .tb-editor:focus-visible{outline:none}.tb-editor::placeholder{color:#635776;opacity:1}

.tb-colors{display:flex;flex-wrap:wrap;gap:4px;margin:12px 0}.teens-board-dialog .classroom-swatch{display:grid;place-items:center;width:36px;min-height:36px;padding:5px;border:2px solid transparent;border-radius:50%;background:#fff}.classroom-swatch span{display:block;width:22px;height:22px;background:var(--swatch);border-radius:50%;border:1px solid #0002}.teens-board-dialog .classroom-swatch[aria-pressed=true]{border-color:#48209e;box-shadow:0 0 0 2px #e6dcfa}.tb-width{margin-top:14px}.tb-stage[data-tool=highlight] .tb-ink{pointer-events:auto;touch-action:none;cursor:crosshair}.tb-clear{border-top:2px solid #ded6ef!important;margin-top:28px!important}.tb-tools>.tb-line:has([data-board-undo]){position:sticky;bottom:-20px;background:white;padding:12px 0;margin-bottom:0;z-index:3}

/* A lesson's Wordwall game on the left, the teacher's writing on the right. */
.tb-game{position:absolute;left:2.5%;top:4%;bottom:4%;width:58%;z-index:1}.tb-game iframe{display:block;width:100%;height:100%;border:0;border-radius:12px;background:#f8f6ff}.tb-stage.has-game .tb-text{left:63%;right:4%;font-size:calc(clamp(16px,calc(var(--tb-font,56)*.07cqw),56px)*var(--tb-fit,1))}
.tb-games-toggle{width:100%;margin-bottom:10px;background:#fff4c7!important}.tb-game-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}.tb-game-list button{text-align:left}.teens-board-dialog .tb-game-list button[aria-pressed=true]{color:#fff;background:#582bc7;border-color:#582bc7}[data-board-remove-game]{width:100%;margin-bottom:10px}
@media(max-width:800px){.tb-stage.has-game{aspect-ratio:3/4}.tb-game{left:3%;right:3%;top:3%;bottom:auto;width:auto;height:56%}.tb-stage.has-game .tb-text{left:5%;right:5%;top:62%}}

/* Desktop: the whole board always fits the window. One 2:1 shape everywhere keeps strokes where
   they were drawn in both windows; «Ampliar» and the student window use the full screen. */
@media(min-width:801px){
 .tb-view,.tb-focus .tb-view,.tb-workspace.tb-projected .tb-view{container-type:size;margin:0}
 .tb-stage,.teens-board-dialog .tb-image-credit{max-width:calc((100cqh - var(--tb-reserve,96px))*2);margin-inline:auto}.tb-image-credit{width:100%}
 .teens-board-dialog.tb-focus,.teens-board-dialog.tb-full{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0}
 .tb-focus .tb-header,.tb-full .tb-header{padding:8px 16px}.tb-focus .tb-header h2,.tb-full .tb-header h2{font-size:16px;margin:0}
 .tb-focus .tb-view,.tb-full .tb-view{padding:10px 14px}
 .tb-focus .tb-view{--tb-reserve:28px}.tb-focus .tb-student-tip{display:none}.tb-focus .tb-image-credit{margin-top:4px;font-size:13px;line-height:1.4}
}