*{box-sizing:border-box}
p{margin-block-start:0;margin-block-end:0}
html,body{margin:0;padding:0;height:100%}
body{display:flex;background-color:#292b2c;background-image:url(/assets/image/transparent.svg);background-size:20px}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{border-radius:20px;background-color:#808080}
/* app */
.app{flex:1 0 210mm;display:flex;overflow:hidden auto}
.app-body{padding:var(--app-body__pt) var(--app-body__px) var(--app-body__pb);aspect-ratio:210/297;height:297mm;flex:none;overflow:visible;position:relative;margin:auto;background-image:url(/assets/image/background.jpg);background-position:center;background-size:cover}
.app-content{position:relative;z-index:1000}
/* app-asset */
.app-asset{position:absolute;pointer-events:none;user-select:none;z-index:2}
.app-asset--fabled_background{height:calc(var(--height) - var(--app__pt));width:100%;bottom:0;left:0;background-color:rgba(0,0,0,.05);z-index:0}
.app-asset--logo{width:var(--app-asset--logo__width);top:var(--app-asset--logo__top);left:var(--app-asset--logo__left);pointer-events:auto}
.app-asset--tl{width:var(--app-asset--tl__width);top:var(--app-asset--tl__top);left:var(--app-asset--tl__left)}
.app-asset--tr{width:var(--app-asset--tr__width);top:var(--app-asset--tr__top);left:var(--app-asset--tr__left)}
.app-asset--bl{width:var(--app-asset--bl__width);top:var(--app-asset--bl__top);left:var(--app-asset--bl__left)}
.app-asset--br{width:var(--app-asset--br__width);top:var(--app-asset--br__top);left:var(--app-asset--br__left)}
.app-asset--tips{width:var(--app-asset--tips__width);top:var(--app-asset--tips__top);left:var(--app-asset--tips__left)}
.app-asset--copyright{width:var(--app-asset--copyright__width);top:var(--app-asset--copyright__top);left:var(--app-asset--copyright__left)}
/* app-side */
.app-side{width:56px;position:absolute;overflow:hidden;z-index:1}
.app-side--left{top:0;bottom:0;left:0}
.app-side--right{top:0;bottom:0;right:0}
.app-side::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;user-select:none;background-image:url(/assets/image/side.png);background-size:100% auto}
.app-side--right::before{transform:rotate(180deg)}
.app-side_inner{position:absolute;z-index:2;width:100%;top:100px;left:0}
.app-side--left .app-side_inner{padding:0 12px 0 3px}
.app-side--right .app-side_inner{padding:0 3px 0 12px}
.app-side_name{margin-bottom:var(--app-side_name__mb);color:#FFF;font-size:20px;font-family:"ZCOOL KuaiLe",cursive,sans-serif;width:2em;height:2em;text-align:center;line-height:1;writing-mode:vertical-lr}
.app-side_content{display:flex;flex-direction:column;align-items:center}
.app-side_icon{width:var(--app-side_icon__width);padding:var(--app-side_icon__py) var(--app-side_icon__px)}
/* app-roles */
.app-roles_name{margin:var(--app-roles_name__mt) 0 var(--app-roles_name__mb);display:flex;align-items:center;font-size:20px;font-family:"ZCOOL KuaiLe",cursive,sans-serif}
.app-roles_name::after{content:"";flex:auto;height:1.5px;background-color:rgba(0,0,0,.5);margin-left:5px}
.app-roles_content{padding:0 var(--app-roles_content__px);column-count:2;column-gap:10px}
/* app-role */
.app-role{padding:var(--app-role__py) var(--app-role__px);display:flex;align-items:center;break-inside:avoid}
.app-role_icon{width:var(--app-role_icon__width);flex:none}
.app-role_text{flex:auto}
.app-role_name{padding:var(--app-role_name__pt) var(--app-role_name__pr) var(--app-role_name__pb) var(--app-role_name__pl);font-size:16px;font-family:"ZCOOL KuaiLe",cursive,sans-serif}
.app-role_ability{padding:var(--app-role_ability__pt) var(--app-role_ability__pr) var(--app-role_ability__pb) var(--app-role_ability__pl);font-size:8px}
/* townsfolk & outsider */
.app-roles--townsfolk .app-roles_name,
.app-roles--townsfolk .app-role_name,
.app-roles--outsider .app-roles_name,
.app-roles--outsider .app-role_name{color:#26548c}
/* minion & demon */
.app-roles--minion .app-roles_name,
.app-roles--minion .app-role_name,
.app-roles--demon .app-roles_name,
.app-roles--demon .app-role_name{color:#a92e29}
/* traveller */
.app-roles--traveller{display:none}
/* fabled */
/* .app-roles--fabled::before{content:"";background-color:rgba(0, 0, 0, .1);position:absolute;top:9px;left:0;right:0;height:100vh;pointer-events:none} */
.app-roles--fabled .app-roles_name::after{margin-left:0;margin-right:5px}
.app-roles--fabled .app-roles_name{flex-direction:row-reverse}
.app-roles--fabled .app-roles_name,
.app-roles--fabled .app-role_name{-webkit-text-stroke:.5px #5e5a34;background:linear-gradient(1800deg,#f4d622,#a07a27);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
/* jinxes */
.app-roles--jinxes{display:none}
/* design */
.app-design{width:230px;flex:none;background-color:#292b2c;color:#d4d4d4;font-size:14px;border-left:1px solid #171717;display:flex;flex-direction:column}
.app-design_header{flex:none;display:flex;align-items:center;justify-content:space-between;padding:5px 0;font-size:16px;border-bottom:1px solid #171717}
.app-design_body{flex:auto;overflow:auto}
.app-design_footer{flex:none;display:flex;align-items:center;justify-content:center;padding:15px 0;border-top:1px solid #171717}
.app-design_button{background-color:#424242;font-size:13px;border:none;color:inherit;padding:5px 32px;border-radius:100px;box-shadow:rgba(0,0,0,.2) 0 3px 1px -2px, rgba(0,0,0,.14) 0 2px 2px 0, rgba(0,0,0,.12) 0 1px 5px 0;cursor:pointer;transition:.2s}
.app-design_button:hover{background-color:#616161;box-shadow:rgba(0,0,0,.2) 0 2.98936px 1.03192px -1.98936px,rgba(0,0,0,.14) 0 2.02128px 2.03192px 0,rgba(0,0,0,.12) 0 1px 5.0532px 0}
.app-design_button:active{background-color:#848484;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10 1px,rgba(0,0,0,.12) 0 3px 14px 2px}
.app-design_button--save{background-color:#1890ff;margin-left:10px}
.app-design_button--save:hover{background-color:#1064b2}
.app-design_button--save:active{background-color:#6d92c6}
.app-design_items{padding:10px 0;border-bottom:1px solid #171717}
.app-design_title{padding:5px 15px}
.app-design_item{display:flex;padding:2px 15px}
.app-design_label{flex:none;font-size:12px;padding-right:.5em;width:4.5em;text-align:right}
.app-design_control{flex:auto}
/* print */
@page{size:A4;margin:0}
@media print{
  body{background-image:none;width:210mm;padding-right:0;min-width:auto}
  main{overflow:hidden}
  .app-design{display:none}
}