Common.css

/* CSS placed here will be applied to all skins */

/* Once the font upload issue is fixed (MAIN-21389), the two fonts below should be replaced with a local upload */
@font-face {
  font-family: 'noita';
  src: local('noita'), url('https://vignette.wikia.nocookie.net/pcj/images/a/a4/NoitaPixel.ttf') format('truetype');
}

@font-face {
  font-family: 'glyphs';
  src: local('glyphs'), url('https://vignette.wikia.nocookie.net/pcj/images/3/3b/Noita-Glyph.ttf') format('truetype');
}

/* This governs the sections on the Community portal */
.cpbox {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.cpbox #admins {
    box-sizing: border-box;
    width: calc(33% - 10px);
    margin: 5px;
    flex-grow: 1;
    min-width: 300px;
}

.cpbox #help {
    box-sizing: border-box;
    width: calc(67% - 10px);
    margin: 5px;
    flex-grow: 1;
}

/* Front page layout styles */
.fpbox {
    margin: 5px;
    padding: 5px;
    overflow: auto;
    width: calc(100% - 2px);
}

/* Multi-column box support */
.fp-container main .columns .leftcol,
.fp-container .columns .rightcol {
    width: 100%;
    margin: 0;
    padding: 0;
}

.fpheader {
    font-family: noita, sans-serif;
    text-shadow:  2px 2px black;
}

@media (min-width: 990px) {
    .fp-container .columns .leftcol {
        float: left;
        width: 50%;
    }

    .fp-container .columns .rightcol {
        float: right;
        width: 50%;
    }
}

.fp-section {
    display: flex;
    flex-wrap: wrap;
}

/* This CSS governs the responsive 3 column main page layout */
#fptweets {
  min-height:calc(325px + 2.3em);
}

#fp-3column.fp-container {
    display: grid;
    grid-template-areas: "a" "b" "c" "d";
    grid-template-columns: 100%;
}
@media screen and (min-width:990px) {
    #fp-3column.fp-container {
        grid-template-areas: "a b" "c b" "c d";
        grid-template-columns: 520px auto;
    }
}
@media screen and (min-width:1350px) {
    #fp-3column.fp-container {
        grid-template-areas: "a b c" "d b c";
        grid-template-columns: 1fr 1fr 500px;
    }
}

#fp-1 {
    grid-area: a;
}

#fp-2 {
    grid-area: b;
}

#fp-3 {
    grid-area: c;
}

#fp-3 .fpbox { min-width: 500px; }

#fp-4 {
    grid-area: d;
}

.fpbody.responsive-columns {
	display: grid;
    grid-template-columns: repeat(auto-fit,minmax(10rem,1fr));
    column-gap: 1rem;
    place-items: center;
    padding: 0 0.5rem;
}

.fpbody.responsive-columns div {
	width: 100%;
}

.fpbody.fplinks {
    display: flex;
    flex-wrap: wrap;
    place-content: space-evenly;
    column-gap: 0.5rem;
}

/* Used in [[Template:FP icon]] */

.fpbody.fplinks .fp-icon {
    flex: 0 1 64px;
}

.fp-icon {
    display: inline-block;
    margin: 2px;
    max-width: 100px;
    text-align: center;
    vertical-align: top;
}

/* end responsive 3 column main page layout */

/* Fix for popups sometimes overlapping their link, creating a loop */
.mwe-popups.flipped-y,
.mwe-popups.flipped-x-y {
  margin-top: -30px;
}

/* Adjust caption styles for EmbedVideo extension */
.embedvideo .thumbcaption {
    padding: 0.5ex 1ex;
    font-size: 0.9em;
}

/* Simple spoiler-compatible reusable pixel font class */
.noita-font {
	font-family: 'noita', sans-serif;
}

.spoiler-hidden .noita-font {
	font-family: 'glyphs', sans-serif;
}

/* Base styles for Portable Infoboxes */

figure.pi-image {
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align:baseline
}

