/* Fredoka and Nunito (SIL Open Font License), served from this site rather
     than Google Fonts: one less origin to connect to before the first paint.
     Both are variable fonts, one file per alphabet covering every weight. */
  @font-face{ font-family:'Fredoka'; font-style:normal; font-weight:500 700; font-display:swap; src:url(/fonts/fredoka-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face{ font-family:'Fredoka'; font-style:normal; font-weight:500 700; font-display:swap; src:url(/fonts/fredoka-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face{ font-family:'Nunito'; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/nunito-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face{ font-family:'Nunito'; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/nunito-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

  :root{
    --green:#38BDF8; --green-dark:#0EA5E9;
    --blue:#1CB0F6; --blue-dark:#1899D6;
    --red:#FF4B4B; --red-dark:#E64444;
    --gold:#FFC800; --gold-dark:#E6B400;
    --purple:#CE82FF; --purple-dark:#B868E0;
    --ink:#3C3C3C; --ink-soft:#777777;
    --bg:#FFFFFF; --bg-soft:#F7F7F7;
    --line:#E5E5E5;
    --face-back-bg:#E3F5FD; --face-back-icon-bg:#CDEBFA;
    --deck-active-bg:#DFF3FD; --cat-active-bg:#E4F3FC; --streak-bg:#FFF3CE;
    --mastered-green:#16A34A; --mastered-green-bg:#DCFCE7; --mastered-green-dark:#15803D;
    --red-bg:#FFE7E7; --red-ink:#C62F2F;
    --gold-bg:#FFF3CE; --gold-ink:#8A6A00;
    --orange:#FF9600; --orange-bg:#FFECD4; --orange-ink:#B25E00;
    color-scheme: light;
  }
  :root[data-theme="dark"]{
    --ink:#ECECEC; --ink-soft:#9A9A9A;
    --bg:#22252B; --bg-soft:#15171B;
    --line:#34383F;
    --face-back-bg:#0F2733; --face-back-icon-bg:#123344;
    --deck-active-bg:#0F2733; --cat-active-bg:#122531; --streak-bg:#2E2710;
    --mastered-green:#4ADE80; --mastered-green-bg:#0F2E1D; --mastered-green-dark:#22C55E;
    --red-bg:#3A1E1E; --red-ink:#FF8A8A;
    --gold-bg:#2E2710; --gold-ink:#F0C93F;
    --orange:#FF9600; --orange-bg:#3A2712; --orange-ink:#FFAE4D;
    color-scheme: dark;
  }
  body{ transition: background-color 0.25s, color 0.25s; }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none;}
  *{ scrollbar-width:thin; scrollbar-color: var(--line) transparent; }
  *::-webkit-scrollbar{ width:8px; height:8px; }
  *::-webkit-scrollbar-track{ background:transparent; }
  *::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
  *::-webkit-scrollbar-thumb:hover{ background:var(--ink-soft); }
  html,body{margin:0; padding:0;}

  /* Generic loading placeholder, reused wherever a page shows content that
     only exists after a fetch resolves (deck list, stage card, tables...).
     Kept theme-aware via --line so it works in light and dark automatically. */
  @keyframes skeleton-pulse{ 0%, 100%{ opacity:1; } 50%{ opacity:0.45; } }
  .skeleton{ background: var(--line); border-radius:10px; animation: skeleton-pulse 1.3s ease-in-out infinite; }
  .skeleton-deck-btn{ width:78px; height:64px; border-radius:14px; flex:0 0 auto; }
  .skeleton-card{ position:absolute; inset:0; border-radius:22px; }
  .skeleton-row{ height:14px; border-radius:6px; }
  body{
    font-family:'Nunito', sans-serif;
    background: var(--bg-soft);
    color: var(--ink);
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
  }
  .ic{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }

  header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 18px 8px;
  }
  .logo{
    font-family:'Fredoka', sans-serif;
    font-weight:700;
    font-size: 26px;
    color: var(--ink);
    display:flex; align-items:center; gap:6px;
  }
  .logo .a{ color: var(--green); }
  .logo .s{ color: var(--ink-soft); font-weight:600; font-size:20px; }
  .logo-mark{ display:block; width:34px; height:34px; margin-right:4px; }
  .streak-pill{
    display:flex; align-items:center; gap:5px;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
    padding: 6px 12px;
    border-radius: 14px;
    background: var(--streak-bg); color: var(--gold-dark);
    cursor:pointer;
  }
  .streak-pill .ic{ width:17px; height:17px; color: var(--gold-dark); }
  /* Day not validated yet: the flame stays grey until a card is judged. */
  .streak-pill.pending{ background: var(--bg-soft); color: var(--ink-soft); box-shadow: inset 0 0 0 2px var(--line); }
  .streak-pill.pending img, .streak-pill.pending .emoji{ filter: grayscale(1); opacity:0.6; }

  .known-words-clear-btn{
    width:100%;
    margin-bottom: 14px;
  }
  .known-words-list{ display:flex; flex-direction:column; }
  .known-words-deck-header{
    font-family:'Fredoka', sans-serif; font-weight:700; font-size:12.5px;
    text-transform:uppercase; letter-spacing:0.03em;
    color: var(--ink-soft);
    padding: 14px 2px 6px;
  }
  .known-words-deck-header:first-child{ padding-top:2px; }
  .known-word-row{
    display:flex; align-items:center; gap:10px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--line);
  }
  .known-word-row:last-child{ border-bottom:none; }
  .known-word-icon{
    width:34px; height:34px; flex:0 0 auto;
    border-radius:50%;
    background: var(--bg-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .known-word-icon .ic{ width:16px; height:16px; color: var(--blue); }
  .known-word-icon .face-emoji{ font-size:16px; }
  .known-word-text{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
  .known-word-main{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:14.5px; color: var(--ink); }
  .known-word-sub{ font-size:12px; font-weight:600; color: var(--ink-soft); }
  .known-word-remove{
    flex:0 0 auto;
    width:28px; height:28px;
    border-radius:50%;
    border:none;
    background: var(--bg-soft);
    color: var(--red);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .known-word-remove .ic{ width:13px; height:13px; }
  /* The missed-words list only reads: missed words already come back first. */
  #knownWordsOverlay.missed-mode .known-word-remove{ display:none; }
  .known-words-empty{ text-align:center; color: var(--ink-soft); font-weight:600; padding: 24px 0; }
  .known-words-load-more{
    display:block;
    width:100%;
    margin-top: 10px;
    padding: 11px;
    border-radius: 12px;
    border: 2px dashed var(--line);
    background: none;
    color: var(--blue-dark);
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:13.5px;
    cursor:pointer;
  }
  #knownWordsBody{
    max-height: min(60vh, 420px);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .header-right{ display:flex; align-items:center; gap:8px; }
  .theme-toggle{
    width:36px; height:36px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    cursor:pointer;
  }
  .theme-toggle .ic{ width:17px; height:17px; }
  .theme-toggle:active{ transform: scale(0.92); }
  #randomBtn{ font-size:18px; }
  #randomBtn[hidden]{ display:none; }
  #typingToggle{ font-size:16px; }
  #logsLink{ font-size:16px; text-decoration:none; }
  #logsLink[hidden]{ display:none; }
  .header-premium-btn{ font-size:17px; text-decoration:none; background: #14532D; border: 2px solid var(--mastered-green); }
  .header-premium-btn[hidden]{ display:none; }
  /* The generic img.emoji margin is lopsided (inline text spacing) and pushes
     the crown off-center inside the round button. */
  .header-premium-btn{ line-height:1; }
  .header-premium-btn img.emoji{ margin:0; display:block; }
  #typingToggle.active{ background: var(--cat-active-bg); border-color: var(--blue); }
  /* Flag badge: only shown to a creator who has reports waiting on one of
     their decks, right next to the typing-mode button. */
  #reportsBtn{ font-size:16px; position:relative; overflow:visible; line-height:1; }
  #reportsBtn[hidden]{ display:none; }
  #reportsBtn img.emoji{ margin:0; display:block; }
  .header-badge{
    position:absolute; top:-4px; right:-4px;
    min-width:17px; height:17px; padding:0 4px;
    border-radius:9px;
    background: var(--red); color:#fff;
    border:2px solid var(--bg-soft);
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:10px; line-height:13px;
    text-align:center;
  }

  /* Phones only: drop the logo, keep the streak pill on the left and the
     icon buttons grouped on the right. */
  @media (max-width: 640px){
    header{ justify-content:flex-start; }
    .logo{ display:none; }
    .header-right{ display:contents; }
    /* iOS blurs the strip just below the status bar, and in the app
       installed on the home screen the top of these buttons fell inside it
       with only 14px of margin. The safe-area inset clears the status bar
       itself when the page runs under it, the extra 12px clears the blur. */
    header{ padding-top: calc(14px + env(safe-area-inset-top)); }
    @media (display-mode: standalone){
      header{ padding-top: calc(26px + env(safe-area-inset-top)); }
    }
    .streak-pill{ order:1; }
    #headerPremiumBtn{ order:2; margin-left:8px; }
    #randomBtn{ order:3; margin-left:auto; }
    #typingToggle{ order:4; margin-left:8px; }
    /* The dice can be turned off in the settings: the next icon then takes
       over pushing the right-hand group to the edge. */
    #randomBtn[hidden] + #typingToggle{ margin-left:auto; }
    #reportsBtn{ order:5; margin-left:8px; }
    #logsLink{ order:6; margin-left:8px; }
    #profileBadge{ order:7; margin-left:8px; }
  }

  .deck-toggle{
    display:flex; gap:7px;
    /* 18px, not 10px: takes over the 8px the (now removed) reorder bar used
       to occupy under here, so the spacing below the decks is unchanged. */
    padding: 6px 18px 18px;
  }
  .deck-btn{
    flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px;
    padding: 9px 4px;
    border-radius: 14px;
    background: var(--bg);
    border: 2px solid var(--line);
    border-bottom: 4px solid var(--line);
    color: var(--ink-soft);
    cursor:pointer;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none;
  }
  .deck-btn .ic{ width:18px; height:18px; }
  .deck-btn.active{
    background: var(--deck-active-bg);
    border-color: var(--green);
    color: var(--green-dark);
  }
  .deck-emoji{ font-size:18px; line-height:1; }
  /* Takes the place of the favorite decks when there are none. */
  .deck-empty-note{
    flex: 0 1 190px; min-width:0;
    display:flex; align-items:center; justify-content:center;
    padding: 8px 10px;
    border-radius: 14px;
    border: 2px dashed var(--line);
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12.5px; line-height:1.35;
    color: var(--ink-soft); text-align:center; text-decoration:none;
    white-space:pre-line;
  }
  .deck-btn:active{ transform: translateY(2px); border-bottom-width:2px; }

  /* Drag-to-reorder, iPhone home screen style: the decks jiggle while the
     mode is on and one of them follows the finger as a lifted copy. */
  .deck-toggle{ -webkit-touch-callout:none; }
  .deck-toggle.reorder-mode .deck-btn{ cursor:grab; touch-action:none; }
  .deck-toggle.reorder-mode .add-deck-btn{ display:none; }
  .deck-toggle.reorder-mode .deck-btn:active{ transform:none; border-bottom-width:4px; }
  @keyframes deckJiggle{
    0%{ transform: rotate(-1.5deg); }
    50%{ transform: rotate(1.5deg); }
    100%{ transform: rotate(-1.5deg); }
  }
  .deck-toggle.reorder-mode .deck-btn[data-deck-id]{ animation: deckJiggle 0.26s ease-in-out infinite; }
  .deck-toggle.reorder-mode .deck-btn[data-deck-id]:nth-child(even){ animation-delay: -0.13s; }
  .deck-btn-dragging{ opacity:0.25; animation:none !important; }
  .deck-btn-drag-clone{
    position:fixed; z-index:70; margin:0;
    pointer-events:none;
    animation:none !important;
    transform: scale(1.08);
    box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  }

  /* On wide screens the chips stop well short of the window edges instead of
     running the full width. */
  .cat-row-wrap{
    position:relative; display:flex; align-items:center;
    width:100%; max-width:1200px; margin:0 auto;
  }
  .cat-row{
    display:flex; gap:8px;
    padding: 0 18px 10px;
    overflow-x:auto;
    scrollbar-width:none;
    flex:1; min-width:0;
  }
  .cat-row::-webkit-scrollbar{ display:none; }
  .cat-row-arrow{
    display:none;
    flex:0 0 auto;
    width:28px; height:28px;
    margin: 0 4px 10px;
    border-radius:50%;
    border:1px solid var(--line);
    background: var(--bg);
    color: var(--ink-soft);
    font-size:16px; line-height:1;
    cursor:pointer;
  }
  @media (hover:hover) and (pointer:fine){
    .cat-row-arrow{ display:flex; align-items:center; justify-content:center; }
    /* Chips fade out against the arrows rather than being cut off square,
       which hints that the row scrolls. */
    .cat-row{
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
              mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    }
  }
  .cat-chip{
    flex:0 0 auto;
    display:flex; align-items:center; gap:6px;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12.5px;
    padding: 8px 13px;
    border-radius: 13px;
    background: var(--bg);
    border: 2px solid var(--line);
    color: var(--ink-soft);
    cursor:pointer;
    white-space:nowrap;
  }
  .cat-chip .ic{ width:15px; height:15px; }
  .cat-chip.active{
    background: var(--cat-active-bg);
    border-color: var(--blue);
    color: var(--blue-dark);
  }

  main{
    flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding: 4px 18px 6px;
    position:relative;
  }

  .info-row{
    width:100%; max-width:380px;
    display:flex; gap:8px; flex-wrap:wrap;
    margin-bottom:8px;
  }
  .info-pill{
    display:flex; align-items:center; gap:5px;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px;
    padding: 5px 10px;
    border-radius: 12px;
    background: var(--bg-soft);
  }
  .info-pill .ic{ width:15px; height:15px; }
  .info-pill.due{ color: var(--blue-dark); }
  .info-pill.know{ color: var(--green-dark); }
  .info-pill.retry{ color: var(--red-dark); }

  .stage{
    width:100%; max-width: 380px;
    height: 49vh; max-height: 420px;
    min-height: 260px;
    position:relative;
    touch-action: pan-y;
  }
  .combo-popup{
    position:absolute;
    top:12%; left:85%;
    font-family:'Fredoka', sans-serif;
    font-weight:700;
    font-size:38px;
    color: var(--gold-dark);
    text-shadow: 0 2px 0 rgba(0,0,0,0.1);
    z-index:5;
    pointer-events:none;
    animation: comboPop 0.9s cubic-bezier(.2,.8,.2,1) forwards;
  }
  @keyframes comboPop{
    0%{ transform: translate(-50%, 10px) scale(0.4) rotate(-8deg); opacity:0; }
    22%{ transform: translate(-50%, -14px) scale(1.3) rotate(4deg); opacity:1; }
    40%{ transform: translate(-50%, -18px) scale(1) rotate(0deg); opacity:1; }
    100%{ transform: translate(-50%, -60px) scale(1) rotate(0deg); opacity:0; }
  }
  .combo-popup.milestone{
    font-size:56px;
    color: var(--red-dark);
    text-shadow: 0 3px 0 rgba(0,0,0,0.12);
    animation: comboPopBig 1.15s cubic-bezier(.2,.8,.2,1) forwards;
  }
  @keyframes comboPopBig{
    0%{ transform: translate(-50%, 14px) scale(0.3) rotate(-14deg); opacity:0; }
    20%{ transform: translate(-50%, -20px) scale(1.55) rotate(6deg); opacity:1; }
    32%{ transform: translate(-50%, -24px) scale(1.15) rotate(-3deg); opacity:1; }
    45%{ transform: translate(-50%, -26px) scale(1.25) rotate(2deg); opacity:1; }
    60%{ transform: translate(-50%, -28px) scale(1.15) rotate(0deg); opacity:1; }
    100%{ transform: translate(-50%, -80px) scale(1.1) rotate(0deg); opacity:0; }
  }
  .combo-spark{
    position:absolute;
    top:50%; left:50%;
    width:7px; height:7px;
    border-radius:50%;
    transform: translate(-50%,-50%) rotate(var(--angle)) translateX(0) scale(1);
    animation: comboSpark 0.8s ease-out forwards;
  }
  @keyframes comboSpark{
    0%{ transform: translate(-50%,-50%) rotate(var(--angle)) translateX(0) scale(1); opacity:1; }
    100%{ transform: translate(-50%,-50%) rotate(var(--angle)) translateX(52px) scale(0); opacity:0; }
  }
  .confetti-layer{
    position:fixed; inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:60;
  }
  .confetti-piece{
    position:absolute;
    top:-20px;
    width:7px; height:13px;
    opacity:0.9;
    animation-name: confettiFall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
  .confetti-piece.round{ border-radius:50%; }
  @keyframes confettiFall{
    0%{ transform: translate(0,0) rotate(0deg); opacity:1; }
    100%{ transform: translate(var(--drift), 105vh) rotate(var(--spin)); opacity:0.85; }
  }

  .card-drag{
    position:absolute; inset:0;
    will-change: transform, opacity;
  }
  .card-drag.behind{
    z-index:1;
    transform: scale(0.94) translateY(10px);
  }
  .card-drag.top{ z-index:2; }
  .card-flip{
    position:relative; width:100%; height:100%;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
  }
  .card-flip.flipped{ transform: rotateY(180deg); }
  .face{
    position:absolute; inset:0;
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
    border-radius: 22px;
    background: var(--bg);
    border: 2px solid var(--line);
    box-shadow: 0 6px 0 var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding: 26px 22px;
    text-align:center;
  }
  .face-back{ transform: rotateY(180deg); background: var(--face-back-bg); border-color: var(--green); box-shadow: 0 6px 0 var(--green); }

  .face-icon{
    width:44px; height:44px;
    flex-shrink:0;
    border-radius:50%;
    background: var(--bg-soft);
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 14px;
  }
  .face-icon .ic{ width:23px; height:23px; color: var(--blue); }
  .face-back .face-icon{ background: var(--face-back-icon-bg); }
  .face-back .face-icon .ic{ color: var(--green-dark); }

  .eyebrow{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12px;
    letter-spacing:0.08em; text-transform:uppercase;
    color: var(--purple-dark);
    margin-bottom: 10px;
  }
  .face-back .eyebrow{ color: var(--green-dark); }

  .word{
    font-family:'Fredoka', sans-serif; font-weight:600;
    font-size: clamp(23px, 7vw, 31px);
    line-height:1.2;
    color: var(--ink);
  }
  /* max-width + min-height:0 + overflow: whatever its length, the text stays
     inside the card and scrolls rather than spilling off the screen. */
  .word{ white-space:pre-line; overflow-wrap:anywhere; text-wrap:balance; max-width:100%; min-height:0; overflow-y:auto; }
  .word.word-md{ font-size: clamp(20px, 6vw, 25px); }
  .word.word-lg{ font-size: 19px; line-height:1.35; text-wrap:pretty; }
  /* Paragraph: body font, left-aligned for reading, and scrollable inside the
     card (vertical drags already fall through to native scrolling). */
  .word.word-xl{
    align-self:stretch;
    font-family:'Nunito', sans-serif; font-size:16px; font-weight:600;
    line-height:1.5; text-align:left; text-wrap:pretty;
    min-height:0; overflow-y:auto; overscroll-behavior:contain;
    padding-right:4px;
  }
  .word.word-xxl{ font-size:14.5px; line-height:1.45; }
  /* "safe" keeps the top of a too-tall paragraph reachable instead of
     clipping it above the card. */
  .face.face-long{ justify-content: safe center; padding: 20px 20px 22px; }
  .face-long .face-icon{ width:34px; height:34px; margin-bottom:8px; }
  .face-long .face-icon .ic{ width:18px; height:18px; }
  .face-long .face-emoji{ font-size:17px; }
  .face-long .eyebrow{ margin-bottom:8px; }
  .sub:empty{ display:none; }
  .sub{ margin-top:8px; font-size:13.5px; color: var(--ink-soft); font-weight:600; }
  .word.flag-big{ font-size: 84px; line-height:1; }

  .promo-word{
    font-family:'Fredoka', sans-serif; font-weight:600;
    font-size:19px; line-height:1.25;
    color: var(--ink);
  }
  .promo-actions{
    display:flex; flex-direction:column; gap:8px;
    width:100%; margin-top:18px;
  }
  .promo-actions button{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
    padding:11px 18px;
    border-radius:14px;
    background: var(--green); border:none; border-bottom:4px solid var(--green-dark);
    color:#fff; cursor:pointer;
  }
  .promo-actions button.ghost{
    background: var(--bg); color: var(--ink-soft);
    border:2px solid var(--line); border-bottom:4px solid var(--line);
  }

  .stamp{
    position:absolute; top:22px;
    font-family:'Fredoka', sans-serif; font-weight:700; font-size:16px;
    padding: 6px 14px;
    border-radius: 10px;
    border: 3px solid;
    letter-spacing: 0.04em;
    opacity:0;
    pointer-events:none;
    transform: rotate(-12deg);
  }
  .stamp.right{ right:18px; color: var(--green); border-color: var(--green); }
  .stamp.left{ left:18px; color: var(--red); border-color: var(--red); transform: rotate(12deg); }

  .hint-row{
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin-top:10px;
    font-size:12px; color: var(--ink-soft); font-weight:700;
  }
  .hint-row .ic{ width:14px; height:14px; }

  .typing-row{
    display:none;
    width:100%; max-width:380px;
    gap:8px;
    margin-top:10px;
  }
  .typing-input{
    flex:1; min-width:0;
    font-family:'Fredoka', sans-serif; font-size:16px; font-weight:600;
    padding: 12px 14px;
    border-radius: 14px;
    border: 2px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    text-align:center;
  }
  .typing-input:focus{ outline:none; border-color: var(--blue); }
  .typing-input.correct{ border-color: var(--green); color: var(--green-dark); }
  .typing-input.wrong{ border-color: var(--red); color: var(--red-dark); }
  .typing-check-btn{
    flex:0 0 auto;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
    display:flex; align-items:center; justify-content:center;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--blue); border:none; border-bottom:4px solid var(--blue-dark);
    color:#fff; cursor:pointer;
  }
  .typing-skip-btn{
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--red); border:none; border-bottom:4px solid var(--red-dark);
    color:#fff; cursor:pointer;
  }
  .typing-skip-btn:active{ transform: translateY(2px); border-bottom-width:2px; }
  .typing-skip-btn .ic{ width:22px; height:22px; stroke-width:3; }
  .typing-check-btn .ic{ width:22px; height:22px; stroke-width:3; }
  .typing-check-btn:active{ transform: translateY(2px); border-bottom-width:2px; }
  .typing-feedback{
    display:none;
    align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
    width:100%; max-width:380px;
    margin-top:10px;
    padding: 10px 14px;
    border-radius: 14px;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
    text-align:center;
  }
  .typing-feedback .ic{ width:17px; height:17px; }
  .typing-feedback.long{ background: var(--bg-soft); color: var(--ink); }
  .typing-long-answer{
    flex:1 1 100%;
    max-height: 7.5em; overflow-y:auto;
    white-space:pre-line; overflow-wrap:anywhere; text-align:left;
    font-size:14px; line-height:1.45;
  }
  .typing-long-answer strong{ font-weight:600; }
  .typing-feedback.correct{ background: var(--face-back-bg); color: var(--green-dark); }
  .typing-feedback.wrong{ background: var(--bg-soft); color: var(--red-dark); }
  .typing-feedback.wrong .ic{ color: var(--red); }
  .typing-override-btn{
    flex:0 0 auto;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 2px solid var(--green);
    background: var(--bg);
    color: var(--green-dark);
    cursor:pointer;
  }

  .actions{
    width:100%; max-width:380px;
    display:flex; align-items:center; justify-content:center;
    gap: 26px;
    margin-top: 6px;
  }
  .action-btn{
    width:58px; height:58px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border: none;
    cursor:pointer;
    background: var(--bg);
  }
  .action-btn.no{ border:2px solid var(--red); border-bottom:4px solid var(--red); }
  .action-btn.no .ic{ width:25px; height:25px; color: var(--red); }
  .action-btn.yes{ border:2px solid var(--green); border-bottom:4px solid var(--green); }
  .action-btn.yes .ic{ width:25px; height:25px; color: var(--green); }
  .action-btn:active{ transform: translateY(2px); border-bottom-width:2px; }

  .util-row{
    width:100%; max-width:380px;
    display:flex; align-items:center; justify-content:space-between;
    margin-top: 12px;
    padding: 0 6px;
  }
  .util-btn{
    display:flex; align-items:center; gap:5px;
    background:none; border:none;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:11px;
    color: var(--ink-soft);
    padding: 6px;
    cursor:pointer;
  }
  .util-btn .ic{ width:15px; height:15px; }
  .util-btn.center-label{ font-family:'Fredoka'; font-size:12px; color:var(--blue-dark); }

  .progress-wrap{
    width:100%; max-width:380px;
    height: 9px;
    background: var(--line);
    border-radius: 6px;
    overflow:hidden;
    margin-bottom: 12px;
  }
  .progress-bar{ height:100%; background: var(--green); border-radius:6px; transition: width 0.3s; }

  .empty{ text-align:center; padding: 44px 20px; }
  .empty .face-icon{ margin:0 auto 16px; width:64px; height:64px; background: var(--deck-active-bg); }
  .empty .face-icon .ic{ width:32px; height:32px; color: var(--green-dark); }
  .empty .face-icon.face-emoji{ font-size:32px; }
  .empty h2{ font-family:'Fredoka', sans-serif; font-size:20px; margin:0 0 6px; }
  .empty p{ color: var(--ink-soft); font-weight:600; font-size:13.5px; margin:0 0 18px; }
  .empty button{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
    padding: 12px 22px;
    border-radius:14px;
    background: var(--green); border:none; border-bottom:4px solid var(--green-dark);
    color:#fff; cursor:pointer;
    margin: 0 6px 8px;
  }
  .empty button.ghost{
    background: var(--bg); color: var(--ink-soft);
    border:2px solid var(--line); border-bottom:4px solid var(--line);
  }

  .deck-toggle{ overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; justify-content:center; justify-content:safe center; }
  .deck-toggle::-webkit-scrollbar{ display:none; }
  .deck-btn{ flex:0 0 auto; min-width:78px; }
  .add-deck-btn{
    border-style: dashed;
    border-width: 2px;
    color: var(--blue-dark);
    border-color: var(--blue);
  }
  .face-emoji{ font-size:22px; line-height:1; }

  .modal-overlay{
    display:none;
    position:fixed; inset:0;
    background: rgba(0,0,0,0.45);
    z-index:50;
    align-items:flex-end;
    justify-content:center;
  }
  .modal-overlay.open{ display:flex; }
  .modal-card{
    width:100%; max-width:420px;
    max-height:88vh;
    background: var(--bg);
    border-radius: 22px 22px 0 0;
    display:flex; flex-direction:column;
    overflow:hidden;
  }
  .modal-header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
  }
  .modal-header h3{ font-family:'Fredoka', sans-serif; font-size:17px; margin:0; }
  .modal-close{
    width:30px; height:30px; border-radius:50%;
    border:none; background: var(--bg-soft); color: var(--ink-soft);
    font-size:16px; cursor:pointer;
  }
  .modal-close::before{ content:"✕"; }
  .modal-body{
    flex:1; min-height:0;
    padding: 14px 18px;
    overflow-y:auto;
  }
  .modal-label{
    display:block;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12px;
    color: var(--ink-soft);
    margin: 12px 0 6px;
  }
  .modal-input{
    width:100%;
    font-family:'Nunito', sans-serif; font-size:14px; font-weight:600;
    line-height:20px;
    padding: 11px 13px;
    border-radius: 12px;
    border: 2px solid var(--line);
    background: var(--bg-soft);
    color: var(--ink);
  }
  .modal-input-emoji{ width:70px; text-align:center; font-size:20px; cursor:pointer; }

  .modal-field-row{ display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; }
  .modal-field-col{ flex:1; min-width:0; }
  .modal-field-col-emoji{ flex:0 0 auto; }
  .modal-field-col-emoji .modal-input-emoji{ width:44px; padding-left:8px; padding-right:8px; }

  .json-import-block{
    margin-top:10px;
  }
  .json-import-block[open]{
    border: 2px solid var(--line);
    border-radius: 14px;
    padding: 2px 13px;
    background: var(--bg-soft);
  }
  .json-import-summary{
    padding: 4px 0;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12.5px;
    color: var(--blue-dark);
    cursor:pointer;
    list-style: none;
    opacity:0.85;
  }
  .json-import-block[open] .json-import-summary{ padding: 11px 0; opacity:1; }
  .json-import-summary:hover{ opacity:1; }
  .json-import-summary::-webkit-details-marker{ display:none; }
  .json-import-body{ padding: 2px 0 14px; display:flex; flex-direction:column; }
  .ai-prompt-box{ display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
  .ai-prompt-text{
    width:100%;
    font-family:'Nunito', sans-serif; font-size:12.5px; font-weight:600;
    padding: 10px 12px;
    border-radius: 10px;
    border: 2px solid var(--line);
    background: var(--bg);
    color: var(--ink-soft);
    resize:vertical;
  }
  .copy-prompt-btn{
    align-self:flex-start;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 2px solid var(--blue);
    background: none;
    color: var(--blue-dark);
    cursor:pointer;
  }
  .json-import-textarea{
    width:100%;
    font-family: monospace; font-size:12.5px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 2px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    resize:vertical;
    margin-top:10px;
  }
  .json-import-btn{ margin-top:10px; }
  .json-import-error{
    font-family:'Nunito', sans-serif; font-size:12.5px; font-weight:700;
    color: var(--red);
    margin-top:8px;
    min-height:1px;
  }

  .premium-locked:not([hidden]){
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .premium-locked{
    margin-top:10px;
    padding:12px 14px;
    border-radius:14px;
    background: var(--mastered-green-bg);
    border:2px dashed var(--mastered-green);
  }
  .premium-locked-text{
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12px;
    color: var(--mastered-green-dark);
  }
  .premium-locked-btn{
    width:auto; flex-shrink:0; padding:9px 14px;
    background: var(--mastered-green); border:none; border-bottom:4px solid var(--mastered-green-dark);
    color:#fff;
  }

  .deck-preview-words{
    display:flex; flex-direction:column;
    max-height: min(50vh, 360px);
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
  }
  .deck-preview-word{
    display:flex; align-items:center; gap:8px;
    padding:9px 2px;
    border-bottom:1px solid var(--line);
    font-family:'Nunito', sans-serif; font-size:13.5px; color: var(--ink);
  }
  .deck-preview-word:last-child{ border-bottom:none; }
  .deck-preview-word span:first-child, .deck-preview-word span:last-child{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .deck-preview-arrow{ flex:0 0 auto; color: var(--ink-soft); }
  .deck-preview-more{ font-family:'Nunito', sans-serif; font-size:12px; color: var(--ink-soft); text-align:center; padding:10px 0 2px; margin:0; }
  .deck-preview-empty{ font-family:'Nunito', sans-serif; color: var(--ink-soft); font-size:12.5px; text-align:center; padding:16px 0; margin:0; }

  /* Share modal, injected by public/share.js into whichever page asked for
     it, so its styles belong here and not in either page's own <style>. */
  .modal-header-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
  .modal-icon-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%;
    border:none; background: var(--bg-soft); color: var(--ink-soft);
    cursor:pointer;
  }
  .modal-icon-btn[hidden]{ display:none; }
  .modal-icon-btn .ic{ width:16px; height:16px; }
  .modal-icon-btn:hover{ color: var(--ink); }

  .share-note{
    font-family:'Nunito', sans-serif; font-size:13px; font-weight:700;
    color: var(--mastered-green-dark); background: var(--mastered-green-bg);
    border-radius:12px; padding:10px 12px; margin:2px 0 12px;
  }
  .share-link-label{
    display:block;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12px;
    color: var(--ink-soft);
    margin: 2px 0 6px;
  }
  .share-link-row{ display:flex; gap:8px; align-items:stretch; }
  .share-link-input{
    flex:1; min-width:0;
    font-family:'Nunito', sans-serif; font-size:13px; font-weight:600;
    padding: 11px 13px;
    border-radius: 12px;
    border: 2px solid var(--line);
    background: var(--bg-soft);
    color: var(--ink);
    /* Selection is off page-wide; here it is what someone falls back on when
       the clipboard is unavailable. */
    -webkit-user-select:text; user-select:text;
  }
  .modal-btn.share-copy-btn{
    flex:0 0 auto; padding:11px 16px;
    background: var(--bg); color: var(--blue-dark);
    border: 2px solid var(--blue); border-bottom:4px solid var(--blue);
  }
  .share-copy-btn.copied{
    color: var(--mastered-green-dark);
    border-color: var(--mastered-green); border-bottom-color: var(--mastered-green-dark);
  }
  /* White behind the code whatever the theme: an inverted QR code is out of
     spec and plenty of scanners refuse it. */
  .share-qr{ display:flex; justify-content:center; padding:18px 0 4px; }
  .share-qr[hidden]{ display:none; }
  .share-qr canvas{ border-radius:12px; background:#FFFFFF; }
  .modal-btn.share-zoom-btn{
    flex:none; display:block; width:100%; margin-top:10px; padding:10px;
    background: var(--bg); color: var(--blue-dark);
    border: 2px solid var(--blue); border-bottom:4px solid var(--blue);
  }
  .modal-btn.share-zoom-btn[hidden]{ display:none; }

  /* QR code agrandi : plein écran, pour le montrer à une salle ou le
     projeter. Les couleurs sont fixes et non thématiques, parce que le code
     doit rester sombre sur blanc pour être lu. */
  .share-zoom{
    display:none;
    position:fixed; inset:0; z-index:60;
    align-items:center; justify-content:center;
    padding:24px;
    background: rgba(0,0,0,0.78);
    cursor:zoom-out;
  }
  .share-zoom.open{ display:flex; }
  .share-zoom-card{
    display:flex; flex-direction:column; align-items:center; gap:12px;
    max-width:100%; max-height:100%;
    padding:24px;
    border-radius:20px;
    background:#FFFFFF;
  }
  .share-zoom-card canvas{ display:block; }
  .share-zoom-title{
    font-family:'Fredoka', sans-serif; font-size:20px; color:#111827; margin:0; text-align:center;
  }
  .share-zoom-link{
    font-family:'Nunito', sans-serif; font-weight:700; font-size:16px; color:#4B5563;
    margin:0; text-align:center; word-break:break-all;
    -webkit-user-select:text; user-select:text;
  }
  .share-zoom-close{
    position:fixed; top:18px; right:18px;
    width:40px; height:40px; font-size:19px;
    background: rgba(255,255,255,0.92); color:#111827;
    cursor:pointer;
  }

  .modal-btn.primary.premium-popup-go{
    background: var(--mastered-green); border:none; border-bottom:4px solid var(--mastered-green-dark);
    color:#fff;
  }
  .premium-popup-text{
    font-family:'Nunito', sans-serif; font-weight:600; font-size:14px; line-height:1.5;
    color: var(--ink); margin:2px 0;
  }
  .share-qr-hint{
    font-family:'Nunito', sans-serif; font-size:12px; color: var(--ink-soft);
    text-align:center; margin:6px 0 2px;
  }

  .cards-list{ display:flex; flex-direction:column; gap:8px; }
  .card-row{
    display:flex; align-items:center; gap:6px;
  }
  /* La carte ouverte depuis un signalement, mise en avant le temps de la
     retrouver au milieu des autres. */
  .card-row-flagged textarea{ border-color: var(--red); }
  .card-field{ flex:1; min-width:0; position:relative; display:flex; }
  .card-count{
    position:absolute; right:9px; bottom:4px;
    font-family:'Nunito', sans-serif; font-size:10.5px; font-weight:700;
    color: var(--ink-soft); pointer-events:none;
  }
  .card-count:not(:empty){ background: var(--bg-soft); padding-left:3px; }
  .card-row textarea{
    flex:1; width:100%; min-width:0;
    resize:none; overflow:hidden; line-height:1.3;
    font-family:'Nunito', sans-serif; font-size:13.5px; font-weight:600;
    padding: 10px 11px;
    border-radius: 10px;
    border: 2px solid var(--line);
    background: var(--bg-soft);
    color: var(--ink);
  }
  .card-row input{
    flex:1; min-width:0;
    font-family:'Nunito', sans-serif; font-size:13.5px; font-weight:600;
    padding: 10px 11px;
    border-radius: 10px;
    border: 2px solid var(--line);
    background: var(--bg-soft);
    color: var(--ink);
  }
  .card-row .remove-row{
    flex:0 0 auto;
    width:34px; height:34px;
    border-radius:50%;
    border:none;
    background: var(--bg-soft);
    color: var(--red);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .card-row .remove-row .ic{ width:15px; height:15px; }
  .add-card-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    width:100%;
    margin-top:10px;
    padding: 11px;
    border-radius: 12px;
    border: 2px dashed var(--line);
    background: none;
    color: var(--blue-dark);
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:13.5px;
    cursor:pointer;
  }
  .add-card-btn::before{ content:"+ Ajouter une carte"; }
  .modal-actions:not([hidden]){
    display:flex;
  }
  .modal-actions{
    gap:10px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
  }
  .modal-btn{
    flex:1;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
    padding: 12px;
    border-radius: 14px;
    cursor:pointer;
  }
  .modal-btn.primary{
    background: var(--green); border:none; border-bottom:4px solid var(--green-dark);
    color:#fff;
  }
  .modal-btn.danger{
    background: var(--bg); color: var(--red);
    border: 2px solid var(--red); border-bottom:4px solid var(--red);
  }
  .modal-btn:disabled{ opacity:0.4; cursor:default; }

  .delete-account-warn{
    font-family:'Nunito', sans-serif; font-size:13px; color: var(--red-ink);
    background: var(--red-bg); border-radius:14px;
    padding:12px 14px; margin:0; line-height:1.45;
  }
  .delete-account-name{
    font-family:'Fredoka', sans-serif; font-weight:600; color: var(--ink);
  }

  #profileBadge{ font-size:16px; }

  .profile-edit-actions{ flex-direction:column; gap:10px; }
  .profile-danger-row{ display:flex; gap:10px; width:100%; }

  .site-footer{
    display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap;
    padding:24px 16px 40px;
    font-family:'Nunito', sans-serif; font-size:12px;
    color: var(--ink-soft);
  }
  .site-footer a{ color: var(--ink-soft); text-decoration:underline; }
  .site-footer a:hover{ color: var(--ink); }

  .auth-error{
    font-family:'Nunito', sans-serif; font-size:12.5px; font-weight:700;
    color: var(--red);
    margin-top:8px;
    min-height:1px;
  }

  .google-signin-div{ display:flex; justify-content:center; }

  /* Welcome page shown to visitors without an account (#profileOverlay):
     a full page of its own rather than a sheet over the dimmed app. */
  /* While it is open, the welcome page is the page itself rather than a
     fixed layer with a scroll of its own: iPhone Safari only lets the
     document's own scroll run under its status bar and bottom toolbar, and
     a fixed layer left a flat band at both. The app behind is hidden; it is
     only drawn once enterApp() has closed this page.
     html.signed-in (set by index.html's head script when a session is saved)
     turns all of this off from the first paint, so returning users never see
     the welcome page flash while their session is being confirmed. */
  html:not(.signed-in):has(#profileOverlay.open),
  html:not(.signed-in) body:has(#profileOverlay.open){ background: var(--bg); }
  html:not(.signed-in) body:has(#profileOverlay.open) > header,
  html:not(.signed-in) body:has(#profileOverlay.open) > .deck-toggle,
  html:not(.signed-in) body:has(#profileOverlay.open) > .cat-row-wrap,
  html:not(.signed-in) body:has(#profileOverlay.open) > main,
  html:not(.signed-in) body:has(#profileOverlay.open) > .site-footer,
  /* Fixed at the bottom of the screen: the welcome page covers it at rest,
     but Safari's bounce past the end of the page would uncover it. */
  html:not(.signed-in) body:has(#profileOverlay.open) > .a2hs-banner{ display:none !important; /* renderCatRow() sets display inline */ }
  html.signed-in #profileOverlay{ display:none !important; }
  #profileOverlay{
    position:relative; inset:auto;
    /* Sized in pixels, not in % of this now page-long element, so the glow
       keeps the size it had when the welcome page was a screen-high layer. */
    background:
      radial-gradient(ellipse 75% 340px at 50% -45px, rgba(56,189,248,0.20), transparent 72%),
      var(--bg);
  }
  #profileOverlay.open{ display:block; }
  #profileOverlay .welcome-card{
    display:flex; flex-direction:column;
    max-width:none; max-height:none; min-height:100vh; min-height:100dvh;
    border-radius:0; background:transparent; overflow:visible;
  }
  .welcome-card .modal-body{
    display:flex; flex-direction:column; overflow:visible;
    padding: calc(28px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
  }
  /* margin:auto centres the column while it fits, and lets it scroll from
     the top once it doesn't (justify-content:center would cut the top off). */
  .welcome-inner{ margin:auto; width:100%; max-width:560px; text-align:center; }

  .welcome-brand{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 26px; }
  .welcome-brand-mark{ display:block; width:56px; height:56px; filter: drop-shadow(0 6px 14px rgba(56,189,248,0.35)); }
  .logo.welcome-logo{ display:block; font-size:30px; line-height:1; }
  .logo.welcome-logo .s{ font-size:24px; }

  .welcome-title{
    font-family:'Fredoka', sans-serif; font-weight:700;
    font-size: clamp(26px, 6.6vw, 38px); line-height:1.12;
    color: var(--ink); margin:0 auto 12px; max-width:500px;
  }
  .welcome-title-accent{ color: var(--green-dark); }
  .welcome-pitch{
    font-size:14.5px; line-height:1.55;
    color: var(--ink-soft); margin:0 auto 26px; max-width:430px;
  }

  /* Example card: the app's own flip, shown before any sign-in. */
  .welcome-demo{
    display:block; width:220px; height:132px; margin:0 auto;
    padding:0; border:none; background:none; cursor:pointer;
    perspective:900px; -webkit-tap-highlight-color:transparent;
  }
  .welcome-demo-inner{
    position:relative; display:block; width:100%; height:100%;
    transform-style:preserve-3d; transition: transform .55s cubic-bezier(.2,.8,.2,1);
  }
  .welcome-demo.flipped .welcome-demo-inner{ transform: rotateY(180deg); }
  .welcome-demo-face{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    border-radius:20px; background: var(--bg);
    border:2px solid var(--line); border-bottom-width:5px;
    box-shadow: 0 12px 26px rgba(15,41,58,0.10);
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
  }
  .welcome-demo-back{ transform: rotateY(180deg); background: var(--face-back-bg); border-color: var(--green); }
  .welcome-demo-lang{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:12px; letter-spacing:.08em; color: var(--purple-dark); }
  .welcome-demo-back .welcome-demo-lang{ color: var(--green-dark); }
  .welcome-demo-word{ font-family:'Fredoka', sans-serif; font-weight:700; font-size:30px; color: var(--ink); }
  .welcome-demo:focus-visible{ outline:none; }
  .welcome-demo:focus-visible .welcome-demo-face{ box-shadow: 0 0 0 3px var(--green); }
  .welcome-demo-hint{ font-size:12px; color: var(--ink-soft); margin:10px 0 24px; }
  @media (prefers-reduced-motion: reduce){ .welcome-demo-inner{ transition:none; } }

  .welcome-free{ font-size:12px; font-weight:700; color: var(--ink-soft); margin:10px 0 30px; }

  .welcome-features{
    list-style:none; margin:0 0 24px; padding:0; text-align:left;
    display:grid; grid-template-columns:1fr; gap:10px;
  }
  @media (min-width:600px){ .welcome-features{ grid-template-columns:1fr 1fr; } }
  .welcome-features li{
    display:flex; align-items:flex-start; gap:12px;
    padding:14px; border-radius:16px;
    background: var(--bg-soft); border:1px solid var(--line);
    font-size:13px; line-height:1.45; color: var(--ink-soft);
  }
  .welcome-features strong{
    display:block; margin-bottom:2px;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14.5px; color: var(--ink);
  }
  .welcome-feature-icon{
    flex-shrink:0; width:38px; height:38px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background: var(--deck-active-bg); font-size:18px;
  }
  .welcome-feature-icon img.emoji{ width:20px; height:20px; margin:0; }

  .welcome-section-title{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:17px;
    color: var(--ink); margin:6px 0 12px;
  }
  .welcome-langs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 22px; }
  .welcome-langs a{
    padding:8px 14px; border-radius:999px;
    background: var(--bg-soft); border:1px solid var(--line);
    font-weight:700; font-size:13px; color: var(--ink); text-decoration:none;
  }
  .welcome-langs a:hover{ border-color: var(--green); color: var(--green-dark); }
  .welcome-decks-link{
    display:inline-block; padding:10px 18px; border-radius:999px;
    border:2px solid var(--line);
    font-weight:800; font-size:13.5px; color: var(--blue-dark); text-decoration:none;
  }
  .welcome-decks-link:hover{ border-color: var(--green); }
  .welcome-footer{
    display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap;
    margin-top:28px; font-size:12px; color: var(--ink-soft);
  }
  .welcome-footer a{ color: var(--ink-soft); text-decoration:underline; }
  .welcome-footer a:hover{ color: var(--ink); }

  .premium-box{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin:0 0 16px;
    padding:14px 16px;
    border-radius:16px;
    background: linear-gradient(135deg, var(--mastered-green-bg), var(--mastered-green) 400%);
    border:2px solid var(--mastered-green);
  }
  .premium-box-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .premium-box-text strong{ font-family:'Fredoka', sans-serif; font-size:14px; color: var(--mastered-green-dark); }
  .premium-box-text span{ font-family:'Nunito', sans-serif; font-size:11.5px; color: var(--ink-soft); }
  .premium-box #premiumActionBtn{
    width:auto; padding:9px 14px; flex-shrink:0;
    background: var(--mastered-green); border:none; border-bottom:4px solid var(--mastered-green-dark);
  }
  .premium-info-link{
    display:block;
    text-align:center;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12px;
    color: var(--mastered-green-dark);
    text-decoration:none;
    margin:-8px 0 16px;
  }
  .premium-info-link:hover{ text-decoration:underline; }

  .profile-section-title{
    font-family:'Nunito', sans-serif; font-weight:800; font-size:11px;
    text-transform:uppercase; letter-spacing:0.04em;
    color: var(--ink-soft);
    margin: 20px 0 8px;
  }
  .profile-section-title.first{ margin-top:0; }

  .profile-stats-section{ margin:0 0 16px; }

  /* Free accounts see their own real stats, blurred, under a personalized
     call to action (see renderProfileStats in client.js). */
  .premium-stats-wrap{ position:relative; }
  .premium-stats-wrap.locked .premium-stats-content{
    filter: blur(5px); opacity:0.75;
    pointer-events:none; user-select:none;
  }
  .premium-stats-teaser:not([hidden]){
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    padding:12px;
  }
  .premium-stats-teaser-card{
    max-width:300px; text-align:center;
    background: var(--bg);
    border:2px solid var(--mastered-green); border-bottom-width:4px;
    border-radius:16px;
    padding:14px 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }
  .premium-stats-teaser-title{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:16px; line-height:1.25;
    color: var(--mastered-green-dark);
  }
  .premium-stats-teaser-text{
    font-family:'Nunito', sans-serif; font-size:12px; line-height:1.45;
    color: var(--ink-soft); margin:6px 0 12px;
  }
  .premium-stats-teaser .premium-locked-btn{ width:100%; }

  .profile-chart-card{
    background: var(--mastered-green-bg);
    border-radius:14px;
    padding:12px 14px 10px;
    margin:8px 0 0;
  }
  .profile-chart-title{
    font-family:'Nunito', sans-serif; font-size:11px; font-weight:700;
    color: var(--mastered-green-dark);
    margin-bottom:8px;
  }
  .profile-chart-nav{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:8px;
  }
  .profile-chart-nav-btn{
    width:26px; height:26px;
    border-radius:50%;
    border:none;
    background: var(--bg-soft);
    color: var(--mastered-green-dark);
    font-size:16px;
    cursor:pointer;
  }
  .profile-chart-nav-btn:disabled{ opacity:0.35; cursor:default; }
  .profile-chart-nav-label{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px;
    color: var(--ink);
  }
  .profile-chart{ display:flex; flex-direction:column; }
  .profile-line-plot{
    position:relative;
    border-bottom:1px solid var(--mastered-green);
  }
  .profile-line-svg{
    position:absolute; inset:0;
    width:100%; height:100%;
    overflow:visible;
  }
  .profile-line-fill{ fill: var(--mastered-green); opacity:0.15; }
  .profile-line-stroke{
    fill:none;
    stroke: var(--mastered-green);
    stroke-width:2.5;
    stroke-linejoin:round; stroke-linecap:round;
    /* The SVG stretches horizontally; keep the stroke width in real pixels. */
    vector-effect: non-scaling-stroke;
  }
  .profile-line-dot{
    position:absolute;
    width:9px; height:9px;
    border-radius:50%;
    background: var(--mastered-green);
    border:2px solid var(--mastered-green-bg);
    box-sizing:border-box;
    transform:translate(-50%, -50%);
    pointer-events:none;
  }
  .profile-line-value{
    position:absolute;
    transform:translate(-50%, -150%);
    font-family:'Nunito', sans-serif; font-size:9.5px; font-weight:800;
    color: var(--mastered-green-dark);
    pointer-events:none;
  }
  /* Invisible day columns on top, so hovering anywhere over a day shows its
     tooltip rather than only over its small dot. */
  .profile-line-cols{ position:absolute; inset:0; display:flex; }
  .profile-line-col{ flex:1 1 0; }
  .profile-line-ticks{ display:flex; }
  .profile-chart-tick{
    flex:1 1 0; text-align:center;
    margin-top:4px;
    font-family:'Nunito', sans-serif; font-size:10px; font-weight:700; color: var(--ink-soft);
  }
  .profile-chart-caption{
    margin-top:8px;
    font-family:'Nunito', sans-serif; font-size:10.5px; color: var(--ink-soft);
  }
  .profile-chart-empty{
    align-self:center;
    font-family:'Nunito', sans-serif; font-size:12px; color: var(--ink-soft);
  }

  .deck-breakdown{ display:flex; flex-direction:column; gap:10px; }
  .deck-breakdown-row{ display:flex; align-items:center; gap:10px; }
  .deck-breakdown-emoji{ font-size:18px; flex-shrink:0; width:22px; text-align:center; }
  .deck-breakdown-body{ flex:1; min-width:0; }
  .deck-breakdown-name{
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12px;
    color: var(--ink);
    margin-bottom:4px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .deck-breakdown-bar-track{
    height:8px;
    border-radius:4px;
    background: var(--bg);
    overflow:hidden;
  }
  .deck-breakdown-bar-fill{
    height:100%;
    border-radius:4px;
    background: var(--mastered-green);
  }
  .deck-breakdown-count{
    flex-shrink:0;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12px;
    color: var(--mastered-green-dark);
  }

  .profile-stats:not([hidden]){
    display:flex; gap:8px;
  }
  #profileLeaderboardRow, #profileSuccessRow{ margin-top:8px; }
  .profile-stat{
    flex:1; min-width:0;
    background: var(--mastered-green-bg);
    border-radius:12px;
    padding:10px 6px;
    text-align:center;
  }
  .profile-stat-clickable{ border:none; cursor:pointer; font:inherit; text-decoration:none; color:inherit; }
  .profile-stat-num{ font-family:'Fredoka', sans-serif; font-weight:700; font-size:18px; color: var(--mastered-green-dark); }
  .profile-stat-unit{ font-family:'Nunito', sans-serif; font-weight:700; font-size:11px; color: var(--mastered-green-dark); }
  .profile-stat-label{ font-family:'Nunito', sans-serif; font-size:10px; color: var(--ink-soft); }

  .profile-settings-grid{
    display:flex; gap:8px;
  }
  .profile-setting-tile{
    flex:1; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    background: var(--bg-soft);
    border:none;
    border-radius:14px;
    padding:12px 10px;
    font:inherit;
    cursor:pointer;
  }
  .profile-setting-tile:active{ transform: scale(0.97); }
  /* The icons inside these tiles are shared classes used elsewhere (header
     buttons, the deck-reorder exit bar) with their own border — only drop
     it for the copies living inside a tile, now that the whole tile (not
     just the icon) is the clickable target. */
  .profile-setting-tile .theme-toggle{
    border: none;
  }
  .profile-setting-label{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px; color: var(--ink); }
  /* On/off tiles: grey when off, blue when on (icon and label). */
  .profile-setting-switch{ color: var(--ink-soft); }
  .profile-setting-switch.active{ background: var(--deck-active-bg); color: var(--green-dark); }
  .profile-setting-switch.active .profile-setting-label{ color: var(--green-dark); }
  .profile-setting-switch .ic{ width:22px; height:22px; }

  img.emoji{
    height: 1em; width: 1em;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.1em;
  }
  .deck-emoji img.emoji, .face-emoji img.emoji{ height:1em; width:1em; }
  .word.flag-big img.emoji{ height:1em; width:1em; }

  .emoji-cat-tabs{
    display:flex; gap:6px;
    overflow-x:auto; scrollbar-width:none;
    margin: 12px 0 10px;
  }
  .emoji-cat-tabs::-webkit-scrollbar{ display:none; }
  @media (hover:hover) and (pointer:fine){
    .emoji-cat-tabs{
      scrollbar-width:thin;
      padding-bottom:8px;
    }
    .emoji-cat-tabs::-webkit-scrollbar{ display:block; height:8px; }
    .emoji-cat-tabs::-webkit-scrollbar-track{ background:transparent; }
    .emoji-cat-tabs::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
    .emoji-cat-tabs::-webkit-scrollbar-thumb:hover{ background:var(--ink-soft); }
  }
  .emoji-cat-tab{
    flex:0 0 auto;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12px;
    padding: 7px 12px;
    border-radius: 12px;
    background: var(--bg-soft);
    border: 2px solid var(--line);
    color: var(--ink-soft);
    cursor:pointer;
    white-space:nowrap;
  }
  .emoji-cat-tab.active{
    background: var(--cat-active-bg);
    border-color: var(--blue);
    color: var(--blue-dark);
  }
  .emoji-grid{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 64px;
    gap: 6px;
    max-height: 40vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .emoji-choice{
    -webkit-appearance: none;
    appearance: none;
    width: 100%; height: 100%;
    min-width: 0; min-height: 0;
    overflow: hidden;
    display:flex; align-items:center; justify-content:center;
    font-size: 22px;
    white-space: nowrap;
    border-radius: 12px;
    border: 2px solid var(--line);
    background: var(--bg-soft);
    cursor:pointer;
  }
  .emoji-choice:active{ transform: scale(0.9); }
  .emoji-choice img.emoji{ height:1.1em; width:1.1em; margin:0; }

  .streak-cal-record{
    text-align:center;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12.5px;
    color: var(--gold-dark);
    background: var(--streak-bg);
    border-radius:12px;
    padding:8px;
    margin-bottom:12px;
  }
  .streak-cal-nav{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom: 10px;
  }
  .streak-cal-nav-btn{
    width:32px; height:32px;
    border-radius:50%;
    border:none;
    background: var(--bg-soft);
    color: var(--ink-soft);
    font-size:18px;
    cursor:pointer;
  }
  .streak-cal-label{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:15px;
    color: var(--ink);
    text-transform:capitalize;
  }
  .streak-cal-weekdays{
    display:grid; grid-template-columns:repeat(7, 1fr);
    text-align:center;
    font-size:11px; font-weight:700;
    color: var(--ink-soft);
    margin-bottom:4px;
  }
  .streak-cal-grid{
    display:grid; grid-template-columns:repeat(7, 1fr);
    grid-auto-rows: 40px;
    gap:4px;
  }
  .streak-cal-day{
    min-width:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:10px;
    font-size:13px; font-weight:600;
    color: var(--ink);
  }
  .streak-cal-day.empty{ visibility:hidden; }
  .streak-cal-day.done{ background: var(--streak-bg); color: var(--gold-dark); }

  .a2hs-banner{
    position:fixed; left:12px; right:12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index:40;
    display:flex; align-items:center; gap:10px;
    background: var(--bg); border:2px solid var(--line); border-radius:16px;
    padding:12px 14px; box-shadow:0 6px 20px rgba(0,0,0,0.15);
  }
  .a2hs-banner[hidden]{ display:none; }
  .a2hs-banner-icon{ font-size:22px; flex-shrink:0; }
  .a2hs-banner-text{ flex:1; display:flex; flex-direction:column; gap:2px; font-family:'Nunito', sans-serif; font-size:12.5px; color: var(--ink); }
  .a2hs-banner-text strong{ font-family:'Fredoka', sans-serif; font-size:13.5px; }
  .a2hs-share-icon .ic{ width:13px; height:13px; display:inline-block; vertical-align:-2px; color: var(--ink); }
  .a2hs-banner-help{
    flex-shrink:0;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:11.5px;
    padding:6px 11px; border-radius:999px;
    background: var(--deck-active-bg); color: var(--blue-dark);
    border:1.5px solid var(--blue); cursor:pointer;
  }
  .a2hs-banner-close{ flex-shrink:0; width:26px; height:26px; border:none; border-radius:50%; background: var(--bg-soft); color: var(--ink-soft); font-size:16px; cursor:pointer; }

  /* Les etapes detaillees derriere le bouton « Aide » de la banniere : iOS
     n a pas d API pour declencher l installation, seul un pas-a-pas aide. */
  .a2hs-help-intro{
    font-family:'Nunito', sans-serif; font-size:13px; color: var(--ink-soft);
    margin:0 0 14px; line-height:1.45;
  }
  .a2hs-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
  .a2hs-steps li{ display:flex; align-items:flex-start; gap:10px; }
  .a2hs-step-num{
    flex-shrink:0; width:24px; height:24px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px;
    background: var(--deck-active-bg); color: var(--blue-dark);
  }
  .a2hs-step-text{
    font-family:'Nunito', sans-serif; font-size:13.5px; color: var(--ink);
    line-height:1.5; padding-top:2px;
  }
  .a2hs-step-icon .ic{
    width:15px; height:15px; display:inline-block; vertical-align:-3px;
    color: var(--blue-dark);
  }
  .a2hs-help-note{
    font-family:'Nunito', sans-serif; font-size:12px; color: var(--ink-soft);
    margin:16px 0 0; line-height:1.45;
  }
  .streak-cal-day.today{ border:2px solid #34383F; }

  /* Signalements : le formulaire vu par le lecteur, puis la liste vue par le
     créateur derrière la pastille du header. */
  .report-card-preview{
    display:flex; align-items:stretch; gap:8px;
    margin-bottom:16px;
  }
  .report-preview-face{
    flex:1; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    padding:14px 10px;
    border-radius:16px;
    background: var(--bg);
    border:2px solid var(--line);
    border-bottom-width:4px;
    text-align:center;
  }
  .report-preview-face.back{
    background: var(--face-back-bg);
    border-color: var(--green);
  }
  .report-preview-eyebrow{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:10px;
    text-transform:uppercase; letter-spacing:0.08em;
    color: var(--ink-soft);
  }
  .report-preview-face.back .report-preview-eyebrow{ color: var(--green-dark); }
  /* Une carte peut tenir un paragraphe : le texte se replie et défile au
     lieu d'étirer la fenêtre. */
  .report-preview-word{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:15px; line-height:1.35;
    color: var(--ink);
    max-height:118px; overflow-y:auto;
    overflow-wrap:anywhere; white-space:pre-wrap;
    user-select:text;
  }
  .report-preview-word.md{ font-size:13px; line-height:1.4; }
  .report-preview-word.sm{ font-family:'Nunito', sans-serif; font-weight:700; font-size:11.5px; line-height:1.45; }
  .report-preview-arrow{
    align-self:center; flex:0 0 auto;
    font-size:16px; font-weight:700;
    color: var(--ink-soft);
  }
  .report-reasons{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px; }
  .report-reason-btn{
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12.5px;
    padding:8px 12px;
    border-radius:12px;
    background: var(--bg); color: var(--ink-soft);
    border:2px solid var(--line);
    cursor:pointer;
  }
  .report-reason-btn.active{
    background: var(--cat-active-bg); color: var(--blue-dark); border-color: var(--blue);
  }
  .report-comment{
    font-family:'Nunito', sans-serif; font-size:13.5px;
    resize:vertical;
    user-select:text;
  }
  .reports-list{
    display:flex; flex-direction:column; gap:12px;
    padding-right:2px;
    max-height: min(56vh, 420px);
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }
  .reports-empty{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:26px 2px;
    text-align:center;
    font-family:'Nunito', sans-serif; font-size:13px; color: var(--ink-soft);
  }
  .reports-empty-icon{ font-size:26px; line-height:1; margin-bottom:4px; }
  .reports-empty strong{ font-family:'Fredoka', sans-serif; font-size:15px; color: var(--ink); }
  .reports-empty img.emoji{ width:26px; height:26px; margin:0; }

  .report-item{
    padding:13px 14px;
    border-radius:16px;
    background: var(--bg-soft);
    border:2px solid var(--line);
    /* Un liseré rouge à gauche : la pile se lit d'un coup d'œil comme une
       liste de choses à traiter, sans alourdir chaque ligne. */
    border-left:4px solid var(--red);
  }
  /* Les trois lignes partagent une colonne d'intitulés, pour que les valeurs
     s'alignent au lieu de partir en escalier. */
  .report-item-line{
    display:grid; grid-template-columns: 54px 1fr; align-items:baseline; gap:8px;
    padding:2px 0;
    font-family:'Nunito', sans-serif; font-size:13.5px; line-height:1.45;
  }
  .report-item-key{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:11.5px;
    text-transform:uppercase; letter-spacing:0.03em;
    color: var(--ink-soft);
  }
  .report-item-value{ font-weight:700; color: var(--ink); overflow-wrap:anywhere; }
  .report-item-sep{ color: var(--ink-soft); font-weight:600; }
  .report-item-reason{
    display:inline-block;
    padding:3px 10px;
    border-radius:9px;
    background: var(--red-bg); color: var(--red-ink);
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12px;
  }
  /* Tous les motifs ne sont pas des fautes : la couleur dit lequel on lit. */
  .report-item-reason[data-reason="doublon"]{ background: var(--gold-bg); color: var(--gold-ink); }
  .report-item-reason[data-reason="traduction"]{ background: var(--orange-bg); color: var(--orange-ink); }
  .report-item-reason[data-reason="autre"]{ background: var(--cat-active-bg); color: var(--blue-dark); }
  /* Le liseré reprend la couleur du motif, pour trier la pile de loin. */
  .report-item[data-reason="doublon"]{ border-left-color: var(--gold); }
  .report-item[data-reason="traduction"]{ border-left-color: var(--orange); }
  .report-item[data-reason="autre"]{ border-left-color: var(--blue); }
  .report-item-comment{
    font-family:'Nunito', sans-serif; font-size:13px; font-style:italic; color: var(--ink);
    line-height:1.5;
    padding:9px 11px; margin-top:10px;
    border-radius:12px;
    background: var(--bg);
    border:1px solid var(--line);
    overflow-wrap:anywhere;
  }
  .report-item-actions{ display:flex; gap:8px; margin-top:12px; }
  .report-item-actions .modal-btn{ font-size:12.5px; padding:10px 9px; border-radius:12px; }
  .report-item-actions .modal-btn.ghost{
    background: var(--bg); color: var(--ink-soft);
    border:2px solid var(--line); border-bottom:4px solid var(--line);
  }
  .report-item-actions .modal-btn:active{ transform: translateY(2px); }

  /* Portrait tablets (iPad and the like): the study column kept its phone
     width and left the lower half of the screen empty, so it grows here.
     Landscape tablets and computers are too short for a taller card and
     keep the default size. */
  @media (min-width: 700px) and (min-height: 1000px) and (orientation: portrait){
    .info-row, .stage, .typing-row, .typing-feedback, .actions, .util-row, .progress-wrap{ max-width: 500px; }
    .stage{ height: 52vh; max-height: 600px; }
    .word{ font-size: 38px; }
    .word.word-md{ font-size: 31px; }
    .word.word-lg{ font-size: 23px; }
  }