.bridge-game{background:#ecf5f7;color:#183d4c}.bridge-root{width:min(1040px,100%);margin:auto;padding:12px 16px 28px}.bridge-heading{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}.bridge-heading h2{font-size:clamp(19px,3vw,26px);margin:0}.bridge-chips{display:flex;gap:8px;flex-wrap:wrap}.bridge-chip{padding:8px 12px;border-radius:12px;background:#fff;border:1px solid #b3ccd5;font-weight:800;font-size:15px}.bridge-world{position:relative;border:3px solid #62889a;border-radius:24px;overflow:hidden;background:#ddf3fb;box-shadow:0 5px 0 #bbd4da}.bridge-world canvas{display:block;width:100%;aspect-ratio:7/4;touch-action:pan-y}.bridge-live{position:absolute;inset:10px 12px auto;display:flex;justify-content:space-between;gap:8px;pointer-events:none}.bridge-live span{background:#ffffffea;border-radius:10px;padding:7px 10px;color:#183d4c;font-size:14px;font-weight:800}.bridge-legend{display:flex;gap:12px;flex-wrap:wrap;padding:8px 12px;background:#fff;font-size:14px;font-weight:700}.bridge-legend span::before{content:'●';margin-right:5px}.bridge-legend .wood::before{color:#996021}.bridge-legend .steel::before{color:#246b95}.bridge-legend .danger::before{color:#bd3429}.bridge-panel{background:#fff;border:2px solid #c7dce0;border-radius:20px;padding:12px;margin-top:12px;display:grid;gap:10px}.bridge-section-row{display:grid;grid-template-columns:repeat(var(--segments,4),minmax(0,1fr));gap:8px}.bridge-tools,.bridge-materials,.bridge-actions{display:flex;flex-wrap:wrap;gap:8px}.bridge-button{min-width:52px;min-height:54px;border:2px solid #afc9d3;border-radius:14px;padding:10px 12px;background:#f5fafb;color:#183d4c;font:800 16px/1.35 var(--font-body,sans-serif);touch-action:manipulation;cursor:pointer}.bridge-tools>.bridge-button{flex:1}.bridge-materials>.bridge-button{flex:1}.bridge-button:hover{background:#dfedf3}.bridge-button.is-selected{border-color:#145c82;background:#d8edf8;box-shadow:inset 0 0 0 1px #145c82}.bridge-button:focus-visible{outline:4px solid #7a379c;outline-offset:3px}.bridge-button:disabled{opacity:.5;cursor:default}.bridge-primary{background:#087565!important;color:#fff;border-color:#075c50}.bridge-repair{background:#b8492c!important;color:#fff;border-color:#8b301d}.bridge-actions>.bridge-primary,.bridge-actions>.bridge-repair{flex:2}.bridge-actions>.bridge-button{flex:1}.bridge-status{font-size:16px;line-height:1.5;margin:0;padding:10px 12px;border-radius:12px;background:#ecf5f7;min-height:48px}.bridge-status.success{background:#dff4e8;color:#15513a}.bridge-status.failed{background:#fff0e8;color:#903019}.bridge-selected{font-size:16px;font-weight:800;margin:0}.bridge-handoff{background:#fff;text-align:center;border:2px solid #aecbd3;border-radius:24px;padding:30px;max-width:620px;margin:30px auto}.bridge-handoff h2{font-size:26px}.bridge-handoff p{line-height:1.6}.bridge-handoff .bridge-button{width:min(100%,340px)}.bridge-error{margin:40px auto;max-width:520px;padding:20px;background:white;line-height:1.6}.bridge-error a{display:block;min-height:48px;margin-top:16px}
@media(max-width:560px){.bridge-root{padding:10px 8px 20px}.bridge-heading h2{font-size:19px}.bridge-chip{font-size:13px;padding:7px 9px}.bridge-world{border-radius:16px}.bridge-live{inset:7px 8px auto}.bridge-live span{font-size:11px;padding:5px 7px}.bridge-section-row{grid-template-columns:repeat(3,minmax(0,1fr))}.bridge-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.bridge-tools>.bridge-button{padding:8px 3px;font-size:14px}.bridge-panel{padding:10px;gap:8px}.bridge-button{font-size:14px;padding:9px 8px}.bridge-status{font-size:14px}.bridge-materials{gap:7px}.bridge-actions{display:grid;grid-template-columns:1fr 1fr}.bridge-actions>.bridge-primary,.bridge-actions>.bridge-repair{grid-column:1/-1}.bridge-legend{font-size:12px;gap:8px}}
@media(prefers-reduced-motion:reduce){.bridge-world{box-shadow:none}}