*{box-sizing: border-box;}
html{margin: 0px;}
body{margin: 0px;}
body{font: 14px system-ui, sans-serif; color: rgb(241, 229, 212); background: radial-gradient(at 65% 30%, rgb(57, 51, 68) 0px, rgb(33, 31, 45) 45%, rgb(17, 21, 30) 100%); display: grid;}
button{appearance: none; font: inherit; color: rgb(241, 229, 212); background: rgb(48, 41, 55); border: 1px solid rgb(136, 115, 81); border-radius: 6px; padding: 0.45em 0.8em; cursor: pointer;}
.settings-actions > a{appearance: none; font: inherit; color: rgb(241, 229, 212); background: rgb(48, 41, 55); border: 1px solid rgb(136, 115, 81); border-radius: 6px; padding: 0.45em 0.8em; cursor: pointer;}
button:disabled{cursor: default;}
button:focus-visible{outline: rgb(227, 189, 125) solid 2px; outline-offset: 2px;}
header{display: flex; align-items: center; gap: 24px; padding: 0px 20px; background: rgba(16, 19, 28, 0.75); border-bottom: 1px solid rgba(201, 168, 115, 0.19);}
header strong{font: 25px Georgia;}
header strong span{color: rgb(230, 128, 134);}
#health{color: rgb(239, 150, 154); font-weight: 700;}
#turn{margin-left: auto; color: rgb(201, 184, 163); font-size: 13px;}
#restart{border: 1px solid rgb(107, 98, 112); background: rgb(36, 35, 48); padding: 7px 12px; border-radius: 5px;}
#close-dialog{border: 1px solid rgb(107, 98, 112); background: rgb(36, 35, 48); padding: 7px 12px; border-radius: 5px;}
.relics{background: rgba(17, 19, 27, 0.267); color: rgb(182, 169, 145); font-size: 10px;}
.relics i{font-size: 23px; color: rgb(118, 102, 119);}
.relics small{letter-spacing: 0px; color: rgb(133, 128, 140);}
.arena{position: relative; background: linear-gradient(0deg, rgba(188, 133, 133, 0.035), transparent 80%);}
.units{display: flex; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 70px);}
#player{flex: 1 1 0%;}
#enemies{flex: 2 1 0%;}
.unit{position: relative; display: flex; flex-direction: column; border: 2px solid rgb(119, 100, 113); border-radius: 11px; background: linear-gradient(145deg, rgb(64, 50, 62), rgb(27, 29, 40)); box-shadow: rgba(0, 0, 0, 0.4) 0px 12px 26px; color: rgb(234, 220, 207);}
.unit.selected{border-color: rgb(237, 193, 128); box-shadow: rgba(230, 182, 101, 0.145) 0px 0px 0px 3px, rgba(0, 0, 0, 0.4) 0px 15px 30px;}
.unit.player{border-color: rgb(105, 140, 156); background: linear-gradient(145deg, rgb(46, 66, 82), rgb(26, 32, 44));}
.unit-name{font-style: normal; font-variant: normal; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 700; font-stretch: normal; font-family: Georgia; text-align: center; padding-top: 3px; padding-right: 3px; padding-bottom: 3px;}
.portrait{flex: 1 1 0%; min-height: 0px; display: grid; place-items: center; margin: 5px 0px; background: radial-gradient(rgb(115, 82, 108), rgb(41, 40, 55) 70%); border: 1px solid rgba(151, 128, 140, 0.22); overflow: hidden;}
.portrait span{font-size: clamp(60px, 10dvh, 125px); text-shadow: rgb(0, 0, 0) 0px 6px 25px; color: rgb(212, 160, 168);}
.player .portrait{background: radial-gradient(rgb(65, 100, 117), rgb(32, 43, 59) 75%);}
.player .portrait span{color: rgb(155, 208, 214);}
.unit-type{letter-spacing: 2px; color: rgb(185, 165, 143); text-align: center;}
.stats{display: flex; justify-content: space-between; margin: 3px 4px 7px; font-weight: 700;}
.hp{position: relative; background: rgb(66, 35, 44); border: 1px solid rgb(153, 96, 106); border-radius: 3px; flex-shrink: 0; overflow: hidden;}
.hp > div{height: 100%; background: linear-gradient(90deg, rgb(147, 59, 84), rgb(203, 97, 115)); transition: width 0.2s;}
.hp > span{position: absolute; inset: 0px; display: grid; place-items: center; font-weight: 700; text-shadow: rgb(0, 0, 0) 0px 1px 3px;}
.intent{position: absolute; bottom: calc(100% + 7px); left: 0px; right: 0px; text-align: center; color: rgb(255, 182, 166); font-size: 20px; font-weight: 700; white-space: nowrap;}
.intent small{font-size: 11px; font-weight: 400; color: rgb(191, 170, 161);}
.unit.dead{filter: grayscale(1); opacity: 0.3;}
#message{text-align: center; color: rgb(180, 169, 158); pointer-events: none;}
#message.result{font-style: normal; font-variant: normal; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: normal; font-stretch: normal; line-height: normal; font-family: Georgia; color: rgb(255, 220, 147);}
footer{display: grid; grid-template-columns: 115px minmax(0px, 1fr) 150px; gap: 8px; align-items: end; padding-right: 20px; padding-left: 20px; background: linear-gradient(0deg, rgba(13, 16, 27, 0.92), rgba(21, 22, 35, 0.4)); min-height: 0px;}
.left-controls{height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 8px;}
.right-controls{height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 8px;}
.energy{width: 64px; height: 64px; border: 2px solid rgb(228, 199, 138); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; background: radial-gradient(circle, rgb(121, 100, 159), rgb(44, 40, 74)); box-shadow: rgba(174, 135, 243, 0.2) 0px 0px 22px;}
.energy strong{font: 32px Georgia;}
.energy small{font-size: 12px; margin: 8px 0px 0px 3px; color: rgb(191, 174, 209);}
.energy > span{position: absolute; top: 100%; margin-top: 4px; font-size: 8px; letter-spacing: 1px;}
.pile{background: transparent; border: 0px; position: relative; width: 70px; padding: 0px; display: flex; flex-direction: column; align-items: center; gap: 6px;}
.pile .back{display: grid; place-items: center; width: 58px; aspect-ratio: 2 / 3; background: repeating-linear-gradient(45deg, rgb(48, 44, 67) 0px, rgb(48, 44, 67) 6px, rgb(52, 49, 73) 6px, rgb(52, 49, 73) 8px); border: 2px solid rgb(153, 135, 117); box-shadow: rgb(61, 54, 70) 3px 3px 0px, rgb(128, 112, 96) 5px 5px 0px; border-radius: 5px; font: 32px Georgia; color: rgb(207, 185, 149);}
.pile b{position: absolute; top: 53px; right: 0px; border-radius: 50%; background: rgb(25, 28, 41); border: 1px solid rgb(197, 173, 140); min-width: 28px; padding: 4px; font-size: 14px;}
.pile small{font-size: 9px; letter-spacing: 2px; color: rgb(179, 164, 141); margin-top: 3px;}
#end{flex: 0 0 auto; width: 140px; min-height: 44px; max-height: 48px; padding: 8px 10px; background: linear-gradient(rgb(121, 76, 83), rgb(73, 47, 64)); border: 1px solid rgb(191, 146, 129); border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.333) 0px 4px 14px; font-size: 12px; font-weight: 600;}
#end span{margin-left: 6px; color: rgb(222, 193, 142);}
#end:disabled{opacity: 0.5;}
#hand{min-width: 0px; scrollbar-color: rgb(142, 118, 138) transparent;}
.card{position: relative; flex-grow: 0; flex-basis: auto; display: flex; flex-direction: column; border: 2px solid rgb(186, 125, 125); border-radius: 10px; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; box-shadow: rgba(0, 0, 0, 0.467) 0px 8px 18px; transition: transform 0.15s; text-align: center;}
.card > b{font-style: normal; font-variant: normal; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 700; font-stretch: normal; font-family: Georgia;}
.cost{position: absolute; left: -3px; top: -3px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgb(213, 189, 144); background: rgb(84, 73, 110); font: 700 18px Georgia; z-index: 1;}
.art{display: grid; place-items: center; flex: 1 1 0%; min-height: 0px; background: radial-gradient(rgb(153, 96, 108), rgb(57, 42, 67)); border: 1px solid rgba(218, 184, 165, 0.227); border-radius: 3px; font: clamp(42px, 8dvh, 85px) Georgia; color: rgb(246, 196, 181); text-shadow: rgba(0, 0, 0, 0.4) 0px 3px 15px;}
.card-type{font-size: 9px; letter-spacing: 2px; margin: 7px 0px 4px; color: rgb(215, 186, 167);}
.card p{justify-items: center; background: rgba(22, 25, 35, 0.333); border-radius: 3px;}
.card:not(:disabled):hover{transform: translateY(-5px); border-color: rgb(255, 226, 161);}
dialog{max-width: min(95vw, 1100px); max-height: 90dvh; background: rgb(32, 35, 49); color: rgb(234, 223, 207); border: 1px solid rgb(158, 133, 121); border-radius: 12px;}
dialog::backdrop{background: rgba(0, 0, 0, 0.667);}
.dialog-head{display: flex; justify-content: space-between; gap: 30px; align-items: center;}
.dialog-head h2{font: 24px Georgia;}
#pile-note{color: rgb(180, 173, 186);}

