/* Zahlen verbinden · carefully illustrated finger-drawing game */
.connect-game{display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;
 padding:1px clamp(8px,2.5vw,15px) max(12px,env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;min-height:0!important;
 overscroll-behavior:contain}
.connect-title{text-align:center;width:100%;flex:0 0 auto}
.connect-title h1{font:900 clamp(23px,7.3vw,33px) "Chalkboard SE","Marker Felt",sans-serif!important;margin:1px 0!important;color:#705b3c;text-shadow:1px 2px #fff8d6}
.connect-title span{display:inline-block;background:#ffedc5;border:2px solid #b59563;border-radius:24px;padding:1px 12px;color:#617851;font:900 14px "Chalkboard SE","Marker Felt",sans-serif}
.connect-hint{font:900 clamp(14px,4vw,18px) "Chalkboard SE","Marker Felt",sans-serif;color:#5b7656;text-shadow:1px 1px #fff7d9;text-align:center;min-height:22px;margin:5px 0!important}
.connect-board{width:min(100%,440px);height:var(--board-height,320px);min-height:0;flex:0 0 auto;position:relative;border:8px solid #ad805d;
 border-radius:25px;background:radial-gradient(ellipse at 40% 25%,#fff8dd 0%,#f8e8be 80%);overflow:hidden;
 box-shadow:inset 0 0 0 3px #fffcdf,inset 0 2px 15px #bba2766a,2px 6px 0 #8a715669;
 touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.connect-board-decor{position:absolute;bottom:7%;left:7%;right:7%;display:flex;justify-content:space-between;font-size:22px;color:#d9ad8d;opacity:.25;pointer-events:none}
.connect-board-decor span{color:#93b89a}
.connect-paths{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.connect-line-bg,.connect-line-ink,.connect-line-active{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.connect-line-bg{stroke-width:14;opacity:.95}.connect-line-ink{stroke-width:8}
.connect-line-active{stroke-width:8;stroke-dasharray:none;filter:drop-shadow(0 1px 1px #9a865c55)}
.connect-board.connect-done{border-color:#83a978}
.connect-num{position:absolute;left:var(--px);top:var(--py);transform:translate(-50%,-50%);z-index:5;
 width:clamp(47px,13.5vw,64px);height:clamp(47px,13.5vw,64px);border:4px solid var(--ink);border-radius:50%;
 display:grid;place-items:center;background:var(--light);color:var(--ink);font:900 clamp(23px,6.6vw,34px) "Chalkboard SE","Marker Felt",sans-serif;
 text-shadow:1px 1px #fff;box-shadow:0 3px 0 #91755966,inset 0 3px #fff9e8;pointer-events:none}
.connect-num.connected{background:var(--ink);color:#fff9df;border-color:#fff9dd;box-shadow:0 3px 0 #746b5866,0 0 0 3px var(--ink)}
.connect-colors{width:min(100%,440px);flex:0 0 auto;border:2px dashed #bda27b;background:#fff1d2cb;border-radius:22px;padding:4px 7px 7px}
.connect-colors-label{text-align:center;font:900 clamp(13px,3.7vw,17px) "Chalkboard SE","Marker Felt",sans-serif;color:#765f4e;margin-bottom:3px}
.connect-crayons{display:flex;gap:5px;justify-content:center;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px}
.connect-crayons::-webkit-scrollbar{display:none}
.connect-crayon{position:relative;display:flex;flex:0 0 45px;flex-direction:column;gap:0;align-items:center;
 border:3px solid #b19d7d;background:var(--light);border-radius:13px;min-width:42px;min-height:66px;padding:0 1px;
 box-shadow:1px 3px 0 #a18e6c55;font:900 17px "Chalkboard SE","Marker Felt",sans-serif;color:var(--ink)}
.connect-crayon-shape{display:block;font:900 35px system-ui,sans-serif;color:var(--ink);line-height:1.2;transform:rotate(-15deg)}
.connect-crayon[aria-pressed="true"]{outline:4px solid var(--ink);outline-offset:1px;transform:translateY(-3px);background:white}
.connect-crayon.used{opacity:.55}
.connect-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;flex:0 0 auto;margin-top:3px}
.connect-secondary,.connect-continue{min-height:43px;border-radius:23px;padding:6px 16px;border:3px solid #9d8064;
 box-shadow:1px 3px #9a7f5980;font:900 clamp(14px,4vw,17px) "Chalkboard SE","Marker Felt",sans-serif}
.connect-secondary{background:#f5e5c5;color:#795b45}.connect-continue{background:#add9a1;color:#496d51;border-color:#71955d}
.connect-victory{font:900 16px "Chalkboard SE","Marker Felt",sans-serif;text-align:center;color:#5d915c;min-height:20px}
.connect-board.connect-error{animation:connect-no .35s ease-in-out}
@keyframes connect-no{0%,100%{border-color:#ad805d}50%{border-color:#d87676}}
@media(max-height:800px) and (orientation:portrait){.connect-board{height:min(var(--board-height),44dvh)!important}.connect-title h1{font-size:23px!important}.connect-hint{margin:1px 0!important}.connect-colors{padding:2px 5px}.connect-crayon{min-height:52px;flex-basis:40px}.connect-crayon-shape{font-size:25px}.connect-crayons{padding:1px}.connect-num{width:clamp(43px,13vw,58px);height:clamp(43px,13vw,58px)}}
@media(orientation:landscape) and (max-height:520px){.connect-game{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(220px,35%);grid-template-rows:auto 1fr auto!important;gap:4px 10px!important}.connect-title{grid-column:1;grid-row:1}.connect-hint{grid-column:2;grid-row:1}.connect-board{grid-column:1;grid-row:2/4;height:min(var(--board-height),calc(100dvh - 130px))!important}.connect-colors{grid-column:2;grid-row:2;align-self:center}.connect-actions{grid-column:2;grid-row:3}.connect-num{width:41px;height:41px;font-size:23px}.connect-victory{display:none}.connect-crayon{min-height:47px;flex-basis:35px}.connect-crayon-shape{font-size:22px}}

/* Higher levels need actual room for 12–16 large number targets; allow page scrolling. */
@media (max-height:800px) and (orientation:portrait){
 .connect-board[data-pairs="5"],.connect-board[data-pairs="6"],.connect-board[data-pairs="7"],.connect-board[data-pairs="8"]{
  height:var(--board-height)!important;flex:0 0 auto!important
 }
}
@media (orientation:landscape) and (max-height:520px){
 .connect-board[data-pairs="5"],.connect-board[data-pairs="6"],.connect-board[data-pairs="7"],.connect-board[data-pairs="8"]{
  height:var(--board-height)!important
 }
 .connect-game{overflow-y:auto!important}
}
.connect-board.connect-crosses{outline:4px solid #d78b82;outline-offset:1px}