@charset "utf-8";
@font-face {
	font-family: 'PixelMplus12';
	src: url('../fonts/PixelMplus12-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'PixelMplus12B';
	src: url('../fonts/PixelMplus12-Bold.ttf') format('truetype');
}

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body{
	margin: 0;
	padding: 0;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	color: #60502a;
	font-size: 75%;
	background: url('../img/bg.jpg') repeat-y ;
	background-size: 100%;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
    overflow-y: scroll;
}

main{
	display: block;
	max-width: 640px;
	margin: 0 auto;
}

blockquote, q {
	quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
	content: '';
	content: none;
}

input, textarea,{
	margin: 0;
	padding: 0;
	border: 1px solid #aaa;
}

ol, ul{
    list-style:none;
}

table{
    border-collapse: collapse; 
    border-spacing:0;
}

caption, th{
    text-align: left;
}

a:focus {
	outline:none;
}

.clearfix::after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}

.both{
	clear:both;
}

.inline_block {  
	display: inline-block;  
	*display: inline;  
	*zoom: 1;  
}

img {
	max-width:100%;
}

table {
	width:100%;
}


.float-left{ float: left; }
.float-right{ float: right; }

hr{
	border:none;
	background: url('../img/line.png') no-repeat center center;
	background-size: 100%;
	width: 215px;
	height: 8px;
	margin: 10px auto;
}


/* ----------------------------------- */

/* HEADER 
-----------------------------*/
header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	z-index: 1000;
	border-bottom: 2px solid #000;
	background: url('../img/bg-head.jpg') no-repeat 0 0;
	background-size: 100%;
}

header h1{
	float: left;
	line-height: 50px;
	font-size: 18px;
	font-weight: bold;
	padding: 0 10px;
	font-family: 'PT Serif', serif;
}

header h1 a{
	color: #000;
	text-decoration: none;
}

header nav{
	float: right;
	padding-right: 10px;
}

header nav li{
	position: relative;
	display: inline-block;
	font-size: 0.5rem;
	text-align: center;
	width: 30px;
	padding: 10px 0;
	margin: 0 5px;
}

header nav li a{
	display: block;
	color: #000;
	text-align: center;
}

header nav li .fa{
	color: #000;
	font-size: 26px;
}

header nav li span{
	position: absolute;
	bottom: -4px;
	left: 0;
	font-weight: bold;
	display: block;
	text-align: center;
	width: 100%;
}

/* FOOTER 
-----------------------------*/
footer{
	text-align: center;
	font-size: 0.8rem;
	padding: 20px 0;
}



/* MAIN
-----------------------------*/
main{
	margin-top: 50px;
	padding: 5px;
}

#roll{
	padding-bottom: 110px;
}

/* HEADING
-----------------------------*/
h2{
	text-align: center;
}


h3{
	position: relative;
	text-align: center;
	font-weight: bold;
	margin: 10px 0 5px; 
	border-bottom: 2px solid #000;
}

h3 span{
	font-weight: bold;
}

h4 span{
	font-weight: bold;
}

h4.left{
	float: left;
}


/* COMMON
-----------------------------*/
.in{
	padding: 10px;
}

.table{
	display: table;
	width: 100%;
}

.tr{
	display: table-row;
}

.td{
	position: relative;
	display: table-cell;
	vertical-align: middle;
}

h4.td{
	white-space: nowrap;
	padding-right: 5px;
	font-size: 1.1rem;    /* ajustez la valeur à votre goût */
    font-weight: bold;    /* pour le gras */
}

.col2 .td:nth-child(2n+1){
	padding-right: 5px;
}
.col2 .td:nth-child(2n){
	padding-left: 5px;
}

.col3 .td{
	padding-bottom: 5px;
	padding-right: 5px;
}
.col3 .td:nth-child(3n+2){
	padding-left: 5px;
}
.col3 .td:nth-child(3n){
	padding-right: 0;
	padding-left: 5px;
}
.col3 .td.th-min{
	font-size: 10px;
	font-weight: bold;
}
.col3 .td.td-min{
	width: 10%;
}

.col4 .td{
	padding-bottom: 5px;
	padding-left: 5px;
	width: 25%;
}
.col4 .td:nth-child(4n){
	padding-right: 0;
	padding-left: 5px;
}

.nbsp{
	width: 50%;
}

.ir{
	margin-right: -2ex;
	padding-right: 2ex;
	vertical-align: middle;
}

.cap{
	position: absolute;
	right: 100px;
	bottom: 15px;
	font-size: 10px;
}


