/* 『極める男』の画面（土台は base.css。『今日の一軒』の見た目と演出を流用） */

/* タイトル */
.t-bg img { object-position: 50% 30%; filter: blur(2px) brightness(.8); }
.t-man { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); position: absolute; left: 50%; top: 4%; width: 78%; max-width: 360px; transform: translateX(-50%); filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .7)); animation: tman 1s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes tman { from { opacity: 0; transform: translateX(-50%) scale(1.15); } }
.t-sub { font-family: var(--serif); color: var(--gold); letter-spacing: 0.3em; font-size: 1rem; text-shadow: 0 1px 6px #000; }
.t-name { font-size: 3.2rem; color: #fff6dc; text-shadow: 0 0 2px #000, 4px 4px 0 #8e2219, 0 0 30px rgba(255, 200, 90, .6); }
.t-best { font-size: 0.95rem; color: var(--gold); min-height: 1.2em; }

/* 勝負の画面 */
.tr-head { flex: none; display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--serif); }
.tr-no { color: var(--gold); font-size: 1rem; letter-spacing: 0.1em; }
.tr-name { font-size: 1.6rem; letter-spacing: 0.2em; }
.tr-dots { margin-left: auto; font-size: 0.95rem; color: var(--dim); letter-spacing: 0.15em; }
.tr-dots b { color: var(--gold); }
.tr-scene { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #000; touch-action: none; }
.tr-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
#trSvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tr-how { position: absolute; left: 0.6rem; top: 0.6rem; max-width: 62%; background: rgba(22, 17, 13, .86); border: 1px solid var(--gold); border-radius: 8px; padding: 0.4rem 0.6rem; font-size: 0.95rem; line-height: 1.5; white-space: pre-line; transition: opacity .3s; }
.tr-how.off { opacity: 0; }
.tr-stars { position: absolute; left: 50%; bottom: 0.7rem; transform: translateX(-50%); white-space: nowrap; background: rgba(22, 17, 13, .9); border: 2px solid var(--gold); border-radius: 999px; padding: 0.3rem 0.9rem; font-family: var(--serif); font-size: 1.1rem; display: none; }
.tr-stars.on { display: block; animation: starsin .5s cubic-bezier(.2, 1.6, .4, 1); }
.tr-stars i { font-style: normal; color: #ffd36b; letter-spacing: 0.08em; text-shadow: 0 0 8px rgba(255, 200, 90, .7); }
.tr-stars i.off { color: #5a4a3c; text-shadow: none; }
.tr-stars b { margin-left: 0.4rem; }
.tr-stars small { color: var(--dim); margin-left: 0.3rem; font-size: 0.9rem; }
@keyframes starsin { from { opacity: 0; transform: translateX(-50%) scale(1.6); } }
#trial .mono-box { min-height: 6.6rem; }
.act { flex: none; min-height: 4rem; font-size: 1.25rem; touch-action: none; }
.act.hold { background: linear-gradient(#e0b45a, #a07228); border-color: #ffe08a; color: #2a1e16; }
.act.holding { transform: scale(.97); filter: brightness(1.25); box-shadow: 0 0 24px rgba(255, 210, 120, .8); }
.act:disabled { opacity: .45; }

/* 動作の絵（SVG） */
#trSvg .meter-band { fill: rgba(224, 180, 90, .55); }
#trSvg .meter-core { fill: #ffe08a; }
#trSvg text { font-family: var(--serif); fill: #f1e7d6; font-weight: 700; }
.sv-cap.fly { animation: capfly 1s cubic-bezier(.2, .8, .4, 1) forwards; transform-box: fill-box; transform-origin: center; }
@keyframes capfly { to { transform: translate(60px, -160px) rotate(540deg); opacity: 0; } }
.sv-cap.pop { animation: cappop .5s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes cappop { 40% { transform: translateY(-14px) rotate(30deg); } 100% { transform: translateY(-4px) rotate(40deg); } }
.sv-cap.slip { animation: capslip .45s linear; transform-box: fill-box; transform-origin: center; }
@keyframes capslip { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-3px); } }
.sv-bottle.squash { animation: squash .5s ease; transform-box: fill-box; transform-origin: bottom center; }
@keyframes squash { 30% { transform: scale(1.06, .94); } 60% { transform: scale(.98, 1.03); } }
.spray circle { animation: spray 1.1s ease-out forwards; }
@keyframes spray { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
.puff { animation: puff .9s ease-out forwards; }
@keyframes puff { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px) scale(1.4); } }
.puff, .spray circle { transform-box: fill-box; transform-origin: center; }
.sv-noodle.hang { animation: hang 1.2s ease-in-out; transform-box: fill-box; transform-origin: top center; }
@keyframes hang { 20% { transform: skewX(6deg); } 45% { transform: skewX(-5deg); } 70% { transform: skewX(3deg); } }
.drip { animation: dripdown 1.2s ease-in forwards; }
@keyframes dripdown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(60px); } }

/* 結果 */
#result .r-rank { font-family: var(--serif); font-size: 2.2rem; margin: 0.4rem 0 0; }
.r-rows { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.4rem; }
.r-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.8rem; text-align: left; opacity: 0; animation: rcin .5s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.r-row .n { font-family: var(--serif); font-size: 1.15rem; }
.r-row .n small { display: block; color: var(--dim); font-size: 0.8rem; }
.r-row .s { color: #ffd36b; font-size: 1.1rem; letter-spacing: 0.06em; }
.r-row .s i { font-style: normal; color: #5a4a3c; }
.r-row .v { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.r-row.g4 { border-color: #ffd36b; box-shadow: 0 0 16px rgba(255, 200, 90, .45); background: linear-gradient(90deg, rgba(142, 34, 25, .6), rgba(0, 0, 0, .3)); }
.r-best { color: var(--gold); font-size: 0.95rem; margin-top: 0.3rem; }

/* 失敗の大げさ：あふれる・吹き出す・むせる */
#fx.boom #fxTint { background: radial-gradient(circle, transparent 25%, rgba(200, 60, 40, .5)); animation: fade1 1.3s ease forwards; }
#fx.boom #fxFlash { background: #ffdddd; animation: flash3 .3s ease-out forwards; }

@media (max-height: 700px) {
  .tr-name { font-size: 1.35rem; }
  .act { min-height: 3.4rem; }
  #trial .mono-box { min-height: 5.6rem; }
}
.tr-how { max-width: 62%; } html.fz1 .tr-how { font-size: 0.88rem; } html.fz2 .tr-how { font-size: 0.8rem; }
.r-scroll { scrollbar-width: none; } .r-scroll::-webkit-scrollbar { display: none; }