/* Responsive modal layout: compact the content before using a visual fallback scale. */ :root{--inventory-cell-size:88px;--inventory-cell-gap:6px;--inventory-cell-icon-size:52px;--inventory-cell-count-size:14px;--inventory-cell-durability-height:8px;} .resourceIcon{display:inline-block;width:30px;height:30px;object-fit:contain;vertical-align:middle;flex:none;} #resources{display:flex;align-items:center;justify-content:center;gap:10px;width:min(820px,calc(100vw - 28px));min-width:0;flex:0 1 auto;padding:7px 12px;box-sizing:border-box;overflow:hidden;} #res,#resSecondary{display:flex;align-items:center;flex:0 0 auto;min-width:0;gap:5px;} #res span,#resSecondary span{display:flex;align-items:center;justify-content:center;min-width:0;white-space:nowrap;overflow:visible;} #res b,#resSecondary b{min-width:0;margin:0;overflow:visible;text-overflow:clip;white-space:nowrap;color:#f1e7d3;font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1;font-weight:900;} #res .resourceStat,#resSecondary .resourceStat{overflow:visible;gap:0;} #res .resourceIconStack,#resSecondary .resourceIconStack{position:relative;display:grid;place-items:center;width:52px;height:52px;overflow:visible;line-height:0;} #res .resourceIconStack .resourceIcon,#resSecondary .resourceIconStack .resourceIcon{width:52px;height:52px;vertical-align:middle;} #res .resourceIconStack>b,#resSecondary .resourceIconStack>b{position:absolute;left:50%;bottom:1px;z-index:1;transform:translateX(-50%);min-width:max-content;color:#f1e7d3;font-size:14px;line-height:1;font-weight:900;letter-spacing:-.02em;text-align:center;pointer-events:none;text-shadow:0 2px 2px #000b,0 0 3px #0008;} #resSecondary{padding-left:10px;border-left:1px solid #34414388;} #resSecondary:empty{display:none;} .chip .resourceIcon,.badge .resourceIcon,.loadRow>b .resourceIcon,.furnaceStat .resourceIcon,.lootIcon .resourceIcon{width:30px;height:30px;vertical-align:middle;} .badge{min-height:34px;height:auto;} .lootGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0;} .lootRow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 10px;border:1px solid #334041;border-radius:10px;background:#121819;min-width:0;} .lootRow b{display:block;font-size:11px;line-height:1.15;white-space:normal;overflow:visible;text-overflow:clip;} .lootRow small{display:block;margin-top:2px;color:#7f8e8b;font-size:9px;} .lootRow>strong{font-size:12px;color:#efe5d2;white-space:nowrap;} .lootEmpty{grid-column:1/-1;padding:18px;border:1px solid #334041;border-radius:10px;background:#121819;color:#9aa8a4;text-align:center;font-size:11px;} .lootTotal{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0;padding:10px 12px;border-radius:10px;background:#111718;border:1px solid #354243;color:#9aa8a4;font-size:10px;text-transform:uppercase;letter-spacing:.1em;} .lootTotal b{color:#eee3cf;font-size:14px;letter-spacing:0;text-transform:none;} .inventoryTransferFx{position:fixed;z-index:300;left:0;top:0;width:36px;height:36px;display:grid;place-items:center;pointer-events:none;transition:transform .32s cubic-bezier(.2,.82,.26,1),opacity .32s ease;filter:drop-shadow(0 4px 5px #000b);} /* Inventory icons are presentation only. Let the slot own the drag gesture so Chromium cannot export an icon URL when the pointer crosses the address bar. */ img.resourceIcon{pointer-events:none;user-select:none;-webkit-user-drag:none;user-drag:none;} body.inventoryDragActive #game, body.inventoryDragActive #game *, body.inventoryDragActive #modal, body.inventoryDragActive #modal *, body.inventoryDragActive #toolbar, body.inventoryDragActive #toolbar *{cursor:none !important;} .inventoryPointerDragGhost{position:fixed;z-index:1000;display:grid;place-items:center;box-sizing:border-box;min-width:58px;min-height:58px;padding:3px;border:1px solid #d3924b;border-radius:8px;background:#101718ee;box-shadow:0 7px 20px #000b;pointer-events:none;transform:translate(-50%,-50%);} .inventoryPointerDragGhost>span{display:grid;place-items:center;min-width:0;min-height:0;pointer-events:none;} .inventoryPointerDragGhost .resourceIcon{pointer-events:none;} .inventoryPointerDragGhost>b{position:absolute;right:4px;bottom:3px;color:#fff2d9;font-size:13px;line-height:1;text-shadow:0 2px 3px #000;pointer-events:none;} body.inventoryDragActive .inventoryPointerDragSource{opacity:.3 !important;} .inventoryPointerDropTarget{border-color:#e0a25e !important;box-shadow:0 0 0 2px #d3924b66,inset 0 0 0 1px #f0bc7755 !important;} .inventoryTransferFx .resourceIcon{width:36px;height:36px;} #modal .inventorySlot.inventorySourcePending{opacity:.14;filter:saturate(.45);pointer-events:none;} #modal .panel.inventoryWide{width:min(1160px,calc(100vw - 20px));} #modal .raidInventoryLayout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,1fr);gap:12px;margin:12px 0 8px;min-width:0;} #modal .inventoryPane{min-width:0;padding:10px;border:1px solid #354445;border-radius:12px;background:#101718;} #modal .inventoryPaneHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;color:#e9e1d0;font-size:13px;letter-spacing:.08em;} #modal .inventoryPaneHead strong{color:#d9954e;font-size:14px;letter-spacing:0;font-variant-numeric:tabular-nums;} #modal .inventorySlots{display:grid;grid-template-columns:repeat(var(--inventory-columns),minmax(0,1fr));gap:5px;min-width:0;} #modal .inventorySlot{position:relative;display:grid;place-items:center;aspect-ratio:1;border:1px solid #344344;border-radius:7px;background:#182122;color:#eee3cf;padding:3px;min-width:0;cursor:pointer;overflow:hidden;} #modal .inventorySlot:hover{border-color:#d3924b;background:#253032;transform:translateY(-1px);} #modal .inventorySlot.empty{cursor:default;background:#0d1213;border-style:dashed;opacity:.72;} #modal .inventorySlot.empty:hover{border-color:#344344;background:#0d1213;transform:none;} #modal .inventorySlot>span{display:grid;place-items:center;min-width:0;min-height:0;} #modal .inventorySlot .resourceIcon{width:clamp(25px,3.2vw,42px);height:clamp(25px,3.2vw,42px);} #modal .inventorySlot>b{position:absolute;right:4px;bottom:3px;color:#fff2d9;font-size:clamp(10px,1.1vw,14px);line-height:1;font-weight:900;text-shadow:0 2px 3px #000,0 0 3px #000;pointer-events:none;} .itemDurability{position:absolute;left:4px;right:4px;bottom:3px;display:block;pointer-events:none;text-align:center;z-index:2;} #modal span.itemDurability{display:block;padding:0;gap:0;line-height:0;min-width:0;min-height:0;} .itemDurability i{position:relative;display:block;width:100%;height:8px;border-radius:3px;background:#bd4d47;box-shadow:0 1px 2px #000a,inset 0 1px #e47b6f;overflow:hidden;} .itemDurability i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--durability,0%);background:#73c48a;box-shadow:inset 0 1px #b0e3ae;} .itemDurability.broken i::after{width:0;} #toolbar button{position:relative;} #toolbar .itemDurability{left:8px;right:8px;bottom:5px;} #toolbar span.itemDurability{display:block;padding:0;gap:0;line-height:0;} #toolbar span.itemDurability i{display:block;width:100%;height:8px;flex:none;} #modal .itemBroken{border-color:#a64d48!important;background:#261a1b!important;filter:saturate(.55);} #modal .inventorySlot.gearSlot{border-color:#b77540;background:#211b17;} #modal .inventorySlot.gearSlot:hover{border-color:#e8ba77;} #modal .inventorySlot.toolbarSource{cursor:grab;} #modal .inventorySlot.toolbarSource:active{cursor:grabbing;} #modal .beltEditor{margin-top:10px;padding:10px;border:1px solid #354445;border-radius:12px;background:#101718;} #modal .beltEditor .inventoryPaneHead{margin-bottom:8px;} #modal .toolbarEditorSlots{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;} #modal .toolbarEditSlot{position:relative;display:grid;place-items:center;aspect-ratio:1;border:1px solid #344344;border-radius:8px;background:#182122;color:#eee3cf;padding:4px;cursor:pointer;overflow:hidden;} #modal .toolbarEditSlot[draggable="true"]{cursor:grab;} #modal .toolbarEditSlot[draggable="true"]:active{cursor:grabbing;} #modal .toolbarEditSlot:hover{border-color:#d3924b;background:#253032;transform:translateY(-1px);} #modal .toolbarEditSlot .resourceIcon{width:clamp(25px,3.2vw,42px);height:clamp(25px,3.2vw,42px);} #modal .toolbarEditSlot>b{position:absolute;right:4px;bottom:3px;color:#fff2d9;font-size:clamp(9px,1vw,13px);line-height:1;text-shadow:0 2px 3px #000,0 0 3px #000;pointer-events:none;} #modal .toolbarEditSlot kbd{position:absolute;left:4px;top:3px;color:#aebbb6;font-size:10px;line-height:1;pointer-events:none;} .codeLockPanel{width:min(330px,94vw)!important;padding:22px!important;border-radius:22px!important}.codeLockShell{text-align:center}.codeLockShell h2{font-size:24px!important}.codeLockFace{width:226px;margin:16px auto 10px;padding:18px;border:2px solid #4a4d49;border-radius:19px;background:linear-gradient(155deg,#2b2e2b,#171a19 62%,#101312);box-shadow:inset 0 0 0 3px #0b0e0e,0 15px 32px #0009}.codeDigits{display:block;margin:0 0 14px;padding:10px 8px;border:1px solid #4b544e;border-radius:8px;background:#08100d;color:#8ff0a9;font:900 28px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.32em;text-indent:.32em;text-shadow:0 0 9px #38df705e}.codeKeypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.codeKey{aspect-ratio:1;padding:0;border-radius:8px;background:#303532;border-color:#565e58;font-size:20px;box-shadow:inset 0 -3px 0 #171a18}.codeKey:hover{background:#3b423d}.codeKey.confirm{color:#9be5af;border-color:#477a55}.codeKey.clear{color:#efa69c;border-color:#805048}.codeLeave{width:226px;margin:7px auto 0!important}.codeLockFace>.doorLockLed{margin:0 auto 10px} @media(max-width:760px){ #resources{width:calc(100vw - 16px);max-width:calc(100vw - 16px);min-width:0;flex:0 1 auto;} #res{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;} #res span{flex-direction:column;gap:1px;overflow:visible;} #res .resourceIconStack{width:38px;height:38px;} #res .resourceIconStack .resourceIcon{width:38px;height:38px;} #res .resourceIconStack>b{font-size:10px;text-shadow:0 1px 2px #000b,0 0 2px #0008;} #resSecondary{gap:11px;min-height:24px;margin-top:3px;padding-top:3px;} #resSecondary span{gap:3px;font-size:9px;} #resSecondary .resourceIcon{width:24px;height:24px;} #resSecondary b{font-size:10px;} } .doorLockLed{width:10px;height:10px;border-radius:50%;background:#d34a3e;box-shadow:0 0 10px #d34a3e88;} #modal{ padding:clamp(10px,2vw,24px); overflow:hidden; } #modal .panel{ min-height:0; max-height:min(780px,calc(100vh - 24px)); overflow:hidden; } @supports (height:100dvh){ #modal .panel{max-height:min(780px,calc(100dvh - 24px));} } #modal .panel.wide{width:min(1040px,calc(100vw - 20px));} #modal .panel.fit-scale{ max-height:none; overflow:visible; transform:scale(var(--ui-fit-scale,1)); transform-origin:center center; } #modal .panel>*{min-width:0;} #modal .panel>.close{z-index:3;} #modal .panel h2{font-size:clamp(18px,3vh,25px);} #modal .panel p{margin:7px 0 12px;} #modal .panel>button:not(.close){margin-top:5px;} #modal .craftGrid{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; margin:10px 0; } #modal .craftCard{display:flex;flex-direction:column;padding:14px;} #modal .craftCard>.recipeLayout{width:100%;height:100%;flex:1;} #modal .craftCard>.recipeLayout>.recipeAction{margin-top:auto;} #modal .recipeLayout{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;column-gap:14px;row-gap:4px;min-width:0;} #modal .recipeIcon{display:grid;place-items:center;width:90px;height:90px;grid-row:1 / span 2;overflow:hidden;} #modal .recipeIcon .resourceIcon{width:90px;height:90px;} #modal .recipeIconEmoji{font-size:76px;line-height:1;} #modal .recipeInfo{min-width:0;align-self:center;} #modal .recipeInfo h3{margin:0;font-size:clamp(13px,1.8vh,16px);line-height:1.18;} #modal .recipeDamage{margin:7px 0 0 !important;font-size:11px;line-height:1.35;color:#b9c6c3;} #modal .recipeLayout>.costLabel,#modal .recipeLayout>.costRow,#modal .recipeLayout>.craftQuantity,#modal .recipeLayout>.recipeAction{grid-column:1/-1;} #modal .recipeLayout>.costLabel{margin-top:3px;} #modal .recipeLayout>.costRow{margin:0;} #modal .craftQuantity{margin-top:2px;} #modal .craftQuantityHead{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:1px 0 4px;color:#82918e;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;} #modal .craftQuantityHead output{color:#f0e6d3;font-size:13px;letter-spacing:0;text-transform:none;} #modal .craftRange,#modal .loadRange{-webkit-appearance:none;appearance:none;display:block;width:100%;height:15px;margin:7px 0 3px;padding:0;border:0;border-radius:999px;background:linear-gradient(90deg,#d3924b 0%,#d3924b var(--range-progress,0%),#2b3738 var(--range-progress,0%),#2b3738 100%);accent-color:#d3924b;cursor:pointer;} #modal .craftRange::-webkit-slider-runnable-track,#modal .loadRange::-webkit-slider-runnable-track{height:15px;border:0;border-radius:999px;background:transparent;} #modal .craftRange::-webkit-slider-thumb,#modal .loadRange::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:1px;border:0;border-radius:50%;opacity:0;} #modal .craftRange::-moz-range-track,#modal .loadRange::-moz-range-track{height:15px;border:0;border-radius:999px;background:transparent;} #modal .craftRange::-moz-range-progress,#modal .loadRange::-moz-range-progress{height:15px;border:0;border-radius:999px;background:transparent;} #modal .craftRange::-moz-range-thumb,#modal .loadRange::-moz-range-thumb{width:1px;height:1px;border:0;border-radius:50%;opacity:0;} #modal .craftRange:disabled,#modal .loadRange:disabled{cursor:not-allowed;opacity:.45;} #modal .craftButton,#modal .recipeAction{width:100%;margin-top:6px;padding:8px 10px;} #modal .costRow,#modal .bankRow{gap:4px;margin:5px 0 7px;} #modal .chip{padding:3px 7px;font-size:9px;} #modal .craftStock{margin:11px 0 4px;padding:10px 12px;border:1px solid #344344;border-radius:12px;background:#111718;} #modal .craftStockHead{display:flex;align-items:center;justify-content:space-between;gap:10px;} #modal .craftStockHead>div{display:flex;align-items:baseline;gap:8px;min-width:0;} #modal .craftStockKicker{color:#d19458;font-size:10px;font-weight:900;letter-spacing:.14em;} #modal .craftStockHead strong{color:#e8dfcd;font-size:12px;} #modal .craftStockHead small{color:#82918e;font-size:9px;white-space:nowrap;} #modal .craftStockGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px;} #modal .craftStockItem{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:7px;min-width:0;padding:8px 7px;border:1px solid #2d3a3b;border-radius:9px;background:#151c1d;} #modal .craftStockItem>.resourceIcon{grid-row:1 / span 2;width:36px;height:36px;} #modal .craftStockItem>span{display:flex;flex-direction:column;min-width:0;} #modal .craftStockItem b{color:#dce3df;font-size:11px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #modal .craftStockItem small{color:#7f8e8b;font-size:8px;line-height:1.1;text-transform:uppercase;letter-spacing:.06em;} #modal .craftStockItem>strong{grid-column:2;color:#f0e6d3;font-size:16px;line-height:1.1;font-variant-numeric:tabular-nums;} #modal .targetGrid{gap:9px;margin:10px 0;} #modal .targetCard{padding:11px;} #modal .housePreview{position:relative;height:clamp(96px,16vh,156px);margin:8px 0 6px;} #modal .housePreview canvas, #modal .furnaceViz canvas{position:static;inset:auto;display:block;width:100%;height:100%;touch-action:none;} #modal .targetCard p{margin:5px 0 8px;font-size:11px;} #modal .targetCard button{margin-top:8px;padding:8px 10px;} #modal .loadRow{display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-rows:auto auto;align-items:center;gap:3px 10px;padding:9px 0;} #modal .loadRow .loadLabel{display:flex;align-items:center;gap:7px;min-width:0;} #modal .loadRow .loadLabel b{min-width:0;display:flex;align-items:center;gap:4px;} #modal .loadRow .loadLabel span{white-space:nowrap;} #modal .loadRow output{grid-column:2;grid-row:1;color:#f0e6d3;font-size:16px;font-weight:850;text-align:right;font-variant-numeric:tabular-nums;} #modal .loadRow .loadRange{grid-column:1/-1;grid-row:2;} #modal .intelBox{margin:9px 0;padding:9px;} #modal .reportGrid{margin:10px 0;} #modal .reportGrid>div{padding:10px;} #modal .qaRow{padding:7px 9px;margin:4px 0;} #modal .furnaceShell{gap:12px;} #modal .furnaceViz{padding:10px;} #modal .furnaceViz canvas{height:min(34vh,320px);} #modal .furnaceStat{padding:9px;} #modal .furnaceStat b{font-size:16px;} #modal .furnaceBtns{margin-top:8px;} .furnaceVizHead,.furnaceCardHead,.furnaceValueLine{display:flex;align-items:center;justify-content:space-between;gap:10px;} .furnaceVizHead{min-height:31px;margin:0 3px 8px;} .furnaceVizHead strong{display:block;margin-top:3px;color:#eee3cf;font-size:13px;letter-spacing:.04em;} .furnaceKicker,.furnaceCardHead span{color:#82918e;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;} .furnaceRate{text-align:right;line-height:1;} .furnaceRate b{display:block;color:#efd6ac;font-size:18px;} .furnaceRate small{display:block;margin-top:3px;color:#82918e;font-size:9px;} .furnaceCurrent{padding:10px 3px 1px;} .furnaceValueLine{min-height:22px;color:#dce3df;font-size:10px;font-weight:800;} .furnaceValueLine>b,.furnaceCardHead>b{color:#f0e6d3;font-size:16px;} .furnaceProgressBar,.furnaceMiniBar{height:8px;margin-top:7px;border-radius:20px;background:#0b1011;border:1px solid #2e3a3b;overflow:hidden;} .furnaceProgressBar i,.furnaceMiniBar i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b06c3d,#f0bb69);transition:width .16s ease;} .furnaceCurrent small{display:block;margin-top:6px;color:#96a39f;font-size:10px;} .furnaceCard{padding:10px;border-radius:11px;border:1px solid #334142;background:#121819;} .furnaceCardHead{margin-bottom:7px;} .furnaceCardHead>span:last-child{font-size:9px;letter-spacing:.03em;color:#96a39f;} .furnaceQueueRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px;margin-top:8px;color:#dce3df;font-size:10px;} .furnaceQueueRow>span{display:flex;align-items:center;gap:5px;min-width:0;} .furnaceQueueRow .resourceIcon,.furnaceOutputRow .resourceIcon{width:24px;height:24px;} .furnaceQueueRow>strong{color:#f0e6d3;font-size:14px;} .furnaceQueueRow .furnaceMiniBar{grid-column:1/-1;margin-top:1px;} .furnaceQueueRow small{grid-column:1/-1;color:#7f8e8b;font-size:9px;} .furnaceQueueRow small i{color:#c9d4d0;font-style:normal;} .furnaceFuelState{max-width:65%;color:#96a39f;font-size:9px;text-align:right;} .furnaceOutputRow{display:flex;align-items:center;gap:6px;padding:4px 0;color:#c9d4d0;font-size:10px;border-top:1px solid #293536;} .furnaceOutputRow:first-of-type{border-top:0;} .furnaceOutputRow>b{margin-left:auto;color:#f0e6d3;font-size:14px;} #modal .panel.compact{padding:18px;} #modal .panel.compact .craftGrid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:7px;margin:7px 0;} #modal .panel.compact .craftCard{padding:9px;} #modal .panel.compact .recipeLayout{grid-template-columns:78px minmax(0,1fr);column-gap:10px;} #modal .panel.compact .recipeIcon{width:78px;height:78px;} #modal .panel.compact .recipeIcon .resourceIcon{width:78px;height:78px;} #modal .panel.compact .recipeIconEmoji{font-size:65px;} #modal .panel.compact .recipeDamage{margin-top:4px !important;font-size:10px;} #modal .panel.compact .craftButton,#modal .panel.compact .recipeAction{margin-top:5px;padding:6px 8px;font-size:10px;} #modal .panel.compact .housePreview{height:clamp(82px,13vh,124px);} #modal .panel.compact .furnaceViz canvas{height:min(27vh,235px);} #modal .panel.compact .furnaceStat{padding:7px;} #modal .panel.compact .qaRow{padding:5px 7px;margin:3px 0;} #modal .panel.tight{padding:13px;} #modal .panel.tight h2{font-size:18px;} #modal .panel.tight .craftGrid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:5px;margin:5px 0;} #modal .panel.tight .craftCard{padding:7px;} #modal .panel.tight .recipeLayout{grid-template-columns:68px minmax(0,1fr);column-gap:8px;} #modal .panel.tight .recipeIcon{width:68px;height:68px;} #modal .panel.tight .recipeIcon .resourceIcon{width:68px;height:68px;} #modal .panel.tight .recipeIconEmoji{font-size:56px;} #modal .panel.tight .recipeInfo h3{font-size:13px;} #modal .panel.tight .recipeDamage{font-size:9px;line-height:1.2;margin-top:3px !important;} #modal .panel.tight .craftButton,#modal .panel.tight .recipeAction{padding:5px 7px;margin-top:3px;font-size:9px;} #modal .panel.tight .chip{padding:2px 5px;font-size:8px;} #modal .panel.tight .craftStock{padding:7px 8px;margin:5px 0 2px;} #modal .panel.tight .craftStockGrid{gap:3px;margin-top:5px;} #modal .panel.tight .craftStockItem{grid-template-columns:25px minmax(0,1fr);padding:4px 3px;column-gap:4px;} #modal .panel.tight .craftStockItem>.resourceIcon{width:25px;height:25px;} #modal .panel.tight .craftStockItem b{font-size:8px;} #modal .panel.tight .craftStockItem small{font-size:7px;} #modal .panel.tight .craftStockItem>strong{font-size:12px;} #modal .panel.tight .housePreview{height:clamp(68px,11vh,100px);} #modal .panel.tight .loadRow{padding:4px 0;} #modal .panel.tight .intelBox{margin:6px 0;padding:6px;} #modal .panel.tight .furnaceShell{gap:7px;} #modal .panel.tight .furnaceViz{padding:6px;} #modal .panel.tight .furnaceViz canvas{height:min(21vh,180px);} #modal .panel.tight .furnaceStat{padding:5px;} #modal .panel.tight .furnaceStat small{margin-top:2px;font-size:9px;} #modal .panel.tight .qaRow{grid-template-columns:42px 1fr auto;gap:6px;padding:3px 5px;margin:2px 0;} #modal .panel.tight .reportGrid>div{padding:7px;} /* Raid completion is a reward readout, not a developer report. Keep the player-facing hierarchy to net result, earned, spent, and the actual loot icons; generator economics stay in telemetry/QA rather than this modal. */ #modal .panel.raidResultPanel{width:min(620px,calc(100vw - 28px));padding:30px;text-align:center;background:radial-gradient(circle at 50% 0%,#263a34 0%,#192423 44%,#111819 100%);} #modal .raidResult{display:flex;flex-direction:column;align-items:center;} #modal .raidResultMark{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 7px;border:1px solid #8f6e43;border-radius:50%;color:#f0bd72;font-size:30px;line-height:1;background:#2b271e;box-shadow:0 0 24px #d2944d36,inset 0 0 0 4px #161d1a;} #modal .raidResult.failure .raidResultMark{border-color:#a4554e;color:#ed9b8e;background:#2b1c1d;box-shadow:0 0 20px #b84b4630,inset 0 0 0 4px #161718;} #modal .raidResult .eyebrow{margin-top:2px;} #modal .raidResult h2{margin:3px 0 14px;font-size:clamp(28px,5vh,42px);letter-spacing:.08em;line-height:1;} #modal .raidResultNet{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:210px;margin:0 auto 16px;padding:12px 24px 14px;border:1px solid #54755e;border-radius:16px;background:linear-gradient(155deg,#1d3329,#15221f);box-shadow:0 12px 28px #0005,inset 0 1px #b5d39922;} #modal .raidResultNet.negative{border-color:#774542;background:linear-gradient(155deg,#342322,#21191a);} #modal .raidResultNet span,#modal .raidResultKicker{color:#8da39a;font-size:10px;font-weight:900;letter-spacing:.18em;} #modal .raidResultNet strong{margin-top:3px;color:#b6e19a;font-size:clamp(30px,5vw,46px);line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 3px 12px #0008;} #modal .raidResultNet.negative strong{color:#efaaa0;} #modal .raidResultMetrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin:0 0 18px;border-top:1px solid #3a4b48;border-bottom:1px solid #3a4b48;} #modal .raidResultMetrics>div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 8px;} #modal .raidResultMetrics>div+div{border-left:1px solid #3a4b48;} #modal .raidResultMetrics strong{color:#f0e6d3;font-size:clamp(19px,3vw,27px);line-height:1;font-variant-numeric:tabular-nums;} #modal .raidResultMetrics span{color:#879791;font-size:9px;font-weight:900;letter-spacing:.13em;} #modal .raidResultLoot{width:100%;margin:0 0 18px;text-align:left;} #modal .raidResultLootGrid{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;} #modal .raidResultLootItem{display:grid;place-items:center;position:relative;width:58px;height:58px;border:1px solid #3b4d4a;border-radius:11px;background:#111a19;box-shadow:inset 0 1px #d5e3d022;} #modal .raidResultLootItem .resourceIcon{width:42px;height:42px;object-fit:contain;} #modal .raidResultLootItem b{position:absolute;right:4px;bottom:3px;color:#fff0d5;font-size:11px;line-height:1;text-shadow:0 2px 3px #000;} #modal .raidResultHome{min-width:180px;margin-top:0!important;padding:11px 18px!important;font-size:14px!important;letter-spacing:.08em;} #modal .panel.ultra{padding:9px;} #modal .panel.ultra .craftGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;} #modal .panel.ultra .craftCard{padding:5px;} #modal .panel.ultra .recipeLayout{grid-template-columns:58px minmax(0,1fr);column-gap:6px;} #modal .panel.ultra .recipeIcon{width:58px;height:58px;} #modal .panel.ultra .recipeIcon .resourceIcon{width:58px;height:58px;} #modal .panel.ultra .recipeIconEmoji{font-size:48px;} #modal .panel.ultra .recipeInfo h3{font-size:11px;} #modal .panel.ultra .recipeDamage{font-size:8px;margin-top:2px !important;} #modal .panel.ultra .craftButton,#modal .panel.ultra .recipeAction{padding:4px 3px;margin-top:2px;font-size:8px;} #modal .panel.ultra .craftQuantityHead{font-size:8px;} #modal .panel.ultra .craftQuantityHead output{font-size:10px;} #modal .panel.ultra .craftStock{padding:5px 6px;margin:3px 0 1px;} #modal .panel.ultra .craftStockGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:3px;} #modal .panel.ultra .craftStockItem{grid-template-columns:20px minmax(0,1fr);padding:3px 2px;column-gap:3px;} #modal .panel.ultra .craftStockItem>.resourceIcon{width:20px;height:20px;} #modal .panel.ultra .craftStockItem b{font-size:7px;} #modal .panel.ultra .craftStockItem small{font-size:6px;} #modal .panel.ultra .craftStockItem>strong{font-size:10px;} #modal .panel.ultra .housePreview{height:70px;} #modal .panel.ultra .furnaceViz canvas{height:130px;} #modal.show:has(.craftGrid) .craftGrid{grid-template-columns:repeat(3,minmax(0,1fr));} /* Ten craft recipes now share the same decision surface. Four desktop columns keep the modal inside the viewport without shrinking the whole panel; three narrow columns preserve readable bow/arrow cards on mobile. */ #modal.show:has(.craftGrid) .craftGrid{grid-template-columns:repeat(4,minmax(0,1fr));} @media(max-width:760px){ #modal.show:has(.craftGrid){padding-top:calc(var(--hud-resources-bottom,150px) + 8px);} #modal.show:has(.craftGrid) .craftGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:5px 0;} #modal.show:has(.craftGrid) .craftCard{padding:4px;} #modal.show:has(.craftGrid) .recipeLayout{grid-template-columns:50px minmax(0,1fr);column-gap:4px;} #modal.show:has(.craftGrid) .recipeIcon{width:50px;height:50px;} #modal.show:has(.craftGrid) .recipeIcon .resourceIcon{width:50px;height:50px;} #modal.show:has(.craftGrid) .recipeIconEmoji{font-size:43px;} #modal.show:has(.craftGrid) .recipeInfo h3{font-size:10px;} #modal.show:has(.craftGrid) .recipeDamage{font-size:9px;margin-top:3px !important;} #modal.show:has(.craftGrid) .chip{padding:1px 3px;font-size:8px;} #modal.show:has(.craftGrid) .craftRange{height:10px;margin:4px 0 1px;} #modal.show:has(.craftGrid) .craftRange::-webkit-slider-runnable-track{height:10px;} #modal.show:has(.craftGrid) .craftRange::-moz-range-track,#modal.show:has(.craftGrid) .craftRange::-moz-range-progress{height:10px;} #modal.show:has(.craftGrid) .craftButton,#modal.show:has(.craftGrid) .recipeAction{padding:4px 3px;margin-top:2px;font-size:8px;} } /* Research table: a compact dependency tree, not a second inventory list. */ #modal .panel.researchWide{width:min(980px,calc(100vw - 20px));} #modal .researchHeader{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:10px 0 12px;padding:10px 14px;border:1px solid #3b4c4d;border-radius:12px;background:linear-gradient(115deg,#172526,#11191a);} #modal .researchFragmentCount,#modal .researchProgress{display:flex;align-items:center;gap:10px;min-width:0;} #modal .researchBigIcon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#20383b;border:1px solid #587477;box-shadow:0 5px 16px #0004;} #modal .researchBigIcon .resourceIcon{width:39px;height:39px;} #modal .researchFragmentCount strong{font-size:24px;color:#f0e6d3;font-variant-numeric:tabular-nums;} #modal .researchScrapCount .researchBigIcon{background:#293336;border-color:#667479;} #modal .researchProgress{margin-left:auto;padding-left:18px;border-left:1px solid #3b4c4d;} #modal .researchProgress strong{font-size:20px;color:#d9954e;font-variant-numeric:tabular-nums;} #modal .researchProgress span{color:#aab7b1;font-size:12px;text-transform:uppercase;letter-spacing:.1em;} #modal .researchTree{display:grid;gap:8px;margin:8px 0 10px;padding:4px 0;} #modal .researchTier{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:stretch;} #modal .researchTier:not(:first-child)::before{content:"";position:absolute;left:20px;top:-8px;width:2px;height:8px;background:#486365;box-shadow:0 0 8px #79a4a050;} #modal .researchTierMarker{display:grid;place-items:center;align-self:stretch;min-height:120px;color:#b7c8c0;font-size:13px;font-weight:900;letter-spacing:.1em;border-right:1px solid #3b4c4d;} #modal .researchTierNodes{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;} #modal .researchTierNodes::before{content:"";position:absolute;left:-10px;right:0;top:50%;height:2px;background:linear-gradient(90deg,#486365,#304648);opacity:.8;} #modal .researchNode{position:relative;z-index:1;display:flex;align-items:center;box-sizing:border-box;min-width:0;min-height:120px;padding:12px;border:1px solid #344849;border-radius:11px;background:linear-gradient(145deg,#182526,#111819);color:#e9e1d0;text-align:left;cursor:pointer;transition:border-color .16s ease,transform .16s ease,background .16s ease,box-shadow .16s ease;} #modal .researchNode:hover{transform:translateY(-2px);border-color:#d3924b;background:#243335;box-shadow:0 8px 15px #0004;} #modal .researchNode.locked{border-color:#2c3a3b;background:#131a1b;color:#82918e;} #modal .researchNode.learned{border-color:#5c8e75;background:linear-gradient(145deg,#1b3029,#14201e);} #modal .researchNode.ready{border-color:#b87743;box-shadow:0 0 0 1px #b8774330,0 7px 18px #0004;} #modal .researchNodeTop{position:absolute;top:9px;left:12px;right:12px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0;pointer-events:none;} #modal .researchTier{font-size:10px;} #modal .researchNodeTop .researchTier{display:inline-flex;min-height:0;border:0;color:#bf9061;font-size:11px;letter-spacing:.1em;} #modal .researchStatus{color:#d9954e;font-size:11px;font-weight:900;letter-spacing:.09em;white-space:nowrap;} #modal .researchNode.locked .researchStatus{color:#6e7e7b;} #modal .researchNodeMain{display:grid;grid-template-columns:68px minmax(0,1fr);align-items:center;gap:11px;width:100%;min-width:0;min-height:94px;} #modal .researchIcon{display:grid;place-items:center;width:68px;height:68px;border-radius:9px;background:#0e1516;border:1px solid #334344;} #modal .researchIcon .resourceIcon{width:60px;height:60px;} #modal .researchNodeCopy{display:grid;align-content:center;gap:3px;min-width:0;} #modal .researchNodeCopy strong{font-size:14px;line-height:1.12;color:#efe5d2;} #modal .researchNode.locked .researchNodeCopy strong{color:#a1aeaa;} #modal .researchCharacteristic{display:grid;gap:2px;min-width:0;max-width:100%;overflow:visible;color:#d2b083;font-size:12px;line-height:1.12;} #modal .researchCharacteristicLine{display:block;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;} #modal .researchStructureLine{color:#c5b28f;font-size:11px;letter-spacing:.01em;} #modal .researchNode.locked .researchCharacteristic{color:#899895;} #modal .researchNode.locked .researchStructureLine{color:#7f8e8b;} #modal .researchCost{display:flex;align-items:center;gap:8px;color:#d8c49d;font-size:12px;font-weight:850;line-height:1;flex-wrap:wrap;} #modal .researchCost>span{display:inline-flex;align-items:center;gap:2px;white-space:nowrap;} #modal .researchCost .resourceIcon{width:20px;height:20px;} #modal .researchRequires{display:flex;align-items:center;gap:2px;margin-top:1px;opacity:.7;} #modal .researchRequires .resourceIcon{width:15px;height:15px;} @media(max-width:760px){ #modal .panel.researchWide{width:min(620px,calc(100vw - 14px));} #modal .researchHeader{margin:7px 0 8px;padding:7px 9px;} #modal .researchBigIcon{width:40px;height:40px;} #modal .researchBigIcon .resourceIcon{width:32px;height:32px;} #modal .researchFragmentCount strong{font-size:20px;} #modal .researchProgress{padding-left:10px;} #modal .researchProgress strong{font-size:17px;} #modal .researchProgress span{font-size:10px;} #modal .researchTier{grid-template-columns:29px minmax(0,1fr);gap:5px;} #modal .researchTier:not(:first-child)::before{left:13px;top:-8px;} #modal .researchTierMarker{min-height:96px;font-size:12px;} #modal .researchTierNodes{gap:4px;} #modal .researchTierNodes::before{left:-5px;} #modal .researchNode{min-height:96px;padding:8px 6px;border-radius:8px;} #modal .researchNodeTop{top:6px;left:6px;right:6px;} #modal .researchStatus{font-size:10px;letter-spacing:.03em;} #modal .researchNodeMain{grid-template-columns:39px minmax(0,1fr);gap:5px;min-height:78px;} #modal .researchIcon{width:39px;height:39px;border-radius:6px;} #modal .researchIcon .resourceIcon{width:35px;height:35px;} #modal .researchNodeCopy{gap:2px;} #modal .researchNodeCopy strong{font-size:11px;line-height:1.05;} #modal .researchCharacteristic{font-size:10px;line-height:1.05;gap:1px;} #modal .researchStructureLine{font-size:9px;} #modal .researchCost{font-size:11px;gap:2px;} #modal .researchCost .resourceIcon{width:15px;height:15px;} #modal .researchRequires .resourceIcon{width:11px;height:11px;} } /* Craft keeps the same live inventory source as gameplay. Reserve the measured HUD band so the active resource panel never covers the Craft title/cards. */ body:has(#modal.show .craftGrid) #topbar{z-index:70;} body:has(#modal.show .craftGrid) #furnaceMini{display:none;} body:has(#modal.show .craftGrid) #modal{align-items:start;padding-top:calc(var(--hud-resources-bottom,160px) + 12px);} body:has(#modal.show .craftGrid) #modal .panel{max-height:calc(100vh - var(--hud-resources-bottom,160px) - 24px);} @supports (height:100dvh){ body:has(#modal.show .craftGrid) #modal .panel{max-height:calc(100dvh - var(--hud-resources-bottom,160px) - 24px);} } /* Keep the live base-resource HUD visible above the furnace modal. The furnace still owns queue/input details, while outputs and current wood stay in the HUD. */ body:has(#modal.show #furnaceCanvas) #topbar{z-index:70;} #modal.show:has(#furnaceCanvas) #fWood{display:none;} #modal.show:has(#furnaceCanvas) .furnaceHud>.furnaceCard:nth-child(2) .furnaceValueLine>span:first-child{display:none;} #modal.show:has(#furnaceCanvas) .furnaceHud>.furnaceCard:nth-child(2) .furnaceValueLine{justify-content:flex-end;} #modal.show:has(#furnaceCanvas) .furnaceHud>.furnaceCard:nth-child(3){display:none;} /* Simple furnace: one process bar and plain queue counts. The top HUD remains the single source of truth for finished sulfur, metal, charcoal, and wood. */ body:has(#modal.show #furnaceStatus) #topbar{z-index:70;} body:has(#modal.show #furnaceStatus) #furnaceMini{display:none;} #modal .furnaceShell{display:block;} #modal .furnaceSummary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 10px;} #modal .furnaceSummaryCard{padding:12px;border:1px solid #334142;border-radius:11px;background:#121819;} #modal .furnaceSummaryCard span,#modal .furnaceFuelCard span{display:block;color:#82918e;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;} #modal .furnaceSummaryCard strong{display:block;margin-top:6px;color:#f0e6d3;font-size:16px;line-height:1.1;} #modal .furnaceSummaryCard strong b{font-size:16px;} #modal .furnaceProcessCard,#modal .furnaceQueueCard,#modal .furnaceFuelCard{padding:12px;border:1px solid #334142;border-radius:11px;background:#121819;margin-top:8px;} #modal .furnaceProcessCard .furnaceCardHead,#modal .furnaceQueueCard .furnaceCardHead{margin-bottom:8px;} #modal .furnaceCurrentLabel{display:flex;align-items:center;gap:6px;color:#eee3cf;font-size:13px;line-height:1.2;} #modal .furnaceCurrentLabel .resourceIcon{width:24px;height:24px;} #modal .furnaceProcessCard .furnaceProgressBar{height:12px;margin-top:10px;} #modal .furnaceProcessCard>small{display:block;margin-top:7px;color:#96a39f;font-size:10px;} #modal .furnaceQueueCard .furnaceCardHead small{color:#96a39f;font-size:9px;} #modal .furnaceQueueRow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:3px 10px;padding:9px 0;border-top:1px solid #293536;} #modal .furnaceQueueRow:first-of-type{border-top:0;} #modal .furnaceQueueRow>span{display:flex;align-items:center;gap:7px;color:#dce3df;font-size:11px;font-weight:850;} #modal .furnaceQueueRow>span .resourceIcon{width:30px;height:30px;} #modal .furnaceQueueRow>strong{color:#f0e6d3;font-size:18px;line-height:1.1;} #modal .furnaceQueueRow>small{grid-column:1/-1;color:#7f8e8b;font-size:9px;} #modal .furnaceQueueRow>small b{color:#c9d4d0;font-weight:800;} #modal .furnaceFuelCard{display:flex;align-items:center;justify-content:space-between;gap:12px;} #modal .furnaceFuelCard>div{display:flex;align-items:baseline;gap:10px;} #modal .furnaceFuelCard strong{color:#f0e6d3;font-size:18px;} #modal .furnaceFuelCard>small{max-width:62%;color:#96a39f;font-size:10px;text-align:right;} #modal .furnaceBtns{display:flex;gap:8px;margin-top:12px;} #modal .furnaceBtns button{margin:0;} #modal .panel.gamePausePanel{width:min(390px,calc(100vw - 32px));padding:24px;text-align:center;} #modal .gamePausePanel h2{margin-bottom:18px;} #modal .gamePauseActions{display:grid;gap:8px;margin:0 0 18px;} #modal .gamePauseActions button{width:100%;margin:0;} #modal .gamePauseVolume{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;padding-top:14px;border-top:1px solid #334142;color:#cbd4ce;font-size:10px;font-weight:850;letter-spacing:.1em;text-align:left;} #modal .gamePauseVolume output{color:#d9954e;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.04em;} #modal .gamePauseVolume input[type=range]{grid-column:1/-1;width:100%;accent-color:#d3924b;} #modal .pauseSettingsPanel{margin-top:0;text-align:left;} #help{padding:clamp(10px,2vw,24px);overflow:hidden;} .helpCard{max-height:calc(100vh - 24px);overflow:hidden;} @supports (height:100dvh){.helpCard{max-height:calc(100dvh - 24px);}} @media(max-width:760px){ #resources{width:70vw;min-width:0;max-width:70vw;flex:0 0 70vw;} #res{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 9px;} #modal .craftGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;} /* Eight raid recipes need three short rows on a phone; two columns make the modal taller than the screen and force unreadable fit scaling. */ #modal.show:has(.craftGrid) .craftGrid{grid-template-columns:repeat(3,minmax(0,1fr));} #modal .panel.compact .craftGrid, #modal .panel.tight .craftGrid, #modal .panel.ultra .craftGrid{grid-template-columns:repeat(2,minmax(0,1fr));} #modal .panel.tight .targetGrid, #modal .panel.ultra .targetGrid{grid-template-columns:repeat(2,minmax(0,1fr));} #modal .furnaceViz{padding:8px;} #modal .furnaceViz canvas{height:180px;} #modal .craftStockGrid{grid-template-columns:repeat(3,minmax(0,1fr));} #modal .craftStockItem{padding:6px 4px;column-gap:4px;} #modal .craftStockItem>.resourceIcon{width:28px;height:28px;} #modal .furnaceCard{padding:8px;} #modal .raidInventoryLayout{grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;} #modal .inventoryPane{padding:6px;border-radius:9px;} #modal .inventoryPaneHead{font-size:11px;margin-bottom:5px;} #modal .inventoryPaneHead strong{font-size:12px;} #modal .inventoryPane.chest .inventorySlots{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;} #modal .inventoryPane.player .inventorySlots{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;} #modal .inventorySlot{border-radius:5px;padding:2px;} #modal .inventorySlot .resourceIcon{width:clamp(20px,7vw,32px);height:clamp(20px,7vw,32px);} #modal .inventorySlot>b{right:2px;bottom:2px;font-size:10px;} #modal .itemDurability{left:2px;right:2px;bottom:2px;} #modal .itemDurability i{height:6px;} #toolbar .itemDurability{left:6px;right:6px;bottom:4px;} #toolbar span.itemDurability{display:block;padding:0;gap:0;line-height:0;} #toolbar span.itemDurability i{display:block;width:100%;height:6px;flex:none;} #modal .beltEditor{padding:6px;border-radius:9px;} #modal .beltEditor .inventoryPaneHead{font-size:11px;margin-bottom:5px;} #modal .toolbarEditorSlots{gap:3px;} #modal .toolbarEditSlot{border-radius:5px;padding:2px;} #modal .toolbarEditSlot .resourceIcon{width:clamp(20px,7vw,32px);height:clamp(20px,7vw,32px);} #modal .toolbarEditSlot>b{right:2px;bottom:2px;font-size:9px;} #modal .toolbarEditSlot kbd{left:2px;top:2px;font-size:8px;} } /* Craft keeps the active HUD in one compact primary row on narrow screens; otherwise the legacy two-column resource layout consumes the whole modal lane. */ @media(max-width:760px){ body:has(#modal.show .craftGrid) #resources{width:calc(100vw - 16px);max-width:calc(100vw - 16px);flex:0 1 auto;margin-top:58px;padding:4px 6px;} body:has(#modal.show .craftGrid) #res{display:flex;align-items:flex-start;justify-content:space-between;gap:3px;} body:has(#modal.show .craftGrid) #res span{flex:1;flex-direction:column;gap:1px;overflow:visible;font-size:8px;} body:has(#modal.show .craftGrid) #res .resourceIconStack{width:38px;height:38px;} body:has(#modal.show .craftGrid) #res .resourceIconStack .resourceIcon{width:38px;height:38px;} body:has(#modal.show .craftGrid) #res .resourceIconStack>b{font-size:10px;} body:has(#modal.show .craftGrid) #resSecondary{gap:11px;min-height:24px;margin-top:3px;padding-top:3px;} body:has(#modal.show .craftGrid) #resSecondary .resourceIcon{width:24px;height:24px;} body:has(#modal.show .craftGrid) #resSecondary b{font-size:10px;} } @media(max-width:420px){ #modal .panel{padding:14px;} #modal .panel.compact{padding:11px;} #modal .panel.tight{padding:8px;} #modal .craftCard{padding:8px;} #modal .recipeLayout{grid-template-columns:64px minmax(0,1fr);column-gap:7px;} #modal .recipeIcon{width:64px;height:64px;} #modal .recipeIcon .resourceIcon{width:64px;height:64px;} #modal .recipeIconEmoji{font-size:53px;} #modal .recipeInfo h3{font-size:12px;} #modal .recipeDamage{font-size:9px;} #modal .chip{padding:2px 5px;font-size:8px;} #modal .furnaceViz canvas{height:145px;} #modal .furnaceVizHead{margin-bottom:4px;} #modal .furnaceCard{padding:7px;} #modal .furnaceQueueRow{margin-top:5px;} #modal .furnaceOutputRow{padding:3px 0;} .helpCard{padding:16px;} } /* The ultra-density fallback must preserve the three-column phone craft grid; the higher-specificity panel.ultra rule otherwise turns it back into two columns after new recipes are added. */ @media(max-width:760px){ #modal.show:has(.craftGrid) .panel.ultra .craftGrid{grid-template-columns:repeat(3,minmax(0,1fr));} } @media(max-height:700px){ .helpCard{padding:16px;} .helpCard h1{font-size:23px;} .helpGrid{gap:5px;margin:8px 0;} .helpGrid div{padding:7px;font-size:10px;} .helpCard p{margin:6px 0;font-size:10px;line-height:1.35;} } @media(max-width:760px){ #modal .furnaceSummary{gap:5px;margin:10px 0 7px;} #modal .furnaceSummaryCard{padding:8px 7px;} #modal .furnaceSummaryCard strong{font-size:13px;} #modal .furnaceSummaryCard strong b{font-size:13px;} #modal .furnaceProcessCard,#modal .furnaceQueueCard,#modal .furnaceFuelCard{padding:9px;} #modal .furnaceFuelCard>small{max-width:58%;font-size:9px;} } @media(max-width:420px){ #modal .furnaceSummaryCard span{font-size:8px;} #modal .furnaceSummaryCard strong{font-size:12px;} #modal .furnaceQueueRow>span{font-size:10px;} #modal .furnaceQueueRow>strong{font-size:16px;} } /* The always-live resource HUD sits above the furnace modal; leave a clean header lane so it never hides the furnace title. */ #modal.show:has(#furnaceStatus) .panel{padding-top:74px;} @media(max-width:760px){#modal.show:has(#furnaceStatus) .panel{padding-top:64px;}} @media(max-width:760px){ body:has(#modal.show #furnaceStatus) #resources{width:calc(100vw - 16px);max-width:calc(100vw - 16px);margin-top:58px;padding:4px 6px;} body:has(#modal.show #furnaceStatus) #res{display:flex;align-items:center;justify-content:space-between;gap:3px;} body:has(#modal.show #furnaceStatus) #res span{flex:1;flex-direction:row;gap:2px;overflow:visible;font-size:8px;} body:has(#modal.show #furnaceStatus) #res .resourceIconStack{width:24px;height:24px;} body:has(#modal.show #furnaceStatus) #res .resourceIconStack .resourceIcon{width:24px;height:24px;} body:has(#modal.show #furnaceStatus) #res .resourceIconStack>b{font-size:8px;} body:has(#modal.show #furnaceStatus) #furnaceMini{display:none;height:0;margin:0;} } /* Final minimal furnace controls. No microcopy: the icon, large value, and one shared process bar carry the meaning. */ #modal.show:has(#furnaceStatus) .panel{padding-top:74px;} #modal .furnaceProcessCard{padding:14px;margin-top:12px;} #modal .furnaceStatusLine{display:flex;align-items:center;justify-content:space-between;gap:12px;} #modal .furnaceStatusLine strong{color:#f0e6d3;font-size:18px;line-height:1.1;} #modal .furnaceCurrentLabel{margin-top:16px;font-size:16px;line-height:1.2;} #modal .furnaceCurrentLabel .resourceIcon{width:30px;height:30px;} /* The live HUD owns the top resource row, so the simple furnace starts below that measured band instead of hiding its title behind the HUD. The player inventory stays a real 30-slot grid but uses a denser presentation here so the useful controls remain readable on a short viewport. */ #modal.show:has(#furnaceStatus){align-items:start;padding-top:calc(var(--hud-resources-bottom,150px) + 8px);} #modal.show:has(#furnaceStatus) .panel{width:min(590px,96vw);max-height:calc(100vh - var(--hud-resources-bottom,150px) - 16px);padding-top:18px;} #modal .furnaceSimple .inventoryPane{padding:8px;margin-top:10px;} #modal .furnaceSimple .inventorySlots{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;} #modal .furnaceSimple .inventorySlot .resourceIcon{width:34px;height:34px;} #modal .furnaceSimple .inventorySlot>b{font-size:11px;} #modal .furnaceSimpleStatus{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;color:#f0e6d3;font-size:17px;line-height:1.1;} #modal .furnaceSimpleStatus b{font-size:16px;color:#d9954e;font-variant-numeric:tabular-nums;} @media(max-width:760px){ #modal.show:has(#furnaceStatus){padding-top:calc(var(--hud-resources-bottom,112px) + 6px);} #modal.show:has(#furnaceStatus) .panel{max-height:calc(100dvh - var(--hud-resources-bottom,112px) - 12px);padding-top:12px;} #modal .furnaceSimple .inventorySlots{grid-template-columns:repeat(6,minmax(0,1fr));} #modal .furnaceSimple .inventorySlot .resourceIcon{width:28px;height:28px;} } #modal .furnaceProcessCard .furnaceProgressBar{height:14px;margin-top:12px;} #modal .furnaceOreGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px;} #modal .furnaceOreRow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border:1px solid #334142;border-radius:11px;background:#121819;} #modal .furnaceOreRow>span{display:flex;align-items:center;gap:7px;color:#dce3df;font-size:14px;font-weight:850;} #modal .furnaceOreRow>span .resourceIcon{width:34px;height:34px;} #modal .furnaceOreRow>strong{color:#f0e6d3;font-size:20px;} #modal .furnaceWoodLine{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 12px;border:1px solid #334142;border-radius:11px;background:#121819;} #modal .furnaceWoodLine .resourceIcon{width:34px;height:34px;} #modal .furnaceWoodLine>strong{color:#f0e6d3;font-size:20px;} @media(max-width:760px){ #modal.show:has(#furnaceStatus) .panel{padding-top:64px;} #modal .furnaceProcessCard{padding:10px;} #modal .furnaceStatusLine strong{font-size:17px;} #modal .furnaceCurrentLabel{margin-top:12px;font-size:15px;} #modal .furnaceOreRow{padding:9px 8px;} #modal .furnaceOreRow>span{font-size:13px;} #modal .furnaceOreRow>span .resourceIcon,#modal .furnaceWoodLine .resourceIcon{width:30px;height:30px;} #modal .furnaceOreRow>strong,#modal .furnaceWoodLine>strong{font-size:18px;} } /* Container/content balance: the minimal furnace should hug its useful content instead of inheriting the old wide dashboard footprint. */ #modal .panel.furnaceWide{width:min(760px,calc(100vw - 32px));} #modal.show:has(#furnaceStatus) .panel.furnaceWide{padding-top:28px;} #modal .panel.furnaceWide h2{margin-bottom:8px;} #modal .panel.furnaceWide .furnaceProcessCard{margin-top:8px;} #modal .panel.furnaceWide .furnaceOreGrid{margin-top:8px;} #modal .panel.furnaceWide .furnaceWoodLine{margin-top:6px;} #modal .panel.furnaceWide .furnaceBtns{margin-top:10px;} @media(max-width:760px){ #modal .panel.furnaceWide{width:calc(100vw - 20px);} #modal.show:has(#furnaceStatus) .panel.furnaceWide{padding-top:24px;} } /* Final override for the current compact furnace (the older furnaceWide rules above are retained for legacy markup but must not add its large top lane). */ #modal.show:has(#furnaceStatus) .panel.furnaceSimple{padding-top:18px;} #modal .furnaceSimple .inventorySlot{aspect-ratio:auto;height:48px;} @media(max-width:760px){ #modal.show:has(#furnaceStatus) .panel.furnaceSimple{padding-top:6px;} #modal .furnaceSimple .inventorySlots{grid-template-columns:repeat(8,minmax(0,1fr));} #modal .furnaceSimple .inventorySlot{height:38px;} #modal .furnaceSimple .inventorySlot .resourceIcon{width:25px;height:25px;} } /* Furnace outputs are real dedicated slots. They stay separate from the player's 30-slot inventory until the player clicks or drags a result out. */ #modal .furnaceOutputPane{margin-top:10px;} #modal .furnaceOutputPane .inventorySlots{grid-template-columns:repeat(3,var(--inventory-slot-size)) !important;} #modal .furnaceOutputSlot{cursor:pointer;} #modal .furnaceOutputSlot .resourceIcon{width:68%;height:68%;} #modal .furnaceOutputSlot>b{right:4px;bottom:3px;} #modal .furnaceOutputPlaceholder{opacity:.28;filter:grayscale(.8);} #modal .furnacePlayerPane{margin-top:10px;} #modal .furnacePlayerSlot{cursor:default;} #modal .furnacePlayerSlot[ondrop]{cursor:copy;} #modal .furnacePlayerSlot[ondrop]:hover{border-color:#d3924b;background:#253032;transform:none;} #modal .furnaceOutputSlot:hover{transform:none;} @media(max-width:760px){ #modal .furnaceOutputPane,#modal .furnacePlayerPane{margin-top:7px;} #modal .furnaceOutputSlot>b{right:2px;bottom:2px;font-size:10px;} } /* Craft keeps readable content on narrow screens instead of falling back to whole-panel fit scaling. The close icon is the single close action. */ @media(max-width:760px){ #modal.show:has(.craftGrid) .panel{padding:6px;} #modal.show:has(.craftGrid) .panel h2{margin-bottom:3px;} #modal.show:has(.craftGrid) .craftGrid{gap:2px;margin:2px 0;} #modal.show:has(.craftGrid) .craftCard{padding:2px;} #modal.show:has(.craftGrid) .recipeLayout{grid-template-columns:44px minmax(0,1fr);column-gap:4px;row-gap:0;} #modal.show:has(.craftGrid) .recipeIcon{width:44px;height:44px;} #modal.show:has(.craftGrid) .recipeIcon .resourceIcon{width:44px;height:44px;} #modal.show:has(.craftGrid) .recipeInfo h3{font-size:12px;line-height:1.05;} #modal.show:has(.craftGrid) .recipeDamage{font-size:12px;line-height:1.05;margin:2px 0 0 !important;} #modal.show:has(.craftGrid) .costRow{gap:2px;margin:2px 0 2px;} #modal.show:has(.craftGrid) .chip{padding:1px 3px;font-size:11px;} #modal.show:has(.craftGrid) .chip b{font-size:11px;} #modal.show:has(.craftGrid) .chip .resourceIcon{width:18px;height:18px;} #modal.show:has(.craftGrid) .craftQuantity{margin-top:0;} #modal.show:has(.craftGrid) .craftQuantityHead{min-height:14px;font-size:12px;margin:0 0 2px;} #modal.show:has(.craftGrid) .craftQuantityHead output{font-size:13px;} #modal.show:has(.craftGrid) .craftRange{height:11px;margin:2px 0;} #modal.show:has(.craftGrid) .craftButton, #modal.show:has(.craftGrid) .recipeAction{font-size:12px;padding:3px 5px;margin-top:1px;} } @media(max-width:760px){ #modal.show:has(.craftGrid) .panel.ultra .craftGrid{gap:0;} #modal.show:has(.craftGrid) .panel.ultra .craftCard{padding:1px;} } /* The Molotov brings the catalogue to fifteen cards. Keep the decision surface inside the viewport by reducing rows, not by scaling readable text. */ @media(min-width:761px){ #modal.show:has(.craftGrid) .craftGrid{grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:6px;margin:5px 0;} #modal.show:has(.craftGrid) .craftCard{padding:6px !important;} #modal.show:has(.craftGrid) .recipeLayout{grid-template-columns:58px minmax(0,1fr);column-gap:7px;} #modal.show:has(.craftGrid) .recipeIcon, #modal.show:has(.craftGrid) .recipeIcon .resourceIcon{width:58px;height:58px;} #modal.show:has(.craftGrid) .recipeInfo h3{font-size:12px;line-height:1.08;} #modal.show:has(.craftGrid) .recipeDamage{font-size:10px;line-height:1.15;margin:3px 0 0 !important;} #modal.show:has(.craftGrid) .costRow{gap:2px;margin:2px 0 3px;} #modal.show:has(.craftGrid) .chip{padding:2px 4px;font-size:9px;} #modal.show:has(.craftGrid) .craftRange{height:11px;margin:3px 0 2px;} #modal.show:has(.craftGrid) .craftButton, #modal.show:has(.craftGrid) .recipeAction{font-size:10px;padding:4px 4px;margin-top:2px;} } /* The gameplay belt is a row of fixed inventory cells, not content-sized buttons. Item art, counts, and durability bars must fit inside the same square regardless of the equipped item. Build-palette slots keep their own compact geometry above. */ #toolbar:not(.buildPalette) button{ width:var(--inventory-cell-size); height:var(--inventory-cell-size); min-width:var(--inventory-cell-size); min-height:var(--inventory-cell-size); flex:0 0 var(--inventory-cell-size); aspect-ratio:1 / 1; box-sizing:border-box; padding:5px 6px; } #toolbar:not(.buildPalette) button .resourceIcon{width:var(--inventory-cell-icon-size);height:var(--inventory-cell-icon-size);} @media(max-width:760px){ :root{--inventory-cell-size:68px;--inventory-cell-gap:4px;--inventory-cell-icon-size:40px;--inventory-cell-count-size:12px;--inventory-cell-durability-height:6px;} #toolbar:not(.buildPalette) button{ width:var(--inventory-cell-size); height:var(--inventory-cell-size); min-width:var(--inventory-cell-size); min-height:var(--inventory-cell-size); flex-basis:var(--inventory-cell-size); padding:4px; } #toolbar:not(.buildPalette) button .resourceIcon{width:var(--inventory-cell-icon-size);height:var(--inventory-cell-icon-size);} } @media(max-width:760px){ #modal.show:has(.craftGrid) .craftGrid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:2px;margin:2px 0;} #modal.show:has(.craftGrid) .craftCard{padding:2px !important;} #modal.show:has(.craftGrid) .recipeLayout{grid-template-columns:30px minmax(0,1fr) !important;column-gap:2px;} #modal.show:has(.craftGrid) .recipeIcon, #modal.show:has(.craftGrid) .recipeIcon .resourceIcon{width:30px;height:30px;} #modal.show:has(.craftGrid) .recipeInfo h3{font-size:10px !important;line-height:1;} #modal.show:has(.craftGrid) .recipeDamage{font-size:10px !important;line-height:1.02;margin:1px 0 0 !important;} #modal.show:has(.craftGrid) .costRow{gap:1px;margin:1px 0 !important;} #modal.show:has(.craftGrid) .chip{padding:1px 2px !important;font-size:9px !important;} #modal.show:has(.craftGrid) .chip b{font-size:9px !important;} #modal.show:has(.craftGrid) .chip .resourceIcon{width:12px;height:12px;} #modal.show:has(.craftGrid) .craftQuantityHead{min-height:9px;font-size:9px;margin:0;} #modal.show:has(.craftGrid) .craftQuantityHead output{font-size:10px;} #modal.show:has(.craftGrid) .craftRange{height:7px;margin:1px 0;} #modal.show:has(.craftGrid) .craftButton, #modal.show:has(.craftGrid) .recipeAction{font-size:9px;padding:2px 2px;margin-top:1px;} } @media(min-width:761px){ body:has(#modal.show .craftGrid) #modal .panel{max-height:calc(100dvh - var(--hud-resources-bottom,160px) - 4px);} #modal.show:has(.craftGrid) .craftGrid{gap:2px !important;margin:3px 0 !important;} #modal.show:has(.craftGrid) .craftCard{padding:1px !important;} #modal.show:has(.craftGrid) .recipeLayout{grid-template-columns:54px minmax(0,1fr) !important;} #modal.show:has(.craftGrid) .recipeIcon, #modal.show:has(.craftGrid) .recipeIcon .resourceIcon{width:54px;height:54px;} } /* Inventory cell contract: every player, chest, raid, and furnace slot uses one fixed footprint at a given viewport size. A Large Chest keeps the same cells and wraps to more rows; it may scroll internally when the modal is too short instead of shrinking its cells to fit more columns. */ #modal{ --inventory-slot-size:var(--inventory-cell-size); --inventory-slot-gap:var(--inventory-cell-gap); } #modal .inventorySlots{ grid-template-columns:repeat(var(--inventory-columns),var(--inventory-slot-size)) !important; grid-auto-rows:var(--inventory-slot-size); gap:var(--inventory-slot-gap) !important; width:max-content; min-width:0; } #modal .inventoryPane.chest.largeChest .inventorySlots{ grid-template-columns:repeat(6,var(--inventory-slot-size)) !important; } #modal .inventoryScroll{ max-height:min(460px,calc(100dvh - 250px)); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding-right:2px; } #modal .inventorySlot{ box-sizing:border-box; width:var(--inventory-slot-size); height:var(--inventory-slot-size); aspect-ratio:auto; } #modal .inventorySlot .resourceIcon{ width:var(--inventory-cell-icon-size); height:var(--inventory-cell-icon-size); } @media(max-width:760px){ #modal{ --inventory-slot-size:var(--inventory-cell-size); --inventory-slot-gap:var(--inventory-cell-gap); } #modal .inventoryPane.player .inventorySlots, #modal .furnacePlayerPane .inventorySlots{grid-template-columns:repeat(5,var(--inventory-slot-size)) !important;} #modal .inventoryPane.chest .inventorySlots{grid-template-columns:repeat(4,var(--inventory-slot-size)) !important;} #modal .inventoryPane.chest.largeChest .inventorySlots{grid-template-columns:repeat(4,var(--inventory-slot-size)) !important;} #modal .toolbarEditorSlots{grid-template-columns:repeat(4,var(--inventory-slot-size));grid-auto-rows:var(--inventory-slot-size);gap:var(--inventory-slot-gap);width:max-content;} #modal .inventoryScroll{max-height:min(340px,calc(100dvh - 190px));} } /* The editable belt uses the same cells as the gameplay belt. Widen its desktop modal to fit eight canonical cells without shrinking them. */ #modal .toolbarEditorSlots{ grid-template-columns:repeat(8,var(--inventory-slot-size)); grid-auto-rows:var(--inventory-slot-size); gap:var(--inventory-slot-gap); width:max-content; } #modal .toolbarEditSlot{ box-sizing:border-box; width:var(--inventory-slot-size); height:var(--inventory-slot-size); aspect-ratio:auto; } #modal .toolbarEditSlot .resourceIcon{width:var(--inventory-cell-icon-size);height:var(--inventory-cell-icon-size);} /* Keep the inner slot rhythm shared as well: item count and condition bar stay the same size and baseline in the HUD, inventory, storage, furnace, raid loot, and belt editor. */ #toolbar button>b, #modal .inventorySlot>b, #modal .toolbarEditSlot>b{font-size:var(--inventory-cell-count-size);} #toolbar .itemDurability i, #modal .itemDurability i{height:var(--inventory-cell-durability-height);} @media(min-width:761px){ #modal .panel:has(.beltEditor){width:min(820px,calc(100vw - 20px));} } @media(max-width:760px){ #modal .toolbarEditorSlots{grid-template-columns:repeat(4,var(--inventory-slot-size));} } /* Furnace keeps the canonical cell size without invoking the global modal fit-scale fallback. Eight columns keep the 30-slot player grid to four rows, so the useful furnace controls remain in one readable desktop panel. */ @media(min-width:761px){ #modal .panel.furnaceSimple{width:min(920px,calc(100vw - 20px));} #modal .furnacePlayerPane .inventorySlots{grid-template-columns:repeat(8,var(--inventory-slot-size)) !important;} } @media(min-width:761px){ #modal.show:has(#furnaceStatus) .panel.furnaceSimple{width:min(1070px,calc(100vw - 20px));} #modal.show:has(#furnaceStatus) .panel.furnaceSimple{padding-top:0;} #modal.show:has(#furnaceStatus) .panel.furnaceSimple .furnaceSimpleStatus{margin-top:0;} #modal.show:has(#furnaceStatus) .panel.furnaceSimple .furnaceCurrentLabel{margin-top:8px;} #modal.show:has(#furnaceStatus) .panel.furnaceSimple .furnaceOreGrid{margin-top:6px;} #modal.show:has(#furnaceStatus) .panel.furnaceSimple .furnaceInventoryLayout{margin-top:4px;} #modal.show:has(#furnaceStatus) .panel.furnaceSimple .furnaceInventoryLayout .inventoryPaneHead{margin-bottom:4px;} #modal.show:has(#furnaceStatus) .panel.furnaceSimple .furnaceBtns{margin-top:0;} #modal.show:has(#furnaceStatus) .panel.furnaceSimple .inventorySlot{height:var(--inventory-slot-size);} #modal.show:has(#furnaceStatus) .panel.furnaceSimple .inventorySlot .resourceIcon{width:var(--inventory-cell-icon-size);height:var(--inventory-cell-icon-size);} #modal.show:has(#furnaceStatus) .furnaceInventoryLayout{display:grid;grid-template-columns:276px minmax(0,1fr);gap:10px;align-items:start;margin-top:10px;} #modal.show:has(#furnaceStatus) .furnaceInventoryLayout .furnaceOutputPane, #modal.show:has(#furnaceStatus) .furnaceInventoryLayout .furnacePlayerPane{margin-top:0;} #modal.show:has(#furnaceStatus) .furnaceInventoryLayout .furnacePlayerPane .inventorySlots{grid-template-columns:repeat(8,var(--inventory-slot-size)) !important;} } /* The narrow fallback keeps the same cell and icon contract; only the grid wraps to fewer columns because mobile is not the current layout target. */ @media(max-width:760px){ #modal.show:has(#furnaceStatus) .furnaceInventoryLayout{display:grid;grid-template-columns:1fr;gap:7px;margin-top:7px;} #modal.show:has(#furnaceStatus) .furnaceInventoryLayout .furnaceOutputPane, #modal.show:has(#furnaceStatus) .furnaceInventoryLayout .furnacePlayerPane{margin-top:0;} #modal.show:has(#furnaceStatus) .panel.furnaceSimple .inventorySlot{height:var(--inventory-slot-size);} #modal.show:has(#furnaceStatus) .panel.furnaceSimple .inventorySlot .resourceIcon{width:var(--inventory-cell-icon-size);height:var(--inventory-cell-icon-size);} } /* Final desktop density pass. Inventory panes use their real content width, so canonical square cells never get clipped by a flexible parent column. */ @media(min-width:761px){ #modal .panel.inventoryWide .raidInventoryLayout{grid-template-columns:max-content max-content;justify-content:center;align-items:start;} #modal .panel.inventoryWide .raidInventoryLayout .inventoryPane{width:max-content;box-sizing:border-box;} #modal .panel.inventoryWide .raidInventoryLayout .inventoryPane.player .inventorySlots, #modal .panel.inventoryWide .raidInventoryLayout .inventoryPane.chest .inventorySlots{grid-template-columns:repeat(5,var(--inventory-slot-size)) !important;} #modal .panel.inventoryWide .raidInventoryLayout .inventoryPane.chest.largeChest .inventorySlots{grid-template-columns:repeat(8,var(--inventory-slot-size)) !important;} #modal.show:has(#furnaceStatus) .panel.furnaceSimple{width:min(1160px,calc(100vw - 8px));padding:0 6px 8px;} #modal.show:has(#furnaceStatus) .furnaceInventoryLayout{grid-template-columns:max-content max-content;justify-content:center;gap:8px;} #modal.show:has(#furnaceStatus) .furnaceInventoryLayout .furnaceOutputPane, #modal.show:has(#furnaceStatus) .furnaceInventoryLayout .furnacePlayerPane{width:max-content;box-sizing:border-box;padding:6px;} #modal.show:has(#furnaceStatus) .furnaceInventoryLayout .furnaceOutputPane .inventorySlots{grid-template-columns:repeat(3,var(--inventory-slot-size)) !important;} #modal.show:has(#furnaceStatus) .furnaceInventoryLayout .furnacePlayerPane .inventorySlots{grid-template-columns:repeat(8,var(--inventory-slot-size)) !important;} #modal.show:has(.craftGrid) .craftSliderWrap{position:relative;margin:8px 0 5px;height:30px;} #modal.show:has(.craftGrid) .craftSliderWrap .craftRange{height:30px;margin:0;} #modal.show:has(.craftGrid) .craftSliderWrap .craftRange::-webkit-slider-runnable-track{height:30px;} #modal.show:has(.craftGrid) .craftSliderWrap .craftRange::-moz-range-track, #modal.show:has(.craftGrid) .craftSliderWrap .craftRange::-moz-range-progress{height:30px;} #modal.show:has(.craftGrid) .craftSliderWrap output{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:var(--range-label-color,#fff5df);font-size:15px;font-weight:900;line-height:1;text-shadow:0 1px 2px #0008;pointer-events:none;} #modal .researchNode{min-height:120px;padding:12px;} #modal .researchNodeTop{top:9px;left:12px;right:12px;} #modal .researchNodeMain{grid-template-columns:68px minmax(0,1fr);gap:11px;min-height:94px;} #modal .researchIcon{width:68px;height:68px;} #modal .researchIcon .resourceIcon{width:60px;height:60px;} #modal .researchNodeCopy strong{font-size:14px;} #modal .researchCost{font-size:13px;} #modal .researchCost .resourceIcon{width:22px;height:22px;} } /* On a short phone the live HUD reserves the header lane. Let Craft use the remaining pixels down to the safe bottom edge instead of invoking a whole- panel transform for the additional recipe row. */ @media(max-width:760px){ body:has(#modal.show .craftGrid) #modal{padding-top:calc(var(--hud-resources-bottom,160px) + 4px);} body:has(#modal.show .craftGrid) #modal .panel{max-height:calc(100vh - var(--hud-resources-bottom,160px) - 4px);} } @supports (height:100dvh){ @media(max-width:760px){ body:has(#modal.show .craftGrid) #modal .panel{max-height:calc(100dvh - var(--hud-resources-bottom,160px) - 4px);} } } /* Short desktop viewports get the same content-first treatment without shrinking meaningful Craft text into unreadable fit-scale output. */ @media(min-width:761px) and (max-height:760px){ #res .resourceIconStack,#resSecondary .resourceIconStack{width:52px;height:52px;} #res .resourceIconStack .resourceIcon,#resSecondary .resourceIconStack .resourceIcon{width:52px;height:52px;} #res .resourceIconStack>b,#resSecondary .resourceIconStack>b{font-size:14px;} body:has(#modal.show .craftGrid) #resSecondary .resourceIcon{width:35px;height:35px;} body:has(#modal.show .craftGrid) #resSecondary b{font-size:13px;} body:has(#modal.show .craftGrid) .panel.compact{padding:10px;} body:has(#modal.show .craftGrid) .panel.compact .craftGrid{gap:5px;margin:5px 0;} body:has(#modal.show .craftGrid) .panel.compact .craftCard{padding:6px;} body:has(#modal.show .craftGrid) .panel.compact .recipeLayout{grid-template-columns:72px minmax(0,1fr);column-gap:8px;} body:has(#modal.show .craftGrid) .panel.compact .recipeIcon{width:72px;height:72px;} body:has(#modal.show .craftGrid) .panel.compact .recipeIcon .resourceIcon{width:72px;height:72px;} body:has(#modal.show .craftGrid) .panel.compact .recipeInfo h3{font-size:13px;} body:has(#modal.show .craftGrid) .panel.compact .recipeDamage{font-size:13px;line-height:1.1;} body:has(#modal.show .craftGrid) .panel.compact .chip{font-size:11px;padding:2px 5px;} body:has(#modal.show .craftGrid) .panel.compact .chip b{font-size:11px;} body:has(#modal.show .craftGrid) .panel.compact .chip .resourceIcon{width:24px;height:24px;} body:has(#modal.show .craftGrid) .panel.compact .craftQuantityHead{font-size:12px;} body:has(#modal.show .craftGrid) .panel.compact .craftQuantityHead output{font-size:14px;} body:has(#modal.show .craftGrid) .panel.compact .craftRange{height:13px;margin:4px 0;} body:has(#modal.show .craftGrid) .panel.compact .craftButton, body:has(#modal.show .craftGrid) .panel.compact .recipeAction{font-size:13px;padding:5px 7px;margin-top:2px;} } /* Short desktop screens can keep readable card internals by using two rows; three columns would add a third row solely because the raid catalogue grew. */ @media(min-width:761px) and (max-height:760px){ #modal.show:has(.craftGrid) .panel.ultra .craftGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;} } /* Final narrow Craft override: five readable two-column rows fit beside the active HUD without relying on the legacy whole-panel transform. */ @media(max-width:760px){ #modal.show:has(.craftGrid) .panel{padding:4px !important;} #modal.show:has(.craftGrid) .panel h2{font-size:18px;margin:0 0 1px;} #modal.show:has(.craftGrid) .craftGrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:3px;margin:2px 0;} #modal.show:has(.craftGrid) .craftCard{padding:2px !important;} #modal.show:has(.craftGrid) .recipeLayout{grid-template-columns:36px minmax(0,1fr) !important;column-gap:3px;} #modal.show:has(.craftGrid) .recipeIcon, #modal.show:has(.craftGrid) .recipeIcon .resourceIcon{width:36px;height:36px;} #modal.show:has(.craftGrid) .recipeInfo h3{font-size:10px !important;line-height:1;} #modal.show:has(.craftGrid) .recipeDamage{font-size:10px !important;line-height:1.05;margin:2px 0 0 !important;} #modal.show:has(.craftGrid) .costRow{gap:1px;margin:1px 0 !important;} #modal.show:has(.craftGrid) .chip{padding:1px 3px !important;font-size:9px !important;} #modal.show:has(.craftGrid) .chip b{font-size:9px !important;} #modal.show:has(.craftGrid) .chip .resourceIcon{width:14px;height:14px;} #modal.show:has(.craftGrid) .craftQuantityHead{min-height:10px;font-size:9px;margin:0;} #modal.show:has(.craftGrid) .craftQuantityHead output{font-size:10px;} #modal.show:has(.craftGrid) .craftRange{height:8px;margin:1px 0;} #modal.show:has(.craftGrid) .craftButton, #modal.show:has(.craftGrid) .recipeAction{font-size:10px;padding:3px 4px;margin-top:1px;} } /* Final catalogue-density pass for the fifteen-card Craft surface. */ @media(min-width:761px){ #modal.show:has(.craftGrid) .craftGrid{grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:6px !important;margin:5px 0 !important;} #modal.show:has(.craftGrid) .craftCard{padding:6px !important;} #modal.show:has(.craftGrid) .recipeLayout{grid-template-columns:58px minmax(0,1fr) !important;column-gap:7px;} #modal.show:has(.craftGrid) .recipeIcon, #modal.show:has(.craftGrid) .recipeIcon .resourceIcon{width:58px;height:58px;} #modal.show:has(.craftGrid) .recipeInfo h3{font-size:12px;line-height:1.08;} #modal.show:has(.craftGrid) .recipeDamage{font-size:10px;line-height:1.15;margin:3px 0 0 !important;} #modal.show:has(.craftGrid) .costRow{gap:2px;margin:2px 0 3px;} #modal.show:has(.craftGrid) .chip{padding:2px 4px;font-size:9px;} #modal.show:has(.craftGrid) .craftRange{height:11px;margin:3px 0 2px;} #modal.show:has(.craftGrid) .craftButton, #modal.show:has(.craftGrid) .recipeAction{font-size:10px;padding:4px 4px;margin-top:2px;} } @media(max-width:760px){ body:has(#modal.show .craftGrid) #modal .panel{max-height:calc(100dvh - var(--hud-resources-bottom,160px) + 4px);} #modal.show:has(.craftGrid) .recipeInfo h3{font-size:10px !important;} #modal.show:has(.craftGrid) .recipeDamage{font-size:10px !important;} #modal.show:has(.craftGrid) .chip, #modal.show:has(.craftGrid) .chip b{font-size:9px !important;} #modal.show:has(.craftGrid) .craftQuantityHead{font-size:9px;} #modal.show:has(.craftGrid) .craftQuantityHead output{font-size:10px;} #modal.show:has(.craftGrid) .craftButton, #modal.show:has(.craftGrid) .recipeAction{font-size:9px;} } @media(max-width:760px){ #modal.show:has(.craftGrid) .craftGrid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:2px !important;margin:2px 0 !important;} #modal.show:has(.craftGrid) .craftCard{padding:2px !important;} #modal.show:has(.craftGrid) .recipeLayout{grid-template-columns:30px minmax(0,1fr) !important;column-gap:2px;} #modal.show:has(.craftGrid) .recipeIcon, #modal.show:has(.craftGrid) .recipeIcon .resourceIcon{width:30px;height:30px;} #modal.show:has(.craftGrid) .recipeInfo h3{font-size:10px !important;line-height:1;} #modal.show:has(.craftGrid) .recipeDamage{font-size:10px !important;line-height:1.02;margin:1px 0 0 !important;} #modal.show:has(.craftGrid) .costRow{gap:1px;margin:1px 0 !important;} #modal.show:has(.craftGrid) .chip{padding:1px 2px !important;font-size:9px !important;} #modal.show:has(.craftGrid) .chip b{font-size:9px !important;} #modal.show:has(.craftGrid) .chip .resourceIcon{width:12px;height:12px;} #modal.show:has(.craftGrid) .craftQuantityHead{min-height:9px;font-size:9px;margin:0;} #modal.show:has(.craftGrid) .craftQuantityHead output{font-size:10px;} #modal.show:has(.craftGrid) .craftRange{height:7px;margin:1px 0;} #modal.show:has(.craftGrid) .craftButton, #modal.show:has(.craftGrid) .recipeAction{font-size:9px;padding:2px 2px;margin-top:1px;} } @media(min-width:761px){ body:has(#modal.show .craftGrid) #modal .panel{max-height:calc(100dvh - var(--hud-resources-bottom,160px) - 4px);} #modal.show:has(.craftGrid) .craftGrid{gap:2px !important;margin:3px 0 !important;} #modal.show:has(.craftGrid) .craftCard{padding:1px !important;} #modal.show:has(.craftGrid) .recipeLayout{grid-template-columns:54px minmax(0,1fr) !important;} #modal.show:has(.craftGrid) .recipeIcon, #modal.show:has(.craftGrid) .recipeIcon .resourceIcon{width:54px;height:54px;} } .trainingNoteCard{text-align:center;max-width:34rem;margin:0 auto;padding:1.4rem 1.2rem 1rem}.trainingNoteCard img{display:block;width:7rem;height:7rem;object-fit:contain;margin:.2rem auto .55rem;image-rendering:pixelated}.trainingNoteCard strong{display:block;color:#f0c06d;font-size:1.38rem;letter-spacing:.08em;line-height:1.1;margin:.65rem 0 1rem;text-align:center}.trainingNoteCard p{font-size:1rem;line-height:1.45;margin:.45rem auto;max-width:28rem}.trainingNoteCard .muted{color:#aeb9b3} #modal .panel.trainingNotePanel{width:min(560px,calc(100vw - 28px));padding:24px;} #modal .panel.trainingNotePanel .doorCodeNoteCard{max-width:none;padding:6px 8px 2px;} #modal .panel.trainingNotePanel .doorCodeNoteCard img{width:min(280px,72vw);height:min(180px,24vh);margin:10px auto 14px;object-fit:cover;object-position:center;} #modal .panel.trainingNotePanel .doorCodeNoteCard h2{margin-bottom:0;} #modal .panel.trainingNotePanel .doorCodeNoteCard p{margin:0 auto 10px;} #modal .panel.trainingNotePanel .doorCodeNoteCard .trainingCode{font-size:clamp(26px,3.6vw,38px);line-height:1.1;margin:10px 0 14px;} #modal .panel.trainingNotePanel .doorCodeNoteCard button{display:block;width:auto;min-width:150px;margin:0 auto;} /* Building upgrade choice: one readable target per button, with the target tier's resource as the only payment cue. The panel is intentionally compact because the world remains visible behind it while the mallet is held. */ #modal .panel.upgradePanel{width:min(620px,calc(100vw - 28px));padding:28px;} #modal .upgradeCurrent{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0 18px;color:#f2e7d5;font-size:18px;} #modal .upgradeCurrent>span:first-child{display:grid;place-items:center;width:48px;height:48px;border:1px solid #59655f;border-radius:10px;background:#121a18;} #modal .upgradeCurrent .resourceIcon{width:40px;height:40px;object-fit:contain;} #modal .upgradeArrow{color:#d2944d;font-size:26px;line-height:1;} #modal .upgradeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} #modal .upgradeChoice{display:flex;align-items:center;gap:12px;min-height:78px;padding:10px 12px;border:1px solid #46544e;border-radius:12px;background:#18211f;color:#f3e7d3;text-align:left;cursor:pointer;transition:background .12s,border-color .12s,transform .12s;} #modal .upgradeChoice:hover,#modal .upgradeChoice:focus-visible{background:#2b3833;border-color:#d2944d;transform:translateY(-1px);outline:none;} #modal .upgradeChoiceIcon{display:grid;place-items:center;flex:0 0 50px;width:50px;height:50px;border-radius:9px;background:#0d1413;} #modal .upgradeChoiceIcon .resourceIcon{width:44px;height:44px;object-fit:contain;} #modal .upgradeChoiceCopy{display:flex;flex-direction:column;gap:6px;min-width:0;} #modal .upgradeChoiceCopy>b{font-size:16px;line-height:1.05;} #modal .upgradeChoiceCopy>span{display:flex;align-items:center;gap:5px;color:#e6c07f;font-size:15px;font-weight:800;} #modal .upgradeChoiceCopy>span .resourceIcon{width:24px;height:24px;object-fit:contain;} @media(max-width:560px){#modal .panel.upgradePanel{padding:20px;width:min(440px,calc(100vw - 20px));}#modal .upgradeGrid{grid-template-columns:1fr;}#modal .upgradeChoice{min-height:68px;}} /* A medium desktop keeps the canonical cells and uses seven columns: all 48 slots fit in seven rows without clipping the player pane at 1280px wide. */ @media(min-width:1200px) and (max-width:1339px) and (min-height:800px){ #modal .panel.inventoryWide{width:min(1320px,calc(100vw - 20px));padding:8px;} #modal .panel.inventoryWide>button:not(.close){display:none;} #modal .panel.inventoryWide .raidInventoryLayout .inventoryPane.chest.largeChest .inventorySlots{grid-template-columns:repeat(7,var(--inventory-slot-size)) !important;} #modal .panel.inventoryWide .raidInventoryLayout .inventoryPane.chest.largeChest .inventoryScroll{max-height:none;overflow:visible;padding-right:0;} } /* A wide desktop large chest uses six rows of canonical cells. The final override lives after every generic/fallback grid rule so it cannot fall back to the old five-column clipped layout. */ @media(min-width:1340px) and (min-height:800px){ #modal .panel.inventoryWide{width:min(1360px,calc(100vw - 20px));} #modal .panel.inventoryWide .raidInventoryLayout .inventoryPane.chest.largeChest .inventorySlots{grid-template-columns:repeat(8,var(--inventory-slot-size)) !important;} #modal .panel.inventoryWide .raidInventoryLayout .inventoryPane.chest.largeChest .inventoryScroll{max-height:none;overflow:visible;padding-right:0;} } /* The resource strip should follow the content it currently displays. Keep the five primary resources compact when no secondary resources are present, then let the strip grow only as additional resource icons appear. A capped scroll lane still protects narrow viewports from being pushed off-screen. */ #topbar #resources{ width:max-content; max-width:min(820px,calc(100vw - 28px)); flex:0 1 auto; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; } #topbar #resources::-webkit-scrollbar{display:none;} #topbar #res,#topbar #resSecondary{flex:0 0 auto;} @media(max-width:760px){ #topbar #resources{ width:max-content; max-width:calc(100vw - 16px); flex:0 1 auto; } body:has(#modal.show .craftGrid) #topbar #resources, body:has(#modal.show #furnaceStatus) #topbar #resources{ width:max-content; max-width:calc(100vw - 16px); flex:0 1 auto; } } /* Direct craft recipes (the rifle and rocket launcher) do not have the quantity slider used by repeatable recipes. Reserve the same header, cost, and action rows for both cards so a longer description cannot push the resource chips down or lift the craft button. */ #modal.show:has(.craftGrid) .craftCard:has(>.recipeLayout>.recipeAction)>.recipeLayout{ grid-template-rows:54px minmax(0,1fr) 22px; align-content:stretch; } #modal.show:has(.craftGrid) .craftCard:has(>.recipeLayout>.recipeAction)>.recipeLayout>.recipeIcon{grid-row:1;align-self:start;} #modal.show:has(.craftGrid) .craftCard:has(>.recipeLayout>.recipeAction) .recipeInfo{align-self:start;} #modal.show:has(.craftGrid) .craftCard:has(>.recipeLayout>.recipeAction)>.recipeLayout>.costRow{align-self:start;} #modal.show:has(.craftGrid) .craftCard:has(>.recipeLayout>.recipeAction)>.recipeLayout>.recipeAction{align-self:end;margin-top:0;} @media(max-width:760px){ #modal.show:has(.craftGrid) .craftCard:has(>.recipeLayout>.recipeAction)>.recipeLayout{ grid-template-rows:42px minmax(0,1fr) 17px; } }