:root{--navy:#172a5a;--navy2:#0d1936;--red:#c51f26;--ink:#101827;--muted:#667085;--line:#d7dee8;--bg:#f5f7fb;--white:#fff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink)}
.wrap{max-width:1100px;margin:auto;padding:28px 18px 50px}.intro{text-align:center;margin-bottom:18px}.intro h1{font-size:clamp(24px,4vw,36px);margin:0 0 8px;color:var(--navy)}.intro p{margin:0;color:var(--muted);font-weight:700;line-height:1.6}.badge{display:inline-block;margin-top:12px;padding:8px 12px;border-radius:999px;background:#fff1f1;color:#97181d;border:1px solid #f2c6c8;font-weight:900;font-size:13px}
.demo-grid{display:grid;grid-template-columns:minmax(0,480px) minmax(280px,1fr);gap:24px;align-items:start}.phone{background:var(--white);border:1px solid #e5e8ef;border-radius:34px;box-shadow:0 18px 50px rgba(23,42,90,.12);padding:24px 18px 22px;min-height:690px}.phone-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.phone-head b{font-size:24px}.close{width:46px;height:46px;border:0;border-radius:50%;font-size:30px;color:#1684e8;background:#f1f3f5;font-weight:800}.position{text-align:center;color:#68758c;font-size:18px;font-weight:900;margin:4px 0 10px}.scoreboard{display:grid;grid-template-columns:1fr 70px 1fr;align-items:start;gap:6px}.player{text-align:center}.player .name{font-size:24px;font-weight:950;line-height:1.25}.player .score{font-size:70px;font-weight:950;line-height:1;margin-top:10px}.vs{text-align:center;font-size:36px;font-weight:950;padding-top:44px}.timer{text-align:center;font-size:56px;font-weight:950;letter-spacing:1px;margin:16px 0}.action{display:block;width:100%;border:0;border-radius:14px;padding:18px 14px;font-size:22px;font-weight:950;margin:10px 0;cursor:pointer}.primary{background:var(--navy);color:#fff}.dark{background:var(--navy2);color:#fff}.ghost{background:#fff;border:1px solid #b6c2d3;color:var(--navy)}.action:disabled{opacity:.45;cursor:default}
.tech-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}.side-label{text-align:center;font-weight:900;color:var(--muted);font-size:13px;margin-bottom:5px}.penalty-count{text-align:center;font-weight:900;color:#8a4a12;font-size:12px;margin:0 0 8px}.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tech{min-height:62px;border-radius:14px;font-size:27px;font-weight:950;cursor:pointer}.tech.red{background:#e59a9d;color:#fff;border:3px solid #e39a9d}.tech.white{background:#fff;color:#8c8c8c;border:3px solid #8e8e8e}.tech:disabled{opacity:.38;cursor:default}.history{margin-top:18px;border-top:1px solid var(--line);padding-top:13px}.history h3{margin:0 0 10px;font-size:16px}.hist-row{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center;border:1px solid #edf0f4;border-radius:12px;padding:10px 12px;margin:8px 0;background:#fafbfc}.hist-time{font-size:15px;font-weight:900}.hist-main{line-height:1.3}.hist-main b{display:block;font-size:15px}.hist-main span{display:block;font-size:14px;color:#44516a;font-weight:800}.hist-side{font-size:12px;color:var(--muted);font-weight:900}
.guide{background:#fff;border:1px solid #e5e8ef;border-radius:22px;padding:22px;box-shadow:0 12px 35px rgba(23,42,90,.07)}.guide h2{margin:0 0 10px;color:var(--navy);font-size:24px}.guide p{color:#45526a;line-height:1.75;font-weight:700}.step{display:flex;gap:12px;align-items:flex-start;margin:15px 0;padding:14px;border-radius:14px;background:#f4f7fb}.n{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:950}.step b{display:block;margin-bottom:3px;color:var(--navy)}.demo-note{margin-top:16px;padding:14px;border-radius:14px;background:#edf3ff;color:#243a6a;font-weight:800;line-height:1.65}.status{margin-top:12px;font-weight:950;color:var(--red)}
@media(max-width:820px){.demo-grid{grid-template-columns:1fr}.guide{order:-1}.phone{max-width:520px;margin:auto;width:100%}}
@media(max-width:480px){.wrap{padding:16px 8px 36px}.phone{border-radius:22px;padding:18px 12px;min-height:0}.player .name{font-size:20px}.player .score{font-size:58px}.vs{font-size:28px}.timer{font-size:48px}.action{font-size:19px;padding:15px}.tech{font-size:24px;min-height:58px}.scoreboard{grid-template-columns:1fr 56px 1fr}}

html,body{width:100%;max-width:100%;overflow-x:hidden}
.wrap,.intro,.demo-grid,.phone,.guide{min-width:0;max-width:100%}
.badge{max-width:100%;white-space:normal}
@media(max-width:820px){.wrap{width:100%;padding-left:10px;padding-right:10px}.demo-grid{width:100%}.phone,.guide{width:100%}}
@media(max-width:480px){.intro h1{font-size:27px;line-height:1.35}.intro p{font-size:13px}.badge{font-size:12px}.guide{padding:18px 14px}.step{padding:12px 10px}.hist-row{grid-template-columns:58px minmax(0,1fr) auto;gap:7px;padding:9px 8px}.hist-main b,.hist-main span{overflow-wrap:anywhere}.player .name{font-size:18px}.scoreboard{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)}.vs{font-size:24px;padding-top:40px}.tech-wrap{gap:8px}.tech-grid{gap:6px}.tech{min-width:0}}
.history-empty{color:#788397;font-weight:700;font-size:14px}