/* Mezisos site — pixel design system, per DESIGN.md */

@font-face{
  font-family:"Saucy Pixel";
  src:url("../fonts/SaucyPixel-Regular.woff2") format("woff2"),
      url("../fonts/SaucyPixel-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
  font-synthesis:none;
}
@font-face{
  font-family:"Saucy Pixel Text";
  src:url("../fonts/SaucyPixelText-Regular.woff2") format("woff2"),
      url("../fonts/SaucyPixelText-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
  font-synthesis:none;
}

:root{
  --u: 8px; /* 1 spacing unit */

  --bg: #E6D5BB;
  --checker-a: #EADB9D;
  --checker-b: #DDCE90;
  --checker-soft-a: #EBDDC2;
  --checker-soft-b: #E2D2B2;

  --card-fill: #FFFEE2;
  --window-fill: #FCEFB2;
  --ink: #3E2310;

  --text-title: #3E2310;
  --text-label: #8A5230;

  --btn-fill: #F4C06C;
  --btn-hover: #F4DDB0;
  --btn-outline: #3E2310;
  --btn-disabled: #C9A878;

  --accent-1: #E8A24A;
  --accent-2: #F7D666;

  --focus-ring: #F7D666;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);
  color:var(--text-title);
  font-family:"Saucy Pixel Text","Saucy Pixel",monospace;
  text-transform:uppercase;
  -webkit-font-smoothing:none;
  font-smooth:never;
  text-rendering:optimizeSpeed;
  display:flex;
  flex-direction:column;
  min-height:100%;
}
img{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}
a{color:inherit}

.title-font{font-family:"Saucy Pixel","Saucy Pixel Text",monospace}

:focus-visible{
  outline:4px solid var(--focus-ring);
  outline-offset:2px;
}

.wrap{width:min(1120px, calc(100% - var(--u) * 4));margin:0 auto}

/* ---------- Header ---------- */
header{
  background:var(--accent-2);
  border-bottom:3px solid var(--ink);
  box-shadow:0 4px 0 -2px rgba(62,35,16,0.08);
  position:relative;
  z-index:10;
}
.nav{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:calc(var(--u)*1.5);
  padding:var(--u) 0;
  min-height:64px;
}
@media (min-width:768px){ .nav{min-height:72px} }
.brand{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.brand-logo{height:22px;width:auto;display:block;image-rendering:auto}
@media (min-width:768px){ .brand-logo{height:26px} }
.links{display:flex;gap:calc(var(--u)*1.25) calc(var(--u)*3);flex-wrap:wrap}
.links a{
  font-family:"Saucy Pixel Text",monospace;
  font-size:12px;
  letter-spacing:0.5px;
  text-decoration:none;
  color:var(--text-label);
  padding:6px 2px;
  border-bottom:2px solid transparent;
}
.links a:hover{color:var(--text-title);border-bottom-color:var(--text-title)}

/* ---------- Hero ---------- */
main{flex:1;display:flex;flex-direction:column}
.hero{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  padding:calc(var(--u)*7) 0;
  background-image:repeating-conic-gradient(var(--checker-soft-a) 0% 25%, var(--checker-soft-b) 0% 50%);
  background-size:72px 72px;
  overflow:hidden;
}

/* ---------- Food stickers (decorative, hero + footer) ---------- */
.food-sticker{
  position:absolute;
  width:56px;height:auto;
  image-rendering:pixelated;
  filter:drop-shadow(3px 3px 0 var(--ink));
  pointer-events:none;
  z-index:1;
}
.food-burger{top:9%;left:4%;width:60px;animation:bob-burger 2400ms steps(6) infinite;animation-delay:0ms}
.food-fries{bottom:10%;left:7%;width:48px;animation:bob-fries 2200ms steps(6) infinite;animation-delay:300ms}
.food-pizza{top:7%;right:5%;width:60px;animation:bob-pizza 2600ms steps(6) infinite;animation-delay:600ms}
.food-hotdog{bottom:8%;right:6%;width:52px;animation:bob-hotdog 2300ms steps(6) infinite;animation-delay:150ms}
.food-chic{
  position:absolute;
  top:calc(var(--u)*-2);
  right:calc(var(--u)*-2);
  width:48px;
  z-index:3;
  animation:bob-chic 2500ms steps(6) infinite;
  animation-delay:450ms;
}

/* stepped bob — gentle idle float, hard-cut per DESIGN.md's "no eased motion" rule */
@keyframes bob-burger{
  0%,100%{transform:rotate(-8deg) translateY(0)}
  50%{transform:rotate(-8deg) translateY(-6px)}
}
@keyframes bob-fries{
  0%,100%{transform:rotate(6deg) translateY(0)}
  50%{transform:rotate(6deg) translateY(-5px)}
}
@keyframes bob-pizza{
  0%,100%{transform:rotate(7deg) translateY(0)}
  50%{transform:rotate(7deg) translateY(-6px)}
}
@keyframes bob-hotdog{
  0%,100%{transform:rotate(-6deg) translateY(0)}
  50%{transform:rotate(-6deg) translateY(-5px)}
}
@keyframes bob-chic{
  0%,100%{transform:rotate(10deg) translateY(0)}
  50%{transform:rotate(10deg) translateY(-5px)}
}

@media (max-width:899px){
  .food-fries,.food-hotdog{display:none}
  .food-burger{width:40px;top:2%;left:2%}
  .food-pizza{width:40px;top:2%;right:2%}
}
@media (max-width:540px){
  .food-burger,.food-pizza{display:none}
}

.hero-grid{position:relative;width:100%;z-index:2}
.hero-panel{
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:calc(var(--u)*5);
  text-align:center;
  background:rgba(255,254,226,0.55);
  border:2px solid rgba(62,35,16,0.12);
  padding:calc(var(--u)*5) calc(var(--u)*3);
}
@media (min-width:900px){
  .hero-panel{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    text-align:left;
    gap:calc(var(--u)*9);
    padding:calc(var(--u)*7) calc(var(--u)*8);
  }
  .hero-text{flex:0 1 440px}
  .hero-visual{flex:0 0 auto}
}

.title-logo{
  width:240px;
  max-width:70vw;
  height:auto;
  image-rendering:auto;
  display:inline-block;
}
@media (min-width:900px){ .title-logo{width:320px;max-width:100%} }

.tagline-main{
  font-family:"Saucy Pixel Text",monospace;
  font-size:19px;
  font-weight:600;
  color:var(--text-title);
  margin:calc(var(--u)*2.5) 0 0;
  letter-spacing:0.5px;
}
@media (min-width:900px){ .tagline-main{font-size:21px} }
.tagline-sub{
  font-family:"Saucy Pixel Text",monospace;
  font-size:13px;
  color:var(--text-label);
  margin:calc(var(--u)*0.75) 0 0;
  letter-spacing:0.5px;
}

/* mascot accent — peeks fully visible in the phone's bottom-right corner, near PLAY.
   The sprite sheet frame is natively 112x128; it's scaled down with a CSS transform
   (not cropped) so the whole character always shows, never just a clipped head. */
.mascot-mini{
  position:absolute;
  right:23%;
  bottom:0;
  width:72px;height:82px;
  overflow:visible;
  cursor:pointer;
  z-index:4;
  animation:mascot-bounce 1800ms steps(6) infinite;
}
@media (min-width:768px){ .mascot-mini{width:86px;height:98px;right:19%;bottom:6%} }
.sprite-frame{
  width:112px;height:128px;
  background-image:url("../sprite/mustard/mustard_sheet.png");
  background-repeat:no-repeat;
  image-rendering:pixelated;
  transform:scale(0.643);
  transform-origin:top left;
  animation: mustard-idle 500ms steps(2) infinite;
}
@media (min-width:768px){ .sprite-frame{transform:scale(0.768)} }
.sprite-frame.win{
  animation: mustard-win 480ms steps(4) 1;
}
@keyframes mustard-idle{
  from{background-position:0 0}
  to{background-position:-224px 0}
}
@keyframes mustard-win{
  from{background-position:0 -384px}
  to{background-position:-448px -384px}
}
/* stepped idle bounce — hard-cut, not eased, per DESIGN.md */
@keyframes mascot-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@media (prefers-reduced-motion: reduce){
  .sprite-frame{animation:none;background-position:0 0}
  .mascot-mini,.food-sticker{animation:none}
}

/* ---------- Phone mockup ---------- */
.hero-visual{position:relative}
.phone-mock{
  position:relative;
  width:280px;
  aspect-ratio:1/1;
  margin:0 auto;
}
.phone-frame{
  position:absolute;inset:0;
  width:100%;height:100%;
  image-rendering:auto;
  pointer-events:none;
  z-index:2;
}
.phone-screen{
  position:absolute;
  left:28%;right:29.5%;top:10.5%;bottom:6%;
  width:42.5%;height:83.5%;
  object-fit:cover;
  border-radius:10px;
  image-rendering:auto;
  z-index:1;
}
@media (min-width:768px){ .phone-mock{width:350px} }
@media (min-width:1440px){ .phone-mock{width:395px} }

/* ---------- Download buttons ---------- */
.dl-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(var(--u)*1.5);
  margin:calc(var(--u)*3.5) 0 0;
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}
@media (min-width:900px){ .dl-row{margin-left:0;margin-right:0} }
@media (max-width:420px){ .dl-row{grid-template-columns:1fr;max-width:260px} }
.btn{
  min-height:58px;
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:calc(var(--u)*1.25);
  padding:calc(var(--u)*1.25) calc(var(--u)*1.5);
  background:var(--btn-fill);
  border:2px solid var(--btn-outline);
  box-shadow:4px 4px 0 var(--btn-outline);
  color:var(--text-title);
  font-family:"Saucy Pixel Text",monospace;
  text-decoration:none;
  text-align:left;
  cursor:pointer;
  transition:transform 80ms steps(1), box-shadow 80ms steps(1);
  user-select:none;
}
.btn:hover{background:var(--btn-hover)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--btn-outline)}
.btn[aria-disabled="true"]{
  background:var(--btn-disabled);
  color:var(--text-label);
  cursor:default;
}
.btn[aria-disabled="true"]:active{transform:none;box-shadow:4px 4px 0 var(--btn-outline)}
.store-icon{
  width:30px;height:30px;
  flex:0 0 auto;
  display:block;
  background:var(--card-fill);
  border:1.5px solid var(--btn-outline);
  padding:3px;
  image-rendering:auto;
}
.btn[aria-disabled="true"] .store-icon{opacity:0.65}
.store-copy{display:flex;flex-direction:column;min-width:0}
.btn .store-label{font-size:15px;letter-spacing:0.5px;white-space:nowrap}
.btn .store-sub{
  display:block;
  font-size:10px;
  color:var(--text-label);
  margin-top:2px;
  letter-spacing:0.5px;
}
.btn.suggested{outline:3px solid var(--accent-2);outline-offset:2px}

/* ---------- Footer ---------- */
footer{
  background:var(--accent-2);
  border-top:3px solid var(--ink);
}
.foot-strip{
  display:flex;
  justify-content:center;
  gap:calc(var(--u)*2.5);
  padding-top:calc(var(--u)*1.5);
}
.foot-strip img{
  width:20px;height:auto;
  image-rendering:pixelated;
  opacity:0.55;
}
.foot{
  min-height:48px;
  padding:var(--u) 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--u);
  flex-wrap:wrap;
  font-family:"Saucy Pixel Text",monospace;
  font-size:11px;
  color:var(--text-label);
}
.foot-links{display:flex;gap:calc(var(--u)*1.5)}
.foot-links a{color:var(--text-label);text-decoration:none}
.foot-links a:hover{color:var(--text-title)}

