/* Feedback sheet + entry buttons (lane 2: playtest insight, js/feedback.js). Sizes are stage px; the stage scales as a whole.
   --fbk grows everything on phones (body.mobile) and upright layouts (body.portrait), like the game's other sheets. */
#fbSheet { --fbk: 1; position: absolute; inset: 0; z-index: 4000; display: grid; place-items: center; background: rgba(5, 2, 14, .74);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity .18s ease; font-family: var(--font-ui); color: var(--ink); }
body.mobile #fbSheet { --fbk: 1.45; }
body.portrait #fbSheet { --fbk: 1.75; }
#fbSheet.on { opacity: 1; }
#fbSheet .fb-box { position: relative; width: min(calc(640px * var(--fbk)), calc(100% - 48px)); max-height: calc(100% - 48px); overflow: hidden;
  padding: calc(22px * var(--fbk)) calc(26px * var(--fbk)); border-radius: calc(18px * var(--fbk)); border: 1px solid rgba(232, 186, 90, .45);
  background: radial-gradient(120% 80% at 50% 0%, rgba(168, 107, 255, .16), transparent 60%), linear-gradient(180deg, #1a1033, #0e0820);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); transform: translateY(10px) scale(.98); transition: transform .22s cubic-bezier(.2, .8, .3, 1.2); }
#fbSheet.on .fb-box { transform: none; }
#fbSheet .fb-head { display: flex; align-items: center; gap: 12px; }
#fbSheet h2 { flex: 1; margin: 0; font: 800 calc(26px * var(--fbk))/1.1 var(--font-title); letter-spacing: .04em; color: var(--gold); }
#fbSheet .fb-x { appearance: none; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); border-radius: 50%; width: calc(38px * var(--fbk)); height: calc(38px * var(--fbk));
  display: grid; place-items: center; cursor: pointer; color: var(--ink); padding: 0; }
#fbSheet .fb-x svg, #fbSheet .fb-x .ico { width: 55%; height: 55%; }
#fbSheet .fb-sub { margin: calc(8px * var(--fbk)) 0 calc(14px * var(--fbk)); color: var(--muted); font-size: calc(15px * var(--fbk)); line-height: 1.4; }
#fbSheet .fb-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8px * var(--fbk)); margin-bottom: calc(12px * var(--fbk)); }
#fbSheet .fb-cats button { appearance: none; cursor: pointer; padding: calc(9px * var(--fbk)) 6px; border-radius: calc(10px * var(--fbk)); border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04); color: var(--ink); font: 700 calc(15px * var(--fbk)) var(--font-ui); transition: background .15s, border-color .15s, color .15s; }
#fbSheet .fb-cats button.on { border-color: var(--gold); background: rgba(242, 193, 78, .16); color: #ffe7a6; box-shadow: 0 0 14px rgba(242, 193, 78, .25); }
#fbSheet textarea { display: block; width: 100%; resize: none; min-height: calc(120px * var(--fbk)); padding: calc(10px * var(--fbk)) calc(12px * var(--fbk)); border-radius: calc(10px * var(--fbk));
  border: 1px solid var(--line); background: rgba(0, 0, 0, .35); color: var(--ink); font: 400 calc(15px * var(--fbk))/1.45 var(--font-ui); user-select: text; -webkit-user-select: text; touch-action: auto; }
#fbSheet textarea { font-size: max(16px, calc(15px * var(--fbk))) !important; } /* style.css pins inputs to 16px (iOS zoom); the stage is scaled, so size it in stage px */
#fbSheet textarea:focus { outline: none; border-color: var(--crystal); box-shadow: 0 0 0 3px rgba(168, 107, 255, .2); }
#fbSheet .fb-chk { display: flex; gap: 10px; align-items: flex-start; margin-top: calc(12px * var(--fbk)); font-size: calc(14px * var(--fbk)); color: var(--ink); cursor: pointer; }
#fbSheet .fb-chk input { width: calc(18px * var(--fbk)); height: calc(18px * var(--fbk)); margin: 2px 0 0; accent-color: var(--gold); flex: none; }
#fbSheet .fb-note { margin-top: calc(6px * var(--fbk)); color: var(--muted); font-size: calc(12.5px * var(--fbk)); }
#fbSheet .fb-err { min-height: calc(18px * var(--fbk)); margin-top: calc(8px * var(--fbk)); color: #ff9c92; font-size: calc(14px * var(--fbk)); }
#fbSheet .fb-acts { display: flex; justify-content: flex-end; gap: calc(10px * var(--fbk)); margin-top: calc(8px * var(--fbk)); }
#fbSheet .fb-acts .btn { font-size: calc(16px * var(--fbk)); padding: calc(10px * var(--fbk)) calc(22px * var(--fbk)); min-width: calc(120px * var(--fbk)); }
#fbSheet .fb-acts .btn[disabled] { opacity: .6; }
#fbSheet .fb-done { text-align: center; padding: calc(10px * var(--fbk)) 0; }
#fbSheet .fb-done > svg, #fbSheet .fb-done > .ico { width: calc(54px * var(--fbk)); height: calc(54px * var(--fbk)); }
#fbSheet .fb-done p { color: var(--muted); font-size: calc(15px * var(--fbk)); margin: 8px 0 14px; }
#fbSheet .fb-done .fb-acts { justify-content: center; }
body.portrait #hub .hubtop #hFeedback { right: 0; top: 240px; }