.sim-hard-btn {
    border-color: #ff7a63;
    color: #ff7a63;
}

.sim-hard-btn:hover {
    background: rgba(255, 122, 99, 0.18);
    box-shadow: 0 0 14px rgba(255, 122, 99, 0.45);
}

.hard {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
    overflow: hidden;
    background: #05060a;
    --hard-shake: 0px;
}

.hard-sky {
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 20% 20%, rgba(255, 122, 99, 0.25), transparent 70%),
        radial-gradient(50% 45% at 80% 75%, rgba(126, 200, 240, 0.22), transparent 70%),
        radial-gradient(70% 60% at 50% 50%, rgba(199, 155, 240, 0.16), transparent 75%);
    animation: hard-drift 19s ease-in-out infinite alternate;
}

@keyframes hard-drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1.05); }
    to   { transform: translate3d(3%, 2%, 0) scale(1.14); }
}

.hard-scan {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.3;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.045) 0 1px,
        transparent 1px 3px
    );
}

.hard-shaking {
    animation: hard-shake 420ms steps(2, end);
}

@keyframes hard-shake {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(calc(var(--hard-shake) * -1), var(--hard-shake)); }
    40%  { transform: translate(var(--hard-shake), calc(var(--hard-shake) * -0.6)); }
    60%  { transform: translate(calc(var(--hard-shake) * -0.6), calc(var(--hard-shake) * -1)); }
    80%  { transform: translate(var(--hard-shake), var(--hard-shake)); }
    100% { transform: translate(0, 0); }
}

.hard-glitching .hard-panel,
.hard-glitching .hard-top {
    animation: hard-glitch 120ms steps(2, end) infinite;
}

@keyframes hard-glitch {
    0%   { transform: translateX(0); filter: none; }
    33%  { transform: translateX(-3px); filter: hue-rotate(25deg) saturate(1.6); }
    66%  { transform: translateX(4px); filter: hue-rotate(-30deg) saturate(1.4); }
    100% { transform: translateX(0); filter: none; }
}

.hard-flash {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0;
}

.hard-flash-red {
    background: radial-gradient(circle, rgba(255, 60, 40, 0.55), rgba(120, 0, 0, 0.3));
}

.hard-flash-gold {
    background: radial-gradient(circle, rgba(255, 210, 120, 0.5), rgba(255, 140, 0, 0.22));
}

.hard-flash-go {
    animation: hard-flash-out 320ms ease-out;
}

@keyframes hard-flash-out {
    from { opacity: 0.9; }
    to   { opacity: 0; }
}

.hard-floats {
    position: absolute;
    inset: 0;
    z-index: 42;
    pointer-events: none;
}

.hard-float {
    position: absolute;
    transform: translate(-50%, -50%);
    font: 700 1.5rem/1 ui-monospace, monospace;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    animation: hard-rise 1.05s ease-out forwards;
}

