/* ワンニャンマッチ — warm neutrals, one restrained accent (terracotta), quiet "スッ" motion */ :root{ --bg:#FAF6F0; --panel:#FFFFFF; --panel2:#F3EDE3; --line:#E5DCCF; --ink:#33291F; --sub:#8A7D6E; --accent:#B96A44; --accent-soft:#F0DCD0; --t0:#EFCDB4; --t1:#CBD8C2; --t2:#EFE0B8; --t3:#C3D2D8; --t4:#DCC3CE; --glyph:#5A4232; } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Noto Sans JP",system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.6} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} a{color:var(--accent)} #app{max-width:480px;margin:0 auto;min-height:100dvh;position:relative;padding:0 18px} .screen{display:none;padding:20px 0 40px;animation:fadeSlide .45s cubic-bezier(.22,.8,.3,1)} .screen.active{display:block} @keyframes fadeSlide{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.screen{animation:none}.tile{transition:none!important}} .kicker{font-size:11px;letter-spacing:.28em;color:var(--accent);font-weight:700} .title-wrap{text-align:center;padding-top:6dvh} .title-logo{font-size:44px;line-height:1.25;margin:14px 0 8px;font-weight:800;letter-spacing:.02em} .title-catch{color:var(--sub);font-size:14px;margin:0 0 22px} .title-art{display:flex;justify-content:center;gap:8px;margin-bottom:16px} .mini-tile{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center} .mini-tile svg{width:28px;height:28px} .mini-tile.t0,.tile.t0{background:var(--t0)}.mini-tile.t1,.tile.t1{background:var(--t1)} .mini-tile.t2,.tile.t2{background:var(--t2)}.mini-tile.t3,.tile.t3{background:var(--t3)} .mini-tile.t4,.tile.t4{background:var(--t4)} .btn-primary{display:block;width:100%;background:var(--ink);color:#FFF8F0;border-radius:14px;padding:14px;font-weight:700;font-size:16px;transition:opacity .25s,transform .25s} .btn-primary:active{transform:scale(.985);opacity:.92} .btn-primary.big{padding:16px;font-size:17px} .btn-quiet{display:block;width:100%;padding:12px;color:var(--sub);font-size:14px;text-decoration:underline;text-underline-offset:3px} .btn-disabled{background:var(--panel2);color:var(--sub);border-radius:10px;padding:8px 16px;font-size:13px} .title-note{color:var(--sub);font-size:12.5px;margin:14px 0 4px} .title-guide{font-size:13px;margin:10px 0} .title-guide a{text-decoration:none} .title-foot,.home-foot{color:var(--sub);font-size:12px;text-align:center;margin-top:26px} .panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px 20px;margin-top:6dvh} .panel-title{font-size:22px;margin:6px 0 16px} .seg{display:flex;background:var(--panel2);border-radius:10px;padding:3px;margin-bottom:18px} .seg-btn{flex:1;padding:8px;border-radius:8px;font-size:14px;color:var(--sub);transition:background .3s,color .3s} .seg-btn.on{background:var(--panel);color:var(--ink);font-weight:700;box-shadow:0 1px 4px rgba(60,40,20,.08)} .fld{display:block;margin-bottom:14px} .fld span{display:block;font-size:12px;color:var(--sub);margin-bottom:5px} .fld input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--bg)} .err{color:#A33B2E;font-size:13px;margin:6px 0 12px} .chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sub);margin:2px 0 12px} .chk input{width:16px;height:16px} .chk span{display:inline} .sep-line{border:none;border-top:1px solid var(--line);margin:20px 0} .link-like{color:var(--sub);font-size:13px;text-decoration:underline;text-underline-offset:3px;padding:6px 4px} .note{color:var(--sub);font-size:12.5px} .note.center{text-align:center} .topbar{display:flex;justify-content:space-between;align-items:center;padding:4px 0 14px} .tb-name{font-weight:700} .tb-quiet{color:var(--sub);font-size:13px} .stats{display:flex;gap:10px;margin-bottom:14px} .stat{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center} .s-label{display:block;font-size:11px;color:var(--sub)} .s-num{display:block;font-size:22px;font-weight:800;margin-top:2px} .home-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:14px} .home-card h2{margin:0 0 6px;font-size:19px} .home-card p{color:var(--sub);font-size:13.5px;margin:0 0 16px} .menu-list{display:flex;flex-direction:column;gap:10px} .menu-row{display:flex;justify-content:space-between;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 16px;font-weight:600;text-align:left} .menu-row small{color:var(--sub);font-weight:400;font-size:12px} .subbar{display:flex;align-items:center;gap:12px;padding:4px 0 16px} .subbar h2{font-size:18px;margin:0} .back{width:36px;height:36px;border-radius:50%;background:var(--panel);border:1px solid var(--line);font-size:16px;line-height:1;flex:none} .doc{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px} .doc h3{margin:16px 0 6px;font-size:15px}.doc h3:first-child{margin-top:0} .doc ol,.doc ul{margin:6px 0;padding-left:1.3em}.doc li{margin:4px 0;font-size:14px} .shop-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0 14px;border-bottom:1px solid var(--line);margin-bottom:14px} .shop-item small{display:block;color:var(--sub);font-size:12px;font-weight:400} .rank-list{display:flex;flex-direction:column;gap:8px} .rank-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 14px} .rank-row .rk{width:28px;font-weight:800;color:var(--accent);text-align:center} .rank-row .rn{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rank-row .rs{font-weight:800} .rank-row small{color:var(--sub)} .rank-me{margin-top:14px;background:var(--accent-soft);border-radius:12px;padding:12px 14px;font-size:14px;text-align:center} .rank-empty{color:var(--sub);text-align:center;padding:28px 0;font-size:14px} .play-head{display:flex;align-items:center;gap:10px;padding:4px 0 10px} .play-head>div{flex:1;text-align:center} .ph-label{display:block;font-size:10.5px;color:var(--sub)} .play-head b{font-size:19px} .progress{height:5px;background:var(--panel2);border-radius:99px;overflow:hidden;margin-bottom:8px} #p-progress{height:100%;width:0%;background:var(--accent);border-radius:99px;transition:width .4s cubic-bezier(.22,.8,.3,1)} .combo-row{height:26px;text-align:center} .combo{display:inline-block;background:var(--ink);color:#FFF3E4;font-size:12.5px;font-weight:700;border-radius:99px;padding:3px 12px;animation:fadeSlide .3s} .board{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:8px;position:relative;touch-action:manipulation;user-select:none} .tile{aspect-ratio:1;border-radius:22%;display:flex;align-items:center;justify-content:center;transition:opacity .28s cubic-bezier(.22,.8,.3,1),transform .28s cubic-bezier(.22,.8,.3,1);padding:0} .tile svg{width:72%;height:72%;pointer-events:none} .tile.clearing{opacity:0;transform:scale(.82)} .tile.single{animation:nudge .25s} @keyframes nudge{0%{transform:translateX(0)}35%{transform:translateX(2px)}70%{transform:translateX(-2px)}100%{transform:none}} .play-hint{text-align:center;color:var(--sub);font-size:12.5px;margin-top:12px} .float-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden} .float-score{position:absolute;font-weight:800;color:var(--accent);font-size:17px;animation:floatUp 0.9s cubic-bezier(.22,.8,.3,1) forwards;text-shadow:0 1px 0 var(--bg)} @keyframes floatUp{from{opacity:0;transform:translateY(4px)}18%{opacity:1}to{opacity:0;transform:translateY(-34px)}} .result-panel{text-align:center} .result-title{font-size:28px;margin:8px 0 2px} /* 結果画面の収納（2026-11-02 バグ総点検）: 812でも #app を約44px 溢れていた。 余白と寸法のみ詰める（構造・文言は不変） */ #scr-result .result-panel{margin-top:3dvh;padding:20px} #scr-result .result-faces .rface{width:46px;height:46px} #scr-result .result-faces .rface svg{width:32px;height:32px} #scr-result .result-score{font-size:46px} #scr-result .result-rows>div{padding:8px 2px} .result-sub{color:var(--sub);margin:2px 0 16px;font-size:14px} .result-rows{margin:0 0 20px;border-top:1px solid var(--line)} .result-rows>div{display:flex;justify-content:space-between;padding:10px 2px;border-bottom:1px solid var(--line)} .result-rows dt{color:var(--sub);font-size:13px}.result-rows dd{margin:0;font-weight:700} .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:#FFF8F0;padding:10px 18px;border-radius:99px;font-size:13.5px;z-index:50;animation:fadeSlide .3s;white-space:nowrap} /* ===== Webアプリ化 2026-10-28（body.game-app スコープ＝本編のみ。ガイド/規約は app.css を読まない） ===== */ html { overscroll-behavior: none; } body.game-app { position: fixed; inset: 0; width: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; } body.game-app #app { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding-top: env(safe-area-inset-top, 0px); } body.game-app .modal-card, body.game-app .sheet { overscroll-behavior: contain; touch-action: pan-y; } body.game-app .board { touch-action: none; } /* ===== 品質改修 2026-10-28：音ボタン／質感／手応え／感情の山 ===== */ body{ background: radial-gradient(circle at 18% 12%, rgba(185,106,68,.055) 0 34px, transparent 35px), radial-gradient(circle at 84% 30%, rgba(110,133,102,.05) 0 26px, transparent 27px), radial-gradient(circle at 72% 88%, rgba(185,106,68,.045) 0 40px, transparent 41px), radial-gradient(rgba(90,66,50,.045) 1px, transparent 1.2px), var(--bg); background-size:auto,auto,auto,22px 22px,auto; } .sound-btn{ display:inline-block;background:var(--panel);border:1px solid var(--line);color:var(--sub); border-radius:99px;padding:6px 14px;font-size:12.5px;font-weight:700;letter-spacing:.04em; transition:transform .25s cubic-bezier(.22,.8,.3,1),color .25s,border-color .25s; } .sound-btn:active{transform:scale(.94)} .sound-btn.on{color:var(--accent);border-color:var(--accent-soft);background:#FFFDF9} .title-sound{margin:6px 0 0} .play-sound{flex:none;padding:5px 10px;font-size:11.5px} .mini-tile,.tile{ box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -3px 0 rgba(90,60,30,.10), 0 1px 2px rgba(90,60,30,.10); border:1px solid rgba(255,255,255,.55); } .mini-tile.t0,.tile.t0{background:linear-gradient(160deg,#F6DCC2,var(--t0) 62%,#E4B98F)} .mini-tile.t1,.tile.t1{background:linear-gradient(160deg,#DCE8D2,var(--t1) 62%,#AFC6A0)} .mini-tile.t2,.tile.t2{background:linear-gradient(160deg,#F7EBC6,var(--t2) 62%,#E2CB8D)} .mini-tile.t3,.tile.t3{background:linear-gradient(160deg,#D5E3E8,var(--t3) 62%,#9FBBC6)} .mini-tile.t4,.tile.t4{background:linear-gradient(160deg,#EBD3DE,var(--t4) 62%,#C79FB2)} .board{ background: radial-gradient(rgba(90,66,50,.05) 1px, transparent 1.3px), linear-gradient(165deg,#FFFDF8,#F7F0E4); background-size:18px 18px,auto; box-shadow:inset 0 1px 0 #fff, inset 0 -2px 6px rgba(90,60,30,.06), 0 2px 10px rgba(90,60,30,.06); transition:box-shadow .5s; } .board.urgent{box-shadow:inset 0 0 0 2px rgba(163,59,46,.28), inset 0 -2px 6px rgba(90,60,30,.06), 0 2px 10px rgba(163,59,46,.10)} .tile{position:relative;transition:transform .18s cubic-bezier(.22,.8,.3,1),opacity .3s} .tile:active,.tile.pressing{transform:scale(.9)} .tile.fall-in{animation:fallIn .38s cubic-bezier(.22,.8,.3,1) both;animation-delay:var(--fd,0ms)} @keyframes fallIn{from{transform:translateY(-13px) scale(.96);opacity:.35}60%{transform:translateY(1.5px) scale(1.005)}to{transform:none;opacity:1}} .tile.clearing{animation:clearPop .36s cubic-bezier(.22,.8,.3,1) forwards} @keyframes clearPop{0%{transform:scale(1);opacity:1}32%{transform:scale(1.17);opacity:1}100%{transform:scale(.5);opacity:0}} .combo-row{height:38px} .combo{transition:transform .3s cubic-bezier(.22,.8,.3,1);transform-origin:center} .combo.pop{animation:comboPulse .38s cubic-bezier(.22,.8,.3,1)} @keyframes comboPulse{0%{transform:scale(var(--cs,1))}40%{transform:scale(calc(var(--cs,1)*1.14))}100%{transform:scale(var(--cs,1))}} .combo-bar{width:110px;height:3.5px;background:var(--panel2);border-radius:99px;margin:5px auto 0;overflow:hidden} #p-combo-bar{height:100%;width:100%;background:var(--accent);border-radius:99px} .reaction{ height:28px;text-align:center;font-size:13.5px;font-weight:700;color:var(--accent); letter-spacing:.03em;margin:2px 0 4px; } .reaction.show{animation:reactionIn 1.5s cubic-bezier(.22,.8,.3,1) forwards} @keyframes reactionIn{0%{opacity:0;transform:translateY(5px) scale(.96)}14%{opacity:1;transform:none}78%{opacity:1}100%{opacity:0;transform:translateY(-3px)}} .play-head.urgent #p-time{color:#A33B2E;animation:timePulse 1s ease-in-out infinite;display:inline-block} @keyframes timePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}} .ph-score b.bump{animation:scoreBump .3s cubic-bezier(.22,.8,.3,1);display:inline-block} @keyframes scoreBump{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}} #p-progress.reached{background:#7E9377} .result-faces{display:flex;justify-content:center;gap:10px;margin:10px 0 2px} .result-faces .rface{width:52px;height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 0 rgba(90,60,30,.10);border:1px solid rgba(255,255,255,.55)} .result-faces .rface.t0{background:linear-gradient(160deg,#F6DCC2,var(--t0) 62%,#E4B98F)} .result-faces .rface.t1{background:linear-gradient(160deg,#DCE8D2,var(--t1) 62%,#AFC6A0)} .result-faces .rface svg{width:36px;height:36px} .result-faces.cheer .rface{animation:faceCheer 1.6s cubic-bezier(.22,.8,.3,1) infinite} .result-faces.cheer .rface:last-child{animation-delay:.22s} @keyframes faceCheer{0%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}55%{transform:translateY(0)}} .result-rank{ display:inline-block;margin:8px 0 2px;background:var(--accent-soft);color:var(--accent); font-weight:800;font-size:14.5px;letter-spacing:.05em;border-radius:99px;padding:5px 18px; animation:fadeSlide .6s cubic-bezier(.22,.8,.3,1) .15s both; } .result-reaction{color:var(--ink);font-size:14px;margin:8px 0 0;font-weight:600} @media (prefers-reduced-motion:reduce){ .tile.fall-in,.tile.clearing,.combo.pop,.reaction.show,.result-faces.cheer .rface,.play-head.urgent #p-time,.ph-score b.bump{animation:none!important} } /* ===== リアル化改修 2026-10-29：素材感・光と影・奥行き・手応え（描画のみ） ===== */ body{ background: linear-gradient(155deg, rgba(255,252,244,.9) 0%, rgba(255,252,244,0) 42%), radial-gradient(120% 60% at 50% -8%, rgba(255,244,220,.55), transparent 60%), radial-gradient(circle at 18% 12%, rgba(185,106,68,.055) 0 34px, transparent 35px), radial-gradient(circle at 84% 30%, rgba(110,133,102,.05) 0 26px, transparent 27px), radial-gradient(circle at 72% 88%, rgba(185,106,68,.045) 0 40px, transparent 41px), radial-gradient(rgba(90,66,50,.045) 1px, transparent 1.2px), linear-gradient(180deg,#FBF7F1,#F6EFE3); background-size:auto,auto,auto,auto,auto,22px 22px,auto; } .panel,.home-card,.stat,.menu-row,.doc,.rank-row{ background:linear-gradient(180deg,#FFFFFF 0%,#FDF9F1 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 5px rgba(90,60,30,.045), 0 10px 22px -14px rgba(90,60,30,.28), 0 2px 5px rgba(90,60,30,.06); } .btn-primary{ background:linear-gradient(180deg,#453729,var(--ink) 45%,#2A211A); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.22), 0 8px 16px -8px rgba(50,35,20,.5); } .title-wrap{position:relative} .title-wrap::before{ content:"";position:absolute;left:50%;top:2dvh;transform:translateX(-50%); width:300px;height:210px;border-radius:50%;pointer-events:none; background:radial-gradient(ellipse, rgba(255,238,205,.65), rgba(255,238,205,0) 68%); } .title-logo{position:relative;text-shadow:0 2px 0 rgba(255,255,255,.7), 0 10px 22px rgba(185,106,68,.14)} .title-art .mini-tile{ box-shadow:inset 0 2px 0 rgba(255,255,255,.8), inset 0 -5px 0 rgba(90,60,30,.13), inset 2px 0 0 rgba(255,255,255,.3), 0 5px 8px rgba(90,60,30,.16), 0 1px 2px rgba(90,60,30,.12); } .board{ background: radial-gradient(130% 85% at 50% -10%, rgba(255,255,255,.6), transparent 55%), radial-gradient(rgba(90,66,50,.05) 1px, transparent 1.3px), linear-gradient(168deg,#FFFEF9 0%,#F8F1E2 58%,#EDDFC6 100%); background-size:auto,18px 18px,auto; border-color:#D9C9AC; box-shadow: inset 0 1px 0 #fff, inset 0 -12px 20px rgba(90,60,30,.08), inset 0 10px 16px rgba(90,60,30,.045), 0 14px 28px -14px rgba(90,60,30,.35), 0 3px 7px rgba(90,60,30,.09); } .board::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2; background:linear-gradient(180deg, rgba(255,255,255,.20), transparent 16%, transparent 84%, rgba(90,60,30,.06)); } .board::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2; box-shadow:inset 0 0 22px rgba(90,60,30,.07); } .tile{ box-shadow: inset 0 2px 0 rgba(255,255,255,.78), inset 0 -5px 0 rgba(90,60,30,.15), inset 2px 0 0 rgba(255,255,255,.28), inset -2px 0 0 rgba(90,60,30,.07), 0 3px 5px rgba(90,60,30,.17), 0 1px 1px rgba(90,60,30,.12); border-color:rgba(122,92,55,.20); } .tile svg{position:relative;z-index:1;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35)) saturate(1.04)} .mini-tile.t0,.tile.t0{background:linear-gradient(165deg,#F8E3C9,var(--t0) 58%,#DEAC7E)} .mini-tile.t1,.tile.t1{background:linear-gradient(165deg,#E2EDD8,var(--t1) 58%,#A2BE94)} .mini-tile.t2,.tile.t2{background:linear-gradient(165deg,#F9EECB,var(--t2) 58%,#DCC27F)} .mini-tile.t3,.tile.t3{background:linear-gradient(165deg,#DCE9ED,var(--t3) 58%,#92B2C0)} .mini-tile.t4,.tile.t4{background:linear-gradient(165deg,#F0DAE3,var(--t4) 58%,#BE93A7)} .tile.glow{filter:brightness(1.055);box-shadow:inset 0 2px 0 rgba(255,255,255,.85), inset 0 -5px 0 rgba(90,60,30,.13), 0 0 0 2px rgba(255,255,255,.55), 0 4px 8px rgba(90,60,30,.18)} .tile:active,.tile.pressing{ transform:scale(.92); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(90,60,30,.16), inset 0 3px 6px rgba(90,60,30,.10), 0 1px 2px rgba(90,60,30,.14); } .tile.fall-in{animation:fallInR .42s cubic-bezier(.22,.8,.3,1) both;animation-delay:var(--fd,0ms)} @keyframes fallInR{from{transform:translateY(-16px) scale(.965);opacity:.3}58%{transform:translateY(1.6px) scale(1.006,.994);opacity:1}78%{transform:translateY(-.8px) scale(.998,1.002)}to{transform:none;opacity:1}} .tile.fall-in::after{ content:"";position:absolute;left:14%;right:14%;bottom:0;height:7px;border-radius:50%;z-index:0; background:radial-gradient(ellipse, rgba(90,60,30,.30), transparent 70%); animation:landShadow .42s cubic-bezier(.22,.8,.3,1) both;animation-delay:var(--fd,0ms); } @keyframes landShadow{from{opacity:0;transform:scaleX(.55)}58%{opacity:.95;transform:scaleX(1.05)}to{opacity:.6;transform:scaleX(1)}} .tile.clearing{animation:clearPopR .36s cubic-bezier(.22,.8,.3,1) forwards} @keyframes clearPopR{0%{transform:scale(1) translateY(0);opacity:1}30%{transform:scale(1.16) translateY(-2px);opacity:1}100%{transform:scale(.48) translateY(2px);opacity:0}} .clear-mote{ position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:5; box-shadow:inset -1px -1px 2px rgba(90,60,30,.28), inset 1px 1px 1px rgba(255,255,255,.5), 0 1px 2px rgba(90,60,30,.22); animation:moteFly .58s cubic-bezier(.22,.8,.3,1) forwards; } @keyframes moteFly{from{opacity:.95;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(calc(-50% + var(--mx,10px)), calc(-50% + var(--my,-8px))) scale(.42)}} .progress{box-shadow:inset 0 1px 2px rgba(90,60,30,.14);background:linear-gradient(180deg,#EDE4D3,#F3EDE3)} #p-progress{background:linear-gradient(90deg,#CE855C,var(--accent) 55%,#A85A38);box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12)} #p-progress.reached{background:linear-gradient(90deg,#93AC8C,#7E9377 55%,#68805F)} .float-score{ font-size:18px; text-shadow:0 1px 0 #FFFDF8, 0 2px 6px rgba(255,251,243,.9), 0 6px 14px rgba(185,106,68,.25); } .combo{box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.25), 0 5px 10px -4px rgba(50,35,20,.45)} .result-faces .rface{ box-shadow:inset 0 2px 0 rgba(255,255,255,.78), inset 0 -5px 0 rgba(90,60,30,.13), 0 5px 8px rgba(90,60,30,.15), 0 1px 2px rgba(90,60,30,.12); } .result-faces .rface.t0{background:linear-gradient(165deg,#F8E3C9,var(--t0) 58%,#DEAC7E)} .result-faces .rface.t1{background:linear-gradient(165deg,#E2EDD8,var(--t1) 58%,#A2BE94)} .sound-btn{box-shadow:inset 0 1px 0 #fff, 0 3px 6px -2px rgba(90,60,30,.18)} @media (prefers-reduced-motion:reduce){ .tile.fall-in,.tile.clearing,.clear-mote,.tile.fall-in::after{animation:none!important} } /* ===== 再点検 2026-10-29（新条件一式・加算分） ===== */ /* ---- 長押しポップアップ全廃（プレイ面）: コールアウト・選択を止める。 入力欄（input/textarea）の長押しペーストだけは対象外に残す。 ---- */ body.game-app #app, body.game-app #toast{ -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; } body.game-app input, body.game-app textarea{ user-select:text; -webkit-user-select:text; -webkit-touch-callout:default; } .board, .board *, .tile, .guide-slot, .menu-row, .shop-item, .rank-row{ -webkit-touch-callout:none !important; user-select:none !important; -webkit-user-select:none !important; } /* ---- CENTERチップ被りの本作側回避（共通キットは無変更） ---- プレイ画面（没入）ではチップ＋展開メニューを隠し、右上の音ボタンに 被らないようにする。show() が body.play-active を付け外しする。:has は保険。 それ以外の画面では上部38pxの帯を確保し、チップが操作要素に被らない。 */ body.play-active #azc-chip, body.play-active #azc-menu{display:none !important} body:has(#scr-play.active) #azc-chip, body:has(#scr-play.active) #azc-menu{display:none !important} /* ---- ホーム追加カード（.azip-card）被りの本作側回避（2026-11-02 バグ総点検） ---- カードがプレイ以外の画面でも居座り、結果画面の「ホームへ」やホームの メニュー行を覆って押せなくしていた。カードはタイトル画面でのみ表示し、 プレイ/結果/フォーム/メニュー画面では出さない（共通キットは無変更）。 */ body.play-active .azip-card, body.end-active .azip-card, body.form-active .azip-card, body.menu-active .azip-card{display:none !important} body.game-app #app{padding-top:calc(env(safe-area-inset-top, 0px) + 38px)} /* ---- 案内役ムギ＆スズ（キャラ確立・表現のみ） ---- */ .guide-pair{display:flex;justify-content:center;gap:20px;margin:2px 0 24px} .guide-strip{display:flex;gap:16px;margin-bottom:12px} .guide-unit{display:inline-flex;flex-direction:column;align-items:center;gap:3px} .guide-slot{ width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; background:linear-gradient(180deg,#FFFFFF,#FBF3E6);border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 4px 8px -3px rgba(90,60,30,.25); animation:guideFloat 3.8s ease-in-out infinite alternate; } .guide-slot svg{width:38px;height:38px} .guide-unit:nth-child(2) .guide-slot{animation-delay:.6s} .guide-name{font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.08em} @keyframes guideFloat{from{translate:0 0}to{translate:0 -2.5px}} .shop-guide{display:flex;align-items:center;gap:10px;margin-bottom:12px} .shop-guide .guide-slot{width:40px;height:40px} .shop-guide .guide-slot svg{width:33px;height:33px} .shop-guide .guide-name{font-size:10px} .shop-guide-text{margin-left:2px} .shop-guide-name{font-weight:800;font-size:14.5px} .shop-guide-sub{color:var(--sub);font-size:12px} .result-guide-names{color:var(--sub);font-size:11.5px;letter-spacing:.1em;margin:0 0 6px} /* ---- プレイ画面の再編（縮小ではなく再編で大きく・390×844に完全収納） ---- 縦フレックスで画面いっぱいに使い、盤面は左右フルブリード化して 354px → 390px幅（タイル 43.7px → 約49px）に拡大する。 */ #scr-play.active{display:flex;flex-direction:column;height:100%;padding:4px 0 10px} #scr-play .play-head, #scr-play .progress, #scr-play .combo-row, #scr-play .reaction, #scr-play .play-hint, #scr-play .play-guide{flex:none} #scr-play .board{flex:none;margin:0 -18px;border-left:none;border-right:none;border-radius:0} .play-spacer{flex:1;min-height:8px} .play-spacer.top{flex:.35} /* 空のコンボピルが黒い帯として見える既存の表示不具合の是正（表示のみ）: .combo の display 指定が hidden 属性を打ち消していた。 */ .combo[hidden], .combo-bar[hidden]{display:none !important} .play-guide{display:flex;justify-content:center;gap:18px;padding-top:2px} .play-guide .guide-slot{width:36px;height:36px} .play-guide .guide-slot svg{width:30px;height:30px} .play-guide .guide-name{font-size:10px} .play-guide.cheer .guide-slot{animation:guideCheer .85s cubic-bezier(.22,1,.36,1)} @keyframes guideCheer{0%{translate:0 0}32%{translate:0 -4.5px}100%{translate:0 0}} /* ---- 旧カタログ行スタイル（アイテム側は azs- へ移行済み・互換のため残置） ---- */ .shop-cat-note{ font-size:11.5px;color:#8A5A35;line-height:1.7; background:rgba(185,106,68,.06);border:1px solid rgba(185,106,68,.20); padding:8px 12px;border-radius:12px;margin:0 0 4px; } .shop-cat-head{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--sub);margin:16px 2px 2px} .catalog-row{gap:10px;flex-wrap:wrap} .catalog-row .s-main{flex:1;min-width:0} .catalog-row .s-effect{flex:0 0 100%;color:var(--sub);font-size:12px;line-height:1.65} .catalog-row .s-tax{display:inline !important} .shop-ic-wrap{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;background:#FFFDF8;border:1px solid var(--line);border-radius:10px} .shop-ic{width:23px;height:23px;display:block} .tile-swatch{width:21px;height:21px;border-radius:6px;border:1px solid rgba(90,60,30,.22);display:block;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)} .tile-swatch.s-sakura{background:radial-gradient(circle at 30% 35%, #F6C6D3 0 3px, transparent 4px),radial-gradient(circle at 68% 62%, #F6C6D3 0 2.5px, transparent 3.5px),linear-gradient(160deg,#FDF0EC,#F3D9CE)} .tile-swatch.s-yoru{background:radial-gradient(circle at 70% 28%, #F7EBC6 0 2.5px, transparent 3.5px),linear-gradient(160deg,#3E4A63,#232C40)} .tile-swatch.s-azrion{background:linear-gradient(160deg,#F9EECB,#E8CE8F);border-color:#B98A2F;box-shadow:inset 0 0 0 2px rgba(185,138,47,.35)} .shop-badge-design{ display:inline-block;font-size:10px;font-weight:800;color:var(--accent); border:1px solid rgba(185,106,68,.45);border-radius:999px;padding:1px 7px; margin-left:7px;vertical-align:2px;background:var(--accent-soft);white-space:nowrap; } .catalog-row .s-price{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap} .catalog-row .s-tax{font-size:10px;color:var(--sub);font-weight:700;margin-left:3px} .catalog-btn{font:inherit} .catalog-btn:disabled{opacity:.85;cursor:default} .ref-item{opacity:.72;margin-top:16px} /* ---- ネイティブアプリ級の演出＋離さなさ（表現のみ） ---- イージングは全て cubic-bezier(.22,1,.36,1) の静かな「スッ」。 登場演出は transform と競合しないよう translate / scale プロパティで組む。 */ .screen{animation:fadeSlide .45s cubic-bezier(.22,1,.36,1)} @keyframes riseIn{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}} #scr-title.active .kicker{animation:riseIn .4s cubic-bezier(.22,1,.36,1) both} #scr-title.active .title-logo{animation:riseIn .44s cubic-bezier(.22,1,.36,1) .03s both} #scr-title.active .title-catch{animation:riseIn .44s cubic-bezier(.22,1,.36,1) .07s both} #scr-title.active .title-art .mini-tile{animation:riseIn .4s cubic-bezier(.22,1,.36,1) both} #scr-title.active .title-art .mini-tile:nth-child(1){animation-delay:.10s} #scr-title.active .title-art .mini-tile:nth-child(2){animation-delay:.14s} #scr-title.active .title-art .mini-tile:nth-child(3){animation-delay:.18s} #scr-title.active .title-art .mini-tile:nth-child(4){animation-delay:.22s} #scr-title.active .title-art .mini-tile:nth-child(5){animation-delay:.26s} #scr-title.active .guide-pair{animation:riseIn .44s cubic-bezier(.22,1,.36,1) .30s both} #scr-title.active #btn-start{animation:riseIn .44s cubic-bezier(.22,1,.36,1) .34s both} #scr-home.active .stat{animation:riseIn .36s cubic-bezier(.22,1,.36,1) both} #scr-home.active .stat:nth-child(2){animation-delay:.04s} #scr-home.active .stat:nth-child(3){animation-delay:.08s} #scr-home.active .home-card{animation:riseIn .4s cubic-bezier(.22,1,.36,1) .10s both} #scr-home.active .menu-row{animation:riseIn .36s cubic-bezier(.22,1,.36,1) both} #scr-home.active .menu-row:nth-child(1){animation-delay:.14s} #scr-home.active .menu-row:nth-child(2){animation-delay:.18s} #scr-home.active .menu-row:nth-child(3){animation-delay:.22s} #scr-play.active .play-head{animation:riseIn .34s cubic-bezier(.22,1,.36,1) both} #scr-play.active .board{animation:riseIn .42s cubic-bezier(.22,1,.36,1) .05s both} #scr-shop.active .catalog-row, #scr-shop.active .ref-item, #scr-ranking.active .rank-row{animation:riseIn .34s cubic-bezier(.22,1,.36,1) both} .result-panel{animation:panelIn .46s cubic-bezier(.22,1,.36,1)} @keyframes panelIn{from{opacity:0;translate:0 10px;scale:.98}to{opacity:1;translate:0 0;scale:1}} .toast{animation:toastIn .3s cubic-bezier(.22,1,.36,1)} @keyframes toastIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}} /* 押下の沈み込み（scale プロパティ＝既存 transform 演出と競合しない） */ .menu-row, .shop-item{transition:scale .16s cubic-bezier(.22,1,.36,1)} .menu-row:active, .shop-item:active{scale:.985} /* 結果「もう一度」の静かな呼吸（テラコッタのグローがそっと明滅するだけ） */ @keyframes retryGlow{ from{box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.22), 0 8px 16px -8px rgba(50,35,20,.5), 0 0 0 0 rgba(185,106,68,0)} to{box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.22), 0 8px 16px -8px rgba(50,35,20,.5), 0 0 18px 2px rgba(185,106,68,.22)} } #scr-result.active #btn-retry{animation:retryGlow 2.8s ease-in-out infinite alternate} @media (prefers-reduced-motion:reduce){ .guide-slot, .play-guide.cheer .guide-slot, #scr-title.active .kicker, #scr-title.active .title-logo, #scr-title.active .title-catch, #scr-title.active .title-art .mini-tile, #scr-title.active .guide-pair, #scr-title.active #btn-start, #scr-home.active .stat, #scr-home.active .home-card, #scr-home.active .menu-row, #scr-play.active .play-head, #scr-play.active .board, #scr-shop.active .catalog-row, #scr-shop.active .ref-item, #scr-ranking.active .rank-row, .result-panel, .toast, #scr-result.active #btn-retry{animation:none !important} } /* === アイテムショップ（ITEM-SHOP-SPEC・フラッグシップ選択欄の文法） === */ .azs-balance{display:flex;align-items:baseline;gap:10px;margin:12px 0 4px;background:#FFFDF8;border:1px solid var(--line);border-radius:12px;padding:10px 14px} .azs-balance-label{font-size:11px;letter-spacing:.08em;color:var(--sub);font-weight:700} .azs-balance-num{font-size:20px;font-variant-numeric:tabular-nums} .azs-balance-link{margin-left:auto;font-size:12px;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)} .azs-guest{margin-top:14px;text-align:center;background:#FFFDF8;border:1px solid var(--line);border-radius:12px;padding:20px 16px} .azs-guest p{font-size:13.5px;line-height:1.7;margin-bottom:14px} .azs-stage{display:flex;align-items:center;gap:4px;margin-top:16px} .azs-arrow{appearance:none;border:none;background:none;font-size:30px;line-height:1;color:var(--sub);cursor:pointer;padding:10px 6px;flex:none;transition:transform .25s cubic-bezier(.22,.8,.3,1),color .25s;-webkit-tap-highlight-color:transparent} .azs-arrow:active{transform:scale(.9);color:var(--ink)} .azs-focus{flex:1;height:208px;border-radius:20px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:background .45s cubic-bezier(.22,.8,.3,1);overflow:hidden} .azs-focus .shop-ic{width:132px;height:132px;animation:azsIn .5s cubic-bezier(.22,.8,.3,1) both} .azs-tile-preview{width:132px;height:132px;border-radius:28px;display:flex;align-items:center;justify-content:center;animation:azsIn .5s cubic-bezier(.22,.8,.3,1) both;box-shadow:inset 0 2px 0 rgba(255,255,255,.65), inset 0 -6px 0 rgba(90,60,30,.10), 0 10px 22px rgba(90,60,30,.18);border:1px solid rgba(255,255,255,.55)} .azs-tile-preview svg{width:88px;height:88px} .tp-sakura{background:radial-gradient(circle at 28% 32%, #F6C6D3 0 7px, transparent 8.5px),radial-gradient(circle at 70% 62%, #F6C6D3 0 5.5px, transparent 7px),radial-gradient(circle at 84% 20%, #F6C6D3 0 4.5px, transparent 6px),linear-gradient(160deg,#FDF0EC,#F3D9CE)} .tp-yoru{background:radial-gradient(circle at 74% 24%, #F7EBC6 0 6px, transparent 7.5px),linear-gradient(160deg,#3E4A63,#232C40)} .tp-azrion{background:linear-gradient(160deg,#F9EECB,#E8CE8F);box-shadow:inset 0 0 0 3px rgba(185,138,47,.5), inset 0 2px 0 rgba(255,255,255,.65), inset 0 -6px 0 rgba(90,60,30,.10), 0 10px 22px rgba(90,60,30,.18)} @keyframes azsIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}} .azs-info{text-align:center;margin-top:16px} .azs-kind{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--sub)} .azs-name{font-size:22px;letter-spacing:.03em;margin:4px 0 0} .azs-effect{font-size:13px;color:#5d5142;line-height:1.7;margin-top:8px;min-height:2.6em} .azs-price{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:6px} .azs-price-unit{font-size:13px;font-weight:700;color:var(--sub)} .azs-owned{font-size:12.5px;color:var(--accent);font-weight:700;min-height:1.4em;margin-top:4px} .azs-action{margin-top:10px;padding:14px 26px;font-size:16px} .azs-action:disabled{opacity:.45;cursor:default} .azs-note{font-size:11.5px;color:var(--sub);margin-top:10px} .azs-note a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)} .azs-dots{display:flex;justify-content:center;gap:6px;margin-top:16px} .azs-dot{width:6px;height:6px;border-radius:99px;background:var(--line);transition:background .3s,width .3s cubic-bezier(.22,.8,.3,1)} .azs-dot.on{background:var(--ink);width:18px} .azs-strip{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px} .azs-thumb{position:relative;appearance:none;width:52px;height:52px;border-radius:14px;border:1px solid var(--line);background:#FFFDF8;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.22,.8,.3,1),border-color .25s;-webkit-tap-highlight-color:transparent;padding:0} .azs-thumb .shop-ic{width:30px;height:30px} .azs-thumb .tile-swatch{width:30px;height:30px;border-radius:8px} .azs-thumb.on{border-color:var(--ink);transform:translateY(-2px)} .azs-thumb-owned{position:absolute;right:3px;bottom:3px;font-size:9px;font-weight:700;color:#fff;background:var(--accent);border-radius:99px;padding:1px 5px;z-index:2} .azs-sheet-wrap{position:fixed;inset:0;z-index:80} .azs-sheet-backdrop{position:absolute;inset:0;background:rgba(38,28,18,.42);animation:azsFade .25s ease both} .azs-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--panel);border-radius:20px 20px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));max-width:480px;margin:0 auto;animation:azsSheet .38s cubic-bezier(.22,.8,.3,1) both} @keyframes azsFade{from{opacity:0}to{opacity:1}} @keyframes azsSheet{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}} .azs-sheet-kind{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--sub);margin:0} .azs-sheet-name{font-size:19px;margin:3px 0 0} .azs-sheet-rows{margin-top:14px;border-top:1px solid var(--line)} .azs-sheet-rows>div{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px} .azs-sheet-rows b{font-size:16px;font-variant-numeric:tabular-nums} .azs-sheet-note{font-size:11.5px;color:var(--sub);margin-top:12px} .azs-sheet-note a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)} .azs-sheet-error{font-size:13px;color:#A33B2E;margin-top:10px} .azs-sheet-actions{display:flex;flex-direction:column;gap:9px;margin-top:16px} .azs-sheet-actions .btn-quiet{padding:6px} /* ---- プレイ中のアイテムボタン ---- */ .play-items{display:flex;gap:8px;justify-content:center;margin-top:10px;flex:none} .item-btn{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--ink);box-shadow:inset 0 1px 0 #fff, 0 2px 5px -2px rgba(90,60,30,.18);transition:transform .18s cubic-bezier(.22,.8,.3,1),opacity .18s} .item-btn:active{transform:scale(.95)} .item-btn:disabled{opacity:.45} .item-qty{font-weight:800;color:var(--accent)} /* ヒント券: いちばん大きなグループがそっと光る */ .tile.hint-glow{filter:brightness(1.09);box-shadow:inset 0 2px 0 rgba(255,255,255,.9), inset 0 -5px 0 rgba(90,60,30,.12), 0 0 0 3px rgba(185,106,68,.6), 0 0 18px rgba(232,179,75,.75)} /* ---- スキン反映（装備中のみ・タイルの地） ---- */ /* さくらのおへや: タイルの地に桜の花びら */ body.skin-sakura .tile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 26% 30%, rgba(246,150,175,.55) 0 3.5px, transparent 4.5px),radial-gradient(circle at 70% 64%, rgba(246,150,175,.5) 0 3px, transparent 4px),radial-gradient(circle at 84% 20%, rgba(246,150,175,.45) 0 2.4px, transparent 3.4px),radial-gradient(circle at 14% 80%, rgba(246,150,175,.45) 0 2.6px, transparent 3.6px)} /* よるのまどべ: 夜の窓辺の深い色合い（種類の色相は保つ） */ body.skin-yoru .tile.t0{background:linear-gradient(160deg,#8A6A54,#6E5138 62%,#59402C)} body.skin-yoru .tile.t1{background:linear-gradient(160deg,#66795F,#4C5F43 62%,#3D4F36)} body.skin-yoru .tile.t2{background:linear-gradient(160deg,#8F7E54,#71613C 62%,#5C4E2F)} body.skin-yoru .tile.t3{background:linear-gradient(160deg,#5B7185,#43586B 62%,#354757)} body.skin-yoru .tile.t4{background:linear-gradient(160deg,#7D6070,#624655 62%,#4F3844)} body.skin-yoru .tile svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))} /* AZRIONプレミアム: 金の縁＋小さな紋 */ body.skin-azrion .tile{box-shadow:inset 0 0 0 2px rgba(185,138,47,.6), inset 0 2px 0 rgba(255,255,255,.6), inset 0 -4px 0 rgba(90,60,30,.12), 0 2px 4px rgba(90,60,30,.14)} body.skin-azrion .tile::before{content:"A";position:absolute;top:2px;right:5px;font-size:8px;font-weight:800;letter-spacing:.04em;color:rgba(160,116,32,.95);z-index:2;pointer-events:none} /* ---- テーマ反映（装備中のみ・盤面と背景） ---- */ /* 窓辺のひだまり: 午後の窓光の暖色 */ body.theme-hidamari{--bg:#FBF2DE;--panel2:#F5E8CC} body.theme-hidamari .board{background:linear-gradient(165deg,#FFF8E6,#FBEFD2);background-size:auto} /* 海辺のさんぽ道: 砂と浅い水の色 */ body.theme-umibe{--bg:#EFF5F1;--panel2:#E0ECE5} body.theme-umibe .board{background:linear-gradient(165deg,#FDF9EC,#E7F0EA);background-size:auto} .azs-banner{display:block;margin:30px 0 2px;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;overflow:hidden;line-height:0;aspect-ratio:4/1;background:#16222e;transition:transform .12s ease} .azs-banner img{display:block;width:100%;height:100%;object-fit:cover} .azs-banner:active{transform:scale(.99)} /* === ノースクロール是正 (2026-11-01 FIX1): タイトル画面を 375×812 に収める === 構造のみの是正（文言・導線・世界観は不変）。 */ #app { padding-top: 12px; } #scr-title .title-logo { font-size: 34px; margin-top: 8px; line-height: 1.2; } #scr-title .guide-pair { margin-top: 0; } #scr-title #btn-start { padding-top: 11px; padding-bottom: 11px; } #scr-title .title-note { margin-top: 10px; } #scr-title .title-guide { margin-top: 6px; } #scr-title .title-foot { margin-top: 12px; line-height: 1.55; } #scr-title .azs-banner { margin-top: 10px; height: 38px; aspect-ratio: auto; } #scr-title .azs-banner img { object-position: center 42%; } .azi-strip { padding-top: 10px !important; padding-bottom: 10px !important; } .azi-strip-title { line-height: 1.35 !important; } .azi-strip-sub { line-height: 1.4 !important; } /* === ノースクロール是正 調整2 (2026-11-01 FIX1): #app 上パディング追加を取り消し === 元の #app は上パディング0で、認証等の周辺画面の高さを増やさないため。 */ #app { padding-top: 0; } .result-score{font-weight:800;line-height:1.15} /* === 低い画面の圧縮（2026-11-02 バグ総点検、375×667 等） === 構造・文言は不変。余白と寸法のみ詰め、タイトルの操作要素（音ボタン・ ガイドリンク）をホーム追加カード（下端約533px〜）の上に逃がす。 バナーは低い画面では出さない（812では通常表示）。 */ @media (max-height: 720px) { /* タイトル */ #scr-title .title-logo { font-size: 30px; margin-top: 4px; } #scr-title .guide-pair { margin-bottom: 12px; } #scr-title .guide-slot { width: 36px; height: 36px; } #scr-title .guide-slot svg { width: 30px; height: 30px; } #scr-title #btn-start { padding-top: 9px; padding-bottom: 9px; } #scr-title #btn-guest { padding-top: 9px; padding-bottom: 9px; } #scr-title .title-sound { margin-top: 2px; } #scr-title .title-note { margin-top: 4px; } #scr-title .title-guide { margin-top: 2px; } #scr-title .title-art { margin-bottom: 8px; } #scr-title .guide-pair { margin-bottom: 8px; } #scr-title .title-foot { margin-top: 8px; } #scr-title .azs-banner { display: none; } /* ホーム */ #scr-home .stat { padding: 8px; } #scr-home .stats { margin-bottom: 10px; } #scr-home .home-card { padding: 14px; margin-bottom: 10px; } #scr-home .home-card p { margin-bottom: 10px; } #scr-home .guide-strip .guide-slot { width: 38px; height: 38px; } #scr-home .guide-strip .guide-slot svg { width: 32px; height: 32px; } #scr-home .menu-row { padding: 11px 16px; } /* プレイ */ #scr-play { padding-top: 10px; padding-bottom: 12px; } #scr-play .combo-row { height: 24px; } #scr-play .reaction { height: 20px; font-size: 12.5px; margin: 0 0 2px; } #scr-play .play-hint { margin-top: 6px; } #scr-play .play-items { margin-top: 6px; } #scr-play .play-spacer { min-height: 2px; } #scr-play .play-guide .guide-slot { width: 27px; height: 27px; } #scr-play .play-guide .guide-slot svg { width: 22px; height: 22px; } #scr-play .play-guide .guide-name { font-size: 9px; } /* 結果: 明細3行を1段の帯にして収める */ #scr-result .result-panel { margin-top: 2dvh; padding: 16px; } #scr-result .result-faces { margin: 6px 0 0; } #scr-result .result-faces .rface { width: 36px; height: 36px; } #scr-result .result-faces .rface svg { width: 26px; height: 26px; } #scr-result .result-score { font-size: 38px; } #scr-result .result-reaction { margin-top: 4px; } #scr-result .result-rows { display: flex; gap: 8px; margin-bottom: 12px; } #scr-result .result-rows > div { flex: 1; display: block; text-align: center; padding: 6px 2px; } #scr-result .result-rows dt { display: block; } #scr-result .result-rows dd { display: block; } #scr-result #btn-retry { padding-top: 11px; padding-bottom: 11px; } #scr-result #btn-result-home { padding-top: 8px; padding-bottom: 8px; } }