/* Community links are quiet additions to the receiver, with full-size touch targets. */
.support-link { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:9px 14px; border:1px solid #c0bea5; border-radius:5px; background:#f2e8ce; color:#69553e; font-size:12px; white-space:nowrap; box-shadow:0 2px 0 #d4c6aa; }
.support-link svg,.share-icon svg,.share-actions svg { width:20px; height:20px; flex-shrink:0; }
.header-right { gap:10px; }
.footer-support { display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.play-share { display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:10px 0 0; }
.share-icon { display:inline-grid; place-items:center; width:44px; height:44px; padding:10px; border:1px solid #d1d5bf; background:#fffdf1; border-radius:7px; color:#53654a; box-shadow:0 2px 0 #d9dcc7; }
.share-icon:hover { background:#e9eedb; border-color:#8ea17e; }
.share-icon:active { transform:translateY(2px); box-shadow:none; }
.game-dialog>.play-share,#bell-dialog>.play-share { justify-content:center; margin-top:14px; border-top:1px solid #dce0cd; }
.game-dialog>.play-share:before,#bell-dialog>.play-share:before { content:'この遊びをおすそわけ'; font-size:11px; color:#78816a; margin-right:9px; }
.share-dialog { width:min(720px,calc(100% - 20px)); max-height:calc(100dvh - 24px); padding:24px; border:1px solid #aab59b; border-radius:15px; color:#344e3c; background:#fffdf1; overflow-y:auto; }
.share-dialog::backdrop { background:#26392d88; backdrop-filter:blur(3px); }
.share-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.share-heading { position:sticky; top:0; z-index:5; background:#fffdf1; }
.share-heading .close { position:static; min-width:44px; min-height:44px; }
.share-dialog h2 { font-size:22px; line-height:1.6; margin:12px 0; overflow-wrap:anywhere; }
.share-dialog p { font-size:12px; line-height:1.9; }
.share-preview { display:block; width:auto; max-width:100%; max-height:350px; margin:16px auto; border:1px solid #c5cbb5; border-radius:8px; object-fit:contain; }
.share-status { min-height:24px; color:#5a7252; }
.share-url-label { font-size:11px; display:block; margin-bottom:6px; }
#share-url { width:100%; min-width:0; min-height:44px; padding:10px; border:1px solid #c0c9b3; border-radius:5px; background:#eff2e2; font:12px monospace; color:#425a40; }
.share-actions { display:flex; flex-wrap:wrap; gap:9px; margin:14px 0; }
.share-actions button,.share-actions a,.share-platform { display:inline-flex; justify-content:center; align-items:center; gap:7px; padding:10px 14px; min-height:44px; border:1px solid #aebd9f; border-radius:5px; background:#f4f4e4; color:#46603f; font-size:12px; }
.share-actions .share-native { background:#586f4b; color:#fffdf0; border-color:#586f4b; }
.share-actions button:disabled { opacity:.45; }
.share-platform { background:#e9edda; }
.share-limit,.share-local-note { color:#7e775e; }
.support-page { background:radial-gradient(ellipse at 20% 10%,#f7f0db,transparent 60%),#f5f2e3; }
.back-link { font-size:12px; padding:12px 0; }
.support-main { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:55px; padding:35px 0 20px; }
.support-intro { position:relative; padding-top:20px; }
.support-intro h1 { font-size:clamp(30px,3.5vw,44px); line-height:1.65; color:#496342; }
.support-intro>p { font-size:14px; line-height:2.2; color:#737661; }
.support-heart { display:block; font:100px Georgia,serif; color:#aa7951; line-height:1; margin-top:38px; transform:rotate(-10deg); }
.support-intro .eyebrow { font-size:10px; letter-spacing:.1em; }
.support-intro .support-small { font-size:12px; margin-top:25px; }
.support-letter { position:relative; padding:32px; border:1px solid #c6c8b1; background:repeating-linear-gradient(0deg,transparent 0 7px,#b6aa7c05 8px),#fffdf2; border-radius:6px; box-shadow:4px 6px 0 #d6cdb64a,0 12px 30px #6d603510; }
.support-letter h2 { margin:0 65px 18px 0; font-size:22px; }
.support-stamp { position:absolute; top:20px; right:23px; border:2px dashed #b49469; padding:5px; font:11px/1.4 monospace; color:#a48259; text-align:center; transform:rotate(9deg); }
#support-availability { font-size:12px; line-height:1.9; padding:12px; border-left:3px solid #b8c49d; background:#eef1de; }
.support-letter fieldset { border:0; padding:0; margin:28px 0 12px; min-width:0; }
.support-letter legend { font-size:13px; font-weight:600; margin-bottom:13px; }
.support-letter legend>span { font:11px monospace; color:#9a855e; margin-right:9px; }
.amount-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.amount-options label,.payment-methods label { position:relative; display:flex; align-items:center; gap:7px; border:1px solid #c4ccb5; border-radius:5px; background:#f7f6e8; padding:14px 11px; cursor:pointer; }
.amount-options label:has(input:checked),.payment-methods label:has(input:checked) { border-color:#738a5f; background:#e5ecd3; box-shadow:inset 0 0 0 1px #91a176; }
.amount-options input,.payment-methods input { width:16px; height:16px; accent-color:#647c52; flex-shrink:0; }
.amount-options span { font-size:24px; font-weight:600; letter-spacing:.02em; }
.amount-options small { font-size:12px; padding-left:4px; }
.amount-options .amount-free { font-size:14px; }
#custom-field { margin-top:15px; }
#custom-field label { display:block; font-size:12px; margin-bottom:7px; }
#custom-amount { width:100%; min-height:46px; padding:10px 12px; background:#fffef7; color:#42563b; border:1px solid #aab99a; border-radius:5px; }
#amount-help { font-size:11px; color:#7b816b; }
.form-error { min-height:18px; color:#a44c35; font-size:12px; line-height:1.7; }
.payment-methods { display:grid; gap:8px; }
.payment-methods label { min-height:50px; }
.payment-methods span { font-size:14px; font-weight:600; }
.payment-methods small { margin-left:auto; font-size:10px; color:#7b826a; }
.payment-methods .unavailable { background:#f3f2e8; color:#888d7a; cursor:default; }
.support-small { font-size:11px; line-height:1.9; color:#7e826d; }
.support-total { border-top:1px solid #d7dcc8; margin-top:24px; padding:19px 0; display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.support-total>span { font-size:12px; }
.support-total strong { font-size:28px; }
.support-total small { font-size:12px; margin-left:5px; }
#support-submit { width:100%; justify-content:space-between; border:0; min-height:52px; }
#support-submit:disabled { opacity:.45; box-shadow:none; transform:none; }
.support-after { grid-column:1/-1; text-align:center; padding:35px 0 20px; border-top:1px solid #d3d8c3; }
.support-after h2 { font-size:17px; color:#657b54; }
.support-after p { line-height:2.1; color:#7a7d68; font-size:12px; }
.support-after a { display:inline-block; padding:12px; font-size:12px; text-decoration:underline; }
@media(max-width:600px){
  .header .support-link { padding:8px 9px; gap:4px; font-size:11px; }
  .header .support-link svg { width:16px; }
  .header-right { gap:7px; }
  .share-dialog { padding:16px; max-height:calc(100dvh - 10px); }
  .share-dialog h2 { font-size:19px; }
  .share-preview { max-height:300px; }
  .share-actions>* { flex:1 0 calc(50% - 9px); padding:9px 7px!important; }
  .share-actions .share-native { flex-basis:100%; }
  .support-main { display:block; padding-top:8px; }
  .support-page .header { height:auto; min-height:88px; gap:12px; flex-wrap:wrap; }
  .support-intro { padding:10px 0 20px; }
  .support-intro h1 { font-size:31px; margin:15px 0; }
  .support-intro>p { font-size:12px; }
  .support-heart { font-size:66px; position:absolute; right:4px; top:37px; margin:0; opacity:.65; }
  .support-letter { padding:24px 18px; }
  .support-letter h2 { font-size:20px; }
  .support-stamp { right:15px; top:17px; }
  .support-after { margin-top:45px; }
  .support-page .wrap { width:calc(100% - 28px); }
  .support-page .brand { font-size:18px; }
}
@media(max-width:380px){.header .support-link span{display:none}.header .support-link{min-width:44px}.header-right{gap:6px}.amount-options span{font-size:21px}}
@media(prefers-reduced-motion:reduce){.share-icon:active{transform:none}}