/* Tutorial + glossary share one 904×407 composition with internal scrolling. */
.learn-screen { box-sizing: border-box; width: 904px; height: 407px; margin: auto; padding: 22px 70px 18px 34px; color: var(--bone); background: radial-gradient(circle at 78% 20%, rgba(164,81,28,.22), transparent 32%), linear-gradient(135deg, rgba(17,18,23,.98), rgba(34,24,20,.98)); overflow: hidden; }
.learn-header { margin: 0 0 12px; }
.learn-header h1 { margin: 0; color: var(--gold); font: 2rem var(--font-display); letter-spacing: .08em; }
.learn-header > p:last-child { max-width: 660px; margin: 4px 0 0; color: var(--ash); font: 1rem var(--font-body); }
.learn-kicker { margin: 0 0 2px; color: var(--amber); font: .66rem var(--font-chrome); letter-spacing: .18em; text-transform: uppercase; }
.learn-scroll { height: 260px; padding-right: 10px; overflow-y: auto; scrollbar-color: var(--gold) rgba(0,0,0,.25); }
.glossary-search { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--ash); font: .78rem var(--font-chrome); }
.glossary-search input { width: 240px; padding: 7px 10px; border: 1px solid rgba(227,180,94,.42); border-radius: 4px; color: var(--bone); background: rgba(0,0,0,.32); font: .85rem var(--font-chrome); }
.glossary-section h2 { margin: 10px 0 5px; color: var(--amber); font: .82rem var(--font-chrome); letter-spacing: .13em; text-transform: uppercase; }
.glossary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.glossary-term { position: relative; padding: 8px 10px; border-left: 2px solid rgba(227,180,94,.48); background: rgba(255,255,255,.035); }
.glossary-term h3 { margin: 0 0 2px; color: var(--bone); font: .88rem var(--font-chrome); }
.glossary-term p { margin: 0; color: var(--ash); font: .82rem/1.25 var(--font-body); }
.glossary-glyph { float: left; width: 20px; height: 20px; margin: 0 7px 4px 0; font-size: .78rem; }
.glossary-empty { color: var(--ash); font-style: italic; }
.app-info-btn { right: 72px; font-size: 21px; }
.app-info-btn:hover { transform: none; }
.app-info-btn[hidden] { display: none; }
.quick-glossary { max-height: 255px; overflow-y: auto; }
.quick-glossary .glossary-section h2 { margin-top: 0; }
.quick-glossary .glossary-grid { grid-template-columns: repeat(2, 1fr); }
.tutorial-screen { display: grid; grid-template-rows: auto auto 1fr auto; }
.tutorial-heading { margin-bottom: 5px; }
.tutorial-progress { position: relative; height: 18px; margin-bottom: 10px; border: 1px solid rgba(227,180,94,.28); background: rgba(0,0,0,.25); overflow: hidden; }
.tutorial-progress span { display: block; height: 100%; background: linear-gradient(90deg, rgba(143,71,24,.75), rgba(227,180,94,.75)); transition: width .2s ease; }
.tutorial-progress b { position: absolute; inset: 1px 8px auto auto; color: var(--bone); font: .67rem var(--font-chrome); }
.tutorial-stage { display: grid; grid-template-columns: 52% 48%; min-height: 0; border: 1px solid rgba(227,180,94,.2); background: rgba(0,0,0,.17); }
.tutorial-visual { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 205px; background: radial-gradient(circle, rgba(113,69,34,.32), transparent 65%); }
.tutorial-copy { align-self: center; padding: 18px 24px 18px 10px; }
.tutorial-copy h2 { margin: 0 0 8px; color: var(--gold); font: 1.35rem var(--font-display); }
.tutorial-copy p { margin: 0; color: var(--ash); font: 1rem/1.35 var(--font-body); }
.tutorial-controls { display: flex; justify-content: flex-end; gap: 8px; padding-top: 9px; }
.learn-button, .learn-text-button { min-height: 36px; border: 1px solid rgba(227,180,94,.55); color: var(--bone); background: rgba(21,17,16,.8); font: .78rem var(--font-chrome); cursor: pointer; }
.learn-button { min-width: 110px; padding: 7px 15px; }
.learn-button.primary { color: #1a1410; background: var(--gold); }
.learn-text-button { margin-top: 10px; padding: 5px 10px; color: var(--gold); background: transparent; }
.learn-button:hover, .learn-text-button:hover { box-shadow: 0 0 10px rgba(227,180,94,.35); }
.demo-hero { display: grid; place-items: center; width: 76px; height: 76px; border: 3px solid var(--gold); border-radius: 50%; font: 1.8rem var(--font-display); }
.demo-hero.enemy, .demo-minion.enemy { border-color: #b95b55; }
.demo-versus, .demo-arrow, .demo-mana { color: var(--amber); font: 1rem var(--font-chrome); }
.demo-card { position: relative; display: grid; place-items: center; width: 105px; height: 145px; border: 3px solid var(--gold); border-radius: 12px; background: linear-gradient(#3e2d27, #17181d); }
.demo-card b, .demo-card i, .demo-card em { position: absolute; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; font: 1rem var(--font-display); font-style: normal; }
.demo-card b { top: -10px; left: -10px; background: #315f9d; }
.demo-card i { bottom: -10px; left: -10px; background: #9c3d32; }
.demo-card em { right: -10px; bottom: -10px; background: #4c7a46; }
.demo-card span { color: var(--ash); font: .7rem var(--font-chrome); }
.demo-card-set { display: flex; align-items: center; gap: 10px; }
.demo-card-types { display: grid; gap: 8px; }
.demo-type-card { position: relative; display: grid; place-items: center; width: 92px; min-height: 54px; padding: 6px 4px 4px; box-sizing: border-box; border: 2px solid rgba(227,180,94,.7); border-radius: 7px; color: var(--bone); background: linear-gradient(#36303b, #17181d); text-align: center; }
.demo-type-card b { position: absolute; top: -7px; left: -7px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: white; background: #315f9d; font: .78rem var(--font-body); }
.demo-type-card span { font: .64rem/1.1 var(--font-body); }
.demo-type-card.socket { border-color: #9f79cc; box-shadow: inset 0 0 10px rgba(126,80,171,.2); }
.demo-labels { display: grid; gap: 20px; color: var(--ash); font: .72rem var(--font-chrome); }
.demo-labels .mana { color: #78b8ff; }
.demo-labels .attack { color: #ff7f73; }
.demo-labels .health { color: #82d27d; }
.tutorial-visual-turn { flex-direction: column; }
.demo-minion { display: grid; place-items: center; width: 76px; height: 104px; border: 3px solid var(--gold); border-radius: 9px; color: var(--bone); background: #282329; font: 1rem var(--font-display); }
.demo-attack-line { color: var(--amber); font-size: 2rem; }
.demo-chip { padding: 6px 8px; border: 1px solid var(--gold); border-radius: 12px; color: var(--gold); font: .65rem var(--font-chrome); }
.demo-chip.danger { border-color: #7bb4d8; color: #b7e4ff; }
.tutorial-visual-powers { padding: 8px; box-sizing: border-box; }
.demo-skill-grid { display: grid; grid-template-columns: 1fr; gap: 6px; width: 100%; max-height: 190px; padding-right: 4px; overflow-y: auto; scrollbar-color: var(--gold) rgba(0,0,0,.25); }
.demo-skill { display: grid; grid-template-columns: 54px 1fr; gap: 9px; align-items: center; min-height: 64px; padding: 5px; box-sizing: border-box; border: 1px solid rgba(227,180,94,.3); background: linear-gradient(90deg, rgba(81,49,31,.45), rgba(0,0,0,.2)); }
.demo-skill > img { width: 54px; height: 54px; object-fit: cover; object-position: 50% 22%; border: 1px solid rgba(227,180,94,.55); border-radius: 4px; }
.demo-skill-class { display: block; margin-bottom: 1px; color: var(--amber); font: .58rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.demo-skill b { display: block; color: var(--bone); font: 700 .76rem/1.1 var(--font-body); }
.demo-skill small { display: block; margin-top: 3px; color: var(--ash); font: .69rem/1.2 var(--font-body); }
:lang(tr) .learn-header h1,
:lang(tr) .glossary-search,
:lang(tr) .glossary-search input,
:lang(tr) .glossary-term h3,
:lang(tr) .tutorial-progress b,
:lang(tr) .tutorial-copy h2,
:lang(tr) .learn-button,
:lang(tr) .learn-text-button,
:lang(tr) .demo-hero,
:lang(tr) .demo-versus,
:lang(tr) .demo-arrow,
:lang(tr) .demo-mana,
:lang(tr) .demo-card b,
:lang(tr) .demo-card i,
:lang(tr) .demo-card em,
:lang(tr) .demo-card span,
:lang(tr) .demo-labels,
:lang(tr) .demo-minion,
:lang(tr) .demo-chip { text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .tutorial-progress span { transition: none; } }