/* Adventurer school: the teacher's framed portrait and words on the left, profession cards,
   the chosen profession's details with sample skills and the confirm footer on the right
   (user mockup 2026-09-30). Wood and gold frame with the school's purple accents. */
.school-dialog{--school-gold:#d8b25c;--school-ink:#4a3526;--school-muted:#8b7358;--school-purple:#5b3d93;--school-purple-dark:#3d2768;--school-warrior:#8a1f1f;--school-ranger:#2f6a3e;--school-mage:#4f2e8f;--school-priest:#2c5f86;box-sizing:border-box;width:min(1180px,calc(100vw - 24px));max-width:none;max-height:none;margin:auto;padding:26px 0 0;border:0;background:transparent;color:var(--school-ink);font:14px/1.6 'Nunito Sans','Noto Sans Thai',Tahoma,sans-serif}
.school-dialog *,.school-dialog *::before,.school-dialog *::after{box-sizing:border-box}
.school-dialog::backdrop{background:radial-gradient(ellipse at 50% 45%,#2a1d4d66,#0a0714d6 75%);backdrop-filter:blur(3px)}
.school-frame{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;max-height:calc(100dvh - 40px);padding:44px 22px 22px;overflow:auto;border:3px solid var(--school-gold);border-radius:26px;background:repeating-linear-gradient(90deg,#ffffff06 0 2px,#0000 2px 9px),linear-gradient(#6f4d2d,#4e3219 60%,#3f2812);box-shadow:inset 0 0 0 4px #3a2412,inset 0 0 0 6px #c99a4a66,0 30px 90px #05030ad9;scrollbar-width:thin;scrollbar-color:var(--school-gold) #0000}
/* Title plate and close button on the frame's top edge. */
.school-title{position:absolute;left:50%;top:-2px;z-index:2;margin:0;padding:7px 44px 9px;transform:translateX(-50%);border:3px solid var(--school-gold);border-radius:0 0 20px 20px;background:linear-gradient(#7451b8,var(--school-purple) 55%,var(--school-purple-dark));color:#fff3d2;font-size:24px;font-weight:900;line-height:1.2;letter-spacing:.01em;white-space:nowrap;text-shadow:0 2px 0 #2a1a4a;box-shadow:inset 0 0 0 2px #2f1f56,0 6px 0 #2a1a4a,0 10px 18px #0007}
.school-title::before{content:'';display:inline-block;width:26px;height:22px;margin:0 12px -3px 0;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22' fill='none' stroke='%23ffe7a8' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M13 5c-2.4-2-6-2.5-11-2v15c5-.5 8.6 0 11 2 2.4-2 6-2.5 11-2V3c-5-.5-8.6 0-11 2z'/%3E%3Cpath d='M13 5v15'/%3E%3C/svg%3E")}
.school-dialog .school-close{position:absolute;right:12px;top:10px;z-index:2;display:grid;place-items:center;width:44px;height:44px;min-height:0;padding:0 0 3px;border:3px solid var(--school-gold);border-radius:50%;background:linear-gradient(#7451b8,var(--school-purple-dark));color:#fff1d2;font:900 26px/1 Tahoma,sans-serif;cursor:pointer;box-shadow:0 3px 0 #2a1a4a,0 6px 12px #0006}
.school-dialog .school-close:hover:not(:disabled){border-color:#f0c75e;background:linear-gradient(#8360c9,#4a3080)}
/* Teacher column. */
.school-teacher{display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;border:2px solid var(--school-gold);border-radius:18px;background:linear-gradient(#3d2a63,#2b1c47);box-shadow:inset 0 0 0 3px #1d1233}
.school-teacher-art{width:100%;aspect-ratio:398/458;border-radius:14px;border:2px solid #c99a4a;background:#2b1c47 center/cover no-repeat url('../assets/ui/school/teacher.webp');box-shadow:inset 0 0 0 3px #0000004d,0 8px 20px #0007}
.school-teacher-name{align-self:center;max-width:100%;padding:6px 24px;border:2px solid var(--school-gold);border-radius:14px;background:linear-gradient(#7451b8,var(--school-purple-dark));color:#fff3d2;font-size:16px;font-weight:900;text-shadow:0 1px 0 #2a1a4a;box-shadow:0 3px 0 #2a1a4a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.school-teacher-say{margin:0;padding:14px 16px;border:1px solid #dcc39a;border-radius:14px;background:#fffbf2;text-align:center;font-size:15px;line-height:1.8;color:var(--school-ink);box-shadow:inset 0 0 0 3px #fff6e6,0 2px 0 #dcc39a}
/* Parchment panel. */
.school-panel{display:flex;flex-direction:column;min-width:0;padding:16px 22px 16px;border:2px solid var(--school-gold);border-radius:20px;background:radial-gradient(ellipse at 30% 0,#fffaf0,#0000 60%),linear-gradient(170deg,#fdf6e6,#f3e6cb);box-shadow:inset 0 0 0 4px #fffaf0,inset 0 0 0 5px #e4cf9f}
.school-heading{display:flex;align-items:center;gap:14px;margin:0;font-size:24px;font-weight:900;line-height:1.3;color:var(--school-ink);text-align:center}
.school-heading::before,.school-heading::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,#0000,var(--school-gold));border-radius:2px}
.school-heading::after{background:linear-gradient(90deg,var(--school-gold),#0000)}
.school-sub{margin:2px 0 14px;text-align:center;font-size:13px;color:var(--school-muted)}
/* Cards. */
.school-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.school-dialog .school-card{position:relative;display:flex;flex-direction:column;align-items:stretch;min-height:0;margin:0;padding:6px 6px 8px;border:2px solid #d6bd8c;border-radius:14px;background:linear-gradient(#fffdf6,#f5e9cf);box-shadow:0 3px 0 #cfb17a;color:var(--school-ink);font:inherit;text-align:center;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.school-dialog .school-card:hover:not(:disabled){border-color:var(--school-gold);transform:translateY(-2px)}
.school-dialog .school-card[data-selected=true]{border-color:#e9b949;background:linear-gradient(#fffdf6,#fbeecb);box-shadow:0 0 0 3px #f4d47c,0 8px 18px #c48a1a55;transform:translateY(-4px)}
.school-dialog .school-card:disabled{opacity:.72;cursor:default}
.school-dialog .school-card[data-selected=true]:disabled{opacity:1}
.school-dialog .school-card:focus-visible{outline:3px solid #f0c75e;outline-offset:3px}
.school-card-art{display:block;width:100%;aspect-ratio:208/280;border-radius:10px;background:#d9c9a8 center/cover no-repeat;box-shadow:inset 0 0 0 2px #0000001f}
.school-card-art[data-profession-id=warrior]{background-image:url('../assets/ui/school/warrior.webp')}
.school-card-art[data-profession-id=ranger]{background-image:url('../assets/ui/school/ranger.webp')}
.school-card-art[data-profession-id=mage]{background-image:url('../assets/ui/school/mage.webp')}
.school-card-art[data-profession-id=priest]{background-image:url('../assets/ui/school/priest.webp')}
.school-card[data-locked=true] .school-card-art{filter:grayscale(.7) brightness(.82)}
.school-card-name{display:block;margin:8px -6px 0;padding:7px 4px;border-top:2px solid var(--school-gold);border-bottom:2px solid var(--school-gold);background:var(--school-purple);color:#fff3d2;font-size:16px;font-weight:900;text-shadow:0 1px 0 #0006}
.school-card[data-profession-id=warrior] .school-card-name{background:var(--school-warrior)}
.school-card[data-profession-id=ranger] .school-card-name{background:var(--school-ranger)}
.school-card[data-profession-id=mage] .school-card-name{background:var(--school-mage)}
.school-card[data-profession-id=priest] .school-card-name{background:var(--school-priest)}
.school-card-tagline{display:block;margin-top:8px;font-size:12px;font-weight:700;color:#6d5a3f}
.school-card-badge{position:absolute;right:9px;top:9px;z-index:1;display:grid;place-items:center;min-width:30px;height:30px;padding:0 9px;border:2px solid #fff6e0;border-radius:15px;background:linear-gradient(#f6d26d,#c9942a);color:#3d2b0b;font:900 14px/1 Tahoma,sans-serif;box-shadow:0 2px 6px #0007}
.school-card-badge:empty{display:none}
.school-card[data-locked=true] .school-card-badge{background:linear-gradient(#5a5a5a,#2f2f2f);color:#fff0c8;font-size:11px}
/* Detail of the highlighted profession. */
.school-detail{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 22px;align-items:center;margin-top:14px;padding:14px 18px;border:1px solid #dcc39a;border-radius:14px;background:#fffbf2;box-shadow:inset 0 0 0 3px #fff6e6,0 2px 0 #dcc39a}
.school-detail-empty{grid-column:1/-1;margin:4px 0;text-align:center;font-weight:700;color:var(--school-muted)}
.school-detail-head{display:flex;align-items:center;gap:14px;min-width:0}
.school-emblem{position:relative;flex:none;width:76px;height:76px;border-radius:50%;background:#e8d8b8 center/cover no-repeat;box-shadow:inset 0 0 0 3px var(--school-gold),0 3px 8px #0003}
.school-emblem[data-profession-id=warrior]{background-image:url('../assets/ui/school/emblem-warrior.webp')}
.school-emblem:not([data-profession-id=warrior])::before{content:'✦';position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:#fff3d2;text-shadow:0 2px 0 #0004}
.school-emblem[data-profession-id=ranger]{background:var(--school-ranger)}.school-emblem[data-profession-id=mage]{background:var(--school-mage)}.school-emblem[data-profession-id=priest]{background:var(--school-priest)}
.school-detail-info{min-width:0}
.school-detail-name{margin:0;font-size:22px;font-weight:900;line-height:1.25;color:var(--school-purple)}
.school-detail[data-profession-id=warrior] .school-detail-name{color:var(--school-warrior)}.school-detail[data-profession-id=ranger] .school-detail-name{color:var(--school-ranger)}.school-detail[data-profession-id=mage] .school-detail-name{color:var(--school-mage)}.school-detail[data-profession-id=priest] .school-detail-name{color:var(--school-priest)}
.school-detail-text{margin:2px 0 0;font-size:13px;line-height:1.7;color:#6d5a3f}
.school-chips{display:flex;flex-wrap:wrap;gap:8px;grid-column:1;align-self:start}
.school-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid #dcc39a;border-radius:10px;background:#fffdf6;font-size:13px;font-weight:800;box-shadow:0 2px 0 #e3d0a8}
.school-chip::before{content:'';width:14px;height:14px;border-radius:50%;background:#c9a55a}
.school-chip[data-stat=maxHealth]::before{background:radial-gradient(circle at 35% 35%,#ff9a9a,#c62828)}
.school-chip[data-stat=maxStamina]::before{background:radial-gradient(circle at 35% 35%,#b6f0a2,#3d8b3d)}
.school-chip[data-stat=maxMana]::before{background:radial-gradient(circle at 35% 35%,#a9d8ff,#2d5fb8)}
.school-chip[data-stat=capacity]::before{background:radial-gradient(circle at 35% 35%,#ffd9a0,#b06c1e)}
.school-chip-perk{color:#8a5a1c}.school-chip-perk::before{background:radial-gradient(circle at 35% 35%,#ffe7a0,#c9942a)}
.school-skills{grid-column:2;grid-row:1/3;align-self:center;min-width:220px}
.school-skills-title{position:relative;margin:0 0 8px;font-size:12px;font-weight:800;color:var(--school-muted);text-align:center}
.school-skills-title::before,.school-skills-title::after{content:'';position:absolute;top:50%;width:26%;height:1px;background:var(--school-gold)}
.school-skills-title::before{left:0}.school-skills-title::after{right:0}
.school-skill-row{display:flex;justify-content:center;gap:14px}
.school-skill{display:flex;flex-direction:column;align-items:center;gap:5px;width:64px;font-size:11px;font-weight:700;color:var(--school-ink);text-align:center}
.school-skill small{font-size:11px;line-height:1.3}
.school-skill-icon{display:block;width:56px;height:56px;border:2px solid var(--school-gold);border-radius:12px;background:#2b1c47 center/cover no-repeat;box-shadow:0 3px 0 #cfb17a}
.school-skill-icon[data-skill-id=piercing-slash]{background-image:url('../assets/skills/swordsman-epic-v2/piercing-slash.webp')}
.school-skill-icon[data-skill-id=crescent-sweep]{background-image:url('../assets/skills/swordsman-blue-v1/crescent-sweep.webp')}
.school-skill-icon[data-skill-id=dash-strike]{background-image:url('../assets/skills/swordsman-blue-v1/dash-strike.webp')}
.school-skill-icon[data-skill-id=war-cry]{background-image:url('../assets/skills/swordsman-blue-v1/war-cry.webp')}
.school-skill-none{display:block;padding:12px 0;font-size:12px;font-weight:700;color:var(--school-muted)}
/* Footer. */
.school-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.school-note{flex:1 1 200px;display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:800;color:#8a5a1c}
.school-note:empty{display:none}
.school-note::before{content:'!';flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#c62828;color:#fff;font:900 14px/1 Tahoma,sans-serif}
.school-note[data-tone=warn]{color:#a12a2a}.school-note[data-tone=ok]{color:#377254}.school-note[data-tone=ok]::before{content:'✓';background:#377254}.school-note[data-tone=done]{color:var(--school-purple)}.school-note[data-tone=done]::before{content:'✓';background:var(--school-purple)}
.school-message{flex-basis:100%;order:9;margin:0;font-size:12.5px;line-height:1.6;color:#7a5f33}
.school-message:empty{display:none}
.school-dialog .school-back,.school-dialog .school-confirm,.school-dialog .school-retry{min-height:46px;padding:10px 22px;border:2px solid #d6bd8c;border-radius:12px;background:linear-gradient(#fffaf0,#f3e5c7);color:var(--school-ink);font:800 15px/1.2 'Nunito Sans','Noto Sans Thai',Tahoma,sans-serif;cursor:pointer;box-shadow:0 3px 0 #cfb17a}
.school-dialog .school-back::before{content:'‹';margin-right:8px;font-size:18px;line-height:1}
.school-dialog .school-confirm{padding:10px 32px;border-color:var(--school-gold);background:linear-gradient(#7451b8,var(--school-purple) 55%,var(--school-purple-dark));color:#fff3d2;text-shadow:0 1px 0 #2a1a4a;box-shadow:inset 0 1px 0 #a98be0,0 3px 0 #2a1a4a,0 6px 14px #3d276855}
.school-dialog .school-confirm::before{content:'✦';margin-right:10px;color:#ffe7a8}
.school-dialog button:hover:not(:disabled){border-color:var(--school-gold)}
.school-dialog .school-confirm:hover:not(:disabled){background:linear-gradient(#8360c9,#6a49a8 55%,#4a3080)}
.school-dialog button:active:not(:disabled){transform:translateY(1px)}
.school-dialog button:disabled{opacity:.55;cursor:default}
.school-dialog button:focus-visible{outline:3px solid #f0c75e;outline-offset:3px}
/* Entrance. */
@keyframes school-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.school-dialog[open] .school-frame{animation:school-rise .26s ease-out both}
@media(prefers-reduced-motion:reduce){.school-dialog[open] .school-frame{animation:none}}
/* Narrow screens: the teacher becomes a strip above the cards, cards go two by two. */
@media(max-width:860px){
 .school-frame{grid-template-columns:minmax(0,1fr);gap:14px;padding:42px 12px 14px}
 .school-teacher{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:8px;padding:10px}
 .school-teacher-art{grid-row:1/3;width:96px;aspect-ratio:1;border-radius:50%;background-position:50% 18%;background-size:150%}
 .school-teacher-name{justify-self:start;font-size:14px;padding:4px 16px}
 .school-teacher-say{padding:10px 12px;font-size:13.5px;line-height:1.6;text-align:left}
 .school-panel{padding:12px 12px 12px}
 .school-heading{font-size:20px}.school-sub{margin-bottom:10px}
 .school-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .school-card-name{font-size:14px;padding:5px 4px}.school-card-tagline{font-size:11px}
 .school-detail{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}
 .school-skills{grid-column:1;grid-row:auto;min-width:0}
 .school-footer{gap:8px}.school-note{flex-basis:100%}
 .school-dialog .school-back,.school-dialog .school-confirm{flex:1 1 140px;padding-left:12px;padding-right:12px;text-align:center}
 .school-title{font-size:19px;padding:6px 26px 8px}
}
/* Short landscape phones: keep everything reachable by scrolling inside the frame. */
@media(max-height:520px){
 .school-dialog{padding-top:20px}
 .school-frame{max-height:calc(100dvh - 26px);padding-top:38px}
 .school-teacher{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:10px;row-gap:6px;padding:8px}
 .school-teacher-art{grid-row:1/3;width:72px;aspect-ratio:1;border-radius:50%;background-position:50% 18%;background-size:150%}
 .school-teacher-say{padding:8px 10px;font-size:13px;text-align:left}
 .school-card-art{aspect-ratio:208/200;background-position:50% 20%}
}
/* Item 36: "อาชีพ / ถอนแต้ม" tabs and the paid stat point respec (src/school-respec-ui.js). The tabs only appear
   while stat points count for the character; [hidden] must win over the panel's own display rules. */
.school-panel>[hidden],.school-footer>[hidden]{display:none!important}
.school-tabs{display:flex;gap:8px;margin:0 0 10px}
.school-dialog .school-tab{flex:0 1 auto;min-height:38px;padding:6px 18px;border:2px solid #d6bd8c;border-radius:999px;background:linear-gradient(#fffaf0,#f3e5c7);color:var(--school-ink);font:800 14px/1.2 'Nunito Sans','Noto Sans Thai',Tahoma,sans-serif;cursor:pointer}
.school-dialog .school-tab.active{border-color:var(--school-gold);background:linear-gradient(#7451b8,var(--school-purple) 55%,var(--school-purple-dark));color:#fff3d2}
.school-dialog .school-tab:disabled{opacity:.7;cursor:default}
.school-respec{min-width:0}
.school-respec-box{display:flex;flex-direction:column;gap:8px;padding:12px 16px;border:1px solid #dcc39a;border-radius:14px;background:#fffbf2;box-shadow:inset 0 0 0 3px #fff6e6,0 2px 0 #dcc39a;color:var(--school-ink)}
.school-respec-title{margin:0;font-size:20px;font-weight:900}
.school-respec-rule{margin:2px 0 0;font-size:13px;color:var(--school-muted)}
.school-respec-rows{display:grid;gap:6px}
.school-respec-row{display:grid;grid-template-columns:minmax(64px,1fr) minmax(40px,auto) auto;align-items:center;gap:10px;padding:4px 8px;border-radius:10px;background:#fff6e4}
.school-respec-name{font-size:15px}
.school-respec-have{font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.school-respec-steps{display:flex;align-items:center;gap:6px}
.school-respec-pick{min-width:34px;text-align:center;font-variant-numeric:tabular-nums;color:#9b2d20}
.school-respec-pick[data-pick="0"]{color:var(--school-muted)}
.school-dialog .school-respec-step{width:40px;min-height:40px;border:2px solid #d6bd8c;border-radius:10px;background:linear-gradient(#fffaf0,#f3e5c7);color:var(--school-ink);font:900 18px/1 Tahoma,sans-serif;cursor:pointer}
.school-dialog .school-respec-step:disabled,.school-dialog .school-respec-clear:disabled,.school-dialog .school-respec-confirm:disabled{opacity:.45;cursor:default}
.school-respec-summary,.school-respec-after,.school-respec-reason,.school-respec-again,.school-respec-done,.school-respec-question{margin:0;font-size:14px}
.school-respec-summary{font-weight:800}
.school-respec-reason[data-tone="warn"]{color:#9b2d20;font-weight:700}
.school-respec-again{color:var(--school-muted)}
.school-respec-done{color:#2f6b2a;font-weight:700}
.school-respec-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.school-respec-ask{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;padding:8px 10px;border:2px solid var(--school-gold);border-radius:12px;background:#fff3d8}
.school-respec-question{flex:1 1 180px;font-weight:800}
.school-dialog .school-respec-clear,.school-dialog .school-respec-confirm,.school-dialog .school-respec-yes,.school-dialog .school-respec-no,.school-dialog .school-respec-open{min-height:40px;padding:8px 18px;border:2px solid #d6bd8c;border-radius:12px;background:linear-gradient(#fffaf0,#f3e5c7);color:var(--school-ink);font:800 14px/1.2 'Nunito Sans','Noto Sans Thai',Tahoma,sans-serif;cursor:pointer}
.school-dialog .school-respec-confirm,.school-dialog .school-respec-yes{border-color:var(--school-gold);background:linear-gradient(#7451b8,var(--school-purple) 55%,var(--school-purple-dark));color:#fff3d2}
.school-dialog .school-respec-open{align-self:flex-start}
@media(max-width:860px){
 .school-respec-box{padding:10px}
 .school-respec-row{grid-template-columns:minmax(52px,1fr) auto auto;gap:6px}
 .school-dialog .school-respec-clear,.school-dialog .school-respec-confirm,.school-dialog .school-respec-yes,.school-dialog .school-respec-no{flex:1 1 120px}
}