/* /ip/ — the Poker Tokyo IP page for anime and manga partners, laid out like an anime's official site:
   a full-screen key visual (the city moving behind the three heroes), a MENU button, big English section titles.
   Anton (SIL OFL 1.1, fonts/OFL-Anton.txt) is only used here, so it is declared here and not in fonts/fonts.css. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:dark;--ip-bg:#05081a;--ip-bg2:#0a1026;--ip-surface:#10172f;--ip-line:#26355a;--ip-text:#eef2fb;--ip-muted:#9eadca;--ip-pink:#ff4fb8;--ip-pink2:#f08ad4;--ip-cyan:#6fe0ff;--ip-gold:#e8c27a;
 --ip-display:'Anton',Impact,'Arial Narrow Bold',sans-serif;--ip-mincho:'Shippori Mincho B1','Hiragino Mincho ProN','Yu Mincho',serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;background:var(--ip-bg)}
html.menu-open{overflow:hidden}
body.ip-page{margin:0;background:var(--ip-bg);color:var(--ip-text);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:15px;line-height:1.9;overflow-wrap:anywhere;overflow-x:hidden}
.ip-page a{color:var(--ip-cyan);text-underline-offset:4px}.ip-page a:hover{color:#fff}.ip-page a:focus-visible,.ip-page button:focus-visible{outline:2px solid var(--ip-cyan);outline-offset:4px}
.ip-page img{display:block;max-width:100%;height:auto}
.ip-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ip-skip{position:absolute;top:-100px;left:20px;background:var(--ip-surface);padding:10px;z-index:100}.ip-skip:focus{top:8px}

/* Header: the small logo (shown once the key visual is scrolled past), YouTube and the black MENU square. */
.ip-top{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:flex-start;padding:0 0 0 22px;pointer-events:none}
.ip-top>*{pointer-events:auto}
.ip-top-logo{display:block;margin-top:12px;line-height:0;transition:opacity .4s,transform .4s}
.ip-top-logo img{height:62px;width:auto;filter:drop-shadow(0 0 12px #ff2fb066)}
.js:not(.is-scrolled) .ip-top-logo{opacity:0;transform:translateY(-8px);pointer-events:none}
.ip-top-right{display:flex;align-items:flex-start;gap:14px}
.ip-top-icon{display:grid;place-items:center;width:46px;height:46px;margin-top:19px;border-radius:50%;background:#05081ab3;border:1px solid #ffffff26}
.ip-top-icon:hover{border-color:#ff5a7a}.ip-top-icon.x{color:#fff!important}.ip-top-icon.x:hover{border-color:#cfd8ea}.x-mark{display:block;flex:none}
/* JP / EN: the two pages (/ip/ and /ip/en/); the one being read is filled in pink. */
.ip-lang{display:flex;height:46px;margin-top:19px;padding:3px;border-radius:999px;background:#05081ab3;border:1px solid #ffffff26}
.ip-lang a{display:grid;place-items:center;min-width:40px;padding:0 8px;border-radius:999px;color:#cfd8ea!important;text-decoration:none;font-family:var(--ip-display);font-size:14px;letter-spacing:.1em}
.ip-lang a:hover{color:#fff!important}
.ip-lang a[aria-current]{background:var(--ip-pink);color:#05081a!important}
.ip-menu-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;width:84px;height:84px;background:#000;color:#fff!important;text-decoration:none;font-family:var(--ip-display);font-size:15px;letter-spacing:.14em;border-bottom:3px solid var(--ip-pink)}
.ip-menu-btn:hover{background:#140a1a}
.ip-menu-bars{position:relative;display:block;width:30px;height:2px;background:#fff;margin-top:6px}
.ip-menu-bars::before,.ip-menu-bars::after{content:"";position:absolute;left:0;width:30px;height:2px;background:#fff}.ip-menu-bars::before{top:-8px}.ip-menu-bars::after{top:8px}

/* Full-screen menu: CSS opens it on #ip-menu without scripts; ip.js opens it in place. */
.ip-menu{position:fixed;inset:0;z-index:60;display:none;overflow:auto;background:radial-gradient(ellipse at 85% 0,#3b1340 0,transparent 45%),radial-gradient(ellipse at 0 100%,#0f2d55 0,transparent 45%),#05081a}
.ip-menu:target,.ip-menu.is-open{display:block;animation:ip-fade .35s both}
.ip-menu-inner{max-width:1100px;margin:0 auto;padding:110px 32px 60px;position:relative}
.ip-menu-close{position:fixed;top:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:84px;height:84px;background:var(--ip-pink);color:#05081a!important;text-decoration:none;font-family:var(--ip-display);letter-spacing:.12em;font-size:14px}
.ip-menu-close span{position:relative;width:30px;height:16px}.ip-menu-close span::before,.ip-menu-close span::after{content:"";position:absolute;left:0;top:7px;width:30px;height:2px;background:#05081a;transform:rotate(30deg)}.ip-menu-close span::after{transform:rotate(-30deg)}
.ip-menu-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;counter-reset:menu}
.ip-menu-list li{counter-increment:menu;border-bottom:1px solid #ffffff1f}
.ip-menu-list a{display:flex;align-items:baseline;gap:18px;padding:16px 0;color:#fff!important;text-decoration:none}
.ip-menu-list a::before{content:counter(menu,decimal-leading-zero);font-family:var(--ip-display);font-size:14px;color:var(--ip-pink)}
.ip-menu-list b{font-family:var(--ip-display);font-weight:400;font-size:clamp(30px,4vw,46px);line-height:1;letter-spacing:.02em;transition:color .2s,text-shadow .2s}
.ip-menu-list span{font-size:13px;color:var(--ip-muted)}
.ip-menu-list a:hover b{color:var(--ip-pink);text-shadow:0 0 18px #ff4fb899}
.ip-menu-links{display:flex;flex-wrap:wrap;gap:12px 26px;margin:36px 0 0;font-size:14px}

/* Key visual. */
.ip-kv{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:#05081a}
.ip-kv-bg,.ip-kv-bg picture{position:absolute;inset:0}
.ip-kv-poster,.ip-kv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none!important}
.ip-kv-poster{animation:ip-zoom 18s ease-out both}
.ip-kv-video{opacity:0;transition:opacity 1s}.ip-kv-video.is-playing{opacity:1}
.ip-kv-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#05081af2 0,#05081ab3 30%,#05081a33 55%,transparent 70%),linear-gradient(0deg,#05081a 0,#05081a00 26%),linear-gradient(180deg,#05081a99 0,transparent 16%)}
.ip-kv-rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.2s}.ip-kv-rain.is-on{opacity:1}.ip-kv-rain.front{z-index:2}
/* The trio stands in a box of fixed proportions (wide enough for three, never taller than the screen), so a
   taller or narrower window scales them together instead of pushing Reiko and Kazuya behind Reiji. */
.ip-kv-cast{--cast-w:min(62vw,calc(96svh * 1.32),1320px);position:absolute;z-index:2;right:1vw;bottom:0;width:var(--cast-w);height:calc(var(--cast-w) / 1.32)}
.ip-fig{position:absolute;bottom:0;margin:0;height:100%;filter:drop-shadow(0 0 26px #ff3fb440) drop-shadow(0 18px 30px #000c);animation:ip-rise 1.1s cubic-bezier(.2,.75,.2,1) both}
.ip-fig img{display:block;height:100%;width:auto;max-width:none!important}
.ip-fig.ren{left:50%;translate:-50% 0;z-index:3;animation-delay:.25s}
.ip-fig.reina{left:0;height:86%;z-index:2;animation-delay:.45s}
.ip-fig.kaito{right:0;height:86%;z-index:2;animation-delay:.6s}
.ip-kv-copy{position:absolute;z-index:3;left:clamp(24px,5vw,104px);bottom:clamp(70px,13vh,150px);width:min(34vw,560px)}
.ip-kv-title{margin:0;line-height:0}
.ip-kv-title img{width:min(31vw,520px);height:auto;filter:drop-shadow(0 0 22px #ff2fb08c);animation:ip-flicker 2.2s .2s both}
.ip-kv-catch{margin:18px 0 0;font-family:var(--ip-mincho);font-weight:800;font-size:clamp(26px,3vw,48px);line-height:1.45;letter-spacing:.1em;text-shadow:0 2px 18px #000,0 0 34px #ff3fb455;animation:ip-up 1s .9s both}
.ip-kv-tag{margin:14px 0 0;font-family:var(--ip-display);font-size:clamp(15px,1.3vw,20px);letter-spacing:.42em;color:var(--ip-pink);text-shadow:0 0 14px #ff4fb8aa;animation:ip-up 1s 1.1s both}
.ip-kv-studio{margin:8px 0 0;font-size:13px;color:#c6d1e8;letter-spacing:.06em;animation:ip-up 1s 1.2s both}
.ip-kv-studio span{display:inline-block;margin-right:10px;padding:1px 8px;border:1px solid #ffffff55;font-family:var(--ip-display);letter-spacing:.14em;font-size:11px;color:#fff}
.ip-kv-studio a{color:#fff!important;font-weight:700}
.ip-kv-actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 0;animation:ip-up 1s 1.3s both}
.ip-kv-scroll{position:absolute;z-index:3;left:50%;bottom:0;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:0;color:#fff!important;text-decoration:none;font-family:var(--ip-display);font-size:13px;letter-spacing:.3em}
.ip-kv-scroll::after{content:"";width:1px;height:64px;background:linear-gradient(#fff,#fff0);animation:ip-scroll 2s ease-in-out infinite}

/* Ticker. */
.ip-marquee{position:relative;z-index:4;overflow:hidden;background:var(--ip-pink);color:#05081a;border-block:3px solid #000;margin-top:-2px}
.ip-marquee-track{display:flex;width:max-content;align-items:center;padding:8px 0 6px;font-family:var(--ip-display);font-size:clamp(24px,3.4vw,40px);line-height:1.1;letter-spacing:.03em;white-space:nowrap;animation:ip-marquee 36s linear infinite}
.ip-marquee span{padding:0 .5em}.ip-marquee i{font-style:normal;font-size:.7em}
.ip-marquee.foot{background:#000;color:#fff;border-color:#000;margin-top:96px}.ip-marquee.foot .ip-marquee-track{animation-direction:reverse;animation-duration:44s}.ip-marquee.foot i{color:var(--ip-pink)}

/* Sections and their big English titles. */
main{display:block}
.ip-section{position:relative;max-width:1180px;margin:0 auto;padding:120px 40px 0}
.ip-head{position:relative;margin:0 0 42px}
.ip-head-en{margin:0;font-family:var(--ip-display);font-size:clamp(58px,9vw,124px);line-height:.92;letter-spacing:.01em;color:#fff;text-shadow:.045em .045em 0 var(--ip-pink),0 0 44px #ff3fb433;transform:skewX(-7deg);transform-origin:left bottom}
.ip-head h2{display:flex;align-items:center;gap:14px;margin:16px 0 0;font-size:clamp(16px,1.8vw,21px);line-height:1.5;letter-spacing:.14em}
.ip-head h2::before{content:"";flex:none;width:46px;height:2px;background:var(--ip-cyan);box-shadow:0 0 12px var(--ip-cyan)}
.ip-section-lead{max-width:760px;margin:-10px 0 34px;color:#d6dfef}
.ip-note{color:var(--ip-muted);font-size:13px}
.ip-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 26px;border:1px solid #ffffff4d;background:#05081a99;color:#eef2fb!important;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.06em;box-shadow:4px 4px 0 #000;transition:transform .15s,box-shadow .15s,border-color .15s}
.ip-button:hover{border-color:var(--ip-cyan);transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.ip-button.primary{background:linear-gradient(135deg,#ff4fb8,#9b4dff);border-color:transparent;color:#fff!important}
.ip-button.big{min-height:62px;padding:14px 40px;font-size:17px}
.ip-button.yt{background:#1b0d14;border-color:#7a2a3c}.ip-button.yt:hover{border-color:#ff5a7a}
.youtube-mark{display:block;flex:none}

/* 01 Story. */
.ip-story-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:start}
.ip-logline{margin:0;font-family:var(--ip-mincho);font-weight:800;font-size:clamp(18px,1.9vw,24px);line-height:2.05;letter-spacing:.06em;color:#f6ecf6;padding-left:22px;border-left:3px solid var(--ip-pink)}
.ip-facts{margin:0;border-top:1px solid var(--ip-line)}
.ip-facts>div{display:grid;grid-template-columns:132px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--ip-line)}
.ip-facts dt{font-size:12.5px;color:var(--ip-cyan);font-weight:700;letter-spacing:.08em}.ip-facts dd{margin:0;font-size:14.5px}

/* 02 World: a full-bleed 1988 Shinjuku with "1988" behind the words. */
.ip-world{position:relative;margin-top:130px;padding:120px 40px;overflow:hidden;isolation:isolate}
.ip-world-bg{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;z-index:-2;filter:saturate(1.05)}
.ip-world::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#05081af5 0,#05081ad9 45%,#05081a66 100%),linear-gradient(0deg,#05081a 0,transparent 25%,transparent 75%,#05081a 100%)}
.ip-world-year{position:absolute;right:-.06em;bottom:-.18em;z-index:-1;margin:0;font-family:var(--ip-display);font-size:clamp(150px,28vw,420px);line-height:1;color:transparent;-webkit-text-stroke:2px #ff4fb85c;letter-spacing:.02em}
.ip-world-inner{max-width:1100px;margin:0 auto}
.ip-world-lead{max-width:640px;margin:0;font-size:16px;line-height:2.05}
.ip-points{list-style:none;padding:0;margin:30px 0 18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1000px}
.ip-points li{padding:18px 18px 16px;background:#05081abf;border:1px solid #ffffff1f;border-top:2px solid var(--ip-pink);font-size:14px;line-height:1.8;backdrop-filter:blur(4px)}
.ip-points strong{display:block;color:var(--ip-gold);font-size:13px;letter-spacing:.1em;margin-bottom:4px}

/* 03 Characters: tabs with faces (built by ip.js), one big panel at a time. Without scripts every panel shows. */
.ip-chara-tabs{display:flex;gap:6px 14px;overflow-x:auto;scrollbar-width:none;margin:0 0 34px;padding:6px 4px 10px}
.ip-chara-tabs::-webkit-scrollbar{display:none}
.ip-chara-tab{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:84px;padding:0;background:none;border:0;color:var(--ip-muted);font:inherit;font-size:12px;line-height:1.3;cursor:pointer}
.ip-chara-tab img{width:70px;height:70px;border-radius:50%;object-fit:cover;object-position:50% 16%;border:2px solid #2c3b62;transition:box-shadow .25s,border-color .25s,transform .25s}
.ip-chara-tab:hover img{transform:translateY(-3px);border-color:var(--ip-pink2)}
.ip-chara-tab[aria-selected="true"]{color:#fff;font-weight:700}
.ip-chara-tab[aria-selected="true"] img{border-color:var(--ip-pink);box-shadow:0 0 0 3px var(--ip-bg),0 0 0 5px var(--ip-pink),0 0 24px #ff3fb488}
.ip-chara-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;min-height:600px;isolation:isolate}
.ip-chara-panel+.ip-chara-panel{margin-top:70px}.js .ip-chara-panel+.ip-chara-panel{margin-top:0}
.ip-chara-panel[hidden]{display:none}
.ip-chara-art{position:relative;display:flex;justify-content:center;align-items:flex-end;height:620px}
.ip-chara-art::before{content:"";position:absolute;left:50%;bottom:6%;width:min(92%,520px);aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(circle,#ff4fb840 0,#6f3cff26 45%,transparent 70%);z-index:-1}
.hero .ip-chara-art img{height:100%;width:auto;filter:drop-shadow(0 0 26px #ff3fb455)}
.rival .ip-chara-art{align-items:center}
.rival .ip-chara-art img{width:min(100%,520px);aspect-ratio:1;object-fit:cover;object-position:50% 20%;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);box-shadow:0 0 0 1px #ffffff26}
.ip-chara-text{position:relative}
.ip-chara-en{margin:0 0 14px;font-family:var(--ip-display);font-size:clamp(46px,6.2vw,96px);line-height:.9;letter-spacing:.01em;color:transparent;-webkit-text-stroke:1.5px #ffffff59;transform:skewX(-7deg);transform-origin:left bottom}
.ip-role{margin:0 0 6px;color:var(--ip-pink);font-size:13px;letter-spacing:.08em}
.ip-chara-text h3{margin:0;font-family:var(--ip-mincho);font-weight:800;font-size:clamp(32px,4vw,52px);line-height:1.3;letter-spacing:.08em}
.ip-chara-text p:not(.ip-role):not(.ip-chara-en){margin:18px 0 0;font-size:15px;line-height:2}
.ip-chara-text blockquote{margin:22px 0 0;padding:14px 18px;border-left:3px solid var(--ip-cyan);background:#6fe0ff12;color:#dff6ff;font-family:var(--ip-mincho);font-weight:800;font-size:18px;letter-spacing:.06em}
.ip-chara-panel.is-active .ip-chara-art img{animation:ip-slide .7s cubic-bezier(.2,.75,.2,1) both}
.ip-chara-panel.is-active .ip-chara-text{animation:ip-up .7s .1s cubic-bezier(.2,.75,.2,1) both}

/* 04 Wards: a wall of 23 portraits. */
.ip-wards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;counter-reset:ward}
.ip-wards li{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:0 10px 10px 12px;aspect-ratio:3/4;overflow:hidden;background:#0c1328;counter-increment:ward;isolation:isolate;transition:box-shadow .3s,outline-color .3s;outline:2px solid transparent;outline-offset:-2px}
.ip-wards img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;object-position:50% 18%;filter:saturate(.9) brightness(.82);transition:transform .6s cubic-bezier(.2,.75,.2,1),filter .4s}
.ip-wards li::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 42%,#05081af2 94%)}
.ip-wards li::before{content:counter(ward,decimal-leading-zero);position:absolute;top:6px;right:10px;z-index:2;font-family:var(--ip-display);font-size:30px;line-height:1.2;color:#fff;text-shadow:2px 2px 0 var(--ip-pink)}
.ip-wards span{position:absolute;top:10px;left:10px;z-index:2;writing-mode:vertical-rl;padding:8px 3px;background:#05081ad9;border:1px solid #ffffff33;font-size:12.5px;font-weight:700;letter-spacing:.24em;line-height:1}
.ip-wards strong{position:relative;z-index:2;font-size:20px;line-height:1.3;letter-spacing:.06em}
.ip-wards small{position:relative;z-index:2;margin-top:2px;font-size:11.5px;line-height:1.4;color:#c9d4ea}
.ip-wards li:hover{outline-color:var(--ip-pink);box-shadow:0 0 26px #ff3fb466}
.ip-wards li:hover img{transform:scale(1.07);filter:none}

/* 05 Chapters. */
.ip-chapters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ip-chapters li{position:relative;overflow:hidden;padding:26px 24px 24px;min-height:200px;background:linear-gradient(160deg,#141c3a,#0a1024);border:1px solid var(--ip-line);isolation:isolate}
.ip-chapters b{position:absolute;right:-4px;bottom:-26px;z-index:-1;font-family:var(--ip-display);font-weight:400;font-size:132px;line-height:1;color:transparent;-webkit-text-stroke:1.5px #ff4fb85e}
.ip-chapters span{display:inline-block;padding:0 8px;background:var(--ip-pink);color:#05081a;font-size:12px;font-weight:700;letter-spacing:.1em}
.ip-chapters strong{display:block;margin-top:12px;font-family:var(--ip-display);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:.03em}
.ip-chapters em{display:block;margin-top:6px;font-style:normal;font-size:12px;color:var(--ip-muted)}
.ip-chapters p{margin:12px 0 0;font-family:var(--ip-mincho);font-weight:800;font-size:15.5px}
.ip-chapters .final{grid-column:1/-1;min-height:0;padding:34px 36px;border-color:#8a5a2c;background:linear-gradient(110deg,#2a1d12,#10172f 70%)}
.ip-chapters .final b{-webkit-text-stroke-color:#e8c27a66;font-size:150px;bottom:-34px}
.ip-chapters .final span{background:var(--ip-gold)}.ip-chapters .final strong{color:var(--ip-gold);font-size:44px}
.ip-chapters .final p{max-width:640px;font-size:17px}

/* 06 Movie. */
.ip-yt{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ip-yt .main{grid-column:1/-1}
.ip-yt a,.ip-yt-card{display:flex;flex-direction:column;height:100%;background:#0e1530;border:1px solid var(--ip-line);color:var(--ip-text)!important;text-decoration:none;position:relative;transition:border-color .2s,box-shadow .2s}
.ip-yt a:hover{border-color:#ff5a7a;box-shadow:0 0 30px #ff003344}
.ip-yt-thumb{position:relative;display:block;overflow:hidden}
.ip-yt-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s}
.ip-yt a:hover .ip-yt-thumb img{transform:scale(1.05)}
.ip-yt-play{position:absolute;left:50%;top:50%;width:72px;height:72px;translate:-50% -50%;border-radius:50%;background:#000a;border:2px solid #fff;box-shadow:0 0 24px #ff4fb8aa}
.ip-yt-play::after{content:"";position:absolute;left:29px;top:22px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff}
.ip-yt li:not(.main) .ip-yt-play{width:52px;height:52px}.ip-yt li:not(.main) .ip-yt-play::after{left:20px;top:15px;border-width:10px 0 10px 16px}
.ip-yt-tag{position:absolute;top:12px;left:12px;padding:2px 10px;background:#ff0033;color:#fff;font-family:var(--ip-display);font-size:13px;letter-spacing:.14em}
.ip-yt strong{display:block;padding:16px 18px 2px;font-size:17px}.ip-yt .main strong{font-size:21px}
.ip-yt small{display:block;padding:0 18px 18px;color:var(--ip-muted);font-size:13px;line-height:1.7}
.ip-yt-cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
/* The anime tile: not out yet. */
.ip-yt .soon .ip-yt-thumb img{filter:grayscale(.5) brightness(.45) blur(1px)}
.ip-yt-soon{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ip-display);font-size:clamp(26px,3vw,38px);letter-spacing:.08em;color:#fff;text-shadow:0 0 18px #ff3fb4,0 0 2px #ff3fb4;transform:skewX(-7deg)}
.ip-yt-play.list::after{left:50%;top:50%;width:22px;height:16px;translate:-50% -50%;border:0;background:linear-gradient(#fff 0 0) 0 0/100% 2px no-repeat,linear-gradient(#fff 0 0) 0 7px/100% 2px no-repeat,linear-gradient(#fff 0 0) 0 14px/60% 2px no-repeat}
.ip-yt li:not(.main) .ip-yt-play.list::after{left:50%;top:50%}
/* Theme song: a play button over the MV picture, the title, a seek bar; an equaliser dances while it plays. */
.ip-song{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;margin:0 0 22px;padding:22px 26px;overflow:hidden;isolation:isolate;border:1px solid #ff4fb866;background:linear-gradient(100deg,#05081af2 30%,#05081ab3),#0a1026;box-shadow:0 0 30px #ff3fb41f}
.ip-song-art{position:absolute;inset:0;z-index:-1;width:100%;height:100%!important;object-fit:cover;object-position:50% 30%;opacity:.5}
.ip-song-play{display:grid;place-items:center;width:84px;height:84px;padding:0;border-radius:50%;border:2px solid #fff;background:radial-gradient(circle at 50% 35%,#ff63c4,#c2187a 75%);color:#fff;cursor:pointer;box-shadow:0 0 0 5px #ff4fb833,0 0 28px #ff3fb488;transition:transform .2s}
.ip-song-play:hover{transform:scale(1.06)}
.ip-song-icon{position:relative;display:block;width:22px;height:24px}
.ip-song-icon::before{content:"";position:absolute;left:5px;top:0;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent currentColor}
.is-playing .ip-song-icon::before{left:3px;top:1px;width:6px;height:22px;border:0;background:currentColor;box-shadow:10px 0 0 currentColor}
.ip-song-en{margin:0;font-family:var(--ip-display);font-size:14px;letter-spacing:.24em;color:var(--ip-pink)}
.ip-song-title{margin:2px 0 0;font-family:var(--ip-mincho);font-weight:800;font-size:clamp(20px,2.4vw,30px);line-height:1.4;letter-spacing:.06em}
.ip-song-sub{margin:2px 0 0;font-size:13px;color:#c9d4ea}
.ip-song-bar{display:flex;align-items:center;gap:14px;margin-top:12px;max-width:560px}
.ip-song-bar[hidden]{display:none}
.ip-song-seek{flex:1;height:22px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;--p:0%}
.ip-song-seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ip-pink) var(--p),#ffffff33 var(--p))}
.ip-song-seek::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ip-pink) var(--p),#ffffff33 var(--p))}
.ip-song-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--ip-pink)}
.ip-song-seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--ip-pink)}
.ip-song-time{font-family:var(--ip-display);font-size:13px;letter-spacing:.08em;color:#dfe6f5;font-variant-numeric:tabular-nums;white-space:nowrap}
.ip-song-audio{display:block;width:100%;max-width:420px;margin-top:10px}.js .ip-song-audio{display:none}
.ip-song-eq{display:flex;align-items:flex-end;gap:4px;height:34px}
.ip-song-eq i{width:5px;height:20%;background:var(--ip-pink);box-shadow:0 0 8px var(--ip-pink);border-radius:1px}
.song-on .ip-song-eq i{animation:ip-eq .9s ease-in-out infinite alternate}
.ip-song-eq i:nth-child(2){animation-delay:-.3s!important}.ip-song-eq i:nth-child(3){animation-delay:-.6s!important}.ip-song-eq i:nth-child(4){animation-delay:-.15s!important}.ip-song-eq i:nth-child(5){animation-delay:-.45s!important}
@keyframes ip-eq{0%{height:15%}50%{height:100%}100%{height:40%}}
/* The key visual's button, and the mini player at the bottom left while the song plays out of view. */
.ip-kv-song{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 18px 8px 10px;border:1px solid #ff4fb8aa;border-radius:999px;background:#05081acc;color:#fff;font:inherit;font-size:13.5px;font-weight:700;letter-spacing:.06em;cursor:pointer;animation:ip-up 1s 1.4s both}
.ip-kv-song .ip-song-icon{width:30px;height:30px;border-radius:50%;background:var(--ip-pink)}
.ip-kv-song .ip-song-icon::before{left:11px;top:8px;border-width:7px 0 7px 11px}
.ip-kv-song.is-playing .ip-song-icon::before{left:10px;top:9px;width:4px;height:12px;box-shadow:6px 0 0 currentColor}
.ip-kv-song:hover{border-color:#fff}
.ip-kv-song[hidden],.ip-song-play[hidden]{display:none}
.ip-song-mini{position:fixed;left:16px;bottom:18px;z-index:40;display:none;align-items:center;gap:10px;padding:8px 10px 8px 14px;border:1px solid var(--ip-pink);border-radius:999px;background:#05081af2;color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 0 18px #ff3fb455}
.song-mini .ip-song-mini{display:flex;animation:ip-up .4s both}
.ip-song-mini .ip-song-eq{height:18px;gap:2px}.ip-song-mini .ip-song-eq i{width:3px}
.ip-song-mini .ip-song-icon{width:26px;height:26px;border-radius:50%;background:var(--ip-pink)}
.ip-song-mini .ip-song-icon::before{left:9px;top:7px;border-width:6px 0 6px 10px}
.ip-song-mini.is-playing .ip-song-icon::before{left:8px;top:7px;width:4px;height:12px;box-shadow:6px 0 0 currentColor}
.ip-button.xbtn{background:#0d1222;border-color:#3a4f70}.ip-button.xbtn:hover{border-color:#cfd8ea}

/* 07 Production. */
.ip-media{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ip-media article{padding:26px 24px;background:linear-gradient(160deg,#16163a,#0a1024);border:1px solid var(--ip-line);border-top:2px solid var(--ip-cyan)}
.ip-media-tag{margin:0 0 8px;font-family:var(--ip-display);font-size:14px;letter-spacing:.16em;color:var(--ip-cyan)}
.ip-media h3{margin:0;font-size:19px;line-height:1.5}.ip-media p:last-child{font-size:14px;margin:10px 0 0}
.ip-subhead{margin:64px 0 20px;font-size:20px;letter-spacing:.1em}
.ip-materials{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ip-materials li{padding:16px 18px;background:#0e1530;border:1px solid var(--ip-line);border-left:3px solid var(--ip-pink);font-size:14px;line-height:1.8}
.ip-materials strong{display:block;color:var(--ip-gold);font-size:13px;letter-spacing:.08em}

/* 08 Contact. */
.ip-contact-box{position:relative;padding:56px 48px;text-align:center;background:radial-gradient(ellipse at 50% 0,#3a1240 0,transparent 60%),#0a1026;border:1px solid #ff4fb877;box-shadow:0 0 40px #ff3fb422,inset 0 0 60px #ff3fb411}
.ip-contact-box .ip-head{display:flex;flex-direction:column;align-items:center}.ip-contact-box .ip-head-en{transform:skewX(-7deg)}
.ip-contact-box .ip-head h2::after{content:"";width:46px;height:2px;background:var(--ip-cyan);box-shadow:0 0 12px var(--ip-cyan)}
.ip-mail{margin:30px 0 10px}
.ip-en{margin:28px auto 0;max-width:780px;padding:22px 26px;border:1px solid var(--ip-line);font-size:14px;line-height:1.8}.ip-en h3{margin:0;font-family:var(--ip-display);font-weight:400;font-size:18px;letter-spacing:.12em;color:var(--ip-cyan)}.ip-en p{margin:8px 0 0}

/* Footer. */
.ip-footer{background:#000;padding:56px 32px 40px;text-align:center;color:var(--ip-muted);font-size:12.5px}
.ip-footer-logo{display:inline-block;line-height:0}.ip-footer-logo img{height:120px;width:auto;margin:0 auto;filter:drop-shadow(0 0 16px #ff2fb066)}
.ip-footer-sns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:28px 0 0}
.ip-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:30px 0 0}.ip-footer-links a{color:#c9d4ea}
.ip-footer-note{margin:18px 0 0}
.ip-footer-copy{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 0}.ip-footer-copy img{width:28px;height:28px;border-radius:6px}
/* PAGE TOP is a poker chip: white inserts round a pink edge, a dashed inner ring, the words in the middle. */
.ip-pagetop{position:fixed;right:18px;bottom:18px;z-index:40;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;color:#fff!important;text-decoration:none;filter:drop-shadow(0 8px 12px #000b) drop-shadow(0 0 14px #ff3fb455);transition:opacity .4s,transform .4s}
.ip-chip-edge{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -7deg,#f6f1e7 0 14deg,#d91d82 14deg 45deg);box-shadow:inset 0 0 0 2px #7a0e47,inset 0 -3px 0 4px #0000001f;transition:transform .7s cubic-bezier(.2,.75,.2,1)}
.ip-chip-face{position:absolute;inset:11px;display:grid;place-content:center;border-radius:50%;background:radial-gradient(circle at 50% 30%,#ff63c4,#c2187a 72%);box-shadow:0 0 0 2px #f6f1e7,0 0 0 4px #7a0e47;font-family:var(--ip-display);font-size:11px;line-height:1.1;letter-spacing:.12em;text-align:center;text-shadow:0 1px 0 #7a0e47}
.ip-chip-face::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px dashed #ffffffb3}
.ip-chip-face b{display:block;font-weight:400;font-size:10px;line-height:1;margin-bottom:1px}
.ip-pagetop:hover .ip-chip-edge{transform:rotate(135deg)}.ip-pagetop:hover{transform:translateY(-3px)}
.js:not(.is-scrolled) .ip-pagetop{opacity:0;transform:translateY(12px);pointer-events:none}

/* Sections rise in as they scroll into view (ip.js adds .js and .is-in). */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.75,.2,1),transform .9s cubic-bezier(.2,.75,.2,1)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js .ip-head[data-reveal]{transform:translateX(-30px)}.js .ip-head[data-reveal].is-in{transform:none}

@keyframes ip-fade{from{opacity:0}}
@keyframes ip-up{from{opacity:0;transform:translateY(24px)}}
@keyframes ip-rise{from{opacity:0;transform:translateY(7%)}}
@keyframes ip-slide{from{opacity:0;transform:translateX(-40px)}}
@keyframes ip-zoom{from{transform:scale(1.08)}}
@keyframes ip-marquee{to{transform:translateX(-50%)}}
@keyframes ip-scroll{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes ip-flicker{0%{opacity:0}8%{opacity:.9}10%{opacity:.2}14%{opacity:1}17%{opacity:.35}21%,100%{opacity:1}}

/* Tablets and narrow windows. */
@media (max-width:1000px){
 .ip-story-grid{grid-template-columns:1fr;gap:36px}
 .ip-points,.ip-media,.ip-materials{grid-template-columns:1fr 1fr}
 .ip-chapters{grid-template-columns:1fr 1fr}
 .ip-chara-panel{gap:24px}.ip-chara-art{height:520px}
}

/* The English page (/ip/en/): Latin text needs less tracking, and the ward names run across like signs. */
html[lang=en] .ip-head h2{letter-spacing:.05em}
html[lang=en] .ip-logline{letter-spacing:.01em;line-height:1.85}
html[lang=en] .ip-chara-text h3,html[lang=en] .ip-chara-text blockquote,html[lang=en] .ip-song-title,html[lang=en] .ip-chapters p{letter-spacing:.02em}
html[lang=en] .ip-wards span{writing-mode:horizontal-tb;padding:4px 7px 3px;font-family:var(--ip-display);font-weight:400;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.ip-song-alt{display:block;font-size:.55em;letter-spacing:.1em;color:#c9d4ea}

/* Portrait screens (phones): the key visual becomes a 9:16 poster over the rainy street. */
@media (max-aspect-ratio:4/5){
 .ip-kv{min-height:600px}
 .ip-kv-bg::after{background:linear-gradient(180deg,#05081ab3 0,#05081a00 18%,#05081a00 52%,#05081ae0 80%,#05081a 100%)}
 .ip-kv-cast{left:0;right:0;width:auto;height:72%;bottom:0}
 .ip-fig.ren{height:80%}
 .ip-fig.reina,.ip-fig.kaito{height:60%;bottom:22%;-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 28%);mask-image:linear-gradient(0deg,transparent 0,#000 28%)}
 .ip-fig.reina{left:-6%}
 .ip-fig.kaito{right:-6%}
 .ip-kv-copy{position:absolute;inset:0;width:auto;pointer-events:none}
 .ip-kv-copy>*{pointer-events:auto}
 /* The logo sits top left, under the header row and opposite the vertical catch, clear of the three faces. */
 .ip-kv-title{position:absolute;left:12px;top:68px}
 .ip-kv-title img{width:min(54vw,300px,30svh)}
 .ip-kv-catch{position:absolute;top:clamp(84px,13svh,104px);right:16px;margin:0;writing-mode:vertical-rl;font-size:clamp(22px,min(6.6vw,3.9svh),38px);line-height:1.6;letter-spacing:.16em}
 .ip-kv-tag{position:absolute;left:18px;bottom:82px;margin:0;font-size:14px;letter-spacing:.34em}
 .ip-kv-studio{position:absolute;left:18px;right:70px;bottom:26px;margin:0;font-size:12px;line-height:1.6}
 .ip-kv-studio span{display:block;width:max-content;margin:0 0 4px}
 /* One way into the game on the visual: a pink pill opposite the theme-song button (the production link is in the menu). */
 .ip-kv-actions{position:absolute;right:16px;bottom:112px;margin:0;animation:none}
 .ip-kv-actions .primary{display:none}
 .ip-kv-actions .ip-button{min-height:44px;padding:8px 20px;border:0;border-radius:999px;background:linear-gradient(135deg,#ff4fb8,#9b4dff);font-size:13px;box-shadow:0 6px 18px #ff4fb855}
 @media (max-width:400px){html[lang=en] .ip-kv-actions{right:auto;left:16px;bottom:166px}}
 .ip-kv-song{position:absolute;left:16px;bottom:112px;margin:0;padding:5px 14px 5px 5px;font-size:12.5px;animation:none}
 .ip-kv-scroll{left:auto;right:16px;translate:none;writing-mode:vertical-rl;font-size:12px}
 .ip-kv-scroll::after{height:46px}
}

/* Phones. */
@media (max-width:640px){
 body.ip-page{font-size:14px}
 .ip-top{padding-left:12px}
 .ip-top-logo img{height:44px}.ip-top-logo{margin-top:12px}
 .ip-top-right{gap:8px}
 .ip-top-icon{width:40px;height:40px;margin-top:12px}
 .ip-lang{height:40px;margin-top:12px}.ip-lang a{min-width:34px;padding:0 6px;font-size:13px}
 .ip-menu-btn,.ip-menu-close{width:64px;height:64px;font-size:12px;gap:8px}
 .ip-menu-bars,.ip-menu-bars::before,.ip-menu-bars::after{width:24px}.ip-menu-bars::before{top:-7px}.ip-menu-bars::after{top:7px}
 .ip-menu-inner{padding:84px 22px 48px}
 .ip-menu-list{grid-template-columns:1fr}
 .ip-menu-list a{flex-wrap:wrap;gap:0 14px;padding:12px 0}
 .ip-menu-list span{flex-basis:100%;padding-left:32px;font-size:12px;line-height:1.5}
 .ip-section{padding:88px 18px 0}
 .ip-head{margin-bottom:30px}
 .ip-head-en{font-size:clamp(50px,15vw,74px)}
 .ip-logline{padding-left:14px;font-size:17px}
 .ip-facts>div{grid-template-columns:1fr;gap:0}
 .ip-world{margin-top:96px;padding:90px 18px}
 .ip-world::before{background:linear-gradient(180deg,#05081a 0,#05081ad9 25%,#05081ae6 100%)}
 .ip-world-lead{font-size:15px}
 .ip-points,.ip-media,.ip-materials,.ip-chapters{grid-template-columns:1fr}
 .ip-chara-tabs{margin-bottom:20px}
 .ip-chara-tab{width:68px;font-size:11px}.ip-chara-tab img{width:58px;height:58px}
 .ip-chara-panel{grid-template-columns:1fr;gap:6px;min-height:0}
 .ip-chara-art{height:min(108vw,470px)}
 .rival .ip-chara-art{height:auto}
 .ip-chara-en{font-size:clamp(44px,14vw,70px);margin-bottom:10px}
 .ip-chara-text h3{font-size:34px}
 .ip-chara-text blockquote{font-size:16px}
 .ip-wards{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .ip-wards li::before{font-size:19px;top:3px;right:6px}
 .ip-wards span{top:6px;left:6px;writing-mode:horizontal-tb;font-size:10px;padding:2px 5px;letter-spacing:.06em}
 .ip-wards li{padding:0 4px 5px 7px}
 .ip-wards strong{font-size:14px}
 .ip-wards small{margin-top:0;font-size:9.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .ip-chapters li{min-height:0}.ip-chapters .final{padding:26px 22px}.ip-chapters .final strong{font-size:36px}
 .ip-yt{grid-template-columns:1fr}
 .ip-song{grid-template-columns:auto 1fr;gap:16px;padding:18px 16px}.ip-song .ip-song-eq{display:none}
 .ip-song-play{width:64px;height:64px}
 .ip-song-bar{gap:10px}.ip-song-time{font-size:12px}
 .ip-song-mini{left:12px;bottom:14px}
 .ip-contact-box{padding:44px 20px}
 .ip-button.big{padding:14px 22px;font-size:15px}
 .ip-marquee.foot{margin-top:72px}
 .ip-footer{padding:44px 18px 96px}.ip-footer-logo img{height:96px}
 .ip-pagetop{width:62px;height:62px;right:12px;bottom:12px}.ip-chip-face{inset:9px;font-size:9.5px}.ip-chip-face b{font-size:8px}
}
@media (min-width:641px){body.ip-page{font-family:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .js [data-reveal]{opacity:1;transform:none}
 .ip-kv-rain{display:none}
}
/* Contact: sponsors and partner venues wanted. */
.ip-recruit{max-width:860px;margin:30px auto 8px;text-align:left}
.ip-recruit h3{text-align:center;font-size:18px;letter-spacing:.06em;margin:0 0 16px;color:#fff}
.ip-recruit ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ip-recruit li{padding:18px 20px;background:#05081abf;border:1px solid #ffffff1f;border-top:2px solid var(--ip-gold)}
.ip-recruit strong{display:block;color:var(--ip-gold);font-size:15px;letter-spacing:.08em}
.ip-recruit li p{margin:8px 0 10px;font-size:14px;line-height:1.8}
.ip-recruit li a{font-size:13px;font-weight:600}
.ip-recruit .ip-note{text-align:center;margin-top:14px}
@media(max-width:700px){.ip-recruit ul{grid-template-columns:1fr}.ip-recruit h3{font-size:15.5px;letter-spacing:.02em}}
/* Characters on phones: swipe sideways (ip.js); the panel slides in from the side it came from. */
.ip-chara-swipe{display:none}
@media (max-width:640px){
 .ip-chara{touch-action:pan-y;overflow-x:clip}
 .ip-chara-swipe{display:flex;justify-content:center;align-items:center;gap:10px;margin:18px 0 0;font-size:12px;letter-spacing:.06em;color:var(--ip-muted)}
 .ip-chara-swipe b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
 .ip-chara-panel.is-active[data-from=right] .ip-chara-art img,.ip-chara-panel.is-active[data-from=right] .ip-chara-text{animation:ip-swipe-r .45s cubic-bezier(.2,.75,.2,1) both}
 .ip-chara-panel.is-active[data-from=left] .ip-chara-art img,.ip-chara-panel.is-active[data-from=left] .ip-chara-text{animation:ip-swipe-l .45s cubic-bezier(.2,.75,.2,1) both}
}
@keyframes ip-swipe-r{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes ip-swipe-l{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ip-chara-panel.is-active[data-from] .ip-chara-art img,.ip-chara-panel.is-active[data-from] .ip-chara-text{animation:none}}
/* The video player over the page (ip.js, links with data-video). */
.ip-video{width:min(1100px,calc(100vw - 32px));max-width:none;padding:0;border:1px solid #ff4fb877;background:#000;color:#fff;box-shadow:0 0 60px #ff3fb455;overflow:visible}
.ip-video::backdrop{background:#03050ee6;backdrop-filter:blur(4px)}
.ip-video-frame{aspect-ratio:16/9}
.ip-video-frame iframe{display:block;width:100%;height:100%;border:0}
.ip-video-close{position:absolute;top:-46px;right:-2px;width:40px;height:40px;border:1px solid #ffffff55;border-radius:50%;background:#0a1026;color:#fff;font-size:24px;line-height:1;cursor:pointer}
.ip-video-close:hover,.ip-video-close:focus-visible{border-color:var(--ip-pink);outline:none;box-shadow:0 0 14px #ff3fb488}
html.ip-video-open{overflow:hidden}