/* WebView 83 compatibility. Newer engines retain graphics.css unchanged.
   Grid gap exists in Chromium 83, but flex gap, inset and dvh do not. */
@supports not (inset:0){
  .shell,.game-shell{min-height:100vh}
  .rail{height:100vh}
  .modal{max-height:90vh}
  .language-gate{min-height:100vh}

  /* Physical offsets for shorthand/logical insets unsupported by this WebView. */
  .modal-layer{top:0;right:0;bottom:0;left:0}
  #toast{left:20px;right:20px}
  .hero:before{top:9px;right:9px;bottom:9px;left:9px}
  .hero:after{left:36%;right:36%}
  .play-card:before,.stat:before,.podium-card:before{top:5px;right:5px;bottom:5px;left:5px}
  .play-card:after{right:-45px;left:auto}
  html[dir=rtl] .play-card:after{left:-45px;right:auto}
  .play-card .card-icon:after{top:5px;right:5px;bottom:5px;left:5px}
  .play-card .card-art{left:7px;right:auto}
  html[dir=rtl] .play-card .card-art{right:7px;left:auto}
  .switch:after{left:4px;right:auto}
  .switch.on:after{left:26px;right:auto}
  html[dir=rtl] .switch:after{right:4px;left:auto}
  html[dir=rtl] .switch.on:after{right:26px;left:auto}
  .language-gate:before{top:16px;right:16px;bottom:16px;left:16px}
  .language-gate:after,.brand-mark:after{top:0;right:0;bottom:0;left:0}
  .language-panel:before{top:9px;right:9px;bottom:9px;left:9px}
  .language-option>span:last-child:not(.language-caption):not(.language-native){right:22px;left:auto}
  .language-option[dir=rtl]>span:last-child:not(.language-caption):not(.language-native){left:22px;right:auto}
  .language-option[dir=ltr]>span:last-child:not(.language-caption):not(.language-native){right:22px;left:auto}
  .podium-medal:before{top:6px;right:6px;bottom:6px;left:6px}
  .podium-medal>b{right:-3px;left:auto}
  .brand-mark:before{right:-5px;left:auto}
  html[dir=rtl] .brand-mark:before{left:-5px;right:auto}
  .language-logo .brand-mark:before{right:-7px;left:auto}
  html[dir=rtl] .language-logo .brand-mark:before{left:-7px;right:auto}

  /* Flex spacing. Grid containers keep their working grid gaps. */
  .brand,.nav button,.topbar,.top-tools,.hero,.hero .eyebrow,.section-title,
  .play-card,.foot-note,.primary,.secondary,.button-row,.profile-head,
  .lesson-item,.progress-dots,.modal-header,.status-line,.game-top,
  .game-meta,.player-row,.player-info,.player-metrics,.game-controls,
  .dice-tray,.radio-row,.language-logo,.settings-table-preview,
  .settings-card-heading,.identity-edit,.board-option-meta,.setting-line,
  .settings-connection>summary,.settings-privacy>summary{gap:0;row-gap:0;column-gap:0}

  .rail>.nav{margin-top:56px}
  .brand .brand-mark{margin-right:13px;margin-left:0}
  html[dir=rtl] .brand .brand-mark{margin-left:13px;margin-right:0}
  .nav button>.icon{margin-right:14px;margin-left:0}
  html[dir=rtl] .nav button>.icon{margin-left:14px;margin-right:0}
  .topbar>*+*{margin-left:12px}
  html[dir=rtl] .topbar>*+*{margin-left:0;margin-right:12px}
  .top-tools>*+*{margin-left:11px}
  html[dir=rtl] .top-tools>*+*{margin-left:0;margin-right:11px}
  .hero .eyebrow:before{margin-right:8px;margin-left:0}
  html[dir=rtl] .hero .eyebrow:before{margin-left:8px;margin-right:0}
  .section-title>*+*{margin-left:12px}
  html[dir=rtl] .section-title>*+*{margin-left:0;margin-right:12px}
  .play-card>.card-icon{margin-right:20px;margin-left:0}
  html[dir=rtl] .play-card>.card-icon{margin-left:20px;margin-right:0}
  .card-arrow{margin-left:auto;margin-right:0}
  html[dir=rtl] .card-arrow{margin-right:auto;margin-left:0}
  .foot-note>.icon{margin-right:7px;margin-left:0}
  html[dir=rtl] .foot-note>.icon{margin-left:7px;margin-right:0}
  .primary>.icon,.secondary>.icon{margin-right:10px;margin-left:0}
  html[dir=rtl] .primary>.icon,html[dir=rtl] .secondary>.icon{margin-left:10px;margin-right:0}
  .button-row{margin-left:-6px;margin-right:-6px}
  .button-row>*{margin:8px 6px}
  .profile-head>.avatar{margin-right:24px;margin-left:0}
  html[dir=rtl] .profile-head>.avatar{margin-left:24px;margin-right:0}
  .lesson-item>.lesson-number{margin-right:12px;margin-left:0}
  html[dir=rtl] .lesson-item>.lesson-number{margin-left:12px;margin-right:0}
  .progress-dots>i+i{margin-left:8px}
  html[dir=rtl] .progress-dots>i+i{margin-left:0;margin-right:8px}
  .modal-header>*+*{margin-left:12px}
  html[dir=rtl] .modal-header>*+*{margin-left:0;margin-right:12px}
  .status-line>.pulse{margin-right:9px;margin-left:0}
  html[dir=rtl] .status-line>.pulse{margin-left:9px;margin-right:0}
  .game-top>*+*{margin-left:10px}
  html[dir=rtl] .game-top>*+*{margin-left:0;margin-right:10px}
  .game-meta>.pulse{margin-right:8px;margin-left:0}
  html[dir=rtl] .game-meta>.pulse{margin-left:8px;margin-right:0}
  .player-row>.player-metrics{margin-left:15px;margin-right:0}
  html[dir=rtl] .player-row>.player-metrics{margin-right:15px;margin-left:0}
  .player-info>.checker-avatar{margin-right:14px;margin-left:0}
  html[dir=rtl] .player-info>.checker-avatar{margin-left:14px;margin-right:0}
  .player-metrics>*+*{margin-left:20px}
  html[dir=rtl] .player-metrics>*+*{margin-left:0;margin-right:20px}
  .game-controls>*{margin:7px 12px}
  .dice-tray>.die+.die{margin-left:11px;margin-right:0}
  .radio-row>*+*{margin-left:20px}
  html[dir=rtl] .radio-row>*+*{margin-left:0;margin-right:20px}
  .language-logo>.brand-mark{margin-right:19px;margin-left:0}
  html[dir=rtl] .language-logo>.brand-mark{margin-left:19px;margin-right:0}
  .settings-table-preview>div+div{margin-left:24px}
  html[dir=rtl] .settings-table-preview>div+div{margin-left:0;margin-right:24px}
  .settings-card-heading>.icon{margin-right:12px;margin-left:0}
  html[dir=rtl] .settings-card-heading>.icon{margin-left:12px;margin-right:0}
  .identity-edit>.avatar{margin-right:21px;margin-left:0}
  html[dir=rtl] .identity-edit>.avatar{margin-left:21px;margin-right:0}
  .board-option-check{margin-left:7px;margin-right:0}
  html[dir=rtl] .board-option-check{margin-right:7px;margin-left:0}
  .setting-line>.setting-symbol{margin-right:14px;margin-left:0}
  html[dir=rtl] .setting-line>.setting-symbol{margin-left:14px;margin-right:0}
  .setting-line>.switch{margin-left:14px;margin-right:0}
  html[dir=rtl] .setting-line>.switch{margin-right:14px;margin-left:0}
  .settings-connection>summary>.icon{margin-right:12px;margin-left:0}
  html[dir=rtl] .settings-connection>summary>.icon{margin-left:12px;margin-right:0}
  .settings-connection>summary:after,.settings-privacy>summary:after{margin-left:auto;margin-right:3px}
  html[dir=rtl] .settings-connection>summary:after,html[dir=rtl] .settings-privacy>summary:after{margin-right:auto;margin-left:3px}
  /* SVG viewBox supplies the ratio when CSS aspect-ratio is unavailable. */
  .board-option-preview{height:auto;min-height:0}
  .board-option-preview svg,.board-option-preview .board-svg,.settings-mini-board .board-svg{width:100%;height:auto;min-height:0}

  @media(max-width:1050px){
    .play-card>.card-icon{margin-right:16px}
    html[dir=rtl] .play-card>.card-icon{margin-right:0;margin-left:16px}
  }
  @media(max-width:900px){
    .nav button>.icon{margin-right:12px}
    html[dir=rtl] .nav button>.icon{margin-right:0;margin-left:12px}
    .play-card>.card-icon,html[dir=rtl] .play-card>.card-icon{margin-left:0;margin-right:0}
    .card-arrow{right:19px;left:auto}
    html[dir=rtl] .card-arrow{left:19px;right:auto}
    .play-card .card-art{left:10px;right:auto}
    html[dir=rtl] .play-card .card-art{right:10px;left:auto}
    .settings-table-preview>div+div{margin-left:18px}
    html[dir=rtl] .settings-table-preview>div+div{margin-left:0;margin-right:18px}
  }
  @media(max-width:640px){
    .rail{left:8px;right:8px;top:auto;bottom:8px;width:auto;height:auto}
    .rail>.nav{margin-top:0}
    .nav{gap:0;column-gap:0;row-gap:0}
    .nav button+button{margin-left:2px}
    html[dir=rtl] .nav button+button{margin-right:2px;margin-left:0}
    .nav button>.icon,html[dir=rtl] .nav button>.icon{margin-left:0;margin-right:0;margin-bottom:7px}
    .brand .brand-mark{margin-right:10px}
    html[dir=rtl] .brand .brand-mark{margin-right:0;margin-left:10px}
    .topbar>*+*{margin-left:8px}
    html[dir=rtl] .topbar>*+*{margin-left:0;margin-right:8px}
    .top-tools>*+*{margin-left:8px}
    html[dir=rtl] .top-tools>*+*{margin-left:0;margin-right:8px}
    .hero:before{top:7px;right:7px;bottom:7px;left:7px}
    .play-card:before,.play-card .card-icon:after,.podium-card:before{top:4px;right:4px;bottom:4px;left:4px}
    .card-arrow{right:15px;left:auto}
    html[dir=rtl] .card-arrow{left:15px;right:auto}
    .profile-head>.avatar{margin-right:20px}
    html[dir=rtl] .profile-head>.avatar{margin-right:0;margin-left:20px}
    .lesson-item>.lesson-number{margin-right:10px}
    html[dir=rtl] .lesson-item>.lesson-number{margin-right:0;margin-left:10px}
    .game-top>*+*{margin-left:9px}
    html[dir=rtl] .game-top>*+*{margin-left:0;margin-right:9px}
    .player-row>.player-metrics{margin-left:8px}
    html[dir=rtl] .player-row>.player-metrics{margin-left:0;margin-right:8px}
    .player-info>.checker-avatar{margin-right:9px}
    html[dir=rtl] .player-info>.checker-avatar{margin-right:0;margin-left:9px}
    .player-metrics>*+*{margin-left:9px}
    html[dir=rtl] .player-metrics>*+*{margin-left:0;margin-right:9px}
    html[dir=rtl] .player-metrics>*+*{margin-left:0;margin-right:7px}
    .game-controls>*{margin:7px}
    .dice-tray>.die+.die{margin-left:8px}
    .language-gate:before{top:9px;right:9px;bottom:9px;left:9px}
    .language-logo>.brand-mark{margin-right:16px}
    html[dir=rtl] .language-logo>.brand-mark{margin-right:0;margin-left:16px}
    .language-option>span:last-child:not(.language-caption):not(.language-native){right:18px;left:auto}
    .language-option[dir=rtl]>span:last-child:not(.language-caption):not(.language-native){left:18px;right:auto}
    .language-option[dir=ltr]>span:last-child:not(.language-caption):not(.language-native){right:18px;left:auto}
    .podium-medal:before{top:5px;right:5px;bottom:5px;left:5px}
    .podium-medal>b{right:-2px;left:auto}
    .settings-table-preview>div+div{margin-left:16px}
    html[dir=rtl] .settings-table-preview>div+div{margin-left:0;margin-right:16px}
    .settings-card-heading>.icon{margin-right:10px}
    html[dir=rtl] .settings-card-heading>.icon{margin-right:0;margin-left:10px}
    .identity-edit>.avatar{margin-right:15px}
    html[dir=rtl] .identity-edit>.avatar{margin-right:0;margin-left:15px}
    .board-option-check{margin-left:4px}
    html[dir=rtl] .board-option-check{margin-right:4px;margin-left:0}
    .setting-line>.setting-symbol{margin-right:12px}
    html[dir=rtl] .setting-line>.setting-symbol{margin-right:0;margin-left:12px}
    .setting-line>.switch{margin-left:12px}
    html[dir=rtl] .setting-line>.switch{margin-left:0;margin-right:12px}
    .settings-connection>summary>.icon{margin-right:11px}
    html[dir=rtl] .settings-connection>summary>.icon{margin-right:0;margin-left:11px}
    .brand-mark:before{right:-4px;left:auto}
    html[dir=rtl] .brand-mark:before{left:-4px;right:auto}
    .language-logo .brand-mark:before{right:-6px;left:auto}
    html[dir=rtl] .language-logo .brand-mark:before{left:-6px;right:auto}
  }
  @media(max-width:365px){
    .brand .brand-mark{margin-right:8px}
    html[dir=rtl] .brand .brand-mark{margin-right:0;margin-left:8px}
    .top-tools>*+*{margin-left:6px}
    html[dir=rtl] .top-tools>*+*{margin-left:0;margin-right:6px}
    .card-arrow{right:12px;left:auto}
    html[dir=rtl] .card-arrow{left:12px;right:auto}
    .player-metrics>*+*{margin-left:6px}
    html[dir=rtl] .player-metrics>*+*{margin-left:0;margin-right:6px}
    .settings-table-preview>div+div,html[dir=rtl] .settings-table-preview>div+div{margin-left:0;margin-right:0;margin-top:16px}
    .identity-edit>.avatar{margin-right:12px}
    html[dir=rtl] .identity-edit>.avatar{margin-right:0;margin-left:12px}
    .board-option-check{margin-left:3px}
    html[dir=rtl] .board-option-check{margin-left:0;margin-right:3px}
  }
}