@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&family=DM+Sans:wght@400;500;700&display=swap');
  :root {
    --bg:#08185a;
    --bg-deep:#05113d;
    --panel:#102778;
    --panel-2:#163494;
    --brand-blue:#002169;
    --brand-pink:#ff2f92;
    --brand-pink-2:#ff5fb0;
    --brand-lime:#d8ff3e;
    --brand-yellow:#ffd84d;
    --brand-cyan:#53dcff;
    --brand-green:#5dff85;
    --text:#ffffff;
    --muted:#bfd0ff;
    --radius:18px;
    --chrome-offset:88px;
    --shadow:0 24px 60px rgba(2,12,50,.38);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{touch-action:manipulation;overscroll-behavior-y:auto;overscroll-behavior-x:none;-webkit-text-size-adjust:100%}
  body, .screen, #app-shell, #board, .board-wrap, .cell, .logo, .parade, .chip, .score-row, .mp-panel, .chooser-screen, .chooser-panel{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  input, textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;touch-action:manipulation}
  body{position:relative;background:
    radial-gradient(circle at 15% 20%, rgba(255,47,146,.26), transparent 22%),
    radial-gradient(circle at 85% 12%, rgba(216,255,62,.20), transparent 18%),
    radial-gradient(circle at 50% 85%, rgba(83,220,255,.16), transparent 24%),
    linear-gradient(180deg, #2f7fd3 0%, #0b2b88 36%, #071958 100%);
    color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;overflow-y:auto}
  #app-shell{position:relative;z-index:1;min-height:100vh;display:grid;align-content:start;padding-top:var(--chrome-offset);
    grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr) 420px;
    grid-template-areas:'header header' 'main sidebar' 'footer footer'}
  .hidden{display:none !important}
  .ui-chrome{position:fixed;top:12px;left:12px;right:12px;z-index:750;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
  .back-btn,.lang-btn{pointer-events:auto;border:none;border-radius:999px;padding:10px 14px;background:rgba(0,33,105,.78);color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:.84rem;box-shadow:0 10px 28px rgba(3,12,48,.24);backdrop-filter:blur(10px);cursor:pointer}
  .lang-switch{pointer-events:auto;display:flex;gap:8px}
  .lang-btn{min-width:52px;background:rgba(255,255,255,.14)}
  .lang-btn.active{background:linear-gradient(135deg,var(--brand-pink),var(--brand-pink-2))}

  .chooser-screen{position:fixed;inset:0;z-index:700;display:flex;flex-direction:column;align-items:center;padding:calc(var(--chrome-offset) + 20px) 32px 32px;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;
    background:linear-gradient(180deg, rgba(7,17,61,.18), rgba(7,17,61,.36))}
  .chooser-panel{width:min(1180px,100%);flex-shrink:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
  .dashboard-footer{grid-column:1 / -1;text-align:center;padding:6px 0 2px;color:var(--muted);font-size:.72rem;letter-spacing:.4px;opacity:.6}
  .auth-shell{width:min(1120px,100%);flex-shrink:0;display:grid;grid-template-columns:1.08fr .92fr;gap:24px}
  .auth-card{position:relative;overflow:hidden;border-radius:24px;background:rgba(0,33,105,.76);border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow);backdrop-filter:blur(14px);padding:28px}
  .auth-card::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg, rgba(255,255,255,.10), transparent 42%, rgba(255,47,146,.08));pointer-events:none}
  .auth-stack{position:relative;display:flex;flex-direction:column;gap:14px}
  .auth-card h2{font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:900}
  .auth-card p{color:var(--muted);line-height:1.6}
  .auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .auth-grid input,.auth-card input{width:100%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px 16px;color:var(--text);font-family:'Poppins',sans-serif;font-size:1rem;outline:none;min-width:0}
  .auth-grid input:focus,.auth-card input:focus{border-color:var(--brand-cyan);box-shadow:0 0 0 3px rgba(83,220,255,.16)}
  .auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.auth-tab{border:none;border-radius:14px;padding:12px 14px;font-family:'Poppins',sans-serif;font-weight:800;cursor:pointer;background:rgba(255,255,255,.10);color:#fff}.auth-tab.active{background:linear-gradient(135deg,var(--brand-pink),var(--brand-pink-2));box-shadow:0 14px 30px rgba(255,47,146,.24)}.auth-form{display:flex;flex-direction:column;gap:12px}.auth-form.hidden{display:none}.auth-actions{display:flex;gap:10px;flex-wrap:wrap}
  .auth-status{min-height:22px;color:var(--brand-cyan);font-weight:700;font-size:.88rem}
  .profile-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);margin-bottom:16px}
  .profile-mini strong{font-family:'Poppins',sans-serif;font-size:1rem}
  .profile-mini small{display:block;color:var(--muted);margin-top:2px}
  .profile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .profile-head-actions{display:flex;gap:8px;flex-wrap:wrap}
  .profile-overview{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;margin-top:18px}
  .profile-avatar-stage{display:flex;align-items:center;justify-content:center;padding:10px}
  .profile-avatar-stage #profile-avatar-summary{display:flex;align-items:center;justify-content:center}
  .profile-meta{display:flex;flex-direction:column;gap:8px}
  .profile-meta strong{font-family:'Poppins',sans-serif;font-size:1.3rem;line-height:1.1}
  .profile-meta small{color:var(--muted);font-size:.92rem;word-break:break-word}
  .profile-avatar-layout{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .profile-avatar-controls{flex:1 1 240px;display:flex;flex-direction:column;gap:10px}
  #profile-avatar-preview{display:flex;align-items:center;justify-content:center;min-width:144px;min-height:144px;padding:8px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);position:relative;overflow:hidden}
  #profile-avatar-preview.avatar-generating::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.12) 50%,transparent 75%);background-size:200% 100%;animation:avatarSkeleton 1.4s ease infinite;border-radius:inherit;pointer-events:none}
  @keyframes avatarSkeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
  .profile-avatar-hint{font-size:.84rem;color:var(--muted);line-height:1.45}
  .chooser-btn[disabled]{opacity:.6;cursor:wait}
  .settings-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.10)}
  .settings-toggle-row:last-child{border-bottom:none}
  .settings-toggle-label{font-size:.95rem;line-height:1.4}
  .settings-toggle-label small{display:block;color:var(--muted);font-size:.8rem;margin-top:3px}
  .toggle-switch{position:relative;width:44px;height:26px;flex-shrink:0}
  .toggle-switch input{opacity:0;width:0;height:0}
  .toggle-slider{position:absolute;inset:0;border-radius:26px;background:rgba(255,255,255,.18);cursor:pointer;transition:background .2s}
  .toggle-slider::before{content:'';position:absolute;width:20px;height:20px;left:3px;bottom:3px;border-radius:50%;background:#fff;transition:transform .2s}
  .toggle-switch input:checked + .toggle-slider{background:var(--brand-cyan)}
  .toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px)}
  html.a11y{filter:grayscale(1) contrast(1.45)}
  html.a11y .chooser-btn.primary,html.a11y .chooser-btn.secondary{background:#222;color:#fff;border:2px solid #fff}
  html.a11y .chooser-btn.ghost{background:transparent;color:#fff;border:2px solid #fff}
  html.a11y .chooser-kicker,html.a11y .brand-pill,html.a11y .chooser-parade span{display:none!important}
  html.a11y body{font-size:1.15em}
  html.a11y .chooser-card p,html.a11y .chooser-copy,html.a11y .settings-toggle-label,html.a11y .settings-toggle-label small,html.a11y .profile-mini small,html.a11y .modal-stack p{font-size:1.12em;line-height:1.6}
  html.a11y .chooser-btn,html.a11y .action-btn,html.a11y .btn-close-win,html.a11y .chooser-menu-btn,html.a11y .auth-tab{font-size:1.2rem!important;padding:18px 20px!important}
  html.a11y .chooser-card h2,html.a11y .modal-stack h2,html.a11y .auth-card h2{font-size:1.4em}
  h1,h2,h3,button,.code-box .code,.chooser-hero h1,.live-board-rank,.live-board-score,.live-board-banner,.rank-badge{font-weight:700!important;letter-spacing:.025em}
  .auth-link-btn{background:none;border:none;color:rgba(83,220,255,.8);font-size:.82rem;cursor:pointer;padding:0;font-family:'DM Sans',sans-serif;text-decoration:underline;align-self:flex-start;margin-top:2px}
  .auth-link-btn:hover{color:rgba(83,220,255,1)}
  #hero-profile-block{display:none;align-items:center;gap:14px;margin-top:6px}
  #hero-profile-block.visible{display:flex}
  #hero-avatar-img-wrap{width:136px;height:136px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.22);box-shadow:0 6px 22px rgba(0,0,0,.32);flex-shrink:0}
  #hero-avatar-img-wrap img{width:100%;height:100%;object-fit:cover}
  #hero-avatar-empty{display:none;align-items:center;gap:12px;margin-top:6px}
  #hero-avatar-empty.visible{display:flex}
  #btn-hero-avatar-generate{width:64px;height:64px;border-radius:50%;flex-shrink:0;border:2px dashed rgba(255,255,255,.4);background:rgba(255,255,255,.10);color:#fff;font-size:1.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,background .15s}
  #btn-hero-avatar-generate:hover{background:rgba(255,255,255,.18);transform:scale(1.05)}
  #btn-hero-avatar-generate[disabled]{opacity:.6;cursor:wait}
  #hero-avatar-empty-copy{color:var(--muted);font-size:.85rem;max-width:220px}
  #hero-level-info{display:flex;flex-direction:column;gap:5px}
  #hero-level-badge{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.1rem;color:var(--brand-lime)}
  #hero-level-bar-outer{width:130px;height:8px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}
  #hero-level-bar-inner,#hub-level-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand-lime),var(--brand-cyan));transition:width .4s ease}
  #hero-level-pts-label{font-size:.78rem;color:var(--muted)}
  #hub-level-wrap{margin-top:10px}
  #hub-level-badge{font-family:'Poppins',sans-serif;font-weight:700;font-size:.95rem;color:var(--brand-lime)}
  #hub-level-pts{font-size:.75rem;color:var(--muted)}
  #hub-level-bar-outer{width:100%;height:8px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden;margin-top:5px}
  #awards-progress-wrap{margin:10px 0 14px}
  #awards-progress-label{font-size:.78rem;color:var(--muted)}
  #awards-progress-bar-outer{width:100%;height:8px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden;margin-top:5px}
  #awards-progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand-yellow),var(--brand-pink));transition:width .4s ease}
  .modal-change-pw{border-top:1px solid rgba(255,255,255,.12);padding-top:14px;margin-top:4px}
  .modal-change-pw summary{color:var(--muted);font-size:.88rem;cursor:pointer;user-select:none;list-style:none;padding:4px 0}
  .modal-change-pw summary::-webkit-details-marker{display:none}
  .modal-change-pw-inner{display:flex;flex-direction:column;gap:10px;margin-top:12px}
  .modal-change-pw-inner input{width:100%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px 16px;color:var(--text);font-family:'Poppins',sans-serif;font-size:1rem;outline:none;min-width:0}
  .modal-change-pw-inner input:focus{border-color:var(--brand-cyan);box-shadow:0 0 0 3px rgba(83,220,255,.16)}
  .modal-overlay{position:fixed;inset:0;z-index:820;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:20px;background:rgba(4,10,42,.76);backdrop-filter:blur(10px)}
  .modal-card{width:min(100%,520px);flex-shrink:0;position:relative;overflow:hidden;border-radius:24px;background:rgba(0,33,105,.9);border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow);padding:24px;margin:auto 0}
  .modal-card::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg, rgba(255,255,255,.10), transparent 42%, rgba(255,47,146,.08));pointer-events:none}
  .modal-stack{position:relative;display:flex;flex-direction:column;gap:14px}
  .modal-stack h2{font-family:'Poppins',sans-serif;font-size:1.3rem;font-weight:900}
  .modal-stack p{color:var(--muted);line-height:1.55}
  .modal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .modal-grid input,.modal-stack input{width:100%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px 16px;color:var(--text);font-family:'Poppins',sans-serif;font-size:1rem;outline:none;min-width:0}
  .modal-grid input:focus,.modal-stack input:focus{border-color:var(--brand-cyan);box-shadow:0 0 0 3px rgba(83,220,255,.16)}
  .modal-actions{display:flex;gap:10px;flex-wrap:wrap}
  .modal-actions .chooser-btn{width:auto;min-width:160px}
  .modal-status{min-height:22px;color:var(--brand-cyan);font-weight:700;font-size:.88rem}
  .chooser-hero,.chooser-actions{position:relative;overflow:hidden;border-radius:24px;background:rgba(0,33,105,.76);border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow);backdrop-filter:blur(14px)}
  .chooser-hero::before,.chooser-actions::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg, rgba(255,255,255,.10), transparent 42%, rgba(255,47,146,.08));pointer-events:none}
  .chooser-hero{grid-column:1 / -1;padding:28px 34px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:18px;align-items:center}
  .chooser-hero-copy{display:flex;flex-direction:column;gap:14px}
  .chooser-menu{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.chooser-menu-btn{border:none;border-radius:999px;padding:12px 16px;background:rgba(255,255,255,.10);color:#fff;font-family:'Poppins',sans-serif;font-weight:800;cursor:pointer;transition:transform .15s,background .15s}.chooser-menu-btn.active{background:linear-gradient(135deg,var(--brand-pink),var(--brand-pink-2));box-shadow:0 14px 30px rgba(255,47,146,.24)}.chooser-menu-content{grid-column:1 / -1;display:flex;flex-direction:column;gap:18px}.chooser-global-status{grid-column:1 / -1}.chooser-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}.chooser-section.hidden{display:none !important}.chooser-section-profile .profile-mini{grid-column:1 / -1}
  .chooser-panel-grid{display:none}
  .chooser-column{display:flex;flex-direction:column;gap:16px;min-width:0}
  .chooser-column .chooser-actions{height:100%}
  .chooser-kicker{display:none;width:max-content;padding:8px 14px;border-radius:999px;background:rgba(216,255,62,.16);border:1px solid rgba(216,255,62,.45);font-size:.8rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--brand-lime);font-weight:700}
  .chooser-hero h1{font-family:'Poppins',sans-serif;font-size:4rem;line-height:.92;font-weight:900;letter-spacing:0}
  .chooser-hero h1 span,header h1 span,.logo span{color:var(--brand-pink)}
  .chooser-copy{grid-column:1 / -1;max-width:680px;color:#edf3ff;font-size:1.02rem;line-height:1.55}
  .chooser-parade{display:flex;gap:12px;flex-wrap:wrap;font-size:.95rem}
  .chooser-parade span,.brand-pill{padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
  .chooser-parade span:nth-child(1){color:var(--brand-yellow)}
  .chooser-parade span:nth-child(2){color:var(--brand-cyan)}
  .chooser-parade span:nth-child(3){color:var(--brand-pink-2)}
  .chooser-parade span:nth-child(4){color:var(--brand-lime)}
  .chooser-actions{padding:24px;display:flex;flex-direction:column;gap:16px;min-height:100%}
  .chooser-card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:20px}
  .chooser-card h2{font-family:'Poppins',sans-serif;font-size:1.12rem;font-weight:800;margin-bottom:8px}
  .chooser-card p{color:var(--muted);font-size:.93rem;line-height:1.55;margin-bottom:14px}
  .chooser-card input{width:100%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px 16px;color:var(--text);font-family:'Poppins',sans-serif;font-size:1rem;font-weight:700;letter-spacing:4px;text-transform:uppercase;outline:none;min-width:0}
  .chooser-card input:focus{border-color:var(--brand-cyan);box-shadow:0 0 0 3px rgba(83,220,255,.16)}
  .chooser-inline{display:grid;grid-template-columns:minmax(0,1fr) 148px;gap:10px}
  #quickplay-live-stats{margin:-6px 0 14px}
  #quickplay-live-stats .qp-stat-num{font-weight:800;color:var(--brand-lime)}
  .season-event-banner{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:20px}
  .season-event-banner.hidden{display:none}
  .season-event-stage{display:flex;gap:18px;align-items:center}
  .season-event-stage[hidden]{display:none}
  .season-event-stage img{width:100%;height:auto;max-width:30vh;border-radius:16px;flex-shrink:0;background:rgba(255,255,255,.08)}
  .season-event-copy{min-width:0}
  .season-event-copy h2{font-family:'Poppins',sans-serif;font-size:1.12rem;font-weight:800;margin-bottom:6px}
  .season-event-copy p{color:var(--muted);font-size:.9rem;line-height:1.5;margin-bottom:6px}
  .season-event-countdown{font-weight:800;color:var(--brand-lime);font-size:1rem}
  .season-event-winner{font-weight:800;color:var(--brand-pink);font-size:.95rem}
  .season-event-highscore-btn{margin-top:10px;border:none;border-radius:12px;padding:10px 16px;background:rgba(255,255,255,.14);color:#fff;font-family:'Poppins',sans-serif;font-weight:800;font-size:.85rem;cursor:pointer}
  @media (max-width:640px){ .season-event-stage{flex-direction:column;text-align:center} }
  .chooser-btn,.action-btn,.btn-close-win{width:100%;padding:15px 18px;border:none;border-radius:14px;cursor:pointer;font-family:'Poppins',sans-serif;font-weight:800;font-size:1rem;transition:transform .15s, box-shadow .15s, background .15s}
  .winner-overlay-actions{width:min(100%,360px);display:flex;flex-direction:column;gap:12px}
  .chooser-btn:active,.action-btn:active,.btn-close-win:active{transform:scale(.98)}
  .chooser-btn.primary,.btn-start,.btn-close-win{background:linear-gradient(135deg, var(--brand-pink), var(--brand-pink-2));color:#fff;box-shadow:0 14px 30px rgba(255,47,146,.34)}
  .chooser-btn.secondary{background:linear-gradient(135deg, rgba(216,255,62,.22), rgba(255,216,77,.22));color:var(--brand-lime);border:1px solid rgba(216,255,62,.38)}
  .chooser-btn.ghost{background:rgba(255,255,255,.10);color:var(--text);border:1px solid rgba(255,255,255,.16)}
  .chooser-btn:hover,.action-btn:hover,.btn-close-win:hover{transform:translateY(-1px)}

  header{grid-area:header;position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:18px 32px;background:rgba(0,33,105,.54);border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px)}
  header h1,.logo{font-family:'Poppins',sans-serif;font-weight:900;letter-spacing:0}
  header h1{font-size:1.85rem}
  .code-box{background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:12px 22px;box-shadow:var(--shadow)}
  .code-box .lbl{color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:1.6px}
  .code-box .code{font-family:'Poppins',sans-serif;font-weight:900;font-size:2rem;color:var(--brand-lime);letter-spacing:6px;text-shadow:0 0 18px rgba(216,255,62,.28)}
  .pill{padding:8px 14px;border-radius:999px;font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:8px;justify-self:end}
  .pill.waiting{background:rgba(255,216,77,.16);color:var(--brand-yellow);border:1px solid rgba(255,216,77,.36)}
  .pill.running{background:rgba(93,255,133,.16);color:var(--brand-green);border:1px solid rgba(93,255,133,.32)}
  .pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 1.4s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}

  main{grid-area:main;position:relative;z-index:1;padding:28px 32px 24px;display:flex;flex-direction:column;gap:16px;overflow:visible}
  main h2,.player-list h3,.win-label{font-family:'Poppins',sans-serif;font-weight:800;font-size:.9rem;color:var(--muted);text-transform:uppercase;letter-spacing:2px}
  .broadcast-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start;min-height:100%}
  .live-boards{--live-board-card-width:240px;--live-board-grid-size:205px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--live-board-card-width),var(--live-board-card-width)));gap:18px;align-content:start;justify-content:start}
  .live-board-card{position:relative;overflow:visible;width:var(--live-board-card-width);max-width:var(--live-board-card-width);background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.16);border-radius:28px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 48px rgba(2,12,50,.24);transition:transform 340ms cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-color .2s ease, filter .2s ease}
  .live-board-card.leader{border-color:rgba(216,255,62,.52);box-shadow:0 0 0 1px rgba(216,255,62,.24),0 22px 42px rgba(2,12,50,.3)}
  .live-board-card.board-updated{z-index:3}
  .live-board-card.glow{animation:liveBoardGlow .68s ease}
  .live-board-card.shake{animation:liveBoardShake .54s ease}
  .live-board-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .live-board-name{display:flex;align-items:center;min-width:0;font-weight:800;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .live-board-rank{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;margin-right:8px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);font-family:'Poppins',sans-serif;font-size:.92rem;font-weight:900;color:var(--brand-yellow)}
  .live-board-score{font-family:'Poppins',sans-serif;font-weight:900;color:var(--brand-lime);font-size:1rem;letter-spacing:.02em;text-shadow:0 0 14px rgba(216,255,62,.28)}
  .live-board-meta{display:flex;gap:8px;flex-wrap:wrap}
  .live-board-pill{flex:1 1 0;min-width:0;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:2px}
  .live-board-pill strong{font-family:'Poppins',sans-serif;font-size:.88rem;line-height:1.05;color:#fff}
  .live-board-pill span{font-size:.65rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
  .live-board-boardwrap{position:relative;display:flex;justify-content:center;align-items:center}
  .live-board-fx{position:absolute;inset:-24px -14px -18px -14px;pointer-events:none;overflow:visible;z-index:3}
  .live-board-grid{position:relative;display:block;width:var(--live-board-grid-size);height:var(--live-board-grid-size);flex:0 0 var(--live-board-grid-size);--mini-gap:2px;--mini-cell:calc((var(--live-board-grid-size) - (7 * var(--mini-gap)) - 10px) / 8);border-radius:20px;padding:5px;background:rgba(0,33,105,.46);border:1px solid rgba(255,255,255,.1);transition:filter .24s ease, transform .24s ease, box-shadow .24s ease;overflow:hidden}
  .live-board-grid.combo-flash{filter:brightness(1.18) saturate(1.25);box-shadow:0 0 0 1px rgba(255,216,77,.24),0 0 34px rgba(255,216,77,.24)}
  .live-board-grid.shuffle-flash{filter:brightness(1.12) saturate(1.2);box-shadow:0 0 0 1px rgba(83,220,255,.24),0 0 34px rgba(83,220,255,.24)}
  .live-board-cell{position:absolute;display:flex;align-items:center;justify-content:center;width:var(--mini-cell);height:var(--mini-cell);left:5px;top:5px;border-radius:8px;background:rgba(255,255,255,.10);font-size:1.08rem;line-height:1;transform-origin:center center;will-change:transform,opacity;transition:transform .24s cubic-bezier(.2,1.4,.4,1),opacity .24s ease,box-shadow .12s ease}
  @keyframes liveBoardPowerupGlow{0%,100%{box-shadow:0 0 6px 1px rgba(255,216,77,.45)}50%{box-shadow:0 0 14px 4px rgba(255,216,77,.85)}}
  .live-board-cell.live-board-powerup{background:rgba(255,216,77,.22);animation:liveBoardPowerupGlow 1.4s ease-in-out infinite}
  .live-board-cell.changed{animation:liveBoardCellPulse .52s ease}.live-board-cell.motion-drop{animation:liveBoardCellMove .44s cubic-bezier(.2,1.25,.34,1), liveBoardCellPulse .52s ease}.live-board-cell.motion-swap{animation:liveBoardCellMove .34s cubic-bezier(.22,1,.36,1), liveBoardCellPulse .5s ease}.live-board-cell.motion-spawn{animation:liveBoardCellSpawn .4s cubic-bezier(.2,1.25,.34,1), liveBoardCellPulse .52s ease}
  .live-board-spark{position:absolute;width:14px;height:14px;border-radius:999px;animation:liveBoardSpark .72s ease-out forwards;filter:drop-shadow(0 0 16px currentColor)}
  .live-board-burst{position:absolute;animation:liveBoardBurst 1.1s ease-out forwards;filter:drop-shadow(0 0 16px currentColor)}
  .live-board-burst.rect{border-radius:999px}
  .live-board-burst.circle{border-radius:50%}
  .live-board-score-pop{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%) scale(.92);font-family:'Poppins',sans-serif;font-weight:800;font-size:1.7rem;color:var(--brand-yellow);text-shadow:0 4px 16px rgba(0,0,0,.6);opacity:0;white-space:nowrap;letter-spacing:.01em;animation:liveBoardScorePop 820ms ease-out forwards;z-index:4}
  .live-board-banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.8);font-family:'Poppins',sans-serif;font-weight:900;font-size:1.28rem;color:var(--brand-pink-2);text-shadow:0 6px 24px rgba(255,47,146,.45);opacity:0;white-space:nowrap;letter-spacing:.02em;animation:liveBoardBannerPop 860ms cubic-bezier(.34,1.56,.64,1) forwards;z-index:4}
  @keyframes liveBoardGlow{0%{box-shadow:0 0 0 rgba(83,220,255,0),0 12px 24px rgba(2,12,50,.18)}30%{box-shadow:0 0 0 2px rgba(83,220,255,.72),0 0 32px rgba(83,220,255,.38),0 12px 24px rgba(2,12,50,.22)}100%{box-shadow:0 12px 24px rgba(2,12,50,.18)}}
  @keyframes liveBoardShake{0%,100%{transform:translateX(0)}18%{transform:translateX(-5px)}36%{transform:translateX(5px)}54%{transform:translateX(-3px)}72%{transform:translateX(3px)}}
  @keyframes liveBoardCellDrop{0%{transform:translateY(-8px) scale(.9);opacity:.4}100%{transform:translateY(0) scale(1);opacity:1}}@keyframes liveBoardCellMove{0%{transform:translate(calc(var(--dx) * (var(--mini-cell) + var(--mini-gap))),calc(var(--dy) * (var(--mini-cell) + var(--mini-gap)))) scale(.96);opacity:.84}100%{transform:translate(0,0) scale(1);opacity:1}}@keyframes liveBoardCellSpawn{0%{transform:translate(0,calc(var(--spawn-y) * (var(--mini-cell) + var(--mini-gap)))) scale(.92);opacity:.35}100%{transform:translate(0,0) scale(1);opacity:1}}
  @keyframes liveBoardCellPulse{0%,100%{box-shadow:0 0 0 rgba(255,216,77,0)}50%{box-shadow:0 0 0 1px rgba(255,216,77,.35),0 0 14px rgba(255,216,77,.22)}}
  @keyframes liveBoardSpark{0%{transform:translate(0,0) scale(.5);opacity:0}8%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(1.1);opacity:0}}
  @keyframes liveBoardBurst{0%{transform:translate(0,0) rotate(0deg) scale(.5);opacity:0}8%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(1);opacity:0}}
  @keyframes liveBoardScorePop{0%{transform:translate(-50%,0) scale(1);opacity:0}10%{opacity:1}100%{transform:translate(-50%,-50px) scale(1.3);opacity:0}}
  @keyframes liveBoardBannerPop{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(1.15);opacity:0}}
  .scoreboard-column{display:flex;flex-direction:column;gap:12px;min-width:0}
  #scoreboard{flex:1;display:flex;flex-direction:column;gap:12px;overflow:visible;position:relative}
  .score-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:16px 20px;position:relative;overflow:hidden;box-shadow:0 16px 32px rgba(2,12,50,.18);transition:transform .15s, box-shadow .2s}
  .score-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:6px 0 0 6px;background:var(--brand-pink);opacity:.65}
  .score-row.rank-1::before{background:var(--brand-lime)}
  .score-row.rank-2::before{background:var(--brand-cyan)}
  .score-row.rank-3::before{background:var(--brand-yellow)}
  .rank-badge{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:1rem;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.16)}
  .pname{font-weight:700;font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pemoji{font-size:1.1rem;opacity:.9;margin-left:6px}
  .score-val{font-family:'Poppins',sans-serif;font-weight:900;font-size:1.35rem;color:var(--brand-lime);min-width:90px;text-align:right}
  .score-bar{position:absolute;right:0;top:0;bottom:0;background:linear-gradient(90deg, rgba(255,47,146,0), rgba(255,47,146,.12));transition:width .8s ease;border-radius:0 var(--radius) var(--radius) 0}
  .empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:12px;font-size:.96rem;text-align:center;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));border:1px dashed rgba(255,255,255,.18);border-radius:18px}
  .empty-state .icon{width:72px;height:72px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);font-size:2rem}

  #winner-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(4,10,42,.84);backdrop-filter:blur(10px);flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:32px}
  #winner-overlay.show{display:flex}
  .win-trophy{font-size:5rem;animation:trophyBounce 1s ease infinite alternate}
  @keyframes trophyBounce{from{transform:translateY(0) scale(1)}to{transform:translateY(-14px) scale(1.05)}}
  .win-name{font-family:'Poppins',sans-serif;font-weight:900;font-size:3.1rem;color:var(--brand-pink-2)}
  .win-score{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.8rem;color:var(--brand-lime)}
  .win-emoji{font-size:2.5rem}
  .win-ranking{width:min(100%,520px);max-height:min(40svh,320px);padding:16px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);overflow:hidden}
  .win-ranking-title{font-family:'Poppins',sans-serif;font-size:.8rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
  .win-ranking-list{display:flex;flex-direction:column;gap:8px;max-height:calc(min(40svh,320px) - 54px);overflow-y:auto;padding-right:4px}
  .win-rank-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10)}
  .win-rank-row .rank{font-family:'Poppins',sans-serif;font-weight:900;color:var(--brand-yellow);text-align:center}
  .win-rank-row .name{min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .win-rank-row .score{font-family:'Poppins',sans-serif;font-weight:900;color:var(--brand-lime)}

  aside{grid-area:sidebar;position:relative;z-index:1;padding:28px 24px;border-left:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:20px;overflow-y:auto;background:rgba(0,33,105,.22);backdrop-filter:blur(8px)}
  .qr-block,.player-list{background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.16);border-radius:18px;box-shadow:var(--shadow)}
  .qr-block{padding:18px;display:flex;flex-direction:column;align-items:center;gap:12px}
  #qr-code{width:180px;height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;border-radius:14px;padding:10px}
  #qr-code canvas,#qr-code img{display:block;max-width:100%;height:auto}
  .qr-hint{color:#fff;font-size:.8rem;text-align:center;font-family:'DM Sans',sans-serif;font-weight:700}
  .player-list{padding:18px}
  #player-chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 14px;font-size:.85rem;display:flex;align-items:center;gap:6px;animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}
  @keyframes popIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
  .btn-start:hover{box-shadow:0 18px 34px rgba(255,47,146,.34)}
  .btn-start:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
  .btn-reset{background:rgba(255,255,255,.10);color:var(--text);border:1px solid rgba(255,255,255,.16)}
  .btn-reset:hover{background:rgba(255,255,255,.16)}
  .duration-panel{padding:18px}
  .duration-control{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center;margin-top:12px}
  .duration-step{border:none;border-radius:12px;background:rgba(255,255,255,.10);color:#fff;font-family:'Poppins',sans-serif;font-weight:900;font-size:1.2rem;height:44px;cursor:pointer}
  .duration-step:active{transform:scale(.98)}
  #round-duration{width:100%;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.12);color:#fff;text-align:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:1rem}
  .duration-hint{margin-top:10px;color:var(--brand-cyan);font-size:.82rem;font-weight:700;text-align:center}
  .invite-panel{padding:18px;display:flex;flex-direction:column;gap:12px}
  .invite-search{width:100%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 14px;color:var(--text);font-family:'Poppins',sans-serif;font-size:.95rem;outline:none}
  .invite-search:focus{border-color:var(--brand-cyan);box-shadow:0 0 0 3px rgba(83,220,255,.16)}
  .invite-select-list{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto}
  .invite-select-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.08)}
  .invite-select-row input{width:18px;height:18px;accent-color:var(--brand-pink);padding:0}
  .invite-select-row strong{font-size:.92rem}.invite-select-row small{display:block;color:var(--muted);margin-top:2px}
  .invite-panel-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.invite-panel-actions .chooser-btn{flex:1 1 200px}.invite-panel-status{font-size:.8rem;color:var(--brand-cyan);min-height:1.2em}
  #simple-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--brand-pink);color:#fff;padding:12px 24px;border-radius:999px;font-weight:700;font-size:.9rem;transition:transform .3s;z-index:900;box-shadow:0 14px 30px rgba(255,47,146,.3);max-width:calc(100vw - 32px);text-align:center}
  #simple-toast.show{transform:translateX(-50%) translateY(0)}
  .invite-toast-stack{position:fixed;right:18px;bottom:18px;z-index:900;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
  .invite-toast{width:min(360px,calc(100vw - 24px));padding:14px 14px 14px 16px;border-radius:18px;background:rgba(0,33,105,.94);border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 50px rgba(3,12,48,.34);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;backdrop-filter:blur(10px)}
  .invite-toast-copy{display:flex;flex-direction:column;gap:4px}.invite-toast-copy strong{font-family:'Poppins',sans-serif;font-size:.96rem}.invite-toast-copy small{color:var(--muted);line-height:1.45}
  .invite-toast-actions{display:flex;align-items:flex-start;gap:8px}.invite-toast-btn,.invite-toast-close{border:none;cursor:pointer;font-family:'Poppins',sans-serif;font-weight:800}.invite-toast-btn{border-radius:12px;padding:10px 12px;background:linear-gradient(135deg,var(--brand-pink),var(--brand-pink-2));color:#fff}.invite-toast-close{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.10);color:#fff;font-size:1rem}
  .award-toast-stack{position:fixed;left:18px;bottom:18px;z-index:900;display:flex;flex-direction:column;gap:10px;align-items:flex-start;pointer-events:none}
  .award-toast{width:min(320px,calc(100vw - 24px));padding:12px 16px;border-radius:18px;background:linear-gradient(135deg, rgba(255,216,77,.97), rgba(255,159,28,.95));border:1px solid rgba(255,255,255,.35);box-shadow:0 24px 50px rgba(3,12,48,.34);display:flex;align-items:center;gap:12px;color:#2b1a00;animation:awardToastIn .55s cubic-bezier(.34,1.56,.64,1),awardToastGlow 1.6s ease-in-out .55s infinite}
  .award-toast.leaving{animation:awardToastOut .3s ease forwards}
  .award-toast-icon{font-size:1.8rem;line-height:1;animation:awardToastIconPop .6s cubic-bezier(.34,1.56,.64,1)}
  .award-toast-copy{display:flex;flex-direction:column;gap:2px}
  .award-toast-copy strong{font-family:'Poppins',sans-serif;font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;opacity:.75}
  .award-toast-copy span{font-family:'Poppins',sans-serif;font-weight:800;font-size:.92rem}
  @keyframes awardToastIn{0%{opacity:0;transform:translateX(-30px) scale(.6) rotate(-8deg)}60%{opacity:1;transform:translateX(4px) scale(1.08) rotate(2deg)}100%{opacity:1;transform:translateX(0) scale(1) rotate(0)}}
  @keyframes awardToastIconPop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
  @keyframes awardToastGlow{0%,100%{box-shadow:0 24px 50px rgba(3,12,48,.34),0 0 0 rgba(255,216,77,0)}50%{box-shadow:0 24px 50px rgba(3,12,48,.34),0 0 22px rgba(255,216,77,.55)}}
  @keyframes awardToastOut{to{opacity:0;transform:translateX(-24px) scale(.85)}}
  .btn-invite{background:linear-gradient(135deg,var(--brand-pink),var(--brand-pink-2));color:#fff;margin-top:0}
  dialog#invite-modal,dialog#quickplay-invite-modal{padding:0;border:none;border-radius:24px;background:rgba(8,16,60,.97);color:#fff;max-width:min(480px,calc(100vw - 24px));width:100%;box-shadow:0 30px 80px rgba(0,0,0,.6)}
  dialog#invite-modal::backdrop,dialog#quickplay-invite-modal::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
  /* Plain overlay (not a native <dialog>) for the iOS install instructions -
     showModal()/::backdrop was reported to freeze the page on iOS Safari, so
     this one avoids the native dialog API entirely instead of debugging it. */
  #ios-install-modal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.7)}
  #ios-install-modal.hidden{display:none}
  #ios-install-modal .modal-box{padding:0;border:none;border-radius:24px;background:rgba(8,16,60,.97);color:#fff;max-width:min(480px,calc(100vw - 24px));width:100%;box-shadow:0 30px 80px rgba(0,0,0,.6)}
  #announcement-modal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.7)}
  #announcement-modal.hidden{display:none}
  #announcement-modal .modal-box{padding:0;border:none;border-radius:24px;background:rgba(8,16,60,.97);color:#fff;max-width:min(480px,calc(100vw - 24px));width:100%;box-shadow:0 30px 80px rgba(0,0,0,.6)}
  .invite-modal-inner{padding:28px;display:flex;flex-direction:column;gap:14px}
  .invite-modal-inner h3{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.15rem;margin:0}
  .invite-modal-actions{display:flex;gap:10px;flex-wrap:wrap}.invite-modal-actions .chooser-btn{flex:1 1 140px}
  .hs-rank{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.1rem;color:var(--brand-yellow);min-width:32px}
  .hs-pts{font-family:'Poppins',sans-serif;font-weight:800;font-size:1rem;color:var(--brand-cyan);white-space:nowrap}
  .hs-wins{font-size:.78rem;color:var(--muted);margin-top:2px}
  /* Punkte-Uebersicht: visuelle Line-Symbole analog zum Admin-Backend */
  /* id schlaegt die .hub-list-Regel (max-height:80vh;overflow-y:auto) -> nie
     scrollbar, waechst voll mit dem Inhalt mit. */
  #scoring-info-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:none;overflow:visible}
  .scoring-field{display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px;align-items:center;text-align:center;min-width:0}
  .scoring-field .scoring-label{font-size:.76rem;color:var(--muted);line-height:1.35}
  /* Wert umbrechen statt aus dem Container laufen (z.B. "+X auf den Multiplikator"). */
  .scoring-field .scoring-value{font-family:'Poppins',sans-serif;font-weight:800;font-size:1rem;color:var(--brand-cyan);line-height:1.3;max-width:100%;overflow-wrap:break-word;word-break:break-word}
  .scoring-visual{display:flex;align-items:center;justify-content:center;gap:3px;min-height:34px;flex-wrap:wrap}
  .mcell{width:18px;height:18px;border-radius:5px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
  .mcell.on{background:linear-gradient(135deg,var(--brand-pink),var(--brand-pink-2));border-color:transparent}
  .corner-visual{display:grid;grid-template-columns:repeat(3,18px);grid-template-rows:repeat(3,18px);gap:3px}
  .bigt-visual{display:grid;grid-template-columns:repeat(5,15px);grid-template-rows:repeat(3,15px);gap:3px}
  .overflow-visual{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
  .overflow-visual .mcell.extra{background:linear-gradient(135deg,var(--brand-yellow),var(--brand-cyan));border-color:transparent}
  .mini-line{display:flex;gap:3px}
  .multi-line-visual .plus{font-weight:800;color:var(--muted);font-size:1.1rem}
  .combo-visual .combo-badge{background:rgba(216,255,62,.16);color:var(--brand-lime);font-weight:800;font-family:'Poppins',sans-serif;border-radius:10px;padding:4px 9px;font-size:.82rem}
  .combo-visual .arrow{color:var(--muted)}
  .scoring-visual .powerup-visual-icon{font-size:1.6rem;line-height:1}
  .scoring-visual .powerup-visual-icon img{width:28px;height:28px;object-fit:contain}
  .awards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
  .award-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);text-align:center}
  .award-card .award-card-icon{font-size:1.6rem;line-height:1}
  .award-card .award-card-title{font-size:.68rem;font-weight:700;line-height:1.25}
  .award-card .award-card-date{font-size:.6rem;color:var(--muted)}
  .award-card.unlocked{background:linear-gradient(135deg, rgba(255,216,77,.22), rgba(255,159,28,.14));border-color:rgba(255,216,77,.5);box-shadow:0 0 0 1px rgba(255,216,77,.15), 0 8px 20px rgba(255,159,28,.15)}
  .award-card.locked{opacity:.4;filter:grayscale(.6)}
  @keyframes ltVignettePulse{0%,100%{opacity:.5}50%{opacity:1}}
  @keyframes ltNumPop{0%{transform:scale(1.4);opacity:0}60%{transform:scale(.92);opacity:1}100%{transform:scale(1);opacity:1}}
  #last-ten-overlay{display:none;position:fixed;inset:0;z-index:500;pointer-events:none;align-items:center;justify-content:center}
  body.lobby-last-ten #last-ten-overlay{display:flex}
  #last-ten-vignette-lobby{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(200,20,20,.55) 100%);animation:ltVignettePulse 1s ease-in-out infinite}
  #last-ten-num{position:relative;font-family:'Poppins',sans-serif;font-weight:900;font-size:clamp(14rem,28vw,22rem);line-height:1;color:#fff;text-shadow:0 0 60px rgba(255,60,60,1),0 0 120px rgba(255,0,0,.7),0 0 200px rgba(255,0,0,.4);animation:ltNumPop .35s cubic-bezier(.22,1,.36,1) both}

  footer{grid-area:footer;position:relative;z-index:1;padding:12px 32px;font-size:.74rem;color:var(--muted);border-top:1px solid rgba(255,255,255,.10);display:grid;grid-template-columns:1fr auto auto;gap:12px;background:rgba(0,33,105,.48);backdrop-filter:blur(10px)}
  #game-timer{font-family:'Poppins',sans-serif;font-weight:800;color:var(--brand-yellow)}
  #confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:999}
  @media (max-width: 960px){
    .chooser-screen{padding:calc(var(--chrome-offset) + 8px) 18px 18px}
    .chooser-panel,.auth-shell{grid-template-columns:1fr;align-items:start}
    .chooser-hero h1{font-size:3rem}
    #app-shell{grid-template-columns:1fr;grid-template-areas:'header' 'main' 'sidebar' 'footer'}
    .broadcast-layout{grid-template-columns:1fr}
    header{grid-template-columns:1fr;justify-items:start}
    .pill{justify-self:start}
    aside{border-left:none;border-top:1px solid rgba(255,255,255,.12)}
    footer{grid-template-columns:1fr}
  }
  @media (max-width: 720px){
    .chooser-screen{padding:calc(var(--chrome-offset) + 8px) 18px 18px}
    .chooser-hero,.chooser-actions,.chooser-card,.score-row,.qr-block,.player-list,.code-box{border-radius:16px}
    .chooser-section{grid-template-columns:1fr}
    .chooser-menu-btn{flex:1 1 136px}
    .chooser-inline{grid-template-columns:1fr}
    .profile-head{flex-direction:column}
    .profile-head-actions{width:100%}
    .profile-head-actions .chooser-btn,.modal-actions .chooser-btn{width:100%}
    .profile-overview{grid-template-columns:1fr}
    .profile-avatar-stage{justify-content:flex-start}
    .profile-avatar-layout{flex-direction:column;align-items:stretch}
    #profile-avatar-preview{width:100%}
    .modal-grid{grid-template-columns:1fr}
    main,aside,header,footer{padding-left:18px;padding-right:18px}
    .code-box .code{font-size:1.65rem;letter-spacing:4px}
  }
  #loading-overlay{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:linear-gradient(180deg, #2f7fd3 0%, #0b2b88 36%, #071958 100%);transition:opacity .25s ease}
  #loading-overlay.hidden{opacity:0;pointer-events:none}
  .loading-spinner{width:48px;height:48px;border-radius:50%;border:4px solid rgba(255,255,255,.18);border-top-color:var(--brand-lime);animation:loadingSpin .8s linear infinite}
  @keyframes loadingSpin{to{transform:rotate(360deg)}}
  .loading-text{color:var(--muted);font-family:'Poppins',sans-serif;font-weight:700;font-size:.9rem}