/* BozeWoW portal stylesheet - Phase 4b.
   Ported from the approved Claude Design landing (frost-forward direction).
   Landing-only rules are scoped under body.wide; form pages share the chrome. */

@font-face{
  font-family:'LifeCraft';
  src:url("../fonts/LifeCraft.woff2") format("woff2"),
      url("../fonts/LifeCraft.ttf") format("truetype");
  font-display:swap;
}

:root{
  --gold:#ffd100; --gold-link:#ffc72e; --gold-strip:#ffcc33;
  --frost:#a8dcff; --nav-edge:#2b4a72; --panel-edge:#35576f;
  --body-text:#c3ccd6; --dim:#7e93a4;
  --parch:#e6d6ae; --parch-edge:#3c2f1c; --parch-ring:#8a7748;
  --post-title:#29517c; --post-meta:#8b2e12; --post-text:#2b2114; --post-link:#2b57a8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background-color:#04070d;
  color:var(--body-text);
  font:12px/1.7 Verdana, Geneva, "DejaVu Sans", sans-serif;
}
body.wide{min-width:1040px}
a{color:var(--gold-link);text-decoration:none}
a:hover{color:#fff}

.page{
  position:relative;overflow:hidden;min-height:100vh;
  background-image:
    radial-gradient(ellipse 60% 45% at 12% 32%, rgba(45,100,165,.38), rgba(0,0,0,0) 65%),
    radial-gradient(ellipse 55% 42% at 90% 30%, rgba(70,140,210,.30), rgba(0,0,0,0) 62%),
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(20,45,80,.5), rgba(0,0,0,0) 70%),
    linear-gradient(#0a1522 0%, #04070d 65%);
}

/* full-height flank art, window edges */
.flank{position:absolute;top:26px;bottom:0;width:370px;opacity:.92;background-size:cover;background-position:center top;z-index:0}
.flank.left{left:0;background-image:url("../img/flank-left.jpg")}
.flank.right{right:0;background-image:url("../img/flank-right.jpg")}

/* thin black strip, gold links */
.topstrip{
  position:relative;z-index:2;height:26px;
  background:linear-gradient(#141416 0%, #060607 100%);
  border-bottom:1px solid #000;
  display:flex;justify-content:flex-end;align-items:center;gap:12px;
  padding:0 26px;font-weight:bold;font-size:11px;
}
.topstrip a{color:var(--gold-strip)}
.topstrip a:hover{color:#fff}
.topstrip .pipe{color:#45403a}

/* crenellated iron band with frost energy line */
.ironband{
  position:relative;z-index:2;
  background-color:#101318;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.075 0 0 0 0 0.082 0 0 0 0 0.10 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E"),
    linear-gradient(#1c2129 0%, #0b0e12 100%);
}
.teeth{
  height:10px;
  background:repeating-linear-gradient(90deg, #2e333b 0px, #2e333b 24px, #0b0d11 24px, #0b0d11 48px);
  border-bottom:1px solid #000;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.8);
}
.bandbody{position:relative;height:108px}
.frostline{
  position:absolute;left:0;right:0;bottom:-2px;height:3px;z-index:3;
  background:linear-gradient(90deg, rgba(0,0,0,0), rgba(120,200,255,1) 15%, rgba(70,150,235,1) 50%, rgba(120,200,255,1) 85%, rgba(0,0,0,0));
  box-shadow:0 0 14px rgba(80,170,255,1), 0 0 30px rgba(60,140,255,.74);
}

/* wordmark: LifeCraft on an arched path, gold-graded, dark-stroked */
.wordmark{position:absolute;left:calc(50% - 506px);top:10px;width:312px}
.wordmark svg{width:100%;height:auto;display:block}
.wordmark .arctext{
  font-family:'LifeCraft', Georgia, serif;font-size:88px;letter-spacing:1px;
  filter:drop-shadow(0 0 9px rgba(80,160,255,.74)) drop-shadow(0 4px 3px rgba(0,0,0,.9));
}
.wordmark .sub{
  margin:-6px 0 0;text-align:center;
  font-weight:bold;font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:var(--frost);
  text-shadow:0 0 8px rgba(120,190,255,.99), 1px 1px 2px #000;
}

/* three-column portal (landing) */
.portal{
  position:relative;z-index:2;width:1000px;margin:22px auto 0;
  display:grid;grid-template-columns:205px 1fr 235px;gap:14px;align-items:start;
  padding-bottom:30px;
}

/* blue-black nav rails */
.navhead{
  background:linear-gradient(#16304f 0%, #0a1728 55%, #060d18 100%);
  border:1px solid var(--nav-edge);
  box-shadow:0 0 8px rgba(40,90,160,.4), inset 0 0 10px rgba(70,130,220,.22);
  color:var(--gold);
  font-family:'Friz Quadrata','Friz Quadrata TT','Palatino Linotype',Palatino,Georgia,serif;
  font-variant:small-caps;font-size:15px;letter-spacing:1px;
  padding:4px 10px 5px;text-shadow:1px 1px 2px #000;
}
.navlist{
  background:linear-gradient(rgba(10,20,36,.92), rgba(4,8,15,.92));
  border:1px solid #14263d;border-top:0;padding:5px 0 7px;
}
.navlist a{display:block;padding:3px 10px 3px 12px;font-weight:bold;font-size:11px}
.navlist a:hover{background:rgba(45,90,150,.28)}
.navlist .dash{color:#5a789c}
.rail{display:flex;flex-direction:column;gap:12px}

/* framed banner */
.banner{
  position:relative;height:190px;
  border:1px solid #000;
  box-shadow:0 0 0 2px #2c2317, 0 0 0 3px #6b552a, 0 0 0 4px #000, 0 4px 14px rgba(0,0,0,.7);
  background:#0b0e13 url("../img/banner-lichking.jpg") center/cover;
}
.banner .greet{
  position:absolute;top:10px;left:16px;
  font-family:'Friz Quadrata','Friz Quadrata TT','Palatino Linotype',Palatino,Georgia,serif;
  font-style:italic;font-size:27px;color:var(--gold);line-height:1;
  text-shadow:2px 2px 3px #000, 0 0 14px rgba(0,0,0,.9);
}
.banner .greet span{display:block;font-size:14px;margin-top:4px;color:#ffe08a}

/* parchment news post - also carries the account forms */
.post{
  margin-top:14px;
  background-color:var(--parch);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.22 0 0 0 0 0.10 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  border:1px solid var(--parch-edge);
  box-shadow:0 0 0 1px var(--parch-ring), 0 3px 10px rgba(0,0,0,.6);
}
.post header{
  padding:10px 16px 8px;
  background:linear-gradient(rgba(250,240,210,.75), rgba(222,204,158,.75));
  border-bottom:1px solid #b39c6b;
}
.post h3{
  margin:0;
  font-family:'Friz Quadrata','Friz Quadrata TT','Palatino Linotype',Palatino,Georgia,serif;
  font-variant:small-caps;font-weight:bold;font-size:21px;letter-spacing:.5px;
  color:var(--post-title);text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.post .meta{margin:2px 0 0;font-weight:bold;font-size:10px;color:var(--post-meta)}
.post .meta .who{color:#6b4a12}
.post .meta .pipe{color:#a89264}
.post .body{padding:12px 16px 14px;color:var(--post-text)}
.post .body p{margin:0 0 9px}
.post .body p:last-child{margin:0}
.post .body a{color:var(--post-link);text-decoration:underline}
.post .body a:hover{color:#7a1f10}

/* right rail panels */
.realmbox{
  border:1px solid #000;
  box-shadow:0 0 0 1px var(--panel-edge), 0 0 0 2px #000;
  background:linear-gradient(#132b4a 0%, #060d18 100%);
  padding:14px 12px 12px;text-align:center;
}
.realmbox .realm{
  font-family:'Friz Quadrata','Friz Quadrata TT','Palatino Linotype',Palatino,Georgia,serif;
  font-size:19px;color:var(--frost);
  text-shadow:0 0 10px rgba(120,190,255,.99), 1px 1px 2px #000;
}
.realmbox .state{margin-top:3px;font-weight:bold;font-size:11px;letter-spacing:3px}
.realmbox .state.on{color:#77dd77;text-shadow:0 0 8px rgba(90,220,90,.5)}
.realmbox .state.off{color:#e06a5a;text-shadow:0 0 8px rgba(220,90,70,.5)}
.realmbox .state.unk{color:var(--dim);text-shadow:none}
.realmbox .count{margin-top:5px;font-size:10px;color:var(--dim)}
.statpanel{
  background:linear-gradient(rgba(10,20,36,.92), rgba(4,8,15,.92));
  border:1px solid #14263d;border-top:0;padding:7px 10px 9px;font-size:11px;
}
.statpanel .row{display:flex;justify-content:space-between;padding:4px 2px;border-bottom:1px solid #16222c}
.statpanel .row:last-of-type{border-bottom:0}
.statpanel .row b{font-weight:normal;color:#e6eef5}

/* account form pages */
.formwrap{position:relative;z-index:2;max-width:520px;width:calc(100% - 24px);margin:26px auto 0;padding-bottom:34px}
.post label{display:block;margin:10px 0 3px;font-weight:bold;font-size:11px;color:#4a3a1c}
.post input{
  width:100%;padding:7px 8px;
  border:1px solid #8a7748;background:#f8f0da;color:#2b2114;
  font:12px Verdana, Geneva, sans-serif;
}
.post input:focus{outline:2px solid #b08c2e}
.formbtn{
  margin-top:14px;padding:8px 22px;
  border:1px solid #0a1728;
  background:linear-gradient(#2a4d7d 0%, #16304f 55%, #0a1728 100%);
  color:var(--gold);font:bold 12px Verdana, Geneva, sans-serif;letter-spacing:.5px;cursor:pointer;
  box-shadow:inset 1px 1px 0 rgba(120,170,230,.35), inset -1px -1px 0 rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.5);
}
.formbtn:hover{color:#fff;background:linear-gradient(#33619c 0%, #1b3a60 55%, #0d1f33 100%)}
.formerr{
  margin:0 0 10px;padding:8px 10px;
  background:#5a1f14;border:1px solid #8a3a24;color:#ffd9c9;
  font-weight:bold;font-size:11px;
}
.rules{margin:10px 0 0;font-size:10px;color:#6b5a35}
.formnav{margin-top:10px;font-size:11px}

.foot{
  position:relative;z-index:2;text-align:center;
  color:var(--dim);font-size:10px;line-height:1.8;
  margin:0;padding:0 0 30px;
}
.foot .rune{color:#24445c}

/* small-screen mercies for the form pages; the landing stays era-fixed */
@media (max-width:1080px){
  .wordmark{position:static;margin:0 auto;padding-top:10px}
  .bandbody{height:auto;padding-bottom:8px}
}
@media (max-width:920px){
  .flank{display:none}
}

/* realm status page */
.statuswrap{position:relative;z-index:2;max-width:640px;width:calc(100% - 24px);margin:26px auto 0;padding-bottom:34px;display:flex;flex-direction:column;gap:12px}
.statpanel .note{margin:4px 0;color:var(--dim);font-size:10px}
.roster .row{align-items:baseline}
.roster .cname{font-weight:bold;text-shadow:1px 1px 2px #000}
.roster .cinfo{color:#9fb0c0;font-size:10px;text-align:right}
.roster .acct{color:var(--dim)}
.backline{font-size:11px;margin:2px 0 0}