/*
 * アプリの画面の見本（スマホの枠の中）。2026-10-05、オーナー「もっとアプリのサンプル動作内容画像とかたくさんやりようあるよね？」。
 * 画面は 390 × 844（iPhone の論理サイズ）で、アプリの dp の値をそのまま px で書く。大きさは枠の --s で縮める。
 * 寸法と色はアプリのコードから写した（quest の行番号は各行の横）。並びの縦の位置は、オーナーの端末の画面写真
 * （2026-10-04、Android 411×960dp）を下から測って 844 に置き直した。
 * 写真はサンプル（public/sample/、出典は credits.json とページの下）。オーナーの写真は顔と部屋が写るので使わない。
 */

/* ---- 枠 ---- */
.phone {
  /* アプリの画面なので、右から左の言語のページでも左から右のまま */
  direction: ltr;
  --s: 0.78;
  --bez: 11px;
  position: relative;
  flex: none;
  width: calc(390px * var(--s) + var(--bez) * 2);
  height: calc(844px * var(--s) + var(--bez) * 2);
  border-radius: calc(56px * var(--s) + var(--bez));
  background: #121212;
  box-shadow: inset 0 0 0 2px #303030, 0 28px 60px rgba(80, 56, 0, 0.22);
}
.screen {
  position: absolute;
  left: var(--bez);
  top: var(--bez);
  width: 390px;
  height: 844px;
  transform: scale(var(--s));
  transform-origin: 0 0;
  border-radius: 56px;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: var(--sans), "Noto Sans JP", sans-serif;
  line-height: 1.4;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}
/* 画面の上の島と、時刻・電池 */
.screen::before {
  content: ""; position: absolute; z-index: 60; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px;
  border-radius: 20px; background: #000;
}
.status { position: absolute; z-index: 59; left: 0; right: 0; top: 0; height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 6px 34px 0 48px; font: 600 17px "Archivo", sans-serif; color: #fff; }
.status .bat { width: 27px; height: 13px; border-radius: 4px; border: 1.5px solid currentColor; position: relative; }
.status .bat::after { content: ""; position: absolute; inset: 1.5px 7px 1.5px 1.5px; border-radius: 2px; background: currentColor; }
.screen.on-light .status { color: #2b2328; }

/* ---- カメラの映像（サンプルの写真で代わりに） ---- */
.cam { position: absolute; inset: 0; z-index: 0; }
.cam img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 上と下を少し暗く（アプリの .cam と同じく、白い空の上でも札と字が読めるように） */
.cam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.38), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.5)); }