.tc{
	text-align: center;
}

.mb5{
	margin-bottom:5px;
}
.mb10{
	margin-bottom:10px;
}


ul.list{
	margin-top: 10px;
}

ul.list li{
	font-weight: bold;
	border-bottom: 1px solid #000;
	padding: 10px 0;
}

ul.list li span{
	display: inline-block;
	font-weight: bold;
	color: #aa00aa;
	width: 4ex;
	float: left;
	margin-right: 1ex;
}

ul.list li p,
ul.list li a{
	position: relative;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	padding-right: 20px;
	display: block;
	float: right;
	margin-left: -5ex;
	padding-left: 5ex;
	width: 100%;
}

ul.list li a:after{
	content: "";
	display: block;
	position: absolute;
	right: 3px;
	top: 50%;
	margin-top: -2px;
	width: 4px;
	height: 4px;
	border-top: 2px solid #380705;
	border-right: 2px solid #380705;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.number{
	font-weight: bold;
	color: #3d5c83;
	padding-left: 1ex;
}

.flex{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
	justify-content: center;/* 3 */
    align-items: center;
}

.flex li{
	padding: 0 5px 5px;
}

.flex li.del{
	padding-left: 5px;
}

.flex li.add-del{
	width: 60px !important;
}

.flex li.add-del i{
	padding: 12px 0 11px;
	font-size: 20px;
}

#mr-lists ul li span{
	display: none;
}
#mr-lists ul:first-child li span{
	display: inline;
}

#mr-lists ul:first-child li.add-del .minus{
	display: none;
}



/* FORM
-----------------------------*/
input[type=text],
input[type=number],
input[type=tel]{
	font-size: 20px;
	padding: 2px 5px;
	width: 100%;
	border: none;
	text-align: center;
	border-bottom: 2px solid #60502a;
	outline: none;
	background-color: transparent;
	color: #60502a;
}

