:root{
    --navy:#17140F;
    --navy-deep:#0B0A08;
    --parchment:#F7F3EA;
    --coral:#D6453F;
    --gold:#E8963F;
    --sea:#3FC97A;
    --ok:#3FC97A;
    --ko:#D6453F;
    --line: rgba(247,243,234,0.12);
    --card-bg:#221E17;
    --font-body: system-ui, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0; height:100%;}
  html{ background:#17140F; }
  html.app-shell .footnote,
  html.app-shell .web-footnote,
  .web-footnote{ display:none !important; }
  .privacy-link-wrap{ margin:18px 0 0; text-align:center; }
  .privacy-link-wrap a{
    color:rgba(247,243,234,0.78);
    font:600 14px var(--font-body);
    text-decoration:underline;
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .lab-only{ display:none !important; }
  :focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
  }
  button.action:focus,
  button.action.primary:focus{
    outline:none;
    box-shadow:none;
  }
  button.action:focus-visible,
  button.action.primary:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
    box-shadow:none;
  }
  .section-kicker{
    display:block;
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:rgba(247,243,234,0.5);
    margin:0 0 8px;
  }
  .field-label,
  .modal-section .field-label{
    display:block;
    font:600 14px var(--font-body);
    letter-spacing:0;
    text-transform:none;
    color:rgba(247,243,234,0.88);
    margin:0 0 6px;
  }
  .field-hint{
    font:600 13px var(--font-body);
    color:rgba(247,243,234,0.7);
    margin:0 0 12px;
  }
  #profileView .server-url-input,
  #profileView button.action{
    min-height:44px;
  }
  .comfort-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:10px;
    min-height:44px;
  }
  .comfort-row input[type="checkbox"]{
    width:24px;
    height:24px;
    flex:none;
    accent-color:var(--sea);
  }
  .comfort-row label,
  .modal-section .comfort-row label{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:44px;
    width:100%;
    font:600 14px var(--font-body);
    letter-spacing:0;
    text-transform:none;
    color:var(--parchment);
    margin:0;
    cursor:pointer;
  }
  .lb-empty-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    margin-top:12px;
  }
  .lb-empty-actions .action,
  .mode-switch-btn{
    min-height:44px;
  }
  body{
    min-height:100vh;
    min-height:100dvh;
    background: #17140F;
    color:var(--parchment);
    font-family: var(--font-body);
    display:flex;
    align-items:stretch;
    justify-content:stretch;
    padding:0;
    overscroll-behavior-y: none;
  }
  .stage{
    width:100%;
    max-width:none;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
  }
  .masthead{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:18px;
    border-bottom:1px solid var(--line);
    padding-bottom:10px;
  }
  .masthead h1{
    font-size:20px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    margin:0;
    font-weight:600;
    color:var(--parchment);
  }
  .masthead h1 span{ color:var(--gold); }
  .stats{
    font-family: var(--font-mono);
    font-size:13px;
    color:var(--gold);
    letter-spacing:0.05em;
    display:flex;
    gap:14px;
  }
  .card{
    background: var(--card-bg);
    border:0;
    border-radius:0;
    padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    position:relative;
    overflow:hidden;
    box-shadow:none;
    flex:1 1 auto;
  }
  .card::before{ display:none; }
  .flag-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:8px;
    position:relative;
    width:100%;
  }
  .play-dock{
    width:100%;
    max-width:420px;
    margin-top:10px;
  }
  .flag{
    width:260px;
    max-width:80%;
    aspect-ratio:3/2;
    object-fit:cover;
    border-radius:6px;
    border:1px solid rgba(247,243,234,0.2);
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.5));
    user-select:none;
    transition: transform 0.25s ease;
    background:rgba(247,243,234,0.04);
  }
  .flip-card{
    width:260px;
    max-width:80%;
    perspective:1200px;
  }
  .flip-card-inner{
    position:relative;
    width:100%;
    aspect-ratio:3/2;
    transform-style:preserve-3d;
    transition: transform 0.55s cubic-bezier(.3,1,.4,1);
  }
  .flip-card.flipped .flip-card-inner{ transform: rotateY(180deg); }
  .flip-card-front, .flip-card-back{
    position:absolute; inset:0;
    backface-visibility:hidden;
    border-radius:14px;
    overflow:hidden;
  }
  .flip-card-front .flag{ width:100%; max-width:none; margin:0; box-shadow:none; filter:none; border:1px solid rgba(247,243,234,0.2); }
  .flag-stamp{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:2;
    padding:28px 12px 12px;
    background:linear-gradient(180deg, transparent 0%, rgba(11,10,8,0.82) 55%);
    color:#F7F3EA;
    font:800 22px/1.15 var(--font-body);
    letter-spacing:-0.02em;
    text-align:center;
    text-shadow:0 1px 12px rgba(0,0,0,0.75);
    pointer-events:none;
  }
  .flag-stamp[hidden]{ display:none !important; }
  .flip-card-back{
    transform: rotateY(180deg);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:16px;
    text-align:center;
    background: var(--card-bg);
  }
  .flip-card-back.correct{ background: radial-gradient(circle at 50% 40%, rgba(63,201,122,0.38), rgba(11,10,8,0.92)); }
  .flip-card-back.wrong{ background: radial-gradient(circle at 50% 40%, rgba(214,69,63,0.34), rgba(11,10,8,0.92)); }
  .flip-icon{
    width:56px; height:56px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font:800 26px var(--font-body);
    margin-bottom:4px;
  }
  .flip-card-back.correct .flip-icon{ background:var(--ok); color:#0B1A11; }
  .flip-card-back.wrong .flip-icon{ background:var(--ko); color:#FFF1EF; }
  .flip-country{ font:800 20px var(--font-body); color:var(--parchment); letter-spacing:-0.01em; }
  .flip-capital{ font:500 12.5px var(--font-body); color:rgba(247,243,234,0.65); }
  .flip-verdict{ font:700 12px var(--font-mono); margin-top:4px; }
  .flip-card-back.correct .flip-verdict{ color:var(--ok); }
  .flip-card-back.wrong .flip-verdict{ color:#e8998a; }
  .flag.pulse{ animation: pop 0.35s ease; }
  @keyframes pop{ 0%{transform:scale(1);} 40%{transform:scale(1.08);} 100%{transform:scale(1);} }
  .instructions{
    text-align:center;
    font-size:14px;
    color:rgba(247,243,234,0.55);
    margin: 6px 0 26px;
    font-style:italic;
  }
  .timer-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .timer-row .timer-track{ margin-bottom:0; flex:1; }
  .timer-seconds{
    font:600 12px var(--font-mono);
    color:rgba(247,243,234,0.55);
    min-width:2ch;
    text-align:right;
  }
  .timer-seconds.sting{ animation: timerSting 280ms ease; color:var(--coral); }
  @keyframes timerSting{
    0%{ transform:scale(1); }
    40%{ transform:scale(1.45); }
    100%{ transform:scale(1); }
  }
  .daily-result-grid{
    display:flex;
    gap:6px;
    justify-content:center;
    flex-wrap:wrap;
    margin:12px 0 16px;
  }
  .daily-result-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:14px 0 18px;
    width:min(100%, 420px);
  }
  .daily-result-row{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    padding:6px 8px;
    border-radius:12px;
    background:rgba(247,243,234,0.05);
    border:1px solid rgba(247,243,234,0.08);
  }
  .daily-result-row img{
    width:36px;
    height:24px;
    object-fit:cover;
    border-radius:4px;
    border:1px solid rgba(247,243,234,0.18);
    flex:none;
  }
  .daily-result-row span.name{
    flex:1;
    min-width:0;
    font:700 15px var(--font-body);
    color:var(--parchment);
  }
  #dailyResultsBox .controls{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    margin-top:8px;
  }
  #dailyResultsBox .controls .action{
    width:100%;
    min-height:48px;
  }
  .daily-sq{
    width:28px; height:28px;
    border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    font:700 13px var(--font-body);
  }
  .daily-sq.ok{ background:var(--ok); color:#0B1A11; }
  .daily-sq.ko{ background:var(--ko); color:#FFF1EF; }
  .daily-sq.skip{ background:rgba(247,243,234,0.18); color:rgba(247,243,234,0.88); }
  .timer-track{
    width:100%;
    height:6px;
    background:rgba(247,243,234,0.08);
    border-radius:4px;
    overflow:hidden;
    margin-bottom:22px;
  }
  .timer-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--sea), var(--gold));
  }
  .timer-fill.urgent{ background:linear-gradient(90deg, var(--coral), #ff6b4a); }
  .duration-label{
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:rgba(247,243,234,0.55);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .duration-label select{
    font-family:inherit;
    font-size:13px;
    padding:5px 8px;
    background:rgba(247,243,234,0.06);
    border:1px solid var(--line);
    color:var(--parchment);
    border-radius:12px;
  }
  .feedback{
    margin-top:6px;
    text-align:center;
    font-size:15px;
    font-weight:bold;
    min-height:22px;
  }
  .feedback.ok{ color: var(--ok); }
  .feedback.ko{ color: var(--ko); }
  .answer-reveal{
    display:block;
    font-weight:normal;
    font-size:13px;
    color:rgba(247,243,234,0.6);
    margin-top:3px;
  }
  .controls{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:22px;
  }
  button.action{
    font-family: var(--font-body);
    font-weight:700;
    font-size:13px;
    letter-spacing:0.01em;
    padding:11px 22px;
    border-radius:14px;
    border:1px solid var(--line);
    background:rgba(247,243,234,0.04);
    color:var(--parchment);
    cursor:pointer;
    transition: all 0.15s ease;
  }
  button.action.primary{
    background:linear-gradient(140deg, var(--sea), var(--gold));
    border-color:transparent;
    color:#0B1A11;
  }
  @media (hover: hover) and (pointer: fine){
    button.action:hover{ border-color:var(--gold); color:var(--gold); }
    button.action.primary:hover{ filter:brightness(1.08); color:#0B1A11; }
  }
  .type-fallback{
    display:none;
    margin-top:16px;
    gap:8px;
    align-items:stretch;
  }
  .type-fallback.visible{ display:flex; }
  .type-fallback input{
    flex:1;
    font-family:inherit;
    font-size:16px;
    padding:12px 14px;
    background:rgba(247,243,234,0.06);
    border:1px solid var(--line);
    color:var(--parchment);
    border-radius:12px;
  }
  .type-fallback input:focus{ outline:none; border-color:var(--gold); }
  button.action.type-go{
    background:rgba(247,243,234,0.08);
    border:1px solid var(--line);
    color:var(--parchment);
    padding:12px 16px;
    min-width:52px;
    min-height:48px;
    border-radius:12px;
  }
  @media (hover: hover) and (pointer: fine){
    button.action.type-go:hover{ color:var(--gold); filter:none; }
  }
  .footnote{
    text-align:center;
    font-size:11px;
    color:rgba(247,243,234,0.32);
    margin-top:20px;
    line-height:1.5;
  }
  .warn{
    background: rgba(192,80,63,0.12);
    border:1px solid rgba(192,80,63,0.4);
    color:#e8b3a8;
    font-size:12.5px;
    padding:10px 12px;
    border-radius:3px;
    margin-bottom:16px;
    line-height:1.5;
  }

  #settingsBtn{
    background:transparent;
    border:1px solid var(--line);
    color:var(--gold);
    width:26px; height:26px;
    border-radius:50%;
    cursor:pointer;
    font-size:14px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
  }
  #settingsBtn:hover{ background:rgba(211,163,74,0.14); }

  .modal-overlay{
    position:fixed; inset:0;
    background:rgba(4,12,18,0.72);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:50;
  }
  .modal-overlay.open{ display:flex; }
  .modal{
    width:100%;
    max-width:460px;
    max-height:88vh;
    overflow-y:auto;
    background: var(--card-bg);
    border:1px solid var(--line);
    border-radius:20px;
    padding:24px 22px;
    position:relative;
  }
  .modal::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--sea), var(--gold), var(--coral));
  }
  .modal h2{
    font-size:15px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    margin:0 0 4px;
    color:var(--gold);
  }
  .modal .modal-sub{
    font-size:12px;
    color:rgba(247,243,234,0.5);
    margin:0 0 20px;
    font-style:italic;
  }
  .modal-close{
    position:absolute;
    top:14px; right:16px;
    background:transparent;
    border:none;
    color:rgba(247,243,234,0.55);
    font-size:20px;
    cursor:pointer;
    line-height:1;
  }
  .modal-close:hover{ color:var(--parchment); }
  .modal-section{
    margin-bottom:22px;
  }
  .modal-section label{
    display:block;
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:rgba(247,243,234,0.5);
    margin-bottom:8px;
  }
  #lbListLabel{
    display:flex;
    align-items:center;
    gap:8px;
    text-transform:none;
    letter-spacing:0;
    font:700 16px var(--font-body);
    color:var(--parchment);
  }
  #lbListTitle{ text-transform:none; }
  .status-pill{
    display:inline-block;
    font-size:11px;
    padding:2px 8px;
    border-radius:10px;
    margin-left:0;
    background:rgba(247,243,234,0.08);
    text-transform:none;
    letter-spacing:0;
    font-weight:600;
  }
  .status-pill.good{ background:rgba(74,155,110,0.2); color:var(--ok); }
  .status-pill.bad{ background:rgba(192,80,63,0.2); color:#e8998a; }

  .mcq-prompt{
    text-align:center;
    font-size:28px;
    font-weight:bold;
    color:var(--gold);
    margin:10px 0 22px;
    letter-spacing:0.02em;
  }
  .mcq-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:8px;
  }
  .mcq-flag-btn{
    border:2px solid var(--line);
    background:rgba(247,243,234,0.03);
    border-radius:6px;
    padding:6px;
    cursor:pointer;
    transition: border-color 0.15s ease;
  }
  .mcq-flag-btn:hover:not(:disabled){ border-color:var(--gold); }
  .mcq-flag-btn:disabled{ cursor:default; }
  .mcq-flag-btn img{
    width:100%;
    aspect-ratio:3/2;
    object-fit:cover;
    border-radius:3px;
    display:block;
  }
  .mcq-flag-btn.mcq-correct{ border-color:var(--ok); box-shadow:0 0 0 1px var(--ok); }
  .mcq-flag-btn.mcq-wrong{ border-color:var(--ko); box-shadow:0 0 0 1px var(--ko); }

  .config{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:8px;
    padding-top:18px;
    border-top:1px solid var(--line);
  }
  .config-row[hidden]{ display:none !important; }
  .config-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:rgba(247,243,234,0.55);
  }
  .config-row.toggles{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    text-transform:none;
    letter-spacing:0;
    font-size:13px;
  }
  .config-row.toggles label{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
  }
  .config-row select,
  .player-name-input{
    font-family:inherit;
    font-size:16px;
    min-height:44px;
    padding:8px 10px;
    background:rgba(247,243,234,0.06);
    border:1px solid var(--line);
    color:var(--parchment);
    border-radius:12px;
    width:100%;
  }
  .config-row select:disabled, .config-row.toggles input:disabled{ opacity:0.4; }

  .recap{
    margin-top:12px;
    padding:16px;
    background:rgba(247,243,234,0.04);
    border:1px solid var(--line);
    border-radius:4px;
    text-align:center;
  }
  .recap-grade{
    font:800 clamp(128px, 42vw, 188px) / 0.8 var(--font-body);
    letter-spacing:-0.06em;
    color:var(--gold);
    margin:0 0 10px;
  }
  .recap-score{ font-size:22px; font-weight:800; color:var(--parchment); margin-bottom:6px; }
  .recap-replay{
    display:block;
    width:min(100%, 320px);
    margin:8px auto 0;
    padding:16px 18px;
    border:0;
    border-radius:16px;
    font:800 18px var(--font-body);
    background:linear-gradient(140deg, var(--sea), #9BE86A);
    color:#0B1A11;
    cursor:pointer;
  }
  .recap-share{
    display:block;
    width:min(100%, 320px);
    margin:10px auto 0;
    padding:14px 18px;
    border:1px solid rgba(247,243,234,0.22);
    border-radius:16px;
    background:rgba(247,243,234,0.07);
    color:var(--parchment);
    font:700 16px var(--font-body);
    cursor:pointer;
    text-decoration:none;
  }
  html.has-recap,
  html.has-recap body{
    height:100dvh;
    overflow:hidden;
  }
  html.has-recap .bottom-tabs{
    display:flex !important;
    position:sticky;
    bottom:0;
    z-index:8;
  }
  html.has-recap body{
    padding:0;
    align-items:stretch;
    justify-content:stretch;
  }
  html.has-recap .stage{ max-width:none; height:100dvh; min-height:100dvh; }
  html.has-recap #playView.card::before{ display:none; }
  html.has-recap #playView.card,
  html.in-match.has-recap #playView:not([hidden]){
    display:block !important;
    min-height:100dvh;
    height:100dvh;
    border:0;
    border-radius:0;
    padding:0 !important;
    box-shadow:none;
    background:transparent;
  }
  #playView.has-recap > :not(.recap){ display:none !important; }
  #playView.has-recap .recap{
    display:block !important;
    position:relative;
    height:calc(100dvh - 56px);
    width:100%;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    border-radius:0;
  }
  #playView.has-recap .recap-sky{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    background:#121814;
  }
  #playView.has-recap .recap-sky-flag{
    position:absolute;
    left:0;
    right:0;
    bottom:360px;
    top:auto;
    width:100%;
    height:auto;
    max-height:calc(100dvh - 360px);
    object-fit:contain;
    object-position:center bottom;
    z-index:0;
    opacity:1;
    filter:none;
    animation:recap-arrive 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  #playView.has-recap .recap-sky::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:360px;
    z-index:1;
    background:linear-gradient(180deg, rgba(12,14,12,0) 0%, #0c0e0c 28%);
  }
  #playView.has-recap .recap-world{
    display:none !important;
  }
  #playView.has-recap .recap-world svg{
    position:relative;
    z-index:0;
    width:100%;
    height:100%;
    display:block;
  }
  #playView.has-recap .recap-flag-land{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:2;
  }
  #playView.has-recap .recap-world #recapFlagImage{
    display:block;
    pointer-events:none;
  }
  #playView.has-recap .recap-world.recap-solo .wm-flag-ready,
  #playView.has-recap .recap-world.recap-solo .wm-flag-ready path{
    fill:transparent !important;
  }
  #playView.has-recap .recap-world path{
    fill:rgba(247,243,234,0.14);
    stroke:rgba(247,243,234,0.06);
    stroke-width:0.3;
  }
  #playView.has-recap .recap-world.recap-solo path{
    display:none;
  }
  #playView.has-recap .recap-world.recap-solo .wm-scrap{
    display:none !important;
  }
  #playView.has-recap .recap-world.recap-solo path.wm-focus,
  #playView.has-recap .recap-world.recap-solo path.wm-last:not(.wm-scrap){
    display:inline;
    fill:var(--gold);
    stroke:rgba(247,243,234,0.22);
    stroke-width:0.35;
  }
  #playView.has-recap .recap-world.recap-solo .wm-flag-fill{
    stroke:rgba(11,10,8,0.25);
  }
  #playView.has-recap .recap-world .wm-hit,
  #playView.has-recap .recap-world .wm-hit path{
    fill:rgba(232,150,63,0.7);
  }
  #playView.has-recap .recap-world .wm-last,
  #playView.has-recap .recap-world .wm-last path{
    fill:var(--gold);
    stroke:rgba(247,243,234,0.22);
    stroke-width:0.35;
  }
  #playView.has-recap .recap-world .wm-miss,
  #playView.has-recap .recap-world .wm-miss path{
    fill:rgba(214,69,63,0.45);
  }
  #playView.has-recap .recap-hero{
    position:absolute;
    left:0;
    right:0;
    top:auto;
    bottom:0;
    height:360px;
    z-index:2;
    pointer-events:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:0;
    padding:8px 16px 16px;
  }
  #playView.has-recap .recap-beat{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    width:auto;
    max-width:90%;
    margin:0;
    flex:none;
    font:700 18px/1.2 var(--font-body);
    color:rgba(247,243,234,0.95);
    letter-spacing:-0.03em;
    text-shadow:0 1px 14px rgba(0,0,0,0.7);
    animation:recap-meta-in 420ms 80ms ease both;
  }
  #playView.has-recap .recap-hero-meta{
    position:static;
    left:auto;
    top:auto;
    bottom:auto;
    transform:none;
    width:100%;
    max-width:none;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:1;
    justify-content:flex-start;
    gap:0;
    min-height:0;
    text-align:center;
    animation:recap-meta-in 420ms 160ms ease both;
  }
  #playView.has-recap .recap-score{
    display:block;
    font-size:48px;
    line-height:1;
    margin:6px 0 4px;
    letter-spacing:-0.03em;
  }
  #playView.has-recap .recap-sub{ display:block; margin-bottom:4px; font:800 22px var(--font-body); color:var(--gold); }
  #playView.has-recap .recap-grade{
    appearance:none;
    -webkit-appearance:none;
    background:none;
    border:0;
    padding:0;
    position:static;
    left:auto;
    top:auto;
    transform:none;
    margin:10px 0 8px;
    flex:none;
    width:auto;
    height:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
    color:var(--gold);
    font:800 52px / 1 var(--font-body);
    transform-origin:50% 55%;
    animation:recap-slam 400ms cubic-bezier(0.12, 1.45, 0.2, 1) 80ms both;
    text-shadow:0 0 28px rgba(232,150,63,0.55);
    cursor:pointer;
    pointer-events:auto;
  }
  #playView.has-recap .recap-replay{
    pointer-events:auto;
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    margin:10px 0 0;
    width:100%;
    max-width:280px;
    min-height:48px;
    z-index:6;
  }
  #playView.has-recap .recap-home,
  #playView.has-recap .recap-progress{
    position:absolute;
    top:max(14px, env(safe-area-inset-top));
    z-index:5;
    margin:0;
    padding:10px 12px;
    min-height:44px;
    min-width:44px;
    display:inline-flex;
    align-items:center;
    color:rgba(247,243,234,0.72);
    text-shadow:0 1px 8px rgba(0,0,0,0.65);
    font:600 16px var(--font-body);
    pointer-events:auto;
    background:none;
    border:0;
    cursor:pointer;
  }
  #playView.has-recap .recap-home{
    left:max(14px, env(safe-area-inset-left));
  }
  #playView.has-recap .recap-progress{
    right:max(14px, env(safe-area-inset-right));
  }
  @keyframes recap-slam{
    0%{ opacity:0; transform:scale(1.9); }
    62%{ opacity:1; transform:scale(0.9); }
    100%{ opacity:1; transform:scale(1); }
  }
  @keyframes recap-world-in{
    from{ opacity:0; }
    to{ opacity:1; }
  }
  @keyframes recap-arrive{
    from{ opacity:0; transform:scale(1.42); }
    to{ opacity:1; transform:scale(1); }
  }
  @keyframes recap-meta-in{
    from{ opacity:0; }
    to{ opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){
    #playView.has-recap .recap-grade,
    #playView.has-recap .recap-world,
    #playView.has-recap .recap-hero-meta,
    #playView.has-recap .recap-actions{ animation:none; }
  }
  #playView.has-recap .recap-actions{
    display:none !important;
  }
  #playView.has-recap .recap-empty-line{
    position:relative;
    z-index:5;
    margin:6px 12px 10px;
    max-width:92%;
    font:700 15px/1.3 var(--font-body);
    color:rgba(247,243,234,0.82);
  }
  #playView.has-recap.recap-empty .recap-sky{
    background:
      radial-gradient(ellipse at 50% 22%, rgba(211,163,74,0.2), transparent 46%),
      #1c1a16;
  }
  #playView.has-recap.recap-empty .recap-sky-flag,
  #playView.has-recap.recap-empty .recap-sky::after{ display:none; }
  #playView.has-recap.recap-empty .recap-empty-stage{
    margin:18px 12px 8px;
    padding:22px 18px;
    border-radius:16px;
    border:1px solid rgba(247,243,234,0.16);
    background:rgba(247,243,234,0.06);
  }
  #playView.has-recap.recap-empty .recap-empty-line{
    margin:0;
    max-width:none;
    font:700 16px/1.4 var(--font-body);
    color:var(--parchment);
  }
  #playView.has-recap .recap-grade{
    font-size:40px;
    margin:4px 0 0;
  }
  #playView.has-recap .recap-missed-dock{
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    z-index:4;
    margin:12px 0 0;
    pointer-events:none;
    flex:none;
  }
  #playView.has-recap .recap-hero{
    padding-bottom:16px;
  }
  #playView.has-recap .recap-missed-dock .recap-missed-flags img{
    width:36px;
    height:24px;
  }
  #playView.has-recap .recap-hits{
    width:100%;
    margin:8px 0 4px;
  }
  #playView.has-recap .recap-hits .label,
  #playView.has-recap .recap-missed-dock .label{
    display:block;
    font:700 11px var(--font-body);
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:rgba(247,243,234,0.5);
    margin-bottom:6px;
  }
  #playView.has-recap .recap-hit-list{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
  }
  #playView.has-recap .recap-hit-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 8px 4px 4px;
    border-radius:10px;
    background:rgba(247,243,234,0.08);
    font:700 13px var(--font-body);
    color:var(--parchment);
  }
  #playView.has-recap .recap-hit-chip img{
    width:28px;
    height:19px;
    object-fit:cover;
    border-radius:2px;
  }
  .recap-home{
    display:block;
    margin:18px auto 0;
    background:none;
    border:0;
    color:rgba(247,243,234,0.35);
    font:600 13px var(--font-body);
    cursor:pointer;
  }
  .recap-sub{ font-size:13px; color:rgba(247,243,234,0.6); margin-bottom:10px; }
  .recap-sub.ok{ color:var(--ok); }
  .recap-sub.ko{ color:rgba(247,243,234,0.6); }
  .recap-missed{ margin:12px 0; }
  .recap-missed .label{
    display:block; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
    color:rgba(247,243,234,0.4); margin-bottom:8px;
  }
  .recap-missed-flags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
  .recap-missed-flags img{ width:36px; height:24px; object-fit:cover; border-radius:2px; border:1px solid var(--line); }
  .recap-badges{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:10px 0; }
  .badge-chip{
    font-size:12px;
    padding:5px 10px;
    border-radius:12px;
    background:rgba(211,163,74,0.15);
    color:var(--gold);
    border:1px solid rgba(211,163,74,0.3);
  }
  .badge-chip.new{ animation: dotpulse 1s ease-in-out 2; }

  .history-chart{
    display:flex;
    align-items:flex-end;
    gap:6px;
    height:70px;
    padding-top:6px;
  }
  .history-bar{
    flex:1;
    background:linear-gradient(180deg, var(--gold), var(--sea));
    border-radius:2px 2px 0 0;
    min-height:3px;
  }
  .history-empty, .missed-empty{
    font-size:12.5px;
    color:rgba(247,243,234,0.4);
    font-style:italic;
  }
  #leaderboardView:not([hidden]){
    display:flex;
    flex-direction:column;
  }
  @media (orientation: portrait){
    #leaderboardView{
      min-height:calc(100dvh - 72px);
    }
  }
  #leaderboardView .modal-section{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  #leaderboardView .leaderboard-list{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .leaderboard-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font:700 18px/1.35 var(--font-body);
    color:var(--gold);
    font-style:normal;
    flex:1 1 auto;
    min-height:120px;
    padding:28px 20px;
    background:rgba(232,150,63,0.1);
    border:1px solid rgba(232,150,63,0.4);
    border-radius:16px;
  }
  .lb-empty-actions{
    margin-top:12px;
    flex-shrink:0;
  }
  .lb-empty-actions .action.primary{
    min-height:52px;
    font-size:16px;
  }
  .world-map-wrap{
    background:rgba(247,243,234,0.03);
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px;
  }
  .world-map-container{
    width:100%;
    line-height:0;
    overflow:hidden;
    touch-action:none;
  }
  .world-map-zoom{
    transform-origin:50% 50%;
    will-change:transform;
  }
  .world-map-container svg{ width:100%; height:auto; display:block; min-height:38vh; }
  .progress-more{
    margin-top:14px;
    border-top:1px solid var(--line);
    padding-top:10px;
  }
  .progress-more summary{
    cursor:pointer;
    font:700 13px var(--font-body);
    color:rgba(247,243,234,0.55);
    list-style:none;
  }
  .progress-more summary::-webkit-details-marker{ display:none; }
  .progress-more summary::before{ content:"▸ "; }
  .progress-more[open] summary::before{ content:"▾ "; }
  .home-more{
    margin-top:18px;
    border-top:1px solid var(--line);
    padding-top:12px;
  }
  .home-more summary{
    cursor:pointer;
    font:700 13px var(--font-body);
    color:rgba(247,243,234,0.55);
    list-style:none;
  }
  .home-more summary::-webkit-details-marker{ display:none; }
  .home-more summary::before{ content:"▸ "; }
  .home-more[open] summary::before{ content:"▾ "; }
  .home-more[open] summary{ margin-bottom:12px; }
  .score-pop{ animation: pop 0.35s ease; }
  .world-map-container path{
    fill:rgba(247,243,234,0.32);
    stroke:rgba(247,243,234,0.01);
    stroke-width:6;
    cursor:pointer;
    transition: fill 0.15s ease;
    paint-order: stroke fill;
  }
  .world-map-container .wm-hit-pad{
    fill:transparent;
    stroke:none;
    pointer-events:all;
    cursor:pointer;
  }
  .world-map-container .wm-seen,
  .world-map-container .wm-seen path{ fill:var(--sea); }
  .world-map-container .wm-failed,
  .world-map-container .wm-failed path{ fill:var(--coral); }
  .world-map-container .wm-europe-focus,
  .world-map-container .wm-europe-focus path{
    stroke:var(--gold);
    stroke-width:1.4;
  }
  @media (hover: hover) and (pointer: fine){
    .world-map-container .wm-hover,
    .world-map-container .wm-hover path{ fill:var(--gold); }
  }
  .world-map-legend{
    display:flex;
    gap:16px;
    justify-content:center;
    margin-top:10px;
    font-size:11.5px;
    color:rgba(247,243,234,0.6);
  }
  .world-map-legend span{ display:inline-flex; align-items:center; gap:6px; }
  .wm-swatch{ width:11px; height:11px; border-radius:3px; display:inline-block; }
  .wm-swatch-seen{ background:var(--sea); }
  .wm-swatch-failed{ background:var(--coral); }
  .wm-swatch-unseen{ background:rgba(247,243,234,0.12); }
  .world-map-hint{
    text-align:center;
    font-size:12.5px;
    color:rgba(247,243,234,0.5);
    margin-top:8px;
    min-height:16px;
    font-style:italic;
  }
  .world-map-inspect{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:12px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(247,243,234,0.04);
  }
  .world-map-inspect[hidden]{ display:none !important; }
  .world-map-inspect img{
    width:48px; height:32px; object-fit:cover; border-radius:4px;
    border:1px solid var(--line);
  }
  .wm-inspect-copy{ flex:1; min-width:0; }
  .wm-inspect-copy strong{ display:block; font:700 14px var(--font-body); color:var(--parchment); }
  .wm-inspect-copy span{ font:500 12px var(--font-body); color:rgba(247,243,234,0.5); }
  .wm-inspect-play{
    flex:none;
    border:0;
    border-radius:10px;
    padding:8px 12px;
    font:700 13px var(--font-body);
    background:linear-gradient(140deg, var(--sea), #9BE86A);
    color:#0B1A11;
    cursor:pointer;
  }
  .world-map-micro-wrap{
    margin-top:12px;
    border-top:1px solid var(--line);
    padding-top:10px;
  }
  .world-map-micro-wrap summary{
    cursor:pointer;
    font:700 13px var(--font-body);
    color:rgba(247,243,234,0.55);
    list-style:none;
  }
  .world-map-micro-wrap summary::-webkit-details-marker{ display:none; }
  .world-map-micro-wrap summary::before{ content:"▸ "; }
  .world-map-micro-wrap[open] summary::before{ content:"▾ "; }
  .world-map-micro{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
    max-height:min(42vh, 280px);
    overflow:auto;
  }
  .wm-micro-chip{
    font:600 11.5px var(--font-body);
    padding:4px 9px;
    border-radius:10px;
    background:rgba(247,243,234,0.08);
    color:rgba(247,243,234,0.6);
    border:1px solid var(--line);
    cursor:pointer;
  }
  .wm-micro-chip.wm-seen{ background:rgba(63,201,122,0.18); color:var(--sea); border-color:rgba(63,201,122,0.4); }
  .wm-micro-chip.wm-failed{ background:rgba(214,69,63,0.18); color:#e8998a; border-color:rgba(214,69,63,0.4); }
  .daily-inline-login{
    max-width:360px;
    margin:16px auto 0;
    text-align:left;
  }
  .daily-inline-login input{
    width:100%;
    min-height:44px;
    margin-bottom:8px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(247,243,234,0.06);
    color:var(--parchment);
    font:600 16px var(--font-body);
  }
  .world-map-credit{
    text-align:center;
    font-size:10.5px;
    color:rgba(247,243,234,0.3);
    margin-top:10px;
  }
  .missed-stats-list{ display:flex; flex-direction:column; gap:6px; }
  .missed-stats-row{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
  }
  .missed-stats-row img{ width:28px; height:19px; object-fit:cover; border-radius:2px; border:1px solid var(--line); }
  .missed-stats-row .count{ margin-left:auto; color:var(--gold); font-family:var(--font-mono); }
  .badges-grid{ display:flex; flex-direction:column; gap:8px; }
  .badge-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:4px;
    background:rgba(247,243,234,0.03);
    border:1px solid var(--line);
    font-size:13px;
  }
  .badge-row.locked{ opacity:0.4; }
  .badge-row .icon{ font-size:18px; }
  .badge-row .txt{ display:flex; flex-direction:column; }
  .badge-row .txt .desc{ font-size:11px; color:rgba(247,243,234,0.5); }
  .leaderboard-list{ display:flex; flex-direction:column; gap:4px; font-size:13px; }
  .leaderboard-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 8px;
    border-radius:3px;
  }
  .leaderboard-row:nth-child(odd){ background:rgba(247,243,234,0.03); }
  .leaderboard-row .rank{ color:var(--gold); font-family:var(--font-mono); width:20px; }
  .leaderboard-row .meta{ margin-left:auto; font-size:11px; color:rgba(247,243,234,0.45); }

  .turn-banner{
    text-align:center;
    font-size:16px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--gold);
    background:rgba(211,163,74,0.1);
    border:1px solid rgba(211,163,74,0.3);
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:16px;
  }
  .player-names-editor{
    display:none;
    flex-direction:column;
    gap:8px;
  }
  .player-name-field{ display:flex; flex-direction:column; gap:4px; }
  .player-name-field label{
    font:600 16px var(--font-body);
    color:rgba(247,243,234,0.7);
  }
  .player-names-editor input{
    font-family:inherit;
    font-size:16px;
    min-height:44px;
    padding:10px 12px;
    background:rgba(247,243,234,0.06);
    border:1px solid var(--line);
    color:var(--parchment);
    border-radius:12px;
  }
  .player-names-editor input:focus{ outline:none; border-color:var(--gold); }
  #playView:not(.local-lobby) #playerNamesEditor{ display:none !important; }

  .mode-tabs{
    display:flex;
    justify-content:center;
    gap:2px;
    max-width:560px;
    margin:0 auto;
    padding-top:16px;
  }
  .tab-btn{
    flex:1;
    font-family:inherit;
    font-size:12.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:10px;
    border:1px solid var(--line);
    background:rgba(247,243,234,0.03);
    color:rgba(247,243,234,0.5);
    cursor:pointer;
  }
  .tab-btn:first-child{ border-radius:4px 0 0 0; }
  .tab-btn:last-child{ border-radius:0 4px 0 0; }
  .tab-btn.active{ background:var(--sea); color:var(--parchment); border-color:var(--sea); }

  .server-url-input{
    width:100%;
    font-family:inherit;
    font-size:16px;
    padding:10px 12px;
    background:rgba(247,243,234,0.06);
    border:1px solid var(--line);
    color:var(--parchment);
    border-radius:12px;
  }
  .room-code-input{ text-transform:uppercase; letter-spacing:0.2em; text-align:center; font-family:var(--font-mono); }
  .room-code-display{
    text-align:center;
    font-size:22px;
    letter-spacing:0.15em;
    color:var(--gold);
    margin-bottom:8px;
  }
  .scoreboard{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
    margin-bottom:18px;
  }
  .scoreboard-chip{
    font-size:12px;
    padding:5px 10px;
    border-radius:12px;
    background:rgba(247,243,234,0.06);
    border:1px solid var(--line);
    color:rgba(247,243,234,0.7);
  }
  .scoreboard-chip.me{ border-color:var(--gold); color:var(--gold); }

  .config-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-family:inherit;
    font-size:12.5px;
    letter-spacing:0.04em;
    padding:11px 14px;
    margin-top:10px;
    background:rgba(247,243,234,0.03);
    border:1px solid var(--line);
    border-radius:4px;
    color:rgba(247,243,234,0.75);
    cursor:pointer;
  }
  .config-toggle:hover{ border-color:var(--gold); color:var(--gold); }
  .config-summary{
    font-size:11px;
    color:rgba(247,243,234,0.45);
    font-style:italic;
  }

  /* ---------- Écran d'accueil : lobby QCM ---------- */
  .home-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
  }
  .home-avatar{
    width:48px; height:48px;
    border-radius:12px;
    overflow:hidden;
    background:#0B0A08;
    display:flex; align-items:center; justify-content:center;
    flex:none;
  }
  .home-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .home-greeting{ flex:1; min-width:0; }
  .home-name{ font:800 22px var(--font-body); color:var(--parchment); letter-spacing:-0.03em; }
  .home-sub{ font:600 15px var(--font-body); color:rgba(247,243,234,0.72); }
  .home-chips{ display:flex; gap:8px; flex:none; }
  .home-chip{
    padding:7px 11px;
    border-radius:11px;
    background:var(--card-bg);
    font:700 12px var(--font-mono);
    color:var(--parchment);
    border:1px solid var(--line);
  }
  .level-row{
    padding:12px 14px;
    border-radius:14px;
    background:rgba(247,243,234,0.04);
    margin-bottom:14px;
  }
  .level-label{
    display:flex;
    justify-content:space-between;
    font:600 11.5px var(--font-body);
    color:rgba(247,243,234,0.55);
    margin-bottom:9px;
  }
  .level-label span:last-child{ font-family:var(--font-mono); }
  .level-track{ height:8px; border-radius:99px; background:var(--navy-deep); overflow:hidden; }
  .level-fill{ height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg, var(--sea), #9BE86A); transition:width .6s ease-out; }

  .home-modes{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
  .home-lobby-body{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:0;
    flex:1 1 auto;
  }
  .home-cta{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    width:100%;
    flex:1 1 auto;
    min-height:220px;
    margin:0;
    padding:14px 16px 12px;
    text-align:center;
    border:0;
    border-radius:20px;
    background:linear-gradient(160deg, rgba(232,150,63,0.96), rgba(180,70,40,0.92));
    color:var(--parchment);
    cursor:pointer;
  }
  .home-cta-kicker{
    font:700 11px var(--font-body);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(247,243,234,0.78);
  }
  .home-cta-country{
    font:800 26px/1.1 var(--font-body);
    letter-spacing:-0.03em;
  }
  .home-cta-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    flex:1 1 auto;
    width:min(100%, 280px);
    margin:4px auto;
    min-height:120px;
  }
  .home-cta-grid img{
    width:100%;
    height:100%;
    min-height:56px;
    object-fit:cover;
    border-radius:8px;
    border:1px solid rgba(11,10,8,0.35);
    background:#0B0A08;
    pointer-events:none;
  }
  .home-cta-go{
    font:800 16px var(--font-body);
    letter-spacing:-0.02em;
    margin-top:2px;
  }
  .home-cta-meta{
    font:600 12px var(--font-body);
    color:rgba(247,243,234,0.78);
  }
  .home-section{ min-width:0; flex:none; }
  .home-section-title{
    margin:0 0 8px;
    font:700 11px var(--font-body);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(247,243,234,0.5);
  }
  .home-quiz-grid{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .home-quiz-card{
    flex:1 1 calc(33.33% - 8px);
    min-height:36px;
    margin:0;
    padding:8px 10px;
    text-align:center;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(247,243,234,0.05);
    color:var(--parchment);
    font:700 13px var(--font-body);
    cursor:pointer;
  }
  .home-quiz-card:hover{ border-color:rgba(232,150,63,0.45); background:rgba(247,243,234,0.08); }
  .home-alt-rail{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .home-alt-btn{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1px;
    min-height:40px;
    min-width:0;
    flex:1 1 calc(33.33% - 8px);
    margin:0;
    padding:6px 10px;
    text-align:left;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(247,243,234,0.03);
    color:var(--parchment);
    cursor:pointer;
  }
  .home-alt-btn--lobby{ border-style:dashed; }
  .home-alt-btn:hover{ border-color:rgba(232,150,63,0.4); }
  .home-alt-name{
    font:700 13px var(--font-body);
  }
  .home-alt-sub{
    font:500 11px var(--font-body);
    color:rgba(247,243,234,0.5);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
  #homeStage{ display:none !important; }
  @media (max-width: 520px){
    #homeView.card{
      display:flex;
      flex-direction:column;
      flex:1 1 auto;
      min-height:calc(100dvh - 56px);
      padding-bottom:8px;
    }
    .home-cta{ min-height:240px; }
    .home-cta-country{ font-size:22px; }
  }

  .daily-question-badge{
    text-align:center;
    font:800 17px var(--font-body);
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:var(--gold);
    background:rgba(232,150,63,0.16);
    border:2px solid rgba(232,150,63,0.5);
    border-radius:12px;
    padding:13px 14px;
    margin-bottom:14px;
  }
  .daily-question-badge.capital{
    color:var(--sea);
    background:rgba(63,201,122,0.16);
    border-color:rgba(63,201,122,0.5);
  }
  .daily-question-badge.badge-pop{
    animation: badgePop 0.4s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes badgePop{
    0%{ transform:scale(0.85); }
    60%{ transform:scale(1.06); }
    100%{ transform:scale(1); }
  }

  .daily-card{
    display:block;
    width:100%;
    text-align:left;
    border:0;
    cursor:pointer;
    border-radius:16px;
    padding:15px 18px;
    margin-bottom:18px;
    background:linear-gradient(140deg, #2A6B45, var(--sea));
    color:#0B1A11;
  }
  .daily-card:hover{ filter:brightness(1.05); }
  .daily-card:disabled{ cursor:default; opacity:0.65; }
  .daily-title{ font:800 17px var(--font-body); }
  .daily-sub{ font:600 11.5px var(--font-body); opacity:0.78; margin-top:3px; }

  .difficulty-section{ margin-bottom:20px; }
  .online-link{
    display:block;
    width:100%;
    text-align:center;
    background:rgba(63,201,122,0.1);
    border:1px solid rgba(63,201,122,0.28);
    border-radius:14px;
    cursor:pointer;
    font:700 14px var(--font-body);
    color:var(--parchment);
    padding:14px 12px;
    margin:0 0 18px;
  }
  .online-link:hover{ color:var(--sea); }

  .mode-picker{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    margin-bottom:8px;
  }
  .mode-picker-tile{
    text-align:center;
    border:2px solid var(--line);
    border-radius:16px;
    padding:15px 6px;
    background:var(--card-bg);
    cursor:pointer;
    color:var(--parchment);
  }
  .mode-picker-tile:hover{ border-color:rgba(63,201,122,0.4); }
  .mode-picker-tile.active{
    border-color:var(--sea);
    background:linear-gradient(160deg, rgba(63,201,122,0.16), rgba(232,150,63,0.08));
  }
  .mp-icon{ font-size:24px; margin-bottom:5px; }
  .mp-name{ font:800 12.5px var(--font-body); line-height:1.25; }
  .mp-sub{ font:600 10px var(--font-body); color:rgba(247,243,234,0.5); margin-top:3px; line-height:1.3; }
  .mode-switch{
    display:flex;
    gap:6px;
    margin-bottom:14px;
    padding:4px;
    background:var(--card-bg);
    border-radius:14px;
  }
  .mode-switch-btn{
    flex:1;
    font-family:inherit;
    font-size:12.5px;
    font-weight:700;
    padding:9px 8px;
    border:0;
    border-radius:11px;
    background:none;
    color:rgba(247,243,234,0.5);
    cursor:pointer;
  }
  .mode-switch-btn.active{
    background:linear-gradient(140deg, var(--sea), var(--gold));
    color:#0B1A11;
  }
  .difficulty-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .difficulty-tile{
    text-align:left;
    border:0;
    cursor:pointer;
    border-radius:16px;
    padding:16px 15px;
    color:#0B1A11;
    display:flex;
    flex-direction:column;
    gap:3px;
  }
  .difficulty-tile:hover{ filter:brightness(1.05); }
  .difficulty-tile.facile{ background:linear-gradient(140deg, var(--sea), #9BE86A); }
  .difficulty-tile.moyen{ background:linear-gradient(140deg, var(--gold), #F2C368); }
  .difficulty-tile.difficile{ background:linear-gradient(140deg, var(--coral), #F0837A); }
  .difficulty-tile.hardcore{
    background:linear-gradient(140deg, #1a1a1a, #3a0d0d);
    color:#F7F3EA;
    border:1px solid rgba(214,69,63,0.5);
  }
  .difficulty-tile.hardcore:disabled{
    background:var(--card-bg);
    color:rgba(247,243,234,0.4);
    cursor:not-allowed;
    border:1px dashed var(--line);
  }
  .difficulty-name{ font:800 16px var(--font-body); }
  .difficulty-sub{ font:600 11px var(--font-body); opacity:0.75; }

  .modes-wip-tag{
    font:600 11px var(--font-body);
    color:rgba(247,243,234,0.4);
  }
  .mode-tile.wip{ cursor:pointer; opacity:0.5; }
  .mode-tile.wip:hover{ transform:none; }

  .modes-header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:11px;
    font:700 14px var(--font-body);
    color:var(--parchment);
  }
  .modes-link{
    background:none; border:0; cursor:pointer;
    font:600 12px var(--font-body);
    color:var(--gold);
  }
  .modes-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:8px;
  }
  .mode-tile{
    text-align:left;
    border:0;
    cursor:pointer;
    border-radius:15px;
    padding:12px 13px;
    background:var(--card-bg);
    color:var(--parchment);
    display:flex;
    flex-direction:column;
    gap:8px;
    transition: transform .12s ease;
  }
  .mode-tile:hover{ transform:translateY(-1px); }
  .mode-tile:disabled{ opacity:0.5; cursor:not-allowed; }
  .mode-tile-swatch{ height:26px; border-radius:6px; }
  .mode-tile-name{ font:700 13px var(--font-body); }
  .mode-tile-sub{ font:500 11px var(--font-body); color:rgba(247,243,234,0.5); }

  /* ---------- Écran de jeu (bandeau retour + score) ---------- */
  .play-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
  }
  .back-link{
    background:none; border:0; cursor:pointer;
    font:700 13px var(--font-body);
    color:rgba(247,243,234,0.7);
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding:10px 8px 10px 0;
  }
  .back-link:hover{ color:var(--gold); }
  .play-header-stats{
    display:flex; gap:12px;
    font:800 16px var(--font-mono);
    color:var(--parchment);
  }
  #streakStat.streak-hot{ color:var(--gold); transform:scale(1.08); }

  .view-title{
    font:800 24px var(--font-body);
    color:var(--parchment);
    margin-bottom:16px;
  }

  /* ---------- Barre d'onglets du bas ---------- */
  .bottom-tabs{
    display:flex;
    gap:4px;
    margin-top:14px;
    padding:6px;
    background:var(--card-bg);
    border-radius:18px;
  }
  .bottom-tab-btn{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:9px 4px;
    min-height:44px;
    border:0;
    border-radius:13px;
    background:none;
    cursor:pointer;
    font:700 12px var(--font-body);
    color:rgba(247,243,234,0.72);
  }
  .bottom-tab-btn .bt-mark{
    width:16px; height:3px;
    border-radius:99px;
    background:transparent;
  }
  .bottom-tab-btn.active{ color:var(--sea); background:rgba(63,201,122,0.12); }
  .bottom-tab-btn.active .bt-mark{ background:var(--sea); }

  .toast{
    position:fixed;
    bottom:24px; left:50%;
    transform:translateX(-50%);
    background:var(--card-bg);
    color:var(--parchment);
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 18px;
    font:600 13px var(--font-body);
    z-index:80;
    box-shadow:0 10px 24px rgba(0,0,0,0.4);
  }

  .account-msg{
    font-size:16px;
    color:rgba(247,243,234,0.6);
    margin:6px 0 0;
    min-height:20px;
  }
  .account-msg.error{ color:#e8998a; }
  .account-msg.ok{ color:var(--ok); }
  .field-invalid{
    border-color:var(--coral) !important;
    box-shadow:0 0 0 1px var(--coral);
  }
  .account-chip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:10px;
    background:rgba(63,201,122,0.1);
    border:1px solid rgba(63,201,122,0.3);
    font:700 13px var(--font-body);
    color:var(--parchment);
  }
  .account-stats{
    display:flex;
    gap:8px;
    margin-top:10px;
    flex-wrap:wrap;
  }
  .account-stats .home-chip{ font-size:11px; padding:6px 10px; }

  .lb-filter{
    margin:0 0 12px;
  }
  .lb-filter .field-label{
    display:block;
    margin-bottom:6px;
  }
  .lb-filter select{
    font-family:inherit;
    font-size:16px;
    min-height:44px;
    width:100%;
    padding:8px 10px;
    background:rgba(247,243,234,0.06);
    border:1px solid var(--line);
    color:var(--parchment);
    border-radius:12px;
  }
  .world-map-tools{ margin:0 0 8px; }
  .wm-zoom-chip{
    font:700 13px var(--font-body);
    min-height:44px;
    padding:8px 14px;
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(247,243,234,0.06);
    color:var(--parchment);
    cursor:pointer;
  }
  .lb-style-tabs{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }
  .lb-style-tab{
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    padding:10px 14px;
    min-height:44px;
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(247,243,234,0.04);
    color:rgba(247,243,234,0.82);
    cursor:pointer;
  }
  .lb-style-tab.active{
    background:linear-gradient(140deg, var(--sea), var(--gold));
    color:#0B1A11;
    border-color:transparent;
  }

  /* ---------- Mobile ---------- */
  @media (max-width: 480px){
    body{
      padding:0;
      align-items:stretch;
      justify-content:flex-start;
      display:block;
    }
    .stage{
      max-width:none;
      width:100%;
      min-height:100vh;
      min-height:100dvh;
      display:flex;
      flex-direction:column;
    }
    #warnBox{ flex:none; padding:0 4px; }
    .card{
      border-radius:0;
      border-left:none;
      border-right:none;
      box-shadow:none;
      padding:max(20px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
      flex:1 1 auto;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
    }
    .home-header{ margin-bottom:14px; }
    .masthead{
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
      flex:none;
    }
    .stats{ width:100%; justify-content:space-between; }
    .flag{ width:100%; max-width:220px; }
    .flip-card{ width:100%; max-width:220px; }
    .mcq-prompt{ font-size:21px; }
    .mcq-grid{ gap:8px; }
    .config-row{
      flex-direction:column;
      align-items:flex-start;
      gap:6px;
    }
    .config-row select{ width:100%; }
    .controls{ flex-wrap:wrap; gap:8px; }
    button.action{ padding:10px 14px; font-size:12px; }
    .modal{ padding:18px 14px; }
    .room-code-display{ font-size:19px; }
    .type-fallback{ flex-direction:column; }
    .type-fallback input{ width:100%; }
    .modes-grid{ grid-template-columns:1fr 1fr; gap:8px; }
    .quickplay-title{ font-size:19px; }
    .bottom-tabs{
      flex:none;
      margin-top:0;
      border-radius:0;
      position:sticky;
      bottom:0;
      background:var(--navy);
      padding-bottom:calc(6px + env(safe-area-inset-bottom));
      z-index:5;
    }
    .footnote{ display:none; }
  }

  @media (max-height: 520px){
    body{
      padding:0;
      align-items:stretch;
      justify-content:flex-start;
      display:block;
    }
    .stage{
      max-width:none;
      width:100%;
      min-height:100dvh;
    }
    .card{
      border-radius:0;
      box-shadow:none;
    }
    .card::before{ display:none; }
    .bottom-tabs{ border-radius:0; }
  }

  /* ---------- Match immersif : le drapeau occupe l'écran ---------- */
  html.in-match:not(.has-recap) .bottom-tabs{ display:none !important; }
  html.in-match.has-recap .bottom-tabs{ display:flex !important; }
  html.in-match #instructionsEl,
  html.in-match #dailyInstructions{ display:none !important; }
  #homeView[hidden],
  #playView[hidden],
  #dailyView[hidden],
  #progressView[hidden],
  #leaderboardView[hidden],
  #profileView[hidden]{
    display:none !important;
  }
  html.in-match #playView:not([hidden]),
  html.in-match #dailyView:not([hidden]){
    display:flex !important;
    flex-direction:column;
    min-height:calc(100dvh - 16px);
    padding:calc(12px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom));
  }
  html.in-match #playView .mcq-grid{
    flex:1 1 auto;
    min-height:0;
    align-content:center;
  }
  html.in-match #playView .play-header{ margin-bottom:8px; }
  html.in-match #playView .flag-wrap{
    position:relative;
    flex:1 1 auto;
    justify-content:center;
    align-items:center;
    margin:0;
    min-height:0;
    width:100%;
  }
  html.in-match #dailyView #dailyQuestionArea{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    justify-content:flex-start;
    gap:8px;
  }
  html.in-match #dailyView .timer-row{
    margin-top:auto;
  }
  html.in-match #dailyView .flag-wrap{
    position:relative;
    flex:0 0 auto;
    justify-content:center;
    align-items:center;
    min-height:0;
    width:100%;
    aspect-ratio:3/2;
  }
  html.in-match #playView .flip-card,
  html.in-match #dailyView .flip-card{
    position:relative;
    inset:auto;
    width:auto;
    max-width:100%;
    max-height:100%;
    height:100%;
    aspect-ratio:3/2;
  }
  html.in-match:not(.has-recap) #playView .type-fallback.visible{
    background:rgba(11,10,8,0.55);
    border:1px solid rgba(247,243,234,0.16);
    border-radius:14px;
    padding:6px 6px 6px 12px;
    gap:6px;
  }
  html.in-match:not(.has-recap) #playView .type-fallback input{
    border:0;
    background:transparent;
    font-size:20px;
    min-height:48px;
  }
  html.in-match:not(.has-recap) #playView .type-go{
    min-width:48px;
    min-height:48px;
    border-radius:12px;
  }
  html.in-match #playView .flip-card-inner,
  html.in-match #dailyView .flip-card-inner{
    height:auto;
    aspect-ratio:3/2;
  }
  html.in-match #playView .flag,
  html.in-match #dailyView .flag,
  html.in-match #onlineGameView .flag{
    max-width:none;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:contain;
    object-position:center;
  }
  html.in-match .daily-question-badge{
    font-size:12px;
    padding:6px 10px;
    margin-bottom:8px;
    border-width:1px;
    letter-spacing:0.06em;
  }
  html.in-match #playView .play-rail{
    display:flex;
    flex-direction:column;
    flex:none;
    width:100%;
    margin-top:auto;
    gap:8px;
  }
  html.in-match #playView .timer-row{
    position:static;
    top:auto;
    bottom:auto;
    left:auto;
    right:auto;
    margin:0;
    z-index:2;
  }
  html.in-match #playView .timer-track{
    background:rgba(11,10,8,0.45);
    margin-bottom:0;
  }
  html.in-match #playView .timer-seconds{
    font-size:16px;
    min-width:2.5ch;
  }
  html.in-match #playView .play-dock{
    position:static;
    left:auto; right:auto;
    bottom:auto;
    z-index:3;
    max-width:none;
    margin:0;
    padding:0;
    background:none;
    border-radius:0;
  }
  html.in-match #playView .type-fallback:not(.visible){ display:none !important; }
  html.in-match #playView .type-fallback.visible{ display:flex !important; }
  html.in-match .type-fallback{ margin-top:0; }
  html.in-match .feedback{ min-height:0; }
  html.in-match #playView .play-rail > .controls{
    position:static;
    left:auto; right:auto;
    bottom:auto;
    z-index:6;
    margin:0;
    gap:12px;
    flex:none;
  }
  html.in-match #playView .play-rail > .controls .action{
    background:rgba(11,10,8,0.62);
    border:1px solid rgba(247,243,234,0.22);
    color:rgba(247,243,234,0.92);
    font-size:14px;
    font-weight:700;
    min-height:44px;
    padding:10px 14px;
    letter-spacing:0;
  }
  @media (hover: hover) and (pointer: fine){
    html.in-match #playView .play-rail > .controls .action:hover{
      color:var(--gold);
      border-color:var(--gold);
    }
  }
  html.in-match #playView.play-handoff .play-header,
  html.in-match #playView.play-handoff .play-header-stats{ display:none !important; }
  html.in-match #playView.play-handoff{
    min-height:100dvh;
  }
  html.in-match #playView.play-handoff .recap{
    display:flex !important;
    flex-direction:column;
    justify-content:center;
    flex:1;
    min-height:100dvh;
    padding:24px 20px max(28px, env(safe-area-inset-bottom));
  }
  html.in-match #playView.play-handoff .recap .controls{
    display:flex !important;
    flex-direction:column;
    position:static;
    margin-top:16px;
    width:100%;
  }
  .sofa-void{
    text-align:center;
    width:100%;
    max-width:420px;
    margin:0 auto;
    padding:20px 16px;
    border-radius:16px;
    border:1px solid rgba(247,243,234,0.16);
    background:rgba(247,243,234,0.06);
  }
  .sofa-void-mark{
    font-size:40px;
    line-height:1;
    margin-bottom:10px;
  }
  html.in-match #playView.play-handoff .recap .controls .action,
  html.in-match #playView.play-handoff .recap .action{
    width:100%;
    min-height:48px;
    font-size:16px;
    padding:14px 22px;
    background:rgba(247,243,234,0.08);
    border:1px solid var(--line);
    color:var(--parchment);
  }
  html.in-match #playView.play-handoff .recap .controls .action.primary,
  html.in-match #playView.play-handoff .recap .action.primary{
    margin-top:0;
    background:linear-gradient(140deg, var(--sea), var(--gold));
    color:#0B1A11;
    border-color:transparent;
  }
  #playView.local-lobby .play-header-stats{ visibility:hidden; }
  #playView.local-lobby .config-row.toggles{ display:none !important; }
  #playView.local-lobby .play-header{ order:0; }
  #playView.local-lobby #localLobbyTitle{ order:1; margin:8px 0 8px; }
  #playView.local-lobby #localLobbyHint{ order:2; }
  #playView.local-lobby #localLobbyLast{ order:3; }
  #playView.local-lobby #playerNamesEditor{ order:4; }
  #playView.local-lobby #configToggleBtn{ order:5; }
  #playView.local-lobby #configPanel{ order:6; }
  #playView.local-lobby .play-rail{
    order:30;
    margin-top:auto;
    width:100%;
  }
  #playView.local-lobby .local-lobby-hint{
    display:block;
    margin:0 0 16px;
    font:700 16px/1.35 var(--font-body);
    color:var(--gold);
  }
  #playView.local-lobby .local-lobby-last{
    display:block;
    margin:0 0 16px;
    padding:12px 14px;
    border-radius:14px;
    background:rgba(247,243,234,0.05);
    border:1px solid var(--line);
    font:600 15px var(--font-body);
    color:var(--parchment);
  }
  #playView.local-lobby .local-lobby-last .label{
    display:block;
    font:700 11px var(--font-body);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(247,243,234,0.5);
    margin-bottom:6px;
  }
  #playView.local-lobby .player-names-editor{ display:flex; flex-direction:column; gap:8px; margin:0 0 12px; }
  #playView.local-lobby .play-rail > .controls{ margin-top:0; }
  #playView.local-lobby .play-rail > .controls .action.primary,
  html.in-match #playView.local-lobby .play-rail > .controls .action.primary{
    width:100%;
    min-height:52px;
    font-size:16px;
    font-weight:800;
    background:linear-gradient(140deg, var(--sea), var(--gold));
    color:#0B1A11;
    border-color:transparent;
  }
  #playView.card.local-lobby{
    display:flex;
    flex-direction:column;
    min-height:100dvh;
  }
  #localLobbyHint[hidden],
  #localLobbyLast[hidden]{ display:none !important; }
  .handoff-stage{ text-align:center; width:100%; }
  .handoff-flag{
    width:min(100%, 280px);
    aspect-ratio:3/2;
    object-fit:cover;
    border-radius:12px;
    border:1px solid rgba(247,243,234,0.18);
    margin:0 auto 12px;
    display:block;
  }
  .handoff-empty{
    font:700 16px var(--font-body);
    color:rgba(247,243,234,0.55);
    margin:0 0 12px;
  }
  .handoff-pass{
    font:700 18px var(--font-body);
    color:var(--gold);
    margin:10px 0 16px;
  }
  #dailyView.has-daily-recap .play-header-stats,
  #dailyView.has-daily-recap #dailyQuestionArea{ display:none !important; }
  #dailyView.has-daily-recap #dailyResultsBox{ flex:1; overflow:auto; }
  #playView.play-handoff .flag-wrap,
  #playView.play-handoff .mcq-prompt,
  #playView.play-handoff .mcq-grid,
  #playView.play-handoff .play-rail,
  #playView.play-handoff .timer-row,
  #playView.play-handoff .play-dock,
  #playView.play-handoff #turnBanner,
  #playView.play-handoff .play-rail > .controls{ display:none !important; }
  #playView.local-lobby .flag-wrap,
  #playView.local-lobby .mcq-prompt,
  #playView.local-lobby .mcq-grid,
  #playView.local-lobby .play-dock,
  #playView.local-lobby .timer-row,
  #playView.local-lobby .type-fallback,
  #playView.local-lobby #instructionsEl{ display:none !important; }
  #localMultiLink.home-alt-btn,
  #dailyChallengeBtn.home-alt-btn{
    display:flex;
    text-align:left;
  }
  @media (max-width: 480px){
    html.in-match #playView .flip-card,
    html.in-match #dailyView .flip-card{
      position:relative;
      inset:auto;
      width:100%;
      max-width:100%;
    }
    html.in-match #playView .flag,
    html.in-match #dailyView .flag{ max-width:none; }
    html.in-match .type-fallback{ flex-direction:row; }
    html.in-match .type-fallback input{ width:auto; }
  }
  @media (orientation: landscape) and (max-height: 560px){
    html:not(.in-match) body,
    html:not(.in-match) .stage{
      height:100dvh;
      max-height:100dvh;
      overflow:hidden;
    }
    html:not(.in-match) .stage{
      display:flex;
      flex-direction:column;
    }
    html:not(.in-match) .card:not([hidden]){
      flex:1 1 auto;
      min-height:0;
      overflow:auto;
    }
    .bottom-tabs{
      position:sticky;
      bottom:0;
      z-index:8;
      flex:none;
    }
    #progressView .world-map-container{
      max-height:calc(100dvh - 148px);
      overflow:hidden;
    }
    #progressView .world-map-container svg{
      min-height:0;
      max-height:calc(100dvh - 160px);
    }
    html.in-match #playView:not([hidden]):not(.has-recap):not(.play-handoff):not(.local-lobby){
      display:grid !important;
      grid-template-columns:minmax(0, 1fr) minmax(240px, 38vw);
      grid-template-rows:auto minmax(0, 1fr) auto;
      align-items:stretch;
      min-height:100dvh;
      height:100dvh;
      padding:max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }
    html.in-match #playView .play-header{
      grid-column:1;
      grid-row:1;
      position:relative;
      z-index:6;
    }
    html.in-match #playView .mcq-prompt{
      grid-column:2;
      grid-row:1;
      margin:0;
      font-size:17px;
      text-align:left;
      align-self:center;
      z-index:3;
    }
    html.in-match #playView .flag-wrap,
    html.in-match #playView .mcq-grid{
      grid-column:1;
      grid-row:2;
      align-self:stretch;
      min-height:0;
      overflow:hidden;
      z-index:1;
    }
    html.in-match #playView .mcq-grid{
      align-content:center;
      gap:6px;
      margin:0;
    }
    html.in-match #playView .mcq-flag-btn{
      padding:4px;
    }
    html.in-match #playView .mcq-flag-btn img{
      max-height:72px;
      object-fit:contain;
    }
    html.in-match #playView .flip-card,
    html.in-match #dailyView .flip-card{
      position:relative;
      inset:auto;
      width:auto;
      height:100%;
      max-width:100%;
      max-height:100%;
      aspect-ratio:3/2;
    }
    html.in-match #dailyView:not([hidden]):not(.has-daily-recap){
      display:grid !important;
      grid-template-columns:minmax(0, 1fr) minmax(220px, 38vw);
      grid-template-rows:auto minmax(0, 1fr);
      height:100dvh;
      min-height:100dvh;
    }
    html.in-match #dailyView .play-header{
      grid-column:1 / -1;
      grid-row:1;
    }
    html.in-match #dailyView #dailyQuestionArea{
      grid-column:1 / -1;
      grid-row:2;
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(220px, 38vw);
      grid-template-rows:auto minmax(0, 1fr) auto;
      min-height:0;
      flex:none;
    }
    html.in-match #dailyView .daily-question-badge{
      grid-column:2;
      grid-row:1;
    }
    html.in-match #dailyView .flag-wrap{
      grid-column:1;
      grid-row:1 / -1;
      min-height:0;
      flex:none;
      aspect-ratio:auto;
    }
    html.in-match #dailyView .timer-row{
      grid-column:2;
      grid-row:2;
      align-self:start;
      margin:8px 0 0;
    }
    html.in-match #dailyView .type-fallback{
      grid-column:2;
      grid-row:3;
    }
    html.in-match #playView .play-rail{
      grid-column:2;
      grid-row:2 / -1;
      align-self:stretch;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      gap:8px;
      margin:0;
      min-height:0;
      width:100%;
    }
    html.in-match #playView.play-handoff:not([hidden]){
      display:flex !important;
      flex-direction:column;
      min-height:0;
      height:100dvh;
      max-height:100dvh;
      overflow:hidden;
      padding:max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
    }
    html.in-match #playView.play-handoff .recap{
      min-height:0;
      height:auto;
      max-height:100%;
      padding:12px 12px 8px;
      justify-content:center;
      overflow:hidden;
    }
    html.in-match #playView.play-handoff .recap .controls{
      flex-direction:row;
      margin-top:10px;
      gap:8px;
    }
    html.in-match #playView.play-handoff .recap .controls .action,
    html.in-match #playView.play-handoff .recap .action{
      min-height:44px;
      width:auto;
      flex:1;
      padding:10px 12px;
      font-size:15px;
    }
    html.in-match #playView.play-handoff .sofa-void{
      padding:12px 14px;
    }
    html.in-match #playView.play-handoff .sofa-void-mark{
      font-size:28px;
      margin-bottom:6px;
    }
    html.in-match #playView .timer-row{
      position:relative;
      top:auto; left:auto; right:auto; bottom:auto;
      margin:0;
      z-index:3;
      width:100%;
      min-width:160px;
    }
    html.in-match #playView .timer-track{
      flex:1;
      min-width:80px;
      height:8px;
    }
    html.in-match #playView .timer-seconds{
      font-size:20px;
      min-width:2.5ch;
    }
    html.in-match #playView .play-dock{
      position:static;
      margin-top:auto;
      padding:0;
      background:none;
    }
    html.in-match #playView .play-rail > .controls{
      position:static;
      left:auto; right:auto; bottom:auto;
      width:auto;
      margin:0;
      min-height:44px;
    }
    html.in-match #playView .play-rail > .controls .action{
      min-height:44px;
    }
    html.in-match #dailyView .flag-wrap{
      min-height:0;
    }
    html.in-match #playView.local-lobby:not([hidden]),
    #playView.card.local-lobby:not([hidden]){
      display:flex !important;
      flex-direction:column;
      height:100dvh;
      max-height:100dvh;
      min-height:0;
      overflow:hidden;
      padding:max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }
    #playView.local-lobby #localLobbyTitle{
      margin:2px 0 4px;
      font-size:20px;
    }
    #playView.local-lobby .local-lobby-hint{
      margin:0 0 8px;
      font-size:14px;
    }
    #playView.local-lobby .local-lobby-last{
      margin:0 0 8px;
      padding:8px 10px;
    }
    #playView.local-lobby .player-names-editor{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:6px;
      margin:0 0 8px;
      min-height:0;
      overflow:auto;
    }
    #playView.local-lobby .play-rail{
      margin-top:auto;
      flex:none;
      position:sticky;
      bottom:0;
      background:var(--card-bg);
      padding-bottom:max(6px, env(safe-area-inset-bottom));
      z-index:4;
    }
    #playView.local-lobby .play-rail > .controls .action.primary{
      min-height:48px;
    }
    #leaderboardView.card:not([hidden]){
      position:relative;
      display:flex !important;
      flex-direction:column;
      height:auto !important;
      max-height:none !important;
      min-height:0 !important;
      overflow:hidden;
      padding-top:10px;
      padding-bottom:8px;
    }
    #leaderboardView .view-title{
      margin-bottom:4px;
      font-size:20px;
    }
    #leaderboardView #lbIntro{
      margin-bottom:8px !important;
      font-size:13px;
    }
    #leaderboardView .lb-filter{
      margin-bottom:6px;
    }
    #leaderboardView .lb-filter select{
      min-height:36px;
    }
    #leaderboardView .modal-section{
      margin-top:8px !important;
    }
    #leaderboardView .leaderboard-empty{
      min-height:0;
      padding:12px 16px;
      font-size:15px;
    }
    #leaderboardView .lb-empty-actions{
      margin-top:auto;
      padding-top:8px;
    }
    #playView.has-recap .recap{
      display:grid !important;
      grid-template-columns:minmax(0, 1fr) minmax(220px, 38vw);
      height:calc(100dvh - 56px);
    }
    #playView.has-recap.recap-empty .recap{
      display:flex !important;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      grid-template-columns:none;
    }
    #playView.has-recap.recap-empty .recap-sky{
      display:none;
    }
    #playView.has-recap.recap-empty .recap-hero{
      position:relative;
      height:auto;
      width:min(100%, 420px);
      padding:24px 16px;
    }
    #playView.has-recap .recap-sky{
      position:relative;
      inset:auto;
      height:100dvh;
    }
    #playView.has-recap .recap-sky-flag{
      position:absolute;
      inset:0;
      bottom:0;
      width:100%;
      height:100%;
      max-height:none;
      object-fit:contain;
      object-position:center;
    }
    #playView.has-recap .recap-sky::after{ display:none; }
    #playView.has-recap .recap-hero{
      position:relative;
      height:100dvh;
      bottom:auto;
      padding:16px 12px max(12px, env(safe-area-inset-bottom));
      justify-content:flex-start;
      overflow-y:auto;
    }
    #homeStage{ display:none !important; }
    #homeView.card:not([hidden]){
      display:flex;
      flex-direction:column;
      overflow:auto;
      height:auto;
      max-height:none;
      padding-bottom:8px;
    }
    #homeView.card:not([hidden]) .home-modes{
      flex:1 1 auto;
      min-height:0;
    }
    #profileView.card:not([hidden]){
      height:auto;
      max-height:none;
      overflow:auto;
    }
    .home-header{ margin-bottom:6px; }
    .home-avatar{ width:36px; height:36px; }
    .home-name{ font-size:18px; }
    .home-sub{ font-size:13px; }
    .level-row{ margin-bottom:8px; padding:8px 12px; }
    .home-lobby-body{
      display:grid;
      grid-template-columns:minmax(240px, 1.05fr) minmax(0, 1fr);
      gap:8px;
      align-items:start;
    }
    .home-cta{
      grid-column:1;
      grid-row:1;
      min-height:0;
      flex:none;
      max-height:calc(100dvh - 148px);
      padding:10px 12px;
      gap:4px;
    }
    .home-cta-country{ font-size:18px; }
    .home-cta-grid{ min-height:88px; margin:2px auto; width:min(100%, 200px); }
    .home-cta-grid img{ min-height:40px; }
    .home-cta-go{ font-size:14px; }
    .home-section:nth-of-type(1){
      grid-column:2;
      grid-row:1;
    }
    .home-section:nth-of-type(2){
      grid-column:1 / -1;
      grid-row:2;
    }
    .home-alt-rail{
      flex-wrap:nowrap;
      overflow-x:auto;
    }
    .home-alt-btn{ flex:1 1 0; }
  }