@charset "UTF-8";

/* Cool silver editorial layout: separate the three tasks without copying the game UI. */
.phone-page .phone-chapters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:30px; padding-bottom:12px; }
.phone-page .phone-chapters a { position:relative; display:flex; flex-direction:column; padding:18px 0 20px; border-top:1px solid #9ecbd053; }
.phone-page .phone-chapters a::after { content:"↗"; position:absolute; right:2px; top:33px; font-size:20px; color:#9ac5cf; }
.phone-page .phone-chapters span { color:#88b9c6; font-size:10px; letter-spacing:1.7px; }
.phone-page .phone-chapters strong { font-weight:500; color:#d2e6ec; font-size:21px; margin-top:7px; }
.phone-page .phone-chapters small { font-size:12px; color:#8da9bd; margin-top:5px; }
.phone-page .phone-chapters a:hover { border-color:#b6e9ec; }
.phone-page .phone-lock-overview { display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch; border-block:1px solid #98c7d03d; margin-bottom:26px; background:linear-gradient(130deg,#11212e,#0c1621); }
.phone-page .phone-lock-story { padding:30px; }
.phone-page .phone-lock-story h3,.phone-page .phone-password-intro h3 { font-size:26px; line-height:1.6; font-weight:500; margin:12px 0 18px; }
.phone-page .phone-lock-story>p:not(.growth-label) { color:#a6bdce; font-size:14px; }
.phone-page .phone-lock-story .phone-session-note { color:#8da8bc; font-size:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.phone-page .phone-lock-display { padding:24px; border-left:1px solid var(--line); background:#91b6cf04; }
.phone-page .phone-status-line { display:flex; flex-direction:column; gap:4px; border-left:2px solid #96c9d2; padding-left:14px; }
.phone-page .phone-status-line>span { color:#8ba9b9; font-size:10px; letter-spacing:1px; }
.phone-page .phone-status-line>strong { color:#c4e5eb; font-size:14px; font-weight:500; }
.phone-page .phone-status-line p { color:#8da8bc; font-size:11px; margin:0; }
.phone-page .phone-locked-item { display:flex; align-items:center; gap:16px; margin:20px 0 10px; }
.phone-page .phone-item-art { position:relative; flex:0 0 92px; width:92px; height:110px; background:#080f19; border:1px solid #7e9ca132; }
.phone-page .phone-item-art img { width:100%; height:100%; object-fit:contain; }
.phone-page .phone-item-lock { position:absolute; bottom:4px; right:4px; display:grid; place-items:center; width:25px; height:25px; border:1px solid #df8188; background:#4b1e2b; color:#ffc0c1; font-size:12px; }
.phone-page .phone-locked-item figcaption { font-size:13px; color:#d6dfe7; }
.phone-page .phone-locked-item figcaption>span { display:block; font-size:11px; color:#b18d98; margin-top:5px; }
.phone-page .phone-display-note { font-size:10px; color:#849eb1; margin:12px 0 0; }
.phone-page .phone-lock-procedure { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:0; margin:0 0 30px; list-style:none; }
.phone-page .phone-lock-procedure>li { border-bottom:1px solid var(--line); padding-bottom:20px; }
.phone-page .phone-lock-procedure>li>span { color:#9bc9d5; font-size:12px; font-variant-numeric:tabular-nums; }
.phone-page .phone-lock-procedure h3 { font-size:16px; font-weight:500; margin:9px 0; }
.phone-page .phone-lock-procedure p { font-size:12px; color:#96afc1; margin:0; }
.phone-page .phone-lock-limits { margin-top:28px; padding:24px; background:#111c2a; border-top:1px solid #a799c158; }
.phone-page .phone-lock-limits h3 { font-size:17px; font-weight:500; margin-bottom:18px; color:#cecae1; }
.phone-page .phone-lock-limits dl { margin:0; }
.phone-page .phone-lock-limits dl>div { display:grid; grid-template-columns:96px minmax(0,1fr); gap:15px; padding:12px 0; border-bottom:1px solid var(--line); }
.phone-page .phone-lock-limits dl>div:last-child { border:0; padding-bottom:0; }
.phone-page .phone-lock-limits dt { color:#b7aecb; font-size:13px; }
.phone-page .phone-lock-limits dd { margin:0; color:#a4b6c7; font-size:13px; }
.phone-page .phone-password-guide { display:grid; grid-template-columns:.9fr 1.1fr; gap:35px; padding:30px; border-top:1px solid #98c7d04f; background:linear-gradient(150deg,#132230,#0b1521); }
.phone-page .phone-password-intro>p:not(.growth-label) { font-size:13px; color:#9fb6c7; }
.phone-page .phone-password-requirement { display:flex; flex-direction:column; gap:7px; border-left:2px solid #9cc9cf; padding-left:15px; margin-top:25px; }
.phone-page .phone-password-requirement strong { font-size:24px; font-weight:500; color:#b4dce4; }
.phone-page .phone-password-requirement span { font-size:12px; color:#98b2c5; }
.phone-page .phone-password-steps { margin:0; padding:0; list-style:none; }
.phone-page .phone-password-steps>li { display:grid; grid-template-columns:24px minmax(0,1fr); gap:15px; padding:20px 0; border-bottom:1px solid #88adbd26; }
.phone-page .phone-password-steps>li:first-child { padding-top:0; }
.phone-page .phone-password-steps>li:last-child { border-bottom:0; padding-bottom:0; }
.phone-page .phone-password-steps>li>span { font-size:11px; color:#83adbf; margin-top:4px; }
.phone-page .phone-password-steps h3 { font-size:16px; font-weight:500; color:#d3e1ec; margin:0 0 7px; }
.phone-page .phone-password-steps p { font-size:12px; color:#9bb1c4; margin:0 0 10px; }
.phone-page .phone-masked { min-height:35px; color:#99b7ca; font-size:19px; letter-spacing:6px; user-select:none; }
.phone-page .phone-otp { display:flex; gap:6px; letter-spacing:0; }
.phone-page .phone-otp i { display:grid; place-items:center; width:29px; height:34px; font-style:normal; background:#091520; border-bottom:1px solid #88b6c46e; }
.phone-page .phone-password-reminder { display:flex; align-items:baseline; gap:18px; padding:20px 0 0; }
.phone-page .phone-password-reminder>strong { flex-shrink:0; font-size:12px; font-weight:500; color:#acccd8; }
.phone-page .phone-password-reminder p { font-size:12px; color:#8eaabd; margin:0; }
@media(max-width:960px) { .phone-page .phone-lock-overview { grid-template-columns:1.1fr 1fr; } }
@media(max-width:640px) {
 .phone-page .phone-chapters { grid-template-columns:1fr; gap:0; margin-top:14px; }
 .phone-page .phone-chapters a { display:grid; grid-template-columns:105px 1fr; gap:3px 10px; padding:17px 26px 17px 0; }
 .phone-page .phone-chapters a::after { top:20px; font-size:17px; }
 .phone-page .phone-chapters span { grid-row:1/3; align-self:center; font-size:9px; letter-spacing:1px; }
 .phone-page .phone-chapters strong { margin:0; font-size:17px; }.phone-page .phone-chapters small { margin:0; font-size:11px; }
 .phone-page .phone-lock-overview,.phone-page .phone-password-guide { grid-template-columns:1fr; }
 .phone-page .phone-lock-story { padding:24px; }.phone-page .phone-lock-story h3,.phone-page .phone-password-intro h3 { font-size:23px; }
 .phone-page .phone-lock-display { border-left:0; border-top:1px solid var(--line); padding:24px; }
 .phone-page .phone-lock-procedure { grid-template-columns:1fr; gap:18px; }
 .phone-page .phone-lock-procedure>li { display:grid; grid-template-columns:24px 1fr; gap:14px; padding-bottom:18px; }
 .phone-page .phone-lock-procedure h3 { margin:0 0 6px; }.phone-page .phone-lock-procedure>li>span { margin-top:4px; }
 .phone-page .phone-lock-limits { padding:20px; }.phone-page .phone-lock-limits dl>div { grid-template-columns:1fr; gap:5px; }
 .phone-page .phone-password-guide { gap:30px; padding:24px 20px; }
 .phone-page .phone-password-reminder { display:block; }.phone-page .phone-password-reminder p { margin-top:8px; }
}
@media print { .phone-page .phone-chapters { display:none; }.phone-page .phone-lock-overview,.phone-page .phone-password-guide { display:block; }.phone-page .phone-password-steps>li { break-inside:avoid; } }

.phone-page { --accent:#a7d8de; --accent-rgb:167,216,222; }
.phone-page .phone-siblings { gap:28px; flex-wrap:wrap; }
.phone-page .phone-hero { grid-template-columns:1.25fr 1fr; }
.phone-page .phone-hero h1 { font-size:clamp(33px,3.2vw,47px); }
.phone-page .phone-hero-note { font-size:12px; color:#8ea8ba; margin:18px 0 0; }
.phone-page .phone-art-frame { display:grid; place-items:center; height:480px; min-width:0; background:transparent; }
.phone-page .phone-art-frame img { display:block; width:100%; height:100%; max-width:480px; max-height:480px; object-fit:contain; background:transparent; filter:drop-shadow(0 10px 24px #00000020); }
.phone-page .phone-hero-art figcaption { font-size:12px; letter-spacing:2px; }
.phone-page .phone-facts dd { font-size:17px; }
.phone-page .phone-entry { display:flex; align-items:center; justify-content:space-between; gap:24px; background:linear-gradient(130deg,#152a33,#101c29); border:1px solid #86c3ca4a; padding:26px 28px; margin-bottom:30px; }
.phone-page .phone-entry .growth-label { margin-bottom:4px; font-size:11px; letter-spacing:.8px; }
.phone-page .phone-entry strong { font-size:29px; font-weight:500; color:#d7edf0; letter-spacing:1px; }
.phone-page .phone-entry p:last-child { font-size:12px; color:#9db7c7; margin:7px 0 0; }
.phone-page .phone-entry .button { flex-shrink:0; font-size:13px; }
.phone-page .phone-steps strong { color:#c3dce5; font-weight:500; }
.phone-page .phone-command { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:12px!important; }
.phone-page .phone-command span { font-size:11px; color:#8ba4b8; }
.phone-page .phone-command code { padding:3px 11px; border:1px solid #a4cdd638; background:#152632; color:#c6e9ee; font-family:var(--sans); font-size:13px; }
.phone-page .phone-note { font-size:13px; background:#14272f70; border-color:#8dbec5; }
.phone-page .phone-note .note-label { color:#d3e8eb; }
.phone-page .phone-note p { margin:0; color:#a8c0cd; }
.phone-page .phone-note a { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.phone-page .phone-caution { border-color:#d2b98f; background:#332a1e4a; }
.phone-page .phone-caution .note-label { color:#e2d2b4; }
.phone-page .phone-benefits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.phone-page .phone-benefits article { padding:23px; border:1px solid #83adb82b; background:#101e2a; min-width:0; }
.phone-page .phone-benefits h3 { font-size:16px; font-weight:500; margin-bottom:8px; color:#d1e4eb; }
.phone-page .phone-benefits p { color:#a3bdca; font-size:13px; margin:0; }
.phone-page .phone-benefits p strong { color:#d4e7eb; font-weight:500; white-space:nowrap; }
.phone-page .phone-benefit-featured { grid-row:span 2; display:flex; flex-direction:column; justify-content:center; background:radial-gradient(ellipse at center,#50849326,transparent 75%),#101e2a!important; }
.phone-page .phone-benefit-featured .growth-label { font-size:11px; margin-bottom:10px; }
.phone-page .phone-benefit-featured>strong { color:#bfe7eb; font-size:38px; font-weight:500; margin-bottom:10px; }
.phone-page .phone-status { display:grid; grid-template-columns:.8fr 1.2fr; gap:25px; margin-top:27px; padding:25px 0; border-block:1px solid var(--line); }
.phone-page .phone-status .growth-label { font-size:11px; color:#cbbba9; margin-bottom:5px; }
.phone-page .phone-status h3 { font-size:18px; font-weight:500; color:#d7e1e9; margin:0; }
.phone-page .phone-status ul { color:#a9bdcc; font-size:13px; margin:0; padding-left:20px; }
.phone-page .phone-status li+li { margin-top:5px; }
.phone-page .phone-hunt { margin-top:26px; }
.phone-page .phone-hunt h3 { font-size:17px; font-weight:500; margin-bottom:16px; }
.phone-page .phone-hunt ol { display:flex; align-items:center; flex-wrap:wrap; list-style:none; gap:10px; padding:0; margin:0 0 13px; }
.phone-page .phone-hunt li { display:flex; align-items:center; gap:5px; color:#bdd5df; font-size:12px; }
.phone-page .phone-hunt li+li::before { content:"→"; margin-right:5px; color:#6c95a9; }
.phone-page .phone-hunt kbd { font-family:var(--sans); border:1px solid #8bafc143; background:#122130; border-bottom-width:2px; padding:1px 7px; }
.phone-page .phone-hunt>p { color:#99b3c4; font-size:13px; margin:0; }
.phone-page .phone-cooldowns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.phone-page .phone-cooldowns article { padding:26px; border:1px solid #90bac331; background:#101e2b; }
.phone-page .phone-cooldowns .growth-label { font-size:11px; margin-bottom:9px; letter-spacing:.8px; }
.phone-page .phone-cooldowns strong { color:var(--accent); font-size:48px; line-height:1.35; font-weight:500; font-variant-numeric:tabular-nums; }
.phone-page .phone-cooldowns strong small { font-size:15px; }
.phone-page .phone-cooldowns h3 { font-size:15px; font-weight:500; color:#d4e4ec; margin:14px 0 8px; }
.phone-page .phone-cooldowns p:last-child { font-size:13px; color:#a4bdcc; margin:0; }
.phone-page .phone-cooldowns b { color:#c3dee6; font-weight:500; }
.phone-page .phone-legacy { margin-top:31px; }
.phone-page .phone-legacy>h3 { font-size:19px; font-weight:500; margin-bottom:12px; }
.phone-page .phone-legacy>p { font-size:13px; color:#a7bfcd; margin-bottom:18px; }
.phone-page .phone-date-note { padding:19px 23px; background:#2b29364a; border-left:2px solid #c1b4d0; margin-block:20px; }
.phone-page .phone-date-note>span { color:#dbcee4; font-size:13px; letter-spacing:.8px; }
.phone-page .phone-date-note>p { color:#b1bed0; font-size:13px; margin:7px 0 0; }
.phone-page .phone-migration { margin:22px 0; }
.phone-page .phone-migration>div { display:grid; grid-template-columns:145px 1fr; gap:20px; padding:17px 0; border-bottom:1px solid var(--line); }
.phone-page .phone-migration dt { color:#c5dde5; font-size:13px; }
.phone-page .phone-migration dd { color:#9fb8c8; font-size:13px; margin:0; }
.phone-page .phone-location strong { color:#c7dee6; font-weight:500; }
.phone-page .phone-npc { border:1px solid var(--line); padding:0 20px; }
.phone-page .phone-npc summary { cursor:pointer; color:#b8d7e1; font-size:13px; padding-block:14px; }
.phone-page .phone-npc summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.phone-page .phone-npc figure { margin:5px auto 20px; max-width:360px; }
.phone-page .phone-npc img { display:block; width:100%; height:auto; }
.phone-page .phone-npc figcaption { color:#829eb1; font-size:11px; text-align:center; margin-top:10px; }
.phone-page .phone-lock-flow { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:23px; }
.phone-page .phone-lock-flow span { color:#bbd8e2; font-size:12px; }
.phone-page .phone-lock-flow span:not([aria-hidden]) { border:1px solid #91c0ca40; padding:7px 11px; background:#142632; }
.phone-page .phone-lock-flow span[aria-hidden] { color:#7294a8; }
.phone-page .phone-cost-wrap { border:1px solid var(--line); }
.phone-page .phone-cost-table th,.phone-page .phone-cost-table td { white-space:normal; }
.phone-page .phone-cost-table th { min-width:104px; }
.phone-page .phone-cost-table td strong { color:#bee2e9; font-size:15px; font-weight:500; white-space:nowrap; text-align:left; }
.phone-page .phone-restrictions { margin-top:28px; }
.phone-page .phone-restrictions .growth-label { font-size:11px; margin-bottom:4px; }
.phone-page .phone-restrictions h3 { font-size:18px; font-weight:500; margin-bottom:18px; }
.phone-page .phone-restrictions ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; list-style:none; padding:0; margin:0; }
.phone-page .phone-restrictions li { padding:13px 15px; border:1px solid #a4bdca2a; color:#b7ccda; font-size:13px; background:#111f2d; }
.phone-page .phone-restrictions li::before { content:"×"; display:inline-block; color:#b9a9c3; margin-right:10px; }

@media(max-width:1100px) {
  .phone-page .phone-siblings { gap:24px; }
  .phone-page .phone-hero h1 { font-size:35px; }
  .phone-page .phone-entry { padding:24px; gap:18px; }
  .phone-page .phone-entry strong { font-size:26px; }
  .phone-page .phone-entry .button { padding-inline:16px; }
}
@media(max-width:640px) {
  .phone-page .phone-siblings { justify-content:flex-start; gap:0 22px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
  .phone-page .phone-siblings a { white-space:nowrap; flex-shrink:0; }
  .phone-page .phone-hero { display:flex; }
  .phone-page .phone-hero h1 { font-size:clamp(29px,7.8vw,35px); }
  .phone-page .phone-hero-note { font-size:11px; line-height:1.85; }
  .phone-page .phone-art-frame { height:300px; }
  .phone-page .phone-art-frame img { max-width:300px; max-height:300px; }
  .phone-page .phone-hero-art figcaption { font-size:11px; }
  .phone-page .phone-facts dd { font-size:15px; }
  .phone-page .phone-entry { padding:23px 20px; flex-direction:column; align-items:flex-start; gap:18px; }
  .phone-page .phone-entry strong { font-size:27px; }
  .phone-page .phone-entry .button { min-height:44px; }
  .phone-page .phone-note { padding:18px; }
  .phone-page .phone-benefits { gap:10px; }
  .phone-page .phone-benefits article { padding:19px 16px; }
  .phone-page .phone-benefits h3 { font-size:15px; }
  .phone-page .phone-benefits p { font-size:12px; }
  .phone-page .phone-benefit-featured { grid-column:1/-1; grid-row:auto; }
  .phone-page .phone-benefit-featured>strong { font-size:34px; }
  .phone-page .phone-status { grid-template-columns:1fr; gap:16px; }
  .phone-page .phone-hunt ol { gap:9px; }
  .phone-page .phone-hunt li { font-size:11px; }
  .phone-page .phone-cooldowns { gap:12px; }
  .phone-page .phone-cooldowns article { padding:20px 16px; }
  .phone-page .phone-cooldowns strong { font-size:40px; }
  .phone-page .phone-cooldowns h3 { font-size:14px; }
  .phone-page .phone-cooldowns p:last-child { font-size:12px; }
  .phone-page .phone-legacy>h3 { font-size:18px; }
  .phone-page .phone-date-note { padding:18px; }
  .phone-page .phone-migration>div { grid-template-columns:1fr; gap:6px; }
  .phone-page .phone-npc { padding-inline:15px; }
  .phone-page .phone-cost-table { min-width:480px; }
  .phone-page .phone-cost-table th { min-width:95px; }
  .phone-page .phone-cost-table td { font-size:13px; }
  .phone-page .phone-lock-flow { gap:8px; }
  .phone-page .phone-lock-flow span { font-size:11px; }
  .phone-page .phone-lock-flow span:not([aria-hidden]) { padding:6px 9px; }
  .phone-page .phone-restrictions h3 { font-size:17px; }
  .phone-page .phone-restrictions ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .phone-page .phone-restrictions li { padding:12px; font-size:12px; }
}
@media(max-width:370px) {
  .phone-page .phone-cooldowns { grid-template-columns:1fr; }
  .phone-page .phone-benefits { grid-template-columns:1fr; }
  .phone-page .phone-benefit-featured { grid-column:auto; }
}
@media print {
  .phone-page .phone-art-frame,.phone-page .phone-entry .button,.phone-page .phone-siblings { display:none!important; }
  .phone-page .phone-benefits,.phone-page .phone-cooldowns { display:block; }
  .phone-page .phone-benefits article,.phone-page .phone-cooldowns article,.phone-page .phone-note { break-inside:avoid; }
  .phone-page .phone-npc:not([open]) { display:none; }
  .phone-page .phone-cost-table { min-width:0; }
}
