/* Submarine hatch retains the existing swim-back interaction. */
/* The hatch itself is the click target. The label is below its rim. */
#menuScreen.ocean-menu-v2.submarine-menu #submarineWorkshopBtn.abyss-laboratory-hatch{
 left:50%!important;top:var(--abyss-hatch-y,86px)!important;
 transform:translate(-50%,-50%)!important;
 width:calc(104px * var(--abyss-hatch-scale,1))!important;
 min-width:0!important;height:calc(45px * var(--abyss-hatch-scale,1))!important;
 padding:0!important;border:0!important;border-radius:50%!important;
 background:transparent!important;box-shadow:none!important;outline-offset:4px!important;
 display:block!important;z-index:15!important;
}
#submarineWorkshopBtn.abyss-laboratory-hatch:hover,#submarineWorkshopBtn.abyss-laboratory-hatch:focus-visible{
 background:rgba(207,171,81,.14)!important;box-shadow:inset 0 0 17px rgba(255,226,132,.28)!important;
 outline:1px solid rgba(255,222,143,.70)!important;
}
#submarineWorkshopBtn.abyss-laboratory-hatch .abyss-hatch-label{
 position:absolute!important;left:50%!important;top:calc(100% + 8px)!important;transform:translateX(-50%)!important;
 background:rgba(7,18,22,.9);border:1px solid rgba(192,161,90,.63);padding:4px 9px;border-radius:5px;
 pointer-events:none;white-space:nowrap;font:800 10px Inter,system-ui,sans-serif!important;letter-spacing:.12em;
 color:#f2d8a2!important;text-shadow:0 2px 4px #000;
}
#submarineWorkshopBtn.abyss-laboratory-hatch::before,
#submarineWorkshopBtn.abyss-laboratory-hatch::after{content:none!important;display:none!important}

/* Full-screen cockpit. Physical controls form a single integrated console,
 * while only its small central monitor scrolls. No floating modal or menu cards.
 */
