/* Feedback (feedback-ui.mjs): the island view's speech-bubble button and its small window, in the HUD's cream pixel style
   (settings.css). The button is a square twin of the gear, placed by feedback-ui.mjs right of it in the top-left row
   (LEADERBOARD · name · gear · feedback) or under it where the resource cards leave no room. On phones, where the gear
   docks above the bottom navigation's left end, the bubble stands just right of the gear (the left edge's column of
   tiles, PACKS, STAKE and the Social Pot, stays clear above them). */
.game-feedback-button{position:absolute;display:grid;place-items:center;box-sizing:border-box;width:62px;height:62px;padding:0 0 3px;
  cursor:pointer;pointer-events:auto;touch-action:manipulation}
.game-feedback-button .pixel-icon{width:62%;height:62%;image-rendering:pixelated;transition:translate .15s steps(2)}
.game-feedback-button:hover .pixel-icon{translate:0 -2px}
.game-feedback-button:active{transform:translateY(2px)}
.game-feedback-button:focus-visible{outline:3px solid #ad5b35;outline-offset:3px}
.game-feedback-button[hidden]{display:none}
body[data-pc-picker] .game-feedback-button{display:none}
/* Right of the gear where it docks at the navigation's left end (phones and screens without room beside the name). */
.game-feedback-button[data-dock=nav]{left:calc(max(10px,env(safe-area-inset-left)) + 46px + 8px);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 63px);
  width:46px;height:46px;border-width:7px}
/* An open LEADERBOARD or profile panel reaches the bubble's corner on phones and short screens: it steps aside with the gear. */
@media(max-width:700px),(max-height:500px){
  body:has(:is(.leaderboard-panel,.island-profile-panel):not([hidden])) .game-feedback-button{visibility:hidden}
}
body:has(:is(.leaderboard-panel,.island-profile-panel):not([hidden])) .game-feedback-button[data-dock=nav]{visibility:hidden}
@media(prefers-reduced-motion:reduce){.game-feedback-button .pixel-icon{translate:none!important;transition:none}}

