:root{--card-radius: 4px;--card-height: 10vh;--card-ratio: .7;--card-width: calc(var(--card-height) * var(--card-ratio));--color-red: red;--color-black: #212121}body{margin:1.5vh;font-size:14px;color:var(--color-black);font-family:Arial,Helvetica,sans-serif;-webkit-user-select:none;user-select:none;font-variant-emoji:text}[hidden]{display:none!important}fieldset{margin:0;padding:0;border:none}.animate{animation:pop-in .3s ease}@keyframes pop-in{0%{transform:scale(.95);opacity:.5}to{transform:scale(1);opacity:1}}#game{height:97vh;max-width:1024px;display:grid;gap:.5rem;grid-template-areas:"title title title" "castle enemy joker" "play play play" "discard tavern action" "hand hand hand";grid-template-rows:min-content 1.5fr 2fr 1fr 2fr;grid-template-columns:repeat(3,1fr)}@media (orientation: landscape){#game{grid-template-areas:"title title title title title title" "castle enemy joker discard tavern action" "play play play hand hand hand";grid-template-rows:min-content min-content 2fr;grid-template-columns:repeat(6,1fr)}}h1{grid-area:title;font-size:1.1rem;text-transform:lowercase;margin:0}h1:before{content:"//";color:#a9a9a9;margin-right:.25rem;font-weight:400}#castle_deck,#active_enemy,#joker_area,#play_area,#discard_pile,#tavern_deck,#player_hand{padding:.25rem;background-color:#f5f5f5;border:1px solid gainsboro;border-radius:4px;box-shadow:inset 0 0 6px #0000001a;display:flex;flex-direction:column}:is(#castle_deck,#active_enemy,#joker_area,#play_area,#discard_pile,#tavern_deck,#player_hand)>footer{margin-top:.25rem}:is(#castle_deck,#active_enemy,#joker_area,#play_area,#discard_pile,#tavern_deck,#player_hand)>header{margin:-.25rem -.25rem .25rem;padding:0 .25rem;border-top-left-radius:inherit;border-top-right-radius:inherit}:is(#castle_deck,#active_enemy,#joker_area,#play_area,#discard_pile,#tavern_deck,#player_hand)>header h2{font-size:1rem;font-weight:400;color:#a9a9a9;margin:0;text-transform:lowercase}:is(#castle_deck,#active_enemy,#joker_area,#play_area,#discard_pile,#tavern_deck,#player_hand)>header>hgroup{display:flex;justify-content:space-between;align-items:center}:is(#castle_deck,#active_enemy,#joker_area,#play_area,#discard_pile,#tavern_deck,#player_hand)>header>hgroup>p{margin:0;font-size:smaller;color:#a9a9a9}:is(#castle_deck,#active_enemy,#joker_area,#play_area,#discard_pile,#tavern_deck,#player_hand)>header>hgroup>p:before{content:"("}:is(#castle_deck,#active_enemy,#joker_area,#play_area,#discard_pile,#tavern_deck,#player_hand)>header>hgroup>p:after{content:")"}#castle_deck{grid-area:castle}#castle_deck>.content{flex-grow:1;display:flex;align-items:start;justify-content:center}#active_enemy{grid-area:enemy}#active_enemy>.content{flex-grow:1;display:flex;align-items:start;justify-content:center}#active_enemy>footer{display:grid;grid-template-rows:1fr 1fr;grid-template-columns:2fr 1fr 1fr 1fr;justify-items:end}#active_enemy>footer>label{justify-self:start}#active_enemy>footer>output{font-weight:700}#joker_area{grid-area:joker}#joker_area>fieldset{flex-grow:1;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;padding:0rem .5rem}#joker_area>fieldset>.card{grid-row:1 / span 1;grid-column:1 / span 1;place-self:center}#joker_area>fieldset>.card:first-child{place-self:start start;z-index:2}#joker_area>fieldset>.card-facedown:first-child{z-index:0}#joker_area>fieldset>.card:last-child{place-self:end end;z-index:1}#play_area{grid-area:play;background-color:snow}#play_area h2 output{font-weight:700}#play_area>.content{flex-grow:1;display:flex;align-items:center;justify-content:center;gap:.5rem}#play_area fieldset{display:flex;align-items:center;justify-content:space-around;gap:.25rem}#play_area fieldset:disabled{opacity:.6}#play_area fieldset[name=cards]{flex-grow:1;min-height:var(--card-height)}#play_area footer{display:flex;flex-direction:column;justify-content:flex-end;min-height:3rem;align-items:flex-start;font-size:smaller}#play_area footer output{font-weight:700}#discard_pile{grid-area:discard}#discard_pile>.content{flex-grow:1;display:flex;align-items:center;justify-content:center}#tavern_deck{grid-area:tavern}#tavern_deck>.content{flex-grow:1;display:flex;align-items:center;justify-content:center}#action_panel{grid-area:action;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.5rem}#action_panel>button{font-size:1.25rem;font-weight:700;border-radius:8px;border:none;transition:opacity .3s ease;box-shadow:1px 1px 0 0 currentColor;background-color:color-mix(in srgb,currentColor 45%,white 55%)}#action_panel>button:disabled{opacity:.5}#action_panel>button:hover:not(:disabled){cursor:pointer;background-color:color-mix(in srgb,currentColor 50%,white 50%)}#action_panel>button:active:not(:disabled){background-color:color-mix(in srgb,currentColor 55%,white 45%);box-shadow:inset 1px 1px 0 0 currentColor}#action_panel>button[name=validate]{grid-row:1 / span 1;grid-column:1 / span 1;color:#556b2f}#action_panel>button[name=reset]{grid-row:2 / span 1;grid-column:2 / span 1;color:#cd5c5c}#player_hand{grid-area:hand}#player_hand fieldset{flex-grow:1;display:grid;grid-template-rows:1fr 1fr;grid-template-columns:repeat(4,1fr);place-items:center;gap:.25rem}.deck{width:var(--card-width);aspect-ratio:var(--card-ratio);border-radius:var(--card-radius);display:grid;margin-bottom:8px;box-shadow:inset 0 0 2px #0003;background-color:#f8f8f8;background-image:radial-gradient(circle,transparent 40%,gainsboro 40%,gainsboro 50%,transparent 50%);background-repeat:no-repeat;background-position:center;background-size:50% 50%}.deck>.card{grid-area:1 / 1;visibility:hidden}.deck>.card:last-child{visibility:visible}.deck:has(>:nth-child(2)){box-shadow:1px 1px 0 var(--deck-color-light),2px 2px 0 var(--deck-color-dark)}.deck:has(>:nth-child(3)){box-shadow:1px 1px 0 var(--deck-color-light),2px 2px 0 var(--deck-color-dark),3px 3px 0 var(--deck-color-light),4px 4px 0 var(--deck-color-dark)}.deck:has(>:nth-child(4)){box-shadow:1px 1px 0 var(--deck-color-light),2px 2px 0 var(--deck-color-dark),3px 3px 0 var(--deck-color-light),4px 4px 0 var(--deck-color-dark),5px 5px 0 var(--deck-color-light),6px 6px 0 var(--deck-color-dark)}.deck:has(>:nth-child(5)){box-shadow:1px 1px 0 var(--deck-color-light),2px 2px 0 var(--deck-color-dark),3px 3px 0 var(--deck-color-light),4px 4px 0 var(--deck-color-dark),5px 5px 0 var(--deck-color-light),6px 6px 0 var(--deck-color-dark),7px 7px 0 var(--deck-color-light),8px 8px 0 var(--deck-color-dark)}.deck.deck-faceup{--deck-color-dark: #939db0;--deck-color-light: #f0f0f0}.deck.deck-facedown{--deck-color-dark: #3c3c3c;--deck-color-light: #939db0}.stack{position:relative;display:grid;width:calc(var(--card-width) + (var(--stack-count, 1) - 1) * .25rem);height:calc(var(--card-height) + (var(--stack-count, 1) - 1) * 1rem)}.stack:empty{width:0px;height:var(--card-height)}.stack .card,.stack .card-filler{position:absolute;top:0;left:0;z-index:var(--stack-index);transform:translate(calc(var(--stack-index) * .25rem),calc(var(--stack-index) * 1rem))}.card{--card-halo: deepskyblue;width:var(--card-width);aspect-ratio:var(--card-ratio);border-radius:var(--card-radius);perspective:1000px;background-color:transparent;border:none;margin:0;padding:0;text-align:inherit;font:inherit;color:inherit;appearance:none;transition:transform .5s ease}.card:hover:not(:disabled),.card:focus-visible:not(:disabled){cursor:pointer}:is(.card:hover:not(:disabled),.card:focus-visible:not(:disabled)) .card-front,:is(.card:hover:not(:disabled),.card:focus-visible:not(:disabled)) .card-back{box-shadow:0 4px 12px #0000004d,0 0 3px 1px var(--card-halo)}.card:hover:not(:disabled):nth-child(odd) .card-inner,.card:focus-visible:not(:disabled):nth-child(odd) .card-inner{transform:rotate(-3deg) scale(1.02)}.card:hover:not(:disabled):nth-child(2n) .card-inner,.card:focus-visible:not(:disabled):nth-child(2n) .card-inner{transform:rotate(3deg) scale(1.02)}.suit-red{color:var(--color-red)}.suit-black{color:var(--color-black)}.card[data-suit=♥],.card[data-suit=♦]{color:var(--color-red)}.card[data-suit=♣],.card[data-suit=♠]{color:var(--color-black)}.card-inner{position:relative;width:100%;height:100%;transition:transform .5s ease;transform-style:preserve-3d;border-radius:inherit}.card.card-facedown .card-inner{transform:rotateY(180deg)}.card-front,.card-back{backface-visibility:hidden;border-radius:inherit;position:absolute;height:100%;width:100%;box-shadow:0 2px 4px #00000040,0 0 3px 1px var(--card-halo);transition:box-shadow .3s ease}.card-selected{--card-halo: crimson}.card:disabled .card-front,.card:disabled .card-back{box-shadow:0 2px 4px #00000040}.card-front{background-color:#fff;text-align:center;align-content:center;font-size:1.5rem}.card-front:before{content:attr(data-card);position:absolute;top:.25rem;left:.25rem;font-size:.7rem;opacity:.8}.card-front:after{content:attr(data-card);position:absolute;bottom:.25rem;right:.25rem;font-size:.7rem;opacity:.8}.card-back{transform:rotateY(180deg);--s: 24px;--c1: #1d1d1d;--c2: #4e4f51;--c3: #3c3c3c;background:repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 50%) calc(var(--s) / 2) calc(var(--s) * tan(30deg) / 2),repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 50%);background-size:var(--s) calc(var(--s) * tan(30deg))}.card.card-anim-move{position:absolute!important;transform:translate(var(--dx),var(--dy))}@starting-style{.card.card-anim-move{transform:translate(0)}}.card-target,.card-filler{width:var(--card-width);aspect-ratio:var(--card-ratio)}#end_game_dialog{min-width:50vw}#end_game_dialog form{text-align:right}