input[type=text]{
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

input[type=number],
input[type=tel]{
	font-family: 'PT Serif', serif;
}

input[type=text]:disabled,
input[type=number]:disabled,
input[type=tel]:disabled{
	opacity: 0.5;
}


select{
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;

	font-size: 20px;
	padding: 2px 5px;
	border: none;
	border-bottom: 2px solid #60502a;
	background-color: transparent;
	color: #60502a;
	outline: none;
}

label{
	display: block;
}

.w100{
	width: 100%;
}

.short{
	width: 55px !important;
}
span.short{
	display: inline-block;
}

input[type=checkbox] {
	display: none;
}

.checkbox {
	position: relative;
	display: inline-block;
	margin: 0 20px 0 0;
	padding: 12px 12px 12px 25px;
	vertical-align: middle;
	cursor: pointer;
}
.checkbox:hover {
}
.checkbox:hover:after {
}
.checkbox:after {
	position: absolute;
	top: 50%;
	left: 0px;
	display: block;
	margin-top: -10px;
	width: 16px;
	height: 16px;
	border: 2px solid #60502a;
	content: '';
}

.checkbox:before {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 6px;
	display: block;
	margin-top: -7px;
	width: 5px;
	height: 9px;
	border-right: 3px solid #60502a;
	border-bottom: 3px solid #60502a;
	content: '';
	opacity: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox:before {
	opacity: 1;
}
label.checkbox{
	font-weight: bold;
}
input[type=checkbox]:disabled + label{
	cursor: default;
}
input[type=checkbox]:disabled + label::after{
	background-color: #EBEBE4;
}

.radio input {
	display: none;
}
.radio label{
	display: block;
	float: left;
	cursor: pointer;
	width: 100px;
	margin: 0;
	padding: 10px;
	background: #bdc3c7;
	color: #869198;
	font-size: 16px;
	text-align: center;
	line-height: 1;
	transition: .2s;
}
.radio label:first-of-type{
	border-radius: 3px 0 0 3px;
}
.radio label:last-of-type{
	border-radius: 0 3px 3px 0;
}
.radio input[type="radio"]:checked + .switch-on {
	background-color: #a1b91d;
	color: #fff;
}
.radio input[type="radio"]:checked + .switch-off {
	background-color: #e67168;
	color: #fff;
}


/* BUTTON
-----------------------------*/
.roll{
	display: block;
	background: url('../img/btn.png') no-repeat ;
	background-size: 100%;
	width: 150px;
	height: 56px;
	white-space: nowrap;
	overflow: hidden;
	text-indent: 100%;
	margin: 10px auto 0;
	cursor: pointer;
}
.roll.disabled{
	background: url('../img/btn_on.png') no-repeat ;
	background-size: 100%;
}


/* CARD
-----------------------------*/
.card{
	position: relative;
}


/* DICE
-----------------------------*/
.dices li{
	display: inline-block;
	float: left;
	width: 35px;
	max-width: 35px;
	margin: 0 5px 5px 0;
}

.d1::before{ background:url('../img/dice1.png'); }
.d2::before{ background:url('../img/dice2.png'); }
.d3::before{ background:url('../img/dice3.png'); }
.d4::before{ background:url('../img/dice4.png'); }
.d5::before{ background:url('../img/dice5.png'); }
.d6::before{ background:url('../img/dice6.png'); }

.d1::before,
.d2::before,
.d3::before,
.d4::before,
.d5::before,
.d6::before{
	content: "";
	position: absolute;
	display: block;
	width: 35px;
	height: 35px;
	background-size:contain;
	top: -35px;
	left: 0;
	animation: base 1 steps(1,end) 0.3s;
	animation-fill-mode:forwards;
}
@keyframes base {
	90% { top: 0; }
	100% { top: 0; }
}

/* Dice Animation */
.d0 {
	position: relative;
	display: inline-block;
	width: 35px;
	height: 35px;
	overflow: hidden;
	position: relative;
	vertical-align: top;
}
.d0 img {
	max-width:none;
	height: 35px;
}
.shuffule img{ animation: shuffule infinite steps(1,start) 0.3s; animation-fill-mode:forwards; }
@keyframes shuffule {
	  0% { transform:translate3d( -70px,0,0); }
	 10% { transform:translate3d(-140px,0,0); }
	 20% { transform:translate3d(   0px,0,0); }
	 30% { transform:translate3d(-105px,0,0); }
	 40% { transform:translate3d( -35px,0,0); }
	 50% { transform:translate3d(-140px,0,0); }
	 60% { transform:translate3d(-175px,0,0); }
	 70% { transform:translate3d(-105px,0,0); }
	 80% { transform:translate3d(-140px,0,0); }
	 90% { transform:translate3d( -35px,0,0); }
	100% { transform:translate3d(-175px,0,0); }
}

.dani1 img{ animation: type1 1 steps(1,start) 0.3s; animation-fill-mode:forwards; }
.dani2 img{ animation: type2 1 steps(1,start) 0.3s; animation-fill-mode:forwards; }
.dani3 img{ animation: type3 1 steps(1,start) 0.3s; animation-fill-mode:forwards; }
.dani4 img{ animation: type4 1 steps(1,start) 0.3s; animation-fill-mode:forwards; }
.dani5 img{ animation: type5 1 steps(1,start) 0.3s; animation-fill-mode:forwards; }
.dani6 img{ animation: type6 1 steps(1,start) 0.3s; animation-fill-mode:forwards; }
@keyframes type1 {
	  0% { transform:translate3d( -70px,0,0); }
	 10% { transform:translate3d(-140px,0,0); }
	 20% { transform:translate3d(   0px,0,0); }
	 30% { transform:translate3d(-105px,0,0); }
	 40% { transform:translate3d( -35px,0,0); }
	 50% { transform:translate3d(-140px,0,0); }
	 60% { transform:translate3d(-175px,0,0); }
	 70% { transform:translate3d(-105px,0,0); }
	 80% { transform:translate3d(-140px,0,0); }
	 90% { transform:translate3d( -35px,0,0); }
	100% { transform:translate3d(  35px,0,0); }
}
@keyframes type2 {
	  0% { transform:translate3d(-140px,0,0); }
	 10% { transform:translate3d( -70px,0,0); }
	 20% { transform:translate3d( -35px,0,0); }
	 30% { transform:translate3d( -70px,0,0); }
	 40% { transform:translate3d(-175px,0,0); }
	 50% { transform:translate3d( -35px,0,0); }
	 60% { transform:translate3d(-105px,0,0); }
	 70% { transform:translate3d( -35px,0,0); }
	 80% { transform:translate3d(   0px,0,0); }
	 90% { transform:translate3d(-175px,0,0); }
	100% { transform:translate3d(  35px,0,0); }
}
@keyframes type3 {
	  0% { transform:translate3d(-140px,0,0); }
	 10% { transform:translate3d( -70px,0,0); }
	 20% { transform:translate3d(-105px,0,0); }
	 30% { transform:translate3d(-140px,0,0); }
	 40% { transform:translate3d( -35px,0,0); }
	 50% { transform:translate3d(-105px,0,0); }
	 60% { transform:translate3d(   0px,0,0); }
	 70% { transform:translate3d( -70px,0,0); }
	 80% { transform:translate3d(-105px,0,0); }
	 90% { transform:translate3d(-175px,0,0); }
	100% { transform:translate3d(  35px,0,0); }
}
@keyframes type4 {
	  0% { transform:translate3d(-140px,0,0); }
	 10% { transform:translate3d( -35px,0,0); }
	 20% { transform:translate3d(-140px,0,0); }
	 30% { transform:translate3d( -70px,0,0); }
	 40% { transform:translate3d(   0px,0,0); }
	 50% { transform:translate3d(-105px,0,0); }
	 60% { transform:translate3d(-175px,0,0); }
	 70% { transform:translate3d(   0px,0,0); }
	 80% { transform:translate3d(-140px,0,0); }
	 90% { transform:translate3d( -35px,0,0); }
	100% { transform:translate3d(  35px,0,0); }
}
@keyframes type5 {
	  0% { transform:translate3d( -70px,0,0); }
	 10% { transform:translate3d(-105px,0,0); }
	 20% { transform:translate3d( -35px,0,0); }
	 30% { transform:translate3d(-140px,0,0); }
	 40% { transform:translate3d(-105px,0,0); }
	 50% { transform:translate3d(-175px,0,0); }
	 60% { transform:translate3d(   0px,0,0); }
	 70% { transform:translate3d(-105px,0,0); }
	 80% { transform:translate3d( -35px,0,0); }
	 90% { transform:translate3d(-140px,0,0); }
	100% { transform:translate3d(  35px,0,0); }
}
@keyframes type6 {
	  0% { transform:translate3d(-140px,0,0); }
	 10% { transform:translate3d( -35px,0,0); }
	 20% { transform:translate3d(-140px,0,0); }
	 30% { transform:translate3d(-105px,0,0); }
	 40% { transform:translate3d(   0px,0,0); }
	 50% { transform:translate3d(-140px,0,0); }
	 60% { transform:translate3d(-175px,0,0); }
	 70% { transform:translate3d(-105px,0,0); }
	 80% { transform:translate3d( -35px,0,0); }
	 90% { transform:translate3d(-140px,0,0); }
	100% { transform:translate3d(  35px,0,0); }
}

.result{
	padding: 10px;
}

.result .result-row{
	margin-bottom:5px;
}

.result .result-row:last-child{
	border-bottom: none;
}



.soundEffect{
	display: none;
}


/* COMBAT RESULT */
#comres .in{
	background-color: rgba(255,255,255,0.5);
	border: 3px solid #bf720d;
	text-align: center;
}

#comres .in h4{
	display: inline;
}

