/* Perfectly Imperfective: site styles (walnut + brass, gouache) */
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/CormorantGaramond-VariableFont_wght.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/CormorantGaramond-Italic-VariableFont_wght.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}

:root{
  --cream:#f4e6c8; --cream-2:#e9d3a6; --ink:#2a170c; --ink-soft:#4a2c18;
  --walnut:#3a2013; --walnut-2:#5a3420;
  --brass:#c99a42; --brass-hi:#f3d58a; --brass-lo:#7a5520;
  --brass-grad:linear-gradient(135deg,#f6dc94 0%,#d0a24a 32%,#8f6426 62%,#d9b061 100%);
  --serif:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --shadow:0 10px 30px rgba(20,8,2,.45);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--serif);color:var(--cream);background:#2b170c;
  font-size:18px;line-height:1.45;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* full-viewport painted campus background + warm vignette */
.bg{position:fixed;inset:0;z-index:-2;
  background:#3b2414 image-set(url("../img/bellwether_website_bg_2560x1440.webp") type("image/webp") 1x,url("../img/bellwether_website_bg_2560x1440.jpg") type("image/jpeg") 1x) center/cover no-repeat;}
@media (max-width:1400px){.bg{background-image:image-set(url("../img/bellwether_website_bg_1920x1080.webp") type("image/webp") 1x,url("../img/bellwether_website_bg_1920x1080.jpg") type("image/jpeg") 1x)}}
@supports not (background-image:image-set(url("x.jpg") type("image/jpeg") 1x)){.bg{background-image:url("../img/bellwether_website_bg_1920x1080.jpg")}}
.bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%,rgba(40,18,6,0) 35%,rgba(40,18,6,.55) 100%),linear-gradient(180deg,rgba(30,14,5,.25),rgba(30,14,5,.05) 30%,rgba(30,14,5,.35));}
.bg.dim::after{background:radial-gradient(ellipse at 50% 45%,rgba(40,18,6,.35) 20%,rgba(30,12,4,.8) 100%)}

a{color:var(--brass-hi)}
:focus-visible{outline:3px solid var(--brass-hi);outline-offset:3px}

/* HUD-style walnut bar with brass edge lines */
.wood{background:#4a2a18 url("../img/wood_tile.webp") repeat;background-size:384px}
.hud.wood{background-image:linear-gradient(rgba(30,14,6,.25),rgba(30,14,6,.35)),url("../img/wood_tile.webp")}
.hud{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;
  padding:8px clamp(10px,3vw,28px);min-height:58px;
  box-shadow:inset 0 2px 0 var(--brass-hi),inset 0 4px 0 var(--brass-lo),inset 0 -2px 0 var(--brass-lo),inset 0 -4px 0 var(--brass-hi),0 6px 18px rgba(0,0,0,.45);}
.hud .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream);font-weight:600;font-size:1.25rem;letter-spacing:.02em;text-shadow:0 1px 2px #000}
.hud .brand img{width:38px;height:38px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.hud .spacer{flex:1}
.hud .hud-title{font-style:italic;color:var(--cream-2);font-size:1.15rem;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* round brass button (back, small actions) */
.round-btn{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;flex:none;
  background:url("../img/btn.webp") center/100% no-repeat;border:0;cursor:pointer;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));transition:transform .15s ease,filter .15s ease}
.round-btn img{width:64%;height:64%}
.round-btn:hover,.round-btn:focus-visible{background-image:url("../img/btn_hover.webp");transform:translateY(-1px) scale(1.05)}
.with-label{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--cream);font-weight:600;font-size:1.05rem}

/* brass-framed walnut plaque */
.plaque.wood,.frame.wood{background-image:linear-gradient(rgba(28,13,5,.58),rgba(28,13,5,.66)),url("../img/wood_tile.webp")}
.plaque{position:relative;border-radius:14px;padding:clamp(14px,2.4vw,26px) clamp(18px,3vw,40px);
  box-shadow:0 0 0 2px var(--brass-lo),0 0 0 5px var(--brass),0 0 0 7px var(--brass-lo),var(--shadow);}
