.landscape-ui .ui-stage .bridge-game .mini-board-area{justify-content:center;container-type:size}
.bridge-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:5px;aspect-ratio:1;width:min(100cqw,calc(100cqh - 32px),440px);min-height:0;flex-shrink:0;align-self:center;padding:34px;border:2px solid #a8c2a8;border-radius:24px;background:radial-gradient(ellipse at 40% 10%,#e1f0d7,#b5d0be 55%,#84b8b7);box-shadow:inset 0 0 25px #7fabb440}
.bridge-tile{position:relative;min-width:0;min-height:0;overflow:visible;padding:0;border:1px solid #809b6f;border-radius:16px;background:#bed29e;box-shadow:0 3px 0 #668d69;transition:background .2s}
.bridge-tile:disabled{opacity:1;cursor:default}
.bridge-tile.connected{background:#dae6b4;box-shadow:0 3px 0 #668d69,inset 0 0 0 3px #f2e3a6}
.bridge-tile svg{display:block;width:100%;height:100%;pointer-events:none;overflow:hidden;border-radius:15px}
.bridge-bank{fill:none;stroke:#77905f;stroke-width:31;stroke-linecap:round;stroke-linejoin:round}
.bridge-trail{fill:none;stroke:#f2d598;stroke-width:23;stroke-linecap:round;stroke-linejoin:round}
.bridge-tile.connected .bridge-trail{stroke:#fff0bc}
.bridge-dino{position:absolute;left:-7%;bottom:8%;width:64%;height:82%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 2px #284c3a40)}
.bridge-nest{position:absolute;right:-3%;top:1%;font-size:clamp(24px,4vw,42px);pointer-events:none}
.bridge-game .mini-victory{text-align:center;margin:auto}
.bridge-game .mini-victory h2{font-size:25px}
.bridge-game .mini-victory p{font-size:16px}
.bridge-game .mini-victory button{font-size:16px;padding:12px}
.bridge-game[data-phase="won"] .bridge-dino{animation:bridge-celebrate .7s ease-out}
@keyframes bridge-celebrate{from{transform:translateY(-15px) scale(.9)}65%{transform:translateY(2px) scale(1.04)}to{transform:none}}
.bridge-offer{margin-top:15px;padding:16px;border:1px solid #bbcca2;border-radius:18px;background:#edf1db}
.bridge-offer strong{font-size:21px}.bridge-offer p{font-size:14px;line-height:1.5;margin:8px 0}
.egg-card>.bridge-entry{margin-top:10px;font-size:13px;min-height:40px}
html[data-game-orientation="portrait"] .landscape-ui .ui-stage .bridge-game .mini-workspace{grid-template-rows:minmax(155px,.9fr) minmax(220px,1.1fr)}
/* Measured viewport flags also work in Android WebViews with broken height media queries. */
html[data-tablet-layout="true"] .landscape-ui .ui-stage .bridge-game .bridge-board{width:min(100cqw,calc(100cqh - 44px),440px)}
html[data-tablet-layout="true"][data-game-orientation="portrait"] .landscape-ui .ui-stage .bridge-game .mini-workspace{grid-template-rows:minmax(340px,.9fr) minmax(400px,1.1fr)}


/* Measured viewport flags also work in Android WebViews with broken height media queries. */
html[data-tablet-layout="true"][data-tablet-height="compact"][data-game-orientation="portrait"][data-game-orientation="portrait"] .landscape-ui .ui-stage .bridge-game .mini-workspace{grid-template-rows:minmax(260px,.8fr) minmax(350px,1.2fr)}


html[data-game-orientation="portrait"] .landscape-ui .ui-stage .bridge-game .mini-workspace.no-task{grid-template-rows:minmax(0,1fr)}
@media(prefers-reduced-motion:reduce){.bridge-tile{transition:none}.bridge-dino{animation:none!important}}

/* Fixed banks show which outer edge the first and last path must meet. */
.bridge-port{position:absolute;top:50%;width:34px;height:26px;transform:translateY(-50%);pointer-events:none;z-index:2;color:#254f3a}
.bridge-entrance{right:100%}.bridge-exit{left:100%}
.bridge-port small{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;line-height:1.5;white-space:nowrap}
.bridge-port b{display:block;height:26px;line-height:22px;border:2px solid #6b824e;border-radius:8px;background:#ffe5a0;box-shadow:0 2px 0 #617c5440;font-size:25px;text-align:center}
.bridge-entrance b{border-radius:12px 0 0 12px}.bridge-exit b{border-radius:0 12px 12px 0}