#submarineWorkshop.abyss-cockpit-screen[hidden]{display:none!important}
#submarineWorkshop.abyss-cockpit-screen:not([hidden]){
 display:block!important;position:fixed!important;inset:0!important;
 height:100dvh!important;width:100vw!important;max-width:none!important;max-height:none!important;
 padding:0!important;margin:0!important;border:0!important;overflow:hidden!important;
 z-index:30000!important;isolation:isolate;background:#051320!important;color:#e9f7f8!important;
}
#submarineWorkshop .abyss-cockpit-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
#submarineWorkshop .abyss-cockpit-chrome{
 position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
 gap:12px;padding:max(11px,env(safe-area-inset-top)) max(14px,3vw);
 font:800 clamp(10px,1.2vw,15px) Inter,system-ui,sans-serif;letter-spacing:.13em;color:#e4f7fa;
 background:linear-gradient(180deg,#04121bd9,transparent);pointer-events:none
}
#submarineWorkshop .abyss-cockpit-chrome>*{pointer-events:auto}
#submarineWorkshop .abyss-cockpit-exit{
 min-height:39px;background:linear-gradient(180deg,#223d4d,#102431);
 border:2px solid #8bacb3;border-bottom-color:#52717c;border-radius:9px;
 color:#f4e4bb;padding:8px 12px;box-shadow:0 4px 0 #071119,0 0 14px #0008;
 font:800 11px Inter,system-ui,sans-serif;letter-spacing:.04em;cursor:pointer
}
#submarineWorkshop .abyss-cockpit-exit:hover{background:#335666;border-color:#f1c67d}
#submarineWorkshop .abyss-cockpit-console{
 box-sizing:border-box;position:absolute;z-index:3;left:64%;bottom:clamp(12px,3.8dvh,46px);
 transform:translateX(-50%);width:min(960px,70vw);height:clamp(275px,43dvh,404px);
 min-width:0;min-height:0;max-width:none;max-height:none;overflow:visible;
 padding:17px 19px 15px;border:5px solid #465967;border-top:9px solid #7893a3;
 border-bottom:9px solid #182c3b;border-radius:29px 29px 24px 24px;
 background:linear-gradient(140deg,#394c66 0%,#17293d 24%,#102335 70%,#344d60 100%);
 box-shadow:0 18px 45px #000e,inset 0 1px 0 #badde34d,inset 0 -6px 16px #030d1ac7;
}
#submarineWorkshop .abyss-cockpit-console:before{
 content:'';position:absolute;top:5px;left:4%;right:4%;height:4px;border-radius:4px;
 background:linear-gradient(90deg,transparent,#ffbd60,#fff0af,#ffbd60,transparent);
 box-shadow:0 0 13px #ffad57a8;pointer-events:none
}
#submarineWorkshop .abyss-cockpit-console:after{
 content:'';position:absolute;bottom:5px;left:4%;right:4%;height:3px;
 background:linear-gradient(90deg,transparent,#50d9e3,transparent);opacity:.55;pointer-events:none
}
#submarineWorkshop .submarine-workshop-grid{display:grid!important;grid-template-rows:minmax(0,1fr) auto!important;height:100%;max-width:none!important;gap:10px;min-height:0}
#submarineWorkshop .abyss-cockpit-visor{
 box-sizing:border-box;position:relative;min-height:0;height:100%;overflow:hidden;
 display:flex;flex-direction:column;border:4px solid #67889e;border-bottom-color:#304c62;border-radius:15px;
 background:linear-gradient(145deg,#092b41,#041523 80%);box-shadow:0 0 0 4px #081926,inset 0 0 22px #12a5b021,0 3px 16px #0009
}
#submarineWorkshop .abyss-cockpit-visor:before{
 content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
 background:repeating-linear-gradient(0deg,transparent 0,transparent 7px,#9fe9ef06 8px);z-index:3
}
#submarineWorkshop .abyss-visor-heading{
 position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
 gap:12px;padding:10px 15px 7px;border-bottom:1px solid #47839585;
 background:linear-gradient(90deg,#0f4053,#0c263d)
}
#submarineWorkshop .abyss-visor-heading small{font:800 9px Inter,sans-serif;letter-spacing:.15em;color:#88d6e5}
#submarineWorkshop .abyss-visor-heading strong{display:block;font:800 clamp(13px,1.65vw,20px) Cinzel,Georgia,serif;color:#f6e2ad}
#submarineWorkshop .abyss-visor-heading span{font:700 10px Inter,sans-serif;color:#a0c9d3;text-align:right}
#submarineWorkshop .abyss-visor-body{position:relative;z-index:2;min-height:0;flex:1;overflow:auto;scrollbar-color:#3b8195 #0a2332;scrollbar-width:thin;padding:10px 14px 13px}
#submarineWorkshop .abyss-visor-body:focus-visible{outline:2px solid #ffdf91;outline-offset:-3px}
#submarineWorkshop .abyss-control-deck{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding:0 2px 5px}
#submarineWorkshop .abyss-control-key{
 box-sizing:border-box;position:relative;min-width:0;min-height:58px;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:4px;padding:5px 3px 7px;cursor:pointer;
 color:#cceef4;background:linear-gradient(165deg,#2a4d61,#0e2639 80%);
 border:2px solid #6286a0;border-bottom:5px solid #071724;border-radius:10px;
 box-shadow:inset 0 1px 0 #96d5ec55,0 4px 0 #07121d,0 6px 10px #0009;
 text-shadow:0 1px 5px #000;font:800 clamp(8px,.86vw,11px) Inter,system-ui,sans-serif;letter-spacing:.025em;
}
#submarineWorkshop .abyss-control-key .abyss-control-icon{font-size:clamp(15px,1.4vw,21px);line-height:1.1;color:#68dbed}
#submarineWorkshop .abyss-control-key.is-active{
 color:#fff2d0;border-color:#e4ba62;border-bottom-color:#805526;
 background:linear-gradient(165deg,#586455,#233a42 78%);box-shadow:inset 0 1px 0 #ffe3a6aa,0 3px 0 #56361b,0 0 15px #ffc45c77
}
#submarineWorkshop .abyss-control-key.is-active .abyss-control-icon{color:#ffd17d}
#submarineWorkshop .abyss-control-key:hover{filter:brightness(1.2)}
#submarineWorkshop .abyss-control-key:active{transform:translateY(3px);box-shadow:inset 0 1px 4px #050d19}
#submarineWorkshop button:focus-visible{outline:2px solid #ffdb8c!important;outline-offset:2px}
#submarineWorkshop .abyss-lab-subnav{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
#submarineWorkshop .abyss-lab-subnav button{
 padding:5px 9px;border:1px solid #447489;border-radius:6px;background:#092c40;
 color:#b4dfec;font:800 9px Inter,sans-serif;cursor:pointer
}
#submarineWorkshop .abyss-lab-subnav button.is-active{background:#3d5560;border-color:#e0be7e;color:#ffe3a9}
#submarineWorkshop .submarine-console-stock{font:600 10px Inter,sans-serif;color:#8ebdcc;line-height:1.5;padding:3px 0 8px}
#submarineWorkshop .submarine-console-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:none!important}
#submarineWorkshop .submarine-console-card{
 display:flex;flex-direction:column;gap:6px;min-height:134px;min-width:0;
 padding:9px 10px;border-radius:8px;border:1px solid #385e6f;
 background:linear-gradient(160deg,#14364b,#0a1d2c);box-shadow:inset 0 1px 0 #8aefff12
}
#submarineWorkshop .submarine-console-card.is-complete{border-color:#6d9d8e;background:#123039}
#submarineWorkshop .submarine-console-card small{font:800 9px Inter,sans-serif;color:#f1c77f;letter-spacing:.055em}
#submarineWorkshop .submarine-console-card strong{font:700 13px Inter,sans-serif;color:#f4f8f4}
#submarineWorkshop .submarine-console-card p{font:500 10px/1.4 Inter,sans-serif;color:#b5d4d7;margin:0}
#submarineWorkshop .submarine-console-card .abyss-mineral-requirements{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto}
#submarineWorkshop .abyss-requirement{
 display:inline-flex;gap:3px;align-items:center;padding:2px 5px 2px 2px;
 border-radius:5px;border:1px solid #3a6770;background:#0b2534;
 font:800 10px Inter,sans-serif;color:#dbe9e9
}
#submarineWorkshop .abyss-requirement .abyss-resource-graphic{width:25px;height:25px;flex-shrink:0}
#submarineWorkshop .submarine-console-card button,#submarineWorkshop .abyss-visor-action{
 align-self:flex-start;min-height:29px;border:1px solid #71b9c8;border-radius:6px;padding:6px 10px;
 background:#125066;color:#e6faff;font:800 10px Inter,sans-serif;cursor:pointer
}
#submarineWorkshop .submarine-console-card button:disabled{opacity:.6;cursor:default;border-color:#496877}
#submarineWorkshop .abyss-mineral-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#submarineWorkshop .abyss-mineral-tile{
 display:flex;align-items:center;gap:9px;min-width:0;border:1px solid #396b84;border-radius:8px;
 padding:8px;background:linear-gradient(150deg,#183f54,#082132);color:#e8f7fa
}
#submarineWorkshop .abyss-mineral-tile .abyss-resource-graphic{flex:none;width:clamp(36px,4vw,55px);height:55px;filter:drop-shadow(0 0 6px #5bdbef66)}
#submarineWorkshop .abyss-mineral-tile strong{font:800 10px Inter,sans-serif;line-height:1.2;display:block}
#submarineWorkshop .abyss-mineral-tile small{display:block;margin-top:3px;color:#a9c2c8;font:600 9px Inter,sans-serif}
#submarineWorkshop .abyss-console-info{display:grid;gap:10px;align-content:start;max-width:610px}
#submarineWorkshop .abyss-console-info p{margin:0;color:#b4d9e5;font:500 12px/1.5 Inter,sans-serif}
#submarineWorkshop .abyss-console-info strong{font:800 18px Cinzel,serif;color:#f5e3b7}
#submarineWorkshop .submarine-console-production{display:grid;gap:6px;padding:9px;margin-bottom:9px;border:1px solid #ab8754;border-radius:7px;background:#0a2931;color:#e1f0e4}
#submarineWorkshop .submarine-console-production>small{font:800 9px Inter,sans-serif;color:#ddc28b}
#submarineWorkshop .submarine-console-production>strong{font:800 12px Inter,sans-serif}
#submarineWorkshop .submarine-console-production p{font:500 10px/1.4 Inter,sans-serif}
#submarineWorkshop .submarine-console-meter{display:grid;grid-template-columns:90px 1fr 115px;align-items:center;gap:7px;font:600 10px Inter,sans-serif}
#submarineWorkshop .submarine-console-meter i{height:7px;overflow:hidden;background:#051722;border-radius:5px}
#submarineWorkshop .submarine-console-meter i em{display:block;height:100%;background:#e2ba74}
#submarineWorkshop .submarine-console-meter.gas i em{background:#70d4ba}