.portable-infobox .pi-title {
    font-size: 1.5em;
    padding: 0.4em;
    font-family: 'noita', '04b03', sans-serif;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 75%);
    text-align: center;
}

.portable-infobox .pi-secondary-font {
    font-family: 'noita', sans-serif;
    font-weight:  normal;
}

.pi-theme-enemy .pi-data[data-source="alias"] div.pi-data-value {
    text-align: center;
    width: 100%;
}

.portable-infobox {
    background-color: #000000;
    border: 2px solid #505050;
    border-radius: 4px;

}

.portable-infobox .pi-border-color,
.portable-infobox .pi-smart-data-value:not(:first-child),
.portable-infobox .pi-smart-data-label:not(:first-child) {
    border-color: #505050;
}

.portable-infobox .pi-header {
    background-color: #181818;
}

.portable-infobox .pi-data {
    align-items: center;
}

.pi-section-tab:only-child {
    display: none;
}

.pi-section-navigation {
    flex-wrap: wrap;
    justify-content: center;
    align-content: baseline;
    overflow-x: hidden;
    overflow-y: auto;
}

.portable-infobox .pi-group:last-child {
    border-bottom: none;
}

.pi-theme-item .pi-item[data-source^="description"] .pi-data-value {
    text-align: center;
    width: 100%;
    hyphens: manual;
}

.portable-infobox .pi-caption {
    text-align: center;
    hyphens: manual;
}

.portable-infobox .pi-section-tab {
    color: #9bdae9;
}

.portable-infobox .pi-section-tab.pi-section-active {
    color: #2cbaed;
}

/*************************************
* Used by [[Template:Infobox enemy]] *
*************************************/

.pi-theme-enemy .pi-data[data-source^="health"] .pi-data-value {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 0.5rem;
}

.pi-data-value .hp-value {
    grid-column: 2 / 3;
}

.pi-theme-enemy .pi-data[data-source^="immunities"] .pi-data-value {
	width: 100%;
    display: flex;
    place-content: center;
    flex-wrap: wrap;
}

.pi-theme-enemy .pi-data[data-source^="immunities"] .pi-data-value div {
    margin: 0 0.2rem 0.2rem 0.2rem;
    flex: 0 1 40px;
}

.pi-theme-enemy .pi-data[data-source^="drops"] .pi-data-value {
    column-count: 2;
    column-gap: 0.5rem;
}

.pi-theme-enemy .pi-data[data-source^="icon"] {
    position: absolute;
    margin-top: -55px;
    border: none;
}

.pi-theme-enemy .pi-data[data-source^="icon"] img {
    border-radius: 5px;
    box-shadow: 0 0 0 2px #d7bd70;
}

.pi-theme-enemy figure.pi-image {
    display: grid;
    grid-gap: 0.5rem;
    justify-content: center;
    align-content: space-evenly;
    max-width: 95%;
    min-height: 100px;
    margin: 0 auto;
}

.pi-theme-enemy figure.pi-image img {
    max-width: 100%;
    height: auto;
}

/*************************************
* Used by [[Template:Spell infobox]] *
*************************************/

.portable-infobox.pi-theme-spell {
    width: 32em;
}

.pi-theme-spell .pi-data,
.pi-theme-spell .pi-group {
    border: none;
}

.pi-theme-spell .pi-font {
    font-family: 'noita', sans-serif;
    font-weight: normal;
}

.pi-theme-spell .pi-font,
.pi-theme-spell .pi-secondary-font {
    font-size: 1.2em;
}

.pi-theme-spell .pi-section-content.pi-section-active {
    display: grid;
    grid-template-columns: auto 100px;
    align-items: center;
}

.pi-theme-spell .pi-data-label {
    flex-basis: 100%;
    grid-column: 1 / 2;
}

.pi-theme-spell .pi-data {
    grid-column: 1 / 2;
}

.pi-theme-spell .pi-image {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    margin-right: 2em;
}

