/* へやいろ「おばあちゃんのお小遣い」(2026-10-24。試作 style-tests/obaachan-2026-10-24/proto/ から本番へ)
   クラスはすべて og- 始まり(editor.css とぶつからないように)。
   色の役割: お金 = 緑(状態)#3f8f6a、決める = オレンジ #ff651c。
   動き: style-tests/motion-2026-10-16 が基準。位置と動きは obaachan-gift.js(Web Animations)で付け、ここは見た目だけ。 */

.og {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  font-family: "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", "Hiragino Sans", sans-serif;
  -webkit-tap-highlight-color: transparent;
  --og-top: 0px;
}
.og:focus { outline: none; }
.og [hidden] { display: none !important; }
.og *, .og *::before, .og *::after { box-sizing: border-box; }

/* 暗幕(motion の .scrim と同じ色) */
.og-scrim { position: absolute; inset: 0; background: rgba(31, 26, 23, .45); opacity: 0; }

/* 金額の後ろの光(開いたときだけ) */
.og-rays { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 244, 214, .95), rgba(255, 216, 150, .5) 45%, rgba(255, 200, 120, 0) 100%); }
.og-rays::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 170, .55) 0deg 8deg, rgba(255, 236, 170, 0) 8deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 100%); mask: radial-gradient(closest-side, #000 25%, transparent 100%);
  animation: og-spin 26s linear infinite; }
@keyframes og-spin { to { transform: rotate(360deg); } }

/* おばあちゃん(下から出る。高さ・幅・左の位置は JS が入れる: 縦長は足元中央で、幅の 90%・高さの 64%・680px のうち小さい方。ここは控え) */
.og-fig { position: absolute; left: 50%; bottom: 0; height: min(64vh, 680px, calc(96vw * 1497 / 1024)); aspect-ratio: 1024 / 1497;
  transform: translate(-50%, 110%); pointer-events: none; }
@supports (height: 1dvh) { .og-fig { height: min(64dvh, 680px, calc(96vw * 1497 / 1024)); } }
.og-fig img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(40, 20, 10, .22)); user-select: none; -webkit-user-drag: none; }

/* 吹き出し(チュートリアルの吹き出しと同じ Mochiy Pop One) */
/* 左の位置と幅の上限は JS が画面の幅から入れる(ここは JS が動く前の控え) */
.og-say { position: absolute; left: 50%; top: calc(var(--og-top) + 14px); width: max-content; max-width: min(520px, calc(100% - 32px));
  display: flex; align-items: center; justify-content: center;
  padding: 14px 22px; border-radius: 22px; background: #fff; color: #2a211c;
  box-shadow: 0 8px 24px rgba(31, 26, 23, .22); transform: translateX(-50%); transform-origin: 50% 100%; opacity: 0; pointer-events: none; }
.og-say::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 22px; height: 12px; margin-left: -11px; background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%); }
.og-say-text { margin: 0; font: 400 clamp(16px, 4.4vw, 21px)/1.6 "Mochiy Pop One", "Noto Sans JP", sans-serif; letter-spacing: .02em;
  text-align: center; line-break: strict; overflow-wrap: anywhere; text-wrap: balance; } /* balance: 2 行のとき最後の 1〜2 字だけが次の行に落ちないように（本番 2026-10-24） */
/* スマホの横向き: 吹き出しを少し小さく(右の列の上) */
.og.og-land .og-say { top: calc(var(--og-top) + 8px); padding: 10px 16px; border-radius: 18px; }
.og.og-land .og-say-text { font-size: 16px; line-height: 1.55; }

/* ぽち袋(押す物。大きさと位置は JS。幅は 72px 以上) */
.og-pochi { position: absolute; left: 0; top: 0; width: 100px; height: 139px; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: manipulation;
  perspective: 700px; opacity: 0; pointer-events: none; }
