.builder-game{box-sizing:border-box;width:100%;max-width:950px;height:100%;min-height:0;margin:auto;padding:8px;display:flex;flex-direction:column;align-items:center;gap:8px;color:#f9edc7}.builder-heading{display:flex;align-items:center;justify-content:center;gap:10px;flex:none}.builder-heading h1{margin:0;font-size:21px}.builder-layout{min-height:0;display:block;width:100%;flex:1}.builder-side{display:none}.builder-workspace{height:100%;display:flex;flex-direction:column;align-items:center;gap:8px}.builder-metrics{display:flex;align-items:center;justify-content:space-between;width:var(--builder-width,300px);max-width:100%;gap:10px;flex:none;font-size:14px}.builder-metrics span{display:flex;flex-direction:column}.builder-metrics strong{font-size:20px;font-variant-numeric:tabular-nums}.builder-grid-frame{position:relative;width:var(--builder-width,300px);max-width:100%;min-height:0}.builder-grid{width:100%;display:grid;grid-template-columns:repeat(22,minmax(0,1fr));grid-template-rows:repeat(22,minmax(0,1fr));aspect-ratio:1;gap:1px;padding:5px;background:#211c18;border:2px solid #ad8d6b;border-radius:12px;box-sizing:border-box;touch-action:manipulation}.builder-cell{min-width:0;min-height:0;width:100%;height:100%;padding:0;border:0;border-radius:1px;background:#ffffff08;box-shadow:none}.builder-cell.occupied,.builder-mini i.filled{background:linear-gradient(145deg,color-mix(in srgb,var(--brick),#fff 20%),var(--brick) 50%,color-mix(in srgb,var(--brick),#000 20%));box-shadow:inset 1px 1px #fff5,inset -1px -1px #0005}.builder-cell.selected{outline:1px solid #ffe6a3;outline-offset:-1px}.builder-cell.ghost.valid{background:#76b575;outline:1px solid #c2fcb4;outline-offset:-1px}.builder-cell.ghost.invalid{background:#b84650}.builder-mini{display:grid!important;grid-template-columns:repeat(var(--mini-cols),minmax(0,1fr));gap:1px;width:100%;line-height:0}.builder-mini i{display:block;aspect-ratio:1;min-width:0;min-height:0;background:transparent}.builder-preview-icon{flex:0 0 42px;width:42px;height:48px;padding:5px;background:#33281f;border:1px solid #d3b16e;border-radius:7px;display:flex;align-items:center;justify-content:center}.builder-preview-icon .builder-mini{width:28px}.builder-preview-icon.intro-hidden{visibility:hidden}.builder-preview-overlay{display:none;position:absolute;inset:0;z-index:5;background:#181514;border:2px solid #b99b62;border-radius:12px;box-sizing:border-box;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:40px 18px}.builder-preview-overlay.open{display:flex}.builder-preview-overlay>.builder-mini{width:85%;max-width:250px}.builder-preview-overlay>span{text-align:center;font-size:14px;line-height:1.3}.builder-preview-close{position:absolute;top:6px;right:6px;width:36px;height:36px;min-height:36px;padding:0;background:#392c24;border:1px solid #b99b62;color:#fff;font-size:26px;border-radius:8px}.builder-preview-close[hidden]{display:none}.builder-preview-overlay.departing{display:flex;pointer-events:none;transform-origin:top left;animation:builder-preview-depart .65s ease-in-out forwards}.builder-preview-overlay.departing>span,.builder-preview-overlay.departing>strong{visibility:hidden}@keyframes builder-preview-depart{to{transform:translateY(-55px) scale(.08);opacity:0}}.builder-palette{display:flex;width:min(100%,550px);overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x;scroll-snap-type:x proximity;gap:8px;padding:3px;flex:none;scrollbar-width:thin}.builder-palette button{flex:0 0 62px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:7px;background:#29211d;border:1px solid #71604d;border-radius:10px;color:#ecd7b3;scroll-snap-align:center}.builder-palette .builder-mini{width:36px}.builder-palette small{font-size:12px}.builder-palette button.selected{border-color:#e3c875;background:#493d2b}.builder-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;flex:none}.builder-tools button{min-height:36px;padding:7px 10px;font-size:14px}.builder-status{margin:0;min-height:0;text-align:center;color:#b9e59c;font-size:14px}.builder-status:empty{display:none}.builder-game .game-bottom{margin:0;flex:none}.builder-game .game-bottom button{min-height:32px;padding:6px 12px;font-size:14px}.builder-result{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:10px;background:#3a3322;border-radius:12px}.builder-result h2{font-size:18px;margin:0}.builder-setup{text-align:center;padding:24px;max-width:650px;margin:auto}.builder-setup .opponent-choices{justify-content:center;margin:20px 0}.builder-cover{position:relative}.builder-cover-title{position:absolute;top:4%;left:4%;right:4%;text-align:center;color:#ffe7aa;font-size:clamp(18px,3vw,36px);font-weight:900;text-shadow:0 2px 4px #000,0 0 10px #000;line-height:1.1}@media(orientation:landscape) and (max-height:550px){.builder-game{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto 1fr auto auto;gap:6px 18px}.builder-heading{grid-column:2;grid-row:1}.builder-layout{grid-column:1;grid-row:1/5;height:100%}.builder-palette{grid-column:2;grid-row:2;align-self:end}.builder-tools{grid-column:2;grid-row:3}.builder-game .game-bottom{grid-column:2;grid-row:4}.builder-status{display:none}.builder-heading h1{font-size:18px}.builder-metrics strong{font-size:17px}}@media(prefers-reduced-motion:reduce){.builder-preview-overlay.departing{animation-duration:.01s}}

.builder-directions{display:flex;gap:5px}.builder-directions button{width:38px;padding:4px;font-size:22px;touch-action:manipulation}.builder-preview-overlay{padding:0;gap:0;border:0;background:#211c18;overflow:hidden}.builder-preview-overlay>span{position:absolute;left:8px;top:7px;z-index:2;background:#181514e6;padding:4px 6px;border-radius:4px;max-width:70%}.builder-preview-overlay>strong{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:#181514dd;padding:3px 8px;border-radius:5px}.builder-preview-close{z-index:3}.builder-reference-grid{display:grid;width:100%;height:100%;grid-template-columns:repeat(22,minmax(0,1fr));grid-template-rows:repeat(22,minmax(0,1fr));gap:1px;padding:5px;border:2px solid #ad8d6b;box-sizing:border-box;border-radius:12px}.builder-reference-grid i{display:block}.builder-reference-grid .occupied,.builder-grid .occupied{border-radius:0}.builder-preview-overlay .builder-reference-grid{flex:1;min-height:0}

.builder-palette{margin-top:12px;position:relative;z-index:1;flex-shrink:0}.builder-grid-frame{flex-shrink:0}.builder-directions{display:grid;grid-template-columns:42px 42px 42px;grid-template-rows:38px 38px 38px;gap:4px}.builder-control-up{grid-column:2;grid-row:1}.builder-control-left{grid-column:1;grid-row:2}.builder-control-rotate{grid-column:2;grid-row:2}.builder-control-right{grid-column:3;grid-row:2}.builder-control-down{grid-column:2;grid-row:3}.builder-directions button{width:42px;min-height:38px;height:38px}.builder-tools{align-items:center}.builder-tools>button{max-width:100px}.builder-preview-close{color:#fff}

.builder-cell.selected{outline:2px solid #fff;outline-offset:-2px;box-shadow:inset 0 0 2px #fff}

.builder-palette{width:min(100%,420px);touch-action:none;cursor:grab;-webkit-overflow-scrolling:touch}.builder-palette button{flex:0 0 72px;touch-action:none}.builder-palette:active{cursor:grabbing}

body.play-screen-locked:has(.builder-game){overflow:hidden;overscroll-behavior:none;touch-action:none}body.play-screen-locked:has(.builder-game) #main{overflow:hidden;overscroll-behavior:none}.builder-game{overflow:hidden;touch-action:none}.builder-palette{overflow-x:auto;overflow-y:hidden;overscroll-behavior:none;scroll-snap-type:none;touch-action:none}.builder-palette button{box-sizing:border-box;flex:0 0 72px}

.builder-metrics{flex-wrap:nowrap;gap:6px;font-size:12px}.builder-metrics span{flex-direction:row;align-items:center;gap:5px;white-space:nowrap;min-width:0}.builder-metrics strong{font-size:15px;line-height:1;white-space:nowrap}.builder-preview-icon{width:34px;height:40px;flex-basis:34px;padding:4px}.builder-preview-icon .builder-mini{width:23px}.builder-metrics span:last-child{margin-left:auto}

.builder-tools{display:grid;grid-template-columns:36px 134px 90px;align-items:center;gap:10px}.builder-undo{width:36px;padding:4px!important;font-size:22px!important}.builder-placement{display:grid;grid-template-rows:38px 38px;gap:4px;align-self:center}.builder-placement button{height:38px;min-height:38px;padding:5px 8px;font-size:13px}

.builder-heading{width:var(--builder-width,300px);max-width:100%;justify-content:flex-start;gap:10px;white-space:nowrap}.builder-heading h1{font-size:20px}.builder-heading>.tag{margin-left:auto}.builder-metrics{justify-content:space-between;gap:20px;flex-wrap:nowrap}.builder-metrics span{flex:0 0 auto;white-space:nowrap}.builder-metrics span:first-child{margin-right:auto}.builder-metrics span:last-child{margin-left:auto}.builder-preview-icon{flex-shrink:0}@keyframes builder-preview-depart{to{transform:translateY(-105px) scale(.08);opacity:0}}

.builder-preview-icon,.builder-preview-close{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.builder-preview-close{width:44px;height:44px;min-width:44px;min-height:44px;top:5px;right:5px;font-size:28px;z-index:8}.builder-preview-icon{width:44px;height:44px;min-width:44px;min-height:44px;flex-basis:44px}@media(orientation:landscape) and (max-height:550px){.builder-heading{width:100%;gap:12px}.builder-preview-icon{width:48px;height:48px;min-width:48px;min-height:48px;flex-basis:48px}.builder-preview-close{width:48px;height:48px;min-width:48px;min-height:48px}}

.builder-preview-open .builder-grid,.builder-preview-open .builder-palette,.builder-preview-open .builder-tools{pointer-events:none}.builder-preview-overlay{touch-action:none}.builder-preview-icon,.builder-preview-close{touch-action:none}

/* Center the board between the statistics and the lower shape palette. */
.builder-workspace>.builder-grid-frame{margin-block:auto;transform:translateY(6px)}