@import url('https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@100..900&display=swap');
:root{
	--bleed:2mm;
	--primary:#f15c22;
    --border-color:#000;
    --name-color:#fff;
	--grey-light:#e0e3e2;
	--grey-mid:#c6c6c6;
	--grey-dark:#9d9d9d;
	--font-bold:"Smooch Sans", sans-serif;
}


* {  box-sizing: border-box; }

body {  font-family: "Smooch Sans", sans-serif;font-weight:500;padding-bottom:400px; }

.print-box {
width: 100%;
/*height: calc(80mm + calc(var(--bleed) * 2));*/
flex:0 0 auto;
padding:2mm;
position: relative;
}
.crop-marks, .border { position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:101 }
.crop-marks > div { position:absolute;width:var(--bleed);height:var(--bleed); }
.crop-marks .top-left { top:0;left:0;border-right:1px solid #000;border-bottom:1px solid #000; }
.crop-marks .top-right { top:0;right:0;border-left:1px solid #000;border-bottom:1px solid #000; }
.crop-marks .bottom-left { bottom:0;left:0;border-right:1px solid #000;border-top:1px solid #000; }
.crop-marks .bottom-right { bottom:0;right:0;border-left:1px solid #000;border-top:1px solid #000; }

.border { top:calc(var(--bleed) / 2);left:calc(var(--bleed) / 2);border:2mm solid var(--border-color);width:calc(100% - var(--bleed));height:calc(100% - var(--bleed)); }


.upload { display:flex;gap:2rem;position:fixed;bottom:0;left:0;width:100%;z-index:100;background:var(--primary);padding:10px;z-index:9999; }
.upload-form {  }

a.button { border:1px solid #000;padding:5px 10px;background:#000;color:#fff;text-decoration:none; }
a.button:hover { color:#000;background:#fff;border-color:#fff; }


.print-box { overflow:hidden;background:url("background.jpg") no-repeat bottom right;background-size:cover; }
.print-box { position:relative;left:0.5mm; }
.print-box .card {  align-content:flex-start;display:flex;flex-wrap:wrap;background:rgba(255,255,255,0.4);height:100%;box-sizing: border-box;position:relative; }
.print-box.card-back .card { padding:5mm; }
.print-box.card-back .ability { font-size:6pt; }

.card-name { font-size:16pt;position:relative;z-index:999;text-transform:uppercase;letter-spacing:0.03rem;font-family:var(--font-bold);background:var(--border-color);color:var(--name-color);display:block;width:100%;padding:2mm; }
.card-name .editable { position:relative; }
.card-name .editable::after { position:absolute;left:-10mm;width:calc(100% + 10mm);height:0.1mm;background:var(--primary);content:"";display:block; }
.card-top { align-self:start;display:flex;width:100%; }
.image { position:relative;flex:0 0 30mm;width:30mm;height:30mm;background: linear-gradient(180deg, rgba(176,212,222,1) 0%, rgba(255,255,255,1) 100%); }
.image-container { overflow:hidden; }
.stats { display:flex;flex-wrap:wrap;width:100%;background:#000; }
.stat { border-right:1px solid #fff;text-align:center;color:#fff;align-self:anchor-center;flex:0 0 25%;text-align:center;display:flex;flex-wrap:wrap;justify-content: center; }
.stat:last-child { border:none; }
.stat-header { text-transform:uppercase;text-align:center;padding-top:1px;align-self:flex-start;width:100%;display:block;flex:1 1 100%; }
.stat-value { text-align:center;letter-spacing:0.05rem;font-weight:bold;font-size:16pt; }
.abilities { padding:2mm;align-self:start; }
.keywords { font-weight:bold;padding:1mm 0mm;font-size:5pt;font-family:sans-serif;letter-spacing:normal; }
.abilities { display:grid;gap:5mm;grid-template-columns:1fr 1fr; }
.ability { margin-bottom:2mm; }
.ability b { display:inline-block;font-size:8pt; }
.card-back .ability b { font-size:6pt; }
.weapons { align-self:start;width:100%; }

.weapon-header th { border-bottom:2px solid var(--primary); }


.icon-green { color:green; }
.icon-red { color:red; }

.stat-value { display:flex;align-content:center;gap:1mm;margin-top:2mm; }
.stat-value svg { width:6mm;height:6mm; }
.stat-value svg :is(polygon, path, rect) { fill:var(--primary); }

.ap-ability { text-transform:uppercase;justify-content:space-between;padding:1mm 2mm;margin-bottom:1mm;display:inline-flex;width:100%;background:var(--primary);color:#fff; }
 
.wounds { display:flex;margin-top:2mm;gap:0mm;justify-content:start;flex-wrap:wrap;background:var(--border-color);width:100%; }
.woundbox { border-right:2px solid #000;align-content:center;flex:1 1 5.5mm;height:5.5mm;background:#fff;position:relative;text-align:center; }
.woundbox.injury::after { opacity:0.3;width:4mm;height:4mm;display:inline-block;content:"";background:url("icons/icon-wound.svg") no-repeat;background-size:contain; }

        .image-uploaded {
            width: 100%;
            height: auto;
/*            overflow: hidden;*/
            position: absolute;
            top: 0;
            left: 0;
        }
        .image-uploaded img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: move;
        }




/*.flex { display:flex;gap:1rem;flex-wrap:wrap;justify-content:center; }
.flex.reverse { flex-direction:row-reverse; }*/



.flex { display:grid; grid-template-columns: 1fr 1fr;grid-auto-rows: 1fr; }


p { margin:0;font-size:8pt; }
table { font-size:8pt;text-align:left;width:100%;border-bottom:1px solid var(--primary);font-weight:500; }
tr { background:#fff; }
tr:nth-child(odd) { background:var(--grey-light); }
th { text-transform:uppercase; }
th,td { padding:1mm; }
tr th { padding-top:1mm; }
tr :is(td,th):first-child { padding-left:2mm; }
tr :is(td,th):last-child { padding-right:2mm; }
td svg { width:28px; }
td svg :is(polygon, path, rect) { fill:var(--primary); }
table td:first-child { width:40px; }