@media(max-width:1000px){
 #submarineWorkshop .abyss-cockpit-console{left:61%;width:min(800px,80vw);height:clamp(300px,46dvh,410px)}
 #submarineWorkshop .abyss-mineral-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 #submarineWorkshop .abyss-cockpit-chrome{padding:8px 10px;gap:5px;font-size:8px;letter-spacing:0}
 #submarineWorkshop .abyss-cockpit-exit{font-size:8px;min-height:33px;padding:6px}
 #submarineWorkshop .abyss-cockpit-console{
  left:50%;width:97vw;height:clamp(315px,57dvh,510px);
  bottom:26px;padding:12px 10px 10px;border-width:3px;border-top-width:7px;border-bottom-width:7px;
  border-radius:17px
 }
 #submarineWorkshop .submarine-workshop-grid{gap:7px}
 #submarineWorkshop .abyss-control-deck{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 #submarineWorkshop .abyss-control-key{min-height:37px;flex-direction:row;gap:4px;padding:3px 4px 5px;font-size:9px;border-bottom-width:3px}
 #submarineWorkshop .abyss-control-key .abyss-control-icon{font-size:15px}
 #submarineWorkshop .abyss-visor-heading{padding:6px 9px}
 #submarineWorkshop .abyss-visor-heading strong{font-size:13px}
 #submarineWorkshop .abyss-visor-heading span{font-size:8px}
 #submarineWorkshop .abyss-visor-body{padding:8px}
 #submarineWorkshop .submarine-console-card-grid{grid-template-columns:1fr}
 #submarineWorkshop .abyss-mineral-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 #submarineWorkshop .abyss-mineral-tile{padding:5px;gap:4px}
 #submarineWorkshop .abyss-mineral-tile .abyss-resource-graphic{width:36px;height:40px}
 #submarineWorkshop .abyss-mineral-tile strong{font-size:9px}
 #submarineWorkshop .submarine-console-meter{grid-template-columns:70px 1fr;gap:4px}
 #submarineWorkshop .submarine-console-meter span{grid-column:2}
 
}