#comres .winer{
	font-family: 'PT Serif', serif;
	font-size: 20px;
}

/* PARAM
-----------------------------*/
#param{
	position: fixed;
	bottom: -247px;
	left: 0;
	width: 100%;
	background: url('../img/bg-bottom.jpg?1') repeat-y center bottom;
	background-size: 100%;
	text-align: center;
	transition: .2s;
}

#param.open{
	bottom: 0;
}

#param ul{
	position: relative;
	display: inline-block;
	bottom: 0;
	padding: 0 5px;
}
#param li{
	width: 67px;
	text-align: center;
	float: left;
	margin: 0 5px;
}

#param li span{
	display: block;
	background: url('../img/bord.png') no-repeat 0 0;
	width: 67px;
	height: 47px;
	background-size: 100%;
}

#param li input[type=number],
#param li input[type=tel]{
	border: none;
	color: #bf993d;
	font-size: 28px;
	line-height: 35px;
	font-family: 'PT Serif', serif;
	padding: 6px;
}

#param .openchar{
	background-color: #000;
	color: #fff;
	padding: 5px ;
}

#param h4 {
    margin-top: 10px;
    margin-bottom: 3px;
    text-align: left;
}

#param .brb{
	border-bottom: 2px solid #60502a;
}

#param .col4 .td{
	padding-top: 20px;
}

#param .col4 .td i{
	bottom: 20px;
}


/* LANGUAGE
-----------------------------*/
#lang-btn{
	width: 220px;
	margin: 10px auto 0;
}

#lng1 .en{
	display: none;
}

#lng2 .jp{
/*	display: none; */
}

.jp,.en{
	font-weight: bold;
}


