/* ============================================================
   ronpa.day — The Dialectical Arena
   Palette: Verdict Spectrum (cold base + two hot accents)
   ============================================================ */

:root {
    --abyss: #0B0D11;
    --graphite: #1C2028;
    --verdict: #D4364B;
    --stone: #E8E4DE;
    --blade: #C0C5CE;
    --fog: #8A9199;
    --flash: #F5F7FA;
    --ember: #E8732A;

    --font-prop: 'Bebas Neue', 'Inter', sans-serif;
    --font-ref: 'Noto Sans JP', 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Inter', monospace;
    --font-impact: 'Anton', 'Inter', sans-serif;

    --slash-glow: drop-shadow(0 0 6px rgba(232, 115, 42, 0.85)) drop-shadow(0 0 18px rgba(232, 115, 42, 0.45));
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background: var(--abyss);
    color: var(--stone);
    font-family: var(--font-mono);
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    position: relative;
    min-height: 100vh;
}

::selection {
    background: var(--verdict);
    color: var(--flash);
}

/* ----------- Impact flash overlay ----------- */
.impact-flash {
    position: fixed;
    inset: 0;
    background: var(--flash);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: screen;
}

.impact-flash.fire {
    animation: impactFlash 500ms ease-out forwards;
}

@keyframes impactFlash {
    0% { opacity: 0; }
    8% { opacity: 1; }
    100% { opacity: 0; }
}

/* ----------- Kanji background watermarks ----------- */
.kanji-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.kanji {
    position: absolute;
    font-family: var(--font-ref);
    font-weight: 900;
    color: var(--stone);
    opacity: 0.04;
    user-select: none;
    line-height: 1;
}

.kanji.k1 { font-size: clamp(380px, 55vw, 760px); top: 5%; left: -8%; animation: drift1 60s linear infinite; }
.kanji.k2 { font-size: clamp(320px, 48vw, 660px); top: 40%; right: -6%; animation: drift2 75s linear infinite; }
.kanji.k3 { font-size: clamp(260px, 38vw, 520px); top: 130%; left: 10%; animation: drift3 65s linear infinite; }
.kanji.k4 { font-size: clamp(280px, 42vw, 580px); top: 200%; right: 8%; animation: drift4 80s linear infinite; }
.kanji.k5 { font-size: clamp(340px, 50vw, 700px); top: 280%; left: -5%; animation: drift5 70s linear infinite; }

@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px, -30px); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-50px, 40px); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px, 50px); } }
@keyframes drift4 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px, -20px); } }
@keyframes drift5 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(60px, 30px); } }

/* ----------- Arena structure ----------- */
.arena {
    position: relative;
    z-index: 1;
}

.round {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    border-bottom: 1px solid rgba(192, 197, 206, 0.06);
}

.round-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-impact);
    font-size: clamp(280px, 50vw, 600px);
    line-height: 0.85;
    color: var(--stone);
    opacity: 0.045;
    letter-spacing: -0.04em;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

.round-watermark.inverted {
    color: var(--verdict);
    opacity: 0.07;
}

.round-watermark.final {
    opacity: 0.025;
    color: var(--ember);
}

/* ----------- Zones (clip-path split) ----------- */
.prop-zone, .anti-zone {
    position: absolute;
    inset: 0;
    padding: clamp(2rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: clip-path 800ms cubic-bezier(0.7, 0, 0.3, 1);
    z-index: 2;
}

.prop-zone {
    background: var(--graphite);
}

.anti-zone {
    background: var(--abyss);
}

/* Round 1 — proposition dominant 60/40 */
.round-1 .prop-zone {
    clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
}
.round-1 .anti-zone {
    clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
    align-items: center;
    justify-content: center;
}

/* Round 2 — challenge balances toward antithesis 45/55 */
.round-2 .prop-zone {
    clip-path: polygon(0 0, 50% 0, 40% 100%, 0 100%);
}
.round-2 .anti-zone {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 40% 100%);
}

/* Round 3 — split is centered, content fragmented in bento */
.round-3 .prop-zone, .round-3 .anti-zone { display: none; }

