/* v100 — HUD overlay: header compacto + pills flutuantes + mar em tela cheia (mobile horizontal + desktop). */
@media (orientation:landscape) and (hover:none) and (pointer:coarse),
(hover:hover) and (pointer:fine) and (min-width:761px){
  html,body,#root{
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
  }

  .campaign{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    overflow:hidden!important;
  }

  .campaignHeader{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:60;
    height:38px;
    min-height:38px;
    padding:0 8px 0 10px;
    display:grid;
    grid-template-columns:minmax(0,auto) minmax(0,1fr) 108px;
    align-items:center;
    gap:6px;
    border:0!important;
    background:linear-gradient(180deg,rgba(6,52,110,.9) 0%,rgba(6,52,110,.42) 100%)!important;
    box-shadow:0 4px 18px rgba(3,40,90,.28);
    pointer-events:none;
  }
  .campaignHeader>*{pointer-events:none}
  .campaignHeader>button{pointer-events:auto!important}

  .campaignBrand{
    gap:6px;
    min-width:0;
    align-items:center;
  }
  .campaignBrand>b{
    width:28px!important;
    height:28px!important;
    flex-basis:28px!important;
  }
  .campaignBrand span{
    display:flex!important;
    flex-direction:column;
    min-width:0;
    line-height:1.05;
    letter-spacing:.1em;
    font-size:7.5px;
    font-weight:900;
    color:#fff;
    text-transform:uppercase;
  }
  .campaignBrand span small{
    margin-top:1px;
    font-size:5.5px;
    letter-spacing:.16em;
    color:rgba(255,255,255,.78);
  }

  .campaignHeader>div:nth-child(2){
    text-align:center;
    min-width:0;
    padding:0 2px;
  }
  .campaignHeader>div:nth-child(2) small{
    display:block;
    font-size:5.5px;
    letter-spacing:.14em;
    color:rgba(196,230,255,.92);
    text-transform:uppercase;
  }
  .campaignHeader>div:nth-child(2) strong{
    display:block;
    margin-top:1px;
    font-family:inherit;
    font-size:11px;
    font-weight:800;
    line-height:1.15;
    color:#fff;
    text-shadow:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .campaignHeader>button{
    position:absolute;
    top:5px;
    right:44px;
    z-index:62;
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
    padding:0!important;
    overflow:visible;
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(255,255,255,.34)!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.18)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28)!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    letter-spacing:0!important;
    cursor:pointer;
  }
  .campaignHeader>button::before{
    content:""!important;
    display:block;
    width:24px;
    height:24px;
    margin:4px;
    background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 5 6 9H3v6h3l5 4V5z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' d='M15 9.5a3.5 3.5 0 0 1 0 5'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' d='M17.5 7a6.5 6.5 0 0 1 0 10'/%3E%3C/svg%3E") center/contain no-repeat;
    filter:drop-shadow(0 1px 0 rgba(7,83,163,.35));
  }
  .campaignHeader>button[data-sound='off']::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 5 6 9H3v6h3l5 4V5z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' d='M16 9l4 4M20 9l-4 4'/%3E%3C/svg%3E");
  }

  .pauseGameButton{
    position:absolute!important;
    top:5px!important;
    right:80px!important;
    z-index:62;
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(255,255,255,.34)!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.18)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28)!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    letter-spacing:0!important;
    backdrop-filter:none!important;
    cursor:pointer;
  }
  .pauseGameButton::before{
    content:""!important;
    width:10px!important;
    height:12px!important;
    margin:0!important;
    background:linear-gradient(90deg,#fff 0 3px,transparent 3px 7px,#fff 7px 10px)!important;
    border-radius:1px;
    filter:drop-shadow(0 1px 0 rgba(7,83,163,.35));
  }
  .pauseGameButton span{display:none!important}

  .fullscreenGameButton{
    position:absolute;
    top:5px;
    right:8px;
    z-index:62;
    width:32px;
    height:32px;
    padding:0;
    border:1px solid rgba(255,255,255,.34);
    border-radius:50%;
    background:rgba(255,255,255,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .fullscreenGameButton::before{
    content:"";
    display:block;
    width:12px;
    height:12px;
    margin:0 auto;
    border:1.5px solid #fff;
    border-radius:2px;
    box-shadow:3px -3px 0 -1px #fff;
  }
  html.farolFullscreen .fullscreenGameButton::before{
    width:11px;
    height:11px;
    border:0;
    box-shadow:none;
    background:
      linear-gradient(#fff,#fff) 0 4px/11px 1.5px no-repeat,
      linear-gradient(#fff,#fff) 0 6.5px/11px 1.5px no-repeat;
  }
  .fullscreenGameButton:focus-visible,
  .pauseGameButton:focus-visible,
  .campaignHeader>button:focus-visible{
    outline:2px solid #ffd047;
    outline-offset:2px;
  }

  .campaignHud{
    position:absolute;
    top:42px;
    left:8px;
    right:8px;
    z-index:55;
    height:auto!important;
    min-height:0;
    padding:0;
    display:flex;
    align-items:stretch;
    gap:5px;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    pointer-events:none;
  }
  .campaignHud>div{
    pointer-events:none!important;
    display:flex!important;
    flex-direction:column;
    justify-content:center;
    min-height:26px;
    background:rgba(8,45,100,.34)!important;
    border:1px solid rgba(255,255,255,.22)!important;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }
  .campaignHud small{
    font-size:5px!important;
    letter-spacing:.1em!important;
    color:rgba(255,255,255,.72)!important;
  }
  .campaignHud b{
    font-size:10px!important;
    color:#fff!important;
  }

  .campaignHud>div:nth-child(1){
    flex:0 0 auto;
    flex-direction:row!important;
    align-items:center;
    gap:5px;
    padding:3px 10px;
    border-radius:999px!important;
  }
  .campaignHud>div:nth-child(1)::before{
    content:"";
    flex:0 0 12px;
    width:12px;
    height:12px;
    border:1.5px solid rgba(255,255,255,.85);
    border-radius:50%;
    background:linear-gradient(#fff,#fff) 5.5px 3px/1px 4px no-repeat;
  }
  .campaignHud>div:nth-child(1) small{display:none}

  .campaignHud>div:nth-child(2){
    flex:1 1 auto;
    min-width:0;
    padding:3px 10px;
    border-radius:999px!important;
    align-items:center;
  }
  .liveStatus{
    width:100%;
    font-size:7px!important;
    font-weight:700!important;
    letter-spacing:.04em!important;
    color:#fff!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .campaignHud>div:nth-child(3),
  .campaignHud>div:nth-child(4),
  .campaignHud>div:nth-child(5){
    flex:0 0 auto;
    padding:3px 7px;
    border-radius:0!important;
    margin:0!important;
  }
  .campaignHud>div:nth-child(3){
    border-radius:999px 0 0 999px!important;
    padding-left:9px;
    border-right:none!important;
    margin-left:auto!important;
  }
  .campaignHud>div:nth-child(4){
    border-left:none!important;
    border-right:none!important;
    padding-left:4px;
    padding-right:4px;
  }
  .campaignHud>div:nth-child(5){
    border-radius:0 999px 999px 0!important;
    padding-right:9px;
    border-left:none!important;
  }
  .campaignHud>div:nth-child(3) small,
  .campaignHud>div:nth-child(4) small,
  .campaignHud>div:nth-child(5) small{
    font-size:6px!important;
  }
  .campaignHud>div:nth-child(3) b,
  .campaignHud>div:nth-child(4) b,
  .campaignHud>div:nth-child(5) b{
    font-size:11px!important;
  }

  .campaignSea{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }

  .campaignFooter{display:none!important}

  .arrivalTrack{
    left:auto!important;
    right:10px!important;
    bottom:8px!important;
    width:min(140px,calc(100% - 20px))!important;
    height:5px!important;
    border-radius:999px;
    background:rgba(6,30,60,.72)!important;
    z-index:50;
  }
  .arrivalTrack b{
    right:0!important;
    bottom:8px!important;
    font-size:6px!important;
    letter-spacing:.12em!important;
    color:#fff!important;
    text-shadow:0 1px 3px rgba(3,40,90,.65);
  }

  .windPanel{
    top:74px!important;
    left:8px!important;
    z-index:48!important;
  }
}

@media (orientation:landscape) and (hover:none) and (pointer:coarse){
  .campaign,
  .campaignSea{
    height:100dvh!important;
  }
  .fullscreenGameButton{display:none!important}
}

@media (orientation:landscape) and (hover:none) and (pointer:coarse) and (max-height:360px){
  .campaignHeader{height:34px;min-height:34px;padding:0 6px 0 8px}
  .campaignBrand>b{width:24px!important;height:24px!important;flex-basis:24px!important}
  .campaignBrand span{font-size:6.5px}
  .campaignBrand span small{font-size:5px}
  .campaignHeader>div:nth-child(2) strong{font-size:10px}
  .campaignHeader>button,.pauseGameButton,.fullscreenGameButton{
    top:4px!important;
    width:28px!important;
    min-width:28px!important;
    height:28px!important;
  }
  .pauseGameButton{right:72px!important}
  .campaignHeader>button{right:40px!important}
  .campaignHud{top:36px;gap:4px}
  .campaignHud>div{min-height:22px}
  .campaignHud b{font-size:9px!important}
  .campaignHud>div:nth-child(3) b,
  .campaignHud>div:nth-child(4) b,
  .campaignHud>div:nth-child(5) b{font-size:10px!important}
  .liveStatus{font-size:6px!important}
}

@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .campaignHeader{
    height:44px;
    min-height:44px;
    padding:0 12px 0 14px;
    grid-template-columns:minmax(0,auto) minmax(0,1fr) 120px;
  }
  .campaignBrand>b{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
  }
  .campaignBrand span{font-size:8.5px}
  .campaignBrand span small{font-size:6px}
  .campaignHeader>div:nth-child(2) small{font-size:6px}
  .campaignHeader>div:nth-child(2) strong{font-size:13px}
  .campaignHeader>button,
  .pauseGameButton,
  .fullscreenGameButton{
    top:6px!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
  }
  .pauseGameButton{right:88px!important}
  .campaignHeader>button{right:50px!important}
  .campaignHud{
    top:50px;
    left:12px;
    right:12px;
    gap:7px;
  }
  .campaignHud>div{min-height:30px}
  .campaignHud>div:nth-child(1){padding:4px 12px;gap:6px}
  .campaignHud>div:nth-child(1)::before{width:13px;height:13px;flex-basis:13px}
  .campaignHud>div:nth-child(2){padding:4px 12px}
  .campaignHud b{font-size:11px!important}
  .campaignHud>div:nth-child(3) small,
  .campaignHud>div:nth-child(4) small,
  .campaignHud>div:nth-child(5) small{font-size:7px!important}
  .campaignHud>div:nth-child(3) b,
  .campaignHud>div:nth-child(4) b,
  .campaignHud>div:nth-child(5) b{font-size:12px!important}
  .liveStatus{font-size:8px!important}
  .arrivalTrack{
    right:14px!important;
    bottom:10px!important;
    width:min(160px,calc(100% - 24px))!important;
    height:6px!important;
  }
  .arrivalTrack b{font-size:7px!important}
  .windPanel{top:84px!important;left:12px!important}
}