:root { --border: rgb(171,95,80); --bordermove: rgb(171,95,80,.4);
	--background:#d9cfb9;--darkbackground:#625E53;
	--A:#1b6d85; --B:#f1c443; --C:#7a791c; --D:#ce2a28;
	--objet:#47663A; --bloquee:#505050; --defaussee:#909090; --main:#bae5e6;
	--competence:#386181;--rangee:white; --bannie:black;
	--nb:#32302A;
	--mappemonde:#8a7e61; --global: #be4438;
	--rentrer:#ffaa00;
	--lang_en: none; --lang_fr: initial;
	--versA: none; --versB: none; --versC: none; --versD:none;
	--UI:transparent}

.hide {display:none!important}

en,.en {display:var(--lang_en);}
fr,.fr {display:var(--lang_fr);}

body, html, #nav {;margin: 0px;background-color:var(--background)}

/* canvas */
@font-face{
    font-family: "script";
    src: url("../data/Magnolia_Script.otf")
}

canvas { display: block; margin:0px}

#container {font-family:"script"; --ascendant:-1.1em} 
    /* the ascendant is the distance between baseline and the highest point in the font. It should be 1em,
     * but it is actually font-dependent */



/*	input type text for fields and numbers
 * 	select for dropdowns (menace, threat)
 * for checkboxes, the actual elements are hidden,
 * users click on a label with class:
*/


/* for undo/redo */
.attention {outline-color: red!important;}

/* this is the class of a composite Item */
.item {position:absolute;height:0;left:0;width:0}
.batback {position:absolute;width:48cqw;height:19cqw;left:-4cqw;top:-4cqw}

/**********************/
/* The navigation bar */
/**********************/


#nav {position:fixed;top:0;width:100%;color:white;z-index:2;transform-origin:top left}
#navbuttons {padding:4px; display:block flex;align-items:flex-start;flex-wrap:wrap;column-gap:4px;background-color:var(--darkbackground);}
#navbuttons div {display:block flex;align-items:flex-start;column-gap:4px}
#navbuttons  button  {padding:2px;font-size:100%;height:max(30px,2.3rem);min-width:max(30px,2.3rem);flex:none}
#navbuttons  button img {height:100%}

#attention, #Interessant,.rentre  {font-size:120%;overflow:hidden;height:0px;opacity:0;transition:opacity .7s;padding:0px}
#attention {background:rgb(255,60,60)}
#Interessant {background:rgb(60,220,60);color:black;box-sizing:border-box}
.rentre {background:var(--rentrer);color:black}

/********************/
/* style the inputs */
/********************/

/* hide the checkboxes */
input[type=checkbox] {display:none;}

/* This seems to hide the arrow on the select elements */
select {appearance: none;}

input,select,textarea, .bs,.b1,.b2,.b3,.cross,.cross2,.entoure
	 {position:absolute;
	  background-color:transparent;
	  /*color:rgb(37,50,132);*/
	  border:0;
	  outline: 2px solid transparent;
	  transition:outline-color .5s;}

input:enabled,select:enabled /*,textarea:enabled*/
    {outline: 2px solid var(--UI)}
input:enabled + .bs {outline:2px solid var(--UI);}
input:enabled + .b1 {outline:2px solid var(--UI);}
input:enabled + .b2 {outline:2px solid var(--UI);}
input:enabled + .b3 {outline:2px solid var(--UI);}
input:enabled + .cross {outline:2px solid var(--UI);}
input:enabled + .cross2 {outline:2px solid var(--UI);}
input:enabled + .entoure{outline:2px solid var(--UI);}

select:disabled, input:disabled {color:black}
    /* for buildings (select) and quests (input); no grey out*/
input[type=text],select,textarea,.vie {
	/*text-indent:.15em each-line;*/
	padding-left:.1em;
	padding-right:.1em;
	font-family:inherit;
	font-size:100%;resize:none}
input[type=text] {text-indent:.20em;} /* if the field starts with an f */
input[type=text]:not(.cardinput),select,.vie {
    /* the goal is to position the box on the line, and to align the baseline
       of the text on that position */
    margin-top:var(--ascendant);box-sizing: content-box;
}
/* I used to have there: line-height:1;height:1lh;
 * but then text with g in select get clipped??? */