.round-3 {
    background: linear-gradient(180deg, var(--graphite) 0%, var(--abyss) 100%);
    padding: clamp(4rem, 8vh, 8rem) clamp(1.5rem, 5vw, 5rem) clamp(3rem, 6vh, 6rem);
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vh, 4rem);
}

/* Round 4 — antithesis dominant 30/70, diagonal inverted */
.round-4 {
    background: var(--abyss);
}

.round-4 .prop-zone {
    clip-path: polygon(0 0, 30% 0, 50% 100%, 0 100%);
    opacity: 0.5;
}
.round-4 .anti-zone {
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 50% 100%);
    background: linear-gradient(135deg, #131720 0%, var(--abyss) 60%);
}

/* Round 5 — collapse, single field */
.round-5 .prop-zone, .round-5 .anti-zone { display: none; }
.round-5 {
    background: radial-gradient(ellipse at center, #181c25 0%, var(--abyss) 65%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----------- Diagonal slash SVG ----------- */
.slash-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    filter: var(--slash-glow);
}

.slash-line {
    stroke: var(--verdict);
    stroke-width: 0.35;
    vector-effect: non-scaling-stroke;
    stroke-linecap: square;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1200ms cubic-bezier(0.7, 0, 0.3, 1);
}

.round.in-view .slash-line {
    stroke-dashoffset: 0;
}

.slash-svg.inverted .slash-line {
    stroke: var(--ember);
}

/* ----------- Zone labels ----------- */
.zone-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--fog);
    margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

.zone-label.right {
    justify-content: flex-end;
    color: var(--verdict);
}

.label-dot {
    width: 8px;
    height: 8px;
    background: var(--verdict);
    border-radius: 0;
    transform: rotate(45deg);
    box-shadow: 0 0 8px var(--verdict);
}

.zone-label.right .label-dot {
    background: var(--ember);
    box-shadow: 0 0 8px var(--ember);
}

.label-text.fading {
    color: var(--fog);
    opacity: 0.5;
    text-decoration: line-through;
}

.label-text.bright {
    color: var(--ember);
    text-shadow: 0 0 12px rgba(232, 115, 42, 0.7);
}

/* ----------- Proposition typography ----------- */
.proposition-text {
    font-family: var(--font-prop);
    font-weight: 400;
    font-size: clamp(56px, 11vw, 180px);
    line-height: 0.9;
    color: var(--stone);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    max-width: 60%;
}

.proposition-text.small {
    font-size: clamp(48px, 8vw, 128px);
}

.proposition-text .line {
    display: block;
    overflow: hidden;
}

.proposition-text .line.accent {
    color: var(--blade);
    font-style: italic;
}

.proposition-meta {
    margin-top: clamp(2rem, 4vh, 3rem);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fog);
    letter-spacing: 0.2em;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.meta-tag {
    border-left: 2px solid var(--verdict);
    padding-left: 0.6rem;
}

.proposition-body {
    margin-top: clamp(1.5rem, 3vh, 2.5rem);
    font-family: var(--font-mono);
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.7;
    color: var(--fog);
    max-width: 38ch;
}

.proposition-body em {
    color: var(--stone);
    font-style: italic;
    font-weight: 500;
}

/* ----------- Refutation typography ----------- */
.refutation-text {
    font-family: var(--font-ref);
    font-weight: 900;
    font-size: clamp(40px, 8vw, 140px);
    line-height: 0.95;
    color: var(--blade);
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.ref-line {
    display: block;
}

.ref-line.accent {
    color: var(--verdict);
    text-shadow: 0 0 24px rgba(212, 54, 75, 0.4);
}

.ref-line.muted {
    color: var(--fog);
    font-weight: 700;
}

.refutation-body {
    margin-top: clamp(1.5rem, 3vh, 2.5rem);
    font-family: var(--font-mono);
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.7;
    color: var(--blade);
    max-width: 42ch;
}

.refutation-body .hot {
    color: var(--ember);
    font-weight: 500;
}

/* ----------- Round 1 specific ----------- */
.round-1 .anti-zone {
    text-align: center;
}

.void-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    color: var(--fog);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.void-tick {
    display: block;
    width: 2px;
    height: 80px;
    background: linear-gradient(180deg, transparent, var(--verdict), transparent);
    animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; transform: scaleY(0.7); }
    50% { opacity: 1; transform: scaleY(1); }
}

