body {
    background-color: #333;
    color: #ccc;
}

/* "Frames" are just rectangles that have a ridge-like border,
 * with the same colors as Cookie Clicker's frameBorder.png.
 */
.frame {
    background-color: #222; /* Approximates darkNoise.jpg */
    color: #aaa;

    position: relative;
    border-top: 2px solid #ece2b6; /* External colors */
    border-left: 2px solid #dfbc9a;
    border-right: 2px solid #875626;
    border-bottom: 2px solid #733726;
}
.frame:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border-top: 1px solid #998a4d; /* Internal colors */
    border-left: 1px solid #875626;
    border-right: 1px solid #dfbc9a;
    border-bottom: 1px solid #dfbc9a;
    box-sizing: border-box;
    pointer-events: none;
}

/* Fancy Cookie Clicker buttons */
.frame button {
    color: #ccc;
    background-color: #222; /* Approximates darkNoise.jpg */
    padding: 4px 8px;
    border: 1px solid;
    border-color: #ece2b6 #875526 #733726 #dfbc9a;
    border-radius: 2px;
    box-shadow: 0px 0px 1px 2px rgba(  0,  0,  0, 0.5),
                0px 2px 4px     rgba(  0,  0,  0,0.25),
                0px 0px 2px 2px rgba(  0,  0,  0,   1) inset,
                0px 1px 0px 1px rgba(255,255,255, 0.5) inset;
    cursor: pointer;
    /* Cookie Clicker also has a 1px text-shadow, but it is barely visible */
}
.frame button:hover {
	border-color: #fff;
	color: #fff;
}
.frame button:active {
	border-color: #ccc;
	color: #ccc;
}

.outcome-success-icon {
    background-image: url(https://orteil.dashnet.org/cookieclicker/img/goldCookie.png);
    width: 96px;
    height: 96px;
}

.outcome-backfire-icon {
    background-image: url(https://orteil.dashnet.org/cookieclicker/img/wrathCookie.png);
    width: 96px;
    height: 96px;
}

.easter-season-icon, .valentines-season-icon {
    background-image: url(https://orteil.dashnet.org/cookieclicker/img/icons.png);
    width: 96px;
    height: 96px;
    /* Ugly, but works */
    clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 0% 50%);
    transform: scale(2) translate(25%, 25%);
}
.easter-season-icon {
    background-position: 0px -576px;
}
.valentines-season-icon {
    background-position: -960px -144px;
}

.gc-effect {
    color: #888;
    height: 2ex;
    cursor: default;
}

.gc-effect.selected {
    font-weight: bold;
    color: white;
}

.gc-effect.inactive {
    display: none;
}

.gc-effect:hover {
    font-weight: bold;
}

.easter-bunny-icon {
    background-image: url(https://orteil.dashnet.org/cookieclicker/img/bunnies.png);
    /* Same as above but with two rows */
    background-size: auto 200%;
    width: 48px;
    height: 48px;
    background-position: calc(-1*var(--index)*48px) calc(-1*var(--wrath, 0)*48px);
}

.valentines-heart-icon {
    background-image: url(https://orteil.dashnet.org/cookieclicker/img/hearts.png);
    /* Another kludge; this sizes here works because hearts.png has a single row of sprites */
    background-size: auto 100%;
    width: 48px;
    height: 48px;
    background-position: calc(-1*var(--index)*48px) 0px;
}

.easter-bunny-icon.inactive, .valentines-heart-icon.inactive {
    display: none;
}

/* Make all icons have opacity 0.25, hovered icons 0.8, and selected icons 1.0. */
.outcome-success-icon,
.outcome-backfire-icon,
.easter-season-icon,
.valentines-season-icon,
.easter-bunny-icon,
.valentines-heart-icon {
    opacity: 0.25;
}

.outcome-success-icon:hover,
.outcome-backfire-icon:hover,
.easter-season-icon:hover,
.valentines-season-icon:hover,
.easter-bunny-icon:hover,
.valentines-heart-icon:hover {
    opacity: 0.8;
}

.outcome-success-icon.selected,
.outcome-backfire-icon.selected,
.easter-season-icon.selected,
.valentines-season-icon.selected,
.easter-bunny-icon.selected,
.valentines-heart-icon.selected {
    opacity: 1;
}

/* Make a list of outcomes */
#outcome-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(500px + 15em + 50px);
    /* 500px+15em is the width of outcome-frame */
}
#outcome-list>div {
    margin: 5px;
}

/* Align panels in each outcome frame using a grid */
.outcome-frame {
    padding: 5px;
    display: grid;
    grid-template-columns: 100px 15em 400px;
    /* 100px is a bit over 96px,
     * 15em should be enough to write "cookie storm drop",
     * 400px is a little over 8*48px. */
    align-items: center;
}

.outcome-frame input {
    width: 15ex;
    color: #aaa;
    border: 1px solid #666;
    background-color: #222;
}

.outcome-frame div {
    margin: 5px;
}

.spells-cast-header {
    grid-row: 1;
    grid-column: 1 / 4;
}

.outcome-success-backfire-selector {
    grid-row: 2;
    grid-column: 1;
}

.gc-effect-list {
    grid-row: 2;
    grid-column: 2;
}

.season-choices {
    grid-row: 2;
    grid-column: 3;
}

.season-choices div {
    margin: 0px;
}

/* Align seasonal icons */
.seasons {
    display: flex;
}
.seasonal-cookies {
    display: flex;
}

/* Settings about the new-outcome-button */
#new-outcome-button {
    align-self: stretch; /* with respect to #outcome-list */

    border: dashed red;
    border-radius: 30px;

    display: flex;
    flex-direction: column;
    align-items: center;

    cursor: default;
    padding-bottom: 15px; /* The "+" is big enough at the top */
}

#new-outcome-button:hover {
    color: red;
}

.big-plus-icon {
    font-size: 100px;
}

.cracking-result-frame {
    display:flex;
    align-items: center;
    width: 100%;
}
.cracking-result-frame button {
    margin: 5px;
}
.cracking-result-frame div {
    margin: 5px;
}