.og.og-ready .og-pochi { pointer-events: auto; }
.og-pochi:focus { outline: none; }
.og-pochi:focus-visible { outline: none; }
/* 輪はキーボードで操作したときだけ(.og-kbd は JS が付ける。マウス・タップ・自動で出したときは無し) */
.og.og-kbd .og-pochi:focus-visible { outline: 3px solid #1f6feb; outline-offset: 10px; border-radius: 10px; }
.og-pochi > span { position: absolute; display: block; pointer-events: none; }
.og-pochi-back { inset: 0; z-index: 1; border-radius: 8px; background: linear-gradient(#9c1b26, #b8232f); }
.og-pochi-paper { left: 10%; right: 10%; top: 5%; bottom: 8%; z-index: 2; border-radius: 4px;
  background:
    linear-gradient(to bottom, transparent 13%, #e9b949 13% 15%, transparent 15%),
    linear-gradient(#fffdf7, #f8efdc);
  box-shadow: 0 0 0 1px rgba(160, 120, 60, .2); }
.og-pochi-body { inset: 0; z-index: 3; border-radius: 8px; overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='%23fff'%3E%3Cg transform='translate(38 38)'%3E%3Cellipse cy='-6' rx='3.8' ry='6'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(72)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(144)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(216)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(288)'/%3E%3C/g%3E%3Cg transform='translate(15 17) scale(.6)'%3E%3Cellipse cy='-6' rx='3.8' ry='6'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(72)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(144)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(216)'/%3E%3Cellipse cy='-6' rx='3.8' ry='6' transform='rotate(288)'/%3E%3C/g%3E%3Cellipse cx='24' cy='46' rx='1.6' ry='2.6' transform='rotate(30 24 46)'/%3E%3Ccircle cx='50' cy='15' r='1.4'/%3E%3C/g%3E%3Cg fill='%23f3b6bd'%3E%3Ccircle cx='38' cy='38' r='1.9'/%3E%3Ccircle cx='15' cy='17' r='1.2'/%3E%3C/g%3E%3C/svg%3E") right 10% bottom 26% / 52% auto no-repeat,
    linear-gradient(to bottom, transparent 77%, rgba(90, 0, 12, .28) 77% 78.5%, rgba(120, 10, 20, .16) 78.5%),
    linear-gradient(165deg, #ea4952, #d5313c 60%, #c92a35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 12px 26px rgba(60, 10, 10, .35); }
/* ふた(V 字。縁を少し濃く) */
.og-pochi-flap { left: 0; right: 0; top: 0; height: 30%; z-index: 4; transform-origin: 50% 0; background: #ad1f2b;
  clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%); }
.og-pochi-flap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#d4313c, #c42a35);
  clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 91%, 0 58%); }

/* 押せる合図: 黄色い輪が静かに広がる + 袋の上を光がすっと流れる(袋そのものは弾ませない) */
.og-pochi::before { content: ""; position: absolute; inset: -12px; border-radius: 18px; border: 3px solid rgba(255, 225, 124, .95); opacity: 0; pointer-events: none; }
.og.og-ready .og-pochi::before { animation: og-ring 1.8s ease-out infinite; }
@keyframes og-ring { 0% { transform: scale(.94); opacity: .9; } 100% { transform: scale(1.14); opacity: 0; } }
.og-pochi-body::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0));
  transform: translateX(0) skewX(-18deg); }
.og.og-ready .og-pochi-body::after { animation: og-glint 2.8s ease-in-out .4s infinite; }
@keyframes og-glint {
  0% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  8% { opacity: 1; }
  40% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}
.og.og-ready .og-pochi:active .og-pochi-body { filter: brightness(.94); }

/* 金額(残高の札と同じ緑の札を大きく。10 万円だけ縁が金色) */
.og-amount { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .18em;
  padding: .3em .6em .3em .3em; border-radius: 999px; background: #fff; color: #2f6f52;
  box-shadow: 0 0 0 4px #bfdccd, 0 14px 34px rgba(31, 26, 23, .3);
  font: 400 clamp(32px, 9vw, 64px)/1 "Dela Gothic One", "Noto Sans JP", sans-serif; font-variant-numeric: tabular-nums;
  white-space: nowrap; max-width: calc(100vw - 24px);
  transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
.og-amount-ic { display: inline-grid; place-items: center; flex: none; width: .9em; height: .9em; border-radius: 50%; }
.og-amount-ic svg { display: block; width: 100%; height: 100%; } /* 金色のコイン(2026-10-27 95。前は緑の丸に「¥」) */
.og-amount-unit { font-size: .5em; margin-left: .06em; align-self: flex-end; padding-bottom: .2em; }
.og.og-top .og-amount { box-shadow: 0 0 0 4px #ffd35c, 0 0 0 7px #fff3c4, 0 14px 34px rgba(31, 26, 23, .3); }

/* 紙吹雪(10 万円だけ) */
.og-confetti { position: absolute; inset: 0; pointer-events: none; }
.og-confetti i { position: absolute; display: block; border-radius: 2px; }

/* 「へやへ」(autoClose: false のときだけ。オレンジ = 進む) */
.og-next { position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  min-width: 180px; min-height: 56px; padding: 0 32px; border: 0; border-radius: 999px; background: #ff651c; color: #fff;
  font: 900 20px/1 "Noto Sans JP", sans-serif; letter-spacing: .06em; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 8px 20px rgba(255, 101, 28, .35); transition: background-color 150ms; }
.og-next:hover { background: #e4530f; }
.og-next:focus { outline: none; }
.og-next:focus-visible { outline: none; }
.og.og-kbd .og-next:focus-visible { outline: 3px solid #1f6feb; outline-offset: 3px; }

/* 動きを減らす設定: 繰り返しの動きを止める(JS 側も動きの時間を 0 にする) */
@media (prefers-reduced-motion: reduce) {
  .og-rays::before, .og.og-ready .og-pochi::before, .og.og-ready .og-pochi-body::after { animation: none; }
  .og.og-ready .og-pochi::before { opacity: .9; transform: none; }
}
/* 台詞は「、」「。」のあとでだけ折り返す（区切りごとの span。長すぎる区切りだけは中で折り返す。2026-10-25） */
.og-say-ph { display: inline-block; max-width: 100%; }