* { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,20 A20,20 0 0,0 40,20' fill='none' stroke='%235c3d1e' stroke-width='0.8' opacity='0.15'/%3E%3Cpath d='M4,20 A16,16 0 0,0 36,20' fill='none' stroke='%235c3d1e' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E") 0 0 / 40px 20px repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,20 A20,20 0 0,0 40,20' fill='none' stroke='%235c3d1e' stroke-width='0.8' opacity='0.15'/%3E%3Cpath d='M4,20 A16,16 0 0,0 36,20' fill='none' stroke='%235c3d1e' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E") 20px 10px / 40px 20px repeat,
        #fdf6e3;
      box-shadow: inset 0 0 80px rgba(92,61,30,0.15);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 16px 16px;
      color: #333;
    }

    
    h1 {
      font-size: 2.4rem;
      color: #5c3d1e;
      font-weight: 900;
      letter-spacing: 0.05em;
      line-height: 1.25;
      margin-bottom: var(--game-title-mb);
      text-align: center;
      width: 100%;
      padding-left: 0.8em;
    }
    
    @media (max-width: 479px) {
      h1 { font-size: 2rem; margin-bottom: 12px; }
    }

    .subtitle {
      font-size: 1.05rem;
      color: #e09200;
      font-weight: 700;
      letter-spacing: 0.06em;
      margin-bottom: var(--game-subtitle-mb);
    }

    
    body:has(#collection-screen.active) .subtitle { margin-bottom: 10px; }
    .collection-topnav { margin-bottom: -2px; }

    

    .page-subject-label {
      display: none;
    }

    .title-area {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .title-area.hidden {
      display: none;
    }

    .status-subject {
      display: none;
    }

    
    .page-tabs {
      display: flex;
      width: 100%;
      max-width: 420px;
      justify-content: flex-end;
      margin-top: -24px;   
      margin-bottom: 18px;
    }
    
    h1 > .subtitle {
      display: block;
      line-height: 1.8;
      letter-spacing: 0.06em;
      margin-left: calc(-0.8 * 2.4rem);  
      margin-top: 4px;                    
      margin-bottom: 0;
    }
    h1:has(> .subtitle) { margin-bottom: 20px; }  
    @media (max-width: 479px) {
      h1 > .subtitle { margin-left: -22px; margin-top: 12px; }  
    }
    .page-tabs a {
      padding: 6px 18px;
      border: 1px solid #e2d6bd;
      border-radius: 999px;
      background: #f3ead8;
      color: #999;   
      font-size: var(--game-pagetab-font);
      font-weight: bold;
      letter-spacing: 0.04em;
      text-decoration: none;
      transition: background 0.15s, color 0.15s;
    }
    .page-tabs a:hover { background: #ece0c8; color: #666; }
    .page-tabs .ar { font-weight: 400; opacity: .65; margin-left: .15em; }

    
    .subject-tabs {
      display: flex;
      width: 100%;
      max-width: 420px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      margin-bottom: 16px;
    }

    .subject-tab {
      flex: 1;
      padding: var(--game-tab-pad-y) 0;
      border: none;
      background: #e8dcc8;
      color: #999;
      font-size: var(--game-tab-font);
      font-weight: bold;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      letter-spacing: 0.05em;
    }
    
    @media (max-width: 479px) {
      .subject-tab { padding: 16px 0; font-size: 1.15rem; }
      .subject-tab:not(.active) { color: #7a6a4c; }
    }

    
    #tab-nonstop { flex: 1.6; }

    .subject-tab.active {
      background: #f0a500;
      color: #fff;
    }

    .subject-tab:not(.active):hover {
      background: #ddd0b8;
      color: #666;
    }

    
    .screen { display: none; width: 100%; max-width: 420px; }
    .screen.active { display: flex; flex-direction: column; align-items: center; }

    
    #start-screen { gap: 12px; text-align: center; margin-bottom: 16px; }

    

    .preview-mini {
      width: 100%;
      background: #fff;
      border-radius: 14px;
      padding: 14px 16px 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.07);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .preview-label {
      font-size: 0.8rem;
      color: #999;
    }

    .preview-label .subject-name {
      color: #e09200;
      font-weight: bold;
    }

    .preview-reading {
      font-size: 1.15rem;
      font-weight: bold;
      color: #3a2a00;
      letter-spacing: 0.1em;
    }

    .preview-slots {
      display: flex;
      gap: 5px;
      justify-content: center;
    }

    .preview-slot {
      width: 30px;
      height: 30px;
      border-radius: 6px;
      border: 1.5px dashed #ccc;
      background: #fafafa;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      font-weight: bold;
    }

    .preview-slot.filled {
      border-color: #f0a500;
      background: #fff9e6;
      color: #3a2a00;
      border-style: solid;
    }

    .preview-grid-wrap {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      width: 64%;
      max-width: 190px;
    }

    .preview-cell {
      aspect-ratio: 1;
      border-radius: 10px;
      background: #fdf6e3;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      font-weight: bold;
      color: #3a2a00;
      box-shadow: 0 2px 5px rgba(0,0,0,0.07);
    }

    .preview-cell.used {
      background: #e8e0d0;
      color: #aaa;
      box-shadow: none;
    }

    .preview-hint {
      font-size: 0.8rem;
      color: #bbb;
    }

    
    #game-screen { gap: 8px; }

    .status-bar {
      display: flex;
      justify-content: space-between;
      width: 100%;
      font-size: 0.85rem;
      color: #666;
      padding: 0 4px;
    }

    .question-box {
      background: #fff;
      border-radius: 14px;
      padding: 12px 24px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
      width: 100%;
    }

    .question-label {
      font-size: 0.82rem;
      color: #999;
      margin-bottom: 6px;
    }

    .question-label .subject-name {
      color: #e09200;
      font-weight: bold;
    }

    .question-text {
      font-size: var(--game-font-question);
      font-weight: bold;
      color: #3a2a00;
      letter-spacing: 0.15em;
    }

    
    .reading-seg { display: inline-block; }

    
    #nonstop-result-screen {
      gap: 16px;
      text-align: center;
      padding-bottom: 28px;
    }

    
    .ns-bignum {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1200;
      pointer-events: none;
      font-size: clamp(6rem, 34vw, 11rem);
      font-weight: bold;
      line-height: 1;
      background: linear-gradient(90deg, #e53935, #ff6f00, #f0a500, #4caf50, #1d9bf0, #9c27b0, #e53935);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .ns-bignum.show {
      display: flex;
      animation: perfectPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), rainbowShift 1.5s linear infinite;
    }

    
    .collection-topnav {
      width: 100%;
      text-align: center;
      font-size: 0.88rem;
      margin-bottom: 2px;
    }
    .collection-topnav a {
      color: #8a7657;
      cursor: pointer;
      text-decoration: none;
    }
    .collection-topnav a:hover { text-decoration: underline; }

    .answer-display {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
      min-height: 56px;
      align-items: center;
    }

    .answer-slot {
      width: 52px;
      height: 52px;
      border-radius: 10px;
      border: 2px dashed #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--game-font-slot);
      font-weight: bold;
      background: #fafafa;
      transition: all 0.2s;
    }

    .answer-slot.filled {
      border-color: #f0a500;
      background: #fff9e6;
      color: #3a2a00;
    }

    .answer-slot.correct {
      border-color: #4caf50;
      background: #e8f5e9;
      color: #1b5e20;
      animation: pop 0.25s ease;
    }

    .answer-slot.wrong {
      border-color: #e53935;
      background: #ffebee;
      color: #b71c1c;
      animation: shake 0.3s ease;
    }

    
    .answer-slot.fixed { animation: none; }

    @keyframes pop {
      0%   { transform: scale(1); }
      50%  { transform: scale(1.15); }
      100% { transform: scale(1); }
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25%       { transform: translateX(-6px); }
      75%       { transform: translateX(6px); }
    }

    
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
    }

    .cell {
      aspect-ratio: 1;
      border-radius: 14px;
      font-size: var(--game-font-cell);
      font-weight: bold;
      border: none;
      cursor: pointer;
      background: #fff;
      color: #3a2a00;
      box-shadow: 0 3px 8px rgba(0,0,0,0.1);
      transition: transform 0.1s, background 0.15s, box-shadow 0.1s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cell:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 5px 14px rgba(0,0,0,0.14);
    }

    .cell:active:not(:disabled) { transform: scale(0.94); }

    .cell.used {
      background: #e0e0e0;
      color: #aaa;
      cursor: default;
      box-shadow: none;
    }

    .cell.correct-flash { background: #4caf50; color: #fff; }
    .cell.wrong-flash   { background: #e53935; color: #fff; }

    
    .feedback {
      font-size: 1.1rem;
      font-weight: bold;
      min-height: 28px;
      text-align: center;
    }

    .feedback.ok  { color: #2e7d32; }
    .feedback.bad { color: #c62828; }

    
    #result-screen { gap: 16px; text-align: center; margin-bottom: 16px; }

    .result-card {
      background: #fff;
      border-radius: 16px;
      padding: 24px 28px;
      box-shadow: 0 3px 12px rgba(0,0,0,0.1);
      width: 100%;
    }

    .result-title {
      font-size: 1.3rem;
      font-weight: bold;
      color: #5c3d1e;
      margin-bottom: 16px;
    }

    .result-row {
      display: flex;
      justify-content: space-between;
      font-size: 1rem;
      padding: 6px 0;
      border-bottom: 1px solid #f0e8d0;
    }

    .result-row:last-child { border-bottom: none; }

    .result-val { font-weight: bold; color: #3a2a00; }

    
    #ranking-screen { gap: 14px; }

    .ranking-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
    }

    .ranking-table th {
      background: #5c3d1e;
      color: #fff;
      padding: 8px 10px;
      text-align: center;
    }

    .ranking-table td {
      background: #fff;
      padding: 8px 10px;
      text-align: center;
      border-bottom: 1px solid #f0e8d0;
    }

    .ranking-table tr:nth-child(even) td { background: #fdf6e3; }

    .ranking-table tr.highlight td { background: #fff9e6; border-bottom-color: #f0a500; }
    .ranking-table tr.highlight:nth-child(even) td { background: #fff6d6; }
    .ranking-table tr.highlight td:first-child { border-left: 3px solid #f0a500; }

    .top-ranking-fold {
      width: 100%;
      margin-top: 2px;
    }

    .top-ranking-fold summary {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 9px 20px;
      border-radius: 50px;
      border: none;
      font-size: 1rem;
      font-family: system-ui, sans-serif;
      letter-spacing: 0.05em;
      font-weight: bold;
      cursor: pointer;
      list-style: none;
      user-select: none;
      background: #f5e6c8;
      color: #5c3d1e;
      transition: background 0.15s;
    }

    .top-ranking-fold summary::-webkit-details-marker { display: none; }
    .top-ranking-fold summary:hover { background: #f0dbb5; }
    .top-ranking-fold[open] summary { background: #e8d4b0; color: #5c3d1e; margin-bottom: 8px; }

    .top-ranking-more {
      text-align: center;
      padding: 6px 0;
    }

    .top-ranking-more a {
      font-size: 0.875rem;
      color: #999;
      cursor: pointer;
      text-decoration: none;
    }

    .top-ranking-more a:hover { color: #5c3d1e; }

    .ranking-table-mini { font-size: 0.875rem; }
    .ranking-table-mini th { padding: 6px 8px; }
    .ranking-table-mini td { padding: 6px 8px; }

    .ranking-section-label {
      font-size: 0.9rem;
      font-weight: bold;
      color: #5c3d1e;
      margin-top: 20px;
      margin-bottom: 6px;
      padding-left: 2px;
      align-self: flex-start;
    }

    
    #ns-record-section { width: 100%; }
    .ns-rec-card { text-align: center; }
    .ns-rec-best {
      font-size: 2.6rem;
      font-weight: bold;
      color: #f0a500;
      line-height: 1.15;
    }
    .ns-rec-collect {
      font-size: 0.8rem;
      color: #8a7657;
      margin-top: 8px;
    }
    .ns-rec-collect strong { color: #5c3d1e; }

    
    .btn {
      padding: 14px 32px;
      border-radius: 50px;
      border: none;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      transition: transform 0.1s, filter 0.15s;
      letter-spacing: 0.05em;
    }

    .btn:active { transform: scale(0.96); }

    .btn-primary {
      background: #f0a500;
      color: #fff;
    }

    .btn-primary:hover { filter: brightness(1.12); }

    .btn-orange {
      background: #f0a500;
      color: #fff;
    }
    .btn-orange:hover { filter: brightness(1.12); }

    
    
    #k7-done-card{display:none}
    
    
    #result-screen.active[data-k7done="1"]{
      display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;
    }
    
    @media (max-width: 479px) {
      #result-screen.active[data-k7done="1"] {
        justify-content: center;
        min-height: 100vh;
        padding-bottom: 15vh;
      }
      
      body:has(#result-screen.active[data-k7done="1"]) h1 {
        margin-top: 15vh;
      }
    }
    #result-screen[data-k7done="1"] #k7-done-card{
      display:flex;flex-direction:column;align-items:center;gap:14px;
      width:100%;max-width:340px;margin:0 auto;background:#fff;border-radius:16px;
      box-shadow:0 3px 12px rgba(0,0,0,0.1);padding:24px 22px 20px;
    }
    
    #result-screen[data-k7done="1"] > *:not(#k7-done-card){display:none!important}
    #k7-done-title,#k7-print-btn-row,#k7-collection-btn-row{display:none}
    #result-screen[data-k7done="1"] #k7-done-title{display:block}
    #result-screen[data-k7done="1"] #k7-print-btn-row{display:flex}
    
    #result-screen[data-k7done="1"] #k7-collection-btn-row{display:flex}
    
    .k7-done-dots{display:flex;gap:8px}
    .k7-done-dots i{display:block;width:20px;height:20px;border-radius:5px;font-style:normal}
    .k7-done-dots i.ok{background:#f0a500;border:1.5px solid #e09200}
    .k7-done-dots i.amber{background:#fff;border:1.5px solid #d4b896}
    
    .k7-done-again,.k7-done-top{appearance:none;background:none;border:none;cursor:pointer;
      font-family:inherit;font-size:1.05rem;color:#8a7657;padding:12px 16px}
    .k7-done-top{font-size:1rem}
    .k7-done-again{margin-top:8px}
    .k7-done-again:hover,.k7-done-top:hover{text-decoration:underline}
    
    #k7-print-btn-row .btn-k7print{border-radius:50px;margin-top:4px;padding:20px 34px;font-size:1.15rem;font-weight:700;letter-spacing:.05em}
    .k7-done-title {
      font-size: 1.7rem;
      font-weight: bold;
      color: #5c3d1e;
      letter-spacing: 0.04em;
      margin: 0;
    }
    .btn-k7print { background: #f0a500; color: #fff; }
    .btn-k7print:hover { filter: brightness(1.12); }

    .btn-secondary { background: #eee; color: #555; }
    .btn-secondary:hover { background: #f5f5f5; }

    .btn-danger {
      background: #e53935;
      color: #fff;
      font-size: 0.85rem;
      padding: 8px 18px;
    }

    .btn-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }

    
    #home-entry-row .btn { flex: 1 1 auto; max-width: 240px; }

    
    @media (max-width: 390px) {
      body { padding: 20px 12px 12px; }
      .page-tabs { margin-top: -8px; }
      h1 { font-size: 1.7rem; }
      .question-text { font-size: 1.7rem; }
      .result-card { padding: 20px 16px; }
      .btn { padding: 20px 30px; font-size: 1.15rem; }
      .top-ranking-fold summary { font-size: 1.15rem; }
      .btn-mode { min-width: 120px; padding: 16px 10px; }
      .ranking-table { font-size: 0.8rem; }
      .ranking-table th { padding: 6px 6px; }
      .ranking-table td { padding: 6px 6px; }
      .ranking-table-mini { font-size: 0.875rem; }
      .ranking-table-mini th { padding: 5px 5px; }
      .ranking-table-mini td { padding: 5px 5px; }
    }

    

    
    .answer-display.long-8 { gap: 4px; }
    .answer-display.long-8 .answer-slot { width: 48px; height: 48px; font-size: 1.4rem; }

    
    @media (max-width:443px) {
      .answer-display.long-6 { gap: 6px; }
      .answer-display.long-6 .answer-slot {
        width: 44px; height: 44px; font-size: 1.4rem;
      }
      .answer-display.long-7 { gap: 5px; }
      .answer-display.long-7 .answer-slot {
        width: 40px; height: 40px; font-size: 1.3rem;
      }
      .answer-display.long-8 { gap: 4px; }
      .answer-display.long-8 .answer-slot {
        width: 38px; height: 38px; font-size: 1.25rem;
      }
    }

    
    @media (max-width:355px) {
      .answer-display.long-8 { gap: 4px; }
      .answer-display.long-8 .answer-slot { width: 36px; height: 36px; font-size: 1.15rem; }
    }

    
    .btn-share {
      background: #1d9bf0;
      color: #fff;
      font-size: 0.85rem;
      padding: 10px 24px;
    }
    .btn-share:hover { filter: brightness(1.15); }

    
    .timer { display: none; }

    
    .btn-skip {
      background: none;
      border: 1px solid #bbb;
      color: #888;
      font-size: 1rem;
      padding: 8px 20px;
      border-radius: 50px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
      
      margin-bottom: 16px;
    }
    .btn-skip:hover { color: #555; border-color: #888; background: #f5f0e8; }

    
    .mode-btn-row {
      display: flex;
      gap: 12px;
      width: 100%;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn-mode {
      flex: 1;
      min-width: 140px;
      padding: 20px 12px;
      border-radius: 14px;
      border: 2px solid #f0a500;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      background: #fff;
      color: #5c3d1e;
      box-shadow: 0 3px 12px rgba(240,165,0,0.18);
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .btn-mode:hover {
      border-color: #f5b830;
      background: #ffecc8;
      transform: translateY(-2px);
    }

    .btn-mode:active { transform: scale(0.96); }

    .btn-mode .mode-label { font-size: 1.2rem; }

    .btn-mode .mode-desc {
      font-size: 0.9rem;
      color: #aaa;
      font-weight: normal;
    }

    
    @media (max-width:479px) {
      .btn-mode { padding: 16px 14px; gap: 4px; }
      .btn-mode .mode-label { font-size: 1.4rem; font-weight: 900; }
      .btn-mode .mode-desc { font-size: 1rem; }
      .mode-btn-row { margin-top: 20px; }
    }

    
    #handoff-screen {
      gap: 24px;
      text-align: center;
    }

    .handoff-card {
      background: #fff;
      border-radius: 16px;
      padding: 28px 24px;
      box-shadow: 0 3px 12px rgba(0,0,0,0.1);
      width: 100%;
    }

    .handoff-player {
      font-size: 1.6rem;
      font-weight: bold;
      color: #5c3d1e;
      margin-bottom: 8px;
    }

    .handoff-desc {
      font-size: 0.95rem;
      color: #666;
      line-height: 1.7;
    }

    
    #battle-result-screen {
      gap: 16px;
      text-align: center;
    }

    .battle-result-card {
      background: #fff;
      border-radius: 16px;
      padding: 24px 20px;
      box-shadow: 0 3px 12px rgba(0,0,0,0.1);
      width: 100%;
    }

    .battle-result-title {
      font-size: 1.3rem;
      font-weight: bold;
      color: #5c3d1e;
      margin-bottom: 20px;
    }

    .battle-players {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
    }

    .battle-player-col {
      flex: 1;
      border-radius: 12px;
      padding: 16px 12px;
      background: #fdf6e3;
      border: 2px solid #e8dcc8;
    }

    .battle-player-col.winner {
      background: #fff9e6;
      border-color: #f0a500;
    }

    .battle-player-name {
      font-size: 0.85rem;
      color: #888;
      margin-bottom: 8px;
    }

    .battle-score {
      font-size: 1.8rem;
      font-weight: bold;
      color: #3a2a00;
      margin-bottom: 4px;
    }

    .battle-detail {
      font-size: 0.78rem;
      color: #999;
      line-height: 1.6;
    }

    .battle-winner-badge {
      display: inline-block;
      background: #f0a500;
      color: #fff;
      font-size: 0.75rem;
      font-weight: bold;
      padding: 3px 10px;
      border-radius: 50px;
      margin-bottom: 6px;
    }

    .battle-result-msg {
      font-size: 1.1rem;
      font-weight: bold;
      color: #5c3d1e;
      padding: 12px 0 4px;
    }

    
    .medal-display {
      font-size: 6.5rem;
      line-height: 1;
      display: none;
    }

    .medal-display.show {
      display: block;
      animation: medalPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes medalPop {
      0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
      55%  { transform: scale(1.4) rotate(5deg);  opacity: 1; }
      75%  { transform: scale(0.9) rotate(-2deg); }
      90%  { transform: scale(1.08) rotate(1deg); }
      100% { transform: scale(1) rotate(0deg);    opacity: 1; }
    }

    
    .medal-display.glow-gold {
      animation: medalPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), glowGold 3.5s ease-out forwards;
    }
    .medal-display.glow-silver {
      animation: medalPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), glowSilver 3.5s ease-out forwards;
    }
    .medal-display.glow-bronze {
      animation: medalPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), glowBronze 3.5s ease-out forwards;
    }

    @keyframes glowGold {
      0%   { filter: none; }
      15%  { filter: drop-shadow(0 0 24px rgba(240,165,0,1)) drop-shadow(0 0 48px rgba(255,215,0,0.7)); }
      40%  { filter: drop-shadow(0 0 18px rgba(240,165,0,0.7)) drop-shadow(0 0 36px rgba(255,215,0,0.5)); }
      100% { filter: none; }
    }
    @keyframes glowSilver {
      0%   { filter: none; }
      15%  { filter: drop-shadow(0 0 20px rgba(180,180,220,0.9)) drop-shadow(0 0 40px rgba(200,200,240,0.6)); }
      40%  { filter: drop-shadow(0 0 14px rgba(180,180,220,0.6)) drop-shadow(0 0 28px rgba(200,200,240,0.4)); }
      100% { filter: none; }
    }
    @keyframes glowBronze {
      0%   { filter: none; }
      15%  { filter: drop-shadow(0 0 18px rgba(205,127,50,0.9)) drop-shadow(0 0 36px rgba(205,150,80,0.6)); }
      40%  { filter: drop-shadow(0 0 12px rgba(205,127,50,0.6)) drop-shadow(0 0 24px rgba(205,150,80,0.4)); }
      100% { filter: none; }
    }

    
    .result-badges {
      display: flex;
      gap: 14px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
    }

    .badge-new-record {
      font-size: 2.8rem;
      font-weight: bold;
      background: linear-gradient(90deg, #f0a500, #e53935, #f0a500);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: badgePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both, rainbowShift 1.5s linear infinite;
      display: none;
    }
    .badge-new-record.show { display: block; }

    @keyframes badgePop {
      0%   { transform: scale(0); opacity: 0; }
      60%  { transform: scale(1.15); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }

    
    .result-rank {
      font-size: 1rem;
      color: #5c3d1e;
      font-weight: bold;
      padding: 8px 0 4px;
      text-align: center;
    }

    
    .perfect-display {
      font-size: 2.8rem;
      font-weight: bold;
      line-height: 1.2;
      text-align: center;
      background: linear-gradient(90deg, #e53935, #ff6f00, #f0a500, #4caf50, #1d9bf0, #9c27b0, #e53935);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: perfectPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), rainbowShift 2s linear infinite;
      display: none;
    }

    .perfect-display.show {
      display: block;
    }

    @keyframes perfectPop {
      0%   { transform: scale(0) rotate(-5deg); opacity: 0; }
      50%  { transform: scale(1.2) rotate(2deg); opacity: 1; }
      100% { transform: scale(1) rotate(0deg);   opacity: 1; }
    }

    @keyframes rainbowShift {
      0%   { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }

    .confetti {
      position: fixed;
      width: 10px;
      height: 10px;
      z-index: 1000;
      pointer-events: none;
      animation: confettiBurst ease-out forwards;
    }

    @keyframes confettiBurst {
      0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
      60%  { opacity: 1; }
      100% { transform: translate(var(--tx), var(--ty)) rotate(720deg) scale(0.3); opacity: 0; }
    }

    
    .result-wrong-details {
      width: 100%;
    }

    .result-wrong-details summary {
      font-size: 0.82rem;
      color: #bbb;
      cursor: pointer;
      list-style: none;
      text-align: center;
      padding: 6px 0;
      user-select: none;
    }

    .result-wrong-details summary::-webkit-details-marker { display: none; }

    .result-wrong-details[open] summary { color: #999; margin-bottom: 8px; }

    .result-wrong-list {
      background: #fff9f9;
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }

    .result-wrong-item {
      font-size: 0.92rem;
      color: #c62828;
      font-weight: bold;
      background: #fff;
      border-radius: 8px;
      padding: 6px 10px;
      border: 1px solid #f0d0d0;
      text-align: center;
    }

    .result-wrong-item .wrong-reading {
      display: block;
      font-size: 0.68rem;
      color: #aaa;
      font-weight: normal;
      margin-top: 2px;
    }

    
    @media (max-width: 479px) {
      .result-wrong-item { font-size: 1.1rem; padding: 8px 12px; }
      .result-wrong-item .wrong-reading { font-size: 0.85rem; margin-top: 3px; }
    }

    
    
    
    .storage-note-more { color: inherit; margin-left: .4em; white-space: nowrap; }

    
    
    .game-foot {
      width: 100%;
      margin: auto auto 0;
      padding: 22px 0 40px;
      border-top: 1px solid #e0d3b4;
      text-align: center;
    }
    .game-foot-links {
      margin: 0;
      font-size: 12.5px;
      color: var(--sub-ink);
      line-height: 2.2;
    }
    .game-foot-links a { color: var(--sub-ink); text-decoration: none; white-space: nowrap; display: inline-block; padding: 6px 2px; }
    .game-foot-links > span:first-child { white-space: nowrap; }
    .game-foot-links a:hover { text-decoration: underline; }
    .game-foot #link-free { color: var(--sub-ink); margin-top: 15px; }
    
    .game-foot-links .gf-gametop { display: none; cursor: pointer; }
    body[data-screen="game-screen"] .game-foot-links .gf-site { display: none; }
    body[data-screen="game-screen"] .game-foot-links .gf-gametop { display: inline-block; }
    .game-foot-links span { margin: 0 8px; opacity: .6; }
    
    .game-foot-links > span[aria-hidden="true"] { display: none; }
    .game-foot-links a:not(:last-of-type)::after { content: "｜"; display: inline-block; opacity: .6; margin: 0 8px; text-decoration: none; }
    
    @media (min-width: 560px) {
      .game-foot { width: max-content; max-width: 100%; }
      .game-foot-links { white-space: nowrap; }
    }
    
    .game-foot-links.gf-nav { white-space: normal; }
    .game-foot-links.gf-nav + .game-foot-links.gf-nav { margin-top: 10px; }
    .game-foot-links:not(.gf-nav) { margin-bottom: 15px; }
    .game-foot-links:not(.gf-nav) .gf-site::after { content: none; }
    .storage-note {
      font-size: 0.8rem;
      color: #a0916f;
      text-align: center;
      line-height: 1.6;
      margin: 6px auto 0;
      max-width: 360px;
    }

    
    .page-yougo {
      font-size: 0.8rem;
      color: #a0916f;
      text-align: center;
      line-height: 1.7;
      margin: 18px auto 0;
      max-width: 420px;
    }

    
    .page-howto {
      width: 100%;
      max-width: 420px;
      margin: 28px auto 8px;
      text-align: left;
      color: #7a6a4c;
    }
    .page-howto h2 {
      font-size: 0.85rem;
      font-weight: bold;
      color: #5c3d1e;
      margin-bottom: 6px;
    }
    .page-howto p {
      font-size: 0.8rem;
      line-height: 1.8;
      margin-bottom: 6px;
    }
    .page-howto .page-howto-more a {
      color: #e09200;
      font-weight: bold;
      text-decoration: none;
    }
    .page-howto .page-howto-more a:hover { text-decoration: underline; }

    
    #collection-screen { gap: 14px; margin-bottom: 16px; }

    .collection-lead {
      font-size: 0.85rem;
      color: #5c3d1e;
      text-align: center;
      line-height: 1.6;
    }

    .collection-panel {
      width: 100%;
      background: #fff;
      border-radius: 14px;
      padding: 14px 14px 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.07);
      margin-bottom: 2px;
    }

    .collection-panel-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0e8d0;
    }

    .collection-panel-name {
      font-size: 1rem;
      font-weight: bold;
      color: #5c3d1e;
      letter-spacing: 0.05em;
    }

    .collection-progress {
      font-size: 0.82rem;
      color: #999;
    }

    .collection-progress strong {
      color: #e09200;
      font-size: 0.95rem;
    }

    
    .collection-reset {
      border: 1px solid #e3d9c4;
      background: none;
      color: #b0a488;
      font-size: 0.8rem;
      border-radius: 999px;
      padding: 2px 9px;
      margin-left: 8px;
      cursor: pointer;
      font-family: inherit;
      transition: color 0.15s, border-color 0.15s;
    }
    .collection-reset:hover { color: #c62828; border-color: #e6b8b8; }

    .collection-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    
    .collection-chip {
      font-size: 0.875rem;
      padding: 5px 9px;
      border-radius: 8px;
      border: 1px solid #e3d9c4;
      background: #faf6ec;
      color: #b0a488;
      letter-spacing: 0.03em;
    }
    
    @media (max-width: 479px) {
      .collection-chip { font-size: 0.9rem; padding: 6px 12px; }
    }

    
    .collection-chip.cleared {
      background: #fff3d6;
      border-color: #f0a500;
      color: #5c3d1e;
      font-weight: bold;
    }

    .collection-empty {
      font-size: 0.8rem;
      color: #bbb;
      padding: 8px 2px;
    }
    
    
    @media (max-width:430px) and (max-height:719px){ body:not(:has(#game-screen.active)){zoom:0.9;min-height:112vh} }
    @media (max-width:430px) and (max-height:647px){ body:not(:has(#game-screen.active)){zoom:0.8;min-height:125vh} }
    @media (max-width:430px) and (max-height:575px){ body:not(:has(#game-screen.active)){zoom:0.7;min-height:143vh} }
    @media (max-width:430px) and (max-height:503px){ body:not(:has(#game-screen.active)){zoom:0.6;min-height:167vh} }
    
    @media (min-width:431px) and (max-height:727px){ body:not(:has(#game-screen.active)){zoom:0.9;min-height:112vh} }
    @media (min-width:431px) and (max-height:655px){ body:not(:has(#game-screen.active)){zoom:0.8;min-height:125vh} }
    @media (min-width:431px) and (max-height:582px){ body:not(:has(#game-screen.active)){zoom:0.7;min-height:143vh} }
    @media (min-width:431px) and (max-height:509px){ body:not(:has(#game-screen.active)){zoom:0.6;min-height:167vh} }
    
    @media (max-width:390px) and (max-height:782px){ body:has(#game-screen.active){zoom:0.9;min-height:112vh} }
    @media (max-width:390px) and (max-height:704px){ body:has(#game-screen.active){zoom:0.8;min-height:125vh} }
    @media (max-width:390px) and (max-height:626px){ body:has(#game-screen.active){zoom:0.7;min-height:143vh} }
    @media (max-width:390px) and (max-height:548px){ body:has(#game-screen.active){zoom:0.6;min-height:167vh} }
    
    @media (min-width:391px) and (max-width:430px) and (max-height:860px){ body:has(#game-screen.active){zoom:0.9;min-height:112vh} }
    @media (min-width:391px) and (max-width:430px) and (max-height:774px){ body:has(#game-screen.active){zoom:0.8;min-height:125vh} }
    @media (min-width:391px) and (max-width:430px) and (max-height:688px){ body:has(#game-screen.active){zoom:0.7;min-height:143vh} }
    @media (min-width:391px) and (max-width:430px) and (max-height:602px){ body:has(#game-screen.active){zoom:0.6;min-height:167vh} }
    
    @media (min-width:431px) and (max-height:799px){ body:has(#game-screen.active){zoom:0.9;min-height:112vh} }
    @media (min-width:431px) and (max-height:720px){ body:has(#game-screen.active){zoom:0.8;min-height:125vh} }
    @media (min-width:431px) and (max-height:641px){ body:has(#game-screen.active){zoom:0.7;min-height:143vh} }
    @media (min-width:431px) and (max-height:562px){ body:has(#game-screen.active){zoom:0.6;min-height:167vh} }

    

    
    .cell { font-size: 2.05rem; }
    .preview-cell { font-size: 1.25rem; }
    @media (max-width:360px) { .cell { font-size: 1.95rem; } }

    
    body { font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif; line-height: 1.8; }

    
    body { background: #fdf6e3; box-shadow: none; }
    .question-box, .result-card, .preview-mini, .collection-panel, .handoff-card, .battle-result-card { background: #fffaf0; }
    .cell { background: #fffaf0; }
    .cell.used { background: #e6dcc6; color: #8a7657; }
    .answer-slot { background: #fffaf0; border-color: #c9b48f; }
    .answer-slot.filled { border-color: #f0a500; background: #fff3d6; color: #3a2a00; }
    .preview-slot { background: #fffaf0; border-color: #c9b48f; }
    .preview-cell.used { background: #e6dcc6; color: #8a7657; }
    .ranking-table td { background: #fffaf0; }
    .ranking-table tr:nth-child(even) td { background: #fdf6e3; }
    .battle-player-col { background: #fdf6e3; border-color: #d4b896; }
    .battle-player-col.winner { background: #fff3d6; border-color: #f0a500; }
    .result-wrong-list { background: #fff7f2; }
    .result-wrong-item { background: #fffaf0; border-color: #e8cfc4; }
    .question-label, .preview-label, .preview-hint,
    .collection-progress, .collection-empty, .status-bar,
    .battle-player-name, .battle-detail, .handoff-desc,
    .btn-mode .mode-desc, .result-wrong-details summary,
    .result-wrong-details[open] summary, .top-ranking-more a,
    .game-foot-links, .storage-note { color: #7a6a4c; }
    .game-foot-links a, .storage-note a { color: #7a6a4c; }
    .top-ranking-more a:hover { color: #5c3d1e; }
    .subject-tab:not(.active) { background: #ece0c8; color: #7a6a4c; }
    .subject-tab:not(.active):hover { background: #e2d3b6; color: #5c3d1e; }
    .btn-secondary { background: #f3ead8; color: #5c3d1e; }
    .btn-secondary:hover { background: #ece0c8; }
    .btn-skip { color: #7a6a4c; border-color: #c9b48f; }
    .btn-skip:hover { background: #f3ead8; color: #5c3d1e; border-color: #8a7657; }
    .collection-chip { background: #fffaf0; border-color: #d4b896; color: #7a6a4c; }
    .collection-chip.cleared { background: #fff3d6; border-color: #f0a500; color: #5c3d1e; }
    .result-row { border-bottom-color: #e6dcc6; }
    .collection-panel-head { border-bottom-color: #e6dcc6; }
    .page-tabs a { color: #7a6a4c; }
    .page-tabs a:hover { color: #5c3d1e; }

    
    .btn-mode { padding: 14px 16px; gap: 6px; }
    @media (max-width:420px) { .btn-mode { padding: 12px 10px; } }

    
    #start-screen > .preview-mini { order: 1; }
    #start-screen > .mode-btn-row { order: 2; }
    #start-screen > .btn-row { order: 3; }
    #start-screen > .top-ranking-fold { order: 4; }

    
    .collection-panel[data-sub="history"] .collection-chip.cleared { background:#dcecf3; border-color:#8fb8c8; color:#2f5b6e; }
    .collection-panel[data-sub="geography"] .collection-chip.cleared { background:#e8f1d8; border-color:#a3bd75; color:#44582a; }
    .collection-panel[data-sub="civics"] .collection-chip.cleared { background:#f9e2e7; border-color:#dba0b0; color:#5c3d1e; }
    .collection-panel[data-sub="history"] .collection-panel-name,
    .collection-panel[data-sub="history"] .collection-progress strong { color:#2f5b6e; }
    .collection-panel[data-sub="geography"] .collection-panel-name,
    .collection-panel[data-sub="geography"] .collection-progress strong { color:#44582a; }
    .collection-panel[data-sub="civics"] .collection-panel-name,
    .collection-panel[data-sub="civics"] .collection-progress strong { color:#5c3d1e; }