/* The chosen Hand: one collection of sixteen original spell and summon cards. */
.card-hand {container-type:inline-size;--hand-accent:#e4bc76;position:relative;isolation:isolate;text-align:center;}
.card-hand[data-active-kind=spell] {--hand-accent:#c9a5f1;}
.card-hand h2 {max-width:830px;margin:0 auto;font:42px/1.2 Georgia,serif;letter-spacing:-1.1px;text-transform:none;color:#f5e6d3;}
.card-hand h2 em {font-style:normal;color:#ccb2ef;}.card-hand h2>span {color:#e4c48d;}
.card-hand .hand-track {--card-scale:2;--card-width:196px;--card-height:294px;--spread:min(72px,calc((100cqw - 360px)/15));height:448px;margin-top:36px;position:relative;isolation:isolate;}
.card-hand .hand-card {position:absolute;top:80px;left:50%;margin-left:calc(var(--card-width)/-2);width:var(--card-width);height:var(--card-height);padding:0;border:0;background:transparent;cursor:pointer;pointer-events:none;transform:translateX(calc(var(--d)*var(--spread))) translateY(var(--arc)) rotate(var(--angle));transform-origin:50% 80%;z-index:calc(10 + var(--i));--glow:#edbd6570;}
.card-hand .hand-card[data-kind=spell] {--glow:#b485ee77;}
.card-hand .hand-lift {display:block;position:relative;width:100%;height:100%;pointer-events:auto;filter:drop-shadow(0 12px 10px #0009);transition:transform .25s ease,filter .25s;}
.card-hand .hand-face {display:block;position:relative;width:98px;height:147px;transform:scale(var(--card-scale));transform-origin:0 0;background:url('../assets/spell-cards.png') no-repeat;image-rendering:pixelated;}
.card-hand .hand-portrait {position:absolute;left:17px;top:25px;width:64px;height:64px;max-width:none;image-rendering:pixelated;border-radius:15px 15px 0 0;box-shadow:0 0 0 1px #bd945766;}
.card-hand .hand-caption {position:absolute;left:7px;right:7px;top:100px;height:30px;display:flex;align-items:center;justify-content:center;color:#231b19;font:bold 9px/10px Georgia,serif;text-align:center;}
.card-hand .hand-card.is-active {z-index:60;}.card-hand .hand-card.is-active .hand-lift {transform:translateY(-86px) rotate(calc(-1*var(--angle)));filter:drop-shadow(0 12px 12px #0009) drop-shadow(0 0 16px var(--glow));}
.card-hand .hand-card:hover .hand-lift,.card-hand .hand-card:focus-visible .hand-lift {filter:drop-shadow(0 12px 12px #0009) drop-shadow(0 0 20px var(--glow));}
.card-hand button:focus-visible {outline:2px solid #f8dc9d;outline-offset:5px;}
.card-hand .hand-card:focus-visible {outline:none;}
.card-hand .hand-card:focus-visible .hand-lift {outline:2px solid #f8dc9d;outline-offset:5px;}
.card-hand .hand-info {min-height:144px;max-width:600px;margin:0 auto;padding:8px 20px 0;}
.card-hand .hand-role {font:10px Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--hand-accent);}
.card-hand .hand-info h3 {font:29px/1.2 Georgia,serif;margin:10px 0 9px;color:#f5e6d3;}
.card-hand .hand-info p {font:14px/1.65 Arial,sans-serif;color:#c5bdb1;margin:0;}
.card-hand .hand-controls {display:none;align-items:center;justify-content:center;gap:24px;}
.card-hand .hand-controls button {width:44px;height:44px;padding:0;color:#eadbc2;border:1px solid #c4a57366;background:#25202c99;font-size:22px;cursor:pointer;}
.card-hand .hand-controls button:hover {background:#554131;}
.card-hand .hand-position {font:10px Arial,sans-serif;color:#c9b7a1;letter-spacing:2px;font-variant-numeric:tabular-nums;}
.card-hand .hand-closing {margin:22px 0 0;font:italic 28px/1.35 Georgia,serif;color:#e8d7b9;}
.castle-room>.card-hand {--hand-width:min(1400px,calc(100vw - 48px));width:var(--hand-width);margin:90px calc((100% - var(--hand-width))/2) 0;}
@container(max-width:1000px) {
 .card-hand h2 {max-width:650px;padding:0 20px;font-size:35px;}
 .card-hand .hand-track {--card-scale:1;--card-width:98px;--card-height:147px;display:flex;gap:18px;height:225px;margin-top:20px;padding:40px 24px 28px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding:24px;scrollbar-width:thin;scrollbar-color:#9b825347 transparent;}
 .card-hand .hand-card {position:relative;left:auto;top:auto;margin:0;flex:none;transform:rotate(var(--tilt));scroll-snap-align:center;}
 .card-hand .hand-card.is-active .hand-lift {transform:translateY(-14px) rotate(calc(-1*var(--tilt)));}
 .card-hand .hand-info {min-height:154px;}
 .card-hand .hand-controls {display:flex;}
 .card-hand .hand-closing {margin-top:30px;}
}
@container(max-width:500px) {
 .card-hand h2 {font-size:30px;letter-spacing:-.7px;}
 .card-hand .hand-info {min-height:184px;padding-inline:20px;}
 .card-hand .hand-info h3 {font-size:26px;}
 .card-hand .hand-info p {font-size:13px;}
 .card-hand .hand-closing {padding:0 18px;font-size:24px;}
}
@media(prefers-reduced-motion:reduce) {.card-hand .hand-lift {transition:none;}}
.motion-paused .card-hand .hand-lift {transition:none;}