/* ---------- Legal pages ---------- */
.legal-wrap{
  flex:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background-image:repeating-conic-gradient(var(--checker-soft-a) 0% 25%, var(--checker-soft-b) 0% 50%);
  background-size:72px 72px;
  padding:calc(var(--u)*8) var(--u) calc(var(--u)*10);
}
.legal{max-width:620px;width:100%;margin:0 auto}
.legal .back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:calc(var(--u)*3);
  padding:6px 14px;
  background:rgba(255,254,226,0.7);
  border:2px solid var(--ink);
  font-family:"Saucy Pixel Text",monospace;
  font-size:12px;
  letter-spacing:0.5px;
  text-decoration:none;
  color:var(--text-title);
}
.legal .back:hover{background:var(--card-fill)}
.legal h1{
  font-family:"Saucy Pixel",monospace;
  font-size:34px;
  margin:0 0 calc(var(--u)*4);
}
.legal .panel{
  position:relative;
  background:var(--card-fill);
  border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  padding:calc(var(--u)*4);
  line-height:1.7;
  font-family:"Saucy Pixel Text",monospace;
  font-size:14px;
  color:var(--text-title);
}
.legal .panel .updated{
  display:inline-block;
  font-size:11px;
  letter-spacing:0.5px;
  color:var(--text-label);
  background:var(--window-fill);
  border:1px solid var(--ink);
  padding:4px 10px;
  margin:0 0 calc(var(--u)*2.5);
}
.legal .panel p{margin:0 0 calc(var(--u)*2)}
.legal .panel h2{
  font-family:"Saucy Pixel",monospace;
  font-size:20px;
  margin:calc(var(--u)*3) 0 var(--u);
  color:var(--text-title);
}
.legal .panel ul{margin:0 0 calc(var(--u)*2);padding-left:calc(var(--u)*2.5)}
.legal .panel-food{
  position:absolute;
  bottom:calc(var(--u)*-1.5);
  right:calc(var(--u)*2);
  width:36px;
  image-rendering:pixelated;
  filter:drop-shadow(2px 2px 0 var(--ink));
  transform:rotate(8deg);
  pointer-events:none;
}

@media (max-width:420px){
  .nav{flex-direction:column;align-items:flex-start;gap:calc(var(--u)*0.5)}
}