:root{
    --paper:#E8E3D8;
    --paper-fiber:#DED8C8;
    --card-face:#F7F3E8;
    --ink:#1F2E3D;
    --ink-soft:#4A5A68;
    --indigo:#2C4A6E;
    --indigo-deep:#1B3049;
    --hanko:#B23A2E;
    --hanko-deep:#8E2C22;
    --gold:#A88138;
    --leaf:#5B7553;
    --leaf-deep:#445A40;
    --line: rgba(31,46,61,0.14);
  }

  *{box-sizing:border-box;}

  html,body{
    margin:0; padding:0; height:100%;
    background:
      radial-gradient(ellipse at 20% -10%, rgba(255,255,255,0.35), transparent 45%),
      var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
  }

  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    opacity:0.5;
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.012) 3px),
      repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.012) 3px);
    z-index:0;
  }

  .app{
    position:relative; z-index:1;
    min-height:100%;
    display:flex; flex-direction:column; align-items:center;
    padding:28px 16px 40px;
    max-width:640px;
    margin:0 auto;
  }

  /* ---------- Header ---------- */
  .header{
    width:100%;
    display:flex; align-items:baseline; justify-content:space-between;
    margin-bottom:22px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
  }
  .brand{
    display:flex; align-items:center; gap:10px;
  }
  .brand .glyph{
    font-family:'Noto Serif JP', serif;
    font-weight:900;
    font-size:26px;
    color:var(--hanko);
    line-height:1;
  }
  .brand h1{
    font-family:'Lora', serif;
    font-size:16px;
    font-weight:600;
    margin:0;
    letter-spacing:0.01em;
    color:var(--ink);
  }
  .brand small{
    display:block;
    font-family:'Inter',sans-serif;
    font-size:10px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-top:1px;
  }
  .deck-count{
    font-family:'Inter',sans-serif;
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    text-align:right;
  }
  .deck-count b{
    display:block;
    font-family:'Lora', serif;
    font-size:20px;
    font-weight:600;
    color:var(--indigo-deep);
    letter-spacing:0;
  }

  /* ---------- Level filter chips ---------- */
  .levels{
    display:flex; gap:8px; flex-wrap:wrap;
    justify-content:center;
    margin-bottom:22px;
  }
  .chip{
    font-family:'Inter',sans-serif;
    font-size:12px; font-weight:600;
    letter-spacing:0.04em;
    padding:7px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.4);
    color:var(--ink-soft);
    cursor:pointer;
    transition:all .18s ease;
    user-select:none;
  }
  .chip:hover{ border-color:var(--indigo); color:var(--indigo-deep); }
  .chip.active{
    background:var(--indigo-deep);
    border-color:var(--indigo-deep);
    color:#F2EEE2;
  }

  /* ---------- Progress rail ---------- */
  .rail{
    width:100%; max-width:400px;
    height:3px;
    background:var(--line);
    border-radius:2px;
    margin-bottom:30px;
    overflow:hidden;
  }
  .rail-fill{
    height:100%;
    background:linear-gradient(90deg, var(--gold), var(--hanko));
    width:0%;
    transition:width .25s ease;
  }

  /* ---------- Card stage ---------- */
  .stage{
    position:relative;
    width:100%;
    max-width:340px;
    aspect-ratio: 3 / 4.3;
    margin-bottom:26px;
  }

  .deck-shadow{
    position:absolute; inset:0;
    border-radius:14px;
  }
  .deck-shadow span{
    position:absolute; inset:0;
    border-radius:14px;
    background:var(--card-face);
    border:1px solid var(--line);
  }
  .deck-shadow span:nth-child(1){ transform:translate(6px,10px) rotate(2.2deg); opacity:.55; }
  .deck-shadow span:nth-child(2){ transform:translate(3px,5px) rotate(1.1deg); opacity:.75; }

  .card{
    position:relative;
    width:100%; height:100%;
    perspective:1600px;
    cursor:pointer;
  }
  .card-inner{
    position:relative;
    width:100%; height:100%;
    transform-style:preserve-3d;
    transition:transform .55s cubic-bezier(.4,.2,.2,1);
  }
  .card.flipped .card-inner{ transform:rotateY(180deg); }

  .face{
    position:absolute; inset:0;
    backface-visibility:hidden;
    border-radius:14px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:30px 22px;
    text-align:center;
    box-shadow:0 18px 40px -14px rgba(31,46,61,0.35), 0 2px 0 rgba(255,255,255,0.4) inset;
  }

  .face.front{
    background:var(--card-face);
    border:1px solid var(--line);
  }
  .face.front::before{
    content:"";
    position:absolute; inset:10px;
    border:1px solid rgba(44,74,110,0.16);
    border-radius:8px;
    pointer-events:none;
  }

  .face.back{
    background:var(--indigo-deep);
    background-image:
      radial-gradient(circle at 85% 12%, rgba(255,255,255,0.06), transparent 40%),
      radial-gradient(circle at 10% 90%, rgba(255,255,255,0.05), transparent 45%);
    color:#F2EEE2;
    transform:rotateY(180deg);
  }
  .face.back::before{
    content:"";
    position:absolute; inset:10px;
    border:1px solid rgba(242,238,226,0.18);
    border-radius:8px;
    pointer-events:none;
  }

  /* Hanko stamp */
  .hanko{
    position:absolute;
    top:16px; right:16px;
    width:46px; height:46px;
    border-radius:6px;
    background:var(--hanko);
    color:#F7F3E8;
    display:flex; align-items:center; justify-content:center;
    font-family:'Noto Serif JP',serif;
    font-weight:700;
    font-size:14px;
    letter-spacing:0.02em;
    transform:rotate(-6deg);
    box-shadow:0 3px 8px rgba(178,58,46,0.4);
    -webkit-mask-image: radial-gradient(circle, black 96%, transparent 100%);
    mask-image: radial-gradient(circle, black 96%, transparent 100%);
    opacity:0.92;
  }

  /* Card ID shown in the top-left corner */
  .card-id{
    position:absolute;
    top:12px; left:12px;
    min-width:28px; height:28px;
    border-radius:6px;
    background:rgba(0,0,0,0.06);
    color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    font-family:'Inter',sans-serif;
    font-size:12px; font-weight:700;
    padding:4px 8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
    z-index:6;
  }
  .face.back .card-id{
    color:#F2EEE2;
    background:rgba(255,255,255,0.06);
  }
  .face.back .hanko{
    background:var(--hanko);
  }

  .kanji{
    font-family:'Noto Serif JP', serif;
    font-weight:700;
    font-size:clamp(40px, 12vw, 58px);
    line-height:1.15;
    color:var(--ink);
    margin-bottom:14px;
    word-break:keep-all;
  }
  .hiragana{
    font-family:'Noto Serif JP', serif;
    font-weight:400;
    font-size:19px;
    color:var(--indigo);
    letter-spacing:0.03em;
  }
  .front-hint{
    position:absolute;
    bottom:16px;
    font-family:'Inter',sans-serif;
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
    opacity:0.7;
  }

  .english{
    font-family:'Lora', serif;
    font-weight:600;
    font-size:clamp(22px, 6.4vw, 28px);
    line-height:1.3;
    margin-bottom:12px;
  }
  .romaji{
    font-family:'Lora', serif;
    font-style:italic;
    font-weight:400;
    font-size:16px;
    color:rgba(242,238,226,0.72);
    margin-bottom:4px;
  }
  .back-tag{
    margin-top:18px;
    font-family:'Inter',sans-serif;
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:rgba(242,238,226,0.55);
  }

  /* ---------- Nav row ---------- */
  .nav{
    display:flex; align-items:center; gap:18px;
    margin-bottom:20px;
  }
  .nav-btn{
    width:42px; height:42px;
    border-radius:50%;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.5);
    color:var(--ink);
    font-size:16px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:all .15s ease;
  }
  .nav-btn:hover:not(:disabled){ background:var(--indigo-deep); color:#F2EEE2; border-color:var(--indigo-deep); }
  .nav-btn:active:not(:disabled){ transform:scale(0.94); }
  .nav-btn:disabled{ opacity:0.4; cursor:default; }

  .flip-btn{
    font-family:'Inter',sans-serif;
    font-size:12px; font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:11px 22px;
    border-radius:999px;
    border:1px solid var(--indigo-deep);
    background:transparent;
    color:var(--indigo-deep);
    cursor:pointer;
    transition:all .15s ease;
  }
  .flip-btn:hover{ background:var(--indigo-deep); color:#F2EEE2; }
  .flip-btn.active{
    background:var(--indigo-deep);
    color:#F2EEE2;
  }

  /* ---------- Quiz mode ---------- */
  .quiz-toggle.active{
    background:var(--indigo-deep);
    color:#F2EEE2;
  }
  .quiz-options{
    display:none;
    width:100%;
    max-width:520px;
    margin-top:22px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    position:relative;
    z-index:5;
  }
  .quiz-mode .quiz-options{display:grid;}
  .quiz-mode .hiragana{margin-bottom:0;}
  .deck-end-options{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    max-width:260px;
    margin:16px auto 0;
    z-index:5;
  }
  .deck-end-divider{
    width:100%;
    height:1px;
    background:linear-gradient(90deg, rgba(31,46,61,0.08), rgba(31,46,61,0.22), rgba(31,46,61,0.08));
    margin:8px 0 14px;
  }
  .deck-end-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    max-width:220px;
    align-items:center;
    margin:0 auto;
  }
  .deck-end-btn{
    appearance:none;
    border:1px solid rgba(31,46,61,0.08);
    background:linear-gradient(180deg, #415f86 0%, var(--indigo-deep) 100%);
    color:#F2EEE2;
    border-radius:999px;
    padding:12px 18px;
    min-height:44px;
    width:100%;
    max-width:220px;
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(27,48,73,0.18);
    transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  }
  .deck-end-btn.secondary{
    background:linear-gradient(180deg, rgba(44,74,110,0.07) 0%, rgba(44,74,110,0.12) 100%);
    color:var(--indigo-deep);
    border-color:rgba(44,74,110,0.18);
    box-shadow:0 6px 16px rgba(27,48,73,0.08);
  }
  .deck-end-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(27,48,73,0.2); }
  .deck-end-btn:active{ transform:translateY(0); }
  .quiz-option{
    appearance:none;
    border:1px solid rgba(31,46,61,0.18);
    background:rgba(255,255,255,0.72);
    color:var(--ink);
    border-radius:9px;
    padding:11px 9px;
    min-height:48px;
    font-family:'Inter',sans-serif;
    font-size:clamp(11px,2.2vw,14px);
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,transform .1s ease;
  }
  .quiz-option:hover{border-color:var(--indigo);}
  .quiz-option:active{transform:scale(.98);}
  .quiz-option.correct{background:rgba(91,117,83,.32);border-color:var(--leaf);color:var(--leaf-deep);}
  .quiz-option.wrong{background:rgba(178,58,46,.28);border-color:var(--hanko);color:var(--hanko-deep);}
  .quiz-option:disabled{cursor:default;}
  .quiz-feedback{
    display:block;
    visibility:hidden;
    min-height:32px;
    line-height:1.4;
    margin-top:10px;
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.03em;
  }
  .quiz-feedback.show{visibility:visible;}
  .quiz-feedback.correct{color:var(--leaf-deep);}
  .quiz-feedback.wrong{color:var(--hanko-deep);}
  .quiz-mode .face.front{padding:24px 18px;}

  /* ---------- Judge buttons ---------- */
  .judge{
    display:flex; gap:12px;
    width:100%; max-width:400px;
  }
  .judge button{
    flex:1;
    font-family:'Inter',sans-serif;
    font-size:13px; font-weight:700;
    letter-spacing:0.03em;
    padding:15px 10px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .judge button:active{ transform:translateY(2px); }
  .judge .again{
    background:rgba(255,255,255,0.18);
    color:var(--hanko-deep);
    border:1px solid rgba(31,46,61,0.12);
  }
  .judge .again:hover:not(.active){ background:rgba(178,58,46,0.08); }
  .judge .again.active{
    background:rgba(178,58,46,0.2);
    box-shadow:0 0 0 2px rgba(178,58,46,0.12);
    border-color:rgba(178,58,46,0.5);
  }
  .judge .again.active:hover{
    background:rgba(178,58,46,0.24);
  }
  .judge .know{
    background:rgba(255,255,255,0.18);
    color:var(--leaf-deep);
    border:1px solid rgba(31,46,61,0.12);
  }
  .judge .know:hover:not(.active){ background:rgba(91,117,83,0.08); }
  .judge .know.active{
    background:rgba(91,117,83,0.24);
    box-shadow:0 0 0 2px rgba(91,117,83,0.12);
    border-color:rgba(91,117,83,0.55);
  }
  .judge .know.active:hover{
    background:rgba(91,117,83,0.28);
  }
  .judge span.big{ font-size:17px; }
  .judge span.small{ font-size:10px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.75; }

  /* ---------- Stats ---------- */
  .stats{
    margin-top:26px;
    display:flex; gap:22px;
    font-family:'Inter',sans-serif;
    font-size:11px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .stats b{
    display:block;
    font-family:'Lora',serif;
    font-size:18px;
    text-transform:none;
    letter-spacing:0;
  }
  .stats .know-c b{ color:var(--leaf-deep); }
  .stats .again-c b{ color:var(--hanko-deep); }
  .stats .left-c b{ color:var(--indigo-deep); }

  .reset-link{
    margin-top:18px;
    background:none; border:none;
    font-family:'Inter',sans-serif;
    font-size:11px;
    letter-spacing:0.06em;
    text-decoration:underline;
    text-underline-offset:3px;
    color:var(--ink-soft);
    cursor:pointer;
  }
  .reset-link:hover{ color:var(--hanko-deep); }

  .done-msg{
    font-family:'Lora',serif;
    font-size:15px;
    color:var(--ink-soft);
    text-align:center;
    padding:40px 20px;
  }


  /* ---------- Wide-screen landscape card ---------- */
  @media (min-width: 800px) and (orientation: landscape){
    .app{
      max-width: 1280px;
      padding: 24px 36px 30px;
    }

    .header{
      margin-bottom:16px;
      padding-bottom:10px;
    }

    .levels{
      margin-bottom:14px;
    }

    .rail{
      max-width:720px;
      margin-bottom:20px;
    }

    /* On wide screens the flashcard becomes a landscape card,
       giving the Japanese and translation much more horizontal room. */
    .stage{
      width:min(78vw, 900px);
      max-width:900px;
      aspect-ratio: 16 / 9;
      margin-bottom:20px;
    }

    .face{
      padding:28px 56px;
    }

    .kanji{
      font-size:clamp(56px, 7vw, 92px);
      margin-bottom:12px;
    }

    .hiragana{
      font-size:clamp(22px, 2.2vw, 30px);
    }

    .english{
      font-size:clamp(30px, 3.2vw, 44px);
      line-height:1.25;
      max-width:90%;
    }

    .romaji{
      font-size:clamp(18px, 1.7vw, 24px);
    }

    .hanko{
      top:20px;
      right:22px;
      width:52px;
      height:52px;
      font-size:16px;
    }

    .front-hint{
      bottom:18px;
      font-size:11px;
    }

    .nav{
      margin-bottom:14px;
    }

    .judge{
      max-width:700px;
    }

    .judge button{
      padding:12px 18px;
    }

    .stats{
      margin-top:18px;
    }

    .reset-link{
      margin-top:12px;
    }
  }

  @media (max-width:380px){
    .judge span.big{ font-size:15px; }
    .stats{ gap:16px; }
  }

  /* View toggle slider (Card / List) placed in the header */
  .view-toggle{
    display:flex; align-items:center; gap:12px; justify-content:flex-end;
    width:220px; height:36px; padding:6px; border-radius:999px; background:rgba(255,255,255,0.6);
    border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
    cursor:pointer; transition:box-shadow .12s ease, transform .12s ease;
  }
  .view-toggle:focus{ outline:2px solid rgba(44,74,110,0.12); }
  .view-toggle .vt-label{ font-family:'Inter',sans-serif; font-size:13px; color:var(--ink-soft); width:48px; text-align:center; user-select:none; }
  .view-toggle .vt-track{ position:relative; flex:1 1 80px; height:22px; background:rgba(31,46,61,0.04); border-radius:999px; display:block; padding:3px; }
    /* position the knob absolutely for reliable movement */
    .view-toggle .vt-knob{ position:absolute; left:3px; top:50%; transform:translateY(-50%); width:46px; height:16px; border-radius:999px; background:#fff; box-shadow:0 6px 18px rgba(27,48,73,0.08); transition:left .18s cubic-bezier(.2,.9,.3,1), background .12s ease; }
    .view-toggle.is-list .vt-knob{ left: calc(100% - 3px - 46px); background:var(--indigo-deep); }
    .view-toggle .vt-track{ transition:background .18s ease; }
    .view-toggle.is-list .vt-track{ background:linear-gradient(90deg, rgba(44,74,110,0.06), rgba(27,48,73,0.12)); }
    .view-toggle.is-list .vt-label.vt-right{ color:var(--indigo-deep); font-weight:700; }
    .view-toggle:not(.is-list) .vt-label.vt-left{ color:var(--indigo-deep); font-weight:700; }

  /* reposition header elements so toggle can sit to the right */
  .header{ width:100%; display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--line); }
  .header .deck-count{ display:flex; flex-direction:column; align-items:flex-end; }
  .header .deck-count + .view-toggle{ margin-left:12px; }

  .hidden{ display:none !important; }

  /* extra visual separation for levels area */
  .levels{ padding-top:12px; margin-top:6px; border-top:1px dashed rgba(31,46,61,0.06); }

  /* subtle divider above the card stage to separate controls from content */
  .stage{ margin-top:12px; padding-top:12px; border-top:1px solid rgba(31,46,61,0.04); }

  /* make active level chip more prominent */
  .chip.active{ box-shadow:0 6px 16px rgba(27,48,73,0.08); }


  /* List view */
  .list-area{ width:100%; max-width:640px; margin:6px 0 18px; }
  .list-area ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
  .list-item{ display:flex; align-items:center; padding:10px 12px; background:rgba(255,255,255,0.6); border-radius:10px; border:1px solid var(--line); cursor:pointer; }
    .list-item.header{ font-weight:700; text-transform:uppercase; font-size:12px; color:var(--ink-soft); }
    .list-item .col{ padding:6px 8px; }
    .list-item .id-col{ width:56px; flex:0 0 56px; font-family:'Inter',sans-serif; font-weight:700; }
    .list-item .eng-col{ flex:1 1 40%; font-family:'Lora',serif; }
    .list-item .jp1-col{ flex:0 0 120px; font-family:'Noto Serif JP',serif; font-weight:700; color:var(--indigo-deep); }
    .list-item .jp2-col{ flex:0 0 120px; font-family:'Noto Serif JP',serif; font-weight:400; color:var(--indigo); }
    .list-item .action-col{ width:72px; flex:0 0 72px; display:flex; align-items:center; justify-content:center; }
    .list-kan-btn{ appearance:none; border:1px solid var(--line); background:transparent; padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:700; }
    .list-kan-btn.on{ background:rgba(91,117,83,0.12); color:var(--leaf-deep); border-color:rgba(91,117,83,0.2); }
    .list-item.header .col{ font-weight:700; }

  /* wrapper for card-related elements so we can hide/show easily */
  #cardArea{ width:100%; display:flex; flex-direction:column; align-items:center; }

  .bottom-actions{ margin-top:12px; }


.understreg {
    border-bottom: 2px solid gray;
  
}
.overstreg {
    border-top: 2px solid gray;   
}

.skift {
    border-left: 2px solid gray; 
    transform: scaleY(1.02);   
}