/* Đua ghe giao hàng — river-side game UI, independent from the Lô tô canvas. */
#boat-delivery-modal{background:rgba(30,37,26,.71);backdrop-filter:blur(7px);padding:10px}
#boat-delivery-modal[hidden]{display:none}
#boat-delivery-modal .boat-card{
  width:min(780px,calc(100vw - 20px));max-height:calc(100dvh - 20px);
  border:4px solid #815333;border-radius:24px;overflow:auto;position:relative;
  background:linear-gradient(140deg,#fff1cf,#e9d2a0);
  box-shadow:0 7px 0 #56351f,0 22px 45px #28190e9e,inset 0 0 0 6px #fff8df;
  scrollbar-width:thin;scrollbar-color:#bf9665 transparent
}
#boat-delivery-modal button{cursor:pointer}
#boat-delivery-modal .boat-content{color:#69432e}
#boat-delivery-modal .boat-brief,#boat-delivery-modal .boat-finish{position:relative;padding:49px 26px 25px;text-align:center}
#boat-delivery-modal .boat-awning{
  position:absolute;top:0;left:0;right:0;height:35px;display:grid;place-items:center;
  background:repeating-linear-gradient(90deg,#bb7252 0 55px,#f0c981 55px 110px,#76955b 110px 165px);
  border-bottom:3px solid #a57747;color:#fff7d2;font:800 12px/1.25 'Segoe UI',sans-serif;letter-spacing:2px;text-shadow:0 1px #765132
}
#boat-delivery-modal .boat-x{
  position:absolute;right:12px;top:43px;display:grid;place-items:center;
  width:35px;height:35px;border-radius:50%;border:2px solid #ac7c4d;background:#fff2d1;
  color:#765035;font:700 24px/1.15 Arial,sans-serif;box-shadow:0 2px 0 #b88d56
}
#boat-delivery-modal .boat-kicker{display:block;margin:8px auto 5px;color:#7e5333;font:800 12px/1.3 'Segoe UI',sans-serif;letter-spacing:2px}
#boat-delivery-modal h2{margin:4px 0 12px;color:#5e3d2a;font:400 40px/1.15 Patrick,'Segoe UI',Tahoma,sans-serif;text-shadow:0 2px #fff8e2}
#boat-delivery-modal p{margin:8px auto 12px;max-width:63ch;color:#795638;font:15px/1.5 'Segoe UI',sans-serif}
#boat-delivery-modal p b{color:#5d7951}
#boat-delivery-modal .boat-illustration{position:relative;height:168px;width:min(570px,100%);margin:8px auto 15px;overflow:hidden;border:3px solid #b99a68;border-radius:17px;background:linear-gradient(#c9eade 0 47%,#a8be79 47% 56%,#71b6aa 56%)}
#boat-delivery-modal .boat-sun{position:absolute;top:13px;right:64px;width:39px;height:39px;border-radius:50%;background:#ffdda2;box-shadow:0 0 0 9px #fff1c94d}
#boat-delivery-modal .boat-river{position:absolute;bottom:-49px;left:-9%;width:118%;height:116px;border-radius:50% 50% 0 0;background:repeating-linear-gradient(180deg,#74c1b4 0 18px,#8fd1c5 18px 22px);transform:rotate(-6deg)}
#boat-delivery-modal .boat-house{position:absolute;top:33px;right:17%;display:grid;place-items:center;width:55px;height:44px;background:#f3d39d;border:3px solid #966e45;border-radius:8px;color:#7f513c;font:bold 33px/1.15 Arial,sans-serif}
#boat-delivery-modal .boat-palm{position:absolute;left:6%;top:6px;font-size:65px;transform:rotate(-13deg)}
#boat-delivery-modal .boat-preview{position:absolute;bottom:16px;left:38%;width:104px;height:66px;filter:drop-shadow(0 8px 3px #3b645b55);transform:rotate(-12deg)}
#boat-delivery-modal .boat-preview .boat-hull{position:absolute;left:0;bottom:0;width:102px;height:44px;border:4px solid #704627;background:#a86f45;clip-path:polygon(0 48%,20% 0,88% 0,100% 50%,88% 100%,20% 100%);border-radius:45%}
#boat-delivery-modal .boat-preview .boat-seat{position:absolute;left:23px;bottom:13px;width:60px;height:21px;border-radius:50%;border:3px solid #89502c;background:#d6a36d}
#boat-delivery-modal .boat-preview .boat-helm{position:absolute;left:32px;top:3px;width:31px;height:25px;border-radius:50%;background:#edbc93;border:2px solid #a7744b}
#boat-delivery-modal .boat-preview .boat-helm::after{content:'';position:absolute;left:-4px;top:-10px;width:37px;height:17px;background:#f0d48d;clip-path:polygon(50% 0,100% 100%,0 100%)}
#boat-delivery-modal .boat-preview .boat-paddle{position:absolute;left:79px;bottom:4px;width:6px;height:62px;background:#825332;transform:rotate(31deg);border-radius:4px}
#boat-delivery-modal .boat-preview b{position:absolute;bottom:11px;left:14px;font-size:19px}
#boat-delivery-modal .boat-target{position:absolute;bottom:53px;right:15%;font-size:30px}
#boat-delivery-modal .boat-rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px auto;max-width:600px}
#boat-delivery-modal .boat-rule-grid span,#boat-delivery-modal .boat-summary span{display:grid;gap:2px;padding:9px 5px;border:1px solid #d5b784;border-radius:11px;background:#fff8e2}
#boat-delivery-modal .boat-rule-grid b{font:800 18px/1.3 Patrick,'Segoe UI',sans-serif;color:#7b994f}
#boat-delivery-modal .boat-rule-grid small{font:600 12px/1.25 'Segoe UI',sans-serif;color:#72583f}
#boat-delivery-modal .boat-buttons{max-width:430px;margin:15px auto 0}
#boat-delivery-modal .boat-main{
  display:block;width:100%;min-height:48px;padding:8px 16px;
  background:linear-gradient(#97b369,#6e924c);border:2px solid #58763f;border-radius:12px;
  color:#fff9dc;box-shadow:0 4px 0 #4d6837;font:700 22px/1.2 Patrick,'Segoe UI',sans-serif
}
#boat-delivery-modal .boat-sub{display:block;margin:12px auto 0;padding:6px 15px;border:0;background:transparent;color:#835d3f;text-decoration:underline;text-underline-offset:4px;font:17px Patrick,'Segoe UI',sans-serif}
#boat-delivery-modal .boat-tip{margin:12px auto 0!important;font-size:12px!important;color:#6d563d!important}
#boat-delivery-modal .boat-game{padding:12px 14px 13px}
#boat-delivery-modal .boat-topline{display:flex;justify-content:space-between;align-items:center;padding:1px 2px 7px}
#boat-delivery-modal .boat-topline>div{display:grid;gap:2px}
#boat-delivery-modal .boat-topline span{font:800 12px/1.3 'Segoe UI',sans-serif;letter-spacing:1.6px;color:#73573b}
#boat-delivery-modal .boat-topline strong{font:500 25px/1.15 Patrick,'Segoe UI',sans-serif;color:#69462e}
#boat-delivery-modal .boat-game .boat-x{position:static;width:32px;height:32px;flex:none}
#boat-delivery-modal .boat-hud{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:6px 8px;background:#fff9e6;border:1px solid #d5b285;border-radius:10px;font:700 12px/1.25 'Segoe UI',sans-serif;color:#735139}
#boat-delivery-modal #boat-hearts{color:#854b3a;font-size:19px;letter-spacing:1px}
#boat-delivery-modal .boat-hud b{color:#805430}
#boat-delivery-modal .boat-meter{margin:8px 0;height:9px;border-radius:12px;overflow:hidden;border:1px solid #c2996b;background:#dfcba0}
#boat-delivery-modal .boat-meter i{display:block;width:0;height:100%;border-radius:12px;background:linear-gradient(90deg,#7b9d52,#afd077);transition:width .1s linear}
#boat-delivery-modal .boat-stage{position:relative;isolation:isolate;overflow:hidden;height:min(45vh,430px);min-height:260px;border:3px solid #729f89;border-radius:15px;background:#82b5a0;touch-action:none;box-shadow:inset 0 0 0 3px #d9e9c1,0 5px 0 #a38259}
#boat-delivery-modal .boat-stage canvas{display:block;width:100%;height:100%;touch-action:none}
#boat-delivery-modal .boat-message{position:absolute;top:12px;left:50%;transform:translate(-50%,-7px);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;border:1px solid #fff8dc;border-radius:22px;padding:6px 14px;background:#5a7c51e8;color:#fffce5;font:800 12px/1.25 'Segoe UI',sans-serif;box-shadow:0 4px 12px #35564b75}
#boat-delivery-modal .boat-message.visible{opacity:1;transform:translate(-50%,0)}
#boat-delivery-modal .boat-controls{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:11px;margin:10px 0 0}
#boat-delivery-modal .boat-controls button{min-height:49px;border:2px solid #b88c58;border-radius:12px;background:linear-gradient(#fff9e6,#ead4aa);color:#77523a;box-shadow:0 3px 0 #9b754a;font:700 20px/1.15 Patrick,'Segoe UI',sans-serif;touch-action:manipulation}
#boat-delivery-modal .boat-controls .boat-boost{background:linear-gradient(#e6c47b,#d4a854);border-color:#ad833f;color:#684525}
#boat-delivery-modal .boat-controls button:disabled{opacity:.68}
#boat-delivery-modal .boat-controls button:active{transform:translateY(2px);box-shadow:0 1px 0 #9b754a}
#boat-delivery-modal .boat-legend{text-align:center;font:700 12px/1.4 'Segoe UI',sans-serif;color:#6e583d;margin-top:9px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
#boat-delivery-modal .boat-legend span:first-child{color:#61884c}
#boat-delivery-modal .boat-legend span:nth-child(2){color:#7a5532}
#boat-delivery-modal .boat-legend span:nth-child(3){color:#758c91}
#boat-delivery-modal .boat-legend span:last-child{color:#b58935}
#boat-delivery-modal .boat-finish-symbol{display:grid;place-items:center;width:79px;height:79px;margin:8px auto;border:3px solid #92a863;border-radius:50%;background:#e6eec9;font:700 54px/1.15 Georgia,serif;color:#7e9c54}
#boat-delivery-modal .boat-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:510px;margin:17px auto}
#boat-delivery-modal .boat-summary span{display:block;font:14px 'Segoe UI',sans-serif}
#boat-delivery-modal .boat-winnings{display:grid;gap:5px;max-width:450px;margin:12px auto 17px;padding:12px;border:2px solid #92ab60;border-radius:13px;background:#edf2d7}
#boat-delivery-modal .boat-winnings small{font:800 12px 'Segoe UI',sans-serif;letter-spacing:1.6px;color:#74854a}
#boat-delivery-modal .boat-winnings strong{font:700 36px/1.15 Patrick,'Segoe UI',sans-serif;color:#5e8b49}
#boat-delivery-modal .boat-finish .boat-main{max-width:420px;margin:auto}
@media(max-width:620px){
  #boat-delivery-modal .boat-brief,#boat-delivery-modal .boat-finish{padding:43px 12px 16px}
  #boat-delivery-modal h2{font-size:29px}
  #boat-delivery-modal p{font-size:13px}
  #boat-delivery-modal .boat-illustration{height:122px}
  #boat-delivery-modal .boat-rule-grid small{font-size:11px}
  #boat-delivery-modal .boat-rule-grid b{font-size:16px}
  #boat-delivery-modal .boat-card{width:calc(100vw - 12px)}
  #boat-delivery-modal .boat-game{padding:9px 7px}
  #boat-delivery-modal .boat-hud{gap:3px;padding:5px;font-size:11px}
  #boat-delivery-modal #boat-hearts{font-size:15px}
  #boat-delivery-modal .boat-stage{height:46vh;min-height:230px}
  #boat-delivery-modal .boat-controls{gap:6px}
  #boat-delivery-modal .boat-controls button{font-size:17px}
  #boat-delivery-modal .boat-legend{font-size:11px}
}
@media(orientation:landscape) and (max-height:510px){
  #boat-delivery-modal .boat-card{width:min(920px,calc(100vw - 12px));max-height:calc(100dvh - 10px)}
  #boat-delivery-modal .boat-game{padding:6px 10px}
  #boat-delivery-modal .boat-topline{padding-bottom:3px}
  #boat-delivery-modal .boat-topline strong{font-size:20px}
  #boat-delivery-modal .boat-hud{padding:3px 8px}
  #boat-delivery-modal .boat-meter{margin:5px 0;height:7px}
  #boat-delivery-modal .boat-stage{height:54vh;min-height:145px}
  #boat-delivery-modal .boat-controls{margin-top:7px}
  #boat-delivery-modal .boat-controls button{min-height:44px}
  #boat-delivery-modal .boat-legend{margin-top:4px}
  #boat-delivery-modal .boat-brief,#boat-delivery-modal .boat-finish{padding-top:42px}
  #boat-delivery-modal .boat-illustration{height:90px;margin:5px auto}
  #boat-delivery-modal .boat-rule-grid{margin:5px auto}
  #boat-delivery-modal p{margin:3px auto 5px}
}
@media(prefers-reduced-motion:reduce){#boat-delivery-modal .boat-message,#boat-delivery-modal .boat-meter i{transition:none}}