/* Touch (#224). Nothing here changes how the pond looks on a desktop; it keeps a held finger from selecting or
   calling up a menu, and it holds the landscape-phone fallback. */
/* Double-tap zoom (#262): the HUD buttons change size and words on a press, so a quick second tap zoomed iOS. `manipulation` keeps pan and pinch but drops the double-tap;
   touch-action is not inherited, so the buttons say it too (the canvas keeps its own `none`, style.css). Textareas stay at 16 px or iOS zooms on focus (profile.css). */
html,button,a,summary{touch-action:manipulation}
#game,#game canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* "Telefonu dik tut." (turn-prompt.js): the paper slip of the pause menu, a phone that turns upright, one button.
   Short enough for a 390 px high screen: icon and words side by side. Reduced motion: the phone stands still, upright. */
.turn-dialog{--paper:#eee3c9;--ink:#294538;--muted:#4f6150;width:min(360px,90vw);max-height:88dvh;overflow:auto;padding:22px 24px 20px;border:1px solid #d0b57b;border-radius:26px;background:var(--paper);color:var(--ink);box-shadow:0 25px 70px #00170d80;text-align:center}
.turn-dialog::backdrop{background:#061e23c4;backdrop-filter:blur(5px)}
.turn-phone{display:block;margin:0 auto 6px;color:var(--ink);overflow:visible}
.turn-dialog h2{font:26px Georgia,serif;letter-spacing:-.4px;margin:6px 0 6px}
.turn-dialog p{font:italic 14px/1.5 Georgia,serif;color:var(--muted);margin:0 0 16px}
.turn-dialog button{min-width:160px;min-height:48px;padding:10px 22px;font:14px Georgia,serif;color:var(--ink);border:1px solid #6a785866;border-radius:22px;background:transparent}
.turn-dialog button:hover{background:#79835b12}
.turn-body{transform-box:fill-box;transform-origin:50% 50%;animation:turn-upright 2.4s ease-in-out infinite}
@keyframes turn-upright{0%,25%{transform:rotate(90deg)}60%,100%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.turn-body{animation:none}}
@media(max-height:499px){.turn-dialog[open]{display:grid;grid-template-columns:64px 1fr;column-gap:16px;align-items:center;text-align:left;width:min(440px,90vw)}.turn-phone{grid-row:1/3;margin:0}.turn-dialog h2{margin:0 0 4px}.turn-dialog p{margin:0}.turn-dialog button{grid-column:1/3;margin-top:12px;justify-self:stretch}}

/* A phone on its side, played anyway: the pond as a column that fits the height, in the shape it has upright, so
   its circles stay circles and the rest of the screen is shore. The dock keeps the column's width. */
@media(orientation:landscape) and (max-height:499px) and (pointer:coarse){
 #game-ui .game-shell{left:50%;right:auto;width:min(100%,calc(var(--stage-height)*.7));transform:translateX(-50%)}
 #game-ui .controls{width:min(420px,calc(min(100%,var(--stage-height)*.7) - 12px))}
 #game-ui .wish{width:min(600px,calc(var(--stage-height)*.7 - 24px))}
}