.plaque::before{content:"";position:absolute;inset:6px;border:1px solid rgba(243,213,138,.35);border-radius:10px;pointer-events:none}

/* ---------- HOME ---------- */
.home{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.home main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.2vh,26px);padding:clamp(10px,2vh,24px) 12px}
.title-block{text-align:center;opacity:0;animation:fadeUp 1s ease .9s forwards}
.title-block h1{margin:0;font-weight:600;font-size:clamp(2rem,5.2vw,4rem);line-height:1.02;letter-spacing:.01em;color:var(--cream);
  text-shadow:0 2px 0 rgba(42,23,12,.9),0 6px 22px rgba(20,8,2,.75)}
.title-block h1 .sub{display:block;font-style:italic;font-weight:500;font-size:.62em;color:var(--cream-2);margin-top:.1em}
.title-block .by{margin:.35em 0 0;font-size:clamp(1.2rem,2vw,1.55rem);font-weight:600;font-style:italic;letter-spacing:.06em;color:var(--brass-hi);
  text-shadow:0 1px 2px #000,0 0 10px rgba(0,0,0,.85),0 0 22px rgba(0,0,0,.5);display:inline-flex;align-items:center;gap:.5em}
.title-block .by img{width:1.6em;height:1.6em}

.cog-stage{--S:min(64vh,90vw,640px);width:var(--S);height:var(--S);position:relative;filter:drop-shadow(0 18px 22px rgba(20,8,2,.55))}
.cog{position:absolute;inset:0;transform-origin:50% 50%;
  animation:cogIn 2.6s cubic-bezier(.16,.84,.24,1) .15s both}
.cog>.wheel{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.cog .hub{position:absolute;left:50%;top:50%;width:22%;height:22%;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.cog-btn{--d:calc(var(--S)*.172);position:absolute;width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);
  border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2%;
  background:url("../img/btn.webp") center/100% no-repeat;text-decoration:none;color:var(--cream);
  font-weight:700;font-size:clamp(11px,calc(var(--S)*.029),19px);letter-spacing:.02em;line-height:1;
  text-shadow:0 1px 1px #000,0 0 6px rgba(0,0,0,.7);pointer-events:none;transition:transform .2s ease,filter .2s ease}
.cog-btn svg,.cog-btn img{width:40%;height:40%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.cog-btn svg{fill:var(--cream)}
/* six pads on the cog art, 60deg apart clockwise from the top, radius 25% of the stage */
.cog-btn.top{left:50%;top:25%}.cog-btn.upper-right{left:71.651%;top:37.5%}.cog-btn.lower-right{left:71.651%;top:62.5%}
.cog-btn.bottom{left:50%;top:75%}.cog-btn.lower-left{left:28.349%;top:62.5%}.cog-btn.upper-left{left:28.349%;top:37.5%}
.settled .cog-btn{pointer-events:auto}
.cog-btn:hover,.cog-btn:focus-visible{background-image:url("../img/btn_hover.webp");transform:scale(1.07);filter:drop-shadow(0 0 10px rgba(243,213,138,.55))}
.cog-btn.is-disabled{cursor:not-allowed}
.cog-btn.is-disabled:hover{transform:none}
.cog-btn .tip{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:15px;font-weight:600;font-style:italic;color:var(--ink);background:var(--cream);padding:4px 10px;border-radius:6px;
  box-shadow:0 0 0 2px var(--brass),var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s}
.cog-btn.is-disabled:hover .tip,.cog-btn.is-disabled:focus-visible .tip,.cog-btn.is-disabled.show-tip .tip{opacity:1}
.home footer{text-align:center;padding:10px 12px 16px;font-size:.95rem;color:var(--cream-2);text-shadow:0 1px 2px #000;opacity:0;animation:fadeUp 1s ease 1.6s forwards}

@keyframes cogIn{
  0%{transform:translateX(-70vw) rotate(-720deg) scale(.42);opacity:0}
  12%{opacity:1}
  78%{transform:translateX(0) rotate(9deg) scale(1.02)}
  90%{transform:translateX(0) rotate(-2.5deg) scale(.995)}
  100%{transform:translateX(0) rotate(0deg) scale(1);opacity:1}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- PLAY ---------- */
.page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.page main{flex:1;width:100%;max-width:1320px;margin:0 auto;padding:clamp(12px,2.5vw,28px) clamp(8px,2vw,24px) 28px}
.frame{border-radius:18px;padding:clamp(8px,1.4vw,16px);
  box-shadow:0 0 0 2px var(--brass-lo),0 0 0 5px var(--brass),0 0 0 7px var(--brass-lo),var(--shadow);}
.screen{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 210px);margin:0 auto;background:#120904;border-radius:8px;overflow:hidden;
  box-shadow:0 0 0 2px var(--brass-hi),0 0 0 4px var(--brass-lo),inset 0 0 30px #000}
@supports (aspect-ratio:16/9){.screen{width:min(100%,calc((100dvh - 210px)*16/9))}}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.loader{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;border:0;padding:0;width:100%;font:inherit;color:var(--cream);
  background:#120904 url("../../game/web-presplash.jpg") center/cover no-repeat}
.loader::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse,rgba(20,8,2,.15),rgba(20,8,2,.75))}
.loader .inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-shadow:0 2px 4px #000}
.loader .big{width:clamp(70px,10vw,110px);height:clamp(70px,10vw,110px);display:grid;place-items:center;border-radius:50%;
  background:url("../img/btn.webp") center/100% no-repeat;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));transition:transform .2s}
.loader .big svg{width:42%;height:42%;fill:var(--cream);margin-left:8%}
.loader:hover .big,.loader:focus-visible .big{transform:scale(1.07);background-image:url("../img/btn_hover.webp")}
.loader strong{font-size:clamp(1.3rem,2.6vw,2rem);font-weight:700}
.loader small{font-size:1rem;color:var(--cream-2);font-style:italic}
.below{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;color:var(--cream);text-shadow:0 1px 2px #000}
.note{margin:0;font-style:italic;font-size:1.1rem;font-weight:600;text-shadow:0 1px 2px #000,0 0 10px rgba(0,0,0,.9)}
.note b{font-style:normal;color:var(--brass-hi)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 18px 8px 10px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  font:600 1.05rem var(--serif);color:var(--cream);
  box-shadow:0 0 0 2px var(--brass-lo),0 0 0 4px var(--brass),0 4px 10px rgba(0,0,0,.5);transition:transform .15s,filter .15s}
.pill:hover,.pill:focus-visible{transform:translateY(-1px);filter:brightness(1.12)}
.pill svg{width:20px;height:20px;fill:var(--brass-hi)}

/* ---------- DOWNLOADS ---------- */
.dl-head{text-align:center;margin:4px auto 22px;max-width:760px}
.dl-head h1{margin:0;font-size:clamp(2rem,4.6vw,3.2rem);font-weight:600;text-shadow:0 2px 0 rgba(42,23,12,.9),0 6px 20px rgba(0,0,0,.7)}
.dl-head p{margin:.3em 0 0;font-style:italic;font-size:1.2rem;font-weight:600;color:var(--cream);text-shadow:0 1px 2px #000,0 0 12px rgba(0,0,0,.9)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px;max-width:1120px;margin:0 auto}
.card{display:flex;flex-direction:column;gap:10px}
.card h2{margin:0;display:flex;align-items:center;gap:12px;font-size:1.65rem;font-weight:700;color:var(--cream)}
.card h2 .ico{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:url("../img/btn.webp") center/100%}
.card h2 .ico svg{width:52%;height:52%;fill:var(--cream)}
.card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:1.02rem}
.card dt{color:var(--brass-hi);font-weight:600}
.card dd{margin:0;color:var(--cream);overflow-wrap:anywhere}
.card .fname{font-family:ui-monospace,Consolas,monospace;font-size:.82rem}
.card p.hint{margin:0;font-size:.98rem;font-style:italic;color:var(--cream-2)}
.card details{font-size:.85rem;color:var(--cream-2)}
.card details code{font-size:.75rem;overflow-wrap:anywhere;color:var(--cream)}
.card summary{cursor:pointer}
.dl-btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:10px 22px 10px 12px;border-radius:999px;text-decoration:none;
  font:700 1.15rem var(--serif);color:var(--ink);background:var(--brass-grad);
  box-shadow:0 0 0 2px var(--brass-lo),inset 0 1px 0 rgba(255,255,255,.6),0 5px 12px rgba(0,0,0,.5);transition:transform .15s,filter .15s}
.dl-btn svg{width:22px;height:22px;fill:var(--ink)}
.dl-btn:hover,.dl-btn:focus-visible{transform:translateY(-2px);filter:brightness(1.08)}
.dl-foot{max-width:1120px;margin:26px auto 0;text-align:center;color:var(--cream);font-weight:600;font-size:1.1rem;font-style:italic;text-shadow:0 1px 2px #000,0 0 12px rgba(0,0,0,.9)}

/* ---------- 404 ---------- */
.nf{flex:1;display:grid;place-items:center;padding:24px}
.nf .plaque{text-align:center;max-width:520px}
.nf img.spin{width:150px;height:150px;animation:slow 18s linear infinite;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.nf h1{margin:.2em 0 0;font-size:2.4rem}
.nf p{margin:.3em 0 1em;font-style:italic;color:var(--cream-2)}
@keyframes slow{to{transform:rotate(360deg)}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- mobile ---------- */
@media (max-width:640px){
  body{font-size:17px}
  .hud{min-height:52px}
  .hud .brand span{display:none}
  .cog-stage{--S:min(92vw,58vh)}
  .cog-btn{--d:calc(var(--S)*.2)}
  .below{flex-direction:column;align-items:stretch;text-align:center}
  .below .pill{justify-content:center}
}
@media (max-height:560px) and (orientation:landscape){
  .cog-stage{--S:min(70vh,60vw)}
  .title-block h1{font-size:1.8rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .cog{animation:fadeIn .6s ease both}
  .title-block,.home footer{animation:fadeIn .6s ease forwards}
  .nf img.spin{animation:none}
  *{transition:none!important}
}
.rotate-hint{display:none}
@media (max-width:640px) and (orientation:portrait){.rotate-hint{display:inline}}
.loader.offline{cursor:default}.loader.offline .big{opacity:.55}.loader.offline strong{max-width:90%;text-align:center}.loader.offline small{max-width:80%;text-align:center}
.loader.offline::before{background:rgba(18,8,3,.84)}.loader.offline strong{font-size:clamp(1.2rem,2.4vw,1.8rem)}.loader.offline small{font-size:1.05rem}

/* ---------- CHANGELOG / ABOUT ---------- */
.text-page{max-width:860px!important}
.log{display:flex;flex-direction:column;gap:26px}
.log-entry header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;border-bottom:1px solid rgba(243,213,138,.35);padding-bottom:8px;margin-bottom:10px}
.log-entry h2{margin:0;font-size:1.65rem;font-weight:700;color:var(--cream)}
.log-entry time{font-style:italic;font-weight:600;color:var(--brass-hi)}
.log-entry .log-intro{margin:0 0 .7em;font-size:1.18rem;line-height:1.45}
.log-entry ul{margin:0;padding-left:1.3em;font-size:1.15rem}
.log-entry li{margin:.2em 0}
.log-entry li::marker{color:var(--brass-hi)}
.about{text-align:center}
.about .soon{margin:.4em 0;font-size:clamp(1.6rem,3.6vw,2.2rem);font-style:italic;font-weight:600;color:var(--cream)}
.text-foot{text-align:center;margin:28px 0 0}
.text-foot .dl-btn{display:inline-flex}

/* ---------- FEEDBACK / SUPPORT button (fixed, bottom-left, every page) ---------- */
.support-fab{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:20;
  display:inline-flex;align-items:center;gap:7px;padding:6px 14px 6px 8px;border-radius:999px;text-decoration:none;
  font:700 1rem/1 var(--serif);letter-spacing:.01em;color:var(--ink);background:var(--brass-grad);
  box-shadow:0 0 0 2px var(--brass-lo),inset 0 1px 0 rgba(255,255,255,.6),0 4px 12px rgba(0,0,0,.55);transition:transform .15s,filter .15s}
.support-fab svg{width:20px;height:20px;max-width:20px;max-height:20px;fill:var(--ink);flex:none}
.support-fab:hover,.support-fab:focus-visible{transform:translateY(-2px);filter:brightness(1.08)}
/* keep page content clear of the button */
.page main{padding-bottom:72px}
.home footer{padding-bottom:16px}
@media (max-width:900px){.home footer{padding-left:200px}}
@media (max-width:640px){.home footer{padding:10px 12px 64px}}
/* play page: shrink the game screen a little so the frame + controls row end above the button */
.play main{padding-bottom:64px}
.play .screen{max-height:calc(100dvh - 262px)}
@supports (aspect-ratio:16/9){.play .screen{width:min(100%,calc((100dvh - 262px)*16/9))}}
@media (max-width:640px){
  .support-fab{padding:5px 12px 5px 7px;font-size:.92rem}
  .support-fab svg{width:18px;height:18px}
}

/* ---------- SUPPORT FORM ---------- */
.support-form{display:flex;flex-direction:column;gap:16px;max-width:820px;margin:0 auto}
.support-form .row{display:grid;gap:16px}
.support-form .row.two{grid-template-columns:1fr 1fr}
.support-form .row.three{grid-template-columns:1.1fr 1fr 1fr}
.support-form .field{display:flex;flex-direction:column;gap:5px;min-width:0}
.support-form .field>span{font-weight:700;font-size:1.08rem;color:var(--cream)}
.support-form .field em{font-weight:500;color:var(--cream-2)}
.support-form .req{color:var(--brass-hi)}
.support-form small{font-style:italic;color:var(--cream-2);font-size:.92rem}
.support-form input[type=text],.support-form input[type=email],.support-form select,.support-form textarea{
  width:100%;font:500 1.05rem var(--serif);color:var(--ink);background:#f6ead0;border:0;border-radius:8px;padding:9px 12px;
  box-shadow:0 0 0 2px var(--brass-lo),inset 0 2px 4px rgba(42,23,12,.25)}
.support-form textarea{resize:vertical;min-height:90px;line-height:1.35}
.support-form textarea.mono{font:.85rem/1.35 ui-monospace,Consolas,monospace}
.support-form input:focus,.support-form select:focus,.support-form textarea:focus{outline:3px solid var(--brass-hi);outline-offset:1px}
.support-form input[type=file]{font:500 1rem var(--serif);color:var(--cream)}
.support-form input[type=file]::file-selector-button{font:700 1rem var(--serif);color:var(--ink);background:var(--brass-grad);border:0;border-radius:999px;
  padding:6px 14px;margin-right:10px;cursor:pointer;box-shadow:0 0 0 2px var(--brass-lo)}
.support-form .file-msg:not(:empty){color:#ffb38a;font-weight:600}
.support-form .form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:4px 0 0}
.support-form .form-actions .dl-btn{border:0;cursor:pointer;margin:0}
.support-form .form-note{font-style:italic;color:var(--cream-2)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.thanks-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
@media (max-width:640px){
  .support-form .row.two,.support-form .row.three{grid-template-columns:1fr}
}