.feedback-area{--feedback-ink:#846773;--feedback-accent:#edb8c8;text-align:center;color:var(--feedback-ink)}
html[data-cafe-theme="halloween"] .feedback-area,html[data-cafe-theme="halloween"] #feedbackDialog{--feedback-accent:#f2c394;--feedback-ink:#8a6750}
#gameShell .feedback-area h2{font:800 18px/1.35 Nunito,sans-serif;letter-spacing:.02em;margin:0 0 5px;color:#886575}
#gameShell .feedback-area p{font:700 13px/1.55 Nunito,sans-serif;margin:0 0 12px;color:#947c74}
#gameShell .feedback-area{padding:16px 6px;border-top:1px dashed #d6b8a0;margin:12px 0 0}
#gameShell #cafeFeedback{padding:24px 18px 18px;margin:0;background:#fff7e8 url('paper-fibres.svg') repeat;border-top:1px dashed #d6b8a0}
#gameShell [data-feedback-open],#lunchBreak #breakFeedback{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:9px 22px;border:1.5px solid #be939e;border-radius:15px 22px 13px 20px;background:#fae7ec url('paper-fibres.svg') repeat;box-shadow:2px 3px #d6b8a050;color:#805f6c;font:800 15px/1.4 Nunito,sans-serif;letter-spacing:.025em;cursor:pointer;text-align:center}
#lunchBreak #breakFeedback{width:100%;font-size:14px;background:#fff7e8;box-shadow:none}
#gameShell [data-feedback-open]:hover,#lunchBreak #breakFeedback:hover{background-color:#f3d2dc}
#gameShell [data-feedback-open]:focus-visible,#lunchBreak #breakFeedback:focus-visible,#feedbackDialog :focus-visible{outline:3px solid #6c8b71;outline-offset:3px}
body:is([data-shift="break"],[data-shift="closed"],[data-cafe-start="preview"]) #cafeFeedback{display:none!important}
#feedbackDialog{--feedback-accent:#edb8c8;--feedback-ink:#846773;width:min(500px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;border:1px solid #cdb39b;border-radius:22px 17px 26px 15px;background:#fff8eb url('paper-fibres.svg') repeat;color:var(--feedback-ink);box-shadow:5px 8px 0 #c8a88c35,0 20px 90px #402d3e66;font:700 15px/1.55 Nunito,sans-serif;text-align:left}
#feedbackDialog::backdrop{background:#44343e70;backdrop-filter:blur(4px)}
#feedbackDialog .feedback-sheet{position:relative;box-sizing:border-box;padding:32px 28px 24px 42px;isolation:isolate}
#feedbackDialog .feedback-sheet:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent 28px,#e8b9c960 28px,#e8b9c960 29px,transparent 29px)}
#feedbackDialog .feedback-binding{position:absolute;top:75px;bottom:35px;left:0;width:25px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
#feedbackDialog .feedback-binding i{display:block;width:25px;height:31px;background:url('ui/brass-binder-ring-round.png') center/contain no-repeat}
#feedbackDialog .feedback-sticker{display:block;width:46px;height:46px;object-fit:contain;transform:rotate(-8deg);margin:0 0 8px}
#feedbackDialog h2{font:800 24px/1.25 Nunito,sans-serif;color:var(--feedback-ink);letter-spacing:.025em;margin:0 40px 8px 0;text-align:left}
#feedbackDialog p{font:700 14px/1.55 Nunito,sans-serif;color:#937c70;margin:0 0 18px}
#feedbackClose{position:absolute;top:9px;right:9px;min-width:54px;min-height:44px;padding:8px;border:0;box-shadow:none;background:transparent;color:#896c69;text-decoration:underline;text-underline-offset:3px;font:700 13px/1.4 Nunito,sans-serif;cursor:pointer}
#feedbackDialog fieldset{border:0;padding:0;margin:0;min-width:0}
#feedbackDialog .feedback-kinds{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 16px}
#feedbackDialog .feedback-kinds label{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:5px 9px;box-sizing:border-box;background:#fffdf6;border:1px dashed #cdae96;border-radius:7px 10px 5px 8px;font:700 13px/1.4 Nunito,sans-serif;cursor:pointer}
#feedbackDialog .feedback-kinds label:has(input:checked){background:var(--feedback-accent);border-style:solid;border-color:#ae8592;color:#6d505b;box-shadow:1px 2px #c7a88e40}
#feedbackDialog input[type=radio]{width:14px;height:14px;margin:0;accent-color:#946877}
#feedbackDialog .feedback-label{display:block;margin:0 0 7px;font:800 15px/1.4 Nunito,sans-serif;color:var(--feedback-ink)}
#feedbackDialog .feedback-device-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 8px}
#feedbackDialog .feedback-device-fields select{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:9px 7px;border:1px solid #d1baa4;border-radius:7px 10px 5px 8px;background:#fffdf5;color:#70585d;font:700 16px/1.4 Nunito,sans-serif}
#feedbackDialog #feedbackDetailsHint{font-size:12px;margin:0 0 16px}
#feedbackMessage{display:block;box-sizing:border-box;width:100%;min-height:145px;resize:vertical;max-height:40dvh;border:1px solid #d1baa4;border-radius:7px 10px 5px 8px;background:repeating-linear-gradient(transparent 0 27px,#ddc6ae55 27px 28px),#fffdf5;padding:9px 12px;font:700 16px/28px Nunito,sans-serif;letter-spacing:.01em;color:#70585d}
#feedbackMessage::placeholder{color:#aa9487;font-weight:600}
#feedbackCount{display:block;margin-top:5px;text-align:right;font:700 12px/1.5 Nunito,sans-serif;color:#a28c7f}
#feedbackDialog .feedback-privacy{font-size:12px;line-height:1.55;margin:12px 0 17px}
#feedbackSend{display:block;width:100%;min-height:46px;background:var(--feedback-accent);color:#745461;border:1.5px solid #b18a94;border-radius:15px 21px 14px 19px;box-shadow:inset 0 0 0 3px #fff5eb80,1px 3px #bd98a05c;font:800 16px/1.4 Nunito,sans-serif;letter-spacing:.03em;cursor:pointer}
#feedbackSend:disabled{opacity:.65;cursor:wait}
#feedbackDialog #feedbackStatus{margin:14px 0 0;color:#648066;white-space:pre-wrap;overflow-wrap:anywhere}
#feedbackDialog #feedbackStatus.error{color:#a05559}
#feedbackDialog .feedback-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#feedbackDialog [hidden]{display:none!important}
@media(max-width:420px){#feedbackDialog .feedback-sheet{padding:25px 18px 20px 35px}#feedbackDialog h2{font-size:22px}#feedbackDialog .feedback-kinds{gap:5px}#feedbackDialog .feedback-kinds label{padding:5px 7px}#feedbackDialog .feedback-sticker{width:38px;height:38px}}
@media(max-width:360px){#feedbackDialog .feedback-device-fields{grid-template-columns:1fr;gap:8px}}

/* Two separate notes below the game; boba comes first on a narrow phone. */
#gameShell #cafeCommunity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:30px max(22px,calc((100% - 1120px)/2)) max(28px,env(safe-area-inset-bottom));background:#f3e5d5}
#gameShell #cafeCommunity>:is(#cafeSupport,#cafeFeedback){position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;width:auto;min-width:0;min-height:210px;margin:0;padding:27px 25px 23px;border:1px solid #d7bda5;border-radius:11px 17px 10px 15px;background:#fff8e9 url('paper-fibres.svg') 0 0/180px 180px repeat;box-shadow:3px 5px #b7997d26;outline:1px dashed #e3cbb4;outline-offset:-7px;transform:rotate(-.45deg)}
#gameShell #cafeCommunity>#cafeFeedback{transform:rotate(.45deg);background-color:#fff7ec}
#cafeCommunity>section:before,#cafeCommunity>footer:before{content:'';position:absolute;top:-7px;left:calc(50% - 28px);width:56px;height:15px;background:repeating-linear-gradient(90deg,#eeb6c080 0 5px,#ffe4dca0 5px 10px);transform:rotate(-4deg);pointer-events:none}
#gameShell #cafeCommunity h2{margin:0;color:#8c6979;font:800 18px/1.4 Nunito,sans-serif!important;letter-spacing:.02em;text-align:center}
#gameShell #cafeCommunity p{margin:0;max-width:460px;color:#967d70;font:700 13px/1.65 Nunito,sans-serif!important;text-align:center}
#gameShell #cafeCommunity :is(.boba-support-link,[data-feedback-open]){margin-top:auto;min-height:44px;font:800 15px/1.4 Nunito,sans-serif!important}
body:is([data-shift="break"],[data-shift="closed"],[data-cafe-start="preview"]) #cafeCommunity{display:none!important}
@media(max-width:640px){#gameShell #cafeCommunity{grid-template-columns:1fr;gap:22px;padding:26px 18px max(24px,env(safe-area-inset-bottom))}#gameShell #cafeCommunity>:is(#cafeSupport,#cafeFeedback){min-height:0;padding:25px 22px 22px}}