/* Stable document-flow layout: no viewport calculation is required. */
.te-web-board-shell,
.te-web-board-shell .te-pro-board,
.te-web-board-shell .te-pro-board .te-app-board-stage-wrap {
    visibility: visible !important;
    opacity: 1 !important;
}

.te-web-board-shell .te-pro-board .te-app-board-stage {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 0 !important;
    background: #277b49 !important;
}

.te-web-board-shell .te-pro-board:not(:fullscreen):not(.is-board-expanded) {
    position: relative !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.te-web-board-shell .te-pro-board:not(:fullscreen):not(.is-board-expanded) .te-app-board-intro {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
}

.te-web-board-shell .te-pro-board:not(:fullscreen):not(.is-board-expanded) .te-app-board-stage-wrap {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
}

.te-web-board-shell .te-pro-board:not(:fullscreen):not(.is-board-expanded) .te-app-board-stage:not(.is-portrait) {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1000 / 650 !important;
}

.te-web-board-shell .te-pro-board:not(:fullscreen):not(.is-board-expanded) .te-app-board-stage.is-portrait {
    width: min(100%, 650px) !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 650 / 1000 !important;
    margin: 0 auto !important;
}

.te-web-board-shell .te-pro-board:not(:fullscreen):not(.is-board-expanded) .te-web-board-dock {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
}

.te-web-board-shell .te-pro-board .te-app-board-magnet.is-home,
.te-web-board-shell .te-pro-board .te-app-board-magnet.is-away,
.te-web-board-shell .te-pro-board .te-app-board-magnet.is-ball,
.te-web-board-shell .te-pro-board .te-app-board-magnet.is-ring {
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
}

.te-web-board-shell .te-konva-host,
.te-web-board-shell .te-konva-host canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.te-web-board-shell .te-konva-host {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    border-radius: inherit !important;
    touch-action: none !important;
}

.te-web-board-shell .te-app-board-stage.is-konva-ready > .te-app-board-lines,
.te-web-board-shell .te-app-board-stage.is-konva-ready > .te-app-board-hint {
    display: none !important;
}

/* Dedicated fullscreen geometry. The canvas must have a measurable box
   before Konva recalculates its internal pixel size. */
.te-web-board-shell .te-pro-board:fullscreen,
.te-web-board-shell .te-pro-board.is-board-expanded {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #1b201e !important;
}

.te-web-board-shell .te-pro-board:fullscreen .te-app-board-stage-wrap,
.te-web-board-shell .te-pro-board.is-board-expanded .te-app-board-stage-wrap {
    position: absolute !important;
    inset: 58px 0 76px !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 200px !important;
    padding: 10px !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.te-web-board-shell .te-pro-board:fullscreen .te-app-board-stage,
.te-web-board-shell .te-pro-board.is-board-expanded .te-app-board-stage,
.te-web-board-shell .te-pro-board:fullscreen .te-app-board-stage.is-portrait,
.te-web-board-shell .te-pro-board.is-board-expanded .te-app-board-stage.is-portrait {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 200px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 700px) {
    .te-web-board-shell .te-pro-board:fullscreen .te-app-board-stage-wrap,
    .te-web-board-shell .te-pro-board.is-board-expanded .te-app-board-stage-wrap {
        inset: 52px 0 70px !important;
        padding: 5px !important;
    }
}