/* The hatch is drawn inside #menuOceanStage, not at the top of #menuScreen.
   Anchor the interactive hit area to that same stage coordinate system. */
#menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage #submarineWorkshopBtn.abyss-laboratory-hatch{
 position:absolute!important;
 left:50%!important;
 top:var(--abyss-hatch-y,103px)!important;
 transform:translate(-50%,-50%)!important;
 width:calc(108px * var(--abyss-hatch-scale,1))!important;
 height:calc(47px * var(--abyss-hatch-scale,1))!important;
 z-index:12!important;
 pointer-events:auto!important;
 cursor:pointer!important;
 touch-action:manipulation!important;
}
#menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage #submarineWorkshopBtn.abyss-laboratory-hatch .abyss-hatch-label{
 opacity:0!important;
 transition:opacity .16s ease!important;
}
#menuScreen.ocean-menu-v2.submarine-menu #menuOceanStage #submarineWorkshopBtn.abyss-laboratory-hatch:is(:hover,:focus-visible) .abyss-hatch-label{
 opacity:1!important;
}

/* The full-screen command bridge is the only laboratory presentation. */
#submarineWorkshop.abyss-cockpit-screen > .modal-card,
#submarineWorkshop.abyss-cockpit-screen .submarine-console-overview{display:none!important}
#submarineWorkshop.abyss-cockpit-screen .abyss-cockpit-console .abyss-cockpit-visor{display:flex!important}