.pi-theme-spell .pi-data[data-source^="description"] {
    margin: 0.5em;
    grid-column: 1 / 3;
}

.pi-theme-spell .pi-data[data-source^="effect"] {
    grid-column: 1 / 4;
}

.pi-theme-spell .pi-data[data-source^="effect"] .pi-data-value {
    flex-basis: 100%;
}

.pi-theme-spell {
    padding: 0 0.5rem 0.75rem 0.5rem;
}

/*********************************
* Used by [[Template:Hover gif]] *
*********************************/

.hover-gif.gif-inline {
  display:inline-block;
}

.hover-gif .thumbinner {
  position: relative;
  opacity: 1;
}

.hover-gif .thumbinner:not(:hover) img {
  opacity:0;
  transition: opacity 0.5s;
}

.hover-gif a.image {
  position:relative;
}

.hover-gif a.image::before {
	position: absolute;
	background: url(https://static.wikia.nocookie.net/noita_gamepedia_en/images/6/64/Gif_icon_overlay.png/revision/latest) no-repeat;
	background-size: 50px;
	width: 50px;
	height: 50px;
	top: calc(50% - 25px);
	left: calc(50% - 25px);
	content: "";
	z-index: 2;
}

.hover-gif:hover a.image::before {
  display:none;
}

.hover-gif canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #3C4258;
  border-radius: 4px;
  opacity: 1;
  transition: opacity 0.3s;
}

.hover-gif .thumbinner:hover canvas {
  opacity: 0;
}

/***********************************
* Used by [[Template:GameMessage]] *
***********************************/

.GameMessage {
	display: inline-grid;
    grid-template-rows: auto auto;
    color: #fff;
    margin: 2px 5px;
    vertical-align: middle;
    text-align: center;
}

.spoiler-hidden .GameMessage {
	display: inline;
	color: #77c999;
}

.GameMessageInner { 
	background-color: rgba(248,144,0,0.25);
    border-radius: 8px;
    border: 2px solid rgb(248,144,0);
    border-left: 5px groove rgb(248,144,0);
    border-right: 5px ridge rgb(248,144,0);
    padding: 4px 15px 0 15px;
    font-size: 1.2em
}

.spoiler-hidden .GameMessageInner {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	padding: 0;
	font-size: inherit;
}

.GameMessageUnder {
	 font-size: 0.8em;	
}
.spoiler-hidden .GameMessageUnder {
	font-size: inherit;
}

/****************************
* Used by [[Template:Book]] *
****************************/

.lore-book {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    align-items: center;
    column-gap: 1rem;
    float: left;
    border: 3px solid #948064;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    background-color: #0d0c0b;
}

.book-text {
    font-family: Noita, sans-serif;
    color: #77c989;
}

.spoiler-hidden .book-text {
    font-family: glyphs, sans-serif;
}