.bs,.b1,.b2,.b3,.cross2,.entoure {background-clip:content-box;}
.bs {border-radius:40%;height:1.2cqw;width:2.4cqw;padding:0.3cqw;margin:-0.9cqw -1.5cqw;}
.b1 { border-radius:50%;width:1.6cqw;height:1.6cqw;padding:.4cqw; margin:-1.2cqw;}
.b2,.b3 { border-radius:50%;width:1.2cqw;height:1.2cqw;padding:.6cqw; margin:-1.2cqw;}
.entoure {height:2.8cqw;border-radius:1.4cqw;width:100%}
.b3 { background-color: black }

.cross {border-radius:1cqw;width:10cqw;height:13cqw}
.cross2 {border-radius:50%;width:4.8cqw;margin:-3.2cqw;padding:.8cqw;aspect-ratio:1;display:block;box-sizing:content-box}
input:enabled + .cross2 {background-color:rgb(128,255,0,.07)!important}

input[type=text]:focus:not(.cardinput),textarea:focus {background-color:rgba(255,255,0,.2);outline:2px solid var(--border)}
#Interessant > input[type=text]:focus {background-color:rgb(224,216,147)}
input[type=text]:enabled:hover:not(.cardinput),select:enabled:hover,textarea:hover, .rcB:hover, 
input:enabled + .bs:hover {outline:2px solid var(--border);}
input:enabled + .b1:hover {outline:2px solid var(--border);}
input:enabled + .b2:hover {outline:2px solid var(--border);}
input:enabled + .b3:hover {outline:2px solid var(--border);}
input:enabled + .cross2:hover {outline:2px solid var(--border);}
input:enabled + .entoure:hover{outline:2px solid var(--border);}

input:checked + .bs {background-color:rgba(0,0,0,1);}
input:checked + .b1 {background-color:rgba(0,0,0,.4);}
input:checked + .b2 {background-color:rgba(0,0,0,1);}
input:checked + .b3 {outline:3px solid black}
input:checked + .entoure {outline: 3px solid black;}
input:checked ~ .cross::after {content:"";position:absolute;
	background:black;border-radius:.5cqw;
	width:1cqw;margin-left:-.5cqw;left:50%;
	height:14cqw;margin-top:-7cqw;top:50%;transform:rotate(30deg)}
input:checked ~ .cross::before {content:"";position:absolute;
	background:black;border-radius:.5cqw;
	width:1cqw;margin-left:-.5cqw;left:50%;
	height:14cqw;margin-top:-7cqw;top:50%;transform:rotate(-30deg)}
input:checked + .cross2 {background-color:transparent}
input:checked + .cross2::after {content:"";position:absolute;
	background:black;border-radius:.2cqw;
	width:.4cqw;margin-left:-.2cqw;left:50%;
	height:calc(100% - 1.6cqw);margin-top:calc(-50% + .8cqw);top:50%;transform:rotate(45deg)}
input:checked + .cross2::before {content:"";position:absolute;
	background:black;border-radius:.2cqw;
	width:.4cqw;margin-left:-.2cqw;left:50%;
	height:calc(100% - 1.6cqw);margin-top:calc(-50% + .8cqw);top:50%;transform:rotate(-45deg)}

/* pseudo button for removing 1,2,3 points */
.hit {position:relative;display:inline flow-root;background-image:url("../data/damage.png");background-size:cover;background-repeat:no-repeat;text-shadow:white .1ex .1ex ,white -.1ex -.1ex,white -.1ex .1ex, white .1ex -.1ex, white 0 .1ex, white 0 -.1ex, white .1ex 0, white -.1ex 0;font-size:70%;font-family:initial;height:3.5ex;width:5ex;line-height:3.5ex;text-align:center;padding:.5ex 0;margin-left:-.5cqw;bottom:.2cqw;opacity:0;transition:opacity 1s}
.vie{ position:absolute;padding-left:0 }
.vie:hover .hit {opacity:1}


