/* ========================================================================== 
   Impossible Wind — a cellular atmosphere on a sphere
   ========================================================================== */

.wind-head { position:relative; isolation:isolate; }
.wind-head::before,
.wind-head::after {
    content:"";
    position:absolute;
    z-index:-1;
    border-radius:50%;
    pointer-events:none;
    filter:blur(20px);
}
.wind-head::before {
    width:min(510px, 52vw);
    aspect-ratio:1;
    right:-4%;
    top:-68%;
    background:radial-gradient(circle, color-mix(in srgb, var(--cyan) 13%, transparent), transparent 67%);
}
.wind-head::after {
    width:min(320px, 34vw);
    aspect-ratio:1;
    right:17%;
    top:-32%;
    background:radial-gradient(circle, color-mix(in srgb, var(--rose) 8%, transparent), transparent 70%);
}
.wind-head .tag-row { margin-bottom:1rem; }

.wind-shell { grid-template-columns:minmax(0, 1fr) 334px; }
.wind-stage {
    isolation:isolate;
    background:#02050d;
    border-color:color-mix(in srgb, var(--cyan) 35%, var(--line));
    box-shadow:0 28px 80px rgba(0, 3, 12, .48), inset 0 0 90px rgba(24, 155, 208, .05);
}
.wind-stage::before,
.wind-stage::after {
    content:"";
    position:absolute;
    z-index:2;
    pointer-events:none;
}
.wind-stage::before {
    inset:0 0 50px;
    background:
        radial-gradient(circle at 50% 49%, transparent 42%, rgba(1, 3, 10, .12) 61%, rgba(1, 2, 8, .5) 100%),
        linear-gradient(180deg, rgba(91, 223, 255, .035), transparent 24%, rgba(5, 3, 18, .2));
}
.wind-stage::after {
    left:12%;
    right:12%;
    bottom:54px;
    height:17%;
    border-radius:50%;
    background:radial-gradient(ellipse, rgba(0, 0, 0, .62), transparent 67%);
    filter:blur(16px);
}
.wind-stage canvas {
    position:relative;
    z-index:1;
    height:min(76vh, 720px);
    min-height:500px;
    background:#02050d;
    cursor:grab;
    touch-action:none;
}
.wind-stage canvas:active { cursor:grabbing; }
.wind-stage canvas:focus-visible {
    outline:2px solid var(--cyan);
    outline-offset:-3px;
}
.wind-stage .sim-bar { position:relative; z-index:5; }
.wind-speed-label { gap:.5rem; }
.wind-speed-label input { width:104px; }

