:root {
    --irdProfile-color1: #bcc;
    --irdProfile-color2: #899;
    --irdProfile-color2-faded: #8997;
    --irdProfile-color-action: #899;
    --irdProfile-color-talk: #bcc;
}

body {
    min-width: 1260px;
    /* max-width: 1803px; */
    max-width: 1703px;
    cursor: default;
    margin: 0 auto 0 auto;
    position: relative;
    padding: 0 25px 25px 25px;
    overflow: hidden;
    min-height: 100vh;
}


select {
    color: #dde;
    font-size: 11pt;
    font-family: 'berenika', sans-serif;
    background-color: #233;
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;
    border-color: #455;
    box-sizing: border-box;
}


input:not([type=button]) {
    color: #CCCCCC;
    background: url(images/layout/backgrounds/background_bright.png) top left repeat;
    border-style: solid;
    border-width: 1px;
    border-color: #566;
    font-family: "berenika", sans-serif;
    text-align: center;
    box-sizing: border-box;
}


input[type=text], input[type=number] {
    color: #dde;
    font-size: 11pt;
    font-family: 'berenika', sans-serif;
    background: #233;
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;
    border-color: #455;
    box-sizing: border-box;
}


a:link {
    color: #FFFFFF;
}

a:hover {
    color: #FFFFFF;
}

a:visited {
    color: #FFFFFF;
}


.headerDiv {
    clear: both;
    min-width: 1100px;
    max-width: 1830px;
}

#headerDiv #headerBannerDiv {
    min-width: 520px;
    margin-top: -119px;
    margin-left: 45px;
    margin-right: 45px;
    position: relative;
    height: 119px;
    z-index: 1;
    /*background:url(images/WintertalBanner.png) center no-repeat;*/
    /*background: url(images/Wintertal.gif) bottom no-repeat;*/
    /*mix-blend-mode: luminosity;*/
    background-size: auto 75%;
}


.loading {
    position: fixed;
    /*
    opacity:0.4;
    background:#233;
    background: linear-gradient(to bottom, transparent, black);
     */
    width: 100%;
    height: 100%;
    margin: auto;
    top: 0;
    z-index: 10000;
    overflow: hidden;
}


/* The sticky class is added to the header with JS when it reaches its scroll position */
.stickyMenu {
    position: fixed !important;
    top: 0px !important;
    width: 100%;
    min-width: 1310px;
    max-width: 1753px;
    padding-right: 50px;
    box-sizing: border-box;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.stickyMenu + #containerDiv {
    margin-top: 80px;
}

.ird_contentHead_sticky {
    position: fixed !important;
    top: 81px !important;
    /*margin-left: -204px !important;
    margin-right: 195px;*/
    /*margin-left: -204px !important;
    margin-right: 25px;*/
    min-width: 874px;
    max-width: 1417px;
}


.stickyLeft {
    position: fixed !important;
    top: 80px !important;
    /*height: 100%;*/
}


.stickyRight {
    position: fixed !important;
    top: -122px !important;
}


#headerDiv #headerLeft {
    float: left;
    width: 475px;
    height: 119px;

    background: url(images/layout/borders/header_left.png) bottom left no-repeat;
}


#headerDiv #reportBugDiv {
    margin-left: 240px;
    margin-top: 82px;
    width: 440px;
    height: 435px;
    z-index: 9999;
    position: absolute;
    visibility: hidden;
    font-family: "berenika", sans-serif;
    font-size: 12px;
    background: url(images/layout/backgrounds/background_dialog_cut.png);
}


.irdBetaGoblin {
    position: absolute;
    height: 120px;
    width: 80px;
    bottom: 26px;
    left: 2px;
    background: url(images/layout/misc/betaGoblin.gif);
}


.irdBetaGoblin:hover {
    background: url(images/layout/misc/betaGoblin_Stand.png);
}


#headerDiv #headerRight {
    float: right;
    width: 437px;
    height: 119px;

    background: url(images/layout/borders/header_right.png) bottom right no-repeat;
}

#headerDiv #headerFill {
    margin-left: 450px;
    margin-right: 435px;
    height: 119px;

    background: url(images/layout/borders/header_fill.png) bottom left repeat-x;
}

#headerDeco {
    position: absolute;
    width: 280px;
    height: 240px;
    left: 0px;
    top: -145px;

    z-index: 3000;

    background-image: url(images/logo/head.png);
}


.menuDiv-wrapper {
    clear: both;
    position: relative;
    z-index: 2000;
    height: 81px;
}


.menuDiv {
    height: 81px;
}

.cp_slider {
    float: left;
    width: 100px;
    height: 11px;
    margin: 14px;
}

.cp_swatch {
    width: 90px;
    margin-top: 18px;
    margin-left: 405px;
    font-size: 0.86em;
    display: inline-block;
}


.cp_red .ui-slider-range {
    background: #ef2929;
}

.cp_red .ui-slider-handle {
    border-color: #ef2929;
}

.cp_green .ui-slider-range {
    background: #8ae234;
}

.cp_green .ui-slider-handle {
    border-color: #8ae234;
}

.cp_blue .ui-slider-range {
    background: #729fcf;
}

.cp_blue .ui-slider-handle {
    border-color: #729fcf;
}


.centered {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}


.menuItem:hover {
    text-shadow: 0 0 3px black;
    color: #ddd;
}


/* div to hold the left side of the menu bar background*/
#menuDiv #menuLeft {
    float: left;
    width: 474px;
    height: 81px;

    background-image: url(images/layout/borders/topNav_left.png);
    background-size: inherit;

    position: relative;
    left: -25px;
}

/* div to hold the right side of the menu bar background*/
#menuDiv #menuRight {
    float: right;
    width: 460px;
    height: 81px;

    background-image: url(images/layout/borders/topNav_right.png);
    background-size: inherit;

    position: relative;
    right: -25px;
}

/* div to hold the background for the menu bar that fills the empty space between left and right background*/
#menuDiv #menuFill {
    margin-left: 445px;
    margin-right: 435px;
    height: 81px;

    background-image: url(images/layout/borders/topNav_Fill.png);
    background-repeat: repeat-x;
}

/* table which holds the menu items */
#menuDiv #menuBar {
    position: relative;
    top: -83px;
    width: 100%;
    height: 62px;
    z-index: 5;
    table-layout: fixed;
    padding-left: 225px;
    padding-right: 25px;
}

/* class to format each menu items */
#menuDiv #menuBar .menuItem {
    background: url(images/layout/borders/navItemBorder.jpg) no-repeat right top;
    font-family: "vinque", "berenika", serif;
    font-size: 16px;
    text-align: center;
    padding-right: 13px;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#menuDiv #menuBar .menuItem a {
    text-decoration: none;
    color: var(--text-color-default);
}

/* the last menu item has to be treated in a special way because there must not be another separator after this menu item */
#menuDiv #menuBar .menuItemLast {
    font-family: "vinque", "berenika", serif;
    font-size: 16px;
    cursor: pointer;
    width: 132px;
    max-width: 132px;
    padding-left: 5px;
}

/* wrapper div for the leftDiv, rightDiv and the contentDiv */
#containerDiv {
    padding-left: 216px;
    padding-right: 170px;
    overflow: hidden;
    min-height: 550px;
    position: relative;

    box-shadow: 0 0 30px black;
}

#containerDiv .column {
    position: relative;
    float: left;
    padding-bottom: 20010px; /* X + padding-bottom */
    margin-bottom: -20000px; /* X */
}

/* wrapper div for the subContent */
#subContentWrapperDiv {
    overflow: hidden;
    position: relative;
    min-width: 984px;

    /* new */
    background: url(images/layout/borders/left.png) left repeat-y,
    url(images/layout/borders/right.png) right repeat-y,
    url(images/layout/backgrounds/background_bright.png) top left repeat;

    line-height: 1.5;
}

/* div for the sub content */
#subContentDiv {
    padding: 12px 180px;

    overflow: hidden;
    position: relative;
    margin: 0 auto 40px auto;
    min-height: 650px;

    font-family: var(--text-font-default);
    color: var(--text-color-default);
    font-size: var(--text-font-size-default);
}

/* div for the main content */
#contentWrapperDiv {
    width: 100%;
    z-index: 2;

    /*
    background: url(images/layout/borders/inner_border_left.png) top left repeat-y,
    url(images/layout/borders/inner_border_right.png) top right repeat-y,
    url(images/layout/backgrounds/background_dark.png) top left repeat;
    */
    background: url(images/layout/borders/inner_border_right.png) top right repeat-y,
    url(images/layout/backgrounds/background_dark.png) top left repeat;

    line-height: 1.5;
    word-spacing: 1pt;
}


.ird_removeOnAppend {
    transition: opacity 0.2s;
}


/* div for the main content */
#contentDiv {
    max-width: 1250px;
    margin: auto;
    padding: 65px 25px;
    z-index: 4;
    font-family: "berenika", sans-serif;
    font-size: 11pt;

    cursor: default;

    opacity: 1;

    transition: all 0.2s linear;
}

.irdContent-erased {
    /*
    max-height: 0;
    overflow: hidden;
    padding: 0 25px !important;
     */
    opacity: 0.1 !important;

    transition: all 0.6s linear !important;
}


/* left div column for navigation issues */
#leftWrapperDiv {
    width: 216px; /* width + border */
    right: 216px;
    margin-left: -100%;
    z-index: 1;

    /*
    background: url(images/layout/backgrounds/wing.png) top right no-repeat,
    url(images/layout/borders/left.png) top left repeat-y,
    url(images/layout/backgrounds/background_bright.png) top left repeat;
    */

    background: /* url(images/layout/backgrounds/wing.png) top right no-repeat, */
    url(images/layout/borders/left.png) top left repeat-y,
    linear-gradient(to right, #05101590 30%, transparent 95%),
    url(images/layout/backgrounds/background_dark.png) top left repeat;
}

/* upper end of the navigation scroll */
/* NEW_NAV_BAR
#leftWrapperDiv #scrollTop
{
    height: 34px;
    width: 200px;
    margin-left: 16px;
    z-index: 3;

    background: url(images/layout/scrolls/scroll_white_top_dark.png) bottom center no-repeat;
    background-size: 200px;
}
*/

/* middle part of the navigation scroll */
/* NEW_NAV_BAR
#leftWrapperDiv #leftDiv
{
    position: relative;
    width: 200px;
    margin-left: 16px;
    z-index: 2;

    font-family: "vinque", "berenika", serif;
    color: #000000;
    background: url(images/layout/scrolls/scroll_white_middle_dark.png) top center repeat-y;
    background-size: 200px;

    overflow: hidden;

    transition: max-height 0.2s;
}
*/
/* TODO: Do we need this? */
#leftWrapperDiv #leftDiv {
    position: relative;
    width: 200px;
    margin-left: 16px;
    z-index: 2;
    padding: 50px 0 0 0;

    /*
    background: linear-gradient(to bottom, #4558 50%, transparent);
    background: linear-gradient(to bottom, #122 45%, transparent);
     */

    font-family: "vinque", "berenika", serif;
    overflow: hidden;

    transition: max-height 0.2s;
}


/* bottom end of the navigation scroll */
/* NEW_NAV_BAR
#leftWrapperDiv #scrollBottom
{
    height: 40px;
    width: 200px;
    margin-left: 16px;
    z-index: 3;

    background: url(images/layout/scrolls/scroll_white_bottom_dark.png) top center no-repeat;
    background-size: 200px;
}
*/

#leftWrapperDiv #navigationDiv {
    position: relative;
    top: 0;
    padding-bottom: 20px;
}


/* settings for headings of the linkList */
/* NEW_NAV_BAR
.linkListHeading
{
    margin-top: 0px;
    margin-left: 0px;
    padding: 0px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    
    cursor:default;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
*/


.irdNavBar-heading {
    margin-top: 16px;

    padding: 6px;
    font-size: 12pt;

    color: var(--text-color-default);
    text-shadow: -1px 1px 3px black;

    background: linear-gradient(to bottom, #3442 30%, #1229 95%), url(images/layout/backgrounds/background_clickable.png) top left repeat;

    border-top: 2px solid #677;
    border-bottom: 3px solid #122;

    border-radius: 4px 8px 12px 8px;

    cursor: default;

    user-select: none;
}


.irdNavBar-item, .irdNavBar-reverseitem {
    padding: 0;
    position: relative;

    border-top: 1px solid #566;
    border-left: 1px solid #455;
    border-right: 1px solid #344;
    border-bottom: 3px solid #122;

    color: var(--text-color-default);
    font-size: 11pt;
    text-shadow: var(--text-shadow);

    cursor: pointer;

    user-select: none;
}

.irdNavBar-item {
    clip-path: polygon(0 0, 95% 0, 100% 48%, 96% 100%, 0 100%);
    border-radius: 0 14px 12px 6px;
    margin: 4px 0 4px 0;
}

.irdNavBar-reverseitem {
    clip-path: polygon(100% 0, 5% 0, 0 48%, 4% 100%, 100% 100%);
    border-radius: 14px 5px 6px 12px;
    margin: 4px 0 4px 0;
}


.irdNavBar-item:hover, .irdNavBar-reverseitem:hover {
    filter: brightness(120%); /* increased compared to buttons for better effect */
    transition: filter 0.25s ease-in-out;

    border-top: 1px solid #677;
    border-left: 1px solid #566;
    border-right: 1px solid #455;
    border-bottom: 3px solid #122;

    text-shadow: var(--text-shadow-hover);
}

/*
.irdNavBar-item + .irdNavBar-heading, .irdNavBar-reverseitem + .irdNavBar-heading {
    margin-top: 8px;
}
*/

.irdNavBar-collapsed {
    margin-top: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    border: none !important;
    transition: all 0.1s ease-out;
    transition-behavior: allow-discrete;
    /* finally, hide it */
    display: none;
}


.irdNavBar-item > span:first-child, .irdNavBar-reverseitem > span:first-child {
    width: 100%;
    display: inline-block;
    padding: 3px 10px 4px 12px;
    box-sizing: border-box;
}

.irdNavBar-shortcut {
    position: absolute;
    right: 12px;
    display: inline-block;
    width: auto;
    top: 6px;
    font-family: sans-serif;
    font-style: italic;
    font-size: 0.75em;
    pointer-events: none;
    text-shadow: none;
    opacity: 0.65;
}

/*
.linkListItem
{
    margin-top:6px;
    margin-bottom:12px;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.linkListItem:hover
{
    text-shadow: 0px 1px 2px #FFF;
    opacity:0.9;
}
*/

/* column wrapper div for right div */
#rightWrapperDiv {
    width: 168px;
    margin-right: -170px;
    padding-left: 2px;
    z-index: 1;

    background: url(images/layout/borders/right.png) top right repeat-y,
    url(images/layout/backgrounds/background_bright.png) top left repeat;
}

