/* hwaklyul.com -- terminal-baroque probability dashboard */
/* Palette: #0A0A0F, #12121A, #C9A84C, #8B7028, #F0E6D2, #4AE68A, #E6A84A, #C43B3B, #1A0A1E */

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

html{font-size:16px}

body{
    background:#0A0A0F;
    color:#F0E6D2;
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.75rem,1.2vw,1rem);
    line-height:1.6;
    overflow:hidden;
    height:100svh;
}

/* Dashboard grid */
.dashboard{
    display:grid;
    grid-template-areas:
        "north north north"
        "west  throne east"
        "south south south";
    grid-template-columns:1fr 3fr 1fr;
    grid-template-rows:auto 1fr auto;
    gap:8px;
    height:100svh;
    padding:8px;
    background:#0A0A0F;
}

/* Panels */
.panel{
    background:#12121A;
    border:3px solid #C9A84C;
    position:relative;
    padding:clamp(1rem,2vw,1.5rem);
    overflow:hidden;
    opacity:0;
    transition:opacity 0.6s ease,transform 0.3s ease,box-shadow 0.3s ease;
}

.panel.revealed{
    opacity:1;
}

.panel:hover{
    transform:scale(1.03);
    box-shadow:0 0 40px rgba(201,168,76,0.15);
}

.gallery-north{
    opacity:1;
}

/* Ornamental corners */
.ornament-corner{
    position:absolute;
    width:12px;
    height:12px;
}

.ornament-corner.tl{top:6px;left:6px;border-top:2px solid #8B7028;border-left:2px solid #8B7028}
.ornament-corner.tr{top:6px;right:6px;border-top:2px solid #8B7028;border-right:2px solid #8B7028}
.ornament-corner.bl{bottom:6px;left:6px;border-bottom:2px solid #8B7028;border-left:2px solid #8B7028}
.ornament-corner.br{bottom:6px;right:6px;border-bottom:2px solid #8B7028;border-right:2px solid #8B7028}

/* Grid areas */
.gallery-north{grid-area:north;padding:0.5rem 1rem;overflow:hidden}
.chamber-west{grid-area:west}
.throne{grid-area:throne;display:flex;align-items:center;justify-content:center}
.chamber-east{grid-area:east;display:flex;flex-direction:column;align-items:center;justify-content:center}
.antechamber-south{grid-area:south;padding:0.75rem 1rem}

/* Ticker */
.ticker-wrap{overflow:hidden}

.ticker-track{
    display:flex;
    gap:1.5rem;
    white-space:nowrap;
    animation:tickerScroll 30s linear infinite;
    font-size:clamp(0.65rem,1vw,0.85rem);
    letter-spacing:0.03em;
    color:#F0E6D2;
}

.ticker-sep{color:#C9A84C}

@keyframes tickerScroll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

/* Panel titles */
.panel-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1rem,2vw,1.5rem);
    letter-spacing:0.06em;
    color:#C9A84C;
    margin-bottom:1rem;
}

/* Terminal output */
.terminal-output{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
}

.terminal-line{
    display:flex;
    justify-content:space-between;
    gap:0.5rem;
    font-size:clamp(0.65rem,0.9vw,0.8rem);
}

.term-label{color:#4AE68A;font-weight:600}
.term-value{color:#F0E6D2}

/* Throne */
.throne-border{
    border:2px solid #C9A84C;
    outline:1px solid #8B7028;
    outline-offset:12px;
    padding:clamp(2rem,4vw,4rem);
    text-align:center;
    max-width:600px;
    position:relative;
}

.throne-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,4.5rem);
    letter-spacing:0.06em;
    line-height:1.15;
    color:#F0E6D2;
}

.dot{color:#C9A84C}

.throne-korean{
    font-family:'Playfair Display',serif;
    font-weight:400;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:#C9A84C;
    margin-top:0.5rem;
}

.throne-sub{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1rem,2vw,1.5rem);
    color:#E6A84A;
    margin-top:0.5rem;
}

.prob-display{
    margin:2rem 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.25rem;
}

.prob-value{
    font-family:'IBM Plex Mono',monospace;
    font-weight:600;
    font-size:clamp(2rem,5vw,4rem);
    color:#4AE68A;
}

.prob-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.6rem,0.9vw,0.75rem);
    letter-spacing:0.06em;
    color:#8B7028;
}

.throne-body{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.75rem,1vw,0.9rem);
    color:#F0E6D2;
    max-width:40ch;
    margin:0 auto;
    line-height:1.6;
}

/* Wheel */
.wheel-container{
    width:clamp(120px,15vw,180px);
    margin:0 auto;
}

.wheel-svg{
    width:100%;
    height:auto;
    animation:wheelSpin 30s linear infinite;
}

@keyframes wheelSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

.wheel-label{
    font-size:clamp(0.6rem,0.8vw,0.7rem);
    color:#8B7028;
    letter-spacing:0.06em;
    text-align:center;
    margin-top:0.75rem;
}

/* Command line */
.command-line{
    display:flex;
    align-items:center;
    gap:0.5rem;
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.75rem,1vw,0.9rem);
}

.prompt{color:#4AE68A}
.command-text{color:#F0E6D2}

.cursor-blink{
    color:#4AE68A;
    animation:blink 1s step-end infinite;
}

@keyframes blink{
    0%,100%{opacity:1}
    50%{opacity:0}
}

/* Responsive */
@media(max-width:768px){
    body{overflow-y:auto;height:auto}
    .dashboard{
        grid-template-areas:
            "north"
            "throne"
            "west"
            "east"
            "south";
        grid-template-columns:1fr;
        grid-template-rows:auto;
        height:auto;
    }
    .throne{min-height:80svh}
    .panel:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
    .panel{opacity:1;transition:none}
    .ticker-track{animation:none}
    .wheel-svg{animation:none}
    .cursor-blink{animation:none}
}