/* Table app extras */
.xbar{display:flex;flex-wrap:wrap;gap:8px;padding:4px var(--gut,16px) 12px;max-width:760px;margin:0 auto}
.xbar button{flex:1 1 30%;min-height:46px;padding:10px 12px;border:1px solid rgba(212,170,103,.45);background:transparent;color:inherit;font-weight:600;cursor:pointer}
.xd{width:min(560px,calc(100vw - 20px));max-height:calc(100svh - 40px);padding:0;border:1px solid rgba(212,170,103,.4);background:#0F241F;color:#F2EBDD;overflow:auto}
.xd::backdrop{background:rgba(5,14,12,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.xd__in{position:relative;padding:22px 20px 24px}
.xd__x{position:absolute;top:10px;inset-inline-end:10px;width:40px;height:40px;border:1px solid rgba(242,235,221,.15);background:transparent;color:inherit;cursor:pointer}
.xd h3{margin:0 44px 10px 0;font:500 26px/1.15 "Cormorant Garamond",Georgia,serif;color:#F2EBDD}
[dir=rtl] .xd h3{margin:0 0 10px 44px;font-family:inherit;font-weight:700;font-size:21px}
.xd h4{margin:18px 0 8px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#D4AA67}
.xd p{margin:0 0 12px;color:#C9D2CC;line-height:1.55}
.xd a{color:#E8C995}
.xhow{margin:0 0 14px;padding-inline-start:18px;color:#A7B3AB;font-size:14px;line-height:1.5}
.xform{display:grid;gap:12px}
.xform label{display:grid;gap:6px;font-size:13px;letter-spacing:.06em;color:#D4AA67}
.xform input:not([type=checkbox]):not([type=radio]),.xform textarea{width:100%;min-height:48px;padding:10px 12px;background:rgba(10,26,22,.6);border:1px solid rgba(242,235,221,.18);color:#F2EBDD;font-size:16px}
.xform input:focus,.xform textarea:focus{outline:0;border-color:#D4AA67}
.xchk{display:flex!important;grid-template-columns:none!important;gap:10px!important;align-items:flex-start;color:#C9D2CC!important;letter-spacing:0!important;font-size:14px!important}
.xchk input{margin-top:3px;accent-color:#D4AA67}
.xmsg{min-height:1em;margin:0!important;color:#E58A96!important;font-weight:600}
.xbtn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border:0;background:#D4AA67;color:#0F241F!important;font-weight:700;letter-spacing:.06em;text-decoration:none;cursor:pointer}
.xbtn[disabled]{opacity:.6}
.xlinkbtn{background:none;border:0;color:#A7B3AB;text-decoration:underline;cursor:pointer;padding:0}
.xwallet{display:flex;gap:10px;margin:6px 0 14px}
.xwallet div{flex:1;padding:14px;border:1px solid rgba(212,170,103,.35);display:flex;flex-direction:column;gap:4px}
.xwallet small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#A7B3AB}
.xwallet b{font:500 30px/1 "Cormorant Garamond",Georgia,serif;color:#E8C995}
.xlink{display:flex;gap:8px}
.xlink input{flex:1;min-width:0;min-height:50px;padding:0 10px;background:rgba(10,26,22,.6);border:1px solid rgba(242,235,221,.18);color:#F2EBDD}
.xsmall{font-size:13px!important;color:#A7B3AB!important}
.xstars{border:0;margin:0;padding:0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.xstars legend{float:left;font-size:15px;color:#F2EBDD;padding:0}
.xstars div{display:flex;flex-direction:row-reverse}
.xstars input{position:absolute;opacity:0;pointer-events:none}
.xstars label{font-size:30px!important;line-height:1;color:rgba(242,235,221,.25)!important;cursor:pointer;padding:2px 3px;letter-spacing:0!important}
.xstars input:checked~label,.xstars label:hover,.xstars label:hover~label{color:#D4AA67!important}
.xstars input:focus-visible+label{outline:2px solid #D4AA67}
.xgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 12px;perspective:800px}
.xcard{position:relative;aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.22,.7,.2,1)}
.xcard span{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid rgba(212,170,103,.4)}
.xcard__b{background:#132D27 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23D4AA67' stroke-width='2' opacity='.45'%3E%3Cpath d='M48 6l12 30 30 12-30 12-12 30-12-30L6 48l30-12z'/%3E%3C/g%3E%3C/svg%3E") center/60% no-repeat}
.xcard__f{transform:rotateY(180deg);overflow:hidden}
.xcard__f img{width:100%;height:100%;object-fit:cover;display:block}
.xcard__f i{position:absolute;left:4px;bottom:4px;min-width:24px;height:24px;padding:0 5px;background:#D4AA67;color:#0F241F;font:700 12px/24px system-ui;font-style:normal;text-align:center}
.xcard.is-up{transform:rotateY(180deg)}
.xcard.is-done span{border-color:#86D39A}
.xwin{font-weight:600;color:#E8C995!important}
.xwin .xbtn{margin-inline-start:8px;min-height:40px}
@media (prefers-reduced-motion:reduce){.xcard{transition:none}}

/* Games (2026-10-15): hub, levels, quizzes */
.xhub{display:grid;gap:10px;margin-top:6px}
.xtile{display:flex;align-items:center;gap:14px;width:100%;padding:14px;border:1px solid rgba(212,170,103,.4);background:rgba(212,170,103,.06);color:inherit;text-align:start;cursor:pointer;transition:background .2s,border-color .2s}
.xtile:hover,.xtile:focus-visible{background:rgba(212,170,103,.14);border-color:#D4AA67;outline:0}
.xtile__i{flex:0 0 52px;height:52px;display:grid;place-items:center;border:1px solid rgba(212,170,103,.5);border-radius:50%;color:#D4AA67;font:700 22px/1 system-ui}
.xtile__t{display:flex;flex-direction:column;gap:3px;min-width:0}
.xtile__t b{font:500 21px/1.15 "Cormorant Garamond",Georgia,serif;color:#F2EBDD}
[dir=rtl] .xtile__t b{font-family:inherit;font-weight:700;font-size:17px}
.xtile__t small{font-size:13.5px;color:#A7B3AB;line-height:1.4}
.xtile__t em{font-style:normal;font-size:12px;letter-spacing:.08em;color:#E8C995}
.xgtop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 44px 10px 0;min-height:40px}
[dir=rtl] .xgtop{margin:0 0 10px 44px}
[dir=rtl] .xgtop .xlinkbtn{direction:rtl}
.xchips{display:flex;gap:6px;flex-wrap:wrap}
.xchip{min-height:34px;padding:0 10px;border:1px solid rgba(212,170,103,.4);background:transparent;color:#C9D2CC;font-size:13px;cursor:pointer}
.xchip.is-on{background:#D4AA67;color:#0F241F;border-color:#D4AA67;font-weight:700}
.xchip[disabled]{opacity:.35;cursor:not-allowed}
.xgrid--4{grid-template-columns:repeat(4,1fr)}
.xgrid--6{grid-template-columns:repeat(4,1fr)}
.xgrid--8{grid-template-columns:repeat(4,1fr);gap:6px}
.xstar{display:flex;justify-content:center;gap:6px;margin:6px 0 4px;font-size:34px;line-height:1}
.xstar span{color:rgba(242,235,221,.18)}
.xstar span.is-on{color:#D4AA67;animation:xpop .45s cubic-bezier(.2,1.6,.4,1) both}
.xstar span:nth-child(2){animation-delay:.12s}.xstar span:nth-child(3){animation-delay:.24s}
@keyframes xpop{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
.xwin{text-align:center}
.xacts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.xbtn--line{background:transparent;border:1px solid #D4AA67;color:#E8C995!important}
.xq__img{aspect-ratio:4/3;overflow:hidden;border:1px solid rgba(212,170,103,.4);margin:4px 0 12px;background:#132D27}
.xq__img img{width:100%;height:100%;object-fit:cover;display:block}
.xq__q{font-size:15px;color:#C9D2CC!important;margin-bottom:6px!important}
.xq__name{font:500 26px/1.15 "Cormorant Garamond",Georgia,serif;color:#F2EBDD!important}
[dir=rtl] .xq__name{font-family:inherit;font-weight:700;font-size:20px}
.xopts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.xopts--code .xopt{font:700 24px/1 system-ui}
.xopt{min-height:54px;padding:8px 10px;border:1px solid rgba(242,235,221,.22);background:rgba(10,26,22,.6);color:#F2EBDD;font-size:15px;font-weight:600;cursor:pointer;line-height:1.25;transition:background .2s,border-color .2s}
.xopt:hover:not([disabled]){border-color:#D4AA67}
.xopt.is-ok{background:rgba(134,211,154,.18);border-color:#86D39A;color:#E9F8EC}
.xopt.is-bad{background:rgba(229,138,150,.16);border-color:#E58A96}
.xopt[disabled]{cursor:default}
.xq__msg{min-height:1.4em;margin:10px 0 0!important;text-align:center;font-weight:700;color:#E8C995!important}
@media (max-width:380px){.xopts{grid-template-columns:1fr}.xopts--code{grid-template-columns:1fr 1fr}.xtile__i{flex-basis:44px;height:44px}.xstar{font-size:28px}}
@media (prefers-reduced-motion:reduce){.xstar span.is-on{animation:none}}