/* ---- ガラス（app のガラスは BlurView 30 に白 62%、themes.ts:193。カメラの上では暗い所が透けて灰に見える） ---- */
.glass { background: rgba(255, 255, 255, 0.34); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.glass-dark { background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ---- 上の三つ（app-header.tsx: 高さ 44、左右 16、上は max(safeTop,24)+18 = 65） ---- */
.topbar { position: absolute; z-index: 30; left: 16px; right: 16px; top: 65px; height: 44px; display: flex; align-items: center; justify-content: space-between; }
.tb-me, .tb-chat { width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; }
.tb-me img { width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.tb-chat svg { width: 28px; height: 28px; }
.tb-group { height: 44px; border-radius: 22px; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 5px; font-weight: 700; font-size: 15px; color: #2b2328; }
.tb-group img { width: 34px; height: 34px; border-radius: 50%; background: #fff; }

/* ---- 下のタブ（ログ・撮る・お題）。撮るだけ白い丸 ---- */
.tabs { position: absolute; z-index: 30; left: 50%; bottom: 32px; width: 206px; height: 64px; margin-left: -103px; border-radius: 32px; display: flex; align-items: center; justify-content: space-around; padding: 0 8px; }
.tabs i { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tabs i.on { background: #fff; }
.tabs svg { width: 26px; height: 26px; }

/* ---- お題のカード（prompt-card.tsx: 256×356、角丸 22、余白 左右 18・上下 16） ---- */
.deck { position: absolute; z-index: 10; left: 50%; top: 172px; width: 256px; height: 356px; margin-left: -128px; }
/* 後ろの二枚（index.tsx:1853-1854: 奥は row で 7°・上 22、手前は rowAlt で -5°・上 14。250×350） */
.deck .under { position: absolute; left: 3px; width: 250px; height: 350px; border-radius: 22px; }
.deck .under.u1 { top: 22px; background: #fdf2eb; transform: rotate(7deg); }
.deck .under.u2 { top: 14px; background: #f9dbe0; transform: rotate(-5deg); }
.flipper { position: absolute; inset: 0; perspective: 900px; transform: rotate(-1.5deg); }
.flipper .rot { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.75s cubic-bezier(.3,.7,.2,1); }
.flipper.open .rot { transform: rotateY(180deg); }
/* 裏と表は backface-visibility だけに頼らず、めくりの半分（0.37 秒）で入れ替える。角丸で切る親の中では
   Chrome が 3D を平らにすることがあり、裏の「めくる」が鏡文字で透けて見えた（2026-10-05、スマホ幅で） */
.flipper .back { transition: visibility 0s linear 0.37s; }
.flipper .face { visibility: hidden; transition: visibility 0s linear 0.37s; }
.flipper.open .back { visibility: hidden; }
.flipper.open .face { visibility: visible; }
.face, .back {
  position: absolute; inset: 0; border-radius: 22px; padding: 16px 18px; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}
.face { background: #fff; color: #2b2328; transform: rotateY(180deg); }
/* めくる前（index.tsx:3482-3505）: 地は cardInk、「めくる」は明朝 800・44・字間 4、説明は 12px の白 72%、案内は白 50% */
.back { background: #2b2328; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 20px; text-align: center; }
.back .big { font-family: var(--serif), serif; font-weight: 800; font-size: 44px; line-height: 52px; letter-spacing: 4px; }
.back .line { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.72); }
.back .hint { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.5); margin-top: 10px; }
.face .t, .fusen .t { font: 800 13px "Archivo", sans-serif; letter-spacing: 0.5px; }
.face .cf, .fusen .cf { position: absolute; right: 18px; top: 14px; width: 20px; height: 20px; }
/* お題の本文: 助詞の最後で二行に割る。名詞の行は明朝 800（字数で 52/40/30/24、字間 -1、行の高さ 1.1 倍）、
   動詞の行は明朝 700・22・字間 2・行の高さ 28（prompt-card.tsx:100-111, 351-360） */
.q { position: absolute; left: 18px; right: 18px; top: 44px; bottom: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.q .noun { font-family: var(--serif), serif; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
/* 韓国語は語の途中で折らない（ブラウザの既定はハングルを一字ずつ折る。「공중전화 찾 / 기」になった） */
:lang(ko) .q .noun, :lang(ko) .q .verb { word-break: keep-all; }
.q .verb { font-family: var(--serif), serif; font-weight: 700; font-size: 22px; letter-spacing: 2px; line-height: 28px; margin-top: 2px; }
/* 左下のタイマー（519-528: 高さ 30、余白 8/10、間 6、地は cardInk、accent の点 7、字は Archivo 800・13 で面の色） */
.timer { position: absolute; left: 16px; bottom: 14px; height: 30px; padding: 0 10px 0 8px; border-radius: 15px; display: flex; align-items: center; gap: 6px; background: #2b2328; color: #fff; font: 800 13px "Archivo", sans-serif; font-variant-numeric: tabular-nums; }
.timer::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c14c62; }
.count { position: absolute; right: 18px; bottom: 20px; font: 800 12px "Archivo", sans-serif; }
.count small { font-size: 12px; opacity: 0.5; }

/* ---- 付箋（odai-alt.tsx: 紙 #ffec70・字 #26221e、幅は画面 − 24×2、高さ 208、余白 左右 16・上下 12） ---- */
.fusen { position: absolute; z-index: 10; left: 24px; right: 24px; top: 320px; height: 208px; background: #ffec70; color: #26221e; padding: 12px 16px; box-shadow: 0 2px 0 rgba(0,0,0,0.05), 0 14px 26px rgba(0, 0, 0, 0.3); }
/* 下に重なる二枚の紙（アプリは三枚重ねを GPU で描く） */
.fusen::before, .fusen::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; background: #f4df5d; }
.fusen::before { transform: translate(3px, 4px) rotate(0.6deg); }
.fusen::after { transform: translate(-2px, 7px) rotate(-0.8deg); background: #ecd54f; }
.fusen .glue { position: absolute; left: 0; right: 0; top: 0; height: 34px; background: linear-gradient(rgba(0,0,0,0.045), rgba(0,0,0,0)); }
.fusen .t { position: absolute; left: 16px; top: 13px; }
.fusen .pack { position: absolute; left: 64px; top: 12px; font-size: 11px; font-weight: 700; opacity: 0.55; }
.fusen .cf { right: 16px; top: 11px; }
.fusen .q { top: 38px; bottom: 50px; left: 16px; right: 16px; }
.fusen .timer { left: 16px; bottom: 12px; background: #26221e; color: #ffec70; }
.fusen .count { right: 16px; bottom: 19px; }

/* ---- 撮影の札・人数・シャッター（index.tsx:4671-4702, shutter.tsx） ---- */
.status-pill { position: absolute; z-index: 20; left: 50%; top: 540px; transform: translateX(-50%); max-width: 340px; min-height: 40px; padding: 8px 14px 8px 12px; border-radius: 20px; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 700; color: #2b2328; }
.shot-count { position: absolute; z-index: 20; left: 0; right: 0; top: 586px; text-align: center; font-size: 12px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
/* 直径 84・白い輪 5・中の円 62。決定は黒いチェック 26、線幅 2.6 */
.shutter { position: absolute; z-index: 20; left: 50%; top: 606px; width: 84px; height: 84px; margin-left: -42px; border-radius: 50%; border: 5px solid #fff; display: flex; align-items: center; justify-content: center; }
.shutter i { width: 62px; height: 62px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; transition: transform 0.12s; }
.shutter svg { width: 26px; height: 26px; }
.shutter.press i { transform: scale(0.84); }
.cam-switch { position: absolute; z-index: 20; right: 44px; top: 624px; width: 48px; height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; }
.cam-switch svg { width: 26px; height: 26px; }
/* 写真／動画／両撮り（4479-4494: ガラスのピル高さ 36、各 28・余白 16・13px、選択中は accent のピル） */
.modes { position: absolute; z-index: 20; left: 50%; top: 700px; transform: translateX(-50%); height: 36px; padding: 0 4px; border-radius: 18px; display: flex; align-items: center; font-size: 13px; }
.modes span { height: 28px; padding: 0 16px; border-radius: 14px; display: flex; align-items: center; font-weight: 500; color: rgba(255,255,255,0.75); }
.modes span.on { background: #c14c62; color: #fff; font-weight: 700; }
.flash { position: absolute; inset: 0; z-index: 55; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash 0.45s ease-out; }
@keyframes flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }

/* ---- ログ（log.tsx: カードは幅 − 32・高さは幅 × 0.84・角丸 24、回転なし。次のカードが 40 重なる） ---- */
.log { position: absolute; inset: 0; z-index: 40; background: linear-gradient(170deg, #fbe3d2, #f7cfd6 50%, #efc2dc); }
.log .topbar .tb-me, .log .topbar .tb-chat, .log .topbar .tb-group { background: rgba(255,255,255,0.62); }
.log .stack { position: absolute; left: 16px; right: 16px; top: 124px; bottom: 0; }
.log .lc { position: absolute; left: 0; right: 0; height: 301px; border-radius: 24px; overflow: hidden; background: #fdf2eb; box-shadow: 0 -2px 10px rgba(0,0,0,0.12); transition: transform 0.6s cubic-bezier(.2,.8,.2,1), opacity 0.4s; }
.log .lc img.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.log .lc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.55)); }
.log .lc .row { position: absolute; z-index: 2; left: 14px; right: 14px; top: 12px; height: 30px; display: flex; align-items: center; gap: 8px; }
.log .lc .row img { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #fff; }
.log .lc .row .nm { font-size: 14px; font-weight: 700; }
.log .lc .row .tm { margin-left: auto; font: 600 15px "Archivo", sans-serif; }
.rank { height: 26px; padding: 0 10px; border-radius: 13px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 900; background: rgba(0,0,0,0.45); color: #fff; }
.rank.first { background: #c14c62; }
.log .lc .mid { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; }
.log .lc .mid b { display: block; font: 600 52px "Archivo", sans-serif; letter-spacing: -1.5px; line-height: 1; }
.log .lc .mid span { font-size: 14px; font-weight: 700; }
.log .lc .reacts { position: absolute; z-index: 2; left: 14px; bottom: 12px; display: flex; }
.log .lc .reacts img { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid #fff; }
.log .lc .reacts img + img { margin-left: -10px; }
.log .lc .emo { position: absolute; z-index: 2; right: 14px; bottom: 14px; display: flex; gap: 6px; }
.log .lc .emo span { height: 30px; padding: 0 10px; border-radius: 15px; background: rgba(255,255,255,0.9); color: #2b2328; display: flex; align-items: center; font-size: 12px; font-weight: 700; }

/* ---- まとめ（mix.ts / reel-art.ts。1080×1920 を 1dp = 2.63px で縮めて置く） ---- */
.recap { position: absolute; inset: 0; z-index: 45; background: #000; }
.recap .head { position: absolute; top: 62px; left: 14px; right: 14px; height: 46px; display: flex; align-items: center; gap: 10px; }
.recap .head .ic { width: 46px; height: 46px; border-radius: 23px; display: flex; align-items: center; justify-content: center; background: #2a2a2c; }
.recap .head .ic svg { width: 22px; height: 22px; }
.recap .head .save { margin-left: auto; height: 46px; padding: 0 20px; border-radius: 23px; background: #fff; color: #111; font-weight: 800; font-size: 14px; display: flex; align-items: center; }
.canvas { position: absolute; left: 50%; top: 124px; background: #fdeff2; overflow: hidden; transition: width 0.6s cubic-bezier(.2,.8,.2,1), height 0.6s cubic-bezier(.2,.8,.2,1), margin 0.6s cubic-bezier(.2,.8,.2,1); }
.canvas .ttl { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; background: #fff; color: #2e2226; border-radius: 999px; }
.canvas .ttl i { border-radius: 50%; background: #a48a92; display: block; }
.canvas .ttl b { font-weight: 900; }
.canvas .ttl em { font-style: normal; font-family: var(--serif), serif; font-weight: 700; }
.canvas .date { position: absolute; left: 0; right: 0; text-align: center; font-family: "Archivo", var(--sans), sans-serif; font-weight: 600; color: #7a5f68; }
.canvas .tile { position: absolute; overflow: hidden; background: #fff7f9; transition: left 0.7s cubic-bezier(.2,.8,.2,1), top 0.7s cubic-bezier(.2,.8,.2,1), width 0.7s cubic-bezier(.2,.8,.2,1), height 0.7s cubic-bezier(.2,.8,.2,1), opacity 0.5s; }
.canvas .tile img.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.canvas .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5)); }
.canvas .tile .who, .canvas .tile .cap, .canvas .tile .rank { position: absolute; z-index: 2; }
.canvas .tile .who { display: flex; align-items: center; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.canvas .tile .who img { border-radius: 50%; background: #fff; border-style: solid; border-color: #fff; }
.canvas .tile .cap { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); line-height: 1.25; }
.canvas .tile .cap span { display: block; font-weight: 500; }
.canvas .tile .cap b { display: block; font-family: "Archivo", sans-serif; font-weight: 600; }
.canvas .tile .rank { height: auto; padding: 0; justify-content: center; }
.canvas .tile .rank.first { background: #C33B54; }
.recap .tools { position: absolute; left: 8px; right: 8px; bottom: 26px; border-radius: 30px; background: #1c1c1e; padding: 14px 6px 12px; }
.recap .ratios { display: flex; justify-content: space-around; }
.recap .ratios span { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 700 11px "Archivo", sans-serif; color: #9a9a9e; }
.recap .ratios i { width: 56px; height: 56px; border-radius: 14px; border: 1.5px solid #3a3a3c; display: flex; align-items: center; justify-content: center; }
.recap .ratios i::after { content: ""; border: 2px solid #e5e5ea; border-radius: 3px; width: var(--w); height: var(--h); }
.recap .ratios span.on { color: #fff; }
.recap .ratios span.on i { border: 2px solid #fff; }
.recap .acts { display: flex; justify-content: space-around; margin-top: 12px; }
.recap .acts span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #e5e5ea; }
.recap .acts b { font-weight: inherit; }
.recap .acts i { width: 48px; height: 48px; border-radius: 50%; background: #2c2c2e; color: #fff; display: flex; align-items: center; justify-content: center; }
.recap .acts span.on i { background: #fff; color: #111; }
.recap .acts svg { width: 22px; height: 22px; }

/* ---- 状態の切り替え（デモ） ---- */
.demo-phone .layer { transition: opacity 0.45s, transform 0.6s cubic-bezier(.2,.8,.2,1); }
.demo-phone .off { opacity: 0; pointer-events: none; }
.deck .rot.swipe { animation: swipe 0.8s ease-in-out; }
@keyframes swipe {
  0% { transform: rotateY(180deg); }
  40% { transform: rotateY(180deg) translateX(440px) rotate(-16deg); }
  41% { transform: rotateY(180deg) translateX(-440px) rotate(16deg); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: rotateY(180deg); }
}
.fusen.in { animation: stick 0.5s cubic-bezier(.2,.8,.2,1); }
@keyframes stick { 0% { transform: translateY(60px) rotate(-3deg) scale(1.05); opacity: 0; } 100% { transform: none; opacity: 1; } }
.tap { position: absolute; z-index: 58; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,0.45); border: 2px solid rgba(255,255,255,0.95); opacity: 0; pointer-events: none; }
.tap.go { animation: tap 0.75s ease-out; }
@keyframes tap { 0% { opacity: 0; transform: scale(1.5); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.85); } }
.log .lc.enter { transform: translateY(380px); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .demo-phone .layer, .flipper .rot, .canvas, .canvas .tile, .log .lc { transition: none; }
  .deck .rot.swipe, .fusen.in, .tap.go, .flash.go { animation: none; }
}