.pile{display:flex;flex-direction:column;justify-content:center;align-items:center;width:27px;flex-shrink:0;color:var(--panel-body)}
.pile svg{width:23px}
.pile small{font-size:10px}
.pile b{color:var(--gold);font:19px var(--font-card);font-family:var(--font-card);font-size:20px}
.play-card{position:relative;flex:0 1 calc(140px * var(--ui-scale));min-width:90px;background:var(--paper);border:2px solid var(--card-edge);border-radius:8px;text-align:center;display:flex;flex-direction:column;justify-content:flex-start;padding:7px 8px 6px;box-shadow:3px 3px 0 var(--card-shadow);border-color:var(--card-edge);color:var(--ink);--suit:var(--steel);aspect-ratio:5/7;height:100%;max-width:calc(150px * var(--ui-scale));overflow:hidden;isolation:isolate}
.play-card.rune{background:var(--paper);border-color:var(--card-edge);--suit:var(--rune)}
.card-art{display:block;color:#e3d19a}
.card-art svg{width:28px;height:28px}
.play-card strong{font:700 16px/1.1 var(--font-ui);display:block;margin:0 0 3px;font-family:var(--font-card);color:var(--ink);z-index:2;line-height:1.2}
.play-card small{font-size:8px;line-height:1.2}
.play-card.playing{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),3px 3px 0 var(--card-shadow)}
.reactions{display:flex;flex-direction:column;justify-content:center;width:105px;flex-shrink:0;gap:9px}
.reaction{display:flex;align-items:center;gap:3px;padding:6px 4px;border:2px solid var(--card-edge);background:var(--paper);border-color:var(--card-edge);border-radius:8px;box-shadow:3px 3px 0 var(--card-shadow);color:var(--ink);min-height:64px}
.reaction svg{width:19px;height:22px;color:#cab985}
.reaction span{font-size:12px;font-family:var(--font-card);font-weight:600;line-height:1.2}
.reaction small{display:block;font-size:11px;color:var(--card-shadow);margin-top:4px;font-weight:400;font-family:var(--font-detail);line-height:1.25}
@media(max-width:1200px){
.reactions{width:100px}
.reaction span{font-size:11px;font-family:var(--font-card)}
.play-card strong{font-size:14px;font-family:var(--font-card)}
.pile{width:23px;color:var(--panel-body)}
.card-art svg{width:23px;height:23px}
.reaction .item-art{width:28px}
.play-card{padding:6px;min-width:85px;background:var(--paper);border-color:var(--card-edge);border-radius:8px;box-shadow:3px 3px 0 var(--card-shadow);color:var(--ink)}
.card-value{font-size:22px;font-family:var(--font-card)}
.card-footer{font-size:10px;border-top:1px solid var(--ink);color:var(--ink)}
}
.card-stack{display:grid;place-items:center;width:25px;height:35px;background:repeating-linear-gradient(45deg,#31576b 0 4px,#40687a 4px 6px);border:2px solid var(--paper);border-radius:3px;box-shadow:-2px 2px #719082;margin-bottom:6px;color:var(--paper);font-weight:700}
.play-card::after{content:'';position:absolute;inset:3px;border:1px solid var(--card-inset);border-radius:5px;pointer-events:none;border-color:var(--card-inset)}
.play-card.guard{--suit:var(--guard)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;color:var(--suit);text-align:left;position:relative;z-index:2}
.card-value{font-size:25px;font-weight:700;line-height:1;font-family:var(--font-card);font-variant-numeric:tabular-nums}
.play-card .card-value small{display:block;color:var(--suit);font-size:10px!important;margin-top:2px;line-height:1.1!important;font-family:var(--font-ui);font-weight:500}
.card-suit{font-size:19px;line-height:1}
.play-card .card-art{position:relative;display:grid;place-items:center;flex:1;min-height:28px;margin:0 0 3px;color:var(--suit)}
.card-art::before{content:'';position:absolute;width:52px;height:52px;background:#decbbf;transform:rotate(45deg)}
.card-art.rune::before{background:#d0c8d9;border-radius:50%}
.card-art.guard::before{background:#c3d0ce;border-radius:50%;transform:none}
.play-card .item-art{position:absolute;width:104px;height:115%;max-width:100%;object-fit:contain;z-index:1}
.card-art.quick .item-art{transform:rotate(25deg)}
.card-art.heavy .item-art{transform:rotate(-23deg)}
.card-art.cleave .item-art{transform:rotate(40deg)}
.card-effect{font-size:11px;line-height:1.2;min-height:10px;z-index:2;color:var(--ink);font-family:var(--font-detail)}
.card-footer{display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding-top:4px;margin-top:4px;font-size:11px;color:var(--ink);font-family:var(--font-detail);line-height:1.2}
.play-card .card-status{color:var(--card-shadow);font-size:11px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-detail);line-height:1.2}
.play-card.playing .card-status{color:#80522b;font-weight:700}
.reaction .item-art{width:35px;height:45px}
@media(max-height:760px){
.card-effect{display:none;color:var(--ink)}
.play-card strong{font-size:15px;font-family:var(--font-card)}
.card-value{font-size:23px;font-family:var(--font-card)}
.reaction{min-height:57px;background:var(--paper);border-color:var(--card-edge);border-radius:8px;box-shadow:3px 3px 0 var(--card-shadow);color:var(--ink)}
.play-card .card-value small{font-size:10px!important;font-family:var(--font-ui)}
.card-footer{font-size:10px;border-top:1px solid var(--ink);color:var(--ink)}
:is(#hand,.hand-transit-host) .card-effect{font-size:10px}
}
@media(max-width:1000px){
.card-effect{display:none;color:var(--ink)}
.play-card{flex-basis:135px;background:var(--paper);border-color:var(--card-edge);border-radius:8px;box-shadow:3px 3px 0 var(--card-shadow);color:var(--ink)}
:is(#hand,.hand-transit-host) .reactions{width:122px}
:is(#hand,.hand-transit-host) .reaction .item-art{width:22px}
}
@media(prefers-reduced-motion:reduce){
.play-card{transition:none;background:var(--paper);border-color:var(--card-edge);border-radius:8px;box-shadow:3px 3px 0 var(--card-shadow);color:var(--ink)}
#interface .editor-card{transition:none;animation:none;transform:none;box-shadow:3px 3px 0 var(--card-shadow)}
}
.play-card .card-art .item-art{transform:none}
#interface .editor-card{--suit:var(--steel);isolation:isolate;position:relative;width:100%;height:auto;max-width:none;min-width:0;min-height:0;aspect-ratio:5/7;flex:none;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3px;padding:8px;border:2px solid var(--card-edge);border-radius:8px;background:var(--paper);color:var(--ink);text-align:center;overflow:visible;box-shadow:3px 3px 0 var(--card-shadow);transform:none;transform-origin:50% 75%;transition:transform 150ms ease,box-shadow 150ms ease,border-color 150ms ease,background 150ms ease}
#interface .editor-card.selected{background:var(--card-selected);border-color:var(--card-selected-edge);box-shadow:0 0 0 1px var(--gold),3px 3px 0 var(--card-shadow)}
#interface .editor-card .card-top{position:static;display:flex;flex-shrink:0;justify-content:space-between;align-items:start;gap:3px;height:calc(36px * var(--ui-scale));color:var(--suit);z-index:2;text-align:left}
#interface .editor-card .card-value{display:block;font-size:calc(23px * var(--ui-scale));line-height:1;text-align:left;font-family:var(--font-card)}
#interface .editor-card .card-value small{position:static;display:block;font-size:calc(10px * var(--ui-scale));line-height:1.1;color:var(--suit);font-weight:500;font-family:var(--font-ui);margin-top:2px}
#interface .editor-card .card-suit{font-size:20px;color:var(--suit);line-height:1}
#interface .editor-card .card-art{position:relative;display:grid;place-items:center;flex:1;min-height:24px;margin:0;color:var(--suit)}
#interface .editor-card .card-art::before{width:32px;height:32px}
#interface .editor-card .item-art{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:100%;margin:0;object-fit:contain;transform:none}
#interface .editor-card strong{font:700 calc(14px * var(--ui-scale))/1.15 var(--font-ui);color:var(--ink);margin:0;flex-shrink:0;height:2.3em;overflow:hidden;overflow-wrap:anywhere;font-family:var(--font-card);z-index:2}
#interface .editor-card .card-footer{display:flex;justify-content:space-between;flex-shrink:0;font-size:calc(11px * var(--ui-scale));line-height:1.15;margin:0;padding-top:4px;height:calc(20px * var(--ui-scale));border-top:1px solid var(--ink);font-family:var(--font-detail);color:var(--ink)}
#interface .editor-card .card-footer span{font:inherit;color:inherit}
#interface .editor-card[aria-disabled="true"]{border-style:dashed;box-shadow:none}
#interface .editor-card[data-owned="false"]{opacity:.5;border-style:solid;box-shadow:none}
#interface .editor-card[data-owned="false"]:active{transform:none;box-shadow:none}@media (hover:hover){#interface .editor-card[data-owned="false"]:hover{transform:none;box-shadow:none}}
#interface .skill-reward{width:var(--editor-card);pointer-events:none;align-self:flex-start}
#interface .draft-card{padding:4px;gap:2px;border-radius:5px;container-type:inline-size}
/* The name follows the face's width (five columns once a joker is owned), so a word is never broken across lines. */
#interface .draft-card strong{font-size:clamp(7.5px,16.5cqw,calc(10px * var(--ui-scale)));line-height:1.1;height:2.2em;min-height:2.2em;display:grid;place-items:center}
#interface .draft-card .card-art::before{width:24px;height:24px}
@media (hover:hover){#interface .editor-card:hover{background:var(--card-hover);border-color:var(--card-hover-edge);box-shadow:3px 5px 0 var(--card-shadow);transform:translateY(-4px) rotate(-1deg);z-index:2}}
@media (hover:hover){#interface .editor-card.selected:hover{background:var(--card-selected-hover);border-color:var(--card-selected-hover-edge)}}
#interface .editor-card:focus-visible{outline:3px solid var(--card-focus);outline-offset:3px}
#interface .editor-card:active{background:var(--card-selected-hover);border-color:var(--card-focus);box-shadow:3px 7px 0 var(--card-shadow);transform:translateY(-7px) rotate(-2deg) scale(1.04);z-index:3}
@media (hover:hover){#interface.deck-dragging .editor-card:hover{transform:none}}
#interface.deck-dragging .deck-grid{pointer-events:auto}
#interface.deck-dragging .deck-grid .editor-card{transition:transform 200ms cubic-bezier(.2,.75,.25,1);pointer-events:none}
#interface .deck-grid .editor-card.card-target{outline:3px solid var(--gold);outline-offset:2px;background:var(--card-selected)}
.reduced #interface .editor-card{transition:none!important;animation:none!important;transform:none!important}
#interface .editor-card.rune{--suit:var(--rune)}
#interface .editor-card.guard{--suit:var(--guard)}
#interface .editor-card::after{content:"";position:absolute;inset:3px;border:1px solid var(--card-inset);border-radius:5px;pointer-events:none}
#interface .draft-card.empty{border-style:dashed;box-shadow:none;background:var(--surface-inset);color:var(--screen-muted);justify-content:center}
#interface .draft-card.empty strong{color:var(--screen-muted);height:auto}
#interface .editor-card.game-drag-source{visibility:hidden!important}
.card-punches{position:absolute;top:5px;left:8px;right:8px;height:8px;display:flex;gap:4px;pointer-events:none;z-index:2}
.card-punches i{height:8px;flex:1;background:var(--ink);opacity:.8}
.card-punches i[data-hole="false"]{background:transparent}
.play-card .card-top{padding-top:9px}
#interface .editor-card:not(.draft-card) .card-top{padding-top:8px;height:calc(44px * var(--ui-scale))}
#interface .draft-card .card-punches{display:none}
/* One size at a UI scale (--card-width): the window and the chat never shrink a card. */
:is(#hand,.hand-transit-host) .play-card{flex:none;width:var(--card-width);height:var(--card-height);max-width:none;min-width:0;min-height:0;aspect-ratio:5/7;overflow:visible}
:is(#hand,.hand-transit-host) .play-card strong{font-size:calc(14px * var(--ui-scale));line-height:1.12;margin:2px 0;flex-shrink:0}
:is(#hand,.hand-transit-host) .card-top{flex-shrink:0}
:is(#hand,.hand-transit-host) .card-art{min-height:20px;flex:1;margin:1px 0;overflow:visible}
:is(#hand,.hand-transit-host) .card-art .item-art{width:100%;height:100%;position:absolute;object-fit:contain}
:is(#hand,.hand-transit-host) .card-art::before{width:30px;height:30px}
:is(#hand,.hand-transit-host) .card-effect{display:block;font-size:11px;line-height:1.1;min-height:0}
:is(#hand,.hand-transit-host) .card-footer{font-size:12px;line-height:1.1;margin:3px 0 0;padding-top:3px;flex-shrink:0}
:is(#hand,.hand-transit-host) .card-status{font-size:11px;white-space:normal;overflow:visible;text-overflow:unset;line-height:1.1;flex-shrink:0}
:is(#hand,.hand-transit-host) .reactions{width:calc(126px * var(--ui-scale));gap:6px}
:is(#hand,.hand-transit-host) .reaction{min-height:62px;flex-shrink:0;padding:5px}
:is(#hand,.hand-transit-host) .reaction span{font-size:calc(12px * var(--ui-scale))}
:is(#hand,.hand-transit-host) .reaction small{font-size:11px;line-height:1.2}
:is(#hand,.hand-transit-host) .reaction .item-art{width:28px;height:38px}
@media(max-height:760px) and (max-width:1050px){
#interface:not(.editor-closed) :is(#hand,.hand-transit-host) .reactions{width:104px}
#interface:not(.editor-closed) :is(#hand,.hand-transit-host) .reaction{padding:4px;gap:3px}
#interface:not(.editor-closed) :is(#hand,.hand-transit-host) .reaction .item-art{width:20px;height:30px}
}
:is(#hand,.hand-transit-host,.joker-preview) .joker{transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease}
.play-card.joker,#interface .editor-card.joker{border-style:double;border-width:3px;border-color:var(--joker-frame);--suit:var(--ember-edge)}
.play-card.joker::after,#interface .editor-card.joker::after{border-color:var(--joker-frame);border-style:dashed}
.card-art.joker-art::before{background:var(--joker-lozenge);background-size:14px 14px;border-radius:0;outline:2px solid var(--joker-frame);outline-offset:-2px;transform:rotate(45deg)}
.card-art.joker-art .joker-motif{position:absolute;inset:0;width:100%;height:100%;z-index:2;color:var(--ember-edge);pointer-events:none;filter:drop-shadow(1px 1px 0 var(--ink))}
.card-suit .joker-mark{width:1em;height:1em;vertical-align:-.1em}
/* The drawn pips take the size the typed ones had. */
.card-suit .suit-mark{width:.66em;height:.66em;vertical-align:0}
.play-card.joker .card-suit,#interface .editor-card.joker .card-suit{color:var(--ember-edge)}
:is(#hand,.hand-transit-host,.joker-preview) .joker .joker-key{position:absolute;top:-7px;left:-7px;z-index:3;width:calc(19px * var(--ui-scale));height:calc(19px * var(--ui-scale));border-radius:50%;background:var(--ink);color:var(--paper);border:1px solid var(--paper);font:700 calc(11px * var(--ui-scale)) var(--font-card);line-height:1;display:grid;place-items:center;pointer-events:none}
:is(#hand,.hand-transit-host,.joker-preview) .joker[data-ready="true"]{transform:translateY(-6px);border-color:var(--ember-edge);box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--ember-edge),4px 5px 0 var(--card-shadow);animation:joker-float 2.4s ease-in-out infinite}
:is(#hand,.hand-transit-host,.joker-preview) .joker[data-ready="true"]::before{content:'';position:absolute;inset:-10px;padding:3px;border-radius:14px;z-index:-1;pointer-events:none;background:repeating-conic-gradient(from var(--joker-spin),var(--gold) 0 6%,var(--joker-frame) 0 12.5%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:joker-spin 4s linear infinite}
:is(#hand,.hand-transit-host,.joker-preview) .joker[data-ready="true"] .joker-key{background:var(--ember-edge);color:var(--ink);border-color:var(--ink)}
@media (hover:hover){:is(#hand,.hand-transit-host,.joker-preview) .joker[data-ready="true"]:hover{transform:translateY(-7px) scale(1.02);animation:none}}
:is(#hand,.hand-transit-host,.joker-preview) .joker.armed{transform:translateY(-7px) scale(1.02);border-color:var(--gold);box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--gold),4px 5px 0 var(--card-shadow);animation:none}@media (hover:hover){:is(#hand,.hand-transit-host,.joker-preview) .joker.armed:hover{transform:translateY(-7px) scale(1.02);border-color:var(--gold);box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--gold),4px 5px 0 var(--card-shadow);animation:none}}
:is(#hand,.hand-transit-host,.joker-preview) .joker.armed::before{background:repeating-conic-gradient(from var(--joker-spin),var(--paper) 0 6%,var(--gold) 0 12.5%);animation:joker-spin 1.2s linear infinite}
:is(#hand,.hand-transit-host,.joker-preview) .joker:focus-visible{outline:3px solid var(--card-focus);outline-offset:2px}
:is(#hand,.hand-transit-host,.joker-preview) .joker.game-drag-source{opacity:.35;animation:none}
:is(#hand,.hand-transit-host,.joker-preview) .joker.game-drag-source::before{display:none}
:is(#hand,.hand-transit-host) .play-card.dealt{animation:card-deal 260ms cubic-bezier(.2,.9,.3,1.2) both}
:is(#hand,.hand-transit-host,.joker-preview) .joker[data-ready="true"].dealt{animation:joker-deal 380ms cubic-bezier(.2,.9,.3,1.25) both,joker-float 2.4s ease-in-out 380ms infinite}
@property --joker-spin{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes joker-spin{to{--joker-spin:360deg}}
@keyframes joker-float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(-9px)}}
@keyframes card-deal{from{transform:translateY(34px) rotate(-4deg) scale(.9);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes joker-deal{from{transform:translateY(40px) rotate(-6deg) scale(.86);opacity:0}55%{opacity:1;transform:translateY(-6px) scale(1.02)}to{transform:translateY(-6px);opacity:1}}
@media(prefers-reduced-motion:reduce){
:is(#hand,.hand-transit-host,.joker-preview) .joker,:is(#hand,.hand-transit-host,.joker-preview) .joker[data-ready="true"],:is(#hand,.hand-transit-host,.joker-preview) .joker[data-ready="true"]::before,:is(#hand,.hand-transit-host,.joker-preview) .joker.armed::before,:is(#hand,.hand-transit-host) .play-card.dealt{transition:none;animation:none}
@media (hover:hover){:is(#hand,.hand-transit-host,.joker-preview) .joker[data-ready="true"]:hover{transform:translateY(-6px)}}
}
.reduced :is(#hand,.hand-transit-host,.joker-preview) .joker,.reduced :is(#hand,.hand-transit-host,.joker-preview) .joker[data-ready="true"],.reduced :is(#hand,.hand-transit-host,.joker-preview) .joker[data-ready="true"]::before,.reduced :is(#hand,.hand-transit-host,.joker-preview) .joker.armed::before,.reduced :is(#hand,.hand-transit-host) .play-card.dealt{transition:none;animation:none}
@media (hover:hover){.reduced :is(#hand,.hand-transit-host,.joker-preview) .joker[data-ready="true"]:hover{transform:translateY(-6px)}}
:is(#hand,.hand-transit-host) .pile{width:34px}
:is(#hand,.hand-transit-host) .pile small{font-size:11px}

/* Copies flying to the discard pile are transient, inert presentation of a resolved card. */
.hand-transit{position:fixed!important;pointer-events:none!important;z-index:30;max-width:none;min-width:0;animation:none!important;transform-origin:center;overflow:hidden}

.hand-transit-host{position:fixed;inset:0;pointer-events:none;z-index:100}
/* Hand positions without a copy: a quiet dashed outline for an active position, a fainter dotted
   one for the position not yet earned. No face, count or prompt; excluded from pile counts. */
:is(#hand,.hand-transit-host) .hand-slot{flex:none;width:var(--card-width);height:var(--card-height);max-width:none;min-width:0;min-height:0;aspect-ratio:5/7;border:2px dashed var(--card-edge);border-radius:8px;background:transparent;opacity:.5;pointer-events:none}
:is(#hand,.hand-transit-host) .hand-slot.future{opacity:.45;border-style:dashed;border-color:var(--gold)}
/* The next attacking face carries a stored release: a thin violet halo, nothing added to the layout. */
:is(#hand,.hand-transit-host) .play-card[data-release="true"]{box-shadow:0 0 0 1px #b39bd8,0 0 0 3px #b39bd855,3px 3px 0 var(--card-shadow)}
/* The joker that turned up sits beside the hand as an extra, slightly turned card (no outline or gap when none is held). */
:is(#hand,.hand-transit-host,.joker-preview) .joker.reserve{rotate:4deg;margin:0 calc(18px * var(--ui-scale))}
/* The board's effects area: the consequences in force beside the
   discard pile, half-height ivory markers with the card's own art, never a card copy. A fixed
   column one marker wide, so the hand, its outlines, the piles and the held joker never move as
   a marker appears or ends; nothing is drawn while no effect exists. */
:is(#hand,.hand-transit-host) .effects{--effect-height:calc((var(--hand-height) - 32px) / 2 - 3px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;flex:none;min-width:calc(var(--effect-height) * 5 / 7);height:calc(var(--hand-height) - 32px);margin-left:calc(4px * var(--ui-scale))}
.effect{position:relative;box-sizing:border-box;height:var(--effect-height);aspect-ratio:5/7;width:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:4px 3px 9px;background:var(--paper);border:2px solid var(--card-edge);border-radius:6px;box-shadow:2px 2px 0 var(--card-shadow);color:var(--ink);text-align:center;overflow:hidden;isolation:isolate;cursor:var(--cursor-pointer);--suit:var(--guard)}
.effect::after{content:'';position:absolute;inset:2px;border:1px solid var(--card-inset);border-radius:4px;pointer-events:none}
.effect[data-effect="charge"]{--suit:var(--rune)}
.effect-art{position:relative;display:grid;place-items:center;width:40%;aspect-ratio:1;margin:1px 0 2px}
.effect-art::before{content:'';position:absolute;inset:8%;background:#c3d0ce;border-radius:50%}
.effect[data-effect="charge"] .effect-art::before{background:#d0c8d9}
.effect-art .item-art{position:relative;width:100%;height:100%;z-index:1}
.effect b{font:700 calc(18px * var(--ui-scale))/1 var(--font-card);color:var(--suit);font-variant-numeric:tabular-nums;z-index:1}
.effect>small{font:calc(9px * var(--ui-scale))/1.1 var(--font-ui);color:var(--suit);z-index:1}
.effect strong{font:700 calc(10px * var(--ui-scale))/1.1 var(--font-card);color:var(--ink);margin-top:auto;z-index:1;overflow-wrap:anywhere;white-space:nowrap}
.effect-link{font:calc(9px * var(--ui-scale))/1.1 var(--font-detail);color:var(--rune);z-index:1;white-space:nowrap}
.effect-bar{position:absolute;left:5px;right:5px;bottom:4px;height:3px;background:var(--card-inset);z-index:1}
.effect-bar i{display:block;height:100%;background:var(--suit);transition:width 100ms linear}
.effect-tick{position:absolute;top:2px;right:4px;z-index:2;font:700 calc(14px * var(--ui-scale))/1 var(--font-card);color:var(--suit);-webkit-text-stroke:2px var(--paper);paint-order:stroke fill;animation:effect-tick 1400ms ease-out both}
/* The charge about to be released by the weapon card now playing: the same violet ring that card wears. */
.effect[data-linked]{box-shadow:0 0 0 1px #b39bd8,0 0 0 3px #b39bd855,2px 2px 0 var(--card-shadow)}
/* An ended marker is explicitly inactive: grey, dashed, stamped, then gone. It never reads as protection. */
.effect[data-ended]{filter:grayscale(1);opacity:.6;border-style:dashed;box-shadow:none}
.effect-stamp{position:absolute;left:-6px;right:-6px;top:42%;z-index:2;transform:rotate(-9deg);background:var(--ink);color:var(--paper);font:700 calc(9px * var(--ui-scale))/1.6 var(--font-card);letter-spacing:.6px;text-transform:uppercase;font-style:normal}
.effect.dealt{animation:card-deal 260ms cubic-bezier(.2,.9,.3,1.2) both}
.effect:focus-visible{outline:3px solid var(--card-focus);outline-offset:2px}
/* The released charge runs to the weapon card that spent it. */
.charge-streak{position:fixed;z-index:31;height:3px;margin-top:-1.5px;pointer-events:none;transform-origin:0 50%;background:linear-gradient(90deg,#b39bd800,#d5c0f0 40%,#b39bd8);box-shadow:0 0 6px #b39bd8aa}
@keyframes effect-tick{from{transform:translateY(6px);opacity:0}15%,70%{opacity:1}to{transform:translateY(-7px);opacity:0}}
@media(prefers-reduced-motion:reduce){
.effect.dealt,.effect-tick{animation:none}
.effect-bar i{transition:none}
}
.reduced .effect.dealt,.reduced .effect-tick{animation:none}
/* ===== The phone hand (docs/MOBILE-PLAN.md section 7) ===== */
/* Four faces across the width at 5:7, each overlapping the one before by its frame only; the
   effect text is hidden (a hold shows the whole card). Face sizes are the owner's, fixed. */
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) :is(.play-card,.hand-slot){flex:0 0 var(--phone-card);width:var(--phone-card);max-width:none;height:auto}
:root[data-layout="portrait"] #hand :is(.play-card,.hand-slot)+:is(.play-card,.hand-slot){margin-left:calc(-1 * var(--overlap))}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .play-card{padding:5px 6px 4px;border-radius:7px;box-shadow:2px 3px 0 var(--card-shadow)}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .play-card::after{inset:2px;border-radius:5px}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .card-punches{display:flex;top:4px;left:8px;right:8px;height:5px;gap:3px}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .card-punches i{height:5px}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .card-top{padding-top:7px}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .card-value{font-size:24px}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .play-card .card-value small{font-size:10px!important}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .card-suit{font-size:17px}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .card-art::before{width:30px;height:30px}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .play-card strong{font-size:14px;line-height:1.1;margin:2px 0}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .card-effect{display:none}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .card-footer{font-size:11px;margin-top:3px;padding-top:3px}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .card-status{font-size:11px}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .card-status[data-quiet]{display:none}
/* The collection's card faces on a phone: sized to the card like the hand's, not multiplied by the
   120% text (the owner saw the scaled names and values run thick and overflow a 110px card). */
:root[data-layout="portrait"] #interface .editor-card:not(.draft-card) .card-top{height:40px;padding-top:7px}
:root[data-layout="portrait"] #interface .editor-card:not(.draft-card) .card-value{font-size:22px}
:root[data-layout="portrait"] #interface .editor-card:not(.draft-card) .card-value small{font-size:10px}
:root[data-layout="portrait"] #interface .editor-card:not(.draft-card) .card-suit{font-size:17px}
:root[data-layout="portrait"] #interface .editor-card:not(.draft-card) strong{font-size:14px;line-height:1.15}
:root[data-layout="portrait"] #interface .editor-card:not(.draft-card) .card-footer{font-size:11px;height:20px}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host,.joker-preview) .joker.reserve{margin:0 0 0 2px;rotate:3deg}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host,.joker-preview) .joker[data-ready="true"]::before{inset:-5px;border-radius:9px}
/* The dragged joker keeps the phone's face: the ghost copies each element's style but not its
   pseudo-elements, which would otherwise take the desktop's (the owner saw an oversized diamond). */
:root[data-layout="portrait"] .game-drag-ghost.phone-face::after{inset:2px;border-radius:5px}
:root[data-layout="portrait"] .game-drag-ghost.phone-face::before{display:none}
:root[data-layout="portrait"] .game-drag-ghost.phone-face .card-art::before{width:30px;height:30px}
:root[data-layout="portrait"] .game-drag-ghost.phone-face :is(.joker-key,.card-effect){display:none}
/* The joker's key has no meaning without a keyboard. */
:root[data-touch] :is(#hand,.hand-transit-host,.joker-preview) .joker .joker-key{display:none}
/* Draw and Discard leave the row: side by side above the hand's right end, with Stop at the end
   of the same row (owner's pick E); outside a fight Stop's place stays empty. */
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .pile{position:absolute;bottom:calc(100% + 4px);width:44px}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .pile[data-pile="draw"]{right:118px}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .pile[data-pile="discard"]{right:70px}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .pile b{font-size:18px}
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .pile small{font-size:11px}
:root[data-layout="portrait"] .card-stack{width:22px;height:31px;font-size:12px;margin-bottom:3px}
:root[data-layout="portrait"] #hand .hand-stop{position:absolute;right:8px;bottom:calc(100% + 12px)}
/* The effect markers stand above the hand's left end, larger than on a desktop; they rise above
   the controls line while it shows. */
:root[data-layout="portrait"] :is(#hand,.hand-transit-host) .effects{--effect-height:100px;position:absolute;left:6px;bottom:calc(100% + 6px);height:auto;min-width:0;margin:0;flex-direction:row;gap:6px}
:root[data-layout="portrait"] #combat:has(.movement-hint) #hand .effects{bottom:calc(100% + 44px)}
:root[data-layout="portrait"] .effect{padding:5px 4px 10px}
:root[data-layout="portrait"] .effect b{font-size:24px}
:root[data-layout="portrait"] .effect>small{font-size:11px}
:root[data-layout="portrait"] .effect strong{font-size:12px}
/* A collection card's name keeps 11px on the narrowest phones, where its width would take it lower. */
:root[data-layout="portrait"] #interface .draft-card strong{font-size:max(11px,min(16.5cqw,calc(10px * var(--ui-scale))))}
:root[data-layout="portrait"] .effect-stamp{font-size:11px}
/* A rune card's seat (MINING-AND-RUNES-PROPOSAL): the rune the next cast spends and the count carried, at the art's lower right corner; dashed and empty when none are carried. */
.rune-socket{position:relative;z-index:3;width:calc(32px * var(--ui-scale));height:calc(32px * var(--ui-scale));display:grid;place-items:center;background:var(--paper);border:2px solid var(--card-edge);border-radius:8px;box-shadow:inset 0 0 0 2px #d2c8ad,2px 2px 0 var(--card-shadow);pointer-events:none}
.card-art>.rune-socket{position:absolute;right:0;bottom:0}
.rune-socket .item-art{width:82%;height:82%;object-fit:contain}
.rune-socket b{position:absolute;z-index:2;right:-8px;bottom:-8px;min-width:22px;padding:2px 5px 1px;border-radius:9px;background:var(--ink);color:var(--paper);font:700 11px/1.1 var(--font-card);font-variant-numeric:tabular-nums;border:1px solid var(--paper);text-align:center}
.rune-socket.empty{border-style:dashed;box-shadow:none;background:#e3dac2}
.rune-socket.empty .item-art{filter:grayscale(1) opacity(.3)}
.rune-socket.empty b{background:var(--card-shadow)}
#interface .draft-card .card-art>.rune-socket{right:6px;width:18px;height:18px;border-width:1px;border-radius:5px}
#interface .draft-card .rune-socket b{font-size:11px;right:-5px;bottom:-6px;min-width:14px;padding:1px 3px 0}
/* The rune square in play (owner, 26 September 2026): through the card's windup it lifts a touch
   and glows in its rune's colour; the cast's ring and count are `hand-motion.ts`. A rune card dealt
   with no runes says so in a soft red, and its empty square breathes, slowly. */
.rune-socket[data-rune="pale"]{--rune-glow:#8e7fce}
.rune-socket[data-rune="star-iron"]{--rune-glow:#e48a45}
#hand .play-card.playing .rune-socket:not(.empty){animation:rune-charge .45s ease-out both}
@keyframes rune-charge{to{transform:translateY(-2px) scale(1.08);box-shadow:inset 0 0 0 2px #d2c8ad,2px 2px 0 var(--card-shadow),0 0 0 2px var(--rune-glow),0 0 9px 2px var(--rune-glow)}}
.rune-flare{position:fixed;z-index:101;pointer-events:none;box-sizing:border-box;border:2px solid var(--rune-glow);border-radius:10px;box-shadow:0 0 10px var(--rune-glow),inset 0 0 6px var(--rune-glow)}
#hand .play-card[data-reason="needs-runes"] .card-status{color:var(--card-wanting);font-weight:700}
#hand .play-card[data-reason="needs-runes"] .rune-socket.empty{border-color:var(--card-wanting);animation:rune-wanting 2.8s ease-in-out infinite}
@keyframes rune-wanting{0%,100%{box-shadow:0 0 0 0 #a8453e00}50%{box-shadow:0 0 0 3px #a8453e38,0 0 10px 1px #a8453e30}}
/* Its turn with no runes (owner, 26 September 2026, idea B): two soft red pulses on the card and
   its square over `ASIDE_SECONDS`, then the ordinary lean to the discard pile. */
#hand .play-card.refusing{animation:card-refuse .64s ease-in-out both}
#hand .play-card.refusing .rune-socket.empty{animation:socket-refuse .64s ease-in-out both}
@keyframes card-refuse{0%,50%,100%{border-color:var(--card-edge);box-shadow:3px 3px 0 var(--card-shadow)}25%,75%{border-color:var(--card-wanting);box-shadow:0 0 0 2px #a8453e99,0 0 16px #a8453e80,3px 3px 0 var(--card-shadow)}}
@keyframes socket-refuse{0%,50%,100%{transform:none;background:#e3dac2}25%,75%{transform:scale(1.16);background:#bb6c5c}}
@media(prefers-reduced-motion:reduce){#hand .play-card .rune-socket{animation:none}#hand .play-card.refusing{animation:none;border-color:var(--card-wanting)}#hand .play-card.playing .rune-socket:not(.empty){box-shadow:inset 0 0 0 2px #d2c8ad,2px 2px 0 var(--card-shadow),0 0 0 2px var(--rune-glow)}}
.reduced #hand .play-card .rune-socket{animation:none}
.reduced #hand .play-card.refusing{animation:none;border-color:var(--card-wanting)}
.reduced #hand .play-card.playing .rune-socket:not(.empty){box-shadow:inset 0 0 0 2px #d2c8ad,2px 2px 0 var(--card-shadow),0 0 0 2px var(--rune-glow)}