@media (max-aspect-ratio: 1 / 1) {
header{padding: 0px 10px;}
header #turn{font-size: 12px;}
.relics{padding: 0px 12px;}
.portrait span{font-size: clamp(44px, 8dvh, 85px);}
.unit-type{margin: 3px 0px;}
#message.result{font-size: 24px;}
footer{position: relative; display: block;}
.left-controls{position: absolute; display: flex; flex-direction: row;}
.right-controls{position: absolute; display: flex; flex-direction: row;}
.energy{width: 47px; height: 47px;}
.energy strong{font-size: 26px;}
.energy > span{font-size: 7px;}
.pile{width: 38px; height: 58px; gap: 0px;}
.pile .back{width: 29px; height: 41px; font-size: 21px;}
.pile b{top: 22px; right: -7px; font-size: 11px; padding: 2px; min-width: 20px;}
.pile small{font-size: 7px; letter-spacing: 1px; margin-top: 6px;}
#end{min-height: 42px; font-size: 11px; order: 2;}
.card{scroll-snap-align: center;}
}
@media (min-aspect-ratio: 1 / 1) and (max-height: 540px) {
body{--card-h: clamp(140px,39dvh,200px); --unit-h: clamp(120px,35dvh,180px); grid-template-rows: 32px 24px minmax(0,1fr) calc(var(--card-h) + 12px);}
header strong{font-size: 21px;}
header{font-size: 11px;}
#restart{padding: 3px 8px; font-size: 11px;}
.arena{padding: 16px 5vw 12px;}
.unit-name{font-size: 12px;}
.unit-type{display: none;}
.stats{font-size: 10px; margin: 2px;}
.hp{height: 17px;}
.hp > span{font-size: 10px;}
.intent{font-size: 12px; bottom: calc(100% + 2px);}
.portrait span{font-size: 40px;}
#message{font-size: 9px; bottom: 0px;}
footer{grid-template-columns: 72px minmax(0px, 1fr) 105px; padding: 2px 8px 5px;}
.energy{width: 40px; height: 40px;}
.energy strong{font-size: 23px;}
.energy > span{display: none;}
.pile .back{width: 32px; font-size: 23px;}
.pile b{top: 27px; right: 9px; min-width: 20px; font-size: 11px; padding: 2px;}
.pile small{font-size: 7px;}
.pile{gap: 2px;}
#end{width: 100px; font-size: 10px; min-height: 35px; padding: 5px;}
.card-type{font-size: 7px; margin: 3px;}
.cost{width: 21px; height: 21px; font-size: 13px;}
.art{font-size: 33px;}
#hand{gap: 7px; padding-top: 2px;}
.left-controls{gap: 4px;}
.right-controls{gap: 4px;}
}
html{background: rgb(24, 24, 36); color-scheme: dark;}
.unit .portrait{background-position: 100% 100%;}
.unit.player .portrait{background-position: 50% 100%;}
#settings{border: 0px; background: transparent; color: rgb(191, 174, 153); font-size: 21px; padding: 4px;}
#settings-dialog label{display: block;}
#settings-dialog p{max-width: 400px; font-size: 12px; color: rgb(185, 176, 191);}
#download-log{background: rgb(57, 51, 69); color: rgb(241, 223, 196); border: 1px solid rgb(138, 114, 128); border-radius: 5px; padding: 10px;}
.flying{pointer-events: none; position: fixed !important; opacity: 1 !important; margin: 0px !important; filter: none !important;}
.floating{position: absolute; z-index: 20; top: 32%; left: 15%; right: 15%; font: bold 38px Georgia; color: rgb(255, 179, 170); text-shadow: rgb(18, 5, 16) 0px 2px 5px, rgb(181, 43, 59) 0px 0px 12px; pointer-events: none;}
.floating.heal{color: rgb(166, 246, 192);}
.floating.block{color: rgb(167, 228, 255);}
.arena::before{content: ""; position: absolute; inset: 10% 3% 2%; pointer-events: none; background: radial-gradient(at 50% 100%, rgba(188, 143, 112, 0.07), transparent 70%); border-bottom: 1px solid rgba(196, 171, 133, 0.133); border-radius: 50%;}
.unit{isolation: isolate;}
.unit.selected::after{content: "ЦЕЛЬ"; position: absolute; bottom: -19px; left: 0px; right: 0px; text-align: center; font-size: 8px; letter-spacing: 3px; color: rgb(229, 189, 128);}
.unit.dead::after{display: none;}
.card{background-image: linear-gradient(145deg, rgb(90, 57, 70), rgb(37, 33, 46));}
.card b{text-shadow: rgb(0, 0, 0) 0px 1px 2px;}
.art{box-shadow: rgba(0, 0, 0, 0.333) 0px 0px 12px inset;}
.unit .portrait{box-shadow: rgba(0, 0, 0, 0.533) 0px 0px 15px inset;}
.card:disabled{opacity: 0.82; filter: saturate(0.6);}
@media (max-aspect-ratio: 1 / 1) {
#settings{font-size: 18px;}
.unit.selected::after{bottom: -14px; font-size: 7px;}
.floating{font-size: 27px;}
}
@media (prefers-reduced-motion: reduce) {
*{scroll-behavior: auto !important; transition: none !important;}
}
body{grid-template-columns: minmax(0px, 1fr);}
body > header{min-width: 0px;}
body > section{min-width: 0px;}
body > main{min-width: 0px;}
body > footer{min-width: 0px;}
.units{min-width: 0px;}
@media (max-aspect-ratio: 1 / 1) {
#health{font-size: 11px;}
#turn{white-space: nowrap;}
.unit{flex-shrink: 0;}
}
#hand::-webkit-scrollbar{display: none;}
@media (max-aspect-ratio: 1 / 1) {

}
@media (max-width: 350px) {
#health{display: none;}
}
#hand .card{user-select: none; cursor: grab;}
#hand .card:active{cursor: grabbing;}
.drag-card{cursor: grabbing; box-shadow: rgba(0, 0, 0, 0.733) 0px 22px 55px !important; opacity: 1 !important;}
.drop-target{outline-offset: 5px; outline: rgb(255, 213, 144) solid 4px !important; box-shadow: rgba(255, 201, 120, 0.5) 0px 0px 40px !important;}
.flying{visibility: visible !important; z-index: 1000 !important;}
.back.flying{display: grid; place-items: center; background: repeating-linear-gradient(45deg, rgb(48, 44, 67) 0px, rgb(48, 44, 67) 6px, rgb(52, 49, 73) 6px, rgb(52, 49, 73) 8px); border: 2px solid rgb(153, 135, 117); border-radius: 5px; color: rgb(207, 185, 149); font: 32px Georgia;}
.unit .floating{z-index: 1100;}
.unit:has(.floating){z-index: 1001;}
.unit.selected::after{display: none;}
.unit-statuses{position: absolute; top: calc(100% + 5px); display: flex; gap: 4px; pointer-events: auto;}
.status-badge{font-style: normal; font-variant: normal; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 600; font-stretch: normal; line-height: normal; font-family: system-ui; color: rgb(197, 230, 243); background: rgb(24, 41, 52); border: 1px solid rgb(100, 132, 150); border-radius: 5px; white-space: nowrap;}
.status-badge.poison{color: rgb(188, 234, 140); border-color: rgb(114, 149, 76); background: rgb(37, 50, 36);}
.card{flex-shrink: 0;}
.unit{flex-shrink: 0;}
.card > b{flex-shrink: 0;}
.unit-statuses{left: 0px; right: 0px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-height: 26px; scrollbar-width: none;}
.status-badge{flex: 0 0 auto;}
@media (max-aspect-ratio: 1 / 1) {
html{overflow: auto;}
.unit-name{padding: 1px; line-height: 1.1; flex: 0 0 auto;}
.unit-type{display: none;}
.stats{line-height: 1.1; margin: 2px; flex: 0 0 auto;}
.portrait{margin: 3px 0px; min-height: 0px;}
.intent{font-size: 13px; line-height: 17px; bottom: calc(100% + 4px);}
.unit-statuses{top: calc(100% + 4px); max-height: 21px;}
.status-badge{padding: 2px 4px;}
.left-controls{gap: 12px;}
.right-controls{gap: 12px;}
.left-controls{left: 10px;}
.right-controls{right: 10px;}
#end{width: 110px;}
#hand{align-items: end; scroll-snap-type: none;}
.card-type{font-size: 8px; margin: 4px 0px;}
.cost{width: 23px; height: 23px; font-size: 14px;}
}
.status-badge.strength{color: rgb(255, 188, 160); border-color: rgb(189, 120, 102);}
.status-badge.dexterity{color: rgb(161, 237, 209); border-color: rgb(97, 154, 137);}
.card.frame-attack{isolation: isolate; border: 0px; border-radius: 4px 4px 0px 0px; background: linear-gradient(135deg, rgb(240, 188, 160), rgb(156, 98, 92) 48%, rgb(220, 160, 137)); clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0px calc(100% - 12px));}
.card.frame-attack::before{content: ""; position: absolute; inset: 2px; z-index: -1; pointer-events: none; background: linear-gradient(155deg, rgb(83, 50, 59), rgb(41, 33, 45) 65%, rgb(52, 36, 45)); border-radius: 3px 3px 0px 0px; clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0px calc(100% - 11px));}
.card.frame-attack:not(:disabled):hover{background: linear-gradient(135deg, rgb(255, 225, 169), rgb(213, 159, 119));}
.card.frame-attack .card-type{color: rgb(239, 180, 157); letter-spacing: 2px;}
.card.frame-attack p{border-top: 1px solid rgba(189, 128, 116, 0.24); border-radius: 0px 0px 5px 5px;}
.card.frame-talent{padding-top: 22px;}
.card .cost{left: 5px; top: 5px;}
.card.frame-talent .cost{top: 27px; left: 7px;}
@media (max-aspect-ratio: 1 / 1) {
.card.frame-talent{padding-top: 17px;}
.card.frame-talent .cost{top: 24px; left: 5px;}
.card.frame-skill{border-radius: 19px;}
}
@media (max-aspect-ratio: 1 / 1) {

}
.card.frame-attack{--rim: #b8b2a5; --ink: #272c35; --body-top: #4d3d47; --body-bottom: #24202d; isolation: isolate; clip-path: none; border: 2px solid rgb(167, 154, 136); border-radius: 8px; overflow: visible; background: linear-gradient(145deg,var(--body-top),var(--body-bottom)); box-shadow: rgba(255, 255, 255, 0.07) 0px 0px 0px 2px inset, rgba(0, 0, 0, 0.333) 0px 0px 18px inset, rgba(0, 0, 0, 0.4) 0px 5px 12px;}
.card.frame-skill{--rim: #b8b2a5; --ink: #272c35; --body-top: #4d3d47; --body-bottom: #24202d; isolation: isolate; clip-path: none; border: 2px solid rgb(167, 154, 136); border-radius: 8px; overflow: visible; background: linear-gradient(145deg,var(--body-top),var(--body-bottom)); box-shadow: rgba(255, 255, 255, 0.07) 0px 0px 0px 2px inset, rgba(0, 0, 0, 0.333) 0px 0px 18px inset, rgba(0, 0, 0, 0.4) 0px 5px 12px;}
.card.frame-talent{--rim: #b8b2a5; --ink: #272c35; --body-top: #4d3d47; --body-bottom: #24202d; isolation: isolate; clip-path: none; border: 2px solid rgb(167, 154, 136); border-radius: 8px; overflow: visible; background: linear-gradient(145deg,var(--body-top),var(--body-bottom)); box-shadow: rgba(255, 255, 255, 0.07) 0px 0px 0px 2px inset, rgba(0, 0, 0, 0.333) 0px 0px 18px inset, rgba(0, 0, 0, 0.4) 0px 5px 12px;}
.card.frame-attack::before{display: none;}
.card.frame-skill{--body-top: #354c58; --body-bottom: #202b35; border-radius: 13px;}
.card.frame-talent{--body-top: #534b36; --body-bottom: #2d2930; border-color: rgb(192, 165, 117);}
.card.frame-attack:not(:disabled):hover{background: linear-gradient(145deg,var(--body-top),var(--body-bottom)); border-color: rgb(241, 212, 160);}
.card.frame-skill:not(:disabled):hover{background: linear-gradient(145deg,var(--body-top),var(--body-bottom)); border-color: rgb(241, 212, 160);}
.card.frame-talent:not(:disabled):hover{background: linear-gradient(145deg,var(--body-top),var(--body-bottom)); border-color: rgb(241, 212, 160);}
.card.frame-attack > b{position: relative; z-index: 2; flex: 0 0 auto; border: 1px solid rgb(223, 211, 187); border-radius: 45% 45% 8% 8% / 18% 18% 25% 25%; background: linear-gradient(rgb(212, 201, 179), rgb(169, 157, 136)); color: rgb(41, 38, 48); text-shadow: rgba(238, 226, 192, 0.4) 0px 1px; box-shadow: rgba(0, 0, 0, 0.333) 0px 2px 3px;}
.card.frame-skill > b{position: relative; z-index: 2; flex: 0 0 auto; border: 1px solid rgb(223, 211, 187); border-radius: 45% 45% 8% 8% / 18% 18% 25% 25%; background: linear-gradient(rgb(212, 201, 179), rgb(169, 157, 136)); color: rgb(41, 38, 48); text-shadow: rgba(238, 226, 192, 0.4) 0px 1px; box-shadow: rgba(0, 0, 0, 0.333) 0px 2px 3px;}
.card.frame-talent > b{position: relative; z-index: 2; flex: 0 0 auto; border: 1px solid rgb(223, 211, 187); border-radius: 45% 45% 8% 8% / 18% 18% 25% 25%; background: linear-gradient(rgb(212, 201, 179), rgb(169, 157, 136)); color: rgb(41, 38, 48); text-shadow: rgba(238, 226, 192, 0.4) 0px 1px; box-shadow: rgba(0, 0, 0, 0.333) 0px 2px 3px;}
.card .art{position: relative; flex: 0 0 auto; border: 3px solid var(--rim); box-shadow: rgba(0, 0, 0, 0.333) 0px 0px 10px inset; background-origin: border-box;}
.card.frame-attack .art{border: 0px; border-radius: 0px; clip-path: polygon(0px 0px, 100% 0px, 100% 85%, 50% 100%, 0px 85%);}
.card.frame-attack .art::after{content: ""; position: absolute; inset: 0px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1.5 1.5H98.5V84L50 98.5L1.5 84Z' fill='none' stroke='%23bab4a7' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center center / 100% 100% no-repeat;}
.card.frame-skill .art{border-radius: 7px 7px 14px 14px; clip-path: none;}
.card.frame-talent .art{clip-path: none; border-color: rgb(195, 176, 128);}
.card .card-type{position: relative; z-index: 2; flex: 0 0 auto; font-style: normal; font-variant: normal; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 700; font-stretch: normal; font-family: Georgia; letter-spacing: 0.7px; color: rgb(48, 43, 48); background: linear-gradient(rgb(209, 199, 180), rgb(168, 158, 139)); border: 1px solid rgb(227, 214, 188); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.333) 0px 2px 3px;}
.card.frame-attack .card-type{position: relative; z-index: 2; flex: 0 0 auto; font-style: normal; font-variant: normal; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 700; font-stretch: normal; font-family: Georgia; letter-spacing: 0.7px; color: rgb(48, 43, 48); background: linear-gradient(rgb(209, 199, 180), rgb(168, 158, 139)); border: 1px solid rgb(227, 214, 188); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.333) 0px 2px 3px;}
.card p{flex: 1 1 0%; border: 1px solid rgba(194, 174, 133, 0.23); border-radius: 3px 3px 6px 6px; background: rgba(17, 25, 37, 0.4);}
.card.frame-attack p{flex: 1 1 0%; border: 1px solid rgba(194, 174, 133, 0.23); border-radius: 3px 3px 6px 6px; background: rgba(17, 25, 37, 0.4);}
.card .cost{z-index: 4; left: 2px; top: 2px; width: 28px; border-color: rgb(234, 214, 173); background: radial-gradient(circle at 35% 25%, rgb(129, 116, 151), rgb(66, 57, 82)); box-shadow: rgba(0, 0, 0, 0.533) 0px 2px 4px;}
.card.frame-talent .cost{z-index: 4; left: 2px; top: 2px; width: 28px; border-color: rgb(234, 214, 173); background: radial-gradient(circle at 35% 25%, rgb(129, 116, 151), rgb(66, 57, 82)); box-shadow: rgba(0, 0, 0, 0.533) 0px 2px 4px;}
@media (max-aspect-ratio: 1 / 1) {
.card .cost{left: 1px; top: 1px;}
.card.frame-talent .cost{left: 1px; top: 1px;}
}
.card.frame-summon{--rim: #c3abc9; --body-top: #514060; --body-bottom: #282233; isolation: isolate; border: 2px solid rgb(172, 142, 184); border-radius: 18px 18px 5px 5px; background: linear-gradient(145deg,var(--body-top),var(--body-bottom)); box-shadow: rgba(195, 171, 201, 0.133) 0px 0px 0px 2px inset, rgba(0, 0, 0, 0.4) 0px 5px 12px;}
.card.frame-summon > b{position: relative; z-index: 2; flex: 0 0 auto; border: 1px solid rgb(223, 211, 187); border-radius: 6px; background: linear-gradient(rgb(212, 201, 179), rgb(169, 157, 136)); color: rgb(41, 38, 48); text-shadow: none;}
.card.frame-summon .art{border-radius: 45% / 20%; outline: rgba(195, 171, 201, 0.333) solid 1px; outline-offset: 2px; background-position: 50% 100%;}
.card.frame-summon .card-type{background: linear-gradient(rgb(215, 201, 222), rgb(170, 149, 181));}
#player{gap: 16px;}
.unit.player{flex-shrink: 0;}
@media (max-aspect-ratio: 1 / 1) {
#player{max-width: 100%; padding-top: 4px; padding-bottom: 26px; margin-bottom: -26px; scrollbar-width: none;}
}
.card.frame-attack > b{text-wrap: balance;}
.card.frame-skill > b{text-wrap: balance;}
.card.frame-talent > b{text-wrap: balance;}
.card.frame-summon > b{text-wrap: balance;}
@media (max-aspect-ratio: 1 / 1) {
#pile-cards{gap: 10px;}
}
.card.frame-attack{display: grid; row-gap: 4px; align-content: stretch;}
.card.frame-skill{display: grid; row-gap: 4px; align-content: stretch;}
.card.frame-talent{display: grid; row-gap: 4px; align-content: stretch;}
.card.frame-summon{display: grid; row-gap: 4px; align-content: stretch;}
.card .art{align-self: stretch;}
.card .card-type{place-self: center;}
.card.frame-attack .card-type{place-self: center;}
.card p{align-self: stretch;}
.card.frame-attack p{align-self: stretch;}
.card.frame-summon p{align-self: stretch;}
@media (max-aspect-ratio: 1 / 1) {
#player{padding-left: 0px;}
#message{left: 12px; right: 12px; bottom: 3px; font-size: 10px;}
.card.frame-attack{row-gap: 3px;}
.card.frame-skill{row-gap: 3px;}
.card.frame-talent{row-gap: 3px;}
.card.frame-summon{row-gap: 3px;}
}
html{overflow: auto;}
body{overflow: visible;}
.unit{flex-shrink: 0;}
#player .unit{flex-shrink: 0;}
.card{flex-shrink: 0;}
#pile-cards .card{flex-shrink: 0;}
.arena{display: flex; align-items: center; justify-content: space-around; scrollbar-width: thin;}
#player{align-self: center; gap: 20px; margin: 0px; padding-right: 0px; padding-left: 0px;}
#enemies{align-self: center; gap: 20px; margin: 0px; padding-right: 0px; padding-left: 0px;}
.unit-type{display: block;}
.stats{font-size: 15px;}
.hp{height: 25px;}
.hp > span{font-size: 13px;}
#message{position: fixed; left: 0px; right: 0px; bottom: 0px; background: rgba(23, 25, 37, 0.867); padding: 3px; z-index: 5; font-size: 10px;}
@media (max-aspect-ratio: 1 / 1) {
body{--unit-h: var(--card-h);}
#player{min-width: max-content; gap: 16px; overflow: visible; margin-top: 0px; margin-right: 0px; margin-left: 0px; align-self: center;}
#enemies{min-width: max-content; gap: 16px; overflow: visible; margin-top: 0px; margin-right: 0px; margin-left: 0px; align-self: center;}
.stats{font-size: 14px;}
.hp{height: 24px;}
.hp > span{font-size: 12px;}
}
.card .art{display: flex; background-image: none !important; background-color: var(--rim,#b8b2a5) !important; background-size: auto !important;}
.art-image{display: block; flex: 1 1 0%; min-width: 0px; min-height: 0px; background-repeat: no-repeat; border-radius: inherit;}
.card.frame-attack .art{padding: 3px; background-image: none !important; background-color: var(--rim,#b8b2a5) !important;}
.card.frame-attack .art::after{display: none;}
.card.frame-attack .art-image{clip-path: polygon(0px 0px, 100% 0px, 100% 85%, 50% 100%, 0px 85%); border-radius: 0px;}
.card.frame-skill .art-image{border-radius: 3px 3px 10px 10px;}
.card.frame-summon .art-image{border-radius: 45% / 20%;}
#message:not(.result){position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: none;}
#message.result{position: absolute; left: 0px; right: 0px; bottom: 3px; padding: 0px; background: none; font-size: 23px;}
.unit{display: grid;}
#player .unit{display: grid;}
.unit-name{display: flex; align-items: center; justify-content: center; margin: 0px; line-height: 1.1; font-size: 18px;}
.unit .portrait{border: 3px solid rgb(155, 150, 144); border-radius: 6px;}
.unit-type{margin: 0px; line-height: 17px; font-size: 10px;}
.unit-details{display: grid; background: rgba(17, 25, 37, 0.4); border: 1px solid rgba(194, 174, 133, 0.23); border-radius: 5px; min-height: 0px;}
.unit .stats{margin: 0px;}
.unit .unit-statuses{position: static; inset: auto; display: flex; place-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 3px; min-height: 0px; max-height: none; overflow: auto; scrollbar-width: thin;}
.status-badge{font-size: 11px; padding: 2px 4px;}
@media (max-aspect-ratio: 1 / 1) {
.unit-name{font-size: 16px;}
.unit-details{grid-template-rows: 17px 21px minmax(0px, 1fr); gap: 3px; padding: 4px;}
.unit .stats{font-size: 12px; line-height: 17px;}
.unit .hp{height: 21px;}
.status-badge{font-size: 10px;}
}
.card.frame-talent{border-radius: 8px 8px 18px 18px;}
.card.frame-talent .art{border-radius: 6px 6px 50% 50% / 6px 6px 30% 30%;}
.card.frame-talent .art-image{border-radius: 3px 3px 50% 50% / 3px 3px 30% 30%;}
.card .art{align-items: stretch; justify-content: stretch;}
.card .art-image{width: 100%; height: 100%; align-self: stretch; flex: 1 1 auto;}
#hand{grid-auto-flow: column; grid-auto-columns: minmax(0,var(--card-w)); grid-template-rows: var(--card-h); isolation: isolate;}
#hand .card{position: relative; justify-self: start; transform-origin: center bottom; transition: transform 0.15s, filter 0.15s; z-index: 1;}
#hand .card:hover{z-index: 20; transform: translateY(-18px);}
#hand .card:focus-visible{z-index: 20; transform: translateY(-18px);}
#hand .card:has(~ .card:hover){z-index: 1;}
@media (max-aspect-ratio: 1 / 1) {
#hand{isolation: isolate;}
#hand .card{flex: 0 0 var(--card-w);}
#hand .card:last-child{margin-right: 0px;}
#hand .card:hover{transform: translateY(-3px);}
#hand .card:focus-visible{transform: translateY(-3px);}
}
html{width: 100%; height: 100%; min-height: 0px;}
body{width: 100%; height: 100%; min-height: 0px;}
body{--card-h: min(460px,calc((100dvh - 174px)/2)); --unit-h: var(--card-h); grid-template-rows: 46px var(--relic-row) minmax(0,1fr) calc(var(--card-h) + 20px);}
.arena{height: 100%; min-height: 0px; padding: 29px 20px 25px; overflow: visible; gap: 20px;}
footer{padding-top: 5px; padding-bottom: 8px;}
.unit-name{font-size: clamp(10px,calc(var(--card-h)*.038),16px); min-height: 0px; line-height: 1.1; padding-left: 18px;}
.unit-name{padding-left: 0px;}
.unit-details{grid-template-rows: 16px 20px minmax(0px, 1fr); padding: 3px; gap: 2px;}
.unit .stats{font-size: 11px; line-height: 16px;}
.unit .hp{height: 20px;}
.unit .hp > span{font-size: 11px;}
#hand{min-height: 0px;}
@media (max-aspect-ratio: 1 / 1) {
body{height: 100%; min-height: 0px;}
.arena{align-items: center; justify-content: space-between;}
#player{overflow: visible;}
#enemies{grid-auto-flow: column; grid-auto-columns: minmax(0px, 1fr); margin-right: 0px;}
#enemies .unit{justify-self: end;}
#player{padding: 0px; margin-bottom: 0px;}
#enemies{padding: 0px; margin-bottom: 0px;}
#hand{display: grid; grid-auto-flow: column; grid-template-rows: var(--card-h); justify-content: center; gap: 0px; padding: 3px 8px 0px; height: calc(var(--card-h) + 3px); overflow: visible;}
#hand .card{margin: 0px; justify-self: start;}
footer{padding: 68px 0px 5px;}
.left-controls{top: 3px; height: 57px;}
.right-controls{top: 3px; height: 57px;}
.unit-type{font-size: 8px; line-height: 1.1;}
.card .cost{width: 21px;}
.card.frame-talent .cost{width: 21px;}
}
@media (max-aspect-ratio: 1 / 1) {
#player{flex: 0 0 var(--card-w);}
#enemies{flex: 0 0 auto;}
}
.game-page{overscroll-behavior: none; scrollbar-width: none; overflow: hidden !important;}
.game-page body{overscroll-behavior: none; scrollbar-width: none; overflow: hidden !important;}
.game-page::-webkit-scrollbar{display: none;}
.game-page body::-webkit-scrollbar{display: none;}
#hand::-webkit-scrollbar{display: none;}
.arena::-webkit-scrollbar{display: none;}
#hand{scrollbar-width: none;}
.arena{scrollbar-width: none;}
@media (max-aspect-ratio: 1 / 1) {
body{--card-h: min(400px,calc((100dvh - 210px)/3),calc((100vw - 36px)/1.1)); --card-w: calc(var(--card-h)*.55);}
.arena{display: grid; grid-template-columns: minmax(0px, 1fr); overflow: hidden;}
#enemies{grid-area: 1 / 1; display: flex; justify-content: center; align-items: center; gap: 12px; min-width: 0px; align-self: center;}
#player{grid-area: 2 / 1; display: flex; align-items: center; gap: 12px; min-width: 0px; align-self: center;}
#player .unit{flex: 0 0 auto;}
.unit{flex: 0 0 auto;}
.unit .intent{font-size: 11px; line-height: 14px; bottom: calc(100% + 3px);}
.unit .unit-statuses{scrollbar-width: none;}
.unit .unit-statuses::-webkit-scrollbar{display: none;}
}
@media (max-aspect-ratio: 1 / 1) {

}
@media (max-aspect-ratio: 1 / 1) {
#player{justify-content: center;}
}
.arena.drop-target{outline: none !important; box-shadow: rgba(217, 191, 128, 0.4) 0px 0px 0px 2px inset, rgba(217, 191, 128, 0.082) 0px 0px 45px inset !important;}
body{user-select: none;}
#hand > .card{touch-action: none;}
.card{-webkit-user-drag: none;}
.unit{-webkit-user-drag: none;}
.card *{-webkit-user-drag: none;}
.unit *{-webkit-user-drag: none;}
input{user-select: text;}
textarea{user-select: text;}
#advance{position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 10; padding: 10px 24px; background: rgb(89, 48, 51); border: 1px solid rgb(203, 166, 116); color: rgb(255, 255, 255);}
#advance[hidden]{display: none;}
#world-dialog{overflow: auto;}
.reward-options{display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;}
.world-nodes{display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;}
.reward-options > div{display: flex; flex-direction: column; gap: 12px;}
.reward-options .card{transform: none !important;}
.world-nodes button{padding: 16px; min-width: 140px;}
.world-nodes small{display: block; margin-top: 8px;}
.card-type{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.card p.effect-preview{color: rgb(255, 228, 163); border-color: rgb(219, 192, 130);}
.card .rarity-corner{--corner-size: clamp(12px,calc(var(--card-h)*.065),24px); position: absolute; inset: -2px; border-radius: inherit; background: var(--rarity-color); clip-path: polygon(calc(100% - var(--corner-size)) 0,100% 0,100% var(--corner-size)); z-index: 5; pointer-events: none;}
#party-setup{--ui: min(1vw,1.4dvh); position: fixed; inset: 0px; z-index: 60; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; padding: calc(var(--ui)*1.6); gap: calc(var(--ui)*.8); background: radial-gradient(at 70% 0px, rgba(54, 48, 70, 0.333), transparent 70%), linear-gradient(120deg, rgba(18, 18, 25, 0.96), rgba(17, 17, 24, 0.933)); color: rgb(234, 220, 194); font-size: calc(var(--ui)*1.4);}
#party-setup[hidden]{display: none;}
body:has(#party-setup:not([hidden])) > header{visibility: hidden;}
body:has(#party-setup:not([hidden])) > .relics{visibility: hidden;}
body:has(#party-setup:not([hidden])) > .arena{visibility: hidden;}
body:has(#party-setup:not([hidden])) > footer{visibility: hidden;}
.setup-heading{display: flex; align-items: center; gap: 1em; flex: 0 0 auto; min-height: 0px;}
.setup-heading > strong{font: 2em Georgia; color: rgb(219, 195, 152); white-space: nowrap;}
.setup-heading > strong span{color: rgb(172, 119, 115);}
.setup-heading h1{font: 1.65em Georgia; margin: 0px;}
.setup-heading button{margin-left: auto;}
#party-setup button{background: rgb(21, 21, 28); border: 1px solid rgb(136, 115, 81); color: rgb(233, 216, 184); border-radius: 0.3em; padding: 0.45em 0.7em; font: inherit;}
#pack-dialog button{background: rgb(21, 21, 28); border: 1px solid rgb(136, 115, 81); color: rgb(233, 216, 184); border-radius: 0.3em; padding: 0.45em 0.7em; font: inherit;}
#party-setup button:disabled{opacity: 0.4;}
.setup-grid{flex: 1 1 0%; min-height: 0px; display: grid; gap: 0.7em;}
.narrator-panel .pack-track{gap: calc(var(--ui)*1.2); justify-content: flex-start;}
.setup-panel .setup-panel-heading{min-height: 2.6em;}
.setup-panel:not(.narrator-panel) .setup-panel-heading h2{font-size: 1.05em;}
#narrator-settings{width: min(100%, 32em); align-self: center;}
.setup-panel{min-width: 0px; min-height: 0px; background: rgba(16, 17, 23, 0.66); border: 1px solid rgb(140, 116, 79); padding: 0.6em; display: flex; flex-direction: column; gap: 0.5em; border-radius: 0.4em; overflow: hidden;}
.setup-panel-heading{display: flex; align-items: center; justify-content: space-between; gap: 0.4em; flex: 0 0 auto; min-width: 0px;}
.setup-panel h2{font: 1.25em Georgia; margin: 0px;}
.setup-panel-heading button{white-space: nowrap; font-size: 0.9em !important;}
.setup-panel > small[id$="-favorites"]{display: none;}
.pack-track{container-type: size; display: flex; align-items: center; gap: calc(var(--ui)*.7); flex: 1 1 0%; min-height: 0px; min-width: 0px; overflow: auto hidden; scrollbar-width: none;}
.pack-track .pack-tile{width: var(--setup-pack-width,12vmin); flex: 0 0 var(--setup-pack-width,12vmin);}
.pack-tile{container-type: inline-size; position: relative; aspect-ratio: 3 / 5; border: 1px solid rgb(118, 102, 83); border-radius: 0.4em; background: rgb(24, 23, 28); overflow: hidden; box-sizing: border-box;}
.pack-tile.chosen{border-color: rgb(236, 195, 131); box-shadow: rgb(195, 145, 83) 0px 0px 0px 1px inset;}
#party-setup .pack-open{border: 0px; padding: 0px; width: 100%; height: 100%; display: flex; flex-direction: column; background: none; border-radius: 0px;}
#pack-dialog .pack-open{border: 0px; padding: 0px; width: 100%; height: 100%; display: flex; flex-direction: column; background: none; border-radius: 0px;}
.pack-art{display: block; flex: 1 1 0%; width: 100%; min-height: 0px; background-repeat: no-repeat;}
.pack-open b{display: grid; place-items: center; flex: 0 0 auto; height: 3em; width: 100%; box-sizing: border-box; padding: 0.2em 0.3em; font: 11cqw / 1.15 Georgia; color: rgb(238, 225, 202); border-top: 1px solid rgb(120, 99, 71); background: rgb(17, 16, 21); overflow: hidden; overflow-wrap: normal;}
.pack-select{display: none;}
#party-setup .pack-favorite{position: absolute; top: 0px; width: 24cqw; height: 24cqw; min-width: 0px; min-height: 0px; padding: 0px; border: 0px; font: bold 16cqw Georgia; background: rgba(19, 19, 27, 0.8); color: rgb(228, 188, 114);}
#pack-dialog .pack-favorite{position: absolute; top: 0px; width: 24cqw; height: 24cqw; min-width: 0px; min-height: 0px; padding: 0px; border: 0px; font: bold 16cqw Georgia; background: rgba(19, 19, 27, 0.8); color: rgb(228, 188, 114);}
#party-setup .pack-info{position: absolute; top: 0px; width: 24cqw; height: 24cqw; min-width: 0px; min-height: 0px; padding: 0px; border: 0px; font: bold 16cqw Georgia; background: rgba(19, 19, 27, 0.8); color: rgb(228, 188, 114);}
#pack-dialog .pack-info{position: absolute; top: 0px; width: 24cqw; height: 24cqw; min-width: 0px; min-height: 0px; padding: 0px; border: 0px; font: bold 16cqw Georgia; background: rgba(19, 19, 27, 0.8); color: rgb(228, 188, 114);}
#party-setup .pack-favorite{left: 0px; border-radius: 0px 0px 0.3em;}
#pack-dialog .pack-favorite{left: 0px; border-radius: 0px 0px 0.3em;}
#party-setup .pack-info{right: 0px; color: rgb(233, 216, 184); border-radius: 0px 0px 0px 0.3em;}
#pack-dialog .pack-info{right: 0px; color: rgb(233, 216, 184); border-radius: 0px 0px 0px 0.3em;}
.pack-open:focus-visible{outline: rgb(237, 204, 142) solid 2px; outline-offset: -2px;}
.wishes-panel label{font: 1em Georgia; color: rgb(212, 190, 160);}
.wishes-panel textarea{resize: none; flex: 1 1 0%; min-height: 0px; min-width: 0px; box-sizing: border-box; border: 1px solid rgb(112, 104, 93); border-radius: 0.3em; background: rgb(17, 19, 25); color: rgb(236, 223, 201); font: 1.15em / 1.3 Georgia; padding: 0.5em; width: 100%; overflow: hidden;}
.wishes-panel small{font-size: 0.75em; line-height: 1.2; color: rgb(183, 165, 134);}
.setup-actions{display: flex; gap: 1em; justify-content: space-between; align-items: center; flex: 0 0 auto; min-height: 0px;}
.setup-actions > span{color: rgb(196, 178, 146); font: 0.9em Georgia;}
#party-setup #start-party{background: linear-gradient(rgb(100, 46, 57), rgb(52, 28, 37)); border-color: rgb(210, 172, 113); padding: 0.5em 1.3em; font: 1.3em Georgia; flex-shrink: 0;}
#pack-dialog{width: min(90vw, 1000px);}
.pack-catalog{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 16px; padding: 16px 0px; align-items: start;}
.pack-catalog .pack-tile{width: 100%; max-width: 240px; justify-self: center;}
@media (max-width: 600px) {
#pack-dialog:has(.pack-catalog){width: calc(-24px + 100vw); max-width: none; max-height: 88dvh; padding: 16px;}
.pack-catalog{grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px;}
.pack-catalog .pack-tile{max-width: none;}
}
.pack-detail{display: flex; gap: 1.5em; margin-top: 1em;}
.pack-detail .pack-tile{width: 25%; flex-shrink: 0;}
.pack-detail p{font: 1em / 1.5 Georgia; white-space: pre-line;}
@media (max-aspect-ratio: 1 / 1) {
#party-setup{--ui: min(1.6vw,1.3dvh);}
.narrator-panel{grid-column: 1 / -1;}
.wishes-panel{grid-column: 1 / -1;}
.setup-heading > strong{font-size: 1.5em;}
.setup-heading h1{font-size: 1.3em;}
.setup-heading{gap: 0.6em;}
.setup-heading button{font-size: 0.8em !important;}
.setup-panel-heading{flex-wrap: wrap;}
.setup-panel h2{font-size: 1em;}
.wishes-panel h2{grid-column: 1 / -1;}
.wishes-panel label{font-size: 0.85em;}
.wishes-panel label[for="build-wishes"]{grid-area: 2 / 1;}
.wishes-panel label[for="enemy-wishes"]{grid-area: 2 / 2;}
.wishes-panel textarea{grid-row: 2;}
}
.pack-track::-webkit-scrollbar{display: none;}
#game-language{font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.8em; background: rgb(24, 23, 28); color: rgb(234, 220, 194); border: 1px solid rgb(136, 115, 81); border-radius: 0.3em; max-width: 8em; padding: 0.25em;}
.setup-heading{flex-wrap: wrap;}
.card p:has(.effect-line){flex-direction: column;}
#narrator-settings:empty{display: none;}
#narrator-settings{flex: 0 0 auto;}
#narrator-settings label{display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.25em 0.8em;}
#narrator-settings input{width: 100%; margin: 0px; accent-color: rgb(213, 173, 110);}
.setting-labels{grid-column: 2; display: flex; justify-content: space-between; font-size: 0.85em; color: rgb(152, 148, 154);}
.setting-labels .active{color: rgb(237, 201, 140);}
.event-choices{display: flex; flex-wrap: wrap; gap: 1em;}
.event-choices button{padding: 1em;}
.setup-grid{grid-template-columns: repeat(4, minmax(0px, 1fr)); grid-template-rows: minmax(0px, 1fr) minmax(0px, 1fr);}
.content-panel{grid-area: 1 / 1 / auto / -1;}
.narrator-panel{grid-area: 2 / 1 / auto / 4;}
.wishes-panel{grid-area: 2 / 4; display: flex; flex-direction: column; gap: 0.5em;}
.wishes-panel h2{grid-column: 1 / -1;}
.wishes-panel label[for="build-wishes"]{grid-area: 2 / 1;}
.wishes-panel label[for="enemy-wishes"]{grid-area: 2 / 2;}
.wishes-panel textarea{grid-row: 2;}
.wishes-panel small{display: block;}
.pack-tile[data-pack-kind="content"] .pack-select{display: none;}
.pack-select input{width: 1.25em; height: 1.25em; accent-color: rgb(201, 165, 101); margin: 0px; cursor: pointer;}
.pack-tabs{display: flex; gap: 0.5em; flex-wrap: wrap; margin: 1em 0px;}
.pack-tabs [aria-pressed="true"]{border-color: rgb(239, 196, 131) !important; background: rgb(67, 52, 39) !important;}
#pack-dialog{max-height: 90dvh; overflow: hidden;}
#pack-body{max-height: 72dvh; overflow: auto;}
.pack-entry{display: grid; grid-template-columns: 5em minmax(0px, 1fr); align-items: start; gap: 0.75em 1em; padding: 1em 0px; border-bottom: 1px solid rgba(136, 115, 81, 0.333);}
.pack-entry h3{grid-column: 1 / -1; margin: 0px;}
.entry-art{display: block; width: 100%; height: auto; min-width: 0px; background-repeat: no-repeat;}
.entry-art-sprite{aspect-ratio: 3 / 4;}
.entry-description{min-width: 0px;}
.entry-description:only-child{grid-column: 1 / -1;}
.pack-entry p{white-space: pre-line; overflow-wrap: anywhere; margin: 0px 0px 0.5em;}
@media (max-aspect-ratio: 1 / 1), (max-width: 600px) {
.pack-entry{display: flex; flex-direction: column; gap: 0.75em;}
.pack-entry > .entry-art{width: 100%; height: auto; flex: 0 0 auto;}
.pack-entry > .entry-description{width: 100%;}
}
@media (max-aspect-ratio: 1 / 1) {
.setup-grid{grid-template-columns: minmax(0px, 1fr); grid-template-rows: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 0.45fr);}
.content-panel{grid-area: 1 / 1;}
.narrator-panel{grid-area: 2 / 1;}
.wishes-panel{grid-area: 3 / 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0px, 1fr); gap: 0.3em 0.8em;}
.wishes-panel small{display: none;}
}
.setup-actions #party-summary{flex: 1 1 0%; min-width: 0px;}
.setup-actions #narrator-settings{flex: 0 1 24em; min-width: 0px; width: auto; margin-left: auto;}
@media (max-aspect-ratio: 1 / 1) {
.setup-actions{flex-wrap: wrap; gap: 0.4em 0.8em;}
.setup-actions #party-summary{flex-basis: 100%;}
.setup-actions #narrator-settings{flex: 1 1 0px;}
.setup-actions #narrator-settings label{grid-template-columns: 1fr;}
.setup-actions .setting-labels{grid-column: 1;}
}
.setup-heading #resume-battle{margin-left: 0px;}
#tutorial-guide{position: absolute; top: 0.4em; left: 2%; right: 2%; padding: 0.6em 1em; background: rgba(24, 24, 34, 0.91); border: 1px solid rgb(136, 115, 81); border-radius: 0.5em; font-size: clamp(11px, 1.4vmin, 18px); z-index: 3; color: rgb(234, 220, 194);}
#tutorial-guide[hidden]{display: none;}
.arena:has(#tutorial-guide:not([hidden])){padding-top: 5em;}
.route-hint{color: rgb(235, 208, 160); line-height: 1.5;}
.route-shop{display: flex; gap: 1em; overflow-x: auto; padding: 0.5em;}
.route-offer{flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.5em;}
.route-offer .card{position: relative; transform: none !important;}
.route-artifact{width: min(24vw, 12em); background: rgb(37, 33, 42); border: 1px solid rgb(170, 137, 83); border-radius: 0.5em;}
.route-deck{display: flex; flex-wrap: wrap; gap: 0.5em;}
.route-ending{display: flex; align-items: center; gap: 1em;}
.route-ending img{object-fit: contain;}
#health{white-space: nowrap; letter-spacing: 0.15em;}
#world-dialog button{background: rgb(39, 35, 50); color: rgb(241, 223, 189); border: 1px solid rgb(156, 128, 85); border-radius: 0.35em; padding: 0.5em 0.8em; font: inherit;}
#world-dialog button:disabled{opacity: 0.45; cursor: default;}
#world-dialog{max-height: 92dvh; max-width: 94vw;}
#health[aria-label^="Сердечки"]{font-size: 1.5em;}
#health[aria-label^="Run hearts"]{font-size: 1.5em;}
@media (max-aspect-ratio: 1 / 1) {
body:has(#tutorial-guide:not([hidden])){--card-h: min(400px,calc((100dvh - 310px)/3),calc((100vw - 36px)/1.1));}
.arena:has(#tutorial-guide:not([hidden])){grid-template-rows: auto repeat(2, minmax(0px, 1fr)); padding: 0px 12px 8px; gap: 16px;}
.arena #tutorial-guide:not([hidden]){position: static; grid-area: 1 / 1; margin: 0px -4px; font-size: 11px; line-height: 1.25;}
.arena:has(#tutorial-guide:not([hidden])) #enemies{grid-row: 2;}
.arena:has(#tutorial-guide:not([hidden])) #player{grid-row: 3;}
}
@media (min-aspect-ratio: 1001 / 1000) {
.arena:has(#tutorial-guide:not([hidden])){display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); grid-template-rows: auto minmax(0px, 1fr); gap: 0px 2em; padding: 0.4em 2% 0.5em;}
.arena #tutorial-guide:not([hidden]){position: static; grid-area: 1 / 1 / auto / -1; margin: 0px 0px 0.5em;}
.arena:has(#tutorial-guide:not([hidden])) #player{grid-row: 2; align-self: stretch; min-height: 0px; container-type: size; justify-content: center; padding-top: 2em;}
.arena:has(#tutorial-guide:not([hidden])) #enemies{grid-row: 2; align-self: stretch; min-height: 0px; container-type: size; justify-content: center; padding-top: 2em;}
.arena:has(#tutorial-guide:not([hidden])) #player{grid-column: 1;}
.arena:has(#tutorial-guide:not([hidden])) #enemies{grid-column: 2;}
.arena:has(#tutorial-guide:not([hidden])) .unit{flex: 0 0 auto;}
}
#world-dialog .card:disabled{opacity: 1; filter: none;}
#route-map-dialog{width: min(90vw, 58em); height: 90dvh; max-height: 90dvh; padding: 1em 1.4em; overflow: hidden; background: radial-gradient(at 50% 40%, rgb(66, 54, 43), rgb(32, 30, 36)); border: 1px solid rgb(170, 138, 92); color: rgb(234, 216, 183);}
#route-map-dialog[open]{display: flex; flex-direction: column;}
#route-map-dialog .dialog-head{flex: 0 0 auto;}
#route-map-body{flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column;}
.map-instruction{flex: 0 0 auto; text-align: center; color: rgb(205, 187, 154);}
.route-map-canvas{position: relative; flex: 1 1 0%; min-height: 0px; margin: 0px 1em 1em;}
.route-map-canvas svg{position: absolute; inset: 0px; width: 100%; height: 100%; overflow: visible;}
.route-map-canvas path{fill: none; stroke: rgb(179, 156, 120); stroke-width: 0.45; stroke-dasharray: 1.2, 1.2;}
.route-map-canvas path.travelled{stroke: rgb(238, 208, 154); stroke-dasharray: none;}
#route-map-dialog .route-map-node{position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 3em; height: 3em; border: 1px solid rgb(157, 136, 107); border-radius: 50%; background: rgb(36, 33, 39); color: rgb(210, 191, 160); font-size: clamp(14px, 2.5vmin, 24px); padding: 0px; opacity: 1;}
.map-icon{font-family: Georgia, serif;}
.map-label{position: absolute; left: calc(100% + 0.65em); font-size: 0.7em; white-space: nowrap; color: rgb(234, 216, 183);}
#route-map-dialog .route-map-node.available{border: 2px solid rgb(255, 224, 160); background: rgb(99, 72, 45); color: rgb(255, 240, 189); box-shadow: rgba(230, 189, 101, 0.2) 0px 0px 0px 0.2em, rgba(223, 179, 102, 0.267) 0px 0px 1.2em;}
#route-map-dialog .route-map-node.visited{color: rgb(145, 184, 138); border-color: rgb(145, 184, 138);}
#route-map-dialog .route-map-node.future{color: rgb(156, 142, 127); border-style: dashed;}
#close-route-map{background: rgb(41, 35, 45); border: 1px solid rgb(140, 117, 84); color: rgb(234, 216, 183); padding: 0.4em 0.8em; border-radius: 0.3em;}
@media (max-aspect-ratio: 1 / 1) {
#route-map-dialog{width: 96vw; padding: 0.7em;}
.map-label{font-size: 0.7em;}
#run-map{font-size: 10px;}
header{gap: 6px;}
}
.map-legend{display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65em 1.4em; padding: 0.8em 0px; border-top: 1px solid rgba(170, 138, 92, 0.333); font-size: clamp(12px, 1.5vmin, 16px);}
.map-legend > span{display: flex; align-items: center; gap: 0.5em;}
.map-legend i{font-style: normal; width: 2em; text-align: center; color: rgb(239, 211, 160);}
#route-map-dialog .route-map-node.current{border: 2px solid rgb(238, 208, 154); box-shadow: rgba(238, 208, 154, 0.2) 0px 0px 0px 0.25em;}
@media (max-aspect-ratio: 1 / 1) {
.route-map-canvas{margin: 0px 1em 1em;}
#restart{font-size: 10px; padding: 6px;}
header strong{font-size: 18px;}
}
.card.frame-attack > b{background: none; border: 0px; border-radius: 0px; box-shadow: none; color: rgb(234, 220, 207); text-shadow: none; font-family: Georgia, serif; font-weight: 700;}
.card.frame-skill > b{background: none; border: 0px; border-radius: 0px; box-shadow: none; color: rgb(234, 220, 207); text-shadow: none; font-family: Georgia, serif; font-weight: 700;}
.card.frame-talent > b{background: none; border: 0px; border-radius: 0px; box-shadow: none; color: rgb(234, 220, 207); text-shadow: none; font-family: Georgia, serif; font-weight: 700;}
.card.frame-summon > b{background: none; border: 0px; border-radius: 0px; box-shadow: none; color: rgb(234, 220, 207); text-shadow: none; font-family: Georgia, serif; font-weight: 700;}
.event-art{max-width: 100%;}
.event-option small{display: block;}
.event-option fieldset{display: flex; flex-wrap: wrap;}
.route-artifact p{white-space: pre-line;}
body{--relic-row: clamp(38px,5dvh,54px);}
.relics{display: flex; align-items: center; gap: clamp(4px, 0.6vw, 10px); padding: 3px 2%; min-width: 0px; overflow: auto hidden; letter-spacing: 0px; scrollbar-width: none; overscroll-behavior-x: contain;}
.relics > small{grid-column: 1 / -1;}
.relic-icon{flex: 0 0 auto; height: 100%; padding: 0px; border: 1px solid rgba(185, 154, 98, 0.4); border-radius: 20%; background: rgb(24, 24, 34); aspect-ratio: 1 / 1; width: auto; max-height: 100%; overflow: hidden;}
.relic-icon > span{display: block; width: 100%; height: 100%; background-repeat: no-repeat;}
.relic-icon:hover{border-color: rgb(255, 226, 161);}
.relic-icon:focus-visible{border-color: rgb(255, 226, 161);}
.route-artifact{display: flex; flex-direction: column; gap: 0.6em; padding: 0.6em; min-height: 0px;}
.relic-art{width: 100%; aspect-ratio: 1 / 1; background-repeat: no-repeat; border-radius: 0.4em;}
.route-artifact b{text-align: center; font-family: Georgia, serif;}
.route-artifact p{margin: 0px;}
.event-art{width: min(22dvh, 100%); aspect-ratio: 2 / 3; max-height: none; object-fit: contain; border: 2px solid rgb(170, 148, 118); border-radius: 8px;}
.relics::-webkit-scrollbar{display: none;}
.relic-detail-art{width: min(45dvh, 65vw); aspect-ratio: 1 / 1; border-radius: 8px; background-repeat: no-repeat;}
.test-panel{width: min(94vw, 1100px); height: 88dvh;}
.test-columns{display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 1em; min-height: 0px; overflow: auto; height: 65%;}
.test-columns fieldset{min-width: 0px; overflow: auto;}
.test-columns label{display: flex; align-items: center; justify-content: space-between; gap: 0.5em; margin: 0.5em 0px;}
.test-columns input{width: 4em;}
.test-panel input{background: rgb(37, 35, 48); color: rgb(241, 229, 212); padding: 0.4em; border: 1px solid rgb(136, 115, 81);}
.test-panel select{background: rgb(37, 35, 48); color: rgb(241, 229, 212); padding: 0.4em; border: 1px solid rgb(136, 115, 81);}
.test-panel > label{display: inline-block; margin: 0.6em;}
.test-panel [hidden]{display: none;}
.test-panel [data-error]{color: rgb(255, 170, 160);}
#test-controls{position: fixed; right: 1em; top: 52px; z-index: 100;}
#test-controls button{background: rgb(37, 35, 48); border: 1px solid rgb(170, 137, 83); padding: 0.4em;}
.taunt-label{color: rgb(247, 209, 144); font-size: 10px;}
@media (max-aspect-ratio: 1 / 1) {
.test-columns{grid-template-columns: 1fr; height: 65%; overflow: auto;}
.test-columns fieldset{overflow: visible;}
.test-panel{padding: 12px;}
}
.test-panel button{background: rgb(48, 41, 55); color: rgb(241, 229, 212); border: 1px solid rgb(183, 151, 101); border-radius: 5px; padding: 0.5em 0.8em;}
.test-panel [data-launch]{display: block; margin-left: auto;}
.test-columns fieldset{border: 1px solid rgb(120, 107, 121); border-radius: 6px;}
:where(dialog button:not(.card):not(.pack-open):not(.pack-favorite):not(.pack-info)):not(:disabled):hover{background: rgb(68, 55, 71); border-color: rgb(227, 189, 125);}
:where(dialog button):disabled{cursor: default; color: rgb(166, 157, 152);}
:where(dialog button:not(.card)):active:not(:disabled){background: rgb(33, 29, 41);}
.setup-heading #setup-settings{margin-left: auto; flex: 0 0 auto; border: 0px; background: transparent; color: rgb(191, 174, 153); padding: 4px; line-height: 1; font-size: 21px !important;}
.setup-heading #setup-settings:hover{color: rgb(255, 226, 161);}
.pack-category-switches{display: flex; flex-wrap: wrap; gap: 1em; border: 1px solid rgb(136, 115, 81); border-radius: 8px; margin-bottom: 1em;}
.pack-category-switches label{display: flex; align-items: center; gap: 0.4em;}
@media (max-width: 950px), (max-height: 600px) {
body{--combat-card-height: var(--card-h);}
#hand > .card{flex: 0 0 auto;}
.arena .unit{flex: 0 0 auto;}
#player .unit{flex: 0 0 auto;}
.arena .unit-name{font-size: 16px; line-height: 1.15; min-height: 0px;}
#hand > .card .cost{width: 34px;}
.arena .unit-type{font-size: 12px; letter-spacing: 1px; line-height: 1.2;}
#hand > .card .card-type{letter-spacing: 1px;}
.arena .unit-details{grid-template-rows: 24px 28px minmax(0px, 1fr); gap: 4px; padding: 4px;}
.arena .unit .stats{font-size: 16px; line-height: 24px; margin: 0px;}
.arena .unit .hp{height: 28px;}
.arena .unit .hp > span{font-size: 16px;}
.arena .unit .intent{bottom: calc(100% + 5px);}
.arena .taunt-label{font-size: 14px;}
#enemies{max-width: 100%; overflow: auto visible; justify-content: safe center;}
#player{max-width: 100%; overflow: auto visible; justify-content: safe center;}
}
@media (max-width: 950px), (max-height: 600px) {
#player{padding-top: 24px; padding-bottom: 12px; margin-top: -24px; margin-bottom: -12px;}
#enemies{padding-top: 24px; padding-bottom: 12px; margin-top: -24px; margin-bottom: -12px;}
}
#hand{max-width: 100%; scrollbar-width: thin; overscroll-behavior-x: contain; touch-action: pan-x; display: flex !important; justify-content: safe center !important; overflow: auto hidden !important;}
#hand > .card{flex-shrink: 0; margin-top: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important;}
#hand::-webkit-scrollbar{display: block; height: 4px;}
#enemies::-webkit-scrollbar{display: block; height: 4px;}
#player::-webkit-scrollbar{display: block; height: 4px;}
#hand::-webkit-scrollbar-thumb{background: rgb(165, 138, 96); border-radius: 3px;}
#enemies::-webkit-scrollbar-thumb{background: rgb(165, 138, 96); border-radius: 3px;}
#player::-webkit-scrollbar-thumb{background: rgb(165, 138, 96); border-radius: 3px;}
#player{display: flex; flex: 1 1 0px; min-width: 0px; max-width: 100%; justify-content: safe center; overflow: auto hidden; scrollbar-width: thin; touch-action: pan-x; overscroll-behavior-x: contain; padding-top: 26px; padding-bottom: 14px;}
#enemies{display: flex; flex: 1 1 0px; min-width: 0px; max-width: 100%; justify-content: safe center; overflow: auto hidden; scrollbar-width: thin; touch-action: pan-x; overscroll-behavior-x: contain; padding-top: 26px; padding-bottom: 14px;}
@media (max-aspect-ratio: 1 / 1) {
#player{width: 100%; flex: initial;}
#enemies{width: 100%; flex: initial;}
}
#hand{align-items: flex-start; padding: 6px 10px 12px; scroll-padding-inline: 10px;}
#hand > .card{transform: none !important;}
#hand > .card:last-child{margin-right: 0px !important;}
@media (max-width: 950px), (max-height: 600px) {
#hand > .card{margin-right: -40px !important;}
}
@media (max-aspect-ratio: 1 / 1) {
body > footer{display: grid; grid-template-columns: 64px 64px 64px minmax(0px, 1fr); align-items: start; gap: 4px 6px; padding: 4px 8px 0px;}
footer > .left-controls{display: contents;}
footer > .right-controls{display: contents;}
footer .energy{position: relative; inset: auto; grid-row: 1; place-self: start center; margin: 0px;}
footer #draw{position: relative; inset: auto; grid-row: 1; place-self: start center; margin: 0px;}
footer #discard{position: relative; inset: auto; grid-row: 1; place-self: start center; margin: 0px;}
footer #end{position: relative; inset: auto; grid-row: 1; place-self: start center; margin: 0px;}
footer .energy{grid-column: 1; width: 46px; height: 46px; margin-top: 2px;}
footer .energy strong{font-size: 28px;}
footer .energy > span{top: 100%; margin-top: 5px; font-size: 8px;}
footer #draw{grid-column: 2;}
footer #discard{grid-column: 3;}
footer .pile{width: 46px; height: 62px; gap: 4px; padding: 0px;}
footer .pile .back{width: 31px; height: 46px; aspect-ratio: auto; font-size: 24px;}
footer .pile b{top: 28px; right: 0px; min-width: 19px; padding: 2px; font-size: 11px;}
footer .pile small{font-size: 8px; line-height: 12px; letter-spacing: 0px;}
footer #end{grid-column: 4; width: 100%; height: 46px; min-height: 0px; padding: 5px; font-size: 11px; margin-top: 2px;}
footer #hand{grid-area: 2 / 1 / auto / -1; width: calc(100% + 16px); margin: 0px -8px; padding: 6px 10px 14px;}
}
:is(dialog,#pile-cards,#world-dialog,.reward-options,.route-offer) .card{zoom: var(--preview-scale); flex: 0 0 auto; display: grid; margin: 0px !important; transform: none !important; filter: none !important;}
:is(dialog,#pile-cards,#world-dialog,.reward-options,.route-offer) .card:disabled{opacity: 1;}
dialog .card .cost{width: 34px;}
dialog .card .card-type{letter-spacing: 1px;}
#pile-dialog{width: min(96vw, 1100px); max-height: 92dvh; overflow: auto; padding: 12px;}
#pile-cards{display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px; padding: 8px 2px;}
#run-map{border: 1px solid rgb(107, 98, 112); background: rgb(36, 35, 48); padding: 7px 10px; border-radius: 5px; white-space: nowrap;}
@media (max-width: 600px) {
header{gap: 5px; padding: 0px 6px;}
header strong{font-size: 16px;}
header #health{letter-spacing: 0px; font-size: 16px !important;}
header #turn{font-size: 10px;}
header #gold{font-size: 11px;}
#restart{font-size: 10px; padding: 6px;}
#run-map{font-size: 10px; padding: 6px;}
#settings{padding: 3px;}
}
body{height: 100dvh; min-height: 0px;}
@media (min-aspect-ratio: 1001 / 1000) and (max-height: 600px) {
body{--relic-row: 26px; --card-h: calc((100dvh - 104px)/2); --combat-card-height: var(--card-h);}
header{gap: 12px; padding: 0px 12px; font-size: 11px;}
header strong{font-size: 19px;}
header #health{font-size: 16px !important;}
header #turn{font-size: 11px;}
#restart{font-size: 10px; padding: 4px 7px;}
#run-map{font-size: 10px; padding: 4px 7px;}
#settings{font-size: 19px; padding: 2px;}
#test-controls{top: 34px; right: 8px;}
#test-controls button{font-size: 10px; padding: 3px 6px;}
.arena{display: flex; align-items: center; padding: 0px 10px; gap: 12px; overflow: hidden;}
#player{align-items: center; align-self: stretch; margin: 0px; padding: 14px 0px 12px; gap: 8px; flex: 1 1 0px;}
#enemies{align-items: center; align-self: stretch; margin: 0px; padding: 14px 0px 12px; gap: 8px; flex: 1 1 0px;}
.arena .unit-type{display: block;}
body > footer{grid-template-columns: 62px minmax(0px, 1fr) 94px; grid-template-rows: minmax(0px, 1fr); padding: 2px 8px 4px; gap: 6px; align-items: center;}
footer > .left-controls{position: static; display: flex; height: 100%; min-height: 0px; flex-direction: column; justify-content: space-around; gap: 2px;}
footer > .right-controls{position: static; display: flex; height: 100%; min-height: 0px; flex-direction: column; justify-content: space-around; gap: 2px;}
footer .energy{width: 32px; height: 32px; flex-shrink: 0;}
footer .energy strong{font-size: 21px;}
footer .energy small{font-size: 9px; margin: 4px 0px 0px 2px;}
footer .energy > span{display: none;}
footer .pile{width: 42px; height: 43px; gap: 0px; flex-shrink: 0;}
footer .pile .back{width: 24px; height: 32px; aspect-ratio: auto; font-size: 20px;}
footer .pile b{top: 17px; right: 0px; min-width: 17px; padding: 1px; font-size: 9px;}
footer .pile small{font-size: 7px; line-height: 9px; letter-spacing: 0px; margin: 2px 0px 0px;}
footer #end{width: 94px; min-height: 30px; height: 30px; font-size: 10px; padding: 3px; order: 0;}
footer #hand{padding: 4px 8px 8px; align-self: center;}
body:has(#tutorial-guide:not([hidden])){--card-h: calc((100dvh - 142px)/2);}
.arena:has(#tutorial-guide:not([hidden])){padding: 0px 10px; gap: 0px 12px; grid-template-rows: 38px minmax(0px, 1fr);}
.arena #tutorial-guide:not([hidden]){font-size: 10px; line-height: 1.15; padding: 3px 6px; margin: 0px; max-height: 38px; overflow: auto;}
.arena:has(#tutorial-guide:not([hidden])) #player{padding-top: 14px; container-type: normal;}
.arena:has(#tutorial-guide:not([hidden])) #enemies{padding-top: 14px; container-type: normal;}
}
#image-style{font: inherit; color: rgb(241, 223, 189); background: rgb(39, 35, 50); border: 1px solid rgb(156, 128, 85); border-radius: 5px; padding: 6px 10px; margin-left: 8px; max-width: 100%;}
body{--card-w: calc(var(--card-h)*12/23);}
.card .art{clip-path: none; border-radius: 3px; padding: 0px; border: 1px solid var(--rim,#9b9690); background-color: rgb(23, 25, 35) !important;}
.card.frame-attack .art{clip-path: none; border-radius: 3px; padding: 0px; border: 1px solid var(--rim,#9b9690); background-color: rgb(23, 25, 35) !important;}
.card.frame-skill .art{clip-path: none; border-radius: 3px; padding: 0px; border: 1px solid var(--rim,#9b9690); background-color: rgb(23, 25, 35) !important;}
.card.frame-talent .art{clip-path: none; border-radius: 3px; padding: 0px; border: 1px solid var(--rim,#9b9690); background-color: rgb(23, 25, 35) !important;}
.card.frame-summon .art{clip-path: none; border-radius: 3px; padding: 0px; border: 1px solid var(--rim,#9b9690); background-color: rgb(23, 25, 35) !important;}
.card .art-image{clip-path: none; border-radius: 0px; background-repeat: no-repeat;}
.card.frame-attack .art-image{clip-path: none; border-radius: 0px; background-repeat: no-repeat;}
.card.frame-skill .art-image{clip-path: none; border-radius: 0px; background-repeat: no-repeat;}
.card.frame-talent .art-image{clip-path: none; border-radius: 0px; background-repeat: no-repeat;}
.card.frame-summon .art-image{clip-path: none; border-radius: 0px; background-repeat: no-repeat;}
.unit .portrait{background-repeat: no-repeat; background-color: rgb(23, 25, 35);}
.unit-details{overflow: auto;}
@media (max-width: 950px), (max-height: 600px) {
#hand > .card{zoom: calc(var(--combat-card-height)/460px);}
.arena .unit{zoom: calc(var(--combat-card-height)/460px);}
#player .unit{zoom: calc(var(--combat-card-height)/460px);}
}
.card .art{--art-shape: inset(0 round 7px); isolation: isolate; overflow: visible;}
.card.frame-attack .art{--art-shape: polygon(0 0,100% 0,100% 85%,50% 100%,0 85%);}
.card.frame-skill .art{--art-shape: inset(0 round 7px 7px 16px 16px);}
.card.frame-talent .art{--art-shape: inset(0 round 3px 3px 50% 50% / 3px 3px 30% 30%);}
.card.frame-summon .art{--art-shape: inset(0 round 45% / 20%);}
.card.frame-attack .art{border: 0px; box-shadow: none; background: transparent !important;}
.card.frame-skill .art{border: 0px; box-shadow: none; background: transparent !important;}
.card.frame-talent .art{border: 0px; box-shadow: none; background: transparent !important;}
.card.frame-summon .art{border: 0px; box-shadow: none; background: transparent !important;}
.card .art::before{content: ""; display: block; position: absolute; inset: 0px; clip-path: var(--art-shape); background: var(--rim,#b8b2a5); pointer-events: none; z-index: 0;}
.card .art::after{content: ""; display: block; position: absolute; inset: 0px; clip-path: var(--art-shape); background: var(--rim,#b8b2a5); pointer-events: none; z-index: 0;}
.card.frame-attack .art::after{content: ""; display: block; position: absolute; inset: 0px; clip-path: var(--art-shape); background: var(--rim,#b8b2a5); pointer-events: none; z-index: 0;}
.card .art::after{inset: 2px; background: rgb(23, 25, 35);}
.card.frame-attack .art::after{inset: 2px; background: rgb(23, 25, 35);}
.card .art .art-image{position: absolute; inset: 2px; width: auto; height: auto; z-index: 1; clip-path: var(--art-shape); border-radius: 0px;}
.card > .card-type{position: static; transform: none; place-self: center; z-index: 2; max-width: 90%; pointer-events: none;}
.card.frame-attack > .card-type{position: static; transform: none; place-self: center; z-index: 2; max-width: 90%; pointer-events: none;}
#exhaust-choice{width: min(96vw, 1000px); max-height: 90dvh; padding: 16px; overflow: auto;}
#exhaust-choice h2{font-size: 22px;}
#exhaust-choice .exhaust-options{display: flex; flex-wrap: wrap; justify-content: center;}
#exhaust-choice .card{cursor: pointer;}
#exhaust-choice .card[aria-pressed="true"]{outline: rgb(255, 171, 69) solid 3px; outline-offset: 2px; filter: brightness(1.15);}
.exhaust-actions{display: flex; gap: 12px; position: sticky; bottom: 0px; background: rgb(35, 35, 50); padding: 12px 0px;}
@media (max-width: 600px) {
#exhaust-choice .card{zoom: 0.6;}
}
header #restart{width: 32px; height: 32px; min-width: 32px; padding: 5px; display: grid; place-items: center;}
header #run-map{width: 32px; height: 32px; min-width: 32px; padding: 5px; display: grid; place-items: center;}
header #tutorial-help{width: 32px; height: 32px; min-width: 32px; padding: 5px; display: grid; place-items: center;}
header #run-map[hidden]{display: none;}
header #tutorial-help[hidden]{display: none;}
header svg{width: 21px; height: 21px;}
header #tutorial-help{font: bold 21px Georgia; border-radius: 50%;}
#tutorial-popover{position: fixed; z-index: 150; top: 54px; right: 12px; width: min(380px, -24px + 100vw); max-height: 65dvh; overflow: auto; padding: 16px; background: rgba(35, 35, 50, 0.96); border: 1px solid rgb(181, 154, 111); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.533) 0px 8px 28px; color: rgb(239, 228, 208); font: 16px / 1.5 system-ui;}
#tutorial-popover[hidden]{display: none;}
#tutorial-text{white-space: pre-line;}
#tutorial-image{display: block; max-width: 100%; height: auto; margin-top: 12px; border-radius: 6px;}
#tutorial-image[hidden]{display: none;}
#deck-tabs{display: flex; gap: 8px; margin: 12px 0px; flex-wrap: wrap;}
#deck-tabs[hidden]{display: none;}
#deck-tabs button[aria-pressed="true"]{border-color: rgb(237, 193, 128); background: rgb(87, 67, 49);}
@media (max-width: 360px) {
header{gap: 3px;}
header #restart{width: 28px; min-width: 28px; height: 28px; padding: 3px;}
header #run-map{width: 28px; min-width: 28px; height: 28px; padding: 3px;}
header #tutorial-help{width: 28px; min-width: 28px; height: 28px; padding: 3px;}
}
.route-reward-footer{top: 0px; z-index: 5; display: flex; justify-content: flex-end;}
#world-help{flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; padding: 0px; font: bold 22px Georgia;}
#world-dialog .route-shop{display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; overflow: visible; padding: 8px 0px 16px;}
.shop-item{min-width: 0px; display: flex; flex-direction: column; background: rgb(25, 25, 35); border: 1px solid rgb(136, 115, 81); border-radius: 10px; padding: 10px; gap: 10px;}
.shop-art{width: 100%; aspect-ratio: 2 / 3; background-repeat: no-repeat; border-radius: 6px;}
.shop-art.shop-relic{aspect-ratio: 1 / 1;}
.shop-item h3{font: 600 18px / 1.2 Georgia; margin: 0px; overflow-wrap: anywhere;}
.shop-item p{font: 14px / 1.45 system-ui; margin: 0px 0px 8px; white-space: pre-line; overflow-wrap: break-word;}
.shop-item > button{margin-top: auto; min-height: 40px; width: 100%;}
@media (max-width: 600px) {
#world-dialog .route-shop{grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px;}
.shop-item{padding: 8px; gap: 8px;}
.shop-item h3{font-size: 17px;}
.shop-item p{font-size: 13px;}
}
#world-dialog .route-shop.shop-row{display: flex; flex-wrap: nowrap; align-items: stretch; gap: 14px; overflow: auto hidden; padding: 6px 2px 12px; scroll-snap-type: x;}
.shop-section > h3{font: 20px Georgia; margin: 16px 0px 6px;}
.shop-row .shop-item{flex: 0 0 auto; min-width: 0px; scroll-snap-align: start; padding: 0px; border: 0px; background: none; gap: 8px;}
.shop-row .shop-item-card{width: calc(240px * var(--preview-scale,1));}
.shop-row .shop-item-relic{width: 150px;}
.shop-row .shop-item > [data-route-buy]{flex: 0 0 auto; min-height: 40px;}
.shop-detail-art{width: min(280px, 70vw); aspect-ratio: 1 / 1; background-repeat: no-repeat; border-radius: 8px;}
@media (max-width: 600px) {
.shop-row .shop-item-card{width: 156px;}
.shop-row .shop-item-card .card{zoom: 0.65 !important;}
.shop-row .shop-item-relic{width: 140px;}
}
.camp-actions{display: flex; flex-wrap: wrap; gap: 16px; padding: 16px 0px;}
.camp-actions button{flex: 1 1 0%; min-width: 140px; min-height: 52px;}
dialog{--preview-scale: .9; --dialog-surface: #202331; padding: 16px; scroll-padding-top: 90px; overscroll-behavior: contain;}
dialog .dialog-head{position: sticky; top: -16px; z-index: 12; gap: 12px; padding: 12px 0px; margin-top: -12px; background: var(--dialog-surface); align-items: center;}
dialog .dialog-head h2{flex: 1 1 0%; min-width: 0px; font: 24px / 1.2 Georgia; margin: 8px 0px; overflow-wrap: break-word;}
dialog .dialog-head > button{flex: 0 0 auto; min-height: 40px;}
.dialog-resources{display: block; font: 14px / 1.4 system-ui; color: rgb(205, 187, 154); margin-top: 6px;}
#world-dialog #world-help{width: 36px; min-height: 36px; height: 36px; border-radius: 50%; padding: 0px; font: bold 22px Georgia;}
#close-world:disabled{display: none;}
#close-route-map:disabled{display: none;}
#route-map-dialog{--dialog-surface: #282329;}
#pile-dialog{padding: 16px;}
#pack-dialog{padding: 16px;}
#world-dialog{padding: 16px;}
#world-dialog{width: min(94vw, 960px);}
#settings-dialog{width: min(94vw, 480px); overflow: hidden;}
#settings-dialog[open]{display: flex; flex-direction: column;}
#settings-dialog .dialog-head{position: static; flex: 0 0 auto; margin: 0px; padding: 0px 0px 12px;}
.settings-body{min-height: 0px; overflow-y: auto; overscroll-behavior: contain;}
#settings-dialog #game-language{font: 14px system-ui; padding: 8px 12px; margin: 0px; max-width: 100%; min-height: 40px; background: rgb(39, 35, 50); color: rgb(241, 223, 189); border: 1px solid rgb(156, 128, 85); border-radius: 5px;}
#settings-dialog #image-style{font: 14px system-ui; padding: 8px 12px; margin: 0px; max-width: 100%; min-height: 40px; background: rgb(39, 35, 50); color: rgb(241, 223, 189); border: 1px solid rgb(156, 128, 85); border-radius: 5px;}
#settings-dialog label{margin: 12px 0px 8px;}
#settings-dialog .settings-body > button{margin: 4px 4px 4px 0px; min-height: 40px;}
.settings-actions{display: grid; gap: 8px; margin-top: 16px;}
.settings-actions > a{display: grid; place-items: center; text-decoration: none;}
.settings-actions > a:hover{background: rgb(68, 55, 71); border-color: rgb(227, 189, 125);}
.settings-actions > a:focus-visible{outline: rgb(227, 189, 125) solid 2px; outline-offset: 2px;}
#pile-cards{display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px; padding: 8px 0px;}
.reward-options{display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px; padding: 8px 0px;}
#world-dialog .reward-options{gap: 16px;}
.route-offer{width: calc(240px * var(--preview-scale)); flex: 0 0 auto;}
.shop-row .shop-item-card{width: calc(240px * var(--preview-scale)); flex: 0 0 auto;}
.shop-row .shop-item-relic{width: calc(240px * var(--preview-scale)); flex: 0 0 auto;}
.route-offer > button:not(.card){width: 100%; min-height: 44px;}
.shop-item > [data-route-buy]{width: 100%; min-height: 44px;}
.relic-card-art{width: 100%; border-radius: 5px;}
.route-reward-footer{position: static; padding: 0px 0px 8px; background: none;}
#world-dialog .shop-row .card{zoom: var(--preview-scale) !important;}
.route-ending img{height: auto; max-height: 45dvh; max-width: 40%;}
.route-ending{padding: 16px 0px; line-height: 1.5;}
@media (max-width: 600px) {
dialog{--preview-scale: .65; max-width: calc(-16px + 100vw);}
#pile-dialog{width: calc(-16px + 100vw); padding: 12px;}
#pack-dialog{width: calc(-16px + 100vw); padding: 12px;}
#world-dialog{width: calc(-16px + 100vw); padding: 12px;}
dialog .dialog-head{top: -12px; gap: 10px;}
dialog .dialog-head h2{font-size: 22px;}
#pile-cards{gap: 12px;}
.reward-options{gap: 12px;}
#world-dialog .reward-options{gap: 12px;}
.route-ending{flex-direction: column; align-items: center;}
.route-ending img{max-width: 65%; max-height: 32dvh;}
.route-ending p{margin: 0px;}
}
@media (max-width: 360px) {
dialog{--preview-scale: .58;}
.route-offer{width: calc(240px * var(--preview-scale));}
.shop-row .shop-item-card{width: calc(240px * var(--preview-scale));}
.shop-row .shop-item-relic{width: calc(240px * var(--preview-scale));}
}
.event-card-choice{position: relative; display: block; cursor: pointer;}
.event-card-choice > input{position: absolute; right: 6px; top: 6px; z-index: 6; width: 22px; height: 22px; accent-color: rgb(213, 173, 110);}
.event-card-choice:has(input:checked){outline: rgb(237, 193, 128) solid 3px; border-radius: 6px;}
.event-option fieldset{max-height: 50dvh; overflow: auto; padding: 12px; gap: 12px; justify-content: center;}
.event-option > button{min-height: 44px;}
.event-option{margin: 16px 0px;}
#hand > .card{touch-action: none;}
#exhaust-choice .card{zoom: var(--preview-scale) !important;}
#exhaust-choice .exhaust-options{gap: 12px; padding: 6px;}
.exhaust-actions{justify-content: flex-end;}
.exhaust-actions > button{min-height: 44px;}
.reward-options{align-items: stretch;}
#world-dialog .reward-options{align-items: stretch;}
.event-layout{display: grid; grid-template-columns: minmax(180px, 280px) minmax(0px, 1fr); gap: 24px; align-items: center; padding: 12px 0px;}
.event-layout > .event-art{display: block; width: 100%; height: auto; max-height: 55dvh; object-fit: contain; margin: 0px;}
.event-copy{min-width: 0px; font-size: 15px; line-height: 1.5;}
.event-copy > p:first-child{margin-top: 0px;}
.event-layout:not(:has(> .event-art)){grid-template-columns: 1fr;}
.event-layout .event-card-choice .card{zoom: var(--preview-scale) !important;}
@media (max-width: 600px) {
.event-layout{grid-template-columns: 1fr; gap: 16px;}
.event-layout > .event-art{max-width: 240px; max-height: 36dvh; justify-self: center;}
.event-copy{font-size: 14px;}
}
.map-legend{flex: 0 0 auto;}
#route-map-dialog .dialog-head{top: 0px;}
.effect-icon{font-weight: 700;}
.arena .status-badge{font-weight: 700;}
@media (max-width: 950px), (max-height: 600px) {
.arena .status-badge{font-size: 26px; line-height: 1.15; padding: 2px 5px;}
.arena .unit .intent{font-size: 28px; line-height: 1.2;}
}
.arena .unit-details{min-width: 0px;}
.arena .unit .stats{line-height: 1; align-items: center; min-height: 0px;}
.arena .unit .hp{height: 100%; min-height: 0px;}
.arena .unit .unit-statuses{min-width: 0px; flex-wrap: nowrap; max-width: 100%;}
.arena .status-badge{line-height: 1;}
#hand .effect-icon{vertical-align: middle;}
.arena .unit .stats{font-size: var(--stat-size,12px); padding: 0px 2px; white-space: nowrap;}
.arena .status-badge{font-size: var(--status-size,14px); padding: 1px 3px;}
.arena .unit .intent{line-height: 1.2; overflow: visible;}
.unit-vitals{display: flex; align-items: stretch; gap: 3px; min-width: 0px; min-height: 0px;}
.arena .unit-vitals .hp{flex: 1 1 0%; min-width: 0px;}
.arena .unit-vitals .hp > span{font-size: var(--vitals-size,12px); white-space: nowrap;}
.unit-block{display: flex; align-items: center; flex: 0 0 auto; padding: 0px 3px; border: 1px solid rgb(100, 132, 150); border-radius: 3px; background: rgb(36, 62, 80); color: rgb(197, 230, 243); font-size: var(--vitals-size,12px); font-weight: 700; white-space: nowrap;}
.card > .art{place-self: center; flex: 0 0 auto;}
.unit > .portrait{place-self: center; flex: 0 0 auto;}
.relic-card-art{aspect-ratio: 3 / 4; background-repeat: no-repeat; background-size: contain !important; background-position: center center !important;}
#hand > .card p{flex-direction: column;}
#hand .effect-line{max-width: 100%; flex: 0 0 auto;}
.arena .unit-details{padding: 0px; overflow: hidden;}
.arena .unit .unit-statuses{display: grid; grid-template-rows: repeat(2, minmax(0px, 1fr)); grid-template-columns: repeat(5, minmax(0px, 1fr)); grid-auto-flow: column; grid-auto-columns: calc(20%); gap: 0px; align-items: stretch; align-content: stretch; overflow: auto hidden;}
.arena .unit .status-badge{display: flex; min-width: 0px; white-space: nowrap; line-height: 1; padding: 0px; border-width: 0px; background: transparent;}
.arena .unit .intent{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.15em 0.4em; white-space: normal; overflow: visible;}
.intent-item{display: inline-flex; align-items: center; justify-content: center; gap: 0.2em; white-space: nowrap;}
#hand{height: calc(var(--card-h) + 44px);}
@media (max-aspect-ratio: 1 / 1) {
footer #hand{height: calc(var(--card-h) + 44px);}
}
@media (min-aspect-ratio: 1001 / 1000) and (max-height: 600px) {
body{grid-template-rows: 32px 26px minmax(0,1fr) calc(var(--card-h) + 40px);}
footer #hand{height: calc(var(--card-h) + 36px);}
}
.arena .unit-vitals .hp > span{line-height: 1;}
.arena .unit .hp{border-radius: 2px;}
#hand > .card{margin-right: 0px !important;}
#hand{gap: 6px;}
@media (min-aspect-ratio: 1001 / 1000) and (max-height: 600px) {
.arena .unit .status-badge{font-size: calc(5.5 * var(--screen-pixel,1px));}
}
@media (max-aspect-ratio: 1 / 1) {
.arena{padding: 0px 12px; align-content: center; grid-template-rows: max-content max-content;}
#enemies{margin: 0px; align-self: stretch; padding: 0px 0px 3px; min-height: 0px;}
#player{margin: 0px; align-self: stretch; padding: 0px 0px 3px; min-height: 0px;}
#hand{padding-bottom: 4px; height: calc(var(--card-h) + 34px);}
footer #hand{padding-bottom: 4px; height: calc(var(--card-h) + 34px);}
}
@media (max-aspect-ratio: 1 / 1) {
body{grid-template-rows: 44px var(--relic-row) minmax(0,1fr) calc(var(--card-h) + 102px);}
body > footer{grid-template-rows: 60px minmax(0px, 1fr);}
.arena{gap: 6px;}
#enemies{padding-top: 16px;}
}
.card p{color: rgb(245, 238, 226); font-weight: 600; text-shadow: none;}
.effect-icon{font-weight: 700;}
.unit-name{color: rgb(245, 238, 226); text-shadow: none;}
.card > b{color: rgb(245, 238, 226); text-shadow: none;}
.unit-vitals .hp > span{color: rgb(245, 238, 226); text-shadow: none;}
.arena .status-badge{color: rgb(245, 238, 226); text-shadow: none;}
#hand > .card p{font-weight: 600;}
.arena .unit-name{font-size: calc(7 * var(--screen-pixel,1px));}
.arena .unit .intent{font-size: calc(8 * var(--screen-pixel,1px)); gap: 0.15em 0.3em;}
.arena .unit-vitals .hp > span{font-size: calc(7 * var(--screen-pixel,1px));}
.arena .unit-block{font-size: calc(7 * var(--screen-pixel,1px));}
.game-icon{display: inline-block; width: 1.25em; height: 1.25em; max-width: none; object-fit: contain; vertical-align: -0.22em; flex: 0 0 auto; pointer-events: none;}
.effect-icon{vertical-align: middle; flex: 0 0 auto;}
.effect-icon .game-icon{vertical-align: initial;}
.intent-item .game-icon{display: block; vertical-align: initial;}
.effect-icon .game-icon{width: 1.25em;}
.status-badge .game-icon{width: 1.2em; height: 1.2em;}
.intent .game-icon{width: 1.2em; height: 1.2em;}
.hp .game-icon{width: 1em; height: 1em;}
.unit-block .game-icon{width: 1em; height: 1em;}
.arena .hp > span{display: flex; align-items: center; justify-content: center; gap: 0.2em;}
.arena .unit > .portrait{position: relative;}
.arena .portrait > .unit-vitals{position: absolute; bottom: 0px; left: 0px; right: 0px; height: calc(9 * var(--screen-pixel,1px)); gap: calc(1 * var(--screen-pixel,1px));}
.arena .unit-details{grid-template-rows: minmax(0px, 1fr); gap: 0px;}
.arena .unit .status-badge{position: relative; justify-content: flex-start; align-items: flex-start; font-size: calc(6 * var(--screen-pixel,1px)); overflow: hidden;}
.arena .status-badge .game-icon{width: calc(13 * var(--screen-pixel,1px)); height: calc(13 * var(--screen-pixel,1px)); max-width: 100%; max-height: 100%;}
.arena .status-count{position: absolute; bottom: 0px; right: 0px; line-height: 1; font-weight: 700; color: rgb(255, 255, 255); text-shadow: rgb(19, 19, 27) -1px -1px 1px, rgb(19, 19, 27) 1px -1px 1px, rgb(19, 19, 27) -1px 1px 1px, rgb(19, 19, 27) 1px 1px 1px;}
@media (min-width: 951px) and (min-height: 601px) {
body{--combat-card-height: var(--card-h);}
#hand > .card{zoom: calc(var(--combat-card-height)/460px); flex: 0 0 auto;}
.arena .unit{zoom: calc(var(--combat-card-height)/460px); flex: 0 0 auto;}
#player .unit{zoom: calc(var(--combat-card-height)/460px); flex: 0 0 auto;}
body > footer{align-items: stretch;}
footer #hand{height: 100%; min-height: 0px; align-items: flex-start; padding: 6px 10px 12px;}
}
#hand > .card{--screen-pixel: 2.618596px !important;}
.arena .unit{--screen-pixel: 2.618596px !important;}
.arena .unit.intent-target-highlight{outline: rgb(140, 234, 255) solid 4px; outline-offset: -4px; box-shadow: rgba(73, 203, 234, 0.44) 0px 0px 20px inset, rgba(73, 203, 234, 0.667) 0px 0px 12px;}
.arena .unit-type{font-size: 12px; line-height: 1.2; letter-spacing: 1px;}
#hand > .card .card-type{letter-spacing: 1px;}
@media (min-width: 951px) and (min-height: 601px) {
body{grid-template-rows: 46px 36px minmax(0,1fr) calc(var(--card-h) * 1.136 + 28px);}
}
.card-pack{position: absolute; left: 10px; right: 10px; bottom: 1px; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 5px; height: 10px; color: rgb(228, 210, 173); font: small-caps 9px / 1.1 Georgia, serif; pointer-events: none; text-transform: none;}
.card-pack::before{content: ""; flex: 0 0 10px; width: 10px; height: 1px; background: rgb(151, 133, 108);}
.card-pack::after{content: ""; flex: 0 0 10px; width: 10px; height: 1px; background: rgb(151, 133, 108);}
.card-pack-name{display: block; flex: 0 1 auto; min-width: 0px; white-space: nowrap; letter-spacing: 0.07em;}
.pack-entry{position: relative; padding-bottom: 22px;}