.void-text {
    line-height: 1.6;
    text-align: center;
}

.scroll-cue {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.4em;
    color: var(--blade);
    animation: bob 2.4s ease-in-out infinite;
}

.cue-arrow {
    display: block;
    width: 1px;
    height: 36px;
    background: linear-gradient(180deg, var(--blade), transparent);
}

@keyframes bob {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
    50% { transform: translate(-50%, 8px); opacity: 1; }
}

/* ----------- Round 3 — Bento grid ----------- */
.exchange-header {
    position: relative;
    z-index: 2;
    text-align: center;
}

.header-prefix {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--ember);
    margin-bottom: 0.8rem;
}

.exchange-title {
    font-family: var(--font-ref);
    font-weight: 900;
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.1;
    color: var(--stone);
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.hot {
    color: var(--ember);
}

.bento-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(140px, auto);
    gap: clamp(1rem, 2vw, 1.6rem);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.frag-card {
    position: relative;
    padding: clamp(1.2rem, 2vw, 1.8rem);
    background: var(--graphite);
    border: 1px solid var(--fog);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.8rem;
    transition: border-color 280ms ease, transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 280ms ease;
    transform-origin: center;
}

.frag-card:nth-child(1)  { grid-column: span 5; grid-row: span 2; }
.frag-card:nth-child(2)  { grid-column: span 7; }
.frag-card:nth-child(3)  { grid-column: span 4; }
.frag-card:nth-child(4)  { grid-column: span 3; grid-row: span 2; }
.frag-card:nth-child(5)  { grid-column: span 5; }
.frag-card:nth-child(6)  { grid-column: span 4; }
.frag-card:nth-child(7)  { grid-column: span 5; }
.frag-card:nth-child(8)  { grid-column: span 7; }

.frag-card.tilt-a { transform: rotate(-1.5deg); }
.frag-card.tilt-b { transform: rotate(2deg); }
.frag-card.tilt-c { transform: rotate(-0.7deg); }

.frag-card:hover {
    border-color: var(--verdict);
    transform: perspective(800px) rotateY(3deg) rotateX(2deg) translateY(-4px);
    box-shadow:
        0 8px 32px rgba(212, 54, 75, 0.25),
        0 0 0 1px rgba(232, 115, 42, 0.4) inset;
    z-index: 4;
}

.frag-card.pro {
    background: var(--graphite);
}

.frag-card.anti {
    background: linear-gradient(180deg, #14171f 0%, var(--abyss) 100%);
    border-color: rgba(212, 54, 75, 0.3);
}

.frag-card.strike::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 48%, rgba(212, 54, 75, 0.65) 49%, rgba(212, 54, 75, 0.65) 51%, transparent 52%);
    pointer-events: none;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 900ms cubic-bezier(0.7, 0, 0.3, 1);
}

.round-3.in-view .frag-card.strike::after {
    transform: scaleX(1);
}

.card-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--ember);
    text-transform: uppercase;
}

.frag-card.pro .card-tag {
    color: var(--blade);
}

.card-text {
    font-family: var(--font-ref);
    font-weight: 700;
    font-size: clamp(15px, 1.4vw, 22px);
    line-height: 1.35;
    color: var(--stone);
}

.frag-card.anti .card-text {
    color: var(--blade);
}

.card-source {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--fog);
    text-transform: uppercase;
    border-top: 1px solid rgba(138, 145, 153, 0.18);
    padding-top: 0.6rem;
}

/* ----------- Round 4 — Turning point ----------- */
.round-4 .prop-zone {
    align-items: flex-start;
}

.dying-prop {
    font-family: var(--font-prop);
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.05;
    color: var(--fog);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.55;
    transform: skewY(-2deg);
}

.strike-through {
    text-decoration: line-through;
    text-decoration-color: var(--verdict);
    text-decoration-thickness: 3px;
    color: rgba(192, 197, 206, 0.4);
}