/* postit notes */
/* the actual textarea */
.postit {padding:.1em;width:calc(100% - .2em);height:calc(100% - .2em);
	position:relative; color:rgb(37,50,132);z-index:1;
	border-top:0px solid var(--bordermove)} 
/* the enclosing div */
.postitout {position:absolute;font-size:100%} 
/* The resizing and closing widgets*/
.postitresize {z-index:-1;position:absolute;right:-1.6cqw;bottom:-1.6cqw;width: 4cqw;height:4cqw;border-bottom:1.6cqw solid var(--bordermove);border-right:1.6cqw solid var(--bordermove);background-color:transparent;border-radius:.8cqw;opacity:0;transition:opacity .5s linear}
/* why is bottom:-14px is better than bottom:-12px ? */
.postitX {z-index:-1;position:absolute;right:0;top:-3cqw;width: 3cqw;height:3cqw;line-height:3cqw;color:white;background-color:red;border-radius:1.5cqw;text-align:center;font-family:initial;opacity:0;font-size:150%;transition:opacity .5s linear;transition-delay:.5s}
.postit:focus  {border-top: 3cqw solid var(--bordermove);margin-top:-3cqw;transition:border-top .5s,margin-top .5s; touch-action:none}
.postit:focus ~ .postitX {z-index:1;opacity:1}
.postit:focus ~ .postitresize {z-index:1;opacity:1}


/**********/
/* cartes */
/**********/
/*width must be 96.5 / n -0.5 
 * n=3 31.66
 * n=4 23.625
 * n=5 18.8 
 * n=6 16.33*/
.carte {font-family:initial;margin:.5cqw 0cqw 0cqw 0.5cqw;font-size:95%;display:inline flex ;width:31.66cqw;padding:.1cqw .2cqw .1cqw .1cqw;height:4cqw;line-height:1.15;border-radius:2cqw;box-sizing:border-box;align-items:center;position:relative; background-color :var(--darkbackground);color:white;transition:outline-color 1s;flex:none;outline: .2cqw solid white}
/* Note: for the box extensions (boutonscartes), I have to use box shadow rather than outline. It seems to give pb to chromium 
 * (outline and shadows of 1.5px don't look the same). I tried to use, instead of outline, 
 * box-shadow:1.5px -1.5px white, -1.5px -1.5px white, -1.5px 1.5px white, 1.5px 1.5px white; 
 * But it breaks highlight.
 * Ok, I don't know why, but using a width of 1.6px rather than 1.5px makes everything nice.*/