.hard-float-bad { color: #ff7a63; }
.hard-float-good { color: #7ef0a0; }
.hard-float-warn { color: #ffb642; }

@keyframes hard-rise {
    from { opacity: 1; transform: translate(-50%, -50%) scale(0.7); }
    35%  { opacity: 1; transform: translate(-50%, -110%) scale(1.25); }
    to   { opacity: 0; transform: translate(-50%, -210%) scale(1); }
}

.hard-banner {
    position: absolute;
    left: 0;
    right: 0;
    top: 26%;
    z-index: 44;
    pointer-events: none;
    text-align: center;
    opacity: 0;
}

.hard-banner strong {
    display: block;
    font: 800 clamp(1.8rem, 7vw, 4.4rem)/1 ui-monospace, monospace;
    letter-spacing: 0.1em;
    color: #fff;
    text-shadow: 0 0 26px rgba(255, 122, 99, 0.9), 0 6px 0 rgba(120, 20, 0, 0.6);
}

.hard-banner em {
    display: block;
    margin-top: 6px;
    font: 600 clamp(0.8rem, 2.4vw, 1.1rem)/1 ui-monospace, monospace;
    letter-spacing: 0.26em;
    color: #ffb642;
}

.hard-banner-go {
    animation: hard-banner 1.9s ease-out;
}

@keyframes hard-banner {
    0%   { opacity: 0; transform: scale(1.6) translateY(-14px); filter: blur(8px); }
    14%  { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
    72%  { opacity: 1; }
    to   { opacity: 0; transform: scale(0.97); }
}

.hard-top {
    position: relative;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.hard-title strong {
    font: 800 1.05rem/1 ui-monospace, monospace;
    letter-spacing: 0.16em;
    color: #ff7a63;
}

.hard-title em {
    display: block;
    font: 600 0.72rem/1.4 ui-monospace, monospace;
    letter-spacing: 0.2em;
    color: #9a9a9a;
}

.hard-bars {
    flex: 1 1 240px;
    min-width: 200px;
}

.hard-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    font: 600 0.74rem/1 ui-monospace, monospace;
}

.hard-bar-boss { margin-bottom: 8px; }
.hard-bar-name { width: 34px; color: #9a9a9a; letter-spacing: 0.14em; }
.hard-bar-num { min-width: 86px; text-align: right; color: #9a9a9a; }

.hard-track {
    flex: 1;
    height: 12px;
    border: 1px solid #3a3026;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
}

.hard-fill {
    display: block;
    height: 100%;
    transition: width 220ms ease-out;
}

.hard-fill-ok { background: linear-gradient(90deg, #4ea86a, #7ef0a0); }
.hard-fill-warn { background: linear-gradient(90deg, #a87a2a, #ffb642); }

.hard-fill-dire {
    background: linear-gradient(90deg, #a83a2a, #ff7a63);
    animation: hard-throb 700ms ease-in-out infinite;
}

.hard-fill-boss { background: linear-gradient(90deg, #7a2a5a, #c79bf0); }

@keyframes hard-throb {
    50% { filter: brightness(1.6); }
}

.hard-quip {
    position: relative;
    z-index: 20;
    margin: 0;
    min-height: 1.3em;
    font: italic 600 0.92rem/1.3 ui-monospace, monospace;
    color: #ffd79a;
}

.hard-panel {
    position: relative;
    z-index: 20;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hard-canvas {
    width: 100%;
    flex: 1 1 auto;
    min-height: 260px;
    border: 1px solid #3a3026;
    border-radius: 8px;
    background: #07090c;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8);
}

.hard-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.hard-card {
    width: 128px;
    min-height: 92px;
    padding: 8px;
    border: 1px solid #4a3f30;
    border-radius: 6px;
    background: rgba(20, 14, 8, 0.85);
    color: #f2f2f2;
    font: 600 0.72rem/1.25 ui-monospace, monospace;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hard-card b { color: #ffb642; font-size: 0.78rem; }
.hard-card span { color: #7ef0a0; }
.hard-card i { color: #c79bf0; font-style: normal; }
.hard-card small { color: #9a9a9a; font-size: 0.64rem; }

.hard-card-hand { cursor: pointer; }

.hard-card-hand:hover {
    border-color: #ffb642;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

.hard-card-poor { opacity: 0.45; }

.hard-card-empty {
    border-style: dashed;
    background: rgba(0, 0, 0, 0.3);
    min-height: 92px;
}

.hard-card-board { border-color: #7ef0a0; }

.hard-mid {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.hard-atom-chip {
    padding: 4px 10px;
    border: 1px solid #c79bf0;
    border-radius: 999px;
    font: 700 0.76rem/1 ui-monospace, monospace;
    letter-spacing: 0.12em;
    color: #c79bf0;
}

.hard-atom-chip b { color: #fff; font-size: 0.95rem; }

.hard-chess-head {
    display: flex;
    gap: 14px;
    align-items: baseline;
    justify-content: center;
}

.hard-clock {
    font: 800 1.6rem/1 ui-monospace, monospace;
    letter-spacing: 0.08em;
    color: #ffb642;
}

.hard-clock-dire {
    color: #ff7a63;
    animation: hard-throb 600ms ease-in-out infinite;
}

.hard-think {
    font: italic 600 0.8rem/1 ui-monospace, monospace;
    color: #9a9a9a;
}

.hard-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    flex: 0 0 auto;
    width: min(68vh, 92vw, 520px);
    height: min(68vh, 92vw, 520px);
    margin: 0 auto;
    border: 2px solid #4a3f30;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}

.hard-sq {
    position: relative;
    min-width: 0;
    min-height: 0;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hard-sq-light { background: #d9c79a; }
.hard-sq-dark { background: #6f5436; }

.hard-sq img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    pointer-events: none;
}

.hard-glyph {
    font-size: clamp(16px, 5vw, 38px);
    line-height: 1;
    color: #15110c;
}

.hard-sq-dark .hard-glyph { color: #f6ecd6; }
.hard-sq-pick { box-shadow: inset 0 0 0 3px #7ef0a0; }
.hard-sq-last { box-shadow: inset 0 0 0 3px rgba(255, 182, 66, 0.6); }

.hard-sq-can::after {
    content: "";
    position: absolute;
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background: rgba(126, 240, 160, 0.75);
    pointer-events: none;
}

.hard-log {
    position: relative;
    z-index: 20;
    max-height: 104px;
    overflow-y: auto;
    padding: 6px 8px;
    border: 1px solid #3a3026;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    font: 600 0.7rem/1.5 ui-monospace, monospace;
    color: #c9c9c9;
}

.hard-line { white-space: pre-wrap; }
.hard-good { color: #7ef0a0; }
.hard-bad { color: #ff7a63; }
.hard-warn { color: #ffb642; }
.hard-phase { color: #c79bf0; letter-spacing: 0.1em; }

.hard-again {
    position: relative;
    z-index: 20;
    align-self: center;
}

@media (max-width: 720px) {
    .hard { padding: 10px; }
    .hard-card { width: 104px; }
    .hard-log { max-height: 76px; }
}

.hard-wipe {
    position: absolute;
    inset: 0;
    z-index: 46;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(100deg, transparent 0 38%, #05060a 42% 58%, transparent 62% 100%),
        linear-gradient(100deg, transparent 0 40%, rgba(255, 122, 99, 0.8) 41% 42%, transparent 43%);
    background-size: 320% 100%;
    background-repeat: no-repeat;
    background-position: -120% 0;
}

.hard-wipe-go {
    animation: hard-wipe 860ms cubic-bezier(0.6, 0, 0.3, 1);
}

@keyframes hard-wipe {
    0%   { opacity: 1; background-position: -120% 0; }
    48%  { opacity: 1; background-position: 10% 0; }
    52%  { opacity: 1; background-position: 24% 0; }
    100% { opacity: 1; background-position: 150% 0; }
}

/* Everything behind the fight holds still while a minigame is on screen. Pausing rather than
   removing, so it picks up where it left off instead of snapping when the panel closes. */
.todd-gaming .todd-scan,
.todd-gaming .todd-sky-a,
.todd-gaming .todd-sky-b,
.todd-gaming .todd-sky-c,
.todd-gaming .todd-grid,
.todd-gaming .todd-chant,
.todd-gaming .todd-motes i,
.todd-gaming .todd-face-wrap,
.todd-gaming .todd-hp i::after,
.todd-gaming .todd-minion,
.todd-gaming .todd-slot,
.todd-gaming .todd-in-hand,
.todd-gaming #todd-attack,
.todd-gaming .todd-you-low,
.todd-gaming .todd-atom-chip i {
    animation-play-state: paused !important;
}

/* The two biggest layers also stop being composited at all, which is the rest of the saving: a
   full-bleed blurred gradient is the most expensive thing on the screen and it is behind a panel. */
.todd-gaming .todd-sky-a,
.todd-gaming .todd-sky-b,
.todd-gaming .todd-sky-c,
.todd-gaming .todd-motes {
    visibility: hidden;
}

#hard-chess {
    flex: 1 1 auto;
    justify-content: flex-start;
    align-items: center;
    overflow: auto;
}