/* CORSARI STORM · BLACK SAILS · V1.8.1 DESKTOP EXPANSION
   Strictly desktop-only presentation. No game state, selectors or bets touched.
   Original V1.8 mobile cascade stays byte-identical at viewports under 1100px. */
@media screen and (min-width:1100px){
  .shell{
    width:calc(100% - 48px)!important;
    max-width:1920px!important;
    padding:16px clamp(16px,1.4vw,28px) 36px!important;
    margin-inline:auto!important;
  }
  .masthead{
    min-height:120px;
    padding:15px clamp(20px,1.7vw,36px);
    gap:18px;
    margin-bottom:16px;
  }
  .logo-lockup{flex:0 1 auto;gap:14px}
  .logo-icon{height:99px;width:99px}
  .logo-text b{font-size:clamp(34px,2.8vw,50px)}
  .logo-text small{font-size:11px}
  .logo-text span{font-size:10px}
  .mast-actions{max-width:none;gap:7px;align-content:center}
  .mast-actions .top-btn{min-height:43px;padding:9px 12px}
  .mast-actions .tiny-chip{min-height:39px}
  .ship-belt{padding:10px 12px;margin:11px 0 13px;gap:8px}
  .ship-belt>span{font-size:11px;padding:8px 11px}
  .dash-overview{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
  .dash-overview>.kpi{min-height:111px;padding:18px 18px 15px}
  .dash-overview .kpi strong{font-size:clamp(27px,2vw,38px)}
  .dash-overview .kpi-label{font-size:12px}
  .dash-overview .kpi small{font-size:11px}
  .live-risk{padding:16px 20px;margin:16px 0 18px}
  .live-risk-head strong{font-size:clamp(20px,1.55vw,27px)}
  .play-layout{gap:18px;margin-top:20px}
  .play-main,.play-side{gap:18px}
  .bet-card{min-height:345px;padding:24px 24px 19px!important}
  .prediction-text{font-size:clamp(37px,3.6vw,64px)}
  .prediction-amount{font-size:clamp(74px,6vw,120px)}
  .prediction-amount.amount-long{font-size:clamp(55px,4.8vw,95px)}
  .treasure-input{padding:20px!important}
  .treasure-top h2{font-size:clamp(25px,2vw,34px)}
  .gem-button{min-height:132px!important}
  .manual-ops{gap:10px}
  .manual-button{min-height:62px;font-size:12px}
  .panel{padding:18px}
  .panel-head{font-size:13px}
  .scale-step{padding:10px 2px}
  .scale-step b{font-size:clamp(12px,.95vw,16px)}
  .cycle-panel{align-self:start}
  .setup-page{max-width:1680px;min-height:calc(100svh - 175px);grid-template-columns:minmax(340px,.88fr) minmax(520px,1.12fr);gap:clamp(30px,4vw,86px);align-items:start;margin-inline:auto}
  .setup-side{position:sticky;top:25px;padding:28px 15px 0}
  .setup-side .setup-mascot{height:clamp(275px,28vw,430px);max-height:430px}
  .setup-side h1{font-size:clamp(35px,3.5vw,58px)}
  .setup-side p{font-size:15px;line-height:1.55}
  .setup-form{width:100%;max-width:none;padding:28px!important}
  .setup-form .strategy-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .landing{width:min(1400px,100%);max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(430px,.9fr);gap:clamp(35px,6vw,120px);margin-inline:auto;min-height:calc(100svh - 180px)}
  .landing-graphic{height:min(590px,70vh);min-height:400px}
  .landing-graphic .pirate-illustration{width:min(560px,100%)}
  .login-card{max-width:600px;padding:42px!important}
  .login-card h1{font-size:clamp(42px,3.5vw,64px)}
  .stage-heading{margin:28px auto 27px}
  .stage-heading h1{font-size:clamp(43px,3.3vw,64px)}
  .stage-heading p{font-size:14px}
  .seat-layout,.stop-page{gap:20px;grid-template-columns:minmax(0,1.45fr) minmax(340px,.8fr)}
  .seat-workspace,.stop-page .lock-panel{padding:27px!important}
  .seat-guide,.stop-guide{padding:22px!important}
  .seat-layout .selection-grid{gap:16px}
  .seat-layout .selection-option{min-height:230px}
  .pattern-example{padding:12px 9px}
  .stop-page .stop-figures{gap:11px}
  .disclaimer{margin-top:24px;padding:24px 8px 12px;font-size:11px}
}
/* Full three-column bridge of the ship. This is distinct from the stacked phone UI. */
@media screen and (min-width:1320px){
  .play-layout{
    display:grid;
    grid-template-columns:minmax(242px,.86fr) minmax(440px,1.58fr) minmax(305px,1fr);
    grid-template-areas:
      'history prediction scale'
      'ledger controls scale';
    gap:18px;
    align-items:start;
  }
  .play-layout>.play-main,.play-layout>.play-side{display:contents!important}
  .play-layout .history-panel{grid-area:history;min-height:350px;align-self:stretch}
  .play-layout .bet-card{grid-area:prediction;min-height:350px}
  .play-layout .cycle-panel{grid-area:scale;align-self:start}
  .play-layout .ledger-panel{grid-area:ledger;align-self:start;min-height:170px}
  .play-layout .treasure-input{grid-area:controls;align-self:start}
  .play-layout .history-panel .history-track{gap:7px;margin-bottom:19px}
  .play-layout .history-panel .column-view{gap:7px;align-content:start}
  .play-layout .history-panel .road-column{margin-bottom:4px}
  .play-layout .treasure-input .gem-button{min-height:clamp(118px,9.4vw,175px)!important}
  .play-layout .bet-card .prediction-text{font-size:clamp(34px,3.0vw,65px)}
  .play-layout .bet-card .prediction-amount{font-size:clamp(65px,5vw,112px)}
  .play-layout .bet-card .prediction-amount.amount-long{font-size:clamp(50px,4.4vw,88px)}
  .play-layout .bet-card .bet-upper{row-gap:10px}
  .play-layout .cycle-panel .scale-step{padding:9px 1px}
  .play-layout .cycle-panel .scale-step b{font-size:clamp(11px,.83vw,16px)}
  .play-layout .cycle-panel .cycle-stats{gap:9px}
  .play-layout .ledger-panel .ledger-row{gap:7px}
}
/* Medium desktop still uses two generously proportioned columns. */
@media screen and (min-width:1100px) and (max-width:1319px){
  .play-layout{grid-template-columns:minmax(0,1.44fr) minmax(325px,.86fr);align-items:start}
  .play-main,.play-side{display:flex;flex-direction:column}
  .play-main .history-panel,.play-side .ledger-panel{min-height:145px}
  .play-main .bet-card{min-height:335px}
  .play-side .cycle-panel .scale-step{padding:8px 1px}
  .play-side .cycle-panel .scale-step b{font-size:12px}
}
/* Keep the bridge controls on one line on ordinary 1366–1600 px monitors.
   The self-explanatory icons retain their full browser hover titles. */
@media screen and (min-width:1100px) and (max-width:1699px){
  .masthead{flex-wrap:nowrap;gap:12px;min-height:104px;padding:11px 15px}
  .logo-lockup{gap:8px;flex:0 1 auto;min-width:310px}
  .logo-icon{width:78px;height:82px}
  .logo-text b{font-size:clamp(28px,2.45vw,39px)}
  .logo-text small{font-size:9px}
  .logo-text span{font-size:8px}
  .mast-actions{flex-wrap:nowrap;gap:5px;min-width:0;flex:0 1 auto}
  .mast-actions .top-btn{min-width:40px;min-height:40px;padding:8px 9px;white-space:nowrap}
  .mast-actions .tiny-chip{min-height:38px;padding:7px}
  .mast-actions .profile-top>span:last-child,
  .mast-actions .debt-top>span,
  .mast-actions .balance-top>span,
  .mast-actions .observe-top>span{display:none}
  .play-layout .stiva-card{padding:18px 18px 14px!important;min-height:300px}
  .play-layout .stiva-sign{margin:5px auto;padding:4px 10px}
  .play-layout .stiva-icon{font-size:28px}
  .play-layout .stiva-sign h2{font-size:clamp(30px,2.65vw,40px);letter-spacing:.015em;margin:2px 0}
  .play-layout .stiva-sign p{font-size:19px;margin:6px 0 7px}
  .play-layout .stiva-sign small{font-size:11px;line-height:1.35}
  .play-layout .stiva-status{min-height:35px;padding:4px 9px;margin:3px auto;font-size:11px}
  .play-layout .stiva-status .warning-triangle{width:23px;height:23px}
  .play-layout .stiva-foot{margin-top:5px}
}
/* Laptop screens: put the actual prediction higher without shrinking controls. */
@media screen and (min-width:1100px) and (max-height:900px){
  .masthead{min-height:92px;padding-block:8px}
  .logo-icon{height:70px;width:70px}
  .ship-belt{padding:7px 9px;margin:7px 0 10px}
  .dash-overview{gap:10px;margin-bottom:10px}
  .dash-overview>.kpi{min-height:91px;padding:11px 14px}
  .dash-overview .kpi strong{font-size:clamp(24px,2vw,33px)}
  .live-risk{padding:10px 13px!important;margin:10px 0 13px!important;gap:7px 12px}
  .live-risk p{font-size:11px;line-height:1.3}
  .live-risk-road{padding:6px!important}
  .risk-actions .btn{min-height:36px!important;padding:7px 10px}
  .play-layout{margin-top:12px}
}