.turn-text {
    font-family: var(--font-ref);
    font-weight: 900;
    font-size: clamp(32px, 6vw, 96px);
    line-height: 1.05;
    color: var(--stone);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-align: right;
}

.turn-line {
    display: block;
}

.turn-line.hot {
    color: var(--verdict);
    text-shadow: 0 0 30px rgba(212, 54, 75, 0.5);
}

.turn-line.accent-strike {
    color: var(--ember);
    font-style: italic;
    border-bottom: 4px solid var(--ember);
    display: inline-block;
}

.turn-body {
    margin-top: clamp(1.5rem, 3vh, 2.5rem);
    font-family: var(--font-mono);
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.7;
    color: var(--blade);
    max-width: 50ch;
    text-align: right;
    margin-left: auto;
}

.turn-body .hot {
    color: var(--ember);
    font-weight: 500;
}

/* Speed lines */
.speed-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 600ms ease;
}

.round-4.in-view .speed-lines {
    opacity: 1;
}

.sl {
    stroke: var(--blade);
    stroke-width: 1;
    opacity: 0.25;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 1200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sl.thin {
    opacity: 0.4;
    stroke-width: 0.8;
}

.round-4.in-view .sl {
    stroke-dashoffset: 0;
}

/* ----------- Round 5 — 論破 ----------- */
.ronpa-stage {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 4vh, 3rem);
    padding: clamp(2rem, 6vw, 5rem);
}

.ronpa-kanji {
    font-family: var(--font-ref);
    font-weight: 900;
    font-size: clamp(180px, 32vw, 480px);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--flash);
    display: flex;
    gap: clamp(0.5rem, 2vw, 2rem);
}

.rk {
    display: inline-block;
    background: linear-gradient(180deg, var(--flash) 0%, var(--blade) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 60px rgba(245, 247, 250, 0.18);
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition: transform 1100ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1100ms ease;
}

.rk:nth-child(1) { transition-delay: 100ms; }
.rk:nth-child(2) { transition-delay: 350ms; }

.round-5.in-view .rk {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.verdict {
    font-family: var(--font-mono);
    font-size: clamp(13px, 1.1vw, 17px);
    line-height: 1.8;
    color: var(--blade);
    max-width: 56ch;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 800ms ease 700ms, transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 700ms;
}

.round-5.in-view .verdict {
    opacity: 1;
    transform: translateY(0);
}

.verdict-final {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--fog);
    text-transform: uppercase;
}

.seal {
    position: relative;
    margin-top: clamp(1rem, 3vh, 2rem);
    width: 96px;
    height: 96px;
    border: 2px solid var(--verdict);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-6deg);
    box-shadow: 0 0 24px rgba(212, 54, 75, 0.35), 0 0 0 4px rgba(212, 54, 75, 0.08);
    opacity: 0;
    transition: opacity 700ms ease 1100ms, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 1100ms;
}

.round-5.in-view .seal {
    opacity: 1;
    transform: rotate(-6deg) scale(1);
}

.seal-mark {
    position: absolute;
    font-family: var(--font-ref);
    font-weight: 900;
    font-size: 48px;
    color: var(--verdict);
    line-height: 1;
}

.seal-text {
    position: absolute;
    bottom: -1.7rem;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--ember);
    white-space: nowrap;
}

/* ----------- HUD ----------- */
.round-hud {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 100;
    font-family: var(--font-impact);
    font-size: 18px;
    letter-spacing: 0.1em;
    color: var(--blade);
    background: rgba(11, 13, 17, 0.65);
    border: 1px solid rgba(192, 197, 206, 0.15);
    padding: 0.45rem 0.9rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: color 240ms ease, border-color 240ms ease;
}

.round-hud.hot {
    color: var(--ember);
    border-color: var(--ember);
}

.hud-current {
    color: var(--stone);
}

.round-hud.hot .hud-current {
    color: var(--verdict);
}

.hud-sep {
    margin: 0 0.3rem;
    color: var(--fog);
}

/* ----------- Reveal animations ----------- */
.proposition-text .line,
.refutation-text .ref-line,
.turn-text .turn-line {
    transform: translateY(110%);
    opacity: 0;
    transition: transform 900ms cubic-bezier(0.2, 0.85, 0.2, 1), opacity 900ms ease;
}

