/* Touch layout: the whole table stays visible inside Safari's usable viewport. */
.mobile-history-button{display:none}
@media(max-width:900px),(pointer:coarse){
  #game-screen{
    --hand-width:min(46vw,26dvh,190px);
    display:flex;flex-direction:column;gap:6px;isolation:isolate;
    height:100dvh;min-height:0;max-height:100dvh;overflow:hidden;
    padding:calc(8px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
    background:radial-gradient(ellipse at 50% 40%,#29413970,transparent 65%),linear-gradient(#101413ed,#090c0ef5),url('../assets/board/indigotales_board_bg.webp') center/cover;
    font-family:Arial,sans-serif;
  }
  .large-cards #game-screen{--hand-width:min(55vw,28dvh,210px)}
  #game-screen #opponents .opponent-zone{position:relative!important;inset:auto!important;transform:none!important;min-height:0;min-width:0;width:auto}
  #game-screen>header{
    flex:none;display:grid;grid-template-columns:minmax(0,1fr) 44px 66px;
    grid-template-rows:16px 42px;gap:4px 6px;align-items:stretch;
  }
  #game-screen>header>div{min-width:0;padding:4px 8px;border-color:#b49b602e;background:#ffffff05;border-radius:9px;box-shadow:none}
  #game-screen>header>div:first-child{grid-area:1/1/2/3;display:flex;align-items:center;gap:8px;padding:0;border:0;background:none}
  #game-screen>header>div:first-child>span{display:none}
  #game-screen>header #game-code{font:600 10px/1 Arial,sans-serif;color:#a89d81;letter-spacing:.08em}
  #game-screen>header #game-card-set{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;font:400 10px/1 Arial,sans-serif;color:#b1a78d}
  #game-screen>header>div:nth-child(3){grid-area:2/1/3/2;display:flex;flex-direction:column;justify-content:center;gap:3px}
  #game-screen>header>div:nth-child(3)>span{font:600 8px/1 Arial,sans-serif;letter-spacing:.12em;color:#b3a481}
  #game-screen>header #current-player{font:600 12px/1.1 Arial,sans-serif;overflow:hidden;white-space:nowrap}
  #current-player .player-identity{display:flex;gap:5px;min-width:0}
  #current-player .player-display-name{overflow:hidden;text-overflow:ellipsis;text-transform:none}
  #current-player .player-level{display:none}
  #game-screen>header .timer{grid-area:2/2/3/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px}
  #game-screen>header .timer>span{font:400 7px/1 Arial,sans-serif;text-align:center}
  #game-screen>header .timer strong{font:600 19px/1 Arial,sans-serif}
  #game-screen>header #direction-status{grid-area:1/3/2/4;justify-content:flex-end;padding:0!important;border:0;background:none;min-width:0}
  #direction-status img{width:16px;height:16px}
  #direction-status span{display:none}
  #game-screen>header .game-menu-button{grid-area:2/3/3/4;margin:0;min-height:42px;padding:0 6px;font:600 12px Arial,sans-serif;border-color:#b49b6055;background:#d2b57814;border-radius:9px}
  #game-screen #opponents{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0;min-height:0}
  #opponents .opponent-zone{padding:6px 4px;border:1px solid #b49b602c;border-radius:10px;background:#ffffff04;box-shadow:none}
  #opponents .opponent-zone.active{border-color:#d4b470;background:#d4b47014;box-shadow:inset 0 2px #d4b470}
  #opponents .opponent-name{font:400 10px/1.25 Arial,sans-serif;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #opponents .player-identity{display:inline-flex;flex-wrap:nowrap;vertical-align:middle}
  #opponents [data-provider="bot"] .provider-badge{display:none}
  #opponents .opponent-hand{display:flex;justify-content:center;height:25px;padding:0 0 0 10px;overflow:hidden}
  #opponents .opponent-card-back{width:18px;height:25px;margin-left:-9px;border-radius:3px}
  #opponents .opponent-card-back:nth-child(n+4){display:none}
  #opponents .player-effect-toolbar:empty{display:none}
  #opponents .player-effect-toolbar{min-height:0;gap:3px;margin:2px 0}
  #opponents .player-effect-chip{min-width:20px;height:20px;padding:1px 3px}
  #opponents .player-effect-chip img{width:14px;height:14px}
  #game-screen .board{
    flex:1;container-type:size;min-height:100px;min-width:0;width:100%;
    position:relative;inset:auto;transform:none;margin:0;gap:10px;
    display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);align-items:center;
    border:0;border-radius:22px;background:radial-gradient(ellipse,#6985740d,transparent 72%);
  }
  #game-screen .table-slot{min-width:0;gap:6px;align-items:center;justify-content:center}
  #game-screen .table-slot>span{font:600 8px/1 Arial,sans-serif;letter-spacing:.08em;color:#b1a78d}
  #game-screen .pile,#game-screen #top-card{width:min(34cqw,calc((100cqh - 24px)*.65),150px);height:auto;min-height:0;aspect-ratio:155/238;padding:0;border:0;box-shadow:0 8px 20px #0005}
  #game-screen #draw-card:disabled{opacity:.65}
  #game-screen .active-faction{width:56px;height:56px;margin-top:14px;position:relative;border:1px solid #b39a6250;background:#0a0f0eb0;box-shadow:none}
  #game-screen .active-faction>img{width:40px;height:40px}
  #game-screen .active-faction>span{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);margin:0;width:80px;font:600 8px/1.3 Arial,sans-serif;color:#d0b779;letter-spacing:0}
  #game-screen .turn-order-ring{display:none}
  #game-screen .self-player-panel{
    flex:none;position:relative;inset:auto;display:flex;align-items:center;gap:8px;
    min-height:26px;width:100%;margin:0;padding:4px 3px 0;border:0;border-top:1px solid #b49b6033;border-radius:0;background:none;text-align:left;
  }
  #self-player-panel>div:first-child{flex:1;min-width:0;align-items:center;gap:8px;font:400 11px/1.2 Arial,sans-serif}
  #self-player-name{min-width:0;font-weight:500}
  #self-player-name .player-identity{display:flex;gap:5px;min-width:0}
  #self-player-name .player-display-name{max-width:38vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #self-player-name .player-level{display:none}
  #self-player-count{white-space:nowrap}
  #self-player-count::after{content:" ↔";color:#dcc48c;font-size:15px}
  #self-player-toolbar{flex:none;margin:0;min-height:0;gap:4px}
  #self-player-toolbar .status-direction{display:none}
  #self-player-toolbar .player-effect-chip{height:22px;min-width:22px;padding:1px 3px}
  #self-player-toolbar .player-effect-chip img{width:15px;height:15px}
  #game-screen .hand,.large-cards #game-screen .hand{
    flex:none;position:relative;inset:auto;display:flex;align-items:center;justify-content:flex-start;gap:12px;
    width:calc(100% + 6px);min-height:0;height:calc(var(--hand-width)*238/155 + 14px);
    margin:0 -3px;padding:5px 3px 9px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    scroll-snap-type:x proximity;overscroll-behavior-x:contain;touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
  }
  #game-screen .hand::-webkit-scrollbar{display:none}
  #game-screen .hand .card,.large-cards #game-screen .hand .card{
    flex:0 0 var(--hand-width);width:var(--hand-width);height:auto;aspect-ratio:155/238;
    margin:0!important;border:0;transform:none!important;transition:none;scroll-snap-align:start;
    opacity:1;filter:none;box-shadow:0 4px 12px #0008;border-radius:10px;
  }
  #game-screen .hand .card.unplayable-card{opacity:1;filter:brightness(.88)}
  #game-screen .hand .card:not(.unplayable-card){box-shadow:0 0 0 1px #d4b470,0 4px 12px #0008}
  #game-screen .hand .card:focus-visible{outline:2px solid #ebd7a9;outline-offset:2px}
  #game-screen .hand img{user-select:none;-webkit-user-drag:none}
  #game-screen #history-panel.log:not(.is-expanded){display:none!important}
  #game-screen #history-panel.log.is-expanded{display:block;position:fixed;right:50%;bottom:50%;width:calc(100vw - 28px);max-height:75dvh;min-height:0;overflow:auto;transform:translate(50%,50%);padding:20px}
  .mobile-history-button{display:block}
  #game-screen .attack-banner{position:absolute;left:12px;right:12px;top:calc(130px + env(safe-area-inset-top));width:auto;transform:none;margin:0;padding:8px;gap:6px;border-width:1px;box-shadow:0 6px 22px #0008}
  #game-screen .attack-banner>span:not(.attack-counter-hint){min-width:0;font:400 12px/1.35 Arial,sans-serif}
  #game-screen .attack-banner>img{width:24px;height:24px}
  #game-screen .attack-banner>strong{font-size:20px}
  #game-screen .attack-counter-hint{font:400 11px/1.3 Arial,sans-serif}
  #game-screen .attack-banner button{min-height:44px}
  .card-detail-panel.is-pinned{align-items:end;padding:12px}
  .card-detail-dialog{width:min(470px,100%);padding:24px;border-width:1px;border-radius:20px;box-shadow:0 12px 50px #000a}
}
@media(max-height:600px) and (orientation:portrait){
  #game-screen{--hand-width:min(43vw,24dvh);gap:4px}
  #opponents .opponent-hand{display:none}
}
@media(orientation:landscape) and (max-width:900px),(orientation:landscape) and (pointer:coarse){
  #game-screen{
    --hand-width:min(21vw,calc((100dvh - 146px)*.65),190px);
    display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    grid-template-rows:44px 44px minmax(0,1fr);gap:8px 18px;
  }
  .large-cards #game-screen{--hand-width:min(27vw,calc((100dvh - 136px)*.65),220px)}
  #game-screen>header{grid-area:1/1/2/3;grid-template-columns:minmax(90px,1fr) minmax(130px,1.6fr) 48px 28px 70px;grid-template-rows:44px}
  #game-screen>header>div:first-child{grid-area:1/1/2/2;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}
  #game-screen>header>div:nth-child(3){grid-area:1/2/2/3}
  #game-screen>header .timer{grid-area:1/3/2/4}
  #game-screen>header #direction-status{grid-area:1/4/2/5;align-self:center;justify-content:center}
  #game-screen>header .game-menu-button{grid-area:1/5/2/6}
  #game-screen #opponents{grid-area:2/1/3/2;gap:6px}
  #opponents .opponent-zone{padding:4px}
  #opponents .opponent-hand{height:17px}
  #opponents .opponent-card-back{height:17px;width:12px;margin-left:-5px}
  #opponents .opponent-name{font-size:10px;margin-bottom:2px}
  #game-screen .board{grid-area:3/1/4/2;min-height:0;gap:6px;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr)}
  #game-screen .pile,#game-screen #top-card{width:min(32cqw,calc((100cqh - 26px)*.65),145px)}
  #game-screen .self-player-panel{grid-area:2/2/3/3;align-self:end;min-height:30px}
  #game-screen .hand,.large-cards #game-screen .hand{grid-area:3/2/4/3;align-self:center;width:100%;margin:0}
  #game-screen .attack-banner{left:12px;right:calc(53% + 8px);top:calc(102px + env(safe-area-inset-top))}
  .card-detail-panel.is-pinned{align-items:center}
}