.rogue-shell{position:fixed;inset:0;z-index:50;color:#ebe3cc;background:#0a2026;font-family:Pretendard,sans-serif}
#rogueSea{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.rogue-top{position:absolute;top:0;left:0;right:0;padding:18px 26px;background:linear-gradient(#07171ef5,#07171ed9,transparent);pointer-events:none}
.rogue-top small{display:block;color:#a3bbb7;font-size:12px;margin-bottom:7px}
.rogue-top strong{font-size:18px;font-weight:650}
.rogue-readings{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:12px;font-size:12px;color:#b5c7bf}
.rogue-camera-options{display:grid;gap:10px;padding:14px 0;font-size:13px}
.rogue-camera-options label{display:flex;align-items:center;gap:8px}
.rogue-camera-options input[type=checkbox]{width:16px;height:16px}
.rogue-camera-options input[type=range]{width:100%;accent-color:#ba9d61}
.rogue-camera-options small{line-height:1.6}
.rogue-readings b{color:#f1dfac;margin-left:5px}
.rogue-boss-state{margin-top:12px;color:#f1b189;letter-spacing:.04em}
.rogue-radio{position:absolute;bottom:64px;left:20%;right:20%;font-size:16px;line-height:1.7;text-align:center;text-shadow:0 2px 4px #000;background:linear-gradient(90deg,transparent,#07171ed9,transparent);pointer-events:none}
.rogue-controls{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:14px;background:#07171ed9;font-size:11px;color:#b1bfb5}
.rogue-modal{position:absolute;inset:0;display:grid;place-items:center;background:#07151bd9;overflow:auto;padding:22px}
.rogue-modal[hidden]{display:none}
.rogue-chart{max-width:1000px;width:100%;padding:28px 40px;background:linear-gradient(100deg,#cec2a6e8,#dfd4b9e8),url('../assets/art/dispatch-folder-v1.png') center/cover;color:#293b39;box-shadow:8px 10px 0 #020d1055;border-top:5px solid #596b61}
.rogue-chart h1{font-family:Pretendard,sans-serif;font-size:32px;font-weight:700;margin:12px 0 16px}
.rogue-chart h2{font-size:28px}
.rogue-chart p{font-size:14px;line-height:1.7;margin:14px 0;color:#34443d}
.rogue-chart small{font-size:12px}
.rogue-depth-list{padding:12px 0;border-top:1px solid #69756677;border-bottom:1px solid #69756677;font-size:13px;letter-spacing:.14em}
.rogue-chart fieldset{padding:0;border:0;margin:18px 0}
.rogue-chart legend{font-size:12px;margin-bottom:9px;font-weight:650}
.rogue-captains,.rogue-builds{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.rogue-builds{grid-template-columns:repeat(3,1fr)}
.rogue-chart button{min-height:42px;background:#53645c14;color:#253b37;border:1px solid #60726766;border-radius:0;padding:10px 12px;font:inherit;text-align:left}
.rogue-chart button:hover{background:#53645c30}
.rogue-chart button[aria-pressed=true]{border:2px solid #2a554d;background:#6b8b6d38;padding:9px 11px}
.rogue-chart button b,.rogue-chart button small{display:block}
.rogue-chart button small{font-size:11px;line-height:1.5;margin-top:5px}
.rogue-portrait{display:block;height:100px;background-size:cover;background-position:50% 37%;margin-bottom:8px;filter:saturate(.8)}
.rogue-portrait.woo{background-image:url('../assets/art/woo-portrait-v3.png')}
.rogue-portrait.park{background-image:url('../assets/art/park-portrait-v3.png')}
.rogue-portrait.han,.rogue-portrait.jeong{background:#c9c5bb}
.rogue-portrait canvas{width:100%;height:100%;object-fit:contain}
.rogue-seed{font-size:12px}.rogue-seed input{margin-left:12px;color:#243b38;border:0;border-bottom:1px solid #566e64;background:transparent;padding:7px;width:190px;font:inherit}
.rogue-chart .rogue-note{font-size:11px;color:#55685f}
.rogue-actions{display:flex;justify-content:space-between;gap:15px;margin-top:18px}
.rogue-actions button:last-child{background:#2d5149;color:#eee4cb;border-color:#2d5149;min-width:140px;text-align:center}
.rogue-log{max-width:680px}.rogue-log details{max-height:260px;overflow:auto}
@media(max-width:1050px){.rogue-chart{padding:20px 28px;max-width:850px}.rogue-chart h1{font-size:27px}.rogue-chart p{margin:9px 0;font-size:12px}.rogue-chart fieldset{margin:12px 0}.rogue-portrait{height:68px}.rogue-radio{left:10%;right:10%;font-size:14px}.rogue-top strong{font-size:15px}}

/* Departure is a place with a crew and a boat, not a form on a paper card. */
.rogue-modal:not([hidden]):has(.embark){padding:0;display:block;background:#101a20}
.embark{width:100%;position:relative;isolation:isolate;min-height:100%;height:100%;min-width:720px;min-height:580px;overflow:hidden;color:#e8e6d9;display:grid;grid-template-columns:minmax(220px,23%) 1fr minmax(290px,26%);grid-template-rows:auto 1fr auto;gap:0 4%;padding:44px 5% 32px}
.embark-scenery{position:absolute;z-index:-3;inset:0;background:#263238 url('../assets/art/departure-dock-v2.png') center/cover no-repeat}
.embark-ship{position:absolute;z-index:-2;left:59%;top:16%;width:35%;height:30%;pointer-events:none}
.embark-ship canvas{position:static;inset:auto;width:100%;height:100%;object-fit:contain;filter:brightness(.82) saturate(.8)}
.embark-ship-name{display:flex;flex-direction:column;gap:7px}
.embark-ship-name b{font-size:19px;font-weight:650}
.embark-ship-name span{font-size:12px;color:#bec9c1}
.embark-paints{display:flex;align-items:center;gap:7px;margin:10px 0 0}
.embark-paints button{width:29px;height:29px;background:#09191b66;padding:5px;border:1px solid transparent}
.embark-paints button[aria-pressed=true]{border-color:#e5d5a8}
.embark-paints i{display:block;width:100%;height:100%;background:#376368}
.embark-paints [data-hull-paint=ochre] i{background:#b59545}
.embark-paints [data-hull-paint=red] i{background:#a24c38}
.embark-paints small{font-size:10px;color:#a4b1ac;margin-left:5px}
.embark:before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,#081116eb 0%,#08111694 24%,#08111600 52%),linear-gradient(0deg,#081116ed 0%,#08111666 22%,transparent 47%,#0811163b 78%,#081116b3 100%);pointer-events:none}
.embark button,.embark input,.embark summary{font:inherit}
.embark button{border:0;border-radius:0;color:inherit;cursor:pointer}
.embark button:focus-visible,.embark summary:focus-visible,.embark input:focus-visible{outline:2px solid #ded6b6;outline-offset:5px}
.embark button:disabled{opacity:.5;cursor:default}
.embark-header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding-bottom:26px}
.embark-location{font-size:12px;color:#aeb8b4;letter-spacing:.06em}
.embark-header h1{font-family:Pretendard,sans-serif;font-weight:750;font-size:34px;letter-spacing:-.035em;line-height:1.2;margin:8px 0 0}
.embark-route{display:flex;gap:18px;font-size:12px;color:#99a7a9;align-self:start;margin:9px 0}
.embark-route b{color:#e8dfbf;font-weight:500}
.embark-route span{color:#6c7e80}
.embark-crew{grid-column:1;align-self:center;padding-bottom:25px;z-index:2}
.embark-crew h2{font-size:12px;font-weight:400;letter-spacing:.09em;color:#aeb8b4;margin:0 0 12px}
.embark-roster{display:flex;flex-direction:column;gap:1px}
.embark-roster button{display:flex;align-items:center;gap:18px;padding:9px 12px 9px 0;background:none;text-align:left;transition:none;color:#9aa8a8;min-height:48px}
.embark-roster button b{font-size:27px;font-weight:500;letter-spacing:-.04em}
.roster-number{font-size:10px;color:#849394;font-variant-numeric:tabular-nums}
.roster-mark{opacity:0;font-size:20px;margin-left:auto;color:#d8c699}
.embark-roster button[aria-pressed=true]{color:#f6ead0}
.embark-roster button[aria-pressed=true] b{font-weight:700}
.embark-roster button[aria-pressed=true] .roster-mark{opacity:1}
.embark-roster button:hover{color:#f6ead0;transform:translateX(4px)}
.embark-profile{margin-top:27px;border-top:1px solid #99b4b139;padding-top:18px;min-height:180px}
.embark-profile h3{font-size:16px;font-weight:600;margin:0 0 8px}
.embark-profile p{font-size:13px;line-height:1.65;color:#b2beb9;margin:0}
.embark-stats{font-size:12px;display:grid;gap:10px;margin:18px 0}
.embark-stats>div{display:grid;grid-template-columns:95px 1fr;align-items:center}
.embark-stats dt{color:#b6c2bb}
.embark-stats dd{margin:0;display:flex;align-items:center;gap:12px}
.embark-stats b{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;min-width:30px}
.embark-stats meter{width:100%;height:5px;background:#667a7a45}
.embark-stats meter::-webkit-meter-bar{background:#667a7a45;border:0;border-radius:0}
.embark-stats meter::-webkit-meter-optimum-value{background:#bfc8b7}
.embark-profile .embark-trade{font-size:12px;color:#d6bc8f}
.embark-person{position:absolute;z-index:-1;left:29%;bottom:16%;width:28%;height:65%;pointer-events:none}
.embark-person:after{content:"";position:absolute;bottom:0;left:20%;width:60%;height:3%;background:#020a0c80;border-radius:50%;filter:blur(7px);z-index:-1}
.embark-person canvas{position:static;inset:auto;display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:brightness(.85) saturate(.75)}
.embark-vessel{grid-column:3;grid-row:2;align-self:end;padding:24px 24px 28px;text-shadow:0 2px 6px #061014;position:relative;z-index:1}
.embark-vessel:before{content:"";position:absolute;inset:-24px -24px -12px -24px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 65% 80%,#08171bef 15%,#08171bbd 50%,#08171b00 76%)}
.embark-build-tabs{display:flex;margin:22px 0 22px;border-bottom:1px solid #c3d1c13b;gap:15px}
.embark-build-tabs button{background:none;padding:12px 0;color:#a5b3ac;white-space:nowrap;position:relative;font-size:13px;min-height:44px}
.embark-build-tabs button[aria-pressed=true]{color:#f3dfaf}
.embark-build-tabs button[aria-pressed=true]:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#cfb783}
.embark-build-tabs button:hover{color:#fff4d5}
.embark-build-info{min-height:142px}
.embark-build-info h2{font-family:Pretendard,sans-serif;font-weight:700;font-size:24px;line-height:1.35;margin:0 0 12px;letter-spacing:-.025em}
.embark-build-info p{font-size:14px;color:#c0c8bc;line-height:1.7;margin:0 0 6px}
.embark-build-info .embark-build-risk{color:#bcae92;font-size:12px}
.embark-key{font-size:12px;margin-top:17px;color:#ede4c9}
.embark-footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #a5b7ab39;padding-top:20px;z-index:3}
.embark-secondary{display:flex;align-items:center;gap:30px}
.embark-back{background:none;padding:12px 0;font-size:13px;min-height:44px}
.embark-back span{margin-right:8px}
.embark-footer details{position:relative;font-size:12px;color:#b4bfb7}
.embark-footer summary{cursor:pointer;padding:12px 0;min-height:44px;list-style:none}
.embark-footer summary:after{content:" +";color:#a79570;margin-left:6px}
.embark-footer details[open] summary:after{content:" −"}
.embark-footer details[open]{background:#162326;border:1px solid #65716a;position:absolute;left:14%;bottom:26px;padding:14px 22px;width:290px;box-shadow:0 10px 25px #020b0e80}
.embark-footer details[open] summary{padding-top:0}
.embark-footer .embark-story[open]{left:28%;width:400px}
.embark-footer details p{line-height:1.9;font-size:12px}
.embark-footer details label{display:block;margin:10px 0}
.embark-options input{width:100%;padding:10px;color:#efe5c6;background:#0d1a1e;border:1px solid #758476;outline-offset:2px;font-size:13px}
.embark-launch{display:flex;align-items:center;justify-content:space-between;gap:30px;background:#dbcc9f;padding:16px 24px;color:#17292b!important;font-size:16px!important;font-weight:650!important;min-width:245px;max-width:340px;min-height:54px}
.embark-launch:hover{background:#f0dfae}
@media(prefers-reduced-motion:reduce){.embark-person canvas{animation:none}.embark-roster button{transition:none}}
.embark-skill{margin-top:18px}
.embark-skill h3{font-size:16px}
.embark-skill kbd,.rogue-skill kbd{font-family:Pretendard,sans-serif;display:inline-grid;place-items:center;min-width:25px;height:25px;border:1px solid #a3b5ab77;font-size:12px;margin-right:8px;color:#ecdbaf}
.embark-skill small{display:block;font-size:11px;color:#bfae8d;margin-top:8px}
.rogue-skill{position:absolute;right:24px;bottom:62px;display:flex;align-items:center;gap:8px;min-width:190px;background:#102629ed;border:1px solid #aabb9277;color:#e8dfbf;text-align:left;border-radius:0;padding:12px 14px 16px}
.rogue-skill[hidden]{display:none}
.rogue-skill[aria-disabled=true]{border-color:#56706a;color:#a0b0a7}
.rogue-skill b,.rogue-skill small{display:block}
.rogue-skill b{font-size:14px}.rogue-skill small{font-size:11px;margin-top:3px}
.rogue-skill progress{position:absolute;bottom:0;left:0;width:100%;height:3px;border:0}
.rogue-skill progress::-webkit-progress-bar{background:#344c4c}
.rogue-skill progress::-webkit-progress-value{background:#b8ca9d}
.rogue-radio{right:25%;left:15%}
@media(max-width:1050px){.rogue-skill{right:12px;min-width:165px;bottom:55px}.rogue-radio{left:8%;right:26%;font-size:13px}.rogue-controls{font-size:10px}}

@media(min-width:1400px){
 .embark{padding:48px 5% 34px}.embark-crew{max-width:280px}.embark-roster button{min-height:54px}.embark-roster button b{font-size:30px}.embark-profile{margin-top:30px;padding-top:22px}.embark-vessel{max-width:380px}.embark-build-info{min-height:156px}
}
@media(max-width:1100px), (max-height:760px){
 .embark{padding:26px 32px 22px;grid-template-columns:210px 1fr 290px;column-gap:24px}
 .embark-header{padding-bottom:20px}.embark-header h1{font-size:27px}.embark-route{gap:10px;font-size:11px}
 .embark-crew{align-self:center;padding-bottom:14px}.embark-crew h2{margin-bottom:10px}
 .embark-roster button{min-height:37px;padding:5px 10px 5px 0}.embark-roster button b{font-size:24px}
 .embark-profile{margin-top:20px;padding-top:12px;min-height:0}.embark-stats{margin:6px 0 12px;gap:9px}.embark-stats>div{grid-template-columns:88px 1fr}
 .embark-skill{margin-top:16px}.embark-skill h3{font-size:14px}.embark-skill p{font-size:12px;line-height:1.6}.embark-skill small{font-size:10px}
 .embark-person{left:27%;bottom:17%;width:29%;height:61%}.embark-ship{left:62%;top:17%;width:32%;height:23%}
 .embark-vessel{padding:18px 20px 20px}.embark-ship-name b{font-size:17px}.embark-ship-name span{font-size:11px}
 .embark-build-tabs{gap:12px;margin:15px 0 16px}.embark-build-tabs button{font-size:11px;padding:8px 0;min-height:36px}
 .embark-build-info{min-height:110px}.embark-build-info h2{font-size:21px;margin-bottom:10px}.embark-build-info p{font-size:12px}.embark-build-info .embark-build-risk{font-size:11px}.embark-key{font-size:11px;margin-top:13px}
 .embark-paints{margin-top:9px}.embark-paints small{font-size:9px}.embark-paints button{width:25px;height:25px}
 .embark-footer{padding-top:15px}.embark-secondary{gap:22px}.embark-launch{min-width:210px;min-height:48px;font-size:14px!important;padding:14px 20px}
}