/* Readable command controls and geological sample labels. */
#submarineWorkshop .abyss-cockpit-console{width:min(1100px,78vw);height:clamp(320px,48dvh,465px)}
#submarineWorkshop .abyss-control-deck{grid-template-columns:repeat(6,minmax(82px,1fr));gap:7px}
#submarineWorkshop .abyss-control-key{min-height:62px;padding:8px 5px;white-space:normal;overflow-wrap:normal;word-break:normal;line-height:1.3;text-align:center;font-size:clamp(10px,.92vw,13px)}
#submarineWorkshop .abyss-mineral-tile{align-items:flex-start;overflow:visible}
#submarineWorkshop .abyss-mineral-tile strong{overflow-wrap:break-word;word-break:normal;hyphens:auto;line-height:1.35;font-size:clamp(11px,.85vw,14px)}
#submarineWorkshop .abyss-mineral-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1100px){#submarineWorkshop .abyss-cockpit-console{left:58%;width:min(860px,84vw)}#submarineWorkshop .abyss-control-deck{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){#submarineWorkshop .abyss-cockpit-console{left:50%;width:97vw;height:clamp(315px,57dvh,510px)}#submarineWorkshop .abyss-control-key{min-height:48px;font-size:11px}}

/* Bridge refinement: retain all existing real interactive controls while
 * making the physical dashboard and its labels readable at every viewport. */
