/* How to Play: tabbed pages, skull cards with rendered portraits, scoring / modes / controls blocks. */

#scr-howto .panel { max-width: 860px; }
.ht-tabs { margin-bottom: 16px; }
.ht-page { display: none; text-align: left; margin-bottom: 18px; }
.ht-page.on { display: block; animation: fadeIn .25s ease-out; }
@media (min-width: 700px) and (min-height: 600px) { .ht-page { min-height: 360px; } }   /* less jumping between tabs */
@media (max-width: 440px) { .ht-tabs { flex-wrap: nowrap; gap: 4px; } .ht-tabs .lb-tab { padding: 9px 7px; font-size: 8px; } .ht-tabs .ti { display: none; } }

/* ---------- skulls ---------- */
/* 4 columns (bone gold demon crystal / storm cursed BOSS×2), 2 on phones (… / BOSS×2): always full rows */
.skull-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.skull-card.wide { grid-column: span 2; }
.skull-card.wide img { width: 50%; margin: 0 auto; }
@media (max-width: 620px) { .skull-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.skull-card {
    position: relative; text-align: center; padding: 8px 8px 12px; border-radius: 8px; border: 2px solid #3a1016;
    background: radial-gradient(ellipse at 50% 32%, rgba(255,255,255,.07), rgba(10,2,6,.92) 68%);
    transition: border-color .15s, transform .15s;
}
.skull-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.skull-card img { display: block; width: 100%; aspect-ratio: 6 / 5; object-fit: contain; transition: transform .2s; filter: drop-shadow(0 6px 8px rgba(0,0,0,.7)); }
.skull-card:hover img { transform: translateY(-4px) scale(1.05); }
.sc-pts { position: absolute; top: 8px; right: 8px; z-index: 1; font-size: 9px; color: var(--gold); background: rgba(0,0,0,.7); border: 1px solid #5a3a12; padding: 4px 6px; border-radius: 4px; }
.sc-name { font-family: 'Creepster', cursive; font-size: clamp(18px, calc(var(--u) * 2.4), 24px); color: var(--accent); letter-spacing: 1px; text-shadow: 2px 2px 0 #000; }
.sc-desc { font-size: clamp(7px, calc(var(--u) * 1), 9px); color: #cab; line-height: 1.8; min-height: 3.6em; margin: 4px 0 8px; }
.sc-tag { display: inline-block; font-size: 7px; letter-spacing: 1px; color: var(--accent); border: 1px solid var(--accent); padding: 4px 7px; border-radius: 3px; }
.skull-card.danger { border-color: #5a1a7a; box-shadow: inset 0 0 22px rgba(160,40,255,.25); }
.skull-card.danger .sc-pts { color: var(--blood); border-color: var(--blood); }
.skull-card.danger .sc-tag { background: var(--accent); color: #000; animation: blink 1.1s steps(2) infinite; }

/* ---------- info blocks ---------- */
.ht-block { border: 2px solid #3a1016; background: rgba(20,4,8,.6); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.ht-head { font-size: clamp(10px, calc(var(--u) * 1.4), 13px); color: var(--ember); letter-spacing: 2px; margin-bottom: 8px; }
.ht-block p { font-size: clamp(8px, calc(var(--u) * 1.1), 11px); line-height: 1.9; color: #dcc; margin: 0 0 6px; }
.ht-block b, .ht-block .gold { color: var(--gold); font-weight: 400; }
.ht-block p.ht-dim { color: #a88; }
.ht-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 10px; }

.mult-row { display: flex; gap: 4px; margin: 10px 0; flex-wrap: wrap; }
.mult-chip {
    flex: 1 1 0; min-width: 34px; text-align: center; font-size: 11px; padding: 6px 2px 4px; border-radius: 4px; color: #fff; text-shadow: 1px 1px 0 #000;
    background: rgba(255,138,31, calc(.12 + var(--k) * .7)); border: 1px solid rgba(255,190,70, calc(.25 + var(--k) * .75));
}
.mult-chip small { display: block; font-size: 6px; color: #fdd; margin-top: 4px; }
.mult-chip small::after { content: ' HITS'; }
.ht-fever { width: 100%; margin: 8px 0 2px; background: #2a1a08; border-color: #5a3a12; }
.ht-fever > div { background: linear-gradient(90deg, #ff8a1f, #ffe45a); box-shadow: 0 0 8px var(--gold); animation: htFever 3.2s ease-in-out infinite; }
@keyframes htFever { 0% { transform: scaleX(0); filter: none; } 65% { transform: scaleX(1); filter: none; } 80% { transform: scaleX(1); filter: brightness(1.9); } 100% { transform: scaleX(1); filter: none; } }

.hz-list { list-style: none; padding: 0; margin: 8px 0 0; font-size: clamp(8px, calc(var(--u) * 1.1), 11px); line-height: 1.6; color: #dcc; }
.hz-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.hz-list b { color: #fff; font-weight: 400; }
.hz { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 72%); box-shadow: 0 0 12px var(--c); font-size: 14px; }

.keys { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
.key-row { display: flex; gap: 5px; }
.key-row:nth-child(2) { margin-left: 12px; }
.key-row:nth-child(3) { margin-left: 24px; }
.key { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; font-size: 10px; color: #fff; background: linear-gradient(180deg, #3a1a22, #1a0a0e); border: 2px solid #6a2a34; border-bottom-width: 4px; border-radius: 5px; }
.key.sm { min-width: 0; height: 20px; padding: 0 5px; font-size: 7px; border-bottom-width: 3px; vertical-align: middle; }

/* "TUTORIAL" tag on the title menu until the tutorial has been finished once */
.new-tag { font-size: .6em; color: #000; background: var(--gold); padding: 3px 5px; border-radius: 3px; margin-left: 8px; vertical-align: middle; letter-spacing: 1px; box-shadow: 0 0 10px var(--ember); }