/* ---------------------------------------------------------------- window */
.feedback-window{--p:clamp(.8px,min(calc((100vw - 24px) / 560),calc((100dvh - 24px) / 620)),1.3px);--ink:#3e211d;--soft:#6b4a33;--muted:#94683f;
  box-sizing:border-box;width:min(calc(560 * var(--p)),calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:0;
  border:calc(12 * var(--p)) solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;background:none;overflow:hidden;
  color:var(--ink);font:400 calc(14 * var(--p))/1.45 Pixeloid,monospace;font-synthesis:none;box-shadow:0 12px 40px #090f2433}
.feedback-window[open]{display:flex;flex-direction:column}
.feedback-window::backdrop{background:#111d3980;backdrop-filter:blur(3px)}
.feedback-window *{box-sizing:border-box}
.feedback-window :is(h1,p){margin:0}
.feedback-window button{font-family:Pixeloid,monospace;color:var(--ink);cursor:pointer}
.feedback-window :is(button,textarea):focus-visible{outline:3px solid #3a97cf;outline-offset:2px}
.feedback-head{flex:none;display:flex;align-items:center;gap:calc(12 * var(--p));padding:calc(9 * var(--p)) calc(14 * var(--p));
  background:linear-gradient(105deg,#ffd08b,#ffe6ae);border-bottom:calc(3 * var(--p)) solid #d9a15f}
.feedback-head-icon{flex:none;width:calc(42 * var(--p));height:calc(42 * var(--p));image-rendering:pixelated;filter:drop-shadow(0 calc(2 * var(--p)) 0 #b8742f)}
.feedback-head h1{flex:1;min-width:0;font:700 calc(30 * var(--p))/1.1 Pixeloid,monospace;letter-spacing:.02em;text-transform:uppercase;overflow-wrap:break-word;hyphens:auto}
.feedback-close{flex:none;display:grid;place-items:center;width:calc(46 * var(--p));height:calc(46 * var(--p));min-width:36px;min-height:36px;padding:calc(10 * var(--p));
  border:0;background:url('../ui/frames/picker-close.svg') center/100% 100% no-repeat}
.feedback-close svg{width:100%;height:100%;shape-rendering:crispEdges}
.feedback-close:hover{filter:brightness(1.05)}
/* Content-sized body (flex-basis auto): WebKit resolves a percentage inside a modal <dialog> as 0 (settings.css). */
.feedback-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;gap:calc(10 * var(--p));padding:calc(14 * var(--p)) calc(16 * var(--p)) calc(16 * var(--p));
  scrollbar-width:thin;scrollbar-color:#c99461 #fff4d2}
.feedback-intro{color:var(--soft)}
.feedback-label{font:700 calc(13 * var(--p))/1.2 Pixeloid,monospace;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
/* The player's own words: a readable system font (every script and emoji), 16 px at least so phones never zoom in. */
.feedback-text{display:block;width:100%;min-height:calc(150 * var(--p));max-height:45dvh;resize:vertical;margin:0;padding:calc(10 * var(--p)) calc(12 * var(--p));
  font:400 max(16px,calc(15 * var(--p)))/1.45 system-ui,'Segoe UI',Tahoma,'Nirmala UI','Leelawadee UI',sans-serif;color:#2b2016;background:#fffdf4;
  border:calc(2 * var(--p)) solid #dcb784;box-shadow:inset 0 calc(2 * var(--p)) #f1dcb4;border-radius:0}
.feedback-text:focus{border-color:#c98a4b;outline:none}
.feedback-text[readonly]{opacity:.75}
.feedback-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:calc(4 * var(--p)) calc(12 * var(--p));
  font-size:calc(12.5 * var(--p));color:var(--muted)}
.feedback-count{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.feedback-count.is-over{color:#b3261e;font-weight:700}
.feedback-error{padding:calc(7 * var(--p)) calc(10 * var(--p));color:#7a1f15;background:#ffe3dc;border:calc(2 * var(--p)) solid #e59a8a;overflow-wrap:anywhere}
.feedback-error[hidden]{display:none}
.feedback-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:calc(8 * var(--p))}
.feedback-send,.feedback-secondary{min-width:calc(120 * var(--p));min-height:44px;padding:calc(8 * var(--p)) calc(16 * var(--p));font:700 calc(15 * var(--p))/1 Pixeloid,monospace;text-transform:uppercase}
.feedback-send{color:#fff!important;background:#5aa344;border:calc(2 * var(--p)) solid #2f6b2a;box-shadow:0 calc(3 * var(--p)) #2f6b2a}
.feedback-send:hover:not(:disabled){filter:brightness(1.06)}
.feedback-send:active:not(:disabled){translate:0 calc(2 * var(--p));box-shadow:0 calc(1 * var(--p)) #2f6b2a}
.feedback-send:disabled{cursor:default;opacity:.5;filter:grayscale(.4)}
.feedback-secondary{background:#fff8e3;border:calc(2 * var(--p)) solid #dcb784;box-shadow:0 calc(3 * var(--p)) #c99461}
.feedback-done{display:grid;justify-items:center;gap:calc(8 * var(--p));padding:calc(10 * var(--p)) 0;text-align:center}
.feedback-done-mark{display:grid;place-items:center;width:calc(48 * var(--p));height:calc(48 * var(--p));padding:calc(12 * var(--p));color:#fff;
  background:#5aa344;border:calc(3 * var(--p)) solid #2f6b2a}
.feedback-done-mark svg{width:100%;height:100%;shape-rendering:crispEdges}
.feedback-thanks{font:700 calc(18 * var(--p))/1.3 Pixeloid,monospace;color:#24522a}
.feedback-done + .feedback-quota{text-align:center;color:var(--muted);font-size:calc(12.5 * var(--p))}
@media(max-width:700px){
  .feedback-head h1{font-size:calc(24 * var(--p))}
  .feedback-actions > button{flex:1 1 auto}
}