/* DreamKit shell styles: fixes every shop game shares on phones. Link it AFTER the game's own <style>
   (<link rel="stylesheet" href="/games/_kit/kit.css">) so it wins at equal weight. The matching
   behaviour lives in _kit/platform.js (rotate card, scroll fade, haptics, wake lock). */

/* iPhone with a notch (PWA, WebView): :root already pads the safe areas, so #vp must not stay 100dvh tall. */
html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
#vp{height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
/* No long-press menu; the pour and torch buttons are held, so a scroll or callout must not take the touch over. */
#stage{-webkit-touch-callout:none}
.pot[data-pour],.tool[data-k="torch"]{touch-action:pan-x}

/* Pause sheet: an odd last tile spans the row instead of sitting alone in the left half. */
.pause-grid>:last-child:nth-child(odd){grid-column:1/-1}

/* HUD on a phone: the level button never grows into the star rating. */
#stage:not([data-layout="desktop"]) .hud .level-btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:14.5px;padding-inline:6px}
.hud .rate{flex:none}

/* Rows that scroll sideways (broth pots, staff strip): fade on the side that has more. */
.scroll-x{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.scroll-x.more-end{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
.scroll-x.more-start{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 30px),transparent)}
.scroll-x.more-start.more-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}

/* Phone held sideways on a low touch screen: ask to rotate; the game holds its clock meanwhile. */
#rotate{display:none;position:fixed;inset:0;z-index:190;background:#2a2d48;color:#fff5e6;place-items:center;text-align:center;font-family:var(--display,system-ui);padding:24px}
#rotate b{display:block;font-size:22px;margin:10px 0 4px}
#rotate span{font-size:14px;opacity:.85}
#rotate i{display:block;width:44px;height:72px;margin:0 auto;border:4px solid #fff5e6;border-radius:10px;animation:kit-tilt 1.6s ease-in-out infinite}
@keyframes kit-tilt{0%,30%{transform:rotate(-90deg)}60%,100%{transform:rotate(0)}}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){#rotate{display:grid}}

/* Morning bubble: today's check-in gift. */
.gift-line{color:#7a4a12;font-weight:800}