.wind-hud {
    position:absolute;
    z-index:5;
    top:12px;
    left:12px;
    right:12px;
    display:flex;
    flex-wrap:wrap;
    gap:.42rem;
    pointer-events:none;
}
.wind-hud-chip {
    display:inline-flex;
    align-items:center;
    gap:.42rem;
    min-height:28px;
    padding:.28rem .58rem;
    border:1px solid rgba(89, 214, 255, .25);
    border-radius:999px;
    background:rgba(2, 6, 16, .66);
    color:#b9d4e7;
    backdrop-filter:blur(11px);
    -webkit-backdrop-filter:blur(11px);
    font-family:var(--font-mono);
    font-size:.64rem;
    letter-spacing:.07em;
    text-transform:uppercase;
}
.wind-hud-chip i {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#70ecff;
    box-shadow:0 0 11px #70ecff;
    animation:wind-breathe 1.9s ease-in-out infinite;
}
.wind-hud-chip.is-paused i { background:#f5a7d5; box-shadow:0 0 9px #f5a7d5; animation:none; }
@keyframes wind-breathe { 50% { opacity:.35; transform:scale(.68); } }

.wind-axis {
    position:absolute;
    z-index:5;
    right:15px;
    top:15px;
    width:36px;
    height:36px;
    border:1px solid rgba(113, 218, 255, .22);
    border-radius:50%;
    background:rgba(2, 6, 16, .56);
    pointer-events:none;
}
.wind-axis::before,
.wind-axis::after,
.wind-axis span,
.wind-axis i { content:""; position:absolute; display:block; }
.wind-axis::before { left:17px; top:5px; width:1px; height:26px; background:linear-gradient(#8deeff, rgba(141,238,255,.05)); transform:rotate(24deg); }
.wind-axis::after { left:6px; top:17px; width:24px; height:1px; background:linear-gradient(90deg, transparent, #a79cff, transparent); transform:rotate(-13deg); }
.wind-axis span { left:15px; top:15px; width:5px; height:5px; border-radius:50%; background:#f5fbff; box-shadow:0 0 8px #dff9ff; }
.wind-axis i { left:16px; top:3px; border:3px solid transparent; border-bottom-color:#8deeff; }

.wind-camera.is-active {
    color:var(--cyan);
    border-color:color-mix(in srgb, var(--cyan) 40%, var(--line));
    background:color-mix(in srgb, var(--cyan) 7%, var(--panel));
}
.wind-notice { border-color:color-mix(in srgb, var(--cyan) 28%, var(--line)); }
.wind-notice > svg { color:var(--cyan); }

.wind-panel { overflow-x:hidden; }
.wind-tools {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:100%;
}
.wind-readout { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.wind-readout div {
    min-width:0;
    padding:.55rem .62rem;
    border:1px solid var(--line);
    border-radius:8px;
    background:color-mix(in srgb, var(--raised) 52%, transparent);
}
.wind-readout div b { overflow-wrap:anywhere; }

.wind-proof {
    display:flex;
    align-items:flex-start;
    gap:.62rem;
    margin-top:.8rem;
    padding:.7rem .72rem;
    border:1px solid color-mix(in srgb, var(--cyan) 33%, var(--line));
    border-radius:9px;
    background:
        radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 45%),
        var(--panel);
}
.wind-proof > i {
    flex:none;
    width:10px;
    height:10px;
    margin-top:.2rem;
    border:2px solid var(--cyan);
    border-radius:50%;
    box-shadow:0 0 12px color-mix(in srgb, var(--cyan) 60%, transparent);
}
.wind-proof span,
.wind-proof small { display:block; }
.wind-proof b { color:var(--cyan); font-size:.78rem; font-weight:600; }
.wind-proof small { margin-top:.12rem; color:var(--ink-4); font-size:.68rem; line-height:1.4; }
.wind-proof[data-state="calm"] > i { border-color:var(--violet); box-shadow:none; }
.wind-proof[data-state="calm"] b { color:var(--violet); }

.wind-rule-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.85rem;
    margin:1.45rem 0 2rem;
}
.wind-rule {
    position:relative;
    min-width:0;
    padding:1.08rem 1.08rem 1.1rem 4.8rem;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    background:
        radial-gradient(circle at 8% 50%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 35%),
        var(--surface);
    overflow:hidden;
}
.wind-rule > span {
    position:absolute;
    top:.65rem;
    right:.72rem;
    color:var(--ink-4);
    font-family:var(--font-mono);
    font-size:.62rem;
    letter-spacing:.12em;
}
.wind-rule h3 { margin:0 0 .3rem; font-size:1rem; }
.wind-rule p { margin:0; color:var(--ink-3); font-size:.82rem; line-height:1.55; }
.wind-rule-icon {
    position:absolute;
    left:1.05rem;
    top:50%;
    width:2.75rem;
    height:2.75rem;
    border:1px solid color-mix(in srgb, var(--cyan) 34%, var(--line));
    border-radius:50%;
    transform:translateY(-50%);
    box-shadow:inset 0 0 16px color-mix(in srgb, var(--cyan) 8%, transparent);
}
.wind-rule-icon::before,
.wind-rule-icon::after { content:""; position:absolute; }
.wind-rule-icon--listen::before { inset:7px; border:1px solid var(--cyan); border-radius:50%; }
.wind-rule-icon--listen::after { left:20px; top:3px; width:1px; height:35px; background:var(--violet); transform:rotate(38deg); }
.wind-rule-icon--turn::before { inset:7px; border:2px solid transparent; border-top-color:var(--cyan); border-right-color:var(--cyan); border-radius:50%; transform:rotate(20deg); }
.wind-rule-icon--turn::after { right:5px; top:10px; border:4px solid transparent; border-left-color:var(--cyan); transform:rotate(28deg); }
.wind-rule-icon--ignite::before { inset:10px; border-radius:50%; background:#f4fbff; box-shadow:0 0 7px #fff, 0 0 15px var(--cyan), 0 0 24px var(--violet); }
.wind-rule-icon--ignite::after { inset:5px; border:1px solid rgba(112,236,255,.55); border-radius:50%; }
.wind-rule-icon--rewrite::before { left:8px; right:8px; top:12px; height:1px; background:var(--rose); box-shadow:0 8px 0 var(--cyan), 0 16px 0 var(--violet); transform:rotate(-18deg); }
.wind-rule-icon--rewrite::after { left:19px; top:6px; width:5px; height:31px; border-left:1px solid #eaffff; transform:rotate(24deg); }

.wind-theorem {
    position:relative;
    display:grid;
    grid-template-columns:128px minmax(0, 1fr);
    align-items:center;
    gap:1.3rem;
    margin:2rem 0 2.2rem;
    padding:1.25rem 1.35rem;
    border:1px solid color-mix(in srgb, var(--cyan) 32%, var(--line));
    border-radius:var(--radius-sm);
    background:
        radial-gradient(circle at 9% 50%, color-mix(in srgb, var(--cyan) 13%, transparent), transparent 25%),
        radial-gradient(circle at 94% 16%, color-mix(in srgb, var(--violet) 8%, transparent), transparent 35%),
        var(--surface);
    overflow:hidden;
}
.wind-theorem h3 { margin:.18rem 0 .35rem; font-size:clamp(1.08rem, 2vw, 1.35rem); }
.wind-theorem p { margin:0; color:var(--ink-3); font-size:.88rem; line-height:1.6; }
.wind-theorem-orbit {
    position:relative;
    width:96px;
    height:96px;
    margin:auto;
    border:1px solid color-mix(in srgb, var(--cyan) 58%, transparent);
    border-radius:50%;
    box-shadow:inset -12px -8px 22px rgba(9, 51, 87, .28), 0 0 25px color-mix(in srgb, var(--cyan) 11%, transparent);
}
.wind-theorem-orbit::before,
.wind-theorem-orbit::after {
    content:"";
    position:absolute;
    left:-9px;
    top:36px;
    width:112px;
    height:24px;
    border:1px solid var(--cyan);
    border-radius:50%;
    transform:rotate(-18deg);
    opacity:.62;
}
.wind-theorem-orbit::after { transform:rotate(64deg); border-color:var(--violet); }
.wind-theorem-orbit i { position:absolute; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 10px #fff, 0 0 18px var(--cyan); }
.wind-theorem-orbit i:first-child { left:21px; top:8px; }
.wind-theorem-orbit i:last-child { right:18px; bottom:9px; box-shadow:0 0 10px #fff, 0 0 18px var(--rose); }

@media (max-width:1080px) {
    .wind-shell { grid-template-columns:minmax(0, 1fr); }
    .wind-panel { overflow:visible; }
}

@media (max-width:760px) {
    .wind-rule-grid { grid-template-columns:minmax(0, 1fr); }
    .wind-stage canvas { height:min(69vh, 610px); min-height:420px; }
}

@media (max-width:620px) {
    .wind-stage canvas { height:min(64vh, 540px); min-height:370px; }
    .wind-stage::before { bottom:96px; }
    .wind-stage::after { bottom:98px; }
    .wind-hud { top:8px; left:8px; right:50px; }
    #wind-hud-tool { display:none; }
    .wind-axis { right:8px; top:8px; }
    .wind-theorem { grid-template-columns:minmax(0, 1fr); text-align:center; }
    .wind-theorem-orbit { width:82px; height:82px; }
    .wind-theorem-orbit::before,
    .wind-theorem-orbit::after { left:-7px; top:31px; width:94px; height:20px; }
}

@media (prefers-reduced-motion:reduce) {
    .wind-hud-chip i { animation:none; }
}