@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root{
  --pink:#d6336c; --pink-d:#a61e4d; --cream:#fff8ec; --ink:#3a2b2b;
  --sky1:#8fd3f4; --sky2:#c9ecff; --grass:#5dbb3f;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:radial-gradient(1200px 800px at 50% -10%, #3b3b52 0%, #23232f 55%, #17171f 100%);
  font-family:'Press Start 2P',monospace; color:var(--ink);
  display:flex; justify-content:center; align-items:flex-start;
  min-height:100%; padding:14px 8px 30px;
}
#stage{position:relative; width:min(94vw,430px);}
#gameWrap{
  position:relative; width:100%; aspect-ratio:3/4;
  border:5px solid #fdfdfd; border-radius:18px; overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.55), 6px 6px 0 rgba(0,0,0,.35);
  background:#79c7ef;
}
#game{width:100%; height:100%; display:block; image-rendering:pixelated; image-rendering:crisp-edges;}
.hidden{display:none !important}

/* ---------- HUD ---------- */
#hud{position:absolute; top:6px; left:6px; right:6px; display:flex; justify-content:space-between; align-items:flex-start; z-index:5; pointer-events:none}
#hearts{background:var(--cream); border:3px solid #222; border-radius:6px; padding:5px 7px; font-size:9px; color:#c2255c; box-shadow:3px 3px 0 rgba(0,0,0,.35)}
#heartCount{color:#222}
#hudBtns{display:flex; gap:6px; pointer-events:auto}
.hbtn{width:34px; height:34px; background:var(--cream); border:3px solid #222; border-radius:6px; font-family:inherit; font-size:13px; cursor:pointer; box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.hbtn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.35)}
.hbtn.off{opacity:.45}

/* ---------- hint / dialog / toast ---------- */
#hint{position:absolute; left:50%; bottom:118px; transform:translateX(-50%); background:#222; color:#fff; font-size:8px; padding:7px 10px; border-radius:8px; z-index:6; white-space:nowrap; animation:bob 1s infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}
#dlg{position:absolute; left:6px; right:6px; bottom:6px; background:var(--cream); border:3px solid #222; border-radius:8px; z-index:7; box-shadow:4px 4px 0 rgba(0,0,0,.35)}
#dlgName{position:absolute; top:-13px; left:10px; background:var(--pink); color:#fff; font-size:8px; padding:5px 9px; border:3px solid #222; border-radius:6px}
#dlgX{position:absolute; top:4px; right:4px; width:26px; height:26px; background:#fff; border:3px solid #222; border-radius:5px; font-family:inherit; font-size:9px; cursor:pointer}
#dlgBody{display:flex; gap:8px; padding:16px 8px 6px; align-items:flex-start}
#dlgFace{width:44px; height:44px; flex:0 0 44px; border:3px solid #222; border-radius:6px; background:#bfe6ff; image-rendering:pixelated; overflow:hidden}
#dlgFace canvas{width:100%; height:100%; image-rendering:pixelated}
#dlgText{font-size:9px; line-height:1.75; min-height:52px}
#dlgNext{display:block; margin:0 8px 8px auto; background:none; border:none; color:var(--pink); font-family:inherit; font-size:9px; cursor:pointer}
#toast{position:absolute; top:52px; left:50%; transform:translateX(-50%); background:#222; color:#ffe066; font-size:8px; padding:8px 12px; border-radius:8px; z-index:9; white-space:nowrap; border:2px solid #ffe066}
#kbdHint{position:absolute; bottom:6px; left:0; right:0; text-align:center; font-size:7px; color:#fff; text-shadow:2px 2px 0 #222; z-index:4; opacity:.9}

/* ---------- touch controls ---------- */
#touch{position:absolute; left:0; right:0; bottom:64px; display:flex; justify-content:space-between; align-items:flex-end; padding:0 10px; z-index:6; pointer-events:none}
#dpad{position:relative; width:112px; height:112px; pointer-events:auto}
.dbtn{position:absolute; width:36px; height:36px; background:rgba(255,248,236,.92); border:3px solid #222; border-radius:8px; font-family:inherit; font-size:11px; color:#222}
.dbtn:active{background:var(--pink); color:#fff}
.dbtn.up{left:38px; top:0}.dbtn.down{left:38px; bottom:0}.dbtn.left{left:0; top:38px}.dbtn.right{right:0; top:38px}
#btnA{width:58px; height:58px; border-radius:50%; background:var(--pink); color:#fff; border:3px solid #222; font-family:inherit; font-size:14px; pointer-events:auto; box-shadow:3px 3px 0 rgba(0,0,0,.4)}
#btnA:active{transform:scale(.93)}

/* ---------- START OVERLAY ---------- */
#startOv{position:absolute; inset:0; z-index:20; border-radius:13px; overflow:hidden}
.sky{position:absolute; inset:0; background:linear-gradient(#6ec1f0 0%, #a5e0fa 45%, #7ed957 45.2%, #5dbb3f 100%); display:flex; flex-direction:column; align-items:center; padding:26px 16px 12px; overflow-y:auto}
.sun{position:absolute; top:26px; right:22px; width:38px; height:38px; background:#ffe066; border:4px solid #f5b301; box-shadow:0 0 0 4px rgba(255,224,102,.35)}
.cloud{position:absolute; background:#fff; height:14px; border-radius:8px; opacity:.95}
.cloud::after{content:''; position:absolute; top:-9px; left:12px; width:20px; height:20px; background:#fff; border-radius:4px}
.c1{top:52px; left:26px; width:52px; animation:drift 9s linear infinite}
.c2{top:96px; right:70px; width:40px; animation:drift 13s linear infinite}
.c3{top:140px; left:60px; width:34px; animation:drift 11s linear infinite}
@keyframes drift{0%{transform:translateX(-8px)}50%{transform:translateX(10px)}100%{transform:translateX(-8px)}}
.skyTitle{display:inline-block; background:#fff; border:3px solid #222; border-radius:6px; font-size:8px; padding:6px 9px; box-shadow:3px 3px 0 rgba(0,0,0,.3); z-index:1}
.couple{margin-top:12px; font-size:24px; color:#fff; text-shadow:3px 3px 0 #222, -1px -1px 0 #222; text-align:center; line-height:1.4; z-index:1}
.couple span{color:#ffd43b}
.dateBadge{margin-top:10px; background:#222; color:#fff; font-size:8px; padding:7px 12px; border-radius:5px; z-index:1}
.guestCard{margin-top:14px; width:100%; background:var(--cream); border:3px solid #222; border-radius:8px; padding:12px 10px; text-align:center; box-shadow:4px 4px 0 rgba(0,0,0,.3); z-index:1}
.toLabel{font-size:7px; color:#868e96; margin-bottom:8px}
#guestName{width:100%; font-family:inherit; font-size:12px; text-align:center; border:none; border-bottom:2px dashed #adb5bd; background:transparent; padding:6px 4px; color:var(--ink); outline:none}
.sorry{margin-top:8px; font-size:7px; color:#868e96; line-height:1.7}
.charRow{display:flex; gap:8px; width:100%; margin-top:12px; z-index:1}
.charBtn{flex:1; display:flex; align-items:center; justify-content:center; gap:7px; font-family:inherit; font-size:8px; padding:9px 4px; background:#fff; border:3px solid #222; border-radius:8px; cursor:pointer; box-shadow:3px 3px 0 rgba(0,0,0,.3)}
.charBtn.sel{background:var(--pink); color:#fff}
.mini{width:16px; height:20px; flex:0 0 16px; image-rendering:pixelated}
.mini.pria{background:linear-gradient(#5b3a1e 0 25%, #f2c184 25% 50%, #2f7fd1 50% 78%, #27436b 78%)}
.mini.wanita{background:linear-gradient(#7a4a21 0 35%, #f2c184 35% 55%, #e2548b 55%)}
#startBtn{margin-top:12px; width:100%; background:var(--pink); color:#fff; border:3px solid #222; border-radius:8px; font-family:inherit; font-size:11px; padding:13px; cursor:pointer; box-shadow:4px 4px 0 rgba(0,0,0,.35); z-index:1}
#startBtn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(0,0,0,.35)}
#skipLink{margin-top:10px; background:none; border:none; font-family:inherit; font-size:7px; color:#2b4a1e; text-decoration:underline; cursor:pointer; z-index:1}
.brand{margin-top:10px; font-size:7px; color:#2b4a1e; z-index:1; padding-bottom:6px}

/* ---------- WEDDING MENU ---------- */
#menuOv{position:absolute; inset:0; z-index:30; background:rgba(20,18,26,.72); display:flex; align-items:center; justify-content:center; padding:12px}
#menuBox{width:100%; max-height:100%; background:#2f3a33; border:4px solid #15181a; border-radius:12px; overflow:hidden; display:flex; flex-direction:column}
#menuHead{display:flex; align-items:center; gap:8px; background:#e8dcc8; padding:10px 12px; font-size:10px; border-bottom:4px solid #15181a}
#menuX{margin-left:auto; width:30px; height:30px; background:#fff; border:3px solid #222; border-radius:6px; font-family:inherit; font-size:10px; cursor:pointer}
#menuList{padding:12px; display:flex; flex-direction:column; gap:9px; overflow-y:auto}
.mItem{display:flex; align-items:center; gap:10px; background:var(--cream); border:3px solid #15181a; border-radius:8px; padding:11px 12px; font-family:inherit; font-size:9px; cursor:pointer; text-align:left; box-shadow:3px 3px 0 rgba(0,0,0,.4)}
.mItem:active{transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.4)}
.mIco{width:26px; text-align:center; font-size:14px; color:var(--pink-d); flex:0 0 26px}
#menuDetail{padding:12px; overflow-y:auto; background:var(--cream); margin:0; max-height:100%}
#menuDetail h3{font-size:10px; margin-bottom:10px; color:var(--pink-d)}
#menuDetail p{font-size:8px; line-height:2; margin-bottom:8px}
#menuDetail .backBtn{font-family:inherit; font-size:8px; background:#222; color:#fff; border:none; border-radius:6px; padding:8px 12px; cursor:pointer; margin-bottom:10px}
.evCard{background:#fff; border:3px solid #222; border-radius:8px; padding:10px; margin-bottom:10px}
.evCard h4{font-size:9px; color:var(--pink); margin-bottom:8px}
.evCard p{margin-bottom:4px}
.cdGrid{display:flex; gap:6px; margin:10px 0}
.cdCell{flex:1; background:#222; color:#ffe066; border-radius:8px; padding:10px 2px; text-align:center}
.cdCell b{display:block; font-size:13px}
.cdCell span{font-size:6px; color:#fff}
.frm input,.frm select,.frm textarea{width:100%; font-family:inherit; font-size:8px; padding:9px; margin-bottom:8px; border:3px solid #222; border-radius:6px; background:#fff; color:var(--ink)}
.frm button{width:100%; font-family:inherit; font-size:9px; background:var(--pink); color:#fff; border:3px solid #222; border-radius:8px; padding:11px; cursor:pointer}
.wish{background:#fff; border:3px solid #222; border-radius:8px; padding:9px; margin-bottom:8px}
.wish b{font-size:8px; color:var(--pink-d)}
.wish p{margin:6px 0 0}
.galGrid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.galCard{border:3px solid #222; border-radius:8px; height:96px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; font-size:7px; color:#fff; text-shadow:2px 2px 0 #222}
.g1{background:linear-gradient(#6ec1f0 55%, #5dbb3f 55%)}
.g2{background:linear-gradient(#f783ac 0 40%, #fff0f6 40% 60%, #d6336c 60%)}
.g3{background:linear-gradient(#140f1e 60%, #2b3a55 60%)}
.g4{background:linear-gradient(#ffe066 30%, #ff922b 30% 60%, #a61e4d 60%)}
.g5{background:linear-gradient(#a5d8ff 50%, #3b9bd4 50%)}
.g6{background:linear-gradient(#d0bfff 40%, #9775fa 40% 70%, #5f3dc4 70%)}
.giftBox{background:#fff; border:3px solid #222; border-radius:8px; padding:10px; margin-bottom:10px; display:flex; align-items:center; gap:8px}
.giftBox div{flex:1}
.giftBox b{font-size:8px}
.giftBox p{font-size:10px; margin:6px 0 0; letter-spacing:1px}
.copyBtn{font-family:inherit; font-size:7px; background:#222; color:#fff; border:none; border-radius:6px; padding:8px; cursor:pointer}
.mapWrap iframe{width:100%; height:170px; border:3px solid #222; border-radius:8px}
.mapBtn{display:block; text-align:center; font-family:inherit; font-size:8px; background:var(--pink); color:#fff; border:3px solid #222; border-radius:8px; padding:11px; margin-top:8px; text-decoration:none}
.coupleCards{display:flex; gap:8px}
.pCard{flex:1; background:#fff; border:3px solid #222; border-radius:8px; padding:10px 6px; text-align:center}
.pCard .avatar{width:44px; height:52px; margin:0 auto 8px; border:3px solid #222; border-radius:6px}
.avR{background:linear-gradient(#5b3a1e 0 25%, #f2c184 25% 50%, #2f7fd1 50% 78%, #27436b 78%)}
.avN{background:linear-gradient(#7a4a21 0 35%, #f2c184 35% 55%, #e2548b 55%)}
.pCard b{font-size:8px}
.pCard p{font-size:7px; color:#868e96; margin-top:6px}
.storyImg{height:90px; border:3px solid #222; border-radius:8px; margin-bottom:10px; display:flex; align-items:center; justify-content:center; font-size:8px; color:#fff; text-shadow:2px 2px 0 #222; background:linear-gradient(#ff9ff3, #f368e0 45%, #a55eea 45%, #5f27cd)}
@media (max-height:700px){ .couple{font-size:20px} .sky{padding-top:16px} }