#submarineWorkshop .abyss-cockpit-console{
 left:60%;width:min(980px,74vw);
 bottom:clamp(24px,5dvh,48px);
 height:clamp(320px,49dvh,465px);
 border:5px solid #617e91;border-top:9px solid #9bb4bd;
 border-bottom:9px solid #122739;
 background:linear-gradient(156deg,#5c7587 0%,#243e54 12%,#0b2336 54%,#284454 96%);
 box-shadow:0 23px 54px #01070de8,0 0 0 2px #05131f,
 inset 0 3px 0 #cadbd774,inset 0 -12px 20px #030d18ce;
}
#submarineWorkshop .abyss-cockpit-visor{
 border-color:#78a0ab;border-bottom-color:#274757;
 background:linear-gradient(162deg,#082a3c,#071a2e 65%,#031421);
 box-shadow:0 0 0 4px #071a27,inset 0 0 20px #0f99af29,
 0 8px 16px #000c;
}
#submarineWorkshop .abyss-visor-heading{
 background:linear-gradient(108deg,#174359,#0b2a40 58%,#173549);
 border-bottom:1px solid #69c5ce61;min-height:36px;
}
#submarineWorkshop .abyss-visor-heading strong{font-size:clamp(15px,1.4vw,21px);letter-spacing:.035em}
#submarineWorkshop .abyss-visor-body{padding:12px 16px 15px}
#submarineWorkshop .abyss-control-deck{
 grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;padding:2px 2px 6px;
}
#submarineWorkshop .abyss-control-key{
 min-height:66px;font:800 clamp(11px,.87vw,13px)/1.25 Inter,system-ui,sans-serif;
 letter-spacing:.02em;overflow-wrap:normal;word-break:normal;
 padding:8px 5px 9px;border:2px solid #6899aa;border-bottom:5px solid #061723;
 border-radius:9px;background:linear-gradient(175deg,#335a70 0%,#102b40 80%);
 box-shadow:inset 0 2px 0 #b9edeb45,0 4px 0 #061520,0 7px 12px #0008;
 transition:background .15s ease,border-color .15s ease,transform .12s ease;
}
#submarineWorkshop .abyss-control-key .abyss-control-icon{
 font-size:clamp(18px,1.55vw,24px);filter:drop-shadow(0 0 3px #24c7df65)
}
#submarineWorkshop .abyss-control-key:is(:hover,:focus-visible){
 background:linear-gradient(165deg,#3c7183,#184055);
 border-color:#b7d9d8;filter:none
}
#submarineWorkshop .abyss-control-key.is-active{
 background:linear-gradient(170deg,#756741,#384f54);
 border-color:#f2d08b;border-bottom-color:#76562f;
 box-shadow:inset 0 2px 0 #fff3bd6e,0 3px 0 #6e4b26,0 0 20px #eab96042
}
#submarineWorkshop .submarine-console-card{
 min-height:128px;border:1px solid #528396;border-radius:9px;
 background:linear-gradient(156deg,#153d53,#091d2d);
 box-shadow:inset 0 1px 0 #a2edf023;
}
#submarineWorkshop .submarine-console-card strong{font-size:clamp(12px,1vw,15px);line-height:1.3}
#submarineWorkshop .submarine-console-card p{font-size:11px;line-height:1.5}
#submarineWorkshop .submarine-console-card button:enabled:hover,
#submarineWorkshop .abyss-visor-action:hover{background:#22728a;border-color:#c4e0dc}
#submarineWorkshop .abyss-mineral-tile{align-items:center;overflow:hidden;min-height:66px}
#submarineWorkshop .abyss-mineral-tile strong{font-size:clamp(11px,.94vw,13px)}
#submarineWorkshop .abyss-cockpit-exit{border-color:#b1b6af;color:#fae6b8}
@media(max-width:1100px){
 #submarineWorkshop .abyss-cockpit-console{left:58%;width:82vw;height:clamp(315px,52dvh,460px)}
 #submarineWorkshop .abyss-control-deck{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 #submarineWorkshop .abyss-control-key{min-height:51px;flex-direction:row;font-size:11px}
 #submarineWorkshop .abyss-control-key .abyss-control-icon{font-size:19px}
}
@media(max-width:700px){
 #submarineWorkshop .abyss-cockpit-console{
  left:50%;width:97vw;height:clamp(314px,59dvh,505px);bottom:23px;
  padding:10px 8px 9px;border-width:3px;border-top-width:6px;border-bottom-width:6px
 }
 #submarineWorkshop .abyss-visor-heading{min-height:29px;padding:7px 9px}
 #submarineWorkshop .abyss-visor-heading strong{font-size:13px}
 #submarineWorkshop .abyss-visor-body{padding:7px 9px 11px}
 #submarineWorkshop .abyss-control-key{min-height:43px;font-size:10px;padding:5px 4px;border-bottom-width:3px}
 #submarineWorkshop .abyss-control-key .abyss-control-icon{font-size:15px}
 #submarineWorkshop .submarine-console-card p{font-size:10px}
}
@media(max-height:540px) and (orientation:landscape){
 #submarineWorkshop .abyss-cockpit-console{
  left:59%;width:min(870px,80vw);height:73dvh;bottom:22px
 }
 #submarineWorkshop .abyss-control-key{min-height:35px;padding:3px 4px;font-size:10px}
 #submarineWorkshop .abyss-control-deck{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
 #submarineWorkshop .abyss-control-key .abyss-control-icon{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
 #submarineWorkshop .abyss-control-key{transition:none}
}

