/* EIDOS — Persona 5 inspired styling. Mobile-first: base rules target small screens, media queries progressively enhance for tablet/desktop. */ :root{ --bg:#070c14; --bg2:#0d1524; --bg3:#101b2e; --accent:#1fb6d4; --accent2:#7fe8ff; --white:#eef4f8; --gray:#8496ab; --line:#1e3149; --font-head: 'Arial Narrow', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --tap: 44px; --sidebar-w: 230px; --sidebar-w-collapsed: 64px; } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} html,body{margin:0;padding:0; overflow-x:clip; max-width:100%;} body{ background:var(--bg); color:var(--white); font-family:var(--font-body); line-height:1.6; background-image: linear-gradient(rgba(127,232,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(127,232,255,0.03) 1px, transparent 1px); background-size: 40px 40px; } a{color:var(--accent2);} img,video{max-width:100%; height:auto;} ::selection{background:var(--accent); color:#03131a;} .skip-link{ position:absolute; left:-999px; top:0; background:var(--accent); color:#03131a; padding:10px 16px; z-index:1000; text-decoration:none; font-weight:700; } .skip-link:focus{left:8px; top:8px;} /* Sidebar (desktop: fixed left rail; mobile: off-canvas) */ .sidebar{ position:fixed; top:0; left:0; bottom:0; width:min(78vw, 280px); z-index:150; background:var(--bg2); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:calc(20px + env(safe-area-inset-top)) 14px 20px; transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.85,.25,1); overflow-y:auto; } .sidebar.open{transform:translateX(0); box-shadow:8px 0 40px rgba(0,0,0,.5);} .sidebar.open .main-nav a{animation: mn-slide-in .35s cubic-bezier(.2,.8,.2,1) both;} .sidebar.open .main-nav a:nth-child(1){animation-delay:.03s;} .sidebar.open .main-nav a:nth-child(2){animation-delay:.06s;} .sidebar.open .main-nav a:nth-child(3){animation-delay:.09s;} .sidebar.open .main-nav a:nth-child(4){animation-delay:.12s;} .sidebar.open .main-nav a:nth-child(5){animation-delay:.15s;} .sidebar.open .main-nav a:nth-child(6){animation-delay:.18s;} .sidebar.open .main-nav a:nth-child(7){animation-delay:.21s;} .sidebar.open .main-nav a:nth-child(8){animation-delay:.24s;} .sidebar.open .main-nav a:nth-child(9){animation-delay:.27s;} .sidebar.open .main-nav a:nth-child(10){animation-delay:.3s;} .sidebar.open .main-nav a:nth-child(11){animation-delay:.33s;} @keyframes mn-slide-in{ from{ opacity:0; transform:translateX(-14px); } to{ opacity:1; transform:translateX(0); } } .logo{ font-family:var(--font-head); font-size:1.4rem; letter-spacing:3px; font-weight:800; color:var(--white); text-decoration:none; display:block; padding:6px 10px 20px; border-bottom:1px solid var(--line); margin-bottom:14px; } .logo-dot{color:var(--accent2);} .sidebar-collapse-btn{ display:none; position:absolute; top:26px; right:-14px; width:28px; height:28px; align-items:center; justify-content:center; border-radius:50%; background:var(--accent); color:var(--bg); border:2px solid var(--bg2); font-size:1rem; line-height:1; cursor:pointer; transition:transform .22s ease; z-index:151; } .sidebar-collapse-btn:hover{background:var(--accent2);} .nav-toggle{ /* top offset includes the safe-area inset so this doesn't sit under the notch/Dynamic Island when the site is launched as an iOS "Add to Home Screen" standalone app (see apple-mobile-web-app-capable in ). */ position:fixed; top:calc(12px + env(safe-area-inset-top)); left:12px; z-index:160; background:var(--bg2); border:1px solid var(--accent); color:var(--accent2); font-size:1.3rem; width:var(--tap); height:var(--tap); cursor:pointer; line-height:1; border-radius:50%; box-shadow:0 4px 16px rgba(0,0,0,.4), 0 0 0 3px rgba(31,182,212,.12); transition:transform .2s ease, box-shadow .2s ease; } .nav-toggle:active{transform:scale(0.92);} .nav-toggle[aria-expanded="true"]{box-shadow:0 4px 16px rgba(0,0,0,.4), 0 0 0 4px rgba(31,182,212,.28);} .main-nav{ display:flex; flex-direction:column; width:100%; flex:1; } /* Groups replace the old single flat 14-link list — a DM scanning the rail now sees 3-4 short clusters instead of one long column. The top group (Start/Game — always relevant) gets a divider; the others get a small muted caption instead of any extra chrome. */ .nav-group{display:flex; flex-direction:column; gap:3px;} .nav-group + .nav-group{margin-top:10px;} .nav-group-top{padding-bottom:10px; margin-bottom:2px; border-bottom:1px solid var(--line);} .nav-group-title{ margin:0 10px 4px; font-size:0.68rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--gray); font-weight:700; opacity:.75; } .main-nav a{ position:relative; color:var(--gray); text-decoration:none; font-weight:600; font-size:0.9rem; letter-spacing:.4px; padding:10px 14px; background:transparent; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; min-height:var(--tap); display:flex; align-items:center; gap:12px; border-left:3px solid transparent; border-radius:8px; } .main-nav a .mn-icon, .main-nav a .mn-label{position:relative; z-index:1;} /* Plain single-color line icons (currentColor) instead of the old colorful emoji + circular badge — the DM asked for something less "bunt" and more deliberate-looking. Icon color simply follows the link's own text color, so hover/active states stay in sync for free. */ .main-nav a .mn-icon{ width:19px; height:19px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--gray); opacity:.85; transition:color .18s ease, opacity .18s ease; } .main-nav a .mn-icon svg{width:100%; height:100%; display:block;} .main-nav a .mn-label{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .main-nav a:hover{color:var(--white); background:var(--bg3); border-left-color:var(--accent); transform:translateX(2px);} .main-nav a:hover .mn-icon{color:var(--accent2); opacity:1;} .main-nav a:active{transform:translateX(2px) scale(0.98);} .main-nav a.active{color:#fff; background:linear-gradient(90deg, rgba(31,182,212,.16), var(--bg3) 70%); border-left-color:var(--accent2);} .main-nav a.active .mn-icon{color:var(--accent2); opacity:1;} .sidebar-foot{border-top:1px solid var(--line); padding-top:14px; margin-top:14px;} .sidebar-signature{color:var(--gray); font-size:0.68rem; letter-spacing:1px; text-transform:uppercase; margin:10px 4px 0;} .music-widget{display:flex; justify-content:center;} .music-btn{ background:var(--bg3); border:1px solid var(--line); color:var(--white); font-size:1.1rem; width:var(--tap); height:var(--tap); cursor:pointer; border-radius:50%; } .music-btn:hover{border-color:var(--accent);} .nav-scrim{ display:none; position:fixed; inset:0; background:rgba(3,8,15,.7); z-index:140; } .nav-scrim.open{display:block;} /* App shell: content area to the right of the fixed sidebar */ .app-shell{margin-left:0;} .topbar{ display:flex; justify-content:flex-end; align-items:center; padding:calc(14px + env(safe-area-inset-top)) 16px 0; max-width:1300px; margin:0 auto; } .login-pill{ display:flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--line); color:var(--white); border-radius:999px; padding:6px 16px 6px 6px; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:0.78rem; letter-spacing:1px; } .login-pill:hover{border-color:var(--accent);} .lp-avatar{ width:28px; height:28px; border-radius:50%; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:0.95rem; overflow:hidden; flex-shrink:0; } .lp-avatar img{width:100%; height:100%; object-fit:cover;} /* Page layout: content + optional in-page TOC sidebar */ .page-shell{max-width:1300px; margin:0 auto; display:flex; gap:0; align-items:flex-start;} .page-content{max-width:1100px; margin:0 auto; padding:30px 16px 60px; flex:1; min-width:0;} .page-toc{display:none;} /* Hero */ .hero{ position:relative; padding:60px 16px 50px; text-align:center; overflow:hidden; background:radial-gradient(ellipse at center, #0d1b30 0%, #070c14 70%); border-bottom:6px solid var(--accent); } .hero-slash{ position:absolute; inset:0; pointer-events:none; background: repeating-linear-gradient(115deg, transparent 0 60px, rgba(127,232,255,0.05) 60px 64px); } .hero-title{ font-family:var(--font-head); font-size:clamp(3.5rem,12vw,8rem); margin:0; color:var(--white); letter-spacing:6px; text-shadow: 0 0 30px rgba(127,232,255,.35); position:relative; } .hero-tagline{font-size:1.3rem; font-weight:700; margin-top:20px; color:var(--white);} .hero-sub{color:var(--gray); max-width:640px; margin:10px auto 0;} .hero-links{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:36px;} .hero-btn{ display:inline-block; background:var(--accent); color:#fff; text-decoration:none; font-weight:800; text-transform:uppercase; letter-spacing:1px; padding:14px 30px; border:1px solid var(--accent); transition: transform .15s ease, background .15s ease; } .hero-btn:hover{background:#fff; color:var(--accent); transform:translateY(-3px) scale(1.03);} /* Index grid */ .index-grid{ max-width:1200px; margin:0 auto; padding:60px 20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; } .index-card{ background:var(--bg2); border-left:5px solid var(--accent); padding:26px 22px; text-decoration:none; color:var(--white); position:relative; overflow:hidden; border:1px solid var(--line); transition: transform .15s ease, box-shadow .15s ease; } .index-card:hover{transform:translate(4px,-4px); box-shadow: -4px 4px 0 var(--accent);} .ic-num{display:block; font-family:var(--font-head); font-size:2rem; color:var(--accent); opacity:.7;} .ic-title{display:block; font-size:1.3rem; font-weight:800; margin-top:6px;} .ic-sub{display:block; color:var(--gray); font-size:0.9rem; margin-top:6px;} /* Section header */ .section-header h1{ font-family:var(--font-head); font-size:clamp(2.2rem,6vw,3.5rem); letter-spacing:2px; margin:0 0 10px; border-bottom:2px solid var(--accent); display:inline-block; padding-bottom:8px; } .section-header p{color:var(--gray);} .breadcrumb a{color:var(--gray); text-decoration:none; font-weight:600;} .breadcrumb a:hover{color:var(--accent2);} .chapter-toc{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;} .chapter-toc a{ background:var(--bg2); color:var(--white); text-decoration:none; padding:8px 16px; font-weight:700; font-size:0.85rem; border:1px solid #333; } .chapter-toc a:hover{border-color:var(--accent); color:var(--accent2);} .lore-chapter{margin-top:50px; padding-top:10px; border-top:2px dashed #2a2a2a;} .lore-chapter h2{ font-family:var(--font-head); color:var(--accent2); font-size:1.8rem; letter-spacing:1px; } .spoiler-warning{ background:#241a05; border:1px solid var(--accent); color:#ffd27f; padding:10px 14px; font-weight:700; display:inline-block; } /* Char grid/cards */ .char-grid, .gegner-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:22px; margin-top:30px; } .char-card, .gegner-card{ background:var(--bg2); text-decoration:none; color:var(--white); overflow:hidden; border:1px solid var(--line); transition: transform .15s ease, border-color .15s ease; } .char-card:hover, .gegner-card:hover{transform:translateY(-6px); border-color:var(--accent);} .char-card-img, .gegner-card-img{ aspect-ratio:3/4; background:#050505; display:flex; align-items:center; justify-content:center; overflow:hidden; } .char-card-img img, .gegner-card-img img{width:100%; height:100%; object-fit:cover;} .no-img{color:#333; font-size:3rem; font-family:var(--font-head);} .char-card-info, .gegner-card-info{padding:14px 16px;} .char-card-info h3, .gegner-card-info h3{margin:0 0 4px; font-size:1.1rem;} .char-arkana{color:var(--accent2); font-weight:700; margin:2px 0;} .char-persona, .char-herkunft{color:var(--gray); font-size:0.85rem; margin:2px 0;} .gegner-num{color:var(--accent2); font-weight:800; font-family:var(--font-head);} .char-detail-header .char-arkana-line{color:var(--white);} .char-media{display:flex; gap:20px; flex-wrap:wrap; margin:30px 0;} .char-media figure{margin:0; text-align:center;} .char-media img{max-width:220px; border:2px solid var(--accent);} .char-media figcaption{color:var(--gray); font-size:0.8rem; margin-top:6px;} .krit-section{margin:30px 0;} .krit-video{width:100%; max-width:500px; border:2px solid var(--accent); display:block;} /* Note content (rendered markdown) */ .note-content{margin-top:20px;} .note-content h1,.note-content h2,.note-content h3{ font-family:var(--font-head); color:var(--white); margin-top:2em; } .note-content h1{font-size:1.8rem;} .note-content h2{font-size:1.5rem; color:var(--accent2); border-left:4px solid var(--accent); padding-left:12px;} .note-content h3{font-size:1.2rem;} .note-content p{margin:1em 0;} .note-content ul, .note-content ol{padding-left:1.4em;} .note-content blockquote{ border-left:4px solid var(--accent); margin:1.2em 0; padding:6px 20px; background:#141414; color:var(--gray); } .note-content code{background:#1e1e1e; padding:1px 6px; border-radius:3px; color:#ffcc66;} .callout{background:#141414; border:1px solid var(--accent); border-left:5px solid var(--accent); padding:14px 18px; margin:1.4em 0;} .callout-title{display:block; font-weight:800; color:var(--accent2); letter-spacing:1px; margin-bottom:6px;} .embed-img{max-width:100%; display:block; margin:1em 0; border:2px solid #222;} .embed-video, .embed-audio{max-width:100%; display:block; margin:1em 0;} .missing-asset{color:#664444; font-style:italic;} .table-wrap{overflow-x:auto; margin:1.4em 0;} table{border-collapse:collapse; width:100%; min-width:480px;} th,td{border:1px solid #2a2a2a; padding:8px 12px; text-align:left;} th{background:var(--bg3); color:var(--accent2); text-transform:uppercase; font-size:0.8rem; letter-spacing:1px;} tr:nth-child(even) td{background:#111;} .checklist{list-style:none; padding-left:0;} .checklist li{padding:2px 0;} /* Media page */ .media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin-top:20px;} .media-item video{width:100%; border:1px solid #222;} .media-item p{text-align:center; color:var(--gray); font-size:0.85rem;} .track-list{margin-top:20px; display:flex; flex-direction:column; gap:10px;} .track-item{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--bg2); padding:10px 16px; border-left:3px solid var(--accent); } .track-title{font-weight:700;} .track-item audio{max-width:320px; width:100%;} .site-footer{ text-align:center; padding:30px 20px 20px; color:#555; font-size:0.8rem; border-top:1px solid #1a1a1a; } /* ---------------------------------------------------------------------- */ /* Charaktersheet (mein-charakter.html) */ /* ---------------------------------------------------------------------- */ .sheet-card{ background:var(--bg2); border:1px solid #222; border-left:5px solid var(--accent); padding:22px 18px; margin-top:26px; max-width:820px; } .sheet-hint{color:var(--gray); font-size:0.9rem;} .sheet-card h2{font-family:var(--font-head); color:var(--accent2); margin-top:0;} #loginForm{display:flex; flex-direction:column; gap:12px; max-width:320px;} #loginForm label{font-weight:700; font-size:0.85rem; text-transform:uppercase; letter-spacing:1px;} #loginForm input, .sheet-fieldset input, .sheet-fieldset textarea{ background:#0d0d0d; border:1px solid #333; color:var(--white); padding:10px 12px; font-size:1rem; width:100%; min-height:var(--tap); font-family:inherit; } #loginForm input:focus, .sheet-fieldset input:focus, .sheet-fieldset textarea:focus{ outline:2px solid var(--accent); border-color:var(--accent); } .sheet-btn{ border:none; cursor:pointer; font-family:inherit; font-size:0.95rem; min-height:var(--tap); } .sheet-btn-ghost{background:transparent; border:2px solid var(--accent); color:var(--white); padding:8px 16px;} .sheet-btn-ghost:hover{background:var(--accent);} .sheet-error{color:#ff6b6b; font-weight:700;} .save-status{min-height:1.4em; color:var(--accent2); font-weight:700;} .sheet-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;} .sheet-grid{display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:18px;} .sheet-fieldset{border:1px solid #2a2a2a; padding:14px; display:flex; flex-direction:column; gap:10px;} .sheet-fieldset legend{color:var(--accent2); font-weight:800; text-transform:uppercase; letter-spacing:1px; padding:0 6px;} .fieldset-lock{font-size:0.8rem; text-transform:none; letter-spacing:0; opacity:0.7;} .admin-level-list{display:flex; flex-direction:column; gap:8px;} .admin-level-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .admin-level-name{flex:1; min-width:140px; font-weight:700;} .admin-level-input{width:64px; background:#0a0e14; border:1px solid var(--accent); color:var(--white); padding:6px 8px;} .admin-level-status{font-size:0.8rem; color:var(--accent2); min-width:70px;} .sheet-fieldset input[readonly],.sheet-fieldset textarea[readonly]{background:#0a0e14; color:var(--gray); cursor:not-allowed; opacity:0.85;} .sheet-fieldset label{display:flex; flex-direction:column; gap:4px; font-size:0.85rem; color:var(--gray);} .sheet-fieldset-wide{margin-bottom:18px;} .sheet-fieldset textarea{resize:vertical;} /* ---------------------------------------------------------------------- */ /* DM Cockpit (mein-charakter.html, DM role) — its own identity within the */ /* Navy/Cyan palette: amber/gold accent details on top of the usual */ /* accent/accent2, angular framing, section headers with icons. */ /* ---------------------------------------------------------------------- */ .dm-cockpit{ --dm-gold:#ffcf6b; background:var(--bg2); border:1px solid var(--line); border-left:5px solid var(--dm-gold); padding:22px 18px 30px; margin-top:26px; max-width:1100px; position:relative; } .dm-cockpit-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px;} .dm-cockpit-title h2{font-family:var(--font-head); color:var(--white); margin:2px 0 0; font-size:1.6rem; letter-spacing:1px;} .dm-cockpit-eyebrow{ display:inline-block; color:var(--dm-gold); font-size:0.72rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; } .dm-section{margin-top:28px; padding-top:18px; border-top:1px dashed var(--line);} .dm-section-title{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); color:var(--accent2); font-size:1.15rem; letter-spacing:1px; text-transform:uppercase; margin:0 0 14px; } .dm-section-icon{font-size:1.1rem;} .dm-session-form{border-left:3px solid var(--dm-gold);} .dm-player-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:6px; } @media (min-width: 720px){ .dm-player-grid{grid-template-columns:repeat(2, 1fr);} } @media (min-width: 1080px){ .dm-player-grid{grid-template-columns:repeat(4, 1fr);} } .dm-player-card{ background:var(--bg3); border:1px solid var(--line); border-top:3px solid var(--accent); padding:16px; display:flex; flex-direction:column; gap:10px; position:relative; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .dm-player-card:hover{border-color:var(--accent); transform:translateY(-2px);} .dm-player-card.flash{ animation: dm-card-flash .9s ease; } @keyframes dm-card-flash{ 0%{box-shadow:0 0 0 3px rgba(255,207,107,.55);} 100%{box-shadow:0 0 0 3px rgba(255,207,107,0);} } .dm-player-head{display:flex; align-items:center; gap:10px;} .dm-player-portrait{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid var(--accent); background:#000; flex-shrink:0; } .dm-player-portrait.no-img{display:flex; align-items:center; justify-content:center; color:var(--gray); font-size:1.2rem;} .dm-player-name{font-weight:800; color:var(--white); font-size:0.95rem; margin:0;} .dm-player-arkana{color:var(--gray); font-size:0.74rem; margin:1px 0 0;} .dm-player-bars{display:flex; flex-direction:column; gap:5px; min-width:200px;} .dm-quick-bar .roster-bar{flex:1; min-width:40px; max-width:70px;} .dm-quick-input{ width:38px; background:#0a1524; border:1px solid var(--line); color:var(--white); font-size:0.72rem; padding:2px 3px; text-align:center; border-radius:2px; } .dm-quick-input:focus{outline:none; border-color:var(--accent);} .dm-quick-slash{color:var(--gray);} .dm-quick-set{ width:20px; height:20px; min-height:0; flex-shrink:0; background:var(--bg2); border:1px solid var(--accent); color:var(--accent2); font-size:0.7rem; line-height:1; cursor:pointer; border-radius:3px; padding:0; } .dm-quick-set:hover{background:var(--accent); color:#03131a;} .dm-level-row{display:flex; align-items:center; gap:8px;} .dm-level-label{font-size:0.72rem; color:var(--gray); text-transform:uppercase; letter-spacing:1px; flex-shrink:0;} .dm-stepper{display:flex; align-items:center; gap:6px;} .dm-stepper-btn{ width:30px; height:30px; min-height:0; background:var(--bg2); border:1px solid var(--accent); color:var(--white); font-weight:800; font-size:1rem; cursor:pointer; border-radius:3px; line-height:1; } .dm-stepper-btn:hover{background:var(--accent); color:#03131a;} .dm-stepper-btn:disabled{opacity:0.35; cursor:not-allowed; background:var(--bg2); color:var(--gray);} .dm-stepper-value{ width:34px; text-align:center; font-weight:800; color:var(--accent2); font-family:var(--font-head); font-size:1.05rem; } .dm-level-set{font-size:0.75rem; padding:6px 10px; min-height:0;} .dm-draft-status{ font-size:0.72rem; font-weight:700; letter-spacing:.4px; padding:5px 8px; border-radius:3px; display:flex; align-items:center; justify-content:center; gap:5px; width:100%; margin-bottom:6px; box-sizing:border-box; } .dm-draft-status.status-none{background:#0a1524; color:var(--gray); border:1px solid var(--line);} .dm-draft-status.status-active{background:#241a05; color:var(--dm-gold); border:1px solid var(--dm-gold);} .dm-draft-status.status-rerolled{background:#241a05; color:#ffb347; border:1px solid #ffb347;} .dm-draft-btn{width:100%; font-size:0.82rem; padding:9px 10px; box-sizing:border-box;} .dm-draft-btn[disabled]{opacity:0.45; cursor:not-allowed;} .dm-card-note{font-size:0.72rem; color:var(--gray); min-height:1.2em;} /* ---------------------------------------------------------------------- */ /* Spielsteuerung accordion — one row per player character, stacked */ /* vertically, each independently expandable. Desktop-oriented (this page */ /* is DM-only and never opened on a phone), so we spend the extra width on */ /* bigger portraits and a multi-column detail grid once expanded. */ /* ---------------------------------------------------------------------- */ .dm-accordion{display:flex; flex-direction:column; gap:14px; margin-top:6px;} .dm-acc-item{ background:var(--bg3); border:1px solid var(--line); border-top:3px solid var(--accent); transition:border-color .2s ease; } .dm-acc-item.flash{animation: dm-card-flash .9s ease;} .dm-acc-head{ display:flex; align-items:center; gap:16px; padding:14px 18px; cursor:pointer; user-select:none; } .dm-acc-portrait{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--accent); background:#000; flex-shrink:0; } .dm-acc-portrait.no-img{display:flex; align-items:center; justify-content:center; color:var(--gray); font-size:1.4rem;} .dm-acc-idcell{min-width:180px;} .dm-acc-name{font-weight:800; color:var(--white); font-size:1.05rem; margin:0;} .dm-acc-arkana{color:var(--gray); font-size:0.78rem; margin:2px 0 0;} .dm-acc-level{display:flex; align-items:center; gap:8px;} .dm-acc-draft{width:210px; flex-shrink:0; display:flex; flex-direction:column;} .dm-acc-spacer{flex:1;} .dm-acc-toggle{ background:var(--bg2); border:1px solid var(--accent); color:var(--white); width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:1rem; line-height:1; flex-shrink:0; transition:transform .2s ease, background .15s ease; } .dm-acc-toggle:hover{background:var(--accent); color:#03131a;} .dm-acc-item.open .dm-acc-toggle{transform:rotate(180deg);} .dm-acc-body{ max-height:0; opacity:0; overflow:hidden; transition:max-height .35s ease, opacity .3s ease; border-top:1px dashed var(--line); } .dm-acc-item.open .dm-acc-body{max-height:4000px; opacity:1;} .dm-acc-body-inner{padding:18px 22px 24px;} .dm-acc-lockbar{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap;} .dm-lock-hint{color:var(--gray); font-size:0.78rem;} .dm-full-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; margin-bottom:18px; } .dm-full-grid fieldset{margin:0;} .dm-full-grid input, .dm-full-grid textarea{width:100%;} .dm-skills-cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:20px;} .dm-skill-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:8px 10px; background:var(--bg2); border:1px solid var(--line); margin-bottom:6px; font-size:0.85rem; } .dm-skill-row .dm-skill-info strong{color:var(--white);} .dm-skill-row .dm-skill-info span{display:block; color:var(--gray); font-size:0.78rem;} .dm-skill-remove{ background:none; border:1px solid #a33; color:#ff8a8a; width:26px; height:26px; border-radius:3px; cursor:pointer; flex-shrink:0; } .dm-skill-remove:hover{background:#a33; color:#fff;} .dm-skill-locked-tag{color:var(--gray); font-size:0.7rem; font-style:italic;} .dm-skill-search-wrap{position:relative; margin-top:14px;} .dm-skill-search-results{ position:absolute; z-index:5; top:100%; left:0; right:0; max-height:280px; overflow-y:auto; background:var(--bg2); border:1px solid var(--accent); border-top:none; } .dm-skill-search-item{ display:block; width:100%; text-align:left; background:none; border:none; color:var(--white); padding:8px 12px; cursor:pointer; font-size:0.82rem; border-bottom:1px solid var(--line); } .dm-skill-search-item:hover{background:var(--accent); color:#03131a;} .dm-skill-search-item small{display:block; color:var(--gray); font-size:0.72rem;} .dm-skill-search-item:hover small{color:#03131a;} @media (prefers-reduced-motion: reduce){ .dm-acc-body{transition:none;} } /* ---------------------------------------------------------------------- */ /* Login "calling card" screen (Persona 5 "Take Your Heart" look) — a full- */ /* viewport black takeover shown only while logged out, hidden entirely */ /* once /api/me resolves to a session (see mein-charakter.js). */ /* ---------------------------------------------------------------------- */ .login-blackout{ position:fixed; inset:0; z-index:200; background:#000; display:flex; align-items:center; justify-content:center; padding:24px; } .login-blackout[hidden]{display:none;} /* Avoids the black login screen flashing on every single page navigation for an already-logged-in player/DM: an inline head script (see page_shell()) synchronously stamps this class from localStorage before the browser paints anything, so returning visitors skip straight past it. script.js still does the real /api/me check in the background and reverses this (removes the class + the flag) if that comes back logged out, so a genuinely expired session still ends up showing the screen. */ html.eidos-authed .login-blackout{display:none;} .calling-card{max-width:480px; width:100%; text-align:center;} .cc-logo-img{max-width:220px; width:60%; height:auto; margin:0 0 28px; filter:drop-shadow(0 0 24px rgba(127,232,255,.35));} .cc-title{ font-family: var(--font-head); font-size:clamp(2.6rem, 11vw, 4.6rem); margin:0 0 30px; color:var(--accent2); letter-spacing:3px; line-height:0.95; text-transform:uppercase; display:inline-block; text-shadow: 0 0 30px rgba(127,232,255,.4); } .cc-form{display:flex; flex-direction:column; gap:14px; max-width:340px; margin:0 auto;} .cc-form input{ background:#0b1220; border:2px solid var(--accent); color:var(--white); padding:14px 16px; font-size:1rem; text-align:center; letter-spacing:1px; } .cc-form input:focus{outline:none; border-color:var(--accent2); box-shadow:0 0 0 3px rgba(127,232,255,.25);} /* ---------------------------------------------------------------------- */ /* Persona-5-style character card header on "Mein Charakter" */ /* ---------------------------------------------------------------------- */ .char-portrait-card{ display:flex; align-items:center; gap:22px; margin-bottom:26px; padding:20px; background:linear-gradient(120deg, var(--bg3) 0%, var(--bg2) 70%); border:1px solid var(--accent); position:relative; overflow:hidden; } .char-portrait-card::after{ content:""; position:absolute; inset:0; pointer-events:none; background: repeating-linear-gradient(115deg, transparent 0 40px, rgba(127,232,255,.04) 40px 44px); } .cpc-frame{position:relative; flex-shrink:0; width:110px; height:110px;} .cpc-portrait{ width:110px; height:110px; object-fit:cover; object-position:top center; border:2px solid var(--accent2); background:#000; } .cpc-arkana-badge{ position:absolute; bottom:-8px; right:-8px; background:var(--accent); color:#03131a; font-family:var(--font-head); font-size:0.7rem; padding:3px 7px; letter-spacing:1px; box-shadow:0 2px 6px rgba(0,0,0,.5); } .cpc-info{position:relative; min-width:0;} .cpc-eyebrow{margin:0; color:var(--accent2); font-size:0.7rem; letter-spacing:2px; text-transform:uppercase;} .cpc-info h2{margin:2px 0 4px; font-family:var(--font-head); font-size:1.8rem; color:#fff; display:inline-block;} .cpc-persona{margin:0; color:var(--gray); font-size:0.95rem;} .cpc-persona strong{color:var(--white);} .cpc-stufe{margin:6px 0 0; font-size:0.8rem; color:var(--accent2); font-weight:700; text-transform:uppercase; letter-spacing:1px;} /* ---------------------------------------------------------------------- */ /* DM music panel: right-side drawer, DM-only (shown/hidden via dm-panel.js)*/ /* ---------------------------------------------------------------------- */ .dm-panel-tab{ position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:120; background:var(--accent); color:#fff; border:none; width:44px; height:56px; border-radius:8px 0 0 8px; font-size:1.3rem; cursor:pointer; box-shadow:-2px 0 10px rgba(0,0,0,.5); } .dm-panel{ position:fixed; top:0; right:0; bottom:0; width:min(340px, 88vw); z-index:130; background:#0d0d0d; border-left:3px solid var(--accent); box-shadow:-8px 0 24px rgba(0,0,0,.6); transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; } .dm-panel.open{transform:translateX(0);} .dm-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:2px solid var(--accent); background:linear-gradient(120deg,var(--bg3),var(--bg2)); } .dm-panel-title{margin:0; font-family:var(--font-head); color:#fff; letter-spacing:1px; font-size:1rem;} .dm-panel-close{background:none; border:1px solid var(--accent); color:#fff; width:32px; height:32px; cursor:pointer;} .dm-panel-body{padding:16px 18px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:14px;} .dm-now-playing{margin:0; color:var(--accent2); font-weight:700; font-size:0.9rem; min-height:1.4em;} .dm-transport{display:flex; align-items:center; gap:14px;} .dm-btn{ background:var(--accent); color:#fff; border:none; width:44px; height:44px; border-radius:50%; font-size:1.1rem; cursor:pointer; flex-shrink:0; } .dm-btn:hover{background:var(--accent2);} .dm-volume-label{display:flex; flex-direction:column; gap:2px; font-size:0.72rem; color:var(--gray); flex:1;} .dm-volume-label input{width:100%;} .dm-track-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;} .dm-track-list li{margin:0;} .dm-track-loading{color:var(--gray); font-size:0.85rem; padding:8px 0;} .dm-track-btn{ width:100%; text-align:left; background:#1a1a1a; color:var(--white); border:none; border-left:3px solid transparent; padding:9px 10px; font-size:0.82rem; cursor:pointer; transition:background .15s ease, border-color .15s ease; } .dm-track-btn:hover{background:#242424; border-left-color:var(--accent2);} .dm-track-btn.playing{background:var(--accent); border-left-color:#fff; color:#fff; font-weight:700;} .dm-panel-scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:125;} .dm-panel-scrim.open{display:block;} @media (min-width: 801px){ .dm-panel-scrim{display:none !important;} .dm-panel{width:320px;} } /* ---------------------------------------------------------------------- */ /* In-page TOC (auto-populated by script.js from h2[id] in .note-content / .lore-chapter, only shown when there is more than one heading) */ /* ---------------------------------------------------------------------- */ .page-toc-title{ font-family:var(--font-head); color:var(--accent2); font-size:0.9rem; letter-spacing:1px; text-transform:uppercase; margin:0 0 10px; } .page-toc ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px;} .page-toc a{ display:block; color:var(--gray); text-decoration:none; font-size:0.85rem; padding:6px 10px; border-left:2px solid #2a2a2a; transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease; } .page-toc a:hover{color:var(--accent2); border-left-color:var(--accent);} .page-toc a.toc-active{ color:#fff; font-weight:700; border-left-color:var(--accent); background:linear-gradient(90deg, rgba(127,232,255,.16), transparent); transform:translateX(2px); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---------------------------------------------------------------------- */ /* Scroll-reveal + interaction animations (Persona-style), respects */ /* prefers-reduced-motion */ /* ---------------------------------------------------------------------- */ .reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease;} .reveal.in-view{opacity:1; transform:translateY(0);} .main-nav a, .quick-nav a, .index-card, .char-card, .gegner-card, .hero-btn, .sheet-btn{ position:relative; } .click-glitch{animation: eidos-glitch .28s steps(2,end);} @keyframes eidos-glitch{ 0%{ clip-path: inset(0 0 0 0); transform:translate(0,0); } 20%{ clip-path: inset(10% 0 60% 0); transform:translate(-2px,1px); } 40%{ clip-path: inset(60% 0 5% 0); transform:translate(2px,-1px); } 60%{ clip-path: inset(20% 0 40% 0); transform:translate(-1px,0); } 80%{ clip-path: inset(0 0 70% 0); transform:translate(1px,1px); } 100%{ clip-path: inset(0 0 0 0); transform:translate(0,0); } } .page-anim-enter{animation: eidos-page-in .45s cubic-bezier(.2,.8,.2,1);} @keyframes eidos-page-in{ from{ opacity:0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to{ opacity:1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ---------------------------------------------------------------------- */ /* Responsive breakpoints — tablet and up */ /* ---------------------------------------------------------------------- */ @media (min-width: 640px){ .sheet-grid{grid-template-columns:repeat(2,1fr);} .index-grid{padding:60px 24px;} } @media (min-width: 901px){ .sidebar{ position:fixed; width:var(--sidebar-w); transform:none; padding:24px 16px; transition:width .22s ease, padding .22s ease; } .nav-toggle{display:none;} .nav-scrim{display:none !important;} .app-shell{margin-left:var(--sidebar-w); transition:margin-left .22s ease;} .sidebar-collapse-btn{display:flex;} .page-shell{padding-left:0;} .page-content{padding:20px 30px 90px;} .hero{padding:60px 20px 90px;} .page-toc{ display:block; position:sticky; top:24px; align-self:flex-start; width:220px; flex-shrink:0; padding:24px 14px; margin-top:20px; } /* Collapsed state (toggled via #sidebarCollapseBtn, persisted in localStorage): icon-only rail, full page width freed up. */ body.sidebar-collapsed .sidebar{width:var(--sidebar-w-collapsed); padding:24px 8px;} body.sidebar-collapsed .app-shell{margin-left:var(--sidebar-w-collapsed);} body.sidebar-collapsed .logo{text-align:center; padding-left:0; padding-right:0;} body.sidebar-collapsed .logo span.logo-dot{display:none;} body.sidebar-collapsed .logo{font-size:0; padding-bottom:14px;} body.sidebar-collapsed .logo::before{content:"E"; font-size:1.4rem;} body.sidebar-collapsed .mn-label, body.sidebar-collapsed .nav-group-title, body.sidebar-collapsed .sidebar-signature, body.sidebar-collapsed .music-widget .music-btn + span{display:none;} body.sidebar-collapsed .main-nav a{justify-content:center; padding:12px 6px;} body.sidebar-collapsed .nav-group-top{padding-bottom:8px;} body.sidebar-collapsed .sidebar-collapse-btn{transform:rotate(180deg);} } @media (min-width: 1200px){ .page-content{padding:60px 40px 100px;} } /* ---------------------------------------------------------------------- */ /* Dashboard (index.html) */ /* ---------------------------------------------------------------------- */ .hero{ position:relative; overflow:hidden; padding:50px 20px 40px; background:radial-gradient(ellipse at top right, #0d1b30 0%, #070c14 65%); border:1px solid var(--line); border-radius:8px; display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; } .hero-main{max-width:560px;} .hero-kicker{color:var(--accent2); font-weight:700; letter-spacing:3px; text-transform:uppercase; font-size:0.8rem; margin:0 0 10px;} .hero-title{ font-family:var(--font-head); font-size:clamp(3rem,10vw,6rem); margin:0; color:var(--white); letter-spacing:6px; } .hero-tagline{font-size:1.1rem; font-weight:600; margin-top:16px; color:var(--white);} .hero-sub{color:var(--gray); max-width:520px; margin:10px 0 0;} .hero-session-widget{ background:var(--bg2); border:1px solid var(--line); border-radius:6px; padding:18px 22px; min-width:220px; text-align:center; flex-shrink:0; } .hsw-label{color:var(--accent2); font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; margin:0 0 6px;} .hsw-value{color:var(--white); font-weight:700; font-size:1.1rem; margin:0;} .hsw-date{color:var(--gray); font-size:0.85rem; margin:6px 0 0;} .dash-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:24px; } .dash-tile{ background:var(--bg2); border:1px solid var(--line); border-radius:6px; padding:20px 22px; } .dash-tile h2{ font-family:var(--font-head); color:var(--accent2); font-size:1.05rem; letter-spacing:1px; text-transform:uppercase; margin:0 0 12px; } .dash-tile p{color:var(--gray); margin:0 0 10px;} .dash-tile a.tile-link{color:var(--accent2); text-decoration:none; font-weight:700; font-size:0.85rem;} .dash-tile a.tile-link:hover{text-decoration:underline;} .quick-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px;} .quick-list a{ display:flex; align-items:center; justify-content:space-between; color:var(--white); text-decoration:none; padding:9px 4px; border-bottom:1px solid var(--line); font-size:0.9rem; } .quick-list a:hover{color:var(--accent2);} .dash-tile-wide{grid-column:1/-1;} /* Roster tile */ .roster-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-top:6px;} .roster-card{ background:var(--bg3); border:1px solid var(--line); border-radius:6px; padding:14px; display:flex; gap:12px; } .roster-portrait{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--accent); background:#000; flex-shrink:0; } .roster-info{min-width:0; flex:1;} .roster-name{font-weight:700; color:var(--white); font-size:0.92rem; margin:0;} .roster-arkana{color:var(--gray); font-size:0.75rem; margin:2px 0 8px;} .roster-bar-row{display:flex; align-items:center; gap:6px; font-size:0.68rem; color:var(--gray); margin-top:4px;} .roster-bar{flex:1; height:6px; background:#0a1524; border-radius:3px; overflow:hidden;} .roster-bar-fill{height:100%; background:var(--accent);} .roster-bar-fill.mp{background:var(--accent2);} .roster-loading{color:var(--gray); font-size:0.85rem;} @media (min-width: 640px){ .dash-grid{grid-template-columns:repeat(2,1fr);} } @media (min-width: 1000px){ .dash-grid{grid-template-columns:repeat(3,1fr);} } /* ---------------------------------------------------------------------- */ /* Game page (game.html) — mobile-first player hub: bars, attributes, */ /* skill cards, spell-draft tarot cards, achievement toast. */ /* ---------------------------------------------------------------------- */ .game-screen{max-width:820px; margin:26px auto 0;} .game-portrait-card{margin-bottom:16px;} .game-bars{display:flex; flex-direction:column; gap:14px; margin-bottom:20px;} .game-bar-block{ background:var(--bg2); border:1px solid var(--line); border-left:4px solid var(--accent); padding:14px 16px; } .game-bar-row{display:flex; align-items:center; gap:10px;} .game-bar-label{font-family:var(--font-head); font-weight:800; color:var(--accent2); width:34px; flex-shrink:0;} .game-bar{height:10px; flex:1;} .game-bar-text{font-size:0.8rem; color:var(--gray); min-width:64px; text-align:right; flex-shrink:0;} .game-bar-inputs{display:flex; gap:10px; margin-top:10px;} .game-bar-inputs label{ display:flex; flex-direction:column; gap:4px; font-size:0.75rem; color:var(--gray); flex:1; } .game-bar-inputs input{ background:#0d0d0d; border:1px solid #333; color:var(--white); padding:8px 10px; min-height:var(--tap); font-family:inherit; font-size:1rem; width:100%; } .game-form{display:flex; flex-direction:column; gap:16px; margin-bottom:26px;} .game-attr-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;} .game-attr-grid label{display:flex; flex-direction:column; gap:4px; font-size:0.72rem; color:var(--gray); font-weight:700; text-transform:uppercase;} .game-attr-grid input{ background:#0d0d0d; border:1px solid #333; color:var(--white); padding:8px; min-height:var(--tap); font-family:inherit; font-size:1rem; text-align:center; width:100%; } .game-section-title{ font-family:var(--font-head); color:var(--accent2); font-size:1.2rem; letter-spacing:1px; margin:0 0 14px; } .game-skills-section{margin-bottom:30px;} /* Responsive tile/card grid — auto-fill so the column count scales with the viewport instead of a hard-coded count, and minmax(...,1fr) (not a fixed px width) so a grid item never forces the row/page wider than its container, which is what caused horizontal page-dragging on phones before this fix. min-width:0 on the cards themselves is required too: grid/flex children default to min-width:auto, which lets long unbroken text (item names, effect strings) push a card past its own column. */ .game-skills-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap:10px; } .skill-card{ background:var(--bg2); border:1px solid var(--line); border-left:4px solid var(--accent); padding:12px 16px; min-width:0; overflow-wrap:anywhere; } .skill-card.drafted{border-left-color:var(--accent2);} .skill-card-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap;} .skill-card-name{font-weight:800; color:#fff; font-size:1rem;} .skill-card-meta{color:var(--accent2); font-size:0.72rem; text-transform:uppercase; letter-spacing:1px;} .skill-card-mp{color:var(--accent2); font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-top:6px; display:inline-block;} .skill-card-body{color:var(--gray); font-size:0.85rem; margin-top:6px;} .skill-card-wurf{color:var(--gray); font-size:0.78rem; margin-top:4px; font-style:italic;} .skill-card-badge{ display:inline-block; background:var(--accent2); color:#03131a; font-size:0.65rem; font-weight:800; padding:2px 8px; border-radius:2px; text-transform:uppercase; letter-spacing:1px; margin-left:6px; } .skill-asi-check{ display:flex; align-items:center; gap:6px; margin-top:10px; font-size:0.8rem; color:var(--accent2); cursor:pointer; } .skill-asi-check input{width:16px; height:16px; accent-color:var(--accent);} .skill-asi-check.is-confirmed{color:var(--gray); cursor:default;} .skill-card.skill-card-locked{opacity:0.55; border-left-color:var(--gray); filter:grayscale(0.6);} .item-card-menge{color:var(--accent2); font-weight:700;} .item-card-use-btn{ margin-top:10px; background:transparent; border:1px solid var(--line); color:var(--gray); padding:6px 12px; font-size:0.75rem; cursor:pointer; min-height:var(--tap); } .item-card-use-btn:hover{border-color:var(--accent2); color:var(--accent2);} /* ---------------------------------------------------------------------- */ /* Rarity color coding (Items.md 5-tier Seltenheit: Normal < Besser < Gut < */ /* Sehr gut < Legendär) — applied both to the player inventory cards */ /* (game.js renderInventory()) and the DM item tiles/rows */ /* (spielsteuerung.js), via the shared rarityColorClass(seltenheit) helper. */ /* ---------------------------------------------------------------------- */ .rarity-normal{--rarity-color:#e7ecf2;} .rarity-besser{--rarity-color:#3ddc73;} .rarity-gut{--rarity-color:var(--accent2);} .rarity-sehr-gut{--rarity-color:#b478ff;} .rarity-legendaer{--rarity-color:#ffcf4d;} .rarity-badge{ display:inline-block; font-size:0.65rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; padding:2px 8px; border-radius:2px; margin-left:6px; color:var(--rarity-color, var(--gray)); border:1px solid var(--rarity-color, var(--line)); } .skill-card.rarity-normal, .item-tile.rarity-normal{border-left-color:var(--rarity-color);} .skill-card.rarity-besser, .item-tile.rarity-besser{border-left-color:var(--rarity-color);} .skill-card.rarity-gut, .item-tile.rarity-gut{border-left-color:var(--rarity-color);} .skill-card.rarity-sehr-gut, .item-tile.rarity-sehr-gut{border-left-color:var(--rarity-color); box-shadow:0 0 14px rgba(180,120,255,.15);} .skill-card.rarity-legendaer, .item-tile.rarity-legendaer{border-left-color:var(--rarity-color); box-shadow:0 0 16px rgba(255,207,77,.25);} /* ---------------------------------------------------------------------- */ /* DM item-picker overlay (Kachel-System) — opened from the "+ Item */ /* hinzufügen" button in a player's unlocked inventory section */ /* (spielsteuerung.js). Categories with icons, live search, click-to-add. */ /* ---------------------------------------------------------------------- */ .item-overlay{ position:fixed; inset:0; z-index:500; background:rgba(3,6,12,.88); display:flex; align-items:center; justify-content:center; padding:16px; } .item-overlay[hidden]{display:none;} .item-overlay-box{ background:var(--bg2); border:2px solid var(--accent); width:100%; max-width:860px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden; } .item-overlay-head{ display:flex; gap:10px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); flex-shrink:0; } .item-overlay-search{ flex:1; min-width:0; background:#0d0d0d; border:1px solid #333; color:var(--white); padding:10px 12px; font-family:inherit; font-size:1rem; min-height:var(--tap); } .item-overlay-search:focus{outline:none; border-color:var(--accent);} .item-overlay-feedback{ padding:8px 16px; color:var(--accent2); font-size:0.8rem; font-weight:700; flex-shrink:0; min-height:1.2em; } .item-overlay-body{overflow-y:auto; padding:6px 16px 22px; min-width:0;} .item-cat-block{margin-bottom:20px;} .item-cat-block[hidden]{display:none;} .item-cat-title{ font-family:var(--font-head); color:var(--accent2); font-size:0.95rem; letter-spacing:1px; margin:0 0 10px; display:flex; align-items:center; gap:8px; } .item-tile-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap:10px; } .item-tile{ background:var(--bg3); border:1px solid var(--line); border-left:4px solid var(--accent); padding:10px; text-align:left; cursor:pointer; color:var(--white); font-family:inherit; transition:transform .15s ease, border-color .15s ease; min-width:0; min-height:var(--tap); } .item-tile:hover{transform:translateY(-2px); border-color:var(--accent2);} .item-tile:active{transform:translateY(0) scale(0.98);} .item-tile.just-added{border-color:var(--accent2); box-shadow:0 0 0 2px rgba(127,232,255,.35);} .item-tile-icon{font-size:1.3rem; display:block; margin-bottom:4px;} .item-tile-name{font-weight:700; font-size:0.82rem; display:block; overflow-wrap:anywhere;} .item-tile-meta{font-size:0.66rem; color:var(--gray); display:block; margin-top:2px;} .item-tile-effekt{font-size:0.72rem; color:var(--white); display:block; margin-top:6px; line-height:1.3; opacity:0.9;} .item-overlay-empty{color:var(--gray); font-size:0.85rem; padding:20px; text-align:center;} /* Spell-Draft tarot-style cards */ .draft-section{ background:linear-gradient(150deg, var(--bg3) 0%, var(--bg2) 80%); border:1px solid var(--accent); padding:20px 16px; margin-bottom:40px; } .draft-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap:16px; margin:18px 0; } .draft-card{ background:#0a0f1a; border:2px solid var(--accent); padding:18px 16px; text-align:center; position:relative; overflow:hidden; min-width:0; overflow-wrap:anywhere; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .draft-card::before{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(115deg, transparent 0 30px, rgba(127,232,255,.05) 30px 33px); } .draft-card:hover{transform:translateY(-6px) scale(1.03); border-color:var(--accent2); box-shadow:0 10px 32px rgba(31,182,212,.3);} .draft-card-kategorie{color:var(--accent2); font-size:0.68rem; letter-spacing:2px; text-transform:uppercase; margin:0 0 6px; position:relative;} .draft-card-name{ font-family:var(--font-head); font-size:1.35rem; color:#fff; margin:0 0 10px; letter-spacing:1px; position:relative; } .draft-card-art{color:var(--gray); font-size:0.78rem; text-transform:uppercase; letter-spacing:1px; margin:0 0 8px; position:relative;} .draft-card-effekt{color:var(--white); font-size:0.9rem; margin:0 0 8px; position:relative;} .draft-card-wurf{color:var(--gray); font-size:0.78rem; font-style:italic; margin:0 0 14px; position:relative;} .draft-card-pick{position:relative;} .draft-card.picked{border-color:var(--accent2); box-shadow:0 0 0 3px rgba(127,232,255,.3);} #draftRerollBtn{width:100%; max-width:280px; margin:0 auto; display:block;} #draftRerollBtn[disabled]{opacity:0.4; cursor:not-allowed;} /* Level-up achievement toast */ .achievement-toast{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:300; width:min(92vw, 420px); background:linear-gradient(120deg, var(--bg3), var(--bg2)); border:2px solid var(--accent2); box-shadow:0 10px 40px rgba(0,0,0,.6), 0 0 30px rgba(127,232,255,.3); animation: achievement-in .5s cubic-bezier(.2,.8,.2,1); } .achievement-toast[hidden]{display:none;} .achievement-toast-inner{display:flex; align-items:center; gap:14px; padding:16px 18px;} .achievement-icon{font-size:2rem; line-height:1; flex-shrink:0;} .achievement-title{ margin:0; font-family:var(--font-head); color:var(--accent2); letter-spacing:1px; font-size:1rem; text-transform:uppercase; } .achievement-body{margin:4px 0 0; color:var(--white); font-size:0.9rem;} .achievement-close{ margin-left:auto; background:none; border:1px solid var(--line); color:var(--gray); width:28px; height:28px; cursor:pointer; flex-shrink:0; } @keyframes achievement-in{ from{ opacity:0; transform:translateX(-50%) translateY(-30px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } } /* Draft confirm modal — must render ABOVE .fx-overlay (z-index 400): it is opened while the draft card stage inside the overlay is still showing, so if it sat below the overlay it would be invisible/untappable (the exact "stuck, can't confirm" bug on mobile — tap landed on the overlay behind it instead of the Yes/No buttons). */ .draft-confirm-modal{ position:fixed; inset:0; z-index:450; background:rgba(3,8,15,.82); display:flex; align-items:center; justify-content:center; padding:20px; } .draft-confirm-modal[hidden]{display:none;} .draft-confirm-box{ background:var(--bg2); border:2px solid var(--accent); padding:24px 22px; max-width:360px; width:100%; text-align:center; } .draft-confirm-box p{color:var(--white); font-weight:700; margin:0 0 18px;} .draft-confirm-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;} /* ---------------------------------------------------------------------- */ /* Full-screen FX overlay — Persona-style "All-Out Attack" burst, played */ /* once on level-up and on a confirmed spell-draft pick. Self-dismisses */ /* (see game.js playFx()); click also dismisses early. */ /* ---------------------------------------------------------------------- */ .fx-overlay{ position:fixed; inset:0; z-index:400; background:rgba(3,6,12,.88); display:flex; align-items:center; justify-content:center; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 0; cursor:pointer; } .fx-overlay[hidden]{display:none;} .fx-rays{ /* position:FIXED (not absolute) is the actual fix here — this is a purely decorative full-bleed layer, but it used to be position:absolute against .fx-overlay (which scrolls), and inset:-100% makes its box literally 3x the viewport in each dimension. That oversized box was part of .fx-overlay's scrollable content, so the overlay always had huge phantom scroll room and the draft cards/reroll button could end up needing a scroll to reach even though they'd otherwise fit. Fixed positioning takes it out of any ancestor's scrollable-overflow calculation entirely — it still visually covers the screen (fixed is relative to the viewport), just never affects layout/scroll extents. -100% (not -50%) so the rotating conic-gradient's square bounding box always fully covers the overlay's corners even on wide/tall viewports — a rotated square inset only -50% from each edge clips visibly at the corners on anything wider than it is tall. -100% guarantees the diagonal of the square covers the full rectangle at any aspect ratio. */ position:fixed; inset:-100%; z-index:1; background:repeating-conic-gradient(from 0deg, rgba(31,182,212,.35) 0deg 6deg, transparent 6deg 18deg); animation: fx-spin 2.4s linear infinite; opacity:0.8; } .fx-flash{ position:fixed; inset:0; z-index:2; background:var(--accent2); opacity:0; animation: fx-flash-pulse 1.8s ease-out 1; mix-blend-mode:screen; } .fx-content{position:relative; z-index:3; text-align:center; padding:24px; animation: fx-content-in .6s cubic-bezier(.2,.9,.2,1) 1;} .fx-kicker{ margin:0 0 8px; font-family:var(--font-head); color:var(--accent2); letter-spacing:5px; font-size:0.95rem; text-transform:uppercase; animation: fx-kicker-spread .7s cubic-bezier(.2,.9,.2,1) 1; } .fx-headline{ margin:0; font-family: Impact, 'Arial Narrow Bold', 'Arial Black', sans-serif; font-size:clamp(2.6rem, 14vw, 6rem); color:var(--white); text-transform:uppercase; letter-spacing:2px; line-height:0.95; transform:skewX(-6deg); display:inline-block; text-shadow:0 0 20px var(--accent2), 0 0 60px rgba(127,232,255,.6); animation: fx-headline-glow 1.1s ease-in-out .5s 1; } .fx-sub{margin:10px 0 0; color:var(--gray); font-size:0.95rem; animation: fx-sub-in .5s ease .3s both;} @keyframes fx-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes fx-flash-pulse{ 0%{ opacity:0; } 8%{ opacity:0.55; } 20%{ opacity:0; } 100%{ opacity:0; } } @keyframes fx-content-in{ 0%{ opacity:0; transform:scale(0.6); } 60%{ opacity:1; transform:scale(1.08); } 100%{ opacity:1; transform:scale(1); } } @keyframes fx-kicker-spread{ 0%{ opacity:0; letter-spacing:1px; } 100%{ opacity:1; letter-spacing:5px; } } @keyframes fx-sub-in{ 0%{ opacity:0; transform:translateY(6px); } 100%{ opacity:1; transform:translateY(0); } } /* One extra glow "breath" right after the headline lands (fx-content-in already handles the pop-in scale) — timed to start once that settles, giving the burst a little more weight than a single static text-shadow. */ @keyframes fx-headline-glow{ 0%{ text-shadow:0 0 20px var(--accent2), 0 0 60px rgba(127,232,255,.6); } 50%{ text-shadow:0 0 34px var(--accent2), 0 0 90px rgba(127,232,255,.9); } 100%{ text-shadow:0 0 20px var(--accent2), 0 0 60px rgba(127,232,255,.6); } } /* Shockwave rings — expand outward from center once on open, layered with a slight stagger for a bit more depth than the spinning rays alone gave. */ .fx-ring{ /* position:fixed for the same reason as .fx-rays above — this grows up to 220vw via the keyframe below, which was inflating .fx-overlay's scrollable content area by a huge margin every single time it played. */ position:fixed; top:50%; left:50%; z-index:2; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; border:3px solid var(--accent2); opacity:0; pointer-events:none; animation: fx-ring-burst 1.1s cubic-bezier(.15,.8,.3,1) 1; } .fx-ring-delay{animation-delay:.15s; border-color:var(--accent);} @keyframes fx-ring-burst{ 0%{ width:10px; height:10px; margin:-5px 0 0 -5px; opacity:.85; border-width:6px; } 70%{ opacity:.3; } 100%{ width:min(1400px, 220vw); height:min(1400px, 220vw); margin-top:calc(min(1400px, 220vw) / -2); margin-left:calc(min(1400px, 220vw) / -2); opacity:0; border-width:1px; } } /* ---------------------------------------------------------------------- */ /* Draft "card draw" stage inside the fx-overlay: a stacked deck deals out */ /* 3 cards (drawn + spread animation), which then get replaced by the */ /* real interactive draft cards in the same positions. Also reused for the */ /* reroll animation (same deal, new cards). */ /* ---------------------------------------------------------------------- */ .fx-draft-stage{position:relative; z-index:3; width:100%; max-width:920px; padding:16px; text-align:center;} .fx-draft-stage[hidden]{display:none;} .fx-deck{position:relative; height:170px; margin:14px auto 8px;} .fx-deck[hidden]{display:none;} .fx-deck-card{ position:absolute; top:50%; left:50%; width:100px; height:150px; margin:-75px 0 0 -50px; background:linear-gradient(135deg, var(--bg3), var(--bg2)); border:2px solid var(--accent); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.55); } .fx-deck-card:nth-child(1){ transform:translate(-3px,-3px) rotate(-3deg); } .fx-deck-card:nth-child(2){ transform:translate(0,0) rotate(0deg); } .fx-deck-card:nth-child(3){ transform:translate(3px,3px) rotate(3deg); } .fx-deck-draw-a,.fx-deck-draw-b,.fx-deck-draw-c{ border-color:var(--accent2); opacity:0; } .fx-deck.dealing .fx-deck-draw-a{ animation:fx-deal-a .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:.05s; } .fx-deck.dealing .fx-deck-draw-b{ animation:fx-deal-b .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:.2s; } .fx-deck.dealing .fx-deck-draw-c{ animation:fx-deal-c .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:.35s; } @keyframes fx-deal-a{ 0%{ opacity:0; transform:translate(0,0) rotate(0deg) scale(0.9); } 15%{ opacity:1; } 100%{ opacity:1; transform:translate(-140px,-10px) rotate(-8deg) scale(1); } } @keyframes fx-deal-b{ 0%{ opacity:0; transform:translate(0,0) rotate(0deg) scale(0.9); } 15%{ opacity:1; } 100%{ opacity:1; transform:translate(0,-20px) rotate(0deg) scale(1.04); } } @keyframes fx-deal-c{ 0%{ opacity:0; transform:translate(0,0) rotate(0deg) scale(0.9); } 15%{ opacity:1; } 100%{ opacity:1; transform:translate(140px,-10px) rotate(8deg) scale(1); } } .fx-draft-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap:14px; margin:10px 0 16px; width:100%; } .fx-draft-cards[hidden]{display:none;} .fx-draft-cards .draft-card{min-width:0; animation: fx-card-reveal .6s cubic-bezier(.2,.8,.2,1) both;} .fx-draft-cards .draft-card:nth-child(1){animation-delay:.02s;} .fx-draft-cards .draft-card:nth-child(2){animation-delay:.14s;} .fx-draft-cards .draft-card:nth-child(3){animation-delay:.26s;} @keyframes fx-card-reveal{ /* Enlarged from the original 12px/0.92/90deg — the user reported the reveal as "too small" to read as an actual card-flip. Bigger rise + stronger initial scale-down + full 3D flip make the reveal read clearly even on a small phone screen, while prefers-reduced-motion still turns this off entirely below. */ 0%{ opacity:0; transform:translateY(28px) scale(0.82) rotateY(110deg); } 60%{ opacity:1; } 100%{ opacity:1; transform:translateY(0) scale(1) rotateY(0deg); } } #fxDraftReroll[hidden]{display:none;} /* Compact draft stage on phones — cards + reroll button must fit within the viewport with no scrolling needed at all (DM feedback: the deal phase used to visually push the whole overlay taller than the display). Scales the same layout down instead of hiding anything. */ @media (max-width: 600px){ .fx-draft-stage{padding:6px 8px;} .fx-draft-stage .fx-kicker{margin-bottom:4px; font-size:0.8rem; letter-spacing:3px;} .fx-deck{height:100px; margin:4px auto 2px;} .fx-deck-card{width:62px; height:92px; margin:-46px 0 0 -31px;} .fx-deck.dealing .fx-deck-draw-a{ animation-name:fx-deal-a-sm; } .fx-deck.dealing .fx-deck-draw-b{ animation-name:fx-deal-b-sm; } .fx-deck.dealing .fx-deck-draw-c{ animation-name:fx-deal-c-sm; } /* 3 readable cards stacked vertically never fit a phone's height without scrolling the whole page — and that page-level scroll is exactly what the .fx-rays bug above used to corrupt. Instead of shrinking text to the point of unreadability to force a 3-column grid, this becomes a one-card-at-a-time horizontal swipe carousel (scroll-snap): the reroll button then sits right below a single card's height, always visible with no page scroll needed at all — swiping sideways between cards is a normal, expected mobile gesture, not the "broken" scroll being fixed. */ .fx-draft-cards{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; margin:6px 0 10px; padding:0 8% 4px; -webkit-overflow-scrolling:touch; } .fx-draft-cards .draft-card{ flex:0 0 84%; scroll-snap-align:center; padding:14px 12px; } .fx-draft-cards .draft-card-kategorie{margin-bottom:4px;} .fx-draft-cards .draft-card-name{font-size:1.15rem; margin-bottom:6px;} .fx-draft-cards .draft-card-art{font-size:0.7rem; margin-bottom:6px;} .fx-draft-cards .draft-card-effekt{font-size:0.85rem; margin-bottom:6px;} .fx-draft-cards .draft-card-wurf{font-size:0.7rem; margin-bottom:10px;} .fx-draft-cards .draft-card-pick{padding:10px 16px; font-size:0.82rem;} #fxDraftReroll{padding:10px 18px; font-size:0.82rem;} @keyframes fx-deal-a-sm{ 0%{ opacity:0; transform:translate(0,0) rotate(0deg) scale(0.9); } 15%{ opacity:1; } 100%{ opacity:1; transform:translate(-86px,-6px) rotate(-8deg) scale(1); } } @keyframes fx-deal-b-sm{ 0%{ opacity:0; transform:translate(0,0) rotate(0deg) scale(0.9); } 15%{ opacity:1; } 100%{ opacity:1; transform:translate(0,-12px) rotate(0deg) scale(1.04); } } @keyframes fx-deal-c-sm{ 0%{ opacity:0; transform:translate(0,0) rotate(0deg) scale(0.9); } 15%{ opacity:1; } 100%{ opacity:1; transform:translate(86px,-6px) rotate(8deg) scale(1); } } } @media (prefers-reduced-motion: reduce){ .achievement-toast{animation:none;} .draft-card{transition:none;} .fx-rays,.fx-flash,.fx-ring{animation:none; display:none;} .phone-clock-colon{animation:none;} .fx-content,.fx-kicker,.fx-headline,.fx-sub{animation:none;} .fx-deck-draw-a,.fx-deck-draw-b,.fx-deck-draw-c{animation:none !important; opacity:1; transform:translate(0,0) rotate(0) scale(1) !important;} .fx-draft-cards .draft-card{animation:none;} } /* ---------------- Phone shell (game.html "iPhone" App-Homescreen) ---------- Early-2010s-iPhone *feeling* (rounded square app icons, homescreen grid, fullscreen apps, back arrow top-left) reinterpreted in EIDOS's own Navy/Cyan look — not a literal iOS skin. See game.js for the small data-app router that shows/hides one .phone-app-screen at a time. */ .phone-frame{ position:relative; max-width:420px; margin:0 auto; height:680px; border:1px solid var(--line); border-radius:34px; padding:8px; box-shadow:0 10px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(127,232,255,.04); /* The wallpaper now lives on the frame itself (not on .phone-home), so it fills the entire display behind the back button row too — previously that sat in a plain --bg2 strip above a separately rounded wallpaper card, which read as "the app screen doesn't fill the phone". overflow-y:auto lets content scroll while still clipping to the rounded corners (overflow-x computes to auto too per spec once one axis isn't visible, which is enough to clip at the radius). overscroll-behavior:contain stops a swipe that hits the top/bottom of this scroll area from "leaking" into the page behind it — without it, an iOS rubber-band bounce at the scroll boundary drags the whole site (sidebar background etc.) along with the swipe for a frame, which reads as "swiping the foreground shoves the background around". */ background: radial-gradient(circle at 30% 12%, rgba(31,182,212,.22), transparent 55%), radial-gradient(circle at 80% 90%, rgba(127,232,255,.14), transparent 50%), linear-gradient(160deg, #0a1526 0%, #050a13 100%); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; } /* Back button: floats bottom-center over whatever app screen is open, instead of sitting top-left — the top-left corner is where iOS's own edge-swipe-back gesture lives and was eating taps meant for this button. Bottom-center is thumb-reachable and gesture-free. */ .phone-back-btn{ /* Bottom-right (not centered) so it never sits on top of a full-width bottom action bar like the chat send form — .chat-send-form reserves matching space on its right edge so the Send button stays fully clear of it too. */ position:absolute; right:calc(14px + env(safe-area-inset-right)); bottom:calc(14px + env(safe-area-inset-bottom)); z-index:20; width:44px; height:44px; border-radius:50%; border:1px solid var(--accent); background:var(--bg2); color:var(--accent2); font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 0 3px rgba(31,182,212,.12); } .phone-back-btn[hidden]{display:none;} /* Home-screen "widgets" (iOS/Android style cards sitting among the app icons) — live Yen balance (fed by game.js's poll via game-phone.js, see updateYenFrom()) and a retro 8-bit clock underneath it. */ .phone-widgets{padding:6px 10px 0; display:flex; flex-direction:column; gap:12px;} .phone-widget{ display:flex; align-items:center; gap:14px; background:rgba(13,21,36,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(127,232,255,.2); border-radius:20px; padding:14px 18px; box-shadow:0 6px 18px rgba(0,0,0,.3); } .phone-widget-icon{font-size:1.6rem; line-height:1;} .phone-widget-text{display:flex; flex-direction:column; gap:2px;} .phone-widget-label{font-size:0.66rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray); font-weight:700;} .phone-widget-value{font-size:1.35rem; font-weight:800; color:var(--accent2); font-family:var(--font-head); line-height:1.1;} /* 8-bit / retro-LCD styled clock widget: blocky pixel font via a stepped text-shadow (fakes a low-res glow without needing a custom web font), thin scanline texture over the card, blinking colon like a real digital clock. Time itself comes from game-phone.js's tickClock(). */ .phone-widget-clock{ justify-content:center; position:relative; overflow:hidden; background:linear-gradient(160deg, rgba(10,20,10,.7), rgba(5,12,8,.7)); border-color:rgba(138,255,193,.28); } .phone-widget-clock::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; background:repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 2px, transparent 2px 4px); } .phone-clock-8bit{ position:relative; z-index:1; font-family:'Courier New', ui-monospace, monospace; font-weight:800; font-size:1.9rem; letter-spacing:4px; color:#8affc1; text-shadow:0 0 1px #8affc1, 0 0 10px rgba(138,255,193,.65), 2px 2px 0 rgba(0,0,0,.6); } .phone-clock-colon{animation: phone-clock-blink 1s step-end infinite;} @keyframes phone-clock-blink{ 50%{ opacity:0; } } .phone-home{ flex:1; padding:14px 4px 14px; } .phone-app-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px 14px; padding:16px 8px 6px; } .phone-app-icon{ background:none; border:none; color:var(--white); cursor:pointer; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:6px; padding:4px; font-family:var(--font-body); } .phone-app-emoji{ position:relative; width:100%; aspect-ratio:1; max-width:64px; margin:0 auto; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg, var(--bg3), var(--bg2)); border:1px solid var(--line); border-radius:18px; color:var(--white); box-shadow:0 4px 10px rgba(0,0,0,.35); } .phone-app-emoji svg{width:52%; height:52%;} .phone-app-badge{ position:absolute; top:-4px; right:-4px; width:20px; height:20px; border-radius:50%; background:#e5484d; color:#fff; font-size:0.8rem; font-weight:800; line-height:1; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg2); box-shadow:0 2px 6px rgba(0,0,0,.4); } .phone-app-badge[hidden]{display:none;} .phone-app-icon:hover .phone-app-emoji, .phone-app-icon:focus-visible .phone-app-emoji{ border-color:var(--accent2); } .phone-app-icon:active .phone-app-emoji{transform:translateY(1px) scale(0.97);} .phone-app-label{font-size:0.72rem; color:var(--gray); text-align:center;} .phone-app-screen[hidden]{display:none;} /* The Fragmentierungsscanner tile is deliberately styled to clash with every other icon — black/red instead of the site's navy/cyan, a slow uneasy pulse instead of a calm hover state — a diegetic "this doesn't belong here" hook tied to the campaign's hidden Antagonist thread. */ .phone-app-icon-scanner .phone-app-emoji{ background:linear-gradient(160deg, #1a0505, #0a0202); border-color:#ff2b4d; color:#ff2b4d; box-shadow:0 4px 14px rgba(255,43,77,.35), 0 0 0 1px rgba(255,43,77,.25) inset; animation:scanner-icon-pulse 2.6s ease-in-out infinite; } .phone-app-icon-scanner .phone-app-label{color:#ff6b7d;} @keyframes scanner-icon-pulse{ 0%,100%{ box-shadow:0 4px 14px rgba(255,43,77,.35), 0 0 0 1px rgba(255,43,77,.25) inset; } 50%{ box-shadow:0 4px 22px rgba(255,43,77,.65), 0 0 0 2px rgba(255,43,77,.4) inset; } } .phone-app-screen-scanner{ background:#0a0202 !important; border:1px solid rgba(255,43,77,.3); font-family:'Courier New', ui-monospace, monospace; } .scanner-title{ color:#ff2b4d; font-size:1.1rem; letter-spacing:2px; margin:6px 0 18px; text-shadow:0 0 8px rgba(255,43,77,.6); animation:scanner-flicker 4s linear infinite; } .scanner-readout{display:flex; flex-direction:column; gap:14px;} .scanner-line{margin:0; color:#ff8a95; font-size:0.85rem; letter-spacing:.5px;} .scanner-error{color:#ff2b4d; font-weight:700;} .scanner-warn{color:#ff2b4d; font-weight:700; animation:scanner-flicker 1.6s linear infinite;} .scanner-bar{color:#ff2b4d; letter-spacing:1px;} .scanner-cursor{animation:phone-clock-blink 1s step-end infinite;} @keyframes scanner-flicker{ 0%, 92%, 100%{ opacity:1; } 93%, 95%{ opacity:.4; } 94%{ opacity:.85; } } /* Live DM-controlled gauge (0-100%, see dmScannerSlider in Spielsteuerung) */ .scanner-gauge-row{display:flex; align-items:baseline; justify-content:space-between; margin-top:-6px;} .scanner-gauge-value{color:#ff2b4d; font-weight:800; font-size:1.1rem; text-shadow:0 0 8px rgba(255,43,77,.6);} .scanner-gauge-track{ height:14px; border:1px solid rgba(255,43,77,.4); border-radius:7px; background:#150505; overflow:hidden; } .scanner-gauge-fill{ height:100%; background:linear-gradient(90deg, #7a0d1c, #ff2b4d); box-shadow:0 0 12px rgba(255,43,77,.7); transition:width .6s ease; } .scanner-enter-btn{ margin-top:8px; padding:14px; border-radius:10px; border:1px solid #ff2b4d; background:linear-gradient(160deg, #4a0812, #1a0505); color:#fff; font-family:inherit; font-weight:800; letter-spacing:2px; font-size:0.9rem; cursor:pointer; box-shadow:0 0 20px rgba(255,43,77,.5); animation:scanner-enter-pulse 1.6s ease-in-out infinite; } .scanner-enter-btn[hidden]{display:none;} @keyframes scanner-enter-pulse{ 0%,100%{ box-shadow:0 0 14px rgba(255,43,77,.5); } 50%{ box-shadow:0 0 30px rgba(255,43,77,.85); } } @media (prefers-reduced-motion: reduce){ .phone-app-icon-scanner .phone-app-emoji{animation:none;} .scanner-title, .scanner-warn, .scanner-cursor, .scanner-enter-btn{animation:none;} } /* ---------------------------------------------------------------------- */ /* Zwischenwelt — global red reskin of the phone UI once the party has */ /* crossed over (see /api/game/scanner/enter, game.js applyOtherworld()). */ /* Most of the phone's color already comes from --accent/--accent2, so */ /* overriding those two variables on body.otherworld-active reskins nearly */ /* everything (widgets, icon borders, buttons, active states) for free — */ /* only the wallpaper gradient (hardcoded rgba, not var-based) needs its */ /* own override below. transition on the frame softens the flip; the */ /* dramatic bit is the reused fx-overlay burst (playFx()) firing alongside.*/ /* ---------------------------------------------------------------------- */ body.otherworld-active{ --accent:#ff2b4d; --accent2:#ff6b7d; --dm-gold:#ff8a4d; /* --bg/--bg2/--bg3 feed EVERY card/tile surface across the phone (widgets, app-icon tiles, sheet fieldsets, ...), not just borders/text — without this they stayed navy while only accents flipped red. This also fixes the reported "background doesn't reach the bottom on a real phone": that strip was the plain `body{background:var(--bg)}` showing through at the safe-area edge, still navy because --bg wasn't in the override list — now it's dark red too, so even that sliver matches. */ --bg:#0a0202; --bg2:#160506; --bg3:#210709; } body.otherworld-active .phone-frame{ background: radial-gradient(circle at 30% 12%, rgba(255,43,77,.28), transparent 55%), radial-gradient(circle at 80% 90%, rgba(255,107,125,.16), transparent 50%), linear-gradient(160deg, #1a0508 0%, #050202 100%); transition:background 1.1s ease; } .phone-frame{transition:background 1.1s ease;} /* Shatter transition — plays while crossing into/out of the Zwischenwelt instead of the golden level-up burst (deliberately dark/ominous rather than triumphant): screen-to-black, jagged cracks draw outward from center, then fade to reveal whatever theme is now underneath (the red/normal flip happens hidden behind the black, mid-animation — see game.js playShatter()). No sound for now, per instruction. */ .shatter-overlay{ position:fixed; inset:0; z-index:410; background:#000; opacity:0; display:flex; align-items:center; justify-content:center; pointer-events:none; } .shatter-overlay[hidden]{display:none;} .shatter-overlay.shatter-play{animation:shatter-fade 1.3s ease-in-out forwards;} .shatter-cracks{width:100%; height:100%; max-width:900px; max-height:900px;} .shatter-cracks path{ fill:none; stroke:#ff2b4d; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:500; stroke-dashoffset:500; filter:drop-shadow(0 0 6px rgba(255,43,77,.7)); opacity:0; } .shatter-overlay.shatter-play .shatter-cracks path{ animation:shatter-crack-draw .5s ease-out forwards; } .shatter-overlay.shatter-play .shatter-cracks path:nth-child(2){animation-delay:.04s;} .shatter-overlay.shatter-play .shatter-cracks path:nth-child(3){animation-delay:.08s;} .shatter-overlay.shatter-play .shatter-cracks path:nth-child(4){animation-delay:.05s;} .shatter-overlay.shatter-play .shatter-cracks path:nth-child(5){animation-delay:.1s;} .shatter-overlay.shatter-play .shatter-cracks path:nth-child(6){animation-delay:.03s;} .shatter-overlay.shatter-play .shatter-cracks path:nth-child(7){animation-delay:.16s;} .shatter-overlay.shatter-play .shatter-cracks path:nth-child(8){animation-delay:.18s;} @keyframes shatter-crack-draw{ 0%{ opacity:0; stroke-dashoffset:500; } 20%{ opacity:1; } 100%{ opacity:1; stroke-dashoffset:0; } } @keyframes shatter-fade{ 0%{ opacity:0; } 35%{ opacity:1; } 75%{ opacity:1; } 100%{ opacity:0; } } @media (prefers-reduced-motion: reduce){ .shatter-overlay.shatter-play{animation:shatter-fade-reduced .6s ease-in-out forwards;} .shatter-overlay.shatter-play .shatter-cracks path{animation:none; opacity:1; stroke-dashoffset:0;} @keyframes shatter-fade-reduced{ 0%{opacity:0;} 50%{opacity:1;} 100%{opacity:0;} } } /* Opened apps get their own solid, rounded "sheet" over the wallpaper (rather than showing wallpaper behind their content) so existing card/ list content inside them stays as readable as before this redesign. */ .phone-app-screen{ flex:1; padding:14px 14px 4px; margin:0 -8px -8px; background:var(--bg2); border-radius:22px 22px 26px 26px; } /* Mobile fullscreen — on phones the Game page should feel like its own app, not a card embedded in the normal sidebar site: below the breakpoint the sidebar/topbar/footer/TOC around it are hidden and .phone-frame expands to fill the whole viewport (fixed, no border/radius/margin). Desktop keeps the original "phone card" look untouched — this block only fires below 900px AND only on game.html (via body.game-page, set in page_shell()). */ @media (max-width: 900px){ body.game-page .sidebar, body.game-page .nav-toggle, body.game-page .nav-scrim, body.game-page .topbar, body.game-page .page-toc, body.game-page .site-footer, body.game-page .dm-panel-tab{display:none !important;} body.game-page .app-shell{margin-left:0;} body.game-page .page-shell{display:block; max-width:none; padding:0;} body.game-page .page-content{max-width:none; padding:0; margin:0;} body.game-page .game-screen{max-width:none; margin:0;} body.game-page .phone-frame{ position:fixed; inset:0; z-index:5; width:100%; /* 100% (and 100vh) is the classic iOS Safari trap here: both resolve against the *largest possible* viewport, which is taller than what's actually visible once the (real or standalone-title-bar-less) chrome is accounted for — the frame ends up a bit short of the real bottom edge, exactly the "not fully filled" gap reported. 100dvh tracks the actual visible viewport instead; declared after the vh/% fallback so browsers that don't support dvh yet still get a sane height. */ height:100%; height:100vh; height:100dvh; max-width:none; margin:0; border:none; border-radius:0; padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)); box-shadow:none; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } /* The back button is position:absolute against .phone-frame, which is ALSO the scroll container above — so it scrolled away with the content instead of staying put. Since .phone-frame fills the entire viewport here, position:fixed (relative to the viewport, immune to any inner scrolling) lands in exactly the same visual spot while never moving. */ body.game-page .phone-back-btn{position:fixed;} /* Belt-and-suspenders against the same scroll-chaining issue: the page behind the phone frame can never move at all while the Game hub fills the screen, so even a rubber-band bounce inside .phone-frame has nothing to drag along. */ body.game-page{position:fixed; inset:0; overflow:hidden; overscroll-behavior:none;} } /* Spellbook (Zauber-App) */ .spellbook-search{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg3); color:var(--white); margin:10px 0 14px; font-size:0.9rem; } .spellbook-kategorie-title{ color:var(--accent2); font-size:0.75rem; text-transform:uppercase; letter-spacing:1.5px; margin:18px 0 8px; font-weight:800; } .spellbook-list .skill-card{margin-bottom:10px;} /* Social Links (App) */ .social-link-card{ border-left:3px solid var(--accent2); background:var(--bg3); border-radius:10px; padding:12px 14px; margin-bottom:12px; } .social-link-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap;} .social-link-name{font-weight:800; color:#fff;} .social-link-rank{color:var(--accent2); font-size:0.75rem; text-transform:uppercase; letter-spacing:1px;} .social-link-arkana{color:var(--gray); font-size:0.78rem; margin:2px 0 8px;} .social-link-perks{margin:8px 0 0; padding-left:18px; color:var(--gray); font-size:0.82rem;} .social-link-perks li{margin-bottom:4px;} /* Bank (App) */ .bank-balance-card{ text-align:center; background:linear-gradient(160deg, var(--bg3), var(--bg2)); border:1px solid var(--line); border-radius:16px; padding:18px; margin:10px 0 18px; } .bank-balance-label{color:var(--gray); font-size:0.75rem; text-transform:uppercase; letter-spacing:1.5px; margin:0;} .bank-balance-value{font-size:2rem; font-weight:900; color:var(--accent2); margin:4px 0 0;} .bank-transfer-form{ display:flex; flex-direction:column; gap:10px; background:var(--bg3); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:18px; } .bank-transfer-form label{display:flex; flex-direction:column; gap:4px; font-size:0.78rem; color:var(--gray);} .bank-transfer-form input, .bank-transfer-form select{ padding:9px 10px; border-radius:8px; border:1px solid var(--line); background:var(--bg2); color:var(--white); } .bank-history{display:flex; flex-direction:column; gap:8px;} .bank-tx-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg3); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:0.82rem; } .bank-tx-row.is-incoming .bank-tx-amount{color:#3ddc73;} .bank-tx-row.is-outgoing .bank-tx-amount{color:#ff6b6b;} .bank-tx-main{color:var(--white);} .bank-tx-note{color:var(--gray); font-size:0.72rem; display:block;} .bank-tx-amount{font-weight:800; white-space:nowrap;} /* Ausrüstung (App) — 3 slot cards (Rüstung/Accessoire/Waffe) */ .equip-slots{display:flex; flex-direction:column; gap:14px;} .equip-slot-card{ background:var(--bg3); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px; padding:14px 16px; } .equip-slot-label{color:var(--accent2); font-size:0.72rem; text-transform:uppercase; letter-spacing:1.5px; margin:0 0 8px; font-weight:800;} .equip-slot-empty{color:var(--gray); font-size:0.85rem; margin:0;} .equip-slot-pick-btn{ margin-top:8px; background:transparent; border:1px solid var(--line); color:var(--accent2); padding:8px 14px; font-size:0.8rem; cursor:pointer; min-height:var(--tap); border-radius:6px; } .equip-slot-pick-btn:hover{border-color:var(--accent2);} .equip-slot-item-name{font-weight:800; color:#fff; font-size:1rem; margin:0;} .equip-slot-item-effekt{color:var(--white); font-size:0.85rem; margin:6px 0 4px; opacity:0.9;} .equip-slot-item-note{color:var(--gray); font-size:0.75rem; margin:4px 0; font-style:italic;} .equip-slot-unequip-btn{ margin-top:8px; background:transparent; border:1px solid #ff6b6b; color:#ff6b6b; padding:8px 14px; font-size:0.8rem; cursor:pointer; min-height:var(--tap); border-radius:6px; } .equip-slot-unequip-btn:hover{background:rgba(255,107,107,.1);} /* Karte (App) */ .map-placeholder{ background:var(--bg3); border:1px solid var(--line); border-radius:14px; padding:16px; } .map-pin-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;} .map-pin-list li{ display:flex; align-items:center; gap:10px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; } .map-pin-icon{font-size:1.1rem;} .map-pin-name{font-weight:700; color:#fff;} /* ---------------------------------------------------------------------- */ /* Chat — shared look for both the player-facing phone app (game.html) and */ /* the DM's Spielsteuerung chat section. Conversation list + message */ /* thread, WhatsApp-style bubbles (mine on the right, others on the left). */ /* ---------------------------------------------------------------------- */ .chat-conv-list{display:flex; flex-direction:column; gap:8px;} .chat-conv-btn{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; width:100%; background:var(--bg3); border:1px solid var(--line); border-radius:12px; padding:10px 14px; color:var(--white); cursor:pointer; font-family:var(--font-body); } .chat-conv-btn:hover, .chat-conv-btn:focus-visible{border-color:var(--accent);} .chat-conv-btn.active{border-color:var(--accent2); background:linear-gradient(90deg, rgba(31,182,212,.14), var(--bg3) 70%);} .chat-conv-name{font-weight:700; font-size:0.88rem;} .chat-conv-preview{color:var(--gray); font-size:0.76rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .chat-conv-readonly{font-size:0.68rem; color:var(--gray); opacity:.8; text-transform:uppercase; letter-spacing:.5px;} .chat-messages{ display:flex; flex-direction:column; gap:8px; overflow-y:auto; padding:6px 2px; min-height:120px; } .chat-msg{max-width:82%; padding:8px 12px; border-radius:14px; background:var(--bg3); border:1px solid var(--line);} .chat-msg-mine{align-self:flex-end; background:linear-gradient(135deg, rgba(31,182,212,.28), var(--bg3)); border-color:var(--accent);} .chat-msg-dm{border-color:var(--dm-gold, #ffcf6b);} .chat-msg-meta{display:flex; gap:8px; align-items:baseline; margin-bottom:2px;} .chat-msg-name{font-size:0.72rem; font-weight:800; color:var(--accent2);} .chat-msg-time{font-size:0.64rem; color:var(--gray);} .chat-msg-text{font-size:0.88rem; color:var(--white); white-space:pre-wrap; overflow-wrap:break-word;} /* Phone app variant */ #chatListView, #chatThreadView, #chatContactsView{display:flex; flex-direction:column; gap:10px; height:100%;} #chatListView[hidden], #chatThreadView[hidden], #chatContactsView[hidden]{display:none;} .chat-list-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;} .chat-list-head .game-section-title{margin:0;} .chat-thread-back{ align-self:flex-start; background:none; border:none; color:var(--accent2); font-weight:700; font-size:0.85rem; cursor:pointer; padding:4px 0; } .chat-contact-kind{font-size:0.68rem; text-transform:uppercase; letter-spacing:1px; color:var(--gray); opacity:.8;} .chat-thread-title{margin:0 0 4px;} .chat-send-form{display:flex; gap:8px; flex-shrink:0; padding-right:56px;} .chat-send-form[hidden]{display:none;} .chat-send-form input{ flex:1; background:var(--bg3); border:1px solid var(--line); border-radius:999px; padding:10px 16px; color:var(--white); font-size:0.88rem; } .chat-send-form input:focus{outline:none; border-color:var(--accent);} #chatMessages{flex:1;} /* DM cockpit variant — two-column layout, list left / thread right */ .dm-chat-layout{display:grid; grid-template-columns:260px 1fr; gap:16px; align-items:start;} .dm-chat-conv-list{display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto;} .dm-chat-thread{ background:var(--bg3); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; min-height:300px; } .dm-chat-thread-head{display:flex; align-items:center; justify-content:space-between; gap:10px;} .dm-chat-thread-head h4{margin:0; font-size:1rem;} .dm-chat-messages, .dm-chat-thread .chat-messages{max-height:340px;} .dm-chat-send-form{display:flex; flex-direction:column; gap:8px;} .dm-chat-send-form[hidden]{display:none;} .dm-chat-send-form input{ background:#0a0e14; border:1px solid var(--line); border-radius:8px; padding:9px 12px; color:var(--white); font-size:0.85rem; } .dm-chat-send-form input:focus{outline:none; border-color:var(--accent);} .dm-chat-send-row{display:flex; gap:8px;} .dm-chat-send-row input{flex:1;} .dm-chat-conv-col{display:flex; flex-direction:column; gap:10px;} .dm-chat-newgroup-btn{width:100%;} .dm-chat-newgroup-form{ display:flex; flex-direction:column; gap:10px; background:var(--bg3); border:1px solid var(--line); border-radius:10px; padding:12px; } .dm-chat-newgroup-form[hidden]{display:none;} .dm-chat-newgroup-form input[type="text"]{ background:#0a0e14; border:1px solid var(--line); border-radius:8px; padding:9px 12px; color:var(--white); font-size:0.85rem; } .dm-chat-newgroup-checks{display:flex; flex-direction:column; gap:6px; font-size:0.85rem;} .dm-chat-newgroup-checks label{display:flex; align-items:center; gap:8px;} .dm-chat-persona-chips{display:flex; flex-wrap:wrap; gap:6px;} .dm-chat-persona-chip{ background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:0.76rem; color:var(--accent2); cursor:pointer; } .dm-chat-persona-chip:hover{border-color:var(--accent);} .dm-chat-persona-chip-del{margin-left:6px; color:var(--gray); cursor:pointer;} .dm-chat-persona-chip-del:hover{color:#ff6b6b;} @media (max-width: 720px){ .dm-chat-layout{grid-template-columns:1fr;} .dm-chat-conv-list{max-height:220px;} } /* Spielsteuerung Bank-Kontrolle */ /* Spielsteuerung Fragmentierungsscanner control */ .dm-scanner-panel{ background:linear-gradient(160deg, #1a0508, #0d0304); border:1px solid rgba(255,43,77,.35); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:14px; } .dm-scanner-slider-row{display:flex; align-items:center; gap:14px;} .dm-scanner-slider-row input[type="range"]{flex:1; accent-color:#ff2b4d;} .dm-scanner-value{color:#ff2b4d; font-weight:800; font-size:1.1rem; min-width:48px; text-align:right;} .dm-scanner-status-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;} .dm-scanner-status{color:var(--gray); font-size:0.85rem;} .dm-scanner-status.is-active{color:#ff2b4d; font-weight:700;} .dm-scanner-visible-row{border-top:1px solid rgba(255,43,77,.2); padding-top:12px;} .dm-scanner-visible-label{display:flex; align-items:center; gap:10px; color:var(--gray); font-size:0.9rem; cursor:pointer;} .dm-scanner-visible-label input[type="checkbox"]{accent-color:#ff2b4d; width:18px; height:18px;} /* Editor (Phase 3) */ .editor-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; border-bottom:1px solid var(--line);} .editor-tab{ background:none; border:none; border-bottom:2px solid transparent; color:var(--gray); padding:10px 14px; font-size:0.92rem; font-weight:600; cursor:pointer; } .editor-tab.active{color:var(--accent); border-bottom-color:var(--accent);} .editor-panel{display:grid; grid-template-columns:280px 1fr; gap:20px;} .editor-panel[hidden]{display:none;} @media (max-width:760px){ .editor-panel{grid-template-columns:1fr;} } .editor-list-col{display:flex; flex-direction:column; gap:10px;} .editor-search{ background:var(--bg2); border:1px solid var(--line); border-radius:8px; color:var(--white); padding:9px 12px; font-size:0.9rem; } .editor-new-btn{width:100%;} .editor-list{display:flex; flex-direction:column; gap:4px; max-height:520px; overflow-y:auto;} .editor-list-item{ display:block; width:100%; text-align:left; background:var(--bg2); border:1px solid transparent; border-radius:8px; padding:9px 12px; color:var(--white); cursor:pointer; font-size:0.88rem; } .editor-list-item:hover{border-color:var(--accent);} .editor-list-item.active{border-color:var(--accent); background:rgba(127,232,255,.08);} .editor-list-item small{display:block; color:var(--gray); font-size:0.78rem; margin-top:2px;} .editor-form{display:flex; flex-direction:column; gap:12px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:18px;} .editor-form[hidden]{display:none;} .editor-form label{display:flex; flex-direction:column; gap:5px; font-size:0.85rem; color:var(--gray); font-weight:600;} .editor-form input[type="text"], .editor-form input[type="number"], .editor-form select, .editor-form textarea{ background:var(--bg3); border:1px solid var(--line); border-radius:7px; color:var(--white); padding:8px 10px; font-size:0.92rem; font-weight:400; font-family:inherit; } .editor-form textarea{resize:vertical;} .editor-page-body{font-family:ui-monospace, monospace; font-size:0.85rem; line-height:1.5;} .editor-hint{font-weight:400; font-size:0.76rem; color:var(--gray); opacity:.8;} .editor-export-btn{display:inline-block; margin:6px 0 4px; text-decoration:none;} .editor-export-hint{margin:0 0 18px;} .editor-inline-check{flex-direction:row !important; align-items:center; gap:8px !important;} .editor-inline-check input{width:16px; height:16px;} .editor-form-actions{display:flex; gap:10px; flex-wrap:wrap;} .editor-feedback{font-size:0.85rem; min-height:1.2em;} .editor-feedback.is-error{color:#ff6b7d;} .editor-feedback.is-ok{color:#4ade80;} .editor-balance-check{ background:var(--bg3); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:0.85rem; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .editor-balance-label{color:var(--gray); font-weight:600;} .editor-balance-check.in-corridor{border-color:#4ade80;} .editor-balance-check.out-corridor{border-color:#ff6b7d;} .editor-affinities{border:1px solid var(--line); border-radius:8px; padding:12px;} .editor-affinities legend{color:var(--gray); font-size:0.8rem; font-weight:700; padding:0 6px;} .editor-affinity-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;} @media (max-width:520px){ .editor-affinity-grid{grid-template-columns:1fr;} } .editor-affinity-row{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:0.85rem;} .editor-affinity-row select{ background:var(--bg3); border:1px solid var(--line); border-radius:6px; color:var(--white); padding:5px 8px; font-size:0.82rem; } /* Inline-Editor-Marker (editor-widgets.js) auf Gegner-/Items-/Content-Seiten */ #editorMountEnemy, #editorMountItems{margin:14px 0 4px;} .editor-inline-toggle{margin-bottom:12px;} [data-editor-page-slug] .editor-inline-toggle{margin:8px 0 14px;} .editor-inline-form{margin-top:6px;} .dm-bank-balances{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;} .dm-bank-balance-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--bg3); border:1px solid var(--line); border-radius:10px; padding:10px 12px; } .dm-bank-balance-row .dm-bank-name{font-weight:700; flex:1; min-width:110px;} .dm-bank-balance-row .dm-bank-yen{color:var(--accent2); font-weight:800; min-width:80px;} .dm-bank-adjust-form{display:flex; align-items:center; gap:6px; flex-wrap:wrap;} .dm-bank-adjust-form input{ width:90px; padding:7px 8px; border-radius:8px; border:1px solid var(--line); background:var(--bg2); color:var(--white); } @media (min-width:640px){ .phone-app-grid{grid-template-columns:repeat(4, 1fr);} } /* iOS Safari auto-zooms the whole page on focusing any input/textarea/select whose *computed* font-size is under 16px — happened on the chat inputs, the DM chat inputs, and (had this stayed unfixed) any future small form field. !important is deliberate here: enumerating and hand-editing every existing and future input rule to individually stay >=16px is exactly the kind of thing that regresses the next time a new form is added, whereas this single blanket rule is a permanent guarantee, and there's no real input where iOS's own zoom-prevention is not what we want. Combined with maximum-scale=1/user-scalable=no on the viewport meta tag (page_shell()), the whole phone UI now behaves like a real fixed-chrome app instead of a zoomable webpage. */ @media (max-width: 600px){ input, select, textarea{font-size:16px !important;} }