#app{max-width:900px;margin:0 auto;padding:14px clamp(14px,4vw,28px) 44px}.wb-title{font-family:var(--poc-serif);font-size:20px}.wb-hud{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.wb-hud>*{display:block}.wb-k{grid-row:1;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--poc-muted)}.wb-v{grid-row:2;font-family:var(--poc-serif);font-size:clamp(18px,4.5vw,26px);font-variant-numeric:tabular-nums;line-height:1.1}.wb-ok{color:var(--poc-ok)}.wb-bad{color:var(--poc-danger)}.wb-sec{margin-bottom:16px}.wb-sec-k{font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--poc-brass-2);margin:0 0 8px}.wb-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.wb-slot{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font:inherit;text-align:left;color:var(--poc-foam);display:flex;flex-direction:column;gap:6px;background:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-left:4px solid rgba(255,255,255,.2);border-radius:12px;padding:11px 12px;min-height:78px;transition:border-color .15s ease,background .15s ease,transform .06s ease}.wb-slot:active{transform:translateY(1px)}.wb-slot.is-ok{border-left-color:var(--poc-ok)}.wb-slot.is-bad{border-left-color:var(--poc-danger);background:#e25a4c1f;animation:wb-alarm 1s ease-in-out infinite}.wb-slot.is-sel{border-color:var(--poc-brass-2);box-shadow:0 0 0 1px var(--poc-brass-2)}@keyframes wb-alarm{0%,to{box-shadow:0 0 #e25a4c00}50%{box-shadow:0 0 0 3px #e25a4c59}}.wb-slot-role{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--poc-brass-2)}.wb-slot-name{font-weight:600;font-size:14px}.wb-slot-name i{color:var(--poc-muted);font-weight:400}.wb-slot-flag{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--poc-danger)}.wb-bar{display:block;height:7px;border-radius:999px;background:#0000004d;overflow:hidden}.wb-bar>i{display:block;height:100%;border-radius:999px;transition:width .12s linear}.wb-bar--ok{background:var(--poc-ok)}.wb-bar--warn{background:var(--poc-brass-2)}.wb-bar--bad{background:var(--poc-danger)}.wb-bar--renew{background:linear-gradient(90deg,var(--poc-teal),var(--poc-ok))}.wb-action{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:40px;margin:4px 0 16px;padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#ffffff05;font-size:13px}.wb-action.is-active{border-color:#f0c75e4d;background:#f0c75e0f}.wb-action-name{font-weight:700}.wb-flash{color:var(--poc-brass-2);font-weight:600}.wb-roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.wb-crew{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font:inherit;text-align:left;color:var(--poc-foam);display:flex;flex-direction:column;gap:6px;background:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px;transition:border-color .15s ease,opacity .15s ease,transform .06s ease}.wb-crew:active{transform:translateY(1px)}.wb-crew.is-sel{border-color:var(--poc-brass-2);box-shadow:0 0 0 1px var(--poc-brass-2)}.wb-crew.is-watch{background:#4ac09212}.wb-crew.is-expired{background:#e25a4c1f;border-color:#e25a4c66}.wb-crew.is-ashore{opacity:.6;cursor:default}.wb-crew-top{display:flex;justify-content:space-between;align-items:center;gap:6px}.wb-crew-top b{font-size:13.5px;font-weight:600}.wb-crew-st{font-size:11px;color:var(--poc-muted);text-transform:capitalize}.wb-role{flex:none;font-size:9px;font-weight:800;letter-spacing:.5px;padding:2px 6px;border-radius:6px;color:var(--poc-ink)}.wb-role--Mate{background:var(--poc-brass-2)}.wb-role--AB{background:#5aa9e6}.wb-role--Engineer{background:var(--poc-ok)}.wb-role--Oiler{background:#b79cff}.wb-help{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--poc-foam)}.wb-help b{color:var(--poc-brass-2)}@media(max-width:520px){.wb-hud{grid-template-columns:repeat(4,1fr);gap:4px}.wb-roster{grid-template-columns:1fr 1fr}}.wb-scene{position:relative;margin:12px 0 14px;border-radius:var(--poc-radius);overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:var(--poc-shadow);background:#06141f}.wb-canvas{display:block;width:100%;height:clamp(132px,26vw,182px)}.wb-banner{position:absolute;top:10px;left:50%;transform:translate(-50%) translateY(-10px);display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 16px;border-radius:999px;background:#060e16d1;border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;text-align:center;white-space:nowrap}.wb-banner.is-show{opacity:1;transform:translate(-50%) translateY(0)}.wb-banner b{font-size:13px;font-weight:800;letter-spacing:.5px}.wb-banner span{font-size:11px;color:var(--poc-muted)}.wb-banner--alarm{border-color:#e25a4c99;animation:wb-banner-pulse .8s ease-in-out infinite}.wb-banner--alarm b{color:var(--poc-danger)}.wb-banner--info{border-color:#5aa9e68c}.wb-banner--info b{color:#7fc1f0}.wb-banner--good{border-color:#4ac09299}.wb-banner--good b{color:var(--poc-ok)}@keyframes wb-banner-pulse{0%,to{box-shadow:0 0 #e25a4c00}50%{box-shadow:0 0 16px 1px #e25a4c80}}.wb-vignette{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:4;box-shadow:inset 0 0 110px 16px #e25a4c8c;opacity:0;transition:opacity .3s ease}