/* COLOR
-----------------------------*/
#color-wrap label{
	display: block;
	width: 16.6666%;
	height: 50px;
	float: left;
}

#color-btn{
	margin: 10px auto 0;
}

#color-wrap input{
	display: none;
}

#color-wrap input[type=radio]:checked + label{
	border: 5px solid rgba(255,255,255, 0.6);
}

.t1{ color:#3d5c83; }
.t2{ color:#603667; }
.t3{ color:#653835; }
.t4{ color:#356e37; }
.t5{ color:#735d3c; }
.t6{ color:#515151; }





/* Character Window
-----------------------------*/
#sheet-select select{
	width: 100%;
}

#sheet-select .btn{
	margin: 10px 0 20px;
}


#character ul li{
	float: left;
	font-weight: bold;
	margin-bottom: 4px;
	padding-left: 1ex;
}

#character ul li span{
	font-weight: bold;
}


#character ul.info li{
	width: 50%;
	text-align: left;
}
#character ul.info li:nth-child(2n){
	text-align: left;
}

#character ul.param li{
	width: 33.333%;
	text-align: left;
}
#character ul.combat li{
	width: 50%;
	text-align: left;
}

#character .mark{
	padding: 10px 0;
}

#character .param-in{
	margin: 5px 0;
}



/* INDEX
-----------------------------*/
#book .in{
	padding: 10px;
}

#book .story{
	text-align: left;
}

#book .story p{
	font-size: 14px;
	line-height: 150%;
}

#book .story ul{
	margin-top: 1em;
}

#book .story li{
	font-weight: bold;
}

#book .story li span{
	font-weight: bold;
	color: #fc02fc;
	text-decoration: none;
}

#book .story .btn{
	text-decoration: none;
	text-align: left;
	font-size: 14px;
	margin: 5px 0;
}

#book .story .btn::before{
	bottom: -2px;
	right: -4px;
	width: 4px;
}

#book .story .btn::after{
	bottom: -5px;
	left: 4px;
	height: 4px;
}


/* Character Sheet
-----------------------------*/
#charasheet .in{
	padding: 0 10px 10px;
}

#charasheet h3{
    border-bottom: 2px solid #000;
}

#charasheet h4{
	margin-top: 10px;
	margin-bottom: 3px;
	text-align: left;
}

h4.inline{
	display: inline;
}


#charasheet .char-img{
	margin: 10px 0;
	text-align: center;
}

#charasheet .char-img img{
	width: 200px;
	border: 2px solid #000;
}



#charasheet .w-row{
	text-align: left;
	font-weight: bold;
}

#charasheet .w-name{
	width: 55%;
	padding-right: 5px;
}
#charasheet .w-dice{
	width: 45%;
	text-align: right;
}
#charasheet input[type=text].mini, 
#charasheet input[type=number].mini,
#charasheet input[type=tel].mini{
	width: 40%;
}

#charasheet .in .checkbox{
	padding: 0 0 0 23px;
	margin: 0;
}

#charasheet .in .checkbox::before{
	left: 9px;
	margin-top: -10px;
	content: '*';
	color: #aa00aa;
	border: none;
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	font-size: 30px;
	line-height: 100%;
	background-color: transparent;
}

#charasheet .in .checkbox::after{
	left: 5px;
	margin-top: -12px;
}


#overwrap{
	display: none;
	position: fixed;
	background-color: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	z-index: 1000;
	top: 0;
	left: 0;
}

.mfp-hide{
	display: none;
}

.mfp-box{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1043;
	position: fixed;
	outline: 0!important;
	-webkit-backface-visibility: hidden;
	overflow: auto;
}

.mfp-box .inner{
	text-align: center;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	padding: 0 8px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


.mfp-box .inner:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.mfp-box .content{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin: 0 auto;
	text-align: left;
	z-index: 1045;
	border: 2px solid #60502a;
	width: 600px;
		max-width: 80vw
	background-color: #fff;
	padding: 20px;
	background: url('../img/bg.jpg') repeat-y center center;
}

.mfp-box .content {
  max-height: 90vh;      /* ne pas dépasser 90% de la hauteur de la fenêtre */
  overflow-y: auto;      /* scroll vertical à l’intérieur de .content */
}

/*
.mfp-box .close{
	position: absolute;
	right: 30px;
	top: 12px;
	background-color: #fff;
	border-radius: 50%;
	width: 47px;
	height: 47px;
	white-space: nowrap;
	overflow: hidden;
	text-indent: 100%;
	cursor: pointer;
}

.mfp-box .close::before{
	display: block;
	content: "";
	position: absolute;
	right: 23px;
	width: 2px;
	top: 50%;
	margin-top: -10px;
	height: 20px;
	background: #60502a;
	transform: rotate(45deg);
}

.mfp-box .close::after{
	display: block;
	content: "";
	position: absolute;
	right: 13px;
	top: 50%;
	margin-top: -1px;
	width: 20px;
	height: 2px;
	background: #60502a;
	transform: rotate(45deg);
}

.mfp-box .close:hover{
	background-color: #018f91;
	border: 1px solid #fff;
}

.mfp-box .close:hover::after,
.mfp-box .close:hover::before{
	background-color: #fff;
}
*/

#calcform i{
	font-size: 25px;
	padding: 10px 15px;
	cursor: pointer;
}