/* IMPORTANT: inventory CSS defines auto-fit columns on this legacy class.
 * Override its columns explicitly so the monitor sits ABOVE six compact keys.
 * This corrects the stretched 300px-tall buttons seen in desktop smoke images. */
#submarineWorkshop .submarine-workshop-grid{
 grid-template-columns:minmax(0,1fr)!important;
 grid-template-rows:minmax(0,1fr) auto!important;
 grid-auto-flow:row!important;
 margin:0!important;align-items:stretch;gap:10px;
}
#submarineWorkshop .submarine-workshop-grid>.abyss-cockpit-visor{
 grid-column:1!important;grid-row:1!important;min-width:0;width:100%;max-width:100%;
}
#submarineWorkshop .submarine-workshop-grid>.abyss-control-deck{
 grid-column:1!important;grid-row:2!important;min-width:0;width:100%;max-width:100%;
 align-content:end;align-items:stretch;
}
@media(max-width:1100px){
 #submarineWorkshop .submarine-workshop-grid{gap:6px}
}

/* Desktop cinematic layout: reveal the entire seated pilot left of the real command monitor. */
@media(min-width:1101px){
 #submarineWorkshop .abyss-cockpit-console{left:65%;width:min(865px,68vw);height:clamp(310px,47dvh,435px)}
 #submarineWorkshop .abyss-visor-body{padding:11px 14px 13px}
}
@media(min-width:701px) and (max-width:1100px){
 #submarineWorkshop .abyss-cockpit-console{left:62%;width:min(750px,73vw);height:clamp(295px,48dvh,420px)}
}

/* Honest more-content indication in the submarine research monitor. */
#submarineWorkshop .abyss-visor-scroll-hint{
 flex:none;min-height:17px;display:block;z-index:4;text-align:center;
 background:linear-gradient(180deg,#102e40,#06202e);border-top:1px solid #438a9b6b;
 color:#bfdedb;font:800 9px/17px Inter,system-ui,sans-serif;letter-spacing:.055em
}
#submarineWorkshop .abyss-visor-scroll-hint[hidden]{display:none!important}


/* Cinematic console finish: dark metal, restrained amber and cyan practicals. */
#submarineWorkshop.abyss-cockpit-screen{background:#03101c!important}
#submarineWorkshop .abyss-cockpit-console{
 background:linear-gradient(135deg,#1a3145 0%,#0b2234 27%,#091d2e 67%,#254054 100%);
 border-color:#45677b;border-top-color:#86adbc;
 box-shadow:0 23px 50px #000c,0 0 34px #0bb9d01d,
 inset 0 2px 0 #b8e2ed40,inset 0 -7px 16px #020913;
}
#submarineWorkshop .abyss-cockpit-visor{
 border-color:#64899c;border-top-color:#a0c8d1;
 background:radial-gradient(ellipse at 50% 0%,#14526b,#071e30 65%,#041420);
 box-shadow:0 0 0 4px #051724,inset 0 0 24px #2ae0ed1a,0 9px 24px #000b;
}
#submarineWorkshop .abyss-control-key{
 background:linear-gradient(158deg,#25536a 0%,#15384d 35%,#0a2032 100%);
 border-color:#527f96;border-top-color:#7f9fae;
}
#submarineWorkshop .abyss-control-key:hover{filter:brightness(1.12)}
#submarineWorkshop .abyss-cockpit-chrome{
 background:linear-gradient(180deg,rgba(1,12,22,.9),rgba(1,12,22,0));
}
@media(prefers-reduced-motion:reduce){
 #submarineWorkshop .abyss-control-key{transition:none!important}
}


