*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;background:#04131d;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body{overflow:hidden}
button{font-family:inherit}
.screen{
  width:100%;
  height:100vh;
  min-height:100vh;
  padding:8px;
  background:radial-gradient(circle at 35% 20%,#0d4256 0,#082738 28%,#04131d 70%);
  overflow:hidden;
}

/* HEADER */
.topbar{
  height:18%;
  display:flex;
  align-items:stretch;
  gap:8px;
  margin-bottom:6px;
}
.brandbox{
  flex:0 0 22%;
  min-width:0;
  background:#fff;
  border-radius:14px;
  padding:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.logo{display:block;width:100%;height:100%;object-fit:contain}
.welcome{
  flex:1 1 auto;
  min-width:0;
  padding:6px 4px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.eyebrow{font-size:10px;letter-spacing:1.4px;color:#f5a13c;font-weight:800}
.welcome h1{font-family:Georgia,serif;font-size:28px;margin:3px 0 4px;line-height:1.02;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.welcome p{margin:0;color:#c5d5de;font-size:11px;line-height:1.25}
.timebox{
  flex:0 0 27%;
  min-width:0;
  padding:6px 2px;
  text-align:right;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
}
.clock{font-size:48px;font-weight:800;line-height:.95;letter-spacing:-2px}
.date{font-size:10px;color:#c0d0d8;margin:3px 0}
.weatherline{display:flex;justify-content:flex-end;gap:5px;align-items:center;font-size:10px}
.weatherline strong{font-size:15px}

/* MAIN AREA */
.main-grid{
  height:74%;
  display:flex;
  gap:6px;
  overflow:hidden;
}
.visual-card,.action-card,.info-card{
  border:1px solid rgba(119,195,221,.18);
  box-shadow:0 8px 18px rgba(0,0,0,.2)
}
.visual-card{
  flex:0 0 40%;
  min-width:0;
  height:100%;
  border-radius:16px;
  overflow:hidden;
  position:relative;
}
.special{
  background:linear-gradient(180deg,rgba(2,13,19,.04),rgba(2,13,19,.88)),
             radial-gradient(circle at 60% 34%,#d27c29 0,#7b3e18 27%,#1c3e4b 65%,#08202e 100%)
}
.special:before{
  content:"🍤";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:135px;
  filter:drop-shadow(0 14px 14px rgba(0,0,0,.25));
  opacity:.92
}
.visual-overlay{position:absolute;left:14px;right:14px;bottom:14px;z-index:2}
.tag{display:inline-block;padding:5px 8px;background:#ef8d24;border-radius:999px;font-size:8px;font-weight:800;letter-spacing:.7px}
.visual-overlay h2{font-family:Georgia,serif;font-size:27px;margin:7px 0 4px;line-height:1}
.visual-overlay p{font-size:10px;color:#e4edf2;margin:0 0 6px;line-height:1.25}
.price{display:inline-block;color:#ffd6a1;font-weight:800;font-size:10px}

.actions{
  flex:0 0 34%;
  min-width:0;
  height:100%;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-content:stretch;
}
.action-card{
  width:calc(50% - 3px);
  height:calc(50% - 3px);
  border-radius:14px;
  color:#fff;
  padding:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  text-align:left;
  border-width:1px;
  min-width:0;
  overflow:hidden;
}
.action-card .icon{font-size:27px;margin-bottom:auto}
.action-card b{font-size:15px;line-height:1.05}
.action-card small{font-size:9px;margin-top:3px;color:#e1ebef;line-height:1.15}
.menu{background:linear-gradient(145deg,#bd6408,#6c3300)}
.instagram{background:linear-gradient(145deg,#584287,#2d2057)}
.location{background:linear-gradient(145deg,#176b70,#0a3e45)}
.wifi{background:linear-gradient(145deg,#244c6d,#122638)}

.info{
  flex:1 1 26%;
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.info-card{
  flex:1 1 0;
  min-height:0;
  border-radius:14px;
  padding:10px;
  background:rgba(4,28,42,.88);
  overflow:hidden;
}
.info-title{color:#f49a31;font-weight:800;letter-spacing:.5px;font-size:9px}
.info-card .big{font-size:14px;font-weight:800;margin-top:6px;line-height:1.08}
.info-card p{font-size:9px;line-height:1.25;color:#c5d4dc;margin:5px 0 0}
.rating{font-size:14px;color:#ffc65b;margin-top:6px;letter-spacing:2px}

/* FOOTER */
.footer{
  height:calc(8% - 6px);
  margin-top:6px;
  display:flex;
  align-items:center;
  border-radius:10px;
  overflow:hidden;
  background:rgba(4,27,42,.92);
  border:1px solid rgba(119,195,221,.18)
}
.ticker-label{
  height:100%;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding:0 12px;
  background:#f08d25;
  color:#10222d;
  font-weight:900;
  font-size:9px;
  letter-spacing:.7px
}
.ticker-text{flex:1 1 auto;min-width:0;padding:0 12px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.footer-right{flex:0 0 auto;padding-right:12px;color:#9eb3bf;font-size:9px}

/* MODALS */
.modal{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,8,13,.9);z-index:50;padding:8px}
.hidden{display:none!important}
.window{height:calc(100vh - 16px);background:#071a27;border:1px solid #2e5a70;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.windowbar{height:48px;min-height:48px;background:#0c293a;display:flex;align-items:center;justify-content:space-between;padding:0 8px}
.windowbar button{border:0;background:#173b50;color:#fff;border-radius:9px;width:38px;height:34px;font-size:20px}
.window-actions{display:flex;gap:6px}
.window iframe{flex:1 1 auto;width:100%;border:0;background:#fff}
.blocked{padding:8px;background:#744200;color:#fff;font-size:10px}
.wifi-window{width:70%;max-width:500px;margin:10vh auto 0;background:linear-gradient(145deg,#103b50,#061c29);border:1px solid #3b7893;border-radius:22px;padding:24px;text-align:center;position:relative}
.wifi-close{position:absolute;right:12px;top:10px;border:0;background:#173b50;color:#fff;border-radius:50%;width:34px;height:34px;font-size:20px}
.wifi-icon{font-size:42px}
.wifi-window h2{font-size:22px}
.wifi-window p{margin-bottom:4px;color:#a9bec9;font-size:11px}
.wifi-value{font-size:18px;font-weight:800;background:#081923;border-radius:10px;padding:9px;margin-bottom:12px}

/* Desktop widescreen */
@media (min-width:1200px){
  .screen{padding:12px}
  .topbar{height:20%;gap:10px;margin-bottom:10px}
  .main-grid{height:71%;gap:10px}
  .footer{height:calc(9% - 10px);margin-top:10px}
  .brandbox{flex-basis:19%}
  .timebox{flex-basis:25%}
  .visual-card{flex-basis:42%}
  .actions{flex-basis:31%;gap:10px}
  .action-card{width:calc(50% - 5px);height:calc(50% - 5px);padding:14px}
  .info{gap:10px}
  .welcome h1{font-size:38px}
  .welcome p{font-size:14px}
  .clock{font-size:62px}
  .date,.weatherline{font-size:12px}
  .weatherline strong{font-size:18px}
  .special:before{font-size:180px}
  .visual-overlay{left:20px;right:20px;bottom:18px}
  .visual-overlay h2{font-size:36px}
  .visual-overlay p,.price{font-size:12px}
  .action-card .icon{font-size:36px}
  .action-card b{font-size:19px}
  .action-card small{font-size:10px}
  .info-card{padding:14px}
  .info-title{font-size:10px}
  .info-card .big{font-size:18px}
  .info-card p{font-size:10px}
}