:root{--leather-dark:#2a1810;--leather:#3d2417;--leather-light:#5c3a2a;--wood-deep:#1e1209;--wood:#3b2514;--wood-light:#5e3d27;--paper-aged:#f4e8d1;--paper-cream:#faf3e6;--paper-dark:#d4c4a8;--paper-line:#c8b898;--ink:#1a120a;--ink-light:#4a3828;--ink-faded:#8a7560;--gold-foil:#c5993e;--gold-bright:#e8c05a;--gold-dim:#8a6d2f;--red-cloth:#8b2020;--red-light:#b83a3a;--green-cloth:#2d5a3a;--green-dark:#1a3a24}
    *{box-sizing:border-box;margin:0;padding:0;font-family:"Inria Serif",serif}
    html{height:100%}
    body{min-height:100vh;font-family:"Inria Serif",serif;color:var(--ink);background:var(--wood-deep);background-image:radial-gradient(ellipse at 50% -10%,rgba(197,153,62,.12) 0%,transparent 55%),radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.4) 100%),repeating-linear-gradient(90deg,rgba(60,37,20,.3) 0px,rgba(40,22,10,.1) 2px,rgba(50,30,15,.2) 4px,rgba(30,18,9,.3) 5px,rgba(55,34,18,.1) 8px),linear-gradient(180deg,#2a1810 0%,#1e1209 50%,#15100a 100%);display:flex;align-items:center;justify-content:center;padding:12px;overflow-x:hidden}
    .shell{width:100%;max-width:980px;animation:shellIn .7s ease-out}
    @keyframes shellIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
    header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;margin-bottom:12px;background:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),linear-gradient(180deg,var(--leather),var(--leather-dark));border-radius:8px 8px 4px 4px;border:1px solid rgba(92,58,42,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 8px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.5);position:relative;flex-wrap:wrap}
    header::after{content:"";position:absolute;bottom:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-foil),transparent);opacity:.4}
    header::before{content:"❧";position:absolute;top:50%;left:14px;transform:translateY(-50%);font-size:16px;color:var(--gold-dim);opacity:.5}
    .brand{display:flex;align-items:center;gap:14px;padding-left:16px}
    .brand-emblem{width:44px;height:54px;border-radius:2px 5px 5px 2px;background:linear-gradient(135deg,var(--red-cloth),#6b1818);border-left:4px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;box-shadow:2px 3px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.15);flex-shrink:0}
    .brand-emblem::after{content:"JBC";font-family:"Inria Serif",serif;font-size:14px;font-weight:700;color:var(--gold-bright);text-shadow:0 1px 2px rgba(0,0,0,.5)}
    .brand-title{font-family:"Inria Serif",serif;font-size:17px;font-weight:700;color:var(--paper-aged);text-shadow:0 2px 4px rgba(0,0,0,.5);padding: 5px 0;}
    .brand-sub{font-size:11px;color:var(--gold-dim)}
    .stats-bar{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
    .stat{display:flex;align-items:center;gap:5px;padding:5px 10px;background:rgba(0,0,0,.25);border:1px solid rgba(197,153,62,.15);border-radius:4px;font-size:11px}
    .stat-lbl{text-transform:uppercase;font-size:9px;letter-spacing:.06em;color:var(--gold-dim)}
    .stat-val{font-family:"Inria Serif",serif;font-weight:700;font-size:14px;color:var(--paper-aged)}
    .stat-score .stat-val{color:var(--gold-bright)}
    .stat-streak .stat-val{color:#7ec8a0}
    .stat-lives .stat-val{color:var(--red-light);letter-spacing:2px;font-size:15px}
    .stat select{background:transparent;border:none;color:var(--paper-aged);cursor:pointer;outline:none;font-size:11px}
    .stat select option{background:var(--leather-dark);color:var(--paper-aged)}
    main{display:grid;grid-template-columns:1fr 1.25fr;gap:0;position:relative}
    @media(max-width:740px){main{grid-template-columns:1fr}header{flex-direction:column;align-items:flex-start}.left-page,.right-page{border-radius:8px!important}.book-spine{display:none}}
    .book-spine{position:absolute;top:-4px;bottom:-4px;left:calc(100%/2.25);transform:translateX(-50%);width:18px;z-index:5;background:linear-gradient(90deg,rgba(0,0,0,.3) 0%,rgba(92,58,42,.6) 20%,rgba(92,58,42,.8) 40%,rgba(60,37,20,.9) 50%,rgba(92,58,42,.8) 60%,rgba(92,58,42,.6) 80%,rgba(0,0,0,.3) 100%);box-shadow:0 0 15px rgba(0,0,0,.5)}
    .book-spine::before,.book-spine::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:10px;height:2px;background:var(--gold-dim);border-radius:1px;opacity:.5}
    .book-spine::before{top:30px}.book-spine::after{bottom:30px}
    .left-page,.right-page{padding:24px;display:flex;flex-direction:column;gap:14px;position:relative;min-height:500px}
    .left-page{background:url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--paper-cream) 0%,var(--paper-aged) 50%,#ecdfc4 100%);border-radius:6px 0 0 6px;border:1px solid var(--paper-dark);border-right:none;box-shadow:inset -8px 0 20px rgba(0,0,0,.06),inset 0 0 40px rgba(180,160,120,.1),-3px 4px 15px rgba(0,0,0,.4)}
    .left-page::after{content:"";position:absolute;inset:50px 24px 24px 24px;background:repeating-linear-gradient(transparent,transparent 27px,rgba(180,160,130,.15) 27px,rgba(180,160,130,.15) 28px);pointer-events:none;z-index:0}
    .right-page{background:url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),linear-gradient(225deg,var(--paper-cream) 0%,var(--paper-aged) 50%,#ecdfc4 100%);border-radius:0 6px 6px 0;border:1px solid var(--paper-dark);border-left:none;box-shadow:inset 8px 0 20px rgba(0,0,0,.06),inset 0 0 40px rgba(180,160,120,.1),3px 4px 15px rgba(0,0,0,.4)}
    .right-page::after{content:"";position:absolute;bottom:0;right:0;width:40px;height:40px;background:linear-gradient(315deg,var(--paper-dark) 0%,var(--paper-cream) 50%,transparent 50%);border-radius:0 0 6px 0;opacity:.5;pointer-events:none}
    .page-header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:10px;border-bottom:2px solid var(--ink);position:relative;z-index:1}
    .page-header::after{content:"";position:absolute;bottom:-5px;left:0;right:0;height:1px;background:var(--ink);opacity:.3}
    .page-title{font-family:"Inria Serif",serif;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-light)}
    .page-badge{padding:2px 10px;font-size:14px;color:var(--ink-faded);border:1px solid var(--paper-line);border-radius:2px;background:rgba(255,255,255,.3)}
    .cover-stage{flex:1;display:flex;justify-content:center;align-items:center;perspective:1000px;position:relative;z-index:1}
    .cover-stage::after{content:"";position:absolute;bottom:0;left:10%;right:10%;height:12px;background:linear-gradient(180deg,var(--wood-light),var(--wood));border-radius:2px 2px 4px 4px;box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);z-index:0}
    .cover-frame{width:min(200px,75%);aspect-ratio:2/3.1;position:relative;z-index:1;margin-bottom:12px}
    #coverImage{width:100%;height:100%;object-fit:cover;border-radius:2px 6px 6px 2px;display:none;transform:rotateY(-6deg) rotateZ(-.5deg);box-shadow:-4px 0 0 rgba(80,50,30,.4) inset,6px 8px 20px rgba(0,0,0,.5),2px 2px 6px rgba(0,0,0,.3);border-left:5px solid rgba(100,70,40,.5);transition:transform .5s cubic-bezier(.23,1,.32,1);animation:bookIn .5s cubic-bezier(.23,1,.32,1)}
    #coverImage:hover{transform:rotateY(-1deg) rotateZ(0deg) scale(1.03)}
    @keyframes bookIn{from{opacity:0;transform:rotateY(-25deg) translateY(15px) scale(.92)}to{opacity:1;transform:rotateY(-6deg) rotateZ(-.5deg) scale(1)}}
    .cover-placeholder{width:100%;height:100%;border-radius:4px;border:2px dashed var(--paper-line);background:rgba(200,184,152,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--ink-faded);font-size:12px;text-align:center;padding:16px}
    .loader-ring{width:30px;height:30px;border-radius:50%;border:3px solid var(--paper-line);border-top-color:var(--gold-foil);animation:spin .8s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}
    .hint-text{font-size:11px;color:var(--ink-faded);text-align:center;line-height:1.5;position:relative;z-index:1}
    .timer-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(0,0,0,.04);border-radius:4px;border:1px solid rgba(0,0,0,.08)}
    .timer-lbl{font-size:14px;text-transform:uppercase;color:var(--ink-faded)}
    .timer-num{font-family:"Inria Serif",serif;font-size:20px;font-weight:700;min-width:28px;text-align:right;color:var(--red-cloth);transition:color .3s}
    .timer-num.safe{color:var(--green-cloth)}.timer-num.warn{color:var(--gold-foil)}
    .timer-track-bar{flex:1;height:8px;border-radius:4px;background:var(--paper-dark);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.15)}
    .timer-fill{height:100%;width:100%;transform-origin:left center;transform:scaleX(0);border-radius:4px;background:linear-gradient(90deg,var(--green-cloth),var(--gold-foil),var(--red-cloth));transition:transform .1s linear}
    .status-line{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-faded);min-height:18px}
    .status-pip{width:7px;height:7px;border-radius:50%;background:var(--green-cloth);box-shadow:0 0 4px rgba(45,90,58,.4);flex-shrink:0}
    .status-line.loading .status-pip{background:var(--gold-foil);box-shadow:0 0 4px rgba(197,153,62,.4)}
    .status-line.error .status-pip{background:var(--red-cloth);box-shadow:0 0 4px rgba(139,32,32,.4)}
    .options-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    @media(max-width:500px){.options-grid{grid-template-columns:1fr}}
    .option{width:100%;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(244,232,209,.8));border:1px solid var(--paper-line);border-bottom:2px solid var(--paper-dark);border-radius:4px;color:var(--ink);font-family:"Inria Serif",serif;font-size:14px;font-weight:600;padding:11px 14px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;transition:all .15s ease;box-shadow:0 1px 3px rgba(0,0,0,.08)}
    .option:hover:not(.disabled){background:linear-gradient(180deg,#fff,var(--paper-cream));border-color:var(--gold-foil);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12),0 0 0 1px rgba(197,153,62,.2)}
    .option:active:not(.disabled){transform:translateY(1px);box-shadow:none}
    .option .idx{width:24px;height:24px;border-radius:50%;background:var(--paper-dark);display:flex;align-items:center;justify-content:center;font-family:"Inria Serif",serif;font-size:11px;font-weight:700;color:var(--ink-light);flex-shrink:0}
    .option.disabled{opacity:.6;cursor:default;pointer-events:none;transform:none;box-shadow:none}
    .option.correct{background:linear-gradient(180deg,#e8f5e9,#c8e6c9);border-color:var(--green-cloth);color:var(--green-dark);opacity:1}
    .option.correct .idx{background:var(--green-cloth);color:#fff}
    .option.wrong{background:linear-gradient(180deg,#ffebee,#ffcdd2);border-color:var(--red-cloth);color:var(--red-cloth);opacity:1}
    .option.wrong .idx{background:var(--red-cloth);color:#fff}
    .result-banner{padding:12px 16px;border-radius:4px;font-size:13px;line-height:1.6;border-left:4px solid;animation:resultIn .3s ease-out}
    @keyframes resultIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
    .result-banner.correct{background:rgba(45,90,58,.08);border-color:var(--green-cloth);color:var(--green-dark)}
    .result-banner.wrong{background:rgba(139,32,32,.08);border-color:var(--red-cloth);color:var(--red-cloth)}
    .controls-row{display:flex;justify-content:flex-end;padding-top:10px;border-top:1px solid var(--paper-line);min-height:52px;visibility:visible}
    .btn{border:1px solid var(--leather-dark);background:linear-gradient(180deg,var(--leather-light),var(--leather-dark));color:var(--paper-aged);font-size:13px;padding:10px 22px;border-radius:4px;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1);display:inline-flex;align-items:center;gap:8px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
    .btn:hover:not(:disabled){background:linear-gradient(180deg,#6e4530,var(--leather));transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.4)}
    .btn:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 4px rgba(0,0,0,.3)}
    .btn:disabled{background:var(--paper-dark);color:var(--ink-faded);border-color:var(--paper-line);box-shadow:none;cursor:default;text-shadow:none}
    .btn-results{background:linear-gradient(180deg,var(--red-light),var(--red-cloth));border-color:#5a1010}
    .btn-results:hover:not(:disabled){background:linear-gradient(180deg,#c44040,var(--red-cloth))}
    .meta-line{font-family:"Inria Serif",serif;font-size:14px;font-style:italic;color:var(--ink-light);padding-left:12px;border-left:3px solid var(--gold-dim)}
    .tags-row{display:flex;flex-wrap:wrap;gap:6px}
    .tag{font-size:14px;padding:2px 10px;border-radius:2px;background:rgba(197,153,62,.12);color:var(--gold-dim);border:1px solid rgba(197,153,62,.2)}
    .lives-hit{animation:livesShake .4s ease-in-out}
    @keyframes livesShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
    @keyframes scoreBump{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
    .score-bump{animation:scoreBump .3s ease-out}
    .flash-correct{animation:flashG .4s ease-out}
    .flash-wrong{animation:flashR .4s ease-out}
    @keyframes flashG{0%{box-shadow:inset 0 0 40px rgba(45,90,58,.12)}100%{box-shadow:none}}
    @keyframes flashR{0%{box-shadow:inset 0 0 40px rgba(139,32,32,.12)}100%{box-shadow:none}}
    .summary-panel{display:none;flex-direction:column;gap:16px;padding:20px;background:rgba(255,255,255,.4);border:2px solid var(--ink);border-radius:4px;position:relative;animation:resultIn .4s ease-out}
    .summary-panel::before{content:"FINAL";position:absolute;top:12px;right:16px;font-size:14px;letter-spacing:.1em;color:var(--red-cloth);border:2px solid var(--red-cloth);padding:2px 8px;border-radius:2px;transform:rotate(6deg);opacity:.6}
    .summary-title-row{padding-bottom:10px;border-bottom:2px solid var(--ink)}
    .summary-title-main{font-family:"Inria Serif",serif;font-size:20px;font-weight:700;color:var(--ink)}
    .summary-sub{font-size:11px;color:var(--ink-faded);margin-top:2px}
    .summary-top-metrics{display:flex;gap:12px}
    .summary-chip{flex:1;padding:14px;background:rgba(255,255,255,.5);border:1px solid var(--paper-line);border-radius:4px;text-align:center}
    .summary-chip-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faded)}
    .summary-chip-value{font-family:"Inria Serif",serif;font-size:28px;font-weight:700;color:var(--ink)}
    .summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;padding-top:10px;border-top:1px dotted var(--ink-faded);font-size:13px}
    .summary-grid-label{color:var(--ink-faded);font-size:12px}
    .summary-grid-value{font-family:"Inria Serif",serif;font-weight:700;color:var(--ink);text-align:right}
    .summary-actions-row{display:flex;justify-content:flex-end}
    .footer-line{font-size:14px;color:rgba(197,153,62,.35);text-align:center;margin-top:14px}
    .footer-line a{color:var(--gold-dim);text-decoration:none}
    .footer-line a:hover{text-decoration:underline}
  


/* Seamless inline tutorial text (right pane) */
.tutorial-inline-text{
  margin-top:6px;
  padding-left:12px;
  border-left:3px solid rgba(197,153,62,.45);
  color:var(--ink-light);
  font-size:12px;
  line-height:1.6;
}
.tutorial-inline-line{margin:4px 0; font-size: 18px;}
.tutorial-inline-line ul{list-style: inside square}
.tutorial-inline-text b{font-weight:700;color:var(--ink);}
.tutorial-inline-text .t-muted{color:var(--ink-faded);font-style:italic;}
.tutorial-inline-text .t-orn{color:var(--gold-dim);margin-right:4px;opacity:.85;}