/* div for the info panel on the right side */
#rightDiv {
    position: relative;
    margin-right: 41px;
    padding-bottom: 2px;

    font-family: "vinque", "berenika", serif;
}

/* this divs overpaints the lower part of the side borders as a transition to the bottom border*/
#cornerDiv {
    position: relative;
    height: 15px;
    margin-top: -15px;
    clear: both;
    z-index: 4;

    background: url(images/layout/corners/corner_bottom_left_upper_left.png) top left no-repeat,
    url(images/layout/corners/corner_bottom_right_upper_right.png) top right no-repeat;
}

/* the footer contains the bottom border of the page */
#footerDiv {
    height: 55px;
    clear: both;
    position: relative;
    z-index: 3;

    background: url(images/layout/corners/corner_bottom_left_lower_left.png) top left no-repeat,
    url(images/layout/corners/corner_bottom_right_lower_right.png) top right no-repeat,
    url(images/layout/borders/bottom.png) top left repeat-x;

    filter: drop-shadow(0 10px 10px black);
}

#dsgvoFooter {
    font-family: "vinque", "berenika", serif;
    font-size: small;
    color: #42515f;
    position: absolute;
    margin-top: -15px;
    padding-bottom: 10px;
    padding-top: 0px;
    text-align: center;
    width: 100%;
    z-index: 5;
}

#dsgvoFooter a:link {
    color: #42515f;
    text-decoration: none;
}

#dsgvoFooter a:hover {
    color: #FFFFFF;
}

#blackoutDiv {
    position: fixed;
    height: auto;
    min-height: 100%;

    width: auto;
    min-width: 100%;

    z-index: 1000;
    background: rgba(0, 0, 0, 0.8);

    top: 0px;
    left: 0px;

    padding-top: 240px;
}

.irdBlackoutText {
    display: block;
    font-size: 24pt;
    text-align: center;
    width: 62%;
    margin: auto;
    position: relative;
    top: 100px;
    color: #899;
    font-family: "vinque", "berenika", serif;
}

/* general terms and conditions */
table.gtc {
    padding: 0px;
    border-spacing: 10px;
}

/* general terms and conditions */
.gtc td {
    font-family: "berenika", sans-serif;
    font-size: 14px;
}

div .validationFlag {
    display: inline;
    font-family: "berenika", sans-serif;
    font-size: 10px;
}

.skillList {
    border: 0px;
    padding: 5px;
    border-spacing: 0px;
    font-size: 12px;
    cursor: default;
}

.irdAvatar {
    box-sizing: border-box;
    background-color:  var(--irdProfile-color2);
    background: radial-gradient(circle at top right, var(--irdProfile-color2-faded), var(--irdProfile-color2) 50%);

    object-fit: cover;
    overflow: hidden;

    height: 194px;
    width: 150px;

    position: relative;
    z-index: 1;

    border: 1px solid #233;
    border-top: none;
    border-radius: 0 0 8px 8px;

    box-shadow: 0 0 0 2px var(--irdProfile-color2-faded);
}


.irdAvatar-image {
    height: 185px;
    width: 142px;
    position: absolute;
    object-fit: cover;
    left: 3px;
    top: 5px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}


.irdToken, .irdToken-comment {
    height: 120px;
    width: 120px;
    border-radius: 60px;
    border-width: 4px;
    overflow: hidden;
    box-shadow: 0 3px 6px black;
}

.irdToken {
    margin: -55px 30px 30px -55px;
    position: absolute;
    z-index: 4;
}

.irdToken-comment {
    margin: -50px 30px 10px 0;
    position: relative;
    float:left;
}

.irdToken-background {
    width: 100%;
    height: 100%;
    align-content: center;
    box-sizing: border-box;
    border-bottom: 4px solid #0118;
    border-radius: 50%;
}

.irdToken-image {
    width: 112px;
    height: 108px;
    border-radius: 50%;
    margin: 4px 0 0 4px;

}


textarea.bordered_bright {
    padding: 10px;
    margin: 30px;
    max-width: 100%;
    min-width: 300px;
    min-height: 120px;
    max-height: 800px;
    resize: vertical;

    font-family: "berenika", sans-serif;
    color: #CCCCCC;
    border: 1px solid #566;

    background: url(images/layout/backgrounds/background_bright.png) repeat;
    box-shadow: black 0 0 5px;
}


textarea.bordered_bright_active {
    box-shadow: black 0 0 30px !important;
    border: 1px solid #CCCCCC !important;
}


.irdActs, .irdWorkplace, .irdBox {
    position: relative;
    box-sizing: border-box;

    min-width: 700px;
    max-height: 330px;

    font-family: "berenika", sans-serif;
    color: #CCCCCC;

    border: 3px double #788;
    border-bottom-color: #555;
    background: url(images/layout/backgrounds/background_bright.png) repeat;
    box-shadow: -1px 0 0 1px #788, 1px 2px 0 1px #344, 5px 5px 5px #122, black 0 3px 15px;

    border-radius: 6px 3px 6px 6px;
}

.irdActs {
    margin: 60px 60px 30px 30px;
    padding: 30px;

    position: relative;
    display: inline-block;

    opacity: 0;

    animation: ease-in-out idrActs-fadein 0.5s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
}


@keyframes idrActs-fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.irdWorkplace {
    margin: 60px auto 30px auto;
    padding: 20px 30px;

    width: 700px;
    position: relative;
}

.irdActs-do-fadeout {
    animation: ease-in-out idrActs-fadein 0.15s;
    animation-fill-mode: backwards;
}


.irdActs::before, .irdWorkplace::before {
    content: "";
    position:absolute;
    top: -3px;
    left: -4px;
    right: -4px;
    height: 6px;

    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background: linear-gradient(to bottom, transparent 50%, #122 51%, #122 60%, transparent 70%), linear-gradient(to right, var(--irdProfile-color2) 30%, var(--irdProfile-color2-faded) 70%);
}


.irdActOptions {
    list-style-type: none;
    margin-top: 2px;
    padding-left: 12px;
    line-height: 1.25em;
}

.messageBoxContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6000;
}

.messageBox {
    position: relative;
    min-width: 200px;
    min-height: 80px;
    max-width: 500px;
    top: 200px;
    padding: 40px;
    margin: auto;
    z-index: 6001;
    text-align: center;
    font-family: "vinque", "berenika", serif;
    font-size: large;

    color: #CCCCCC;
    background: url(images/layout/corners/inner_corner_upper_right.png) top right no-repeat,
    url(images/layout/corners/inner_corner_lower_right.png) bottom right no-repeat,
    url(images/layout/corners/inner_corner_lower_left.png) bottom left no-repeat,
    url(images/layout/corners/inner_corner_upper_left.png) top left no-repeat,
    url(images/layout/borders/inner_border_top.png) top left repeat-x,
    url(images/layout/borders/inner_border_bottom.png) bottom left repeat-x,
    url(images/layout/borders/inner_border_right.png) top left repeat-y,
    url(images/layout/borders/inner_border_left.png) top right repeat-y,
    url(images/layout/backgrounds/background_bright.png) top left repeat;
}


.irdButton, .irdButton-disabled, .irdButton-static {
    color: var(--irdProfile-color1);
}

/* ToDo Used in mail, restyle! */
.irdButton-selected {
    color: #CCCCCC;
    background: url(images/layout/backgrounds/background_clickable.png) top left repeat;
    text-align: center;
    font-family: "berenika", sans-serif;
    font-size: small;
    padding: 7px 8px 9px 8px;
    margin: 8px;
    cursor: pointer;

    user-select: none;
    min-height: 36px;

    border-radius: 8px;

    border-top: 2px solid #344;
    border-left: 2px solid #455;
    border-bottom: 2px solid #122;
    border-right: 2px solid #122;

    box-shadow: 1px 1px 4px #011;
    box-sizing: border-box;

    text-shadow: 0px 1px 2px #def;
}


/* Close links */
.irdLinkClose, .irdRoleplay-close {
    color: var(--text-color-default);
    font-family: var(--text-font-default);
    font-size: 11pt;

    text-shadow: var(--text-shadow);

    cursor: pointer;

    position: absolute;
    right: 35px;
    top: 8px;

    user-select: none;
}

.irdLinkClose:hover, .irdRoleplay-close:hover {
    color: var(--text-color-highlight);
    text-shadow: var(--text-shadow-hover);
}


.initial {
    font-family: "vinque", serif;
    text-shadow: -2px 3px black, 0px -1px white;
    float: left;
    opacity: 0.6;
    padding-right: 4px;
    margin-right: 4px;
    padding-left: 4px;
    font-size: 230%;
    padding-bottom: 1px;
    box-shadow: 1px 1px 0 #000, -5px 3px 0 #111;
    border: 1px solid #677;
    border-right-color: #556;
    margin-top: -2px;

    background-color: #4557;
    line-height: 1.2;
}

.irdBook-page-left > div > .initial, .irdBook-page-right > div > .initial {
    background-color: #887;
    line-height: 1.1;
    margin-top: -8px;
}


