/* ttsplayer.css 2026-03-17 legal location: www.manythings.org */
:root{--desktop-boost: 1;--en-ratio: 1.0;--font-user-setting: 1.6;--bg: #f4f4f4;-text: #000;--panel: #fff;--accent: #007aff;--accent2: #88f;--lang1: black;--lang2: navy;--modal-bg: rgba(0,0,0,0.5);--wc-tom: #B3E5FC;--wc-john: #C8E6C9;--wc-mary: #F8BBD0;--wc-alice: #FFE0B2;--wc-boston: #E1F5FE;--wc-chicago: #FFF9C4;--wc-french: #F5F5F5;--wc-australia: #E0F2F1;--wc-canadian: #EFEBE9;--wc-monday: #E8EAF6;--wc-october: #F3E5F5;--wc-text: #000;}
body.dark{--bg: #111;--text: #eee;--panel: #222;--accent: #0a84ff;--accent2: #44f;--lang1: #eff;--lang2: #ffc;--modal-bg: rgba(0,0,0,0.8);--wc-tom: #01579B;--wc-john: #1B5E20;--wc-mary: #880E4F;--wc-alice: #E65100;--wc-boston: #263238;--wc-chicago: #3E2723;--wc-french: #333333;--wc-australia: #004D40;--wc-canadian: #4E342E;--wc-monday: #1A237E;--wc-october: #4A148C;--wc-text: #fff;}
body{font-family:system-ui, -apple-system, sans-serif;background:var(--bg);color: var(--text);margin: 0;padding:20px;transition: background 0.3s;}
.hidden{display:none !important;}
.card{padding:25px;max-width: 1600px;margin: auto;position: relative;}
.modal-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background:var(--modal-bg);display:flex;align-items: center;justify-content: center;z-index: 1000;}
.modal-content{background:var(--panel);padding:20px;border-radius: 12px;width: 90%;max-width: 400px;max-height: 90vh;overflow-y: auto;color: var(--text);}
.controls{display:flex;justify-content: center;gap: 8px;margin: 10px 0;}
select, input{padding:6px;border-radius: 4px;border: 1px solid #ccc;background:var(--panel);color: var(--text);}
.jump-box{display:flex;align-items: center;gap: 10px;margin-top: 10px;}
#toast{position: fixed;top: 60px;left: 50%;transform: translateX(-50%);background:rgba(51, 51, 51, 0.95);color: #fff;padding:15px 30px;border-radius: 30px;font-size: 1.5rem;z-index: 2000;box-shadow: 0 4px 15px rgba(0,0,0,0.3);transition: opacity 0.3s;}
.firstbelowmenu{margin-top: 14px;}
.font-system, .font-sans{font-family:system-ui, -apple-system, sans-serif !important;}
.font-serif{font-family:ui-serif, serif !important;}
.font-mono{font-family:"Osaka",ui-monospace, monospace !important;}
.font-klee{font-family:'Klee One', cursive !important;}
.font-yuji{font-family:'Yuji Syuku', serif !important;}
.font-rounded{font-family:"Rounded Mplus 1c","Comic Sans MS","Chalkboard","Arial Rounded MT Bold:",ui-rounded, system-ui, sans-serif !important;}
.font-cursive{font-family:"Vivaldi", "Lucida Handwriting","Brush Script MT",cursive !important;}
.font-fantasy{font-family:"HonyaJi-Re", "Papyrus", "Harrington", ui-fantasy, fantasy !important;}
.dice-btn{background:#6c757d;border: none;font-size: 1.4rem;padding:5px 10px;}
.dice-btn-start{background:#6c757d;border: none;font-size: 2.6rem;padding:5px 10px;}
.attr{font-size: 1rem;color: #777;text-align: center;margin-top: 0px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.attr:hover{white-space: normal;overflow: visible;}
.lang1{text-align: left;color: var(--lang1);font-size: calc(3rem * var(--font-user-setting) * var(--en-ratio) * var(--desktop-boost)) !important;line-height: 1.2;font-style: italic;}
.lang2{color: var(--lang2);text-align: left;margin-top: 10px;font-size: calc(3rem * var(--font-user-setting) * var(--desktop-boost)) !important;}
#copy-btn{display:none;}
@media screen and (min-width: 900px){#copy-btn{display:inline-block;}}
@keyframes pulse-blue{0%{background-color: var(--accent2);}
50%{background-color: #f44;}
100%{background-color: var(--accent2);}}
.pulse-button{animation: pulse-blue 2s infinite;}
.center-text{text-align: center !important;width: 100%;display:block;}
.center-text{text-align: center !important;display:block !important;width: 100% !important;}
.rtl-dir{direction: rtl !important;unicode-bidi: isolate;}
button{padding:10px 15px;cursor: pointer;border-radius: 8px;border: 1px solid #bbb;background:var(--accent);color: white;font-weight: bold;}
.dice-btn-start{background:#6c757d;border: none;font-size: 2.6rem !important;padding:5px 10px;}
#pause-btn{padding:2px 8px !important;line-height: 1 !important;background:var(--accent2);color: white;font-size: 3.6rem !important;flex-grow: 0;min-width: 60px;}
.tts-warning{color: #d9534f;text-align: center;font-size: 1.2rem;}
@media screen and (min-width: 900px){:root{--desktop-boost: 2;}
.tts-warning{font-size: 1.8rem;}
.attr{font-size: 1.6rem;white-space: normal;}
#progress-label{font-size: 1.4rem !important;margin-bottom: 20px !important;}
input[type="number"], input[type="text"], select, .test-voice-btn{font-size: 1.1rem;padding:8px;}
button:not(#pause-btn):not(.dice-btn-start):not(.test-voice-btn){font-size: 1.4rem;padding:6px 12px;}
.test-voice-btn{font-size: 1.1rem;}}
.tom{background-color: var(--wc-tom);}
.john{background-color: var(--wc-john);}
.mary{background-color: var(--wc-mary);}
.alice{background-color: var(--wc-alice);}
.french{background-color: var(--wc-french);}
.australia{background-color: var(--wc-australia);}
.canadian{background-color: var(--wc-canadian);}
.monday{background-color: var(--wc-monday);}
.october{background-color: var(--wc-october);}
.boston{background-color: var(--wc-boston);}
.chicago{background-color: var(--wc-chicago);}
body.dark .wildcard{border: 1px solid rgba(255,255,255,0.1);}
body.dark-mode .tom{background-color: #882222;color: #fff;}
body.dark-mode .mary{background-color: #226622;color: #fff;}
body.dark-mode .john{background-color: #222288;color: #fff;}