.lore-book .book-title {
    font-size: 1.2em;
    
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.lore-book .book-image {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

/*****************************************
* Used by [[Template:Glyph Translation]] *
*****************************************/

.glyph-translate-box {
    border-width: 2px;
    border-style: solid;
    border-color: #9a7a5a;
    border-radius: 2px;
    float: left;
    clear: left;
    padding: 0.25rem 0.5rem;
}

.glyph-translate-box .word {
    display: inline-grid;
    letter-spacing: 0.2ex;
    text-align: center;
}

.glyph-translate-box .glyphs {
    font-family: glyphs, sans-serif;
    line-height: 1em;
}

.glyph-translate-box .plaintext {
    font-family: noita, sans-serif;
    letter-spacing: 1px;
    line-height: 1em;
}

.spoiler-hidden .glyph-translate-box .plaintext {
    color: transparent;
}

/*********************************************************
* Used by [[Template:Wand]] and/or [[Template:Wand Card]]*
*********************************************************/

.wand-card,
.wand-spells-card {
    font-family: 'noita', sans-serif;

    border: 3px solid #928167;
    border-radius: 0px 7.5px 0px 7.5px;
    background-color: rgba(5, 5, 5, 0.8);
    
    display: grid;
    width: fit-content;
    column-gap: 1.5rem;
    align-items: center;
    justify-items: left;
}

.wand-spells-card {
    font-size: 1.3em;
    padding: 1em;
    
    grid-template-areas:
        'image label value . . . .'
        'image label value . . . .'
        'image label value . . . .'
        'spells spells spells spells spells spells spells';
}

.wand-card {
    font-size: 1.4em;
    line-height: 1.2em;
    padding: 1.25rem;
    
    grid-template-areas:
        "name name image"
        "label value image"
        "label value image"
        "label value image"
        "label value image"
        "label value image"
        "label value image"
        "label value image"
        "label value image"
        "label value image"
        "spells spells spells";
}

.wand-card .wand-name {
    margin-top: 0;
    grid-area: name;
}

.wand-sprite {
    grid-area: image;
}

.wand-card .wand-sprite {
    transform: rotate(-0.25turn);
}

.stat-label {
    grid-column: label;
}

.stat-label img {
    margin-right: 0.5rem;
}

.stat-value {
    grid-column: value;
}

.always-cast-label {
    margin-top: 1.25rem;
}

.always-cast-spells {
    margin-top: 1.25rem;
    display: flex;
    justify-items: left;
    justify-content: left;
}

.always-cast-spells .always-cast {
    background: transparent;
    height: 32px;
    width: 32px;
    flex: 0 0 32px;
}

.spell-container {
    grid-area: spells;
    grid-gap: 0.2rem;
    margin-top: 1.25rem;
}

.wand-card .spell-container {
    display: grid;
    place-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    margin-left: auto;
    margin-right: auto;
}

.wand-spells-card .spell-container {
    grid-area: spells;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}

.spell-container .wand-card-spell {
    border: 3px solid #794738;
    border-radius: 5px;
    border-style: dashed;
    background: rgb(54, 43, 38);
    height: 42px;
    width: 42px;
}

/**************************************
* Used by [[Template:SpellQueryIcon]] *
**************************************/

.SpellQueryIcon {
	border: 3px solid #8D3F18;
	border-radius: 5px;
	background: rgba(34,41,51,0.8);
	height: 48px;
	width: 48px;
	display: inline-block;
	margin-bottom: 4px;
}

/***************************************
* Used by [[Template:SpellQueryGroup]] *
***************************************/

.SpellQueryGroup {
	text-align:center;
	float:right;
	font-family:'04b03',sans-serif;
	font-size:1.3em;
	border:2px solid #928167;
	border-radius:5px;
	background-color:rgba(5,5,5,0.8);
	margin:0em 2.5em 0em 2.5em;
	width:100%;
	max-width:21em;
	clear:right;
}

/*******************************
* Used by [[Template:Spoiler]] *
********************************/

.spoiler-toggle {
    background-color: #0d0c0b;
    color: #77c999;
    overflow: auto;
    border: 3px solid #948064;
    padding: 0.4em;
    border-radius: 0 3px;
    font-weight: normal;
}

.spoiler-hidden {
    font-family: glyphs, sans-serif;
}

.spoiler-hidden img,
.spoiler-hidden .hover-gif canvas {
  filter: blur(20px);
  clip-path:inset(0px 0px 0px 0px); /* Chrome */
  clip-path:border-box; /* Good browsers */
}

/**************************
* Used by [[Template:Hp]] *
**************************/

.hp-label, .hp-value {
	display: inline-block;
}

.hp-label {
	margin-right: 0.5em;
}

.hp-value {
    color: red;
}

/**********************************
* Used by [[Template:EnemyQuery]] *
**********************************/

.enemy-query-item {
    background: rgb(39, 43, 55);
    height: 150px;
    width: 175px;
    margin: 0.1rem;
    display: inline-grid;
    align-items: end;
    justify-items: center;
}