/* GEMAY · CI journey: named stations, characters and a quiet brand guide. */
:root{--ci-ink:#4b315e;--ci-copy:#786484;--ci-line:#e4d8ec;--ci-purple:#7040aa;--ci-green:#91a936}
.ci-guide{position:relative;overflow:hidden;padding:17px 14px 14px;border:1px solid #e2d8e9;border-radius:18px;background:linear-gradient(145deg,#fffefa 44%,#f4eef9);box-shadow:0 4px 15px #4c315f05}
.ci-guide:before{content:'';position:absolute;right:-27px;top:-24px;width:87px;height:87px;border:1px solid #dce7a881;border-radius:50%;pointer-events:none}
.ci-guide-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;position:relative}
.ci-guide-heading .eyebrow{font-size:7.5px;letter-spacing:1.1px;color:#8e759e;line-height:1.5;white-space:nowrap}
.ci-guide-heading button{min-height:32px;padding:0 3px;background:none;border:0;color:#73548b;font-size:9px;white-space:nowrap;border-radius:5px;font-weight:500}
.ci-guide-heading button:hover{color:#522677;background:#eee4f6}
.ci-guide h2{font-size:14px;line-height:1.5;font-weight:700;letter-spacing:.3px;color:#54316b;margin:9px 0 7px;position:relative}
.ci-guide-copy{font-size:10px;line-height:1.8;color:#8e7a99;margin:0 0 12px;max-width:25em;position:relative}
.ci-station-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;position:relative}
.ci-chip{display:flex;align-items:center;gap:6px;min-width:0;min-height:44px;padding:7px 7px;border:1px solid #e5dced;border-radius:9px;background:linear-gradient(#fffefa,#faf6fd);color:#70517f;box-shadow:0 2px 0 #e6d9ee44;text-align:left;font-size:9px;line-height:1.45;font-weight:500;transition:background .16s,border-color .16s,transform .16s}
.ci-chip i{display:grid;place-items:center;width:23px;height:24px;flex:none;border-radius:7px;background:#efe6f6;color:#7b4b9d;font-size:13px;font-style:normal;font-weight:800;border:1px solid #e4d5ef;box-shadow:inset 0 1px #fff}
.ci-chip span{min-width:0;overflow-wrap:anywhere}
.ci-chip:nth-child(4n+2) i{background:#f0f4d9;color:#829a2c;border-color:#e0e8bc}
.ci-chip:nth-child(4n+3) i{background:#eee4f8;color:#80519e;border-color:#e0cdec}
.ci-chip:nth-child(4n) i{background:#f4eee2;color:#9b7d44;border-color:#e9deca}
.ci-chip:hover{border-color:#b89ace;background:#f5edf9;transform:translateY(-1px)}
.ci-chip:active{transform:translateY(1px);box-shadow:none}
.ci-chip.active{border-color:#ad8cc7;background:#eee1f7;color:#5f347d;box-shadow:inset 2px 0 #8c60ae}
.ci-guide button:focus-visible,.ci-modal button:focus-visible,.ci-directory summary:focus-visible{outline:3px solid #b9cf48;outline-offset:3px}
.ci-arrival{margin-top:13px;padding:11px 11px 10px;position:relative;border:1px solid #e2dbeb;border-radius:10px;background:linear-gradient(110deg,#f1e8f8,#f8faed);box-shadow:inset 3px 0 #b3c94f}
.ci-arrival>span{font-size:8px;line-height:1.5;letter-spacing:.8px;color:#9b86a8;display:block;margin-bottom:4px}
.ci-arrival strong{font-size:12px;font-weight:700;color:#654080;line-height:1.5;display:block}
.ci-arrival p{font-size:9px;line-height:1.8;color:#887493;margin:5px 0 0;overflow-wrap:anywhere}
.ci-arrival:empty{display:none}
.character-mark{display:grid;place-items:center;line-height:1;font-weight:800;font-family:'Noto Sans SC','Microsoft YaHei',sans-serif;letter-spacing:0}
.player-avatar .character-mark,.player-avatar.character-mark{font-size:16px;color:#fff;text-shadow:0 1px 1px #41275333}
.turn-avatar .character-mark,.turn-avatar.character-mark{font-size:20px;font-weight:800;text-shadow:0 1px #fff}
.color-choice i .character-mark,.color-choice i.character-mark{font-size:19px;color:#fff;text-shadow:0 1px 0 #3d294b2b}
.color-choice .character-name{display:block;font-size:11px;font-weight:700;line-height:1.4;white-space:nowrap;color:inherit}
.color-choice .character-role{display:block;font-size:7px;font-weight:400;line-height:1.5;color:#9e8ba9;white-space:normal;max-width:7em;margin-top:-5px;text-align:center}
.color-choice input:checked+span .character-role{color:#90769f}
.ci-station-label{cursor:pointer;outline:none;transition:filter .16s}
.ci-station-label:hover,.ci-station-label:focus-visible{filter:drop-shadow(0 2px 3px #63378729)}
.ci-station-label:focus-visible rect{stroke:#839b2c!important;stroke-width:2.3!important}
.route-cell.ci-key-station{cursor:pointer}
.route-cell.ci-key-station:focus-visible{outline:none;filter:drop-shadow(0 0 4px #9db62a99)}
.ci-modal{width:min(548px,calc(100vw - 28px));padding:34px 33px 29px;background:linear-gradient(150deg,#fffefa 55%,#f6f1fa);color:var(--ci-ink)}
.ci-modal-head{display:flex;align-items:center;gap:16px;margin:4px 0 22px;padding-right:14px}
.ci-logo-crop{position:relative;display:block;width:64px;height:64px;overflow:hidden;flex:none;mix-blend-mode:multiply;border-radius:5px}
.ci-logo-crop img{position:absolute;width:184px;max-width:none;left:-58px;top:-40px}
.ci-modal-head .eyebrow{font-size:8px;letter-spacing:1.2px;color:#9881a6;line-height:1.7;display:block;margin:0 0 7px}
.ci-modal .ci-modal-head h2{font-size:25px;line-height:1.35;margin:0;color:#4f2c68;font-weight:700;letter-spacing:.5px}
.ci-topic{display:inline-flex;align-items:center;min-height:26px;padding:4px 9px;background:#eee4f6;border:1px solid #e1d2ec;border-radius:7px;color:#79518f;font-size:10px;line-height:1.5;font-weight:500;margin:0 0 12px}
#ciStationDescription{font-size:13px;line-height:1.95;color:#766181;letter-spacing:.1px;margin:0 0 18px;overflow-wrap:anywhere}
.ci-game-note{font-size:11px;line-height:1.85;color:#8d7b53;border:1px solid #e4e8c9;background:linear-gradient(105deg,#f3f6e5,#faf9ec);border-radius:10px;padding:12px 13px;margin:0 0 18px}
.ci-game-note strong{color:#7b8b3c;font-weight:600}
.ci-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:2px;margin:0 0 22px}
.ci-nav button,.ci-nav-prev,.ci-nav-next,#ciPrevButton,#ciNextButton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:110px;padding:10px 13px;border:1px solid #d8c5e5;border-radius:10px;background:linear-gradient(#fffefa,#f4eafc);box-shadow:0 2px 0 #e2d2ed7a;color:#7c4e98;font-size:11px;font-weight:500;line-height:1.4;transition:background .16s,border-color .16s,transform .16s}
.ci-nav button:hover,.ci-nav-prev:hover,.ci-nav-next:hover,#ciPrevButton:hover,#ciNextButton:hover{background:#efe2f9;border-color:#ae8bc6}
.ci-nav button:active,.ci-nav-prev:active,.ci-nav-next:active,#ciPrevButton:active,#ciNextButton:active{transform:translateY(1px);box-shadow:none}
.ci-nav>span{font-size:10px;color:#9d87aa;text-align:center;white-space:nowrap}
.ci-directory{border-top:1px solid #e6ddec;padding-top:14px}
.ci-directory summary{font-size:11px;line-height:1.7;color:#7d5d90;font-weight:500;cursor:pointer;padding:8px 2px;min-height:36px;border-radius:5px;list-style-position:inside}
.ci-directory[open] summary{margin-bottom:9px;color:#60377b}
.ci-directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:260px;overflow:auto;padding:2px 4px 4px 1px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c7b5d3 #f2ecf7}
.ci-directory-grid button{display:flex;align-items:center;gap:6px;min-width:0;min-height:44px;padding:8px 7px;border:1px solid #e6ddec;border-radius:8px;background:#fcfafc;text-align:left;color:#8d759a;font-size:10px;line-height:1.45}
.ci-directory-grid button b{font-family:Arial,sans-serif;font-weight:500;font-size:9px;color:#b5a1bf;flex:none;min-width:15px}
.ci-directory-grid button span{min-width:0;overflow-wrap:anywhere}
.ci-directory-grid button:hover{border-color:#b59aca;background:#f3eaf9;color:#6e4287}
.ci-directory-grid button.is-key{border-color:#d3c0e0;background:#f4ebfb;color:#77508e;font-weight:600}
.ci-directory-grid button.is-key b{color:#a180b6}
.ci-directory-grid button.active{background:#e9ddf4;border-color:#ac88c5;color:#5b2d78;box-shadow:inset 2px 0 #8e60ae}
.ci-disclaimer{font-size:9px;line-height:1.8;color:#a18cae;margin:18px 0 0;letter-spacing:.1px}
.ci-modal .close-modal{width:36px;height:36px;right:12px;top:12px}
@media(max-width:1100px) and (min-width:801px){
  .ci-guide{padding:15px 11px 12px;border-radius:17px}
  .ci-guide-heading .eyebrow{font-size:7px;letter-spacing:.8px}
  .ci-guide-heading button{font-size:8px}
  .ci-guide h2{font-size:13px}
  .ci-guide-copy{font-size:9px}
  .ci-chip{font-size:8px;padding:7px 5px;gap:5px}
  .ci-chip i{width:21px;height:23px;font-size:12px}
  .player-avatar .character-mark{font-size:14px}
}
@media(max-width:800px){
  .ci-guide{margin-top:10px;width:100%;padding:15px 14px 13px;border-radius:16px}
  .ci-guide-heading .eyebrow{font-size:8px;letter-spacing:1.3px}
  .ci-guide-heading button{min-height:36px;padding:0 5px;font-size:10px}
  .ci-guide h2{font-size:15px;margin:7px 0 5px}
  .ci-guide-copy{font-size:10px;max-width:none;margin-bottom:12px;line-height:1.8}
  .ci-station-chips{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .ci-chip{min-height:63px;display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:center;padding:8px 3px;font-size:9px;border-radius:10px}
  .ci-chip i{width:25px;height:25px;border-radius:7px;font-size:14px}
  .ci-chip span{white-space:normal;line-height:1.45}
  .ci-arrival{margin-top:12px;padding:11px 12px;display:grid;grid-template-columns:auto 1fr;gap:4px 9px;align-items:center}
  .ci-arrival>span{font-size:8px;margin:0;letter-spacing:.4px}
  .ci-arrival strong{font-size:12px;line-height:1.6}
  .ci-arrival p{grid-column:1/-1;font-size:10px;margin:2px 0 0;line-height:1.75}
  .player-avatar .character-mark,.player-avatar.character-mark{font-size:15px}
  .turn-avatar .character-mark,.turn-avatar.character-mark{font-size:18px}
  .ci-modal{padding:31px 25px 25px;width:min(548px,calc(100vw - 26px))}
  .ci-modal-head{gap:13px;margin:5px 0 18px}
  .ci-modal .ci-modal-head h2{font-size:23px;letter-spacing:.3px}
  #ciStationDescription{font-size:12px;line-height:1.95;margin-bottom:16px}
  .ci-game-note{font-size:10px;line-height:1.85;padding:11px 12px;margin-bottom:16px}
  .ci-nav{margin-bottom:19px}
  .ci-nav button,.ci-nav-prev,.ci-nav-next,#ciPrevButton,#ciNextButton{font-size:10px;min-width:100px;padding:10px 12px}
  .ci-directory-grid{gap:6px;max-height:260px}
  .ci-directory-grid button{font-size:10px;padding:8px 6px;gap:4px}
  .ci-directory-grid button b{font-size:8px;min-width:14px}
}
@media(max-width:440px){
  .ci-guide{padding:12px 11px 12px;border-radius:14px}
  .ci-guide-heading .eyebrow{font-size:7px;letter-spacing:1.1px}
  .ci-guide-heading button{font-size:9px;min-height:34px}
  .ci-guide h2{font-size:14px;margin-top:5px}
  .ci-guide-copy{font-size:9px;line-height:1.8;margin-bottom:10px}
  .ci-station-chips{gap:5px}
  .ci-chip{font-size:8px;min-height:61px;padding:7px 2px;gap:5px;border-radius:9px}
  .ci-chip i{width:23px;height:24px;font-size:13px}
  .ci-arrival{padding:10px;gap:4px 7px}
  .ci-arrival strong{font-size:11px}
  .ci-arrival p{font-size:9px}
  .player-avatar .character-mark,.player-avatar.character-mark{font-size:14px}
  .color-choice .character-name{font-size:10px}
  .color-choice .character-role{font-size:6.5px;line-height:1.5;max-width:6em;margin-top:-4px}
  .color-choice i .character-mark,.color-choice i.character-mark{font-size:18px}
  .ci-modal{padding:31px 20px 23px;border-radius:20px}
  .ci-modal-head{gap:11px;padding-right:6px;margin:3px 0 17px}
  .ci-logo-crop{width:53px;height:53px}
  .ci-logo-crop img{width:153px;left:-48px;top:-33px}
  .ci-modal .ci-modal-head h2{font-size:21px;line-height:1.4}
  .ci-modal-head .eyebrow{font-size:7px;letter-spacing:1px;margin-bottom:5px}
  .ci-topic{font-size:9px;padding:4px 8px;min-height:24px;margin-bottom:10px}
  #ciStationDescription{font-size:12px;line-height:1.9;margin-bottom:14px}
  .ci-game-note{font-size:10px;padding:10px 11px;border-radius:9px}
  .ci-nav{gap:8px;margin-bottom:17px}
  .ci-nav button,.ci-nav-prev,.ci-nav-next,#ciPrevButton,#ciNextButton{font-size:10px;min-width:91px;padding:10px 9px;border-radius:9px}
  .ci-nav>span{font-size:9px}
  .ci-directory summary{font-size:10px;min-height:36px}
  .ci-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:256px;gap:5px}
  .ci-directory-grid button{font-size:10px;min-height:44px;padding:8px;gap:5px}
  .ci-directory-grid button b{font-size:8px;min-width:16px}
  .ci-disclaimer{font-size:8px;line-height:1.8;margin-top:15px}
}
@media(prefers-reduced-motion:reduce){.ci-chip,.ci-station-label,.ci-nav button,.ci-nav-prev,.ci-nav-next,#ciPrevButton,#ciNextButton{transition:none}.ci-chip:hover,.ci-chip:active,.ci-nav button:active{transform:none}}