/* Mobile web app; desktop layout stays in main.css. */
[hidden]{display:none!important}
.web-client [data-steam-only]{display:none!important}
.mobile-app-panel{display:flex;align-items:flex-start;gap:18px;margin:24px auto;max-width:780px;padding:22px;position:relative;z-index:2}
.mobile-app-panel>img{border-radius:16px;flex:none}.mobile-app-panel h2{margin:0;color:#edca79}.mobile-app-panel p{line-height:1.5}.mobile-app-panel [data-install-help]{color:#cbbd9d;font-size:14px}
.mobile-account{font:14px/1.5 system-ui}.mobile-account a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #ba8c44;border-radius:8px;color:#f2d398;background:#171008;text-decoration:none}
#mobile-install-link{margin-top:14px;min-height:44px}
#mobile-network{position:fixed;left:12px;right:12px;top:max(12px,env(safe-area-inset-top));z-index:1100;margin:0;padding:12px;background:#30170df2;border:1px solid #d5ab62;border-radius:10px;font:14px/1.45 system-ui;text-align:center}
.provider-badge.platform-android,.provider-badge.platform-ios{background:#0d1712;border-color:#c5a467}.provider-badge.platform-ios{background:#171717}.provider-badge.platform-android img,.provider-badge.platform-ios img{width:100%;height:100%;object-fit:contain}
@media(max-width:900px),(pointer:coarse){
  html,body{height:100%;min-height:100%;overflow:hidden}
  .screen{min-height:100dvh;max-width:100%}
  .main-menu-screen{display:block;height:100dvh;overflow-y:auto;padding:calc(18px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background-attachment:fixed}
  .main-menu-screen .menu-brand{margin:clamp(75px,18dvh,160px) auto 0;max-width:560px}
  .main-menu-screen .arcane-menu{max-width:560px;margin:18px auto 0}
  .arcane-menu button:hover{transform:none}
  .main-menu-screen .menu-status{position:relative;inset:auto;margin:22px auto 0;max-width:560px}
  .home-language-picker{top:calc(14px + env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
  .menu-page{height:100dvh;min-height:0;overflow-y:auto;padding-top:calc(22px + env(safe-area-inset-top));padding-bottom:calc(26px + env(safe-area-inset-bottom))}
  .panel{max-height:calc(100dvh - 24px);overflow-y:auto}
  button,input,select{min-height:44px;touch-action:manipulation}
  input,select,textarea{font-size:16px}
  input[type="checkbox"]{min-height:24px;min-width:24px}
  .game-intro .intro-skip{top:calc(16px + env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));min-height:44px}
  .intro-controls{bottom:calc(18px + env(safe-area-inset-bottom))}
  #game-screen{height:100dvh;min-height:0;padding:calc(10px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) calc(72px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:auto}
  #game-screen>header{flex-wrap:wrap;align-items:center;gap:6px}
  #game-screen>header>div{padding:6px 8px;min-width:0}
  #game-screen>header strong{font-size:16px;overflow-wrap:anywhere}
  #game-screen>header .timer strong{font-size:23px}
  #game-screen>header .game-menu-button{margin-inline-start:auto}
  #opponents{position:relative;inset:auto;gap:6px;margin:10px 0;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .opponent-zone{position:relative!important;inset:auto!important;transform:none!important;min-width:0;width:100%;padding:7px 3px;min-height:0;overflow:hidden}
  .opponent-name{font-size:11px;margin-bottom:5px;overflow-wrap:anywhere}
  .opponent-hand{height:44px;overflow:hidden;padding-left:10px}
  .opponent-card-back{width:28px;height:43px;flex-shrink:0;margin-left:-18px}
  .opponent-zone .player-identity{max-width:100%;flex-wrap:wrap;justify-content:center;gap:3px}
  .opponent-zone .player-display-name{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .board{position:relative;inset:auto;transform:none;min-height:0;grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr);gap:8px;width:min(390px,100%);margin:24px auto 10px}
  .pile,#top-card{width:clamp(85px,25vw,118px);height:auto;aspect-ratio:190/294}
  .table-slot>span{font-size:9px;letter-spacing:0}
  .self-player-panel{position:relative;inset:auto;width:100%;margin:8px 0}
  .hand,.large-cards .hand{position:relative;inset:auto;display:flex;justify-content:flex-start;align-items:flex-end;gap:10px;width:100%;height:235px;margin:0;overflow-x:auto;overflow-y:hidden;padding:14px 8px 18px;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-snap-type:x proximity}
  .hand .card,.large-cards .hand .card{flex:0 0 132px;width:132px;height:205px;margin:0!important;scroll-snap-align:start;transform:none!important}
  .large-cards .hand{height:285px}.large-cards .hand .card{flex-basis:162px;width:162px;height:252px}
  .hand-card:hover,.hand-card.unplayable-card:hover{transform:none!important}
  .hand .card-info-trigger{width:44px;height:44px;min-height:44px;font-size:24px;right:0;bottom:0}
  .choice-overlay{padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .choice-dialog,.card-detail-dialog{max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto}
  .card-detail-close{width:44px;height:44px}
  #history-panel.log{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));min-height:44px}
  .mobile-app-panel{padding:16px;gap:12px}.mobile-app-panel>img{width:48px;height:48px}
  .workshop-editor{height:100dvh;overflow:auto}
}
@media(max-width:380px){.main-menu-screen .menu-brand h1{font-size:45px}.arcane-menu span{font-size:17px;padding-left:12px}.board{grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr);gap:5px}.active-faction{width:66px;height:66px}.active-faction img{width:50px;height:50px}.turn-order-ring{inset:-27px}.turn-order-player{transform:rotate(var(--turn-angle)) translateY(-61px)}}


@media(max-width:900px),(pointer:coarse){.main-menu-screen #connection{position:static}.arcane-menu button{min-height:76px;padding-block:10px}.arcane-menu span{line-height:1.15}.arcane-menu small{margin-top:6px}.turn-order-ring{display:none}.hand img{-webkit-user-drag:none;user-select:none}}

.mobile-account-actions{display:flex;flex-wrap:wrap;gap:10px}.mobile-account-actions a{justify-content:center;min-width:130px}.mobile-account-actions [data-account-login]{background:linear-gradient(#e9c779,#ad7c37);color:#100c08;font-weight:700}.mobile-account-actions a:focus-visible{outline:3px solid #f3d996;outline-offset:3px}