.itemImagedInactive, .itemImaged {
    width: 92px;
    height: 92px;
    margin-left: 14px;
    margin-right: 14px;
    margin-top: 4px;
    margin-bottom: 4px;

    background-size: 92px 88px;
    background-repeat: no-repeat;
    background-position: center bottom;

    position: relative;

    filter: drop-shadow(0 -0.3rem 0.5rem #0009);

    transition: all 0.1s ease-in-out;
}


.itemImagedInactive {
    cursor: default;
}


.itemImaged:hover {
    background-size: 92px 92px;
    filter: drop-shadow(0 -0.25rem 0.5rem #0006);

    transition: all 0.1s ease-in-out;
}


.itemCoins {
    filter: drop-shadow(0 -0.3rem 0.5rem #0009);
    transition: all 0.1s ease-in-out;
}

.itemCoins:hover {
    filter: drop-shadow(0 -0.25rem 0.5rem #0006);
    transform: scale(1.1) translateX(30px);
    transition: all 0.1s ease-in-out;
}


/* fallback */
.itemImagedColor {
    display: none;
}

@supports ((-webkit-mask-image:none) or (mask-image:none)) {
    .itemImagedColor {
        display: block;

        mask-size: 92px 88px;
        mask-repeat: no-repeat;
        mask-position: center bottom;

        -webkit-mask-size: 92px 88px;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center bottom;
    }
}


@supports ((-webkit-mask-image:none) or (mask-image:none)) {
    .itemImaged:hover > .itemImagedColor {
        mask-size: 92px 92px;
        -webkit-mask-size: 92px 92px;
        background-size: 92px 92px;
    }
}


.itemDropHighlighted {
    text-shadow: 0px 1px 1px #CCD;
    background-size: 92px 92px;
    filter: brightness(1.2);
}

.itemDropHighlighted > .itemImagedColor {
    text-shadow: 0px 1px 1px #CCD;
    background-size: 92px 92px;
    -webkit-mask-size: 92px 92px;
    mask-size: 92px 92px;
    filter: brightness(1.2);
}

.itemLabel {
    width: 92px;
    left: 0px;
    bottom: 0px;
    /*background-image: linear-gradient(rgba(40,40,50, 0.2), rgba(0,0,0, 0.8)); */
    background-image: linear-gradient(rgba(40, 50, 40, 0.1), rgba(40, 50, 40, 1.0));
    padding-top: 2px;
    padding-bottom: 4px;
    display: inline-block;
    position: absolute;

    text-align: center;
    font-size: 8pt;
    color: #dde;
    font-weight: normal;
    font-family: "berenika", sans-serif;
    text-shadow: black 1px 1px 2px, black -1px -1px 2px;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.itemValue {
    font-size: 13px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    text-shadow: black 1px 1px 2px, black -1px -1px 2px;
    margin-top: -10px;
    padding-left: 4px;
    padding-right: 2px;
    background-color: rgba(100, 100, 100, 0.8);
    border-bottom: 1px solid darkslategray;
    border-left: 1px solid darkslategray;
}


.coin {
    position: relative;
    width: 1em;
    height: 1em;
    top: 0.15em;
    padding-left: 2px;
}


.buffListing {
    width: 90%;
    font-size: 10px;
    text-align: left;
    padding-left: 8px;
    overflow: auto;

    height: 150px;

    border: 1px solid;
}


.irdItemDealer-rack {
    display: flex;
    flex-flow: row wrap;
    grid-row-gap: 20px;
    justify-content: space-evenly;
    margin: auto;
    width: 70%;
    min-width: 670px;
    overflow: hidden;
    border: 12px solid #4318;
    border-radius: 6px;
    background-image: linear-gradient(to bottom, black, transparent 50%, #3205 75%, #320 90%, #320 100%);
    background-size: 100% 120px;
    background-position: 0 -60px;
    padding-bottom: 5px;
    box-sizing: border-box;
    box-shadow: 0 -5px 20px black;
}


.irdChest-inline {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    float: left;
    left: 2%;
    width: 46%;
    min-height: 200px;
    border: 12px solid #584835;
    box-shadow: 0 10px 40px black inset, 0 5px 10px black;
    background-color: #1108;
    border-radius: 16px;
    margin-top: 5px;
}


.irdCharacterSelection {
    display: none;
    padding: 0 4px 4px 4px;
    font-size: 11pt;
    background-color: #566d;
    color: #ccc;
    position: absolute;
    min-width: 200px;
    box-sizing: border-box;
    box-shadow: 1px 2px 4px #122;
    margin-top: -2px;
}

.irdCharacterSelection-item {
    display: inline-block;
    width: 100%;
    margin-top: 4px;

    cursor: pointer;
}

.irdCharacterSelection-item:hover {
    background-color: #dde4;
}


.irdSysHint {
    font-size: 11pt;
    font-family: monospace;
    color: #abba;
}


.irdSysLink {
    font-size: 11pt;
    padding-right: 30px;
    font-family: monospace;
    float: right;
    color: #abba;
    cursor: pointer;

    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.irdSysLink:hover {
    text-shadow: 0 0 1px #dde;
    color: #abb;
}


#buttonDiv {
    position: absolute;
    bottom: 30px;
    width: 400px;
    margin: 0 auto 0 auto;
    height: 48px;
    padding-left: 24px;

    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-evenly;
}

/*
 *  AjaxInplaceEditor 
 */

form.inplaceeditor-form /* The form */
{
    background: none;
    font-family: "berenika", sans-serif;
    font-size: small;
}

form.inplaceeditor-form input[type="text"] /* Input box */
{
    background: none;
    font-family: "berenika", sans-serif;
    font-size: small;
}

form.inplaceeditor-form textarea /* Textarea, if multiple rows */
{
    background: none;
    font-family: "berenika", sans-serif;
    font-size: small;
}

form.inplaceeditor-form input[type="submit"] /* The submit button */
{
    margin-left: 1em;
}

form.inplaceeditor-form a /* The cancel link */
{
    margin-left: 1em;
}


.irdInteractionRef {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    /*font-weight: bold;*/

    cursor: pointer;

    /*text-shadow: 1px 1px 0px #233, -1px -1px 0px #233*/
    /*text-shadow: 1px 1px 2px black, 0px -1px 1px rgba(255,255,255,0.7);*/
    text-shadow: 0 2px 4px black, 0px -1px 0 #fffa;
    /*opacity:0.4;*/
}

.irdInteractionRef:hover {
    /*text-shadow: 0 0 4px rgba(255,255,255,0.5), 0 1px 1px black, 0 -1px 1px black;*/
    text-shadow: 0 3px 4px black, 0px -1px 0 #fff;
}


.irdInteraction-menu {
    z-index: 20001;
    position: fixed;
    width: 340px;
    height: 200px;
    filter: drop-shadow(0 5px 20px #122);
    font-family: "berenika", sans-serif;
}

.irdInteraction-menu-title {
    position: relative;
    width: 70%;
    top: 0;
    margin: auto;

    padding: 8px;

    text-align: center;
    font-family: "berenika", sans-serif;
    font-size: 14pt;
    color: #abb;
    background-color: #233;

    border: 1px solid #566;
    border-radius: 12px;

    box-shadow: 0 5px 10px black;
    font-weight: bold;
    text-shadow: 0 0 3px black;
}

.irdInteraction-menu-button {
    position: absolute;
    width: 155px;
    height: 38px;
    margin-left: 0px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;

    font-family: "berenika", sans-serif;
}


.mapNavLink {
    position: absolute;
    text-align: center;
    font-size: 8pt;
/ / font-weight: bold;
    font-style: italic;
    color: #123;
    min-width: 60px;
    height: 32px;
    cursor: pointer;
    margin: auto;

    text-shadow: 2px 2px 2px #dda, -2px -2px 2px #dda;
}

.mapNavLink:hover {
    text-shadow: 2px 2px 2px #fff, -2px -2px 2px #fff;
}


.irdLoc-head, .irdRoleplay_head {
    position: absolute;
    height: 40px;
    top: 0;
    /*left: -204px;
    right: 0;*/
    left: 12px;
    right: 170px;
    text-align: center;
    padding-top: 7px;
    padding-left: 204px; /* center the text over content again */
    z-index: 800;

    background: url(images/layout/backgrounds/location_left.png) left top no-repeat,
    url(images/layout/backgrounds/location_right.png) right top no-repeat,
    url(images/layout/backgrounds/location.png) center top repeat-x;

    font-family: "vinque", "berenika", serif;
    font-size: 22px;
    line-height: 1;
    text-shadow: 0 1px 4px black;
}


.irdLoc-weather {
    position: absolute;
    color: #bbc;
    width: 248px;
    margin-left: -4px;
    font-family: "berenika", sans-serif;
    font-size: 10pt;
    padding: 7px 4px;
    text-shadow: 0 0 2px black;
    cursor: default;
    top: -20px;
    text-align: center;
    background-color: #244;
    line-height: 1;
    z-index: 2;
    background: url(images/layout/backgrounds/background_clickable.png) bottom right repeat;
}


.locationDescriptionWrapper {
    position: relative;
}


.locationDescription {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30px 0 30px;
    text-shadow: 0 0 3px black;
    /*text-align: justify;*/
}

.locationDescription > p {
    margin-top: 0;
}

.locationImpression, .locationImpression_static {
    width: 250px;
    height: 150px;
    border: 4px double #566;
    border-top-width: 30px;
    margin: -29px 30px 15px -5px;
    float: left;
    border-bottom-left-radius: 45%;
    border-bottom-right-radius: 50%;
    box-shadow: 0 0 0 1px #677;

    filter: brightness(90%);

    transition: all 0.1s ease-in-out;
}

.locationImpression {
    box-shadow: -2px 8px 12px #011;
    cursor: zoom-in;
}

.locationImpression:hover {
    /*border-top-width: 33px;*/
    /*transform: scaleY(1.05);*/
    border-top-width: 38px;
    filter: brightness(100%);
    margin-bottom: 8px;

    transition: all 0.1s ease-in-out;
    transition-delay: 0.5s;
}

.locationImpression_static {
    box-shadow: 0 4px 4px #233;
}


.commentDiv {
    margin: auto;
    width: 100%;
    margin-top: 12px;
    text-shadow: 0 0 4px black;
}


.irdRoleplays {
    max-width: 1200px;
    margin: 180px auto 0 auto;
}

.irdRoleplayPrev_wrap {
    margin: 40px auto 40px auto;
    position: relative;
    background-color: #122;
    box-shadow: 0 2px 6px #011;

    border-radius: 12px 12px 6px 6px;

    box-sizing: border-box;
    padding-bottom: 8px;

    opacity: 0.4;
    transition: opacity 250ms;
}

.irdRoleplayPrev_wrap:hover {
    opacity: 1.0;
}


.irdRoleplayPrev_head {
    position: relative;
    height: 40px;
    text-align: center;
    padding-top: 6px;
    margin-bottom: 0;
    z-index: 799;

    border-top-left-radius: 6px;
    border-top-right-radius: 6px;

    background: url(images/layout/backgrounds/roleplay.png) center top repeat-x;

    font-family: "vinque", "berenika", serif;
    font-size: 22px;
    line-height: 1;
}

.irdRoleplayPrev_head > p {
    margin: 0;
}

.irdRoleplayPrev_finished_head {
    position: relative;
    height: 40px;
    text-align: center;
    padding-top: 6px;
    margin-bottom: 0;
    z-index: 799;

    border-top-left-radius: 12px;
    border-top-right-radius: 12px;

    background: url(images/layout/backgrounds/roleplay_finished.png) center top repeat-x;

    font-family: "vinque", "berenika", serif;
    font-size: 22px;
    line-height: 1;
    opacity: 0.7;
}

.irdRoleplayPrev_finished_head > p {
    margin: 0;
}

.irdRoleplay_preview {
    background-image: url(images/layout/backgrounds/background_bright.png);

    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-sizing: border-box;

    padding-bottom: 12px;
    margin: 0 4px 0 4px;

    max-height: 410px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.irdRoleplay_newBtn {
    padding-top: 9px;
    padding-bottom: 14px;
    font-size: 12pt;
    width: 50%;
    margin: 0 auto 40px auto;
    background: linear-gradient(to top, #1235, #1455 55%), url(images/layout/backgrounds/roleplay.png);
    line-height: 1;
    background-position-y: -1px;
}


.irdRoleplay_head {
    left: 3px;
    right: 0;
    padding-top: 9px;
    padding-left: 0;
    margin-left: 0 !important;

    background: url(images/layout/backgrounds/roleplay_left.png) left top no-repeat,
    url(images/layout/backgrounds/roleplay_right.png) right top no-repeat,
    url(images/layout/backgrounds/roleplay.png) center top repeat-x;
}


.irdRoleplay_head > p {
    margin: 0;
}

.irdRoleplay_finished_head {
    position: absolute;
    height: 40px;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding-top: 9px;
    z-index: 800;

    background: url(images/layout/backgrounds/roleplay_finished_left.png) left top no-repeat,
    url(images/layout/backgrounds/roleplay_finished_right.png) right top no-repeat,
    url(images/layout/backgrounds/roleplay_finished.png) center top repeat-x;

    font-family: "vinque", "berenika", serif;
    font-size: 22px;
    line-height: 1;
}

.irdRoleplay_finished_head > p {
    margin: 0;
}


.irdRoleplayOptions {
    width: 95%;
    margin: 80px auto 0 auto;
    padding: 10px;
    text-align: center;
    background-color: #2338;

    border-top: 3px double #344;
    border-bottom: 2px solid black;
    border-radius: 6px;
    box-shadow: 0 0 0 1px #344;
}


.irdRoleplay-close {
    right: 20px;
}


.irdRoleplay-container {
    padding-left: 14px !important;
    background: url(images/layout/borders/left.png) top left repeat-y;
}

.irdRoleplay-map-wrapper {
    width: 1000px;
    height: 644px;
    box-sizing: content-box;
    border: 4px solid #566;
    border-radius: 4px;
    margin: 60px auto -30px auto;
    position: relative;
}


.irdInventory {
    border: 6px #122 solid;
    border-radius: 32px 32px 64px 48px;
    border-bottom-color: #050908;
    border-bottom-width: 16px;
    border-right-color: #050908;
    width: 100%;
    background-image: url(images/layout/backgrounds/background_brown.png);
    box-shadow: 0 0 0 1px #788 inset, 0 0 0 3px #566 inset, 0 0 0 4px #122 inset, 0 0 2px 8px var(--irdProfile-color2) inset, 0 10px 50px 8px #8659 inset, 0 8px 10px #011;
}


.irdEquipment {
    position: relative;
    width: 500px;
    height: 600px;
    margin: auto;
    border: 4px double #677;
    border-radius: 250px;
    background-image: url(images/layout/backgrounds/background_brown.png);
    box-shadow: 0 0 0 2px #122 inset, 0 0 2px 6px var(--irdProfile-color2) inset,0 0 0 2px #788, 5px 5px 5px #122;
}

.irdEquipment-quickslots {
    position: relative;
    width: 500px;
    height: 105px;
    margin: -100px auto auto;
    border: 4px double #677;
    border-radius: 32px;
    border-top-color: #455;
    border-right-color: #566;
    background-image: url(images/layout/backgrounds/background_brown.png);
    box-shadow: 0 0 0 2px #788, 5px 5px 5px #122;
}

.irdKeyring-closed {
    position: absolute;
    bottom: 11px;
    left: -80px;
    width: 80px;
    height: 105px;
}

.irdKeyring-open {
    position: absolute;
    z-index: 100;
    width: 590px;
    min-width: 590px;
    bottom: 0;
    left: -83px;
    padding: 20px 20px 20px 110px;
    box-sizing: border-box;
    border-radius: 32px;
    box-shadow: 0 0 0 2px #788, 5px 5px 5px #122 !important;
    background-image: url(images/layout/backgrounds/background_brown.png);
}


.irdBook-base {
    position: relative;
    width: 700px;
    height: 600px;
    margin: 32px auto 32px auto;
    background-image: url(images/layout/books/book_bg.png);
    background-repeat: no-repeat;
    line-height: 1;
    text-shadow: none;
    filter: brightness(95%);
    transition: all 0.2s ease-in-out;
}

.irdBook-base:hover {
    transform: perspective(600px) !important;
    filter: brightness(100%);
    transition: all 0.2s ease-in-out;
}


.irdBook-page-left, .irdBook-page-right {
    position: absolute;
    top: 22px;
    width: 315px;
    height: 455px;
    padding: 20px;
    box-sizing: border-box;

    overflow: hidden;

    text-align: left;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    background-size: 100% 100%;
    background-repeat: no-repeat;

    font-family: "berenika", sans-serif;
    font-size: 10pt;
    line-height: 1.25;
}

.irdBook-page-right {
    left: 350px;
    background-image: url(images/layout/books/page_right.png);
}


.irdBook-page-left {
    right: 347px;
    background-image: url(images/layout/books/page_left.png);
}


.irdBook-register {
    position: absolute;
    width: 670px;
    height: 122px;
    left: 30px; /*10px, but shifted on purpose*/
    top: 476px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    opacity: 0.2;
    transform: rotateY(30deg);
    line-height: 1;
}

.irdBook-register:hover {
    opacity: 1.0;
}

.irdBook-register-part {
    opacity: 0.75;

    width: 20px;
    max-width: 20px;
    background-color: #ba7;
    box-sizing: border-box;
    border-left: 1px solid #998;
    border-bottom: 2px solid #776;
    cursor: pointer;
}

.irdBook-register-part:hover {
    opacity: 1.0;
    transform: scale(1.5, 1) rotateY(-30deg);
}

.irdBook-register-part-text {
    display: block;
    padding-left: 8px;
    transform: rotateZ(90deg);
    font-size: 10px;
}

.irdBook-page-head {
    width: 100%;
    text-align: center;
    border-bottom: 2px solid #332;
    display: inline-block;
    margin-top: -16px;
    line-height: 1;
}

.irdBook-page-head:empty {
    border-bottom: 2px dashed #887;
}

.irdBook-page-content > .irdBook-page-head:empty {
    display: none;
}

.irdBook-page-head > p {
    margin: 0;
}

.irdBook-custom-edit-link, .irdBook-journal-edit-link {
    text-decoration: underline;
    font-size: 0.9em;
    cursor: pointer;
    display: block;
    width: 100px;
    padding: 20px;
    margin: auto;
    text-align: center;
}

.irdBook-custom-edit-link:hover {
    text-shadow: 1px 1px 2px whitesmoke;
}


.irdBook-shelf {
    margin: 40px auto 20px auto;
    width: 700px;
    display: flex;
    flex-direction: column;
    border: 16px solid #653;
    border-bottom: 24px solid #541;
    background-color: #221;
    box-shadow: -10px 0 40px black;
    transform: perspective(500px) rotateY(2deg);
    line-height: 1;
}

.irdBook-shelf-row {
    width: 700px;
    min-height: 260px;
    padding: 0 5px 0 5px;
    box-sizing: border-box;
    border-bottom: 16px solid #431;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    background-image: linear-gradient(to bottom, black, transparent 90%, #320 93%, #431 100%);
    background-size: 700px 260px;
    background-position-y: top;
    background-repeat: repeat-y;
    flex-wrap: wrap;
}


.irdBook-inshelf {
    box-shadow: 0 2px 4px black;
    border-radius: 3px;
    overflow: hidden;
}

.irdBook-inshelf-with-content:hover {
    z-index: 1000;
    transform: scale(1.06) translateY(-4px) !important;
}

.irdBook-inshelf-title {
    box-sizing: border-box;
    transform: rotateZ(90deg);
    font-size: 9pt;
    color: #ccc;
    text-shadow: 0 0 3px black;
    width: 200px;
    padding: 5px;
    position: relative;
    display: inline-block;
    top: 85px;
    left: -75px;
    text-align: center;
}


.irdCharacterListLink {
    cursor: pointer;
}

.irdCharacterListLink:hover {
    text-shadow: 1px 1px 2px whitesmoke;
}

.irdActOption {
    margin: 8px;
}

.irdActOption:hover {
    text-shadow: 0px 1px 1px #CCD;
}


.irdKeyring-symbol {
    position: absolute;
    left: 10px;
    top: 2px;
    width: 60px;
    height: 100px;
    background: url(images/layout/misc/keyring.png);
    cursor: pointer;
    filter: drop-shadow(2px 4px 6px black);
}

.irdKeyring-symbol:hover {
    background: url(images/layout/misc/keyring_hl.png);
    filter: none;
}


.tutorialTip {
    border-width: 0;
    border-style: none;
    padding: 40px;
    max-width: 650px;
    min-width: 650px;
    max-height: 800px;
    position: relative;
    margin: auto;
    margin-top: 80px;
    opacity: 0.0;
    width: 500px;

    font-family: "berenika", sans-serif;
    color: #CCCCCC;
    background: url(images/layout/corners/inner_corner_upper_right.png) top right no-repeat,
    url(images/layout/corners/inner_corner_lower_right.png) bottom right no-repeat,
    url(images/layout/corners/inner_corner_lower_left.png) bottom left no-repeat,
    url(images/layout/corners/inner_corner_upper_left_tut.png) top left no-repeat,
    url(images/layout/borders/inner_border_top.png) top left repeat-x,
    url(images/layout/borders/inner_border_bottom.png) bottom left repeat-x,
    url(images/layout/borders/inner_border_right.png) top left repeat-y,
    url(images/layout/borders/inner_border_left.png) top right repeat-y,
    url(images/layout/backgrounds/background_bright.png) top left repeat;
}


.irdIcewell-notes {
    perspective: 1000px;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    row-gap: 20px;
    background-image: linear-gradient(10deg, #2229, transparent), url(images/layout/backgrounds/background_brown.png);
    padding: 30px 30px 80px 30px;
    border-radius: 20px;
    box-shadow: -5px 10px 20px #011;
    position: relative;
    margin-top: 30px;
    min-height: 300px;
    box-sizing: border-box;
}

.irdIcewell-note {
    border: rgb(20, 30, 20) solid 1px;
    box-shadow: 1px 4px rgb(20, 30, 20);
    width: 300px;
    min-width: 300px;
    max-height: 250px;
    overflow: auto;
    margin: auto;
    padding: 20px;
    background-image: url('images/layout/scrolls/scroll_background.png');
    background-size: cover;
    color: #125;
    transform: rotateX(10deg);
    text-shadow: none;
}

.irdIcewell-note-new {
    width: 520px;
    padding: 20px 20px 0 20px;
    background: url('images/layout/scrolls/scroll_background.png') no-repeat;
    background-size: cover;

    margin: auto;

    box-shadow: 4px 4px 30px black;
    min-height: 200px;
    color: #122;
    font-weight: bold;
    text-shadow: none;

    border: 1px solid #987 !important;
}


.irdIcewell-icon-pin {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 80px;
    width: 80px;
    background-image: url(images/icons/common/add_note.png);
    background-size: contain;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.irdIcewell-icon-pin:hover {
    filter: brightness(120%);
    transition: all 0.2s ease-in-out;
}


.irdHousePreviewHead {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;

    border-top: 4px solid #566;

    text-align: center;
    font-weight: bold;
    font-size: 1.4em;
    font-family: 'vinque', serif;
}


.irdMail-new-form {
    width: 100%;
    padding: 20px;
    background: url('images/layout/scrolls/scroll_background.png') no-repeat;
    background-size: cover;

    box-sizing: border-box;

    box-shadow: 4px 4px 30px black;
    min-height: 200px;

    color: #122;
    font-weight: bold;

    border: 1px solid #987 !important;
}

.irdMail-new-form-occ {
    background: #344 !important;
    color: #ccc !important;

    border: 1px solid #566 !important;
}


.irdMail-new-form-ic-input {
    background: #9987 !important;
    color: #122 !important;
}


.irdMail-preview {
    position: relative;
    margin-top: -20px;
    color: #122;
    width: 100%;
    min-height: 20px;
    padding: 20px;
    box-sizing: border-box;
    background: url(images/layout/scrolls/scroll_background.png) no-repeat;
    background-size: cover;
    box-shadow: 0 -10px 10px #0118;
    cursor: pointer;
    text-shadow: none;
}

.irdMail-preview:hover {
    filter: none !important;
    transform: translateY(-2px) rotateX(-2deg) scaleX(0.97) scaleY(1.05) !important;
}

.irdMail-mail {
    width: 100%;
    padding: 20px;
    color: #122;
    background: url(images/layout/scrolls/scroll_background.png) no-repeat;
    background-size: cover;
    box-shadow: 4px 4px 10px black;
    min-height: 350px;
    box-sizing: border-box;
    text-shadow: none;
}

.irdMail-occ {
    width: 100%;
    padding: 20px;
    background-color: #344;
    border: 1px solid #566;
    box-shadow: 4px 4px 10px black;
    min-height: 350px;
    box-sizing: border-box;
    text-shadow: none;
}


.irdApPtsText {
    display: block;
    margin: 2px 0 -4px 0;
}


.irdActionItem {
    text-align: left;
}


.irdActionIcons {

}

.irdReactionIcon {
    border: 1px solid #899;
    border-radius: 4px;
    margin-left: 4px;
    margin-right: 4px;

    position: relative;
    top: -2px;
    height: 20px;
    width: 20px;

    background: #dfe5ef;
}

.irdActionIcon {
    border: 1px solid #899;
    border-radius: 4px;
    margin-left: -8px;

    position: relative;
    top: 10px;
    height: 20px;
    width: 20px;

    background: #dfe5ef;
    box-shadow: -1px -1px 3px black;
}


.irdProfileNav {
    position: absolute;
    top: 20px;
    left: 50px;
    width: 120px;
}


.irdProfileAvatar {
    border-radius: 8px;
}


.irdProfileBaseData {
    float: right;
    width: 35%;
    margin-right: 2%;
    line-height: 1.3;
    font-size: 10pt;
}

.irdProfile-category {
    margin: 20px 10px;
    opacity: 0.7;
    cursor: pointer;
}

.irdProfile-category:hover {
    opacity: 0.9;
}


.irdNameplate {
    text-align: center;
    align-content: center;
    background: linear-gradient(to bottom, #3472 30%, #1247 95%), url(images/layout/backgrounds/background_clickable.png) top left repeat;
    width: 152px;
    height: 37px;
    color: var(--irdProfile-color1);
    margin-left: -2px;
    margin-bottom: 7px;
    border-bottom: 1px solid #566;
    box-shadow: 0 0 0 2px #122, 0 0 0 3px #455;
    font-size: 12pt;
    overflow: hidden;
    text-shadow: 0 2px 4px black, 0 5px 20px black;
}


.irdItemShelfLabel, .irdBoxLabel {
    flex: 100%;
    margin-top: 0;
    text-align: center;
    padding: 12px;
    box-sizing: border-box;
    line-height: 1.0;
    filter: drop-shadow(0 5px 5px #0007);
    text-shadow: 1px 1px 1px black;
}


.irdItemShelfLabel {
    background: #233;
    border-radius: 12px;
    border: 2px solid darkslategray;
    max-height: 2.7em;
    box-shadow: 0 5px 5px #0007;
}


.irdBoxLabel {
    border-image-source: url(images/layout/borders/headline-border.png);
    border-image-slice: 12 24 12 24 fill;
    border-image-width: 12px 24px 12px 24px;
    border-image-repeat: repeat;
    height: 50px;
}


.irdCC-color1 {
    color: #aab;
}

.irdCC-color2 {
    color: #566;
}

.irdCC-wrap {
    height: 100%;
    width: 100%;
    position: absolute;
    padding: 0 10px;
    min-height: 400px;
    margin: -16px 20px 0 0;
    box-sizing: border-box;
}

.irdCC-link {
    cursor: pointer;
}

.irdCC-link:hover {
    text-shadow: 0 0 2px darkgrey;
}


.irdLootContainer {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 400px;

    height: auto;
    margin: 48px auto 24px auto;
    padding-bottom: 30px;

    border: 6px #122 solid;
    border-radius: 32px;
    border-bottom-color: #050908;
    border-bottom-width: 16px;
    border-right-color: #050908;

    background-image: url(images//layout//backgrounds//background_brown.png);
    box-shadow: 0 0 0 1px #788 inset, 0 0 0 3px #566 inset, 0 0 0 4px #122 inset, 0 8px 10px #011;
}

.irdPopupContent {
    padding: 20px;
    background: url(images/layout/backgrounds/background_bright.png) repeat;
    color: #CCCCCC;

}


.irdTongue-org {
    font-style: normal;
    font-weight: normal;
    font-size: 0.9em;

    opacity: 0.7;
    padding-left: 2px;
    padding-right: 2px;

    margin-right: 2px;

    border-top: 1px dotted;
    border-left: 1px dotted;
    border-right: 1px dotted;
}

.irdTongue-trans {
    margin-left: 2px;
    padding-right: 2px;
    border-left: 1px dotted;
    border-bottom: 1px dotted;
}


.irdTooltip {
    position: absolute;
    z-index: 9000;

    padding: 12px;

    color: #abb;
    background-color: #233e;
    border: 1px solid #455;
    box-shadow: 0 5px 10px black;

    cursor: help;
}

.irdTooltip-title {
    display: inline-block;
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 2px solid #455;

    font-family: 'vinque', serif;
    font-size: 13pt;
}


.irdTooltip-body {
    display: inline-block;
    /*text-align: justify;*/
    font-style: italic;

    font-family: "berenika", sans-serif;
    font-size: 10pt;
}


.irdTooltip-source {
    display: inline-block;
    text-align: right;
    font-style: italic;

    font-family: "berenika", sans-serif;
    font-size: 10pt;

    width: 100%;
    margin-top: 20px;
}


.irdTooltipRef {
    /*text-decoration: underline dotted;*/
    border-bottom: 1px dotted;
    cursor: help;
}


* html body {
    overflow: hidden;
}

* html #footer-wrapper {
    float: left;
    position: relative;
    width: 100%;
    padding-bottom: 10010px;
    margin-bottom: -10000px;
    background: #243433; /* Same as body background */
}

/*** IE6 Fix ***/
* html #left {
    left: 200px;
}

/***************\
|   F O N T S   |
\***************/

/* curvy handwritten font */
@font-face {
    font-family: 'windsong';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/windsong/windsong.ttf');
}

/* wintertal default font */
@font-face {
    font-family: 'vinque';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/vinque/tt/vinque.ttf');
}

/* curvy medieval font */
@font-face {
    font-family: 'eadui';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/eadui/Eadui.ttf');
}

/* handwritten font, a bit hard to read*/
@font-face {
    font-family: 'flaggothic';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/flaggothic/FlagGothic.ttf');
}

/* celtic symbol font */
@font-face {
    font-family: 'futhark';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/futhark-adapted/Futhark-Adapted.ttf');
}

/* handwritten font, easy readable */
@font-face {
    font-family: 'graziano';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/graziano/Graziano.ttf');
}

@font-face {
    font-family: 'berenika';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/klaudia-and-berenika/Berenika/Berenika.ttf');
}


.dialog-header {
    position: relative;
    left: 0;
    width: 100%;
    height: 40px;
    padding-top: 8px;
    box-sizing: border-box;
    /*
    border-left: 2px solid #ccc;
    border-bottom: 4px solid #aaa;
    border-right: 2px solid #ccc;
     */
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;

    background: url(images/layout/backgrounds/location_left.png) left top no-repeat,
    url(images/layout/backgrounds/location_right.png) right top no-repeat,
    url(images/layout/backgrounds/location.png) center top repeat-x;

    text-align: center;
    font-family: 'vinque', serif;
    font-size: 22px;

    box-shadow: 0 10px 20px black;

    z-index: 1000;
}

.dialog-header > p {
    margin: 0;
}

.irdDialog {
    /*filter: drop-shadow(0 10px 30px black);*/
    width: 448px;
    height: 400px;
    position: relative;
    margin: auto;
    padding: 200px;
    top: -240px;
    background: radial-gradient(ellipse at 50% 40%, #203030e0 30%, transparent 70%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.irdDialog-btns {
    bottom: 230px;
    width: 445px;
    margin: 0 auto 0 auto;
    height: 48px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.irdDialog-item {
    position: absolute;
    width: 128px;
    height: 128px;
    bottom: 8px;
    left: 6px;
    filter: drop-shadow(-12px 4px 8px #011);
    background-size: cover;
}


.irdSeparator {
    position: relative;
    width: 100%;
    height: 4px;
    background-color: darkslategray;
    border-bottom: 2px solid #233;
    border-radius: 4px;
    box-shadow: 0 2px 20px #011;
    border-top: 1px solid #566;
}


/* Combat styles... */
.irdCombat-props {
    margin-bottom: 10px;
    background-image: linear-gradient(0deg, #566, transparent);
    border-radius: 3px;
}

.irdCombat-prop {
    font-size: 10pt;
    padding: 6px;
    margin: 2px;
    background-color: #233;
    color: #bba;
    width: 146px;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
}

.irdCombat-opponents {
    position: relative;
    /*height: 194px;*/
    height: 44px;
    margin: 8px 0 0 180px;
    background-color: rgb(30, 50, 50);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 0 10px black;
    display: grid;
    align-items: center;
    grid-template-columns:480px 60px 480px;
    color: #bba;
}

.irdCombat-line {
    position: relative;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(10, 20, 20, 0.5), rgba(30, 50, 50, 1));
    padding: 30px;
    box-shadow: 0 0 10px black;
    min-height: 168px;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0;
}


.irdCombat-ia-texts {
    width: 740px;
    float: right;
    padding: 30px 0 0 20px;
}


.irdCombat-ia-text {
    height: 70px;
    overflow: hidden;
    display: flex;
    align-items: center;
    font-size: 11pt;
}


.irdCombat-reaction-symbol {
    position: relative;
    height: 70px;
    width: 70px;
    /*
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
 */
}

.irdCombat-reaction-symbol > div {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 4px solid #899;
    border-radius: 8px;
    box-shadow: inset 0px -2px 2px #555, inset 0px 2px 2px #aaa;

    background-color: #ccc;
    background-size: contain;
}


.irdCombat-action-symbol {
    position: relative;
    height: 70px;
    width: 70px;
}

.irdCombat-action-symbol > div {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 4px solid #899;
    border-radius: 8px;
    box-shadow: inset 0px -2px 2px #555, inset 0px 2px 2px #aaa;

    background-color: #ccc;
    background-size: contain;

    animation-delay: 0.3s;
    opacity: 0;
}


/* reaction symbols */
.irdCombat-reaction-pa {
    background-image: url('images/layout/combat/PA.png');
}

.irdCombat-reaction-cm {
    background-image: url('images/layout/combat/CM.png');

    animation: ease-in-out irdCombat-animation-slide-horizontal 0.2s;
    animation-fill-mode: forwards;
}

.irdCombat-reaction-bl {
    background-image: url('images/layout/combat/BL.png');

    animation: ease-in-out irdCombat-animation-slide-vertical 0.2s;
    animation-fill-mode: forwards;
}

.irdCombat-reaction-ev {
    background-image: url('images/layout/combat/EV.png');

    animation: ease-in-out irdCombat-animation-slide-horizontal 0.2s;
    animation-fill-mode: forwards;
}

.irdCombat-reaction-sp {
    background-image: url('images/layout/combat/SP.png');

    animation: ease-in-out irdCombat-animation-appear 0.2s;
    animation-fill-mode: forwards;
}


/* action symbols */
.irdCombat-action-pa {
    background-image: url('images/layout/combat/PA.png');
    opacity: 1 !important;
}

.irdCombat-action-es {
    background-image: url('images/layout/combat/ES.png');

    animation: ease-in-out irdCombat-animation-slide-horizontal 0.2s;
    animation-fill-mode: forwards;
}

.irdCombat-action-mv {
    background-image: url('images/layout/combat/MV.png');

    animation: ease-in-out irdCombat-animation-slide-horizontal 0.2s;
    animation-fill-mode: forwards;
}

.irdCombat-action-mv-rev {
    background-image: url('images/layout/combat/MV_rev.png');

    animation: ease-in-out irdCombat-animation-slide-horizontal 0.2s;
    animation-fill-mode: forwards;
}


.irdCombat-action-at {
    background-image: url('images/layout/combat/AT.png');

    animation: ease-in-out irdCombat-animation-impact 0.2s;
    animation-fill-mode: forwards;
}

.irdCombat-action-ats {
    background-image: url('images/layout/combat/ATS.png');

    animation: ease-in-out irdCombat-animation-impact 0.2s;
    animation-fill-mode: forwards;
}

.irdCombat-action-atf {
    background-image: url('images/layout/combat/ATF.png');

    animation: ease-in-out irdCombat-animation-slide-horizontal 0.2s;
    animation-fill-mode: forwards;
}

.irdCombat-action-atm {
    background-image: url('images/layout/combat/ATM.png');

    animation: ease-in-out irdCombat-animation-slide-horizontal 0.2s;
    animation-fill-mode: forwards;
}

.irdCombat-action-ca {
    background-image: url('images/layout/combat/CA.png');

    animation: ease-in-out irdCombat-animation-appear 0.2s;
    animation-fill-mode: forwards;
}

.irdCombat-action-caa {
    background-image: url('images/layout/combat/CAA.png');

    animation: ease-in-out irdCombat-animation-appear 0.2s;
    animation-fill-mode: forwards;
}

.irdCombat-action-cp {
    background-image: url('images/layout/combat/CP.png');

    animation: ease-in-out irdCombat-animation-appear 0.2s;
    animation-fill-mode: forwards;
}

.irdCombat-action-ch {
    background-image: url('images/layout/combat/CH.png');

    animation: ease-in-out irdCombat-animation-appear 0.2s;
    animation-fill-mode: forwards;
}

.irdCombat-action-ph {
    background-image: url('images/layout/combat/PH.png');

    animation: ease-in-out irdCombat-animation-appear 0.2s;
    animation-fill-mode: forwards;
}

.irdCombat-action-rt {
    background-image: url('images/layout/combat/RT.png');

    animation: ease-in-out irdCombat-animation-appear 0.2s;
    animation-fill-mode: forwards;
}


.irdCombat-status-protected {
    box-shadow: #8bf 0px 0px 25px;
}


.irdCombat-damage {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 8px;
    left: -4px;
    top: -4px;
    background-size: cover;
    opacity: 0;

    animation: ease-in-out irdCombat-animation-damage 0.5s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
}

@keyframes irdCombat-animation-damage {
    0% {
        opacity: 0;
        box-shadow: darkred 0 0 0;
    }
    10% {
        opacity: 1;
        box-shadow: darkred 0 0 10px;
    }
    100% {
        opacity: 1;
        box-shadow: darkred 0 0 2px;
    }
}


@keyframes irdCombat-animation-appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


@keyframes irdCombat-animation-slide-horizontal {
    0% {
        margin-left: -100px;
        opacity: 0;
    }
    95% {
        margin-left: 10px;
        opacity: 1;
    }
    100% {
        margin-left: 0;
        opacity: 1;
    }
}


@keyframes irdCombat-animation-slide-vertical {
    0% {
        margin-top: 100px;
        opacity: 0;
    }
    95% {
        margin-top: 10px;
        opacity: 1;
    }
    100% {
        margin-top: 0;
        opacity: 1;
    }
}

@keyframes irdCombat-animation-impact {
    0% {
        width: 140%;
        height: 140%;
        opacity: 0;
    }
    50% {
        width: 120%;
        height: 120%;
        opacity: 1;
        box-shadow: none;
    }
    95% {
        width: 95%;
        height: 95%;
        opacity: 1;
        box-shadow: 0 0 20px whitesmoke;
    }
    100% {
        width: 100%;
        height: 100%;
        opacity: 1;
        box-shadow: inset 0px -2px 2px darkslategrey, inset 0px 2px 2px #aaa;
    }
}


.irdHitpoints-text {
    display: inline-block;
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: #abb;
    font-size: 9pt;
    z-index: 3;
    font-family: 'berenika', sans-serif;
}


.irdStaticMap {
    z-index: 2;
    position: relative;
    top: 90px;
    width: 650px;
    height: 650px;
    margin: auto;
    background-size: cover;
    background-image: url(images/layout/misc/wtMap-ruined.png);
    filter: drop-shadow(0 0 40px black);
}


.irdStaticMap-rplinks {
    position: absolute;
    width: 400px;
    top: 20px;
    left: 20px;
    padding: 10px;
    font-family: 'berenika', sans-serif;
    font-size: 11pt;
    background: #011a;
    color: #ddc;
    opacity: 0.75;
}

.irdStaticMap-rplinks:hover {
    z-index: 3;
    opacity: 1;
}


.irdStaticMap-rplink {
    display: inline-block;
    width: 100%;
    padding: 15px;
    cursor: pointer;
    box-sizing: border-box;
}

.irdStaticMap-rplink:hover {
    background-color: #122a;
    color: white;
}

.irdStaticMap-loclink-big {
    font-family: 'vinque', serif;
    cursor: pointer;
    position: absolute;
    color: #233;
    text-shadow: 0 0 4px white;
    /*line-height: 0.9;*/
}

.irdStaticMap-loclink-big:hover {
    color: #455;
}

.irdStaticMap-loclink {
    font-size: 0.8em;
    font-family: 'vinque', serif;
    cursor: pointer;
    position: absolute;
    color: #233;
    text-shadow: 0 0 4px white;
    line-height: 0.9;
}

.irdStaticMap-loclink:hover {
    color: #455;
}


.terra-canvas-3d {
    width: 1000px;
    height: 600px;
    position: relative;
    background-color: black;
}


.terra-canvas-2d {
    width: 1000px;
    height: 600px;
    position: absolute;
    left: 0;
}


.terra-overlay {
    width: 100%;
    position: absolute;
    top: 0;
}


.terra-interact {
    background-image: linear-gradient(#566, #233);
    border-bottom: 1px solid whitesmoke;
    height: 40px;
    padding: 1px 0 2px 0;
    user-select: none;
}


.terra-interact-extra {
    position: absolute;
    z-index: 2;
    max-height: 500px;
}


.terra-interact.irdDialog-btns {
    display: flex;
}


.terra-interact-btns {
    width: fit-content;
    height: 40px;
    display: flex;
    gap: 2px;
    float: left;
}


.terra-interact-btn {
    width: 40px;
    height: 40px;
    background: #455;
    border: 1px solid #233;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
}

.terra-interact-btn-toggled, .terra-interact-btn:hover {
    background: #566;
}


.terra-interact-list {
    display: flex;
    flex-direction: column;
    max-height: 500px;
    background: #344;
    box-shadow: 0 5px 10px #122;
    color: #ccc;
    overflow-y: auto;
    padding: 4px;
    border-bottom: 4px solid #344;
}


.terra-interact-listitem {
    width: 200px;
    background-color: #455;
    border: 1px solid #233;
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    padding: 8px;
    margin-top: 2px;
}

.terra-interact-listitem:hover {
    background-color: #566;
}


.hexxa-footer {
    width: 100%;
    position: relative;
    min-height: 50px;
}


.hexxa-exit {
    font-size: 11pt;
    font-weight: bold;
    color: #233;
    padding: 6px 12px;
    background-color: #ccc;
    border-radius: 0 4px;
    box-shadow: 0 2px 8px black;
    opacity: 0.75;
    cursor: pointer;
    position: absolute;
    margin: 24px;
    text-shadow: none;
}

.hexxa-exit:hover {
    opacity: 1.0;
}


.irdCommentary-map-toggle {
    font-family: Consolas;
    color: #abba;
    display: block;
    position: absolute;
    top: 4px;
    right: 12px;
    cursor: pointer;
}

.irdCommentary-map-toggle:hover {
    color: #abb;
}

.irdCommentary-teller-toggle {
    font-family: Consolas;
    color: #abba;
    display: block;
    position: absolute;
    top: 4px;
    left: 12px;
    cursor: pointer;
}

.irdCommentary-teller-toggle:hover {
    color: #abb;
}


.irdCommentary-head {
    width: calc(100% - 60px);
    background-color: #233;
    margin-top: 20px;
    margin-left: 60px;
    padding-left: 60px;
    padding-right: 5px;
    box-sizing: border-box;
    border-bottom-right-radius: 4px;
    box-shadow: 1px -1px 0 0 #455, 1px -1px 0 1px #122, 0 -1px 0 2px #677, 0 2px 4px black;
}

.irdCommentary-top {
    margin: 100px auto 8px auto;
    box-shadow: 0 0 4px black;
    width: 95%;
    overflow: hidden;
}

.irdCommentary-header {
    position: relative;
    margin-bottom: 4px;
    text-align: center;
    padding: 4px;
    background-color: #233;
    border-radius: 4px;
    border-top: 3px double #566;
    border-bottom: 2px solid #122;
}


/* Used for worshipping, selecting the type of pray */
.irdLightButton {
    background-color: rgba(100, 110, 110, 0.2);
    text-align: center;
    font-family: "berenika", sans-serif;
    font-size: small;
    padding: 8px;
    margin: 8px;
    cursor: pointer;

    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    min-height: 36px;

    border-radius: 8px;

    border-top: 2px solid #344;
    border-left: 2px solid #455;
    border-bottom: 2px solid #122;
    border-right: 2px solid #122;

    /*box-shadow: 1px 1px 4px #011;*/
    box-sizing: border-box;
    text-shadow: 0px 1px 1px #011;
}

.irdLightButton:hover {
    border-top: 2px solid #455;
    border-left: 2px solid #566;
    border-bottom: 2px solid #122;
    border-right: 2px solid #122;

    font-weight: normal !important;
    background-color: rgba(100, 110, 110, 0.4) !important;
}

.ird-skill-mainDiv {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.ird-skill-heading {
    font-family: Vinque, sans-serif;
    font-size: x-large;
    font-weight: bold;
    text-align: center;

}

.ird-skill-navBar {
    text-align: center;
    margin: 20px auto auto;
}

.ird-skill-navBar-item {
    display: inline-block;
    cursor: pointer;
    height: 60px;
    padding-left: 10px;
    padding-right: 10px;
}

.ird-skill-navBar-item:hover {
    transform: scale(110%);
}

.ird-skill-navBar-item img {
    height: 50px;
    width: 50px;
}

.ird-skill-navBar-item-caption {
    text-align: center;
    /*width: 120px*/
}

/* fixed positioning is viewport-relative, but the body is centered and capped at
   1703px. right/width are therefore clamped so the box stays inside the 170px strip
   that #containerDiv's padding-right reserves for it (outer box width 150+20+10=180px,
   right edge ~30px from the body's outer edge) instead of drifting off to the viewport
   edge or overlapping the skill tables' action column on wide screens.
   (50vw - 821px equals 7vw at a ~1910px viewport, i.e. behaviour below that is unchanged) */
.ird-skill-xp-overview {
    position: fixed;
    right: max(7vw, calc(50vw - 821px));
    top: 343px;

    border: 5px ridge #344;
    border-radius: 5px;

    width: min(10vw, 150px);
    min-width: 150px;
    padding: 10px;

    background: rgba(0, 0, 0, 0.03);
    box-shadow: var(--box-shadow);

    transition: border-color 0.3s;
}

/* with unsaved changes the box gets a green accent so the required save is not missed */
.ird-skill-xp-overview.has-changes {
    border-color: #4a6b4a;
}

.ird-skill-xp-overview.has-changes input.irdButton {
    box-shadow: 0 0 6px 1px rgba(143, 208, 143, 0.6);
}

.ird-xp-changes-badge {
    font-size: 11px;
    font-family: var(--font-family-default, sans-serif);
    white-space: nowrap;

    color: #8fd08f;
    border: 1px solid #4a6b4a;
    border-radius: 10px;
    padding: 0 6px;
    margin-left: 6px;
    vertical-align: middle;
}

/* result line of the last save below the button (set by setSaveStatus() in skillsUI.js) */
.ird-xp-save-status {
    margin-top: 8px;
    font-size: 11px;
    font-family: var(--font-family-default, sans-serif);
    text-align: center;
    line-height: 1.3;
    color: #bbb;
}

.ird-xp-save-status.is-ok {
    color: #8fd08f;
}

.ird-xp-save-status.is-error {
    color: #ff8f8f;
}

/* "Danach" row: remaining xp after saving the staged changes */
.ird-skill-xp-overview .ird-xp-after-row td {
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
    padding-top: 4px;
}

/* on narrow viewports the fixed box would overlap the tables: fall back to static flow */
@media (max-width: 1000px) {
    .ird-skill-xp-overview {
        position: static;
        width: fit-content;
        margin: 20px auto;
    }
}

.ird-skill-xp-overview .header {
    color: var(--text-color-skills-default);
    font-size: large;
    text-shadow: var(--text-shadow);
}

.ird-skill-xp-overview .caption {
    font-size: small;
}

.ird-skill-xp-overview .value {
    color: var(--text-color-skills-highlight);
    font-size: small;
}

.ird-skill-xp-overview .btnWrapper {
    margin-top: 15px;
}

.ird-skill-xp-overview hr {
    width: min(9.5vw, 142px);
}

.ird-skill-xp-overview input {
    position: relative;
    margin: 0 auto;
    display: block;

    cursor: pointer;
}

.ird-skill-xp-overview input.ird-xp-discard-btn {
    margin-top: 6px;
    font-size: smaller;
}

/* both buttons are disabled while there is nothing staged (and while saving) */
.ird-skill-xp-overview input:disabled {
    opacity: 0.45;
    cursor: default;
    box-shadow: none;
}

/* capped: the body is limited to 1703px, so a pure 55vw would push the actions
   column out of view on wide (>2200px) screens. The additional 1080px cap keeps
   the table clear of the fixed xp overview box, which floats over the right-hand
   part of #subContentDiv on viewports wider than ~1900px. */
.ird-skill-tableWrapper {
    margin: auto;
    width: min(55vw, 100%, 1080px);
}

.ird-skill-table {
    display: block;
}

.ird-skill-cat-table {
    padding-left: 25px
}

.ird-skill-subCat-table {
    width: 100%;
    margin-top: 30px;

    border: 5px ridge #344;
    border-radius: 5px;
    border-spacing: 0;

    padding: 5px;

    background: rgba(0, 0, 0, 0.03);
    box-shadow: var(--box-shadow);
}

.ird-skill-table > .ird-skill-subCat-table:last-child {
    margin-bottom: 30px;
}

/* sub category title in the game's heading font with a wheat tone */
.ird-skill-subCat-table-column-name {
    text-align: left;
    font-family: "vinque", "berenika", serif;
    font-size: larger;
    font-weight: normal;
    color: wheat;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* secondary column headers: quiet small caps.
   The cell content below is left-packed (fixed 72px label + track, resp. buttons + chip),
   so centering across the full column width would float the caption far right of the
   content. Instead the caption is left-aligned and padded to sit over the visual centre
   of the typical content block (~240px for level tracks, ~130px for the actions). */
.ird-skill-subCat-table-column-level {
    width: 40%;
    text-align: left;
    padding-left: 90px;
    font-variant: small-caps;
    font-weight: normal;
    font-size: smaller;
    letter-spacing: 2px;
    color: #8a9a9a;
}

.ird-skill-subCat-table-column-costs {
    width: 15%;
    text-align: left;
    padding-left: 38px;
    font-variant: small-caps;
    font-weight: normal;
    font-size: smaller;
    letter-spacing: 2px;
    color: #8a9a9a;
}

/* header separator: a gold line fading out to the right, drawn as the header row's
   bottom border (border-image, since a plain border cannot carry a gradient) */
.ird-skill-subCat-table .ird-skill-head th {
    padding-bottom: 8px;
    border-bottom: 1px solid #a8894f;
    border-image: linear-gradient(90deg, #a8894f, rgba(168, 137, 79, 0.15)) 1;
}

/* Skill rows: hairline separators plus a subtle hover highlight to show which
   row is currently being interacted with. Maxed-out rows are dimmed. */
.ird-skill-row td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 4px;
}

tr.ird-skill-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

tr.ird-skill-row.is-maxed {
    opacity: 0.75;
}

/* name column (skill, attribute or, indented, a qualitative value) */
.ird-skill-name-cell {
    width: 50%;
    white-space: nowrap;
}

.ird-skill-name-cell.is-indented {
    padding-left: 20px;
}

/* header row of a qualitative skill above its value rows */
.ird-skill-group-cell {
    white-space: nowrap;
    font-weight: bold;
}

/* italic notes inside the tables ("no value learned yet", "no skills found") */
.ird-skill-hint-cell {
    font-style: italic;
}

.ird-skill-hint-cell.is-indented {
    padding-left: 20px;
}

/* actions cell of a row that cannot be trained (character properties) */
.ird-skill-frozen {
    color: #888;
    font-style: italic;
}

/* level cell: the label comes first with a fixed width, followed by the track/bar.
   This keeps both the labels and the track starts vertically aligned across rows,
   independent of how many dots a track has. */
.ird-skill-level-cell .ird-skill-level-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.ird-skill-level-cell.has-help {
    cursor: help;
}

/* the level label turns wheat once the (staged) level reaches the maximum;
   toggled by refreshLevelRowUi() in skillsUI.js */
.ird-skill-level-inner.is-maxed {
    color: wheat;
}

/* fixed pixel width: the game font has proportional digits, so an em-based
   min-width lets wide labels (e.g. "50/110") grow the box and shift the track */
.ird-skill-level-inner .ird-level-label {
    flex: 0 0 72px;
    text-align: right;
}

.ird-skill-actions {
    white-space: nowrap;
}

/* round +/- buttons replacing the old 15px png icons.
   Styled to match the glossy level dots: raised orb with a light edge on top,
   pressed-in look on :active, sunken flat look when disabled. */
.ird-skill-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-sizing: border-box;

    background: radial-gradient(circle at 35% 30%, #3d4d4d 0%, #243030 60%, #182222 100%);
    border: 1px solid rgba(190, 200, 190, 0.45);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 2px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5);
    color: inherit;

    font: inherit;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    vertical-align: middle;
    cursor: pointer;

    transition: border-color 0.2s, color 0.2s, opacity 0.2s, box-shadow 0.2s;
}

.ird-skill-btn:hover:not(:disabled) {
    border-color: wheat;
    color: wheat;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), inset 0 -1px 2px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 5px rgba(245, 222, 179, 0.4);
}

/* pressed-in: inverted gradient, deep inset shadow, nudged down 1px */
.ird-skill-btn:active:not(:disabled) {
    background: radial-gradient(circle at 50% 60%, #182222 0%, #243030 100%);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6);
    transform: translateY(1px);
}

.ird-skill-btn:disabled {
    opacity: 0.3;
    background: #1c2626;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
    cursor: default;
}

/* an enabled decrease button implies an undoable (unsaved) increase -> green accent */
.ird-skill-btn-decr:not(:disabled) {
    border-color: #8fd08f;
    color: #a9dba9;
}

/* pill-shaped "+ Neu" button of qualitative skills (e.g. languages): same material
   as the round +/- buttons, sits in the actions column of the skill's header row */
.ird-skill-btn-new {
    width: auto;
    border-radius: 11px;
    padding: 0 10px;
    font-size: smaller;
    font-weight: normal;
}

/* xp cost chip: slightly domed plaque (vertical gradient + inner light) with the
   cost number highlighted in wheat; red only signals "not affordable", not the cost itself */
.ird-xp-chip {
    display: inline-block;
    font-size: smaller;
    white-space: nowrap;

    border: 1px solid #6b6148;
    border-radius: 10px;
    padding: 0 8px;
    margin-left: 4px;
    vertical-align: middle;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.28));
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.45);

    transition: color 0.2s, border-color 0.2s;
}

/* the first inner span holds the cost number (see SkillTable.class.php) */
.ird-xp-chip > span:first-child {
    color: wheat;
}

.ird-xp-chip.is-unaffordable {
    color: #ff8f8f;
    border-color: #8a4a4a;
}

.ird-xp-chip.is-unaffordable > span:first-child {
    color: inherit;
}

/* badge for skills that reached their maximum level: a golden "seal" */
.ird-skill-max-badge {
    display: inline-block;
    font-size: smaller;
    white-space: nowrap;

    color: #3a2c10;
    border: 1px solid #a8894f;
    border-radius: 10px;
    padding: 0 9px;
    margin-left: 4px;
    vertical-align: middle;

    background: linear-gradient(180deg, #ffeccb, #d9b97e 55%, #b28d4d);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* badge in the actions column naming an unmet learning condition (title holds the
   details, set by updateIncreaseGates() in skillsUI.js); is-locked = identity block */
.ird-skill-req-badge {
    display: inline-block;
    font-size: 11px;
    white-space: nowrap;
    cursor: help;

    color: #d0b48f;
    border: 1px solid #6b5a3a;
    border-radius: 10px;
    padding: 0 6px;
    margin-left: 4px;
    vertical-align: middle;
}

.ird-skill-req-badge.is-locked {
    color: #b0a8a0;
    border-color: #5a5550;
}

/* value picker entries whose learning conditions are unmet (title names the condition) */
.irdButton.is-blocked {
    opacity: 0.5;
    cursor: help;
}

/* badge next to the level label showing staged (unsaved) level-ups, e.g. "+1" */
.ird-skill-pending-badge {
    font-size: 11px;
    white-space: nowrap;

    color: #8fd08f;
    border: 1px solid #4a6b4a;
    border-radius: 10px;
    padding: 0 6px;
}

/* Graphical skill/value level track: dots per reachable level, connected by lines.
   Lit dots/lines mark learned levels. Bonus-only levels use a different colour. */
.ird-level-track {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* "glass marble" look: unlit dots are sunken sockets (inset shadow), lit dots
   are glossy orbs (radial gradient + specular highlight via ::after).
   The 3D effects never change the 11px geometry, so lit and unlit dots stay
   the same size and track starts remain visually aligned. */
.ird-level-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    border: 1px solid rgba(108, 117, 125, 0.9);
    background: radial-gradient(circle at 50% 40%, #1d2a2a 0%, #141e1e 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    flex: 0 0 auto;
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

/* specular highlight, only visible on lit dots */
.ird-level-dot::after {
    content: "";
    position: absolute;
    left: 22%;
    top: 14%;
    width: 32%;
    height: 26%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    filter: blur(0.5px);
    opacity: 0;
    transition: opacity 0.25s;
}

.ird-level-dot.is-lit::after {
    opacity: 1;
}

.ird-level-line {
    width: 10px;
    height: 2px;
    background: #6c757d;
    flex: 0 0 auto;
    transition: background 0.25s, box-shadow 0.25s;
}

/* standard (non-bonus) levels light up in the accent colour.
   The glow is kept tight (small blur, no spread): a wide glow makes lit dots
   look bigger than unlit ones, which reads as misaligned track starts. */
.ird-level-dot.is-base.is-lit {
    background: radial-gradient(circle at 35% 30%, #fff6dd 0%, wheat 40%, #c9a25e 80%, #96733a 100%);
    border-color: rgba(230, 200, 140, 0.9);
    box-shadow: inset 0 -1px 2px rgba(90, 60, 20, 0.45), 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 3px rgba(245, 222, 179, 0.55);
}

.ird-level-line.is-lit {
    background: linear-gradient(180deg, #e9cf9d, #b28d4d);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* bonus-only levels (above the standard max) use a distinct colour */
.ird-level-dot.is-bonus {
    border-color: #9fd3ff;
}

.ird-level-dot.is-bonus.is-lit {
    background: radial-gradient(circle at 35% 30%, #f0f9ff 0%, #9fd3ff 45%, #5f9fd0 85%, #3f7aa8 100%);
    border-color: #9fd3ff;
    box-shadow: inset 0 -1px 2px rgba(20, 50, 80, 0.45), 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 3px rgba(159, 211, 255, 0.55);
}

.ird-level-line.is-bonus.is-lit {
    background: linear-gradient(180deg, #b3dbff, #5b93c4);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* start bonus levels (granted by race/subrace/class/attitude, see Skill::getLevelBonus):
   always lit, shown in a distinct violet so players can tell the granted base apart
   from purchased levels. Must come after the is-base/is-bonus rules to win the
   specificity tie. */
.ird-level-dot.is-start {
    border-color: rgba(200, 165, 255, 0.9);
}

.ird-level-dot.is-start.is-lit {
    background: radial-gradient(circle at 35% 30%, #f6efff 0%, #cfaef5 45%, #9a72c9 85%, #6f4d99 100%);
    border-color: rgba(200, 165, 255, 0.9);
    box-shadow: inset 0 -1px 2px rgba(50, 25, 80, 0.45), 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 3px rgba(207, 174, 245, 0.55);
}

.ird-level-line.is-start.is-lit {
    background: linear-gradient(180deg, #d9c2f2, #8a63b5);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* staged (unsaved) levels light up green until they are saved.
   Must come after the is-base/is-bonus rules to win the specificity tie. */
.ird-level-dot.is-lit.is-pending {
    background: radial-gradient(circle at 35% 30%, #e7ffe7 0%, #8fd08f 45%, #5da05d 85%, #3f7a3f 100%);
    border-color: rgba(150, 215, 150, 0.9);
    box-shadow: inset 0 -1px 2px rgba(20, 60, 20, 0.45), 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 3px rgba(143, 208, 143, 0.55);
}

.ird-level-line.is-lit.is-pending {
    background: linear-gradient(180deg, #a8dba8, #5f9c5f);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* short pulse on a freshly lit dot (applied by renderLevelTrack() in skillsUI.js).
   Pure transform/glow: the layout box stays 11px, so neighbours do not shift. */
@keyframes ird-level-pop {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.5);
        box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.3), 0 0 8px 1px rgba(255, 250, 220, 0.9);
    }
    100% {
        transform: scale(1);
    }
}

.ird-level-dot.is-pop {
    animation: ird-level-pop 0.4s ease-out;
    z-index: 1;
}

.ird-level-label {
    font-size: smaller;
    white-space: nowrap;
}

/* the first inner span holds the current level: emphasize it in wheat.
   Maxed rows already set wheat on the whole cell via inline style, so this
   simply blends in there. */
.ird-level-label > span:first-child {
    color: wheat;
}

/* Attribute level bar: a continuous bar (attributes reach far beyond the ~12 of skills,
   so per-level dots are impractical). The first 80% of the bar is the wheat "normal" zone
   up to the character's soft maximum; the last 20% is the light-blue "expensive" zone above
   the maximum. The gold marker at 80% denotes the maximum. */
/* trough styled like the unlit level dots: sunken groove with an inset shadow */
.ird-attr-bar {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 9px;
    border-radius: 5px;
    background: linear-gradient(180deg, #141e1e, #1d2a2a);
    border: 1px solid rgba(108, 117, 125, 0.9);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    vertical-align: middle;
    overflow: hidden;
}

/* fills styled like the lit level dots: glossy vertical gradient, light on top */
.ird-attr-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(180deg, #fff6dd 0%, wheat 45%, #c9a25e 85%, #a8894f 100%);
    box-shadow: inset 0 -1px 1px rgba(90, 60, 20, 0.45), 0 0 4px rgba(245, 222, 179, 0.5);
    transition: width 0.3s ease;
}

.ird-attr-bar-over {
    position: absolute;
    left: 80%;
    top: 0;
    height: 100%;
    background: linear-gradient(180deg, #f0f9ff 0%, #9fd3ff 45%, #5f9fd0 100%);
    box-shadow: inset 0 -1px 1px rgba(20, 50, 80, 0.45), 0 0 4px rgba(159, 211, 255, 0.5);
    transition: width 0.3s ease;
}

/* soft-cap marker: thin golden pin with a light edge, matching the gold seals */
.ird-attr-bar-marker {
    position: absolute;
    left: 80%;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, #ffeccb, #ffd700 40%, #b28d4d);
    box-shadow: 0 0 3px rgba(255, 215, 0, 0.7);
    opacity: 0.95;
}

.ird-skill-action-link:hover {
    /*color: white;*/
}

.ird-skill-dialog-title {
    font-weight: bold;
    font-size: larger;
    padding-bottom: 5px;
    align-self: center;
}

.ird-skill-dialog-description {
    border: 1px #455 solid;
    border-radius: 5px;
    padding: 10px;
    width: 60vw;
    align-self: center;
}

.ird-skill-dialog-description div {
    padding-bottom: 5px;
}

.ird-skill-dialog-caption {
    margin: 15px 0 5px 0;
    color: wheat;
}

.ird-skill-dialog-select {

}

/* ===== Charaktererstellung: Stepper (CharacterCreation.class.php) ===== */

.irdCC-stepper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid #455;
}

.irdCC-step {
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 12px;
    color: #9ab;
    font-size: 10pt;
    white-space: nowrap;
    font-family: "vinque", "berenika", serif;
}

.irdCC-step:hover {
    background: #233;
    color: #dde;
}

.irdCC-step--done {
    color: #7c9;
}

.irdCC-step--current {
    background: #344;
    color: #fff;
    box-shadow: 0 0 4px black;
}

.irdCC-stepMark {
    display: inline-block;
    margin-right: 5px;
    font-size: 9pt;
}

/* ===== Charaktererstellung: Auswahlkarten (Spezies / Volk) ===== */

.irdCC-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 16px 0;
}

.irdCC-card {
    cursor: pointer;
    padding: 10px 18px;
    min-width: 110px;
    text-align: center;
    box-sizing: border-box;

    background: #233;
    border: 1px solid #455;
    border-radius: 8px;

    font-family: "vinque", serif;
    font-size: 1.1em;
    color: #bcd;

    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.irdCC-card:hover {
    border-color: #7aa;
    color: #dee;
}

.irdCC-card--selected {
    background: #355;
    border-color: #8cc;
    color: #fff;
    box-shadow: 0 0 6px rgba(68, 136, 136, 0.5);
}

/* ===== Balancing overview of the skill editor (editorSkillsBalancing.php) =====
   Bar comparison of the summed skill bonuses per race/subrace/class/attitude.
   Visual language follows the attribute bar (.ird-attr-bar): wheat fill on a dark
   track, light blue for the "special" case (here: negative sums / mali). */

.ird-bal-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin: 6px 0;
}

.ird-bal-label {
    color: #8a9;
    font-size: smaller;
}

.ird-bal-tab {
    padding: 3px 12px;
    border: 1px solid #6c757d;
    cursor: pointer;
    user-select: none;
    font-size: smaller;
}

.ird-bal-tab:hover {
    color: wheat;
    border-color: wheat;
}

.ird-bal-tab-active {
    font-weight: bold;
    color: wheat;
    border-color: wheat;
    cursor: default;
}

.ird-bal-toggle {
    cursor: pointer;
    user-select: none;
    font-size: smaller;
    margin-right: 14px;
}

.ird-bal-toggle:hover {
    color: wheat;
}

.ird-bal-hint {
    border: 1px solid #a3541f;
    background: rgba(163, 84, 31, 0.15);
    color: #e8a86b;
    padding: 6px 10px;
    margin: 8px 0;
}

.ird-bal-details > summary {
    list-style: none; /* the whole row is the click target, no default marker */
}

.ird-bal-details > summary::-webkit-details-marker {
    display: none;
}

.ird-bal-row {
    display: grid;
    grid-template-columns: 170px 1fr 230px;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-bottom: 1px solid #37414b;
    cursor: pointer;
}

.ird-bal-row:hover {
    background: rgba(245, 222, 179, 0.06);
}

.ird-bal-group {
    color: #8a9;
    font-size: smaller;
}

.ird-bal-track {
    position: relative;
    display: inline-block;
    height: 12px;
    border-radius: 5px;
    background: #2b2b2b;
    border: 1px solid #6c757d;
    overflow: hidden;
}

.ird-bal-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: wheat;
    box-shadow: 0 0 5px 0 wheat;
    transition: width 0.3s ease;
}

.ird-bal-fill-neg {
    background: #9fd3ff;
    box-shadow: 0 0 5px 0 #9fd3ff;
}

.ird-bal-median {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 0;
    border-left: 2px dashed #adb5bd;
    opacity: 0.8;
}

.ird-bal-value {
    white-space: nowrap;
    font-size: smaller;
}

.ird-bal-value b {
    color: wheat;
    font-weight: normal;
    font-size: larger;
}

.ird-bal-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    font-size: smaller;
    border: 1px solid;
    border-radius: 4px;
}

.ird-bal-badge-hi {
    color: #e8927c;
    border-color: #e8927c;
}

.ird-bal-badge-lo {
    color: #9fd3ff;
    border-color: #9fd3ff;
}

.ird-bal-drill {
    border: 1px solid #455;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.25);
    margin: 4px 0 10px 0;
    padding: 10px 12px;
}

.ird-bal-stack {
    display: flex;
    height: 16px;
    border: 1px solid #455;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
}

.ird-bal-stack > span {
    height: 100%;
}

.ird-bal-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: smaller;
    color: #adb5bd;
    margin-bottom: 10px;
}

.ird-bal-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    vertical-align: -1px;
}

.ird-bal-table {
    border-collapse: collapse;
    width: 100%;
    font-size: smaller;
}

.ird-bal-table th {
    text-align: left;
    color: #8a9;
    font-weight: normal;
    border-bottom: 1px solid #455;
    padding: 3px 8px;
}

.ird-bal-table td {
    padding: 3px 8px;
    border-bottom: 1px solid #37414b;
}

.ird-bal-num {
    text-align: right;
}

.ird-bal-clipped {
    color: #e8927c;
}

.ird-bal-editlink {
    cursor: pointer;
    text-decoration: underline;
    color: #FFFFFF;
}

.ird-bal-footnote {
    color: #8a9;
    font-size: smaller;
    margin-top: 10px;
}


/*** Würfelpoker (src/interactions/dicePoker.php, js/dicePoker.js) ***/

.dp-table {
    max-width: 780px;
    margin: 20px auto 10px auto;
    border: 1px solid #1d1409;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 0 0 2px #0d0a05, inset 0 0 90px rgba(0, 0, 0, 0.5);
    background:
        radial-gradient(ellipse 90% 130% at 50% 50%, rgba(255, 190, 90, 0.07), transparent 70%),
        repeating-linear-gradient(90deg, #4a331c 0px, #52381f 55px, #47301a 110px, #503620 165px, #432d18 220px),
        #52381f;
    position: relative;
    overflow: hidden;
}

.dp-seat {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 26px;
}

.dp-seat--npc {
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}

.dp-seat--me {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dp-medallion {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex: none;
    background: radial-gradient(circle at 35% 28%, #3d4a4c, #1a2224 70%);
    border: 2px solid #9a7f3e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'vinque', serif;
    font-size: 24px;
    color: #d9b45a;
    text-shadow: 0 2px 4px #000;
}

.dp-medallion--me {
    background: radial-gradient(circle at 35% 28%, #4a3d2c, #221a10 70%);
}

.dp-who {
    min-width: 130px;
}

.dp-name {
    font-family: 'vinque', serif;
    font-size: 16px;
    color: #e9dcb8;
}

.dp-role {
    font-style: italic;
    font-size: 11.5px;
    color: #9a968a;
}

.dp-purse {
    margin-top: 5px;
    font-size: 12.5px;
    color: #d9b45a;
    white-space: nowrap;
}

.dp-handzone {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: center;
}

.dp-dice {
    display: flex;
    gap: 16px;
    min-height: 66px;
    align-items: center;
}

.dp-handlabel {
    font-family: 'vinque', serif;
    letter-spacing: 0.08em;
    font-size: 13px;
    color: #9a968a;
    min-height: 18px;
    transition: color 0.3s;
}

.dp-handlabel.dp-lit {
    color: #d9b45a;
    text-shadow: 0 0 9px rgba(217, 180, 90, 0.35);
}

/* 3d bone dice */
.dp-die {
    --dp-size: 56px;
    width: var(--dp-size);
    height: var(--dp-size);
    perspective: 300px;
    position: relative;
    transition: transform 0.2s ease;
}

.dp-seat--me .dp-die {
    --dp-size: 64px;
}

.dp-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-18deg) rotateY(24deg);
    transition: transform 1.15s cubic-bezier(0.18, 0.75, 0.22, 1);
}

.dp-face {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 13%;
    background: linear-gradient(145deg, #f4ead0 0%, #e9dcb8 55%, #cdb887 100%);
    border: 1px solid #a8925e;
    box-shadow: inset 0 0 9px rgba(120, 95, 45, 0.35), inset 0 0 2px rgba(255, 255, 255, 0.7);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 14%;
    box-sizing: border-box;
    backface-visibility: hidden;
}

.dp-f1 { transform: translateZ(calc(var(--dp-size) / 2)); }
.dp-f6 { transform: rotateY(180deg) translateZ(calc(var(--dp-size) / 2)); }
.dp-f3 { transform: rotateY(90deg) translateZ(calc(var(--dp-size) / 2)); }
.dp-f4 { transform: rotateY(-90deg) translateZ(calc(var(--dp-size) / 2)); }
.dp-f5 { transform: rotateX(90deg) translateZ(calc(var(--dp-size) / 2)); }
.dp-f2 { transform: rotateX(-90deg) translateZ(calc(var(--dp-size) / 2)); }

.dp-pip {
    width: 68%;
    height: 68%;
    align-self: center;
    justify-self: center;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #6b5233, #241a10 72%);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.35);
}

.dp-c1 { grid-area: 1 / 1; }
.dp-c2 { grid-area: 1 / 2; }
.dp-c3 { grid-area: 1 / 3; }
.dp-c4 { grid-area: 2 / 1; }
.dp-c5 { grid-area: 2 / 2; }
.dp-c6 { grid-area: 2 / 3; }
.dp-c7 { grid-area: 3 / 1; }
.dp-c8 { grid-area: 3 / 2; }
.dp-c9 { grid-area: 3 / 3; }

.dp-die.dp-hop {
    animation: dp-hop 0.95s cubic-bezier(0.3, 0.6, 0.4, 1);
}

@keyframes dp-hop {
    0%   { transform: translateY(0); }
    18%  { transform: translateY(-30px) rotate(-5deg); }
    42%  { transform: translateY(0) rotate(2deg); }
    58%  { transform: translateY(-11px); }
    74%  { transform: translateY(0); }
    86%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

.dp-die.dp-clickable {
    cursor: pointer;
}

/* waiting for input: pulsing gold ring around every selectable die */
.dp-die.dp-clickable::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 1px solid rgba(217, 180, 90, 0.4);
    border-radius: 9px;
    animation: dp-await 1.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes dp-await {
    0%, 100% {
        box-shadow: 0 0 4px rgba(217, 180, 90, 0.15);
        border-color: rgba(217, 180, 90, 0.35);
    }
    50% {
        box-shadow: 0 0 14px rgba(217, 180, 90, 0.55);
        border-color: rgba(217, 180, 90, 0.9);
    }
}

.dp-die.dp-clickable:hover .dp-cube {
    filter: brightness(1.12);
}

.dp-die.dp-clickable:hover::before {
    animation: none;
    border-color: #d9b45a;
    box-shadow: 0 0 14px rgba(217, 180, 90, 0.55);
}

.dp-hint {
    text-align: center;
    font-style: italic;
    color: #d9b45a;
    font-size: 13px;
    padding: 10px 26px 0 26px;
    animation: dp-hint-pulse 1.6s ease-in-out infinite;
}

@keyframes dp-hint-pulse {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}

.dp-die.dp-mark {
    transform: translateY(-10px);
}

.dp-die.dp-mark::after {
    content: 'Neuwurf';
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: #c0622f;
    white-space: nowrap;
}

.dp-die.dp-mark::before,
.dp-die.dp-mark:hover::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 1px solid rgba(192, 98, 47, 0.8);
    border-radius: 9px;
    box-shadow: 0 0 10px rgba(192, 98, 47, 0.35);
    animation: none;
    pointer-events: none;
}

/* pot band */
.dp-potband {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22));
    border-top: 1px solid rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    min-height: 40px;
}

.dp-pot {
    font-family: 'vinque', serif;
    letter-spacing: 0.06em;
    font-size: 14px;
    color: #e9dcb8;
    white-space: nowrap;
}

.dp-banner {
    font-style: italic;
    font-size: 13.5px;
    color: #d8d4c4;
    max-width: 56ch;
    text-align: center;
}

.dp-banner b {
    color: #d9b45a;
    font-style: normal;
}

/* actions */
.dp-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 14px 26px 20px 26px;
    min-height: 24px;
}

.dp-btn {
    font-family: 'vinque', serif;
    letter-spacing: 0.08em;
    font-size: 13px;
    color: #d9b45a;
    background: linear-gradient(#3a2c1a, #241a0e);
    border: 1px solid #6f5827;
    border-radius: 3px;
    padding: 7px 16px;
    cursor: pointer;
    display: inline-block;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dp-btn:hover {
    border-color: #d9b45a;
    box-shadow: 0 0 12px rgba(217, 180, 90, 0.22), inset 0 0 7px rgba(217, 180, 90, 0.08);
}

.dp-btn--ember {
    color: #eec5a8;
    border-color: #8a4b22;
    background: linear-gradient(#4a2a16, #2c180b);
}

.dp-btn--ember:hover {
    border-color: #c0622f;
    box-shadow: 0 0 12px rgba(192, 98, 47, 0.28);
}

.dp-btn--disabled {
    opacity: 0.4;
    cursor: default;
}

.dp-btn--disabled:hover {
    border-color: #6f5827;
    box-shadow: none;
}

/* stake choice */
.dp-stakes {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin: 18px auto;
}

.dp-stake {
    font-family: 'vinque', serif;
    font-size: 15px;
    color: #241a10;
    width: 52px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    border-radius: 50%;
    border: 2px solid #66451a;
    background: radial-gradient(circle at 35% 30%, #f4d98b, #c79a3c 60%, #8a6420);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
    display: inline-block;
}

.dp-stake:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 2px #d9b45a, 0 5px 10px rgba(0, 0, 0, 0.6);
}

.dp-stake--disabled {
    opacity: 0.35;
    cursor: default;
}

.dp-stake--disabled:hover {
    transform: none;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.dp-stakes-label {
    font-style: italic;
    color: #9a968a;
    font-size: 13px;
    margin-left: 6px;
}

/* rules panel */
.dp-rules-toggle {
    text-align: center;
    margin: 6px auto 12px auto;
}

.dp-rules {
    display: none;
    position: relative;
    max-width: 640px;
    margin: 12px auto 22px auto;
    background:
        linear-gradient(160deg, rgba(120, 95, 45, 0.16), transparent 40%),
        linear-gradient(#efe3c0, #e2d1a4);
    color: #241a10;
    border: 1px solid #8a6f3a;
    border-radius: 6px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    padding: 22px 26px 28px 26px;
    box-sizing: border-box;
    text-align: left;
}

.dp-rules.dp-open {
    display: block;
    animation: dp-rules-in 0.25s ease-out;
}

@keyframes dp-rules-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

.dp-rules h2 {
    font-family: 'vinque', serif;
    font-size: 20px;
    border-bottom: 2px solid rgba(60, 42, 16, 0.4);
    padding-bottom: 8px;
    margin: 0 0 14px 0;
    color: #3c2a10;
}

.dp-rules h3 {
    font-family: 'vinque', serif;
    font-size: 15px;
    margin: 20px 0 6px 0;
    color: #4a3410;
}

.dp-rules p,
.dp-rules li {
    font-size: 13px;
    line-height: 1.5;
    color: #241a10;
}

.dp-rules ol {
    padding-left: 20px;
    margin: 6px 0;
}

.dp-rules li {
    margin-bottom: 5px;
}

.dp-rules-quote {
    font-style: italic;
    color: #6b4a14;
}

.dp-rules-close {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    border: 1px solid rgba(60, 42, 16, 0.4);
    border-radius: 3px;
    width: 28px;
    height: 28px;
    color: #3c2a10;
    cursor: pointer;
}

.dp-rules-close:hover {
    background: rgba(60, 42, 16, 0.12);
}

.dp-rules-ranks {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}

.dp-rules-ranks td {
    padding: 5px 3px;
    border-bottom: 1px solid rgba(60, 42, 16, 0.22);
    font-size: 12.5px;
    vertical-align: middle;
    color: #241a10;
}

.dp-rules-ranks td:first-child {
    font-family: 'vinque', serif;
    white-space: nowrap;
    padding-right: 10px;
}

.dp-minirow {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.dp-mini {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: linear-gradient(145deg, #f4ead0, #cdb887);
    border: 1px solid #a8925e;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 3px;
    box-sizing: border-box;
    box-shadow: inset 0 0 3px rgba(120, 95, 45, 0.4);
}

.dp-mini .dp-pip {
    width: 80%;
    height: 80%;
    box-shadow: none;
}

.dp-mini--dim {
    opacity: 0.38;
}

@media (prefers-reduced-motion: reduce) {
    .dp-cube {
        transition-duration: 0.01s;
    }

    .dp-die.dp-hop,
    .dp-die.dp-clickable::before,
    .dp-hint,
    .dp-rules.dp-open {
        animation: none;
    }
}


/*** Armdrücken (src/interactions/armWrestling.php, js/armWrestling.js) - baut auf den dp- Klassen auf ***/

.aw-track {
    position: relative;
    display: flex;
    gap: 4px;
    padding: 8px 0 4px 0;
}

.aw-cell {
    width: 64px;
    height: 14px;
    border: 1px solid #6f5827;
    border-radius: 3px;
    background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2));
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.aw-cell--mid {
    border-color: #9a7f3e;
    background: linear-gradient(rgba(217, 180, 90, 0.12), rgba(0, 0, 0, 0.2));
}

.aw-pointer {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 26px;
    line-height: 1;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.7);
    transition: left 0.8s cubic-bezier(0.3, 1.2, 0.4, 1);
    pointer-events: none;
}

.aw-pointer--slam {
    animation: aw-slam 0.5s ease-out 0.75s;
}

@keyframes aw-slam {
    0%   { transform: translateX(-50%) rotate(0deg); }
    30%  { transform: translateX(-50%) translateY(4px) rotate(-8deg); }
    60%  { transform: translateX(-50%) translateY(-2px) rotate(4deg); }
    100% { transform: translateX(-50%) rotate(0deg); }
}

.aw-track-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 476px;
    font-size: 11px;
    font-style: italic;
    color: #9a968a;
}

.aw-stamina {
    width: 220px;
    height: 12px;
    border: 1px solid #6f5827;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.aw-stamina-fill {
    display: block;
    height: 100%;
    background: linear-gradient(#e6c877, #b8892f);
    box-shadow: 0 0 6px rgba(217, 180, 90, 0.4);
    transition: width 0.5s ease;
}

/* opponent choice */
.aw-opponents {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 18px auto;
}

.aw-opp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 170px;
    padding: 16px 12px;
    border: 1px solid #6f5827;
    border-radius: 5px;
    background: linear-gradient(#2c2216, #1d1610);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
    text-align: center;
}

.aw-opp:hover {
    border-color: #d9b45a;
    box-shadow: 0 0 14px rgba(217, 180, 90, 0.22);
    transform: translateY(-3px);
}

.aw-opp--disabled {
    opacity: 0.45;
    cursor: default;
}

.aw-opp--disabled:hover {
    border-color: #6f5827;
    box-shadow: none;
    transform: none;
}

.aw-opp-name {
    font-family: 'vinque', serif;
    font-size: 15px;
    color: #e9dcb8;
}

.aw-opp-stake {
    font-size: 12px;
    color: #d9b45a;
}

@media (prefers-reduced-motion: reduce) {
    .aw-pointer {
        transition-duration: 0.01s;
    }

    .aw-pointer--slam {
        animation: none;
    }
}


/*** Hütchenspiel (src/interactions/shellGame.php, js/shellGame.js) - baut auf den dp- Klassen auf ***/

.sg-stage {
    position: relative;
    width: 364px;
    height: 150px;
    margin: 0 auto;
}

.sg-cup {
    position: absolute;
    bottom: 12px;
    width: 84px;
    height: 96px;
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.14), transparent 45%),
        linear-gradient(#5a4028, #3a2a1c 70%, #2e2013);
    border: 1px solid #1d1409;
    border-radius: 16% 16% 42% 42% / 8% 8% 14% 14%;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.55), inset 0 2px 3px rgba(255, 255, 255, 0.12);
    transition: left 0.26s ease-in-out, transform 0.45s ease;
    z-index: 2;
}

.sg-cup::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    top: 22%;
    height: 12%;
    background: linear-gradient(rgba(217, 180, 90, 0.35), rgba(138, 100, 32, 0.35));
    border-radius: 3px;
}

.sg-cup--lift {
    transform: translateY(-56px) rotate(-5deg);
}

.sg-coin {
    position: absolute;
    bottom: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f4d98b, #b8892f 60%, #7a5518);
    border: 1px solid #66451a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.5);
    z-index: 1;
}

.sg-slot {
    position: absolute;
    bottom: 0;
    width: 100px;
    height: 150px;
    cursor: pointer;
    pointer-events: none;
    z-index: 3;
}

.sg-ready .sg-slot {
    pointer-events: auto;
}

/* waiting for input: pulsing gold ring around every cup (same rhythm as the dice) */
.sg-ready .sg-slot::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(217, 180, 90, 0.4);
    border-radius: 12px;
    animation: dp-await 1.6s ease-in-out infinite;
    pointer-events: none;
}

.sg-ready .sg-slot:hover::before {
    animation: none;
    border-color: #d9b45a;
    box-shadow: 0 0 14px rgba(217, 180, 90, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .sg-cup {
        transition-duration: 0.01s;
    }

    .sg-ready .sg-slot::before {
        animation: none;
    }
}


/*** Wettsaufen (src/interactions/drinkingContest.php, js/drinkingContest.js) - baut auf den dp- Klassen auf ***/

.dc-mugs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 34px;
    align-items: flex-end;
    max-width: 300px;
}

.dc-mug {
    position: relative;
    width: 20px;
    height: 26px;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.18), transparent 50%), linear-gradient(#5a4028, #3a2a1c);
    border: 1px solid #1d1409;
    border-radius: 2px 2px 4px 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.dc-mug::before {
    /* Schaumrest am Rand des geleerten Krugs */
    content: '';
    position: absolute;
    top: 1px;
    left: 2px;
    right: 2px;
    height: 4px;
    background: linear-gradient(#f4ead0, #cdb887);
    border-radius: 2px;
    opacity: 0.7;
}

.dc-mug::after {
    /* Henkel */
    content: '';
    position: absolute;
    top: 6px;
    right: -6px;
    width: 5px;
    height: 11px;
    border: 2px solid #1d1409;
    border-left: none;
    border-radius: 0 5px 5px 0;
}

.dc-mug--new {
    animation: dc-mug-in 0.55s cubic-bezier(0.3, 1.4, 0.5, 1);
}

@keyframes dc-mug-in {
    0%   { transform: translateY(-22px) rotate(-14deg); opacity: 0; }
    60%  { transform: translateY(2px) rotate(3deg); opacity: 1; }
    100% { transform: translateY(0) rotate(0deg); }
}

.dc-mug-more {
    font-family: 'vinque', serif;
    font-size: 13px;
    color: #d9b45a;
    align-self: center;
    margin-left: 4px;
}

/* Schwips-Stufen: der Tisch beginnt zu wanken und zu verschwimmen */
.dc-tipsy1 {
    --dc-sway: 0.8deg;
    animation: dc-sway 5.5s ease-in-out infinite;
    filter: blur(0.5px);
}

.dc-tipsy2 {
    --dc-sway: 1.2deg;
    animation: dc-sway 4s ease-in-out infinite;
    filter: blur(0.9px);
}

.dc-tipsy3 {
    --dc-sway: 1.8deg;
    animation: dc-sway 2.8s ease-in-out infinite;
    filter: blur(1.4px);
}

@keyframes dc-sway {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(var(--dc-sway)); }
    75%      { transform: rotate(calc(-1 * var(--dc-sway))); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-mug--new {
        animation: none;
    }

    .dc-tipsy1,
    .dc-tipsy2,
    .dc-tipsy3 {
        animation: none;
        filter: none;
    }
}


/*** Fuchs und Gänse (src/interactions/foxAndGeese.php, js/foxAndGeese.js) - baut auf den dp- Klassen auf ***/

.fg-board {
    display: grid;
    grid-template-columns: repeat(7, 44px);
    grid-template-rows: repeat(7, 44px);
    gap: 3px;
    margin: 10px auto;
    padding: 10px;
    background: linear-gradient(#2e2013, #241a10);
    border: 1px solid #1d1409;
    border-radius: 6px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(0, 0, 0, 0.4);
    width: max-content;
}

.fg-void {
    width: 44px;
    height: 44px;
}

.fg-cell {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4a331c, #3a2a1c);
    border: 1px solid #241a10;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.06);
}

.fg-cell::before {
    /* Mulde für den Spielstein */
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.fg-piece {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    z-index: 1;
}

.fg-goose {
    width: 26px;
    height: 26px;
    background: radial-gradient(circle at 35% 30%, #f4ead0, #cdb887 65%, #a8925e);
    border: 1px solid #8a7548;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

.fg-fox {
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 35% 30%, #e0854f, #c0622f 60%, #7a3a18);
    border: 1px solid #63300f;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* waiting for input: movable pieces pulse (same rhythm as the dice) */
.fg-cell.fg-canmove {
    cursor: pointer;
}

.fg-cell.fg-canmove::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px solid rgba(217, 180, 90, 0.4);
    border-radius: 6px;
    animation: dp-await 1.6s ease-in-out infinite;
    pointer-events: none;
}

.fg-cell.fg-sel {
    background: linear-gradient(135deg, #5a4028, #4a331c);
}

.fg-cell.fg-sel::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 2px solid #d9b45a;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(217, 180, 90, 0.5);
    animation: none;
    pointer-events: none;
}

.fg-cell.fg-target {
    cursor: pointer;
}

.fg-cell.fg-target::before {
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 35% 30%, rgba(217, 180, 90, 0.9), rgba(154, 127, 62, 0.9));
    box-shadow: 0 0 8px rgba(217, 180, 90, 0.6);
}

.fg-cell.fg-target:hover {
    background: linear-gradient(135deg, #5a4028, #4a331c);
}

.fg-cell.fg-last-my {
    border-color: rgba(217, 180, 90, 0.55);
}

.fg-cell.fg-last-npc {
    border-color: rgba(192, 98, 47, 0.65);
}

.fg-cell.fg-taken::before {
    animation: fg-taken 1.2s ease-out;
}

@keyframes fg-taken {
    0%   { box-shadow: 0 0 14px rgba(192, 98, 47, 0.9); background: rgba(192, 98, 47, 0.8); }
    100% { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.3); }
}

/* Steine in der Seitenwahl (im Medaillon) */
.dp-medallion .fg-piece {
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    .fg-cell.fg-canmove::after {
        animation: none;
    }

    .fg-cell.fg-taken::before {
        animation: none;
    }
}