/* The X cards to choose from */
.cX {font-family:initial;margin:.3cqw 0cqw 0cqw 0.5cqw;font-size:90%;display:inline flex ;width:18.5cqw;padding-left:1.5cqw;outline:1.6px solid white;height:3.4cqw;line-height:.95;border-radius:1.3cqw;box-sizing:border-box;align-items:center;position:relative; background-color :#726E63;color:white}
.cX:hover {outline: 2px solid var(--border);filter:contrast(200%)}
.carteversM:hover {outline: 2px solid var(--border);filter:invert(15%)}
.cXt  {font-family:initial;font-size:90%;width:100%;padding-left:1cqw;}
/* the input fields */
.entrez {background:#936857;width:31.66cqw;margin-left:auto;margin-right:.5cqw;margin-bottom:.5cqw;display:inline flex}

/* the size of cards in different lists */
.listecompetence > .carte:not(.entrez) {width:18.8cqw}/* 96.5 / n -0.5 */
.listebannie > .carte:not(.entrez) {width:11.5625cqw}
.listemappemondevisible > .carte:not(.entrez) {width:23.625cqw}
.listemappemondecache > .carte:not(.entrez) {width:23.625cqw}
.listebourse > .carte:not(.entrez) {width:23.625cqw}

/* hide most info in the list of banished cards */
.listebannie > .carte::before{content:none!important}
.listebannie > .t5::before, .listebannie > .t15::before
	{background-image:url("../data/carte_competence.png")!important;content:""!important}
.listebannie > .t25::before, .listebannie > .t35::before, .listebannie > .t45::before, 
.listebannie > .t55::before, .listebannie > .t65::before {content:''!important}
.listebannie > .carte > .titrecarte {display:none}
.listebannie > .carte > .id {font-size:90%}

/* worldmap is special too */
.dos {display:none}
.listemappemondecache > .carte > .dos {display:inline}
.listemappemondecache > .carte > .titrecarte {display:none}
.listemappemondevisible > .t14::before {background-image:url("../data/carte_quete.png")!important}
.listebannie > .carte > .loc {display:none}
.listeobjetsquete > .t14::before {background-image:url("../data/carte_quete.png")!important}

/* buttons */

/* we can't use outline on only three border, and using borders bring
 * size issues, so we simulate an outline with a box-shadow. */
.boutonscarteshaut,.boutonscartesbas {z-index:-1;display:flex;
	justify-content:space-evenly;position:absolute;width:100%;
	background:var(--darkbackground);left:0;box-sizing:border-box;}
.boutonscarteshaut {padding: .3cqw .3cqw 0 .3cqw;bottom:3.8cqw;border-radius:1cqw 1cqw 0 0; box-shadow:.2cqw -.2cqw white, -.2cqw -.2cqw white}
.boutonscartesbas {padding: 0 .3cqw .3cqw .3cqw;top:3.8cqw;border-radius:0 0 1cqw 1cqw; box-shadow:.2cqw .2cqw white, -.2cqw .2cqw white}
.carte:hover .boutonscarteshaut {z-index:3;transition:z-index 0s 300ms}
.carte:hover .boutonscartesbas {z-index:3;transition:z-index 0s 300ms}

/* cards with buttons above and below*/
.t2:not(.entrez):hover, .t12:hover, .t22:hover, .t32:hover, .t5:not(.entrez):hover, .t15:hover, .t25:hover, .t35:hover, .t45:hover, .t55:hover, .t65:hover,
.listemappemondevisible >  .t14:hover {border-radius:0;transition:border-radius 0s 300ms}

/* cards with buttons above but not below */
.t52:hover, .t62:hover, .t72:hover, .t1:not(.entrez):hover, .t3:not(.entrez):hover,
.listeobjetsquete > .t14:hover, .listemappemondecache > .t14:hover, 
.t4:not(.entrez):hover {border-radius: 0 0 2cqw 2cqw;transition:border-radius 0s 300ms}

.t52:hover .boutonscartesbas, .t62:hover .boutonscartesbas, .t72:hover .boutonscartesbas,
.t1:not(.entrez):hover  .boutonscartesbas, .t3:not(.entrez):hover  .boutonscartesbas,
.listeobjetsquete > .t14:hover .boutonscartesbas,
.listemappemondecache > .t14:hover .boutonscartesbas,
.t4:not(.entrez):hover  .boutonscartesbas {display:none!important}

/* banished cards, whetever their type have buttons above only */
.listebannie > .carte:not(.entrez):hover {border-radius: 0 0 2cqw 2cqw!important;transition:border-radius 0s 300ms}
.listebannie > .carte:hover .boutonscartesbas {display:none!important}

/* the following for ER cards */
.zeroERLE .titrecarte, .zeroERLE .nb, .zeroERLE .id, .zeroERLE::before
	{opacity:.2}
.zeroERLE:not(:hover) {outline:.2cqw solid gray}
.zeroERLE {transition:outline-color 0s}

/* the buttons themselves are called "cartevers" + something, where something can be...
 * 	"" => return; "o" => items; "x" => banished, "b" => blocked card
 * 	"M" => flip world map
 * 	"A", "B", "C", "D" => the corresponding character
 */
.cartevers, .carteverso, .carteversx, .carteversb,
.carteversa, .carteversd, .carteversm,
.carteversA, .carteversB, .carteversC, .carteversD,
.carteversM
    {display:inline flow-root; font-size:90%;padding:.5cqw .2cqw;position:static; text-align:center;border-radius:.5cqw}
.carteverso	{background:var(--objet)}
.cartevers	{background:var(--rangee);color:black}
.carteversx	{background:var(--bannie)}
.carteversb	{background:var(--bloquee)}
.carteversa	{background:var(--competence)} 
.carteversd	{background:var(--defaussee);color:black}
.carteversm	{background:var(--main);color:black}
.carteversA	{background:var(--A);display:var(--versA)}
.carteversB	{background:var(--B);display:var(--versB);color:black}
.carteversC	{background:var(--C);display:var(--versC)}
.carteversD	{background:var(--D);display:var(--versD)}
.carteversM	{background:var(--mappemonde)}

.cartevers:hover, .carteverso:hover, .carteversx:hover, .carteversb:hover,
.carteversa:hover, .carteversd:hover, .carteversm:hover,
.carteversA:hover, .carteversB:hover, .carteversC:hover, .carteversD:hover,
.carteversM:hover {outline: 2px solid var(--border);filter:invert(15%)}

/* the small icon */
.t0::before, .t1::before,.t2::before, .t12::before, .t22::before, .t32::before,
.t52::before, .t62::before, .t72::before,
.t3::before, .t4::before, .t14::before,
.t5::before, .t15::before, .t25::before,
.t35::before, .t45::before, .t55::before,.t65::before
    {display:block;flex:none;background-size: contain;background-repeat:no-repeat;margin-left:.3cqw}

.t0::before{content:"";padding:1.2cqw 0.9cqw}

.t1::before{content:"";padding:1.2cqw 0.9cqw;margin-right:-.5cqw;background-image:url("../data/carte_quete.png")}

.t2::before{content:"";padding:1.0cqw 0.9cqw;margin-right:-.2cqw;background-image:url("../data/carte_bourse.png")}
.t12::before{content:"";padding:1.3cqw 1.0cqw;margin-bottom:-.3cqw;background-image:url("../data/carte_bourse_poids_1.png")}
.t22::before{content:"";padding:1.3cqw 1.0cqw;margin-bottom:-.3cqw;background-image:url("../data/carte_bourse_poids_2.png")}
.t32::before{content:"";padding:1.3cqw 1.0cqw;margin-bottom:-.3cqw;background-image:url("../data/carte_bourse_poids_3.png")}
.t52::before{content:"";padding:1.3cqw 1.0cqw;margin-left:.8cqw;margin-bottom:-.5cqw;margin-right:-.2cqw;background-image:url("../data/carte_boursecadenas.png")}
.t62::before{content:"";padding:1.3cqw 1.15cqw;margin-left:.6cqw;margin-bottom:-.5cqw;margin-right:-.2cqw;background-image:url("../data/carte_bourse_cadenas_poids_1.png")}
.t72::before{content:"";padding:1.3cqw 1.15cqw;margin-left:.6cqw;margin-bottom:-.5cqw;margin-right:-.2cqw;background-image:url("../data/carte_bourse_cadenas_poids_2.png")}
.t3::before{content:"";padding:1.2cqw 1.5cqw;margin-right:-.2cqw;background-image:url("../data/carte_evenement_global.png")}
.t4::before{content:"";padding:1.2cqw 0.9cqw;margin-right:-.2cqw;background-image:url("../data/carte_mappemonde.png")}
.t14::before{content:"";padding:1.2cqw 0.9cqw;margin-right:-.2cqw;background-image:url("../data/carte_mappemonde.png")}

.t5::before{content:"";padding:1.4cqw 1cqw;margin-top:.2cqw;margin-right:.5cqw;background-image:url("../data/carte_competenceavancee.png")}
.t25::before,.t35::before,.t45::before,.t55::before,.t65::before
{font-family:sans-serif;font-stretch:condensed;font-size:90%;font-weight:600;
 text-shadow:#404040 1px 1px ,#404040 -1px -1px,#404040 -1px 1px, #404040 1px -1px;
 box-sizing:content-box;
 bottom:-.1cqw;position:relative;width:2.1cqw;height:1.8ex;line-height:2ex;padding-top:1.5cqw;text-align:center;margin-right:.5cqw;background-image:url("../data/carte_competence.png")}
.t25::before{content:"X"} .t35::before{content:"A"} .t45::before{content:"B"}
.t55::before{content:"C"} .t65::before{content:"D"}
.t15::before{content:"";padding:1.4cqw 1cqw;margin-top:.2cqw;margin-right:.5cqw;background-image:url("../data/carte_competencereflexe.png")}
/* the number */
.nb { background-image:url("../data/cartouchevert.png");width:4.5cqw;height:1.7cqw;line-height:1.7cqw;box-sizing:content-box;text-align:center;background-size:contain;padding:.5cqw .1cqw 0.5cqw 0cqw;margin-left:.3cqw;margin-right:0.3cqw;background-repeat:no-repeat;color:white;flex:none}
/* .nb works inside a card; .nb2 outside  don(t know why.*/
.nb2 { background-image:url("../data/cartouchevert.png");text-align:center;background-size:contain;padding:0.2cqw 0.5cqw 0.4cqw 0.5cqw;background-repeat:no-repeat;color:white;font-size:95%}
.region { background-image:url("../data/region.png");width:4.2cqw;text-align:center;background-size:contain;padding:.8cqw .3cqw .8cqw .0cqw;margin-bottom:-.2cqw;margin-left:-.2cqw;margin-right:-.5cqw;background-repeat:no-repeat;background-position:center;color:white;text-shadow:black 1px 1px ,black -1px -1px,black -1px 1px, black 1px -1px;flex:none;font-size:90%}
/* the id */
.id {flex:none;position:absolute;display:block;right:1cqw;bottom:0cqw;font-size:67%;color:rgb(255,200,200)}
.cardinput {position:static;color:white;text-indent:0!important; height:1.7cqw;line-height:1.7cqw}
.cardinput::placeholder {color:#A0A0A0}

/********************/
/* listes de cartes */
/********************/
.cadreliste {margin:1cqw;padding:.5cqw;outline:.4ex solid;border-radius:2.7cqw;width:97cqw;margin-top:3cqw;background-clip:content-box;box-sizing:content-box;position:relative;outline-color:inherit;transition:outline-color 1s;display:flex;flex-wrap:wrap}
input::placeholder {color:rgba(30,30,30,1)}
.titre {position:absolute;padding:0 1ex;left:3cqw;top:-2.1cqw;background-color:var(--background)}
.listemappemondevisible, .listemappemondecache, .listeobjetsquete
    {display:contents}
.leaving  .notleaving {display:none!important}
.liste:not(.leaving) .leaving {display:none!important}

/************/
/* Selector */
/************/
.choicecards {left:2cqw;right:2cqw;top:100%;position:absolute;z-index:5;
	     background-color :#936857;color:white; outline: .2cqw solid white;margin:.15cqw 0cqw;
	    font-size:85%}
.choicequest {position:absolute;z-index:5;left:0cqw;right:0cqw;
	     background-color :var(--background); outline: 2px solid var(--border);margin:0cqw 0cqw;margin-top:.5em;
	    font-size:85%;padding-left:.117647em;padding-right:.117647em;box-sizing:content-box}
/* I don't get it; the selector div has the same size as the input if the input has box-sizing:border-box and
 * the selector has ox-sizing:content-box.
 * The input has a padding of .1em. For a font at 85%, a padding of .117647em should be identical */
/*.choicecards > div {text-overflow:ellipsis;white-space:nowrap;overflow:hidden}*/
.choices > div {text-indent: 20% hanging}
.choices > div > span {filter:blur(.25cqw);transition:filter .5s .2s,opacity .5s .2s}
.choices > div:hover > span {filter:blur(0px);opacity:.6}
.choices > div.selected > span {filter:blur(0px);opacity:.6}
.choicecards > div.selected {color: #936857; background-color:white}
.choicequest > div.selected {color: var(--background);; background-color:black}
.bookA::after {position:relative;bottom:.1cqw;font-family:sans;font-size:90%;padding:.0cqw 0.2cqw;color:white;background:#1079ad;content:"A"}


/********/
/* Menu */
/********/
.saverow{padding:.5cqw;border:2px solid;border-radius:1cqw;display:flex;align-items:center}
.saverow:nth-child(even) {border-color:rgb(0,128,0);background:rgba(128,255,128,.3)}
.saverow:nth-child(odd) {border-color:rgb(0,0,128);background:rgba(128,128,255,.3)}
.saverow button {font-size:100%}