*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{background:#070707;display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:'Oswald',sans-serif;cursor:default;}
body.hide-cursor{cursor:none;}
.frame{transform-origin:center center;width:max-content;}
.felt{position:relative;background:#141414;background-image:repeating-linear-gradient(to bottom,#191919 0,#191919 11px,#0a0a0a 12px,#0a0a0a 14px);border-radius:3px;padding:40px 56px 44px;box-shadow:inset 0 0 60px rgba(0,0,0,.75);width:max-content;}
.head{font-family:'Pinyon Script',cursive;color:#fff;font-size:104px;line-height:.9;text-align:center;text-shadow:0 2px 3px rgba(0,0,0,.5);}
.sub{font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:7px;color:#bdbdbd;font-size:20px;text-align:center;margin:6px 0 34px;}
.board{display:flex;flex-direction:column;gap:14px;}
.row{display:flex;align-items:center;gap:10px;perspective:900px;min-height:84px;}
.day{width:170px;flex:0 0 170px;display:flex;align-items:baseline;font-family:'Oswald',sans-serif;font-weight:600;}
.day b{flex:0 0 66px;font-size:46px;color:#8a8a8a;}
.day span{flex:0 0 auto;font-size:40px;color:#6a6a6a;}
.tiles{display:flex;gap:7px;}
.tile{width:62px;height:84px;border-radius:5px;background:linear-gradient(#272727 0 calc(50% - 1px),#060606 50% calc(50% + 1px),#1c1c1c calc(50% + 1px) 100%);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:46px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.6);transform-origin:center;}
.tile.sp{background:none;width:22px;}
.tile.flap{animation:flap var(--flap-duration, .15s) ease;}
@keyframes flap{0%{transform:rotateX(0)}45%{transform:rotateX(-30deg)}100%{transform:rotateX(0)}}
.empty{font-size:34px;color:#383838;letter-spacing:14px;}
.deco{position:absolute;color:rgba(255,255,255,.22);}
.deco svg{width:38px;height:38px;display:block;}
.deco.d1{top:30px;right:40px;}
.deco.d2{bottom:34px;left:48px;}
.deco.d3{bottom:30px;right:44px;}

/* Vertical story mode optimizations */
body.vertical {
  background: #141414;
  background-image: repeating-linear-gradient(to bottom,#191919 0,#191919 11px,#0a0a0a 12px,#0a0a0a 14px);
}

body.vertical .felt {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 120px 56px 130px; /* Taller padding */
}

body.vertical .head {
  font-size: 80px; /* Slightly smaller to fit Joyeux Anniversaire elegantly in vertical format */
}

body.vertical .head .word {
  display: block;
  line-height: 0.9;
}

body.vertical .sub {
  margin: 12px 0 64px; /* More space below subtitle */
}

body.vertical .board {
  gap: 34px; /* Larger gap between rows to fill vertical space */
}