*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#020407;color:#f3f6f8}body{font-family:"Noto Sans JP","Yu Gothic",sans-serif;min-height:100dvh;display:grid;place-items:center;overflow:hidden}.bg,.record-bg,.veil{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}.bg{object-fit:cover;opacity:.42;filter:saturate(.7) contrast(1.12);transition:opacity .7s ease}.record-bg{z-index:0;background-position:center;background-size:cover;opacity:0;transform:scale(1.015);transition:opacity .75s ease,transform 1.1s ease}.veil{z-index:1;background:radial-gradient(circle at 50% 35%,rgba(120,180,210,.10),transparent 42%),linear-gradient(rgba(0,4,8,.34),rgba(0,0,0,.72));backdrop-filter:blur(1px);transition:background .7s ease}.record-bg{background-image:var(--record-background,none)}body.has-record-background .record-bg{opacity:1;transform:scale(1)}body.has-record-background .bg{opacity:0}body.has-record-background .veil{background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.50)),radial-gradient(circle at 50% 45%,transparent 0 28%,rgba(0,0,0,.30) 78%)}.back{position:fixed;z-index:4;left:max(18px,env(safe-area-inset-left));top:max(18px,env(safe-area-inset-top));color:#f4f1e9;text-decoration:none;font:600 11px/1 monospace;letter-spacing:.12em;padding:12px 14px;border:1px solid rgba(245,241,228,.36);background:rgba(3,4,5,.72);box-shadow:0 5px 24px rgba(0,0,0,.35);backdrop-filter:blur(10px)}.query-shell{position:relative;z-index:3;width:min(700px,calc(100vw - 30px));max-height:calc(100dvh - 110px);overflow:auto;padding:clamp(24px,5vw,48px);border:1px solid rgba(242,238,225,.70);outline:1px solid rgba(242,238,225,.18);outline-offset:7px;background:rgba(4,5,6,.80);box-shadow:0 22px 80px rgba(0,0,0,.58),inset 0 0 70px rgba(255,245,220,.025);backdrop-filter:blur(12px) saturate(.75)}header p{margin:0 0 13px;font:500 10px/1.4 monospace;letter-spacing:.2em;color:#c4bbb0}h1{margin:0;font-family:serif;font-size:clamp(28px,7vw,48px);font-weight:400;letter-spacing:.13em;color:#fffdf7;text-shadow:0 2px 18px rgba(0,0,0,.7)}header small{display:block;margin-top:14px;color:#d0cbc2;font-size:12px;line-height:1.8}form{margin-top:32px;padding:20px;border:1px solid rgba(245,239,221,.28);background:rgba(0,0,0,.30);box-shadow:inset 0 0 30px rgba(0,0,0,.2)}label{font:700 10px/1 monospace;letter-spacing:.2em;color:#eee5d5}.input-help{margin:10px 0 0;color:#c7c0b5;font-size:12px;line-height:1.7}.input-row{display:flex;align-items:center;margin-top:13px;border:1px solid rgba(248,241,222,.62);padding:4px 13px;gap:10px;background:rgba(0,0,0,.50);box-shadow:inset 0 0 18px rgba(0,0,0,.3),0 0 0 3px rgba(255,255,255,.025)}.input-row:focus-within{border-color:rgba(255,247,218,.95);box-shadow:0 0 0 3px rgba(255,241,196,.09),inset 0 0 18px rgba(0,0,0,.3)}.input-row span{font-family:monospace;color:#eadfca;font-size:17px}.input-row input{width:100%;min-height:48px;border:0;outline:0;background:transparent;color:#fffdf7;font-size:16px;letter-spacing:.06em}.input-row input::placeholder{color:#918b82}button{cursor:pointer;color:#fffaf0;background:rgba(240,225,195,.08);border:1px solid rgba(242,231,207,.48);font:600 11px/1 monospace;letter-spacing:.16em;padding:13px 18px}form button{margin-top:16px;width:100%;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}form button span{font-family:"Noto Sans JP","Yu Gothic",sans-serif;font-size:14px;letter-spacing:.16em}form button small{font:600 9px/1 monospace;letter-spacing:.18em;color:#bdb4a7}button:hover{background:rgba(240,225,195,.15)}button:disabled{opacity:.45;cursor:wait}.status{margin:18px 0 0;text-align:center;font:500 9px/1.4 monospace;letter-spacing:.18em;color:#a69f95}.status.is-error{color:#e3b7b7}.is-hidden{display:none!important}.result{margin-top:30px}.result-head{display:flex;align-items:center;gap:12px;font:700 9px/1 monospace;letter-spacing:.15em;color:#d8cfbf}.result-head i{height:1px;flex:1;background:rgba(242,233,214,.32)}.result pre{height:min(40dvh,330px);overflow:auto;white-space:pre-wrap;margin:16px 0 18px;padding:clamp(18px,4vw,28px);border:1px solid rgba(250,242,220,.55);outline:1px solid rgba(250,242,220,.10);outline-offset:4px;background:rgba(2,2,3,.78);box-shadow:0 16px 45px rgba(0,0,0,.45),inset 0 0 35px rgba(255,245,220,.025);color:#fffdf8;text-shadow:0 1px 2px #000;font:500 14px/2 "Noto Sans JP","Yu Gothic",sans-serif;scrollbar-width:thin;scrollbar-color:#8e8578 transparent}.result button{width:100%}@media(max-width:520px){body{align-items:center}.back{top:max(12px,env(safe-area-inset-top));left:12px;padding:10px}.back span{display:none}.query-shell{width:calc(100vw - 22px);max-height:calc(100dvh - 82px);padding:23px 17px;outline-offset:4px}header small{font-size:11px}form{margin-top:24px;padding:16px 13px}.input-row input{font-size:16px}.result pre{height:40dvh;font-size:14px;line-height:1.9;padding:18px 16px}}

/* ===== MOBILE：結果背景を見せる ===== */
@media (max-width: 520px) {

  /* キャラ背景が出たとき、外側パネルを透明寄りに */
  body.has-record-background .query-shell {
    background: rgba(3, 4, 5, .42);
    backdrop-filter: blur(3px);
  }

  /* 本文は読みやすさを維持 */
  body.has-record-background .result pre {
    background: rgba(2, 2, 3, .78);
    backdrop-filter: blur(8px);
  }

  /* 背景写真をスマホ向けに少し見やすく */
  body.has-record-background .record-bg {
    opacity: 1;
    background-position: center center;
    background-size: cover;
  }

  /* 写真の上にかかる暗幕を少し弱く */
  body.has-record-background .veil {
    background:
      linear-gradient(
        rgba(0, 0, 0, .08),
        rgba(0, 0, 0, .30)
      );
  }
}