/* Wide-screen 2.5D composition: preserve the panoramic sea instead of
 * covering it with a huge floating tablet. Mobile keeps the large controls. */
@media(min-width:701px){
 #submarineWorkshop .abyss-cockpit-console{
  left:50%!important;bottom:clamp(10px,1.4dvh,18px)!important;
  width:min(900px,72vw)!important;
  height:clamp(226px,31dvh,304px)!important;
  padding:11px 14px 10px!important;
  border-width:4px!important;border-top-width:6px!important;
  border-radius:24px 24px 18px 18px!important;
 }
 #submarineWorkshop .submarine-workshop-grid{
  gap:7px!important;
 }
 #submarineWorkshop .abyss-control-key{min-height:54px!important}
}

/* Mobile cockpit header is concise and does not overlap its escape hatch. */
@media(max-width:700px){
 #submarineWorkshop .abyss-cockpit-chrome>span:first-child{
  max-width:calc(100vw - 170px);
  min-width:0;font-size:0!important;overflow:hidden;white-space:nowrap;
 }
 #submarineWorkshop .abyss-cockpit-chrome>span:first-child::before{
  content:"ABYSSAL / CABINE";font:800 11px Inter,system-ui,sans-serif;
  letter-spacing:.10em;color:#dffaff;
 }
}

/* Cockpit is the only main-menu presentation for now. Prevent old ocean menu flashes
   and disable the hatch/exit until that route is intentionally restored. */
body:not(.game-active):not(.abyss-hatch-navigation) #menuScreen{visibility:hidden!important;pointer-events:none!important}
body:not(.abyss-hatch-navigation) #menuScreen #submarineWorkshopBtn.abyss-laboratory-hatch{display:none!important;pointer-events:none!important}
#submarineWorkshop #submarineWorkshopClose{display:block!important}

/* Match the persistent menu themes inside the physical submarine console. */
#submarineWorkshop .abyss-shop-action{
 background:linear-gradient(110deg,#122329,#285747 49%,#132c2b)!important;
 color:#e5fff2!important;border:1px solid #94c8ae!important;
 box-shadow:inset 0 0 0 1px #a4dfba55,0 0 14px #69dba64f!important
}
#submarineWorkshop .abyss-shop-action:hover,#submarineWorkshop .abyss-shop-action:focus-visible{
 background:linear-gradient(110deg,#173038,#34715b 49%,#193a37)!important;border-color:#c0ead3!important
}
#submarineWorkshop .abyss-codex-action{
 position:relative!important;overflow:hidden!important;
 background:linear-gradient(145deg,#a78051,#dfc38a 50%,#7e5938)!important;
 color:#3e2817!important;border:2px solid #8c6540!important;
 font-family:Georgia,'Times New Roman',serif!important;
 box-shadow:inset 0 0 0 2px #f9e5b477,0 3px 9px #0008!important
}
#submarineWorkshop .abyss-codex-action:hover,#submarineWorkshop .abyss-codex-action:focus-visible{
 background:linear-gradient(145deg,#b48c59,#ead19c 50%,#89613e)!important;border-color:#b38a60!important
}

/* Online rooms live in the same central visor, not a floating modal. */
#submarineWorkshop #cockpitOnlineDiveBtn{background:#123d50;border-color:#76d5df;color:#d9faff;min-height:35px;justify-self:start}
#submarineWorkshop #roomsScreen.abyss-cockpit-embedded .room-modal{width:100%;max-width:none;min-width:0;box-sizing:border-box;overflow:visible}
#submarineWorkshop #roomsScreen.abyss-cockpit-embedded .room-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(135px,100%),1fr));gap:8px}
#submarineWorkshop #roomsScreen.abyss-cockpit-embedded .text-field{min-width:0;width:100%;box-sizing:border-box}