#calcform input[name=val2]{
	margin: 10px 0 0;
}

.edit{
	display: inline-block;
	color: #fff;
	background-color: #380705;
	height: 30px;
	border: 2px solid #000;
	line-height: 28px;
	text-align: center;
	margin: 10px auto;
	text-decoration: none;
	border-radius: 3px;
	padding: 0 30px;
	cursor: pointer;
}

.edit.disabled{
	background-color: #472321;
	color: #666;
}


.calc{
	display: block;
	color: #fff;
	background-color: #380705;
	width: 90px;
	height: 30px;
	border: 2px solid #000;
	line-height: 26px;
	text-align: center;
	margin: 10px auto;
	text-decoration: none;
	border-radius: 3px;
}

#edit .td{
	text-align: right;
}


/* Equipment
-----------------------------*/
#type-sel input {
	display: none;
}

#type-sel label{
	display: block;
	float: left;
	cursor: pointer;
	width: 100px;
	margin: 0;
	padding: 10px;
	background: #bdc3c7;
	color: #869198;
	font-size: 16px;
	text-align: center;
	line-height: 1;
	transition: .2s;
}

#type-sel label:first-of-type{
	border-radius: 3px 0 0 3px;
}

#type-sel label:last-of-type{
	border-radius: 0 3px 3px 0;
}

#type-sel input[type="radio"]:checked + .switch-on {
	background-color: #19448b;
	color: #fff;
}

#type-sel input[type="radio"]:checked + .switch-off {
	background-color: #8b1919;
	color: #fff;
}

#type-sel #type-btn{
	width: 220px;
	margin: 10px auto 0;
}


/* Spell
-----------------------------*/
#spell .intdex{
	text-align: center;
}

#spell label{
	padding: 5px 12px 5px 42px;
}


/* Copyright
-----------------------------*/
#copyright{
	text-align: center;
}

#copyright p{
	margin-top: 10px;
}

#copyright a{
	display: inline-block;
}

#copyright i{
	font-size: 30px;
	color: #1DA1F2;
}


main {
  display: flex;
  height: calc(100vh - 170px); /* Ajuste cette valeur en fonction de la hauteur réelle du header et d'autres éléments fixes */
}

.left, .right {
  flex: 1;
  overflow-y: auto;
  padding: 5px; /* Optionnel, pour avoir un peu d'espace intérieur */
}

/* -------------------------
   AJOUTS CUSTOM POUR LA FICHE DE PERSONNAGE
------------------------- */
.character-sheet {
  position: relative;
}

.right {
  position: relative; /* Permet à .character-img de se positionner par rapport à .right */
}

.character-img {
  position: absolute;
  top: 10px;      /* Ajustez la marge par rapport au haut */
  right: 10px;    /* Ajustez la marge par rapport à la droite */
  width: 100px;   /* Largeur du cadre */
  height: 100px;  /* Hauteur du cadre */
  border: 2px solid #000; /* Bordure du cadre */
  overflow: hidden;
  background: #fff;
  z-index: 10; /* Pour qu'elle soit au-dessus des autres éléments */
}

.character-img img {
  width: 100%;
  height: auto;
  display: block;
}

.image-controls {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 999;
}

.character-img:hover .image-controls {
  opacity: 1;
}

.image-controls button {
  background: rgba(0,0,0,0.7);
  border: none;
  border-radius: 50%;
  width: 25px; /* MODIFIÉ : Plus petit que version 3 (30px -> 25px) */
  height: 25px; /* MODIFIÉ : Plus petit que version 3 (30px -> 25px) */
  cursor: pointer;
  font-size: 12px; /* MODIFIÉ : Plus petit que version 3 (14px -> 12px) */
  color: white;
  transition: background 0.2s;
}

