/* Crafting workbench (CRUISE-0358). Game Boy layout: the SCREEN (skills, recipe list, detail, note) at the TOP, the buttons below it. Text >= 16 css px, buttons >= 44 css px (56). Y2K look shared with game.css. */
.cw { position: fixed; inset: 0; z-index: 50; background: #14141f; color: #fff; font-family: "Courier New", monospace; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: calc(var(--cc-nav-h, 0px) + 66px); box-sizing: border-box; touch-action: manipulation; -webkit-user-select: none; user-select: none; overflow: hidden; }
.cw-screen { width: min(100vw - 12px, 560px); background: #1a1a4e; border: 4px double #ffd700; box-sizing: border-box; }
.cw-hud { display: flex; background: #000; border-bottom: 3px solid #fff; height: 52px; }
.cw-skill { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 2px solid #334; line-height: 1.05; min-width: 0; }
.cw-skill:last-child { border-right: 0; }
.cw-skill i { font-style: normal; font-size: 16px; color: #7fe; white-space: nowrap; overflow: hidden; max-width: 100%; }
.cw-skill b { font-size: 20px; color: #ffe260; }
.cw-list { display: flex; flex-direction: column; background: #0a0f24; }
.cw-row { font: bold 16px "Courier New", monospace; text-align: left; min-height: 44px; background: #000; color: #9ab; border: 0; border-bottom: 2px solid #334; padding: 0 10px; cursor: pointer; white-space: pre; overflow: hidden; touch-action: manipulation; }
.cw-row.ok { color: #fff; }
.cw-row.sel { background: #223; color: #ffe260; border-left: 6px solid #ffe260; }
.cw-detail { padding: 6px 10px 2px; background: #000; border-top: 3px solid #fff; }
.cw-detail p { margin: 0 0 4px; font-size: 16px; line-height: 1.25; }
.cw-need.have { color: #8f8; } .cw-need.lack { color: #f88; }
.cw-note { text-align: center; font-size: 16px; font-weight: bold; line-height: 22px; min-height: 48px; padding: 4px 6px; color: #ffe260; background: #000; }
.cw-pad { display: flex; gap: 8px; margin-top: 10px; width: min(100vw - 12px, 560px); box-sizing: border-box; }
.cw-btn { flex: 1; font: bold 18px "Courier New", monospace; min-height: 56px; background: #000; color: #fff; border: 4px solid #fff; padding: 0 4px; cursor: pointer; touch-action: manipulation; }
.cw-pad .cw-btn { gap: 0 !important; padding: 0 2px !important; }
.cw-pad .cw-btn .pxi { display: none !important; }   /* five buttons share one row: the pixel arrow + 12 px gap pushed UP/DOWN/BACK past their boxes (79/101 vs 69 px at 390) */
.cw-btn.hot { border-color: #ffe260; color: #ffe260; }
.cw-help { margin: 10px 0 0; font-size: 16px; color: #9ab; text-align: center; }
@media (max-height: 480px) { .cw-help { display: none; } .cw-hud { height: 40px; } .cw-row { min-height: 36px; } .cw-note { min-height: 28px; line-height: 20px; } .cw-pad { margin-top: 4px; } .cw-btn { min-height: 44px; } .cw-detail { padding-top: 2px; } .cw-detail p { margin-bottom: 2px; } }   /* CRUISE-0461 */
/* CRUISE-0461: short landscape puts the recipe list beside the detail+note, so nothing falls below the fold. */
@media (max-height: 480px) and (min-width: 700px) { .cw-screen { width: calc(100vw - 12px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; } .cw-hud { grid-column: 1 / 3; } .cw-list { grid-column: 1; grid-row: 2 / 4; } .cw-detail { grid-column: 2; grid-row: 2; border-top: 0; border-left: 3px solid #fff; overflow: hidden; } .cw-note { grid-column: 2; grid-row: 3; } .cw-pad { width: calc(100vw - 12px); } }

/* CRUISE-0673: exitbar.js's fixed BACK (top-left, 56 px tall, 66 px wide) used to sit on the ENG tile. The page reserves its height at the top, like mud/puzzle_map/disciplines (data-pad / data-reserve); in short landscape the top is too scarce, so the reserve is a LEFT gutter there. Portrait phones give the slack back by dropping the row margins so six 44 px rows still fit above the pad (360x640). */
@media (max-height: 480px) and (min-width: 700px) { .cw { padding-top: 6px; padding-left: 74px; } .cw-screen, .cw-pad { width: calc(100vw - 86px); } }
@media (max-width: 699px) { .cw-row { margin: 0 !important; --tap: 44px; } .cw-pad { margin-top: 6px; } .cw-btn { min-height: 48px; } }
@media (max-height: 480px) and (min-width: 700px) { .cw-row { margin: 0 !important; --tap: 44px; } }   /* the 44 px floor, not the 56 px default, so six rows + the BACK gutter fit 390 px tall */