body.bob-game { background:#e7f1eb; color:#36566b; }
.bob-game > header,.bob-game > footer { display:none; }
.bob-game #app { width:min(1100px,100%); max-width:1100px; min-height:100dvh; margin:auto; padding:0 18px 16px; background:#fffdf5; }
.bb-shell { font-family:Library,'Trebuchet MS',sans-serif; letter-spacing:0; }
.bb-shell * { box-sizing:border-box; }
.bb-shell h1,.bb-shell h2,.bb-shell h3,.bb-shell button,.bb-shell input,.bb-shell a { font-family:inherit; }
.bb-shell button,.bb-shell a.bb-secondary { min-width:48px; min-height:48px; padding:10px 14px; border-radius:8px; font-size:16px; line-height:1.2; font-weight:800; cursor:pointer; }
.bb-shell button:disabled { opacity:.6; cursor:default; }
.bb-shell :focus-visible { outline:3px solid #9b6bb5; outline-offset:3px; }
.bb-primary { border:2px solid #a95e62; background:#b55f6d; color:#fff; box-shadow:0 3px 0 #8f4857; }
.bb-primary:hover { background:#a65060; }
.bb-secondary { display:inline-flex; align-items:center; justify-content:center; border:1px solid #adc7c9; color:#386074; background:#fafdf4; text-decoration:none; }
.bb-secondary:hover { background:#e9f5ec; }
.bb-toolbar { display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid #d6e1d3; }
.bb-toolbar > div { flex:1; min-width:0; }
.bb-toolbar h1 { font-size:17px; line-height:1.2; margin:0 0 4px; }
.bb-toolbar span { font-size:12px; }
.bb-toolbar > a { font-size:14px!important; white-space:nowrap; }
.bb-sound { width:48px; padding:3px!important; font-size:25px!important; }
.bb-effects { display:flex; align-items:center; gap:5px; min-height:48px; font-size:12px; }
.bb-effects input { width:18px; height:18px; accent-color:#4c9796; }
.bb-mission { margin:10px 0; padding:9px 13px; background:#fff0ca; border-left:4px solid #e8bd59; }
.bb-mission > span { font-size:12px; font-weight:800; color:#a16977; }
.bb-mission h2 { font-size:21px; line-height:1.35; margin:4px 0 0; }
.bb-workspace { display:grid; grid-template-columns:minmax(0,1fr) 285px; gap:18px; align-items:start; }
.bb-workspace > * { min-width:0; }
.bb-board { background:#fcfcf1; border:1px solid #d1dfd1; border-radius:6px; }
.bb-town-strip { height:44px; display:flex; align-items:center; justify-content:center; background:#e5efd6; border-bottom:1px solid #d2dfc4; }
.bb-town { display:block; width:100%; }
.bb-town-strip .bb-town { width:100%; height:42px; }
.bb-drawing { display:block; width:100%; height:352px; touch-action:pan-y; user-select:none; }
.bb-drawing [role="button"],.bb-drawing [role="slider"] { cursor:pointer; }
.bb-drawing [data-bb-drag] { cursor:grab; touch-action:none; }
.bb-drawing [data-bb-drag] * { touch-action:none; }
.bb-drawing [data-bb-drag]:active { cursor:grabbing; }
.bb-controls { display:flex; flex-direction:column; gap:11px; padding-top:3px; }
.bb-vertices { display:flex; flex-wrap:wrap; gap:6px; }
.bb-vertices > button { flex:1; min-width:110px; border:1px solid #b8c6d2; color:#43647a; background:#eef3f5; font-size:14px; padding:9px 6px; }
.bb-vertices [aria-pressed="true"] { border:2px solid #ae7484; background:#f8e8ea; }
.bb-tool-button { min-height:52px!important; border:2px solid #7caaa6; background:#def2e9; color:#326d72; }
.bb-tool-turn,.bb-hinge-turn { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; gap:8px; align-items:center; }
.bb-tool-turn > button,.bb-hinge-turn > button { width:48px; height:48px; padding:2px!important; font-size:28px; }
.bb-tool-turn > span,.bb-hinge-turn > span { text-align:center; font-size:14px; font-weight:700; }
.bb-answers { display:flex; flex-direction:column; gap:8px; margin-top:5px; }
.bb-answers > button { min-height:54px; border:2px solid #c5b6cf; background:#f3eaf7; color:#665b7e; font-size:18px; }
.bb-answers [aria-pressed="true"] { border-color:#8d649f; background:#ecddf5; box-shadow:inset 0 0 0 1px #8d649f; }
.bb-flag-count { margin:0; padding:3px; text-align:center; font-size:14px; }
.bb-step-modes { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.bb-step-modes > button { min-width:0; padding:7px 4px; border:1px solid #c5b6cf; background:#f3eaf7; color:#665b7e; font-size:14px; }
.bb-step-modes [aria-pressed="true"] { border:2px solid #8d649f; background:#ecddf5; }
.bb-feedback { display:flex; align-items:center; min-height:80px; margin:9px 0; padding:9px 12px; border-left:4px solid #b399c8; background:#f3eaf7; font-size:16px; line-height:1.4; }
.bb-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.bb-actions > .bb-primary { min-width:180px; }
.bb-cover { padding:24px 0 12px; text-align:center; }
.bb-eyebrow { color:#9776a7; font-size:14px; }
.bb-cover h2 { font-size:32px; line-height:1.2; margin:10px 0 14px; }
.bb-cover > p:not(.bb-eyebrow) { font-size:18px; line-height:1.5; max-width:710px; margin:0 auto 18px; }
.bb-cover img { display:block; width:min(700px,100%); aspect-ratio:3/2; object-fit:cover; margin:20px auto 12px; border-radius:8px; }
.bb-cover > span { font-size:14px; }
.bb-help { position:fixed; inset:0; width:min(550px,calc(100% - 24px)); max-height:calc(100dvh - 24px); margin:auto; padding:22px; border:3px solid #94bab8; border-radius:8px; background:#fffdf5; color:#3e6276; box-shadow:0 0 0 100vmax #27485c66; overflow:auto; }
.bb-help h2 { font-size:23px; margin:0 0 12px; }
.bb-help p { font-size:17px; line-height:1.5; }
.bb-finish { padding:18px 0; }
.bb-finish h2 { font-size:30px; margin:0 0 8px; }
.bb-finish > .bb-town { margin:18px 0; }
.bb-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; }
.bb-summary > div { display:flex; flex-direction:column; gap:3px; border-top:4px solid #ebc565; padding:10px 0; }
.bb-summary strong { font-size:32px; color:#3f7e8c; }
.bb-summary span { font-size:14px; }
.bb-finish details { padding:12px 0; border-bottom:1px solid #d5dfd1; }
.bb-finish summary { min-height:28px; cursor:pointer; font-weight:700; }
.bb-finish details p { font-size:16px; line-height:1.5; }
.bb-bonus-art { display:block; width:min(500px,100%); margin:12px auto; }
.bb-approved { animation:bb-check .55s ease-in-out; }
@keyframes bb-check { 50% { border-color:#79ad92; box-shadow:inset 0 0 0 4px #b8dfb7; } }
@media (min-width:901px) and (max-height:740px) { .bb-toolbar { padding:5px 0; } .bb-mission { margin:6px 0; padding:7px 11px; } .bb-mission h2 { font-size:20px; } .bb-town-strip { height:32px; } .bb-town-strip .bb-town { height:30px; } .bb-drawing { height:336px; } .bb-feedback { min-height:72px; margin:7px 0; } }
@media (max-width:850px) { .bb-toolbar { flex-wrap:wrap; } .bb-toolbar > div { min-width:240px; } .bb-effects { margin-left:auto; } .bb-workspace { grid-template-columns:minmax(0,1fr) 240px; gap:12px; } .bb-vertices > button { min-width:95px; font-size:13px; } .bb-drawing { height:352px; } .bb-controls { gap:9px; } }
@media (max-width:600px) { .bob-game #app { padding:0 10px 16px; } .bb-toolbar { gap:6px; padding:4px 0; } .bb-toolbar > div { min-width:0; flex-basis:calc(100% - 160px); } .bb-toolbar h1 { font-size:15px; } .bb-toolbar > a { font-size:12px!important; padding:8px!important; } .bb-toolbar > button[data-bb-action="help"] { font-size:13px; } .bb-effects { margin-left:0; } .bb-mission { padding:8px; } .bb-mission h2 { font-size:18px; } .bb-workspace { grid-template-columns:1fr; gap:10px; } .bb-town-strip { height:28px; } .bb-town-strip .bb-town { height:26px; } .bb-drawing { height:auto; aspect-ratio:480/440; } .bb-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:0; } .bb-vertices { grid-column:1/-1; } .bb-vertices > button { min-width:0; font-size:13px; padding:8px 4px; } .bb-answers { grid-column:1/-1; flex-direction:row; margin:0; } .bb-answers > button { flex:1; min-width:0; min-height:48px; font-size:16px; } .bb-controls > .bb-tool-button { font-size:14px; padding:8px; } .bb-tool-turn,.bb-hinge-turn { gap:3px; } .bb-tool-turn > span,.bb-hinge-turn > span { font-size:12px; } .bb-step-modes { grid-column:1/-1; } .bb-hinge-turn { grid-column:1/-1; } .bb-flag-count { font-size:13px; display:flex; align-items:center; justify-content:center; } .bb-feedback { min-height:96px; font-size:14px; padding:8px; } .bb-actions button { font-size:14px; padding:9px; } .bb-actions > .bb-primary { flex:1; } .bb-cover { padding:14px 0; } .bb-cover h2 { font-size:27px; } .bb-cover > p:not(.bb-eyebrow) { font-size:16px; } .bb-cover img { margin:15px auto 10px; } .bb-summary { gap:8px; } .bb-summary span { font-size:12px; } .bb-summary strong { font-size:28px; } }
@media (prefers-reduced-motion:reduce) { .bb-shell * { animation:none!important; scroll-behavior:auto!important; } }
@media (max-width:600px) { .bb-tool-turn { grid-template-columns:48px 48px; justify-content:space-between; } .bb-tool-turn > span { display:none; } }
.bb-still * { animation:none!important; }