.image-controls button:hover {
  background: rgba(0,0,0,0.9); /* MODIFIÉ : Plus visible que version 3 (0.6 -> 0.9) */
}

#character-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Assure que l'image remplit bien le cadre */
}

/* Ligne soulignée + alignement centré pour Traits particuliers */
#traits-particuliers {
  display: block;                 /* pour occuper toute la largeur du <td> */
  width: 100%;                    
  min-height: 1.2em;              /* réserve de la hauteur pour le texte */
  padding: 2px 5px;               /* même padding que vos inputs */
  box-sizing: border-box;             
  border-bottom: 2px solid #60502a;  /* même bordure que vos inputs */
  margin: 5px 0 10px;             /* espace au‑dessus et au‑dessous comme pour les inputs */
}

/* STORE MODAL
-----------------------------*/
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,0.6);
  overflow: hidden;
}

.modal-content {
  position: relative;
  background-color: #fff;
  margin: 5vh auto;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  height: 85vh;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

#store-title {
  color: #60502a;
  font-weight: bold;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #60502a;
  flex-shrink: 0;
}

#store-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100% - 60px);
  overflow: hidden;
}

#store-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 70px;
  background-color: #fff;
}

#store-list label {
  display: block;
  padding: 10px;
  margin: 5px 0;
  border-bottom: 2px solid #60502a;
  cursor: pointer;
  color: #60502a;
  background-color: #fff;
  font-weight: normal;
  transition: background-color 0.2s;
}

#store-list label:hover {
  background-color: #f5f5f5;
}

#store-list label strong {
    font-weight: bold;    /* Nom en gras */
}

#store-list input[type="radio"] {
  margin-right: 10px;
}

/* Les parenthèses et leur contenu seront en normal */
#store-list label span:has(+ input[type="radio"]),
#store-list label input[type="radio"] + span {
  font-weight: normal;
}

#buy-selected {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  background: #bf993d;
  color: #000;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  z-index: 2;
}

#buy-selected:hover {
  filter: brightness(1.1);
}

.modal-active {
  display: flex !important;
  justify-content: center;
  align-items: flex-start;
}

#store-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
  color: #60502a;
}

.store-modal label span:first-of-type {
  font-weight: bold;
}
.store-modal label span:not(:first-of-type),
.store-modal label small {
  font-weight: normal;
}

/* --- Fin des styles pour la fenêtre modale du magasin --- */

#overwrap {
  background-color: transparent !important;
  display: none; /* Affiché dynamiquement par JS avec fadeIn */
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}

#attr-up-modal label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 8px;
}
#attr-up-modal input[type="radio"] {
  margin-right: 7px;
}
#attr-up-content .attr-cost {
  color: #555;
  font-size: 0.97em;
  margin-left: 7px;
}
#attr-up-content .attr-arrow {
  font-weight: bold;
  margin: 0 4px;
  color: #3a7;
}
#attr-up-modal h2 {
  margin-top: 0;
  font-size: 1.3em;
  color: #234;
}
#attr-up-content {
  margin: 18px 0 0 0;
  min-height: 38px;
}
#attr-up-modal .main-btn {
  background: #4085c6;
  color: #fff;
  border-radius: 5px;
  border: none;
  padding: 6px 18px;
  font-weight: bold;
  cursor: pointer;
  margin-left: 8px;
}
#attr-up-modal .main-btn:last-child {
  background: #bbb;
  color: #222;
}

.btn-group {
  display: flex;
  justify-content: center;  /* centre les boutons horizontalement */
  gap: 8px;                 /* espace entre les boutons, adapte à ton goût */
  flex-wrap: wrap;          /* permet le passage à la ligne si la place manque */
}
.btn-group .edit {
  margin: 0; /* retire tout margin latéral parasite */
}

.td-btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

input[type=checkbox].native-checkbox {
  display: inline-block !important;
}

/* Bouton Nouveau Combat dans la fenêtre de résultat */
#comres .combat-btn {
    display: block;
    margin: 1.5em auto 0 auto;
    padding: 0.6em 2.2em;
    font-size: 1.15em;
    font-family: 'PT Serif', serif;
    background: linear-gradient(90deg, #bf720d 40%, #ffb95a 100%);
    color: #fff;
    border: none;
    border-radius: 0.5em;
    box-shadow: 0 2px 8px rgba(191, 114, 13, 0.20);
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    font-weight: bold;
    letter-spacing: 0.05em;
}
#comres .combat-btn:hover {
    background: linear-gradient(90deg, #ffb95a 40%, #bf720d 100%);
    color: #fffadf;
}