.round.in-view .proposition-text .line,
.round.in-view .refutation-text .ref-line,
.round.in-view .turn-text .turn-line {
    transform: translateY(0);
    opacity: 1;
}

.proposition-text .line:nth-child(1) { transition-delay: 80ms; }
.proposition-text .line:nth-child(2) { transition-delay: 200ms; }
.proposition-text .line:nth-child(3) { transition-delay: 320ms; }
.proposition-text .line:nth-child(4) { transition-delay: 440ms; }

.refutation-text .ref-line:nth-child(1) { transition-delay: 200ms; }
.refutation-text .ref-line:nth-child(2) { transition-delay: 360ms; }
.refutation-text .ref-line:nth-child(3) { transition-delay: 520ms; }
.refutation-text .ref-line:nth-child(4) { transition-delay: 680ms; }

.turn-text .turn-line:nth-child(1) { transition-delay: 240ms; }
.turn-text .turn-line:nth-child(2) { transition-delay: 420ms; }
.turn-text .turn-line:nth-child(3) { transition-delay: 600ms; }
.turn-text .turn-line:nth-child(4) { transition-delay: 780ms; }

.frag-card {
    opacity: 0;
    transition: opacity 600ms ease, transform 700ms cubic-bezier(0.2, 0.85, 0.2, 1), border-color 280ms ease, box-shadow 280ms ease;
}

.round-3.in-view .frag-card {
    opacity: 1;
}

.round-3.in-view .frag-card:nth-child(1)  { transition-delay: 80ms; }
.round-3.in-view .frag-card:nth-child(2)  { transition-delay: 180ms; }
.round-3.in-view .frag-card:nth-child(3)  { transition-delay: 260ms; }
.round-3.in-view .frag-card:nth-child(4)  { transition-delay: 340ms; }
.round-3.in-view .frag-card:nth-child(5)  { transition-delay: 420ms; }
.round-3.in-view .frag-card:nth-child(6)  { transition-delay: 500ms; }
.round-3.in-view .frag-card:nth-child(7)  { transition-delay: 580ms; }
.round-3.in-view .frag-card:nth-child(8)  { transition-delay: 660ms; }

/* ----------- Mobile adaptation (vertical stacking) ----------- */
@media (max-width: 768px) {
    .round-1 .prop-zone, .round-2 .prop-zone, .round-4 .prop-zone {
        clip-path: polygon(0 0, 100% 0, 100% 50%, 0 55%);
        padding: 5rem 1.5rem 2rem;
    }
    .round-1 .anti-zone, .round-2 .anti-zone, .round-4 .anti-zone {
        clip-path: polygon(0 55%, 100% 50%, 100% 100%, 0 100%);
        padding: 2rem 1.5rem 4rem;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .round-4 .prop-zone {
        clip-path: polygon(0 0, 100% 0, 100% 30%, 0 35%);
    }
    .round-4 .anti-zone {
        clip-path: polygon(0 35%, 100% 30%, 100% 100%, 0 100%);
    }

    .proposition-text { max-width: 100%; font-size: clamp(40px, 11vw, 80px); }
    .refutation-text { font-size: clamp(32px, 9vw, 64px); }
    .turn-text { text-align: left; font-size: clamp(28px, 8vw, 56px); }
    .turn-body { text-align: left; margin-left: 0; }

    .bento-grid {
        grid-template-columns: 1fr;
    }
    .frag-card { grid-column: span 1 !important; grid-row: auto !important; }
    .frag-card.tilt-a, .frag-card.tilt-b, .frag-card.tilt-c { transform: none; }
    .frag-card:nth-child(odd) { background: var(--graphite); }
    .frag-card:nth-child(even) { background: linear-gradient(180deg, #14171f, var(--abyss)); }

    .ronpa-kanji { font-size: clamp(120px, 38vw, 240px); }
    .scroll-cue { display: none; }
    .round-hud { top: 1rem; right: 1rem; font-size: 14px; padding: 0.3rem 0.6rem; }
}