narrat 2.0.7 → 2.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +90 -23
  2. package/dist/app.vue.d.ts +0 -10
  3. package/dist/audio.7z +0 -0
  4. package/dist/data/example.rpy +8 -1
  5. package/dist/lib.css +1 -1
  6. package/dist/narrat.es.js +255 -226
  7. package/dist/narrat.es.js.map +1 -1
  8. package/dist/narrat.umd.js +84 -84
  9. package/dist/narrat.umd.js.map +1 -1
  10. package/dist/stores/main-store.d.ts +41 -34
  11. package/dist/stores/vm-store.d.ts +45 -38
  12. package/dist/types/parser.d.ts +1 -0
  13. package/dist/vm/commands/command-plugin.d.ts +14 -1
  14. package/package.json +1 -1
package/README.md CHANGED
@@ -1,38 +1,105 @@
1
1
  # 🚀 Narrat
2
2
 
3
- ## Narrat 2.0
3
+ ![example workflow](https://github.com/nialna/narrat/actions/workflows/main.yml/badge.svg)
4
4
 
5
- This is the narrat 2.0 branch. See the [Narrat 2.0 update docs](https://docs.get-narrat.com/readme/narrat-2.0) for more info, or look at the changelog.
5
+ Narrat is a game engine for making interactive narrative RPGs packed with features.. Create your game by editing with a Simple scripting syntax. It supports Skills with skill check rolls, an Items inventory, and has a Quests System. The script system is very powerful and allows branching choices, functions, variables and conditions.
6
6
 
7
- 2.0 version can be installed with `npm install narrat@next`, as it's not pushed as the main release yet (main release is still 1.x).
7
+ More info on the [narrat website](https://get-narrat.com). There is an [online demo](https://get-narrat.com/demo/) available to try in the browser.
8
8
 
9
- There are syntax changes in usage of $if functions and also an auto script converter available in the [2.0 update docs](https://docs.get-narrat.com/readme/narrat-2.0).
9
+ ## Getting Started
10
10
 
11
- ## Original Docs
11
+ The best way to get started in a minute is to follow the [Getting Started](https://docs.get-narrat.com/guides/getting-started) documentation page. It shows you to download the ready-to-use game template to get started writing a game with narrat.
12
12
 
13
- ![example workflow](https://github.com/nialna/narrat/actions/workflows/main.yml/badge.svg)
13
+ ## Development (for contributors)
14
+
15
+ Narrat is written in [TypeScript](https://www.typescriptlang.org/). It uses the [Vue](https://vuejs.org/) framework for front-end development. It also uses [pinia](https://pinia.vuejs.org/) for state management
16
+
17
+ ### Requirements
18
+
19
+ - [node.js](https://nodejs.org/en/) (Downloading LTS is fine)
20
+ - A text editor capable of editing a TypeScript and Vue.js project. Recommended: [VSCode](https://code.visualstudio.com/) and the extension [Volar](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-volar) for Vue.
21
+
22
+ ### Running the engine for development
23
+
24
+ 1. Install dependencies
25
+
26
+ `npm install`
27
+
28
+ 2. Run the demo
29
+
30
+ `npm start`
31
+
32
+ This starts the engine on the demo page with the `example.rpy` demo script loaded for testing.
33
+
34
+ ### Available npm commands
35
+
36
+ - `start`: Start the demo for development
37
+ - `build`: The main build command, builds the library in a state ready to use or publish.
38
+ - `test`: Unit tests, used in CI
39
+ - `dev`: Same as start
40
+ - `generate-types`: Generates `.d.ts` type declaration files for the library (auto run on builds)
41
+ - `fix-type-aliases`: Uses [tsc-alias](https://www.npmjs.com/package/tsc-alias) to auto-replace [path mappings](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping) in the built files, as the TypeScript compiler doesn't do it. (auto run at the end of builds)
42
+ - `lint`: Runs the linter on the code (used in CI)
43
+ - `check-types`: Validates TypeScript types.
44
+
45
+ ### CI info
46
+
47
+ The following tasks run on CI, and CI is required to pass for pull requests to be merged:
48
+
49
+ - Linting
50
+ - Engine build
51
+ - Unit tests (currently only the parser is unit tested)
52
+ - TypeScript type checking.
53
+
54
+ Please make sure your code passes lint/tests/build/type checks before opening a PR.
55
+
56
+ ### Working on the code
57
+
58
+ The narrat codebase isn't currently documented, outside of the [usage docs](https://docs.get-narrat.com). The code is fully written in TypeScript though and should be clearly separated enough to be approachable.
59
+
60
+ ### Engine architecture
61
+
62
+ The narrat engine runs primarily as a Vue app. All the UI in the game is made of Vue components, and when a game uses narrat it effectively creates a Vue app.
63
+
64
+ #### App state
65
+
66
+ The engine's state is stored in pinia. It is split in separate pinia modules for different areas of the engine. They can all be found in the [src/stores](src/stores) folder.
67
+
68
+ - `audio`: handles playing and stopping audio and music
69
+ - `dialog`: Receives and stores all lines of dialogue created by game scripts which appear at the right of the game in the main interactive narrative view.
70
+ - `hud`: Stores stats which are displayed on the hud
71
+ - `inventory`: Manages the player's item inventory
72
+ - `main`: Manages app-level logic and other generic systems like startup/reset/load/save
73
+ - `notifications`: Manages notifications which appear at the top of the screen
74
+ - `quests`: Manages quests and objectives
75
+ - `rendering`: Manages the layout's state for dynamically placing and resizing the game UI
76
+ - `skills`: Manages player skills and xp. Also store skill check states
77
+ - `vm`: Manages the virtual machine which runs the scripting language and controls the game flow.
78
+
79
+ All stores can be accessed anywhere in the code with the `use` hooks (example: `useVM()`).
80
+
81
+ #### Scripting language (VM and parser)
82
+
83
+ The scripting language for narrat runs in a virtual machine which has its state stored in the Vue app with Pinia.
84
+
85
+ The narrat scripting language relies on the parser and the vm. The code for the parser is mainly in [src/vm/vm-parser.ts](src/vm/vm-parser.ts). The parser is in charge of taking the `.rpy` files as input, and returning a tree of parsed expressions that the engine can use.
86
+
87
+ The actual VM is what runs narrat games, and generally controls the flow of the application. The general logic for the vm is in the `vm` store, but there is also some logic sprinkled in the `src/vm` file.
88
+
89
+ All the actual operations available to the scripting language (like `talk`) are defined as Command plugins. The built-in commands included in the language by default are in the [src/vm/commands](src/vm/commands/) folder. More command can be added by games by registering plugins.
14
90
 
15
- A narrative game engine for text-based games. Inspired by renpy syntax, but built to be customisable, extendable and web-focused. See the [website](https://get-narrat.com)
91
+ #### Adding new commands
16
92
 
17
- ![Narrat banner image](https://gblobscdn.gitbook.com/assets%2F-Mh95QNKFZeeRV90-ZSq%2F-MiI7tyjjriQTQI80bhM%2F-MiI83Ys6ED75AlZ_dVT%2Fnarrat-banner.jpg?alt=media&token=9d72e03f-c2ba-4fcb-8579-491b0f8940d8)
93
+ Language commands are defined in the `vm/commands` folder. It should be easy to add new commands to the game engine by looking at the existing commands as an example. New command plugins are included in the `vm/commands/index` file.
18
94
 
19
- You can [try a little demo](https://get-narrat.com/demo/). It contains a built version of the [narrat demo repo](https://github.com/nialna/narrat-demo).
95
+ #### Config file
20
96
 
21
- Game dialogue info is written in files with a similar syntax to Renpy (.rpy files). Those files get loaded by the game engine which plays through them. This allows us to use [renpy syntax highlighting](https://marketplace.visualstudio.com/items?itemName=LuqueDaniel.languague-renpy) in vs code easily. It is **not renpy** though, just inspired from it. Eventually narrat might have its own language and file extension support.
97
+ The main config file has a type defined in `src/config.ts`. The vast majority of the config options for narrat are passed in this config files, which games must provide to the engine when starting. New options for the engine should be added to the type for the config file, and also have their default value included in the `src/defaultConfig.ts` file.
22
98
 
23
- ## Usage
99
+ Engine code can access the config with the `getConfig()` function.
24
100
 
25
- See the [Documentation](https://docs.get-narrat.com/) for more info, or jump directly in the [Getting Started Guide](https://docs.get-narrat.com/getting-started)
101
+ #### Plugin system
26
102
 
27
- ## Features
103
+ There is now a plugin system developers can use to add new functionality to narrat (more documentation soon). See the [narrat-bitsy](https://github.com/liana-pigeot/narrat-bitsy) plugin for an example.
28
104
 
29
- - Flexible dialog writing with branching and conditions
30
- - Multiple script files support with labels and jumps to organise script writing
31
- - Multiple speaking characters support with icons and poses
32
- - Custom variables in scripts to create flags or other data the game needs to track
33
- - Seamless saving and reloading
34
- - UI with buttons that can be used for example to create world maps with clickable locations (the buttons can be controlled in scripts)
35
- - Sound and music support
36
- - Delays between script lines
37
- - Electron build to turn the game into a pc/mac/linux app (template to be updated with example soon)
38
- - Skill checks (Feature still early, needs a UI for viewing skills and creating characters)
105
+ (Note: The narrat-bitsy plugin hasn't been updated for 2.0.0 and might be a bit out of date).
package/dist/app.vue.d.ts CHANGED
@@ -1,8 +1,6 @@
1
1
  import { PropType } from 'vue';
2
- import { DialogBoxParameters } from './types/dialog-box-types';
3
2
  import { GameConfig } from './types/app-types';
4
3
  import { AppOptions } from './config';
5
- import { DialogKey } from './stores/dialog-store';
6
4
  declare const _default: import("vue").DefineComponent<{
7
5
  config: PropType<GameConfig>;
8
6
  options: PropType<AppOptions>;
@@ -59,9 +57,6 @@ declare const _default: import("vue").DefineComponent<{
59
57
  loadingPercentage: number;
60
58
  hasSave: boolean;
61
59
  }, {
62
- dialogLength(): number;
63
- lastDialog(): DialogKey | undefined;
64
- picture(): string | undefined;
65
60
  backgroundStyle(): any;
66
61
  layoutWidth(): number;
67
62
  gameTitle(): string;
@@ -73,14 +68,11 @@ declare const _default: import("vue").DefineComponent<{
73
68
  left: number;
74
69
  top: number;
75
70
  };
76
- dialogWidth(): number;
77
- dialogStyle(): any;
78
71
  gameWidth(): number;
79
72
  gameHeight(): number;
80
73
  appStyle(): any;
81
74
  gameStyle(): any;
82
75
  screenRatio(): number;
83
- dialogContainerStyle(): any;
84
76
  currentLine: () => import("./types/parser").Parser.ParsedExpression<import("./types/parser").Parser.DefaultArg, {}> | undefined;
85
77
  screenWidth: () => number;
86
78
  screenHeight: () => number;
@@ -94,11 +86,9 @@ declare const _default: import("vue").DefineComponent<{
94
86
  getSaveFile(): string | null;
95
87
  startGame(): Promise<void>;
96
88
  loadGame(): Promise<void>;
97
- isDialogActive(i: number): boolean;
98
89
  nextLine(): void;
99
90
  updateScreenSize(): void;
100
91
  closeModal(): void;
101
- getDialogBoxOptions(dialogKey: DialogKey, index: number): DialogBoxParameters;
102
92
  }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
103
93
  config: PropType<GameConfig>;
104
94
  options: PropType<AppOptions>;
package/dist/audio.7z ADDED
Binary file
package/dist/data/example.rpy CHANGED
@@ -1,11 +1,17 @@
1
1
  main:
2
+ run lorem
3
+ "Hello world (text test)"
4
+ var meal (run takeout_menu Cake)
2
5
  var playerName (text_field "Enter your name")
3
6
  "Your name is %{playerName}"
4
- var meal (run takeout_menu Cake)
5
7
  "The player chose to eat %{meal}"
6
8
  // play music calm
7
9
  jump quest_demo
8
10
 
11
+ lorem:
12
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum tempus erat non maximus. Donec pellentesque quis nisi et cursus. Vestibulum vel pellentesque ligula. Cras et iaculis metus, vitae sollicitudin augue. Aenean porttitor feugiat quam nec molestie. Quisque ultrices eleifend sagittis. Nullam sodales nec mauris nec vulputate."
13
+ return "lorem"
14
+
9
15
  takeout_menu third_option:
10
16
  var meal ""
11
17
  choice:
@@ -250,6 +256,7 @@ parkButton:
250
256
  talk helper idle "Ah, so do you have my bread?"
251
257
  "Yes!" if (>= $items.bread.amount 2):
252
258
  talk helper idle "Thanks a lot!"
259
+ add_item bread -2
253
260
  complete_objective breadShopping delivery
254
261
  complete_quest breadShopping
255
262
  "No :(":
package/dist/lib.css CHANGED
@@ -1 +1 @@
1
- /*! @import *//*! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com */*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.w-full{width:100%}.flex-shrink{flex-shrink:1}.flex-grow{flex-grow:1}.table-auto{table-layout:auto}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.list-disc{list-style-type:disc}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.gap-4{gap:1rem}.border{border-width:1px}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.line-through{-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root{--font-family: "Helvetica", sans-serif, "Arial", "sans-serif";--bg-color: #131720;--text-color: #d9e1f2;--primary: hsl(255, 30%, 55%);--focus: hsl(210, 90%, 50%);--secondary: #42b983;--border-color: hsla(0, 0%, 100%, .2);--light-1: hsl(210, 30%, 40%);--light-2: hsl(255, 30%, 50%);--light-background: linear-gradient(to right, var(--light-1), var(--light-2));--shadow-1: hsla(236, 50%, 50%, .3);--shadow-2: hsla(236, 50%, 50%, .4);--hud-background: rgba(0, 0, 0, .4);--hud-text-color: var(--text-color);--notifications-bg: darkslateblue;--skills-text-background: rgba(0, 0, 0, .5);--skills-text-color: var(--text-color);--skills-level-background: rgba(0, 0, 0, .5);--skills-level-color: orange;--skills-xp-bar-height: 40px;--skill-check-name-color: orange;--skill-check-difficulty: orange;--skill-check-success: green;--skill-check-failed: red;--skill-check-color: orange;--dialog-choice-color: orange;--dialog-choice-hover-color: var(--text-color);--inventory-text-background: rgba(0, 0, 0, .5);--inventory-text-color: var(--text-color);--inventory-amount-background: rgba(0, 0, 0, .5);--inventory-amount-color: orange;--quest-title-color: yellow;--completed-quest-title-color: grey;--objective-in-progress-color: white;--objective-completed-color: grey}body,*{font-family:var(--font-family)}.list-item{display:inline-block;margin-right:10px}.list-enter-active,.list-leave-active{transition:all .3s ease}#app{background-size:cover}.list-enter-from,.list-leave-to{opacity:0;transform:translate(300px)}.notification-item{display:inline-block;margin-right:10px}.notification-enter-active,.notification-leave-active{transition:all .3s ease}.notification-enter-from,.notification-leave-to{opacity:0;transform:translateY(-300px)}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}.fade-in-enter-active{transition:opacity .1s ease}.fade-in-enter-from{opacity:0}body{padding:0;margin:0;font-family:Arial,sans-serif;background-color:#000}.select{background:var(--light-background);padding:10px}.option{background-color:var(--light-2);padding:5px;color:var(--text-color)}.button{background:var(--light-background);color:var(--text-color);box-shadow:.4rem .5rem 2.4rem .2rem var(--shadow-1),inset -2px -4px #0006,inset 2px 2px #fff7;border-radius:10px;padding:10px;font-weight:800;font-size:16px;margin:10px;transition:.2s;box-shadow:inset -2px -4px #0006,inset 2px 2px #fff7}.button.large{border-radius:20px}.menu-button{border-radius:5px}.button.main-menu-button{border-radius:20px}.button:focus,.button:hover{transform:translateY(-.2rem);box-shadow:0 0 1rem .2rem var(--shadow-2),inset -2px -4px #0006,inset 2px 2px #fff7}.disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.button.disabled{box-shadow:unset;color:gray;background:var(--border-color)}.input{background:var(--light-background);color:var(--text-color);box-shadow:.4rem .4rem 2.4rem .2rem var(--shadow-1);border-radius:100px;padding:10px;font-weight:800;font-size:16px;margin:10px;transition:.2s}.input:focus,.input:hover{transform:translateY(-.2rem);box-shadow:0 0 2.4rem .2rem var(--shadow-2)}a{color:pink;text-decoration:underline}th,td{padding:4px;border:1px solid var(--text-color);text-align:center}#game-holder{width:100vw;height:100vh;padding:0;margin:0;top:0;left:0;background-color:#000;display:flex;align-items:center;justify-content:center;min-height:-webkit-fill-available}.title{font-size:30px;font-weight:700;text-align:center}.container{padding:20px}h1,h2,h3,h4{font-weight:700}h1{font-size:30px}h2{font-size:26px}h3{font-size:24px}hr.solid{border:1px solid var(--text-color);margin-top:30px;margin-bottom:30px}.card-1{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;transition:all .3s cubic-bezier(.25,.8,.25,1)}.card-1:hover{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}.card-2{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.card-3{box-shadow:0 10px 20px #00000030,0 6px 6px #0000003b}.card-4{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}.card-5{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038}.dialog-choice{transition:.2s}.dialog-choice:hover{transform:scale(1.05);transform-origin:center}.dialog-choice:not(:hover)>.skill-check-name,.passive-skill-check>.skill-check-name{color:var(--skill-check-name-color)}.dialog-choice:not(:hover)>.skill-check-difficulty,.passive-skill-check>.skill-check-difficulty{color:var(--skill-check-difficulty)}.skill-check-difficulty{font-weight:700}.dialog-choice:not(:hover)>.skill-check-success,.passive-skill-check>.skill-check-success{color:var(--skill-check-success)}.dialog-choice:not(:hover)>.skill-check-failed,.passive-skill-check>.skill-check-failed{color:var(--skill-check-failed)}.dialog-choice:not(:hover)>.skill-check,.passive-skill-check.skill-check{color:var(--skill-check-color)}.narrat-canvas{position:absolute;height:100%;top:0;left:0}#touchTrigger{pointer-events:none}.modal-mask{position:absolute;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;transition:opacity .3s ease;display:flex;flex-direction:column;flex-shrink:2 2;align-items:center;justify-content:center}.modal-container{min-width:300px;max-width:90vw;max-height:100%;overflow-y:hidden;margin:10px auto;padding:20px 30px;border-radius:5px;transition:all .3s ease;font-family:Helvetica,Arial,sans-serif;background:linear-gradient(to right,hsl(210,30%,20%),hsl(255,30%,25%));display:flex;flex-direction:column}.modal-header{position:relative}.modal-header h3{flex-shrink:0;margin-top:0;color:var(--secondary)}.modal-body{margin:20px 0;overflow-y:auto;flex-shrink:2}.modal-default-button{float:right}.modal-enter,.modal-leave-active{opacity:0}.modal-enter .modal-container,.modal-leave-active .modal-container{transform:scale(1.1)}.close-button{border:1px solid var(--text-color);border-radius:50px;font-size:30px;font-weight:700;position:absolute;right:-20px;top:-10px;width:50px;height:50px}.close-button:hover{background-color:var(--focus)}.debug-menu{z-index:9999}.debug-button{position:fixed;bottom:10px;right:10px;padding:5px}.error-message{color:#ff4500;margin-top:10px;margin-bottom:10px}.error-filename{color:gray;text-decoration:underline}.debug-menu-container{width:100%}.search-result{border:1px solid var(--text-color);padding:10px;font-weight:700;font-size:20px;width:100}.jump-menu-container{width:80%}.debug-info{position:fixed;background-color:#0009;border:1px dotted var(--text-color);top:0;left:0;padding:5px}.variables-viewer{height:100%}.volume-label{margin-right:10px;font-size:20px;font-weight:700}.volume-controls{font-size:25px;display:flex;align-items:center;justify-content:center;margin:0 20px}.volume-slider{width:200px;background-color:#00f}.hud{position:absolute;right:0;top:0;display:flex;flex-direction:row-reverse;z-index:3}.hud-stat{border:1px dotted white;background-color:var(--hud-background);color:var(--hud-text-color);padding:5px}.hud-icon{display:inline-block;height:1em}.hud-text{margin-left:5px}#loading-bar{position:relative;width:40vw;height:100px;border-radius:50px;background:black}#inner-loading-bar{height:100%;border-radius:50px 0 0 50px;background:var(--light-background)}#loading-text{z-index:99999;display:flex;align-items:center;justify-content:space-around;position:absolute;width:100%;height:100%;top:0}.notifications-holder{position:fixed;top:0;right:0;padding:10px;display:flex;flex-direction:column-reverse;align-items:center;pointer-events:none}.notification{margin-top:10px;margin-bottom:10px;border-radius:10px;padding:15px;background:var(--notifications-bg);width:40vh;text-align:center}.quit-button{margin:20px;text-align:center}.skills-modal{width:800px}.skills-container{display:grid;grid-auto-rows:auto;grid-template-columns:repeat(3,1fr);grid-gap:20px 20px}.skill-display{width:200px;height:300px;position:relative;background-size:cover}.skill-title{position:absolute;bottom:0px;text-align:center;width:100%;color:var(--skills-text-color);background:var(--skills-text-background)}.skill-level{position:absolute;top:0;right:0;font-weight:700;font-size:25px;color:var(--skills-level-color);width:var(--skills-xp-bar-height);height:var(--skills-xp-bar-height);background-color:var(--skills-level-background)}.skill-description-container{justify-content:space-between;align-items:stretch}.skill-left{flex-direction:column;border:1px dashed white;padding:10px;justify-content:center}.skill-right{border:1px dashed white;flex-direction:column;flex-grow:2;align-items:baseline}.skill-xp-container{position:absolute;top:0;left:0;height:var(--skills-xp-bar-height);width:calc(100% - var(--skills-xp-bar-height));background-color:#00000080}.skill-xp-bar{position:absolute;top:0;left:0;width:50%;height:100%;background-color:#0000fa80}.skill-xp-text{z-index:2}.inventory-modal{width:800px;min-height:50%}.inventory-container{display:grid;grid-auto-rows:auto;grid-template-columns:repeat(3,1fr);grid-gap:20px 20px}.item-display{width:200px;height:300px;position:relative;background-repeat:no-repeat;background-size:contain}.item-title{position:absolute;bottom:0px;text-align:center;width:100%;color:var(--inventory-text-color);background:var(--inventory-text-background)}.item-amount{position:absolute;top:0;right:0;font-weight:700;font-size:25px;color:var(--inventory-amount-color);width:40px;height:40px;background-color:var(--inventory-amount-background)}.item-description-container{justify-content:space-between;align-items:stretch}.item-left{border:1px dashed white;flex-direction:column;padding:10px;justify-content:center}.item-right{border:1px dashed white;flex-direction:column;flex-grow:2;align-items:baseline;padding:10px}.dialog-picture{position:absolute;width:80px;height:80px;border:2px solid white;border-radius:10px;background-color:gray;z-index:99}.dialog-picture img{width:100%;height:100%}.dialog-title{font-size:20px;font-weight:700}.dialog-text{font-size:16px}.dialog-box{color:var(--text-color);padding:10px 10px 10px 2em;margin-bottom:10px}.dialog-choice{color:var(--dialog-choice-color)}.dialog-choice:hover{color:var(--dialog-choice-hover-color);cursor:pointer}.buttons-container{width:100%;padding:10px;display:flex;justify-content:space-evenly;align-items:stretch;box-sizing:border-box}.interact-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;height:50px;color:var(--text-color);border:1px solid black;font-weight:700;font-size:24px;text-align:center;flex-grow:2;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.dialog-container{flex-shrink:2;min-height:100%;width:100%;background-color:(var(--bg-color));box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;overflow-x:hidden}.dialog{overflow-y:auto;overflow-x:hidden;position:relative;-ms-overflow-style:none;scrollbar-width:none}.dialog::-webkit-scrollbar{display:none}.dialog *{overflow-anchor:none}.anchor{overflow-anchor:auto;height:1px}.quests-modal{width:100%;min-height:50%}.quest-header{display:flex;flex-direction:row;align-items:center}.quest-title{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.quest-completed{color:var(--completed-quest-title-color)}.quest-in-progress{color:var(--quest-title-color)}.quest-state{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}.quest-description{font-size:1.1rem;text-align:justify;font-style:italic;margin-bottom:.5rem}.quest-objectives-container{margin-left:10px}.quest-objective-completed{color:var(--objective-completed-color);text-decoration:line-through}.quest-objective-in-progress{color:var(--objective-in-progress-color)}.quest-objective-description{font-size:1rem;margin-bottom:.5rem}.menu-content{text-align:center}.menu-toggle-button{margin:0;padding:2px;border-radius:5px}.menu-toggle-button:not(:last-child){margin-right:10px}.menu-modal{width:500px}#app{background-color:var(--bg-color);width:100%;height:100%;position:absolute;display:flex;flex-direction:row;align-items:center;justify-content:center;color:var(--text-color);box-sizing:border-box;overflow:hidden;transform-origin:center center}.game{background-color:var(--bg-color);position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;height:100%;box-sizing:border-box;overflow:hidden}.interact-button{height:50px;border:1px solid black;font-weight:700;font-size:20px;text-align:center;flex-grow:2;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.interact-button:not(:last-child){margin-right:10px}.background{margin:0}#background-canvas{height:100%}.menu-toggle{position:fixed;bottom:0px;right:15%;z-index:2}#game-title-container{margin-bottom:50px}#game-title-text{text-align:center;font-size:50px}.menu-button{font-size:25px}#game-header{position:relative;top:100px}
1
+ /*! @import *//*! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com */*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.w-full{width:100%}.flex-shrink{flex-shrink:1}.flex-grow{flex-grow:1}.table-auto{table-layout:auto}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.list-disc{list-style-type:disc}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.gap-4{gap:1rem}.border{border-width:1px}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.line-through{-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root{--font-family: "Helvetica", sans-serif, "Arial", "sans-serif";--bg-color: #131720;--text-color: #d9e1f2;--primary: hsl(255, 30%, 55%);--focus: hsl(210, 90%, 50%);--secondary: #42b983;--border-color: hsla(0, 0%, 100%, .2);--light-1: hsl(210, 30%, 40%);--light-2: hsl(255, 30%, 50%);--light-background: linear-gradient(to right, var(--light-1), var(--light-2));--shadow-1: hsla(236, 50%, 50%, .3);--shadow-2: hsla(236, 50%, 50%, .4);--hud-background: rgba(0, 0, 0, .4);--hud-text-color: var(--text-color);--notifications-bg: darkslateblue;--skills-text-background: rgba(0, 0, 0, .5);--skills-text-color: var(--text-color);--skills-level-background: rgba(0, 0, 0, .5);--skills-level-color: orange;--skills-xp-bar-height: 40px;--skill-check-name-color: orange;--skill-check-difficulty: orange;--skill-check-success: green;--skill-check-failed: red;--skill-check-color: orange;--dialog-choice-color: orange;--dialog-choice-hover-color: var(--text-color);--inventory-text-background: rgba(0, 0, 0, .5);--inventory-text-color: var(--text-color);--inventory-amount-background: rgba(0, 0, 0, .5);--inventory-amount-color: orange;--quest-title-color: yellow;--completed-quest-title-color: grey;--objective-in-progress-color: white;--objective-completed-color: grey}body,*{font-family:var(--font-family)}.list-item{display:inline-block;margin-right:10px}.list-enter-active,.list-leave-active{transition:all .3s ease}#app{background-size:cover}.list-enter-from,.list-leave-to{opacity:0;transform:translate(300px)}.notification-item{display:inline-block;margin-right:10px}.notification-enter-active,.notification-leave-active{transition:all .3s ease}.notification-enter-from,.notification-leave-to{opacity:0;transform:translateY(-300px)}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}.fade-in-enter-active{transition:opacity .1s ease}.fade-in-enter-from{opacity:0}body{padding:0;margin:0;font-family:Arial,sans-serif;background-color:#000}.select{background:var(--light-background);padding:10px}.option{background-color:var(--light-2);padding:5px;color:var(--text-color)}.button{background:var(--light-background);color:var(--text-color);box-shadow:.4rem .5rem 2.4rem .2rem var(--shadow-1),inset -2px -4px #0006,inset 2px 2px #fff7;border-radius:10px;padding:10px;font-weight:800;font-size:16px;margin:10px;transition:.2s;box-shadow:inset -2px -4px #0006,inset 2px 2px #fff7}.button.large{border-radius:20px}.menu-button{border-radius:5px}.button.main-menu-button{border-radius:20px}.button:focus,.button:hover{transform:translateY(-.2rem);box-shadow:0 0 1rem .2rem var(--shadow-2),inset -2px -4px #0006,inset 2px 2px #fff7}.disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.button.disabled{box-shadow:unset;color:gray;background:var(--border-color)}.input{background:var(--light-background);color:var(--text-color);box-shadow:.4rem .4rem 2.4rem .2rem var(--shadow-1);border-radius:100px;padding:10px;font-weight:800;font-size:16px;margin:10px;transition:.2s}.input:focus,.input:hover{transform:translateY(-.2rem);box-shadow:0 0 2.4rem .2rem var(--shadow-2)}a{color:pink;text-decoration:underline}th,td{padding:4px;border:1px solid var(--text-color);text-align:center}#game-holder{width:100vw;height:100vh;padding:0;margin:0;top:0;left:0;background-color:#000;display:flex;align-items:center;justify-content:center;min-height:-webkit-fill-available}.title{font-size:30px;font-weight:700;text-align:center}.container{padding:20px}h1,h2,h3,h4{font-weight:700}h1{font-size:30px}h2{font-size:26px}h3{font-size:24px}hr.solid{border:1px solid var(--text-color);margin-top:30px;margin-bottom:30px}.card-1{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;transition:all .3s cubic-bezier(.25,.8,.25,1)}.card-1:hover{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}.card-2{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.card-3{box-shadow:0 10px 20px #00000030,0 6px 6px #0000003b}.card-4{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}.card-5{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038}.dialog-choice{transition:.2s}.dialog-choice:hover{transform:scale(1.05);transform-origin:center}.dialog-choice:not(:hover)>.skill-check-name,.passive-skill-check>.skill-check-name{color:var(--skill-check-name-color)}.dialog-choice:not(:hover)>.skill-check-difficulty,.passive-skill-check>.skill-check-difficulty{color:var(--skill-check-difficulty)}.skill-check-difficulty{font-weight:700}.dialog-choice:not(:hover)>.skill-check-success,.passive-skill-check>.skill-check-success{color:var(--skill-check-success)}.dialog-choice:not(:hover)>.skill-check-failed,.passive-skill-check>.skill-check-failed{color:var(--skill-check-failed)}.dialog-choice:not(:hover)>.skill-check,.passive-skill-check.skill-check{color:var(--skill-check-color)}.narrat-canvas{position:absolute;height:100%;top:0;left:0}#touchTrigger{pointer-events:none}.modal-mask{position:absolute;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;transition:opacity .3s ease;display:flex;flex-direction:column;flex-shrink:2 2;align-items:center;justify-content:center}.modal-container{min-width:300px;max-width:90vw;max-height:100%;overflow-y:hidden;margin:10px auto;padding:20px 30px;border-radius:5px;transition:all .3s ease;font-family:Helvetica,Arial,sans-serif;background:linear-gradient(to right,hsl(210,30%,20%),hsl(255,30%,25%));display:flex;flex-direction:column}.modal-header{position:relative}.modal-header h3{flex-shrink:0;margin-top:0;color:var(--secondary)}.modal-body{margin:20px 0;overflow-y:auto;flex-shrink:2}.modal-default-button{float:right}.modal-enter,.modal-leave-active{opacity:0}.modal-enter .modal-container,.modal-leave-active .modal-container{transform:scale(1.1)}.close-button{border:1px solid var(--text-color);border-radius:50px;font-size:30px;font-weight:700;position:absolute;right:-20px;top:-10px;width:50px;height:50px}.close-button:hover{background-color:var(--focus)}.debug-menu{z-index:9999}.debug-button{position:fixed;bottom:10px;right:10px;padding:5px}.error-message{color:#ff4500;margin-top:10px;margin-bottom:10px}.error-filename{color:gray;text-decoration:underline}.debug-menu-container{width:100%}.search-result{border:1px solid var(--text-color);padding:10px;font-weight:700;font-size:20px;width:100}.jump-menu-container{width:80%}.debug-info{position:fixed;background-color:#0009;border:1px dotted var(--text-color);top:0;left:0;padding:5px}.variables-viewer{height:100%}.volume-label{margin-right:10px;font-size:20px;font-weight:700}.volume-controls{font-size:25px;display:flex;align-items:center;justify-content:center;margin:0 20px}.volume-slider{width:200px;background-color:#00f}.hud{position:absolute;right:0;top:0;display:flex;flex-direction:row-reverse;z-index:3}.hud-stat{border:1px dotted white;background-color:var(--hud-background);color:var(--hud-text-color);padding:5px}.hud-icon{display:inline-block;height:1em}.hud-text{margin-left:5px}#loading-bar{position:relative;width:40vw;height:100px;border-radius:50px;background:black}#inner-loading-bar{height:100%;border-radius:50px 0 0 50px;background:var(--light-background)}#loading-text{z-index:99999;display:flex;align-items:center;justify-content:space-around;position:absolute;width:100%;height:100%;top:0}.notifications-holder{position:fixed;top:0;right:0;padding:10px;display:flex;flex-direction:column-reverse;align-items:center;pointer-events:none}.notification{margin-top:10px;margin-bottom:10px;border-radius:10px;padding:15px;background:var(--notifications-bg);width:40vh;text-align:center}.quit-button{margin:20px;text-align:center}.skills-modal{width:800px}.skills-container{display:grid;grid-auto-rows:auto;grid-template-columns:repeat(3,1fr);grid-gap:20px 20px}.skill-display{width:200px;height:300px;position:relative;background-size:cover}.skill-title{position:absolute;bottom:0px;text-align:center;width:100%;color:var(--skills-text-color);background:var(--skills-text-background)}.skill-level{position:absolute;top:0;right:0;font-weight:700;font-size:25px;color:var(--skills-level-color);width:var(--skills-xp-bar-height);height:var(--skills-xp-bar-height);background-color:var(--skills-level-background)}.skill-description-container{justify-content:space-between;align-items:stretch}.skill-left{flex-direction:column;border:1px dashed white;padding:10px;justify-content:center}.skill-right{border:1px dashed white;flex-direction:column;flex-grow:2;align-items:baseline}.skill-xp-container{position:absolute;top:0;left:0;height:var(--skills-xp-bar-height);width:calc(100% - var(--skills-xp-bar-height));background-color:#00000080}.skill-xp-bar{position:absolute;top:0;left:0;width:50%;height:100%;background-color:#0000fa80}.skill-xp-text{z-index:2}.inventory-modal{width:800px;min-height:50%}.inventory-container{display:grid;grid-auto-rows:auto;grid-template-columns:repeat(3,1fr);grid-gap:20px 20px}.item-display{width:200px;height:300px;position:relative;background-repeat:no-repeat;background-size:contain}.item-title{position:absolute;bottom:0px;text-align:center;width:100%;color:var(--inventory-text-color);background:var(--inventory-text-background)}.item-amount{position:absolute;top:0;right:0;font-weight:700;font-size:25px;color:var(--inventory-amount-color);width:40px;height:40px;background-color:var(--inventory-amount-background)}.item-description-container{justify-content:space-between;align-items:stretch}.item-left{border:1px dashed white;flex-direction:column;padding:10px;justify-content:center}.item-right{border:1px dashed white;flex-direction:column;flex-grow:2;align-items:baseline;padding:10px}.dialog-picture{position:absolute;width:80px;height:80px;border:2px solid white;border-radius:10px;background-color:gray;z-index:99}.dialog-picture img{width:100%;height:100%}.dialog-title{font-size:20px;font-weight:700}.dialog-text{font-size:16px}.dialog-box{color:var(--text-color);padding:10px 10px 10px 2em;margin-bottom:10px}.dialog-choice{color:var(--dialog-choice-color)}.dialog-choice:hover{color:var(--dialog-choice-hover-color);cursor:pointer}.buttons-container{width:100%;padding:10px;display:flex;justify-content:space-evenly;align-items:stretch;box-sizing:border-box}.interact-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;height:50px;color:var(--text-color);border:1px solid black;font-weight:700;font-size:24px;text-align:center;flex-grow:2;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.dialog-container{flex-shrink:2;min-height:100%;width:100%;background-color:(var(--bg-color));box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;overflow-x:hidden}.dialog{overflow-y:auto;overflow-x:hidden;position:relative;-ms-overflow-style:none;scrollbar-width:none}.dialog::-webkit-scrollbar{display:none}.dialog *{overflow-anchor:none}.anchor{overflow-anchor:auto;height:1px}.quests-modal{width:100%;min-height:50%}.quest-header{display:flex;flex-direction:row;align-items:center}.quest-title{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.quest-completed{color:var(--completed-quest-title-color)}.quest-in-progress{color:var(--quest-title-color)}.quest-state{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}.quest-description{font-size:1.1rem;text-align:justify;font-style:italic;margin-bottom:.5rem}.quest-objectives-container{margin-left:10px}.quest-objective-completed{color:var(--objective-completed-color);text-decoration:line-through}.quest-objective-in-progress{color:var(--objective-in-progress-color)}.quest-objective-description{font-size:1rem;margin-bottom:.5rem}.menu-content{text-align:center}.menu-toggle-button{margin:0;padding:2px;border-radius:5px}.menu-toggle-button:not(:last-child){margin-right:10px}.menu-modal{width:500px}#app{background-color:var(--bg-color);width:100%;height:100%;position:absolute;display:flex;flex-direction:row;align-items:center;justify-content:center;color:var(--text-color);box-sizing:border-box;overflow:hidden;transform-origin:center center}.game{background-color:var(--bg-color);position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;height:100%;box-sizing:border-box;overflow:hidden}.interact-button{height:50px;border:1px solid black;font-weight:700;font-size:20px;text-align:center;flex-grow:2;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.interact-button:not(:last-child){margin-right:10px}.background{margin:0}#background-canvas{height:100%}.menu-toggle{position:fixed;bottom:0px;right:15%;z-index:2}#game-title-container{margin-bottom:50px}#game-title-text{text-align:center;font-size:50px}.menu-button{font-size:25px}#game-header{position:relative;top:100px}