.combat-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center; /* centre horizontalement le bloc */
  gap: 0.4em;
  margin-bottom: 0.6em;
  position: relative;
}

.combat-title-wrap h2 {
  margin: 0;
  font-size: 1.4em;
  text-align: center;
  flex: none; /* évite d'étirer le titre */
}

#combat-settings-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 0.4em;
  font-size: 1.2em;
  display: flex;
  align-items: center;
}

#combat-settings-btn .fa-cog {
  color: #bf720d;
  transition: transform 0.2s, color 0.2s;
}

#combat-settings-btn:hover .fa-cog {
  color: #ffb95a;
  transform: rotate(40deg);
}

#combat-settings-modal.modal {
  display: none;
  position: fixed;
  z-index: 3000;
  left: 0; top: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

#combat-settings-modal.modal.modal-active {
  display: flex;
}

#combat-settings-modal .modal-content {
  background: #fff;
  margin: auto;
  padding: 2em 2em 1.5em 2em;
  border-radius: 10px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 4px 32px rgba(0,0,0,0.20);
  position: relative;
}

#combat-settings-modal .close {
  position: absolute;
  right: 1em;
  top: 1em;
  font-size: 1.6em;
  color: #bf720d;
  cursor: pointer;
  font-weight: bold;
}

.toggle-type {
  display: flex;
  border: 1px solid #bf720d;
  border-radius: 5px;
  overflow: hidden;
  width: 142px;
  margin-bottom: 0.5em;
  margin-top: 0.2em;
  background: #2d2321;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.type-btn {
  flex: 1 1 50%;
  border: none;
  background: none;
  color: #ffb95a;
  font-weight: bold;
  padding: 0.4em 0.1em;
  cursor: pointer;
  font-size: 1em;
  border-right: 1px solid #bf720d;
  transition: background 0.2s, color 0.2s;
}
.type-btn:last-child { border-right: none; }
.type-btn.active {
  background: #bf720d;
  color: #2d2321;
  box-shadow: inset 0 1px 5px #2d2321;
}
.type-btn:not(.active):hover {
  background: #3e2b20;
  color: #fffbe0;
}

/* CORRECTION RESPONSIVE POUR LA ZONE VIDE EN BAS DE PAGE */

/* Version desktop uniquement (écrans larges) */
@media screen and (min-width: 768px) {
  main {
    display: flex;
    height: 100vh;
    padding-top: 50px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .left, .right {
    flex: 1;
    overflow-y: auto;
    padding: 5px;
    height: 100%;
    box-sizing: border-box;
  }

  /* Correction spécifique pour PC */
  .pc main {
    height: 100vh;
    margin-top: 0;
    padding-top: 0;
  }

  .pc main > .left,
  .pc main > .right {
    height: 100vh;
    overflow-y: auto;
    padding: 50px 20px;
    box-sizing: border-box;
  }

  #roll {
    padding-bottom: 20px; /* Réduit l'espace en bas sur desktop */
  }
}

/* Version mobile/tablette (écrans étroits) - garde les deux colonnes */
@media screen and (max-width: 767px) {
  main {
    display: flex; /* Garde les deux colonnes */
    height: 100vh;
    padding-top: 50px;
    box-sizing: border-box;
    overflow: hidden;
    max-width: 100%; /* Utilise toute la largeur sur mobile */
    margin: 0;
  }

  .left, .right {
    flex: 1; /* Chaque colonne prend 50% */
    overflow-y: auto;
    padding: 2px; /* Padding réduit sur mobile pour plus d'espace */
    height: 100%;
    box-sizing: border-box;
  }

  #roll {
    padding-bottom: 20px; /* Espace réduit sur mobile aussi */
  }

  /* Ajustements spécifiques mobile pour une meilleure lisibilité */
  body {
    font-size: 70%; /* Texte légèrement plus petit sur mobile */
  }

  /* Assure que le header reste visible */
  header {
    height: 50px;
    z-index: 1000;
  }
}

/* Corrections communes à tous les appareils */
footer {
  position: relative;
  margin-top: auto;
}

body, html {
  height: 100%;
  overflow: hidden; /* Bloque complètement le scroll du body */
}

/* S'assurer que le header reste fixe et visible */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 1000;
}

body:not(.mfp-ready) .mfp-bg { display: none !important; }