@import url('./pack-mobile-fixed.css?v=gesture-lock-20261007');
@import url('./ranking-mobile-spacing.css?v=ranking-header-typeface-20261007');
/* Responsive presentation; all data, sections and actions use existing logic. */
.mobile-nav { display:none; }
#boot-status { margin:10px 0 0; color:#a2baac; font-size:12px; }
body.is-booting #open-pack { opacity:1; }
.mobile-menu { box-sizing:border-box; width:min(460px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow:auto; padding:22px; color:#e3f1e8; border:1px solid #52715c; border-radius:20px; background:#14241b; }
.mobile-menu::backdrop { background:#030b08c9; backdrop-filter:blur(5px); }
.mobile-menu header { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; }
.mobile-menu h2 { font-size:22px; margin:0; }
.mobile-menu header button { width:44px; height:44px; font-size:26px; background:transparent; color:#d1ebdb; border:1px solid #45624f; border-radius:12px; }
.mobile-menu nav { display:grid; gap:7px; }
.mobile-menu nav a { display:flex; gap:12px; align-items:center; min-height:48px; padding:4px 12px; color:#d2e6da; border:1px solid #365540; border-radius:10px; text-decoration:none; font-size:14px; background:#1b3023; }
.mobile-menu nav a.active { background:#30543e; border-color:#81b796; }
.mobile-menu nav svg { width:23px; height:23px; flex:0 0 23px; }
.mobile-menu nav strong,.mobile-menu .sidebar-notification { margin-left:auto; font-size:12px; }
.mobile-menu .sidebar-notification:not([hidden]) { background:#96343b; padding:4px 8px; border-radius:20px; }
.mobile-admin { display:flex; align-items:center; gap:10px; margin-top:18px; min-height:44px; font-size:13px; color:#a3bead; }
.mobile-admin input { width:20px; height:20px; accent-color:#90d4ad; }
.mobile-menu :focus-visible,.mobile-nav :focus-visible { outline:2px solid #ffe2a0; outline-offset:2px; }
@media(max-width:980px) {
  .app-frame,body[data-active-section] .app-frame { display:block; }
  body .sidebar,body.pack-home .sidebar { position:relative; inset:auto; width:100%; height:auto; min-height:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; box-sizing:border-box; background:#101a14; border-bottom:1px solid #304337; border-right:0; }
  body .sidebar .main-nav,body .sidebar .account-nav { display:none; }
  .sidebar .brand { margin:0; min-height:38px; }
  .sidebar .brand-word { font-size:23px; }
  .sidebar .brand-alert { width:17px; height:17px; font-size:10px; }
  .sidebar .sidebar-wallet { width:auto; max-width:52%; margin:0; padding:6px 10px; gap:8px; border-radius:12px; }
  .sidebar .sidebar-wallet .wallet-coin { width:27px; height:27px; font-size:17px; }
  .sidebar .sidebar-wallet strong { font-size:18px; }
  .sidebar .sidebar-wallet small,.sidebar .sidebar-wallet span span,.sidebar .sidebar-wallet>b { display:none; }
  body .app-shell,body.pack-home .app-shell { width:calc(100% - 28px); min-width:0; padding:16px 0 calc(90px + env(safe-area-inset-bottom)); }
  .app-shell>.admin-view-toggle { display:none; }
  .mobile-nav { position:fixed; z-index:35; inset:auto 0 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:6px 8px max(8px,env(safe-area-inset-bottom)); background:#101e17f5; border-top:1px solid #36533f; backdrop-filter:blur(14px); }
  .mobile-nav a,.mobile-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:52px; min-width:0; padding:4px 0; border:0; border-radius:10px; background:transparent; color:#a9c0b3; text-decoration:none; font:500 10px/1.2 system-ui,sans-serif; }
  .mobile-nav svg { width:22px; height:22px; color:inherit; }
  .mobile-nav .active { color:#bcf0d4; background:#274834; }
  #profile.pack-screen { min-height:calc(100svh - 155px); padding:8px 0 22px; }
  #profile .pack-heading h1 { font-size:26px; }
  #profile .pack-heading p { max-width:350px; line-height:1.55; margin:8px auto; }
  #profile .opening-stage { margin-top:16px; }
  #profile .opening-viewport { min-height:0; }
  #profile .opening-card-slot { width:min(270px,72vw,calc((100svh - 340px)*.6667)); min-width:155px; }
  #profile .opening-packet { width:155px; }
  #profile .opening-test-zone { width:100%; margin-top:26px; }
  .pack-sound-toggle { min-height:36px; margin-bottom:8px; }
  .app-shell input:not([type=checkbox]):not([type=radio]),.app-shell select,.app-shell textarea,dialog input:not([type=checkbox]):not([type=radio]),dialog select,dialog textarea { font-size:16px; }
  .app-shell select { width:100%; min-width:0; }
  .app-shell>section { min-width:0; }
  dialog { max-width:calc(100vw - 20px); max-height:calc(100dvh - 24px); box-sizing:border-box; overscroll-behavior:contain; }
  .rk-dialog { padding:24px 16px; }
  #rankings .rk-tabs { display:flex; flex-wrap:wrap; gap:7px; }
  #rankings .rk-tabs [data-tab] { flex:1 1 40%; min-height:44px; margin:0; font-size:12px; }
  #rankings .rk-tabs [data-tab=prestige] { flex-basis:100%; }
  .rk-table-wrap { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
  .rk-table-wrap:has(table)::before { content:'Fais glisser le tableau pour tout voir →'; display:block; width:fit-content; padding:10px 12px; color:#9fbba9; font-size:11px; }
  .rk-table { min-width:850px; }
  .pw-table { min-width:950px; }
  .pw-hero { grid-template-columns:86px minmax(0,1fr); padding:16px; gap:16px; }
  .pw-prize:has(.card) { min-height:129px; }
  .pw-title h2 { font-size:20px; }
  .pw-countdown strong { font-size:18px; }
  .pw-hero-end { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:10px; }
  .pw-participants { grid-column:1/-1; justify-items:start; }
  .pw-participants strong { font-size:23px; }
  .pw-hero-end button,.pw-hero-end [data-prestige-history] { width:100%; min-height:44px; margin:0; font-size:11px!important; }
  .pw-caption { line-height:1.6; }
  .rk-profile-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rk-profile-stats>div { min-width:0; padding:12px; }
  .rk-profile-stats strong { font-size:20px; }
  .rk-dialog h2 { overflow-wrap:anywhere; font-size:23px; }
  .rk-audience-toolbar { gap:10px; }
  .rk-inline-pagination { max-width:100%; flex-wrap:wrap; }
}
@media(max-width:480px) {
  .pw-title .rk-eyebrow { font-size:8px; letter-spacing:1.2px; }
  .pw-title h2 { font-size:18px; }
  .pw-countdown strong { font-size:16px; }
  .friends-row-actions { margin-left:0; flex-basis:100%; }
  .pw-example { display:grid; grid-template-columns:1fr; }
  .pw-example>span { min-width:0; }
}
@media(max-width:600px){body .app-shell:has(#collections:not([hidden])){padding-top:4px;}}
/* Phone-only dense rankings: keep every column and horizontal scrolling. */
@media(max-width:600px) {
  #rankings[data-ranking-tab] .rk-table,
  .pw-history .pw-table { min-width:600px; }
  #rankings[data-ranking-tab] :is(.rk-table,.pw-table) :is(th,td),
  .pw-history .pw-table :is(th,td) { padding:6px 5px; font-size:11px; line-height:1.3; }
  #rankings[data-ranking-tab] .rk-table td { min-width:0; width:auto; }
  #rankings[data-ranking-tab] .rk-table th { font-size:11px; white-space:normal; }
  #rankings[data-ranking-tab] :is(.rk-table,.pw-table) .rk-player-button,
  .pw-history .pw-table .rk-player-button { gap:5px; min-height:36px; }
  #rankings[data-ranking-tab] :is(.rk-table,.pw-table) .rk-player-button strong,
  .pw-history .pw-table .rk-player-button strong { font-size:11px!important; white-space:normal; overflow-wrap:anywhere; max-width:96px; }
  #rankings[data-ranking-tab] :is(.rk-table,.pw-table) .rk-avatar,
  .pw-history .pw-table .rk-avatar { width:22px; height:22px; flex-basis:22px; font-size:13px; border-radius:6px; }
  #rankings[data-ranking-tab] :is(.rk-table,.pw-table) .rk-rank,
  #rankings[data-ranking-tab] .pw-table td.rk-rank { font-size:12px; }
  #rankings[data-ranking-tab] .rk-collection-progress,
  #rankings[data-ranking-tab] .rk-collection-track { width:125px; min-width:0; }
  #rankings[data-ranking-tab] .rk-collection-track { gap:5px; padding:0 5px; }
  #rankings[data-ranking-tab] .rk-collection-track :is(span,strong),
  #rankings[data-ranking-tab] .rk-card-count { font-size:10px; }
  #rankings .pw-table,
  .pw-history .pw-table { width:600px; min-width:600px; table-layout:fixed; }
  #rankings .pw-table th:nth-child(1) { width:40px; }
  #rankings .pw-table th:nth-child(2),
  .pw-history .pw-table th:nth-child(2) { width:122px; }
  #rankings .pw-table th:nth-child(n+3):nth-child(-n+7),
  .pw-history .pw-table th:nth-child(n+3):nth-child(-n+7) { width:51px; }
  #rankings .pw-table th.pw-probability-heading,
  .pw-history .pw-table th.pw-probability-heading { width:105px; min-width:0; max-width:none; }
  #rankings .pw-table th:last-child,
  .pw-history .pw-table th:last-child { width:34px; }
  #rankings .pw-table th button { gap:2px; min-height:36px; font-size:10px; white-space:normal; }
  #rankings .pw-table :is(.pw-chance,.pw-not-qualified),
  .pw-history .pw-table :is(.pw-chance,.pw-not-qualified) { font-size:11px; white-space:normal; }
}

/* Dense ranking rows: prioritize probability and completion time on phones. */
@media(max-width:600px) {
#rankings .pw-table-compact td>small { display:block; margin-top:2px; font-size:10px; }
#rankings .rk-player-button>span:last-child { min-width:0; }
#rankings .rk-completion-cell { min-width:0; flex-direction:column; align-items:flex-start; gap:5px; }
#rankings .rk-completion-duration.complete { display:grid; gap:3px; white-space:normal; }
#rankings .rk-journey-link { margin-left:0; }
}
@media(max-width:600px) {
 #rankings[data-ranking-tab] .rk-table { width:100%; min-width:370px; table-layout:fixed; }
 #rankings[data-ranking-tab] .rk-table th:nth-child(1) { width:30px; }
 #rankings[data-ranking-tab] .rk-table th:nth-child(2) { width:74px; }
 #rankings[data-ranking-tab] .rk-table th:nth-child(3) { width:75px; }
 #rankings[data-ranking-tab] .rk-table th:nth-child(4) { width:61px; }
 #rankings[data-ranking-tab] .rk-table th:nth-child(5) { width:110px; }
 #rankings[data-ranking-tab] .rk-table td:last-child { min-width:0; }
 #rankings[data-ranking-tab] :is(.rk-table,.pw-table) .rk-player-button { flex-direction:column; align-items:flex-start; gap:3px; max-width:100%; }
 #rankings[data-ranking-tab] :is(.rk-table,.pw-table) .rk-player-button strong { max-width:70px; font-size:10px!important; }
 #rankings[data-ranking-tab] .rk-collection-progress,
 #rankings[data-ranking-tab] .rk-collection-track { width:100%; min-width:0; }
 #rankings[data-ranking-tab] .rk-collection-track { height:auto; min-height:34px; flex-direction:column; align-items:flex-start; gap:2px; padding:4px; }
 #rankings[data-ranking-tab] .rk-collection-label { white-space:normal; padding:0; }
 #rankings[data-ranking-tab] .rk-card-count { white-space:normal; }
 #rankings[data-ranking-tab] .rk-completion-duration.complete>strong { font-size:13px; }
 #rankings[data-ranking-tab] .rk-completion-clock { font-size:10px; white-space:normal; }
 #rankings[data-ranking-tab] .rk-journey-link { white-space:normal; min-height:36px; font-size:10px; padding:5px; }
 #rankings .pw-table.pw-table-compact { width:100%; min-width:470px; }
 #rankings .pw-table-compact th:nth-child(1) { width:30px; }
 #rankings .pw-table-compact th:nth-child(2) { width:76px; }
 #rankings .pw-table-compact th.pw-probability-heading { width:66px; min-width:0; }
 #rankings .pw-table-compact th:nth-child(n+4):nth-child(-n+8) { width:50px; }
 #rankings .pw-table-compact th:last-child { width:28px; }
 #rankings .pw-table-compact td { white-space:normal; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
 #rankings .pw-table-compact td>strong { display:block; white-space:nowrap; font-size:11px; }
}